@reachfive/identity-ui 1.21.0 → 1.23.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
@@ -8408,6 +8402,9 @@ var Check = withTheme(styled__default(function (_ref4) {
     checked: checked,
     name: name,
     onChange: onSelect,
+    style: radio && {
+      appearance: "radio"
+    },
     required: required,
     value: value
   }), label);
@@ -9624,275 +9621,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 +10483,7 @@ var predefinedFields = {
     }, cfg));
   }
 };
-function customFieldComponent(customField, cfg) {
+function customFieldComponent(customField, cfg, config) {
   var baseConfig = _objectSpread2(_objectSpread2({
     label: customField.name
   }, cfg), {}, {
@@ -10525,7 +10495,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 +10590,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]);
@@ -11149,66 +11119,89 @@ var StartPasswordlessForm = createForm({
     })];
   }
 });
-var MfaStepUpView = /*#__PURE__*/function (_React$Component) {
-  _inherits(MfaStepUpView, _React$Component);
-  var _super = _createSuper(MfaStepUpView);
-  function MfaStepUpView() {
+var MainView = /*#__PURE__*/function (_React$Component) {
+  _inherits(MainView, _React$Component);
+  var _super = _createSuper(MainView);
+  function MainView(props) {
     var _this;
-    _classCallCheck(this, MfaStepUpView);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _classCallCheck(this, MainView);
+    _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "onGetStepUpToken", function () {
       return _this.props.apiClient.getMfaStepUpToken({
         options: _this.props.auth,
         accessToken: _this.props.accessToken
+      }).then(function (res) {
+        return _this.setState({
+          response: res
+        });
       });
     });
+    _this.state = {
+      response: undefined
+    };
     return _this;
   }
-  _createClass(MfaStepUpView, [{
+  _createClass(MainView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.onGetStepUpToken();
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(StartStepUpMfaButton, {
+      var _this$props = this.props,
+        showStepUpStart = _this$props.showStepUpStart,
+        goTo = _this$props.goTo;
+      return this.state.response === undefined ? null : /*#__PURE__*/React__default.createElement("div", null, showStepUpStart ? /*#__PURE__*/React__default.createElement(StartStepUpMfaButton, {
         handler: this.onGetStepUpToken,
-        onSuccess: function onSuccess(data) {
-          return _this2.props.goTo('fa-selection', _objectSpread2({}, data));
+        onSuccess: function onSuccess(_) {
+          return goTo('fa-selection', _this2.state.response);
         }
-      }));
+      }) : /*#__PURE__*/React__default.createElement(FaSelectionView, _extends({}, this.state.response, this.props)));
     }
   }]);
-  return MfaStepUpView;
+  return MainView;
 }(React__default.Component);
 var FaSelectionView = /*#__PURE__*/function (_React$Component2) {
   _inherits(FaSelectionView, _React$Component2);
   var _super2 = _createSuper(FaSelectionView);
-  function FaSelectionView() {
+  function FaSelectionView(props) {
     var _this3;
     _classCallCheck(this, FaSelectionView);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this3 = _super2.call.apply(_super2, [this].concat(args));
+    _this3 = _super2.call(this, props);
     _defineProperty(_assertThisInitialized(_this3), "onChooseFa", function (factor) {
       return _this3.props.apiClient.startPasswordless(_objectSpread2(_objectSpread2({}, factor), {}, {
         stepUp: _this3.props.token
-      })).then(function (resp) {
-        return _objectSpread2(_objectSpread2({}, resp), factor);
+      })).then(function (res) {
+        return _this3.setState({
+          response: _objectSpread2(_objectSpread2({}, res), factor)
+        });
       });
     });
+    _this3.state = {
+      response: undefined
+    };
     return _this3;
   }
   _createClass(FaSelectionView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.amr.length == 1) this.onChooseFa({
+        authType: this.props.amr[0]
+      });else this.setState({
+        response: {}
+      });
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this4 = this;
-      var _this$props = this.props,
-        amr = _this$props.amr,
-        showIntro = _this$props.showIntro,
-        i18n = _this$props.i18n;
-      return /*#__PURE__*/React__default.createElement("div", null, showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('mfa.select.factor')), /*#__PURE__*/React__default.createElement(StartPasswordlessForm, {
+      var _this$props2 = this.props,
+        amr = _this$props2.amr,
+        showIntro = _this$props2.showIntro,
+        i18n = _this$props2.i18n;
+      return this.state.response === undefined ? null : amr.length == 1 ? /*#__PURE__*/React__default.createElement(VerificationCodeView, _extends({}, this.state.response, this.props)) : /*#__PURE__*/React__default.createElement("div", null, showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('mfa.select.factor')), /*#__PURE__*/React__default.createElement(StartPasswordlessForm, {
         options: amr.map(function (factor) {
           return {
             key: factor,
@@ -11220,7 +11213,7 @@ var FaSelectionView = /*#__PURE__*/function (_React$Component2) {
         onSuccess: function onSuccess(data) {
           return _this4.props.goTo('verification-code', _objectSpread2(_objectSpread2({}, data), {}, {
             amr: amr
-          }));
+          }, _this4.state.response));
         }
       }));
     }
@@ -11233,20 +11226,18 @@ var VerificationCodeView = /*#__PURE__*/function (_React$Component3) {
   function VerificationCodeView() {
     var _this5;
     _classCallCheck(this, VerificationCodeView);
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
     _this5 = _super3.call.apply(_super3, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this5), "handleSubmit", function (data) {
       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));
       });
@@ -11264,15 +11255,16 @@ var VerificationCodeView = /*#__PURE__*/function (_React$Component3) {
   return VerificationCodeView;
 }(React__default.Component);
 var mfaStepUpWidget = createMultiViewWidget({
-  initialView: 'mfa-step-up',
+  initialView: 'main',
   views: {
-    'mfa-step-up': MfaStepUpView,
+    'main': MainView,
     'fa-selection': FaSelectionView,
     'verification-code': VerificationCodeView
   },
   prepare: function prepare(options) {
     return deepDefaults({}, options, {
-      showIntro: true
+      showIntro: true,
+      showStepUpStart: true
     });
   }
 });
@@ -11336,7 +11328,7 @@ var EmailEditorForm = createForm({
     validator: email
   })]
 });
-var MainView = /*#__PURE__*/function (_React$Component) {
+var MainView$1 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -11388,7 +11380,7 @@ var SuccessView = function SuccessView(_ref) {
 var emailEditorWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    main: MainView,
+    main: MainView$1,
     success: SuccessView
   }
 });
@@ -11525,7 +11517,7 @@ var VerificationCodeInputForm$1 = createForm({
     type: 'text'
   })]
 });
-var MainView$1 = /*#__PURE__*/function (_React$Component) {
+var MainView$2 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -11607,12 +11599,12 @@ _defineProperty(VerificationCodeView$1, "defaultProps", {
 var phoneNumberEditorWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    main: MainView$1,
+    main: MainView$2,
     verificationCode: VerificationCodeView$1
   }
 });
 
-var MainView$2 = /*#__PURE__*/function (_React$Component) {
+var MainView$3 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -11646,7 +11638,7 @@ var MainView$2 = /*#__PURE__*/function (_React$Component) {
   }]);
   return MainView;
 }(React__default.Component);
-_defineProperty(MainView$2, "defaultProps", {
+_defineProperty(MainView$3, "defaultProps", {
   onSuccess: function onSuccess() {},
   onError: function onError() {}
 });
@@ -11666,7 +11658,7 @@ var resolveCode = function resolveCode() {
 var passwordResetWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    main: MainView$2,
+    main: MainView$3,
     success: SuccessView$1
   },
   prepare: function prepare(options) {
@@ -11699,7 +11691,7 @@ var VerificationCodeInputForm$2 = createForm({
     type: 'text'
   })]
 });
-var MainView$3 = /*#__PURE__*/function (_React$Component) {
+var MainView$4 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -11797,7 +11789,7 @@ var EmailSentView = function EmailSentView(_ref) {
 var passwordlessWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    main: MainView$3,
+    main: MainView$4,
     emailSent: EmailSentView,
     verificationCode: VerificationCodeView$2
   },
@@ -12332,7 +12324,7 @@ var PhoneNumberRegisteringCredentialForm = function PhoneNumberRegisteringCreden
 var DivCredentialBlock = withTheme(styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n    margin-left: ", "px;\n    margin-bottom: 5em;\n"])), function (props) {
   return props.theme.get('_blockInnerHeight');
 }));
-var MainView$4 = /*#__PURE__*/function (_React$Component) {
+var MainView$5 = /*#__PURE__*/function (_React$Component) {
   _inherits(MainView, _React$Component);
   var _super = _createSuper(MainView);
   function MainView() {
@@ -12374,7 +12366,8 @@ var MainView$4 = /*#__PURE__*/function (_React$Component) {
         showIntro = _this$props.showIntro,
         config = _this$props.config,
         showRemoveMfaCredentials = _this$props.showRemoveMfaCredentials,
-        credentials = _this$props.credentials;
+        credentials = _this$props.credentials,
+        requireMfaRegistration = _this$props.requireMfaRegistration;
       var PhoneNumberInputForm = PhoneNumberRegisteringCredentialForm(config);
       var phoneNumberCredentialRegistered = credentials.find(function (credential) {
         return credential.type === 'sms';
@@ -12382,7 +12375,9 @@ var MainView$4 = /*#__PURE__*/function (_React$Component) {
       var isEmailCredentialRegistered = credentials.some(function (credential) {
         return credential.type === 'email';
       });
-      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(DivCredentialBlock, null, config.mfaEmailEnabled && /*#__PURE__*/React__default.createElement("div", null, showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('mfa.email.explain')), /*#__PURE__*/React__default.createElement(EmailRegisteringCredentialForm, {
+      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(DivCredentialBlock, null, config.mfaEmailEnabled && !credentials.map(function (credential) {
+        return credential.type;
+      }).includes('email') && /*#__PURE__*/React__default.createElement("div", null, showIntro && /*#__PURE__*/React__default.createElement(Intro, null, requireMfaRegistration ? i18n('mfa.email.explain.required') : i18n('mfa.email.explain')), /*#__PURE__*/React__default.createElement(EmailRegisteringCredentialForm, {
         handler: this.onEmailRegistering,
         onSuccess: function onSuccess(data) {
           return _this2.props.goTo('verification-code', _objectSpread2(_objectSpread2({}, data), {}, {
@@ -12483,7 +12478,7 @@ var CredentialRemovedView = function CredentialRemovedView(_ref2) {
 var mfaCredentialsWidget = createMultiViewWidget({
   initialView: 'main',
   views: {
-    'main': MainView$4,
+    'main': MainView$5,
     'credential-registered': CredentialRegisteredView,
     'verification-code': VerificationCodeView$3,
     'credential-removed': CredentialRemovedView
@@ -12495,6 +12490,7 @@ var mfaCredentialsWidget = createMultiViewWidget({
     }).then(function (credentials) {
       return deepDefaults(_objectSpread2(_objectSpread2({
         showIntro: true,
+        requireMfaRegistration: false,
         showRemoveMfaCredentials: true
       }, options), credentials));
     });
@@ -12549,7 +12545,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 +12568,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({