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

React components that implement Google's Material Design.

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { Button, CircularProgress, makeStyles, Typography, useTheme } from '@krowdy/kds-core';
import { ArrowBackIos as ArrowBackIosIcon } from '@material-ui/icons';
import GoogleButton from './GoogleButton';
import MicrosoftButton from './MicrosoftButton';
import LinkedInButton from './LinkedinButton';
import KrowdyOneTap from './KrowdyOneTap';
import Footer from './Footer';
import { useAuth } from '../utils';
import FacebookButton from './FacebookButton';
import { ViewType } from '../AuthContext/utils';

var getTitleByView = function getTitleByView(type, text, customMainText) {
  switch (type) {
    case ViewType.Main:
      return customMainText || '¡Te damos la bienvenida!';

    case ViewType.Login:
      return 'Ingresa tu correo electrónico';

    case ViewType.Password:
      return "Ingresa tu contrase\xF1a para ".concat(text);

    case ViewType.Register:
      return 'Registra tus datos';

    case ViewType.Verify:
      return 'Verificación de cuenta';

    case ViewType.Recovery:
      return 'Restablecer contraseña';

    case ViewType.Custom:
      return String(text);

    case 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.createElement(ArrowBackIosIcon, {
  fontSize: "small"
});

var _ref3 = /*#__PURE__*/React.createElement(GoogleButton, null);

var _ref4 = /*#__PURE__*/React.createElement(LinkedInButton, null);

var _ref5 = /*#__PURE__*/React.createElement(MicrosoftButton, null);

var _ref6 = /*#__PURE__*/React.createElement(FacebookButton, null);

var LoginSinglePage = function LoginSinglePage(_ref) {
  var customMainText = _ref.customMainText,
      emailDefault = _ref.emailDefault;
  var classes = useStyles();

  var _useTheme = 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 = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
      prevViews = _useState2[0],
      setPrevViews = _useState2[1];

  var _useState3 = useState(''),
      _useState4 = _slicedToArray(_useState3, 2),
      currentUser = _useState4[0],
      setCurrentUser = _useState4[1];

  var oneTapRef = useRef();
  var oneTapExecuted = useRef(false);

  var _useAuth = useAuth(),
      loginWith = _useAuth.loginWith,
      typeView = _useAuth.typeView,
      onChangeView = _useAuth.onChangeView,
      loadingSignIn = _useAuth.loadingSignIn;

  var _handleChangeView = useCallback(function (view) {
    setPrevViews([].concat(_toConsumableArray(prevViews), [typeView]));
    onChangeView(view);
  }, [prevViews, typeView, onChangeView]);

  var _handleCurrentUser = useCallback(function (text) {
    setCurrentUser(text);
  }, []);

  var _handleChangePrevView = useCallback(function () {
    var lastView = prevViews[prevViews.length - 1];
    setPrevViews(prevViews.slice(0, prevViews.length - 1));
    onChangeView(lastView);
  }, [prevViews, onChangeView]);

  var _handleChangeLogin = useCallback(function () {
    _handleChangeView(ViewType.Login);
  }, [_handleChangeView]);

  useLayoutEffect(function () {
    if (emailDefault) _handleChangeView(ViewType.Login); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useEffect(function () {
    if (emailDefault && oneTapRef.current && typeView === ViewType.Login && !oneTapExecuted.current) {
      oneTapExecuted.current = true; // xq se demora un tiempo en inicializar el authClient

      oneTapRef.current.submitEmail(emailDefault, ViewType.Verify);
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [typeView]);
  return /*#__PURE__*/React.createElement("div", {
    className: classes.mainContainer
  }, typeView !== ViewType.Main && (prevViews === null || prevViews === void 0 ? void 0 : prevViews.length) && !emailDefault && /*#__PURE__*/React.createElement(Button, {
    className: classes.buttonBack,
    onClick: _handleChangePrevView,
    startIcon: _ref2
  }, "Atr\xE1s"), /*#__PURE__*/React.createElement("div", {
    className: classes.imageContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.headerImage
  }, /*#__PURE__*/React.createElement("img", {
    alt: "abeja-img",
    className: classes.logo,
    src: logo ? logo.source : '//cdn.krowdy.com/media/images/KrowdyLogo2.svg'
  })), /*#__PURE__*/React.createElement(Typography, {
    className: classes.titleCenter,
    variant: "h5"
  }, getTitleByView(typeView, currentUser, customMainText))), [ViewType.Recovery, ViewType.Verify].includes(typeView) && (currentUser.indexOf('@') !== -1 ? /*#__PURE__*/React.createElement(Typography, {
    className: classes.titleCenter
  }, "Te enviamos un c\xF3digo a ", /*#__PURE__*/React.createElement("strong", null, currentUser), ". Recuerda revisar tu carpeta Spam o Notificaciones.") : /*#__PURE__*/React.createElement(Typography, {
    className: classes.titleCenter
  }, "Te enviamos un c\xF3digo por SMS a tu celular ", /*#__PURE__*/React.createElement("strong", null, currentUser), ".")), typeView === ViewType.Register && /*#__PURE__*/React.createElement(Typography, {
    className: classes.titleCenter
  }, "Asociaremos este nombre con ", currentUser, "."), /*#__PURE__*/React.createElement("div", {
    className: classes.bodyContainer
  }, typeView === ViewType.Main && loadingSignIn && /*#__PURE__*/React.createElement(CircularProgress, {
    className: classes.loading,
    disableShrink: true,
    size: 24
  }), typeView === ViewType.Main && !loadingSignIn && /*#__PURE__*/React.createElement(React.Fragment, null, _ref3, _ref4, _ref5, _ref6, /*#__PURE__*/React.createElement(Button, {
    className: classes.buttonKrowdy,
    color: "primary",
    fullWidth: true,
    onClick: _handleChangeLogin,
    variant: "outlined"
  }, loginButtonLabels[loginWith])), typeView !== ViewType.Main && /*#__PURE__*/React.createElement(KrowdyOneTap, {
    currentUser: currentUser,
    onChangeUserLogin: _handleCurrentUser,
    ref: oneTapRef,
    typeView: typeView
  })), /*#__PURE__*/React.createElement(Footer, {
    emailDefault: emailDefault,
    typeView: typeView
  }));
};

var useStyles = 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'
});
export default React.memo(LoginSinglePage);