Merge remote-tracking branch 'origin/fix-usersq' into calamares

Repair the colors, since the basic Kirigami theme does not
look nice at all. While at it, refactor to put the colors
of the usersq module all in one place, so easy to changes
consistently (e.g. to Kirigami colors if you know your theme
is a good one).

src/modules/usersq/usersq.qml

@@ -19,6 +19,16 @@ import QtGraphicalEffects 1.0
 import QtQuick.Window 2.3
 
 Kirigami.ScrollablePage {
+    // You can hard-code a color here, or bind to a Kirigami theme color,
+    // or use a color from Calamares branding, or ..
+    readonly property color unfilledFieldColor: "#FBFBFB" //Kirigami.Theme.backgroundColor
+    readonly property color positiveFieldColor: "#F0FFF0" //Kirigami.Theme.positiveBackgroundColor
+    readonly property color negativeFieldColor: "#EBCED1" //Kirigami.Theme.negativeBackgroundColor
+    readonly property color unfilledFieldOutlineColor: "#F1F1F1"
+    readonly property color positiveFieldOutlineColor: "#DCFFDC"
+    readonly property color negativeFieldOutlineColor: "#BE5F68"
+    readonly property color headerTextColor: "#1F1F1F"
+    readonly property color commentsColor: "#6D6D6D"
 
     width: parent.width
     height: parent.height
@@ -27,7 +37,7 @@ Kirigami.ScrollablePage {
         Layout.fillWidth: true
         height: 50
         horizontalAlignment: Qt.AlignHCenter
-        color: Kirigami.Theme.textColor
+        color: headerTextColor
         font.weight: Font.Medium
         font.pointSize: 12
         text: qsTr("Pick your user name and credentials to login and perform admin tasks")
@@ -54,8 +64,10 @@ Kirigami.ScrollablePage {
                 text: config.fullName
                 onTextChanged: config.setFullName(text)
 
-                palette.base: _userNameField.text.length ? Kirigami.Theme.backgroundColor : Kirigami.Theme.backgroundColor
-                palette.highlight : _userNameField.text.length ? Kirigami.Theme.positiveBackgroundColor : Kirigami.Theme.backgroundColor
+                palette.base: _userNameField.text.length
+                    ? positiveFieldColor : unfilledFieldColor
+                palette.highlight : _userNameField.text.length
+                    ? positiveFieldOutlineColor : unfilledFieldOutlineColor
             }
         }
 
@@ -86,8 +98,17 @@ Kirigami.ScrollablePage {
                 palette.base: _userLoginField.text.length
                     ? ( acceptableInput
                     ? ( _userLoginField.text === "root"
-                    ? Kirigami.Theme.negativeBackgroundColor : Kirigami.Theme.backgroundColor ) : Kirigami.Theme.negativeBackgroundColor ) : Kirigami.Theme.backgroundColor
-                palette.highlight : _userLoginField.text.length ? Kirigami.Theme.positiveBackgroundColor : Kirigami.Theme.backgroundColor
+                    ? negativeFieldColor
+                    : positiveFieldColor )
+                    : negativeFieldColor )
+                    : unfilledFieldColor
+                palette.highlight : _userLoginField.text.length
+                    ? ( acceptableInput
+                    ? ( _userLoginField.text === "root"
+                    ? negativeFieldOutlineColor
+                    : positiveFieldOutlineColor )
+                    : negativeFieldOutlineColor )
+                    : unfilledFieldOutlineColor
             }
 
             Label {
@@ -95,6 +116,7 @@ Kirigami.ScrollablePage {
                 text: qsTr("If more than one person will use this computer, you can create multiple accounts after installation.")
                 font.weight: Font.Thin
                 font.pointSize: 8
+                color: commentsColor
             }
         }
 
@@ -129,7 +151,7 @@ Kirigami.ScrollablePage {
                 placeholderText: qsTr("Computer Name")
                 text: config.hostName
                 validator: RegularExpressionValidator { regularExpression: /[a-zA-Z0-9][-a-zA-Z0-9_]+/ }
-                color: Kirigami.Theme.textColor
+
                 onTextChanged: acceptableInput
                     ? ( _hostName.text === "localhost"
                     ? forbiddenHost.visible=true
@@ -139,10 +161,16 @@ Kirigami.ScrollablePage {
 
                 palette.base: _hostName.text.length
                     ? ( acceptableInput
-                    ? ( _hostName.text === "localhost" ? Kirigami.Theme.negativeBackgroundColor : Kirigami.Theme.backgroundColor )
-                    : Kirigami.Theme.negativeBackgroundColor)
-                    : Kirigami.Theme.backgroundColor
-                palette.highlight : _hostName.text.length ? Kirigami.Theme.positiveBackgroundColor : Kirigami.Theme.backgroundColor
+                    ? ( _hostName.text === "localhost"
+                    ? negativeFieldColor : positiveFieldColor )
+                    : negativeFieldColor)
+                    : unfilledFieldColor
+                palette.highlight : _hostName.text.length
+                    ? ( acceptableInput
+                    ? ( _hostName.text === "localhost"
+                    ? negativeFieldOutlineColor : positiveFieldOutlineColor )
+                    : negativeFieldOutlineColor)
+                    : unfilledFieldOutlineColor
             }
 
             Label {
@@ -150,6 +178,7 @@ Kirigami.ScrollablePage {
                 text: qsTr("This name will be used if you make the computer visible to others on a network.")
                 font.weight: Font.Thin
                 font.pointSize: 8
+                color: commentsColor
             }
         }
 
@@ -189,8 +218,10 @@ Kirigami.ScrollablePage {
                     text: config.userPassword
                     onTextChanged: config.setUserPassword(text)
 
-                    palette.base: _passwordField.text.length ? Kirigami.Theme.backgroundColor : Kirigami.Theme.neutralBackgroundColor
-                    palette.highlight : _passwordField.text.length ? Kirigami.Theme.positiveBackgroundColor : Kirigami.Theme.backgroundColor
+                    palette.base: _passwordField.text.length
+                        ? positiveFieldColor : unfilledFieldColor
+                    palette.highlight : _passwordField.text.length
+                        ? positiveFieldOutlineColor : unfilledFieldOutlineColor
 
                     echoMode: TextInput.Password
                     passwordMaskDelay: 300
@@ -212,9 +243,12 @@ Kirigami.ScrollablePage {
 
                     palette.base: _verificationPasswordField.text.length
                         ? ( _passwordField.text === _verificationPasswordField.text
-                        ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeBackgroundColor )
-                        : Kirigami.Theme.backgroundColor
-                    palette.highlight : _verificationPasswordField.text.length ? Kirigami.Theme.positiveBackgroundColor : Kirigami.Theme.backgroundColor
+                        ? positiveFieldColor : negativeFieldColor )
+                        : unfilledFieldColor
+                    palette.highlight : _verificationPasswordField.text.length
+                        ? ( _passwordField.text === _verificationPasswordField.text
+                        ? positiveFieldOutlineColor : negativeFieldOutlineColor )
+                        : unfilledFieldOutlineColor
 
                     echoMode: TextInput.Password
                     passwordMaskDelay: 300
@@ -228,6 +262,7 @@ Kirigami.ScrollablePage {
                 font.weight: Font.Thin
                 font.pointSize: 8
                 wrapMode: Text.WordWrap
+                color: commentsColor
             }
         }
 
@@ -266,6 +301,7 @@ Kirigami.ScrollablePage {
             text: qsTr("Use the same password for the administrator account.")
             font.weight: Font.Thin
             font.pointSize: 8
+            color: commentsColor
         }
 
         Column {
@@ -290,8 +326,10 @@ Kirigami.ScrollablePage {
 
                     onTextChanged: config.setRootPassword(text)
 
-                    palette.base: _rootPasswordField.text.length ? Kirigami.Theme.backgroundColor : Kirigami.Theme.neutralBackgroundColor
-                    palette.highlight : _rootPasswordField.text.length ? Kirigami.Theme.positiveBackgroundColor : Kirigami.Theme.backgroundColor
+                    palette.base: _rootPasswordField.text.length
+                        ? positiveFieldColor : unfilledFieldColor
+                    palette.highlight : _rootPasswordField.text.length
+                        ? positiveFieldOutlineColor : unfilledFieldOutlineColor
 
                     echoMode: TextInput.Password
                     passwordMaskDelay: 300
@@ -306,15 +344,17 @@ Kirigami.ScrollablePage {
 
                     onTextChanged: _rootPasswordField.text === _verificationRootPasswordField.text
                         ? ( config.setRootPasswordSecondary(text),
-                        rootPassMessage.visible = false,
-                        rootValidityMessage.visible = true )
-                        : ( rootPassMessage.visible = true,
-                        rootValidityMessage.visible = false )
+                        rootPassMessage.visible = false,rootValidityMessage.visible = true )
+                        : ( rootPassMessage.visible = true,rootValidityMessage.visible = false )
 
                     palette.base: _verificationRootPasswordField.text.length
                         ? ( _rootPasswordField.text === _verificationRootPasswordField.text
-                        ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeBackgroundColor) : Kirigami.Theme.backgroundColor
-                    palette.highlight : _verificationRootPasswordField.text.length ? Kirigami.Theme.positiveBackgroundColor : Kirigami.Theme.backgroundColor
+                        ? positiveFieldColor : negativeFieldColor)
+                        : unfilledFieldColor
+                    palette.highlight : _verificationRootPasswordField.text.length
+                        ? ( _rootPasswordField.text === _verificationRootPasswordField.text
+                        ? positiveFieldOutlineColor : negativeFieldOutlineColor)
+                        : unfilledFieldOutlineColor
 
                     echoMode: TextInput.Password
                     passwordMaskDelay: 300
@@ -328,7 +368,7 @@ Kirigami.ScrollablePage {
                 text: qsTr("Enter the same password twice, so that it can be checked for typing errors.")
                 font.weight: Font.Thin
                 font.pointSize: 8
-                color: "#6D6D6D"
+                color: commentsColor
             }
         }
 
@@ -376,6 +416,7 @@ Kirigami.ScrollablePage {
             text: qsTr("When this box is checked, password-strength checking is done and you will not be able to use a weak password.")
             font.weight: Font.Thin
             font.pointSize: 8
+            color: commentsColor
         }
     }
 }