Signup form: Spanish Translation (#1550)

* SignupForms and view

Co-authored-by: Andrew Nicolaou <me@andrewnicolaou.co.uk>

client/modules/User/components/SignupForm.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 import Button from '../../../common/Button';
@@ -13,10 +14,10 @@ function SignupForm(props) {
   return (
     <form className="form" onSubmit={handleSubmit(props.signUpUser.bind(this, props.previousPath))}>
       <p className="form__field">
-        <label htmlFor="username" className="form__label">User Name</label>
+        <label htmlFor="username" className="form__label">{props.t('SignupForm.Title')}</label>
         <input
           className="form__input"
-          aria-label="username"
+          aria-label={props.t('SignupForm.TitleARIA')}
           type="text"
           id="username"
           {...domOnlyProps(username)}
@@ -24,10 +25,10 @@ function SignupForm(props) {
         {username.touched && username.error && <span className="form-error">{username.error}</span>}
       </p>
       <p className="form__field">
-        <label htmlFor="email" className="form__label">Email</label>
+        <label htmlFor="email" className="form__label">{props.t('SignupForm.Email')}</label>
         <input
           className="form__input"
-          aria-label="email"
+          aria-label={props.t('SignupForm.EmailARIA')}
           type="text"
           id="email"
           {...domOnlyProps(email)}
@@ -35,10 +36,10 @@ function SignupForm(props) {
         {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('SignupForm.Password')}</label>
         <input
           className="form__input"
-          aria-label="password"
+          aria-label={props.t('SignupForm.PasswordARIA')}
           type="password"
           id="password"
           {...domOnlyProps(password)}
@@ -46,11 +47,11 @@ function SignupForm(props) {
         {password.touched && password.error && <span className="form-error">{password.error}</span>}
       </p>
       <p className="form__field">
-        <label htmlFor="confirm password" className="form__label">Confirm Password</label>
+        <label htmlFor="confirm password" className="form__label">{props.t('SignupForm.ConfirmPassword')}</label>
         <input
           className="form__input"
           type="password"
-          aria-label="confirm password"
+          aria-label={props.t('SignupForm.ConfirmPasswordARIA')}
           id="confirm password"
           {...domOnlyProps(confirmPassword)}
         />
@@ -63,7 +64,7 @@ function SignupForm(props) {
       <Button
         type="submit"
         disabled={submitting || invalid || pristine}
-      >Sign Up
+      >{props.t('SignupForm.SubmitSignup')}
       </Button>
     </form>
   );
@@ -81,7 +82,8 @@ SignupForm.propTypes = {
   submitting: PropTypes.bool,
   invalid: PropTypes.bool,
   pristine: PropTypes.bool,
-  previousPath: PropTypes.string.isRequired
+  previousPath: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 SignupForm.defaultProps = {
@@ -90,4 +92,4 @@ SignupForm.defaultProps = {
   invalid: false
 };
 
-export default SignupForm;
+export default withTranslation()(SignupForm);

client/modules/User/pages/SignupView.jsx

@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
 import { Link, browserHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { reduxForm } from 'redux-form';
+import { withTranslation } from 'react-i18next';
 import * as UserActions from '../actions';
 import SignupForm from '../components/SignupForm';
 import apiClient from '../../../utils/apiClient';
@@ -26,19 +27,19 @@ class SignupView extends React.Component {
         <Nav layout="dashboard" />
         <main className="form-container">
           <Helmet>
-            <title>p5.js Web Editor | Signup</title>
+            <title>{this.props.t('SignupView.Title')}</title>
           </Helmet>
           <div className="form-container__content">
-            <h2 className="form-container__title">Sign Up</h2>
+            <h2 className="form-container__title">{this.props.t('SignupView.Description')}</h2>
             <SignupForm {...this.props} />
-            <h2 className="form-container__divider">Or</h2>
+            <h2 className="form-container__divider">{this.props.t('SignupView.Or')}</h2>
             <div className="form-container__stack">
               <SocialAuthButton service={SocialAuthButton.services.github} />
               <SocialAuthButton service={SocialAuthButton.services.google} />
             </div>
             <p className="form__navigation-options">
-              Already have an account?&nbsp;
+              {this.props.t('SignupView.AlreadyHave')}
-              <Link className="form__login-button" to="/login">Log In</Link>
+              <Link className="form__login-button" to="/login">{this.props.t('SignupView.Login')}</Link>
             </p>
           </div>
         </main>
@@ -108,7 +109,8 @@ SignupView.propTypes = {
   previousPath: PropTypes.string.isRequired,
   user: PropTypes.shape({
     authenticated: PropTypes.bool
-  })
+  }),
+  t: PropTypes.func.isRequired
 };
 
 SignupView.defaultProps = {
@@ -117,11 +119,11 @@ SignupView.defaultProps = {
   }
 };
 
-export default reduxForm({
+export default withTranslation()(reduxForm({
   form: 'signup',
   fields: ['username', 'email', 'password', 'confirmPassword'],
   onSubmitFail,
   validate: validateSignup,
   asyncValidate,
   asyncBlurFields: ['username', 'email']
-}, mapStateToProps, mapDispatchToProps)(SignupView);
+}, mapStateToProps, mapDispatchToProps)(SignupView));

translations/locales/en-US/translations.json

@@ -289,5 +289,23 @@
     "ConfirmPassword": "Confirm Password",
     "ConfirmPasswordARIA": "Confirm Password",
     "SubmitSetNewPassword": "Set New Password"
+  },
+  "SignupForm": {
+    "Title": "User Name",
+    "TitleARIA": "username",
+    "Email": "Email",
+    "EmailARIA": "email",
+    "Password": "Password",
+    "PasswordARIA": "password",
+    "ConfirmPassword": "Confirm Password",
+    "ConfirmPasswordARIA": "Confirm password",
+    "SubmitSignup": "Sign Up"
+  },
+  "SignupView": {
+    "Title": "p5.js Web Editor | Signup",
+    "Description": "Sign Up",
+    "Or": "Or",
+    "AlreadyHave": "Already have an account?",
+    "Login": "Log In"
   }
 }

translations/locales/es-419/translations.json

@@ -289,5 +289,23 @@
     "ConfirmPassword": "Confirmar Contraseña",
     "ConfirmPasswordARIA": "Confirmar contraseña",
     "SubmitSetNewPassword": "Crear Nueva Contraseña"
+  },
+  "SignupForm": {
+    "Title": "Identificación",
+    "TitleARIA": "Identificación",
+    "Email": "Correo electrónico",
+    "EmailARIA": "correo electrónico",
+    "Password": "Contraseña",
+    "PasswordARIA": "contraseña",
+    "ConfirmPassword": "Confirma tu contraseña",
+    "ConfirmPasswordARIA": "Confirma tu contraseña",
+    "SubmitSignup": "Registráte"
+  },
+  "SignupView": {
+    "Title": " Editor Web p5.js | Registráte",
+    "Description": "Registráte",
+    "Or": "o",
+    "AlreadyHave": "¿Ya tienes cuenta? ",
+    "Login": "Ingresa"
   }
 }