Fixar inloggningen. Menyn fortfarande ett problem

public/app.js

@@ -15,6 +15,20 @@ document.addEventListener('DOMContentLoaded', function() {
     const loginContainer = document.getElementById('loginContainer');
     const appContainer = document.getElementById('appContainer');
     const loginMessage = document.getElementById('loginMessage');
+    const logoutButton = document.getElementById('logoutButton');
+    const taskForm = document.getElementById('taskForm');
+    const hamburgerButton = document.getElementById('hamburgerButton');
+    const menuContent = document.getElementById('menuContent');
+
+    if (!loginForm || !loginContainer || !appContainer || !loginMessage || !logoutButton || !taskForm || !hamburgerButton || !menuContent) {
+        console.error('One or more elements are missing in the DOM');
+        return;
+    }
+
+    // Toggle the hamburger menu
+    hamburgerButton.addEventListener('click', function() {
+        menuContent.classList.toggle('show');
+    });
 
     // Check if user is already logged in
     fetch('/check-session')
@@ -56,7 +70,23 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
 
-    document.getElementById('taskForm').addEventListener('submit', function(e) {
+    logoutButton.addEventListener('click', function() {
+        fetch('/logout', {
+            method: 'POST'
+        })
+        .then(response => {
+            if (response.ok) {
+                sessionStorage.removeItem('loggedIn');
+                loginContainer.style.display = 'block';
+                appContainer.style.display = 'none';
+            }
+        })
+        .catch(error => {
+            console.error('Error logging out:', error);
+        });
+    });
+
+    taskForm.addEventListener('submit', async function(e) {
         e.preventDefault();
 
         // Get form values
@@ -88,21 +118,42 @@ document.addEventListener('DOMContentLoaded', function() {
             loadTags(); // Force refresh tags after saving
         });
 
-        // Send data to backend using fetch
-        fetch('/add-task', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(taskData)
-        })
-        .then(response => response.json())
-        .then(data => {
-            document.getElementById('responseMessage').textContent = data.message;
-        })
-        .catch(error => {
-            document.getElementById('responseMessage').textContent = "Error saving task!";
-        });
+        // Save task to server or IndexedDB if offline
+        if (navigator.onLine) {
+            try {
+                const response = await fetch('/add-task', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(taskData)
+                });
+                const data = await response.json();
+                document.getElementById('responseMessage').textContent = data.message;
+            } catch (error) {
+                if (error.status === 401) {
+                    sessionStorage.removeItem('loggedIn');
+                    loginContainer.style.display = 'block';
+                    appContainer.style.display = 'none';
+                } else {
+                    document.getElementById('responseMessage').textContent = "Error saving task!";
+                }
+            }
+        } else {
+            try {
+                // Save task to IndexedDB
+                const db = await idb.openDB('org-todo-pwa', 1, {
+                    upgrade(db) {
+                        db.createObjectStore('tasks', { keyPath: 'id', autoIncrement: true });
+                    }
+                });
+                await db.add('tasks', taskData);
+                document.getElementById('responseMessage').textContent = "Task saved offline!";
+            } catch (error) {
+                document.getElementById('responseMessage').textContent = "Error saving task offline!";
+                console.error('Error saving task offline:', error);
+            }
+        }
     });
 
     // Set tomorrow's date as the default for the date input

public/index.html

@@ -18,11 +18,11 @@
         <form id="loginForm">
             <div class="input-field">
                 <label for="username">Användarnamn:</label>
-                <input type="text" id="username" required>
+                <input type="text" id="username" placeholder="Username" required>
             </div>
             <div class="input-field">
                 <label for="password">Lösenord:</label>
-                <input type="password" id="password" required>
+                <input type="password" id="password" placeholder="Password" required>
             </div>
             <button class="btn waves-effect waves-light" type="submit">Login</button>
         </form>
@@ -31,15 +31,21 @@
 
     <div id="appContainer" class="container" style="display:none;">
         <h1 class="center-align">TODO</h1>
+        <div class="menu">
+            <button class="hamburger" id="hamburgerButton">&#9776;</button>
+            <div class="menu-content" id="menuContent">
+                <button id="logoutButton" class="btn waves-effect waves-light">Logout</button>
+            </div>
+        </div>
         <form id="taskForm">
             <div class="input-field">
                 <label for="subject">Uppgift:</label>
-                <input type="text" id="subject" required autocomplete="off">
+                <input type="text" id="subject" placeholder="Subject" required autocomplete="off">
             </div>
 
             <div class="input-field">
                 <label for="description">Beskrivning:</label>
-                <textarea id="description" class="materialize-textarea"></textarea>
+                <textarea id="description" class="materialize-textarea" placeholder="Description"></textarea>
             </div>
 
             <div class="input-field">
@@ -49,7 +55,7 @@
 
             <div class="input-field">
                 <label for="tags">Taggar (separera med komma):</label>
-                <input type="text" id="tags" class="autocomplete" autocomplete="off">
+                <input type="text" id="tags" class="autocomplete" placeholder="Tags" autocomplete="off">
             </div>
 
             <button class="btn waves-effect waves-light" type="submit">Spara</button>

public/style.css

@@ -24,3 +24,42 @@ h1 {
     text-align: center;
     color: green;
 }
+
+.menu {
+    position: relative;
+    display: inline-block;
+}
+
+.hamburger {
+    font-size: 24px;
+    cursor: pointer;
+    background: none;
+    border: none;
+}
+
+.menu-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.menu-content button {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    background: none;
+    border: none;
+    width: 100%;
+    text-align: left;
+}
+
+.menu-content button:hover {
+    background-color: #f1f1f1;
+}
+
+.menu.show .menu-content {
+    display: block;
+}