Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WiFi QR Code - allow to copy the text #1439

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

WiFi QR Code - allow to copy the text #1439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
82a4958
feat(wifi-qr-code): Allow to copy wifi connection string. Fixes #1438
ekamil Dec 30, 2024
0fc30fe
Fix lint errors
ekamil Dec 30, 2024
38ec3f7
Fix typecheck
ekamil Dec 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/tools/wifi-qr-code-generator/useQRCode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export function useWifiQRCode({
color: { background, foreground },
options,
}: IWifiQRCodeOptions) {
const text = ref('');
const qrcode = ref('');
const encryption = ref<WifiEncryption>('WPA');

Expand All @@ -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),
Expand All @@ -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),
Expand All @@ -138,9 +139,10 @@ export function useWifiQRCode({
errorCorrectionLevel: 'M',
...options,
});
text.value = qrText;
}
},
{ immediate: true },
);
return { qrcode, encryption };
return { qrcode, text, encryption };
}
77 changes: 24 additions & 53 deletions src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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,
Expand All @@ -33,21 +34,16 @@ 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>
<c-card>
<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',
Expand All @@ -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:">
Expand All @@ -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>
Loading