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

This commit is contained in:
Kamil Essekkat 2024-12-30 17:38:07 +01:00
parent 08d977b8cd
commit 82a4958a62
2 changed files with 16 additions and 5 deletions

View file

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

View file

@ -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>