Webatrice: i18n login screen (#4584)

* 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

View file

@ -0,0 +1,10 @@
{
"AccountActivationForm": {
"error": {
"failed": "Account activation failed"
},
"label": {
"activate": "Activate Account"
}
}
}

View file

@ -3,6 +3,7 @@ import React, { useState } from "react";
import { connect } from 'react-redux';
import { Form, Field } from 'react-final-form';
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 AccountActivationForm = ({ onSubmit }) => {
const [errorMessage, setErrorMessage] = useState(false);
const { t } = useTranslation();
useReduxEffect(() => {
setErrorMessage(true);
@ -33,7 +35,7 @@ const AccountActivationForm = ({ onSubmit }) => {
const errors: any = {};
if (!values.token) {
errors.token = 'Required';
errors.token = t('Common.validation.required');
}
return errors;
@ -45,17 +47,17 @@ const AccountActivationForm = ({ onSubmit }) => {
return (
<form className="AccountActivationForm" onSubmit={handleSubmit}>
<div className="AccountActivationForm-item">
<Field label="Token" name="token" component={InputField} />
<Field label={t('Common.label.token')} name="token" component={InputField} />
</div>
{errorMessage && (
<div className="AccountActivationForm-error">
<Typography color="error">Account activation failed</Typography>
<Typography color="error">{ t('AccountActivationForm.error.failed') }</Typography>
</div>
)}
<Button className="AccountActivationForm-submit rounded tall" color="primary" variant="contained" type="submit">
Activate Account
{ t('AccountActivationForm.label.activate') }
</Button>
</form>
);