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

React components that implement Google's Material Design.

import _regeneratorRuntime from "@babel/runtime/regenerator";
import React from 'react';
import { GoogleOAuthProvider, useGoogleLogin } from '@react-oauth/google';
import { makeStyles, Button, Typography, CircularProgress } from '@krowdy/kds-core';
import { IMAGES_SOCIAL, METHODS_SESSION } from './constants';
import { useAuth } from '../utils';

var _ref = /*#__PURE__*/React.createElement(Typography, {
  variant: "body2"
}, "Ingresa con Google");

var GoogleButton = function GoogleButton() {
  var classes = useStyles();

  var _useAuth = useAuth(),
      _useAuth$googleCreden = _useAuth.googleCredentials,
      googleCredentials = _useAuth$googleCreden === void 0 ? {} : _useAuth$googleCreden,
      validateSocialNetwork = _useAuth.validateSocialNetwork,
      setLoadingSignIn = _useAuth.setLoadingSignIn,
      loadingSignIn = _useAuth.loadingSignIn;

  var login = useGoogleLogin({
    onError: function onError(error) {
      console.log('error', error);
      setLoadingSignIn(false);
    },
    onNonOAuthError: function onNonOAuthError() {
      setLoadingSignIn(false);
    },
    onSuccess: function onSuccess(response) {
      return _regeneratorRuntime.async(function onSuccess$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (response.access_token) {
                _context.next = 2;
                break;
              }

              return _context.abrupt("return");

            case 2:
              validateSocialNetwork('google', {
                method: METHODS_SESSION['google'],
                tokenId: "".concat(response.token_type, " ").concat(response.access_token)
              });

            case 3:
            case "end":
              return _context.stop();
          }
        }
      }, null, null, null, Promise);
    }
  });
  if (!googleCredentials.clientId) return null;
  return /*#__PURE__*/React.createElement(Button, {
    className: classes.googleButton,
    disabled: loadingSignIn,
    onClick: function onClick() {
      setLoadingSignIn(true);
      login();
    }
  }, loadingSignIn ? /*#__PURE__*/React.createElement(CircularProgress, {
    className: classes.whiteColor,
    size: 20
  }) : /*#__PURE__*/React.createElement("img", {
    alt: "googleSocial",
    className: classes.iconGoogle,
    src: IMAGES_SOCIAL['google']
  }), _ref);
};

var useStyles = makeStyles(function (_ref2) {
  var spacing = _ref2.spacing,
      palette = _ref2.palette;
  return {
    googleButton: {
      '&:hover': {
        background: '#4285F4'
      },
      alignItems: 'center',
      background: '#4285F4',
      borderRadius: spacing(.5),
      // color de boton de google
      color: palette.common.white,
      display: 'flex',
      flex: 1,
      height: 40,
      justifyContent: 'center',
      width: '100%'
    },
    iconGoogle: {
      marginRight: spacing(2),
      marginTop: spacing(-.5)
    },
    whiteColor: {
      color: palette.common.white,
      marginRight: spacing(2)
    }
  };
}, {
  name: 'GoogleButton'
});

var GoogleButtonWithProvider = function GoogleButtonWithProvider(props) {
  var _useAuth2 = useAuth(),
      _useAuth2$googleCrede = _useAuth2.googleCredentials,
      googleCredentials = _useAuth2$googleCrede === void 0 ? {} : _useAuth2$googleCrede;

  if (!googleCredentials.clientId) return null;
  return /*#__PURE__*/React.createElement(GoogleOAuthProvider, {
    clientId: googleCredentials.clientId
  }, /*#__PURE__*/React.createElement(GoogleButton, props));
};

export default React.memo(GoogleButtonWithProvider);