Issue 3257 - Create uninstallation page in adblockplus.org (use GET http request)

pages/uninstalled.tmpl

 title=Adblock Plus has been uninstalled
 template=simple
 
 {% set reasons = [
   ("1v0", "reason-not-installed", "I didn't install Adblock Plus."),
   ("2v0", "reason-slowing-down", "Adblock Plus slowed down my browser."),
   ("3v0", "reason-acceptable-ads", "I don't like the Acceptable Ads program."),
   ("4v0", "reason-see-ads", "Adblock Plus didn't block all ads."),
   ("5v0", "reason-better-adblocker", "I found better ad blocking software."),
   ("6v0", "reason-break-websites", "Adblock Plus breaks websites that I visit.")
@@ skipping 10 matching lines @@
 
       // Create hidden input for GET parameters
       window.location.search.substr(1).split("&").forEach(function(param)
       {
         if (!/.=./.test(param))
           return;
 
         var paramSplit = param.split("=");
         var input = document.createElement("input");
         input.setAttribute("type", "hidden");
         input.setAttribute("name", paramSplit[0]);

[Sebastian Noack, 2015/12/14 14:16:34]

The parameter key can theoretically also include unsafe characters. So you
should use decodeURICompnent here as well.

[saroyanm, 2015/12/14 14:48:12]

Done.

-        input.setAttribute("value", paramSplit[1]);
+        input.setAttribute("value", decodeURIComponent(paramSplit[1]));
         form.appendChild(input);
       });
 
       // Randomly add reasons
       var reasonsContainer = document.getElementById("reasons");
       var reasons = reasonsContainer.getElementsByTagName("li");
       reasons = Array.prototype.slice.call(reasons);
       reasonsContainer.innerHTML = "";
       while (reasons.length)
       {
         var randomIndex = Math.floor(Math.random() * (reasons.length -1));
         var reasonElement = reasons.splice(randomIndex, 1)[0];
         reasonsContainer.appendChild(reasonElement);
       }
 
       var reasonOtherCheckbox = document.getElementById("reason-other");
       reasonOtherCheckbox.addEventListener("change", function()
       {
-        var textArea = document.getElementById("reason-other-input");
-        if (textArea.hasAttribute("class"))
-          textArea.removeAttribute("class")
+        var reasonOther = document.getElementById("reason-other-container");
+        if (reasonOther.hasAttribute("class"))
+          reasonOther.removeAttribute("class")

[Sebastian Noack, 2015/12/14 14:16:34]

How about using |.classList.toggle("hidden")|?

[saroyanm, 2015/12/14 14:48:12]

Done.

         else
-          textArea.setAttribute("class", "hidden");
+          reasonOther.setAttribute("class", "hidden");
+      }, false);
+
+      var reasonOtherInput = document.getElementById("reason-other-input");
+      var maxLength = reasonOtherInput.getAttribute("maxlength");
+      var charCounter = document.getElementById("characters-countdown");
+      charCounter.textContent = maxLength;
+      reasonOtherInput.addEventListener("keyup", function()
+      {
+        charCounter.textContent = maxLength - reasonOtherInput.value.length;
       }, false);
 
       var submitButton = document.getElementById("submit-form");
       submitButton.addEventListener("click", function(event)
       {
         if (!document.querySelector("ul input:checked"))
         {
           event.preventDefault();
           form.setAttribute("class", "error");
         }
         else
         {
           form.submit();
         }
       }, false);
     }
     document.addEventListener("DOMContentLoaded", init, false);
   })();
   </script>
 </head>
 
 <section class="highlighted">
   <h1>{{"Please select the reason(s) why you uninstalled Adblock Plus:"|translate("reasons-header", "Form heading")}}</h1>
-  <form id="reasons-form" action="uninstall-abp-submit" method="post">
+  <form id="reasons-form" action="uninstalled-submit" method="get">
     <ul id="reasons">
       {%- for reasonId, stringId, value in reasons %}
       <li>
         <label>
           <input type="checkbox" name="reason" value="{{reasonId}}" />
           {{value|translate(stringId, "Uninstallation reason")}}
         </label>
       </li>
       {%- endfor %}
       <li>
         <label>
           <input id="reason-other" type="checkbox" name="reason" value="0v0" />
           {{"Other, namely..."|translate("reason-other", "Last uninstallation reason")}}
         </label>
-        <textarea id="reason-other-input" class="hidden" name="reasonOther" placeholder="{{"Please explain why you are uninstalling Adblock Plus"|translate("reason-other-placeholder", "Textarea placeholder text, appears after selecting 'Other, namely...' option")}}"></textarea>
+        <div id="reason-other-container" class="hidden">
+          <textarea id="reason-other-input" name="reasonOther" maxlength="300" placeholder="{{"Please explain why you are uninstalling Adblock Plus"|translate("reason-other-placeholder", "Textarea placeholder text, appears after selecting 'Other, namely...' option")}}"></textarea>
+          <div>
+             {{"Characters remaining:"|translate("countdown-text", "Text of character limit counter appears after selecting 'Other, namely...' option")}}
+             <span id="characters-countdown"></span>
+          </div>
+        </div>
       </li>
     </ul>
     <button id="submit-form">{{"Submit"|translate("submit", "Submit button text")}}</button>
     <span class="error-label">{{"Please select at least one of the options above"|translate("error-msg", "Error message, is being shown after submission if no item selected")}}</span>
   </form>
   <p class="disclaimer">
     {{"By clicking Submit, you are sending your response to Adblock Plus. Please see our <a href='/privacy'>privacy policy</a>."|translate("disclaimer", "Disclaimer below form")}}
   </p>
 </section>