68 lines
1.9 KiB
Vue
68 lines
1.9 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="view active">
|
||
<h1>📱 Add Another Device</h1>
|
||
<div class="device-link-section">
|
||
<div class="qr-container">
|
||
<a :href="url" id="deviceLinkText" @click="copyLink">
|
||
<canvas id="qrCode" class="qr-code"></canvas>
|
||
<p v-if="url">
|
||
{{ url.replace(/^[^:]+:\/\//, '') }}
|
||
</p>
|
||
<p v-else>
|
||
<em>Generating link...</em>
|
||
</p>
|
||
</a>
|
||
<p>
|
||
<strong>Scan and visit the URL on another device.</strong><br>
|
||
<small>⚠️ Expires in 24 hours and can only be used once.</small>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<button @click="authStore.currentView = 'profile'" class="btn-secondary">
|
||
Back to Profile
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
import QRCode from 'qrcode/lib/browser'
|
||
|
||
const authStore = useAuthStore()
|
||
const url = ref(null)
|
||
|
||
const copyLink = async (event) => {
|
||
event.preventDefault()
|
||
if (url.value) {
|
||
await navigator.clipboard.writeText(url.value)
|
||
authStore.showMessage('Link copied to clipboard!')
|
||
authStore.currentView = 'profile'
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
const response = await fetch('/auth/create-link', { method: 'POST' })
|
||
const result = await response.json()
|
||
if (result.error) throw new Error(result.error)
|
||
|
||
url.value = result.url
|
||
|
||
// Generate QR code
|
||
const qrCodeElement = document.getElementById('qrCode')
|
||
if (qrCodeElement) {
|
||
QRCode.toCanvas(qrCodeElement, url.value, {scale: 8 }, error => {
|
||
if (error) console.error('Failed to generate QR code:', error)
|
||
})
|
||
}
|
||
} catch (error) {
|
||
authStore.showMessage(`Failed to create device link: ${error.message}`, 'error')
|
||
authStore.currentView = 'profile'
|
||
}
|
||
})
|
||
</script>
|