Add abstract SettingsModal component in admin app

Makes building settings modals (that update basic config values) a
whole lot quicker/easier.

CHANGELOG.md

@@ -8,6 +8,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - API to set asset compiler filename.
 - Migration generator, available via generate:migration console command.
 - Tags: Ability to set the tags page as the home page.
+- `bidi` attribute for Mithril elements as a shortcut to set up bidirectional bindings.
+- Abstract SettingsModal component for quickly building admin config modals.
 
 ### Changed
 - Migrations must be namespaced under `Flarum\Migrations\{Core|ExtensionName}`. ([#422](https://github.com/flarum/core/issues/422))

js/admin/src/components/SettingsModal.js

@@ -0,0 +1,78 @@
+import Modal from 'flarum/components/Modal';
+import Button from 'flarum/components/Button';
+import saveConfig from 'flarum/utils/saveConfig';
+
+export default class SettingsModal extends Modal {
+  init() {
+    this.settings = {};
+    this.loading = false;
+  }
+
+  form() {
+    return '';
+  }
+
+  content() {
+    return (
+      <div className="Modal-body">
+        <div className="Form">
+          {this.form()}
+
+          <div className="Form-group">
+            {this.submitButton()}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  submitButton() {
+    return (
+      <Button
+        type="submit"
+        className="Button Button--primary"
+        loading={this.loading}
+        disabled={!this.changed()}>
+        Save Changes
+      </Button>
+    );
+  }
+
+  setting(key, fallback = '') {
+    this.settings[key] = this.settings[key] || m.prop(app.config[key] || fallback);
+
+    return this.settings[key];
+  }
+
+  dirty() {
+    const dirty = {};
+
+    Object.keys(this.settings).forEach(key => {
+      const value = this.settings[key]();
+
+      if (value !== app.config[key]) {
+        dirty[key] = value;
+      }
+    });
+
+    return dirty;
+  }
+
+  changed() {
+    return Object.keys(this.dirty()).length;
+  }
+
+  onsubmit(e) {
+    e.preventDefault();
+
+    this.loading = true;
+
+    saveConfig(this.dirty()).then(
+      () => this.hide(),
+      () => {
+        this.loading = false;
+        m.redraw();
+      }
+    );
+  }
+}