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`)), );