fix(@desktop/settings): ensure new password is confirmed

The task status-im/StatusQ#393 should remove code duplication from here.

Fixes: #4375
Fixes: #4376

ui/app/AppLayouts/Profile/popups/ChangePasswordModal.qml

@@ -12,75 +12,138 @@ import StatusQ.Popups 0.1
 import StatusQ.Controls 0.1
 
 StatusModal {
-    id: popup
+    id: root
+
+    signal passwordChanged()
+
     width: 480
     height: 510
     closePolicy: Popup.NoAutoClose
     header.title: qsTr("Change password")
 
-    onOpened: {
-        reset();
-    }
+    onOpened: d.reset()
 
-    property var successPopup
-    property string indicationText: ""
-    property bool passwordInputValid
-    property bool currPasswordInputValid
-    property string currPasswordValidationError: ""
+    QtObject {
+        id: d
 
-    function reset() {
-        passwordInput.text = "";
-        currentPasswordInput.text = "";
-        currentPasswordInput.forceActiveFocus(Qt.MouseFocusReason);
-        popup.indicationText = "At least 6 characters. Your password protects your keys. You need it to unlock Status and transact.";
-        popup.currPasswordValidationError = "";
-        passwordInput.validationError = "";
-        popup.passwordInputValid = false;
-        popup.currPasswordInputValid = false;
+        function lengthValidator(text) {
+            return text.length >= 6 ? "" : qsTr("At least 6 characters")
+        }
+
+        function reset() {
+            currentPasswordInput.state = "init"
+            passwordInput.state = "init"
+            confirmPasswordInput.state = "init"
+            currentPasswordInput.forceActiveFocus(Qt.MouseFocusReason)
+        }
     }
 
     contentItem: ColumnLayout {
         id: contentItem
         anchors.fill: parent
         anchors {
-            topMargin: (Style.current.xlPadding + popup.topPadding)
+            topMargin: Style.current.xlPadding + root.topPadding
             leftMargin: Style.current.xlPadding
             rightMargin: Style.current.xlPadding
-            bottomMargin: (Style.current.xlPadding + popup.bottomPadding)
+            bottomMargin: Style.current.xlPadding + root.bottomPadding
         }
         spacing: Style.current.padding
 
-        //TODO replace with StatusInput as soon as it supports password
+        // TODO replace with StatusInput as soon as it supports password
         Input {
             id: currentPasswordInput
+
+            readonly property bool ready: state == "typing" && validationError == ""
+
             anchors.left: undefined
             anchors.right: undefined
             Layout.fillWidth: true
-            placeholderText: ""
             label: qsTr("Current password")
+
             textField.echoMode: TextInput.Password
-            onTextChanged: {
-                popup.currPasswordInputValid = (currentPasswordInput.text.length >= 6);
-            }
+            keepHeight: true
+            placeholderText: ""
+            state: "init"
+
+            onTextChanged: if (text != "" && state != "typing") state = "typing"
+            onStateChanged: if (state == "init") resetInternal()
+
+            states: [
+                State {
+                    name: "init"
+                },
+                State {
+                    name: "typing"
+                    PropertyChanges { target: currentPasswordInput; validationError: d.lengthValidator(text) }
+                },
+                State {
+                    name: "incorrect"
+                    PropertyChanges { target: currentPasswordInput; validationError: qsTr("Incorrect password") }
+                }
+            ]
         }
 
-        //TODO replace with StatusInput as soon as it supports password
+        // TODO replace with StatusInput as soon as it supports password
         Input {
             id: passwordInput
+
+            readonly property bool ready: state == "typing" && validationError == ""
+
             anchors.left: undefined
             anchors.right: undefined
             Layout.fillWidth: true
-            placeholderText: ""
-            label: qsTrId("new-password...")
+            label: qsTr("New password")
+
             textField.echoMode: TextInput.Password
-            onTextChanged: {
-                popup.passwordInputValid = ((passwordInput.text !== "") && (passwordInput.text.length >= 6));
-                //setting validationError so that input becomes red
-                passwordInput.validationError = (!popup.passwordInputValid) ? " " : "";
-                popup.indicationText = (!popup.passwordInputValid ? "<font color=\"#FF2D55\">" : "")
-                    + "At least 6 characters." + (!popup.passwordInputValid ? "</font>" : "")
-                    + "Your password protects your keys. You need it to unlock Status and transact."
-            }
+            keepHeight: true
+            placeholderText: ""
+            state: "init"
+
+            onTextChanged: if (text != "" && state != "typing") state = "typing"
+            onStateChanged: if (state == "init") resetInternal()
+
+            states: [
+                State {
+                    name: "init"
+                },
+                State {
+                    name: "typing"
+                    PropertyChanges { target: passwordInput; validationError: d.lengthValidator(text) }
+                }
+            ]
+        }
+
+        // TODO replace with StatusInput as soon as it supports password
+        Input {
+            id: confirmPasswordInput
+
+            readonly property bool ready: state == "typing" && validationError == ""
+
+            anchors.left: undefined
+            anchors.right: undefined
+            Layout.fillWidth: true
+            label: qsTr("Confirm new password")
+
+            textField.echoMode: TextInput.Password
+            keepHeight: true
+            placeholderText: ""
+            state: "init"
+
+            onTextChanged: if (text != "" && state != "typing") state = "typing"
+            onStateChanged: if (state == "init") resetInternal()
+
+            states: [
+                State {
+                    name: "init"
+                },
+                State {
+                    name: "typing"
+                    PropertyChanges {
+                        target: confirmPasswordInput;
+                        validationError: confirmPasswordInput.text != passwordInput.text ? qsTr("Password does not match") : ""
+                    }
+                }
+            ]
         }
 
         Item {
@@ -88,18 +151,7 @@ StatusModal {
         }
 
         StyledText {
-            id: validationError
-            Layout.preferredWidth: parent.width
-            Layout.alignment: Qt.AlignHCenter
-            horizontalAlignment: Text.AlignHCenter
-            visible: (text !== "")
-            font.pixelSize: Style.current.tertiaryTextFontSize
-            color: Style.current.danger
-            text: popup.currPasswordValidationError
-        }
-
-        StyledText {
-            text: qsTr(indicationText)
+            text: qsTr("Your password protects your keys. You need it to unlock Status and transact.")
             wrapMode: Text.WordWrap
             Layout.preferredWidth: 340
             Layout.alignment: Qt.AlignHCenter
@@ -112,8 +164,10 @@ StatusModal {
     rightButtons: [
         StatusButton {
             id: submitBtn
+
             text: qsTr("Change password")
-            enabled: (popup.passwordInputValid && popup.currPasswordInputValid && !submitBtn.loading)
+            enabled: !submitBtn.loading && currentPasswordInput.ready &&
+                     passwordInput.ready && confirmPasswordInput.ready
 
             property Timer sim: Timer {
                 id: pause
@@ -133,12 +187,11 @@ StatusModal {
 
             function changePasswordBegin() {
                 if (privacyModule.changePassword(currentPasswordInput.text, passwordInput.text)) {
-                    popup.successPopup.open();
+                    passwordChanged()
                     submitBtn.enabled = false;
                 } else {
-                    reset();
-                    passwordInput.validationError = " ";
-                    popup.currPasswordValidationError = qsTr("Incorrect password");
+                    currentPasswordInput.state = "incorrect"
+                    currentPasswordInput.forceActiveFocus(Qt.MouseFocusReason)
                 }
                 submitBtn.loading = false;
             }

ui/app/AppLayouts/Profile/views/PrivacyView.qml

@@ -128,7 +128,8 @@ Item {
         ChangePasswordModal {
             id: changePasswordModal
             anchors.centerIn: parent
-            successPopup: successPopup
+
+            onPasswordChanged: successPopup.open()
         }
 
         ChangePasswordSuccessModal {
@@ -188,7 +189,7 @@ Item {
             implicitHeight: 52
             components: [
                 StatusQControls.StatusSwitch {
-                    id: switch2               
+                    id: switch2
                     checked: localAccountSensitiveSettings.displayChatImages
                     onCheckedChanged: {
                         if (localAccountSensitiveSettings.displayChatImages !== checked) {

ui/imports/shared/controls/Input.qml

@@ -10,9 +10,11 @@ import "../panels"
 import "../controls"
 
 Item {
+    id: inputBox
+
     property alias textField: inputValue
     property alias inputLabel: inputLabel
-    
+
     property string placeholderText: "My placeholder"
     property string placeholderTextColor: Style.current.secondaryText
     property alias text: inputValue.text
@@ -31,6 +33,7 @@ Item {
     property string textToCopy
     property bool pasteFromClipboard: false
     property bool readOnly: false
+    property bool keepHeight: false // determine whether validationError should affect item's height
 
     readonly property bool hasIcon: icon.toString() !== ""
     readonly property var forceActiveFocus: function () {
@@ -43,8 +46,9 @@ Item {
     signal editingFinished(string inputValue)
     signal textEdited(string inputValue)
 
-    id: inputBox
-    implicitHeight: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0) + (!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
+    implicitHeight: inputRectangle.height +
+                    (hasLabel ? inputLabel.height + labelMargin : 0) +
+                    (!keepHeight &&!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0)
     height: implicitHeight
     anchors.right: parent.right
     anchors.left: parent.left