Enhance test website with a <form> test case

openzim · Oct 11, 2024 · 457c991 · 457c991
1 parent c56d4ce
commit 457c991
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 0 deletions.
diff --git a/test-website/Caddyfile b/test-website/Caddyfile
@@ -17,6 +17,26 @@
         }
     }
 
+    handle /dynform-rewrite {
+        @hasIdParam query "id=*"
+        handle @hasIdParam {
+            rewrite * /form-get-{http.request.uri.query.id}.html
+        }
+        handle {
+            respond 500 "Bad Request"
+        }
+    }
+
+    handle /dynform-redirect {
+        @hasIdParam query "id=*"
+        handle @hasIdParam {
+            redir * /form-get-{http.request.uri.query.id}.html 302
+        }
+        handle {
+            respond 500 "Bad Request"
+        }
+    }
+
     respond /200-response "Never mind" 200
 
     respond /201-response "Never mind" 201

diff --git a/test-website/content/form-get-1.html b/test-website/content/form-get-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Test website</title>
+  <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
+  <link rel="manifest" href="./icons/site.webmanifest">
+  <link rel="shortcut icon" href="./icons/favicon.ico">
+</head>
+
+<body>
+
+  <h2>Form get subpage 1</h2>
+
+  <p>Congratulations, you found subpage 1</p>
+
+
+</body>
+
+</html>
diff --git a/test-website/content/form-get-2.html b/test-website/content/form-get-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Test website</title>
+  <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
+  <link rel="manifest" href="./icons/site.webmanifest">
+  <link rel="shortcut icon" href="./icons/favicon.ico">
+</head>
+
+<body>
+
+  <h2>Form get subpage 2</h2>
+
+  <p>Congratulations, you found subpage 2</p>
+
+
+</body>
+
+</html>
diff --git a/test-website/content/form-get-3.html b/test-website/content/form-get-3.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Test website</title>
+  <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
+  <link rel="manifest" href="./icons/site.webmanifest">
+  <link rel="shortcut icon" href="./icons/favicon.ico">
+</head>
+
+<body>
+
+  <h2>Form get subpage 3</h2>
+
+  <p>Congratulations, you found subpage 3</p>
+
+
+</body>
+
+</html>
diff --git a/test-website/content/form-get-4.html b/test-website/content/form-get-4.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Test website</title>
+  <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png">
+  <link rel="manifest" href="./icons/site.webmanifest">
+  <link rel="shortcut icon" href="./icons/favicon.ico">
+</head>
+
+<body>
+
+  <h2>Form get subpage 4</h2>
+
+  <p>Congratulations, you found subpage 4</p>
+
+
+</body>
+
+</html>
diff --git a/test-website/content/form-get.html b/test-website/content/form-get.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Test website</title>
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="./icons/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="./icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="./icons/favicon-16x16.png"
+    />
+    <link rel="manifest" href="./icons/site.webmanifest" />
+    <link rel="shortcut icon" href="./icons/favicon.ico" />
+  </head>
+
+  <body>
+    <h2>Form GET</h2>
+
+    <p>This page showcase a situation where someone used a form with a combobox to enable navigation on the website.</p>
+
+    <p>Nota: this has been seen in the wild on https://chopin.lib.uchicago.edu/ (open any title scores and the combobox will appear in top right corner) and on https://medecine-integree.com/ (for which we - Kiwix - do not have any rights to copy but have been approached by a user).</p>
+
+    <h3>Rewrite</h3>
+    <p>Server configuration will intercept the queryparameter and rewrite internal to proper HTML file, invisible to the end user.</p>
+    <form action="/dynform-rewrite" method="get">
+      <label class="screen-reader-text" for="id"
+        >Select a subpage to open :</label
+      >
+      <select name="id" id="id">
+        <option value="-1">Select a subpage</option>
+        <option value="1">Sub page 1</option>
+        <option value="2">Sub page 2</option>
+      </select>
+      <input type="submit" name="submit" value="Submit" />
+    </form>
+
+    <h3>Redirect</h3>
+    <p>Server configuration will intercept the queryparameter and redirect with a 302 to proper URL, hence visible to the end user.</p>
+    <form action="/dynform-redirect" method="get">
+      <label class="screen-reader-text" for="id"
+        >Select a subpage to open :</label
+      >
+      <select name="id" id="id">
+        <option value="-1">Select a subpage</option>
+        <option value="3">Sub page 3</option>
+        <option value="4">Sub page 4</option>
+      </select>
+      <input type="submit" name="submit" value="Submit" />
+    </form>
+
+  </body>
+</html>
diff --git a/test-website/content/index.html b/test-website/content/index.html
@@ -51,6 +51,7 @@
         <li><a href="./content-types/index.html">Handling of content types</a></li>
         <li><a href="./http-equiv-redirect.html">Redirect with http-equiv meta directive</a></li>
         <li><a href="./image-srcset.html">Image with srcset</a></li>
+        <li><a href="./form-get.html">Form GET</a></li>
     </ul>
 </body>