From 086180b47aff7513ac125852a40b8619f304fd46 Mon Sep 17 00:00:00 2001 From: Stefan Date: Thu, 14 Mar 2024 20:24:38 +0200 Subject: [PATCH] chore(settings) align password screen with design Changes required: - Fixed text colors - Fixed text expressions - Added dividers - Added labels Closes #13893 --- .../Profile/views/ChangePasswordView.qml | 12 +- ui/imports/shared/views/PasswordView.qml | 173 ++++++++++-------- 2 files changed, 111 insertions(+), 74 deletions(-) diff --git a/ui/app/AppLayouts/Profile/views/ChangePasswordView.qml b/ui/app/AppLayouts/Profile/views/ChangePasswordView.qml index 2405d16632..07c151bed1 100644 --- a/ui/app/AppLayouts/Profile/views/ChangePasswordView.qml +++ b/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 { diff --git a/ui/imports/shared/views/PasswordView.qml b/ui/imports/shared/views/PasswordView.qml index d13288e923..84a0f68159 100644 --- a/ui/imports/shared/views/PasswordView.qml +++ b/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" - - property bool showPassword - - 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 - - onTextChanged: { - errorTxt.text = "" - - if(!d.validateCharacterSet(newPswInput.text)) return - - d.passwordValidation(); - if(text.length === newPswInput.text.length) { - root.checkPasswordMatches() - } + ColumnLayout { + StatusBaseText { + text: qsTr("Confirm new password") + color: Theme.palette.baseColor1 } - 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() + StatusPasswordInput { + id: confirmPswInput + objectName: "passwordViewNewPasswordConfirm" - 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 + property bool showPassword - onClicked: confirmPswInput.showPassword = !confirmPswInput.showPassword + 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 + + onTextChanged: { + errorTxt.text = "" + + if(!d.validateCharacterSet(newPswInput.text)) return + + d.passwordValidation(); + if(text.length === newPswInput.text.length) { + root.checkPasswordMatches() + } + } + + 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() + + 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 + } } }