Merge pull request #311 from NIAEFEUP/feature/login-button

Add login button to every page
NIAEFEUP · May 15, 2023 · 7f34686 · 7f34686
2 parents e2c6463 + e0667df
commit 7f34686
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 61 deletions.
diff --git a/src/components/Navbar/Auth/LoginForm.js b/src/components/Navbar/Auth/LoginForm.js
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { login } from "../../../services/auth";
+import { RouterLink } from "../../../utils";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import LoginSchema from "./LoginSchema";
@@ -13,11 +14,16 @@ import {
     DialogActions,
     Button,
     FormHelperText,
+    Typography,
 } from "@material-ui/core";
+
+import { useMobile } from "../../../utils/media-queries";
+
 import useToggle from "../../../hooks/useToggle";
 
 const LoginForm = ({ toggleAuthModal, updateSessionInfo, setRecoveryRequestPage }) => {
-    const classes = useAuthStyles();
+    const isMobile = useMobile();
+    const classes = useAuthStyles({ isMobile });
 
     const { register, handleSubmit, formState: { errors } } = useForm({
         mode: "onBlur",
@@ -90,15 +96,36 @@ const LoginForm = ({ toggleAuthModal, updateSessionInfo, setRecoveryRequestPage
                     {loginError || " "}
                 </FormHelperText>
             </DialogContent>
-            <DialogActions>
+            <div className={classes.modalOptions}>
+                <Typography className={classes.smallText}>
+                    Lost your password?
+                </Typography>
                 <Button
+                    className={classes.smallText}
                     onClick={setRecoveryRequestPage}
                     variant="text"
                     disabled={loginPending}
-                    color="secondary"
+                    color="primary"
+                >
+                    Recover Password
+                </Button>
+            </div>
+            <div className={classes.modalOptions}>
+                <Typography className={classes.smallText}>
+                    Don&apos;t have an account?
+                </Typography>
+                <Button
+                    className={classes.smallText}
+                    onClick={toggleAuthModal}
+                    variant="text"
+                    color="primary"
+                    component={RouterLink}
+                    to="/apply/company"
                 >
-                    Lost password?
+                    Join Us
                 </Button>
+            </div>
+            <DialogActions>
                 <Button
                     onClick={toggleAuthModal}
                     variant="text"

diff --git a/src/components/Navbar/Auth/LoginForm.spec.js b/src/components/Navbar/Auth/LoginForm.spec.js
@@ -7,6 +7,7 @@ import { fireEvent, act, renderWithStoreAndTheme } from "../../../test-utils";
 import Constants from "../../../utils/Constants";
 import { SnackbarProvider } from "notistack";
 import { createTheme } from "@material-ui/core";
+import { BrowserRouter } from "react-router-dom/cjs/react-router-dom.min";
 
 jest.mock("../../../services/auth");
 
@@ -29,7 +30,9 @@ describe("Navbar - AuthModal - LoginForm", () => {
 
             const wrapper = renderWithStoreAndTheme(
                 <SnackbarProvider maxSnack={3}>
-                    <AuthModal open toggleAuthModal={toggleAuthModal} />
+                    <BrowserRouter>
+                        <AuthModal open toggleAuthModal={toggleAuthModal} />
+                    </BrowserRouter>
                 </SnackbarProvider>, { initialState: {}, theme });
 
             const dialogTitle = wrapper.queryByRole("heading", { level: 2, name: "Login" });
@@ -48,9 +51,11 @@ describe("Navbar - AuthModal - LoginForm", () => {
 
             const wrapper = renderWithStoreAndTheme(
                 <SnackbarProvider maxSnack={3}>
-                    <AuthModal open toggleAuthModal={toggleAuthModal} />
+                    <BrowserRouter>
+                        <AuthModal open toggleAuthModal={toggleAuthModal} />
+                    </BrowserRouter>
                 </SnackbarProvider>, { initialState: {}, theme });
-            fireEvent.click(wrapper.getByText("Lost password?"));
+            fireEvent.click(wrapper.getByText("Recover Password"));
 
             const dialogTitle = wrapper.queryByRole("heading", { level: 2, name: "Recover Password" });
             expect(dialogTitle).toBeInTheDocument();
@@ -65,12 +70,14 @@ describe("Navbar - AuthModal - LoginForm", () => {
 
             const { getByRole, getByLabelText } = renderWithStoreAndTheme(
                 <SnackbarProvider maxSnack={3}>
-                    <AuthModal
-                        open
-                        toggleAuthModal={toggleAuthModal}
-                        toggleLoginPending={() => {}}
-                        updateSessionInfo={() => {}}
-                    />
+                    <BrowserRouter>
+                        <AuthModal
+                            open
+                            toggleAuthModal={toggleAuthModal}
+                            toggleLoginPending={() => {}}
+                            updateSessionInfo={() => {}}
+                        />
+                    </BrowserRouter>
                 </SnackbarProvider>, { initialState: {}, theme });
 
             await act(async () => {
@@ -90,12 +97,14 @@ describe("Navbar - AuthModal - LoginForm", () => {
 
             const wrapper = renderWithStoreAndTheme(
                 <SnackbarProvider maxSnack={3}>
-                    <AuthModal
-                        open
-                        toggleAuthModal={() => {}}
-                        toggleLoginPending={() => {}}
-                        updateSessionInfo={() => {}}
-                    />
+                    <BrowserRouter>
+                        <AuthModal
+                            open
+                            toggleAuthModal={() => {}}
+                            toggleLoginPending={() => {}}
+                            updateSessionInfo={() => {}}
+                        />
+                    </BrowserRouter>
                 </SnackbarProvider>, { initialState: {}, theme });
 
 
@@ -131,12 +140,14 @@ describe("Navbar - AuthModal - LoginForm", () => {
 
             const wrapper = renderWithStoreAndTheme(
                 <SnackbarProvider maxSnack={3}>
-                    <AuthModal
-                        open
-                        toggleAuthModal={() => {}}
-                        toggleLoginPending={() => {}}
-                        updateSessionInfo={() => {}}
-                    />
+                    <BrowserRouter>
+                        <AuthModal
+                            open
+                            toggleAuthModal={() => {}}
+                            toggleLoginPending={() => {}}
+                            updateSessionInfo={() => {}}
+                        />
+                    </BrowserRouter>
                 </SnackbarProvider>, { initialState: {}, theme });
 
             await act(async () => {
@@ -159,12 +170,14 @@ describe("Navbar - AuthModal - LoginForm", () => {
 
             const wrapper = renderWithStoreAndTheme(
                 <SnackbarProvider maxSnack={3}>
-                    <AuthModal
-                        open
-                        toggleAuthModal={() => {}}
-                        toggleLoginPending={() => {}}
-                        updateSessionInfo={() => {}}
-                    />
+                    <BrowserRouter>
+                        <AuthModal
+                            open
+                            toggleAuthModal={() => {}}
+                            toggleLoginPending={() => {}}
+                            updateSessionInfo={() => {}}
+                        />
+                    </BrowserRouter>
                 </SnackbarProvider>, { initialState: {}, theme });
 
             await act(async () => {

diff --git a/src/components/Navbar/Auth/PasswordRecoveryForm.spec.js b/src/components/Navbar/Auth/PasswordRecoveryForm.spec.js
@@ -7,6 +7,7 @@ import { fireEvent, act, renderWithStoreAndTheme } from "../../../test-utils";
 import Constants from "../../../utils/Constants";
 import { SnackbarProvider } from "notistack";
 import { createTheme } from "@material-ui/core";
+import { BrowserRouter } from "react-router-dom/cjs/react-router-dom.min";
 
 jest.mock("../../../services/auth");
 
@@ -31,11 +32,13 @@ describe("Navbar - AuthModal - PasswordRecoveryForm", () => {
 
             const wrapper = renderWithStoreAndTheme(
                 <SnackbarProvider maxSnack={3}>
-                    <AuthModal open toggleAuthModal={toggleAuthModal} initialPage={1} />
+                    <BrowserRouter>
+                        <AuthModal open toggleAuthModal={toggleAuthModal} initialPage={1} />
+                    </BrowserRouter>
                 </SnackbarProvider>, { initialState: {}, theme }
             );
 
-            fireEvent.click(wrapper.getByText("Lost password?"));
+            fireEvent.click(wrapper.getByText("Recover Password"));
 
             const dialogTitle = wrapper.queryByRole("heading", { level: 2, name: "Recover Password" });
             expect(dialogTitle).toBeInTheDocument();
@@ -51,11 +54,13 @@ describe("Navbar - AuthModal - PasswordRecoveryForm", () => {
 
             const wrapper = renderWithStoreAndTheme(
                 <SnackbarProvider maxSnack={3}>
-                    <AuthModal open toggleAuthModal={toggleAuthModal} initialPage={1} />
+                    <BrowserRouter>
+                        <AuthModal open toggleAuthModal={toggleAuthModal} initialPage={1} />
+                    </BrowserRouter>
                 </SnackbarProvider>, { initialState: {}, theme }
             );
 
-            fireEvent.click(wrapper.getByText("Lost password?"));
+            fireEvent.click(wrapper.getByText("Recover Password"));
 
 
             fireEvent.click(wrapper.getByText("Login"));
@@ -73,15 +78,17 @@ describe("Navbar - AuthModal - PasswordRecoveryForm", () => {
 
             const wrapper = renderWithStoreAndTheme(
                 <SnackbarProvider maxSnack={3}>
-                    <AuthModal
-                        open
-                        toggleAuthModal={toggleAuthModal}
-                        updateSessionInfo={() => {}}
-                    />
+                    <BrowserRouter>
+                        <AuthModal
+                            open
+                            toggleAuthModal={toggleAuthModal}
+                            updateSessionInfo={() => {}}
+                        />
+                    </BrowserRouter>
                 </SnackbarProvider>, { initialState: {}, theme }
             );
 
-            fireEvent.click(wrapper.getByText("Lost password?"));
+            fireEvent.click(wrapper.getByText("Recover Password"));
 
 
             await act(async () => {
@@ -102,15 +109,17 @@ describe("Navbar - AuthModal - PasswordRecoveryForm", () => {
         it("Should not allow invalid email", async () => {
             const wrapper = renderWithStoreAndTheme(
                 <SnackbarProvider maxSnack={3}>
-                    <AuthModal
-                        open
-                        toggleAuthModal={() => {}}
-                        updateSessionInfo={() => {}}
-                    />
+                    <BrowserRouter>
+                        <AuthModal
+                            open
+                            toggleAuthModal={() => {}}
+                            updateSessionInfo={() => {}}
+                        />
+                    </BrowserRouter>
                 </SnackbarProvider>, { initialState: {}, theme }
             );
 
-            fireEvent.click(wrapper.getByText("Lost password?"));
+            fireEvent.click(wrapper.getByText("Recover Password"));
 
 
             await act(async () => {
@@ -151,16 +160,18 @@ describe("Navbar - AuthModal - PasswordRecoveryForm", () => {
 
             const wrapper = renderWithStoreAndTheme(
                 <SnackbarProvider maxSnack={3}>
-                    <AuthModal
-                        open
-                        toggleAuthModal={() => {}}
-                        toggleLoginPending={() => {}}
-                        updateSessionInfo={() => {}}
-                    />
+                    <BrowserRouter>
+                        <AuthModal
+                            open
+                            toggleAuthModal={() => {}}
+                            toggleLoginPending={() => {}}
+                            updateSessionInfo={() => {}}
+                        />
+                    </BrowserRouter>
                 </SnackbarProvider>, { initialState: {}, theme }
             );
 
-            fireEvent.click(wrapper.getByText("Lost password?"));
+            fireEvent.click(wrapper.getByText("Recover Password"));
 
             await act(async () => {
                 await fireEvent.change(wrapper.getByLabelText("Email"), { target: { value: "[email protected]" } });

diff --git a/src/components/Navbar/Auth/authStyles.js b/src/components/Navbar/Auth/authStyles.js
@@ -20,4 +20,14 @@ export default makeStyles((theme) => ({
         composes: "$loginProgress",
         color: theme.palette.primary.main,
     },
+    modalOptions: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        marginLeft: theme.spacing(3),
+        fontSize: "4px",
+    },
+    smallText: {
+        fontSize: "0.85rem",
+    },
 }));
diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js
@@ -17,7 +17,7 @@ import useSession from "../../hooks/useSession";
 import UserMenu from "./UserMenu";
 
 import { useMobile } from "../../utils/media-queries";
-import { MenuRounded, Home } from "@material-ui/icons";
+import { MenuRounded, Home, ExitToApp } from "@material-ui/icons";
 
 
 import useNavbarStyles from "./navbarStyles";
@@ -67,10 +67,10 @@ const Navbar = ({
             data-testid="navbar"
         >
             <Toolbar className={classes.toolbar}>
-                <div className={ classes.homePageLink }>
+                <div>
                     {showHomePageLink &&
                         <Link to="/" className={classes.linkStyle}>
-                            <Home className={classes.homeIcon}  />
+                            <Home className={classes.homeIcon} />
                             {desktopLayout && "HOMEPAGE"}
                         </Link>
                     }
@@ -125,6 +125,19 @@ const Navbar = ({
                     toggleAuthModal={toggleAuthModal}
                     addSnackbar={addSnackbar}
                 />
+                <div>
+                    {showHomePageLink && !isLoggedIn &&
+                        <Button
+                            className={classes.linkStyle}
+                            variant="text"
+                            color="primary"
+                            onClick={toggleAuthModal}
+                        >
+                            {!desktopLayout && <ExitToApp />}
+                            {desktopLayout && "SIGN IN"}
+                        </Button>
+                    }
+                </div>
             </Toolbar>
         </AppBar>
     );

diff --git a/src/components/Navbar/navbarStyles.js b/src/components/Navbar/navbarStyles.js
@@ -5,11 +5,9 @@ export default makeStyles((theme) => ({
     navbar: ({ isMobile }) => ({
         paddingTop: theme.spacing(isMobile ? 0 : 3),
     }),
-    toolbar: {
+    toolbar: ({ isMobile }) => ({
         display: "flex",
-    },
-    homePageLink: ({ isMobile }) => ({
-        marginLeft: theme.spacing(isMobile ? 0 : 3),
+        paddingInline: theme.spacing(isMobile ? 1 : 6),
     }),
     linkStyle: ({ desktopLayout }) => ({
         textDecoration: "none",