Finalize Paskia integration and built-in authentication.

frontend/src/components/HeaderMain.vue

@@ -1,9 +1,5 @@
 <template>
   <nav class="headermain buttons">
-    <template v-if="store.error">
-      <div class="error-message" @click="store.error = ''">{{ store.error }}</div>
-      <div class="smallgap"></div>
-    </template>
     <UploadButton :path="props.path" />
     <SvgButton
       name="create-folder"
@@ -31,7 +27,7 @@
 <script setup lang="ts">
 import { useMainStore } from '@/stores/main'
 import { useSsoAuthStore } from '@/stores/ssoAuth'
-import { ref, nextTick, watchEffect, computed } from 'vue'
+import { ref, nextTick, watchEffect } from 'vue'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import { showAuthIframe } from 'paskia'
 import { resumeWatching } from '@/repositories/WS'
@@ -43,14 +39,6 @@ const showSearchInput = ref<boolean>(false)
 const search = ref<HTMLInputElement | null>()
 const searchButton = ref<HTMLButtonElement | null>()
 
-// Display name for SSO users
-const displayUserName = computed(() => {
-  if (ssoStore.isExternalAuth && ssoStore.userName) {
-    return ssoStore.userName
-  }
-  return store.user.username
-})
-
   const props = defineProps<{
   path: Array<string>
   query: string
@@ -90,33 +78,27 @@ const settingsMenu = (e: Event) => {
   // For external auth, show user name as link to /auth/
   if (ssoStore.isExternalAuth && store.user.isLoggedIn) {
     items.push({
-      label: displayUserName.value || 'User Account',
+      label: '👤 ' + (store.user.username || 'User Account'),
       onClick: () => { window.location.href = '/auth/' }
     })
-    items.push({ divided: true })
   }
 
   // Only show password change for non-SSO users
-  if (!ssoStore.isExternalAuth) {
-    items.push({ label: 'Change Password', onClick: () => { store.dialog = 'settings' }})
+  if (!ssoStore.isExternalAuth && store.user.isLoggedIn) {
+    items.push({ label: '🔑 Change Password', onClick: () => { store.dialog = 'settings' }})
   }
 
   if (store.user.privileged) {
-    items.push({ label: 'Admin Settings', onClick: () => { store.dialog = 'usermgmt' }})
+    items.push({ label: '⚙️ Admin Settings', onClick: () => { store.dialog = 'usermgmt' }})
   }
 
   if (store.user.isLoggedIn) {
-    if (ssoStore.isExternalAuth) {
-      // For SSO, link to auth logout
-      items.push({ label: 'Logout', onClick: () => { window.location.href = '/auth/' }})
-    } else {
-      items.push({ label: `Logout ${store.user.username ?? ''}`, onClick: () => store.logout() })
-    }
+    items.push({ label: '🚪 Logout', onClick: () => store.logout() })
   } else if (!ssoStore.isExternalAuth) {
     // Show login in paskia iframe overlay
-    items.push({ label: 'Login', onClick: async () => {
+    items.push({ label: '🔐 Login', onClick: async () => {
       try {
-        await showAuthIframe('/auth/api/restricted')
+        await showAuthIframe('/auth/restricted')
         resumeWatching()
       } catch (e) {
         console.log('Login cancelled')