Skip to content

Commit f11bc79

Browse files
Jason-chen-coderJason-chen-coder
committed
feat: Redesign auth pages with split layout, animated brand area, and unified form style
- Layout: left-right 50/50 split — white form left, brand-colored right panel - Right panel: geometric shapes with multi-keyframe drift animations (scale + translate + rotate) - Login: email-first flow, dark submit button, OR divider, then OAuth (Google/GitHub) - All auth pages: remove card wrappers, unified input/button/error styles - Logo: remove rounded corners, link to homepage - Footer: terms/privacy agreement text - Dark mode: consistent token system (white/[0.04] inputs, white/[0.1] borders) - Respect prefers-reduced-motion for all animations
1 parent 9020b30 commit f11bc79

7 files changed

Lines changed: 515 additions & 691 deletions

File tree

‎apps/web/src/app/auth/forgot-password/page.tsx‎

Lines changed: 59 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -30,81 +30,78 @@ export default function ForgotPasswordPage() {
3030

3131
if (sent) {
3232
return (
33-
<div className="bg-white dark:bg-gray-800 rounded-2xl sm:rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-6 sm:p-10">
34-
<div className="space-y-6 text-center">
35-
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/20">
36-
<svg className="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
37-
<path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
38-
</svg>
39-
</div>
40-
<h1 className="text-xl font-bold text-gray-900 dark:text-white">邮件已发送</h1>
41-
<p className="text-sm text-gray-500 dark:text-gray-400">
42-
如果 <strong>{email}</strong> 已注册，你将收到一封密码重置邮件。
43-
请查看你的收件箱（或垃圾邮件文件夹）。
33+
<div className="space-y-6 text-center">
34+
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-500/[0.1]">
35+
<svg className="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
36+
<path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
37+
</svg>
38+
</div>
39+
<div>
40+
<h1 className="text-[1.375rem] font-bold text-gray-900 dark:text-white">邮件已发送</h1>
41+
<p className="mt-2 text-[0.8125rem] text-gray-500 dark:text-gray-400 leading-relaxed">
42+
如果 <strong className="text-gray-700 dark:text-gray-300">{email}</strong> 已注册，你将收到一封密码重置邮件。
4443
</p>
45-
<Link
46-
href="/auth/login"
47-
className="inline-block text-sm text-[#333DFC] hover:text-[#2930D9] font-semibold"
48-
>
49-
返回登录
50-
</Link>
5144
</div>
45+
<Link
46+
href="/auth/login"
47+
className="inline-block text-[0.8125rem] text-[#333DFC] hover:text-[#2930D9] font-medium transition-colors"
48+
>
49+
返回登录
50+
</Link>
5251
</div>
5352
);
5453
}
5554

5655
return (
57-
<div className="bg-white dark:bg-gray-800 rounded-2xl sm:rounded-[2rem] shadow-lg shadow-gray-200/50 dark:shadow-gray-900/50 p-6 sm:p-10">
58-
<div className="space-y-8">
56+
<div className="space-y-8">
57+
<div className="text-center">
58+
<h1 className="text-[1.625rem] font-bold text-gray-900 dark:text-white tracking-tight">
59+
忘记密码
60+
</h1>
61+
<p className="mt-2 text-[0.875rem] text-gray-500 dark:text-gray-400">
62+
输入你的注册邮箱，我们将发送重置链接
63+
</p>
64+
</div>
65+
66+
<form onSubmit={handleSubmit} className="space-y-4">
5967
<div>
60-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2 tracking-tight">
61-
忘记密码
62-
</h1>
63-
<p className="text-gray-500 dark:text-gray-400 text-sm">
64-
输入你的注册邮箱，我们将发送密码重置链接
65-
</p>
68+
<label htmlFor="email" className="block text-[0.8125rem] font-medium text-gray-700 dark:text-gray-300 mb-1.5">
69+
邮箱地址
70+
</label>
71+
<input
72+
id="email"
73+
type="email"
74+
value={email}
75+
onChange={(e) => setEmail(e.target.value)}
76+
required
77+
className="w-full px-3 py-2.5 bg-white dark:bg-white/[0.04] border border-gray-200 dark:border-white/[0.1] rounded-lg text-[0.875rem] focus:outline-none focus:ring-2 focus:ring-[#333DFC]/20 focus:border-[#333DFC] dark:text-white transition-colors placeholder:text-gray-400 dark:placeholder:text-gray-500"
78+
placeholder="you@example.com"
79+
/>
6680
</div>
6781

68-
<form onSubmit={handleSubmit} className="space-y-5">
69-
<div>
70-
<label htmlFor="email" className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
71-
邮箱
72-
</label>
73-
<input
74-
id="email"
75-
type="email"
76-
value={email}
77-
onChange={(e) => setEmail(e.target.value)}
78-
required
79-
className="w-full px-4 py-3.5 bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-[#333DFC]/20 focus:border-[#333DFC] dark:text-white transition-all duration-200 placeholder:text-gray-400"
80-
placeholder="请输入你的注册邮箱"
81-
/>
82+
{error && (
83+
<div className="flex items-start gap-2 px-3 py-2.5 rounded-lg bg-red-50 dark:bg-red-500/[0.08] text-[0.8125rem] text-red-600 dark:text-red-400">
84+
{error}
8285
</div>
86+
)}
8387

84-
{error && (
85-
<div className="flex items-center gap-2 px-4 py-3 rounded-xl text-sm font-medium text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-900/20">
86-
{error}
87-
</div>
88-
)}
89-
90-
<button
91-
type="submit"
92-
disabled={isLoading}
93-
className="w-full bg-[#333DFC] hover:bg-[#2930D9] disabled:bg-[#333DFC]/50 text-white font-semibold py-3.5 px-4 rounded-xl disabled:cursor-not-allowed shadow-lg shadow-[#333DFC]/25 transition-colors"
94-
>
95-
{isLoading ? '发送中...' : '发送重置链接'}
96-
</button>
97-
</form>
88+
<button
89+
type="submit"
90+
disabled={isLoading}
91+
className="w-full bg-[#333DFC] hover:bg-[#2930D9] disabled:opacity-50 text-white text-[0.875rem] font-medium py-2.5 px-4 rounded-lg disabled:cursor-not-allowed transition-colors"
92+
>
93+
{isLoading ? '发送中...' : '发送重置链接'}
94+
</button>
95+
</form>
9896

99-
<div className="text-center text-sm text-gray-500 dark:text-gray-400">
100-
<Link
101-
href="/auth/login"
102-
className="text-[#333DFC] hover:text-[#2930D9] font-semibold transition-colors"
103-
>
104-
返回登录
105-
</Link>
106-
</div>
107-
</div>
97+
<p className="text-center text-[0.8125rem] text-gray-500 dark:text-gray-400">
98+
<Link
99+
href="/auth/login"
100+
className="text-[#333DFC] hover:text-[#2930D9] dark:text-[#6C72FF] font-medium transition-colors"
101+
>
102+
返回登录
103+
</Link>
104+
</p>
108105
</div>
109106
);
110107
}

0 commit comments

Comments
 (0)