mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-22 07:46:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(new tool): add wifi qr code generator (#599)

Browse source 
* (feat: new tool): add wifi qr code generator

* Update src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue

Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>

* Update src/tools/wifi-qr-code-generator/index.ts

Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>

* remove naive UI grid

* Update src/tools/wifi-qr-code-generator/index.ts

---------

Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>
This commit is contained in:
Simon Bordeyne 2023-09-06 09:46:40 +02:00 • committed by GitHub
parent 8a30b6bdb3
commit 0eedce69a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 315 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

153
src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue Normal file
View file

@ -0,0 +1,153 @@
<script setup lang="ts">
import {
EAPMethods,
EAPPhase2Methods,
useWifiQRCode,
} from './useQRCode';
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
const foreground = ref('#000000ff');
const background = ref('#ffffffff');
const ssid = ref();
const password = ref();
const eapMethod = ref();
const isHiddenSSID = ref(false);
const eapAnonymous = ref(false);
const eapIdentity = ref();
const eapPhase2Method = ref();
const { qrcode, encryption } = useWifiQRCode({
ssid,
password,
eapMethod,
isHiddenSSID,
eapAnonymous,
eapIdentity,
eapPhase2Method,
color: {
background,
foreground,
},
options: { width: 1024 },
});
const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' });
</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="[
{
label: 'No password',
value: 'nopass',
},
{
label: 'WPA/WPA2',
value: 'WPA',
},
{
label: 'WEP',
value: 'WEP',
},
{
label: 'WPA2-EAP',
value: 'WPA2-EAP',
},
]"
/>
<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
/>
<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..."
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
/>
<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
/>
<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
/>
<n-form label-width="130" label-placement="left">
<n-form-item label="Foreground color:">
<n-color-picker v-model:value="foreground" :modes="['hex']" />
</n-form-item>
<n-form-item label="Background color:">
<n-color-picker v-model:value="background" :modes="['hex']" />
</n-form-item>
</n-form>
</div>
<div v-if="qrcode">
<div flex flex-col items-center gap-3>
<img alt="wifi-qrcode" :src="qrcode" width="200">
<c-button @click="download">
Download qr-code
</c-button>
</div>
</div>
</div>
</c-card>
</template>