feat(auth): redesign auth pages with brand panel, IconInput and forgot-password

2026-02-25 15:49:37 +08:00
parent 7c4c2798a7
commit 5812b7b0ed
6 changed files with 344 additions and 122 deletions
@@ -0,0 +1,64 @@
+"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>
+    </>
+  )
+}