From f1ef7e43ccde4ee6b177a6fd7aa0bd01ce61ef11 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <git@vasanko.com>
Date: Sat, 2 Aug 2025 01:16:10 +0000
Subject: [PATCH] Frontend adjusted for the new API.

---
 frontend/src/components/AddCredentialView.vue | 23 ++-----------------
 frontend/src/components/DeviceLinkView.vue    | 19 +++++++--------
 frontend/src/components/ProfileView.vue       |  4 ++--
 frontend/src/stores/auth.js                   | 10 ++------
 frontend/src/utils/passkey.js                 |  2 +-
 5 files changed, 15 insertions(+), 43 deletions(-)

diff --git a/frontend/src/components/AddCredentialView.vue b/frontend/src/components/AddCredentialView.vue
index 4d0a98f..6d11dbc 100644
--- a/frontend/src/components/AddCredentialView.vue
+++ b/frontend/src/components/AddCredentialView.vue
@@ -16,29 +16,10 @@
 <script setup>
 import { useAuthStore } from '@/stores/auth'
 import { registerCredential } from '@/utils/passkey'
-import { ref, onMounted } from 'vue'
+import { ref, computed } from 'vue'
 
 const authStore = useAuthStore()
-const hasDeviceSession = ref(false)
-
-// Check existing session on app load
-onMounted(async () => {
-  try {
-    // Check if we have a device addition session
-    const response = await fetch('/auth/device-session-check')
-    const data = await response.json()
-
-    if (data.device_addition_session) {
-      hasDeviceSession.value = true
-    } else {
-      authStore.showMessage('No device addition session found.', 'error')
-      authStore.currentView = 'login'
-    }
-  } catch (error) {
-    authStore.showMessage('Failed to check device addition session.', 'error')
-    authStore.currentView = 'login'
-  }
-})
+const hasDeviceSession = computed(() => !!authStore.currentUser)
 
 function register() {
   if (!hasDeviceSession.value) {
diff --git a/frontend/src/components/DeviceLinkView.vue b/frontend/src/components/DeviceLinkView.vue
index 6050530..eb3001a 100644
--- a/frontend/src/components/DeviceLinkView.vue
+++ b/frontend/src/components/DeviceLinkView.vue
@@ -7,9 +7,9 @@
         <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(/^[^:]+:\/\//, '') }}
+          <p v-if="url">
+            <a :href="url" id="deviceLinkText" @click="copyLink">
+              {{ url.replace(/^[^:]+:\/\//, '') }}
             </a>
           </p>
         </div>
@@ -33,12 +33,12 @@ import { useAuthStore } from '@/stores/auth'
 import QRCode from 'qrcode/lib/browser'
 
 const authStore = useAuthStore()
-const deviceLink = ref({ url: '', token: '' })
+const url = ref(null)
 
 const copyLink = async (event) => {
   event.preventDefault()
-  if (deviceLink.value.url) {
-    await navigator.clipboard.writeText(deviceLink.value.url)
+  if (url.value) {
+    await navigator.clipboard.writeText(url.value)
     authStore.showMessage('Link copied to clipboard!')
     authStore.currentView = 'profile'
   }
@@ -50,15 +50,12 @@ onMounted(async () => {
     const result = await response.json()
     if (result.error) throw new Error(result.error)
 
-    deviceLink.value = {
-      url: result.addition_link,
-      token: result.token
-    }
+    url.value = result.url
 
     // Generate QR code
     const qrCodeElement = document.getElementById('qrCode')
     if (qrCodeElement) {
-      QRCode.toCanvas(qrCodeElement, deviceLink.value.url, error => {
+      QRCode.toCanvas(qrCodeElement, url.value, error => {
         if (error) console.error('Failed to generate QR code:', error)
       })
     }
diff --git a/frontend/src/components/ProfileView.vue b/frontend/src/components/ProfileView.vue
index 8725b21..abf252a 100644
--- a/frontend/src/components/ProfileView.vue
+++ b/frontend/src/components/ProfileView.vue
@@ -23,7 +23,7 @@
         <div v-else>
           <div
             v-for="credential in authStore.currentCredentials"
-            :key="credential.credential_id"
+            :key="credential.credential_uuid"
             :class="['credential-item', { 'current-session': credential.is_current_session }]"
           >
             <div class="credential-header">
@@ -49,7 +49,7 @@
               </div>
               <div class="credential-actions">
                 <button
-                  @click="deleteCredential(credential.credential_id)"
+                  @click="deleteCredential(credential.credential_uuid)"
                   class="btn-delete-credential"
                   :disabled="credential.is_current_session"
                   :title="credential.is_current_session ? 'Cannot delete current session credential' : ''"
diff --git a/frontend/src/stores/auth.js b/frontend/src/stores/auth.js
index 9139d79..693b897 100644
--- a/frontend/src/stores/auth.js
+++ b/frontend/src/stores/auth.js
@@ -80,14 +80,8 @@ export const useAuthStore = defineStore('auth', {
       this.currentCredentials = result.credentials || []
       this.aaguidInfo = result.aaguid_info || {}
     },
-    async deleteCredential(credentialId) {
-      const response = await fetch('/auth/delete-credential', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ credential_id: credentialId })
-      })
+    async deleteCredential(uuid) {
+      const response = await fetch(`/auth/credential/${uuid}`, {method: 'DELETE'})
       const result = await response.json()
       if (result.error) throw new Error(`Server: ${result.error}`)
 
diff --git a/frontend/src/utils/passkey.js b/frontend/src/utils/passkey.js
index d97828d..b147379 100644
--- a/frontend/src/utils/passkey.js
+++ b/frontend/src/utils/passkey.js
@@ -15,7 +15,7 @@ export async function register(url, options) {
 }
 
 export async function registerUser(user_name) {
-  return register('/auth/ws/register_new', { user_name })
+  return register('/auth/ws/register', { user_name })
 }
 
 export async function registerCredential() {