diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index a532c95..f34332c 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -4,6 +4,8 @@ import { useState } from "react"; import { AuthProvider } from "react-oidc-context"; import { oidcConfig, userManager } from "muzak/config/auth"; import { Source_Sans_3, Nunito } from "next/font/google"; +import AuthStatus from "muzak/components/AuthStatus"; +import NavigationBar from "muzak/components/NavigationBar"; const sourceSans = Source_Sans_3({ weight: ["400"], @@ -14,6 +16,16 @@ const nunito = Nunito({ subsets: ["latin"], }); +function LayoutContent({ children }: { children: React.ReactNode }) { + return ( + <> + + {children} + + + ); +} + export default function RootLayout({ children, }: { @@ -28,7 +40,9 @@ export default function RootLayout({ return ( - {children} + + {children} + - )} - {!auth.isAuthenticated && ( - - )} - Meowl image +
+

+ Herzlich Willkommen bei Muzak! +

+ {auth.isAuthenticated && <>} + {!auth.isAuthenticated && ( +

+ Bitte authentificeren. +

+ )} +
); } diff --git a/frontend/src/components/AuthStatus.tsx b/frontend/src/components/AuthStatus.tsx new file mode 100644 index 0000000..cd3655f --- /dev/null +++ b/frontend/src/components/AuthStatus.tsx @@ -0,0 +1,83 @@ +"use client"; +import { useAuth } from "react-oidc-context"; +import { useState, useEffect } from "react"; +import { useRouter } from "next/navigation"; +import { Source_Sans_3, Nunito } from "next/font/google"; + +const nunito = Nunito({ + subsets: ["latin"], +}); + +export default function AuthStatus() { + const auth = useAuth(); + const router = useRouter(); + const [persistentAuthState, setPersistentAuthState] = useState<{ + isAuthenticated: boolean; + user: any; + hasInitialized: boolean; + }>({ + isAuthenticated: false, + user: null, + hasInitialized: false, + }); + + useEffect(() => { + // Only update persistent state when we have a definitive auth state + if (!auth.isLoading && !auth.error) { + setPersistentAuthState({ + isAuthenticated: auth.isAuthenticated, + user: auth.user, + hasInitialized: true, + }); + } + }, [auth.isLoading, auth.isAuthenticated, auth.user, auth.error]); + + // Show loading only on first load, not on subsequent navigations + if (!persistentAuthState.hasInitialized && auth.isLoading) { + return ( +
+ ... +
+ ); + } + + const displayState = persistentAuthState.hasInitialized + ? persistentAuthState + : { isAuthenticated: auth.isAuthenticated, user: auth.user }; + + return ( +
+ {displayState.isAuthenticated ? ( + <> +
+ + {displayState.user?.profile.name || "Authenticated"} + + + + ) : ( + <> +
+ + + )} +
+ ); +} diff --git a/frontend/src/components/NavigationBar.tsx b/frontend/src/components/NavigationBar.tsx new file mode 100644 index 0000000..5a4ccdd --- /dev/null +++ b/frontend/src/components/NavigationBar.tsx @@ -0,0 +1,24 @@ +import Link from "next/link"; +import { useAuth } from "react-oidc-context"; +import { Source_Sans_3, Nunito } from "next/font/google"; +const source = Source_Sans_3({ + subsets: ["latin"], +}); +const font = source.className; + +export default function NavigationBar() { + const auth = useAuth(); + if (!auth.isLoading && !auth.error && auth.isAuthenticated) { + return ( + + ); + } +} diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index e3e4f1c..1317fc2 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -8,7 +8,8 @@ "paths": { "muzak/config/*": ["./src/config/*"], "muzak/data/*": ["./src/data/*"], - "muzak/app/*": ["./src/app/*"] + "muzak/app/*": ["./src/app/*"], + "muzak/components/*": ["./src/components/*"] }, "allowJs": false,