feat: add validationError prop on Input and use it in privateChatPopup

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 {

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
+    }
+}

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
+

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 \

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}
 }
 ##^##*/