feat: add i18n

Author: Angular2Guy

frontend/app/i18n/config.ts

@@ -0,0 +1,31 @@
+/*
+  - Copyright 2022 Sven Loesekann
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import translation from './en/translation.json';
+
+i18next.use(initReactI18next).init({
+  lng: 'en', // if you're using a language detector, do not define the lng option
+  debug: true,
+  resources: {
+    en: {
+      translation,
+    },
+    de: {
+        translation
+    }
+  },
+  // if you see an error like: "Argument of type 'DefaultTFuncReturn' is not assignable to parameter of type xyz"
+  // set returnNull to false (and also in the i18next.d.ts options)
+  // returnNull: false,
+});

frontend/app/i18n/de/translation.json

@@ -0,0 +1,6 @@
+{
+    "common": {
+        "ok": "OK",
+        "cancel": "Cancel"
+    }
+}

frontend/app/i18n/en/translation.json

@@ -20,6 +20,8 @@ import { useAtom } from "jotai";
 import type { FormEvent, BaseSyntheticEvent, ChangeEventHandler } from "react";
 import { postLogin, postSignin } from "~/service/http-client";
 import type { UserResponse } from "~/model/user";
+import '../i18n/config';
+import { useTranslation, Trans } from 'react-i18next';
 
 interface MsgData {
   jwtToken?: string;
@@ -51,6 +53,7 @@ function TabPanel(props: TabPanelProps) {
 }
 
 export function Login() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   let controller: AbortController | null = null;  
   const [globalUserName,setGlobalUserName] = useAtom(GlobalState.userNameState);
@@ -185,8 +188,8 @@ export function Login() {
             variant="standard"
           />
           <div>
-            <Button type="submit">Ok</Button>
-            <Button onClick={handleCancel}>Cancel</Button>
+            <Button type="submit">{t('common.ok')}</Button>
+            <Button onClick={handleCancel}>{t('common.cancel')}</Button>
           </div>
           <div className={styles.responseMsg}>
             {[responseMsg].filter(value => !!value).map((value, index) =>