mirror of https://github.com/status-im/StatusQ.git
76 lines
2.1 KiB
QML
76 lines
2.1 KiB
QML
import QtQuick 2.14
|
|
import QtQuick.Layouts 1.14
|
|
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Controls 0.1
|
|
import StatusQ.Controls.Validators 0.1
|
|
|
|
Column {
|
|
id: root
|
|
spacing: 25
|
|
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
|
|
|
// PIN input that accepts only numbers
|
|
StatusBaseText {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.palette.directColor1
|
|
text: "Enter Keycard PIN"
|
|
font.pixelSize: 30
|
|
font.bold: true
|
|
}
|
|
|
|
StatusPinInput {
|
|
id: numbersPinInput
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
validator: StatusIntValidator{bottom: 0; top: 999999;}
|
|
}
|
|
|
|
StatusBaseText {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.palette.dangerColor1
|
|
text: "Only numbers allowed"
|
|
font.pixelSize: 16
|
|
}
|
|
|
|
StatusBaseText {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.palette.directColor1
|
|
text: "Introduced PIN: " + numbersPinInput.pinInput
|
|
font.pixelSize: 12
|
|
}
|
|
|
|
// PIN input that accepts input depending on the regular expression definition
|
|
StatusBaseText {
|
|
topPadding: 100
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.palette.directColor1
|
|
text: "Enter another Keycard PIN"
|
|
font.pixelSize: 30
|
|
font.bold: true
|
|
}
|
|
|
|
StatusPinInput {
|
|
id: regexPinInput
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
|
|
circleDiameter: 22
|
|
circleSpacing: 22
|
|
pinLen: 7
|
|
}
|
|
|
|
StatusBaseText {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.palette.dangerColor1
|
|
text: "Only alphanumeric characters and '@' allowed"
|
|
font.pixelSize: 16
|
|
}
|
|
|
|
StatusBaseText {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.palette.directColor1
|
|
text: "Introduced PIN: " + regexPinInput.pinInput
|
|
font.pixelSize: 12
|
|
}
|
|
}
|