From 2806f6dfeec2e3ee8561208cb43913dd8d092477 Mon Sep 17 00:00:00 2001
From: Harish Mohan Raj <harish@airt.ai>
Date: Wed, 10 Apr 2024 10:44:32 +0530
Subject: [PATCH] WIP: Show login form when clicked on login button

---
 app/src/client/Main.css                       |  1 -
 app/src/client/auth/Auth.tsx                  | 10 +++----
 app/src/client/auth/LoginSignupForm.tsx       | 27 +++----------------
 .../components/TosAndMarketingEmailsModal.tsx |  9 +------
 4 files changed, 8 insertions(+), 39 deletions(-)

diff --git a/app/src/client/Main.css b/app/src/client/Main.css
index bf3f964..8504457 100644
--- a/app/src/client/Main.css
+++ b/app/src/client/Main.css
@@ -140,7 +140,6 @@ a {
   -o-transition: max-height 0.5s; 
   transition: max-height 0.5s;
   overflow: hidden;
-  max-height: 280px;
 }
 
 .custom-auth-wrapper div>a {
diff --git a/app/src/client/auth/Auth.tsx b/app/src/client/auth/Auth.tsx
index 16c97c6..ad1b84f 100644
--- a/app/src/client/auth/Auth.tsx
+++ b/app/src/client/auth/Auth.tsx
@@ -67,7 +67,6 @@ function Auth({
   const [errorMessage, setErrorMessage] = useState<ErrorMessage | null>(null);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
-  const [loginFlow, setLoginFlow] = useState(titles.signup);
 
   // TODO(matija): this is called on every render, is it a problem?
   // If we do it in useEffect(), then there is a glitch between the default color and the
@@ -79,10 +78,6 @@ function Auth({
   const socialButtonsDirection =
     socialLayout === 'vertical' ? 'vertical' : 'horizontal';
 
-  const changeHeaderText = (loginFlow: string) => {
-    setLoginFlow(loginFlow === 'signIn' ? titles.signup : titles.login);
-  };
-
   return (
     <div className={customTheme}>
       <div>
@@ -95,7 +90,9 @@ function Auth({
           />
         )}
         {/* <HeaderText>{title}</HeaderText> */}
-        <p className='mt-7 text-2xl'>{loginFlow}</p>
+        <p className='mt-7 text-2xl'>
+          {state === 'signup' ? titles.signup : titles.login}
+        </p>
       </div>
 
       {/* {errorMessage && (
@@ -115,7 +112,6 @@ function Auth({
             socialButtonsDirection={socialButtonsDirection}
             additionalSignupFields={additionalSignupFields}
             errorMessage={errorMessage}
-            changeHeaderText={changeHeaderText}
           />
         )}
       </AuthContext.Provider>
diff --git a/app/src/client/auth/LoginSignupForm.tsx b/app/src/client/auth/LoginSignupForm.tsx
index 2b9a187..a42de1d 100644
--- a/app/src/client/auth/LoginSignupForm.tsx
+++ b/app/src/client/auth/LoginSignupForm.tsx
@@ -59,13 +59,11 @@ export const LoginSignupForm = ({
   socialButtonsDirection = 'horizontal',
   additionalSignupFields,
   errorMessage,
-  changeHeaderText,
 }: {
   state: 'login' | 'signup';
   socialButtonsDirection?: 'horizontal' | 'vertical';
   additionalSignupFields?: any;
   errorMessage?: any;
-  changeHeaderText: any;
 }) => {
   const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } =
     useContext(AuthContext);
@@ -123,15 +121,6 @@ export const LoginSignupForm = ({
     }
   };
 
-  const toggleLoginFlow = () => {
-    const newLoginFlow = loginFlow === State.Login ? State.Signup : State.Login;
-    setLoginFlow(newLoginFlow);
-    setTocChecked(false);
-    setMarketingEmailsChecked(false);
-    setErrorMessage(null);
-    changeHeaderText(loginFlow);
-  };
-
   const googleBtnText =
     loginFlow === State.Login ? 'Sign in with Google' : 'Sign up with Google';
 
@@ -193,22 +182,14 @@ export const LoginSignupForm = ({
       </SocialAuth>
       <div className='flex items-center justify-center'>
         <span className='text-sm block'>
-          {/* {loginFlow === State.Login
+          {loginFlow === State.Login
             ? "Don't have an account? "
-            : 'Already have an account? '} */}
-          {/* <a
-            className='no-underline hover:underline cursor-pointer'
-            onClick={toggleLoginFlow}
-          >
-            {loginFlow === State.Login ? State.Signup : State.Login}
-          </a> */}
+            : 'Already have an account? '}
           <Link
             to={loginFlow === State.Login ? '/signup' : '/login'}
-            className='underline'
+            className='no-underline hover:underline cursor-pointer'
           >
-            {loginFlow === State.Login
-              ? "Don't have an account? "
-              : 'Already have an account? '}
+            {loginFlow === State.Login ? 'Sign up' : 'Sign in'}
           </Link>
         </span>
       </div>
diff --git a/app/src/client/components/TosAndMarketingEmailsModal.tsx b/app/src/client/components/TosAndMarketingEmailsModal.tsx
index 76f07d6..53ad9fd 100644
--- a/app/src/client/components/TosAndMarketingEmailsModal.tsx
+++ b/app/src/client/components/TosAndMarketingEmailsModal.tsx
@@ -57,10 +57,6 @@ const TosAndMarketingEmailsModal = () => {
     }
   };
 
-  const customStyle = errorMessage
-    ? { maxHeight: '400px' }
-    : { maxHeight: '280px' };
-
   const isAccountPage = useMemo(() => {
     return location.pathname.startsWith('/account');
   }, [location]);
@@ -70,10 +66,7 @@ const TosAndMarketingEmailsModal = () => {
       {!isAccountPage && <AppNavBar />}
 
       <div className='flex items-center justify-center z-50 p-16 backdrop-blur-sm bg-captn-light-cream/30 mt-16'>
-        <div
-          className='toc-marketing-container bg-captn-dark-blue rounded-lg shadow-lg p-8 m-4 max-w-xl mx-auto'
-          style={customStyle}
-        >
+        <div className='toc-marketing-container bg-captn-dark-blue rounded-lg shadow-lg p-8 m-4 max-w-xl mx-auto'>
           <div className='inner-wrapper'>
             <h2 className='text-xl font-bold mb-4 text-captn-light-cream'>
               Almost there...