chore/frontend/vue-app/e2e/plans/user-profile.plan.md

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