Make frontend js-less

The frontend should work without having JS enabled. JS will enhance the experience but should under no circumstance be necessary. To achieve this, the entire entry system has been turned into a form that posts its values to a new backend path specifically made to take form responses. Instead of returning an API response, it also redirects the browser to either the voting page on successful creation or the frontpage with a bunch of get parameters that are used to prefill the form in a server-side rendering process. An error parameter is also given but there is no way to display said error for now.
2024-11-21 20:47:59 +01:00 · 2022-01-01 04:13:24 +01:00 · 2022-01-01 04:13:24 +01:00 · 9fa3eabad1
commit 9fa3eabad1
parent 862fe9d2f2
6 changed files with 138 additions and 59 deletions
--- a/frontend/html/index.html
+++ b/frontend/html/index.html
@ -17,33 +17,27 @@
    <main>
        <section class="notepad">
            <div class="notepad-border"></div>
-            <section class="poll-title">
-                <input id="poll-title" type="text" maxlength="300" placeholder="Enter your question here">
-            </section>
-            <section id="poll-options" class="poll-options">
-                <div class="poll-option">
-                    <input type="text" maxlength="300" placeholder="Enter your option here">
-                </div>
-                <div class="poll-option">
-                    <input type="text" maxlength="300" placeholder="Enter your option here">
-                </div>
-                <div class="poll-option">
-                    <input type="text" maxlength="300" placeholder="Enter your option here">
-                </div>
-            </section>
-            <section class="poll-footer">
-                <select id="dupe-check">
-                    <option value="ip" selected>IP-based duplication checking</option>
-                    <option value="cookie">Cookie-based duplication checking</option>
-                    <option value="none">No duplication checking</option>
-                </select>
-                <br>
-                <label>
-                    <input type="checkbox" id="multiple">
-                    <span>Allow multiple answers to be selected</span>
-                </label>
-                <br>
-                <button id="create-poll">Create poll</button>
+            <form action="{{ BACKEND_BASE_PATH }}/_backend/poll-form" method="POST">
+                <section class="poll-title">
+                    <input id="poll-title" name="poll-title" type="text" maxlength="300" placeholder="Enter your question here" value="{{ FORM_TITLE }}">
+                </section>
+                <section id="poll-options" class="poll-options">
+                    {{ FORM_OPTION_DIVS }}
+                </section>
+                <section class="poll-footer">
+                    <select id="dupe-check" name="dupe-check">
+                        <option value="ip" {{ FORM_DUPECHECK_IP }}>IP-based duplication checking</option>
+                        <option value="cookie" {{ FORM_DUPECHECK_COOKIE }}>Cookie-based duplication checking</option>
+                        <option value="none" {{ FORM_DUPECHECK_NONE }}>No duplication checking</option>
+                    </select>
+                    <br>
+                    <label>
+                        <input type="checkbox" name="multi-select" {{ FORM_MULTI_SELECT }} id="multiple">
+                        <span>Allow multiple answers to be selected</span>
+                    </label>
+                    <br>
+                    <input type="submit" name="submit" value="Create poll"  id="create-poll">
+                </form>
            </section>
        </section>
    </main>
--- a/frontend/static/css/main.css
+++ b/frontend/static/css/main.css
@ -88,6 +88,7 @@ main .notepad-border {
 }
 /* #endregion notepad */
 /* #region notepad-footer */
+main .notepad .poll-footer input[type="submit"],
 main .notepad .poll-footer button {
    padding: 0 30px;
    height: 50px;
@ -100,6 +101,7 @@ main .notepad .poll-footer button {
    color: #fff;
    margin-right: 5px;
 }
+main .notepad .poll-footer input[type="submit"]:hover,
 main .notepad .poll-footer button:hover {
    background-color: #b6b6b6;
 }
--- a/src/Poll.ts
+++ b/src/Poll.ts
@ -1,9 +1,9 @@
 "use strict";
-
+type DupeCheckMode = "none" | "ip" | "cookie";
 type BasePoll = {
    id: string,
    title: string,
-    dupeCheckMode: "none" | "ip" | "cookie",
+    dupeCheckMode: DupeCheckMode,
    multiSelect: boolean,
    captcha: boolean,
    creationTime: Date,
@ -30,5 +30,6 @@ type PollResult = {
 export {
    FrontendPoll,
    BackendPoll,
-    PollResult
+    PollResult,
+    DupeCheckMode
 };
--- a/src/backend.ts
+++ b/src/backend.ts
@ -4,7 +4,7 @@ import { Router } from "express";
 import persist from "node-persist";
 import { program } from "commander";
 import { resolve } from "path";
-import { BackendPoll as Poll } from "./Poll";
+import { BackendPoll as Poll, DupeCheckMode } from "./Poll";

 function randomString(length = 10, charset = "abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789") {
    let result = "";
@ -60,39 +60,96 @@ export default async function init(router: Router): Promise<void> {
        }
    });

+    async function createPoll(pollData: {
+        title: string,
+        options: string[],
+        dupeCheckMode: DupeCheckMode,
+        multiSelect: boolean,
+        captcha: boolean
+    }): Promise<Poll | string> {
+        if (!Array.isArray(pollData.options) || pollData.options.filter(i => i).length < 2)
+            return "Options must be an array and have at least 2 entries";
+
+        let id = randomString(8);
+        while (await polls.getItem(id)) id = randomString(6);
+        await polls.setItem(id, {});
+
+        const dupeCheckMode = (
+            ["none", "ip", "cookie"].includes((pollData.dupeCheckMode || "").toLowerCase()) ? 
+            (pollData.dupeCheckMode || "").toLowerCase() : "ip"
+        ) as DupeCheckMode;
+        const dupeData =
+            dupeCheckMode === "none" ? null :
+            dupeCheckMode === "ip" ? [] :
+            dupeCheckMode === "cookie" ? randomString(16) : null;
+        const poll: Poll = {
+            id,
+            title: (pollData.title || "").trim().slice(0, 300),
+            options: (() => {
+                const result: { [option: string]: number } = {};
+                for (const option of pollData.options.map(i => i.trim().slice(0, 300))) {
+                    if (option) result[option] = 0;
+                }
+                return result;
+            })(),
+            dupeCheckMode,
+            dupeData,
+            multiSelect: pollData.multiSelect || false,
+            captcha: pollData.captcha || false,
+            creationTime: new Date()
+        };
+        await polls.setItem(id, poll);
+        return poll;
+    }
+
    router.post("/poll", async (req, res) => {
        try {
-            const options = req.body.options;
-            if (!Array.isArray(options) || options.filter(i => i).length < 2)
-                return res.status(400).json({ error: "Options must be an array and have at least 2 entries" });
-            let id = randomString(8);
-            while (await polls.getItem(id)) id = randomString(6);
-            await polls.setItem(id, {});
-            const dupeCheckMode = ["none", "ip", "cookie"].includes((req.body.dupeCheckMode || "").toLowerCase()) ? (req.body.dupeCheckMode || "").toLowerCase() : "ip";
-            const dupeData =
-                dupeCheckMode === "none" ? null :
-                dupeCheckMode === "ip" ? [] :
-                dupeCheckMode === "cookie" ? randomString(16) : null;
-            const poll: Poll = {
-                id,
+            const poll = await createPoll({
                title: (req.body.title || "").trim().slice(0, 300),
-                options: (() => {
-                    const result: { [option: string]: number } = {};
-                    for (const option of options.map(i => i.trim().slice(0, 300))) {
-                        if (option) result[option] = 0;
-                    }
-                    return result;
-                })(),
-                dupeCheckMode,
-                dupeData,
+                options: req.body.options,
+                dupeCheckMode: req.body.dupeCheckMode,
                multiSelect: req.body.multiSelect || false,
                captcha: req.body.captcha || false,
-                creationTime: new Date()
-            };
-            await polls.setItem(id, poll);
-            res.json({
-                id: id
            });
+            if (typeof poll !== "string") res.json({
+                id: poll.id
+            });
+            else res.status(400).json({
+                error: poll
+            });
+        } catch (error) {
+            console.error(error);
+            if (error instanceof Error) res.status(500).json({
+                error: error.message
+            });
+            else res.status(500).json({
+                error: error
+            });
+        }
+    });
+    router.post("/poll-form", async (req, res) => {
+        try {
+            const poll = await createPoll({
+                title: (req.body["poll-title"] || "").trim().slice(0, 300),
+                options: req.body["poll-option"],
+                dupeCheckMode: req.body["dupe-check"],
+                multiSelect: req.body["multi-select"] === "on",
+                captcha: req.body["captcha"] === "on",
+            });
+            if (typeof poll !== "string") res.redirect("/" + poll.id);
+            else res.redirect(`/?error=${
+                encodeURIComponent(poll)
+            }&title=${
+                encodeURIComponent(req.body["poll-title"])
+            }&options=${
+                encodeURIComponent((req.body["poll-option"] || []).join("\uFFFE"))
+            }&dupecheck=${
+                encodeURIComponent(req.body["dupe-check"])
+            }&multiselect=${
+                req.body["multi-select"] === "on"
+            }&captcha=${
+                req.body["captcha"] === "on"
+            }`);
        } catch (error) {
            console.error(error);
            if (error instanceof Error) res.status(500).json({
--- a/src/frontend.ts
+++ b/src/frontend.ts
@ -126,5 +126,29 @@ export default function init(router: Router): void {
            res.redirect(`/`);
        }
    });
-    router.get("/", (req, res) => displayPage(req, res, "index.html"));
+
+    router.get("/", (req, res) => {
+        const options = (typeof req.query.options === "string" ? req.query.options.split("\uFFFE") : [])
+            .filter(i => i)
+            .concat(Array(3).fill(""))
+            .slice(0, 3);
+        const pollOptionDivs = options.map(option => `
+            <div class="poll-option">
+                <input type="text" name="poll-option" maxlength="300" placeholder="Enter your option here" value="${option}">
+            </div>
+        `).join("");
+
+        displayPage(req, res, "index.html", {
+            "BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
+            "FORM_SUBMISSION_ERROR": req.query.error,
+            "FORM_SUBMISSION_ERROR_SHOWN_CLASS": req.query.error ? "error-visible" : "",
+            "FORM_TITLE": req.query.title || "",
+            "FORM_DUPECHECK_IP": req.query.dupecheck === "ip" ? "selected" : "",
+            "FORM_DUPECHECK_COOKIE": req.query.dupecheck === "cookie" ? "selected" : "",
+            "FORM_DUPECHECK_NONE": req.query.dupecheck === "none" ? "selected" : "",
+            "FORM_MULTI_SELECT": req.query.multiselect === "true" ? "checked" : "",  
+            "FORM_CAPTCHA": req.query.captcha === "true" ? "checked" : "",
+            "FORM_OPTION_DIVS": pollOptionDivs
+        });
+    });
 }
--- a/src/main.ts
+++ b/src/main.ts
@ -19,6 +19,7 @@ async function main(): Promise<void> {

    const app = express();
    app.use(express.json());
+    app.use(express.urlencoded({ extended: true }));
    app.use(compression());
    app.use(cookiepaser());