- Create useAuthentik composable to read headers - Add UserAvatar component with avatar and user info - Add StatusBadges for auth/connection status - Add ActionButtons for logout and profile - Add UserMetadata component with full user details - Integrate all components in main page - Use Nuxt UI components throughout
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
/**
|
|
* Composable para leer información de usuario de Authentik
|
|
* Los headers son inyectados por Authentik Proxy Outpost
|
|
*/
|
|
export const useAuthentik = () => {
|
|
const headers = useRequestHeaders()
|
|
|
|
const user = computed(() => {
|
|
const username = headers['x-authentik-username']
|
|
const email = headers['x-authentik-email']
|
|
const name = headers['x-authentik-name']
|
|
const groups = headers['x-authentik-groups']
|
|
const uid = headers['x-authentik-uid']
|
|
|
|
// Si no hay username, el usuario no está autenticado
|
|
if (!username) {
|
|
return null
|
|
}
|
|
|
|
return {
|
|
username,
|
|
email,
|
|
name,
|
|
groups: groups ? groups.split('|') : [],
|
|
uid,
|
|
// Generar avatar URL usando UI Avatars
|
|
avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(name || username)}&background=random&size=128`
|
|
}
|
|
})
|
|
|
|
const isAuthenticated = computed(() => !!user.value)
|
|
|
|
const logout = () => {
|
|
// Authentik Proxy Outpost maneja el logout
|
|
// Redirigir a /outpost.goauthentik.io/sign_out
|
|
navigateTo('/outpost.goauthentik.io/sign_out', { external: true })
|
|
}
|
|
|
|
const goToProfile = () => {
|
|
// URL de perfil de Authentik
|
|
const authentikUrl = useRuntimeConfig().public.authentikUrl || 'https://authentik.nucleoriofrio.com'
|
|
navigateTo(`${authentikUrl}/if/user/`, { external: true, open: { target: '_blank' } })
|
|
}
|
|
|
|
return {
|
|
user,
|
|
isAuthenticated,
|
|
logout,
|
|
goToProfile
|
|
}
|
|
}
|