kwikid-components-react/components/kwikui/inputs/input-password/InputPassword.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _kwikidToolkit = require("kwikid-toolkit");
var _react = _interopRequireDefault(require("react"));
var _fa = require("react-icons/fa6");
var _Messages = _interopRequireDefault(require("../../messages/Messages"));
var _InputPassword = require("./InputPassword.definition");
var _InputPassword2 = require("./InputPassword.style");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const KwikUIInputPassword = _ref => {
  let {
    customStyles = {
      wrapper: {},
      container: {},
      label: {},
      input: {}
    },
    disabled = false,
    id = "input-password",
    label = undefined,
    messages = [],
    placeholder = undefined,
    postfix = "",
    prefix = "",
    required = true,
    shape = _InputPassword.IKwikUIInputPasswordShape.CURVED,
    size = _InputPassword.IKwikUIInputPasswordSize.M,
    updateOn = _InputPassword.IKwikUIInputPasswordUpdateOn.CHANGE,
    value = undefined,
    onInput = undefined,
    onInputValidate = undefined,
    isInputCopyDisabled = false,
    isInputPasteDisabled = false,
    onInputCopyDisabled = undefined,
    onInputPasteDisabled = undefined
  } = _ref;
  const [showPassword, setShowPassword] = _react.default.useState(false); // Track whether to show the password or not

  const handleTogglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };
  const inputType = showPassword ? "text" : "password"; // Determine the input type based on showPassword state

  const [valid, setValid] = _react.default.useState(undefined);
  const [inputFocused, setInputFocused] = _react.default.useState(undefined);
  const handleOnInput = newValue => {
    if (onInputValidate) {
      const validation = onInputValidate(id, newValue);
      setValid(validation === null || validation === void 0 ? void 0 : validation.isValid);
    } else {
      setValid(true);
    }
    if (onInput && !disabled) {
      onInput(id, newValue);
    }
  };
  const handleOnCopy = e => {
    if (isInputCopyDisabled) {
      e.preventDefault();
      if (onInputCopyDisabled) {
        onInputCopyDisabled();
      }
    }
  };
  const handleOnPaste = e => {
    if (isInputPasteDisabled) {
      e.preventDefault();
      if (onInputPasteDisabled) {
        onInputPasteDisabled();
      }
    }
  };
  return /*#__PURE__*/_react.default.createElement(_InputPassword2.KwikUIStyleInputPasswordWrapper, {
    style: customStyles.wrapper
  }, /*#__PURE__*/_react.default.createElement(_InputPassword2.KwikUIStyleInputPasswordContainer, {
    size: size,
    shape: shape,
    disabled: disabled,
    className: "\n        input input-password\n        ".concat(valid == false ? "input-error" : "", "\n        ").concat(valid != false && inputFocused ? "input-focused" : "", "\n      "),
    style: customStyles.container
  }, label && /*#__PURE__*/_react.default.createElement(_InputPassword2.KwikUIStyleInputPasswordLabel, {
    size: size,
    disabled: disabled,
    style: customStyles.label
  }, label, required && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\xA0*")), (0, _kwikidToolkit.isNotEmptyValue)(prefix) && /*#__PURE__*/_react.default.createElement("div", {
    id: "prefix"
  }, prefix), /*#__PURE__*/_react.default.createElement("input", {
    type: inputType,
    id: id,
    disabled: disabled,
    placeholder: placeholder,
    value: value,
    onFocus: () => {
      setInputFocused(true);
    },
    onChange: e => {
      if (updateOn === "change") {
        handleOnInput(e.target.value);
      }
    },
    onBlur: e => {
      if (updateOn === "blur") {
        handleOnInput(e.target.value);
      }
      setInputFocused(false);
    },
    onCopy: e => handleOnCopy(e),
    onPaste: e => handleOnPaste(e),
    style: customStyles.input
  }), /*#__PURE__*/_react.default.createElement("div", {
    id: "visibility-button",
    onClick: handleTogglePasswordVisibility
  }, showPassword ? /*#__PURE__*/_react.default.createElement(_fa.FaEyeSlash, null) : /*#__PURE__*/_react.default.createElement(_fa.FaEye, null)), (0, _kwikidToolkit.isNotEmptyValue)(postfix) && /*#__PURE__*/_react.default.createElement("div", {
    id: "postfix"
  }, postfix)), (0, _kwikidToolkit.isNotEmptyValue)(messages) && /*#__PURE__*/_react.default.createElement(_InputPassword2.KwikUIStyleInputPasswordMessagesContainer, null, /*#__PURE__*/_react.default.createElement(_Messages.default, {
    messages: messages,
    size: size
  })));
};
var _default = exports.default = KwikUIInputPassword;