Adding device verification to user profile

CMakeLists.txt

@@ -277,6 +277,8 @@ set(SRC_FILES
 	src/ui/ToggleButton.cpp
 	src/ui/Theme.cpp
 	src/ui/ThemeManager.cpp
+	src/ui/UserProfile.cpp
+	src/ui/UserProfileModel.cpp
 
 	src/AvatarProvider.cpp
 	src/BlurhashProvider.cpp
@@ -285,6 +287,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
@@ -479,6 +482,8 @@ qt5_wrap_cpp(MOC_HEADERS
 	src/ui/ToggleButton.h
 	src/ui/Theme.h
 	src/ui/ThemeManager.h
+	src/ui/UserProfile.h
+	src/ui/UserProfileModel.h
 
 	src/notifications/Manager.h
 
@@ -488,6 +493,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

@@ -53,12 +53,12 @@ Rectangle {
 		height: avatar.height / 6
 		width: height
 		radius: settings.avatarCircles ? height / 2 : height / 4
-		color: switch (timelineManager.userPresence(userid)) {
-			case "online": return "#00cc66"
-			case "unavailable": return "#ff9933"
-			case "offline": return "#a82353"
-			default: "transparent"
-		}
+		// color: switch (timelineManager.userPresence(userid)) {
+		// 	case "online": return "#00cc66"
+		// 	case "unavailable": return "#ff9933"
+		// 	case "offline": return "#a82353"
+		// 	default: "transparent"
+		// }
 	}
 
 	color: colors.base

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
@@ -93,6 +94,24 @@ Page {
 		anchors.fill: parent
 		color: colors.window
 
+		Component {
+			id: deviceVerificationDialog
+			DeviceVerification {}
+		}
+		Connections {
+			target: timelineManager
+			onNewDeviceVerificationRequest: {
+				flow.userId = userId;
+				flow.sender = false;
+				flow.deviceId = deviceId;
+				flow.tranId = transactionId;
+				deviceVerificationList.add(flow.tranId);
+				var dialog = deviceVerificationDialog.createObject(timelineRoot, 
+                    {flow: flow,sender: false});
+				dialog.show();
+			}
+		}
+
 		Label {
 			visible: !timelineManager.timeline && !timelineManager.isInitialSync
 			anchors.centerIn: parent
@@ -248,6 +267,9 @@ Page {
 							color: colors.base
 						}
 					}
+
+					property variant userProfile
+
 					Row {
 						height: userName.height
 						spacing: 8
@@ -261,7 +283,12 @@ Page {
 
 							MouseArea {
 								anchors.fill: parent
-								onClicked: chat.model.openUserProfile(modelData.userId)
+                                onClicked: {
+									if(userProfile) userProfile.destroy()
+									var component = Qt.createComponent("UserProfile.qml");
+									userProfile = component.createObject(timelineRoot,{user_data : modelData});
+									userProfile.show();
+                                }
 								cursorShape: Qt.PointingHandCursor
 								propagateComposedEvents: true
 							}
@@ -275,20 +302,17 @@ Page {
 
 							MouseArea {
 								anchors.fill: parent
-								onClicked: chat.model.openUserProfile(section.split(" ")[0])
+								Layout.alignment: Qt.AlignHCenter
+                                onClicked: {
+									if(userProfile) userProfile.destroy()
+									var component = Qt.createComponent("UserProfile.qml")
+									userProfile = component.createObject(timelineRoot,{user_data : modelData})
+									userProfile.show()
+                                }
 								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
-						}
 					}
 				}
 			}

resources/qml/UserProfile.qml

@@ -0,0 +1,155 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.2
+import QtQuick.Window 2.3
+
+import im.nheko 1.0
+
+import "./device-verification"
+
+ApplicationWindow{
+    property var user_data
+    property var colors: currentActivePalette
+
+    id:userProfileDialog
+    height: 500
+    width: 500
+    modality:Qt.WindowModal
+    Layout.alignment: Qt.AlignHCenter
+    palette: colors
+
+    UserProfileList{
+        id: userProfileList
+        userId: user_data.userId
+        onUserIdChanged : {
+            userProfileList.updateDeviceList()
+        }
+        onDeviceListUpdated : {
+            modelDeviceList.deviceList = userProfileList
+        }
+    }
+
+    Component {
+		id: deviceVerificationDialog
+		DeviceVerification {}
+	}
+    Component{
+        id: deviceVerificationFlow
+        DeviceVerificationFlow {}
+    }
+
+    background: Item{
+        id: userProfileItem
+        width: userProfileDialog.width
+        height: userProfileDialog.height
+        anchors.margins: {
+            top:20
+        }
+
+        ColumnLayout{
+            anchors.fill: userProfileItem
+            width: userProfileDialog.width
+            spacing: 10
+
+            Avatar{
+                id: userProfileAvatar
+                url:chat.model.avatarUrl(user_data.userId).replace("mxc://", "image://MxcImage/")
+                height: 130
+                width: 130
+                displayName: modelData.userName
+                Layout.alignment: Qt.AlignHCenter
+            }
+
+            Label{
+                id: userProfileName
+                text: user_data.userName
+                fontSizeMode: Text.HorizontalFit
+                Layout.alignment: Qt.AlignHCenter
+            }
+
+            Label{
+                id: matrixUserID
+                text: user_data.userId
+                fontSizeMode: Text.HorizontalFit
+                Layout.alignment: Qt.AlignHCenter
+            }
+
+            ScrollView {
+                implicitHeight: userProfileDialog.height/2+20
+                implicitWidth: userProfileDialog.width-20
+                clip: true
+                Layout.alignment: Qt.AlignHCenter
+                ScrollBar.horizontal.policy: ScrollBar.AlwaysOn
+                ScrollBar.vertical.policy: ScrollBar.AlwaysOn
+
+                ListView{
+                    id: deviceList
+                    anchors.fill: parent
+                    clip: true
+                    spacing: 10
+
+                    model: UserProfileModel{
+                        id: modelDeviceList
+                    } 
+
+                    delegate: RowLayout{
+                        width: parent.width
+                        ColumnLayout{
+                            Text{
+                                Layout.fillWidth: true
+                                color: colors.text
+                                Layout.alignment: Qt.AlignRight
+                                text: deviceID
+                            }
+                            Text{
+                                Layout.fillWidth: true
+                                color:colors.text
+                                Layout.alignment: Qt.AlignRight
+                                text: displayName
+                            }
+                        }
+                        Button{
+                            id: verifyButton
+                            text:"Verify"
+                            onClicked: {
+                                var newFlow = deviceVerificationFlow.createObject(userProfileDialog,
+                                {userId : user_data.userId,sender: true,deviceId : model.deviceID});
+                                deviceVerificationList.add(newFlow.tranId);
+								var dialog = deviceVerificationDialog.createObject(userProfileDialog, 
+                                    {flow: newFlow,sender: true});
+				                dialog.show();
+                            }
+                            contentItem: Text {
+                                text: verifyButton.text
+                                color: colors.background
+                                horizontalAlignment: Text.AlignHCenter
+                                verticalAlignment: Text.AlignVCenter
+                            }
+                        }
+                    }
+                }
+            }
+
+            Button{
+                id: okbutton
+                text:"OK"
+                onClicked: userProfileDialog.close()
+                anchors.margins: {
+                    right:10
+                    bottom:10
+                }
+
+                contentItem: Text {
+                    text: okbutton.text
+                    color: colors.background
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                }
+
+                Layout.alignment: Qt.AlignRight | Qt.AlignBottom
+            }
+        }
+
+        Item { Layout.fillHeight: true }
+    }
+}