Show banner when unverified devices in room

The banner replaces the SendBox, to prevent sending messages when nio
will raise an OlmTrustError.

harmonyqml/backend/client.py

@@ -312,3 +312,8 @@ class Client(QObject):
         response = self.net.talk(self.nio.room_forget, room_id=room_id)
         self.nio.invalidate_outbound_session(room_id)
         return response
+
+
+    @pyqtSlot(str, result=bool)
+    def roomHasUnknownDevices(self, room_id: str) -> bool:
+        return self.nio.room_contains_unverified(room_id)

harmonyqml/components/Base/HStyle.qml

@@ -92,6 +92,10 @@ QtObject {
             property color background: colors.background1
         }
 
+        readonly property QtObject unknownDevices: QtObject {
+            property color background: colors.background1
+        }
+
         readonly property QtObject typingUsers: QtObject {
             property color background: colors.background0
         }

harmonyqml/components/Chat/Banners/Banner.qml

@@ -7,8 +7,8 @@ HGlassRectangle {
     Layout.fillWidth: true
     Layout.preferredHeight: 32
 
-    property alias avatarName: bannerAvatar.name
+    property alias avatar: bannerAvatar
-    property alias avatarSource: bannerAvatar.imageSource
+    property alias icon: bannerIcon
     property alias labelText: bannerLabel.text
     property alias buttonModel: bannerRepeater.model
     property var buttonCallbacks: []
@@ -22,6 +22,14 @@ HGlassRectangle {
             dimension: banner.Layout.preferredHeight
         }
 
+        HIcon {
+            id: bannerIcon
+            dimension: bannerLabel.implicitHeight
+            visible: Boolean(svgName)
+
+            Layout.leftMargin: 5
+        }
+
         HLabel {
             id: bannerLabel
             textFormat: Text.StyledText
@@ -36,7 +44,7 @@ HGlassRectangle {
                 bannerAvatar.width - bannerButtons.width -
                 Layout.leftMargin - Layout.rightMargin
 
-            Layout.leftMargin: 10
+            Layout.leftMargin: 5
             Layout.rightMargin: Layout.leftMargin
         }
 

harmonyqml/components/Chat/Banners/InviteBanner.qml

@@ -6,8 +6,8 @@ Banner {
 
     color: HStyle.chat.inviteBanner.background
 
-    avatarName: inviter ? inviter.displayname : ""
+    avatar.name: inviter ? inviter.displayname : ""
-    //avatarSource: inviter ? inviter.avatar_url : ""
+    //avatar.imageSource: inviter ? inviter.avatar_url : ""
 
     labelText:
         (inviter ?

harmonyqml/components/Chat/Banners/LeftBanner.qml

@@ -7,7 +7,7 @@ Banner {
 
     color: HStyle.chat.leftBanner.background
 
-    avatarName: ChatJS.getLeftBannerAvatarName(leftEvent, chatPage.userId)
+    avatar.name: ChatJS.getLeftBannerAvatarName(leftEvent, chatPage.userId)
     labelText: ChatJS.getLeftBannerText(leftEvent)
 
     buttonModel: [

harmonyqml/components/Chat/Banners/UnknownDevicesBanner.qml

@@ -0,0 +1,25 @@
+import QtQuick 2.7
+import "../../Base"
+import "../utils.js" as ChatJS
+
+Banner {
+    color: HStyle.chat.unknownDevices.background
+
+    avatar.visible: false
+    icon.svgName: "unknown_devices_warning"
+    labelText: "Unknown devices are present in this encrypted room."
+
+    buttonModel: [
+        {
+            name: "inspect",
+            text: qsTr("Inspect"),
+            iconName: "unknown_devices_inspect",
+        }
+    ]
+
+    buttonCallbacks: {
+        "inspect": function(button) {
+            print("show")
+        },
+    }
+}

harmonyqml/components/Chat/Chat.qml

@@ -14,6 +14,9 @@ HColumnLayout {
                .roomCategories.get(category)
                .rooms.get(roomId)
 
+    readonly property bool hasUnknownDevices:
+         Backend.clients.get(userId).roomHasUnknownDevices(roomId)
+
     id: chatPage
     onFocusChanged: sendBox.setFocus()
 
@@ -42,9 +45,13 @@ HColumnLayout {
         inviter: roomInfo.inviter
     }
 
+    UnknownDevicesBanner {
+        visible: category === "Rooms" && hasUnknownDevices
+    }
+
     SendBox {
         id: sendBox
-        visible: category === "Rooms"
+        visible: category === "Rooms" && ! hasUnknownDevices
     }
 
     LeftBanner {

harmonyqml/icons/unknown_devices_inspect.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="unknown_devices_inspect.svg"
+   inkscape:version="">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="1.8756036"
+     inkscape:cx="-105.68924"
+     inkscape:cy="18.344365"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"
+     id="path2"
+     style="fill:#9a8308;fill-opacity:1" />
+</svg>

harmonyqml/icons/unknown_devices_warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 10v-4c0-3.313-2.687-6-6-6s-6 2.687-6 6v4h-3v14h18v-14h-3zm-5 7.723v2.277h-2v-2.277c-.595-.347-1-.984-1-1.723 0-1.104.896-2 2-2s2 .896 2 2c0 .738-.404 1.376-1 1.723zm-5-7.723v-4c0-2.206 1.794-4 4-4 2.205 0 4 1.794 4 4v4h-8z"/></svg>