import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Page {
    width: 400
    height: 400

    Connections {
        target: _qmlHandler
        onLoginSetStatus: {
            loginStatusText.text = status
        }
    }

    ColumnLayout {
        anchors.fill: parent

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

        TextField {
            Layout.alignment: Qt.AlignCenter
            id: loginUsernameInput
            selectByMouse: true
            focus: true
            text: qsTr("")
            placeholderText: "Username"
            horizontalAlignment: Text.AlignHCenter
            // @disable-check M222
            Keys.onReturnPressed: loginLoginButton.activate()
            // @disable-check M222
            Keys.onEnterPressed: loginLoginButton.activate()
        }

        TextField {
            Layout.alignment: Qt.AlignCenter
            id: loginPasswordInput
            selectByMouse: true
            text: qsTr("")
            placeholderText: "Password"
            horizontalAlignment: Text.AlignHCenter
            // @disable-check M222
            Keys.onReturnPressed: loginLoginButton.activate()
            // @disable-check M222
            Keys.onEnterPressed: loginLoginButton.activate()
            echoMode: TextInput.Password
        }

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

        Button {
            Layout.alignment: Qt.AlignCenter
            id: loginLoginButton
            text: qsTr("Login")
            enabled: (loginUsernameInput.text != ""
                      && loginPasswordInput.text != "")
            font.pointSize: 16
            // @disable-check M223
            onClicked: {
                // @disable-check M222
                loginLoginButton.activate()
            }

            // @disable-check M222
            function activate() {
                // @disable-check M223
                if (loginLoginButton.enabled) {
                    // @disable-check M222
                    _qmlHandler.onLoginLoginButton(loginUsernameInput.text, loginPasswordInput.text)
                }
            }
        }
    }
}