[Admin][Frontend] Admin Profile Management

[mehalyna]

As an Admin,
I want to complete my profile by filling in the required personal information and changing my password,
So that my profile is complete and secure, allowing me to use the system.

---

Acceptance Criteria:

1. Fill in Required Profile Information

• Profile Form Display:

  • The page displays a form with two fields for the Admin to complete their profile:
    • Last Name (Прізвище) – Required
    • First Name (Ім'я) – Required
  • Both fields are marked with a red asterisk (*), indicating that they are mandatory fields.

• Input Fields:

  • The Admin must enter their Last Name and First Name.
  • The input fields have the following placeholders:
    • For Last Name: "Прізвище"
    • For First Name: "Ім'я"

• Save Changes Button:

  • A green "Зберегти зміни" (Save changes) button is located below the input fields.
  • Clicking the Save changes button submits the profile information.
  • If either of the fields is empty, an error message is displayed under the respective field:
    • "Обов'язкове поле" (Mandatory field)
    • "Обов'язкове поле" (Mandatory field)
  • Upon successful saving, a confirmation message appears indicating the profile details have been saved.

---

2. Change Password

• Password Change Form:

  • The page contains a form where the Admin can change their password.
  • There are three required fields:
    • Current Password (Поточний пароль) – Required
    • New Password (Новий пароль) – Required
    • Confirm Password (Підтвердження паролю) – Required

• Password Validation Rules:

  • The system enforces the following password validation criteria:
    • The password must be between 8 and 20 characters.
    • It must contain at least one uppercase letter, one lowercase letter, one number, and one special character (e.g., !, @, #).
  • If the new password does not meet these criteria, an error message is displayed below the New Password field, e.g.,
    "Пароль повинен містити від 8 до 20 символів, включаючи великі та малі літери, цифру та спеціальний символ." (The password must be between 8 and 20 characters, including uppercase, lowercase, numbers, and a special character.)

• Confirm Password Field:

  • The Confirm Password field must exactly match the New Password.
  • If the passwords do not match, an error message is displayed:
    "Паролі не співпадають" (Passwords do not match).

• Save Password Button:

  • A "Зберегти зміни" (Save changes) button is provided to submit the new password.
  • Upon clicking the button:
    • If all validation criteria are met and Current Password matches Admin's password, the system updates the password.
    • If the validation fails or/and Current Password does not match Admin's password, the Admin is prompted to correct the fields.

---

3. Success and Error Notifications:

• Success Notification:

  • After successfully saving the profile information or updating the password, a success message is displayed:
    • "Ваші дані успішно збережені" (Your data has been successfully saved).
    • "Пароль успішно змінено" (Password successfully changed).

• Error Handling:

  • If any fields are left blank or invalid, the system prevents the form from being submitted and displays appropriate error messages.
  • If the Current Password is incorrect, an error message should inform the Admin:
    "Невірний поточний пароль" (Incorrect current password).

---

Security Considerations:

• Password Masking: The password fields should be masked to hide the characters while typing.
• Strong Password Enforcement: The system ensures that the new password meets the specified complexity requirements to enhance security.

---

Mockups

Link to Figma https://www.figma.com/design/MFmFKJ2Qz8Sg78Jl5AuLh8/Forum-(Copy)?node-id=7438-19235&node-type=frame&t=GmL8TZlAeGQ9PAZL-0

Epic #799