WIP to setup the keys event

Jellyfin.qml

@@ -3,13 +3,6 @@ import fbx.application 1.0
 import "Views" as View
 
 Application {
-    // Liste des labels et types
-    property var fields: [
-        {label: "Server", type: "text"},
-        {label: "User", type: "text"},
-        {label: "Password", type: "password"}
-    ]
-
     Row {
         anchors.fill: parent
         spacing: 10
@@ -26,7 +19,14 @@ Application {
 
             color: "#000B25"
 
+            focus: true
+
             View.Login {}
         }
+
+        Component.onCompleted: {
+            // Setup the login view to be focus on start
+            columnLogin.updateSelection();
+        }
     }
 }

Views/Login.qml

@@ -1,37 +1,74 @@
 import QtQuick 2.5
 
 Column {
-    anchors.fill: parent
+    // Liste des labels et types
+    property var fields: [
+        {label: "Server", type: "text"},
+        {label: "User", type: "text"},
+        {label: "Password", type: "password"}
+    ]
+
+    property int currentIndex: 0
+
+    id: columnLogin
+
+    //anchors.centerIn: parent
+    anchors.verticalCenter: parent.verticalCenter
     anchors.margins: 20
     spacing: 15
+    width: parent.width * 0.8
+
+    function updateSelection() {
+        for (let i = 0; i < repeater.count; i++) {
+            repeater.itemAt(i).color = i === columnLogin.currentIndex ? "lightblue" : "transparent";
+        }
+    }
 
     // Repeater pour générer les champs basés sur la liste des labels et types
     Repeater {
         model: fields
 
         Row {
-            width: parent.width
             spacing: 10
 
             Text {
+                width: parent.width / 2 - 5
                 text: modelData.label + ":"
-                width: 100
                 color: "white"
-                verticalAlignment: Text.AlignVCenter
                 font.pixelSize: 16
             }
 
             // TextInput pour les champs Server et User, et mode Password pour Password
-            TextInput {
+            Rectangle {
-                width: parent.width - 110
+                width: 200
-                height: 30
+                height: 20
-                font.pixelSize: 16
                 color: "white"
-                text: modelData.label
+                //border.color: "black"
+                //border.width: 3
+                //radius: 5
 
-                // Détermine le mode de saisie en fonction du type
+                TextInput {
-                echoMode: modelData.type === "password" ? TextInput.Password : TextInput.Normal
+                    font.pixelSize: 16
-                //echoMode: TextInput.Password
+                    color: "black"
+                    text: modelData.label
+
+                    // Détermine le mode de saisie en fonction du type
+                    echoMode: modelData.type === "password" ? TextInput.Password : TextInput.Normal
+                }
+            }
+        }
+
+        Keys.onPressed: {
+            if (event.key === Qt.Key_Up) {
+                if (currentIndex > 0) {
+                    currentIndex--;
+                    updateSelection();
+                }
+            } else if (event.key == Qt.Key_Down) {
+                if (currentIndex < repeater.children.length - 1) {
+                    currentIndex++;
+                    updateSelection()
+                }
             }
         }
     }