Show login form when clicked on login button

airtai · Apr 10, 2024 · 8016528 · 8016528
1 parent 2806f6d
commit 8016528
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 30 deletions.
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/components/AppNavBar.tsx b/app/src/client/components/AppNavBar.tsx
@@ -72,7 +72,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 +120,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/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>
     </>
   );

diff --git a/app/src/client/landing-page/LandingPage.tsx b/app/src/client/landing-page/LandingPage.tsx
@@ -18,6 +18,7 @@ import {
 import DropdownUser from '../components/DropdownUser';
 import { UserMenuItems } from '../components/UserMenuItems';
 import FreeTrialButton from '../components/FreeTrialButton';
+import UserActionButton from '../components/UserActionButton';
 
 export default function LandingPage() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -76,15 +77,11 @@ export default function LandingPage() {
               {/* <ul className='flex justify-center items-center gap-2 2xsm:gap-4'>
                 <DarkModeSwitcher />
               </ul> */}
-              {!user?.hasPaid && (
-                <div className='flex items-center justify-center'>
-                  <FreeTrialButton />
-                </div>
-              )}
+              <UserActionButton user={user} renderGoToChat={false} />
               {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' />
+                    Sign in <BiLogIn size='1.1rem' className='ml-1' />
                   </div>
                 </Link>
               ) : (
@@ -131,11 +128,19 @@ export default function LandingPage() {
                 </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} />
                   )}
@@ -189,16 +194,7 @@ export default function LandingPage() {
                   business. 30 days free trial, no credit card required!
                 </p>
                 <div className='mt-10 flex items-center justify-center gap-x-6'>
-                  {!user?.hasPaid ? (
-                    <FreeTrialButton />
-                  ) : (
-                    <a
-                      href='/chat'
-                      className='no-underline rounded-md px-3.5 py-2.5 text-sm text-captn-light-cream ring-1 ring-inset ring-gray-200 hover:ring-2 hover:ring-captn-light-blue 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>
-                  )}
+                  <UserActionButton user={user} renderGoToChat={true} />
                 </div>
               </div>
               <div className='mt-14 flow-root sm:mt-14 '>
-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 @@