Merge 38ec3f7502 into 07eea0f484

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({
+      const qrText = 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) {
+      if (qrText) {
-        qrcode.value = await QRCode.toDataURL(get(text).trim(), {
+        qrcode.value = await QRCode.toDataURL(get(qrText).trim(), {
           color: {
             dark: get(foreground),
             light: get(background),
@@ -138,9 +139,10 @@ export function useWifiQRCode({
           errorCorrectionLevel: 'M',
           ...options,
         });
+        text.value = qrText;
       }
     },
     { 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,7 @@ 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>
@@ -40,14 +42,8 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
     <div grid grid-cols-1 gap-12>
       <div>
         <c-select
-          v-model:value="encryption"
+          v-model:value="encryption" mb-4 label="Encryption method" default-value="WPA" label-position="left"
-          mb-4
+          label-width="130px" label-align="right" :options="[
-          label="Encryption method"
-          default-value="WPA"
-          label-position="left"
-          label-width="130px"
-          label-align="right"
-          :options="[
             {
               label: 'No password',
               value: 'nopass',
@@ -68,68 +64,36 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
         />
         <div class="mb-6 flex flex-row items-center gap-2">
           <c-input-text
-            v-model:value="ssid"
+            v-model:value="ssid" label-position="left" label-width="130px" label-align="right" label="SSID:"
-            label-position="left"
+            rows="1" autosize placeholder="Your WiFi SSID..." mb-6
-            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-if="encryption !== 'nopass'" v-model:value="password" label-position="left" label-width="130px"
-          v-model:value="password"
+          label-align="right" label="Password:" rows="1" autosize type="password" placeholder="Your WiFi 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-if="encryption === 'WPA2-EAP'" v-model:value="eapMethod" label="EAP method" label-position="left"
-          v-model:value="eapMethod"
+          label-width="130px" label-align="right"
-          label="EAP method"
+          :options="EAPMethods.map((method) => ({ label: method, value: method }))" searchable mb-4
-          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"
+            v-model:value="eapIdentity" label-position="left" label-width="130px" label-align="right"
-            label-position="left"
+            label="Identity:" rows="1" autosize placeholder="Your EAP Identity..." mb-6
-            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-if="encryption === 'WPA2-EAP'" v-model:value="eapPhase2Method" label="EAP Phase 2 method"
-          v-model:value="eapPhase2Method"
+          label-position="left" label-width="130px" label-align="right"
-          label="EAP Phase 2 method"
+          :options="EAPPhase2Methods.map((method) => ({ label: method, value: method }))" searchable mb-4
-          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:">
@@ -148,6 +112,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>