feat: add auth pages (login, signup, password reset, onboarding)

- Create stub auth API (lib/auth.ts) with simulated delay
- Add PasswordInput component with visibility toggle
- Add SocialAuthButtons component (Google/Apple placeholders)
- Add AuthLayout with split-panel layout and rotating testimonial
- Implement login page with email/password validation and remember me
- Implement signup page with password strength indicator and ToS checkbox
- Implement forgot-password page with email submission and success state
- Implement reset-password page with token validation from query params
- Implement 4-step onboarding flow (plan selection, watchlist, invites, success)
- Add ToastProvider to root app
- Write 28 tests for all auth components and form validation

web/src/components/auth/AuthLayout.tsx

@@ -0,0 +1,86 @@
+import { createSignal, onMount, onCleanup } from "solid-js";
+import type { JSX } from "solid-js";
+import { PageContainer } from "~/components/layout";
+
+interface Testimonial {
+  quote: string;
+  author: string;
+  role: string;
+}
+
+const testimonials: Testimonial[] = [
+  {
+    quote:
+      "ShieldAI caught a credential leak before it became a disaster. Essential tool for anyone concerned about their digital identity.",
+    author: "Sarah Chen",
+    role: "Security Engineer",
+  },
+  {
+    quote:
+      "I sleep better knowing ShieldAI is monitoring my personal information 24/7.",
+    author: "Marcus Johnson",
+    role: "Freelance Developer",
+  },
+  {
+    quote:
+      "The family protection plan means I can protect not just myself but my whole family.",
+    author: "Emily Rodriguez",
+    role: "Mother of three",
+  },
+];
+
+interface AuthLayoutProps {
+  children: JSX.Element;
+}
+
+export default function AuthLayout(props: AuthLayoutProps) {
+  const [index, setIndex] = createSignal(0);
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      setIndex((i) => (i + 1) % testimonials.length);
+    }, 6000);
+    onCleanup(() => clearInterval(interval));
+  });
+
+  const t = () => testimonials[index()];
+
+  return (
+    <div class="min-h-screen flex items-center justify-center py-8 md:py-12">
+      <PageContainer>
+        <div class="flex flex-col md:flex-row items-stretch gap-0 md:gap-8 lg:gap-12 max-w-5xl mx-auto">
+          <div class="hidden md:flex flex-col justify-center gap-6 flex-1 p-8 lg:p-12">
+            <div>
+              <h1 class="text-3xl lg:text-4xl font-bold text-gradient-primary">
+                ShieldAI
+              </h1>
+              <p class="text-lg text-[var(--color-text-secondary)] mt-2">
+                AI-Powered Identity Protection
+              </p>
+            </div>
+            <div class="flex-1 flex flex-col justify-center">
+              <blockquote class="border-l-4 border-[var(--color-brand-primary)] pl-4">
+                <p class="text-base text-[var(--color-text-secondary)] italic leading-relaxed">
+                  "{t().quote}"
+                </p>
+                <footer class="mt-3">
+                  <p class="text-sm font-medium text-[var(--color-text-primary)]">
+                    — {t().author}
+                  </p>
+                  <p class="text-xs text-[var(--color-text-tertiary)]">
+                    {t().role}
+                  </p>
+                </footer>
+              </blockquote>
+            </div>
+          </div>
+          <div class="flex-1 flex items-center justify-center p-4 md:p-0">
+            <div class="w-full max-w-md gradient-card border border-[var(--color-border)]/50 rounded-xl p-6 md:p-8">
+              {props.children}
+            </div>
+          </div>
+        </div>
+      </PageContainer>
+    </div>
+  );
+}

web/src/components/auth/PasswordInput.tsx

@@ -0,0 +1,91 @@
+import { createSignal, Show } from "solid-js";
+import { cn } from "~/lib/utils";
+import type { JSX } from "solid-js";
+
+interface PasswordInputProps {
+  label?: string;
+  value?: string;
+  onInput?: (e: InputEvent & { currentTarget: HTMLInputElement }) => void;
+  error?: string;
+  helperText?: string;
+  placeholder?: string;
+  class?: string;
+  id?: string;
+  name?: string;
+  required?: boolean;
+  disabled?: boolean;
+}
+
+export default function PasswordInput(props: PasswordInputProps) {
+  const [visible, setVisible] = createSignal(false);
+  const id = () =>
+    props.id ??
+    props.name ??
+    globalThis.crypto?.randomUUID?.() ??
+    Math.random().toString(36).slice(2, 10);
+
+  return (
+    <div class={cn("flex flex-col gap-1", props.class)}>
+      {props.label && (
+        <label
+          for={id()}
+          class="text-sm font-medium text-[var(--color-text-primary)]"
+        >
+          {props.label}
+          {props.required && (
+            <span class="text-[var(--color-error)] ml-1">*</span>
+          )}
+        </label>
+      )}
+      <div class="relative">
+        <input
+          id={id()}
+          type={visible() ? "text" : "password"}
+          value={props.value ?? ""}
+          onInput={props.onInput}
+          placeholder={props.placeholder}
+          name={props.name}
+          disabled={props.disabled}
+          class={cn(
+            "w-full bg-transparent border rounded-lg px-4 py-2 pr-10 text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] transition-all duration-200",
+            props.error
+              ? "border-[var(--color-error)] focus:ring-[var(--color-error)]"
+              : "border-[var(--color-border)] focus:ring-[var(--color-focus-ring)]",
+            "focus:outline-none focus:ring-2",
+            props.disabled && "opacity-50 cursor-not-allowed",
+          )}
+        />
+        <button
+          type="button"
+          onClick={() => setVisible(!visible())}
+          class="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors cursor-pointer"
+          aria-label={visible() ? "Hide password" : "Show password"}
+          tabindex={-1}
+        >
+          <Show
+            when={visible()}
+            fallback={
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                <circle cx="12" cy="12" r="3" />
+              </svg>
+            }
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+              <line x1="1" y1="1" x2="23" y2="23" />
+            </svg>
+          </Show>
+        </button>
+      </div>
+      {props.error && (
+        <p class="text-sm text-[var(--color-error)]">{props.error}</p>
+      )}
+      {props.helperText && !props.error && (
+        <p class="text-sm text-[var(--color-text-tertiary)]">
+          {props.helperText}
+        </p>
+      )}
+    </div>
+  );
+}

web/src/components/auth/SocialAuthButtons.tsx

@@ -0,0 +1,29 @@
+export default function SocialAuthButtons() {
+  return (
+    <div class="flex flex-col gap-3">
+      <button
+        type="button"
+        onClick={() => {}}
+        class="flex items-center justify-center gap-3 w-full px-4 py-2.5 border border-[var(--color-border)] rounded-lg text-sm font-medium text-[var(--color-text-primary)] bg-white hover:bg-[var(--color-bg-secondary)] transition-colors cursor-pointer"
+      >
+        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
+          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+        </svg>
+        Continue with Google
+      </button>
+      <button
+        type="button"
+        onClick={() => {}}
+        class="flex items-center justify-center gap-3 w-full px-4 py-2.5 border border-[var(--color-border)] rounded-lg text-sm font-medium text-white bg-black hover:bg-gray-900 transition-colors cursor-pointer"
+      >
+        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.6 5.98.52 7.13-.62 1.28-1.4 2.55-2.57 3.08Zm-3.12-15.2c.03-1.14.44-2.23 1.07-3.03.82-.98 2.11-1.63 3.32-1.59.06 1.24-.4 2.45-1.12 3.3-.77.9-1.98 1.52-3.27 1.32Z" />
+        </svg>
+        Continue with Apple
+      </button>
+    </div>
+  );
+}

web/src/components/auth/auth.test.tsx

@@ -0,0 +1,149 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render } from "solid-js/web";
+import type { JSX } from "solid-js";
+
+import PasswordInput from "./PasswordInput";
+import SocialAuthButtons from "./SocialAuthButtons";
+import AuthLayout from "./AuthLayout";
+import { Input, Button } from "~/components/ui";
+
+function mount(comp: () => JSX.Element): HTMLDivElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  render(() => comp(), container);
+  return container;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = "";
+  if (!globalThis.crypto) {
+    Object.defineProperty(globalThis, "crypto", { value: {} });
+  }
+  (globalThis.crypto as unknown as Record<string, unknown>).randomUUID = vi.fn(
+    () => "test-uuid-1234",
+  );
+});
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("PasswordInput", () => {
+  it("renders with label", () => {
+    mount(() => <PasswordInput label="Password" />);
+    expect(document.body.textContent).toContain("Password");
+    expect(document.querySelector("label")).toBeTruthy();
+  });
+
+  it("renders password type by default", () => {
+    mount(() => <PasswordInput label="Password" />);
+    const input = document.querySelector("input")!;
+    expect(input.getAttribute("type")).toBe("password");
+  });
+
+  it("toggles visibility when eye icon is clicked", () => {
+    mount(() => <PasswordInput label="Password" />);
+    const input = document.querySelector("input")!;
+    const toggle = document.querySelector("button[aria-label]")!;
+
+    expect(input.getAttribute("type")).toBe("password");
+    expect(toggle.getAttribute("aria-label")).toBe("Show password");
+
+    toggle.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(input.getAttribute("type")).toBe("text");
+    expect(toggle.getAttribute("aria-label")).toBe("Hide password");
+
+    toggle.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(input.getAttribute("type")).toBe("password");
+  });
+
+  it("shows error message", () => {
+    mount(() => (
+      <PasswordInput label="Password" error="Password is required" />
+    ));
+    expect(document.body.textContent).toContain("Password is required");
+  });
+
+  it("shows helper text when no error", () => {
+    mount(() => (
+      <PasswordInput label="Password" helperText="At least 8 characters" />
+    ));
+    expect(document.body.textContent).toContain("At least 8 characters");
+  });
+
+  it("hides helper text when error is present", () => {
+    mount(() => (
+      <PasswordInput
+        label="Password"
+        error="Required"
+        helperText="Helper text"
+      />
+    ));
+    expect(document.body.textContent).toContain("Required");
+    expect(document.body.textContent).not.toContain("Helper text");
+  });
+
+  it("forwards onInput handler", () => {
+    const onInput = vi.fn();
+    mount(() => <PasswordInput onInput={onInput} />);
+    const input = document.querySelector("input")!;
+    input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+    expect(onInput).toHaveBeenCalled();
+  });
+});
+
+describe("SocialAuthButtons", () => {
+  it("renders Google and Apple buttons", () => {
+    mount(() => <SocialAuthButtons />);
+    const buttons = document.querySelectorAll("button");
+    expect(buttons.length).toBe(2);
+    expect(buttons[0].textContent).toContain("Google");
+    expect(buttons[1].textContent).toContain("Apple");
+  });
+
+  it("renders SVG icons in each button", () => {
+    mount(() => <SocialAuthButtons />);
+    const buttons = document.querySelectorAll("button");
+    expect(buttons[0].querySelector("svg")).toBeTruthy();
+    expect(buttons[1].querySelector("svg")).toBeTruthy();
+  });
+});
+
+describe("AuthLayout", () => {
+  it("renders children inside the form card", () => {
+    mount(() => (
+      <AuthLayout>
+        <p>Form content</p>
+      </AuthLayout>
+    ));
+    expect(document.body.textContent).toContain("Form content");
+  });
+
+  it("renders ShieldAI branding", () => {
+    mount(() => (
+      <AuthLayout>
+        <p>Content</p>
+      </AuthLayout>
+    ));
+    expect(document.body.textContent).toContain("ShieldAI");
+  });
+
+  it("renders gradient-card wrapper", () => {
+    mount(() => (
+      <AuthLayout>
+        <p>Content</p>
+      </AuthLayout>
+    ));
+    expect(document.querySelector(".gradient-card")).toBeTruthy();
+  });
+
+  it("renders testimonial text", () => {
+    mount(() => (
+      <AuthLayout>
+        <p>Content</p>
+      </AuthLayout>
+    ));
+    expect(document.body.textContent).toContain("ShieldAI");
+    expect(document.body.textContent).toContain("AI-Powered Identity Protection");
+  });
+});

web/src/components/auth/index.ts

@@ -0,0 +1,3 @@
+export { default as AuthLayout } from "./AuthLayout";
+export { default as PasswordInput } from "./PasswordInput";
+export { default as SocialAuthButtons } from "./SocialAuthButtons";