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/containers/Initialize/Initialize.i18n.json

@@ -0,0 +1,6 @@
+{
+  "InitializeContainer": {
+    "title": "DID YOU KNOW",
+    "subtitle": "<1>Cockatrice is run by volunteers</1><1>that love card games!</1>"
+  }
+}

webclient/src/containers/Initialize/Initialize.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useTranslation, Trans } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Redirect, withRouter } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
@@ -24,6 +25,7 @@ const useStyles = makeStyles(theme => ({
 
 const Initialize = ({ initialized }: InitializeProps) => {
   const classes = useStyles();
+  const { t } = useTranslation();
 
   return initialized
     ? <Redirect from="*" to={RouteEnum.LOGIN} />
@@ -31,9 +33,11 @@ const Initialize = ({ initialized }: InitializeProps) => {
       <div className={'Initialize ' + classes.root}>
         <div className='Initialize-content'>
           <img src={Images.Logo} alt="logo" />
-          <Typography variant="subtitle1" className='subtitle'>DID YOU KNOW</Typography>
-          <Typography variant="subtitle2">Cockatrice is run by volunteers</Typography>
-          <Typography variant="subtitle2">that love card games!</Typography>
+          <Typography variant="subtitle1" className='subtitle'>{ t('InitializeContainer.title') }</Typography>
+          <Trans i18nKey="InitializeContainer.subtitle">
+            <Typography variant="subtitle2"></Typography>
+            <Typography variant="subtitle2"></Typography>
+          </Trans>
         </div>
 
         <div className="Initialize-graphics">

webclient/src/containers/Login/Login.i18n.json

@@ -1,6 +1,22 @@
 {
   "LoginContainer": {
-    "title": "Login",
-    "subtitle": "A cross-platform virtual tabletop for multiplayer card games."
+    "header": {
+      "title": "Login",
+      "subtitle": "A cross-platform virtual tabletop for multiplayer card games."
+    },
+    "footer": {
+      "registerPrompt": "Not registered yet?",
+      "registerAction": "Create an account",
+      "credit": "Cockatrice is an open source project",
+      "version": "Version"
+    },
+    "content": {
+      "subtitle1": "Play multiplayer card games online.",
+      "subtitle2": "Cross-platform virtual tabletop for multiplayer card games. Forever free."
+    },
+    "toasts": {
+      "passwordResetSuccessToast": "Password Reset Successfully",
+      "accountActivationSuccess": "Account Activated Successfully"
+    }
   }
 }

webclient/src/containers/Login/Login.tsx

@@ -72,8 +72,11 @@ const Login = ({ state, description, connectOptions }: LoginProps) => {
   });
   const [userToResetPassword, setUserToResetPassword] = useState(null);
 
-  const passwordResetToast = useToast({ key: 'password-reset-success', children: 'Password Reset Successfully' })
-  const accountActivatedToast = useToast({ key: 'account-activation-success', children: 'Account Activated Successfully' })
+  const passwordResetToast = useToast({ key: 'password-reset-success', children: t('LoginContainer.toasts.passwordResetSuccess') });
+  const accountActivatedToast = useToast({
+    key: 'account-activation-success',
+    children: t('LoginContainer.toasts.accountActivationSuccess')
+  });
 
   useReduxEffect(() => {
     closeRequestPasswordResetDialog();
@@ -227,8 +230,8 @@ const Login = ({ state, description, connectOptions }: LoginProps) => {
               <img src={Images.Logo} alt="logo" />
               <span>COCKATRICE</span>
             </div>
-            <Typography variant="h1">{ t('LoginContainer.title') }</Typography>
-            <Typography variant="subtitle1">{ t('LoginContainer.subtitle') }</Typography>
+            <Typography variant="h1">{ t('LoginContainer.header.title') }</Typography>
+            <Typography variant="subtitle1">{ t('LoginContainer.header.subtitle') }</Typography>
             <div className="login-form">
               <LoginForm
                 onSubmit={handleLogin}
@@ -247,17 +250,17 @@ const Login = ({ state, description, connectOptions }: LoginProps) => {
 
             <div className="login-footer">
               <div className="login-footer__register">
-                <span>Not registered yet?</span>
-                <Button color="primary" onClick={openRegistrationDialog}>Create an account</Button>
+                <span>{ t('LoginContainer.footer.registerPrompt') }</span>
+                <Button color="primary" onClick={openRegistrationDialog}>{ t('LoginContainer.footer.registerAction') }</Button>
               </div>
               <Typography variant="subtitle2">
-                Cockatrice is an open source project. { new Date().getUTCFullYear() }
+                { t('LoginContainer.footer.credit') } - { new Date().getUTCFullYear() }
               </Typography>
 
               {
                 serverProps.REACT_APP_VERSION && (
                   <Typography variant="subtitle2">
-                    Version: { serverProps.REACT_APP_VERSION }
+                    { t('LoginContainer.footer.version') }: { serverProps.REACT_APP_VERSION }
                   </Typography>
                 )
               }
@@ -298,10 +301,8 @@ const Login = ({ state, description, connectOptions }: LoginProps) => {
                 </div>
               </div>
               { /*<img src={loginGraphic} className="login-content__description-image"/>*/}
-              <p className="login-content__description-subtitle1">Play multiplayer card games online.</p>
-              <p className="login-content__description-subtitle2">
-                Cross-platform virtual tabletop for multiplayer card games. Forever free.
-              </p>
+              <p className="login-content__description-subtitle1">{ t('LoginContainer.content.subtitle1') }</p>
+              <p className="login-content__description-subtitle2">{ t('LoginContainer.content.subtitle2') }</p>
             </div>
           </div>
         </Paper>

webclient/src/containers/Unsupported/Unsupported.i18n.json

@@ -0,0 +1,7 @@
+{
+  "UnsupportedContainer": {
+    "title": "Unsupported Browser",
+    "subtitle1": "Please update your browser and/or check your permissions.",
+    "subtitle2": "Note: Private browsing causes some browsers to disable certain permissions or features."
+  }
+}

webclient/src/containers/Unsupported/Unsupported.tsx

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { useTranslation } from 'react-i18next';
 import { withRouter } from 'react-router-dom';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
@@ -6,15 +7,17 @@ import Typography from '@material-ui/core/Typography';
 import './Unsupported.css';
 
 const Unsupported = () => {
+  const { t } = useTranslation();
+
   return (
     <div className='Unsupported'>
       <Paper className='Unsupported-paper'>
         <div className='Unsupported-paper__header'>
-          <Typography variant="h1">Unsupported Browser</Typography>
-          <Typography variant="subtitle1">Please update your browser and/or check your permissions.</Typography>
+          <Typography variant="h1">{ t('UnsupportedContainer.title') }</Typography>
+          <Typography variant="subtitle1">{ t('UnsupportedContainer.subtitle1') }</Typography>
         </div>
 
-        <Typography variant="subtitle2">Note: Private browsing causes some browsers to disable certain permissions or features.</Typography>
+        <Typography variant="subtitle2">{ t('UnsupportedContainer.subtitle2') }</Typography>
       </Paper>
     </div>
   );