diff --git a/ui/onboarding/Keycard/CreatePINModal.qml b/ui/onboarding/Keycard/CreatePINModal.qml index 64c4077565..e801bcf6ee 100644 --- a/ui/onboarding/Keycard/CreatePINModal.qml +++ b/ui/onboarding/Keycard/CreatePINModal.qml @@ -1,12 +1,16 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 -import QtQuick.Dialogs 1.3 +import QtQuick.Layouts 1.13 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 -import "../../imports" +import StatusQ.Popups 0.1 + +import "../../imports/utils" as Imports import "../../shared" import "../../shared/keycard" -ModalPopup { +StatusModal { property bool firstPINFieldValid: false property bool repeatPINFieldValid: false property string pinValidationError: "" @@ -14,7 +18,8 @@ ModalPopup { property bool submitted: false id: popup - title: qsTr("Create PIN") + header.title: qsTr("Create PIN") + anchors.centerIn: parent height: 500 onOpened: { @@ -23,83 +28,75 @@ ModalPopup { firstPINField.forceActiveFocus(Qt.MouseFocusReason) } - Input { - id: firstPINField - anchors.rightMargin: 56 - anchors.leftMargin: 56 - anchors.top: parent.top - anchors.topMargin: 88 - placeholderText: qsTr("New PIN") - textField.echoMode: TextInput.Password - onTextChanged: { - [firstPINFieldValid, pinValidationError] = - Utils.validatePINs("first", firstPINField, repeatPINField); - } - } - - Input { - id: repeatPINField - enabled: firstPINFieldValid - anchors.rightMargin: 0 - anchors.leftMargin: 0 - anchors.right: firstPINField.right - anchors.left: firstPINField.left - anchors.top: firstPINField.bottom - anchors.topMargin: Style.current.xlPadding - placeholderText: qsTr("Confirm PIN") - textField.echoMode: TextInput.Password - Keys.onReturnPressed: function(event) { - if (submitBtn.enabled) { - submitBtn.clicked(event) + contentItem: Item { + Input { + id: firstPINField + anchors.rightMargin: 56 + anchors.leftMargin: 56 + anchors.top: parent.top + anchors.topMargin: 88 + placeholderText: qsTr("New PIN") + textField.echoMode: TextInput.Password + onTextChanged: { + [firstPINFieldValid, pinValidationError] = + Imports.Utils.validatePINs("first", firstPINField, repeatPINField); } } - onTextChanged: { - [repeatPINFieldValid, repeatPINValidationError] = - Utils.validatePINs("repeat", firstPINField, repeatPINField); + + Input { + id: repeatPINField + enabled: firstPINFieldValid + anchors.rightMargin: 0 + anchors.leftMargin: 0 + anchors.right: firstPINField.right + anchors.left: firstPINField.left + anchors.top: firstPINField.bottom + anchors.topMargin: 32 + placeholderText: qsTr("Confirm PIN") + textField.echoMode: TextInput.Password + Keys.onReturnPressed: function(event) { + if (submitBtn.enabled) { + submitBtn.clicked(event) + } + } + onTextChanged: { + [repeatPINFieldValid, repeatPINValidationError] = + Imports.Utils.validatePINs("repeat", firstPINField, repeatPINField); + } + } + + StatusBaseText { + id: validationError + text: { + if (pinValidationError !== "") return pinValidationError; + if (repeatPINValidationError !== "") return repeatPINValidationError; + return ""; + } + anchors.top: repeatPINField.bottom + anchors.topMargin: 20 + anchors.right: parent.right + anchors.left: parent.left + horizontalAlignment: Text.AlignHCenter + color: Theme.palette.dangerColor1 + font.pixelSize: 11 + } + + StatusBaseText { + text: qsTr("Create a 6 digit long PIN") + wrapMode: Text.WordWrap + anchors.right: parent.right + anchors.left: parent.left + horizontalAlignment: Text.AlignHCenter + anchors.bottom: parent.bottom + anchors.bottomMargin: 20 + color: Theme.palette.directColor1 + font.pixelSize: 12 } } - StyledText { - id: validationError - text: { - if (pinValidationError !== "") return pinValidationError; - if (repeatPINValidationError !== "") return repeatPINValidationError; - return ""; - } - anchors.top: repeatPINField.bottom - anchors.topMargin: 20 - anchors.right: parent.right - anchors.rightMargin: Style.current.xlPadding - anchors.left: parent.left - anchors.leftMargin: Style.current.xlPadding - horizontalAlignment: Text.AlignHCenter - color: Style.current.danger - font.pixelSize: 11 - } - - StyledText { - text: qsTr("Create a 6 digit long PIN") - wrapMode: Text.WordWrap - anchors.right: parent.right - anchors.rightMargin: Style.current.xlPadding - anchors.left: parent.left - anchors.leftMargin: Style.current.xlPadding - horizontalAlignment: Text.AlignHCenter - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - color: Style.current.secondaryText - font.pixelSize: 12 - } - - footer: Item { - width: parent.width - height: submitBtn.height - + rightButtons: [ StatusButton { id: submitBtn - anchors.bottom: parent.bottom - anchors.topMargin: Style.current.padding - anchors.right: parent.right text: qsTr("Create PIN") enabled: firstPINFieldValid && repeatPINFieldValid @@ -109,5 +106,5 @@ ModalPopup { popup.close() } } - } + ] } diff --git a/ui/onboarding/KeycardFlowSelection.qml b/ui/onboarding/KeycardFlowSelection.qml index b69dd85059..148263546b 100644 --- a/ui/onboarding/KeycardFlowSelection.qml +++ b/ui/onboarding/KeycardFlowSelection.qml @@ -14,7 +14,6 @@ Item { property int flow: OnboardingFlow.Recover id: keycardView - anchors.fill: parent Component.onCompleted: { insertCard.open() keycardModel.startConnection() diff --git a/ui/shared/keycard/PINModal.qml b/ui/shared/keycard/PINModal.qml index 1ce9c11cbf..907c9c7bfa 100644 --- a/ui/shared/keycard/PINModal.qml +++ b/ui/shared/keycard/PINModal.qml @@ -1,16 +1,21 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 -import QtQuick.Dialogs 1.3 +import QtQuick.Layouts 1.13 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 -import "../../imports" +import StatusQ.Popups 0.1 + +import "../../imports/utils" as Imports import "../../shared" -ModalPopup { +StatusModal { property bool pinFieldValid: false property bool submitted: false id: popup - title: qsTr("Authenticate PIN") + header.title: qsTr("Authenticate PIN") + anchors.centerIn: parent height: 400 onOpened: { @@ -19,43 +24,37 @@ ModalPopup { pinField.forceActiveFocus(Qt.MouseFocusReason) } - Input { - id: pinField - anchors.rightMargin: 56 - anchors.leftMargin: 56 - anchors.top: parent.top - anchors.topMargin: 88 - placeholderText: qsTr("PIN") - textField.echoMode: TextInput.Password - onTextChanged: { - [pinFieldValid, _] = - Utils.validatePINs("first", pinField, pinField); + contentItem: Item { + Input { + id: pinField + anchors.rightMargin: 56 + anchors.leftMargin: 56 + anchors.top: parent.top + anchors.topMargin: 88 + placeholderText: qsTr("PIN") + textField.echoMode: TextInput.Password + onTextChanged: { + [pinFieldValid, _] = + Imports.Utils.validatePINs("first", pinField, pinField); + } + } + + StatusBaseText { + text: qsTr("Insert your 6-digit PIN") + wrapMode: Text.WordWrap + anchors.right: parent.right + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.bottomMargin: 20 + horizontalAlignment: Text.AlignHCenter + color: Theme.palette.directColor1 + font.pixelSize: 12 } } - StyledText { - text: qsTr("Insert your 6-digit PIN") - wrapMode: Text.WordWrap - anchors.right: parent.right - anchors.rightMargin: Style.current.xlPadding - anchors.left: parent.left - anchors.leftMargin: Style.current.xlPadding - horizontalAlignment: Text.AlignHCenter - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - color: Style.current.secondaryText - font.pixelSize: 12 - } - - footer: Item { - width: parent.width - height: submitBtn.height - + rightButtons: [ StatusButton { id: submitBtn - anchors.bottom: parent.bottom - anchors.topMargin: Style.current.padding - anchors.right: parent.right text: qsTr("Authenticate") enabled: pinFieldValid @@ -65,5 +64,6 @@ ModalPopup { popup.close() } } - } + ] + } diff --git a/ui/shared/keycard/PairingModal.qml b/ui/shared/keycard/PairingModal.qml index aa877569ad..b54e399bd0 100644 --- a/ui/shared/keycard/PairingModal.qml +++ b/ui/shared/keycard/PairingModal.qml @@ -1,16 +1,19 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 -import QtQuick.Dialogs 1.3 +import QtQuick.Layouts 1.13 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 -import "../../imports" +import StatusQ.Popups 0.1 import "../../shared" -ModalPopup { +StatusModal { property bool pairingPasswordFieldValid: false property bool submitted: false id: popup - title: qsTr("Insert pairing code") + header.title: qsTr("Insert pairing code") + anchors.centerIn: parent height: 400 onOpened: { @@ -19,42 +22,37 @@ ModalPopup { pairingPasswordField.forceActiveFocus(Qt.MouseFocusReason) } - Input { - id: pairingPasswordField - anchors.rightMargin: 56 - anchors.leftMargin: 56 - anchors.top: parent.top - anchors.topMargin: 88 - placeholderText: qsTr("Pairing code") - textField.echoMode: TextInput.Password - onTextChanged: { - pairingPasswordFieldValid = pairingPasswordField.text !== ""; + contentItem: Item { + Input { + id: pairingPasswordField + anchors.rightMargin: 56 + anchors.leftMargin: 56 + anchors.top: parent.top + anchors.topMargin: 88 + anchors.bottomMargin: 0 + placeholderText: qsTr("Pairing code") + textField.echoMode: TextInput.Password + onTextChanged: { + pairingPasswordFieldValid = pairingPasswordField.text !== ""; + } + } + + StatusBaseText { + text: qsTr("Insert the Keycard pairing code") + wrapMode: Text.WordWrap + anchors.right: parent.right + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.bottomMargin: 20 + horizontalAlignment: Text.AlignHCenter + color: Theme.palette.directColor1 + font.pixelSize: 12 } } - StyledText { - text: qsTr("Insert the Keycard pairing code") - wrapMode: Text.WordWrap - anchors.right: parent.right - anchors.rightMargin: Style.current.xlPadding - anchors.left: parent.left - anchors.leftMargin: Style.current.xlPadding - horizontalAlignment: Text.AlignHCenter - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - color: Style.current.secondaryText - font.pixelSize: 12 - } - - footer: Item { - width: parent.width - height: submitBtn.height - + rightButtons: [ StatusButton { id: submitBtn - anchors.bottom: parent.bottom - anchors.topMargin: Style.current.padding - anchors.right: parent.right text: qsTr("Pair") enabled: pairingPasswordFieldValid @@ -64,5 +62,5 @@ ModalPopup { popup.close() } } - } + ] }