Massive JavaScript cleanup

- Use JSX for templates
- Docblock/comment everything
- Mostly passes ESLint (still some work to do)
- Lots of renaming, refactoring, etc.

CSS hasn't been updated yet.

js/forum/src/components/SettingsPage.js

@@ -0,0 +1,145 @@
+import UserPage from 'flarum/components/UserPage';
+import ItemList from 'flarum/utils/ItemList';
+import Switch from 'flarum/components/Switch';
+import Button from 'flarum/components/Button';
+import FieldSet from 'flarum/components/FieldSet';
+import NotificationGrid from 'flarum/components/NotificationGrid';
+import ChangePasswordModal from 'flarum/components/ChangePasswordModal';
+import ChangeEmailModal from 'flarum/components/ChangeEmailModal';
+import DeleteAccountModal from 'flarum/components/DeleteAccountModal';
+import listItems from 'flarum/helpers/listItems';
+
+/**
+ * The `SettingsPage` component displays the user's settings control panel, in
+ * the context of their user profile.
+ */
+export default class SettingsPage extends UserPage {
+  constructor(...args) {
+    super(...args);
+
+    this.init(app.session.user);
+    app.setTitle('Settings');
+    app.drawer.hide();
+  }
+
+  content() {
+    return (
+      <div className="settings">
+        <ul>{listItems(this.settingsItems().toArray())}</ul>
+      </div>
+    );
+  }
+
+  /**
+   * Build an item list for the user's settings controls.
+   *
+   * @return {ItemList}
+   */
+  settingsItems() {
+    const items = new ItemList();
+
+    items.add('account',
+      FieldSet.component({
+        label: 'Account',
+        className: 'settings-account',
+        children: this.accountItems().toArray()
+      })
+    );
+
+    items.add('notifications',
+      FieldSet.component({
+        label: 'Notifications',
+        className: 'settings-account',
+        children: [NotificationGrid.component({user: this.user})]
+      })
+    );
+
+    items.add('privacy',
+      FieldSet.component({
+        label: 'Privacy',
+        className: 'settings-privacy',
+        children: this.privacyItems().toArray()
+      })
+    );
+
+    return items;
+  }
+
+  /**
+   * Build an item list for the user's account settings.
+   *
+   * @return {ItemList}
+   */
+  accountItems() {
+    const items = new ItemList();
+
+    items.add('changePassword',
+      Button.component({
+        children: 'Change Password',
+        className: 'btn btn-default',
+        onclick: () => app.modal.show(new ChangePasswordModal())
+      })
+    );
+
+    items.add('changeEmail',
+      Button.component({
+        children: 'Change Email',
+        className: 'btn btn-default',
+        onclick: () => app.modal.show(new ChangeEmailModal())
+      })
+    );
+
+    items.add('deleteAccount',
+      Button.component({
+        children: 'Delete Account',
+        className: 'btn btn-default btn-danger',
+        onclick: () => app.modal.show(new DeleteAccountModal())
+      })
+    );
+
+    return items;
+  }
+
+  /**
+   * Generate a callback that will save a value to the given preference.
+   *
+   * @param {String} key
+   * @return {Function}
+   */
+  preferenceSaver(key) {
+    return (value, component) => {
+      const preferences = this.user.preferences();
+      preferences[key] = value;
+
+      if (component) component.loading = true;
+      m.redraw();
+
+      this.user.save({preferences}).then(() => {
+        if (component) component.loading = false;
+        m.redraw();
+      });
+    };
+  }
+
+  /**
+   * Build an item list for the user's privacy settings.
+   *
+   * @return {ItemList}
+   */
+  privacyItems() {
+    const items = new ItemList();
+
+    items.add('discloseOnline',
+      Switch.component({
+        children: 'Allow others to see when I am online',
+        state: this.user.preferences().discloseOnline,
+        onchange: (value, component) => {
+          this.user.pushAttributes({lastSeenTime: null});
+          this.preferenceSaver('discloseOnline')(value, component);
+        }
+      })
+    );
+
+    return items;
+  }
+}