FIX: allows {{d-button}} to set a form attribute (#7056)

This attribute is used when a submit button is out of a form. It makes it explicit which form this button is submitting.

It's currently used in our login modal form.

app/assets/javascripts/discourse/components/d-button.js.es6

@@ -4,9 +4,12 @@ export default Ember.Component.extend({
   // subclasses need this
   layoutName: "components/d-button",
 
+  form: null,
+
   tagName: "button",
   classNameBindings: [":btn", "noText", "btnType"],
   attributeBindings: [
+    "form",
     "disabled",
     "translatedTitle:title",
     "translatedLabel:aria-label",

app/assets/javascripts/discourse/templates/modal/login.hbs

@@ -37,11 +37,13 @@
 
   <div class="modal-footer">
     {{#if canLoginLocal}}
-      {{d-button action=(action "login")
-          icon="unlock"
-          label=loginButtonLabel
-          disabled=loginDisabled
-          class='btn btn-large btn-primary'}}
+      {{d-button
+        action=(action "login")
+        form="login-form"
+        icon="unlock"
+        label=loginButtonLabel
+        disabled=loginDisabled
+        class='btn btn-large btn-primary'}}
 
       {{#if showSignupLink}}
         <button class="btn btn-large" id="new-account-link" {{action "createAccount"}}>

test/javascripts/components/d-button-test.js.es6

@@ -35,3 +35,11 @@ componentTest("text only button", {
     assert.ok(this.$("button span.d-button-label").length, "it has the label");
   }
 });
+
+componentTest("form attribute", {
+  template: '{{d-button form="login-form"}}',
+
+  test(assert) {
+    assert.ok(exists("button[form=login-form]"), "it has the form attribute");
+  }
+});