style(auth): apply proto2 surfaces
This commit is contained in:
zetaloop
@@ -20,7 +20,7 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 flex items-center justify-center p-6 bg-muted/30 md:bg-background">
|
<div className="flex-1 flex items-center justify-center p-6 bg-muted/30">
|
||||||
<div className="w-full max-w-md">{children}</div>
|
<div className="w-full max-w-md">{children}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+30
-27
@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation"
|
|||||||
import { useForm } from "react-hook-form"
|
import { useForm } from "react-hook-form"
|
||||||
import { z } from "zod"
|
import { z } from "zod"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
import { Input } from "@/components/ui/input"
|
import { Input } from "@/components/ui/input"
|
||||||
import { Label } from "@/components/ui/label"
|
import { Label } from "@/components/ui/label"
|
||||||
import { getCurrentUserForLogin } from "@/lib/api"
|
import { getCurrentUserForLogin } from "@/lib/api"
|
||||||
@@ -35,38 +36,40 @@ export default function LoginPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-8 bg-background p-8 rounded-xl border shadow-sm md:border-0 md:shadow-none md:p-0">
|
<Card className="hover:shadow-[var(--shadow-card)]">
|
||||||
<div className="flex flex-col gap-2">
|
<CardHeader className="space-y-2">
|
||||||
<div className="flex items-center gap-2 md:hidden mb-4">
|
<div className="flex items-center gap-2 md:hidden mb-4">
|
||||||
<div className="rounded-lg bg-primary/10 p-2">
|
<div className="rounded-lg bg-primary/10 p-2">
|
||||||
<Gamepad2 className="h-6 w-6 text-primary" />
|
<Gamepad2 className="h-6 w-6 text-primary" />
|
||||||
</div>
|
</div>
|
||||||
<span className="text-xl font-bold">聚玩</span>
|
<span className="text-xl font-bold">聚玩</span>
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-2xl font-bold tracking-tight">欢迎回来</h1>
|
<CardTitle className="text-2xl font-bold tracking-tight">欢迎回来</CardTitle>
|
||||||
<p className="text-sm text-muted-foreground">登录你的账号以继续</p>
|
<CardDescription>登录你的账号以继续</CardDescription>
|
||||||
</div>
|
</CardHeader>
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
<CardContent className="space-y-6">
|
||||||
<div className="space-y-2">
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||||
<Label htmlFor="phone">手机号</Label>
|
<div className="space-y-2">
|
||||||
<Input id="phone" placeholder="请输入手机号" {...register("phone")} />
|
<Label htmlFor="phone">手机号</Label>
|
||||||
{errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
|
<Input id="phone" placeholder="请输入手机号" {...register("phone")} />
|
||||||
</div>
|
{errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
|
||||||
<div className="space-y-2">
|
</div>
|
||||||
<Label htmlFor="password">密码</Label>
|
<div className="space-y-2">
|
||||||
<Input id="password" type="password" placeholder="请输入密码" {...register("password")} />
|
<Label htmlFor="password">密码</Label>
|
||||||
{errors.password && <p className="text-xs text-destructive">{errors.password.message}</p>}
|
<Input id="password" type="password" placeholder="请输入密码" {...register("password")} />
|
||||||
</div>
|
{errors.password && <p className="text-xs text-destructive">{errors.password.message}</p>}
|
||||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
</div>
|
||||||
{isSubmitting ? "登录中..." : "登录"}
|
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||||
</Button>
|
{isSubmitting ? "登录中..." : "登录"}
|
||||||
</form>
|
</Button>
|
||||||
<p className="text-center text-sm text-muted-foreground">
|
</form>
|
||||||
还没有账号？{" "}
|
<p className="text-center text-sm text-muted-foreground">
|
||||||
<Link href="/register" className="text-primary underline-offset-4 hover:underline">
|
还没有账号？{" "}
|
||||||
立即注册
|
<Link href="/register" className="text-primary underline-offset-4 hover:underline">
|
||||||
</Link>
|
立即注册
|
||||||
</p>
|
</Link>
|
||||||
</div>
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import { useRouter } from "next/navigation"
|
|||||||
import { useForm } from "react-hook-form"
|
import { useForm } from "react-hook-form"
|
||||||
import { z } from "zod"
|
import { z } from "zod"
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
import { Input } from "@/components/ui/input"
|
import { Input } from "@/components/ui/input"
|
||||||
import { Label } from "@/components/ui/label"
|
import { Label } from "@/components/ui/label"
|
||||||
import { getCurrentUserForLogin } from "@/lib/api"
|
import { getCurrentUserForLogin } from "@/lib/api"
|
||||||
@@ -42,55 +43,57 @@ export default function RegisterPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-8 bg-background p-8 rounded-xl border shadow-sm md:border-0 md:shadow-none md:p-0">
|
<Card className="hover:shadow-[var(--shadow-card)]">
|
||||||
<div className="flex flex-col gap-2">
|
<CardHeader className="space-y-2">
|
||||||
<div className="flex items-center gap-2 md:hidden mb-4">
|
<div className="flex items-center gap-2 md:hidden mb-4">
|
||||||
<div className="rounded-lg bg-primary/10 p-2">
|
<div className="rounded-lg bg-primary/10 p-2">
|
||||||
<Gamepad2 className="h-6 w-6 text-primary" />
|
<Gamepad2 className="h-6 w-6 text-primary" />
|
||||||
</div>
|
</div>
|
||||||
<span className="text-xl font-bold">聚玩</span>
|
<span className="text-xl font-bold">聚玩</span>
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-2xl font-bold tracking-tight">创建账号</h1>
|
<CardTitle className="text-2xl font-bold tracking-tight">创建账号</CardTitle>
|
||||||
<p className="text-sm text-muted-foreground">创建你的聚玩账号</p>
|
<CardDescription>创建你的聚玩账号</CardDescription>
|
||||||
</div>
|
</CardHeader>
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
<CardContent className="space-y-6">
|
||||||
<div className="space-y-2">
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||||
<Label htmlFor="nickname">昵称</Label>
|
<div className="space-y-2">
|
||||||
<Input id="nickname" placeholder="请输入昵称" {...register("nickname")} />
|
<Label htmlFor="nickname">昵称</Label>
|
||||||
{errors.nickname && <p className="text-xs text-destructive">{errors.nickname.message}</p>}
|
<Input id="nickname" placeholder="请输入昵称" {...register("nickname")} />
|
||||||
</div>
|
{errors.nickname && <p className="text-xs text-destructive">{errors.nickname.message}</p>}
|
||||||
<div className="space-y-2">
|
</div>
|
||||||
<Label htmlFor="phone">手机号</Label>
|
<div className="space-y-2">
|
||||||
<Input id="phone" placeholder="请输入手机号" {...register("phone")} />
|
<Label htmlFor="phone">手机号</Label>
|
||||||
{errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
|
<Input id="phone" placeholder="请输入手机号" {...register("phone")} />
|
||||||
</div>
|
{errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
|
||||||
<div className="space-y-2">
|
</div>
|
||||||
<Label htmlFor="password">密码</Label>
|
<div className="space-y-2">
|
||||||
<Input id="password" type="password" placeholder="请输入密码" {...register("password")} />
|
<Label htmlFor="password">密码</Label>
|
||||||
{errors.password && <p className="text-xs text-destructive">{errors.password.message}</p>}
|
<Input id="password" type="password" placeholder="请输入密码" {...register("password")} />
|
||||||
</div>
|
{errors.password && <p className="text-xs text-destructive">{errors.password.message}</p>}
|
||||||
<div className="space-y-2">
|
</div>
|
||||||
<Label htmlFor="confirmPassword">确认密码</Label>
|
<div className="space-y-2">
|
||||||
<Input
|
<Label htmlFor="confirmPassword">确认密码</Label>
|
||||||
id="confirmPassword"
|
<Input
|
||||||
type="password"
|
id="confirmPassword"
|
||||||
placeholder="请再次输入密码"
|
type="password"
|
||||||
{...register("confirmPassword")}
|
placeholder="请再次输入密码"
|
||||||
/>
|
{...register("confirmPassword")}
|
||||||
{errors.confirmPassword && (
|
/>
|
||||||
<p className="text-xs text-destructive">{errors.confirmPassword.message}</p>
|
{errors.confirmPassword && (
|
||||||
)}
|
<p className="text-xs text-destructive">{errors.confirmPassword.message}</p>
|
||||||
</div>
|
)}
|
||||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
</div>
|
||||||
{isSubmitting ? "注册中..." : "注册"}
|
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||||
</Button>
|
{isSubmitting ? "注册中..." : "注册"}
|
||||||
</form>
|
</Button>
|
||||||
<p className="text-center text-sm text-muted-foreground">
|
</form>
|
||||||
已有账号？{" "}
|
<p className="text-center text-sm text-muted-foreground">
|
||||||
<Link href="/login" className="text-primary underline-offset-4 hover:underline">
|
已有账号？{" "}
|
||||||
立即登录
|
<Link href="/login" className="text-primary underline-offset-4 hover:underline">
|
||||||
</Link>
|
立即登录
|
||||||
</p>
|
</Link>
|
||||||
</div>
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user