marco.pms.web/src/pages/authentication/ChangePassword.jsx

import React, { useState } from "react";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import showToast from "../../services/toastService";
import AuthRepository from "../../repositories/AuthRepository";
import "./page-auth.css";

const ChangePasswordSchema = z.object({
  email: z.string().email(),
  newPassword: z
    .string()
    .min(8, "Password must be at least 8 characters")
    .regex(/[A-Z]/, "Must contain an uppercase letter")
    .regex(/[a-z]/, "Must contain a lowercase letter")
    .regex(/\d/, "Must contain a number")
    .regex(/[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/, "Must contain a special character"),
  oldPassword: z.string().min(1, "Old Password is required"),
});

const ChangePasswordPage = ({ onClose }) => {
  const [loading, setLoading] = useState(false);
  const [hidepass, setHidepass] = useState(true);
  const [hidepass1, setHidepass1] = useState(true);

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm({
    resolver: zodResolver(ChangePasswordSchema),
  });

  const onChangePassword = async (data) => {
    try {
      setLoading(true);
      await AuthRepository.changepassword(data);
      showToast("Your Password changed Successfully", "success");
      setLoading(false);
      reset();
      onClose();
    } catch (error) {
      setLoading(false);
      showToast("Something went wrong", "error");
    }
  };

  return (
    <div
      className="modal d-flex align-items-center justify-content-center show"
      tabIndex="-1"
      role="dialog"
      style={{ display: "flex", backgroundColor: "rgba(0,0,0,0.5)" }}
    >
      <div
        className="modal-dialog"
        role="document"
        style={{
          maxWidth: "400px",
          width: "100%",
        }}
      >
        <div className="modal-content p-4 rounded shadow bg-white position-relative">
          {/* Close Button */}
          <button
            type="button"
            className="btn-close position-absolute"
            style={{ top: "30px", right: "25px" }}
            aria-label="Close"
            onClick={onClose}
          ></button>

          <h5 className="mb-2">Change Password</h5>
          <p className="mb-4" style={{ fontSize: "14px" }}>
            Enter your email and old password to update.
          </p>

          <form onSubmit={handleSubmit(onChangePassword)}>
            <div className="mb-3">
              <label htmlFor="email" className="form-label">
                Email
              </label>
              <input
                type="text"
                className="form-control"
                id="email"
                {...register("email")}
                placeholder="Enter your email"
              />
              {errors.email && (
                <div className="danger-text" style={{ fontSize: "12px" }}>
                  {errors.email.message}
                </div>
              )}
            </div>

            {/* <div className="mb-3">
              <label className="form-label">Old Password</label>
              <div className="input-group">
                <input
                  type={hidepass ? "password" : "text"}
                  className="form-control"
                  {...register("oldPassword")}
                  placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                />
                <button
                  type="button"
                  className="btn btn-outline-secondary"
                  onClick={() => setHidepass(!hidepass)}
                >
                  <i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`} />
                </button>
              </div>
              {errors.oldPassword && (
                <p className="danger-text small-text text-start">{errors.oldPassword.message}</p>
              )}
            </div>

            <div className="mb-3">
              <label className="form-label">New Password</label>
              <div className="input-group">
                <input
                  type={hidepass1 ? "password" : "text"}
                  className="form-control"
                  {...register("newPassword")}
                  placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                />
                <button
                  type="button"
                  className="btn btn-outline-secondary"
                  onClick={() => setHidepass1(!hidepass1)}
                >
                  <i className={`bx ${hidepass1 ? "bx-hide" : "bx-show"}`} />
                </button>
              </div>
              {errors.newPassword && (
                <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                  {errors.newPassword.message}
                </div>
              )}
            </div> */}

            <div className="mb-3">
              <label className="form-label">Old Password</label>
              <div className="input-group" style={{ border: "1px solid #ced4da", borderRadius: "0.375rem", overflow: "hidden" }}>
                <input
                  type={hidepass ? "password" : "text"}
                  className="form-control border-0"
                  {...register("oldPassword")}
                  placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                  style={{ boxShadow: "none" }}
                />
                <button
                  type="button"
                  className="btn btn-outline-light"
                  style={{
                    border: "none",
                    backgroundColor: "#fff",
                    borderLeft: "1px solid #ced4da",
                  }}
                  onClick={() => setHidepass(!hidepass)}
                >
                  <i className={`bx ${hidepass ? "bx-hide" : "bx-show"}`} />
                </button>
              </div>
              {errors.oldPassword && (
                <p className="danger-text small-text text-start">{errors.oldPassword.message}</p>
              )}
            </div>

            <div className="mb-3">
              <label className="form-label">New Password</label>
              <div className="input-group" style={{ border: "1px solid #ced4da", borderRadius: "0.375rem", overflow: "hidden" }}>
                <input
                  type={hidepass1 ? "password" : "text"}
                  className="form-control border-0"
                  {...register("newPassword")}
                  placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                  style={{ boxShadow: "none" }}
                />
                <button
                  type="button"
                  className="btn btn-outline-light"
                  style={{
                    border: "none",
                    backgroundColor: "#fff",
                    borderLeft: "1px solid #ced4da",
                  }}
                  onClick={() => setHidepass1(!hidepass1)}
                >
                  <i className={`bx ${hidepass1 ? "bx-hide" : "bx-show"}`} />
                </button>
              </div>
              {errors.newPassword && (
                <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                  {errors.newPassword.message}
                </div>
              )}
            </div>


            <div className="mb-3 text-start ">
              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
                Password must be at least 8 characters
              </p>
              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
                Password must contain at least one uppercase letter
              </p>
              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
                Password must contain at least one number
              </p>
              <p className="p-0 m-0" style={{ fontSize: "9px" }}>
                Password must contain at least one special character
              </p>
            </div>

            <div className="d-flex justify-content-between">
              <button
                type="button"
                className="btn btn-outline-secondary btn-sm"
                onClick={onClose}
              >
                Cancel
              </button>
              <button type="submit" className="btn btn-primary btn-sm">
                {loading ? "Please Wait..." : "Update Password"}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default ChangePasswordPage;