From 9743fb253721f5f8f0ab2f5d33853eed5a925714 Mon Sep 17 00:00:00 2001 From: Godfrain Jacques Date: Wed, 15 Nov 2023 07:50:27 -0800 Subject: [PATCH] fix(Onboarding): Apply 2 line constraint for create password description text (#12628) --- .../Onboarding/views/CreatePasswordView.qml | 3 +- .../Profile/popups/ChangePasswordModal.qml | 5 +- .../popups/keycard/states/CreatePassword.qml | 1 + ui/imports/shared/views/PasswordView.qml | 54 +++++++++++++------ 4 files changed, 44 insertions(+), 19 deletions(-) diff --git a/ui/app/AppLayouts/Onboarding/views/CreatePasswordView.qml b/ui/app/AppLayouts/Onboarding/views/CreatePasswordView.qml index e549d7392..3368494e1 100644 --- a/ui/app/AppLayouts/Onboarding/views/CreatePasswordView.qml +++ b/ui/app/AppLayouts/Onboarding/views/CreatePasswordView.qml @@ -39,12 +39,11 @@ Item { ColumnLayout { spacing: Style.current.bigPadding anchors.centerIn: parent - width: 416 height: 460 z: view.zFront PasswordView { id: view - Layout.fillWidth: true + Layout.preferredWidth: root.width - 2 * Style.current.bigPadding Layout.fillHeight: true passwordStrengthScoreFunction: root.startupStore.getPasswordStrengthScore highSizeIntro: true diff --git a/ui/app/AppLayouts/Profile/popups/ChangePasswordModal.qml b/ui/app/AppLayouts/Profile/popups/ChangePasswordModal.qml index 1515c41f3..165722662 100644 --- a/ui/app/AppLayouts/Profile/popups/ChangePasswordModal.qml +++ b/ui/app/AppLayouts/Profile/popups/ChangePasswordModal.qml @@ -74,12 +74,13 @@ StatusModal { fill: parent topMargin: Style.current.padding bottomMargin: Style.current.padding - leftMargin: Style.current.xlPadding - rightMargin: Style.current.xlPadding + leftMargin: Style.current.padding + rightMargin: Style.current.padding } passwordStrengthScoreFunction: RootStore.getPasswordStrengthScore titleVisible: false introText: qsTr("Change password used to unlock Status on this device & sign transactions.") + fixIntroTextWidth: true createNewPsw: false onReturnPressed: if(submitBtn.enabled) d.submit() } diff --git a/ui/imports/shared/popups/keycard/states/CreatePassword.qml b/ui/imports/shared/popups/keycard/states/CreatePassword.qml index 5a192abe4..827ca4345 100644 --- a/ui/imports/shared/popups/keycard/states/CreatePassword.qml +++ b/ui/imports/shared/popups/keycard/states/CreatePassword.qml @@ -26,6 +26,7 @@ Item { Layout.fillHeight: true passwordStrengthScoreFunction: RootStore.getPasswordStrengthScore highSizeIntro: true + fixIntroTextWidth: true newPswText: root.sharedKeycardModule.getNewPassword() confirmationPswText: root.sharedKeycardModule.getNewPassword() diff --git a/ui/imports/shared/views/PasswordView.qml b/ui/imports/shared/views/PasswordView.qml index 72657069f..f5a4b0188 100644 --- a/ui/imports/shared/views/PasswordView.qml +++ b/ui/imports/shared/views/PasswordView.qml @@ -23,6 +23,7 @@ ColumnLayout { 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 + property bool fixIntroTextWidth: false property var passwordStrengthScoreFunction: function () {} @@ -79,6 +80,8 @@ ColumnLayout { readonly property var validatorRegexp: /^[!-~]{0,64}$/ readonly property string validatorErrMessage: qsTr("Only letters, numbers, underscores and hyphens allowed") + readonly property int defaultInputWidth: 416 + // Password strength categorization / validation function lowerCaseValidator(text) { return (/[a-z]/.test(text)) } function upperCaseValidator(text) { return (/[A-Z]/.test(text)) } @@ -153,14 +156,34 @@ ColumnLayout { color: Theme.palette.directColor1 } - StatusBaseText { - id: introTxtField - Layout.fillWidth: true - text: "%1 %3".arg(root.introText).arg(Theme.palette.dangerColor1).arg(root.recoverText) - font.pixelSize: root.highSizeIntro ? 15 : 12 - color: Theme.palette.baseColor1 - wrapMode: Text.WordWrap - horizontalAlignment: TextEdit.AlignHCenter + ColumnLayout { + id: introColumn + + Layout.preferredWidth: root.fixIntroTextWidth ? d.defaultInputWidth : parent.width + Layout.alignment: Qt.AlignHCenter + spacing: 4 + + StatusBaseText { + Layout.fillWidth: true + Layout.alignment: Qt.AlignHCenter + + text: root.introText + horizontalAlignment: Text.AlignHCenter + font.pixelSize: root.highSizeIntro ? Style.current.primaryTextFontSize : Style.current.tertiaryTextFontSize + wrapMode: Text.WordWrap + color: Theme.palette.baseColor1 + } + + StatusBaseText { + Layout.fillWidth: true + Layout.alignment: Qt.AlignHCenter + + text: root.recoverText + horizontalAlignment: Text.AlignHCenter + font.pixelSize: root.highSizeIntro ? Style.current.primaryTextFontSize : Style.current.tertiaryTextFontSize + wrapMode: Text.WordWrap + color: Theme.palette.dangerColor1 + } } StatusPasswordInput { @@ -171,7 +194,8 @@ ColumnLayout { z: root.zFront visible: !root.createNewPsw - Layout.fillWidth: true + Layout.preferredWidth: d.defaultInputWidth + Layout.alignment: Qt.AlignHCenter placeholderText: qsTr("Current password") echoMode: showPassword ? TextInput.Normal : TextInput.Password rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2 @@ -193,9 +217,9 @@ ColumnLayout { } ColumnLayout { - spacing: Style.current.padding / 2 + spacing: 4 z: root.zFront - Layout.fillWidth: true + Layout.alignment: Qt.AlignHCenter StatusPasswordInput { id: newPswInput @@ -203,7 +227,8 @@ ColumnLayout { property bool showPassword - Layout.fillWidth: true + Layout.preferredWidth: d.defaultInputWidth + Layout.alignment: Qt.AlignHCenter placeholderText: qsTr("New password") echoMode: showPassword ? TextInput.Normal : TextInput.Password rightPadding: showHideNewIcon.width + showHideNewIcon.anchors.rightMargin + Style.current.padding / 2 @@ -244,7 +269,6 @@ ColumnLayout { StatusPasswordStrengthIndicator { id: strengthInditactor - Layout.fillWidth: true value: Math.min(Constants.minPasswordLength, newPswInput.text.length) from: 0 to: Constants.minPasswordLength @@ -258,7 +282,6 @@ ColumnLayout { StatusBaseText { id: strengthenTxt - Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter wrapMode: Text.WordWrap text: root.strengthenText @@ -307,7 +330,8 @@ ColumnLayout { property bool showPassword z: root.zFront - Layout.fillWidth: true + Layout.preferredWidth: d.defaultInputWidth + Layout.alignment: Qt.AlignHCenter placeholderText: qsTr("Confirm password") echoMode: showPassword ? TextInput.Normal : TextInput.Password rightPadding: showHideConfirmIcon.width + showHideConfirmIcon.anchors.rightMargin + Style.current.padding / 2