# 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/avatar-chrome-palette.ts) - [src/lib/user-profile-store.svelte.ts](src/lib/user-profile-store.svelte.ts) - [src/routes/(app)/+layout.svelte](src/routes/(app)/+layout.svelte) - [src/routes/(app)/system/settings/+page.svelte](src/routes/(app)/system/settings/+page.svelte) - [src/routes/(app)/system/settings/profile/+page.svelte](src/routes/(app)/system/settings/profile/+page.svelte) - [src/routes/(app)/system/settings/security/+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. ```mermaid 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 ```mermaid 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]]() ---