FIX: Show error if field is same as password (#18529)

* FIX: Show user fields validation errors

* FIX: Show error if user field is same as password

app/assets/javascripts/discourse/app/mixins/user-fields-validation.js

@@ -20,27 +20,49 @@ export default Mixin.create({
     this.set("userFields", userFields);
   },
 
-  // Validate required fields
   @discourseComputed("userFields.@each.value")
   userFieldsValidation() {
-    let userFields = this.userFields;
-    if (userFields) {
-      userFields = userFields.filterBy("field.required");
+    if (!this.userFields) {
+      return EmberObject.create({ ok: true });
     }
-    if (!isEmpty(userFields)) {
-      const emptyUserField = userFields.find((uf) => {
-        const val = uf.get("value");
-        return !val || isEmpty(val);
-      });
-      if (emptyUserField) {
-        const userField = emptyUserField.field;
-        return EmberObject.create({
+
+    this.userFields.forEach((userField) => {
+      let validation = EmberObject.create({ ok: true });
+
+      if (
+        userField.field.required &&
+        (!userField.value || isEmpty(userField.value))
+      ) {
+        validation = EmberObject.create({
           failed: true,
-          message: I18n.t("user_fields.required", { name: userField.name }),
-          element: userField.element,
+          reason: I18n.t("user_fields.required", {
+            name: userField.field.name,
+          }),
+          element: userField.field.element,
+        });
+      } else if (
+        this.accountPassword &&
+        userField.field.field_type === "text" &&
+        userField.value &&
+        userField.value
+          .toLowerCase()
+          .includes(this.accountPassword.toLowerCase())
+      ) {
+        validation = EmberObject.create({
+          failed: true,
+          reason: I18n.t("user_fields.same_as_password"),
+          element: userField.field.element,
         });
       }
+
+      userField.set("validation", validation);
+    });
+
+    const invalidUserField = this.userFields.find((f) => f.validation.failed);
+    if (invalidUserField) {
+      return invalidUserField.validation;
     }
+
     return EmberObject.create({ ok: true });
   },
 });

app/assets/javascripts/discourse/app/templates/components/user-fields/text.hbs

@@ -4,5 +4,6 @@
 </label>
 <div class="controls">
   <Input id={{concat "user-" this.elementId}} @value={{this.value}} maxlength={{this.site.user_field_max_length}} />
+  <InputTip @validation={{this.validation}} />
   <div class="instructions">{{html-safe this.field.description}}</div>
 </div>

app/assets/javascripts/discourse/app/templates/modal/create-account.hbs

@@ -112,7 +112,7 @@
                       {{!-- adding the value-entered class here to
                       be able to detect if the user field has a value
                       entered --}}
-                      <UserField @field={{f.field}} @value={{f.value}} @class={{value-entered f.value}} />
+                      <UserField @field={{f.field}} @value={{f.value}} @class={{value-entered f.value}} @validation={{f.validation}} />
                     </div>
                   {{/each}}
                 </div>

app/assets/javascripts/discourse/tests/acceptance/create-account-user-fields-test.js

@@ -46,9 +46,6 @@ acceptance("Create Account - User Fields", function (needs) {
 
     await fillIn("#new-account-name", "Dr. Good Tuna");
     await fillIn("#new-account-password", "cool password bro");
-    // without this double fill, field will sometimes being empty
-    // got consistent repro by having browser search bar focused when starting test
-    await fillIn("#new-account-email", "good.tuna@test.com");
     await fillIn("#new-account-email", "good.tuna@test.com");
     await fillIn("#new-account-username", "goodtuna");
 
@@ -78,4 +75,24 @@ acceptance("Create Account - User Fields", function (needs) {
       "hitting Enter triggers action"
     );
   });
+
+  test("shows validation error for user fields", async function (assert) {
+    await visit("/");
+    await click("header .sign-up-button");
+
+    await fillIn("#new-account-password", "cool password bro");
+    await fillIn(".user-field-whats-your-dad-like input", "cool password bro");
+
+    await click(".modal-footer .btn-primary");
+
+    assert.ok(
+      exists(".user-field-what-is-your-pets-name .tip.bad"),
+      "shows required field error"
+    );
+
+    assert.ok(
+      exists(".user-field-whats-your-dad-like .tip.bad"),
+      "shows same as password error"
+    );
+  });
 });

config/locales/client.en.yml

@@ -1038,6 +1038,7 @@ en:
     user_fields:
       none: "(select an option)"
       required: 'Please enter a value for "%{name}"'
+      same_as_password: 'Your password should not be repeated in other fields.'
 
     user:
       said: "%{username}:"