feat(wifi-qr-code): Allow to copy wifi connection string. Fixes CorentinTh#1438

Author: ekamil

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 };
 }

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>