Almost complete org/permission handling. Much cleanup, bootstrap works.

frontend/src/App.vue

@@ -2,7 +2,6 @@
   <div>
     <StatusMessage />
     <LoginView v-if="store.currentView === 'login'" />
-    <RegisterView v-if="store.currentView === 'register'" />
     <ProfileView v-if="store.currentView === 'profile'" />
     <DeviceLinkView v-if="store.currentView === 'device-link'" />
     <ResetView v-if="store.currentView === 'reset'" />
@@ -14,7 +13,6 @@ import { onMounted } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import StatusMessage from '@/components/StatusMessage.vue'
 import LoginView from '@/components/LoginView.vue'
-import RegisterView from '@/components/RegisterView.vue'
 import ProfileView from '@/components/ProfileView.vue'
 import DeviceLinkView from '@/components/DeviceLinkView.vue'
 import ResetView from '@/components/ResetView.vue'

frontend/src/components/LoginView.vue

@@ -11,11 +11,6 @@
           {{ 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>

frontend/src/components/ProfileView.vue

@@ -81,7 +81,7 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { formatDate } from '@/utils/helpers'
-import { registerCredential } from '@/utils/passkey'
+import passkey from '@/utils/passkey'
 
 const authStore = useAuthStore()
 const updateInterval = ref(null)
@@ -119,7 +119,7 @@ const addNewCredential = async () => {
   try {
     authStore.isLoading = true
     authStore.showMessage('Adding new passkey...', 'info')
-    const result = await registerCredential()
+    await passkey.register()
     await authStore.loadUserInfo()
     authStore.showMessage('New passkey added successfully!', 'success', 3000)
   } catch (error) {

frontend/src/components/RegisterView.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="container">
-    <div class="view active">
-      <h1>🔐 Create Account</h1>
-      <form @submit.prevent="handleRegister">
-        <input
-          type="text"
-          v-model="user_name"
-          placeholder="Enter username"
-          required
-          :disabled="authStore.isLoading"
-        >
-        <button
-          type="submit"
-          class="btn-primary"
-          :disabled="authStore.isLoading || !user_name.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/ResetView.vue

@@ -3,6 +3,7 @@
     <div class="view active">
       <h1>🔑 Add New Credential</h1>
       <h3>👤 {{ authStore.userInfo?.user?.user_name }}</h3>
+      <!-- TODO: allow editing name <input type="text" v-model="user_name" required :disabled="authStore.isLoading"> -->
       <p>Proceed to complete {{authStore.userInfo?.session_type}}:</p>
       <button
         class="btn-primary"
@@ -17,7 +18,7 @@
 
 <script setup>
 import { useAuthStore } from '@/stores/auth'
-import { registerCredential } from '@/utils/passkey'
+import passkey from '@/utils/passkey'
 
 const authStore = useAuthStore()
 
@@ -26,8 +27,7 @@ async function register() {
   authStore.showMessage('Starting registration...', 'info')
 
   try {
-    // TODO: For reset sessions, might use registerWithToken() in the future
-    const result = await registerCredential()
+    const result = await passkey.register()
     console.log("Result", result)
     await authStore.setSessionCookie(result.session_token)
 

frontend/src/stores/auth.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { registerUser, authenticateUser, registerWithToken } from '@/utils/passkey'
+import { register, authenticate } from '@/utils/passkey'
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
@@ -8,7 +8,7 @@ export const useAuthStore = defineStore('auth', {
     isLoading: false,
 
     // UI State
-    currentView: 'login', // 'login', 'register', 'profile', 'reset'
+    currentView: 'login', // 'login', 'profile', 'device-link', 'reset'
     status: {
       message: '',
       type: 'info',
@@ -39,23 +39,12 @@ export const useAuthStore = defineStore('auth', {
       }
       return result
     },
-    async register(user_name) {
+    async register() {
       this.isLoading = true
       try {
-        const result = await registerUser(user_name)
-
-        this.userInfo = {
-          user: {
-            user_id: result.user_id,
-            user_name: user_name,
-          },
-          credentials: [],
-          aaguid_info: {},
-          session_type: null,
-          authenticated: false
-        }
-
+        const result = await register()
         await this.setSessionCookie(result.session_token)
+        await this.loadUserInfo()
         return result
       } finally {
         this.isLoading = false
@@ -64,7 +53,7 @@ export const useAuthStore = defineStore('auth', {
     async authenticate() {
       this.isLoading = true
       try {
-        const result = await authenticateUser()
+        const result = await authenticate()
 
         await this.setSessionCookie(result.session_token)
         await this.loadUserInfo()

frontend/src/utils/passkey.js

@@ -1,14 +1,13 @@
 import { startRegistration, startAuthentication } from '@simplewebauthn/browser'
 import aWebSocket from '@/utils/awaitable-websocket'
 
-export async function register(url, options) {
-  if (options) url += `?${new URLSearchParams(options).toString()}`
-  const ws = await aWebSocket(url)
+export async function register() {
+  const ws = await aWebSocket("/auth/ws/register")
   try {
     const optionsJSON = await ws.receive_json()
     const registrationResponse = await startRegistration({ optionsJSON })
     ws.send_json(registrationResponse)
-    const result = await ws.receive_json()
+    return await ws.receive_json()
   } catch (error) {
     console.error('Registration error:', error)
      // Replace useless and ugly error message from startRegistration
@@ -18,18 +17,7 @@ export async function register(url, options) {
   }
 }
 
-export async function registerUser(user_name) {
-  return register('/auth/ws/register', { user_name })
-}
-
-export async function registerCredential() {
-  return register('/auth/ws/add_credential')
-}
-export async function registerWithToken(token) {
-  return register('/auth/ws/add_credential', { token })
-}
-
-export async function authenticateUser() {
+export async function authenticate() {
   const ws = await aWebSocket('/auth/ws/authenticate')
   try {
     const optionsJSON = await ws.receive_json()
@@ -44,3 +32,5 @@ export async function authenticateUser() {
     ws.close()
   }
 }
+
+export default { authenticate, register }