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

app/(auth)/register/page.tsx

@@ -1,16 +1,17 @@
 "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 { Checkbox } from "@/components/ui/checkbox"
+import { IconInput } from "@/components/ui/icon-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 { Eye, EyeOff, Lock, Phone, User } from "lucide-react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
-import { useForm } from "react-hook-form"
+import { useState } from "react"
+import { Controller, useForm } from "react-hook-form"
 import { z } from "zod"
 
 const registerSchema = z
@@ -19,21 +20,30 @@ const registerSchema = z
     phone: z.string().min(11, "请输入正确的手机号"),
     password: z.string().min(6, "密码至少6位"),
     confirmPassword: z.string(),
+    agreeTerms: z.boolean(),
   })
   .refine((data) => data.password === data.confirmPassword, {
     message: "两次密码不一致",
     path: ["confirmPassword"],
   })
+  .refine((data) => data.agreeTerms, {
+    message: "请同意用户协议和隐私政策",
+    path: ["agreeTerms"],
+  })
 
 export default function RegisterPage() {
   const router = useRouter()
   const { login } = useAuthStore()
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
   const {
     register,
     handleSubmit,
+    control,
     formState: { errors, isSubmitting },
   } = useForm({
     resolver: standardSchemaResolver(registerSchema),
+    defaultValues: { agreeTerms: false },
   })
 
   const onSubmit = async (_data: z.infer<typeof registerSchema>) => {
@@ -43,66 +53,115 @@ export default function RegisterPage() {
   }
 
   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 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="nickname">昵称</Label>
+          <IconInput
+            id="nickname"
+            icon={<User />}
+            placeholder="输入你的昵称"
+            {...register("nickname")}
+          />
+          {errors.nickname && <p className="text-xs text-destructive">{errors.nickname.message}</p>}
         </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 className="space-y-1.5">
+          <Label htmlFor="phone">手机号</Label>
+          <IconInput id="phone" icon={<Phone />} placeholder="输入手机号" {...register("phone")} />
+          {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="password">密码</Label>
+          <IconInput
+            id="password"
+            icon={<Lock />}
+            type={showPassword ? "text" : "password"}
+            placeholder="设置密码 (至少6位)"
+            rightElement={
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="text-muted-foreground hover:text-foreground"
+                tabIndex={-1}
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            }
+            {...register("password")}
+          />
+          {errors.password && <p className="text-xs text-destructive">{errors.password.message}</p>}
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="confirmPassword">确认密码</Label>
+          <IconInput
+            id="confirmPassword"
+            icon={<Lock />}
+            type={showConfirmPassword ? "text" : "password"}
+            placeholder="再次输入密码"
+            rightElement={
+              <button
+                type="button"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                className="text-muted-foreground hover:text-foreground"
+                tabIndex={-1}
+              >
+                {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            }
+            {...register("confirmPassword")}
+          />
+          {errors.confirmPassword && (
+            <p className="text-xs text-destructive">{errors.confirmPassword.message}</p>
+          )}
+        </div>
+
+        <div className="flex items-start gap-2 pt-1">
+          <Controller
+            name="agreeTerms"
+            control={control}
+            render={({ field }) => (
+              <Checkbox
+                id="terms"
+                checked={field.value}
+                onCheckedChange={(v) => field.onChange(v === true)}
+                className="mt-0.5"
+              />
             )}
-          </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>
+          />
+          <label htmlFor="terms" className="text-xs leading-relaxed text-muted-foreground">
+            我已阅读并同意{" "}
+            <Link href="/terms" className="text-primary hover:underline">
+              用户协议
+            </Link>{" "}
+            和{" "}
+            <Link href="/privacy" className="text-primary hover:underline">
+              隐私政策
+            </Link>
+          </label>
+        </div>
+        {errors.agreeTerms && (
+          <p className="text-xs text-destructive">{errors.agreeTerms.message}</p>
+        )}
+
+        <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>
+    </>
   )
 }