Merge branch '124-improve-ux-of-sign-up-errors-for-the-demo-instance' into 'main'

Resolve "Improve UX of sign up errors for the demo instance"

Closes #124

See merge request !104

backend/web/templates/login.html

@@ -43,7 +43,13 @@
             window.console.log("Error in sign-up request.");
             result.classList.remove('alert-success');
             result.classList.add('alert-danger');
-            result.innerHTML = this.response.errorMessage;
+            if (this.response.errorMessage == '[KratosError] Unable to insert or update resource because a resource with that value exists already') {
+              result.innerHTML = "A user with that email address already exists.";
+            } else if (this.response.errorMessage == '[KratosError] The request was malformed or contained invalid parameters') {
+              result.innerHTML = "That doesn't appear to be a valid email address.";
+            } else {
+              result.innerHTML = this.response.errorMessage;
+            }
           } else {
             result.classList.add('alert-success');
             result.classList.remove('alert-danger');
@@ -56,7 +62,16 @@
       var data = JSON.stringify({"email": email.value });
       // Sending data with the request
       xhr.send(data);
-      }
+    }
+    $(() => {
+      // Submit the sign-up form via ajax so we can show the result on the same
+      // page.
+      $('#signup-form').submit((event) => {
+        event.preventDefault();
+        window.console.log("signup submit");
+        submitSignup();
+      });
+    })
   </script>
   <h4>Sign up for this demo instance</h4>
   Enter your email address here to create an account on this Stackspin
@@ -73,14 +88,16 @@
         destroyed.</li>
     </ul>
   </div>
-  <div class="form-group">
-    <label for="signup-email">Email address</label>
-    <input type="email" class="form-control" id="signup-email" name="signup-email" placeholder="Your email address to sign up with.">
-  </div>
-  <div class="form-group">
-    <button class="btn btn-primary" onclick="submitSignup()">Sign up</button>
-    <div id="signup-result" class="alert" style="visibility: hidden; margin-top: 1em;"></div>
-  </div>
+  <form id="signup-form">
+    <div class="form-group">
+      <label for="signup-email">Email address</label>
+      <input type="email" class="form-control" id="signup-email" name="signup-email" placeholder="Your email address to sign up with.">
+    </div>
+    <div class="form-group">
+      <input type="submit" class="btn btn-primary" value="Sign up">
+      <div id="signup-result" class="alert" style="visibility: hidden; margin-top: 1em;"></div>
+    </div>
+  </form>
 {% endif %}
 
 {% endblock %}