59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Meteor } from 'meteor/meteor';
|
|
import { Bert } from 'meteor/themeteorchef:bert';
|
|
|
|
import './OAuthLoginButton.scss';
|
|
|
|
const handleLogin = (service, callback) => {
|
|
const options = {
|
|
facebook: {
|
|
requestPermissions: ['email'],
|
|
loginStyle: 'popup',
|
|
},
|
|
github: {
|
|
requestPermissions: ['user:email'],
|
|
loginStyle: 'popup',
|
|
},
|
|
google: {
|
|
requestPermissions: ['email'],
|
|
requestOfflineToken: true,
|
|
loginStyle: 'popup',
|
|
},
|
|
}[service];
|
|
|
|
return {
|
|
facebook: Meteor.loginWithFacebook,
|
|
github: Meteor.loginWithGithub,
|
|
google: Meteor.loginWithGoogle,
|
|
}[service](options, callback);
|
|
};
|
|
|
|
const serviceLabel = {
|
|
facebook: <span><i className="fa fa-facebook" /> Log In with Facebook</span>,
|
|
github: <span><i className="fa fa-github" /> Log In with GitHub</span>,
|
|
google: <span><i className="fa fa-google" /> Log In with Google</span>,
|
|
};
|
|
|
|
const OAuthLoginButton = ({ service, callback }) => (
|
|
<button
|
|
className={`OAuthLoginButton OAuthLoginButton-${service}`}
|
|
type="button"
|
|
onClick={() => handleLogin(service, callback)}
|
|
>
|
|
{serviceLabel[service]}
|
|
</button>
|
|
);
|
|
|
|
OAuthLoginButton.defaultProps = {
|
|
callback: (error) => {
|
|
if (error) Bert.alert(error.message, 'danger');
|
|
},
|
|
};
|
|
|
|
OAuthLoginButton.propTypes = {
|
|
service: PropTypes.string.isRequired,
|
|
callback: PropTypes.func,
|
|
};
|
|
|
|
export default OAuthLoginButton;
|