162 lines
7.0 KiB
TypeScript
162 lines
7.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { User, Mail, Lock, ArrowRight, ChevronLeft, Compass } from 'lucide-react';
|
|
|
|
interface SignupPageProps {
|
|
onBack: () => void;
|
|
onSuccess: () => void;
|
|
}
|
|
|
|
export const SignupPage: React.FC<SignupPageProps> = ({ onBack, onSuccess }) => {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: ''
|
|
});
|
|
const [error, setError] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
|
|
if (formData.password !== formData.confirmPassword) {
|
|
setError('Mật khẩu xác nhận không khớp');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
const response = await fetch('http://localhost:3001/api/v1/auth/signup', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
email: formData.email,
|
|
password: formData.password,
|
|
name: formData.name
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.message || 'Đăng ký thất bại');
|
|
}
|
|
|
|
alert(data.isAdmin ? 'Đăng ký thành công! Bạn là Quản trị viên hệ thống.' : 'Đăng ký tài khoản thành công!');
|
|
onSuccess();
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-screen w-full overflow-hidden font-sans bg-white">
|
|
{/* Nửa bên trái: Hình ảnh decor (Đồng bộ với LandingPage) */}
|
|
<div className="hidden lg:block lg:w-1/2 relative bg-blue-900">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop"
|
|
alt="Travel background"
|
|
className="absolute inset-0 h-full w-full object-cover opacity-50"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-600/40 to-transparent" />
|
|
<div className="absolute top-12 left-12 flex items-center gap-2 text-white z-10">
|
|
<Compass className="w-8 h-8" />
|
|
<span className="text-2xl font-black uppercase tracking-tighter">Travel Planner</span>
|
|
</div>
|
|
<div className="absolute bottom-20 left-12 text-white z-10 max-w-md">
|
|
<h2 className="text-4xl font-bold mb-4">Bắt đầu hành trình của riêng bạn.</h2>
|
|
<p className="text-blue-100 opacity-80">Tạo tài khoản để lưu lại những kế hoạch du lịch tuyệt vời nhất cùng bạn bè.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nửa bên phải: Form đăng ký */}
|
|
<div className="flex-1 flex flex-col justify-center px-8 sm:px-16 lg:px-24 py-12 overflow-y-auto">
|
|
<div className="max-w-md w-full mx-auto">
|
|
<button onClick={onBack} className="flex items-center text-gray-400 hover:text-blue-600 mb-8 transition-colors font-medium">
|
|
<ChevronLeft className="w-5 h-5" /> Quay lại
|
|
</button>
|
|
|
|
<div className="mb-10">
|
|
<h1 className="text-3xl font-extrabold text-gray-900">Tạo tài khoản mới</h1>
|
|
<p className="text-gray-500 mt-2 font-medium">Khám phá các tính năng lập kế hoạch chuyên nghiệp.</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-red-50 text-red-600 rounded-2xl text-sm font-bold animate-in fade-in slide-in-from-top-1">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form className="space-y-5" onSubmit={handleSubmit}>
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-bold text-gray-700 ml-1">Họ và tên</label>
|
|
<div className="relative group">
|
|
<User className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-blue-500 transition-colors" />
|
|
<input
|
|
required
|
|
type="text"
|
|
placeholder="Nguyễn Văn A"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
className="w-full pl-12 pr-4 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-bold text-gray-700 ml-1">Email</label>
|
|
<div className="relative group">
|
|
<Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 group-focus-within:text-blue-500 transition-colors" />
|
|
<input
|
|
required
|
|
type="email"
|
|
placeholder="email@example.com"
|
|
value={formData.email}
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
className="w-full pl-12 pr-4 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-bold text-gray-700 ml-1">Mật khẩu</label>
|
|
<input
|
|
required
|
|
type="password"
|
|
placeholder="••••••••"
|
|
value={formData.password}
|
|
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
|
className="w-full px-4 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-bold text-gray-700 ml-1">Xác nhận</label>
|
|
<input
|
|
required
|
|
type="password"
|
|
placeholder="••••••••"
|
|
value={formData.confirmPassword}
|
|
onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
|
|
className="w-full px-4 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
disabled={isLoading}
|
|
type="submit"
|
|
className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-5 rounded-2xl shadow-xl shadow-blue-100 transition-all active:scale-[0.98] disabled:opacity-50 mt-4"
|
|
>
|
|
{isLoading ? 'Đang xử lý...' : 'Tạo tài khoản'}
|
|
{!isLoading && <ArrowRight className="w-5 h-5" />}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |