Change error message location

uwblueprint · Nov 13, 2024 · 5d64ee0 · 5d64ee0
1 parent 8e37362
commit 5d64ee0
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 36 deletions.
diff --git a/frontend/src/components/common/responsive/ResponsiveAuthContainer.tsx b/frontend/src/components/common/responsive/ResponsiveAuthContainer.tsx
@@ -22,7 +22,7 @@ const ResponsiveAuthContainer = ({
         display="inline-flex"
         flexDirection="column"
         gap={{ base: "1.12rem", md: "1rem" }}
-        width={{ md: "16rem" }} 
+        width={{ md: "16rem" }}
         justifyContent="center"
       >
         {children}

diff --git a/frontend/src/components/pages/CreatePasswordPage.tsx b/frontend/src/components/pages/CreatePasswordPage.tsx
@@ -9,21 +9,19 @@ import {
   Text,
   FormLabel,
   FormControl,
-  FormErrorMessage,
 } from "@chakra-ui/react";
 import ResponsiveLogo from "../common/responsive/ResponsiveLogo";
 import ResponsivePasswordInput from "../common/responsive/ResponsivePasswordInput";
-import ResponsiveModalWindow from "../common/responsive/ResponsiveModalWindow";
 import ResponsiveAuthContainer from "../common/responsive/ResponsiveAuthContainer";
+import ResponsiveModalWindow from "../common/responsive/ResponsiveModalWindow";
 import background from "../assets/background.png";
 import backgroundMobile from "../assets/background_mobile.png";
 
 const CreatePasswordPage = (): React.ReactElement => {
   const [showModal, setShowModal] = React.useState(false);
   const [password, setPassword] = React.useState("");
   const [confirmPassword, setConfirmPassword] = React.useState("");
-  const [confirmPasswordError, setConfirmPasswordError] = React.useState("");
-  const [passwordError, setPasswordError] = React.useState("");
+  const [errorMessage, setErrorMessage] = React.useState("");
 
   const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(event.target.value);
@@ -35,22 +33,22 @@ const CreatePasswordPage = (): React.ReactElement => {
   };
 
   const validatePasswords = () => {
-    setPasswordError("");
-    setConfirmPasswordError("");
-    let hasErrors: boolean = false;
+    setErrorMessage("");
     if (password.length < 8) {
-      hasErrors = true;
-      setPasswordError("Password must be at least 8 characters.");
-    }
-    if (confirmPassword && password !== confirmPassword) {
-      hasErrors = true;
-      setConfirmPasswordError("Passwords do not match.");
+      setErrorMessage("Password must be at least 8 characters.");
+      return true;
     }
     if (confirmPassword.length < 8) {
-      hasErrors = true;
-      setConfirmPasswordError("Password must be at least 8 characters.");
+      setErrorMessage("Password must be at least 8 characters.");
+      return true;
+    }
+    if (confirmPassword && password !== confirmPassword) {
+      setErrorMessage(
+        "Your new password cannot be your previous password. Please try again.",
+      );
+      return true;
     }
-    return hasErrors;
+    return false;
   };
 
   const handleCreateAccount = () => {
@@ -124,14 +122,11 @@ const CreatePasswordPage = (): React.ReactElement => {
                   >
                     Create Password:
                   </FormLabel>
-                  <FormControl isInvalid={!!passwordError}>
+                  <FormControl isInvalid={!!errorMessage}>
                     <ResponsivePasswordInput
                       value={password}
                       onChange={handlePasswordChange}
                     />
-                    <FormErrorMessage fontSize="12px">
-                      {passwordError}
-                    </FormErrorMessage>
                   </FormControl>
                 </Box>
                 <Box fontSize="12px">
@@ -142,28 +137,34 @@ const CreatePasswordPage = (): React.ReactElement => {
                   >
                     Confirm Password:
                   </FormLabel>
-                  <FormControl isInvalid={!!confirmPasswordError}>
+                  <FormControl isInvalid={!!errorMessage}>
                     <ResponsivePasswordInput
                       value={confirmPassword}
                       onChange={handleConfirmPasswordChange}
                     />
-                    <FormErrorMessage fontSize="12px">
-                      {confirmPasswordError}
-                    </FormErrorMessage>
                   </FormControl>
                 </Box>
               </Stack>
-              <Button
-                type="submit"
-                fontSize="14px"
-                onClick={handleCreateAccount}
-                color="white"
-                h="2.4rem"
-                width="100%"
-                bg="var(--blue-700, #2C5282)"
-              >
-                Create Account
-              </Button>
+              <Box>
+                <Button
+                  type="submit"
+                  fontSize="14px"
+                  onClick={handleCreateAccount}
+                  color="white"
+                  h="2.4rem"
+                  width="100%"
+                  bg="var(--blue-700, #2C5282)"
+                >
+                  Create Account
+                </Button>
+                {errorMessage && (
+                  <Box textAlign="center">
+                    <Text color="red.500" fontSize="14px" lineHeight="1" mb="0" mt="1rem">
+                      {errorMessage}
+                    </Text>
+                  </Box>
+                )}
+              </Box>
             </Stack>
           </ResponsiveAuthContainer>
         </Flex>