Merge pull request #356 from sidvishnoi/form

Add a form to submit URL or upload file
w3c · Oct 21, 2020 · e576be5 · e576be5
2 parents 314c77f + c086541
commit e576be5
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Spec Generator</title>
+  <style>
+    * {
+        margin: 0;
+        padding: 0;
+        box-shadow: border-box;
+    }
+
+    :root {
+        --bg-accent: #005a9c;
+        --bg-accent-alt: #08314f;
+    }
+
+    body {
+        font-family: sans-serif;
+        width: 70ch;
+        max-width: 95vw;
+        margin: 1em auto;
+    }
+
+    label {
+        line-height: 1.5;
+    }
+
+    input {
+        background: #eee;
+        border: 1px solid #ddd;
+        line-height: 1.5;
+        padding: 0.2rem;
+        margin-bottom: 0.5em;
+        width: 100%;
+    }
+
+    .either {
+        border-left: 0.5rem solid var(--bg-accent);
+        position: relative;
+    }
+
+    .either:after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        background: var(--bg-accent);
+        height: 0.5rem;
+        width: 100%;
+        transform: translateY(-50%);
+    }
+
+    fieldset {
+        border: none;
+        padding: 1em;
+        padding-right: 0;
+    }
+
+    button {
+        display: block;
+        border: none;
+        background: var(--bg-accent);
+        color: #fff;
+        border-radius: 2px;
+        padding: 1em;
+    }
+
+    button:hover {
+        background: var(--bg-accent-alt);
+        cursor: pointer;
+    }
+
+    footer {
+        text-align: center;
+        margin: 1em;
+        margin-top: 5em;
+        border-top: 0.2rem solid;
+        padding: 0.5em;
+    }
+    </style>
+</head>
+<body>
+    <form action="">
+        <h2>Convert ReSpec document to HTML</h2>
+        <fieldset style="text-align: right;">
+            <label for="type">Generator</label>
+            <select name="type" id="type" required>
+                <option value="respec" selected>ReSpec</option>
+            </select>
+        </fieldset>
+        <div class="either">
+            <fieldset>
+                <label for="url">Spec URL (with optional query parameters)</label>
+                <input type="url" name="url" id="url" placeholder="https://w3c.github.io/manifest/?specStatus=WD&publishDate=2020-10-20">
+                <button formmethod="GET">Generate</button>
+            </fieldset>
+            <fieldset>
+                <label for="file">Or, upload a HTML or tar file</label>
+                <input type="file" name="file" id="file" accept="application/x-tar, .html">
+                <button formmethod="POST" formenctype="multipart/form-data">Upload and Generate</button>
+            </fieldset>
+        </div>
+    </form>
+    <footer>
+        <p><a href="https://github.com/w3c/spec-generator">GitHub</a></p>
+    </footer>
+</body>
+</html>
diff --git a/server.js b/server.js
@@ -1,6 +1,7 @@
-const { extname, dirname, resolve } = require("path");
+const { extname, dirname } = require("path");
 const { URL, URLSearchParams } = require("url");
 const { readFile, unlink, rmdir, mkdtemp, writeFile } = require("fs").promises;
+const { readFileSync } = require("fs");
 
 const express = require("express");
 const fileUpload = require("express-fileupload");
@@ -17,6 +18,8 @@ const genMap = {
 const app = express();
 const BASE_URI = process.env.BASE_URI || "";
 
+const FORM_HTML = readFileSync(`${__dirname}/index.html`, "utf-8");
+
 /** Get present date in YYYY-MM-DD format */
 const getShortIsoDate = () => new Date().toISOString().slice(0, 10);
 
@@ -41,9 +44,13 @@ app.get("/", async function (req, res) {
             ? decodeURIComponent(req.query.url)
             : undefined;
     if (!url || !type) {
-        return res
-            .status(500)
-            .json({ error: "Both 'type' and 'url' are required." });
+        if (req.headers.accept && req.headers.accept.includes("text/html")) {
+            return res.send(FORM_HTML);
+        } else {
+            return res
+                .status(500)
+                .json({ error: "Both 'type' and 'url' are required." });
+        }
     }
     if (!genMap.hasOwnProperty(type)) {
         return res.status(500).json({ error: "Unknown generator: " + type });

diff --git a/test/test.js b/test/test.js
@@ -57,6 +57,11 @@ describe('spec-generator', () => {
   });
 
   describe('succeeds when it should', () => {
+    describe("renders form UI", () => {
+      it('without parameters', (done) => REQUEST.get(BASE_URL, { headers: { Accept: "text/html" } }, SUCCEEDS(done)));
+      it('if there\'s no URL', (done) => REQUEST.get(BASE_URL + NO_URL, { headers: { Accept: "text/html" } }, SUCCEEDS(done)));
+      it('if there\'s no type', (done) => REQUEST.get(BASE_URL + NO_TYPE, { headers: { Accept: "text/html" } }, SUCCEEDS(done)));
+    });
     it('Web App Manifest ("appmanifest")', (done) => REQUEST.get(BASE_URL + SUCCESS1, SUCCEEDS(done)));
     it('Payment Request API ("payment-request")', (done) => REQUEST.get(BASE_URL + SUCCESS2, SUCCEEDS(done)));
     it('Resource Hints ("resource-hints")', (done) => REQUEST.get(BASE_URL + SUCCESS3, SUCCEEDS(done)));