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

React components that implement Google's Material Design.

import React, { useCallback, useState } from 'react';
import MicrosoftLogin from 'react-microsoft-login';
import { makeStyles, Typography } from '@krowdy/kds-core';
import { IMAGES_SOCIAL, METHODS_SESSION } from './constants';
import { useAuth } from '../utils';
const useStyles = makeStyles(({
  spacing,
  shape,
  palette
}) => ({
  btnSocialMicrosoft: {
    '& img': {
      marginLeft: spacing(.75),
      marginRight: spacing(2)
    },
    '& span': {
      fontSize: 14,
      margin: 'auto'
    },
    '&:hover': {
      background: '#1b1b1b'
    },
    alignItems: 'center',
    background: palette.common.black,
    border: 0,
    borderRadius: shape.borderRadius,
    color: palette.common.white,
    cursor: 'pointer',
    display: 'flex',
    height: 40,
    justifyContent: 'center',
    marginTop: spacing(2),
    position: 'relative',
    width: '100%'
  }
}));

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

const MicrosoftButton = () => {
  const classes = useStyles();
  const {
    microsoftCredentials: {
      clientId,
      redirectUri
    } = {},
    validateSocialNetwork,
    setLoadingSignIn
  } = useAuth();
  const [verifying, setVerifying] = useState(false);
  const handleResponseMicrosoft = useCallback((err, response, msal) => {
    if (err) {
      setVerifying(false);
      setLoadingSignIn(false); // eslint-disable-next-line no-console

      console.log(err);
      return;
    }

    if (response && msal && !verifying) {
      const {
        accessToken
      } = response;
      setVerifying(true);
      validateSocialNetwork('microsoft', {
        method: METHODS_SESSION['microsoft'],
        tokenId: accessToken
      });
    }
  }, [validateSocialNetwork, verifying, setLoadingSignIn]);

  const _handleRequest = useCallback(() => {
    setLoadingSignIn(true); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return clientId ? /*#__PURE__*/React.createElement("div", {
    onClick: _handleRequest
  }, /*#__PURE__*/React.createElement(MicrosoftLogin, {
    authCallback: handleResponseMicrosoft,
    clientId: clientId // forceRedirectStrategy
    ,
    redirectUri: redirectUri
  }, /*#__PURE__*/React.createElement("button", {
    className: classes.btnSocialMicrosoft
  }, /*#__PURE__*/React.createElement("img", {
    alt: "microsoftSocial",
    src: IMAGES_SOCIAL.microsoft
  }), _ref))) : null;
};

export default MicrosoftButton;