Add hide password on SFTP page feature (#719)

Hide password on SFTP page feature

client/ui/qml/Controls2/LabelWithButtonType.qml

@@ -15,11 +15,13 @@ Item {
 
     property var clickedFunction
 
+    property string buttonImageSource
     property string rightImageSource
     property string leftImageSource
     property bool isLeftImageHoverEnabled: true //todo separete this qml file to 3
 
     property alias rightButton: rightImage
+    property alias eyeButton: eyeImage
     property FlickableType parentFlickable
 
     property string textColor: "#d7d8db"
@@ -34,6 +36,7 @@ Item {
     property string rightImageColor: "#d7d8db"
 
     property bool descriptionOnTop: false
+    property bool hideDescription: true
 
     implicitWidth: content.implicitWidth + content.anchors.topMargin + content.anchors.bottomMargin
     implicitHeight: content.implicitHeight + content.anchors.leftMargin + content.anchors.rightMargin
@@ -57,6 +60,45 @@ Item {
         }
     }
 
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: root.enabled
+
+        onEntered: {
+            if (rightImageSource) {
+                rightImageBackground.color = rightImage.hoveredColor
+            } else if (leftImageSource) {
+                leftImageBackground.color = rightImage.hoveredColor
+            }
+            root.textOpacity = 0.8
+        }
+
+        onExited: {
+            if (rightImageSource) {
+                rightImageBackground.color = rightImage.defaultColor
+            } else if (leftImageSource) {
+                leftImageBackground.color = rightImage.defaultColor
+            }
+            root.textOpacity = 1
+        }
+
+        onPressedChanged: {
+            if (rightImageSource) {
+                rightImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
+            } else if (leftImageSource) {
+                leftImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
+            }
+            root.textOpacity = 0.7
+        }
+
+        onClicked: {
+            if (clickedFunction && typeof clickedFunction === "function") {
+                clickedFunction()
+            }
+        }
+    }
+
     RowLayout {
         id: content
         anchors.fill: parent
@@ -129,7 +171,7 @@ Item {
             CaptionTextType {
                 id: description
 
-                text: root.descriptionText
+                text: (eyeImage.visible && hideDescription) ? replaceWithAsterisks(root.descriptionText) : root.descriptionText
                 color: {
                     if (root.enabled) {
                         return root.descriptionOnTop ? root.textColor : root.descriptionColor
@@ -154,6 +196,47 @@ Item {
                 Behavior on opacity {
                     PropertyAnimation { duration: 200 }
                 }
+
+                function replaceWithAsterisks(input) {
+                    return '*'.repeat(input.length)
+                }
+            }
+        }
+
+        ImageButtonType {
+            id: eyeImage
+            visible: buttonImageSource !== ""
+
+            implicitWidth: 40
+            implicitHeight: 40
+
+            hoverEnabled: true
+            image: buttonImageSource
+            imageColor: rightImageColor
+
+            Layout.alignment: Qt.AlignRight
+
+            Rectangle {
+                id: eyeImageBackground
+                anchors.fill: parent
+                radius: 12
+                color: "transparent"
+
+                Behavior on color {
+                    PropertyAnimation { duration: 200 }
+                }
+            }
+
+            onClicked: {
+                hideDescription = !hideDescription
+            }
+
+            Keys.onEnterPressed: {
+                clicked()
+            }
+
+            Keys.onReturnPressed: {
+                clicked()
             }
         }
 
@@ -180,6 +263,11 @@ Item {
                     PropertyAnimation { duration: 200 }
                 }
             }
+            onClicked: {
+                if (clickedFunction && typeof clickedFunction === "function") {
+                    clickedFunction()
+                }
+            }
         }
     }
 
@@ -197,45 +285,6 @@ Item {
         }
     }
 
-    MouseArea {
-        anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor
-        hoverEnabled: root.enabled
-
-        onEntered: {
-            if (rightImageSource) {
-                rightImageBackground.color = rightImage.hoveredColor
-            } else if (leftImageSource) {
-                leftImageBackground.color = rightImage.hoveredColor
-            }
-            root.textOpacity = 0.8
-        }
-
-        onExited: {
-            if (rightImageSource) {
-                rightImageBackground.color = rightImage.defaultColor
-            } else if (leftImageSource) {
-                leftImageBackground.color = rightImage.defaultColor
-            }
-            root.textOpacity = 1
-        }
-
-        onPressedChanged: {
-            if (rightImageSource) {
-                rightImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
-            } else if (leftImageSource) {
-                leftImageBackground.color = pressed ? rightImage.pressedColor : entered ? rightImage.hoveredColor : rightImage.defaultColor
-            }
-            root.textOpacity = 0.7
-        }
-
-        onClicked: {
-            if (clickedFunction && typeof clickedFunction === "function") {
-                clickedFunction()
-            }
-        }
-    }
-
     Keys.onEnterPressed: {
         if (clickedFunction && typeof clickedFunction === "function") {
             clickedFunction()

client/ui/qml/Pages2/PageServiceSftpSettings.qml

@@ -159,7 +159,7 @@ PageType {
                             descriptionOnTop: true
 
                             parentFlickable: fl
-                            KeyNavigation.tab: passwordLabel.rightButton
+                            KeyNavigation.tab: passwordLabel.eyeButton
 
                             rightImageSource: "qrc:/images/controls/copy.svg"
                             rightImageColor: "#D7D8DB"
@@ -183,7 +183,8 @@ PageType {
                             descriptionOnTop: true
 
                             parentFlickable: fl
-                            Keys.onTabPressed: {
+                            eyeButton.KeyNavigation.tab: passwordLabel.rightButton
+                            rightButton.Keys.onTabPressed: {
                                 if (mountButton.visible) {
                                     mountButton.forceActiveFocus()
                                 } else {
@@ -194,6 +195,8 @@ PageType {
                             rightImageSource: "qrc:/images/controls/copy.svg"
                             rightImageColor: "#D7D8DB"
 
+                            buttonImageSource: hideDescription ? "qrc:/images/controls/eye.svg" : "qrc:/images/controls/eye-off.svg"
+
                             clickedFunction: function() {
                                 GC.copyToClipBoard(descriptionText)
                                 PageController.showNotificationMessage(qsTr("Copied"))