SettingsWallet: readd change password button

2 files changed, 134 insertions, 6 deletions

diff --git a/components/NewPasswordDialog.qml b/components/NewPasswordDialog.qml
index f974965d..7d6387c4 100644
--- a/components/NewPasswordDialog.qml
+++ b/components/NewPasswordDialog.qml
@@ -40,6 +40,7 @@ Item {
     visible: false
     z: parent.z + 2
 
+    property bool isHidden: true
     property alias password: passwordInput1.text
 
     // same signals as Dialog has
@@ -67,6 +68,12 @@ Item {
         root.visible = false;
         closeCallback();
     }
+    
+    function toggleIsHidden() {
+        passwordInput1.echoMode = isHidden ? TextInput.Normal : TextInput.Password;
+        passwordInput2.echoMode = isHidden ? TextInput.Normal : TextInput.Password;
+        isHidden = !isHidden;
+    }
 
     // TODO: implement without hardcoding sizes
     width: 480
@@ -119,6 +126,8 @@ Item {
                 leftPadding: 10
                 topPadding: 10
                 color: MoneroComponents.Style.defaultFontColor
+                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectedTextColor: MoneroComponents.Style.defaultFontColor
                 KeyNavigation.tab: passwordInput2
 
                 background: Rectangle {
@@ -128,12 +137,32 @@ Item {
                     color: "black"
 
                     Image {
-                        width: 12
-                        height: 16
-                        source: "../images/lockIcon.png"
+                        width: 26 * scaleRatio
+                        height: 26 * scaleRatio
+                        opacity: 0.7
+                        fillMode: Image.PreserveAspectFit
+                        source: isHidden ? "../images/eyeShow.png" : "../images/eyeHide.png"
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.right: parent.right
                         anchors.rightMargin: 20
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            hoverEnabled: true
+                            onClicked: {
+                                toggleIsHidden()
+                            }
+                            onEntered: {
+                                parent.opacity = 0.9
+                                parent.width = 28 * scaleRatio
+                                parent.height = 28 * scaleRatio
+                            }
+                            onExited: {
+                                parent.opacity = 0.7
+                                parent.width = 26 * scaleRatio
+                                parent.height = 26 * scaleRatio
+                            }
+                        }
                     }
                 }
 
@@ -178,6 +207,8 @@ Item {
                 leftPadding: 10
                 topPadding: 10
                 color: MoneroComponents.Style.defaultFontColor
+                selectionColor: MoneroComponents.Style.dimmedFontColor
+                selectedTextColor: MoneroComponents.Style.defaultFontColor
 
                 background: Rectangle {
                     radius: 2
@@ -186,12 +217,32 @@ Item {
                     color: "black"
 
                     Image {
-                        width: 12
-                        height: 16
-                        source: "../images/lockIcon.png"
+                        width: 26 * scaleRatio
+                        height: 26 * scaleRatio
+                        opacity: 0.7
+                        fillMode: Image.PreserveAspectFit
+                        source: isHidden ? "../images/eyeShow.png" : "../images/eyeHide.png"
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.right: parent.right
                         anchors.rightMargin: 20
+                        MouseArea {
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            hoverEnabled: true
+                            onClicked: {
+                                toggleIsHidden()
+                            }
+                            onEntered: {
+                                parent.opacity = 0.9
+                                parent.width = 28 * scaleRatio
+                                parent.height = 28 * scaleRatio
+                            }
+                            onExited: {
+                                parent.opacity = 0.7
+                                parent.width = 26 * scaleRatio
+                                parent.height = 26 * scaleRatio
+                            }
+                        }
                     }
                 }
 
diff --git a/pages/settings/SettingsWallet.qml b/pages/settings/SettingsWallet.qml
index 004a0bec..aafbba5c 100644
--- a/pages/settings/SettingsWallet.qml
+++ b/pages/settings/SettingsWallet.qml
@@ -324,6 +324,83 @@ Rectangle {
                 width: 135 * scaleRatio
             }
         }
+        Rectangle {
+            // divider
+            Layout.preferredHeight: 1 * scaleRatio
+            Layout.fillWidth: true
+            Layout.topMargin: 8 * scaleRatio
+            Layout.bottomMargin: 8 * scaleRatio
+            color: MoneroComponents.Style.dividerColor
+            opacity: MoneroComponents.Style.dividerOpacity
+        }
+
+        GridLayout {
+            Layout.fillWidth: true
+            Layout.preferredHeight: settingsWallet.itemHeight
+            columnSpacing: 0
+
+            ColumnLayout {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter
+                spacing: 0
+
+                Text {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 20 * scaleRatio
+                    Layout.topMargin: 8 * scaleRatio
+                    color: "white"
+                    font.bold: true
+                    font.family: MoneroComponents.Style.fontRegular.name
+                    font.pixelSize: 16 * scaleRatio
+                    text: qsTr("Change wallet password") + translationManager.emptyString
+                }
+
+                TextArea {
+                    Layout.fillWidth: true
+                    color: MoneroComponents.Style.dimmedFontColor
+                    font.family: MoneroComponents.Style.fontRegular.name
+                    font.pixelSize: 14 * scaleRatio
+                    horizontalAlignment: TextInput.AlignLeft
+                    selectByMouse: false
+                    wrapMode: Text.WordWrap;
+                    textMargin: 0
+                    leftPadding: 0
+                    topPadding: 0
+                    text: qsTr("Change the password of your wallet.") + translationManager.emptyString
+                    width: parent.width
+                    readOnly: true
+
+                    // @TODO: Legacy. Remove after Qt 5.8.
+                    // https://stackoverflow.com/questions/41990013
+                    MouseArea {
+                        anchors.fill: parent
+                        enabled: false
+                    }
+                } 
+            }
+
+            MoneroComponents.StandardButton {
+                small: true
+                text: qsTr("Change password") + translationManager.emptyString
+                onClicked: {
+                    passwordDialog.onAcceptedCallback = function() {
+	                    if(appWindow.walletPassword === passwordDialog.password){
+	                        newPasswordDialog.open()
+	                    } else {
+	                        informationPopup.title  = qsTr("Error") + translationManager.emptyString;
+	                        informationPopup.text = qsTr("Wrong password");
+	                        informationPopup.open()
+	                        informationPopup.onCloseCallback = function() {
+	                            passwordDialog.open()
+	                        }
+	                    }
+	                }
+                    passwordDialog.onRejectedCallback = null;
+                    passwordDialog.open()
+                }
+                width: 135 * scaleRatio
+            }
+        }
     }
 
     Component.onCompleted: {