Copy page

Frontend

User Profile & Security Settings

User Profile & Security Settings

Relevant source files

The following files were used as context for generating this wiki page:

• src/lib/avatar-chrome-palette.ts
• src/lib/user-profile-store.svelte.ts
• src/routes/(app)/+layout.svelte
• src/routes/(app)/system/settings/+page.svelte
• src/routes/(app)/system/settings/profile/+page.svelte
• src/routes/(app)/system/settings/security/+page.svelte

The User Profile and Security Settings module manages personal user data, authentication preferences, and account security. It leverages a reactive store for session persistence and provides a comprehensive interface for profile customization and security configuration.

User Profile Store

The userProfileStore is a centralized, reactive state manager built using Svelte 5 Runes. it ensures that user information is consistent across the application shell, sidebars, and settings pages.

Implementation Details

• Reactivity: Uses $state to maintain the current profile object [src/lib/user-profile-store.svelte.ts:41-43].
• Persistence: Synchronizes the state with sessionStorage under the key user to maintain data across page refreshes [src/lib/user-profile-store.svelte.ts:34-35].
• Avatar Styling: The getUserAvatarStyle function dynamically calculates CSS styles (background color and contrasting text color) based on the user's avatar_color [src/lib/user-profile-store.svelte.ts:58-65].

Data Flow: Profile Synchronization

The profile is bootstrapped during the root layout mount and updated via the store's set method.

Code
graph TD
    subgraph "Storage Layer"
        SS["sessionStorage ('user')"]
    end

    subgraph "Logic Layer: userProfileStore"
        UPS["userProfileStore.set()"]
        UPState["userProfileState.current ($state)"]
    end

    subgraph "View Layer"
        AS["AppSidebar.svelte"]
        PP["Profile Page"]
    end

    SS -->|Initial Load| UPState
    UPS -->|Mutate & Notify| UPState
    UPState -->|Sync| SS
    UPState -->|Reactive Bind| AS
    UPState -->|Reactive Bind| PP

Sources: [src/lib/user-profile-store.svelte.ts:32-56], [src/routes/(app)/+layout.svelte:10-42]

---

User Profile Page

The profile page (/system/settings/profile) allows users to update their personal information. It uses sveltekit-superforms in SPA mode for client-side validation and submission.

Key Features

• PATCH /api/v1/auth/me: Updates the user profile. Immutable Identity Provider (IDP) fields (e.g., idp_code, is_admin) are excluded from the request body but updated in the local store from the response [src/routes/(app)/system/settings/profile/+page.svelte:67-75].
• Taint Tracking: Utilizes superForm's tainted state to detect unsaved changes, which drives the "Save Changes" button visibility and navigation guards [src/routes/(app)/system/settings/profile/+page.svelte:146-170].
• Navigation Guard: The beforeNavigate hook prevents users from leaving the page if there are unsaved changes [src/routes/(app)/system/settings/profile/+page.svelte:29-30].
• Avatar Customization:
  • hashSeedToIndex: A deterministic algorithm that maps a string (like display name) to a stable color index [src/lib/avatar-chrome-palette.ts:22-29].
  • Chrome Palette: Uses AVATAR_CHROME_PALETTES to provide accessible, high-contrast colors for the topbar and avatar fallbacks [src/lib/avatar-chrome-palette.ts:8-19].

Profile Form Architecture

Entity	Role
profileSchema	Zod validation for email, display name, and avatar colors [src/routes/(app)/system/settings/profile/+page.svelte:40-52].
userAvatarSeed	Derived value creating initials from display_name [src/routes/(app)/system/settings/profile/+page.svelte:149-163].
FormPageLayout	Standardized wrapper providing header snippets and footer actions [src/routes/(app)/system/settings/profile/+page.svelte:33].

Sources: [src/routes/(app)/system/settings/profile/+page.svelte:1-170], [src/lib/avatar-chrome-palette.ts:1-53]

---

Security Settings Page

The security page (/system/settings/security) handles sensitive configurations, including password management and OIDC (OpenID Connect) integration.

Functional Components

• Password Management: Fields for current, new, and confirmation passwords [src/routes/(app)/system/settings/security/+page.svelte:71-106].
• OIDC Configuration: Management of oidcIssuer, oidcClientId, and oidcClientSecret for external identity providers [src/routes/(app)/system/settings/security/+page.svelte:109-144].
• Account Deletion: A placeholder for "Oblio" account deletion logic [src/routes/(app)/system/settings/security/+page.svelte:54-57].
• Audit System: Integration with useEntityMetadata for the security_settings entity, allowing users to view the version history via a side-sheet [src/routes/(app)/system/settings/security/+page.svelte:23-47].

Entity Security Mapping

Code
graph LR
    subgraph "UI Component Space"
        SP["security/+page.svelte"]
        VH["VersionHistoryPanel"]
    end

    subgraph "Code Entity Space"
        UEM["useEntityMetadata('security_settings')"]
        OS["openSheet('entity.versionHistory')"]
        AF["apiFetch('/api/v1/entities/security_settings/meta')"]
    end

    SP --> UEM
    SP --> OS
    OS --> VH
    UEM --> AF

Sources: [src/routes/(app)/system/settings/security/+page.svelte:1-62], [src/routes/(app)/system/settings/security/+page.svelte:150-195]

---

Identity Provider (IDP) Metadata

The system tracks specific metadata fields related to external authentication. These fields are generally read-only for the user but are synchronized during profile updates.

Field	Description
idp_code	Unique identifier for the external identity provider [src/lib/user-profile-store.svelte.ts:6].
idp_org	Organization identifier within the IDP [src/lib/user-profile-store.svelte.ts:7].
idp_username	Username as defined in the external system [src/lib/user-profile-store.svelte.ts:8].
issuer	The URL of the OIDC provider that issued the token [src/lib/user-profile-store.svelte.ts:17].
is_verified	Boolean flag indicating if the account has been verified by the IDP [src/lib/user-profile-store.svelte.ts:15].

Sources: [src/lib/user-profile-store.svelte.ts:3-30], [src/routes/(app)/system/settings/profile/+page.svelte:40-52]

---