feat: add translation

Author: Angular2Guy

frontend/app/i18n/config.ts

@@ -12,10 +12,12 @@
 */
 import i18next from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
 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
+i18next.use(initReactI18next).use(LanguageDetector).init({
+  supportedLngs: ['de', 'en'],
+  fallbackLng: 'en',
   debug: true,
   resources: {
     en: {

frontend/app/i18n/en/translation.json

@@ -1,6 +1,13 @@
 {
     "common": {
         "ok": "OK",
-        "cancel": "Cancel"
+        "cancel": "Cancel",
+        "message": "Message"
+    },
+    "login": {     
+        "username": "Username",
+        "password": "Password",
+        "login": "Login",
+        "signin": "Sign In"
     }
 }

frontend/app/login/login.tsx

@@ -66,7 +66,7 @@ export function Login() {
   const [password1, setPassword1] = useState('');
   const [password2, setPassword2] = useState('');
   const [responseMsg, setResponseMsg] = useState('');
-  const [activeTab, setActiveTab] = useState(0);
+  const [activeTab, setActiveTab] = useState(0);  
 
   const handleChangeUsername: ChangeEventHandler<HTMLInputElement> = (event) => {
     setUserName(event.currentTarget.value as string);
@@ -155,8 +155,8 @@ export function Login() {
    return (<Dialog open={globalLoginModal} onClose={handleClose} className="backDrop">
     <DialogContent>
       <Tabs value={activeTab} onChange={handleTabChange} aria-label="basic tabs example">
-        <Tab label="Login" {...a11yProps(0)} />
-        <Tab label="Singin" {...a11yProps(1)} />
+        <Tab label={t('login.login')} {...a11yProps(0)} />
+        <Tab label={t('login.signin')} {...a11yProps(1)} />
       </Tabs>
       <TabPanel value={activeTab} index={0}>
         <Box
@@ -171,7 +171,7 @@ export function Login() {
             value={userName}
             onChange={handleChangeUsername}
             id="userName"
-            label="user name"
+            label={t('login.username')}
             type="string"
             fullWidth
             variant="standard"
@@ -182,7 +182,7 @@ export function Login() {
             value={password1}
             onChange={handleChangePassword1}
             id="password1"
-            label="password"
+            label={t('login.password')}
             type="password"
             fullWidth
             variant="standard"
@@ -193,7 +193,7 @@ export function Login() {
           </div>
           <div className={styles.responseMsg}>
             {[responseMsg].filter(value => !!value).map((value, index) =>
-              <span key={index}>Message: {value}</span>
+              <span key={index}>{t('common.message')}: {value}</span>
             )}
           </div>
         </Box>
@@ -211,7 +211,7 @@ export function Login() {
             value={userName}
             onChange={handleChangeUsername}
             id="userName"
-            label="user name"
+            label={t('login.username')}
             type="string"
             fullWidth
             variant="standard"
@@ -222,7 +222,7 @@ export function Login() {
             value={password1}
             onChange={handleChangePassword1}
             id="password1"
-            label="password"
+            label={t('login.password')}
             type="password"
             fullWidth
             variant="standard"
@@ -233,18 +233,18 @@ export function Login() {
             value={password2}
             onChange={handleChangePassword2}
             id="password2"
-            label="password"
+            label={t('login.password')}
             type="password"
             fullWidth
             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) =>
-              <span key={index}>Message: {value}</span>
+              <span key={index}>{t('common.message')}: {value}</span>
             )}
           </div>
         </Box>

frontend/package-lock.json

@@ -19,6 +19,7 @@
     "@mui/material": "^7.3.4",
     "@react-router/node": "^7.9.2",
     "@react-router/serve": "^7.9.2",
+    "i18next-browser-languagedetector": "^8.2.0",
     "isbot": "^5.1.31",
     "jotai": "^2.15.0",
     "nano": "^11.0.3",
@@ -35,10 +36,10 @@
     "@types/node": "^22",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
-    "tailwindcss": "^4.1.13",
     "cpy-cli": "^5.0.0",
     "mkdirp": "^3.0.0",
     "rimraf": "^5.0.0",
+    "tailwindcss": "^4.1.13",
     "typescript": "^5.9.2",
     "vite": "^7.1.11",
     "vite-tsconfig-paths": "^5.1.4"