Feature: User Settings
Relevant source files
The following files were used as context for generating this wiki page:The User Settings feature provides a dedicated interface for users to manage their account details, security credentials, and application preferences. It is a core part of the user-centric design, allowing for personalization and secure account management. This module is encapsulated primarily within the SettingsView component and interacts with several backend API endpoints for profile and password updates.
The settings page is divided into two main sections: User Profile & Preferences, and Security. It also includes a notification system to provide feedback on user actions.
Sources: frontend/src/components/SettingsView.tsx:90-97, SUMMARY.md:38-40
Architecture and Components
The settings functionality is primarily handled by the SettingsView.tsx component, which is rendered within the main Layout.tsx. The Layout component provides the global context, including the theme toggle and logout functionality, which are related to the user's session and preferences.
Sources: frontend/src/components/Layout.tsx:15, frontend/src/components/SettingsView.tsx
Component Interaction
The diagram below illustrates how the main components interact to deliver the settings feature.
This diagram shows that Layout.tsx contains the main structure, and SettingsView.tsx is rendered as the primary content when the user navigates to the settings page.
Sources: frontend/src/components/Layout.tsx:43-48, 70-89, frontend/src/components/SettingsView.tsx
UI Structure
The SettingsView.tsx component is structured into two main visual sections:
- Profile & Preferences: A card containing forms to update user display name/email and controls for application preferences like language and notifications.
- Security: A card dedicated to changing the user's password.
Both sections are built using motion.div from Framer Motion for animated transitions.
Sources: frontend/src/components/SettingsView.tsx:144-219, 222-284
State Management
The SettingsView component uses React's useState hook to manage its internal state, including form inputs, loading indicators, and notifications.
| State Variable | Type | Description |
|---|---|---|
notification | { type, message } | null | Manages the content and type ('success' or 'error') of the toast notification. |
oldPassword | string | Stores the value of the "Old Password" input field. |
newPassword | string | Stores the value of the "New Password" input field. |
confirmPassword | string | Stores the value of the "Confirm Password" input field. |
displayName | string | Stores the user's display name, fetched from the API. |
email | string | Stores the user's email, fetched from the API. |
loading | boolean | Indicates when an API call (profile or password update) is in progress. |
language | string | Manages the selected language preference. |
notifications | boolean | Manages the notification toggle state. |
Sources: frontend/src/components/SettingsView.tsx:9-24
The component also uses useEffect to fetch the user's profile data from the /api/profile endpoint when it first mounts.
Sources: frontend/src/components/SettingsView.tsx:27-38
Feature Breakdown
User Profile Management
Users can update their display name and email. The data is fetched on component load and can be modified through a form.
Sources: frontend/src/components/SettingsView.tsx:157-199
Data Flow: Update Profile
The sequence diagram below shows the process of updating a user's profile information.
This diagram illustrates the interaction between the UI, the API service, and the backend when a user updates their profile.
Sources: frontend/src/components/SettingsView.tsx:75-86, SUMMARY.md:40
Security Management
The security section allows users to change their password. The system uses JWT for authentication and PBKDF2 for password hashing.
Sources: frontend/src/components/SettingsView.tsx:222-284, SUMMARY.md:120-122, frontend/src/components/DocumentationView.tsx:80-83
Data Flow: Change Password
The following diagram details the password change process, including client-side validation.
This diagram shows the client-side validation and backend communication for the password change feature.
Sources: frontend/src/components/SettingsView.tsx:51-73, SUMMARY.md:41, README.md:231
Application Preferences
Users can configure several application-level preferences.
| Preference | Component | Control | Description |
|---|---|---|---|
| Theme | Layout.tsx | Button with Sun/Moon icon | Toggles the application between light and dark themes using useTheme context. |
| Language | SettingsView.tsx | Select dropdown | Allows switching the interface language (e.g., 'Indonesia', 'English'). |
| Notifications | SettingsView.tsx | Toggle switch | Enables or disables system update notifications. |
Sources: frontend/src/components/SettingsView.tsx:206-219, frontend/src/components/Layout.tsx:78-85, frontend/src/context/ThemeContext.tsx
API Endpoints
The settings feature relies on the following backend API endpoints for data persistence.
| Method | Endpoint | Description | Source File |
|---|---|---|---|
GET / PUT | /api/profile | Get or update user profile information (display name, email). | SUMMARY.md |
POST | /api/change-password | Change the authenticated user's password. | SUMMARY.md |
Sources: SUMMARY.md:40-41, README.md:231, 233