oa-componentbook 0.18.303 → 0.18.304

package/build/widgets/oa-widget-input-pattern-pin/CustomPinPatternCaptureWidget.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = CustomPinPatternCaptureWidget;
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.string.trim.js");
 require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -53,7 +54,8 @@ function CustomPinPatternCaptureWidget(_ref) {
     greyDisabledDots,
     heading,
     hideFooter,
-    showSequence
+    showSequence,
+    minAllowedlength
   } = _ref;
   const [pin, setPin] = (0, _react.useState)('');
   const decreaseValueIndexbyOne = array => array.map(num => num - 1);
@@ -81,9 +83,22 @@ function CustomPinPatternCaptureWidget(_ref) {
     setPattern((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []);
     setSavedPattern((prePoPulatedPattern === null || prePoPulatedPattern === void 0 ? void 0 : prePoPulatedPattern.length) > 0 ? decreaseValueIndexbyOne(prePoPulatedPattern) : []);
   }, [prePoPulatedPattern]);
+
+  /**
+   * Validates the PIN form and handles the submission of the PIN to the parent component.
+   * It checks if the PIN length is at least 4 characters, and if the confirm PIN matches the PIN.
+   * If the PIN is valid, it calls the finalPatternOrPassword callback with the PIN as the first argument.
+   */
   const handlePinSave = () => {
     form.validateFields().then(values => {
       // Passing the form data upto the parent.
+      if (values.confirmPin.length < minAllowedlength) {
+        form.setFields([{
+          name: 'pin',
+          errors: ['Pin/Pattern must be at least 4 characters long']
+        }]);
+        return;
+      }
       if (values.pin !== values.confirmPin) {
         form.setFields([{
           name: 'confirmPin',
@@ -102,7 +117,7 @@ function CustomPinPatternCaptureWidget(_ref) {
 
   // Pattern handling
   const handleSubmitPatternComplete = () => {
-    if (pattern.length <= 2) {
+    if (pattern.length < minAllowedlength) {
       setModalInfo({
         heading: 'Short Pattern',
         type: 'short-pattern',
@@ -172,6 +187,20 @@ function CustomPinPatternCaptureWidget(_ref) {
       key: num
     }, /*#__PURE__*/_react.default.createElement("span", null, num))));
   };
+
+  /**
+   * Helper function to check if a field has at least the minimum allowed length.
+   * If the length is less than the minimum allowed length, it sets an error on the field.
+   * @param {String} field - The name of the field to check.
+   */
+  const checkIfMinLength = field => {
+    if (form.getFieldValue(field).length && form.getFieldValue(field).length < minAllowedlength) {
+      form.setFields([{
+        name: field,
+        errors: ['Pin/Pattern must be at least 4 characters long']
+      }]);
+    }
+  };
   /**
    * Cancels the mismatch modal and resets the state.
    *
@@ -227,14 +256,30 @@ function CustomPinPatternCaptureWidget(_ref) {
       required: true,
       message: 'Required'
     }]
-  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, null)), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    onBlur: e => {
+      const trimmedValue = e.target.value.trim();
+      form.setFieldsValue({
+        pin: trimmedValue
+      });
+      checkIfMinLength('pin');
+    }
+  })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
     label: "Re-enter Pin/Password",
     name: "confirmPin",
     rules: [{
       required: true,
       message: 'Required'
     }]
-  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, null))), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+  }, /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
+    onBlur: e => {
+      const trimmedValue = e.target.value.trim();
+      form.setFieldsValue({
+        confirmPin: trimmedValue
+      });
+      checkIfMinLength('confirmPin');
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
     type: "primary",
     onClick: handlePinSave,
     label: "Save",
@@ -242,7 +287,7 @@ function CustomPinPatternCaptureWidget(_ref) {
   }))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "flexAlignPattern"
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "padding-bottom-8 padding-top-8"
+    className: "padding-bottom-8 padding-top-12"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: "primary-content",
     className: "type-t2-700"
@@ -314,7 +359,8 @@ CustomPinPatternCaptureWidget.propTypes = {
   greyDisabledDots: _propTypes.default.bool,
   heading: _propTypes.default.string,
   hideFooter: _propTypes.default.bool,
-  showSequence: _propTypes.default.bool
+  showSequence: _propTypes.default.bool,
+  minAllowedlength: _propTypes.default.number
 };
 CustomPinPatternCaptureWidget.defaultProps = {
   type: 'pattern',
@@ -326,5 +372,6 @@ CustomPinPatternCaptureWidget.defaultProps = {
   greyDisabledDots: false,
   heading: '',
   hideFooter: false,
-  showSequence: true
+  showSequence: true,
+  minAllowedlength: 0
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.18.303",
+  "version": "0.18.304",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",