public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/tools/wifi-qr-code-generator/useQRCode.ts
View File

@ -110,6 +110,7 @@ export function useWifiQRCode({
color: { background, foreground }, color: { background, foreground },
options, options,
}: IWifiQRCodeOptions) { }: IWifiQRCodeOptions) {
const text = ref('');
const qrcode = ref(''); const qrcode = ref('');
const encryption = ref<WifiEncryption>('WPA'); const encryption = ref<WifiEncryption>('WPA');
@ -118,7 +119,7 @@ export function useWifiQRCode({
async () => { async () => {
// @see https://github.com/zxing/zxing/wiki/Barcode-Contents#wi-fi-network-config-android-ios-11 // @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. // 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), ssid: get(ssid),
password: get(password), password: get(password),
encryption: get(encryption), encryption: get(encryption),
@ -128,8 +129,8 @@ export function useWifiQRCode({
eapIdentity: get(eapIdentity), eapIdentity: get(eapIdentity),
eapPhase2Method: get(eapPhase2Method), eapPhase2Method: get(eapPhase2Method),
}); });
if (text) { if (text.value) {
qrcode.value = await QRCode.toDataURL(get(text).trim(), { qrcode.value = await QRCode.toDataURL(get(text.value).trim(), {
color: { color: {
dark: get(foreground), dark: get(foreground),
light: get(background), light: get(background),
@ -142,5 +143,5 @@ export function useWifiQRCode({
}, },
{ immediate: true }, { immediate: true },
); );
return { qrcode, encryption }; return { qrcode, text, encryption };
} }

12
src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
View File

@ -5,6 +5,7 @@ import {
useWifiQRCode, useWifiQRCode,
} from './useQRCode'; } from './useQRCode';
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64'; import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
import { useCopy } from '@/composable/copy';
const foreground = ref('#000000ff'); const foreground = ref('#000000ff');
const background = ref('#ffffffff'); const background = ref('#ffffffff');
@ -17,7 +18,7 @@ const eapAnonymous = ref(false);
const eapIdentity = ref(); const eapIdentity = ref();
const eapPhase2Method = ref(); const eapPhase2Method = ref();
const { qrcode, encryption } = useWifiQRCode({ const { qrcode, text, encryption } = useWifiQRCode({
ssid, ssid,
password, password,
eapMethod, eapMethod,
@ -33,6 +34,8 @@ const { qrcode, encryption } = useWifiQRCode({
}); });
const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' }); const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' });
const { copy } = useCopy({ source: text, text: 'Copied to the clipboard' });
</script> </script>
<template> <template>
@ -148,6 +151,13 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
</c-button> </c-button>
</div> </div>
</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> </div>
</c-card> </c-card>
</template> </template>