main #31
@@ -21,7 +21,6 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
|
||||
const [countdown, setCountdown] = useState(0);
|
||||
const [helperText, setHelperText] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [showRegisterModal, setShowRegisterModal] = useState(false);
|
||||
|
||||
const { login } = useAuth();
|
||||
const navigate = useNavigate()
|
||||
@@ -148,17 +147,19 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
|
||||
otp: otpString
|
||||
}).unwrap();
|
||||
|
||||
const userData = {
|
||||
userId: response?.user?.id,
|
||||
email: response?.email || email,
|
||||
name: response?.name || email.split('@')[0].charAt(0).toUpperCase() + email.split('@')[0].slice(1),
|
||||
accessToken: response?.accessToken,
|
||||
};
|
||||
|
||||
login(userData);
|
||||
if (!response?.data?.userExists) {
|
||||
|
||||
if (!response?.userExists) {
|
||||
localStorage.setItem("userEmail",email)
|
||||
navigate("/register")
|
||||
} else {
|
||||
const userData = {
|
||||
userId: response?.user?.id,
|
||||
email: response?.email || email,
|
||||
name: response?.name || email.split('@')[0].charAt(0).toUpperCase() + email.split('@')[0].slice(1),
|
||||
accessToken: response?.accessToken,
|
||||
};
|
||||
|
||||
login(userData);
|
||||
toast.success("User Logged in successfully")
|
||||
}
|
||||
onClose();
|
||||
|
||||
@@ -7,14 +7,15 @@ 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, user } = useAuth();
|
||||
|
||||
const { login } = useAuth();
|
||||
const email = localStorage.getItem("userEmail")
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
emailAddress: user?.email ?? "",
|
||||
emailAddress: email ?? "",
|
||||
isdCode: '',
|
||||
mobileNumber: '',
|
||||
address1: '',
|
||||
@@ -32,9 +33,6 @@ export default function RegisterPage() {
|
||||
|
||||
const [register, { isLoading: isRegistering }] = useRegisterMutation();
|
||||
|
||||
const emailAddress = user?.email
|
||||
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
@@ -68,8 +66,8 @@ export default function RegisterPage() {
|
||||
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';
|
||||
@@ -81,146 +79,182 @@ export default function RegisterPage() {
|
||||
};
|
||||
|
||||
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="min-h-screen flex flex-col bg-gray-50 w-full">
|
||||
{/* Navbar */}
|
||||
<Navbar activeCity="" />
|
||||
|
||||
<div className="w-full max-w-5xl mx-auto">
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
|
||||
{/* 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">
|
||||
<Input
|
||||
placeholder="First Name"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => handleInputChange('firstName', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Last Name"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => handleInputChange('lastName', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl"
|
||||
/>
|
||||
</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
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
value={emailAddress}
|
||||
onChange={(e) => handleInputChange('emailAddress', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl"
|
||||
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 className="grid md:grid-cols-3 gap-6">
|
||||
<Input
|
||||
placeholder="ISD Code"
|
||||
value={formData.isdCode}
|
||||
onChange={(e) => handleInputChange('isdCode', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl"
|
||||
/>
|
||||
<div className="md:col-span-2">
|
||||
<Input
|
||||
placeholder="Mobile Number"
|
||||
value={formData.mobileNumber}
|
||||
onChange={(e) => handleInputChange('mobileNumber', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-poppins font-semibold text-gray-800 text-lg">
|
||||
Address Information
|
||||
</h3>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<Label htmlFor="mobileNumber" className="font-poppins font-light">Mobile Number</Label>
|
||||
<Input
|
||||
placeholder="Address Line 1"
|
||||
value={formData.address1}
|
||||
onChange={(e) => handleInputChange('address1', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl"
|
||||
id="mobileNumber"
|
||||
value={formData.mobileNumber}
|
||||
onChange={(e) => handleInputChange('mobileNumber', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
|
||||
<Input
|
||||
placeholder="Address Line 2"
|
||||
value={formData.address2}
|
||||
onChange={(e) => handleInputChange('address2', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl"
|
||||
/>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<Input
|
||||
placeholder="City"
|
||||
value={formData.city}
|
||||
onChange={(e) => handleInputChange('city', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl"
|
||||
/>
|
||||
<Input
|
||||
placeholder="State"
|
||||
value={formData.state}
|
||||
onChange={(e) => handleInputChange('state', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<Input
|
||||
placeholder="Country"
|
||||
value={formData.country}
|
||||
onChange={(e) => handleInputChange('country', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Postal Code"
|
||||
value={formData.postalCode}
|
||||
onChange={(e) => handleInputChange('postalCode', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl"
|
||||
/>
|
||||
</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>
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
@@ -40,6 +40,8 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
localStorage.removeItem("user")
|
||||
localStorage.removeItem("accessToken")
|
||||
localStorage.removeItem("userId")
|
||||
localStorage.removeItem("userEmail")
|
||||
sessionStorage.removeItem("citySelected")
|
||||
navigate("/")
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user