add password change functionality with frontend integration

backend/routes/api.js

@@ -19,6 +19,7 @@ import {
   deleteItemID,
   createItem,
   changeUserPassword,
+  changeUserPasswordFRONTEND,
 } from "../services/database.js";
 import { authenticate, generateToken } from "../services/tokenService.js";
 const router = express.Router();
@@ -176,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) => {

backend/services/database.js

@@ -413,3 +413,16 @@ export const changeUserPassword = async (username, newPassword) => {
   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/Header.tsx

@@ -1,10 +1,27 @@
 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");
+    }
+  };
+
   return (
     <header className="mb-4 sm:mb-6">
       <div className="flex items-start justify-between gap-3">
@@ -33,6 +50,13 @@ const Header: React.FC<HeaderProps> = ({ onLogout }) => {
             Source Code
           </button>
         </a>
+        <button
+          type="button"
+          onClick={passwordForm}
+          className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition"
+        >
+          Passwort ändern
+        </button>
       </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;
+};