Add proper validation for Feedback body

Alongside this, also made sure that we use a custom client-side
validation message when input is too short (under 10 chars long).
This allows us to use the language the user has selected in MaMpf
instead of the browser language.

app/assets/javascripts/feedback.js

@@ -1,6 +1,7 @@
 $(document).on('turbolinks:load', () => {
     registerToasts();
     registerSubmitButtonHandler();
+    registerFeedbackBodyValidator();
 });
 
 TOAST_OPTIONS = {
@@ -22,3 +23,16 @@ function registerSubmitButtonHandler() {
         $('#submit-form-btn').click();
     });
 }
+
+function registerFeedbackBodyValidator() {
+    const feedbackBody = document.getElementById('feedback_feedback');
+    feedbackBody.addEventListener('input', () => {
+        if (feedbackBody.validity.tooShort) {
+            const tooShortMessage = feedbackBody.dataset.tooShortMessage;
+            feedbackBody.setCustomValidity(tooShortMessage);
+        } else {
+            // render input valid, so that form will submit
+            feedbackBody.setCustomValidity('');
+        }
+    });
+}

app/models/feedback.rb

@@ -1,3 +1,9 @@
+# Feedback from users regarding MaMpf itself.
 class Feedback < ApplicationRecord
   belongs_to :user
+
+  BODY_MIN_LENGTH = 10
+  BODY_MAX_LENGTH = 10_000
+  validates :feedback, length: { minimum: BODY_MIN_LENGTH, maximum: BODY_MAX_LENGTH },
+                       allow_blank: false
 end

app/views/feedbacks/_feedback_form.html.erb

@@ -26,7 +26,10 @@
             placeholder: '_',
             style: 'height: 200px',
             required: '',
-            minlength: '10' %>
+            minlength: Feedback::BODY_MIN_LENGTH,
+            maxlength: Feedback::BODY_MAX_LENGTH,
+            'data-too-short-message': t('feedback.body_too_short_error',
+                                min_length: Feedback::BODY_MIN_LENGTH) %>
       <%= f.label :feedback, t('feedback.comment') %>
     </div>
 

config/locales/de.yml

@@ -3804,6 +3804,8 @@ de:
       können. Falls Du einen Bug gefunden hast und einen GitHub-Account hast,
       dann erstelle am besten direkt auf %{github_mampf} ein Issue. Ansonsten
       gerne auch über dieses Formular oder direkt per %{feedback_mail}.</p>
+    body_too_short_error: >
+      Dein Feedback ist zu kurz. Bitte gib mindestens %{min_length} Zeichen ein.
     mail_checkbox: >
       Erlaube es uns, Dich per E-Mail (%{user_mail}) zu kontaktieren, falls es
       Rückfragen zu Deinem Feedback gibt.

config/locales/en.yml

@@ -3598,6 +3598,8 @@ en:
       If you have found a bug and have a GitHub account, then create an issue
       directly on %{github_mampf}. Otherwise, you are welcome to use this
       form or send an %{feedback_mail} directly.</p>
+    body_too_short_error: >
+      Your feedback is too short. Please enter at least %{min_length} characters.
     mail_checkbox: >
       Allow us to contact you via email (%{user_mail}) if there are questions
       about your feedback.