From 41ddc5fc3325c66e98cc2f2c38e6514b3f2e4ddd Mon Sep 17 00:00:00 2001
From: Daniel Markstedt <markstedt@gmail.com>
Date: Sat, 27 Aug 2022 18:38:23 -0700
Subject: [PATCH] Allow custom drive sizes in bespoke UI; other sundry
 improvements (#813)

* Allow custom drive image sizes in the bespoke UI. Addresses Issue#748

* Clarify what the Pi repo mirror setup is good for.

* Use the number input type for rudimentary input validation.

* Append byte unit.

* More granular input validation using html5 attributes. Max allowed input is 256GiB in bytes.

* Correct use of html5 number input elements.
---
 python/web/README.md                 |  4 +++-
 python/web/src/templates/drives.html |  4 ++--
 python/web/src/templates/index.html  | 12 ++++++------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/python/web/README.md b/python/web/README.md
index cb610eaa..6487bf9c 100644
--- a/python/web/README.md
+++ b/python/web/README.md
@@ -21,7 +21,9 @@ You may edit the files under `mock/bin` to simulate Linux command responses.
 TODO:  rascsi-web uses protobuf commands to send and receive data from rascsi.
 A separate mocking solution will be needed for this interface.
 
-## Pushing to the Pi via git
+## (Optional) Pushing to the Pi via git
+
+This is a setup for pushing code changes from your local development environment to the Raspberry Pi without a roundtrip to the remote GitHub repository.
 
 Setup a bare repo on the rascsi
 ```
diff --git a/python/web/src/templates/drives.html b/python/web/src/templates/drives.html
index accaee99..0d007ce4 100644
--- a/python/web/src/templates/drives.html
+++ b/python/web/src/templates/drives.html
@@ -34,7 +34,7 @@
         <input type="hidden" name="revision" value="{{ hd.revision }}">
         <input type="hidden" name="blocks" value="{{ hd.blocks }}">
         <input type="hidden" name="block_size" value="{{ hd.block_size }}">
-        <input type="hidden" name="size" value="{{ hd.size }}">
+        {{ _("Size:") }} <input type="number" name="size" min="512" max="274877906944" step="512" value="{{ hd.size }}">{{ _("B") }}
     <input type="hidden" name="file_type" value="{{ hd.file_type }}">
     <label for="file_name">{{ _("Save as:") }}</label>
     <input type="text" name="file_name" value="{{ hd.secure_name }}" required />.{{ hd.file_type }}
@@ -124,7 +124,7 @@
         <input type="hidden" name="revision" value="{{ rm.revision }}">
         <input type="hidden" name="blocks" value="{{ rm.blocks }}">
         <input type="hidden" name="block_size" value="{{ rm.block_size }}">
-        <input type="hidden" name="size" value="{{ rm.size }}">
+        {{ _("Size:") }} <input type="number" name="size" min="512" max="274877906944" step="512" value="{{ rm.size }}">{{ _("B") }}
         <input type="hidden" name="file_type" value="{{ rm.file_type }}">
         <label for="file_name">{{ _("Save as:") }}</label>
         <input type="text" name="file_name" value="{{ rm.secure_name }}" required />.{{ rm.file_type }}
diff --git a/python/web/src/templates/index.html b/python/web/src/templates/index.html
index fb984d71..e2d86f57 100644
--- a/python/web/src/templates/index.html
+++ b/python/web/src/templates/index.html
@@ -258,7 +258,7 @@
                         {% endfor %}
                     </select>
                     <label for="unit">{{ _("LUN") }}</label>
-                    <input name="unit" type="number" size="2" value="0" min="0" max="31">
+                    <input name="unit" type="number" value="0" min="0" max="31" step="1">
                     {% if file["detected_type"] != "UNDEFINED" %}
                         <input name="type" type="hidden" value="{{ file['detected_type'] }}">
                         {{ file['detected_type_name'] }}
@@ -337,7 +337,7 @@
                 {% for key, value in device_types[type]["params"].items() %}
                 <label for="{{ key }}">{{ key }}:</label>
                 {% if value.isnumeric() %}
-                <input name="{{ key }}" type="number" size="{{ value|length }}" value="{{ value }}">
+                <input name="{{ key }}" type="number" value="{{ value }}">
                 {% elif key == "interface" %}
                 <select name="interface">
                 {% for if in netinfo["ifs"] %}
@@ -359,7 +359,7 @@
                 {% endfor %}
                 </select>
                 <label for="unit">{{ _("LUN") }}</label>
-                <input name="unit" type="number" size="2" value="0" min="0" max="31">
+                <input name="unit" type="number" value="0" min="0" max="31" step="1">
                 <input type="submit" value="{{ _("Attach") }}">
             </form>
         </td>
@@ -416,7 +416,7 @@
             gb: "{{ _("GB") }}",
             mb: "{{ _("MB") }}",
             kb: "{{ _("KB") }}",
-            b: "{{ _("b") }}"
+            b: "{{ _("B") }}"
         }
     }
 </script>
@@ -572,7 +572,7 @@
                     </option>
                 </select>
                 <label for="size">{{ _("Size:") }}</label>
-                <input name="size" type="number" placeholder="{{ _("MB") }}" min="1" size="6" required>
+                <input name="size" type="number" placeholder="{{ _("MB") }}" min="1" max="262144" required>
                 <input type="submit" value="{{ _("Create") }}">
             </form>
         </td>
@@ -607,7 +607,7 @@
         <td style="border: none; vertical-align:top;">
             <form action="/logs/show" method="post">
                 <label for="lines">{{ _("Log Lines:") }}</label>
-                <input name="lines" type="number" value="200" min="1" size="4">
+                <input name="lines" type="number" value="200" min="0" max="99999" step="100">
                 <label for="scope">{{ _("Scope:") }}</label>
                 <select name="scope">
                     <option value="">