Account Settings Frontend

The frontend module implements the current admin profile settings page.

Source: apps/admin/src/core/AccountSettings/

Directory Structure

AccountSettings/
  config/        Routes, messages, translations.
  pages/         Profile route page.
  view/
    forms/       Profile form and form fields.
    layouts/     Account layout.

Routes

Frontend route config:

config/routing.tsx

Mounted module path:

/account/*

Route	Page	Purpose
`/account/profile`	`ProfilePage`	Current admin profile settings.

The index route redirects to /account/profile.

Profile Page

Main file:

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:

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:

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`

2.6 KiB Raw Blame History