fix(@desktop/settings): [re-add] ensure new password is confirmed

Fixes #4672

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

@@ -12,49 +12,42 @@ import StatusQ.Popups 0.1
 import StatusQ.Controls 0.1
 
 StatusModal {
-    id: popup
+    id: root
+
+    property var privacyStore
+    signal passwordChanged()
+
     width: 480
     height: 510
     closePolicy: Popup.NoAutoClose
     header.title: qsTr("Change password")
 
-    onOpened: {
+    onOpened: root.reset()
-        reset();
+
+    function lengthValidator(text) {
+        return text.length >= 6 ? "" : qsTr("At least 6 characters")
     }
 
-    property var privacyStore
-
-    property var successPopup
-    property string indicationText: ""
-    property bool passwordInputValid
-    property bool currPasswordInputValid
-    property string currPasswordValidationError: ""
-
     function reset() {
-        passwordInput.text = "";
+        currentPasswordInput.state = "init"
-        currentPasswordInput.text = "";
+        passwordInput.state = "init"
-        currentPasswordInput.forceActiveFocus(Qt.MouseFocusReason);
+        confirmPasswordInput.state = "init"
-        popup.indicationText = "At least 6 characters. Your password protects your keys. You need it to unlock Status and transact.";
+        currentPasswordInput.forceActiveFocus(Qt.MouseFocusReason)
-        popup.currPasswordValidationError = "";
-        passwordInput.validationError = "";
-        popup.passwordInputValid = false;
-        popup.currPasswordInputValid = false;
     }
 
     function onChangePasswordResponse(success) {
         if (success) {
-            popup.successPopup.open();
+            passwordChanged()
             submitBtn.enabled = false;
         } else {
-            reset();
+            currentPasswordInput.state = "incorrect"
-            passwordInput.validationError = " ";
+            currentPasswordInput.forceActiveFocus(Qt.MouseFocusReason)
-            popup.currPasswordValidationError = qsTr("Incorrect password");
         }
         submitBtn.loading = false;
     }
 
     Connections {
-        target: popup.privacyStore.privacyModule
+        target: root.privacyStore.privacyModule
         onPasswordChanged: onChangePasswordResponse(success)
     }
 
@@ -62,44 +55,108 @@ StatusModal {
         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: {
+            keepHeight: true
-                popup.currPasswordInputValid = (currentPasswordInput.text.length >= 6);
+            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: root.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: qsTr("New password")
-            label: qsTrId("new-password...")
+
             textField.echoMode: TextInput.Password
-            onTextChanged: {
+            keepHeight: true
-                popup.passwordInputValid = ((passwordInput.text !== "") && (passwordInput.text.length >= 6));
+            placeholderText: ""
-                //setting validationError so that input becomes red
+            state: "init"
-                passwordInput.validationError = (!popup.passwordInputValid) ? " " : "";
+
-                popup.indicationText = (!popup.passwordInputValid ? "<font color=\"#FF2D55\">" : "")
+            onTextChanged: if (text != "" && state != "typing") state = "typing"
-                    + "At least 6 characters." + (!popup.passwordInputValid ? "</font>" : "")
+            onStateChanged: if (state == "init") resetInternal()
-                    + "Your password protects your keys. You need it to unlock Status and transact."
+
+            states: [
+                State {
+                    name: "init"
+                },
+                State {
+                    name: "typing"
+                    PropertyChanges { target: passwordInput; validationError: root.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 {
@@ -107,18 +164,7 @@ StatusModal {
         }
 
         StyledText {
-            id: validationError
+            text: qsTr("Your password protects your keys. You need it to unlock Status and transact.")
-            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)
             wrapMode: Text.WordWrap
             Layout.preferredWidth: 340
             Layout.alignment: Qt.AlignHCenter
@@ -131,14 +177,16 @@ 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
                 interval: 20
                 onTriggered: {
-                    popup.privacyStore.changePassword(currentPasswordInput.text, passwordInput.text)
+                    root.privacyStore.changePassword(currentPasswordInput.text, passwordInput.text)
                 }
             }
 

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

@@ -119,7 +119,8 @@ Item {
             id: changePasswordModal
             privacyStore: root.privacyStore
             anchors.centerIn: parent
-            successPopup: successPopup
+
+            onPasswordChanged: successPopup.open()
         }
 
         ChangePasswordSuccessModal {