From e8710e3ed5c63f354675deb3d9414325fdaf18e1 Mon Sep 17 00:00:00 2001
From: Noelia <noelia@status.im>
Date: Mon, 28 Mar 2022 11:38:58 +0200
Subject: [PATCH] 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.
---
 .../Profile/views/DisplayNamePopup.qml        | 76 +++++++++++++------
 .../Profile/views/MyProfileView.qml           |  6 +-
 2 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/ui/app/AppLayouts/Profile/views/DisplayNamePopup.qml b/ui/app/AppLayouts/Profile/views/DisplayNamePopup.qml
index cfafca0e40..2066b37303 100644
--- a/ui/app/AppLayouts/Profile/views/DisplayNamePopup.qml
+++ b/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) }
 }
 
diff --git a/ui/app/AppLayouts/Profile/views/MyProfileView.qml b/ui/app/AppLayouts/Profile/views/MyProfileView.qml
index 852eaf732b..0919f5880b 100644
--- a/ui/app/AppLayouts/Profile/views/MyProfileView.qml
+++ b/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() }
         }
     }