@reachfive/identity-ui 1.22.0 → 1.23.0

package/index.d.ts

@@ -49,13 +49,13 @@ interface I18n {
 
 interface OnReady {
     /**
-     * Callback function called after the widget has been successfully loaded and rendered inside the container. 
+     * Callback function called after the widget has been successfully loaded and rendered inside the container.
      * The callback is called with the widget instance.
      */
     onReady?: (arg: WidgetInstance) => void
 }
 
-interface OnSuccess {	
+interface OnSuccess {
     /** Callback function called when the request has failed. */
     onSuccess?: () => void
 }
@@ -68,7 +68,7 @@ interface OnError {
 interface Theme {
     /**
      * The options to set up to customize the appearance of the widget.
-     * 
+     *
      * @type Theme
      */
     theme?: ThemeOptions
@@ -112,9 +112,9 @@ export interface SocialButtonTheme {
     borderWidth?: string
     /** Boolean that specifies if there is a box shadow on the button or not. */
     focusBoxShadow?: boolean
-}  
+}
 
-/** 
+/**
  * The field's type.
  * @enum {('hidden' | 'text' | 'number' | 'email' | 'tel')}
  */
@@ -128,7 +128,7 @@ export interface Field {
     type?: FieldType
 }
 
-/** 
+/**
 * The auth type.
 * @enum {('magic_link' | 'sms')}
 */
@@ -137,44 +137,44 @@ export type AuthType = 'magic_link' | 'sms'
 export interface AuthOptions extends Container, I18n, OnReady, Theme {
     /**
      * Boolean that specifies if the forgot password option is enabled.
-     * 
+     *
      * If the `allowLogin` and `allowSignup` properties are set to `false`, the forgot password feature is enabled even if `allowForgotPassword` is set to `false`.
-     * 
+     *
      * @default true
      */
     allowForgotPassword?: boolean
 
     /**
      * Boolean that specifies whether biometric login is enabled.
-     * 
+     *
      * @default false
      */
     allowWebAuthnLogin?: boolean
 
     /**
      * Boolean that specifies whether biometric signup is enabled.
-     * 
+     *
      * @default false
      */
     allowWebAuthnSignup?: boolean
 
     /**
      * Boolean that specifies whether login is enabled.
-     * 
+     *
      * @default true
      */
     allowLogin?: boolean
 
     /**
      * Boolean that specifies whether signup is enabled.
-     * 
+     *
      * @default true
      */
 
     allowSignup?: boolean
     /**
      * Boolean that specifies whether an additional field for the custom identifier is shown.
-     * 
+     *
      * @default false
      */
 
@@ -185,7 +185,7 @@ export interface AuthOptions extends Container, I18n, OnReady, Theme {
 
     /**
      * Whether or not to provide the display password in clear text option.
-     * 
+     *
      * @default false
      */
     canShowPassword?: boolean
@@ -197,16 +197,16 @@ export interface AuthOptions extends Container, I18n, OnReady, Theme {
     countryCode?: string
 
     /**
-     * Whether or not to display a safe error message on password reset, given an invalid email address. 
+     * Whether or not to display a safe error message on password reset, given an invalid email address.
      * This mode ensures not to leak email addresses registered to the platform.
-     * 
+     *
      * @default false
      */
     displaySafeErrorMessage?: boolean
 
     /**
      * The widget’s initial screen.
-     * 
+     *
      * - if `allowLogin` is set to `true`, it defaults to `login`.
      * - if `allowLogin` is set to `false` and `allowSignup` is set to `true`, it defaults to `signup`.
      * - if `allowLogin` is set to `false` and `allowWebAuthnLogin` is set to `true`, it defaults to `login-with-web-authn`.
@@ -234,39 +234,39 @@ export interface AuthOptions extends Container, I18n, OnReady, Theme {
 
     /**
      * Whether the signup form fields' labels are displayed on the login view.
-     * 
+     *
      * @default false
      */
     showLabels?: boolean
 
     /**
      * Whether the Remember me checkbox is displayed on the login view. Affects user session duration.
-     * 
+     *
      * The account session duration configured in the ReachFive Console (Settings  Security  SSO) applies when:
      * - The checkbox is hidden from the user
      * - The checkbox is visible and selected by the user
-     * 
+     *
      * If the checkbox is visible and not selected by the user, the default session duration of 1 day applies.
-     * 
+     *
      * @default false
      */
     showRememberMe?: boolean
 
     /**
      * List of the signup fields to display in the form.
-     * 
+     *
      * You can pass a field as an object to override default values :
-     * 
+     *
      * @example
      * {
      *   "key": "family_name",
-     *   "defaultValue": "Moreau", 
+     *   "defaultValue": "Moreau",
      *   "required": true
      * }
      */
     signupFields?: (Field | string)[]
 
-    /** 
+    /**
      * Lists the available social providers. This is an array of strings.
      * Tip: If you pass an empty array, social providers will not be displayed.
      */
@@ -282,7 +282,7 @@ export interface AuthOptions extends Container, I18n, OnReady, Theme {
 export interface EmailEditorOptions extends AccessToken, Container, I18n, OnReady, Theme {
     /** The URL sent in the email to which the user is redirected. This URL must be whitelisted in the `Allowed Callback URLs` field of your ReachFive client settings. */
     redirectUrl?: string
-  
+
     /**
      * Whether the signup form fields' labels are displayed on the login view.
      * @default false
@@ -296,13 +296,13 @@ export interface PasswordEditorOptions extends AccessToken, Container, I18n, OnR
      * @default false
      */
     showLabels?: boolean
-  
+
     /**
      * Ask for the old password before entering a new one.
      * @default false
      */
     promptOldPassword?: boolean
-  
+
     /** The URL sent in the email to which the user is redirected. This URL must be whitelisted in the Allowed Callback URLs field of your ReachFive client settings. */
     redirectUrl?: string
 }
@@ -310,13 +310,13 @@ export interface PasswordEditorOptions extends AccessToken, Container, I18n, OnR
 export interface PasswordResetOptions extends Container, OnReady, I18n, Theme {
     /** The URL to which the user is redirected after a password reset. */
     loginLink?: string
-  
+
     /**
      * Whether or not to provide the display password in clear text option.
      * @default false
      */
     canShowPassword?: boolean
-  
+
     /** The URL sent in the email to which the user is redirected. This URL must be whitelisted in the Allowed Callback URLs field of your ReachFive client settings. */
     redirectUrl?: string
 }
@@ -327,10 +327,10 @@ export interface PhoneNumberEditorOptions extends AccessToken, Container, OnRead
      * @default false
      */
     showLabels?: boolean
-  
+
     /**
      * The [ISO country](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) code useful to format phone numbers.
-     * 
+     *
      * Defaults to the predefined country code in your account settings or `FR`.
      */
     countryCode?: string
@@ -339,30 +339,30 @@ export interface PhoneNumberEditorOptions extends AccessToken, Container, OnRead
 export interface ProfileEditorOptions extends AccessToken, Container, OnReady, OnSuccess, OnError, I18n, Theme {
     /**
      * List of the fields to display in the form.
-     * 
+     *
      * **Important:**
-     * 
+     *
      * The following fields can not be changed with this widget:
      * - `password`
      * - `password_confirmation`
-     * 
+     *
      * It is not possible to update the primary identifier submitted at registration (email or phone number). When the primary identifier is the email address (SMS feature disabled), users can only enter a phone number and update without limit.
      */
     fields?: (Field | string)[]
-  
+
     /**
      * Whether the signup form fields' labels are displayed on the login view.
      * @default false
      */
     showLabels?: boolean
-  
+
     /**
      * The [ISO country](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) code useful to format phone numbers.
-     * 
+     *
      * Defaults to the predefined country code in your account settings or `FR`.
      */
     countryCode?: string
-  
+
     /** The URL sent in the email to which the user is redirected. This URL must be whitelisted in the `Allowed Callback URLs` field of your ReachFive client settings. */
     redirectUrl?: string
 }
@@ -370,11 +370,11 @@ export interface ProfileEditorOptions extends AccessToken, Container, OnReady, O
 export interface SocialAccountsOptions extends AccessToken, Container, I18n, OnReady, Theme {
     /**
      * Lists the available social providers. This is an array of strings.
-     * 
-     * Tip: If you pass an empty array, social providers will not be displayed. 
+     *
+     * Tip: If you pass an empty array, social providers will not be displayed.
      * */
     socialProviders?: ProviderId[]
-    
+
     /** List of authentication options */
     auth?: CoreAuthOptions
 }
@@ -382,8 +382,8 @@ export interface SocialAccountsOptions extends AccessToken, Container, I18n, OnR
 export interface SocialLoginOptions extends Container, I18n, OnReady, Theme {
     /**
      * Lists the available social providers. This is an array of strings.
-     * 
-     * Tip: If you pass an empty array, social providers will not be displayed. 
+     *
+     * Tip: If you pass an empty array, social providers will not be displayed.
      * */
     socialProviders?: ProviderId[]
 
@@ -409,8 +409,8 @@ export interface PassswordlessOptions extends Container, I18n, OnReady, OnSucces
 
     /**
      * Lists the available social providers. This is an array of strings.
-     * 
-     * Tip:  If you pass an empty array, social providers will not be displayed. 
+     *
+     * Tip:  If you pass an empty array, social providers will not be displayed.
      */
     socialProviders?: ProviderId[]
 
@@ -422,7 +422,7 @@ export interface PassswordlessOptions extends Container, I18n, OnReady, OnSucces
 
     /**
      * The [ISO country](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) code useful to format phone numbers.
-     * 
+     *
      * Defaults to the predefined country code in your account settings or `FR`.
      */
     countryCode?: string
@@ -454,6 +454,12 @@ export interface MfaOptions extends AccessToken, Container, I18n, OnReady, Theme
      * @default true
      */
     showRemoveMfaCredentials?: boolean
+
+    /**
+     * Boolean to enable (`true`) or disable (`false`) whether the option to remove MFA credentials are displayed.
+     * @default false
+     */
+    requireMfaRegistration?: boolean
 }
 
 export interface MfaCredentialsOptions extends AccessToken, Container, I18n, OnReady, Theme {}
@@ -467,4 +473,10 @@ export interface StepUpOptions extends AccessToken, Container, I18n, OnReady, Th
      * @default true
      */
     showIntro?: boolean
+
+    /**
+     * Show the stepup button. Unnecessary for console use
+     * @default true
+     */
+    showStepUpStart?: boolean
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@reachfive/identity-ui",
-    "version": "1.22.0",
+    "version": "1.23.0",
     "description": "ReachFive Identity Web UI SDK",
     "author": "ReachFive",
     "repository": {

package/umd/identity-ui.js

@@ -46078,6 +46078,9 @@
       checked: checked,
       name: name,
       onChange: onSelect,
+      style: radio && {
+        appearance: "radio"
+      },
       required: required,
       value: value
     }), label);
@@ -58839,66 +58842,89 @@
       })];
     }
   });
-  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.createElement("div", null, /*#__PURE__*/react.createElement(StartStepUpMfaButton, {
+        var _this$props = this.props,
+          showStepUpStart = _this$props.showStepUpStart,
+          goTo = _this$props.goTo;
+        return this.state.response === undefined ? null : /*#__PURE__*/react.createElement("div", null, showStepUpStart ? /*#__PURE__*/react.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.createElement(FaSelectionView, _extends({}, this.state.response, this.props)));
       }
     }]);
-    return MfaStepUpView;
+    return MainView;
   }(react.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.createElement("div", null, showIntro && /*#__PURE__*/react.createElement(Intro, null, i18n('mfa.select.factor')), /*#__PURE__*/react.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.createElement(VerificationCodeView, _extends({}, this.state.response, this.props)) : /*#__PURE__*/react.createElement("div", null, showIntro && /*#__PURE__*/react.createElement(Intro, null, i18n('mfa.select.factor')), /*#__PURE__*/react.createElement(StartPasswordlessForm, {
           options: amr.map(function (factor) {
             return {
               key: factor,
@@ -58910,7 +58936,7 @@
           onSuccess: function onSuccess(data) {
             return _this4.props.goTo('verification-code', _objectSpread2(_objectSpread2({}, data), {}, {
               amr: amr
-            }));
+            }, _this4.state.response));
           }
         }));
       }
@@ -58923,8 +58949,8 @@
     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) {
@@ -58952,15 +58978,16 @@
     return VerificationCodeView;
   }(react.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
       });
     }
   });
@@ -59024,7 +59051,7 @@
       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() {
@@ -59076,7 +59103,7 @@
   var emailEditorWidget = createMultiViewWidget({
     initialView: 'main',
     views: {
-      main: MainView,
+      main: MainView$1,
       success: SuccessView
     }
   });
@@ -59213,7 +59240,7 @@
       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() {
@@ -59295,12 +59322,12 @@
   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() {
@@ -59334,7 +59361,7 @@
     }]);
     return MainView;
   }(react.Component);
-  _defineProperty(MainView$2, "defaultProps", {
+  _defineProperty(MainView$3, "defaultProps", {
     onSuccess: function onSuccess() {},
     onError: function onError() {}
   });
@@ -59354,7 +59381,7 @@
   var passwordResetWidget = createMultiViewWidget({
     initialView: 'main',
     views: {
-      main: MainView$2,
+      main: MainView$3,
       success: SuccessView$1
     },
     prepare: function prepare(options) {
@@ -59387,7 +59414,7 @@
       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() {
@@ -59485,7 +59512,7 @@
   var passwordlessWidget = createMultiViewWidget({
     initialView: 'main',
     views: {
-      main: MainView$3,
+      main: MainView$4,
       emailSent: EmailSentView,
       verificationCode: VerificationCodeView$2
     },
@@ -59941,7 +59968,7 @@
   var DivCredentialBlock = withTheme(styled.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() {
@@ -59983,7 +60010,8 @@
           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';
@@ -59991,7 +60019,9 @@
         var isEmailCredentialRegistered = credentials.some(function (credential) {
           return credential.type === 'email';
         });
-        return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement(DivCredentialBlock, null, config.mfaEmailEnabled && /*#__PURE__*/react.createElement("div", null, showIntro && /*#__PURE__*/react.createElement(Intro, null, i18n('mfa.email.explain')), /*#__PURE__*/react.createElement(EmailRegisteringCredentialForm, {
+        return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement(DivCredentialBlock, null, config.mfaEmailEnabled && !credentials.map(function (credential) {
+          return credential.type;
+        }).includes('email') && /*#__PURE__*/react.createElement("div", null, showIntro && /*#__PURE__*/react.createElement(Intro, null, requireMfaRegistration ? i18n('mfa.email.explain.required') : i18n('mfa.email.explain')), /*#__PURE__*/react.createElement(EmailRegisteringCredentialForm, {
           handler: this.onEmailRegistering,
           onSuccess: function onSuccess(data) {
             return _this2.props.goTo('verification-code', _objectSpread2(_objectSpread2({}, data), {}, {
@@ -60092,7 +60122,7 @@
   var mfaCredentialsWidget = createMultiViewWidget({
     initialView: 'main',
     views: {
-      'main': MainView$4,
+      'main': MainView$5,
       'credential-registered': CredentialRegisteredView,
       'verification-code': VerificationCodeView$3,
       'credential-removed': CredentialRemovedView
@@ -60104,6 +60134,7 @@
       }).then(function (credentials) {
         return deepDefaults(_objectSpread2(_objectSpread2({
           showIntro: true,
+          requireMfaRegistration: false,
           showRemoveMfaCredentials: true
         }, options), credentials));
       });