Targets section: one Add, then a type and Next, then its fields (closes #370)

The webhook page's targets section lists only its targets until Add is
clicked. Add shows a choice of target type with Next; Next shows only
that type's fields, with Save and Cancel. The `database` and `log`
types have no URL field, and the `slack` form gains max retries.

A refused target now shows the webhook page again with the form open on
its type, the values entered and the reason, instead of a bare text
page. Target validation returns that message rather than writing the
response; newTarget validates a whole new target for reuse by the
new-webhook page. The edit page still answers a refusal in plain text.

Model: opus-5-5

static/js/app.js

@@ -87,24 +87,35 @@ 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.
+    // 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.
     window.Alpine.data("targetForm", function () {
         return {
+            choosing: false,
             targetType: "",
             init() {
-                this.readType();
+                this.targetType = this.$root.dataset.type;
             },
-            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 = "";
+            },
+            get filling() {
+                return this.targetType !== "";
+            },
+            get closed() {
+                return !this.choosing && !this.filling;
             },
             get isHttp() {
                 return this.targetType === "http";
@@ -115,14 +126,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";
             },
         };
     });