feat: implement auth guards and conditional rendering entry button for virtual classroom

public/classroom_poc.html

@@ -235,6 +235,19 @@ <h2 class="text-sm font-semibold flex items-center gap-2">
     const desksContainer      = document.getElementById('desksContainer');
     const toastContainer      = document.getElementById('toastContainer');
 
+    // Authentication utils
+    function getAuth() {
+        return {
+            token: localStorage.getItem('edu_token'),
+            user: JSON.parse(localStorage.getItem('edu_user') || 'null')
+        };
+    }
+
+    function isAuthenticated() {
+        const { token, user } = getAuth();
+        return token && user;
+    }
+
     // COORDINATE HELPERS
     // Positions are stored and transmitted as NORMALIZED values (0.0 – 1.0)
     // representing a fraction of the canvas width/height.
@@ -414,6 +427,15 @@ <h2 class="text-sm font-semibold flex items-center gap-2">
 
     // Join / Leave
     function joinClassroom() {
+        if (!isAuthenticated()) {
+            showToast('Please sign in to join the virtual classroom.', 'warning');
+            // Preserve the user's intended destination so login.html can send
+            // them back here after authentication.
+            const returnTo = window.location.pathname + window.location.search;
+            sessionStorage.setItem('post_login_redirect', returnTo);
+            setTimeout(() => { window.location.href = '/login.html'; }, 800);
+            return;
+        }
         intentionalDisconnect = false;
         reconnectAttempts = 0;
         isSeated = false;

public/index.html

@@ -153,9 +153,14 @@ <h2 class="text-2xl font-bold mb-2">Global Virtual Classroom</h2>
                                 </div>
                                 <span>21 learners inside</span>
                             </div>
-                            <a href="/classroom_poc.html?autojoin=1&room=lobby" class="w-full bg-white text-teal-700 font-bold px-6 py-3 rounded-xl hover:bg-teal-50 transition-all shadow-lg flex items-center justify-center gap-2">
-                                <i class="fas fa-door-open"></i> Join Lobby Classroom
-                            </a>
+                            <div id="classroom-join-container">
+                                <a href="/classroom_poc.html?autojoin=1&room=lobby" class="w-full bg-white text-teal-700 font-bold px-6 py-3 rounded-xl hover:bg-teal-50 transition-all shadow-lg flex items-center justify-center gap-2" id="join-logged-in" style="display: none;">
+                                    <i class="fas fa-door-open"></i> Join Lobby Classroom
+                                </a>
+                                <a href="/login.html?next=%2Fclassroom_poc.html%3Fautojoin%3D1%26room%3Dlobby" class="w-full bg-white/20 text-white font-bold px-6 py-3 rounded-xl hover:bg-white hover:text-black transition-all shadow-lg flex items-center justify-center gap-2" id="join-not-logged-in" style="display: none;">
+                                    <i class="fas fa-sign-in-alt"></i> Login to Join Classroom
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>

public/js/layout.js

@@ -178,4 +178,16 @@ document.addEventListener('DOMContentLoaded', async () => {
     await inject('site-navbar', '/partials/navbar.html', updateAuthSection);
     await inject('site-footer', '/partials/footer.html');
      updateDarkModeIcon();
+});
+
+// Conditional rendering for the "Join Lobby Classroom" button.
+// These elements only exist on the homepage, so we guard against nulls.
+document.addEventListener('DOMContentLoaded', () => {
+    const loggedInEl = document.getElementById('join-logged-in');
+    const notLoggedInEl = document.getElementById('join-not-logged-in');
+    if (!loggedInEl || !notLoggedInEl) return;
+
+    const authed = isAuthenticated();
+    loggedInEl.style.display = authed ? 'flex' : 'none';
+    notLoggedInEl.style.display = authed ? 'none' : 'flex';
 });

public/login.html

@@ -256,11 +256,33 @@ <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Create your
             : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300');
 }
 
-// Store authentication data
+// Store authentication data and handle post-login flow
 function storeAuth(data) {
     localStorage.setItem('edu_token', data.token);
     localStorage.setItem('edu_user', JSON.stringify(data.user));
-    window.location.href = '/dashboard.html';
+
+    // Show success toast
+    showToast('Redirecting...');
+
+    // Wait a few seconds then redirect
+    setTimeout(() => {
+        handlePostLoginRedirect();
+    }, 500);
+}
+
+// Show success toast message
+function showToast(msg) {
+    const toast = document.createElement('div');
+    toast.className = 'fixed top-4 right-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-lg p-4 text-green-700 dark:text-green-300 text-sm flex items-start gap-2 animate-pulse shadow-lg z-50';
+    const icon = document.createElement('i');
+    icon.className = 'fas fa-check-circle mt-0.5 flex-shrink-0';
+    const span = document.createElement('span');
+    span.textContent = msg;
+    toast.append(icon, span);
+    document.body.appendChild(toast);
+    setTimeout(() => {
+        toast.remove();
+    }, 3000);
 }
 
 // Show error message
@@ -274,12 +296,28 @@ <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Create your
     }, 5000);
 }
 
+// Handle redirect after successful login
+function handlePostLoginRedirect() {
+    const redirectUrl = sessionStorage.getItem('post_login_redirect');
+    sessionStorage.removeItem('post_login_redirect');
+    // Only honor same-origin, path-only redirects to prevent open-redirect abuse.
+    const safe = redirectUrl && /^\/(?!\/)/.test(redirectUrl);
+    window.location.href = safe ? redirectUrl : '/dashboard.html';
+}
+
 // Handle tab parameter in URL
 const params = new URLSearchParams(location.search);
 if (params.get('tab') === 'register') {
     switchTab('register');
 }
 
+// Handle next parameter for post-login redirect.
+// URLSearchParams.get() already performs percent-decoding — no need to decode again.
+const nextParam = params.get('next');
+if (nextParam) {
+    sessionStorage.setItem('post_login_redirect', nextParam);
+}
+
 // Login form submission
 document.getElementById('form-login').addEventListener('submit', async e => {
     e.preventDefault();