[usersq] use validator for login & hostname

pallette for colors
inline warning messages now work, password fields checks included
left to implement are password validation inline messages

src/modules/usersq/usersq.qml

@@ -11,7 +11,7 @@
 import io.calamares.core 1.0
 import io.calamares.ui 1.0
 
-import QtQuick 2.10
+import QtQuick 2.15
 import QtQuick.Controls 2.10
 import QtQuick.Layouts 1.3
 import org.kde.kirigami 2.7 as Kirigami
@@ -56,13 +56,8 @@ Kirigami.ScrollablePage {
                 placeholderText: qsTr("Your Full Name")
                 text: config.fullName
                 onTextChanged: config.setFullName(text);
-
+                palette.base: _userNameField.text.length ? "#f0fff0" : "#FBFBFB"
-                background: Rectangle {
+                palette.highlight : _userNameField.text.length ? "#dcffdc" : "#FBFBFB"
-                    radius: 2
-                    opacity: 0.9
-                    //border.color: _userNameField.text === "" ? Kirigami.Theme.backgroundColor : ( config.fullNameReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
-                    color: _userNameField.text.length ? ( config.fullNameChanged ? "#f0fff0" : "#ffdae0") : "#FBFBFB"
-                }
             }
         }
 
@@ -81,14 +76,11 @@ Kirigami.ScrollablePage {
                 enabled: config.isEditable("loginName")
                 placeholderText: qsTr("Login Name")
                 text: config.loginName
-                //onTextChanged: config.setLoginName(text)
+                validator: RegularExpressionValidator { regularExpression: /[a-z_][a-z0-9_-]*[$]?$/ }
-                onTextChanged: config.loginNameStatusChanged ? ( config.setLoginName(text),userMessage.visible = false ) : ( userMessage.visible = true )
+                onTextChanged: acceptableInput ? ( config.setLoginName(text),userMessage.visible = false ) : ( userMessage.visible = true,console.log("Invalid") )
 
-                background: Rectangle {
+                palette.base: _userLoginField.text.length ? "#f0fff0" : "#FBFBFB"
-                    opacity: 0.9
+                palette.highlight : _userLoginField.text.length ? "#dcffdc" : "#FBFBFB"
-                    //border.color: _userLoginField.text === "" ? Kirigami.Theme.backgroundColor : ( config.userNameReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
-                    color: _userLoginField.text.length ? ( config.loginNameStatusChanged ? "#f0fff0" : "#ffdae0") : "#FBFBFB"
-                }
             }
 
             Label {
@@ -105,7 +97,7 @@ Kirigami.ScrollablePage {
             Layout.fillWidth: true
             visible: false
             type: Kirigami.MessageType.Error
-            text: qsTr("Your username must start with a lowercase letter or underscore.")
+            text: qsTr("Your username must start with a lowercase letter or underscore, minimal of two characters.")
         }
 
         Column {
@@ -122,13 +114,11 @@ Kirigami.ScrollablePage {
                 width: parent.width
                 placeholderText: qsTr("Computer Name")
                 text: config.hostName
-                onTextChanged: config.hostNameStatusChanged ? (config.setHostName(text),hostMessage.visible = false) : hostMessage.visible = true
+                validator: RegularExpressionValidator { regularExpression: /[a-zA-Z0-9][-a-zA-Z0-9_]+/ }
+                onTextChanged: acceptableInput ? (config.setHostName(text),hostMessage.visible = false) : hostMessage.visible = true
 
-                background: Rectangle {
+                palette.base: _hostName.text.length ? ( acceptableInput ? "#f0fff0" : "#ffdae0") : "#FBFBFB"
-                    opacity: 0.9
+                palette.highlight : _hostName.text.length ? "#dcffdc" : "#FBFBFB"
-                    //border.color: _hostName.text === "" ? Kirigami.Theme.backgroundColor : ( config.hostNameStatusChanged ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
-                    color: _hostName.text.length ? ( config.hostNameStatusChanged ? "#f0fff0" : "#ffdae0") : "#FBFBFB"
-                }
             }
 
             Label {
@@ -145,7 +135,7 @@ Kirigami.ScrollablePage {
             Layout.fillWidth: true
             visible: false
             type: Kirigami.MessageType.Error
-            text: qsTr("Only letter, numbers, underscore and hyphen are allowed.")
+            text: qsTr("Only letter, numbers, underscore and hyphen are allowed, minimal of two characters.")
         }
 
         Column {
@@ -167,16 +157,12 @@ Kirigami.ScrollablePage {
                     placeholderText: qsTr("Password")
                     text: config.userPassword
                     onTextChanged: config.setUserPassword(text)
+                    palette.base: _passwordField.text.length ? "#f0fff0" : "#FBFBFB"
+                    palette.highlight : _passwordField.text.length ? "#dcffdc" : "#FBFBFB"
 
                     echoMode: TextInput.Password
                     passwordMaskDelay: 300
                     inputMethodHints: Qt.ImhNoAutoUppercase
-
-                    background: Rectangle {
-                        opacity: 0.9
-                        //border.color: _passwordField.text === "" ? Kirigami.Theme.backgroundColor : ( config.passwordReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
-                        color: _passwordField.text.length ? ( config.userPasswordStatusChanged ? "#f0fff0" : "#ffdae0") : "#FBFBFB"
-                    }
                 }
 
                 TextField {
@@ -184,17 +170,14 @@ Kirigami.ScrollablePage {
                     width: parent.width / 2 - 10
                     placeholderText: qsTr("Repeat Password")
                     text: config.userPasswordSecondary
-                    onTextChanged: config.setUserPasswordSecondary(text)
+                    onTextChanged: _passwordField.text === _verificationPasswordField.text ? (config.setUserPasswordSecondary(text),passMessage.visible = false) : passMessage.visible = true
+
+                    palette.base: _verificationPasswordField.text.length ? ( _passwordField.text === _verificationPasswordField.text ? "#f0fff0" : "#ffdae0") : "#FBFBFB"
+                    palette.highlight : _verificationPasswordField.text.length ? "#dcffdc" : "#FBFBFB"
 
                     echoMode: TextInput.Password
                     passwordMaskDelay: 300
                     inputMethodHints: Qt.ImhNoAutoUppercase
-
-                    background: Rectangle {
-                        opacity: 0.9
-                        //border.color: _verificationpasswordField.text === "" ? Kirigami.Theme.backgroundColor : ( config.passwordReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
-                        color: _verificationPasswordField.text.length ? ( config.userPasswordSecondaryChanged ? "#f0fff0" : "#ffdae0") : "#FBFBFB"
-                    }
                 }
             }
 
@@ -208,6 +191,14 @@ Kirigami.ScrollablePage {
             }
         }
 
+        Kirigami.InlineMessage {
+            id: passMessage
+            Layout.fillWidth: true
+            visible: false
+            type: Kirigami.MessageType.Error
+            text: qsTr("Your passwords do not match!")
+        }
+
         CheckBox {
             id: root
             visible: config.writeRootPassword
@@ -245,16 +236,12 @@ Kirigami.ScrollablePage {
                     placeholderText: qsTr("Root Password")
                     text: config.rootPassword
                     onTextChanged: config.setRootPassword(text)
+                    palette.base: _rootPasswordField.text.length ? "#f0fff0" : "#FBFBFB"
+                    palette.highlight : _rootPasswordField.text.length ? "#dcffdc" : "#FBFBFB"
 
                     echoMode: TextInput.Password
                     passwordMaskDelay: 300
                     inputMethodHints: Qt.ImhNoAutoUppercase
-
-                    background: Rectangle {
-                        opacity: 0.9
-                        //border.color: _rootPasswordField.text === "" ? Kirigami.Theme.backgroundColor : ( config.rootPasswordReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
-                        color: _rootPasswordField.text.length ? ( config.rootPasswordReady ? "#f0fff0" : "#ffdae0") : "#FBFBFB"
-                    }
                 }
 
                 TextField {
@@ -262,17 +249,14 @@ Kirigami.ScrollablePage {
                     width: parent.width / 2 -10
                     placeholderText: qsTr("Repeat Root Password")
                     text: config.rootPasswordSecondary
-                    onTextChanged: config.setRootPasswordSecondary(text)
+                    //onTextChanged: config.setRootPasswordSecondary(text)
+                    onTextChanged: _rootPasswordField.text === _verificationRootPasswordField.text ? (config.setRootPasswordSecondary(text),rootPassMessage.visible = false) : rootPassMessage.visible = true
+                    palette.base: _verificationRootPasswordField.text.length ? ( _rootPasswordField.text === _verificationRootPasswordField.text ? "#f0fff0" : "#ffdae0") : "#FBFBFB"
+                    palette.highlight : _verificationRootPasswordField.text.length ? "#dcffdc" : "#FBFBFB"
 
                     echoMode: TextInput.Password
                     passwordMaskDelay: 300
                     inputMethodHints: Qt.ImhNoAutoUppercase
-
-                    background: Rectangle {
-                        opacity: 0.9
-                        //border.color: _verificationRootPasswordField.text === "" ? Kirigami.Theme.backgroundColor : ( config.rootPasswordReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
-                        color: _verificationRootPasswordField.text.length ? ( config.rootPasswordReady ? "#f0fff0" : "#ffdae0") : "#FBFBFB"
-                    }
                 }
             }
 
@@ -286,6 +270,14 @@ Kirigami.ScrollablePage {
             }
         }
 
+        Kirigami.InlineMessage {
+            id: rootPassMessage
+            Layout.fillWidth: true
+            visible: false
+            type: Kirigami.MessageType.Error
+            text: qsTr("Your passwords do not match!")
+        }
+
         CheckBox {
             Layout.alignment: Qt.AlignCenter
             text: qsTr("Log in automatically without asking for the password")