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

Style/Revamp #4

Merged
me merged 12 commits from feature/home_revamp into main 2026-05-08 03:16:16 +00:00
Conversation 0 Commits 12 Files Changed 20
+352 -254
20 changed files with 352 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/public/logo.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

frontend/src/App.tsx
+17 -10
View File
@@ -1,6 +1,6 @@
import { lazy, Suspense, useEffect, useRef } from "react";
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import { ProtectedRoute, PublicRoute } from "./components/RouteGuards";
import { AutoRedirectRoute, ProtectedRoute } from "./components/RouteGuards";
import SplashScreen from "./components/SplashScreen";
import { ROUTES } from "./config/routes";
import { useAuth } from "./hooks/useAuth";
@@ -34,38 +34,45 @@ export default function App() {
<main className="relative min-h-screen min-w-screen flex items-center justify-center w-full bg-base-200 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-50 before:pointer-events-none before:bg-[url('assets/noise.gif')]">
<Suspense fallback={<SplashScreen />}>
<Routes>
<Route path={ROUTES.HOME} element={<Home />} />
<Route
path={ROUTES.HOME}
element={
<AutoRedirectRoute>
<Home />
</AutoRedirectRoute>
}
/>
<Route
path={ROUTES.ONBOARD}
element={
<PublicRoute>
<AutoRedirectRoute>
<Register />
</PublicRoute>
</AutoRedirectRoute>
}
/>
<Route
path={ROUTES.LOGIN}
element={
<PublicRoute>
<AutoRedirectRoute>
<Login />
</PublicRoute>
</AutoRedirectRoute>
}
/>
<Route
path={ROUTES.VERIFY_EMAIL}
element={
<PublicRoute>
<AutoRedirectRoute>
<VerifyEmail />
</PublicRoute>
</AutoRedirectRoute>
}
/>
<Route
path={ROUTES.ACTIVATE}
element={
<PublicRoute>
<AutoRedirectRoute>
<Activate />
</PublicRoute>
</AutoRedirectRoute>
}
/>
frontend/src/components/Logo.tsx
+23 -7
View File
@@ -3,10 +3,15 @@ import "@fontsource/knewave/400.css";
interface LogoProps {
scale?: number;
type?: "inline" | "mono" | "logo";
type?: "inline" | "mono" | "logo" | null;
ul?: boolean;
}
export default function Logo({ scale = 1, type = "logo" }: LogoProps) {
export default function Logo({
scale = 1,
type = null,
ul = false,
}: LogoProps) {
if (type === "inline") {
return (
<span className={"text-accent font-display italic "}>
@@ -24,24 +29,35 @@ export default function Logo({ scale = 1, type = "logo" }: LogoProps) {
);
}
if (type === "logo") {
return (
<img
src="/logo.svg"
alt="Pi. Ku. logo"
className="mx-4"
width={scale * 100}
/>
);
}
return (
<div
role="img"
aria-label="Pi. Ku. logo"
className="inline-flex items-baseline justify-center leading-none select-none"
className={`inline-flex items-baseline justify-center leading-none select-none ${ul ? "ul-wavy" : ""}`}
style={{ fontFamily: "'Knewave', serif", scale }}
>
<span className={`text-3xl font-light text-accent`}>Pi</span>
<span className="text-3xl font-light text-accent">Pi</span>
<DotIcon
weight="fill"
size={12}
className={`text-primary translate-y-1 -mx-px`}
className="text-primary translate-y-1 -mx-px"
/>
<span className={`text-3xl font-light text-accent`}>&nbsp;Ku</span>
<span className="text-3xl font-light text-accent">&nbsp;Ku</span>
<DotIcon
weight="fill"
size={12}
className={`text-primary translate-y-1 -mx-px`}
className="text-primary translate-y-1 -mx-px"
/>
</div>
);
frontend/src/components/RouteGuards.test.tsx
+15 -9
View File
@@ -3,14 +3,20 @@ import { MemoryRouter, Route, Routes } from "react-router-dom";
import { beforeEach, describe, expect, it } from "vitest";
import { mockUser } from "../../test/fixtures/user.fixture";
import { useAuthStore } from "../store/useAuthStore";
import { ProtectedRoute, PublicRoute } from "./RouteGuards";
import { AutoRedirectRoute, ProtectedRoute } from "./RouteGuards";
function renderGuard(ui: React.ReactNode, mountPath: "/protected" | "/public") {
return render(
<MemoryRouter initialEntries={[mountPath]}>
<Routes>
<Route path="/login" element={<div data-testid="login-page">Login Page</div>} />
<Route path="/drawer" element={<div data-testid="drawer-page">Drawer Page</div>} />
<Route
path="/login"
element={<div data-testid="login-page">Login Page</div>}
/>
<Route
path="/drawer"
element={<div data-testid="drawer-page">Drawer Page</div>}
/>
<Route path="/protected" element={ui} />
<Route path="/public" element={ui} />
</Routes>
@@ -85,9 +91,9 @@ describe("PublicRoute", () => {
user: null,
});
renderGuard(
<PublicRoute>
<AutoRedirectRoute>
<div data-testid="mock-login-page">Login Page</div>
</PublicRoute>,
</AutoRedirectRoute>,
"/public",
);
expect(screen.getByTestId("splash-screen")).toBeInTheDocument();
@@ -101,9 +107,9 @@ describe("PublicRoute", () => {
user: mockUser,
});
renderGuard(
<PublicRoute>
<AutoRedirectRoute>
<div data-testid="login-form">Login Form</div>
</PublicRoute>,
</AutoRedirectRoute>,
"/public",
);
expect(screen.getByTestId("drawer-page")).toBeInTheDocument();
@@ -117,9 +123,9 @@ describe("PublicRoute", () => {
user: null,
});
renderGuard(
<PublicRoute>
<AutoRedirectRoute>
<div data-testid="login-form">Login Form</div>
</PublicRoute>,
</AutoRedirectRoute>,
"/public",
);
expect(screen.getByTestId("login-form")).toBeInTheDocument();
frontend/src/components/RouteGuards.tsx
+2 -2
View File
@@ -22,10 +22,10 @@ export function ProtectedRoute({ children }: { children: React.ReactNode }) {
}
/**
* Public - auth route guard.
* Auto-redirect - auth route guard.
* If authenticated, redirect all the auth related flows to the drawer
*/
export function PublicRoute({ children }: { children: React.ReactNode }) {
export function AutoRedirectRoute({ children }: { children: React.ReactNode }) {
const { isAuthenticated, isInitializing } = useAuth();
if (isInitializing) return <SplashScreen />;
frontend/src/components/SplashScreen.tsx
+4 -1
View File
@@ -3,7 +3,10 @@ import Logo from "./Logo";
export default function SplashScreen() {
return (
<div data-testid="splash-screen" className="fixed w-screen h-screen inset-0 flex flex-col items-center justify-center z-9999 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="splash-screen"
className="fixed w-screen h-screen inset-0 flex flex-col items-center justify-center z-9999 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="flex flex-col items-center gap-6 animate-pulse">
<Logo />
frontend/src/components/drawer/DrawerSection.tsx
+28 -6
View File
@@ -3,19 +3,23 @@ import { GearFineIcon } from "@phosphor-icons/react";
interface DrawerSectionProps {
id: string;
title: string;
count: string;
count: number;
subtext: string;
isOpen: boolean;
onClick: () => void;
children: React.ReactNode;
icon: React.ReactNode;
}
export function DrawerSection({
id,
title,
count,
subtext,
isOpen,
onClick,
children,
icon,
}: DrawerSectionProps) {
return (
<div
@@ -23,20 +27,32 @@ export function DrawerSection({
className={`join-item group flex flex-col transition-colors duration-3000 ease-in-out ${isOpen ? "bg-base-300/30" : ""}`}
>
<div
className={`transition-all duration-1500 ease-in-out bg-neutral/10 ${
className={`bg-neutral/10 transition-all duration-1000 ease-in-out overflow-visible ${isOpen ? "max-h-125" : "max-h-0 pointer-events-none"}`}
>
<div
className={`transition-opacity ease-in-out ${
isOpen
? "max-h-125 opacity-100 py-3 border-b border-base-content/5 overflow-visible"
: "max-h-0 opacity-0 pointer-events-none"
? "opacity-100 py-3 border-b border-base-content/5 duration-700 delay-500"
: "opacity-0 duration-100"
}`}
>
{children}
{count === 0 && (
<p
data-testid={`empty-drawer-message-${id}`}
className="text-center text-base-content/20 mt-4"
>
This drawer remains silent
</p>
)}
</div>
</div>
<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`}
className="w-full relative p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 overflow-hidden 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">
<div
@@ -49,8 +65,14 @@ export function DrawerSection({
>
{title}
</div>
<div className="font-sans text-[0.6rem] text-base-content/20 mt-1">
<div className="font-sans text-xs text-base-content/20 mt-1">
<span className="font-mono text-xs md:text-base -mt-1 absolute text-primary/30">
{count}
</span>{" "}
<span className="ml-3">{subtext}</span>
</div>
<div className="absolute right-5 -translate-y-15 text-base-content/4">
{icon}
</div>
</div>
frontend/src/components/drawer/LetterItem.tsx
+2 -2
View File
@@ -36,7 +36,7 @@ export function LetterItem({
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]">
<div className="text-sm italic text-base-content/40 flex-1 truncate group-hover:text-base-content/60">
{preview}
</div>
{unlock_at ? (
@@ -53,7 +53,7 @@ export function LetterItem({
)}
</div>
) : (
<div className="font-sans text-[0.6rem] text-base-content/20 transition-none">
<div className="font-sans text-xs text-base-content/20">
{timestamp}
</div>
)}
frontend/src/components/drawer/PasskeyModal.tsx
+4 -1
View File
@@ -12,7 +12,10 @@ export function PasskeyModal() {
className="text-primary mx-auto mb-8 animate-pulse"
weight="duotone"
/>
<h3 data-testid="passkey-modal-title" className="font-bold text-lg font-display text-primary">
<h3
data-testid="passkey-modal-title"
className="font-bold text-lg font-display text-primary"
>
You've been away a while.
</h3>
<p className="py-4 font-sans">
frontend/src/components/editor/ComposeCanvas.tsx
+1
View File
@@ -122,6 +122,7 @@ export function ComposeCanvas({
// re-calculates height based on content and applies the zoom transform
const syncViewport = useCallback(() => {
if (!(fabricRef.current && wrapperRef.current)) return;
textboxRef.current.initDimensions();
const minHeight = initialData?.canvasHeight ?? DEFAULT_LOGICAL_HEIGHT;
logicalSizeRef.current.height = measureLogicalContentHeight(
frontend/src/components/reader/EnvelopeReveal.tsx
+6 -1
View File
@@ -123,7 +123,12 @@ export function EnvelopeReveal({
<span className={"text-neutral-content/60 font-xs font-display"}>
to
</span>
<h1 data-testid="envelope-recipient" className="text-3xl font-bold text-base-content">{recipient}</h1>
<h1
data-testid="envelope-recipient"
className="text-3xl font-bold text-base-content"
>
{recipient}
</h1>
<p className="text-base-content/60 font-display mt-8">{date}</p>
<img
src={stamp}
frontend/src/index.css
+3 -3
View File
@@ -24,9 +24,9 @@
--color-neutral: oklch(38% 0.02 45);
--color-neutral-content: oklch(80% 0.015 60);
--color-info: oklch(60% 0.07 240);
--color-info: oklch(60% 0.06 250);
--color-info-content: oklch(95% 0.01 240);
--color-success: oklch(60% 0.08 150);
--color-success: oklch(65% 0.05 140);
--color-success-content: oklch(16% 0.03 150);
--color-warning: oklch(68% 0.08 72);
--color-warning-content: oklch(18% 0.03 60);
@@ -66,7 +66,7 @@
}
.glass-card {
@apply bg-glass-bg backdrop-blur-xl border border-white/5 shadow-warm rounded-xl m-4;
@apply bg-glass-bg max-w-xs md:max-w-sm backdrop-blur-xl border border-neutral-content/10 shadow-warm rounded-xl m-4;
}
.ul-wavy {
frontend/src/pages/Drawer.test.tsx
+7 -3
View File
@@ -41,7 +41,7 @@ describe("Drawer Page", () => {
});
});
it("renders the cabinet sections and empty state message", () => {
it("renders the drawer sections and empty state message", () => {
render(
<MemoryRouter>
<Drawer />
@@ -49,9 +49,13 @@ describe("Drawer Page", () => {
);
expect(screen.getByTestId("drawer-section-drafts")).toBeInTheDocument();
expect(screen.getAllByTestId("drawer-section-title").length).toBeGreaterThanOrEqual(1);
expect(
screen.getAllByTestId("drawer-section-title").length,
).toBeGreaterThanOrEqual(1);
expect(screen.getByTestId("drawer-section-vault")).toBeInTheDocument();
expect(screen.getByTestId("empty-drawer-message-drafts")).toBeInTheDocument();
expect(
screen.getByTestId("empty-drawer-message-drafts"),
).toBeInTheDocument();
});
it("renders the loading state", () => {
frontend/src/pages/Drawer.tsx
+23 -16
View File
@@ -1,4 +1,10 @@
import { FeatherIcon } from "@phosphor-icons/react";
import {
ArchiveIcon,
FeatherIcon,
FileDashedIcon,
PaperPlaneTiltIcon,
VaultIcon,
} from "@phosphor-icons/react";
import { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { DrawerSection } from "../components/drawer/DrawerSection.tsx";
@@ -68,7 +74,10 @@ export default function Drawer() {
{loading ? (
<div className="flex-1 flex flex-col items-center justify-center p-12 gap-4">
<span className="loading loading-ring loading-lg text-primary opacity-20"></span>
<span data-testid="drawer-loading-state" className="text-xxs uppercase tracking-widester font-sans text-base-content/20 animate-pulse">
<span
data-testid="drawer-loading-state"
className="text-xxs uppercase tracking-widester font-sans text-base-content/20 animate-pulse"
>
Opening your cabinet...
</span>
</div>
@@ -77,9 +86,11 @@ export default function Drawer() {
<DrawerSection
id="drafts"
title="Drafts"
count={`${drafts.length} unfinished whispers`}
count={drafts.length}
subtext="unfinished whispers"
isOpen={openSection === "drafts"}
onClick={() => toggleSection("drafts")}
icon={<FileDashedIcon weight="thin" size={128} />}
>
{drafts.map((draft) => (
<LetterItem
@@ -90,19 +101,16 @@ export default function Drawer() {
timestamp={formatRelativeDate(draft.updated_at)}
/>
))}
{drafts.length === 0 && (
<p data-testid="empty-drawer-message-drafts" className="text-center text-base-content/20 mt-4">
This drawer remains silent
</p>
)}
</DrawerSection>
<DrawerSection
id="kept"
title="Kept"
count={`${kept.length} private letters`}
count={kept.length}
subtext="private letters"
isOpen={openSection === "kept"}
onClick={() => toggleSection("kept")}
icon={<ArchiveIcon weight="thin" size={128} />}
>
{kept.map((letter) => (
<LetterItem
@@ -117,9 +125,11 @@ export default function Drawer() {
<DrawerSection
id="sent"
title="Sent"
count={`${sent.length} shared truths`}
count={sent.length}
subtext="shared truths"
isOpen={openSection === "sent"}
onClick={() => toggleSection("sent")}
icon={<PaperPlaneTiltIcon weight="thin" size={128} />}
>
{sent.map((letter) => (
<LetterItem
@@ -130,18 +140,15 @@ export default function Drawer() {
timestamp={formatRelativeDate(letter.updated_at)}
/>
))}
{sent.length === 0 && (
<p className="empty-drawer-message-sent text-center text-base-content/20 mt-4">
This drawer remains silent
</p>
)}
</DrawerSection>
<DrawerSection
id="vault"
title="Vault"
count={`${vault.length} things locked;not lost;in time`}
count={vault.length}
subtext="things locked—not lost—in time"
isOpen={openSection === "vault"}
onClick={() => toggleSection("vault")}
icon={<VaultIcon weight="thin" size={128} />}
>
{vault.map((letter) => (
<LetterItem
frontend/src/pages/Editor.test.tsx
+12 -3
View File
@@ -1,4 +1,9 @@
import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/react";
import {
fireEvent,
render,
screen,
waitForElementToBeRemoved,
} from "@testing-library/react";
import { HttpResponse, http } from "msw";
import { MemoryRouter, Route, Routes } from "react-router-dom";
import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -79,7 +84,9 @@ describe("Editor Page", () => {
);
// Wait for initial load to complete
await waitForElementToBeRemoved(() => screen.queryByTestId("opening-draft-overlay"));
await waitForElementToBeRemoved(() =>
screen.queryByTestId("opening-draft-overlay"),
);
const canvas = screen.getByTestId("canvas");
expect(canvas.getAttribute("data-readonly")).toBe("false");
@@ -136,7 +143,9 @@ describe("Editor Page", () => {
</MemoryRouter>,
);
await waitForElementToBeRemoved(() => screen.queryByTestId("opening-draft-overlay"));
await waitForElementToBeRemoved(() =>
screen.queryByTestId("opening-draft-overlay"),
);
const canvas = screen.getByTestId("canvas");
frontend/src/pages/Home.tsx
+16 -13
View File
@@ -14,6 +14,9 @@ import Saajan from "../components/ui/Saajan.tsx";
import { ROUTES } from "../config/routes.ts";
import { formatDate } from "../utils/dateFormat.ts";
import "@fontsource/space-mono/index.css";
import "@fontsource/architects-daughter/index.css";
export default function Home() {
const sectionContainer1 = useRef<HTMLDivElement>(null);
const { scrollYProgress } = useScroll({
@@ -53,7 +56,7 @@ export default function Home() {
<ReactLenis root options={{ lerp: 0.1, duration: 1.5, smoothWheel: true }}>
<section
ref={sectionContainer1}
className="relative w-full h-[850vh] bg-base-100 font-serif"
className="relative w-full h-[850vh] bg-base-100 font-serif text-neutral-content/90"
>
<div className="sticky top-0 h-screen w-full flex flex-col items-center justify-center overflow-hidden">
{/* Intro */}
@@ -64,12 +67,12 @@ export default function Home() {
scale: useTransform(scrollYProgress, [0, 0.12], [1, 10]),
}}
>
<h1 className="text-neutral-content/40 text-4xl md:text-6xl text-center px-6">
<h1 className="text-neutral text-4xl md:text-6xl text-center px-6">
You've been carrying something
</h1>
<h2 className="text-primary text-5xl md:text-7xl font-extralight mt-4 italic font-display animate-pulse">
<motion.h2 className="text-primary text-5xl md:text-7xl mt-4 italic font-display font-light">
unsaid
</h2>
</motion.h2>
</motion.div>
<motion.div
@@ -97,9 +100,9 @@ export default function Home() {
}}
transition={{ delay: 4 }}
>
<Logo scale={2} />
<Logo type="logo" scale={1.5} ul={true} />
<motion.div
className="mt-6 text-4xl md:text-6xl text-base-content/60 "
className="font-serif italic font-extralight mt-6 text-4xl md:text-6xl text-neutral "
style={{
opacity: useTransform(
scrollYProgress,
@@ -119,8 +122,8 @@ export default function Home() {
</span>
,<br />
<motion.span
className="opacity-0 text-3xl md:text-5xl"
transition={{ delay: 3 }}
className="opacity-0 text-2xl md:text-4xl font-hand tracking-widest italic text-neutral"
transition={{ delay: 5 }}
whileInView={{ opacity: 1 }}
viewport={{ once: false, amount: 0.3 }}
>
@@ -168,11 +171,11 @@ export default function Home() {
className="absolute text-4xl md:text-6xl text-center px-10 leading-tight"
>
seal it{" "}
<span className="text-secondary font-display italic font-extralight">
<span className="text-success font-mono tracking-tighter font-extrabold">
secure
</span>{" "}
and{" "}
<span className="text-secondary font-display font-extralight italic">
<span className="text-info font-mono tracking-tighter italic">
private
</span>
.
@@ -252,7 +255,7 @@ export default function Home() {
{/* Outro */}
<motion.h2
className={
"italic absolute text-4xl md:text-6xl text-center px-10 leading-tight"
"italic absolute text-4xl md:text-6xl text-center px-10 leading-tight text-neutral-content/50"
}
style={{
opacity: useTransform(scrollYProgress, [0.9, 1], [0, 1]),
@@ -264,7 +267,7 @@ export default function Home() {
{/* CTA */}
<motion.div
className={
"z-100 absolute -bottom-12 md:bottom-0 font-display flex flex-wrap md:flex-nowrap gap-4 md:gap-12 justify-center"
"z-100 absolute -bottom-12 md:bottom-0 font-hand flex flex-wrap md:flex-nowrap gap-4 md:gap-12 justify-center"
}
style={{
opacity: useTransform(scrollYProgress, [0.98, 1], [0, 1]),
@@ -288,7 +291,7 @@ export default function Home() {
</button>
<button
className={
"md:opacity-50 hover:opacity-100 btn rounded-full btn-primary btn-wide md:btn-xl md:grayscale hover:grayscale-0 hover:-translate-y-1 transition-all duration-1000"
"md:opacity-50 hover:opacity-100 btn rounded-full btn-primary btn-wide md:btn-xl md:grayscale-50 hover:grayscale-0 focus:grayscale-0 active:grayscale-0 hover:-translate-y-1 transition-all duration-1000"
}
type={"button"}
onClick={() => navigate(ROUTES.ONBOARD, { replace: true })}
frontend/src/pages/Login.test.tsx
+13 -4
View File
@@ -31,7 +31,9 @@ describe("Login Page", () => {
await userEvent.type(screen.getByLabelText(/password/i), "password123");
await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
expect(await screen.findByTestId("login-error-message")).toHaveTextContent(/technical issues/i);
expect(await screen.findByTestId("login-error-message")).toHaveTextContent(
/technical issues/i,
);
});
it.each([
@@ -73,8 +75,14 @@ describe("Login Page", () => {
>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/drawer" element={<div data-testid="drawer-page">Drawer</div>} />
<Route path="/read/:publicId" element={<div data-testid="reader-page">Reader</div>} />
<Route
path="/drawer"
element={<div data-testid="drawer-page">Drawer</div>}
/>
<Route
path="/read/:publicId"
element={<div data-testid="reader-page">Reader</div>}
/>
</Routes>
</MemoryRouter>,
);
@@ -83,7 +91,8 @@ describe("Login Page", () => {
await userEvent.type(screen.getByLabelText(/password/i), "password123");
await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
const expectedTestId = nextRoute.toLowerCase() === "drawer" ? "drawer-page" : "reader-page";
const expectedTestId =
nextRoute.toLowerCase() === "drawer" ? "drawer-page" : "reader-page";
expect(await screen.findByTestId(expectedTestId)).toBeInTheDocument();
});
});
frontend/src/pages/Login.tsx
+2 -2
View File
@@ -83,8 +83,8 @@ export default function Login() {
{showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
<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">
<h1 className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight">
Enter <Logo /> Archive
<h1 className="flex items-center font-display text-2xl justify-center text-primary/80 tracking-tight">
&nbsp;&nbsp;Enter <Logo type="logo" scale={0.7} /> Archive
</h1>
{apiError && (
frontend/src/pages/Reader.test.tsx
+6 -4
View File
@@ -76,7 +76,9 @@ describe("Reader Page", () => {
</Routes>
</MemoryRouter>,
);
expect(await screen.findByTestId("envelope-recipient")).toHaveTextContent(/Guest/i);
expect(await screen.findByTestId("envelope-recipient")).toHaveTextContent(
/Guest/i,
);
});
it("should display an error message if the server request fails", async () => {
@@ -97,9 +99,9 @@ describe("Reader Page", () => {
</MemoryRouter>,
);
expect(
await screen.findByTestId("log-modal-message"),
).toHaveTextContent(/Failed to load letter/i);
expect(await screen.findByTestId("log-modal-message")).toHaveTextContent(
/Failed to load letter/i,
);
});
it("should navigate to the login page with redirect url when the letter has no sharing key and the user is not logged in", async () => {
frontend/src/pages/Register.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ export default function Register() {
<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
Create a <Logo type="logo" scale={0.7} /> Account
</div>
{apiError && (