Show banner when unverified devices in room

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

harmonyqml/components/Chat/Banners/Banner.qml

@@ -7,8 +7,8 @@ HGlassRectangle {
     Layout.fillWidth: true
     Layout.preferredHeight: 32
 
-    property alias avatarName: bannerAvatar.name
-    property alias avatarSource: bannerAvatar.imageSource
+    property alias avatar: bannerAvatar
+    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 : ""
-    //avatarSource: inviter ? inviter.avatar_url : ""
+    avatar.name: inviter ? inviter.displayname : ""
+    //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 {