LeoVasanko/passkey-auth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Device addition link tuning. QR code larger and better handling while loading.

Browse Source
This commit is contained in:
Leo Vasanko 2025-08-02 08:11:28 -06:00
parent 30ab73d625
commit f461a5fbd7
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/DeviceLinkView.vue
View File

@ -6,19 +6,21 @@
<div class="device-link-section"> <div class="device-link-section">
<h2>Device Addition Link</h2> <h2>Device Addition Link</h2>
<div class="qr-container"> <div class="qr-container">
<a :href="url" id="deviceLinkText" @click="copyLink">
<canvas id="qrCode" class="qr-code"></canvas> <canvas id="qrCode" class="qr-code"></canvas>
<p v-if="url"> <p v-if="url">
<a :href="url" id="deviceLinkText" @click="copyLink">
{{ url.replace(/^[^:]+:\/\//, '') }} {{ url.replace(/^[^:]+:\/\//, '') }}
</a>
</p> </p>
</div> <p v-else>
<em>Generating link...</em>
</p>
</a>
<p> <p>
<strong>Scan and visit the URL on another device.</strong><br> <strong>Scan and visit the URL on another device.</strong><br>
<small>⚠️ Expires in 24 hours and can only be used once.</small> <small>⚠️ Expires in 24 hours and can only be used once.</small>
</p> </p>
</div> </div>
</div>
<button @click="authStore.currentView = 'profile'" class="btn-secondary"> <button @click="authStore.currentView = 'profile'" class="btn-secondary">
Back to Profile Back to Profile
@ -55,7 +57,7 @@ onMounted(async () => {
// Generate QR code // Generate QR code
const qrCodeElement = document.getElementById('qrCode') const qrCodeElement = document.getElementById('qrCode')
if (qrCodeElement) { if (qrCodeElement) {
QRCode.toCanvas(qrCodeElement, url.value, error => { QRCode.toCanvas(qrCodeElement, url.value, {scale: 8 }, error => {
if (error) console.error('Failed to generate QR code:', error) if (error) console.error('Failed to generate QR code:', error)
}) })
} }