ToDo Liste eingebaut

src/admin/UserCreatePage.tsx

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "@/context/AuthContext";
+import { useToast } from "@/components/ui/use-toast";
 
 const apiBase = import.meta.env.VITE_API_URL;
 
@@ -14,8 +15,11 @@ const UserCreatePage = () => {
   const [email, setEmail] = useState("");
   const { token } = useAuth();
 
-const {isAuthenticated, isAdmin} = useAuth();
+  const {isAuthenticated, isAdmin} = useAuth();
-const navigate = useNavigate();
+  const navigate = useNavigate();
+
+  const {toast} = useToast();
+  const [isLoading, setIsLoading] = useState(false);
 
 useEffect(() => {
     if(!isAuthenticated || !isAdmin) {
@@ -25,28 +29,42 @@ useEffect(() => {
 
 
 
-  const handleSubmit = async (e: React.FormEvent) => {
+const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+  e.preventDefault();
-    try {
+  setIsLoading(true);
-      const res = await fetch(`${apiBase}/api/users`, {
+  try {
-        method: "POST",
+    const res = await fetch(`${apiBase}/api/users`, {
-        headers: {
+      method: "POST",
-          "Content-Type": "application/json",
+      headers: {
-          Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
-        },
+        Authorization: `Bearer ${token}`,
-        body: JSON.stringify({ username, password, role, email }),
+      },
-      });
+      body: JSON.stringify({ username, password, role, email }),
+    });
 
-      if (!res.ok) {
+    if (!res.ok) {
-        throw new Error("Fehler beim Anlegen des Benutzers");
+      throw new Error("Fehler beim Anlegen des Benutzers");
-      }
-
-      navigate("/admin/users");
-    } catch (err) {
-      console.error(err);
-      alert("Benutzer konnte nicht angelegt werden");
     }
-  };
+
+    toast({
+      title: "Benutzer erstellt",
+      description: `Der Benutzer "${username}" wurde erfolgreich angelegt.`,
+      variant: "default",
+    });
+
+    navigate("/admin/users");
+  } catch (err) {
+    console.error(err);
+    toast({
+      title: "Fehler",
+      description: "Benutzer konnte nicht angelegt werden.",
+      variant: "destructive",
+    });
+  } finally {
+    setIsLoading(false);
+  }
+};
+
 
   return (
     <div className="max-w-3xl mx-auto py-12 px-4">
@@ -84,8 +102,12 @@ useEffect(() => {
               <option value="user">User</option>
               <option value="admin">Admin</option>
             </select>
-            <Button type="submit" className="w-full bg-frog-500 hover:bg-frog-600 text-white">
+            <Button
-              Benutzer anlegen
+              type="submit"
+              className="w-full bg-frog-500 hover:bg-frog-600 text-white"
+              disabled={isLoading}
+            >
+              {isLoading ? "Speichern..." : "Benutzer anlegen"}
             </Button>
           </form>
         </CardContent>

tg-volleyball-frontend-todo.md

@@ -0,0 +1,83 @@
+
+# 🏐 TG Volleyball Frontend – ToDo Liste
+
+## 🧱 Grundstruktur & Technik
+- [x] Projekt mit Vite + React + TypeScript + Tailwind erstellt
+- [x] shadcn-ui integriert
+- [x] Routing mit React Router v7 eingerichtet
+- [x] `.env`-System für API-URL
+
+## 🎨 Landing Page
+- [ ] Teambereich mit Bildern & Beschreibung
+- [ ] News-Bereich mit Vorschau aktueller News
+- [ ] Events/Trainingszeiten-Bereich
+- [ ] Login-Link zum internen Bereich
+- [ ] Footer mit Impressum / Datenschutz / Kontakt
+- [ ] Komponenten mit DB verknüpfen für dynamische Anzeige
+
+## 📢 NewsManager (Admin)
+- [x] News anzeigen (Grid)
+- [x] News erstellen
+- [x] News bearbeiten
+- [x] News löschen
+- [x] Modal zur Löschbestätigung
+- [x] Form mit Bild, Titel, Beschreibung, Team
+- [x] Toast für Erfolg & Fehler
+- [x] Ladeindikator beim Speichern
+- [ ] Bildvorschau für `image_url`
+
+## 👤 Userverwaltung (Admin)
+- [x] User anlegen mit Rolle und Email
+- [ ] Userliste anzeigen
+- [ ] User bearbeiten
+- [ ] User löschen
+- [x] Zugriffsbeschränkung: Nur Admins
+- [ ] Passwort zurücksetzen per UI
+- [ ] Toasts für alle Aktionen
+
+## 🔐 Authentifizierung
+- [x] Login mit Username & Passwort
+- [ ] AuthContext mit Token-Handling
+- [ ] Automatischer Logout nach Token-Ablauf
+- [ ] Persistenter Login (LocalStorage)
+- [ ] Fehlerbehandlung beim Login (Toast)
+- [ ] Bugfix: Login funktioniert erst nach `/admin`-Redirect
+
+## 🧩 Medien & Nextcloud (Zukunft 💡)
+- [ ] Nextcloud-Medienintegration vorbereiten
+- [ ] Streaming/Browsing über öffentlichen Link oder WebDAV
+- [ ] Media-Browser-Komponente
+- [ ] Galerie über Datenbank abbilden
+
+## 📬 Kommunikation & Tools
+- [ ] Newsletter-Anbindung
+- [ ] Mailfunktion an Trainer bei Team-Anmeldung
+- [ ] SMS/Weiterleitung an Handynummer
+- [ ] Integration Spond je Team (API)
+
+## 📦 Teams & Spieler
+- [ ] Admin kann Teams bearbeiten
+- [ ] Spieler mit Bild anlegen (DB)
+- [ ] Live-Ticker-Anbindung an NVV Sams (API Keys notwendig)
+
+## ⚙️ UX & Styling
+- [x] Buttons & Forms mit shadcn-ui stylen
+- [x] Frog-Farben & Branding integriert 🐸
+- [ ] Dark Mode optional?
+- [ ] Animierte Ladezustände (Spinner)
+- [ ] Navbar Dropdowns funktionieren nicht korrekt (Bug)
+- [ ] Navbar-Menüpunkte umbrechen bei wenig Platz → Schrift kleiner machen
+
+## 📱 Mobile & Responsive
+- [ ] Mobile Ansicht planen & umsetzen (Zukunft)
+
+## 🧪 Testing & Dev Stuff
+- [ ] API-Mock-Option für Offline-Entwicklung
+- [ ] Unit Tests mit `vitest` (optional)
+- [ ] Komponentenstruktur refactoren (wenn groß)
+- [ ] `useApi()`-Hook für zentrale API-Calls
+
+
+## Infra
+- [ ] Deployment über GiTea einrichten
+- [ ] Webserver installieren