From c27c36f13421c109abcd45488cb4e1a4468bccca Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Thu, 7 Nov 2024 22:20:28 +0100
Subject: [PATCH 01/14] feat: Added translations for landing page

---
 web/app/layout.tsx                      |  47 +++++----
 web/app/page.tsx                        |  14 +--
 web/i18n.ts                             |  27 +++++
 web/package-lock.json                   | 125 ++++++++++++++++++++++++
 web/package.json                        |   4 +
 web/public/locales/de/landing-page.json |  15 +++
 web/public/locales/en/landing-page.json |  15 +++
 7 files changed, 221 insertions(+), 26 deletions(-)
 create mode 100644 web/i18n.ts
 create mode 100644 web/public/locales/de/landing-page.json
 create mode 100644 web/public/locales/en/landing-page.json

diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index df0af089..b6ad5fc0 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -21,6 +21,8 @@ import Footer from "@/components/Footer";
 import { publicRoutes } from "@/static/routes";
 import Stage2SpotlightContextWrapper from "@/components/spotlight/Stage2SpotlightContextWrapper";
 import {Stage2Type} from "@/hooks/spotlight/stage2";
+import i18n from "../i18n"
+import CentralLoading from "@/components/CentralLoading";
 
 export default function RootLayout({
   children,
@@ -28,6 +30,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
   const pathname = usePathname();
   const showNavbar = useMemo(
     () => publicRoutes.indexOf(pathname) === -1,
@@ -51,6 +54,8 @@ export default function RootLayout({
         console.error(e);
       }
     }
+    i18n.init();
+    setLoading(false);
   }, []);
 
   return (
@@ -67,25 +72,29 @@ export default function RootLayout({
     <CurrentUserContext.Provider value={{ user, setUser }}>
           <MantineProvider theme={{}}>
             <DatesProvider settings={{ timezone: null }}>
-              <Stage2SpotlightContextWrapper>
-                <Notifications />
-                <AppShell
-                    header={{ height: 100 }}
-                    navbar={showNavbar ? { width: 250, breakpoint: "" } : undefined}
-                >
-                  <AppShell.Header>
-                    <Header />
-                  </AppShell.Header>
-                  {showNavbar && (
-                      <AppShell.Navbar>
-                        <Navbar />
-                      </AppShell.Navbar>
-                  )}
-                  <AppShell.Main mb={100}>{children}</AppShell.Main>
-                  <AppShell.Footer><Footer /></AppShell.Footer>
-                </AppShell>
-                <SpotlightWrapper />
-              </Stage2SpotlightContextWrapper>
+              {loading ? (
+                  <CentralLoading />
+              ) : (
+                  <Stage2SpotlightContextWrapper>
+                    <Notifications />
+                    <AppShell
+                        header={{ height: 100 }}
+                        navbar={showNavbar ? { width: 250, breakpoint: "" } : undefined}
+                    >
+                      <AppShell.Header>
+                        <Header />
+                      </AppShell.Header>
+                      {showNavbar && (
+                          <AppShell.Navbar>
+                            <Navbar />
+                          </AppShell.Navbar>
+                      )}
+                      <AppShell.Main mb={100}>{children}</AppShell.Main>
+                      <AppShell.Footer><Footer /></AppShell.Footer>
+                    </AppShell>
+                    <SpotlightWrapper />
+                  </Stage2SpotlightContextWrapper>
+              )}
             </DatesProvider>
           </MantineProvider>
         </CurrentUserContext.Provider>
diff --git a/web/app/page.tsx b/web/app/page.tsx
index f964c446..4c2626f6 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -4,22 +4,22 @@ import { Image, Container, Title, Button, Group, Text, List, ThemeIcon, rem } fr
 import { IconCheck } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import useCurrentUser from "@/hooks/useCurrentUser";
+import { useTranslation } from 'react-i18next';
 
 export default function Home() {
 
     const router = useRouter();
     const currentUser = useCurrentUser();
-
+    const { t } = useTranslation('landing-page');
   return (
       <Container size="md">
           <div className={classes.inner}>
               <div className={classes.content}>
                   <Title className={classes.title}>
-                      A <span className={classes.highlight}>modern</span> platform <br /> to practise coding
+                      {t('a')} <span className={classes.highlight}>{t('modern')}</span> {t('platform')} <br /> {t('title')}
                   </Title>
                   <Text c="dimmed" mt="md">
-                      Built to provide an universal application for tutors and students to manage coding assignments. It is an easy and
-                      practical way to practise coding and patterns for exams and tests.
+                      {t('subtitle')}
                   </Text>
 
                   <List
@@ -33,13 +33,13 @@ export default function Home() {
                       }
                   >
                       <List.Item>
-                          <b>Question assignments</b> – Besides coding assignments, you can also create assignments with questions that can be answered.
+                          <b>{t('question-assignments')}</b> – {t('questions-text')}
                       </List.Item>
                       <List.Item>
-                          <b>Free and open source</b> – The project is community driven and can be used for free. Everyone can view the source code.
+                          <b>{t('free-open-source')}</b> – {t('free-text')}
                       </List.Item>
                       <List.Item>
-                          <b>Code testing</b> – Tutors can create code tests to validate if the code works as expected.
+                          <b>{t('code-testing')}</b> – {t('test-text')}
                       </List.Item>
                   </List>
 
diff --git a/web/i18n.ts b/web/i18n.ts
new file mode 100644
index 00000000..2835f196
--- /dev/null
+++ b/web/i18n.ts
@@ -0,0 +1,27 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import HttpApi from 'i18next-http-backend';
+
+i18n
+    .use(HttpApi)
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+        supportedLngs: ['en', 'de'],
+        fallbackLng: 'en',
+        ns: ['landing-page'],
+        defaultNS: 'common',
+        backend: {
+            loadPath: '/locales/{{lng}}/{{ns}}.json'
+        },
+        detection: {
+            order: ['querystring', 'cookie', 'localStorage', 'navigator'],
+            caches: ['cookie'],
+        },
+        interpolation: {
+            escapeValue: false
+        }
+    });
+
+export default i18n;
diff --git a/web/package-lock.json b/web/package-lock.json
index 10349de7..4f844463 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -38,11 +38,15 @@
         "@tiptap/starter-kit": "^2.6.6",
         "dayjs": "^1.11.13",
         "embla-carousel-react": "^8.3.0",
+        "i18next": "^23.16.4",
+        "i18next-browser-languagedetector": "^8.0.0",
+        "i18next-http-backend": "^2.6.2",
         "lowlight": "^3.1.0",
         "next": "14.2.11",
         "react": "^18",
         "react-cookie": "^7.2.0",
         "react-dom": "^18",
+        "react-i18next": "^15.1.1",
         "recharts": "^2.12.7",
         "sass": "^1.79.4"
       },
@@ -2015,6 +2019,14 @@
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
       "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
     },
+    "node_modules/cross-fetch": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
+      "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -3523,6 +3535,52 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "23.16.4",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.4.tgz",
+      "integrity": "sha512-9NIYBVy9cs4wIqzurf7nLXPyf3R78xYbxExVqHLK9od3038rjpyOEzW+XB130kZ1N4PZ9inTtJ471CRJ4Ituyg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz",
+      "integrity": "sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-http-backend": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.6.2.tgz",
+      "integrity": "sha512-Hp/kd8/VuoxIHmxsknJXjkTYYHzivAyAF15pzliKzk2TiXC25rZCEerb1pUFoxz4IVrG3fCvQSY51/Lu4ECV4A==",
+      "dependencies": {
+        "cross-fetch": "4.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4401,6 +4459,25 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5117,6 +5194,27 @@
         "react": ">= 16.8 || 18.0.0"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.1.1.tgz",
+      "integrity": "sha512-R/Vg9wIli2P3FfeI8o1eNJUJue5LWpFsQePCHdQDmX0Co3zkr6kdT8gAseb/yGeWbNz1Txc4bKDQuZYsC0kQfw==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5943,6 +6041,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -6239,11 +6342,33 @@
         "d3-timer": "^3.0.1"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/web/package.json b/web/package.json
index b1bc259d..f4e89bd0 100644
--- a/web/package.json
+++ b/web/package.json
@@ -39,11 +39,15 @@
     "@tiptap/starter-kit": "^2.6.6",
     "dayjs": "^1.11.13",
     "embla-carousel-react": "^8.3.0",
+    "i18next": "^23.16.4",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.6.2",
     "lowlight": "^3.1.0",
     "next": "14.2.11",
     "react": "^18",
     "react-cookie": "^7.2.0",
     "react-dom": "^18",
+    "react-i18next": "^15.1.1",
     "recharts": "^2.12.7",
     "sass": "^1.79.4"
   },
diff --git a/web/public/locales/de/landing-page.json b/web/public/locales/de/landing-page.json
new file mode 100644
index 00000000..862ab1c7
--- /dev/null
+++ b/web/public/locales/de/landing-page.json
@@ -0,0 +1,15 @@
+{
+  "a": "Eine",
+  "modern": "moderne",
+  "platform": "Plattform",
+  "title": "zum Programmieren üben",
+  "subtitle": "Entwickelt, um eine universelle Anwendung für Tutoren und Studierende zur Verwaltung von Programmieraufgaben bereitzustellen. Es ist eine einfache und praktische Möglichkeit, Programmieren und Muster für Prüfungen und Tests zu üben.",
+  "question-assignments": "Fragenbasierte Aufgaben",
+  "free-open-source": "Frei und Quelloffen",
+  "code-testing": "Code Tests",
+  "questions-text": "Neben Programmieraufgaben, können auch Aufgaben mit Fragen erstellt werden",
+  "free-text": "Das Projekt ist community-basiert und kann kostenlos genutzt werden. Jeder kann den Quellcode einsehen.",
+  "test-text": "Tutoren können Code-Tests erstellen, um zu überprüfen, ob der eingereichte Code wie erwartet funktioniert.",
+  "dashboard": "Dashboard",
+  "source-code": "Quellcode"
+}
diff --git a/web/public/locales/en/landing-page.json b/web/public/locales/en/landing-page.json
new file mode 100644
index 00000000..381afc6b
--- /dev/null
+++ b/web/public/locales/en/landing-page.json
@@ -0,0 +1,15 @@
+{
+  "a": "A",
+  "modern": "modern",
+  "platform": "platform",
+  "title": "to practise coding",
+  "subtitle": "Built to provide an universal application for tutors and students to manage coding assignments. It is an easy and practical way to practise coding and patterns for exams and tests.",
+  "question-assignments": "Question assignments",
+  "free-open-source": "Free and open source",
+  "code-testing": "Code testing",
+  "questions-text": "Besides coding assignments, you can also create assignments with questions that can be answered.",
+  "free-text": "The project is community driven and can be used for free. Everyone can view the source code.",
+  "test-text": "Tutors can create code tests to validate if the code works as expected.",
+  "dashboard": "Dashboard",
+  "source-code": "Source code"
+}

From d8c2c4d90767f6433d518789c8f403d16b0d42ef Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Thu, 7 Nov 2024 22:27:49 +0100
Subject: [PATCH 02/14] feat: Added translations for dashboard

---
 web/app/dashboard/page.tsx           | 13 ++++++-------
 web/public/locales/en/dashboard.json |  6 ++++++
 2 files changed, 12 insertions(+), 7 deletions(-)
 create mode 100644 web/public/locales/en/dashboard.json

diff --git a/web/app/dashboard/page.tsx b/web/app/dashboard/page.tsx
index 71d63ecd..f1fe18ce 100644
--- a/web/app/dashboard/page.tsx
+++ b/web/app/dashboard/page.tsx
@@ -2,22 +2,22 @@
 import useCurrentUser from "@/hooks/useCurrentUser";
 import {Container, Title, Text, Card, Grid, Group, Flex} from "@mantine/core";
 import {IconTrophyFilled} from "@tabler/icons-react";
+import {useTranslation} from "react-i18next";
 
 const DashboardPage = () => {
   const { user } = useCurrentUser();
+  const {t} = useTranslation('dashboard');
 
   return (
     <Container fluid>
-      <Title>Welcome back, {user?.username}!</Title>
+      <Title>{t('welcome-back')} {user?.username}!</Title>
         <Card
             shadow="sm"
             padding="xl"
             mt={20}
         >
             <Text mt="xs" c="dimmed" size="sm">
-                Hey, its us again. Please be aware of that this software is totally free to use for you. We do not store
-                any personal data except from your username and password. Nevertheless, we have to pay our fees, for domains
-                and server hosting. So if you want, feel free to support us, because developing this application takes a lot of time.
+                {t('us-again-text')}
             </Text>
         </Card>
         <Grid>
@@ -30,9 +30,8 @@ const DashboardPage = () => {
                     <Group justify="space-between">
                         <IconTrophyFilled color="#bfba40" size={100} />
                         <Flex direction="column">
-                            <Title order={5}>Oleggtro: contributor of year!</Title>
-                            <Text>Throughout the year, Oleggtro has gone above and beyond, consistently sharing insights, knowledge, and support with our community. His dedication and contributions have made a significant impact, enriching our platform and setting a high standard for collaboration.
-                                Thank you, Oleggtro, for your hard work, passion, and unwavering commitment. We are incredibly grateful to have you as part of our team! Here’s to many more achievements together.</Text>
+                            <Title order={5}>{t('ole-title')}</Title>
+                            <Text>{t('ole-text')}</Text>
                         </Flex>
                     </Group>
                 </Card>
diff --git a/web/public/locales/en/dashboard.json b/web/public/locales/en/dashboard.json
new file mode 100644
index 00000000..571600b2
--- /dev/null
+++ b/web/public/locales/en/dashboard.json
@@ -0,0 +1,6 @@
+{
+  "welcome-back": "Welcome back,",
+  "us-again-text": "Hey, its us again. Please be aware of that this software is totally free to use for you. We do not store any personal data except from your username and password. Nevertheless, we have to pay our fees, for domains and server hosting. So if you want, feel free to support us, because developing this application takes a lot of time.",
+  "ole-title": "Oleggtro: contributor of year!",
+  "ole-text": "Throughout the year, Oleggtro has gone above and beyond, consistently sharing insights, knowledge, and support with our community. His dedication and contributions have made a significant impact, enriching our platform and setting a high standard for collaboration. Thank you, Oleggtro, for your hard work, passion, and unwavering commitment. We are incredibly grateful to have you as part of our team! Here’s to many more achievements together."
+}

From 57de1fcb36dc1462fde42cf756b9f634928c7d19 Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Thu, 7 Nov 2024 22:47:27 +0100
Subject: [PATCH 03/14] feat: Added translations for group and assignment pages
 in app folder

---
 .../assignments/[assignmentId]/page.tsx       | 18 +++++++------
 web/app/groups/[groupId]/client.tsx           | 26 ++++++++++++-------
 web/app/groups/[groupId]/page.tsx             |  4 ++-
 web/app/groups/displayComponent.tsx           | 18 +++++++------
 web/app/groups/page.tsx                       |  4 ++-
 web/i18n.ts                                   |  1 -
 web/public/locales/en/assignment.json         |  7 +++++
 web/public/locales/en/common.json             | 12 +++++++++
 web/public/locales/en/group.json              | 21 +++++++++++++++
 9 files changed, 82 insertions(+), 29 deletions(-)
 create mode 100644 web/public/locales/en/assignment.json
 create mode 100644 web/public/locales/en/common.json
 create mode 100644 web/public/locales/en/group.json

diff --git a/web/app/groups/[groupId]/assignments/[assignmentId]/page.tsx b/web/app/groups/[groupId]/assignments/[assignmentId]/page.tsx
index 42bfa40d..9dbb5abf 100644
--- a/web/app/groups/[groupId]/assignments/[assignmentId]/page.tsx
+++ b/web/app/groups/[groupId]/assignments/[assignmentId]/page.tsx
@@ -19,6 +19,7 @@ import AssignmentCompletedByTab from "@/components/assignments/AssignmentComplet
 import CreateOrUpdateQuestionsModal from "@/components/assignments/CreateOrUpdateQuestionsModal";
 import QuestionAnswersDisplay from "@/components/solution/questions/QuestionAnswersDisplay";
 import { useSpotlightStage2 } from "@/hooks/spotlight/stage2";
+import {useTranslation} from "react-i18next";
 
 const AssignmentDetailsPage = ({
   params,
@@ -36,6 +37,7 @@ const AssignmentDetailsPage = ({
     () => api.getAssignmentForGroup(groupId, assignmentId),
     [assignmentId, groupId],
   );
+  const {t} = useTranslation(['common', 'assignment']);
 
   const {addAssignment} = useSpotlightStage2();
 
@@ -48,7 +50,7 @@ const AssignmentDetailsPage = ({
   if (isNaN(groupId) || isNaN(assignmentId)) {
     return (
       <Container fluid>
-        <Title>Invalid Group ID</Title>
+        <Title>{t('invalid-group-id')}</Title>
       </Container>
     );
   }
@@ -70,33 +72,33 @@ const AssignmentDetailsPage = ({
         {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) &&
           assignment.language !== AssignmentLanguage.QuestionBased && (
             <Button onClick={() => setFileStructureModalOpen(true)}>
-              Code tests
+              {t('code-tests')}
             </Button>
           )}
         {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) &&
           assignment.language === AssignmentLanguage.QuestionBased && (
             <Button onClick={() => setQuestionsModalOpen(true)}>
-              Questions
+              {t('questions')}
             </Button>
           )}
       </Group>
       <Tabs defaultValue="task">
         <Tabs.List>
-          <Tabs.Tab value="task">Task</Tabs.Tab>
+          <Tabs.Tab value="task">{t('task')}</Tabs.Tab>
           {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) &&
             assignment.file_structure !== null &&
             assignment.language !== AssignmentLanguage.QuestionBased && (
-              <Tabs.Tab value="codeTests">Code Tests</Tabs.Tab>
+              <Tabs.Tab value="codeTests">{t('code-tests')}</Tabs.Tab>
             )}
           {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) &&
             assignment.question_catalogue !== null &&
             assignment.language === AssignmentLanguage.QuestionBased && (
-              <Tabs.Tab value="questions">Questions</Tabs.Tab>
+              <Tabs.Tab value="questions">{t('questions')}</Tabs.Tab>
             )}
           {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) && (
             <>
-              <Tabs.Tab value="solutions">Solutions</Tabs.Tab>
-              <Tabs.Tab value="completedBy">Completed by</Tabs.Tab>
+              <Tabs.Tab value="solutions">{t('solutions')}</Tabs.Tab>
+              <Tabs.Tab value="completedBy">{t('completed-by')}</Tabs.Tab>
             </>
           )}
         </Tabs.List>
diff --git a/web/app/groups/[groupId]/client.tsx b/web/app/groups/[groupId]/client.tsx
index 5825a9ed..3224af36 100644
--- a/web/app/groups/[groupId]/client.tsx
+++ b/web/app/groups/[groupId]/client.tsx
@@ -17,16 +17,20 @@ import GroupAssignmentsTab from "@/components/assignments/GroupAssignmentsTab";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { isGranted } from "@/service/auth";
 import GroupAssignmentWishesTab from "@/components/group/GroupAssignmentWishesTab";
+import {useTranslation} from "react-i18next";
 
 const MembersComponent: React.FC<{ members: TaskyUser[] }> = ({ members }) => {
+
+  const {t} = useTranslation('common');
+
   const cols: EntityListCol[] = [
     {
       field: "id",
-      label: "ID",
+      label: t('cols.id'),
     },
     {
       field: "username",
-      label: "Username",
+      label: t('cols.username'),
     },
   ];
 
@@ -43,22 +47,23 @@ export const JoinRequestsComponent: React.FC<{
     () => api.getGroupJoinRequests(group?.id ?? -1, page),
     [group?.id, page],
   );
+  const {t} = useTranslation('common');
 
   const cols: EntityListCol[] = [
     {
       field: "id",
-      label: "ID",
+      label: t('cols.id'),
     },
     {
       field: "username",
-      label: "Username",
+      label: t('cols.username'),
       getter: (row) => row.requestor.username,
     },
   ];
 
   const actions: EntityListRowAction[] = [
     {
-      name: "Approve",
+      name: t('actions.approve'),
       color: "green",
       onClick: (row) =>
         api.approveGroupJoinRequest(row.group_id, row.id).then(() => {
@@ -68,7 +73,7 @@ export const JoinRequestsComponent: React.FC<{
       auth: [UserRoles.Tutor, UserRoles.Admin],
     },
     {
-      name: "Reject",
+      name: t('actions.reject'),
       color: "red",
       onClick: (row) =>
         api.rejectGroupJoinRequest(row.group_id, row.id).then(() => {
@@ -96,13 +101,14 @@ export const TabsComponent: React.FC<{
   refetch: () => void;
 }> = ({ group, refetch }) => {
   const { user } = useCurrentUser();
+  const {t} = useTranslation('group');
 
   return (
     <Tabs defaultValue="assignments" style={{ marginTop: "2em" }}>
       <Tabs.List>
-        <Tabs.Tab value="assignments">Assignments</Tabs.Tab>
-        <Tabs.Tab value="members">Members</Tabs.Tab>
-        <Tabs.Tab value="assignmentWishes">Assignment Wishes</Tabs.Tab>
+        <Tabs.Tab value="assignments">{t('tabs.assignments')}</Tabs.Tab>
+        <Tabs.Tab value="members">{t('tabs.members')}</Tabs.Tab>
+        <Tabs.Tab value="assignmentWishes">{t('tabs.assignment-wishes')}</Tabs.Tab>
         {isGranted(user, [UserRoles.Admin, UserRoles.Tutor]) && (
           <Tabs.Tab
             value="joinRequests"
@@ -112,7 +118,7 @@ export const TabsComponent: React.FC<{
               ) : null
             }
           >
-            Join Requests
+            {t('tabs.join-requests')}
           </Tabs.Tab>
         )}
       </Tabs.List>
diff --git a/web/app/groups/[groupId]/page.tsx b/web/app/groups/[groupId]/page.tsx
index fd70ad20..f6d56d6f 100644
--- a/web/app/groups/[groupId]/page.tsx
+++ b/web/app/groups/[groupId]/page.tsx
@@ -7,12 +7,14 @@ import useApiServiceClient from "@/hooks/useApiServiceClient";
 import CentralLoading from "@/components/CentralLoading";
 import {useSpotlightStage2} from "@/hooks/spotlight/stage2";
 import {useEffect} from "react";
+import {useTranslation} from "react-i18next";
 
 const GroupDetailsPage = ({ params }: { params: { groupId: string } }) => {
   const id = parseInt(`${params.groupId}`, 10);
   const api = useApiServiceClient();
   const [group, refetch] = useClientQuery<GroupType>(() => api.getGroup(id));
   const {addGroup} = useSpotlightStage2();
+  const {t} = useTranslation('common');
 
   useEffect(() => {
     if (group) {
@@ -23,7 +25,7 @@ const GroupDetailsPage = ({ params }: { params: { groupId: string } }) => {
   if (isNaN(id)) {
     return (
       <Container fluid>
-        <Title>Invalid Group ID</Title>
+        <Title>{t('invalid-group-id')}</Title>
       </Container>
     );
   }
diff --git a/web/app/groups/displayComponent.tsx b/web/app/groups/displayComponent.tsx
index ecc6f7a4..44f20984 100644
--- a/web/app/groups/displayComponent.tsx
+++ b/web/app/groups/displayComponent.tsx
@@ -10,6 +10,7 @@ import useApiServiceClient from "@/hooks/useApiServiceClient";
 import { notifications } from "@mantine/notifications";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { isGranted } from "@/service/auth";
+import {useTranslation} from "react-i18next";
 
 interface DisplayComponentProps {
   groups: MinifiedGroup[];
@@ -23,22 +24,23 @@ const GroupsDisplayComponent = ({
   refetch,
 }: DisplayComponentProps) => {
   const router = useRouter();
+  const {t} = useTranslation(['common', 'group']);
   const cols: EntityListCol[] = [
     {
       field: "id",
-      label: "ID",
+      label: t('cols.id'),
     },
     {
       field: "title",
-      label: "Title",
+      label: t('cols.title'),
     },
     {
       field: "member_count",
-      label: "Members Count",
+      label: t('cols.members-count'),
     },
     {
       field: "tutor",
-      label: "Tutor",
+      label: t('cols.tutor'),
       getter: (row) => row.tutor.username,
     },
   ];
@@ -48,7 +50,7 @@ const GroupsDisplayComponent = ({
   const actions: EntityListRowAction[] = [
     {
       color: "blue",
-      name: "View",
+      name: t('actions.view'),
       onClick: (row) => router.push(`/groups/${row.id}`),
       auth: [UserRoles.Admin, UserRoles.Tutor, UserRoles.Student],
       authFunc: (row) =>
@@ -58,12 +60,12 @@ const GroupsDisplayComponent = ({
     },
     {
       color: "blue",
-      name: "Request Join",
+      name: t('actions.request-join'),
       onClick: (row) =>
         api.createGroupJoinRequest(row.id).then(() => {
           notifications.show({
-            title: "Join Request created",
-            message: "Created join request on group " + row.title,
+            title: t('messages.join-request-created-title'),
+            message: t('messages.join-request-created-text') + row.title,
           });
           if (refetch) refetch();
         }),
diff --git a/web/app/groups/page.tsx b/web/app/groups/page.tsx
index f18057dc..931b7f96 100644
--- a/web/app/groups/page.tsx
+++ b/web/app/groups/page.tsx
@@ -5,6 +5,7 @@ import GroupsDisplayComponent from "@/app/groups/displayComponent";
 import useApiServiceClient from "@/hooks/useApiServiceClient";
 import useClientQuery from "@/hooks/useClientQuery";
 import {useState} from "react";
+import {useTranslation} from "react-i18next";
 
 const GroupsPage = () => {
   const api = useApiServiceClient();
@@ -12,10 +13,11 @@ const GroupsPage = () => {
   const [groups, refetch] = useClientQuery<GroupsResponse>(() =>
     api.getGroups(page),
   [page]);
+  const {t} = useTranslation('groups');
 
   return (
     <Container fluid>
-      <Title>Groups</Title>
+      <Title>{t('groups')}</Title>
       <GroupsDisplayComponent
         groups={groups?.groups ?? []}
         page="groups"
diff --git a/web/i18n.ts b/web/i18n.ts
index 2835f196..c51b45bc 100644
--- a/web/i18n.ts
+++ b/web/i18n.ts
@@ -10,7 +10,6 @@ i18n
     .init({
         supportedLngs: ['en', 'de'],
         fallbackLng: 'en',
-        ns: ['landing-page'],
         defaultNS: 'common',
         backend: {
             loadPath: '/locales/{{lng}}/{{ns}}.json'
diff --git a/web/public/locales/en/assignment.json b/web/public/locales/en/assignment.json
new file mode 100644
index 00000000..07aa80a1
--- /dev/null
+++ b/web/public/locales/en/assignment.json
@@ -0,0 +1,7 @@
+{
+  "questions": "Questions",
+  "task": "Task",
+  "code-tests": "Code tests",
+  "solutions": "Solutions",
+  "completed-by": "Completed by"
+}
diff --git a/web/public/locales/en/common.json b/web/public/locales/en/common.json
new file mode 100644
index 00000000..f4646f53
--- /dev/null
+++ b/web/public/locales/en/common.json
@@ -0,0 +1,12 @@
+{
+  "invalid-group-id": "Invalid group ID",
+  "cols": {
+    "id": "ID",
+    "username": "Username"
+  },
+  "actions": {
+    "approve": "Approve",
+    "reject": "Reject",
+    "view": "View"
+  }
+}
diff --git a/web/public/locales/en/group.json b/web/public/locales/en/group.json
new file mode 100644
index 00000000..786d83c5
--- /dev/null
+++ b/web/public/locales/en/group.json
@@ -0,0 +1,21 @@
+{
+  "groups": "Groups",
+  "tabs": {
+    "assignments": "Assignments",
+    "members": "Members",
+    "assignment-wishes": "Assignment wishes",
+    "join-requests": "Join requests"
+  },
+  "cols": {
+    "title": "Title",
+    "members-count": "Members count",
+    "tutor": "Tutor"
+  },
+  "actions": {
+    "request-join": "Request Join"
+  },
+  "messages": {
+    "join-request-created-title": "Join Request created",
+    "join-request-created-text": "Created join request on group "
+  }
+}

From 9dd1901a1d8ea1e0675b8feacb29a758db00bc6a Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Thu, 7 Nov 2024 23:04:52 +0100
Subject: [PATCH 04/14] feat: Added some extra translations for components
 (pages) in app directory

---
 web/app/login/page.tsx            | 16 ++++++++-------
 web/app/my-groups/page.tsx        |  6 ++++--
 web/app/register/page.tsx         | 20 ++++++++++---------
 web/app/report-bug/page.tsx       | 18 +++++++++--------
 web/app/settings/page.tsx         |  4 +++-
 web/app/students/page.tsx         |  8 +++++---
 web/app/tutors/page.tsx           | 10 ++++++----
 web/public/locales/en/common.json | 33 ++++++++++++++++++++++++++++++-
 web/public/locales/en/group.json  |  4 +++-
 9 files changed, 83 insertions(+), 36 deletions(-)

diff --git a/web/app/login/page.tsx b/web/app/login/page.tsx
index d28532ee..2dee05b6 100644
--- a/web/app/login/page.tsx
+++ b/web/app/login/page.tsx
@@ -15,6 +15,7 @@ import ApiError from "@/service/types/error";
 import { useRouter } from "next/navigation";
 import { notifications } from "@mantine/notifications";
 import useApiServiceClient from "@/hooks/useApiServiceClient";
+import {useTranslation} from "react-i18next";
 
 interface LoginInput {
   name: string;
@@ -24,6 +25,7 @@ interface LoginInput {
 const LoginPage = () => {
   const api = useApiServiceClient();
   const router = useRouter();
+  const {t} = useTranslation('common');
 
   const form = useForm({
     initialValues: {
@@ -39,7 +41,7 @@ const LoginPage = () => {
     } catch (e) {
       if (e instanceof ApiError) {
         notifications.show({
-          title: "Login failed",
+          title: t('login-failed'),
           message: e.message,
           color: "red",
         });
@@ -51,7 +53,7 @@ const LoginPage = () => {
     <Container>
       <Paper radius="md" p="xl" withBorder>
         <Text size="lg" fw={500}>
-          Login to CodeCanvas
+          {t('login-to-cc')}
         </Text>
 
         <Divider />
@@ -60,8 +62,8 @@ const LoginPage = () => {
           <Stack>
             <TextInput
               required
-              label="Username"
-              placeholder="Your username"
+              label={t('fields.username')}
+              placeholder={t('fields.username-placeholder')}
               value={form.values.name}
               onChange={(event) =>
                 form.setFieldValue("name", event.currentTarget.value)
@@ -71,8 +73,8 @@ const LoginPage = () => {
 
             <PasswordInput
               required
-              label="Password"
-              placeholder="Your password"
+              label={t('fields.password')}
+              placeholder={t('fields.password-placeholder')}
               value={form.values.password}
               onChange={(event) =>
                 form.setFieldValue("password", event.currentTarget.value)
@@ -83,7 +85,7 @@ const LoginPage = () => {
 
           <Group justify="space-between" mt="xl">
             <Button type="submit" radius="xl">
-              Login
+              {t('actions.login')}
             </Button>
           </Group>
         </form>
diff --git a/web/app/my-groups/page.tsx b/web/app/my-groups/page.tsx
index c470279f..0c23ec11 100644
--- a/web/app/my-groups/page.tsx
+++ b/web/app/my-groups/page.tsx
@@ -9,6 +9,7 @@ import CreateGroupModal from "@/components/group/CreateGroupModal";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { isGranted } from "@/service/auth";
 import { UserRoles } from "@/service/types/usernator";
+import {useTranslation} from "react-i18next";
 
 const GroupsPage = () => {
   const api = useApiServiceClient();
@@ -16,12 +17,13 @@ const GroupsPage = () => {
   const [groups] = useClientQuery<GroupsResponse>(() => api.getMyGroups(page), [page]);
   const [createModalOpen, setCreateModalOpen] = useState(false);
   const {user} = useCurrentUser();
+  const {t} = useTranslation('group');
 
   return (
     <Container fluid>
-      <Title>My Groups</Title>
+      <Title>{t('my-groups')}</Title>
         {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) && (
-            <Button onClick={() => setCreateModalOpen(true)}>Create group</Button>
+            <Button onClick={() => setCreateModalOpen(true)}>{t('actions.create-group')}</Button>
         )}
       <GroupsDisplayComponent groups={groups?.groups ?? []} page="my-groups" />
         <Pagination total={Math.ceil((groups?.total ?? 0) / 50)} value={page} onChange={setPage} />
diff --git a/web/app/register/page.tsx b/web/app/register/page.tsx
index 2f0fc075..e3c9ae53 100644
--- a/web/app/register/page.tsx
+++ b/web/app/register/page.tsx
@@ -15,6 +15,7 @@ import ApiError from "@/service/types/error";
 import { useRouter } from "next/navigation";
 import { notifications } from "@mantine/notifications";
 import useApiServiceClient from "@/hooks/useApiServiceClient";
+import {useTranslation} from "react-i18next";
 
 interface RegisterInput {
   name: string;
@@ -24,6 +25,7 @@ interface RegisterInput {
 const RegisterPage = () => {
   const api = useApiServiceClient();
   const router = useRouter();
+  const {t} = useTranslation('common');
 
   const form = useForm({
     initialValues: {
@@ -34,7 +36,7 @@ const RegisterPage = () => {
     validate: {
       password: (val) =>
         val.length <= 6
-          ? "Password should include at least 6 characters"
+          ? t('messages.password-requirements')
           : null,
     },
   });
@@ -46,7 +48,7 @@ const RegisterPage = () => {
     } catch (e) {
       if (e instanceof ApiError) {
         notifications.show({
-          title: "Registration failed",
+          title: t('messages.registration-failed'),
           message: e.message,
           color: "red",
         });
@@ -58,7 +60,7 @@ const RegisterPage = () => {
     <Container>
       <Paper radius="md" p="xl" withBorder>
         <Text size="lg" fw={500}>
-          Welcome to CodeCanvas please sign up
+          {t('register-cc')}
         </Text>
 
         <Divider />
@@ -67,8 +69,8 @@ const RegisterPage = () => {
           <Stack>
             <TextInput
               required
-              label="Username"
-              placeholder="Your username"
+              label={t('fields.username')}
+              placeholder={t('fields.username-placeholder')}
               value={form.values.name}
               onChange={(event) =>
                 form.setFieldValue("name", event.currentTarget.value)
@@ -78,15 +80,15 @@ const RegisterPage = () => {
 
             <PasswordInput
               required
-              label="Password"
-              placeholder="Your password"
+              label={t('fields.password')}
+              placeholder={t('fields.password-placeholder')}
               value={form.values.password}
               onChange={(event) =>
                 form.setFieldValue("password", event.currentTarget.value)
               }
               error={
                 form.errors.password &&
-                "Password should include at least 6 characters"
+                  t('messages.password-requirements')
               }
               radius="md"
             />
@@ -94,7 +96,7 @@ const RegisterPage = () => {
 
           <Group justify="space-between" mt="xl">
             <Button type="submit" radius="xl">
-              Sign up
+              {t('actions.sign-up')}
             </Button>
           </Group>
         </form>
diff --git a/web/app/report-bug/page.tsx b/web/app/report-bug/page.tsx
index 97b35b39..7f75633b 100644
--- a/web/app/report-bug/page.tsx
+++ b/web/app/report-bug/page.tsx
@@ -3,19 +3,21 @@ import useApiServiceClient from "@/hooks/useApiServiceClient";
 import {Container, Stack, Textarea, TextInput, Title, Button} from "@mantine/core";
 import {useForm} from "@mantine/form";
 import {showNotification} from "@mantine/notifications";
+import {useTranslation} from "react-i18next";
 
 
 const ReportBugPage = () => {
 
     const api = useApiServiceClient();
+    const {t} = useTranslation('common');
     const form = useForm({
         initialValues: {
             title: '',
             body: ''
         },
         validate: {
-            title: (v) => v === '' ? 'The title should not be empty' : null,
-            body: (v) => v === '' ? 'The body should not be empty' : null,
+            title: (v) => v === '' ? t('errors.title-empty') : null,
+            body: (v) => v === '' ? t('errors.body-empty') : null,
         }
     });
 
@@ -23,8 +25,8 @@ const ReportBugPage = () => {
         try {
             await api.reportBug(values.title, values.body);
             showNotification({
-                title: 'Success',
-                message: "Created report",
+                title: t('messages.success'),
+                message: t('messages.created-report'),
                 type: 'success',
             });
         } catch (e: any) {
@@ -41,20 +43,20 @@ const ReportBugPage = () => {
         <Container fluid>
             <form onSubmit={onSubmit}>
                 <Stack gap={10}>
-                    <Title order={2}>Report Bug</Title>
+                    <Title order={2}>{t('report-bug')}</Title>
                     <TextInput
-                        label="Title"
+                        label={t('fields.title')}
                         key={form.key('title')}
                         {...form.getInputProps('title')}
                     />
                     <Textarea
-                        label="Description"
+                        label={t('fields.description')}
                         key={form.key('body')}
                         autosize
                         {...form.getInputProps('body')}
                     />
                     <Button type="submit" style={{width: '15%'}}>
-                        Submit
+                        {t('actions.submit')}
                     </Button>
                 </Stack>
             </form>
diff --git a/web/app/settings/page.tsx b/web/app/settings/page.tsx
index 276731f1..528e4aef 100644
--- a/web/app/settings/page.tsx
+++ b/web/app/settings/page.tsx
@@ -10,6 +10,7 @@ import {
   useCombobox,
   useMantineColorScheme,
 } from "@mantine/core";
+import {useTranslation} from "react-i18next";
 
 const schemes = ["light", "dark", "auto"];
 
@@ -20,6 +21,7 @@ const SettingsPage = () => {
   const combobox = useCombobox({
     onDropdownClose: () => combobox.resetSelectedOption(),
   });
+  const {t} = useTranslation('common');
 
   const options = schemes.map((item) => (
     <Combobox.Option value={item} key={item}>
@@ -29,7 +31,7 @@ const SettingsPage = () => {
 
   return (
     <Container fluid>
-      <Title>Settings</Title>
+      <Title>{t('settings.settings')}</Title>
       <Combobox
         store={combobox}
         withinPortal={false}
diff --git a/web/app/students/page.tsx b/web/app/students/page.tsx
index 76709584..9f06ec55 100644
--- a/web/app/students/page.tsx
+++ b/web/app/students/page.tsx
@@ -5,6 +5,7 @@ import {Container, Pagination, Title} from "@mantine/core";
 import EntityList, { EntityListCol } from "@/components/EntityList";
 import useClientQuery from "@/hooks/useClientQuery";
 import {useState} from "react";
+import {useTranslation} from "react-i18next";
 
 const StudentsPage = () => {
   const api = useApiServiceClient();
@@ -13,21 +14,22 @@ const StudentsPage = () => {
     api.getStudents(page),
       [page]
   );
+  const {t} = useTranslation('common');
 
   const cols: EntityListCol[] = [
     {
       field: "id",
-      label: "ID",
+      label: t('cols.id'),
     },
     {
       field: "username",
-      label: "Username",
+      label: t('cols.username'),
     },
   ];
 
   return (
     <Container fluid>
-      <Title>Students</Title>
+      <Title>{t('students')}</Title>
       <EntityList cols={cols} rows={students?.students ?? []} />
       <Pagination total={Math.ceil((students?.total ?? 0) / 50)} value={page} onChange={setPage} />
     </Container>
diff --git a/web/app/tutors/page.tsx b/web/app/tutors/page.tsx
index a3d5fe73..d1d02a7e 100644
--- a/web/app/tutors/page.tsx
+++ b/web/app/tutors/page.tsx
@@ -6,6 +6,7 @@ import EntityList, {EntityListCol} from "@/components/EntityList";
 import {Button, Container, Group, Pagination, Title} from "@mantine/core";
 import {useState} from "react";
 import CreateTutorModal from "@/components/CreateTutorModal";
+import {useTranslation} from "react-i18next";
 
 
 const TutorsPage = () => {
@@ -17,23 +18,24 @@ const TutorsPage = () => {
         [page]
     );
     const [createModalOpen, setCreateModalOpen] = useState(false);
+    const {t} = useTranslation('common');
 
     const cols: EntityListCol[] = [
         {
             field: "id",
-            label: "ID",
+            label: t('cols.id'),
         },
         {
             field: "username",
-            label: "Username",
+            label: t('cols.username'),
         },
     ];
 
     return (
         <Container fluid>
             <Group>
-                <Title>Tutors</Title>
-                <Button onClick={() => setCreateModalOpen(true)}>Create tutor</Button>
+                <Title>{t('tutors')}</Title>
+                <Button onClick={() => setCreateModalOpen(true)}>{t('actions.create-tutor')}</Button>
             </Group>
             <EntityList cols={cols} rows={tutors?.tutors ?? []} />
             <Pagination total={Math.ceil((tutors?.total ?? 0) / 50)} value={page} onChange={setPage} />
diff --git a/web/public/locales/en/common.json b/web/public/locales/en/common.json
index f4646f53..7de86185 100644
--- a/web/public/locales/en/common.json
+++ b/web/public/locales/en/common.json
@@ -1,12 +1,43 @@
 {
   "invalid-group-id": "Invalid group ID",
+  "login-to-cc": "Login to CodeCanvas",
+  "register-cc": "Welcome to CodeCanvas please sign up",
+  "report-bug": "Report bug",
+  "students": "Students",
+  "tutors": "Tutors",
   "cols": {
     "id": "ID",
     "username": "Username"
   },
+  "fields": {
+    "username": "Username",
+    "username-placeholder": "Your username",
+    "password": "Password",
+    "password-placeholder": "Your password",
+    "title": "Title",
+    "description": "Description"
+  },
   "actions": {
     "approve": "Approve",
     "reject": "Reject",
-    "view": "View"
+    "view": "View",
+    "login": "Login",
+    "sign-up": "Sign up",
+    "submit": "Submit",
+    "create-tutor": "Create tutor"
+  },
+  "messages": {
+    "login-failed": "Login failed",
+    "registration-failed": "Registration failed",
+    "password-requirements": "Password should include at least 6 characters",
+    "success": "Success",
+    "created-report": "Created report"
+  },
+  "errors": {
+    "title-empty": "The title should not be empty",
+    "body-empty": "The body should not be empty"
+  },
+  "settings": {
+    "settings": "Settings"
   }
 }
diff --git a/web/public/locales/en/group.json b/web/public/locales/en/group.json
index 786d83c5..a9788a62 100644
--- a/web/public/locales/en/group.json
+++ b/web/public/locales/en/group.json
@@ -1,5 +1,6 @@
 {
   "groups": "Groups",
+  "my-groups": "My groups",
   "tabs": {
     "assignments": "Assignments",
     "members": "Members",
@@ -12,7 +13,8 @@
     "tutor": "Tutor"
   },
   "actions": {
-    "request-join": "Request Join"
+    "request-join": "Request Join",
+    "create-group": "Create group"
   },
   "messages": {
     "join-request-created-title": "Join Request created",

From 36ed891a8a90b629595f45db7b1f674bca7d3ca4 Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Thu, 7 Nov 2024 23:14:16 +0100
Subject: [PATCH 05/14] feat: Added some extra translations for solutions
 (pages) in app directory

---
 web/app/solutions/[id]/page.tsx           | 17 +++++++++--------
 web/app/solutions/page.tsx                | 12 +++++++-----
 web/components/solution/SolutionBadge.tsx | 14 +++++++++-----
 web/public/locales/en/solution.json       | 21 +++++++++++++++++++++
 4 files changed, 46 insertions(+), 18 deletions(-)
 create mode 100644 web/public/locales/en/solution.json

diff --git a/web/app/solutions/[id]/page.tsx b/web/app/solutions/[id]/page.tsx
index 02b8b2e7..a240b13f 100644
--- a/web/app/solutions/[id]/page.tsx
+++ b/web/app/solutions/[id]/page.tsx
@@ -16,6 +16,7 @@ import FileStructureDisplay from "@/components/FileStructureDisplay";
 import QuestionAnswersDisplay from "@/components/solution/questions/QuestionAnswersDisplay";
 import {useSpotlightStage2} from "@/hooks/spotlight/stage2";
 import CommentTab from "@/components/solution/CommentTab";
+import {useTranslation} from "react-i18next";
 
 // Every 30s
 const REFETCH_INTERVAL = 1000 * 30;
@@ -28,6 +29,7 @@ const SolutionDetailsPage = ({ params }: { params: { id: string } }) => {
   const [solution, refetch] = useClientQuery<Solution>(() =>
     api.getSolution(id),
   );
+  const {t} = useTranslation(['solution', 'common']);
 
   const {addSolution} = useSpotlightStage2();
   useEffect(() => {
@@ -51,7 +53,6 @@ const SolutionDetailsPage = ({ params }: { params: { id: string } }) => {
     fetcher();
   }, [solution, refetch]);
 
-  console.log(solution);
   const approve = async () => {
     await api.approveSolution(id);
     refetch();
@@ -65,7 +66,7 @@ const SolutionDetailsPage = ({ params }: { params: { id: string } }) => {
   if (isNaN(id)) {
     return (
       <Container fluid>
-        <Title>Invalid Solution ID</Title>
+        <Title>{t('invalid-solution-id')}</Title>
       </Container>
     );
   }
@@ -96,10 +97,10 @@ const SolutionDetailsPage = ({ params }: { params: { id: string } }) => {
           ) > -1 && (
             <>
               <Button color="lime" onClick={approve}>
-                Approve
+                {t('actions.approve')}
               </Button>
               <Button color="red" onClick={reject}>
-                Reject
+                {t('actions.reject')}
               </Button>
             </>
           )}
@@ -114,14 +115,14 @@ const SolutionDetailsPage = ({ params }: { params: { id: string } }) => {
       >
         <Tabs.List>
           {solution.assignment.language === AssignmentLanguage.QuestionBased ? (
-            <Tabs.Tab value="answers">Answers</Tabs.Tab>
+            <Tabs.Tab value="answers">{t('tabs.answers')}</Tabs.Tab>
           ) : (
             <>
-              <Tabs.Tab value="log">Log</Tabs.Tab>
-              <Tabs.Tab value="code">Code</Tabs.Tab>
+              <Tabs.Tab value="log">{t('tabs.log')}</Tabs.Tab>
+              <Tabs.Tab value="code">{t('tabs.code')}</Tabs.Tab>
             </>
           )}
-          <Tabs.Tab value="comments">Comments</Tabs.Tab>
+          <Tabs.Tab value="comments">{t('tabs.comments')}</Tabs.Tab>
         </Tabs.List>
 
         {solution.assignment.language === AssignmentLanguage.QuestionBased ? (
diff --git a/web/app/solutions/page.tsx b/web/app/solutions/page.tsx
index 43533e3c..86e07166 100644
--- a/web/app/solutions/page.tsx
+++ b/web/app/solutions/page.tsx
@@ -11,6 +11,7 @@ import { UserRoles } from "@/service/types/usernator";
 import SolutionBadge from "@/components/solution/SolutionBadge";
 import { useRouter } from "next/navigation";
 import {useState} from "react";
+import {useTranslation} from "react-i18next";
 
 const PersonalSolutionsPage = () => {
   const api = useApiServiceClient();
@@ -19,20 +20,21 @@ const PersonalSolutionsPage = () => {
   const [solutions] = useClientQuery<SolutionsResponse>(() =>
     api.getPersonalSolutions(page), [page]
   );
+  const {t} = useTranslation(['common', 'solution']);
 
   const cols: EntityListCol[] = [
     {
       field: "id",
-      label: "ID",
+      label: t('cols.id'),
     },
     {
       field: "assignment",
-      label: "Assignment",
+      label: t('cols.assignment'),
       getter: (row) => row.assignment.title,
     },
     {
       field: "approval_status",
-      label: "Approval Status",
+      label: t('cols.approval-status'),
       render: (value) => (
         <SolutionBadge status={value as string} />
       ),
@@ -41,7 +43,7 @@ const PersonalSolutionsPage = () => {
 
   const rowActions: EntityListRowAction[] = [
     {
-      name: "View",
+      name: t('actions.view'),
       onClick: (row) => router.push(`/solutions/${row.id}`),
       color: undefined,
       auth: [UserRoles.Student],
@@ -51,7 +53,7 @@ const PersonalSolutionsPage = () => {
   return (
     <Container fluid>
       <Title order={1} mb={20}>
-        Personal solutions
+        {t('personal-solutions')}
       </Title>
       <EntityList
         cols={cols}
diff --git a/web/components/solution/SolutionBadge.tsx b/web/components/solution/SolutionBadge.tsx
index 0948f670..275943f3 100644
--- a/web/components/solution/SolutionBadge.tsx
+++ b/web/components/solution/SolutionBadge.tsx
@@ -1,21 +1,25 @@
 import { Badge } from "@mantine/core";
+import {useTranslation} from "react-i18next";
 
 interface SolutionBadgeProps {
   status: string | null;
 }
 
 const SolutionBadge = ({ status }: SolutionBadgeProps): JSX.Element => {
+
+  const {t} = useTranslation('solution');
+
   switch (status) {
     case "APPROVED":
-      return <Badge color="green">{status}</Badge>;
+      return <Badge color="green">{t('status.approved')}</Badge>;
     case "REJECTED":
-      return <Badge color="red">{status}</Badge>;
+      return <Badge color="red">{t('status.rejected')}</Badge>;
     case "SUCCESSFUL":
-      return <Badge color="gray">{status}</Badge>;
+      return <Badge color="gray">{t('status.successful')}</Badge>;
     case "FAILED":
-      return <Badge color="gray">{status}</Badge>;
+      return <Badge color="gray">{t('status.failed')}</Badge>;
     default:
-      return <Badge color="yellow">{status ?? "PENDING"}</Badge>;
+      return <Badge color="yellow">{t('status.pending')}</Badge>;
   }
 };
 
diff --git a/web/public/locales/en/solution.json b/web/public/locales/en/solution.json
new file mode 100644
index 00000000..9549bd88
--- /dev/null
+++ b/web/public/locales/en/solution.json
@@ -0,0 +1,21 @@
+{
+  "invalid-solution-id": "Invalid solution ID",
+  "personal-solutions": "Personal solutions",
+  "tabs": {
+    "answers": "Answers",
+    "log": "Log",
+    "code": "Code",
+    "comments": "Comments"
+  },
+  "status": {
+    "approved": "Approved",
+    "rejected": "Rejected",
+    "successful": "Successful",
+    "failed": "Failed",
+    "pending": "Pending"
+  },
+  "cols": {
+    "assignment": "Assignment",
+    "approval-status": "Approval status"
+  }
+}

From 2ced194193060755f4c34dc6add73d346b472a27 Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Thu, 7 Nov 2024 23:45:41 +0100
Subject: [PATCH 06/14] feat: Added translations for assignment components

---
 .../assignments/AssignmentCompletedByTab.tsx  |  8 +++-
 .../AssignmentCreateOrUpdateCodeTestModal.tsx | 26 +++++-----
 .../assignments/AssignmentDetailsTaskTab.tsx  |  7 ++-
 .../assignments/AssignmentSolutionsTab.tsx    | 10 ++--
 .../CreateOrUpdateAssignmentModal.tsx         | 24 +++++-----
 .../CreateOrUpdateQuestionsModal.tsx          | 18 +++----
 .../assignments/CreateSolutionModal.tsx       | 12 +++--
 .../assignments/GroupAssignmentsTab.tsx       |  4 +-
 .../assignments/questions/AnswerInput.tsx     |  9 ++--
 .../questions/AnswerQuestionsModal.tsx        | 12 +++--
 .../assignments/questions/QuestionInput.tsx   | 16 ++++---
 web/public/locales/en/assignment.json         | 48 ++++++++++++++++++-
 web/public/locales/en/common.json             |  8 +++-
 13 files changed, 141 insertions(+), 61 deletions(-)

diff --git a/web/components/assignments/AssignmentCompletedByTab.tsx b/web/components/assignments/AssignmentCompletedByTab.tsx
index 2fceb10c..3c6401ee 100644
--- a/web/components/assignments/AssignmentCompletedByTab.tsx
+++ b/web/components/assignments/AssignmentCompletedByTab.tsx
@@ -1,5 +1,6 @@
 import { TaskyUser } from "@/service/types/tasky";
 import EntityList, { EntityListCol } from "@/components/EntityList";
+import {useTranslation} from "react-i18next";
 
 interface AssignmentCompletedByTabProps {
   completedBy: TaskyUser[];
@@ -8,14 +9,17 @@ interface AssignmentCompletedByTabProps {
 const AssignmentCompletedByTab = ({
   completedBy,
 }: AssignmentCompletedByTabProps) => {
+
+  const {t} = useTranslation('common');
+
   const cols: EntityListCol[] = [
     {
       field: "id",
-      label: "ID",
+      label: t('cols.id'),
     },
     {
       field: "username",
-      label: "Username",
+      label: t('cols.username'),
     },
   ];
 
diff --git a/web/components/assignments/AssignmentCreateOrUpdateCodeTestModal.tsx b/web/components/assignments/AssignmentCreateOrUpdateCodeTestModal.tsx
index dcf6cee3..64119a25 100644
--- a/web/components/assignments/AssignmentCreateOrUpdateCodeTestModal.tsx
+++ b/web/components/assignments/AssignmentCreateOrUpdateCodeTestModal.tsx
@@ -9,6 +9,7 @@ import { notifications } from "@mantine/notifications";
 import useApiServiceClient from "@/hooks/useApiServiceClient";
 import { useForm } from "@mantine/form";
 import {Assignment, RunnerConfig} from "@/service/types/tasky";
+import {useTranslation} from "react-i18next";
 
 interface AssignmentCreateOrUpdateCodeTestModalProps {
   onClose: () => void;
@@ -33,6 +34,7 @@ const AssignmentCreateOrUpdateCodeTestModal = ({
     current_folder_name: null,
   });
   const [files, setFiles] = useState<FileWithPath[]>([]);
+  const {t} = useTranslation(['assignment', 'common']);
 
   useEffect(() => {
     if (assignment.file_structure) {
@@ -50,13 +52,13 @@ const AssignmentCreateOrUpdateCodeTestModal = ({
     },
     validate: {
       runner_cpu: (v) =>
-        cpuOptions.indexOf(v) === -1 ? "Invalid CPU option" : null,
+        cpuOptions.indexOf(v) === -1 ? t('errors.invalid-cpu') : null,
       runner_memory: (v) =>
-        memoryOptions.indexOf(v) === -1 ? "Invalid memory option" : null,
+        memoryOptions.indexOf(v) === -1 ? t('errors.invalid-memory') : null,
       runner_timeout: (v) =>
-        timeoutOptions.indexOf(v) === -1 ? "Invalid timeout option" : null,
+        timeoutOptions.indexOf(v) === -1 ? t('errors.invalid-timeout') : null,
       runner_cmd: (v) =>
-        v.trim() === "" ? "Please enter a execution cmd" : null,
+        v.trim() === "" ? t('errors.empty-cmd') : null,
     },
   });
 
@@ -71,7 +73,7 @@ const AssignmentCreateOrUpdateCodeTestModal = ({
       onClose();
     } catch (e: any) {
       notifications.show({
-        message: e?.message ?? "Failed to create code tests",
+        message: e?.message ?? t('errors.code-test-creation-failed'),
         color: "red",
       });
     }
@@ -86,34 +88,34 @@ const AssignmentCreateOrUpdateCodeTestModal = ({
       />
       <InternalDropzone files={files} setFiles={setFiles} />
       <form onSubmit={submit}>
-        <Title order={3}>Runner configuration</Title>
+        <Title order={3}>{t('runner-configuration')}</Title>
         <Select
           key={form.key("runner_cpu")}
-          label="CPU"
+          label={t('fields.cpu')}
           {...form.getInputProps("runner_cpu")}
           data={cpuOptions}
         />
         <Select
           key={form.key("runner_memory")}
-          label="Memory"
+          label={t('fields.memory')}
           {...form.getInputProps("runner_memory")}
           data={memoryOptions}
         />
         <Select
           key={form.key("runner_timeout")}
-          label="Timeout"
+          label={t('fields.timeout')}
           {...form.getInputProps("runner_timeout")}
           data={timeoutOptions}
         />
         <TextInput
           key={form.key("runner_cmd")}
-          label="CMD"
+          label={t('fields.cmd')}
           {...form.getInputProps("runner_cmd")}
         />
         <Group mt={10}>
-          <Button type="submit">Save</Button>
+          <Button type="submit">{t('actions.save')}</Button>
           <Button onClick={onClose} color="gray">
-            Cancel
+            {t('actions.cancel')}
           </Button>
         </Group>
       </form>
diff --git a/web/components/assignments/AssignmentDetailsTaskTab.tsx b/web/components/assignments/AssignmentDetailsTaskTab.tsx
index 633ec916..4c3b8027 100644
--- a/web/components/assignments/AssignmentDetailsTaskTab.tsx
+++ b/web/components/assignments/AssignmentDetailsTaskTab.tsx
@@ -8,6 +8,7 @@ import useCurrentUser from "@/hooks/useCurrentUser";
 import { UserRoles } from "@/service/types/usernator";
 import CreateTaskCodeModal from "@/components/assignments/CreateSolutionModal";
 import AnswerQuestionsModal from "@/components/assignments/questions/AnswerQuestionsModal";
+import {useTranslation} from "react-i18next";
 
 interface AssignmentDetailsTaskProps {
   assignment: Assignment | null;
@@ -19,6 +20,8 @@ const AssignmentDetailsTaskTab = ({
   const { user } = useCurrentUser();
   const [createSolutionModalOpen, setCreateSolutionModalOpen] = useState(false);
 
+  const {t} = useTranslation('assignment');
+
   const assignmentCompleted = useMemo<boolean>(() => {
     return (
       (assignment?.completed_by ?? [])
@@ -38,7 +41,7 @@ const AssignmentDetailsTaskTab = ({
       {assignment !== null && assignment.file_structure !== null && (
         <>
           <Title order={3} mb={10}>
-            Required files
+              {t('required-files')}
           </Title>
           <FileStructure
             structure={assignment.file_structure}
@@ -53,7 +56,7 @@ const AssignmentDetailsTaskTab = ({
           mt={20}
           onClick={() => setCreateSolutionModalOpen(true)}
         >
-          Create Solution
+            {t('actions.submit-solution')}
         </Button>
       )}
       {createSolutionModalOpen &&
diff --git a/web/components/assignments/AssignmentSolutionsTab.tsx b/web/components/assignments/AssignmentSolutionsTab.tsx
index 6592c3e7..f2a82748 100644
--- a/web/components/assignments/AssignmentSolutionsTab.tsx
+++ b/web/components/assignments/AssignmentSolutionsTab.tsx
@@ -10,6 +10,7 @@ import { UserRoles } from "@/service/types/usernator";
 import SolutionBadge from "@/components/solution/SolutionBadge";
 import {useState} from "react";
 import {Container, Pagination} from "@mantine/core";
+import {useTranslation} from "react-i18next";
 
 interface AssignmentSolutionsTabProps {
   assignmentId: number;
@@ -25,20 +26,21 @@ const AssignmentSolutionsTab = ({
     () => api.getSolutionsForAssignment(assignmentId, page),
     [assignmentId, page],
   );
+  const {t} = useTranslation(['common', 'solution', 'assignment']);
 
   const cols: EntityListCol[] = [
     {
       field: "id",
-      label: "ID",
+      label: t('cols.id'),
     },
     {
       field: "submitter",
-      label: "Submitter",
+      label: t('cols.submitter'),
       getter: (row) => row.submitter.username,
     },
     {
       field: "approval_status",
-      label: "Approval Status",
+      label: t('cols.approval-status'),
       render: (value) => (
         <SolutionBadge status={value as string} />
       ),
@@ -47,7 +49,7 @@ const AssignmentSolutionsTab = ({
 
   const rowActions: EntityListRowAction[] = [
     {
-      name: "View",
+      name: t('actions.view'),
       onClick: (row) => router.push(`/solutions/${row.id}`),
       color: undefined,
       auth: [UserRoles.Admin, UserRoles.Tutor],
diff --git a/web/components/assignments/CreateOrUpdateAssignmentModal.tsx b/web/components/assignments/CreateOrUpdateAssignmentModal.tsx
index cc0cb439..65c29a0f 100644
--- a/web/components/assignments/CreateOrUpdateAssignmentModal.tsx
+++ b/web/components/assignments/CreateOrUpdateAssignmentModal.tsx
@@ -5,6 +5,7 @@ import { useForm } from "@mantine/form";
 import useApiServiceClient from "@/hooks/useApiServiceClient";
 import RichTextInput from "@/components/form/RichTextInput";
 import { notifications } from "@mantine/notifications";
+import {useTranslation} from "react-i18next";
 
 interface CreateAssignmentModalProps {
   groupId: number;
@@ -22,6 +23,7 @@ const CreateOrUpdateAssignmentModal = ({
   action,
 }: CreateAssignmentModalProps) => {
   const api = useApiServiceClient();
+  const {t} = useTranslation(['common', 'assignment']);
 
   const form = useForm({
     mode: "uncontrolled",
@@ -32,10 +34,10 @@ const CreateOrUpdateAssignmentModal = ({
       language: assignment?.language ?? AssignmentLanguage.QuestionBased,
     },
     validate: {
-      title: (v) => (v.trim() === "" ? "Title should contain a value" : null),
+      title: (v) => (v.trim() === "" ? t('assignment:errors.empty-title') : null),
       due_date: (v) =>
         v ? (new Date(v).getTime() <= new Date().getTime()
-          ? "Date should be in the future"
+          ? t('errors.future-due-date')
           : null) : null
     },
   });
@@ -51,7 +53,7 @@ const CreateOrUpdateAssignmentModal = ({
           values.language,
         );
         notifications.show({
-          message: `Successfully created assignment ${res.title}`,
+          message: `${t('messages.successfully-created-assignment')} ${res.title}`,
           color: "green",
         });
       }
@@ -64,7 +66,7 @@ const CreateOrUpdateAssignmentModal = ({
           values.description,
         );
         notifications.show({
-          message: `Successfully updated assignment ${res.title}`,
+          message: `${t('messages.successfully-updated-assignment')} ${res.title}`,
           color: "green",
         });
       }
@@ -72,7 +74,7 @@ const CreateOrUpdateAssignmentModal = ({
       onClose();
     } catch (e) {
       notifications.show({
-        message: `Failed to create or update assignment`,
+        message: t('assignment:errors.create-or-update'),
         color: "red",
       });
     }
@@ -82,18 +84,18 @@ const CreateOrUpdateAssignmentModal = ({
     <Modal
       opened
       onClose={onClose}
-      title={action === "create" ? "Create Assignment" : "Update Assignment"}
+      title={action === "create" ? t('titles.create-assignment') : t('titles.update-assignment')}
       size="xl"
     >
       <form onSubmit={onSubmit}>
         <TextInput
-          label="Title"
+          label={t('assignment:fields.title')}
           withAsterisk
           key={form.key("title")}
           {...form.getInputProps("title")}
         />
         <DateTimePicker
-          label="Due date"
+          label={t('assignment:fields.due-date')}
           clearable
           mt={10}
           mb={10}
@@ -107,7 +109,7 @@ const CreateOrUpdateAssignmentModal = ({
           setContent={form.getInputProps("description").onChange}
         />
         <Select
-          label="Language"
+          label={t('assignment:fields.language')}
           withAsterisk
           key={form.key("language")}
           data={Object.entries(AssignmentLanguage).map((e) => e[1])}
@@ -116,10 +118,10 @@ const CreateOrUpdateAssignmentModal = ({
         />
         <Group mt={10}>
           <Button type="submit">
-            {action === "create" ? "Create" : "Update"}
+            {action === "create" ? t('actions.create') : t('actions.update')}
           </Button>
           <Button onClick={onClose} color="gray">
-            Cancel
+            {t('actions.cancel')}
           </Button>
         </Group>
       </form>
diff --git a/web/components/assignments/CreateOrUpdateQuestionsModal.tsx b/web/components/assignments/CreateOrUpdateQuestionsModal.tsx
index 2b4716f0..1eee270e 100644
--- a/web/components/assignments/CreateOrUpdateQuestionsModal.tsx
+++ b/web/components/assignments/CreateOrUpdateQuestionsModal.tsx
@@ -5,6 +5,7 @@ import QuestionInput from "@/components/assignments/questions/QuestionInput";
 import { notifications } from "@mantine/notifications";
 import useApiServiceClient from "@/hooks/useApiServiceClient";
 import {useCallback, useEffect, useState} from "react";
+import {useTranslation} from "react-i18next";
 
 interface CreateQuestionsModalProps {
   onClose: () => void;
@@ -21,6 +22,7 @@ const CreateOrUpdateQuestionsModal = ({
 }: CreateQuestionsModalProps) => {
   const api = useApiServiceClient();
   const [questions, setQuestions] = useState<QuestionCatalogueElement[]>([]);
+  const {t} = useTranslation(['common', 'assignment']);
 
   useEffect(() => {
     if (assignment.question_catalogue?.catalogue) {
@@ -62,8 +64,8 @@ const CreateOrUpdateQuestionsModal = ({
       ) {
         console.log(question);
         notifications.show({
-          title: "Error",
-          message: "Please fill all question fields",
+          title: t('messages.error'),
+          message: t('errors.all-required-fields'),
           color: "red",
         });
         return;
@@ -75,8 +77,8 @@ const CreateOrUpdateQuestionsModal = ({
       onClose();
     } catch (e: any) {
       notifications.show({
-        title: "Error",
-        message: e?.message ?? "Failed to create/update question",
+        title: t('messages.error'),
+        message: e?.message ?? t('errors.failed-question-cu'),
         color: "red",
       });
     }
@@ -86,7 +88,7 @@ const CreateOrUpdateQuestionsModal = ({
     <Modal
       opened={true}
       onClose={onClose}
-      title="Questions catalogue"
+      title={t('titles.question-catalogue')}
       size="xl"
     >
       <Stack>
@@ -100,17 +102,17 @@ const CreateOrUpdateQuestionsModal = ({
         ))}
         <Group justify="flex-end">
           <Button onClick={addNew} w={150}>
-            New question
+            {t('actions.new-question')}
           </Button>
         </Group>
       </Stack>
       <Divider mt={10} />
       <Group mt={10}>
         <Button type="submit" onClick={onSubmit}>
-          Save
+          {t('actions.save')}
         </Button>
         <Button onClick={onClose} color="gray">
-          Cancel
+          {t('actions.cancel')}
         </Button>
       </Group>
     </Modal>
diff --git a/web/components/assignments/CreateSolutionModal.tsx b/web/components/assignments/CreateSolutionModal.tsx
index 6c55b4f3..58b49aea 100644
--- a/web/components/assignments/CreateSolutionModal.tsx
+++ b/web/components/assignments/CreateSolutionModal.tsx
@@ -7,6 +7,7 @@ import InternalDropzone from "@/components/InternalDropzone";
 import { notifications } from "@mantine/notifications";
 import useApiServiceClient from "@/hooks/useApiServiceClient";
 import { useRouter } from "next/navigation";
+import {useTranslation} from "react-i18next";
 
 interface CreateTaskCodeModalProps {
   onClose: () => void;
@@ -20,6 +21,7 @@ const CreateSolutionModal = ({
   const [files, setFiles] = useState<FileWithPath[]>([]);
   const api = useApiServiceClient();
   const router = useRouter();
+  const {t} = useTranslation(['common', 'assignment']);
 
   const requiredFiles = useMemo<string[]>(
     () =>
@@ -38,8 +40,8 @@ const CreateSolutionModal = ({
     e.preventDefault();
     if (missingFiles.length > 0) {
       notifications.show({
-        title: "Missing file",
-        message: `Following files are missing: ${missingFiles.join(", ")}`,
+        title: t('messages.error'),
+        message: `${t('errors.missing-files')} ${missingFiles.join(", ")}`,
         color: "red",
       });
       return;
@@ -49,7 +51,7 @@ const CreateSolutionModal = ({
   };
 
   return (
-    <Modal opened onClose={onClose} title="Create new Solution" size="lg">
+    <Modal opened onClose={onClose} title={t('titles.create-solution')} size="lg">
       <form onSubmit={submit}>
         {missingFiles.length > 0 && (
           <Paper withBorder mb={20} p={10}>
@@ -62,9 +64,9 @@ const CreateSolutionModal = ({
         )}
         <InternalDropzone files={files} setFiles={setFiles} />
         <Group mt={10}>
-          <Button type="submit">Create Solution</Button>
+          <Button type="submit">{t('actions.create')}</Button>
           <Button onClick={onClose} color="gray">
-            Cancel
+            {t('actions.cancel')}
           </Button>
         </Group>
       </form>
diff --git a/web/components/assignments/GroupAssignmentsTab.tsx b/web/components/assignments/GroupAssignmentsTab.tsx
index e8771c69..53004f1c 100644
--- a/web/components/assignments/GroupAssignmentsTab.tsx
+++ b/web/components/assignments/GroupAssignmentsTab.tsx
@@ -14,6 +14,7 @@ import { useState } from "react";
 import CreateOrUpdateAssignmentModal from "@/components/assignments/CreateOrUpdateAssignmentModal";
 import useClientQuery from "@/hooks/useClientQuery";
 import AssignmentCard from "@/components/assignments/AssignmentCard";
+import {useTranslation} from "react-i18next";
 
 interface GroupAssignmentsTabProps {
   group: TaskyGroup | null;
@@ -35,6 +36,7 @@ const GroupAssignmentsTab = ({ group }: GroupAssignmentsTabProps) => {
     () => api.getAssignmentsForGroup(group?.id ?? -1, page),
     [group?.id, page],
   );
+  const {t} = useTranslation('assignment');
 
   const { user } = useCurrentUser();
 
@@ -46,7 +48,7 @@ const GroupAssignmentsTab = ({ group }: GroupAssignmentsTabProps) => {
           user.groups.map((g) => g.id).indexOf(group?.id ?? -1) > -1 && (
             <Button onClick={() => setCreateModalOpen(true)}>
               <IconPlus />
-              &nbsp;Create Assignment
+              &nbsp;{t('actions.create-assignment')}
             </Button>
           )}
       </Group>
diff --git a/web/components/assignments/questions/AnswerInput.tsx b/web/components/assignments/questions/AnswerInput.tsx
index 69e441b0..2083be1e 100644
--- a/web/components/assignments/questions/AnswerInput.tsx
+++ b/web/components/assignments/questions/AnswerInput.tsx
@@ -1,6 +1,7 @@
 import { Checkbox, NumberInput, Stack, Text, TextInput } from "@mantine/core";
 import { AnswerType } from "@/service/types/tasky";
 import { useMemo } from "react";
+import {useTranslation} from "react-i18next";
 
 interface AnswerInputProps {
   value: any;
@@ -15,6 +16,8 @@ const AnswerInput = ({
   answerType,
   question,
 }: AnswerInputProps) => {
+
+  const {t} = useTranslation('assignment');
   const answerInput = useMemo<JSX.Element | null>(() => {
     switch (answerType) {
       case AnswerType.String:
@@ -23,7 +26,7 @@ const AnswerInput = ({
           <TextInput
             value={value}
             onChange={(e) => setValue(e.target.value)}
-            label="Answer"
+            label={t('fields.answer')}
           />
         );
       case AnswerType.Number:
@@ -31,7 +34,7 @@ const AnswerInput = ({
           <NumberInput
             value={value}
             onChange={(val) => setValue(val)}
-            label="Answer"
+            label={t('fields.answer')}
           />
         );
       case AnswerType.Boolean:
@@ -39,7 +42,7 @@ const AnswerInput = ({
           <Checkbox
             checked={value}
             onChange={(e) => setValue(e.target.checked)}
-            label="Answer"
+            label={t('fields.answer')}
           />
         );
       default:
diff --git a/web/components/assignments/questions/AnswerQuestionsModal.tsx b/web/components/assignments/questions/AnswerQuestionsModal.tsx
index 5aa2182a..b7eadc41 100644
--- a/web/components/assignments/questions/AnswerQuestionsModal.tsx
+++ b/web/components/assignments/questions/AnswerQuestionsModal.tsx
@@ -9,6 +9,7 @@ import useApiServiceClient from "@/hooks/useApiServiceClient";
 import { useRouter } from "next/navigation";
 import { notifications } from "@mantine/notifications";
 import { useSetState } from "@mantine/hooks";
+import {useTranslation} from "react-i18next";
 
 type StateType = { map: Map<string, QuestionSolution> };
 
@@ -61,6 +62,7 @@ const AnswerQuestionsModal = ({
   });
   const api = useApiServiceClient();
   const router = useRouter();
+  const {t} = useTranslation(['assignment', 'common']);
 
   const updateSolution = (hash: string, answer: any) => {
     setAnswers({ map: answers.map.set(hash, { answer }) });
@@ -72,14 +74,14 @@ const AnswerQuestionsModal = ({
       router.push(`/solutions/${res.id}`);
     } catch (e: any) {
       notifications.show({
-        title: "Error",
-        message: e?.message ?? "Error creating solution",
+        title: t('messages.error'),
+        message: e?.message ?? t('messages.failed-solution-creation'),
       });
     }
   };
 
   return (
-    <Modal opened onClose={onClose} title="Create solution">
+    <Modal opened onClose={onClose} title={t('titles.create-solution')}>
       <Stack>
         {Array.from(answers.map.entries()).map(([hash, answer]) => (
           <AnswerInput
@@ -95,10 +97,10 @@ const AnswerQuestionsModal = ({
       </Stack>
       <Group mt={10}>
         <Button type="submit" onClick={onSubmit}>
-          Submit solution
+          {t('actions.submit-solution')}
         </Button>
         <Button onClick={onClose} color="gray">
-          Cancel
+          {t('actions.cancel')}
         </Button>
       </Group>
     </Modal>
diff --git a/web/components/assignments/questions/QuestionInput.tsx b/web/components/assignments/questions/QuestionInput.tsx
index d3513a94..a29d055b 100644
--- a/web/components/assignments/questions/QuestionInput.tsx
+++ b/web/components/assignments/questions/QuestionInput.tsx
@@ -11,6 +11,7 @@ import {
 } from "@mantine/core";
 import { AnswerType, QuestionCatalogueElement } from "@/service/types/tasky";
 import { useMemo } from "react";
+import {useTranslation} from "react-i18next";
 
 interface QuestionInputProps {
   value: QuestionCatalogueElement;
@@ -19,6 +20,9 @@ interface QuestionInputProps {
 }
 
 const QuestionInput = ({ value, setValue, remove }: QuestionInputProps) => {
+
+  const {t} = useTranslation(['assignment', 'common']);
+
   const answerInput = useMemo<JSX.Element | null>(() => {
     switch (value.answer_type) {
       case AnswerType.String:
@@ -27,7 +31,7 @@ const QuestionInput = ({ value, setValue, remove }: QuestionInputProps) => {
           <TextInput
             value={value.answer ?? ""}
             onChange={(e) => setValue({ ...value, answer: e.target.value })}
-            label="Answer"
+            label={t('fields.answer')}
           />
         );
       case AnswerType.Number:
@@ -35,7 +39,7 @@ const QuestionInput = ({ value, setValue, remove }: QuestionInputProps) => {
           <NumberInput
             value={value.answer ?? 0}
             onChange={(val) => setValue({ ...value, answer: val })}
-            label="Answer"
+            label={t('fields.answer')}
           />
         );
       case AnswerType.Boolean:
@@ -43,7 +47,7 @@ const QuestionInput = ({ value, setValue, remove }: QuestionInputProps) => {
           <Checkbox
             checked={value.answer ?? false}
             onChange={(e) => setValue({ ...value, answer: e.target.checked })}
-            label="Answer"
+            label={t('fields.answer')}
           />
         );
       default:
@@ -56,11 +60,11 @@ const QuestionInput = ({ value, setValue, remove }: QuestionInputProps) => {
       <Stack>
         <Group justify="flex-end">
           <Button onClick={remove} w={100} color="red">
-            Remove
+            {t('actions.remove')}
           </Button>
         </Group>
         <TextInput
-          label="Question"
+          label={t('fields.question')}
           value={value.question}
           onChange={(e) => setValue({ ...value, question: e.target.value })}
         />
@@ -69,7 +73,7 @@ const QuestionInput = ({ value, setValue, remove }: QuestionInputProps) => {
           onChange={(type) =>
             setValue({ ...value, answer_type: type as AnswerType })
           }
-          label="Answer type"
+          label={t('fields.answer-type')}
           data={Object.values(AnswerType)}
         />
         {answerInput}
diff --git a/web/public/locales/en/assignment.json b/web/public/locales/en/assignment.json
index 07aa80a1..29f2f0ab 100644
--- a/web/public/locales/en/assignment.json
+++ b/web/public/locales/en/assignment.json
@@ -3,5 +3,51 @@
   "task": "Task",
   "code-tests": "Code tests",
   "solutions": "Solutions",
-  "completed-by": "Completed by"
+  "completed-by": "Completed by",
+  "runner-configuration": "Runner configuration",
+  "required-files": "Required files",
+  "fields": {
+    "answer": "Answer",
+    "question": "Question",
+    "answer-type": "Answer type",
+    "cpu": "CPU",
+    "memory": "Memory (RAM)",
+    "timeout": "Timeout",
+    "cmd": "CMD",
+    "title": "Title",
+    "due-date": "Due date",
+    "language": "Language"
+  },
+  "titles": {
+    "create-solution": "Create solution",
+    "create-assignment": "Create assignment",
+    "update-assignment": "Update assignment",
+    "question-catalogue": "Question catalogue"
+  },
+  "messages": {
+    "failed-solution-creation": "Error creating solution",
+    "successfully-created-assignment": "Successfully created assignment",
+    "successfully-updated-assignment": "Successfully updated assignment"
+  },
+  "actions": {
+    "submit-solution": "Submit solution",
+    "new-question": "New question",
+    "create-assignment": "Create assignment"
+  },
+  "errors": {
+    "invalid-cpu": "Invalid CPU option",
+    "invalid-memory": "Invalid memory option",
+    "invalid-timeout": "Invalid timeout option",
+    "empty-cmd": "Please enter a execution cmd",
+    "code-test-creation-failed": "Failed to create code tests",
+    "empty-title": "Title should contain a value",
+    "future-due-date": "Date should be in the future",
+    "create-or-update": "Failed to create or update assignment",
+    "all-required-fields": "Please fill all question fields",
+    "failed-question-cu": "Failed to create/update question",
+    "missing-files": "Following files are missing:"
+  },
+  "cols": {
+    "submitter": "Submitter"
+  }
 }
diff --git a/web/public/locales/en/common.json b/web/public/locales/en/common.json
index 7de86185..0ee2db76 100644
--- a/web/public/locales/en/common.json
+++ b/web/public/locales/en/common.json
@@ -24,13 +24,19 @@
     "login": "Login",
     "sign-up": "Sign up",
     "submit": "Submit",
-    "create-tutor": "Create tutor"
+    "create-tutor": "Create tutor",
+    "cancel": "Cancel",
+    "remove": "Remove",
+    "save": "Save",
+    "create": "Create",
+    "update": "Update"
   },
   "messages": {
     "login-failed": "Login failed",
     "registration-failed": "Registration failed",
     "password-requirements": "Password should include at least 6 characters",
     "success": "Success",
+    "error": "Error",
     "created-report": "Created report"
   },
   "errors": {

From 2b0fd153a0f513caff01e06ce1c92576a4ee1df8 Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Fri, 8 Nov 2024 11:43:20 +0100
Subject: [PATCH 07/14] feat: Added translations for some more components

---
 web/components/CodeDisplay.tsx             |  8 ++++--
 web/components/CreateTutorModal.tsx        | 19 +++++++------
 web/components/EntityList.tsx              |  4 ++-
 web/components/FileStructure.tsx           |  7 +++--
 web/components/FileStructureComponents.tsx |  8 ++++--
 web/components/Footer.tsx                  |  8 ++++--
 web/components/InternalDropzone.tsx        | 11 +++++---
 web/components/Navbar.tsx                  |  4 ++-
 web/components/NavigateBack.tsx            |  4 ++-
 web/components/SsrHeader.tsx               | 12 ++++----
 web/public/locales/en/common.json          | 33 ++++++++++++++++++----
 web/public/locales/en/routes.json          |  5 ++++
 12 files changed, 88 insertions(+), 35 deletions(-)
 create mode 100644 web/public/locales/en/routes.json

diff --git a/web/components/CodeDisplay.tsx b/web/components/CodeDisplay.tsx
index a9abfa28..bee3bc9e 100644
--- a/web/components/CodeDisplay.tsx
+++ b/web/components/CodeDisplay.tsx
@@ -3,6 +3,7 @@ import { Card, Text } from "@mantine/core";
 import {CodeHighlightTabs} from "@mantine/code-highlight";
 import {useCallback, useEffect, useState} from "react";
 import FileIcon from "@/components/FileIcon";
+import {useTranslation} from "react-i18next";
 
 interface CodeDisplayProps {
   files: (MongoTestFile | MongoTaskFile)[];
@@ -11,6 +12,7 @@ interface CodeDisplayProps {
 const CodeDisplay = ({ files }: CodeDisplayProps) => {
 
   const [tab, setTab] = useState<number|undefined>(undefined);
+  const {t} = useTranslation('common');
 
   useEffect(() => {
     if (files.length > 0) {
@@ -35,7 +37,7 @@ const CodeDisplay = ({ files }: CodeDisplayProps) => {
   if (files.length === 0) {
     return (
       <Card>
-        <Text>No file selected</Text>
+        <Text>{t('messages.no-files-selected')}</Text>
       </Card>
     );
   }
@@ -55,8 +57,8 @@ const CodeDisplay = ({ files }: CodeDisplayProps) => {
                 expanded={false}
             />
         }))}
-        copyLabel="Copy Code"
-        copiedLabel="Copied!"
+        copyLabel={t('actions.copy')}
+        copiedLabel={t('messages.copied-code')}
       />
     </Card>
   );
diff --git a/web/components/CreateTutorModal.tsx b/web/components/CreateTutorModal.tsx
index bafd1cee..de0a5ebb 100644
--- a/web/components/CreateTutorModal.tsx
+++ b/web/components/CreateTutorModal.tsx
@@ -2,6 +2,7 @@ import {Button, Group, Modal, PasswordInput, TextInput} from "@mantine/core";
 import {useForm} from "@mantine/form";
 import useApiServiceClient from "@/hooks/useApiServiceClient";
 import {showNotification} from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
 
 interface CreateTutorModalProps {
     onClose: () => void;
@@ -10,6 +11,8 @@ interface CreateTutorModalProps {
 
 const CreateTutorModal = ({onClose, refetch}: CreateTutorModalProps) => {
 
+    const {t} = useTranslation(['common', 'assignment']);
+
 
     const api = useApiServiceClient();
     const form = useForm({
@@ -18,8 +21,8 @@ const CreateTutorModal = ({onClose, refetch}: CreateTutorModalProps) => {
             password: ''
         },
         validate: {
-            username: (val) => val.trim() == '' ? 'Username should not be empty' : null,
-            password: (v) => v === '' ? 'The password should not be empty' : null,
+            username: (val) => val.trim() == '' ? t('errors.username-empty') : null,
+            password: (v) => v === '' ? t('errors.password-empty') : null,
         }
     });
 
@@ -32,20 +35,20 @@ const CreateTutorModal = ({onClose, refetch}: CreateTutorModalProps) => {
             console.error(e);
             showNotification({
                 title: 'Error',
-                message: e?.message ?? "Failed to create tutor",
+                message: e?.message ?? t('errors.create-tutor'),
             });
         }
     })
 
     return (
-        <Modal opened onClose={onClose} title="Create Tutor">
+        <Modal opened onClose={onClose} title={t('titles.create-tutor')}>
             <form onSubmit={submit}>
-                <TextInput label="Username" key={form.key('username')} {...form.getInputProps('username')} />
-                <PasswordInput label="Password" key={form.key('password')} {...form.getInputProps('password')} />
+                <TextInput label={t('fields.username')} key={form.key('username')} {...form.getInputProps('username')} />
+                <PasswordInput label={t('fields.password')} key={form.key('password')} {...form.getInputProps('password')} />
                 <Group mt={10}>
-                    <Button type="submit">Create tutor</Button>
+                    <Button type="submit">{t('actions.create')}</Button>
                     <Button onClick={onClose} color="gray">
-                        Cancel
+                        {t('actions.cancel')}
                     </Button>
                 </Group>
             </form>
diff --git a/web/components/EntityList.tsx b/web/components/EntityList.tsx
index dd117b3b..576b0795 100644
--- a/web/components/EntityList.tsx
+++ b/web/components/EntityList.tsx
@@ -4,6 +4,7 @@ import { UserRoles } from "@/service/types/usernator";
 import { useMemo } from "react";
 import { isGranted } from "@/service/auth";
 import useCurrentUser from "@/hooks/useCurrentUser";
+import {useTranslation} from "react-i18next";
 
 export interface EntityListCol {
   label: string;
@@ -28,6 +29,7 @@ interface EntityListProps {
 
 const EntityList: React.FC<EntityListProps> = ({ cols, rows, rowActions }) => {
   const { user } = useCurrentUser();
+  const {t} = useTranslation('common');
   const filteredRowActions = useMemo<undefined | EntityListRowAction[]>(() => {
     if (rowActions) {
       return rowActions.filter((a) =>
@@ -48,7 +50,7 @@ const EntityList: React.FC<EntityListProps> = ({ cols, rows, rowActions }) => {
         {cols.map((col) => (
           <Table.Th key={col.label}>{col.label}</Table.Th>
         ))}
-        {filteredRowActions && <Table.Th>Actions</Table.Th>}
+        {filteredRowActions && <Table.Th>{t('cols.actions')}</Table.Th>}
       </Table.Thead>
       <Table.Tbody>
         {rows.map((row) => (
diff --git a/web/components/FileStructure.tsx b/web/components/FileStructure.tsx
index ba9b190d..416d5373 100644
--- a/web/components/FileStructure.tsx
+++ b/web/components/FileStructure.tsx
@@ -14,6 +14,7 @@ import {
   findObjectIdInStructure,
   updateTestFileState,
 } from "@/utils/FileStructure";
+import {useTranslation} from "react-i18next";
 
 export interface FileStructureFile {
   filename: string;
@@ -48,6 +49,8 @@ const FileStructure = ({
   solutionMode,
 }: FileStructureProps) => {
 
+  const {t} = useTranslation('common');
+
   const [fileNames, treeData] = useMemo(
     () =>
       buildDataFromStructure(
@@ -81,10 +84,10 @@ const FileStructure = ({
     <Paper withBorder>
       <Button.Group>
         <Button variant="default" onClick={() => tree.expandAllNodes()}>
-          Expand All
+          {t('actions.expand-all')}
         </Button>
         <Button variant="default" onClick={() => tree.collapseAllNodes()}>
-          Collapse All
+          {t('actions.collapse-all')}
         </Button>
       </Button.Group>
       <Tree
diff --git a/web/components/FileStructureComponents.tsx b/web/components/FileStructureComponents.tsx
index 64d05c2d..088cc594 100644
--- a/web/components/FileStructureComponents.tsx
+++ b/web/components/FileStructureComponents.tsx
@@ -10,6 +10,7 @@ import {
 import { useState } from "react";
 import FileIcon from "@/components/FileIcon";
 import { useForm } from "@mantine/form";
+import {useTranslation} from "react-i18next";
 
 interface FileStructureNewInputProps {
   label: string;
@@ -22,6 +23,7 @@ export const FileStructureNewInput = (
 ) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { addFunc: _, label: _1, fileNames: _2, ...groupProps } = props;
+  const {t} = useTranslation('common');
   const [isNew, setIsNew] = useState(false);
   const form = useForm({
     initialValues: {
@@ -30,7 +32,7 @@ export const FileStructureNewInput = (
     validate: {
       name: (value: string) =>
         props.fileNames.indexOf(value) > -1
-          ? "File/Folder already exists"
+          ? t('errors.folder-exists')
           : null,
     },
   });
@@ -80,6 +82,8 @@ export const FileStructureElement = (
     ...elementProps
   } = props;
   /* eslint-enable @typescript-eslint/no-unused-vars */
+
+  const {t} = useTranslation('common');
   return (
     <Group gap={5} {...elementProps}>
       <FileIcon
@@ -90,7 +94,7 @@ export const FileStructureElement = (
       <Text>{props.label}</Text>
       {!props.isFolder && props.editable && (
         <Checkbox
-          label="Test file"
+          label={t('fields.test-file')}
           checked={props.isTestFile}
           onChange={(e) => props.setIsTestFile(e.target.checked)}
           style={{ marginLeft: "auto" }}
diff --git a/web/components/Footer.tsx b/web/components/Footer.tsx
index 004f0cca..1d68804f 100644
--- a/web/components/Footer.tsx
+++ b/web/components/Footer.tsx
@@ -1,19 +1,21 @@
 import useCurrentUser from "@/hooks/useCurrentUser";
 import {Group, Paper, Text} from "@mantine/core";
 import {useRouter} from "next/navigation";
+import { useTranslation } from "react-i18next";
 
 const Footer = () => {
 
     const router = useRouter();
     const {user} = useCurrentUser();
+    const {t} = useTranslation('routes');
 
     return (
         <Paper m="sm">
             <Group justify="flex-end">
-                <Text c="dimmed" style={{cursor: 'pointer'}} onClick={() => router.push('/impress')}>Impress</Text>
-                <Text c="dimmed" style={{cursor: 'pointer'}} onClick={() => router.push('/privacy')}>Privacy</Text>
+                <Text c="dimmed" style={{cursor: 'pointer'}} onClick={() => router.push('/impress')}>{t('impress')}</Text>
+                <Text c="dimmed" style={{cursor: 'pointer'}} onClick={() => router.push('/privacy')}>{t('privacy')}</Text>
                 {user && (
-                    <Text c="dimmed" style={{cursor: 'pointer'}} onClick={() => router.push('/report-bug')}>Report Bug</Text>
+                    <Text c="dimmed" style={{cursor: 'pointer'}} onClick={() => router.push('/report-bug')}>{t('report-bug')}</Text>
                 )}
             </Group>
         </Paper>
diff --git a/web/components/InternalDropzone.tsx b/web/components/InternalDropzone.tsx
index cf810969..7ff97938 100644
--- a/web/components/InternalDropzone.tsx
+++ b/web/components/InternalDropzone.tsx
@@ -2,6 +2,7 @@ import { Dropzone, FileWithPath } from "@mantine/dropzone";
 import { Group, Paper, rem, SimpleGrid, Text } from "@mantine/core";
 import { IconFile, IconUpload, IconX } from "@tabler/icons-react";
 import { notifications } from "@mantine/notifications";
+import {useTranslation} from "react-i18next";
 
 const ALLOWED_TEXT_EXTENSIONS = [
   ".java",
@@ -24,15 +25,17 @@ interface InternalDropzoneProps {
 }
 
 const InternalDropzone = ({ files, setFiles }: InternalDropzoneProps) => {
+    const {t} = useTranslation('common');
+
   return (
     <>
       <Dropzone
         onDrop={(f) => setFiles([...files, ...f])}
         onReject={(f) =>
           notifications.show({
-            title: "Rejected files",
+            title: t('messages.rejected-files'),
             color: "red",
-            message: `Rejected files: ${f.map((file) => file.file.name).join(", ")}`,
+            message: `${t('messages.rejected-files')}: ${f.map((file) => file.file.name).join(", ")}`,
           })
         }
         maxSize={10 * 1024 ** 2}
@@ -77,10 +80,10 @@ const InternalDropzone = ({ files, setFiles }: InternalDropzoneProps) => {
 
           <div>
             <Text size="xl" inline>
-              Drag text files here or click to select files
+                {t('dropzone.instruction')}
             </Text>
             <Text size="sm" c="dimmed" inline mt={7}>
-              Attach as many files as you like, each file should not exceed 10mb
+                {t('dropzone.limit')}
             </Text>
           </div>
         </Group>
diff --git a/web/components/Navbar.tsx b/web/components/Navbar.tsx
index 9636971b..47b4eca9 100644
--- a/web/components/Navbar.tsx
+++ b/web/components/Navbar.tsx
@@ -3,11 +3,13 @@ import useRoutes from "@/hooks/useRoutes";
 import { Button, Stack } from "@mantine/core";
 import { usePathname, useRouter } from "next/navigation";
 import { Route } from "@/static/routes";
+import {useTranslation} from "react-i18next";
 
 const Navbar = () => {
   const router = useRouter();
   const pathname = usePathname();
   const routes = useRoutes();
+  const {t} = useTranslation('routes');
 
   return (
     <Stack gap="xs" m={5}>
@@ -18,7 +20,7 @@ const Navbar = () => {
           onClick={() => router.push(route.path)}
           leftSection={route.icon}
         >
-          {route.name}
+          {t(route.name)}
         </Button>
       ))}
     </Stack>
diff --git a/web/components/NavigateBack.tsx b/web/components/NavigateBack.tsx
index 311f30fe..2a4c4362 100644
--- a/web/components/NavigateBack.tsx
+++ b/web/components/NavigateBack.tsx
@@ -1,14 +1,16 @@
 "use client";
 import { useRouter } from "next/navigation";
 import { Button, Group } from "@mantine/core";
+import {useTranslation} from "react-i18next";
 
 const NavigateBack = () => {
   const router = useRouter();
+  const {t} = useTranslation('common');
 
   return (
     <Group justify="start" mt={30}>
       <Button color="blue" onClick={() => router.back()}>
-        Navigate Back
+          {t('actions.navigate-back')}
       </Button>
     </Group>
   );
diff --git a/web/components/SsrHeader.tsx b/web/components/SsrHeader.tsx
index 56203dfa..0af8905f 100644
--- a/web/components/SsrHeader.tsx
+++ b/web/components/SsrHeader.tsx
@@ -5,6 +5,7 @@ import { User } from "@/service/types/usernator";
 import { useCookies } from "react-cookie";
 import { useRouter } from "next/navigation";
 import useCurrentUser from "@/hooks/useCurrentUser";
+import {useTranslation} from "react-i18next";
 
 interface SsrHeaderProps {
   user: User | null;
@@ -15,6 +16,7 @@ const SsrHeader: React.FC<SsrHeaderProps> = ({ user }) => {
   const [s, _, removeSession] = useCookies(["session"]);
   const { setUser } = useCurrentUser();
   const router = useRouter();
+  const {t} = useTranslation('common');
 
   const logOut = () => {
     removeSession("session");
@@ -27,10 +29,10 @@ const SsrHeader: React.FC<SsrHeaderProps> = ({ user }) => {
     return (
       <Group visibleFrom="sm">
         <Link href="/login">
-          <Button variant="default">Log in</Button>
+          <Button variant="default">{t('actions.login')}</Button>
         </Link>
         <Link href="/register">
-          <Button>Sign up</Button>
+          <Button>{t('actions.sign-up')}</Button>
         </Link>
       </Group>
     );
@@ -38,7 +40,7 @@ const SsrHeader: React.FC<SsrHeaderProps> = ({ user }) => {
   return (
     <Group>
       <Group>
-        <Text>Spotlight actions:</Text>
+        <Text>{t('titles.spotlight-action')}:</Text>
         <div dir="ltr">
           <Kbd>CMD</Kbd> + <Kbd>K</Kbd> or <Kbd>CTRL</Kbd> + <Kbd>K</Kbd>
         </div>
@@ -49,10 +51,10 @@ const SsrHeader: React.FC<SsrHeaderProps> = ({ user }) => {
         </Menu.Target>
         <Menu.Dropdown>
           <Menu.Item onClick={() => router.push("/settings")}>
-            Settings
+            {t('titles.settings')}
           </Menu.Item>
           <Menu.Item color="red" onClick={logOut}>
-            Log out
+            {t('titles.log-out')}
           </Menu.Item>
         </Menu.Dropdown>
       </Menu>
diff --git a/web/public/locales/en/common.json b/web/public/locales/en/common.json
index 0ee2db76..13ccd2ce 100644
--- a/web/public/locales/en/common.json
+++ b/web/public/locales/en/common.json
@@ -5,9 +5,16 @@
   "report-bug": "Report bug",
   "students": "Students",
   "tutors": "Tutors",
+  "titles": {
+    "create-tutor": "Create Tutor",
+    "spotlight-actions": "Spotlight actions",
+    "settings": "Settings",
+    "log-out": "Log out"
+  },
   "cols": {
     "id": "ID",
-    "username": "Username"
+    "username": "Username",
+    "actions": "Actions"
   },
   "fields": {
     "username": "Username",
@@ -15,7 +22,8 @@
     "password": "Password",
     "password-placeholder": "Your password",
     "title": "Title",
-    "description": "Description"
+    "description": "Description",
+    "test-file": "Test File"
   },
   "actions": {
     "approve": "Approve",
@@ -29,7 +37,11 @@
     "remove": "Remove",
     "save": "Save",
     "create": "Create",
-    "update": "Update"
+    "update": "Update",
+    "copy": "Copy",
+    "expand-all": "Expand all",
+    "collapse-all": "Collapse all",
+    "navigate-back": "Navigate back"
   },
   "messages": {
     "login-failed": "Login failed",
@@ -37,13 +49,24 @@
     "password-requirements": "Password should include at least 6 characters",
     "success": "Success",
     "error": "Error",
-    "created-report": "Created report"
+    "created-report": "Created report",
+    "no-files-selected": "No files selected",
+    "copied-code": "Copied code!",
+    "rejected-files": "Rejected files"
   },
   "errors": {
     "title-empty": "The title should not be empty",
-    "body-empty": "The body should not be empty"
+    "body-empty": "The body should not be empty",
+    "username-empty": "Username should not be empty",
+    "password-empty": "The password should not be empty",
+    "create-tutor": "Failed to create tutor",
+    "folder-exists": "Folder/File already exists"
   },
   "settings": {
     "settings": "Settings"
+  },
+  "dropzone": {
+    "instruction": "Drag text files here or click to select files",
+    "limit": "Attach as many files as you like, each file should not exceed 10mb"
   }
 }
diff --git a/web/public/locales/en/routes.json b/web/public/locales/en/routes.json
new file mode 100644
index 00000000..280fd679
--- /dev/null
+++ b/web/public/locales/en/routes.json
@@ -0,0 +1,5 @@
+{
+  "impress": "Impress",
+  "privacy": "Privacy",
+  "report-bug": "Report bug"
+}

From 06da5454d8b67fcafefadb48a28368fd8ba04d02 Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Fri, 8 Nov 2024 11:51:58 +0100
Subject: [PATCH 08/14] feat: Added translations for group components

---
 web/components/SsrHeader.tsx                  |  2 +-
 .../group/CreateAssignmentWishModal.tsx       | 20 ++++++++++---------
 web/components/group/CreateGroupModal.tsx     | 17 +++++++++-------
 .../group/GroupAssignmentWishesTab.tsx        | 14 +++++++------
 web/public/locales/en/assignment.json         |  6 ++++--
 web/public/locales/en/common.json             | 10 +++++++---
 6 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/web/components/SsrHeader.tsx b/web/components/SsrHeader.tsx
index 0af8905f..39c481c8 100644
--- a/web/components/SsrHeader.tsx
+++ b/web/components/SsrHeader.tsx
@@ -40,7 +40,7 @@ const SsrHeader: React.FC<SsrHeaderProps> = ({ user }) => {
   return (
     <Group>
       <Group>
-        <Text>{t('titles.spotlight-action')}:</Text>
+        <Text>{t('titles.spotlight-actions')}:</Text>
         <div dir="ltr">
           <Kbd>CMD</Kbd> + <Kbd>K</Kbd> or <Kbd>CTRL</Kbd> + <Kbd>K</Kbd>
         </div>
diff --git a/web/components/group/CreateAssignmentWishModal.tsx b/web/components/group/CreateAssignmentWishModal.tsx
index 0e78c9c6..bafe8692 100644
--- a/web/components/group/CreateAssignmentWishModal.tsx
+++ b/web/components/group/CreateAssignmentWishModal.tsx
@@ -2,6 +2,7 @@ import useApiServiceClient from "@/hooks/useApiServiceClient";
 import {Button, Group, Modal, Stack, Textarea, TextInput} from "@mantine/core";
 import {useForm} from "@mantine/form";
 import {showNotification} from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
 
 interface CreateAssignmentWishModalProps {
     onClose: () => void;
@@ -11,6 +12,7 @@ interface CreateAssignmentWishModalProps {
 
 const CreateAssignmentWishModal = ({onClose, refetch, groupId}: CreateAssignmentWishModalProps) => {
 
+    const {t} = useTranslation(['common', 'assignment']);
     const api = useApiServiceClient();
     const form = useForm({
         initialValues: {
@@ -18,8 +20,8 @@ const CreateAssignmentWishModal = ({onClose, refetch, groupId}: CreateAssignment
             description: '',
         },
         validate: {
-            title: (val) => val.trim() == '' ? 'Title should not be empty' : null,
-            description: (val) => val.trim() == '' ? 'The description should not be empty' : null,
+            title: (val) => val.trim() == '' ? t('errors.title-empty') : null,
+            description: (val) => val.trim() == '' ? t('errors.description-empty') : null,
         }
     });
 
@@ -30,22 +32,22 @@ const CreateAssignmentWishModal = ({onClose, refetch, groupId}: CreateAssignment
             onClose();
         } catch (e: any) {
             showNotification({
-                title: 'Error',
-                message: e?.message ?? "Error creating assignment wish",
+                title: t('messages.error'),
+                message: e?.message ?? t('errors.assignment-wish'),
             })
         }
     });
 
     return (
-        <Modal opened onClose={onClose} title="Create Assignment Wish">
+        <Modal opened onClose={onClose} title={t('titles.create-wish')}>
             <form onSubmit={submit}>
                 <Stack gap={2}>
-                    <TextInput label="Title" key={form.key('title')} {...form.getInputProps('title')} />
-                    <Textarea label="Description" key={form.key('description')} autosize {...form.getInputProps('description')} />
+                    <TextInput label={t('fields.title')} key={form.key('title')} {...form.getInputProps('title')} />
+                    <Textarea label={t('fields.description')} key={form.key('description')} autosize {...form.getInputProps('description')} />
                     <Group mt={10}>
-                        <Button type="submit">Create wish</Button>
+                        <Button type="submit">{t('actions.create')}</Button>
                         <Button onClick={onClose} color="gray">
-                            Cancel
+                            {t('actions.cancel')}
                         </Button>
                     </Group>
                 </Stack>
diff --git a/web/components/group/CreateGroupModal.tsx b/web/components/group/CreateGroupModal.tsx
index ad884a80..6b1be4c8 100644
--- a/web/components/group/CreateGroupModal.tsx
+++ b/web/components/group/CreateGroupModal.tsx
@@ -3,6 +3,7 @@ import {useForm} from "@mantine/form";
 import useApiServiceClient from "@/hooks/useApiServiceClient";
 import {useRouter} from "next/navigation";
 import {notifications} from "@mantine/notifications";
+import {useTranslation} from "react-i18next";
 
 interface CreateGroupModalProps {
     onClose: () => void;
@@ -10,12 +11,14 @@ interface CreateGroupModalProps {
 
 const CreateGroupModal = ({onClose}: CreateGroupModalProps) => {
 
+    const {t} = useTranslation('common');
+
     const form = useForm({
         initialValues: {
             title : ''
         },
         validate: {
-            title: (val) => val.trim() == '' ? 'Title should not be empty' : null
+            title: (val) => val.trim() == '' ? t('errors.title-empty') : null
         }
     });
     const router = useRouter();
@@ -27,20 +30,20 @@ const CreateGroupModal = ({onClose}: CreateGroupModalProps) => {
             router.push(`/groups/${res.id}`);
         } catch (e: any) {
             notifications.show({
-                title: 'Error',
-                message: e?.message ?? "Error creating group",
+                title: t('messages.error'),
+                message: e?.message ?? t('errors.create-group'),
             });
         }
     })
 
     return (
-        <Modal opened onClose={onClose} title="Create group">
+        <Modal opened onClose={onClose} title={t('titles.create-group')}>
             <form onSubmit={submit}>
-                <TextInput label="Title" key={form.key('title')} {...form.getInputProps('title')} />
+                <TextInput label={t('fields.title')} key={form.key('title')} {...form.getInputProps('title')} />
                 <Group mt={10}>
-                    <Button type="submit">Create group</Button>
+                    <Button type="submit">{t('actions.create')}</Button>
                     <Button onClick={onClose} color="gray">
-                        Cancel
+                        {t('actions.cancel')}
                     </Button>
                 </Group>
             </form>
diff --git a/web/components/group/GroupAssignmentWishesTab.tsx b/web/components/group/GroupAssignmentWishesTab.tsx
index 38cd4f21..20572e80 100644
--- a/web/components/group/GroupAssignmentWishesTab.tsx
+++ b/web/components/group/GroupAssignmentWishesTab.tsx
@@ -8,6 +8,7 @@ import useClientQuery from "@/hooks/useClientQuery";
 import useApiServiceClient from "@/hooks/useApiServiceClient";
 import {UserRoles} from "@/service/types/usernator";
 import {showNotification} from "@mantine/notifications";
+import {useTranslation} from "react-i18next";
 
 interface GroupAssignmentWishesTabProps {
     group: Group;
@@ -16,6 +17,7 @@ interface GroupAssignmentWishesTabProps {
 const GroupAssignmentWishesTab = ({group}: GroupAssignmentWishesTabProps) => {
 
     const [createModalOpen, setCreateModalOpen] = useState(false);
+    const {t} = useTranslation(['common', 'assignment']);
     const [page, setPage] = useState(1);
     const api = useApiServiceClient();
     const [wishes, refetch] = useClientQuery(() => api.getAssignmentWishes(group.id, page), [group, page]);
@@ -23,26 +25,26 @@ const GroupAssignmentWishesTab = ({group}: GroupAssignmentWishesTabProps) => {
     const cols: EntityListCol[] = [
         {
             field: 'title',
-            label: 'Title'
+            label: t('fields.title')
         },
         {
             field: 'description',
-            label: 'Description'
+            label: t('fields.description')
         }
     ];
 
     const rowActions: EntityListRowAction[] = [
         {
             auth: [UserRoles.Admin, UserRoles.Tutor],
-            name: 'Delete',
+            name: t('actions.delete'),
             onClick: async (row) => {
                 try {
                     await api.deleteAssignmentWish(group.id, row.id);
                     refetch();
                 } catch (e: any) {
                     showNotification({
-                        title: 'Error',
-                        message: e?.message ?? 'Cannot delete wish'
+                        title: t('messages.error'),
+                        message: e?.message ?? ''
                     })
                 }
             },
@@ -56,7 +58,7 @@ const GroupAssignmentWishesTab = ({group}: GroupAssignmentWishesTabProps) => {
                 <GroupComponent justify="end" mb={20}>
                     <Button onClick={() => setCreateModalOpen(true)}>
                         <IconPlus />
-                        &nbsp;Create Assignment wish
+                        &nbsp;{t('titles.create-wish')}
                     </Button>
                 </GroupComponent>
                 <EntityList
diff --git a/web/public/locales/en/assignment.json b/web/public/locales/en/assignment.json
index 29f2f0ab..bf62f10a 100644
--- a/web/public/locales/en/assignment.json
+++ b/web/public/locales/en/assignment.json
@@ -22,7 +22,8 @@
     "create-solution": "Create solution",
     "create-assignment": "Create assignment",
     "update-assignment": "Update assignment",
-    "question-catalogue": "Question catalogue"
+    "question-catalogue": "Question catalogue",
+    "create-wish": "Create assignment wish"
   },
   "messages": {
     "failed-solution-creation": "Error creating solution",
@@ -45,7 +46,8 @@
     "create-or-update": "Failed to create or update assignment",
     "all-required-fields": "Please fill all question fields",
     "failed-question-cu": "Failed to create/update question",
-    "missing-files": "Following files are missing:"
+    "missing-files": "Following files are missing:",
+    "assignment-wish": "Error creating assignment wish"
   },
   "cols": {
     "submitter": "Submitter"
diff --git a/web/public/locales/en/common.json b/web/public/locales/en/common.json
index 13ccd2ce..432ed4a1 100644
--- a/web/public/locales/en/common.json
+++ b/web/public/locales/en/common.json
@@ -9,7 +9,8 @@
     "create-tutor": "Create Tutor",
     "spotlight-actions": "Spotlight actions",
     "settings": "Settings",
-    "log-out": "Log out"
+    "log-out": "Log out",
+    "create-group": "Create group"
   },
   "cols": {
     "id": "ID",
@@ -41,7 +42,8 @@
     "copy": "Copy",
     "expand-all": "Expand all",
     "collapse-all": "Collapse all",
-    "navigate-back": "Navigate back"
+    "navigate-back": "Navigate back",
+    "delete": "Delete"
   },
   "messages": {
     "login-failed": "Login failed",
@@ -57,10 +59,12 @@
   "errors": {
     "title-empty": "The title should not be empty",
     "body-empty": "The body should not be empty",
+    "description-empty": "The description should not be empty",
     "username-empty": "Username should not be empty",
     "password-empty": "The password should not be empty",
     "create-tutor": "Failed to create tutor",
-    "folder-exists": "Folder/File already exists"
+    "folder-exists": "Folder/File already exists",
+    "create-group": "Error creating group"
   },
   "settings": {
     "settings": "Settings"

From 3adc127fdb32a8f8b511fc0d16f91870b6cdd67e Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Fri, 8 Nov 2024 11:56:00 +0100
Subject: [PATCH 09/14] feat: Added translations for solution components

---
 web/components/solution/CommentTab.tsx         |  6 ++++--
 web/components/solution/CreateCommentModal.tsx | 14 ++++++++------
 web/public/locales/en/solution.json            |  4 ++++
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/web/components/solution/CommentTab.tsx b/web/components/solution/CommentTab.tsx
index cd995a51..daf772d3 100644
--- a/web/components/solution/CommentTab.tsx
+++ b/web/components/solution/CommentTab.tsx
@@ -7,6 +7,7 @@ import useCurrentUser from "@/hooks/useCurrentUser";
 import {IconPlus} from "@tabler/icons-react";
 import {useState} from "react";
 import CreateCommentModal from "@/components/solution/CreateCommentModal";
+import {useTranslation} from "react-i18next";
 
 interface CommentTabProps {
     solution: Solution;
@@ -18,20 +19,21 @@ const CommentTab = ({solution}: CommentTabProps) => {
     const {user} = useCurrentUser();
     const [createModalOpen, setCreateModalOpen] = useState(false);
     const [comments, refetch] = useClientQuery(() => api.getCodeComments(solution.id));
+    const {t} = useTranslation(['common', 'solution']);
 
     return (
         <>
             <Stack gap={10}>
                 <Group justify="flex-end">
                     <Button onClick={() => setCreateModalOpen(true)}><IconPlus />
-                        &nbsp;Create Comment</Button>
+                        &nbsp;{t('titles.create-comment')}</Button>
                 </Group>
                 {(comments ?? []).map((comment) => (
                     <Card shadow="sm" padding="lg" radius="md" withBorder key={comment.id}>
                         <Group>
                             <Title order={4}>{comment.title}</Title>
                             {comment.commentor === user?.id && (
-                                <Badge color="green">Your comment</Badge>
+                                <Badge color="green">{t('titles.your-comment')}</Badge>
                             )}
                         </Group>
                         <RichTextDisplay content={comment.content} fullSize={false} />
diff --git a/web/components/solution/CreateCommentModal.tsx b/web/components/solution/CreateCommentModal.tsx
index be7337c3..c9e09a8d 100644
--- a/web/components/solution/CreateCommentModal.tsx
+++ b/web/components/solution/CreateCommentModal.tsx
@@ -4,6 +4,7 @@ import {useForm} from "@mantine/form";
 import RichTextInput from "@/components/form/RichTextInput";
 import useApiServiceClient from "@/hooks/useApiServiceClient";
 import {notifications} from "@mantine/notifications";
+import {useTranslation} from "react-i18next";
 
 
 interface CreateCommentModalProps {
@@ -21,6 +22,7 @@ const CreateCommentModal = ({solution, refetch, onClose}: CreateCommentModalProp
         }
     });
     const api = useApiServiceClient();
+    const {t} = useTranslation(['common', 'solution']);
 
     const onSubmit = form.onSubmit(async (values) => {
         try {
@@ -29,17 +31,17 @@ const CreateCommentModal = ({solution, refetch, onClose}: CreateCommentModalProp
             onClose();
         } catch (e: any) {
             notifications.show({
-                title: 'Error',
-                message: e?.message ?? "Failed to create comment",
+                title: t('messages.error'),
+                message: e?.message ?? "",
             })
         }
     });
 
     return (
-        <Modal opened onClose={onClose} title="Create code comment" size="xl">
+        <Modal opened onClose={onClose} title={t('titles.create-comment')} size="xl">
             <form onSubmit={onSubmit}>
                 <Stack gap={10}>
-                    <TextInput label="Title" key={form.key('title')} {...form.getInputProps('title')} />
+                    <TextInput label={t('fields.title')} key={form.key('title')} {...form.getInputProps('title')} />
                     <RichTextInput
                         key={form.key('content')}
                         content={form.getInputProps('content').value}
@@ -49,10 +51,10 @@ const CreateCommentModal = ({solution, refetch, onClose}: CreateCommentModalProp
                 <Divider mt={10} />
                 <Group mt={10}>
                     <Button type="submit">
-                        Create questions
+                        {t('actions.create')}
                     </Button>
                     <Button onClick={onClose} color="gray">
-                        Cancel
+                        {t('actions.cancel')}
                     </Button>
                 </Group>
             </form>
diff --git a/web/public/locales/en/solution.json b/web/public/locales/en/solution.json
index 9549bd88..6bb39dff 100644
--- a/web/public/locales/en/solution.json
+++ b/web/public/locales/en/solution.json
@@ -14,6 +14,10 @@
     "failed": "Failed",
     "pending": "Pending"
   },
+  "titles": {
+    "create-comment": "Create comment",
+    "your-comment": "Your comment"
+  },
   "cols": {
     "assignment": "Assignment",
     "approval-status": "Approval status"

From ad491955230c9ca5d19e991d31459b5738b37de4 Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Fri, 8 Nov 2024 11:57:10 +0100
Subject: [PATCH 10/14] feat: Added translations for spotlight components

---
 web/components/spotlight/SpotlightWrapper.tsx | 6 ++++--
 web/public/locales/en/common.json             | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/components/spotlight/SpotlightWrapper.tsx b/web/components/spotlight/SpotlightWrapper.tsx
index 42ed1e64..a014a50e 100644
--- a/web/components/spotlight/SpotlightWrapper.tsx
+++ b/web/components/spotlight/SpotlightWrapper.tsx
@@ -2,14 +2,16 @@ import useActionsFactory from "@/hooks/spotlight/useActionsFactory";
 import { rem } from "@mantine/core";
 import { Spotlight } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
+import {useTranslation} from "react-i18next";
 
 const SpotlightWrapper = () => {
   const actions = useActionsFactory();
+  const {t} = useTranslation('common')
 
   return (
     <Spotlight
       actions={actions}
-      nothingFound="Nothing found..."
+      nothingFound={t('spotlight.nothing-found')}
       highlightQuery
       limit={20}
       searchProps={{
@@ -19,7 +21,7 @@ const SpotlightWrapper = () => {
             stroke={1.5}
           />
         ),
-        placeholder: "Search...",
+        placeholder: t('spotlight.search'),
       }}
     />
   );
diff --git a/web/public/locales/en/common.json b/web/public/locales/en/common.json
index 432ed4a1..0f5df823 100644
--- a/web/public/locales/en/common.json
+++ b/web/public/locales/en/common.json
@@ -72,5 +72,9 @@
   "dropzone": {
     "instruction": "Drag text files here or click to select files",
     "limit": "Attach as many files as you like, each file should not exceed 10mb"
+  },
+  "spotlight": {
+    "nothing-found": "Nothing found...",
+    "search": "Search..."
   }
 }

From 40892debc4ec0a064cb4f1db1c66fb68845b9f80 Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Fri, 8 Nov 2024 12:05:23 +0100
Subject: [PATCH 11/14] feat: Added translations to leftover components

---
 web/hooks/spotlight/stage2.tsx         |  8 +++++---
 web/hooks/spotlight/staticProvider.tsx | 13 ++++++++-----
 web/public/locales/en/common.json      |  9 ++++++++-
 web/public/locales/en/routes.json      |  8 +++++++-
 web/static/routes.tsx                  | 12 ++++++------
 5 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/web/hooks/spotlight/stage2.tsx b/web/hooks/spotlight/stage2.tsx
index 3b05e15b..09062074 100644
--- a/web/hooks/spotlight/stage2.tsx
+++ b/web/hooks/spotlight/stage2.tsx
@@ -3,6 +3,7 @@ import {Assignment, Group, Solution} from "@/service/types/tasky";
 import {SpotlightActionData, SpotlightActionGroupData} from "@mantine/spotlight";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import {useRouter} from "next/navigation";
+import {useTranslation} from "react-i18next";
 
 /**
  * User boundary type to ensure data is user account specific if user uses two different accounts in one browser
@@ -36,6 +37,7 @@ export const useStage2Actions = (): SpotlightActionGroupData[] => {
     const data = context.content;
     const {user} = useCurrentUser();
     const router = useRouter();
+    const {t} = useTranslation('common')
 
     const groups = useMemo<SpotlightActionData[]>(() => data.groups.filter((g) => g.userId === user?.id).map((g) => ({
         id: `group-${g.id}-${g.userId}`,
@@ -61,15 +63,15 @@ export const useStage2Actions = (): SpotlightActionGroupData[] => {
 
     return [
         {
-            group: "Groups",
+            group: t('spotlight.groups'),
             actions: groups
         },
         {
-            group: "Assignments",
+            group: t('spotlight.assignments'),
             actions: assignments
         },
         {
-            group: "Solutions",
+            group: t('spotlight.solutions'),
             actions: solutions
         }
     ];
diff --git a/web/hooks/spotlight/staticProvider.tsx b/web/hooks/spotlight/staticProvider.tsx
index 719ae379..f1383e33 100644
--- a/web/hooks/spotlight/staticProvider.tsx
+++ b/web/hooks/spotlight/staticProvider.tsx
@@ -7,6 +7,7 @@ import { Route } from "@/static/routes";
 import { useRouter } from "next/navigation";
 import { IconColorFilter } from "@tabler/icons-react";
 import { useMantineColorScheme } from "@mantine/core";
+import {useTranslation} from "react-i18next";
 
 export const useStaticRoutesActions = (): (
   | SpotlightActionGroupData
@@ -14,12 +15,13 @@ export const useStaticRoutesActions = (): (
 )[] => {
   const routes = useRoutes();
   const router = useRouter();
+  const {t} = useTranslation(['common', 'routes']);
   return [
     {
-      group: "Basic routes",
+      group: t('spotlight.basic-routes'),
       actions: routes.map((route: Route) => ({
         id: `static-route-${route.path}`,
-        label: route.name,
+        label: t(`routes:${route.name}`),
         description: route.description,
         leftSection: route.icon,
         onClick: () => router.push(route.path),
@@ -35,6 +37,7 @@ export const useStaticGeneralActions = (): (
   const { colorScheme, setColorScheme } = useMantineColorScheme({
     keepTransitions: true,
   });
+  const {t} = useTranslation('common')
 
   const toggleColorScheme = () => {
     switch (colorScheme) {
@@ -53,12 +56,12 @@ export const useStaticGeneralActions = (): (
 
   return [
     {
-      group: "General actions",
+      group: t('spotlight.general-actions'),
       actions: [
         {
           id: "general-switch-color-scheme",
-          label: "Toggle color scheme",
-          description: "Toggles the color scheme (light/dark)",
+          label: t('spotlight.color-scheme-title'),
+          description: t('spotlight.color-scheme-description'),
           leftSection: <IconColorFilter />,
           onClick: toggleColorScheme,
         },
diff --git a/web/public/locales/en/common.json b/web/public/locales/en/common.json
index 0f5df823..74ae294f 100644
--- a/web/public/locales/en/common.json
+++ b/web/public/locales/en/common.json
@@ -75,6 +75,13 @@
   },
   "spotlight": {
     "nothing-found": "Nothing found...",
-    "search": "Search..."
+    "search": "Search...",
+    "groups": "Groups",
+    "assignments": "Assignments",
+    "solutions": "Solutions",
+    "basic-routes": "Basic routes",
+    "general-actions": "General actions",
+    "color-scheme-title": "Toggle color scheme",
+    "color-scheme-description": "Toggles the color scheme (light/dark)"
   }
 }
diff --git a/web/public/locales/en/routes.json b/web/public/locales/en/routes.json
index 280fd679..00bbc6a4 100644
--- a/web/public/locales/en/routes.json
+++ b/web/public/locales/en/routes.json
@@ -1,5 +1,11 @@
 {
   "impress": "Impress",
   "privacy": "Privacy",
-  "report-bug": "Report bug"
+  "report-bug": "Report bug",
+  "dashboard": "Dashboard",
+  "students": "Students",
+  "tutors": "Tutors",
+  "my-groups": "My Groups",
+  "groups": "Groups",
+  "solutions": "Solutions"
 }
diff --git a/web/static/routes.tsx b/web/static/routes.tsx
index 376a1930..4abac97f 100644
--- a/web/static/routes.tsx
+++ b/web/static/routes.tsx
@@ -12,34 +12,34 @@ export interface Route {
 export const routes: Route[] = [
   {
     path: "/dashboard",
-    name: "Dashboard",
+    name: "dashboard",
     description: "The local dashboard",
     icon: <IconDashboard />,
   },
   {
     path: "/students",
-    name: "Students",
+    name: "students",
     description: "All students in the system",
     icon: <IconSchool />,
     authRoles: [UserRoles.Tutor, UserRoles.Admin],
   },
   {
     path: "/tutors",
-    name: "Tutors",
+    name: "tutors",
     description: "All tutors in the system",
     icon: <IconSchool />,
     authRoles: [UserRoles.Admin],
   },
   {
     path: "/my-groups",
-    name: "My Groups",
+    name: "my-groups",
     description: "All groups you are a member of",
     icon: <IconUsersGroup />,
     authRoles: [UserRoles.Tutor, UserRoles.Student],
   },
   {
     path: "/groups",
-    name: "Groups",
+    name: "groups",
     description:
       "All groups you are not a member of that you can join or access",
     icon: <IconUsersGroup />,
@@ -47,7 +47,7 @@ export const routes: Route[] = [
   },
   {
     path: "/solutions",
-    name: "Solutions",
+    name: "solutions",
     description: "All your personal solutions",
     icon: <IconFile />,
     authRoles: [UserRoles.Student],

From 07207b9f5fe8b1decede5010b272a2de7621a24c Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Fri, 8 Nov 2024 12:13:14 +0100
Subject: [PATCH 12/14] feat: Added german translations

---
 web/public/locales/de/assignment.json | 55 +++++++++++++++++
 web/public/locales/de/common.json     | 87 +++++++++++++++++++++++++++
 web/public/locales/de/dashboard.json  |  6 ++
 web/public/locales/de/group.json      | 23 +++++++
 web/public/locales/de/routes.json     | 11 ++++
 web/public/locales/de/solution.json   | 25 ++++++++
 6 files changed, 207 insertions(+)
 create mode 100644 web/public/locales/de/assignment.json
 create mode 100644 web/public/locales/de/common.json
 create mode 100644 web/public/locales/de/dashboard.json
 create mode 100644 web/public/locales/de/group.json
 create mode 100644 web/public/locales/de/routes.json
 create mode 100644 web/public/locales/de/solution.json

diff --git a/web/public/locales/de/assignment.json b/web/public/locales/de/assignment.json
new file mode 100644
index 00000000..90849bcb
--- /dev/null
+++ b/web/public/locales/de/assignment.json
@@ -0,0 +1,55 @@
+{
+  "questions": "Fragen",
+  "task": "Aufgabe",
+  "code-tests": "Code-Tests",
+  "solutions": "Lösungen",
+  "completed-by": "Abgeschlossen von",
+  "runner-configuration": "Laufkonfiguration",
+  "required-files": "Erforderliche Dateien",
+  "fields": {
+    "answer": "Antwort",
+    "question": "Frage",
+    "answer-type": "Antworttyp",
+    "cpu": "CPU",
+    "memory": "Speicher (RAM)",
+    "timeout": "Zeitüberschreitung",
+    "cmd": "Befehl",
+    "title": "Titel",
+    "due-date": "Fälligkeitsdatum",
+    "language": "Sprache"
+  },
+  "titles": {
+    "create-solution": "Lösung erstellen",
+    "create-assignment": "Aufgabe erstellen",
+    "update-assignment": "Aufgabe aktualisieren",
+    "question-catalogue": "Fragenkatalog",
+    "create-wish": "Aufgabenwunsch erstellen"
+  },
+  "messages": {
+    "failed-solution-creation": "Fehler beim Erstellen der Lösung",
+    "successfully-created-assignment": "Aufgabe erfolgreich erstellt",
+    "successfully-updated-assignment": "Aufgabe erfolgreich aktualisiert"
+  },
+  "actions": {
+    "submit-solution": "Lösung einreichen",
+    "new-question": "Neue Frage",
+    "create-assignment": "Aufgabe erstellen"
+  },
+  "errors": {
+    "invalid-cpu": "Ungültige CPU-Option",
+    "invalid-memory": "Ungültige Speicheroption",
+    "invalid-timeout": "Ungültige Zeitüberschreitungsoption",
+    "empty-cmd": "Bitte geben Sie einen Ausführungsbefehl ein",
+    "code-test-creation-failed": "Erstellung der Code-Tests fehlgeschlagen",
+    "empty-title": "Titel sollte einen Wert enthalten",
+    "future-due-date": "Datum sollte in der Zukunft liegen",
+    "create-or-update": "Erstellung oder Aktualisierung der Aufgabe fehlgeschlagen",
+    "all-required-fields": "Bitte füllen Sie alle Fragenfelder aus",
+    "failed-question-cu": "Fehler beim Erstellen/Aktualisieren der Frage",
+    "missing-files": "Folgende Dateien fehlen:",
+    "assignment-wish": "Fehler beim Erstellen des Aufgabenwunsches"
+  },
+  "cols": {
+    "submitter": "Einreicher"
+  }
+}
diff --git a/web/public/locales/de/common.json b/web/public/locales/de/common.json
new file mode 100644
index 00000000..04e9ea9d
--- /dev/null
+++ b/web/public/locales/de/common.json
@@ -0,0 +1,87 @@
+{
+  "invalid-group-id": "Ungültige Gruppen-ID",
+  "login-to-cc": "Login zu CodeCanvas",
+  "register-cc": "Willkommen bei CodeCanvas, bitte registrieren Sie sich",
+  "report-bug": "Fehler melden",
+  "students": "Studierende",
+  "tutors": "Tutoren",
+  "titles": {
+    "create-tutor": "Tutor erstellen",
+    "spotlight-actions": "Spotlight-Aktionen",
+    "settings": "Einstellungen",
+    "log-out": "Abmelden",
+    "create-group": "Gruppe erstellen"
+  },
+  "cols": {
+    "id": "ID",
+    "username": "Benutzername",
+    "actions": "Aktionen"
+  },
+  "fields": {
+    "username": "Benutzername",
+    "username-placeholder": "Ihr Benutzername",
+    "password": "Passwort",
+    "password-placeholder": "Ihr Passwort",
+    "title": "Titel",
+    "description": "Beschreibung",
+    "test-file": "Testdatei"
+  },
+  "actions": {
+    "approve": "Genehmigen",
+    "reject": "Ablehnen",
+    "view": "Ansehen",
+    "login": "Anmelden",
+    "sign-up": "Registrieren",
+    "submit": "Einreichen",
+    "create-tutor": "Tutor erstellen",
+    "cancel": "Abbrechen",
+    "remove": "Entfernen",
+    "save": "Speichern",
+    "create": "Erstellen",
+    "update": "Aktualisieren",
+    "copy": "Kopieren",
+    "expand-all": "Alle erweitern",
+    "collapse-all": "Alle reduzieren",
+    "navigate-back": "Zurück navigieren",
+    "delete": "Löschen"
+  },
+  "messages": {
+    "login-failed": "Anmeldung fehlgeschlagen",
+    "registration-failed": "Registrierung fehlgeschlagen",
+    "password-requirements": "Das Passwort sollte mindestens 6 Zeichen enthalten",
+    "success": "Erfolg",
+    "error": "Fehler",
+    "created-report": "Bericht erstellt",
+    "no-files-selected": "Keine Dateien ausgewählt",
+    "copied-code": "Code kopiert!",
+    "rejected-files": "Abgelehnte Dateien"
+  },
+  "errors": {
+    "title-empty": "Der Titel darf nicht leer sein",
+    "body-empty": "Der Inhalt darf nicht leer sein",
+    "description-empty": "Die Beschreibung darf nicht leer sein",
+    "username-empty": "Der Benutzername darf nicht leer sein",
+    "password-empty": "Das Passwort darf nicht leer sein",
+    "create-tutor": "Erstellung des Tutors fehlgeschlagen",
+    "folder-exists": "Ordner/Datei existiert bereits",
+    "create-group": "Fehler beim Erstellen der Gruppe"
+  },
+  "settings": {
+    "settings": "Einstellungen"
+  },
+  "dropzone": {
+    "instruction": "Ziehen Sie Textdateien hierher oder klicken Sie, um Dateien auszuwählen",
+    "limit": "Hängen Sie beliebig viele Dateien an, jede Datei sollte nicht größer als 10 MB sein"
+  },
+  "spotlight": {
+    "nothing-found": "Nichts gefunden...",
+    "search": "Suchen...",
+    "groups": "Gruppen",
+    "assignments": "Aufgaben",
+    "solutions": "Lösungen",
+    "basic-routes": "Grundlegende Routen",
+    "general-actions": "Allgemeine Aktionen",
+    "color-scheme-title": "Farbschema umschalten",
+    "color-scheme-description": "Schaltet das Farbschema um (hell/dunkel)"
+  }
+}
diff --git a/web/public/locales/de/dashboard.json b/web/public/locales/de/dashboard.json
new file mode 100644
index 00000000..32c75c8f
--- /dev/null
+++ b/web/public/locales/de/dashboard.json
@@ -0,0 +1,6 @@
+{
+  "welcome-back": "Willkommen zurück,",
+  "us-again-text": "Hey, wir sind es wieder. Bitte beachten Sie, dass diese Software völlig kostenlos für Sie ist. Wir speichern keine persönlichen Daten außer Ihrem Benutzernamen und Passwort. Trotzdem müssen wir unsere Gebühren für Domains und Server-Hosting bezahlen. Wenn Sie möchten, können Sie uns gerne unterstützen, denn die Entwicklung dieser Anwendung nimmt viel Zeit in Anspruch.",
+  "ole-title": "Oleggtro: Beiträger des Jahres!",
+  "ole-text": "Im Laufe des Jahres hat Oleggtro immer wieder sein Bestes gegeben und kontinuierlich Einblicke, Wissen und Unterstützung mit unserer Community geteilt. Sein Engagement und seine Beiträge hatten einen bedeutenden Einfluss, bereicherten unsere Plattform und setzten einen hohen Standard für die Zusammenarbeit. Vielen Dank, Oleggtro, für deine harte Arbeit, Leidenschaft und unerschütterliche Hingabe. Wir sind unglaublich dankbar, dich als Teil unseres Teams zu haben! Auf viele weitere Erfolge gemeinsam."
+}
diff --git a/web/public/locales/de/group.json b/web/public/locales/de/group.json
new file mode 100644
index 00000000..96e2f108
--- /dev/null
+++ b/web/public/locales/de/group.json
@@ -0,0 +1,23 @@
+{
+  "groups": "Gruppen",
+  "my-groups": "Meine Gruppen",
+  "tabs": {
+    "assignments": "Aufgaben",
+    "members": "Mitglieder",
+    "assignment-wishes": "Aufgabenwünsche",
+    "join-requests": "Beitrittsanfragen"
+  },
+  "cols": {
+    "title": "Titel",
+    "members-count": "Anzahl der Mitglieder",
+    "tutor": "Tutor"
+  },
+  "actions": {
+    "request-join": "Beitritt anfragen",
+    "create-group": "Gruppe erstellen"
+  },
+  "messages": {
+    "join-request-created-title": "Beitrittsanfrage erstellt",
+    "join-request-created-text": "Beitrittsanfrage für die Gruppe erstellt "
+  }
+}
diff --git a/web/public/locales/de/routes.json b/web/public/locales/de/routes.json
new file mode 100644
index 00000000..33ddf40f
--- /dev/null
+++ b/web/public/locales/de/routes.json
@@ -0,0 +1,11 @@
+{
+  "impress": "Impressum",
+  "privacy": "Datenschutz",
+  "report-bug": "Fehler melden",
+  "dashboard": "Dashboard",
+  "students": "Studierende",
+  "tutors": "Tutoren",
+  "my-groups": "Meine Gruppen",
+  "groups": "Gruppen",
+  "solutions": "Lösungen"
+}
diff --git a/web/public/locales/de/solution.json b/web/public/locales/de/solution.json
new file mode 100644
index 00000000..ecb1ce05
--- /dev/null
+++ b/web/public/locales/de/solution.json
@@ -0,0 +1,25 @@
+{
+  "invalid-solution-id": "Ungültige Lösungs-ID",
+  "personal-solutions": "Persönliche Lösungen",
+  "tabs": {
+    "answers": "Antworten",
+    "log": "Protokoll",
+    "code": "Code",
+    "comments": "Kommentare"
+  },
+  "status": {
+    "approved": "Genehmigt",
+    "rejected": "Abgelehnt",
+    "successful": "Erfolgreich",
+    "failed": "Fehlgeschlagen",
+    "pending": "Ausstehend"
+  },
+  "titles": {
+    "create-comment": "Kommentar erstellen",
+    "your-comment": "Ihr Kommentar"
+  },
+  "cols": {
+    "assignment": "Aufgabe",
+    "approval-status": "Genehmigungsstatus"
+  }
+}

From 25a60bd76e2992d5ae96755cde5866e64aead43e Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Fri, 8 Nov 2024 12:25:24 +0100
Subject: [PATCH 13/14] fix: Fixed missing or invalid translations

---
 .../[groupId]/assignments/[assignmentId]/page.tsx  | 14 +++++++-------
 web/app/groups/displayComponent.tsx                |  6 +++---
 web/app/groups/page.tsx                            |  2 +-
 web/app/solutions/[id]/page.tsx                    |  4 ++--
 .../AssignmentCreateOrUpdateCodeTestModal.tsx      |  4 ++--
 .../assignments/AssignmentDetailsTaskTab.tsx       |  2 +-
 .../assignments/AssignmentSolutionsTab.tsx         |  6 +++---
 .../assignments/CreateOrUpdateAssignmentModal.tsx  |  4 ++--
 .../assignments/CreateOrUpdateQuestionsModal.tsx   |  6 +++---
 .../assignments/questions/QuestionInput.tsx        |  2 +-
 web/components/group/GroupAssignmentWishesTab.tsx  |  2 +-
 web/components/solution/CommentTab.tsx             |  4 ++--
 web/components/solution/CreateCommentModal.tsx     |  2 +-
 13 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/web/app/groups/[groupId]/assignments/[assignmentId]/page.tsx b/web/app/groups/[groupId]/assignments/[assignmentId]/page.tsx
index 9dbb5abf..0220601c 100644
--- a/web/app/groups/[groupId]/assignments/[assignmentId]/page.tsx
+++ b/web/app/groups/[groupId]/assignments/[assignmentId]/page.tsx
@@ -72,33 +72,33 @@ const AssignmentDetailsPage = ({
         {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) &&
           assignment.language !== AssignmentLanguage.QuestionBased && (
             <Button onClick={() => setFileStructureModalOpen(true)}>
-              {t('code-tests')}
+              {t('assignment:code-tests')}
             </Button>
           )}
         {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) &&
           assignment.language === AssignmentLanguage.QuestionBased && (
             <Button onClick={() => setQuestionsModalOpen(true)}>
-              {t('questions')}
+              {t('assignment:questions')}
             </Button>
           )}
       </Group>
       <Tabs defaultValue="task">
         <Tabs.List>
-          <Tabs.Tab value="task">{t('task')}</Tabs.Tab>
+          <Tabs.Tab value="task">{t('assignment:task')}</Tabs.Tab>
           {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) &&
             assignment.file_structure !== null &&
             assignment.language !== AssignmentLanguage.QuestionBased && (
-              <Tabs.Tab value="codeTests">{t('code-tests')}</Tabs.Tab>
+              <Tabs.Tab value="codeTests">{t('assignment:code-tests')}</Tabs.Tab>
             )}
           {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) &&
             assignment.question_catalogue !== null &&
             assignment.language === AssignmentLanguage.QuestionBased && (
-              <Tabs.Tab value="questions">{t('questions')}</Tabs.Tab>
+              <Tabs.Tab value="questions">{t('assignment:questions')}</Tabs.Tab>
             )}
           {isGranted(user, [UserRoles.Tutor, UserRoles.Admin]) && (
             <>
-              <Tabs.Tab value="solutions">{t('solutions')}</Tabs.Tab>
-              <Tabs.Tab value="completedBy">{t('completed-by')}</Tabs.Tab>
+              <Tabs.Tab value="solutions">{t('assignment:solutions')}</Tabs.Tab>
+              <Tabs.Tab value="completedBy">{t('assignment:completed-by')}</Tabs.Tab>
             </>
           )}
         </Tabs.List>
diff --git a/web/app/groups/displayComponent.tsx b/web/app/groups/displayComponent.tsx
index 44f20984..71e44edf 100644
--- a/web/app/groups/displayComponent.tsx
+++ b/web/app/groups/displayComponent.tsx
@@ -32,15 +32,15 @@ const GroupsDisplayComponent = ({
     },
     {
       field: "title",
-      label: t('cols.title'),
+      label: t('group:cols.title'),
     },
     {
       field: "member_count",
-      label: t('cols.members-count'),
+      label: t('group:cols.members-count'),
     },
     {
       field: "tutor",
-      label: t('cols.tutor'),
+      label: t('group:cols.tutor'),
       getter: (row) => row.tutor.username,
     },
   ];
diff --git a/web/app/groups/page.tsx b/web/app/groups/page.tsx
index 931b7f96..9ec8c0f9 100644
--- a/web/app/groups/page.tsx
+++ b/web/app/groups/page.tsx
@@ -13,7 +13,7 @@ const GroupsPage = () => {
   const [groups, refetch] = useClientQuery<GroupsResponse>(() =>
     api.getGroups(page),
   [page]);
-  const {t} = useTranslation('groups');
+  const {t} = useTranslation('group');
 
   return (
     <Container fluid>
diff --git a/web/app/solutions/[id]/page.tsx b/web/app/solutions/[id]/page.tsx
index a240b13f..d35ccd01 100644
--- a/web/app/solutions/[id]/page.tsx
+++ b/web/app/solutions/[id]/page.tsx
@@ -97,10 +97,10 @@ const SolutionDetailsPage = ({ params }: { params: { id: string } }) => {
           ) > -1 && (
             <>
               <Button color="lime" onClick={approve}>
-                {t('actions.approve')}
+                {t('common:actions.approve')}
               </Button>
               <Button color="red" onClick={reject}>
-                {t('actions.reject')}
+                {t('common:actions.reject')}
               </Button>
             </>
           )}
diff --git a/web/components/assignments/AssignmentCreateOrUpdateCodeTestModal.tsx b/web/components/assignments/AssignmentCreateOrUpdateCodeTestModal.tsx
index 64119a25..a1e4b236 100644
--- a/web/components/assignments/AssignmentCreateOrUpdateCodeTestModal.tsx
+++ b/web/components/assignments/AssignmentCreateOrUpdateCodeTestModal.tsx
@@ -113,9 +113,9 @@ const AssignmentCreateOrUpdateCodeTestModal = ({
           {...form.getInputProps("runner_cmd")}
         />
         <Group mt={10}>
-          <Button type="submit">{t('actions.save')}</Button>
+          <Button type="submit">{t('common:actions.save')}</Button>
           <Button onClick={onClose} color="gray">
-            {t('actions.cancel')}
+            {t('common:actions.cancel')}
           </Button>
         </Group>
       </form>
diff --git a/web/components/assignments/AssignmentDetailsTaskTab.tsx b/web/components/assignments/AssignmentDetailsTaskTab.tsx
index 4c3b8027..d27e6541 100644
--- a/web/components/assignments/AssignmentDetailsTaskTab.tsx
+++ b/web/components/assignments/AssignmentDetailsTaskTab.tsx
@@ -32,7 +32,7 @@ const AssignmentDetailsTaskTab = ({
 
   return (
     <>
-      <Title order={3}>Task</Title>
+      <Title order={3}>{t('task')}</Title>
       <RichTextDisplay
         content={assignment?.description ?? ""}
         fullSize={true}
diff --git a/web/components/assignments/AssignmentSolutionsTab.tsx b/web/components/assignments/AssignmentSolutionsTab.tsx
index f2a82748..62ed6310 100644
--- a/web/components/assignments/AssignmentSolutionsTab.tsx
+++ b/web/components/assignments/AssignmentSolutionsTab.tsx
@@ -31,16 +31,16 @@ const AssignmentSolutionsTab = ({
   const cols: EntityListCol[] = [
     {
       field: "id",
-      label: t('cols.id'),
+      label: t('common:cols.id'),
     },
     {
       field: "submitter",
-      label: t('cols.submitter'),
+      label: t('assignment:cols.submitter'),
       getter: (row) => row.submitter.username,
     },
     {
       field: "approval_status",
-      label: t('cols.approval-status'),
+      label: t('solution:cols.approval-status'),
       render: (value) => (
         <SolutionBadge status={value as string} />
       ),
diff --git a/web/components/assignments/CreateOrUpdateAssignmentModal.tsx b/web/components/assignments/CreateOrUpdateAssignmentModal.tsx
index 65c29a0f..68e7ac52 100644
--- a/web/components/assignments/CreateOrUpdateAssignmentModal.tsx
+++ b/web/components/assignments/CreateOrUpdateAssignmentModal.tsx
@@ -118,10 +118,10 @@ const CreateOrUpdateAssignmentModal = ({
         />
         <Group mt={10}>
           <Button type="submit">
-            {action === "create" ? t('actions.create') : t('actions.update')}
+            {action === "create" ? t('common:actions.create') : t('common:actions.update')}
           </Button>
           <Button onClick={onClose} color="gray">
-            {t('actions.cancel')}
+            {t('common:actions.cancel')}
           </Button>
         </Group>
       </form>
diff --git a/web/components/assignments/CreateOrUpdateQuestionsModal.tsx b/web/components/assignments/CreateOrUpdateQuestionsModal.tsx
index 1eee270e..e07d090d 100644
--- a/web/components/assignments/CreateOrUpdateQuestionsModal.tsx
+++ b/web/components/assignments/CreateOrUpdateQuestionsModal.tsx
@@ -78,7 +78,7 @@ const CreateOrUpdateQuestionsModal = ({
     } catch (e: any) {
       notifications.show({
         title: t('messages.error'),
-        message: e?.message ?? t('errors.failed-question-cu'),
+        message: e?.message ?? t('assignment:errors.failed-question-cu'),
         color: "red",
       });
     }
@@ -88,7 +88,7 @@ const CreateOrUpdateQuestionsModal = ({
     <Modal
       opened={true}
       onClose={onClose}
-      title={t('titles.question-catalogue')}
+      title={t('assignment:titles.question-catalogue')}
       size="xl"
     >
       <Stack>
@@ -102,7 +102,7 @@ const CreateOrUpdateQuestionsModal = ({
         ))}
         <Group justify="flex-end">
           <Button onClick={addNew} w={150}>
-            {t('actions.new-question')}
+            {t('assignment:actions.new-question')}
           </Button>
         </Group>
       </Stack>
diff --git a/web/components/assignments/questions/QuestionInput.tsx b/web/components/assignments/questions/QuestionInput.tsx
index a29d055b..81ac44ee 100644
--- a/web/components/assignments/questions/QuestionInput.tsx
+++ b/web/components/assignments/questions/QuestionInput.tsx
@@ -60,7 +60,7 @@ const QuestionInput = ({ value, setValue, remove }: QuestionInputProps) => {
       <Stack>
         <Group justify="flex-end">
           <Button onClick={remove} w={100} color="red">
-            {t('actions.remove')}
+            {t('common:actions.remove')}
           </Button>
         </Group>
         <TextInput
diff --git a/web/components/group/GroupAssignmentWishesTab.tsx b/web/components/group/GroupAssignmentWishesTab.tsx
index 20572e80..ddb89c9f 100644
--- a/web/components/group/GroupAssignmentWishesTab.tsx
+++ b/web/components/group/GroupAssignmentWishesTab.tsx
@@ -58,7 +58,7 @@ const GroupAssignmentWishesTab = ({group}: GroupAssignmentWishesTabProps) => {
                 <GroupComponent justify="end" mb={20}>
                     <Button onClick={() => setCreateModalOpen(true)}>
                         <IconPlus />
-                        &nbsp;{t('titles.create-wish')}
+                        &nbsp;{t('assignment:titles.create-wish')}
                     </Button>
                 </GroupComponent>
                 <EntityList
diff --git a/web/components/solution/CommentTab.tsx b/web/components/solution/CommentTab.tsx
index daf772d3..b7cefdd4 100644
--- a/web/components/solution/CommentTab.tsx
+++ b/web/components/solution/CommentTab.tsx
@@ -26,14 +26,14 @@ const CommentTab = ({solution}: CommentTabProps) => {
             <Stack gap={10}>
                 <Group justify="flex-end">
                     <Button onClick={() => setCreateModalOpen(true)}><IconPlus />
-                        &nbsp;{t('titles.create-comment')}</Button>
+                        &nbsp;{t('solution:titles.create-comment')}</Button>
                 </Group>
                 {(comments ?? []).map((comment) => (
                     <Card shadow="sm" padding="lg" radius="md" withBorder key={comment.id}>
                         <Group>
                             <Title order={4}>{comment.title}</Title>
                             {comment.commentor === user?.id && (
-                                <Badge color="green">{t('titles.your-comment')}</Badge>
+                                <Badge color="green">{t('solution:titles.your-comment')}</Badge>
                             )}
                         </Group>
                         <RichTextDisplay content={comment.content} fullSize={false} />
diff --git a/web/components/solution/CreateCommentModal.tsx b/web/components/solution/CreateCommentModal.tsx
index c9e09a8d..6a3ae6f7 100644
--- a/web/components/solution/CreateCommentModal.tsx
+++ b/web/components/solution/CreateCommentModal.tsx
@@ -38,7 +38,7 @@ const CreateCommentModal = ({solution, refetch, onClose}: CreateCommentModalProp
     });
 
     return (
-        <Modal opened onClose={onClose} title={t('titles.create-comment')} size="xl">
+        <Modal opened onClose={onClose} title={t('solution:titles.create-comment')} size="xl">
             <form onSubmit={onSubmit}>
                 <Stack gap={10}>
                     <TextInput label={t('fields.title')} key={form.key('title')} {...form.getInputProps('title')} />

From 696880ed2c0af448db9918fb3d9f8a97bcc6e447 Mon Sep 17 00:00:00 2001
From: Mathis Burger <handymathis@gmail.com>
Date: Fri, 8 Nov 2024 12:27:56 +0100
Subject: [PATCH 14/14] chore: Updated release notes in frontend

---
 web/app/dashboard/page.tsx | 13 +++++++------
 web/package.json           |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/app/dashboard/page.tsx b/web/app/dashboard/page.tsx
index f1fe18ce..ab793bf5 100644
--- a/web/app/dashboard/page.tsx
+++ b/web/app/dashboard/page.tsx
@@ -42,14 +42,15 @@ const DashboardPage = () => {
                     padding="xl"
                     mt={20}
                 >
-                    <Title order={2}>Release v0.1.5</Title>
+                    <Title order={2}>Release v0.2.0</Title>
                     <Text>
                         We had some groundbreaking changes within our app for the current release:<br />
-                        - Comments on solutions by the tutor <br/>
-                        - Stage2 spotlight search <br/>
-                        - Bug reporting feature <br/>
-                        - Assignment wishes within the group <br/>
-                        - Assignments without due date
+                        - German translation <br/>
+                        - Login attempt limit <br/>
+                        - Some minor bug fixes <br/>
+                        - Pagination <br/>
+                        - Code View tabs <br/>
+                        - Some administrative & performance updates
                     </Text>
                 </Card>
             </Grid.Col>
diff --git a/web/package.json b/web/package.json
index f4e89bd0..3c089078 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",