From ad2a318c85ba414d7d86e03d462a12eba2e31678 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Mon, 22 Jun 2020 11:51:15 -0400
Subject: [PATCH] feat: add validationError prop on Input and use it in
 privateChatPopup

---
 .../Chat/components/PrivateChatPopup.qml      | 26 +++++++++++++++++--
 ui/imports/Utils.qml                          | 17 ++++++++++++
 ui/imports/qmldir                             |  2 ++
 ui/nim-status-client.pro                      |  1 +
 ui/shared/Input.qml                           | 21 +++++++++++++--
 5 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 ui/imports/Utils.qml

diff --git a/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml b/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml
index bd85223249..cbd0d6fa73 100644
--- a/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml
+++ b/ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml
@@ -7,8 +7,24 @@ import "../../Profile/Sections/Contacts/"
 import "./"
 
 ModalPopup {
-    function doJoin(){
+    property string validationError: ""
+
+    function validate() {
+        // TODO change this when we support ENS names
+        if (!Utils.isChatKey(chatKey.text)) {
+            validationError = "This needs to be a valid chat key"
+        } else {
+            validationError = ""
+        }
+        return validationError === ""
+    }
+
+    function doJoin() {
         if (chatKey.text !== "") {
+            if (!validate()) {
+                return
+            }
+
             chatsModel.joinChat(chatKey.text, Constants.chatTypeOneToOne);
         } else if (contactListView.selectedContact.checked) {
             chatsModel.joinChat(contactListView.selectedContact.parent.address, Constants.chatTypeOneToOne);
@@ -24,7 +40,9 @@ ModalPopup {
     onOpened: {
         chatKey.text = "";
         chatKey.forceActiveFocus(Qt.MouseFocusReason)
-        contactListView.selectedContact.checked = false
+        if (contactListView.selectedContact) {
+            contactListView.selectedContact.checked = false
+        }
     }
 
     Input {
@@ -32,6 +50,10 @@ ModalPopup {
         placeholderText: qsTr("Enter ENS username or chat key")
         Keys.onEnterPressed: doJoin()
         Keys.onReturnPressed: doJoin()
+        validationError: popup.validationError
+        textField.onEditingFinished: {
+            validate()
+        }
     }
 
     ContactList {
diff --git a/ui/imports/Utils.qml b/ui/imports/Utils.qml
new file mode 100644
index 0000000000..78d0d09aa0
--- /dev/null
+++ b/ui/imports/Utils.qml
@@ -0,0 +1,17 @@
+pragma Singleton
+
+import QtQuick 2.13
+
+QtObject {
+    function isHex(value) {
+        return /^[0-9a-f]*$/i.test(value)
+    }
+
+    function startsWith0x(value) {
+        return value.startsWith('0x')
+    }
+
+    function isChatKey(value) {
+        return startsWith0x(value) && isHex(value) && value.length === 132
+    }
+}
diff --git a/ui/imports/qmldir b/ui/imports/qmldir
index c7bf985965..eee0d8d875 100644
--- a/ui/imports/qmldir
+++ b/ui/imports/qmldir
@@ -1,3 +1,5 @@
 module Theme
 singleton Theme 1.0 ./Theme.qml
 singleton Constants 1.0 ./Constants.qml
+singleton Utils 1.0 ./Utils.qml
+
diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro
index d2bba655f4..d032a5e5f9 100644
--- a/ui/nim-status-client.pro
+++ b/ui/nim-status-client.pro
@@ -161,6 +161,7 @@ DISTFILES += \
     app/img/wallet.svg \
     app/img/walletActive.svg \
     app/qmldir \
+    imports/Utils.qml \
     imports/qmldir \
     onboarding/CreatePasswordModal.qml \
     onboarding/EnterSeedPhraseModal.qml \
diff --git a/ui/shared/Input.qml b/ui/shared/Input.qml
index 3b18d506e3..74209527ae 100644
--- a/ui/shared/Input.qml
+++ b/ui/shared/Input.qml
@@ -6,6 +6,7 @@ Item {
     property alias textField: inputValue
     property string placeholderText: "My placeholder"
     property alias text: inputValue.text
+    property string validationError: ""
     property string label: ""
     //    property string label: "My Label"
     readonly property bool hasLabel: label !== ""
@@ -24,7 +25,7 @@ Item {
     property int fontPixelSize: 15
 
     id: inputBox
-    height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0)
+    height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0) + (!!validationError ? validationErrorText.height : 0)
     anchors.right: parent.right
     anchors.left: parent.left
 
@@ -49,6 +50,9 @@ Item {
         anchors.topMargin: inputBox.hasLabel ? inputBox.labelMargin : 0
         anchors.right: parent.right
         anchors.left: parent.left
+        border.width: !!validationError ? 1 : 0
+        border.color: Theme.red
+
         StyledTextField {
             id: inputValue
             visible: !inputBox.isTextArea && !inputBox.isSelect
@@ -81,10 +85,23 @@ Item {
             source: inputBox.icon
         }
     }
+
+    TextEdit {
+        visible: !!validationError
+        id: validationErrorText
+        text: validationError
+        anchors.top: inputRectangle.bottom
+        anchors.topMargin: 1
+        selectByMouse: true
+        readOnly: true
+        font.pixelSize: 12
+        color: Theme.red
+
+    }
 }
 
 /*##^##
 Designer {
-    D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.25}
+    D{i:0;formeditorColor:"#c0c0c0";formeditorZoom:1.25}
 }
 ##^##*/