diff --git a/.gitignore b/.gitignore index 73247ab..83dd9d3 100644 --- a/.gitignore +++ b/.gitignore @@ -165,3 +165,4 @@ cython_debug/ # option (not recommended) you can uncomment the following to ignore the entire idea folder. #.idea/ .idea +Frontend/DashboardsViewer/imports/generated diff --git a/Frontend/DashboardsViewer/CMakeLists.txt b/Frontend/DashboardsViewer/CMakeLists.txt index cb8b0dd..f3d32c3 100644 --- a/Frontend/DashboardsViewer/CMakeLists.txt +++ b/Frontend/DashboardsViewer/CMakeLists.txt @@ -80,4 +80,8 @@ if(EMSCRIPTEN) COMMAND ${CMAKE_COMMAND} -E copy ${CMAKE_CURRENT_BINARY_DIR}/DashboardsViewerApp.worker.js ${PROJECT_SOURCE_DIR}/../../static ) -endif(EMSCRIPTEN) +else() + add_custom_command(TARGET DashboardsViewerApp POST_BUILD + COMMAND ${CMAKE_COMMAND} -E copy_directory + ${CMAKE_CURRENT_BINARY_DIR}/qml/OpenTeraLibs ${CMAKE_CURRENT_SOURCE_DIR}/imports/generated/OpenTeraLibs) +endif() diff --git a/Frontend/DashboardsViewer/DashboardsViewer.qmlproject b/Frontend/DashboardsViewer/DashboardsViewer.qmlproject index 046775f..e2feda6 100644 --- a/Frontend/DashboardsViewer/DashboardsViewer.qmlproject +++ b/Frontend/DashboardsViewer/DashboardsViewer.qmlproject @@ -88,7 +88,7 @@ Project { qt6Project: true /* List of plugin directories passed to QML runtime */ - importPaths: [ "imports", "asset_imports" ] + importPaths: [ "imports", "asset_imports", "imports/generated" ] /* Required for deployment */ targetDirectory: "/opt/DashboardsViewer" diff --git a/Frontend/DashboardsViewer/content/CMakeLists.txt b/Frontend/DashboardsViewer/content/CMakeLists.txt index f0656c3..977e5a6 100644 --- a/Frontend/DashboardsViewer/content/CMakeLists.txt +++ b/Frontend/DashboardsViewer/content/CMakeLists.txt @@ -12,7 +12,6 @@ qt6_add_qml_module(content screens/DashboardSelector.qml screens/DashboardSelectorForm.ui.qml screens/Login.qml - screens/LoginForm.ui.qml # Uis ui/BasicButton.ui.qml ui/BasicDialog.qml diff --git a/Frontend/DashboardsViewer/content/screens/Login.qml b/Frontend/DashboardsViewer/content/screens/Login.qml index b4e6f12..f200949 100644 --- a/Frontend/DashboardsViewer/content/screens/Login.qml +++ b/Frontend/DashboardsViewer/content/screens/Login.qml @@ -1,44 +1,80 @@ import QtQuick 2.15 -import DashboardsViewer +import QtQuick.Controls 2.15 +import QtQuick.Layouts +import QtQuick.Effects import OpenTeraLibs.UserClient -LoginForm { +import DashboardsViewer +import "../ui" + +Item { + states: [ + State { + name: "logging" + PropertyChanges { + target: lblInfo + color: "lightgreen" + text: qsTr("Logging in...") + } + PropertyChanges { + target: inputUsername + enabled: false + opacity: 0.5 + } + PropertyChanges { + target: inputPassword + enabled: false + opacity: 0.5 + } + }, + State { + name: "loginSuccess" + PropertyChanges { + target: lblInfo + color: Constants.textColor + text: qsTr("Welcome!") + } + }, + State { + name: "loginError" + PropertyChanges { + target: lblInfo + color: "yellow" + text: infoText + } + } + ] function do_login() { if (!btnLogin.enabled) - return; + return - console.log("Initating login to ", AppURL); - /*infoText.text = qsTr("Logging in..."); - infoText.color = "lightgreen"*/ - state = "logging"; - UserClient.connect(AppURL, username, password); + console.log("Initating login to ", AppURL) + + state = "logging" + UserClient.connect(AppURL, inputUsername.text, inputPassword.text) } function clear() { - username = ""; - password = ""; + inputUsername.clear(); + inputPassword.clear(); state = ""; } Component.onCompleted: { - fieldUsername.forceActiveFocus(); + inputUsername.forceActiveFocus() } onVisibleChanged: { if (!visible) - clear(); + clear() } //anchors.fill: parent Keys.enabled: true - Keys.onReturnPressed: function() { - do_login(); - } - - btnLogin.onClicked: function() { - do_login(); + Keys.onReturnPressed: function () { + do_login() } Connections { @@ -50,7 +86,7 @@ LoginForm { var reply = UserClient.get("/api/user/users", {"self": true}); reply.requestSucceeded.connect(function(response, statusCode) { - console.log("Success", response, statusCode); + //console.log("Success", response, statusCode); var userInfo = response[0]; menu.displayUsername = userInfo.user_firstname + " " + userInfo.user_lastname; }); @@ -63,4 +99,155 @@ LoginForm { state = "loginError"; } } + //////////////////////// + + Rectangle { + id: recBackground + + anchors.centerIn: parent + implicitHeight: layoutMain.implicitHeight + layoutMain.anchors.margins * 2 + implicitWidth: 400 // layoutMain.implicitWidth + layoutMain.anchors.margins * 2 + visible: true + border.color: "grey" + border.width: 2 + radius: 10 + gradient: Gradient { + GradientStop { + position: 0.0 + color: Constants.lightBackgroundColor + } + GradientStop { + position: 0.5 + color: Constants.highlightColor + } + GradientStop { + position: 1.0 + color: Constants.lightBackgroundColor + } + } + + ColumnLayout { + id: layoutMain + spacing: 10 + anchors.fill: parent + anchors.margins: 10 + + Image { + id: imgLogo + source: "../images/logos/LogoOpenTera.png" + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + fillMode: Image.PreserveAspectFit + height: 200 + sourceSize.height: height + } + + Text { + id: txtUsername + text: qsTr("Username") + font.pixelSize: Constants.largeFontSize + font.bold: true + color: Constants.textColor + horizontalAlignment: Text.AlignHCenter + style: Text.Outline + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + } + + Rectangle { + id: recInputUsername + border.color: "#3a1212" + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Layout.fillWidth: true + Layout.leftMargin: 10 + Layout.rightMargin: 10 + Layout.topMargin: -parent.spacing + height: inputUsername.implicitHeight + 20 + + TextInput { + id: inputUsername + anchors.fill: parent + font.pixelSize: Constants.baseFontSize + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + selectByMouse: true + maximumLength: 20 + focus: true + KeyNavigation.tab: inputPassword + } + } + + Text { + id: txtPassword + text: qsTr("Password") + font.pixelSize: Constants.largeFontSize + font.bold: true + color: Constants.textColor + horizontalAlignment: Text.AlignHCenter + style: Text.Outline + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + } + + Rectangle { + id: recInputPassword + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + border.color: "#3a1212" + Layout.fillWidth: true + Layout.leftMargin: 10 + Layout.rightMargin: 10 + Layout.topMargin: -parent.spacing + height: inputPassword.implicitHeight + 20 + + TextInput { + id: inputPassword + anchors.fill: parent + font.pixelSize: Constants.baseFontSize + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + wrapMode: Text.WrapAnywhere + echoMode: TextInput.Password + selectByMouse: true + maximumLength: 20 + KeyNavigation.tab: btnLogin + } + } + + BasicButton { + id: btnLogin + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Layout.fillWidth: true + + Layout.minimumHeight: recInputPassword.height + Layout.leftMargin: 10 + Layout.rightMargin: 10 + Layout.topMargin: parent.spacing + + enabled: inputPassword.text && inputUsername.text + text: qsTr("Login") + onClicked: function () { + do_login() + } + } + + Text { + id: lblInfo + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Layout.fillHeight: true + Layout.fillWidth: true + + color: "cyan" + text: qsTr("Welcome! Please login.") + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + wrapMode: Text.WordWrap + style: Text.Outline + font.pixelSize: Constants.baseFontSize + } + } + } + MultiEffect { + source: recBackground + anchors.fill: source + shadowEnabled: true + shadowHorizontalOffset: 2 + shadowVerticalOffset: 2 + } } diff --git a/Frontend/DashboardsViewer/content/screens/LoginForm.ui.qml b/Frontend/DashboardsViewer/content/screens/LoginForm.ui.qml deleted file mode 100644 index 12e31d1..0000000 --- a/Frontend/DashboardsViewer/content/screens/LoginForm.ui.qml +++ /dev/null @@ -1,200 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts -import QtQuick.Effects - -import DashboardsViewer -import "../ui" - -Item { - - property alias btnLogin: btnLogin - property alias username: inputUsername.text - property alias password: inputPassword.text - property string infoText: "" - - property alias fieldUsername: inputUsername - states: [ - State { - name: "logging" - PropertyChanges { - target: lblInfo - color: "lightgreen" - text: qsTr("Logging in...") - } - PropertyChanges { - target: inputUsername - enabled: false - opacity: 0.5 - } - PropertyChanges { - target: inputPassword - enabled: false - opacity: 0.5 - } - }, - State { - name: "loginSuccess" - PropertyChanges { - target: lblInfo - color: Constants.textColor - text: qsTr("Welcome!") - } - }, - State { - name: "loginError" - PropertyChanges { - target: lblInfo - color: "yellow" - text: infoText - } - } - ] - - Rectangle { - id: recBackground - - anchors.centerIn: parent - implicitHeight: layoutMain.implicitHeight + layoutMain.anchors.margins * 2 - implicitWidth: 400 // layoutMain.implicitWidth + layoutMain.anchors.margins * 2 - visible: true - border.color: "grey" - border.width: 2 - radius: 10 - gradient: Gradient { - GradientStop { - position: 0.0 - color: Constants.lightBackgroundColor - } - GradientStop { - position: 0.5 - color: Constants.highlightColor - } - GradientStop { - position: 1.0 - color: Constants.lightBackgroundColor - } - } - - ColumnLayout { - id: layoutMain - spacing: 10 - anchors.fill: parent - anchors.margins: 10 - - Image { - id: imgLogo - source: "../images/logos/LogoOpenTera.png" - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - fillMode: Image.PreserveAspectFit - height: 200 - sourceSize.height: height - } - - Text { - id: txtUsername - text: qsTr("Username") - font.pixelSize: Constants.largeFontSize - font.bold: true - color: Constants.textColor - horizontalAlignment: Text.AlignHCenter - style: Text.Outline - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - } - - Rectangle { - id: recInputUsername - border.color: "#3a1212" - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - Layout.fillWidth: true - Layout.leftMargin: 10 - Layout.rightMargin: 10 - Layout.topMargin: -parent.spacing - height: inputUsername.implicitHeight + 20 - - TextInput { - id: inputUsername - anchors.fill: parent - font.pixelSize: Constants.baseFontSize - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - selectByMouse: true - maximumLength: 20 - focus: true - KeyNavigation.tab: inputPassword - } - } - - Text { - id: txtPassword - text: qsTr("Password") - font.pixelSize: Constants.largeFontSize - font.bold: true - color: Constants.textColor - horizontalAlignment: Text.AlignHCenter - style: Text.Outline - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - } - - Rectangle { - id: recInputPassword - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - border.color: "#3a1212" - Layout.fillWidth: true - Layout.leftMargin: 10 - Layout.rightMargin: 10 - Layout.topMargin: -parent.spacing - height: inputPassword.implicitHeight + 20 - - TextInput { - id: inputPassword - anchors.fill: parent - font.pixelSize: Constants.baseFontSize - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - wrapMode: Text.WrapAnywhere - echoMode: TextInput.Password - selectByMouse: true - maximumLength: 20 - KeyNavigation.tab: btnLogin - } - } - - BasicButton { - id: btnLogin - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - Layout.fillWidth: true - - Layout.minimumHeight: recInputPassword.height - Layout.leftMargin: 10 - Layout.rightMargin: 10 - Layout.topMargin: parent.spacing - - enabled: username && password - text: qsTr("Login") - } - - Text { - id: lblInfo - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - Layout.fillHeight: true - Layout.fillWidth: true - - color: "cyan" - text: qsTr("Welcome! Please login.") - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - wrapMode: Text.WordWrap - style: Text.Outline - font.pixelSize: Constants.baseFontSize - } - } - } - MultiEffect { - source: recBackground - anchors.fill: source - shadowEnabled: true - shadowHorizontalOffset: 2 - shadowVerticalOffset: 2 - } -}