Translate login and notfound

frontend/src/components/FileUploadField.tsx

@@ -82,6 +82,6 @@ export default function FileUploadField({ onSelect: onSelect_, multiple }) {
           </FileDrop>
         )}
       </label>
-  </>
+    </>
   );
 }

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 <Redirect to="/" />
+    return <Redirect to="/" />;
   }
 
-  const {error, error_description: errorDescription, code} = searchParams
+  const { error, error_description: errorDescription, code } = searchParams;
 
   if (error) {
     return (
-      <Page small title="Login error">
-        <Message icon error>
-          <Icon name="warning sign" />
-          <Message.Content>
-            <Message.Header>Login error</Message.Header>
-            The login server reported: {errorDescription || error}.
-          </Message.Content>
-        </Message>
+      <Page small title={t("LoginRedirectPage.loginError")}>
+        <LoginError errorText={errorDescription || error} />
       </Page>
-    )
+    );
   }
 
-  return <ExchangeAuthCode code={code} />
-})
+  return <ExchangeAuthCode code={code} />;
+});
 
-function ExchangeAuthCode({code}) {
+function LoginError({ errorText }: { errorText: string }) {
+  const { t } = useTranslation();
+  return (
+    <Message icon error>
+      <Icon name="warning sign" />
+      <Message.Content>
+        <Message.Header>{t("LoginRedirectPage.loginError")}</Message.Header>
+        {t("LoginRedirectPage.loginErrorText", { error: errorText })}
+      </Message.Content>
+    </Message>
+  );
+}
+
+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 = (
       <Message icon info>
         <Icon name="circle notched" loading />
         <Message.Content>
-          <Message.Header>Logging you in</Message.Header>
-          Hang tight...
+          <Message.Header>{t("LoginRedirectPage.loggingIn")}</Message.Header>
+          {t("LoginRedirectPage.hangTight")}
         </Message.Content>
       </Message>
-    )
+    );
   } else if (result === true) {
-    content = <Redirect to="/" />
+    content = <Redirect to="/" />;
   } else {
-    const {error, error_description: errorDescription} = result
-    content = (
-      <>
-        <Message icon error>
-          <Icon name="warning sign" />
-          <Message.Content>
-            <Message.Header>Login error</Message.Header>
-            The login server reported: {errorDescription || error}.
-          </Message.Content>
-        </Message>
-        <pre>{JSON.stringify(result, null, 2)}</pre>
-      </>
-    )
+    const { error, error_description: errorDescription } = result;
+    content = <LoginError errorText={errorDescription || error} />;
   }
 
-  return <Page small title="Login">{content}</Page>
+  return (
+    <Page small title="Login">
+      {content}
+    </Page>
+  );
 }
 
-export default LoginRedirectPage
+export default LoginRedirectPage;

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 title="Page not found">
-      <Header as="h2">Page not found</Header>
-      <p>You know what that means...</p>
-      <Button onClick={history.goBack.bind(history)}>Go back</Button>
+    <Page title={t('NotFoundPage.title')}>
+      <Header as="h2">{t('NotFoundPage.title')}</Header>
+      <p>{t('NotFoundPage.description')}</p>
+      <Button onClick={history.goBack.bind(history)}>{t('NotFoundPage.goBack')}</Button>
     </Page>
   )
 }

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

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