Set maximum field length on newsletter/updated form field (Fixes #12539)

bedrock/newsletter/templates/newsletter/updated.html

@@ -77,8 +77,8 @@
 
             <label for="unsub99">
               <input type="checkbox" id="unsub99" name="reason-text-p" value="{{ ftl('newsletters-other', locale='en')|striptags }}">
-              {{ ftl('newsletters-other') }}<br>
-              <textarea cols="35" rows="3" name="reason-text"></textarea>
+              {{ ftl('newsletters-other-v2', fallback='newsletters-other') }}<br>
+              <textarea id="unsub99-reason-text" cols="35" rows="3" name="reason-text" maxlength="500"></textarea>
             </label>
             <div class="mzp-c-button-container mzp-l-align-center">
               <button type="submit" id="newsletter-updated-form-submit" class="mzp-c-button">{{ ftl('newsletters-submit') }}</button>

l10n/en/mozorg/newsletters.ftl

@@ -102,7 +102,11 @@ newsletters-send-me-a-link = Send me a link
 newsletters-youve-been-unsubscribed = You’ve been unsubscribed.
 newsletters-were-sorry-to-see-you-go = We’re sorry to see you go.
 newsletters-would-you-mind-telling-us = Would you mind telling us why you’re leaving?
+newsletters-other-v2 = Other… (maximum 500 characters)
+
+# Outdated string
 newsletters-other = Other…
+
 newsletters-submit = Submit
 newsletters-thanks-for-telling-us-why = Thanks for telling us why you’re leaving.
 newsletters-while-here-why-not-check = While here, why not check out some more { -brand-name-firefox } awesomeness.

media/js/newsletter/form-utils.es6.js

@@ -134,7 +134,7 @@ function serialize(form) {
  */
 function stripHTML(text) {
     const div = document.createElement('div');
-    div.innerHTML = text;
+    div.innerHTML = decodeURIComponent(text);
     return div.textContent;
 }
 

tests/unit/spec/newsletter/form-utils.js

@@ -6,7 +6,8 @@
 
 import {
     checkEmailValidity,
-    serialize
+    serialize,
+    stripHTML
 } from '../../../../media/js/newsletter/form-utils.es6';
 
 describe('checkEmailValidity', function () {
@@ -63,3 +64,21 @@ describe('serialize', function () {
         ).toEqual('');
     });
 });
+
+describe('stripHTML', function () {
+    it('should strip HTML tags from strings as expected', function () {
+        expect(stripHTML('This string should not contain HTML.')).toEqual(
+            'This string should not contain HTML.'
+        );
+        expect(
+            stripHTML(
+                'This string<script></script> should <strong>not</strong> contain <br>HTML<img src="/img/placeholder.png" />.'
+            )
+        ).toEqual('This string should not contain HTML.');
+        expect(
+            stripHTML(
+                'This%20string%3Cscript%3E%3C%2Fscript%3E%20should%20%3Cstrong%3Enot%3C%2Fstrong%3E%20contain%20%3Cbr%3EHTML%3Cimg%20src%3D%22%2Fimg%2Fplaceholder.png%22%20%2F%3E.'
+            )
+        ).toEqual('This string should not contain HTML.');
+    });
+});

tests/unit/spec/newsletter/unsubscribed.js

@@ -48,8 +48,8 @@ describe('UnsubscribedEmailForm', function () {
 
             <label>
                 <input type="checkbox" id="unsub99" name="reason-text-p" value="Other…">
-                Other…<br>
-                <textarea cols="35" rows="3" name="reason-text"></textarea>
+                Other… (maximum 500 characters)<br>
+                <textarea id="unsub99-reason-text" cols="35" rows="3" name="reason-text"></textarea>
             </label>
             <div class="mzp-c-button-container mzp-l-align-center">
                 <button type="submit" id="newsletter-updated-form-submit" class="mzp-c-button">Submit</button>
@@ -88,6 +88,8 @@ describe('UnsubscribedEmailForm', function () {
             spyOn(UnsubscribedEmailForm, 'handleFormSuccess').and.callThrough();
             UnsubscribedEmailForm.init();
             document.getElementById('unsub0').click();
+            document.getElementById('unsub99').click();
+            document.getElementById('unsub99-reason-text').value = 'Test';
             document.getElementById('newsletter-updated-form-submit').click();
             xhrRequests[0].respond(
                 200,
@@ -96,7 +98,7 @@ describe('UnsubscribedEmailForm', function () {
             );
 
             expect(xhrRequests[0].requestBody).toEqual(
-                'token=1234567890&reason=You%20send%20too%20many%20emails.'
+                'token=1234567890&reason=You%20send%20too%20many%20emails.%0A%0AOther%E2%80%A6%0A%0ATest'
             );
             expect(UnsubscribedEmailForm.handleFormSuccess).toHaveBeenCalled();
             expect(