51 lines
8.2 KiB
JavaScript
51 lines
8.2 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useState } from 'react';
|
|
import { User, Mail, ArrowRight, ChevronLeft, Compass, Phone, MapPin } from 'lucide-react';
|
|
export const SignupPage = ({ onBack, onSuccess }) => {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
phone: '',
|
|
address: ''
|
|
});
|
|
const [error, setError] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const handleSubmit = async (e) => {
|
|
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 API_BASE = `http://${window.location.hostname}:3001`;
|
|
const response = await fetch(`${API_BASE}/api/v1/auth/signup`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
email: formData.email,
|
|
password: formData.password,
|
|
name: formData.name,
|
|
phone: formData.phone || undefined,
|
|
address: formData.address || undefined
|
|
}),
|
|
});
|
|
const data = await response.json();
|
|
if (!response.ok) {
|
|
throw new Error(data.message || 'Đăng ký thất bại');
|
|
}
|
|
onSuccess();
|
|
}
|
|
catch (err) {
|
|
setError(err.message);
|
|
}
|
|
finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
return (_jsxs("div", { className: "flex h-screen w-full overflow-hidden font-sans bg-white", children: [_jsxs("div", { className: "hidden lg:block lg:w-1/2 relative bg-blue-900", children: [_jsx("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" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-blue-600/40 to-transparent" }), _jsxs("div", { className: "absolute top-12 left-12 flex items-center gap-2 text-white z-10", children: [_jsx(Compass, { className: "w-8 h-8" }), _jsx("span", { className: "text-2xl font-black uppercase tracking-tighter", children: "Travel Planner" })] }), _jsxs("div", { className: "absolute bottom-20 left-12 text-white z-10 max-w-md", children: [_jsx("h2", { className: "text-4xl font-bold mb-4", children: "B\u1EAFt \u0111\u1EA7u h\u00E0nh tr\u00ECnh c\u1EE7a ri\u00EAng b\u1EA1n." }), _jsx("p", { className: "text-blue-100 opacity-80", children: "T\u1EA1o t\u00E0i kho\u1EA3n \u0111\u1EC3 l\u01B0u l\u1EA1i nh\u1EEFng k\u1EBF ho\u1EA1ch du l\u1ECBch tuy\u1EC7t v\u1EDDi nh\u1EA5t c\u00F9ng b\u1EA1n b\u00E8." })] })] }), _jsx("div", { className: "flex-1 flex flex-col justify-center px-8 sm:px-16 lg:px-24 py-12 overflow-y-auto", children: _jsxs("div", { className: "max-w-md w-full mx-auto", children: [_jsxs("button", { onClick: onBack, className: "flex items-center text-gray-400 hover:text-blue-600 mb-8 transition-colors font-medium", children: [_jsx(ChevronLeft, { className: "w-5 h-5" }), " Quay l\u1EA1i"] }), _jsxs("div", { className: "mb-10", children: [_jsx("h1", { className: "text-3xl font-extrabold text-gray-900", children: "T\u1EA1o t\u00E0i kho\u1EA3n m\u1EDBi" }), _jsx("p", { className: "text-gray-500 mt-2 font-medium", children: "Kh\u00E1m ph\u00E1 c\u00E1c t\u00EDnh n\u0103ng l\u1EADp k\u1EBF ho\u1EA1ch chuy\u00EAn nghi\u1EC7p." })] }), error && (_jsx("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", children: error })), _jsxs("form", { className: "space-y-5", onSubmit: handleSubmit, children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "H\u1ECD v\u00E0 t\u00EAn" }), _jsxs("div", { className: "relative group", children: [_jsx(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" }), _jsx("input", { required: true, type: "text", placeholder: "Nguy\u1EC5n V\u0103n 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" })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "Email" }), _jsxs("div", { className: "relative group", children: [_jsx(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" }), _jsx("input", { required: true, 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" })] })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i" }), _jsxs("div", { className: "relative group", children: [_jsx(Phone, { 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" }), _jsx("input", { type: "tel", placeholder: "0912 345 678", value: formData.phone, onChange: (e) => setFormData({ ...formData, phone: 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" })] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "\u0110\u1ECBa ch\u1EC9" }), _jsxs("div", { className: "relative group", children: [_jsx(MapPin, { 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" }), _jsx("input", { type: "text", placeholder: "Qu\u1EADn 1, TP.HCM", value: formData.address, onChange: (e) => setFormData({ ...formData, address: 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" })] })] })] }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "M\u1EADt kh\u1EA9u" }), _jsx("input", { required: true, type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", 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" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "X\u00E1c nh\u1EADn" }), _jsx("input", { required: true, type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", 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" })] })] }), _jsxs("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", children: [isLoading ? 'Đang xử lý...' : 'Tạo tài khoản', !isLoading && _jsx(ArrowRight, { className: "w-5 h-5" })] })] })] }) })] }));
|
|
};
|
|
//# sourceMappingURL=SignupPage.js.map
|