status-desktop/ui/app/AppLayouts/Onboarding/views/SyncCodeView.qml

165 lines
4.6 KiB
QML

import QtQuick 2.13
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.13
import QtQuick.Controls.Universal 2.12
import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Popups.Dialog 0.1
import shared 1.0
import shared.panels 1.0
import shared.popups 1.0
import shared.controls 1.0
import "../popups"
import "../controls"
import "../stores"
import "sync"
import "../../Profile/stores"
import utils 1.0
Item {
id: root
property StartupStore startupStore
implicitWidth: layout.implicitWidth
implicitHeight: layout.implicitHeight
QtObject {
id: d
function validateConnectionString(connectionString) {
const result = root.startupStore.validateLocalPairingConnectionString(connectionString)
return result === ""
}
function onConnectionStringFound(connectionString) {
root.startupStore.setConnectionString(connectionString)
root.startupStore.doPrimaryAction()
}
}
Timer {
id: nextStateDelay
property string connectionString
interval: 1000
repeat: false
onTriggered: {
d.onConnectionStringFound(connectionString)
}
}
Column {
id: layout
anchors.centerIn: parent
width: 400
spacing: 24
StatusBaseText {
id: headlineText
width: parent.width
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 22
font.weight: Font.Bold
color: Theme.palette.directColor1
text: qsTr("Sign in by syncing")
}
StatusSwitchTabBar {
id: switchTabBar
anchors.horizontalCenter: parent.horizontalCenter
currentIndex: 0
StatusSwitchTabButton {
text: qsTr("Scan QR code")
}
StatusSwitchTabButton {
text: qsTr("Enter sync code")
}
}
StackLayout {
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
height: Math.max(mobileSync.implicitHeight, desktopSync.implicitHeight)
currentIndex: switchTabBar.currentIndex
// StackLayout doesn't support alignment, so we create an `Item` wrappers
Item {
Layout.fillWidth: true
Layout.fillHeight: true
SyncDeviceFromMobile {
id: mobileSync
anchors {
left: parent.left
right: parent.right
verticalCenter: parent.verticalCenter
}
validators: [
StatusValidator {
name: "isSyncQrCode"
errorMessage: qsTr("This does not look like a sync QR code")
validate: d.validateConnectionString
}
]
onConnectionStringFound: {
d.onConnectionStringFound(connectionString)
}
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
SyncDeviceFromDesktop {
id: desktopSync
anchors {
left: parent.left
right: parent.right
verticalCenter: parent.verticalCenter
}
input.readOnly: nextStateDelay.running
input.validators: [
StatusValidator {
name: "isSyncCode"
errorMessage: qsTr("This does not look like a sync code")
validate: d.validateConnectionString
}
]
input.onValidChanged: {
if (!input.valid)
return
nextStateDelay.connectionString = desktopSync.input.text
nextStateDelay.start()
}
}
}
}
StatusFlatButton {
text: qsTr("How to get a sync code")
anchors.horizontalCenter: parent.horizontalCenter
onClicked: {
instructionsPopup.open()
}
}
}
GetSyncCodeInstructionsPopup {
id: instructionsPopup
}
}