refactor: consolidate auth logic into helper, add letter E2E tests,

frontend/e2e/auth.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "@playwright/test";
-import { MailpitHelper } from "./utils/mailpit";
+import { AuthHelper } from "./utils/auth";
 
 test.describe("Authentication Flow (Real Backend)", () => {
   // Use unique email for each run to avoid conflicts in shared DB
@@ -11,61 +11,8 @@ test.describe("Authentication Flow (Real Backend)", () => {
   test("should register, activate via email, and login successfully", async ({
     page,
   }) => {
-    // 1. Registration
+    // Perform full auth cycle using helper
-    console.log(">>--- Navigating to Onboard Page...");
+    await AuthHelper.registerAndLogin(page, email, fullName, password);
-    await page.goto("/onboard");
-
-    // Fill the registration form
-    await page.getByLabel(/full name/i).fill(fullName);
-    await page.getByLabel("Email", { exact: true }).fill(email);
-    await page.getByLabel("Password", { exact: true }).fill(password);
-    await page.getByLabel(/confirm password/i).fill(password);
-
-    // Submit Registration
-    await page.getByRole("button", { name: /^register$/i }).click();
-
-    // Verify redirect to check-email page
-    console.log(">>--- Verifying redirect to check-email...");
-    await expect(page).toHaveURL(/\/verify-email/);
-    await expect(page.getByText(/check your email/i)).toBeVisible();
-
-    // 2. Activation via Mailpit
-    console.log(`>>--- Polling Mailpit for activation email for ${email}...`);
-    const activationLink = await MailpitHelper.getActivationLink(email);
-    console.log(`>>--- Found activation link: ${activationLink}`);
-
-    // Navigate to the activation link (this should activate and redirect to login)
-    await page.goto(activationLink);
-
-    // Verify activation success
-    console.log(">>--- Verifying activation success...");
-    await expect(page.getByText(/account activated/i)).toBeVisible();
-
-    // Click "Start Writing" to go to Login
-    await page.getByRole("button", { name: /start writing/i }).click();
-
-    // Verify redirect to login
-    console.log(">>--- Verifying redirect to login...");
-    await expect(page).toHaveURL(/\/login/);
-
-    // 3. Login
-    console.log(">>--- Navigated to Login. Handling Welcome Modal...");
-    const welcomeButton = page.getByRole("button", { name: /i understand/i });
-    await welcomeButton.waitFor({ state: "visible", timeout: 10000 });
-    await welcomeButton.click();
-    await expect(welcomeButton).toBeHidden();
-
-    console.log(">>--- Performing Login...");
-    const loginButton = page.getByRole("button", { name: /sign in/i });
-    await expect(loginButton).toBeVisible();
-
-    await page.getByLabel("Email", { exact: true }).fill(email);
-    await page.getByLabel("Password", { exact: true }).fill(password);
-    await loginButton.click();
-
-    // 4. Verify Success - Redirect to Drawer
-    console.log(">>--- Verifying redirect to Drawer...");
-    await expect(page).toHaveURL(/\/drawer/);
 
     // 5. Verify Zero-Knowledge Artifacts in IndexedDB
     console.log(">>--- Verifying MasterKey in IndexedDB...");

frontend/e2e/letter.spec.ts

@@ -0,0 +1,101 @@
+import { expect, test } from "@playwright/test";
+import { AuthHelper } from "./utils/auth";
+
+test.describe("Letter Drafting (Real Backend)", () => {
+  const password = "Password123!";
+
+  test("should create, store as draft, and persist data", async ({ page }) => {
+    const timestamp = Date.now() + Math.random();
+    const email = `draft-${timestamp}@example.com`;
+    const name = `Draft Author ${timestamp}`;
+
+    await AuthHelper.registerAndLogin(page, email, name, password);
+
+    console.log(">> [Draft] Navigating to Editor via UI...");
+    await page.getByRole("button", { name: /write something/i }).click();
+
+    console.log(`>> [Draft] Current URL after click: ${page.url()}`);
+
+    // Wait for the recipient input to be present in the DOM
+    const recipientInput = page.locator("#recipient");
+    await recipientInput.waitFor({ state: "visible", timeout: 20000 });
+
+    const recipientName = "Dear Friend";
+    await recipientInput.fill(recipientName);
+
+    // Type into the Fabric.js canvas
+    console.log(">> [Draft] Typing into canvas...");
+    const canvasInput = page.getByLabel("Canvas text input");
+    await canvasInput.waitFor({ state: "visible" });
+    await canvasInput.focus();
+    await canvasInput.fill("This is a secret draft created by E2E testing.");
+
+    // Store as draft
+    console.log(">> [Draft] Clicking Store...");
+    await page.getByRole("button", { name: /store/i }).click();
+
+    // Verify Success Modal/Alert
+    await expect(page.getByText(/your letter is saved/i)).toBeVisible();
+
+    // Verify URL updated with a UUID
+    await expect(page).toHaveURL(/\/quill\/[0-9a-f-]{36}/);
+    const savedUrl = page.url();
+    console.log(`>> [Draft] Saved URL: ${savedUrl}`);
+
+    // Reload and verify persistence
+    console.log(">> [Draft] Reloading to verify persistence...");
+    await page.goto(savedUrl);
+
+    // Wait for initial load overlay to disappear
+    await expect(page.getByText(/opening your draft/i)).toBeHidden();
+
+    // Check recipient
+    await expect(page.locator("#recipient")).toHaveValue(recipientName);
+
+    // Check canvas content
+    await expect(canvasInput).toHaveValue(/This is a secret draft/);
+  });
+
+  test("should seal a letter and show sharing link", async ({ page }) => {
+    const timestamp = Date.now() + Math.random();
+    const email = `seal-${timestamp}@example.com`;
+    const name = `Seal Author ${timestamp}`;
+
+    await AuthHelper.registerAndLogin(page, email, name, password);
+
+    console.log(">> [Seal] Navigating to Editor via UI...");
+    await page.getByRole("button", { name: /write something/i }).click();
+
+    const recipientInput = page.locator("#recipient");
+    await recipientInput.waitFor({ state: "visible", timeout: 20000 });
+    await recipientInput.fill("A Secret Guest");
+
+    const canvasInput = page.getByLabel("Canvas text input");
+    await canvasInput.focus();
+    await canvasInput.fill("This letter will be sealed and shared.");
+
+    // Click Seal
+    console.log(">> [Seal] Clicking Seal...");
+    await page.getByRole("button", { name: /seal/i }).click();
+
+    // Verify "Sealed & Ready" modal
+    console.log(">> [Seal] Verifying sharing modal...");
+    await expect(page.getByText(/sealed & ready/i)).toBeVisible();
+
+    // Verify sharing link contains a hash (the key)
+    const linkInput = page.locator("input[readOnly]");
+    const linkValue = await linkInput.inputValue();
+
+    expect(linkValue).toContain("/read/");
+    expect(linkValue).toContain("#");
+
+    console.log(`>> [Seal] Sharing link generated: ${linkValue}`);
+
+    // Verify "Copy" button works
+    await expect(page.getByRole("button", { name: /copy/i })).toBeVisible();
+
+    // Close modal
+    await page.getByRole("button", { name: /close/i }).click();
+    await expect(page.getByText(/sealed & ready/i)).toBeHidden();
+  });
+});

frontend/e2e/utils/auth.ts

@@ -0,0 +1,50 @@
+import { expect, type Page } from "@playwright/test";
+import { MailpitHelper } from "./mailpit";
+
+/**
+ * Completes the full registration -> activation -> login cycle.
+ */
+export async function registerAndLogin(
+  page: Page,
+  email: string,
+  fullName: string,
+  password: string,
+) {
+  // 1. Registration
+  console.log(`[Auth] Registering user: ${email}`);
+  await page.goto("/onboard");
+  await page.getByLabel(/full name/i).fill(fullName);
+  await page.getByLabel("Email", { exact: true }).fill(email);
+  await page.getByLabel("Password", { exact: true }).fill(password);
+  await page.getByLabel(/confirm password/i).fill(password);
+  await page.getByRole("button", { name: /^register$/i }).click();
+
+  await expect(page).toHaveURL(/\/verify-email/);
+
+  // 2. Activation via Mailpit
+  console.log(`[Auth] Polling Mailpit for activation email...`);
+  const activationLink = await MailpitHelper.getActivationLink(email);
+  await page.goto(activationLink);
+
+  await expect(page.getByText(/account activated/i)).toBeVisible();
+  await page.getByRole("button", { name: /start writing/i }).click();
+
+  // 3. Login
+  console.log(`[Auth] Logging in...`);
+  await expect(page).toHaveURL(/\/login/);
+
+  const welcomeButton = page.getByRole("button", { name: /i understand/i });
+  await welcomeButton.waitFor({ state: "visible", timeout: 10000 });
+  await welcomeButton.click();
+  await expect(welcomeButton).toBeHidden();
+
+  await page.getByLabel("Email", { exact: true }).fill(email);
+  await page.getByLabel("Password", { exact: true }).fill(password);
+  await page.getByRole("button", { name: /sign in/i }).click();
+
+  await expect(page).toHaveURL(/\/drawer/);
+  console.log(`[Auth] Successfully authenticated ${email}`);
+}
+
+// Maintain backward compatibility if needed, or update callers
+export const AuthHelper = { registerAndLogin };

frontend/src/pages/Editor.tsx

@@ -273,6 +273,7 @@ export default function Editor() {
                 type="button"
                 className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
                 onClick={() => setShareLink(null)}
+                aria-label="Close"
               >
                 <XCircleIcon size={18} weight="bold" />
               </button>

frontend/src/pages/Login.tsx

@@ -57,7 +57,7 @@ export default function Login() {
       });
 
       // store the auth related data
-      setAuthStore(authData.access, userData, masterKey);
+      await setAuthStore(authData.access, userData, masterKey);
 
       navigate(ROUTES.DRAWER);
     } catch (err) {