Refactor navigation and form elements for improved usability and localization

Fixar inloggningen. Menyn fortfarande ett problem
2025-01-25 11:21:26 +01:00 · 2025-01-25 10:13:59 +01:00
10 changed files with 419 additions and 161 deletions
--- a/logger.js
+++ b/logger.js
@@ -14,85 +14,3 @@ const logger = createLogger({

 module.exports = logger;

-// filepath: /home/fredrik/dev/org-todo-pwa/routes/tasks.js
-const express = require('express');
-const fs = require('fs');
-const path = require('path');
-const logger = require('../logger');
-const auth = require('../middleware/auth');
-
-const router = express.Router();
-const dataDir = '/data';
-
-// Ensure the /data directory exists
-if (!fs.existsSync(dataDir)) {
-    fs.mkdirSync(dataDir, { recursive: true });
-}
-
-// Ensure the tags.json file exists
-const tagsFilePath = path.join(dataDir, 'tags.json');
-if (!fs.existsSync(tagsFilePath)) {
-    fs.writeFileSync(tagsFilePath, JSON.stringify([]));
-}
-
-// Protect the /add-task endpoint with authentication
-router.post('/add-task', auth, async (req, res) => {
-    const { subject, description, scheduled } = req.body;
-    const currentDateTime = new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '');
-
-    let orgFormattedData = `
-* TODO ${subject}
-  SCHEDULED: <${scheduled}>
-  :LOGBOOK:
-  - State "TODO" from "TODO" [${currentDateTime}]
-  :END:
-    `;
-
-    if (description) {
-        orgFormattedData = `
-* TODO ${subject}
-  ${description}
-  SCHEDULED: <${scheduled}>
-  :LOGBOOK:
-  - State "TODO" from "TODO" [${currentDateTime}]
-  :END:
-        `;
-    }
-
-    const filePath = path.join(dataDir, 'tasks.org');
-    try {
-        await fs.promises.appendFile(filePath, orgFormattedData);
-        res.send({ message: 'Task added successfully!' });
-    } catch (err) {
-        logger.error('Error writing to file:', err);
-        res.status(500).send('Error writing to file.');
-    }
-});
-
-// Endpoint to save tags
-router.post('/save-tags', auth, async (req, res) => {
-    const { tags } = req.body;
-    const filePath = path.join(dataDir, 'tags.json');
-    try {
-        await fs.promises.writeFile(filePath, JSON.stringify(tags));
-        res.send({ message: 'Tags saved successfully!' });
-    } catch (err) {
-        logger.error('Error saving tags:', err);
-        res.status(500).send('Error saving tags.');
-    }
-});
-
-// Endpoint to retrieve tags
-router.get('/get-tags', auth, async (req, res) => {
-    const filePath = path.join(dataDir, 'tags.json');
-    try {
-        const data = await fs.promises.readFile(filePath);
-        const tags = JSON.parse(data);
-        res.send(tags);
-    } catch (err) {
-        logger.error('Error retrieving tags:', err);
-        res.status(500).send('Error retrieving tags.');
-    }
-});
-
-module.exports = router;
--- a/middleware/auth.js
+++ b/middleware/auth.js
@@ -1,3 +1,5 @@
+const basicAuth = require('basic-auth');
+
 const auth = (req, res, next) => {
    if (req.session && req.session.user) {
        return next();
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,13 +11,38 @@
      "dependencies": {
        "basic-auth": "^2.0.1",
        "body-parser": "^1.20.3",
+        "cookie-parser": "^1.4.7",
        "debug": "^4.4.0",
        "dotenv": "^16.4.7",
        "express": "^4.21.2",
        "express-session": "^1.18.1",
-        "fs": "^0.0.1-security"
+        "fs": "^0.0.1-security",
+        "winston": "^3.17.0"
      }
    },
+    "node_modules/@colors/colors": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz",
+      "integrity": "sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==",
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/@dabh/diagnostics": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.3.tgz",
+      "integrity": "sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==",
+      "dependencies": {
+        "colorspace": "1.1.x",
+        "enabled": "2.0.x",
+        "kuler": "^2.0.0"
+      }
+    },
+    "node_modules/@types/triple-beam": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz",
+      "integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw=="
+    },
    "node_modules/accepts": {
      "version": "1.3.8",
      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -35,6 +60,11 @@
      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA=="
+    },
    "node_modules/basic-auth": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
@@ -122,6 +152,46 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/colorspace": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz",
+      "integrity": "sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==",
+      "dependencies": {
+        "color": "^3.1.3",
+        "text-hex": "1.0.x"
+      }
+    },
    "node_modules/content-disposition": {
      "version": "0.5.4",
      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -149,6 +219,26 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/cookie-parser": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.7.tgz",
+      "integrity": "sha512-nGUvgXnotP3BsjiLX2ypbQnWoGUPIIfHQNZkkC668ntrzGWEZVW70HDEB1qnNGMicPje6EttlIgzo51YSwNQGw==",
+      "dependencies": {
+        "cookie": "0.7.2",
+        "cookie-signature": "1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/cookie-parser/node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/cookie-signature": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
@@ -216,6 +306,11 @@
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
    },
+    "node_modules/enabled": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/enabled/-/enabled-2.0.0.tgz",
+      "integrity": "sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ=="
+    },
    "node_modules/encodeurl": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
@@ -366,6 +461,11 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
    },
+    "node_modules/fecha": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz",
+      "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw=="
+    },
    "node_modules/finalhandler": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
@@ -396,6 +496,11 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
    },
+    "node_modules/fn.name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz",
+      "integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw=="
+    },
    "node_modules/forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -532,6 +637,43 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/kuler": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
+      "integrity": "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A=="
+    },
+    "node_modules/logform": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/logform/-/logform-2.7.0.tgz",
+      "integrity": "sha512-TFYA4jnP7PVbmlBIfhlSe+WKxs9dklXMTEGcBCIvLhE/Tn3H6Gk1norupVW7m5Cnd4bLcr08AytbyV/xj7f/kQ==",
+      "dependencies": {
+        "@colors/colors": "1.6.0",
+        "@types/triple-beam": "^1.3.2",
+        "fecha": "^4.2.0",
+        "ms": "^2.1.1",
+        "safe-stable-stringify": "^2.3.1",
+        "triple-beam": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
    "node_modules/math-intrinsics": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -637,6 +779,14 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/one-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/one-time/-/one-time-1.0.0.tgz",
+      "integrity": "sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==",
+      "dependencies": {
+        "fn.name": "1.x.x"
+      }
+    },
    "node_modules/parseurl": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -706,6 +856,19 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/safe-buffer": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -725,6 +888,14 @@
        }
      ]
    },
+    "node_modules/safe-stable-stringify": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz",
+      "integrity": "sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -861,6 +1032,22 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/stack-trace": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
+      "integrity": "sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==",
+      "engines": {
+        "node": "*"
+      }
+    },
    "node_modules/statuses": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -869,6 +1056,19 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/text-hex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
+      "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg=="
+    },
    "node_modules/toidentifier": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -877,6 +1077,14 @@
        "node": ">=0.6"
      }
    },
+    "node_modules/triple-beam": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.4.1.tgz",
+      "integrity": "sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==",
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
    "node_modules/type-is": {
      "version": "1.6.18",
      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -908,6 +1116,11 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
    "node_modules/utils-merge": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -923,6 +1136,40 @@
      "engines": {
        "node": ">= 0.8"
      }
+    },
+    "node_modules/winston": {
+      "version": "3.17.0",
+      "resolved": "https://registry.npmjs.org/winston/-/winston-3.17.0.tgz",
+      "integrity": "sha512-DLiFIXYC5fMPxaRg832S6F5mJYvePtmO5G9v9IgUFPhXm9/GkXarH/TUrBAVzhTCzAj9anE/+GjrgXp/54nOgw==",
+      "dependencies": {
+        "@colors/colors": "^1.6.0",
+        "@dabh/diagnostics": "^2.0.2",
+        "async": "^3.2.3",
+        "is-stream": "^2.0.0",
+        "logform": "^2.7.0",
+        "one-time": "^1.0.0",
+        "readable-stream": "^3.4.0",
+        "safe-stable-stringify": "^2.3.1",
+        "stack-trace": "0.0.x",
+        "triple-beam": "^1.3.0",
+        "winston-transport": "^4.9.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
+    "node_modules/winston-transport": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/winston-transport/-/winston-transport-4.9.0.tgz",
+      "integrity": "sha512-8drMJ4rkgaPo1Me4zD/3WLfI/zPdA9o2IipKODunnGDcuqbHwjsbB79ylv04LCGGzU0xQ6vTznOMpQGaLhhm6A==",
+      "dependencies": {
+        "logform": "^2.7.0",
+        "readable-stream": "^3.6.2",
+        "triple-beam": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -12,10 +12,12 @@
  "dependencies": {
    "basic-auth": "^2.0.1",
    "body-parser": "^1.20.3",
+    "cookie-parser": "^1.4.7",
    "debug": "^4.4.0",
    "dotenv": "^16.4.7",
    "express": "^4.21.2",
    "express-session": "^1.18.1",
-    "fs": "^0.0.1-security"
+    "fs": "^0.0.1-security",
+    "winston": "^3.17.0"
  }
 }
--- a/public/app.js
+++ b/public/app.js
@@ -15,6 +15,23 @@ 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 sidenav = document.querySelector('.sidenav');
+
+    if (!loginForm || !loginContainer || !appContainer || !loginMessage || !logoutButton || !taskForm || !sidenav) {
+        console.error('One or more elements are missing in the DOM');
+        return;
+    }
+
+    // Initialize Materialize components
+    M.Sidenav.init(sidenav);
+    M.Datepicker.init(document.querySelectorAll('.datepicker'), {
+        format: 'yyyy-mm-dd',
+        defaultDate: new Date(),
+        setDefaultDate: true,
+        firstDay: 1
+    });

    // Check if user is already logged in
    fetch('/check-session')
@@ -56,7 +73,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,34 +121,44 @@ 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!";
-        });
-    });
-
-    // Set tomorrow's date as the default for the date input
-    const today = new Date();
-    const tomorrow = new Date(today);
-    tomorrow.setDate(today.getDate() + 1);
-    const tomorrowString = tomorrow.toISOString().split('T')[0];
-    document.getElementById('scheduled').value = tomorrowString;
-
-    // Initialize flatpickr with Swedish locale and Monday as the first day of the week
-    flatpickr("#scheduled", {
-        weekNumbers: true, // Show week numbers
-        firstDayOfWeek: 1 // Start weeks on Monday
+        // 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;
+                taskForm.reset(); // Reset the form after saving the task
+            } 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!";
+                taskForm.reset(); // Reset the form after saving the task
+            } catch (error) {
+                document.getElementById('responseMessage').textContent = "Error saving task offline!";
+                console.error('Error saving task offline:', error);
+            }
+        }
    });

    // Load tags from server and initialize autocomplete
--- a/public/index.html
+++ b/public/index.html
@@ -17,12 +17,12 @@
        <h1 class="center-align">Logga in</h1>
        <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="Användarnamn" required>
+                <label for="username">Användarnamn</label>
            </div>
            <div class="input-field">
-                <label for="password">Lösenord:</label>
-                <input type="password" id="password" required>
+                <input type="password" id="password" placeholder="Lösenord" required>
+                <label for="password">Lösenord</label>
            </div>
            <button class="btn waves-effect waves-light" type="submit">Login</button>
        </form>
@@ -31,43 +31,43 @@

    <div id="appContainer" class="container" style="display:none;">
        <h1 class="center-align">TODO</h1>
+        <nav style="display:none;">
+            <div class="nav-wrapper">
+                <a href="#" class="brand-logo">Menu</a>
+                <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
+                <ul class="right hide-on-med-and-down">
+                    <li><a id="logoutButton" class="hide-on-med-and-down">Logout</a></li>
+                </ul>
+            </div>
+        </nav>
+
+        <ul class="sidenav" id="mobile-demo">
+            <li><a id="logoutButton">Logout</a></li>
+        </ul>
+
        <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="Uppgift" required autocomplete="off">
+                <label for="subject">Uppgift</label>
            </div>
-
            <div class="input-field">
-                <label for="description">Beskrivning:</label>
-                <textarea id="description" class="materialize-textarea"></textarea>
+                <textarea id="description" class="materialize-textarea" placeholder="Beskrivning"></textarea>
+                <label for="description">Beskrivning</label>
            </div>
-
            <div class="input-field">
-                <label for="scheduled">Datum:</label>
-                <input type="date" id="scheduled" lang="sv-SE" required>
+                <input type="text" id="scheduled" class="datepicker" required>
+                <label for="scheduled">Planerat datum</label>
            </div>
-
            <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" placeholder="Taggar">
+                <label for="tags">Taggar</label>
            </div>
-
-            <button class="btn waves-effect waves-light" type="submit">Spara</button>
+            <button class="btn waves-effect waves-light" type="submit">Save Task</button>
+            <p id="responseMessage"></p>
        </form>
-        <p id="responseMessage" class="center-align"></p>
    </div>

-    <script src="app.js"></script>
-    <script>
-      // Set today's date as the default for the date input
-      const today = new Date().toISOString().split('T')[0];
-      document.getElementById('scheduled').value = today;
-      // Initialize flatpickr with Swedish locale and Monday as the first day of the week
-      flatpickr("#scheduled", {
-          weekNumbers: true, // Show week numbers
-          firstDayOfWeek: 1 // Start weeks on Monday
-      });
-    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+    <script src="app.js"></script>
 </body>
 </html>
--- a/public/style.css
+++ b/public/style.css
@@ -1,11 +1,5 @@
 body {
    font-family: Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-    background-color: #f4f4f9;
 }

 .container {
@@ -22,5 +16,43 @@ h1 {

 #responseMessage {
    text-align: center;
-    color: green;
+    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;
+}
--- a/routes/auth.js
+++ b/routes/auth.js
@@ -20,8 +20,17 @@ router.post('/logout', (req, res) => {
        if (err) {
            return res.status(500).send('Error logging out');
        }
+        res.clearCookie('connect.sid');
        res.status(200).send('Logout successful');
    });
 });

+router.get('/check-session', (req, res) => {
+    if (req.session.user) {
+        res.json({ loggedIn: true });
+    } else {
+        res.json({ loggedIn: false });
+    }
+});
+
 module.exports = router;
--- a/routes/tasks.js
+++ b/routes/tasks.js
@@ -1,8 +1,8 @@
 const express = require('express');
 const fs = require('fs');
 const path = require('path');
-const debug = require('debug')('app');
 const auth = require('../middleware/auth');
+const logger = require('../logger');

 const router = express.Router();
 const dataDir = '/data';
@@ -28,7 +28,8 @@ router.post('/add-task', auth, async (req, res) => {
  SCHEDULED: <${scheduled}>
  :LOGBOOK:
  - State "TODO" from "TODO" [${currentDateTime}]
-  :END:`;
+  :END:
+    `;

    if (description) {
        orgFormattedData = `
@@ -37,7 +38,8 @@ router.post('/add-task', auth, async (req, res) => {
  SCHEDULED: <${scheduled}>
  :LOGBOOK:
  - State "TODO" from "TODO" [${currentDateTime}]
-  :END:`;
+  :END:
+        `;
    }

    const filePath = path.join(dataDir, 'tasks.org');
@@ -45,7 +47,7 @@ router.post('/add-task', auth, async (req, res) => {
        await fs.promises.appendFile(filePath, orgFormattedData);
        res.send({ message: 'Task added successfully!' });
    } catch (err) {
-        debug('Error writing to file:', err);
+        logger.error('Error writing to file:', err);
        res.status(500).send('Error writing to file.');
    }
 });
@@ -58,7 +60,7 @@ router.post('/save-tags', auth, async (req, res) => {
        await fs.promises.writeFile(filePath, JSON.stringify(tags));
        res.send({ message: 'Tags saved successfully!' });
    } catch (err) {
-        debug('Error saving tags:', err);
+        logger.error('Error saving tags:', err);
        res.status(500).send('Error saving tags.');
    }
 });
@@ -67,12 +69,12 @@ router.post('/save-tags', auth, async (req, res) => {
 router.get('/get-tags', auth, async (req, res) => {
    const filePath = path.join(dataDir, 'tags.json');
    try {
-        const data = await fs.promises.readFile(filePath);
+        const data = await fs.promises.readFile(filePath, 'utf-8');
        const tags = JSON.parse(data);
-        res.send(tags);
+        res.json(tags);
    } catch (err) {
-        debug('Error retrieving tags:', err);
-        res.status(500).send('Error retrieving tags.');
+        logger.error('Error retrieving tags:', err);
+        res.status(500).json({ error: 'Error retrieving tags' });
    }
 });

--- a/server.js
+++ b/server.js
@@ -2,26 +2,29 @@ require('dotenv').config();
 const express = require('express');
 const bodyParser = require('body-parser');
 const session = require('express-session');
+const cookieParser = require('cookie-parser');
 const debug = require('debug')('app');
 const tasksRouter = require('./routes/tasks');
 const authRouter = require('./routes/auth');
+const authMiddleware = require('./middleware/auth');

 const app = express();
 const port = 3044;

 app.use(bodyParser.json());
+app.use(cookieParser());
 app.use(express.static('public'));

 // Configure session middleware
 app.use(session({
    secret: process.env.SESSION_SECRET || 'default_secret', // Use a strong secret in production
    resave: false,
-    saveUninitialized: true,
-    cookie: { secure: false } // Set to true if using HTTPS
+    saveUninitialized: false,
+    cookie: { secure: false, maxAge: 24 * 60 * 60 * 1000 } // 1 day
 }));

-app.use('/', tasksRouter);
 app.use('/', authRouter);
+app.use('/', authMiddleware, tasksRouter);

 app.listen(port, () => {
    debug(`Server running at http://localhost:${port}`);
Author	SHA1	Message	Date
Fredrik Wahlberg	1122de442b	Refactor navigation and form elements for improved usability and localization	2025-01-25 11:21:26 +01:00
Fredrik Wahlberg	09772d859d	Fixar inloggningen. Menyn fortfarande ett problem	2025-01-25 10:13:59 +01:00