Merge branch 'dev_v1-admin' into debian12_v1-admin

changed ports
2025-09-24 17:56:52 +02:00 · 2025-09-21 10:46:53 +02:00 · 2025-09-21 10:46:07 +02:00 · 2025-09-16 13:40:23 +02:00 · 2025-09-16 13:04:13 +02:00 · 2025-09-16 13:03:35 +02:00
33 changed files with 515 additions and 1242 deletions
--- a/Docs/backend_API_docs/README.md
+++ b/Docs/backend_API_docs/README.md
@@ -1,4 +1,4 @@
-# Backend API docs (apiV2)
+# Backend API docs

 If you want to cooperate with me, or build something new with my backend API, feel free to reach out!

@@ -6,51 +6,49 @@ On this page you will learn how my API works.

 ## General information

-When you look at my backend folder and file structure, you can see that I have two files called `API`. The first file called `api.js` which is for my web frontend, because this file works together with my JWT token service.
+When you look at my backend folder and file structure, you can see that I have two files called `API`. The first file called `api.js` is for my web frontend, because this file works together with my JWT token service.

-But I have built a second API. You can see the second API file in the same directory, the file is called `apiV2.js`.
+**\*But I have built a second API. You can see the second API file in the same directory, the file is called `apiV2.js`.**

-But first you have to get an API Key. You can get the API key from my admin dashboard. When you don't have any access to my admin dashboard, please contact your administrator or me.
+This is the file that you can use to build an API.

---
-
-## Base URL
-
- Frontend: `https://insta.the1s.de`
- Backend: `https://backend.insta.the1s.de`
- Base path for this API: `https://backend.insta.the1s.de/apiV2`
-
-You can see the status of this and all my other services at `https://status.the1s.de`.
-
-_I have also build a [fallback page](https://git.the1s.de/theis.gaedigk/fallback-page). When only the application is down, you will see a friendly message and a link to the status page. (Only if the server is not down)_
+But first you have to get the Admin API key, stored in an `.env` file on my server.

 ---

 ## Authentication

-All endpoints require an API key as a path parameter named `:key`.
+All endpoints require the Admin API key (`ADMIN_ID`) as a URL parameter.

-Example: `/apiV2/items/:key`
-
-If the key is missing or invalid, the API responds with `401 Unauthorized`.
+Example: `/apiV2/items/{ADMIN_ID}`

 ---

-## Endpoints
+## URL

-### 1) Get all items
+- The frontend is currently running on `https://insta.the1s.de`.

-GET `/apiV2/items/:key`
+- The backend is currently running on `https://backend.insta.the1s.de`.

-Returns a list of all items wrapped in a `data` object.
+You can see the status of this and all my other services at `https://status.the1s.de`.

-Example request:
+---
+
+## Current endpoints
+
+### 1. Get All Items
+
+**GET** `/apiV2/items/:key`
+
+Returns a list of all items and their details.
+
+#### Example Request

 ```
-GET https://backend.insta.the1s.de/apiV2/items/12345
+GET https://backend.insta.the1s.de/apiV2/items/your_admin_key
 ```

-Example response:
+#### Example Response

 ```
 {
@@ -61,66 +59,206 @@ Example response:
      "can_borrow_role": 4,
      "inSafe": 1,
      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 2,
+      "item_name": "DJI 2er Mikro 1",
+      "can_borrow_role": 4,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 3,
+      "item_name": "DJI 2er Mikro 2",
+      "can_borrow_role": 4,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 4,
+      "item_name": "Rode Richt Mikrofon",
+      "can_borrow_role": 2,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 5,
+      "item_name": "Kamera Stativ",
+      "can_borrow_role": 1,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 6,
+      "item_name": "SONY Kamera - inkl. Akkus und Objektiv",
+      "can_borrow_role": 1,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 7,
+      "item_name": "MacBook inkl. Adapter",
+      "can_borrow_role": 2,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 8,
+      "item_name": "SD Karten",
+      "can_borrow_role": 3,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 9,
+      "item_name": "Kameragimbal",
+      "can_borrow_role": 1,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 10,
+      "item_name": "ATEM MINI PRO",
+      "can_borrow_role": 1,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 11,
+      "item_name": "Handygimbal",
+      "can_borrow_role": 4,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 12,
+      "item_name": "Kameralfter",
+      "can_borrow_role": 1,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 13,
+      "item_name": "Kleine Kamera 1 - inkl. Objektiv",
+      "can_borrow_role": 2,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
+    },
+    {
+      "id": 14,
+      "item_name": "Kleine Kamera 2 - inkl. Objektiv",
+      "can_borrow_role": 2,
+      "inSafe": 1,
+      "entry_created_at": "2025-08-19T22:02:16.000Z"
    }
  ]
 }
 ```

-Fields:
+Each item has the following properties:

- `id`: Unique identifier
- `item_name`: Item name
- `can_borrow_role`: Role allowed to borrow
- `inSafe`: 1 if in locker, 0 otherwise
- `entry_created_at`: Creation timestamp
+- `id`: The unique identifier for the item.
+- `item_name`: The name of the item.
+- `can_borrow_role`: The role ID that is allowed to borrow the item.
+- `inSafe`: Indicates whether the item is currently in the locker (1) or not (0). This variable/state can change over time.

-Status: 200 on success, 500 on failure.
+_You also get an http 200 status code._

 ---

-### 2) Change item safe state
+### 2. Change Item Safe State

-POST `/apiV2/controlInSafe/:key/:itemId/:state`
+**POST** `/apiV2/controlInSafe/:key/:itemId/:state`

-Updates `inSafe` (locker) state of an item.
+Updates the `inSafe` state of an item (whether it is in the locker).

- `state` must be `"1"` (in safe) or `"0"` (not in safe)
+- `state` must be `"1"` (in safe) or `"0"` (not in safe).

-Example request:
+#### Example Request

 ```
-POST https://backend.insta.the1s.de/apiV2/controlInSafe/12345/123/1
+POST https://backend.insta.the1s.de/apiV2/controlInSafe/your_admin_key/item_id/new_item_state
 ```

-Example response (shape depends on database service):
+#### Example Response

 ```
-{ "data": { /* update result */ } }
+{}
 ```

-Status:
+_An empty object means, that the operation was successful and no further information is returned._

- 200 on success
- 400 if `state` is invalid
- 500 on failure
-
-**You can get the item id on the admin panel, from your system administrator.**
+_You also get an http 200 status code._

 ---

-### 3) Get loan by code
+### 3. Set Return Date

-GET `/apiV2/getLoanByCode/:key/:loan_code`
+**POST** `/apiV2/setReturnDate/:key/:loan_code`

-Retrieves the details of a specific loan.
+Sets the `returned_date` of a loan to the current server time.

-Example request:
+- `loan_code`: The unique code of the loan.
+
+#### Example Request

 ```
-GET https://backend.insta.the1s.de/apiV2/getLoanByCode/12345/123456
+POST https://backend.insta.the1s.de/apiV2/setReturnDate/your_admin_key/your_loan_code
 ```

-Example response:
+#### Example Response
+
+```
+{}
+```
+
+_An empty object means, that the operation was successful and no further information is returned._
+
+_You also get an http 200 status code._
+
+---
+
+### 4. Set Take Date
+
+**POST** `/apiV2/setTakeDate/:key/:loan_code`
+
+Sets the `take_date` of a loan to the current server time.
+
+- `loan_code`: The unique code of the loan.
+
+#### Example Request
+
+```
+POST https://backend.insta.the1s.de/apiV2/setTakeDate/your_admin_key/your_loan_code
+```
+
+#### Example Response
+
+```
+{}
+```
+
+_An empty object means, that the operation was successful and no further information is returned._
+
+_You also get an http 2xx status code._
+
+---
+
+### 5. Get whole loan by loan code
+
+**POST** `/getLoanByCode/:key/:loan_code`
+
+Retrieves the details of a specific loan by its unique code.
+
+- `loan_code`: The unique code of the loan.
+
+#### Example Request
+
+```
+GET https://backend.insta.the1s.de/getLoanByCode/your_admin_key/your_loan_code
+```
+
+#### Example Response

 ```
 {
@@ -133,78 +271,36 @@ Example response:
    "take_date": null,
    "returned_date": null,
    "created_at": "2025-08-20T11:23:40.000Z",
-    "loaned_items_id": [8, 9],
-    "loaned_items_name": ["SD Karten", "Kameragimbal"]
+    "loaned_items_id": [
+      8,
+      9
+    ],
+    "loaned_items_name": [
+      "SD Karten",
+      "Kameragimbal"
+    ]
  }
 }
 ```

-Status:
+_You also get an http 200 status code._

- 200 on success
- 404 if not found
+If the loan id does not exist, you will receive a 404 status code and an error message.
+
+```
+{
+  "message": "Loan not found"
+}
+```

 ---

-### 4) Set return date (now) by loan code
+## Error Handling

-POST `/apiV2/setReturnDate/:key/:loan_code`
-
-Sets the `returned_date` to the current server time.
-
-**Note:** I have updated this API route, so that everytime you return or take a loan, the state of the loaned items is automatically updated.
-
-**DO NOT UPDATE THE STATE MANUALLY! (only if the item was taken with an admin key)**
-
-Example request:
-
-```
-POST https://backend.insta.the1s.de/apiV2/setReturnDate/12345/123456
-```
-
-Example response:
-
-```
-{ "data": { /* update result */ } }
-```
-
-Status: 200 on success, 500 on failure.
+- `403 Forbidden`: Invalid or missing API key.
+- `400 Bad Request`: Invalid parameters (e.g., wrong state value).
+- `500 Internal Server Error`: Database or server error.

 ---

-### 5) Set take date (now) by loan code
-
-POST `/apiV2/setTakeDate/:key/:loan_code`
-
-Sets the `take_date` to the current server time.
-
-**Note:** I have updated this API route, so that everytime you return or take a loan, the state of the loaned items is automatically updated.
-
-**DO NOT UPDATE THE STATE MANUALLY! (only if the item was taken with an admin key)**
-
-Example request:
-
-```
-POST https://backend.insta.the1s.de/apiV2/setTakeDate/12345/123456
-```
-
-Example response:
-
-```
-{ "data": { /* update result */ } }
-```
-
-Status: 200 on success, 500 on failure.
-
---
-
-## Error handling
-
- 401 Unauthorized: Missing or invalid API key
- 400 Bad Request: Invalid parameters (e.g., wrong state value)
- 404 Not Found: Loan not found
- 500 Internal Server Error: Database or server error
-
---
-
-If you have questions or want to collaborate, please reach out!
+If you have questions or want to collaborate, please reach out to me!
--- a/README.md
+++ b/README.md
@@ -1,73 +1,7 @@
 # Borrow System

-![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB)
-![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)
-![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=white)
-![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?logo=tailwind-css&logoColor=white)
-![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)
-![Express](https://img.shields.io/badge/Express-000000?logo=express&logoColor=white)
-![MySQL](https://img.shields.io/badge/MySQL-4479A1?logo=mysql&logoColor=white)
-![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=white)
-![JWT](https://img.shields.io/badge/JWT-000000?logo=jsonwebtokens&logoColor=white)
+**You have reached the `debian12` branch.**

-A small full‑stack system to log in, view available items, reserve them for a time window, and manage personal loans.
+Here you will find the source code of exactly the application that I have hosted.

- Frontend: React + TypeScript + Vite + Tailwind CSS
- Backend: Node.js + Express + MySQL + JWT (jose)
- Orchestration: Docker Compose (backend + MySQL)
-
-## Contents
-
- Frontend: [frontend/](frontend)
-  - Vite/Tailwind config: [frontend/vite.config.ts](frontend/vite.config.ts), [frontend/tailwind.config.js](frontend/tailwind.config.js)
-  - App entry: [frontend/src/main.tsx](frontend/src/main.tsx), [frontend/src/App.tsx](frontend/src/App.tsx)
-  - UI: [frontend/src/layout/Layout.tsx](frontend/src/layout/Layout.tsx), [frontend/src/components](frontend/src/components)
-  - Data/utilities: [frontend/src/utils/fetchData.ts](frontend/src/utils/fetchData.ts), [frontend/src/utils/userHandler.ts](frontend/src/utils/userHandler.ts), [frontend/src/utils/toastify.ts](frontend/src/utils/toastify.ts)
- Backend: [backend/](backend)
-  - Server: [backend/server.js](backend/server.js)
-  - Routes: [backend/routes/api.js](backend/routes/api.js), [backend/routes/apiV2.js](backend/routes/apiV2.js)
-  - DB + services: [backend/services/database.js](backend/services/database.js), [backend/services/tokenService.js](backend/services/tokenService.js)
-  - Schema/seed: [backend/scheme.sql](backend/scheme.sql)
- Docs: [docs/](docs)
-  - API docs (see below): [docs/backend_API_docs/README.md](docs/backend_API_docs/README.md)
-
-## Features (high‑level)
-
- Auth via JWT (login -> token cookie) using the backend route in [backend/routes/api.js](backend/routes/api.js).
- After login, the app loads items, loans, and user loans and keeps them in localStorage.
- Choose a date range to fetch borrowable items, select items, and create a loan.
- Manage personal loans list (and delete a loan).
-
-Key frontend utilities:
-
- [`utils.fetchData.fetchAllData`](frontend/src/utils/fetchData.ts): loads items, loans, and user loans after login.
- [`utils.fetchData.getBorrowableItems`](frontend/src/utils/fetchData.ts): fetches borrowable items for the selected time range.
- [`utils.userHandler.createLoan`](frontend/src/utils/userHandler.ts): creates a new loan for selected items.
- [`utils.userHandler.handleDeleteLoan`](frontend/src/utils/userHandler.ts): deletes a loan and syncs local state.
- [`utils.toastify.myToast`](frontend/src/utils/toastify.ts): toast notifications.
-
-UI flow (main screens):
-
- Period selection: [frontend/src/components/Form1.tsx](frontend/src/components/Form1.tsx)
- Borrowable items + selection: [frontend/src/components/Form2.tsx](frontend/src/components/Form2.tsx)
- User loans table: [frontend/src/components/Form4.tsx](frontend/src/components/Form4.tsx)
-
-## Development
-
- Scripts: see [frontend/package.json](frontend/package.json) and [backend/package.json](backend/package.json)
-  - Frontend: `npm run dev`, `npm run build`, `npm run preview`, `npm run lint`
-  - Backend: `npm start`
- Linting: ESLint configured via [frontend/eslint.config.js](frontend/eslint.config.js)
- TypeScript configs: [frontend/tsconfig.app.json](frontend/tsconfig.app.json), [frontend/tsconfig.node.json](frontend/tsconfig.node.json)
-
-## Configuration notes
-
- Vite/Tailwind integration via [frontend/vite.config.ts](frontend/vite.config.ts) and `@tailwindcss/vite`; CSS entry uses `@import "tailwindcss"` in [frontend/src/index.css](frontend/src/index.css).
- Toasts wired in [frontend/src/main.tsx](frontend/src/main.tsx) with `react-toastify`.
- Local state is stored in `localStorage` keys: `allItems`, `allLoans`, `userLoans`, `borrowableItems`. Cross‑component updates are signaled via window events from [`utils.fetchData`](frontend/src/utils/fetchData.ts).
-
-## API documentation
-
-Refer to the dedicated API docs:
-
-`docs/backend_API_docs/README.md`
+The main branch or the branch that I am developing on, is the `dev` branch.
--- a/admin/src/Layout/Dashboard.tsx
+++ b/admin/src/Layout/Dashboard.tsx
@@ -1,12 +1,10 @@
 import React from "react";
 import { useState } from "react";
-import { useEffect } from "react";
 import { Box, Heading, Text, Flex, Button } from "@chakra-ui/react";
 import Sidebar from "./Sidebar";
 import UserTable from "../components/UserTable";
 import ItemTable from "../components/ItemTable";
 import LoanTable from "../components/LoanTable";
-import APIKeyTable from "@/components/APIKeyTable";
 import { MoveLeft } from "lucide-react";

 type DashboardProps = {
@@ -18,24 +16,6 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {

  const [activeView, setActiveView] = useState("");

-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const raw = window.location.pathname.slice(1);
-    if (raw) {
-      setActiveView(decodeURIComponent(raw));
-    }
-  }, []);
-
-  // Sync URL when activeView changes, without reloading
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    if (!activeView) return;
-    const desired = `/${encodeURIComponent(activeView)}`;
-    if (window.location.pathname !== desired) {
-      window.history.replaceState(null, "", desired);
-    }
-  }, [activeView]);
-
  return (
    <Flex h="100vh">
      <Sidebar
@@ -43,7 +23,6 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
        viewGegenstaende={() => setActiveView("Gegenstände")}
        viewSchliessfaecher={() => setActiveView("Schließfächer")}
        viewUser={() => setActiveView("User")}
-        viewAPI={() => setActiveView("API")}
      />
      <Box flex="1" display="flex" flexDirection="column">
        <Flex
@@ -87,7 +66,6 @@ const Dashboard: React.FC<DashboardProps> = ({ onLogout }) => {
          {activeView === "User" && <UserTable />}
          {activeView === "Ausleihen" && <LoanTable />}
          {activeView === "Gegenstände" && <ItemTable />}
-          {activeView === "API" && <APIKeyTable />}
        </Box>
      </Box>
    </Flex>
--- a/admin/src/Layout/Layout.tsx
+++ b/admin/src/Layout/Layout.tsx
@@ -5,11 +5,6 @@ import Login from "./Login";
 import Cookies from "js-cookie";
 import Landingpage from "@/components/API/Landingpage";

-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 const Layout: React.FC = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [showAPI, setShowAPI] = useState(false);
@@ -24,7 +19,7 @@ const Layout: React.FC = () => {

    if (Cookies.get("token")) {
      const verifyToken = async () => {
-        const response = await fetch(`${API_BASE}/api/verifyToken`, {
+        const response = await fetch("https://backend.insta.the1s.de/api/verifyToken", {
          method: "GET",
          headers: {
            Authorization: `Bearer ${Cookies.get("token")}`,
@@ -44,7 +39,6 @@ const Layout: React.FC = () => {

  const handleLogout = () => {
    Cookies.remove("token");
-    window.location.pathname = "/";
    setIsLoggedIn(false);
  };

--- a/admin/src/Layout/Login.tsx
+++ b/admin/src/Layout/Login.tsx
@@ -24,43 +24,41 @@ const Login: React.FC<{ onSuccess: () => void }> = ({ onSuccess }) => {

  return (
    <div className="min-h-screen flex items-center justify-center p-4">
-      <form onSubmit={(e) => e.preventDefault()}>
-        <Card.Root maxW="sm">
-          <Card.Header>
-            <Card.Title>Login</Card.Title>
-            <Card.Description>
-              Bitte unten Ihre Admin Zugangsdaten eingeben.
-            </Card.Description>
-          </Card.Header>
-          <Card.Body>
-            <Stack gap="4" w="full">
-              <Field.Root>
-                <Field.Label>username</Field.Label>
-                <Input
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                />
-              </Field.Root>
-              <Field.Root>
-                <Field.Label>password</Field.Label>
-                <Input
-                  type="password"
-                  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} />
-            )}
-            <Button type="submit" onClick={() => handleLogin()} variant="solid">
-              Login
-            </Button>
-          </Card.Footer>
-        </Card.Root>
-      </form>
+      <Card.Root maxW="sm">
+        <Card.Header>
+          <Card.Title>Login</Card.Title>
+          <Card.Description>
+            Bitte unten Ihre Admin Zugangsdaten eingeben.
+          </Card.Description>
+        </Card.Header>
+        <Card.Body>
+          <Stack gap="4" w="full">
+            <Field.Root>
+              <Field.Label>username</Field.Label>
+              <Input
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label>password</Field.Label>
+              <Input
+                type="password"
+                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} />
+          )}
+          <Button onClick={() => handleLogin()} variant="solid">
+            Login
+          </Button>
+        </Card.Footer>
+      </Card.Root>
    </div>
  );
 };
--- a/admin/src/Layout/Sidebar.tsx
+++ b/admin/src/Layout/Sidebar.tsx
@@ -6,14 +6,12 @@ type SidebarProps = {
  viewGegenstaende: () => void;
  viewSchliessfaecher: () => void;
  viewUser: () => void;
-  viewAPI: () => void;
 };

 const Sidebar: React.FC<SidebarProps> = ({
  viewAusleihen,
  viewGegenstaende,
  viewUser,
-  viewAPI,
 }) => {
  return (
    <Box
@@ -60,15 +58,6 @@ const Sidebar: React.FC<SidebarProps> = ({
          >
            Gegenstände
          </Link>
-          <Link
-            px={3}
-            py={2}
-            rounded="md"
-            _hover={{ bg: "gray.700", textDecoration: "none" }}
-            onClick={viewAPI}
-          >
-            API Keys
-          </Link>
        </VStack>

        <Box mt="auto" pt={8} fontSize="xs" color="gray.500">
--- a/admin/src/components/API/Landingpage.tsx
+++ b/admin/src/components/API/Landingpage.tsx
@@ -14,11 +14,6 @@ import { Lock, LockOpen } from "lucide-react";
 import MyAlert from "../myChakra/MyAlert";
 import { formatDateTime } from "@/utils/userFuncs";

-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 type Loan = {
  id: number;
  username: string;
@@ -62,7 +57,7 @@ const Landingpage: React.FC = () => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
-        const loanRes = await fetch(`${API_BASE}/apiV2/allLoans`);
+        const loanRes = await fetch("http://localhost:8002/apiV2/allLoans");
        const loanData = await loanRes.json();
        if (Array.isArray(loanData)) {
          setLoans(loanData);
@@ -74,7 +69,7 @@ const Landingpage: React.FC = () => {
          );
        }

-        const deviceRes = await fetch(`${API_BASE}/apiV2/allItems`);
+        const deviceRes = await fetch("http://localhost:8002/apiV2/allItems");
        const deviceData = await deviceRes.json();
        if (Array.isArray(deviceData)) {
          setDevices(deviceData);
@@ -213,7 +208,7 @@ const Landingpage: React.FC = () => {
          borderRadius="full"
        >
          <HStack gap={2}>
-            <LockOpen size={16} />
+            <Lock size={16} />
            <Text>Im Schließfach</Text>
          </HStack>
        </Button>
@@ -226,7 +221,7 @@ const Landingpage: React.FC = () => {
          borderRadius="full"
        >
          <HStack gap={2}>
-            <Lock size={16} />
+            <LockOpen size={16} />
            <Text>Nicht im Schließfach</Text>
          </HStack>
        </Button>
--- a/admin/src/components/APIKeyTable.tsx
+++ b/admin/src/components/APIKeyTable.tsx
@@ -1,208 +0,0 @@
-import React from "react";
-import {
-  Table,
-  Spinner,
-  Text,
-  VStack,
-  Button,
-  HStack,
-  IconButton,
-  Heading,
-} from "@chakra-ui/react";
-import { Tooltip } from "@/components/ui/tooltip";
-import MyAlert from "./myChakra/MyAlert";
-import { Trash2, RefreshCcwDot, CirclePlus } from "lucide-react";
-import Cookies from "js-cookie";
-import { useState, useEffect } from "react";
-import { deleteAPKey } from "@/utils/userActions";
-import AddAPIKey from "./AddAPIKey";
-import { formatDateTime } from "@/utils/userFuncs";
-
-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
-type Items = {
-  id: number;
-  apiKey: string;
-  user: string;
-  entry_created_at: string;
-};
-
-const APIKeyTable: 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 [addAPIForm, setAddAPIForm] = useState(false);
-
-  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/apiKeys`, {
-          method: "GET",
-          headers: {
-            Authorization: `Bearer ${Cookies.get("token")}`,
-          },
-        });
-        const data = await response.json();
-        return 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 (
-    <>
-      {/* Action toolbar */}
-      <HStack
-        mb={4}
-        gap={3}
-        justify="flex-start"
-        align="center"
-        flexWrap="wrap"
-      >
-        <Tooltip content="API Keys neu laden" openDelay={300}>
-          <IconButton
-            aria-label="Refresh API Keys"
-            size="sm"
-            variant="outline"
-            rounded="md"
-            shadow="sm"
-            _hover={{ shadow: "md", transform: "translateY(-2px)" }}
-            _active={{ transform: "translateY(0)" }}
-            onClick={() => setReload(!reload)}
-          >
-            <RefreshCcwDot size={18} />
-          </IconButton>
-        </Tooltip>
-
-        <Tooltip content="Neuen API Key hinzufügen" openDelay={300}>
-          <Button
-            size="sm"
-            colorPalette="teal"
-            variant="solid"
-            rounded="md"
-            fontWeight="semibold"
-            shadow="sm"
-            _hover={{ shadow: "md", bg: "colorPalette.600" }}
-            _active={{ bg: "colorPalette.700" }}
-            onClick={() => {
-              setAddAPIForm(true);
-            }}
-          >
-            <CirclePlus size={18} style={{ marginRight: 6 }} />
-            Neuen API Key hinzufügen
-          </Button>
-        </Tooltip>
-      </HStack>
-      {/* End action toolbar */}
-
-      <Heading marginBottom={4} size="md">
-        Gegenstände
-      </Heading>
-      {isError && (
-        <MyAlert
-          status={errorStatus}
-          description={errorDsc}
-          title={errorMessage}
-        />
-      )}
-      {isLoading && (
-        <VStack colorPalette="teal">
-          <Spinner color="colorPalette.600" />
-          <Text color="colorPalette.600">Loading...</Text>
-        </VStack>
-      )}
-      {addAPIForm && (
-        <AddAPIKey
-          onClose={() => {
-            setAddAPIForm(false);
-            setReload(!reload);
-          }}
-          alert={setError}
-        />
-      )}
-
-      <Table.Root size="sm" striped>
-        <Table.Header>
-          <Table.Row>
-            <Table.ColumnHeader>
-              <strong>#</strong>
-            </Table.ColumnHeader>
-            <Table.ColumnHeader>
-              <strong>API Key</strong>
-            </Table.ColumnHeader>
-            <Table.ColumnHeader>
-              <strong>Benutzer</strong>
-            </Table.ColumnHeader>
-            <Table.ColumnHeader>
-              <strong>Eintrag erstellt am</strong>
-            </Table.ColumnHeader>
-            <Table.ColumnHeader>
-              <strong>Aktionen</strong>
-            </Table.ColumnHeader>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          {items.map((apiKey) => (
-            <Table.Row key={apiKey.id}>
-              <Table.Cell>{apiKey.id}</Table.Cell>
-              <Table.Cell>{apiKey.apiKey}</Table.Cell>
-              <Table.Cell>{apiKey.user}</Table.Cell>
-              <Table.Cell>{formatDateTime(apiKey.entry_created_at)}</Table.Cell>
-              <Table.Cell>
-                <Button
-                  onClick={() =>
-                    deleteAPKey(apiKey.id).then((response) => {
-                      if (response.success) {
-                        setItems(items.filter((i) => i.id !== apiKey.id));
-                        setError(
-                          "success",
-                          "Gegenstand gelöscht",
-                          "Der Gegenstand wurde erfolgreich gelöscht."
-                        );
-                      }
-                    })
-                  }
-                  colorPalette="red"
-                  size="sm"
-                  ml={2}
-                >
-                  <Trash2 />
-                </Button>
-              </Table.Cell>
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table.Root>
-    </>
-  );
-};
-
-export default APIKeyTable;
--- a/admin/src/components/AddAPIKey.tsx
+++ b/admin/src/components/AddAPIKey.tsx
@@ -1,81 +0,0 @@
-import React from "react";
-import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
-import { createAPIentry } from "@/utils/userActions";
-
-type AddAPIKeyProps = {
-  onClose: () => void;
-  alert: (
-    status: "success" | "error",
-    message: string,
-    description: string
-  ) => void;
-};
-
-const AddAPIKey: React.FC<AddAPIKeyProps> = ({ onClose, alert }) => {
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
-      <Card.Root maxW="sm">
-        <Card.Header>
-          <Card.Title>Neuen API Key erstellen</Card.Title>
-          <Card.Description>
-            Füllen Sie das folgende Formular aus, um einen API Key zu erstellen.
-          </Card.Description>
-        </Card.Header>
-        <Card.Body>
-          <Stack gap="4" w="full">
-            <Field.Root>
-              <Field.Label>API key</Field.Label>
-              <Input type="number" id="apiKey" />
-            </Field.Root>
-            <Field.Root>
-              <Field.Label>Benutzer</Field.Label>
-              <Input id="user" type="text" />
-            </Field.Root>
-          </Stack>
-        </Card.Body>
-        <Card.Footer justifyContent="flex-end">
-          <Button variant="outline" onClick={onClose}>
-            Abbrechen
-          </Button>
-          <Button
-            variant="solid"
-            onClick={async () => {
-              const apiKey =
-                (
-                  document.getElementById("apiKey") as HTMLInputElement
-                )?.value.trim() || "";
-              const user =
-                (
-                  document.getElementById("user") as HTMLInputElement
-                )?.value.trim() || "";
-
-              if (!apiKey || !user) return;
-
-              const res = await createAPIentry(apiKey, user);
-              if (res.success) {
-                alert(
-                  "success",
-                  "API Key erstellt",
-                  "Der API Key wurde erfolgreich erstellt."
-                );
-                onClose();
-              } else {
-                alert(
-                  "error",
-                  "Fehler beim Erstellen des API Keys",
-                  res.message ||
-                    "Beim Erstellen des API Keys ist ein Fehler aufgetreten. (frontend bug)"
-                );
-                onClose();
-              }
-            }}
-          >
-            Erstellen
-          </Button>
-        </Card.Footer>
-      </Card.Root>
-    </div>
-  );
-};
-
-export default AddAPIKey;
--- a/admin/src/components/AddItemForm.tsx
+++ b/admin/src/components/AddItemForm.tsx
@@ -33,7 +33,7 @@ const AddItemForm: React.FC<AddItemFormProps> = ({ onClose, alert }) => {
              <Input
                id="can_borrow_role"
                type="number"
-                placeholder="Zahl (1 - 4)"
+                placeholder="Zahl (z.B. 2)"
              />
            </Field.Root>
          </Stack>
@@ -68,10 +68,8 @@ const AddItemForm: React.FC<AddItemFormProps> = ({ onClose, alert }) => {
                alert(
                  "error",
                  "Fehler",
-                  res.message ||
-                    "Der Gegenstand konnte nicht erstellt werden. (frontend bug)"
+                  "Der Gegenstand konnte nicht erstellt werden."
                );
-                onClose();
              }
            }}
          >
--- a/admin/src/components/ChangePWform.tsx
+++ b/admin/src/components/ChangePWform.tsx
@@ -55,64 +55,57 @@ const ChangePWform: React.FC<ChangePWformProps> = ({
            </Field.Root>
          </Stack>
        </Card.Body>
-        <Card.Footer gap="2">
-          <Stack w="full" gap="3">
-            <Stack direction="row" justify="flex-end" gap="2">
-              <Button variant="outline" onClick={onClose}>
-                Abbrechen
-              </Button>
-              <Button
-                variant="solid"
-                onClick={async () => {
-                  const newPassword =
-                    (
-                      document.getElementById(
-                        "new_password"
-                      ) as HTMLInputElement
-                    )?.value.trim() || "";
-                  const confirmNewPassword =
-                    (
-                      document.getElementById(
-                        "confirm_new_password"
-                      ) as HTMLInputElement
-                    )?.value.trim() || "";
+        <Card.Footer justifyContent="flex-end" gap="2">
+          <Button variant="outline" onClick={onClose}>
+            Abbrechen
+          </Button>
+          <Button
+            variant="solid"
+            onClick={async () => {
+              const newPassword =
+                (
+                  document.getElementById("new_password") as HTMLInputElement
+                )?.value.trim() || "";
+              const confirmNewPassword =
+                (
+                  document.getElementById(
+                    "confirm_new_password"
+                  ) as HTMLInputElement
+                )?.value.trim() || "";

-                  if (!newPassword || newPassword !== confirmNewPassword) {
-                    subAlert("Passwörter stimmen nicht überein!");
-                    return;
-                  }
+              if (!newPassword || newPassword !== confirmNewPassword) {
+                subAlert("Passwörter stimmen nicht überein!");
+                return;
+              }

-                  const res = await changePW(newPassword, username);
-                  if (res.success) {
-                    alert(
-                      "success",
-                      "Passwort geändert",
-                      "Das Passwort wurde erfolgreich geändert."
-                    );
-                    onClose();
-                  } else {
-                    alert(
-                      "error",
-                      "Fehler",
-                      "Das Passwort konnte nicht geändert werden."
-                    );
-                    onClose();
-                  }
-                }}
-              >
-                Ändern
-              </Button>
-            </Stack>
-
-            {showSubAlert && (
-              <Alert.Root status="error">
-                <Alert.Indicator />
-                <Alert.Content>
-                  <Alert.Title>{subAlertMessage}</Alert.Title>
-                </Alert.Content>
-              </Alert.Root>
-            )}
-          </Stack>
+              const res = await changePW(newPassword, username);
+              if (res.success) {
+                alert(
+                  "success",
+                  "Passwort geändert",
+                  "Das Passwort wurde erfolgreich geändert."
+                );
+                onClose();
+              } else {
+                alert(
+                  "error",
+                  "Fehler",
+                  "Das Passwort konnte nicht geändert werden."
+                );
+                onClose();
+              }
+            }}
+          >
+            Ändern
+          </Button>
+          {showSubAlert && (
+            <Alert.Root status="error">
+              <Alert.Indicator />
+              <Alert.Content>
+                <Alert.Title>{subAlertMessage}</Alert.Title>
+              </Alert.Content>
+            </Alert.Root>
+          )}
        </Card.Footer>
      </Card.Root>
    </div>
--- a/admin/src/components/ItemTable.tsx
+++ b/admin/src/components/ItemTable.tsx
@@ -31,11 +31,6 @@ import {
 import AddItemForm from "./AddItemForm";
 import { formatDateTime } from "@/utils/userFuncs";

-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 type Items = {
  id: number;
  item_name: string;
@@ -82,7 +77,7 @@ const ItemTable: React.FC = () => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
-        const response = await fetch(`${API_BASE}/api/allItems`, {
+        const response = await fetch("https://backend.insta.the1s.de/api/allItems", {
          method: "GET",
          headers: {
            Authorization: `Bearer ${Cookies.get("token")}`,
--- a/admin/src/components/LoanTable.tsx
+++ b/admin/src/components/LoanTable.tsx
@@ -18,11 +18,6 @@ import { formatDateTime } from "@/utils/userFuncs";
 import { Trash2, RefreshCcwDot } from "lucide-react";
 import { deleteLoan } from "@/utils/userActions";

-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 const LoanTable: React.FC = () => {
  const [items, setItems] = useState<Loan[]>([]);
  const [errorStatus, setErrorStatus] = useState<"error" | "success">("error");
@@ -60,7 +55,7 @@ const LoanTable: React.FC = () => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
-        const response = await fetch(`${API_BASE}/api/allLoans`, {
+        const response = await fetch("https://backend.insta.the1s.de/api/allLoans", {
          method: "GET",
          headers: {
            Authorization: `Bearer ${Cookies.get("token")}`,
--- a/admin/src/utils/fetcher.ts
+++ b/admin/src/utils/fetcher.ts
@@ -1,12 +1,7 @@
 import Cookies from "js-cookie";

-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 export const fetchUserData = async () => {
-  const response = await fetch(`${API_BASE}/api/allUsers`, {
+  const response = await fetch("https://backend.insta.the1s.de/api/allUsers", {
    headers: {
      Authorization: `Bearer ${Cookies.get("token")}`,
    },
--- a/admin/src/utils/loginUser.ts
+++ b/admin/src/utils/loginUser.ts
@@ -1,10 +1,5 @@
 import Cookies from "js-cookie";

-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 export type LoginSuccess = { success: true };
 export type LoginFailure = {
  success: false;
@@ -18,7 +13,7 @@ export const loginFunc = async (
  password: string
 ): Promise<LoginResult> => {
  try {
-    const response = await fetch(`${API_BASE}/api/loginAdmin`, {
+    const response = await fetch("https://backend.insta.the1s.de/api/loginAdmin", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username, password }),
--- a/admin/src/utils/userActions.ts
+++ b/admin/src/utils/userActions.ts
@@ -1,14 +1,9 @@
 import Cookies from "js-cookie";

-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 export const handleDelete = async (userId: number) => {
  try {
    const response = await fetch(
-      `${API_BASE}/api/deleteUser/${userId}`,
+      `https://backend.insta.the1s.de/api/deleteUser/${userId}`,
      {
        method: "DELETE",
        headers: {
@@ -33,7 +28,7 @@ export const handleEdit = async (
 ) => {
  try {
    const response = await fetch(
-      `${API_BASE}/api/editUser/${userId}`,
+      `https://backend.insta.the1s.de/api/editUser/${userId}`,
      {
        method: "POST",
        headers: {
@@ -59,14 +54,17 @@ export const createUser = async (
  password: string
 ) => {
  try {
-    const response = await fetch(`${API_BASE}/api/createUser`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ username, role, password }),
-    });
+    const response = await fetch(
+      `https://backend.insta.the1s.de/api/createUser`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+        body: JSON.stringify({ username, role, password }),
+      }
+    );
    if (!response.ok) {
      throw new Error("Failed to create user");
    }
@@ -79,14 +77,17 @@ export const createUser = async (

 export const changePW = async (newPassword: string, username: string) => {
  try {
-    const response = await fetch(`${API_BASE}/api/changePWadmin`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ newPassword, username }),
-    });
+    const response = await fetch(
+      `https://backend.insta.the1s.de/api/changePWadmin`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+        body: JSON.stringify({ newPassword, username }),
+      }
+    );
    if (!response.ok) {
      throw new Error("Failed to change password");
    }
@@ -100,7 +101,7 @@ export const changePW = async (newPassword: string, username: string) => {
 export const deleteLoan = async (loanId: number) => {
  try {
    const response = await fetch(
-      `${API_BASE}/api/deleteLoan/${loanId}`,
+      `https://backend.insta.the1s.de/api/deleteLoan/${loanId}`,
      {
        method: "DELETE",
        headers: {
@@ -121,7 +122,7 @@ export const deleteLoan = async (loanId: number) => {
 export const deleteItem = async (itemId: number) => {
  try {
    const response = await fetch(
-      `${API_BASE}/api/deleteItem/${itemId}`,
+      `https://backend.insta.the1s.de/api/deleteItem/${itemId}`,
      {
        method: "DELETE",
        headers: {
@@ -144,20 +145,19 @@ export const createItem = async (
  can_borrow_role: number
 ) => {
  try {
-    const response = await fetch(`${API_BASE}/api/createItem`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ item_name, can_borrow_role }),
-    });
+    const response = await fetch(
+      `https://backend.insta.the1s.de/api/createItem`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+        body: JSON.stringify({ item_name, can_borrow_role }),
+      }
+    );
    if (!response.ok) {
-      return {
-        success: false,
-        message:
-          "Fehler beim Erstellen des Gegenstands. Der Name des Gegenstandes darf nicht mehrmals vergeben werden.",
-      };
+      throw new Error("Failed to create item");
    }
    return { success: true };
  } catch (error) {
@@ -172,14 +172,17 @@ export const handleEditItems = async (
  can_borrow_role: string
 ) => {
  try {
-    const response = await fetch(`${API_BASE}/api/updateItemByID`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ itemId, item_name, can_borrow_role }),
-    });
+    const response = await fetch(
+      "https://backend.insta.the1s.de/api/updateItemByID",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+        body: JSON.stringify({ itemId, item_name, can_borrow_role }),
+      }
+    );
    if (!response.ok) {
      throw new Error("Failed to edit item");
    }
@@ -193,7 +196,7 @@ export const handleEditItems = async (
 export const changeSafeState = async (itemId: number) => {
  try {
    const response = await fetch(
-      `${API_BASE}/api/changeSafeState/${itemId}`,
+      `https://backend.insta.the1s.de/api/changeSafeState/${itemId}`,
      {
        method: "PUT",
        headers: {
@@ -210,48 +213,3 @@ export const changeSafeState = async (itemId: number) => {
    return { success: false };
  }
 };
-
-export const createAPIentry = async (apiKey: string, user: string) => {
-  try {
-    const response = await fetch(`${API_BASE}/api/createAPIentry`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${Cookies.get("token")}`,
-      },
-      body: JSON.stringify({ apiKey, user }),
-    });
-    if (!response.ok) {
-      return {
-        success: false,
-        message:
-          "Fehler beim Erstellen des API Keys. Achten Sie darauf, dass alle Felder ausgefüllt sind und der API Key nicht doppelt vergeben wird.",
-      };
-    }
-    return { success: true };
-  } catch (error) {
-    console.error("Error creating API entry:", error);
-    return { success: false };
-  }
-};
-
-export const deleteAPKey = async (apiKeyId: number) => {
-  try {
-    const response = await fetch(
-      `${API_BASE}/api/deleteAPKey/${apiKeyId}`,
-      {
-        method: "DELETE",
-        headers: {
-          Authorization: `Bearer ${Cookies.get("token")}`,
-        },
-      }
-    );
-    if (!response.ok) {
-      throw new Error("Failed to delete API key");
-    }
-    return { success: true };
-  } catch (error) {
-    console.error("Error deleting API key:", error);
-    return { success: false };
-  }
-};
--- a/admin/tsconfig.app.json
+++ b/admin/tsconfig.app.json
@@ -29,8 +29,7 @@
      "@/*": ["./src/*"]
    },

-    "forceConsistentCasingInFileNames": true,
-    "ignoreDeprecations": "6.0"
+    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
 }
--- a/admin/vite.config.ts
+++ b/admin/vite.config.ts
@@ -8,9 +8,13 @@ export default defineConfig({
  plugins: [react(), svgr(), tailwindcss(), tsconfigPaths()],
  server: {
    host: "0.0.0.0",
-    port: 8003,
-    watch: {
-      usePolling: true,
+    allowedHosts: ["admin.insta.the1s.de"],
+    port: 8103,
+    watch: { usePolling: true },
+    hmr: {
+      host: "admin.insta.the1s.de",
+      port: 8103,
+      protocol: "wss",
    },
  },
 });
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -7,6 +7,6 @@ RUN npm install

 COPY . .

-EXPOSE 8002
+EXPOSE 8102

 CMD ["npm", "start"]
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -14,8 +14,7 @@
        "ejs": "^3.1.10",
        "express": "^5.1.0",
        "jose": "^6.0.12",
-        "mysql2": "^3.14.3",
-        "nodemailer": "^7.0.6"
+        "mysql2": "^3.14.3"
      }
    },
    "node_modules/accepts": {
@@ -714,15 +713,6 @@
        "node": ">= 0.6"
      }
    },
-    "node_modules/nodemailer": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.6.tgz",
-      "integrity": "sha512-F44uVzgwo49xboqbFgBGkRaiMgtoBrBEWCVincJPK9+S9Adkzt/wXCLKbf7dxucmxfTI5gHGB+bEmdyzN6QKjw==",
-      "license": "MIT-0",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
    "node_modules/object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
--- a/backend/package.json
+++ b/backend/package.json
@@ -16,7 +16,6 @@
    "ejs": "^3.1.10",
    "express": "^5.1.0",
    "jose": "^6.0.12",
-    "mysql2": "^3.14.3",
-    "nodemailer": "^7.0.6"
+    "mysql2": "^3.14.3"
  }
 }
--- a/backend/routes/api.js
+++ b/backend/routes/api.js
@@ -22,194 +22,9 @@ import {
  changeUserPasswordFRONTEND,
  changeInSafeStateV2,
  updateItemByID,
-  getAllApiKeys,
-  createAPIentry,
-  deleteAPKey,
-  getLoanInfoWithID,
 } from "../services/database.js";
 import { authenticate, generateToken } from "../services/tokenService.js";
 const router = express.Router();
-import nodemailer from "nodemailer";
-import dotenv from "dotenv";
-dotenv.config();
-
-// Nice HTML + text templates for the loan email
-function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
-  const brand = process.env.MAIL_BRAND_COLOR || "#0ea5e9";
-  const itemsList =
-    Array.isArray(items) && items.length
-      ? `<ul style="margin:4px 0 0 18px; padding:0;">${items
-          .map(
-            (i) =>
-              `<li style="margin:2px 0; color:#111827; line-height:1.3;">${i}</li>`
-          )
-          .join("")}</ul>`
-      : "<span style='color:#111827;'>N/A</span>";
-
-  return `<!doctype html>
-<html lang="de">
-<head>
-  <meta charset="utf-8">
-  <meta name="color-scheme" content="light">
-  <meta name="supported-color-schemes" content="light">
-  <meta name="x-apple-disable-message-reformatting">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <style>
-    :root { color-scheme: light; supported-color-schemes: light; }
-    body { margin:0; padding:0; }
-    /* Mobile stacking */
-    @media (max-width:480px) {
-      .outer { width:100% !important; }
-      .pad-sm { padding:16px !important; }
-      .w-label { width:120px !important; }
-    }
-    /* Dark-mode override safety */
-    @media (prefers-color-scheme: dark) {
-      body, table, td, p, a, h1, h2, h3 { background:#ffffff !important; color:#111827 !important; }
-      .brand-header { background:${brand} !important; color:#ffffff !important; }
-      a { color:${brand} !important; }
-    }
-  </style>
-</head>
-<body bgcolor="#ffffff" style="background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#111827; -webkit-text-size-adjust:100%;">
-  <!-- Preheader (hidden) -->
-  <div style="display:none; max-height:0; overflow:hidden; opacity:0; mso-hide:all;">
-    Neue Ausleihe erstellt – Übersicht der Buchung.
-  </div>
-  <div role="article" aria-roledescription="email" lang="de" style="padding:24px; background:#f2f4f7;">
-    <table role="presentation" cellpadding="0" cellspacing="0" width="100%" class="outer" style="max-width:600px; margin:0 auto; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;">
-      <tr>
-        <td class="brand-header" style="padding:22px 26px; background:${brand}; color:#ffffff;">
-          <h1 style="margin:0; font-size:18px; line-height:1.35; font-weight:600;">Neue Ausleihe erstellt</h1>
-        </td>
-      </tr>
-      <tr>
-        <td class="pad-sm" style="padding:24px 26px; color:#111827;">
-          <p style="margin:0 0 14px 0; line-height:1.4;">Es wurde eine neue Ausleihe angelegt. Hier sind die Details:</p>
-          <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; font-size:14px; line-height:1.3; background:#fcfcfd; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;">
-            <tbody>
-              <tr>
-                <td class="w-label" style="padding:10px 14px; color:#6b7280; width:170px; border-bottom:1px solid #ececec;">Benutzer</td>
-                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${
-                  user || "N/A"
-                }</td>
-              </tr>
-              <tr>
-                <td style="padding:10px 14px; color:#6b7280; vertical-align:top; border-bottom:1px solid #ececec;">Ausgeliehene Gegenstände</td>
-                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${itemsList}</td>
-              </tr>
-              <tr>
-                <td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Startdatum</td>
-                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
-                  startDate
-                )}</td>
-              </tr>
-              <tr>
-                <td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Enddatum</td>
-                <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
-                  endDate
-                )}</td>
-              </tr>
-              <tr>
-                <td style="padding:10px 14px; color:#6b7280;">Erstellt am</td>
-                <td style="padding:10px 14px; font-weight:600; color:#111827;">${formatDateTime(
-                  createdDate
-                )}</td>
-              </tr>
-            </tbody>
-          </table>
-          <p style="margin:22px 0 0 0; font-size:14px;">
-            <a href="https://admin.insta.the1s.de/api" style="display:inline-block; background:${brand}; color:#ffffff; text-decoration:none; padding:10px 16px; border-radius:6px; font-weight:600; font-size:14px;" target="_blank" rel="noopener noreferrer">
-              Übersicht öffnen
-            </a>
-          </p>
-          <p style="margin:18px 0 0 0; font-size:12px; color:#6b7280; line-height:1.4;">
-            Diese E-Mail wurde automatisch vom Ausleihsystem gesendet. Bitte nicht antworten.
-          </p>
-        </td>
-      </tr>
-    </table>
-  </div>
-</body>
-</html>`;
-}
-
-function buildLoanEmailText({ user, items, startDate, endDate, createdDate }) {
-  const itemsText =
-    Array.isArray(items) && items.length ? items.join(", ") : "N/A";
-  return [
-    "Neue Ausleihe erstellt",
-    "",
-    `Benutzer: ${user || "N/A"}`,
-    `Gegenstände: ${itemsText}`,
-    `Start: ${formatDateTime(startDate)}`,
-    `Ende: ${formatDateTime(endDate)}`,
-    `Erstellt am: ${formatDateTime(createdDate)}`,
-  ].join("\n");
-}
-
-function sendMailLoan(user, items, startDate, endDate, createdDate) {
-  const transporter = nodemailer.createTransport({
-    host: process.env.MAIL_HOST,
-    port: process.env.MAIL_PORT,
-    secure: true,
-    auth: {
-      user: process.env.MAIL_USER,
-      pass: process.env.MAIL_PASSWORD,
-    },
-  });
-
-  (async () => {
-    const info = await transporter.sendMail({
-      from: '"Ausleihsystem" <noreply@mcs-medien.de>',
-      to: process.env.MAIL_SENDEES,
-      subject: "Eine neue Ausleihe wurde erstellt!",
-      text: buildLoanEmailText({
-        user,
-        items,
-        startDate,
-        endDate,
-        createdDate,
-      }),
-      html: buildLoanEmail({ user, items, startDate, endDate, createdDate }),
-    });
-
-    console.log("Message sent:", info.messageId);
-  })();
-  console.log("sendMailLoan called");
-}
-
-const formatDateTime = (value) => {
-  if (value == null) return "N/A";
-
-  const toOut = (d) => {
-    if (!(d instanceof Date) || isNaN(d.getTime())) return "N/A";
-    const dd = String(d.getDate()).padStart(2, "0");
-    const mm = String(d.getMonth() + 1).padStart(2, "0");
-    const yyyy = d.getFullYear();
-    const hh = String(d.getHours()).padStart(2, "0");
-    const mi = String(d.getMinutes()).padStart(2, "0");
-    return `${dd}.${mm}.${yyyy} ${hh}:${mi} Uhr`;
-  };
-
-  if (value instanceof Date) return toOut(value);
-  if (typeof value === "number") return toOut(new Date(value));
-
-  const s = String(value).trim();
-
-  // Direct pattern: "YYYY-MM-DD[ T]HH:mm[:ss]"
-  const m = s.match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})(?::\d{2})?/);
-  if (m) {
-    const [, y, M, d, h, min] = m;
-    return `${d}.${M}.${y} ${h}:${min} Uhr`;
-  }
-
-  // ISO or other parseable formats
-  const dObj = new Date(s);
-  if (!isNaN(dObj.getTime())) return toOut(dObj);
-
-  return "N/A";
-};

 router.post("/login", async (req, res) => {
  const result = await loginFunc(req.body.username, req.body.password);
@@ -225,6 +40,7 @@ router.post("/login", async (req, res) => {
 });

 router.get("/items", authenticate, async (req, res) => {
+  console.log(req);
  const result = await getItemsFromDatabase(req.user.role);
  if (result.success) {
    res.status(200).json(result.data);
@@ -339,15 +155,6 @@ router.post("/createLoan", authenticate, async (req, res) => {
    );

    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
-      );
      return res.status(201).json({
        message: "Loan created successfully",
        loanId: result.data.id,
@@ -523,66 +330,4 @@ router.put("/changeSafeState/:itemId", authenticate, async (req, res) => {
  return res.status(500).json({ message: "Failed to update item safe state" });
 });

-router.get("/apiKeys", authenticate, async (req, res) => {
-  const result = await getAllApiKeys();
-  if (result.success) {
-    return res.status(200).json(result.data);
-  }
-  return res.status(500).json({ message: "Failed to fetch API keys" });
-});
-
-router.delete("/deleteAPKey/:id", authenticate, async (req, res) => {
-  const apiKeyId = req.params.id;
-  const result = await deleteAPKey(apiKeyId);
-  if (result.success) {
-    return res.status(200).json({ message: "API key deleted successfully" });
-  }
-  return res.status(500).json({ message: "Failed to delete API key" });
-});
-
-router.post("/createAPIentry", authenticate, async (req, res) => {
-  const apiKey = req.body.apiKey;
-  const user = req.body.user;
-  if (!apiKey || !user) {
-    return res.status(400).json({ message: "API key and user are required" });
-  }
-
-  // Ensure apiKey is a number
-  const apiKeyNum = Number(apiKey);
-  if (!Number.isFinite(apiKeyNum)) {
-    return res.status(400).json({ message: "API key must be a number" });
-  }
-
-  const result = await createAPIentry(apiKeyNum, user);
-  if (result.success) {
-    return res.status(201).json({ message: "API key created successfully" });
-  }
-  if (result.code === "DUPLICATE") {
-    return res.status(409).json({ message: "API key already exists" });
-  }
-  return res.status(500).json({ message: "Failed to create API key" });
-});
-
-router.get("/apiKeys/validate/:key", async (req, res) => {
-  try {
-    const rawKey = req.params.key;
-    const result = await getAllApiKeys();
-    if (!result.success || !Array.isArray(result.data)) {
-      return res.status(500).json({ valid: false });
-    }
-
-    const isValid = result.data.some((entry) => {
-      const val = String(
-        entry?.key ?? entry?.apiKey ?? entry?.api_key ?? entry
-      );
-      return val === String(rawKey);
-    });
-
-    return res.status(200).json({ valid: isValid });
-  } catch (err) {
-    console.error("validate api key error:", err);
-    return res.status(500).json({ valid: false });
-  }
-});
-
 export default router;
--- a/backend/routes/apiV2.js
+++ b/backend/routes/apiV2.js
@@ -3,68 +3,34 @@ import dotenv from "dotenv";
 import {
  getItemsFromDatabaseV2,
  changeInSafeStateV2,
-  setTakeDateV2,
  setReturnDateV2,
+  setTakeDateV2,
  getLoanByCodeV2,
  getAllLoansV2,
-  getAPIkey,
 } from "../services/database.js";

 dotenv.config();
 const router = express.Router();

-async function validateAPIKey(apiKey) {
-  try {
-    if (!apiKey) return false;
-    const result = await getAPIkey();
-    if (!result?.success || !Array.isArray(result.data)) return false;
-    return result.data.some((row) => String(row.apiKey) === String(apiKey));
-  } catch (err) {
-    console.error("validateAPIKey error:", err);
-    return false;
-  }
-}
-
-// Add a guard that returns Access Denied instead of hanging
-const apiKeyGuard = async (req, res, next) => {
-  try {
-    const key = req.params.key;
-    if (!key) {
-      return res
-        .status(401)
-        .json({ message: "Access denied: missing API key" });
-    }
-    const ok = await validateAPIKey(key);
-    if (!ok) {
-      return res
-        .status(401)
-        .json({ message: "Access denied: invalid API key" });
-    }
-    next();
-  } catch (e) {
-    console.error("apiKeyGuard error:", e);
-    res.status(500).json({ message: "Internal server error" });
-  }
-};
-
 // Route for API to get ALL items from the database
-router.get("/items/:key", apiKeyGuard, async (req, res) => {
-  const result = await getItemsFromDatabaseV2();
-  if (result.success) {
-    res.status(200).json({ data: result.data });
+router.get("/items/:key", async (req, res) => {
+  if (req.params.key === process.env.ADMIN_ID) {
+    const result = await getItemsFromDatabaseV2();
+    if (result.success) {
+      res.status(200).json({ data: result.data });
+    } else {
+      res.status(500).json({ message: "Failed to fetch items" });
+    }
  } else {
-    res.status(500).json({ message: "Failed to fetch items" });
+    res.status(403).json({ message: "Access denied" });
  }
 });

 // Route for API to control the position of an item
-router.post(
-  "/controlInSafe/:key/:itemId/:state",
-  apiKeyGuard,
-  async (req, res) => {
+router.post("/controlInSafe/:key/:itemId/:state", async (req, res) => {
+  if (req.params.key === process.env.ADMIN_ID) {
    const itemId = req.params.itemId;
    const state = req.params.state;
-
    if (state === "1" || state === "0") {
      const result = await changeInSafeStateV2(itemId, state);
      if (result.success) {
@@ -75,43 +41,58 @@ router.post(
    } else {
      res.status(400).json({ message: "Invalid state value" });
    }
+  } else {
+    res.status(403).json({ message: "Access denied" });
  }
-);
+});

 // Route for API to get a loan by its code
-router.get("/getLoanByCode/:key/:loan_code", apiKeyGuard, async (req, res) => {
-  const loan_code = req.params.loan_code;
-  const result = await getLoanByCodeV2(loan_code);
-  if (result.success) {
-    res.status(200).json({ data: result.data });
-  } else {
-    res.status(404).json({ message: "Loan not found" });
+router.get("/getLoanByCode/:key/:loan_code", async (req, res) => {
+  if (req.params.key === process.env.ADMIN_ID) {
+    const loan_code = req.params.loan_code;
+
+    const result = await getLoanByCodeV2(loan_code);
+    if (result.success) {
+      res.status(200).json({ data: result.data });
+    } else {
+      res.status(404).json({ message: "Loan not found" });
+    }
  }
 });

 // Route for API to set the return date by the loan code
-router.post("/setReturnDate/:key/:loan_code", apiKeyGuard, async (req, res) => {
-  const loanCode = req.params.loan_code;
-  const result = await setReturnDateV2(loanCode);
-  if (result.success) {
-    res.status(200).json({ data: result.data });
+router.post("/setReturnDate/:key/:loan_code", async (req, res) => {
+  if (req.params.key === process.env.ADMIN_ID) {
+    const loanCode = req.params.loan_code;
+
+    const result = await setReturnDateV2(loanCode);
+    if (result.success) {
+      res.status(200).json({ data: result.data });
+    } else {
+      res.status(500).json({ message: "Failed to set return date" });
+    }
  } else {
-    res.status(500).json({ message: "Failed to set return date" });
+    res.status(403).json({ message: "Access denied" });
  }
 });

 // Route for API to set the take away date by the loan code
-router.post("/setTakeDate/:key/:loan_code", apiKeyGuard, async (req, res) => {
-  const loanCode = req.params.loan_code;
-  const result = await setTakeDateV2(loanCode);
-  if (result.success) {
-    res.status(200).json({ data: result.data });
+router.post("/setTakeDate/:key/:loan_code", async (req, res) => {
+  if (req.params.key === process.env.ADMIN_ID) {
+    const loanCode = req.params.loan_code;
+
+    const result = await setTakeDateV2(loanCode);
+    if (result.success) {
+      res.status(200).json({ data: result.data });
+    } else {
+      res.status(500).json({ message: "Failed to set take date" });
+    }
  } else {
-    res.status(500).json({ message: "Failed to set take date" });
+    res.status(403).json({ message: "Access denied" });
  }
 });

-// Route for API to get ALL loans from the database without sensitive info (only for landingpage)
+// Route for API to get ALL loans from the database without sensitive info
 router.get("/allLoans", async (req, res) => {
  const result = await getAllLoansV2();
  if (result.success) {
@@ -120,7 +101,7 @@ router.get("/allLoans", async (req, res) => {
  return res.status(500).json({ message: "Failed to fetch loans" });
 });

-// Route for API to get ALL items from the database (only for landingpage)
+// Route for API to get ALL items form the database without key
 router.get("/allItems", async (req, res) => {
  const result = await getItemsFromDatabaseV2();
  if (result.success) {
--- a/backend/scheme.sql
+++ b/backend/scheme.sql
@@ -58,14 +58,6 @@ CREATE TABLE `lockers` (
  UNIQUE KEY `locker_number` (`locker_number`)
 );

-CREATE TABLE `apiKeys` (
-  `id` int NOT NULL AUTO_INCREMENT,
-  `apiKey` int NOT NULL UNIQUE,
-  `user` VARCHAR(255) NOT NULL,
-  `entry_created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
-  PRIMARY KEY (`id`)
-);
-
 INSERT INTO `items` (`item_name`, `can_borrow_role`, `inSafe`) VALUES
 ('DJI 1er Mikro', 4, 1),
 ('DJI 2er Mikro 1', 4, 1),
--- a/backend/server.js
+++ b/backend/server.js
@@ -5,7 +5,7 @@ import apiRouter from "./routes/api.js";
 import apiRouterV2 from "./routes/apiV2.js";
 env.config();
 const app = express();
-const port = 8002;
+const port = 8102;

 app.use(cors());
 // Increase body size limits to support large CSV JSON payloads
--- a/backend/services/database.js
+++ b/backend/services/database.js
@@ -8,6 +8,7 @@ const pool = mysql
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
+    port: process.env.DB_PORT,
  })
  .promise();

@@ -51,56 +52,22 @@ export const changeInSafeStateV2 = async (itemId) => {
 };

 export const setReturnDateV2 = async (loanCode) => {
-  const [items] = await pool.query(
-    "SELECT loaned_items_id FROM loans WHERE loan_code = ?",
-    [loanCode]
-  );
-
-  if (items.length === 0) return { success: false };
-
-  const itemIds = Array.isArray(items[0].loaned_items_id)
-    ? items[0].loaned_items_id
-    : JSON.parse(items[0].loaned_items_id || "[]");
-
-  const [setItemStates] = await pool.query(
-    "UPDATE items SET inSafe = 1 WHERE id IN (?)",
-    [itemIds]
-  );
-
  const [result] = await pool.query(
    "UPDATE loans SET returned_date = NOW() WHERE loan_code = ?",
    [loanCode]
  );
-
-  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
+  if (result.affectedRows > 0) {
    return { success: true };
  }
  return { success: false };
 };

 export const setTakeDateV2 = async (loanCode) => {
-  const [items] = await pool.query(
-    "SELECT loaned_items_id FROM loans WHERE loan_code = ?",
-    [loanCode]
-  );
-
-  if (items.length === 0) return { success: false };
-
-  const itemIds = Array.isArray(items[0].loaned_items_id)
-    ? items[0].loaned_items_id
-    : JSON.parse(items[0].loaned_items_id || "[]");
-
-  const [setItemStates] = await pool.query(
-    "UPDATE items SET inSafe = 0 WHERE id IN (?)",
-    [itemIds]
-  );
-
  const [result] = await pool.query(
    "UPDATE loans SET take_date = NOW() WHERE loan_code = ?",
    [loanCode]
  );
-
-  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
+  if (result.affectedRows > 0) {
    return { success: true };
  }
  return { success: false };
@@ -182,16 +149,6 @@ export const getBorrowableItemsFromDatabase = async (
  return { success: false };
 };

-export const getLoanInfoWithID = async (loanId) => {
-  const [rows] = await pool.query("SELECT * FROM loans WHERE id = ?;", [
-    loanId,
-  ]);
-  if (rows.length > 0) {
-    return { success: true, data: rows[0] };
-  }
-  return { success: false };
-};
-
 export const createLoanInDatabase = async (
  username,
  startDate,
@@ -501,36 +458,3 @@ export const getAllLoansV2 = async () => {
  }
  return { success: false };
 };
-
-export const getAllApiKeys = async () => {
-  const [rows] = await pool.query("SELECT * FROM apiKeys");
-  if (rows.length > 0) {
-    return { success: true, data: rows };
-  }
-  return { success: false };
-};
-
-export const createAPIentry = async (apiKey, user) => {
-  const [result] = await pool.query(
-    "INSERT INTO apiKeys (apiKey, user) VALUES (?, ?)",
-    [apiKey, user]
-  );
-  if (result.affectedRows > 0) return { success: true };
-  return { success: false };
-};
-
-export const deleteAPKey = async (apiKeyId) => {
-  const [result] = await pool.query("DELETE FROM apiKeys WHERE id = ?", [
-    apiKeyId,
-  ]);
-  if (result.affectedRows > 0) return { success: true };
-  return { success: false };
-};
-
-export const getAPIkey = async () => {
-  const [rows] = await pool.query("SELECT apiKey FROM apiKeys");
-  if (rows.length > 0) {
-    return { success: true, data: rows };
-  }
-  return { success: false };
-};
--- a/backend/services/tokenService.js
+++ b/backend/services/tokenService.js
@@ -9,6 +9,7 @@ export async function generateToken(payload) {
    .setIssuedAt()
    .setExpirationTime("2h") // Token valid for 2 hours
    .sign(secret);
+  console.log("Generated token: ", newToken);
  return newToken;
 }

--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,35 +1,45 @@
 services:
-  #  borrow_system-frontend:
-  #    container_name: borrow_system-frontend
-  #    build: ./frontend
-  #    ports:
-  #      - "8001:8001"
-  #    environment:
-  #      - CHOKIDAR_USEPOLLING=true
-  #    volumes:
-  #      - ./frontend:/app
-  #      - /app/node_modules
-  #    restart: unless-stopped
+  borrow_system-frontend:
+    container_name: borrow_system-frontend
+    build: ./frontend
+    ports:
+      - "8101:8101"
+    networks:
+      - proxynet
+      - borrow_system-internal
+    environment:
+      - CHOKIDAR_USEPOLLING=true
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    restart: unless-stopped

-  #  admin-frontend:
-  #    container_name: admin-frontend
-  #    build: ./admin
-  #    ports:
-  #      - "8003:8003"
-  #    environment:
-  #      - CHOKIDAR_USEPOLLING=true
-  #    volumes:
-  #      - ./admin:/app
-  #      - /app/node_modules
-  #    restart: unless-stopped
+  admin-frontend:
+    container_name: admin-frontend
+    build: ./admin
+    networks:
+      - proxynet
+      - borrow_system-internal
+    ports:
+      - "8103:8103"
+    environment:
+      - CHOKIDAR_USEPOLLING=true
+    volumes:
+      - ./admin:/app
+      - /app/node_modules
+    restart: unless-stopped

  borrow_system-backend:
    container_name: borrow_system-backend
    build: ./backend
    ports:
-      - "8002:8002"
+      - "8102:8102"
+    networks:
+      - proxynet
+      - borrow_system-internal
    environment:
      DB_HOST: mysql
+      DB_PORT: 3306
      DB_USER: root
      DB_PASSWORD: ${DB_PASSWORD}
      DB_NAME: borrow_system
@@ -52,6 +62,14 @@ services:
      - ./mysql-timezone.cnf:/etc/mysql/conf.d/timezone.cnf:ro
    ports:
      - "3309:3306"
+    networks:
+      - borrow_system-internal

 volumes:
  mysql-data:
+
+networks:
+  proxynet:
+    external: true
+  borrow_system-internal:
+    external: false
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -7,6 +7,6 @@ RUN npm install

 COPY . .

-EXPOSE 8001
+EXPOSE 8101

 CMD ["npm", "run", "dev"]
--- a/frontend/src/components/Form4.tsx
+++ b/frontend/src/components/Form4.tsx
@@ -19,11 +19,6 @@ type Loan = {
  loaned_items_name: string[];
 };

-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 const formatDate = (iso: string | null) => {
  if (!iso) return "-";
  const m = iso.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
@@ -33,7 +28,7 @@ const formatDate = (iso: string | null) => {
 };

 async function fetchUserLoans(): Promise<Loan[]> {
-  const res = await fetch(`${API_BASE}/api/userLoans`, {
+  const res = await fetch("https://backend.insta.the1s.de/api/userLoans", {
    method: "GET",
    headers: { Authorization: `Bearer ${Cookies.get("token") || ""}` },
  });
--- a/frontend/src/utils/fetchData.ts
+++ b/frontend/src/utils/fetchData.ts
@@ -6,11 +6,6 @@ export const ALL_ITEMS_UPDATED_EVENT = "allItemsUpdated";
 export const BORROWABLE_ITEMS_UPDATED_EVENT = "borrowableItemsUpdated";
 export const AUTH_LOGOUT_EVENT = "authLogout";

-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 let sendError = false;

 function logout() {
@@ -30,7 +25,7 @@ export const fetchAllData = async (token: string | undefined) => {
  if (!token) return;
  // First we fetch all items that are potentially available for borrowing
  try {
-    const response = await fetch(`${API_BASE}/api/items`, {
+    const response = await fetch("https://backend.insta.the1s.de/api/items", {
      method: "GET",
      headers: {
        Authorization: `Bearer ${token}`,
@@ -62,7 +57,7 @@ export const fetchAllData = async (token: string | undefined) => {

  // get all loans
  try {
-    const response = await fetch(`${API_BASE}/api/loans`, {
+    const response = await fetch("https://backend.insta.the1s.de/api/loans", {
      method: "GET",
      headers: {
        Authorization: `Bearer ${token}`,
@@ -94,7 +89,7 @@ export const fetchAllData = async (token: string | undefined) => {

  // get user loans
  try {
-    const response = await fetch(`${API_BASE}/api/userLoans`, {
+    const response = await fetch("https://backend.insta.the1s.de/api/userLoans", {
      method: "GET",
      headers: {
        Authorization: `Bearer ${token}`,
@@ -127,7 +122,7 @@ export const fetchAllData = async (token: string | undefined) => {

 export const loginUser = async (username: string, password: string) => {
  try {
-    const response = await fetch(`${API_BASE}/api/login`, {
+    const response = await fetch("https://backend.insta.the1s.de/api/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@@ -163,7 +158,7 @@ export const getBorrowableItems = async () => {
  }

  try {
-    const response = await fetch(`${API_BASE}/api/borrowableItems`, {
+    const response = await fetch("https://backend.insta.the1s.de/api/borrowableItems", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${Cookies.get("token") || ""}`,
--- a/frontend/src/utils/userHandler.ts
+++ b/frontend/src/utils/userHandler.ts
@@ -2,15 +2,10 @@ import { myToast } from "./toastify";
 import Cookies from "js-cookie";
 import { queryClient } from "./queryClient";

-const API_BASE =
-  (import.meta as any).env?.VITE_BACKEND_URL ||
-  import.meta.env.VITE_BACKEND_URL ||
-  "http://localhost:8002";
-
 export const handleDeleteLoan = async (loanID: number): Promise<boolean> => {
  try {
    const response = await fetch(
-      `${API_BASE}/api/deleteLoan/${loanID}`,
+      `https://backend.insta.the1s.de/api/deleteLoan/${loanID}`,
      {
        method: "DELETE",
        headers: {
@@ -80,14 +75,17 @@ export const rmFromRemove = (itemID: number) => {

 export const createLoan = async (startDate: string, endDate: string) => {
  const items = removeArr;
-  const response = await fetch(`${API_BASE}/api/createLoan`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-    },
-    body: JSON.stringify({ items, startDate, endDate }),
-  });
+  const response = await fetch(
+    "https://backend.insta.the1s.de/api/createLoan",
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      },
+      body: JSON.stringify({ items, startDate, endDate }),
+    }
+  );

  if (!response.ok) {
    myToast("Fehler beim Erstellen der Ausleihe", "error");
@@ -108,7 +106,7 @@ export const createLoan = async (startDate: string, endDate: string) => {

 export const onReturn = async (loanID: number) => {
  const response = await fetch(
-    `${API_BASE}/api/returnLoan/${loanID}`,
+    `https://backend.insta.the1s.de/api/returnLoan/${loanID}`,
    {
      method: "POST",
      headers: {
@@ -127,12 +125,15 @@ export const onReturn = async (loanID: number) => {
 };

 export const onTake = async (loanID: number) => {
-  const response = await fetch(`${API_BASE}/api/takeLoan/${loanID}`, {
-    method: "POST",
-    headers: {
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-    },
-  });
+  const response = await fetch(
+    `https://backend.insta.the1s.de/api/takeLoan/${loanID}`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      },
+    }
+  );

  if (!response.ok) {
    myToast("Fehler beim Ausleihen der Ausleihe", "error");
@@ -144,14 +145,17 @@ export const onTake = async (loanID: number) => {
 };

 export const changePW = async (oldPassword: string, newPassword: string) => {
-  const response = await fetch(`${API_BASE}/api/changePassword`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${Cookies.get("token") || ""}`,
-    },
-    body: JSON.stringify({ oldPassword, newPassword }),
-  });
+  const response = await fetch(
+    "https://backend.insta.the1s.de/api/changePassword",
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${Cookies.get("token") || ""}`,
+      },
+      body: JSON.stringify({ oldPassword, newPassword }),
+    }
+  );

  if (!response.ok) {
    myToast("Fehler beim Ändern des Passworts", "error");
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,15 +1,17 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import svgr from "vite-plugin-svgr";
 import tailwindcss from "@tailwindcss/vite";

 export default defineConfig({
-  plugins: [react(), svgr(), tailwindcss()],
+  plugins: [tailwindcss()],
  server: {
    host: "0.0.0.0",
-    port: 8001,
-    watch: {
-      usePolling: true,
+    allowedHosts: ["insta.the1s.de"],
+    port: 8101,
+    watch: { usePolling: true },
+    hmr: {
+      host: "insta.the1s.de",
+      port: 8101,
+      protocol: "wss",
    },
  },
 });
Author	SHA1	Message	Date
Theis Gaedigk	85b519c5b1	Merge branch 'dev_v1-admin' into debian12_v1-admin	2025-09-24 17:56:52 +02:00
Theis Gaedigk	27db4c7390	changed ports	2025-09-21 10:46:53 +02:00
Theis Gaedigk	1b08344a0f	Merge branch 'dev_v1-admin' into debian12_v1-admin	2025-09-21 10:46:07 +02:00
Theis Gaedigk	a0be100db5	update changeSafeState function to use PUT method for state changes	2025-09-16 13:40:23 +02:00
Theis Gaedigk	2143d53eb5	chaged ports accordingly	2025-09-16 13:04:13 +02:00
Theis Gaedigk	c4d5ebd9ae	Merge branch 'dev_v1-admin' into debian12_v1-admin	2025-09-16 13:03:35 +02:00
Theis Gaedigk	938e9000f8	chnaged port config	2025-09-16 11:26:31 +02:00
Theis Gaedigk	558a8330af	Merge branch 'dev_v1-admin' into debian12_v1-admin	2025-09-16 11:20:37 +02:00
Theis Gaedigk	ad2395f98b	Merge branch 'dev_v1-admin' into debian12_v1-admin	2025-09-05 11:27:39 +02:00
Theis Gaedigk	51baf8d970	Merge branch 'dev_v1-admin' into debian12_v1-admin	2025-09-03 15:25:05 +02:00
Theis Gaedigk	d18465ff1d	changed urls	2025-09-03 14:54:20 +02:00
Theis Gaedigk	b36f1ba9ba	Merge branch 'dev_v1-admin' into debian12_v1-admin	2025-09-03 14:53:25 +02:00
Theis Gaedigk	784bd1e8ce	Merge branch 'dev_v1-admin' into debian12_v1-admin	2025-09-02 20:55:55 +02:00
Theis Gaedigk	ae7aec8d3b	fix: add missing network configuration for admin-frontend service	2025-09-02 20:45:02 +02:00
Theis Gaedigk	3f9381a80c	changed docker and ports	2025-09-02 20:37:32 +02:00
Theis Gaedigk	1826086186	changed docker config	2025-09-02 20:35:42 +02:00
Theis Gaedigk	af4abfc8f9	changed links for hosting	2025-09-02 20:34:20 +02:00
Theis Gaedigk	ba0f06e104	Merge branch 'dev_v1-admin' into debian12_v1-admin	2025-09-02 20:31:28 +02:00
Theis Gaedigk	a932144e94	Update README.md	2025-08-21 19:02:13 +02:00
theis.gaedigk	36ad60b782	Merge branch 'dev' into debian12	2025-08-21 18:55:50 +02:00
theis.gaedigk	e4467dba32	Merge branch 'dev' into debian12	2025-08-20 18:10:27 +02:00
theis.gaedigk	410923af92	Merge branch 'dev' into debian12	2025-08-20 13:39:19 +02:00
theis.gaedigk	24c405386b	fixed url bug	2025-08-20 13:21:55 +02:00
theis.gaedigk	d5296bd3fa	Merge branch 'dev' into debian12	2025-08-20 13:18:01 +02:00
theis.gaedigk	3ee2f6b670	Merge branch 'dev' into debian12	2025-08-20 01:08:15 +02:00
theis.gaedigk	09af4c760c	fix: update database connection settings in docker-compose and database service	2025-08-20 00:49:44 +02:00
theis.gaedigk	3fd0fd9584	fix: add borrow_system-internal network to frontend, backend, and mysql services in docker-compose	2025-08-20 00:45:43 +02:00
theis.gaedigk	27984ebac8	added	2025-08-20 00:42:56 +02:00
theis.gaedigk	3d4aab74d5	changed back	2025-08-20 00:30:49 +02:00
theis.gaedigk	4076630eec	changed	2025-08-20 00:27:06 +02:00
theis.gaedigk	6025212e93	refactor: remove redundant environment variable validation and connection check in database service fix: update dependency reference for backend service in docker-compose	2025-08-20 00:25:35 +02:00
theis.gaedigk	de554048eb	added tester	2025-08-20 00:20:35 +02:00
theis.gaedigk	e1d79d2c79	fix: update port numbers and API endpoints for consistency across backend and frontend	2025-08-19 23:55:13 +02:00