Merge pull request #1656 from Bubu/show_pw_button

Add show/hide password button on login page

resources/icons/ui/eye-hide.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.22 2.22a.75.75 0 0 0-.073.976l.073.084 4.034 4.035a9.986 9.986 0 0 0-3.955 5.75.75.75 0 0 0 1.455.364 8.49 8.49 0 0 1 3.58-5.034l1.81 1.81A4 4 0 0 0 14.8 15.86l5.919 5.92a.75.75 0 0 0 1.133-.977l-.073-.084-6.113-6.114.001-.002-6.95-6.946.002-.002-1.133-1.13L3.28 2.22a.75.75 0 0 0-1.06 0ZM12 5.5c-1 0-1.97.148-2.889.425l1.237 1.236a8.503 8.503 0 0 1 9.899 6.272.75.75 0 0 0 1.455-.363A10.003 10.003 0 0 0 12 5.5Zm.195 3.51 3.801 3.8a4.003 4.003 0 0 0-3.801-3.8Z" fill="#212121"/>
+</svg>

resources/icons/ui/eye-show.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 9.005a4 4 0 1 1 0 8 4 4 0 0 1 0-8ZM12 5.5c4.613 0 8.596 3.15 9.701 7.564a.75.75 0 1 1-1.455.365 8.503 8.503 0 0 0-16.493.004.75.75 0 0 1-1.455-.363A10.003 10.003 0 0 1 12 5.5Z" fill="#212121"/></svg>

resources/qml/pages/LoginPage.qml

@@ -82,15 +82,36 @@ Item {
                 visible: text
                 wrapMode: TextEdit.Wrap
             }
+            RowLayout {
 
-            MatrixTextField {
+                MatrixTextField {
-                id: passwordLabel
+                    id: passwordLabel
-                Layout.fillWidth: true
+                    Layout.fillWidth: true
-                label: qsTr("Password")
+                    label: qsTr("Password")
-                echoMode: TextInput.Password
+                    echoMode: TextInput.Password
-                ToolTip.text: qsTr("Your password.")
+                    ToolTip.text: qsTr("Your password.")
-                visible: login.passwordSupported
+                    visible: login.passwordSupported
-                Keys.forwardTo: [pwBtn, ssoRepeater]
+                    Keys.forwardTo: [pwBtn, ssoRepeater]
+                }
+
+                ImageButton {
+                    id: showPwButton
+                    Layout.preferredWidth: 30
+                    Layout.preferredHeight: 30
+                    visible: login.passwordSupported
+                    Layout.alignment: Qt.AlignBottom
+                    image: passwordLabel.echoMode === TextInput.Password ? ":/icons/icons/ui/eye-show.svg" : ":/icons/icons/ui/eye-hide.svg"
+                    ToolTip.visible: hovered
+                    ToolTip.text: qsTr("Show/Hide Password")
+                    onClicked: {
+                        if (passwordLabel.echoMode === TextInput.Normal) {
+                            passwordLabel.echoMode = TextInput.Password
+                        }
+                        else {
+                            passwordLabel.echoMode = TextInput.Normal
+                        }
+                    }
+                }
             }
 
             MatrixTextField {

resources/res.qrc

@@ -18,6 +18,8 @@
         <file>icons/ui/edit.svg</file>
         <file>icons/ui/end-call.svg</file>
         <file>icons/ui/expanded.svg</file>
+        <file>icons/ui/eye-hide.svg</file>
+        <file>icons/ui/eye-show.svg</file>
         <file>icons/ui/go-to.svg</file>
         <file>icons/ui/image-failed.svg</file>
         <file>icons/ui/image.svg</file>