From 5efe046328fb395668a2235abad37caf249a4f3c Mon Sep 17 00:00:00 2001
From: Aldino Kemal <aldinokemal2104@gmail.com>
Date: Sun, 14 Jul 2024 08:59:00 +0700
Subject: [PATCH] feat: add ui getting pair code

---
 src/internal/rest/app.go                 |   1 -
 src/views/components/AppLoginWithCode.js | 101 +++++++++++++++++++++++
 src/views/index.html                     |   4 +-
 3 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 src/views/components/AppLoginWithCode.js

diff --git a/src/internal/rest/app.go b/src/internal/rest/app.go
index e9e087a..467fc00 100644
--- a/src/internal/rest/app.go
+++ b/src/internal/rest/app.go
@@ -49,7 +49,6 @@ func (handler *App) LoginWithCode(c *fiber.Ctx) error {
 			"login_code": loginCode,
 		},
 	})
-
 }
 
 func (handler *App) Logout(c *fiber.Ctx) error {
diff --git a/src/views/components/AppLoginWithCode.js b/src/views/components/AppLoginWithCode.js
new file mode 100644
index 0000000..e573c78
--- /dev/null
+++ b/src/views/components/AppLoginWithCode.js
@@ -0,0 +1,101 @@
+export default {
+    name: 'AppLoginWithCode',
+    props: {
+        connected: null,
+    },
+    data: () => {
+        return {
+            phone: '',
+            submitting: false,
+            pair_code: null,
+        };
+    },
+    methods: {
+        async openModal() {
+            try {
+                $('#modalLoginWithCode').modal({
+                    onApprove: function() {
+                        return false;
+                    },
+                }).modal('show');
+            } catch (err) {
+                showErrorInfo(err);
+            }
+        },
+        async handleSubmit() {
+            if (this.submitting) return;
+            try {
+                this.submitting = true;
+                const { response } = await this.submitApi();
+                this.pair_code = response.pair_code;
+            } catch (err) {
+                showErrorInfo(err);
+            } finally {
+                this.submitting = false;
+            }
+        },
+
+        async submitApi() {
+            try {
+                return http.get(`/app/login-with-code`, {
+                    params: {
+                        phone: this.phone,
+                    },
+                });
+            } catch (error) {
+                if (error.response) {
+                    throw Error(error.response.data.message);
+                }
+                throw Error(error.message);
+            }
+
+        },
+    },
+    template: `
+    <div class="green card" @click="openModal" style="cursor: pointer">
+        <div class="content">
+            <div class="header">Login with Code</div>
+            <div class="description">
+                Login with pairing code to get access to your devices
+            </div>
+        </div>
+    </div>
+    
+    <!--  Modal Login  -->
+    <div class="ui small modal" id="modalLoginWithCode">
+        <i class="close icon"></i>
+        <div class="header">
+            Getting Pair Code
+        </div>
+        <div class="content">
+            <div class="ui message info">
+                <div class="header">How to pair?</div>
+                <ol>
+                    <li>Open your Whatsapp</li>
+                    <li>Link a device</li>
+                    <li>Link with pair code</li>
+                </ol>
+            </div>
+            
+            <div class="ui form">
+                <div class="field">
+                    <label>Phone</label>
+                    <input type="text" v-model="phone" placeholder="Type your phone number"
+                        @keyup.enter="handleSubmit" :disabled="submitting">
+                    <small>Enter to submit</small>
+                </div>
+            </div>
+            
+            <div class="ui grid" v-if="pair_code">
+                <div class="ui two column centered grid">
+                    <div class="column center aligned">
+                        <div class="header">Pair Code</div>
+                        <p style="font-size: 32px">{{ pair_code }}</p>
+                        
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    `,
+};
\ No newline at end of file
diff --git a/src/views/index.html b/src/views/index.html
index cc01cc4..7e6a082 100644
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -44,6 +44,7 @@
         <app-login></app-login>
         <app-logout @reload-devices="handleReloadDevice"></app-logout>
         <app-reconnect @reload-devices="handleReloadDevice"></app-reconnect>
+        <app-login-with-code :connected="connected_devices"></app-login-with-code>
     </div>
 
     <div class="ui horizontal divider">
@@ -127,6 +128,7 @@
 </script>
 <script type="module">
     import AppLogin from "./components/AppLogin.js";
+    import AppLoginWithCode from "./components/AppLoginWithCode.js";
     import AppLogout from "./components/AppLogout.js";
     import AppReconnect from "./components/AppReconnect.js";
     import SendMessage from "./components/SendMessage.js";
@@ -170,7 +172,7 @@
 
     Vue.createApp({
         components: {
-            AppLogin, AppLogout, AppReconnect,
+            AppLogin, AppLoginWithCode, AppLogout, AppReconnect,
             SendMessage, SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
             MessageDelete, MessageUpdate, MessageReact, MessageRevoke,
             GroupList, GroupCreate, GroupJoinWithLink, GroupAddParticipants,