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

2 files changed, 97 insertions, 50 deletions

diff --git a/fonts/FontAwesome/FontAwesome.qml b/fonts/FontAwesome/FontAwesome.qml
index d57ec8fa..533909a7 100644
--- a/fonts/FontAwesome/FontAwesome.qml
+++ b/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"
diff --git a/wizard/WizardAskPassword.qml b/wizard/WizardAskPassword.qml
index ed2c812e..b14aee4d 100644
--- a/wizard/WizardAskPassword.qml
+++ b/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 {
-            id: progressText
-            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: "*"
+        MoneroComponents.LineEdit {
+            id: passwordInput
+            Layout.fillWidth: true
+            KeyNavigation.tab: passwordInputConfirm
+            labelFontSize: 14
+            password: true
+            labelText: qsTr("Password") + translationManager.emptyString
+            text: walletOptionsPassword
         }
 
-        Rectangle {
-            id: bar
+        ColumnLayout {
+            id: progressLayout
+            spacing: 0
+            visible: !isAndroid && walletManager.getPasswordStrength !== undefined
             Layout.fillWidth: true
-            Layout.preferredHeight: 8
+            Layout.topMargin: 0
 
-            radius: 8
-            color: MoneroComponents.Style.progressBarBackgroundColor
+            TextInput {
+                id: progressText
+                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: 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
+                id: bar
+                Layout.fillWidth: true
+                Layout.preferredHeight: 8
+
                 radius: 8
-                color: MoneroComponents.Style.orange
-            }
+                color: MoneroComponents.Style.progressBarBackgroundColor
 
-            Rectangle {
-                color: MoneroComponents.Style.defaultFontColor
-                anchors.bottom: parent.bottom
-                anchors.left: parent.left
-                anchors.leftMargin: 8
+                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 {
-        id: passwordInput
+    ColumnLayout {
         Layout.fillWidth: true
-        KeyNavigation.tab: passwordInputConfirm
-
-        labelFontSize: 14
-        password: true
 
-        labelText: qsTr("Password") + translationManager.emptyString
-        text: walletOptionsPassword
-    }
+        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;
+                }
+            }
+        }
 
-    MoneroComponents.LineEdit {
-        id: passwordInputConfirm
-        Layout.fillWidth: true
-        Layout.topMargin: 8
-        KeyNavigation.tab: passwordInputConfirm
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.topMargin: 0
+            Layout.minimumHeight: passwordInputMessage.height + 3
 
-        labelFontSize: 14
-        passwordLinked: passwordInput
+            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
+            }
 
-        labelText: qsTr("Password (confirm)") + translationManager.emptyString
-        text: walletOptionsPassword
+            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
+            }
+        }
     }
 }