napcok/calamares
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[usersq] add inline messages, adjust layout

Browse Source 
warning messages implemented for user & host names
move root password option box inline with password section
adjust background color according to text.length
hardcode color instead of kirigami colors
usersq is now usable, sets user, hostname & password correctly on install
warning messages & color changes not fully done yet
This commit is contained in:
demmm 2021-06-26 18:14:19 +02:00
parent e5aa90d3a8
commit 989d08c70a
1 changed files with 53 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/modules/usersq/usersq.qml
View File

@ -1,6 +1,7 @@
/* === This file is part of Calamares - <https://calamares.io> === /* === This file is part of Calamares - <https://calamares.io> ===
* *
* SPDX-FileCopyrightText: 2020 Anke Boersma <demm@kaosx.us> * SPDX-FileCopyrightText: 2020 - 2021 Anke Boersma <demm@kaosx.us>
* SPDX-FileCopyrightText: 2021 Adriaan de Groot <groot@kde.org>
* SPDX-License-Identifier: GPL-3.0-or-later * SPDX-License-Identifier: GPL-3.0-or-later
* *
* Calamares is Free Software: see the License-Identifier above. * Calamares is Free Software: see the License-Identifier above.
@ -25,8 +26,7 @@ Kirigami.ScrollablePage {
Kirigami.Theme.backgroundColor: "#EFF0F1" Kirigami.Theme.backgroundColor: "#EFF0F1"
Kirigami.Theme.textColor: "#1F1F1F" Kirigami.Theme.textColor: "#1F1F1F"
header: Kirigami.Heading { header: Kirigami.Heading {
Layout.fillWidth: true Layout.fillWidth: true
height: 50 height: 50
horizontalAlignment: Qt.AlignHCenter horizontalAlignment: Qt.AlignHCenter
@ -37,23 +37,19 @@ Kirigami.ScrollablePage {
} }
ColumnLayout { ColumnLayout {
id: _formLayout id: _formLayout
spacing: Kirigami.Units.smallSpacing spacing: Kirigami.Units.smallSpacing
Column { Column {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing spacing: Kirigami.Units.smallSpacing
Label { Label {
width: parent.width width: parent.width
text: qsTr("What is your name?") text: qsTr("What is your name?")
} }
TextField { TextField {
id: _userNameField id: _userNameField
width: parent.width width: parent.width
enabled: config.isEditable("fullName") enabled: config.isEditable("fullName")
@ -62,46 +58,39 @@ Kirigami.ScrollablePage {
onTextChanged: config.setFullName(text); onTextChanged: config.setFullName(text);
background: Rectangle { background: Rectangle {
color: "#FBFBFB" // Kirigami.Theme.backgroundColor
radius: 2 radius: 2
opacity: 0.9 opacity: 0.9
//border.color: _userNameField.text === "" ? Kirigami.Theme.backgroundColor : ( config.fullNameReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor) //border.color: _userNameField.text === "" ? Kirigami.Theme.backgroundColor : ( config.fullNameReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
border.color: _userNameField.text === "" ? "#FBFBFB" : ( config.fullNameChanged ? "#FBFBFB" : Kirigami.Theme.negativeTextColor) color: _userNameField.text.length ? "#FBFBFB" : ( config.fullNameChanged ? "#f0fff0" : "#ffdae0")
} }
} }
} }
Column { Column {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing spacing: Kirigami.Units.smallSpacing
Label { Label {
width: parent.width width: parent.width
text: qsTr("What name do you want to use to log in?") text: qsTr("What name do you want to use to log in?")
} }
TextField { TextField {
id: _userLoginField id: _userLoginField
width: parent.width width: parent.width
enabled: config.isEditable("loginName") enabled: config.isEditable("loginName")
placeholderText: qsTr("Login Name") placeholderText: qsTr("Login Name")
text: config.loginName text: config.loginName
onTextChanged: config.setLoginName(text) onTextChanged: config.loginNameStatusChanged ? ( config.setLoginName(text),userMessage.visible = false ) : ( userMessage.visible = true,console.log("Invalid") )
background: Rectangle { background: Rectangle {
color: "#FBFBFB" // Kirigami.Theme.backgroundColor
opacity: 0.9 opacity: 0.9
//border.color: _userLoginField.text === "" ? Kirigami.Theme.backgroundColor : ( config.userNameReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor) //border.color: _userLoginField.text === "" ? Kirigami.Theme.backgroundColor : ( config.userNameReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
border.color: _userLoginField.text === "" ? "#FBFBFB" : ( config.loginNameStatusChanged ? "#FBFBFB" : Kirigami.Theme.negativeTextColor) color: _userLoginField.text.length ? "#FBFBFB" : ( config.loginNameStatusChanged ? "#f0fff0" : "#ffdae0")
} }
} }
Label { Label {
width: parent.width width: parent.width
text: qsTr("If more than one person will use this computer, you can create multiple accounts after installation.") text: qsTr("If more than one person will use this computer, you can create multiple accounts after installation.")
font.weight: Font.Thin font.weight: Font.Thin
@ -110,36 +99,38 @@ Kirigami.ScrollablePage {
} }
} }
Column { Kirigami.InlineMessage {
id: userMessage
Layout.fillWidth: true
visible: false
type: Kirigami.MessageType.Error
text: qsTr("Your username must start with a lowercase letter or underscore.")
}
Column {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing spacing: Kirigami.Units.smallSpacing
Label { Label {
width: parent.width width: parent.width
text: qsTr("What is the name of this computer?") text: qsTr("What is the name of this computer?")
} }
TextField { TextField {
id: _hostName id: _hostName
width: parent.width width: parent.width
placeholderText: qsTr("Computer Name") placeholderText: qsTr("Computer Name")
text: config.hostName text: config.hostName
onTextChanged: config.setHostName(text) onTextChanged: config.hostNameStatusChanged ? ( config.setHostName(text),hostMessage.visible = false ) : hostMessage.visible = true
background: Rectangle { background: Rectangle {
color: "#FBFBFB" // Kirigami.Theme.backgroundColor
opacity: 0.9 opacity: 0.9
//border.color: _hostName.text === "" ? Kirigami.Theme.backgroundColor : ( config.hostNameStatusChanged ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor) //border.color: _hostName.text === "" ? Kirigami.Theme.backgroundColor : ( config.hostNameStatusChanged ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
border.color: _hostName.text === "" ? "#FBFBFB" : ( config.hostNameStatusChanged ? "#FBFBFB" : Kirigami.Theme.negativeTextColor) color: _hostName.text.length ? "#FBFBFB" : ( config.hostNameStatusChanged ? "#f0fff0" : "#ffdae0")
} }
} }
Label { Label {
width: parent.width width: parent.width
text: qsTr("This name will be used if you make the computer visible to others on a network.") text: qsTr("This name will be used if you make the computer visible to others on a network.")
font.weight: Font.Thin font.weight: Font.Thin
@ -148,13 +139,19 @@ Kirigami.ScrollablePage {
} }
} }
Column { Kirigami.InlineMessage {
id: hostMessage
Layout.fillWidth: true
visible: false
type: Kirigami.MessageType.Error
text: qsTr("Only letter, numbers, underscore and hyphen are allowed.")
}
Column {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing spacing: Kirigami.Units.smallSpacing
Label { Label {
width: parent.width width: parent.width
text: qsTr("Choose a password to keep your account safe.") text: qsTr("Choose a password to keep your account safe.")
} }
@ -164,7 +161,6 @@ Kirigami.ScrollablePage {
spacing: 20 spacing: 20
TextField { TextField {
id: _passwordField id: _passwordField
width: parent.width / 2 - 10 width: parent.width / 2 - 10
placeholderText: qsTr("Password") placeholderText: qsTr("Password")
@ -176,16 +172,13 @@ Kirigami.ScrollablePage {
inputMethodHints: Qt.ImhNoAutoUppercase inputMethodHints: Qt.ImhNoAutoUppercase
background: Rectangle { background: Rectangle {
color: "#FBFBFB" // Kirigami.Theme.backgroundColor
opacity: 0.9 opacity: 0.9
//border.color: _passwordField.text === "" ? Kirigami.Theme.backgroundColor : ( config.passwordReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor) //border.color: _passwordField.text === "" ? Kirigami.Theme.backgroundColor : ( config.passwordReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
border.color: _passwordField.text === "" ? "#FBFBFB" : ( config.userPasswordStatusChanged ? "#FBFBFB" : Kirigami.Theme.negativeTextColor) color: _passwordField.text.length ? "#FBFBFB" : ( config.userPasswordStatusChanged ? "#f0fff0" : "#ffdae0")
} }
} }
TextField { TextField {
id: _verificationPasswordField id: _verificationPasswordField
width: parent.width / 2 - 10 width: parent.width / 2 - 10
placeholderText: qsTr("Repeat Password") placeholderText: qsTr("Repeat Password")
@ -197,17 +190,14 @@ Kirigami.ScrollablePage {
inputMethodHints: Qt.ImhNoAutoUppercase inputMethodHints: Qt.ImhNoAutoUppercase
background: Rectangle { background: Rectangle {
color: "#FBFBFB" //Kirigami.Theme.backgroundColor
opacity: 0.9 opacity: 0.9
//border.color: _verificationpasswordField.text === "" ? Kirigami.Theme.backgroundColor : ( config.passwordReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor) //border.color: _verificationpasswordField.text === "" ? Kirigami.Theme.backgroundColor : ( config.passwordReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
border.color: _verificationPasswordField.text === "" ? "#FBFBFB" : ( config.userPasswordSecondaryChanged ? "#FBFBFB" : Kirigami.Theme.negativeTextColor) color: _verificationPasswordField.text.length ? "#FBFBFB" : ( config.userPasswordSecondaryChanged ? "#f0fff0" : "#ffdae0")
} }
} }
} }
Label { Label {
width: parent.width width: parent.width
text: qsTr("Enter the same password twice, so that it can be checked for typing errors. A good password will contain a mixture of letters, numbers and punctuation, should be at least eight characters long, and should be changed at regular intervals.") text: qsTr("Enter the same password twice, so that it can be checked for typing errors. A good password will contain a mixture of letters, numbers and punctuation, should be at least eight characters long, and should be changed at regular intervals.")
font.weight: Font.Thin font.weight: Font.Thin
@ -217,29 +207,6 @@ Kirigami.ScrollablePage {
} }
} }
CheckBox {
visible: config.permitWeakPasswords
text: qsTr("Validate passwords quality")
checked: config.requireStrongPasswords
onCheckedChanged: config.setRequireStrongPasswords(checked)
}
Label {
visible: config.permitWeakPasswords
width: parent.width
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: "#6D6D6D"
}
CheckBox {
text: qsTr("Log in automatically without asking for the password")
checked: config.doAutoLogin
onCheckedChanged: config.setAutoLogin(checked)
}
CheckBox { CheckBox {
id: root id: root
visible: config.writeRootPassword visible: config.writeRootPassword
@ -258,13 +225,11 @@ Kirigami.ScrollablePage {
} }
Column { Column {
visible: ! root.checked visible: ! root.checked
Layout.fillWidth: true Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing spacing: Kirigami.Units.smallSpacing
Label { Label {
width: parent.width width: parent.width
text: qsTr("Choose a root password to keep your account safe.") text: qsTr("Choose a root password to keep your account safe.")
} }
@ -274,7 +239,6 @@ Kirigami.ScrollablePage {
spacing: 20 spacing: 20
TextField { TextField {
id: _rootPasswordField id: _rootPasswordField
width: parent.width / 2 -10 width: parent.width / 2 -10
placeholderText: qsTr("Root Password") placeholderText: qsTr("Root Password")
@ -286,16 +250,13 @@ Kirigami.ScrollablePage {
inputMethodHints: Qt.ImhNoAutoUppercase inputMethodHints: Qt.ImhNoAutoUppercase
background: Rectangle { background: Rectangle {
color: "#FBFBFB" // Kirigami.Theme.backgroundColor
opacity: 0.9 opacity: 0.9
//border.color: _rootPasswordField.text === "" ? Kirigami.Theme.backgroundColor : ( config.rootPasswordReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor) //border.color: _rootPasswordField.text === "" ? Kirigami.Theme.backgroundColor : ( config.rootPasswordReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
border.color: _rootPasswordField.text === "" ? "#FBFBFB" : ( config.rootPasswordReady ? "#FBFBFB" : Kirigami.Theme.negativeTextColor) color: _rootPasswordField.text.length ? "#FBFBFB" : ( config.rootPasswordReady ? "#f0fff0" : "#ffdae0")
} }
} }
TextField { TextField {
id: _verificationRootPasswordField id: _verificationRootPasswordField
width: parent.width / 2 -10 width: parent.width / 2 -10
placeholderText: qsTr("Repeat Root Password") placeholderText: qsTr("Repeat Root Password")
@ -307,17 +268,14 @@ Kirigami.ScrollablePage {
inputMethodHints: Qt.ImhNoAutoUppercase inputMethodHints: Qt.ImhNoAutoUppercase
background: Rectangle { background: Rectangle {
color: "#FBFBFB" // Kirigami.Theme.backgroundColor
opacity: 0.9 opacity: 0.9
//border.color: _verificationRootPasswordField.text === "" ? Kirigami.Theme.backgroundColor : ( config.rootPasswordReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor) //border.color: _verificationRootPasswordField.text === "" ? Kirigami.Theme.backgroundColor : ( config.rootPasswordReady ? Kirigami.Theme.backgroundColor : Kirigami.Theme.negativeTextColor)
border.color: _verificationRootPasswordField.text === "" ? "#FBFBFB" : ( config.rootPasswordReady ? "#FBFBFB" : Kirigami.Theme.negativeTextColor) color: _verificationRootPasswordField.text.length ? "#FBFBFB" : ( config.rootPasswordReady ? "#f0fff0" : "#ffdae0")
} }
} }
} }
Label { Label {
visible: ! root.checked visible: ! root.checked
width: parent.width width: parent.width
text: qsTr("Enter the same password twice, so that it can be checked for typing errors.") text: qsTr("Enter the same password twice, so that it can be checked for typing errors.")
@ -326,5 +284,30 @@ Kirigami.ScrollablePage {
color: "#6D6D6D" color: "#6D6D6D"
} }
} }
CheckBox {
Layout.alignment: Qt.AlignCenter
text: qsTr("Log in automatically without asking for the password")
checked: config.doAutoLogin
onCheckedChanged: config.setAutoLogin(checked)
}
CheckBox {
visible: config.permitWeakPasswords
Layout.alignment: Qt.AlignCenter
text: qsTr("Validate passwords quality")
checked: config.requireStrongPasswords
onCheckedChanged: config.setRequireStrongPasswords(checked)
}
Label {
visible: config.permitWeakPasswords
width: parent.width
Layout.alignment: Qt.AlignCenter
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: "#6D6D6D"
}
} }
} }