ADD: added initial page with login

frontend/src/pages/AuthContext.tsx

@@ -0,0 +1,50 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+interface AuthContextType {
+  token: string | null;
+  userId: string | null;
+  login: (token: string, userId: string) => void;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [token, setToken] = useState<string | null>(null);
+  const [userId, setUserId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const storedToken = localStorage.getItem('token');
+    const storedUserId = localStorage.getItem('userId');
+    if (storedToken && storedUserId) {
+      setToken(storedToken);
+      setUserId(storedUserId);
+    }
+  }, []);
+
+  const login = (token: string, userId: string) => {
+    setToken(token);
+    setUserId(userId);
+    localStorage.setItem('token', token);
+    localStorage.setItem('userId', userId);
+  };
+
+  const logout = () => {
+    setToken(null);
+    setUserId(null);
+    localStorage.removeItem('token');
+    localStorage.removeItem('userId');
+  };
+
+  return (
+    <AuthContext.Provider value={{ token, userId, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) throw new Error('useAuth must be used within AuthProvider');
+  return context;
+}

frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { fetchTournaments } from './api';
+import { Link } from 'react-router-dom';
+
+interface Tournament {
+  id: string;
+  name: string;
+  location: string;
+  teams: { id: string; name: string }[];
+  maxParticipants: number;
+}
+
+export default function Dashboard() {
+  const [tournaments, setTournaments] = useState<Tournament[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchTournaments()
+      .then(setTournaments)
+      .catch(() => setError('Fehler beim Laden der Turniere'));
+  }, []);
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto">
+      <h1 className="text-3xl font-bold mb-6">Turniere</h1>
+      {error && <p className="text-red-600">{error}</p>}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {tournaments.map(t => (
+          <div key={t.id} className="border rounded p-4 shadow hover:shadow-lg transition cursor-pointer">
+            <Link to={`/tournaments/${t.id}`}>
+              <h2 className="text-xl font-semibold">{t.name}</h2>
+              <p>{t.teams.length} / {t.maxParticipants} Teilnehmer</p>
+              <p>Ort: {t.location}</p>
+            </Link>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { useAuth } from './AuthContext';
+import { login as apiLogin } from './api';
+
+export default function LoginPage() {
+  const { login } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    try {
+      const data = await apiLogin(email, password);
+      console.log(data);
+      // Token aus JWT extrahieren (hier: UserID im Token Payload)
+      // Für Demo: Einfach Dummy UserID setzen, oder später JWT decode implementieren
+      login(data.token, 'user-id-from-token');
+    } catch {
+      setError('Login fehlgeschlagen');
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="max-w-md mx-auto p-6">
+      <h2 className="text-2xl mb-4">Login</h2>
+      {error && <p className="text-red-600 mb-4">{error}</p>}
+      <input type="email" placeholder="E-Mail" required value={email} onChange={e => setEmail(e.target.value)} className="border p-2 w-full mb-4" />
+      <input type="password" placeholder="Passwort" required value={password} onChange={e => setPassword(e.target.value)} className="border p-2 w-full mb-4" />
+      <button type="submit" className="bg-blue-600 text-white p-2 rounded w-full">Einloggen</button>
+    </form>
+  );
+}

frontend/src/pages/Navigation.tsx

@@ -0,0 +1,24 @@
+import { Link } from 'react-router-dom';
+import { useAuth } from './AuthContext';
+
+export default function Navigation() {
+  const { token, logout } = useAuth();
+
+  return (
+    <nav className="bg-blue-600 text-white p-4 flex justify-between">
+      <div className="space-x-4">
+        <Link to="/">Dashboard</Link>
+        {token && <Link to="/players">Spieler</Link>}
+      </div>
+      <div>
+        {token ? (
+          <button onClick={logout} className="bg-red-500 px-3 py-1 rounded">
+            Logout
+          </button>
+        ) : (
+          <Link to="/login" className="px-3 py-1 border rounded">Login</Link>
+        )}
+      </div>
+    </nav>
+  );
+}

frontend/src/pages/Players.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+
+interface Player {
+  id: number;
+  name: string;
+  position: 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 handleAddOrUpdate = () => {
+    if (!name || !position) return;
+
+    if (editingId !== null) {
+      setPlayers(players.map(p =>
+        p.id === editingId ? { ...p, name, position } : p
+      ));
+      setEditingId(null);
+    } else {
+      const newPlayer: Player = {
+        id: Date.now(),
+        name,
+        position,
+      };
+      setPlayers([...players, newPlayer]);
+    }
+
+    setName("");
+    setPosition("");
+  };
+
+  const handleEdit = (player: Player) => {
+    setName(player.name);
+    setPosition(player.position);
+    setEditingId(player.id);
+  };
+
+  const handleDelete = (id: number) => {
+    setPlayers(players.filter(p => p.id !== id));
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto p-6 bg-white rounded-xl shadow-md mt-6">
+      <h1 className="text-2xl font-bold mb-4">🏐 Spielerverwaltung</h1>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
+        <input
+          type="text"
+          placeholder="Spielername"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="border p-2 rounded"
+        />
+        <input
+          type="text"
+          placeholder="Position (z. B. Zuspieler)"
+          value={position}
+          onChange={(e) => setPosition(e.target.value)}
+          className="border p-2 rounded"
+        />
+      </div>
+
+      <button
+        onClick={handleAddOrUpdate}
+        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+      >
+        {editingId !== null ? "Speichern" : "Hinzufügen"}
+      </button>
+
+      <table className="w-full mt-6 table-auto border-collapse">
+        <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">Aktionen</th>
+          </tr>
+        </thead>
+        <tbody>
+          {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 space-x-2">
+                <button
+                  onClick={() => handleEdit(player)}
+                  className="bg-yellow-400 text-white px-2 py-1 rounded"
+                >
+                  Bearbeiten
+                </button>
+                <button
+                  onClick={() => handleDelete(player.id)}
+                  className="bg-red-500 text-white px-2 py-1 rounded"
+                >
+                  Löschen
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

frontend/src/pages/ProtectedRoute.tsx

@@ -0,0 +1,8 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from './AuthContext';
+import { JSX } from 'react';
+
+export default function ProtectedRoute({ children }: { children: JSX.Element }) {
+  const { token } = useAuth();
+  return token ? children : <Navigate to="/login" replace />;
+}

frontend/src/pages/TournamentDetails.tsx

@@ -0,0 +1,151 @@
+import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { fetchTournament, updateTournament, registerTeam } from './api';
+import { useAuth } from './AuthContext';
+
+interface Team {
+  id: string;
+  name: string;
+}
+
+interface Tournament {
+  id: string;
+  name: string;
+  location: string;
+  maxParticipants: number;
+  organizerId: string;
+  teams: Team[];
+}
+
+export default function TournamentDetails() {
+  const { id } = useParams<{ id: string }>();
+  const { token, userId } = useAuth();
+  const [tournament, setTournament] = useState<Tournament | null>(null);
+  const [editMode, setEditMode] = useState(false);
+  const [formData, setFormData] = useState({ name: '', location: '', maxParticipants: 0 });
+  const [teamName, setTeamName] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+
+  useEffect(() => {
+    if (!id) return;
+    fetchTournament(id, token ?? undefined)
+      .then((data) => {
+        setTournament(data);
+        setFormData({
+          name: data.name,
+          location: data.location,
+          maxParticipants: data.maxParticipants,
+        });
+      })
+      .catch(() => setError('Fehler beim Laden'));
+  }, [id, token]);
+
+  if (!tournament) return <p className="p-6">Lade Turnier…</p>;
+
+  const isOwner = userId === tournament.organizerId;
+
+  async function saveChanges() {
+    if (!token || !tournament) return;
+    try {
+      await updateTournament(tournament.id, formData, token);
+      setTournament({ ...tournament, ...formData });
+      setEditMode(false);
+      setError(null);
+    } catch {
+      setError('Speichern fehlgeschlagen');
+    }
+  }
+
+  async function handleRegisterTeam() {
+    if (!token) {
+      setError('Bitte einloggen, um Teams anzumelden');
+      return;
+    }
+    if (!teamName.trim()) return;
+    if (!tournament) return;
+
+    try {
+      await registerTeam(tournament.id, { name: teamName }, token);
+      setTournament({
+        ...tournament,
+        teams: [...tournament.teams, { id: Math.random().toString(), name: teamName }],
+      });
+      setTeamName('');
+      setError(null);
+    } catch {
+      setError('Anmeldung fehlgeschlagen');
+    }
+  }
+
+  return (
+    <div className="p-6 max-w-3xl mx-auto">
+      <h2 className="text-2xl font-bold mb-4">Turnierdetails</h2>
+
+      {error && <p className="text-red-600 mb-4">{error}</p>}
+
+      {editMode ? (
+        <>
+          <input
+            className="border p-2 w-full mb-3 rounded"
+            value={formData.name}
+            onChange={e => setFormData({ ...formData, name: e.target.value })}
+            placeholder="Name"
+          />
+          <input
+            className="border p-2 w-full mb-3 rounded"
+            value={formData.location}
+            onChange={e => setFormData({ ...formData, location: e.target.value })}
+            placeholder="Ort"
+          />
+          <input
+            type="number"
+            className="border p-2 w-full mb-3 rounded"
+            value={formData.maxParticipants}
+            onChange={e => setFormData({ ...formData, maxParticipants: parseInt(e.target.value) || 0 })}
+            placeholder="Max. Teilnehmer"
+          />
+          <button onClick={saveChanges} className="bg-blue-600 text-white px-4 py-2 rounded mr-2">
+            Speichern
+          </button>
+          <button onClick={() => setEditMode(false)} className="bg-gray-400 text-white px-4 py-2 rounded">
+            Abbrechen
+          </button>
+        </>
+      ) : (
+        <>
+          <p><strong>Name:</strong> {tournament.name}</p>
+          <p><strong>Ort:</strong> {tournament.location}</p>
+          <p><strong>Teilnehmer:</strong> {tournament.teams.length} / {tournament.maxParticipants}</p>
+
+          {isOwner && (
+            <button onClick={() => setEditMode(true)} className="mt-4 bg-yellow-500 text-white px-4 py-2 rounded">
+              Turnier bearbeiten
+            </button>
+          )}
+
+          <h3 className="mt-8 text-xl font-semibold">Angemeldete Teams</h3>
+          <ul className="list-disc pl-6 mt-2">
+            {tournament.teams.map(team => (
+              <li key={team.id}>{team.name}</li>
+            ))}
+          </ul>
+
+          {token && tournament.teams.length < tournament.maxParticipants && (
+            <div className="mt-6">
+              <input
+                className="border p-2 rounded mr-2"
+                placeholder="Teamname"
+                value={teamName}
+                onChange={e => setTeamName(e.target.value)}
+              />
+              <button onClick={handleRegisterTeam} className="bg-green-600 text-white px-3 py-1 rounded">
+                Team anmelden
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/pages/Tournaments.tsx

@@ -0,0 +1,20 @@
+import { useLocation } from 'react-router-dom';
+
+function useQuery() {
+  return new URLSearchParams(useLocation().search);
+}
+
+export default function Tournaments() {
+  const query = useQuery();
+  const type = query.get("type");
+  const location = query.get("location");
+
+  return (
+    <div className="p-6">
+      <h2 className="text-2xl font-bold mb-4">Turniere</h2>
+      {type && <p>Gefiltert nach: <strong>{type}</strong></p>}
+      {location && <p>Standort: <strong>{location}</strong></p>}
+      {/* TODO: Backend-Daten hier anzeigen */}
+    </div>
+  );
+}

frontend/src/pages/api.tsx

@@ -0,0 +1,45 @@
+const API_URL = 'http://localhost:8080/api';
+
+export async function login(email: string, password: string) {
+  const res = await fetch(`${API_URL}/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password }),
+  });
+  if (!res.ok) throw new Error('Login fehlgeschlagen');
+  return res.json(); // { token: string }
+}
+
+export async function fetchTournaments() {
+  const res = await fetch(`${API_URL}/tournaments`);
+  if (!res.ok) throw new Error('Fehler beim Laden der Turniere');
+  return res.json();
+}
+
+export async function fetchTournament(id: string, token?: string) {
+  const res = await fetch(`${API_URL}/tournaments/${id}`, {
+    headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+  });
+  if (!res.ok) throw new Error('Fehler beim Laden des Turniers');
+  return res.json();
+}
+
+export async function updateTournament(id: string, data: any, token: string) {
+  const res = await fetch(`${API_URL}/tournaments/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) throw new Error('Update fehlgeschlagen');
+  return res.json();
+}
+
+export async function registerTeam(id: string, team: { name: string }, token: string) {
+  const res = await fetch(`${API_URL}/tournaments/${id}/register`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+    body: JSON.stringify(team),
+  });
+  if (!res.ok) throw new Error('Team-Anmeldung fehlgeschlagen');
+  return res.json();
+}