UX: Use a template for the `d-modal` component

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

@@ -1,10 +1,20 @@
 import { on } from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
-  elementId: 'discourse-modal',
-  classNameBindings: [':modal', 'modalClass'],
+  classNameBindings: [':modal', ':d-modal', 'modalClass', 'modalStyle'],
   attributeBindings: ['data-keyboard'],
 
+  init() {
+    this._super(...arguments);
+
+    // If we need to render a second modal for any reason, we can't
+    // use `elementId`
+    if (this.get('modalStyle') !== 'inline-modal') {
+      this.set('elementId', 'discourse-modal');
+      this.set('modalStyle', 'popup-modal');
+    }
+  },
+
   // We handle ESC ourselves
   'data-keyboard': 'false',
 

app/assets/javascripts/discourse/templates/components/d-modal.hbs

@@ -0,0 +1,24 @@
+<div class="modal-outer-container">
+  <div class="modal-middle-container">
+    <div class="modal-inner-container">
+      <div class="modal-header">
+        <div class='modal-close'>
+          <a class="close" {{action closeModal}}>{{d-icon "times"}}</a>
+        </div>
+
+        <h3>{{title}}</h3>
+      </div>
+
+      <div id='modal-alert'></div>
+
+      {{yield}}
+
+      {{#each errors as |error|}}
+        <div class="alert alert-error">
+          <button class="close" data-dismiss="alert">×</button>
+          {{error}}
+        </div>
+      {{/each}}
+    </div>
+  </div>
+</div>

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

@@ -1,24 +1,10 @@
-{{#d-modal modalClass=modalClass title=title class="hidden"}}
-  <div class="modal-outer-container">
-    <div class="modal-middle-container">
-      <div class="modal-inner-container">
-        <div class="modal-header">
-          <div class='modal-close'>
-            <a class="close" {{action "closeModal"}}>{{d-icon "times"}}</a>
-          </div>
+{{#d-modal
+  modalClass=modalClass
+  title=title
+  class="hidden"
+  errors=errors
+  closeModal=(route-action "closeModal")}}
 
-          <h3>{{title}}</h3>
-        </div>
+  {{outlet "modalBody"}}
 
-        <div id='modal-alert'></div>
-        {{outlet "modalBody"}}
-        {{#each errors as |error|}}
-          <div class="alert alert-error">
-            <button class="close" data-dismiss="alert">×</button>
-            {{error}}
-          </div>
-        {{/each}}
-      </div>
-    </div>
-  </div>
 {{/d-modal}}