diff --git a/app/main.wasp b/app/main.wasp index 3f59068..fba8738 100644 --- 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 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/app/AccountPage.tsx b/app/src/client/app/AccountPage.tsx index 4e2e7c7..26d3bda 100644 --- 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 diff --git a/app/src/client/app/PricingPage.tsx b/app/src/client/app/PricingPage.tsx index 0892e25..b83345b 100644 --- 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'} )} diff --git a/app/src/client/auth/Auth.tsx b/app/src/client/auth/Auth.tsx index 16c97c6..a7ec8c3 100644 --- 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 = { 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(null); const [successMessage, setSuccessMessage] = useState(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 (
@@ -95,7 +90,9 @@ function Auth({ /> )} {/* {title} */} -

{loginFlow}

+

+ {state === 'signup' ? titles.signup : titles.login} +

{/* {errorMessage && ( @@ -115,7 +112,6 @@ function Auth({ socialButtonsDirection={socialButtonsDirection} additionalSignupFields={additionalSignupFields} errorMessage={errorMessage} - changeHeaderText={changeHeaderText} /> )} diff --git a/app/src/client/auth/LoginPage.tsx b/app/src/client/auth/LoginPage.tsx index 58eb9c3..7a18095 100644 --- 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 ( - - {/*
- - Don't have an account yet?{' '} - - go to signup - - . - -
- - Forgot your password?{' '} - - reset it - - . - */} + ); } +export type CustomizationOptions = { + logo?: string; + socialLayout?: 'horizontal' | 'vertical'; + appearance?: Parameters[0]; + state: State; +}; + export function LoginForm({ appearance, logo, socialLayout, + state, }: CustomizationOptions) { return ( ); } diff --git a/app/src/client/auth/LoginSignupForm.tsx b/app/src/client/auth/LoginSignupForm.tsx index f83be99..a42de1d 100644 --- 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(); 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 && (
- {loginFlow === 'signIn' + {loginFlow === State.Login ? "Don't have an account? " : 'Already have an account? '} - - {loginFlow === 'signIn' ? 'Sign Up' : 'Sign In'} - + {loginFlow === State.Login ? 'Sign up' : 'Sign in'} +
diff --git a/app/src/client/auth/SignupPage.tsx b/app/src/client/auth/SignupPage.tsx index 55ae84a..23965c9 100644 --- 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 ( - -
- - I already have an account ( - - go to login - - ). - -
+ ); } diff --git a/app/src/client/components/AppNavBar.tsx b/app/src/client/components/AppNavBar.tsx index a23bd73..62353fc 100644 --- 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() {
    {/* */} - {!user?.hasPaid && } +
{isUserLoading ? null : !user ? ( @@ -72,7 +73,7 @@ export default function AppNavBar() { className='text-sm font-semibold leading-6 ml-4' >
- Log in + Sign in
) : ( @@ -120,11 +121,19 @@ export default function AppNavBar() {
{isUserLoading ? null : !user ? ( - -
- Log in -
- +
+ + Create an account + + +
+ Sign in +
+ +
) : ( { } }; - const customStyle = errorMessage - ? { maxHeight: '400px' } - : { maxHeight: '280px' }; - const isAccountPage = useMemo(() => { return location.pathname.startsWith('/account'); }, [location]); @@ -70,10 +66,7 @@ const TosAndMarketingEmailsModal = () => { {!isAccountPage && }
-
+

Almost there... diff --git a/app/src/client/components/UserActionButton.tsx b/app/src/client/components/UserActionButton.tsx new file mode 100644 index 0000000..e8fd998 --- /dev/null +++ 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 = ({ + user, + renderGoToChat, +}) => { + if (!user) { + return ( + + Create an account + + ); + } + + if (!user.hasPaid) { + return ; + } + + return renderGoToChat ? ( + + Go to chat + + ) : ( + <> + ); +}; + +export default UserActionButton; diff --git a/app/src/client/components/UserMenuItems.tsx b/app/src/client/components/UserMenuItems.tsx index a2551b6..07c69fa 100644 --- a/app/src/client/components/UserMenuItems.tsx +++ b/app/src/client/components/UserMenuItems.tsx @@ -112,7 +112,7 @@ export const UserMenuItems = ({ fill='' /> - Log out + Sign out ); diff --git a/app/src/client/landing-page/LandingPage.tsx b/app/src/client/landing-page/LandingPage.tsx index 6182a26..d5dd79d 100644 --- 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() { {/*
*/} - {!user?.hasPaid && ( -
- -
- )} + {isUserLoading ? null : !user ? ( -
- Log in +
+ Sign in
) : ( @@ -131,11 +128,19 @@ export default function LandingPage() {
{isUserLoading ? null : !user ? ( - -
- Log in -
- +
+ + Create an account + + +
+ Sign in +
+ +
) : ( )} @@ -189,16 +194,7 @@ export default function LandingPage() { business. 30 days free trial, no credit card required!

- {!user?.hasPaid ? ( - - ) : ( - - Go to chat - - )} +