# Account Settings Frontend

The frontend module implements the current admin profile settings page.

Source root:

```txt
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`                 |