195 lines
8.2 KiB
TypeScript
195 lines
8.2 KiB
TypeScript
'use client';
|
||
|
||
import { useState, FormEvent } from 'react';
|
||
import Link from 'next/link';
|
||
import { useAuth } from '@/lib/auth';
|
||
|
||
export default function RegisterPage() {
|
||
const [email, setEmail] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const [confirmPassword, setConfirmPassword] = useState('');
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const { signUp, signInWithGoogle } = useAuth();
|
||
|
||
// 处理注册表单提交
|
||
const handleSubmit = async (e: FormEvent) => {
|
||
e.preventDefault();
|
||
setError(null);
|
||
|
||
// 验证密码
|
||
if (password !== confirmPassword) {
|
||
setError('两次输入的密码不一致');
|
||
return;
|
||
}
|
||
|
||
// 密码强度验证
|
||
if (password.length < 6) {
|
||
setError('密码长度至少为6个字符');
|
||
return;
|
||
}
|
||
|
||
setIsLoading(true);
|
||
try {
|
||
await signUp(email, password);
|
||
// 注册成功后会跳转到登录页面，提示用户验证邮箱
|
||
} catch (error) {
|
||
console.error('Registration error:', error);
|
||
setError('注册失败，请稍后再试或使用其他邮箱');
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
// 处理Google注册/登录
|
||
const handleGoogleSignIn = async () => {
|
||
setError(null);
|
||
try {
|
||
await signInWithGoogle();
|
||
// 登录流程会重定向到Google，然后回到应用
|
||
} catch (error) {
|
||
console.error('Google sign in error:', error);
|
||
setError('Google登录失败，请稍后再试');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
|
||
<div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-gray-800 rounded-lg shadow-md">
|
||
<div className="text-center">
|
||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">注册</h1>
|
||
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
||
创建您的帐户以访问分析仪表板
|
||
</p>
|
||
</div>
|
||
|
||
{/* 错误提示 */}
|
||
{error && (
|
||
<div className="p-4 mb-4 text-sm text-red-700 bg-red-100 dark:bg-red-900 dark:text-red-200 rounded-lg">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
邮箱地址
|
||
</label>
|
||
<input
|
||
id="email"
|
||
name="email"
|
||
type="email"
|
||
autoComplete="email"
|
||
required
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
className="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 dark:bg-gray-700 dark:text-white focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="your@email.com"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
密码
|
||
</label>
|
||
<input
|
||
id="password"
|
||
name="password"
|
||
type="password"
|
||
autoComplete="new-password"
|
||
required
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
className="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 dark:bg-gray-700 dark:text-white focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="********"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
确认密码
|
||
</label>
|
||
<input
|
||
id="confirmPassword"
|
||
name="confirmPassword"
|
||
type="password"
|
||
autoComplete="new-password"
|
||
required
|
||
value={confirmPassword}
|
||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||
className="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 dark:bg-gray-700 dark:text-white focus:outline-none focus:ring-blue-500 focus:border-blue-500"
|
||
placeholder="********"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<button
|
||
type="submit"
|
||
disabled={isLoading}
|
||
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
{isLoading ? '注册中...' : '注册'}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="absolute inset-0 flex items-center">
|
||
<div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
|
||
</div>
|
||
<div className="relative flex justify-center text-sm">
|
||
<span className="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">或</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<button
|
||
type="button"
|
||
onClick={handleGoogleSignIn}
|
||
className="w-full flex justify-center items-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||
>
|
||
<svg
|
||
className="h-5 w-5 mr-2"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 24 24"
|
||
width="24"
|
||
height="24"
|
||
>
|
||
<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
|
||
<path
|
||
fill="#4285F4"
|
||
d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"
|
||
/>
|
||
<path
|
||
fill="#34A853"
|
||
d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"
|
||
/>
|
||
<path
|
||
fill="#FBBC05"
|
||
d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"
|
||
/>
|
||
<path
|
||
fill="#EA4335"
|
||
d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"
|
||
/>
|
||
</g>
|
||
</svg>
|
||
使用Google账号注册
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div className="mt-6 text-center">
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||
已有账号？{' '}
|
||
<Link
|
||
href="/login"
|
||
className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
|
||
>
|
||
登录
|
||
</Link>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|