implemented service configuration to admin panel

Co-authored-by: Copilot <copilot@github.com>

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "no-as-a-service"]
+	path = no-as-a-service
+	url = https://github.com/hotheadhacker/no-as-a-service.git

FrontendV2/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin",
   "private": true,
-  "version": "0.0.0",
+  "version": "v2.1.2 (dev)",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,6 +12,7 @@
   "dependencies": {
     "@chakra-ui/react": "^3.28.0",
     "@emotion/react": "^11.14.0",
+    "@lottiefiles/dotlottie-react": "^0.19.0",
     "@tailwindcss/vite": "^4.1.11",
     "@tanstack/react-query": "^5.90.5",
     "i18next": "^25.6.0",

FrontendV2/src/components/Header.tsx

@@ -1,6 +1,7 @@
 import {
   Button,
   Flex,
+  Image,
   Heading,
   Stack,
   Text,
@@ -190,6 +191,13 @@ export const Header = () => {
         <Stack gap={1}>
           {/* Titelzeile ohne Mobile-Menu (wurde nach oben verlegt) */}
           <Flex align="center" justify="space-between" gap={2}>
+            <Image
+              src="/icon_borrow-system-frontend_dark.png"
+              alt="borrow-system logo"
+              boxSize="10"
+              objectFit="contain"
+              flexShrink={0}
+            />
             <Heading
               size="2xl"
               className="tracking-tight text-slate-900 dark:text-slate-100"

FrontendV2/src/components/UserDialogue.tsx

@@ -36,12 +36,43 @@ export const UserDialogue = (props: UserDialogueProps) => {
   const [msgTitle, setMsgTitle] = useState("");
   const [msgDescription, setMsgDescription] = useState("");
 
+  const [isMsgNAAS, setIsMsgNAAS] = useState(false);
+  const [msgStatusNAAS, setMsgStatusNAAS] = useState<"error" | "success">(
+    "error",
+  );
+  const [msgTitleNAAS, setMsgTitleNAAS] = useState("");
+  const [msgDescriptionNAAS, setMsgDescriptionNAAS] = useState("");
+
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
 
   // Dialog control
   const [isPwOpen, setPwOpen] = useState(false);
+  const [naasDialog, setNaasDialog] = useState(false);
+  const [naas, setNaas] = useState("");
+
+  const openNAAS = async () => {
+    try {
+      const response = await fetch(`${API_BASE}/no`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+      });
+
+      const data = await response.json();
+      setNaas(data.reason);
+      setNaasDialog(true);
+    } catch (error) {
+      setMsgStatusNAAS("error");
+      setMsgTitleNAAS(t("naas-error"));
+      setMsgDescriptionNAAS(t("naas-error-desc"));
+      setIsMsgNAAS(true);
+
+      console.log(msgStatusNAAS, msgTitleNAAS, msgDescriptionNAAS);
+    }
+  };
 
   const changePassword = async () => {
     if (newPassword !== confirmPassword) {
@@ -147,14 +178,31 @@ export const UserDialogue = (props: UserDialogueProps) => {
             </Button>
           </Stack>
         </Card.Body>
-        <Card.Footer justifyContent="flex-end">
-          <Button variant="outline" onClick={() => props.setUserDialog(false)}>
-            {t("cancel")}
-          </Button>
+        <Card.Footer>
+          <Stack w="100%" gap={3}>
+            {isMsgNAAS && (
+              <MyAlert
+                status={msgStatusNAAS}
+                title={msgTitleNAAS}
+                description={msgDescriptionNAAS}
+              />
+            )}
+            <HStack justify="flex-end" gap={2} wrap="wrap">
+              <Button
+                variant="outline"
+                onClick={() => props.setUserDialog(false)}
+              >
+                {t("cancel")}
+              </Button>
+              <Button variant="outline" onClick={() => openNAAS()}>
+                {t("try-naas")}
+              </Button>
+            </HStack>
+          </Stack>
         </Card.Footer>
       </Card.Root>
 
-      {/* Passwort-Dialog (kontrolliert) */}
+      {/* Passwort-Dialog */}
       <Dialog.Root open={isPwOpen} onOpenChange={(e: any) => setPwOpen(e.open)}>
         <Portal>
           <Dialog.Backdrop />
@@ -215,6 +263,31 @@ export const UserDialogue = (props: UserDialogueProps) => {
           </Dialog.Positioner>
         </Portal>
       </Dialog.Root>
+
+      <HStack wrap="wrap" gap="4">
+        <Dialog.Root
+          placement={"center"}
+          open={naasDialog}
+          motionPreset="slide-in-bottom"
+        >
+          <Portal>
+            <Dialog.Backdrop />
+            <Dialog.Positioner>
+              <Dialog.Content>
+                <Dialog.Header>
+                  <Dialog.Title>{t("naas-header")}</Dialog.Title>
+                </Dialog.Header>
+                <Dialog.Body>
+                  <p>{naas}</p>
+                </Dialog.Body>
+                <Dialog.CloseTrigger asChild>
+                  <CloseButton onClick={() => setNaasDialog(false)} size="sm" />
+                </Dialog.CloseTrigger>
+              </Dialog.Content>
+            </Dialog.Positioner>
+          </Portal>
+        </Dialog.Root>
+      </HStack>
     </Flex>
   );
 };

FrontendV2/src/components/dotLottie.tsx

@@ -0,0 +1,28 @@
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+
+export const unlockAnimation = () => {
+  return (
+    <DotLottieReact
+      src="https://lottie.host/f839baa1-9c64-44c4-9386-f0e4c87ab208/2Iw1m4k86d.lottie"
+      autoplay
+    />
+  );
+};
+
+export const approvalAnimation = () => {
+  return (
+    <DotLottieReact
+      src="https://lottie.host/b7257009-9e3f-43e2-8112-a176f4696e4c/iQxxqAVOGX.lottie"
+      autoplay
+    />
+  );
+};
+
+export const logoutAnimation = () => {
+  return (
+    <DotLottieReact
+      src="https://lottie.host/4975758c-de38-4d15-9f74-927709751d32/v8FtKpnD1y.lottie"
+      autoplay
+    />
+  );
+};

FrontendV2/src/pages/HomePage.tsx

@@ -18,6 +18,7 @@ import { borrowAbleItemsAtom } from "@/states/Atoms";
 import { createLoan } from "@/utils/Fetcher";
 import { Header } from "@/components/Header";
 import { useTranslation } from "react-i18next";
+import { approvalAnimation } from "@/components/dotLottie";
 
 export interface User {
   username: string;
@@ -27,6 +28,8 @@ export interface User {
 export const HomePage = () => {
   const { t } = useTranslation();
 
+  const [showAnimation, setShowAnimation] = useState(false);
+
   const [borrowableItems, setBorrowableItems] = useAtom(borrowAbleItemsAtom);
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
@@ -46,155 +49,172 @@ export const HomePage = () => {
     setSelectedItems((prevSelected) =>
       prevSelected.includes(itemId)
         ? prevSelected.filter((id) => id !== itemId)
-        : [...prevSelected, itemId]
+        : [...prevSelected, itemId],
     );
   };
 
+  const showApprovalAnimation = (seconds: number) => {
+    const milliseconds = seconds * 1000;
+
+    setShowAnimation(true);
+    window.setTimeout(() => {
+      setShowAnimation(false);
+    }, milliseconds);
+  };
+
   return (
-    <Container className="px-6 sm:px-8 pt-10">
-      <Header />
-      {isMsg && (
-        <MyAlert
-          status={msgStatus}
-          title={msgTitle}
-          description={msgDescription}
-        />
+    <>
+      {showAnimation && (
+        <div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
+          <div>{approvalAnimation()}</div>
+        </div>
       )}
-      <Stack as="main">
-        <Text>{t("timezone-info")}</Text>
-        <label htmlFor="startDate">
-          <strong>
-            <Text>{t("start-date")}</Text>
-          </strong>
-        </label>
-        <Input
-          id="startDate"
-          placeholder={t("start-date")}
-          type="datetime-local"
-          value={startDate}
-          onChange={(e) => setStartDate(e.target.value)}
-        />
-        <label htmlFor="endDate">
-          <strong>
-            <Text>{t("end-date")}</Text>
-          </strong>
-        </label>
-        <Input
-          id="endDate"
-          placeholder={t("end-date")}
-          type="datetime-local"
-          value={endDate}
-          onChange={(e) => setEndDate(e.target.value)}
-        />
-        <Button
-          onClick={async () => {
-            setIsLoadingA(true);
-            if (!startDate || !endDate) {
-              setMsgStatus("error");
-              setMsgTitle(t("missing-fields"));
-              setMsgDescription(t("missing-fields-desc"));
-              setIsMsg(true);
-              setIsLoadingA(false);
-              return;
-            }
-            await getBorrowableItems(startDate, endDate).then((response) => {
-              setIsLoadingA(false);
-              if (response && response.status === "error") {
+      <Container className="px-6 sm:px-8 pt-10">
+        <Header />
+        {isMsg && (
+          <MyAlert
+            status={msgStatus}
+            title={msgTitle}
+            description={msgDescription}
+          />
+        )}
+        <Stack as="main">
+          <Text>{t("timezone-info")}</Text>
+          <label htmlFor="startDate">
+            <strong>
+              <Text>{t("start-date")}</Text>
+            </strong>
+          </label>
+          <Input
+            id="startDate"
+            placeholder={t("start-date")}
+            type="datetime-local"
+            value={startDate}
+            onChange={(e) => setStartDate(e.target.value)}
+          />
+          <label htmlFor="endDate">
+            <strong>
+              <Text>{t("end-date")}</Text>
+            </strong>
+          </label>
+          <Input
+            id="endDate"
+            placeholder={t("end-date")}
+            type="datetime-local"
+            value={endDate}
+            onChange={(e) => setEndDate(e.target.value)}
+          />
+          <Button
+            onClick={async () => {
+              setIsLoadingA(true);
+              if (!startDate || !endDate) {
                 setMsgStatus("error");
-                setMsgTitle(response.title || t("error"));
-                setMsgDescription(response.description || t("unknown-error"));
+                setMsgTitle(t("missing-fields"));
+                setMsgDescription(t("missing-fields-desc"));
                 setIsMsg(true);
+                setIsLoadingA(false);
                 return;
               }
-              setBorrowableItems(response.data);
-              setIsMsg(false);
-            });
-          }}
-        >
-          {t("get-borrowable-items")}
-        </Button>
-        {isLoadingA && (
-          <VStack colorPalette="teal">
-            <Spinner color="colorPalette.600" />
-            <Text color="colorPalette.600">{t("loading")}</Text>
-          </VStack>
-        )}
-        {borrowableItems.length > 0 && (
-          <Table.ScrollArea borderWidth="1px" rounded="md">
-            <Table.Root size="sm" stickyHeader>
-              <Table.Header>
-                <Table.Row bg="bg.subtle">
-                  <Table.ColumnHeader></Table.ColumnHeader>
-                  <Table.ColumnHeader>{t("item")}</Table.ColumnHeader>
-                </Table.Row>
-              </Table.Header>
-
-              <Table.Body>
-                {borrowableItems.map((item) => (
-                  <Table.Row key={item.id}>
-                    <Table.Cell>
-                      <input
-                        onChange={() => handleCheckboxChange(item.id)}
-                        type="checkbox"
-                        name={item.id}
-                        id={item.id}
-                      />
-                    </Table.Cell>
-                    <Table.Cell>{item.item_name}</Table.Cell>
-                  </Table.Row>
-                ))}
-                <Table.Row>
-                  <Table.Cell colSpan={2}>
-                    <InputGroup
-                      endElement={
-                        <Span color="fg.muted" textStyle="xs">
-                          {note.length} / {MAX_CHARACTERS}
-                        </Span>
-                      }
-                    >
-                      <Input
-                        placeholder={t("optional-note")}
-                        value={note}
-                        maxLength={MAX_CHARACTERS}
-                        onChange={(e) => {
-                          setNote(
-                            e.currentTarget.value.slice(0, MAX_CHARACTERS)
-                          );
-                        }}
-                      />
-                    </InputGroup>
-                  </Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table.Root>
-          </Table.ScrollArea>
-        )}
-        {selectedItems.length >= 1 && (
-          <Button
-            onClick={() =>
-              createLoan(selectedItems, startDate, endDate, note).then(
-                (response) => {
-                  if (response.status === "error") {
-                    setMsgStatus("error");
-                    setMsgTitle(response.title || t("error"));
-                    setMsgDescription(
-                      response.description || t("unknown-error")
-                    );
-                    setIsMsg(true);
-                    return;
-                  }
-                  setMsgStatus("success");
-                  setMsgTitle(t("success"));
-                  setMsgDescription(t("loan-success"));
+              await getBorrowableItems(startDate, endDate).then((response) => {
+                setIsLoadingA(false);
+                if (response && response.status === "error") {
+                  setMsgStatus("error");
+                  setMsgTitle(response.title || t("error"));
+                  setMsgDescription(response.description || t("unknown-error"));
                   setIsMsg(true);
+                  return;
                 }
-              )
-            }
+                setBorrowableItems(response.data);
+                setIsMsg(false);
+              });
+            }}
           >
-            {t("create-loan")}
+            {t("get-borrowable-items")}
           </Button>
-        )}
-      </Stack>
-    </Container>
+          {isLoadingA && (
+            <VStack colorPalette="teal">
+              <Spinner color="colorPalette.600" />
+              <Text color="colorPalette.600">{t("loading")}</Text>
+            </VStack>
+          )}
+          {borrowableItems.length > 0 && (
+            <Table.ScrollArea borderWidth="1px" rounded="md">
+              <Table.Root size="sm" stickyHeader>
+                <Table.Header>
+                  <Table.Row bg="bg.subtle">
+                    <Table.ColumnHeader></Table.ColumnHeader>
+                    <Table.ColumnHeader>{t("item")}</Table.ColumnHeader>
+                  </Table.Row>
+                </Table.Header>
+
+                <Table.Body>
+                  {borrowableItems.map((item) => (
+                    <Table.Row key={item.id}>
+                      <Table.Cell>
+                        <input
+                          onChange={() => handleCheckboxChange(item.id)}
+                          type="checkbox"
+                          name={item.id}
+                          id={item.id}
+                        />
+                      </Table.Cell>
+                      <Table.Cell>{item.item_name}</Table.Cell>
+                    </Table.Row>
+                  ))}
+                  <Table.Row>
+                    <Table.Cell colSpan={2}>
+                      <InputGroup
+                        endElement={
+                          <Span color="fg.muted" textStyle="xs">
+                            {note.length} / {MAX_CHARACTERS}
+                          </Span>
+                        }
+                      >
+                        <Input
+                          placeholder={t("optional-note")}
+                          value={note}
+                          maxLength={MAX_CHARACTERS}
+                          onChange={(e) => {
+                            setNote(
+                              e.currentTarget.value.slice(0, MAX_CHARACTERS),
+                            );
+                          }}
+                        />
+                      </InputGroup>
+                    </Table.Cell>
+                  </Table.Row>
+                </Table.Body>
+              </Table.Root>
+            </Table.ScrollArea>
+          )}
+          {selectedItems.length >= 1 && (
+            <Button
+              onClick={() =>
+                createLoan(selectedItems, startDate, endDate, note).then(
+                  (response) => {
+                    if (response.status === "error") {
+                      setMsgStatus("error");
+                      setMsgTitle(response.title || t("error"));
+                      setMsgDescription(
+                        response.description || t("unknown-error"),
+                      );
+                      setIsMsg(true);
+                      return;
+                    }
+                    showApprovalAnimation(3);
+                    setMsgStatus("success");
+                    setMsgTitle(t("success"));
+                    setMsgDescription(t("loan-success"));
+                    setIsMsg(true);
+                  },
+                )
+              }
+            >
+              {t("create-loan")}
+            </Button>
+          )}
+        </Stack>
+      </Container>
+    </>
   );
 };

FrontendV2/src/pages/LoginPage.tsx

@@ -4,26 +4,47 @@ import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
 import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
 import { useAtom } from "jotai";
 import Cookies from "js-cookie";
-import { Navigate, useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { PasswordInput } from "@/components/ui/password-input";
 import { useTranslation } from "react-i18next";
 import { API_BASE } from "@/config/api.config";
+import { unlockAnimation } from "@/components/dotLottie";
+import { logoutAnimation } from "@/components/dotLottie";
 
 export const LoginPage = () => {
   const { t } = useTranslation();
 
   const [isLoggedIn, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
   const [triggerLogout, setTriggerLogout] = useAtom(triggerLogoutAtom);
+  const [showAnimation, setShowAnimation] = useState(false);
+  const [showLogout, setShowLogout] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
   const from = location.state?.from?.pathname || "/";
 
   useEffect(() => {
-    if (isLoggedIn) {
-      navigate(from, { replace: true });
-      window.location.reload(); // if deleted, the user context is not updated in time
+    if (triggerLogout) {
+      setShowLogout(true);
+      window.setTimeout(() => {
+        setShowLogout(false);
+      }, 4500);
     }
-  }, [isLoggedIn, navigate, from]);
+
+    if (!isLoggedIn) return;
+
+    // Existing sessions should redirect immediately, fresh logins wait for animation.
+    if (!showAnimation) {
+      navigate(from, { replace: true });
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      navigate(from, { replace: true });
+      window.location.reload(); // keeps user context in sync after login
+    }, 3000);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [isLoggedIn, showAnimation, navigate, from]);
 
   const loginFnc = async (username: string, password: string) => {
     const response = await fetch(`${API_BASE}/api/users/login`, {
@@ -42,6 +63,8 @@ export const LoginPage = () => {
       };
     }
 
+    setShowAnimation(true);
+
     Cookies.set("token", data.token);
     setIsLoggedIn(true);
     return { success: true };
@@ -62,58 +85,75 @@ export const LoginPage = () => {
       return;
     }
     setTriggerLogout(false);
-    navigate(from, { replace: true });
   };
 
-  if (isLoggedIn) {
-    return <Navigate to={from} replace />;
-  }
-
   return (
-    <div className="flex flex-1 items-center justify-center p-4">
-      <form onSubmit={(e) => e.preventDefault()}>
-        <Card.Root maxW="sm">
-          <Card.Header>
-            <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>{t("username")}</Field.Label>
-                <Input
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
+    <>
+      {showAnimation && (
+        <div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
+          <div>{unlockAnimation()}</div>
+        </div>
+      )}
+
+      {showLogout && (
+        <div className="fixed inset-0 z-9999 flex items-center justify-center pointer-events-none">
+          <div>{logoutAnimation()}</div>
+        </div>
+      )}
+
+      <div className="flex flex-1 items-center justify-center p-4">
+        <form onSubmit={(e) => e.preventDefault()}>
+          <Card.Root maxW="sm">
+            <Card.Header>
+              <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>{t("username")}</Field.Label>
+                  <Input
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                  />
+                </Field.Root>
+                <Field.Root>
+                  <Field.Label>{t("password")}</Field.Label>
+                  <PasswordInput
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                  />
+                </Field.Root>
+              </Stack>
+            </Card.Body>
+            <Card.Footer justifyContent="flex-end">
+              {isError && (
+                <MyAlert
+                  status="error"
+                  title={errorMsg}
+                  description={errorDsc}
                 />
-              </Field.Root>
-              <Field.Root>
-                <Field.Label>{t("password")}</Field.Label>
-                <PasswordInput
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
+              )}
+              <Button
+                type="submit"
+                onClick={() => handleLogin()}
+                variant="solid"
+              >
+                Login
+              </Button>
+            </Card.Footer>
+            <Card.Footer justifyContent="flex-end">
+              {triggerLogout && (
+                <MyAlert
+                  status="success"
+                  title={t("logout-success")}
+                  description={t("logout-success-desc")}
                 />
-              </Field.Root>
-            </Stack>
-          </Card.Body>
-          <Card.Footer justifyContent="flex-end">
-            {isError && (
-              <MyAlert status="error" title={errorMsg} description={errorDsc} />
-            )}
-            <Button type="submit" onClick={() => handleLogin()} variant="solid">
-              Login
-            </Button>
-          </Card.Footer>
-          <Card.Footer justifyContent="flex-end">
-            {triggerLogout && (
-              <MyAlert
-                status="success"
-                title={t("logout-success")}
-                description={t("logout-success-desc")}
-              />
-            )}
-          </Card.Footer>
-        </Card.Root>
-      </form>
-    </div>
+              )}
+            </Card.Footer>
+          </Card.Root>
+        </form>
+      </div>
+    </>
   );
 };

FrontendV2/src/pages/MyLoansPage.tsx

@@ -84,6 +84,14 @@ export const MyLoansPage = () => {
       });
 
       if (!res.ok) {
+        if (res.status === 507) {
+          setMsgStatus("error");
+          setMsgTitle(t("error"));
+          setMsgDescription(t("error-deleting-loan-507"));
+          setIsMsg(true);
+          return;
+        }
+
         setMsgStatus("error");
         setMsgTitle(t("error"));
         setMsgDescription(t("error-deleting-loan"));

FrontendV2/src/utils/i18n/locales/de/de.json

@@ -88,5 +88,11 @@
     "take-loan-success": "Ausleihe erfolgreich abgeholt",
     "return-loan-success": "Ausleihe erfolgreich zurückgegeben",
     "network-error": "Netzwerkfehler. Kontaktieren Sie den Administrator.",
-    "contactPage_messageDescription": "Bitte geben Sie hier Ihre Nachricht ein. Der Systemadministrator (Theis Gaedigk) wird sich so schnell wie möglich bei Ihnen melden."
+    "contactPage_messageDescription": "Bitte geben Sie hier Ihre Nachricht ein. Der Systemadministrator (Theis Gaedigk) wird sich so schnell wie möglich bei Ihnen melden.",
+    "naas": "No-as-a-service",
+    "try-naas": "Klick mich",
+    "naas-error": "Fehler mit no-as-a-service",
+    "naas-error-desc": "Ein Fehler ist beim Kommunizieren mit no-as-a-service aufgetreten.",
+    "naas-header": "Eine gute Möglichkeit, nein zu sagen...",
+    "error-deleting-loan-507": "Die Ausleihe kann nicht gelöscht werden, da sie noch nicht zurückgegeben wurde."
 }

FrontendV2/src/utils/i18n/locales/en/en.json

@@ -88,5 +88,11 @@
     "take-loan-success": "Loan taken successfully",
     "return-loan-success": "Loan returned successfully",
     "network-error": "Network error. Please contact the administrator.",
-    "contactPage_messageDescription": "Please enter your message here. The system administrator (Theis Gaedigk) will get back to you as soon as possible."
+    "contactPage_messageDescription": "Please enter your message here. The system administrator (Theis Gaedigk) will get back to you as soon as possible.",
+    "naas": "No-as-a-service",
+    "try-naas": "Click me",
+    "naas-error": "Error with no-as-a-service",
+    "naas-error-desc": "An error occurred while communicating with no-as-a-service.",
+    "naas-header": "A good way to say no...",
+    "error-deleting-loan-507": "The loan cannot be deleted because it has not been returned yet."
 }

LICENSE

@@ -1,73 +1,6 @@
-Apache License
-Version 2.0, January 2004
-http://www.apache.org/licenses/
+Copyright (c) 2026 Theis Gaedigk
 
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+All rights reserved.
 
-1. Definitions.
-
-"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
-
-"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
-
-"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
-
-"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
-
-"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
-
-"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
-
-"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
-
-"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
-
-"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
-
-"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
-
-     (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and
-
-     (b) You must cause any modified files to carry prominent notices stating that You changed the files; and
-
-     (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
-
-     (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
-
-     You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!)  The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.
-
-Copyright 2026 theis.gaedigk
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+This source code is not to be copied, modified, or distributed in any form
+without explicit written permission from the author.

admin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin",
   "private": true,
-  "version": "0.0.0",
+  "version": "v1.3.2 (dev)",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -47,4 +47,4 @@
     "vite": "^7.1.0",
     "vite-tsconfig-paths": "^5.1.4"
   }
-}
+}

admin/src/Layout/Dashboard.tsx

@@ -7,6 +7,7 @@ import UserTable from "../components/UserTable";
 import ItemTable from "../components/ItemTable";
 import LoanTable from "../components/LoanTable";
 import APIKeyTable from "@/components/APIKeyTable";
+import ServerConfig from "@/components/ServerConfig";
 import { MoveLeft } from "lucide-react";
 
 type DashboardProps = {
@@ -44,6 +45,7 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
         viewSchliessfaecher={() => setActiveView("Schließfächer")}
         viewUser={() => setActiveView("User")}
         viewAPI={() => setActiveView("API")}
+        viewConfig={() => setActiveView("Server Konfiguration")}
       />
       <Box flex="1" display="flex" flexDirection="column">
         <Flex
@@ -88,6 +90,7 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
           {activeView === "Ausleihen" && <LoanTable />}
           {activeView === "Gegenstände" && <ItemTable />}
           {activeView === "API" && <APIKeyTable />}
+          {activeView === "Server Konfiguration" && <ServerConfig />}
         </Box>
       </Box>
     </Flex>

admin/src/Layout/Sidebar.tsx

@@ -9,6 +9,7 @@ type SidebarProps = {
   viewSchliessfaecher: () => void;
   viewUser: () => void;
   viewAPI: () => void;
+  viewConfig: () => void;
 };
 
 const Sidebar: React.FC<SidebarProps> = ({
@@ -16,6 +17,7 @@ const Sidebar: React.FC<SidebarProps> = ({
   viewGegenstaende,
   viewUser,
   viewAPI,
+  viewConfig
 }) => {
   const [info, setInfo] = useState<any>(null);
 
@@ -83,6 +85,15 @@ const Sidebar: React.FC<SidebarProps> = ({
           >
             API Keys
           </Link>
+          <Link
+            px={3}
+            py={2}
+            rounded="md"
+            _hover={{ bg: "gray.700", textDecoration: "none" }}
+            onClick={viewConfig}
+          >
+            Server Konfiguration
+          </Link>
         </VStack>
 
         <Box mt="auto" pt={8} fontSize="xs" color="gray.500">

admin/src/components/ServerConfig.tsx

@@ -0,0 +1,175 @@
+import React from "react";
+import {
+  Table,
+  Spinner,
+  Text,
+  VStack,
+  Heading,
+  Switch,
+} from "@chakra-ui/react";
+import MyAlert from "./myChakra/MyAlert";
+import Cookies from "js-cookie";
+import { useState, useEffect } from "react";
+import { formatDateTime } from "@/utils/userFuncs";
+import { API_BASE } from "@/config/api.config";
+
+type Items = {
+  id: number;
+  function_name: string;
+  active: boolean;
+  entry_created_at: string;
+  updated_at: string | null;
+};
+
+const ServerConfig: React.FC = () => {
+  const [items, setItems] = useState<Items[]>([]);
+  const [errorStatus, setErrorStatus] = useState<"error" | "success">("error");
+  const [errorMessage, setErrorMessage] = useState("");
+  const [errorDsc, setErrorDsc] = useState("");
+  const [isError, setIsError] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [reload, setReload] = useState(false);
+
+  const handleSwitchChange = async (id: number, newState: boolean) => {
+    try {
+      const response = await fetch(
+        `${API_BASE}/api/admin/server-config/update?functionName=${encodeURIComponent(
+          items.find((item) => item.id === id)?.function_name || "",
+        )}&active=${newState}`,
+        {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${Cookies.get("token")}`,
+          },
+        },
+      );
+      if (response.ok) {
+        setReload((prev) => !prev);
+        setError(
+          "success",
+          "Status updated",
+          "The function status was updated successfully.",
+        );
+      } else {
+        setError(
+          "error",
+          "Failed to update status",
+          "There is an error updating the function status.",
+        );
+      }
+    } catch (error) {
+      setError(
+        "error",
+        "Failed to update status",
+        "There is an error updating the function status.",
+      );
+    }
+  };
+
+  const setError = (
+    status: "error" | "success",
+    message: string,
+    description: string,
+  ) => {
+    setIsError(false);
+    setErrorStatus(status);
+    setErrorMessage(message);
+    setErrorDsc(description);
+    setIsError(true);
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(
+          `${API_BASE}/api/admin/server-config/all`,
+          {
+            method: "GET",
+            headers: {
+              Authorization: `Bearer ${Cookies.get("token")}`,
+            },
+          },
+        );
+        const data = await response.json();
+        return data.data;
+      } catch (error) {
+        setError("error", "Failed to fetch items", "There is an error");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchData().then((data) => {
+      if (Array.isArray(data)) {
+        setItems(data);
+      }
+    });
+  }, [reload]);
+
+  return (
+    <>
+      <Heading marginBottom={4} size="2xl">
+        Server Konfiguration
+      </Heading>
+      {isError && (
+        <MyAlert
+          status={errorStatus}
+          description={errorDsc}
+          title={errorMessage}
+        />
+      )}
+      {isLoading && (
+        <VStack colorPalette="teal">
+          <Spinner color="colorPalette.600" />
+          <Text color="colorPalette.600">Loading...</Text>
+        </VStack>
+      )}
+
+      <Table.Root size="sm" striped w="100%" style={{ tableLayout: "auto" }}>
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeader width="1%" whiteSpace="nowrap">
+              <strong>#</strong>
+            </Table.ColumnHeader>
+            <Table.ColumnHeader>
+              <strong>Service Name</strong>
+            </Table.ColumnHeader>
+            <Table.ColumnHeader>
+              <strong>Toggle</strong>
+            </Table.ColumnHeader>
+            <Table.ColumnHeader>
+              <strong>Eintrag erstellt am</strong>
+            </Table.ColumnHeader>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {items.map((item) => (
+            <Table.Row key={item.id}>
+              <Table.Cell whiteSpace="nowrap">{item.id}</Table.Cell>
+              <Table.Cell fontFamily="mono">{item.function_name}</Table.Cell>
+              <Table.Cell>
+                <Switch.Root
+                  checked={item.active}
+                  onCheckedChange={() =>
+                    handleSwitchChange(item.id, !item.active)
+                  }
+                >
+                  <Switch.HiddenInput />
+                  <Switch.Control>
+                    <Switch.Thumb />
+                  </Switch.Control>
+                  <Switch.Label />
+                </Switch.Root>
+              </Table.Cell>
+              <Table.Cell whiteSpace="nowrap">
+                {formatDateTime(item.entry_created_at)}
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+    </>
+  );
+};
+
+export default ServerConfig;

backendV2/info.json

@@ -1,9 +1,9 @@
 {
     "backend-info": {
-        "version": "v2.1.1 (dev)"
+        "version": "v2.2 (dev)"
     },
     "frontend-info": {
-        "version": "v2.1.2 (dev)"
+        "version": "v2.2 (dev)"
     },
     "admin-panel-info": {
         "version": "v1.3.2 (dev)"

backendV2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backendv2",
-  "version": "1.0.0",
+  "version": "v2.1.1 (dev)",
   "main": "server.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

backendV2/routes/admin/database/serverConfMgmt.database.js

@@ -0,0 +1,26 @@
+import mysql from "mysql2";
+import dotenv from "dotenv";
+dotenv.config();
+
+const pool = mysql
+  .createPool({
+    host: process.env.DB_HOST,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASSWORD,
+    database: process.env.DB_NAME,
+  })
+  .promise();
+
+export const getAllFunctions = async () => {
+  const [rows] = await pool.query("SELECT * FROM functions");
+  return { success: true, data: rows };
+};
+
+export const updateFunctionStatus = async (functionName, active) => {
+  const [result] = await pool.query(
+    "UPDATE functions SET active = ? WHERE function_name = ?",
+    [active, functionName],
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};

backendV2/routes/admin/serverConfMgmt.route.js

@@ -0,0 +1,50 @@
+import express from "express";
+import { authenticateAdmin } from "../../services/authentication.js";
+const router = express.Router();
+import dotenv from "dotenv";
+dotenv.config();
+
+// database funcs import
+import {
+  getAllFunctions,
+  updateFunctionStatus,
+} from "./database/serverConfMgmt.database.js";
+
+// Route to get all functions and their statuses
+router.get("/all", async (req, res) => {
+  try {
+    const result = await getAllFunctions();
+    if (result.success) {
+      res.status(200).json({ data: result.data });
+    } else {
+      res.status(500).json({ message: "Failed to fetch functions" });
+    }
+  } catch (error) {
+    res
+      .status(500)
+      .json({ message: "An error occurred", error: error.message });
+  }
+});
+
+// Route to update the status of a function
+router.post("/update", async (req, res) => {
+  const functionName = req.query.functionName;
+  let active = req.query.active;
+
+  if (active === "false") {
+    active = 0;
+  } else if (active === "true") {
+    active = 1;
+  } else {
+    res.status(406).json({ message: "Got unexpected format" });
+  }
+
+  const result = await updateFunctionStatus(functionName, active);
+  if (result.success) {
+    res.status(200).json({ message: "Function status updated successfully" });
+  } else {
+    res.status(500).json({ message: "Failed to update function status" });
+  }
+});
+
+export default router;

backendV2/routes/api/api.route.js

@@ -1,9 +1,12 @@
 import express from "express";
 import { authenticate } from "../../services/authentication.js";
+import { checkIfServiceIsActive } from "../../services/functions.js";
 const router = express.Router();
 import dotenv from "dotenv";
 dotenv.config();
 
+const loan_service = "Loan Service";
+
 import {
   getItemsFromDatabaseV2,
   changeInSafeStateV2,
@@ -39,6 +42,7 @@ router.post("/change-state/:key/:itemId", authenticate, async (req, res) => {
 router.get(
   "/get-loan-by-code/:key/:loan_code",
   authenticate,
+  checkIfServiceIsActive(loan_service),
   async (req, res) => {
     const loan_code = req.params.loan_code;
     const result = await getLoanByCodeV2(loan_code);
@@ -54,6 +58,7 @@ router.get(
 router.post(
   "/set-return-date/:key/:loan_code",
   authenticate,
+  checkIfServiceIsActive(loan_service),
   async (req, res) => {
     const loanCode = req.params.loan_code;
     const result = await setReturnDateV2(loanCode);
@@ -69,6 +74,7 @@ router.post(
 router.post(
   "/set-take-date/:key/:loan_code",
   authenticate,
+  checkIfServiceIsActive(loan_service),
   async (req, res) => {
     const loanCode = req.params.loan_code;
     const result = await setTakeDateV2(loanCode);

backendV2/routes/app/database/loansMgmt.database.js

@@ -234,6 +234,23 @@ export const getBorrowableItemsFromDatabase = async (
 };
 
 export const SETdeleteLoanFromDatabase = async (loanId) => {
+  const [checkIfdatesReturned] = await pool.query(
+    "SELECT take_date, returned_date FROM loans WHERE id = ? AND deleted = 0",
+    [loanId],
+  );
+
+  if (checkIfdatesReturned.length === 0) {
+    return { success: false, code: "LOAN_NOT_FOUND" };
+  }
+
+  const { take_date, returned_date } = checkIfdatesReturned[0];
+  const bothNull = take_date === null && returned_date === null;
+  const bothSet = take_date !== null && returned_date !== null;
+
+  if (!(bothNull || bothSet)) {
+    return { success: false, code: "LOAN_NOT_RETURNED" };
+  }
+
   const [result] = await pool.query(
     "UPDATE loans SET deleted = 1 WHERE id = ?;",
     [loanId],

backendV2/routes/app/loanMgmt.route.js

@@ -1,9 +1,16 @@
 import express from "express";
 import { authenticate, generateToken } from "../../services/authentication.js";
+import {
+  checkIfServiceIsActive,
+  checkIfServiceIsActive2,
+} from "../../services/functions.js";
 const router = express.Router();
 import dotenv from "dotenv";
 dotenv.config();
 
+const loan_service = "Loan Service";
+const loan_mailer_service = "Loan Mailer";
+
 // database funcs import
 import {
   createLoanInDatabase,
@@ -18,106 +25,129 @@ import {
 } from "./database/loansMgmt.database.js";
 import { sendMailLoan } from "./services/mailer.js";
 
-router.post("/createLoan", authenticate, async (req, res) => {
-  try {
-    const { items, startDate, endDate, note } = req.body || {};
+router.post(
+  "/createLoan",
+  checkIfServiceIsActive(loan_service),
+  authenticate,
+  async (req, res) => {
+    try {
+      const { items, startDate, endDate, note } = req.body || {};
 
-    if (!Array.isArray(items) || items.length === 0) {
-      return res.status(400).json({ message: "Items array is required" });
-    }
+      if (!Array.isArray(items) || items.length === 0) {
+        return res.status(400).json({ message: "Items array is required" });
+      }
 
-    // If dates are not provided, default to now .. +7 days
-    const start =
-      startDate ?? new Date().toISOString().slice(0, 19).replace("T", " ");
-    const end =
-      endDate ??
-      new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
-        .toISOString()
-        .slice(0, 19)
-        .replace("T", " ");
+      // If dates are not provided, default to now .. +7 days
+      const start =
+        startDate ?? new Date().toISOString().slice(0, 19).replace("T", " ");
+      const end =
+        endDate ??
+        new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
+          .toISOString()
+          .slice(0, 19)
+          .replace("T", " ");
 
-    // Coerce item IDs to numbers and filter invalids
-    const itemIds = items
-      .map((v) => Number(v))
-      .filter((n) => Number.isFinite(n));
+      // Coerce item IDs to numbers and filter invalids
+      const itemIds = items
+        .map((v) => Number(v))
+        .filter((n) => Number.isFinite(n));
 
-    if (itemIds.length === 0) {
-      return res.status(400).json({ message: "No valid item IDs provided" });
-    }
+      if (itemIds.length === 0) {
+        return res.status(400).json({ message: "No valid item IDs provided" });
+      }
 
-    const result = await createLoanInDatabase(
-      req.user.username,
-      start,
-      end,
-      note,
-      itemIds,
-    );
-
-    if (result.success) {
-      const mailInfo = await getLoanInfoWithID(result.data.id);
-      console.log(mailInfo);
-      sendMailLoan(
-        mailInfo.data.username,
-        mailInfo.data.loaned_items_name,
-        mailInfo.data.start_date,
-        mailInfo.data.end_date,
-        mailInfo.data.created_at,
-        mailInfo.data.note,
+      const result = await createLoanInDatabase(
+        req.user.username,
+        start,
+        end,
+        note,
+        itemIds,
       );
-      return res.status(201).json({
-        message: "Loan created successfully",
-        loanId: result.data.id,
-        loanCode: result.data.loan_code,
-      });
+
+      if (result.success) {
+        if (await checkIfServiceIsActive2(loan_mailer_service)) {
+          const mailInfo = await getLoanInfoWithID(result.data.id);
+          console.log(mailInfo);
+          sendMailLoan(
+            mailInfo.data.username,
+            mailInfo.data.loaned_items_name,
+            mailInfo.data.start_date,
+            mailInfo.data.end_date,
+            mailInfo.data.created_at,
+            mailInfo.data.note,
+          );
+        }
+
+        return res.status(201).json({
+          message: "Loan created successfully",
+          loanId: result.data.id,
+          loanCode: result.data.loan_code,
+        });
+      }
+
+      if (result.code === "CONFLICT") {
+        return res
+          .status(409)
+          .json({ message: "Items not available in the selected period" });
+      }
+
+      if (result.code === "BAD_REQUEST") {
+        return res.status(400).json({ message: result.message });
+      }
+
+      return res.status(500).json({ message: "Failed to create loan" });
+    } catch (err) {
+      console.error("createLoan error:", err);
+      return res.status(500).json({ message: "Failed to create loan" });
     }
+  },
+);
 
-    if (result.code === "CONFLICT") {
-      return res
-        .status(409)
-        .json({ message: "Items not available in the selected period" });
+router.get(
+  "/loans",
+  checkIfServiceIsActive(loan_service),
+  authenticate,
+  async (req, res) => {
+    const result = await getLoansFromDatabase(req.user.username);
+    if (result.success) {
+      res.status(200).json(result.data);
+    } else if (result.status) {
+      res.status(200).json([]);
+    } else {
+      res.status(500).json({ message: "Failed to fetch loans" });
     }
+  },
+);
 
-    if (result.code === "BAD_REQUEST") {
-      return res.status(400).json({ message: result.message });
+router.post(
+  "/set-return-date/:loan_code",
+  checkIfServiceIsActive(loan_service),
+  authenticate,
+  async (req, res) => {
+    const loanCode = req.params.loan_code;
+    const result = await setReturnDate(loanCode);
+    if (result.success) {
+      res.status(200).json({ data: result.data });
+    } else {
+      res.status(500).json({ message: "Failed to set return date" });
     }
+  },
+);
 
-    return res.status(500).json({ message: "Failed to create loan" });
-  } catch (err) {
-    console.error("createLoan error:", err);
-    return res.status(500).json({ message: "Failed to create loan" });
-  }
-});
-
-router.get("/loans", authenticate, async (req, res) => {
-  const result = await getLoansFromDatabase(req.user.username);
-  if (result.success) {
-    res.status(200).json(result.data);
-  } else if (result.status) {
-    res.status(200).json([]);
-  } else {
-    res.status(500).json({ message: "Failed to fetch loans" });
-  }
-});
-
-router.post("/set-return-date/:loan_code", authenticate, async (req, res) => {
-  const loanCode = req.params.loan_code;
-  const result = await setReturnDate(loanCode);
-  if (result.success) {
-    res.status(200).json({ data: result.data });
-  } else {
-    res.status(500).json({ message: "Failed to set return date" });
-  }
-});
-
-router.post("/set-take-date/:loan_code", authenticate, async (req, res) => {
-  const loanCode = req.params.loan_code;
-  const result = await setTakeDate(loanCode);
-  if (result.success) {
-    res.status(200).json({ data: result.data });
-  } else {
-    res.status(500).json({ message: "Failed to set take date" });
-  }
-});
+router.post(
+  "/set-take-date/:loan_code",
+  checkIfServiceIsActive(loan_service),
+  authenticate,
+  async (req, res) => {
+    const loanCode = req.params.loan_code;
+    const result = await setTakeDate(loanCode);
+    if (result.success) {
+      res.status(200).json({ data: result.data });
+    } else {
+      res.status(500).json({ message: "Failed to set take date" });
+    }
+  },
+);
 
 router.get("/all-items", authenticate, async (req, res) => {
   const result = await getItems();
@@ -128,46 +158,71 @@ router.get("/all-items", authenticate, async (req, res) => {
   }
 });
 
-router.delete("/delete-loan/:id", authenticate, async (req, res) => {
-  const loanId = req.params.id;
-  const result = await SETdeleteLoanFromDatabase(loanId);
-  if (result.success) {
-    res.status(200).json({ message: "Loan deleted successfully" });
-  } else {
-    res.status(500).json({ message: "Failed to delete loan" });
-  }
-});
+router.delete(
+  "/delete-loan/:id",
+  checkIfServiceIsActive(loan_service),
+  authenticate,
+  async (req, res) => {
+    const loanId = req.params.id;
+    const result = await SETdeleteLoanFromDatabase(loanId);
+    if (result.success) {
+      res.status(200).json({ message: "Loan deleted successfully" });
+    } else {
+      if (result.code === "LOAN_NOT_FOUND") {
+        res.status(404).json({ message: "Loan not found" });
+      }
 
-router.get("/all-loans", authenticate, async (req, res) => {
-  const result = await getALLLoans();
-  if (result.success) {
-    res.status(200).json(result.data);
-  } else {
-    res.status(500).json({ message: "Failed to fetch loans" });
-  }
-});
+      if (result.code === "LOAN_NOT_RETURNED") {
+        res.status(507).json({
+          message: "Cannot delete loan that has not been returned",
+        });
+      }
 
-router.post("/borrowable-items", authenticate, async (req, res) => {
-  const { startDate, endDate } = req.body || {};
-  if (!startDate || !endDate) {
-    return res
-      .status(400)
-      .json({ message: "startDate and endDate are required" });
-  }
+      res.status(500).json({ message: "Failed to delete loan" });
+    }
+  },
+);
 
-  const result = await getBorrowableItemsFromDatabase(
-    startDate,
-    endDate,
-    req.user.role,
-  );
-  if (result.success) {
-    // return the array directly for consistency with /items
-    return res.status(200).json(result.data);
-  } else {
-    return res
-      .status(500)
-      .json({ message: "Failed to fetch borrowable items" });
-  }
-});
+router.get(
+  "/all-loans",
+  checkIfServiceIsActive(loan_service),
+  authenticate,
+  async (req, res) => {
+    const result = await getALLLoans();
+    if (result.success) {
+      res.status(200).json(result.data);
+    } else {
+      res.status(500).json({ message: "Failed to fetch loans" });
+    }
+  },
+);
+
+router.post(
+  "/borrowable-items",
+  checkIfServiceIsActive(loan_service),
+  authenticate,
+  async (req, res) => {
+    const { startDate, endDate } = req.body || {};
+    if (!startDate || !endDate) {
+      return res
+        .status(400)
+        .json({ message: "startDate and endDate are required" });
+    }
+
+    const result = await getBorrowableItemsFromDatabase(
+      startDate,
+      endDate,
+      req.user.role,
+    );
+    if (result.success) {
+      // return the array directly for consistency with /items
+      return res.status(200).json(result.data);
+    } else {
+      return res
+        .status(500)
+        .json({ message: "Failed to fetch borrowable items" });
+    }
+  },
+);
 
 export default router;

backendV2/routes/app/userMgmt.route.js

@@ -1,48 +1,66 @@
 import express from "express";
 import { authenticate, generateToken } from "../../services/authentication.js";
+import { checkIfServiceIsActive } from "../../services/functions.js";
 const router = express.Router();
 import dotenv from "dotenv";
 dotenv.config();
 
+const user_frontend_service = "User Frontend";
+const contact_form_service = "Contact Form Service";
+
 // database funcs import
 import { loginFunc, changePassword } from "./database/userMgmt.database.js";
 import { sendMail } from "./services/mailer_v2.js";
 
-router.post("/login", async (req, res) => {
-  const result = await loginFunc(req.body.username, req.body.password);
-  if (result.success) {
-    const token = await generateToken({
-      username: result.data.username,
-      is_admin: result.data.is_admin,
-      first_name: result.data.first_name,
-      last_name: result.data.last_name,
-      role: result.data.role,
-    });
-    res.status(200).json({ message: "Login successful", token });
-  } else {
-    res.status(401).json({ message: "Invalid credentials" });
-  }
-});
+router.post(
+  "/login",
+  checkIfServiceIsActive(user_frontend_service),
+  async (req, res) => {
+    const result = await loginFunc(req.body.username, req.body.password);
+    if (result.success) {
+      const token = await generateToken({
+        username: result.data.username,
+        is_admin: result.data.is_admin,
+        first_name: result.data.first_name,
+        last_name: result.data.last_name,
+        role: result.data.role,
+      });
+      res.status(200).json({ message: "Login successful", token });
+    } else {
+      res.status(401).json({ message: "Invalid credentials" });
+    }
+  },
+);
 
-router.post("/change-password", authenticate, async (req, res) => {
-  const oldPassword = req.body.oldPassword;
-  const newPassword = req.body.newPassword;
-  const username = req.user.username;
-  const result = await changePassword(username, oldPassword, newPassword);
-  if (result.success) {
-    res.status(200).json({ message: "Password changed successfully" });
-  } else {
-    res.status(500).json({ message: "Failed to change password" });
-  }
-});
+router.post(
+  "/change-password",
+  checkIfServiceIsActive(user_frontend_service),
+  authenticate,
+  async (req, res) => {
+    const oldPassword = req.body.oldPassword;
+    const newPassword = req.body.newPassword;
+    const username = req.user.username;
+    const result = await changePassword(username, oldPassword, newPassword);
+    if (result.success) {
+      res.status(200).json({ message: "Password changed successfully" });
+    } else {
+      res.status(500).json({ message: "Failed to change password" });
+    }
+  },
+);
 
-router.post("/contact", authenticate, async (req, res) => {
-  const message = req.body.message;
-  const username = req.user.username;
+router.post(
+  "/contact",
+  checkIfServiceIsActive(contact_form_service),
+  authenticate,
+  async (req, res) => {
+    const message = req.body.message;
+    const username = req.user.username;
 
-  sendMail(username, message);
+    sendMail(username, message);
 
-  res.status(200).json({ message: "Contact message sent successfully" });
-});
+    res.status(200).json({ message: "Contact message sent successfully" });
+  },
+);
 
 export default router;

backendV2/schemeV2.sql

@@ -54,4 +54,15 @@ CREATE TABLE apiKeys (
   entry_created_at TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP,
   PRIMARY KEY (id),
   CHECK (api_key REGEXP '^[0-9]{8}$')
-) ENGINE=InnoDB;
+) ENGINE=InnoDB;
+
+CREATE TABLE functions (
+  id INT NOT NULL AUTO_INCREMENT,
+  function_name VARCHAR(500) NOT NULL UNIQUE,
+  active BOOLEAN NOT NULL DEFAULT true,
+  entry_updated_at timestamp NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+  entry_created_at TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (id)
+) ENGINE=InnoDB;
+
+INSERT INTO functions (function_name) VALUES ("Loan Mailer"), ("Loan Service"), ("Contact Form Service"), ("User Frontend"), ("API")

backendV2/server.js

@@ -1,6 +1,6 @@
 import express from "express";
 import cors from "cors";
-import env from "dotenv";
+import dotenv from "dotenv";
 import info from "./info.json" assert { type: "json" };
 import { authenticate } from "./services/authentication.js";
 
@@ -14,13 +14,15 @@ import loanDataMgmtRouter from "./routes/admin/loanDataMgmt.route.js";
 import itemDataMgmtRouter from "./routes/admin/itemDataMgmt.route.js";
 import apiDataMgmtRouter from "./routes/admin/apiDataMgmt.route.js";
 import userMgmtRouterADMIN from "./routes/admin/userMgmt.route.js";
+import serverConfMgmtRouter from "./routes/admin/serverConfMgmt.route.js";
 
 // API routes
 import apiRouter from "./routes/api/api.route.js";
 
-env.config();
+dotenv.config();
 const app = express();
 const port = 8004;
+const naasURL = process.env.NAAS_URL;
 
 app.use(cors());
 // Body-Parser VOR den Routen registrieren
@@ -37,6 +39,7 @@ app.use("/api/admin/user-data", userDataMgmtRouter);
 app.use("/api/admin/item-data", itemDataMgmtRouter);
 app.use("/api/admin/api-data", apiDataMgmtRouter);
 app.use("/api/admin/user-mgmt", userMgmtRouterADMIN);
+app.use("/api/admin/server-config", serverConfMgmtRouter);
 
 // API routes
 app.use("/api", apiRouter);
@@ -47,6 +50,20 @@ app.listen(port, () => {
   console.log(`Server is running on port: ${port}`);
 });
 
+app.get("/no", async (req, res) => {
+  try {
+    const response = await fetch(naasURL);
+    if (!response.ok) {
+      res.status(500).send("Request to no-as-a-service went wrong.");
+    }
+    const data = await response.json();
+    res.json(data);
+  } catch (error) {
+    console.error("Error communicating with no-as-a-service:", error);
+    res.status(500).send("Error communicating with no-as-a-service.");
+  }
+});
+
 app.get("/verify", authenticate, async (req, res) => {
   res.status(200).json({ message: "Token is valid", user: req.user });
 });

backendV2/services/authentication.js

@@ -1,8 +1,12 @@
 import { SignJWT, jwtVerify } from "jose";
 import env from "dotenv";
 import { verifyAPIKeyDB } from "./database.js";
+import { checkIfServiceIsActive2 } from "./functions.js";
 env.config();
 
+const api_service = "API";
+const user_frontend_service = "User Frontend";
+
 const secretKey = process.env.SECRET_KEY;
 if (!secretKey) {
   throw new Error("Missing SECRET_KEY environment variable");
@@ -45,6 +49,13 @@ export async function authenticate(req, res, next) {
   const apiKey = req.params.key;
 
   if (authHeader) {
+    const serviceActive = await checkIfServiceIsActive2(user_frontend_service);
+    if (!serviceActive) {
+      return res
+        .status(503)
+        .json({ message: "User Frontend is currently unavailable." });
+    }
+
     const parts = authHeader.split(" ");
     const scheme = parts[0];
     const token = parts[1];
@@ -61,6 +72,13 @@ export async function authenticate(req, res, next) {
       return res.status(403).json({ message: "Present token invalid" }); // present token invalid
     }
   } else if (apiKey) {
+    const serviceActive = await checkIfServiceIsActive2(api_service);
+    if (!serviceActive) {
+      return res
+        .status(503)
+        .json({ message: "API Service is currently unavailable." });
+    }
+
     try {
       await verifyAPIKey(apiKey);
       return next();

backendV2/services/functions.js

@@ -0,0 +1,42 @@
+import mysql from "mysql2";
+import dotenv from "dotenv";
+dotenv.config();
+
+const pool = mysql
+  .createPool({
+    host: process.env.DB_HOST,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASSWORD,
+    database: process.env.DB_NAME,
+  })
+  .promise();
+
+export function checkIfServiceIsActive(service) {
+  return async (req, res, next) => {
+    const [result] = await pool.query(
+      "SELECT * FROM functions WHERE function_name = ? AND active = 1;",
+      [service],
+    );
+
+    if (result.length > 0) {
+      return next();
+    }
+
+    return res
+      .status(503)
+      .json({ message: `-${service}- is currently unavailable.` });
+  };
+}
+
+export async function checkIfServiceIsActive2(service) {
+  const [result] = await pool.query(
+    "SELECT * FROM functions WHERE function_name = ? AND active = 1;",
+    [service],
+  );
+
+  if (result.length > 0) {
+    return true;
+  }
+
+  return false;
+}

changelog.md

@@ -0,0 +1,36 @@
+# Changelog for upcoming version: v2.2
+
+This update provides some new features for the design. It also contains some improvements and I have also fixed some bugs.
+
+## New features
+
+- The overview page now has the note column and is overall better organised
+- I also addded the regular header to the page
+- I have added three animations to the Borrow System
+- I have added a new icon for the frontend, which is now also used in the header and the favicon. It is a dark version of the old icon, which fits better to the overall design. I have made it with Icon Composer. The old icon is still used for the admin panel, which has a light design. (Maybe I will change the admin panel design in the future...)
+- When you go to your user card (over the user icon in the header) you have a new button "Click me". If you click it, you will get an message... _I am just saying: I have implemented the no-as-a-service code in to my Backend._
+
+## Improvements
+
+- I have the error logging for the API route wehre you can take loans improved.
+- If you try to delete a loan that has not been returned yet, you will get an 507 error code.
+
+## Fixed bugs
+
+- Fixed bug: #13
+- Fixed bug for messaging when server has an error
+- Fixed footer height
+
+---
+
+## New version numbers
+
+**Backend:** v2.2
+
+**Frontend:** v2.2
+
+**Admin panel:** v1.3.2
+
+---
+
+-[Theis](https://portfolio-theis.de)

docker-compose.yml

@@ -4,14 +4,14 @@ services:
   #    build: ./FrontendV2
   #    ports:
   #      - "8001:80"
-  #    restart: unless-stopped
+  #    restart: always
 
   #  admin-frontend:
   #    container_name: borrow_system-admin-frontend
   #    build: ./admin
   #    ports:
   #      - "8003:80"
-  #    restart: unless-stopped
+  #    restart: always
 
   backend_v2:
     container_name: borrow_system-backend_v2
@@ -26,12 +26,12 @@ services:
       DB_NAME: borrow_system_new
     depends_on:
       - mysql_v2
-    restart: unless-stopped
+    restart: always
 
   mysql_v2:
     container_name: borrow_system-mysql-v2
     image: mysql:8.0
-    restart: unless-stopped
+    restart: always
     environment:
       MYSQL_ROOT_PASSWORD: ${DB_PASSWORD_V2}
       MYSQL_DATABASE: borrow_system_new
@@ -42,20 +42,14 @@ services:
     ports:
       - "3310:3306"
 
-  postgresql:
-    image: postgres
-    container_name: borrow_system-postgresql
-    shm_size: 128mb
-    environment:
-      POSTGRES_USER: root
-      POSTGRES_PASSWORD: ${POSTGRES_ROOT_PASSWORD}
-
-  adminer:
-    container_name: borrow_system-adminer
-    image: adminer
-    restart: unless-stopped
+  no-as-a-service:
+    container_name: borrow_system-naas
     ports:
-      - "8080:8080"
+      - "3000:3000"
+    build:
+      context: ./no-as-a-service
+      dockerfile: Dockerfile
+    restart: always
 
 volumes:
   mysql-data: