Improved home page and login

Author: JManion32

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/contexts/AuthContext.tsx

@@ -35,25 +35,30 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
                 headers: {
                     Accept: 'application/json',
                 },
+                credentials: "include"
             });
 
             if (response.ok) {
                 const data: User = await response.json();
                 setUser(data);
-            } else {
+            }
+            else {
                 setUser(null);
             }
-        } catch (err: unknown) {
+        }
+        catch (err: unknown) {
             if (err instanceof Error) {
                 console.error('Failed to fetch user:', err);
                 setError(err.message);
-            } else {
+            }
+            else {
                 console.error('Unknown error:', err);
                 setError('Unknown error');
             }
 
             setUser(null);
-        } finally {
+        }
+        finally {
             setLoading(false);
         }
     };
@@ -79,7 +84,8 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
                     setUser(data);
                     clearInterval(pollInterval);
                 }
-            } catch (err: unknown) {
+            }
+            catch (err: unknown) {
                 if (err instanceof Error) {
                     console.error('Polling failed:', err.message);
                 }
@@ -99,7 +105,8 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
             setUser(null);
 
             window.location.href = '/app/';
-        } catch (err: unknown) {
+        }
+        catch (err: unknown) {
             if (err instanceof Error) {
                 console.error('Logout failed:', err.message);
             }

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,15 +1,29 @@
 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>
-                <a onClick={() => setShowLogin(true)}>Register</a>
-                <LoginPopup isOpen={showLogin} onClose={() => setShowLogin(false)} />
+            <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,6 +1,4 @@
-import { useState } from 'react';
 import DarkModeToggle from '../components/DarkModeToggle.tsx';
-import LoginPopup from '../components/LoginPopup.tsx';
 
 export default function Testing() {
     return (