jeirmeister/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-04-27 07:48:01 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Webatrice: i18n login screen (#4584)

Browse source 
* i18n: login container and form

* i18n: activate, host, and register forms

* i18n: reset password forms

* i18n: login dialogs, ICU formatting

* i18n: login containers and components

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>
This commit is contained in:
Jeremy Letto 2022-03-02 22:34:57 -06:00 • committed by GitHub
parent baaf261116
commit f5b973e15c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
35 changed files with 424 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

8
webclient/src/forms/ResetPasswordForm/ResetPasswordForm.i18n.json Normal file
View file

@ -0,0 +1,8 @@
{
"ResetPasswordForm": {
"error": "Password reset failed",
"label": {
"reset": "Reset Password"
}
}
}

48
webclient/src/forms/ResetPasswordForm/ResetPasswordForm.tsx
View file

@ -2,7 +2,8 @@
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Form, Field } from 'react-final-form'
import { OnChange } from 'react-final-form-listeners'
import { OnChange } from 'react-final-form-listeners';
import { useTranslation } from 'react-i18next';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
@ -16,6 +17,7 @@ import { ServerTypes } from '../../store';
const ResetPasswordForm = ({ onSubmit, userName }) => {
const [errorMessage, setErrorMessage] = useState(false);
const { t } = useTranslation();
useReduxEffect(() => {
setErrorMessage(true);
@ -25,25 +27,25 @@ const ResetPasswordForm = ({ onSubmit, userName }) => {
const errors: any = {};
if (!values.userName) {
errors.userName = 'Required';
errors.userName = t('Common.validation.required');
}
if (!values.token) {
errors.token = 'Required';
errors.token = t('Common.validation.required');
}
if (!values.newPassword) {
errors.newPassword = 'Required';
errors.newPassword = t('Common.validation.required');
} else if (values.newPassword.length < 8) {
errors.newPassword = 'Minimum of 8 characters required';
errors.newPassword = t('Common.validation.minChars', { count: 8 });
}
if (!values.passwordAgain) {
errors.passwordAgain = 'Required';
errors.passwordAgain = t('Common.validation.required');
} else if (values.newPassword !== values.passwordAgain) {
errors.passwordAgain = 'Passwords don\'t match'
errors.passwordAgain = t('Common.validation.passwordsMustMatch');
}
if (!values.selectedHost) {
errors.selectedHost = 'Required';
errors.selectedHost = t('Common.validation.required');
}
return errors;
@ -62,16 +64,34 @@ const ResetPasswordForm = ({ onSubmit, userName }) => {
<form className='ResetPasswordForm' onSubmit={handleSubmit}>
<div className='ResetPasswordForm-items'>
<div className='ResetPasswordForm-item'>
<Field label='Username' name='userName' component={InputField} autoComplete='username' disabled={!!userName} />
<Field
label={t('Common.label.username')}
name='userName'
component={InputField}
autoComplete='username'
disabled={!!userName}
/>
</div>
<div className='ResetPasswordForm-item'>
<Field label='Token' name='token' component={InputField} />
<Field label={t('Common.label.token')} name='token' component={InputField} />
</div>
<div className='ResetPasswordForm-item'>
<Field label='Password' name='newPassword' type='password' component={InputField} autoComplete='new-password' />
<Field
label={t('Common.label.password')}
name='newPassword'
type='password'
component={InputField}
autoComplete='new-password'
/>
</div>
<div className='ResetPasswordForm-item'>
<Field label='Password Again' name='passwordAgain' type='password' component={InputField} autoComplete='new-password' />
<Field
label={t('Common.label.passwordAgain')}
name='passwordAgain'
type='password'
component={InputField}
autoComplete='new-password'
/>
</div>
<div className='ResetPasswordForm-item'>
<Field name='selectedHost' component={KnownHosts} disabled />
@ -79,12 +99,12 @@ const ResetPasswordForm = ({ onSubmit, userName }) => {
{errorMessage && (
<div className='ResetPasswordForm-item'>
<Typography color="error">Password reset failed</Typography>
<Typography color="error">{ t('ResetPasswordForm.error') }</Typography>
</div>
)}
</div>
<Button className='ResetPasswordForm-submit rounded tall' color='primary' variant='contained' type='submit'>
Reset Password
{ t('ResetPasswordForm.label.reset') }
</Button>
</form>
)}