Function ForgotPasswordModal

client/src/components/ForgotPasswordModal.jsx:18–112

()

import authService from "services/auth.service";

const ForgotPasswordModal = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [msg, setMsg] = useState("");
  const [isSending, setIsSending] = useState(false);
  const {
    handleSubmit,
    register,
    formState: { errors },
  } = useForm();

  const toggleModal = () => {
    setMsg("");
    setIsOpen(!isOpen);
  };

  const onSubmitReset = (data) => {
    setMsg("");
    setIsSending(true);
    authService
      .forgotPassword(data.email)
      .then((data) => {
        if (data.data.status === "OK") {
          setIsSending(false);
          toast.success("Email has been sent successfully.");
          setIsOpen(false);
        }
      })
      .catch((error) => {
        setIsSending(false);
        setMsg(error.response.data.message);
      });
  };
  return (
    <div>
      <>
        {isOpen && <Backdrop />}
        <span
          onClick={() => setIsOpen(!isOpen)}
          className="mb-1 text-sm text-purple-700 cursor-pointer"
        >
          Forgot password?
        </span>
        <Modal isOpen={isOpen} onClose={toggleModal}>
          <form onSubmit={handleSubmit(onSubmitReset)}>
            <ModalHeader>Forgot Password</ModalHeader>
            <ModalBody>
              <Label>
                <span className="font-semibold">Email</span>
                <Input
                  name="email"
                  className="mt-1 border py-2 pl-2"
                  valid
                  type="email"
                  inputMode="email"
                  {...register("email", {
                    required: "Email required",
                    pattern: {
                      // eslint-disable-next-line no-useless-escape