@reachfive/identity-ui 1.14.0 → 1.15.0

package/es/identity-ui.js

@@ -9334,6 +9334,97 @@ function identifierField(props, config) {
   }));
 }
 
+var ReCaptcha = function ReCaptcha() {
+  _classCallCheck(this, ReCaptcha);
+};
+
+_defineProperty(ReCaptcha, "getRecaptchaToken", /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(siteKey, action) {
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return window.grecaptcha.execute(siteKey, {
+              action: action
+            });
+
+          case 2:
+            return _context.abrupt("return", _context.sent);
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function (_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}());
+
+_defineProperty(ReCaptcha, "handle", /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(data, conf, callback, action) {
+    var captchaToken;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!conf.recaptcha_enabled) {
+              _context2.next = 13;
+              break;
+            }
+
+            _context2.prev = 1;
+            _context2.next = 4;
+            return ReCaptcha.getRecaptchaToken(conf.recaptcha_site_key, action);
+
+          case 4:
+            captchaToken = _context2.sent;
+            return _context2.abrupt("return", callback(_objectSpread2(_objectSpread2({}, data), {}, {
+              captchaToken: captchaToken
+            })));
+
+          case 8:
+            _context2.prev = 8;
+            _context2.t0 = _context2["catch"](1);
+            return _context2.abrupt("return", Promise.reject({
+              errorUserMsg: "Error recaptcha",
+              errorMessageKey: "recaptcha.error"
+            }));
+
+          case 11:
+            _context2.next = 14;
+            break;
+
+          case 13:
+            return _context2.abrupt("return", callback(data));
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2, null, [[1, 8]]);
+  }));
+
+  return function (_x3, _x4, _x5, _x6) {
+    return _ref2.apply(this, arguments);
+  };
+}());
+function importGoogleRecaptchaScript(site_key) {
+  var script = document.createElement("script");
+  script.src = "https://www.google.com/recaptcha/api.js?render=" + site_key;
+  document.body.appendChild(script);
+}
+function extractCaptchaTokenFromData(data) {
+  var token = data.captchaToken;
+  delete data.captchaToken;
+  return token;
+}
+
 function _templateObject$7() {
   var data = _taggedTemplateLiteral(["\n    margin-bottom: ", "px;\n    text-align: right;\n    ", ";\n"]);
 
@@ -9405,9 +9496,10 @@ var LoginView = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "handleLogin", function (data) {
+    _defineProperty(_assertThisInitialized(_this), "callback", function (data) {
       var specializedData = specializeIdentifierData(data);
       return _this.props.apiClient.loginWithPassword(_objectSpread2(_objectSpread2({}, specializedData), {}, {
+        captchaToken: data.captchaToken,
         auth: _objectSpread2(_objectSpread2({}, specializedData.auth), _this.props.auth)
       }));
     });
@@ -9416,8 +9508,15 @@ var LoginView = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(LoginView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      importGoogleRecaptchaScript(this.props.recaptcha_site_key);
+    }
+  }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
           socialProviders = _this$props.socialProviders,
           _this$props$session = _this$props.session,
@@ -9436,7 +9535,9 @@ var LoginView = /*#__PURE__*/function (_React$Component) {
         showForgotPassword: this.props.allowForgotPassword,
         canShowPassword: this.props.canShowPassword,
         defaultIdentifier: defaultIdentifier,
-        handler: this.handleLogin,
+        handler: function handler(data) {
+          return ReCaptcha.handle(data, _this2.props, _this2.callback, "login");
+        },
         config: this.props.config
       }), this.props.allowSignup && /*#__PURE__*/React__default.createElement(Alternative, null, /*#__PURE__*/React__default.createElement("span", null, i18n('login.signupLinkPrefix')), "\xA0", /*#__PURE__*/React__default.createElement(Link, {
         target: "signup"
@@ -9782,9 +9883,10 @@ var LoginView$1 = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "handleLogin", function (data) {
+    _defineProperty(_assertThisInitialized(_this), "callback", function (data) {
       var specializedData = specializeIdentifierData(data);
       return _this.props.apiClient.loginWithPassword(_objectSpread2(_objectSpread2({}, specializedData), {}, {
+        captchaToken: data.captchaToken,
         auth: _objectSpread2(_objectSpread2({}, specializedData.auth), _this.props.auth)
       }));
     });
@@ -9793,8 +9895,15 @@ var LoginView$1 = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(LoginView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      importGoogleRecaptchaScript(this.props.recaptcha_site_key);
+    }
+  }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var i18n = this.props.i18n;
       return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Heading, null, i18n('login.title')), /*#__PURE__*/React__default.createElement(LoginWithPasswordForm, {
         username: this.props.username,
@@ -9802,7 +9911,9 @@ var LoginView$1 = /*#__PURE__*/function (_React$Component) {
         showRememberMe: this.props.showRememberMe,
         showForgotPassword: this.props.allowForgotPassword,
         canShowPassword: this.props.canShowPassword,
-        handler: this.handleLogin,
+        handler: function handler(data) {
+          return ReCaptcha.handle(data, _this2.props, _this2.callback, "login");
+        },
         config: this.props.config
       }), /*#__PURE__*/React__default.createElement(Alternative, null, /*#__PURE__*/React__default.createElement(Link, {
         target: "login-with-web-authn"
@@ -11299,8 +11410,10 @@ var PasswordSignupForm = /*#__PURE__*/function (_React$Component) {
       blacklist: []
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleSignup", function (data) {
+    _defineProperty(_assertThisInitialized(_this), "callback", function (data) {
+      var captchaToken = extractCaptchaTokenFromData(data);
       return _this.props.apiClient.signup({
+        captchaToken: captchaToken,
         data: snakeCaseProperties(data),
         auth: _this.props.auth,
         redirectUrl: _this.props && _this.props.redirectUrl,
@@ -11330,8 +11443,15 @@ var PasswordSignupForm = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(PasswordSignupForm, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      importGoogleRecaptchaScript(this.props.recaptcha_site_key);
+    }
+  }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
           _this$props$beforeSig = _this$props.beforeSignup,
           beforeSignup = _this$props$beforeSig === void 0 ? function (x) {
@@ -11362,7 +11482,9 @@ var PasswordSignupForm = /*#__PURE__*/function (_React$Component) {
         beforeSubmit: beforeSignup,
         onFieldChange: this.refreshBlacklist,
         sharedProps: sharedProps,
-        handler: this.handleSignup
+        handler: function handler(data) {
+          return ReCaptcha.handle(data, _this2.props, _this2.callback, "signup");
+        }
       });
     }
   }]);
@@ -11520,10 +11642,29 @@ var skipError = function skipError(err) {
 };
 
 var enhance = withHandlers({
-  handleSubmit: function handleSubmit(_ref) {
+  callback: function callback(_ref) {
     var apiClient = _ref.apiClient,
         redirectUrl = _ref.redirectUrl,
-        returnToAfterPasswordReset = _ref.returnToAfterPasswordReset;
+        returnToAfterPasswordReset = _ref.returnToAfterPasswordReset,
+        recaptcha_enabled = _ref.recaptcha_enabled,
+        recaptcha_site_key = _ref.recaptcha_site_key;
+    return function (data) {
+      return ReCaptcha.handle(_objectSpread2(_objectSpread2({}, data), {}, {
+        redirectUrl: redirectUrl,
+        returnToAfterPasswordReset: returnToAfterPasswordReset
+      }), {
+        apiClient: apiClient,
+        redirectUrl: redirectUrl,
+        returnToAfterPasswordReset: returnToAfterPasswordReset,
+        recaptcha_enabled: recaptcha_enabled,
+        recaptcha_site_key: recaptcha_site_key
+      }, apiClient.requestPasswordReset, "forgot_password");
+    };
+  },
+  handleSubmit: function handleSubmit(_ref2) {
+    var apiClient = _ref2.apiClient,
+        redirectUrl = _ref2.redirectUrl,
+        returnToAfterPasswordReset = _ref2.returnToAfterPasswordReset;
     return function (data) {
       return apiClient.requestPasswordReset(_objectSpread2(_objectSpread2({}, data), {}, {
         redirectUrl: redirectUrl,
@@ -11532,17 +11673,18 @@ var enhance = withHandlers({
     };
   }
 });
-var ForgotPasswordView = enhance(function (_ref2) {
-  var i18n = _ref2.i18n,
-      goTo = _ref2.goTo,
-      allowLogin = _ref2.allowLogin,
-      handleSubmit = _ref2.handleSubmit,
-      displaySafeErrorMessage = _ref2.displaySafeErrorMessage,
-      showLabels = _ref2.showLabels,
-      allowWebAuthnLogin = _ref2.allowWebAuthnLogin;
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Heading, null, i18n('forgotPassword.title')), /*#__PURE__*/React__default.createElement(Intro, null, i18n('forgotPassword.prompt')), /*#__PURE__*/React__default.createElement(ForgotPasswordForm, {
+var ForgotPasswordView = enhance(function (_ref3) {
+  var i18n = _ref3.i18n,
+      goTo = _ref3.goTo,
+      allowLogin = _ref3.allowLogin,
+      callback = _ref3.callback,
+      displaySafeErrorMessage = _ref3.displaySafeErrorMessage,
+      showLabels = _ref3.showLabels,
+      allowWebAuthnLogin = _ref3.allowWebAuthnLogin,
+      recaptcha_site_key = _ref3.recaptcha_site_key;
+  return /*#__PURE__*/React__default.createElement("div", null, importGoogleRecaptchaScript(recaptcha_site_key), /*#__PURE__*/React__default.createElement(Heading, null, i18n('forgotPassword.title')), /*#__PURE__*/React__default.createElement(Intro, null, i18n('forgotPassword.prompt')), /*#__PURE__*/React__default.createElement(ForgotPasswordForm, {
     showLabels: showLabels,
-    handler: handleSubmit,
+    handler: callback,
     onSuccess: function onSuccess() {
       return goTo('forgot-password-success');
     },
@@ -11551,10 +11693,10 @@ var ForgotPasswordView = enhance(function (_ref2) {
     target: allowWebAuthnLogin ? 'login-with-web-authn' : 'login'
   }, i18n('forgotPassword.backToLoginLink'))));
 });
-var ForgotPasswordSuccessView = function ForgotPasswordSuccessView(_ref3) {
-  var i18n = _ref3.i18n,
-      allowLogin = _ref3.allowLogin,
-      allowWebAuthnLogin = _ref3.allowWebAuthnLogin;
+var ForgotPasswordSuccessView = function ForgotPasswordSuccessView(_ref4) {
+  var i18n = _ref4.i18n,
+      allowLogin = _ref4.allowLogin,
+      allowWebAuthnLogin = _ref4.allowWebAuthnLogin;
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Heading, null, i18n('forgotPassword.title')), /*#__PURE__*/React__default.createElement(Info, null, i18n('forgotPassword.successMessage')), allowLogin && /*#__PURE__*/React__default.createElement(Alternative, null, /*#__PURE__*/React__default.createElement(Link, {
     target: allowWebAuthnLogin ? 'login-with-web-authn' : 'login'
   }, i18n('back'))));
@@ -12370,7 +12512,7 @@ var MainView$3 = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function (data) {
+    _defineProperty(_assertThisInitialized(_this), "callback", function (data) {
       return _this.props.apiClient.startPasswordless(data, _this.props.auth).then(function (_) {
         return data;
       });
@@ -12384,8 +12526,15 @@ var MainView$3 = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(MainView, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      importGoogleRecaptchaScript(this.props.recaptcha_site_key);
+    }
+  }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
           i18n = _this$props.i18n,
           showSocialLogins = _this$props.showSocialLogins,
@@ -12400,10 +12549,14 @@ var MainView$3 = /*#__PURE__*/function (_React$Component) {
       }), showSocialLogins && socialProviders && socialProviders.length > 0 && /*#__PURE__*/React__default.createElement(Separator, {
         text: i18n('or')
       }), isEmail && showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('passwordless.intro')), isEmail && /*#__PURE__*/React__default.createElement(EmailInputForm, {
-        handler: this.handleSubmit,
+        handler: function handler(data) {
+          return ReCaptcha.handle(data, _this2.props, _this2.callback, "passwordless_email");
+        },
         onSuccess: this.handleSuccess
       }), !isEmail && showIntro && /*#__PURE__*/React__default.createElement(Intro, null, i18n('passwordless.sms.intro')), !isEmail && /*#__PURE__*/React__default.createElement(PhoneNumberInputForm, {
-        handler: this.handleSubmit,
+        handler: function handler(data) {
+          return ReCaptcha.handle(data, _this2.props, _this2.callback, "passwordless_phone");
+        },
         onSuccess: this.handleSuccess
       }));
     }
@@ -12418,7 +12571,7 @@ var VerificationCodeView$1 = /*#__PURE__*/function (_React$Component2) {
   var _super2 = _createSuper(VerificationCodeView);
 
   function VerificationCodeView() {
-    var _this2;
+    var _this3;
 
     _classCallCheck(this, VerificationCodeView);
 
@@ -12426,26 +12579,30 @@ var VerificationCodeView$1 = /*#__PURE__*/function (_React$Component2) {
       args[_key2] = arguments[_key2];
     }
 
-    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    _this3 = _super2.call.apply(_super2, [this].concat(args));
 
-    _defineProperty(_assertThisInitialized(_this2), "handleSubmit", function (data) {
-      var _this2$props = _this2.props,
-          apiClient = _this2$props.apiClient,
-          auth = _this2$props.auth,
-          phoneNumber = _this2$props.phoneNumber;
+    _defineProperty(_assertThisInitialized(_this3), "handleSubmit", function (data) {
+      var _this3$props = _this3.props,
+          apiClient = _this3$props.apiClient,
+          auth = _this3$props.auth,
+          phoneNumber = _this3$props.phoneNumber;
       return apiClient.verifyPasswordless(_objectSpread2({
         phoneNumber: phoneNumber
       }, data), auth);
     });
 
-    return _this2;
+    return _this3;
   }
 
   _createClass(VerificationCodeView, [{
     key: "render",
     value: function render() {
+      var _this4 = this;
+
       return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Info, null, this.props.i18n('passwordless.sms.verification.intro')), /*#__PURE__*/React__default.createElement(VerificationCodeInputForm$1, {
-        handler: this.handleSubmit
+        handler: function handler(data) {
+          return ReCaptcha.handle(data, _this4.props, _this4.callback, "verify_passwordless_sms");
+        }
       }));
     }
   }]);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@reachfive/identity-ui",
-    "version": "1.14.0",
+    "version": "1.15.0",
     "description": "ReachFive Identity Web UI SDK",
     "author": "ReachFive",
     "repository": {
@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@hypnosphi/recompose": "0.30.5",
-        "@reachfive/identity-core": "1.21.0",
+        "@reachfive/identity-core": "1.22.0",
         "@reachfive/zxcvbn": "1.0.0-alpha.2",
         "char-info": "0.3.2",
         "classnames": "2.2.6",