From 0d83118938d70b4c92120a69ca7deacbf0f2c1af Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Thu, 23 Apr 2026 13:31:46 +0530
Subject: [PATCH] remove from local and session storage when signing out

---
 src/components/LoginModal.tsx   |  21 +--
 src/components/RegisterPage.tsx | 296 ++++++++++++++++++--------------
 src/context/AuthContext.tsx     |   2 +
 3 files changed, 178 insertions(+), 141 deletions(-)

diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
index 0fa4523..11413ff 100644
--- a/src/components/LoginModal.tsx
+++ b/src/components/LoginModal.tsx
@@ -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();
diff --git a/src/components/RegisterPage.tsx b/src/components/RegisterPage.tsx
index 9908650..f6ea833 100644
--- a/src/components/RegisterPage.tsx
+++ b/src/components/RegisterPage.tsx
@@ -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>
     );
 }
\ No newline at end of file
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index 50dba2a..b3cdda3 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -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("/")
     }