From 78fa52285f25ebbd68f3318b724fe4bd8c8f726f Mon Sep 17 00:00:00 2001
From: Wayne Chen <wayne@ad.highfidelity.io>
Date: Wed, 5 Sep 2018 23:48:21 -0700
Subject: [PATCH] adding show password toggle in textfield

---
 interface/resources/images/eyeClosed.svg      |  5 +++
 interface/resources/images/eyeOpen.svg        |  4 +++
 .../qml/LoginDialog/LinkAccountBody.qml       | 36 +++++++++++++++----
 3 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 interface/resources/images/eyeClosed.svg
 create mode 100644 interface/resources/images/eyeOpen.svg

diff --git a/interface/resources/images/eyeClosed.svg b/interface/resources/images/eyeClosed.svg
new file mode 100644
index 0000000000..6719471b3d
--- /dev/null
+++ b/interface/resources/images/eyeClosed.svg
@@ -0,0 +1,5 @@
+<svg width="31" height="23" viewBox="0 0 31 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.59534 11.0156C6.16042 13.4128 9.65987 15.5898 13.6042 16.1774C17.686 16.7856 22.4164 15.7196 27.3057 11.0659C22.0721 6.07309 17.0642 5.14115 12.9153 5.90073C8.99427 6.61859 5.69298 8.87688 3.59534 11.0156ZM12.455 3.27591C17.7727 2.30235 23.9836 3.74895 30.1053 10.1333L31 11.0664L30.1053 11.9994C24.3636 17.9875 18.4774 19.5983 13.2276 18.8161C8.06048 18.0463 3.70384 14.9892 0.837069 11.9994L0 11.1265L0.778477 10.1986C3.05338 7.48717 7.2318 4.23217 12.455 3.27591Z" fill="#3D3D3D"/>
+<ellipse cx="15.6539" cy="10.9218" rx="3.65386" ry="3.81061" fill="#3D3D3D"/>
+<line x1="25" y1="2.12132" x2="7.12132" y2="20" stroke="#3D3D3D" stroke-width="3" stroke-linecap="round"/>
+</svg>
diff --git a/interface/resources/images/eyeOpen.svg b/interface/resources/images/eyeOpen.svg
new file mode 100644
index 0000000000..ec5ceb5238
--- /dev/null
+++ b/interface/resources/images/eyeOpen.svg
@@ -0,0 +1,4 @@
+<svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.59534 8.01564C6.16042 10.4128 9.65987 12.5898 13.6042 13.1774C17.686 13.7856 22.4164 12.7196 27.3057 8.06585C22.0721 3.07309 17.0642 2.14115 12.9153 2.90073C8.99427 3.61859 5.69298 5.87688 3.59534 8.01564ZM12.455 0.275915C17.7727 -0.697651 23.9836 0.748949 30.1053 7.13329L31 8.06636L30.1053 8.99944C24.3636 14.9875 18.4774 16.5983 13.2276 15.8161C8.06048 15.0463 3.70384 11.9892 0.837069 8.99944L0 8.12646L0.778477 7.1986C3.05338 4.48717 7.2318 1.23217 12.455 0.275915Z" fill="#3D3D3D"/>
+<ellipse cx="15.644" cy="7.92179" rx="3.65386" ry="3.81061" fill="#3D3D3D"/>
+</svg>
diff --git a/interface/resources/qml/LoginDialog/LinkAccountBody.qml b/interface/resources/qml/LoginDialog/LinkAccountBody.qml
index 423f6cc73b..c40dff61ee 100644
--- a/interface/resources/qml/LoginDialog/LinkAccountBody.qml
+++ b/interface/resources/qml/LoginDialog/LinkAccountBody.qml
@@ -86,7 +86,7 @@ Item {
         width: 48
         height: 48
     }
-    
+
     ShortcutText {
         id: mainTextContainer
         anchors {
@@ -142,6 +142,7 @@ Item {
 
                 onLinkActivated: loginDialog.openUrl(link)
             }
+
             onFocusChanged: {
                 root.text = "";
             }
@@ -151,7 +152,6 @@ Item {
             id: passwordField
             width: parent.width
             placeholderText: "Password"
-            echoMode: showPassword.checked ? TextInput.Normal : TextInput.Password
             activeFocusOnPress: true
 
             ShortcutText {
@@ -177,12 +177,34 @@ Item {
                 root.isPassword = true;
             }
 
-            Keys.onReturnPressed: linkAccountBody.login()
-        }
+            Image {
+                id: showPasswordImage
+                x: parent.width - 40
+                height: parent.height
+                width: parent.width - (parent.width - 40)
+                source: "../../images/eyeOpen.svg"
+            }
 
-        CheckBox {
-            id: showPassword
-            text: "Show password"
+            Rectangle {
+                z: 10
+                x: parent.width - 40
+                width: parent.width - (parent.width - 40)
+                height: parent.height
+                color: "transparent"
+                MouseArea {
+                    id: passwordFieldMouseArea
+                    anchors.fill: parent
+                    acceptedButtons: Qt.LeftButton
+                    property bool showPassword: false
+                    onClicked: {
+                        showPassword = !showPassword;
+                        passwordField.echoMode = showPassword ? TextInput.Normal : TextInput.Password;
+                        showPasswordImage.source = showPassword ?  "../../images/eyeClosed.svg" : "../../images/eyeOpen.svg";
+                    }
+                }
+            }
+
+            Keys.onReturnPressed: linkAccountBody.login()
         }
 
         InfoItem {