fix(settings) align password screen with design

storybook/pages/ChangePasswordViewPage.qml

@@ -0,0 +1,62 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Extras 1.4
+
+import shared.views 1.0
+import AppLayouts.Profile.views 1.0
+
+import utils 1.0
+
+import Storybook 1.0
+
+SplitView {
+    orientation: Qt.Vertical
+
+    Logs { id: logs }
+
+    StackLayout {
+        id: wrapper
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        ChangePasswordView {
+            id: passwordView
+
+            implicitWidth: parent.width
+            implicitHeight: parent.height
+
+            contentWidth: 560
+            sectionTitle: "Password"
+
+            passwordStrengthScoreFunction: (newPass) => Math.min(newPass.length, 4)
+
+            privacyStore: QtObject{
+                 property QtObject privacyModule: QtObject {
+                    signal passwordChanged(success: bool, errorMsg: string)
+                    signal storeToKeychainError(errorDescription: string)
+                    signal storeToKeychainSuccess()
+                 }
+            }
+
+            property QtObject localAccountSettings: QtObject {
+                property string storeToKeychainValue: Constants.keychain.storedValue.notNow
+            }
+        }
+    }
+
+    LogsAndControlsPanel {
+        id: logsAndControlsPanel
+
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 150
+
+        logsView.logText: logs.logText
+
+        RowLayout {
+
+        }
+    }
+}
+
+// category: Views

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

@@ -13,6 +13,7 @@ import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
 import StatusQ.Popups.Dialog 0.1
 
 import AppLayouts.Profile.popups 1.0
@@ -47,6 +48,7 @@ SettingsContentBase {
             LayoutMirroring.enabled: true
             LayoutMirroring.childrenInherit: true
             text: qsTr("Enable biometrics")
+            textColor: Theme.palette.baseColor1
             checked: root.biometricsEnabled
             onToggled: {
                 enableBiometricsPopup.open();
@@ -106,10 +108,12 @@ SettingsContentBase {
             height: 660
 
             createNewPsw: false
-            title: qsTr("Change your password.")
+            title: qsTr("Change your password")
             titleSize: 17
             contentAlignment: Qt.AlignLeft
 
+            highSizeIntro: true
+
             passwordStrengthScoreFunction: root.passwordStrengthScoreFunction
             onReadyChanged: {
                 submitBtn.enabled = ready
@@ -122,6 +126,12 @@ SettingsContentBase {
             }
         }
 
+        StatusModalDivider {
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignHCenter
+            Layout.bottomMargin: 20
+        }
+
         RowLayout {
             Layout.fillWidth: true
             StatusLinkText {

ui/imports/shared/views/PasswordView.qml

@@ -11,16 +11,23 @@ import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
 
 ColumnLayout {
     id: root
 
     property bool ready: newPswInput.text.length >= Constants.minPasswordLength && newPswInput.text === confirmPswInput.text && errorTxt.text === ""
     property bool createNewPsw: true
-    property string title: qsTr("Create a password")
+    property string title: createNewPsw ? qsTr("Create a password") : qsTr("Change your password")
     property bool titleVisible: true
     property real titleSize: 22
-    property string introText: qsTr("Create a password to unlock Status on this device & sign transactions.")
+    property string introText: {
+        if (createNewPsw) {
+            return qsTr("Create a password to unlock Status on this device & sign transactions.")
+        }
+
+        return qsTr("Change password used to unlock Status on this device & sign transactions.")
+    }
     property string recoverText: qsTr("You will not be able to recover this password if it is lost.")
     property string strengthenText: qsTr("Minimum %n character(s). To strengthen your password consider including:", "", Constants.minPasswordLength)
     property bool highSizeIntro: false
@@ -146,9 +153,7 @@ ColumnLayout {
     spacing: Style.current.bigPadding
     z: root.zFront
 
-    // View visual content:
     StatusBaseText {
-        id: title
         Layout.alignment: root.contentAlignment
         visible: root.titleVisible
         text: root.title
@@ -187,34 +192,45 @@ ColumnLayout {
         }
     }
 
-    StatusPasswordInput {
-        id: currentPswInput
-        objectName: "passwordViewCurrentPassword"
+    ColumnLayout {
+        StatusBaseText {
+            text: qsTr("Current password")
+        }
 
-        property bool showPassword
+        StatusPasswordInput {
+            id: currentPswInput
+            objectName: "passwordViewCurrentPassword"
 
-        z: root.zFront
-        visible: !root.createNewPsw
+            property bool showPassword
+
+            z: root.zFront
+            visible: !root.createNewPsw
+            Layout.fillWidth: true
+            Layout.alignment: root.contentAlignment
+            placeholderText: qsTr("Enter current password")
+            echoMode: showPassword ? TextInput.Normal : TextInput.Password
+            rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2
+            onAccepted: root.returnPressed()
+
+            StatusFlatRoundButton {
+                id: showHideCurrentIcon
+                visible: currentPswInput.text !== ""
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                anchors.rightMargin: 16
+                width: 24
+                height: 24
+                icon.name: currentPswInput.showPassword ? "hide" : "show"
+                icon.color: Theme.palette.baseColor1
+
+                onClicked: currentPswInput.showPassword = !currentPswInput.showPassword
+            }
+        }
+    }
+
+    StatusModalDivider {
         Layout.fillWidth: true
         Layout.alignment: root.contentAlignment
-        placeholderText: qsTr("Current password")
-        echoMode: showPassword ? TextInput.Normal : TextInput.Password
-        rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2
-        onAccepted: root.returnPressed()
-
-        StatusFlatRoundButton {
-            id: showHideCurrentIcon
-            visible: currentPswInput.text !== ""
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: parent.right
-            anchors.rightMargin: 16
-            width: 24
-            height: 24
-            icon.name: currentPswInput.showPassword ? "hide" : "show"
-            icon.color: Theme.palette.baseColor1
-
-            onClicked: currentPswInput.showPassword = !currentPswInput.showPassword
-        }
     }
 
     ColumnLayout {
@@ -223,6 +239,10 @@ ColumnLayout {
         Layout.fillWidth: true
         Layout.alignment: root.contentAlignment
 
+        StatusBaseText {
+            text: qsTr("New password")
+        }
+
         StatusPasswordInput {
             id: newPswInput
             objectName: "passwordViewNewPassword"
@@ -231,7 +251,7 @@ ColumnLayout {
 
             Layout.alignment: root.contentAlignment
             Layout.fillWidth: true
-            placeholderText: qsTr("New password")
+            placeholderText: qsTr("Enter new password")
             echoMode: showPassword ? TextInput.Normal : TextInput.Password
             rightPadding: showHideNewIcon.width + showHideNewIcon.anchors.rightMargin + Style.current.padding / 2
 
@@ -347,54 +367,61 @@ ColumnLayout {
         }
     }
 
-    StatusPasswordInput {
-        id: confirmPswInput
-        objectName: "passwordViewNewPasswordConfirm"
+    ColumnLayout {
+        StatusBaseText {
+            text: qsTr("Confirm new password")
+            color: Theme.palette.baseColor1
+        }
 
-        property bool showPassword
+        StatusPasswordInput {
+            id: confirmPswInput
+            objectName: "passwordViewNewPasswordConfirm"
 
-        z: root.zFront
-        Layout.fillWidth: true
-        Layout.alignment: root.contentAlignment
-        placeholderText: qsTr("Confirm password")
-        echoMode: showPassword ? TextInput.Normal : TextInput.Password
-        rightPadding: showHideConfirmIcon.width + showHideConfirmIcon.anchors.rightMargin + Style.current.padding / 2
+            property bool showPassword
 
-        onTextChanged: {
-            errorTxt.text = ""
+            z: root.zFront
+            Layout.fillWidth: true
+            Layout.alignment: root.contentAlignment
+            placeholderText: qsTr("Enter new password")
+            echoMode: showPassword ? TextInput.Normal : TextInput.Password
+            rightPadding: showHideConfirmIcon.width + showHideConfirmIcon.anchors.rightMargin + Style.current.padding / 2
 
-            if(!d.validateCharacterSet(newPswInput.text)) return
+            onTextChanged: {
+                errorTxt.text = ""
 
-            d.passwordValidation();
-            if(text.length === newPswInput.text.length) {
-                root.checkPasswordMatches()
-            }
-        }
+                if(!d.validateCharacterSet(newPswInput.text)) return
 
-        onFocusChanged: {
-            // When clicking into the confirmation input, validate if new password:
-            if(focus) {
-                d.passwordValidation()
+                d.passwordValidation();
+                if(text.length === newPswInput.text.length) {
+                    root.checkPasswordMatches()
+                }
             }
-            // When leaving the confirmation input because of the button or other input component is focused, check if password matches
-            else {
-                root.checkPasswordMatches(false)
+
+            onFocusChanged: {
+                // When clicking into the confirmation input, validate if new password:
+                if(focus) {
+                    d.passwordValidation()
+                }
+                // When leaving the confirmation input because of the button or other input component is focused, check if password matches
+                else {
+                    root.checkPasswordMatches(false)
+                }
             }
-        }
-        onAccepted: root.returnPressed()
+            onAccepted: root.returnPressed()
 
-        StatusFlatRoundButton {
-            id: showHideConfirmIcon
-            visible: confirmPswInput.text !== ""
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: parent.right
-            anchors.rightMargin: 16
-            width: 24
-            height: 24
-            icon.name: confirmPswInput.showPassword ? "hide" : "show"
-            icon.color: Theme.palette.baseColor1
-
-            onClicked: confirmPswInput.showPassword = !confirmPswInput.showPassword
+            StatusFlatRoundButton {
+                id: showHideConfirmIcon
+                visible: confirmPswInput.text !== ""
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                anchors.rightMargin: 16
+                width: 24
+                height: 24
+                icon.name: confirmPswInput.showPassword ? "hide" : "show"
+                icon.color: Theme.palette.baseColor1
+
+                onClicked: confirmPswInput.showPassword = !confirmPswInput.showPassword
+            }
         }
     }