@krowdy/kds-auth/LoginSinglePage/KrowdyOneTap.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _clsx = _interopRequireDefault(require("clsx"));

var _kdsCore = require("@krowdy/kds-core");

var _icons = require("@material-ui/icons");

var _GoogleButton = _interopRequireDefault(require("./GoogleButton"));

var _MicrosoftButton = _interopRequireDefault(require("./MicrosoftButton"));

var _utils = require("../utils");

var _utils2 = require("../AuthContext/utils");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var inputLabels = {
  login: 'Correo o celular',
  newPassword: 'Nueva contraseña',
  'only-email': 'Correo electrónico',
  'only-phone': 'Número de celular',
  password: 'Contraseña',
  'phone-and-email': 'Correo o celular',
  verify: 'Código de verificación'
};
var errorMessages = {
  login: 'Error al verificar cuenta, comunícate con soporte.',
  newCode: 'Código caducado. Enviamos un nuevo código a tu correo.',
  newPassword: 'Debe tener mínimo 8 caracteres.',
  password: 'Contraseña incorrecta. Vuelve a intentarlo o haz click en “¿Olvidaste tu contraseña?”',
  verify: 'Código de verificación erróneo.'
};

var _ref6 = /*#__PURE__*/_react["default"].createElement(_icons.Visibility, {
  color: "inherit",
  fontSize: "inherit"
});

var _ref7 = /*#__PURE__*/_react["default"].createElement(_icons.VisibilityOff, {
  color: "inherit",
  fontSize: "inherit"
});

var _ref8 = /*#__PURE__*/_react["default"].createElement(_GoogleButton["default"], null);

var _ref9 = /*#__PURE__*/_react["default"].createElement(_MicrosoftButton["default"], null);

var _ref10 = /*#__PURE__*/_react["default"].createElement(_kdsCore.CircularProgress, {
  disableShrink: true,
  size: 18
});

var KrowdyOneTap = (0, _react.forwardRef)(function (_ref, ref) {
  var _ref$onChangeUserLogi = _ref.onChangeUserLogin,
      onChangeUserLogin = _ref$onChangeUserLogi === void 0 ? function () {} : _ref$onChangeUserLogi,
      typeView = _ref.typeView,
      currentUser = _ref.currentUser;

  var _useAuth = (0, _utils.useAuth)(),
      verifyAccount = _useAuth.verifyAccount,
      loginByPassword = _useAuth.loginByPassword,
      loginByCode = _useAuth.loginByCode,
      typeCode = _useAuth.typeCode,
      onSuccessLogin = _useAuth.onSuccessLogin,
      updateAccount = _useAuth.updateAccount,
      loading = _useAuth.loading,
      loginWith = _useAuth.loginWith,
      onUpdatePassword = _useAuth.onUpdatePassword,
      onUpdateState = _useAuth.onUpdateState,
      onChangeView = _useAuth.onChangeView,
      onError = _useAuth.onError,
      logout = _useAuth.logout;

  var classes = useStyles();

  var _useState = (0, _react.useState)(null),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      loginkey = _useState2[0],
      setLoginKey = _useState2[1];

  var _useState3 = (0, _react.useState)(typeView === _utils2.ViewType.Login ? currentUser : ''),
      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
      valueInput = _useState4[0],
      setValueInput = _useState4[1];

  var _useState5 = (0, _react.useState)(''),
      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
      passwordValue = _useState6[0],
      setPasswordValue = _useState6[1];

  var _useState7 = (0, _react.useState)(false),
      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
      isErrorLogin = _useState8[0],
      setErrorLogin = _useState8[1];

  var _useState9 = (0, _react.useState)(false),
      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
      isCodeValidationExpired = _useState10[0],
      setIsCodeValidationExpired = _useState10[1];

  var _useState11 = (0, _react.useState)(false),
      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
      showPassword = _useState12[0],
      setShowPassword = _useState12[1];

  var _useState13 = (0, _react.useState)(true),
      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
      keepSession = _useState14[0],
      setKeepSession = _useState14[1];

  var _useState15 = (0, _react.useState)({}),
      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
      register = _useState16[0],
      setRegister = _useState16[1];

  var isNextDisabled = (0, _react.useMemo)(function () {
    switch (typeView) {
      case _utils2.ViewType.NewPassword:
        return passwordValue.length < 8;

      case _utils2.ViewType.Register:
        {
          var firstName = register.firstName,
              lastName = register.lastName;
          return !(firstName && lastName);
        }

      case _utils2.ViewType.Login:
        if (loginWith === 'only-email') {
          var emailRegex = /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;
          return !valueInput || !emailRegex.test(valueInput);
        } else {
          return !valueInput;
        }

      case _utils2.ViewType.Password:
      case _utils2.ViewType.Recovery:
        return !passwordValue;

      default:
        return false;
    }
  }, [typeView, valueInput, register, loginWith, passwordValue]);

  var _handleChangeInput = (0, _react.useCallback)(function (_ref2) {
    var _ref2$target = _ref2.target,
        value = _ref2$target.value,
        name = _ref2$target.name;
    setValueInput(value);

    if (name === 'login' && value) {
      var res = value.split(new RegExp('[ @ | . ]'));
      var domain = res ? res[res.length - 2] : null;
      if (domain && 'gmail'.indexOf(domain) !== -1) setLoginKey('google');else if (domain && ('outlook'.indexOf(domain) !== -1 || 'hotmail'.indexOf(domain) !== -1)) setLoginKey('microsoft');else setLoginKey(null);
    }
  }, []);

  var _handleChangePassword = (0, _react.useCallback)(function (_ref3) {
    var value = _ref3.target.value;
    setPasswordValue(value);
  }, []);

  var _handleChangeRegister = (0, _react.useCallback)(function (_ref4) {
    var _ref4$target = _ref4.target,
        value = _ref4$target.value,
        name = _ref4$target.name;
    setRegister(function (prev) {
      return (0, _extends3["default"])({}, prev, (0, _defineProperty2["default"])({}, name, value));
    });
  }, []);

  var _handleSubmitSetEmail = (0, _react.useCallback)(function _callee(valueInput, nextView) {
    var _await$verifyAccount, hasPassword, success, value, type;

    return _regenerator["default"].async(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            if (!(nextView && ![_utils2.ViewType.Password, _utils2.ViewType.Verify].includes(nextView))) {
              _context.next = 2;
              break;
            }

            throw new Error('nextView is no valid');

          case 2:
            _context.next = 4;
            return _regenerator["default"].awrap(verifyAccount(valueInput, Boolean(nextView)));

          case 4:
            _await$verifyAccount = _context.sent;
            hasPassword = _await$verifyAccount.hasPassword;
            success = _await$verifyAccount.success;
            value = _await$verifyAccount.value;
            type = _await$verifyAccount.type;
            setErrorLogin(!success);

            if (success) {
              onChangeUserLogin(type === 'phone' ? value : valueInput);
              onChangeView(nextView !== null && nextView !== void 0 ? nextView : hasPassword ? _utils2.ViewType.Password : _utils2.ViewType.Verify);
              setLoginKey(null);
            }

          case 11:
          case "end":
            return _context.stop();
        }
      }
    }, null, null, null, Promise);
  }, [onChangeUserLogin, onChangeView, verifyAccount]);

  var _handleNext = (0, _react.useCallback)(function _callee2(e) {
    var _await$loginByPasswor, isPasswordValid, _await$loginByCode, isCodeValid, isFirstTime, error, _ref5, successRegister, _await$onUpdatePasswo, successPasswword, _await$loginByCode2, isRecoveryValid;

    return _regenerator["default"].async(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            if (!(e.charCode && e.charCode !== 13 || isNextDisabled || loading)) {
              _context2.next = 2;
              break;
            }

            return _context2.abrupt("return");

          case 2:
            setIsCodeValidationExpired(false);
            _context2.prev = 3;
            _context2.t0 = typeView;
            _context2.next = _context2.t0 === _utils2.ViewType.Login ? 7 : _context2.t0 === _utils2.ViewType.Password ? 9 : _context2.t0 === _utils2.ViewType.Verify ? 15 : _context2.t0 === _utils2.ViewType.Register ? 25 : _context2.t0 === _utils2.ViewType.NewPassword ? 34 : _context2.t0 === _utils2.ViewType.Recovery ? 40 : 47;
            break;

          case 7:
            _handleSubmitSetEmail(valueInput);

            return _context2.abrupt("break", 48);

          case 9:
            _context2.next = 11;
            return _regenerator["default"].awrap(loginByPassword({
              email: currentUser,
              keepSession: keepSession,
              password: passwordValue
            }));

          case 11:
            _await$loginByPasswor = _context2.sent;
            isPasswordValid = _await$loginByPasswor.success;
            setErrorLogin(!isPasswordValid);
            return _context2.abrupt("break", 48);

          case 15:
            _context2.next = 17;
            return _regenerator["default"].awrap(loginByCode({
              code: passwordValue,
              keepSession: keepSession,
              type: typeCode,
              value: currentUser
            }));

          case 17:
            _await$loginByCode = _context2.sent;
            isCodeValid = _await$loginByCode.success;
            isFirstTime = _await$loginByCode.isNew;
            error = _await$loginByCode.error;
            setErrorLogin(!isCodeValid);
            if (error === 'Validation code expired') setIsCodeValidationExpired(!isCodeValid);
            if (isCodeValid) if (isFirstTime) onChangeView(_utils2.ViewType.Register);else onSuccessLogin(true);
            return _context2.abrupt("break", 48);

          case 25:
            _context2.next = 27;
            return _regenerator["default"].awrap(updateAccount(register));

          case 27:
            _context2.t1 = _context2.sent;

            if (_context2.t1) {
              _context2.next = 30;
              break;
            }

            _context2.t1 = {};

          case 30:
            _ref5 = _context2.t1;
            successRegister = _ref5.success;

            if (successRegister) {
              setValueInput('');
              setPasswordValue('');
            }

            return _context2.abrupt("break", 48);

          case 34:
            _context2.next = 36;
            return _regenerator["default"].awrap(onUpdatePassword(passwordValue));

          case 36:
            _await$onUpdatePasswo = _context2.sent;
            successPasswword = _await$onUpdatePasswo.success;
            if (!successPasswword) setErrorLogin(true);
            return _context2.abrupt("break", 48);

          case 40:
            _context2.next = 42;
            return _regenerator["default"].awrap(loginByCode({
              code: passwordValue,
              keepSession: keepSession,
              type: typeCode,
              value: currentUser
            }));

          case 42:
            _await$loginByCode2 = _context2.sent;
            isRecoveryValid = _await$loginByCode2.success;
            setErrorLogin(!isRecoveryValid);

            if (isRecoveryValid) {
              setPasswordValue('');
              onChangeView(_utils2.ViewType.NewPassword);
            }

            return _context2.abrupt("break", 48);

          case 47:
            return _context2.abrupt("break", 48);

          case 48:
            _context2.next = 53;
            break;

          case 50:
            _context2.prev = 50;
            _context2.t2 = _context2["catch"](3);
            onError(_context2.t2, typeView);

          case 53:
          case "end":
            return _context2.stop();
        }
      }
    }, null, null, [[3, 50]], Promise);
  }, [isNextDisabled, loading, typeView, _handleSubmitSetEmail, valueInput, loginByPassword, currentUser, keepSession, passwordValue, loginByCode, typeCode, onChangeView, onSuccessLogin, updateAccount, register, onUpdatePassword, onError]);

  var _handleClickShowPassword = (0, _react.useCallback)(function () {
    setShowPassword(function (prev) {
      return !prev;
    });
  }, []);

  var _handleKeepSession = (0, _react.useCallback)(function () {
    setKeepSession(function (prev) {
      onUpdateState({
        keepSession: !prev
      });
      return !prev;
    });
  }, [onUpdateState]);

  var _handleResendPassword = (0, _react.useCallback)(function _callee3() {
    var _await$verifyAccount2, success;

    return _regenerator["default"].async(function _callee3$(_context3) {
      while (1) {
        switch (_context3.prev = _context3.next) {
          case 0:
            _context3.next = 2;
            return _regenerator["default"].awrap(verifyAccount(currentUser, true));

          case 2:
            _await$verifyAccount2 = _context3.sent;
            success = _await$verifyAccount2.success;
            if (success) setErrorLogin(false);

          case 5:
          case "end":
            return _context3.stop();
        }
      }
    }, null, null, null, Promise);
  }, [currentUser, verifyAccount]);

  var _handleForgotPassword = (0, _react.useCallback)(function () {
    setPasswordValue('');
    onChangeView(_utils2.ViewType.Recovery);
    verifyAccount(valueInput, true); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [verifyAccount, valueInput]);

  (0, _react.useImperativeHandle)(ref, function () {
    return {
      submitEmail: function submitEmail(email, nextView) {
        logout();

        _handleChangeInput({
          target: {
            name: 'email',
            value: email
          }
        });

        _handleSubmitSetEmail(email, nextView);
      }
    };
  });
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, [_utils2.ViewType.Password, _utils2.ViewType.Verify, _utils2.ViewType.Recovery, _utils2.ViewType.NewPassword].includes(typeView) && /*#__PURE__*/_react["default"].createElement(_kdsCore.TextField, {
    autoFocus: true,
    className: (0, _clsx["default"])(classes.labelOutlined),
    error: isErrorLogin || isCodeValidationExpired,
    FormHelperTextProps: {
      classes: {
        contained: classes.helperText
      }
    },
    fullWidth: true,
    helperText: isCodeValidationExpired ? errorMessages.newCode : (isErrorLogin || [_utils2.ViewType.Recovery, _utils2.ViewType.NewPassword].includes(typeView)) && errorMessages[typeView],
    InputProps: {
      className: classes.inputStyle,
      classes: {
        input: classes.emailInput,
        root: (0, _clsx["default"])(isErrorLogin && classes.colorError)
      },
      endAdornment: [_utils2.ViewType.Password, _utils2.ViewType.NewPassword].includes(typeView) && /*#__PURE__*/_react["default"].createElement(_kdsCore.IconButton, {
        className: classes.iconShowPassword,
        onClick: _handleClickShowPassword,
        size: "small"
      }, showPassword ? _ref6 : _ref7)
    },
    label: [_utils2.ViewType.Verify, _utils2.ViewType.Recovery].includes(typeView) ? 'Código de verificación' : inputLabels[typeView],
    onChange: _handleChangePassword,
    onKeyPress: _handleNext,
    required: true,
    type: showPassword || [_utils2.ViewType.Verify, _utils2.ViewType.Recovery].includes(typeView) ? 'text' : 'password',
    value: passwordValue,
    variant: "outlined"
  }), typeView === _utils2.ViewType.Login && /*#__PURE__*/_react["default"].createElement(_kdsCore.TextField, {
    autoFocus: true,
    className: (0, _clsx["default"])(classes.fieldEmail, classes.labelOutlined),
    error: isErrorLogin,
    fullWidth: true,
    helperText: isErrorLogin && errorMessages[typeView],
    InputProps: {
      classes: {
        input: classes.emailInput,
        root: classes.textfield
      }
    },
    label: inputLabels[loginWith],
    name: "login",
    onChange: _handleChangeInput,
    onKeyPress: _handleNext,
    type: "email",
    value: valueInput,
    variant: "outlined"
  }), typeView === _utils2.ViewType.Register && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_kdsCore.TextField, {
    autoFocus: true,
    className: (0, _clsx["default"])(classes.labelOutlined),
    fullWidth: true // InputLabelProps={{
    //   classes: {
    //     root: classes.labelOutlined
    //   }
    // }}
    ,
    InputProps: {
      classes: {
        input: classes.emailInput,
        root: classes.textfield
      }
    },
    label: "Nombres",
    name: "firstName",
    onChange: _handleChangeRegister,
    required: true,
    value: register.firstName || '',
    variant: "outlined"
  }), /*#__PURE__*/_react["default"].createElement(_kdsCore.TextField, {
    className: (0, _clsx["default"])(classes.fieldEmail, classes.labelOutlined),
    fullWidth: true // InputLabelProps={{
    //   classes: {
    //     root: classes.labelOutlined
    //   }
    // }}
    ,
    InputProps: {
      classes: {
        input: classes.emailInput,
        root: classes.textfield
      }
    },
    label: "Apellidos",
    name: "lastName",
    onChange: _handleChangeRegister,
    required: true,
    value: register.lastName || '',
    variant: "outlined"
  }), /*#__PURE__*/_react["default"].createElement(_kdsCore.TextField, {
    className: (0, _clsx["default"])(classes.fieldEmail, classes.labelOutlined),
    fullWidth: true // InputLabelProps={{
    //   classes: {
    //     root: classes.labelOutlined
    //   }
    // }}
    ,
    InputProps: {
      classes: {
        input: classes.emailInput,
        root: classes.textfield
      }
    },
    label: currentUser.indexOf('@') !== -1 ? 'Celular (opcional)' : 'Correo electrónico (opcional)',
    name: currentUser.indexOf('@') !== -1 ? 'phone' : 'email',
    onChange: _handleChangeRegister,
    value: register[currentUser.indexOf('@') !== -1 ? 'phone' : 'email'] || '',
    variant: "outlined"
  })), loginkey && /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.margintop
  }, loginkey === 'google' && _ref8, loginkey === 'microsoft' && _ref9), [_utils2.ViewType.Password, _utils2.ViewType.Verify, _utils2.ViewType.NewPassword].includes(typeView) && /*#__PURE__*/_react["default"].createElement(_kdsCore.FormControlLabel, {
    className: classes.labelCheckbox,
    control: /*#__PURE__*/_react["default"].createElement(_kdsCore.Checkbox, {
      checked: keepSession,
      color: "primary",
      onChange: _handleKeepSession
    }),
    label: "Mantener mi sesi\xF3n abierta"
  }), typeView === _utils2.ViewType.NewPassword && /*#__PURE__*/_react["default"].createElement(_kdsCore.Typography, {
    align: "center",
    className: (0, _clsx["default"])(classes.textfield, classes.textEnd, classes.nextButton2),
    color: "disabled"
  }, "No olvides revisar tu contrase\xF1a antes de establecerla para evitar cualquier inconveniente m\xE1s adelante."), /*#__PURE__*/_react["default"].createElement(_kdsCore.Button, {
    className: (0, _clsx["default"])(classes.nextButton, loginkey && classes.nextButton2),
    color: "primary",
    disabled: isNextDisabled || loading,
    fullWidth: true,
    onClick: _handleNext,
    startIcon: loading && _ref10,
    variant: "contained"
  }, "Continuar"), [_utils2.ViewType.Password, _utils2.ViewType.Verify, _utils2.ViewType.Recovery].includes(typeView) && /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.endContent
  }, typeView === _utils2.ViewType.Password ? /*#__PURE__*/_react["default"].createElement(_kdsCore.Button, {
    color: "primary",
    onClick: _handleForgotPassword,
    size: "small"
  }, "\xBFOlvidaste tu contrase\xF1a?") : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_kdsCore.Typography, {
    className: (0, _clsx["default"])(classes.textfield, classes.textEnd),
    color: "disabled"
  }, "\xBFNo lo encuentras?"), /*#__PURE__*/_react["default"].createElement(_kdsCore.Button, {
    className: classes.capitalizeText,
    color: "primary",
    onClick: _handleResendPassword,
    size: "small"
  }, "Reenviar"))));
});
var useStyles = (0, _kdsCore.makeStyles)(function (_ref11) {
  var spacing = _ref11.spacing,
      palette = _ref11.palette;
  return {
    capitalizeText: {
      textTransform: 'capitalize'
    },
    colorError: {
      color: palette.error.main
    },
    emailInput: {
      color: palette.common.black,
      // fontSize: 14,
      padding: spacing(1.5)
    },
    endContent: {
      alignItems: 'center',
      display: 'flex',
      justifyContent: 'center',
      marginTop: spacing(3)
    },
    fieldEmail: {
      marginTop: spacing(1.5)
    },
    helperText: {
      marginLeft: 0
    },
    inputStyle: {
      fontSize: 14
    },
    labelCheckbox: {
      '& > span': {
        fontSize: 14,
        padding: spacing(1, 1, 1, 0)
      },
      margin: spacing(2, 0, 0, 0)
    },
    labelOutlined: {
      '& .MuiInputLabel-outlined': {
        transform: 'translate(8px, 13px) scale(1)'
      },
      '& .MuiInputLabel-outlined.MuiInputLabel-shrink': {
        transform: 'translate(8px, -5px) scale(0.9)'
      }
    },
    margintop: {
      marginTop: spacing(4)
    },
    nextButton: {
      marginTop: spacing(4)
    },
    nextButton2: {
      marginTop: spacing(2)
    },
    outlinedLabel: {
      top: -8
    },
    textEnd: {
      color: palette.grey[600]
    },
    textfield: {
      fontSize: 14
    }
  };
}, {
  name: 'KrowdyOneTap'
});

var _default = _react["default"].memo(KrowdyOneTap);

exports["default"] = _default;