Adding device verification to user profile

CMakeLists.txt

@@ -239,7 +239,6 @@ set(SRC_FILES
 	src/dialogs/ReCaptcha.cpp
 	src/dialogs/ReadReceipts.cpp
 	src/dialogs/RoomSettings.cpp
-	src/dialogs/UserProfile.cpp
 
 	# Emoji
 	src/emoji/Category.cpp
@@ -277,6 +276,7 @@ set(SRC_FILES
 	src/ui/ToggleButton.cpp
 	src/ui/Theme.cpp
 	src/ui/ThemeManager.cpp
+	src/ui/UserProfile.cpp
 
 	src/AvatarProvider.cpp
 	src/BlurhashProvider.cpp
@@ -285,6 +285,7 @@ set(SRC_FILES
 	src/ColorImageProvider.cpp
 	src/CommunitiesList.cpp
 	src/CommunitiesListItem.cpp
+	src/DeviceVerificationFlow.cpp
 	src/EventAccessors.cpp
 	src/InviteeItem.cpp
 	src/Logging.cpp
@@ -444,7 +445,6 @@ qt5_wrap_cpp(MOC_HEADERS
 	src/dialogs/ReCaptcha.h
 	src/dialogs/ReadReceipts.h
 	src/dialogs/RoomSettings.h
-	src/dialogs/UserProfile.h
 
 	# Emoji
 	src/emoji/Category.h
@@ -479,6 +479,7 @@ qt5_wrap_cpp(MOC_HEADERS
 	src/ui/ToggleButton.h
 	src/ui/Theme.h
 	src/ui/ThemeManager.h
+	src/ui/UserProfile.h
 
 	src/notifications/Manager.h
 
@@ -488,6 +489,7 @@ qt5_wrap_cpp(MOC_HEADERS
 	src/ChatPage.h
 	src/CommunitiesList.h
 	src/CommunitiesListItem.h
+	src/DeviceVerificationFlow.h
 	src/InviteeItem.h
 	src/LoginPage.h
 	src/MainWindow.h

resources/qml/Avatar.qml

@@ -2,11 +2,13 @@ import QtQuick 2.6
 import QtQuick.Controls 2.3
 import QtGraphicalEffects 1.0
 
+import im.nheko 1.0
+
 Rectangle {
 	id: avatar
 	width: 48
 	height: 48
-	radius: settings.avatarCircles ? height/2 : 3
+	radius: Settings.avatarCircles ? height/2 : 3
 
 	property alias url: img.source
 	property string userid
@@ -40,7 +42,7 @@ Rectangle {
 				anchors.fill: parent
 				width: avatar.width
 				height: avatar.height
-				radius: settings.avatarCircles ? height/2 : 3
+				radius: Settings.avatarCircles ? height/2 : 3
 			}
 		}
 
@@ -52,11 +54,11 @@ Rectangle {
 
 		height: avatar.height / 6
 		width: height
-		radius: settings.avatarCircles ? height / 2 : height / 4
-		color: switch (timelineManager.userPresence(userid)) {
+		radius: Settings.avatarCircles ? height / 2 : height / 4
+		color: switch (TimelineManager.userPresence(userid)) {
 			case "online": return "#00cc66"
 			case "unavailable": return "#ff9933"
-			case "offline": return "#a82353"
+			case "offline": // return "#a82353" don't show anything if offline, since it is confusing, if presence is disabled
 			default: "transparent"
 		}
 	}

resources/qml/MatrixText.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.5
 import QtQuick.Controls 2.3
 
+import im.nheko 1.0
+
 TextEdit {
 	textFormat: TextEdit.RichText
 	readOnly: true
@@ -10,10 +12,10 @@ TextEdit {
 
 	onLinkActivated: {
 		if (/^https:\/\/matrix.to\/#\/(@.*)$/.test(link)) chat.model.openUserProfile(/^https:\/\/matrix.to\/#\/(@.*)$/.exec(link)[1])
-		else if (/^https:\/\/matrix.to\/#\/(![^\/]*)$/.test(link)) timelineManager.setHistoryView(/^https:\/\/matrix.to\/#\/(!.*)$/.exec(link)[1])
+		else if (/^https:\/\/matrix.to\/#\/(![^\/]*)$/.test(link)) TimelineManager.setHistoryView(/^https:\/\/matrix.to\/#\/(!.*)$/.exec(link)[1])
 		else if (/^https:\/\/matrix.to\/#\/(![^\/]*)\/(\$.*)$/.test(link)) {
 			var match = /^https:\/\/matrix.to\/#\/(![^\/]*)\/(\$.*)$/.exec(link)
-			timelineManager.setHistoryView(match[1])
+			TimelineManager.setHistoryView(match[1])
 			chat.positionViewAtIndex(chat.model.idToIndex(match[2]), ListView.Contain)
 		}
 		else Qt.openUrlExternally(link)

resources/qml/Reactions.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.2
 
+import im.nheko 1.0
+
 // This class is for showing Reactions in the timeline row, not for
 // adding new reactions via the emoji picker
 Flow {
@@ -34,7 +36,7 @@ Flow {
 
 			onClicked: {
 				console.debug("Picked " + model.key + "in response to " + reactionFlow.eventId + " in room " + reactionFlow.roomId + ". selfReactedEvent: " + model.selfReactedEvent)
-				timelineManager.reactToMessage(reactionFlow.roomId, reactionFlow.eventId, model.key, model.selfReactedEvent)
+				TimelineManager.reactToMessage(reactionFlow.roomId, reactionFlow.eventId, model.key, model.selfReactedEvent)
 			}
 
 
@@ -46,7 +48,7 @@ Flow {
 
 				TextMetrics {
 					id: textMetrics
-					font.family: settings.emojiFont
+					font.family: Settings.emojiFont
 					elide: Text.ElideRight
 					elideWidth: 150
 					text: model.key
@@ -56,7 +58,7 @@ Flow {
 					anchors.baseline: reactionCounter.baseline
 					id: reactionText
 					text: textMetrics.elidedText + (textMetrics.elidedText == model.key ? "" : "…")
-					font.family: settings.emojiFont
+					font.family: Settings.emojiFont
 					color: reaction.hovered ? colors.highlight : colors.text
 					maximumLineCount: 1
 				}

resources/qml/TimelineRow.qml

@@ -26,7 +26,7 @@ MouseArea {
 		messageContextMenu.show(model.id, model.type, model.isEncrypted, row)
 	}
 	Rectangle {
-		color: (settings.messageHoverHighlight && parent.containsMouse) ? colors.base : "transparent"
+		color: (Settings.messageHoverHighlight && parent.containsMouse) ? colors.base : "transparent"
 		anchors.fill: row
 	}
 	RowLayout {
@@ -46,7 +46,7 @@ MouseArea {
 			Reply {
 				visible: model.replyTo
 				modelData: chat.model.getDump(model.replyTo)
-				userColor: timelineManager.userColor(modelData.userId, colors.window)
+				userColor: TimelineManager.userColor(modelData.userId, colors.window)
 			}
 
 			// actual message content
@@ -81,7 +81,7 @@ MouseArea {
 			width: 16
 		}
 		EmojiButton {
-			visible: settings.buttonsInTimeline
+			visible: Settings.buttonsInTimeline
 			Layout.alignment: Qt.AlignRight | Qt.AlignTop
 			Layout.preferredHeight: 16
 			width: 16
@@ -94,7 +94,7 @@ MouseArea {
 			event_id: model.id
 		}
 		ImageButton {
-			visible: settings.buttonsInTimeline
+			visible: Settings.buttonsInTimeline
 			Layout.alignment: Qt.AlignRight | Qt.AlignTop
 			Layout.preferredHeight: 16
 			width: 16
@@ -110,7 +110,7 @@ MouseArea {
 			onClicked: chat.model.replyAction(model.id)
 		}
 		ImageButton {
-			visible: settings.buttonsInTimeline
+			visible: Settings.buttonsInTimeline
 			Layout.alignment: Qt.AlignRight | Qt.AlignTop
 			Layout.preferredHeight: 16
 			width: 16

resources/qml/TimelineView.qml

@@ -9,6 +9,7 @@ import im.nheko.EmojiModel 1.0
 
 import "./delegates"
 import "./emoji"
+import "./device-verification"
 
 Page {
 	property var colors: currentActivePalette
@@ -18,6 +19,7 @@ Page {
 	property real highlightHue: colors.highlight.hslHue
 	property real highlightSat: colors.highlight.hslSaturation
 	property real highlightLight: colors.highlight.hslLightness
+	property variant userProfile
 
 	palette: colors
 
@@ -83,7 +85,7 @@ Page {
 			visible: messageContextMenu.eventType == MtxEvent.ImageMessage || messageContextMenu.eventType == MtxEvent.VideoMessage || messageContextMenu.eventType == MtxEvent.AudioMessage || messageContextMenu.eventType == MtxEvent.FileMessage || messageContextMenu.eventType == MtxEvent.Sticker
 			height: visible ? implicitHeight : 0
 			text: qsTr("Save as")
-			onTriggered: timelineManager.timeline.saveMedia(messageContextMenu.eventId)
+			onTriggered: TimelineManager.timeline.saveMedia(messageContextMenu.eventId)
 		}
 	}
 
@@ -93,8 +95,32 @@ Page {
 		anchors.fill: parent
 		color: colors.window
 
+		Component {
+			id: deviceVerificationDialog
+			DeviceVerification {}
+		}
+		Connections {
+			target: TimelineManager
+			function onNewDeviceVerificationRequest(flow,transactionId,userId,deviceId) {
+				flow.userId = userId;
+				flow.sender = false;
+				flow.deviceId = deviceId;
+				flow.tranId = transactionId;
+				deviceVerificationList.add(flow.tranId);
+				var dialog = deviceVerificationDialog.createObject(timelineRoot, {flow: flow});
+				dialog.show();
+			}
+		}
+		Connections {
+			target: TimelineManager.timeline
+			function onOpenProfile(profile) {
+				var userProfile = userProfileComponent.createObject(timelineRoot,{profile: profile});
+				userProfile.show();
+			}
+		}
+
 		Label {
-			visible: !timelineManager.timeline && !timelineManager.isInitialSync
+			visible: !TimelineManager.timeline && !TimelineManager.isInitialSync
 			anchors.centerIn: parent
 			text: qsTr("No room open")
 			font.pointSize: 24
@@ -104,7 +130,7 @@ Page {
 		BusyIndicator {
 			visible: running
 			anchors.centerIn: parent
-			running: timelineManager.isInitialSync
+			running: TimelineManager.isInitialSync
 			height: 200
 			width: 200
 			z: 3
@@ -113,7 +139,7 @@ Page {
 		ListView {
 			id: chat
 
-			visible: timelineManager.timeline != null
+			visible: TimelineManager.timeline != null
 
 			cacheBuffer: 400
 
@@ -125,7 +151,7 @@ Page {
 			anchors.leftMargin: 4
 			anchors.rightMargin: scrollbar.width
 
-			model: timelineManager.timeline
+			model: TimelineManager.timeline
 
 			boundsBehavior: Flickable.StopAtBounds
 
@@ -171,7 +197,7 @@ Page {
 
 			onCountChanged: if (atYEnd) model.currentIndex = 0 // Mark last event as read, since we are at the bottom
 
-			property int delegateMaxWidth: (settings.timelineMaxWidth > 100 && (parent.width - settings.timelineMaxWidth) > 32) ? settings.timelineMaxWidth : (parent.width - 32)
+			property int delegateMaxWidth: (Settings.timelineMaxWidth > 100 && (parent.width - Settings.timelineMaxWidth) > 32) ? Settings.timelineMaxWidth : (parent.width - 32)
 
 			delegate: Rectangle {
 				// This would normally be previousSection, but our model's order is inverted.
@@ -213,6 +239,11 @@ Page {
 
 			}
 
+			Component{
+				id: userProfileComponent
+				UserProfile{}
+			}
+
 			section {
 				property: "section"
 			}
@@ -248,6 +279,7 @@ Page {
 							color: colors.base
 						}
 					}
+
 					Row {
 						height: userName.height
 						spacing: 8
@@ -270,25 +302,17 @@ Page {
 						Label { 
 							id: userName
 							text: chat.model.escapeEmoji(modelData.userName)
-							color: timelineManager.userColor(modelData.userId, colors.window)
+							color: TimelineManager.userColor(modelData.userId, colors.window)
 							textFormat: Text.RichText
 
 							MouseArea {
 								anchors.fill: parent
-								onClicked: chat.model.openUserProfile(section.split(" ")[0])
+								Layout.alignment: Qt.AlignHCenter
+								onClicked: chat.model.openUserProfile(modelData.userId)
 								cursorShape: Qt.PointingHandCursor
 								propagateComposedEvents: true
 							}
 						}
-
-						Label {
-							color: colors.buttonText
-							text: timelineManager.userStatus(modelData.userId)
-							textFormat: Text.PlainText
-							elide: Text.ElideRight
-							width: chat.delegateMaxWidth - parent.spacing*2 - userName.implicitWidth - avatarSize
-							font.italic: true
-						}
 					}
 				}
 			}
@@ -352,7 +376,7 @@ Page {
 						anchors.bottom: parent.bottom
 
 						modelData: chat.model ? chat.model.getDump(chat.model.reply) : {}
-						userColor: timelineManager.userColor(modelData.userId, colors.window)
+						userColor: TimelineManager.userColor(modelData.userId, colors.window)
 					}
 
 					ImageButton {