add Keycloak, add better canvas

client/src/components/auth-banner.tsx

@@ -0,0 +1,58 @@
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { getAuthStatus, type AuthStatus } from "@/lib/config";
+
+export function AuthBanner() {
+  const [authStatus, setAuthStatus] = useState<AuthStatus | null>(null);
+
+  useEffect(() => {
+    getAuthStatus().then(setAuthStatus);
+  }, []);
+
+  if (!authStatus?.keycloakEnabled) {
+    return null;
+  }
+
+  if (authStatus.authenticated) {
+    return (
+      <div className="bg-green-50 border-b border-green-200 p-3">
+        <div className="flex items-center justify-between max-w-7xl mx-auto">
+          <div className="flex items-center gap-2">
+            <span className="text-green-700 font-medium">
+              Angemeldet als {authStatus.user?.username}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => window.location.href = "/logout"}
+            className="border-green-300 text-green-700 hover:bg-green-100"
+          >
+            Abmelden
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-blue-50 border-b border-blue-200 p-3">
+      <div className="flex items-center justify-between max-w-7xl mx-auto">
+        <div className="flex items-center gap-2">
+          <span className="text-blue-700">
+            Melde dich an, um Pixel zu platzieren
+          </span>
+        </div>
+        <Button
+          onClick={() => window.location.href = "/login"}
+          className="bg-blue-600 hover:bg-blue-700 text-white"
+          size="sm"
+        >
+          Anmelden
+        </Button>
+      </div>
+    </div>
+  );
+}