WizardAskPassword: add colors to password strength meter; add "Passwords match/do not match" message

This commit is contained in:
rating89us 2021-09-02 18:16:27 +02:00
parent 113efbfdf0
commit b99b333b71
2 changed files with 99 additions and 52 deletions

View file

@ -35,6 +35,7 @@ Object {
property string arrowLeft : "\uf060"
property string arrowRight : "\uf061"
property string cashRegister: "\uf788"
property string checkCircle: "\uf058"
property string clipboard : "\uf0ea"
property string clockO : "\uf017"
property string cloud : "\uf0c2"

View file

@ -70,10 +70,13 @@ ColumnLayout {
var strengthString;
if(strength <= 33){
strengthString = qsTr("Low");
fillRect.color = "#FF0000";
} else if(strength <= 66){
strengthString = qsTr("Medium");
fillRect.color = (MoneroComponents.Style.blackTheme ? "#FFFF00" : "#FFCC00");
} else {
strengthString = qsTr("High");
fillRect.color = (MoneroComponents.Style.blackTheme ? "#00FF00" : "#008000");
}
progressText.text = passwordStrengthText + strengthString + translationManager.emptyString;
@ -90,11 +93,25 @@ ColumnLayout {
text: "<b>%1</b> (%2).".arg(qsTr("Enter a strong password")).arg(qsTr("Using letters, numbers, and/or symbols")) + translationManager.emptyString
}
ColumnLayout {
Layout.fillWidth: true
MoneroComponents.LineEdit {
id: passwordInput
Layout.fillWidth: true
KeyNavigation.tab: passwordInputConfirm
labelFontSize: 14
password: true
labelText: qsTr("Password") + translationManager.emptyString
text: walletOptionsPassword
}
ColumnLayout {
id: progressLayout
spacing: 0
visible: !isAndroid && walletManager.getPasswordStrength !== undefined
Layout.fillWidth: true
Layout.topMargin: 0
TextInput {
id: progressText
@ -125,7 +142,7 @@ ColumnLayout {
property int maxWidth: bar.width
width: (maxWidth * root.passwordFill) / 100
radius: 8
color: MoneroComponents.Style.orange
color: "#FF0000"
}
Rectangle {
@ -136,29 +153,58 @@ ColumnLayout {
}
}
}
MoneroComponents.LineEdit {
id: passwordInput
Layout.fillWidth: true
KeyNavigation.tab: passwordInputConfirm
labelFontSize: 14
password: true
labelText: qsTr("Password") + translationManager.emptyString
text: walletOptionsPassword
}
ColumnLayout {
Layout.fillWidth: true
MoneroComponents.LineEdit {
id: passwordInputConfirm
property bool firstUserInput: true
Layout.fillWidth: true
Layout.topMargin: 8
KeyNavigation.tab: passwordInputConfirm
error: !passwordInputMessage.passwordsMatch && passwordInputMessage.visible
errorWhenEmpty: passwordInputMessage.passwordsMatch && passwordInputMessage.visible
labelFontSize: 14
passwordLinked: passwordInput
labelText: qsTr("Password (confirm)") + translationManager.emptyString
text: walletOptionsPassword
onTextChanged:{
if (passwordInputConfirm.text.length == passwordInput.text.length) {
firstUserInput = false;
}
}
}
RowLayout {
Layout.fillWidth: true
Layout.topMargin: 0
Layout.minimumHeight: passwordInputMessage.height + 3
MoneroComponents.TextPlain {
visible: passwordInputMessage.visible
font.family: FontAwesome.fontFamilySolid
font.styleName: "Solid"
font.pixelSize: 15
text: passwordInputMessage.passwordsMatch ? FontAwesome.checkCircle : FontAwesome.exclamationCircle
color: passwordInputMessage.color
themeTransition: false
}
MoneroComponents.TextPlain {
id: passwordInputMessage
property bool passwordsMatch: passwordInputConfirm.text === passwordInput.text
property bool partialPasswordsMatch: passwordInputConfirm.text === passwordInput.text.substring(0, passwordInputConfirm.text.length)
visible: passwordInputConfirm.text.length > 0 && !passwordInputConfirm.firstUserInput || passwordInputConfirm.firstUserInput && !passwordInputMessage.partialPasswordsMatch
Layout.topMargin: 3
text: passwordsMatch ? qsTr("Passwords match!") : qsTr("Passwords do not match") + translationManager.emptyString
textFormat: Text.PlainText
color: passwordsMatch ? (MoneroComponents.Style.blackTheme ? "#00FF00" : "#008000") : "#FF0000"
font.family: MoneroComponents.Style.fontRegular.name
font.pixelSize: 14
themeTransition: false
}
}
}
}