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/dialogs/AccountActivationDialog/AccountActivationDialog.i18n.json

@@ -0,0 +1,7 @@
+{
+  "AccountActivationDialog": {
+    "title": "Account Activation",
+    "subtitle1": "Your account has not been activated yet.",
+    "subtitle2": "You need to provide the activation token received in the activation email."
+  }
+}

webclient/src/dialogs/AccountActivationDialog/AccountActivationDialog.tsx

@@ -5,12 +5,15 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import Typography from '@material-ui/core/Typography';
+import { useTranslation } from 'react-i18next';
 
 import { AccountActivationForm } from 'forms';
 
 import './AccountActivationDialog.css';
 
 const AccountActivationDialog = ({ classes, handleClose, isOpen, onSubmit }: any) => {
+  const { t } = useTranslation();
+
   const handleOnClose = () => {
     handleClose();
   }
@@ -18,7 +21,7 @@ const AccountActivationDialog = ({ classes, handleClose, isOpen, onSubmit }: any
   return (
     <Dialog onClose={handleOnClose} open={isOpen}>
       <DialogTitle disableTypography className="dialog-title">
-        <Typography variant="h6">Account Activation</Typography>
+        <Typography variant="h6">{ t('AccountActivationDialog.title') }</Typography>
 
         {handleOnClose ? (
           <IconButton onClick={handleOnClose}>
@@ -28,8 +31,8 @@ const AccountActivationDialog = ({ classes, handleClose, isOpen, onSubmit }: any
       </DialogTitle>
       <DialogContent>
         <div className="content">
-          <Typography variant='subtitle1'>Your account has not been activated yet.</Typography>
-          <Typography variant='subtitle1'>You need to provide the activation token received in the activation email.</Typography>
+          <Typography variant='subtitle1'>{ t('AccountActivationDialog.subtitle1') }</Typography>
+          <Typography variant='subtitle1'>{ t('AccountActivationDialog.subtitle2') }</Typography>
         </div>
 
         <AccountActivationForm onSubmit={onSubmit}></AccountActivationForm>

webclient/src/dialogs/KnownHostDialog/KnownHostDialog.i18n.json

@@ -0,0 +1,6 @@
+{
+ "KnownHostDialog": {
+    "title": "{mode, select, edit {Edit} other {Add}} Known Host",
+    "subtitle": "Adding a new host allows you to connect to different servers. Enter the details below to your host list."
+  }
+}

webclient/src/dialogs/KnownHostDialog/KnownHostDialog.tsx

@@ -7,6 +7,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import AddIcon from '@material-ui/icons/Add';
 import CloseIcon from '@material-ui/icons/Close';
 import Typography from '@material-ui/core/Typography';
+import { useTranslation } from 'react-i18next';
 
 import { KnownHostForm } from 'forms';
 
@@ -22,6 +23,9 @@ const useStyles = makeStyles(theme => ({
 
 const KnownHostDialog = ({ handleClose, onRemove, onSubmit, isOpen, host }: any) => {
   const classes = useStyles();
+  const { t } = useTranslation();
+
+  const mode = host ? 'edit' : 'add';
 
   const handleOnClose = () => {
     if (handleClose) {
@@ -33,7 +37,7 @@ const KnownHostDialog = ({ handleClose, onRemove, onSubmit, isOpen, host }: any)
     <Dialog className={'KnownHostDialog ' + classes.root} onClose={handleOnClose} open={isOpen}>
       <DialogTitle disableTypography className='dialog-title'>
         <div className='dialog-title__wrapper'>
-          <Typography variant='h2'>{ host ? 'Edit' : 'Add' } Known Host</Typography>
+          <Typography variant='h2'>{ t('KnownHostDialog.title', { mode }) }</Typography>
 
           {handleClose ? (
             <IconButton onClick={handleClose}>
@@ -44,7 +48,7 @@ const KnownHostDialog = ({ handleClose, onRemove, onSubmit, isOpen, host }: any)
       </DialogTitle>
       <DialogContent className='dialog-content'>
         <Typography className='dialog-content__subtitle' variant='subtitle1'>
-          Adding a new host allows you to connect to different servers. Enter the details below to your host list.
+          { t('KnownHostDialog.subtitle') }
         </Typography>
         <KnownHostForm onRemove={onRemove} onSubmit={onSubmit} host={host}></KnownHostForm>
       </DialogContent>

webclient/src/dialogs/RegistrationDialog/RegistrationDialog.i18n.json

@@ -0,0 +1,5 @@
+{
+  "RegistrationDialog": {
+    "title": "Create New Account"
+  }
+}

webclient/src/dialogs/RegistrationDialog/RegistrationDialog.tsx

@@ -5,12 +5,15 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import Typography from '@material-ui/core/Typography';
+import { useTranslation } from 'react-i18next';
 
 import { RegisterForm } from 'forms';
 
 import './RegistrationDialog.css';
 
 const RegistrationDialog = ({ classes, handleClose, isOpen, onSubmit }: any) => {
+  const { t } = useTranslation();
+
   const handleOnClose = () => {
     handleClose();
   }
@@ -18,7 +21,7 @@ const RegistrationDialog = ({ classes, handleClose, isOpen, onSubmit }: any) =>
   return (
     <Dialog className="RegistrationDialog" onClose={handleOnClose} open={isOpen} maxWidth='xl'>
       <DialogTitle disableTypography className="dialog-title">
-        <Typography variant="h6">Create New Account</Typography>
+        <Typography variant="h6">{ t('RegistrationDialog.title') }</Typography>
 
         {handleOnClose ? (
           <IconButton onClick={handleOnClose}>

webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.i18n.json

@@ -0,0 +1,5 @@
+{
+  "RequestPasswordResetDialog": {
+    "title": "Request Password Reset"
+  }
+}

webclient/src/dialogs/RequestPasswordResetDialog/RequestPasswordResetDialog.tsx

@@ -5,12 +5,15 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import Typography from '@material-ui/core/Typography';
+import { useTranslation } from 'react-i18next';
 
 import { RequestPasswordResetForm } from 'forms';
 
 import './RequestPasswordResetDialog.css';
 
 const RequestPasswordResetDialog = ({ classes, handleClose, isOpen, onSubmit, skipTokenRequest }: any) => {
+  const { t } = useTranslation();
+
   const handleOnClose = () => {
     handleClose();
   }
@@ -18,7 +21,7 @@ const RequestPasswordResetDialog = ({ classes, handleClose, isOpen, onSubmit, sk
   return (
     <Dialog onClose={handleOnClose} open={isOpen}>
       <DialogTitle disableTypography className="dialog-title">
-        <Typography variant="h6">Request Password Reset</Typography>
+        <Typography variant="h6">{ t('RequestPasswordResetDialog.title') }</Typography>
 
         {handleOnClose ? (
           <IconButton onClick={handleOnClose}>

webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.i18n.json

@@ -0,0 +1,5 @@
+{
+  "ResetPasswordDialog": {
+    "title": "Reset Password"
+  }
+}

webclient/src/dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx

@@ -5,12 +5,15 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import Typography from '@material-ui/core/Typography';
+import { useTranslation } from 'react-i18next';
 
 import { ResetPasswordForm } from 'forms';
 
 import './ResetPasswordDialog.css';
 
 const ResetPasswordDialog = ({ classes, handleClose, isOpen, onSubmit, userName }: any) => {
+  const { t } = useTranslation();
+
   const handleOnClose = () => {
     handleClose();
   }
@@ -18,7 +21,7 @@ const ResetPasswordDialog = ({ classes, handleClose, isOpen, onSubmit, userName
   return (
     <Dialog onClose={handleOnClose} open={isOpen}>
       <DialogTitle disableTypography className="dialog-title">
-        <Typography variant="h6">Reset Password</Typography>
+        <Typography variant="h6">{t('ResetPasswordDialog.title')}</Typography>
 
         {handleOnClose ? (
           <IconButton onClick={handleOnClose}>