# User Profile ## Application Overview The User Profile page at `/parent/profile` allows changing a profile image, first name, and last name. It also provides links to: Change Parent PIN, Change Password, and Delete Account. Save and Cancel buttons control form submission. **Email resolution for e2e PIN/password tests:** A test-only backend endpoint (`GET /user/e2e-get-pin-code`) returns the verification code directly. This endpoint is gated to non-production environments. Password reset tests simply verify the email-sent modal appears without inspecting the actual email. --- ## Implementation Tests are split into three isolated Playwright project buckets, all under `e2e/mode_parent/user-profile/`. ## Playwright Projects | Project | File | Notes | | ------------------------------ | ------------------------- | ------------------------------------------- | | `chromium-user-profile` | `profile-editing.spec.ts` | Restores profile via API in `afterEach` | | `chromium-user-profile-pin` | `change-pin.spec.ts` | Restores original PIN via API in `afterAll` | | `chromium-user-profile-delete` | `delete-account.spec.ts` | Re-seeds entire DB in `afterAll`; run last | **Config:** `playwright.config.ts` — all three depend on `setup` only. --- ## Test Scenarios ### 1. Profile Editing ✅ IMPLEMENTED **File:** `e2e/mode_parent/user-profile/profile-editing.spec.ts` **Seed:** Snapshots profile via API in `beforeEach`; restores it in `afterEach`. #### 1.1. Page loads with correct data ✅ - Profile heading is visible; First Name, Last Name, and Email fields show the seeded e2e values #### 1.2. Cancel navigates back ✅ - Clicking Cancel returns to the previous page without saving #### 1.3. Save disabled when form is clean ✅ - Save button is disabled when no fields have been changed #### 1.4. Save disabled when First Name is empty ✅ - Clearing the First Name field disables the Save button #### 1.5. Save disabled when Last Name is empty ✅ - Clearing the Last Name field disables the Save button #### 1.6. Save disabled when both name fields are empty ✅ - Clearing both fields keeps Save disabled #### 1.7. Save enables when a name is changed ✅ - Editing any name field enables the Save button #### 1.8. Save persists name changes ✅ - After saving, re-opening the profile shows the new values; a "Profile Updated" confirmation modal appears on save #### 1.9. Cancel discards unsaved changes ✅ - Changes made before Cancel are not reflected when the profile is re-opened #### 1.10. Email field is read-only ✅ - The email input is disabled and shows the account email #### 1.11. Change profile image (built-in) ✅ - Selecting an unselected built-in image and saving shows the confirmation modal; image persists on reload #### 1.12. Upload a custom profile image ✅ - Using "Add from device" to upload a local file selects it as the profile image; saving shows the confirmation modal #### 1.13. Change Password shows email-sent modal ✅ - Clicking Change Password shows a loading modal that transitions to a "Password Change Email Sent" confirmation; OK dismisses it and returns to the profile page --- ### 2. Change Parent PIN ✅ IMPLEMENTED **File:** `e2e/mode_parent/user-profile/change-pin.spec.ts` **Seed:** Restores the original e2e PIN via the test API helper in `afterAll`. #### 2.1. Change Parent PIN link navigates to PIN setup page ✅ - Clicking the link navigates to `/parent/pin-setup` and shows the "Set up your Parent PIN" step #### 2.2. Back from PIN setup returns to profile ✅ - Browser back from the PIN setup page returns to `/parent/profile` #### 2.3. Send Verification Code advances to step 2 ✅ - Clicking the button shows the "Enter Verification Code" step with a code input; Verify Code is disabled while the input is empty #### 2.4. Resend Code button appears after delay ✅ - A "Resend Code" button appears within ~10 seconds of reaching step 2 #### 2.5. Invalid code shows error ✅ - Submitting a wrong code shows an "invalid code" error message #### 2.6. Valid code advances to step 3 (Create PIN) ✅ - Entering the code from the test endpoint and clicking Verify Code shows the "Create Parent PIN" step with New PIN and Confirm PIN fields; Set PIN is initially disabled #### 2.7. Set PIN disabled when PINs do not match ✅ - Entering different values in both fields keeps Set PIN disabled #### 2.8. Set PIN disabled for fewer than 4 digits ✅ - Entering a 2-digit value in both fields keeps Set PIN disabled #### 2.9. Set PIN succeeds with matching 4-digit PIN ✅ - Entering matching 4-digit values and clicking Set PIN shows the "Parent PIN Set!" success step with a Back button #### 2.10. Back from success step exits parent mode ✅ - Clicking Back on the success step navigates to the child selector (`/child`) and exits parent mode --- ### 3. Delete Account ✅ IMPLEMENTED **File:** `e2e/mode_parent/user-profile/delete-account.spec.ts` **Seed:** Re-seeds the entire e2e database via `POST /auth/e2e-seed` in `afterAll` to restore the test user. #### 3.1. Delete My Account opens confirmation dialog ✅ - Clicking the button shows a "Delete Your Account?" modal with an email confirmation input; Delete is disabled and Cancel is visible #### 3.2. Delete button stays disabled for incomplete email ✅ - Entering a partial email keeps the Delete button disabled #### 3.3. Delete button enables when matching email is entered ✅ - Entering the exact account email enables the Delete button #### 3.4. Cancel closes the dialog without deleting ✅ - Clicking Cancel dismisses the modal and stays on the profile page with no account changes #### 3.5. Backdrop click does NOT close the dialog ✅ - Clicking the modal backdrop leaves the dialog open (no backdrop-dismiss behavior) #### 3.6. Successful deletion redirects to landing page ✅ - After entering the email and clicking Delete, an "Account Deleted" confirmation modal appears; clicking OK redirects to the landing page (`/`) #### 3.7. Login after deletion is blocked ✅ - Attempting to sign in with the deleted account's credentials shows a "marked for deletion" error and stays on the login page