web-humas-fe/components/form/settings/password.tsx

"use client";
import { useState } from "react";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { Input } from "@heroui/input";
import { EyeFilledIcon, EyeSlashFilledIcon } from "@/components/icons";
import { Button } from "@heroui/button";
import PasswordChecklist from "react-password-checklist";
import { savePassword } from "@/service/master-user";
import { close, error, loading } from "@/config/swal";

export default function PasswordForm(props: { doFetch: () => void }) {
  const MySwal = withReactContent(Swal);
  const [isVisible, setIsVisible] = useState([false, false]);

  const [passwordConf, setPasswordConf] = useState("");
  const [password, setPassword] = useState("");
  const [isValidPassword, setIsValidPassword] = useState(false);

  const onSubmit = async () => {
    loading();
    const data = {
      password: password,
      confirmPassword: passwordConf,
    };
    const res = await savePassword(data);
    if (res?.error) {
      error(res.message);
      return false;
    }
    close();
    props.doFetch();
    MySwal.fire({
      title: "Sukses",
      icon: "success",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "OK",
    }).then((result) => {
      if (result.isConfirmed) {
      }
    });
  };

  const generatePassword = () => {
    const length = Math.floor(Math.random() * 9) + 8;

    const upperCaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    const lowerCaseChars = "abcdefghijklmnopqrstuvwxyz";
    const numberChars = "0123456789";
    const specialChars = "!@#$%^&*";
    const allChars =
      upperCaseChars + lowerCaseChars + numberChars + specialChars;

    let generatedPassword = "";

    generatedPassword +=
      upperCaseChars[Math.floor(Math.random() * upperCaseChars.length)];
    generatedPassword +=
      specialChars[Math.floor(Math.random() * specialChars.length)];
    generatedPassword +=
      numberChars[Math.floor(Math.random() * numberChars.length)];
    generatedPassword +=
      lowerCaseChars[Math.floor(Math.random() * lowerCaseChars.length)];

    for (let i = generatedPassword.length; i < length; i++) {
      generatedPassword +=
        allChars[Math.floor(Math.random() * allChars.length)];
    }

    generatedPassword = generatedPassword
      .split("")
      .sort(() => 0.5 - Math.random())
      .join("");

    setPassword(generatedPassword);
  };

  return (
    <form className="flex flex-col gap-3">
      <div className="flex flex-col gap-1">
        <p className="text-sm">Password</p>
        <Input
          isRequired
          type={isVisible[0] ? "text" : "password"}
          label=""
          placeholder=""
          labelPlacement="outside"
          className="w-full "
          classNames={{
            inputWrapper: [
              "border-1 rounded-lg",
              "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
            ],
          }}
          variant="bordered"
          endContent={
            <button
              className="focus:outline-none"
              type="button"
              onClick={() => setIsVisible([!isVisible[0], isVisible[1]])}
            >
              {isVisible[0] ? (
                <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
              ) : (
                <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
              )}
            </button>
          }
          value={password}
          onChange={(e: any) => {
            setPassword(e.target.value.trim());
          }}
          onPaste={(e: any) => {
            setPassword(e.target.value.trim());
          }}
          onCopy={(e: any) => {
            setPassword(e.target.value.trim());
          }}
        />
      </div>
      <div className="flex flex-col gap-1">
        <p className="text-sm">Konfirmasi Password</p>
        <Input
          isRequired
          labelPlacement="outside"
          className="w-full "
          classNames={{
            inputWrapper: [
              "border-1 rounded-lg",
              "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
            ],
          }}
          variant="bordered"
          endContent={
            <button
              className="focus:outline-none"
              type="button"
              onClick={() => setIsVisible([isVisible[0], !isVisible[1]])}
            >
              {isVisible[1] ? (
                <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
              ) : (
                <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
              )}
            </button>
          }
          type={isVisible[1] ? "text" : "password"}
          label=""
          placeholder=""
          value={passwordConf}
          onChange={(e: any) => {
            setPasswordConf(e.target.value.trim());
          }}
          onPaste={(e: any) => {
            setPasswordConf(e.target.value.trim());
          }}
          onCopy={(e: any) => {
            setPasswordConf(e.target.value.trim());
          }}
        />
      </div>
      <a className="cursor-pointer text-[#DD8306]" onClick={generatePassword}>
        Generate Password
      </a>
      <PasswordChecklist
        rules={["minLength", "specialChar", "number", "capital", "match"]}
        minLength={8}
        value={password}
        valueAgain={passwordConf}
        onChange={(isValid) => {
          setIsValidPassword(isValid);
        }}
        className="text-black dark:text-white text-sm my-3"
        messages={{
          minLength: "Password must be more than 8 characters",
          specialChar: "Password must include a special character",
          number: "Password must include a number",
          capital: "Password must include an uppercase letter",
          match: "Passwords match",
        }}
      />
      <Button
        className="w-fit mt-4"
        color="primary"
        onPress={onSubmit}
        isDisabled={!isValidPassword}
      >
        Simpan
      </Button>
    </form>
  );
}