feat: refactor UI & update package

src/cmd/root.go

@@ -66,8 +66,7 @@ func runRest(_ *cobra.Command, _ []string) {
 		return token != nil
 	})
 	app := fiber.New(fiber.Config{
-		Views:     engine,
-		BodyLimit: 50 * 1024 * 1024,
+		Views: engine,
 	})
 	app.Static("/statics", "./statics")
 	app.Use("/components", filesystem.New(filesystem.Config{

src/go.mod

@@ -18,7 +18,7 @@ require (
 	github.com/stretchr/testify v1.9.0
 	github.com/valyala/fasthttp v1.52.0
 	go.mau.fi/libsignal v0.1.0
-	go.mau.fi/whatsmeow v0.0.0-20240308162537-79d9175fa09b
+	go.mau.fi/whatsmeow v0.0.0-20240312193055-9b989e1cc696
 	google.golang.org/protobuf v1.33.0
 )
 

src/go.sum

@@ -96,6 +96,8 @@ go.mau.fi/util v0.4.0 h1:S2X3qU4pUcb/vxBRfAuZjbrR9xVMAXSjQojNBLPBbhs=
 go.mau.fi/util v0.4.0/go.mod h1:leeiHtgVBuN+W9aDii3deAXnfC563iN3WK6BF8/AjNw=
 go.mau.fi/whatsmeow v0.0.0-20240308162537-79d9175fa09b h1:Jk0/Lu6LdLD4kh0L9Q+06n7EefcS8ZDAKpwGeX7C4YQ=
 go.mau.fi/whatsmeow v0.0.0-20240308162537-79d9175fa09b/go.mod h1:lQHbhaG/fI+6hfGqz5Vzn2OBJBEZ05H0kCP6iJXriN4=
+go.mau.fi/whatsmeow v0.0.0-20240312193055-9b989e1cc696 h1:F9ytx1yzfoclCS4DoEqQb1M0E5XpcX2j5dX8bIZjGFE=
+go.mau.fi/whatsmeow v0.0.0-20240312193055-9b989e1cc696/go.mod h1:lQHbhaG/fI+6hfGqz5Vzn2OBJBEZ05H0kCP6iJXriN4=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.21.0 h1:X31++rzVUdKhX5sWmSOFZxx8UW/ldWx55cbf08iNAMA=

src/views/components/AccountAvatar.js

@@ -31,7 +31,7 @@ export default {
         async submitApi() {
             this.loading = true;
             try {
-                let response = await http.get(`/user/avatar?phone=${this.phone_id}&is_preview=${this.is_preview}&is_community=${this.is_community}`)
+                let response = await window.http.get(`/user/avatar?phone=${this.phone_id}&is_preview=${this.is_preview}&is_community=${this.is_community}`)
                 this.image = response.data.results.url;
             } catch (error) {
                 if (error.response) {

src/views/components/AccountGroup.js

@@ -44,7 +44,7 @@ export default {
             try {
                 let payload = new FormData();
                 payload.append("group_id", group_id)
-                await http.post(`/group/leave`, payload)
+                await window.http.post(`/group/leave`, payload)
             } catch (error) {
                 if (error.response) {
                     throw new Error(error.response.data.message);
@@ -55,7 +55,7 @@ export default {
         },
         async submitApi() {
             try {
-                let response = await http.get(`/user/my/groups`)
+                let response = await window.http.get(`/user/my/groups`)
                 this.groups = response.data.results.data;
             } catch (error) {
                 if (error.response) {

src/views/components/AccountPrivacy.js

@@ -17,7 +17,7 @@ export default {
         },
         async submitApi() {
             try {
-                let response = await http.get(`/user/my/privacy`)
+                let response = await window.http.get(`/user/my/privacy`)
                 this.data_privacy = response.data.results;
             } catch (error) {
                 if (error.response) {

src/views/components/AccountUserInfo.js

@@ -34,7 +34,7 @@ export default {
         async submitApi() {
             this.loading = true;
             try {
-                let response = await http.get(`/user/info?phone=${this.phone_id}`)
+                let response = await window.http.get(`/user/info?phone=${this.phone_id}`)
                 this.name = response.data.results.verified_name;
                 this.status = response.data.results.status;
                 this.devices = response.data.results.devices;

src/views/components/AppLogin.js

@@ -21,7 +21,7 @@ export default {
         },
         async submitApi() {
             try {
-                let response = await http.get(`/app/login`)
+                let response = await window.http.get(`/app/login`)
                 let results = response.data.results;
                 this.login_link = results.qr_link;
                 this.login_duration_sec = results.qr_duration;

src/views/components/AppLogout.js

@@ -0,0 +1,38 @@
+export default {
+    name: 'AppLogout',
+    methods: {
+        async handleSubmit() {
+            try {
+                await this.submitApi()
+                showSuccessInfo("Logout success")
+
+                // fetch devices
+                this.$emit('reload-devices')
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+
+        async submitApi() {
+            try {
+                await http.get(`/app/logout`)
+            } catch (error) {
+                if (error.response) {
+                    throw Error(error.response.data.message)
+                }
+                throw Error(error.message)
+            }
+
+        }
+    },
+    template: `
+    <div class="green card" @click="handleSubmit" style="cursor: pointer">
+        <div class="content">
+            <div class="header">Logout</div>
+            <div class="description">
+                Remove your login session in application
+            </div>
+        </div>
+    </div>
+    `
+}

src/views/components/AppReconnect.js

@@ -0,0 +1,37 @@
+export default {
+    name: 'AppReconnect',
+    methods: {
+        async handleSubmit() {
+            try {
+                await this.submitApi()
+                showSuccessInfo("Reconnect success")
+
+                // fetch devices
+                this.$emit('reload-devices')
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        async submitApi() {
+            try {
+                await window.http.get(`/app/reconnect`)
+            } catch (error) {
+                if (error.response) {
+                    throw Error(error.response.data.message)
+                }
+                throw Error(error.message)
+            }
+        }
+    },
+    template: `
+    <div class="green card" @click="handleSubmit" style="cursor: pointer">
+        <div class="content">
+            <div class="header">Reconnect</div>
+            <div class="description">
+                Reconnect to whatsapp server, please do this if your api doesn't work or your application is down or
+                restart
+            </div>
+        </div>
+    </div>
+    `
+}

src/views/components/SendFile.js

@@ -43,7 +43,7 @@ export default {
                 payload.append("caption", this.caption)
                 payload.append("phone", this.phone_id)
                 payload.append("file", $("#file_file")[0].files[0])
-                let response = await http.post(`/send/file`, payload)
+                let response = await window.http.post(`/send/file`, payload)
                 this.handleReset();
                 return response.data.message;
             } catch (error) {

src/views/components/SendMessage.js

@@ -42,7 +42,7 @@ export default {
                     payload.reply_id = this.reply_id;
                 }
 
-                let response = await http.post(`/send/message`, payload)
+                let response = await window.http.post(`/send/message`, payload)
                 this.handleReset();
                 return response.data.message;
             } catch (error) {

src/views/index.html

@@ -25,7 +25,7 @@
 </head>
 <body>
 <div class="ui container" id="app">
-    <h1 class="ui header center aligned">[[ app_name ]]</h1>
+    <h1 class="ui header center aligned">Whatsapp API Multi Device ({{ .AppVersion }})</h1>
 
     <div class="ui success message" v-if="connected_devices != null">
         <div class="header">
@@ -42,24 +42,8 @@
 
     <div class="ui three column stackable grid cards">
         <app-login></app-login>
-
-        <div class="green card" @click="logoutProcess" style="cursor: pointer">
-            <div class="content">
-                <div class="header">Logout</div>
-                <div class="description">
-                    Remove your login session in application
-                </div>
-            </div>
-        </div>
-        <div class="green card" @click="reconnectProcess" style="cursor: pointer">
-            <div class="content">
-                <div class="header">Reconnect</div>
-                <div class="description">
-                    Reconnect to whatsapp server, please do this if your api doesn't work or your application is down or
-                    restart
-                </div>
-            </div>
-        </div>
+        <app-logout @reload-devices="handleReloadDevice"></app-logout>
+        <app-reconnect @reload-devices="handleReloadDevice"></app-reconnect>
     </div>
 
     <div class="ui horizontal divider">
@@ -132,6 +116,8 @@
 </script>
 <script type="module">
     import AppLogin from "./components/AppLogin.js";
+    import AppLogout from "./components/AppLogout.js";
+    import AppReconnect from "./components/AppReconnect.js";
     import SendMessage from "./components/SendMessage.js";
     import SendImage from "./components/SendImage.js";
     import SendFile from "./components/SendFile.js";
@@ -167,70 +153,9 @@
         });
     }
 
-    const logout = {
-        methods: {
-            async logoutProcess() {
-                try {
-                    await this.logoutApi()
-                    showSuccessInfo("Logout success")
-
-                    // fetch devices
-                    this.app_ws.send(JSON.stringify({"code": "FETCH_DEVICES"}))
-                } catch (err) {
-                    showErrorInfo(err)
-                }
-            },
-
-            logoutApi() {
-                return new Promise(async (resolve, reject) => {
-                    try {
-                        await http.get(`/app/logout`)
-                        resolve()
-                    } catch (error) {
-                        if (error.response) {
-                            reject(error.response.data.message)
-                        } else {
-                            reject(error.message)
-                        }
-                    }
-                })
-            }
-        }
-    }
-
-    const reconnect = {
-        methods: {
-            async reconnectProcess() {
-                try {
-                    await this.reconnectApi()
-                    showSuccessInfo("Reconnect success")
-                    // fetch devices
-                    this.app_ws.send(JSON.stringify({"code": "FETCH_DEVICES"}))
-                } catch (err) {
-                    showErrorInfo(err)
-                }
-            },
-
-            reconnectApi() {
-                return new Promise(async (resolve, reject) => {
-                    try {
-                        await http.get(`/app/reconnect`)
-                        resolve()
-                    } catch (error) {
-                        if (error.response) {
-                            reject(error.response.data.message)
-                        } else {
-                            reject(error.message)
-                        }
-                    }
-                })
-            }
-        }
-    }
-
     Vue.createApp({
         components: {
-            AppLogin,
+            AppLogin, AppLogout, AppReconnect,
             SendMessage, SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
             MessageUpdate, MessageReact, MessageRevoke,
             AccountAvatar, AccountUserInfo, AccountGroup, AccountPrivacy
@@ -239,12 +164,14 @@
         data() {
             return {
                 app_ws: null,
-                app_host: {{ .AppHost }},
-                app_name: 'Whatsapp API Multi Device ({{ .AppVersion }})',
-                is_logged_in: false,
                 connected_devices: null,
             }
         },
+        methods: {
+            handleReloadDevice() {
+                this.app_ws.send(JSON.stringify({"code": "FETCH_DEVICES"}))
+            }
+        },
         mounted() {
             if (window["WebSocket"]) {
                 let wsType = location.protocol !== 'https:' ? 'ws://' : 'wss://';
@@ -265,7 +192,7 @@
                             $('#modalLogin').modal('hide');
 
                             // fetch devices
-                            this.app_ws.send(JSON.stringify({"code": "FETCH_DEVICES"}))
+                            this.handleReloadDevice()
                             break;
                         case 'LIST_DEVICES':
                             this.connected_devices = message.result
@@ -278,9 +205,6 @@
                 console.error('Your browser does not support WebSockets');
             }
         },
-        mixins: [
-            logout, reconnect,
-        ]
     }).mount('#app')
 </script>
 </body>