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

@ -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>