Fixed login errors, event field terms, added a confirmation screen fo…

…r forget password
ctc-uci · Apr 23, 2024 · e67cec5 · e67cec5
1 parent 74dcba5
commit e67cec5
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 91 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,6 +8,7 @@ import SignUp from './components/Authentication/SignUp';
 import ForgotPassword from './components/Authentication/ForgotPassword';
 import EmailAction from './components/Authentication/EmailAction';
 import AwaitConfirmation from './components/Authentication/AwaitConfirmation';
+import ForgotPasswordConfirmation from './components/Authentication/ForgotPasswordConfirmation';
 import AUTH_ROLES from './utils/auth_config';
 import ProtectedRoute from './utils/ProtectedRoute';
 import Catalog from './pages/Catalog/Catalog';
@@ -55,6 +56,9 @@ const App = () => {
               <Route exact path="/signUp" element={<SignUp />} />
               <Route exact path="/emailAction" element={<EmailAction redirectPath="/" />} />
               <Route exact path="/awaitConfirmation" element={<AwaitConfirmation redirectPath="/" />} />
+              <Route exact path="/forgotPasswordConfirmation" element={<ForgotPasswordConfirmation redirectPath="/" />} />
+
+
               <Route
                 exact
                 path="/catalog"

diff --git a/src/components/AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm.jsx b/src/components/AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm.jsx
@@ -364,7 +364,7 @@ const AddEventToPublishedScheduleForm = ({ closeForm }) => {
               {/* SUBJECT */}
               <Box mb="1rem">
                 <FormControl>
-                  <FormLabel fontWeight="bold" color="gray.600">Topic</FormLabel>
+                  <FormLabel fontWeight="bold" color="gray.600">Subject</FormLabel>
                   <Dropdown
                     options={subjectOptions}
                     filter={subjectFilter}

diff --git a/src/components/Authentication/ForgotPassword.jsx b/src/components/Authentication/ForgotPassword.jsx
@@ -1,104 +1,124 @@
 import { useState } from 'react';
 import { sendPasswordReset } from '../../utils/auth_utils';
-import { FormControl, Input, Button, Center, Link, Box, Heading, Text} from '@chakra-ui/react';
+import { FormControl, Input, Button, Center, Link, Box, Heading, Text, Alert, AlertDescription} from '@chakra-ui/react';
 
 
 const ForgotPassword = () => {
-  const [email, setEmail] = useState();
+  const [email, setEmail] = useState('');
+  const [hasError, setHasError] = useState(false);
   const [errorMessage, setErrorMessage] = useState();
-  const [confirmationMessage, setConfirmationMessage] = useState();
 
   const handleForgotPassword = async e => {
     try {
       e.preventDefault();
       await sendPasswordReset(email);
-      setConfirmationMessage(
-        'If the email entered is associated with an account, you should receive an email to reset your password shortly.',
-      );
+      setHasError(false);
       setErrorMessage('');
-      setEmail('');
+      window.location.replace("/forgotPasswordConfirmation");
     } catch (err) {
-      setErrorMessage(err.message);
+        setHasError(true);
+        if (err.code === 'auth/invalid-email') {
+          setErrorMessage("Email could not be found. Please try again.");
+        }
+        else {
+          setErrorMessage(err.message);
+        }
+      console.log(err)
     }
   };
 
   return (
-    <Center h="90vh">
-    <Box
-      style={{
-        margin: 'auto',
-        textAlign: 'center',
-        width: '598px',
-        minWidth: '300px',
-      }}
-    >
-      <Heading as='h1' size='lg'>Reset Password</Heading>
-      <Text as='h2' size='md' mt={2}>Enter email address associated with account</Text>
-      {errorMessage && <p>{errorMessage}</p>}
-      <form onSubmit={handleForgotPassword}>
-        <FormControl>
-          <Box>
-            <Input
-              style={{ width: '360px', height: '48px', marginTop: '40px' }}
-              type="email"
-              onChange={({ target }) => setEmail(target.value)}
-              placeholder="Email Address"
-              borderColor={"#CBD5E0"}
-              borderRadius= '3px'
-            />
-          </Box>
-
+    <Box>
+      <Box>
+      { hasError &&
+        <Alert
+          status='warning'
+          alignItems='center'
+          justifyContent='center'
+          height='80px'
+          position='absolute'
+          backgroundColor="#F69052"
+          color="black"
+        >
+          <AlertDescription>{ errorMessage }</AlertDescription>
+        </Alert>
+      }
+    </Box>
 
-          <Box
-            style={{
-              marginTop: '25px',
-              marginBottom: '25px',
-            }}
-          >
-            <Link href='/login'>
-              <Button
+      <Center h="90vh">
+        <Box
+          style={{
+            margin: 'auto',
+            textAlign: 'center',
+            width: '598px',
+            minWidth: '300px',
+          }}
+        >
+          <Heading as='h1' size='lg'>Reset Password</Heading>
+          <Text as='h2' size='md' mt={2}>Enter email address associated with account</Text>
+          <form onSubmit={handleForgotPassword}>
+            <FormControl>
+              <Box>
+                <Input
+                  style={{ width: '360px', height: '48px', marginTop: '40px' }}
+                  type="email"
+                  isRequired={true}
+                  onChange={({ target }) => setEmail(target.value)}
+                  placeholder="Email Address"
+                  borderColor={"#CBD5E0"}
+                  borderRadius= '3px'
+                />
+              </Box>
+              <Box
                 style={{
-                  borderRadius: '30px',
-                  borderColor: '#155696',
-                  borderWidth: '1.5px',
-                  marginRight: '16px',
-                  paddingLeft: '80px',
-                  paddingRight: '80px',
-                  width: '140px',
-                  height: '38px',
+                  marginTop: '25px',
+                  marginBottom: '25px',
                 }}
-                backgroundColor={'#FFFFFF'}
-                color={'#155696'}
-                variant='outline'
-                _hover={{backgroundColor: '#E0E0E0'}}
               >
-                Cancel
-              </Button>
-            </Link>
+                <Link href='/login'>
+                  <Button
+                    style={{
+                      borderRadius: '30px',
+                      borderColor: '#155696',
+                      borderWidth: '1.5px',
+                      marginRight: '16px',
+                      paddingLeft: '80px',
+                      paddingRight: '80px',
+                      width: '140px',
+                      height: '38px',
+                    }}
+                    backgroundColor={'#FFFFFF'}
+                    color={'#155696'}
+                    variant='outline'
+                    _hover={{backgroundColor: '#E0E0E0'}}
+                  >
+                    Cancel
+                  </Button>
+                </Link>
+
+                <Button
+                  type="submit"
+                  style={{
+                    borderRadius: '30px',
+                    marginLeft: '16px',
+                    paddingLeft: '80px',
+                    paddingRight: '80px',
+                    width: '140px',
+                    height: '38px',
+                  }}
+                  backgroundColor={'#243268'}
+                  color={'#ffffff'}
+                  _hover={{backgroundColor: '#1A2559'}}
+                >
+                  Send Instructions
+                </Button>
 
-
-            <Button
-              type="submit"
-              style={{
-                borderRadius: '30px',
-                marginLeft: '16px',
-                paddingLeft: '80px',
-                paddingRight: '80px',
-                width: '140px',
-                height: '38px',
-              }}
-              backgroundColor={'#243268'}
-              color={'#ffffff'}
-              _hover={{backgroundColor: '#1A2559'}}
-            >
-              Send Instructions
-            </Button>
-          </Box>
-        </FormControl>
-      </form>
-      {confirmationMessage && <p>{confirmationMessage}</p>}
+              </Box>
+            </FormControl>
+          </form>
+        </Box>
+      </Center>
     </Box>
-    </Center>
   );
 };
 

diff --git a/src/components/Authentication/ForgotPasswordConfirmation.jsx b/src/components/Authentication/ForgotPasswordConfirmation.jsx
@@ -0,0 +1,41 @@
+import { Button, Center, Link, Box, Heading, Text} from '@chakra-ui/react';
+
+const ForgotPasswordConfirmation = () => {
+    return (
+        <Box>
+            <Center h="90vh">
+                <Box
+                style={{
+                    margin: 'auto',
+                    textAlign: 'center',
+                    width: '598px',
+                    minWidth: '300px',
+                }}
+                >
+                    <Heading as='h1' size='lg'>Instructions Sent</Heading>
+                    <Text as='h2' size='md' mt={2}>Please check inbox for password reset instructions.</Text>
+                    <Link href="/login">
+                        <Button mt={5}
+                            type="submit"
+                            style={{
+                            borderRadius: '30px',
+                            marginLeft: '16px',
+                            paddingLeft: '80px',
+                            paddingRight: '80px',
+                            width: '140px',
+                            height: '38px',
+                            }}
+                            backgroundColor={'#243268'}
+                            color={'#ffffff'}
+                            _hover={{backgroundColor: '#1A2559'}}
+                        >
+                        Return to Login
+                        </Button>
+                    </Link>
+                </Box>
+            </Center>
+        </Box>
+    );
+};
+
+export default ForgotPasswordConfirmation;
diff --git a/src/components/Authentication/Login.jsx b/src/components/Authentication/Login.jsx
@@ -4,7 +4,7 @@ import { Cookies, withCookies } from '../../utils/cookie_utils';
 import { logInWithEmailAndPassword, useNavigate } from '../../utils/auth_utils';
 // import { logInWithEmailAndPassword , signInWithGoogle, useNavigate } from '../utils/auth_utils';
 import { Box, Heading, Text, FormControl, Input, Button, Center, Link, Alert, AlertDescription } from '@chakra-ui/react';
-// import styles from 
+// import styles from
 
 const Login = ({ cookies }) => {
   const navigate = useNavigate();
@@ -20,15 +20,20 @@ const Login = ({ cookies }) => {
       window.location.reload(true);
     } catch (err) {
       setHasError(true);
-      setErrorMessage(err.message);
+      if (err.code === 'auth/invalid-credential') {
+        setErrorMessage("Account could not be found with given information. Please check your username or password and try again.");
+      }
+      else {
+        setErrorMessage(err.message);
+      }
     }
   };
 
   return (
     <Box>
       <Box>
         { hasError &&
-          <Alert 
+          <Alert
             status='warning'
             alignItems='center'
             justifyContent='center'
@@ -60,6 +65,7 @@ const Login = ({ cookies }) => {
                 <Input
                   style={{ width: '360px', height: '48px', marginTop: '20px' }}
                   type="email"
+                  isRequired={true}
                   onChange={({ target }) => setEmail(target.value)}
                   placeholder="Email"
                   borderColor={"#CBD5E0"}
@@ -68,6 +74,7 @@ const Login = ({ cookies }) => {
                 <Input
                   style={{ width: '360px', height: '48px', margin: '20px' }}
                   type="password"
+                  isRequired={true}
                   onChange={({ target }) => setPassword(target.value)}
                   placeholder="Password"
                   borderColor={"#CBD5E0"}
@@ -97,7 +104,7 @@ const Login = ({ cookies }) => {
                     color={'#155696'}
                     variant='outline'
                     onMouseOver={(e) => {
-                      e.target.style.backgroundColor = '#E0E0E0'; 
+                      e.target.style.backgroundColor = '#E0E0E0';
                     }}
                     onMouseOut={(e) => {
                       e.target.style.backgroundColor = '#FFFFFF';
@@ -119,7 +126,7 @@ const Login = ({ cookies }) => {
                   backgroundColor={'#243268'}
                   color={'#ffffff'}
                   onMouseOver={(e) => {
-                    e.target.style.backgroundColor = '#1A2559'; 
+                    e.target.style.backgroundColor = '#1A2559';
                   }}
                   onMouseOut={(e) => {
                     e.target.style.backgroundColor = '#243268';

diff --git a/src/components/Authentication/SignUp.jsx b/src/components/Authentication/SignUp.jsx
@@ -21,7 +21,7 @@ const SignUp = () => {
   const [submitted, setSubmitted] = useState(false);
 
   const navigate = useNavigate();
-  
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
@@ -47,11 +47,11 @@ const SignUp = () => {
       // register email and password
       await registerWithEmailAndPassword(email, password, USER_ROLE, navigate, '/awaitConfirmation', firstName, lastName);
 
-      // send email to Debbie 
+      // send email to Debbie
       const subject = "New User Created Account";
       const newEmail = email;
       await sendEmail(subject, newEmail, emailtemplate);
-      
+
       setSubmitted(true);
 
     } catch (error) {
@@ -60,7 +60,7 @@ const SignUp = () => {
       setErrorMessage(error.message);
     }
   };
-  
+
   if (userType === null) {
     return (
       <Center h="90vh">
@@ -140,7 +140,7 @@ const SignUp = () => {
       <Box>
         <Box>
         { hasError &&
-          <Alert 
+          <Alert
             status='warning'
             alignItems='center'
             justifyContent='center'

diff --git a/src/pages/Catalog/Catalog.jsx b/src/pages/Catalog/Catalog.jsx
@@ -166,8 +166,8 @@ export default function Catalog({ onDayPlanner, addExistingEventFunc, setCurrEve
           <Flex gap="3" justifyContent="flex-end" w="100%" zIndex={2}>
             <SearchFilter name="Season" options={seasonOptions} filter={seasonFilter} />
             <SearchFilter name="Cohort" options={yearOptions} filter={yearFilter} />
-            <SearchFilter name="Topic" options={subjectOptions} filter={subjectFilter} />
-            <SearchFilter name="Type" options={eventOptions} filter={eventFilter} />
+            <SearchFilter name="Subject" options={subjectOptions} filter={subjectFilter} />
+            <SearchFilter name="Event Type" options={eventOptions} filter={eventFilter} />
             <Link
               fontSize="1rem"
               mr="2"