mv login page to root page

frontend/src/app/page.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Log } from "oidc-client-ts";
 import { useAuth } from "react-oidc-context";
 import { Nunito } from "next/font/google";
+import { use, useState } from "react";
 
 Log.setLogger(console);
 const nunito = Nunito({
@@ -13,28 +14,44 @@ const nunito = Nunito({
 });
 
 export default function Page() {
+  const [userName, setUserName] = useState("Stroop");
   const auth = useAuth();
   console.log(auth);
 
   return (
-    <main
-      className={`flex min-h-screen flex-col items-center justify-between p-24`}
-    >
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div>
         <h1
           className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
         >
-          Herzlich Willkommen bei Muzak!
+          LOGIN
         </h1>
-        {auth.isAuthenticated && <></>}
-        {!auth.isAuthenticated && (
-          <h2
-            className={`${nunito.className} text-outline text-[32px] tracking-tighter text-yellow-500`}
-          >
-            Bitte authentificeren.
-          </h2>
-        )}
       </div>
+      {auth.isAuthenticated && (
+        <h2
+          className={`${nunito.className} text-outline mb-16 text-[32px] tracking-tighter text-yellow-500`}
+        >
+          Hallo je bent nu ingelogd.
+        </h2>
+      )}
+      {!auth.isAuthenticated && (
+        <div className="mb-15 flex flex-col items-center justify-between gap-4 rounded-md bg-blue-950/80 p-8">
+          <p className="text-2xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
+            Welkom, {userName}!
+          </p>
+
+          <button
+            className="w-full rounded bg-blue-500 px-4 py-2 text-center font-bold text-white hover:bg-blue-400"
+            onClick={() => void auth.signinRedirect()}
+          >
+            <Link href="/nominations" className="w-full">
+              Inloggen
+            </Link>
+          </button>
+        </div>
+      )}
+
+      <div></div>
     </main>
   );
 }

frontend/src/components/AuthStatus.tsx

@@ -49,12 +49,12 @@ export default function AuthStatus() {
 
   return (
     <div
-      className={`${nunito.className} absolute top-4 right-4 flex items-center gap-2 rounded-lg border-4 border-black bg-white/10 px-3 py-2`}
+      className={`${nunito.className} absolute top-4 right-4 flex items-center gap-2 rounded-lg bg-blue-950/80 px-3 py-2`}
     >
       {displayState.isAuthenticated ? (
         <>
           <div className="h-2 w-2 rounded-full bg-green-500"></div>
-          <span className="text-sm font-medium">
+          <span className="text-sm font-medium text-white">
             {displayState.user?.profile.name || "Authenticated"}
           </span>
           <button
@@ -62,19 +62,18 @@ export default function AuthStatus() {
               void auth.removeUser();
               router.push("/");
             }}
-            className="rounded bg-red-500/20 px-2 py-1 text-xs transition-colors hover:bg-red-500/30"
+            className="ml-1 rounded bg-gray-500/50 px-2 py-1 text-xs transition-colors hover:bg-red-500/30"
           >
             Uitloggen
           </button>
         </>
       ) : (
         <>
-          <div className="h-2 w-2 rounded-full bg-red-500"></div>
           <button
             onClick={() => void auth.signinRedirect()}
-            className="rounded bg-blue-500/20 px-2 py-1 text-xs transition-colors hover:bg-blue-500/30"
+            className="rounded px-1 py-2 text-xs"
           >
-            Inloggen
+            <div className="h-2 w-2 rounded-full bg-red-500"></div>
           </button>
         </>
       )}