From 282e43d8064618604d4342f2552a72421c124f00 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Fri, 4 Aug 2023 14:26:27 -0700
Subject: [PATCH] DEV: Pluralize support for form template error strings
 (#22983)

---
 .../app/components/form-template-field/input.hbs |  5 ++---
 .../components/form-template-field/textarea.hbs  |  4 ++--
 .../app/lib/form-template-validation.js          |  8 ++++----
 config/locales/client.en.yml                     | 16 ++++++++++++----
 spec/system/composer/template_validation_spec.rb |  4 ++--
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/input.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/input.hbs
index cf6d827fc53..eb52d970ed4 100644
--- a/app/assets/javascripts/discourse/app/components/form-template-field/input.hbs
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/input.hbs
@@ -6,7 +6,6 @@
         {{d-icon "asterisk" class="form-template-field__required-indicator"}}
       {{/if}}
     </label>
-
   {{/if}}
 
   <Input
@@ -16,7 +15,7 @@
     placeholder={{@attributes.placeholder}}
     required={{if @validations.required "required" ""}}
     pattern={{@validations.pattern}}
-    minLength={{@validations.min}}
-    maxLength={{@validations.max}}
+    minlength={{@validations.minimum}}
+    maxlength={{@validations.maximum}}
   />
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs
index 5190c4eed51..19328063bbc 100644
--- a/app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs
@@ -12,8 +12,8 @@
     class="form-template-field__textarea"
     placeholder={{@attributes.placeholder}}
     pattern={{@validations.pattern}}
-    minLength={{@validations.min}}
-    maxLength={{@validations.max}}
+    minlength={{@validations.minimum}}
+    maxlength={{@validations.maximum}}
     required={{if @validations.required "required" ""}}
   />
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/lib/form-template-validation.js b/app/assets/javascripts/discourse/app/lib/form-template-validation.js
index 2bb59cca8f5..1a96cd45297 100644
--- a/app/assets/javascripts/discourse/app/lib/form-template-validation.js
+++ b/app/assets/javascripts/discourse/app/lib/form-template-validation.js
@@ -109,19 +109,19 @@ function _showErrorMessage(field, element) {
     _showErrorByType(element, field, prefix, types);
   } else if (field.validity.tooShort) {
     element.textContent = I18n.t("form_templates.errors.tooShort", {
-      minLength: field.minLength,
+      count: field.minLength,
     });
   } else if (field.validity.tooLong) {
     element.textContent = I18n.t("form_templates.errors.tooLong", {
-      maxLength: field.maxLength,
+      count: field.maxLength,
     });
   } else if (field.validity.rangeOverflow) {
     element.textContent = I18n.t("form_templates.errors.rangeOverflow", {
-      max: field.max,
+      count: field.max,
     });
   } else if (field.validity.rangeUnderflow) {
     element.textContent = I18n.t("form_templates.errors.rangeUnderflow", {
-      min: field.min,
+      count: field.min,
     });
   } else if (field.validity.patternMismatch) {
     element.textContent = I18n.t("form_templates.errors.patternMismatch");
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 2f38d16f907..1e8a824f72c 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -4568,10 +4568,18 @@ en:
           tel: "Please enter a valid telephone number."
           text: "Please enter a text value."
           url: "Please enter a valid URL."
-        tooShort: "The input must be %{minLength} characters or longer."
-        tooLong: "The input must be less than %{maxLength} characters."
-        rangeOverflow: "The input must be less than %{max}."
-        rangeUnderflow: "The input must be more than %{min}."
+        tooShort:
+          one: "The input must be %{count} character or longer."
+          other: "The input must be %{count} characters or longer."
+        tooLong:
+          one: "The input must be less than %{count} character."
+          other: "The input must be less than %{count} characters."
+        rangeOverflow:
+          one: "The input must be less than %{count}."
+          other: "The input must be less than %{count}."
+        rangeUnderflow:
+          one: "The input must be more than %{count}."
+          other: "The input must be more than %{count}."
         patternMismatch: "Please match the requested format."
         badInput: "Please enter a valid input."
 
diff --git a/spec/system/composer/template_validation_spec.rb b/spec/system/composer/template_validation_spec.rb
index 05a2d62938c..40d917216cc 100644
--- a/spec/system/composer/template_validation_spec.rb
+++ b/spec/system/composer/template_validation_spec.rb
@@ -14,7 +14,7 @@ describe "Composer Form Template Validations", type: :system, js: true do
   validations:
     required: true
     type: email
-    min: 10",
+    minimum: 10",
     )
   end
 
@@ -92,7 +92,7 @@ describe "Composer Form Template Validations", type: :system, js: true do
     composer.create
     composer.fill_form_template_field("input", "b@b.com")
     expect(composer).to have_form_template_field_error(
-      I18n.t("js.form_templates.errors.tooShort", minLength: 10),
+      I18n.t("js.form_templates.errors.tooShort", count: 10),
     )
   end