Refs #2. Moved LoginForm.ui to Login.qml

.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

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()

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"

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

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
+    }
 }