implement homeserver consent stage

src/open/ServerConsentView.js

@@ -0,0 +1,118 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {TemplateView} from "../utils/TemplateView.js";
+import {ClientListView} from "./ClientListView.js";
+import {PreviewView} from "../preview/PreviewView.js";
+
+export class ServerConsentView extends TemplateView {
+	render(t, vm) {
+        const useAnotherServer = t.button({
+            className: "text",
+            onClick: () => vm.setShowServers()}, "use another server");
+        const continueWithoutPreview = t.button({
+            className: "text",
+            onClick: () => vm.continueWithoutConsent()
+        }, "continue without a preview");
+		return t.div({className: "ServerConsentView"}, [
+            t.p([
+                "View this link using ",
+                t.strong(vm => vm.selectedServer || "…"),
+                t.span({className: {hidden: vm => !vm.selectedServer}}, [
+                    " (",
+                    t.a({
+                        href: vm => `#/policy/${vm.selectedServer}`,
+                        target: "_blank",
+                    }, "privacy policy"),
+                    ") ",
+                ]),
+                t.span({className: {hidden: vm => vm.showSelectServer}}, [
+                    " to preview content, or your can ",
+                    useAnotherServer,
+                ]),
+                " or ",
+                continueWithoutPreview,
+                "."
+            ]),
+            t.form({action: "#", onSubmit: evt => this._onSubmit(evt)}, [
+                t.mapView(vm => vm.showSelectServer, show => show ? new ServerOptions(vm) : null),
+                t.div({className: "actions"}, [
+                    t.label([t.input({type: "checkbox", name: "persist"}), "Ask every time"]),
+                    t.input({type: "submit", value: "Continue", className: "primary fullwidth"})
+                ])
+            ])
+        ]);
+	}
+
+    _onSubmit(evt) {
+        evt.preventDefault();
+        this.value.continueWithSelection();
+    }
+}
+
+class ServerOptions extends TemplateView {
+    render(t, vm) {
+        const options = vm.servers.map(server => {
+            return t.div(t.label([t.input({type: "radio", name: "selectedServer", value: server}), t.span(server)]))
+        });
+        options.push(t.div({className: "other"}, t.label([
+            t.input({type: "radio", name: "selectedServer", value: "other"}),
+            t.input({
+                type: "text",
+                className: "line",
+                placeholder: "Other",
+                name: "otherServer",
+                pattern: "((?:[0-9a-zA-Z][0-9a-zA-Z-]{1,61}\\.)*)(xn--[a-z0-9]+|[a-z]+)",
+                onClick: evt => this._onClickOther(evt),
+            })
+        ])));
+        return t.div({
+            className: "ServerOptions",
+            onChange: evt => this._onChange(evt),
+        }, options);
+    }
+
+    _onClickOther(evt) {
+        const textField = evt.target;
+        const radio = Array.from(textField.form.elements.selectedServer).find(r => r.value === "other");
+        if (!radio.checked) {
+            radio.checked = true;
+            this._onChangeServerRadio(radio);
+        }
+    }
+
+    _onChange(evt) {
+        let {name, value} = evt.target;
+        if (name === "selectedServer") {
+            this._onChangeServerRadio(evt.target);
+            
+        } else if (name === "otherServer") {
+            this.value.selectServer(value);
+        }
+    }
+
+    _onChangeServerRadio(radio) {
+        let {value, form} = radio;
+        const {otherServer} = form.elements;
+        if (value === "other") {
+            otherServer.required = true;
+            value = otherServer.value;
+        } else {
+            otherServer.required = false;
+        }
+        this.value.selectServer(value);
+    }
+}