From 05d23cc74513bd3580863f594905250c2d4df861 Mon Sep 17 00:00:00 2001
From: Bruno Windels <bruno@windels.cloud>
Date: Mon, 17 Jan 2022 16:31:02 +0100
Subject: [PATCH] hook up logout view

---
 src/platform/web/ui/LogoutView.js             | 53 +++++++++++++++++++
 src/platform/web/ui/RootView.js               |  5 +-
 .../web/ui/css/themes/element/theme.css       | 17 ++++++
 .../web/ui/session/settings/SettingsView.js   |  6 +--
 4 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 src/platform/web/ui/LogoutView.js

diff --git a/src/platform/web/ui/LogoutView.js b/src/platform/web/ui/LogoutView.js
new file mode 100644
index 00000000..9a5201ef
--- /dev/null
+++ b/src/platform/web/ui/LogoutView.js
@@ -0,0 +1,53 @@
+/*
+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, InlineTemplateView} from "./general/TemplateView";
+import {spinner} from "./common.js";
+
+export class LogoutView extends TemplateView {
+    render(t, vm) {
+        const confirmView = new InlineTemplateView(vm, t => {
+            return t.div([
+                t.p("Are you sure you want to log out?"),
+                t.div({ className: "button-row" }, [
+                    t.a({
+                        className: "button-action",
+                        type: "submit",
+                        href: vm.cancelUrl,
+                    }, ["Cancel"]),
+                    t.button({
+                        className: "button-action primary destructive",
+                        type: "submit",
+                        onClick: () => vm.logout(),
+                    }, vm.i18n`Log out`)
+                ]),
+            ]);
+        });
+        const progressView = new InlineTemplateView(vm, t => {
+            return t.p({className: "status", hidden: vm => !vm.showStatus}, [
+                spinner(t, {hidden: vm => !vm.busy}), t.span(vm => vm.status)
+            ]);
+        });
+
+        return t.div({className: "LogoutScreen"}, [
+            t.div({className: "content"}, [
+                t.mapView(vm => vm.showConfirm, showConfirm => {
+                    return showConfirm ? confirmView : progressView;
+                })
+            ]),
+        ]);
+    }
+}
diff --git a/src/platform/web/ui/RootView.js b/src/platform/web/ui/RootView.js
index a44100a8..69b327a5 100644
--- a/src/platform/web/ui/RootView.js
+++ b/src/platform/web/ui/RootView.js
@@ -15,7 +15,8 @@ limitations under the License.
 */
 
 import {SessionView} from "./session/SessionView.js";
-import {LoginView} from "./login/LoginView.js";
+import {LoginView} from "./login/LoginView";
+import {LogoutView} from "./LogoutView.js";
 import {SessionLoadView} from "./login/SessionLoadView.js";
 import {SessionPickerView} from "./login/SessionPickerView.js";
 import {TemplateView} from "./general/TemplateView";
@@ -36,6 +37,8 @@ export class RootView extends TemplateView {
                     return new SessionView(vm.sessionViewModel);
                 case "login":
                     return new LoginView(vm.loginViewModel);
+                case "logout":
+                    return new LogoutView(vm.logoutViewModel);
                 case "picker":
                     return new SessionPickerView(vm.sessionPickerViewModel);
                 case "redirecting":
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index 32e048ec..5ed8b4c9 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -1058,3 +1058,20 @@ button.RoomDetailsView_row::after {
 .LazyListParent {
     overflow-y: auto;
 }
+
+.LogoutScreen {
+  height: 100vh;
+}
+
+.LogoutScreen .content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.LogoutScreen .status {
+    display: flex;
+    gap: 12px;
+}
diff --git a/src/platform/web/ui/session/settings/SettingsView.js b/src/platform/web/ui/session/settings/SettingsView.js
index e969ba40..78ca2007 100644
--- a/src/platform/web/ui/session/settings/SettingsView.js
+++ b/src/platform/web/ui/session/settings/SettingsView.js
@@ -42,11 +42,7 @@ export class SettingsView extends TemplateView {
             row(t, vm.i18n`Session ID`, vm.deviceId, "code"),
             row(t, vm.i18n`Session key`, vm.fingerprintKey, "code"),
             row(t, "", t.button({
-                onClick: () => {
-                    if (confirm(vm.i18n`Are you sure you want to log out?`)) {
-                        vm.logout();
-                    }
-                },
+                onClick: () => vm.logout(),
                 disabled: vm => vm.isLoggingOut
             }, vm.i18n`Log out`)),
         );