Added modal for confirm archive

client/src/components/UpdateAccountModule.tsx

@@ -3,7 +3,17 @@ import * as Yup from "yup";
 import config from "../config";
 import { useEffect, useState } from "react";
 import { retrieveUserInformation } from "../security/users";
-import { Accordion, AccordionItem, Button } from "@nextui-org/react";
+import {
+  Accordion,
+  AccordionItem,
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  useDisclosure,
+} from "@nextui-org/react";
 import { Form, Formik } from "formik";
 import NextUIFormikInput from "./NextUIFormikInput";
 import { PencilSquareIcon } from "../icons";
@@ -17,6 +27,8 @@ export default function UpdateAccountModule({
   const navigate = useNavigate();
   let [userInformation, setUserInformation] = useState<any>();
 
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+
   useEffect(() => {
     retrieveUserInformation(accessToken!)
       .then((response) => {
@@ -111,6 +123,7 @@ export default function UpdateAccountModule({
   return (
     <div>
       {userInformation && (
+        <div>
           <div className="flex flex-col gap-16">
             <div>
               <Formik
@@ -222,13 +235,7 @@ export default function UpdateAccountModule({
                       <Button color="danger" variant="light">
                         Reset your password
                       </Button>
-                    <Button
+                      <Button color="danger" variant="flat" onPress={onOpen}>
-                      color="danger"
-                      variant="flat"
-                      onPress={() => {
-                        archiveAccount();
-                      }}
-                    >
                         Archive this account
                       </Button>
                     </div>
@@ -237,6 +244,45 @@ export default function UpdateAccountModule({
               </Accordion>
             </div>
           </div>
+          <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+            <ModalContent>
+              {(onClose) => {
+                return (
+                  <>
+                    <ModalHeader className="flex flex-col gap-1">
+                      Are you sure?
+                    </ModalHeader>
+                    <ModalBody>
+                      <p>
+                        By archiving, the account will be immediately locked to
+                        prevent further matters related to this account.
+                      </p>
+                      <p>
+                        Only archive the account if you do not intend for this
+                        account to be active again in the future.
+                      </p>
+                    </ModalBody>
+                    <ModalFooter>
+                      <Button
+                        color="danger"
+                        variant="light"
+                        onPress={() => {
+                          archiveAccount();
+                          onClose();
+                        }}
+                      >
+                        Archive
+                      </Button>
+                      <Button color="primary" onPress={onClose}>
+                        Cancel
+                      </Button>
+                    </ModalFooter>
+                  </>
+                );
+              }}
+            </ModalContent>
+          </Modal>
+        </div>
       )}
     </div>
   );