add Keycloak, add better canvas

client/src/lib/config.ts

@@ -29,7 +29,7 @@ export const COLORS = [
   "#ffb470", // Beige
   "#000000", // Black
   "#515252", // Dark Gray
-  "#898d90", // Gray
+  "#898989", // Gray
   "#d4d7d9", // Light Gray
   "#ffffff", // White
 ] as const;
@@ -39,7 +39,7 @@ export const DEFAULT_SELECTED_COLOR = "#be0039"; // Official r/place red
 export function generateUserId(): string {
   const stored = localStorage.getItem("r-place-user-id");
   if (stored) return stored;
-  
+
   const newId = `User#${Math.floor(Math.random() * 10000)}`;
   localStorage.setItem("r-place-user-id", newId);
   return newId;
@@ -48,3 +48,24 @@ export function generateUserId(): string {
 export function getUsername(): string {
   return generateUserId();
 }
+
+export const API_BASE = "/api";
+
+export interface AuthStatus {
+  authenticated: boolean;
+  keycloakEnabled: boolean;
+  user?: {
+    userId: string;
+    username: string;
+  };
+}
+
+export async function getAuthStatus(): Promise<AuthStatus> {
+  try {
+    const response = await fetch(`${API_BASE}/auth/status`);
+    return await response.json();
+  } catch (error) {
+    console.error("Failed to get auth status:", error);
+    return { authenticated: false, keycloakEnabled: false };
+  }
+}