feat: make translation work

Author: Angular2Guy

frontend/app/i18n/config.ts

@@ -13,21 +13,25 @@
 import i18next from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
-import translation from './en/translation.json';
+import translationEn from './en/translation.json';
+import translationDe from './de/translation.json';
 
 i18next.use(initReactI18next).use(LanguageDetector).init({
   supportedLngs: ['de', 'en'],
   fallbackLng: 'en',
   debug: true,
+  interpolation: { escapeValue: false },
   resources: {
     en: {
-      translation,
+      translation: translationEn
     },
     de: {
-        translation
+        translation: translationDe
     }
   },
   // 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,
-});
+});
+
+export default i18next;

frontend/app/i18n/de/translation.json

@@ -0,0 +1,16 @@
+{
+    "common": {
+        "ok": "OK",
+        "cancel": "Abbrechen",
+        "message": "Nachricht",
+        "language": "Sprache",
+        "english": "Englisch",
+        "german": "Deutsch"
+    },
+    "login": {     
+        "username": "Benutzername",
+        "password": "Passwort",
+        "login": "Login",
+        "signin": "Registrieren"
+    }
+}

frontend/app/login/login.tsx

@@ -53,7 +53,7 @@ function TabPanel(props: TabPanelProps) {
 }
 
 export function Login() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   let controller: AbortController | null = null;  
   const [globalUserName,setGlobalUserName] = useAtom(GlobalState.userNameState);
@@ -67,6 +67,7 @@ export function Login() {
   const [password2, setPassword2] = useState('');
   const [responseMsg, setResponseMsg] = useState('');
   const [activeTab, setActiveTab] = useState(0);  
+  const [language, setLanguage] = React.useState('en');
 
   const handleChangeUsername: ChangeEventHandler<HTMLInputElement> = (event) => {
     setUserName(event.currentTarget.value as string);
@@ -152,9 +153,9 @@ export function Login() {
     };
   }
 
-  const [language, setLanguage] = React.useState('en');
   const handleLanguageChange = (event: SelectChangeEvent) => {
     setLanguage(event.target.value);
+    i18n.changeLanguage(event.target.value).then();
   };
 
    return (<Dialog open={globalLoginModal} onClose={handleClose} className="backDrop">