Update: Added partial profile picture support.

Components/Input.qml

@@ -15,6 +15,21 @@ Column {
     property ComboBox exposeSession: sessionSelect.exposeSession
     property bool failed
 
+    // Custom addition: exposes the face icon of the currently typed/selected
+    // user so it can be shown in ProfilePicture, above the login field
+    property url currentUserIcon: {
+        var typedUser = username.text
+        for (var i = 0; i < userRegistry.list.length; i++) {
+            var u = userRegistry.list[i]
+            if (typedUser === "") {
+                if (i === selectUser.currentIndex) return u.icon || ""
+            } else if (typedUser === u.realName || typedUser === u.name) {
+                return u.icon || ""
+            }
+        }
+        return ""
+    }
+
     function triggerLogin() {
         var typedUser = username.text
         var targetUser = typedUser
@@ -548,7 +563,7 @@ Column {
             Item {
                 Component.onCompleted: {
                     var currentList = userRegistry.list
-                    currentList.push({ "name": model.name, "realName": model.realName || "" })
+                    currentList.push({ "name": model.name, "realName": model.realName || "", "icon": model.icon || "" })
                     userRegistry.list = currentList
                 }
             }

Components/LoginForm.qml

@@ -16,13 +16,21 @@ ColumnLayout {
 
     Clock {
         id: clock
-
         Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
         // important
         Layout.preferredHeight: root.height / 3
         Layout.leftMargin: p != "0" ? a == "left" ? -p : a == "right" ? p : 0 : 0
     }
 
+    ProfilePicture {
+        id: profilePicture
+        visible: false
+        Layout.alignment: Qt.AlignHCenter
+        Layout.preferredWidth: root.height / 7
+        Layout.preferredHeight: root.height / 7
+        Layout.leftMargin: p != "0" ? a == "left" ? -p : a == "right" ? p : 0 : 0
+    }
+
     Input {
         id: input
 

Components/ProfilePicture.qml

@@ -0,0 +1,57 @@
+import QtQuick
+import QtQuick.Effects
+
+Item {
+    id: profilePicture
+    // visible: false
+    property url userIcon: input.currentUserIcon
+    property bool hasCustomIcon: userIcon != ""
+
+    Rectangle {
+        anchors.fill: avatarImage
+        radius: width / 2
+        color: config.LoginFieldBackgroundColor || "#000000"
+        opacity: 0.2
+        z: -1
+    }
+
+    Image {
+        id: avatarImage
+
+        anchors.fill: parent
+        anchors.margins: ringBorder.border.width
+        source: hasCustomIcon ? profilePicture.userIcon : Qt.resolvedUrl("../Assets/User.svg")
+        fillMode: hasCustomIcon ? Image.PreserveAspectCrop : Image.PreserveAspectFit
+        smooth: true
+        mipmap: true
+        asynchronous: true
+        visible: false
+
+    }
+
+    Rectangle {
+        id: circleMask
+
+        anchors.fill: avatarImage
+        radius: width / 2
+        visible: false
+        layer.enabled: true
+    }
+
+    MultiEffect {
+        anchors.fill: avatarImage
+        source: avatarImage
+        maskEnabled: true
+        maskSource: circleMask
+    }
+
+    Rectangle {
+        id: ringBorder
+
+        anchors.fill: parent
+        radius: width / 2
+        color: "transparent"
+        border.width: 3
+        border.color: config.DateTextColor || "#ffffff"
+    }
+}