Remove modal responsibility for loading UI; using loading button state

js/admin/src/components/EditGroupModal.js

@@ -63,7 +63,7 @@ export default class EditGroupModal extends Modal {
             {Button.component({
               type: 'submit',
               className: 'Button Button--primary EditGroupModal-save',
-              loading: this._loading,
+              loading: this.loading,
               children: 'Save Changes'
             })}
             {this.group.exists && this.group.id() !== Group.ADMINISTRATOR_ID ? (
@@ -80,7 +80,7 @@ export default class EditGroupModal extends Modal {
   onsubmit(e) {
     e.preventDefault();
 
-    this._loading = true;
+    this.loading = true;
 
     this.group.save({
       nameSingular: this.nameSingular(),
@@ -90,7 +90,7 @@ export default class EditGroupModal extends Modal {
     }).then(
       () => this.hide(),
       () => {
-        this._loading = false;
+        this.loading = false;
         m.redraw();
       }
     );

js/forum/src/components/ChangeEmailModal.js

@@ -1,4 +1,5 @@
 import Modal from 'flarum/components/Modal';
+import Button from 'flarum/components/Button';
 
 /**
  * The `ChangeEmailModal` component shows a modal dialog which allows the user
@@ -60,9 +61,12 @@ export default class ChangeEmailModal extends Modal {
               disabled={this.loading}/>
           </div>
           <div className="Form-group">
-            <button type="submit" className="Button Button--primary Button--block" disabled={this.loading}>
+            {Button.component({
-              {app.trans('core.save_changes')}
+              className: 'Button Button--primary Button--block',
-            </button>
+              type: 'submit',
+              loading: this.loading,
+              children: app.trans('core.save_changes')
+            })}
           </div>
         </div>
       </div>

js/forum/src/components/ChangePasswordModal.js

@@ -1,4 +1,5 @@
 import Modal from 'flarum/components/Modal';
+import Button from 'flarum/components/Button';
 
 /**
  * The `ChangePasswordModal` component shows a modal dialog which allows the
@@ -19,9 +20,12 @@ export default class ChangePasswordModal extends Modal {
         <div className="Form Form--centered">
           <p className="helpText">{app.trans('core.change_password_help')}</p>
           <div className="Form-group">
-            <button type="submit" className="Button Button--primary Button--block" disabled={this.loading}>
+            {Button.component({
-              {app.trans('core.send_password_reset_email')}
+              className: 'Button Button--primary Button--block',
-            </button>
+              type: 'submit',
+              loading: this.loading,
+              children: app.trans('core.send_password_reset_email')
+            })}
           </div>
         </div>
       </div>

js/forum/src/components/DeleteAccountModal.js

@@ -1,4 +1,5 @@
 import Modal from 'flarum/components/Modal';
+import Button from 'flarum/components/Button';
 
 /**
  * The `DeleteAccountModal` component shows a modal dialog which allows the user
@@ -44,11 +45,13 @@ export default class DeleteAccountModal extends Modal {
               oninput={m.withAttr('value', this.confirmation)}/>
           </div>
           <div className="Form-group">
-            <button type="submit"
+            {Button.component({
-              className="Button Button--primary Button--block"
+              className: 'Button Button--primary Button--block',
-              disabled={this.loading || this.confirmation() !== 'DELETE'}>
+              type: 'submit',
-              Delete Account
+              loading: this.loading,
-            </button>
+              disabled: this.confirmation() !== 'DELETE',
+              children: app.trans('core.delete_account')
+            })}
           </div>
         </div>
       </div>

js/forum/src/components/ForgotPasswordModal.js

@@ -1,5 +1,6 @@
 import Modal from 'flarum/components/Modal';
 import Alert from 'flarum/components/Alert';
+import Button from 'flarum/components/Button';
 
 /**
  * The `ForgotPasswordModal` component displays a modal which allows the user to
@@ -65,9 +66,12 @@ export default class ForgotPasswordModal extends Modal {
               disabled={this.loading} />
           </div>
           <div className="Form-group">
-            <button type="submit" className="Button Button--primary Button--block" disabled={this.loading}>
+            {Button.component({
-              {app.trans('core.recover_password')}
+              className: 'Button Button--primary Button--block',
-            </button>
+              type: 'submit',
+              loading: this.loading,
+              children: app.trans('core.recover_password')
+            })}
           </div>
         </div>
       </div>

js/forum/src/components/LogInModal.js

@@ -2,6 +2,7 @@ import Modal from 'flarum/components/Modal';
 import ForgotPasswordModal from 'flarum/components/ForgotPasswordModal';
 import SignUpModal from 'flarum/components/SignUpModal';
 import Alert from 'flarum/components/Alert';
+import Button from 'flarum/components/Button';
 
 /**
  * The `LogInModal` component displays a modal dialog with a login form.
@@ -57,11 +58,12 @@ export default class LogInModal extends Modal {
           </div>
 
           <div className="Form-group">
-            <button className="Button Button--primary Button--block"
+            {Button.component({
-              type="submit"
+              className: 'Button Button--primary Button--block',
-              disabled={this.loading}>
+              type: 'submit',
-              Log In
+              loading: this.loading,
-            </button>
+              children: app.trans('core.log_in')
+            })}
           </div>
         </div>
       </div>,

js/forum/src/components/SignUpModal.js

@@ -1,6 +1,7 @@
 import Modal from 'flarum/components/Modal';
 import LogInModal from 'flarum/components/LogInModal';
 import avatar from 'flarum/helpers/avatar';
+import Button from 'flarum/components/Button';
 
 /**
  * The `SignUpModal` component displays a modal dialog with a singup form.
@@ -88,11 +89,12 @@ export default class SignUpModal extends Modal {
         </div>
 
         <div className="Form-group">
-          <button className="Button Button--primary Button--block"
+          {Button.component({
-            type="submit"
+            className: 'Button Button--primary Button--block',
-            disabled={this.loading}>
+            type: 'submit',
-            {app.trans('core.sign_up')}
+            loading: this.loading,
-          </button>
+            children: app.trans('core.sign_up')
+          })}
         </div>
       </div>
     )];

js/lib/components/Modal.js

@@ -1,5 +1,4 @@
 import Component from 'flarum/Component';
-import LoadingIndicator from 'flarum/components/LoadingIndicator';
 import Alert from 'flarum/components/Alert';
 import Button from 'flarum/components/Button';
 
@@ -19,13 +18,6 @@ export default class Modal extends Component {
      * @type {Alert}
      */
     this.alert = null;
-
-    /**
-     * Whether or not the form is processing.
-     *
-     * @type {Boolean}
-     */
-    this.loading = false;
   }
 
   view() {
@@ -54,10 +46,6 @@ export default class Modal extends Component {
             {this.content()}
           </form>
         </div>
-
-        {LoadingIndicator.component({
-          className: 'Modal-loading ' + (this.loading ? 'active' : '')
-        })}
       </div>
     );
   }

less/lib/Button.less

@@ -93,7 +93,6 @@
   .LoadingIndicator {
     color: inherit;
     margin: 0 -10px 0 -15px;
-    float: right;
   }
   &.loading {
     .Button-label {