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

React components that implement Google's Material Design.

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';

const 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ña para ${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 '';
  }
};

const loginButtonLabels = {
  'only-email': 'Ingresa con otro correo',
  'only-phone': 'Ingresa con celular',
  'phone-and-email': 'Ingresa con otro correo o celular'
};

var _ref = /*#__PURE__*/React.createElement(ArrowBackIosIcon, {
  fontSize: "small"
});

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

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

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

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

const LoginSinglePage = ({
  customMainText,
  emailDefault
}) => {
  const classes = useStyles();
  const {
    template: {
      header: {
        logo
      } = {}
    } = {}
  } = useTheme();
  const [prevViews, setPrevViews] = useState([]);
  const [currentUser, setCurrentUser] = useState('');
  const oneTapRef = useRef();
  const oneTapExecuted = useRef(false);
  const {
    loginWith,
    typeView,
    onChangeView,
    loadingSignIn
  } = useAuth();

  const _handleChangeView = useCallback(view => {
    setPrevViews([...prevViews, typeView]);
    onChangeView(view);
  }, [prevViews, typeView, onChangeView]);

  const _handleCurrentUser = useCallback(text => {
    setCurrentUser(text);
  }, []);

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

  const _handleChangeLogin = useCallback(() => {
    _handleChangeView(ViewType.Login);
  }, [_handleChangeView]);

  useLayoutEffect(() => {
    if (emailDefault) _handleChangeView(ViewType.Login); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  useEffect(() => {
    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: _ref
  }, "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, _ref2, _ref3, _ref4, _ref5, /*#__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
  }));
};

const useStyles = makeStyles(({
  spacing
}) => ({
  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);