Targets section: one Add, then a target type and Next, then that type's fields (closes #370)

The targets section of the webhook page showed its add form open with every field, a URL included for types that use none. It now lists only its targets until "+ Add" is clicked; "+ Add" shows a choice of target type with Next and Cancel on one row, and Next shows the name and only that type's fields. The database and log types show no URL field and the server stores none for them; the slack form gains its retry field. A refused target brings the page back with the form open on its type, the values entered and the reason, and Cancel empties it. An encoding failure stays a logged 500. Target validation returns its message, so the new-webhook page can reuse it.

Model: opus-5-5

static/js/app.js

@@ -92,24 +92,65 @@ document.addEventListener("alpine:init", function () {
         };
     });
 
-    // The add target form. Only the chosen type's fields show, and the
-    // others are disabled so that the form does not submit them.
+    // The targets section's add target form, in three steps: closed,
+    // choosing a type, then filling in that type's fields. targetType
+    // is empty until Next takes it from the type select.
     //
-    // The type is read from the type select when Alpine starts, when the
-    // select changes, and on pageshow. Going back to the page, the
-    // browser restores the type chosen before without a change event,
-    // in some browsers only after Alpine has started, but always before
-    // pageshow.
+    // 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.readType();
+                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;
             },
-            readType() {
-                this.targetType = this.$root.querySelector(
-                    'select[name="type"]'
-                ).value;
+            add() {
+                this.choosing = true;
+            },
+            next() {
+                this.targetType = this.$refs.type.value;
+                this.choosing = false;
+            },
+            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 !== "";
+            },
+            get closed() {
+                return !this.choosing && !this.filling;
             },
             get isHttp() {
                 return this.targetType === "http";
@@ -120,14 +161,8 @@ document.addEventListener("alpine:init", function () {
             get isDatabase() {
                 return this.targetType === "database";
             },
-            get notHttp() {
-                return !this.isHttp;
-            },
-            get notSlack() {
-                return !this.isSlack;
-            },
-            get notDatabase() {
-                return !this.isDatabase;
+            get isLog() {
+                return this.targetType === "log";
             },
         };
     });