login page / auth flow changes

src/assets/styles/global.css

@@ -216,6 +216,9 @@ Custom
 
 .btn {
   margin-top: 1.5% !important;
+  font-weight: 600;
+  font-size: 15px;
+  letter-spacing: 0.01em;
 }
 
 .hr {

src/components/AppLayout.jsx

@@ -19,6 +19,7 @@ const Player = lazy(() => import('./AudioPlayer.jsx'));
 export default function Root({ child, user = undefined, ...props }) {
   window.toast = toast;
   const theme = document.documentElement.getAttribute("data-theme")
+  const loggedIn = props.loggedIn ?? Boolean(user);
   usePrimeReactThemeSwitcher(theme);
   return (
     <PrimeReactProvider>
@@ -34,7 +35,7 @@ export default function Root({ child, user = undefined, ...props }) {
         color="danger">
           Work in progress... bugs are to be expected.
         </Alert> */}
-        {child == "LoginPage" && (<LoginPage client:only="react" />)}
+        {child == "LoginPage" && (<LoginPage {...props} loggedIn={loggedIn} />)}
         {child == "LyricSearch" && (<LyricSearch {...props} client:only="react" />)}
         {child == "Player" && (<Player client:only="react" user={user} />)}
         {child == "Memes" && <Memes client:only="react" />}

src/components/Login.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
+import Button from "@mui/joy/Button";
 import { toast } from "react-toastify";
 import { API_URL } from "@/config";
 
@@ -13,7 +14,7 @@ function clearCookie(name) {
     document.cookie = `${name}=; Max-Age=0; path=/;`;
 }
 
-export default function LoginPage() {
+export default function LoginPage({ loggedIn = false }) {
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
     const [loading, setLoading] = useState(false);
@@ -79,8 +80,7 @@ export default function LoginPage() {
                 toast.success("Login successful!", {
                     toastId: "login-success-toast",
                 });
-                const returnTo = getCookie("returnTo") || "/TRip";
+                const returnTo = "/";
-                clearCookie("returnTo");
                 window.location.href = returnTo;
             } else {
                 toast.error("Login failed: no access token received", {
@@ -97,6 +97,30 @@ export default function LoginPage() {
         }
     }
 
+    if (loggedIn) {
+        return (
+            <div className="flex items-center justify-center px-4 py-16">
+                <div className="max-w-md w-full bg-white dark:bg-[#1E1E1E] rounded-2xl shadow-xl px-10 py-8 text-center">
+                    <img className="logo-auth mx-auto mb-4" src="/images/zim.png" alt="Logo" />
+                    <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">You're already logged in</h2>
+                    <p className="text-sm text-gray-800 dark:text-gray-300 mb-4">You do not have permission to access this resource.
+                    </p>
+                    <p className="text-xs italic text-gray-800 dark:text-gray-300 mb-4">
+                        If you feel you have received this message in error, scream at codey.
+                    </p>
+                    <Button
+                        className="btn"
+                        color="primary"
+                        variant="solid"
+                        onClick={() => (window.location.href = "/")}
+                    >
+                        Go Home
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+
     return (
         <div className="flex items-start justify-center bg-gray-50 dark:bg-[#121212] px-4 pt-20 py-10">
             <div className="max-w-md w-full bg-white dark:bg-[#1E1E1E] rounded-2xl shadow-xl px-10 pb-6">

src/pages/TRip/index.astro

@@ -6,8 +6,6 @@ import { requireAuthHook } from "@/hooks/requireAuthHook";
 const user = await requireAuthHook(Astro);
 
 if (!user) {
-  const decodedUrl = decodeURIComponent(Astro.url.pathname + Astro.url.search);
-  Astro.cookies.set('returnTo', decodedUrl, { path: '/' });
   return Astro.redirect('/login');
 }
 

src/pages/TRip/requests.astro

@@ -6,8 +6,6 @@ import { requireAuthHook } from "@/hooks/requireAuthHook";
 const user = await requireAuthHook(Astro);
 
 if (!user) {
-  const decodedUrl = decodeURIComponent(Astro.url.pathname + Astro.url.search);
-  Astro.cookies.set('returnTo', decodedUrl, { path: '/' });
   return Astro.redirect('/login');
 }
 

src/pages/lighting.astro

@@ -6,8 +6,6 @@ import { requireAuthHook } from "@/hooks/requireAuthHook";
 const user = await requireAuthHook(Astro);
 
 if (!user || !user.roles.includes('lighting')) {
-  const decodedUrl = decodeURIComponent(Astro.url.pathname + Astro.url.search);
-  Astro.cookies.set('returnTo', decodedUrl, { path: '/' });
   return Astro.redirect('/login');
 }
 ---

src/pages/login.astro

@@ -2,11 +2,15 @@
 import LoginPage from '@/components/Login.jsx';
 import Base from "@/layouts/Base.astro";
 import Root from "@/components/AppLayout.jsx";
+import { requireAuthHook } from '@/hooks/requireAuthHook';
+const user = await requireAuthHook(Astro);
+const isLoggedIn = Boolean(user);
+
 ---
 <Base>
   <section>
   <div class="prose prose-neutral dark:prose-invert">
-  <Root child="LoginPage" client:only="react" >
+  <Root child="LoginPage" loggedIn={isLoggedIn} client:only="react" >
   </Root>
   </section>
 </Base>