zetaloop
109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
"use client"
|
||
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { getCurrentUserForLogin } from "@/lib/api"
|
||
import { useAuthStore } from "@/store/auth"
|
||
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
|
||
import { Gamepad2 } from "lucide-react"
|
||
import Link from "next/link"
|
||
import { useRouter } from "next/navigation"
|
||
import { useForm } from "react-hook-form"
|
||
import { z } from "zod"
|
||
|
||
const registerSchema = z
|
||
.object({
|
||
nickname: z.string().min(2, "昵称至少2个字符"),
|
||
phone: z.string().min(11, "请输入正确的手机号"),
|
||
password: z.string().min(6, "密码至少6位"),
|
||
confirmPassword: z.string(),
|
||
})
|
||
.refine((data) => data.password === data.confirmPassword, {
|
||
message: "两次密码不一致",
|
||
path: ["confirmPassword"],
|
||
})
|
||
|
||
export default function RegisterPage() {
|
||
const router = useRouter()
|
||
const { login } = useAuthStore()
|
||
const {
|
||
register,
|
||
handleSubmit,
|
||
formState: { errors, isSubmitting },
|
||
} = useForm({
|
||
resolver: standardSchemaResolver(registerSchema),
|
||
})
|
||
|
||
const onSubmit = async (_data: z.infer<typeof registerSchema>) => {
|
||
await new Promise((r) => setTimeout(r, 500))
|
||
login(getCurrentUserForLogin(), ["consumer"])
|
||
router.push("/")
|
||
}
|
||
|
||
return (
|
||
<Card className="hover:shadow-[var(--shadow-card)]">
|
||
<CardHeader className="space-y-2">
|
||
<div className="flex items-center gap-2 md:hidden mb-4">
|
||
<div className="rounded-lg bg-primary/10 p-2">
|
||
<Gamepad2 className="h-6 w-6 text-primary" />
|
||
</div>
|
||
<span className="text-xl font-bold">聚玩</span>
|
||
</div>
|
||
<CardTitle className="text-2xl font-bold tracking-tight">创建账号</CardTitle>
|
||
<CardDescription>创建你的聚玩账号</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="nickname">昵称</Label>
|
||
<Input id="nickname" placeholder="请输入昵称" {...register("nickname")} />
|
||
{errors.nickname && (
|
||
<p className="text-xs text-destructive">{errors.nickname.message}</p>
|
||
)}
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="phone">手机号</Label>
|
||
<Input id="phone" placeholder="请输入手机号" {...register("phone")} />
|
||
{errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="password">密码</Label>
|
||
<Input
|
||
id="password"
|
||
type="password"
|
||
placeholder="请输入密码"
|
||
{...register("password")}
|
||
/>
|
||
{errors.password && (
|
||
<p className="text-xs text-destructive">{errors.password.message}</p>
|
||
)}
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="confirmPassword">确认密码</Label>
|
||
<Input
|
||
id="confirmPassword"
|
||
type="password"
|
||
placeholder="请再次输入密码"
|
||
{...register("confirmPassword")}
|
||
/>
|
||
{errors.confirmPassword && (
|
||
<p className="text-xs text-destructive">{errors.confirmPassword.message}</p>
|
||
)}
|
||
</div>
|
||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||
{isSubmitting ? "注册中..." : "注册"}
|
||
</Button>
|
||
</form>
|
||
<p className="text-center text-sm text-muted-foreground">
|
||
已有账号？{" "}
|
||
<Link href="/login" className="text-primary underline-offset-4 hover:underline">
|
||
立即登录
|
||
</Link>
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
)
|
||
}
|