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

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithValidation = exports.WithPrefixAndPostfix = exports.Sizes = exports.Shapes = exports.SecurityFeatures = exports.Disabled = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _InputPassword = _interopRequireDefault(require("./InputPassword"));
var _InputPassword2 = require("./InputPassword.constants");
var _InputPassword3 = require("./InputPassword.defaults");
const _excluded = ["value"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
/**
 * The InputPassword component provides a secure input field for password entry,
 * with built-in show/hide functionality and security features.
 *
 * ## Usage
 *
 * ```jsx
 * import { KwikUIInputPassword } from 'react-kwikui';
 *
 * const [password, setPassword] = useState('');
 *
 * const handlePasswordChange = (id, value) => {
 *   setPassword(value);
 * };
 *
 * <KwikUIInputPassword
 *   id="user-password"
 *   label="Password"
 *   placeholder="Enter your password"
 *   value={password}
 *   onInput={handlePasswordChange}
 * />
 * ```
 */
var _default = exports.default = {
  title: "KwikUI/Inputs/Password",
  component: _InputPassword.default,
  parameters: {
    componentSubtitle: "Secure input field for password entry and authentication",
    docs: {
      description: {
        component: "The Password Input component provides a secure field for password entry with show/hide functionality and security features for authenticated access to the KwikID platform. Used for both customer authentication during KYC processes and banking credential verification in compliance with RBI and UIDAI security standards."
      }
    },
    a11y: {
      config: {
        rules: [{
          id: "label-content",
          enabled: true
        }]
      }
    }
  },
  argTypes: {
    shape: {
      control: "radio",
      options: _InputPassword2.KWIKUI_INPUT_PASSWORD__SHAPE__OPTIONS,
      description: "The shape of the password input",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.shape
        }
      }
    },
    size: {
      control: "radio",
      options: _InputPassword2.KWIKUI_INPUT_PASSWORD__SIZE__OPTIONS,
      description: "The size of the password input",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.size
        }
      }
    },
    updateOn: {
      control: "radio",
      options: _InputPassword2.KWIKUI_INPUT_PASSWORD__UPDATE_ON__OPTIONS,
      description: "When to trigger the input event",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.updateOn
        }
      }
    },
    value: {
      control: "text",
      description: "The current value of the password input",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.value
        }
      }
    },
    label: {
      control: "text",
      description: "Label text for the input field",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.label
        }
      }
    },
    placeholder: {
      control: "text",
      description: "Placeholder text for the input field",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.placeholder
        }
      }
    },
    prefix: {
      control: "object",
      description: "Content to display before the input field",
      table: {
        type: {
          summary: "ReactNode"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.prefix
        }
      }
    },
    postfix: {
      control: "object",
      description: "Content to display after the input field",
      table: {
        type: {
          summary: "ReactNode"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.postfix
        }
      }
    },
    disabled: {
      control: "boolean",
      description: "Whether the input is disabled",
      table: {
        type: {
          summary: "boolean"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.disabled
        }
      }
    },
    required: {
      control: "boolean",
      description: "Whether the input is required",
      table: {
        type: {
          summary: "boolean"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.required
        }
      }
    },
    isInputCopyDisabled: {
      control: "boolean",
      description: "Disable copying from the input",
      table: {
        type: {
          summary: "boolean"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.isInputCopyDisabled
        }
      }
    },
    isInputPasteDisabled: {
      control: "boolean",
      description: "Disable pasting into the input",
      table: {
        type: {
          summary: "boolean"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.isInputPasteDisabled
        }
      }
    },
    id: {
      control: "text",
      description: "The ID of the input component",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS.id
        }
      }
    },
    customStyles: {
      control: "object",
      description: "Custom styles to apply to different parts of the component",
      table: {
        type: {
          summary: "object"
        },
        defaultValue: {
          summary: "{ wrapper: {}, container: {}, label: {}, input: {}, prefix: {}, postfix: {} }"
        }
      }
    },
    messages: {
      description: "Array of message objects to display (error, info, etc.)",
      table: {
        type: {
          summary: "Array<IKwikUIMessage>"
        },
        defaultValue: {
          summary: "[]"
        }
      }
    },
    onInput: {
      description: "Function called when input value changes",
      table: {
        type: {
          summary: "(id: string, value: string) => void"
        }
      }
    },
    onInputValidate: {
      description: "Function to validate input value",
      table: {
        type: {
          summary: "(id: string, value: string) => { isValid: boolean } | undefined | null"
        }
      }
    },
    onInputCopyDisabled: {
      description: "Function called when copy is attempted while disabled",
      table: {
        type: {
          summary: "() => void"
        }
      }
    },
    onInputPasteDisabled: {
      description: "Function called when paste is attempted while disabled",
      table: {
        type: {
          summary: "() => void"
        }
      }
    }
  }
};
/**
 * Template for rendering the InputPassword component
 */
const Template = args => {
  // Simplified parameters to avoid unused variables
  const {
      value
    } = args,
    rest = _objectWithoutProperties(args, _excluded);
  const [localValue, setValue] = _react.default.useState(value || "");

  // Password validation minimum length per RBI guidelines
  const PASSWORD_MIN_LENGTH = 8;
  const onChangeInput = (id, value) => {
    setValue(value);
  };
  const onChangeInputValidate = (id, value) => {
    // Password validation per RBI guidelines for banking applications
    if (value && value.length >= PASSWORD_MIN_LENGTH && /\d/.test(value)) {
      return {
        isValid: true
      };
    }
    return value ? {
      isValid: false
    } : null;
  };
  const onCopyDisabled = () => {
    console.log("Copy is disabled for security compliance");
  };
  const onPasteDisabled = () => {
    console.log("Paste is disabled for security compliance");
  };
  return /*#__PURE__*/_react.default.createElement(_InputPassword.default, _extends({}, rest, {
    onInput: onChangeInput,
    onInputValidate: onChangeInputValidate,
    value: localValue,
    onInputCopyDisabled: onCopyDisabled,
    onInputPasteDisabled: onPasteDisabled
  }));
};

/**
 * Default password input implementation
 */
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS), {}, {
  id: "kyc-platform-password",
  label: "KwikID Platform Password",
  placeholder: "Enter your secure password"
});
Default.parameters = {
  docs: {
    description: {
      story: "Default password input for KwikID platform login and authentication. Used by customers and KYC officers to access their accounts within the VideoKYC system."
    }
  }
};

/**
 * Password input with different shapes
 */
const Shapes = () => {
  const [value1, setValue1] = _react.default.useState("");
  const [value2, setValue2] = _react.default.useState("");
  const [value3, setValue3] = _react.default.useState("");
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: "2rem"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "customer-password-curved",
    label: "Customer Account Password (Curved)",
    shape: "curved",
    placeholder: "Enter customer account password",
    value: value1,
    onInput: (id, val) => setValue1(val)
  }), /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "agent-password-rectangle",
    label: "KYC Agent Password (Rectangle)",
    shape: "rectangle",
    placeholder: "Enter KYC agent password",
    value: value2,
    onInput: (id, val) => setValue2(val)
  }), /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "admin-password-rounded",
    label: "Admin Portal Password (Rounded)",
    shape: "rounded",
    placeholder: "Enter admin password",
    value: value3,
    onInput: (id, val) => setValue3(val)
  }));
};
exports.Shapes = Shapes;
Shapes.parameters = {
  docs: {
    description: {
      story: "Password inputs with different shapes used across various interfaces in the KwikID platform. Customer-facing components typically use the curved style, bank KYC agent interfaces use rectangle, and admin portals use rounded corners for consistency across the VideoKYC ecosystem."
    },
    controls: {
      disable: true
    }
  }
};

/**
 * Password input with different sizes
 */
const Sizes = () => {
  const [value1, setValue1] = _react.default.useState("");
  const [value2, setValue2] = _react.default.useState("");
  const [value3, setValue3] = _react.default.useState("");
  const [value4, setValue4] = _react.default.useState("");
  const [value5, setValue5] = _react.default.useState("");
  const [value6, setValue6] = _react.default.useState("");
  const [value7, setValue7] = _react.default.useState("");
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: "2rem"
    }
  }, /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "password-xxs",
    size: "xxs",
    label: "Mobile App PIN (XXS)",
    placeholder: "Enter 4-digit PIN",
    value: value1,
    onInput: (id, val) => setValue1(val)
  }), /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "password-xs",
    size: "xs",
    label: "Transaction PIN (XS)",
    placeholder: "Enter transaction PIN",
    value: value2,
    onInput: (id, val) => setValue2(val)
  }), /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "password-s",
    size: "s",
    label: "Mobile App Password (S)",
    placeholder: "Enter mobile app password",
    value: value3,
    onInput: (id, val) => setValue3(val)
  }), /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "password-m",
    size: "m",
    label: "Web Portal Password (M - Default)",
    placeholder: "Enter web portal password",
    value: value4,
    onInput: (id, val) => setValue4(val)
  }), /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "password-l",
    size: "l",
    label: "KYC Officer Password (L)",
    placeholder: "Enter KYC officer password",
    value: value5,
    onInput: (id, val) => setValue5(val)
  }), /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "password-xl",
    size: "xl",
    label: "Bank Branch Kiosk Password (XL)",
    placeholder: "Enter kiosk administrative password",
    value: value6,
    onInput: (id, val) => setValue6(val)
  }), /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "password-xxl",
    size: "xxl",
    label: "System Administrator Password (XXL)",
    placeholder: "Enter system administrator password",
    value: value7,
    onInput: (id, val) => setValue7(val)
  }));
};
exports.Sizes = Sizes;
Sizes.parameters = {
  docs: {
    description: {
      story: "Password inputs in different sizes used across various device form factors in the KwikID ecosystem. Smaller sizes are used for mobile applications, medium sizes for standard web portals, and larger sizes for bank branch kiosks and administrative interfaces."
    },
    controls: {
      disable: true
    }
  }
};

/**
 * Password input with validation
 */
const WithValidation = () => {
  var _validatePassword;
  const [value, setValue] = _react.default.useState("");

  // Password security constants as per RBI guidelines
  const PASSWORD_MIN_LENGTH = 8;
  const validatePassword = (id, inputValue) => {
    if (!inputValue) return null;

    // Check for minimum length (RBI guideline for financial applications)
    const hasMinLength = inputValue.length >= PASSWORD_MIN_LENGTH;

    // Check for number
    const hasNumber = /\d/.test(inputValue);

    // Check for special character
    const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(inputValue);

    // Check for uppercase letter
    const hasUppercase = /[A-Z]/.test(inputValue);
    const isValid = hasMinLength && hasNumber && hasSpecial && hasUppercase;
    return {
      isValid
    };
  };
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "As per RBI security guidelines for banking applications, password must have:"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "At least ", PASSWORD_MIN_LENGTH, " characters"), /*#__PURE__*/_react.default.createElement("li", null, "At least one number"), /*#__PURE__*/_react.default.createElement("li", null, "At least one special character"), /*#__PURE__*/_react.default.createElement("li", null, "At least one uppercase letter")), /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "financial-portal-password",
    label: "Create VideoKYC Portal Password",
    placeholder: "Enter secure password for your KwikID account",
    value: value,
    onInput: (id, inputValue) => setValue(inputValue),
    onInputValidate: validatePassword,
    messages: value ? [(_validatePassword = validatePassword("financial-portal-password", value)) !== null && _validatePassword !== void 0 && _validatePassword.isValid ? {
      type: "success",
      message: "Strong password! Meets all security requirements."
    } : {
      type: "error",
      message: "Password does not meet RBI security guidelines. Please review requirements above."
    }] : []
  }));
};
exports.WithValidation = WithValidation;
WithValidation.parameters = {
  docs: {
    description: {
      story: "Password input with validation enforcing RBI's security guidelines for financial applications. This component is used during customer registration on the KwikID platform to ensure strong passwords for VideoKYC portal access, protecting sensitive identity information."
    },
    controls: {
      disable: true
    }
  }
};

/**
 * Password input with security features
 */
const SecurityFeatures = exports.SecurityFeatures = Template.bind({});
SecurityFeatures.args = _objectSpread(_objectSpread({}, _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS), {}, {
  id: "high-security-password",
  label: "UIDAI Portal Integration Password",
  placeholder: "Enter UIDAI integration credentials",
  isInputCopyDisabled: true,
  isInputPasteDisabled: true
});
SecurityFeatures.parameters = {
  docs: {
    description: {
      story: "Password input with copy and paste disabled for enhanced security when entering credentials for UIDAI integration. These security features are mandated by regulatory requirements for handling authentication to government identity verification systems."
    }
  }
};

/**
 * Disabled password input
 */
const Disabled = exports.Disabled = Template.bind({});
Disabled.args = _objectSpread(_objectSpread({}, _InputPassword3.KWIKUI_INPUT_PASSWORD__DEFAULTS), {}, {
  id: "biometric-auth-password",
  label: "Biometric Authentication (Password Disabled)",
  placeholder: "Authentication using Aadhaar biometric verification only",
  disabled: true
});
Disabled.parameters = {
  docs: {
    description: {
      story: "Disabled password input when biometric authentication is being used instead. For certain high-security operations in the KwikID platform, Aadhaar biometric verification is required and traditional password entry is disabled."
    }
  }
};

/**
 * Password input with prefix and postfix
 */
const WithPrefixAndPostfix = () => {
  const [value, setValue] = _react.default.useState("");
  // Convert React elements to strings for prefix/postfix
  const lockIcon = "🔒";
  const infoIcon = "ⓘ";
  return /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
    id: "password-prefix-postfix",
    label: "E-Banking Credentials (with security indicators)",
    placeholder: "Enter your e-banking password",
    prefix: lockIcon,
    postfix: infoIcon,
    value: value,
    onInput: (id, val) => setValue(val)
  });
};
exports.WithPrefixAndPostfix = WithPrefixAndPostfix;
WithPrefixAndPostfix.parameters = {
  docs: {
    description: {
      story: "Password input with security indicator prefix and information icon postfix. Used in e-banking integration within the KwikID platform, allowing customers to link their bank accounts during KYC verification with visual indicators of security compliance."
    },
    controls: {
      disable: true
    }
  }
};