login and signup page separate (#312)

mentorpal · Oct 10, 2023 · 5d3fa2e · 5d3fa2e
1 parent acc72d0
commit 5d3fa2e
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 20 deletions.
diff --git a/client/src/api.ts b/client/src/api.ts
@@ -40,6 +40,7 @@ import {
   Organization,
   MentorTrainStatusById,
   RegenVttResponse,
+  LoginType,
 } from "types";
 import { SearchParams } from "hooks/graphql/use-with-data-connection";
 import {
@@ -1957,13 +1958,14 @@ export async function login(accessToken: string): Promise<UserAccessToken> {
 
 export async function loginGoogle(
   accessToken: string,
-  signupCode?: string
+  signupCode?: string,
+  loginType?: LoginType
 ): Promise<UserAccessToken> {
   return execGql<UserAccessToken>(
     {
       query: `
-      mutation LoginGoogle($accessToken: String!, $signupCode: String, $lockMentorToConfig: Boolean) {
-        loginGoogle(accessToken: $accessToken, mentorConfig: $signupCode, lockMentorToConfig: $lockMentorToConfig) {
+      mutation LoginGoogle($accessToken: String!, $signupCode: String, $lockMentorToConfig: Boolean, $loginType: String) {
+        loginGoogle(accessToken: $accessToken, mentorConfig: $signupCode, lockMentorToConfig: $lockMentorToConfig, loginType: $loginType) {
           user {
             _id
             name
@@ -1984,6 +1986,7 @@ export async function loginGoogle(
         accessToken: accessToken,
         signupCode: signupCode,
         lockMentorToConfig: true,
+        loginType: loginType,
       },
     },
     // login responds with set-cookie, w/o withCredentials it doesnt get stored

diff --git a/client/src/components/login.tsx b/client/src/components/login.tsx
@@ -20,6 +20,9 @@ import { ConfigStatus } from "store/slices/config";
 import { useWithLogin } from "store/slices/login/useWithLogin";
 import { OverridableTokenClientConfig } from "@react-oauth/google";
 import { MentorConfig } from "types-gql";
+import { LoginType } from "types";
+import { LoginRejectedReason } from "store/slices/login";
+import { navigate } from "gatsby";
 
 const useStyles = makeStyles({ name: { LoginPage } })((theme: Theme) => ({
   toolbar: {
@@ -46,8 +49,9 @@ function LoginPage(props: {
     overrideConfig?: OverridableTokenClientConfig | undefined
   ) => void;
   mentorConfig?: MentorConfig;
+  loginType: LoginType;
 }): JSX.Element {
-  const { mentorConfig } = props;
+  const { mentorConfig, loginType } = props;
   const { classes } = useStyles();
   const { state: configState, loadConfig } = useWithConfig();
   const { state: loginState, login } = useWithLogin();
@@ -99,8 +103,22 @@ function LoginPage(props: {
       <div className={classes.toolbar} /> {/* create space below app bar */}
       <Typography variant="h5" className={classes.title}>
         {mentorConfig?.loginHeaderText ||
-          "Please sign in to access the Mentor Studio portal"}
+          `Please sign ${
+            loginType === LoginType.SIGN_IN ? "in" : "up"
+          } to access the Mentor Studio portal`}
       </Typography>
+      {loginState.rejectedReason && (
+        <Typography variant="h6" color="error">
+          {loginState.rejectedReason ===
+          LoginRejectedReason.NO_ACCOUNT_FOUND ? (
+            <div>
+              No account found, please <a href="/signup">sign up</a>.
+            </div>
+          ) : (
+            "Error signing in"
+          )}
+        </Typography>
+      )}
       {process.env.ACCESS_TOKEN ? (
         <Button
           variant="contained"
@@ -117,11 +135,28 @@ function LoginPage(props: {
           color="primary"
           onClick={() => props.onGoogleLogin()}
           className={classes.button}
+          style={{ fontSize: "16px" }}
           data-cy="login-btn"
         >
-          Sign in with Google
+          Sign {loginType === LoginType.SIGN_IN ? "in" : "up"} with Google
         </Button>
       )}
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={() => {
+          if (loginType === LoginType.SIGN_IN) {
+            navigate("/signup");
+          } else {
+            navigate("/");
+          }
+        }}
+        className={classes.button}
+        style={{ width: "fit-content", textTransform: "none" }}
+        data-cy="signup-btn"
+      >
+        Sign-{loginType === LoginType.SIGN_IN ? "Up" : "In"} page
+      </Button>
     </div>
   );
 }

diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
@@ -12,6 +12,7 @@ import { useWithLogin } from "store/slices/login/useWithLogin";
 import { LoginStatus } from "store/slices/login";
 
 import { GoogleOAuthProvider, useGoogleLogin } from "@react-oauth/google";
+import { LoginType } from "types";
 
 /**
  * Separate functional component in order for useGoogleLogin to be nested under GoogleOAuthProvider (This provider did not want to work in gatsby-browser, bug reported by others)
@@ -20,13 +21,13 @@ function PrimaryDisplayHolder(): JSX.Element {
   const { state: loginState, loginWithGoogle } = useWithLogin();
   const login = useGoogleLogin({
     onSuccess: (tokenResponse) => {
-      loginWithGoogle(tokenResponse.access_token);
+      loginWithGoogle(tokenResponse.access_token, undefined, LoginType.SIGN_IN);
     },
   });
   if (loginState.loginStatus === LoginStatus.AUTHENTICATED) {
     return <HomePage />;
   } else {
-    return <LoginPage onGoogleLogin={login} />;
+    return <LoginPage onGoogleLogin={login} loginType={LoginType.SIGN_IN} />;
   }
 }
 

diff --git a/client/src/pages/signup.tsx b/client/src/pages/signup.tsx
@@ -15,6 +15,7 @@ import { GoogleOAuthProvider, useGoogleLogin } from "@react-oauth/google";
 import withLocation from "wrap-with-location";
 import { fetchMentorConfig } from "api";
 import { MentorConfig } from "types-gql";
+import { LoginType } from "types";
 
 /**
  * Separate functional component in order for useGoogleLogin to be nested under GoogleOAuthProvider (This provider did not want to work in gatsby-browser, bug reported by others)
@@ -38,14 +39,24 @@ function PrimaryDisplayHolder(): JSX.Element {
   }, []);
   const login = useGoogleLogin({
     onSuccess: (tokenResponse) => {
-      loginWithGoogle(tokenResponse.access_token, signupCode);
+      loginWithGoogle(
+        tokenResponse.access_token,
+        signupCode,
+        LoginType.SIGN_UP
+      );
     },
   });
   if (loginState.loginStatus === LoginStatus.AUTHENTICATED) {
     return <HomePage />;
   } else {
     // Check for url param
-    return <LoginPage onGoogleLogin={login} mentorConfig={mentorConfig} />;
+    return (
+      <LoginPage
+        onGoogleLogin={login}
+        mentorConfig={mentorConfig}
+        loginType={LoginType.SIGN_UP}
+      />
+    );
   }
 }
 

diff --git a/client/src/store/slices/login/index.ts b/client/src/store/slices/login/index.ts
@@ -14,7 +14,7 @@ import {
   sessionStorageClear,
   sessionStorageStore,
 } from "store/local-storage";
-import { User } from "types";
+import { LoginType, User } from "types";
 import { extractErrorMessageFromError } from "helpers";
 
 /** Store */
@@ -27,11 +27,19 @@ export enum LoginStatus {
   FAILED = 4,
 }
 
+export enum LoginRejectedReason {
+  NONE = "NONE",
+  DISABLED = "DISABLED",
+  FAILED = "FAILED",
+  NO_ACCOUNT_FOUND = "NO_ACCOUNT_FOUND",
+}
+
 export interface LoginState {
   accessToken?: string;
   loginStatus: LoginStatus;
   user?: User;
   isDisabled?: boolean;
+  rejectedReason?: LoginRejectedReason;
 }
 
 const initialState: LoginState = {
@@ -80,13 +88,15 @@ export const googleLogin = createAsyncThunk(
     args: {
       accessToken: string;
       signupCode?: string;
+      loginType?: LoginType;
     },
     thunkAPI
   ) => {
     try {
       const googleLogin = await api.loginGoogle(
         args.accessToken,
-        args.signupCode
+        args.signupCode,
+        args.loginType
       );
       localStorageStore(ACCESS_TOKEN_KEY, googleLogin.accessToken);
       sessionStorageClear(ACTIVE_MENTOR_KEY);
@@ -182,8 +192,13 @@ export const loginSlice = createSlice({
           );
         }
       })
-      .addCase(googleLogin.rejected, (state) => {
+      .addCase(googleLogin.rejected, (state, action) => {
         delete state.user;
+        if (action.error.message?.includes("No user found")) {
+          state.rejectedReason = LoginRejectedReason.NO_ACCOUNT_FOUND;
+        } else {
+          state.rejectedReason = LoginRejectedReason.FAILED;
+        }
         state.loginStatus = LoginStatus.FAILED;
       })
       // Add cases for userSawSplashScreen action here, all you need for this one is the fulfilled case

diff --git a/client/src/store/slices/login/useWithLogin.ts b/client/src/store/slices/login/useWithLogin.ts
@@ -8,13 +8,18 @@ import { useEffect } from "react";
 import { useAppSelector, useAppDispatch } from "store/hooks";
 import { ACCESS_TOKEN_KEY, localStorageGet } from "store/local-storage";
 import * as loginActions from ".";
+import { LoginType } from "types";
 
 interface UseWithLogin {
   state: loginActions.LoginState;
   login: (accessToken: string) => void;
   userSawSplashScreen: (accessToken: string) => void;
   userSawTooltips: (accessToken: string) => void;
-  loginWithGoogle: (googleAccessToken: string, signupCode?: string) => void;
+  loginWithGoogle: (
+    googleAccessToken: string,
+    signupCode?: string,
+    loginType?: LoginType
+  ) => void;
   logout: () => void;
 }
 
@@ -45,14 +50,22 @@ export function useWithLogin(): UseWithLogin {
     }
   }
 
-  function loginWithGoogle(googleAccessToken: string, signupCode?: string) {
+  function loginWithGoogle(
+    googleAccessToken: string,
+    signupCode?: string,
+    loginType?: LoginType
+  ) {
     if (
       state.loginStatus === loginActions.LoginStatus.NONE ||
       state.loginStatus === loginActions.LoginStatus.NOT_LOGGED_IN ||
       state.loginStatus === loginActions.LoginStatus.FAILED
     ) {
       dispatch(
-        loginActions.googleLogin({ accessToken: googleAccessToken, signupCode })
+        loginActions.googleLogin({
+          accessToken: googleAccessToken,
+          signupCode,
+          loginType,
+        })
       );
     }
   }

diff --git a/client/src/store/slices/questions/index.ts b/client/src/store/slices/questions/index.ts
@@ -44,13 +44,14 @@ export const loadQuestionsById = createAsyncThunk(
   ): Promise<CancellabeResult<Question[]>> => {
     const state = thunkAPI.getState() as RootState;
     const ids = args.reload
-      ? args.ids
+      ? args.ids.filter((id) => id)
       : args.ids.filter((id) => {
           const q = getValueIfKeyExists(id, state.questions.questions);
           return (
-            !q ||
-            q.status === LoadingStatus.FAILED ||
-            q.status === LoadingStatus.NONE
+            id &&
+            (!q ||
+              q.status === LoadingStatus.FAILED ||
+              q.status === LoadingStatus.NONE)
           );
         });
     if (ids.length === 0) {

diff --git a/client/src/types.ts b/client/src/types.ts
@@ -487,6 +487,11 @@ export enum EditType {
   OLD_ANSWER = "OLD_ANSWER",
 }
 
+export enum LoginType {
+  SIGN_IN = "SIGN_IN",
+  SIGN_UP = "SIGN_UP",
+}
+
 export enum LoginStatus {
   NONE = 0,
   IN_PROGRESS = 1,