Confirm account logout and propose exporting keys

Key export button callback not implemented yet.

src/qml/Pages/EditAccount/ImportExportKeys.qml

@@ -30,8 +30,9 @@ HBox {
         wrapMode: Text.Wrap
         text: qsTr(
             "The decryption keys for messages you received in encrypted " +
-            "rooms can be exported to a passphrase-protected file.\n" +
-            "You can then import this file on another Matrix account or " +
+            "rooms can be exported to a passphrase-protected file.\n\n" +
+
+            "You can then import this file on any Matrix account or " +
             "client, to be able to decrypt these messages again."
         )
 

src/qml/Popups/ForgetRoomPopup.qml

@@ -1,10 +1,7 @@
 import QtQuick 2.12
 
 BoxPopup {
-    summary.text: qsTr(
-        "Leave %1 and discard the history?"
-    ).arg(roomName)
-
+    summary.text: qsTr("Leave %1 and discard the history?").arg(roomName)
     details.text: qsTr(
         "You will not be able to see the messages you received in " +
         "this room anymore.\n\n" +

src/qml/Popups/LogoutPopup.qml

@@ -0,0 +1,50 @@
+import QtQuick 2.12
+
+BoxPopup {
+    id: popup
+    summary.text: qsTr("Backup your decryption keys before signing out?")
+    details.text: qsTr(
+        "Signing out will delete your device's information and the keys " +
+        "required to decrypt messages in encrypted rooms.\n\n" +
+
+        "You can export your keys to a passphrase-protected file " +
+        "before signing out.\n\n" +
+
+        "This will allow you to restore access to your messages when " +
+        "you sign in again, by importing this file in your account settings."
+    )
+
+    box.multiplyWidth: 1.5
+    box.focusButton: "ok"
+    box.buttonModel: [
+        { name: "ok", text: qsTr("Export keys"), iconName: "export-keys" },
+        { name: "signout", text: qsTr("Sign out now"), iconName: "logout",
+          iconColor: theme.colors.middleBackground },
+        { name: "cancel", text: qsTr("Cancel"), iconName: "cancel" },
+    ]
+    box.buttonCallbacks: ({
+        ok: button => {
+            console.error("Not implemented yet")
+        },
+
+        signout: button => {
+            okClicked = true
+            popup.ok()
+
+            if ((modelSources["Account"] || []).length < 2) {
+                pageLoader.showPage("SignIn")
+            } else if (window.uiState.pageProperties.userId == userId) {
+                pageLoader.showPage("Default")
+            }
+
+            py.callCoro("logout_client", [userId])
+
+            popup.close()
+        },
+
+        cancel: button => { okClicked = false; popup.cancel(); popup.close() },
+    })
+
+
+    property string userId: ""
+}

src/qml/SidePane/AccountDelegate.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import "../Base"
+import "../utils.js" as Utils
 
 HTileDelegate {
     id: accountDelegate
@@ -84,24 +85,12 @@ HTileDelegate {
             icon.name: "logout"
             icon.color: theme.colors.negativeBackground
             text: qsTr("Logout")
-            onTriggered: {
-                disconnecting = true
-
-                let page   = window.uiState.page
-                let userId = model.data.user_id
-
-                if ((modelSources["Account"] || []).length < 2) {
-                    pageLoader.showPage("SignIn")
-                }
-                else if ((page == "Pages/EditAccount/EditAccount.qml" ||
-                     page == "Chat/Chat.qml") &&
-                     window.uiState.pageProperties.userId == userId)
-                {
-                    pageLoader.showPage("Default")
-                }
-
-                py.callCoro("logout_client", [userId])
-            }
+            onTriggered: Utils.makePopup(
+                "Popups/LogoutPopup.qml",
+                mainUI,
+                { "userId": model.data.user_id },
+                popup => { popup.ok.connect(() => { disconnecting = true }) },
+            )
         }
     }
 }

src/themes/Default.qpl

@@ -58,6 +58,9 @@ colors:
     color positiveBackground:
         hsluv(155, saturation * 2.25, intensity * 52, Math.max(0.6, opacity))
 
+    color middleBackground:
+        hsluv(60, saturation * 2.25, intensity * 52, Math.max(0.6, opacity))
+
     color negativeBackground:
         hsluv(0, saturation * 2.25, intensity * 52, Math.max(0.6, opacity))