Add test package for socketio form submission

app/templates/test/index.html.j2

@@ -0,0 +1,84 @@
+{% extends "limited_width.html.j2" %}
+
+{% block page_content %}
+<div class="col s12">
+  <h3>Submit a Test</h3>
+</div>
+
+<div class="col s12">
+  <div class="card">
+    <form id="test-form">
+      {{ test_form.hidden_tag() }}
+      <div class="card-content">
+        <div class="row">
+          <div class="col s12 m4">
+            <div class="input-field">
+              <i class="material-icons prefix">title</i>
+              {{ test_form.title(data_length='32') }}
+              {{ test_form.title.label }}
+            </div>
+          </div>
+          <div class="col s12 m8">
+            <div class="input-field">
+              <i class="material-icons prefix">description</i>
+              {{ test_form.description(data_length='255') }}
+              {{ test_form.description.label }}
+            </div>
+          </div>
+          <div class="col s12">
+            <div class="file-field input-field">
+              <div class="btn">
+                <span>{{ test_form.file.label.text }}</span>
+                {{ test_form.file() }}
+              </div>
+              <div class="file-path-wrapper">
+                <input class="file-path validate" type="text">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="card-action right-align">
+        <button class="btn waves-effect waves-light" name="submit" type="submit">Submit<i class="material-icons right">send</i></button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<script>
+var testFormElement = document.getElementById("test-form");
+
+testFormElement.addEventListener("submit", function(event) {
+  event.preventDefault();
+  let csrfTokenElement = testFormElement.querySelector("input[name='csrf_token']"),
+      descriptionElement = testFormElement.querySelector("input[name='description']"),
+      fileElement = testFormElement.querySelector("input[name='file']"),
+      titleElement = testFormElement.querySelector("input[name='title']");
+  let file = fileElement.files[0];
+  let data = {"csrf_token": csrfTokenElement.value,
+              "description": descriptionElement.value,
+              "file": {"bytes": file, "name": file.name},
+              "title": titleElement.value};
+  nopaque.socket.emit("submit-test-form", data);
+});
+
+nopaque.socket.on("submit-test-form", function(response) {
+  console.log(response);
+  if (response.status === "success") {
+     testFormElement.reset();
+     nopaque.toast("Success!");
+     for (let helperText of testFormElement.querySelectorAll(".helper-text")) {
+       helperText.remove();
+     }
+  } else if (response.status === "error") {
+    let errorElement;
+    for (let [field, error] of Object.entries(response.msg)) {
+      errorElement = document.createElement("span");
+      errorElement.classList.add("helper-text", "red-text");
+      errorElement.innerText = error;
+      testFormElement.querySelector(`input[name="${field}"]`).closest(".input-field").appendChild(errorElement);
+    }
+  }
+});
+</script>
+{% endblock %}