Jason Woltje
61130b869b
Build out apps/web with Tailwind CSS v4, BetterAuth client, and the Mosaic design system. Populate @mosaic/design-tokens with actual color palette (deep blue-grays, blue/purple/teal accents), font definitions (Outfit/Fira Code), and spacing scale per AD-13. - Tailwind v4 CSS-first config with @theme tokens in globals.css - next/font for self-hosted Outfit + Fira Code (no Google CDN) - App shell with sidebar nav, topbar, and content area - Route groups: (dashboard) with AppShell, (auth) with centered card - Placeholder pages: /chat, /login, /register - BetterAuth React client (useSession, signIn, signUp, signOut) - Gateway API fetch wrapper with credentials - cn() utility with clsx + tailwind-merge - Dark theme default, WCAG-friendly contrast Refs #26 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
export default function LoginPage(): React.ReactElement {
|
|
return (
|
|
<div>
|
|
<h1 className="text-2xl font-semibold">Sign in</h1>
|
|
<p className="mt-1 text-sm text-text-secondary">Sign in to your Mosaic account</p>
|
|
|
|
<form className="mt-6 space-y-4" onSubmit={(e) => e.preventDefault()}>
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-text-secondary">
|
|
Email
|
|
</label>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
required
|
|
className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
placeholder="you@example.com"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium text-text-secondary">
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
required
|
|
className="mt-1 block w-full rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
placeholder="••••••••"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-surface-card"
|
|
>
|
|
Sign in
|
|
</button>
|
|
</form>
|
|
|
|
<p className="mt-4 text-center text-sm text-text-muted">
|
|
Don't have an account?{' '}
|
|
<Link href="/register" className="text-blue-400 hover:text-blue-300">
|
|
Sign up
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|