diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 16617112..4f315bb3 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -608,13 +608,13 @@ class Nav extends React.PureComponent {
-
- {this.props.t('Nav.Login.Login')}
+ {this.props.t('Nav.Login')}
- {this.props.t('Nav.Login.LoginOr')}
+ {this.props.t('Nav.LoginOr')}
-
- {this.props.t('Nav.Login.SignUp')}
+ {this.props.t('Nav.SignUp')}
diff --git a/client/modules/User/components/LoginForm.jsx b/client/modules/User/components/LoginForm.jsx
index 9cc85d98..51115e5f 100644
--- a/client/modules/User/components/LoginForm.jsx
+++ b/client/modules/User/components/LoginForm.jsx
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
-
+import { withTranslation } from 'react-i18next';
+import i18n from 'i18next';
import Button from '../../../common/Button';
import { domOnlyProps } from '../../../utils/reduxFormUtils';
@@ -12,10 +13,10 @@ function LoginForm(props) {
return (
);
@@ -52,7 +53,8 @@ LoginForm.propTypes = {
submitting: PropTypes.bool,
pristine: PropTypes.bool,
invalid: PropTypes.bool,
- previousPath: PropTypes.string.isRequired
+ previousPath: PropTypes.string.isRequired,
+ t: PropTypes.func.isRequired
};
LoginForm.defaultProps = {
@@ -61,4 +63,4 @@ LoginForm.defaultProps = {
invalid: false
};
-export default LoginForm;
+export default withTranslation()(LoginForm);
diff --git a/client/modules/User/components/SocialAuthButton.jsx b/client/modules/User/components/SocialAuthButton.jsx
index afcb605d..62bf4097 100644
--- a/client/modules/User/components/SocialAuthButton.jsx
+++ b/client/modules/User/components/SocialAuthButton.jsx
@@ -1,6 +1,8 @@
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';
@@ -12,11 +14,6 @@ const authUrls = {
google: '/auth/google'
};
-const labels = {
- github: 'Login with GitHub',
- google: 'Login with Google'
-};
-
const icons = {
github: GithubIcon,
google: GoogleIcon
@@ -31,11 +28,15 @@ const StyledButton = styled(Button)`
width: ${remSize(300)};
`;
-function SocialAuthButton({ service }) {
+function SocialAuthButton({ service, t }) {
const ServiceIcon = icons[service];
+ const labels = {
+ github: t('SocialAuthButton.Github'),
+ google: t('SocialAuthButton.Google')
+ };
return (
}
+ iconBefore={}
href={authUrls[service]}
>
{labels[service]}
@@ -46,7 +47,10 @@ function SocialAuthButton({ service }) {
SocialAuthButton.services = services;
SocialAuthButton.propTypes = {
- service: PropTypes.oneOf(['github', 'google']).isRequired
+ service: PropTypes.oneOf(['github', 'google']).isRequired,
+ t: PropTypes.func.isRequired
};
-export default SocialAuthButton;
+const SocialAuthButtonPublic = withTranslation()(SocialAuthButton);
+SocialAuthButtonPublic.services = services;
+export default SocialAuthButtonPublic;
diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx
index 84e3c4c9..20b48b17 100644
--- a/client/modules/User/pages/LoginView.jsx
+++ b/client/modules/User/pages/LoginView.jsx
@@ -3,6 +3,8 @@ import React from 'react';
import { reduxForm } from 'redux-form';
import { Link, browserHistory } from 'react-router';
import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
+import i18n from 'i18next';
import { validateAndLoginUser } from '../actions';
import LoginForm from '../components/LoginForm';
import { validateLogin } from '../../../utils/reduxFormUtils';
@@ -34,23 +36,23 @@ class LoginView extends React.Component {
- p5.js Web Editor | Login
+ {this.props.t('LoginView.Title')}
-
Log In
+
{this.props.t('LoginView.Login')}
-
Or
+
{this.props.t('LoginView.LoginOr')}
- Don't have an account?
- Sign Up
+ {this.props.t('LoginView.DontHaveAccount')}
+ {this.props.t('LoginView.SignUp')}
- Forgot your password?
- Reset your password
+ {this.props.t('LoginView.ForgotPassword')}
+ {this.props.t('LoginView.ResetPassword')}
@@ -76,7 +78,8 @@ LoginView.propTypes = {
previousPath: PropTypes.string.isRequired,
user: PropTypes.shape({
authenticated: PropTypes.bool
- })
+ }),
+ t: PropTypes.func.isRequired
};
LoginView.defaultProps = {
@@ -85,8 +88,8 @@ LoginView.defaultProps = {
}
};
-export default reduxForm({
+export default withTranslation()(reduxForm({
form: 'login',
fields: ['email', 'password'],
validate: validateLogin
-}, mapStateToProps, mapDispatchToProps)(LoginView);
+}, mapStateToProps, mapDispatchToProps)(LoginView));
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index d0868580..652eece4 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -33,18 +33,9 @@
"Lang": "Language",
"BackEditor": "Back to Editor",
"WarningUnsavedChanges": "Are you sure you want to leave this page? You have unsaved changes.",
- "Login": {
- "Login": "Log in",
- "LoginOr": "or",
- "SignUp": "Sign up",
- "Email": "email",
- "Username": "username",
- "LoginGithub": "Login with Github",
- "LoginGoogle": "Login with Google",
- "DontHaveAccount": "Don't have an account?",
- "ForgotPassword": "Forgot your password?",
- "ResetPassword": "Reset your password"
- },
+ "Login": "Log in",
+ "LoginOr": "or",
+ "SignUp": "Sign up",
"Auth": {
"Welcome": "Welcome",
"Hello": "Hello",
@@ -57,6 +48,29 @@
"LogOut": "Log Out"
}
},
+ "LoginForm": {
+ "UsernameOrEmail": "Email or Username",
+ "UsernameOrEmailARIA": "Email or Username",
+ "Password": "Password",
+ "PasswordARIA": "Password",
+ "Submit": "Log In"
+ },
+ "LoginView": {
+ "Title": "p5.js Web Editor | Login",
+ "Login": "Log In",
+ "LoginOr": "or",
+ "SignUp": "Sign Up",
+ "Email": "email",
+ "Username": "username",
+ "DontHaveAccount": "Don't have an account? ",
+ "ForgotPassword": "Forgot your password? ",
+ "ResetPassword": "Reset your password"
+ },
+ "SocialAuthButton": {
+ "Github": "Login with Github",
+ "LogoARIA": "{{serviceauth}} logo",
+ "Google": "Login with Google"
+ },
"About": {
"Title": "About",
"TitleHelmet": "p5.js Web Editor | About",
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 398da8dc..5f3efaf7 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -33,18 +33,9 @@
"Lang": "Lenguaje",
"BackEditor": "Regresa al editor",
"WarningUnsavedChanges": "¿Realmente quieres salir de la página? Tienes cambios sin guardar.",
- "Login": {
- "Login": "Ingresa",
- "LoginOr": "o",
- "SignUp": "registráte",
- "Email": "correo electrónico",
- "Username": "Identificación",
- "LoginGithub": "Ingresa con Github",
- "LoginGoogle": "Ingresa con Google",
- "DontHaveAccount": "¿No tienes cuenta?",
- "ForgotPassword": "¿Olvidaste tu contraseña?",
- "ResetPassword": "Regenera tu contraseña"
- },
+ "Login": "Ingresa",
+ "LoginOr": "o",
+ "SignUp": "Registráte",
"Auth": {
"Welcome": "Hola",
"Hello": "Hola",
@@ -57,6 +48,29 @@
"LogOut": "Cerrar sesión"
}
},
+ "LoginForm": {
+ "UsernameOrEmail": "Correo o Identificación",
+ "UsernameOrEmailARIA": "Introduce Correo o Identificación",
+ "Password": "Contraseña",
+ "PasswordARIA": "Contraseña",
+ "Submit": "Ingresa"
+ },
+ "LoginView": {
+ "Title": " Editor Web p5.js | Ingreso",
+ "Login": "Ingresa",
+ "LoginOr": "o",
+ "SignUp": "Registráte",
+ "Email": "correo electrónico",
+ "Username": "Identificación",
+ "DontHaveAccount": "¿No tienes cuenta? ",
+ "ForgotPassword": "¿Olvidaste tu contraseña? ",
+ "ResetPassword": "Regenera tu contraseña"
+ },
+ "SocialAuthButton": {
+ "Github": "Ingresa con Github",
+ "LogoARIA": "Logo de {{serviceauth}}",
+ "Google": "Ingresa con Google"
+ },
"About": {
"Title": "Acerca de",
"TitleHelmet": "Editor Web p5.js | Acerca de",