ADD: added database connection for players data handling and started login funtion with database

frontend/src/pages/Players.tsx

@@ -1,46 +1,81 @@
-import React, { useState } from 'react';
+import React, {  useEffect, useState  } from 'react';
+import { fetchPlayers,createPlayer,deletePlayer,updatePlayer } from './api';
+
 
 interface Player {
-  id: number;
+  id: string;
   name: string;
-  position: string;
+  email: string;
 }
 
 export default function PlayerManagement() {
   const [players, setPlayers] = useState<Player[]>([]);
   const [name, setName] = useState("");
-  const [position, setPosition] = useState("");
-  const [editingId, setEditingId] = useState<number | null>(null);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const token = localStorage.getItem('token');
+  
+  useEffect(() => {
+      if (token) loadPlayers(token);
+    }, [token]);
+
+
+    const loadPlayers = async (token: string) => {
+    try {
+      const data = await fetchPlayers(token);
+      console.log("Geladene Spieler:", data);
+      setPlayers(data);
+    } catch (error) {
+      console.error("Fehler beim Laden der Spieler:", error);
+    }
+  };
+  
 
   const handleAddOrUpdate = () => {
-    if (!name || !position) return;
+    if (!name || !email) return;
 
     if (editingId !== null) {
       setPlayers(players.map(p =>
-        p.id === editingId ? { ...p, name, position } : p
+        p.id === editingId ? { ...p, name, email } : p
       ));
+      if (token) {
+        updatePlayer(editingId, { name, email }, token);
+      }
       setEditingId(null);
     } else {
       const newPlayer: Player = {
-        id: Date.now(),
+        id: "",
         name,
-        position,
+        email,
       };
-      setPlayers([...players, newPlayer]);
+
+      if (token) {
+        createPlayer(newPlayer, token);
+        setPlayers([...players, newPlayer]);
+      }
     }
 
     setName("");
-    setPosition("");
+    setEmail("");
   };
 
   const handleEdit = (player: Player) => {
     setName(player.name);
-    setPosition(player.position);
+    setEmail(player.email);
     setEditingId(player.id);
   };
 
-  const handleDelete = (id: number) => {
+  const handleDelete = (id: string) => {
     setPlayers(players.filter(p => p.id !== id));
+    if (token) {
+      deletePlayer(id, token);
+    }
+    if (editingId === id) {
+      setEditingId(null);
+      setName("");
+      setEmail("");
+    }
   };
 
   return (
@@ -57,9 +92,16 @@ export default function PlayerManagement() {
         />
         <input
           type="text"
-          placeholder="Position (z. B. Zuspieler)"
-          value={position}
-          onChange={(e) => setPosition(e.target.value)}
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="border p-2 rounded"
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
           className="border p-2 rounded"
         />
       </div>
@@ -75,7 +117,7 @@ export default function PlayerManagement() {
         <thead>
           <tr className="bg-gray-100 text-left">
             <th className="border px-4 py-2">Name</th>
-            <th className="border px-4 py-2">Position</th>
+            <th className="border px-4 py-2">Email</th>
             <th className="border px-4 py-2">Aktionen</th>
           </tr>
         </thead>
@@ -83,7 +125,7 @@ export default function PlayerManagement() {
           {players.map(player => (
             <tr key={player.id}>
               <td className="border px-4 py-2">{player.name}</td>
-              <td className="border px-4 py-2">{player.position}</td>
+              <td className="border px-4 py-2">{player.email}</td>
               <td className="border px-4 py-2 space-x-2">
                 <button
                   onClick={() => handleEdit(player)}