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>

webclient/src/forms/RegisterForm/RegisterForm.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { Form, Field } from 'react-final-form';
 import { OnChange } from 'react-final-form-listeners';
-import setFieldTouched from 'final-form-set-field-touched'
+import setFieldTouched from 'final-form-set-field-touched';
+import { useTranslation } from 'react-i18next';
 
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
@@ -14,12 +15,13 @@ import './RegisterForm.css';
 import { useToast } from 'components/Toast';
 
 const RegisterForm = ({ onSubmit }: RegisterFormProps) => {
+  const { t } = useTranslation();
   const [emailRequired, setEmailRequired] = useState(false);
   const [error, setError] = useState(null);
   const [emailError, setEmailError] = useState(null);
   const [passwordError, setPasswordError] = useState(null);
   const [userNameError, setUserNameError] = useState(null);
-  const { openToast } = useToast({ key: 'registration-success', children: 'Registration Successful!' })
+  const { openToast } = useToast({ key: 'registration-success', children: t('RegisterForm.toast.registerSuccess') })
 
   const onHostChange = (host) => setEmailRequired(false);
   const onEmailChange = () => emailError && setEmailError(null);
@@ -64,31 +66,31 @@ const RegisterForm = ({ onSubmit }: RegisterFormProps) => {
     const errors: any = {};
 
     if (!values.userName) {
-      errors.userName = 'Required';
+      errors.userName = t('Common.validation.required');
     } else if (userNameError) {
       errors.userName = userNameError;
     }
 
     if (!values.password) {
-      errors.password = 'Required';
+      errors.password = t('Common.validation.required');
     } else if (values.password.length < 8) {
-      errors.password = 'Minimum of 8 characters required';
+      errors.password = t('Common.validation.minChars', { count: 8 });
     } else if (passwordError) {
       errors.password = passwordError;
     }
 
     if (!values.passwordConfirm) {
-      errors.passwordConfirm = 'Required';
+      errors.passwordConfirm = t('Common.validation.required');
     } else if (values.password !== values.passwordConfirm) {
-      errors.passwordConfirm = 'Passwords don\'t match'
+      errors.passwordConfirm = t('Common.validation.passwordsMustMatch');
     }
 
     if (!values.selectedHost) {
-      errors.selectedHost = 'Required';
+      errors.selectedHost = t('Common.validation.required');
     }
 
     if (emailRequired && !values.email) {
-      errors.email = 'Required';
+      errors.email = t('Common.validation.required');
     } else if (emailError) {
       errors.email = emailError;
     }
@@ -111,16 +113,22 @@ const RegisterForm = ({ onSubmit }: RegisterFormProps) => {
             <form className="RegisterForm" onSubmit={handleSubmit}>
               <div className="RegisterForm-column">
                 <div className="RegisterForm-item">
-                  <Field label="Player Name" name="userName" component={InputField} autoComplete="username" />
+                  <Field label={t('Common.label.username')} name="userName" component={InputField} autoComplete="username" />
                   <OnChange name="userName">{onUserNameChange}</OnChange>
                 </div>
                 <div className="RegisterForm-item">
-                  <Field label="Password" name="password" type="password" component={InputField} autoComplete='new-password' />
+                  <Field
+                    label={t('Common.label.password')}
+                    name="password"
+                    type="password"
+                    component={InputField}
+                    autoComplete='new-password'
+                  />
                   <OnChange name="password">{onPasswordChange}</OnChange>
                 </div>
                 <div className="RegisterForm-item">
                   <Field
-                    label="Confirm Password"
+                    label={t('Common.label.confirmPassword')}
                     name="passwordConfirm"
                     type="password"
                     component={InputField}
@@ -134,17 +142,17 @@ const RegisterForm = ({ onSubmit }: RegisterFormProps) => {
               </div>
               <div className="RegisterForm-column" >
                 <div className="RegisterForm-item">
-                  <Field label="Real Name" name="realName" component={InputField} />
+                  <Field label={t('Common.label.realName')} name="realName" component={InputField} />
                 </div>
                 <div className="RegisterForm-item">
-                  <Field label="Email" name="email" type="email" component={InputField} />
+                  <Field label={t('Common.label.email')} name="email" type="email" component={InputField} />
                   <OnChange name="email">{onEmailChange}</OnChange>
                 </div>
                 <div className="RegisterForm-item">
-                  <Field label="Country" name="country" component={CountryDropdown} />
+                  <Field label={t('Common.label.country')} name="country" component={CountryDropdown} />
                 </div>
                 <Button className="RegisterForm-submit tall" color="primary" variant="contained" type="submit">
-                  Register
+                  { t('RegisterForm.label.register') }
                 </Button>
               </div>
             </form>