Merge branch 'dev_v1-admin' into debian12_v1-admin

admin/src/components/AddForm.tsx

@@ -65,6 +65,13 @@ const AddForm: React.FC<AddFormProps> = ({ onClose, alert }) => {
                   "Der Nutzer wurde erfolgreich erstellt."
                 );
                 onClose();
+              } else {
+                alert(
+                  "error",
+                  "Fehler beim Erstellen des Nutzers",
+                  "Es gab einen Fehler beim Erstellen des Nutzers. Vielleicht gibt es bereits einen Nutzer mit diesem Benutzernamen."
+                );
+                onClose();
               }
             }}
           >

admin/src/components/ChangePWform.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import { Button, Card, Field, Input, Stack, Alert } from "@chakra-ui/react";
+import { changePW } from "@/utils/userActions";
+import { useState } from "react";
+
+type ChangePWformProps = {
+  onClose: () => void;
+  alert: (
+    status: "success" | "error",
+    message: string,
+    description: string
+  ) => void;
+  username: string;
+};
+
+const ChangePWform: React.FC<ChangePWformProps> = ({
+  onClose,
+  alert,
+  username,
+}) => {
+  const [showSubAlert, setShowSubAlert] = useState(false);
+  const [subAlertMessage, setSubAlertMessage] = useState("");
+
+  const subAlert = (message: string) => {
+    setSubAlertMessage(message);
+    setShowSubAlert(true);
+  };
+
+  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>Passwort ändern</Card.Title>
+          <Card.Description>
+            Füllen Sie das folgende Formular aus, um das Passwort zu ändern.
+          </Card.Description>
+        </Card.Header>
+        <Card.Body>
+          <Stack gap="4" w="full">
+            <Field.Root>
+              <Field.Label>Neues Passwort</Field.Label>
+              <Input
+                id="new_password"
+                type="password"
+                placeholder="Neues Passwort"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label>Neues Passwort widerholen</Field.Label>
+              <Input
+                id="confirm_new_password"
+                type="password"
+                placeholder="Wiederholen Sie das neue Passwort"
+              />
+            </Field.Root>
+          </Stack>
+        </Card.Body>
+        <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;
+              }
+
+              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>
+  );
+};
+
+export default ChangePWform;

admin/src/components/ItemTable.tsx

@@ -24,6 +24,7 @@ import Cookies from "js-cookie";
 import { useState, useEffect } from "react";
 import { deleteItem } from "@/utils/userActions";
 import AddItemForm from "./AddItemForm";
+import { formatDateTime } from "@/utils/userFuncs";
 
 type Items = {
   id: number;
@@ -232,7 +233,7 @@ const ItemTable: React.FC = () => {
                   </Tag.Root>
                 )}
               </Table.Cell>
-              <Table.Cell>{item.entry_created_at}</Table.Cell>
+              <Table.Cell>{formatDateTime(item.entry_created_at)}</Table.Cell>
               <Table.Cell>
                 <Button
                   onClick={() =>

admin/src/components/LoanTable.tsx

@@ -78,10 +78,6 @@ const LoanTable: React.FC = () => {
 
   return (
     <>
-      <Heading marginBottom={4} size="md">
-        Ausleihen
-      </Heading>
-
       {/* Action toolbar */}
       <HStack
         mb={4}
@@ -107,6 +103,10 @@ const LoanTable: React.FC = () => {
       </HStack>
       {/* End action toolbar */}
 
+      <Heading marginBottom={4} size="md">
+        Ausleihen
+      </Heading>
+
       {isError && (
         <MyAlert
           status={errorStatus}

admin/src/components/UserTable.tsx

@@ -18,6 +18,7 @@ import { handleDelete, handleEdit } from "@/utils/userActions";
 import MyAlert from "./myChakra/MyAlert";
 import AddForm from "./AddForm";
 import { formatDateTime } from "@/utils/userFuncs";
+import ChangePWform from "./ChangePWform";
 
 type User = {
   id: number;
@@ -36,6 +37,8 @@ const UserTable: React.FC = () => {
   const [errorDsc, setErrorDsc] = useState("");
   const [reload, setReload] = useState(false);
   const [addForm, setAddForm] = useState(false);
+  const [changePWform, setChangePWform] = useState(false);
+  const [changeUsr, setChangeUsr] = useState("");
 
   const setError = (
     status: "error" | "success",
@@ -57,6 +60,11 @@ const UserTable: React.FC = () => {
     );
   };
 
+  const handlePasswordChange = (username: string) => {
+    setChangeUsr(username);
+    setChangePWform(true);
+  };
+
   useEffect(() => {
     const fetchUsers = async () => {
       setIsLoading(true);
@@ -139,6 +147,16 @@ const UserTable: React.FC = () => {
       <Heading marginBottom={4} size="md">
         Benutzer
       </Heading>
+      {changePWform && (
+        <ChangePWform
+          onClose={() => {
+            setChangePWform(false);
+            setReload(!reload);
+          }}
+          alert={setError}
+          username={changeUsr}
+        />
+      )}
       {isError && (
         <MyAlert
           status={errorStatus}
@@ -172,7 +190,7 @@ const UserTable: React.FC = () => {
                 <strong>Benutzername</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
-                <strong>Passwort</strong>
+                <strong>Passwort ändern</strong>
               </Table.ColumnHeader>
               <Table.ColumnHeader>
                 <strong>Rolle</strong>
@@ -198,12 +216,9 @@ const UserTable: React.FC = () => {
                   />
                 </Table.Cell>
                 <Table.Cell>
-                  <Input
+                  <Button onClick={() => handlePasswordChange(user.username)}>
-                    onChange={(e) =>
+                    Passwort ändern
-                      handleInputChange(user.id, "password", e.target.value)
+                  </Button>
-                    }
-                    value={user.password}
-                  />
                 </Table.Cell>
                 <Table.Cell>
                   <Input
@@ -222,7 +237,6 @@ const UserTable: React.FC = () => {
                         user.id,
                         user.username,
                         user.role,
-                        user.password
                       ).then((response) => {
                         if (response.success) {
                           setError(

admin/src/utils/userActions.ts

@@ -24,19 +24,18 @@ export const handleDelete = async (userId: number) => {
 export const handleEdit = async (
   userId: number,
   username: string,
-  role: string,
+  role: string
-  password: string
 ) => {
   try {
     const response = await fetch(
       `https://backend.insta.the1s.de/api/editUser/${userId}`,
       {
-        method: "PUT",
+        method: "POST",
         headers: {
           "Content-Type": "application/json",
           Authorization: `Bearer ${Cookies.get("token")}`,
         },
-        body: JSON.stringify({ username, role, password }),
+        body: JSON.stringify({ username, role }),
       }
     );
     if (!response.ok) {
@@ -73,6 +72,26 @@ export const createUser = async (
   }
 };
 
+export const changePW = async (newPassword: string, username: string) => {
+  try {
+    const response = await fetch(`http://localhost:8002/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");
+    }
+    return { success: true };
+  } catch (error) {
+    console.error("Error changing password:", error);
+    return { success: false };
+  }
+};
+
 export const deleteLoan = async (loanId: number) => {
   try {
     const response = await fetch(

admin/src/utils/userFuncs.ts

@@ -1,14 +1,7 @@
 export const formatDateTime = (value: string | null | undefined) => {
   if (!value) return "N/A";
-  const inpDate = new Date(value);
+  const m = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
-  if (isNaN(inpDate.getTime())) return "N/A";
+  if (!m) return "N/A";
-  return (
+  const [, y, M, d, h, min] = m;
-    inpDate.toLocaleString(undefined, {
+  return `${d}.${M}.${y} ${h}:${min} Uhr`;
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit",
-    }) + " Uhr"
-  );
 };

backend/routes/api.js

@@ -18,6 +18,8 @@ import {
   getAllItems,
   deleteItemID,
   createItem,
+  changeUserPassword,
+  changeUserPasswordFRONTEND,
 } from "../services/database.js";
 import { authenticate, generateToken } from "../services/tokenService.js";
 const router = express.Router();
@@ -175,6 +177,21 @@ router.post("/createLoan", authenticate, async (req, res) => {
   }
 });
 
+router.post("/changePassword", authenticate, async (req, res) => {
+  const { oldPassword, newPassword } = req.body || {};
+  const username = req.user.username;
+  const result = await changeUserPasswordFRONTEND(
+    username,
+    oldPassword,
+    newPassword
+  );
+  if (result.success) {
+    res.status(200).json({ message: "Password changed successfully" });
+  } else {
+    res.status(500).json({ message: "Failed to change password" });
+  }
+});
+
 // Admin panel functions
 
 router.post("/loginAdmin", async (req, res) => {
@@ -223,10 +240,10 @@ router.get("/verifyToken", authenticate, async (req, res) => {
   res.status(200).json({ message: "Token is valid" });
 });
 
-router.put("/editUser/:id", authenticate, async (req, res) => {
+router.post("/editUser/:id", authenticate, async (req, res) => {
   const userId = req.params.id;
-  const { username, role, password } = req.body || {};
+  const { username, role } = req.body || {};
-  const result = await handleEdit(userId, username, role, password);
+  const result = await handleEdit(userId, username, role);
   if (result.success) {
     return res.status(200).json({ message: "User edited successfully" });
   }
@@ -276,4 +293,17 @@ router.post("/createItem", authenticate, async (req, res) => {
   return res.status(500).json({ message: "Failed to create item" });
 });
 
+router.post("/changePWadmin", authenticate, async (req, res) => {
+  const newPassword = req.body.newPassword;
+  if (!newPassword) {
+    return res.status(400).json({ message: "New password is required" });
+  }
+
+  const result = await changeUserPassword(req.body.username, newPassword);
+  if (result.success) {
+    return res.status(200).json({ message: "Password changed successfully" });
+  }
+  return res.status(500).json({ message: "Failed to change password" });
+});
+
 export default router;

backend/services/database.js

@@ -88,11 +88,8 @@ export const getItemsFromDatabase = async (role) => {
 };
 
 export const getLoansFromDatabase = async () => {
-  const [result] = await pool.query("SELECT * FROM loans;");
+  const [rows] = await pool.query("SELECT * FROM loans;");
-  if (result.length > 0) {
+  return { success: true, data: rows.length > 0 ? rows : null };
-    return { success: true, data: result };
-  }
-  return { success: false };
 };
 
 export const getUserLoansFromDatabase = async (username) => {
@@ -298,24 +295,44 @@ export const createLoanInDatabase = async (
 // These functions are only temporary, and will be deleted when the full bin is set up.
 
 export const onTake = async (loanId) => {
+  const [items] = await pool.query(
+    "SELECT loaned_items_id FROM loans WHERE id = ?",
+    [loanId]
+  );
+
+  const [setItemStates] = await pool.query(
+    "UPDATE items SET inSafe = 0 WHERE id IN (?)",
+    [items.map((item) => item.loaned_items_id)]
+  );
+
   const [result] = await pool.query(
     "UPDATE loans SET take_date = NOW() WHERE id = ?",
     [loanId]
   );
 
-  if (result.affectedRows > 0) {
+  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
     return { success: true };
   }
   return { success: false };
 };
 
 export const onReturn = async (loanId) => {
+  const [items] = await pool.query(
+    "SELECT loaned_items_id FROM loans WHERE id = ?",
+    [loanId]
+  );
+
+  const [setItemStates] = await pool.query(
+    "UPDATE items SET inSafe = 1 WHERE id IN (?)",
+    [items.map((item) => item.loaned_items_id)]
+  );
+
   const [result] = await pool.query(
     "UPDATE loans SET returned_date = NOW() WHERE id = ?",
     [loanId]
   );
 
-  if (result.affectedRows > 0) {
+  if (result.affectedRows > 0 && setItemStates.affectedRows > 0) {
     return { success: true };
   }
   return { success: false };
@@ -331,7 +348,9 @@ export const loginAdmin = async (username, password) => {
 };
 
 export const getAllUsers = async () => {
-  const [result] = await pool.query("SELECT * FROM users");
+  const [result] = await pool.query(
+    "SELECT id, username, role, entry_created_at FROM users"
+  );
   if (result.length > 0) return { success: true, data: result };
   return { success: false };
 };
@@ -342,10 +361,10 @@ export const deleteUserID = async (userId) => {
   return { success: false };
 };
 
-export const handleEdit = async (userId, username, role, password) => {
+export const handleEdit = async (userId, username, role) => {
   const [result] = await pool.query(
-    "UPDATE users SET username = ?, role = ?, password = ? WHERE id = ?",
+    "UPDATE users SET username = ?, role = ? WHERE id = ?",
-    [username, role, password, userId]
+    [username, role, userId]
   );
   if (result.affectedRows > 0) return { success: true };
   return { success: false };
@@ -386,3 +405,25 @@ export const createItem = async (item_name, can_borrow_role) => {
   if (result.affectedRows > 0) return { success: true };
   return { success: false };
 };
+
+export const changeUserPassword = async (username, newPassword) => {
+  const [result] = await pool.query(
+    "UPDATE users SET password = ? WHERE username = ?",
+    [newPassword, username]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};
+
+export const changeUserPasswordFRONTEND = async (
+  username,
+  oldPassword,
+  newPassword
+) => {
+  const [result] = await pool.query(
+    "UPDATE users SET password = ? WHERE username = ? AND password = ?",
+    [newPassword, username, oldPassword]
+  );
+  if (result.affectedRows > 0) return { success: true };
+  return { success: false };
+};

frontend/src/components/Form4.tsx

@@ -21,9 +21,10 @@ type Loan = {
 
 const formatDate = (iso: string | null) => {
   if (!iso) return "-";
-  const d = new Date(iso);
+  const m = iso.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})/);
-  if (Number.isNaN(d.getTime())) return iso;
+  if (!m) return iso;
-  return d.toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" });
+  const [, y, M, d, h, min] = m;
+  return `${d}.${M}.${y} ${h}:${min}`;
 };
 
 async function fetchUserLoans(): Promise<Loan[]> {

frontend/src/components/Header.tsx

@@ -1,13 +1,33 @@
 import React from "react";
+import { changePW } from "../utils/userHandler";
+import { myToast } from "../utils/toastify";
 
 type HeaderProps = {
   onLogout: () => void;
 };
 
 const Header: React.FC<HeaderProps> = ({ onLogout }) => {
+  const passwordForm = () => {
+    const oldPW = window.prompt("Altes Passwort");
+    const newPW = window.prompt("Neues Passwort");
+    const repeatNewPW = window.prompt("Neues Passwort wiederholen");
+    if (oldPW && newPW && repeatNewPW) {
+      if (newPW === repeatNewPW) {
+        changePW(oldPW, newPW);
+      } else {
+        myToast("Die neuen Passwörter stimmen nicht überein.", "error");
+      }
+    } else {
+      myToast("Bitte alle Felder ausfüllen.", "error");
+    }
+  };
+
+  const btn =
+    "inline-flex items-center h-9 px-3 rounded-md text-sm font-medium border border-slate-300 bg-white text-slate-700 hover:bg-slate-100 active:bg-slate-200 transition focus:outline-none focus:ring-2 focus:ring-slate-400/50";
+
   return (
     <header className="mb-4 sm:mb-6">
-      <div className="flex items-start justify-between gap-3">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="min-w-0">
           <h1 className="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">
             Gegenstand ausleihen
@@ -16,23 +36,38 @@ const Header: React.FC<HeaderProps> = ({ onLogout }) => {
             Schnell und unkompliziert Equipment reservieren
           </p>
         </div>
-        <button
+
-          type="button"
+        <nav
-          onClick={onLogout}
+          aria-label="Aktionen"
-          className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition"
+          className="flex flex-wrap items-center gap-2"
         >
-          Logout
+          <a
-        </button>
+            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/src/branch/dev/Docs/HELP.md"
-        <a href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/src/branch/dev/Docs/HELP.md">
+            target="_blank"
-          <button className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition">
+            rel="noreferrer"
+            className={btn}
+          >
             Hilfe
-          </button>
+          </a>
-        </a>
+          <a
-        <a href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system">
+            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system"
-          <button className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition">
+            target="_blank"
+            rel="noreferrer"
+            className={btn}
+          >
             Source Code
+          </a>
+          <button type="button" onClick={passwordForm} className={btn}>
+            Passwort ändern
           </button>
-        </a>
+          <button
+            type="button"
+            onClick={onLogout}
+            className={`${btn} border-rose-300 hover:bg-rose-50`}
+          >
+            Logout
+          </button>
+        </nav>
       </div>
     </header>
   );

frontend/src/utils/userHandler.ts

@@ -137,3 +137,22 @@ export const onTake = async (loanID: number) => {
   myToast("Ausleihe erfolgreich ausgeliehen!", "success");
   return true;
 };
+
+export const changePW = async (oldPassword: string, newPassword: string) => {
+  const response = await fetch("http://localhost:8002/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");
+    return false;
+  }
+
+  myToast("Passwort erfolgreich geändert!", "success");
+  return true;
+};