Refactor navigation and form elements for improved usability and localization

Reviewed-on: #17

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "files.exclude": {
+        "**/*.png": true,
+        "**/*.jpg": true,
+        "**/*.gif": true,
+        "**/*.svg": true,
+        "**/*.ico": true
+        }
+}

docker-compose.yml

@@ -15,7 +15,7 @@ services:
       - AUTH_PASSWORD=apa
     healthcheck:
       test: ["CMD", "curl", "-f", "http://localhost:3044"]
-      interval: 1m30s
+      interval: 5m
       timeout: 10s
       retries: 3
     deploy:

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;

middleware/auth.js

@@ -1,15 +1,10 @@
 const basicAuth = require('basic-auth');
 
 const auth = (req, res, next) => {
-    const user = basicAuth(req);
+    if (req.session && req.session.user) {
-    const username = process.env.AUTH_USERNAME; // Use environment variables
-    const password = process.env.AUTH_PASSWORD; // Use environment variables
-
-    if (user && user.name === username && user.pass === password) {
         return next();
     } else {
-        res.set('WWW-Authenticate', 'Basic realm="401"');
+        res.status(401).send('Authentication required.');
-        return res.status(401).send('Authentication required.');
     }
 };
 

package-lock.json

@@ -11,12 +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",
-        "fs": "^0.0.1-security"
+        "express-session": "^1.18.1",
+        "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",
@@ -34,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",
@@ -121,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",
@@ -148,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",
@@ -215,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",
@@ -308,6 +404,50 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/express-session": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.18.1.tgz",
+      "integrity": "sha512-a5mtTqEaZvBCL9A9aqkrtfz+3SMDhOVUnjafjo+s7A9Txkq+SVX2DLvSp1Zrv4uCXa3lMSK3viWnh9Gg07PBUA==",
+      "dependencies": {
+        "cookie": "0.7.2",
+        "cookie-signature": "1.0.7",
+        "debug": "2.6.9",
+        "depd": "~2.0.0",
+        "on-headers": "~1.0.2",
+        "parseurl": "~1.3.3",
+        "safe-buffer": "5.2.1",
+        "uid-safe": "~2.1.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/express-session/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/express-session/node_modules/cookie-signature": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
+      "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA=="
+    },
+    "node_modules/express-session/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express-session/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
     "node_modules/express/node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -321,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",
@@ -351,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",
@@ -487,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",
@@ -584,6 +771,22 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "engines": {
+        "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",
@@ -623,6 +826,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/random-bytes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
+      "integrity": "sha512-iv7LhNVO047HzYR3InF6pUcUsPQiHTM1Qal51DcGSuZFBil1aBBWG5eHPNek7bvILMaYJ/8RU1e8w1AMdHmLQQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -645,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",
@@ -664,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",
@@ -800,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",
@@ -808,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",
@@ -816,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",
@@ -828,6 +1097,17 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/uid-safe": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
+      "integrity": "sha512-KPHm4VL5dDXKz01UuEd88Df+KzynaohSL9fBh096KWAxSKZQDI2uBrVqtvRM4rwrIrRRKsdLNML/lnaaVSRioA==",
+      "dependencies": {
+        "random-bytes": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -836,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",
@@ -851,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"
+      }
     }
   }
 }

package.json

@@ -12,9 +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",
-    "fs": "^0.0.1-security"
+    "express-session": "^1.18.1",
+    "fs": "^0.0.1-security",
+    "winston": "^3.17.0"
   }
 }

public/app.js

@@ -15,13 +15,34 @@ 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
-    if (sessionStorage.getItem('loggedIn') === 'true') {
+    fetch('/check-session')
+        .then(response => response.json())
+        .then(data => {
+            if (data.loggedIn) {
                 loginContainer.style.display = 'none';
                 appContainer.style.display = 'block';
                 loadTags();
             }
+        });
 
     loginForm.addEventListener('submit', function(e) {
         e.preventDefault();
@@ -29,8 +50,16 @@ document.addEventListener('DOMContentLoaded', function() {
         const username = document.getElementById('username').value;
         const password = document.getElementById('password').value;
 
-        // Simple authentication check (replace with your own logic)
+        // Send credentials to the server for validation
-        if (username === 'fredrik' && password === 'apa') {
+        fetch('/login', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Basic ' + btoa(username + ':' + password)
+            }
+        })
+        .then(response => {
+            if (response.ok) {
                 sessionStorage.setItem('loggedIn', 'true');
                 loginContainer.style.display = 'none';
                 appContainer.style.display = 'block';
@@ -38,9 +67,29 @@ document.addEventListener('DOMContentLoaded', function() {
             } else {
                 loginMessage.textContent = 'Invalid username or password';
             }
+        })
+        .catch(error => {
+            loginMessage.textContent = 'Error logging in';
+        });
     });
 
-    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
@@ -52,7 +101,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
         // Structure data for Org mode
         const taskData = {
-            subject: `${subject} :${tags}:`,
+            subject: tags ? `${subject} :${tags}:` : subject,
             description,
             scheduled
         };
@@ -72,34 +121,44 @@ document.addEventListener('DOMContentLoaded', function() {
             loadTags(); // Force refresh tags after saving
         });
 
-        // Send data to backend using fetch
+        // Save task to server or IndexedDB if offline
-        fetch('/add-task', {
+        if (navigator.onLine) {
+            try {
+                const response = await fetch('/add-task', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify(taskData)
-        })
+                });
-        .then(response => response.json())
+                const data = await response.json();
-        .then(data => {
                 document.getElementById('responseMessage').textContent = data.message;
-        })
+                taskForm.reset(); // Reset the form after saving the task
-        .catch(error => {
+            } 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!";
-    // Set tomorrow's date as the default for the date input
+                taskForm.reset(); // Reset the form after saving the task
-    const today = new Date();
+            } catch (error) {
-    const tomorrow = new Date(today);
+                document.getElementById('responseMessage').textContent = "Error saving task offline!";
-    tomorrow.setDate(today.getDate() + 1);
+                console.error('Error saving task offline:', error);
-    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
     });
 
     // Load tags from server and initialize autocomplete

public/index.html

@@ -14,15 +14,15 @@
 </head>
 <body>
     <div id="loginContainer" class="container">
-        <h1 class="center-align">Login</h1>
+        <h1 class="center-align">Logga in</h1>
         <form id="loginForm">
             <div class="input-field">
-                <label for="username">Username:</label>
+                <input type="text" id="username" placeholder="Användarnamn" required>
-                <input type="text" id="username" required>
+                <label for="username">Användarnamn</label>
             </div>
             <div class="input-field">
-                <label for="password">Password:</label>
+                <input type="password" id="password" placeholder="Lösenord" required>
-                <input type="password" id="password" 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" placeholder="Uppgift" required autocomplete="off">
-                <input type="text" id="subject" required>
+                <label for="subject">Uppgift</label>
             </div>
-
             <div class="input-field">
-                <label for="description">Beskrivning:</label>
+                <textarea id="description" class="materialize-textarea" placeholder="Beskrivning"></textarea>
-                <textarea id="description" class="materialize-textarea"></textarea>
+                <label for="description">Beskrivning</label>
             </div>
-
             <div class="input-field">
-                <label for="scheduled">Datum:</label>
+                <input type="text" id="scheduled" class="datepicker" required>
-                <input type="date" id="scheduled" lang="sv-SE" required>
+                <label for="scheduled">Planerat datum</label>
             </div>
-
             <div class="input-field">
-                <label for="tags">Tags (separated by commas):</label>
+                <input type="text" id="tags" placeholder="Taggar">
-                <input type="text" id="tags" class="autocomplete">
+                <label for="tags">Taggar</label>
             </div>
-
+            <button class="btn waves-effect waves-light" type="submit">Save Task</button>
-            <button class="btn waves-effect waves-light" type="submit">Spara</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>

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;
 }

routes/auth.js

@@ -0,0 +1,36 @@
+const express = require('express');
+const basicAuth = require('basic-auth');
+const router = express.Router();
+
+router.post('/login', (req, res) => {
+    const user = basicAuth(req);
+    const username = process.env.AUTH_USERNAME;
+    const password = process.env.AUTH_PASSWORD;
+
+    if (user && user.name === username && user.pass === password) {
+        req.session.user = user.name;
+        res.status(200).send('Login successful');
+    } else {
+        res.status(401).send('Authentication required');
+    }
+});
+
+router.post('/logout', (req, res) => {
+    req.session.destroy((err) => {
+        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;

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);
+        logger.error('Error retrieving tags:', err);
-        res.status(500).send('Error retrieving tags.');
+        res.status(500).json({ error: 'Error retrieving tags' });
     }
 });
 

server.js

@@ -1,15 +1,30 @@
 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'));
-app.use('/', tasksRouter);
+
+// Configure session middleware
+app.use(session({
+    secret: process.env.SESSION_SECRET || 'default_secret', // Use a strong secret in production
+    resave: false,
+    saveUninitialized: false,
+    cookie: { secure: false, maxAge: 24 * 60 * 60 * 1000 } // 1 day
+}));
+
+app.use('/', authRouter);
+app.use('/', authMiddleware, tasksRouter);
 
 app.listen(port, () => {
     debug(`Server running at http://localhost:${port}`);