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

React components that implement Google's Material Design.

import React, { useCallback } from 'react';
import { LinkedIn } from 'react-linkedin-login-oauth2';
import { makeStyles, Button, Typography } from '@krowdy/kds-core';
import { IMAGES_SOCIAL, METHODS_SESSION } from './constants';
import { useAuth } from '../utils';

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

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

  var _useAuth = useAuth(),
      _useAuth$linkedinCred = _useAuth.linkedinCredentials,
      linkedinCredentials = _useAuth$linkedinCred === void 0 ? {} : _useAuth$linkedinCred,
      validateSocialNetwork = _useAuth.validateSocialNetwork;

  var _handleSuccess = useCallback(function (code) {
    validateSocialNetwork('linkedin', {
      method: METHODS_SESSION['linkedin'],
      tokenId: code
    }); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [validateSocialNetwork, linkedinCredentials]);

  if (!linkedinCredentials || !linkedinCredentials.clientId) return null;
  return /*#__PURE__*/React.createElement(LinkedIn, {
    clientId: linkedinCredentials.clientId,
    onFailure: function onFailure() {},
    onSuccess: _handleSuccess,
    redirectUri: linkedinCredentials.redirectUri,
    scope: linkedinCredentials.scope || 'r_liteprofile r_emailaddress w_member_social',
    state: linkedinCredentials.state || '34232423'
  }, function (_ref) {
    var linkedInLogin = _ref.linkedInLogin;
    return /*#__PURE__*/React.createElement(Button, {
      className: classes.linkedinButton,
      onClick: linkedInLogin,
      variant: "contained"
    }, /*#__PURE__*/React.createElement("img", {
      alt: "Log in with Linked In",
      className: classes.iconLinkedin,
      src: IMAGES_SOCIAL['linkedin']
    }), _ref2);
  });
};

var useStyles = makeStyles(function (_ref3) {
  var spacing = _ref3.spacing,
      palette = _ref3.palette;
  return {
    iconLinkedin: {
      marginRight: spacing(1.5),
      marginTop: spacing(-.75)
    },
    linkedinButton: {
      // color de boton de linkedin
      '&:hover': {
        background: '#007AB9'
      },
      alignItems: 'center',
      background: '#007AB9',
      borderRadius: spacing(.5),
      color: palette.common.white,
      display: 'flex',
      flex: 1,
      height: 40,
      justifyContent: 'center',
      marginTop: spacing(2),
      width: '100%'
    }
  };
}, {
  name: 'Linkedin'
});
export default React.memo(Linkedin);