Unify user info across admin app and profile view.

frontend/src/components/ProfileView.vue

@@ -2,33 +2,16 @@
   <div class="container">
     <div class="view active">
   <h1>👋 Welcome! <a v-if="isAdmin" href="/auth/admin/" class="admin-link" title="Admin Console">Admin</a></h1>
-      <div v-if="authStore.userInfo?.user" class="user-info">
-        <h3 class="user-name-heading">
-          <span class="icon">👤</span>
-          <span v-if="!editingName" class="user-name-row">
-            <span class="display-name" :title="authStore.userInfo.user.user_name">{{ authStore.userInfo.user.user_name }}</span>
-            <button class="mini-btn" @click="startEdit" title="Edit name">✏️</button>
-          </span>
-          <span v-else class="user-name-row editing">
-            <input
-              v-model="newName"
-              class="name-input"
-              :placeholder="authStore.userInfo.user.user_name"
-              :disabled="authStore.isLoading"
-              maxlength="64"
-              @keyup.enter="saveName"
-            />
-            <button class="mini-btn" @click="saveName" :disabled="authStore.isLoading" title="Save name">💾</button>
-            <button class="mini-btn" @click="cancelEdit" :disabled="authStore.isLoading" title="Cancel">✖</button>
-          </span>
-        </h3>
-        <span><strong>Visits:</strong></span>
-        <span>{{ authStore.userInfo.user.visits || 0 }}</span>
-        <span><strong>Registered:</strong></span>
-        <span>{{ formatDate(authStore.userInfo.user.created_at) }}</span>
-        <span><strong>Last seen:</strong></span>
-        <span>{{ formatDate(authStore.userInfo.user.last_seen) }}</span>
-      </div>
+      <UserBasicInfo
+        v-if="authStore.userInfo?.user"
+        :name="authStore.userInfo.user.user_name"
+        :visits="authStore.userInfo.user.visits || 0"
+        :created-at="authStore.userInfo.user.created_at"
+        :last-seen="authStore.userInfo.user.last_seen"
+        :loading="authStore.isLoading"
+        update-endpoint="/auth/user/display-name"
+        @saved="authStore.loadUserInfo()"
+      />
 
       <h2>Your Passkeys</h2>
       <div class="credential-list">
@@ -100,6 +83,7 @@ import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { formatDate } from '@/utils/helpers'
 import passkey from '@/utils/passkey'
+import UserBasicInfo from '@/components/UserBasicInfo.vue'
 
 const authStore = useAuthStore()
 const updateInterval = ref(null)
@@ -150,7 +134,6 @@ const addNewCredential = async () => {
 
 const deleteCredential = async (credentialId) => {
   if (!confirm('Are you sure you want to delete this passkey?')) return
-
   try {
     await authStore.deleteCredential(credentialId)
     authStore.showMessage('Passkey deleted successfully!', 'success', 3000)
@@ -165,95 +148,10 @@ const logout = async () => {
 }
 
 const isAdmin = computed(() => !!(authStore.userInfo?.is_global_admin || authStore.userInfo?.is_org_admin))
-
-// Name editing state & actions
-const editingName = ref(false)
-const newName = ref('')
-function startEdit() { editingName.value = true; newName.value = '' }
-function cancelEdit() { editingName.value = false }
-async function saveName() {
-  try {
-    authStore.isLoading = true
-  const res = await fetch('/auth/user/display-name', { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: newName.value }) })
-    const data = await res.json(); if (!res.ok || data.detail) throw new Error(data.detail || 'Update failed')
-    await authStore.loadUserInfo()
-    editingName.value = false
-    authStore.showMessage('Name updated', 'success', 1500)
-  } catch (e) { authStore.showMessage(e.message || 'Failed to update name', 'error') }
-  finally { authStore.isLoading = false }
-}
 </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;
-}
-.user-name-heading {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-  margin: 0 0 0.25rem 0;
-}
-.user-name-row {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  max-width: 100%;
-}
-.user-name-row.editing { flex: 1 1 auto; }
-.icon { flex: 0 0 auto; }
-.display-name {
-  font-weight: 600;
-  font-size: 1.05em;
-  line-height: 1.2;
-  max-width: 14ch;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.name-input {
-  width: auto;
-  flex: 1 1 140px;
-  min-width: 120px;
-  padding: 6px 8px;
-  font-size: 0.9em;
-  border: 1px solid #a9c5d6;
-  border-radius: 6px;
-}
-.user-name-heading .name-input { width: auto; }
-.name-input:focus { outline: 2px solid #667eea55; border-color: #667eea; }
-.mini-btn {
-  width: auto;
-  padding: 4px 6px;
-  margin: 0;
-  font-size: 0.75em;
-  line-height: 1;
-  background: #eef5fa;
-  border: 1px solid #b7d2e3;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background 0.2s, transform 0.15s;
-}
-.mini-btn:hover:not(:disabled) { background: #dcecf6; }
-.mini-btn:active:not(:disabled) { transform: translateY(1px); }
-.mini-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-@media (max-width: 480px) {
-  .user-name-heading { flex-direction: column; align-items: flex-start; }
-  .user-name-row.editing { width: 100%; }
-  .display-name { max-width: 100%; }
-}
-</style>
-
-<style scoped>
+/* Removed inline user info styles; now provided by UserBasicInfo component */
 .admin-link {
   font-size: 0.6em;
   margin-left: 0.75rem;