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

React components that implement Google's Material Design.

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");

const GoogleButton = () => {
  const classes = useStyles();
  const {
    googleCredentials = {},
    validateSocialNetwork,
    setLoadingSignIn,
    loadingSignIn
  } = useAuth();
  const login = useGoogleLogin({
    onError: error => {
      console.log('error', error);
      setLoadingSignIn(false);
    },
    onNonOAuthError: () => {
      setLoadingSignIn(false);
    },
    onSuccess: async response => {
      if (!response.access_token) return;
      validateSocialNetwork('google', {
        method: METHODS_SESSION['google'],
        tokenId: `${response.token_type} ${response.access_token}`
      });
    }
  });
  if (!googleCredentials.clientId) return null;
  return /*#__PURE__*/React.createElement(Button, {
    className: classes.googleButton,
    disabled: loadingSignIn,
    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);
};

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

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

export default React.memo(GoogleButtonWithProvider);