Renaming of users in registration, profile and admin app.

frontend/src/components/ResetView.vue

@@ -2,8 +2,17 @@
   <div class="container">
     <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"> -->
+      <label class="name-edit">
+        <span>👤 Name:</span>
+        <input
+          type="text"
+          v-model="user_name"
+          :placeholder="authStore.userInfo?.user?.user_name || 'Your name'"
+          :disabled="authStore.isLoading"
+          maxlength="64"
+          @keyup.enter="register"
+        />
+      </label>
       <p>Proceed to complete {{authStore.userInfo?.session_type}}:</p>
       <button
         class="btn-primary"
@@ -19,15 +28,26 @@
 <script setup>
 import { useAuthStore } from '@/stores/auth'
 import passkey from '@/utils/passkey'
+import { ref, watchEffect } from 'vue'
 
 const authStore = useAuthStore()
+const user_name = ref('')
+
+// Initialize local name from store (once loaded)
+watchEffect(() => {
+  if (!user_name.value && authStore.userInfo?.user?.user_name) {
+    user_name.value = authStore.userInfo.user.user_name
+  }
+})
 
 async function register() {
   authStore.isLoading = true
   authStore.showMessage('Starting registration...', 'info')
 
   try {
-  const result = await passkey.register(authStore.resetToken)
+  const trimmed = (user_name.value || '').trim()
+  const nameToSend = trimmed.length ? trimmed : null
+  const result = await passkey.register(authStore.resetToken, nameToSend)
   console.log("Result", result)
   await authStore.setSessionCookie(result.session_token)
   // resetToken cleared by setSessionCookie; ensure again