p5.js-web-editor/client/modules/User/components/SocialAuthButton.jsx
ov 9694719e02
Login form spanish translation (#1535)
* NewFolderModal spanish translation
 translations.json (both languages EN - ES)
 changes in NewFileForm.jsx and NewFileModal.jsx to link the new keys.
* Login Form translation
* SocialAuthButton.jsx Changes
Interpolation in translations.json
2020-08-12 16:24:29 +02:00

56 lines
1.3 KiB
JavaScript

import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components';
import i18n from 'i18next';
import { withTranslation } from 'react-i18next';
import { remSize } from '../../../theme';
import { GithubIcon, GoogleIcon } from '../../../common/icons';
import Button from '../../../common/Button';
const authUrls = {
github: '/auth/github',
google: '/auth/google'
};
const icons = {
github: GithubIcon,
google: GoogleIcon
};
const services = {
github: 'github',
google: 'google'
};
const StyledButton = styled(Button)`
width: ${remSize(300)};
`;
function SocialAuthButton({ service, t }) {
const ServiceIcon = icons[service];
const labels = {
github: t('SocialAuthButton.Github'),
google: t('SocialAuthButton.Google')
};
return (
<StyledButton
iconBefore={<ServiceIcon aria-label={t('SocialAuthButton.LogoARIA', { serviceauth: service })} />}
href={authUrls[service]}
>
{labels[service]}
</StyledButton>
);
}
SocialAuthButton.services = services;
SocialAuthButton.propTypes = {
service: PropTypes.oneOf(['github', 'google']).isRequired,
t: PropTypes.func.isRequired
};
const SocialAuthButtonPublic = withTranslation()(SocialAuthButton);
SocialAuthButtonPublic.services = services;
export default SocialAuthButtonPublic;