From bc90084b3797df7d890efc8eafb438f6a37ebba3 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Fri, 30 May 2025 16:49:36 +0700
Subject: [PATCH] artcraft signup as first step and allow skipping open ai
 login

---
 .../login-modal/src/lib/login-modal.tsx       | 247 +++++++++---------
 1 file changed, 130 insertions(+), 117 deletions(-)

diff --git a/frontend/libs/components/login-modal/src/lib/login-modal.tsx b/frontend/libs/components/login-modal/src/lib/login-modal.tsx
index a544e4daf4..afe6613e85 100644
--- a/frontend/libs/components/login-modal/src/lib/login-modal.tsx
+++ b/frontend/libs/components/login-modal/src/lib/login-modal.tsx
@@ -39,8 +39,18 @@ export function LoginModal({
   const [isLoggedInArtCraft, setIsLoggedInArtCraft] = useState(false);
   const [isSignUp, setIsSignUp] = useState(true);
   const [errorMessage, setErrorMessage] = useState("");
-  const totalSteps = isLoggedInArtCraft ? 3 : 4;
   const artCraftFormRef = useRef<HTMLFormElement>(null);
+  const [initialArtCraftLoginStatusForUI, setInitialArtCraftLoginStatusForUI] =
+    useState<boolean | null>(null);
+
+  const uiTotalSteps = initialArtCraftLoginStatusForUI ? 3 : 4;
+  let uiCurrentStep = step;
+
+  if (initialArtCraftLoginStatusForUI) {
+    if (step === 1) uiCurrentStep = 1;
+    else if (step === 3) uiCurrentStep = 2;
+    else if (step === 4) uiCurrentStep = 3;
+  }
 
   const initSession = async () => {
     const result = await CheckSoraSession();
@@ -60,7 +70,7 @@ export function LoginModal({
     if (isLoggedInArtCraft) {
       setStep(4);
     } else {
-      setStep(3);
+      setStep(2);
     }
   });
 
@@ -69,115 +79,43 @@ export function LoginModal({
     // Run both checks in parallel
     Promise.all([initSession(), checkArtCraftLogin()]).then(
       ([soraSessionExists, loggedIn]) => {
+        setInitialArtCraftLoginStatusForUI(loggedIn || false); // Set initial status for UI step counting
+
         if (soraSessionExists && !loggedIn) {
           // Sora session exists, but not logged in to ArtCraft
           setIsOpen(true);
-          setStep(3);
+          setStep(2);
           setIsLoggedInArtCraft(false);
         } else if (!soraSessionExists && loggedIn) {
           // No Sora session, but logged in to ArtCraft
           setIsOpen(true);
-          setStep(2);
+          setStep(3);
           setIsLoggedInArtCraft(true);
-          // setIsOpen(false);
         } else if (!soraSessionExists) {
           // No Sora session, start at step 1
           setIsOpen(true);
           setStep(1);
+          setIsLoggedInArtCraft(false); // Ensure this is also set
         } else if (loggedIn) {
           // Already logged in, no need to show modal
           setIsLoggedInArtCraft(true);
-          // setIsOpen(false);
+          // setIsOpen(false); // This would prevent modal from showing if fully logged in
         }
       }
     );
-  }, []);
+  }, []); // Empty dependency array ensures this runs once on mount
 
   useEffect(() => {
     if (onOpenChange) onOpenChange(isOpen);
   }, [isOpen, onOpenChange]);
 
-  const handleArtCraftAuth = async (
-    username: string,
-    email: string,
-    password: string,
-    passwordConfirmation: string
-  ) => {
-    setIsLoading(true);
-    const usersApi = new UsersApi();
-    try {
-      let signupResponse, loginResponse;
-      if (isSignUp) {
-        // Sign up
-        signupResponse = await usersApi.Signup({
-          username,
-          email,
-          password,
-          passwordConfirmation,
-        });
-        if (!signupResponse.success) {
-          // TODO: Add error handling UI
-          console.error(signupResponse.errorMessage || "Signup failed");
-          setErrorMessage(
-            signupResponse.errorMessage || "Signup failed, please try again."
-          );
-          return;
-        }
-        // Automatically login after successful signup
-        loginResponse = await usersApi.Login({
-          usernameOrEmail: username || email,
-          password,
-        });
-        if (!loginResponse.success) {
-          // TODO: Add error handling UI
-          console.error(
-            loginResponse.errorMessage || "Login after signup failed"
-          );
-          setErrorMessage(
-            loginResponse.errorMessage ||
-              "Login after signup failed, please try again. "
-          );
-          return;
-        }
-      } else {
-        // Login
-        loginResponse = await usersApi.Login({
-          usernameOrEmail: username || email,
-          password,
-        });
-        if (!loginResponse.success) {
-          // TODO: Add error handling UI
-          console.error(loginResponse.errorMessage || "Login failed");
-          setErrorMessage(
-            loginResponse.errorMessage || "Login failed, please try again."
-          );
-          return;
-        }
-      }
-
-      setStep(4);
-
-      const session = await usersApi.GetSession();
-      const userInfo = session.data?.user;
-      if (onArtCraftAuthSuccess && userInfo) {
-        onArtCraftAuthSuccess(userInfo);
-      }
-    } catch (e) {
-      // handle error (show error message, etc.)
-      // TODO: Add error handling UI
-      console.error(e);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
   const handleClose = () => {
     setIsOpen(false);
     onClose();
   };
 
   const handleNext = async () => {
-    if (step === 2) {
+    if (step === 3) {
       setIsLoading(true);
       try {
         if (IsDesktopApp()) {
@@ -201,7 +139,7 @@ export function LoginModal({
       } finally {
         setIsLoading(false);
       }
-    } else if (step === 3) {
+    } else if (step === 2) {
       // Trigger the form submit in ArtCraftSignUp
       if (artCraftFormRef.current) {
         artCraftFormRef.current.requestSubmit();
@@ -218,11 +156,11 @@ export function LoginModal({
   // Progress bar rendering
   const renderProgress = () => (
     <div className="flex items-center justify-center gap-2 mb-2">
-      {[...Array(totalSteps)].map((_, idx) => (
+      {[...Array(uiTotalSteps)].map((_, idx) => (
         <div
           key={idx}
           className={`h-1.5 rounded transition-all duration-300 w-16 ${
-            idx < step ? "bg-primary" : "bg-white/30"
+            idx < uiCurrentStep ? "bg-primary" : "bg-white/30"
           }`}
         />
       ))}
@@ -231,8 +169,8 @@ export function LoginModal({
 
   // Step content rendering
   const renderStepContent = () => {
-    if (step === 3 && isLoggedInArtCraft) {
-      setStep(4);
+    if (step === 2 && isLoggedInArtCraft) {
+      setStep(3);
       return null;
     }
     switch (step) {
@@ -282,6 +220,82 @@ export function LoginModal({
           </div>
         );
       case 2:
+        return (
+          <ArtCraftSignUp
+            onSubmit={async (
+              username,
+              email,
+              password,
+              passwordConfirmation
+            ) => {
+              setIsLoading(true);
+              const usersApi = new UsersApi();
+              try {
+                let signupResponse, loginResponse;
+                if (isSignUp) {
+                  signupResponse = await usersApi.Signup({
+                    username,
+                    email,
+                    password,
+                    passwordConfirmation,
+                  });
+                  if (!signupResponse.success) {
+                    setErrorMessage(
+                      signupResponse.errorMessage ||
+                        "Signup failed, please try again."
+                    );
+                    setIsLoading(false);
+                    return;
+                  }
+                  loginResponse = await usersApi.Login({
+                    usernameOrEmail: username || email,
+                    password,
+                  });
+                  if (!loginResponse.success) {
+                    setErrorMessage(
+                      loginResponse.errorMessage ||
+                        "Login after signup failed, please try again. "
+                    );
+                    setIsLoading(false);
+                    return;
+                  }
+                } else {
+                  loginResponse = await usersApi.Login({
+                    usernameOrEmail: username || email,
+                    password,
+                  });
+                  if (!loginResponse.success) {
+                    setErrorMessage(
+                      loginResponse.errorMessage ||
+                        "Login failed, please try again."
+                    );
+                    setIsLoading(false);
+                    return;
+                  }
+                }
+                setIsLoggedInArtCraft(true);
+                if (onArtCraftAuthSuccess) {
+                  const session = await usersApi.GetSession();
+                  const userInfo = session.data?.user;
+                  if (userInfo) onArtCraftAuthSuccess(userInfo);
+                }
+                setStep(3);
+              } catch (e) {
+                console.error(e);
+                setErrorMessage(
+                  "An unexpected error occurred. Please try again."
+                );
+              } finally {
+                setIsLoading(false);
+              }
+            }}
+            isSignUp={isSignUp}
+            onToggleMode={() => setIsSignUp((prev) => !prev)}
+            formRef={artCraftFormRef}
+            errorMessage={errorMessage}
+          />
+        );
+      case 3:
         return (
           <div className="flex flex-col items-center justify-center h-full">
             <h2 className="text-3xl font-bold mb-2 text-center">
@@ -300,16 +314,6 @@ export function LoginModal({
             />
           </div>
         );
-      case 3:
-        return (
-          <ArtCraftSignUp
-            onSubmit={handleArtCraftAuth}
-            isSignUp={isSignUp}
-            onToggleMode={() => setIsSignUp((prev) => !prev)}
-            formRef={artCraftFormRef}
-            errorMessage={errorMessage}
-          />
-        );
       case 4:
         return (
           <div className="flex flex-col items-center justify-center h-full">
@@ -366,7 +370,7 @@ export function LoginModal({
             >
               <div className="flex flex-col gap-4 p-8 h-full">
                 <span className="text-sm text-center opacity-60 font-medium">
-                  Step {step} of {totalSteps}
+                  Step {uiCurrentStep} of {uiTotalSteps}
                 </span>
                 {renderProgress()}
                 {renderStepContent()}
@@ -380,25 +384,16 @@ export function LoginModal({
                       Back
                     </Button>
                   ) : null}
-                  {step < totalSteps ? (
-                    <>
-                      <Button
-                        icon={step === 2 ? faRightToBracket : faArrowRight}
-                        iconFlip={step !== 2}
-                        onClick={handleNext}
-                        loading={isLoading}
-                        disabled={isLoading}
-                      >
-                        {step === 2
-                          ? "Login with OpenAI"
-                          : step === 3
-                          ? isSignUp
-                            ? "Sign up"
-                            : "Login"
-                          : "Continue"}
-                      </Button>
-                    </>
-                  ) : (
+                  {step === 3 && (
+                    <Button
+                      variant="secondary"
+                      onClick={handleClose}
+                      disabled={isLoading}
+                    >
+                      Skip for now
+                    </Button>
+                  )}
+                  {step === 4 ? (
                     <Button
                       icon={faArrowRight}
                       iconFlip={true}
@@ -406,6 +401,24 @@ export function LoginModal({
                     >
                       Start Creating Now
                     </Button>
+                  ) : (
+                    <>
+                      <Button
+                        icon={step === 3 ? faRightToBracket : faArrowRight}
+                        iconFlip={step !== 3}
+                        onClick={handleNext}
+                        loading={isLoading}
+                        disabled={isLoading}
+                      >
+                        {step === 1
+                          ? "Continue"
+                          : step === 2
+                          ? isSignUp
+                            ? "Sign up"
+                            : "Login"
+                          : "Login with OpenAI"}
+                      </Button>
+                    </>
                   )}
                 </div>
               </div>