Improve User Flow

cypress/e2e/home/home.cy.ts

@@ -2,6 +2,6 @@ describe('Home Page', () => {
     it('displays the correct main title', () => {
         cy.visit('localhost:5173');
 
-        cy.get('h1').should('contain', 'Home');
+        cy.contains('UserId:');
     });
 });

src/components/LoginPopup.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import '../css/login.css';
 
@@ -9,12 +10,14 @@ type Props = {
 
 export default function LoginPopup({ isOpen, onClose }: Props) {
     const { login, user } = useAuth();
+    const navigate = useNavigate();
 
     useEffect(() => {
         if (user && isOpen) {
             onClose();
+            navigate('/');
         }
-    }, [user, isOpen, onClose]);
+    }, [user, isOpen, onClose, navigate]);
 
     if (!isOpen) return null;
 

src/components/navbar/NavbarLink.tsx

@@ -10,6 +10,10 @@ export default function NavbarLink({ label, nav }: NavbarLinkProps) {
     const navigate = useNavigate();
 
     const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+        if (location.pathname === nav) {
+            return;
+        }
+
         e.preventDefault();
 
         const content = document.querySelector('.app-content');

src/contexts/AuthContext.tsx

@@ -35,6 +35,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
                 headers: {
                     Accept: 'application/json',
                 },
+                credentials: 'include',
             });
 
             if (response.ok) {

src/css/app-layout.css

@@ -8,7 +8,6 @@
 
 .app-content {
     padding: 3rem;
-    width: 100%;
     position: relative;
     overflow: hidden;
     transition:

src/css/carousel.css

@@ -11,7 +11,7 @@
 }
 
 .carousel {
-    width: 100%;
+    width: 72rem;
     background: var(--carousel-bg);
     height: 18rem;
     border-radius: 2rem;

src/css/home.css

@@ -0,0 +1,13 @@
+.home-grid {
+    display: grid;
+    width: 50rem;
+    grid-template-columns: 24rem 24rem;
+    gap: 2rem;
+}
+
+.home-grid-panel {
+    height: 20rem;
+    background: #e8e8e8;
+    border-radius: 3rem;
+    padding: 2rem;
+}

src/css/login.css

@@ -1,3 +1,11 @@
+.register-btn {
+    color: var(--standard-bw-text);
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 1rem;
+    border: 1px solid black;
+}
+
 .popup-overlay {
     position: fixed;
     inset: 0;
@@ -38,10 +46,6 @@
     font-size: 14px;
 }
 
-.popup-button:hover {
-    background-color: #f0f0f0;
-}
-
 .popup-close-x {
     position: absolute;
     top: 8px;

src/pages/Home.tsx

@@ -1,8 +1,27 @@
+import { useState } from 'react';
+import LoginPopup from '../components/LoginPopup.tsx';
+import '../css/login.css';
+import '../css/home.css';
+import { useAuth } from '../contexts/AuthContext';
+
 export default function Home() {
+    const [showLogin, setShowLogin] = useState(false);
+    const { user } = useAuth();
     return (
         <>
-            <div>
-                <h1>Home</h1>
+            <div className="home-grid">
+                <div className="home-grid-panel">
+                    <a className="register-btn" onClick={() => setShowLogin(true)}>
+                        Register
+                    </a>
+                    <LoginPopup isOpen={showLogin} onClose={() => setShowLogin(false)} />
+                    <p style={{ color: 'black' }}>
+                        UserId: <span style={{ color: user?.id ? 'green' : 'red' }}>{user?.id ?? 'Not logged in'}</span>
+                    </p>
+                </div>
+                <div className="home-grid-panel"></div>
+                <div className="home-grid-panel"></div>
+                <div className="home-grid-panel"></div>
             </div>
         </>
     );

src/pages/Testing.tsx

@@ -1,17 +1,12 @@
-import { useState } from 'react';
 import DarkModeToggle from '../components/DarkModeToggle.tsx';
-import LoginPopup from '../components/LoginPopup.tsx';
 
 export default function Testing() {
-    const [showLogin, setShowLogin] = useState(false);
     return (
         <>
             <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', color: 'black' }}>
                 <h1>[dev] Testing</h1>
                 <p>This page is for misc features that have been developed, but not placed.</p>
                 <DarkModeToggle />
-                <a onClick={() => setShowLogin(true)}>Register</a>
-                <LoginPopup isOpen={showLogin} onClose={() => setShowLogin(false)} />
             </div>
         </>
     );