Empty the add target form on Cancel; encoding failures stay a 500

The form's reason and values now come from the targetForm component,
loaded from the section's data attributes after a refusal and emptied
by Cancel, which also resets the form. Each type's fields used to be
recreated with the refused values written into the markup, so they
came back after Cancel. The browser test checks this after a refusal.

A target configuration that cannot be encoded is again a logged 500
with the generic error page, on the add and the edit path; only
refusals of submitted values come back on the form.

The README paragraph on the browser test is re-wrapped at 80 columns
and names Cancel at the type step.

Model: opus-5-5

static/js/app.js

@@ -92,14 +92,36 @@ document.addEventListener("alpine:init", function () {
     // choosing a type, then filling in that type's fields. targetType
     // is empty until Next takes it from the type select.
     //
-    // A refused submission comes back with the type it was submitted
-    // with in the section's data-type, and starts on that type's fields.
+    // The reason and the fields' values come from the properties below
+    // rather than from the markup, because each type's fields are made
+    // afresh from the markup whenever that type is chosen. A refused
+    // submission comes back with its type, reason and values in the
+    // section's data attributes, and starts on that type's fields with
+    // them. Cancel empties these properties and resets the form, which
+    // holds whatever was typed, so the next Add starts with an empty
+    // form and no reason.
     window.Alpine.data("targetForm", function () {
         return {
             choosing: false,
             targetType: "",
+            reason: "",
+            name: "",
+            url: "",
+            headers: "",
+            timeout: "",
+            maxRetries: "",
+            expiry: "",
             init() {
-                this.targetType = this.$root.dataset.type;
+                const refused = this.$root.dataset;
+
+                this.targetType = refused.type;
+                this.reason = refused.reason;
+                this.name = refused.name;
+                this.url = refused.destination;
+                this.headers = refused.headers;
+                this.timeout = refused.timeout;
+                this.maxRetries = refused.maxRetries;
+                this.expiry = refused.expiry;
             },
             add() {
                 this.choosing = true;
@@ -111,6 +133,14 @@ document.addEventListener("alpine:init", function () {
             cancel() {
                 this.choosing = false;
                 this.targetType = "";
+                this.reason = "";
+                this.name = "";
+                this.url = "";
+                this.headers = "";
+                this.timeout = "";
+                this.maxRetries = "";
+                this.expiry = "";
+                this.$refs.form.reset();
             },
             get filling() {
                 return this.targetType !== "";