tanami-admin-panel/src/Pages/ChangePassword.jsx

import {
  Button,
  DrawerFooter,
  FormControl,
  FormErrorMessage,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalHeader,
  ModalOverlay,
  Stack,
  useToast,
} from "@chakra-ui/react";
import * as yup from "yup";
import React, { useState, useEffect, useContext } from "react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { v4 as uuidv4 } from "uuid";
import { useParams } from "react-router-dom";
import CustomAlertDialog from "../Components/CustomAlertDialog";
import ToastBox from "../Components/ToastBox";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import CurrencyInput from "../Components/CurrencyInput";

const ioNav = yup.object().shape({
  transactionDate: yup.string().required("Date is required"),
  transactionAmount: yup.string().required("New NAV is required"),
  comments: yup
    .string()
    .notRequired()
    .max(200, "Approve Comment cannot be more than 200 characters"),
});

const ChangePassword = ({
  isOpen,
  onClose,
  firstField,
  actionId,
  setActionId,
  data,
}) => {
  const params = useParams();
  const id = params?.id;
  const [file, setFile] = useState("");
  const [fileName, setFileName] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [alert, setAlert] = useState(false);
  const toast = useToast();

  const [showPassword, setShowPassword] = useState(false);
  const [subject, setSubject] = useState("");
  const togglePasswordVisibility = () => setShowPassword(!showPassword);
  // ======================[ Cotext Api ]
  const { IODetails } = useContext(GlobalStateContext);
  const found = data?.find((item) => item?.id === actionId);

  // const [addNavDetails] = useAddNavDetailsMutation()
  // const {
  //   data
  // } = useGetArtifactsQuery(id)

  const {
    control,
    handleSubmit,
    watch,
    reset,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(ioNav),
  });

//   const onSubmit = async (data) => {
//     setIsLoading(true);

//     try {
//       const res = await addNavDetails({ data, id });
//       if (res?.data?.statusCode === 201) {
//         setIsLoading(false);
//         toast({
//           render: () => <ToastBox message={res?.data?.message} />,
//         });
//         handleClose();
//       } else if (res?.error?.status === 400) {
//         toast({
//           render: () => (
//             <ToastBox message={res?.error?.data?.message} status={"error"} />
//           ),
//         });
//         handleClose();
//       }
//     } catch (error) {
//       console.log(error);
//     }
//   };

  const handleSave = () => {
    handleSubmit(onSubmit)();
  };

  const handleClose = () => {
    setIsLoading(false);
    setAlert(false);
    onClose();
  };
  

  return (
    <>
      <Modal
        // closeOnOverlayClick={false}
        isOpen={isOpen}
        onClose={onClose}
        initialFocusRef={firstField}
      >
        <ModalOverlay />
        <ModalContent>
          <ModalHeader fontSize={"md"}>Change Password</ModalHeader>
          <ModalCloseButton />
          <ModalBody pb={6}>
            <Stack spacing={4}>
              <FormControl isInvalid={errors.ChangePassword} isRequired>
                <FormLabel fontSize={"sm"} mb={1} fontWeight={500}>Current Password</FormLabel>
                <Input
                    size={"sm"}
                    onChange={(e) => setSubject(e.target.value)}
                    focusBorderColor="forestGreen.300"
                    rounded={4}
                    type={showPassword ? "text" : "password"}
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                  {errors.ChangePassword?.message}
                </FormErrorMessage>
              </FormControl>
              <FormControl isInvalid={errors.newPassword} isRequired>
                <FormLabel fontSize={"sm"} mb={1}>New Password</FormLabel>
                <Input
                    size={"sm"}
                    onChange={(e) => setSubject(e.target.value)}
                    focusBorderColor="forestGreen.300"
                    rounded={4}
                    type="text"
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                  {errors.newPassword?.message}
                </FormErrorMessage>
              </FormControl>
              <FormControl isInvalid={errors.conformPassword} isRequired>
                <FormLabel fontSize={"sm"} mb={1}>Re-Type New Password</FormLabel>
                <Input
                    size={"sm"}
                    onChange={(e) => setSubject(e.target.value)}
                    focusBorderColor="forestGreen.300"
                    rounded={4}
                    type="text"
                />
                <FormErrorMessage fontSize={"xs"} fontWeight={500}>
                  {errors.conformPassword?.message}
                </FormErrorMessage>
              </FormControl>
            </Stack>
          </ModalBody>

          <DrawerFooter mb={5}>
            <Button
            //   variant="outline"
              bg={"#e0ebeb"}
              rounded={"sm"}
              size={"sm"}
              mr={3}
              onClick={handleClose}
            >
              Cancel
            </Button>

            <Button
              colorScheme={"forestGreen"}
              rounded={"sm"}
              size={"sm"}
              onClick={() => setAlert(true)}
              fontWeight={400}
            >
              Save
            </Button>
          </DrawerFooter>
        </ModalContent>
      </Modal>

      <CustomAlertDialog
        isOpen={alert}
        onClose={() => setAlert(false)}
        alertHandler={handleSave}
        message={"Are you sure you want to change password?"}
        isLoading={isLoading}
      />
    </>
  );
};

export default ChangePassword;