100 lines
2.6 KiB
Markdown
100 lines
2.6 KiB
Markdown
# Account Settings Frontend
|
|
|
|
The frontend module implements the current admin profile settings page.
|
|
|
|
Source: `apps/admin/src/core/AccountSettings/`
|
|
|
|
## Directory Structure
|
|
|
|
```txt
|
|
AccountSettings/
|
|
config/ Routes, messages, translations.
|
|
pages/ Profile route page.
|
|
view/
|
|
forms/ Profile form and form fields.
|
|
layouts/ Account layout.
|
|
```
|
|
|
|
## Routes
|
|
|
|
Frontend route config:
|
|
|
|
```txt
|
|
config/routing.tsx
|
|
```
|
|
|
|
Mounted module path:
|
|
|
|
```txt
|
|
/account/*
|
|
```
|
|
|
|
| Route | Page | Purpose |
|
|
| ------------------ | ------------- | ------------------------------- |
|
|
| `/account/profile` | `ProfilePage` | Current admin profile settings. |
|
|
|
|
The index route redirects to `/account/profile`.
|
|
|
|
## Profile Page
|
|
|
|
Main file:
|
|
|
|
```txt
|
|
pages/Profile/index.tsx
|
|
```
|
|
|
|
Responsibilities:
|
|
|
|
- Read the current user from `useAuth()`.
|
|
- Submit profile updates through `updateUser`.
|
|
- Map backend validation errors into form fields.
|
|
- Render assigned roles.
|
|
|
|
## Form
|
|
|
|
Profile form files:
|
|
|
|
```txt
|
|
view/forms/ProfileForm/Component.tsx
|
|
view/forms/ProfileForm/form.ts
|
|
view/forms/ProfileForm/fields/PasswordField.tsx
|
|
view/forms/ProfileForm/fields/AvatarCropperField.tsx
|
|
```
|
|
|
|
Password behavior:
|
|
|
|
- Password fields are hidden until toggled open.
|
|
- Password is optional.
|
|
- If provided, password must be at least 8 characters.
|
|
- If provided, confirmation must match.
|
|
|
|
Avatar behavior:
|
|
|
|
- The field supports local crop/preview UI.
|
|
- The form currently stages avatar data in the form value.
|
|
- Profile update payload strips avatar before calling `updateUser`.
|
|
|
|
## Auth Dependency
|
|
|
|
## Translations
|
|
|
|
Translations are module-local:
|
|
|
|
```txt
|
|
config/messages.ts
|
|
config/translation/en.json
|
|
config/translation/uk.json
|
|
```
|
|
|
|
Use only `ACCOUNT.*` keys inside this module.
|
|
|
|
## Common Change Guide
|
|
|
|
| Change | Start Here |
|
|
| ---------------------------- | ----------------------------------------------------------------------------- |
|
|
| Add a profile field | `ProfileForm/form.ts`, `ProfileForm/Component.tsx`, backend profile validator |
|
|
| Change password validation | `ProfileForm/form.ts` |
|
|
| Change avatar UI | `ProfileForm/fields/AvatarCropperField.tsx` |
|
|
| Change profile save behavior | `pages/Profile/index.tsx` and AuthProvider `updateUser` |
|
|
| Change translations | `config/translation/en.json` and `config/translation/uk.json` |
|