UserManagement: Update inputs and fix mismatch in username creation / login

nymea-app/resources.qrc

@@ -326,5 +326,6 @@
         <file>ui/shaders/brightnesscircle.frag.qsb</file>
         <file>ui/shaders/colorizedimage.frag.qsb</file>
         <file>ui/system/EvDashSettingsPage.qml</file>
+        <file>ui/components/UsernameTextField.qml</file>
     </qresource>
 </RCC>

nymea-app/ui/Nymea.qml

@@ -125,7 +125,7 @@ ApplicationWindow {
         onOpenMagicSettings: rootItem.openMagicSettings();
         onOpenAppSettings: rootItem.openAppSettings();
         onOpenSystemSettings: rootItem.openSystemSettings();
-        onOpenCustomPage: rootItem.openCustomPage(page);
+        onOpenCustomPage: (page) => rootItem.openCustomPage(page);
         onConfigureMainView: rootItem.configureMainView();
         onStartManualConnection: rootItem.startManualConnection();
         onStartWirelessSetup: rootItem.startWirelessSetup();

nymea-app/ui/components/PasswordTextField.qml

@@ -131,6 +131,8 @@ ColumnLayout {
         }
     }
 
+    spacing: root.signup ? Style.margins : 0
+
     RowLayout {
         visible: root.signup
 

nymea-app/ui/components/UsernameTextField.qml

@@ -0,0 +1,37 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+*
+* Copyright (C) 2013 - 2024, nymea GmbH
+* Copyright (C) 2024 - 2025, chargebyte austria GmbH
+*
+* This file is part of nymea-app.
+*
+* nymea-app is free software: you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation, either version 3 of the License, or
+* (at your option) any later version.
+*
+* nymea-app is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+* General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License
+* along with nymea-app. If not, see <https://www.gnu.org/licenses/>.
+*
+* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import QtQuick
+import QtQuick.Controls
+
+NymeaTextField {
+    id: root
+    placeholderText: (engine.jsonRpcClient.ensureServerVersion("6.0") ? qsTr("Username") : qsTr("Your e-mail address"))
+    inputMethodHints: engine.jsonRpcClient.ensureServerVersion("6.0")
+                      ? Qt.ImhEmailCharactersOnly | Qt.ImhNoAutoUppercase | Qt.ImhNoPredictiveText
+                      : Qt.ImhNoAutoUppercase | Qt.ImhNoPredictiveText
+    validator: RegularExpressionValidator {
+        regularExpression: /[a-zA-Z0-9_\\.+-@]{3,}/
+    }
+}

nymea-app/ui/connection/LoginPage.qml

@@ -39,7 +39,6 @@ SettingsPageBase {
         onBackPressed: root.backPressed()
     }
 
-
     Connections {
         target: engine.jsonRpcClient
         onAuthenticationFailed: {
@@ -104,36 +103,21 @@ SettingsPageBase {
         }
 
 
-        GridLayout {
+        ColumnLayout {
             id: loginForm
             Layout.fillWidth: true
-            Layout.leftMargin: app.margins; Layout.rightMargin: app.margins
+            Layout.leftMargin: app.margins
-            columns: app.width > 500 ? 2 : 1
+            Layout.rightMargin: app.margins
-            columnSpacing: app.margins
+            spacing: app.margins
 
             property bool showErrors: false
 
-            Label {
+            UsernameTextField {
-                text: (engine.jsonRpcClient.ensureServerVersion("6.0") ? qsTr("Username") : qsTr("Your e-mail address"))
-                Layout.fillWidth: true
-                Layout.minimumWidth: implicitWidth
-            }
-            NymeaTextField {
                 id: usernameTextField
                 Layout.fillWidth: true
-                placeholderText: qsTr("Required")
-                inputMethodHints: engine.jsonRpcClient.ensureServerVersion("6.0")
-                                  ? Qt.ImhEmailCharactersOnly | Qt.ImhNoAutoUppercase | Qt.ImhNoPredictiveText
-                                  : Qt.ImhNoAutoUppercase | Qt.ImhNoPredictiveText
                 error: loginForm.showErrors && !acceptableInput
-                validator: RegularExpressionValidator {
-                    regularExpression: /[a-zA-Z0-9_\\.+-@]{3,}/
-                }
-            }
-            Label {
-                Layout.fillWidth: true
-                text: qsTr("Password")
             }
+
             PasswordTextField {
                 id: passwordTextField
                 Layout.fillWidth: true
@@ -146,27 +130,17 @@ SettingsPageBase {
                 }
             }
 
-            Label {
-                text: qsTr("Your name")
-                Layout.fillWidth: true
-                visible: engine.jsonRpcClient.ensureServerVersion("6.0") && engine.jsonRpcClient.initialSetupRequired
-            }
             TextField {
                 id: displayNameTextField
                 Layout.fillWidth: true
-                placeholderText: qsTr("Optional")
+                placeholderText: qsTr("Your name") + " (" + qsTr("Optional") + ")"
                 visible: engine.jsonRpcClient.ensureServerVersion("6.0") && engine.jsonRpcClient.initialSetupRequired
             }
 
-            Label {
-                text: qsTr("Email")
-                Layout.fillWidth: true
-                visible: engine.jsonRpcClient.ensureServerVersion("6.0") && engine.jsonRpcClient.initialSetupRequired
-            }
             TextField {
                 id: emailTextField
                 Layout.fillWidth: true
-                placeholderText: qsTr("Optional")
+                placeholderText:  qsTr("Email") + " (" + qsTr("Optional") + ")"
                 visible: engine.jsonRpcClient.ensureServerVersion("6.0") && engine.jsonRpcClient.initialSetupRequired
             }
         }

nymea-app/ui/system/UsersSettingsPage.qml

@@ -141,27 +141,27 @@ SettingsPageBase {
         SettingsPageBase {
             id: editUserInfoPage
             title: qsTr("Edit user information")
-            GridLayout {
+
+            ColumnLayout {
+                Layout.fillWidth: true
                 Layout.margins: Style.margins
-                columnSpacing: Style.margins
+                spacing: Style.margins
-                columns: 2
+
-                Label {
+                TextField {
-                    text: qsTr("Your name")
-                }
-                NymeaTextField {
                     id: displayNameTextField
                     Layout.fillWidth: true
+                    placeholderText: qsTr("Your name")
                     text: userManager.userInfo.displayName
                 }
-                Label {
+
-                    text: qsTr("Email")
+                TextField {
-                }
-                NymeaTextField {
                     id: emailTextField
                     Layout.fillWidth: true
+                    placeholderText: qsTr("Email")
                     text: userManager.userInfo.email
                 }
             }
+
             Button {
                 Layout.fillWidth: true
                 Layout.margins: Style.margins
@@ -171,6 +171,7 @@ SettingsPageBase {
                     userManager.setUserInfo(userManager.userInfo.username, displayNameTextField.text, emailTextField.text)
                 }
             }
+
             Connections {
                 target: userManager
                 onSetUserInfoReply: (id, error) => {
@@ -262,6 +263,7 @@ SettingsPageBase {
                 Layout.fillWidth: true
                 Layout.leftMargin: app.margins
                 Layout.rightMargin: app.margins
+                bottomPadding: Style.margins
                 text: qsTr("Please enter the new password for %1").arg(userManager.userInfo.username)
                 wrapMode: Text.WordWrap
             }
@@ -400,25 +402,22 @@ SettingsPageBase {
                 text: qsTr("User information for %1").arg(userDetailsPage.userInfo.username)
             }
 
-            GridLayout {
+            ColumnLayout {
                 Layout.leftMargin: Style.margins
                 Layout.rightMargin: Style.margins
-                columnSpacing: Style.margins
+                spacing: Style.margins
-                columns: 2
+
-                Label {
-                    text: qsTr("Name")
-                }
                 NymeaTextField {
                     id: displayNameTextField
                     Layout.fillWidth: true
+                    placeholderText: qsTr("Name")
                     text: userDetailsPage.userInfo.displayName
                 }
-                Label {
+
-                    text: qsTr("Email")
-                }
                 NymeaTextField {
                     id: emailTextField
                     Layout.fillWidth: true
+                    placeholderText: qsTr("Email")
                     text: userDetailsPage.userInfo.email
                 }
             }
@@ -548,43 +547,31 @@ SettingsPageBase {
                 text: qsTr("User information")
             }
 
-            GridLayout {
+            ColumnLayout {
                 Layout.fillWidth: true
                 Layout.leftMargin: Style.margins
                 Layout.rightMargin: Style.margins
-                columns: 2
+                spacing: Style.margins
-                Label {
+
-                    text: qsTr("Username:") + "*"
+                UsernameTextField {
-                }
-                TextField {
                     id: usernameTextField
                     Layout.fillWidth: true
-                    inputMethodHints: Qt.ImhNoAutoUppercase
                 }
 
-                Label {
-                    text: qsTr("Password:") + "*"
-                    Layout.alignment: Qt.AlignTop
-                    Layout.topMargin: Style.smallMargins
-                }
                 PasswordTextField {
                     id: passwordTextField
                     Layout.fillWidth: true
                 }
 
-                Label {
-                    text: qsTr("Full name:")
-                }
                 TextField {
                     id: displayNameTextField
+                    placeholderText: qsTr("Full name:")  + " (" + qsTr("Optional") + ")"
                     Layout.fillWidth: true
                 }
 
-                Label {
-                    text: qsTr("e-mail:")
-                }
                 TextField {
                     id: emailTextField
+                    placeholderText: qsTr("Email") + " (" + qsTr("Optional") + ")"
                     Layout.fillWidth: true
                 }
             }