This repository has been archived on 2026-05-31. You can view files and clone it, but cannot push or open issues or pull requests.
powersync-app/mea/ui/ConnectPage.qml

399 lines
14 KiB
QML

import QtQuick 2.5
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
import QtQuick.Layouts 1.1
import Mea 1.0
import "components"
Page {
id: root
readonly property bool haveHosts: discovery.discoveryModel.count > 0
Component.onCompleted: {
print("completed connectPage. last connected host:", settings.lastConnectedHost)
if (settings.lastConnectedHost.length > 0) {
pageStack.push(connectingPage)
Engine.connection.connect(settings.lastConnectedHost)
} else {
pageStack.push(discoveryPage)
}
}
Connections {
target: Engine.connection
onVerifyConnectionCertificate: {
print("verify cert!")
certDialog.issuerInfo = issuerInfo
certDialog.fingerprint = fingerprint
certDialog.open();
}
onConnectionError: {
pageStack.pop(root)
pageStack.push(discoveryPage)
}
}
Component {
id: discoveryPage
Page {
objectName: "discoveryPage"
header: GuhHeader {
text: qsTr("Connect %1").arg(app.systemName)
backButtonVisible: false
menuButtonVisible: true
onMenuPressed: connectionMenu.open()
}
Timer {
id: startupTimer
interval: 5000
repeat: false
running: true
}
Menu {
id: connectionMenu
objectName: "connectionMenu"
width: implicitWidth + app.margins
IconMenuItem {
objectName: "manualConnectMenuItem"
iconSource: "../images/network-vpn.svg"
text: qsTr("Manual connection")
onTriggered: pageStack.push(manualConnectPage)
}
IconMenuItem {
iconSource: "../images/bluetooth.svg"
text: qsTr("Wireless setup")
onTriggered: pageStack.push(Qt.resolvedUrl("BluetoothDiscoveryPage.qml"))
}
MenuSeparator {}
IconMenuItem {
iconSource: "../images/stock_application.svg"
text: qsTr("App settings")
onTriggered: pageStack.push(Qt.resolvedUrl("AppSettingsPage.qml"))
}
}
ColumnLayout {
anchors.fill: parent
spacing: app.margins
ColumnLayout {
Layout.fillWidth: true
Layout.margins: app.margins
spacing: app.margins
Label {
Layout.fillWidth: true
text: root.haveHosts ? qsTr("Oh, look!") : startupTimer.running ? qsTr("Just a moment...") : qsTr("Uh oh")
//color: "black"
font.pixelSize: app.largeFont
}
Label {
Layout.fillWidth: true
text: root.haveHosts ?
qsTr("There are %1 %2 boxes in your network! Which one would you like to use?").arg(discovery.discoveryModel.count).arg(app.systemName)
: startupTimer.running ? qsTr("We haven't found any %1 boxes in your network yet.").arg(app.systemName)
: qsTr("There doesn't seem to be a %1 box installed in your network. Please make sure your %1 box is correctly set up and connected.").arg(app.systemName)
wrapMode: Text.WordWrap
}
}
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 1
color: Material.accent
}
ListView {
Layout.fillWidth: true
Layout.fillHeight: true
model: discovery.discoveryModel
clip: true
delegate: ItemDelegate {
width: parent.width
height: app.delegateHeight
objectName: "discoveryDelegate" + index
property string hostAddress: model.hostAddress
ColumnLayout {
anchors.fill: parent
anchors.margins: app.margins
Label {
text: model.name
}
Label {
text: model.hostAddress
font.pixelSize: app.smallFont
}
}
onClicked: {
var url;
if (model.nymeaRpcUrl) {
url = model.nymeaRpcUrl;
} else {
url = model.webSocketUrl;
}
print("Should connect to", url)
Engine.connection.connect(url)
pageStack.push(connectingPage)
}
}
Column {
anchors.centerIn: parent
spacing: app.margins
visible: !root.haveHosts
Label {
text: qsTr("Searching for %1 boxes...").arg(app.systemName)
}
BusyIndicator {
running: visible
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 1
color: Material.accent
}
RowLayout {
Layout.fillWidth: true
Layout.margins: app.margins
visible: root.haveHosts
Label {
Layout.fillWidth: true
text: qsTr("Not the ones you're looking for? We're looking for more!")
wrapMode: Text.WordWrap
}
BusyIndicator { }
}
}
}
}
Component {
id: manualConnectPage
Page {
objectName: "manualConnectPage"
header: GuhHeader {
text: qsTr("Manual connection")
onBackPressed: pageStack.pop()
}
ColumnLayout {
anchors { left: parent.left; top: parent.top; right: parent.right }
anchors.margins: app.margins
spacing: app.margins
GridLayout {
columns: 2
Label {
text: qsTr("Protocol")
}
ComboBox {
id: connectionTypeComboBox
Layout.fillWidth: true
model: [ qsTr("TCP"), qsTr("Websocket") ]
}
Label { text: qsTr("Address:") }
TextField {
id: addressTextInput
objectName: "addressTextInput"
Layout.fillWidth: true
placeholderText: "127.0.0.1"
validator: RegExpValidator { regExp: /^((?:[0-1]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\.){0,3}(?:[0-1]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])$/ }
}
Label { text: qsTr("Port:") }
TextField {
id: portTextInput
Layout.fillWidth: true
placeholderText: connectionTypeComboBox.currentIndex === 0 ? "2222" : "4444"
validator: IntValidator{bottom: 1; top: 65535;}
}
Label {
Layout.fillWidth: true
text: qsTr("Encrypted connection:")
}
CheckBox {
id: secureCheckBox
checked: true
}
}
Button {
text: qsTr("Connect")
objectName: "connectButton"
Layout.fillWidth: true
onClicked: {
var rpcUrl
var hostAddress
var port
// Set default to placeholder
if (addressTextInput.text === "") {
hostAddress = addressTextInput.placeholderText
} else {
hostAddress = addressTextInput.text
}
if (portTextInput.text === "") {
port = portTextInput.placeholderText
} else {
port = portTextInput.text
}
if (connectionTypeComboBox.currentIndex == 0) {
if (secureCheckBox.checked) {
rpcUrl = "nymeas://" + hostAddress + ":" + port
} else {
rpcUrl = "nymea://" + hostAddress + ":" + port
}
} else if (connectionTypeComboBox.currentIndex == 1) {
if (secureCheckBox.checked) {
rpcUrl = "wss://" + hostAddress + ":" + port
} else {
rpcUrl = "ws://" + hostAddress + ":" + port
}
}
print("Try to connect ", rpcUrl)
Engine.connection.connect(rpcUrl)
pageStack.push(connectingPage)
}
}
}
}
}
Component {
id: connectingPage
Page {
ColumnLayout {
anchors.centerIn: parent
width: parent.width - app.margins * 2
spacing: app.margins
Label {
text: qsTr("Trying to connect...")
wrapMode: Text.WordWrap
font.pixelSize: app.largeFont
Layout.fillWidth: true
}
Button {
text: qsTr("Cancel")
Layout.fillWidth: true
onClicked: {
Engine.connection.disconnect()
pageStack.pop(root);
pageStack.push(discoveryPage);
}
}
}
}
}
Dialog {
id: certDialog
width: Math.min(parent.width * .9, 400)
x: (parent.width - width) / 2
y: (parent.height - height) / 2
standardButtons: Dialog.Yes | Dialog.No
property var fingerprint
property var issuerInfo
ColumnLayout {
anchors { left: parent.left; right: parent.right; top: parent.top }
spacing: app.margins
RowLayout {
Layout.fillWidth: true
spacing: app.margins
ColorIcon {
Layout.preferredHeight: app.iconSize * 2
Layout.preferredWidth: height
name: "../images/dialog-warning-symbolic.svg"
color: app.guhAccent
}
Label {
id: titleLabel
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: qsTr("Warning")
color: app.guhAccent
font.pixelSize: app.largeFont
}
}
Label {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: qsTr("The authenticity of this %1 box cannot be verified.").arg(app.systemName)
}
Label {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: qsTr("If this is the first time you connect to this box, this is expected. Once you trust a box, you should never see this message again for that one. If you see this message multiple times for the same box, something suspicious is going on!")
}
GridLayout {
columns: 2
Repeater {
model: certDialog.issuerInfo
Label {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: modelData
}
}
}
Label {
Layout.fillWidth: true
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
text: qsTr("Fingerprint: ") + certDialog.fingerprint
}
Label {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: qsTr("Do you want to trust this device?")
font.bold: true
}
}
onAccepted: {
Engine.connection.acceptCertificate(certDialog.fingerprint)
}
}
}