tlv84yb7n: Build the sign-in screen and signed-in placeholder shell

src/app/globals.css

@@ -0,0 +1,15 @@
+:root { --red: #E8202A; --ink: #111; --grey: #6b6b6b; --line: #d9d9d9; --bg: #f5f5f5; }
+* { box-sizing: border-box; }
+body { margin: 0; font-family: Roboto, system-ui, sans-serif; color: var(--ink); background: var(--bg); }
+.center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
+.card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 32px 24px; display: flex; flex-direction: column; gap: 8px; }
+.card h1 { font-size: 22px; margin: 12px 0 8px; }
+label { font-size: 14px; font-weight: 500; margin-top: 8px; }
+input { font: inherit; padding: 12px; border: 1px solid #999; border-radius: 8px; background: #fff; color: var(--ink); }
+input:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+button { font: inherit; font-weight: 500; margin-top: 16px; padding: 12px; border: 0; border-radius: 8px; background: var(--red); color: #fff; cursor: pointer; }
+button:disabled { opacity: .5; cursor: not-allowed; }
+.error { margin: 0 0 4px; padding: 10px 12px; border: 1px solid var(--red); border-radius: 8px; color: #a8141b; background: #fff3f3; font-size: 14px; }
+.shell header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }
+.shell header div { display: flex; flex-direction: column; font-size: 14px; }
+.shell header span { color: var(--grey); }

src/app/layout.tsx

@@ -1,5 +1,9 @@
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
+import { Roboto } from "next/font/google";
+import "./globals.css";
+
+const roboto = Roboto({ subsets: ["latin"], weight: ["400", "500", "700"] });
 
 export const metadata: Metadata = {
   title: "Minnect feed browser",
@@ -8,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" className={roboto.className}>
       <body>{children}</body>
     </html>
   );

src/app/page.tsx

@@ -1,12 +1,5 @@
-// Placeholder home page. The sign-in screen and the feed UI are built in
+import { App } from "@/components/App";
-// later tasks (tlv84yb7n and the feed tasks). This task delivers the server
-// session routes under /api/session.
 
 export default function HomePage() {
-  return (
+  return <App />;
-    <main style={{ maxWidth: 640, margin: "0 auto", padding: "2rem 1rem" }}>
-      <h1>Minnect feed browser</h1>
-      <p>The sign-in screen is built in a later task.</p>
-    </main>
-  );
 }

src/components/App.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { loadSession, type Person } from "@/lib/auth-client";
+import { SignInForm } from "./SignInForm";
+import { Logo } from "./Logo";
+
+type State = { kind: "loading" } | { kind: "out" } | { kind: "in"; person: Person };
+
+export function App() {
+  const [state, setState] = useState<State>({ kind: "loading" });
+
+  useEffect(() => {
+    let live = true;
+    loadSession().then((person) => {
+      if (live) setState(person ? { kind: "in", person } : { kind: "out" });
+    });
+    return () => {
+      live = false;
+    };
+  }, []);
+
+  if (state.kind === "loading") {
+    return (
+      <main className="center">
+        <p aria-live="polite">Loading...</p>
+      </main>
+    );
+  }
+  if (state.kind === "out") {
+    return <SignInForm onSignedIn={(person) => setState({ kind: "in", person })} />;
+  }
+  // Placeholder shell. The home feed and sign-out are later tasks.
+  return (
+    <main className="shell">
+      <header>
+        <Logo size={32} />
+        <div>
+          <strong>{state.person.name}</strong>
+          <span>{state.person.email}</span>
+        </div>
+      </header>
+    </main>
+  );
+}

src/components/Logo.tsx

@@ -0,0 +1,8 @@
+export function Logo({ size = 44 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 48 48" role="img" aria-label="Minnect">
+      <polygon points="24,2 43,13 43,35 24,46 5,35 5,13" fill="#E8202A" />
+      <path d="M14 33V15l10 11 10-11v18" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinejoin="round" strokeLinecap="round" />
+    </svg>
+  );
+}

src/components/SignInForm.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { signIn, type Person } from "@/lib/auth-client";
+import { Logo } from "./Logo";
+
+export function SignInForm({ onSignedIn }: { onSignedIn: (p: Person) => void }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function submit(e: FormEvent) {
+    e.preventDefault();
+    if (busy) return;
+    setBusy(true);
+    setError(null);
+    const result = await signIn(email.trim(), password);
+    setBusy(false);
+    if (result.ok) {
+      setPassword("");
+      onSignedIn(result.person);
+    } else {
+      setPassword("");
+      setError(result.message);
+    }
+  }
+
+  return (
+    <main className="center">
+      <form className="card" onSubmit={submit} noValidate>
+        <Logo />
+        <h1>Sign in to Minnect</h1>
+        {error && (
+          <p role="alert" className="error">
+            {error}
+          </p>
+        )}
+        <label htmlFor="email">Email</label>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          autoComplete="username"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <label htmlFor="password">Password</label>
+        <input
+          id="password"
+          name="password"
+          type="password"
+          autoComplete="current-password"
+          required
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button type="submit" disabled={busy || !email || !password}>
+          {busy ? "Signing in..." : "Sign in"}
+        </button>
+      </form>
+    </main>
+  );
+}

src/lib/auth-client.ts

@@ -0,0 +1,51 @@
+// Browser-side calls to this app's own /api/session. No token, password or
+// session id is stored or logged here; the session lives in an httpOnly cookie.
+
+export type Person = { name: string; email: string; pictureUrl: string | null };
+
+export const WRONG_CREDENTIALS = "Email or password is incorrect.";
+export const GENERIC_FAILURE = "Could not sign you in. Try again.";
+
+type Fetch = typeof fetch;
+
+function toPerson(body: unknown): Person | null {
+  if (!body || typeof body !== "object") return null;
+  const r = body as Record<string, unknown>;
+  if (typeof r.email !== "string") return null;
+  return {
+    name: typeof r.name === "string" ? r.name : "",
+    email: r.email,
+    pictureUrl: typeof r.pictureUrl === "string" ? r.pictureUrl : null,
+  };
+}
+
+/** GET /api/session: the person, or null when signed out or unreachable. */
+export async function loadSession(f: Fetch = fetch): Promise<Person | null> {
+  try {
+    const res = await f("/api/session", { credentials: "same-origin", cache: "no-store" });
+    if (!res.ok) return null;
+    return toPerson(await res.json());
+  } catch {
+    return null;
+  }
+}
+
+export type SignInResult = { ok: true; person: Person } | { ok: false; message: string };
+
+/** POST /api/session. A 401 is always the one wrong-credentials message. */
+export async function signIn(email: string, password: string, f: Fetch = fetch): Promise<SignInResult> {
+  try {
+    const res = await f("/api/session", {
+      method: "POST",
+      credentials: "same-origin",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    });
+    if (res.status === 401) return { ok: false, message: WRONG_CREDENTIALS };
+    if (!res.ok) return { ok: false, message: GENERIC_FAILURE };
+    const person = toPerson(await res.json());
+    return person ? { ok: true, person } : { ok: false, message: GENERIC_FAILURE };
+  } catch {
+    return { ok: false, message: GENERIC_FAILURE };
+  }
+}

tests/auth-client.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it, vi } from "vitest";
+import { loadSession, signIn, WRONG_CREDENTIALS } from "@/lib/auth-client";
+
+const json = (body: unknown, status = 200) =>
+  new Response(JSON.stringify(body), { status, headers: { "content-type": "application/json" } });
+
+describe("signIn", () => {
+  it("wrong password gives the one message", async () => {
+    const f = vi.fn(async () => json({ error: "Email or password is incorrect." }, 401));
+    expect(await signIn("a@b.co", "bad", f as unknown as typeof fetch)).toEqual({ ok: false, message: WRONG_CREDENTIALS });
+  });
+  it("success returns the person and posts JSON to /api/session", async () => {
+    const f = vi.fn(async () => json({ name: "Ann", email: "a@b.co", pictureUrl: null }));
+    const r = await signIn("a@b.co", "pw", f as unknown as typeof fetch);
+    expect(r).toEqual({ ok: true, person: { name: "Ann", email: "a@b.co", pictureUrl: null } });
+    expect(f.mock.calls[0]).toMatchObject(["/api/session", { method: "POST" }]);
+  });
+  it("network failure is not the wrong-password message", async () => {
+    const f = vi.fn(async () => { throw new Error("down"); });
+    const r = await signIn("a@b.co", "pw", f as unknown as typeof fetch);
+    expect(r.ok).toBe(false);
+    if (!r.ok) expect(r.message).not.toBe(WRONG_CREDENTIALS);
+  });
+});
+
+describe("loadSession", () => {
+  it("401 means signed out", async () => {
+    const f = vi.fn(async () => json({ error: "sign_in" }, 401));
+    expect(await loadSession(f as unknown as typeof fetch)).toBeNull();
+  });
+  it("200 returns the person", async () => {
+    const f = vi.fn(async () => json({ name: "Ann", email: "a@b.co", pictureUrl: "u" }));
+    expect((await loadSession(f as unknown as typeof fetch))?.email).toBe("a@b.co");
+  });
+});