Gitlab-Migration/demo-websites
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Thatsaphorn
2025-06-14 08:55:45 +02:00
parent c92fe6e221
commit 8435ea04af
3 changed files with 72 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
main-website/app/api/logout/route.ts Normal file
View File

@@ -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)
}

13
main-website/app/layout.tsx
View File

@@ -1,6 +1,8 @@
import type {Metadata} from "next"; import type {Metadata} from "next";
import {Geist, Geist_Mono} from "next/font/google"; import {Geist, Geist_Mono} from "next/font/google";
import "./globals.css"; import "./globals.css";
import ProfileDropdown from '@/components/ProfileDropdown'
import React from "react"; // <- Add this line
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
@@ -24,10 +26,13 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
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">
{children} <ProfileDropdown/>
</header>
{children}
</div>
</body> </body>
</html> </html>
); );

52
main-website/components/ProfileDropdown.tsx Normal file
View File

@@ -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>
)
}