Issue #2288. Add details and submit_type hidden inputs via form templ…

…ate.

And update their values via JS.

tests/unit/test_urls.py

@@ -159,7 +159,7 @@ def test_new_issue_should_not_crash(self):
         """/issues/new POST exit with 400 if missing parameters."""
         data = {'problem_category': u'mobile_site_bug',
                 'description': u'foo',
-                'submit-type': u'github-proxy-report',
+                'submit_type': u'github-proxy-report',
                 'url': u'http://example.com',
                 'os': u'Foobar',
                 'browser': u'BarFoo'}

webcompat/form.py

@@ -21,6 +21,7 @@
 from flask_wtf.file import FileAllowed
 from flask_wtf.file import FileField
 from flask_wtf import FlaskForm
+from wtforms import HiddenField
 from wtforms import RadioField
 from wtforms import StringField
 from wtforms import TextAreaField
@@ -88,6 +89,8 @@ class IssueForm(FlaskForm):
     image = FileField(u'Attach a screenshot image',
                       [Optional(),
                        FileAllowed(Upload.ALLOWED_FORMATS, image_message)])
+    details = HiddenField()
+    submit_type = HiddenField(default="submitanon")
 
 
 def get_form(ua_header):
@@ -108,7 +111,7 @@ def get_details(details_string):
     try:
         details = json.loads(content)
         rv = ''.join(['<li>{k}: {v}</li>'.format(k=k, v=get_str_value(v))
-                     for k, v in details.items()])
+                      for k, v in details.items()])
     except ValueError:
         return content
     return rv
@@ -206,7 +209,7 @@ def normalize_metadata(metadata_value):
         metadata_value = normalize_metadata(metadata_value)
     # Let's avoid html tags in
     if ('<' or '>') in metadata_value and '-->' not in metadata_value:
-            metadata_value = ''
+        metadata_value = ''
     if len(metadata_value) > 200:
         metadata_value = ''
     return metadata_value.strip()

webcompat/static/js/lib/bugform.js

@@ -6,6 +6,7 @@
 
 function BugForm() {
   this.clickedButton = null;
+  this.detailsInput = $("#details:hidden");
   this.errorLabel = $(".js-error-upload");
   this.form = $("#js-ReportForm form");
   this.hasImage = null;
@@ -14,6 +15,7 @@ function BugForm() {
   this.reportButton = $("#js-ReportBug");
   this.removeBanner = $(".js-remove-upload");
   this.submitButtons = $("#js-ReportForm .js-Button");
+  this.submitTypeInput = $("#submit_type:hidden");
   this.uploadLabel = $(".js-label-upload");
   this.uploadLoader = $(".js-image-loader");
 
@@ -212,14 +214,12 @@ function BugForm() {
   };
 
   this.addDetails = function(detailsParam) {
-    var input = document.createElement("input");
-    input.type = "hidden";
-    input.name = "details";
     // The content of the details param may be encoded via
     // application/x-www-form-urlencoded, so we need to change the
     // + (SPACE) to %20 before decoding
-    input.value = decodeURIComponent(detailsParam.replace(/\+/g, "%20"));
-    this.form.get(0).appendChild(input);
+    this.detailsInput.val(
+      decodeURIComponent(detailsParam.replace(/\+/g, "%20"))
+    );
   };
 
   this.storeClickedButton = function(event) {
@@ -586,12 +586,8 @@ function BugForm() {
     var formEl = this.form.get(0);
     // Calling submit() manually on the form won't contain details
     // about which <button> was clicked (since one wasn't clicked).
-    // So we create a hidden <input> to pass along in the form data.
-    var hiddenEl = document.createElement("input");
-    hiddenEl.type = "hidden";
-    hiddenEl.name = "submit-type";
-    hiddenEl.value = this.clickedButton;
-    formEl.appendChild(hiddenEl);
+    // So we send that with the form data via a hidden input.
+    this.submitTypeInput.val(this.clickedButton);
     formEl.submit();
     dfd.resolve();
     return dfd.promise();

webcompat/templates/home-page/form.html

@@ -118,18 +118,14 @@ <h1 class="headline-1">Report Site Issue</h1>
       <button
         class="button button-secondary js-Button"
         id="submitanon"
-        name="submit-type"
         type="submit"
-        value="github-proxy-report"
       >
         Report Anonymously
       </button>
       <button
         class="button button-primary right js-Button"
         id="submitgithub"
-        name="submit-type"
         type="submit"
-        value="github-auth-report"
       >
         {% if session.username %}Report as {{ session.username }}{% else %}Report via GitHub{% endif %}
       </button>

webcompat/views.py

@@ -193,7 +193,7 @@ def create_issue():
         # if one essential is missing, it's a bad request
         must_parameters = set(['url', 'problem_category', 'description',
                                'os', 'browser',
-                               'username', 'submit-type'])
+                               'username', 'submit_type'])
         if not must_parameters.issubset(form.keys()):
             abort(400)
     else:
@@ -221,7 +221,7 @@ def create_issue():
     log.info('{ip} {url}'.format(ip=request.remote_addr,
                                  url=form['url'].encode('utf-8')))
     # form submission for 3 scenarios: authed, to be authed, anonymous
-    if form.get('submit-type') == AUTH_REPORT:
+    if form.get('submit_type') == AUTH_REPORT:
         if g.user:  # If you're already authed, submit the bug.
             response = report_issue(form)
             session['show_thanks'] = True
@@ -230,7 +230,7 @@ def create_issue():
         else:  # Stash form data into session, go do GitHub auth
             session['form_data'] = form
             return redirect(url_for('login'))
-    elif form.get('submit-type') == PROXY_REPORT:
+    elif form.get('submit_type') == PROXY_REPORT:
         response = report_issue(form, proxy=True).json()
         session['show_thanks'] = True
         return redirect(url_for('show_issue', number=response.get('number')))