chore(settings) align password screen with design

Changes required:

- Fixed text colors
- Fixed text expressions
- Added dividers
- Added labels

Closes #13893
This commit is contained in:
Stefan 2024-03-14 20:24:38 +02:00 committed by Stefan Dunca
parent 41d762078d
commit 086180b47a
2 changed files with 111 additions and 74 deletions

View File

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

View File

@ -11,16 +11,23 @@ import StatusQ.Controls 0.1
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import StatusQ.Popups 0.1
ColumnLayout { ColumnLayout {
id: root id: root
property bool ready: newPswInput.text.length >= Constants.minPasswordLength && newPswInput.text === confirmPswInput.text && errorTxt.text === "" property bool ready: newPswInput.text.length >= Constants.minPasswordLength && newPswInput.text === confirmPswInput.text && errorTxt.text === ""
property bool createNewPsw: true 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 bool titleVisible: true
property real titleSize: 22 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 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 string strengthenText: qsTr("Minimum %n character(s). To strengthen your password consider including:", "", Constants.minPasswordLength)
property bool highSizeIntro: false property bool highSizeIntro: false
@ -146,9 +153,7 @@ ColumnLayout {
spacing: Style.current.bigPadding spacing: Style.current.bigPadding
z: root.zFront z: root.zFront
// View visual content:
StatusBaseText { StatusBaseText {
id: title
Layout.alignment: root.contentAlignment Layout.alignment: root.contentAlignment
visible: root.titleVisible visible: root.titleVisible
text: root.title text: root.title
@ -187,6 +192,11 @@ ColumnLayout {
} }
} }
ColumnLayout {
StatusBaseText {
text: qsTr("Current password")
}
StatusPasswordInput { StatusPasswordInput {
id: currentPswInput id: currentPswInput
objectName: "passwordViewCurrentPassword" objectName: "passwordViewCurrentPassword"
@ -197,7 +207,7 @@ ColumnLayout {
visible: !root.createNewPsw visible: !root.createNewPsw
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: root.contentAlignment Layout.alignment: root.contentAlignment
placeholderText: qsTr("Current password") placeholderText: qsTr("Enter current password")
echoMode: showPassword ? TextInput.Normal : TextInput.Password echoMode: showPassword ? TextInput.Normal : TextInput.Password
rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2 rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2
onAccepted: root.returnPressed() onAccepted: root.returnPressed()
@ -216,6 +226,12 @@ ColumnLayout {
onClicked: currentPswInput.showPassword = !currentPswInput.showPassword onClicked: currentPswInput.showPassword = !currentPswInput.showPassword
} }
} }
}
StatusModalDivider {
Layout.fillWidth: true
Layout.alignment: root.contentAlignment
}
ColumnLayout { ColumnLayout {
spacing: 4 spacing: 4
@ -223,6 +239,10 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: root.contentAlignment Layout.alignment: root.contentAlignment
StatusBaseText {
text: qsTr("New password")
}
StatusPasswordInput { StatusPasswordInput {
id: newPswInput id: newPswInput
objectName: "passwordViewNewPassword" objectName: "passwordViewNewPassword"
@ -231,7 +251,7 @@ ColumnLayout {
Layout.alignment: root.contentAlignment Layout.alignment: root.contentAlignment
Layout.fillWidth: true Layout.fillWidth: true
placeholderText: qsTr("New password") placeholderText: qsTr("Enter new password")
echoMode: showPassword ? TextInput.Normal : TextInput.Password echoMode: showPassword ? TextInput.Normal : TextInput.Password
rightPadding: showHideNewIcon.width + showHideNewIcon.anchors.rightMargin + Style.current.padding / 2 rightPadding: showHideNewIcon.width + showHideNewIcon.anchors.rightMargin + Style.current.padding / 2
@ -347,6 +367,12 @@ ColumnLayout {
} }
} }
ColumnLayout {
StatusBaseText {
text: qsTr("Confirm new password")
color: Theme.palette.baseColor1
}
StatusPasswordInput { StatusPasswordInput {
id: confirmPswInput id: confirmPswInput
objectName: "passwordViewNewPasswordConfirm" objectName: "passwordViewNewPasswordConfirm"
@ -356,7 +382,7 @@ ColumnLayout {
z: root.zFront z: root.zFront
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: root.contentAlignment Layout.alignment: root.contentAlignment
placeholderText: qsTr("Confirm password") placeholderText: qsTr("Enter new password")
echoMode: showPassword ? TextInput.Normal : TextInput.Password echoMode: showPassword ? TextInput.Normal : TextInput.Password
rightPadding: showHideConfirmIcon.width + showHideConfirmIcon.anchors.rightMargin + Style.current.padding / 2 rightPadding: showHideConfirmIcon.width + showHideConfirmIcon.anchors.rightMargin + Style.current.padding / 2
@ -397,6 +423,7 @@ ColumnLayout {
onClicked: confirmPswInput.showPassword = !confirmPswInput.showPassword onClicked: confirmPswInput.showPassword = !confirmPswInput.showPassword
} }
} }
}
StatusBaseText { StatusBaseText {
id: errorTxt id: errorTxt