@krowdy/kds-auth/es/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 _ref = /*#__PURE__*/React.createElement(Typography, {
  variant: "body2"
}, "Ingresa con LinkedIn");

const Linkedin = () => {
  const classes = useStyles();
  const {
    linkedinCredentials = {},
    validateSocialNetwork
  } = useAuth();

  const _handleSuccess = useCallback(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: () => {},
    onSuccess: _handleSuccess,
    redirectUri: linkedinCredentials.redirectUri,
    scope: linkedinCredentials.scope || 'r_liteprofile r_emailaddress w_member_social',
    state: linkedinCredentials.state || '34232423'
  }, ({
    linkedInLogin
  }) => /*#__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']
  }), _ref));
};

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