fix(Settings/Profile/Edit): The form for editing Display name looks incorrect

It has been used a `StatusInput` component from `StatusQ`.

Placeholder text updated to "Display Name" and button / content layout redefined to be shown correctly.

It incorporates the same validation rules as in the current onboarding process (min and max length validation, regular expression, some ends with 'eth' validations and alias validation).

Closes #5110 and #5193.

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

@@ -10,44 +10,76 @@ import shared.popups 1.0
 import shared.controls 1.0
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Controls.Validators 0.1
 
 StatusModal {
-    id: popup
+    id: root
     property var profileStore
 
-    onOpened: {
-        displayNameInput.forceActiveFocus(Qt.MouseFocusReason);
-    }
-
+    width: 420
+    height: 250
+    closePolicy: Popup.NoAutoClose
+    header.title: qsTr("Edit")
     contentItem: Item {
-        width: popup.width
-        height: childrenRect.height
-
-        Column {
+        StatusInput {
+            id: displayNameInput
+            width: parent.width - Style.current.padding
             anchors.top: parent.top
-            anchors.topMargin: 16
+            anchors.topMargin: Style.current.padding
             anchors.horizontalCenter: parent.horizontalCenter
-            width: parent.width - 32
-            spacing: 16
-
-            Input {
-                id: displayNameInput
-                placeholderText: "DisplayName"
-                text: root.profileStore.displayName
-                //validationError: popup.nicknameTooLong ? qsTrId("your-nickname-is-too-long") : ""
-            }
+            input.placeholderText: qsTr("Display Name")
+            input.text: root.profileStore.displayName
+            validators: [
+                StatusMinLengthValidator {
+                    minLength: 5
+                    errorMessage: qsTr("Username must be at least 5 characters")
+                },
+                StatusRegularExpressionValidator {
+                    regularExpression: /^[a-zA-Z0-9\-_]+$/
+                    errorMessage: qsTr("Only letters, numbers, underscores and hyphens allowed")
+                },
+                // TODO: Create `StatusMaxLengthValidator` in StatusQ
+                StatusValidator {
+                    name: "maxLengthValidator"
+                    validate: function (t) { return displayNameInput.input.text.length <= 24 }
+                    errorMessage: qsTr("24 character username limit")
+                },
+                StatusValidator {
+                    name: "endsWith-ethValidator"
+                    validate: function (t) { return !displayNameInput.input.text.endsWith("-eth") }
+                    errorMessage: qsTr("Usernames ending with '-eth' are not allowed")
+                },
+                StatusValidator {
+                    name: "endsWith_ethValidator"
+                    validate: function (t) { return !displayNameInput.input.text.endsWith("_eth") }
+                    errorMessage: qsTr("Usernames ending with '_eth' are not allowed")
+                },
+                StatusValidator {
+                    name: "endsWith.ethValidator"
+                    validate: function (t) { return !displayNameInput.input.text.endsWith(".eth") }
+                    errorMessage: qsTr("Usernames ending with '.eth' are not allowed")
+                },
+                StatusValidator {
+                    name: "isAliasValidator"
+                    validate: function (t) { return !globalUtils.isAlias(displayNameInput.input.text) }
+                    errorMessage: qsTr("Sorry, the name you have chosen is not allowed, try picking another username")
+                }
+            ]
         }
     }
 
     rightButtons: [
         StatusButton {
             id: doneBtn
-            text: "Ok"
-           // enabled: !popup.nicknameTooLong
+            text: qsTr("Ok")
+            enabled: displayNameInput.valid
             onClicked: {
-               popup.profileStore.setDisplayName(displayNameInput.text)
+                root.profileStore.setDisplayName(displayNameInput.input.text)
+                root.close()
             }
         }
     ]
+
+    onOpened: { displayNameInput.input.forceActiveFocus(Qt.MouseFocusReason) }
 }
 

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

@@ -1,4 +1,5 @@
 import QtQuick 2.13
+import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
 
@@ -160,9 +161,8 @@ ColumnLayout {
         id: displayNamePopupComponent
         DisplayNamePopup {
             profileStore: root.profileStore
-            onClosed: {
-                destroy()
-            }
+            anchors.centerIn: Overlay.overlay
+            onClosed: { destroy() }
         }
     }