@krowdy/kds-auth
Version:
React components that implement Google's Material Design.
247 lines (197 loc) • 10 kB
JavaScript
"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _kdsCore = require("@krowdy/kds-core");
var _icons = require("@material-ui/icons");
var _GoogleButton = _interopRequireDefault(require("./GoogleButton"));
var _MicrosoftButton = _interopRequireDefault(require("./MicrosoftButton"));
var _LinkedinButton = _interopRequireDefault(require("./LinkedinButton"));
var _KrowdyOneTap = _interopRequireDefault(require("./KrowdyOneTap"));
var _Footer = _interopRequireDefault(require("./Footer"));
var _utils = require("../utils");
var _FacebookButton = _interopRequireDefault(require("./FacebookButton"));
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 getTitleByView = function getTitleByView(type, text, customMainText) {
switch (type) {
case _utils2.ViewType.Main:
return customMainText || '¡Te damos la bienvenida!';
case _utils2.ViewType.Login:
return 'Ingresa tu correo electrónico';
case _utils2.ViewType.Password:
return "Ingresa tu contrase\xF1a para ".concat(text);
case _utils2.ViewType.Register:
return 'Registra tus datos';
case _utils2.ViewType.Verify:
return 'Verificación de cuenta';
case _utils2.ViewType.Recovery:
return 'Restablecer contraseña';
case _utils2.ViewType.Custom:
return String(text);
case _utils2.ViewType.NewPassword:
return 'Elige una nueva contraseña';
default:
return '';
}
};
var loginButtonLabels = {
'only-email': 'Ingresa con otro correo',
'only-phone': 'Ingresa con celular',
'phone-and-email': 'Ingresa con otro correo o celular'
};
var _ref2 = /*#__PURE__*/_react["default"].createElement(_icons.ArrowBackIos, {
fontSize: "small"
});
var _ref3 = /*#__PURE__*/_react["default"].createElement(_GoogleButton["default"], null);
var _ref4 = /*#__PURE__*/_react["default"].createElement(_LinkedinButton["default"], null);
var _ref5 = /*#__PURE__*/_react["default"].createElement(_MicrosoftButton["default"], null);
var _ref6 = /*#__PURE__*/_react["default"].createElement(_FacebookButton["default"], null);
var LoginSinglePage = function LoginSinglePage(_ref) {
var customMainText = _ref.customMainText,
emailDefault = _ref.emailDefault;
var classes = useStyles();
var _useTheme = (0, _kdsCore.useTheme)(),
_useTheme$template = _useTheme.template;
_useTheme$template = _useTheme$template === void 0 ? {} : _useTheme$template;
var _useTheme$template$he = _useTheme$template.header;
_useTheme$template$he = _useTheme$template$he === void 0 ? {} : _useTheme$template$he;
var logo = _useTheme$template$he.logo;
var _useState = (0, _react.useState)([]),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
prevViews = _useState2[0],
setPrevViews = _useState2[1];
var _useState3 = (0, _react.useState)(''),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
currentUser = _useState4[0],
setCurrentUser = _useState4[1];
var oneTapRef = (0, _react.useRef)();
var oneTapExecuted = (0, _react.useRef)(false);
var _useAuth = (0, _utils.useAuth)(),
loginWith = _useAuth.loginWith,
typeView = _useAuth.typeView,
onChangeView = _useAuth.onChangeView,
loadingSignIn = _useAuth.loadingSignIn;
var _handleChangeView = (0, _react.useCallback)(function (view) {
setPrevViews([].concat((0, _toConsumableArray2["default"])(prevViews), [typeView]));
onChangeView(view);
}, [prevViews, typeView, onChangeView]);
var _handleCurrentUser = (0, _react.useCallback)(function (text) {
setCurrentUser(text);
}, []);
var _handleChangePrevView = (0, _react.useCallback)(function () {
var lastView = prevViews[prevViews.length - 1];
setPrevViews(prevViews.slice(0, prevViews.length - 1));
onChangeView(lastView);
}, [prevViews, onChangeView]);
var _handleChangeLogin = (0, _react.useCallback)(function () {
_handleChangeView(_utils2.ViewType.Login);
}, [_handleChangeView]);
(0, _react.useLayoutEffect)(function () {
if (emailDefault) _handleChangeView(_utils2.ViewType.Login); // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
(0, _react.useEffect)(function () {
if (emailDefault && oneTapRef.current && typeView === _utils2.ViewType.Login && !oneTapExecuted.current) {
oneTapExecuted.current = true; // xq se demora un tiempo en inicializar el authClient
oneTapRef.current.submitEmail(emailDefault, _utils2.ViewType.Verify);
} // eslint-disable-next-line react-hooks/exhaustive-deps
}, [typeView]);
return /*#__PURE__*/_react["default"].createElement("div", {
className: classes.mainContainer
}, typeView !== _utils2.ViewType.Main && (prevViews === null || prevViews === void 0 ? void 0 : prevViews.length) && !emailDefault && /*#__PURE__*/_react["default"].createElement(_kdsCore.Button, {
className: classes.buttonBack,
onClick: _handleChangePrevView,
startIcon: _ref2
}, "Atr\xE1s"), /*#__PURE__*/_react["default"].createElement("div", {
className: classes.imageContainer
}, /*#__PURE__*/_react["default"].createElement("div", {
className: classes.headerImage
}, /*#__PURE__*/_react["default"].createElement("img", {
alt: "abeja-img",
className: classes.logo,
src: logo ? logo.source : '//cdn.krowdy.com/media/images/KrowdyLogo2.svg'
})), /*#__PURE__*/_react["default"].createElement(_kdsCore.Typography, {
className: classes.titleCenter,
variant: "h5"
}, getTitleByView(typeView, currentUser, customMainText))), [_utils2.ViewType.Recovery, _utils2.ViewType.Verify].includes(typeView) && (currentUser.indexOf('@') !== -1 ? /*#__PURE__*/_react["default"].createElement(_kdsCore.Typography, {
className: classes.titleCenter
}, "Te enviamos un c\xF3digo a ", /*#__PURE__*/_react["default"].createElement("strong", null, currentUser), ". Recuerda revisar tu carpeta Spam o Notificaciones.") : /*#__PURE__*/_react["default"].createElement(_kdsCore.Typography, {
className: classes.titleCenter
}, "Te enviamos un c\xF3digo por SMS a tu celular ", /*#__PURE__*/_react["default"].createElement("strong", null, currentUser), ".")), typeView === _utils2.ViewType.Register && /*#__PURE__*/_react["default"].createElement(_kdsCore.Typography, {
className: classes.titleCenter
}, "Asociaremos este nombre con ", currentUser, "."), /*#__PURE__*/_react["default"].createElement("div", {
className: classes.bodyContainer
}, typeView === _utils2.ViewType.Main && loadingSignIn && /*#__PURE__*/_react["default"].createElement(_kdsCore.CircularProgress, {
className: classes.loading,
disableShrink: true,
size: 24
}), typeView === _utils2.ViewType.Main && !loadingSignIn && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _ref3, _ref4, _ref5, _ref6, /*#__PURE__*/_react["default"].createElement(_kdsCore.Button, {
className: classes.buttonKrowdy,
color: "primary",
fullWidth: true,
onClick: _handleChangeLogin,
variant: "outlined"
}, loginButtonLabels[loginWith])), typeView !== _utils2.ViewType.Main && /*#__PURE__*/_react["default"].createElement(_KrowdyOneTap["default"], {
currentUser: currentUser,
onChangeUserLogin: _handleCurrentUser,
ref: oneTapRef,
typeView: typeView
})), /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
emailDefault: emailDefault,
typeView: typeView
}));
};
var useStyles = (0, _kdsCore.makeStyles)(function (_ref7) {
var spacing = _ref7.spacing;
return {
bodyContainer: {
padding: spacing(3, 0)
},
buttonBack: {
fontWeight: 700,
left: 12,
position: 'absolute',
top: 12
},
buttonKrowdy: {
marginTop: spacing(3)
},
headerImage: {
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
margin: spacing(2.5, 0)
},
imageContainer: {
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center'
},
loading: {
display: 'block',
margin: '40px auto'
},
logo: {
maxHeight: 64
},
mainContainer: {
width: '100%'
},
titleCenter: {
marginTop: spacing(1.5),
textAlign: 'center'
}
};
}, {
name: 'LoginSinglePage'
});
var _default = _react["default"].memo(LoginSinglePage);
exports["default"] = _default;