Rewritten frontend with Vue

frontend/src/components/AddDeviceCredentialView.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="container">
+    <div class="view active">
+      <h1>🔑 Add Device Credential</h1>
+      <button
+        class="btn-primary"
+        :disabled="authStore.isLoading"
+        @click="register"
+      >
+        {{ authStore.isLoading ? 'Registering...' : 'Register Passkey' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useAuthStore } from '@/stores/auth'
+import { registerWithToken } from '@/utils/passkey'
+import { ref, onMounted } from 'vue'
+import { getCookie } from '@/utils/helpers'
+
+const authStore = useAuthStore()
+const token = ref(null)
+
+// Check existing session on app load
+onMounted(() => {
+  // Check for 'auth-token' cookie
+  token.value = getCookie('auth-token')
+  if (!token.value) {
+    authStore.showMessage('No registration token cookie found.', 'error')
+    authStore.currentView = 'login'
+    return
+  }
+  // Delete the cookie
+  document.cookie = 'auth-token=; Max-Age=0; path=/'
+})
+
+function register() {
+  authStore.isLoading = true
+  authStore.showMessage('Starting registration...', 'info')
+  registerWithToken(token.value).finally(() => {
+    authStore.isLoading = false
+  }).then(() => {
+    authStore.showMessage('Passkey registered successfully!', 'success', 2000)
+    authStore.currentView = 'profile'
+  }).catch((error) => {
+    console.error('Registration error:', error)
+    if (error.name === "NotAllowedError") {
+      authStore.showMessage('Registration cancelled', 'error')
+    } else {
+      authStore.showMessage(`Registration failed: ${error.message}`, 'error')
+    }
+  })
+}
+</script>

frontend/src/components/DeviceLinkView.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="container">
+    <div class="view active">
+      <h1>📱 Add Device</h1>
+
+      <div class="device-link-section">
+        <h2>Device Addition Link</h2>
+        <div class="qr-container">
+          <canvas id="qrCode" class="qr-code"></canvas>
+          <p v-if="deviceLink.url">
+            <a :href="deviceLink.url" id="deviceLinkText" @click="copyLink">
+              {{ deviceLink.url.replace(/^[^:]+:\/\//, '') }}
+            </a>
+          </p>
+        </div>
+
+        <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>
+
+      <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 deviceLink = ref({ url: '', token: '' })
+
+const copyLink = async (event) => {
+  event.preventDefault()
+  if (deviceLink.value.url) {
+    await navigator.clipboard.writeText(deviceLink.value.url)
+    authStore.showMessage('Link copied to clipboard!')
+    authStore.currentView = 'profile'
+  }
+}
+
+onMounted(async () => {
+  try {
+    const response = await fetch('/auth/create-device-link', { method: 'POST' })
+    const result = await response.json()
+    if (result.error) throw new Error(result.error)
+
+    deviceLink.value = {
+      url: result.addition_link,
+      token: result.token
+    }
+
+    // Generate QR code
+    const qrCodeElement = document.getElementById('qrCode')
+    if (qrCodeElement) {
+      QRCode.toCanvas(qrCodeElement, deviceLink.value.url, error => {
+        if (error) console.error('Failed to generate QR code:', error)
+      })
+    }
+  } catch (error) {
+    console.error('Failed to fetch device link:', error)
+  }
+})
+</script>

frontend/src/components/LoginView.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="container">
+    <div class="view active">
+      <h1>🔐 Passkey Login</h1>
+      <form @submit.prevent="handleLogin">
+        <button
+          type="submit"
+          class="btn-primary"
+          :disabled="authStore.isLoading"
+        >
+          {{ authStore.isLoading ? 'Authenticating...' : 'Login with Your Device' }}
+        </button>
+      </form>
+      <p class="toggle-link">
+        <a href="#" @click.prevent="authStore.currentView = 'register'">
+          Don't have an account? Register here
+        </a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+
+const handleLogin = async () => {
+  try {
+    console.log('Login button clicked')
+    authStore.showMessage('Starting authentication...', 'info')
+    await authStore.authenticate()
+    authStore.showMessage('Authentication successful!', 'success', 2000)
+    authStore.currentView = 'profile'
+  } catch (error) {
+    authStore.showMessage(`Authentication failed: ${error.message}`, 'error')
+  }
+}
+</script>

frontend/src/components/ProfileView.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="container">
+    <div class="view active">
+      <h1>👋 Welcome!</h1>
+      <div v-if="authStore.currentUser" class="user-info">
+        <h3>👤 {{ authStore.currentUser.user_name }}</h3>
+        <span><strong>Visits:</strong></span>
+        <span>{{ authStore.currentUser.visits || 0 }}</span>
+        <span><strong>Registered:</strong></span>
+        <span>{{ formatDate(authStore.currentUser.created_at) }}</span>
+        <span><strong>Last seen:</strong></span>
+        <span>{{ formatDate(authStore.currentUser.last_seen) }}</span>
+      </div>
+
+      <h2>Your Passkeys</h2>
+      <div class="credential-list">
+        <div v-if="authStore.isLoading">
+          <p>Loading credentials...</p>
+        </div>
+        <div v-else-if="userCredentialsData.credentials.length === 0">
+          <p>No passkeys found.</p>
+        </div>
+        <div v-else>
+          <div
+            v-for="credential in userCredentialsData.credentials"
+            :key="credential.credential_id"
+            :class="['credential-item', { 'current-session': credential.is_current_session }]"
+          >
+            <div class="credential-header">
+              <div class="credential-icon">
+                <img
+                  v-if="getCredentialAuthIcon(credential)"
+                  :src="getCredentialAuthIcon(credential)"
+                  :alt="getCredentialAuthName(credential)"
+                  class="auth-icon"
+                  width="32"
+                  height="32"
+                >
+                <span v-else class="auth-emoji">🔑</span>
+              </div>
+              <div class="credential-info">
+                <h4>{{ getCredentialAuthName(credential) }}</h4>
+              </div>
+              <div class="credential-dates">
+                <span class="date-label">Created:</span>
+                <span class="date-value">{{ formatDate(credential.created_at) }}</span>
+                <span class="date-label">Last used:</span>
+                <span class="date-value">{{ formatDate(credential.last_used) }}</span>
+              </div>
+              <div class="credential-actions">
+                <button
+                  @click="deleteCredential(credential.credential_id)"
+                  class="btn-delete-credential"
+                  :disabled="credential.is_current_session"
+                  :title="credential.is_current_session ? 'Cannot delete current session credential' : ''"
+                >
+                  🗑️
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="button-group" style="display: flex; gap: 10px;">
+        <button @click="addNewCredential" class="btn-primary">
+          Add New Passkey
+        </button>
+        <button @click="authStore.currentView = 'device-link'" class="btn-primary">
+          Add Another Device
+        </button>
+      </div>
+      <button @click="logout" class="btn-danger" style="width: 100%;">
+        Logout
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { formatDate } from '@/utils/helpers'
+import { registerCredential } from '@/utils/passkey'
+
+const authStore = useAuthStore()
+const currentCredentials = ref([])
+const userCredentialsData = ref({ credentials: [], aaguid_info: {} })
+const updateInterval = ref(null)
+
+onMounted(async () => {
+  try {
+    await authStore.loadUserInfo()
+    currentCredentials.value = await authStore.loadCredentials()
+  } catch (error) {
+    authStore.showMessage(`Failed to load user info: ${error.message}`, 'error')
+    authStore.currentView = 'login'
+    return
+  }
+
+  // Fetch user credentials from the server
+  try {
+    const response = await fetch('/auth/user-credentials')
+    const result = await response.json()
+    console.log('Fetch Response:', result) // Log the entire response
+    if (result.error) throw new Error(result.error)
+
+    Object.assign(userCredentialsData.value, result) // Store the entire response
+  } catch (error) {
+    console.error('Failed to fetch user credentials:', error)
+  }
+
+  updateInterval.value = setInterval(() => {
+    // Trigger Vue reactivity to update formatDate fields
+    authStore.currentUser = { ...authStore.currentUser }
+    userCredentialsData.value.credentials = [...userCredentialsData.value.credentials]
+  }, 60000) // Update every minute
+})
+
+onUnmounted(() => {
+  if (updateInterval.value) {
+    clearInterval(updateInterval.value)
+  }
+})
+
+const getCredentialAuthName = (credential) => {
+  const authInfo = userCredentialsData.value.aaguid_info[credential.aaguid]
+  return authInfo ? authInfo.name : 'Unknown Authenticator'
+}
+
+const getCredentialAuthIcon = (credential) => {
+  const authInfo = userCredentialsData.value.aaguid_info[credential.aaguid]
+  if (!authInfo) return null
+
+  const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+  const iconKey = isDarkMode ? 'icon_dark' : 'icon_light'
+  return authInfo[iconKey] || null
+}
+
+const addNewCredential = async () => {
+  try {
+    authStore.isLoading = true
+    authStore.showMessage('Adding new passkey...', 'info')
+    const result = await registerCredential()
+    currentCredentials.value = await authStore.loadCredentials()
+    authStore.showMessage('New passkey added successfully!', 'success', 3000)
+  } catch (error) {
+    console.error('Failed to add new passkey:', error)
+    authStore.showMessage(`Failed to add passkey: ${error.message}`, 'error')
+  } finally {
+    authStore.isLoading = false
+  }
+}
+
+const deleteCredential = async (credentialId) => {
+  if (!confirm('Are you sure you want to delete this passkey?')) return
+
+  try {
+    await authStore.deleteCredential(credentialId)
+    currentCredentials.value = await authStore.loadCredentials()
+    authStore.showMessage('Passkey deleted successfully!', 'success', 3000)
+  } catch (error) {
+    authStore.showMessage(`Failed to delete passkey: ${error.message}`, 'error')
+  }
+}
+
+const logout = async () => {
+  await authStore.logout()
+  authStore.currentView = 'login'
+}
+</script>
+
+<style scoped>
+.user-info {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 10px;
+}
+.user-info h3 {
+  grid-column: span 2;
+}
+.user-info span {
+  text-align: left;
+}
+</style>

frontend/src/components/RegisterView.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="container">
+    <div class="view active">
+      <h1>🔐 Create Account</h1>
+      <form @submit.prevent="handleRegister">
+        <input
+          type="text"
+          v-model="username"
+          placeholder="Enter username"
+          required
+          :disabled="authStore.isLoading"
+        >
+        <button
+          type="submit"
+          class="btn-primary"
+          :disabled="authStore.isLoading || !username.trim()"
+        >
+          {{ authStore.isLoading ? 'Registering...' : 'Register Passkey' }}
+        </button>
+      </form>
+      <p class="toggle-link">
+        <a href="#" @click.prevent="authStore.currentView = 'login'">
+          Already have an account? Login here
+        </a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+const user_name = ref('')
+
+const handleRegister = async () => {
+  if (!user_name.value.trim()) return
+
+  try {
+    authStore.showMessage('Starting registration...', 'info')
+    await authStore.register(user_name.value.trim())
+    authStore.showMessage('Passkey registered successfully!', 'success', 2000)
+
+    setTimeout(() => {
+      authStore.currentView = 'profile'
+    }, 1500)
+  } catch (error) {
+    console.error('Registration error:', error)
+    if (error.name === "NotAllowedError") {
+      authStore.showMessage('Registration cancelled', 'error')
+    } else {
+      authStore.showMessage(`Registration failed: ${error.message}`, 'error')
+    }
+  }
+}
+</script>

frontend/src/components/StatusMessage.vue

@@ -0,0 +1,13 @@
+<template>
+  <div v-if="authStore.status.show" class="global-status" style="display: block;">
+    <div :class="['status', authStore.status.type]">
+      {{ authStore.status.message }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+</script>