260 lines
11 KiB
TypeScript
260 lines
11 KiB
TypeScript
import { useState } from 'react';
|
|
import { Button } from './ui/button';
|
|
import { Input } from './ui/input';
|
|
import { useRegisterMutation } from '../Redux/services/auth.service';
|
|
import { toast } from 'sonner';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import Navbar from './Navbar';
|
|
import { Footer } from './Footer';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Label } from './ui/label';
|
|
|
|
export default function RegisterPage() {
|
|
const { login } = useAuth();
|
|
const email = localStorage.getItem("userEmail")
|
|
const [formData, setFormData] = useState({
|
|
firstName: '',
|
|
lastName: '',
|
|
emailAddress: email ?? "",
|
|
isdCode: '',
|
|
mobileNumber: '',
|
|
address1: '',
|
|
address2: '',
|
|
city: '',
|
|
state: '',
|
|
country: '',
|
|
postalCode: ''
|
|
});
|
|
|
|
const [helperText, setHelperText] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const navigate = useNavigate()
|
|
|
|
const [register, { isLoading: isRegistering }] = useRegisterMutation();
|
|
|
|
const handleInputChange = (field: string, value: string) => {
|
|
setFormData(prev => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
const validateForm = () => {
|
|
if (!formData.firstName.trim()) return toast.error('First name is required'), false;
|
|
if (!formData.lastName.trim()) return toast.error('Last name is required'), false;
|
|
if (!formData.emailAddress.includes('@')) return toast.error('Invalid email address'), false;
|
|
if (!formData.isdCode.startsWith("+")) toast.error("ISD code must start with '+'"), false;
|
|
if (!/^\+\d+$/.test(formData.isdCode)) toast.error("ISD code must contain only numbers after '+'"), false;
|
|
if (!/^\d+$/.test(formData.mobileNumber)) return toast.error('Invalid mobile number'), false;
|
|
if (!formData.address1.trim()) return toast.error('Address required'), false;
|
|
if (!formData.city.trim()) return toast.error('City required'), false;
|
|
if (!formData.state.trim()) return toast.error('State required'), false;
|
|
if (!/^\d+$/.test(formData.postalCode)) return toast.error('Postal code should only contain numbers'), false;
|
|
return true;
|
|
};
|
|
|
|
const handleRegister = async () => {
|
|
if (!validateForm()) return;
|
|
|
|
setIsLoading(true);
|
|
setHelperText('');
|
|
|
|
try {
|
|
const response = await register(formData).unwrap();
|
|
toast.success('Registration successful!');
|
|
const userData = {
|
|
userId: response?.user?.id,
|
|
email: response?.email || formData.emailAddress,
|
|
name: response?.name || formData.emailAddress.split('@')[0].charAt(0).toUpperCase() + formData.emailAddress.split('@')[0].slice(1),
|
|
accessToken: response?.accessToken,
|
|
};
|
|
login(userData);
|
|
localStorage.removeItem("userEmail")
|
|
navigate("/")
|
|
} catch (err: any) {
|
|
const msg = err?.data?.message || 'Registration failed';
|
|
toast.error(msg);
|
|
setHelperText(msg);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-gray-50 w-full">
|
|
{/* Navbar */}
|
|
<Navbar activeCity="" />
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-grow w-full px-6 md:px-10 py-10 mt-20">
|
|
<div className="w-full max-w-5xl mx-auto">
|
|
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h2 className="font-merchant text-3xl font-semibold text-gray-900 mb-2">
|
|
Create Account
|
|
</h2>
|
|
<p className="font-poppins text-gray-600">
|
|
Register to get started with City Cards
|
|
</p>
|
|
</div>
|
|
|
|
{/* Form Container */}
|
|
<div className="bg-white rounded-2xl border border-gray-200 p-8 space-y-8">
|
|
|
|
{/* Personal Info */}
|
|
<div className="space-y-4">
|
|
<h3 className="font-poppins font-semibold text-gray-800 text-lg">
|
|
Personal Information
|
|
</h3>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<Label htmlFor="firstName" className="font-poppins font-light">First Name</Label>
|
|
<Input
|
|
id="firstName"
|
|
value={formData.firstName}
|
|
onChange={(e) => handleInputChange('firstName', e.target.value)}
|
|
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="lastName" className="font-poppins font-light">Last Name</Label>
|
|
<Input
|
|
id="lastName"
|
|
value={formData.lastName}
|
|
onChange={(e) => handleInputChange('lastName', e.target.value)}
|
|
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="emailAddress" className="font-poppins font-light">Email Address</Label>
|
|
<Input
|
|
id="emailAddress"
|
|
type="email"
|
|
value={formData.emailAddress}
|
|
disabled
|
|
onChange={(e) => handleInputChange('emailAddress', e.target.value)}
|
|
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
<div>
|
|
<Label htmlFor="isdCode" className="font-poppins font-light">ISD Code</Label>
|
|
<Input
|
|
id="isdCode"
|
|
placeholder="example: +91"
|
|
value={formData.isdCode}
|
|
onChange={(e) => handleInputChange('isdCode', e.target.value)}
|
|
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-2">
|
|
<Label htmlFor="mobileNumber" className="font-poppins font-light">Mobile Number</Label>
|
|
<Input
|
|
id="mobileNumber"
|
|
value={formData.mobileNumber}
|
|
onChange={(e) => handleInputChange('mobileNumber', e.target.value)}
|
|
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Address */}
|
|
<div className="space-y-4">
|
|
<h3 className="font-poppins font-semibold text-gray-800 text-lg">
|
|
Address Information
|
|
</h3>
|
|
|
|
<div>
|
|
<Label htmlFor="address1" className="font-poppins font-light">Address Line 1</Label>
|
|
<Input
|
|
id="address1"
|
|
value={formData.address1}
|
|
onChange={(e) => handleInputChange('address1', e.target.value)}
|
|
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="address2" className="font-poppins font-light">Address Line 2</Label>
|
|
<Input
|
|
id="address2"
|
|
value={formData.address2}
|
|
onChange={(e) => handleInputChange('address2', e.target.value)}
|
|
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<Label htmlFor="city" className="font-poppins font-light">City</Label>
|
|
<Input
|
|
id="city"
|
|
value={formData.city}
|
|
onChange={(e) => handleInputChange('city', e.target.value)}
|
|
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="state" className="font-poppins font-light">State</Label>
|
|
<Input
|
|
id="state"
|
|
value={formData.state}
|
|
onChange={(e) => handleInputChange('state', e.target.value)}
|
|
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<Label htmlFor="country" className="font-poppins font-light">Country</Label>
|
|
<Input
|
|
id="country"
|
|
value={formData.country}
|
|
onChange={(e) => handleInputChange('country', e.target.value)}
|
|
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="postalCode" className="font-poppins font-light">Postal Code</Label>
|
|
<Input
|
|
id="postalCode"
|
|
value={formData.postalCode}
|
|
onChange={(e) => handleInputChange('postalCode', e.target.value)}
|
|
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{helperText && (
|
|
<p className="text-sm text-red-500">{helperText}</p>
|
|
)}
|
|
|
|
<Button
|
|
onClick={handleRegister}
|
|
disabled={isLoading || isRegistering}
|
|
className="w-full cursor-pointer bg-gray-800 hover:bg-gray-900 md:px-10 h-12 text-white rounded-xl"
|
|
>
|
|
{isLoading || isRegistering ? 'Registering...' : 'Register'}
|
|
</Button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="mt-auto">
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
);
|
|
} |