Files
paskia/frontend/auth/App.vue
T
LeoVasanko 8e7acd6b9e Frontend: realm admin UI, passkey realm badges, cross-realm notices
- Admin: replace Server Options dialog with per-realm management —
  realms table on the overview, add/edit/delete realm dialog backed by
  /auth/api/admin/realms/. Origins may be any well-formed origin;
  non-subdomain ones are related origins (ROR, max 5) and the dialog
  points at the .well-known/webauthn URL that must list them.
  Connectivity checks compare against the edited realm's rp-id and
  degrade to warnings instead of blocking saves.
- Host mode (limited profile) now keys off own_auth_host so realms
  sharing another realm's auth host serve the full profile locally.
- Credential list shows a realm badge on passkeys registered for a
  different rp-id than the current realm.
- Profile shows an enrollment prompt when the user has no passkey for
  the current realm (e.g. after a cross-realm remote login).
- Remote auth permit shows the requesting realm when it differs from
  the approver's own.
- settings cache can be force-refreshed after realm changes.
2026-09-06 04:50:35 +00:00

113 lines
3.9 KiB
Vue

<template>
<div class="app-shell">
<StatusMessage />
<main class="app-main">
<HostProfileView v-if="viewState === 'profile' && isHostMode" />
<ProfileView v-else-if="viewState === 'profile'" />
<LoadingView v-else-if="viewState === 'loading'" :message="loadingMessage" />
<AccessDenied v-else-if="viewState === 'terminal'" />
</main>
</div>
</template>
<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { apiJson, SessionValidator, settings as paskiaSettings } from 'paskia'
import { updateThemeFromSession } from '@/utils/theme'
import StatusMessage from '@/components/StatusMessage.vue'
import ProfileView from '@/components/ProfileView.vue'
import HostProfileView from '@/components/HostProfileView.vue'
import LoadingView from '@/components/LoadingView.vue'
import AccessDenied from '@/components/AccessDenied.vue'
const store = useAuthStore()
const viewState = ref('loading') // 'loading' | 'profile' | 'terminal'
const loadingMessage = ref('Loading...')
/**
* Normalize a host string for comparison (lowercase, strip default ports).
*/
function normalizeHost(raw) {
if (!raw) return null
const trimmed = raw.trim().toLowerCase()
if (!trimmed) return null
// Remove default ports
return trimmed.replace(/:80$/, '').replace(/:443$/, '')
}
/**
* Host mode is active when an own_auth_host is configured AND the current host differs from it.
* In host mode, we show a limited profile view with logout and link to full profile.
* own_auth_host (not auth_host) is used so that realms sharing another realm's auth host
* still serve the full profile on their own hosts.
*/
const isHostMode = computed(() => {
const authHost = store.settings?.own_auth_host
if (!authHost) return false
const currentHost = normalizeHost(window.location.host)
const configuredHost = normalizeHost(authHost)
return currentHost !== configuredHost
})
function onSessionLost(e) {
store.userInfo = null
store.ctx = null
if (e?.name === 'AuthCancelledError') {
viewState.value = 'terminal'
} else {
store.showMessage(e?.message || 'Session lost', 'error', 5000)
viewState.value = 'terminal'
}
}
const userUuidGetter = () => store.ctx?.user.uuid
const sessionValidator = new SessionValidator(userUuidGetter, onSessionLost)
onMounted(() => sessionValidator.start())
onUnmounted(() => sessionValidator.stop())
async function loadUserInfo() {
viewState.value = 'loading'
loadingMessage.value = 'Loading...'
try {
// apiJson handles 401/403 with auth.iframe automatically:
// shows overlay iframe, waits for auth, retries the request.
const [validateData, userInfoData] = await Promise.all([
apiJson('/auth/api/validate', { method: 'POST', timeout: paskiaSettings.auth_ms }),
apiJson('/auth/api/user-info', { method: 'GET', timeout: paskiaSettings.auth_ms })
])
store.userInfo = userInfoData
store.ctx = validateData.ctx
updateThemeFromSession(store.userInfo)
// Verify that the user UUIDs match between user-info and validate responses
if (store.userInfo.user.uuid !== store.ctx.user.uuid) {
console.error('User UUID mismatch between user-info and validate responses')
window.location.reload()
return
}
viewState.value = 'profile'
} catch (e) {
onSessionLost(e)
}
}
onMounted(async () => {
// Load settings
await store.loadSettings()
// Set appropriate page title based on mode
const rpName = store.settings?.rp_name
if (rpName) {
// In host mode, show "account summary" style title
// Settings are loaded but isHostMode depends on them, so check here
const authHost = store.settings?.own_auth_host
const inHostMode = authHost && normalizeHost(window.location.host) !== normalizeHost(authHost)
document.title = inHostMode ? `${rpName} · Account summary` : rpName
}
// Load user info (apiJson handles auth iframe if needed)
await loadUserInfo()
})
</script>