Implement code word based remote authentication (#1)

Add comprehensive remote authentication system allowing users to log in from one device by authenticating from another trusted device. Features include:

- Proof of Work (PoW) protection using PBKDF2-SHA512 to prevent abuse
- Simple pairing codes (3 words) protected by dynamic PoW difficulty
- Autocomplete pairing code input with error checking
- Real-time WebSocket communication between devices

Unlike device addition links and reset links with QR codes that only allow adding an authentication method, and that work offline over the duration of several days, this mechanism is strictly online, with 5 minute time limit.

frontend/src/components/RegistrationLinkModal.vue

@@ -1,147 +1,109 @@
 <template>
-  <div v-if="!inline && url" class="dialog-overlay" @keydown.esc.prevent="$emit('close')">
+  <div class="dialog-overlay" @keydown.esc.prevent="$emit('close')">
     <div class="device-dialog" role="dialog" aria-modal="true" aria-labelledby="regTitle">
       <div class="reg-header-row">
         <h2 id="regTitle" class="reg-title">
-          📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Device Registration Link</span>
+          📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Add Another Device</span>
         </h2>
         <button class="icon-btn" @click="$emit('close')" aria-label="Close">❌</button>
       </div>
+
       <div class="device-link-section">
-        <div class="qr-container">
-          <a :href="url" @click.prevent="copy" class="qr-link">
-            <canvas ref="qrCanvas" class="qr-code"></canvas>
-            <p>{{ displayUrl }}</p>
-          </a>
-          <p class="reg-help">
-            <span v-if="userName">The user should open this link on the device where they want to register.</span>
-            <span v-else>Open or scan this link on the device you wish to register to your account.</span>
-            <br><small>{{ expirationMessage }}</small>
-          </p>
+        <!-- Loading state -->
+        <div v-if="loading" class="loading-state">
+          <div class="spinner-small"></div>
+          <span>Generating registration link...</span>
         </div>
+
+        <!-- Error state -->
+        <div v-else-if="error" class="error-state">
+          <p class="error-message">{{ error }}</p>
+          <button class="btn-secondary" @click="generateLink">Retry</button>
+        </div>
+
+        <!-- Success state with QR code and link -->
+        <template v-else-if="linkUrl">
+          <p class="reg-help">
+            Scan this QR code on the new device, or copy the link and open it there.
+          </p>
+
+          <QRCodeDisplay
+            :url="linkUrl"
+            :show-link="true"
+            @copied="onCopied"
+          />
+
+          <p class="expiry-note" v-if="expiresAt">
+            This link expires {{ formatDate(expiresAt).toLowerCase() }}.
+          </p>
+        </template>
       </div>
+
       <div class="reg-actions">
         <button class="btn-secondary" @click="$emit('close')">Close</button>
-        <button class="btn-primary" @click="copy">Copy Link</button>
-      </div>
-    </div>
-  </div>
-  <div v-else-if="inline && url" class="registration-inline-wrapper">
-    <div class="registration-inline-block section-block">
-      <div class="section-header">
-        <h2 class="inline-heading">📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Device Registration Link</span></h2>
-      </div>
-      <div class="section-body">
-        <div class="device-link-section">
-          <div class="qr-container">
-            <a :href="url" @click.prevent="copy" class="qr-link">
-              <canvas ref="qrCanvas" class="qr-code"></canvas>
-              <p>{{ displayUrl }}</p>
-            </a>
-            <p class="reg-help">
-              <span v-if="userName">The user should open this link on the device where they want to register.</span>
-              <span v-else>Open this link on the device you wish to connect with.</span>
-              <br><small>{{ expirationMessage }}</small>
-            </p>
-          </div>
-        </div>
-        <div class="button-row" style="margin-top:1rem;">
-          <button class="btn-primary" @click="copy">Copy Link</button>
-          <button v-if="showCloseInInline" class="btn-secondary" @click="$emit('close')">Close</button>
-        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, computed, nextTick } from 'vue'
-import QRCode from 'qrcode/lib/browser'
+import { ref, onMounted } from 'vue'
+import QRCodeDisplay from '@/components/QRCodeDisplay.vue'
+import { apiJson } from '@/utils/api'
 import { formatDate } from '@/utils/helpers'
-import { useAuthStore } from '@/stores/auth'
-import { apiJson, getUserFriendlyErrorMessage, shouldShowErrorToast } from '@/utils/api'
-
-const authStore = useAuthStore()
 
 const props = defineProps({
   endpoint: { type: String, required: true },
-  autoCopy: { type: Boolean, default: true },
-  userName: { type: String, default: null },
-  inline: { type: Boolean, default: false },
-  showCloseInInline: { type: Boolean, default: false },
-  prefixCopyWithUserName: { type: Boolean, default: false }
+  userName: { type: String, default: '' }
 })
 
-const emit = defineEmits(['close','generated','copied'])
+const emit = defineEmits(['close', 'copied'])
 
-const url = ref(null)
-const expires = ref(null)
-const qrCanvas = ref(null)
+const loading = ref(true)
+const error = ref(null)
+const linkUrl = ref(null)
+const expiresAt = ref(null)
 
-const displayUrl = computed(() => url.value ? url.value.replace(/^[^:]+:\/\//,'') : '')
+async function generateLink() {
+  loading.value = true
+  error.value = null
+  linkUrl.value = null
+  expiresAt.value = null
 
-const expirationMessage = computed(() => {
-  const timeStr = formatDate(expires.value)
-  return `⚠️ Expires ${timeStr.startsWith('In ') ? timeStr.substring(3) : timeStr} and can only be used once.`
-})
-
-async function fetchLink() {
   try {
     const data = await apiJson(props.endpoint, { method: 'POST' })
-    url.value = data.url
-    expires.value = data.expires
-    emit('generated', { url: data.url, expires: data.expires })
-    await nextTick()
-    drawQR()
-    if (props.autoCopy) copy()
-  } catch (e) {
-    console.error('Failed to create link', e)
-    if (shouldShowErrorToast(e)) {
-      authStore.showMessage(getUserFriendlyErrorMessage(e), 'error', 4000)
+    if (data.url) {
+      linkUrl.value = data.url
+      expiresAt.value = data.expires ? new Date(data.expires) : null
+    } else {
+      error.value = data.detail || 'Failed to generate link'
     }
-    // Close the dialog on any error (auth cancelled, network error, etc.)
-    emit('close')
+  } catch (err) {
+    error.value = err.message || 'Failed to generate link'
+  } finally {
+    loading.value = false
   }
 }
 
-async function drawQR() {
-  if (!url.value) return
-  await nextTick()
-  if (!qrCanvas.value) return
-  QRCode.toCanvas(qrCanvas.value, url.value, { scale: 8 }, err => { if (err) console.error(err) })
+function onCopied() {
+  emit('copied')
 }
 
-async function copy() {
-  if (!url.value) return
-  let text = url.value
-  if (props.prefixCopyWithUserName && props.userName) {
-    text = `${props.userName} ${text}`
-  }
-  try {
-    await navigator.clipboard.writeText(text)
-    emit('copied', text)
-    if (!props.inline) emit('close')
-  } catch (_) {
-    /* ignore */
-  }
-}
-
-onMounted(fetchLink)
-watch(url, () => drawQR(), { flush: 'post' })
-
+onMounted(() => {
+  generateLink()
+})
 </script>
+
 <style scoped>
-.icon-btn { background:none; border:none; cursor:pointer; font-size:1rem; opacity:.6; }
-.icon-btn:hover { opacity:1; }
-/* Minimal extra styling; main look comes from global styles */
-.qr-link { text-decoration:none; color:inherit; }
-.reg-header-row { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.75rem; }
-.reg-title { margin:0; font-size:1.25rem; font-weight:600; }
-.device-dialog { background: var(--color-surface); padding: 1.25rem 1.25rem 1rem; border-radius: var(--radius-md); max-width:480px; width:100%; box-shadow:0 6px 28px rgba(0,0,0,.25); }
-.qr-container { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
-.qr-code { display:block; }
-.reg-help { margin-top:.5rem; margin-bottom:.75rem; font-size:.85rem; line-height:1.25rem; text-align:center; }
-.reg-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.25rem; }
-.registration-inline-block .qr-container { align-items:flex-start; }
-.registration-inline-block .reg-help { text-align:left; }
+.icon-btn { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: .6; }
+.icon-btn:hover { opacity: 1; }
+.reg-header-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
+.reg-title { margin: 0; font-size: 1.25rem; font-weight: 600; }
+.device-dialog { background: var(--color-surface); padding: 1.25rem 1.25rem 1rem; border-radius: var(--radius-md); max-width: 480px; width: 100%; box-shadow: 0 6px 28px rgba(0,0,0,.25); }
+.reg-help { margin: .5rem 0 .75rem; font-size: .85rem; line-height: 1.4; text-align: center; color: var(--color-text-muted); }
+.reg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
+.loading-state { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 2rem 0; color: var(--color-text-muted); }
+.error-state { text-align: center; padding: 1rem 0; }
+.error-message { color: var(--color-danger-text); margin-bottom: 1rem; }
+.expiry-note { font-size: .75rem; color: var(--color-text-muted); text-align: center; margin-top: .75rem; }
 </style>