frontend/e2e/letter.spec.ts

@@ -1,6 +1,7 @@
 import { expect, test } from "@playwright/test";
 import pino from "pino";
 import { AuthHelper } from "./utils/auth";
+import { revealEnvelope } from "./utils/envelope";
 
 const logger = pino({
   transport: {
@@ -22,20 +23,19 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await AuthHelper.registerAndLogin(page, email, name, password);
 
     logger.info(">> [Draft] Navigating to Editor via UI...");
-    await page.getByRole("button", { name: /write something/i }).click();
+    await page.getByTestId("write-letter-btn").click();
 
     logger.info(`>> [Draft] Current URL after click: ${page.url()}`);
 
-    // Wait for the recipient input to be present in the DOM
+    // Editor page
-    const recipientInput = page.locator("#recipient");
+    await expect(page.getByTestId("recipient-input")).toBeVisible();
-    await recipientInput.waitFor({ state: "visible", timeout: 20000 });
+    const recipientInput = page.getByTestId("recipient-input");
 
     const recipientName = "Dear Friend";
     await recipientInput.fill(recipientName);
 
     // Initial load: verify textarea value (populated by Fabric when focused)
     const canvasInput = page.locator("textarea");
-    await canvasInput.waitFor({ state: "attached" });
     await canvasInput.focus();
     await expect(canvasInput).toHaveValue(/Take a deep breath/i);
 
@@ -46,10 +46,10 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await page.keyboard.press("Enter");
     await page.keyboard.type("It should persist.");
     logger.info(">> [Draft] Clicking Draft...");
-    await page.getByRole("button", { name: /draft/i }).click();
+    await page.getByTestId("draft-btn").click();
 
     // Verify Success Modal/Alert
-    await expect(page.getByText(/your letter is saved/i)).toBeVisible();
+    await expect(page.getByTestId("save-success-toast")).toBeVisible();
 
     // Verify URL updated with a UUID
     await expect(page).toHaveURL(/\/quill\/[0-9a-f-]{36}/);
@@ -61,24 +61,16 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await page.goto(savedUrl);
 
     // Wait for initial load overlay to appear and then definitely disappear
-    await page
+    await expect(page.getByTestId("opening-draft-overlay")).toBeHidden();
-      .getByText(/opening your draft/i)
-      .waitFor({ state: "visible", timeout: 2000 })
-      .catch(() => {});
-    await expect(page.getByText(/opening your draft/i)).toBeHidden({
-      timeout: 10000,
-    });
 
     // Check recipient
-    await expect(page.locator("#recipient")).toHaveValue(recipientName);
+    await expect(page.getByTestId("recipient-input")).toHaveValue(recipientName);
 
     // Check canvas content
     // We wait for the content to appear in the textarea.
     // toHaveValue will poll until it matches or timeouts.
     await canvasInput.focus();
-    await expect(canvasInput).toHaveValue(/This is a secret draft/i, {
+    await expect(canvasInput).toHaveValue(/This is a secret draft/i);
-      timeout: 10000,
-    });
     await expect(canvasInput).toHaveValue(/It should persist/i);
   });
 
@@ -92,10 +84,9 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await AuthHelper.registerAndLogin(page, email, name, password);
 
     logger.info(">> [Seal] Navigating to Editor via UI...");
-    await page.locator("#write-letter-btn").click();
+    await page.getByTestId("write-letter-btn").click();
 
-    const recipientInput = page.locator("#recipient");
+    const recipientInput = page.getByTestId("recipient-input");
-    await recipientInput.waitFor({ state: "visible", timeout: 10000 });
     await recipientInput.fill("A Secret Guest");
 
     const canvasInput = page.locator("textarea");
@@ -104,55 +95,41 @@ test.describe("Letter Drafting (Real Backend)", () => {
 
     // Click Seal (open menu, then confirm)
     logger.info(">> [Seal] Clicking Seal...");
-    await page
+    await page.getByTestId("seal-trigger-btn").click();
-      .getByRole("button", { name: /seal/i })
+    await page.getByTestId("seal-confirm-btn").click();
-      .filter({ visible: true })
-      .click();
-    await page
-      .getByRole("button", { name: /seal/i })
-      .filter({ visible: true })
-      .click();
 
     // Should show sealed confirmation modal
     logger.info(">> [Seal] Verifying sealed modal...");
-    await expect(page.getByText(/your letter is sealed/i)).toBeVisible({
+    await expect(page.getByTestId("post-seal-modal")).toBeVisible();
-      timeout: 10000,
-    });
 
     // Navigate to Reader via "View letter"
-    await page.getByRole("button", { name: /view letter/i }).click();
+    await page.getByTestId("view-letter-btn").click();
 
     // Should be on Reader URL
-    await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/, { timeout: 15000 });
+    await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/);
 
     // Open the envelope to reveal the letter
-    await expect(page.getByText(/breaking the seal/i)).toBeHidden({
+    await expect(page.getByTestId("decryption-overlay")).toBeHidden();
-      timeout: 10000,
+    // Flip the envelope to show the seal and reveal the letter
-    });
+    await revealEnvelope(page);
-    // Flip the envelope to show the seal
+    await expect(page.getByTestId("envelope-letter")).toBeHidden();
-    await page.locator("#env-front").click();
-    await page.waitForTimeout(2500); // Wait for flip transition
-
-    await page.getByAltText("Seal").click();
-    await page.waitForTimeout(1500);
-    await page.locator("#letter").click({ position: { x: 30, y: 15 } });
-    await expect(page.locator("#letter")).toBeHidden({ timeout: 20000 });
 
     // Share on demand
     logger.info(">> [Seal] Clicking Share button in Reader...");
-    await page.locator("#share-letter-btn").click();
+    await page.getByTestId("share-letter-btn").click();
 
     // Verify share modal with a valid link
-    await expect(page.getByText(/send this letter/i)).toBeVisible();
+    await expect(page.getByTestId("share-letter-modal")).toBeVisible();
     const linkInput = page.locator("#share-link-input");
     const linkValue = await linkInput.inputValue();
     expect(linkValue).toContain("/read/");
     expect(linkValue).toContain("#");
     logger.info(`>> [Seal] Sharing link: ${linkValue}`);
 
-    await expect(page.getByRole("button", { name: /copy/i })).toBeVisible();
+    await expect(page.getByTestId("copy-link-btn")).toBeVisible();
-    await page.getByRole("button", { name: /close/i }).click();
+    // Assuming Close button in ShareModal might need a testid too, but for now let's use text if unique or add testid
-    await expect(page.getByText(/send this letter/i)).toBeHidden();
+    await page.getByTestId("modal-close-btn").click();
+    await expect(page.getByTestId("share-letter-modal")).toBeHidden();
   });
 
   test("should allow author to access sealed letter from drawer without sharing key", async ({
@@ -167,10 +144,9 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await AuthHelper.registerAndLogin(page, email, name, password);
 
     logger.info(">> [Drawer] Creating and sealing a letter...");
-    await page.getByRole("button", { name: /write something/i }).click();
+    await page.getByTestId("write-letter-btn").click();
 
-    const recipientInput = page.locator("#recipient");
+    const recipientInput = page.getByTestId("recipient-input");
-    await recipientInput.waitFor({ state: "visible" });
     await recipientInput.fill(recipientName);
 
     const canvasInput = page.locator("textarea");
@@ -178,59 +154,34 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await canvasInput.fill(letterContent);
 
     // Click Seal (open menu, then confirm)
-    await page
+    await page.getByTestId("seal-trigger-btn").click();
-      .getByRole("button", { name: /seal/i })
+    await page.getByTestId("seal-confirm-btn").click();
-      .filter({ visible: true })
-      .click();
-    await page
-      .getByRole("button", { name: /seal/i })
-      .filter({ visible: true })
-      .click();
 
     // Sealed modal should appear — click "Keep it" to go to Drawer
-    await expect(page.getByText(/your letter is sealed/i)).toBeVisible({
+    await expect(page.getByTestId("post-seal-modal")).toBeVisible();
-      timeout: 10000,
+    await page.getByTestId("keep-it-btn").click();
-    });
-    await page.getByRole("button", { name: /keep it to myself/i }).click();
 
     // Open "Kept" section - search for the section with id='kept' and click its toggle button
     logger.info(">> [Drawer] Opening Kept section...");
-    const keptSection = page.locator("#kept");
+    await page.getByTestId("drawer-section-kept").click();
-    await keptSection.getByRole("button", { name: /kept/i }).click();
 
     // Find the sealed letter in the drawer by recipient name and click it
     logger.info(">> [Drawer] Clicking sealed letter in drawer...");
     const sealedItem = page
-      .getByRole("button", { name: new RegExp(recipientName, "i") })
+      .getByTestId(/^letter-item-/)
+      .filter({ hasText: recipientName })
       .first();
     await sealedItem.click();
 
     // Verify it opens the Reader without a hash
     logger.info(">> [Drawer] Verifying Reader page...");
     // Give it a bit more time for decryption
-    await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/, { timeout: 15000 });
+    await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/);
     // Reveal and check decrypted content in Reader
-    await expect(page.getByText(/breaking the seal/i)).toBeHidden({
+    await expect(page.getByTestId("decryption-overlay")).toBeHidden();
-      timeout: 10000,
+    // Flip the envelope and reveal the letter
-    });
+    await revealEnvelope(page);
-    // Check recipient on the front of the envelope
+    await expect(page.getByTestId("envelope-letter")).toBeHidden();
-    await expect(page.getByText(new RegExp(recipientName, "i"))).toBeVisible();
-
-    // Flip the envelope to the back
-    await page.getByText(new RegExp(recipientName, "i")).click();
-    // Wait for flip transition (2s)
-    await page.waitForTimeout(2500);
-
-    // Reveal the letter: click seal then click letter
-    await page.getByAltText("Seal").click();
-    // Wait for flap transition
-    await page.waitForTimeout(1500);
-
-    // Click the letter to pull it out
-    await page.locator("#letter").click({ position: { x: 30, y: 15 } });
-
-    // Wait for reveal transition
-    await expect(page.locator("#letter")).toBeHidden({ timeout: 20000 });
 
     // Also check if we are redirected to the Reader if we manually go to the Editor URL
     const readerUrl = page.url();

frontend/e2e/utils/auth.ts

@@ -1,6 +1,7 @@
 import { expect, type Page } from "@playwright/test";
 import pino from "pino";
 import { MailpitHelper } from "./mailpit";
+import { handleWelcomeLetter } from "./envelope";
 
 const logger = pino({
   transport: {
@@ -23,11 +24,11 @@ async function registerAndLogin(
   // Register the User
   logger.info(`[Auth] Registering user: ${email}`);
   await page.goto("/onboard");
-  await page.getByLabel(/pen name/i).fill(fullName);
+  await page.getByTestId("pen-name-input").fill(fullName);
-  await page.getByLabel("Email", { exact: true }).fill(email);
+  await page.getByTestId("email-input").fill(email);
-  await page.getByLabel("Password", { exact: true }).fill(password);
+  await page.getByTestId("password-input").fill(password);
-  await page.getByLabel(/confirm password/i).fill(password);
+  await page.getByTestId("confirm-password-input").fill(password);
-  await page.getByRole("button", { name: /^register$/i }).click();
+  await page.getByTestId("register-submit-btn").click();
 
   await expect(page).toHaveURL(/\/verify-email/);
 
@@ -37,51 +38,23 @@ async function registerAndLogin(
 
   await page.goto(activationLink);
 
-  await expect(page.getByText(/account activated/i)).toBeVisible();
+  await expect(page.getByTestId("activation-success-header")).toBeVisible();
-  await page.getByRole("button", { name: /start writing/i }).click();
+  await page.getByTestId("start-writing-btn").click();
 
   // Dismiss the Welcom Modal and Perform Login
   logger.info(`[Auth] Logging in...`);
   await expect(page).toHaveURL(/\/login/);
 
-  const welcomeButton = page.getByRole("button", { name: /I'll remember/i });
+  await page.getByTestId("welcome-dismiss-btn").click();
-  await welcomeButton.waitFor({ state: "visible", timeout: 10000 });
+  await expect(page.getByTestId("welcome-dismiss-btn")).toBeHidden();
-  await welcomeButton.click();
-  await expect(welcomeButton).toBeHidden();
 
-  await page.getByLabel("Email", { exact: true }).fill(email);
+  await page.getByTestId("email-input").fill(email);
-  await page.getByLabel("Password", { exact: true }).fill(password);
+  await page.getByTestId("password-input").fill(password);
-  await page.getByRole("button", { name: /sign in/i }).click();
+  await page.getByTestId("login-submit-btn").click();
 
   await expect(page).toHaveURL(/\/drawer/);
   await handleWelcomeLetter(page);
   logger.info(`[Auth] Successfully authenticated ${email}`);
 }
 
-/**
+export const AuthHelper = { registerAndLogin };
- * Handles and dismisses the first welocme letter
- */
-async function handleWelcomeLetter(page: Page) {
-  logger.info("[Auth] Handling Welcome Letter...");
-  // Click envelope to flip
-  const envelope = page.locator("#env-front");
-  await envelope.waitFor({ state: "visible", timeout: 10000 });
-  await envelope.click();
-
-  // Click seal to open flap
-  const seal = page.getByAltText("Seal");
-  await seal.waitFor({ state: "visible" });
-  await seal.click();
-
-  // Click letter to reveal
-   await page.locator("#letter").click({ position: { x: 30, y: 15 } });
-
-  // Click "I'll see you" button
-  const completeButton = page.getByRole("button", { name: /I'll see you/i });
-  await completeButton.waitFor({ state: "visible", timeout: 10000 });
-  await completeButton.click();
-
-  await expect(completeButton).toBeHidden();
-}
-
-export const AuthHelper = { registerAndLogin, handleWelcomeLetter };

frontend/e2e/utils/envelope.ts

@@ -0,0 +1,38 @@
+import { type Page, expect } from "@playwright/test";
+import pino from "pino";
+
+const logger = pino({
+  transport: {
+    target: "pino-pretty",
+    options: {
+      colorize: true,
+    },
+  },
+});
+
+/**
+ * Reveal a letter from an envelope.
+ */
+export async function revealEnvelope(page: Page) {
+  logger.info("[Envelope] Revealing envelope...");
+  // Click envelope to flip
+  await page.getByTestId("envelope-front").click();
+
+  // Click seal to open flap
+  await page.getByTestId("wax-seal").click();
+
+  // Click letter to reveal
+  await page.getByTestId("envelope-letter").click({ position: { x: 30, y: 15 } });
+}
+
+/**
+ * Handles and dismisses the first welcome letter
+ */
+export async function handleWelcomeLetter(page: Page) {
+  logger.info("[Envelope] Handling Welcome Letter...");
+  await revealEnvelope(page);
+
+  // Click "I'll see you" button
+  await page.getByTestId("dismiss-welcome-letter-btn").click();
+  await expect(page.getByTestId("dismiss-welcome-letter-btn")).toBeHidden();
+}

frontend/package.json

@@ -1,70 +1,70 @@
 {
-  "name": "frontend",
+    "name": "frontend",
-  "private": true,
+    "private": true,
-  "version": "0.0.0",
+    "version": "0.0.0",
-  "type": "module",
+    "type": "module",
-  "scripts": {
+    "scripts": {
-    "dev": "vite",
+        "dev": "vite",
-    "build": "tsc -b & vite build",
+        "build": "tsc -b & vite build",
-    "build:prod": "vite build --mode production",
+        "build:prod": "vite build --mode production",
-    "lint": "biome lint --write ./src",
+        "lint": "biome lint --write ./src",
-    "format": "biome format --write ./src",
+        "format": "biome format --write ./src",
-    "check": "biome check --write ./src",
+        "check": "biome check --write ./src",
-    "check-all": "biome check --write .",
+        "check-all": "biome check --write .",
-    "preview": "vite preview",
+        "preview": "vite preview",
-    "test": "vitest run",
+        "test": "vitest run",
-    "test:watch": "vitest",
+        "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
+        "test:coverage": "vitest run --coverage",
-    "test:e2e": "playwright test",
+        "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui --ui-host=0.0.0.0 --ui-port=43008"
+        "test:e2e:ui": "playwright test --ui --ui-host=0.0.0.0 --ui-port=43008"
-  },
+    },
-  "dependencies": {
+    "dependencies": {
-    "@fontsource-variable/jost": "^5.2.8",
+        "@fontsource-variable/jost": "^5.2.8",
-    "@fontsource-variable/playfair-display": "^5.2.8",
+        "@fontsource-variable/playfair-display": "^5.2.8",
-    "@fontsource-variable/playwrite-hr-lijeva": "^5.2.7",
+        "@fontsource-variable/playwrite-hr-lijeva": "^5.2.7",
-    "@fontsource/architects-daughter": "^5.2.7",
+        "@fontsource/architects-daughter": "^5.2.7",
-    "@fontsource/cutive-mono": "^5.2.8",
+        "@fontsource/cutive-mono": "^5.2.8",
-    "@fontsource/kavivanar": "^5.2.8",
+        "@fontsource/kavivanar": "^5.2.8",
-    "@fontsource/knewave": "^5.2.7",
+        "@fontsource/knewave": "^5.2.7",
-    "@fontsource/redacted-script": "^5.2.8",
+        "@fontsource/redacted-script": "^5.2.8",
-    "@fontsource/space-mono": "^5.2.9",
+        "@fontsource/space-mono": "^5.2.9",
-    "@hookform/resolvers": "^5.2.2",
+        "@hookform/resolvers": "^5.2.2",
-    "@phosphor-icons/react": "^2.1.10",
+        "@phosphor-icons/react": "^2.1.10",
-    "@tailwindcss/vite": "^4.2.2",
+        "@tailwindcss/vite": "^4.2.2",
-    "axios": "^1.15.0",
+        "axios": "^1.15.0",
-    "daisyui": "^5.5.19",
+        "daisyui": "^5.5.19",
-    "fabric": "^7.2.0",
+        "fabric": "^7.2.0",
-    "idb": "^8.0.3",
+        "idb": "^8.0.3",
-    "lenis": "^1.3.23",
+        "lenis": "^1.3.23",
-    "motion": "^12.38.0",
+        "motion": "^12.38.0",
-    "react": "^19.2.4",
+        "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+        "react-dom": "^19.2.4",
-    "react-hook-form": "^7.72.1",
+        "react-hook-form": "^7.72.1",
-    "react-router-dom": "^7.14.0",
+        "react-router-dom": "^7.14.0",
-    "tailwindcss": "^4.2.2",
+        "tailwindcss": "^4.2.2",
-    "zod": "^4.3.6",
+        "zod": "^4.3.6",
-    "zustand": "^5.0.12"
+        "zustand": "^5.0.12"
-  },
+    },
-  "devDependencies": {
+    "devDependencies": {
-    "@biomejs/biome": "^2.4.11",
+        "@biomejs/biome": "^2.4.11",
-    "@playwright/test": "^1.59.1",
+        "@playwright/test": "^1.59.1",
-    "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
+        "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
+        "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.6.0",
+        "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
+        "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
+        "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-basic-ssl": "^2.3.0",
+        "@vitejs/plugin-basic-ssl": "^2.3.0",
-    "@vitejs/plugin-react": "^6.0.1",
+        "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "^4.1.4",
+        "@vitest/coverage-v8": "^4.1.4",
-    "dotenv": "^17.4.2",
+        "dotenv": "^17.4.2",
-    "fake-indexeddb": "^6.2.5",
+        "fake-indexeddb": "^6.2.5",
-    "jsdom": "^29.0.2",
+        "jsdom": "^29.0.2",
-    "msw": "^2.13.2",
+        "msw": "^2.13.2",
-    "pino": "^10.3.1",
+        "pino": "^10.3.1",
-    "pino-pretty": "^13.1.3",
+        "pino-pretty": "^13.1.3",
-    "typescript": "~6.0.2",
+        "typescript": "~6.0.2",
-    "vite": "^8.0.4",
+        "vite": "^8.0.4",
-    "vitest": "^4.1.4"
+        "vitest": "^4.1.4"
-  }
+    }
 }

frontend/playwright.config.ts

@@ -60,7 +60,8 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: "npm run dev -- --mode e2e",
+    // NOTE: using npm here for docker compat mainly
+    command: "npm run build -- --mode e2e && npm run preview -- --mode e2e",
     url: getBaseUrl(
       process.env.SSL_ENABLED === "true",
       process.env.FRONTEND_DOMAIN,

frontend/src/components/drawer/DrawerSection.tsx

@@ -35,6 +35,7 @@ export function DrawerSection({
       <button
         type="button"
         onClick={onClick}
+        data-testid={`drawer-section-${id}`}
         className={`w-full p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40`}
       >
         <div className="flex-1">

frontend/src/components/drawer/LetterItem.tsx

@@ -33,6 +33,7 @@ export function LetterItem({
     <button
       type="button"
       onClick={handleNavigate}
+      data-testid={`letter-item-${id}`}
       className={`${isLocked ? "pointer-events-none" : ""} p-4 border-base-content/3 flex items-start gap-4 hover:bg-base-300 transition-all delay-75 duration-100 group text-left cursor-pointer w-9/12 mx-auto hover:scale-120 hover:h-24 hover:-translate-y-3 hover:pb-4 hover:border-x-5 hover:border-t-5 border-t-2 hover:-mb-2`}
     >
       <div className="text-[0.85rem] italic text-base-content/40 flex-1 truncate group-hover:text-base-content/60 transition-none animate-[opacity_200ms_linear_forwards]">

frontend/src/components/drawer/WelcomeLetterOverlay.tsx

@@ -1,77 +1,78 @@
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 import { getWelcomeLetterContent } from "../../config/welcomeLetter";
 import { formatDate } from "../../utils/dateFormat";
 import { type CanvasTools, ComposeCanvas } from "../editor/ComposeCanvas";
 import { EnvelopeReveal } from "../reader/EnvelopeReveal";
 
-interface WelcomeLetterOverlayProps {
+export interface WelcomeLetterOverlayProps {
-  onComplete: () => void;
+    onComplete: () => void;
-  userName: string;
+    userName: string;
 }
 
 export function WelcomeLetterOverlay({
-  onComplete,
+    onComplete,
-  userName,
+    userName,
 }: WelcomeLetterOverlayProps) {
-  const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
+    const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
-    "SEALED",
+        "SEALED",
-  );
+    );
-  const canvasRef = useRef<CanvasTools>(null);
+    const canvasRef = useRef<CanvasTools>(null);
 
-  useEffect(() => {
+    useEffect(() => {
-    if (revealState === "REVEALED" && canvasRef.current) {
+        if (revealState === "REVEALED" && canvasRef.current) {
-      const welcomeContent = getWelcomeLetterContent(userName);
+            const welcomeContent = getWelcomeLetterContent(userName);
-      canvasRef.current.loadData(welcomeContent);
+            canvasRef.current.loadData(welcomeContent);
-    }
+        }
-  }, [revealState, userName]);
+    }, [revealState, userName]);
 
-  return (
+    return (
-    <div className="fixed inset-0 z-30 backdrop-blur-3xl flex flex-col items-center justify-center p-4 md:p-8 overflow-x-hidden">
+        <div className="fixed inset-0 z-30 backdrop-blur-3xl flex flex-col items-center justify-center p-4 md:p-8 overflow-x-hidden">
-      <div className="fixed inset-0 bg-vig pointer-events-none z-0" />
+            <div className="fixed inset-0 bg-vig pointer-events-none z-0" />
 
-      <div className="w-full max-w-4xl z-10 flex flex-col items-center">
+            <div className="w-full max-w-4xl z-10 flex flex-col items-center">
-        <AnimatePresence mode="wait">
+                <AnimatePresence mode="wait">
-          {revealState === "SEALED" && (
+                    {revealState === "SEALED" && (
-            <motion.div
+                        <motion.div
-              key="envelope"
+                            key="envelope"
-              initial={{ scale: 0.5, opacity: 0 }}
+                            initial={{ scale: 0.5, opacity: 0 }}
-              animate={{ scale: 0.8, opacity: 1 }}
+                            animate={{ scale: 0.8, opacity: 1 }}
-              exit={{
+                            exit={{
-                scale: 1,
+                                scale: 1,
-                opacity: 0,
+                                opacity: 0,
-                transition: { duration: 0.5, ease: "easeOut" },
+                                transition: { duration: 0.5, ease: "easeOut" },
-              }}
+                            }}
-              transition={{ duration: 4, delay: 1 }}
+                            transition={{ duration: 4, delay: 1 }}
-            >
+                        >
-              <EnvelopeReveal
+                            <EnvelopeReveal
-                recipient={userName}
+                                recipient={userName}
-                date={formatDate(new Date())}
+                                date={formatDate(new Date())}
-                onRevealComplete={() => setRevealState("REVEALED")}
+                                onRevealComplete={() => setRevealState("REVEALED")}
-                ignite={false}
+                                ignite={false}
-              />
+                            />
-            </motion.div>
+                        </motion.div>
-          )}
+                    )}
-        </AnimatePresence>
+                </AnimatePresence>
-        <div
+                <div
-          className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
+                    className={`w-full space-y-8 py-12 ${revealState === "REVEALED" ? "block" : "hidden"}`}
-        >
+                >
-          <div className="bg-paper shadow-warm rounded-sm overflow-hidden mx-auto max-w-180">
+                    <div className="bg-paper shadow-warm rounded-sm overflow-hidden mx-auto max-w-180">
-            <div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
+                        <div className="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
-            <ComposeCanvas ref={canvasRef} readOnly />
+                        <ComposeCanvas ref={canvasRef} readOnly />
-          </div>
+                    </div>
 
-          <div className="flex justify-center mt-12">
+                    <div className="flex justify-center mt-12">
-            <button
+                        <button
-              type="button"
+                            type="button"
-              onClick={onComplete}
+                            data-testid="dismiss-welcome-letter-btn"
-              className="btn btn-accent opacity-80 px-12 shadow-lg"
+                            onClick={onComplete}
-            >
+                            className="btn btn-accent opacity-80 px-12 shadow-lg"
-              I'll see you
+                        >
-            </button>
+                            I'll see you
-          </div>
+                        </button>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
+    );
-    </div>
-  );
 }

frontend/src/components/editor/PostSealModal.tsx

@@ -15,7 +15,7 @@ export function PostSealModal({
   type = "KEPT",
 }: PostSealModalProps) {
   return (
-    <Modal isOpen={!!sealedTargetId}>
+    <Modal isOpen={!!sealedTargetId} data-testid="post-seal-modal">
       <LockIcon size={32} weight="duotone" className="text-primary mt-3" />
       <h3 className="font-serif text-2xl">Your letter is sealed</h3>
       <p className="text-base-content/60">
@@ -53,6 +53,7 @@ export function PostSealModal({
           <>
             <button
               type="button"
+              data-testid="keep-it-btn"
               className="btn btn-ghost btn-sm"
               onClick={() => navigate(ROUTES.DRAWER)}
             >
@@ -60,6 +61,7 @@ export function PostSealModal({
             </button>
             <button
               type="button"
+              data-testid="view-letter-btn"
               className="btn btn-primary btn-sm"
               onClick={() => navigate(PATHS.read(sealedTargetId!))}
             >

frontend/src/components/editor/ToolBar.tsx

@@ -140,6 +140,7 @@ export function ToolBar({
       <div className="flex items-center gap-2">
         <button
           type="button"
+          data-testid="draft-btn"
           className="btn btn-ghost btn-sm text-xxs group tracking-widester uppercase font-bold text-base-content/60 hover:text-base-content"
           title="Store in your private drawer"
           onClick={() => onSave("DRAFT")}
@@ -155,6 +156,7 @@ export function ToolBar({
         {/*Seal */}
         <button
           type="button"
+          data-testid="seal-trigger-btn"
           className={`btn btn-primary btn-sm rounded-full px-6 group ${sealBtnClicked ? "invisible" : "visible"}`}
           onClick={() => setSealBtnClicked(true)}
         >
@@ -176,6 +178,7 @@ export function ToolBar({
       >
         <button
           type="button"
+          data-testid="seal-confirm-btn"
           className="btn btn-accent btn-sm rounded-full px-6 group"
           onClick={() => onSave("SEALED")}
         >

frontend/src/components/login/WelcomeModal.tsx

@@ -65,6 +65,7 @@ export default function WelcomeModal({
           <div className="modal-action w-full">
             <button
               type="button"
+              data-testid="welcome-dismiss-btn"
               onClick={() => setShowWelcome(false)}
               className="btn btn-primary w-full shadow-lg"
             >

frontend/src/components/reader/EnvelopeReveal.tsx

@@ -80,6 +80,7 @@ export function EnvelopeReveal({
             />
           </div>
           <img
+            data-testid="wax-seal"
             className={
               "translate-y-24 delay-2000 absolute z-6 peer-has-checked:pointer-events-none peer-has-checked:opacity-0 peer-has-checked:delay-0 transition-opacity duration-1000 cursor-pointer"
             }
@@ -91,6 +92,7 @@ export function EnvelopeReveal({
           <button
             type="button"
             id="letter"
+            data-testid="envelope-letter"
             className={`absolute mx-auto transition-all peer-has-checked:delay-800 peer-has-checked:duration-1000 duration-1000 mt-2 h-55 w-105 bg-paper peer-has-checked:-mt-12 hover:-mt-24 cursor-pointer ${revealLetter ? "duration-1000 peer-has-checked:duration-3000 w-screen max-w-4xl h-screen z-101 -translate-y-90" : "peer-has-checked:z-1"}`}
             onClick={handleClick}
           ></button>
@@ -112,6 +114,7 @@ export function EnvelopeReveal({
 
         <button
           id="env-front"
+          data-testid="envelope-front"
           type="button"
           disabled={!isInteractive}
           className={`text-left p-10 absolute inset-0 backface-hidden w-110 bg-base-200 z-99 rounded-md -translate-x-2 ${isFlipped ? "pointer-events-none" : ""}`}

frontend/src/components/reader/ShareModal.tsx

@@ -14,7 +14,11 @@ export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
   };
   return (
     <>
-      <Modal isOpen={!!shareLink} onClose={() => setShareLink(null)}>
+      <Modal
+        isOpen={!!shareLink}
+        onClose={() => setShareLink(null)}
+        data-testid="share-letter-modal"
+      >
         <div className="flex flex-col items-center justify-center text-center gap-6 py-4">
           <div className="space-y-2">
             <PaperPlaneTiltIcon
@@ -47,6 +51,7 @@ export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
             <button
               type="button"
               onClick={copyToClipboard}
+              data-testid="copy-link-btn"
               className="btn btn-primary font-sans btn-sm rounded-tl-xl rounded-bl-xl rounded-tr-full rounded-br-full"
             >
               Copy

frontend/src/components/ui/FormField.tsx

@@ -7,6 +7,7 @@ interface FormFieldProps {
   registration: UseFormRegisterReturn;
   error?: string;
   handleFocus?: () => void;
+  "data-testid"?: string;
 }
 
 export default function FormField({
@@ -16,6 +17,7 @@ export default function FormField({
   registration,
   error,
   handleFocus,
+  "data-testid": testId,
 }: FormFieldProps) {
   return (
     <div className="form-control">
@@ -28,6 +30,7 @@ export default function FormField({
       <input
         {...registration}
         id={registration.name}
+        data-testid={testId}
         type={type}
         placeholder={placeholder}
         className={`input input-bordered focus:input-primary ${

frontend/src/components/ui/Modal.tsx

@@ -5,17 +5,27 @@ interface ModalProps {
   isOpen: boolean;
   onClose?: () => void;
   children: ReactNode;
+  "data-testid"?: string;
 }
 
-export function Modal({ isOpen, onClose, children }: ModalProps) {
+export function Modal({
+  isOpen,
+  onClose,
+  children,
+  "data-testid": testId,
+}: ModalProps) {
   if (!isOpen) return null;
 
   return (
-    <div className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')]">
+    <div
+      data-testid={testId}
+      className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')]"
+    >
       <div className="modal-box relative bg-base-100/60 flex flex-col items-center text-center gap-6">
         {onClose && (
           <button
             type="button"
+            data-testid="modal-close-btn"
             className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
             onClick={onClose}
             aria-label="Close"

frontend/src/pages/Activate.tsx

@@ -7,95 +7,96 @@ import { endpoints, replacePathParams } from "../config/endpoints";
 import { ROUTES } from "../config/routes";
 
 export default function Activate() {
-  const { uidb64, token } = useParams();
+    const { uidb64, token } = useParams();
-  const [status, setStatus] = useState<"loading" | "success" | "error">(
+    const [status, setStatus] = useState<"loading" | "success" | "error">(
-    "loading",
+        "loading",
-  );
+    );
-  const hasCalled = useRef(false);
+    const hasCalled = useRef(false);
-  const navigate = useNavigate();
+    const navigate = useNavigate();
 
-  useEffect(() => {
+    useEffect(() => {
-    if (!(uidb64 && token) || hasCalled.current) return;
+        if (!(uidb64 && token) || hasCalled.current) return;
-    hasCalled.current = true;
+        hasCalled.current = true;
 
-    const activateAccount = async () => {
+        const activateAccount = async () => {
-      try {
+            try {
-        const url = replacePathParams(endpoints.ACTIVATE, {
+                const url = replacePathParams(endpoints.ACTIVATE, {
-          uidb64,
+                    uidb64,
-          token,
+                    token,
-        });
+                });
-        await publicApi.get(url);
+                await publicApi.get(url);
-        setStatus("success");
+                setStatus("success");
-      } catch (_err) {
+            } catch (_err) {
-        setStatus("error");
+                setStatus("error");
-      }
-    };
-
-    activateAccount();
-  }, [uidb64, token]);
-
-  return (
-    <div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
-      {status === "loading" && (
-        <div className="flex flex-col items-center gap-4 py-8">
-          <span className="loading loading-spinner loading-lg text-primary" />
-          <p className="text-sm opacity-70">Activating your account...</p>
-        </div>
-      )}
-
-      {status === "success" && (
-        <div className="flex flex-col items-center gap-6 duration-500">
-          <div className="bg-success/10 p-4 rounded-full">
-            <CheckCircleIcon
-              size={64}
-              weight="duotone"
-              className="text-success"
-            />
-          </div>
-          <h2 className="font-display text-xl text-success">
-            Account Activated!
-          </h2>
-          <p className="opacity-70 leading-relaxed">
-            Welcome to <Logo scale={1} />
-            <br />
-            Your identity is now verified and ready for timeless letters.
-          </p>
-          <div className="divider opacity-10 my-0"></div>
-          <button
-            type="button"
-            className="btn btn-primary w-full shadow-lg"
-            onClick={() =>
-              navigate(ROUTES.LOGIN, {
-                state: { firstTime: true },
-                replace: true,
-              })
             }
-          >
+        };
-            Start Writing
-          </button>
-        </div>
-      )}
 
-      {status === "error" && (
+        activateAccount();
-        <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
+    }, [uidb64, token]);
-          <div className="bg-error/10 p-4 rounded-full">
+
-            <XCircleIcon size={64} weight="duotone" className="text-error" />
+    return (
-          </div>
+        <div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
-          <h2 className="font-display text-xl text-error">Activation Failed</h2>
+            {status === "loading" && (
-          <p className="opacity-70 leading-relaxed">
+                <div className="flex flex-col items-center gap-4 py-8">
-            The link might be expired or already used. Please try registering
+                    <span className="loading loading-spinner loading-lg text-primary" />
-            again.
+                    <p className="text-sm opacity-70">Activating your account...</p>
-          </p>
+                </div>
-          <div className="divider opacity-10 my-0"></div>
+            )}
-          <button
+
-            type="button"
+            {status === "success" && (
-            className="btn btn-ghost w-full"
+                <div className="flex flex-col items-center gap-6 duration-500">
-            onClick={() => navigate(ROUTES.ONBOARD)}
+                    <div className="bg-success/10 p-4 rounded-full">
-          >
+                        <CheckCircleIcon
-            Register Again
+                            size={64}
-          </button>
+                            weight="duotone"
+                            className="text-success"
+                        />
+                    </div>
+                    <h2 data-testid="activation-success-header" className="font-display text-xl text-success">
+                        You're in.
+                    </h2>
+                    <p className="opacity-70 leading-relaxed">
+                        Welcome to <Logo scale={1} />
+                        <br />
+                        Just one more step and you can start writing timeless letters.
+                    </p>
+                    <div className="divider opacity-10 my-0"></div>
+                    <button
+                        type="button"
+                        data-testid="start-writing-btn"
+                        className="btn btn-primary w-full shadow-lg"
+                        onClick={() =>
+                            navigate(ROUTES.LOGIN, {
+                                state: { firstTime: true },
+                                replace: true,
+                            })
+                        }
+                    >
+                        I'm ready
+                    </button>
+                </div>
+            )}
+
+            {status === "error" && (
+                <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
+                    <div className="bg-error/10 p-4 rounded-full">
+                        <XCircleIcon size={64} weight="duotone" className="text-error" />
+                    </div>
+                    <h2 className="font-display text-xl text-error">Activation Failed</h2>
+                    <p className="opacity-70 leading-relaxed">
+                        The link might be expired or already used. Please try registering
+                        again.
+                    </p>
+                    <div className="divider opacity-10 my-0"></div>
+                    <button
+                        type="button"
+                        className="btn btn-ghost w-full"
+                        onClick={() => navigate(ROUTES.ONBOARD)}
+                    >
+                        Register Again
+                    </button>
+                </div>
+            )}
         </div>
-      )}
+    );
-    </div>
-  );
 }

frontend/src/pages/Drawer.test.tsx

@@ -2,122 +2,123 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { mockUser } from "../../test/fixtures/user.fixture";
+import type { WelcomeLetterOverlayProps } from "../components/drawer/WelcomeLetterOverlay";
 import { useLetters } from "../hooks/useLetters";
 import { useAuthStore } from "../store/useAuthStore";
 import Drawer from "./Drawer";
 
 vi.mock("../hooks/useLetters");
 vi.mock("../components/drawer/WelcomeLetterOverlay", () => ({
-  WelcomeLetterOverlay: ({ onComplete }: any) => (
+    WelcomeLetterOverlay: ({ onComplete }: WelcomeLetterOverlayProps) => (
-    <div data-testid="welcome-letter-overlay">
+        <div data-testid="welcome-letter-overlay">
-      <button
+            <button
-        type="button"
+                type="button"
-        data-testid="overlay-exit-button"
+                data-testid="overlay-exit-button"
-        onClick={onComplete}
+                onClick={onComplete}
-      >
+            >
-        I'll see you
+                I'll see you
-      </button>
+            </button>
-    </div>
+        </div>
-  ),
+    ),
 }));
 
 describe("Drawer Page", () => {
-  beforeEach(() => {
+    beforeEach(() => {
-    // Setup authenticated state for the test
+        // Setup authenticated state for the test
-    useAuthStore.setState({
+        useAuthStore.setState({
-      user: mockUser,
+            user: mockUser,
-      accessToken: "fake-token",
+            accessToken: "fake-token",
-      isInitializing: false,
+            isInitializing: false,
+        });
+
+        vi.mocked(useLetters).mockReturnValue({
+            drafts: [],
+            kept: [],
+            sent: [],
+            vault: [],
+            loading: false,
+            isAuthRequired: false,
+        });
     });
 
-    vi.mocked(useLetters).mockReturnValue({
+    it("renders the cabinet sections and empty state message", () => {
-      drafts: [],
+        render(
-      kept: [],
+            <MemoryRouter>
-      sent: [],
+                <Drawer />
-      vault: [],
+            </MemoryRouter>,
-      loading: false,
+        );
-      isAuthRequired: false,
-    });
-  });
 
-  it("renders the cabinet sections and empty state message", () => {
+        expect(screen.getByText(/Drafts/i)).toBeInTheDocument();
-    render(
+        expect(screen.getAllByText(/Kept/i).length).toBeGreaterThanOrEqual(1);
-      <MemoryRouter>
+        expect(screen.getByText(/Vault/i)).toBeInTheDocument();
-        <Drawer />
+        expect(screen.getByText(/This drawer remains silent/i)).toBeInTheDocument();
-      </MemoryRouter>,
-    );
-
-    expect(screen.getByText(/Drafts/i)).toBeInTheDocument();
-    expect(screen.getAllByText(/Kept/i).length).toBeGreaterThanOrEqual(1);
-    expect(screen.getByText(/Vault/i)).toBeInTheDocument();
-    expect(screen.getByText(/This drawer remains silent/i)).toBeInTheDocument();
-  });
-
-  it("renders the loading state", () => {
-    vi.mocked(useLetters).mockReturnValue({
-      drafts: [],
-      kept: [],
-      sent: [],
-      vault: [],
-      loading: true,
-      isAuthRequired: false,
     });
 
-    render(
+    it("renders the loading state", () => {
-      <MemoryRouter>
+        vi.mocked(useLetters).mockReturnValue({
-        <Drawer />
+            drafts: [],
-      </MemoryRouter>,
+            kept: [],
-    );
+            sent: [],
+            vault: [],
+            loading: true,
+            isAuthRequired: false,
+        });
 
-    expect(screen.getByText(/Opening your cabinet/i)).toBeInTheDocument();
+        render(
-  });
+            <MemoryRouter>
+                <Drawer />
+            </MemoryRouter>,
+        );
 
-  it("renders the authentication required modal when api requires auth", () => {
+        expect(screen.getByText(/Opening your cabinet/i)).toBeInTheDocument();
-    vi.mocked(useLetters).mockReturnValue({
-      drafts: [],
-      kept: [],
-      sent: [],
-      vault: [],
-      loading: false,
-      isAuthRequired: true,
     });
 
-    render(
+    it("renders the authentication required modal when api requires auth", () => {
-      <MemoryRouter>
+        vi.mocked(useLetters).mockReturnValue({
-        <Drawer />
+            drafts: [],
-      </MemoryRouter>,
+            kept: [],
-    );
+            sent: [],
+            vault: [],
+            loading: false,
+            isAuthRequired: true,
+        });
 
-    expect(screen.getByText(/You've been away a while./i)).toBeInTheDocument();
+        render(
-    expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
+            <MemoryRouter>
-  });
+                <Drawer />
+            </MemoryRouter>,
+        );
 
-  it("renders the welcome letter when firstTime state is present", () => {
+        expect(screen.getByText(/You've been away a while./i)).toBeInTheDocument();
-    render(
+        expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
-      <MemoryRouter
+    });
-        initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
-      >
-        <Drawer />
-      </MemoryRouter>,
-    );
 
-    expect(screen.getByTestId("welcome-letter-overlay")).toBeInTheDocument();
+    it("renders the welcome letter when firstTime state is present", () => {
-  });
+        render(
+            <MemoryRouter
+                initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
+            >
+                <Drawer />
+            </MemoryRouter>,
+        );
 
-  it("renders the drawer content when the letter is closed", () => {
+        expect(screen.getByTestId("welcome-letter-overlay")).toBeInTheDocument();
-    render(
+    });
-      <MemoryRouter
-        initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
-      >
-        <Drawer />
-      </MemoryRouter>,
-    );
 
-    const completeButton = screen.getByTestId("overlay-exit-button");
+    it("renders the drawer content when the letter is closed", () => {
-    fireEvent.click(completeButton);
+        render(
+            <MemoryRouter
+                initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
+            >
+                <Drawer />
+            </MemoryRouter>,
+        );
 
-    expect(
+        const completeButton = screen.getByTestId("overlay-exit-button");
-      screen.queryByTestId("welcome-letter-overlay"),
+        fireEvent.click(completeButton);
-    ).not.toBeInTheDocument();
+
-  });
+        expect(
+            screen.queryByTestId("welcome-letter-overlay"),
+        ).not.toBeInTheDocument();
+    });
 });

frontend/src/pages/Drawer.tsx

@@ -159,6 +159,7 @@ export default function Drawer() {
       <button
         type="button"
         id="write-letter-btn"
+        data-testid="write-letter-btn"
         className="group mt-15 z-10 bg-transparent border border-dashed border-base-content/10 px-8 py-4 text-base-content/40 italic cursor-pointer transition-all hover:border-primary/40 hover:text-base-content/60 hover:bg-primary/5 hover:-translate-y-0.5 flex items-center gap-2 focus-visible:ring-2 focus-visible:ring-primary/50 duration-500"
         onClick={() => navigate(PATHS.write(""))}
       >

frontend/src/pages/Editor.tsx

@@ -376,7 +376,10 @@ export default function Editor() {
                 weight="bold"
                 className="animate-spin text-primary"
               />
-              <p className="text-xxs uppercase tracking-widester font-bold text-base-content/40">
+              <p
+                data-testid="opening-draft-overlay"
+                className="text-xxs uppercase tracking-widester font-bold text-base-content/40"
+              >
                 Opening your draft...
               </p>
             </div>
@@ -406,6 +409,7 @@ export default function Editor() {
             {saveOverlay === "SAVED" && (
               <div
                 role="alert"
+                data-testid="save-success-toast"
                 className={`alert alert-success shadow-lg transition-all ease-in-out duration-2000 ${
                   showSaveOverlay
                     ? "opacity-100 scale-100 translate-y-0"
@@ -459,6 +463,7 @@ export default function Editor() {
               </label>
               <input
                 id="recipient"
+                data-testid="recipient-input"
                 type="text"
                 placeholder={toPlaceholderList[placeholderIndex]}
                 value={recipient}

frontend/src/pages/Login.tsx

@@ -97,6 +97,7 @@ export default function Login() {
             label="Email"
             type="email"
             placeholder="f.kafka@wrongtrain.com"
+            data-testid="email-input"
             registration={register("email")}
             error={errors.email?.message}
             handleFocus={() => setSaajanMessage("I remember you.")}
@@ -106,6 +107,7 @@ export default function Login() {
             label="Password"
             type="password"
             placeholder="••••••••"
+            data-testid="password-input"
             registration={register("password")}
             error={errors.password?.message}
             handleFocus={() =>
@@ -119,6 +121,7 @@ export default function Login() {
               name="login"
               disabled={isLoading}
               aria-label="Sign In"
+              data-testid="login-submit-btn"
               className="btn btn-primary w-full shadow-lg"
             >
               {isLoading ? (

frontend/src/pages/Reader.tsx

@@ -217,7 +217,10 @@ export default function Reader() {
           <Logo />
           <div className="flex flex-col items-center gap-2">
             <span className="loading loading-ring loading-md text-primary/40"></span>
-            <p className="text-xs uppercase tracking-widest text-base-content/20 animate-pulse">
+            <p
+              data-testid="decryption-overlay"
+              className="text-xs uppercase tracking-widest text-base-content/20 animate-pulse"
+            >
               Breaking the seal...
             </p>
           </div>
@@ -306,6 +309,7 @@ export default function Reader() {
         <div className="flex justify-center gap-2 mt-8 z-10 relative">
           <button
             id="share-letter-btn"
+            data-testid="share-letter-btn"
             type="button"
             className="btn btn-ghost btn-sm text-base-content/30 hover:text-base-content hover:bg-base-content/10 gap-1.5"
             onClick={handleShare}
@@ -317,6 +321,7 @@ export default function Reader() {
           </button>
           <button
             id="burn-letter-btn"
+            data-testid="burn-letter-btn"
             type="button"
             className="btn btn-ghost btn-sm text-error/40 hover:text-error hover:bg-error/10 gap-1.5"
             onClick={() => setShowBurnModal(true)}

frontend/src/pages/Register.tsx

@@ -14,153 +14,158 @@ import { ROUTES } from "../config/routes";
 import { CryptoUtils } from "../utils/crypto";
 
 const registerSchema = z
-  .object({
+    .object({
-    full_name: z.string().min(2, "Name must be at least 2 characters"),
+        full_name: z.string().min(2, "Name must be at least 2 characters"),
-    email: z.email("Please enter a valid email"),
+        email: z.email("Please enter a valid email"),
-    password: z.string().min(8, "Password must be at least 8 characters"),
+        password: z.string().min(8, "Password must be at least 8 characters"),
-    confirm_password: z.string(),
+        confirm_password: z.string(),
-  })
+    })
-  .refine((data) => data.password === data.confirm_password, {
+    .refine((data) => data.password === data.confirm_password, {
-    message: "Passwords don't match",
+        message: "Passwords don't match",
-    path: ["confirm_password"],
+        path: ["confirm_password"],
-  });
+    });
 
 type RegisterInputs = z.infer<typeof registerSchema>;
 
 export default function Register() {
-  const navigate = useNavigate();
+    const navigate = useNavigate();
-  const [isLoading, setIsLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
-  const [apiError, setApiError] = useState<string | null>(null);
+    const [apiError, setApiError] = useState<string | null>(null);
-  const [saajanMessage, setSaajanMessage] = useState<string>(
+    const [saajanMessage, setSaajanMessage] = useState<string>(
-    "I didn't think I'd be here either.\nAnd yet, here we are.",
+        "I didn't think I'd be here either.\nAnd yet, here we are.",
-  );
+    );
 
-  const {
+    const {
-    register,
+        register,
-    handleSubmit,
+        handleSubmit,
-    formState: { errors },
+        formState: { errors },
-  } = useForm<RegisterInputs>({
+    } = useForm<RegisterInputs>({
-    resolver: zodResolver(registerSchema),
+        resolver: zodResolver(registerSchema),
-  });
+    });
 
-  const onSubmit = async (data: RegisterInputs) => {
+    const onSubmit = async (data: RegisterInputs) => {
-    setSaajanMessage("Good. I'll remember that.");
+        setSaajanMessage("Good. I'll remember that.");
-    setIsLoading(true);
+        setIsLoading(true);
-    setApiError(null);
+        setApiError(null);
-    try {
+        try {
-      // we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db.
+            // we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db.
-      const { authHash } = await CryptoUtils.deriveKeyBundle(
+            const { authHash } = await CryptoUtils.deriveKeyBundle(
-        data.password,
+                data.password,
-        data.email,
+                data.email,
-      );
+            );
 
-      await publicApi.post(endpoints.REGISTER, {
+            await publicApi.post(endpoints.REGISTER, {
-        full_name: data.full_name,
+                full_name: data.full_name,
-        email: data.email,
+                email: data.email,
-        password: authHash,
+                password: authHash,
-      });
+            });
-      navigate(ROUTES.VERIFY_EMAIL, { replace: true });
+            navigate(ROUTES.VERIFY_EMAIL, { replace: true });
-    } catch (err) {
+        } catch (err) {
-      let message = "Registration failed. Please try again.";
+            let message = "Registration failed. Please try again.";
-      if (axios.isAxiosError(err)) {
+            if (axios.isAxiosError(err)) {
-        message = err.response?.data?.message || message;
+                message = err.response?.data?.message || message;
-      }
+            }
-      setApiError(message);
+            setApiError(message);
-    } finally {
+        } finally {
-      setIsLoading(false);
+            setIsLoading(false);
-    }
+        }
-  };
+    };
 
-  return (
+    return (
-    <div className="flex flex-col">
+        <div className="flex flex-col">
-      <Saajan message={saajanMessage} position="right" />
+            <Saajan message={saajanMessage} position="right" />
-      <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
+            <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
-        <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
+                <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
-          <div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
+                    <div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
-            Create a <Logo /> Account
+                        Create a <Logo /> Account
-          </div>
+                    </div>
 
-          {apiError && (
+                    {apiError && (
-            <div className="alert alert-error text-xs py-2 rounded-md">
+                        <div className="alert alert-error text-xs py-2 rounded-md">
-              <span>{apiError}</span>
+                            <span>{apiError}</span>
+                        </div>
+                    )}
+
+                    <FormField
+                        label="Pen Name"
+                        placeholder="Word Smith"
+                        data-testid="pen-name-input"
+                        registration={register("full_name")}
+                        error={errors.full_name?.message}
+                        handleFocus={() =>
+                            setSaajanMessage("Hello friend. What should I call you?")
+                        }
+                    />
+
+                    <FormField
+                        label="Email"
+                        type="email"
+                        placeholder="f.kafka@wrongtrain.com"
+                        data-testid="email-input"
+                        registration={register("email")}
+                        error={errors.email?.message}
+                        handleFocus={() =>
+                            setSaajanMessage(
+                                "Where should I send your letters?\nNo empty lunchboxes, please.",
+                            )
+                        }
+                    />
+
+                    <FormField
+                        label="Password"
+                        type="password"
+                        placeholder="••••••••"
+                        data-testid="password-input"
+                        registration={register("password")}
+                        error={errors.password?.message}
+                        handleFocus={() =>
+                            setSaajanMessage(
+                                "Something only you know.\nI have one of those too.",
+                            )
+                        }
+                    />
+
+                    <FormField
+                        label="Confirm Password"
+                        type="password"
+                        placeholder="••••••••"
+                        data-testid="confirm-password-input"
+                        registration={register("confirm_password")}
+                        error={errors.confirm_password?.message}
+                        handleFocus={() =>
+                            setSaajanMessage(
+                                "Just once? Trust me, \nsome things are worth repeating twice.",
+                            )
+                        }
+                    />
+
+                    <div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
+                        <InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
+                        <p className="text-sm font-semibold">
+                            Choose a password you won't forget. <br />
+                            Just like life,{" "}
+                            <span className="underline decoration-2">there is no reset</span>{" "}
+                            here. If you lose it, your letters cannot be recovered.
+                        </p>
+                    </div>
+
+                    <div className="card-actions mt-4">
+                        <button
+                            type="submit"
+                            disabled={isLoading}
+                            aria-label="Register"
+                            data-testid="register-submit-btn"
+                            className="btn btn-primary w-full shadow-lg"
+                        >
+                            {isLoading ? (
+                                <span className="loading loading-spinner loading-sm" />
+                            ) : (
+                                "Register"
+                            )}
+                        </button>
+                    </div>
+                </form>
             </div>
-          )}
+        </div>
-
+    );
-          <FormField
-            label="Pen Name"
-            placeholder="Word Smith"
-            registration={register("full_name")}
-            error={errors.full_name?.message}
-            handleFocus={() =>
-              setSaajanMessage("Hello friend. What should I call you?")
-            }
-          />
-
-          <FormField
-            label="Email"
-            type="email"
-            placeholder="f.kafka@wrongtrain.com"
-            registration={register("email")}
-            error={errors.email?.message}
-            handleFocus={() =>
-              setSaajanMessage(
-                "Where should I send your letters?\nNo empty lunchboxes, please.",
-              )
-            }
-          />
-
-          <FormField
-            label="Password"
-            type="password"
-            placeholder="••••••••"
-            registration={register("password")}
-            error={errors.password?.message}
-            handleFocus={() =>
-              setSaajanMessage(
-                "Something only you know.\nI have one of those too.",
-              )
-            }
-          />
-
-          <FormField
-            label="Confirm Password"
-            type="password"
-            placeholder="••••••••"
-            registration={register("confirm_password")}
-            error={errors.confirm_password?.message}
-            handleFocus={() =>
-              setSaajanMessage(
-                "Just once? Trust me, \nsome things are worth repeating twice.",
-              )
-            }
-          />
-
-          <div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
-            <InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
-            <p className="text-sm font-semibold">
-              Choose a password you won't forget. <br />
-              Just like life,{" "}
-              <span className="underline decoration-2">there is no reset</span>{" "}
-              here. If you lose it, your letters cannot be recovered.
-            </p>
-          </div>
-
-          <div className="card-actions mt-4">
-            <button
-              type="submit"
-              disabled={isLoading}
-              aria-label="Register"
-              className="btn btn-primary w-full shadow-lg"
-            >
-              {isLoading ? (
-                <span className="loading loading-spinner loading-sm" />
-              ) : (
-                "Register"
-              )}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
 }

frontend/vite.config.ts

@@ -46,5 +46,10 @@ export default defineConfig(({ mode }) => {
       host: env.FRONTEND_DOMAIN,
       https: isSslEnabled ? sslCerts : undefined,
     },
+    preview: {
+      port: Number(env.FRONTEND_PORT),
+      host: env.FRONTEND_DOMAIN,
+      https: isSslEnabled ? sslCerts : undefined,
+    },
   };
 });