Reset password confirmation dialog

client/src/components/UpdateAccountModule.tsx

@@ -25,7 +25,17 @@ export default function UpdateAccountModule() {
   const navigate = useNavigate();
   const [userInformation, setUserInformation] = useState<any>();
 
-  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  const {
+    isOpen: isArchiveDialogOpen,
+    onOpen: onArchiveDialogOpen,
+    onOpenChange: onArchiveDialogOpenChange,
+  } = useDisclosure();
+
+  const {
+    isOpen: isResetPasswordOpen,
+    onOpen: onResetPasswordOpen,
+    onOpenChange: onResetPasswordOpenChange,
+  } = useDisclosure();
 
   useEffect(() => {
     retrieveUserInformation()
@@ -239,13 +249,15 @@ export default function UpdateAccountModule() {
                       <Button
                         color="danger"
                         variant="light"
-                        onPress={() => {
+                        onPress={onResetPasswordOpen}
-                          sendResetPasswordEmail();
-                        }}
                       >
                         Reset your password
                       </Button>
-                      <Button color="danger" variant="flat" onPress={onOpen}>
+                      <Button
+                        color="danger"
+                        variant="flat"
+                        onPress={onArchiveDialogOpen}
+                      >
                         Archive this account
                       </Button>
                     </div>
@@ -254,7 +266,12 @@ export default function UpdateAccountModule() {
               </Accordion>
             </div>
           </div>
-          <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+
+          {/* Archive Account Modal */}
+          <Modal
+            isOpen={isArchiveDialogOpen}
+            onOpenChange={onArchiveDialogOpenChange}
+          >
             <ModalContent>
               {(onClose) => {
                 return (
@@ -292,6 +309,48 @@ export default function UpdateAccountModule() {
               }}
             </ModalContent>
           </Modal>
+
+          {/* Reset Password Modal */}
+          <Modal
+            isOpen={isResetPasswordOpen}
+            onOpenChange={onResetPasswordOpenChange}
+          >
+            <ModalContent>
+              {(onClose) => {
+                return (
+                  <>
+                    <ModalHeader className="flex flex-col gap-1">
+                      Reset Password
+                    </ModalHeader>
+                    <ModalBody>
+                      <p>
+                        We will send you an email helping you to reset your
+                        password.
+                      </p>
+                      <p>
+                        Check in the junk mailbox if you do not receive it after
+                        3 minutes.
+                      </p>
+                    </ModalBody>
+                    <ModalFooter>
+                      <Button color="danger" variant="light" onPress={onClose}>
+                        Cancel
+                      </Button>
+                      <Button
+                        color="danger"
+                        onPress={() => {
+                          sendResetPasswordEmail();
+                          onClose();
+                        }}
+                      >
+                        Send email
+                      </Button>
+                    </ModalFooter>
+                  </>
+                );
+              }}
+            </ModalContent>
+          </Modal>
         </div>
       )}
     </div>

client/src/pages/ResetPasswordPage.tsx

@@ -7,12 +7,12 @@ import EcoconnectFullLogo from "../components/EcoconnectFullLogo";
 import NextUIFormikInput from "../components/NextUIFormikInput";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
-import axios from "axios";
 import { popErrorToast, popToast } from "../utilities";
 
 const validationSchema = Yup.object({
   password: Yup.string()
     .trim()
+    .min(8, "Password must be at least 8 characters")
     .max(69, "Password must be at most 69 characters")
     .matches(
       /^(?=.*[a-zA-Z])(?=.*[0-9]).{1,}$/,
@@ -20,7 +20,7 @@ const validationSchema = Yup.object({
     )
     .required("Password is required"),
   confirmPassword: Yup.string()
-    .oneOf([Yup.ref("password"), undefined], "Passwords must match")
+    .oneOf([Yup.ref("password"), undefined], "Passwords do not match")
     .required("Confirm Password is required"),
 });