todos-contra-el-fuego-web/imports/ui/components/OAuthLoginButton/OAuthLoginButton.js
vjrj 4ddaa0d8ec cleanup: defaultProps -> JS default params on our function components
React 19 drops defaultProps on function components. Converted the 9 of
ours that used it (App, Navigation, ReSendEmail, Reconnect, OAuthLoginButton,
PageHeader, Page, EditDocument, EditSubscription) to destructured default
params; App defaults userId/emailAddress in its withTracker instead (it
spreads {...props} widely). Class components keep defaultProps (still
supported). The only defaultProps warnings left are from the react-share
npm package (CreatedButton/Icon), not our code. REST smoke byte-identical.
2026-07-21 13:54:02 +02:00

61 lines
1.8 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
import { Bert } from 'meteor/themeteorchef:bert';
import Icon from '../Icon/Icon';
import { withTranslation, Trans } from 'react-i18next';
import { T9n } from 'meteor-accounts-t9n';
import './OAuthLoginButton.scss';
const handleLogin = (service, callback) => {
const options = {
facebook: {
requestPermissions: ['email'],
loginStyle: 'popup',
},
github: {
requestPermissions: ['user:email'],
loginStyle: 'popup',
},
google: {
requestPermissions: ['email', 'profile'],
requestOfflineToken: true,
loginStyle: 'popup',
},
}[service];
return {
facebook: Meteor.loginWithFacebook,
github: Meteor.loginWithGithub,
google: Meteor.loginWithGoogle,
}[service](options, callback);
};
const serviceLabel = {
facebook: <span><Icon icon="facebook-official" /> <Trans parent="span">Log In with Facebook</Trans></span>,
github: <span><Icon icon="github" /> <Trans parent="span">Log In with GitHub</Trans></span>,
google: <span><Icon icon="google" /> <Trans parent="span">Iniciar sesión con Google</Trans></span>,
};
const defaultCallback = (error) => {
if (error) Bert.alert(T9n.get(`error.accounts.${error.message}`), 'danger');
// Bert.alert(error.message, 'danger');
};
const OAuthLoginButton = ({ service, callback = defaultCallback }) => (
<button
className={`btn btn-block btn-raised btn-danger OAuthLoginButton OAuthLoginButton-${service}`}
type="button"
onClick={() => handleLogin(service, callback)}
>
{serviceLabel[service]}
</button>
);
OAuthLoginButton.propTypes = {
service: PropTypes.string.isRequired,
callback: PropTypes.func,
};
export default withTranslation()(OAuthLoginButton);