@lexho111/plainblog 0.1.4 → 0.2.0

package/Blog.js

@@ -1,4 +1,5 @@
 import http from "http";
+import crypto from "crypto";
 import fs from "fs";
 import { URLSearchParams } from "url";
 import { Readable, Transform, Writable, pipeline } from "stream";
@@ -10,7 +11,7 @@ import DatabaseModel from "./model/DatabaseModel.js";
 import { fetchData, postData } from "./model/APIModel.js";
 import { save as saveToFile, load as loadFromFile } from "./model/fileModel.js";
 import { formatHTML, formatMarkdown, validate } from "./Formatter.js";
-import pkg from "./package.json" with { type: "json" };;
+import pkg from "./package.json" with { type: "json" };
 import path from "path";
 import { fileURLToPath } from "url";
 
@@ -29,6 +30,7 @@ export default class Blog {
       host: "localhost",
       dbname: "blog",
     };
+    this.sessions = new Set();
 
     const version = pkg.version;
     console.log(`version: ${version}`);
@@ -84,6 +86,53 @@ export default class Blog {
   setStyle(style) {
     this.styles = style;
   }
+  isAuthenticated(req) {
+      if (!req.headers.cookie) return false;
+      const params = new URLSearchParams(req.headers.cookie.replace(/; /g, "&"));
+      return this.sessions.has(params.get("session"));
+    }
+  
+    async handleLogin(req, res) {
+      const body$ = fromEvent(req, "data").pipe(
+        map((chunk) => chunk.toString()),
+        scan((acc, chunk) => acc + chunk, ""),
+        takeUntil(fromEvent(req, "end")),
+        last(),
+        defaultIfEmpty("")
+      );
+      const body = await firstValueFrom(body$);
+      const params = new URLSearchParams(body);
+  
+      if (params.get("password") === "admin") {
+        const id = crypto.randomUUID();
+        this.sessions.add(id);
+        res.writeHead(303, {
+          "Set-Cookie": `session=${id}; HttpOnly; Path=/`,
+          Location: "/",
+        });
+        res.end();
+      } else {
+        res.writeHead(401, { "Content-Type": "text/html" });
+        res.end(`<style>${this.styles}</style><h1>Unauthorized</h1><p>Please enter the password.<form method="POST">
+            <input type="password" name="password" placeholder="Password" />
+            <button style="margin: 2px;">Login</button></form>`);
+      }
+    }
+  
+    handleLogout(req, res) {
+      if (req.headers.cookie) {
+        const params = new URLSearchParams(req.headers.cookie.replace(/; /g, "&"));
+        const sessionId = params.get("session");
+        if (this.sessions.has(sessionId)) {
+          this.sessions.delete(sessionId);
+        }
+      }
+      res.writeHead(303, {
+        "Set-Cookie": "session=; HttpOnly; Path=/; Max-Age=0",
+        Location: "/",
+      });
+      res.end();
+    }
 
   /** initializes database */
   async init() {
@@ -159,8 +208,30 @@ export default class Blog {
       }
 
       // Web Page Routes
+      if (req.url === "/login") {
+        if (req.method === "GET") {
+          res.writeHead(200, { "Content-Type": "text/html" });
+          res.end(`<style>${this.styles}</style><h1>Login</h1><form method="POST">
+            <input type="password" name="password" placeholder="Password" />
+            <button style="margin: 2px;">Login</button></form>`);
+          return;
+        } else if (req.method === "POST") {
+          await this.handleLogin(req, res);
+          return;
+        }
+      }
+
+      if (req.url === "/logout") {
+        this.handleLogout(req, res);
+        return;
+      }
       // POST new article
       if (req.method === "POST" && req.url === "/") {
+        if (!this.isAuthenticated(req)) {
+          res.writeHead(403, { "Content-Type": "text/plain" });
+          res.end("Forbidden");
+          return;
+        }
         await this.#databaseModel.updateBlogTitle(this.title);
         await this.postArticle(req, res);
         // GET artciles
@@ -170,7 +241,16 @@ export default class Blog {
         // reload styles and scripts on (every) request
         //this.loadScripts(); this.loadStyles();
 
-        const html = await this.toHTML(); // render this blog to HTML
+        let loggedin = false;
+        if (!this.isAuthenticated(req)) { 
+          // login
+          loggedin = false;
+        } else {
+          // logout
+          loggedin = true;
+        }
+
+        const html = await this.toHTML(loggedin); // render this blog to HTML
         res.writeHead(200, { "Content-Type": "text/html; charset=UTF-8" });
         res.end(html);
       } else {
@@ -266,6 +346,11 @@ export default class Blog {
 
     // POST a new article
   } else if (req.method === "POST" && req.url === "/api/articles") {
+      if (!this.isAuthenticated(req)) {
+        res.writeHead(403, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ error: "Forbidden" }));
+        return;
+      }
       let body = "";
       req.on("data", (chunk) => (body += chunk.toString()));
       req.on("end", async () => {
@@ -318,12 +403,17 @@ export default class Blog {
   }
 
   /** render this blog content to valid html */
-  async toHTML() {
+  async toHTML(loggedin) {
     const data = {
       title: this.title,
       articles: this.articles,
+      loggedin,
+      login: ""
     };
 
+    if(loggedin) data.login = `<a href="/logout">logout</a>`;
+    else data.login = `<a href="/login">login</a>`;
+
     return new Promise((resolve, reject) => {
       let htmlResult = "";
       pipeline(

package/Formatter.js

@@ -3,6 +3,20 @@ export function formatHTML(data, script, style) {
   //export function formatHTML(data) {
   //const button = `<button type="button" onClick="fillWithContent();" style="margin: 4px;">generate random text</button>`;
   const button = "";
+  let form1 = "";
+  if (data.loggedin) {
+    form1 = `<form action="/" method="POST">
+        <h3>Add a New Article</h3>
+        <input type="text" id="title" name="title" placeholder="Article Title" required style="display: block; width: 300px; margin-bottom: 10px;">
+        <textarea id="content" name="content" placeholder="Article Content" required style="display: block; width: 300px; height: 100px; margin-bottom: 10px;"></textarea>
+        <button type="submit">Add Article</button>${button}
+        <script>
+        ${script}
+        </script>
+      </form>
+      <hr>`;
+  }
+  const form = form1;
   return `<!DOCTYPE html>
 <html lang="de">
   <head>
@@ -11,18 +25,12 @@ export function formatHTML(data, script, style) {
     <style>${style}</style>
   </head>
   <body>
+    <nav>
+  ${data.login}
+  </nav>
     <h1>${data.title}</h1>
     <div style="width: 500px;">
-      <form action="/" method="POST">
-        <h3>Add a New Article</h3>
-        <input type="text" id="title" name="title" placeholder="Article Title" required style="display: block; width: 300px; margin-bottom: 10px;">
-        <textarea id="content" name="content" placeholder="Article Content" required style="display: block; width: 300px; height: 100px; margin-bottom: 10px;"></textarea>
-        <button type="submit">Add Article</button>${button}
-        <script>
-        ${script}
-        </script>
-      </form>
-      <hr>
+    ${form}
       <section class="grid">
       ${data.articles
         .map(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexho111/plainblog",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "A tool for creating and serving a minimalist, single-page blog.",
   "main": "index.js",
   "type": "module",

package/styles.min.css

@@ -1,2 +1,2 @@
-.grid{border:0 solid #000;display:grid;gap:.25rem;grid-template-columns:1fr}.grid article{border:0 solid #ccc;border-radius:4px;min-width:0;overflow-wrap:break-word;padding:.25rem}body{background-color:#fdfdfd;font-family:Arial}
+.grid{border:0 solid #000;display:grid;gap:.25rem;grid-template-columns:1fr}.grid article{border:0 solid #ccc;border-radius:4px;min-width:0;overflow-wrap:break-word;padding:.25rem}nav a:visited{color:#3b40c1;text-decoration-color:#3b40c1}body{background-color:#fdfdfd;font-family:Arial}nav a{color:#3b40c1;font-size:20px;text-decoration:underline}
 /*# sourceMappingURL=styles.min.css.map */

package/styles.min.css.map

@@ -1 +1 @@
-{"version":3,"sources":["styles-compiled.css","styles.css"],"names":[],"mappings":"AAAA,MAIA,mBAAA,CAHA,YAAA,CAEA,UAAA,CADA,yBAGA,CACA,cAEA,mBAAA,CACA,iBAAA,CACA,WAAA,CACA,wBAAA,CAJA,cAKA,CCZA,KACA,wBAAA,CACA,iBACA","file":"styles.min.css","sourcesContent":[".grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 0.25rem;\n  border: 0px solid black;\n}\n.grid article {\n  padding: 0.25rem;\n  border: 0px solid #ccc;\n  border-radius: 4px;\n  min-width: 0; /* Allow grid items to shrink */\n  overflow-wrap: break-word; /* Break long words */\n}","body {\n  background-color: rgb(253, 253, 253);\n  font-family: Arial;\n}\n"]}
+{"version":3,"sources":["styles-compiled.css","styles.css"],"names":[],"mappings":"AAAA,MAIA,mBAAA,CAHA,YAAA,CAEA,UAAA,CADA,yBAGA,CACA,cAEA,mBAAA,CACA,iBAAA,CACA,WAAA,CACA,wBAAA,CAJA,cAKA,CAOA,cACA,aAAA,CACA,6BACA,CCtBA,KACA,wBAAA,CACA,iBACA,CAEA,MAEA,aAAA,CACA,cAAA,CAFA,yBAGA","file":"styles.min.css","sourcesContent":[".grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 0.25rem;\n  border: 0px solid black;\n}\n.grid article {\n  padding: 0.25rem;\n  border: 0px solid #ccc;\n  border-radius: 4px;\n  min-width: 0; /* Allow grid items to shrink */\n  overflow-wrap: break-word; /* Break long words */\n}\n\nnav a {\n  text-decoration: underline;\n  color: rgb(59, 64, 193);\n  font-size: 20px;\n}\nnav a:visited {\n  color: rgb(59, 64, 193);\n  text-decoration-color: rgb(59, 64, 193);\n}","body {\n  background-color: rgb(253, 253, 253);\n  font-family: Arial;\n}\n\nnav a {\n  text-decoration: underline;\n  color: rgb(59, 64, 193);\n  font-size: 20px;\n}\n"]}

package/test/server.test.js

@@ -57,19 +57,50 @@ describe("server test", () => {
     expect(responseData.title).toBe("My Blog");
   });
 
-  test("should post a new article via /api/articles", async () => {
+  test("should post a new article via /api/articles not logged in", async () => {
+    const content = "This is the content of the test article." + new Date();
     const newArticle = {
       title: "Test Title from Jest",
-      content: "This is the content of the test article.",
+      content: content,
     };
 
     // post new article to the blog
+    // WITHOUT Login
+
     const response = await fetch(`${apiBaseUrl}/api/articles`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(newArticle),
     });
 
+    expect(response.status).not.toBe(201);
+    const responseData = await response.json();
+    expect(responseData).not.toEqual(newArticle);
+
+    expect(await blog.toHTML()).not.toContain(newArticle.content); // does blog contain my new article?
+  });
+
+  test("should post a new article via /api/articles logged in", async () => {
+    const newArticle = {
+      title: "Test Title from Jest",
+      content: "This is the content of the test article.",
+    };
+
+    // post new article to the blog
+    // Login to get session cookie
+    const loginResponse = await fetch(`${apiBaseUrl}/login`, {
+      method: "POST",
+      body: "password=admin",
+      redirect: "manual",
+    });
+    const cookie = loginResponse.headers.get("set-cookie");
+
+    const response = await fetch(`${apiBaseUrl}/api/articles`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", Cookie: cookie },
+      body: JSON.stringify(newArticle),
+    });
+
     expect(response.status).toBe(201);
     const responseData = await response.json();
     expect(responseData).toEqual(newArticle);