added login logic (#379)

Nonprofit-Exchange-Hub · Oct 18, 2023 · 8a6783c · 8a6783c
1 parent 14e7f56
commit 8a6783c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/client/src/components/Users/Auth/SignUpCitizen/StepOne.tsx b/client/src/components/Users/Auth/SignUpCitizen/StepOne.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { Box, Button, Checkbox, Typography, FormControlLabel } from '@mui/material';
 import { string, boolean } from 'yup';
 
@@ -8,6 +8,7 @@ import PasswordInput from '../PasswordInput';
 import EmailInput from '../EmailInput';
 import NameInput from '../NameInput';
 import { ValidationUtils } from '../../../../utils';
+import { ModalContext } from '../../../../providers/ModalProvider';
 
 import { useStyles } from './styles/styles';
 
@@ -55,6 +56,7 @@ type TStepOneProps = {
 
 export default function StepOne({ initData, handleNext }: TStepOneProps) {
   const { classes } = useStyles();
+  const { openModal } = useContext(ModalContext);
 
   Object.keys(initialFormData).forEach((key) => {
     //@ts-ignore
@@ -164,9 +166,12 @@ export default function StepOne({ initData, handleNext }: TStepOneProps) {
           align="left"
           gutterBottom
         >
-          {/* TODO: Add link to "Login", this will open the login modal */}
-          Already have an account?
+          Already have an account?&nbsp;
+          <button onClick={() => openModal('SignIn')} className={classes.link}>
+            Login
+          </button>
         </Typography>
+
         <Box display={'flex'} flexDirection={'row'} width={'100%'}>
           <Box marginRight={'20px'}>
             <NameInput

diff --git a/client/src/components/Users/Auth/SignUpCitizen/styles/styles.ts b/client/src/components/Users/Auth/SignUpCitizen/styles/styles.ts
@@ -73,4 +73,16 @@ export const useStyles = makeStyles()((theme) => ({
     fontSize: 14,
     marginBottom: 20,
   },
+  link: {
+    background: 'none',
+    border: 'none',
+    padding: '0',
+    font: 'inherit',
+    cursor: 'pointer',
+    textDecoration: 'underline',
+    color: 'inherit',
+    ':hover': {
+      fontWeight: 'bold',
+    },
+  },
 }));
diff --git a/client/src/components/Users/Auth/SignUpUserAndNonprofit/SignUpUserAndNonprofit.tsx b/client/src/components/Users/Auth/SignUpUserAndNonprofit/SignUpUserAndNonprofit.tsx
@@ -32,6 +32,8 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { classifications } from './Classifications';
 import { httpGetValidateEin, httpPostNonprofitSignup } from './http-sing-up-nonprofit';
 import InputMask from 'react-input-mask';
+import { ModalContext } from '../../../../providers/ModalProvider';
+import { useContext } from 'react';
 
 const defaultOrg: FormData = {
   name: '',
@@ -56,6 +58,7 @@ const defaultOrg: FormData = {
 
 export const SignUpUserAndNonprofit = () => {
   const { classes } = useStyles();
+  const { openModal } = useContext(ModalContext);
   const [activeStep, setActiveStep] = React.useState(0);
   const [einStepIsValid, setEINStepIsValid] = React.useState(false);
   const [einApiValidateError, setEinApiValidateError] = React.useState('');
@@ -196,7 +199,8 @@ export const SignUpUserAndNonprofit = () => {
           </Grid>
           <Grid item sx={{ marginBottom: '30px' }}>
             <Typography component="p" gutterBottom>
-              Already have an account? <StyledLink to={routes.Login.path}>Log In</StyledLink>
+              Already have an account?&nbsp;
+              <button onClick={() => openModal('SignIn')}>Login</button>{' '}
             </Typography>
           </Grid>