zetaloop
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
"use client"
|
||
|
||
import { Button } from "@/components/ui/button"
|
||
import { IconInput } from "@/components/ui/icon-input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { notifySuccess } from "@/lib/toast"
|
||
import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
|
||
import { Mail } from "lucide-react"
|
||
import Link from "next/link"
|
||
import { useForm } from "react-hook-form"
|
||
import { z } from "zod"
|
||
|
||
const forgotSchema = z.object({
|
||
email: z.string().email("请输入正确的邮箱地址"),
|
||
})
|
||
|
||
export default function ForgotPasswordPage() {
|
||
const {
|
||
register,
|
||
handleSubmit,
|
||
formState: { errors, isSubmitting },
|
||
} = useForm({
|
||
resolver: standardSchemaResolver(forgotSchema),
|
||
})
|
||
|
||
const onSubmit = async (_data: z.infer<typeof forgotSchema>) => {
|
||
await new Promise((r) => setTimeout(r, 500))
|
||
notifySuccess("重置链接已发送到你的邮箱")
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<div className="mb-8">
|
||
<h2 className="text-2xl font-bold">找回密码</h2>
|
||
<p className="mt-2 text-sm text-muted-foreground">输入注册邮箱，我们将发送重置链接</p>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||
<div className="space-y-1.5">
|
||
<Label htmlFor="email">邮箱地址</Label>
|
||
<IconInput
|
||
id="email"
|
||
icon={<Mail />}
|
||
type="email"
|
||
placeholder="输入注册邮箱"
|
||
{...register("email")}
|
||
/>
|
||
{errors.email && <p className="text-xs text-destructive">{errors.email.message}</p>}
|
||
</div>
|
||
|
||
<Button type="submit" className="mt-2 w-full" size="lg" disabled={isSubmitting}>
|
||
{isSubmitting ? "发送中..." : "发送重置链接"}
|
||
</Button>
|
||
</form>
|
||
|
||
<p className="mt-8 text-center text-sm text-muted-foreground">
|
||
想起密码了？{" "}
|
||
<Link href="/login" className="font-medium text-primary hover:underline">
|
||
返回登录
|
||
</Link>
|
||
</p>
|
||
</>
|
||
)
|
||
}
|