email verification flow updated

frontend/src/components/AuthModal.tsx

@@ -3,6 +3,7 @@ import { useAuth } from "../contexts/AuthContext";
 import PasswordStrengthMeter from "./PasswordStrengthMeter";
 import PasswordInput from "./PasswordInput";
 import ForgotPasswordModal from "./ForgotPasswordModal";
+import VerificationCodeModal from "./VerificationCodeModal";
 
 interface AuthModalProps {
   show: boolean;
@@ -23,6 +24,7 @@ const AuthModal: React.FC<AuthModalProps> = ({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [showForgotPassword, setShowForgotPassword] = useState(false);
+  const [showVerificationModal, setShowVerificationModal] = useState(false);
 
   const { login, register } = useAuth();
 
@@ -39,6 +41,7 @@ const AuthModal: React.FC<AuthModalProps> = ({
     setPassword("");
     setFirstName("");
     setLastName("");
+    setShowVerificationModal(false);
   };
 
   const handleGoogleLogin = () => {
@@ -68,28 +71,48 @@ const AuthModal: React.FC<AuthModalProps> = ({
         await login(email, password);
         onHide();
       } else {
-        await register({
+        const response = await register({
           email,
           password,
           firstName,
           lastName,
           username: email.split("@")[0], // Generate username from email
         });
-        onHide();
+        // Show verification modal after successful registration
+        setShowVerificationModal(true);
+        // Don't call onHide() - keep modal context for verification
       }
     } catch (err: any) {
-      setError(err.response?.data?.message || "An error occurred");
+      setError(err.response?.data?.error || "An error occurred");
     } finally {
       setLoading(false);
     }
   };
 
 
-  if (!show && !showForgotPassword) return null;
+  if (!show && !showForgotPassword && !showVerificationModal) return null;
 
   return (
     <>
-      {!showForgotPassword && (
+      {/* Verification Code Modal - shown after signup */}
+      {showVerificationModal && (
+        <VerificationCodeModal
+          show={showVerificationModal}
+          onHide={() => {
+            setShowVerificationModal(false);
+            resetModal();
+            onHide();
+          }}
+          email={email}
+          onVerified={() => {
+            setShowVerificationModal(false);
+            resetModal();
+            onHide();
+          }}
+        />
+      )}
+
+      {!showForgotPassword && !showVerificationModal && (
         <div
           className="modal show d-block"
           tabIndex={-1}