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 arrowLeft : "\uf060"
property string arrowRight : "\uf061" property string arrowRight : "\uf061"
property string cashRegister: "\uf788" property string cashRegister: "\uf788"
property string checkCircle: "\uf058"
property string clipboard : "\uf0ea" property string clipboard : "\uf0ea"
property string clockO : "\uf017" property string clockO : "\uf017"
property string cloud : "\uf0c2" property string cloud : "\uf0c2"

View File

@ -70,10 +70,13 @@ ColumnLayout {
var strengthString; var strengthString;
if(strength <= 33){ if(strength <= 33){
strengthString = qsTr("Low"); strengthString = qsTr("Low");
fillRect.color = "#FF0000";
} else if(strength <= 66){ } else if(strength <= 66){
strengthString = qsTr("Medium"); strengthString = qsTr("Medium");
fillRect.color = (MoneroComponents.Style.blackTheme ? "#FFFF00" : "#FFCC00");
} else { } else {
strengthString = qsTr("High"); strengthString = qsTr("High");
fillRect.color = (MoneroComponents.Style.blackTheme ? "#00FF00" : "#008000");
} }
progressText.text = passwordStrengthText + strengthString + translationManager.emptyString; progressText.text = passwordStrengthText + strengthString + translationManager.emptyString;
@ -91,74 +94,117 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
id: progressLayout
spacing: 0
visible: !isAndroid && walletManager.getPasswordStrength !== undefined
Layout.fillWidth: true Layout.fillWidth: true
TextInput { MoneroComponents.LineEdit {
id: progressText id: passwordInput
Layout.topMargin: 6
Layout.bottomMargin: 6
font.family: MoneroComponents.Style.fontMedium.name
font.pixelSize: 14
font.bold: false
color: MoneroComponents.Style.defaultFontColor
height: 18
passwordCharacter: "*"
}
Rectangle {
id: bar
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 8 KeyNavigation.tab: passwordInputConfirm
labelFontSize: 14
password: true
labelText: qsTr("Password") + translationManager.emptyString
text: walletOptionsPassword
}
radius: 8 ColumnLayout {
color: MoneroComponents.Style.progressBarBackgroundColor id: progressLayout
spacing: 0
visible: !isAndroid && walletManager.getPasswordStrength !== undefined
Layout.fillWidth: true
Layout.topMargin: 0
Rectangle { TextInput {
id: fillRect id: progressText
anchors.top: parent.top Layout.topMargin: 6
anchors.bottom: parent.bottom Layout.bottomMargin: 6
anchors.left: parent.left font.family: MoneroComponents.Style.fontMedium.name
height: bar.height font.pixelSize: 14
property int maxWidth: bar.width font.bold: false
width: (maxWidth * root.passwordFill) / 100 color: MoneroComponents.Style.defaultFontColor
radius: 8 height: 18
color: MoneroComponents.Style.orange passwordCharacter: "*"
} }
Rectangle { Rectangle {
color: MoneroComponents.Style.defaultFontColor id: bar
anchors.bottom: parent.bottom Layout.fillWidth: true
anchors.left: parent.left Layout.preferredHeight: 8
anchors.leftMargin: 8
radius: 8
color: MoneroComponents.Style.progressBarBackgroundColor
Rectangle {
id: fillRect
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
height: bar.height
property int maxWidth: bar.width
width: (maxWidth * root.passwordFill) / 100
radius: 8
color: "#FF0000"
}
Rectangle {
color: MoneroComponents.Style.defaultFontColor
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.leftMargin: 8
}
} }
} }
} }
MoneroComponents.LineEdit { ColumnLayout {
id: passwordInput
Layout.fillWidth: true Layout.fillWidth: true
KeyNavigation.tab: passwordInputConfirm
labelFontSize: 14 MoneroComponents.LineEdit {
password: true 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;
}
}
}
labelText: qsTr("Password") + translationManager.emptyString RowLayout {
text: walletOptionsPassword Layout.fillWidth: true
} Layout.topMargin: 0
Layout.minimumHeight: passwordInputMessage.height + 3
MoneroComponents.LineEdit { MoneroComponents.TextPlain {
id: passwordInputConfirm visible: passwordInputMessage.visible
Layout.fillWidth: true font.family: FontAwesome.fontFamilySolid
Layout.topMargin: 8 font.styleName: "Solid"
KeyNavigation.tab: passwordInputConfirm font.pixelSize: 15
text: passwordInputMessage.passwordsMatch ? FontAwesome.checkCircle : FontAwesome.exclamationCircle
color: passwordInputMessage.color
themeTransition: false
}
labelFontSize: 14 MoneroComponents.TextPlain {
passwordLinked: passwordInput id: passwordInputMessage
property bool passwordsMatch: passwordInputConfirm.text === passwordInput.text
labelText: qsTr("Password (confirm)") + translationManager.emptyString property bool partialPasswordsMatch: passwordInputConfirm.text === passwordInput.text.substring(0, passwordInputConfirm.text.length)
text: walletOptionsPassword 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
}
}
} }
} }