implemented jotai atoms

improved design of email
fixed mail view issues
2025-10-22 21:44:05 +02:00 · 2025-10-05 15:55:05 +02:00 · 2025-10-05 15:49:38 +02:00 · 2025-10-04 19:34:27 +02:00 · 2025-10-04 00:26:02 +02:00 · 2025-10-04 00:08:19 +02:00
20 changed files with 267 additions and 81 deletions
--- a/admin/package-lock.json
+++ b/admin/package-lock.json
@@ -12,6 +12,7 @@
        "@emotion/react": "^11.14.0",
        "@tailwindcss/vite": "^4.1.11",
        "@tanstack/react-query": "^5.85.5",
+        "jotai": "^2.15.0",
        "js-cookie": "^3.0.5",
        "lucide-react": "^0.539.0",
        "next-themes": "^0.4.6",
@@ -4420,6 +4421,35 @@
        "jiti": "lib/jiti-cli.mjs"
      }
    },
+    "node_modules/jotai": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.15.0.tgz",
+      "integrity": "sha512-nbp/6jN2Ftxgw0VwoVnOg0m5qYM1rVcfvij+MZx99Z5IK13eGve9FJoCwGv+17JvVthTjhSmNtT5e1coJnr6aw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.0.0",
+        "@babel/template": ">=7.0.0",
+        "@types/react": ">=17.0.0",
+        "react": ">=17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@babel/template": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/js-cookie": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
@@ -5645,13 +5675,13 @@
      }
    },
    "node_modules/tinyglobby": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
-      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
      "license": "MIT",
      "dependencies": {
-        "fdir": "^6.4.4",
-        "picomatch": "^4.0.2"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
      },
      "engines": {
        "node": ">=12.0.0"
@@ -5849,9 +5879,9 @@
      }
    },
    "node_modules/vite": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz",
-      "integrity": "sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==",
+      "version": "7.1.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.11.tgz",
+      "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
      "license": "MIT",
      "dependencies": {
        "esbuild": "^0.25.0",
@@ -5859,7 +5889,7 @@
        "picomatch": "^4.0.3",
        "postcss": "^8.5.6",
        "rollup": "^4.43.0",
-        "tinyglobby": "^0.2.14"
+        "tinyglobby": "^0.2.15"
      },
      "bin": {
        "vite": "bin/vite.js"
--- a/admin/package.json
+++ b/admin/package.json
@@ -14,6 +14,7 @@
    "@emotion/react": "^11.14.0",
    "@tailwindcss/vite": "^4.1.11",
    "@tanstack/react-query": "^5.85.5",
+    "jotai": "^2.15.0",
    "js-cookie": "^3.0.5",
    "lucide-react": "^0.539.0",
    "next-themes": "^0.4.6",
--- a/admin/src/Layout/Layout.tsx
+++ b/admin/src/Layout/Layout.tsx
@@ -5,6 +5,11 @@ 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);
@@ -19,7 +24,7 @@ const Layout: React.FC = () => {

    if (Cookies.get("token")) {
      const verifyToken = async () => {
-        const response = await fetch("http://localhost:8002/api/verifyToken", {
+        const response = await fetch(`${API_BASE}/api/verifyToken`, {
          method: "GET",
          headers: {
            Authorization: `Bearer ${Cookies.get("token")}`,
--- a/admin/src/States/Atoms.tsx
+++ b/admin/src/States/Atoms.tsx
@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const testAtom = atom<number>(0);
--- a/admin/src/States/README.md
+++ b/admin/src/States/README.md
@@ -0,0 +1,36 @@
+# How to use Atoms
+Atoms are the fundamental building blocks of state management in this system. They represent individual pieces of state that can be shared and manipulated across different components.
+
+You can also name it global state.
+
+## Creating an Atom
+to create an atom you have to declare an atom like this:
+
+```ts
+import { atom } from 'jotai';
+
+export const NAME_OF_YOUR_ATOM = atom<type_of_your_atom>(initial_value);
+```
+
+In this project we declare all atoms in the `States/Atoms.tsx`file. Which you can find above this README file.
+
+## Using an Atom
+To use an atom in your component, you can use the `useAtom` hook provided by Jotai. Here's an example of how to use an atom in a React component:
+
+```tsx
+import { useAtom } from 'jotai';
+import { NAME_OF_YOUR_ATOM } from '@/States/Atoms';
+
+const MyComponent = () => {
+  const [value, setValue] = useAtom(NAME_OF_YOUR_ATOM);
+
+  return (
+    <div>
+      <p>Current value: {value}</p>
+      <button onClick={() => setValue(newValue)}>Update Value</button>
+    </div>
+  );
+};
+```
+
+As you can see, you can use `useAtom` like `useState` but the state is global. In this example `value` is the current state of the atom, and `setValue` is a function to update the state, which is also known as the setter function.
--- a/admin/src/components/API/Landingpage.tsx
+++ b/admin/src/components/API/Landingpage.tsx
@@ -14,6 +14,11 @@ 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;
@@ -57,7 +62,7 @@ const Landingpage: React.FC = () => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
-        const loanRes = await fetch("http://localhost:8002/apiV2/allLoans");
+        const loanRes = await fetch(`${API_BASE}/apiV2/allLoans`);
        const loanData = await loanRes.json();
        if (Array.isArray(loanData)) {
          setLoans(loanData);
@@ -69,7 +74,7 @@ const Landingpage: React.FC = () => {
          );
        }

-        const deviceRes = await fetch("http://localhost:8002/apiV2/allItems");
+        const deviceRes = await fetch(`${API_BASE}/apiV2/allItems`);
        const deviceData = await deviceRes.json();
        if (Array.isArray(deviceData)) {
          setDevices(deviceData);
--- a/admin/src/components/APIKeyTable.tsx
+++ b/admin/src/components/APIKeyTable.tsx
@@ -18,6 +18,11 @@ 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;
@@ -51,7 +56,7 @@ const APIKeyTable: React.FC = () => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
-        const response = await fetch("http://localhost:8002/api/apiKeys", {
+        const response = await fetch(`${API_BASE}/api/apiKeys`, {
          method: "GET",
          headers: {
            Authorization: `Bearer ${Cookies.get("token")}`,
--- 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 (z.B. 2)"
+                placeholder="Zahl (1 - 4)"
              />
            </Field.Root>
          </Stack>
--- a/admin/src/components/ItemTable.tsx
+++ b/admin/src/components/ItemTable.tsx
@@ -31,6 +31,11 @@ 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;
@@ -77,7 +82,7 @@ const ItemTable: React.FC = () => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
-        const response = await fetch("http://localhost:8002/api/allItems", {
+        const response = await fetch(`${API_BASE}/api/allItems`, {
          method: "GET",
          headers: {
            Authorization: `Bearer ${Cookies.get("token")}`,
--- a/admin/src/components/LoanTable.tsx
+++ b/admin/src/components/LoanTable.tsx
@@ -18,6 +18,11 @@ 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");
@@ -55,7 +60,7 @@ const LoanTable: React.FC = () => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
-        const response = await fetch("http://localhost:8002/api/allLoans", {
+        const response = await fetch(`${API_BASE}/api/allLoans`, {
          method: "GET",
          headers: {
            Authorization: `Bearer ${Cookies.get("token")}`,
--- a/admin/src/utils/fetcher.ts
+++ b/admin/src/utils/fetcher.ts
@@ -1,7 +1,12 @@
 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("http://localhost:8002/api/allUsers", {
+  const response = await fetch(`${API_BASE}/api/allUsers`, {
    headers: {
      Authorization: `Bearer ${Cookies.get("token")}`,
    },
--- a/admin/src/utils/loginUser.ts
+++ b/admin/src/utils/loginUser.ts
@@ -1,5 +1,10 @@
 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;
@@ -13,7 +18,7 @@ export const loginFunc = async (
  password: string
 ): Promise<LoginResult> => {
  try {
-    const response = await fetch("http://localhost:8002/api/loginAdmin", {
+    const response = await fetch(`${API_BASE}/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,9 +1,14 @@
 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(
-      `http://localhost:8002/api/deleteUser/${userId}`,
+      `${API_BASE}/api/deleteUser/${userId}`,
      {
        method: "DELETE",
        headers: {
@@ -28,7 +33,7 @@ export const handleEdit = async (
 ) => {
  try {
    const response = await fetch(
-      `http://localhost:8002/api/editUser/${userId}`,
+      `${API_BASE}/api/editUser/${userId}`,
      {
        method: "POST",
        headers: {
@@ -54,7 +59,7 @@ export const createUser = async (
  password: string
 ) => {
  try {
-    const response = await fetch(`http://localhost:8002/api/createUser`, {
+    const response = await fetch(`${API_BASE}/api/createUser`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@@ -74,7 +79,7 @@ export const createUser = async (

 export const changePW = async (newPassword: string, username: string) => {
  try {
-    const response = await fetch(`http://localhost:8002/api/changePWadmin`, {
+    const response = await fetch(`${API_BASE}/api/changePWadmin`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@@ -95,7 +100,7 @@ export const changePW = async (newPassword: string, username: string) => {
 export const deleteLoan = async (loanId: number) => {
  try {
    const response = await fetch(
-      `http://localhost:8002/api/deleteLoan/${loanId}`,
+      `${API_BASE}/api/deleteLoan/${loanId}`,
      {
        method: "DELETE",
        headers: {
@@ -116,7 +121,7 @@ export const deleteLoan = async (loanId: number) => {
 export const deleteItem = async (itemId: number) => {
  try {
    const response = await fetch(
-      `http://localhost:8002/api/deleteItem/${itemId}`,
+      `${API_BASE}/api/deleteItem/${itemId}`,
      {
        method: "DELETE",
        headers: {
@@ -139,7 +144,7 @@ export const createItem = async (
  can_borrow_role: number
 ) => {
  try {
-    const response = await fetch(`http://localhost:8002/api/createItem`, {
+    const response = await fetch(`${API_BASE}/api/createItem`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@@ -167,7 +172,7 @@ export const handleEditItems = async (
  can_borrow_role: string
 ) => {
  try {
-    const response = await fetch("http://localhost:8002/api/updateItemByID", {
+    const response = await fetch(`${API_BASE}/api/updateItemByID`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@@ -188,7 +193,7 @@ export const handleEditItems = async (
 export const changeSafeState = async (itemId: number) => {
  try {
    const response = await fetch(
-      `http://localhost:8002/api/changeSafeState/${itemId}`,
+      `${API_BASE}/api/changeSafeState/${itemId}`,
      {
        method: "PUT",
        headers: {
@@ -208,7 +213,7 @@ export const changeSafeState = async (itemId: number) => {

 export const createAPIentry = async (apiKey: string, user: string) => {
  try {
-    const response = await fetch(`http://localhost:8002/api/createAPIentry`, {
+    const response = await fetch(`${API_BASE}/api/createAPIentry`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
@@ -233,7 +238,7 @@ export const createAPIentry = async (apiKey: string, user: string) => {
 export const deleteAPKey = async (apiKeyId: number) => {
  try {
    const response = await fetch(
-      `http://localhost:8002/api/deleteAPKey/${apiKeyId}`,
+      `${API_BASE}/api/deleteAPKey/${apiKeyId}`,
      {
        method: "DELETE",
        headers: {
--- a/backend/routes/api.js
+++ b/backend/routes/api.js
@@ -38,65 +38,99 @@ 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:8px 0 0 16px; padding:0;">${items
-          .map((i) => `<li style="margin:4px 0;">${i}</li>`)
+      ? `<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>N/A</span>";
+      : "<span style='color:#111827;'>N/A</span>";

  return `<!doctype html>
 <html lang="de">
-  <head>
-    <meta charset="utf-8">
-    <meta name="color-scheme" content="light dark">
-    <meta name="supported-color-schemes" content="light dark">
-  </head>
-  <body style="margin:0; padding:0; background:#f6f9fc; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#111827;">
-    <div style="padding:24px;">
-      <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px; margin:0 auto; background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;">
-        <tr>
-          <td style="padding:20px 24px; background:${brand}; color:#ffffff;">
-            <h1 style="margin:0; font-size:18px;">Neue Ausleihe erstellt</h1>
-          </td>
-        </tr>
-        <tr>
-          <td style="padding:20px 24px;">
-            <p style="margin:0 0 12px 0;">Es wurde eine neue Ausleihe angelegt. Hier sind die Details:</p>
-            <table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
+<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 style="padding:8px 0; color:#6b7280; width:180px;">Benutzer</td>
-                <td style="padding:8px 0; font-weight:600;">${
+                <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:8px 0; color:#6b7280; vertical-align:top;">Ausgeliehene Gegenstände</td>
-                <td style="padding:8px 0; font-weight:600;">${itemsList}</td>
+                <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:8px 0; color:#6b7280;">Startdatum</td>
-                <td style="padding:8px 0; font-weight:600;">${formatDateTime(
+                <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:8px 0; color:#6b7280;">Enddatum</td>
-                <td style="padding:8px 0; font-weight:600;">${formatDateTime(
+                <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:8px 0; color:#6b7280;">Erstellt am</td>
-                <td style="padding:8px 0; font-weight:600;">${formatDateTime(
+                <td style="padding:10px 14px; color:#6b7280;">Erstellt am</td>
+                <td style="padding:10px 14px; font-weight:600; color:#111827;">${formatDateTime(
                  createdDate
                )}</td>
              </tr>
-            </table>
-            <p style="margin:16px 0 0 0; font-size:12px; color:#6b7280;">Diese E-Mail wurde automatisch vom Ausleihsystem gesendet. Bitte nicht antworten.</p>
-          </td>
-        </tr>
-      </table>
-    </div>
-  </body>
+            </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>`;
 }

@@ -145,7 +179,6 @@ function sendMailLoan(user, items, startDate, endDate, createdDate) {
  console.log("sendMailLoan called");
 }

-// ...existing code...
 const formatDateTime = (value) => {
  if (value == null) return "N/A";

@@ -177,7 +210,6 @@ const formatDateTime = (value) => {

  return "N/A";
 };
-// ...existing code...

 router.post("/login", async (req, res) => {
  const result = await loginFunc(req.body.username, req.body.password);
@@ -193,7 +225,6 @@ 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);
--- a/backend/services/tokenService.js
+++ b/backend/services/tokenService.js
@@ -9,7 +9,6 @@ export async function generateToken(payload) {
    .setIssuedAt()
    .setExpirationTime("2h") // Token valid for 2 hours
    .sign(secret);
-  console.log("Generated token: ", newToken);
  return newToken;
 }

--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,7 @@
      "dependencies": {
        "@tailwindcss/vite": "^4.1.11",
        "@tanstack/react-query": "^5.85.5",
+        "jotai": "^2.15.0",
        "js-cookie": "^3.0.5",
        "lucide-react": "^0.539.0",
        "primeicons": "^7.0.0",
@@ -3164,6 +3165,35 @@
        "jiti": "lib/jiti-cli.mjs"
      }
    },
+    "node_modules/jotai": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.15.0.tgz",
+      "integrity": "sha512-nbp/6jN2Ftxgw0VwoVnOg0m5qYM1rVcfvij+MZx99Z5IK13eGve9FJoCwGv+17JvVthTjhSmNtT5e1coJnr6aw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.0.0",
+        "@babel/template": ">=7.0.0",
+        "@types/react": ">=17.0.0",
+        "react": ">=17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@babel/template": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/js-cookie": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
  "dependencies": {
    "@tailwindcss/vite": "^4.1.11",
    "@tanstack/react-query": "^5.85.5",
+    "jotai": "^2.15.0",
    "js-cookie": "^3.0.5",
    "lucide-react": "^0.539.0",
    "primeicons": "^7.0.0",
--- a/frontend/src/components/Form4.tsx
+++ b/frontend/src/components/Form4.tsx
@@ -19,6 +19,11 @@ 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})/);
@@ -28,7 +33,7 @@ const formatDate = (iso: string | null) => {
 };

 async function fetchUserLoans(): Promise<Loan[]> {
-  const res = await fetch("http://localhost:8002/api/userLoans", {
+  const res = await fetch(`${API_BASE}/api/userLoans`, {
    method: "GET",
    headers: { Authorization: `Bearer ${Cookies.get("token") || ""}` },
  });
--- a/frontend/src/utils/fetchData.ts
+++ b/frontend/src/utils/fetchData.ts
@@ -6,6 +6,11 @@ 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() {
@@ -25,7 +30,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("http://localhost:8002/api/items", {
+    const response = await fetch(`${API_BASE}/api/items`, {
      method: "GET",
      headers: {
        Authorization: `Bearer ${token}`,
@@ -57,7 +62,7 @@ export const fetchAllData = async (token: string | undefined) => {

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

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

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

  try {
-    const response = await fetch("http://localhost:8002/api/borrowableItems", {
+    const response = await fetch(`${API_BASE}/api/borrowableItems`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${Cookies.get("token") || ""}`,
--- a/frontend/src/utils/userHandler.ts
+++ b/frontend/src/utils/userHandler.ts
@@ -2,10 +2,15 @@ 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(
-      `http://localhost:8002/api/deleteLoan/${loanID}`,
+      `${API_BASE}/api/deleteLoan/${loanID}`,
      {
        method: "DELETE",
        headers: {
@@ -75,7 +80,7 @@ export const rmFromRemove = (itemID: number) => {

 export const createLoan = async (startDate: string, endDate: string) => {
  const items = removeArr;
-  const response = await fetch("http://localhost:8002/api/createLoan", {
+  const response = await fetch(`${API_BASE}/api/createLoan`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
@@ -103,7 +108,7 @@ export const createLoan = async (startDate: string, endDate: string) => {

 export const onReturn = async (loanID: number) => {
  const response = await fetch(
-    `http://localhost:8002/api/returnLoan/${loanID}`,
+    `${API_BASE}/api/returnLoan/${loanID}`,
    {
      method: "POST",
      headers: {
@@ -122,7 +127,7 @@ export const onReturn = async (loanID: number) => {
 };

 export const onTake = async (loanID: number) => {
-  const response = await fetch(`http://localhost:8002/api/takeLoan/${loanID}`, {
+  const response = await fetch(`${API_BASE}/api/takeLoan/${loanID}`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${Cookies.get("token") || ""}`,
@@ -139,7 +144,7 @@ export const onTake = async (loanID: number) => {
 };

 export const changePW = async (oldPassword: string, newPassword: string) => {
-  const response = await fetch("http://localhost:8002/api/changePassword", {
+  const response = await fetch(`${API_BASE}/api/changePassword`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
Author	SHA1	Message	Date
Theis Gaedigk	86af1a5edf	implemented jotai atoms	2025-10-22 21:44:05 +02:00
Theis Gaedigk	49d4d13afc	improved design of email	2025-10-05 15:55:05 +02:00
Theis Gaedigk	45fa095eaf	fixed mail view issues	2025-10-05 15:49:38 +02:00
Theis Gaedigk	23be7e12c7	removed some logging stuff	2025-10-04 19:34:27 +02:00
Theis Gaedigk	6ea1ff799c	added .env link function	2025-10-04 00:26:02 +02:00
Theis Gaedigk	5131266242	changed itemform placeholder for better understanding	2025-10-04 00:08:19 +02:00
Theis Gaedigk	bb17bc735c	added landingpage to email	2025-10-04 00:07:32 +02:00