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,9 @@
{
"KnownHostForm": {
"help": "Need help adding a new host?",
"label": {
"add": "Add Host",
"find": "Find Host"
}
}
}

View file

@ -2,6 +2,7 @@
import React, { useState } from "react";
import { connect } from 'react-redux';
import { Form, Field } from 'react-final-form'
import { useTranslation } from 'react-i18next';
import Button from '@material-ui/core/Button';
import AnchorLink from '@material-ui/core/Link';
@ -12,20 +13,21 @@ import './KnownHostForm.css';
const KnownHostForm = ({ host, onRemove, onSubmit }) => {
const [confirmDelete, setConfirmDelete] = useState(false);
const { t } = useTranslation();
const validate = values => {
const errors: any = {};
if (!values.name) {
errors.name = 'Required'
errors.name = t('Common.validation.required');
}
if (!values.host) {
errors.host = 'Required'
errors.host = t('Common.validation.required');
}
if (!values.port) {
errors.port = 'Required'
errors.port = t('Common.validation.required');
}
if (Object.keys(errors).length) {
@ -54,29 +56,29 @@ const KnownHostForm = ({ host, onRemove, onSubmit }) => {
{({ handleSubmit }) => (
<form className="KnownHostForm" onSubmit={handleSubmit}>
<div className="KnownHostForm-item">
<Field label="Host Name" name="name" component={InputField} />
<Field label={t('Common.label.hostName')} name="name" component={InputField} />
</div>
<div className="KnownHostForm-item">
<Field label="Host Address" name="host" component={InputField} />
<Field label={t('Common.label.hostAddress')} name="host" component={InputField} />
</div>
<div className="KnownHostForm-item">
<Field label="Port" name="port" type="number" component={InputField} />
<Field label={t('Common.label.port')} name="port" type="number" component={InputField} />
</div>
<Button className="KnownHostForm-submit" color="primary" variant="contained" type="submit">
{host ? 'Save Changes' : 'Add Host' }
{host ? t('Common.label.saveChanges') : t('KnownHostForm.label.add') }
</Button>
<div className="KnownHostForm-actions">
<div className="KnownHostForm-actions__delete">
{ host && (
<Button color="inherit" onClick={() => !confirmDelete ? setConfirmDelete(true) : onRemove(host)}>
{ !confirmDelete ? 'Delete' : 'Are you sure?' }
{ !confirmDelete ? t('Common.label.delete') : t('Common.label.confirmSure') }
</Button>
) }
</div>
<AnchorLink href='https://github.com/Cockatrice/Cockatrice/wiki/Public-Servers' target='_blank'>
Need help adding a new host?
{ t('KnownHostForm.label.find') }
</AnchorLink>
</div>
</form>