mirror of
https://github.com/temetro/temetro.git
synced 2026-07-26 11:58:14 +00:00
Use shadcn login-01 / signup-03 card blocks (no animation)
Add the shadcn login-01 and signup-03 blocks (with the base-luma field/label components) and wire their forms to the Better Auth client: login → signIn.email, signup → signUp.email (12-char rule, confirm match), with error + submitting states. Dropped the non-functional "Login with Google" button. Render the block forms from the existing (auth)/login and (auth)/signup pages (deleting the blocks' duplicate app/login + app/signup routes). Replace the animated AuthShell with a static, card-based shell + brand header so onboarding/verify/reset/accept-invite match. Drop the unsupported `eslint` key from next.config. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude
@@ -1,93 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { type FormEvent, useState } from "react";
|
||||
|
||||
import { AuthShell, Field, FormAlert } from "@/components/auth/auth-ui";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { AuthLayout } from "@/components/auth/auth-ui";
|
||||
import { LoginForm } from "@/components/login-form";
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const onSubmit = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (submitting) return;
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
const { error: err } = await authClient.signIn.email({
|
||||
email: email.trim(),
|
||||
password,
|
||||
callbackURL: `${window.location.origin}/`,
|
||||
});
|
||||
|
||||
if (err) {
|
||||
setError(
|
||||
err.message ??
|
||||
"Could not sign in. Check your email and password and try again."
|
||||
);
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthShell
|
||||
footer={
|
||||
<>
|
||||
New to temetro?{" "}
|
||||
<Link className="text-foreground hover:underline" href="/signup">
|
||||
Create an account
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
subtitle="Sign in to your clinician account"
|
||||
title="Welcome back"
|
||||
>
|
||||
<form className="flex flex-col gap-4" onSubmit={onSubmit}>
|
||||
{error && <FormAlert>{error}</FormAlert>}
|
||||
<Field htmlFor="email" label="Email">
|
||||
<Input
|
||||
autoComplete="email"
|
||||
id="email"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@clinic.org"
|
||||
required
|
||||
type="email"
|
||||
value={email}
|
||||
/>
|
||||
</Field>
|
||||
<Field htmlFor="password" label="Password">
|
||||
<Input
|
||||
autoComplete="current-password"
|
||||
id="password"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••••••"
|
||||
required
|
||||
type="password"
|
||||
value={password}
|
||||
/>
|
||||
</Field>
|
||||
<div className="-mt-1 text-right">
|
||||
<Link
|
||||
className="text-xs text-muted-foreground hover:text-foreground hover:underline"
|
||||
href="/forgot-password"
|
||||
>
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
<Button className="mt-1 w-full" disabled={submitting} type="submit">
|
||||
{submitting ? "Signing in…" : "Sign in"}
|
||||
</Button>
|
||||
</form>
|
||||
</AuthShell>
|
||||
<AuthLayout>
|
||||
<LoginForm />
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,124 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { type FormEvent, useState } from "react";
|
||||
|
||||
import { AuthShell, Field, FormAlert } from "@/components/auth/auth-ui";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
|
||||
const MIN_PASSWORD = 12;
|
||||
import { AuthLayout } from "@/components/auth/auth-ui";
|
||||
import { SignupForm } from "@/components/signup-form";
|
||||
|
||||
export default function SignupPage() {
|
||||
const router = useRouter();
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirm, setConfirm] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const onSubmit = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (submitting) return;
|
||||
setError(null);
|
||||
|
||||
if (password.length < MIN_PASSWORD) {
|
||||
setError(`Password must be at least ${MIN_PASSWORD} characters.`);
|
||||
return;
|
||||
}
|
||||
if (password !== confirm) {
|
||||
setError("Passwords do not match.");
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
const { error: err } = await authClient.signUp.email({
|
||||
name: name.trim(),
|
||||
email: email.trim(),
|
||||
password,
|
||||
callbackURL: `${window.location.origin}/verify-email`,
|
||||
});
|
||||
|
||||
if (err) {
|
||||
setError(err.message ?? "Could not create your account.");
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
// Email verification isn't enforced yet (see backend auth config), so the
|
||||
// user is signed in on sign-up — go straight to clinic onboarding. A
|
||||
// verification email is still sent for when verification is re-enabled.
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthShell
|
||||
footer={
|
||||
<>
|
||||
Already have an account?{" "}
|
||||
<Link className="text-foreground hover:underline" href="/login">
|
||||
Sign in
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
subtitle="Start using temetro in your clinic"
|
||||
title="Create your account"
|
||||
>
|
||||
<form className="flex flex-col gap-4" onSubmit={onSubmit}>
|
||||
{error && <FormAlert>{error}</FormAlert>}
|
||||
<Field htmlFor="name" label="Full name">
|
||||
<Input
|
||||
autoComplete="name"
|
||||
id="name"
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Dr. Jane Okafor"
|
||||
required
|
||||
value={name}
|
||||
/>
|
||||
</Field>
|
||||
<Field htmlFor="email" label="Email">
|
||||
<Input
|
||||
autoComplete="email"
|
||||
id="email"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@clinic.org"
|
||||
required
|
||||
type="email"
|
||||
value={email}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
hint={`At least ${MIN_PASSWORD} characters.`}
|
||||
htmlFor="password"
|
||||
label="Password"
|
||||
>
|
||||
<Input
|
||||
autoComplete="new-password"
|
||||
id="password"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••••••"
|
||||
required
|
||||
type="password"
|
||||
value={password}
|
||||
/>
|
||||
</Field>
|
||||
<Field htmlFor="confirm" label="Confirm password">
|
||||
<Input
|
||||
autoComplete="new-password"
|
||||
id="confirm"
|
||||
onChange={(e) => setConfirm(e.target.value)}
|
||||
placeholder="••••••••••••"
|
||||
required
|
||||
type="password"
|
||||
value={confirm}
|
||||
/>
|
||||
</Field>
|
||||
<Button className="mt-1 w-full" disabled={submitting} type="submit">
|
||||
{submitting ? "Creating account…" : "Create account"}
|
||||
</Button>
|
||||
</form>
|
||||
</AuthShell>
|
||||
<AuthLayout>
|
||||
<SignupForm />
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,51 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { motion, type Variants } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const container: Variants = {
|
||||
hidden: {},
|
||||
show: { transition: { staggerChildren: 0.09, delayChildren: 0.18 } },
|
||||
};
|
||||
|
||||
const item: Variants = {
|
||||
hidden: { opacity: 0, y: 16 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { type: "spring", stiffness: 150, damping: 18 },
|
||||
},
|
||||
};
|
||||
|
||||
// Slowly drifting colored blobs behind everything.
|
||||
function Aurora() {
|
||||
// temetro logo + wordmark, centered.
|
||||
export function AuthBrand() {
|
||||
return (
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-0 overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ x: [0, 60, 0], y: [0, 40, 0], scale: [1, 1.15, 1] }}
|
||||
className="absolute -top-40 -left-32 size-[34rem] rounded-full bg-primary/30 blur-[140px]"
|
||||
transition={{ duration: 14, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
|
||||
/>
|
||||
<motion.div
|
||||
animate={{ x: [0, -50, 0], y: [0, -30, 0], scale: [1, 1.2, 1] }}
|
||||
className="absolute top-1/4 -right-40 size-[32rem] rounded-full bg-[oklch(0.62_0.16_305)]/25 blur-[140px]"
|
||||
transition={{ duration: 18, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
|
||||
/>
|
||||
<motion.div
|
||||
animate={{ x: [0, 40, 0], y: [0, -40, 0], scale: [1, 1.1, 1] }}
|
||||
className="absolute -bottom-40 left-1/3 size-[30rem] rounded-full bg-[oklch(0.7_0.15_200)]/20 blur-[150px]"
|
||||
transition={{ duration: 16, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
|
||||
<div className="flex items-center justify-center gap-2.5">
|
||||
<Image
|
||||
alt="temetro"
|
||||
className="size-8"
|
||||
height={32}
|
||||
priority
|
||||
src="/temetro-logo.png"
|
||||
width={32}
|
||||
/>
|
||||
<span className="text-lg font-semibold tracking-tight">temetro</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Centered page wrapper for every auth screen: brand on top, content below.
|
||||
export function AuthLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="flex min-h-full w-full items-center justify-center px-4 py-12">
|
||||
<div className="flex w-full max-w-sm flex-col gap-6">
|
||||
<AuthBrand />
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Card-based shell for the non-block auth pages (onboarding, verify, reset,
|
||||
// forgot-password, accept-invite).
|
||||
export function AuthShell({
|
||||
title,
|
||||
subtitle,
|
||||
@@ -58,100 +53,18 @@ export function AuthShell({
|
||||
footer?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="relative flex min-h-full w-full items-center justify-center overflow-hidden px-4 py-12">
|
||||
<Aurora />
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-0 opacity-[0.04]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px)",
|
||||
backgroundSize: "48px 48px",
|
||||
maskImage:
|
||||
"radial-gradient(ellipse at center, black 20%, transparent 70%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
className="relative w-full max-w-md"
|
||||
initial={{ opacity: 0, y: 28, scale: 0.96 }}
|
||||
transition={{ type: "spring", stiffness: 120, damping: 18 }}
|
||||
>
|
||||
{/* rotating gradient halo */}
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
aria-hidden
|
||||
className="absolute -inset-[2px] rounded-[30px] opacity-70 blur-[3px]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"conic-gradient(from 0deg, var(--primary), transparent 25%, transparent 50%, oklch(0.62 0.16 305), transparent 75%, var(--primary))",
|
||||
}}
|
||||
transition={{ duration: 10, repeat: Number.POSITIVE_INFINITY, ease: "linear" }}
|
||||
/>
|
||||
|
||||
{/* the card */}
|
||||
<motion.div
|
||||
animate="show"
|
||||
className="relative overflow-hidden rounded-[28px] border border-white/10 bg-card/85 p-8 shadow-2xl backdrop-blur-xl"
|
||||
initial="hidden"
|
||||
variants={container}
|
||||
>
|
||||
{/* top edge highlight */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/25 to-transparent"
|
||||
/>
|
||||
{/* one-time shimmer sweep on mount */}
|
||||
<motion.div
|
||||
animate={{ x: "130%" }}
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-y-0 -inset-x-1"
|
||||
initial={{ x: "-130%" }}
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.07) 50%, transparent 58%)",
|
||||
}}
|
||||
transition={{ duration: 1.1, delay: 0.45, ease: "easeInOut" }}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
className="mb-6 flex flex-col items-center text-center"
|
||||
variants={item}
|
||||
>
|
||||
<motion.div
|
||||
animate={{ y: [0, -6, 0] }}
|
||||
className="mb-4 flex size-12 items-center justify-center rounded-2xl bg-primary/15 ring-1 ring-primary/30 ring-inset"
|
||||
transition={{ duration: 4, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
|
||||
>
|
||||
<Image
|
||||
alt="temetro"
|
||||
className="size-7"
|
||||
height={28}
|
||||
priority
|
||||
src="/temetro-logo.png"
|
||||
width={28}
|
||||
/>
|
||||
</motion.div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
|
||||
{subtitle && (
|
||||
<p className="mt-2 text-sm text-muted-foreground">{subtitle}</p>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={item}>{children}</motion.div>
|
||||
|
||||
{footer && (
|
||||
<motion.div
|
||||
className="mt-6 text-center text-sm text-muted-foreground"
|
||||
variants={item}
|
||||
>
|
||||
{footer}
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<AuthLayout>
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-xl">{title}</CardTitle>
|
||||
{subtitle && <CardDescription>{subtitle}</CardDescription>}
|
||||
</CardHeader>
|
||||
<CardContent>{children}</CardContent>
|
||||
</Card>
|
||||
{footer && (
|
||||
<div className="text-center text-sm text-muted-foreground">{footer}</div>
|
||||
)}
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { type FormEvent, useState } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Field,
|
||||
FieldDescription,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
} from "@/components/ui/field";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function LoginForm({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
const router = useRouter();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const onSubmit = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (submitting) return;
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
const { error: err } = await authClient.signIn.email({
|
||||
email: email.trim(),
|
||||
password,
|
||||
callbackURL: `${window.location.origin}/`,
|
||||
});
|
||||
|
||||
if (err) {
|
||||
setError(
|
||||
err.message ??
|
||||
"Could not sign in. Check your email and password and try again."
|
||||
);
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-6", className)} {...props}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Welcome back</CardTitle>
|
||||
<CardDescription>Sign in to your clinician account</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={onSubmit}>
|
||||
<FieldGroup>
|
||||
{error && (
|
||||
<p className="rounded-2xl bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
<Field>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input
|
||||
autoComplete="email"
|
||||
id="email"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@clinic.org"
|
||||
required
|
||||
type="email"
|
||||
value={email}
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<div className="flex items-center">
|
||||
<FieldLabel htmlFor="password">Password</FieldLabel>
|
||||
<Link
|
||||
className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
|
||||
href="/forgot-password"
|
||||
>
|
||||
Forgot your password?
|
||||
</Link>
|
||||
</div>
|
||||
<Input
|
||||
autoComplete="current-password"
|
||||
id="password"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
type="password"
|
||||
value={password}
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<Button disabled={submitting} type="submit">
|
||||
{submitting ? "Signing in…" : "Sign in"}
|
||||
</Button>
|
||||
<FieldDescription className="text-center">
|
||||
Don't have an account?{" "}
|
||||
<Link href="/signup">Sign up</Link>
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { type FormEvent, useState } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Field,
|
||||
FieldDescription,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
} from "@/components/ui/field";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const MIN_PASSWORD = 12;
|
||||
|
||||
export function SignupForm({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
const router = useRouter();
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirm, setConfirm] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const onSubmit = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (submitting) return;
|
||||
setError(null);
|
||||
|
||||
if (password.length < MIN_PASSWORD) {
|
||||
setError(`Password must be at least ${MIN_PASSWORD} characters.`);
|
||||
return;
|
||||
}
|
||||
if (password !== confirm) {
|
||||
setError("Passwords do not match.");
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
const { error: err } = await authClient.signUp.email({
|
||||
name: name.trim(),
|
||||
email: email.trim(),
|
||||
password,
|
||||
callbackURL: `${window.location.origin}/verify-email`,
|
||||
});
|
||||
|
||||
if (err) {
|
||||
setError(err.message ?? "Could not create your account.");
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
// Verification isn't enforced yet — the user is signed in, so go to
|
||||
// clinic onboarding.
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-6", className)} {...props}>
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-xl">Create your account</CardTitle>
|
||||
<CardDescription>
|
||||
Start using temetro in your clinic
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={onSubmit}>
|
||||
<FieldGroup>
|
||||
{error && (
|
||||
<p className="rounded-2xl bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
<Field>
|
||||
<FieldLabel htmlFor="name">Full name</FieldLabel>
|
||||
<Input
|
||||
autoComplete="name"
|
||||
id="name"
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Dr. Jane Okafor"
|
||||
required
|
||||
type="text"
|
||||
value={name}
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input
|
||||
autoComplete="email"
|
||||
id="email"
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@clinic.org"
|
||||
required
|
||||
type="email"
|
||||
value={email}
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<Field className="grid grid-cols-2 gap-4">
|
||||
<Field>
|
||||
<FieldLabel htmlFor="password">Password</FieldLabel>
|
||||
<Input
|
||||
autoComplete="new-password"
|
||||
id="password"
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
type="password"
|
||||
value={password}
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="confirm-password">
|
||||
Confirm password
|
||||
</FieldLabel>
|
||||
<Input
|
||||
autoComplete="new-password"
|
||||
id="confirm-password"
|
||||
onChange={(e) => setConfirm(e.target.value)}
|
||||
required
|
||||
type="password"
|
||||
value={confirm}
|
||||
/>
|
||||
</Field>
|
||||
</Field>
|
||||
<FieldDescription>
|
||||
Must be at least {MIN_PASSWORD} characters long.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
<Field>
|
||||
<Button disabled={submitting} type="submit">
|
||||
{submitting ? "Creating account…" : "Create account"}
|
||||
</Button>
|
||||
<FieldDescription className="text-center">
|
||||
Already have an account? <Link href="/login">Sign in</Link>
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,238 @@
|
||||
"use client"
|
||||
|
||||
import { useMemo } from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
|
||||
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
|
||||
return (
|
||||
<fieldset
|
||||
data-slot="field-set"
|
||||
className={cn(
|
||||
"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldLegend({
|
||||
className,
|
||||
variant = "legend",
|
||||
...props
|
||||
}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
|
||||
return (
|
||||
<legend
|
||||
data-slot="field-legend"
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-group"
|
||||
className={cn(
|
||||
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const fieldVariants = cva(
|
||||
"group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
|
||||
{
|
||||
variants: {
|
||||
orientation: {
|
||||
vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
|
||||
horizontal:
|
||||
"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
responsive:
|
||||
"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
orientation: "vertical",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Field({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="field"
|
||||
data-orientation={orientation}
|
||||
className={cn(fieldVariants({ orientation }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-content"
|
||||
className={cn(
|
||||
"group/field-content flex flex-1 flex-col gap-1 leading-snug",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Label>) {
|
||||
return (
|
||||
<Label
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-input/30 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4",
|
||||
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="field-description"
|
||||
className={cn(
|
||||
"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
|
||||
"last:mt-0 nth-last-2:-mt-1",
|
||||
"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldSeparator({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
children?: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-separator"
|
||||
data-content={!!children}
|
||||
className={cn(
|
||||
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<Separator className="absolute inset-0 top-1/2" />
|
||||
{children && (
|
||||
<span
|
||||
className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
|
||||
data-slot="field-separator-content"
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldError({
|
||||
className,
|
||||
children,
|
||||
errors,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
errors?: Array<{ message?: string } | undefined>
|
||||
}) {
|
||||
const content = useMemo(() => {
|
||||
if (children) {
|
||||
return children
|
||||
}
|
||||
|
||||
if (!errors?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
const uniqueErrors = [
|
||||
...new Map(errors.map((error) => [error?.message, error])).values(),
|
||||
]
|
||||
|
||||
if (uniqueErrors?.length == 1) {
|
||||
return uniqueErrors[0]?.message
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="ml-4 flex list-disc flex-col gap-1">
|
||||
{uniqueErrors.map(
|
||||
(error, index) =>
|
||||
error?.message && <li key={index}>{error.message}</li>
|
||||
)}
|
||||
</ul>
|
||||
)
|
||||
}, [children, errors])
|
||||
|
||||
if (!content) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
data-slot="field-error"
|
||||
className={cn("text-sm font-normal text-destructive", className)}
|
||||
{...props}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldDescription,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLegend,
|
||||
FieldSeparator,
|
||||
FieldSet,
|
||||
FieldContent,
|
||||
FieldTitle,
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({ className, ...props }: React.ComponentProps<"label">) {
|
||||
return (
|
||||
<label
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
@@ -3,12 +3,11 @@ import type { NextConfig } from "next";
|
||||
const nextConfig: NextConfig = {
|
||||
// Emit a self-contained server build for a small Docker image.
|
||||
output: "standalone",
|
||||
// The vendored components/ai-elements/* library has pre-existing type/lint
|
||||
// drift against this Base UI version (see CLAUDE.md), which would otherwise
|
||||
// fail `next build`. Skip those gates so production/Docker builds succeed;
|
||||
// app code is still type-checked separately via `tsc --noEmit`.
|
||||
// The vendored components/ai-elements/* library has pre-existing type drift
|
||||
// against this Base UI version (see CLAUDE.md), which would otherwise fail
|
||||
// `next build`. Skip the type gate so production/Docker builds succeed; app
|
||||
// code is still type-checked separately via `tsc --noEmit`.
|
||||
typescript: { ignoreBuildErrors: true },
|
||||
eslint: { ignoreDuringBuilds: true },
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
Reference in New Issue
Block a user