WIP: Show login form when clicked on login button

airtai · Apr 10, 2024 · a25bfd6 · a25bfd6
1 parent 5e268f7
commit a25bfd6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/app/src/client/auth/LoginPage.tsx b/app/src/client/auth/LoginPage.tsx
@@ -1,4 +1,5 @@
-import { useAuth, type CustomizationOptions } from 'wasp/client/auth';
+import { createTheme } from '@stitches/react';
+import { useAuth } from 'wasp/client/auth';
 import { useHistory } from 'react-router-dom';
 import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
@@ -26,7 +27,7 @@ export default function Login() {
 
   return (
     <AuthWrapper>
-      <LoginForm logo={imgUrl} />
+      <LoginForm logo={imgUrl} state={State.Login} />
       {/* <br />
       <span className='text-sm font-medium text-captn-dark-blue dark:text-captn-dark-blue'>
         Don't have an account yet?{' '}
@@ -47,17 +48,25 @@ export default function Login() {
   );
 }
 
+export type CustomizationOptions = {
+  logo?: string;
+  socialLayout?: 'horizontal' | 'vertical';
+  appearance?: Parameters<typeof createTheme>[0];
+  state: State;
+};
+
 export function LoginForm({
   appearance,
   logo,
   socialLayout,
+  state,
 }: CustomizationOptions) {
   return (
     <Auth
       appearance={appearance}
       logo={logo}
       socialLayout={socialLayout}
-      state={State.Login}
+      state={state}
     />
   );
 }
diff --git a/app/src/client/auth/LoginSignupForm.tsx b/app/src/client/auth/LoginSignupForm.tsx
@@ -3,9 +3,9 @@ import { useForm } from 'react-hook-form';
 
 import { styled } from './configs/stitches.config';
 import { AuthContext } from './Auth';
-import { useHistory } from 'react-router-dom';
 import config from './configs/config';
 import TosAndMarketingEmails from '../components/TosAndMarketingEmails';
+import { State } from './Auth';
 
 const SocialAuth = styled('div', {
   marginTop: '1.5rem',
@@ -68,18 +68,9 @@ export const LoginSignupForm = ({
 }) => {
   const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } =
     useContext(AuthContext);
-  const isLogin = state === 'login';
-  const cta = isLogin ? 'Log in' : 'Sign up';
-  const history = useHistory();
   const [tocChecked, setTocChecked] = useState(false);
   const [marketingEmailsChecked, setMarketingEmailsChecked] = useState(false);
-  const [loginFlow, setLoginFlow] = useState('signUp');
-  //   const onErrorHandler = (error) => {
-  //     setErrorMessage({
-  //       title: error.message,
-  //       description: error.data?.data?.message,
-  //     });
-  //   };
+  const [loginFlow, setLoginFlow] = useState(state);
   const hookForm = useForm<LoginSignupFormFields>();
   const {
     register,
@@ -118,7 +109,7 @@ export const LoginSignupForm = ({
     googleSignInUrl: string
   ) => {
     event.preventDefault();
-    if (loginFlow === 'signIn') {
+    if (loginFlow === State.Login) {
       updateLocalStorage();
       window.location.href = googleSignInUrl;
     } else {
@@ -132,7 +123,7 @@ export const LoginSignupForm = ({
   };
 
   const toggleLoginFlow = () => {
-    const newLoginFlow = loginFlow === 'signIn' ? 'signUp' : 'signIn';
+    const newLoginFlow = loginFlow === State.Login ? State.Signup : State.Login;
     setLoginFlow(newLoginFlow);
     setTocChecked(false);
     setMarketingEmailsChecked(false);
@@ -141,11 +132,11 @@ export const LoginSignupForm = ({
   };
 
   const googleBtnText =
-    loginFlow === 'signIn' ? 'Sign in with Google' : 'Sign up with Google';
+    loginFlow === State.Login ? 'Sign in with Google' : 'Sign up with Google';
 
   return (
     <>
-      {loginFlow === 'signUp' && (
+      {loginFlow === State.Signup && (
         <TosAndMarketingEmails
           tocChecked={tocChecked}
           handleTocChange={handleTocChange}
@@ -201,14 +192,14 @@ export const LoginSignupForm = ({
       </SocialAuth>
       <div className='flex items-center justify-center'>
         <span className='text-sm block'>
-          {loginFlow === 'signIn'
+          {loginFlow === State.Login
             ? "Don't have an account? "
             : 'Already have an account? '}
           <a
             className='no-underline hover:underline cursor-pointer'
             onClick={toggleLoginFlow}
           >
-            {loginFlow === 'signIn' ? 'Sign Up' : 'Sign In'}
+            {loginFlow === State.Login ? State.Signup : State.Login}
           </a>
         </span>
       </div>