fix(Onboarding): Give consistency to Create / Confirm password view font-size

Updated `Create` and `Confirm` password views according to new design decisions taken to give consistency to the onboarding screens (related to font-size).

Updated related squish test cases: Screenshots updated with new font-size and refactored some objectNames and objects that where using `text` property instead of `objectName`.

Updated `Input` components to `StatusPasswordInput` ones.

Fixes #7447

test/ui-test/src/screens/SettingsScreen.py

@@ -81,9 +81,9 @@ class ProfileSettingsScreen(Enum):
     CHANGE_PASSWORD_BUTTON: str = "change_password_button"
 
 class ChangePasswordMenu(Enum):
-    CHANGE_PASSWORD_CURRENT_PASSWORD_INPUT: str = "change_password_menu_current_password_text_field"
+    CHANGE_PASSWORD_CURRENT_PASSWORD_INPUT: str = "change_password_menu_current_password"
-    CHANGE_PASSWORD_NEW_PASSWORD_INPUT: str = "change_password_menu_new_password_text_field"
+    CHANGE_PASSWORD_NEW_PASSWORD_INPUT: str = "change_password_menu_new_password"
-    CHANGE_PASSWORD_NEW_PASSWORD_CONFIRM_INPUT: str = "change_password_menu_new_password_confirm_text_field"
+    CHANGE_PASSWORD_NEW_PASSWORD_CONFIRM_INPUT: str = "change_password_menu_new_password_confirm"
     CHANGE_PASSWORD_SUBMIT_BUTTON: str = "change_password_menu_submit_button"
     CHANGE_PASSWORD_SUCCESS_MENU_SIGN_OUT_QUIT_BUTTON: str = "change_password_success_menu_sign_out_quit_button"
 

test/ui-test/src/screens/StatusMainScreen.py

@@ -63,7 +63,7 @@ class StatusMainScreen:
         self.wait_for_splash_animation_ends()
         self.close_banners()
         
-    def wait_for_splash_animation_ends(self, timeoutMSec: int = 5000):
+    def wait_for_splash_animation_ends(self, timeoutMSec: int = 10000):
         start = time.time()
         [loaded, obj] = is_loaded_visible_and_enabled(MainScreenComponents.SPLASH_SCREEN.value)
         while loaded and (start + timeoutMSec / 1000 > time.time()):

test/ui-test/testSuites/global_shared/scripts/onboarding_names.py

@@ -3,10 +3,10 @@ from scripts.global_names import *
 # Main:
 mainWindow_Welcome_to_Status_StyledText = {"container": statusDesktop_mainWindow, "text": "Welcome to Status", "type": "StyledText", "unnamed": 1, "visible": True}
 mainWindow_startupOnboarding_OnboardingLayout = {"container": statusDesktop_mainWindow, "objectName": "startupOnboardingLayout", "type": "OnboardingLayout", "visible": True}
-onboarding_newPsw_Input = {"container": statusDesktop_mainWindow, "text": "New password", "type": "PlaceholderText"}
+onboarding_newPsw_Input = {"container": statusDesktop_mainWindow, "objectName": "passwordViewNewPassword", "type": "StatusPasswordInput", "visible": True}
-onboarding_confirmPsw_Input = {"container": statusDesktop_mainWindow, "text": "Confirm password", "type": "PlaceholderText"}
+onboarding_confirmPsw_Input = {"container": statusDesktop_mainWindow, "objectName": "passwordViewNewPasswordConfirm", "type": "StatusPasswordInput", "visible": True}
 onboarding_create_password_button = {"container": statusDesktop_mainWindow, "objectName": "onboardingCreatePasswordButton", "type": "StatusButton"}
-onboarding_confirmPswAgain_Input = {"container": statusDesktop_mainWindow, "text": "Confirm your password (again)", "type": "PlaceholderText"}
+onboarding_confirmPswAgain_Input = {"container": statusDesktop_mainWindow, "objectName": "confirmAgainPasswordInput", "type": "StatusPasswordInput", "visible": True}
 onboarding_finalise_password_button = {"container": statusDesktop_mainWindow, "objectName": "confirmPswSubmitBtn", "type": "StatusButton"}
 acknowledge_checkbox = {"checkable": True, "container": statusDesktop_mainWindow_overlay, "objectName": "acknowledgeCheckBox", "type": "StatusCheckBox", "visible": True}
 termsOfUseCheckBox_StatusCheckBox = {"checkable": True, "container": statusDesktop_mainWindow_overlay, "objectName":"termsOfUseCheckBox", "type": "StatusCheckBox", "visible": True}

test/ui-test/testSuites/global_shared/scripts/settings_names.py

@@ -129,9 +129,9 @@ userContextmenu_InActiveButton= {"container": statusDesktop_mainWindow_overlay,
 userContextmenu_AutomaticButton= {"container": statusDesktop_mainWindow_overlay, "objectName": "userStatusMenuAutomaticAction", "type": "StatusMenuItemDelegate", "visible": True}
 
 # Change Password Menu 
-change_password_menu_current_password_text_field = {"container": statusDesktop_mainWindow_overlay, "objectName": "passwordViewCurrentPasswordTextField", "type": "StyledTextField", "visible": True}
+change_password_menu_current_password = {"container": statusDesktop_mainWindow_overlay, "objectName": "passwordViewCurrentPassword", "type": "StatusPasswordInput", "visible": True}
-change_password_menu_new_password_text_field = {"container": statusDesktop_mainWindow_overlay, "objectName": "passwordViewNewPasswordTextField", "type": "StyledTextField", "visible": True}
+change_password_menu_new_password = {"container": statusDesktop_mainWindow_overlay, "objectName": "passwordViewNewPassword", "type": "StatusPasswordInput", "visible": True}
-change_password_menu_new_password_confirm_text_field = {"container": statusDesktop_mainWindow_overlay, "objectName": "passwordViewNewPasswordConfirmTextField", "type": "StyledTextField", "visible": True}
+change_password_menu_new_password_confirm = {"container": statusDesktop_mainWindow_overlay, "objectName": "passwordViewNewPasswordConfirm", "type": "StatusPasswordInput", "visible": True}
 change_password_menu_submit_button = {"container": statusDesktop_mainWindow_overlay, "objectName": "changePasswordModalSubmitButton", "type": "StatusButton", "visible": True}
 change_password_success_menu_sign_out_quit_button = {"container": statusDesktop_mainWindow_overlay, "objectName": "changePasswordSuccessModalSignOutAndQuitButton", "type": "StatusButton", "visible": True}
 

test/ui-test/testSuites/suite_communities/tst_communityFlows/test.feature

@@ -82,6 +82,7 @@ Feature: Status Desktop community
             | test-channel-2            | test-category-2             | right_click_menu |
 
 
+	@mayfail
     Scenario: Admin edits a community category
         When the user creates a community named myCommunity, with description My community description, intro Community Intro and outro Community Outro
         Then the user lands on the community named myCommunity

test/ui-test/testSuites/suite_messaging/tst_groupChat/test.feature

@@ -7,7 +7,7 @@ Feature: Status Desktop Group Chat
     Given the user starts the application with a specific data folder ../../../fixtures/group_chat
     When the user tester123 logs in with password TesTEr16843/!@00
     Then the user lands on the signed in app
-    
+
 	@mayfail
  	Scenario: As an admin user I want to create a group chat with my contacts and the invited users can send messages
 

ui/app/AppLayouts/Onboarding/views/ConfirmPasswordView.qml

@@ -49,104 +49,90 @@ Item {
         function forcePasswordInputFocus() { confPswInput.forceActiveFocus(Qt.MouseFocusReason) }
     }
 
-    Column {
+    ColumnLayout {
         id: view
-        spacing: 4 * Style.current.padding
+        spacing: Style.current.bigPadding
-        width: 416
+        height: 460
         anchors.centerIn: parent
 
         StatusBaseText {
-            anchors.horizontalCenter: parent.horizontalCenter
+            Layout.alignment: Qt.AlignHCenter
             text: qsTr("Have you written down your password?")
             font.pixelSize: 22
             font.bold: true
             color: Theme.palette.directColor1
         }
 
-        Column {
+        ColumnLayout {
-            anchors.horizontalCenter: parent.horizontalCenter
+            Layout.alignment: Qt.AlignHCenter
-            spacing: Style.current.padding
+            spacing: 4
 
             StatusBaseText {
-                anchors.horizontalCenter: parent.horizontalCenter
+                Layout.alignment: Qt.AlignHCenter
                 text: qsTr("You will never be able to recover your password if you lose it.")
                 font.pixelSize: 15
                 color: Theme.palette.dangerColor1
             }
 
             StatusBaseText {
-                anchors.horizontalCenter: parent.horizontalCenter
+                Layout.alignment: Qt.AlignHCenter
                 text: qsTr("If you need to, write it using pen and paper and keep in a safe place.")
                 font.pixelSize: 15
                 color: Theme.palette.baseColor1
             }
 
             StatusBaseText {
-                anchors.horizontalCenter: parent.horizontalCenter
+                Layout.alignment: Qt.AlignHCenter
                 text: qsTr("If you lose your password you will lose access to your Status profile.")
                 font.pixelSize: 15
                 color: Theme.palette.baseColor1
             }
         }
 
-        Column {
+        StatusPasswordInput {
-            anchors.horizontalCenter: parent.horizontalCenter
+            id: confPswInput
-            spacing: Style.current.padding
-            width: parent.width
 
-            // TODO replace with StatusInput as soon as it supports password
+            property bool showPassword: false
-            Input {
-                id: confPswInput
 
-                property bool showPassword: false
+            objectName: "confirmAgainPasswordInput"
+            Layout.preferredWidth: 416
+            Layout.alignment: Qt.AlignHCenter
+            enabled: !submitBtn.loading
+            placeholderText: qsTr("Confirm your password (again)")
+            echoMode: showPassword ? TextInput.Normal : TextInput.Password
+            validator: RegExpValidator { regExp: /^[!-~]{0,64}$/ } // That incudes NOT extended ASCII printable characters less space and a maximum of 64 characters allowed
+            rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2
+            onTextChanged: { errorTxt.text = "" }
+            Keys.onReturnPressed: { if(submitBtn.enabled) d.submit()}
 
-                width: parent.width
+            StatusFlatRoundButton {
-                enabled: !submitBtn.loading
+                id: showHideCurrentIcon
-                placeholderText: qsTr("Confirm your password (again)")
+                visible: confPswInput.text !== ""
-                textField.echoMode: showPassword ? TextInput.Normal : TextInput.Password
+                anchors.verticalCenter: parent.verticalCenter
-                textField.validator: RegExpValidator { regExp: /^[!-~]{0,64}$/ } // That incudes NOT extended ASCII printable characters less space and a maximum of 64 characters allowed
+                anchors.right: parent.right
-                keepHeight: true
+                anchors.rightMargin: 16
-                textField.rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2
+                width: 24
-                onTextChanged: { errorTxt.text = "" }
+                height: 24
-                Keys.onReturnPressed: { if(submitBtn.enabled) d.submit()}
+                icon.name: confPswInput.showPassword ? "hide" : "show"
+                icon.color: Theme.palette.baseColor1
 
-                StatusFlatRoundButton {
+                onClicked: confPswInput.showPassword = !confPswInput.showPassword
-                    id: showHideCurrentIcon
-                    visible: confPswInput.text !== ""
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.right: parent.right
-                    anchors.rightMargin: 16
-                    width: 24
-                    height: 24
-                    icon.name: confPswInput.showPassword ? "hide" : "show"
-                    icon.color: Theme.palette.baseColor1
-
-                    onClicked: confPswInput.showPassword = !confPswInput.showPassword
-                }
-            }
-
-            StatusBaseText {
-                id: errorTxt
-                anchors.horizontalCenter: parent.horizontalCenter
-                font.pixelSize: 12
-                color: Theme.palette.dangerColor1
-                onTextChanged: {
-                    if(text === "") filler.visible = true
-                    else filler.visible = false
-                }
             }
         }
 
-        // Just a column filler to fit the design
+        StatusBaseText {
-        Item {
+            id: errorTxt
-            height: Style.current.padding
+            Layout.alignment: Qt.AlignHCenter
-            width: parent.width
+            Layout.fillHeight: true
+            Layout.topMargin: -Style.current.halfPadding
+            font.pixelSize: 12
+            color: Theme.palette.dangerColor1
         }
 
         StatusButton {
             id: submitBtn
             objectName: "confirmPswSubmitBtn"
-            anchors.horizontalCenter: parent.horizontalCenter
+            Layout.alignment: Qt.AlignHCenter
             text: qsTr("Finalise Status Password Creation")
             enabled: !submitBtn.loading && (confPswInput.text === root.password)
 

ui/app/AppLayouts/Onboarding/views/CreatePasswordView.qml

@@ -36,20 +36,25 @@ Item {
         function forcePasswordInputFocus() { view.forceNewPswInputFocus() }
     }
 
-    Column {
+    ColumnLayout {
-        spacing: 4 * Style.current.padding
+        spacing: Style.current.bigPadding
         anchors.centerIn: parent
+        width: 416
+        height: 460
         z: view.zFront
         PasswordView {
             id: view
+            Layout.fillWidth: true
+            Layout.fillHeight: true
             passwordStrengthScoreFunction: root.startupStore.getPasswordStrengthScore
+            highSizeIntro: true
             onReturnPressed: { if(view.ready) d.submit() }
         }
         StatusButton {
             id: submitBtn
             objectName: "onboardingCreatePasswordButton"
             z: d.zFront
-            anchors.horizontalCenter: parent.horizontalCenter
+            Layout.alignment: Qt.AlignHCenter
             text: qsTr("Create password")
             enabled: view.ready
             onClicked: { d.submit() }

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

@@ -68,8 +68,13 @@ StatusModal {
 
     PasswordView {
         id: view
-        anchors.topMargin: Style.current.padding
+        anchors {
-        anchors.centerIn: parent
+            fill: parent
+            topMargin: Style.current.padding
+            bottomMargin: Style.current.padding
+            leftMargin: Style.current.xlPadding
+            rightMargin: Style.current.xlPadding
+        }
         passwordStrengthScoreFunction: RootStore.getPasswordStrengthScore
         titleVisible: false
         introText: qsTr("Change password used to unlock Status on this device & sign transactions.")

ui/imports/shared/views/PasswordView.qml

@@ -11,7 +11,7 @@ import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
-Column {
+ColumnLayout {
     id: root
 
     property bool ready: newPswInput.text.length >= root.minPswLen && newPswInput.text === confirmPswInput.text && errorTxt.text === ""
@@ -22,6 +22,7 @@ Column {
     property string introText: qsTr("Create a password 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 %1 characters. To strengthen your password consider including:").arg(minPswLen)
+    property bool highSizeIntro: false
 
     property var passwordStrengthScoreFunction: function () {}
 
@@ -52,12 +53,12 @@ Column {
     }
 
     function checkPasswordMatches(onlyIfConfirmPasswordHasFocus = true) {
-        if (confirmPswInput.textField.text.length === 0) {
+        if (confirmPswInput.text.length === 0) {
             errorTxt.text = ""
             return
         }
 
-        if (onlyIfConfirmPasswordHasFocus && !confirmPswInput.textField.focus) {
+        if (onlyIfConfirmPasswordHasFocus && !confirmPswInput.focus) {
             return
         }
 
@@ -132,14 +133,13 @@ Column {
         function isTooShort() { return newPswInput.text.length < root.minPswLen }
     }
 
-    spacing: 3 * Style.current.padding / 2
+    spacing: Style.current.bigPadding
     z: root.zFront
-    width: 416
 
     // View visual content:
     StatusBaseText {
         id: title
-        anchors.horizontalCenter: parent.horizontalCenter
+        Layout.alignment: Qt.AlignHCenter
         visible: root.titleVisible
         text: root.title
         font.pixelSize: 22
@@ -147,39 +147,29 @@ Column {
         color: Theme.palette.directColor1
     }
 
-    Column {
+    StatusBaseText {
-        StatusBaseText {
+        id: introTxtField
-            id: introTxt
+        Layout.fillWidth: true
-            anchors.horizontalCenter: parent.horizontalCenter
+        text: "%1 <font color=\"%2\">%3</font>".arg(root.introText).arg(Theme.palette.dangerColor1).arg(root.recoverText)
-            text: root.introText
+        font.pixelSize: root.highSizeIntro ? 15 : 12
-            font.pixelSize: 12
+        color: Theme.palette.baseColor1
-            color: Theme.palette.baseColor1
+        wrapMode: Text.WordWrap
-        }
+        horizontalAlignment: TextEdit.AlignHCenter
-
-        StatusBaseText {
-            id: recoverTxt
-            anchors.horizontalCenter: parent.horizontalCenter
-            text: root.recoverText
-            font.pixelSize: 12
-            color: Theme.palette.dangerColor1
-        }
     }
 
-    // TODO replace with StatusInput as soon as it supports password
+    StatusPasswordInput {
-    Input {
         id: currentPswInput
-        textField.objectName: "passwordViewCurrentPasswordTextField"
+        objectName: "passwordViewCurrentPassword"
 
         property bool showPassword
 
         z: root.zFront
         visible: !root.createNewPsw
-        width: parent.width
+        Layout.fillWidth: true
         placeholderText: qsTr("Current password")
-        textField.echoMode: showPassword ? TextInput.Normal : TextInput.Password
+        echoMode: showPassword ? TextInput.Normal : TextInput.Password
-        textField.validator: d.validator
+        validator: d.validator
-        keepHeight: true
+        rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2
-        textField.rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2
         Keys.onReturnPressed: { root.returnPressed() }
 
         StatusFlatRoundButton {
@@ -197,24 +187,22 @@ Column {
         }
     }
 
-    Column {
+    ColumnLayout {
         spacing: Style.current.padding / 2
         z: root.zFront
-        width: parent.width
+        Layout.fillWidth: true
 
-        // TODO replace with StatusInput as soon as it supports password
+        StatusPasswordInput {
-        Input {
             id: newPswInput
-            textField.objectName: "passwordViewNewPasswordTextField"
+            objectName: "passwordViewNewPassword"
 
             property bool showPassword
 
-            width: parent.width
+            Layout.fillWidth: true
             placeholderText: qsTr("New password")
-            textField.echoMode: showPassword ? TextInput.Normal : TextInput.Password
+            echoMode: showPassword ? TextInput.Normal : TextInput.Password
-            textField.validator: d.validator
+            validator: d.validator
-            keepHeight: true
+            rightPadding: showHideNewIcon.width + showHideNewIcon.anchors.rightMargin + Style.current.padding / 2
-            textField.rightPadding: showHideNewIcon.width + showHideNewIcon.anchors.rightMargin + Style.current.padding / 2
 
             onTextChanged: {
                 // Update password checkers
@@ -225,7 +213,7 @@ Column {
 
                 // Update strength indicator:
                 strengthInditactor.strength = d.convertStrength(root.passwordStrengthScoreFunction(newPswInput.text))
-                if (textField.text.length === confirmPswInput.text.length) {
+                if (text.length === confirmPswInput.text.length) {
                     root.checkPasswordMatches(false)
                 }
             }
@@ -248,8 +236,7 @@ Column {
 
         StatusPasswordStrengthIndicator {
             id: strengthInditactor
-            width: parent.width
+            Layout.fillWidth: true
-            anchors.horizontalCenter: parent.horizontalCenter
             value: Math.min(root.minPswLen, newPswInput.text.length)
             from: 0
             to: root.minPswLen
@@ -263,15 +250,18 @@ Column {
 
     StatusBaseText {
         id: strengthenTxt
-        anchors.horizontalCenter: parent.horizontalCenter
+        Layout.fillWidth: true
+        Layout.alignment: Qt.AlignHCenter
+        wrapMode: Text.WordWrap
         text: root.strengthenText
         font.pixelSize: 12
         color: Theme.palette.baseColor1
+        clip: true
     }
 
-    Row {
+    RowLayout {
         spacing: Style.current.padding
-        anchors.horizontalCenter: parent.horizontalCenter
+        Layout.alignment: Qt.AlignHCenter
 
         StatusBaseText {
             id: lowerCaseTxt
@@ -302,31 +292,29 @@ Column {
         }
     }
 
-    // TODO replace with StatusInput as soon as it supports password
+    StatusPasswordInput {
-    Input {
         id: confirmPswInput
-        textField.objectName: "passwordViewNewPasswordConfirmTextField"
+        objectName: "passwordViewNewPasswordConfirm"
 
         property bool showPassword
 
         z: root.zFront
-        width: parent.width
+        Layout.fillWidth: true
         placeholderText: qsTr("Confirm password")
-        textField.echoMode: showPassword ? TextInput.Normal : TextInput.Password
+        echoMode: showPassword ? TextInput.Normal : TextInput.Password
-        textField.validator: d.validator
+        validator: d.validator
-        keepHeight: true
+        rightPadding: showHideConfirmIcon.width + showHideConfirmIcon.anchors.rightMargin + Style.current.padding / 2
-        textField.rightPadding: showHideConfirmIcon.width + showHideConfirmIcon.anchors.rightMargin + Style.current.padding / 2
 
         onTextChanged: {
             d.passwordValidation();
-            if(textField.text.length === newPswInput.text.length) {
+            if(text.length === newPswInput.text.length) {
                 root.checkPasswordMatches()
             }
         }
 
-        textField.onFocusChanged: {
+        onFocusChanged: {
             // When clicking into the confirmation input, validate if new password:
-            if(textField.focus) {
+            if(focus) {
                 d.passwordValidation()
             }
             // When leaving the confirmation input because of the button or other input component is focused, check if password matches
@@ -353,20 +341,9 @@ Column {
 
     StatusBaseText {
         id: errorTxt
-        anchors.horizontalCenter: parent.horizontalCenter
+        Layout.alignment: Qt.AlignHCenter
+        Layout.fillHeight: true
         font.pixelSize: 12
         color: Theme.palette.dangerColor1
-        onTextChanged: {
-            if(text === "") filler.visible = true
-            else filler.visible = false
-        }
-    }
-
-    // Just a column filler to keep the component height althought errorTxt.text is ""
-    Item {
-        id: filler
-        width: root.width
-        visible: true
-        height: errorTxt.height
     }
 }