qml: create PasswordField control

electrum/gui/qml/components/OpenWallet.qml

@@ -44,22 +44,27 @@ Pane {
             error: true
         }
 
-        Label {
-            text: qsTr('Password')
-            visible: wallet_db.needsPassword
-        }
-
-        TextField {
-            id: password
-            visible: wallet_db.needsPassword
-            echoMode: TextInput.Password
-            inputMethodHints: Qt.ImhSensitiveData
-            onTextChanged: {
-                unlockButton.enabled = true
-                _unlockClicked = false
+        RowLayout {
+            Layout.columnSpan: 2
+            Layout.alignment: Qt.AlignHCenter
+            Layout.maximumWidth: parent.width * 2/3
+            Label {
+                text: qsTr('Password')
+                visible: wallet_db.needsPassword
+                Layout.fillWidth: true
             }
-            onAccepted: {
-                unlock()
+
+            PasswordField {
+                id: password
+                visible: wallet_db.needsPassword
+                Layout.fillWidth: true
+                onTextChanged: {
+                    unlockButton.enabled = true
+                    _unlockClicked = false
+                }
+                onAccepted: {
+                    unlock()
+                }
             }
         }
 

electrum/gui/qml/components/PasswordDialog.qml

@@ -29,7 +29,7 @@ ElDialog {
         rowSpacing: 0
 
         Image {
-            source: "../../../icons/lock.png"
+            source: "../../icons/lock.png"
             Layout.preferredWidth: constants.iconSizeXLarge
             Layout.preferredHeight: constants.iconSizeXLarge
             Layout.leftMargin: constants.paddingMedium
@@ -76,9 +76,8 @@ ElDialog {
                 text: qsTr('Password')
             }
 
-            TextField {
+            PasswordField {
                 id: pw_1
-                echoMode: TextInput.Password
             }
 
             Label {
@@ -86,9 +85,8 @@ ElDialog {
                 visible: confirmPassword
             }
 
-            TextField {
+            PasswordField {
                 id: pw_2
-                echoMode: TextInput.Password
                 visible: confirmPassword
             }
         }

electrum/gui/qml/components/controls/PasswordField.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.6
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 2.1
+
+RowLayout {
+    id: root
+    property alias text: password_tf.text
+
+    signal accepted
+
+    TextField {
+        id: password_tf
+        echoMode: TextInput.Password
+        inputMethodHints: Qt.ImhSensitiveData
+        Layout.fillWidth: true
+        onAccepted: root.accepted()
+    }
+    ToolButton {
+        icon.source: '../../../icons/eye1.png'
+        onClicked: {
+            password_tf.echoMode = password_tf.echoMode == TextInput.Password ? TextInput.Normal : TextInput.Password
+        }
+    }
+}

electrum/gui/qml/components/controls/ProxyConfig.qml

@@ -75,10 +75,9 @@ Item {
                 enabled: password_tf.enabled
             }
 
-            TextField {
+            PasswordField {
                 id: password_tf
                 enabled: proxytype.enabled && proxytype.currentIndex > 0
-                echoMode: TextInput.Password
             }
         }
     }

electrum/gui/qml/components/wizard/WCWalletPassword.qml

@@ -2,6 +2,8 @@ import QtQuick 2.6
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.1
 
+import "../controls"
+
 WizardComponent {
     valid: password1.text === password2.text && password1.text.length > 4
 
@@ -13,13 +15,11 @@ WizardComponent {
     GridLayout {
         columns: 1
         Label { text: qsTr('Password protect wallet?') }
-        TextField {
+        PasswordField {
             id: password1
-            echoMode: TextInput.Password
         }
-        TextField {
+        PasswordField {
             id: password2
-            echoMode: TextInput.Password
         }
     }
 }