added function to change user password with the admin panel

admin/src/components/ChangePWform.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
+import { changePW } from "@/utils/userActions";
+
+type ChangePWformProps = {
+  onClose: () => void;
+  alert: (
+    status: "success" | "error",
+    message: string,
+    description: string
+  ) => void;
+  username: string;
+};
+
+const ChangePWform: React.FC<ChangePWformProps> = ({
+  onClose,
+  alert,
+  username,
+}) => {
+  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) 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>
+        </Card.Footer>
+      </Card.Root>
+    </div>
+  );
+};
+
+export default ChangePWform;

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
-                    onChange={(e) =>
-                      handleInputChange(user.id, "password", e.target.value)
-                    }
-                    value={user.password}
-                  />
+                  <Button onClick={() => handlePasswordChange(user.username)}>
+                    Passwort ändern
+                  </Button>
                 </Table.Cell>
                 <Table.Cell>
                   <Input