adds data access, login flow, navigation menu.

And some more stuff. :)
2025-07-27 10:26:40 +02:00
parent 31c6fd3265
commit c3a7a2d204
5 changed files with 145 additions and 26 deletions
@@ -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 (
+    <>
+      <AuthStatus />
+      {children}
+      <NavigationBar />
+    </>
+  );
+}
+
 export default function RootLayout({
  children,
 }: {
@@ -28,7 +40,9 @@ export default function RootLayout({
  return (
    <html lang="en" className={nunito.className}>
      <body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}>
-        <AuthProvider {...oidcConfig}>{children}</AuthProvider>
+        <AuthProvider {...oidcConfig}>
+          <LayoutContent>{children}</LayoutContent>
+        </AuthProvider>
        <button
          className={`absolute top-1 left-1 ${isAnimate ? "pause" : "play"}`}
          onClick={toggleAnimation}
@@ -1,43 +1,40 @@
 "use client";

 import Image from "next/image";
+import Link from "next/link";
 import { Log } from "oidc-client-ts";
 import { useAuth } from "react-oidc-context";
+import { Nunito } from "next/font/google";

 Log.setLogger(console);
+const nunito = Nunito({
+  weight: "900",
+  subsets: ["latin"],
+});

 export default function Page() {
  const auth = useAuth();
  console.log(auth);

-  switch (auth.activeNavigator) {
-    case "signinSilent":
-      return <div>Signing you in...</div>;
-    case "signoutRedirect":
-      return <div>Signing you out...</div>;
-  }
-
-  if (auth.isLoading) {
-    return <div>Loading...</div>;
-  }
-
  return (
    <main
      className={`flex min-h-screen flex-col items-center justify-between p-24`}
    >
-      {auth.error && <div>{auth.error.message}</div>}
-      {auth.isAuthenticated && (
-        <div>
-          <p>Hello {auth.user?.profile.name} </p>
-        </div>
-      )}
-      {auth.isAuthenticated && (
-        <button onClick={() => void auth.removeUser()}>Log out</button>
-      )}
-      {!auth.isAuthenticated && (
-        <button onClick={() => void auth.signinRedirect()}>Log in</button>
-      )}
-      <Image src={"/meowl.png"} width="460" height="460" alt="Meowl image" />
+      <div>
+        <h1
+          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+        >
+          Herzlich Willkommen bei Muzak!
+        </h1>
+        {auth.isAuthenticated && <></>}
+        {!auth.isAuthenticated && (
+          <h2
+            className={`${nunito.className} text-outline text-[32px] tracking-tighter text-yellow-500`}
+          >
+            Bitte authentificeren.
+          </h2>
+        )}
+      </div>
    </main>
  );
 }