me/pi-ku
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

refactor/optimize e2e test (#3)
CI / Frontend CI (push) Successful in 1m10s
Details
CI / Backend CI (push) Successful in 1m9s
Details
CI / E2E Tests (push) Has been skipped
Details
CI / Generate Certificates (push) Successful in 36s
Details

Browse Source 
how fast i'll go 🏄‍♂️

---------

Co-authored-by: me <ramvignesh-b@github.com>
Reviewed-on: #3
This commit was merged in pull request #3.
This commit is contained in:
Ramvignesh B.
2026-05-06 18:04:11 +00:00
parent 8d0ab979f5
commit ac2f541ebe
23 changed files with 605 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/e2e/letter.spec.ts
+41 -90
View File
@@ -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
const recipientInput = page.locator("#recipient");
await recipientInput.waitFor({ state: "visible", timeout: 20000 });
// Editor page
await expect(page.getByTestId("recipient-input")).toBeVisible();
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
.getByText(/opening your draft/i)
.waitFor({ state: "visible", timeout: 2000 })
.catch(() => {});
await expect(page.getByText(/opening your draft/i)).toBeHidden({
timeout: 10000,
});
await expect(page.getByTestId("opening-draft-overlay")).toBeHidden();
// 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, {
timeout: 10000,
});
await expect(canvasInput).toHaveValue(/This is a secret draft/i);
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");
await recipientInput.waitFor({ state: "visible", timeout: 10000 });
const recipientInput = page.getByTestId("recipient-input");
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
.getByRole("button", { name: /seal/i })
.filter({ visible: true })
.click();
await page
.getByRole("button", { name: /seal/i })
.filter({ visible: true })
.click();
await page.getByTestId("seal-trigger-btn").click();
await page.getByTestId("seal-confirm-btn").click();
// Should show sealed confirmation modal
logger.info(">> [Seal] Verifying sealed modal...");
await expect(page.getByText(/your letter is sealed/i)).toBeVisible({
timeout: 10000,
});
await expect(page.getByTestId("post-seal-modal")).toBeVisible();
// 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({
timeout: 10000,
});
// Flip the envelope to show the seal
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 });
await expect(page.getByTestId("decryption-overlay")).toBeHidden();
// Flip the envelope to show the seal and reveal the letter
await revealEnvelope(page);
await expect(page.getByTestId("envelope-letter")).toBeHidden();
// 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 page.getByRole("button", { name: /close/i }).click();
await expect(page.getByText(/send this letter/i)).toBeHidden();
await expect(page.getByTestId("copy-link-btn")).toBeVisible();
// Assuming Close button in ShareModal might need a testid too, but for now let's use text if unique or add testid
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");
await recipientInput.waitFor({ state: "visible" });
const recipientInput = page.getByTestId("recipient-input");
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
.getByRole("button", { name: /seal/i })
.filter({ visible: true })
.click();
await page
.getByRole("button", { name: /seal/i })
.filter({ visible: true })
.click();
await page.getByTestId("seal-trigger-btn").click();
await page.getByTestId("seal-confirm-btn").click();
// Sealed modal should appear — click "Keep it" to go to Drawer
await expect(page.getByText(/your letter is sealed/i)).toBeVisible({
timeout: 10000,
});
await page.getByRole("button", { name: /keep it to myself/i }).click();
await expect(page.getByTestId("post-seal-modal")).toBeVisible();
await page.getByTestId("keep-it-btn").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 keptSection.getByRole("button", { name: /kept/i }).click();
await page.getByTestId("drawer-section-kept").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({
timeout: 10000,
});
// Check recipient on the front of the envelope
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 });
await expect(page.getByTestId("decryption-overlay")).toBeHidden();
// Flip the envelope and reveal the letter
await revealEnvelope(page);
await expect(page.getByTestId("envelope-letter")).toBeHidden();
// 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
+14 -41
View File
@@ -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.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 page.getByTestId("pen-name-input").fill(fullName);
await page.getByTestId("email-input").fill(email);
await page.getByTestId("password-input").fill(password);
await page.getByTestId("confirm-password-input").fill(password);
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 page.getByRole("button", { name: /start writing/i }).click();
await expect(page.getByTestId("activation-success-header")).toBeVisible();
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 welcomeButton.waitFor({ state: "visible", timeout: 10000 });
await welcomeButton.click();
await expect(welcomeButton).toBeHidden();
await page.getByTestId("welcome-dismiss-btn").click();
await expect(page.getByTestId("welcome-dismiss-btn")).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 page.getByTestId("email-input").fill(email);
await page.getByTestId("password-input").fill(password);
await page.getByTestId("login-submit-btn").click();
await expect(page).toHaveURL(/\/drawer/);
await handleWelcomeLetter(page);
logger.info(`[Auth] Successfully authenticated ${email}`);
}
/**
* 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 };
export const AuthHelper = { registerAndLogin };
frontend/e2e/utils/envelope.ts
+38
View File
@@ -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
+68 -68
View File
@@ -1,70 +1,70 @@
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b & vite build",
"build:prod": "vite build --mode production",
"lint": "biome lint --write ./src",
"format": "biome format --write ./src",
"check": "biome check --write ./src",
"check-all": "biome check --write .",
"preview": "vite preview",
"test": "vitest run",
"test:watch": "vitest",
"test:coverage": "vitest run --coverage",
"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui --ui-host=0.0.0.0 --ui-port=43008"
},
"dependencies": {
"@fontsource-variable/jost": "^5.2.8",
"@fontsource-variable/playfair-display": "^5.2.8",
"@fontsource-variable/playwrite-hr-lijeva": "^5.2.7",
"@fontsource/architects-daughter": "^5.2.7",
"@fontsource/cutive-mono": "^5.2.8",
"@fontsource/kavivanar": "^5.2.8",
"@fontsource/knewave": "^5.2.7",
"@fontsource/redacted-script": "^5.2.8",
"@fontsource/space-mono": "^5.2.9",
"@hookform/resolvers": "^5.2.2",
"@phosphor-icons/react": "^2.1.10",
"@tailwindcss/vite": "^4.2.2",
"axios": "^1.15.0",
"daisyui": "^5.5.19",
"fabric": "^7.2.0",
"idb": "^8.0.3",
"lenis": "^1.3.23",
"motion": "^12.38.0",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-hook-form": "^7.72.1",
"react-router-dom": "^7.14.0",
"tailwindcss": "^4.2.2",
"zod": "^4.3.6",
"zustand": "^5.0.12"
},
"devDependencies": {
"@biomejs/biome": "^2.4.11",
"@playwright/test": "^1.59.1",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^14.6.1",
"@types/node": "^25.6.0",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-basic-ssl": "^2.3.0",
"@vitejs/plugin-react": "^6.0.1",
"@vitest/coverage-v8": "^4.1.4",
"dotenv": "^17.4.2",
"fake-indexeddb": "^6.2.5",
"jsdom": "^29.0.2",
"msw": "^2.13.2",
"pino": "^10.3.1",
"pino-pretty": "^13.1.3",
"typescript": "~6.0.2",
"vite": "^8.0.4",
"vitest": "^4.1.4"
}
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b & vite build",
"build:prod": "vite build --mode production",
"lint": "biome lint --write ./src",
"format": "biome format --write ./src",
"check": "biome check --write ./src",
"check-all": "biome check --write .",
"preview": "vite preview",
"test": "vitest run",
"test:watch": "vitest",
"test:coverage": "vitest run --coverage",
"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui --ui-host=0.0.0.0 --ui-port=43008"
},
"dependencies": {
"@fontsource-variable/jost": "^5.2.8",
"@fontsource-variable/playfair-display": "^5.2.8",
"@fontsource-variable/playwrite-hr-lijeva": "^5.2.7",
"@fontsource/architects-daughter": "^5.2.7",
"@fontsource/cutive-mono": "^5.2.8",
"@fontsource/kavivanar": "^5.2.8",
"@fontsource/knewave": "^5.2.7",
"@fontsource/redacted-script": "^5.2.8",
"@fontsource/space-mono": "^5.2.9",
"@hookform/resolvers": "^5.2.2",
"@phosphor-icons/react": "^2.1.10",
"@tailwindcss/vite": "^4.2.2",
"axios": "^1.15.0",
"daisyui": "^5.5.19",
"fabric": "^7.2.0",
"idb": "^8.0.3",
"lenis": "^1.3.23",
"motion": "^12.38.0",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-hook-form": "^7.72.1",
"react-router-dom": "^7.14.0",
"tailwindcss": "^4.2.2",
"zod": "^4.3.6",
"zustand": "^5.0.12"
},
"devDependencies": {
"@biomejs/biome": "^2.4.11",
"@playwright/test": "^1.59.1",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^14.6.1",
"@types/node": "^25.6.0",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-basic-ssl": "^2.3.0",
"@vitejs/plugin-react": "^6.0.1",
"@vitest/coverage-v8": "^4.1.4",
"dotenv": "^17.4.2",
"fake-indexeddb": "^6.2.5",
"jsdom": "^29.0.2",
"msw": "^2.13.2",
"pino": "^10.3.1",
"pino-pretty": "^13.1.3",
"typescript": "~6.0.2",
"vite": "^8.0.4",
"vitest": "^4.1.4"
}
}
frontend/playwright.config.ts
+2 -1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+62 -61
View File
@@ -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 {
onComplete: () => void;
userName: string;
export interface WelcomeLetterOverlayProps {
onComplete: () => void;
userName: string;
}
export function WelcomeLetterOverlay({
onComplete,
userName,
onComplete,
userName,
}: WelcomeLetterOverlayProps) {
const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
"SEALED",
);
const canvasRef = useRef<CanvasTools>(null);
const [revealState, setRevealState] = useState<"SEALED" | "REVEALED">(
"SEALED",
);
const canvasRef = useRef<CanvasTools>(null);
useEffect(() => {
if (revealState === "REVEALED" && canvasRef.current) {
const welcomeContent = getWelcomeLetterContent(userName);
canvasRef.current.loadData(welcomeContent);
}
}, [revealState, userName]);
useEffect(() => {
if (revealState === "REVEALED" && canvasRef.current) {
const welcomeContent = getWelcomeLetterContent(userName);
canvasRef.current.loadData(welcomeContent);
}
}, [revealState, userName]);
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 bg-vig pointer-events-none z-0" />
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 bg-vig pointer-events-none z-0" />
<div className="w-full max-w-4xl z-10 flex flex-col items-center">
<AnimatePresence mode="wait">
{revealState === "SEALED" && (
<motion.div
key="envelope"
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 0.8, opacity: 1 }}
exit={{
scale: 1,
opacity: 0,
transition: { duration: 0.5, ease: "easeOut" },
}}
transition={{ duration: 4, delay: 1 }}
>
<EnvelopeReveal
recipient={userName}
date={formatDate(new Date())}
onRevealComplete={() => setRevealState("REVEALED")}
ignite={false}
/>
</motion.div>
)}
</AnimatePresence>
<div
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="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
<ComposeCanvas ref={canvasRef} readOnly />
</div>
<div className="w-full max-w-4xl z-10 flex flex-col items-center">
<AnimatePresence mode="wait">
{revealState === "SEALED" && (
<motion.div
key="envelope"
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 0.8, opacity: 1 }}
exit={{
scale: 1,
opacity: 0,
transition: { duration: 0.5, ease: "easeOut" },
}}
transition={{ duration: 4, delay: 1 }}
>
<EnvelopeReveal
recipient={userName}
date={formatDate(new Date())}
onRevealComplete={() => setRevealState("REVEALED")}
ignite={false}
/>
</motion.div>
)}
</AnimatePresence>
<div
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="p-1 md:p-2 bg-base-content/5 opacity-10 pointer-events-none absolute inset-0 z-10" />
<ComposeCanvas ref={canvasRef} readOnly />
</div>
<div className="flex justify-center mt-12">
<button
type="button"
onClick={onComplete}
className="btn btn-accent opacity-80 px-12 shadow-lg"
>
I'll see you
</button>
</div>
<div className="flex justify-center mt-12">
<button
type="button"
data-testid="dismiss-welcome-letter-btn"
onClick={onComplete}
className="btn btn-accent opacity-80 px-12 shadow-lg"
>
I'll see you
</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
);
}
frontend/src/components/editor/PostSealModal.tsx
+3 -1
View File
@@ -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
+3
View File
@@ -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
+1
View File
@@ -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
+3
View File
@@ -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
+6 -1
View File
@@ -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
+3
View File
@@ -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
+12 -2
View File
@@ -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
+87 -86
View File
@@ -7,95 +7,96 @@ import { endpoints, replacePathParams } from "../config/endpoints";
import { ROUTES } from "../config/routes";
export default function Activate() {
const { uidb64, token } = useParams();
const [status, setStatus] = useState<"loading" | "success" | "error">(
"loading",
);
const hasCalled = useRef(false);
const navigate = useNavigate();
const { uidb64, token } = useParams();
const [status, setStatus] = useState<"loading" | "success" | "error">(
"loading",
);
const hasCalled = useRef(false);
const navigate = useNavigate();
useEffect(() => {
if (!(uidb64 && token) || hasCalled.current) return;
hasCalled.current = true;
useEffect(() => {
if (!(uidb64 && token) || hasCalled.current) return;
hasCalled.current = true;
const activateAccount = async () => {
try {
const url = replacePathParams(endpoints.ACTIVATE, {
uidb64,
token,
});
await publicApi.get(url);
setStatus("success");
} catch (_err) {
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,
})
const activateAccount = async () => {
try {
const url = replacePathParams(endpoints.ACTIVATE, {
uidb64,
token,
});
await publicApi.get(url);
setStatus("success");
} catch (_err) {
setStatus("error");
}
>
Start Writing
</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>
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 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
+95 -94
View File
@@ -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) => (
<div data-testid="welcome-letter-overlay">
<button
type="button"
data-testid="overlay-exit-button"
onClick={onComplete}
>
I'll see you
</button>
</div>
),
WelcomeLetterOverlay: ({ onComplete }: WelcomeLetterOverlayProps) => (
<div data-testid="welcome-letter-overlay">
<button
type="button"
data-testid="overlay-exit-button"
onClick={onComplete}
>
I'll see you
</button>
</div>
),
}));
describe("Drawer Page", () => {
beforeEach(() => {
// Setup authenticated state for the test
useAuthStore.setState({
user: mockUser,
accessToken: "fake-token",
isInitializing: false,
beforeEach(() => {
// Setup authenticated state for the test
useAuthStore.setState({
user: mockUser,
accessToken: "fake-token",
isInitializing: false,
});
vi.mocked(useLetters).mockReturnValue({
drafts: [],
kept: [],
sent: [],
vault: [],
loading: false,
isAuthRequired: false,
});
});
vi.mocked(useLetters).mockReturnValue({
drafts: [],
kept: [],
sent: [],
vault: [],
loading: false,
isAuthRequired: false,
});
});
it("renders the cabinet sections and empty state message", () => {
render(
<MemoryRouter>
<Drawer />
</MemoryRouter>,
);
it("renders the cabinet sections and empty state message", () => {
render(
<MemoryRouter>
<Drawer />
</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,
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();
});
render(
<MemoryRouter>
<Drawer />
</MemoryRouter>,
);
it("renders the loading state", () => {
vi.mocked(useLetters).mockReturnValue({
drafts: [],
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", () => {
vi.mocked(useLetters).mockReturnValue({
drafts: [],
kept: [],
sent: [],
vault: [],
loading: false,
isAuthRequired: true,
expect(screen.getByText(/Opening your cabinet/i)).toBeInTheDocument();
});
render(
<MemoryRouter>
<Drawer />
</MemoryRouter>,
);
it("renders the authentication required modal when api requires auth", () => {
vi.mocked(useLetters).mockReturnValue({
drafts: [],
kept: [],
sent: [],
vault: [],
loading: false,
isAuthRequired: true,
});
expect(screen.getByText(/You've been away a while./i)).toBeInTheDocument();
expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
});
render(
<MemoryRouter>
<Drawer />
</MemoryRouter>,
);
it("renders the welcome letter when firstTime state is present", () => {
render(
<MemoryRouter
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
>
<Drawer />
</MemoryRouter>,
);
expect(screen.getByText(/You've been away a while./i)).toBeInTheDocument();
expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
});
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", () => {
render(
<MemoryRouter
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
>
<Drawer />
</MemoryRouter>,
);
expect(screen.getByTestId("welcome-letter-overlay")).toBeInTheDocument();
});
const completeButton = screen.getByTestId("overlay-exit-button");
fireEvent.click(completeButton);
it("renders the drawer content when the letter is closed", () => {
render(
<MemoryRouter
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
>
<Drawer />
</MemoryRouter>,
);
expect(
screen.queryByTestId("welcome-letter-overlay"),
).not.toBeInTheDocument();
});
const completeButton = screen.getByTestId("overlay-exit-button");
fireEvent.click(completeButton);
expect(
screen.queryByTestId("welcome-letter-overlay"),
).not.toBeInTheDocument();
});
});
frontend/src/pages/Drawer.tsx
+1
View File
@@ -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
+6 -1
View File
@@ -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
+3
View File
@@ -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
+6 -1
View File
@@ -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
+144 -139
View File
@@ -14,153 +14,158 @@ import { ROUTES } from "../config/routes";
import { CryptoUtils } from "../utils/crypto";
const registerSchema = z
.object({
full_name: z.string().min(2, "Name must be at least 2 characters"),
email: z.email("Please enter a valid email"),
password: z.string().min(8, "Password must be at least 8 characters"),
confirm_password: z.string(),
})
.refine((data) => data.password === data.confirm_password, {
message: "Passwords don't match",
path: ["confirm_password"],
});
.object({
full_name: z.string().min(2, "Name must be at least 2 characters"),
email: z.email("Please enter a valid email"),
password: z.string().min(8, "Password must be at least 8 characters"),
confirm_password: z.string(),
})
.refine((data) => data.password === data.confirm_password, {
message: "Passwords don't match",
path: ["confirm_password"],
});
type RegisterInputs = z.infer<typeof registerSchema>;
export default function Register() {
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(false);
const [apiError, setApiError] = useState<string | null>(null);
const [saajanMessage, setSaajanMessage] = useState<string>(
"I didn't think I'd be here either.\nAnd yet, here we are.",
);
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(false);
const [apiError, setApiError] = useState<string | null>(null);
const [saajanMessage, setSaajanMessage] = useState<string>(
"I didn't think I'd be here either.\nAnd yet, here we are.",
);
const {
register,
handleSubmit,
formState: { errors },
} = useForm<RegisterInputs>({
resolver: zodResolver(registerSchema),
});
const {
register,
handleSubmit,
formState: { errors },
} = useForm<RegisterInputs>({
resolver: zodResolver(registerSchema),
});
const onSubmit = async (data: RegisterInputs) => {
setSaajanMessage("Good. I'll remember that.");
setIsLoading(true);
setApiError(null);
try {
// we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db.
const { authHash } = await CryptoUtils.deriveKeyBundle(
data.password,
data.email,
);
const onSubmit = async (data: RegisterInputs) => {
setSaajanMessage("Good. I'll remember that.");
setIsLoading(true);
setApiError(null);
try {
// we generate the key bundle here to get the authHash (password) to be haSHed and stored in the db.
const { authHash } = await CryptoUtils.deriveKeyBundle(
data.password,
data.email,
);
await publicApi.post(endpoints.REGISTER, {
full_name: data.full_name,
email: data.email,
password: authHash,
});
navigate(ROUTES.VERIFY_EMAIL, { replace: true });
} catch (err) {
let message = "Registration failed. Please try again.";
if (axios.isAxiosError(err)) {
message = err.response?.data?.message || message;
}
setApiError(message);
} finally {
setIsLoading(false);
}
};
await publicApi.post(endpoints.REGISTER, {
full_name: data.full_name,
email: data.email,
password: authHash,
});
navigate(ROUTES.VERIFY_EMAIL, { replace: true });
} catch (err) {
let message = "Registration failed. Please try again.";
if (axios.isAxiosError(err)) {
message = err.response?.data?.message || message;
}
setApiError(message);
} finally {
setIsLoading(false);
}
};
return (
<div className="flex flex-col">
<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">
<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">
Create a <Logo /> Account
</div>
return (
<div className="flex flex-col">
<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">
<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">
Create a <Logo /> Account
</div>
{apiError && (
<div className="alert alert-error text-xs py-2 rounded-md">
<span>{apiError}</span>
{apiError && (
<div className="alert alert-error text-xs py-2 rounded-md">
<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>
)}
<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>
);
</div>
);
}
frontend/vite.config.ts
+5
View File
@@ -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,
},
};
});