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 navigate = useNavigate();
+  const {isAuthenticated, isAdmin} = useAuth();
+  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) => {
-    e.preventDefault();
-    try {
-      const res = await fetch(`${apiBase}/api/users`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({ username, password, role, email }),
-      });
+const handleSubmit = async (e: React.FormEvent) => {
+  e.preventDefault();
+  setIsLoading(true);
+  try {
+    const res = await fetch(`${apiBase}/api/users`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({ username, password, role, email }),
+    });
 
-      if (!res.ok) {
-        throw new Error("Fehler beim Anlegen des Benutzers");
-      }
-
-      navigate("/admin/users");
-    } catch (err) {
-      console.error(err);
-      alert("Benutzer konnte nicht angelegt werden");
+    if (!res.ok) {
+      throw new Error("Fehler beim Anlegen des Benutzers");
     }
-  };
+
+    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">
-              Benutzer anlegen
+            <Button
+              type="submit"
+              className="w-full bg-frog-500 hover:bg-frog-600 text-white"
+              disabled={isLoading}
+            >
+              {isLoading ? "Speichern..." : "Benutzer anlegen"}
             </Button>
           </form>
         </CardContent>