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

Author: oruburos

client/components/Nav.jsx

@@ -608,13 +608,13 @@ class Nav extends React.PureComponent {
       <ul className="nav__items-right" title="user-menu">
         <li className="nav__item">
           <Link to="/login" className="nav__auth-button">
-            <span className="nav__item-header">{this.props.t('Nav.Login.Login')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Login')}</span>
           </Link>
         </li>
-        <span className="nav__item-or">{this.props.t('Nav.Login.LoginOr')}</span>
+        <span className="nav__item-or">{this.props.t('Nav.LoginOr')}</span>
         <li className="nav__item">
           <Link to="/signup" className="nav__auth-button">
-            <span className="nav__item-header">{this.props.t('Nav.Login.SignUp')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.SignUp')}</span>
           </Link>
         </li>
       </ul>

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,21 +13,21 @@ function LoginForm(props) {
   return (
     <form className="form" onSubmit={handleSubmit(props.validateAndLoginUser.bind(this, props.previousPath))}>
       <p className="form__field">
-        <label htmlFor="email" className="form__label">Email or Username</label>
+        <label htmlFor="email" className="form__label">{props.t('LoginForm.UsernameOrEmail')}</label>
         <input
           className="form__input"
-          aria-label="email or username"
+          aria-label={props.t('LoginForm.UsernameOrEmailARIA')}
           type="text"
           id="email"
           {...domOnlyProps(email)}
         />
         {email.touched && email.error && <span className="form-error">{email.error}</span>}
       </p>
       <p className="form__field">
-        <label htmlFor="password" className="form__label">Password</label>
+        <label htmlFor="password" className="form__label">{props.t('LoginForm.Password')}</label>
         <input
           className="form__input"
-          aria-label="password"
+          aria-label={props.t('LoginForm.PasswordARIA')}
           type="password"
           id="password"
           {...domOnlyProps(password)}
@@ -36,7 +37,7 @@ function LoginForm(props) {
       <Button
         type="submit"
         disabled={submitting || pristine}
-      >Log In
+      >{props.t('LoginForm.Submit')}
       </Button>
     </form>
   );
@@ -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);

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 (
     <StyledButton
-      iconBefore={<ServiceIcon aria-label={`${service} logo`} />}
+      iconBefore={<ServiceIcon aria-label={t('SocialAuthButton.LogoARIA', { serviceauth: service })} />}
       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;

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 {
         <Nav layout="dashboard" />
         <main className="form-container">
           <Helmet>
-            <title>p5.js Web Editor | Login</title>
+            <title>{this.props.t('LoginView.Title')}</title>
           </Helmet>
           <div className="form-container__content">
-            <h2 className="form-container__title">Log In</h2>
+            <h2 className="form-container__title">{this.props.t('LoginView.Login')}</h2>
             <LoginForm {...this.props} />
-            <h2 className="form-container__divider">Or</h2>
+            <h2 className="form-container__divider">{this.props.t('LoginView.LoginOr')}</h2>
             <div className="form-container__stack">
               <SocialAuthButton service={SocialAuthButton.services.github} />
               <SocialAuthButton service={SocialAuthButton.services.google} />
             </div>
             <p className="form__navigation-options">
-              Don&apos;t have an account?&nbsp;
-              <Link className="form__signup-button" to="/signup">Sign Up</Link>
+              {this.props.t('LoginView.DontHaveAccount')}
+              <Link className="form__signup-button" to="/signup">{this.props.t('LoginView.SignUp')}</Link>
             </p>
             <p className="form__navigation-options">
-              Forgot your password?&nbsp;
-              <Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
+              {this.props.t('LoginView.ForgotPassword')}
+              <Link className="form__reset-password-button" to="/reset-password"> {this.props.t('LoginView.ResetPassword')}</Link>
             </p>
           </div>
         </main>
@@ -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));

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",

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",