login page / auth flow changes

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";
-                clearCookie("returnTo");
+                const 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">