Polish login signup form (#310)

airtai · Apr 11, 2024 · 2f0d35c · 2f0d35c
1 parent 5e268f7
commit 2f0d35c
Show file tree

Hide file tree

Showing 13 changed files with 112 additions and 117 deletions.
diff --git a/app/main.wasp b/app/main.wasp
@@ -201,10 +201,10 @@ page LoginPage {
   component: import Login from "@src/client/auth/LoginPage"
 }
 
-// route SignupRoute { path: "/signup", to: SignupPage }
-// page SignupPage {
-//   component: import { Signup } from "@src/client/auth/SignupPage"
-// }
+route SignupRoute { path: "/signup", to: SignupPage }
+page SignupPage {
+  component: import { Signup } from "@src/client/auth/SignupPage"
+}
 
 route TocPageRoute { path: "/toc", to: TocPage }
 page TocPage {

diff --git 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/app/AccountPage.tsx b/app/src/client/app/AccountPage.tsx
@@ -99,7 +99,7 @@ const AccountPage = ({ user }: { user: User }) => {
           onClick={logout}
           className='inline-flex justify-center mx-8 py-2 px-4 border border-transparent shadow-md text-sm font-medium rounded-md text-captn-light-cream bg-captn-cta-green hover:bg-captn-cta-green-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
         >
-          Log out
+          Sign out
         </button>
       </div>
     </div>

diff --git a/app/src/client/app/PricingPage.tsx b/app/src/client/app/PricingPage.tsx
@@ -191,7 +191,7 @@ const PricingPage = () => {
                     : !!user
                       ? // ? 'Buy plan'
                         'Start free trial'
-                      : 'Log in to buy plan'}
+                      : 'Sign in to buy plan'}
                 </button>
               )}
             </div>

diff --git a/app/src/client/auth/Auth.tsx b/app/src/client/auth/Auth.tsx
@@ -50,7 +50,7 @@ export const AuthContext = createContext({
 
 const titles: Record<State, string> = {
   login: 'Sign in to your account',
-  signup: 'Create a new account',
+  signup: 'Create an account',
 };
 
 function Auth({
@@ -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/LoginPage.tsx b/app/src/client/auth/LoginPage.tsx
@@ -1,11 +1,9 @@
-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';
-// import { LoginForm } from '@wasp/auth/forms/Login';
 import { AuthWrapper } from './authWrapper';
 import Auth from './Auth';
-// import { State } from 'wasp/auth/forms/types';
 import imgUrl from '../static/captn-logo-large.png';
 
 export enum State {
@@ -26,38 +24,30 @@ export default function Login() {
 
   return (
     <AuthWrapper>
-      <LoginForm logo={imgUrl} />
-      {/* <br />
-      <span className='text-sm font-medium text-captn-dark-blue dark:text-captn-dark-blue'>
-        Don't have an account yet?{' '}
-        <Link to='/signup' className='underline'>
-          go to signup
-        </Link>
-        .
-      </span>
-      <br />
-      <span className='text-sm font-medium text-captn-dark-blue'>
-        Forgot your password?{' '}
-        <Link to='/request-password-reset' className='underline'>
-          reset it
-        </Link>
-        .
-      </span> */}
+      <LoginForm logo={imgUrl} state={State.Login} />
     </AuthWrapper>
   );
 }
 
+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,10 @@ 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';
+import { Link } from 'wasp/client/router';
 
 const SocialAuth = styled('div', {
   marginTop: '1.5rem',
@@ -58,28 +59,17 @@ 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);
-  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 +108,7 @@ export const LoginSignupForm = ({
     googleSignInUrl: string
   ) => {
     event.preventDefault();
-    if (loginFlow === 'signIn') {
+    if (loginFlow === State.Login) {
       updateLocalStorage();
       window.location.href = googleSignInUrl;
     } else {
@@ -131,21 +121,12 @@ export const LoginSignupForm = ({
     }
   };
 
-  const toggleLoginFlow = () => {
-    const newLoginFlow = loginFlow === 'signIn' ? 'signUp' : 'signIn';
-    setLoginFlow(newLoginFlow);
-    setTocChecked(false);
-    setMarketingEmailsChecked(false);
-    setErrorMessage(null);
-    changeHeaderText(loginFlow);
-  };
-
   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,15 +182,15 @@ 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
+          <Link
+            to={loginFlow === State.Login ? '/signup' : '/login'}
             className='no-underline hover:underline cursor-pointer'
-            onClick={toggleLoginFlow}
           >
-            {loginFlow === 'signIn' ? 'Sign Up' : 'Sign In'}
-          </a>
+            {loginFlow === State.Login ? 'Sign up' : 'Sign in'}
+          </Link>
         </span>
       </div>
     </>

diff --git a/app/src/client/auth/SignupPage.tsx b/app/src/client/auth/SignupPage.tsx
@@ -1,20 +1,11 @@
-import { SignupForm } from "wasp/client/auth";
-import { Link } from 'react-router-dom';
 import { AuthWrapper } from './authWrapper';
+import imgUrl from '../static/captn-logo-large.png';
+import { State, LoginForm } from './LoginPage';
 
 export function Signup() {
   return (
     <AuthWrapper>
-      <SignupForm />
-      <br />
-      <span className='text-sm font-medium text-captn-dark-blue'>
-        I already have an account (
-        <Link to='/login' className='underline'>
-          go to login
-        </Link>
-        ).
-      </span>
-      <br />
+      <LoginForm logo={imgUrl} state={State.Signup} />
     </AuthWrapper>
   );
 }
diff --git a/app/src/client/components/AppNavBar.tsx b/app/src/client/components/AppNavBar.tsx
@@ -9,6 +9,7 @@ import logo from '../static/logo.png';
 import DropdownUser from './DropdownUser';
 import { UserMenuItems } from '../components/UserMenuItems';
 import FreeTrialButton from '../components/FreeTrialButton';
+import UserActionButton from '../components/UserActionButton';
 
 import { navigation } from '../landing-page/contentSections';
 
@@ -63,7 +64,7 @@ export default function AppNavBar() {
         <div className='hidden lg:flex lg:flex-1 gap-3 justify-end items-center'>
           <ul className='flex justify-center items-center gap-2 sm:gap-4'>
             {/* <DarkModeSwitcher /> */}
-            {!user?.hasPaid && <FreeTrialButton />}
+            <UserActionButton user={user} renderGoToChat={false} />
           </ul>
 
           {isUserLoading ? null : !user ? (
@@ -72,7 +73,7 @@ export default function AppNavBar() {
               className='text-sm font-semibold leading-6 ml-4'
             >
               <div className='flex items-center duration-300 ease-in-out text-captn-dark-blue hover:text-captn-light-blue dark:text-captn-light-cream'>
-                Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
+                Sign in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
               </div>
             </a>
           ) : (
@@ -120,11 +121,19 @@ export default function AppNavBar() {
               </div>
               <div className='py-6'>
                 {isUserLoading ? null : !user ? (
-                  <Link to='/login'>
-                    <div className='flex justify-end items-center duration-300 ease-in-out text-captn-dark-blue hover:text-captn-light-blue dark:text-captn-light-cream'>
-                      Log in <BiLogIn size='1.1rem' className='ml-1' />
-                    </div>
-                  </Link>
+                  <div className='text-right'>
+                    <Link
+                      to='/signup'
+                      className='no-underline rounded-md px-3.5 py-2.5 text-sm text-captn-light-cream  hover:bg-captn-cta-green-hover shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:text-captn-light-cream bg-captn-cta-green'
+                    >
+                      Create an account
+                    </Link>
+                    <Link to='/login'>
+                      <div className='mt-5 flex justify-end items-center duration-300 ease-in-out text-captn-dark-blue hover:text-captn-light-blue dark:text-captn-light-cream text-sm'>
+                        Sign in <BiLogIn size='1.1rem' className='ml-1' />
+                      </div>
+                    </Link>
+                  </div>
                 ) : (
                   <UserMenuItems
                     user={user}

diff --git 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...

diff --git a/app/src/client/components/UserActionButton.tsx b/app/src/client/components/UserActionButton.tsx
@@ -0,0 +1,40 @@
+import { Link } from 'react-router-dom';
+import FreeTrialButton from './FreeTrialButton';
+
+interface UserActionButtonProps {
+  user: any;
+  renderGoToChat: boolean;
+}
+
+const UserActionButton: React.FC<UserActionButtonProps> = ({
+  user,
+  renderGoToChat,
+}) => {
+  if (!user) {
+    return (
+      <Link
+        to='/signup'
+        className='no-underline rounded-md px-3.5 py-2.5 text-sm text-captn-light-cream  hover:bg-captn-cta-green-hover shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:text-captn-light-cream bg-captn-cta-green'
+      >
+        Create an account
+      </Link>
+    );
+  }
+
+  if (!user.hasPaid) {
+    return <FreeTrialButton />;
+  }
+
+  return renderGoToChat ? (
+    <a
+      href='/chat'
+      className='no-underline rounded-md px-3.5 py-2.5 text-sm text-captn-light-cream  hover:bg-captn-cta-green-hover shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:text-captn-light-cream bg-captn-cta-green'
+    >
+      Go to chat <span aria-hidden='true'>→</span>
+    </a>
+  ) : (
+    <></>
+  );
+};
+
+export default UserActionButton;
diff --git a/app/src/client/components/UserMenuItems.tsx b/app/src/client/components/UserMenuItems.tsx
@@ -112,7 +112,7 @@ export const UserMenuItems = ({
             fill=''
           />
         </svg>
-        Log out
+        Sign out
       </button>
     </>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -112,7 +112,7 @@ export const UserMenuItems = ({ @@
                 fill=''
               />
             </svg>
-            Log out
+            Sign out
           </button>
         </>
       );
@@ Expand Down @@