magpie/qml/ServerPick.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    property string address
    property bool valid: false

    signal back()
    signal success(address: string)

    title: qsTr("Chosing a server")

    Column {
        anchors.centerIn: parent
        spacing: 10

        Label {
            anchors.horizontalCenter: parent.horizontalCenter
            id: label
            text: qsTr("Type server address in the field below")
        }
        TextField {
            width: parent.width
            anchors.horizontalCenter: parent.horizontalCenter
            id: input
            placeholderText: "https://example.org"
            text: address
            onAccepted: modal.check()
            validator: RegularExpressionValidator {
                regularExpression: /^(?:http|https)?:\/\/(?:\w*\.)*(?:\w)+(?:\:\d+)?(?:(?:\/\w+)\/?)*$/
            }
        }

        Row {
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 10

            Button {
                text: qsTr("Cancel")
                onClicked: back()
            }
            Button {
                text: qsTr("Confirm")
                enabled: input.acceptableInput
                onClicked: modal.check()
            }
        }

        Popup {
            property bool inProgress: false

            id: modal
            anchors.centerIn: parent
            modal: true
            focus: true
            width: column.width + 60
            height: column.height + 60
            closePolicy: Popup.CloseOnEscape
            onClosed: function () {
                modal.inProgress = false;
                if (valid)
                    success(address);
            }

            Column {
                id: column
                anchors.centerIn: parent
                spacing: 10
                Label {
                    id: status
                    width: 300
                    wrapMode: Label.WordWrap
                    horizontalAlignment: Label.AlignHCenter
                }
                BusyIndicator {
                    id: indicator
                    anchors.horizontalCenter: parent.horizontalCenter
                    visible: modal.inProgress
                    running: modal.inProgress
                }
                Button {
                    id: button
                    text: qsTr("Close")
                    anchors.horizontalCenter: parent.horizontalCenter
                    visible: !modal.inProgress
                    onClicked: modal.close()
                    focus: true
                    Keys.onReturnPressed: {
                        if (!modal.inProgress)
                            modal.close()
                    }
                }
            }

            enter: Transition {
                NumberAnimation {
                    property: "opacity"
                    from: 0.0
                    to: 1.0
                    duration: 200
                }
            }
            exit: Transition {
                NumberAnimation {
                    property: "opacity"
                    from: 1.0
                    to: 0.0
                    duration: 200
                }
            }

            function check () {
                if (valid) {
                    success(address);
                    return;
                }

                modal.inProgress = true;
                status.text = qsTr("Checking") + " " + address + "...";
                modal.open()

                API.test(input.text, function (err, success) {
                    if (!modal.inProgress)
                        return;

                    modal.inProgress = false;
                    if (err)
                        status.text = err;
                    else
                        status.text = qsTr("Success");

                    valid = !!success;
                    if (valid) {
                        address = input.text;
                        modal.close()
                    }
                });
            }
        }
    }
}