Added logout button, and switching navbar elements depending on login…

… state
jdf18 · Jan 2, 2025 · b0eb28f · b0eb28f
1 parent 089e040
commit b0eb28f
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 35 deletions.
diff --git a/src/app.js b/src/app.js
@@ -94,4 +94,11 @@ app.all('/api/logout', (req, res) => {
     });
 });
 
+app.get('/api/is_logged_in', async (req, res) => {
+    if (req.session.user) {
+        return res.status(200).json(true);
+    }
+    return res.status(200).json(false);
+});
+
 module.exports = app;
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -0,0 +1,8 @@
+
+button.login-btn:not(.hidden) {
+    display: block;
+}
+
+button.login-btn.hidden {
+    display: none;
+}
diff --git a/static/index.html b/static/index.html
@@ -20,14 +20,15 @@
                 <li class="nav-item active">
                     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                 </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="#">Link</a>
+                <li class="nav-item" id="nav-my-recipes">
+                    <a class="nav-link" href="#">My recipes</a>
                 </li>
-                <li class="nav-item">
-                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+                <li class="nav-item" id="nav-my-account">
+                    <a class="nav-link disabled" href="#">Account</a>
                 </li>
             </ul>
-            <button class="btn btn-outline-success btn-lg" id="loginBtn">Login</button>
+            <button class="btn btn-outline-success btn-lg login-btn" id="loginBtn">Login</button>
+            <button class="btn btn-success btn-lg login-btn hidden" id="logoutBtn">Logout</button>
         </div>
     </nav>
 

diff --git a/static/js/index.js b/static/js/index.js
@@ -1,9 +0,0 @@
-/* global bootstrap */
-
-document.addEventListener('DOMContentLoaded', () => {
-    const loginModal = new bootstrap.Modal(document.getElementById('myModal'));
-
-    document.getElementById('loginBtn').addEventListener('click', () => {
-        loginModal.show();
-    });
-});

diff --git a/static/js/login.js b/static/js/login.js
@@ -1,29 +1,121 @@
-document.addEventListener('DOMContentLoaded', () => {
+/* global bootstrap */
+
+async function apiIsLoggedIn() {
+    try {
+        const response = await fetch('/api/is_logged_in', {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+
+        const result = await response.json();
+
+        if (response.ok) {
+            return result;
+        }
+        console.log(`Error: ${result.message}`);
+    } catch (error) {
+        console.log('Something went wrong. Please try again.');
+        console.error(error);
+    }
+    return false;
+}
+
+async function apiLogin(username, password) {
+    try {
+        const response = await fetch('/api/login', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ username, password }),
+        });
+
+        const result = await response.json();
+
+        if (response.ok) {
+            console.log(`Welcome, ${result.username}!`);
+        } else {
+            console.log(`Error: ${result.message}`);
+        }
+    } catch (error) {
+        console.log('Something went wrong. Please try again.');
+        console.error(error);
+    }
+}
+
+async function apiLogout() {
+    let result;
+    try {
+        const response = await fetch('/api/logout', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+
+        result = await response.json();
+
+        if (response.ok) {
+            return true;
+        }
+        console.log(`Error: ${result.message}`);
+        return false;
+    } catch (error) {
+        console.log('Something went wrong. Please try again.');
+        console.error(error);
+        return false;
+    }
+}
+
+async function updateNavbar() {
+    const isLoggedIn = await apiIsLoggedIn();
+
+    if (isLoggedIn) {
+        document.getElementById('loginBtn').classList.add('hidden');
+        document.getElementById('logoutBtn').classList.remove('hidden');
+
+        document.getElementById('nav-my-recipes').children[0].classList.remove('disabled');
+        document.getElementById('nav-my-account').children[0].classList.remove('disabled');
+    } else {
+        const currentPath = window.location.pathname;
+        if (currentPath !== '/') {
+            window.location.href = '/';
+        }
+
+        document.getElementById('loginBtn').classList.remove('hidden');
+        document.getElementById('logoutBtn').classList.add('hidden');
+
+        document.getElementById('nav-my-recipes').children[0].classList.add('disabled');
+        document.getElementById('nav-my-account').children[0].classList.add('disabled');
+    }
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+    await updateNavbar();
+
+    const loginModal = new bootstrap.Modal(document.getElementById('myModal'));
+
+    document.getElementById('loginBtn').addEventListener('click', () => {
+        loginModal.show();
+    });
+
+    document.getElementById('logoutBtn').addEventListener('click', async () => {
+        await apiLogout();
+
+        await updateNavbar();
+    });
+
     document.getElementById('loginForm').addEventListener('submit', async (e) => {
         e.preventDefault(); // Prevent the default form submission
 
         const username = document.getElementById('login-username').value;
         const password = document.getElementById('login-password').value;
 
-        try {
-            const response = await fetch('/api/login', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ username, password }),
-            });
-
-            const result = await response.json();
-
-            if (response.ok) {
-                console.log(`Welcome, ${result.username}!`);
-            } else {
-                console.log(`Error: ${result.message}`);
-            }
-        } catch (error) {
-            console.log('Something went wrong. Please try again.');
-            console.error(error);
-        }
+        await apiLogin(username, password);
+
+        loginModal.hide();
+        await updateNavbar();
     });
 });