Mock Login Pop Up Form

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
+    "lucide-react": "^0.564.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.13.0"

src/App.tsx

@@ -2,7 +2,6 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { ThemeProvider } from './contexts/ThemeContext';
 import AppLayout from './components/AppLayout.tsx';
 import Home from './pages/Home.tsx';
-import Register from './pages/Register.tsx';
 import Dashboard from './pages/Dashboard.tsx';
 import CreateEvent from './pages/events/CreateEvent.tsx';
 import EventHistory from './pages/events/EventHistory.tsx';
@@ -11,30 +10,32 @@ import Roster from './pages/Roster.tsx';
 import Notifications from './pages/Notifications.tsx';
 import Profile from './pages/Profile.tsx';
 import Settings from './pages/Settings.tsx';
+import { AuthProvider } from './context/AuthContext.tsx';
 import HelpCenter from './pages/HelpCenter.tsx';
 
 function App() {
     return (
         <>
-            <ThemeProvider>
-                <BrowserRouter>
-                    <Routes>
-                        <Route path="/" element={<Home />} />
-                        <Route path="/register" element={<Register />} />
-                        <Route element={<AppLayout />}>
-                            <Route path="/dashboard" element={<Dashboard />} />
-                            <Route path="/events/create" element={<CreateEvent />} />
-                            <Route path="/events/history" element={<EventHistory />} />
-                            <Route path="/calendar" element={<Calendar />} />
-                            <Route path="/roster" element={<Roster />} />
-                            <Route path="/notifications" element={<Notifications />} />
-                            <Route path="/profile" element={<Profile />} />
-                            <Route path="/settings" element={<Settings />} />
-                            <Route path="/help" element={<HelpCenter />} />
-                        </Route>
-                    </Routes>
-                </BrowserRouter>
-            </ThemeProvider>
+            <AuthProvider>
+                <ThemeProvider>
+                    <BrowserRouter>
+                        <Routes>
+                            <Route path="/" element={<Home />} />
+                            <Route element={<AppLayout />}>
+                                <Route path="/dashboard" element={<Dashboard />} />
+                                <Route path="/events/create" element={<CreateEvent />} />
+                                <Route path="/events/history" element={<EventHistory />} />
+                                <Route path="/calendar" element={<Calendar />} />
+                                <Route path="/roster" element={<Roster />} />
+                                <Route path="/notifications" element={<Notifications />} />
+                                <Route path="/profile" element={<Profile />} />
+                                <Route path="/settings" element={<Settings />} />
+                                <Route path="/help" element={<HelpCenter />} />
+                            </Route>
+                        </Routes>
+                    </BrowserRouter>
+                </ThemeProvider>
+            </AuthProvider>
         </>
     );
 }

src/components/LoginPopup.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+import { useAuth } from '../context/AuthContext';
+import '../css/login.css';
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+export default function LoginPopup({ isOpen, onClose }: Props) {
+    const { login, user } = useAuth();
+
+    useEffect(() => {
+        if (user && isOpen) {
+            onClose();
+        }
+    }, [user, isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    const handleOverlayClick = () => {
+        onClose();
+    };
+
+    const handlePopupClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+    };
+
+    return (
+        <div className="popup-overlay" onClick={handleOverlayClick}>
+            <div className="popup-container" onClick={handlePopupClick}>
+                <button className="popup-close-x" onClick={onClose}>
+                    ×
+                </button>
+
+                <h2 className="popup-title">Register or Login</h2>
+
+                <button className="popup-button" onClick={() => login('google')}>
+                    Continue with Google
+                </button>
+
+                <button className="popup-button" onClick={() => login('microsoft')}>
+                    Continue with Microsoft
+                </button>
+            </div>
+        </div>
+    );
+}

src/components/sidebar/Sidebar.tsx

@@ -1,6 +1,10 @@
 import '../../css/sidebar.css';
+import '../../css/login.css';
 import SidebarGroup from './SidebarGroup.tsx';
 import SidebarLink from './SidebarLink.tsx';
+//import { type useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import LoginPopup from '../LoginPopup.tsx';
 import SidebarProfile from './SidebarProfile.tsx';
 import SidebarWorkspace from './SidebarWorkspace.tsx';
 
@@ -24,37 +28,69 @@ type SidebarProps = {
 };
 
 export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
+    const [showLogin, setShowLogin] = useState(false);
+
     return (
-        <div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
-            <div className="sidebar-header">
-                <div className="toggle-spacer" />
-                <button className="collapse-toggle" onClick={onToggle}>
-                    <Bars3Icon />
-                </button>
-            </div>
-            <SidebarWorkspace workspace="Overview">
-                <SidebarLink label="Dashboard" icon={<HomeIcon />} nav="/dashboard" />
-                <SidebarGroup label="Events" icon={<StarIcon />} collapsed={collapsed}>
-                    <SidebarLink label="Create" icon={<PlusIcon />} nav="/events/create" />
+        <>
+            <div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
+                <div className="sidebar-header">
+                    <div className="toggle-spacer" />
+                    <button className="collapse-toggle" onClick={onToggle}>
+                        <Bars3Icon />
+                    </button>
+                </div>
+                <div className="main-sidebar-link-container">
+                    <SidebarLink label="Dashboard" icon={<HomeIcon />} nav="/dashboard" />
+                    <SidebarLink label="Events" icon={<StarIcon />} nav="/events" />
+                    <SidebarLink label="Calendar" icon={<CalendarDaysIcon />} nav="/calendar" />
+                    <SidebarLink label="Roster" icon={<UserGroupIcon />} nav="/roster" />
+                    <SidebarLink
+                        label="Notifications"
+                        icon={<BellAlertIcon />}
+                        nav="/notifications"
+                    />
+                </div>
+                <div className="lower-sidebar-link-container">
+                    <SidebarLink label="My Profile" icon={<UserCircleIcon />} nav="/profile" />
+                    <SidebarLink label="Settings" icon={<Cog8ToothIcon />} nav="/settings" />
+                </div>
+                <a className="register-btn" onClick={() => setShowLogin(true)}>
+                    {' '}
+                    Register{' '}
+                </a>
+                <LoginPopup isOpen={showLogin} onClose={() => setShowLogin(false)} />
+                <SidebarWorkspace workspace="Overview">
+                    <SidebarLink label="Dashboard" icon={<HomeIcon />} nav="/dashboard" />
+                    <SidebarGroup label="Events" icon={<StarIcon />} collapsed={collapsed}>
+                        <SidebarLink label="Create" icon={<PlusIcon />} nav="/events/create" />
+                        <SidebarLink
+                            label="History"
+                            icon={<ClipboardDocumentCheckIcon />}
+                            nav="/events/history"
+                        />
+                    </SidebarGroup>
+                    <SidebarLink label="Calendar" icon={<CalendarDaysIcon />} nav="/calendar" />
+                    <SidebarLink label="Roster" icon={<UserGroupIcon />} nav="/roster" />
                     <SidebarLink
-                        label="History"
-                        icon={<ClipboardDocumentCheckIcon />}
-                        nav="/events/history"
+                        label="Notifications"
+                        icon={<BellAlertIcon />}
+                        nav="/notifications"
                     />
-                </SidebarGroup>
-                <SidebarLink label="Calendar" icon={<CalendarDaysIcon />} nav="/calendar" />
-                <SidebarLink label="Roster" icon={<UserGroupIcon />} nav="/roster" />
-                <SidebarLink label="Notifications" icon={<BellAlertIcon />} nav="/notifications" />
-            </SidebarWorkspace>
-            <SidebarWorkspace>
-                <SidebarLink label="Help Center" icon={<QuestionMarkCircleIcon />} nav="/help" />
-                <SidebarLink label="Settings" icon={<Cog8ToothIcon />} nav="/settings" />
-                <SidebarProfile
-                    icon={<UserCircleIcon />}
-                    name="Kevin Smith"
-                    email="smithk@rpi.edu"
-                />
-            </SidebarWorkspace>
-        </div>
+                </SidebarWorkspace>
+                <SidebarWorkspace>
+                    <SidebarLink
+                        label="Help Center"
+                        icon={<QuestionMarkCircleIcon />}
+                        nav="/help"
+                    />
+                    <SidebarLink label="Settings" icon={<Cog8ToothIcon />} nav="/settings" />
+                    <SidebarProfile
+                        icon={<UserCircleIcon />}
+                        name="Kevin Smith"
+                        email="smithk@rpi.edu"
+                    />
+                </SidebarWorkspace>
+            </div>
+        </>
     );
 }