r
/
p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull Requests Releases 1 Wiki Activity

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

* Reset Password Form using login view translation keys
* reduxFormUtils.js with i18 functionality to translate validations
This commit is contained in:
ov 2020-08-13 11:12:02 +01:00 committed by GitHub
parent 9694719e02
commit ff40de36ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 96 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/modules/User/components/ResetPasswordForm.jsx
View File

@ -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);

19
client/modules/User/pages/ResetPasswordView.jsx
View File

@ -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));

31
client/utils/reduxFormUtils.js
View File

@ -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,10 +43,10 @@ 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;
}
@ -53,10 +54,10 @@ export function validateSettings(formProps) {
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,17 +68,17 @@ 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;
@ -85,11 +86,11 @@ export function validateSignup(formProps) {
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;
}

32
translations/locales/en-US/translations.json
View File

@ -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."
}
}

44
translations/locales/es-419/translations.json
View File

@ -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."
}
}