Merge pull request #3682

b99b333 WizardAskPassword: add colors to password strength meter; add 'Passwords match/do not match' message (rating89us)

fonts/FontAwesome/FontAwesome.qml

@@ -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"

wizard/WizardAskPassword.qml

@@ -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;
@@ -91,74 +94,117 @@ ColumnLayout {
     }
 
     ColumnLayout {
-        id: progressLayout
-        spacing: 0
-        visible: !isAndroid && walletManager.getPasswordStrength !== undefined
         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.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 {
-                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
-        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
+            }
+        }
     }
 }