CCats/gui/src/IpPopup.ui.qml

import QtQuick 2.4
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

Popup {
    id: popup
    height: 200
    dim: true
    clip: false
    width: 400
    modal: true
    focus: true
    closePolicy: Popup.NoAutoClose
    anchors.centerIn: Overlay.overlay

    Connections {
        target: _qmlHandler
        onIpPopupClose: {
            popup.close()
        }
        onIpPopupOpen: {
          popup.open();
        }
        onIpPopupSetStatus: {
            ipPopupStatusText.text = status
        }
        onIpPopupEnableConnectButton: {
            ipPopupConnectButton.enabled = true
        }
        onIpPopupDisableConnectButton: {
            ipPopupConnectButton.enabled = false
        }
    }

    ColumnLayout {
        anchors.fill: parent

        Text {
            Layout.alignment: Qt.AlignCenter
            id: ipPopupText
            color: "#ffffff"
            text: qsTr("Enter the IP to connect:")
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: 20
        }

        TextField {
            Layout.alignment: Qt.AlignCenter
            id: ipPopupIpInput
            selectByMouse: true
            focus: true
            text: qsTr("")
            placeholderText: "IP-Address"
            horizontalAlignment: Text.AlignHCenter
            validator: RegExpValidator {
                regExp: /^(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))$/
            }
            // @disable-check M222
            Keys.onReturnPressed: ipPopupConnectButton.activate()
            // @disable-check M222
            Keys.onEnterPressed: ipPopupConnectButton.activate()

            onTextEdited: ipPopupConnectButton.enabled = ipPopupIpInput.acceptableInput
        }

        Text {
            id: ipPopupStatusText
            color: "#df3f3f"
            text: qsTr("")
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            Layout.alignment: Qt.AlignCenter
            font.pixelSize: 20
        }

        Button {
            Layout.alignment: Qt.AlignCenter
            id: ipPopupConnectButton
            text: qsTr("Connect")
            rightPadding: 8
            padding: 12
            enabled: false
            font.pointSize: 16
            // @disable-check M223
            onClicked: {
                // @disable-check M222
                ipPopupConnectButton.activate()
            }

            // @disable-check M222
            function activate() {
                // @disable-check M223
                if (ipPopupConnectButton.enabled) {
                    // @disable-check M222
                    _qmlHandler.onIpPopupConnectButton(ipPopupIpInput.text)
                }
            }
        }
    }
}