feat: Implement Wi-Fi pairing via QR code

package.json

@@ -39,6 +39,7 @@
     "vue-server-renderer": "2.7.16"
   },
   "dependencies": {
-    "@nuxtjs/axios": "^5.13.6"
+    "@nuxtjs/axios": "^5.13.6",
+    "uqr": "^0.1.2"
   }
 }

src/renderer/components/qrCode.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="mt-7 mb-3" style="height: 300px; width: 300px; margin: 0 auto;" v-html="qrSVG" />
+</template>
+
+<script>
+import { renderSVG } from 'uqr'
+export default {
+    props: {
+        qrText: {
+            type: String,
+        }
+    },
+    data() {
+        return {
+            qrSVG: renderSVG(this.qrText)
+        }
+    }
+}
+</script>

src/renderer/pages/wirelessSetup.vue

@@ -23,6 +23,7 @@
             <v-alert text type="error" v-if="pairingNotice">{{ pairingNotice }}</v-alert>
             <v-card-actions>
                 <v-spacer />
+                <v-btn rounded :disabled="pairingLoading" @click="pairQR">Pair with QRcode</v-btn>
                 <v-btn rounded :disabled="pairingLoading" @click="step++">Skip</v-btn>
                 <v-btn rounded :loading="pairingLoading" class="primaryButton" @click="pair">Connect</v-btn>
             </v-card-actions>
@@ -56,6 +57,18 @@
             </center>
         </section>
 
+        <section v-if="step == 3">
+            <h1>Pairing</h1>
+            <center class="mb-2">
+                <h3 style="margin-top: 1em;">Wi-Fi pairing QR code</h3>
+            </center>
+            <QrCode :key="qrKey" :qrText="qrText" />
+            <v-card-actions>
+                <v-spacer />
+                <v-btn rounded @click="refreshqrPairing">Refresh Code</v-btn>
+                <v-btn rounded @click="qrPairing = false">Back</v-btn>
+            </v-card-actions>
+        </section>
     </div>
 </template>
 
@@ -66,8 +79,15 @@
 </style>
 
 <script>
+import QRCode from '../components/qrCode.vue'
 export default {
+    components: { QRCode },
     data() {
+        const uniqueId = Math.floor(Math.random() * 1000000);
+        const name = 'ADB_WIFI_' + uniqueId;
+        const password = uniqueId;
+        const qrText = `WIFI:T:ADB;S:${name};P:${password};;`;
+
         return {
             pairCode: "",
             ip: "",
@@ -77,7 +97,12 @@ export default {
 
             ip2: "",
             connectingLoading: false,
-            connectingNotice: ""
+            connectingNotice: "",
+
+            qrText: qrText,
+            qrKey: 0,
+            qrPairing: false,
+            qrPassword: password
         }
     },
 
@@ -91,7 +116,42 @@ export default {
             this.pairingLoading = false;
             if (data.includes("Successfully")) return this.step++;
         },
+        async pairQR() {
+            this.step = 3;
+
+            const devices = await this.mdnsSearch();
+            if (this.qrPairing === false) return this.step = 0;
+
+            const device = devices[0];
+            const { ip, port } = device;
+
+            await this.$execute("adb disconnect");
+            const data = await this.$execute(`adb pair ${ip}:${port} ${this.qrPassword}`);
+            if (data.includes("Successfully")) return this.step = 1;
+        },
+        async mdnsSearch() {
+            this.qrPairing = true;
+            const regex = /_adb-tls-pairing\._tcp\.\s*(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}):(\d+)/g;
 
+            while (this.qrPairing) {
+                const data = await this.$execute(`adb mdns services`);
+
+                const results = Array.from(data.matchAll(regex), match => ({
+                    ip: match[1],
+                    port: match[2]
+                }));
+                if (results.length) {
+                    return results;
+                } else {
+                    await new Promise(resolve => setTimeout(resolve, 500));
+                }
+            }
+        },
+        async refreshqrPairing() {
+            this.qrPassword = Math.floor(Math.random() * 1000000);
+            this.qrText = `WIFI:T:ADB;S:${'ADB_WIFI_' + this.qrPassword};P:${this.qrPassword};;`;
+            this.qrKey++; 
+        },
         async connect() {
             if (this.ip2 == "") return; // Ensure No Error
 

yarn.lock

@@ -4275,7 +4275,7 @@ ejs@^3.1.8:
   dependencies:
     jake "^10.8.5"
 
-electron-builder@latest:
+electron-builder@^25.1.8:
   version "25.1.8"
   resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-25.1.8.tgz#b0e310f1600787610bb84c3f39bc7aadb2548486"
   integrity sha512-poRgAtUHHOnlzZnc9PK4nzG53xh74wj2Jy7jkTrqZ0MWPoHGh1M2+C//hGeYdA+4K8w4yiVCNYoLXF7ySj2Wig==
@@ -4319,10 +4319,10 @@ electron-to-chromium@^1.5.28:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.36.tgz#ec41047f0e1446ec5dce78ed5970116533139b88"
   integrity sha512-HYTX8tKge/VNp6FGO+f/uVDmUkq+cEfcxYhKf15Akc4M5yxt5YmorwlAitKWjWhWQnKcDRBAQKXkhqqXMqcrjw==
 
-electron@latest:
-  version "32.2.0"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-32.2.0.tgz#40b17864be5f88c89f71045ac6f61b5d4a9c1919"
-  integrity sha512-Xy82QBQrEiQysoxsv6lnhHAcWNNe6vV6QqH3OPFXhEj/T9oAsBHEhZuuYHINSSsUE7zRSj+J9sNwJYOjisT0Vw==
+electron@^32.2.0:
+  version "32.2.7"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-32.2.7.tgz#4eaf78534c99ba060da5bb002c737206be33f225"
+  integrity sha512-y8jbQRG3xogF70XPlk5c+dWe5iRfUBo28o2NMpKd/CcW7ENIaWtBlGima8/8nmRdAaYTy1+yIt6KB0Lon9H8cA==
   dependencies:
     "@electron/get" "^2.0.0"
     "@types/node" "^20.9.0"
@@ -9927,6 +9927,11 @@ update-browserslist-db@^1.1.0:
     escalade "^3.2.0"
     picocolors "^1.1.0"
 
+uqr@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/uqr/-/uqr-0.1.2.tgz#5c6cd5dcff9581f9bb35b982cb89e2c483a41d7d"
+  integrity sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"