mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-21 23:36:15 -04:00
feat(wifi-qr-code): Allow to copy wifi connection string. Fixes #1438
This commit is contained in:
parent
08d977b8cd
commit
82a4958a62
2 changed files with 16 additions and 5 deletions
|
@ -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 };
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue