diff --git a/ui/app/AppLayouts/Onboarding/views/ConfirmPasswordView.qml b/ui/app/AppLayouts/Onboarding/views/ConfirmPasswordView.qml index 993c48fd3c..a1922c875c 100644 --- a/ui/app/AppLayouts/Onboarding/views/ConfirmPasswordView.qml +++ b/ui/app/AppLayouts/Onboarding/views/ConfirmPasswordView.qml @@ -1,52 +1,33 @@ import QtQuick 2.0 -import QtQuick.Controls 2.13 import QtQuick.Layouts 1.12 -import shared.controls 1.0 -import shared 1.0 -import shared.panels 1.0 -import shared.stores 1.0 +import StatusQ.Controls 0.1 + +import shared.views 1.0 import utils 1.0 -import StatusQ.Controls 0.1 -import StatusQ.Core 0.1 -import StatusQ.Core.Theme 0.1 - import "../stores" -import "../controls" Item { id: root property StartupStore startupStore - property string password - Component.onCompleted: { - root.password = root.startupStore.getPassword() - d.forcePasswordInputFocus() + passwordView.forceInputFocus() } QtObject { id: d - function checkPasswordMatches() { - if (confPswInput.text !== root.password) { - errorTxt.text = qsTr("Passwords don't match") - return false - } - return true - } + property bool submitEnabled: !submitBtn.loading && passwordView.passwordMatch function submit() { - if (!checkPasswordMatches()) { + if (!d.submitEnabled) { return } - root.startupStore.doPrimaryAction() } - - function forcePasswordInputFocus() { confPswInput.forceActiveFocus(Qt.MouseFocusReason) } } ColumnLayout { @@ -55,78 +36,18 @@ Item { height: 460 anchors.centerIn: parent - StatusBaseText { - Layout.alignment: Qt.AlignHCenter - text: qsTr("Have you written down your password?") - font.pixelSize: 22 - font.bold: true - color: Theme.palette.directColor1 - } + PasswordConfirmationView { + id: passwordView - ColumnLayout { - Layout.alignment: Qt.AlignHCenter - spacing: 4 - - StatusBaseText { - 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 { - 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 { - 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 - } - } - - StatusPasswordInput { - 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()} - - StatusFlatRoundButton { - 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 - Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true Layout.fillHeight: true - Layout.topMargin: -Style.current.halfPadding - font.pixelSize: 12 - color: Theme.palette.dangerColor1 + spacing: Style.current.bigPadding + + expectedPassword: root.startupStore.getPassword() + + onSubmit: { + d.submit() + } } StatusButton { @@ -134,17 +55,10 @@ Item { objectName: "confirmPswSubmitBtn" Layout.alignment: Qt.AlignHCenter text: qsTr("Finalise Status Password Creation") - enabled: !submitBtn.loading && (confPswInput.text === root.password) + enabled: d.submitEnabled - onClicked: { d.submit() } - } - } - - Connections { - target: RootStore.privacyModule - function onPasswordChanged(success: bool, errorMsg: string) { - if (success) { - submitBtn.loading = false + onClicked: { + d.submit() } } } diff --git a/ui/imports/shared/views/PasswordConfirmationView.qml b/ui/imports/shared/views/PasswordConfirmationView.qml new file mode 100644 index 0000000000..4c9bce0e9b --- /dev/null +++ b/ui/imports/shared/views/PasswordConfirmationView.qml @@ -0,0 +1,110 @@ +import QtQuick 2.14 +import QtQuick.Layouts 1.12 + +import StatusQ.Controls 0.1 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + +import utils 1.0 + +ColumnLayout { + id: root + + required property string expectedPassword + property bool passwordMatch + + signal submit() + + function forceInputFocus() { + confPswInput.forceActiveFocus(Qt.MouseFocusReason) + } + + QtObject { + id: d + + function updatePasswordMatch() { + root.passwordMatch = confPswInput.text === root.expectedPassword + if (!root.passwordMatch) { + errorTxt.text = qsTr("Passwords don't match") + } + } + } + + StatusBaseText { + Layout.alignment: Qt.AlignHCenter + text: qsTr("Have you written down your password?") + font.pixelSize: 22 + font.bold: true + color: Theme.palette.directColor1 + } + + ColumnLayout { + Layout.alignment: Qt.AlignHCenter + spacing: 4 + + StatusBaseText { + 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 { + 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 { + 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 + } + } + + StatusPasswordInput { + id: confPswInput + + property bool showPassword: false + + objectName: "confirmAgainPasswordInput" + Layout.preferredWidth: 416 + Layout.alignment: Qt.AlignHCenter + 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 = "" + d.updatePasswordMatch() + } + Keys.onReturnPressed: { + root.submit() + } + + StatusFlatRoundButton { + 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 + Layout.alignment: Qt.AlignHCenter + Layout.fillHeight: true + Layout.topMargin: -Style.current.halfPadding + font.pixelSize: 12 + color: Theme.palette.dangerColor1 + } +} diff --git a/ui/imports/shared/views/qmldir b/ui/imports/shared/views/qmldir index 7c1852da75..2e2a85b010 100644 --- a/ui/imports/shared/views/qmldir +++ b/ui/imports/shared/views/qmldir @@ -5,6 +5,7 @@ ExistingContacts 1.0 ExistingContacts.qml HistoryView 1.0 HistoryView.qml NoFriendsRectangle 1.0 NoFriendsRectangle.qml PasswordView 1.0 PasswordView.qml +PasswordConfirmationView 1.0 PasswordConfirmationView.qml PickedContacts 1.0 PickedContacts.qml ProfileDialogView 1.0 ProfileDialogView.qml SearchResults 1.0 SearchResults.qml