320 lines
13 KiB
TypeScript
320 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { useActionState } from "react";
|
|
import {
|
|
ArrowLeftIcon,
|
|
CheckCircle2Icon,
|
|
KeyRoundIcon,
|
|
Loader2Icon,
|
|
LockIcon,
|
|
MailIcon,
|
|
SparklesIcon,
|
|
UserIcon,
|
|
} from "lucide-react";
|
|
|
|
import { registerAction, type RegisterState } from "@/lib/actions/auth";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { FluxentLogo } from "@/components/fluxent-logo";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
|
|
const initialState: RegisterState = {};
|
|
|
|
export function RegisterForm() {
|
|
const router = useRouter();
|
|
const [state, formAction, isPending] = useActionState(
|
|
registerAction,
|
|
initialState
|
|
);
|
|
|
|
const [password, setPassword] = React.useState("");
|
|
const [confirmPassword, setConfirmPassword] = React.useState("");
|
|
|
|
// 当注册成功时，优雅倒计时或自动跳转
|
|
React.useEffect(() => {
|
|
if (state?.success) {
|
|
const timer = setTimeout(() => {
|
|
router.push("/login?registered=1");
|
|
}, 1500);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [state?.success, router]);
|
|
|
|
// 密码复杂度提示计算
|
|
const hasMinLen = password.length >= 8;
|
|
const passwordsMatch = Boolean(
|
|
password && confirmPassword && password === confirmPassword
|
|
);
|
|
|
|
return (
|
|
<div className="relative flex min-h-svh flex-col justify-between overflow-hidden bg-background">
|
|
{/* Decorative ambient gradients */}
|
|
<div className="pointer-events-none absolute -top-40 -left-40 size-[32rem] rounded-full bg-primary/5 blur-3xl" />
|
|
<div className="pointer-events-none absolute -bottom-40 -right-40 size-[34rem] rounded-full bg-primary/5 blur-3xl" />
|
|
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.08),rgba(255,255,255,0))]" />
|
|
|
|
{/* Header */}
|
|
<header className="relative z-10 flex h-16 w-full items-center justify-between px-6 md:px-12">
|
|
<Link
|
|
href="/"
|
|
className="group flex items-center gap-2.5 outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<FluxentLogo size={32} />
|
|
<div className="flex flex-col">
|
|
<span className="font-heading text-base font-semibold tracking-tight">
|
|
Fluxent
|
|
</span>
|
|
<span className="text-[10px] tracking-wider text-muted-foreground uppercase">
|
|
Financial OS
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
<div className="flex items-center gap-2">
|
|
<ThemeToggle />
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Card */}
|
|
<main className="relative z-10 flex flex-1 items-center justify-center px-4 py-8 sm:px-6">
|
|
<div className="w-full max-w-md">
|
|
<Card className="border-border/80 shadow-lg shadow-black/5 dark:shadow-black/25">
|
|
<CardHeader className="gap-1.5 pb-4">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-xl font-bold tracking-tight">
|
|
开启您的 Fluxent 空间
|
|
</CardTitle>
|
|
<div className="flex size-7 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
|
<SparklesIcon className="size-4" />
|
|
</div>
|
|
</div>
|
|
<CardDescription className="text-xs">
|
|
创建主账户，开启多币种资产追踪与专业级记账
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent className="flex flex-col gap-4">
|
|
{/* 注册成功反馈 */}
|
|
{state?.success ? (
|
|
<div className="flex flex-col items-center justify-center gap-3 py-6 text-center">
|
|
<div className="flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary">
|
|
<CheckCircle2Icon className="size-6" />
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<h3 className="text-base font-semibold text-foreground">
|
|
账户已成功创建！
|
|
</h3>
|
|
<p className="text-xs text-muted-foreground">
|
|
系统正在为您准备控制台，即将自动跳转至登录页...
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="mt-2 text-xs"
|
|
onClick={() => router.push("/login?registered=1")}
|
|
>
|
|
立即前往登录
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* 全局错误提示 */}
|
|
{state?.error && (
|
|
<Alert variant="destructive">
|
|
<AlertDescription className="text-xs">
|
|
{state.error}
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
<form action={formAction} className="flex flex-col gap-3.5">
|
|
{/* 姓名 / 昵称 */}
|
|
<div className="flex flex-col gap-1.5">
|
|
<Label htmlFor="name" className="text-xs font-medium">
|
|
姓名 / 昵称
|
|
</Label>
|
|
<div className="relative flex items-center">
|
|
<Input
|
|
id="name"
|
|
name="name"
|
|
type="text"
|
|
autoComplete="name"
|
|
placeholder="例如：Alex Chen"
|
|
required
|
|
disabled={isPending}
|
|
className="pl-8"
|
|
/>
|
|
<UserIcon className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
|
|
</div>
|
|
{state?.fieldErrors?.name && (
|
|
<p className="text-[11px] text-destructive">
|
|
{state.fieldErrors.name[0]}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 邮箱 */}
|
|
<div className="flex flex-col gap-1.5">
|
|
<Label htmlFor="email" className="text-xs font-medium">
|
|
工作或个人邮箱
|
|
</Label>
|
|
<div className="relative flex items-center">
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
placeholder="alex@example.com"
|
|
required
|
|
disabled={isPending}
|
|
className="pl-8"
|
|
/>
|
|
<MailIcon className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
|
|
</div>
|
|
{state?.fieldErrors?.email && (
|
|
<p className="text-[11px] text-destructive">
|
|
{state.fieldErrors.email[0]}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 密码 */}
|
|
<div className="flex flex-col gap-1.5">
|
|
<Label htmlFor="password" className="text-xs font-medium">
|
|
登录密码
|
|
</Label>
|
|
<div className="relative flex items-center">
|
|
<Input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
placeholder="至少 8 个字符"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
disabled={isPending}
|
|
className="pl-8"
|
|
/>
|
|
<LockIcon className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
|
|
</div>
|
|
{state?.fieldErrors?.password && (
|
|
<p className="text-[11px] text-destructive">
|
|
{state.fieldErrors.password[0]}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 确认密码 */}
|
|
<div className="flex flex-col gap-1.5">
|
|
<Label
|
|
htmlFor="confirmPassword"
|
|
className="text-xs font-medium"
|
|
>
|
|
再次确认密码
|
|
</Label>
|
|
<div className="relative flex items-center">
|
|
<Input
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
type="password"
|
|
autoComplete="new-password"
|
|
placeholder="重复输入上方设置的密码"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
required
|
|
disabled={isPending}
|
|
className="pl-8"
|
|
/>
|
|
<LockIcon className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
|
|
</div>
|
|
{state?.fieldErrors?.confirmPassword && (
|
|
<p className="text-[11px] text-destructive">
|
|
{state.fieldErrors.confirmPassword[0]}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 密码强度/匹配指引 */}
|
|
<div className="flex flex-col gap-1 rounded-lg border border-border/40 bg-muted/30 p-2.5 text-[11px] text-muted-foreground">
|
|
<div className="flex items-center gap-1.5">
|
|
<span
|
|
className={`size-1.5 rounded-full ${
|
|
hasMinLen ? "bg-primary" : "bg-muted-foreground/40"
|
|
}`}
|
|
/>
|
|
<span>密码长度不少于 8 位</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<span
|
|
className={`size-1.5 rounded-full ${
|
|
passwordsMatch
|
|
? "bg-primary"
|
|
: "bg-muted-foreground/40"
|
|
}`}
|
|
/>
|
|
<span>两次密码输入保持一致</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
size="lg"
|
|
disabled={isPending}
|
|
className="mt-1 w-full justify-center text-xs font-medium"
|
|
>
|
|
{isPending ? (
|
|
<Loader2Icon
|
|
data-icon="inline-start"
|
|
className="animate-spin"
|
|
/>
|
|
) : (
|
|
<KeyRoundIcon data-icon="inline-start" />
|
|
)}
|
|
{isPending ? "正在建立账户..." : "注册并立即开始"}
|
|
</Button>
|
|
</form>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
|
|
<CardFooter className="justify-center border-t border-border/50 py-3 text-xs text-muted-foreground">
|
|
<p>
|
|
已经拥有 Fluxent 账号？{" "}
|
|
<Link
|
|
href="/login"
|
|
className="font-medium text-foreground underline underline-offset-4 hover:text-primary"
|
|
>
|
|
<ArrowLeftIcon
|
|
data-icon="inline-start"
|
|
className="inline size-3 mr-0.5"
|
|
/>
|
|
返回直接登录
|
|
</Link>
|
|
</p>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="relative z-10 flex h-12 items-center justify-center border-t border-border/40 px-6 text-center text-[11px] text-muted-foreground">
|
|
<span>© {new Date().getFullYear()} Fluxent Financial. 保留所有权利。</span>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|