added german translation

2025-10-26 13:37:15 +01:00
parent 965a4b97ee
commit 7e668e17d3
6 changed files with 166 additions and 104 deletions
--- a/FrontendV2/src/components/Header.tsx
+++ b/FrontendV2/src/components/Header.tsx
@@ -31,7 +31,6 @@ import { useUserContext } from "@/states/Context";
 import { useState } from "react";
 import MyAlert from "./myChakra/MyAlert";
 import { useTranslation } from "react-i18next";
-import { Trans } from "react-i18next";

 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
@@ -61,8 +60,8 @@ export const Header = () => {

  const changePassword = async () => {
    if (newPassword !== confirmPassword) {
-      setMsgTitle("Passwortänderung fehlgeschlagen");
-      setMsgDescription("Passwörter stimmen nicht überein");
+      setMsgTitle(t("err_pw_change"));
+      setMsgDescription(t("pw_mismatch"));
      setMsgStatus("error");
      setIsMsg(true);
      return;
@@ -78,15 +77,15 @@ export const Header = () => {
    });

    if (!response.ok) {
-      setMsgTitle("Passwortänderung fehlgeschlagen");
-      setMsgDescription("Bitte überprüfen Sie Ihre Eingaben");
+      setMsgTitle(t("err_pw_change"));
+      setMsgDescription(t("pw_mismatch"));
      setMsgStatus("error");
      setIsMsg(true);
      return;
    }

-    setMsgTitle("Passwort erfolgreich geändert");
-    setMsgDescription("Ihr Passwort wurde erfolgreich geändert");
+    setMsgTitle(t("pw_success"));
+    setMsgDescription(t("pw_success_desc"));
    setMsgStatus("success");
    setIsMsg(true);

@@ -143,7 +142,7 @@ export const Header = () => {
                children={
                  <HStack gap={3}>
                    <CalendarPlus size={16} />
-                    <Text as="span">Ausleihe erstellen</Text>
+                    <Text as="span">{t("create-loan")}</Text>
                  </HStack>
                }
              />
@@ -153,7 +152,7 @@ export const Header = () => {
                children={
                  <HStack gap={3}>
                    <CircleUserRound size={16} />
-                    <Text as="span">Meine Ausleihen</Text>
+                    <Text as="span">{t("my-loans")}</Text>
                  </HStack>
                }
              />
@@ -163,7 +162,7 @@ export const Header = () => {
                children={
                  <HStack gap={3}>
                    <RotateCcwKey size={16} />
-                    <Text as="span">Passwort ändern</Text>
+                    <Text as="span">{t("change-password")}</Text>
                  </HStack>
                }
              />
@@ -179,7 +178,7 @@ export const Header = () => {
                children={
                  <HStack gap={3}>
                    <LifeBuoy size={16} />
-                    <Text as="span">Hilfe</Text>
+                    <Text as="span">{t("help")}</Text>
                  </HStack>
                }
              />
@@ -195,7 +194,7 @@ export const Header = () => {
                children={
                  <HStack gap={3}>
                    <Code size={16} />
-                    <Text as="span">Source Code</Text>
+                    <Text as="span">{t("source-code")}</Text>
                  </HStack>
                }
              />
@@ -206,7 +205,7 @@ export const Header = () => {
                children={
                  <HStack gap={3} color="red.500">
                    <LogOut size={16} />
-                    <Text as="span">Logout</Text>
+                    <Text as="span">{t("logout")}</Text>
                  </HStack>
                }
              />
@@ -259,21 +258,21 @@ export const Header = () => {
          >
            <HStack gap={2}>
              <CalendarPlus size={18} />
-              <Text as="span">Ausleihe erstellen</Text>
+              <Text as="span">{t("create-loan")}</Text>
            </HStack>
          </Button>

          <Button onClick={() => navigate("/my-loans", { replace: true })}>
            <HStack gap={2}>
              <CircleUserRound size={18} />
-              <Text as="span">Meine Ausleihen</Text>
+              <Text as="span">{t("my-loans")}</Text>
            </HStack>
          </Button>

          <Button variant="ghost" onClick={() => setPwOpen(true)}>
            <HStack gap={2}>
              <RotateCcwKey size={18} />
-              <Text as="span">Passwort ändern</Text>
+              <Text as="span">{t("change-password")}</Text>
            </HStack>
          </Button>

@@ -284,7 +283,7 @@ export const Header = () => {
            <Button variant="ghost">
              <HStack gap={2}>
                <LifeBuoy size={18} />
-                <Text as="span">Hilfe</Text>
+                <Text as="span">{t("help")}</Text>
              </HStack>
            </Button>
          </a>
@@ -296,7 +295,7 @@ export const Header = () => {
            <Button variant="ghost">
              <HStack gap={2}>
                <Code size={18} />
-                <Text as="span">Source Code</Text>
+                <Text as="span">{t("source-code")}</Text>
              </HStack>
            </Button>
          </a>
@@ -304,7 +303,7 @@ export const Header = () => {
          <Button onClick={logout} variant="outline" colorScheme="red">
            <HStack gap={2}>
              <LogOut size={18} />
-              <Text as="span">Logout</Text>
+              <Text as="span">{t("logout")}</Text>
            </HStack>
          </Button>
        </HStack>
@@ -317,7 +316,7 @@ export const Header = () => {
          <Dialog.Positioner>
            <Dialog.Content maxW="md">
              <Dialog.Header>
-                <Dialog.Title>Passwort ändern</Dialog.Title>
+                <Dialog.Title>{t("change-password")}</Dialog.Title>
              </Dialog.Header>
              <form
                onSubmit={(e) => {
@@ -330,17 +329,17 @@ export const Header = () => {
                    <PasswordInput
                      value={oldPassword}
                      onChange={(e) => setOldPassword(e.target.value)}
-                      placeholder="Altes Passwort"
+                      placeholder={t("old-password")}
                    />
                    <PasswordInput
                      value={newPassword}
                      onChange={(e) => setNewPassword(e.target.value)}
-                      placeholder="Neues Passwort"
+                      placeholder={t("new-password")}
                    />
                    <PasswordInput
                      value={confirmPassword}
                      onChange={(e) => setConfirmPassword(e.target.value)}
-                      placeholder="Neues Passwort wiederholen"
+                      placeholder={t("confirm-password")}
                    />
                  </Stack>
                </Dialog.Body>
@@ -355,10 +354,10 @@ export const Header = () => {
                    )}
                    <HStack justify="flex-end" gap={2}>
                      <Dialog.ActionTrigger asChild>
-                        <Button variant="outline">Abbrechen</Button>
+                        <Button variant="outline">{t("cancel")}</Button>
                      </Dialog.ActionTrigger>
                      <Button type="submit" colorScheme="teal">
-                        Speichern
+                        {t("save")}
                      </Button>
                    </HStack>
                  </Stack>
--- a/FrontendV2/src/pages/HomePage.tsx
+++ b/FrontendV2/src/pages/HomePage.tsx
@@ -15,6 +15,7 @@ import MyAlert from "@/components/myChakra/MyAlert";
 import { borrowAbleItemsAtom } from "@/states/Atoms";
 import { createLoan } from "@/utils/Fetcher";
 import { Header } from "@/components/Header";
+import { useTranslation } from "react-i18next";

 export interface User {
  username: string;
@@ -22,6 +23,8 @@ export interface User {
 }

 export const HomePage = () => {
+  const { t } = useTranslation();
+
  const [borrowableItems, setBorrowableItems] = useAtom(borrowAbleItemsAtom);
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
@@ -54,21 +57,21 @@ export const HomePage = () => {
      )}
      <Stack as="main">
        <label htmlFor="startDate">
-          <Text>Startdatum</Text>
+          <Text>{t("start-date")}</Text>
        </label>
        <Input
          id="startDate"
-          placeholder="Startdatum"
+          placeholder={t("start-date")}
          type="datetime-local"
          value={startDate}
          onChange={(e) => setStartDate(e.target.value)}
        />
        <label htmlFor="endDate">
-          <Text>Enddatum</Text>
+          <Text>{t("end-date")}</Text>
        </label>
        <Input
          id="endDate"
-          placeholder="Enddatum"
+          placeholder={t("end-date")}
          type="datetime-local"
          value={endDate}
          onChange={(e) => setEndDate(e.target.value)}
@@ -78,8 +81,8 @@ export const HomePage = () => {
            setIsLoadingA(true);
            if (!startDate || !endDate) {
              setMsgStatus("error");
-              setMsgTitle("Fehlende Eingaben");
-              setMsgDescription("Bitte Start- und Enddatum angeben.");
+              setMsgTitle(t("missing-fields"));
+              setMsgDescription(t("missing-fields-desc"));
              setIsMsg(true);
              setIsLoadingA(false);
              return;
@@ -88,9 +91,9 @@ export const HomePage = () => {
              setIsLoadingA(false);
              if (response && response.status === "error") {
                setMsgStatus("error");
-                setMsgTitle(response.title || "Fehler");
+                setMsgTitle(response.title || t("error"));
                setMsgDescription(
-                  response.description || "Unbekannter Frontend Fehler"
+                  response.description || t("unknown-error")
                );
                setIsMsg(true);
                return;
@@ -101,12 +104,12 @@ export const HomePage = () => {
            });
          }}
        >
-          Verfügbare Gegenstände anzeigen
+          {t("get-borrowable-items")}
        </Button>
        {isLoadingA && (
          <VStack colorPalette="teal">
            <Spinner color="colorPalette.600" />
-            <Text color="colorPalette.600">Loading...</Text>
+            <Text color="colorPalette.600">{t("loading")}</Text>
          </VStack>
        )}
        {borrowableItems.length > 0 && (
@@ -115,7 +118,7 @@ export const HomePage = () => {
              <Table.Header>
                <Table.Row bg="bg.subtle">
                  <Table.ColumnHeader></Table.ColumnHeader>
-                  <Table.ColumnHeader>Gegenstand</Table.ColumnHeader>
+                  <Table.ColumnHeader>{t("item")}</Table.ColumnHeader>
                </Table.Row>
              </Table.Header>

@@ -143,21 +146,21 @@ export const HomePage = () => {
              createLoan(selectedItems, startDate, endDate).then((response) => {
                if (response.status === "error") {
                  setMsgStatus("error");
-                  setMsgTitle(response.title || "Fehler");
+                  setMsgTitle(response.title || t("error"));
                  setMsgDescription(
-                    response.description || "Unbekannter Frontend Fehler"
+                    response.description || t("unknown-error")
                  );
                  setIsMsg(true);
                  return;
                }
                setMsgStatus("success");
-                setMsgTitle("Erfolg");
-                setMsgDescription("Gegenstände erfolgreich ausgeliehen.");
+                setMsgTitle(t("success"));
+                setMsgDescription(t("loan-success")) ;
                setIsMsg(true);
              })
            }
          >
-            Gegenstände ausleihen
+            {t("create-loan")}
          </Button>
        )}
      </Stack>
--- a/FrontendV2/src/pages/Landingpage.tsx
+++ b/FrontendV2/src/pages/Landingpage.tsx
@@ -12,6 +12,7 @@ import {
 } from "@chakra-ui/react";
 import { Lock, LockOpen } from "lucide-react";
 import MyAlert from "@/components/myChakra/MyAlert";
+import { useTranslation } from "react-i18next";

 export const formatDateTime = (value: string | null | undefined) => {
  if (!value) return "N/A";
@@ -45,6 +46,8 @@ type Device = {
 };

 const Landingpage: React.FC = () => {
+  const { t } = useTranslation();
+
  const [isLoading, setIsLoading] = useState(false);
  const [loans, setLoans] = useState<Loan[]>([]);
  const [devices, setDevices] = useState<Device[]>([]);
@@ -76,8 +79,8 @@ const Landingpage: React.FC = () => {
        } else {
          setError(
            "error",
-            "Fehler beim Laden",
-            "Unerwartetes Datenformat erhalten. (Ausleihen)"
+            t("error-by-loading"),
+            t("unexpected-date-format_loan")
          );
        }

@@ -88,16 +91,12 @@ const Landingpage: React.FC = () => {
        } else {
          setError(
            "error",
-            "Fehler beim Laden",
-            "Unerwartetes Datenformat erhalten. (Geräte)"
+            t("error-by-loading"),
+            t("unexpected-date-format_device")
          );
        }
      } catch (e) {
-        setError(
-          "error",
-          "Fehler beim Laden",
-          "Die Ausleihen konnten nicht geladen werden."
-        );
+        setError("error", t("error-by-loading"), t("error-fetching-loans"));
      } finally {
        setIsLoading(false);
      }
@@ -112,7 +111,7 @@ const Landingpage: React.FC = () => {
      </Heading>

      <Heading as="h2" size="md" mb={4}>
-        Alle Ausleihen
+        {t("all-loans")}
      </Heading>

      {isError && (
@@ -126,7 +125,7 @@ const Landingpage: React.FC = () => {
      {isLoading && (
        <VStack colorPalette="teal">
          <Spinner color="colorPalette.600" />
-          <Text color="colorPalette.600">Loading...</Text>
+          <Text color="colorPalette.600">{t("loading")}</Text>
        </VStack>
      )}

@@ -138,22 +137,22 @@ const Landingpage: React.FC = () => {
                <strong>#</strong>
              </Table.ColumnHeader>
              <Table.ColumnHeader>
-                <strong>Benutzername</strong>
+                <strong>{t("username")}</strong>
              </Table.ColumnHeader>
              <Table.ColumnHeader>
-                <strong>Startdatum</strong>
+                <strong>{t("start-date")}</strong>
              </Table.ColumnHeader>
              <Table.ColumnHeader>
-                <strong>Enddatum</strong>
+                <strong>{t("end-date")}</strong>
              </Table.ColumnHeader>
              <Table.ColumnHeader>
-                <strong>Ausgeliehene Artikel</strong>
+                <strong>{t("rented-items")}</strong>
              </Table.ColumnHeader>
              <Table.ColumnHeader>
-                <strong>Rückgabedatum</strong>
+                <strong>{t("return-date")}</strong>
              </Table.ColumnHeader>
              <Table.ColumnHeader>
-                <strong>Ausleihdatum</strong>
+                <strong>{t("take-date")}</strong>
              </Table.ColumnHeader>
            </Table.Row>
          </Table.Header>
@@ -179,12 +178,12 @@ const Landingpage: React.FC = () => {

      {!isLoading && loans.length === 0 && !isError && (
        <Text color="gray.500" mt={2}>
-          Keine Ausleihen vorhanden.
+          {t("no-loans-found")}
        </Text>
      )}

      <Heading as="h2" size="md" mb={4}>
-        Alle Geräte
+        {t("all-devices")}
      </Heading>

      {/* Responsive Grid mit gleich hohen Karten */}
@@ -202,14 +201,16 @@ const Landingpage: React.FC = () => {
              <Heading size="md">{device.item_name}</Heading>
            </Card.Header>
            <Card.Body color="fg.muted">
-              <Text>Ausleihrolle: {device.can_borrow_role}</Text>
+              <Text>
+                {t("rent-role")}: {device.can_borrow_role}
+              </Text>
            </Card.Body>
          </Card.Root>
        ))}
      </SimpleGrid>
      <HStack mt={3} gap={3} align="center" role="group" aria-label="Legende">
        <Text fontWeight="medium" color="fg.muted">
-          Legende:
+          {t("legend")}:
        </Text>
        <Button
          size="sm"
@@ -221,7 +222,7 @@ const Landingpage: React.FC = () => {
        >
          <HStack gap={2}>
            <LockOpen size={16} />
-            <Text>Im Schließfach</Text>
+            <Text>{t("in-locker")}</Text>
          </HStack>
        </Button>
        <Button
@@ -234,7 +235,7 @@ const Landingpage: React.FC = () => {
        >
          <HStack gap={2}>
            <Lock size={16} />
-            <Text>Nicht im Schließfach</Text>
+            <Text>{t("not-in-locker")}</Text>
          </HStack>
        </Button>
      </HStack>
--- a/FrontendV2/src/pages/LoginPage.tsx
+++ b/FrontendV2/src/pages/LoginPage.tsx
@@ -6,6 +6,7 @@ import { useAtom } from "jotai";
 import Cookies from "js-cookie";
 import { Navigate, useNavigate } from "react-router-dom";
 import { PasswordInput } from "@/components/ui/password-input";
+import { useTranslation } from "react-i18next";

 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
@@ -13,6 +14,8 @@ const API_BASE =
  "http://localhost:8002";

 export const LoginPage = () => {
+  const { t } = useTranslation();
+
  const [isLoggedIn, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
  const [triggerLogout, setTriggerLogout] = useAtom(triggerLogoutAtom);
  const navigate = useNavigate();
@@ -35,7 +38,7 @@ export const LoginPage = () => {
    if (!response.ok) {
      return {
        success: false,
-        message: data.message ?? "Login fehlgeschlagen",
+        message: data.message ?? t("login-failed"),
        description: data.description ?? "",
      };
    }
@@ -72,22 +75,20 @@ export const LoginPage = () => {
      <form onSubmit={(e) => e.preventDefault()}>
        <Card.Root maxW="sm">
          <Card.Header>
-            <Card.Title>Login</Card.Title>
-            <Card.Description>
-              Bitte unten Ihre Zugangsdaten eingeben.
-            </Card.Description>
+            <Card.Title>{t("login")}</Card.Title>
+            <Card.Description>{t("enter-credentials")}</Card.Description>
          </Card.Header>
          <Card.Body>
            <Stack gap="4" w="full">
              <Field.Root>
-                <Field.Label>Benutzername</Field.Label>
+                <Field.Label>{t("username")}</Field.Label>
                <Input
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                />
              </Field.Root>
              <Field.Root>
-                <Field.Label>Passwort</Field.Label>
+                <Field.Label>{t("password")}</Field.Label>
                <PasswordInput
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
@@ -107,8 +108,8 @@ export const LoginPage = () => {
            {triggerLogout && (
              <MyAlert
                status="success"
-                title={"Logout erfolgreich!"}
-                description={"Sie wurden erfolgreich abgemeldet."}
+                title={t("logout-success")}
+                description={t("logout-success-desc")}
              />
            )}
          </Card.Footer>
--- a/FrontendV2/src/pages/MyLoansPage.tsx
+++ b/FrontendV2/src/pages/MyLoansPage.tsx
@@ -16,6 +16,7 @@ import {
 } from "@chakra-ui/react";
 import { Header } from "@/components/Header";
 import { Trash2 } from "lucide-react";
+import { useTranslation } from "react-i18next";

 const API_BASE =
  (import.meta as any).env?.VITE_BACKEND_URL ||
@@ -23,6 +24,7 @@ const API_BASE =
  "http://localhost:8002";

 export const MyLoansPage = () => {
+  const { t } = useTranslation();
  const navigate = useNavigate();

  const [loans, setLoans] = useState<any[]>([]);
@@ -54,21 +56,18 @@ export const MyLoansPage = () => {

        if (!res.ok) {
          setMsgStatus("error");
-          setMsgTitle("Fehler");
-          setMsgDescription(
-            "Beim Laden der Ausleihen ist ein Fehler aufgetreten."
-          );
+          setMsgTitle(t("error"));
+          setMsgDescription(t("error-fetching-loans"));
          setIsMsg(true);
          return;
        }

        const data = await res.json();
        setLoans(data);
-        console.log("Fetched loans:", data);
      } catch (e) {
        setMsgStatus("error");
-        setMsgTitle("Fehler");
-        setMsgDescription("Netzwerkfehler beim Laden der Ausleihen.");
+        setMsgTitle(t("error"));
+        setMsgDescription(t("network-error-fetching-loans"));
        setIsMsg(true);
      } finally {
        setIsLoading(false);
@@ -89,23 +88,21 @@ export const MyLoansPage = () => {

      if (!res.ok) {
        setMsgStatus("error");
-        setMsgTitle("Fehler");
-        setMsgDescription(
-          "Beim Löschen der Ausleihe ist ein Fehler aufgetreten."
-        );
+        setMsgTitle(t("error"));
+        setMsgDescription(t("error-deleting-loan"));
        setIsMsg(true);
        return;
      }

      setLoans((prev) => prev.filter((loan) => loan.id !== loanId));
      setMsgStatus("success");
-      setMsgTitle("Erfolg");
-      setMsgDescription("Ausleihe erfolgreich gelöscht.");
+      setMsgTitle(t("success"));
+      setMsgDescription(t("loan-deletion-success"));
      setIsMsg(true);
    } catch (e) {
      setMsgStatus("error");
-      setMsgTitle("Fehler");
-      setMsgDescription("Netzwerkfehler beim Löschen der Ausleihe.");
+      setMsgTitle(t("error"));
+      setMsgDescription(t("network-error-deleting-loan"));
      setIsMsg(true);
    }
  };
@@ -132,7 +129,7 @@ export const MyLoansPage = () => {
        {isLoading && (
          <VStack colorPalette="teal">
            <Spinner color="colorPalette.600" />
-            <Text color="colorPalette.600">Loading...</Text>
+            <Text color="colorPalette.600">{t("loading")}</Text>
          </VStack>
        )}
        {loans && (
@@ -159,13 +156,13 @@ export const MyLoansPage = () => {
            </Table.ColumnGroup>
            <Table.Header>
              <Table.Row>
-                <Table.ColumnHeader>Ausleihcode</Table.ColumnHeader>
-                <Table.ColumnHeader>Startdatum</Table.ColumnHeader>
-                <Table.ColumnHeader>Enddatum</Table.ColumnHeader>
-                <Table.ColumnHeader>Geräte</Table.ColumnHeader>
-                <Table.ColumnHeader>Ausleihdatum</Table.ColumnHeader>
-                <Table.ColumnHeader>Rückgabedatum</Table.ColumnHeader>
-                <Table.ColumnHeader>Aktionen</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("loan-code")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("start-date")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("end-date")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("devices")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("take-date")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("return-date")}</Table.ColumnHeader>
+                <Table.ColumnHeader>{t("actions")}</Table.ColumnHeader>
              </Table.Row>
            </Table.Header>
            <Table.Body>
@@ -204,26 +201,28 @@ export const MyLoansPage = () => {
                        <Dialog.Positioner>
                          <Dialog.Content>
                            <Dialog.Header>
-                              <Dialog.Title>Sicher?</Dialog.Title>
+                              <Dialog.Title>{t("sure")}</Dialog.Title>
                            </Dialog.Header>
                            <Dialog.Body>
                              <Text>
-                                Möchtest du die Ausleihe mit dem{" "}
-                                <strong><Code>{delLoanCode}</Code></strong> Code wirklich
-                                löschen?
+                                {t("sure-delete-loan-0")}
+                                <strong>
+                                  <Code>{delLoanCode}</Code>
+                                </strong>{" "}
+                                {t("sure-delete-loan-1")}
                                <br />
-                                Für den Admin bleibt sie weiterhin sichtbar.
+                                {t("sure-delete-loan-2")}
                              </Text>
                            </Dialog.Body>
                            <Dialog.Footer>
                              <Dialog.ActionTrigger asChild>
-                                <Button variant="outline">Abbrechen</Button>
+                                <Button variant="outline">{t("cancel")}</Button>
                              </Dialog.ActionTrigger>
                              <Button
                                colorPalette="red"
                                onClick={() => deleteLoan(loan.id)}
                              >
-                                <strong>Löschen</strong>
+                                <strong>{t("delete")}</strong>
                              </Button>
                            </Dialog.Footer>
                            <Dialog.CloseTrigger asChild>
--- a/FrontendV2/src/utils/i18n/locales/de/de.json
+++ b/FrontendV2/src/utils/i18n/locales/de/de.json
@@ -1,3 +1,62 @@
 {
-    "greeting": "Willkommen zurück, "
+    "greeting": "Willkommen zurück, ",
+    "err_pw_change": "Passwortänderung fehlgeschlagen",
+    "pw_mismatch": "Bitte überprüfen Sie Ihre Eingaben",
+    "pw_success": "Passwort erfolgreich geändert",
+    "pw_success_desc": "Ihr Passwort wurde erfolgreich geändert.",
+    "create-loan": "Ausleihe erstellen",
+    "my-loans": "Meine Ausleihen",
+    "change-password": "Passwort ändern",
+    "help": "Hilfe",
+    "source-code": "Quellcode",
+    "logout": "Abmelden",
+    "old-password": "Altes Passwort",
+    "new-password": "Neues Passwort",
+    "confirm-password": "Neues Passwort wiederholen",
+    "cancel": "Abbrechen",
+    "save": "Speichern",
+    "start-date": "Startdatum",
+    "end-date": "Enddatum",
+    "missing-fields": "Fehlende Eingaben",
+    "missing-fields-desc": "Bitte Start- und Enddatum angeben.",
+    "error": "Fehler",
+    "unknown-error": "Unbekannter Frontend Fehler",
+    "get-borrowable-items": "Verfügbare Gegenstände abrufen",
+    "loading": "Laden...",
+    "item": "Gegenstand",
+    "success": "Erfolg",
+    "loan-success": "Ausleihe erfolgreich erstellt",
+    "error-by-loading": "Fehler beim Laden",
+    "unexpected-date-format_loan": "Unerwartetes Datumsformat erhalten. (Ausleihen)",
+    "unexpected-date-format_device": "Unerwartetes Datumsformat erhalten. (Gerät)",
+    "error-fetching-loans": "Die Ausleihen konnten nicht abgerufen werden.",
+    "all-loans": "Alle Ausleihen",
+    "username": "Benutzername",
+    "rented-items": "Ausgeliehene Gegenstände",
+    "return-date": "Rückgabedatum",
+    "take-date": "Abholdatum",
+    "no-loans-found": "Keine Ausleihen vorhanden.",
+    "all-devices": "Alle Geräte",
+    "rent-role": "Ausleihrolle",
+    "legend": "Legende",
+    "in-locker": "Im Schließfach",
+    "not-in-locker": "Nicht im Schließfach",
+    "login-failed": "Anmeldung fehlgeschlagen",
+    "login": "Anmelden",
+    "enter-credentials": "Bitte unten Ihre Anmeldedaten eingeben.",
+    "password": "Passwort",
+    "logout-success": "Erfolgreich abgemeldet",
+    "logout-success-desc": "Sie wurden erfolgreich abgemeldet.",
+    "network-error-fetching-loans": "Netzwerkfehler beim Laden der Ausleihen.",
+    "error-deleting-loan": "Die Ausleihe konnte nicht gelöscht werden.",
+    "loan-deletion-success": "Die Ausleihe wurde erfolgreich gelöscht.",
+    "network-error-deleting-loan": "Netzwerkfehler beim Löschen der Ausleihe.",
+    "loan-code": "Ausleihcode",
+    "devices": "Geräte",
+    "actions": "Aktionen",
+    "sure": "Sind Sie sicher?",
+    "sure-delete-loan-0": "Möchten Sie die Ausleihe mit dem ",
+    "sure-delete-loan-1": " Ausleihcode wirklich löschen?",
+    "sure-delete-loan-2": "Für den Admin bleibt sie weiterhin sichtbar.",
+    "delete": "Löschen"
 }