@lideralia/alife-uikit 1.2.0 → 1.2.2

package/dist/organisms/Modals/LoginPassCode.js

@@ -9,10 +9,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ModalLoginPassCode = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _reactGoogleRecaptcha = _interopRequireDefault(require("react-google-recaptcha"));
+
 var _Layout = require("../../atoms/Layout");
 
 var _Field = require("../../atoms/Field");
@@ -42,17 +50,54 @@ var ModalLoginPassCode = function ModalLoginPassCode(_ref) {
       description = _ref.description,
       labelRetry = _ref.labelRetry,
       labelRetryAction = _ref.labelRetryAction,
+      labelCountDown = _ref.labelCountDown,
       actionRetry = _ref.actionRetry,
       labelChange = _ref.labelChange,
       labelChangeAction = _ref.labelChangeAction,
       actionChange = _ref.actionChange,
       hasError = _ref.hasError,
       errorMessage = _ref.errorMessage,
-      onSubmit = _ref.onSubmit;
+      onSubmit = _ref.onSubmit,
+      tokenCaptcha = _ref.tokenCaptcha;
+  var seconds = 30;
   var pass1Ref = (0, _react.useRef)(null);
   var pass2Ref = (0, _react.useRef)(null);
   var pass3Ref = (0, _react.useRef)(null);
   var pass4Ref = (0, _react.useRef)(null);
+
+  var recaptchaRef = _react.default.createRef();
+
+  var _useState = (0, _react.useState)(seconds),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      countdown = _useState2[0],
+      setCountdown = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isCountdown = _useState4[0],
+      setIsCountdown = _useState4[1];
+
+  var labelCountMessage = labelCountDown.replace('{countdown}', countdown);
+
+  var onChangeCaptcha = function onChangeCaptcha(valueToken) {
+    actionInput('token', valueToken);
+    actionRetry(valueToken);
+  };
+
+  (0, _react.useEffect)(function () {
+    var timer = countdown > 0 && isCountdown && setInterval(function () {
+      return setCountdown(countdown - 1);
+    }, 1000);
+
+    if (countdown === 0) {
+      setIsCountdown(false);
+      setCountdown(seconds);
+    }
+
+    return function () {
+      return clearInterval(timer);
+    };
+  }, [countdown, isCountdown]);
   return _react.default.createElement(_Modal.Modal, {
     width: "339px",
     id: id,
@@ -161,7 +206,15 @@ var ModalLoginPassCode = function ModalLoginPassCode(_ref) {
     sizeText: "display14",
     color: "red",
     marginY: 1
-  }, errorMessage)), _react.default.createElement(_Modal.Modal.Actions, null, _react.default.createElement(_Layout.Box, {
+  }, errorMessage)), _react.default.createElement(_Modal.Modal.Actions, null, _react.default.createElement(_reactGoogleRecaptcha.default, {
+    style: {
+      display: 'inline-block'
+    },
+    ref: recaptchaRef,
+    sitekey: tokenCaptcha,
+    size: "invisible",
+    onChange: onChangeCaptcha
+  }), _react.default.createElement(_Layout.Box, {
     width: "100%",
     textAlign: "center"
   }, _react.default.createElement(_Typography.Text, {
@@ -169,11 +222,38 @@ var ModalLoginPassCode = function ModalLoginPassCode(_ref) {
     textAlign: "center",
     color: "black60",
     marginY: 2
-  }, labelRetry), _react.default.createElement(_Typography.LinkText, {
+  }, labelRetry), isCountdown ? _react.default.createElement(_Typography.Text, {
+    sizeText: "display13",
+    textAlign: "center",
+    color: "black60",
+    marginY: 2
+  }, labelCountMessage) : _react.default.createElement(_Typography.LinkText, {
     underline: true,
     sizeText: "display13",
     textAlign: "center",
-    onClick: actionRetry,
+    onClick: function () {
+      var _ref2 = (0, _asyncToGenerator2.default)(_regenerator.default.mark(function _callee(e) {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                e.preventDefault();
+                setIsCountdown(true);
+                _context.next = 4;
+                return recaptchaRef.current.executeAsync();
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }(),
     color: "black60"
   }, labelRetryAction)), _react.default.createElement(_Layout.Box, {
     width: "100%",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lideralia/alife-uikit",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Librería y documentación de componentes, basada en el Design System de Alife.",
   "homepage": "https://github.com/lideralia/alife-frontend-components#readme",
   "bugs": {