feat: Implement user profile and parent profile button tests

- Added tests for user profile editing, including name changes, image uploads, and password changes.
- Implemented tests for changing the parent PIN with verification code handling.
- Created tests for account deletion with confirmation dialog and email validation.
- Introduced parent profile button tests for both temporary and permanent modes, verifying badge visibility and menu options.
- Updated Playwright configuration to include new test buckets for user profile and parent profile button scenarios.
- Added e2e plans documentation for user profile and parent profile button tests.

frontend/vue-app/e2e/plans/parent-profile-button.plan.md

@@ -0,0 +1,65 @@
+# Parent Profile Button
+
+## Application Overview
+
+In parent mode, the top right of the screen should display the parent's profile icon. When clicking this icon, a menu should appear giving options to select.
+This is a parent mode only test, and probably should be in it's own bucket of tests
+
+**Profile Button Badge:**
+
+- There are 2 modes for the parent profile button in parent mode: Temporary access and Permanent access.
+- In temporary mode, there is no badge overlaying the profile icon button. This mode will revert back to child mode after after 1 minute or a reload of the site (see feat-parent-mode-expire.md)
+- In permanent mode, there should be a lock emoji badge over the icon button. This lets the user know that parent mode is active for 2 days. Reloading the page still keeps permanent mode. (see feat-parent-mode-expire.md)
+
+**Profile Button Menu Options:**
+When clicking the profile button, we should see the user's selected profile picture, name, and email. Verify those are present. Under this are options.
+
+1. Profile
+   - This option should take the user to the Edit Profile page. We just need to verify that page is there, testing the page will be for another plan.
+2. Child Mode
+   - Clicking this will take us out of parent mode and back to child mode. This can be verified by no longer having the view-selector navigation tab at the top-middle of the screen.
+   - In Child mode, clicking the profile button again should prompt us for the parent PIN.
+   - Entering the correct PIN will take us back into temporary parent mode. It will take us back into permanent parent mode if the checkbox is selected during PIN entry.
+3. Sign Out
+   - This will take us back to the landing page.
+
+---
+
+## Implementation
+
+### Constants
+
+`E2E_FIRST_NAME` and `STORAGE_STATE_TEMP_PARENT` were added to `e2e/e2e-constants.ts`. `E2E_FIRST_NAME` holds the first name of the seeded test user and is used to verify the name appears in the profile menu.
+
+### Auth Setup
+
+`e2e/auth-temp-parent.setup.ts` was created to produce a temporary parent mode storage state (logs in and enters PIN without checking "Stay in parent mode"). It depends on `setup` so it runs after the database is seeded.
+
+### Playwright Projects (`playwright.config.ts`)
+
+Two new isolated projects were added:
+
+- **`chromium-profile-button`** — uses the standard permanent parent mode storage state. Runs all spec files under `e2e/mode_parent/profile-button/`.
+- **`chromium-profile-button-temp`** — uses the temporary parent mode storage state. Runs the temporary-mode badge spec only.
+
+Both projects are excluded from the catch-all `chromium-tasks-rewards` project.
+
+### Test Files
+
+**`e2e/mode_parent/profile-button/profile-button.spec.ts`** ✅ IMPLEMENTED
+
+Covers all permanent parent mode scenarios (7 tests):
+
+1. **Badge – 🔒 visible in permanent mode** ✅
+2. **Menu – shows user name and email** ✅
+3. **Menu → Profile navigates to User Profile page** ✅
+4. **Menu → Child Mode exits parent mode** ✅ (view-selector disappears, button label changes to "Parent login")
+5. **Menu → Child Mode re-entry without checkbox enters temporary mode** ✅ (no 🔒 badge after re-entry)
+6. **Menu → Child Mode re-entry with checkbox enters permanent mode** ✅ (🔒 badge visible after re-entry)
+7. **Menu → Sign Out navigates to landing page** ✅ ("Sign In" nav button visible)
+
+**`e2e/mode_parent/profile-button/profile-button-temporary.spec.ts`** ✅ IMPLEMENTED
+
+Covers the temporary parent mode badge scenario (1 test):
+
+1. **Badge – no 🔒 badge in temporary mode** ✅ (enters temp mode by exiting to child mode then re-entering PIN without "Stay" checkbox)

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

@@ -0,0 +1,169 @@
+# 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