Login Errors + Event Field Terminology

src/App.jsx

@@ -7,7 +7,10 @@ import Logout from './components/Authentication/Logout';
 import SignUp from './components/Authentication/SignUp';
 import ForgotPassword from './components/Authentication/ForgotPassword';
 import EmailAction from './components/Authentication/EmailAction';
+import AccountPendingApproval from './components/Authentication/EmailAction';
 import AwaitConfirmation from './components/Authentication/AwaitConfirmation';
+import ForgotPasswordConfirmation from './components/Authentication/ForgotPasswordConfirmation';
+import CreateNewPasswordConfirmation from './components/Authentication/CreateNewPasswordConfirmation';
 import AUTH_ROLES from './utils/auth_config';
 import ProtectedRoute from './utils/ProtectedRoute';
 import Catalog from './pages/Catalog/Catalog';
@@ -53,8 +56,12 @@ const App = () => {
               <Route exact path="/logout" element={<Logout />} />
               <Route exact path="/forgotpassword" element={<ForgotPassword />} />
               <Route exact path="/signUp" element={<SignUp />} />
+              <Route exact path="/signUpConfirmation" element={<AccountPendingApproval redirectPath="/" />} />
               <Route exact path="/emailAction" element={<EmailAction redirectPath="/" />} />
               <Route exact path="/awaitConfirmation" element={<AwaitConfirmation redirectPath="/" />} />
+              <Route exact path="/forgotPasswordConfirmation" element={<ForgotPasswordConfirmation redirectPath="/" />} />
+              <Route exact path="/createNewPasswordConfirmation" element={<CreateNewPasswordConfirmation redirectPath="/" />} />
+
               <Route
                 exact
                 path="/catalog"

src/components/AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm.jsx

@@ -373,7 +373,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}

src/components/Authentication/AccountPendingApproval.jsx

@@ -0,0 +1,33 @@
+import { Box, Heading, Button, Center, Link} from '@chakra-ui/react';
+
+const AccountPendingApproval = () => {
+
+    return (
+        <Center h="90vh">
+            <Box pt={4}>
+                <Heading as='h1' size='lg'>Account Pending Approval</Heading>
+                <Center>
+                    <Link href="/login">
+                        <Button
+                            style={{
+                                borderRadius: '30px',
+                                marginTop: '30px',
+                                paddingLeft: '80px',
+                                paddingRight: '80px',
+                                width: '140px',
+                                height: '38px',
+                            }}
+                            backgroundColor={'#243268'}
+                            color={'#ffffff'}
+                            _hover={{backgroundColor: '#1A2559'}}
+                        >
+                        Return to login
+                        </Button>
+                    </Link>
+                </Center>
+            </Box>
+        </Center>
+    )
+};
+
+export default AccountPendingApproval;

src/components/Authentication/CreateNewPassword.jsx

@@ -0,0 +1,145 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { confirmNewPassword } from '../../utils/auth_utils';
+import { FormControl, Input, Button, Center, Link, Box, Heading, Text, Alert, AlertDescription} from '@chakra-ui/react';
+
+const CreateNewPassword = ({ code }) => {
+  const [password, setPassword] = useState('');
+  const [checkPassword, setCheckPassword] = useState('');
+  const [hasError, setHasError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState();
+
+  const handleResetPassword = async e => {
+    try {
+      e.preventDefault();
+      setHasError(false);
+      if (password !== checkPassword) {
+        throw new Error("Passwords do not match.");
+      }
+      await confirmNewPassword(code, password);
+      setErrorMessage('');
+      setPassword('');
+      window.location.replace("/createNewPasswordConfirmation");
+    } catch (err) {
+      setHasError(true);
+      console.log(err.message);
+      if (err.code === "auth/weak-password"){
+        setErrorMessage("Password must be at least 6 characters.");
+      } else if (err.code === "auth/invalid-action-code"){
+        setErrorMessage("Link has expired.");
+      } else {
+        setErrorMessage(err.message);
+      }
+    }
+  };
+  return (
+    <Box>
+      <Box>
+      { hasError &&
+        <Alert
+          status='warning'
+          alignItems='center'
+          justifyContent='center'
+          height='80px'
+          position='absolute'
+          backgroundColor="#F69052"
+          color="black"
+        >
+          <AlertDescription>{ errorMessage }</AlertDescription>
+        </Alert>
+      }
+    </Box>
+
+      <Center h="90vh">
+        <Box
+          style={{
+            margin: 'auto',
+            textAlign: 'center',
+            width: '598px',
+            minWidth: '300px',
+          }}
+        >
+          <Heading as='h1' size='lg'>Enter New Password</Heading>
+          <Text as='h2' size='md' mt={2}>Please enter a new password.</Text>
+          <form onSubmit={handleResetPassword}>
+            <FormControl>
+              <Box>
+                <Input
+                  style={{ width: '360px', height: '48px', marginTop: '40px' }}
+                  id={"password"}
+                  isRequired={true}
+                  onChange={({ target }) => setPassword(target.value)}
+                  placeholder="Enter new password"
+                  borderColor={"#CBD5E0"}
+                  borderRadius= '3px'
+                  type="password"
+                />
+                <Input
+                  style={{ width: '360px', height: '48px', margin: '20px' }}
+                  id={"checkPassword"}
+                  isRequired={true}
+                  onChange={({ target }) => setCheckPassword(target.value)}
+                  placeholder="Re-enter password"
+                  borderColor={"#CBD5E0"}
+                  borderRadius= '3px'
+                  type="password"
+                />
+              </Box>
+              <Box
+                style={{
+                  marginTop: '25px',
+                  marginBottom: '25px',
+                }}
+              >
+                <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'}}
+                >
+                  Reset Password
+                </Button>
+
+              </Box>
+            </FormControl>
+          </form>
+        </Box>
+      </Center>
+    </Box>
+    );
+};
+
+CreateNewPassword.propTypes = {
+  code: PropTypes.string.isRequired,
+};
+
+export default CreateNewPassword;

src/components/Authentication/CreateNewPasswordConfirmation.jsx

@@ -0,0 +1,33 @@
+import { Box, Heading, Button, Center, Link} from '@chakra-ui/react';
+
+const CreateNewPasswordConfirmation = () => {
+
+    return (
+        <Center h="90vh">
+            <Box pt={4}>
+                <Heading as='h1' size='lg'>Password Successfully Reset</Heading>
+                <Center>
+                    <Link href="/login">
+                        <Button
+                            style={{
+                                borderRadius: '30px',
+                                marginTop: '30px',
+                                paddingLeft: '80px',
+                                paddingRight: '80px',
+                                width: '140px',
+                                height: '38px',
+                            }}
+                            backgroundColor={'#243268'}
+                            color={'#ffffff'}
+                            _hover={{backgroundColor: '#1A2559'}}
+                        >
+                        Return to login
+                        </Button>
+                    </Link>
+                </Center>
+            </Box>
+        </Center>
+    )
+};
+
+export default CreateNewPasswordConfirmation;

src/components/Authentication/EmailAction.jsx

@@ -1,7 +1,7 @@
 // import React from 'react';
 import { useLocation, Navigate } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import ResetPassword from './ResetPassword';
+import CreateNewPassword from './CreateNewPassword';
 import VerifyEmail from './VerifyEmail';
 
 const EmailAction = ({ redirectPath }) => {
@@ -12,7 +12,8 @@ const EmailAction = ({ redirectPath }) => {
   if (code === null) {
     return <Navigate to={redirectPath} />;
   }
-  return mode === 'resetPassword' ? <ResetPassword code={code} /> : <VerifyEmail code={code} />;
+
+  return mode === 'resetPassword' ? <CreateNewPassword code={code} /> : <VerifyEmail code={code} />;
 };
 
 EmailAction.propTypes = {