From a977e2d1c3cce60b737112211f9f5b05b5422a31 Mon Sep 17 00:00:00 2001 From: Paul Bienkowski Date: Sun, 24 Jul 2022 18:19:37 +0200 Subject: [PATCH] Translate login and notfound --- frontend/src/components/FileUploadField.tsx | 2 +- frontend/src/pages/LoginRedirectPage.tsx | 110 +++++++++++--------- frontend/src/pages/NotFoundPage.js | 10 +- frontend/src/translations/de.yaml | 13 ++- frontend/src/translations/en.yaml | 13 ++- 5 files changed, 89 insertions(+), 59 deletions(-) diff --git a/frontend/src/components/FileUploadField.tsx b/frontend/src/components/FileUploadField.tsx index ace1423..4768764 100644 --- a/frontend/src/components/FileUploadField.tsx +++ b/frontend/src/components/FileUploadField.tsx @@ -82,6 +82,6 @@ export default function FileUploadField({ onSelect: onSelect_, multiple }) { )} - + ); } diff --git a/frontend/src/pages/LoginRedirectPage.tsx b/frontend/src/pages/LoginRedirectPage.tsx index 6e4ff13..4c3ead0 100644 --- a/frontend/src/pages/LoginRedirectPage.tsx +++ b/frontend/src/pages/LoginRedirectPage.tsx @@ -1,56 +1,69 @@ -import React from 'react' -import {connect} from 'react-redux' -import {Redirect, useLocation, useHistory} from 'react-router-dom' -import {Icon, Message} from 'semantic-ui-react' -import {useObservable} from 'rxjs-hooks' -import {switchMap, pluck, distinctUntilChanged} from 'rxjs/operators' +import React from "react"; +import { connect } from "react-redux"; +import { Redirect, useLocation, useHistory } from "react-router-dom"; +import { Icon, Message } from "semantic-ui-react"; +import { useObservable } from "rxjs-hooks"; +import { switchMap, pluck, distinctUntilChanged } from "rxjs/operators"; +import { useTranslation } from "react-i18next"; -import {Page} from 'components' -import api from 'api' +import { Page } from "components"; +import api from "api"; -const LoginRedirectPage = connect((state) => ({loggedIn: Boolean(state.login)}))(function LoginRedirectPage({ - loggedIn, -}) { - const location = useLocation() - const history = useHistory() - const {search} = location +const LoginRedirectPage = connect((state) => ({ + loggedIn: Boolean(state.login), +}))(function LoginRedirectPage({ loggedIn }) { + const location = useLocation(); + const history = useHistory(); + const { search } = location; + const { t } = useTranslation(); /* eslint-disable react-hooks/exhaustive-deps */ // Hook dependency arrays in this block are intentionally left blank, we want // to keep the initial state, but reset the url once, ASAP, to not leak the // query parameters. This is considered good practice by OAuth. - const searchParams = React.useMemo(() => Object.fromEntries(new URLSearchParams(search).entries()), []) + const searchParams = React.useMemo( + () => Object.fromEntries(new URLSearchParams(search).entries()), + [] + ); React.useEffect(() => { - history.replace({...location, search: ''}) - }, []) + history.replace({ ...location, search: "" }); + }, []); /* eslint-enable react-hooks/exhaustive-deps */ if (loggedIn) { - return + return ; } - const {error, error_description: errorDescription, code} = searchParams + const { error, error_description: errorDescription, code } = searchParams; if (error) { return ( - - - - - Login error - The login server reported: {errorDescription || error}. - - + + - ) + ); } - return -}) + return ; +}); -function ExchangeAuthCode({code}) { +function LoginError({ errorText }: { errorText: string }) { + const { t } = useTranslation(); + return ( + + + + {t("LoginRedirectPage.loginError")} + {t("LoginRedirectPage.loginErrorText", { error: errorText })} + + + ); +} + +function ExchangeAuthCode({ code }) { + const { t } = useTranslation(); const result = useObservable( (_$, args$) => args$.pipe( @@ -60,38 +73,31 @@ function ExchangeAuthCode({code}) { ), null, [code] - ) + ); - let content + let content; if (result === null) { content = ( - Logging you in - Hang tight... + {t("LoginRedirectPage.loggingIn")} + {t("LoginRedirectPage.hangTight")} - ) + ); } else if (result === true) { - content = + content = ; } else { - const {error, error_description: errorDescription} = result - content = ( - <> - - - - Login error - The login server reported: {errorDescription || error}. - - - 
{JSON.stringify(result, null, 2)}
- - ) + const { error, error_description: errorDescription } = result; + content = ; } - return {content} + return ( + + {content} + + ); } -export default LoginRedirectPage +export default LoginRedirectPage; diff --git a/frontend/src/pages/NotFoundPage.js b/frontend/src/pages/NotFoundPage.js index 71fa133..6e412c2 100644 --- a/frontend/src/pages/NotFoundPage.js +++ b/frontend/src/pages/NotFoundPage.js @@ -1,16 +1,18 @@ import React from 'react' import {Button, Header} from 'semantic-ui-react' import {useHistory} from 'react-router-dom' +import { useTranslation } from "react-i18next"; import {Page} from '../components' export default function NotFoundPage() { + const { t } = useTranslation(); const history = useHistory() return ( - -
Page not found
-

You know what that means...

- + +
{t('NotFoundPage.title')}
+

{t('NotFoundPage.description')}

+ ) } diff --git a/frontend/src/translations/de.yaml b/frontend/src/translations/de.yaml index 32b130c..4137cee 100644 --- a/frontend/src/translations/de.yaml +++ b/frontend/src/translations/de.yaml @@ -99,9 +99,20 @@ UploadPage: size: Größe statusTitle: Status / Titel - FileUploadField: dropOrClick: Datei hierher ziehen oder klicken, um eine zum Hochladen auszuwählen dropOrClickMultiple: Dateien hierher ziehen oder klicken, um Dateien zum Hochladen auszuwählen uploadFile: Datei hochladen uploadFiles: Dateien hochladen + +LoginRedirectPage: + loginError: Login error + loginErrorText: "The login server reported: {error}" + + loggingIn: Logging you in + hangTight: Hang tight... + +NotFoundPage: + title: Seite nicht gefunden + description: Den Fehler kennst du sicher... + goBack: Zurückgehen diff --git a/frontend/src/translations/en.yaml b/frontend/src/translations/en.yaml index 622cdeb..b3137fe 100644 --- a/frontend/src/translations/en.yaml +++ b/frontend/src/translations/en.yaml @@ -104,9 +104,20 @@ UploadPage: size: Size statusTitle: Status / Title - FileUploadField: dropOrClick: Drop file here or click to select one for upload dropOrClickMultiple: Drop files here or click to select them for upload uploadFile: Upload file uploadFiles: Upload files + +LoginRedirectPage: + loginError: Loginfehler + loginErrorText: "Der Login-Server meldet: {error}" + + loggingIn: Du wirst eingeloggt + hangTight: Bitte warten... + +NotFoundPage: + title: Page not found + description: You know what that means... + goBack: Go back