FIX: Localization for custom signup form descriptions (#29982)

app/assets/javascripts/discourse/app/components/fullname-input.gjs

@@ -4,6 +4,7 @@ import { service } from "@ember/service";
 import InputTip from "discourse/components/input-tip";
 import TextField from "discourse/components/text-field";
 import valueEntered from "discourse/helpers/value-entered";
+import { i18n } from "discourse-i18n";
 
 export default class SidebarEditNavigationMenuTagsModal extends Component {
   @service siteSettings;
@@ -16,7 +17,7 @@ export default class SidebarEditNavigationMenuTagsModal extends Component {
 
   get showFullnameInstructions() {
     return (
-      this.siteSettings.signup_form_full_name_instructions &&
+      this.siteSettings.show_signup_form_full_name_instructions &&
       !this.args.nameValidation.reason
     );
   }
@@ -39,7 +40,7 @@ export default class SidebarEditNavigationMenuTagsModal extends Component {
 
       {{#if this.showFullnameInstructions}}
         <span class="more-info" id="fullname-validation-more-info">
-          {{this.siteSettings.signup_form_full_name_instructions}}
+          {{i18n "user.name.instructions_required"}}
         </span>
       {{else}}
         <InputTip @validation={{@nameValidation}} id="fullname-validation" />

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

@@ -62,7 +62,9 @@
               />
             {{else}}
               <span class="more-info" id="account-email-validation-more-info">
-                {{this.emailInstructions}}
+                {{#if this.siteSettings.show_signup_form_email_instructions}}
+                  {{i18n "user.email.instructions"}}
+                {{/if}}
               </span>
             {{/if}}
           </div>
@@ -86,7 +88,7 @@
 
             {{#if this.showUsernameInstructions}}
               <span class="more-info" id="username-validation-more-info">
-                {{this.siteSettings.signup_form_username_instructions}}
+                {{i18n "user.username.instructions"}}
               </span>
 
             {{else}}
@@ -144,7 +146,9 @@
                       @validation={{this.passwordValidation}}
                       id="password-validation"
                     />
-                  {{else if this.passwordInstructions}}
+                  {{else if
+                    this.siteSettings.show_signup_form_password_instructions
+                  }}
                     <span class="more-info" id="password-validation-more-info">
                       {{this.passwordInstructions}}
                     </span>

app/assets/javascripts/discourse/app/components/modal/create-account.js

@@ -157,14 +157,6 @@ export default class CreateAccount extends Component.extend(
     );
   }
 
-  @discourseComputed
-  emailInstructions() {
-    return (
-      this.siteSettings.signup_form_email_instructions ||
-      i18n("user.email.instructions")
-    );
-  }
-
   @discourseComputed(
     "passwordValidation.ok",
     "passwordValidation.reason",
@@ -181,15 +173,10 @@ export default class CreateAccount extends Component.extend(
     );
   }
 
-  @discourseComputed
-  passwordInstructions() {
-    return this.siteSettings.signup_form_password_instructions;
-  }
-
   @discourseComputed("usernameValidation.reason")
   showUsernameInstructions(usernameValidationReason) {
     return (
-      this.siteSettings.signup_form_username_instructions &&
+      this.siteSettings.show_signup_form_username_instructions &&
       !usernameValidationReason
     );
   }

app/assets/javascripts/discourse/app/controllers/signup.js

@@ -140,14 +140,6 @@ export default class SignupPageController extends Controller.extend(
     );
   }
 
-  @discourseComputed
-  emailInstructions() {
-    return (
-      this.siteSettings.signup_form_email_instructions ||
-      i18n("user.email.instructions")
-    );
-  }
-
   @discourseComputed(
     "passwordValidation.ok",
     "passwordValidation.reason",
@@ -164,15 +156,10 @@ export default class SignupPageController extends Controller.extend(
     );
   }
 
-  @discourseComputed
-  passwordInstructions() {
-    return this.siteSettings.signup_form_password_instructions;
-  }
-
   @discourseComputed("usernameValidation.reason")
   showUsernameInstructions(usernameValidationReason) {
     return (
-      this.siteSettings.signup_form_username_instructions &&
+      this.siteSettings.show_signup_form_username_instructions &&
       !usernameValidationReason
     );
   }

app/assets/javascripts/discourse/app/templates/signup.hbs

@@ -58,7 +58,9 @@
               />
             {{else}}
               <span class="more-info" id="account-email-validation-more-info">
-                {{this.emailInstructions}}
+                {{#if this.siteSettings.show_signup_form_email_instructions}}
+                  {{i18n "user.email.instructions"}}
+                {{/if}}
               </span>
             {{/if}}
           </div>
@@ -82,7 +84,7 @@
 
             {{#if this.showUsernameInstructions}}
               <span class="more-info" id="username-validation-more-info">
-                {{this.siteSettings.signup_form_username_instructions}}
+                {{i18n "user.username.instructions"}}
               </span>
 
             {{else}}
@@ -140,7 +142,9 @@
                       @validation={{this.passwordValidation}}
                       id="password-validation"
                     />
-                  {{else if this.passwordInstructions}}
+                  {{else if
+                    this.siteSettings.show_signup_form_password_instructions
+                  }}
                     <span class="more-info" id="password-validation-more-info">
                       {{this.passwordInstructions}}
                     </span>

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

@@ -66,28 +66,42 @@ acceptance("Create Account", function () {
       .hasText(i18n("user.username.required"), "shows signup error");
   });
 
-  test("custom instructions", async function (assert) {
-    this.siteSettings.signup_form_email_instructions = "email";
-    this.siteSettings.signup_form_username_instructions = "username";
-    this.siteSettings.signup_form_password_instructions = "password";
-    this.siteSettings.signup_form_full_name_instructions = "fullname";
+  test("hidden instructions", async function (assert) {
+    await visit("/");
+    await click("header .sign-up-button");
+
+    assert
+      .dom("#account-email-validation-more-info")
+      .hasText(i18n("user.email.instructions"));
+    assert.dom("#username-validation-more-info").doesNotExist();
+    assert.dom("#password-validation-more-info").doesNotExist();
+    assert.dom("#fullname-validation-more-info").doesNotExist();
+  });
+
+  test("visible instructions", async function (assert) {
+    this.siteSettings.show_signup_form_username_instructions = true;
+    this.siteSettings.show_signup_form_password_instructions = true;
+    this.siteSettings.show_signup_form_full_name_instructions = true;
 
     await visit("/");
     await click("header .sign-up-button");
 
-    assert.dom("#account-email-validation-more-info").hasText("email");
-    assert.dom("#username-validation-more-info").hasText("username");
-    assert.dom("#password-validation-more-info").hasText("password");
-    assert.dom("#fullname-validation-more-info").hasText("fullname");
+    assert
+      .dom("#username-validation-more-info")
+      .hasText(i18n("user.username.instructions"));
+    assert
+      .dom("#password-validation-more-info")
+      .hasText(i18n("user.password.instructions", { count: 10 }));
+    assert
+      .dom("#fullname-validation-more-info")
+      .hasText(i18n("user.name.instructions_required"));
 
     await fillIn("#new-account-email", "z@z.co");
     await fillIn("#new-account-password", "supersecurepassword");
 
     await click(".d-modal__footer .btn-primary");
 
-    assert
-      .dom("#username-validation")
-      .hasText(i18n("user.username.required"), "shows signup error");
+    assert.dom("#username-validation").hasText(i18n("user.username.required"));
 
     // only shows the instructions if the validation is not visible
     assert.dom("#account-email-validation-more-info").doesNotExist();