fix(ProfileDescriptionPanel): Profile settings -> Identity : Addition of validation to bio field (#14772)

- Added validator to the bio component to allow only ascii and emoji characters
This PR fixes #13623

storybook/pages/ProfileDescriptionPanelPage.qml

@@ -0,0 +1,56 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Core.Utils 0.1
+import StatusQ.Controls 0.1
+
+import AppLayouts.Profile.panels 1.0
+
+import utils 1.0
+
+import Storybook 1.0
+
+Item {
+    id: root
+
+    property bool globalUtilsReady: false
+
+    Frame {
+        anchors.centerIn: parent
+        implicitWidth: 500
+        padding:20
+
+        QtObject {
+            function isAlias(name) {
+                return false;
+            }
+
+            Component.onCompleted: {
+                Utils.globalUtilsInst = this
+                root.globalUtilsReady = true
+            }
+
+            Component.onDestruction: {
+                root.globalUtilsReady = false
+                Utils.globalUtilsInst = {}
+            }
+        }
+
+        Loader {
+
+            anchors.centerIn: parent
+            active: root.globalUtilsReady
+
+            sourceComponent: ProfileDescriptionPanel {
+                anchors.centerIn: parent
+                displayName.text: "Alba Theodor"
+                displayName.validationMode: StatusInput.ValidationMode.Always
+                bio.text: "29-year-old magitician 🤔who enjoys camping and binge-watching boxed sets. " +
+                          "Kind and friendly 🤼, but can also be very unfriendly and a bit lazy. " +
+                          "Started studying philosophy😎 and economics but never finished the course."
+            }
+        }
+    }
+}
+
+// category: Panels

storybook/stubs/shared/stores/ProfileStore.qml

@@ -0,0 +1,4 @@
+import QtQuick 2.15
+
+QtObject {
+}

storybook/stubs/shared/stores/qmldir

@@ -5,3 +5,4 @@ singleton RootStore 1.0 RootStore.qml
 TokenBalanceHistoryStore 1.0 TokenBalanceHistoryStore.qml
 BIP39_en 1.0 BIP39_en.qml
 DAppsStore 1.0 DAppsStore.qml
+ProfileStore 1.0 ProfileStore.qml

ui/app/AppLayouts/Profile/panels/ProfileDescriptionPanel.qml

@@ -53,7 +53,12 @@ Item {
             minimumHeight: 108
             maximumHeight: 108
             input.verticalAlignment: TextEdit.AlignTop
-
+            validators: [
+                StatusRegularExpressionValidator {
+                    regularExpression: Constants.regularExpressions.asciiWithEmoji
+                    errorMessage: qsTr("Invalid characters. Standard keyboard characters and emojis only.")
+                }
+            ]
             input.tabNavItem: displayNameInput.input.edit
         }
     }

ui/app/AppLayouts/Profile/views/MyProfileView.qml

@@ -68,7 +68,7 @@ SettingsContentBase {
 
     dirty: priv.isIdentityTabDirty ||
            priv.hasAnyProfileShowcaseChanges
-    saveChangesButtonEnabled: !!descriptionPanel.displayName.text && descriptionPanel.displayName.valid
+    saveChangesButtonEnabled: !!descriptionPanel.displayName.text && descriptionPanel.displayName.valid && (descriptionPanel.bio.valid || descriptionPanel.bio.text === '')
 
     toast.saveChangesTooltipText: saveChangesButtonEnabled ? "" : qsTr("Invalid changes made to Identity")
     autoscrollWhenDirty: profileTabBar.currentIndex === MyProfileView.Identity

ui/imports/utils/Constants.qml

@@ -681,6 +681,7 @@ QtObject {
         readonly property var capitalOnly: /^$|^[A-Z]+$/
         readonly property var numerical: /^$|^[0-9]+$/
         readonly property var emoji: /\ud83c\udff4(\udb40[\udc61-\udc7a])+\udb40\udc7f|(\ud83c[\udde6-\uddff]){2}|([\#\*0-9]\ufe0f?\u20e3)|(\u00a9|\u00ae|[\u203c\u2049\u20e3\u2122\u2139\u2194-\u2199\u21a9\u21aa\u231a\u231b\u2328\u23cf\u23e9-\u23fa\u24c2\u25aa\u25ab\u25b6\u25c0\u25fb-\u25fe\u2600-\u2604\u260e\u2611\u2614\u2615\u2618\u261d\u2620\u2622\u2623\u2626\u262a\u262e\u262f\u2638-\u263a\u2640\u2642\u2648-\u2653\u265f\u2660\u2663\u2665\u2666\u2668\u267b\u267e\u267f\u2692-\u2697\u2699\u269b\u269c\u26a0\u26a1\u26a7\u26aa\u26ab\u26b0\u26b1\u26bd\u26be\u26c4\u26c5\u26c8\u26ce\u26cf\u26d1\u26d3\u26d4\u26e9\u26ea\u26f0-\u26f5\u26f7-\u26fa\u26fd\u2702\u2705\u2708-\u270d\u270f\u2712\u2714\u2716\u271d\u2721\u2728\u2733\u2734\u2744\u2747\u274c\u274e\u2753-\u2755\u2757\u2763\u2764\u2795-\u2797\u27a1\u27b0\u27bf\u2934\u2935\u2b05-\u2b07\u2b1b\u2b1c\u2b50\u2b55\u3030\u303d\u3297\u3299]|\ud83c[\udc04\udccf\udd70\udd71\udd7e\udd7f\udd8e\udd91-\udd9a\udde6-\uddff\ude01\ude02\ude1a\ude2f\ude32-\ude3a\ude50\ude51\udf00-\udf21\udf24-\udf93\udf96\udf97\udf99-\udf9b\udf9e-\udff0\udff3-\udff5\udff7-\udfff]|\ud83d[\udc00-\udcfd\udcff-\udd3d\udd49-\udd4e\udd50-\udd67\udd6f\udd70\udd73-\udd7a\udd87\udd8a-\udd8d\udd90\udd95\udd96\udda4\udda5\udda8\uddb1\uddb2\uddbc\uddc2-\uddc4\uddd1-\uddd3\udddc-\uddde\udde1\udde3\udde8\uddef\uddf3\uddfa-\ude4f\ude80-\udec5\udecb-\uded2\uded5-\uded7\udedc-\udee5\udee9\udeeb\udeec\udef0\udef3-\udefc\udfe0-\udfeb\udff0]|\ud83e[\udd0c-\udd3a\udd3c-\udd45\udd47-\ude7c\ude80-\ude88\ude90-\udebd\udebf-\udec5\udece-\udedb\udee0-\udee8\udef0-\udef8])((\ud83c[\udffb-\udfff])?(\ud83e[\uddb0-\uddb3])?(\ufe0f?\u200d([\u2000-\u3300]|[\ud83c-\ud83e][\ud000-\udfff])\ufe0f?)?)*/g;
+        readonly property var asciiWithEmoji: /^[\u00a9\u00ae\u2000-\u3300\ud83c\ud000-\udfff\ud83d\ud000-\udfff\ud83e\ud000-\udfff\u0000-\u007F]+$/
     }
 
     readonly property QtObject errorMessages: QtObject {