mirror of
https://github.com/temetro/temetro.git
synced 2026-09-04 14:55:28 +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 { AuthLayout } from "@/components/auth/auth-ui";
|
||||||
|
import { LoginForm } from "@/components/login-form";
|
||||||
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";
|
|
||||||
|
|
||||||
export default function LoginPage() {
|
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 (
|
return (
|
||||||
<AuthShell
|
<AuthLayout>
|
||||||
footer={
|
<LoginForm />
|
||||||
<>
|
</AuthLayout>
|
||||||
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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,124 +1,10 @@
|
|||||||
"use client";
|
import { AuthLayout } from "@/components/auth/auth-ui";
|
||||||
|
import { SignupForm } from "@/components/signup-form";
|
||||||
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;
|
|
||||||
|
|
||||||
export default function SignupPage() {
|
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 (
|
return (
|
||||||
<AuthShell
|
<AuthLayout>
|
||||||
footer={
|
<SignupForm />
|
||||||
<>
|
</AuthLayout>
|
||||||
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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,51 +1,46 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { motion, type Variants } from "framer-motion";
|
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import type { ReactNode } from "react";
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
const container: Variants = {
|
// temetro logo + wordmark, centered.
|
||||||
hidden: {},
|
export function AuthBrand() {
|
||||||
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() {
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="flex items-center justify-center gap-2.5">
|
||||||
aria-hidden
|
<Image
|
||||||
className="pointer-events-none absolute inset-0 overflow-hidden"
|
alt="temetro"
|
||||||
>
|
className="size-8"
|
||||||
<motion.div
|
height={32}
|
||||||
animate={{ x: [0, 60, 0], y: [0, 40, 0], scale: [1, 1.15, 1] }}
|
priority
|
||||||
className="absolute -top-40 -left-32 size-[34rem] rounded-full bg-primary/30 blur-[140px]"
|
src="/temetro-logo.png"
|
||||||
transition={{ duration: 14, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
|
width={32}
|
||||||
/>
|
|
||||||
<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" }}
|
|
||||||
/>
|
/>
|
||||||
|
<span className="text-lg font-semibold tracking-tight">temetro</span>
|
||||||
</div>
|
</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({
|
export function AuthShell({
|
||||||
title,
|
title,
|
||||||
subtitle,
|
subtitle,
|
||||||
@@ -58,100 +53,18 @@ export function AuthShell({
|
|||||||
footer?: ReactNode;
|
footer?: ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="relative flex min-h-full w-full items-center justify-center overflow-hidden px-4 py-12">
|
<AuthLayout>
|
||||||
<Aurora />
|
<Card>
|
||||||
<div
|
<CardHeader className="text-center">
|
||||||
aria-hidden
|
<CardTitle className="text-xl">{title}</CardTitle>
|
||||||
className="pointer-events-none absolute inset-0 opacity-[0.04]"
|
{subtitle && <CardDescription>{subtitle}</CardDescription>}
|
||||||
style={{
|
</CardHeader>
|
||||||
backgroundImage:
|
<CardContent>{children}</CardContent>
|
||||||
"linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px)",
|
</Card>
|
||||||
backgroundSize: "48px 48px",
|
{footer && (
|
||||||
maskImage:
|
<div className="text-center text-sm text-muted-foreground">{footer}</div>
|
||||||
"radial-gradient(ellipse at center, black 20%, transparent 70%)",
|
)}
|
||||||
}}
|
</AuthLayout>
|
||||||
/>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 = {
|
const nextConfig: NextConfig = {
|
||||||
// Emit a self-contained server build for a small Docker image.
|
// Emit a self-contained server build for a small Docker image.
|
||||||
output: "standalone",
|
output: "standalone",
|
||||||
// The vendored components/ai-elements/* library has pre-existing type/lint
|
// The vendored components/ai-elements/* library has pre-existing type drift
|
||||||
// drift against this Base UI version (see CLAUDE.md), which would otherwise
|
// against this Base UI version (see CLAUDE.md), which would otherwise fail
|
||||||
// fail `next build`. Skip those gates so production/Docker builds succeed;
|
// `next build`. Skip the type gate so production/Docker builds succeed; app
|
||||||
// app code is still type-checked separately via `tsc --noEmit`.
|
// code is still type-checked separately via `tsc --noEmit`.
|
||||||
typescript: { ignoreBuildErrors: true },
|
typescript: { ignoreBuildErrors: true },
|
||||||
eslint: { ignoreDuringBuilds: true },
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default nextConfig;
|
export default nextConfig;
|
||||||
|
|||||||
Reference in New Issue
Block a user