Improve error messaging for "Create Population" feature.

2 files changed, 57 insertions, 30 deletions

diff --git a/uploader/population/views.py b/uploader/population/views.py
index fe318e1..84dffdb 100644
--- a/uploader/population/views.py
+++ b/uploader/population/views.py
@@ -90,46 +90,49 @@ def create_population(species_id: int):
 
         if request.method == "GET":
             error_values = request.args.get("error_values")
-            if bool(error_values):
-                base64.b64encode(
-                json.dumps(dict(request.form)).encode("utf8"))
-                error_values = json.loads(
-                    base64.b64decode(
-                        error_values.encode("utf8")).decode("utf8"))
+            if not bool(error_values):
+                error_values = base64.b64encode(
+                    '{"errors":{}, "error_values": {}}'.encode("utf8")
+                ).decode("utf8")
+
+            error_values = json.loads(base64.b64decode(
+                error_values.encode("utf8")).decode("utf8"))
             return render_template(
                 "populations/create-population.html",
                 species=species,
                 activelink="create-population",
                 **error_values)
 
-        error = False
-
         if not bool(species):
             flash("You must select a species.", "alert-danger")
-            error = True
+            return redirect(url_for("species.populations.index"))
+
+        errors = tuple()
 
         population_name = (request.form.get(
             "population_name") or "").strip()
         if not bool(population_name):
-            flash("You must provide a name for the population!", "alert-danger")
-            error = True
+            errors = errors + (("population_name",
+                                "You must provide a name for the population!"),)
 
         if not valid_population_name(population_name):
-            flash("The population name can only contain letters, numbers, "
-                  "hyphens and underscores.",
-                  "alert-danger")
-            error = True
+            errors = errors + ((
+                "population_name",
+                "The population name can only contain letters, numbers, "
+                "hyphens and underscores."),)
 
         population_fullname = (request.form.get(
             "population_fullname") or "").strip()
         if not bool(population_fullname):
-            flash("You MUST provide a Full Name for the population.",
-                  "alert-danger")
-            error = True
+            errors = errors + (
+                ("population_fullname", "Full Name MUST be provided."),)
 
-        if error:
+        if bool(errors):
             values = base64.b64encode(
-                json.dumps(dict(request.form)).encode("utf8"))
+                json.dumps({
+                    "errors": dict(errors),
+                    "error_values": dict(request.form)
+                }).encode("utf8"))
             return redirect(url_for("species.populations.create_population",
                                     species_id=species["SpeciesId"],
                                     error_values=values))
diff --git a/uploader/templates/populations/create-population.html b/uploader/templates/populations/create-population.html
index a27a134..6a96148 100644
--- a/uploader/templates/populations/create-population.html
+++ b/uploader/templates/populations/create-population.html
@@ -40,15 +40,24 @@
 
     <legend>Create Population</legend>
 
-    <div class="form-group">
+    {{flash_all_messages()}}
+
+    <div {%if errors.population_fullname%}
+         class="form-group has-error"
+         {%else%}
+         class="form-group"
+         {%endif%}>
       <label for="txt-population-fullname" class="form-label">Full Name</label>
+      {%if errors.population_fullname%}
+      <small class="form-text text-danger">{{errors.population_fullname}}</small>
+      {%endif%}
       <input type="text"
              id="txt-population-fullname"
              name="population_fullname"
              required="required"
              minLength="3"
              maxLength="100"
-             value="{{population_fullname or ''}}"
+             value="{{error_values.population_fullname or ''}}"
              class="form-control" />
       <small class="form-text text-muted">
         <p>
@@ -58,15 +67,22 @@
       </small>
     </div>
 
-    <div class="form-group">
+    <div {%if errors.population_name%}
+         class="form-group has-error"
+         {%else%}
+         class="form-group"
+         {%endif%}>
       <label for="txt-population-name" class="form-label">Name</label>
+      {%if errors.population_name%}
+      <small class="form-text text-danger">{{errors.population_name}}</small>
+      {%endif%}
       <input type="text"
              id="txt-population-name"
              name="population_name"
              required="required"
              minLength="3"
              maxLength="30"
-             value="{{population_name or ''}}"
+             value="{{error_values.population_name or ''}}"
              class="form-control" />
       <small class="form-text text-muted">
         <p>
@@ -81,15 +97,23 @@
       </small>
     </div>
 
-    <div class="form-group">
+    <div {%if errors.population_description%}
+         class="form-group has-error"
+         {%else%}
+         class="form-group"
+         {%endif%}>
       <label for="txt-population-description" class="form-label">
         Description
       </label>
-      <textarea id="txt-population-description"
-                name="population_description"
-                required="required"
-                class="form-control"
-                rows="5">{{population_description or ''}}</textarea>
+      {%if errors.population_description%}
+      <small class="form-text text-danger">{{errors.population_description}}</small>
+      {%endif%}
+      <textarea
+        id="txt-population-description"
+        name="population_description"
+        required="required"
+        class="form-control"
+        rows="5">{{error_values.population_description or ''}}</textarea>
       <small class="form-text text-muted">
         <p>
           This is a more detailed description for your population. This is