Add form to configure custom web instance

Author: luelista

src/open/ClientView.js

@@ -39,6 +39,14 @@ function renderInstructions(parts) {
 export class ClientView extends TemplateView {
 
     render(t, vm) {
+        return t.mapView(vm => vm.customWebInstanceFormOpen, open => {
+            switch (open) {
+                case true: return new SetCustomWebInstanceView(vm);
+                case false: return new TemplateView(vm, t => this.renderContent(t, vm));
+            }
+        });
+    }
+    renderContent(t, vm) {
         return t.div({className: {"ClientView": true, "isPreferred": vm => vm.hasPreferredWebInstance}}, [
             ... vm.hasPreferredWebInstance ? [t.div({className: "hostedBanner"}, vm.hostedByBannerLabel)] : [],
             t.div({className: "header"}, [
@@ -119,32 +127,40 @@ export class SetCustomWebInstanceView extends TemplateView {
                 "Use a custom web instance for the ", t.strong(vm.name), " client:",
             ]),
             t.form({action: "#", id: "setCustomWebInstanceForm", onSubmit: evt => this._onSubmit(evt)}, [
-                t.label([
-                    "Host name:",
-                    t.input({
-                        type: "text",
-                        className: "line",
-                        placeholder: "chat.example.org",
-                        name: "instanceHostname",
-                    })
-                ])
+                t.input({
+                    type: "text",
+                    className: "fullwidth large",
+                    placeholder: "chat.example.org",
+                    name: "instanceHostname",
+                    value: vm.preferredWebInstance || "",
+                }),
+                t.input({type: "submit", value: "Save", className: "primary fullwidth"}),
+                t.input({type: "button", value: "Use Default Instance", className: "secondary fullwidth", onClick: evt => this._onReset(evt)}),
             ])
         ]);
     }
 
     _onSubmit(evt) {
         evt.preventDefault();
-        this.value.continueWithSelection(this._askEveryTimeChecked);
+        const form = evt.target;
+        const {instanceHostname} = form.elements;
+        this.value.setCustomWebInstance(instanceHostname.value || undefined);
+        this.value.closeCustomWebInstanceForm();
+    }
+
+    _onReset(evt) {
+        this.value.setCustomWebInstance(undefined);
+        this.value.closeCustomWebInstanceForm();
     }
 }
 
 function showBack(t, vm) {
     return t.p({className: {caption: true, "back": true, hidden: vm => !vm.showBack}}, [
         `Continue with ${vm.name} · `,
         t.button({className: "text", onClick: () => vm.back()}, "Change"),
-        t.span({hidden: vm => !vm.showSetWebInstance}, [
+        t.span({hidden: vm => !vm.supportsCustomWebInstances}, [
             ' · ',
-            t.button({className: "text", onClick: () => vm.setCustomWebInstance()}, "Use Custom Web Instance"),
+            t.button({className: "text", onClick: () => vm.configureCustomWebInstance()}, "Use Custom Web Instance"),
         ])
 
     ]);

src/open/ClientViewModel.js

@@ -35,6 +35,7 @@ export class ClientViewModel extends ViewModel {
         this._pickClient = pickClient;
         // to provide "choose other client" button after calling pick()
         this._clientListViewModel = null;
+        this.customWebInstanceFormOpen = false;
         this._update();
     }
 
@@ -231,7 +232,7 @@ export class ClientViewModel extends ViewModel {
         return !!this._clientListViewModel;
     }
 
-    get showSetWebInstance() {
+    get supportsCustomWebInstances() {
         return !!this._client.supportsCustomInstances;
     }
 
@@ -249,4 +250,20 @@ export class ClientViewModel extends ViewModel {
             vm.showAll();
         }
     }
+
+    configureCustomWebInstance() {
+        this.customWebInstanceFormOpen = true;
+        this.emitChange();
+    }
+
+    closeCustomWebInstanceForm() {
+        this.customWebInstanceFormOpen = false;
+        this.emitChange();
+    }
+
+    setCustomWebInstance(hostname) {
+        this.preferences.setClient(this._client.id, hostname ? this._webPlatform : this._proposedPlatform);
+        this.preferences.setPreferredWebInstance(this._client.id, hostname);
+        this._update();
+    }
 }