Integrate ProfileDropdown component, update layout to include user menu, and add Keycloak logout API route.

2025-06-14 08:55:45 +02:00
parent c92fe6e221
commit 8435ea04af
3 changed files with 72 additions and 4 deletions
--- a/main-website/app/api/logout/route.ts
+++ b/main-website/app/api/logout/route.ts
@@ -0,0 +1,11 @@
+import {NextResponse} from 'next/server'
+
+export async function POST() {
+    const keycloakLogoutUrl = process.env.KEYCLOAK_LOGOUT_URL
+
+    if (!keycloakLogoutUrl) {
+        return new NextResponse('Missing KEYCLOAK_LOGOUT_URL env variable', {status: 500})
+    }
+
+    return NextResponse.redirect(keycloakLogoutUrl, 302)
+}
--- a/main-website/app/layout.tsx
+++ b/main-website/app/layout.tsx
@@ -1,6 +1,8 @@
 import type {Metadata} from "next";
 import {Geist, Geist_Mono} from "next/font/google";
 import "./globals.css";
+import ProfileDropdown from '@/components/ProfileDropdown'
+import React from "react"; // <- Add this line

 const geistSans = Geist({
    variable: "--font-geist-sans",
@@ -24,10 +26,13 @@ export default function RootLayout({
 }>) {
    return (
        <html lang="en">
-        <body
-            className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-        >
-        {children}
+        <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <div className="min-h-screen bg-zinc-900 text-white">
+            <header className="flex justify-end p-4 border-b border-zinc-800">
+                <ProfileDropdown/>
+            </header>
+            {children}
+        </div>
        </body>
        </html>
    );
--- a/main-website/components/ProfileDropdown.tsx
+++ b/main-website/components/ProfileDropdown.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import {useState, useRef, useEffect} from 'react'
+import {useRouter} from 'next/navigation'
+
+export default function ProfileDropdown() {
+    const [open, setOpen] = useState(false)
+    const dropdownRef = useRef<HTMLDivElement>(null)
+    const router = useRouter()
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+                setOpen(false)
+            }
+        }
+
+        document.addEventListener('mousedown', handleClickOutside)
+        return () => document.removeEventListener('mousedown', handleClickOutside)
+    }, [])
+
+    const handleLogout = async () => {
+        try {
+            await fetch('/logout', {method: 'POST'})
+            router.push('/') // Or a dedicated post-logout landing page
+        } catch (e) {
+            console.error('Logout failed', e)
+        }
+    }
+
+    return (
+        <div className="relative" ref={dropdownRef}>
+            <button
+                onClick={() => setOpen(!open)}
+                className="text-white font-medium px-4 py-2 hover:bg-zinc-800 rounded"
+            >
+                Profil ▾
+            </button>
+
+            {open && (
+                <div className="absolute right-0 mt-2 w-40 bg-white shadow-lg rounded z-50">
+                    <button
+                        onClick={handleLogout}
+                        className="block w-full text-left px-4 py-2 text-sm text-zinc-800 hover:bg-zinc-100"
+                    >
+                        Logout
+                    </button>
+                </div>
+            )}
+        </div>
+    )
+}