From 82a4958a62f44f584adaea6fe8c38b9b4fdab9a4 Mon Sep 17 00:00:00 2001
From: Kamil Essekkat <kamil@essekkat.pl>
Date: Mon, 30 Dec 2024 17:38:07 +0100
Subject: [PATCH 1/3] feat(wifi-qr-code): Allow to copy wifi connection string.
 Fixes #1438

---
 src/tools/wifi-qr-code-generator/useQRCode.ts        |  9 +++++----
 .../wifi-qr-code-generator.vue                       | 12 +++++++++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/tools/wifi-qr-code-generator/useQRCode.ts b/src/tools/wifi-qr-code-generator/useQRCode.ts
index c8a7215c4..118176d2f 100644
--- a/src/tools/wifi-qr-code-generator/useQRCode.ts
+++ b/src/tools/wifi-qr-code-generator/useQRCode.ts
@@ -110,6 +110,7 @@ export function useWifiQRCode({
   color: { background, foreground },
   options,
 }: IWifiQRCodeOptions) {
+  const text = ref('');
   const qrcode = ref('');
   const encryption = ref<WifiEncryption>('WPA');
 
@@ -118,7 +119,7 @@ export function useWifiQRCode({
     async () => {
       // @see https://github.com/zxing/zxing/wiki/Barcode-Contents#wi-fi-network-config-android-ios-11
       // This is the full spec, there's quite a bit of logic to generate the string embeddedin the QR code.
-      const text = getQrCodeText({
+      text.value = getQrCodeText({
         ssid: get(ssid),
         password: get(password),
         encryption: get(encryption),
@@ -128,8 +129,8 @@ export function useWifiQRCode({
         eapIdentity: get(eapIdentity),
         eapPhase2Method: get(eapPhase2Method),
       });
-      if (text) {
-        qrcode.value = await QRCode.toDataURL(get(text).trim(), {
+      if (text.value) {
+        qrcode.value = await QRCode.toDataURL(get(text.value).trim(), {
           color: {
             dark: get(foreground),
             light: get(background),
@@ -142,5 +143,5 @@ export function useWifiQRCode({
     },
     { immediate: true },
   );
-  return { qrcode, encryption };
+  return { qrcode, text, encryption };
 }
diff --git a/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue b/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
index e6320d3e7..460d6e489 100644
--- a/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
+++ b/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
@@ -5,6 +5,7 @@ import {
   useWifiQRCode,
 } from './useQRCode';
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { useCopy } from '@/composable/copy';
 
 const foreground = ref('#000000ff');
 const background = ref('#ffffffff');
@@ -17,7 +18,7 @@ const eapAnonymous = ref(false);
 const eapIdentity = ref();
 const eapPhase2Method = ref();
 
-const { qrcode, encryption } = useWifiQRCode({
+const { qrcode, text, encryption } = useWifiQRCode({
   ssid,
   password,
   eapMethod,
@@ -33,6 +34,8 @@ const { qrcode, encryption } = useWifiQRCode({
 });
 
 const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' });
+const { copy } = useCopy({ source: text, text: 'Copied to the clipboard' });
+
 </script>
 
 <template>
@@ -148,6 +151,13 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
           </c-button>
         </div>
       </div>
+      <div v-if="qrcode">
+        <div flex flex-col items-center gap-3>
+          <c-button @click="copy()">
+            Copy connection string
+          </c-button>
+        </div>
+      </div>
     </div>
   </c-card>
 </template>

From 0fc30feaed3fbd550b2e89ae5062db3d7ac01b1d Mon Sep 17 00:00:00 2001
From: Kamil Essekkat <kamil@essekkat.pl>
Date: Mon, 30 Dec 2024 17:39:06 +0100
Subject: [PATCH 2/3] Fix lint errors

---
 .../wifi-qr-code-generator.vue                | 67 ++++---------------
 1 file changed, 14 insertions(+), 53 deletions(-)

diff --git a/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue b/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
index 460d6e489..06738acad 100644
--- a/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
+++ b/src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
@@ -35,7 +35,6 @@ const { qrcode, text, encryption } = useWifiQRCode({
 
 const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' });
 const { copy } = useCopy({ source: text, text: 'Copied to the clipboard' });
-
 </script>
 
 <template>
@@ -43,14 +42,8 @@ const { copy } = useCopy({ source: text, text: 'Copied to the clipboard' });
     <div grid grid-cols-1 gap-12>
       <div>
         <c-select
-          v-model:value="encryption"
-          mb-4
-          label="Encryption method"
-          default-value="WPA"
-          label-position="left"
-          label-width="130px"
-          label-align="right"
-          :options="[
+          v-model:value="encryption" mb-4 label="Encryption method" default-value="WPA" label-position="left"
+          label-width="130px" label-align="right" :options="[
             {
               label: 'No password',
               value: 'nopass',
@@ -71,68 +64,36 @@ const { copy } = useCopy({ source: text, text: 'Copied to the clipboard' });
         />
         <div class="mb-6 flex flex-row items-center gap-2">
           <c-input-text
-            v-model:value="ssid"
-            label-position="left"
-            label-width="130px"
-            label-align="right"
-            label="SSID:"
-            rows="1"
-            autosize
-            placeholder="Your WiFi SSID..."
-            mb-6
+            v-model:value="ssid" label-position="left" label-width="130px" label-align="right" label="SSID:"
+            rows="1" autosize placeholder="Your WiFi SSID..." mb-6
           />
           <n-checkbox v-model:checked="isHiddenSSID">
             Hidden SSID
           </n-checkbox>
         </div>
         <c-input-text
-          v-if="encryption !== 'nopass'"
-          v-model:value="password"
-          label-position="left"
-          label-width="130px"
-          label-align="right"
-          label="Password:"
-          rows="1"
-          autosize
-          type="password"
-          placeholder="Your WiFi Password..."
+          v-if="encryption !== 'nopass'" v-model:value="password" label-position="left" label-width="130px"
+          label-align="right" label="Password:" rows="1" autosize type="password" placeholder="Your WiFi Password..."
           mb-6
         />
         <c-select
-          v-if="encryption === 'WPA2-EAP'"
-          v-model:value="eapMethod"
-          label="EAP method"
-          label-position="left"
-          label-width="130px"
-          label-align="right"
-          :options="EAPMethods.map((method) => ({ label: method, value: method }))"
-          searchable mb-4
+          v-if="encryption === 'WPA2-EAP'" v-model:value="eapMethod" label="EAP method" label-position="left"
+          label-width="130px" label-align="right"
+          :options="EAPMethods.map((method) => ({ label: method, value: method }))" searchable mb-4
         />
         <div v-if="encryption === 'WPA2-EAP'" class="mb-6 flex flex-row items-center gap-2">
           <c-input-text
-            v-model:value="eapIdentity"
-            label-position="left"
-            label-width="130px"
-            label-align="right"
-            label="Identity:"
-            rows="1"
-            autosize
-            placeholder="Your EAP Identity..."
-            mb-6
+            v-model:value="eapIdentity" label-position="left" label-width="130px" label-align="right"
+            label="Identity:" rows="1" autosize placeholder="Your EAP Identity..." mb-6
           />
           <n-checkbox v-model:checked="eapAnonymous">
             Anonymous?
           </n-checkbox>
         </div>
         <c-select
-          v-if="encryption === 'WPA2-EAP'"
-          v-model:value="eapPhase2Method"
-          label="EAP Phase 2 method"
-          label-position="left"
-          label-width="130px"
-          label-align="right"
-          :options="EAPPhase2Methods.map((method) => ({ label: method, value: method }))"
-          searchable mb-4
+          v-if="encryption === 'WPA2-EAP'" v-model:value="eapPhase2Method" label="EAP Phase 2 method"
+          label-position="left" label-width="130px" label-align="right"
+          :options="EAPPhase2Methods.map((method) => ({ label: method, value: method }))" searchable mb-4
         />
         <n-form label-width="130" label-placement="left">
           <n-form-item label="Foreground color:">

From 38ec3f75028b6e93ada1f24ded959242a4a3061d Mon Sep 17 00:00:00 2001
From: Kamil Essekkat <kamil@essekkat.pl>
Date: Mon, 30 Dec 2024 17:55:23 +0100
Subject: [PATCH 3/3] Fix typecheck

---
 src/tools/wifi-qr-code-generator/useQRCode.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/tools/wifi-qr-code-generator/useQRCode.ts b/src/tools/wifi-qr-code-generator/useQRCode.ts
index 118176d2f..a9e41a7ef 100644
--- a/src/tools/wifi-qr-code-generator/useQRCode.ts
+++ b/src/tools/wifi-qr-code-generator/useQRCode.ts
@@ -119,7 +119,7 @@ export function useWifiQRCode({
     async () => {
       // @see https://github.com/zxing/zxing/wiki/Barcode-Contents#wi-fi-network-config-android-ios-11
       // This is the full spec, there's quite a bit of logic to generate the string embeddedin the QR code.
-      text.value = getQrCodeText({
+      const qrText = getQrCodeText({
         ssid: get(ssid),
         password: get(password),
         encryption: get(encryption),
@@ -129,8 +129,8 @@ export function useWifiQRCode({
         eapIdentity: get(eapIdentity),
         eapPhase2Method: get(eapPhase2Method),
       });
-      if (text.value) {
-        qrcode.value = await QRCode.toDataURL(get(text.value).trim(), {
+      if (qrText) {
+        qrcode.value = await QRCode.toDataURL(get(qrText).trim(), {
           color: {
             dark: get(foreground),
             light: get(background),
@@ -139,6 +139,7 @@ export function useWifiQRCode({
           errorCorrectionLevel: 'M',
           ...options,
         });
+        text.value = qrText;
       }
     },
     { immediate: true },