From cc54d3661848274cd6cae0df160f6917a463cbbc Mon Sep 17 00:00:00 2001
From: Alex <92830192+EtoKruto@users.noreply.github.com>
Date: Thu, 20 Jul 2023 18:39:02 -0700
Subject: [PATCH] 306 sign in and modal (new) (#351)

* Modal working, test modal opens closes successfully

* Modal handleClickOutisde still not working, otherwise removed paths to login/signup page and now all pages show modal correctly

* finalized css of the modal, added handleClose function on URL change or when the X on the top right is used

* resolved comments, removed google and facebook buttons, changed colors to theme.palette

* fixed merge conflicts and typescritp conflicts
---
 client/src/App.tsx                            |  44 ++--
 client/src/components/Header.tsx              |  74 +++---
 client/src/components/Modal.tsx               | 115 ++++++++++
 client/src/components/Modals/SignInModal.tsx  | 210 ++++++++++++++++++
 client/src/components/Modals/SignUpModal.tsx  |  34 +++
 .../components/Users/Auth/FacebookAuthBtn.tsx |   4 +-
 .../components/Users/Auth/GoogleAuthBtn.tsx   |  12 +-
 .../components/Users/Auth/PasswordInput.tsx   |   3 +
 client/src/providers/ModalProvider.tsx        |  39 ++++
 client/src/providers/index.ts                 |   1 +
 client/src/routes/routes.ts                   |   6 -
 client/src/views/Main.tsx                     |   4 -
 12 files changed, 482 insertions(+), 64 deletions(-)
 create mode 100644 client/src/components/Modal.tsx
 create mode 100644 client/src/components/Modals/SignInModal.tsx
 create mode 100644 client/src/components/Modals/SignUpModal.tsx
 create mode 100644 client/src/providers/ModalProvider.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index b72c6468..9eb78438 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -4,11 +4,13 @@ import { BrowserRouter } from 'react-router-dom';
 import { Grid, ThemeProvider, StyledEngineProvider } from '@mui/material';
 
 import theme from './theme';
-import Footer from './components/Footer';
 import Header from './components/Header';
 import Main from './views/Main';
-import { UserProvider } from './providers';
+import Footer from './components/Footer';
+import Modal from './components/Modal';
 
+import { UserProvider } from './providers';
+import { ModalProvider } from './providers/ModalProvider';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 
@@ -28,24 +30,28 @@ function App(): JSX.Element {
         <QueryClientProvider client={queryClient}>
           <ReactQueryDevtools />
           <UserProvider>
-            <BrowserRouter
-              getUserConfirmation={() => {
-                // intentionally left empty callback to block the default browser prompt.
-              }}
-            >
-              <Grid
-                className="App"
-                display="flex"
-                flexDirection="column"
-                height="100vh"
-                width="100vw"
-                justifyContent="space-between"
+            <ModalProvider>
+              <BrowserRouter
+                getUserConfirmation={() => {
+                  // intentionally left empty callback to block the default browser prompt.
+                }}
               >
-                <Header />
-                <Main />
-                <Footer />
-              </Grid>
-            </BrowserRouter>
+                <Grid
+                  className="App"
+                  display="flex"
+                  flexDirection="column"
+                  height="100vh"
+                  width="100vw"
+                  justifyContent="space-between"
+                >
+                  {/* move modal to below footer after troubleshooting */}
+                  <Modal />
+                  <Header />
+                  <Main />
+                  <Footer />
+                </Grid>
+              </BrowserRouter>
+            </ModalProvider>
           </UserProvider>
         </QueryClientProvider>
       </ThemeProvider>
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 9e0c00a6..8f568d86 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -1,5 +1,6 @@
-import * as React from 'react';
+import React, { useContext } from 'react';
 import { NavLink, useHistory } from 'react-router-dom';
+
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Button from '@mui/material/Button';
@@ -7,7 +8,6 @@ import { makeStyles } from 'tss-react/mui';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
-
 import IconButton from '@mui/material/IconButton';
 import AppsIcon from '@mui/icons-material/Apps';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
@@ -29,6 +29,7 @@ import Logo from '../assets/GivingfulLogo.png';
 import routes from '../routes/routes';
 import { APP_API_BASE_URL } from '../configs';
 import { UserAvatar } from './Users/UserAvatar';
+import { ModalContext } from './../providers/ModalProvider';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   home: {
@@ -73,6 +74,27 @@ const useStyles = makeStyles()((theme: Theme) => ({
   logo: {
     height: '30px',
   },
+  signUpButton: {
+    textTransform: 'capitalize',
+    backgroundColor: theme.palette.primary.main,
+    color: `${theme.palette.primary.contrastText}`,
+    borderRadius: '10px',
+    border: `1px solid ${theme.palette.primary.main}`,
+    marginLeft: '0px',
+    width: '100px',
+    '&:hover': {
+      color: `${theme.palette.text.primary}`,
+    },
+  },
+  signInButton: {
+    textTransform: 'capitalize',
+    backgroundColor: `${theme.palette.primary.contrastText}`,
+    color: `${theme.palette.text.primary}`,
+    borderRadius: '10px',
+    border: `1px solid ${theme.palette.black.light}`,
+    marginLeft: '10px',
+    width: '100px',
+  },
 }));
 
 function Header() {
@@ -91,6 +113,17 @@ function Header() {
   const isAboutMenuOpen = Boolean(aboutAnchorEl);
   const isExchangeMenuOpen = Boolean(exchangeAnchorEl);
 
+  const modalContext = useContext(ModalContext);
+  const { openModal } = modalContext;
+
+  const handleoOpenModal = (modalType: 'SignIn' | 'SignUp') => {
+    if (modalType === 'SignIn') {
+      openModal('SignIn');
+    } else if (modalType === 'SignUp') {
+      openModal('SignUp');
+    }
+  };
+
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     switch (event?.currentTarget?.id) {
       case 'navigation-button': {
@@ -149,6 +182,7 @@ function Header() {
               sx={{
                 textTransform: 'capitalize',
                 color: '#323232',
+                marginRight: '10px',
               }}
             >
               Exchange
@@ -442,36 +476,12 @@ function Header() {
             </>
           ) : (
             <>
-              <NavLink className={classes.navLink} to={routes.Signup.path}>
-                <Button
-                  sx={{
-                    textTransform: 'capitalize',
-                    backgroundColor: '#EF6A60',
-                    color: 'white',
-                    borderRadius: '10px',
-                    border: '1px solid #EF6A60',
-                    marginRight: '10px',
-                    width: '100px',
-                  }}
-                >
-                  Join Now
-                </Button>
-              </NavLink>
-              <NavLink className={classes.navLink} to={routes.Login.path}>
-                <Button
-                  sx={{
-                    textTransform: 'capitalize',
-                    backgroundColor: 'white',
-                    color: '#323232',
-                    borderRadius: '10px',
-                    border: '1px solid #323232',
-                    marginLeft: '5px',
-                    width: '100px',
-                  }}
-                >
-                  Sign In
-                </Button>
-              </NavLink>
+              <Button className={classes.signUpButton} onClick={() => handleoOpenModal('SignUp')}>
+                Join Now
+              </Button>
+              <Button className={classes.signInButton} onClick={() => handleoOpenModal('SignIn')}>
+                Sign In
+              </Button>
             </>
           )}
         </div>
diff --git a/client/src/components/Modal.tsx b/client/src/components/Modal.tsx
new file mode 100644
index 00000000..08cc91be
--- /dev/null
+++ b/client/src/components/Modal.tsx
@@ -0,0 +1,115 @@
+import React, { useContext, useEffect, useRef } from 'react';
+import { ModalContext } from './../providers/ModalProvider';
+import { makeStyles } from 'tss-react/mui';
+import type { Theme } from '@mui/material/styles';
+import SignIn from './Modals/SignInModal';
+import SignUp from './Modals/SignUpModal';
+
+const useStyles = makeStyles()((theme: Theme) => {
+  const xPadding = 6;
+  const yPadding = 6;
+
+  return {
+    outerShell: {
+      borderRadius: 20,
+      minWidth: 600,
+      minHeight: 600,
+      maxWidth: 732 - theme.spacing(xPadding),
+      maxHeight: 732 - theme.spacing(yPadding),
+    },
+    paper: {
+      marginTop: theme.spacing(yPadding),
+      marginBottom: theme.spacing(yPadding),
+      width: '80%',
+    },
+    content: {
+      padding: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
+    header: {
+      fontWeight: 'normal',
+      marginTop: 50,
+      display: 'flex',
+      justifyContent: 'center',
+    },
+    loginButton: {
+      borderRadius: 10,
+      fontSize: 17,
+      width: 180,
+      height: 50,
+      textTransform: 'none',
+      color: 'white',
+      backgroundColor: theme.palette.primary.main,
+      fontFamily: 'Poppins',
+      fontWeight: 'semi-bold',
+      border: 'none',
+      '&:hover': {
+        cursor: 'pointer',
+      },
+    },
+    buttonContainer: {
+      marginBottom: theme.spacing(1),
+      width: '65%',
+      display: 'flex',
+      justifyContent: 'center',
+    },
+    closeButton: {
+      position: 'absolute',
+      right: 40,
+      top: 28,
+      transition: 'background-color 0.3s',
+      '&:hover': {
+        backgroundColor: theme.palette.grey[700],
+      },
+    },
+  };
+});
+
+const Modal = () => {
+  const modalContext = useContext(ModalContext);
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  const { classes } = useStyles();
+  const { modal, closeModal } = modalContext;
+
+  useEffect(() => {
+    if (!modalContext || !modalContext.modal || !closeModal) return;
+
+    const handleClickOutside = (event: any) => {
+      // console.log('event.target', event.target); //uncomment to event.target clicked html
+      // console.log('modalRef.current', modalRef.current); //uncomment to modalRef.current reference html aka the Modal itself
+
+      if (modalRef.current && !modalRef.current.contains(event.target)) {
+        closeModal();
+      }
+    };
+
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [modalContext, closeModal]);
+
+  if (!modalContext || !modalContext.modal) return null;
+
+  let SpecificModal;
+  if (modal && modal.type === 'SignIn') {
+    SpecificModal = SignIn;
+  } else if (modal && modal.type === 'SignUp') {
+    SpecificModal = SignUp;
+  } else {
+    return null;
+  }
+
+  return (
+    <div id="mango">
+      <SpecificModal ref={modalRef} closeModal={closeModal} className={classes} />
+    </div>
+  );
+};
+
+export default Modal;
diff --git a/client/src/components/Modals/SignInModal.tsx b/client/src/components/Modals/SignInModal.tsx
new file mode 100644
index 00000000..6c3293d1
--- /dev/null
+++ b/client/src/components/Modals/SignInModal.tsx
@@ -0,0 +1,210 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+
+import CloseIcon from '@mui/icons-material/Close';
+import IconButton from '@mui/material/IconButton';
+
+import EmailInput from '../../components/Users/Auth/EmailInput';
+import PasswordInput from '../../components/Users/Auth/PasswordInput';
+import StyledLink from '../../components/StyledLink';
+import Divider from '@mui/material/Divider';
+
+import { UserContext } from '../../providers';
+import routes from '../../routes/routes';
+import { APP_API_BASE_URL } from '../../configs';
+interface SignInModalProps {
+  closeModal: () => void;
+  className: {
+    outerShell: string;
+    paper: string;
+    content: string;
+    header: string;
+    loginButton: string;
+    buttonContainer: string;
+    closeButton: string;
+  };
+}
+
+interface UserLoginData {
+  email: string;
+  password: string;
+}
+
+const initialFormData: UserLoginData = {
+  email: '',
+  password: '',
+};
+
+interface Error {
+  type: '' | 'email' | 'password';
+  message: string;
+}
+const SignInModal = React.forwardRef<HTMLDivElement, SignInModalProps>(
+  ({ closeModal, className }, ref) => {
+    const history = useHistory();
+    const [isLoading, setIsLoading] = React.useState<boolean>(false);
+    const [error, setError] = React.useState<Error | null>(null);
+    const { setUser } = React.useContext(UserContext);
+
+    const [formData, setFormData] = React.useState<UserLoginData>(initialFormData);
+
+    const handleCloseModal = React.useCallback(() => {
+      closeModal();
+    }, [closeModal]);
+
+    React.useEffect(() => {
+      // This function is called every time the URL changes
+      const unlisten = history.listen(() => {
+        handleCloseModal();
+      });
+
+      // Cleanup function to be run when the component unmounts
+      return () => {
+        unlisten();
+      };
+    }, [history, handleCloseModal]);
+
+    const handleChange = (evt: React.ChangeEvent<HTMLInputElement>): void => {
+      const { name, value }: { name: string; value: string } = evt.target;
+      setFormData((fData) => ({
+        ...fData,
+        [name]: value,
+      }));
+    };
+
+    const handleSubmit = async (evt: React.FormEvent): Promise<void> => {
+      evt.preventDefault();
+      setIsLoading(true);
+      const res = await fetch(`${APP_API_BASE_URL}/auth/login`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+        credentials: 'include',
+      });
+      const response = await res.json();
+      setIsLoading(false);
+
+      if (!res.ok) {
+        if (response.error === 'Email not found') {
+          setError({ type: 'email', message: response.error });
+        } else if (response.error === 'Invalid password') {
+          setError({ type: 'password', message: response.error });
+        } else {
+          setError({ type: '', message: 'an unknown error occurred' });
+        }
+      } else {
+        setUser(response.user, false, true);
+        setError(null);
+        history.push('/');
+      }
+    };
+
+    return (
+      <>
+        <div ref={ref}></div>
+        <Dialog
+          ref={ref}
+          disableEscapeKeyDown={true}
+          open={true}
+          PaperProps={{ className: className.outerShell }}
+        >
+          <IconButton
+            edge="end"
+            color="inherit"
+            onClick={handleCloseModal}
+            aria-label="close"
+            className={className.closeButton}
+          >
+            <CloseIcon style={{ fontSize: '1.1em' }} />
+          </IconButton>
+          <DialogContent className={className.content}>
+            <Paper elevation={0} className={className.paper}>
+              <Grid container justifyContent="center" direction="column" spacing={2}>
+                <Grid item xs={12}>
+                  <Typography
+                    className={className.header}
+                    variant="h3"
+                    component={'span'}
+                    align="center"
+                  >
+                    Welcome Back!
+                  </Typography>
+                </Grid>
+                <Grid item xs={12}></Grid>
+                <Divider
+                  variant="middle"
+                  sx={{ marginLeft: 3, borderBottomWidth: 1, borderColor: '#000000' }}
+                ></Divider>
+                <Grid
+                  container
+                  item
+                  xs={12}
+                  style={{ paddingTop: 0, paddingLeft: 22, paddingRight: 16 }}
+                >
+                  <form onSubmit={handleSubmit} style={{ width: '100%' }}>
+                    <EmailInput
+                      value={formData.email}
+                      placeholder="jane@nonprofit.com"
+                      onChange={handleChange}
+                      error={error?.type === 'email' ? error.message : null}
+                      showStartAdornment={true}
+                    />
+                    <PasswordInput
+                      value={formData.password}
+                      placeholder="oooooo"
+                      onChange={handleChange}
+                      error={error?.type === 'password' ? error.message : null}
+                      showStartAdornment={true}
+                    />
+                    <Grid item xs={12} style={{ display: 'flex', paddingBottom: '60px' }}>
+                      <Grid item xs={12}>
+                        <Typography align="left" style={{ fontSize: '12px' }}>
+                          <StyledLink to={routes.ForgotPassword.path}>Forgot Password?</StyledLink>
+                        </Typography>
+                      </Grid>
+                      <Grid item xs={12}>
+                        <Typography align="right" style={{ fontSize: '12px' }}>
+                          Not signed up yet?{' '}
+                          <StyledLink to={routes.Signup.path}>Sign Up</StyledLink>
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                    <Grid
+                      item
+                      xs={12}
+                      style={{ display: 'flex', paddingBottom: '30px', justifyContent: 'center' }}
+                    >
+                      <Button
+                        className={className.loginButton}
+                        style={{ backgroundColor: '#EF6A60', color: 'white' }}
+                        fullWidth
+                        type="submit"
+                      >
+                        Login
+                      </Button>
+                      {/* Placeholder for loading  - waiting on UI/UX response as to what they want. */}
+                    </Grid>
+
+                    {isLoading && <Typography>Loading</Typography>}
+                  </form>
+                </Grid>
+              </Grid>
+            </Paper>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  },
+);
+
+export default SignInModal;
+
+// export default Login;
diff --git a/client/src/components/Modals/SignUpModal.tsx b/client/src/components/Modals/SignUpModal.tsx
new file mode 100644
index 00000000..822d2195
--- /dev/null
+++ b/client/src/components/Modals/SignUpModal.tsx
@@ -0,0 +1,34 @@
+// import Button from '@mui/material/Button';
+import React from 'react';
+
+interface SignUpModalProps {
+  closeModal: () => void;
+  className: {
+    outerShell: string;
+    paper: string;
+    content: string;
+    header: string;
+    loginButton: string;
+    buttonContainer: string;
+    closeButton: string;
+  };
+}
+
+const SignUpModal = React.forwardRef<HTMLDivElement, SignUpModalProps>(
+  ({ closeModal, className }, ref) => {
+    // const handleCloseModal = () => {
+    //   closeModal();
+    // };
+
+    return (
+      // <div>
+      //   <h2>Sign Up</h2>
+      //   {/* ... SIGNUP CODE ... */}
+      //   <Button onClick={handleCloseModal}>Cancel</Button>
+      // </div>
+      <div ref={ref}></div>
+    );
+  },
+);
+
+export default SignUpModal;
diff --git a/client/src/components/Users/Auth/FacebookAuthBtn.tsx b/client/src/components/Users/Auth/FacebookAuthBtn.tsx
index ed127f48..24c13c04 100644
--- a/client/src/components/Users/Auth/FacebookAuthBtn.tsx
+++ b/client/src/components/Users/Auth/FacebookAuthBtn.tsx
@@ -8,7 +8,9 @@ import type { Theme } from '@mui/material/styles';
 const useStyles = makeStyles()((theme: Theme) => {
   return {
     button: {
-      height: 44,
+      fontSize: 17,
+      width: 180,
+      height: 50,
       textTransform: 'none',
     },
   };
diff --git a/client/src/components/Users/Auth/GoogleAuthBtn.tsx b/client/src/components/Users/Auth/GoogleAuthBtn.tsx
index b21fba22..7bd2a6b3 100644
--- a/client/src/components/Users/Auth/GoogleAuthBtn.tsx
+++ b/client/src/components/Users/Auth/GoogleAuthBtn.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Button from '@mui/material/Button';
+import GoogleIcon from '@mui/icons-material/Google';
 import { makeStyles } from 'tss-react/mui';
 
 import type { Theme } from '@mui/material/styles';
@@ -7,7 +8,9 @@ import type { Theme } from '@mui/material/styles';
 const useStyles = makeStyles()((theme: Theme) => {
   return {
     button: {
-      height: 44,
+      fontSize: 17,
+      width: 180,
+      height: 50,
       textTransform: 'none',
     },
   };
@@ -22,7 +25,12 @@ function GoogleAuthBtn(props: React.PropsWithChildren<{}>) {
   };
 
   return (
-    <Button className={classes.button} variant="outlined" onClick={googleSignIn}>
+    <Button
+      className={classes.button}
+      variant="outlined"
+      startIcon={<GoogleIcon />}
+      onClick={googleSignIn}
+    >
       {children}
     </Button>
   );
diff --git a/client/src/components/Users/Auth/PasswordInput.tsx b/client/src/components/Users/Auth/PasswordInput.tsx
index fc4b60a4..da7d585f 100644
--- a/client/src/components/Users/Auth/PasswordInput.tsx
+++ b/client/src/components/Users/Auth/PasswordInput.tsx
@@ -47,6 +47,7 @@ interface Props {
   error?: string | null;
   showStartAdornment?: boolean;
   showForgot?: boolean;
+  placeholder?: string;
   label?: string | null;
   id?: string | null;
   name?: string | null;
@@ -61,6 +62,7 @@ function PasswordInput({
   error,
   showStartAdornment = false,
   showForgot = false,
+  placeholder,
   label = null,
   id = null,
   name = null,
@@ -101,6 +103,7 @@ function PasswordInput({
       <Input
         className={classes.input}
         id={id || 'password'}
+        placeholder={placeholder || 'oooooo'}
         name={name || 'password'}
         type={showPassword ? 'text' : 'password'}
         value={value}
diff --git a/client/src/providers/ModalProvider.tsx b/client/src/providers/ModalProvider.tsx
new file mode 100644
index 00000000..bdfcf2eb
--- /dev/null
+++ b/client/src/providers/ModalProvider.tsx
@@ -0,0 +1,39 @@
+import React, { createContext, useState, ReactNode } from 'react';
+
+type ModalType = 'SignIn' | 'SignUp'; // This replaces ModalContent
+
+interface IModalContext {
+  modal: ModalState | null;
+  openModal: (type: ModalType) => void;
+  closeModal: () => void;
+}
+
+interface ModalState {
+  type: ModalType;
+}
+
+const ModalContext = createContext({} as IModalContext);
+
+interface ModalProviderProps {
+  children: ReactNode;
+}
+
+const ModalProvider: React.FC<ModalProviderProps> = ({ children }) => {
+  const [modal, setModal] = useState<ModalState | null>(null);
+
+  const openModal = (type: ModalType) => {
+    setModal({ type });
+  };
+
+  const closeModal = () => {
+    setModal(null);
+  };
+
+  return (
+    <ModalContext.Provider value={{ modal, openModal, closeModal }}>
+      {children}
+    </ModalContext.Provider>
+  );
+};
+
+export { ModalContext, ModalProvider };
diff --git a/client/src/providers/index.ts b/client/src/providers/index.ts
index 3dc85186..2c3e454d 100644
--- a/client/src/providers/index.ts
+++ b/client/src/providers/index.ts
@@ -1 +1,2 @@
 export * from './UserProvider';
+export * from './ModalProvider';
diff --git a/client/src/routes/routes.ts b/client/src/routes/routes.ts
index 08f5e660..6d823f34 100644
--- a/client/src/routes/routes.ts
+++ b/client/src/routes/routes.ts
@@ -5,7 +5,6 @@ import OurStory from '../views/OurStory';
 import TrustAndSafety from '../views/TrustAndSafety';
 import TermsOfService from '../views/TermsOfService';
 import PrivacyPolicy from '../views/PrivacyPolicy';
-import Login from '../views/Login';
 import Signup from '../views/Signup';
 import SignupCitizen from '../views/SignupCitizen';
 import SignupNonProfit from '../views/SignupNonProfit';
@@ -87,11 +86,6 @@ const routes: RouteMap = {
     roles: [],
     path: '/set-new-password',
   },
-  Login: {
-    component: Login,
-    roles: [],
-    path: '/login',
-  },
   Signup: {
     component: Signup,
     roles: [],
diff --git a/client/src/views/Main.tsx b/client/src/views/Main.tsx
index b88bd527..a00846eb 100644
--- a/client/src/views/Main.tsx
+++ b/client/src/views/Main.tsx
@@ -14,8 +14,6 @@ const {
   CookiePolicy,
   ForgotPassword,
   SetNewPassword,
-  Login,
-  Signup,
   SignupCitizen,
   SignupNonProfit,
   Inbox,
@@ -54,10 +52,8 @@ function Main() {
         <Route exact path={CookiePolicy.path} component={CookiePolicy.component} />
 
         {/* users */}
-        <Route exact path={Login.path} component={Login.component} />
         <Route exact path={ForgotPassword.path} component={ForgotPassword.component} />
         <Route exact path={SetNewPassword.path} component={SetNewPassword.component} />
-        <Route exact path={Signup.path} component={Signup.component} />
         <Route exact path={SignupCitizen.path} component={SignupCitizen.component} />
         <Route exact path={SignupNonProfit.path} component={SignupNonProfit.component} />