Webpack (#18)

See https://github.com/flarum/core/pull/1367

* Replace gulp with webpack and npm scripts for JS compilation
* Set up Travis CI to commit compiled JS
* Restructure `js` directory; only one instance of npm, forum/admin are "submodules"
* Restructure `less` directory

extensions/suspend/js/src/admin/index.js

@@ -0,0 +1,13 @@
+import { extend } from 'flarum/extend';
+import app from 'flarum/app';
+import PermissionGrid from 'flarum/components/PermissionGrid';
+
+app.initializers.add('suspend', () => {
+  extend(PermissionGrid.prototype, 'moderateItems', items => {
+    items.add('suspendUsers', {
+      icon: 'fas fa-ban',
+      label: app.translator.trans('flarum-suspend.admin.permissions.suspend_users_label'),
+      permission: 'user.suspend'
+    });
+  });
+});

extensions/suspend/js/src/forum/components/SuspendUserModal.js

@@ -0,0 +1,103 @@
+import Modal from 'flarum/components/Modal';
+import Button from 'flarum/components/Button';
+
+export default class SuspendUserModal extends Modal {
+  init() {
+    super.init();
+
+    let until = this.props.user.suspendUntil();
+    let status = null;
+
+    if (new Date() > until) until = null;
+
+    if (until) {
+      if (until.getFullYear() === 9999) status = 'indefinitely';
+      else status = 'limited';
+    }
+
+    this.status = m.prop(status);
+    this.daysRemaining = m.prop(status === 'limited' && -moment().diff(until, 'days') + 1);
+  }
+
+  className() {
+    return 'SuspendUserModal Modal--small';
+  }
+
+  title() {
+    return app.translator.trans('flarum-suspend.forum.suspend_user.title', {user: this.props.user});
+  }
+
+  content() {
+    return (
+      <div className="Modal-body">
+        <div className="Form">
+          <div className="Form-group">
+            <label>{app.translator.trans('flarum-suspend.forum.suspend_user.status_heading')}</label>
+            <div>
+              <label className="checkbox">
+                <input type="radio" name="status" checked={!this.status()} value="" onclick={m.withAttr('value', this.status)}/>
+                {app.translator.trans('flarum-suspend.forum.suspend_user.not_suspended_label')}
+              </label>
+
+              <label className="checkbox">
+                <input type="radio" name="status" checked={this.status() === 'indefinitely'} value='indefinitely' onclick={m.withAttr('value', this.status)}/>
+                {app.translator.trans('flarum-suspend.forum.suspend_user.indefinitely_label')}
+              </label>
+
+              <label className="checkbox SuspendUserModal-days">
+                <input type="radio" name="status" checked={this.status() === 'limited'} value='limited' onclick={e => {
+                  this.status(e.target.value);
+                  m.redraw(true);
+                  this.$('.SuspendUserModal-days-input input').select();
+                  m.redraw.strategy('none');
+                }}/>
+                {app.translator.trans('flarum-suspend.forum.suspend_user.limited_time_label')}
+                {this.status() === 'limited' ? (
+                  <div className="SuspendUserModal-days-input">
+                    <input type="number"
+                      min="0"
+                      value={this.daysRemaining()}
+                      oninput={m.withAttr('value', this.daysRemaining)}
+                      className="FormControl"/>
+                    {app.translator.trans('flarum-suspend.forum.suspend_user.limited_time_days_text')}
+                  </div>
+                ) : ''}
+              </label>
+            </div>
+          </div>
+
+          <div className="Form-group">
+            <Button className="Button Button--primary" loading={this.loading} type="submit">
+              {app.translator.trans('flarum-suspend.forum.suspend_user.submit_button')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  onsubmit(e) {
+    e.preventDefault();
+
+    this.loading = true;
+
+    let suspendUntil = null;
+    switch (this.status()) {
+      case 'indefinitely':
+        suspendUntil = new Date('2038-01-01');
+        break;
+
+      case 'limited':
+        suspendUntil = moment().add(this.daysRemaining(), 'days').toDate();
+        break;
+
+      default:
+        // no default
+    }
+
+    this.props.user.save({suspendUntil}).then(
+      () => this.hide(),
+      this.loaded.bind(this)
+    );
+  }
+}

extensions/suspend/js/src/forum/components/UserSuspendedNotification.js

@@ -0,0 +1,25 @@
+import Notification from 'flarum/components/Notification';
+import username from 'flarum/helpers/username';
+import humanTime from 'flarum/helpers/humanTime';
+
+export default class UserSuspendedNotification extends Notification {
+  icon() {
+    return 'ban';
+  }
+
+  href() {
+    return app.route.user(this.props.notification.subject());
+  }
+
+  content() {
+    const notification = this.props.notification;
+    const actor = notification.sender();
+    const suspendUntil = notification.content();
+    const timeReadable = moment(suspendUntil.date).from(notification.time(), true);
+
+    return app.translator.transChoice('flarum-suspend.forum.notifications.user_suspended_text', {
+      actor,
+      timeReadable,
+    });
+  }
+}

extensions/suspend/js/src/forum/components/UserUnsuspendedNotification.js

@@ -0,0 +1,22 @@
+import Notification from 'flarum/components/Notification';
+import username from 'flarum/helpers/username';
+import humanTime from 'flarum/helpers/humanTime';
+
+export default class UserUnsuspendedNotification extends Notification {
+  icon() {
+    return 'ban';
+  }
+
+  href() {
+    return app.route.user(this.props.notification.subject());
+  }
+
+  content() {
+    const notification = this.props.notification;
+    const actor = notification.sender();
+
+    return app.translator.transChoice('flarum-suspend.forum.notifications.user_unsuspended_text', {
+      actor,
+    });
+  }
+}

extensions/suspend/js/src/forum/index.js

@@ -0,0 +1,41 @@
+import { extend } from 'flarum/extend';
+import app from 'flarum/app';
+import UserControls from 'flarum/utils/UserControls';
+import Button from 'flarum/components/Button';
+import Badge from 'flarum/components/Badge';
+import Model from 'flarum/Model';
+import User from 'flarum/models/User';
+
+import SuspendUserModal from './components/SuspendUserModal';
+import UserSuspendedNotification from './components/UserSuspendedNotification';
+import UserUnsuspendedNotification from './components/UserUnsuspendedNotification';
+
+app.initializers.add('flarum-suspend', () => {
+  app.notificationComponents.userSuspended = UserSuspendedNotification;
+  app.notificationComponents.userUnsuspended = UserUnsuspendedNotification;
+
+  User.prototype.canSuspend = Model.attribute('canSuspend');
+  User.prototype.suspendUntil = Model.attribute('suspendUntil', Model.transformDate);
+
+  extend(UserControls, 'moderationControls', (items, user) => {
+    if (user.canSuspend()) {
+      items.add('suspend', Button.component({
+        children: app.translator.trans('flarum-suspend.forum.user_controls.suspend_button'),
+        icon: 'fas fa-ban',
+        onclick: () => app.modal.show(new SuspendUserModal({user}))
+      }));
+    }
+  });
+
+  extend(User.prototype, 'badges', function(items) {
+    const until = this.suspendUntil();
+
+    if (new Date() < until) {
+      items.add('suspended', Badge.component({
+        icon: 'fas fa-ban',
+        type: 'suspended',
+        label: app.translator.trans('flarum-suspend.forum.user_badge.suspended_tooltip')
+      }));
+    }
+  });
+});