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

Merge 38ec3f7502 into 07eea0f484

Browse Source
This commit is contained in:
Kamil Essekkat 2025-04-13 04:08:30 +02:00 committed by GitHub
commit e1fa43290f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/tools/wifi-qr-code-generator/useQRCode.ts
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({
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) {
qrcode.value = await QRCode.toDataURL(get(text).trim(), {
if (qrText) {
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 };
}

77
src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
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,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"
mb-4
label="Encryption method"
default-value="WPA"
label-position="left"
label-width="130px"
label-align="right"
:options="[
v-model:value="encryption" mb-4 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"
label-position="left"
label-width="130px"
label-align="right"
label="SSID:"
rows="1"
autosize
placeholder="Your WiFi SSID..."
mb-6
v-model:value="ssid" label-position="left" 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-model:value="password"
label-position="left"
label-width="130px"
label-align="right"
label="Password:"
rows="1"
autosize
type="password"
placeholder="Your WiFi Password..."
v-if="encryption !== 'nopass'" v-model:value="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-model:value="eapMethod"
label="EAP method"
label-position="left"
label-width="130px"
label-align="right"
:options="EAPMethods.map((method) => ({ label: method, value: method }))"
searchable mb-4
v-if="encryption === 'WPA2-EAP'" v-model:value="eapMethod" label="EAP method" 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"
label-position="left"
label-width="130px"
label-align="right"
label="Identity:"
rows="1"
autosize
placeholder="Your EAP Identity..."
mb-6
v-model:value="eapIdentity" label-position="left" 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-model:value="eapPhase2Method"
label="EAP Phase 2 method"
label-position="left"
label-width="130px"
label-align="right"
:options="EAPPhase2Methods.map((method) => ({ label: method, value: method }))"
searchable mb-4
v-if="encryption === 'WPA2-EAP'" v-model:value="eapPhase2Method" label="EAP Phase 2 method"
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>