vjrj
bddfb392c1
Completes the Bootstrap 4->5 migration now that every jQuery/BS4 widget is React
(navbar, carousel, dropdowns) — plus the feedback toggle here (Feedback.js:
global `$('#feedback-form').toggle()` -> React state).
- Load Bootstrap 5 CSS from the `bootstrap` npm package in client/index.js
(imported first so app + component styles and react-bootstrap override it).
- Remove the `alexwine:bootstrap-4` meteor package (BS4 CSS + jQuery + BS4 JS).
jQuery for jquery-validation still comes from the npm `jquery` dep.
- Utility renames to BS5: ml-auto->ms-auto, float-right->float-end,
btn-block->w-100, data-toggle->data-bs-toggle (FromNow tooltip).
- forms.scss `.form-label` is no longer a shim (BS5 ships it); comment updated.
Full-app build boots clean; server suite 36 passing. Needs a visual staging pass
across all pages (BS4->5 shifts grid gutters/typography); forms should improve
since react-bootstrap v2 already emitted BS5 markup.
61 lines
1.8 KiB
JavaScript
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 w-100 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);
|