@reachfive/identity-ui 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -7,6 +7,16 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.22.0] - 2023-11-09
+
+### Added
+
+- User interface enhancement on date type field.
+
+### Fixes
+
+- AccessToken is no more required in passwordless code verification workflow.
+
 ## [1.21.0] - 2023-10-12
 
 ### Added
@@ -365,7 +375,9 @@ The eye icon is now correctly displayed in the Auth widget.
 
 First version of the SDK Web UI.
 
-[Unreleased]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.21.0...HEAD
+[Unreleased]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.22.0...HEAD
+
+[1.22.0]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.21.0...v1.22.0
 
 [1.21.0]: https://github.com/ReachFive/identity-web-ui-sdk/compare/v1.20.2...v1.21.0
 

package/cjs/identity-ui.js

@@ -7327,12 +7327,6 @@ function isValued(v) {
   var unwrap = isObject(v) ? v[rawProperty] : v;
   return unwrap !== null && unwrap !== undefined && unwrap !== '' && !Number.isNaN(unwrap) && (Array.isArray(unwrap) ? unwrap.length > 0 : true);
 }
-function formatISO8601Date(year, month, day) {
-  if (isValued(year) && isValued(month) && isValued(day)) {
-    return "".concat(year, "-").concat(month.toString().padStart(2, '0'), "-").concat(day.toString().padStart(2, '0'));
-  }
-  return null;
-}
 function specializeIdentifierData(data) {
   return data.identifier ? _objectSpread2(_objectSpread2(_objectSpread2({}, data), {}, {
     identifier: undefined
@@ -9624,275 +9618,248 @@ function selectField(_ref) {
   }));
 }
 
-var formatDate = function formatDate(formValue) {
-  if (formValue && formValue.length) {
-    var _formValue$split = formValue.split('/'),
-      _formValue$split2 = _slicedToArray(_formValue$split, 3),
-      month = _formValue$split2[0],
-      day = _formValue$split2[1],
-      year = _formValue$split2[2];
-    if (year && year.length && month && month.length && day && day.length) {
-      return formatISO8601Date(year, month, day);
-    }
-  }
-  return null;
+var useDebounce = function useDebounce(value, milliSeconds) {
+  var _useState = React.useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    debouncedValue = _useState2[0],
+    setDebouncedValue = _useState2[1];
+  React.useEffect(function () {
+    var handler = setTimeout(function () {
+      setDebouncedValue(value);
+    }, milliSeconds);
+    return function () {
+      clearTimeout(handler);
+    };
+  }, [value, milliSeconds]);
+  return debouncedValue;
 };
-function dateField(config) {
-  return simpleField(_objectSpread2(_objectSpread2({
-    placeholder: 'mm/dd/yyyy'
-  }, config), {}, {
-    type: 'text',
-    format: {
-      bind: function bind(modelValue) {
-        if (modelValue && modelValue.length) {
-          var _modelValue$split = modelValue.split('-'),
-            _modelValue$split2 = _slicedToArray(_modelValue$split, 3),
-            _modelValue$split2$ = _modelValue$split2[0],
-            year = _modelValue$split2$ === void 0 ? '' : _modelValue$split2$,
-            _modelValue$split2$2 = _modelValue$split2[1],
-            month = _modelValue$split2$2 === void 0 ? '' : _modelValue$split2$2,
-            _modelValue$split2$3 = _modelValue$split2[2],
-            day = _modelValue$split2$3 === void 0 ? '' : _modelValue$split2$3;
-          return "".concat(month, "/").concat(day, "/").concat(year);
-        }
-      },
-      unbind: formatDate
-    },
-    validator: new Validator({
-      rule: function rule(value) {
-        var date = formatDate(value);
-        return !date || validator.isISO8601(date);
-      },
-      hint: 'date'
-    })
-  }));
-}
 
-var _excluded$6 = ["state"];
 var _templateObject$a, _templateObject2$5;
-var BIRTHDAY_PATH = 'birthdate';
-var months = function months(i18n) {
-  return ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'].map(function (m, i) {
-    return {
-      value: i + 1,
-      label: i18n(m)
-    };
-  });
-};
 var inputRowGutter = 10;
-var InputRow = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n    margin-right: ", "px;\n    margin-left: ", "px;\n    ", "\n"])), -inputRowGutter / 2, -inputRowGutter / 2, polished.clearFix());
-var InputCol = styled__default.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    float: left;\n    padding-right: ", "px;\n    padding-left: ", "px;\n    width: ", "%;\n    box-sizing: border-box;\n"])), inputRowGutter / 2, inputRowGutter / 2, function (props) {
+var InputRow = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    gap: ", "px;\n"])), inputRowGutter);
+var InputCol = styled__default.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    flex-basis: ", "%;\n"])), function (props) {
   return props.width;
 });
-var BirthdateField = function BirthdateField(props) {
-  var day = props.day,
-    month = props.month,
-    year = props.year,
-    _props$validation = props.validation,
-    validation = _props$validation === void 0 ? {} : _props$validation,
-    onChange = props.onChange,
-    showLabel = props.showLabel,
-    inputId = props.inputId,
-    label = props.label,
-    _props$required = props.required,
-    required = _props$required === void 0 ? true : _props$required,
-    months = props.months,
-    i18n = props.i18n;
-  var handleFieldChange = function handleFieldChange(field) {
-    return function (e) {
-      var value = e.target.value;
-      onChange(function (state) {
-        return _defineProperty({}, field, _objectSpread2(_objectSpread2({}, state[field]), {}, {
-          value: value
-        }));
-      });
-    };
+var DateField = function DateField(_ref) {
+  var i18n = _ref.i18n,
+    inputId = _ref.inputId,
+    label = _ref.label,
+    locale = _ref.locale,
+    onChange = _ref.onChange,
+    path = _ref.path,
+    required = _ref.required,
+    showLabel = _ref.showLabel,
+    validation = _ref.validation,
+    value = _ref.value;
+  var _useState = React.useState(isValued(value) ? value.raw.day : undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    day = _useState2[0],
+    setDay = _useState2[1];
+  var _useState3 = React.useState(isValued(value) ? value.raw.month : undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    month = _useState4[0],
+    setMonth = _useState4[1];
+  var _useState5 = React.useState(isValued(value) ? value.raw.year : undefined),
+    _useState6 = _slicedToArray(_useState5, 2),
+    year = _useState6[0],
+    setYear = _useState6[1];
+
+  // debounce year value to delay value update when user is currently editing it
+  var debouncedYear = useDebounce(year, 1000);
+  var setDatePart = function setDatePart(setter, value) {
+    if (Number.isNaN(Number(value))) return; // only accept number value
+    setter(Number(value));
   };
-  var handleFieldBlur = function handleFieldBlur(field) {
-    return function () {
-      return onChange(function (state) {
-        return _defineProperty({}, field, _objectSpread2(_objectSpread2({}, state[field]), {}, {
+  var handleDayChange = function handleDayChange(event) {
+    return setDatePart(setDay, event.target.value);
+  };
+  var handleMonthChange = function handleMonthChange(event) {
+    return setDatePart(setMonth, event.target.value);
+  };
+  var handleYearChange = function handleYearChange(event) {
+    return setDatePart(setYear, event.target.value);
+  };
+  React.useEffect(function () {
+    if (day && month && debouncedYear) {
+      onChange(function () {
+        return {
+          value: {
+            raw: luxon.DateTime.fromObject({
+              year: debouncedYear,
+              month: month,
+              day: day
+            })
+          },
           isDirty: true
-        }));
+        };
       });
-    };
+    }
+  }, [debouncedYear, month, day]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  var months = React.useMemo(function () {
+    return luxon.Info.months("long", {
+      locale: locale
+    });
+  }, [locale]);
+  var daysInMonth = React.useMemo(function () {
+    return Array.from({
+      length: luxon.DateTime.fromObject({
+        year: debouncedYear,
+        month: month
+      }).daysInMonth
+    }, function (_value, index) {
+      return index + 1;
+    });
+  }, [debouncedYear, month]);
+
+  // reset day if current value is out of range
+  if (day && !daysInMonth.includes(day)) {
+    setDay(undefined);
+  }
+  var parts = React.useMemo(function () {
+    return luxon.DateTime.now().setLocale(locale).toLocaleParts().map(function (part) {
+      return part.type;
+    }).filter(function (type) {
+      return type !== 'literal';
+    });
+  }, [locale]);
+  var error = _typeof(validation) === 'object' && 'error' in validation ? validation.error : null;
+  var fields = {
+    day: /*#__PURE__*/React__default.createElement(InputCol, {
+      key: "day",
+      width: 20
+    }, /*#__PURE__*/React__default.createElement(Select, {
+      name: "".concat(path, ".day"),
+      value: day || '',
+      hasError: error,
+      required: required,
+      onChange: handleDayChange,
+      placeholder: i18n('day'),
+      options: daysInMonth.map(function (day) {
+        return {
+          value: day,
+          label: day
+        };
+      }),
+      "data-testid": "".concat(path, ".day"),
+      "aria-label": i18n('day')
+    })),
+    month: /*#__PURE__*/React__default.createElement(InputCol, {
+      key: "month",
+      width: 50
+    }, /*#__PURE__*/React__default.createElement(Select, {
+      name: "".concat(path, ".month"),
+      value: month || '',
+      hasError: error,
+      required: required,
+      onChange: handleMonthChange,
+      placeholder: i18n('month'),
+      options: months.map(function (month, index) {
+        return {
+          value: index + 1,
+          label: month
+        };
+      }),
+      "data-testid": "".concat(path, ".month"),
+      "aria-label": i18n('month')
+    })),
+    year: /*#__PURE__*/React__default.createElement(InputCol, {
+      key: "year",
+      width: 30
+    }, /*#__PURE__*/React__default.createElement(Input, {
+      type: "number",
+      maxlength: "4",
+      inputmode: "numeric",
+      name: "".concat(path, ".year"),
+      value: year || '',
+      hasError: error,
+      required: required,
+      onChange: handleYearChange,
+      placeholder: i18n('year'),
+      "data-testid": "".concat(path, ".year"),
+      "aria-label": i18n('year')
+    }))
   };
-  return /*#__PURE__*/React__default.createElement(FormGroup, _extends({
+  return /*#__PURE__*/React__default.createElement(FormGroup, {
     inputId: inputId,
-    labelText: label
-  }, pick(validation, 'error'), {
+    labelText: label,
+    error: error,
     showLabel: showLabel
-  }), /*#__PURE__*/React__default.createElement(InputRow, null, /*#__PURE__*/React__default.createElement(InputCol, {
-    width: 20
-  }, /*#__PURE__*/React__default.createElement(Input, {
-    type: "text",
-    id: inputId,
-    name: "".concat(BIRTHDAY_PATH, ".day"),
-    maxlength: "2",
-    inputmode: "numeric",
-    value: day.value,
-    hasError: !!validation.day,
-    required: required,
-    placeholder: i18n('day'),
-    onChange: handleFieldChange('day'),
-    onBlur: handleFieldBlur('day'),
-    "data-testid": "".concat(BIRTHDAY_PATH, ".day")
-  })), /*#__PURE__*/React__default.createElement(InputCol, {
-    width: 50
-  }, /*#__PURE__*/React__default.createElement(Select, {
-    name: "".concat(BIRTHDAY_PATH, ".month"),
-    value: month.value || '',
-    hasError: !!validation.month,
-    required: required,
-    onChange: handleFieldChange('month'),
-    onBlur: handleFieldBlur('month'),
-    placeholder: i18n('month'),
-    options: months,
-    "data-testid": "".concat(BIRTHDAY_PATH, ".month")
-  })), /*#__PURE__*/React__default.createElement(InputCol, {
-    width: 30
-  }, /*#__PURE__*/React__default.createElement(Input, {
-    type: "text",
-    name: "".concat(BIRTHDAY_PATH, ".year"),
-    maxlength: "4",
-    inputmode: "numeric",
-    value: year.value,
-    hasError: !!validation.year,
-    required: required,
-    placeholder: i18n('year'),
-    onChange: handleFieldChange('year'),
-    onBlur: handleFieldBlur('year'),
-    "data-testid": "".concat(BIRTHDAY_PATH, ".year")
-  }))));
+  }, /*#__PURE__*/React__default.createElement(InputRow, null, parts.map(function (part) {
+    return fields[part];
+  })));
 };
-var validateLimitAge = function validateLimitAge(day, month, year) {
-  var yearNbr = parseInt(year, 10);
-  var dayNbr = parseInt(day, 10);
-  var monthNbr = parseInt(month, 10);
-  var age = luxon.DateTime.now().diff(luxon.DateTime.local(yearNbr, monthNbr, dayNbr), "years").years;
-  if (age < 6 || age > 129) {
-    return 'birthdate.yearLimit';
-  }
-  return false;
+var dateFormat = function dateFormat(locale) {
+  return luxon.DateTime.now().setLocale(locale).toLocaleParts().map(function (part) {
+    switch (part.type) {
+      case 'day':
+        return 'dd';
+      case 'month':
+        return 'mm';
+      case 'year':
+        return 'yyyy';
+      case 'literal':
+        return part.value;
+    }
+  }).join('');
 };
-var format = function format(_ref3) {
-  var day = _ref3.day,
-    month = _ref3.month,
-    year = _ref3.year;
-  return formatISO8601Date(year.value, month.value, day.value);
+var datetimeValidator = function datetimeValidator(locale) {
+  return new Validator({
+    rule: function rule(value) {
+      return isValued(value) && value.raw.isValid;
+    },
+    hint: 'date',
+    parameters: {
+      format: dateFormat(locale)
+    }
+  });
 };
-function birthdateField(_ref4) {
-  var label = _ref4.label,
-    _ref4$required = _ref4.required,
-    required = _ref4$required === void 0 ? true : _ref4$required,
-    defaultValue = _ref4.defaultValue;
-  return {
-    path: BIRTHDAY_PATH,
-    create: function create(_ref5) {
-      var i18n = _ref5.i18n,
-        showLabel = _ref5.showLabel;
-      var staticProps = {
-        inputId: generateId(),
-        label: label || i18n(BIRTHDAY_PATH),
-        months: months(i18n),
-        required: required,
-        i18n: i18n,
-        showLabel: showLabel
-      };
-      return {
-        key: BIRTHDAY_PATH,
-        modelPath: BIRTHDAY_PATH,
-        render: function render(_ref6) {
-          var state = _ref6.state,
-            props = _objectWithoutProperties(_ref6, _excluded$6);
-          return /*#__PURE__*/React__default.createElement(BirthdateField, _extends({
-            key: BIRTHDAY_PATH
-          }, state, props, staticProps));
-        },
-        initialize: function initialize(model) {
-          var modelValue = model.birthdate || defaultValue;
-          var _ref7 = modelValue ? modelValue.split('-') : [],
-            _ref8 = _slicedToArray(_ref7, 3),
-            _ref8$ = _ref8[0],
-            year = _ref8$ === void 0 ? '' : _ref8$,
-            _ref8$2 = _ref8[1],
-            month = _ref8$2 === void 0 ? '' : _ref8$2,
-            _ref8$3 = _ref8[2],
-            day = _ref8$3 === void 0 ? '' : _ref8$3;
-          return {
-            day: {
-              value: day,
-              isDirty: false
-            },
-            month: {
-              value: parseInt(month),
-              isDirty: false
-            },
-            year: {
-              value: year,
-              isDirty: false
-            }
-          };
-        },
-        unbind: function unbind(model, state) {
-          return _objectSpread2(_objectSpread2({}, model), {}, {
-            birthdate: format(state)
-          });
-        },
-        validate: function validate(state, _ref9) {
-          var isSubmitted = _ref9.isSubmitted;
-          var required = staticProps.required;
-          var day = state.day,
-            month = state.month,
-            year = state.year;
-          var missingFields = ['day', 'month', 'year'].filter(function (field) {
-            return (isSubmitted || state[field].isDirty) && !isValued(state[field].value);
-          });
-          if (missingFields.length) {
-            return required || missingFields.length < 3 ? _objectSpread2({
-              error: i18n('validation.required')
-            }, missingFields.reduce(function (acc, field) {
-              return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, field, true));
-            }, {})) : {};
-          }
-          if (isSubmitted || day.isDirty || month.isDirty || year.isDirty) {
-            if (!validator.isNumeric(year.value.toString()) || !luxon.DateTime.fromObject({
-              year: parseInt(year.value, 10)
-            }).isValid) {
-              return {
-                error: i18n("validation.birthdate.year"),
-                year: true
-              };
-            }
-            var birthdate = format(state);
-            if (!birthdate || !validator.isISO8601(birthdate)) {
-              return {
-                error: i18n('validation.birthdate.dayOfMonth'),
-                day: true
-              };
-            }
-            if (!(validator.isNumeric(month.value.toString()) && validator.isNumeric(day.value.toString())) || !luxon.DateTime.fromObject({
-              year: year.value,
-              month: month.value,
-              day: day.value
-            }).isValid) {
-              return {
-                error: i18n("validation.birthdate.dayOfMonth"),
-                day: true
-              };
-            }
-            var limitAge = validateLimitAge(day.value, month.value, year.value);
-            if (limitAge) {
-              return {
-                error: i18n("validation.".concat(limitAge))
-              };
-            }
-          }
-          return {};
-        }
-      };
+function dateField(props, config) {
+  return createField(_objectSpread2(_objectSpread2({}, props), {}, {
+    format: {
+      bind: function bind(value) {
+        var dt = value ? luxon.DateTime.fromISO(value) : luxon.DateTime.invalid('empty value');
+        return dt.isValid ? {
+          raw: dt
+        } : undefined;
+      },
+      unbind: function unbind(value) {
+        return value.raw.toISODate();
+      }
+    },
+    validator: props.validator ? datetimeValidator(config.language).and(props.validator) : datetimeValidator(config.language),
+    component: DateField,
+    extendedParams: {
+      locale: config.language
     }
-  };
+  }));
+}
+
+var _excluded$6 = ["min", "max", "label"];
+var ageLimitValidator = function ageLimitValidator() {
+  var min = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 6;
+  var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 129;
+  return new Validator({
+    rule: function rule(value) {
+      var age = luxon.DateTime.now().diff(value.raw, 'years').years;
+      return min < age && age < max;
+    },
+    hint: 'birthdate.yearLimit',
+    parameters: {
+      min: min,
+      max: max
+    }
+  });
+};
+function birthdateField(_ref, config) {
+  var min = _ref.min,
+    max = _ref.max,
+    label = _ref.label,
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  return dateField(_objectSpread2(_objectSpread2({}, props), {}, {
+    label: label || 'birthdate',
+    validator: ageLimitValidator(min, max)
+  }), config);
 }
 
 var PhoneNumberField = /*#__PURE__*/function (_React$Component) {
@@ -10513,7 +10480,7 @@ var predefinedFields = {
     }, cfg));
   }
 };
-function customFieldComponent(customField, cfg) {
+function customFieldComponent(customField, cfg, config) {
   var baseConfig = _objectSpread2(_objectSpread2({
     label: customField.name
   }, cfg), {}, {
@@ -10525,7 +10492,7 @@ function customFieldComponent(customField, cfg) {
     }) : _objectSpread2({}, baseConfig);
     return checkboxField(checkboxConfig);
   } else if (customField.dataType === 'date') {
-    return dateField(baseConfig);
+    return dateField(baseConfig, config);
   } else if (customField.dataType === 'integer') {
     return simpleField(_objectSpread2(_objectSpread2({}, baseConfig), {}, {
       type: 'number',
@@ -10620,7 +10587,7 @@ var resolveField = function resolveField(fieldConfig, config) {
   }
   var customField = findCustomField(config, camelPath);
   if (customField) {
-    return customFieldComponent(customField, fieldConfig);
+    return customFieldComponent(customField, fieldConfig, config);
   }
   var camelPathSplit = camelPath.split('.v'); // TODO What if consent start with a `v`?
   var consentField = findConsentField(config, camelPathSplit[0]);
@@ -11241,12 +11208,10 @@ var VerificationCodeView = /*#__PURE__*/function (_React$Component3) {
       var _this5$props = _this5.props,
         apiClient = _this5$props.apiClient,
         auth = _this5$props.auth,
-        challengeId = _this5$props.challengeId,
-        accessToken = _this5$props.accessToken;
+        challengeId = _this5$props.challengeId;
       return apiClient.verifyMfaPasswordless({
         challengeId: challengeId,
-        verificationCode: data.verificationCode,
-        accessToken: accessToken
+        verificationCode: data.verificationCode
       }).then(function (resp) {
         return window.location.replace(auth.redirectUri + "?" + toQueryString(resp));
       });
@@ -12549,7 +12514,7 @@ var Credential = withTheme(styled__default(Card)(_templateObject3$6 || (_templat
 var CardContent = withTheme(styled__default.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n    margin-left: ", "px;\n    white-space: initial;\n"])), function (props) {
   return props.theme.get('_blockInnerHeight');
 }));
-var dateFormat = function dateFormat(dateString, locales) {
+var dateFormat$1 = function dateFormat(dateString, locales) {
   return new Date(dateString).toLocaleDateString(locales, {
     timeZone: 'UTC'
   });
@@ -12572,7 +12537,7 @@ var MfaList = compose(withI18n, withConfig)(function (_ref) {
       }
     }, friendlyName), /*#__PURE__*/React__default.createElement("div", null, email || phoneNumber), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("span", null, i18n('mfaList.createdAt'), "\xA0: "), /*#__PURE__*/React__default.createElement("time", {
       dateTime: createdAt
-    }, dateFormat(createdAt, config.language)))));
+    }, dateFormat$1(createdAt, config.language)))));
   }));
 });
 var mfaListWidget = createWidget({