Spanish Translation: Reset password Form and View (#1545)

oruburos · web-flow · commit ff40de36ca67 · 2020-08-13T12:12:02.000+02:00
* Reset Password Form using login view translation keys
* reduxFormUtils.js with i18 functionality to translate validations
diff --git a/client/modules/User/components/ResetPasswordForm.jsx b/client/modules/User/components/ResetPasswordForm.jsx
@@ -1,20 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-
+import { withTranslation } from 'react-i18next';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 import Button from '../../../common/Button';
 
 function ResetPasswordForm(props) {
   const {
-    fields: { email }, handleSubmit, submitting, invalid, pristine
+    fields: { email }, handleSubmit, submitting, invalid, pristine, t
   } = props;
   return (
     <form className="form" onSubmit={handleSubmit(props.initiateResetPassword.bind(this))}>
       <p className="form__field">
-        <label htmlFor="email" className="form__label">Email used for registration</label>
+        <label htmlFor="email" className="form__label">{t('ResetPasswordForm.Email')}</label>
         <input
           className="form__input"
-          aria-label="email"
+          aria-label={t('ResetPasswordForm.EmailARIA')}
           type="text"
           id="email"
           {...domOnlyProps(email)}
@@ -24,7 +24,7 @@ function ResetPasswordForm(props) {
       <Button
         type="submit"
         disabled={submitting || invalid || pristine || props.user.resetPasswordInitiate}
-      >Send Password Reset Email
+      >{t('ResetPasswordForm.Submit')}
       </Button>
     </form>
   );
@@ -41,7 +41,8 @@ ResetPasswordForm.propTypes = {
   pristine: PropTypes.bool,
   user: PropTypes.shape({
     resetPasswordInitiate: PropTypes.bool
-  }).isRequired
+  }).isRequired,
+  t: PropTypes.func.isRequired
 };
 
 ResetPasswordForm.defaultProps = {
@@ -50,4 +51,4 @@ ResetPasswordForm.defaultProps = {
   invalid: false
 };
 
-export default ResetPasswordForm;
+export default withTranslation()(ResetPasswordForm);
diff --git a/client/modules/User/pages/ResetPasswordView.jsx b/client/modules/User/pages/ResetPasswordView.jsx
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { bindActionCreators } from 'redux';
 import { reduxForm } from 'redux-form';
 import { Helmet } from 'react-helmet';
+import { withTranslation } from 'react-i18next';
 import * as UserActions from '../actions';
 import ResetPasswordForm from '../components/ResetPasswordForm';
 import { validateResetPassword } from '../../../utils/reduxFormUtils';
@@ -23,19 +24,18 @@ function ResetPasswordView(props) {
       <Nav layout="dashboard" />
       <div className={resetPasswordClass}>
         <Helmet>
-          <title>p5.js Web Editor | Reset Password</title>
+          <title>{props.t('ResetPasswordView.Title')}</title>
         </Helmet>
         <div className="form-container__content">
-          <h2 className="form-container__title">Reset Your Password</h2>
+          <h2 className="form-container__title">{props.t('ResetPasswordView.Reset')}</h2>
           <ResetPasswordForm {...props} />
           <p className="reset-password__submitted">
-            Your password reset email should arrive shortly. If you don&apos;t see it, check
-            in your spam folder as sometimes it can end up there.
+            {props.t('ResetPasswordView.Submitted')}
           </p>
           <p className="form__navigation-options">
-            <Link className="form__login-button" to="/login">Log In</Link>
-            &nbsp;or&nbsp;
-            <Link className="form__signup-button" to="/signup">Sign Up</Link>
+            <Link className="form__login-button" to="/login">{props.t('ResetPasswordView.Login')}</Link>
+            &nbsp;{props.t('ResetPasswordView.LoginOr')}&nbsp;
+            <Link className="form__signup-button" to="/signup">{props.t('ResetPasswordView.SignUp')}</Link>
           </p>
         </div>
       </div>
@@ -48,6 +48,7 @@ ResetPasswordView.propTypes = {
   user: PropTypes.shape({
     resetPasswordInitiate: PropTypes.bool
   }).isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {
@@ -60,8 +61,8 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(UserActions, dispatch);
 }
 
-export default reduxForm({
+export default withTranslation()(reduxForm({
   form: 'reset-password',
   fields: ['email'],
   validate: validateResetPassword
-}, mapStateToProps, mapDispatchToProps)(ResetPasswordView);
+}, mapStateToProps, mapDispatchToProps)(ResetPasswordView));
diff --git a/client/utils/reduxFormUtils.js b/client/utils/reduxFormUtils.js
@@ -1,4 +1,5 @@
 /* eslint-disable */
+import i18n from 'i18next';
 export const domOnlyProps = ({
   initialValue,
   autofill,
@@ -20,19 +21,19 @@ const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))
 
 function validateNameEmail(formProps, errors) {
   if (!formProps.username) {
-    errors.username = 'Please enter a username.';
+    errors.username = i18n.t('ReduxFormUtils.errorEmptyUsername');
   } else if (!formProps.username.match(/^.{1,20}$/)) {
-    errors.username = 'Username must be less than 20 characters.';
+    errors.username = i18n.t('ReduxFormUtils.errorLongUsername');
   } else if (!formProps.username.match(/^[a-zA-Z0-9._-]{1,20}$/)) {
-    errors.username = 'Username must only consist of numbers, letters, periods, dashes, and underscores.';
+    errors.username = i18n.t('ReduxFormUtils.errorValidUsername');
   }
 
   if (!formProps.email) {
-    errors.email = 'Please enter an email.';
+    errors.email = i18n.t('ReduxFormUtils.errorEmptyEmail');
   } else if (
     // eslint-disable-next-line max-len
     !formProps.email.match(EMAIL_REGEX)) {
-    errors.email = 'Please enter a valid email address.';
+    errors.email = i18n.t('ReduxFormUtils.errorInvalidEmail');
   }
 }
 
@@ -42,21 +43,21 @@ export function validateSettings(formProps) {
   validateNameEmail(formProps, errors);
 
   if (formProps.currentPassword && !formProps.newPassword) {
-    errors.newPassword = 'Please enter a new password or leave the current password empty.';
+    errors.newPassword = i18n.t('ReduxFormUtils.errorNewPassword');
   }
   if (formProps.newPassword && formProps.newPassword.length < 6) {
-    errors.newPassword = 'Password must be at least 6 characters';
+    errors.newPassword = i18n.t('ReduxFormUtils.errorShortPassword');
   }
   return errors;
 }
 
 export function validateLogin(formProps) {
   const errors = {};
   if (!formProps.email) {
-    errors.email = 'Please enter an email';
+    errors.email = i18n.t('ReduxFormUtils.errorEmptyEmail');
   }
   if (!formProps.password) {
-    errors.password = 'Please enter a password';
+    errors.password = i18n.t('ReduxFormUtils.errorEmptyPassword');
   }
   return errors;
 }
@@ -67,29 +68,29 @@ export function validateSignup(formProps) {
   validateNameEmail(formProps, errors);
 
   if (!formProps.password) {
-    errors.password = 'Please enter a password';
+    errors.password = i18n.t('ReduxFormUtils.errorEmptyPassword');
   }
   if (formProps.password && formProps.password.length < 6) {
-    errors.password = 'Password must be at least 6 characters';
+    errors.password = i18n.t('ReduxFormUtils.errorShortPassword');
   }
   if (!formProps.confirmPassword) {
-    errors.confirmPassword = 'Please enter a password confirmation';
+    errors.confirmPassword = i18n.t('ReduxFormUtils.errorConfirmPassword');
   }
 
   if (formProps.password !== formProps.confirmPassword && formProps.confirmPassword) {
-    errors.confirmPassword = 'Passwords must match';
+    errors.confirmPassword = i18n.t('ReduxFormUtils.errorPasswordMismatch');
   }
 
   return errors;
 }
 export function validateResetPassword(formProps) {
   const errors = {};
   if (!formProps.email) {
-    errors.email = 'Please enter an email.';
+    errors.email = i18n.t('ReduxFormUtils.errorEmptyEmail');
   } else if (
     // eslint-disable-next-line max-len
     !formProps.email.match(EMAIL_REGEX)) {
-    errors.email = 'Please enter a valid email address.';
+    errors.email = i18n.t('ReduxFormUtils.errorInvalidEmail');
   }
   return errors;
 }
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
@@ -183,21 +183,20 @@
     "Error": "Error",
     "Save": "Save",
     "p5logoARIA": "p5.js Logo"
-
   },
   "IDEView": {
     "SubmitFeedback": "Submit Feedback"
   },
   "NewFileModal": {
     "Title": "Create File",
-     "CloseButtonARIA": "Close New File Modal",
+    "CloseButtonARIA": "Close New File Modal",
     "EnterName": "Please enter a name",
     "InvalidType": "Invalid file type. Valid extensions are .js, .css, .json, .txt, .csv, .tsv, .frag, and .vert."
   },
   "NewFileForm": {
-  "AddFileSubmit": "Add File",
+    "AddFileSubmit": "Add File",
     "Placeholder": "Name"
-},
+  },
   "NewFolderModal": {
     "Title": "Create Folder",
     "CloseButtonARIA": "Close New Folder Modal",
@@ -208,5 +207,30 @@
   "NewFolderForm": {
     "AddFolderSubmit": "Add Folder",
     "Placeholder": "Name"
+  },
+  "ResetPasswordForm": {
+    "Email": "Email used for registration",
+    "EmailARIA": "email",
+    "Submit": "Send Password Reset Email"
+  },
+  "ResetPasswordView": {
+    "Title": "p5.js Web Editor | Reset Password",
+    "Reset": "Reset Your Password",
+    "Submitted": "Your password reset email should arrive shortly. If you don't see it, check\n            in your spam folder as sometimes it can end up there.",
+    "Login": "Log In",
+    "LoginOr": "or",
+    "SignUp": "Sign Up"
+  },
+  "ReduxFormUtils": {
+    "errorInvalidEmail": "Please enter a valid email address",
+    "errorEmptyEmail": "Please enter an email",
+    "errorPasswordMismatch": "Passwords must match",
+    "errorEmptyPassword": "Please enter a password",
+    "errorShortPassword": "Password must be at least 6 characters",
+    "errorConfirmPassword": "Please enter a password confirmation",
+    "errorNewPassword": "Please enter a new password or leave the current password empty.",
+    "errorEmptyUsername": "Please enter a username.",
+    "errorLongUsername": "Username must be less than 20 characters.",
+    "errorValidUsername": "Username must only consist of numbers, letters, periods, dashes, and underscores."
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
@@ -188,8 +188,8 @@
     "SubmitFeedback": "Enviar retroalimentación"
   },
   "NewFileModal": {
-  "Title": "Crear Archivo",
-  "CloseButtonARIA": "Cerrar diálogo de crear archivo",
+    "Title": "Crear Archivo",
+    "CloseButtonARIA": "Cerrar diálogo de crear archivo",
     "EnterName": "Por favor introduce un nombre",
     "InvalidType": "Tipo de archivo inválido. Las extensiones válidas son .js, .css, .json, .txt, .csv, .tsv, .frag y .vert."
   },
@@ -198,18 +198,42 @@
     "Placeholder": "Nombre"
   },
   "NewFolderModal": {
-  "Title": "Crear Directorio",
-  "CloseButtonARIA": "Cerrar Diálogo de Nuevo Directorio",
-  "EnterName": "Por favor introduce un nombre",
-  "EmptyName": " El nombre del directorio no debe contener solo espacios vacíos",
-  "InvalidExtension": "El nombre del directorio no debe contener una extensión"
-},
+    "Title": "Crear Directorio",
+    "CloseButtonARIA": "Cerrar Diálogo de Nuevo Directorio",
+    "EnterName": "Por favor introduce un nombre",
+    "EmptyName": " El nombre del directorio no debe contener solo espacios vacíos",
+    "InvalidExtension": "El nombre del directorio no debe contener una extensión"
+  },
   "NewFolderForm": {
     "AddFolderSubmit": "Agregar Directorio",
     "Placeholder": "Nombre"
+  },
+  "ResetPasswordForm": {
+    "Email": "Correo electrónico usado al registrarse",
+    "EmailARIA": "correo electrónico",
+    "Submit": "Enviar correo para regenerar contraseña"
+  },
+  "ResetPasswordView": {
+    "Title": "Editor Web p5.js | Regenerar Contraseña",
+    "Reset": "Regenerar Contraseña",
+    "Submitted": "Your password reset email should arrive shortly. If you don't see it, check\n            in your spam folder as sometimes it can end up there.",
+    "Login": "Ingresa",
+    "LoginOr": "o",
+    "SignUp": "Registráte"
+  },
+  "ReduxFormUtils": {
+    "errorInvalidEmail": "Por favor introduce un correo electrónico válido",
+    "errorEmptyEmail": "Por favor introduce un correo electrónico",
+    "errorPasswordMismatch": "Las contraseñas deben coincidir",
+    "errorEmptyPassword": "Por favor introduce una contraseña",
+    "errorShortPassword": "La contraseña debe tener al menos 6 caracteres",
+    "errorConfirmPassword": "Por favor confirma una contraseña",
+    "errorNewPassword": "Por favor introduce una nueva contraseña o deja la actual contraseña vacía",
+    "errorEmptyUsername": "Por favor introduce tu identificación",
+    "errorLongUsername": "La identificación debe ser menor a 20 caracteres.",
+    "errorValidUsername": "La identificación debe consistir solamente de números, letras, puntos, guiones y guiones bajos."
+
   }
 }
 
 
-
-

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`/* eslint-disable */`
	`2`	`+import i18n from 'i18next';`
`2`	`3`	`export const domOnlyProps = ({`
`3`	`4`	`initialValue,`
`4`	`5`	`autofill,`
`@@ -20,19 +21,19 @@ const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)\|(".+"))`
`20`	`21`
`21`	`22`	`function validateNameEmail(formProps, errors) {`
`22`	`23`	`if (!formProps.username) {`
`23`		`- errors.username = 'Please enter a username.';`
	`24`	`+ errors.username = i18n.t('ReduxFormUtils.errorEmptyUsername');`
`24`	`25`	`} else if (!formProps.username.match(/^.{1,20}$/)) {`
`25`		`- errors.username = 'Username must be less than 20 characters.';`
	`26`	`+ errors.username = i18n.t('ReduxFormUtils.errorLongUsername');`
`26`	`27`	`} else if (!formProps.username.match(/^[a-zA-Z0-9._-]{1,20}$/)) {`
`27`		`- errors.username = 'Username must only consist of numbers, letters, periods, dashes, and underscores.';`
	`28`	`+ errors.username = i18n.t('ReduxFormUtils.errorValidUsername');`
`28`	`29`	`}`
`29`	`30`
`30`	`31`	`if (!formProps.email) {`
`31`		`- errors.email = 'Please enter an email.';`
	`32`	`+ errors.email = i18n.t('ReduxFormUtils.errorEmptyEmail');`
`32`	`33`	`} else if (`
`33`	`34`	`// eslint-disable-next-line max-len`
`34`	`35`	`!formProps.email.match(EMAIL_REGEX)) {`
`35`		`- errors.email = 'Please enter a valid email address.';`
	`36`	`+ errors.email = i18n.t('ReduxFormUtils.errorInvalidEmail');`
`36`	`37`	`}`
`37`	`38`	`}`
`38`	`39`
`@@ -42,21 +43,21 @@ export function validateSettings(formProps) {`
`42`	`43`	`validateNameEmail(formProps, errors);`
`43`	`44`
`44`	`45`	`if (formProps.currentPassword && !formProps.newPassword) {`
`45`		`- errors.newPassword = 'Please enter a new password or leave the current password empty.';`
	`46`	`+ errors.newPassword = i18n.t('ReduxFormUtils.errorNewPassword');`
`46`	`47`	`}`
`47`	`48`	`if (formProps.newPassword && formProps.newPassword.length < 6) {`
`48`		`- errors.newPassword = 'Password must be at least 6 characters';`
	`49`	`+ errors.newPassword = i18n.t('ReduxFormUtils.errorShortPassword');`
`49`	`50`	`}`
`50`	`51`	`return errors;`
`51`	`52`	`}`
`52`	`53`
`53`	`54`	`export function validateLogin(formProps) {`
`54`	`55`	`const errors = {};`
`55`	`56`	`if (!formProps.email) {`
`56`		`- errors.email = 'Please enter an email';`
	`57`	`+ errors.email = i18n.t('ReduxFormUtils.errorEmptyEmail');`
`57`	`58`	`}`
`58`	`59`	`if (!formProps.password) {`
`59`		`- errors.password = 'Please enter a password';`
	`60`	`+ errors.password = i18n.t('ReduxFormUtils.errorEmptyPassword');`
`60`	`61`	`}`
`61`	`62`	`return errors;`
`62`	`63`	`}`
`@@ -67,29 +68,29 @@ export function validateSignup(formProps) {`
`67`	`68`	`validateNameEmail(formProps, errors);`
`68`	`69`
`69`	`70`	`if (!formProps.password) {`
`70`		`- errors.password = 'Please enter a password';`
	`71`	`+ errors.password = i18n.t('ReduxFormUtils.errorEmptyPassword');`
`71`	`72`	`}`
`72`	`73`	`if (formProps.password && formProps.password.length < 6) {`
`73`		`- errors.password = 'Password must be at least 6 characters';`
	`74`	`+ errors.password = i18n.t('ReduxFormUtils.errorShortPassword');`
`74`	`75`	`}`
`75`	`76`	`if (!formProps.confirmPassword) {`
`76`		`- errors.confirmPassword = 'Please enter a password confirmation';`
	`77`	`+ errors.confirmPassword = i18n.t('ReduxFormUtils.errorConfirmPassword');`
`77`	`78`	`}`
`78`	`79`
`79`	`80`	`if (formProps.password !== formProps.confirmPassword && formProps.confirmPassword) {`
`80`		`- errors.confirmPassword = 'Passwords must match';`
	`81`	`+ errors.confirmPassword = i18n.t('ReduxFormUtils.errorPasswordMismatch');`
`81`	`82`	`}`
`82`	`83`
`83`	`84`	`return errors;`
`84`	`85`	`}`
`85`	`86`	`export function validateResetPassword(formProps) {`
`86`	`87`	`const errors = {};`
`87`	`88`	`if (!formProps.email) {`
`88`		`- errors.email = 'Please enter an email.';`
	`89`	`+ errors.email = i18n.t('ReduxFormUtils.errorEmptyEmail');`
`89`	`90`	`} else if (`
`90`	`91`	`// eslint-disable-next-line max-len`
`91`	`92`	`!formProps.email.match(EMAIL_REGEX)) {`
`92`		`- errors.email = 'Please enter a valid email address.';`
	`93`	`+ errors.email = i18n.t('ReduxFormUtils.errorInvalidEmail');`
`93`	`94`	`}`
`94`	`95`	`return errors;`
`95`	`96`	`}`