diff --git a/.gitignore b/.gitignore
index d30e961bd..70b6d482e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@ client/coral-framework/graphql/introspection.json
 .idea/
 *.swp
 *.DS_STORE
+.prettierrc.json
 
 coverage/
 test/e2e/reports/
@@ -52,3 +53,4 @@ plugins/*
 !plugins/talk-plugin-slack-notifications
 
 **/node_modules/*
+yarn-error.log
diff --git a/.nodemon.json b/.nodemon.json
index 9077398bc..44b17e9ee 100644
--- a/.nodemon.json
+++ b/.nodemon.json
@@ -1,5 +1,11 @@
 {
+  "exec": "npm-run-all --parallel generate-introspection start:development",
   "verbose": true,
   "ignore": ["test/*", "client/*", "dist/*", "plugins/*/client"],
-  "ext": "js,json,graphql,yml"
+  "ext": "js,json,graphql,yml",
+  "watch": [
+    ".",
+    "bin/cli",
+    "bin/cli-serve"
+  ]
 }
diff --git a/app.js b/app.js
index c180d2c04..225b5b480 100644
--- a/app.js
+++ b/app.js
@@ -6,10 +6,11 @@ const merge = require('lodash/merge');
 const helmet = require('helmet');
 const plugins = require('./services/plugins');
 const compression = require('compression');
-const {HELMET_CONFIGURATION} = require('./config');
-const {MOUNT_PATH} = require('./url');
+const { HELMET_CONFIGURATION } = require('./config');
+const { MOUNT_PATH } = require('./url');
 const routes = require('./routes');
 const debug = require('debug')('talk:app');
+const { ENABLE_TRACING, APOLLO_ENGINE_KEY, PORT } = require('./config');
 
 const app = express();
 
@@ -25,7 +26,7 @@ app.use((req, res, next) => {
 //==============================================================================
 
 // Inject server route plugins.
-plugins.get('server', 'app').forEach(({plugin, app: callback}) => {
+plugins.get('server', 'app').forEach(({ plugin, app: callback }) => {
   debug(`added plugin '${plugin.name}'`);
 
   // Pass the app to the plugin to mount it's routes.
@@ -41,15 +42,35 @@ if (process.env.NODE_ENV !== 'test') {
   app.use(morgan('dev'));
 }
 
+if (ENABLE_TRACING && APOLLO_ENGINE_KEY) {
+  const { Engine } = require('apollo-engine');
+
+  const engine = new Engine({
+    engineConfig: {
+      apiKey: APOLLO_ENGINE_KEY,
+    },
+    graphqlPort: PORT,
+    endpoint: `${MOUNT_PATH}api/v1/graph/ql`,
+  });
+
+  engine.start();
+
+  app.use(engine.expressMiddleware());
+}
+
 // Trust the first proxy in front of us, this will enable us to trust the fact
 // that SSL was terminated correctly.
 app.set('trust proxy', 1);
 
 // Enable a suite of security good practices through helmet. We disable
 // frameguard to allow crossdomain injection of the embed.
-app.use(helmet(merge(HELMET_CONFIGURATION, {
-  frameguard: false,
-})));
+app.use(
+  helmet(
+    merge(HELMET_CONFIGURATION, {
+      frameguard: false,
+    })
+  )
+);
 
 // Compress the responses if appropriate.
 app.use(compression());
diff --git a/bin/cli b/bin/cli
index f618b24be..6237d4740 100755
--- a/bin/cli
+++ b/bin/cli
@@ -4,8 +4,9 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
-const {head, map} = require('lodash');
+require('./util');
+const program = require('commander');
+const { head, map } = require('lodash');
 const Matcher = require('did-you-mean');
 
 program
@@ -25,33 +26,35 @@ program
   .parse(process.argv);
 
 // If the command wasn't found, output help.
-const cmds = map(program.commands, '_name');
-const cmd = head(program.args);
-if (!cmds.includes(cmd)) {
-  const m = new Matcher(cmds);
-  const similarCMDs = m.list(cmd);
+const commands = map(program.commands, '_name');
+const command = head(program.args);
+if (!commands.includes(command)) {
+  const m = new Matcher(commands);
+  const similarCommands = m.list(command);
 
-  console.error(`cli '${cmd}' is not a talk cli command. See 'cli --help'.`);
-  if (similarCMDs.length > 0) {
-    const sc = similarCMDs.map(({value}) => `\t${value}\n`).join('');
+  console.error(
+    `cli '${command}' is not a talk cli command. See 'cli --help'.`
+  );
+  if (similarCommands.length > 0) {
+    const sc = similarCommands.map(({ value }) => `\t${value}\n`).join('');
     console.error(`\nThe most similar commands are\n${sc}`);
   }
   process.exit(1);
 }
 
-/**
- * When this provess exists, check to see if we have a running command, if we do
- * check to see if it is still running. If it is, then kill it with a SIGINT
- * signal. This is for the use case where we want to kill the process that is
- * labled with the PID written out by the parent process.
- */
-process.once('exit', () => {
-  if (
+// /**
+//  * When this process exists, check to see if we have a running command, if we do
+//  * check to see if it is still running. If it is, then kill it with a SIGINT
+//  * signal. This is for the use case where we want to kill the process that is
+//  * labeled with the PID written out by the parent process.
+//  */
+// process.once('exit', () => {
+//   if (
 
-    // program.runningCommand &&
-    program.runningCommand.killed === false &&
-    program.runningCommand.exitCode === null
-  ) {
-    program.runningCommand.kill('SIGINT');
-  }
-});
+//     // program.runningCommand &&
+//     program.runningCommand.killed === false &&
+//     program.runningCommand.exitCode === null
+//   ) {
+//     program.runningCommand.kill('SIGINT');
+//   }
+// });
diff --git a/bin/cli-assets b/bin/cli-assets
index 4805bead0..d14df320b 100755
--- a/bin/cli-assets
+++ b/bin/cli-assets
@@ -4,7 +4,8 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+const util = require('./util');
+const program = require('commander');
 const parseDuration = require('ms');
 const Table = require('cli-table');
 const AssetModel = require('../models/asset');
@@ -12,34 +13,27 @@ const CommentModel = require('../models/comment');
 const AssetsService = require('../services/assets');
 const mongoose = require('../services/mongoose');
 const scraper = require('../services/scraper');
-const util = require('./util');
 const inquirer = require('inquirer');
 
 // Register the shutdown criteria.
-util.onshutdown([
-  () => mongoose.disconnect()
-]);
+util.onshutdown([() => mongoose.disconnect()]);
 
 /**
  * Lists all the assets registered in the database.
  */
 async function listAssets() {
   try {
-    let assets = await AssetModel.find({}).sort({'created_at': 1});
+    let assets = await AssetModel.find({}).sort({ created_at: 1 });
 
     let table = new Table({
-      head: [
-        'ID',
-        'Title',
-        'URL'
-      ]
+      head: ['ID', 'Title', 'URL'],
     });
 
-    assets.forEach((asset) => {
+    assets.forEach(asset => {
       table.push([
         asset.id,
         asset.title ? asset.title : '',
-        asset.url ? asset.url : ''
+        asset.url ? asset.url : '',
       ]);
     });
 
@@ -61,13 +55,13 @@ async function refreshAssets(ageString) {
       $or: [
         {
           scraped: {
-            $lte: age
-          }
+            $lte: age,
+          },
         },
         {
-          scraped: null
-        }
-      ]
+          scraped: null,
+        },
+      ],
     });
 
     // Queue all the assets for scraping.
@@ -95,7 +89,6 @@ async function updateURL(assetID, assetURL) {
 
 async function merge(srcID, dstID) {
   try {
-
     // Grab the assets...
     let [srcAsset, dstAsset] = await AssetsService.findByIDs([srcID, dstID]);
     if (!srcAsset || !dstAsset) {
@@ -103,21 +96,22 @@ async function merge(srcID, dstID) {
     }
 
     // Count the affected resources...
-    let srcCommentCount = await CommentModel.find({asset_id: srcID}).count();
+    let srcCommentCount = await CommentModel.find({ asset_id: srcID }).count();
 
-    console.log(`Now going to update ${srcCommentCount} comments and delete the source Asset[${srcID}].`);
+    console.log(
+      `Now going to update ${srcCommentCount} comments and delete the source Asset[${srcID}].`
+    );
 
-    let {confirm} = await inquirer.prompt([
+    let { confirm } = await inquirer.prompt([
       {
         type: 'confirm',
         name: 'confirm',
         message: 'Proceed with merge',
-        default: false
-      }
+        default: false,
+      },
     ]);
 
     if (confirm) {
-
       // Perform the merge!
       await AssetsService.merge(srcID, dstID);
     } else {
@@ -152,7 +146,9 @@ program
 
 program
   .command('merge <srcID> <dstID>')
-  .description('merges two assets together by moving comments from src to dst and deleting the src asset')
+  .description(
+    'merges two assets together by moving comments from src to dst and deleting the src asset'
+  )
   .action(merge);
 
 program.parse(process.argv);
diff --git a/bin/cli-jobs b/bin/cli-jobs
index 6048a69db..672a5a70d 100755
--- a/bin/cli-jobs
+++ b/bin/cli-jobs
@@ -4,27 +4,22 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+const util = require('./util');
+const program = require('commander');
 const scraper = require('../services/scraper');
 const mailer = require('../services/mailer');
-const util = require('./util');
 const mongoose = require('../services/mongoose');
 const kue = require('../services/kue');
 
-util.onshutdown([
-  () => mongoose.disconnect(),
-]);
+util.onshutdown([() => mongoose.disconnect()]);
 
 /**
  * Starts the job processor.
  */
 function processJobs() {
-
   // The scraper only needs to shutdown when the scraper has actually been
   // started.
-  util.onshutdown([
-    () => kue.Task.shutdown()
-  ]);
+  util.onshutdown([() => kue.Task.shutdown()]);
 
   // Start the scraper processor.
   scraper.process();
@@ -39,13 +34,15 @@ function processJobs() {
  * @return {Promise}
  */
 function removeJob(job) {
-  return new Promise((resolve, reject) => job.remove((err) => {
-    if (err) {
-      return reject(err);
-    }
+  return new Promise((resolve, reject) =>
+    job.remove(err => {
+      if (err) {
+        return reject(err);
+      }
 
-    return resolve(job);
-  }));
+      return resolve(job);
+    })
+  );
 }
 
 /**
@@ -82,17 +79,13 @@ async function getJobBatch(n, includeStuck) {
  * Cleans up the jobs that are in the queue.
  */
 async function cleanupJobs(options) {
-
   // The scraper only needs to shutdown when the scraper has actually been
   // started.
-  util.onshutdown([
-    () => kue.Task.shutdown()
-  ]);
+  util.onshutdown([() => kue.Task.shutdown()]);
 
   const n = 100;
 
   try {
-
     // Connect to redis by establishing a queue.
     kue.Task.connect();
 
@@ -100,9 +93,8 @@ async function cleanupJobs(options) {
     let jobs = await getJobBatch(n, options.stuck);
 
     while (jobs.length > 0) {
-
       // Remove all the jobs.
-      await Promise.all(jobs.map((job) => removeJob(job)));
+      await Promise.all(jobs.map(job => removeJob(job)));
 
       jobCount += jobs.length;
 
diff --git a/bin/cli-migration b/bin/cli-migration
index 036ac8b02..ca93360ad 100755
--- a/bin/cli-migration
+++ b/bin/cli-migration
@@ -4,20 +4,17 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
 const util = require('./util');
+const program = require('commander');
 const inquirer = require('inquirer');
 const mongoose = require('../services/mongoose');
 const MigrationService = require('../services/migration');
 
 // Register shutdown hooks.
-util.onshutdown([
-  () => mongoose.disconnect()
-]);
+util.onshutdown([() => mongoose.disconnect()]);
 
 async function createMigration(name) {
   try {
-
     // Create the migration.
     await MigrationService.create(name);
 
@@ -29,20 +26,20 @@ async function createMigration(name) {
 }
 
 async function runMigrations() {
-
   try {
-
-    let {backedUp} = await inquirer.prompt([
+    let { backedUp } = await inquirer.prompt([
       {
         type: 'confirm',
         name: 'backedUp',
         message: 'Did you perform a database backup',
-        default: false
-      }
+        default: false,
+      },
     ]);
 
     if (!backedUp) {
-      throw new Error('Please backup your databases prior to migrations occuring');
+      throw new Error(
+        'Please backup your databases prior to migrations occuring'
+      );
     }
 
     // Get the migrations to run.
@@ -50,21 +47,20 @@ async function runMigrations() {
 
     console.log('Now going to run the following migrations:\n');
 
-    for (let {filename} of migrations) {
+    for (let { filename } of migrations) {
       console.log(`\tmigrations/${filename}`);
     }
 
-    let {confirm} = await inquirer.prompt([
+    let { confirm } = await inquirer.prompt([
       {
         type: 'confirm',
         name: 'confirm',
         message: 'Proceed with migrations',
-        default: false
-      }
+        default: false,
+      },
     ]);
 
     if (confirm) {
-
       // Run the migrations.
       await MigrationService.run(migrations);
     } else {
diff --git a/bin/cli-plugins b/bin/cli-plugins
index b7e301fce..8609ca5ff 100755
--- a/bin/cli-plugins
+++ b/bin/cli-plugins
@@ -7,7 +7,8 @@
 // Interface heavily inspired by the yarn package manager:
 // https://yarnpkg.com/
 
-const program = require('./commander');
+require('./util');
+const program = require('commander');
 const inquirer = require('inquirer');
 
 // Make things colorful!
@@ -20,11 +21,11 @@ const path = require('path');
 const spawn = require('cross-spawn');
 const semver = require('semver');
 const resolve = require('resolve');
-const {plugins, itteratePlugins, isInternal} = require('../plugins');
+const { plugins, iteratePlugins, isInternal } = require('../plugins');
 
 function existsInNodeModules(name) {
   try {
-    resolve.sync(name, {basedir: dir});
+    resolve.sync(name, { basedir: dir });
 
     return true;
   } catch (e) {
@@ -38,13 +39,13 @@ function versionMatch(name, version) {
 
     resolve.sync(name, {
       basedir: dir,
-      packageFilter: (pkg) => {
+      packageFilter: pkg => {
         if (pkg && pkg.version && semver.satisfies(pkg.version, version)) {
           matched = true;
         }
 
         return pkg;
-      }
+      },
     });
 
     return matched;
@@ -55,7 +56,7 @@ function versionMatch(name, version) {
 
 const EXTERNAL = /^\w[a-z\-0-9.]+$/; // Match "react", "path", "fs", "lodash.random", etc.
 
-function reconcilePackages({quiet = false, upgradeRemote = false}) {
+function reconcilePackages({ quiet = false, upgradeRemote = false }) {
   const fetchable = [];
   const local = [];
   const upgradable = [];
@@ -70,13 +71,14 @@ function reconcilePackages({quiet = false, upgradeRemote = false}) {
   }
 
   for (let i in plugins) {
-    let section = itteratePlugins(plugins[i]);
+    let section = iteratePlugins(plugins[i]);
 
     for (let j in section) {
-      let {name, version} = section[j];
+      let { name, version } = section[j];
 
       let namespaced = name.charAt(0) === '@';
-      let dep = name.split('/')
+      let dep = name
+        .split('/')
         .slice(0, namespaced ? 2 : 1)
         .join('/');
 
@@ -90,7 +92,7 @@ function reconcilePackages({quiet = false, upgradeRemote = false}) {
           console.log(` l  ${name}`);
         }
 
-        local.push({name, version});
+        local.push({ name, version });
         continue;
       }
 
@@ -98,9 +100,8 @@ function reconcilePackages({quiet = false, upgradeRemote = false}) {
         if (!quiet) {
           console.log(` m  ${name}`);
         }
-        fetchable.push({name, version});
+        fetchable.push({ name, version });
       } else if (!versionMatch(dep, version)) {
-
         // A plugin was found, yet the current version does not match the
         // current version installed. We should warn if upgradeRemote is
         // not enabled that it is currently not supported.
@@ -114,14 +115,14 @@ function reconcilePackages({quiet = false, upgradeRemote = false}) {
 
         console.log(` oe ${name} (package upgrade may be required)`);
 
-        upgradable.push({name, version});
+        upgradable.push({ name, version });
       } else {
         if (!quiet) {
           console.log(` e  ${name}`);
         }
 
         if (upgradeRemote) {
-          upgradable.push({name, version});
+          upgradable.push({ name, version });
         }
       }
     }
@@ -131,33 +132,44 @@ function reconcilePackages({quiet = false, upgradeRemote = false}) {
     console.log();
   }
 
-  return {local, fetchable, upgradable};
+  return { local, fetchable, upgradable };
 }
 
-async function reconcileRemotePlugins({skipLocal, dryRun, upgradeRemote}) {
-  console.log(`\n[${skipLocal ? '1/2' : '2/3'}] ${emoji.get('mag')} Reconciling plugins...`.yellow);
-  const {fetchable, upgradable} = reconcilePackages({upgradeRemote});
+async function reconcileRemotePlugins({ skipLocal, dryRun, upgradeRemote }) {
+  console.log(
+    `\n[${skipLocal ? '1/2' : '2/3'}] ${emoji.get(
+      'mag'
+    )} Reconciling plugins...`.yellow
+  );
+  const { fetchable, upgradable } = reconcilePackages({ upgradeRemote });
 
-  console.log(`[${skipLocal ? '2/2' : '3/3'}] ${emoji.get('truck')} Fetching plugins...\n`.yellow);
+  console.log(
+    `[${skipLocal ? '2/2' : '3/3'}] ${emoji.get('truck')} Fetching plugins...\n`
+      .yellow
+  );
 
   if (fetchable.length > 0) {
-
-    console.log(`$ yarn add --ignore-scripts ${fetchable.map(({name, version}) => `${name}@${version}`.cyan)}`);
+    console.log(
+      `$ yarn add --ignore-scripts ${fetchable.map(
+        ({ name, version }) => `${name}@${version}`.cyan
+      )}`
+    );
 
     if (!dryRun) {
-
       let args = [
         'add',
         '--ignore-scripts',
-        ...fetchable.map(({name, version}) => `${name}@${version}`)
+        ...fetchable.map(({ name, version }) => `${name}@${version}`),
       ];
 
       let output = spawn.sync('yarn', args, {
-        stdio: ['ignore', 'pipe', 'inherit']
+        stdio: ['ignore', 'pipe', 'inherit'],
       });
 
       if (output.status) {
-        throw new Error('Could not install external plugins, errors occured during install');
+        throw new Error(
+          'Could not install external plugins, errors occured during install'
+        );
       }
 
       console.log(output.stdout.toString());
@@ -165,36 +177,45 @@ async function reconcileRemotePlugins({skipLocal, dryRun, upgradeRemote}) {
   }
 
   if (upgradable.length > 0) {
-    console.log(`$ yarn upgrade ${upgradable.map(({name, version}) => `${name}@${version}`.cyan)}`);
+    console.log(
+      `$ yarn upgrade ${upgradable.map(
+        ({ name, version }) => `${name}@${version}`.cyan
+      )}`
+    );
 
     if (!dryRun) {
-
       let args = [
         'upgrade',
-        ...upgradable.map(({name, version}) => `${name}@${version}`)
+        ...upgradable.map(({ name, version }) => `${name}@${version}`),
       ];
 
       let output = spawn.sync('yarn', args, {
-        stdio: ['ignore', 'pipe', 'inherit']
+        stdio: ['ignore', 'pipe', 'inherit'],
       });
 
       if (output.status) {
-        throw new Error('Could not install external plugins, errors occured during install');
+        throw new Error(
+          'Could not install external plugins, errors occured during install'
+        );
       }
 
       console.log(output.stdout.toString());
     }
   }
 
-  return {upgradable, fetchable};
+  return { upgradable, fetchable };
 }
 
-async function reconcileLocalPlugins({skipRemote, dryRun}) {
-  console.log(`\n[${skipRemote ? '1/1' : '1/3'}] ${emoji.get('pick')} Installing local plugin dependencies...\n`.yellow);
-  const {local} = reconcilePackages({quiet: true});
+async function reconcileLocalPlugins({ skipRemote, dryRun }) {
+  console.log(
+    `\n[${skipRemote ? '1/1' : '1/3'}] ${emoji.get(
+      'pick'
+    )} Installing local plugin dependencies...\n`.yellow
+  );
+  const { local } = reconcilePackages({ quiet: true });
 
   for (let i in local) {
-    let {name} = local[i];
+    let { name } = local[i];
 
     if (!fs.existsSync(path.join(dir, 'plugins', name, 'package.json'))) {
       continue;
@@ -209,11 +230,13 @@ async function reconcileLocalPlugins({skipRemote, dryRun}) {
 
       let output = spawn.sync('yarn', args, {
         stdio: ['ignore', 'pipe', 'inherit'],
-        cwd: wd
+        cwd: wd,
       });
 
       if (output.status) {
-        throw new Error('Could not install local plugin dependencies, errors occured during install');
+        throw new Error(
+          'Could not install local plugin dependencies, errors occured during install'
+        );
       }
 
       console.log(output.stdout.toString());
@@ -224,7 +247,12 @@ async function reconcileLocalPlugins({skipRemote, dryRun}) {
 // This traverses the local plugins and installs any dependencies listed there,
 // this only is really needed for plugins that are installed via docker because
 // core plugins will have their dependencies already included in core.
-async function reconcilePluginDeps({skipLocal, skipRemote, dryRun, upgradeRemote}) {
+async function reconcilePluginDeps({
+  skipLocal,
+  skipRemote,
+  dryRun,
+  upgradeRemote,
+}) {
   let startTime = new Date();
 
   // We don't need to do anything if we skip everything....
@@ -234,14 +262,19 @@ async function reconcilePluginDeps({skipLocal, skipRemote, dryRun, upgradeRemote
 
   // Traverse local plugins and install dependencies if enabled.
   if (!skipLocal) {
-    await reconcileLocalPlugins({skipRemote, dryRun});
+    await reconcileLocalPlugins({ skipRemote, dryRun });
   }
 
   // Locate any external plugins and install them.
   if (!skipRemote) {
     let results = [];
     try {
-      results = await reconcileRemotePlugins({skipLocal, skipRemote, dryRun, upgradeRemote});
+      results = await reconcileRemotePlugins({
+        skipLocal,
+        skipRemote,
+        dryRun,
+        upgradeRemote,
+      });
     } catch (e) {
       throw e;
     }
@@ -261,7 +294,9 @@ async function reconcilePluginDeps({skipLocal, skipRemote, dryRun, upgradeRemote
     } else if (results.fetchable.length === 0) {
       message = `Upgraded ${results.upgradable.length} new plugins.`;
     } else {
-      message = `Fetched ${results.fetchable.length} new plugins, upgraded ${results.upgradable.length} plugins.`;
+      message = `Fetched ${results.fetchable.length} new plugins, upgraded ${
+        results.upgradable.length
+      } plugins.`;
     }
 
     console.log(`\n${status} ${message}`);
@@ -278,8 +313,7 @@ async function createSeedPlugin() {
 
   function pluginNameExists(pluginName) {
     const pluginNames = fs.readdirSync(pluginsDir);
-    return !!pluginNames
-      .filter((pn) => pn === pluginName).length;
+    return !!pluginNames.filter(pn => pn === pluginName).length;
   }
 
   let answers = await inquirer.prompt([
@@ -287,8 +321,7 @@ async function createSeedPlugin() {
       type: 'input',
       name: 'pluginName',
       message: 'Plugin Name:',
-      validate: (input) => {
-
+      validate: input => {
         if (pluginNameExists(input)) {
           return 'Please, choose another name. That name already exists';
         }
@@ -298,23 +331,23 @@ async function createSeedPlugin() {
         }
 
         return 'Plugin Name is required.';
-      }
+      },
     },
     {
       type: 'confirm',
       name: 'server',
-      message: 'Is this plugin extending the server capabilities?'
+      message: 'Is this plugin extending the server capabilities?',
     },
     {
       type: 'confirm',
       name: 'client',
-      message: 'Is this plugin extending the client capabilities?'
+      message: 'Is this plugin extending the client capabilities?',
     },
     {
       type: 'confirm',
       name: 'addPluginsJson',
-      message: 'Should we add it to the plugins.json?'
-    }
+      message: 'Should we add it to the plugins.json?',
+    },
   ]);
 
   //==============================================================================
@@ -325,41 +358,41 @@ async function createSeedPlugin() {
   const newPluginPath = path.join(pluginsDir, answers.pluginName);
 
   if (fs.existsSync(seedPlugin)) {
-
     if (answers.server && answers.client) {
-
       // This is a server-side and client-side plugin!, let's copy the template
       fs.copySync(seedPlugin, newPluginPath);
-    } else  {
+    } else {
+      fs.copySync(seedPlugin, newPluginPath, {
+        filter: p => {
+          // Allowing plugin folder and files with no subfolders
+          const rootRx = /plugin$|plugin\/[^/]*(\.).{2,3}/gim;
+          if (
+            rootRx.test(p) &&
+            (fs.lstatSync(p).isDirectory() || fs.lstatSync(p).isFile())
+          ) {
+            return true;
+          }
 
-      fs.copySync(seedPlugin, newPluginPath, {filter: (p) => {
+          // If it's a client-side plugin, copying client folder
+          if (answers.client) {
+            return /client/.test(p);
+          }
 
-        // Allowing plugin folder and files with no subfolders
-        const rootRx = /plugin$|plugin\/[^/]*(\.).{2,3}/igm;
-        if (rootRx.test(p) && (fs.lstatSync(p).isDirectory() || fs.lstatSync(p).isFile())) {
-          return true;
-        }
-
-        // If it's a client-side plugin, copying client folder
-        if (answers.client) {
-          return /client/.test(p);
-        }
-
-        // If it's a server-side plugin, copying server folder
-        if (answers.server) {
-          return /server/.test(p);
-        }
-
-      }});
+          // If it's a server-side plugin, copying server folder
+          if (answers.server) {
+            return /server/.test(p);
+          }
+        },
+      });
     }
 
     // Let's add this to the plugins.json
     if (answers.addPluginsJson) {
       const pluginsJson = path.resolve(__dirname, '..', 'plugins.json');
 
-      fs.readJson(pluginsJson)
-        .then((j) => {
-
+      fs
+        .readJson(pluginsJson)
+        .then(j => {
           // This is a client-side plugin, let's push this.
           if (answers.client) {
             j.client.push(answers.pluginName);
@@ -376,14 +409,17 @@ async function createSeedPlugin() {
             fs.writeFileSync(pluginsJson, output);
           }
         })
-        .catch((err) => {
+        .catch(err => {
           console.error(err);
         });
     }
 
-    console.log(`✨ Yay! Plugin created! Find your plugin: ${answers.pluginName} in the ./plugins folder`);
+    console.log(
+      `✨ Yay! Plugin created! Find your plugin: ${
+        answers.pluginName
+      } in the ./plugins folder`
+    );
   }
-
 }
 
 //==============================================================================
@@ -402,9 +438,14 @@ program
 
 program
   .command('reconcile')
-  .description('reconciles local plugin dependencies and downloads external plugins')
+  .description(
+    'reconciles local plugin dependencies and downloads external plugins'
+  )
   .option('-u, --upgrade-remote', 'upgrades remote dependencies')
-  .option('-d, --dry-run', 'does not actually change anything on the filesystem acts only as a simulation')
+  .option(
+    '-d, --dry-run',
+    'does not actually change anything on the filesystem acts only as a simulation'
+  )
   .option('--skip-local', 'skips the local dependancy reconciliation')
   .option('--skip-remote', 'skips the remote plugin reconciliation')
   .action(reconcilePluginDeps);
diff --git a/bin/cli-serve b/bin/cli-serve
index 723558651..b8dbd4594 100755
--- a/bin/cli-serve
+++ b/bin/cli-serve
@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
-const program = require('./commander');
 const util = require('./util');
+const program = require('commander');
 const serve = require('../serve');
 
 //==============================================================================
@@ -10,12 +10,14 @@ const serve = require('../serve');
 
 program
   .option('-j, --jobs', 'enable job processing on this thread')
-  .option('-w, --websockets', 'enable the websocket (subscriptions) handler on this thread')
+  .option(
+    '-w, --websockets',
+    'enable the websocket (subscriptions) handler on this thread'
+  )
   .parse(process.argv);
 
 // Start serving.
-serve({jobs: program.jobs, websockets: program.websockets}).catch((err) => {
+serve({ jobs: program.jobs, websockets: program.websockets }).catch(err => {
   console.error(err);
   util.shutdown(1);
 });
-
diff --git a/bin/cli-settings b/bin/cli-settings
index f8768046c..7f449e0d5 100755
--- a/bin/cli-settings
+++ b/bin/cli-settings
@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
-const program = require('./commander');
+const util = require('./util');
+const program = require('commander');
 const inquirer = require('inquirer');
 const mongoose = require('../services/mongoose');
 const SettingsService = require('../services/settings');
-const util = require('./util');
 
 // Register the shutdown criteria.
 util.onshutdown([() => mongoose.disconnect()]);
@@ -16,12 +16,12 @@ async function changeOrgName() {
   try {
     let settings = await SettingsService.retrieve();
 
-    let {organizationName} = await inquirer.prompt([
+    let { organizationName } = await inquirer.prompt([
       {
         name: 'organizationName',
         message: 'Organization Name',
-        default: settings.organizationName
-      }
+        default: settings.organizationName,
+      },
     ]);
 
     if (settings.organizationName !== organizationName) {
diff --git a/bin/cli-setup b/bin/cli-setup
index c7a44c453..b0f5e2efa 100755
--- a/bin/cli-setup
+++ b/bin/cli-setup
@@ -4,7 +4,8 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+const util = require('./util');
+const program = require('commander');
 const inquirer = require('inquirer');
 const mongoose = require('../services/mongoose');
 const SettingModel = require('../models/setting');
@@ -12,13 +13,10 @@ const MODERATION_OPTIONS = require('../models/enum/moderation_options');
 const SettingsService = require('../services/settings');
 const SetupService = require('../services/setup');
 const UsersService = require('../services/users');
-const util = require('./util');
 const errors = require('../errors');
 
 // Register the shutdown criteria.
-util.onshutdown([
-  () => mongoose.disconnect()
-]);
+util.onshutdown([() => mongoose.disconnect()]);
 
 //==============================================================================
 // Setting up the program command line arguments.
@@ -34,19 +32,15 @@ program
 //==============================================================================
 
 const performSetup = async () => {
-
   // Get the current settings, we are expecing an error here.
   try {
-
     // Try to get the settings.
     await SettingsService.retrieve();
 
     // We should NOT have gotten a settings object, this means that the
     // application is already setup. Error out here.
     throw errors.ErrSettingsInit;
-
   } catch (e) {
-
     // If the error is `not init`, then we're good, otherwise, it's something
     // else.
     if (e !== errors.ErrSettingsNotInit) {
@@ -66,7 +60,9 @@ const performSetup = async () => {
   // Create the base settings model.
   let settings = new SettingModel();
 
-  console.log('\nWe\'ll ask you some questions in order to setup your installation of Talk.\n');
+  console.log(
+    "\nWe'll ask you some questions in order to setup your installation of Talk.\n"
+  );
 
   let answers = await inquirer.prompt([
     {
@@ -74,31 +70,31 @@ const performSetup = async () => {
       name: 'organizationName',
       message: 'Organization Name',
       default: settings.organizationName,
-      validate: (input) => {
+      validate: input => {
         if (input && input.length > 0) {
           return true;
         }
 
         return 'Organization Name is required.';
-      }
+      },
     },
     {
       type: 'list',
       choices: MODERATION_OPTIONS,
       name: 'moderation',
       default: settings.moderation,
-      message: 'Select a moderation mode'
+      message: 'Select a moderation mode',
     },
     {
       type: 'confirm',
       name: 'requireEmailConfirmation',
       default: settings.requireEmailConfirmation,
-      message: 'Should emails always be confirmed'
+      message: 'Should emails always be confirmed',
     },
   ]);
 
   // Update the settings that were changed.
-  Object.keys(answers).forEach((key) => {
+  Object.keys(answers).forEach(key => {
     if (answers[key] !== undefined) {
       settings[key] = answers[key];
     }
@@ -109,97 +105,93 @@ const performSetup = async () => {
       type: 'confirm',
       name: 'inputWhitelistedDomains',
       default: true,
-      message: 'Would you like to specify a whitelisted domain'
+      message: 'Would you like to specify a whitelisted domain',
     },
     {
       type: 'input',
       name: 'whitelistedDomain',
       message: 'Whitelisted Domain',
-      when: ({inputWhitelistedDomains}) => inputWhitelistedDomains,
-      validate: (input) => {
+      when: ({ inputWhitelistedDomains }) => inputWhitelistedDomains,
+      validate: input => {
         if (input && input.length > 0) {
           return true;
         }
 
         return 'Whitelisted Domain cannot be empty.';
-      }
-    }
+      },
+    },
   ]);
 
   if (answers.inputWhitelistedDomains) {
     settings.domains.whitelist = [answers.whitelistedDomain];
   }
 
-  console.log('\nWe\'ll ask you some questions about your first admin user.\n');
+  console.log("\nWe'll ask you some questions about your first admin user.\n");
 
   let user = await inquirer.prompt([
     {
       type: 'input',
       name: 'username',
       message: 'Username',
-      filter: (username) => {
-        return UsersService
-          .isValidUsername(username, false)
-          .catch((err) => {
-            throw err.message;
-          });
-      }
+      filter: username => {
+        return UsersService.isValidUsername(username, false).catch(err => {
+          throw err.message;
+        });
+      },
     },
     {
       name: 'email',
       message: 'Email',
       format: 'email',
-      validate: (value) => {
+      validate: value => {
         if (value && value.length >= 3) {
           return true;
         }
 
         return 'Email is required';
-      }
+      },
     },
     {
       name: 'password',
       message: 'Password',
       type: 'password',
-      filter: (password) => {
-        return UsersService
-          .isValidPassword(password)
-          .catch((err) => {
-            throw err.message;
-          });
-      }
+      filter: password => {
+        return UsersService.isValidPassword(password).catch(err => {
+          throw err.message;
+        });
+      },
     },
     {
       name: 'confirmPassword',
       message: 'Confirm Password',
       type: 'password',
-      filter: (confirmPassword, {password}) => {
+      filter: (confirmPassword, { password }) => {
         if (password !== confirmPassword) {
           return Promise.reject(new Error('Passwords do not match'));
         }
 
-        return UsersService
-          .isValidPassword(confirmPassword)
-          .catch((err) => {
-            throw err.message;
-          });
-      }
+        return UsersService.isValidPassword(confirmPassword).catch(err => {
+          throw err.message;
+        });
+      },
     },
   ]);
 
-  let {user: newUser} = await SetupService.setup({
+  let { user: newUser } = await SetupService.setup({
     settings: settings.toObject(),
     user: {
       email: user.email,
       username: user.username,
-      password: user.password
-    }
+      password: user.password,
+    },
   });
 
   console.log('Settings created.');
   console.log(`User ${newUser.id} created.`);
   console.log('\nTalk is now installed!');
-  console.log('\nWe recommend adding TALK_INSTALL_LOCK=TRUE to your environment to turn off the dynamic setup.');
+  console.log(
+    '\nWe recommend adding TALK_INSTALL_LOCK=TRUE to your environment to turn off the dynamic setup.'
+  );
 };
 
 // Start tthe setup process.
@@ -207,7 +199,7 @@ performSetup()
   .then(() => {
     util.shutdown();
   })
-  .catch((e) => {
+  .catch(e => {
     console.error(e);
     util.shutdown(1);
   });
diff --git a/bin/cli-token b/bin/cli-token
index fa5d2e350..b131728e6 100755
--- a/bin/cli-token
+++ b/bin/cli-token
@@ -4,35 +4,25 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+const util = require('./util');
+const program = require('commander');
 const mongoose = require('../services/mongoose');
 const TokensService = require('../services/tokens');
-const util = require('./util');
 const Table = require('cli-table');
 
 // Register the shutdown criteria.
-util.onshutdown([
-  () => mongoose.disconnect()
-]);
+util.onshutdown([() => mongoose.disconnect()]);
 
 async function listTokens(userID) {
   try {
     let tokens = await TokensService.list(userID);
 
     let table = new Table({
-      head: [
-        'ID',
-        'Name',
-        'Status'
-      ]
+      head: ['ID', 'Name', 'Status'],
     });
 
-    tokens.forEach((token) => {
-      table.push([
-        token.id,
-        token.name,
-        token.active ? 'Active' : 'Revoked'
-      ]);
+    tokens.forEach(token => {
+      table.push([token.id, token.name, token.active ? 'Active' : 'Revoked']);
     });
 
     console.log(table.toString());
@@ -46,7 +36,6 @@ async function listTokens(userID) {
 
 async function revokeToken(tokenID) {
   try {
-
     await TokensService.revoke(null, tokenID);
 
     console.log(`Revoked Token[${tokenID}]`);
@@ -60,8 +49,7 @@ async function revokeToken(tokenID) {
 
 async function createToken(userID, tokenName) {
   try {
-
-    let {pat: {id}, jwt} = await TokensService.create(userID, tokenName);
+    let { pat: { id }, jwt } = await TokensService.create(userID, tokenName);
 
     console.log(`Created Token[${id}] for User[${userID}] = ${jwt}`);
 
diff --git a/bin/cli-users b/bin/cli-users
index 89bf667a7..64d51e3b4 100755
--- a/bin/cli-users
+++ b/bin/cli-users
@@ -4,161 +4,88 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
+const util = require('./util');
+const program = require('commander');
 const inquirer = require('inquirer');
+const { graphql } = require('graphql');
+const { stripIndent } = require('common-tags');
+const Table = require('cli-table');
+
+// Make things colorful!
+require('colors');
+
+// Register the autocomplete plugin.
+inquirer.registerPrompt(
+  'autocomplete',
+  require('inquirer-autocomplete-prompt')
+);
+
+const schema = require('../graph/schema');
+const Context = require('../graph/context');
 const UsersService = require('../services/users');
 const UserModel = require('../models/user');
 const CommentModel = require('../models/comment');
 const ActionModel = require('../models/action');
 const USER_ROLES = require('../models/enum/user_roles');
 const mongoose = require('../services/mongoose');
-const util = require('./util');
-const Table = require('cli-table');
 const databaseVerifications = require('./verifications/database');
 
-const validateRequired = (msg = 'Field is required', len = 1) => (input) => {
-  if (input && input.length >= len) {
-    return true;
-  }
-
-  return msg;
-};
-
-// Regeister the shutdown criteria.
-util.onshutdown([
-  () => mongoose.disconnect()
-]);
-
-function getUserCreateAnswers(options) {
-  if (options.flag_mode) {
-
-    let user = {
-      email: options.email,
-      password: options.password,
-      confirmPassword: options.password,
-      username: options.name,
-      roles: []
-    };
-
-    if (options.role && USER_ROLES.indexOf(options.role) > -1) {
-      user.roles = [options.role];
-    }
-
-    return Promise.resolve(user);
-  }
-
-  return inquirer.prompt([
-    {
-      name: 'email',
-      message: 'Email',
-      format: 'email',
-      validate: validateRequired('Email is required')
-    },
-    {
-      name: 'password',
-      message: 'Password',
-      type: 'password',
-      filter: (password) => {
-        return UsersService
-          .isValidPassword(password)
-          .catch((err) => {
-            throw err.message;
-          });
-      }
-    },
-    {
-      name: 'confirmPassword',
-      message: 'Confirm Password',
-      type: 'password',
-      filter: (confirmPassword) => {
-        return UsersService
-          .isValidPassword(confirmPassword)
-          .catch((err) => {
-            throw err.message;
-          });
-      }
-    },
-    {
-      name: 'username',
-      message: 'Username',
-      filter: (username) => {
-        return UsersService
-          .isValidUsername(username)
-          .catch((err) => {
-            throw err.message;
-          });
-      }
-    },
-    {
-      name: 'roles',
-      message: 'User Role',
-      type: 'checkbox',
-      choices: USER_ROLES
-    }
-  ]);
-}
+// Register the shutdown criteria.
+util.onshutdown([() => mongoose.disconnect()]);
 
 /**
- * Prompts for input and registers a user based on those.
- */
-async function createUser(options) {
-  try {
-    const answers = await getUserCreateAnswers(options);
-    if (answers.password !== answers.confirmPassword) {
-      throw new Error('Passwords do not match');
-    }
-
-    const user = await UsersService.createLocalUser(answers.email.trim(), answers.password.trim(), answers.username.trim());
-    console.log(`Created user ${user.id}.`);
-
-    if (answers.roles.length > 0) {
-      return Promise.all(answers.roles.map((role) => {
-        return UsersService
-          .addRoleToUser(user.id, role)
-          .then(() => {
-            console.log(`Added the role ${role} to User ${user.id}.`);
-          });
-      }));
-    }
-
-    util.shutdown();
-
-  } catch (err) {
-    console.error(err);
-    util.shutdown(1);
-  }
-}
-
-/**
- * Deletes a user.
+ * Deletes a user and cleans up their associated verifications.
  */
 async function deleteUser(userID) {
-
   try {
-
     // Find the user we're removing.
-    const user = await UserModel.findOne({id: userID});
+    const user = await UserModel.findOne({ id: userID });
     if (!user) {
       throw new Error(`user with id ${userID} not found`);
     }
 
+    printUserAsTable(user);
+
+    console.warn(stripIndent`
+
+    This will delete the above user.
+
+    This might take a long time if there is a lot of data, please confirm that
+    you want to continue.
+    `);
+    const { confirm } = await inquirer.prompt({
+      type: 'confirm',
+      name: 'confirm',
+      message: 'Continue',
+      default: false,
+    });
+    if (!confirm) {
+      return util.shutdown();
+    }
+
+    console.warn("Removing user's actions");
+
     // Remove all the user's actions.
-    await ActionModel
-      .where({user_id: user.id})
-      .setOptions({multi: true})
+    await ActionModel.where({ user_id: user.id })
+      .setOptions({ multi: true })
       .remove();
 
+    console.warn("Removing user's comments");
+
     // Remove all the user's comments.
-    await CommentModel
-      .where({author_id: user.id})
-      .setOptions({multi: true})
+    await CommentModel.where({ author_id: user.id })
+      .setOptions({ multi: true })
       .remove();
 
+    console.warn('Updating the database indexes');
+
     // Update the counts that might have changed.
     for (const verification of databaseVerifications) {
-      await verification({fix: true, limit: Infinity, batch: 1000});
+      await verification({ fix: true, limit: Infinity, batch: 1000 });
     }
 
+    console.warn('Removing the user');
+
     // Remove the user.
     await user.remove();
 
@@ -169,146 +96,91 @@ async function deleteUser(userID) {
   }
 }
 
-/**
- * Changes the password for a user.
- */
-function passwd(userID) {
-  inquirer.prompt([
+function printUserAsTable(user) {
+  let table = new Table({});
+
+  table.push(
+    { ID: user.id.gray },
+    { Username: user.username },
+    { Emails: user.emails },
+    { Tags: user.tags ? user.tags.map(({ tag: { name } }) => name) : '' },
+    { Role: user.role },
+    { Verified: user.hasVerifiedEmail },
+    { Username: user.status.username.status },
+    { Banned: user.banned },
     {
-      name: 'password',
-      message: 'Password',
-      type: 'password',
-      validate: validateRequired('Password is required')
-    },
-    {
-      name: 'confirmPassword',
-      message: 'Confirm Password',
-      type: 'password',
-      validate: validateRequired('Confirm Password is required')
+      Suspension: user.suspended
+        ? `Until ${user.status.suspension.until}`
+        : false,
     }
-  ])
-    .then((answers) => {
-      if (answers.password !== answers.confirmPassword) {
-        throw new Error('Password mismatch');
-      }
+  );
 
-      return UsersService.changePassword(userID, answers.password);
-    })
-    .then(() => {
-      console.log('Password changed.');
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
+  console.log(table.toString());
 }
 
 /**
- * Updates the user from the options array.
+ * Searches for users based on their username and email address.
  */
-function updateUser(userID, options) {
-  const updates = [];
-
-  if (options.email && typeof options.email === 'string' && options.email.length > 0) {
-    let q = UserModel.update({
-      'id': userID,
-      'profiles.provider': 'local'
-    }, {
-      $set: {
-        'profiles.$.id': options.email
+async function searchUsers() {
+  const ctx = Context.forSystem();
+  const searchQuery = `
+    query SearchUsers($value: String) {
+      users(query: {value: $value}) {
+        nodes {
+          id
+          username
+          role
+          profiles {
+            id
+            provider
+          }
+        }
       }
-    });
+    }
+  `;
 
-    updates.push(q);
-  }
-
-  if (options.name && typeof options.name === 'string' && options.name.length > 0) {
-    let q = UserModel.update({
-      'id': userID
-    }, {
-      $set: {
-        username: options.name
-      }
-    });
-
-    updates.push(q);
-  }
-
-  Promise
-    .all(updates.map((q) => q.exec()))
-    .then(() => {
-      console.log(`User ${userID} updated.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
-}
-
-/**
- * Lists all the users registered in the database.
- */
-function listUsers() {
-  UsersService
-    .all()
-    .then((users) => {
-      let table = new Table({
-        head: [
-          'ID',
-          'Username',
-          'Profiles',
-          'Roles',
-          'Status',
-          'State'
-        ]
-      });
-
-      users.forEach((user) => {
-        let state = user.disabled ? 'Disabled' : 'Enabled';
-        const profile = user.profiles.find(({provider}) => provider === 'local');
-        if (profile && profile.metadata && profile.metadata.confirmed_at) {
-          state += ', Verified';
-        } else {
-          state += ', Unverified';
+  try {
+    const answers = await inquirer.prompt({
+      type: 'autocomplete',
+      name: 'userID',
+      message: 'Search for a user',
+      source: async (answers, value) => {
+        if (value === null) {
+          value = '';
         }
 
-        table.push([
-          user.id,
-          user.username,
-          user.profiles.map((p) => p.provider).join(', '),
-          user.roles.join(', '),
-          user.status,
-          state
-        ]);
-      });
+        const { data, errors } = await graphql(schema, searchQuery, {}, ctx, {
+          value,
+        });
+        if (errors && errors.length > 0) {
+          throw errors[0];
+        }
 
-      console.log(table.toString());
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
-}
+        if (data.users === null) {
+          return [];
+        }
 
-/**
- * Merges two users using the specified ID's.
- * @param  {String} dstUserID id of the user to which is the target of the merge
- * @param  {String} srcUserID id of the user to which is the source of the merge
- */
-function mergeUsers(dstUserID, srcUserID) {
-  UsersService
-    .mergeUsers(dstUserID, srcUserID)
-    .then(() => {
-      console.log(`User ${srcUserID} was merged into user ${dstUserID}.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
+        return data.users.nodes.map(user => {
+          const emails = user.emails.join(', ');
+          return {
+            name: `${user.username} (${emails}) ${user.id.gray} - ${
+              user.role.gray
+            }`,
+            value: user.id,
+          };
+        });
+      },
     });
+
+    const { userID } = answers;
+    const user = await UserModel.findOne({ id: userID });
+
+    printUserAsTable(user);
+    util.shutdown(0);
+  } catch (err) {
+    console.error(err);
+    util.shutdown(1);
+  }
 }
 
 /**
@@ -316,127 +188,70 @@ function mergeUsers(dstUserID, srcUserID) {
  * @param  {String} userUD id of the user to add the role to
  * @param  {String} role   the role to add
  */
-function addRole(userID, role) {
+async function setUserRole(userID) {
+  try {
+    const { role } = await inquirer.prompt([
+      {
+        name: 'role',
+        message: 'User Role',
+        type: 'list',
+        choices: USER_ROLES,
+      },
+    ]);
 
-  if (USER_ROLES.indexOf(role) === -1) {
-    console.error(`Role '${role}' is not supported. Supported roles are ${USER_ROLES.join(', ')}.`);
+    await UsersService.setRole(userID, role);
+
+    console.log(`Set User ${userID} to the ${role} role.`);
+    util.shutdown();
+  } catch (err) {
+    console.error(err);
     util.shutdown(1);
-    return;
   }
-
-  UsersService
-    .addRoleToUser(userID, role)
-    .then(() => {
-      console.log(`Added the ${role} role to User ${userID}.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
-}
-
-/**
- * Removes a role from a user
- * @param  {String} userUD id of the user to remove the role from
- * @param  {String} role   the role to remove
- */
-function removeRole(userID, role) {
-
-  if (USER_ROLES.indexOf(role) === -1) {
-    console.error(`Role '${role}' is not supported. Supported roles are ${USER_ROLES.join(', ')}.`);
-    util.shutdown(1);
-    return;
-  }
-
-  UsersService
-    .removeRoleFromUser(userID, role)
-    .then(() => {
-      console.log(`Removed the ${role} role from User ${userID}.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
-}
-
-/**
- * Ban a user
- * @param  {String} userID id of the user to ban
- */
-function ban(userID) {
-  UsersService
-    .setStatus(userID, 'BANNED')
-    .then(() => {
-      console.log(`Banned the User ${userID}.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
-}
-
-/**
- * Unban a user
- * @param  {String} userUD id of the user to remove the role from
- */
-function unban(userID) {
-  UsersService
-    .setStatus(userID, 'ACTIVE')
-    .then(() => {
-      console.log(`Unban the User ${userID}.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
-}
-
-/**
- * Disable a given user.
- * @param  {String} userID the ID of a user to disable
- */
-function disableUser(userID) {
-  UsersService
-    .disableUser(userID)
-    .then(() => {
-      console.log(`User ${userID} was disabled.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
-}
-
-/**
- * Enabled a given user.
- * @param  {String} userID the ID of a user to enable
- */
-function enableUser(userID) {
-  UsersService
-    .enableUser(userID)
-    .then(() => {
-      console.log(`User ${userID} was enabled.`);
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
 }
 
 /**
  * Verifies an email address for a user.
  *
  * @param userID the user's id
- * @param email  the user's email address to be verified
+ * @param email  the user's email address to be verified, otherwise verifies the
+ *               first email if there is one, if there are multiple, you get a
+ *               prompt.
  */
-async function verify(userID, email) {
+async function verifyUserEmail(userID, email) {
   try {
+    // Get the user.
+    const user = await UserModel.findOne({ id: userID });
+    if (!user) {
+      throw new Error(`user with ID ${userID} cannot be found`);
+    }
+
+    // Get all the user's email addresses.
+    const emails = user.emails;
+    if (emails.length === 0) {
+      throw new Error('user did not have any email addresses');
+    }
+
+    if (!email && emails.length === 1) {
+      // The email wasn't passed, and there is only one option.
+      email = emails[0];
+    } else if (!emails.includes(email)) {
+      // The email passed doesn't belong to this user.
+      throw new Error(`user does not have the email ${email}`);
+    } else if (emails.length > 1) {
+      // The email wasn't passed, and there is more than one choice.
+      const answers = await inquirer.prompt([
+        {
+          name: 'email',
+          message: 'Select Email to Verify',
+          type: 'list',
+          choices: emails,
+        },
+      ]);
+
+      email = answers.email;
+    }
+
+    // Verify the email.
     await UsersService.confirmEmail(userID, email);
     console.log(`User ${userID} had their email ${email} verified.`);
     util.shutdown();
@@ -450,77 +265,25 @@ async function verify(userID, email) {
 // Setting up the program command line arguments.
 //==============================================================================
 
-program
-  .command('create')
-  .option('--email [email]', 'Email to use')
-  .option('--password [password]', 'Password to use')
-  .option('--name [name]', 'Name to use')
-  .option('--role [role]', 'Role to add')
-  .option('-f, --flag_mode', 'Source from flags instead of prompting')
-  .description('create a new user')
-  .action(createUser);
-
 program
   .command('delete <userID>')
   .description('delete a user')
   .action(deleteUser);
 
-program
-  .command('passwd <userID>')
-  .description('change a password for a user')
-  .action(passwd);
-
-program
-  .command('update <userID>')
-  .option('--email [email]', 'Email to use')
-  .option('--name [name]', 'Name to use')
-  .description('update a user')
-  .action(updateUser);
-
 program
   .command('list')
-  .description('list all the users in the database')
-  .action(listUsers);
+  .description('searches for a user based on their stored username and email')
+  .action(searchUsers);
 
 program
-  .command('merge <dstUserID> <srcUserID>')
-  .description('merge srcUser into the dstUser')
-  .action(mergeUsers);
-
-program
-  .command('addrole <userID> <role>')
-  .description('adds a role to a given user')
-  .action(addRole);
-
-program
-  .command('removerole <userID> <role>')
-  .description('removes a role from a given user')
-  .action(removeRole);
-
-program
-  .command('ban <userID>')
-  .description('ban a given user')
-  .action(ban);
-
-program
-  .command('uban <userID>')
-  .description('unban a given user')
-  .action(unban);
-
-program
-  .command('disable <userID>')
-  .description('disable a given user from logging in')
-  .action(disableUser);
-
-program
-  .command('enable <userID>')
-  .description('enable a given user from logging in')
-  .action(enableUser);
+  .command('set-role <userID> <role>')
+  .description('sets the role on a user')
+  .action(setUserRole);
 
 program
   .command('verify <userID> <email>')
-  .description('verifies the given user\'s email address')
-  .action(verify);
+  .description("verifies the given user's email address")
+  .action(verifyUserEmail);
 
 program.parse(process.argv);
 
diff --git a/bin/cli-verify b/bin/cli-verify
index 6e67e0016..e32c7d169 100755
--- a/bin/cli-verify
+++ b/bin/cli-verify
@@ -4,23 +4,24 @@
  * Module dependencies.
  */
 
-const program = require('./commander');
-const mongoose = require('../services/mongoose');
 const util = require('./util');
+const program = require('commander');
+const mongoose = require('../services/mongoose');
 const databaseVerifications = require('./verifications/database');
 
 // Register the shutdown criteria.
-util.onshutdown([
-  () => mongoose.disconnect()
-]);
+util.onshutdown([() => mongoose.disconnect()]);
 
-async function database({fix = false, limit = Infinity, batch = 1000}) {
+async function database({ fix = false, limit = Infinity, batch = 1000 }) {
   try {
     for (const verification of databaseVerifications) {
-      await verification({fix, limit, batch});
+      await verification({ fix, limit, batch });
     }
   } catch (err) {
-    console.error(`Failed to process all the ${databaseVerifications.length} verifications`, err);
+    console.error(
+      `Failed to process all the ${databaseVerifications.length} verifications`,
+      err
+    );
     util.shutdown(1);
     return;
   }
@@ -36,8 +37,16 @@ program
   .command('db')
   .description('verifies the database integrity')
   .option('-f, --fix', 'fix the problems found with database inconsistencies')
-  .option('-l, --limit [size]', 'limit the amount of documents to process in a single pass, this will ensure only a maximum number of batch operations are issued [default: inf]', parseInt)
-  .option('-b, --batch [size]', 'batch size to process verifications and repairs of documents [default: 1000]', parseInt)
+  .option(
+    '-l, --limit [size]',
+    'limit the amount of documents to process in a single pass, this will ensure only a maximum number of batch operations are issued [default: inf]',
+    parseInt
+  )
+  .option(
+    '-b, --batch [size]',
+    'batch size to process verifications and repairs of documents [default: 1000]',
+    parseInt
+  )
   .action(database);
 
 program.parse(process.argv);
diff --git a/bin/commander.js b/bin/commander.js
deleted file mode 100644
index 328a25b29..000000000
--- a/bin/commander.js
+++ /dev/null
@@ -1,51 +0,0 @@
-const pkg = require('../package.json');
-const dotenv = require('dotenv');
-const fs = require('fs');
-const program = require('commander');
-
-//==============================================================================
-// Setting up the program command line arguments.
-//==============================================================================
-
-const parseArgs = require('minimist')(process.argv.slice(2), {
-  alias: {
-    'c': 'config'
-  },
-  string: [
-    'config',
-    'pid'
-  ],
-  default: {
-    'config': null,
-    'pid': null
-  }
-});
-
-/**
- * If the config flag is present, then we have to load the configuration from
- * the file specified. We will then load those values into the environment.
- */
-if (parseArgs.config) {
-  let envConfig = dotenv.parse(fs.readFileSync(parseArgs.config, {encoding: 'utf8'}));
-
-  Object.keys(envConfig).forEach((k) => {
-    process.env[k] = envConfig[k];
-  });
-}
-
-/**
- * If the pid flag is present, then we have to create a pid file at the location
- * specified.
- */
-if (parseArgs.pid) {
-  const util = require('./util');
-
-  console.log('Wrote PID');
-
-  util.pid(parseArgs.pid);
-}
-
-module.exports = program
-  .version(pkg.version)
-  .option('-c, --config [path]', 'Specify the configuration file to load')
-  .option('--pid [path]', 'Specify a path to output the current PID to');
diff --git a/bin/templates/plugin/client/components/MyPluginComponent.js b/bin/templates/plugin/client/components/MyPluginComponent.js
index 89e274e1a..98488b133 100644
--- a/bin/templates/plugin/client/components/MyPluginComponent.js
+++ b/bin/templates/plugin/client/components/MyPluginComponent.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import {CoralLogo} from 'plugin-api/beta/client/components/ui';
+import { CoralLogo } from 'plugin-api/beta/client/components/ui';
 import styles from './MyPluginComponent.css';
 
 class MyPluginComponent extends React.Component {
   render() {
     return (
       <div className={styles.myPluginContainer}>
-        <CoralLogo className={styles.logo}/>
+        <CoralLogo className={styles.logo} />
         <div className={styles.description}>
           <h3>Plugin created by Talk CLI</h3>
 
diff --git a/bin/templates/plugin/client/index.js b/bin/templates/plugin/client/index.js
index acd0910be..72a7fe6a7 100644
--- a/bin/templates/plugin/client/index.js
+++ b/bin/templates/plugin/client/index.js
@@ -1,4 +1,3 @@
-
 /**
   This is a client index example file and it could look like this:
   
@@ -21,6 +20,6 @@ import MyPluginComponent from './components/MyPluginComponent';
 
 export default {
   slots: {
-    stream: [MyPluginComponent]
-  }
+    stream: [MyPluginComponent],
+  },
 };
diff --git a/bin/util.js b/bin/util.js
index ab9035fe5..0a9adb966 100644
--- a/bin/util.js
+++ b/bin/util.js
@@ -1,7 +1,9 @@
-const debug = require('debug')('talk:util');
-const fs = require('fs');
+// Setup the environment.
+require('../services/env');
 
-const util = module.exports = {};
+const debug = require('debug')('talk:util');
+
+const util = (module.exports = {});
 
 /**
  * Stores an array of functions that should be executed in the event that the
@@ -15,20 +17,22 @@ util.toshutdown = [];
  * @param  {Number} [defaultCode=0] default return code upon sucesfull shutdown.
  */
 util.shutdown = (defaultCode = 0, signal = null) => {
-
   if (signal) {
     debug(`Reached ${signal} signal`);
   }
 
   debug(`${util.toshutdown.length} jobs now being called`);
 
-  Promise
-    .all(util.toshutdown.map((func) => func ? func(signal) : null).filter((func) => func))
+  Promise.all(
+    util.toshutdown
+      .map(func => (func ? func(signal) : null))
+      .filter(func => func)
+  )
     .then(() => {
       debug('Shutdown complete, now exiting');
       process.exit(defaultCode);
     })
-    .catch((err) => {
+    .catch(err => {
       console.error(err);
 
       process.exit(1);
@@ -41,54 +45,23 @@ util.shutdown = (defaultCode = 0, signal = null) => {
  * @param  {Array} jobs Array of promise capable shutdown functions that are
  *                      executed.
  */
-util.onshutdown = (jobs) => {
-
+util.onshutdown = jobs => {
   debug(`${jobs.length} jobs registered to be called during shutdown`);
 
   // Add the new jobs to shutdown to the object reference.
   util.toshutdown = util.toshutdown.concat(jobs);
 };
 
-/**
- * Register a PID file to be maintained for the lifespan of the process.
- * @param  {String} path path to the PID file to create
- */
-util.pid = (path) => {
-  if (!/\//.test(path)) {
-    if (!/\.pid/.test(path)) {
-      path += '.pid';
-    }
-    path = `/tmp/${path}`;
-  }
-
-  const pid = `${process.pid.toString()}\n`;
-
-  fs.writeFile(path, pid, (err) => {
-    if (err) {
-      console.error(`Can't write PID file: ${err}`);
-      throw err;
-    }
-
-    // Add the cleanup for the fs onto the shutdown.
-    util.onshutdown([
-      () => new Promise((resolve, reject) => {
-
-        // Remove the pid file.
-        fs.unlink(path, (err) => {
-          if (err) {
-            return reject(err);
-          }
-
-          return resolve();
-        });
-      })
-    ]);
-  });
-};
-
 // Attach to the SIGTERM + SIGINT handles to ensure a clean shutdown in the
 // event that we have an external event. SIGUSR2 is called when the app is asked
 // to be 'killed', same procedure here.
-process.on('SIGTERM',   () => util.shutdown(0, 'SIGTERM'));
-process.on('SIGINT',    () => util.shutdown(0, 'SIGINT'));
+process.on('SIGTERM', () => util.shutdown(0, 'SIGTERM'));
+process.on('SIGINT', () => util.shutdown(0, 'SIGINT'));
 process.once('SIGUSR2', () => util.shutdown(0, 'SIGUSR2'));
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
diff --git a/bin/verifications/database/action_counts.js b/bin/verifications/database/action_counts.js
new file mode 100644
index 000000000..684c17bca
--- /dev/null
+++ b/bin/verifications/database/action_counts.js
@@ -0,0 +1,194 @@
+const UserModel = require('../../../models/user');
+const CommentModel = require('../../../models/comment');
+const ActionsService = require('../../../services/actions');
+const { arrayJoinBy } = require('../../../graph/loaders/util');
+const { get } = require('lodash');
+const debug = require('debug')('talk:cli:verify');
+
+const MODELS = [UserModel, CommentModel];
+
+async function processBatch(Model, documents) {
+  // Get an array of all the document id's.
+  const documentIDs = documents.map(({ id }) => id);
+
+  // Store all the operations on this batch in this array that we'll return
+  // later.
+  const operations = [];
+
+  // Get the action summaries for this batch.
+  const totalActionSummaries = await ActionsService.getActionSummaries(
+    documentIDs
+  ).then(arrayJoinBy(documentIDs, 'item_id'));
+
+  // Iterate over the documents.
+  for (let i = 0; i < documents.length; i++) {
+    const document = documents[i];
+    const actionSummaries = totalActionSummaries[i];
+
+    let ops = [];
+
+    for (const actionSummary of actionSummaries) {
+      if (actionSummary.group_id === null) {
+        continue;
+      }
+
+      // And we generate the group id.
+      const ACTION_TYPE = actionSummary.action_type.toLowerCase();
+      const GROUP_ID = actionSummary.group_id.toLowerCase();
+
+      if (GROUP_ID.length <= 0) {
+        continue;
+      }
+
+      // And we add a new batch operation if the action summary is associated
+      // with a group.
+      const ACTION_COUNT_FIELD = `${ACTION_TYPE}_${GROUP_ID}`;
+
+      // Check that the action summaries match the cached counts.
+      if (
+        get(document, ['action_counts', ACTION_COUNT_FIELD]) !==
+        actionSummary.count
+      ) {
+        // Batch updates for those changes.
+        ops.push({
+          [`action_counts.${ACTION_COUNT_FIELD}`]: actionSummary.count,
+        });
+      }
+    }
+
+    // Group all the action summaries together from all the different group
+    // ids.
+    const groupedActionSummaries = actionSummaries.reduce(
+      (acc, actionSummary) => {
+        // action_type is already snake cased (as it would have had to be when it
+        // was inserted in the database).
+        const ACTION_TYPE = actionSummary.action_type.toLowerCase();
+
+        if (!(ACTION_TYPE in acc)) {
+          acc[ACTION_TYPE] = 0;
+        }
+
+        acc[ACTION_TYPE] += actionSummary.count;
+
+        return acc;
+      },
+      {}
+    );
+
+    for (const ACTION_COUNT_FIELD of Object.keys(groupedActionSummaries)) {
+      const count = groupedActionSummaries[ACTION_COUNT_FIELD];
+
+      // Check that the action summaries match the cached counts.
+      if (get(document, ['action_counts', ACTION_COUNT_FIELD]) !== count) {
+        // Batch updates for those changes.
+        ops.push({
+          [`action_counts.${ACTION_COUNT_FIELD}`]: count,
+        });
+      }
+    }
+
+    // If this comment has action summaries that should be updated, then
+    // perform an update!
+    if (ops.length > 0) {
+      operations.push({
+        updateOne: {
+          filter: {
+            id: document.id,
+          },
+          update: {
+            $set: Object.assign({}, ...ops),
+          },
+        },
+      });
+    }
+  }
+
+  return operations;
+}
+
+module.exports = async ({ fix, batch }) => {
+  for (const Model of MODELS) {
+    const cursor = Model.collection
+      .find({})
+      .project({
+        id: 1,
+        action_counts: 1,
+      })
+      .sort({ created_at: 1 });
+
+    let operations = [];
+    let documents = [];
+
+    // While there are documents to process.
+    while (await cursor.hasNext()) {
+      // Load the document.
+      const document = await cursor.next();
+
+      // Push the document into the documents array.
+      documents.push(document);
+
+      // Check to see if the length of the documents array requires us to
+      // process it.
+      if (documents.length > batch) {
+        // Process this batch.
+        let batchOperations = await processBatch(Model, documents);
+
+        // Push the batch operations into the model operations.
+        operations.push(...batchOperations);
+
+        // Clear this batch contents.
+        documents = [];
+      }
+    }
+
+    // Check to see if there are any documents left over.
+    if (documents.length > 0) {
+      // Process this batch.
+      let batchOperations = await processBatch(Model, documents);
+
+      // Push the batch operations into the model operations.
+      operations.push(...batchOperations);
+    }
+
+    const OPERATIONS_LENGTH = operations.length;
+
+    console.log(
+      `action_counts.js: ${OPERATIONS_LENGTH} ${
+        Model.collection.name
+      } need their action counts fixed.`
+    );
+
+    // If fix was enabled, execute the batch writes.
+    if (OPERATIONS_LENGTH > 0) {
+      if (fix) {
+        debug(
+          `action_counts.js: fixing ${OPERATIONS_LENGTH} ${
+            Model.collection.name
+          }...`
+        );
+
+        while (operations.length) {
+          let result = await Model.collection.bulkWrite(
+            operations.splice(0, batch)
+          );
+
+          debug(
+            `action_counts.js: fixed batch of ${result.modifiedCount} ${
+              Model.collection.name
+            }.`
+          );
+        }
+
+        console.log(
+          `action_counts.js: applied all ${OPERATIONS_LENGTH} fixes to ${
+            Model.collection.name
+          }.`
+        );
+      } else {
+        console.warn(
+          'Skipping fixing, --fix was not enabled, pass --fix to fix these errors'
+        );
+      }
+    }
+  }
+};
diff --git a/bin/verifications/database/comment_replies.js b/bin/verifications/database/comment_replies.js
new file mode 100644
index 000000000..309023c75
--- /dev/null
+++ b/bin/verifications/database/comment_replies.js
@@ -0,0 +1,140 @@
+const CommentModel = require('../../../models/comment');
+const { singleJoinBy } = require('../../../graph/loaders/util');
+const debug = require('debug')('talk:cli:verify');
+
+const getBatch = async (limit, offset) =>
+  CommentModel.find({})
+    .select({ id: 1, action_counts: 1, reply_count: 1 })
+    .limit(limit)
+    .skip(offset)
+    .sort('created_at');
+
+module.exports = async ({ fix, limit, batch }) => {
+  let operations = [];
+
+  // Count how many comments there are to process.
+  const totalCount = await CommentModel.count();
+
+  let offset = 0;
+  let comments = [];
+  let commentIDs = [];
+
+  console.log(`Processing ${totalCount} comments in batches of ${limit}...`);
+
+  // Keep processing documents until there are is none left.
+  while (offset < totalCount) {
+    // Get a batch of comments.
+    comments = await getBatch(batch, offset);
+    commentIDs = comments.map(({ id }) => id);
+
+    // Get their reply counts.
+    let allReplyCounts = await CommentModel.aggregate([
+      {
+        $match: {
+          parent_id: {
+            $in: commentIDs,
+          },
+          status: {
+            $in: ['NONE', 'ACCEPTED'],
+          },
+        },
+      },
+      {
+        $group: {
+          _id: '$parent_id',
+          count: {
+            $sum: 1,
+          },
+        },
+      },
+    ])
+      .then(singleJoinBy(commentIDs, '_id'))
+      .then(results => results.map(result => (result ? result.count : 0)));
+
+    // Loop over the comments, with their action summaries.
+    for (let i = 0; i < comments.length; i++) {
+      let comment = comments[i];
+      let replyCount = allReplyCounts[i];
+
+      // And check to see if the action summaries we just computed match what is
+      // currently set for the comments.
+      let commentOperations = [];
+
+      // If the reply count needs to be updated, then update it!
+      if (comment.reply_count !== replyCount) {
+        commentOperations.push({
+          reply_count: replyCount,
+        });
+      }
+
+      // If this comment has action summaries that should be updated, then
+      // perform an update!
+      if (commentOperations.length > 0) {
+        operations.push({
+          updateOne: {
+            filter: {
+              id: comment.id,
+            },
+            update: {
+              $set: Object.assign({}, ...commentOperations),
+            },
+          },
+        });
+      }
+    }
+
+    debug(`Processed batch of ${comments.length} comments.`);
+
+    if (operations.length >= limit) {
+      debug(
+        `Queued operations are ${
+          operations.length
+        }, reached limit of ${limit}, not processing any more.`
+      );
+
+      if (operations.length > limit) {
+        debug(
+          `${operations.length -
+            limit} operations have been truncated to enforce the limit`
+        );
+      }
+
+      break;
+    }
+
+    offset += batch;
+  }
+
+  const OPERATIONS_LENGTH = operations.length;
+
+  if (limit < Infinity && offset + comments.length < totalCount) {
+    console.log(
+      `Processed ${offset +
+        comments.length}/${totalCount} comments because we reached the update limit of ${limit}.`
+    );
+  } else {
+    console.log(`Processed all ${totalCount} comments.`);
+  }
+
+  console.log(`${OPERATIONS_LENGTH} documents need fixing.`);
+
+  // If fix was enabled, execute the batch writes.
+  if (OPERATIONS_LENGTH > 0) {
+    if (fix) {
+      debug(`Fixing ${OPERATIONS_LENGTH} documents...`);
+
+      while (operations.length) {
+        let batchOperations = operations.splice(0, batch);
+        let result = await CommentModel.collection.bulkWrite(batchOperations);
+
+        debug(`Fixed batch of ${result.modifiedCount} documents.`);
+      }
+
+      console.log(`Applied all ${OPERATIONS_LENGTH} fixes.`);
+    } else {
+      console.warn(
+        'Skipping fixing, --fix was not enabled, pass --fix to fix these errors'
+      );
+    }
+  }
+};
diff --git a/bin/verifications/database/comments.js b/bin/verifications/database/comments.js
deleted file mode 100644
index 231badabb..000000000
--- a/bin/verifications/database/comments.js
+++ /dev/null
@@ -1,193 +0,0 @@
-const CommentModel = require('../../../models/comment');
-const ActionsService = require('../../../services/actions');
-const {arrayJoinBy, singleJoinBy} = require('../../../graph/loaders/util');
-const sc = require('snake-case');
-const debug = require('debug')('talk:cli:verify');
-
-const getBatch = async (limit, offset) => CommentModel
-  .find({})
-  .select({'id': 1, 'action_counts': 1, 'reply_count': 1})
-  .limit(limit)
-  .skip(offset)
-  .sort('created_at');
-
-module.exports = async ({fix, limit, batch}) => {
-  let operations = [];
-
-  // Count how many comments there are to process.
-  const totalCount = await CommentModel.count();
-
-  let offset = 0;
-  let comments = [];
-  let commentIDs = [];
-
-  console.log(`Processing ${totalCount} comments in batches of ${limit}...`);
-
-  // Keep processing documents until there are is none left.
-  while (offset < totalCount) {
-
-    // Get a batch of comments.
-    comments = await getBatch(batch, offset);
-    commentIDs = comments.map(({id}) => id);
-
-    // Get their reply counts.
-    let allReplyCounts = await CommentModel
-      .aggregate([
-        {
-          $match: {
-            parent_id: {
-              $in: commentIDs,
-            },
-            status: {
-              $in: ['NONE', 'ACCEPTED']
-            }
-          }
-        },
-        {
-          $group: {
-            _id: '$parent_id',
-            count: {
-              $sum: 1
-            }
-          }
-        }
-      ])
-      .then(singleJoinBy(commentIDs, '_id'))
-      .then((results) => results.map((result) => result ? result.count : 0));
-
-    // Get their action summaries.
-    let allActionSummaries = await ActionsService
-      .getActionSummaries(commentIDs)
-      .then(arrayJoinBy(commentIDs, 'item_id'));
-
-    // Loop over the comments, with their action summaries.
-    for (let i = 0; i < comments.length; i++) {
-      let comment = comments[i];
-      let actionSummaries = allActionSummaries[i];
-      let replyCount = allReplyCounts[i];
-
-      // And check to see if the action summaries we just computed match what is
-      // currently set for the comments.
-      let commentOperations = [];
-
-      // If the reply count needs to be updated, then update it!
-      if (comment.reply_count !== replyCount) {
-        commentOperations.push({
-          reply_count: replyCount,
-        });
-      }
-
-      // First we process all the group id's.
-      for (let actionSummary of actionSummaries) {
-        if (actionSummary.group_id === null) {
-          continue;
-        }
-
-        // And we generate the group id.
-        const ACTION_TYPE = sc(actionSummary.action_type.toLowerCase());
-        const GROUP_ID = sc(actionSummary.group_id.toLowerCase());
-
-        if (GROUP_ID.length <= 0) {
-          continue;
-        }
-
-        // And we add a new batch operation if the action summary is associated
-        // with a group.
-        const ACTION_COUNT_FIELD = `${ACTION_TYPE}_${GROUP_ID}`;
-
-        // Check that the action summaries match the cached counts.
-        if (!comment.action_counts || !(ACTION_COUNT_FIELD in comment.action_counts) || comment.action_counts[ACTION_COUNT_FIELD] !== actionSummary.count) {
-
-          // Batch updates for those changes.
-          commentOperations.push({
-            [`action_counts.${ACTION_COUNT_FIELD}`]: actionSummary.count,
-          });
-        }
-      }
-
-      // Group all the action summaries together from all the different group
-      // ids.
-      let groupedActionSummaries = actionSummaries.reduce((acc, actionSummary) => {
-        const ACTION_TYPE = sc(actionSummary.action_type.toLowerCase());
-
-        if (!(ACTION_TYPE in acc)) {
-          acc[ACTION_TYPE] = 0;
-        }
-
-        acc[ACTION_TYPE] += actionSummary.count;
-
-        return acc;
-      }, {});
-
-      for (const ACTION_COUNT_FIELD of Object.keys(groupedActionSummaries)) {
-        const count = groupedActionSummaries[ACTION_COUNT_FIELD];
-
-        // Check that the action summaries match the cached counts.
-        if (!comment.action_counts || !(ACTION_COUNT_FIELD in comment.action_counts) || comment.action_counts[ACTION_COUNT_FIELD] !== count) {
-
-          // Batch updates for those changes.
-          commentOperations.push({
-            [`action_counts.${ACTION_COUNT_FIELD}`]: count,
-          });
-        }
-      }
-
-      // If this comment has action summaries that should be updated, then
-      // perform an update!
-      if (commentOperations.length > 0) {
-        operations.push({
-          updateOne: {
-            filter: {
-              id: comment.id
-            },
-            update: {
-              $set: Object.assign({}, ...commentOperations),
-            },
-          },
-        });
-      }
-    }
-
-    debug(`Processed batch of ${comments.length} comments.`);
-
-    if (operations.length >= limit) {
-      debug(`Queued operations are ${operations.length}, reached limit of ${limit}, not processing any more.`);
-
-      if (operations.length > limit) {
-        debug(`${operations.length - limit} operations have been truncated to enforce the limit`);
-      }
-
-      break;
-    }
-
-    offset += batch;
-  }
-
-  const OPERATIONS_LENGTH = operations.length;
-
-  if (limit < Infinity && offset + comments.length < totalCount) {
-    console.log(`Processed ${offset + comments.length}/${totalCount} comments because we reached the update limit of ${limit}.`);
-  } else {
-    console.log(`Processed all ${totalCount} comments.`);
-  }
-
-  console.log(`${OPERATIONS_LENGTH} documents need fixing.`);
-
-  // If fix was enabled, execute the batch writes.
-  if (OPERATIONS_LENGTH > 0) {
-    if (fix) {
-      debug(`Fixing ${OPERATIONS_LENGTH} documents...`);
-
-      while (operations.length) {
-        let batchOperations = operations.splice(0, batch);
-        let result = await CommentModel.collection.bulkWrite(batchOperations);
-
-        debug(`Fixed batch of ${result.modifiedCount} documents.`);
-      }
-
-      console.log(`Applied all ${OPERATIONS_LENGTH} fixes.`);
-    } else {
-      console.warn('Skipping fixing, --fix was not enabled, pass --fix to fix these errors');
-    }
-  }
-};
diff --git a/bin/verifications/database/index.js b/bin/verifications/database/index.js
index 3dafeb3bf..58a46bd85 100644
--- a/bin/verifications/database/index.js
+++ b/bin/verifications/database/index.js
@@ -6,7 +6,5 @@
 //
 //   async ({fix = false, batch = 1000}) => {}
 //
-// where their options are derrived.
-module.exports = [
-  require('./comments'),
-];
+// where their options are derived.
+module.exports = [require('./comment_replies'), require('./action_counts')];
diff --git a/circle.yml b/circle.yml
index 9f35736c6..cc8ea5725 100644
--- a/circle.yml
+++ b/circle.yml
@@ -7,6 +7,8 @@ machine:
   environment:
     PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
     NODE_ENV: "test"
+    MOCHA_FILE: "${CIRCLE_TEST_REPORTS}/junit/test-results.xml"
+    MOCHA_REPORTER: "mocha-junit-reporter"
   pre:
     # TODO: use the following to add in support for MongoDB 3.4.
     # # Upgrade the database version to 3.4.
@@ -47,10 +49,11 @@ database:
 test:
   override:
     # Run the tests using the junit reporter.
-    - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml MOCHA_REPORTER=mocha-junit-reporter yarn test
+    - yarn test
+    # Run the end to end tests
+    - yarn e2e:ci
     # Check dependancies using nsp.
     - nsp check
-    - yarn e2e-ci
 
 deployment:
   release:
@@ -59,7 +62,9 @@ deployment:
       - bash ./scripts/docker.sh deploy
 
   latest:
-    branch: master
+    branch:
+      - master
+      - next
     owner: coralproject
     commands:
       - bash ./scripts/docker.sh deploy
diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index 362143d38..76291ac56 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/client/coral-admin/src/AppRouter.js
@@ -1,44 +1,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
+import { Router, Route, IndexRedirect, IndexRoute } from 'react-router';
 
 import Configure from 'routes/Configure';
 import Install from 'routes/Install';
 import Stories from 'routes/Stories';
 import Community from 'routes/Community/containers/Community';
-import {ModerationLayout, Moderation} from 'routes/Moderation';
+import { ModerationLayout, Moderation } from 'routes/Moderation';
 
 import Layout from 'containers/Layout';
 
 const routes = (
   <div>
-    <Route exact path="/admin/install" component={Install}/>
-    <Route path='/admin' component={Layout}>
-      <IndexRedirect to='/admin/moderate' />
-      <Route path='configure' component={Configure} />
-      <Route path='stories' component={Stories} />
+    <Route exact path="/admin/install" component={Install} />
+    <Route path="/admin" component={Layout}>
+      <IndexRedirect to="/admin/moderate" />
+      <Route path="configure" component={Configure} />
+      <Route path="stories" component={Stories} />
 
       {/* Community Routes */}
 
-      <Route path='community'>
-        <Route path='flagged' components={Community}>
-          <Route path=':id' components={Community} />
+      <Route path="community">
+        <Route path="flagged" components={Community}>
+          <Route path=":id" components={Community} />
         </Route>
-        <Route path='people' components={Community}>
-          <Route path=':id' components={Community} />
+        <Route path="people" components={Community}>
+          <Route path=":id" components={Community} />
         </Route>
-        <IndexRedirect to='flagged' />
+        <IndexRedirect to="flagged" />
       </Route>
 
       {/* Moderation Routes */}
 
-      <Route path='moderate' component={ModerationLayout}>
+      <Route path="moderate" component={ModerationLayout}>
         <IndexRoute components={Moderation} />
 
-        <Route path=':tabOrId' components={Moderation} />
+        <Route path=":tabOrId" components={Moderation} />
 
-        <Route path=':tab' components={Moderation}>
-          <Route path=':id' components={Moderation} />
+        <Route path=":tab" components={Moderation}>
+          <Route path=":id" components={Moderation} />
         </Route>
       </Route>
     </Route>
diff --git a/client/coral-admin/src/actions/auth.js b/client/coral-admin/src/actions/auth.js
index 422258f50..332d756c0 100644
--- a/client/coral-admin/src/actions/auth.js
+++ b/client/coral-admin/src/actions/auth.js
@@ -7,26 +7,29 @@ import jwtDecode from 'jwt-decode';
 // SIGN IN
 //==============================================================================
 
-export const handleLogin = (email, password, recaptchaResponse) => (dispatch, _, {rest, client, storage}) => {
-  dispatch({type: actions.LOGIN_REQUEST});
+export const handleLogin = (email, password, recaptchaResponse) => (
+  dispatch,
+  _,
+  { rest, client, storage }
+) => {
+  dispatch({ type: actions.LOGIN_REQUEST });
 
   const params = {
     method: 'POST',
     body: {
       email,
-      password
-    }
+      password,
+    },
   };
 
   if (recaptchaResponse) {
     params.headers = {
-      'X-Recaptcha-Response': recaptchaResponse
+      'X-Recaptcha-Response': recaptchaResponse,
     };
   }
 
   return rest('/auth/local', params)
-    .then(({user, token}) => {
-
+    .then(({ user, token }) => {
       if (!user) {
         if (!bowser.safari && !bowser.ios && storage) {
           storage.removeItem('token');
@@ -38,19 +41,19 @@ export const handleLogin = (email, password, recaptchaResponse) => (dispatch, _,
       client.resetWebsocket();
       dispatch(checkLoginSuccess(user));
     })
-    .catch((error) => {
+    .catch(error => {
       console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
 
       if (error.translation_key === 'NOT_AUTHORIZED') {
-
         // invalid credentials
         dispatch({
           type: actions.LOGIN_FAILURE,
-          message: t('error.email_password')
+          message: t('error.email_password'),
         });
-      }
-      else if (error.translation_key === 'LOGIN_MAXIMUM_EXCEEDED') {
+      } else if (error.translation_key === 'LOGIN_MAXIMUM_EXCEEDED') {
         dispatch({
           type: actions.LOGIN_MAXIMUM_EXCEEDED,
           message: t(`error.${error.translation_key}`),
@@ -69,27 +72,32 @@ export const handleLogin = (email, password, recaptchaResponse) => (dispatch, _,
 //==============================================================================
 
 const forgotPasswordRequest = () => ({
-  type: actions.FETCH_FORGOT_PASSWORD_REQUEST
+  type: actions.FETCH_FORGOT_PASSWORD_REQUEST,
 });
 
 const forgotPasswordSuccess = () => ({
-  type: actions.FETCH_FORGOT_PASSWORD_SUCCESS
+  type: actions.FETCH_FORGOT_PASSWORD_SUCCESS,
 });
 
-const forgotPasswordFailure = (error) => ({
+const forgotPasswordFailure = error => ({
   type: actions.FETCH_FORGOT_PASSWORD_FAILURE,
   error,
 });
 
-export const requestPasswordReset = (email) => (dispatch, _, {rest}) => {
+export const requestPasswordReset = email => (dispatch, _, { rest }) => {
   dispatch(forgotPasswordRequest(email));
   const redirectUri = location.href;
 
-  return rest('/account/password/reset', {method: 'POST', body: {email,  loc: redirectUri}})
+  return rest('/account/password/reset', {
+    method: 'POST',
+    body: { email, loc: redirectUri },
+  })
     .then(() => dispatch(forgotPasswordSuccess()))
-    .catch((error) => {
+    .catch(error => {
       console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
       dispatch(forgotPasswordFailure(errorMessage));
     });
 };
@@ -99,24 +107,24 @@ export const requestPasswordReset = (email) => (dispatch, _, {rest}) => {
 //==============================================================================
 
 const checkLoginRequest = () => ({
-  type: actions.CHECK_LOGIN_REQUEST
+  type: actions.CHECK_LOGIN_REQUEST,
 });
 
 const checkLoginSuccess = (user, isAdmin) => ({
   type: actions.CHECK_LOGIN_SUCCESS,
   user,
-  isAdmin
+  isAdmin,
 });
 
-const checkLoginFailure = (error) => ({
+const checkLoginFailure = error => ({
   type: actions.CHECK_LOGIN_FAILURE,
-  error
+  error,
 });
 
-export const checkLogin = () => (dispatch, _, {rest, client, storage}) => {
+export const checkLogin = () => (dispatch, _, { rest, client, storage }) => {
   dispatch(checkLoginRequest());
   return rest('/auth')
-    .then(({user}) => {
+    .then(({ user }) => {
       if (!user) {
         if (!bowser.safari && !bowser.ios && storage) {
           storage.removeItem('token');
@@ -127,9 +135,11 @@ export const checkLogin = () => (dispatch, _, {rest, client, storage}) => {
       client.resetWebsocket();
       dispatch(checkLoginSuccess(user));
     })
-    .catch((error) => {
+    .catch(error => {
       console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
       dispatch(checkLoginFailure(errorMessage));
     });
 };
@@ -138,8 +148,8 @@ export const checkLogin = () => (dispatch, _, {rest, client, storage}) => {
 // LOGOUT
 //==============================================================================
 
-export const logout = () => (dispatch, _, {rest, client, storage}) => {
-  return rest('/auth', {method: 'DELETE'}).then(() => {
+export const logout = () => (dispatch, _, { rest, client, storage }) => {
+  return rest('/auth', { method: 'DELETE' }).then(() => {
     if (storage) {
       storage.removeItem('token');
     }
@@ -147,7 +157,7 @@ export const logout = () => (dispatch, _, {rest, client, storage}) => {
     // Reset the websocket.
     client.resetWebsocket();
 
-    dispatch({type: actions.LOGOUT});
+    dispatch({ type: actions.LOGOUT });
   });
 };
 
@@ -155,11 +165,10 @@ export const logout = () => (dispatch, _, {rest, client, storage}) => {
 // AUTH TOKEN
 //==============================================================================
 
-export const handleAuthToken = (token) => (dispatch, _, {storage}) => {
+export const handleAuthToken = token => (dispatch, _, { storage }) => {
   if (storage) {
     storage.setItem('exp', jwtDecode(token).exp);
     storage.setItem('token', token);
   }
-  dispatch({type: 'HANDLE_AUTH_TOKEN'});
+  dispatch({ type: 'HANDLE_AUTH_TOKEN' });
 };
-
diff --git a/client/coral-admin/src/actions/banUserDialog.js b/client/coral-admin/src/actions/banUserDialog.js
index 8b068051c..aac904a2b 100644
--- a/client/coral-admin/src/actions/banUserDialog.js
+++ b/client/coral-admin/src/actions/banUserDialog.js
@@ -1,7 +1,19 @@
-import {SHOW_BAN_USER_DIALOG, HIDE_BAN_USER_DIALOG} from '../constants/banUserDialog';
+import {
+  SHOW_BAN_USER_DIALOG,
+  HIDE_BAN_USER_DIALOG,
+} from '../constants/banUserDialog';
 
-export const showBanUserDialog = ({userId, username, commentId, commentStatus}) =>
-  ({type: SHOW_BAN_USER_DIALOG, userId, username, commentId, commentStatus});
-
-export const hideBanUserDialog = () => ({type: HIDE_BAN_USER_DIALOG});
+export const showBanUserDialog = ({
+  userId,
+  username,
+  commentId,
+  commentStatus,
+}) => ({
+  type: SHOW_BAN_USER_DIALOG,
+  userId,
+  username,
+  commentId,
+  commentStatus,
+});
 
+export const hideBanUserDialog = () => ({ type: HIDE_BAN_USER_DIALOG });
diff --git a/client/coral-admin/src/actions/community.js b/client/coral-admin/src/actions/community.js
index 6a091d214..d2b8f1a3f 100644
--- a/client/coral-admin/src/actions/community.js
+++ b/client/coral-admin/src/actions/community.js
@@ -7,73 +7,64 @@ import {
   SORT_UPDATE,
   SET_PAGE,
   SET_SEARCH_VALUE,
-  SET_ROLE,
-  SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
   HIDE_BANUSER_DIALOG,
   SHOW_REJECT_USERNAME_DIALOG,
-  HIDE_REJECT_USERNAME_DIALOG
+  HIDE_REJECT_USERNAME_DIALOG,
 } from '../constants/community';
 
 import t from 'coral-framework/services/i18n';
 
-export const fetchUsers = (query = {}) => (dispatch, _, {rest}) => {
+export const fetchUsers = (query = {}) => (dispatch, _, { rest }) => {
   dispatch(requestFetchUsers());
   rest(`/users?${queryString.stringify(query)}`)
-    .then(({result, page, count, limit, totalPages}) =>{
+    .then(({ result, page, count, limit, totalPages }) => {
       dispatch({
         type: FETCH_USERS_SUCCESS,
         users: result,
         page,
         count,
         limit,
-        totalPages
+        totalPages,
       });
     })
-    .catch((error) => {
+    .catch(error => {
       console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch({type: FETCH_USERS_FAILURE, error: errorMessage});
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
+      dispatch({ type: FETCH_USERS_FAILURE, error: errorMessage });
     });
 };
 
 const requestFetchUsers = () => ({
-  type: FETCH_USERS_REQUEST
+  type: FETCH_USERS_REQUEST,
 });
 
-export const updateSorting = (sort) => ({
+export const updateSorting = sort => ({
   type: SORT_UPDATE,
-  sort
+  sort,
 });
 
-export const setPage = (page) => ({
+export const setPage = page => ({
   type: SET_PAGE,
   page,
 });
 
-export const setSearchValue = (value) => ({
+export const setSearchValue = value => ({
   type: SET_SEARCH_VALUE,
   value,
 });
 
-export const setRole = (id, role) => (dispatch, _, {rest}) => {
-  return rest(`/users/${id}/role`, {method: 'POST', body: {role}})
-    .then(() => {
-      return dispatch({type: SET_ROLE, id, role});
-    });
-};
-
-export const setCommenterStatus = (id, status) => (dispatch, _, {rest}) => {
-  return rest(`/users/${id}/status`, {method: 'POST', body: {status}})
-    .then(() => {
-      return dispatch({type: SET_COMMENTER_STATUS, id, status});
-    });
-};
-
 // Ban User Dialog
-export const showBanUserDialog = (user) => ({type: SHOW_BANUSER_DIALOG, user});
-export const hideBanUserDialog = () => ({type: HIDE_BANUSER_DIALOG});
+export const showBanUserDialog = user => ({ type: SHOW_BANUSER_DIALOG, user });
+export const hideBanUserDialog = () => ({ type: HIDE_BANUSER_DIALOG });
 
 // Reject Username Dialog
-export const showRejectUsernameDialog = (user) => ({type: SHOW_REJECT_USERNAME_DIALOG, user});
-export const hideRejectUsernameDialog = () => ({type: HIDE_REJECT_USERNAME_DIALOG});
+export const showRejectUsernameDialog = user => ({
+  type: SHOW_REJECT_USERNAME_DIALOG,
+  user,
+});
+export const hideRejectUsernameDialog = () => ({
+  type: HIDE_REJECT_USERNAME_DIALOG,
+});
diff --git a/client/coral-admin/src/actions/config.js b/client/coral-admin/src/actions/config.js
index 4f3528be0..5e2995e85 100644
--- a/client/coral-admin/src/actions/config.js
+++ b/client/coral-admin/src/actions/config.js
@@ -1,7 +1,7 @@
 export const CONFIG_UPDATED = 'CONFIG_UPDATED';
 
-export const fetchConfig = () => (dispatch) => {
+export const fetchConfig = () => dispatch => {
   let json = document.getElementById('data');
   let data = JSON.parse(json.textContent);
-  dispatch({type: CONFIG_UPDATED, data});
+  dispatch({ type: CONFIG_UPDATED, data });
 };
diff --git a/client/coral-admin/src/actions/configure.js b/client/coral-admin/src/actions/configure.js
index 128de75bc..acc30be1b 100644
--- a/client/coral-admin/src/actions/configure.js
+++ b/client/coral-admin/src/actions/configure.js
@@ -1,13 +1,13 @@
 import * as actions from 'constants/configure';
 
-export const updatePending = ({updater, errorUpdater}) => {
-  return {type: actions.UPDATE_PENDING, updater, errorUpdater};
+export const updatePending = ({ updater, errorUpdater }) => {
+  return { type: actions.UPDATE_PENDING, updater, errorUpdater };
 };
 
 export const clearPending = () => {
-  return {type: actions.CLEAR_PENDING};
+  return { type: actions.CLEAR_PENDING };
 };
 
-export const setActiveSection = (section) => {
-  return {type: actions.SET_ACTIVE_SECTION, section};
+export const setActiveSection = section => {
+  return { type: actions.SET_ACTIVE_SECTION, section };
 };
diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js
index 02d562d65..2f8c8c250 100644
--- a/client/coral-admin/src/actions/install.js
+++ b/client/coral-admin/src/actions/install.js
@@ -3,17 +3,17 @@ import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
 import t from 'coral-framework/services/i18n';
 
-export const nextStep = () => ({type: actions.NEXT_STEP});
-export const previousStep = () => ({type: actions.PREVIOUS_STEP});
-export const goToStep = (step) => ({type: actions.GO_TO_STEP, step});
+export const nextStep = () => ({ type: actions.NEXT_STEP });
+export const previousStep = () => ({ type: actions.PREVIOUS_STEP });
+export const goToStep = step => ({ type: actions.GO_TO_STEP, step });
 
-const installRequest = () => ({type: actions.INSTALL_REQUEST});
-const installSuccess = () => ({type: actions.INSTALL_SUCCESS});
-const installFailure = (error) => ({type: actions.INSTALL_FAILURE, error});
+const installRequest = () => ({ type: actions.INSTALL_REQUEST });
+const installSuccess = () => ({ type: actions.INSTALL_SUCCESS });
+const installFailure = error => ({ type: actions.INSTALL_FAILURE, error });
 
-const addError = (name, error) => ({type: actions.ADD_ERROR, name, error});
-const hasError = (error) => ({type: actions.HAS_ERROR, error});
-const clearErrors = () => ({type: actions.CLEAR_ERRORS});
+const addError = (name, error) => ({ type: actions.ADD_ERROR, name, error });
+const hasError = error => ({ type: actions.HAS_ERROR, error });
+const clearErrors = () => ({ type: actions.CLEAR_ERRORS });
 
 const validation = (formData, dispatch, next) => {
   if (!(formData != null)) {
@@ -21,24 +21,21 @@ const validation = (formData, dispatch, next) => {
     return;
   }
 
-  const validKeys = Object.keys(formData)
-    .filter((name) => name !== 'domains');
+  const validKeys = Object.keys(formData).filter(name => name !== 'domains');
 
   // Required Validation
-  const empty = validKeys
-    .filter((name) => {
-      const cond = !formData[name].length;
+  const empty = validKeys.filter(name => {
+    const cond = !formData[name].length;
 
-      if (cond) {
+    if (cond) {
+      // Adding Error
+      dispatch(addError(name, 'This field is required.'));
+    } else {
+      dispatch(addError(name, ''));
+    }
 
-        // Adding Error
-        dispatch(addError(name, 'This field is required.'));
-      } else {
-        dispatch(addError(name, ''));
-      }
-
-      return cond;
-    });
+    return cond;
+  });
 
   if (empty.length) {
     dispatch(hasError());
@@ -46,19 +43,17 @@ const validation = (formData, dispatch, next) => {
   }
 
   // RegExp Validation
-  const validation = validKeys
-    .filter((name) => {
-      const cond = !validate[name](formData[name]);
-      if (cond) {
-
+  const validation = validKeys.filter(name => {
+    const cond = !validate[name](formData[name]);
+    if (cond) {
       // Adding Error
-        dispatch(addError(name, errorMsj[name]));
-      } else {
-        dispatch(addError(name, ''));
-      }
+      dispatch(addError(name, errorMsj[name]));
+    } else {
+      dispatch(addError(name, ''));
+    }
 
-      return cond;
-    });
+    return cond;
+  });
 
   if (validation.length) {
     dispatch(hasError());
@@ -67,20 +62,21 @@ const validation = (formData, dispatch, next) => {
 
   // Confirm Validation
   const prefixLength = 'confirm'.length;
-  const confirm = validKeys
-    .filter((name) => {
-      if (!name.startsWith('confirm')) {
-        return false;
-      }
+  const confirm = validKeys.filter(name => {
+    if (!name.startsWith('confirm')) {
+      return false;
+    }
 
-      // Check that 'confirmX' equals 'X'.
-      const other = name.substr(prefixLength, 1).toLowerCase() + name.substr(prefixLength + 1);
-      const cond = formData[other] !== formData[name];
-      if (cond) {
-        dispatch(addError(name, errorMsj[name]));
-      }
-      return cond;
-    });
+    // Check that 'confirmX' equals 'X'.
+    const other =
+      name.substr(prefixLength, 1).toLowerCase() +
+      name.substr(prefixLength + 1);
+    const cond = formData[other] !== formData[name];
+    if (cond) {
+      dispatch(addError(name, errorMsj[name]));
+    }
+    return cond;
+  });
 
   if (confirm.length) {
     dispatch(hasError());
@@ -105,41 +101,62 @@ export const submitUser = () => (dispatch, getState) => {
   });
 };
 
-export const finishInstall = () => (dispatch, getState, {rest}) => {
+export const finishInstall = () => (dispatch, getState, { rest }) => {
   const data = getState().install.data;
   dispatch(installRequest());
-  return rest('/setup', {method: 'POST', body: data})
+  return rest('/setup', { method: 'POST', body: data })
     .then(() => {
       dispatch(installSuccess());
       dispatch(nextStep());
     })
-    .catch((error) => {
+    .catch(error => {
       console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
       dispatch(installFailure(errorMessage));
     });
 };
 
-export const updateSettingsFormData = (name, value) => ({type: actions.UPDATE_FORMDATA_SETTINGS, name, value});
-export const updateUserFormData = (name, value) => ({type: actions.UPDATE_FORMDATA_USER, name, value});
-export const updatePermittedDomains = (value) => ({type: actions.UPDATE_PERMITTED_DOMAINS_SETTINGS, value});
+export const updateSettingsFormData = (name, value) => ({
+  type: actions.UPDATE_FORMDATA_SETTINGS,
+  name,
+  value,
+});
+export const updateUserFormData = (name, value) => ({
+  type: actions.UPDATE_FORMDATA_USER,
+  name,
+  value,
+});
+export const updatePermittedDomains = value => ({
+  type: actions.UPDATE_PERMITTED_DOMAINS_SETTINGS,
+  value,
+});
 
-const checkInstallRequest = () => ({type: actions.CHECK_INSTALL_REQUEST});
-const checkInstallSuccess = (installed) => ({type: actions.CHECK_INSTALL_SUCCESS, installed});
-const checkInstallFailure = (error) => ({type: actions.CHECK_INSTALL_FAILURE, error});
+const checkInstallRequest = () => ({ type: actions.CHECK_INSTALL_REQUEST });
+const checkInstallSuccess = installed => ({
+  type: actions.CHECK_INSTALL_SUCCESS,
+  installed,
+});
+const checkInstallFailure = error => ({
+  type: actions.CHECK_INSTALL_FAILURE,
+  error,
+});
 
-export const checkInstall = (next) => async (dispatch, _, {rest}) => {
+export const checkInstall = next => async (dispatch, _, { rest }) => {
   dispatch(checkInstallRequest());
 
   try {
-    const {installed} = await rest('/setup');
+    const { installed } = await rest('/setup');
     dispatch(checkInstallSuccess(installed));
     if (installed) {
       next();
     }
   } catch (error) {
     console.error(error);
-    const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+    const errorMessage = error.translation_key
+      ? t(`error.${error.translation_key}`)
+      : error.toString();
     dispatch(checkInstallFailure(errorMessage));
   }
 };
diff --git a/client/coral-admin/src/actions/moderation.js b/client/coral-admin/src/actions/moderation.js
index 18e31091f..cd09b04b2 100644
--- a/client/coral-admin/src/actions/moderation.js
+++ b/client/coral-admin/src/actions/moderation.js
@@ -1,41 +1,40 @@
 import * as actions from 'constants/moderation';
 
-export const toggleModal = (open) => ({type: actions.TOGGLE_MODAL, open});
-export const singleView = () => ({type: actions.SINGLE_VIEW});
+export const toggleModal = open => ({ type: actions.TOGGLE_MODAL, open });
+export const singleView = () => ({ type: actions.SINGLE_VIEW });
 
 // hide shortcuts note
-export const hideShortcutsNote = () => (dispatch, _, {storage}) => {
+export const hideShortcutsNote = () => (dispatch, _, { storage }) => {
   try {
     if (storage) {
       storage.setItem('coral:shortcutsNote', 'hide');
     }
   } catch (e) {
-
     // above will fail in Safari private mode
   }
 
-  dispatch({type: actions.HIDE_SHORTCUTS_NOTE});
+  dispatch({ type: actions.HIDE_SHORTCUTS_NOTE });
 };
 
-export const setSortOrder = (order) => ({
+export const setSortOrder = order => ({
   type: actions.SET_SORT_ORDER,
-  order
+  order,
 });
 
-export const toggleStorySearch = (active) => ({
-  type: active ? actions.SHOW_STORY_SEARCH : actions.HIDE_STORY_SEARCH
+export const toggleStorySearch = active => ({
+  type: active ? actions.SHOW_STORY_SEARCH : actions.HIDE_STORY_SEARCH,
 });
 
-export const storySearchChange = (value) => ({
+export const storySearchChange = value => ({
   type: actions.STORY_SEARCH_CHANGE_VALUE,
-  value
+  value,
 });
 
 export const clearState = () => ({
-  type: actions.MODERATION_CLEAR_STATE
+  type: actions.MODERATION_CLEAR_STATE,
 });
 
-export const selectCommentId = (id) => ({
+export const selectCommentId = id => ({
   type: actions.MODERATION_SELECT_COMMENT,
   id,
 });
diff --git a/client/coral-admin/src/actions/stories.js b/client/coral-admin/src/actions/stories.js
index 2524b0c3c..ab610ae20 100644
--- a/client/coral-admin/src/actions/stories.js
+++ b/client/coral-admin/src/actions/stories.js
@@ -10,7 +10,7 @@ import {
   UPDATE_ASSET_STATE_REQUEST,
   UPDATE_ASSET_STATE_SUCCESS,
   UPDATE_ASSET_STATE_FAILURE,
-  UPDATE_ASSETS
+  UPDATE_ASSETS,
 } from '../constants/stories';
 
 import t from 'coral-framework/services/i18n';
@@ -21,53 +21,58 @@ import t from 'coral-framework/services/i18n';
 
 // Fetch a page of assets
 // Get comments to fill each of the three lists on the mod queue
-export const fetchAssets = (query = {}) => (dispatch, _, {rest}) => {
-  dispatch({type: FETCH_ASSETS_REQUEST});
+export const fetchAssets = (query = {}) => (dispatch, _, { rest }) => {
+  dispatch({ type: FETCH_ASSETS_REQUEST });
   return rest(`/assets?${queryString.stringify(query)}`)
-    .then(({result, page, count, limit, totalPages}) =>
-      dispatch({type: FETCH_ASSETS_SUCCESS,
+    .then(({ result, page, count, limit, totalPages }) =>
+      dispatch({
+        type: FETCH_ASSETS_SUCCESS,
         assets: result,
         page,
         count,
         limit,
         totalPages,
-      }))
-    .catch((error) => {
+      })
+    )
+    .catch(error => {
       console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch({type: FETCH_ASSETS_FAILURE, error: errorMessage});
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
+      dispatch({ type: FETCH_ASSETS_FAILURE, error: errorMessage });
     });
 };
 
 // Update an asset state
 // Get comments to fill each of the three lists on the mod queue
-export const updateAssetState = (id, closedAt) => (dispatch, _, {rest}) => {
-  dispatch({type: UPDATE_ASSET_STATE_REQUEST, id, closedAt});
-  return rest(`/assets/${id}/status`, {method: 'PUT', body: {closedAt}})
-    .then(() => dispatch({type: UPDATE_ASSET_STATE_SUCCESS}))
-    .catch((error) => {
+export const updateAssetState = (id, closedAt) => (dispatch, _, { rest }) => {
+  dispatch({ type: UPDATE_ASSET_STATE_REQUEST, id, closedAt });
+  return rest(`/assets/${id}/status`, { method: 'PUT', body: { closedAt } })
+    .then(() => dispatch({ type: UPDATE_ASSET_STATE_SUCCESS }))
+    .catch(error => {
       console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch({type: UPDATE_ASSET_STATE_FAILURE, error: errorMessage});
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
+      dispatch({ type: UPDATE_ASSET_STATE_FAILURE, error: errorMessage });
     });
 };
 
-export const updateAssets = (assets) => (dispatch) => {
-  dispatch({type: UPDATE_ASSETS, assets});
+export const updateAssets = assets => dispatch => {
+  dispatch({ type: UPDATE_ASSETS, assets });
 };
 
-export const setPage = (page) => ({
+export const setPage = page => ({
   type: SET_PAGE,
   page,
 });
 
-export const setSearchValue = (value) => ({
+export const setSearchValue = value => ({
   type: SET_SEARCH_VALUE,
   value,
 });
 
-export const setCriteria = (criteria) => ({
+export const setCriteria = criteria => ({
   type: SET_CRITERIA,
   criteria,
 });
-
diff --git a/client/coral-admin/src/actions/suspendUserDialog.js b/client/coral-admin/src/actions/suspendUserDialog.js
index 06913147d..f81b76dd3 100644
--- a/client/coral-admin/src/actions/suspendUserDialog.js
+++ b/client/coral-admin/src/actions/suspendUserDialog.js
@@ -1,7 +1,19 @@
-import {SHOW_SUSPEND_USER_DIALOG, HIDE_SUSPEND_USER_DIALOG} from '../constants/suspendUserDialog.js';
+import {
+  SHOW_SUSPEND_USER_DIALOG,
+  HIDE_SUSPEND_USER_DIALOG,
+} from '../constants/suspendUserDialog.js';
 
-export const showSuspendUserDialog = ({userId, username, commentId, commentStatus}) =>
-  ({type: SHOW_SUSPEND_USER_DIALOG, userId, username, commentId, commentStatus});
-
-export const hideSuspendUserDialog = () => ({type: HIDE_SUSPEND_USER_DIALOG});
+export const showSuspendUserDialog = ({
+  userId,
+  username,
+  commentId,
+  commentStatus,
+}) => ({
+  type: SHOW_SUSPEND_USER_DIALOG,
+  userId,
+  username,
+  commentId,
+  commentStatus,
+});
 
+export const hideSuspendUserDialog = () => ({ type: HIDE_SUSPEND_USER_DIALOG });
diff --git a/client/coral-admin/src/actions/userDetail.js b/client/coral-admin/src/actions/userDetail.js
index 3a1de5745..f34f8e7a8 100644
--- a/client/coral-admin/src/actions/userDetail.js
+++ b/client/coral-admin/src/actions/userDetail.js
@@ -1,28 +1,37 @@
 import * as actions from 'constants/userDetail';
 
-export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
-export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
+export const viewUserDetail = userId => ({
+  type: actions.VIEW_USER_DETAIL,
+  userId,
+});
+export const hideUserDetail = () => ({ type: actions.HIDE_USER_DETAIL });
 
-export const changeUserDetailStatuses = (tab) => {
+export const changeTab = tab => {
   let statuses = null;
   if (tab === 'rejected') {
     statuses = ['REJECTED'];
   }
-  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
+  return { type: actions.CHANGE_TAB_USER_DETAIL, tab, statuses };
 };
 
-export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
+export const clearUserDetailSelections = () => ({
+  type: actions.CLEAR_USER_DETAIL_SELECTIONS,
+});
 
 export const toggleSelectCommentInUserDetail = (id, active) => {
   return {
-    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
-    id
+    type: active
+      ? actions.SELECT_USER_DETAIL_COMMENT
+      : actions.UNSELECT_USER_DETAIL_COMMENT,
+    id,
   };
 };
 
 export const toggleSelectAllCommentInUserDetail = (ids, active) => {
   return {
-    type: active ? actions.SELECT_ALL_USER_DETAIL_COMMENT : actions.CLEAR_USER_DETAIL_SELECTIONS,
-    ids
+    type: active
+      ? actions.SELECT_ALL_USER_DETAIL_COMMENT
+      : actions.CLEAR_USER_DETAIL_SELECTIONS,
+    ids,
   };
 };
diff --git a/client/coral-admin/src/actions/users.js b/client/coral-admin/src/actions/users.js
index 994a79a79..c538d7384 100644
--- a/client/coral-admin/src/actions/users.js
+++ b/client/coral-admin/src/actions/users.js
@@ -6,38 +6,56 @@ import t from 'coral-framework/services/i18n';
  */
 // change status of a user
 export const userStatusUpdate = (status, userId, commentId) => {
-  return (dispatch, _, {rest}) => {
-    dispatch({type: userTypes.UPDATE_STATUS_REQUEST});
-    return rest(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
-      .then((res) => dispatch({type: userTypes.UPDATE_STATUS_SUCCESS, res}))
-      .catch((error) => {
+  return (dispatch, _, { rest }) => {
+    dispatch({ type: userTypes.UPDATE_STATUS_REQUEST });
+    return rest(`/users/${userId}/status`, {
+      method: 'POST',
+      body: { status: status, comment_id: commentId },
+    })
+      .then(res => dispatch({ type: userTypes.UPDATE_STATUS_SUCCESS, res }))
+      .catch(error => {
         console.error(error);
-        const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-        dispatch({type: userTypes.UPDATE_STATUS_FAILURE, error: errorMessage});
+        const errorMessage = error.translation_key
+          ? t(`error.${error.translation_key}`)
+          : error.toString();
+        dispatch({
+          type: userTypes.UPDATE_STATUS_FAILURE,
+          error: errorMessage,
+        });
       });
   };
 };
 
 // change status of a user
 export const sendNotificationEmail = (userId, subject, body) => {
-  return (dispatch, _, {rest}) => {
-    return rest(`/users/${userId}/email`, {method: 'POST', body: {subject, body}})
-      .catch((error) => {
-        console.error(error);
-        const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-        dispatch({type: userTypes.USER_EMAIL_FAILURE, error: errorMessage});
-      });
+  return (dispatch, _, { rest }) => {
+    return rest(`/users/${userId}/email`, {
+      method: 'POST',
+      body: { subject, body },
+    }).catch(error => {
+      console.error(error);
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
+      dispatch({ type: userTypes.USER_EMAIL_FAILURE, error: errorMessage });
+    });
   };
 };
 
 // let a user edit their username
-export const enableUsernameEdit = (userId) => {
-  return (dispatch, _, {rest}) => {
-    return rest(`/users/${userId}/username-enable`, {method: 'POST'})
-      .catch((error) => {
+export const enableUsernameEdit = userId => {
+  return (dispatch, _, { rest }) => {
+    return rest(`/users/${userId}/username-enable`, { method: 'POST' }).catch(
+      error => {
         console.error(error);
-        const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-        dispatch({type: userTypes.USERNAME_ENABLE_FAILURE, error: errorMessage});
-      });
+        const errorMessage = error.translation_key
+          ? t(`error.${error.translation_key}`)
+          : error.toString();
+        dispatch({
+          type: userTypes.USERNAME_ENABLE_FAILURE,
+          error: errorMessage,
+        });
+      }
+    );
   };
 };
diff --git a/client/coral-admin/src/components/AccountHistory.css b/client/coral-admin/src/components/AccountHistory.css
new file mode 100644
index 000000000..09b324f08
--- /dev/null
+++ b/client/coral-admin/src/components/AccountHistory.css
@@ -0,0 +1,30 @@
+.table {
+  flex-direction: column;
+}
+
+.table, .headerRow, .row {
+  display: flex;
+}
+
+.headerRowItem, .item {
+  flex: 1;
+  padding: 20px;
+
+  &:nth-child(2) {
+    flex: 2;
+  }
+}
+
+.headerRowItem {
+  color: #595959;
+  font-weight: bold;
+}
+
+.headerRow, .row {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.action {
+  color: black;
+  font-weight: bold;
+}
diff --git a/client/coral-admin/src/components/AccountHistory.js b/client/coral-admin/src/components/AccountHistory.js
new file mode 100644
index 000000000..04df552be
--- /dev/null
+++ b/client/coral-admin/src/components/AccountHistory.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { murmur3 } from 'murmurhash-js';
+import styles from './AccountHistory.css';
+import cn from 'classnames';
+import flatten from 'lodash/flatten';
+import orderBy from 'lodash/orderBy';
+import moment from 'moment';
+
+const buildUserHistory = (userState = {}) => {
+  return orderBy(
+    flatten(
+      Object.keys(userState.status)
+        .filter(k => k !== '__typename')
+        .map(k => userState.status[k].history)
+    ),
+    'created_at',
+    'desc'
+  );
+};
+
+const buildActionResponse = (typename, until, status) => {
+  switch (typename) {
+    case 'UsernameStatusHistory':
+      return `Username ${status}`;
+    case 'BannedStatusHistory':
+      return status ? 'User banned' : 'Ban removed';
+    case 'SuspensionStatusHistory':
+      return until ? 'Account Suspended' : 'Suspension removed';
+    default:
+      return '-';
+  }
+};
+
+const getModerationValue = (userId, assignedBy = {}) => {
+  if (assignedBy && userId !== assignedBy.id) {
+    return assignedBy.username;
+  }
+  return 'SYSTEM';
+};
+
+class AccountHistory extends React.Component {
+  render() {
+    const { user } = this.props;
+    const userHistory = buildUserHistory(user.state);
+    return (
+      <div>
+        <div className={cn(styles.table, 'talk-admin-account-history')}>
+          <div
+            className={cn(
+              styles.headerRow,
+              'talk-admin-account-history-header-row'
+            )}
+          >
+            <div className={styles.headerRowItem}>Date</div>
+            <div className={styles.headerRowItem}>Action</div>
+            <div className={styles.headerRowItem}>Moderation</div>
+          </div>
+          {userHistory.map(
+            ({ __typename, created_at, assigned_by, until, status }) => (
+              <div
+                className={cn(styles.row, 'talk-admin-account-history-row')}
+                key={`${__typename}_${murmur3(created_at)}`}
+              >
+                <div
+                  className={cn(
+                    styles.item,
+                    'talk-admin-account-history-row-date'
+                  )}
+                >
+                  {moment(new Date(created_at)).format('MMM DD, YYYY')}
+                </div>
+                <div
+                  className={cn(
+                    styles.item,
+                    styles.action,
+                    'talk-admin-account-history-row-status'
+                  )}
+                >
+                  {buildActionResponse(__typename, until, status)}
+                </div>
+                <div
+                  className={cn(
+                    styles.item,
+                    'talk-admin-account-history-row-assigned-by'
+                  )}
+                >
+                  {getModerationValue(user.id, assigned_by)}
+                </div>
+              </div>
+            )
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+AccountHistory.propTypes = {
+  user: PropTypes.object.isRequired,
+};
+
+export default AccountHistory;
diff --git a/client/coral-admin/src/components/ActionsMenu.css b/client/coral-admin/src/components/ActionsMenu.css
index 1d2f91f74..c8638423f 100644
--- a/client/coral-admin/src/components/ActionsMenu.css
+++ b/client/coral-admin/src/components/ActionsMenu.css
@@ -8,9 +8,6 @@
   color: black;
   > :global(.mdl-menu__container) {
     margin-left: 10px;
-    > :global(.mdl-menu__outline) {
-      box-shadow: none;
-    }
   }
 }
 
@@ -18,12 +15,13 @@
   box-shadow: none;
   color: white;
   background-color: #616161;
+  border-color: #616161;
 }
 
 .arrowIcon {
   margin-left: 6px;
   margin-right: 0;
-  vertical-align: middle;
+  vertical-align: middle; 
   margin-right: 0;
   font-size: 14px;
 }
@@ -33,8 +31,10 @@
 }
 
 .menuItem {
-  background-color: #2a2a2a;
-  color: white;
+  color: #2a2a2a;
+  background-color: white;
+  font-size: 0.95em;
+
   &:first-child {
     margin-bottom: 1px;
     border-radius: 2px 2px 0px 0px;
@@ -43,7 +43,8 @@
     border-radius: 0px 0px 2px 2px;
   }
   &:hover, &:active, &:focus {
-    background-color: #767676;
+    background-color: #e2e2e2;
+    border-color: #616161;
   }
   &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active {
     background-color: #262626;
diff --git a/client/coral-admin/src/components/ActionsMenu.js b/client/coral-admin/src/components/ActionsMenu.js
index 6351afda7..fed143859 100644
--- a/client/coral-admin/src/components/ActionsMenu.js
+++ b/client/coral-admin/src/components/ActionsMenu.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button, Icon} from 'coral-ui';
-import {Menu} from 'react-mdl';
+import { Button, Icon } from 'coral-ui';
+import { Menu } from 'react-mdl';
 import cn from 'classnames';
-import {findDOMNode} from 'react-dom';
+import { findDOMNode } from 'react-dom';
 import styles from './ActionsMenu.css';
 
 import t from 'coral-framework/services/i18n';
@@ -13,37 +13,42 @@ let count = 0;
 class ActionsMenu extends React.Component {
   id = `actions-dropdown-${count++}`;
   menu = null;
-  state = {open: false};
+  state = { open: false };
   timeout = null;
 
   componentWillUnmount() {
     clearTimeout(this.timeout);
   }
 
-  handleRef = (ref) => {
+  handleRef = ref => {
     this.menu = ref ? findDOMNode(ref).parentNode : null;
-  }
+  };
 
   syncOpenState = () => {
     clearTimeout(this.timeout);
     this.timeout = setTimeout(() => {
-      this.setState({open: this.menu.className.indexOf('is-visible') >= 0});
+      this.setState({ open: this.menu.className.indexOf('is-visible') >= 0 });
     }, 150);
   };
 
   render() {
-    const {className = ''} = this.props;
+    const { className = '', buttonClassNames = '', label = '' } = this.props;
     return (
-      <div className={cn(styles.root, className)} onBlur={this.syncOpenState} >
+      <div className={cn(styles.root, className)} onBlur={this.syncOpenState}>
         <Button
-          cStyle='actions'
-          className={cn(styles.button, {[styles.buttonOpen]: this.state.open})}
+          cStyle="actions"
+          className={cn(
+            styles.button,
+            { [styles.buttonOpen]: this.state.open },
+            buttonClassNames
+          )}
           disabled={false}
           id={this.id}
           onClick={this.syncOpenState}
           icon={this.props.icon}
-          raised>
-          {t('modqueue.actions')}
+          raised
+        >
+          {label ? label : t('modqueue.actions')}
           <Icon
             name={this.state.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
             className={styles.arrowIcon}
@@ -61,6 +66,8 @@ ActionsMenu.propTypes = {
   icon: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
+  label: PropTypes.string,
+  buttonClassNames: PropTypes.string,
 };
 
 export default ActionsMenu;
diff --git a/client/coral-admin/src/components/ActionsMenuItem.js b/client/coral-admin/src/components/ActionsMenuItem.js
index 2bb9fa645..7370ba466 100644
--- a/client/coral-admin/src/components/ActionsMenuItem.js
+++ b/client/coral-admin/src/components/ActionsMenuItem.js
@@ -1,13 +1,18 @@
 import React from 'react';
 import cn from 'classnames';
-import {MenuItem} from 'react-mdl';
+import { MenuItem } from 'react-mdl';
 import PropTypes from 'prop-types';
 import styles from './ActionsMenu.css';
 import camelCase from 'lodash/camelCase';
 
-const ActionsMenuItem = (props) =>
-  <MenuItem className={cn(styles.menuItem, props.className, 'action-menu-item')} {...props} id={camelCase(props.children)}/>;
-  
+const ActionsMenuItem = props => (
+  <MenuItem
+    className={cn(styles.menuItem, props.className, 'action-menu-item')}
+    {...props}
+    id={camelCase(props.children)}
+  />
+);
+
 ActionsMenuItem.propTypes = {
   className: PropTypes.string,
   children: PropTypes.string,
diff --git a/client/coral-admin/src/components/AdminLogin.js b/client/coral-admin/src/components/AdminLogin.js
index d195ad72b..0dc0f2bd6 100644
--- a/client/coral-admin/src/components/AdminLogin.js
+++ b/client/coral-admin/src/components/AdminLogin.js
@@ -2,102 +2,128 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Layout from 'coral-admin/src/components/ui/Layout';
 import styles from './NotFound.css';
-import {Button, TextField, Alert, Success} from 'coral-ui';
+import { Button, TextField, Alert, Success } from 'coral-ui';
 import Recaptcha from 'react-recaptcha';
 import cn from 'classnames';
 
 class AdminLogin extends React.Component {
-
-  constructor (props) {
+  constructor(props) {
     super(props);
-    this.state = {email: '', password: '', requestPassword: false};
+    this.state = { email: '', password: '', requestPassword: false };
   }
 
-  handleSignIn = (e) => {
+  handleSignIn = e => {
     e.preventDefault();
     this.props.handleLogin(this.state.email, this.state.password);
-  }
+  };
 
   onRecaptchaLoad = () => {
-
     // do something?
-  }
+  };
 
-  onRecaptchaVerify = (recaptchaResponse) => {
-    this.props.handleLogin(this.state.email, this.state.password, recaptchaResponse);
-  }
+  onRecaptchaVerify = recaptchaResponse => {
+    this.props.handleLogin(
+      this.state.email,
+      this.state.password,
+      recaptchaResponse
+    );
+  };
 
-  handleRequestPassword = (e) => {
+  handleRequestPassword = e => {
     e.preventDefault();
     this.props.requestPasswordReset(this.state.email);
-  }
+  };
 
-  render () {
-    const {errorMessage, loginMaxExceeded, recaptchaPublic} = this.props;
+  render() {
+    const { errorMessage, loginMaxExceeded, recaptchaPublic } = this.props;
     const signInForm = (
       <form className="talk-admin-login-sign-in" onSubmit={this.handleSignIn}>
         {errorMessage && <Alert>{errorMessage}</Alert>}
         <TextField
           id="email"
-          label='Email Address'
+          label="Email Address"
           value={this.state.email}
-          onChange={(e) => this.setState({email: e.target.value})} />
+          onChange={e => this.setState({ email: e.target.value })}
+        />
         <TextField
           id="password"
-          label='Password'
+          label="Password"
           value={this.state.password}
-          onChange={(e) => this.setState({password: e.target.value})}
-          type='password' />
-        <div style={{height: 10}}></div>
+          onChange={e => this.setState({ password: e.target.value })}
+          type="password"
+        />
+        <div style={{ height: 10 }} />
         <Button
           className="talk-admin-login-sign-in-button"
-          type='submit'
-          cStyle='black'
+          type="submit"
+          cStyle="black"
           full
-          onClick={this.handleSignIn}>Sign In</Button>
+          onClick={this.handleSignIn}
+        >
+          Sign In
+        </Button>
         <p className={styles.forgotPasswordCTA}>
-          Forgot your password? <a href="#" className={styles.forgotPasswordLink} onClick={(e) => {
-            e.preventDefault();
-            this.setState({requestPassword: true});
-          }}>Request a new one.</a>
+          Forgot your password?{' '}
+          <a
+            href="#"
+            className={styles.forgotPasswordLink}
+            onClick={e => {
+              e.preventDefault();
+              this.setState({ requestPassword: true });
+            }}
+          >
+            Request a new one.
+          </a>
         </p>
-        {
-          loginMaxExceeded &&
+        {loginMaxExceeded && (
           <Recaptcha
             sitekey={recaptchaPublic}
-            render='explicit'
-            theme='dark'
+            render="explicit"
+            theme="dark"
             onloadCallback={this.onRecaptchaLoad}
-            verifyCallback={this.onRecaptchaVerify} />
-        }
+            verifyCallback={this.onRecaptchaVerify}
+          />
+        )}
       </form>
     );
-    const requestPasswordForm = (
-      this.props.passwordRequestSuccess
-        ? <p className={styles.passwordRequestSuccess} onClick={() => {
+    const requestPasswordForm = this.props.passwordRequestSuccess ? (
+      <p
+        className={styles.passwordRequestSuccess}
+        onClick={() => {
           location.href = location.href;
-        }}>
-          {this.props.passwordRequestSuccess} <a className={styles.signInLink} href="#">Sign in</a>
-          <Success />
-        </p>
-        : <form onSubmit={this.handleRequestPassword}>
-          <TextField
-            label='Email Address'
-            value={this.state.email}
-            onChange={(e) => this.setState({email: e.target.value})} />
-          <Button
-            type='submit'
-            cStyle='black'
-            full
-            onClick={this.handleRequestPassword}>Reset Password</Button>
-        </form>
+        }}
+      >
+        {this.props.passwordRequestSuccess}{' '}
+        <a className={styles.signInLink} href="#">
+          Sign in
+        </a>
+        <Success />
+      </p>
+    ) : (
+      <form onSubmit={this.handleRequestPassword}>
+        <TextField
+          label="Email Address"
+          value={this.state.email}
+          onChange={e => this.setState({ email: e.target.value })}
+        />
+        <Button
+          type="submit"
+          cStyle="black"
+          full
+          onClick={this.handleRequestPassword}
+        >
+          Reset Password
+        </Button>
+      </form>
     );
     return (
       <Layout fixedDrawer restricted={true}>
         <div className={cn(styles.loginLayout, 'talk-admin-login')}>
           <h1 className={styles.loginHeader}>Team sign in</h1>
-          <p className={styles.loginCTA}>Sign in to interact with your community.</p>
-          { this.state.requestPassword ? requestPasswordForm : signInForm }
+          <p className={styles.loginCTA}>
+            Sign in to interact with your community.
+          </p>
+          {this.state.requestPassword ? requestPasswordForm : signInForm}
         </div>
       </Layout>
     );
diff --git a/client/coral-admin/src/components/App.js b/client/coral-admin/src/components/App.js
index 1a15c72c3..52535f91a 100644
--- a/client/coral-admin/src/components/App.js
+++ b/client/coral-admin/src/components/App.js
@@ -5,7 +5,7 @@ import 'material-design-lite';
 import AppRouter from '../AppRouter';
 
 export default class App extends React.Component {
-  render () {
+  render() {
     return (
       <div>
         <ToastContainer />
diff --git a/client/coral-admin/src/components/ApproveButton.js b/client/coral-admin/src/components/ApproveButton.js
index 8ab455510..97a674221 100644
--- a/client/coral-admin/src/components/ApproveButton.js
+++ b/client/coral-admin/src/components/ApproveButton.js
@@ -3,15 +3,19 @@ import PropTypes from 'prop-types';
 
 import cn from 'classnames';
 import styles from './ApproveButton.css';
-import {Icon} from 'coral-ui';
+import { Icon } from 'coral-ui';
 
 import t from 'coral-framework/services/i18n';
 
-const ApproveButton = ({active, minimal, onClick, className}) => {
+const ApproveButton = ({ active, minimal, onClick, className }) => {
   const text = active ? t('modqueue.approved') : t('modqueue.approve');
   return (
     <button
-      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active}, className)}
+      className={cn(
+        styles.root,
+        { [styles.minimal]: minimal, [styles.active]: active },
+        className
+      )}
       onClick={onClick}
     >
       <Icon name={'done'} className={styles.icon} />
@@ -28,4 +32,3 @@ ApproveButton.propTypes = {
 };
 
 export default ApproveButton;
-
diff --git a/client/coral-admin/src/components/BanUserDialog.css b/client/coral-admin/src/components/BanUserDialog.css
index f13f0e6aa..538f90da2 100644
--- a/client/coral-admin/src/components/BanUserDialog.css
+++ b/client/coral-admin/src/components/BanUserDialog.css
@@ -1,153 +1,153 @@
 .dialog {
   border: none;
   box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
-  width: 500px;
+  width: 400px;
   top: 50%;
   transform: translateY(-50%);
-  height: 184px;
   padding: 20px;
+  border-radius: 4px;
+}
 
-  h2 {
-    color: black;
-    font-size: 1.76em;
-    font-weight: 500;
-    margin: 0;
-  }
+.header {
+  color: black;
+  font-size: 1.5em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
 
-  h3 {
-    color: black;
-    font-size: 1.4em;
-    font-weight: 500;
-    margin: 0;
-  }
+.subheader {
+  color: black;
+  font-size: 1.3em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
 }
 
 .textField {
-    margin-top: 15px;
+  margin-top: 15px;
 }
 
 .textField label {
-    font-size: 1.08em;
-    font-weight: bold;
-    margin-bottom: 5px;
+  font-size: 1.08em;
+  font-weight: bold;
+  margin-bottom: 5px;
 }
 
 .textField input {
-    width: 100%;
-    display: block;
-    border: none;
-    outline: none;
-    border: 1px solid rgba(0,0,0,.12);
-    padding: 10px 6px;
-    box-sizing: border-box;
-    border-radius: 2px;
-    margin: 5px auto;
+  width: 100%;
+  display: block;
+  border: none;
+  outline: none;
+  border: 1px solid rgba(0,0,0,.12);
+  padding: 10px 6px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin: 5px auto;
 }
 
 .footer {
-    margin: 20px auto 10px;
-    text-align: center;
+  margin: 20px auto 10px;
+  text-align: center;
 }
 
 .footer span {
-    display: block;
-    margin-bottom: 5px;
+  display: block;
+  margin-bottom: 5px;
 }
 
 .footer a {
-    color: #2c69b6;
-    cursor: pointer;
-    margin: 0 5px;
+  color: #2c69b6;
+  cursor: pointer;
+  margin: 0 5px;
 }
 
 .socialConnections {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .signInButton {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 .close {
-    font-size: 20px;
-    line-height: 14px;
-    top: 10px;
-    right: 10px;
-    position: absolute;
-    display: block;
-    font-weight: bold;
-    color: #363636;
-    cursor: pointer;
+  font-size: 20px;
+  line-height: 14px;
+  top: 10px;
+  right: 10px;
+  position: absolute;
+  display: block;
+  font-weight: bold;
+  color: #363636;
+  cursor: pointer;
 }
 
 .close:hover {
-    color: #6b6b6b;
+  color: #6b6b6b;
 }
 
 input.error{
-    border: solid 2px #f44336;
+  border: solid 2px #f44336;
 }
 
 .errorMsg, .hint {
-    color: grey;
-    font-weight: 600;
-    padding: 3px 0 16px;
+  color: grey;
+  font-weight: 600;
+  padding: 3px 0 16px;
 }
 
 .alert {
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 2px;
+  padding: 10px;
+  margin-bottom: 20px;
+  border-radius: 2px;
 }
 
 .alert--success {
-    border: solid 1px #1ec00e;
-    background: #cbf1b8;
-    color: #006900;
+  border: solid 1px #1ec00e;
+  background: #cbf1b8;
+  color: #006900;
 }
 
 .alert--error {
-    background: #FFEBEE;
-    color: #B71C1C;
+  background: #FFEBEE;
+  color: #B71C1C;
 }
 
 .userBox a {
-    color: #2c69b6;
-    cursor: pointer;
-    margin: 0px;
+  color: #2c69b6;
+  cursor: pointer;
+  margin: 0px;
 }
 
 .attention {
-    display: inline-block;
-    width: 15px;
-    height: 15px;
-    background: #B71C1C;
-    color: #FFEBEE;
-    font-weight: bolder;
-    padding: 4px;
-    vertical-align: middle;
-    border-radius: 20px;
-    box-sizing: border-box;
-    font-size: 9px;
-    line-height: 7px;
-    text-align: center;
-    margin-right: 5px;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: #B71C1C;
+  color: #FFEBEE;
+  font-weight: bolder;
+  padding: 4px;
+  vertical-align: middle;
+  border-radius: 20px;
+  box-sizing: border-box;
+  font-size: 9px;
+  line-height: 7px;
+  text-align: center;
+  margin-right: 5px;
 }
 
 .action {
-    margin-top: 15px;
+  margin-top: 15px;
 }
 
 .passwordRequestSuccess {
-    border: 1px solid green;
-    background-color: lightgreen;
-    padding: 10px;
+  border: 1px solid green;
+  background-color: lightgreen;
+  padding: 10px;
 }
 
 .passwordRequestFailure {
-    border: 1px solid orange;
-    background-color: 1px solid coral;
-    padding: 10px;
+  border: 1px solid orange;
+  background-color: 1px solid coral;
+  padding: 10px;
 }
 
 .cancel {
@@ -160,6 +160,20 @@ input.error{
 }
 
 .buttons {
-  margin: 20px;
-  text-align: center;
+  margin-top: 8px;
+  margin-bottom: 6px;
+  text-align: right;
+}
+
+.legend {
+  padding: 0;
+  font-weight: bold;
+}
+
+.messageInput {
+  border-radius: 3px;
+  width: 100%;
+  padding: 10px;
+  font-size: 14px;
+  box-sizing: border-box;
 }
diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js
index 61fa3ca9d..430ee2fe4 100644
--- a/client/coral-admin/src/components/BanUserDialog.js
+++ b/client/coral-admin/src/components/BanUserDialog.js
@@ -1,45 +1,130 @@
 import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
-import {Dialog} from 'coral-ui';
+import { Dialog } from 'coral-ui';
 import styles from './BanUserDialog.css';
 
 import Button from 'coral-ui/components/Button';
 import t from 'coral-framework/services/i18n';
 
-const BanUserDialog = ({open, onCancel, onPerform, username, info}) => (
-  <Dialog
-    className={cn(styles.dialog, 'talk-ban-user-dialog')}
-    id="banUserDialog"
-    open={open}
-    onCancel={onCancel}
-    title={t('bandialog.ban_user')}>
-    <span className={styles.close} onClick={onCancel}>×</span>
-    <div className={styles.header}>
-      <h2>{t('bandialog.ban_user')}</h2>
-    </div>
-    <div className={styles.separator}>
-      <h3>{t('bandialog.are_you_sure', username)}</h3>
-      <i>{info}</i>
-    </div>
-    <div className={styles.buttons}>
-      <Button
-        className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
-        cStyle="cancel"
-        onClick={onCancel}
-        raised >
-        {t('bandialog.cancel')}
-      </Button>
-      <Button 
-        className={cn(styles.ban, 'talk-ban-user-dialog-button-confirm')}
-        cStyle="black"
-        onClick={onPerform}
-        raised >
-        {t('bandialog.yes_ban_user')}
-      </Button>
-    </div>
-  </Dialog>
-);
+const initialState = { step: 0, message: '' };
+
+class BanUserDialog extends React.Component {
+  state = initialState;
+
+  componentWillReceiveProps(next) {
+    if (this.props.open && !next.open) {
+      this.setState(initialState);
+    }
+  }
+
+  handleMessageChange = e => {
+    const { value: message } = e;
+    this.setState({ message });
+  };
+
+  goToStep1 = () => {
+    this.setState({
+      step: 1,
+      message: t('bandialog.email_message_ban', this.props.username),
+    });
+  };
+
+  renderStep0() {
+    const { onCancel, username, info } = this.props;
+
+    return (
+      <section>
+        <h2 className={styles.header}>{t('bandialog.ban_user')}</h2>
+        <h3 className={styles.subheader}>
+          {t('bandialog.are_you_sure', username)}
+        </h3>
+        <p className={styles.description}>{info}</p>
+        <div className={styles.buttons}>
+          <Button
+            className={cn('talk-ban-user-dialog-button-cancel')}
+            cStyle="white"
+            onClick={onCancel}
+            raised
+          >
+            {t('bandialog.cancel')}
+          </Button>
+          <Button
+            className={cn('talk-ban-user-dialog-button-confirm')}
+            cStyle="black"
+            onClick={this.goToStep1}
+            raised
+          >
+            {t('bandialog.yes_ban_user')}
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  renderStep1() {
+    const { onCancel, onPerform } = this.props;
+    const { message } = this.state;
+
+    return (
+      <section>
+        <h2 className={styles.header}>{t('bandialog.notify_ban_headline')}</h2>
+        <p className={styles.description}>
+          {t('bandialog.notify_ban_description')}
+        </p>
+        <fieldset>
+          <legend className={styles.legend}>
+            {t('bandialog.write_a_message')}
+          </legend>
+          <textarea
+            rows={5}
+            className={styles.messageInput}
+            value={message}
+            onChange={this.handleMessageChange}
+          />
+        </fieldset>
+        <div className={styles.buttons}>
+          <Button
+            className={cn('talk-ban-user-dialog-button-cancel')}
+            cStyle="white"
+            onClick={onCancel}
+            raised
+          >
+            {t('bandialog.cancel')}
+          </Button>
+          <Button
+            className={cn('talk-ban-user-dialog-button-confirm')}
+            cStyle="black"
+            onClick={onPerform}
+            raised
+          >
+            {t('bandialog.send')}
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  render() {
+    const { step } = this.state;
+    const { open, onCancel } = this.props;
+    return (
+      <Dialog
+        className={cn(styles.dialog, 'talk-ban-user-dialog')}
+        id="banUserDialog"
+        open={open}
+        onCancel={onCancel}
+        title={t('bandialog.ban_user')}
+      >
+        <span className={styles.close} onClick={onCancel}>
+          ×
+        </span>
+        {step === 0 && this.renderStep0()}
+        {step === 1 && this.renderStep1()}
+      </Dialog>
+    );
+  }
+}
 
 BanUserDialog.propTypes = {
   open: PropTypes.bool,
diff --git a/client/coral-admin/src/components/ButtonCopyToClipboard.js b/client/coral-admin/src/components/ButtonCopyToClipboard.js
index 5bc5767ba..7da886e5f 100644
--- a/client/coral-admin/src/components/ButtonCopyToClipboard.js
+++ b/client/coral-admin/src/components/ButtonCopyToClipboard.js
@@ -1,15 +1,11 @@
 import React from 'react';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 import t from 'coral-framework/services/i18n';
-import {withCopyToClipboard} from 'coral-framework/hocs';
+import { withCopyToClipboard } from 'coral-framework/hocs';
 
 class ButtonCopyToClipboard extends React.Component {
-  render () {
-    return (
-      <Button {...this.props} >
-        {t('common.copy')}
-      </Button>
-    );
+  render() {
+    return <Button {...this.props}>{t('common.copy')}</Button>;
   }
 }
 
diff --git a/client/coral-admin/src/components/CommentAnimatedEdit.js b/client/coral-admin/src/components/CommentAnimatedEdit.js
index e24496138..43fbf9fbf 100644
--- a/client/coral-admin/src/components/CommentAnimatedEdit.js
+++ b/client/coral-admin/src/components/CommentAnimatedEdit.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import {murmur3} from 'murmurhash-js';
-import {CSSTransitionGroup} from 'react-transition-group';
+import { murmur3 } from 'murmurhash-js';
+import { CSSTransitionGroup } from 'react-transition-group';
 import styles from './CommentAnimatedEdit.css';
 import PropTypes from 'prop-types';
 
-const CommentBodyHighlighter = ({children, body}) => {
+const CommentBodyHighlighter = ({ children, body }) => {
   return (
     <CSSTransitionGroup
       component={'div'}
@@ -20,7 +20,9 @@ const CommentBodyHighlighter = ({children, body}) => {
       transitionEnterTimeout={3600}
       transitionLeaveTimeout={2800}
     >
-      {React.cloneElement(React.Children.only(children), {key: murmur3(body)})}
+      {React.cloneElement(React.Children.only(children), {
+        key: murmur3(body),
+      })}
     </CSSTransitionGroup>
   );
 };
diff --git a/client/coral-admin/src/components/CommentBodyHighlighter.js b/client/coral-admin/src/components/CommentBodyHighlighter.js
index 177df5338..9e381bf0b 100644
--- a/client/coral-admin/src/components/CommentBodyHighlighter.js
+++ b/client/coral-admin/src/components/CommentBodyHighlighter.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {matchLinks} from '../utils';
+import { matchLinks } from '../utils';
 import memoize from 'lodash/memoize';
 
 function escapeRegExp(string) {
@@ -9,18 +9,18 @@ function escapeRegExp(string) {
 // generate a regulare expression that catches the `phrases`.
 function generateRegExp(phrases) {
   const inner = phrases
-    .map((phrase) =>
-      phrase.split(/\s+/)
-        .map((word) => escapeRegExp(word))
+    .map(phrase =>
+      phrase
+        .split(/\s+/)
+        .map(word => escapeRegExp(word))
         .join('[\\s"?!.]+')
-    ).join('|');
+    )
+    .join('|');
 
   const pattern = `(^|[^\\w])(${inner})(?=[^\\w]|$)`;
   try {
     return new RegExp(pattern, 'iu');
-  }
-  catch (_err) {
-
+  } catch (_err) {
     // IE does not support unicode support, so we'll create one without.
     return new RegExp(pattern, 'i');
   }
@@ -39,10 +39,9 @@ const getPhrasesRegexpMemoized = memoize(getPhrasesRegexp);
 function markPhrases(body, suspectWords, bannedWords, keyPrefix) {
   const regexp = getPhrasesRegexpMemoized(suspectWords, bannedWords);
   const tokens = body.split(regexp);
-  return tokens.map((token, i) =>
-    i % 3 === 2
-      ? <mark key={`${keyPrefix}_${i}`}>{token}</mark>
-      : token
+  return tokens.map(
+    (token, i) =>
+      i % 3 === 2 ? <mark key={`${keyPrefix}_${i}`}>{token}</mark> : token
   );
 }
 
@@ -53,34 +52,26 @@ function markLinks(body) {
   const content = [];
   let index = 0;
   if (matches) {
-    matches
-      .forEach((match, i) => {
-        content.push(body.substring(index, match.index));
-        content.push(<mark key={i}>{match.text}</mark>);
-        index = match.lastIndex;
-      });
+    matches.forEach((match, i) => {
+      content.push(body.substring(index, match.index));
+      content.push(<mark key={i}>{match.text}</mark>);
+      index = match.lastIndex;
+    });
   }
   content.push(body.substring(index));
   return content;
 }
 
-export default ({suspectWords, bannedWords, body, ...rest}) => {
-
+export default ({ suspectWords, bannedWords, body, ...rest }) => {
   // First highlight links.
-  const content = markLinks(body)
-    .map((element, index) => {
+  const content = markLinks(body).map((element, index) => {
+    // Keep highlighted links.
+    if (typeof element !== 'string') {
+      return element;
+    }
 
-      // Keep highlighted links.
-      if (typeof element !== 'string') {
-        return element;
-      }
-
-      // Highlight suspect and banned phrase inside this part of text.
-      return markPhrases(element, suspectWords, bannedWords, index);
-    });
-  return (
-    <div {...rest}>
-      {content}
-    </div>
-  );
+    // Highlight suspect and banned phrase inside this part of text.
+    return markPhrases(element, suspectWords, bannedWords, index);
+  });
+  return <div {...rest}>{content}</div>;
 };
diff --git a/client/coral-admin/src/components/CommentDetails.css b/client/coral-admin/src/components/CommentDetails.css
index 1ee1c46dd..2727a8607 100644
--- a/client/coral-admin/src/components/CommentDetails.css
+++ b/client/coral-admin/src/components/CommentDetails.css
@@ -5,7 +5,7 @@
 
 .moreDetail {
   position: absolute;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 500;
   color: black;
   right: 16px;
diff --git a/client/coral-admin/src/components/CommentDetails.js b/client/coral-admin/src/components/CommentDetails.js
index 418be0354..dc1be2d85 100644
--- a/client/coral-admin/src/components/CommentDetails.js
+++ b/client/coral-admin/src/components/CommentDetails.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from './CommentDetails.css';
 import t from 'coral-framework/services/i18n';
@@ -7,26 +7,26 @@ import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
 
 class CommentDetails extends Component {
   state = {
-    showDetail: false
+    showDetail: false,
   };
 
-  constructor () {
+  constructor() {
     super();
     this.state = {
-      showDetail: false
+      showDetail: false,
     };
   }
 
   toggleDetail = () => {
-    this.setState((state) => ({
-      showDetail: !state.showDetail
+    this.setState(state => ({
+      showDetail: !state.showDetail,
     }));
     this.props.clearHeightCache && this.props.clearHeightCache();
-  }
+  };
 
   render() {
-    const {data, root, comment, clearHeightCache} = this.props;
-    const {showDetail} = this.state;
+    const { data, root, comment, clearHeightCache } = this.props;
+    const { showDetail } = this.state;
     const queryData = {
       root,
       comment,
@@ -49,12 +49,14 @@ class CommentDetails extends Component {
           queryData={queryData}
           more={showDetail}
         />
-        {showDetail && <Slot
-          fill="adminCommentMoreDetails"
-          data={data}
-          clearHeightCache={clearHeightCache}
-          queryData={queryData}
-        />}
+        {showDetail && (
+          <Slot
+            fill="adminCommentMoreDetails"
+            data={data}
+            clearHeightCache={clearHeightCache}
+            queryData={queryData}
+          />
+        )}
       </div>
     );
   }
diff --git a/client/coral-admin/src/components/CommentLabels.js b/client/coral-admin/src/components/CommentLabels.js
index bff4f575a..e50d53632 100644
--- a/client/coral-admin/src/components/CommentLabels.js
+++ b/client/coral-admin/src/components/CommentLabels.js
@@ -9,37 +9,67 @@ import styles from './CommentLabels.css';
 const staffRoles = ['ADMIN', 'STAFF', 'MODERATOR'];
 
 function isUserFlagged(actions) {
-  return actions.some((action) => action.__typename === 'FlagAction' && action.user);
+  return actions.some(
+    action => action.__typename === 'FlagAction' && action.user
+  );
 }
 
 function getUserFlaggedType(actions) {
-  return actions
-    .some((action) =>
+  return actions.some(
+    action =>
       action.__typename === 'FlagAction' &&
       action.user &&
-      action.user.roles.some((role) => staffRoles.includes(role))
-    ) ? 'Staff' : 'User';
+      staffRoles.includes(action.user.role)
+  )
+    ? 'Staff'
+    : 'User';
 }
 
 function hasSuspectedWords(actions) {
-  return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'Matched suspect word filter');
+  return actions.some(
+    action =>
+      action.__typename === 'FlagAction' && action.reason === 'SUSPECT_WORD'
+  );
 }
 
 function hasHistoryFlag(actions) {
-  return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TRUST');
+  return actions.some(
+    action => action.__typename === 'FlagAction' && action.reason === 'TRUST'
+  );
 }
 
-const CommentLabels = ({comment, comment: {className, status, actions, hasParent}}) => {
+const CommentLabels = ({
+  comment,
+  comment: { className, status, actions, hasParent },
+}) => {
   return (
     <div className={cn(className, styles.root)}>
       <div className={styles.coreLabels}>
-        {hasParent && <Label iconName="reply" className={styles.replyLabel}>reply</Label>}
-        {status === 'PREMOD' && <Label iconName="query_builder" className={styles.premodLabel}>Pre-Mod</Label>}
-        {isUserFlagged(actions) && <FlagLabel iconName="person">{getUserFlaggedType(actions)}</FlagLabel>}
-        {hasSuspectedWords(actions) && <FlagLabel iconName="sms_failed">Suspect</FlagLabel>}
-        {hasHistoryFlag(actions) && <FlagLabel iconName="sentiment_very_dissatisfied">History</FlagLabel>}
+        {hasParent && (
+          <Label iconName="reply" className={styles.replyLabel}>
+            reply
+          </Label>
+        )}
+        {status === 'PREMOD' && (
+          <Label iconName="query_builder" className={styles.premodLabel}>
+            Pre-Mod
+          </Label>
+        )}
+        {isUserFlagged(actions) && (
+          <FlagLabel iconName="person">{getUserFlaggedType(actions)}</FlagLabel>
+        )}
+        {hasSuspectedWords(actions) && (
+          <FlagLabel iconName="sms_failed">Suspect</FlagLabel>
+        )}
+        {hasHistoryFlag(actions) && (
+          <FlagLabel iconName="sentiment_very_dissatisfied">History</FlagLabel>
+        )}
       </div>
-      <Slot className={styles.slot} fill="adminCommentLabels" queryData={{comment}} />
+      <Slot
+        className={styles.slot}
+        fill="adminCommentLabels"
+        queryData={{ comment }}
+      />
     </div>
   );
 };
diff --git a/client/coral-admin/src/components/CountBadge.js b/client/coral-admin/src/components/CountBadge.js
index ff47cf9a6..c270817b9 100644
--- a/client/coral-admin/src/components/CountBadge.js
+++ b/client/coral-admin/src/components/CountBadge.js
@@ -4,7 +4,7 @@ import styles from './CountBadge.css';
 
 import t from 'coral-framework/services/i18n';
 
-const CountBadge = ({count}) => {
+const CountBadge = ({ count }) => {
   let number = count;
 
   // shorten large counts to abbreviations
@@ -16,13 +16,11 @@ const CountBadge = ({count}) => {
     number = `${(number / 1e3).toFixed(1)}${t('modqueue.thousand')}`;
   }
 
-  return (
-    <span className={styles.count}>{number}</span>
-  );
+  return <span className={styles.count}>{number}</span>;
 };
 
 CountBadge.propTypes = {
-  count: PropTypes.number.isRequired
+  count: PropTypes.number.isRequired,
 };
 
 export default CountBadge;
diff --git a/client/coral-admin/src/components/Drawer.js b/client/coral-admin/src/components/Drawer.js
index 29ee8d17e..60973e8c2 100644
--- a/client/coral-admin/src/components/Drawer.js
+++ b/client/coral-admin/src/components/Drawer.js
@@ -1,61 +1,61 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Navigation, Drawer} from 'react-mdl';
-import {IndexLink, Link} from 'react-router';
+import { Navigation, Drawer } from 'react-mdl';
+import { IndexLink, Link } from 'react-router';
 import styles from './Drawer.css';
 import t from 'coral-framework/services/i18n';
-import {can} from 'coral-framework/services/perms';
+import { can } from 'coral-framework/services/perms';
 import cn from 'classnames';
 
-const CoralDrawer = ({handleLogout, auth = {}}) => (
+const CoralDrawer = ({ handleLogout, auth = {} }) => (
   <Drawer className={cn('talk-admin-drawer-nav', styles.drawer)}>
-    { auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
+    {auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ? (
       <div>
         <Navigation className={styles.nav}>
-          {
-            can(auth.user, 'MODERATE_COMMENTS') && (
-              <IndexLink
-                className={cn('talk-admin-nav-moderate', styles.navLink)}   
-                to="/admin/moderate"
-                activeClassName={styles.active}>
-                {t('configure.moderate')}
-              </IndexLink>
-            )
-          }
+          {can(auth.user, 'MODERATE_COMMENTS') && (
+            <IndexLink
+              className={cn('talk-admin-nav-moderate', styles.navLink)}
+              to="/admin/moderate"
+              activeClassName={styles.active}
+            >
+              {t('configure.moderate')}
+            </IndexLink>
+          )}
           <Link
             className={cn('talk-admin-nav-stories', styles.navLink)}
             to="/admin/stories"
-            activeClassName={styles.active}>
+            activeClassName={styles.active}
+          >
             {t('configure.stories')}
           </Link>
           <Link
             className={cn('talk-admin-nav-community', styles.navLink)}
             to="/admin/community"
-            activeClassName={styles.active}>
+            activeClassName={styles.active}
+          >
             {t('configure.community')}
           </Link>
-          {
-            can(auth.user, 'UPDATE_CONFIG') &&
-            (
-              <Link
-                className={cn('talk-admin-nav-configure', styles.navLink)}
-                to="/admin/configure"
-                activeClassName={styles.active}>
-                {t('configure.configure')}
-              </Link>
-            )
-          }
+          {can(auth.user, 'UPDATE_CONFIG') && (
+            <Link
+              className={cn('talk-admin-nav-configure', styles.navLink)}
+              to="/admin/configure"
+              activeClassName={styles.active}
+            >
+              {t('configure.configure')}
+            </Link>
+          )}
           <a onClick={handleLogout}>Sign Out</a>
           <span>{`v${process.env.VERSION}`}</span>
         </Navigation>
-      </div> : null }
+      </div>
+    ) : null}
   </Drawer>
 );
 
 CoralDrawer.propTypes = {
   handleLogout: PropTypes.func.isRequired,
   restricted: PropTypes.bool, // hide app elements from a logged out user
-  auth: PropTypes.object
+  auth: PropTypes.object,
 };
 
 export default CoralDrawer;
diff --git a/client/coral-admin/src/components/EmptyCard.js b/client/coral-admin/src/components/EmptyCard.js
index 8adc63747..e87e8f486 100644
--- a/client/coral-admin/src/components/EmptyCard.js
+++ b/client/coral-admin/src/components/EmptyCard.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Card} from 'coral-ui';
+import { Card } from 'coral-ui';
 
-const EmptyCard = (props) => (
-  <Card style={{textAlign: 'center', maxWidth: 400, margin: '0 auto'}}>
+const EmptyCard = props => (
+  <Card style={{ textAlign: 'center', maxWidth: 400, margin: '0 auto' }}>
     {props.children}
   </Card>
 );
 
 EmptyCard.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
 };
 
 export default EmptyCard;
diff --git a/client/coral-admin/src/components/FullLoading.js b/client/coral-admin/src/components/FullLoading.js
index dee584aed..daf2bee01 100644
--- a/client/coral-admin/src/components/FullLoading.js
+++ b/client/coral-admin/src/components/FullLoading.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import {Layout} from 'react-mdl';
+import { Layout } from 'react-mdl';
 import styles from './FullLoading.css';
-import {CoralLogo} from 'coral-ui';
+import { CoralLogo } from 'coral-ui';
 
 export const FullLoading = () => (
   <Layout fixedDrawer>
-    <div className={styles.layout} >
+    <div className={styles.layout}>
       <h1>Loading</h1>
       <CoralLogo />
     </div>
diff --git a/client/coral-admin/src/components/IfHasLink.js b/client/coral-admin/src/components/IfHasLink.js
index 73b335815..8209a28e5 100644
--- a/client/coral-admin/src/components/IfHasLink.js
+++ b/client/coral-admin/src/components/IfHasLink.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import {matchLinks} from '../utils';
+import { matchLinks } from '../utils';
 
-export default ({text, children}) => {
+export default ({ text, children }) => {
   const hasLinks = !!matchLinks(text);
 
   if (!hasLinks) {
diff --git a/client/coral-admin/src/components/LoadMore.js b/client/coral-admin/src/components/LoadMore.js
index eaacb4413..8e7f687a2 100644
--- a/client/coral-admin/src/components/LoadMore.js
+++ b/client/coral-admin/src/components/LoadMore.js
@@ -1,23 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 import styles from './LoadMore.css';
 import cn from 'classnames';
 
-const LoadMore = ({loadMore, showLoadMore, className, ...rest}) =>
+const LoadMore = ({ loadMore, showLoadMore, className = '', ...rest }) => (
   <div {...rest} className={cn(className, styles.loadMoreContainer)}>
-    {
-      showLoadMore && <Button
-        className={styles.loadMore}
-        onClick={loadMore}>
+    {showLoadMore && (
+      <Button className={styles.loadMore} onClick={loadMore}>
         Load More
       </Button>
-    }
-  </div>;
+    )}
+  </div>
+);
 
 LoadMore.propTypes = {
+  className: PropTypes.string,
   loadMore: PropTypes.func.isRequired,
-  showLoadMore: PropTypes.bool.isRequired
+  showLoadMore: PropTypes.bool.isRequired,
 };
 
 export default LoadMore;
diff --git a/client/coral-admin/src/components/Modal.js b/client/coral-admin/src/components/Modal.js
index b667258c2..78a6f512d 100644
--- a/client/coral-admin/src/components/Modal.js
+++ b/client/coral-admin/src/components/Modal.js
@@ -1,11 +1,13 @@
 import React from 'react';
-import {Button, Icon} from 'react-mdl';
+import { Button, Icon } from 'react-mdl';
 import styles from './Modal.css';
 
-export default ({open, children, onClose}) => (
+export default ({ open, children, onClose }) => (
   <div className={`${styles.container} ${!open ? styles.hide : ''}`}>
     <div className={styles.inner}>
-      <Button className={styles.close} onClick={onClose}><Icon name='close' /></Button>
+      <Button className={styles.close} onClick={onClose}>
+        <Icon name="close" />
+      </Button>
       {children}
     </div>
   </div>
diff --git a/client/coral-admin/src/components/ModerationKeysModal.css b/client/coral-admin/src/components/ModerationKeysModal.css
index 6c7dc61e9..87e6de867 100644
--- a/client/coral-admin/src/components/ModerationKeysModal.css
+++ b/client/coral-admin/src/components/ModerationKeysModal.css
@@ -28,7 +28,7 @@
   padding: 15px;
   box-sizing: border-box;
   box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
-  z-index: 10;
+  z-index: 4;
 
   .ctaHeader {
     font-size: 16px;
diff --git a/client/coral-admin/src/components/ModerationKeysModal.js b/client/coral-admin/src/components/ModerationKeysModal.js
index 5f43daf09..c8066b81d 100644
--- a/client/coral-admin/src/components/ModerationKeysModal.js
+++ b/client/coral-admin/src/components/ModerationKeysModal.js
@@ -5,52 +5,75 @@ import styles from './ModerationKeysModal.css';
 import t from 'coral-framework/services/i18n';
 
 export default class ModerationKeysModal extends React.Component {
-
   static propTypes = {
     open: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired,
     hideShortcutsNote: PropTypes.func.isRequired,
     shortcutsNoteVisible: PropTypes.string.isRequired,
-    queueCount: PropTypes.number.isRequired
-  }
+    queueCount: PropTypes.number.isRequired,
+  };
 
   buildShortcuts = () => {
     return [
       {
         title: 'modqueue.navigation',
         shortcuts: {
-          'j': 'modqueue.next_comment',
-          'k': 'modqueue.prev_comment',
+          j: 'modqueue.next_comment',
+          k: 'modqueue.prev_comment',
           'ctrl+f': 'modqueue.toggle_search',
-          't': 'modqueue.next_queue',
+          t: 'modqueue.next_queue',
           [`1...${this.props.queueCount}`]: 'modqueue.jump_to_queue',
-          's': 'modqueue.singleview',
-          '?': 'modqueue.thismenu'
-        }
+          s: 'modqueue.singleview',
+          '?': 'modqueue.thismenu',
+        },
       },
       {
         title: 'modqueue.actions',
         shortcuts: {
-          'd': 'modqueue.approve',
-          'f': 'modqueue.reject'
-        }
-      }
+          d: 'modqueue.approve',
+          f: 'modqueue.reject',
+        },
+      },
     ];
-  }
+  };
 
-  render () {
-    const {open, onClose, hideShortcutsNote, shortcutsNoteVisible} = this.props;
+  render() {
+    const {
+      open,
+      onClose,
+      hideShortcutsNote,
+      shortcutsNoteVisible,
+    } = this.props;
     return (
       <div>
-        <div className={styles.callToAction} style={{display: shortcutsNoteVisible === 'show' ? 'block' : 'none'}}>
-          <div onClick={hideShortcutsNote} className={styles.closeButton}>×</div>
+        <div
+          className={styles.callToAction}
+          style={{
+            display: shortcutsNoteVisible === 'show' ? 'block' : 'none',
+          }}
+        >
+          <div onClick={hideShortcutsNote} className={styles.closeButton}>
+            ×
+          </div>
           <p className={styles.ctaHeader}>{t('modqueue.mod_faster')}</p>
-          <p><strong>{t('modqueue.try_these')}:</strong></p>
+          <p>
+            <strong>{t('modqueue.try_these')}:</strong>
+          </p>
           <ul>
-            <li><span>{t('modqueue.approve')}</span> <span className={styles.smallKey}>d</span></li>
-            <li><span>{t('modqueue.reject')}</span> <span className={styles.smallKey}>f</span></li>
+            <li>
+              <span>{t('modqueue.approve')}</span>{' '}
+              <span className={styles.smallKey}>d</span>
+            </li>
+            <li>
+              <span>{t('modqueue.reject')}</span>{' '}
+              <span className={styles.smallKey}>f</span>
+            </li>
           </ul>
-          <p><span>{t('modqueue.view_more_shortcuts')}</span> <span className={styles.smallKey}>{t('modqueue.shift_key')}</span> + <span className={styles.smallKey}>/</span></p>
+          <p>
+            <span>{t('modqueue.view_more_shortcuts')}</span>{' '}
+            <span className={styles.smallKey}>{t('modqueue.shift_key')}</span> +{' '}
+            <span className={styles.smallKey}>/</span>
+          </p>
         </div>
         <Modal open={open} onClose={onClose}>
           <h3>{t('modqueue.shortcuts')}</h3>
@@ -63,9 +86,11 @@ export default class ModerationKeysModal extends React.Component {
                   </tr>
                 </thead>
                 <tbody>
-                  {Object.keys(shortcut.shortcuts).map((key) => (
+                  {Object.keys(shortcut.shortcuts).map(key => (
                     <tr key={`${key}tr`}>
-                      <td className={styles.shortcut}><span className={styles.key}>{key}</span></td>
+                      <td className={styles.shortcut}>
+                        <span className={styles.key}>{key}</span>
+                      </td>
                       <td>{t(shortcut.shortcuts[key])}</td>
                     </tr>
                   ))}
diff --git a/client/coral-admin/src/components/NotFound.js b/client/coral-admin/src/components/NotFound.js
index fc9089ba3..7be8fdb6e 100644
--- a/client/coral-admin/src/components/NotFound.js
+++ b/client/coral-admin/src/components/NotFound.js
@@ -1,13 +1,16 @@
 import React from 'react';
-import {Layout} from 'react-mdl';
+import { Layout } from 'react-mdl';
 import styles from './NotFound.css';
 
 export const NotFound = () => (
   <Layout fixedDrawer>
-    <div className={styles.layout} >
+    <div className={styles.layout}>
       <h1>Page Not Found</h1>
       <p>The communicorn feels your pain.</p>
-      <img src="https://coralproject.net/images/communicorn.jpg" alt="Communicorn"/>
+      <img
+        src="https://coralproject.net/images/communicorn.jpg"
+        alt="Communicorn"
+      />
     </div>
   </Layout>
 );
diff --git a/client/coral-admin/src/components/RejectButton.js b/client/coral-admin/src/components/RejectButton.js
index 8e0873162..4916358a2 100644
--- a/client/coral-admin/src/components/RejectButton.js
+++ b/client/coral-admin/src/components/RejectButton.js
@@ -3,15 +3,19 @@ import PropTypes from 'prop-types';
 
 import cn from 'classnames';
 import styles from './RejectButton.css';
-import {Icon} from 'coral-ui';
+import { Icon } from 'coral-ui';
 
 import t from 'coral-framework/services/i18n';
 
-const RejectButton = ({active, minimal, onClick, className}) => {
+const RejectButton = ({ active, minimal, onClick, className }) => {
   const text = active ? t('modqueue.rejected') : t('modqueue.reject');
   return (
     <button
-      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active}, className)}
+      className={cn(
+        styles.root,
+        { [styles.minimal]: minimal, [styles.active]: active },
+        className
+      )}
       onClick={onClick}
     >
       <Icon name={'close'} className={styles.icon} />
@@ -28,4 +32,3 @@ RejectButton.propTypes = {
 };
 
 export default RejectButton;
-
diff --git a/client/coral-admin/src/components/SuspendUserDialog.js b/client/coral-admin/src/components/SuspendUserDialog.js
index cfff3b17e..cdd211bc4 100644
--- a/client/coral-admin/src/components/SuspendUserDialog.js
+++ b/client/coral-admin/src/components/SuspendUserDialog.js
@@ -1,25 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Dialog} from 'coral-ui';
-import {RadioGroup, Radio} from 'react-mdl';
+import { Dialog } from 'coral-ui';
+import { RadioGroup, Radio } from 'react-mdl';
 import styles from './SuspendUserDialog.css';
 import cn from 'classnames';
 
 import Button from 'coral-ui/components/Button';
 
-import t, {timeago} from 'coral-framework/services/i18n';
-import {dateAdd} from 'coral-framework/utils';
+import t, { timeago } from 'coral-framework/services/i18n';
+import { dateAdd } from 'coral-framework/utils';
 
-const initialState = {step: 0, duration: '3'};
+const initialState = { step: 0, duration: '3' };
 
 function durationsToDate(hours) {
-
   // Add 1 minute more to help `timeago.js` to display the correct duration.
   return dateAdd(new Date(), 'minute', hours * 60 + 1);
 }
 
 class SuspendUserDialog extends React.Component {
-
   state = initialState;
 
   componentWillReceiveProps(next) {
@@ -28,13 +26,13 @@ class SuspendUserDialog extends React.Component {
     }
   }
 
-  handleDurationChange = (event) => {
-    this.setState({duration: event.target.value});
-  }
+  handleDurationChange = event => {
+    this.setState({ duration: event.target.value });
+  };
 
-  handleMessageChange = (event) => {
-    this.setState({message: event.target.value});
-  }
+  handleMessageChange = event => {
+    this.setState({ message: event.target.value });
+  };
 
   goToStep1 = () => {
     this.setState({
@@ -43,13 +41,12 @@ class SuspendUserDialog extends React.Component {
         'suspenduser.email_message_suspend',
         this.props.username,
         this.props.organizationName,
-        timeago(durationsToDate(this.state.duration)),
+        timeago(durationsToDate(this.state.duration))
       ),
     });
-  }
+  };
 
   handlePerform = () => {
-
     this.props.onPerform({
       message: this.state.message,
 
@@ -59,36 +56,49 @@ class SuspendUserDialog extends React.Component {
   };
 
   renderStep0() {
-    const {onCancel, username} = this.props;
-    const {duration} = this.state;
+    const { onCancel, username } = this.props;
+    const { duration } = this.state;
     return (
-      <section>
-        <h1 className={styles.header}>
-          {t('suspenduser.title_suspend')}
-        </h1>
+      <section className="talk-admin-suspend-user-dialog-step-0">
+        <h1 className={styles.header}>{t('suspenduser.title_suspend')}</h1>
         <p className={styles.description}>
           {t('suspenduser.description_suspend', username)}
         </p>
         <fieldset>
-          <legend className={styles.legend}>{t('suspenduser.select_duration')}</legend>
+          <legend className={styles.legend}>
+            {t('suspenduser.select_duration')}
+          </legend>
           <RadioGroup
-            name='status filter'
+            name="status filter"
             value={duration}
-            childContainer='div'
+            childContainer="div"
             onChange={this.handleDurationChange}
             className={styles.radioGroup}
           >
-            <Radio value='1'>{t('suspenduser.one_hour')}</Radio>
-            <Radio value='3'>{t('suspenduser.hours', 3)}</Radio>
-            <Radio value='24'>{t('suspenduser.hours', 24)}</Radio>
-            <Radio value='168'>{t('suspenduser.days', 7)}</Radio>
+            <Radio value="1">{t('suspenduser.one_hour')}</Radio>
+            <Radio value="3">{t('suspenduser.hours', 3)}</Radio>
+            <Radio value="24">{t('suspenduser.hours', 24)}</Radio>
+            <Radio value="168">{t('suspenduser.days', 7)}</Radio>
           </RadioGroup>
         </fieldset>
         <div className={styles.buttons}>
-          <Button cStyle="white" className={styles.cancel} onClick={onCancel} raised>
+          <Button
+            cStyle="white"
+            className={styles.cancel}
+            onClick={onCancel}
+            raised
+          >
             {t('suspenduser.cancel')}
           </Button>
-          <Button cStyle="black" className={cn(styles.perform, 'talk-admin-suspend-user-dialog-confirm')} onClick={this.goToStep1} raised>
+          <Button
+            cStyle="black"
+            className={cn(
+              styles.perform,
+              'talk-admin-suspend-user-dialog-confirm'
+            )}
+            onClick={this.goToStep1}
+            raised
+          >
             {t('suspenduser.suspend_user')}
           </Button>
         </div>
@@ -97,31 +107,40 @@ class SuspendUserDialog extends React.Component {
   }
 
   renderStep1() {
-    const {onCancel, username} = this.props;
-    const {message} = this.state;
+    const { message } = this.state;
+    const { onCancel, username } = this.props;
     return (
-      <section>
-        <h1 className={styles.header}>
-          {t('suspenduser.title_notify')}
-        </h1>
+      <section className="talk-admin-suspend-user-dialog-step-1">
+        <h1 className={styles.header}>{t('suspenduser.title_notify')}</h1>
         <p className={styles.description}>
           {t('suspenduser.description_notify', username)}
         </p>
         <fieldset>
-          <legend className={styles.legend}>{t('suspenduser.write_message')}</legend>
+          <legend className={styles.legend}>
+            {t('suspenduser.write_message')}
+          </legend>
           <textarea
             rows={5}
             className={styles.messageInput}
             value={message}
-            onChange={this.handleMessageChange} />
+            onChange={this.handleMessageChange}
+          />
         </fieldset>
         <div className={styles.buttons}>
-          <Button cStyle="white" className={styles.cancel} onClick={onCancel} raised>
+          <Button
+            cStyle="white"
+            className={styles.cancel}
+            onClick={onCancel}
+            raised
+          >
             {t('suspenduser.cancel')}
           </Button>
           <Button
             cStyle="black"
-            className={cn(styles.perform, 'talk-admin-suspend-user-dialog-send')}
+            className={cn(
+              styles.perform,
+              'talk-admin-suspend-user-dialog-send'
+            )}
             onClick={this.handlePerform}
             disabled={this.state.message.length === 0}
             raised
@@ -134,8 +153,8 @@ class SuspendUserDialog extends React.Component {
   }
 
   render() {
-    const {open, onCancel} = this.props;
-    const {step} = this.state;
+    const { open, onCancel } = this.props;
+    const { step } = this.state;
     return (
       <Dialog
         className={cn(styles.dialog, 'talk-admin-suspend-user-dialog')}
@@ -143,7 +162,13 @@ class SuspendUserDialog extends React.Component {
         open={open}
       >
         <div className={styles.close}>
-          <button aria-label="Close" onClick={onCancel} className={styles.closeButton}>×</button>
+          <button
+            aria-label="Close"
+            onClick={onCancel}
+            className={styles.closeButton}
+          >
+            ×
+          </button>
         </div>
         {step === 0 && this.renderStep0()}
         {step === 1 && this.renderStep1()}
diff --git a/client/coral-admin/src/components/TagsInput.js b/client/coral-admin/src/components/TagsInput.js
index f8c55cfa9..78dc2ea27 100644
--- a/client/coral-admin/src/components/TagsInput.js
+++ b/client/coral-admin/src/components/TagsInput.js
@@ -5,8 +5,9 @@ import AutosizeInput from 'react-input-autosize';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 
-const autosizingRenderInput = ({onChange, value, addTag: _, ...other}) =>
-  <AutosizeInput type='text' onChange={onChange} value={value} {...other} />;
+const autosizingRenderInput = ({ onChange, value, addTag: _, ...other }) => (
+  <AutosizeInput type="text" onChange={onChange} value={value} {...other} />
+);
 
 autosizingRenderInput.propTypes = {
   onChange: PropTypes.func,
@@ -14,17 +15,16 @@ autosizingRenderInput.propTypes = {
   addTag: PropTypes.func,
 };
 
-const TagsInputComponent = ({className = '', ...props}) => {
+const TagsInputComponent = ({ className = '', ...props }) => {
   return (
     <TagsInput
       addOnBlur={true}
       addOnPaste={true}
-      pasteSplit={(data) => data.split(',').map((d) => d.trim())}
+      pasteSplit={data => data.split(',').map(d => d.trim())}
       className={cn(styles.root, 'tags-input', className)}
       focusedClassName={styles.rootFocus}
       renderInput={autosizingRenderInput}
       {...props}
-
       tagProps={{
         className: styles.tag,
         classNameRemove: styles.tagRemove,
diff --git a/client/coral-admin/src/components/ToastContainer.css b/client/coral-admin/src/components/ToastContainer.css
index 2fcbd7f7d..100f97f89 100644
--- a/client/coral-admin/src/components/ToastContainer.css
+++ b/client/coral-admin/src/components/ToastContainer.css
@@ -207,7 +207,7 @@
 
   .toastify__body {
     color: white;
-    overflow-x: scroll;
+    overflow-x: auto;
     font-size: 15px;
     font-weight: 400;
   }
diff --git a/client/coral-admin/src/components/ToastContainer.js b/client/coral-admin/src/components/ToastContainer.js
index a751d2714..fb48c1bf2 100644
--- a/client/coral-admin/src/components/ToastContainer.js
+++ b/client/coral-admin/src/components/ToastContainer.js
@@ -1,6 +1,6 @@
 import './ToastContainer.css';
-import {defaultProps} from 'recompose';
-import {ToastContainer} from 'react-toastify';
+import { defaultProps } from 'recompose';
+import { ToastContainer } from 'react-toastify';
 
 export default defaultProps({
   autoClose: 5000,
diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
index 8b86a133c..58faee5c4 100644
--- a/client/coral-admin/src/components/UserDetail.css
+++ b/client/coral-admin/src/components/UserDetail.css
@@ -94,73 +94,52 @@
   width: calc(100% - 90px);
 }
 
-.commentStatuses {
+.tabBar {
   padding: 0 0 0 10px;
   margin: 0;
   align-self: center;
   list-style: none;
   box-sizing: border-box;
-  li {
-    display: inline-block;
-    margin-right: 10px;
-    cursor: pointer;
-    padding: 0 10px;
-  }
+  border: none;
 }
 
-.active {
+.tab {
+  display: inline-block;
+  margin-right: 10px;
+  cursor: pointer;
+  padding: 0 10px;
+}
+
+.tabButton {
+  border: none;
+  background: white;
+  border-radius: 0;
+  font-size: 1em;
+  padding: 5px;
+  cursor: pointer;
+}
+
+.tabButtonActive {
   font-weight: bold;
   border-bottom: 3px solid #F36451;
 }
-
-.bulkActionGroup {
-  height: 52px;
-  background-color: #efefef;
-  padding: 0 0 0 10px;
-  display: flex;
-  i {
-    margin-right: 0;
-  }
-  .bulkAction {
-    display: inline-block;
-    width: 48px;
-    height: 48px;
-    transform: scale(.7);
-    min-width: 0;
-  }
-  .bulkAction:last-child {
-    margin-left: -10px;
-  }
+.username {
+  display: inline-block;
+  vertical-align: middle;
 }
 
-.selectedCommentsInfo {
-  align-self: center;
-  font-weight: 500;
-  margin-left: 15px;
+.actionsMenu {
+  display: inline-block;
 }
 
-.loadMore>button {
-  background-color: #696969;
-  &:hover {
-    background-color: #404040;
-    color: white;
-  }
+.actionsMenuSuspended {
+  background-color: #F29336;
+  border-color: #F29336;
+  color: white;
 }
 
-.toggleAll {
-  padding: 0 10px 0 0;
-  align-self: center;
+.actionsMenuBanned {
+  background-color: #E45241;
+  border-color: #E45241;
+  color: white;
 }
-
-.commentList {
-  clear: both;
-}
-
-.bulkActionHeader {
-  display: flex;
-  justify-content: space-between;
-  height: 52px;
-  &.selected {
-    background-color: #efefef;
-  }
-}
\ No newline at end of file
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 140774eae..d226ac744 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -1,94 +1,88 @@
 import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
-import Comment from '../containers/UserDetailComment';
+import capitalize from 'lodash/capitalize';
+import { getErrorMessages } from 'coral-framework/utils';
 import styles from './UserDetail.css';
-import {Icon, Drawer, Spinner} from 'coral-ui';
-import {Slot} from 'coral-framework/components';
+import AccountHistory from './AccountHistory';
+import { Slot } from 'coral-framework/components';
+import UserDetailCommentList from '../components/UserDetailCommentList';
+import {
+  getReliability,
+  isSuspended,
+  isBanned,
+} from 'coral-framework/utils/user';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import ClickOutside from 'coral-framework/components/ClickOutside';
-import LoadMore from '../components/LoadMore';
-import cn from 'classnames';
-import capitalize from 'lodash/capitalize';
-import {getReliability} from 'coral-framework/utils/user';
-import ApproveButton from './ApproveButton';
-import RejectButton from './RejectButton';
-import {getErrorMessages} from 'coral-framework/utils';
+import {
+  Icon,
+  Drawer,
+  Spinner,
+  TabBar,
+  Tab,
+  TabContent,
+  TabPane,
+} from 'coral-ui';
+import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
+import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
+import UserInfoTooltip from './UserInfoTooltip';
 
-export default class UserDetail extends React.Component {
-
-  static propTypes = {
-    userId: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired,
-    root: PropTypes.object.isRequired,
-    acceptComment: PropTypes.func.isRequired,
-    rejectComment: PropTypes.func.isRequired,
-    changeStatus: PropTypes.func.isRequired,
-    toggleSelect: PropTypes.func.isRequired,
-    bulkAccept: PropTypes.func.isRequired,
-    bulkReject: PropTypes.func.isRequired,
-    toggleSelectAll: PropTypes.func.isRequired,
-    loading: PropTypes.bool.isRequired,
-    data: PropTypes.shape({
-      refetch: PropTypes.func.isRequired,
-    }),
-    activeTab: PropTypes.string.isRequired,
-    selectedCommentIds: PropTypes.array.isRequired,
-    viewUserDetail: PropTypes.any.isRequired,
-    loadMore: PropTypes.any.isRequired,
-    notify: PropTypes.func.isRequired
-  }
-
-  rejectThenReload = async (info) => {
+class UserDetail extends React.Component {
+  rejectThenReload = async info => {
     try {
       await this.props.rejectComment(info);
       this.props.data.refetch();
     } catch (err) {
-
       console.error(err);
       this.props.notify('error', getErrorMessages(err));
     }
-  }
+  };
 
-  acceptThenReload = async (info) => {
+  acceptThenReload = async info => {
     try {
       await this.props.acceptComment(info);
       this.props.data.refetch();
     } catch (err) {
-
       console.error(err);
       this.props.notify('error', getErrorMessages(err));
     }
-  }
+  };
 
   bulkAcceptThenReload = async () => {
     try {
       await this.props.bulkAccept();
       this.props.data.refetch();
     } catch (err) {
-
       console.error(err);
       this.props.notify('error', getErrorMessages(err));
     }
-  }
+  };
 
   bulkRejectThenReload = async () => {
     try {
       await this.props.bulkReject();
       this.props.data.refetch();
     } catch (err) {
-
       console.error(err);
       this.props.notify('error', getErrorMessages(err));
     }
-  }
+  };
 
-  showAll = () => {
-    this.props.changeStatus('all');
-  }
+  changeTab = tab => {
+    this.props.changeTab(tab);
+  };
 
-  showRejected = () => {
-    this.props.changeStatus('rejected');
-  }
+  showSuspenUserDialog = () =>
+    this.props.showSuspendUserDialog({
+      userId: this.props.root.user.id,
+      username: this.props.root.user.username,
+    });
+
+  showBanUserDialog = () =>
+    this.props.showBanUserDialog({
+      userId: this.props.root.user.id,
+      username: this.props.root.user.username,
+    });
 
   renderLoading() {
     return (
@@ -100,36 +94,108 @@ export default class UserDetail extends React.Component {
     );
   }
 
+  getActionMenuLabel() {
+    const { root: { user } } = this.props;
+
+    if (isBanned(user)) {
+      return 'Banned';
+    } else if (isSuspended(user)) {
+      return 'Suspended';
+    }
+
+    return '';
+  }
+
   renderLoaded() {
     const {
       data,
       root,
-      root: {
-        user,
-        totalComments,
-        rejectedComments,
-        comments: {nodes, hasNextPage}
-      },
+      root: { me, user, totalComments, rejectedComments },
       activeTab,
       selectedCommentIds,
       toggleSelect,
       hideUserDetail,
       viewUserDetail,
       loadMore,
-      toggleSelectAll
+      toggleSelectAll,
+      unbanUser,
+      unsuspendUser,
+      modal,
     } = this.props;
 
-    let rejectedPercent = (rejectedComments / totalComments) * 100;
-    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
+    // if totalComments is 0, you're dividing by zero
+    let rejectedPercent = rejectedComments / totalComments * 100;
 
-      // if totalComments is 0, you're dividing by zero, which is naughty
+    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
       rejectedPercent = 0;
     }
 
+    const banned = isBanned(user);
+    const suspended = isSuspended(user);
+
     return (
-      <ClickOutside onClickOutside={hideUserDetail}>
-        <Drawer onClose={hideUserDetail}>
-          <h3>{user.username}</h3>
+      <ClickOutside onClickOutside={modal ? null : hideUserDetail}>
+        <Drawer
+          className="talk-admin-user-detail-drawer"
+          onClose={hideUserDetail}
+        >
+          <h3
+            className={cn(styles.username, 'talk-admin-user-detail-username')}
+          >
+            {user.username}
+          </h3>
+
+          {user.id && (
+            <ActionsMenu
+              icon="person"
+              className={cn(
+                styles.actionsMenu,
+                'talk-admin-user-detail-actions-menu'
+              )}
+              buttonClassNames={cn(
+                {
+                  [styles.actionsMenuSuspended]: suspended,
+                  [styles.actionsMenuBanned]: banned,
+                },
+                'talk-admin-user-detail-actions-button'
+              )}
+              label={this.getActionMenuLabel()}
+            >
+              {suspended ? (
+                <ActionsMenuItem onClick={() => unsuspendUser({ id: user.id })}>
+                  Remove Suspension
+                </ActionsMenuItem>
+              ) : (
+                <ActionsMenuItem
+                  disabled={me.id === user.id}
+                  onClick={this.showSuspenUserDialog}
+                >
+                  Suspend User
+                </ActionsMenuItem>
+              )}
+
+              {banned ? (
+                <ActionsMenuItem onClick={() => unbanUser({ id: user.id })}>
+                  Remove Ban
+                </ActionsMenuItem>
+              ) : (
+                <ActionsMenuItem
+                  disabled={me.id === user.id}
+                  onClick={this.showBanUserDialog}
+                >
+                  Ban User
+                </ActionsMenuItem>
+              )}
+            </ActionsMenu>
+          )}
+
+          {(banned || suspended) && (
+            <UserInfoTooltip
+              user={user}
+              banned={banned}
+              suspended={suspended}
+            />
+          )}
 
           <div>
             <ul className={styles.userDetailList}>
@@ -139,13 +205,18 @@ export default class UserDetail extends React.Component {
                 {new Date(user.created_at).toLocaleString()}
               </li>
 
-              {user.profiles.map(({id}) =>
+              {user.profiles.map(({ id }) => (
                 <li key={id}>
                   <Icon name="email" />
                   <span className={styles.userDetailItem}>Email:</span>
-                  {id} <ButtonCopyToClipboard className={styles.copyButton} icon="content_copy" copyText={id} />
+                  {id}{' '}
+                  <ButtonCopyToClipboard
+                    className={styles.copyButton}
+                    icon="content_copy"
+                    copyText={id}
+                  />
                 </li>
-              )}
+              ))}
             </ul>
 
             <ul className={styles.stats}>
@@ -161,7 +232,12 @@ export default class UserDetail extends React.Component {
               </li>
               <li className={styles.stat}>
                 <span className={styles.statItem}>Reports</span>
-                <span className={cn(styles.statReportResult, styles[getReliability(user.reliable.flagger)])}>
+                <span
+                  className={cn(
+                    styles.statReportResult,
+                    styles[getReliability(user.reliable.flagger)]
+                  )}
+                >
                   {capitalize(getReliability(user.reliable.flagger))}
                 </span>
               </li>
@@ -171,67 +247,98 @@ export default class UserDetail extends React.Component {
           <Slot
             fill="userProfile"
             data={this.props.data}
-            queryData={{root, user}}
+            queryData={{ root, user }}
           />
+
           <hr />
-          <div className={(selectedCommentIds.length > 0) ? cn(styles.bulkActionHeader, styles.selected) : styles.bulkActionHeader}>
-            {
-              selectedCommentIds.length === 0
-                ? (
-                  <ul className={styles.commentStatuses}>
-                    <li className={activeTab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
-                    <li className={activeTab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
-                  </ul>
-                )
-                : (
-                  <div className={styles.bulkActionGroup}>
-                    <ApproveButton
-                      onClick={this.bulkAcceptThenReload}
-                      minimal
-                    />
-                    <RejectButton
-                      onClick={this.bulkRejectThenReload}
-                      minimal
-                    />
-                    <span className={styles.selectedCommentsInfo}>  {selectedCommentIds.length} comments selected</span>
-                  </div>
-                )
-            }
-            <div className={styles.toggleAll}>
-              <input
-                type='checkbox'
-                id='toogleAll'
-                checked={selectedCommentIds.length > 0 && selectedCommentIds.length === nodes.length}
-                onChange={(e) => {
-                  toggleSelectAll(nodes.map((comment) => comment.id), e.target.checked);
-                }} />
-              <label htmlFor='toogleAll'>Select all</label>
-            </div>
-          </div>
-          <div className={styles.commentList}>
-            {
-              nodes.map((comment) => {
-                const selected = selectedCommentIds.indexOf(comment.id) !== -1;
-                return <Comment
-                  key={comment.id}
-                  user={user}
-                  root={root}
-                  data={data}
-                  comment={comment}
-                  acceptComment={this.acceptThenReload}
-                  rejectComment={this.rejectThenReload}
-                  selected={selected}
-                  toggleSelect={toggleSelect}
-                  viewUserDetail={viewUserDetail}
-                />;
-              })
-            }
-          </div>
-          <LoadMore
-            className={styles.loadMore}
-            loadMore={loadMore}
-            showLoadMore={hasNextPage}
-          />
+
+          <TabBar
+            onTabClick={this.changeTab}
+            activeTab={activeTab}
+            className={cn(styles.tabBar, 'talk-admin-user-detail-tab-bar')}
+            aria-controls="talk-admin-user-detail-content"
+            tabClassNames={{
+              button: styles.tabButton,
+              buttonActive: styles.tabButtonActive,
+            }}
+          >
+            <Tab
+              tabId={'all'}
+              className={cn(
+                styles.tab,
+                styles.button,
+                'talk-admin-user-detail-all-tab'
+              )}
+            >
+              All
+            </Tab>
+            <Tab
+              tabId={'rejected'}
+              className={cn(styles.tab, 'talk-admin-user-detail-rejected-tab')}
+            >
+              Rejected
+            </Tab>
+            <Tab
+              tabId={'history'}
+              className={cn(
+                styles.tab,
+                styles.button,
+                'talk-admin-user-detail-history-tab'
+              )}
+            >
+              Account History
+            </Tab>
+          </TabBar>
+
+          <TabContent
+            activeTab={activeTab}
+            className="talk-admin-user-detail-content"
+          >
+            <TabPane
+              tabId={'all'}
+              className={'talk-admin-user-detail-all-tab-pane'}
+            >
+              <UserDetailCommentList
+                user={user}
+                root={root}
+                data={data}
+                loadMore={loadMore}
+                toggleSelect={toggleSelect}
+                viewUserDetail={viewUserDetail}
+                acceptComment={this.acceptThenReload}
+                rejectComment={this.rejectThenReload}
+                selectedCommentIds={selectedCommentIds}
+                toggleSelectAll={toggleSelectAll}
+                bulkAcceptThenReload={this.bulkAcceptThenReload}
+                bulkRejectThenReload={this.bulkRejectThenReload}
+              />
+            </TabPane>
+            <TabPane
+              tabId={'rejected'}
+              className={'talk-admin-user-detail-rejected-tab-pane'}
+            >
+              <UserDetailCommentList
+                user={user}
+                root={root}
+                data={data}
+                loadMore={loadMore}
+                toggleSelect={toggleSelect}
+                viewUserDetail={viewUserDetail}
+                acceptComment={this.acceptThenReload}
+                rejectComment={this.rejectThenReload}
+                selectedCommentIds={selectedCommentIds}
+                toggleSelectAll={toggleSelectAll}
+                bulkAcceptThenReload={this.bulkAcceptThenReload}
+                bulkRejectThenReload={this.bulkRejectThenReload}
+              />
+            </TabPane>
+            <TabPane
+              tabId={'history'}
+              className={'talk-admin-user-detail-history-tab-pane'}
+            >
+              <AccountHistory user={user} />
+            </TabPane>
+          </TabContent>
         </Drawer>
       </ClickOutside>
     );
@@ -244,3 +351,32 @@ export default class UserDetail extends React.Component {
     return this.renderLoaded();
   }
 }
+
+UserDetail.propTypes = {
+  userId: PropTypes.string.isRequired,
+  hideUserDetail: PropTypes.func.isRequired,
+  root: PropTypes.object.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  changeTab: PropTypes.func.isRequired,
+  toggleSelect: PropTypes.func.isRequired,
+  bulkAccept: PropTypes.func.isRequired,
+  bulkReject: PropTypes.func.isRequired,
+  toggleSelectAll: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+  data: PropTypes.shape({
+    refetch: PropTypes.func.isRequired,
+  }),
+  activeTab: PropTypes.string.isRequired,
+  selectedCommentIds: PropTypes.array.isRequired,
+  viewUserDetail: PropTypes.any.isRequired,
+  loadMore: PropTypes.any.isRequired,
+  notify: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+  unbanUser: PropTypes.func.isRequired,
+  unsuspendUser: PropTypes.func.isRequired,
+  modal: PropTypes.bool,
+};
+
+export default UserDetail;
diff --git a/client/coral-admin/src/components/UserDetailComment.js b/client/coral-admin/src/components/UserDetailComment.js
index e3e89d00a..b1cc486ec 100644
--- a/client/coral-admin/src/components/UserDetailComment.js
+++ b/client/coral-admin/src/components/UserDetailComment.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
-import {Icon} from 'coral-ui';
+import { Icon } from 'coral-ui';
 import CommentDetails from './CommentDetails';
 import styles from './UserDetailComment.css';
 import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
@@ -13,19 +13,18 @@ import CommentLabels from '../containers/CommentLabels';
 import ApproveButton from './ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
 
-import t, {timeago} from 'coral-framework/services/i18n';
+import t, { timeago } from 'coral-framework/services/i18n';
 
 class UserDetailComment extends React.Component {
+  approve = () =>
+    this.props.comment.status === 'ACCEPTED'
+      ? null
+      : this.props.acceptComment({ commentId: this.props.comment.id });
 
-  approve = () => (this.props.comment.status === 'ACCEPTED'
-    ? null
-    : this.props.acceptComment({commentId: this.props.comment.id})
-  );
-
-  reject = () => (this.props.comment.status === 'REJECTED'
-    ? null
-    : this.props.rejectComment({commentId: this.props.comment.id})
-  );
+  reject = () =>
+    this.props.comment.status === 'REJECTED'
+      ? null
+      : this.props.rejectComment({ commentId: this.props.comment.id });
 
   render() {
     const {
@@ -34,30 +33,35 @@ class UserDetailComment extends React.Component {
       toggleSelect,
       className,
       data,
-      root: {settings: {wordlist: {banned, suspect}}},
+      root: { settings: { wordlist: { banned, suspect } } },
     } = this.props;
 
     return (
       <li
         tabIndex={0}
-        className={cn(className, styles.root, {[styles.rootSelected]: selected})}
+        className={cn(className, styles.root, {
+          [styles.rootSelected]: selected,
+        })}
       >
         <div className={styles.container}>
           <div className={styles.header}>
             <input
               className={styles.bulkSelectInput}
-              type='checkbox'
+              type="checkbox"
               value={comment.id}
               checked={selected}
-              onChange={(e) => toggleSelect(e.target.value, e.target.checked)} />
+              onChange={e => toggleSelect(e.target.value, e.target.checked)}
+            />
             <span className={styles.created}>
               {timeago(comment.created_at)}
             </span>
-            {
-              (comment.editing && comment.editing.edited)
-                ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-                : null
-            }
+            {comment.editing && comment.editing.edited ? (
+              <span>
+                &nbsp;<span className={styles.editedMarker}>
+                  ({t('comment.edited')})
+                </span>
+              </span>
+            ) : null}
 
             <div className={styles.labels}>
               <CommentLabels comment={comment} />
@@ -65,7 +69,11 @@ class UserDetailComment extends React.Component {
           </div>
           <div className={styles.story}>
             Story: {comment.asset.title}
-            {<Link to={`/admin/moderate/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
+            {
+              <Link to={`/admin/moderate/${comment.asset.id}`}>
+                {t('modqueue.moderate')}
+              </Link>
+            }
           </div>
           <CommentAnimatedEdit body={comment.body}>
             <div className={styles.bodyContainer}>
@@ -74,8 +82,7 @@ class UserDetailComment extends React.Component {
                   suspectWords={suspect}
                   bannedWords={banned}
                   body={comment.body}
-                />
-                {' '}
+                />{' '}
                 <a
                   className={styles.external}
                   href={`${comment.asset.url}?commentId=${comment.id}`}
@@ -106,17 +113,15 @@ class UserDetailComment extends React.Component {
             </div>
           </CommentAnimatedEdit>
         </div>
-        <CommentDetails
-          data={data}
-          root={root}
-          comment={comment}
-        />
+        <CommentDetails data={data} root={root} comment={comment} />
       </li>
     );
   }
 }
 
 UserDetailComment.propTypes = {
+  selected: PropTypes.bool,
+  data: PropTypes.object,
   user: PropTypes.object.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
@@ -140,7 +145,7 @@ UserDetailComment.propTypes = {
     asset: PropTypes.shape({
       title: PropTypes.string,
       url: PropTypes.string,
-      id: PropTypes.string
+      id: PropTypes.string,
     }),
   }),
 };
diff --git a/client/coral-admin/src/components/UserDetailCommentList.css b/client/coral-admin/src/components/UserDetailCommentList.css
new file mode 100644
index 000000000..15f4f5088
--- /dev/null
+++ b/client/coral-admin/src/components/UserDetailCommentList.css
@@ -0,0 +1,56 @@
+.commentList {
+  clear: both;
+}
+
+.loadMore > button {
+  background-color: #696969;
+  &:hover {
+    background-color: #404040;
+    color: white;
+  }
+}
+
+.bulkActionHeader {
+  display: flex;
+  justify-content: space-between;
+  height: 52px;
+  justify-content: flex-end;
+
+  &.selected {
+    background-color: #efefef;
+  }
+}
+
+.bulkActionGroup {
+  height: 52px;
+  background-color: #efefef;
+  padding: 0 0 0 10px;
+  display: flex;
+  flex: 1;
+
+  i {
+    margin-right: 0;
+  }
+
+  .bulkAction {
+    display: inline-block;
+    width: 48px;
+    height: 48px;
+    transform: scale(.7);
+    min-width: 0;
+  }
+  .bulkAction:last-child {
+    margin-left: -10px;
+  }
+}
+
+.selectedCommentsInfo {
+  align-self: center;
+  font-weight: 500;
+  margin-left: 15px;
+}
+
+.toggleAll {
+  padding-right: 14px;
+  align-self: center;
+}
\ No newline at end of file
diff --git a/client/coral-admin/src/components/UserDetailCommentList.js b/client/coral-admin/src/components/UserDetailCommentList.js
new file mode 100644
index 000000000..a0ff9982b
--- /dev/null
+++ b/client/coral-admin/src/components/UserDetailCommentList.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './UserDetailCommentList.css';
+import LoadMore from '../components/LoadMore';
+import Comment from '../containers/UserDetailComment';
+import RejectButton from './RejectButton';
+import ApproveButton from './ApproveButton';
+
+const UserDetailCommentList = props => {
+  const {
+    data,
+    root,
+    root: { user, comments: { nodes, hasNextPage } },
+    acceptComment,
+    rejectComment,
+    selectedCommentIds,
+    toggleSelect,
+    viewUserDetail,
+    loadMore,
+    toggleSelectAll,
+    bulkAcceptThenReload,
+    bulkRejectThenReload,
+  } = props;
+
+  return (
+    <div
+      className={cn(styles.commentList, 'talk-admin-user-detail-comment-list')}
+    >
+      <div
+        className={
+          selectedCommentIds.length > 0
+            ? cn(styles.bulkActionHeader, styles.selected)
+            : styles.bulkActionHeader
+        }
+      >
+        {selectedCommentIds.length > 0 && (
+          <div className={styles.bulkActionGroup}>
+            <ApproveButton onClick={bulkAcceptThenReload} minimal />
+            <RejectButton onClick={bulkRejectThenReload} minimal />
+            <span className={styles.selectedCommentsInfo}>
+              {' '}
+              {selectedCommentIds.length} comments selected
+            </span>
+          </div>
+        )}
+
+        <div className={styles.toggleAll}>
+          <input
+            type="checkbox"
+            id="toogleAll"
+            checked={
+              selectedCommentIds.length > 0 &&
+              selectedCommentIds.length === nodes.length
+            }
+            onChange={e => {
+              toggleSelectAll(
+                nodes.map(comment => comment.id),
+                e.target.checked
+              );
+            }}
+          />
+          <label htmlFor="toogleAll">Select all</label>
+        </div>
+      </div>
+      {nodes.map(comment => {
+        const selected = selectedCommentIds.indexOf(comment.id) !== -1;
+        return (
+          <Comment
+            key={comment.id}
+            user={user}
+            root={root}
+            data={data}
+            comment={comment}
+            acceptComment={acceptComment}
+            rejectComment={rejectComment}
+            selected={selected}
+            toggleSelect={toggleSelect}
+            viewUserDetail={viewUserDetail}
+          />
+        );
+      })}
+      <LoadMore
+        className={styles.loadMore}
+        loadMore={loadMore}
+        showLoadMore={hasNextPage}
+      />
+    </div>
+  );
+};
+
+UserDetailCommentList.propTypes = {
+  root: PropTypes.object.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  selectedCommentIds: PropTypes.array.isRequired,
+  viewUserDetail: PropTypes.any.isRequired,
+  loadMore: PropTypes.any.isRequired,
+  toggleSelect: PropTypes.func.isRequired,
+  toggleSelectAll: PropTypes.func.isRequired,
+  bulkAcceptThenReload: PropTypes.func.isRequired,
+  bulkRejectThenReload: PropTypes.func.isRequired,
+};
+
+export default UserDetailCommentList;
diff --git a/client/coral-admin/src/components/UserInfoTooltip.css b/client/coral-admin/src/components/UserInfoTooltip.css
new file mode 100644
index 000000000..6b68e5cdf
--- /dev/null
+++ b/client/coral-admin/src/components/UserInfoTooltip.css
@@ -0,0 +1,69 @@
+.userInfo {
+  position: relative;
+  display: inline-block;
+}
+
+.icon {
+  font-size: 16px;
+  color: #616161;
+  -ms-user-select:none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout:none;
+  user-select: none;
+  -webkit-tap-highlight-color:rgba(0,0,0,0);
+}
+
+.icon:hover {
+  cursor: pointer;
+}
+
+.menu {
+  background-color: white;
+  border: solid 1px #999;
+  border-radius: 3px;
+  padding: 10px;
+  position: absolute;
+  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
+  z-index: 10;
+  top: 32px;
+  right: 0px;
+  width: 140px;
+  text-align: left;
+  color: #616161;
+}
+
+.menu::before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #999;
+  position: absolute;
+  right: 0px;
+  top: -20px;
+  transform: rotate(180deg);
+}
+
+.menu::after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  right: 0px;
+  top: -19px;
+  transform: rotate(180deg);
+}
+
+.descriptionList {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.strongItem {
+  margin-right: 3px;
+}
+
+.descriptionItem {
+  font-size: 0.9em;
+}
\ No newline at end of file
diff --git a/client/coral-admin/src/components/UserInfoTooltip.js b/client/coral-admin/src/components/UserInfoTooltip.js
new file mode 100644
index 000000000..a5ff365fd
--- /dev/null
+++ b/client/coral-admin/src/components/UserInfoTooltip.js
@@ -0,0 +1,177 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { Icon } from 'coral-ui';
+import styles from './UserInfoTooltip.css';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+import moment from 'moment';
+
+const initialState = { menuVisible: false };
+
+class UserInfoTooltip extends React.Component {
+  state = initialState;
+
+  toogleMenu = () => {
+    this.setState({ menuVisible: !this.state.menuVisible });
+  };
+
+  hideMenu = () => {
+    this.setState({ menuVisible: false });
+  };
+
+  getLastHistoryItem = (user, status = 'banned') => {
+    const userHistory = user.state.status[status].history;
+    return userHistory[userHistory.length - 1];
+  };
+
+  render() {
+    const { menuVisible } = this.state;
+    const { user, banned, suspended } = this.props;
+
+    return (
+      <ClickOutside onClickOutside={this.hideMenu}>
+        <div className={cn(styles.userInfo, 'talk-admin-user-info-tooltip')}>
+          <span
+            onClick={this.toogleMenu}
+            className={cn(styles.icon, 'talk-admin-user-info-tooltip-icon')}
+          >
+            <Icon name="info_outline" />
+          </span>
+
+          {menuVisible && (
+            <div
+              className={cn(styles.menu, 'talk-admin-user-info-tooltip-menu')}
+            >
+              {banned && (
+                <div
+                  className={cn(
+                    styles.description,
+                    'talk-admin-user-info-tooltip-description-banned'
+                  )}
+                >
+                  <ul
+                    className={cn(
+                      styles.descriptionList,
+                      'talk-admin-user-info-tooltip-description-list'
+                    )}
+                  >
+                    <li
+                      className={cn(
+                        styles.descriptionItem,
+                        'talk-admin-user-info-tooltip-description-item'
+                      )}
+                    >
+                      <strong className={styles.strongItem}>Banned On</strong>
+                      <span>
+                        {moment(
+                          new Date(
+                            this.getLastHistoryItem(user, 'banned').created_at
+                          )
+                        ).format('MMMM Do YYYY, h:mm:ss a')}
+                      </span>
+                    </li>
+                    <li
+                      className={cn(
+                        styles.descriptionItem,
+                        'talk-admin-user-info-tooltip-description-item'
+                      )}
+                    >
+                      <strong className={styles.strongItem}>By</strong>
+                      <span>
+                        {
+                          this.getLastHistoryItem(user, 'banned').assigned_by
+                            .username
+                        }
+                      </span>
+                    </li>
+                  </ul>
+                </div>
+              )}
+
+              {suspended && (
+                <div
+                  className={cn(
+                    styles.description,
+                    'talk-admin-user-info-tooltip-description-suspended'
+                  )}
+                >
+                  <ul
+                    className={cn(
+                      styles.descriptionList,
+                      'talk-admin-user-info-tooltip-description-list'
+                    )}
+                  >
+                    <li
+                      className={cn(
+                        styles.descriptionItem,
+                        'talk-admin-user-info-tooltip-description-item'
+                      )}
+                    >
+                      <strong className={styles.strongItem}>Suspension</strong>
+                      <span />
+                    </li>
+                    <li
+                      className={cn(
+                        styles.descriptionItem,
+                        'talk-admin-user-info-tooltip-description-item'
+                      )}
+                    >
+                      <strong className={styles.strongItem}>By</strong>
+                      <span>
+                        {
+                          this.getLastHistoryItem(user, 'suspension')
+                            .assigned_by.username
+                        }
+                      </span>
+                    </li>
+                    <li
+                      className={cn(
+                        styles.descriptionItem,
+                        'talk-admin-user-info-tooltip-description-item'
+                      )}
+                    >
+                      <strong className={styles.strongItem}>Start</strong>
+                      <span>
+                        {moment(
+                          new Date(
+                            this.getLastHistoryItem(
+                              user,
+                              'suspension'
+                            ).created_at
+                          )
+                        ).format('MMMM Do YYYY, h:mm:ss a')}
+                      </span>
+                    </li>
+                    <li
+                      className={cn(
+                        styles.descriptionItem,
+                        'talk-admin-user-info-tooltip-description-item'
+                      )}
+                    >
+                      <strong className={styles.strongItem}>End</strong>
+                      <span>
+                        {moment(
+                          new Date(
+                            this.getLastHistoryItem(user, 'suspension').until
+                          )
+                        ).format('MMMM Do YYYY, h:mm:ss a')}
+                      </span>
+                    </li>
+                  </ul>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </ClickOutside>
+    );
+  }
+}
+
+UserInfoTooltip.propTypes = {
+  user: PropTypes.object,
+  banned: PropTypes.bool,
+  suspended: PropTypes.bool,
+};
+
+export default UserInfoTooltip;
diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 4e7826ee6..cc9062f67 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -1,98 +1,112 @@
 import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
-import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
-import {Link, IndexLink} from 'react-router';
+import { Navigation, Header, IconButton, MenuItem, Menu } from 'react-mdl';
+import { Link, IndexLink } from 'react-router';
 import styles from './Header.css';
 import t from 'coral-framework/services/i18n';
-import {Logo} from './Logo';
-import {can} from 'coral-framework/services/perms';
+import { Logo } from './Logo';
+import { can } from 'coral-framework/services/perms';
 import Indicator from './Indicator';
 
 const CoralHeader = ({
   handleLogout,
   showShortcuts = () => {},
   auth,
-  root
+  root,
 }) => {
   return (
     <div className={styles.headerWrapper}>
       <Header className={styles.header}>
         <Logo className={styles.logo} />
-        <div> 
-          {
-            auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
-              <Navigation className={styles.nav}>
-                {
-                  can(auth.user, 'MODERATE_COMMENTS') && (
-                    <IndexLink
-                      id='moderateNav'
-                      className={cn('talk-admin-nav-moderate', styles.navLink)}
-                      to="/admin/moderate"
-                      activeClassName={styles.active}>
-                      {t('configure.moderate')}
-                      {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
-                    </IndexLink>
-                  )
-                }
-                <Link
-                  id='storiesNav'
-                  className={cn('talk-admin-nav-stories', styles.navLink)}
-                  to="/admin/stories"
-                  activeClassName={styles.active}>
-                  {t('configure.stories')}
-                </Link>
+        <div>
+          {auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ? (
+            <Navigation className={styles.nav}>
+              {can(auth.user, 'MODERATE_COMMENTS') && (
+                <IndexLink
+                  id="moderateNav"
+                  className={cn('talk-admin-nav-moderate', styles.navLink)}
+                  to="/admin/moderate"
+                  activeClassName={styles.active}
+                >
+                  {t('configure.moderate')}
+                  {(root.premodCount !== 0 || root.reportedCount !== 0) && (
+                    <Indicator />
+                  )}
+                </IndexLink>
+              )}
+              <Link
+                id="storiesNav"
+                className={cn('talk-admin-nav-stories', styles.navLink)}
+                to="/admin/stories"
+                activeClassName={styles.active}
+              >
+                {t('configure.stories')}
+              </Link>
 
-                <Link
-                  id='communityNav'
-                  className={cn('talk-admin-nav-community', styles.navLink)}
-                  to="/admin/community"
-                  activeClassName={styles.active}>
-                  {t('configure.community')}
-                  {root.flaggedUsernamesCount !== 0 && <Indicator />}
-                </Link>
+              <Link
+                id="communityNav"
+                className={cn('talk-admin-nav-community', styles.navLink)}
+                to="/admin/community"
+                activeClassName={styles.active}
+              >
+                {t('configure.community')}
+                {root.flaggedUsernamesCount !== 0 && <Indicator />}
+              </Link>
 
-                {
-                  can(auth.user, 'UPDATE_CONFIG') && (
-                    <Link
-                      id='configureNav'
-                      className={cn('talk-admin-nav-configure', styles.navLink)}
-                      to="/admin/configure"
-                      activeClassName={styles.active}>
-                      {t('configure.configure')}
-                    </Link>
-                  )
-                }
-              </Navigation>
-              :
-              null
-          }
+              {can(auth.user, 'UPDATE_CONFIG') && (
+                <Link
+                  id="configureNav"
+                  className={cn('talk-admin-nav-configure', styles.navLink)}
+                  to="/admin/configure"
+                  activeClassName={styles.active}
+                >
+                  {t('configure.configure')}
+                </Link>
+              )}
+            </Navigation>
+          ) : null}
           <div className={styles.rightPanel}>
             <ul>
               <li className={cn(styles.settings, 'talk-admin-header-settings')}>
                 <div>
-                  <IconButton name="settings" id="menu-settings" className="talk-admin-header-settings-button"/>
+                  <IconButton
+                    name="settings"
+                    id="menu-settings"
+                    className="talk-admin-header-settings-button"
+                  />
                   <Menu target="menu-settings" align="right">
-                    <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                    <MenuItem onClick={() => showShortcuts(true)}>
+                      {t('configure.shortcuts')}
+                    </MenuItem>
                     <MenuItem>
-                      <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
-                          View latest version
+                      <a
+                        href="https://github.com/coralproject/talk/releases"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        View latest version
                       </a>
                     </MenuItem>
                     <MenuItem>
-                      <a href="https://support.coralproject.net" target="_blank" rel="noopener noreferrer">
-                          Report a bug or give feedback
+                      <a
+                        href="https://support.coralproject.net"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        Report a bug or give feedback
                       </a>
                     </MenuItem>
-                    <MenuItem onClick={handleLogout} className="talk-admin-header-sign-out">
+                    <MenuItem
+                      onClick={handleLogout}
+                      className="talk-admin-header-sign-out"
+                    >
                       {t('configure.sign_out')}
                     </MenuItem>
                   </Menu>
                 </div>
               </li>
-              <li>
-                {`v${process.env.VERSION}`}
-              </li>
+              <li>{`v${process.env.VERSION}`}</li>
             </ul>
           </div>
         </div>
@@ -105,7 +119,7 @@ CoralHeader.propTypes = {
   auth: PropTypes.object,
   showShortcuts: PropTypes.func,
   handleLogout: PropTypes.func.isRequired,
-  root: PropTypes.object.isRequired
+  root: PropTypes.object.isRequired,
 };
 
 export default CoralHeader;
diff --git a/client/coral-admin/src/components/ui/Indicator.js b/client/coral-admin/src/components/ui/Indicator.js
index dd1d36202..acc2b7083 100644
--- a/client/coral-admin/src/components/ui/Indicator.js
+++ b/client/coral-admin/src/components/ui/Indicator.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import styles from './Indicator.css';
 
-const Indicator = () => 
-  <span className={styles.indicator}></span>;
+const Indicator = () => <span className={styles.indicator} />;
 
 export default Indicator;
diff --git a/client/coral-admin/src/components/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js
index 859191927..2542e4533 100644
--- a/client/coral-admin/src/components/ui/Layout.js
+++ b/client/coral-admin/src/components/ui/Layout.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Layout as LayoutMDL} from 'react-mdl';
+import { Layout as LayoutMDL } from 'react-mdl';
 import Header from '../../containers/Header';
 import Drawer from '../Drawer';
 import styles from './Layout.css';
@@ -18,14 +18,8 @@ const Layout = ({
       showShortcuts={toggleShortcutModal}
       auth={auth}
     />
-    <Drawer 
-      handleLogout={handleLogout}
-      restricted={restricted}
-      auth={auth}
-    />
-    <div className={styles.layout}>
-      {children}
-    </div>
+    <Drawer handleLogout={handleLogout} restricted={restricted} auth={auth} />
+    <div className={styles.layout}>{children}</div>
   </LayoutMDL>
 );
 
@@ -34,7 +28,7 @@ Layout.propTypes = {
   auth: PropTypes.object,
   handleLogout: PropTypes.func,
   toggleShortcutModal: PropTypes.func,
-  restricted: PropTypes.bool // hide elements from a user that's logged out
+  restricted: PropTypes.bool, // hide elements from a user that's logged out
 };
 
 export default Layout;
diff --git a/client/coral-admin/src/components/ui/Logo.js b/client/coral-admin/src/components/ui/Logo.js
index 2538a0716..68a1d2f6b 100644
--- a/client/coral-admin/src/components/ui/Logo.js
+++ b/client/coral-admin/src/components/ui/Logo.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import styles from './Logo.css';
-import {CoralLogo} from 'coral-ui';
+import { CoralLogo } from 'coral-ui';
 import PropTypes from 'prop-types';
 
-export const Logo = ({className = ''}) => (
+export const Logo = ({ className = '' }) => (
   <div className={`${styles.logo} ${className}`}>
     <h1>
       <CoralLogo className={styles.base} />
@@ -13,5 +13,5 @@ export const Logo = ({className = ''}) => (
 );
 
 Logo.propTypes = {
-  className: PropTypes.string
+  className: PropTypes.string,
 };
diff --git a/client/coral-admin/src/constants/actions.js b/client/coral-admin/src/constants/actions.js
index d64c62d26..32681119b 100644
--- a/client/coral-admin/src/constants/actions.js
+++ b/client/coral-admin/src/constants/actions.js
@@ -1 +1,2 @@
-export const ACTIONS_MODERATION_QUEUE_FETCH_SUCCESS = 'ACTIONS_MODERATION_QUEUE_FETCH_SUCCESS';
+export const ACTIONS_MODERATION_QUEUE_FETCH_SUCCESS =
+  'ACTIONS_MODERATION_QUEUE_FETCH_SUCCESS';
diff --git a/client/coral-admin/src/constants/comments.js b/client/coral-admin/src/constants/comments.js
index 98f2e039d..0549df33d 100644
--- a/client/coral-admin/src/constants/comments.js
+++ b/client/coral-admin/src/constants/comments.js
@@ -2,8 +2,10 @@ export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
 export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
 export const SHOW_SUSPENDUSER_DIALOG = 'SHOW_SUSPENDUSER_DIALOG';
 export const HIDE_SUSPENDUSER_DIALOG = 'HIDE_SUSPENDUSER_DIALOG';
-export const COMMENTS_MODERATION_QUEUE_FETCH_REQUEST = 'COMMENTS_MODERATION_QUEUE_FETCH_REQUEST';
-export const COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS = 'COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS';
+export const COMMENTS_MODERATION_QUEUE_FETCH_REQUEST =
+  'COMMENTS_MODERATION_QUEUE_FETCH_REQUEST';
+export const COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS =
+  'COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS';
 export const COMMENT_CREATE_SUCCESS = 'COMMENT_CREATE_SUCCESS';
 export const COMMENT_CREATE_FAILED = 'COMMENT_CREATE_FAILED';
 export const COMMENT_STREAM_FETCH_SUCCESS = 'COMMENT_STREAM_FETCH_SUCCESS';
diff --git a/client/coral-admin/src/constants/community.js b/client/coral-admin/src/constants/community.js
index eea946efb..a9cc2f1e3 100644
--- a/client/coral-admin/src/constants/community.js
+++ b/client/coral-admin/src/constants/community.js
@@ -6,8 +6,6 @@ export const FETCH_USERS_FAILURE = `${prefix}_FETCH_USERS_FAILURE`;
 
 export const SORT_UPDATE = `${prefix}_SORT_UPDATE`;
 export const SET_PAGE = `${prefix}_SET_PAGE`;
-export const SET_ROLE = `${prefix}_SET_ROLE`;
-export const SET_COMMENTER_STATUS = `${prefix}_SET_COMMENTER_STATUS`;
 
 export const FETCH_FLAGGED_COMMENTERS_REQUEST = `${prefix}_FETCH_FLAGGED_COMMENTERS_REQUEST`;
 export const FETCH_FLAGGED_COMMENTERS_SUCCESS = `${prefix}_FETCH_FLAGGED_COMMENTERS_SUCCESS`;
diff --git a/client/coral-admin/src/constants/install.js b/client/coral-admin/src/constants/install.js
index 743d68593..fb2cc4bef 100644
--- a/client/coral-admin/src/constants/install.js
+++ b/client/coral-admin/src/constants/install.js
@@ -10,7 +10,8 @@ export const INSTALL_SUCCESS = 'INSTALL_SUCCESS';
 export const INSTALL_FAILURE = 'INSTALL_FAILURE';
 export const UPDATE_FORMDATA_USER = 'UPDATE_FORMDATA_USER';
 export const UPDATE_FORMDATA_SETTINGS = 'UPDATE_FORMDATA_SETTINGS';
-export const UPDATE_PERMITTED_DOMAINS_SETTINGS = 'UPDATE_PERMITTED_DOMAINS_SETTINGS';
+export const UPDATE_PERMITTED_DOMAINS_SETTINGS =
+  'UPDATE_PERMITTED_DOMAINS_SETTINGS';
 
 export const CHECK_INSTALL_REQUEST = 'CHECK_INSTALL_REQUEST';
 export const CHECK_INSTALL_SUCCESS = 'CHECK_INSTALL_SUCCESS';
diff --git a/client/coral-admin/src/constants/userDetail.js b/client/coral-admin/src/constants/userDetail.js
index f1617f5a3..07049ac84 100644
--- a/client/coral-admin/src/constants/userDetail.js
+++ b/client/coral-admin/src/constants/userDetail.js
@@ -1,6 +1,6 @@
 export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
 export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
-export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
+export const CHANGE_TAB_USER_DETAIL = 'CHANGE_TAB_USER_DETAIL';
 export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
 export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
 export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
diff --git a/client/coral-admin/src/containers/BanUserDialog.js b/client/coral-admin/src/containers/BanUserDialog.js
index 67e8daf67..d2dc642a7 100644
--- a/client/coral-admin/src/containers/BanUserDialog.js
+++ b/client/coral-admin/src/containers/BanUserDialog.js
@@ -1,29 +1,39 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import BanUserDialog from '../components/BanUserDialog';
-import {hideBanUserDialog} from '../actions/banUserDialog';
-import {withSetUserStatus, withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import {compose} from 'react-apollo';
+import { hideBanUserDialog } from '../actions/banUserDialog';
+import {
+  withBanUser,
+  withSetCommentStatus,
+} from 'coral-framework/graphql/mutations';
+import { compose } from 'react-apollo';
 import t from 'coral-framework/services/i18n';
-import {getErrorMessages} from 'coral-framework/utils';
-import {notify} from 'coral-framework/actions/notification';
+import { getErrorMessages } from 'coral-framework/utils';
+import { notify } from 'coral-framework/actions/notification';
 
 class BanUserDialogContainer extends Component {
-
   banUser = async () => {
-    const {userId, commentId, commentStatus, setUserStatus, setCommentStatus, hideBanUserDialog, notify} = this.props;
+    const {
+      userId,
+      commentId,
+      commentStatus,
+      banUser,
+      setCommentStatus,
+      hideBanUserDialog,
+      notify,
+    } = this.props;
     try {
-      await setUserStatus({userId, status: 'BANNED'});
+      await banUser({ id: userId, message: '' });
       hideBanUserDialog();
       if (commentId && commentStatus && commentStatus !== 'REJECTED') {
-        await setCommentStatus({commentId, status: 'REJECTED'});
+        await setCommentStatus({ commentId, status: 'REJECTED' });
       }
-    }
-    catch(err) {
+    } catch (err) {
       notify('error', getErrorMessages(err));
     }
-  }
+  };
 
   getInfo() {
     let note = t('bandialog.note_ban_user');
@@ -46,7 +56,17 @@ class BanUserDialogContainer extends Component {
   }
 }
 
-const mapStateToProps = ({banUserDialog: {open, userId, username, commentId, commentStatus}}) => ({
+BanUserDialogContainer.propTypes = {
+  banUser: PropTypes.func.isRequired,
+  hideBanUserDialog: PropTypes.func,
+  open: PropTypes.bool,
+  username: PropTypes.string,
+  commentStatus: PropTypes.string,
+};
+
+const mapStateToProps = ({
+  banUserDialog: { open, userId, username, commentId, commentStatus },
+}) => ({
   open,
   userId,
   username,
@@ -54,18 +74,18 @@ const mapStateToProps = ({banUserDialog: {open, userId, username, commentId, com
   commentStatus,
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  ...bindActionCreators({
-    hideBanUserDialog,
-    notify,
-  }, dispatch),
+const mapDispatchToProps = dispatch => ({
+  ...bindActionCreators(
+    {
+      hideBanUserDialog,
+      notify,
+    },
+    dispatch
+  ),
 });
 
 export default compose(
-  withSetUserStatus,
+  withBanUser,
   withSetCommentStatus,
-  connect(
-    mapStateToProps,
-    mapDispatchToProps,
-  ),
+  connect(mapStateToProps, mapDispatchToProps)
 )(BanUserDialogContainer);
diff --git a/client/coral-admin/src/containers/CommentDetails.js b/client/coral-admin/src/containers/CommentDetails.js
index cf8c2c307..871c8202d 100644
--- a/client/coral-admin/src/containers/CommentDetails.js
+++ b/client/coral-admin/src/containers/CommentDetails.js
@@ -1,12 +1,9 @@
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import CommentDetails from '../components/CommentDetails';
-import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import withFragments from 'coral-framework/hocs/withFragments';
 
-const slots = [
-  'adminCommentDetailArea',
-  'adminCommentMoreDetails',
-];
+const slots = ['adminCommentDetailArea', 'adminCommentMoreDetails'];
 
 export default withFragments({
   root: gql`
@@ -20,5 +17,5 @@ export default withFragments({
       __typename
       ${getSlotFragmentSpreads(slots, 'comment')}
     }
-  `
+  `,
 })(CommentDetails);
diff --git a/client/coral-admin/src/containers/CommentLabels.js b/client/coral-admin/src/containers/CommentLabels.js
index 1d57aa526..4cee8b1cc 100644
--- a/client/coral-admin/src/containers/CommentLabels.js
+++ b/client/coral-admin/src/containers/CommentLabels.js
@@ -1,11 +1,9 @@
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import CommentLabels from '../components/CommentLabels';
 import withFragments from 'coral-framework/hocs/withFragments';
-import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
 
-const slots = [
-  'adminCommentLabels',
-];
+const slots = ['adminCommentLabels'];
 
 export default withFragments({
   root: gql`
@@ -25,10 +23,10 @@ export default withFragments({
         }
         user {
           id
-          roles
+          role
         }
       }
       ${getSlotFragmentSpreads(slots, 'comment')}
     }
-  `
+  `,
 })(CommentLabels);
diff --git a/client/coral-admin/src/containers/Header.js b/client/coral-admin/src/containers/Header.js
index c107d58f9..86fdfc796 100644
--- a/client/coral-admin/src/containers/Header.js
+++ b/client/coral-admin/src/containers/Header.js
@@ -1,24 +1,26 @@
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import withQuery from 'coral-framework/hocs/withQuery';
 import Header from '../components/ui/Header';
 
-export default withQuery(gql`
-  query TalkAdmin_Header {
-    __typename
-    premodCount: commentCount(query: {
-      statuses: [PREMOD]
-    })
-    reportedCount: commentCount(query: {
-      statuses: [NONE, PREMOD, SYSTEM_WITHHELD],
-      action_type: FLAG
-    })
-    flaggedUsernamesCount: userCount(query: {
-      action_type: FLAG,
-      statuses: [PENDING]
-    })
-  }
-`, {
-    options: {
-      pollInterval: 10000
+export default withQuery(
+  gql`
+    query TalkAdmin_Header {
+      __typename
+      premodCount: commentCount(query: { statuses: [PREMOD] })
+      reportedCount: commentCount(
+        query: { statuses: [NONE, PREMOD, SYSTEM_WITHHELD], action_type: FLAG }
+      )
+      flaggedUsernamesCount: userCount(
+        query: {
+          action_type: FLAG
+          state: { status: { username: [SET, CHANGED] } }
+        }
+      )
     }
-  })(Header);
+  `,
+  {
+    options: {
+      pollInterval: 10000,
+    },
+  }
+)(Header);
diff --git a/client/coral-admin/src/containers/Layout.js b/client/coral-admin/src/containers/Layout.js
index b90016102..4ca3133b8 100644
--- a/client/coral-admin/src/containers/Layout.js
+++ b/client/coral-admin/src/containers/Layout.js
@@ -1,35 +1,39 @@
 import React from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import Layout from '../components/ui/Layout';
-import {fetchConfig} from '../actions/config';
+import { fetchConfig } from '../actions/config';
 import AdminLogin from '../components/AdminLogin';
-import {FullLoading} from '../components/FullLoading';
+import { FullLoading } from '../components/FullLoading';
 import BanUserDialog from './BanUserDialog';
 import SuspendUserDialog from './SuspendUserDialog';
-import {toggleModal as toggleShortcutModal} from '../actions/moderation';
-import {checkLogin, handleLogin, requestPasswordReset, logout} from '../actions/auth';
-import {can} from 'coral-framework/services/perms';
+import { toggleModal as toggleShortcutModal } from '../actions/moderation';
+import {
+  checkLogin,
+  handleLogin,
+  requestPasswordReset,
+  logout,
+} from '../actions/auth';
+import { can } from 'coral-framework/services/perms';
 import UserDetail from 'coral-admin/src/containers/UserDetail';
 import PropTypes from 'prop-types';
 
 class LayoutContainer extends React.Component {
   componentWillMount() {
-    const {checkLogin, fetchConfig} = this.props;
+    const { checkLogin, fetchConfig } = this.props;
 
     checkLogin();
     fetchConfig();
   }
 
   render() {
-
     const {
       user,
       loggedIn,
       loadingUser,
       loginError,
       loginMaxExceeded,
-      passwordRequestSuccess
+      passwordRequestSuccess,
     } = this.props.auth;
 
     const {
@@ -61,7 +65,8 @@ class LayoutContainer extends React.Component {
         <Layout
           handleLogout={logout}
           toggleShortcutModal={toggleShortcutModal}
-          auth={this.props.auth} >
+          auth={this.props.auth}
+        >
           <BanUserDialog />
           <SuspendUserDialog />
           <UserDetail />
@@ -71,7 +76,10 @@ class LayoutContainer extends React.Component {
     } else if (loggedIn) {
       return (
         <Layout {...this.props}>
-          <p>This page is for team use only. Please contact an administrator if you want to join this team.</p>
+          <p>
+            This page is for team use only. Please contact an administrator if
+            you want to join this team.
+          </p>
         </Layout>
       );
     }
@@ -89,22 +97,25 @@ LayoutContainer.propTypes = {
   toggleShortcutModal: PropTypes.func,
   TALK_RECAPTCHA_PUBLIC: PropTypes.string,
   checkLogin: PropTypes.func,
-  fetchConfig: PropTypes.func
+  fetchConfig: PropTypes.func,
 };
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   auth: state.auth,
   TALK_RECAPTCHA_PUBLIC: state.config.data.TALK_RECAPTCHA_PUBLIC,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    checkLogin,
-    fetchConfig,
-    handleLogin,
-    requestPasswordReset,
-    toggleShortcutModal,
-    logout
-  }, dispatch);
-  
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      checkLogin,
+      fetchConfig,
+      handleLogin,
+      requestPasswordReset,
+      toggleShortcutModal,
+      logout,
+    },
+    dispatch
+  );
+
 export default connect(mapStateToProps, mapDispatchToProps)(LayoutContainer);
diff --git a/client/coral-admin/src/containers/SuspendUserDialog.js b/client/coral-admin/src/containers/SuspendUserDialog.js
index 5c554e70c..e058faad6 100644
--- a/client/coral-admin/src/containers/SuspendUserDialog.js
+++ b/client/coral-admin/src/containers/SuspendUserDialog.js
@@ -1,33 +1,43 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import SuspendUserDialog from '../components/SuspendUserDialog';
-import {hideSuspendUserDialog} from '../actions/suspendUserDialog';
-import {withSetCommentStatus, withSuspendUser} from 'coral-framework/graphql/mutations';
-import {compose, gql} from 'react-apollo';
-import t, {timeago} from 'coral-framework/services/i18n';
+import { hideSuspendUserDialog } from '../actions/suspendUserDialog';
+import {
+  withSetCommentStatus,
+  withSuspendUser,
+} from 'coral-framework/graphql/mutations';
+import { compose, gql } from 'react-apollo';
+import t, { timeago } from 'coral-framework/services/i18n';
 import withQuery from 'coral-framework/hocs/withQuery';
-import {getErrorMessages} from 'coral-framework/utils';
+import { getErrorMessages } from 'coral-framework/utils';
 import get from 'lodash/get';
-import {notify} from 'coral-framework/actions/notification';
+import { notify } from 'coral-framework/actions/notification';
 
 class SuspendUserDialogContainer extends Component {
-
-  suspendUser = async ({message, until}) => {
-    const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser, notify} = this.props;
+  suspendUser = async ({ message, until }) => {
+    const {
+      userId,
+      username,
+      commentStatus,
+      commentId,
+      hideSuspendUserDialog,
+      setCommentStatus,
+      suspendUser,
+      notify,
+    } = this.props;
     hideSuspendUserDialog();
     try {
-      await suspendUser({id: userId, message, until});
+      await suspendUser({ id: userId, message, until });
       notify(
         'success',
-        t('suspenduser.notify_suspend_until', username, timeago(until)),
+        t('suspenduser.notify_suspend_until', username, timeago(until))
       );
       if (commentId && commentStatus && commentStatus !== 'REJECTED') {
-        await setCommentStatus({commentId, status: 'REJECTED'});
+        await setCommentStatus({ commentId, status: 'REJECTED' });
       }
-    }
-    catch(err) {
+    } catch (err) {
       notify('error', getErrorMessages(err));
     }
   };
@@ -53,14 +63,16 @@ SuspendUserDialogContainer.propTypes = {
 
 const withOrganizationName = withQuery(gql`
   query CoralAdmin_SuspendUserDialog {
-      __typename
-     settings {
-       organizationName
+    __typename
+    settings {
+      organizationName
     }
   }
 `);
 
-const mapStateToProps = ({suspendUserDialog: {open, userId, username, commentId, commentStatus}}) => ({
+const mapStateToProps = ({
+  suspendUserDialog: { open, userId, username, commentId, commentStatus },
+}) => ({
   open,
   userId,
   username,
@@ -68,19 +80,19 @@ const mapStateToProps = ({suspendUserDialog: {open, userId, username, commentId,
   commentStatus,
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  ...bindActionCreators({
-    hideSuspendUserDialog,
-    notify,
-  }, dispatch),
+const mapDispatchToProps = dispatch => ({
+  ...bindActionCreators(
+    {
+      hideSuspendUserDialog,
+      notify,
+    },
+    dispatch
+  ),
 });
 
 export default compose(
-  connect(
-    mapStateToProps,
-    mapDispatchToProps,
-  ),
+  connect(mapStateToProps, mapDispatchToProps),
   withSuspendUser,
   withSetCommentStatus,
-  withOrganizationName,
+  withOrganizationName
 )(SuspendUserDialogContainer);
diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index 01ceeedc0..bd34ac4d8 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -1,22 +1,32 @@
 import React from 'react';
-import {compose, gql} from 'react-apollo';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import PropTypes from 'prop-types';
+import { compose, gql } from 'react-apollo';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import UserDetail from '../components/UserDetail';
 import withQuery from 'coral-framework/hocs/withQuery';
-import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
+import {
+  getDefinitionName,
+  getSlotFragmentSpreads,
+} from 'coral-framework/utils';
 import {
   viewUserDetail,
   hideUserDetail,
-  changeUserDetailStatuses,
+  changeTab,
   clearUserDetailSelections,
   toggleSelectCommentInUserDetail,
-  toggleSelectAllCommentInUserDetail
+  toggleSelectAllCommentInUserDetail,
 } from 'coral-admin/src/actions/userDetail';
-import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
+import {
+  withSetCommentStatus,
+  withUnbanUser,
+  withUnsuspendUser,
+} from 'coral-framework/graphql/mutations';
 import UserDetailComment from './UserDetailComment';
 import update from 'immutability-helper';
-import {notify} from 'coral-framework/actions/notification';
+import { notify } from 'coral-framework/actions/notification';
+import { showBanUserDialog } from 'actions/banUserDialog';
+import { showSuspendUserDialog } from 'actions/suspendUserDialog';
 
 const commentConnectionFragment = gql`
   fragment CoralAdmin_UserDetail_CommentConnection on CommentConnection {
@@ -30,38 +40,36 @@ const commentConnectionFragment = gql`
   ${UserDetailComment.fragments.comment}
 `;
 
-const slots = [
-  'userProfile',
-];
+const slots = ['userProfile'];
 
 class UserDetailContainer extends React.Component {
   isLoadingMore = false;
 
   // status can be 'ACCEPTED' or 'REJECTED'
-  bulkSetCommentStatus = async (status) => {
-    const changes = this.props.selectedCommentIds.map((commentId) => {
-      return this.props.setCommentStatus({commentId, status});
+  bulkSetCommentStatus = async status => {
+    const changes = this.props.selectedCommentIds.map(commentId => {
+      return this.props.setCommentStatus({ commentId, status });
     });
 
     await Promise.all(changes);
     this.props.clearUserDetailSelections(); // un-select everything
-  }
+  };
 
   bulkReject = () => {
     return this.bulkSetCommentStatus('REJECTED');
-  }
+  };
 
   bulkAccept = () => {
     return this.bulkSetCommentStatus('ACCEPTED');
-  }
+  };
 
-  acceptComment = ({commentId}) => {
-    return this.props.setCommentStatus({commentId, status: 'ACCEPTED'});
-  }
+  acceptComment = ({ commentId }) => {
+    return this.props.setCommentStatus({ commentId, status: 'ACCEPTED' });
+  };
 
-  rejectComment = ({commentId}) => {
-    return this.props.setCommentStatus({commentId, status: 'REJECTED'});
-  }
+  rejectComment = ({ commentId }) => {
+    return this.props.setCommentStatus({ commentId, status: 'REJECTED' });
+  };
 
   loadMore = () => {
     if (this.isLoadingMore) {
@@ -75,24 +83,25 @@ class UserDetailContainer extends React.Component {
       author_id: this.props.data.variables.author_id,
       statuses: this.props.data.variables.statuses,
     };
-    this.props.data.fetchMore({
-      query: LOAD_MORE_QUERY,
-      variables,
-      updateQuery: (prev, {fetchMoreResult:{comments}}) => {
-        return update(prev, {
-          comments: {
-            nodes: {$push: comments.nodes},
-            hasNextPage: {$set: comments.hasNextPage},
-            startCursor: {$set: comments.startCursor},
-            endCursor: {$set: comments.endCursor},
-          },
-        });
-      }
-    })
+    this.props.data
+      .fetchMore({
+        query: LOAD_MORE_QUERY,
+        variables,
+        updateQuery: (prev, { fetchMoreResult: { comments } }) => {
+          return update(prev, {
+            comments: {
+              nodes: { $push: comments.nodes },
+              hasNextPage: { $set: comments.hasNextPage },
+              startCursor: { $set: comments.startCursor },
+              endCursor: { $set: comments.endCursor },
+            },
+          });
+        },
+      })
       .then(() => {
         this.isLoadingMore = false;
       })
-      .catch((err) => {
+      .catch(err => {
         this.isLoadingMore = false;
         throw err;
       });
@@ -104,37 +113,66 @@ class UserDetailContainer extends React.Component {
     }
   }
 
-  render () {
+  render() {
     if (!this.props.userId) {
       return null;
     }
 
     const loading = this.props.data.loading;
 
-    return <UserDetail
-      bulkReject={this.bulkReject}
-      bulkAccept={this.bulkAccept}
-      changeStatus={this.props.changeUserDetailStatuses}
-      toggleSelect={this.props.toggleSelectCommentInUserDetail}
-      toggleSelectAll={this.props.toggleSelectAllCommentInUserDetail}
-      acceptComment={this.acceptComment}
-      rejectComment={this.rejectComment}
-      loading={loading}
-      loadMore={this.loadMore}
-      {...this.props} />;
+    return (
+      <UserDetail
+        bulkReject={this.bulkReject}
+        bulkAccept={this.bulkAccept}
+        changeTab={this.props.changeTab}
+        toggleSelect={this.props.toggleSelectCommentInUserDetail}
+        toggleSelectAll={this.props.toggleSelectAllCommentInUserDetail}
+        acceptComment={this.acceptComment}
+        rejectComment={this.rejectComment}
+        loading={loading}
+        loadMore={this.loadMore}
+        {...this.props}
+      />
+    );
   }
 }
 
+UserDetailContainer.propTypes = {
+  changeTab: PropTypes.func,
+  toggleSelectCommentInUserDetail: PropTypes.func,
+  toggleSelectAllCommentInUserDetail: PropTypes.func,
+  data: PropTypes.object,
+  root: PropTypes.object,
+  setCommentStatus: PropTypes.func,
+  clearUserDetailSelections: PropTypes.func,
+  selectedCommentIds: PropTypes.array,
+  unbanUser: PropTypes.func.isRequired,
+  unsuspendUser: PropTypes.func.isRequired,
+};
+
 const LOAD_MORE_QUERY = gql`
-  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $author_id: ID!, $statuses: [COMMENT_STATUS!]) {
-    comments(query: {limit: $limit, cursor: $cursor, author_id: $author_id, statuses: $statuses}) {
+  query CoralAdmin_Moderation_LoadMore(
+    $limit: Int = 10
+    $cursor: Cursor
+    $author_id: ID!
+    $statuses: [COMMENT_STATUS!]
+  ) {
+    comments(
+      query: {
+        limit: $limit
+        cursor: $cursor
+        author_id: $author_id
+        statuses: $statuses
+      }
+    ) {
       ...CoralAdmin_UserDetail_CommentConnection
     }
   }
   ${commentConnectionFragment}
 `;
 
-export const withUserDetailQuery = withQuery(gql`
+export const withUserDetailQuery = withQuery(
+  gql`
   query CoralAdmin_UserDetail($author_id: ID!, $statuses: [COMMENT_STATUS!]) {
     user(id: $author_id) {
       id
@@ -147,8 +185,48 @@ export const withUserDetailQuery = withQuery(gql`
       reliable {
         flagger
       }
+      state {
+        status {
+          suspension {
+            until
+            history {
+              until
+              created_at
+              assigned_by {
+                id
+                username
+              }
+            }
+          }
+          banned {
+            status
+            history {
+              status
+              assigned_by {
+                id
+                username
+              }
+              created_at
+            }
+          }
+          username {
+            status
+            history {
+              status
+              assigned_by {
+                id
+                username
+              }
+              created_at
+            }
+          }
+        }
+      }
       ${getSlotFragmentSpreads(slots, 'user')}
     }
+    me {
+      id
+    }
     totalComments: commentCount(query: {author_id: $author_id, statuses: []})
     rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
     comments: comments(query: {
@@ -162,37 +240,47 @@ export const withUserDetailQuery = withQuery(gql`
   }
   ${UserDetailComment.fragments.root}
   ${commentConnectionFragment}
-`, {
-  options: ({userId, statuses}) => {
-    return {
-      variables: {author_id: userId, statuses},
-      fetchPolicy: 'network-only',
-    };
-  },
-  skip: (ownProps) => !ownProps.userId,
-});
+`,
+  {
+    options: ({ userId, statuses }) => {
+      return {
+        variables: { author_id: userId, statuses },
+        fetchPolicy: 'network-only',
+      };
+    },
+    skip: ownProps => !ownProps.userId,
+  }
+);
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   userId: state.userDetail.userId,
   selectedCommentIds: state.userDetail.selectedCommentIds,
   statuses: state.userDetail.statuses,
   activeTab: state.userDetail.activeTab,
+  modal: state.ui.modal,
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  ...bindActionCreators({
-    changeUserDetailStatuses,
-    clearUserDetailSelections,
-    toggleSelectCommentInUserDetail,
-    viewUserDetail,
-    hideUserDetail,
-    toggleSelectAllCommentInUserDetail,
-    notify
-  }, dispatch)
+const mapDispatchToProps = dispatch => ({
+  ...bindActionCreators(
+    {
+      showBanUserDialog,
+      showSuspendUserDialog,
+      changeTab,
+      clearUserDetailSelections,
+      toggleSelectCommentInUserDetail,
+      viewUserDetail,
+      hideUserDetail,
+      toggleSelectAllCommentInUserDetail,
+      notify,
+    },
+    dispatch
+  ),
 });
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   withUserDetailQuery,
   withSetCommentStatus,
+  withUnbanUser,
+  withUnsuspendUser
 )(UserDetailContainer);
diff --git a/client/coral-admin/src/containers/UserDetailComment.js b/client/coral-admin/src/containers/UserDetailComment.js
index fe95f4ae4..f9534fdf1 100644
--- a/client/coral-admin/src/containers/UserDetailComment.js
+++ b/client/coral-admin/src/containers/UserDetailComment.js
@@ -1,7 +1,7 @@
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import UserDetailComment from '../components/UserDetailComment';
 import withFragments from 'coral-framework/hocs/withFragments';
-import {getDefinitionName} from 'coral-framework/utils';
+import { getDefinitionName } from 'coral-framework/utils';
 import CommentLabels from './CommentLabels';
 import CommentDetails from './CommentDetails';
 
@@ -35,10 +35,13 @@ export default withFragments({
       editing {
         edited
       }
+      status_history {
+        type
+      }
       ...${getDefinitionName(CommentLabels.fragments.comment)}
       ...${getDefinitionName(CommentDetails.fragments.comment)}
     }
     ${CommentLabels.fragments.comment}
     ${CommentDetails.fragments.comment}
-  `
+  `,
 })(UserDetailComment);
diff --git a/client/coral-admin/src/graphql/index.js b/client/coral-admin/src/graphql/index.js
index 42e96f382..66dd21836 100644
--- a/client/coral-admin/src/graphql/index.js
+++ b/client/coral-admin/src/graphql/index.js
@@ -1,45 +1,202 @@
 import update from 'immutability-helper';
-import {mapLeaves} from 'coral-framework/utils';
+import { mapLeaves } from 'coral-framework/utils';
+import { gql } from 'react-apollo';
+
+const userStatusFragment = gql`
+  fragment Talk_UpdateUserStatus on User {
+    state {
+      status {
+        banned {
+          status
+        }
+        suspension {
+          until
+        }
+      }
+    }
+  }
+`;
+
+const userRoleFragment = gql`
+  fragment Talk_UpdateUserRole on User {
+    role
+  }
+`;
 
 export default {
   mutations: {
-    SetUserStatus: ({variables: {status, userId}}) => ({
+    SetUserRole: ({ variables: { id, role } }) => ({
+      update: proxy => {
+        const fragmentId = `User_${id}`;
+        const data = proxy.readFragment({
+          fragment: userRoleFragment,
+          id: fragmentId,
+        });
+
+        const updated = update(data, {
+          role: {
+            $set: role,
+          },
+        });
+
+        proxy.writeFragment({
+          fragment: userRoleFragment,
+          id: fragmentId,
+          data: updated,
+        });
+      },
+    }),
+    SuspendUser: ({ variables: { input: { id, until } } }) => ({
+      update: proxy => {
+        const fragmentId = `User_${id}`;
+
+        const data = proxy.readFragment({
+          fragment: userStatusFragment,
+          id: fragmentId,
+        });
+
+        const updated = update(data, {
+          state: {
+            status: {
+              suspension: {
+                until: { $set: until },
+              },
+            },
+          },
+        });
+
+        proxy.writeFragment({
+          fragment: userStatusFragment,
+          id: fragmentId,
+          data: updated,
+        });
+      },
+    }),
+    UnsuspendUser: ({ variables: { input: { id } } }) => ({
+      update: proxy => {
+        const fragmentId = `User_${id}`;
+        const data = proxy.readFragment({
+          fragment: userStatusFragment,
+          id: fragmentId,
+        });
+
+        const updated = update(data, {
+          state: {
+            status: {
+              suspension: {
+                until: { $set: null },
+              },
+            },
+          },
+        });
+
+        proxy.writeFragment({
+          fragment: userStatusFragment,
+          id: fragmentId,
+          data: updated,
+        });
+      },
+    }),
+    BanUser: ({ variables: { input: { id } } }) => ({
+      update: proxy => {
+        const fragmentId = `User_${id}`;
+        const data = proxy.readFragment({
+          fragment: userStatusFragment,
+          id: fragmentId,
+        });
+
+        const updated = update(data, {
+          state: {
+            status: {
+              banned: {
+                status: { $set: true },
+              },
+            },
+          },
+        });
+
+        proxy.writeFragment({
+          fragment: userStatusFragment,
+          id: fragmentId,
+          data: updated,
+        });
+      },
+    }),
+    UnbanUser: ({ variables: { input: { id } } }) => ({
+      update: proxy => {
+        const fragmentId = `User_${id}`;
+        const data = proxy.readFragment({
+          fragment: userStatusFragment,
+          id: fragmentId,
+        });
+
+        const updated = update(data, {
+          state: {
+            status: {
+              banned: {
+                status: { $set: false },
+              },
+            },
+          },
+        });
+
+        proxy.writeFragment({
+          fragment: userStatusFragment,
+          id: fragmentId,
+          data: updated,
+        });
+      },
+    }),
+    SetUserBanStatus: ({ variables: { status, id } }) => ({
       updateQueries: {
-        TalkAdmin_Community: (prev) => {
-          if (status !== 'APPROVED') {
+        TalkAdmin_Community: prev => {
+          if (!status) {
             return prev;
           }
           const updated = update(prev, {
             users: {
-              nodes: {$apply: (nodes) => nodes.filter((node) => node.id !== userId)},
+              nodes: { $apply: nodes => nodes.filter(node => node.id !== id) },
             },
           });
           return updated;
-        }
-      }
+        },
+      },
     }),
-    RejectUsername: ({variables: {input: {id: userId}}})  => ({
+    ApproveUsername: ({ variables: { id } }) => ({
       updateQueries: {
-        TalkAdmin_Community: (prev) => {
+        TalkAdmin_Community: prev => {
           const updated = update(prev, {
-            users: {
-              nodes: {$apply: (nodes) => nodes.filter((node) => node.id !== userId)},
+            flaggedUsers: {
+              nodes: { $apply: nodes => nodes.filter(node => node.id !== id) },
             },
           });
           return updated;
-        }
-      }
+        },
+      },
     }),
-    UpdateSettings: ({variables: {input}})  => ({
+    RejectUsername: ({ variables: { id: userId } }) => ({
       updateQueries: {
-        TalkAdmin_Configure: (prev) => {
+        TalkAdmin_Community: prev => {
           const updated = update(prev, {
-            settings: mapLeaves(input, (leaf) => ({$set: leaf})),
+            flaggedUsers: {
+              nodes: {
+                $apply: nodes => nodes.filter(node => node.id !== userId),
+              },
+            },
           });
           return updated;
-        }
-      }
+        },
+      },
+    }),
+    UpdateSettings: ({ variables: { input } }) => ({
+      updateQueries: {
+        TalkAdmin_Configure: prev => {
+          const updated = update(prev, {
+            settings: mapLeaves(input, leaf => ({ $set: leaf })),
+          });
+          return updated;
+        },
+      },
     }),
   },
 };
-
diff --git a/client/coral-admin/src/index.js b/client/coral-admin/src/index.js
index 442a4f536..ab9ee32b3 100644
--- a/client/coral-admin/src/index.js
+++ b/client/coral-admin/src/index.js
@@ -1,20 +1,20 @@
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 import smoothscroll from 'smoothscroll-polyfill';
 import TalkProvider from 'coral-framework/components/TalkProvider';
-import {createContext} from 'coral-framework/services/bootstrap';
+import { createContext } from 'coral-framework/services/bootstrap';
 import reducers from './reducers';
 import App from './components/App';
 import 'react-mdl/extra/material.js';
 import graphqlExtension from './graphql';
 import pluginsConfig from 'pluginsConfig';
-import {toast} from 'react-toastify';
-import {createNotificationService} from './services/notification';
-import {hideShortcutsNote} from './actions/moderation';
+import { toast } from 'react-toastify';
+import { createNotificationService } from './services/notification';
+import { hideShortcutsNote } from './actions/moderation';
 
 smoothscroll.polyfill();
 
-function init({store, storage}) {
+function init({ store, storage }) {
   if (storage && storage.getItem('coral:shortcutsNote') === 'hide') {
     store.dispatch(hideShortcutsNote());
   }
@@ -22,13 +22,19 @@ function init({store, storage}) {
 
 async function main() {
   const notification = createNotificationService(toast);
-  const context = await createContext({reducers, graphqlExtension, pluginsConfig, notification, init});
+  const context = await createContext({
+    reducers,
+    graphqlExtension,
+    pluginsConfig,
+    notification,
+    init,
+  });
 
   render(
     <TalkProvider {...context}>
       <App />
-    </TalkProvider>
-    , document.querySelector('#root')
+    </TalkProvider>,
+    document.querySelector('#root')
   );
 }
 
diff --git a/client/coral-admin/src/reducers/auth.js b/client/coral-admin/src/reducers/auth.js
index a9c7f520e..14aa2c21c 100644
--- a/client/coral-admin/src/reducers/auth.js
+++ b/client/coral-admin/src/reducers/auth.js
@@ -5,60 +5,61 @@ const initialState = {
   user: null,
   loginError: null,
   loginMaxExceeded: false,
-  passwordRequestSuccess: null
+  passwordRequestSuccess: null,
 };
 
-export default function auth (state = initialState, action) {
+export default function auth(state = initialState, action) {
   switch (action.type) {
-  case actions.CHECK_LOGIN_REQUEST:
-    return {
-      ...state,
-      loadingUser: true,
-    };
-  case actions.CHECK_LOGIN_FAILURE:
-    return {
-      ...state,
-      loggedIn: false,
-      loadingUser: false,
-      user: null,
-    };
-  case actions.CHECK_LOGIN_SUCCESS:
-    return {
-      ...state,
-      loggedIn: true,
-      loadingUser: false,
-      user: action.user,
-    };
-  case actions.LOGOUT:
-    return initialState;
-  case actions.LOGIN_SUCCESS:
-    return {
-      ...state,
-      loginMaxExceeded: false,
-      loginError: null,
-    };
-  case actions.LOGIN_FAILURE:
-    return {
-      ...state,
-      loginError: action.message,
-    };
-  case actions.FETCH_FORGOT_PASSWORD_REQUEST:
-    return {
-      ...state,
-      passwordRequestSuccess: null,
-    };
-  case actions.FETCH_FORGOT_PASSWORD_SUCCESS:
-    return {
-      ...state,
-      passwordRequestSuccess: 'If you have a registered account, a password reset link was sent to that email.',
-    };
-  case actions.LOGIN_MAXIMUM_EXCEEDED:
-    return {
-      ...state,
-      loginMaxExceeded: true,
-      loginError: action.message,
-    };
-  default :
-    return state;
+    case actions.CHECK_LOGIN_REQUEST:
+      return {
+        ...state,
+        loadingUser: true,
+      };
+    case actions.CHECK_LOGIN_FAILURE:
+      return {
+        ...state,
+        loggedIn: false,
+        loadingUser: false,
+        user: null,
+      };
+    case actions.CHECK_LOGIN_SUCCESS:
+      return {
+        ...state,
+        loggedIn: true,
+        loadingUser: false,
+        user: action.user,
+      };
+    case actions.LOGOUT:
+      return initialState;
+    case actions.LOGIN_SUCCESS:
+      return {
+        ...state,
+        loginMaxExceeded: false,
+        loginError: null,
+      };
+    case actions.LOGIN_FAILURE:
+      return {
+        ...state,
+        loginError: action.message,
+      };
+    case actions.FETCH_FORGOT_PASSWORD_REQUEST:
+      return {
+        ...state,
+        passwordRequestSuccess: null,
+      };
+    case actions.FETCH_FORGOT_PASSWORD_SUCCESS:
+      return {
+        ...state,
+        passwordRequestSuccess:
+          'If you have a registered account, a password reset link was sent to that email.',
+      };
+    case actions.LOGIN_MAXIMUM_EXCEEDED:
+      return {
+        ...state,
+        loginMaxExceeded: true,
+        loginError: action.message,
+      };
+    default:
+      return state;
   }
 }
diff --git a/client/coral-admin/src/reducers/banUserDialog.js b/client/coral-admin/src/reducers/banUserDialog.js
index 1d66339ec..413ae66c6 100644
--- a/client/coral-admin/src/reducers/banUserDialog.js
+++ b/client/coral-admin/src/reducers/banUserDialog.js
@@ -1,4 +1,7 @@
-import {SHOW_BAN_USER_DIALOG, HIDE_BAN_USER_DIALOG} from '../constants/banUserDialog';
+import {
+  SHOW_BAN_USER_DIALOG,
+  HIDE_BAN_USER_DIALOG,
+} from '../constants/banUserDialog';
 
 const initialState = {
   open: false,
@@ -10,21 +13,21 @@ const initialState = {
 
 export default function banUserDialog(state = initialState, action) {
   switch (action.type) {
-  case SHOW_BAN_USER_DIALOG:
-    return {
-      ...state,
-      open: true,
-      userId: action.userId,
-      username: action.username,
-      commentId: action.commentId,
-      commentStatus: action.commentStatus,
-    };
-  case HIDE_BAN_USER_DIALOG:
-    return {
-      ...state,
-      open: false,
-    };
-  default:
-    return state;
+    case SHOW_BAN_USER_DIALOG:
+      return {
+        ...state,
+        open: true,
+        userId: action.userId,
+        username: action.username,
+        commentId: action.commentId,
+        commentStatus: action.commentStatus,
+      };
+    case HIDE_BAN_USER_DIALOG:
+      return {
+        ...state,
+        open: false,
+      };
+    default:
+      return state;
   }
 }
diff --git a/client/coral-admin/src/reducers/community.js b/client/coral-admin/src/reducers/community.js
index 170804b60..9fe17ad8f 100644
--- a/client/coral-admin/src/reducers/community.js
+++ b/client/coral-admin/src/reducers/community.js
@@ -5,12 +5,10 @@ import {
   SORT_UPDATE,
   SET_PAGE,
   SET_SEARCH_VALUE,
-  SET_ROLE,
-  SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
   HIDE_BANUSER_DIALOG,
   SHOW_REJECT_USERNAME_DIALOG,
-  HIDE_REJECT_USERNAME_DIALOG
+  HIDE_REJECT_USERNAME_DIALOG,
 } from '../constants/community';
 
 const initialState = {
@@ -25,96 +23,75 @@ const initialState = {
   pagePeople: 0,
   user: {},
   banDialog: false,
-  rejectUsernameDialog: false
+  rejectUsernameDialog: false,
 };
 
-export default function community (state = initialState, action) {
+export default function community(state = initialState, action) {
   switch (action.type) {
-  case FETCH_USERS_REQUEST :
-    return {
-      ...state,
-      isFetchingPeople: true,
-    };
-  case FETCH_USERS_FAILURE :
-    return {
-      ...state,
-      isFetchingPeople: false,
-      errorPeople: action.error,
-    };
-  case FETCH_USERS_SUCCESS : {
+    case FETCH_USERS_REQUEST:
+      return {
+        ...state,
+        isFetchingPeople: true,
+      };
+    case FETCH_USERS_FAILURE:
+      return {
+        ...state,
+        isFetchingPeople: false,
+        errorPeople: action.error,
+      };
+    case FETCH_USERS_SUCCESS: {
     const {users, type, page, count, limit, totalPages, ...rest} = action; // eslint-disable-line
-    return {
-      ...state,
-      isFetchingPeople: false,
-      errorPeople: '',
-      pagePeople: page,
-      countPeople: count,
-      limitPeople: limit,
-      totalPagesPeople: totalPages,
-      ...rest,
-      users, // Sets to normal array
-    };
-  }
-  case SET_PAGE:
-    return {
-      ...state,
-      pagePeople: action.page,
-    };
-  case SET_ROLE : {
-    const commenters = state.users;
-    const idx = commenters.findIndex((el) => el.id === action.id);
-
-    commenters[idx].roles[0] = action.role;
-    return {
-      ...state,
-      users: commenters.map((id) => id),
-    };
-  }
-  case SET_COMMENTER_STATUS: {
-    const commenters = state.users;
-    const idx = commenters.findIndex((el) => el.id === action.id);
-
-    commenters[idx].status = action.status;
-    return {
-      ...state,
-      users: commenters.map((id) => id),
-    };
-
-  }
-  case SORT_UPDATE :
-    return {
-      ...state,
-      fieldPeople: action.sort.field,
-      ascPeople: !state.ascPeople,
-    };
-  case HIDE_BANUSER_DIALOG:
-    return {
-      ...state,
-      banDialog: false,
-    };
-  case SHOW_BANUSER_DIALOG:
-    return {
-      ...state,
-      user: action.user,
-      banDialog: true,
-    };
-  case HIDE_REJECT_USERNAME_DIALOG:
-    return {
-      ...state,
-      rejectUsernameDialog: false,
-    };
-  case SHOW_REJECT_USERNAME_DIALOG:
-    return {
-      ...state,
-      user: action.user,
-      rejectUsernameDialog: true
-    };
-  case SET_SEARCH_VALUE:
-    return {
-      ...state,
-      searchValue: action.value,
-    };
-  default :
-    return state;
+      return {
+        ...state,
+        isFetchingPeople: false,
+        errorPeople: '',
+        pagePeople: page,
+        countPeople: count,
+        limitPeople: limit,
+        totalPagesPeople: totalPages,
+        ...rest,
+        users, // Sets to normal array
+      };
+    }
+    case SET_PAGE:
+      return {
+        ...state,
+        pagePeople: action.page,
+      };
+    case SORT_UPDATE:
+      return {
+        ...state,
+        fieldPeople: action.sort.field,
+        ascPeople: !state.ascPeople,
+      };
+    case HIDE_BANUSER_DIALOG:
+      return {
+        ...state,
+        banDialog: false,
+      };
+    case SHOW_BANUSER_DIALOG:
+      return {
+        ...state,
+        user: action.user,
+        banDialog: true,
+      };
+    case HIDE_REJECT_USERNAME_DIALOG:
+      return {
+        ...state,
+        rejectUsernameDialog: false,
+      };
+    case SHOW_REJECT_USERNAME_DIALOG:
+      return {
+        ...state,
+        user: action.user,
+        rejectUsernameDialog: true,
+      };
+    case SET_SEARCH_VALUE:
+      return {
+        ...state,
+        searchValue: action.value,
+      };
+    default:
+      return state;
   }
 }
diff --git a/client/coral-admin/src/reducers/config.js b/client/coral-admin/src/reducers/config.js
index 310a198ed..0588f0a13 100644
--- a/client/coral-admin/src/reducers/config.js
+++ b/client/coral-admin/src/reducers/config.js
@@ -1,17 +1,17 @@
 import * as actions from '../actions/config';
 
 const initialState = {
-  data: {}
+  data: {},
 };
 
-export default function config (state = initialState, action) {
+export default function config(state = initialState, action) {
   switch (action.type) {
-  case actions.CONFIG_UPDATED:
-    return {
-      ...state,
-      data: action.data,
-    };
-  default:
-    return state;
+    case actions.CONFIG_UPDATED:
+      return {
+        ...state,
+        data: action.data,
+      };
+    default:
+      return state;
   }
 }
diff --git a/client/coral-admin/src/reducers/configure.js b/client/coral-admin/src/reducers/configure.js
index e03c9ea8f..9809b0fa9 100644
--- a/client/coral-admin/src/reducers/configure.js
+++ b/client/coral-admin/src/reducers/configure.js
@@ -11,37 +11,40 @@ const initialState = {
 
 export default function configure(state = initialState, action) {
   switch (action.type) {
-  case actions.UPDATE_PENDING: {
-    let next = state;
-    if (action.updater) {
+    case actions.UPDATE_PENDING: {
+      let next = state;
+      if (action.updater) {
+        next = update(next, {
+          pending: action.updater,
+        });
+      }
+      if (action.errorUpdater) {
+        next = update(next, {
+          errors: action.errorUpdater,
+        });
+      }
+      const noErrors = Object.keys(next.errors).reduce(
+        (res, error) => res && !next.errors[error],
+        true
+      );
+      const canSave = !isEmpty(next.pending) && noErrors;
       next = update(next, {
-        pending: action.updater,
+        canSave: { $set: canSave },
       });
-    }
-    if (action.errorUpdater) {
-      next = update(next, {
-        errors: action.errorUpdater,
-      });
-    }
-    const noErrors = Object.keys(next.errors).reduce((res, error) => res && !next.errors[error], true);
-    const canSave = !isEmpty(next.pending) && noErrors;
-    next = update(next, {
-      canSave: {$set: canSave},
-    });
 
-    return next;
-  }
-  case actions.CLEAR_PENDING:
-    return {
-      ...state,
-      pending: {},
-      canSave: false,
-    };
-  case actions.SET_ACTIVE_SECTION:
-    return {
-      ...state,
-      activeSection: action.section,
-    };
+      return next;
+    }
+    case actions.CLEAR_PENDING:
+      return {
+        ...state,
+        pending: {},
+        canSave: false,
+      };
+    case actions.SET_ACTIVE_SECTION:
+      return {
+        ...state,
+        activeSection: action.section,
+      };
   }
   return state;
 }
diff --git a/client/coral-admin/src/reducers/index.js b/client/coral-admin/src/reducers/index.js
index 450a914c3..11801a379 100644
--- a/client/coral-admin/src/reducers/index.js
+++ b/client/coral-admin/src/reducers/index.js
@@ -8,6 +8,7 @@ import config from './config';
 import banUserDialog from './banUserDialog';
 import suspendUserDialog from './suspendUserDialog';
 import userDetail from './userDetail';
+import ui from './ui';
 
 export default {
   auth,
@@ -20,4 +21,5 @@ export default {
   moderation,
   install,
   config,
+  ui,
 };
diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js
index c6e85c69f..c0a694977 100644
--- a/client/coral-admin/src/reducers/install.js
+++ b/client/coral-admin/src/reducers/install.js
@@ -8,127 +8,129 @@ const initialState = {
       organizationName: '',
       domains: {
         whitelist: [],
-      }
+      },
     },
     user: {
       username: '',
       email: '',
       password: '',
-      confirmPassword: ''
-    }
+      confirmPassword: '',
+    },
   },
   errors: {
     organizationName: '',
     username: '',
     email: '',
     password: '',
-    confirmPassword: ''
+    confirmPassword: '',
   },
   showErrors: false,
   hasError: false,
   error: null,
   step: 0,
-  navItems: [{
-    text: '1. Add Organization Name',
-    step: 1
-  },
-  {
-    text: '2. Create your account',
-    step: 2
-  },
-  {
-    text: '3. Domain Whitelist',
-    step: 3
-  }],
+  navItems: [
+    {
+      text: '1. Add Organization Name',
+      step: 1,
+    },
+    {
+      text: '2. Create your account',
+      step: 2,
+    },
+    {
+      text: '3. Domain Whitelist',
+      step: 3,
+    },
+  ],
   installRequest: null,
   installRequestError: null,
-  alreadyInstalled: false
+  alreadyInstalled: false,
 };
 
-export default function install (state = initialState, action) {
+export default function install(state = initialState, action) {
   switch (action.type) {
-  case actions.NEXT_STEP:
-    return {
-      ...state,
-      step: state.step + 1,
-    };
-  case actions.PREVIOUS_STEP:
-    return {
-      ...state,
-      step: state.step - 1,
-    };
-  case actions.GO_TO_STEP:
-    return {
-      ...state,
-      step: action.step,
-    };
-  case actions.UPDATE_PERMITTED_DOMAINS_SETTINGS:
-    return update(state, {
-      data: {
-        settings: {
-          domains: {
-            whitelist: {$set: action.value},
+    case actions.NEXT_STEP:
+      return {
+        ...state,
+        step: state.step + 1,
+      };
+    case actions.PREVIOUS_STEP:
+      return {
+        ...state,
+        step: state.step - 1,
+      };
+    case actions.GO_TO_STEP:
+      return {
+        ...state,
+        step: action.step,
+      };
+    case actions.UPDATE_PERMITTED_DOMAINS_SETTINGS:
+      return update(state, {
+        data: {
+          settings: {
+            domains: {
+              whitelist: { $set: action.value },
+            },
           },
         },
-      },
-    });
-  case actions.UPDATE_FORMDATA_SETTINGS:
-    return update(state, {
-      data: {
-        settings: {
-          [action.name]: {$set: action.value},
+      });
+    case actions.UPDATE_FORMDATA_SETTINGS:
+      return update(state, {
+        data: {
+          settings: {
+            [action.name]: { $set: action.value },
+          },
         },
-      },
-    });
-  case actions.UPDATE_FORMDATA_USER:
-    return update(state, {
-      data: {
-        user: {
-          [action.name]: {$set: action.value},
+      });
+    case actions.UPDATE_FORMDATA_USER:
+      return update(state, {
+        data: {
+          user: {
+            [action.name]: { $set: action.value },
+          },
         },
-      },
-    });
-  case actions.HAS_ERROR:
-    return {
-      ...state,
-      hasError: true,
-      showErrors: true,
-    };
-  case actions.ADD_ERROR:
-    return update(state, {
-      errors: {
-        [action.name]: {$set: action.error},
-      },
-    });
-  case actions.CLEAR_ERRORS:
-    return {
-      ...state,
-      errors: {},
-    };
-  case actions.INSTALL_REQUEST:
-    return {
-      ...state,
-      isLoading: true,
-    };
-  case actions.INSTALL_SUCCESS:
-    return {
-      ...state,
-      isLoading: false,
-      installRequest: 'SUCCESS',
-    };
-  case actions.INSTALL_FAILURE:
-    return {
-      ...state,
-      isLoading: false,
-      installRequest: 'FAILURE',
-      installRequestError: action.error
-    };
-  case actions.CHECK_INSTALL_SUCCESS:
-    return {
-      ...state,
-      alreadyInstalled: action.installed,
-    };
-  default :
-    return state;
+      });
+    case actions.HAS_ERROR:
+      return {
+        ...state,
+        hasError: true,
+        showErrors: true,
+      };
+    case actions.ADD_ERROR:
+      return update(state, {
+        errors: {
+          [action.name]: { $set: action.error },
+        },
+      });
+    case actions.CLEAR_ERRORS:
+      return {
+        ...state,
+        errors: {},
+      };
+    case actions.INSTALL_REQUEST:
+      return {
+        ...state,
+        isLoading: true,
+      };
+    case actions.INSTALL_SUCCESS:
+      return {
+        ...state,
+        isLoading: false,
+        installRequest: 'SUCCESS',
+      };
+    case actions.INSTALL_FAILURE:
+      return {
+        ...state,
+        isLoading: false,
+        installRequest: 'FAILURE',
+        installRequestError: action.error,
+      };
+    case actions.CHECK_INSTALL_SUCCESS:
+      return {
+        ...state,
+        alreadyInstalled: action.installed,
+      };
+    default:
+      return state;
   }
 }
diff --git a/client/coral-admin/src/reducers/moderation.js b/client/coral-admin/src/reducers/moderation.js
index 6a64b380a..e2c6a32ff 100644
--- a/client/coral-admin/src/reducers/moderation.js
+++ b/client/coral-admin/src/reducers/moderation.js
@@ -10,54 +10,54 @@ const initialState = {
   selectedCommentId: '',
 };
 
-export default function moderation (state = initialState, action) {
+export default function moderation(state = initialState, action) {
   switch (action.type) {
-  case actions.MODERATION_CLEAR_STATE:
-    return {
-      ...initialState,
-      shortcutsNoteVisible: state.shortcutsNoteVisible,
-    };
-  case actions.TOGGLE_MODAL:
-    return {
-      ...state,
-      modalOpen: action.open,
-    };
-  case actions.SINGLE_VIEW:
-    return {
-      ...state,
-      singleView: !state.singleView,
-    };
-  case actions.HIDE_SHORTCUTS_NOTE:
-    return {
-      ...state,
-      shortcutsNoteVisible: 'hide',
-    };
-  case actions.SHOW_STORY_SEARCH:
-    return {
-      ...state,
-      storySearchVisible: true,
-    };
-  case actions.HIDE_STORY_SEARCH:
-    return {
-      ...state,
-      storySearchVisible: false,
-    };
-  case actions.STORY_SEARCH_CHANGE_VALUE:
-    return {
-      ...state,
-      storySearchString: action.value,
-    };
-  case actions.SET_SORT_ORDER:
-    return {
-      ...state,
-      sortOrder: action.order,
-    };
-  case actions.MODERATION_SELECT_COMMENT:
-    return {
-      ...state,
-      selectedCommentId: action.id,
-    };
-  default:
-    return state;
+    case actions.MODERATION_CLEAR_STATE:
+      return {
+        ...initialState,
+        shortcutsNoteVisible: state.shortcutsNoteVisible,
+      };
+    case actions.TOGGLE_MODAL:
+      return {
+        ...state,
+        modalOpen: action.open,
+      };
+    case actions.SINGLE_VIEW:
+      return {
+        ...state,
+        singleView: !state.singleView,
+      };
+    case actions.HIDE_SHORTCUTS_NOTE:
+      return {
+        ...state,
+        shortcutsNoteVisible: 'hide',
+      };
+    case actions.SHOW_STORY_SEARCH:
+      return {
+        ...state,
+        storySearchVisible: true,
+      };
+    case actions.HIDE_STORY_SEARCH:
+      return {
+        ...state,
+        storySearchVisible: false,
+      };
+    case actions.STORY_SEARCH_CHANGE_VALUE:
+      return {
+        ...state,
+        storySearchString: action.value,
+      };
+    case actions.SET_SORT_ORDER:
+      return {
+        ...state,
+        sortOrder: action.order,
+      };
+    case actions.MODERATION_SELECT_COMMENT:
+      return {
+        ...state,
+        selectedCommentId: action.id,
+      };
+    default:
+      return state;
   }
 }
diff --git a/client/coral-admin/src/reducers/stories.js b/client/coral-admin/src/reducers/stories.js
index 271ec8cfe..a942dd724 100644
--- a/client/coral-admin/src/reducers/stories.js
+++ b/client/coral-admin/src/reducers/stories.js
@@ -5,7 +5,7 @@ const initialState = {
   assets: {
     byId: {},
     ids: [],
-    assets: []
+    assets: [],
   },
   searchValue: '',
   criteria: {
@@ -14,60 +14,59 @@ const initialState = {
   },
 };
 
-export default function assets (state = initialState, action) {
+export default function assets(state = initialState, action) {
   switch (action.type) {
-  case actions.FETCH_ASSETS_SUCCESS: {
-    const assets = action.assets.reduce((prev, curr) => {
-      prev[curr.id] = curr;
-      return prev;
-    }, {});
+    case actions.FETCH_ASSETS_SUCCESS: {
+      const assets = action.assets.reduce((prev, curr) => {
+        prev[curr.id] = curr;
+        return prev;
+      }, {});
 
-    return update(state, {
-      assets: {
-        totalPages: {$set: action.totalPages},
-        page: {$set: action.page},
-        byId: {$set: assets},
-        count: {$set: action.count},
-        ids: {$set: Object.keys(assets)},
-      },
-    });
-  }
-  case actions.UPDATE_ASSET_STATE_REQUEST:
-    return update(state, {
-      assets: {
-        byId: {
-          [action.id]: {
-            closedAt: {$set: action.closedAt},
+      return update(state, {
+        assets: {
+          totalPages: { $set: action.totalPages },
+          page: { $set: action.page },
+          byId: { $set: assets },
+          count: { $set: action.count },
+          ids: { $set: Object.keys(assets) },
+        },
+      });
+    }
+    case actions.UPDATE_ASSET_STATE_REQUEST:
+      return update(state, {
+        assets: {
+          byId: {
+            [action.id]: {
+              closedAt: { $set: action.closedAt },
+            },
           },
         },
-      },
-    });
-  case actions.UPDATE_ASSETS:
-    return update(state, {
-      assets: {
-        assets: {$set: action.assets},
-      },
-    });
-  case actions.SET_PAGE:
-    return {
-      ...state,
-      page: action.page,
-    };
-  case actions.SET_SEARCH_VALUE:
-    return {
-      ...state,
-      searchValue: action.value,
-    };
-  case actions.SET_CRITERIA:
-    return {
-      ...state,
-      criteria: {
-        ...state.criteria,
-        ...action.criteria,
-      },
-    };
-  default:
-    return state;
+      });
+    case actions.UPDATE_ASSETS:
+      return update(state, {
+        assets: {
+          assets: { $set: action.assets },
+        },
+      });
+    case actions.SET_PAGE:
+      return {
+        ...state,
+        page: action.page,
+      };
+    case actions.SET_SEARCH_VALUE:
+      return {
+        ...state,
+        searchValue: action.value,
+      };
+    case actions.SET_CRITERIA:
+      return {
+        ...state,
+        criteria: {
+          ...state.criteria,
+          ...action.criteria,
+        },
+      };
+    default:
+      return state;
   }
 }
-
diff --git a/client/coral-admin/src/reducers/suspendUserDialog.js b/client/coral-admin/src/reducers/suspendUserDialog.js
index 733dd337b..2b4f32ee7 100644
--- a/client/coral-admin/src/reducers/suspendUserDialog.js
+++ b/client/coral-admin/src/reducers/suspendUserDialog.js
@@ -1,4 +1,7 @@
-import {SHOW_SUSPEND_USER_DIALOG, HIDE_SUSPEND_USER_DIALOG} from '../constants/suspendUserDialog';
+import {
+  SHOW_SUSPEND_USER_DIALOG,
+  HIDE_SUSPEND_USER_DIALOG,
+} from '../constants/suspendUserDialog';
 
 const initialState = {
   open: false,
@@ -10,21 +13,21 @@ const initialState = {
 
 export default function suspendUserDialog(state = initialState, action) {
   switch (action.type) {
-  case SHOW_SUSPEND_USER_DIALOG:
-    return {
-      ...state,
-      open: true,
-      userId: action.userId,
-      username: action.username,
-      commentId: action.commentId,
-      commentStatus: action.commentStatus,
-    };
-  case HIDE_SUSPEND_USER_DIALOG:
-    return {
-      ...state,
-      open: false,
-    };
-  default:
-    return state;
+    case SHOW_SUSPEND_USER_DIALOG:
+      return {
+        ...state,
+        open: true,
+        userId: action.userId,
+        username: action.username,
+        commentId: action.commentId,
+        commentStatus: action.commentStatus,
+      };
+    case HIDE_SUSPEND_USER_DIALOG:
+      return {
+        ...state,
+        open: false,
+      };
+    default:
+      return state;
   }
 }
diff --git a/client/coral-admin/src/reducers/ui.js b/client/coral-admin/src/reducers/ui.js
new file mode 100644
index 000000000..dcb9ddbe0
--- /dev/null
+++ b/client/coral-admin/src/reducers/ui.js
@@ -0,0 +1,39 @@
+import {
+  SHOW_BAN_USER_DIALOG,
+  HIDE_BAN_USER_DIALOG,
+} from '../constants/banUserDialog';
+import {
+  SHOW_SUSPEND_USER_DIALOG,
+  HIDE_SUSPEND_USER_DIALOG,
+} from '../constants/suspendUserDialog';
+
+const initialState = {
+  modal: false,
+};
+
+export default function config(state = initialState, action) {
+  switch (action.type) {
+    case SHOW_BAN_USER_DIALOG:
+      return {
+        ...state,
+        modal: true,
+      };
+    case SHOW_SUSPEND_USER_DIALOG:
+      return {
+        ...state,
+        modal: true,
+      };
+    case HIDE_BAN_USER_DIALOG:
+      return {
+        ...state,
+        modal: false,
+      };
+    case HIDE_SUSPEND_USER_DIALOG:
+      return {
+        ...state,
+        modal: false,
+      };
+    default:
+      return state;
+  }
+}
diff --git a/client/coral-admin/src/reducers/userDetail.js b/client/coral-admin/src/reducers/userDetail.js
index 3ad435973..64be445e4 100644
--- a/client/coral-admin/src/reducers/userDetail.js
+++ b/client/coral-admin/src/reducers/userDetail.js
@@ -9,44 +9,46 @@ const initialState = {
 
 export default function banUserDialog(state = initialState, action) {
   switch (action.type) {
-  case actions.VIEW_USER_DETAIL:
-    return {
-      ...state,
-      userId: action.userId,
-    };
-  case actions.HIDE_USER_DETAIL:
-    return {
-      ...state,
-      userId: null,
-      selectedCommentIds: [],
-    };
-  case actions.CLEAR_USER_DETAIL_SELECTIONS:
-    return {
-      ...state,
-      selectedCommentIds: [],
-    };
-  case actions.CHANGE_USER_DETAIL_STATUSES:
-    return {
-      ...state,
-      activeTab: action.tab,
-      statuses: action.statuses,
-    };
-  case actions.SELECT_USER_DETAIL_COMMENT:
-    return {
-      ...state,
-      selectedCommentIds: [...state.selectedCommentIds, action.id],
-    };
-  case actions.UNSELECT_USER_DETAIL_COMMENT:
-    return {
-      ...state,
-      selectedCommentIds: state.selectedCommentIds.filter((id) => id !== action.id),
-    };
-  case actions.SELECT_ALL_USER_DETAIL_COMMENT:
-    return {
-      ...state,
-      selectedCommentIds: action.ids
-    };
-  default:
-    return state;
+    case actions.VIEW_USER_DETAIL:
+      return {
+        ...state,
+        userId: action.userId,
+      };
+    case actions.HIDE_USER_DETAIL:
+      return {
+        ...state,
+        userId: null,
+        selectedCommentIds: [],
+      };
+    case actions.CLEAR_USER_DETAIL_SELECTIONS:
+      return {
+        ...state,
+        selectedCommentIds: [],
+      };
+    case actions.CHANGE_TAB_USER_DETAIL:
+      return {
+        ...state,
+        activeTab: action.tab,
+        statuses: action.statuses,
+      };
+    case actions.SELECT_USER_DETAIL_COMMENT:
+      return {
+        ...state,
+        selectedCommentIds: [...state.selectedCommentIds, action.id],
+      };
+    case actions.UNSELECT_USER_DETAIL_COMMENT:
+      return {
+        ...state,
+        selectedCommentIds: state.selectedCommentIds.filter(
+          id => id !== action.id
+        ),
+      };
+    case actions.SELECT_ALL_USER_DETAIL_COMMENT:
+      return {
+        ...state,
+        selectedCommentIds: action.ids,
+      };
+    default:
+      return state;
   }
 }
diff --git a/client/coral-admin/src/routes/Community/components/Community.js b/client/coral-admin/src/routes/Community/components/Community.js
index 3b60b357a..71beb12dd 100644
--- a/client/coral-admin/src/routes/Community/components/Community.js
+++ b/client/coral-admin/src/routes/Community/components/Community.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from './Community.css';
 import People from '../containers/People';
@@ -8,19 +8,22 @@ import FlaggedAccounts from '../containers/FlaggedAccounts';
 
 class Community extends Component {
   renderTab() {
-    const {route, community, ...props} = this.props; 
+    const { route, community, ...props } = this.props;
     const activeTab = route.path === ':id' ? 'flagged' : route.path;
 
     if (activeTab === 'people') {
-      return <People community={community} />;
+      return (
+        <People
+          community={community}
+          data={this.props.data}
+          root={this.props.root}
+        />
+      );
     }
 
     return (
       <div>
-        <FlaggedAccounts
-          data={this.props.data}
-          root={this.props.root}
-        />
+        <FlaggedAccounts data={this.props.data} root={this.props.root} />
         <RejectUsernameDialog
           user={community.user}
           open={community.rejectUsernameDialog}
@@ -32,14 +35,12 @@ class Community extends Component {
   }
 
   render() {
-    const {root: {flaggedUsernamesCount}} = this.props;
+    const { root: { flaggedUsernamesCount } } = this.props;
 
     return (
       <div className="talk-admin-community">
         <CommunityMenu flaggedUsernamesCount={flaggedUsernamesCount} />
-        <div className={styles.container}>
-          {this.renderTab()}
-        </div>
+        <div className={styles.container}>{this.renderTab()}</div>
       </div>
     );
   }
diff --git a/client/coral-admin/src/routes/Community/components/CommunityMenu.js b/client/coral-admin/src/routes/Community/components/CommunityMenu.js
index 251762b43..978a887be 100644
--- a/client/coral-admin/src/routes/Community/components/CommunityMenu.js
+++ b/client/coral-admin/src/routes/Community/components/CommunityMenu.js
@@ -1,23 +1,33 @@
 import React from 'react';
 import styles from './CommunityMenu.css';
 import t from 'coral-framework/services/i18n';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 import PropTypes from 'prop-types';
 import CountBadge from '../../../components/CountBadge';
 
-const CommunityMenu = ({flaggedUsernamesCount = 0}) => {
+const CommunityMenu = ({ flaggedUsernamesCount = 0 }) => {
   const flaggedPath = '/admin/community/flagged';
   const peoplePath = '/admin/community/people';
 
   return (
-    <div className='mdl-tabs'>
+    <div className="mdl-tabs">
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
         <div>
-          <Link to={flaggedPath} className={`mdl-tabs__tab ${styles.tab} talk-admin-nav-flagged-accounts`} activeClassName={styles.active}>
+          <Link
+            to={flaggedPath}
+            className={`mdl-tabs__tab ${
+              styles.tab
+            } talk-admin-nav-flagged-accounts`}
+            activeClassName={styles.active}
+          >
             {t('community.flaggedaccounts')}
             <CountBadge count={flaggedUsernamesCount} />
           </Link>
-          <Link to={peoplePath} className={`mdl-tabs__tab ${styles.tab} talk-admin-nav-people`} activeClassName={styles.active}>
+          <Link
+            to={peoplePath}
+            className={`mdl-tabs__tab ${styles.tab} talk-admin-nav-people`}
+            activeClassName={styles.active}
+          >
             {t('community.people')}
           </Link>
         </div>
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
index cbfd903c6..7fe858bb9 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js
@@ -5,7 +5,7 @@ import t from 'coral-framework/services/i18n';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 import LoadMore from '../../../components/LoadMore';
 import FlaggedUser from '../containers/FlaggedUser';
-import {CSSTransitionGroup} from 'react-transition-group';
+import { CSSTransitionGroup } from 'react-transition-group';
 import styles from './FlaggedAccounts.css';
 
 class FlaggedAccounts extends React.Component {
@@ -13,8 +13,6 @@ class FlaggedAccounts extends React.Component {
     const {
       users,
       loadMore,
-      showBanUserDialog,
-      showSuspendUserDialog,
       showRejectUsernameDialog,
       approveUser,
       me,
@@ -24,47 +22,45 @@ class FlaggedAccounts extends React.Component {
     const hasResults = users.nodes && !!users.nodes.length;
 
     return (
-      <div className={cn('talk-adnin-community-flagged-accounts', styles.container)}>
+      <div
+        className={cn(
+          'talk-adnin-community-flagged-accounts',
+          styles.container
+        )}
+      >
         <div className={styles.mainFlaggedContent}>
-          {
-            hasResults
-              ? <CSSTransitionGroup
-                component={'ul'}
-                className={styles.list}
-                transitionName={{
-                  enter: styles.userEnter,
-                  enterActive: styles.userEnterActive,
-                  leave: styles.userLeave,
-                  leaveActive: styles.userLeaveActive,
-                }}
-                transitionEnter={true}
-                transitionLeave={true}
-                transitionEnterTimeout={1000}
-                transitionLeaveTimeout={1000}
-              >
-                {
-                  users.nodes.map((user) => {
-                    return (
-                      <FlaggedUser
-                        user={user}
-                        key={user.id}
-                        showBanUserDialog={showBanUserDialog}
-                        showSuspendUserDialog={showSuspendUserDialog}
-                        showRejectUsernameDialog={showRejectUsernameDialog}
-                        approveUser={approveUser}
-                        me={me}
-                        viewUserDetail={viewUserDetail}
-                      />
-                    );
-                  })
-                }
-              </CSSTransitionGroup>
-              : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
-          }
-          <LoadMore
-            loadMore={loadMore}
-            showLoadMore={users.hasNextPage}
-          />
+          {hasResults ? (
+            <CSSTransitionGroup
+              component={'ul'}
+              className={styles.list}
+              transitionName={{
+                enter: styles.userEnter,
+                enterActive: styles.userEnterActive,
+                leave: styles.userLeave,
+                leaveActive: styles.userLeaveActive,
+              }}
+              transitionEnter={true}
+              transitionLeave={true}
+              transitionEnterTimeout={1000}
+              transitionLeaveTimeout={1000}
+            >
+              {users.nodes.map(user => {
+                return (
+                  <FlaggedUser
+                    user={user}
+                    key={user.id}
+                    showRejectUsernameDialog={showRejectUsernameDialog}
+                    approveUser={approveUser}
+                    me={me}
+                    viewUserDetail={viewUserDetail}
+                  />
+                );
+              })}
+            </CSSTransitionGroup>
+          ) : (
+            <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
+          )}
+          <LoadMore loadMore={loadMore} showLoadMore={users.hasNextPage} />
         </div>
       </div>
     );
@@ -74,8 +70,6 @@ class FlaggedAccounts extends React.Component {
 FlaggedAccounts.propTypes = {
   users: PropTypes.object,
   loadMore: PropTypes.func,
-  showBanUserDialog: PropTypes.func,
-  showSuspendUserDialog: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   approveUser: PropTypes.func,
   me: PropTypes.object,
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedUser.js b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
index b2156f479..3b0e1fa6e 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedUser.js
+++ b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
@@ -3,9 +3,7 @@ import styles from './FlaggedUser.css';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
-import {username} from 'talk-plugin-flags/helpers/flagReasons';
-import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
-import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
+import { username } from 'talk-plugin-flags/helpers/flagReasons';
 import ApproveButton from 'coral-admin/src/components/ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
 
@@ -18,102 +16,94 @@ const shortReasons = {
 };
 
 class User extends React.Component {
-
-  showSuspenUserDialog = () => this.props.showSuspendUserDialog({
-    userId: this.props.user.id,
-    username: this.props.user.username,
-  });
-
-  showBanUserDialog = () => this.props.showBanUserDialog({
-    userId: this.props.user.id,
-    username: this.props.user.username,
-  });
-
   viewAuthorDetail = () => this.props.viewUserDetail(this.props.user.id);
-  showRejectUsernameDialog = () => this.props.showRejectUsernameDialog({id: this.props.user.id});
-  approveUser = () => this.props.approveUser({
-    userId: this.props.user.id,
-  });
+
+  showRejectUsernameDialog = () =>
+    this.props.showRejectUsernameDialog({ id: this.props.user.id });
+
+  approveUser = () =>
+    this.props.approveUser({
+      userId: this.props.user.id,
+    });
 
   render() {
-    const {
-      user,
-      viewUserDetail,
-      selected,
-      me,
-      className,
-    } = this.props;
+    const { user, viewUserDetail, selected, className } = this.props;
 
     return (
-      <li tabIndex={0}
-        className={cn(className, styles.root, {[styles.rootSelected]: selected})} >
-        <div className={cn('talk-admin-community-flagged-user', styles.container)}>
-          <div className={cn('talk-admin-community-flagged-user-header', styles.header)}>
+      <li
+        tabIndex={0}
+        className={cn(className, styles.root, {
+          [styles.rootSelected]: selected,
+        })}
+      >
+        <div
+          className={cn('talk-admin-community-flagged-user', styles.container)}
+        >
+          <div
+            className={cn(
+              'talk-admin-community-flagged-user-header',
+              styles.header
+            )}
+          >
             <div className={styles.author}>
-              <button
-                onClick={this.viewAuthorDetail}
-                className={styles.button}>
+              <button onClick={this.viewAuthorDetail} className={styles.button}>
                 {user.username}
               </button>
-              {me.id !== user.id &&
-                <ActionsMenu icon="not_interested">
-                  <ActionsMenuItem
-                    disabled={user.status === 'BANNED'}
-                    onClick={this.showSuspenUserDialog}>
-                    Suspend User
-                  </ActionsMenuItem>
-                  <ActionsMenuItem
-                    disabled={user.status === 'BANNED'}
-                    onClick={this.showBanUserDialog}>
-                    Ban User
-                  </ActionsMenuItem>
-                </ActionsMenu>
-              }
             </div>
           </div>
-          <div className={cn('talk-admin-community-flagged-user-body', styles.body)}>
+          <div
+            className={cn(
+              'talk-admin-community-flagged-user-body',
+              styles.body
+            )}
+          >
             <div className={styles.flagged}>
               <div className={styles.flaggedByCount}>
                 <i className={cn('material-icons', styles.flagIcon)}>flag</i>
                 <span className={styles.flaggedByLabel}>
-                  {t('community.flags')}({ user.actions.length })
+                  {t('community.flags')}({user.actions.length})
                 </span>:
-                { user.action_summaries.map(
-                  (action, i) => {
-                    return <span className={styles.flaggedBy} key={i}>
+                {user.action_summaries.map((action, i) => {
+                  return (
+                    <span className={styles.flaggedBy} key={i}>
                       {shortReasons[action.reason]} ({action.count})
-                    </span>;
-                  }
-                )}
+                    </span>
+                  );
+                })}
               </div>
               <div className={styles.flaggedReasons}>
-                { user.action_summaries.map(
-                  (action_sum, i) => {
-                    return <div key={i}>
+                {user.action_summaries.map((action_sum, i) => {
+                  return (
+                    <div key={i}>
                       <span className={styles.flaggedByLabel}>
                         {shortReasons[action_sum.reason]} ({action_sum.count})
                       </span>
                       {user.actions.map(
-
                         // find the action by action_sum.reason
                         (action, j) => {
                           if (action.reason === action_sum.reason) {
-                            return <p className={styles.flaggedByReason} key={j}>
-                              {action.user &&
-                                <button onClick={() => {viewUserDetail(action.user.id);}} className={styles.button}>
-                                  {action.user.username}
-                                </button>
-                              }
-                              : {action.message ? action.message : 'n/a'}
-                            </p>;
+                            return (
+                              <p className={styles.flaggedByReason} key={j}>
+                                {action.user && (
+                                  <button
+                                    onClick={() => {
+                                      viewUserDetail(action.user.id);
+                                    }}
+                                    className={styles.button}
+                                  >
+                                    {action.user.username}
+                                  </button>
+                                )}
+                                : {action.message ? action.message : 'n/a'}
+                              </p>
+                            );
                           }
                           return null;
                         }
                       )}
-                    </div>;
-                  }
-                )}
-
+                    </div>
+                  );
+                })}
               </div>
             </div>
             <div className={styles.sideActions}>
@@ -136,8 +126,6 @@ class User extends React.Component {
 }
 
 User.propTypes = {
-  showSuspendUserDialog: PropTypes.func,
-  showBanUserDialog: PropTypes.func,
   viewUserDetail: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   approveUser: PropTypes.func,
diff --git a/client/coral-admin/src/routes/Community/components/Table.css b/client/coral-admin/src/routes/Community/components/People.css
similarity index 50%
rename from client/coral-admin/src/routes/Community/components/Table.css
rename to client/coral-admin/src/routes/Community/components/People.css
index 4071d9aa9..c4561ace1 100644
--- a/client/coral-admin/src/routes/Community/components/Table.css
+++ b/client/coral-admin/src/routes/Community/components/People.css
@@ -1,3 +1,45 @@
+.container {
+  padding: 10px;
+  display: flex;
+  padding-bottom: 200px;
+}
+
+.leftColumn {
+  padding: 42px 56px;
+  width: 234px;
+}
+
+.searchBox {
+  width: 100%;
+  padding: 9px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  display: flex;
+  background: white;
+  box-sizing: border-box;
+  height: 40px;
+
+  i {
+    color: #A1A1A1
+  }
+
+  input {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+    font-size: 16px;
+    padding: 0 2px 0 15px;
+    box-sizing: border-box;
+  }
+}
+
+.mainContent {
+  width: calc(100% - 300px);
+  padding: 34px 14px;
+  box-sizing: border-box;
+}
+
 .dataTable {
   width: 100%;
   border-left: none;
@@ -8,10 +50,6 @@ th.header {
   font-size: 1.1em;
 }
 
-th.header:hover {
-  cursor: pointer;
-}
-
 th.header:nth-child(2), th.header:nth-child(3) {
   width: 100px;
 }
@@ -67,3 +105,28 @@ th.header:nth-child(2), th.header:nth-child(3) {
    }
 }
 
+.actionsMenu {
+  font-size: 1em;
+}
+
+.actionsMenu .actionsMenuButton {
+  -webkit-transform: scale(1);
+  transform: scale(1);
+  font-size: 0.98em;
+}
+
+.actionsMenuSuspended {
+  background-color: #F29336;
+  border-color: #F29336;
+  color: white;
+}
+
+.actionsMenuBanned {
+  background-color: #E45241;
+  border-color: #E45241;
+  color: white;
+}
+
+.loadMore {
+  margin-top: 24px;
+}
diff --git a/client/coral-admin/src/routes/Community/components/People.js b/client/coral-admin/src/routes/Community/components/People.js
index b92bd679a..0328d148b 100644
--- a/client/coral-admin/src/routes/Community/components/People.js
+++ b/client/coral-admin/src/routes/Community/components/People.js
@@ -1,75 +1,252 @@
 import React from 'react';
 import cn from 'classnames';
-import styles from './styles.css';
-import Table from './Table';
-import {Icon} from 'coral-ui';
+import styles from './People.css';
+import { Icon, Dropdown, Option } from 'coral-ui';
 import EmptyCard from '../../../components/EmptyCard';
 import t from 'coral-framework/services/i18n';
-
+import LoadMore from '../../../components/LoadMore';
 import PropTypes from 'prop-types';
+import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
+import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
+import { isSuspended, isBanned } from 'coral-framework/utils/user';
+import moment from 'moment';
 
-const People = (props) => {
-  const {
-    users = [],
-    searchValue,
-    onSearchChange,
-    onHeaderClickHandler,
-    onPageChange,
-    totalPages,
-    page,
-    setRole,
-    setCommenterStatus,
-    viewUserDetail,
-  } = props;
+const headers = [
+  {
+    title: t('community.username_and_email'),
+    field: 'username',
+  },
+  {
+    title: t('community.account_creation_date'),
+    field: 'created_at',
+  },
+  {
+    title: t('community.status'),
+    field: 'status',
+  },
+  {
+    title: t('community.newsroom_role'),
+    field: 'role',
+  },
+];
 
-  const hasResults = !!users.length;
+class People extends React.Component {
+  getActionMenuLabel = user => {
+    if (isBanned(user)) {
+      return 'Banned';
+    } else if (isSuspended(user)) {
+      return 'Suspended';
+    }
+    return '';
+  };
 
-  return (
-    <div className={cn(styles.container, 'talk-admin-community-people-container')}>
-      <div className={styles.leftColumn}>
-        <div className={styles.searchBox}>
-          <Icon name='search' className={styles.searchIcon}/>
-          <input
-            id="commenters-search"
-            type="text"
-            className={styles.searchBoxInput}
-            value={searchValue}
-            onChange={onSearchChange}
-            placeholder={t('streams.search')}
-          />
+  unsuspendUser = input => {
+    this.props.unsuspendUser(input);
+  };
+
+  unbanUser = input => {
+    this.props.unbanUser(input);
+  };
+
+  showBanUserDialog = input => {
+    this.props.showBanUserDialog(input);
+  };
+
+  showSuspendUserDialog = input => {
+    this.props.showSuspendUserDialog(input);
+  };
+
+  render() {
+    const {
+      onSearchChange,
+      users = [],
+      setUserRole,
+      viewUserDetail,
+      loadMore,
+    } = this.props;
+
+    const hasResults = !!users.nodes.length;
+
+    return (
+      <div
+        className={cn(
+          styles.container,
+          'talk-admin-community-people-container'
+        )}
+      >
+        <div className={styles.leftColumn}>
+          <div className={styles.searchBox}>
+            <Icon name="search" className={styles.searchIcon} />
+            <input
+              id="commenters-search"
+              type="text"
+              className={styles.searchBoxInput}
+              defaultValue=""
+              onChange={onSearchChange}
+              placeholder={t('streams.search')}
+            />
+          </div>
+        </div>
+        <div className={styles.mainContent}>
+          {hasResults ? (
+            <div>
+              <div>
+                <table className={`mdl-data-table ${styles.dataTable}`}>
+                  <thead>
+                    <tr>
+                      {headers.map((header, i) => (
+                        <th
+                          key={i}
+                          className={cn(
+                            'mdl-data-table__cell--non-numeric',
+                            styles.header
+                          )}
+                          scope="col"
+                        >
+                          {header.title}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {users.nodes.map(user => (
+                      <tr
+                        key={user.id}
+                        className="talk-admin-community-people-row"
+                      >
+                        <td className="mdl-data-table__cell--non-numeric">
+                          <button
+                            onClick={() => {
+                              viewUserDetail(user.id);
+                            }}
+                            className={cn(styles.username, styles.button)}
+                          >
+                            {user.username}
+                          </button>
+                          <span className={styles.email}>
+                            {user.profiles.map(({ id }) => id)}
+                          </span>
+                        </td>
+                        <td className="mdl-data-table__cell--non-numeric">
+                          {moment(new Date(user.created_at)).format(
+                            'MMMM Do YYYY, h:mm:ss a'
+                          )}
+                        </td>
+                        <td className="mdl-data-table__cell--non-numeric">
+                          <ActionsMenu
+                            icon="person"
+                            className={cn(
+                              styles.actionsMenu,
+                              'talk-admin-community-people-dd-status'
+                            )}
+                            buttonClassNames={cn(
+                              styles.actionsMenuButton,
+                              {
+                                [styles.actionsMenuSuspended]: isSuspended(
+                                  user
+                                ),
+                                [styles.actionsMenuBanned]: isBanned(user),
+                              },
+                              'talk-admin-user-detail-actions-button'
+                            )}
+                            label={this.getActionMenuLabel(user)}
+                          >
+                            {isSuspended(user) ? (
+                              <ActionsMenuItem
+                                onClick={() =>
+                                  this.unsuspendUser({ id: user.id })
+                                }
+                              >
+                                Remove Suspension
+                              </ActionsMenuItem>
+                            ) : (
+                              <ActionsMenuItem
+                                onClick={() =>
+                                  this.showSuspendUserDialog({
+                                    userId: user.id,
+                                    username: user.username,
+                                  })
+                                }
+                              >
+                                Suspend User
+                              </ActionsMenuItem>
+                            )}
+
+                            {isBanned(user) ? (
+                              <ActionsMenuItem
+                                onClick={() => this.unbanUser({ id: user.id })}
+                              >
+                                Remove Ban
+                              </ActionsMenuItem>
+                            ) : (
+                              <ActionsMenuItem
+                                onClick={() =>
+                                  this.showBanUserDialog({
+                                    userId: user.id,
+                                    username: user.username,
+                                  })
+                                }
+                              >
+                                Ban User
+                              </ActionsMenuItem>
+                            )}
+                          </ActionsMenu>
+                        </td>
+                        <td className="mdl-data-table__cell--non-numeric">
+                          <Dropdown
+                            containerClassName="talk-admin-community-people-dd-role"
+                            value={user.role}
+                            placeholder={t('community.role')}
+                            onChange={role => setUserRole(user.id, role)}
+                          >
+                            <Option
+                              value={'COMMENTER'}
+                              label={t('community.commenter')}
+                            />
+                            <Option
+                              value={'STAFF'}
+                              label={t('community.staff')}
+                            />
+                            <Option
+                              value={'MODERATOR'}
+                              label={t('community.moderator')}
+                            />
+                            <Option
+                              value={'ADMIN'}
+                              label={t('community.admin')}
+                            />
+                          </Dropdown>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              <LoadMore
+                className={styles.loadMore}
+                loadMore={loadMore}
+                showLoadMore={users.hasNextPage}
+              />
+            </div>
+          ) : (
+            <EmptyCard>{t('community.no_results')}</EmptyCard>
+          )}
         </div>
       </div>
-      <div className={styles.mainContent}>
-        {
-          hasResults
-            ? <Table
-              users={users}
-              setRole={setRole}
-              viewUserDetail={viewUserDetail}
-              setCommenterStatus={setCommenterStatus}
-              onHeaderClickHandler={onHeaderClickHandler}
-              pageCount={totalPages}
-              onPageChange={onPageChange}
-              page={page}
-            />
-            : <EmptyCard>{t('community.no_results')}</EmptyCard>
-        }
-      </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
 People.propTypes = {
-  onHeaderClickHandler: PropTypes.func,
-  users: PropTypes.array,
-  page: PropTypes.number.isRequired,
-  searchValue: PropTypes.string,
-  onSearchChange: PropTypes.func,
-  totalPages: PropTypes.number,
-  onPageChange: PropTypes.func,
-  setCommenterStatus: PropTypes.func.isRequired,
-  setRole: PropTypes.func.isRequired,
+  users: PropTypes.object.isRequired,
+  onSearchChange: PropTypes.func.isRequired,
+  setUserRole: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
+  unbanUser: PropTypes.func.isRequired,
+  unsuspendUser: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+  loadMore: PropTypes.func.isRequired,
 };
 
 export default People;
diff --git a/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.css b/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.css
index 2dbdfc0f3..ea0cec338 100644
--- a/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.css
+++ b/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.css
@@ -2,7 +2,7 @@
 .modalButtons {
   display: flex;
   justify-content: flex-end;
-  margin-top: 50px;
+  margin-top: 20px;
 }
 
 .emailInput {
diff --git a/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js b/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js
index 18e9394a5..180a1375b 100644
--- a/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js
+++ b/client/coral-admin/src/routes/Community/components/RejectUsernameDialog.js
@@ -1,7 +1,7 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import {Dialog, Button} from 'coral-ui';
+import { Dialog, Button } from 'coral-ui';
 import styles from './RejectUsernameDialog.css';
 
 import t from 'coral-framework/services/i18n';
@@ -11,26 +11,28 @@ const stages = [
     title: 'reject_username.title_reject',
     description: 'reject_username.description_reject',
     options: {
-      'j': 'reject_username.no_cancel',
-      'k': 'reject_username.yes_suspend'
-    }
+      j: 'reject_username.no_cancel',
+      k: 'reject_username.yes_suspend',
+    },
   },
   {
     title: 'reject_username.title_notify',
     description: 'reject_username.description_notify',
     options: {
-      'j': 'bandialog.cancel',
-      'k': 'reject_username.send'
-    }
-  }
+      j: 'bandialog.cancel',
+      k: 'reject_username.send',
+    },
+  },
 ];
 
-class RejectUsernameDialog extends Component  {
-
-  state = {email: '', stage: 0}
+class RejectUsernameDialog extends Component {
+  state = { email: '', stage: 0 };
 
   componentDidMount() {
-    this.setState({email: t('reject_username.email_message_reject'), about: t('reject_username.username')});
+    this.setState({
+      email: t('reject_username.email_message_reject'),
+      about: t('reject_username.username'),
+    });
   }
 
   /*
@@ -38,76 +40,95 @@ class RejectUsernameDialog extends Component  {
   * handles the possible actions for that dialog.
   */
   onActionClick = (stage, menuOption) => () => {
-    const {rejectUsername, user} = this.props;
-    const {stage} = this.state;
+    const { rejectUsername, user } = this.props;
+    const { stage } = this.state;
 
     const cancel = this.props.handleClose;
-    const next = () => this.setState({stage: stage + 1});
+    const next = () => this.setState({ stage: stage + 1 });
     const suspend = async () => {
       try {
-        await rejectUsername({id: user.id, message: this.state.email});
+        await rejectUsername(user.id);
         this.props.handleClose();
       } catch (err) {
-
         // TODO: handle error.
         console.error(err);
       }
     };
 
-    const suspendModalActions = [
-      [ cancel, next ],
-      [ cancel, suspend ]
-    ];
+    const suspendModalActions = [[cancel, next], [cancel, suspend]];
     return suspendModalActions[stage][menuOption]();
-  }
+  };
 
-  onEmailChange = (e) => {
-    this.setState({email: e.target.value});
-  }
+  onEmailChange = e => {
+    this.setState({ email: e.target.value });
+  };
 
-  render () {
-    const {open, handleClose} = this.props;
-    const {stage} = this.state;
+  render() {
+    const { open, handleClose } = this.props;
+    const { stage } = this.state;
 
-    return <Dialog
-      className={cn(styles.suspendDialog, 'talk-reject-username-dialog')}
-      id="rejectUsernameDialog"
-      open={open}
-      onClose={handleClose}
-      onCancel={handleClose}
-      title={t('reject_username.suspend_user')}>
-      <div className={styles.title}>
-        {t(stages[stage].title, t('reject_username.username'))}
-      </div>
-      <div className={styles.container}>
-        <div className={styles.description}>
-          {t(stages[stage].description, t('reject_username.username'))}
+    return (
+      <Dialog
+        className={cn(
+          styles.suspendDialog,
+          'talk-admin-reject-username-dialog'
+        )}
+        id="rejectUsernameDialog"
+        open={open}
+        onClose={handleClose}
+        onCancel={handleClose}
+        title={t('reject_username.suspend_user')}
+      >
+        <div className={styles.title}>
+          {t(stages[stage].title, t('reject_username.username'))}
         </div>
-        {
+        <div
+          className={cn(
+            styles.container,
+            `talk-admin-reject-username-dialog-step-${stage}`
+          )}
+        >
+          <div className={styles.description}>
+            {t(stages[stage].description, t('reject_username.username'))}
+          </div>
+
+          {/* {
+
+          // Suspension Message: This functionality it's not entirely done on the BE - It will be released soon. 
           stage === 1 &&
                 <div className={styles.writeContainer}>
                   <div className={styles.emailMessage}>{t('reject_username.write_message')}</div>
                   <div className={styles.emailContainer}>
                     <textarea
                       rows={5}
-                      className={cn(styles.emailInput, 'talk-reject-username-dialog-suspension-message')}
+                      className={cn(styles.emailInput, 'talk-admin-reject-username-dialog-suspension-message')}
                       value={this.state.email}
                       onChange={this.onEmailChange}/>
                   </div>
                 </div>
-        }
-        <div className={cn(styles.modalButtons, 'talk-reject-username-dialog-buttons')}>
-          {Object.keys(stages[stage].options).map((key, i) => (
-            <Button
-              key={i}
-              className={cn('talk-reject-username-dialog-button', `talk-reject-username-dialog-button-${key}`)}
-              onClick={this.onActionClick(stage, i)} >
-              {t(stages[stage].options[key], t('reject_username.username'))}
-            </Button>
-          ))}
+        } */}
+          <div
+            className={cn(
+              styles.modalButtons,
+              'talk-admin-reject-username-dialog-buttons'
+            )}
+          >
+            {Object.keys(stages[stage].options).map((key, i) => (
+              <Button
+                key={i}
+                className={cn(
+                  'talk-admin-username-dialog-button',
+                  `talk-admin-reject-username-dialog-button-${key}`
+                )}
+                onClick={this.onActionClick(stage, i)}
+              >
+                {t(stages[stage].options[key], t('reject_username.username'))}
+              </Button>
+            ))}
+          </div>
         </div>
-      </div>
-    </Dialog>;
+      </Dialog>
+    );
   }
 }
 
diff --git a/client/coral-admin/src/routes/Community/components/Table.js b/client/coral-admin/src/routes/Community/components/Table.js
deleted file mode 100644
index 89d59131e..000000000
--- a/client/coral-admin/src/routes/Community/components/Table.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import styles from './Table.css';
-import t from 'coral-framework/services/i18n';
-import PropTypes from 'prop-types';
-import {Paginate, Dropdown, Option} from 'coral-ui';
-import cn from 'classnames';
-
-const headers = [
-  {
-    title: t('community.username_and_email'),
-    field: 'username'
-  },
-  {
-    title: t('community.account_creation_date'),
-    field: 'created_at'
-  },
-  {
-    title: t('community.status'),
-    field: 'status'
-  },
-  {
-    title: t('community.newsroom_role'),
-    field: 'role'
-  }
-];
-
-const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUserDetail, pageCount, page, onPageChange}) => (
-  <div>
-    <table className={`mdl-data-table ${styles.dataTable}`}>
-      <thead>
-        <tr>
-          {headers.map((header, i) =>(
-            <th
-              key={i}
-              className={cn('mdl-data-table__cell--non-numeric', styles.header)}
-              scope="col"
-              onClick={() => onHeaderClickHandler({field: header.field})}>
-              {header.title}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {users.map((row, i)=> (
-          <tr key={i} className="talk-admin-community-people-row">
-            <td className="mdl-data-table__cell--non-numeric">
-              <button onClick={() => {viewUserDetail(row.id);}} className={cn(styles.username, styles.button)}>{row.username}</button>
-              <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
-            </td>
-            <td className="mdl-data-table__cell--non-numeric">
-              {row.created_at}
-            </td>
-            <td className="mdl-data-table__cell--non-numeric">
-              <Dropdown
-                containerClassName="talk-admin-community-people-dd-status"
-                value={row.status}
-                placeholder={t('community.status')}
-                onChange={(status) => setCommenterStatus(row.id, status)}>
-                <Option value={'ACTIVE'} label={t('community.active')} />
-                <Option value={'BANNED'} label={t('community.banned')} />
-              </Dropdown>
-            </td>
-            <td className="mdl-data-table__cell--non-numeric">
-              <Dropdown
-                containerClassName="talk-admin-community-people-dd-role"
-                value={row.roles[0] || ''}
-                placeholder={t('community.role')}
-                onChange={(role) => setRole(row.id, role)}>
-                <Option value={''} label={t('community.none')} />
-                <Option value={'STAFF'} label={t('community.staff')} />
-                <Option value={'MODERATOR'} label={t('community.moderator')} />
-                <Option value={'ADMIN'} label={t('community.admin')} />
-              </Dropdown>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-    <Paginate
-      pageCount={pageCount}
-      page={page - 1}
-      onPageChange={onPageChange}
-    />
-  </div>
-);
-
-Table.propTypes = {
-  users: PropTypes.array,
-  onHeaderClickHandler: PropTypes.func.isRequired,
-  setRole: PropTypes.func.isRequired,
-  setCommenterStatus: PropTypes.func.isRequired,
-  viewUserDetail: PropTypes.func.isRequired,
-  pageCount: PropTypes.number.isRequired,
-  page: PropTypes.number.isRequired,
-  onPageChange: PropTypes.func.isRequired,
-};
-
-export default Table;
diff --git a/client/coral-admin/src/routes/Community/components/styles.css b/client/coral-admin/src/routes/Community/components/styles.css
index fc94717e0..3b680cb8e 100644
--- a/client/coral-admin/src/routes/Community/components/styles.css
+++ b/client/coral-admin/src/routes/Community/components/styles.css
@@ -240,3 +240,6 @@
   }
 }
 
+/**
+** This stylesheet is deprecated. DO NOT ADD CODE.
+**/
diff --git a/client/coral-admin/src/routes/Community/containers/Community.js b/client/coral-admin/src/routes/Community/containers/Community.js
index 4cf9eeb8a..fba3ff9fd 100644
--- a/client/coral-admin/src/routes/Community/containers/Community.js
+++ b/client/coral-admin/src/routes/Community/containers/Community.js
@@ -1,48 +1,62 @@
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {compose, gql} from 'react-apollo';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
 import withQuery from 'coral-framework/hocs/withQuery';
-import {getDefinitionName} from 'coral-framework/utils';
-import {withSetUserStatus, withRejectUsername} from 'coral-framework/graphql/mutations';
+import { getDefinitionName } from 'coral-framework/utils';
+import { withRejectUsername } from 'coral-framework/graphql/mutations';
 import FlaggedAccounts from '../containers/FlaggedAccounts';
 import FlaggedUser from '../containers/FlaggedUser';
-import {hideRejectUsernameDialog} from '../../../actions/community';
+import People from '../containers/People';
+import { hideRejectUsernameDialog } from '../../../actions/community';
 import Community from '../components/Community';
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   community: state.community,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    hideRejectUsernameDialog,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      hideRejectUsernameDialog,
+    },
+    dispatch
+  );
 
-const withData = withQuery(gql`
+const withData = withQuery(
+  gql`
   query TalkAdmin_Community {
-    flaggedUsernamesCount: userCount(query: {
-      action_type: FLAG,
-      statuses: [PENDING]
-    })
+    flaggedUsernamesCount: userCount(
+      query:{
+        action_type: FLAG,
+        state: {
+          status: {
+            username: [SET, CHANGED]
+          }
+        }
+      }
+    )
     ...${getDefinitionName(FlaggedAccounts.fragments.root)}
     ...${getDefinitionName(FlaggedUser.fragments.root)}
+    ...${getDefinitionName(People.fragments.root)}
     me {
       ...${getDefinitionName(FlaggedUser.fragments.me)}
       __typename
     }
   }
+  ${People.fragments.root}
   ${FlaggedAccounts.fragments.root}
   ${FlaggedUser.fragments.root}
   ${FlaggedUser.fragments.me}
-`, {
-  options: {
-    fetchPolicy: 'network-only',
-  },
-});
+`,
+  {
+    options: {
+      fetchPolicy: 'network-only',
+    },
+  }
+);
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  withSetUserStatus,
   withRejectUsername,
   withData
 )(Community);
diff --git a/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js
index b7f918d8c..669f30090 100644
--- a/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js
+++ b/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js
@@ -1,51 +1,44 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {compose, gql} from 'react-apollo';
-import {withFragments} from 'plugin-api/beta/client/hocs';
-import {Spinner} from 'coral-ui';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import { Spinner } from 'coral-ui';
 import PropTypes from 'prop-types';
-
-import {withSetUserStatus} from 'coral-framework/graphql/mutations';
-import {showBanUserDialog} from 'actions/banUserDialog';
-import {showSuspendUserDialog} from 'actions/suspendUserDialog';
-import {showRejectUsernameDialog} from '../../../actions/community';
-import {viewUserDetail} from '../../../actions/userDetail';
-import {getDefinitionName} from 'coral-framework/utils';
-import {appendNewNodes} from 'plugin-api/beta/client/utils';
+import { withApproveUsername } from 'coral-framework/graphql/mutations';
+import { showRejectUsernameDialog } from '../../../actions/community';
+import { viewUserDetail } from '../../../actions/userDetail';
+import { getDefinitionName } from 'coral-framework/utils';
+import { appendNewNodes } from 'plugin-api/beta/client/utils';
 import update from 'immutability-helper';
 
 import FlaggedAccounts from '../components/FlaggedAccounts';
 import FlaggedUser from '../containers/FlaggedUser';
 
 class FlaggedAccountsContainer extends Component {
-
   constructor(props) {
     super(props);
   }
 
-  approveUser = ({userId}) => {
-    return this.props.setUserStatus({
-      userId,
-      status: 'APPROVED'
-    });
-  }
+  approveUser = ({ userId: id }) => {
+    return this.props.approveUsername(id);
+  };
 
   loadMore = () => {
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
       variables: {
         limit: 5,
-        cursor: this.props.root.users.endCursor,
+        cursor: this.props.root.flaggedUsers.endCursor,
       },
-      updateQuery: (previous, {fetchMoreResult:{users}}) => {
+      updateQuery: (previous, { fetchMoreResult: { flaggedUsers } }) => {
         const updated = update(previous, {
-          users: {
+          flaggedUsers: {
             nodes: {
-              $apply: (nodes) => appendNewNodes(nodes, users.nodes),
+              $apply: nodes => appendNewNodes(nodes, flaggedUsers.nodes),
             },
-            hasNextPage: {$set: users.hasNextPage},
-            endCursor: {$set: users.endCursor},
+            hasNextPage: { $set: flaggedUsers.hasNextPage },
+            endCursor: { $set: flaggedUsers.endCursor },
           },
         });
         return updated;
@@ -59,19 +52,22 @@ class FlaggedAccountsContainer extends Component {
     }
 
     if (this.props.data.loading) {
-      return <div><Spinner/></div>;
+      return (
+        <div>
+          <Spinner />
+        </div>
+      );
     }
+
     return (
       <FlaggedAccounts
-        showBanUserDialog={this.props.showBanUserDialog}
-        showSuspendUserDialog={this.props.showSuspendUserDialog}
         showRejectUsernameDialog={this.props.showRejectUsernameDialog}
         viewUserDetail={this.props.viewUserDetail}
         approveUser={this.approveUser}
         loadMore={this.loadMore}
         data={this.props.data}
         root={this.props.root}
-        users={this.props.root.users}
+        users={this.props.root.flaggedUsers}
         me={this.props.root.me}
       />
     );
@@ -79,18 +75,25 @@ class FlaggedAccountsContainer extends Component {
 }
 
 FlaggedAccountsContainer.propTypes = {
-  showBanUserDialog: PropTypes.func,
-  showSuspendUserDialog: PropTypes.func,
   showRejectUsernameDialog: PropTypes.func,
   viewUserDetail: PropTypes.func,
-  setUserStatus: PropTypes.func,
+  approveUsername: PropTypes.func,
   data: PropTypes.object,
-  root: PropTypes.object
+  root: PropTypes.object,
 };
 
 const LOAD_MORE_QUERY = gql`
   query TalkAdmin_LoadMoreFlaggedAccounts($limit: Int, $cursor: Cursor) {
-    users(query:{action_type: FLAG, statuses: [PENDING], limit: $limit, cursor: $cursor}){
+    flaggedUsers: users(query:{
+        action_type: FLAG,
+        state: {
+          status: {
+            username: [SET, CHANGED]
+          }
+        },
+        limit: $limit,
+        cursor: $cursor
+      }){
       hasNextPage
       endCursor
       nodes {
@@ -102,21 +105,30 @@ const LOAD_MORE_QUERY = gql`
   ${FlaggedUser.fragments.user}
 `;
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    showBanUserDialog,
-    showSuspendUserDialog,
-    showRejectUsernameDialog,
-    viewUserDetail,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      showRejectUsernameDialog,
+      viewUserDetail,
+    },
+    dispatch
+  );
 
 export default compose(
   connect(null, mapDispatchToProps),
-  withSetUserStatus,
+  withApproveUsername,
   withFragments({
     root: gql`
       fragment TalkAdminCommunity_FlaggedAccounts_root on RootQuery {
-        users(query:{action_type: FLAG, statuses: [PENDING], limit: 10}){
+        flaggedUsers: users(query:{
+            action_type: FLAG,
+            state: {
+              status: {
+                username: [SET, CHANGED]
+              }
+            }
+            limit: 10
+          }){
           hasNextPage
           endCursor
           nodes {
@@ -130,5 +142,5 @@ export default compose(
       }
       ${FlaggedUser.fragments.user}
     `,
-  }),
+  })
 )(FlaggedAccountsContainer);
diff --git a/client/coral-admin/src/routes/Community/containers/FlaggedUser.js b/client/coral-admin/src/routes/Community/containers/FlaggedUser.js
index f92c93c1c..3a30577d4 100644
--- a/client/coral-admin/src/routes/Community/containers/FlaggedUser.js
+++ b/client/coral-admin/src/routes/Community/containers/FlaggedUser.js
@@ -1,25 +1,37 @@
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import FlaggedUser from '../components/FlaggedUser';
-import {withFragments} from 'plugin-api/beta/client/hocs';
+import { withFragments } from 'plugin-api/beta/client/hocs';
 
 export default withFragments({
   root: gql`
     fragment TalkAdminCommunity_FlaggedUser_root on RootQuery {
       __typename
     }
-    `,
+  `,
   me: gql`
     fragment TalkAdminCommunity_FlaggedUser_me on User {
       id
     }
-    `,
+  `,
   user: gql`
     fragment TalkAdminCommunity_FlaggedUser_user on User {
       id
       username
-      status
-      roles
-      actions{
+      state {
+        status {
+          username {
+            status
+          }
+          banned {
+            status
+          }
+          suspension {
+            until
+          }
+        }
+      }
+      role
+      actions {
         id
         created_at
         ... on FlagAction {
@@ -38,5 +50,5 @@ export default withFragments({
         }
       }
     }
-  `
+  `,
 })(FlaggedUser);
diff --git a/client/coral-admin/src/routes/Community/containers/People.js b/client/coral-admin/src/routes/Community/containers/People.js
index 063eaef2f..166ed90bd 100644
--- a/client/coral-admin/src/routes/Community/containers/People.js
+++ b/client/coral-admin/src/routes/Community/containers/People.js
@@ -1,104 +1,239 @@
 import React from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
 import People from '../components/People';
 import PropTypes from 'prop-types';
-
-import {viewUserDetail} from '../../../actions/userDetail';
-
+import { withFragments } from 'plugin-api/beta/client/hocs';
 import {
-  fetchUsers,
-  updateSorting,
-  setPage,
-  hideRejectUsernameDialog,
-  setCommenterStatus,
-  setRole,
-  setSearchValue,
-} from '../../../actions/community';
+  withUnbanUser,
+  withUnsuspendUser,
+  withSetUserRole,
+} from 'coral-framework/graphql/mutations';
+import { showBanUserDialog } from 'actions/banUserDialog';
+import { showSuspendUserDialog } from 'actions/suspendUserDialog';
+import { viewUserDetail } from '../../../actions/userDetail';
+import { appendNewNodes } from 'plugin-api/beta/client/utils';
+import update from 'immutability-helper';
+import { Spinner } from 'coral-ui';
 
 class PeopleContainer extends React.Component {
-  timer=null;
+  timer = null;
 
-  fetchUsers = (query = {}) => {
-    const {community} = this.props;
+  state = {
+    searchValue: '',
+  };
 
-    this.props.fetchUsers({
-      value: community.searchValue,
-      field: community.fieldPeople,
-      asc: community.ascPeople,
-      ...query
+  onSearchChange = e => {
+    const { value } = e.target;
+    this.setState({ searchValue: value }, () => {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.search(value);
+      }, 350);
     });
-  }
+  };
 
-  componentWillMount() {
-    this.fetchUsers();
-  }
+  search = async value => {
+    return this.props.data.fetchMore({
+      query: SEARCH_QUERY,
+      variables: {
+        value,
+        limit: 5,
+      },
+      updateQuery: (previous, { fetchMoreResult: { users } }) => {
+        const updated = update(previous, {
+          users: {
+            nodes: {
+              $set: users.nodes,
+            },
+            hasNextPage: { $set: users.hasNextPage },
+            endCursor: { $set: users.endCursor },
+          },
+        });
+        return updated;
+      },
+    });
+  };
 
-  onKeyDownHandler = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      this.fetchUsers();
-    }
-  }
+  setUserRole = async (id, role) => {
+    await this.props.setUserRole(id, role);
+  };
 
-  onSearchChange = (e) => {
-    const value = e.target.value;
-
-    this.props.setSearchValue(value);
-    clearTimeout(this.timer);
-    this.timer = setTimeout(() => {
-      this.fetchUsers({value});
-    }, 350);
-  }
-
-  onHeaderClickHandler = (sort) => {
-    this.props.updateSorting(sort);
-    this.fetchUsers();
-  }
-
-  onPageChange = ({selected}) => {
-    const page = selected + 1;
-    this.props.setPage(page);
-    this.fetchUsers({page});
-  }
+  loadMore = () => {
+    return this.props.data.fetchMore({
+      query: LOAD_MORE_QUERY,
+      variables: {
+        value: this.state.searchValue,
+        limit: 5,
+        cursor: this.props.root.users.endCursor,
+      },
+      updateQuery: (previous, { fetchMoreResult: { users } }) => {
+        const updated = update(previous, {
+          users: {
+            nodes: {
+              $apply: nodes => appendNewNodes(nodes, users.nodes),
+            },
+            hasNextPage: { $set: users.hasNextPage },
+            endCursor: { $set: users.endCursor },
+          },
+        });
+        return updated;
+      },
+    });
+  };
 
   render() {
-    return <People
-      users={this.props.community.users}
-      searchValue={this.props.community.searchValue}
-      onSearchChange={this.onSearchChange}
-      onHeaderClickHandler={this.onHeaderClickHandler}
-      onPageChange={this.onPageChange}
-      totalPages={this.props.community.totalPagesPeople}
-      setCommenterStatus={this.props.setCommenterStatus}
-      setRole={this.props.setRole}
-      page={this.props.community.pagePeople}
-      viewUserDetail={this.props.viewUserDetail}
-    />;
+    if (this.props.data.error) {
+      return <div>{this.props.data.error.message}</div>;
+    }
+
+    if (this.props.data.loading) {
+      return (
+        <div>
+          <Spinner />
+        </div>
+      );
+    }
+
+    return (
+      <People
+        onSearchChange={this.onSearchChange}
+        viewUserDetail={this.props.viewUserDetail}
+        setUserRole={this.setUserRole}
+        showSuspendUserDialog={this.props.showSuspendUserDialog}
+        showBanUserDialog={this.props.showBanUserDialog}
+        unbanUser={this.props.unbanUser}
+        unsuspendUser={this.props.unsuspendUser}
+        data={this.props.data}
+        root={this.props.root}
+        users={this.props.root.users}
+        loadMore={this.loadMore}
+      />
+    );
   }
 }
 
 PeopleContainer.propTypes = {
-  setPage: PropTypes.func,
-  fetchUsers: PropTypes.func,
-  updateSorting: PropTypes.func,
-  setRole: PropTypes.func.isRequired,
-  setCommenterStatus: PropTypes.func.isRequired,
-  setSearchValue: PropTypes.func.isRequired,
-  viewUserDetail: PropTypes.func.isRequired,
   community: PropTypes.object,
+  setUserRole: PropTypes.func.isRequired,
+  unbanUser: PropTypes.func.isRequired,
+  unsuspendUser: PropTypes.func.isRequired,
+  viewUserDetail: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+  data: PropTypes.object,
+  root: PropTypes.object,
 };
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    setPage,
-    fetchUsers,
-    updateSorting,
-    hideRejectUsernameDialog,
-    setCommenterStatus,
-    setRole,
-    viewUserDetail,
-    setSearchValue,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      viewUserDetail,
+      showSuspendUserDialog,
+      showBanUserDialog,
+    },
+    dispatch
+  );
 
-export default connect(null, mapDispatchToProps)(PeopleContainer);
+const LOAD_MORE_QUERY = gql`
+  query TalkAdminCommunity_People_LoadMoreUsers(
+    $limit: Int
+    $cursor: Cursor
+    $value: String
+  ) {
+    users(query: { value: $value, limit: $limit, cursor: $cursor }) {
+      hasNextPage
+      endCursor
+      nodes {
+        __typename
+        id
+        username
+        role
+        created_at
+        profiles {
+          id
+          provider
+        }
+        state {
+          status {
+            banned {
+              status
+            }
+            suspension {
+              until
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+const SEARCH_QUERY = gql`
+  query TalkAdminCommunity_People_SearchUsers($value: String, $limit: Int) {
+    users(query: { value: $value, limit: $limit }) {
+      hasNextPage
+      endCursor
+      nodes {
+        __typename
+        id
+        username
+        role
+        created_at
+        profiles {
+          id
+          provider
+        }
+        state {
+          status {
+            banned {
+              status
+            }
+            suspension {
+              until
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default compose(
+  connect(null, mapDispatchToProps),
+  withSetUserRole,
+  withUnsuspendUser,
+  withUnbanUser,
+  withFragments({
+    root: gql`
+      fragment TalkAdminCommunity_People_root on RootQuery {
+        users(query: {}) {
+          hasNextPage
+          endCursor
+          nodes {
+            __typename
+            id
+            username
+            role
+            created_at
+            profiles {
+              id
+              provider
+            }
+            state {
+              status {
+                banned {
+                  status
+                }
+                suspension {
+                  until
+                }
+              }
+            }
+          }
+        }
+      }
+    `,
+  })
+)(PeopleContainer);
diff --git a/client/coral-admin/src/routes/Configure/components/Configure.css b/client/coral-admin/src/routes/Configure/components/Configure.css
index 82760acff..f4bcb8b01 100644
--- a/client/coral-admin/src/routes/Configure/components/Configure.css
+++ b/client/coral-admin/src/routes/Configure/components/Configure.css
@@ -20,7 +20,7 @@
 
 .mainContent {
   width: calc(100% - 300px);
-  padding: 10px 14px 80px 14px;
+  padding: 10px 14px 120px 14px;
   box-sizing: border-box;
   max-width: 718px;
 }
diff --git a/client/coral-admin/src/routes/Configure/components/Configure.js b/client/coral-admin/src/routes/Configure/components/Configure.js
index ecdbddcc0..2b3e44f1e 100644
--- a/client/coral-admin/src/routes/Configure/components/Configure.js
+++ b/client/coral-admin/src/routes/Configure/components/Configure.js
@@ -1,74 +1,77 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 
-import {Button, List, Item} from 'coral-ui';
+import { Button, List, Item } from 'coral-ui';
 import styles from './Configure.css';
 import StreamSettings from '../containers/StreamSettings';
 import ModerationSettings from '../containers/ModerationSettings';
 import TechSettings from '../containers/TechSettings';
 import t from 'coral-framework/services/i18n';
-import {can} from 'coral-framework/services/perms';
+import { can } from 'coral-framework/services/perms';
 import PropTypes from 'prop-types';
 
 export default class Configure extends Component {
-
   getSectionComponent(section) {
-    switch(section){
-    case 'stream':
-      return StreamSettings;
-    case 'moderation':
-      return ModerationSettings;
-    case 'tech':
-      return TechSettings;
+    switch (section) {
+      case 'stream':
+        return StreamSettings;
+      case 'moderation':
+        return ModerationSettings;
+      case 'tech':
+        return TechSettings;
     }
     throw new Error(`Unknown section ${section}`);
   }
 
-  render () {
-    const {auth: {user}, canSave, savePending, setActiveSection, activeSection} = this.props;
+  render() {
+    const {
+      auth: { user },
+      canSave,
+      savePending,
+      setActiveSection,
+      activeSection,
+    } = this.props;
     const SectionComponent = this.getSectionComponent(activeSection);
 
     if (!can(user, 'UPDATE_CONFIG')) {
-      return <p>You must be an administrator to access config settings. Please find the nearest Admin and ask them to level you up!</p>;
+      return (
+        <p>
+          You must be an administrator to access config settings. Please find
+          the nearest Admin and ask them to level you up!
+        </p>
+      );
     }
 
     return (
       <div className={styles.container}>
         <div className={styles.leftColumn}>
           <List onChange={setActiveSection} activeItem={activeSection}>
-            <Item itemId='stream' icon='speaker_notes'>
+            <Item itemId="stream" icon="speaker_notes">
               {t('configure.stream_settings')}
             </Item>
-            <Item itemId='moderation' icon='thumbs_up_down'>
+            <Item itemId="moderation" icon="thumbs_up_down">
               {t('configure.moderation_settings')}
             </Item>
-            <Item itemId='tech' icon='code'>
+            <Item itemId="tech" icon="code">
               {t('configure.tech_settings')}
             </Item>
           </List>
           <div className={styles.saveBox}>
-            {
-              canSave ?
-                <Button
-                  raised
-                  onClick={savePending}
-                  className={styles.changedSave}
-                  icon='check'
-                  full
-                >
-                  {t('configure.save_changes')}
-                </Button>
-                :
-                <Button
-                  raised
-                  disabled
-                  icon='check'
-                  full
-                >
-                  {t('configure.save_changes')}
-                </Button>
-            }
+            {canSave ? (
+              <Button
+                raised
+                onClick={savePending}
+                className={styles.changedSave}
+                icon="check"
+                full
+              >
+                {t('configure.save_changes')}
+              </Button>
+            ) : (
+              <Button raised disabled icon="check" full>
+                {t('configure.save_changes')}
+              </Button>
+            )}
           </div>
-
         </div>
         <div className={styles.mainContent}>
           <SectionComponent
diff --git a/client/coral-admin/src/routes/Configure/components/ConfigurePage.js b/client/coral-admin/src/routes/Configure/components/ConfigurePage.js
index dc1182fc2..bb711e9ad 100644
--- a/client/coral-admin/src/routes/Configure/components/ConfigurePage.js
+++ b/client/coral-admin/src/routes/Configure/components/ConfigurePage.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './ConfigurePage.css';
 
-const ConfigurePage = ({title, children, ...rest}) => (
+const ConfigurePage = ({ title, children, ...rest }) => (
   <div {...rest}>
     <h3 className={styles.title}>{title}</h3>
     {children}
diff --git a/client/coral-admin/src/routes/Configure/components/Domainlist.js b/client/coral-admin/src/routes/Configure/components/Domainlist.js
index 9d2d624ac..dc7237c4b 100644
--- a/client/coral-admin/src/routes/Configure/components/Domainlist.js
+++ b/client/coral-admin/src/routes/Configure/components/Domainlist.js
@@ -4,14 +4,14 @@ import TagsInput from 'coral-admin/src/components/TagsInput';
 import t from 'coral-framework/services/i18n';
 import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
-const Domainlist = ({domains, onChangeDomainlist}) => {
+const Domainlist = ({ domains, onChangeDomainlist }) => {
   return (
     <ConfigureCard title={t('configure.domain_list_title')}>
       <p>{t('configure.domain_list_text')}</p>
       <TagsInput
         value={domains}
-        inputProps={{placeholder: 'URL'}}
-        onChange={(tags) => onChangeDomainlist('whitelist', tags)}
+        inputProps={{ placeholder: 'URL' }}
+        onChange={tags => onChangeDomainlist('whitelist', tags)}
       />
     </ConfigureCard>
   );
diff --git a/client/coral-admin/src/routes/Configure/components/EmbedLink.js b/client/coral-admin/src/routes/Configure/components/EmbedLink.js
index aa1cddadc..f03716e43 100644
--- a/client/coral-admin/src/routes/Configure/components/EmbedLink.js
+++ b/client/coral-admin/src/routes/Configure/components/EmbedLink.js
@@ -1,14 +1,14 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import t from 'coral-framework/services/i18n';
 import join from 'url-join';
 import styles from './EmbedLink.css';
-import {Button} from 'coral-ui';
-import {BASE_URL} from 'coral-framework/constants/url';
+import { Button } from 'coral-ui';
+import { BASE_URL } from 'coral-framework/constants/url';
 import ConfigureCard from 'coral-framework/components/ConfigureCard';
+import { stripIndent } from 'common-tags';
 
 class EmbedLink extends Component {
-
-  state = {copied: false};
+  state = { copied: false };
 
   copyToClipBoard = () => {
     const copyTextarea = document.querySelector(`.${styles.embedInput}`);
@@ -16,30 +16,40 @@ class EmbedLink extends Component {
 
     try {
       document.execCommand('copy');
-      this.setState({copied: true});
+      this.setState({ copied: true });
     } catch (err) {
       console.error('Unable to copy', err);
     }
-  }
+  };
+
+  render() {
+    const coralJsUrl = join(BASE_URL, '/static/embed.js');
+    const embedText = stripIndent`
+      <div id="coral_talk_stream"></div>
+      <script src="${coralJsUrl}" async onload="
+        Coral.Talk.render(document.getElementById('coral_talk_stream'), {
+          talk: '${BASE_URL}'
+        });
+      "></script>
+    `;
 
-  render () {
-    const coralJsUrl = join(BASE_URL, '/embed.js');
-    const nonce = String(Math.random()).slice(2);
-    const streamElementId = `coral_talk_${nonce}`;
-    const embedText = `
-<div id="${streamElementId}"></div>
-<script src="${coralJsUrl}" async onload="
-  Coral.Talk.render(document.getElementById('${streamElementId}'), {
-    talk: '${BASE_URL}'
-  });
-"></script>
-    `.trim();
     return (
       <ConfigureCard title={'Embed Comment Stream'}>
         <p>{t('configure.copy_and_paste')}</p>
-        <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
+        <textarea
+          rows={5}
+          type="text"
+          className={styles.embedInput}
+          value={embedText}
+          readOnly={true}
+        />
         <div className={styles.actions}>
-          <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
+          <Button
+            raised
+            className={styles.copyButton}
+            onClick={this.copyToClipBoard}
+            cStyle="black"
+          >
             {t('embedlink.copy')}
           </Button>
           <div className={styles.copiedText}>
diff --git a/client/coral-admin/src/routes/Configure/components/ModerationSettings.js b/client/coral-admin/src/routes/Configure/components/ModerationSettings.js
index 94aa7d923..3b5f3bdd9 100644
--- a/client/coral-admin/src/routes/Configure/components/ModerationSettings.js
+++ b/client/coral-admin/src/routes/Configure/components/ModerationSettings.js
@@ -7,44 +7,55 @@ import ConfigurePage from './ConfigurePage';
 import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
 class ModerationSettings extends React.Component {
-
   updateModeration = () => {
-    const updater = {moderation: {$set: this.props.settings.moderation === 'PRE' ? 'POST' : 'PRE'}};
-    this.props.updatePending({updater});
+    const updater = {
+      moderation: {
+        $set: this.props.settings.moderation === 'PRE' ? 'POST' : 'PRE',
+      },
+    };
+    this.props.updatePending({ updater });
   };
 
   updateEmailConfirmation = () => {
-    const updater = {requireEmailConfirmation: {$set: !this.props.settings.requireEmailConfirmation}};
-    this.props.updatePending({updater});
+    const updater = {
+      requireEmailConfirmation: {
+        $set: !this.props.settings.requireEmailConfirmation,
+      },
+    };
+    this.props.updatePending({ updater });
   };
 
   updatePremodLinksEnable = () => {
-    const updater = {premodLinksEnable: {$set: !this.props.settings.premodLinksEnable}};
-    this.props.updatePending({updater});
+    const updater = {
+      premodLinksEnable: { $set: !this.props.settings.premodLinksEnable },
+    };
+    this.props.updatePending({ updater });
   };
 
   updateWordlist = (listName, list) => {
-    this.props.updatePending({updater: {
-      wordlist: {$apply: (wordlist) => {
-        const changeSet = {[listName]: list};
-        if (!wordlist) {
-          return changeSet;
-        }
-        return {
-          ...wordlist,
-          ...changeSet,
-        };
-      }},
-    }});
+    this.props.updatePending({
+      updater: {
+        wordlist: {
+          $apply: wordlist => {
+            const changeSet = { [listName]: list };
+            if (!wordlist) {
+              return changeSet;
+            }
+            return {
+              ...wordlist,
+              ...changeSet,
+            };
+          },
+        },
+      },
+    });
   };
 
   render() {
-    const {settings, data, root, updatePending, errors} = this.props;
+    const { settings, data, root, updatePending, errors } = this.props;
 
     return (
-      <ConfigurePage
-        title={t('configure.moderation_settings')}
-      >
+      <ConfigurePage title={t('configure.moderation_settings')}>
         <ConfigureCard
           checked={settings.requireEmailConfirmation}
           onCheckbox={this.updateEmailConfirmation}
@@ -69,11 +80,12 @@ class ModerationSettings extends React.Component {
         <Wordlist
           bannedWords={settings.wordlist.banned}
           suspectWords={settings.wordlist.suspect}
-          onChangeWordlist={this.updateWordlist} />
+          onChangeWordlist={this.updateWordlist}
+        />
         <Slot
           fill="adminModerationSettings"
           data={data}
-          queryData={{root, settings}}
+          queryData={{ root, settings }}
           updatePending={updatePending}
           errors={errors}
         />
diff --git a/client/coral-admin/src/routes/Configure/components/StreamSettings.js b/client/coral-admin/src/routes/Configure/components/StreamSettings.js
index 82441632d..c447b8453 100644
--- a/client/coral-admin/src/routes/Configure/components/StreamSettings.js
+++ b/client/coral-admin/src/routes/Configure/components/StreamSettings.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import {SelectField, Option} from 'react-mdl-selectfield';
+import { SelectField, Option } from 'react-mdl-selectfield';
 import t from 'coral-framework/services/i18n';
 import styles from './StreamSettings.css';
-import {Textfield} from 'react-mdl';
-import {Icon, TextArea} from 'coral-ui';
+import { Textfield } from 'react-mdl';
+import { Icon, TextArea } from 'coral-ui';
 import PropTypes from 'prop-types';
 import Slot from 'coral-framework/components/Slot';
 import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
@@ -14,12 +14,12 @@ import ConfigureCard from 'coral-framework/components/ConfigureCard';
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
   days: 60 * 60 * 24,
-  hours: 60 * 60
+  hours: 60 * 60,
 };
 
 // To see if we are talking about weeks, days or hours
 // We talk the remainder of the division and see if it's 0
-const getTimeoutMeasure = (ts) => {
+const getTimeoutMeasure = ts => {
   if (ts % TIMESTAMPS['weeks'] === 0) {
     return 'weeks';
   } else if (ts % TIMESTAMPS['days'] === 0) {
@@ -31,113 +31,125 @@ const getTimeoutMeasure = (ts) => {
 
 // Dividing the amount by it's measure (hours, days, weeks) we
 // obtain the amount of time
-const getTimeoutAmount = (ts) => ts / TIMESTAMPS[getTimeoutMeasure(ts)];
+const getTimeoutAmount = ts => ts / TIMESTAMPS[getTimeoutMeasure(ts)];
 
 class StreamSettings extends React.Component {
-
   updateCharCountEnable = () => {
-    const updater = {charCountEnable: {$set: !this.props.settings.charCountEnable}};
-    this.props.updatePending({updater});
+    const updater = {
+      charCountEnable: { $set: !this.props.settings.charCountEnable },
+    };
+    this.props.updatePending({ updater });
   };
 
-  updateCharCount = (event) => {
+  updateCharCount = event => {
     let error = null;
     const charCount = event.target.value;
     if (charCount.match(/[^0-9]/) || charCount.length === 0) {
       error = true;
     }
 
-    const updater = {charCount: {$set: charCount}};
-    const errorUpdater = {charCount: {$set: error}};
+    const updater = { charCount: { $set: charCount } };
+    const errorUpdater = { charCount: { $set: error } };
 
-    this.props.updatePending({updater, errorUpdater});
+    this.props.updatePending({ updater, errorUpdater });
   };
 
   updateInfoBoxEnable = () => {
-    const updater = {infoBoxEnable: {$set: !this.props.settings.infoBoxEnable}};
-    this.props.updatePending({updater});
+    const updater = {
+      infoBoxEnable: { $set: !this.props.settings.infoBoxEnable },
+    };
+    this.props.updatePending({ updater });
   };
 
-  updateInfoBoxContent = (value) => {
-    const updater = {infoBoxContent: {$set: value}};
-    this.props.updatePending({updater});
+  updateInfoBoxContent = value => {
+    const updater = { infoBoxContent: { $set: value } };
+    this.props.updatePending({ updater });
   };
 
-  updateClosedMessage = (event) => {
-    const updater = {closedMessage: {$set: event.target.value}};
-    this.props.updatePending({updater});
+  updateClosedMessage = event => {
+    const updater = { closedMessage: { $set: event.target.value } };
+    this.props.updatePending({ updater });
   };
 
-  updateEditCommentWindowLength = (e) => {
+  updateEditCommentWindowLength = e => {
     const value = e.target.value;
     const valueAsNumber = parseFloat(value);
-    const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
+    const milliseconds = !isNaN(valueAsNumber) && valueAsNumber * 1000;
 
-    const updater = {editCommentWindowLength: {$set: milliseconds || value}};
-    this.props.updatePending({updater});
+    const updater = {
+      editCommentWindowLength: { $set: milliseconds || value },
+    };
+    this.props.updatePending({ updater });
   };
 
   updateAutoClose = () => {
-    const updater = {autoCloseStream: {$set: !this.props.settings.autoCloseStream}};
-    this.props.updatePending({updater});
+    const updater = {
+      autoCloseStream: { $set: !this.props.settings.autoCloseStream },
+    };
+    this.props.updatePending({ updater });
   };
 
-  updateClosedTimeout = (event) => {
+  updateClosedTimeout = event => {
     const val = event.target.value;
     const measure = getTimeoutMeasure(this.props.settings.closedTimeout);
 
-    const updater = {closedTimeout: {$set: val * TIMESTAMPS[measure]}};
-    this.props.updatePending({updater});
+    const updater = { closedTimeout: { $set: val * TIMESTAMPS[measure] } };
+    this.props.updatePending({ updater });
   };
 
   // If we are changing the measure we need to recalculate using the old amount
   // Same thing if we are just changing the amount
-  updateClosedTimeoutMeasure = (event) => {
+  updateClosedTimeoutMeasure = event => {
     const amount = getTimeoutAmount(this.props.settings.closedTimeout);
 
-    const updater = {closedTimeout: {$set: amount * TIMESTAMPS[event]}};
-    this.props.updatePending({updater});
+    const updater = { closedTimeout: { $set: amount * TIMESTAMPS[event] } };
+    this.props.updatePending({ updater });
   };
 
   render() {
-    const {settings, data, root, errors, updatePending} = this.props;
+    const { settings, data, root, errors, updatePending } = this.props;
 
     return (
-      <ConfigurePage
-        title={t('configure.stream_settings')}
-      >
+      <ConfigurePage title={t('configure.stream_settings')}>
         <ConfigureCard
           checked={settings.charCountEnable}
           onCheckbox={this.updateCharCountEnable}
           title={t('configure.comment_count_header')}
         >
           <span>{t('configure.comment_count_text_pre')}</span>
-          <input type='text'
-            className={cn(styles.inlineTextfield, styles.charCountTexfield, settings.charCountEnable && styles.charCountTexfieldEnable)}
-            htmlFor='charCount'
+          <input
+            type="text"
+            className={cn(
+              styles.inlineTextfield,
+              styles.charCountTexfield,
+              settings.charCountEnable && styles.charCountTexfieldEnable
+            )}
+            htmlFor="charCount"
             onChange={this.updateCharCount}
             value={settings.charCount}
             disabled={settings.charCountEnable ? '' : 'disabled'}
           />
           <span>{t('configure.comment_count_text_post')}</span>
-          {
-            errors.charCount &&
-              <span className={styles.settingsError}>
-                <br/>
-                <Icon name="error_outline"/>
-                {t('configure.comment_count_error')}
-              </span>
-          }
+          {errors.charCount && (
+            <span className={styles.settingsError}>
+              <br />
+              <Icon name="error_outline" />
+              {t('configure.comment_count_error')}
+            </span>
+          )}
         </ConfigureCard>
         <ConfigureCard
           checked={settings.infoBoxEnable}
           onCheckbox={this.updateInfoBoxEnable}
           title={t('configure.include_comment_stream')}
         >
-          <p>
-            {t('configure.include_comment_stream_desc')}
-          </p>
-          <div className={cn(styles.configSettingInfoBox, settings.infoBoxEnable ? null : styles.hidden)} >
+          <p>{t('configure.include_comment_stream_desc')}</p>
+          <div
+            className={cn(
+              styles.configSettingInfoBox,
+              settings.infoBoxEnable ? null : styles.hidden
+            )}
+          >
             <MarkdownEditor
               className={styles.descriptionBox}
               onChange={this.updateInfoBoxContent}
@@ -152,25 +164,30 @@ class StreamSettings extends React.Component {
         >
           <p>{t('configure.closed_comments_desc')}</p>
           <div>
-            <TextArea className={styles.descriptionBox}
+            <TextArea
+              className={styles.descriptionBox}
               onChange={this.updateClosedMessage}
               value={settings.closedMessage}
             />
           </div>
         </ConfigureCard>
-        <ConfigureCard
-          title={t('configure.edit_comment_timeframe_heading')}
-        >
+        <ConfigureCard title={t('configure.edit_comment_timeframe_heading')}>
           {t('configure.edit_comment_timeframe_text_pre')}
           &nbsp;
           <input
-            className={cn(styles.inlineTextfield, styles.editCommentTimeframeTextfield)}
+            className={cn(
+              styles.inlineTextfield,
+              styles.editCommentTimeframeTextfield
+            )}
             type="number"
             min="0"
             onChange={this.updateEditCommentWindowLength}
             placeholder="30"
-            defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
-            pattern='[0-9]+([\.][0-9]*)?'
+            defaultValue={
+              settings.editCommentWindowLength /
+              1000 /* saved as ms, rendered as seconds */
+            }
+            pattern="[0-9]+([\.][0-9]*)?"
           />
           &nbsp;
           {t('configure.edit_comment_timeframe_text_post')}
@@ -182,17 +199,19 @@ class StreamSettings extends React.Component {
         >
           <div className={styles.autoCloseWrapper}>
             <Textfield
-              type='number'
-              pattern='[0-9]+'
-              style={{width: 50}}
+              type="number"
+              pattern="[0-9]+"
+              style={{ width: 50 }}
               onChange={this.updateClosedTimeout}
               value={getTimeoutAmount(settings.closedTimeout)}
-              label={t('configure.closed_comments_label')} />
+              label={t('configure.closed_comments_label')}
+            />
             <div className={styles.configTimeoutSelect}>
               <SelectField
                 label="comments closed time window"
                 value={getTimeoutMeasure(settings.closedTimeout)}
-                onChange={this.updateClosedTimeoutMeasure}>
+                onChange={this.updateClosedTimeoutMeasure}
+              >
                 <Option value={'hours'}>{t('configure.hours')}</Option>
                 <Option value={'days'}>{t('configure.days')}</Option>
                 <Option value={'weeks'}>{t('configure.weeks')}</Option>
@@ -204,7 +223,7 @@ class StreamSettings extends React.Component {
         <Slot
           fill="adminStreamSettings"
           data={data}
-          queryData={{root, settings}}
+          queryData={{ root, settings }}
           updatePending={updatePending}
           errors={errors}
         />
@@ -222,4 +241,3 @@ StreamSettings.propTypes = {
 };
 
 export default StreamSettings;
-
diff --git a/client/coral-admin/src/routes/Configure/components/TechSettings.js b/client/coral-admin/src/routes/Configure/components/TechSettings.js
index 1b783c9ec..8bb10e9a3 100644
--- a/client/coral-admin/src/routes/Configure/components/TechSettings.js
+++ b/client/coral-admin/src/routes/Configure/components/TechSettings.js
@@ -9,48 +9,51 @@ import ConfigurePage from './ConfigurePage';
 import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
 class TechSettings extends React.Component {
-
-  updateCustomCssUrl = (event) => {
-    const updater = {customCssUrl: {$set: event.target.value}};
-    this.props.updatePending({updater});
+  updateCustomCssUrl = event => {
+    const updater = { customCssUrl: { $set: event.target.value } };
+    this.props.updatePending({ updater });
   };
 
   updateDomainlist = (listName, list) => {
-    this.props.updatePending({updater: {
-      domains: {$apply: (domains) => {
-        const changeSet = {[listName]: list};
-        if (!domains) {
-          return changeSet;
-        }
-        return {
-          ...domains,
-          ...changeSet,
-        };
-      }},
-    }});
+    this.props.updatePending({
+      updater: {
+        domains: {
+          $apply: domains => {
+            const changeSet = { [listName]: list };
+            if (!domains) {
+              return changeSet;
+            }
+            return {
+              ...domains,
+              ...changeSet,
+            };
+          },
+        },
+      },
+    });
   };
 
   render() {
-    const {settings, data, root, errors, updatePending} = this.props;
+    const { settings, data, root, errors, updatePending } = this.props;
     return (
-      <ConfigurePage
-        title={t('configure.tech_settings')}
-      >
+      <ConfigurePage title={t('configure.tech_settings')}>
         <Domainlist
           domains={settings.domains.whitelist}
-          onChangeDomainlist={this.updateDomainlist} />
+          onChangeDomainlist={this.updateDomainlist}
+        />
         <EmbedLink />
         <ConfigureCard title={t('configure.custom_css_url')}>
           <p>{t('configure.custom_css_url_desc')}</p>
           <input
             className={styles.customCSSInput}
             value={settings.customCssUrl}
-            onChange={this.updateCustomCssUrl} />
+            onChange={this.updateCustomCssUrl}
+          />
         </ConfigureCard>
         <Slot
           fill="adminTechSettings"
           data={data}
-          queryData={{root, settings}}
+          queryData={{ root, settings }}
           updatePending={updatePending}
           errors={errors}
         />
diff --git a/client/coral-admin/src/routes/Configure/components/Wordlist.js b/client/coral-admin/src/routes/Configure/components/Wordlist.js
index 34a6ed825..b05b325bb 100644
--- a/client/coral-admin/src/routes/Configure/components/Wordlist.js
+++ b/client/coral-admin/src/routes/Configure/components/Wordlist.js
@@ -4,22 +4,23 @@ import TagsInput from 'coral-admin/src/components/TagsInput';
 import PropTypes from 'prop-types';
 import ConfigureCard from 'coral-framework/components/ConfigureCard';
 
-const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
+const Wordlist = ({ suspectWords, bannedWords, onChangeWordlist }) => (
   <div>
     <ConfigureCard title={t('configure.banned_words_title')}>
       <p>{t('configure.banned_word_text')}</p>
       <TagsInput
         value={bannedWords}
-        inputProps={{placeholder: 'word or phrase'}}
-        onChange={(tags) => onChangeWordlist('banned', tags)}
+        inputProps={{ placeholder: 'word or phrase' }}
+        onChange={tags => onChangeWordlist('banned', tags)}
       />
     </ConfigureCard>
     <ConfigureCard title={t('configure.suspect_word_title')}>
       <p>{t('configure.suspect_word_text')}</p>
       <TagsInput
         value={suspectWords}
-        inputProps={{placeholder: 'word or phrase'}}
-        onChange={(tags) => onChangeWordlist('suspect', tags)} />
+        inputProps={{ placeholder: 'word or phrase' }}
+        onChange={tags => onChangeWordlist('suspect', tags)}
+      />
     </ConfigureCard>
   </div>
 );
diff --git a/client/coral-admin/src/routes/Configure/containers/Configure.js b/client/coral-admin/src/routes/Configure/containers/Configure.js
index dfa8df876..0d9d5faf9 100644
--- a/client/coral-admin/src/routes/Configure/containers/Configure.js
+++ b/client/coral-admin/src/routes/Configure/containers/Configure.js
@@ -1,51 +1,52 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {compose, gql} from 'react-apollo';
-import {withQuery, withMergedSettings} from 'coral-framework/hocs';
-import {Spinner} from 'coral-ui';
-import {notify} from 'coral-framework/actions/notification';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
+import { withQuery, withMergedSettings } from 'coral-framework/hocs';
+import { Spinner } from 'coral-ui';
+import { notify } from 'coral-framework/actions/notification';
 import PropTypes from 'prop-types';
-import {withUpdateSettings} from 'coral-framework/graphql/mutations';
-import {getErrorMessages, getDefinitionName} from 'coral-framework/utils';
+import { withUpdateSettings } from 'coral-framework/graphql/mutations';
+import { getErrorMessages, getDefinitionName } from 'coral-framework/utils';
 import StreamSettings from './StreamSettings';
 import TechSettings from './TechSettings';
 import ModerationSettings from './ModerationSettings';
-import {clearPending, setActiveSection} from '../../../actions/configure';
+import { clearPending, setActiveSection } from '../../../actions/configure';
 import Configure from '../components/Configure';
 
 class ConfigureContainer extends Component {
-
   savePending = async () => {
     try {
       await this.props.updateSettings(this.props.pending);
       this.props.clearPending();
-    }
-    catch(err) {
+    } catch (err) {
       this.props.notify('error', getErrorMessages(err));
     }
   };
 
-  render () {
-    if(this.props.data.loading) {
-      return <Spinner/>;
+  render() {
+    if (this.props.data.loading) {
+      return <Spinner />;
     }
 
-    return <Configure
-      notify={this.props.notify}
-      auth={this.props.auth}
-      data={this.props.data}
-      root={this.props.root}
-      settings={this.props.mergedSettings}
-      canSave={this.props.canSave}
-      savePending={this.savePending}
-      setActiveSection={this.props.setActiveSection}
-      activeSection={this.props.activeSection}
-    />;
+    return (
+      <Configure
+        notify={this.props.notify}
+        auth={this.props.auth}
+        data={this.props.data}
+        root={this.props.root}
+        settings={this.props.mergedSettings}
+        canSave={this.props.canSave}
+        savePending={this.savePending}
+        setActiveSection={this.props.setActiveSection}
+        activeSection={this.props.activeSection}
+      />
+    );
   }
 }
 
-const withConfigureQuery = withQuery(gql`
+const withConfigureQuery = withQuery(
+  gql`
   query TalkAdmin_Configure {
     settings {
       ...${getDefinitionName(StreamSettings.fragments.settings)}
@@ -62,31 +63,36 @@ const withConfigureQuery = withQuery(gql`
   ${TechSettings.fragments.settings}
   ${ModerationSettings.fragments.root}
   ${ModerationSettings.fragments.settings}
-  `, {
-  options: () => ({
-    variables: {},
-  }),
-});
+  `,
+  {
+    options: () => ({
+      variables: {},
+    }),
+  }
+);
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   auth: state.auth,
   pending: state.configure.pending,
   canSave: state.configure.canSave,
   activeSection: state.configure.activeSection,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    notify,
-    clearPending,
-    setActiveSection,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      notify,
+      clearPending,
+      setActiveSection,
+    },
+    dispatch
+  );
 
 export default compose(
   withUpdateSettings,
   withConfigureQuery,
   connect(mapStateToProps, mapDispatchToProps),
-  withMergedSettings('root.settings', 'pending', 'mergedSettings'),
+  withMergedSettings('root.settings', 'pending', 'mergedSettings')
 )(ConfigureContainer);
 
 ConfigureContainer.propTypes = {
diff --git a/client/coral-admin/src/routes/Configure/containers/ModerationSettings.js b/client/coral-admin/src/routes/Configure/containers/ModerationSettings.js
index 61538f4c0..c5e1e401a 100644
--- a/client/coral-admin/src/routes/Configure/containers/ModerationSettings.js
+++ b/client/coral-admin/src/routes/Configure/containers/ModerationSettings.js
@@ -1,23 +1,24 @@
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {compose, gql} from 'react-apollo';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
 import ModerationSettings from '../components/ModerationSettings';
 import withFragments from 'coral-framework/hocs/withFragments';
-import {getSlotFragmentSpreads} from 'coral-framework/utils';
-import {updatePending} from '../../../actions/configure';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+import { updatePending } from '../../../actions/configure';
 
-const slots = [
-  'adminModerationSettings',
-];
+const slots = ['adminModerationSettings'];
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   errors: state.configure.errors,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    updatePending,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      updatePending,
+    },
+    dispatch
+  );
 
 export default compose(
   withFragments({
@@ -38,7 +39,7 @@ export default compose(
         }
         ${getSlotFragmentSpreads(slots, 'settings')}
       }
-    `
+    `,
   }),
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps)
 )(ModerationSettings);
diff --git a/client/coral-admin/src/routes/Configure/containers/StreamSettings.js b/client/coral-admin/src/routes/Configure/containers/StreamSettings.js
index 9a7f79fa6..24e8ad459 100644
--- a/client/coral-admin/src/routes/Configure/containers/StreamSettings.js
+++ b/client/coral-admin/src/routes/Configure/containers/StreamSettings.js
@@ -1,23 +1,24 @@
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {compose, gql} from 'react-apollo';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
 import StreamSettings from '../components/StreamSettings';
 import withFragments from 'coral-framework/hocs/withFragments';
-import {getSlotFragmentSpreads} from 'coral-framework/utils';
-import {updatePending} from '../../../actions/configure';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+import { updatePending } from '../../../actions/configure';
 
-const slots = [
-  'adminStreamSettings',
-];
+const slots = ['adminStreamSettings'];
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   errors: state.configure.errors,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    updatePending,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      updatePending,
+    },
+    dispatch
+  );
 
 export default compose(
   withFragments({
@@ -39,7 +40,7 @@ export default compose(
         closedMessage
         ${getSlotFragmentSpreads(slots, 'settings')}
       }
-    `
+    `,
   }),
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps)
 )(StreamSettings);
diff --git a/client/coral-admin/src/routes/Configure/containers/TechSettings.js b/client/coral-admin/src/routes/Configure/containers/TechSettings.js
index 1f5ac20b8..c096d1af9 100644
--- a/client/coral-admin/src/routes/Configure/containers/TechSettings.js
+++ b/client/coral-admin/src/routes/Configure/containers/TechSettings.js
@@ -1,23 +1,24 @@
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {compose, gql} from 'react-apollo';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
 import TechSettings from '../components/TechSettings';
 import withFragments from 'coral-framework/hocs/withFragments';
-import {getSlotFragmentSpreads} from 'coral-framework/utils';
-import {updatePending} from '../../../actions/configure';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+import { updatePending } from '../../../actions/configure';
 
-const slots = [
-  'adminTechSettings',
-];
+const slots = ['adminTechSettings'];
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   errors: state.configure.errors,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    updatePending,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      updatePending,
+    },
+    dispatch
+  );
 
 export default compose(
   withFragments({
@@ -35,7 +36,7 @@ export default compose(
         }
         ${getSlotFragmentSpreads(slots, 'settings')}
       }
-    `
+    `,
   }),
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps)
 )(TechSettings);
diff --git a/client/coral-admin/src/routes/Configure/index.js b/client/coral-admin/src/routes/Configure/index.js
index d548be931..65f94d33b 100644
--- a/client/coral-admin/src/routes/Configure/index.js
+++ b/client/coral-admin/src/routes/Configure/index.js
@@ -1 +1 @@
-export {default} from './containers/Configure';
+export { default } from './containers/Configure';
diff --git a/client/coral-admin/src/routes/Install/components/Install.js b/client/coral-admin/src/routes/Install/components/Install.js
index 0d206d8f0..5c654c81e 100644
--- a/client/coral-admin/src/routes/Install/components/Install.js
+++ b/client/coral-admin/src/routes/Install/components/Install.js
@@ -1,6 +1,6 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import styles from './Install.css';
-import {Wizard, WizardNav} from 'coral-ui';
+import { Wizard, WizardNav } from 'coral-ui';
 import Layout from 'coral-admin/src/components/ui/Layout';
 
 import InitialStep from './Steps/InitialStep';
@@ -10,68 +10,72 @@ import PermittedDomainsStep from './Steps/PermittedDomainsStep';
 import FinalStep from './Steps/FinalStep';
 
 export default class Install extends Component {
-  handleDomainsChange = (value) => {
+  handleDomainsChange = value => {
     this.props.updatePermittedDomains(value);
   };
 
-  handleSettingsChange = ({currentTarget: {name, value}}) => {
+  handleSettingsChange = ({ currentTarget: { name, value } }) => {
     this.props.updateSettingsFormData(name, value);
   };
 
-  handleUserChange = ({currentTarget: {name, value}}) => {
+  handleUserChange = ({ currentTarget: { name, value } }) => {
     this.props.updateUserFormData(name, value);
   };
 
-  handleSettingsSubmit = (e) => {
+  handleSettingsSubmit = e => {
     e.preventDefault();
     this.props.submitSettings();
   };
 
-  handleUserSubmit = (e) => {
+  handleUserSubmit = e => {
     e.preventDefault();
     this.props.submitUser();
-  }
+  };
 
   render() {
-    const {install} = this.props;
+    const { install } = this.props;
 
     return (
       <Layout restricted={true}>
         <div className={styles.install}>
-          {
-            !install.alreadyInstalled ? (
-              <div>
-                <h2 className={styles.header}>Welcome to the Coral Project</h2>
-                { install.step !== 0 ? <WizardNav items={install.navItems} currentStep={install.step} icon='check'/> : null }
-                <Wizard
+          {!install.alreadyInstalled ? (
+            <div>
+              <h2 className={styles.header}>Welcome to the Coral Project</h2>
+              {install.step !== 0 ? (
+                <WizardNav
+                  items={install.navItems}
                   currentStep={install.step}
-                  nextStep={this.props.nextStep}
-                  previousStep={this.props.previousStep}
-                  goToStep={this.props.goToStep}
-                >
-                  <InitialStep/>
-                  <AddOrganizationName
-                    install={install}
-                    handleSettingsChange={this.handleSettingsChange}
-                    handleSettingsSubmit={this.handleSettingsSubmit}
-                  />
-                  <CreateYourAccount
-                    install={install}
-                    handleUserChange={this.handleUserChange}
-                    handleUserSubmit={this.handleUserSubmit}
-                  />
-                  <PermittedDomainsStep
-                    install={install}
-                    handleDomainsChange={this.handleDomainsChange}
-                    finishInstall={this.props.finishInstall}
-                  />
-                  <FinalStep/>
-                </Wizard>
-              </div>
-            ) : (
-              <div>Talk is already installed</div>
-            )
-          }
+                  icon="check"
+                />
+              ) : null}
+              <Wizard
+                currentStep={install.step}
+                nextStep={this.props.nextStep}
+                previousStep={this.props.previousStep}
+                goToStep={this.props.goToStep}
+              >
+                <InitialStep />
+                <AddOrganizationName
+                  install={install}
+                  handleSettingsChange={this.handleSettingsChange}
+                  handleSettingsSubmit={this.handleSettingsSubmit}
+                />
+                <CreateYourAccount
+                  install={install}
+                  handleUserChange={this.handleUserChange}
+                  handleUserSubmit={this.handleUserSubmit}
+                />
+                <PermittedDomainsStep
+                  install={install}
+                  handleDomainsChange={this.handleDomainsChange}
+                  finishInstall={this.props.finishInstall}
+                />
+                <FinalStep />
+              </Wizard>
+            </div>
+          ) : (
+            <div>Talk is already installed</div>
+          )}
         </div>
       </Layout>
     );
diff --git a/client/coral-admin/src/routes/Install/components/Steps/AddOrganizationName.js b/client/coral-admin/src/routes/Install/components/Steps/AddOrganizationName.js
index 2d2743757..aa3cfd534 100644
--- a/client/coral-admin/src/routes/Install/components/Steps/AddOrganizationName.js
+++ b/client/coral-admin/src/routes/Install/components/Steps/AddOrganizationName.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import styles from './style.css';
-import {TextField, Button} from 'coral-ui';
+import { TextField, Button } from 'coral-ui';
 import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
 
-const AddOrganizationName = (props) => {
-  const {handleSettingsChange, handleSettingsSubmit, install} = props;
+const AddOrganizationName = props => {
+  const { handleSettingsChange, handleSettingsSubmit, install } = props;
   return (
     <div className={cn(styles.step, 'talk-install-step-2')}>
       <p>{t('install.add_organization.description')}</p>
@@ -19,8 +19,16 @@ const AddOrganizationName = (props) => {
             label={t('install.add_organization.label')}
             onChange={handleSettingsChange}
             showErrors={install.showErrors}
-            errorMsg={install.errors.organizationName} />
-          <Button className="talk-install-step-2-save-button" type="submit" cStyle='black' full>{t('install.add_organization.save')}</Button>
+            errorMsg={install.errors.organizationName}
+          />
+          <Button
+            className="talk-install-step-2-save-button"
+            type="submit"
+            cStyle="black"
+            full
+          >
+            {t('install.add_organization.save')}
+          </Button>
         </form>
       </div>
     </div>
diff --git a/client/coral-admin/src/routes/Install/components/Steps/CreateYourAccount.js b/client/coral-admin/src/routes/Install/components/Steps/CreateYourAccount.js
index dec111c5b..37387c446 100644
--- a/client/coral-admin/src/routes/Install/components/Steps/CreateYourAccount.js
+++ b/client/coral-admin/src/routes/Install/components/Steps/CreateYourAccount.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import styles from './style.css';
-import {TextField, Button, Spinner} from 'coral-ui';
+import { TextField, Button, Spinner } from 'coral-ui';
 import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
 
-const InitialStep = (props) => {
-  const {handleUserChange, handleUserSubmit, install} = props;
+const InitialStep = props => {
+  const { handleUserChange, handleUserSubmit, install } = props;
   return (
     <div className={cn(styles.step, 'talk-install-step-3')}>
       <div className={styles.form}>
@@ -52,13 +52,23 @@ const InitialStep = (props) => {
             errorMsg={install.errors.confirmPassword}
           />
 
-          {
-            !props.install.isLoading ?
-              <Button className="talk-install-step-3-save-button" cStyle='black' type="submit" full>{t('install.create.save')}</Button>
-              :
-              <Spinner />
-          }
-          {props.install.installRequest === 'FAILURE' && <div className={styles.error}>Error: {props.install.installRequestError}</div>}
+          {!props.install.isLoading ? (
+            <Button
+              className="talk-install-step-3-save-button"
+              cStyle="black"
+              type="submit"
+              full
+            >
+              {t('install.create.save')}
+            </Button>
+          ) : (
+            <Spinner />
+          )}
+          {props.install.installRequest === 'FAILURE' && (
+            <div className={styles.error}>
+              Error: {props.install.installRequestError}
+            </div>
+          )}
         </form>
       </div>
     </div>
diff --git a/client/coral-admin/src/routes/Install/components/Steps/FinalStep.js b/client/coral-admin/src/routes/Install/components/Steps/FinalStep.js
index 242230294..72fd67a34 100644
--- a/client/coral-admin/src/routes/Install/components/Steps/FinalStep.js
+++ b/client/coral-admin/src/routes/Install/components/Steps/FinalStep.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './style.css';
-import {Button} from 'coral-ui';
-import {Link} from 'react-router';
+import { Button } from 'coral-ui';
+import { Link } from 'react-router';
 import cn from 'classnames';
 
 import t from 'coral-framework/services/i18n';
@@ -10,8 +10,12 @@ const InitialStep = () => {
   return (
     <div className={cn(styles.step, styles.finalStep, 'talk-install-step-5')}>
       <p>{t('install.final.description')}</p>
-      <Button raised><Link to='/admin'>{t('install.final.launch')}</Link></Button>
-      <Button cStyle='black' raised><a href="http://coralproject.net">{t('install.final.close')}</a></Button>
+      <Button raised>
+        <Link to="/admin">{t('install.final.launch')}</Link>
+      </Button>
+      <Button cStyle="black" raised>
+        <a href="http://coralproject.net">{t('install.final.close')}</a>
+      </Button>
     </div>
   );
 };
diff --git a/client/coral-admin/src/routes/Install/components/Steps/InitialStep.js b/client/coral-admin/src/routes/Install/components/Steps/InitialStep.js
index 72d9fdd54..9b553b937 100644
--- a/client/coral-admin/src/routes/Install/components/Steps/InitialStep.js
+++ b/client/coral-admin/src/routes/Install/components/Steps/InitialStep.js
@@ -1,16 +1,23 @@
 import React from 'react';
 import styles from './style.css';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
 
-const InitialStep = (props) => {
-  const {nextStep} = props;
+const InitialStep = props => {
+  const { nextStep } = props;
   return (
     <div className={cn(styles.step, 'talk-install-step-1')}>
       <p>{t('install.initial.description')}</p>
-      <Button className={'talk-install-get-started-button'} cStyle='green' onClick={nextStep} raised>{t('install.initial.submit')}</Button>
+      <Button
+        className={'talk-install-get-started-button'}
+        cStyle="green"
+        onClick={nextStep}
+        raised
+      >
+        {t('install.initial.submit')}
+      </Button>
     </div>
   );
 };
diff --git a/client/coral-admin/src/routes/Install/components/Steps/InviteTeamMembers.js b/client/coral-admin/src/routes/Install/components/Steps/InviteTeamMembers.js
index 880aa69a4..5b35d708e 100644
--- a/client/coral-admin/src/routes/Install/components/Steps/InviteTeamMembers.js
+++ b/client/coral-admin/src/routes/Install/components/Steps/InviteTeamMembers.js
@@ -1,40 +1,45 @@
 import React from 'react';
 import styles from './style.css';
-import {Button, Select, Option, TextField} from 'coral-ui';
+import { Button, Select, Option, TextField } from 'coral-ui';
 
-const InviteTeamMembers = (props) => {
-  const {nextStep} = props;
+const InviteTeamMembers = props => {
+  const { nextStep } = props;
   return (
     <div className={styles.step}>
       <h3>Invite Team Members </h3>
       <p>
-        Once registered, new team members will receive an email to Create
-        their password.
+        Once registered, new team members will receive an email to Create their
+        password.
       </p>
       <div className={styles.form}>
         <form>
-
           <TextField
             className={styles.textField}
             id="email"
             type="email"
-            label='Email address' required/>
+            label="Email address"
+            required
+          />
 
           <TextField
             className={styles.textField}
             id="username"
             type="text"
-            label='Username' required/>
+            label="Username"
+            required
+          />
 
           <div className={styles.textField}>
-            <label htmlFor='role'>Assing a role</label>
-            <Select id='role' label='Select Role'>
+            <label htmlFor="role">Assing a role</label>
+            <Select id="role" label="Select Role">
               <Option>Admin</Option>
               <Option>Moderator</Option>
             </Select>
           </div>
 
-          <Button cStyle='black' onClick={nextStep} icon='arrow_forward' full>Invite team member</Button>
+          <Button cStyle="black" onClick={nextStep} icon="arrow_forward" full>
+            Invite team member
+          </Button>
         </form>
       </div>
     </div>
diff --git a/client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js b/client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js
index 9ec52994b..a0323b398 100644
--- a/client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js
+++ b/client/coral-admin/src/routes/Install/components/Steps/PermittedDomainsStep.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import styles from './style.css';
-import {Button, Card} from 'coral-ui';
+import { Button, Card } from 'coral-ui';
 import TagsInput from 'coral-admin/src/components/TagsInput';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 
-const PermittedDomainsStep = (props) => {
-  const {finishInstall, install, handleDomainsChange} = props;
+const PermittedDomainsStep = props => {
+  const { finishInstall, install, handleDomainsChange } = props;
   const domains = install.data.settings.domains.whitelist;
   return (
     <div className={cn(styles.step, 'talk-install-step-4')}>
@@ -17,11 +17,18 @@ const PermittedDomainsStep = (props) => {
         <TagsInput
           className="talk-install-step-4-permited-domains-input"
           value={domains}
-          inputProps={{placeholder: 'URL'}}
-          onChange={(tags) => handleDomainsChange(tags)}
+          inputProps={{ placeholder: 'URL' }}
+          onChange={tags => handleDomainsChange(tags)}
         />
       </Card>
-      <Button className="talk-install-step-4-save-button" cStyle='green' onClick={finishInstall} raised>{t('install.permitted_domains.submit')}</Button>
+      <Button
+        className="talk-install-step-4-save-button"
+        cStyle="green"
+        onClick={finishInstall}
+        raised
+      >
+        {t('install.permitted_domains.submit')}
+      </Button>
     </div>
   );
 };
diff --git a/client/coral-admin/src/routes/Install/containers/Install.js b/client/coral-admin/src/routes/Install/containers/Install.js
index 77486a9c1..54c02e3c0 100644
--- a/client/coral-admin/src/routes/Install/containers/Install.js
+++ b/client/coral-admin/src/routes/Install/containers/Install.js
@@ -1,8 +1,8 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {compose} from 'react-apollo';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose } from 'react-apollo';
 import Install from '../components/Install';
 
 import {
@@ -15,44 +15,47 @@ import {
   submitSettings,
   updateUserFormData,
   updateSettingsFormData,
-  updatePermittedDomains
+  updatePermittedDomains,
 } from '../../../actions/install';
 
 class InstallContainer extends Component {
   componentDidMount() {
-    const {checkInstall} = this.props;
+    const { checkInstall } = this.props;
     checkInstall(() => {
       this.context.router.push('/admin');
     });
   }
 
   render() {
-    return <Install {...this.props}/>;
+    return <Install {...this.props} />;
   }
 }
 
 InstallContainer.contextTypes = {
-  router: PropTypes.object
+  router: PropTypes.object,
 };
 
-const mapStateToProps = (state) => ({
-  install: state.install
+const mapStateToProps = state => ({
+  install: state.install,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    goToStep,
-    nextStep,
-    submitUser,
-    checkInstall,
-    previousStep,
-    finishInstall,
-    submitSettings,
-    updateUserFormData,
-    updateSettingsFormData,
-    updatePermittedDomains
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      goToStep,
+      nextStep,
+      submitUser,
+      checkInstall,
+      previousStep,
+      finishInstall,
+      submitSettings,
+      updateUserFormData,
+      updateSettingsFormData,
+      updatePermittedDomains,
+    },
+    dispatch
+  );
 
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-)(InstallContainer);
+export default compose(connect(mapStateToProps, mapDispatchToProps))(
+  InstallContainer
+);
diff --git a/client/coral-admin/src/routes/Install/index.js b/client/coral-admin/src/routes/Install/index.js
index 94c7bf93f..8bbc94a24 100644
--- a/client/coral-admin/src/routes/Install/index.js
+++ b/client/coral-admin/src/routes/Install/index.js
@@ -1 +1 @@
-export {default} from './containers/Install.js';
+export { default } from './containers/Install.js';
diff --git a/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js b/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js
index 4ba7c3298..f6dac398f 100644
--- a/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js
+++ b/client/coral-admin/src/routes/Moderation/components/AutoLoadMore.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Spinner} from 'coral-ui';
+import { Spinner } from 'coral-ui';
 import PropTypes from 'prop-types';
 
 /**
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
  */
 class AutoLoadMore extends React.Component {
   componentDidMount() {
-    if(!this.props.loading) {
+    if (!this.props.loading) {
       this.props.loadMore();
     }
   }
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index 293071cec..fc6894a46 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -1,28 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
-import {Icon} from 'coral-ui';
+import { Icon } from 'coral-ui';
 import CommentDetails from 'coral-admin/src/components/CommentDetails';
 import styles from './Comment.css';
 import CommentLabels from 'coral-admin/src/components/CommentLabels';
 import CommentAnimatedEdit from 'coral-admin/src/components/CommentAnimatedEdit';
 import Slot from 'coral-framework/components/Slot';
-import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
-import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
 import IfHasLink from 'coral-admin/src/components/IfHasLink';
 import cn from 'classnames';
 import ApproveButton from 'coral-admin/src/components/ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
 
-import t, {timeago} from 'coral-framework/services/i18n';
+import t, { timeago } from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
-
   ref = null;
 
-  handleRef = (ref) => this.ref = ref;
+  handleRef = ref => (this.ref = ref);
 
   handleFocusOrClick = () => {
     if (!this.props.selected) {
@@ -30,40 +27,20 @@ class Comment extends React.Component {
     }
   };
 
-  showSuspendUserDialog = () => {
-    const {comment, showSuspendUserDialog} = this.props;
-    return showSuspendUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
-  };
-
-  showBanUserDialog = () => {
-    const {comment, showBanUserDialog} = this.props;
-    return showBanUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
-  };
-
   viewUserDetail = () => {
-    const {viewUserDetail, comment} = this.props;
+    const { viewUserDetail, comment } = this.props;
     return viewUserDetail(comment.user.id);
   };
 
-  approve = () => (this.props.comment.status === 'ACCEPTED'
-    ? null
-    : this.props.acceptComment({commentId: this.props.comment.id})
-  );
+  approve = () =>
+    this.props.comment.status === 'ACCEPTED'
+      ? null
+      : this.props.acceptComment({ commentId: this.props.comment.id });
 
-  reject = () => (this.props.comment.status === 'REJECTED'
-    ? null
-    : this.props.rejectComment({commentId: this.props.comment.id})
-  );
+  reject = () =>
+    this.props.comment.status === 'REJECTED'
+      ? null
+      : this.props.rejectComment({ commentId: this.props.comment.id });
 
   componentDidUpdate(prev) {
     if (!prev.selected && this.props.selected) {
@@ -78,20 +55,26 @@ class Comment extends React.Component {
       className,
       data,
       root,
-      root: {settings},
-      currentUserId,
+      root: { settings },
       currentAsset,
       clearHeightCache,
       dangling,
     } = this.props;
 
     const selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
-    const queryData = {root, comment, asset: comment.asset};
+    const queryData = { root, comment, asset: comment.asset };
 
     return (
       <li
         tabIndex={0}
-        className={cn(className, 'mdl-card', selectionStateCSS, styles.root, {[styles.selected]: selected, [styles.dangling]: dangling}, 'talk-admin-moderate-comment')}
+        className={cn(
+          className,
+          'mdl-card',
+          selectionStateCSS,
+          styles.root,
+          { [styles.selected]: selected, [styles.dangling]: dangling },
+          'talk-admin-moderate-comment'
+        )}
         id={`comment_${comment.id}`}
         onClick={this.handleFocusOrClick}
         ref={this.handleRef}
@@ -100,38 +83,28 @@ class Comment extends React.Component {
         <div className={styles.container}>
           <div className={styles.itemHeader}>
             <div className={styles.author}>
-              {
-                (
-                  <span className={styles.username} onClick={this.viewUserDetail}>
-                    {comment.user.username}
-                  </span>
-                )
-              }
+              <span
+                className={cn(
+                  styles.username,
+                  'talk-admin-moderate-comment-username'
+                )}
+                onClick={this.viewUserDetail}
+              >
+                {comment.user.username}
+              </span>
+
               <span className={styles.created}>
                 {timeago(comment.created_at)}
               </span>
-              {
-                (comment.editing && comment.editing.edited)
-                  ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-                  : null
-              }
-              {currentUserId !== comment.user.id &&
-                <ActionsMenu icon="not_interested" className="talk-admin-moderate-comment-actions-menu">
-                  <ActionsMenuItem
-                    disabled={comment.user.status === 'BANNED'}
-                    onClick={this.showSuspendUserDialog}>
-                    Suspend User</ActionsMenuItem>
-                  <ActionsMenuItem
-                    disabled={comment.user.status === 'BANNED'}
-                    onClick={this.showBanUserDialog}>
-                    Ban User
-                  </ActionsMenuItem>
-                </ActionsMenu>
-              }
+              {comment.editing && comment.editing.edited ? (
+                <span>
+                  &nbsp;<span className={styles.editedMarker}>
+                    ({t('comment.edited')})
+                  </span>
+                </span>
+              ) : null}
               <div className={styles.adminCommentInfoBar}>
-                <CommentLabels
-                  comment={comment}
-                />
+                <CommentLabels comment={comment} />
                 <Slot
                   fill="adminCommentInfoBar"
                   data={data}
@@ -144,8 +117,11 @@ class Comment extends React.Component {
 
           <div className={styles.moderateArticle}>
             Story: {comment.asset.title}
-            {!currentAsset &&
-              <Link to={`/admin/moderate/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
+            {!currentAsset && (
+              <Link to={`/admin/moderate/${comment.asset.id}`}>
+                {t('modqueue.moderate')}
+              </Link>
+            )}
           </div>
           <CommentAnimatedEdit body={comment.body}>
             <div className={styles.itemBody}>
@@ -154,8 +130,7 @@ class Comment extends React.Component {
                   suspectWords={settings.wordlist.suspect}
                   bannedWords={settings.wordlist.banned}
                   body={comment.body}
-                />
-                {' '}
+                />{' '}
                 <a
                   className={styles.external}
                   href={`${comment.asset.url}?commentId=${comment.id}`}
@@ -216,8 +191,6 @@ Comment.propTypes = {
   className: PropTypes.string,
   dangling: PropTypes.bool,
   currentAsset: PropTypes.object,
-  showBanUserDialog: PropTypes.func.isRequired,
-  showSuspendUserDialog: PropTypes.func.isRequired,
   currentUserId: PropTypes.string.isRequired,
   clearHeightCache: PropTypes.func,
   comment: PropTypes.shape({
@@ -229,12 +202,12 @@ Comment.propTypes = {
     created_at: PropTypes.string.isRequired,
     user: PropTypes.shape({
       id: PropTypes.string,
-      status: PropTypes.string
+      status: PropTypes.string,
     }).isRequired,
     asset: PropTypes.shape({
       title: PropTypes.string,
       url: PropTypes.string,
-      id: PropTypes.string
+      id: PropTypes.string,
     }),
   }),
   data: PropTypes.object.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index da0745acc..760dfcbb1 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import key from 'keymaster';
 import cn from 'classnames';
@@ -12,13 +12,12 @@ import Slot from 'coral-framework/components/Slot';
 import ViewOptions from './ViewOptions';
 
 class Moderation extends Component {
-
   state = {
     isLoadingMore: false,
   };
 
   componentWillMount() {
-    const {toggleModal, singleView} = this.props;
+    const { toggleModal, singleView } = this.props;
 
     key('s', () => singleView());
     key('shift+/', () => toggleModal(true));
@@ -27,82 +26,91 @@ class Moderation extends Component {
     key('t', () => this.nextQueue());
     key('f', () => this.moderate(false));
     key('d', () => this.moderate(true));
-    this.getMenuItems()
-      .forEach((menuItem, idx) => key(`${idx + 1}`, () => this.selectQueue(menuItem)));
+    this.getMenuItems().forEach((menuItem, idx) =>
+      key(`${idx + 1}`, () => this.selectQueue(menuItem))
+    );
   }
 
   onClose = () => {
     this.props.toggleModal(false);
-  }
+  };
 
   nextQueue = () => {
     const activeTab = this.props.activeTab;
 
     const menuItems = this.getMenuItems();
 
-    const activeTabIndex = menuItems.findIndex((item) => item === activeTab);
-    const nextQueueIndex = (activeTabIndex === menuItems.length - 1) ? 0 : activeTabIndex + 1;
+    const activeTabIndex = menuItems.findIndex(item => item === activeTab);
+    const nextQueueIndex =
+      activeTabIndex === menuItems.length - 1 ? 0 : activeTabIndex + 1;
 
     this.selectQueue(menuItems[nextQueueIndex]);
-  }
+  };
 
-  selectQueue = (key) => {
+  selectQueue = key => {
     const assetId = this.props.data.variables.asset_id;
     this.props.router.push(this.props.getModPath(key, assetId));
-  }
+  };
 
   getMenuItems = () => Object.keys(this.props.queueConfig);
 
   closeSearch = () => {
-    const {toggleStorySearch} = this.props;
+    const { toggleStorySearch } = this.props;
     toggleStorySearch(false);
-  }
+  };
 
   openSearch = () => {
     this.props.toggleStorySearch(true);
-  }
+  };
 
   getActiveTabCount = (props = this.props) => {
     return props.root[`${props.activeTab}Count`];
-  }
+  };
 
-  moderate = (accept) => {
-    const {acceptComment, rejectComment, moderation: {selectedCommentId}} = this.props;
+  moderate = accept => {
+    const {
+      acceptComment,
+      rejectComment,
+      moderation: { selectedCommentId },
+    } = this.props;
 
     // Accept or reject only if there's a selected comment
-    if(selectedCommentId != null){
+    if (selectedCommentId != null) {
       const comments = this.getComments();
-      const commentIdx = comments.findIndex((comment) => comment.id === selectedCommentId);
+      const commentIdx = comments.findIndex(
+        comment => comment.id === selectedCommentId
+      );
       const comment = comments[commentIdx];
 
       if (accept) {
-        comment.status !== 'ACCEPTED' && acceptComment({commentId: comment.id});
+        comment.status !== 'ACCEPTED' &&
+          acceptComment({ commentId: comment.id });
       } else {
-        comment.status !== 'REJECTED' && rejectComment({commentId: comment.id});
+        comment.status !== 'REJECTED' &&
+          rejectComment({ commentId: comment.id });
       }
     }
-  }
+  };
 
   getComments = (props = this.props) => {
-    const {root, activeTab} = props;
+    const { root, activeTab } = props;
     return root[activeTab].nodes;
-  }
+  };
 
   loadMore = async () => {
     if (!this.state.isLoadingMore) {
-      this.setState({isLoadingMore: true});
+      this.setState({ isLoadingMore: true });
       try {
         const result = await this.props.loadMore(this.props.activeTab);
-        this.setState({isLoadingMore: false});
+        this.setState({ isLoadingMore: false });
         return result;
-      }
-      catch (e) {
-        this.setState({isLoadingMore: false});
+      } catch (e) {
+        this.setState({ isLoadingMore: false });
         throw e;
       }
     }
     return false;
-  }
+  };
 
   componentWillUnmount() {
     key.unbind('s');
@@ -112,23 +120,32 @@ class Moderation extends Component {
     key.unbind('t');
     key.unbind('f');
     key.unbind('d');
-    this.getMenuItems()
-      .forEach((menuItem, idx) => key.unbind(`${idx + 1}`));
+    this.getMenuItems().forEach((menuItem, idx) => key.unbind(`${idx + 1}`));
   }
 
-  render () {
-    const {root, data, moderation, viewUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
-    const {asset} = root;
+  render() {
+    const {
+      root,
+      data,
+      moderation,
+      viewUserDetail,
+      activeTab,
+      getModPath,
+      queueConfig,
+      handleCommentChange,
+      ...props
+    } = this.props;
+    const { asset } = root;
     const assetId = asset && asset.id;
 
     const comments = root[activeTab];
 
     const activeTabCount = this.getActiveTabCount();
-    const menuItems = Object.keys(queueConfig).map((queue) => ({
+    const menuItems = Object.keys(queueConfig).map(queue => ({
       key: queue,
       name: queueConfig[queue].name,
       icon: queueConfig[queue].icon,
-      count: root[`${queue}Count`]
+      count: root[`${queue}Count`],
     }));
 
     return (
@@ -145,7 +162,9 @@ class Moderation extends Component {
           items={menuItems}
           activeTab={activeTab}
         />
-        <div className={cn(styles.container, 'talk-admin-moderation-container')}>
+        <div
+          className={cn(styles.container, 'talk-admin-moderation-container')}
+        >
           <ViewOptions
             selectSort={this.props.setSortOrder}
             sort={this.props.moderation.sortOrder}
@@ -160,8 +179,6 @@ class Moderation extends Component {
             activeTab={activeTab}
             singleView={moderation.singleView}
             selectedCommentId={moderation.selectedCommentId}
-            showBanUserDialog={props.showBanUserDialog}
-            showSuspendUserDialog={props.showSuspendUserDialog}
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment}
             loadMore={this.loadMore}
@@ -189,10 +206,10 @@ class Moderation extends Component {
         />
         <Slot
           data={data}
-          queryData={{root, asset}}
+          queryData={{ root, asset }}
           activeTab={activeTab}
           handleCommentChange={handleCommentChange}
-          fill='adminModeration'
+          fill="adminModeration"
         />
       </div>
     );
@@ -213,8 +230,6 @@ Moderation.propTypes = {
   commentBelongToQueue: PropTypes.func.isRequired,
   handleCommentChange: PropTypes.func.isRequired,
   setSortOrder: PropTypes.func.isRequired,
-  showBanUserDialog: PropTypes.func.isRequired,
-  showSuspendUserDialog: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   loadMore: PropTypes.func.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationHeader.js b/client/coral-admin/src/routes/Moderation/components/ModerationHeader.js
index 0fd47ebf6..803377c9f 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationHeader.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationHeader.js
@@ -1,20 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Icon} from 'coral-ui';
+import { Icon } from 'coral-ui';
 import styles from './ModerationHeader.css';
 import t from 'coral-framework/services/i18n';
 
-const ModerationHeader = ({asset, searchVisible, openSearch, closeSearch}) => {
-
+const ModerationHeader = ({
+  asset,
+  searchVisible,
+  openSearch,
+  closeSearch,
+}) => {
   const trigger = searchVisible ? closeSearch : openSearch;
-  const searchTriggerIcon = <Icon className={styles.searchTrigger} name={searchVisible ? 'arrow_drop_up' : 'arrow_drop_down'} />;
+  const searchTriggerIcon = (
+    <Icon
+      className={styles.searchTrigger}
+      name={searchVisible ? 'arrow_drop_up' : 'arrow_drop_down'}
+    />
+  );
 
-  const title = asset
-    ? <a onClick={trigger} className="mdl-tabs__tab">{asset.title} {searchTriggerIcon}</a>
-    : <a onClick={trigger} className="mdl-tabs__tab">{t('modqueue.all_streams')} {searchTriggerIcon}</a>;
+  const title = asset ? (
+    <a onClick={trigger} className="mdl-tabs__tab">
+      {asset.title} {searchTriggerIcon}
+    </a>
+  ) : (
+    <a onClick={trigger} className="mdl-tabs__tab">
+      {t('modqueue.all_streams')} {searchTriggerIcon}
+    </a>
+  );
 
   return (
-    <div className=''>
+    <div className="">
       <div className={`mdl-tabs ${styles.header}`}>
         <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
           {title}
@@ -27,7 +42,7 @@ const ModerationHeader = ({asset, searchVisible, openSearch, closeSearch}) => {
 ModerationHeader.propTypes = {
   asset: PropTypes.shape({
     title: PropTypes.string,
-    id: PropTypes.string
+    id: PropTypes.string,
   }),
   openSearch: PropTypes.func.isRequired,
   closeSearch: PropTypes.func.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationLayout.js b/client/coral-admin/src/routes/Moderation/components/ModerationLayout.js
index 4b921b515..e8e3f58f5 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationLayout.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationLayout.js
@@ -1,11 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ModerationLayout = (props) => (
-  <div>
-    {props.children}
-  </div>
-);
+const ModerationLayout = props => <div>{props.children}</div>;
 
 ModerationLayout.propTypes = {
   children: PropTypes.node,
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationMenu.js b/client/coral-admin/src/routes/Moderation/components/ModerationMenu.js
index b43d97822..75a274eb3 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationMenu.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationMenu.js
@@ -2,29 +2,39 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import CountBadge from '../../../components/CountBadge';
 import styles from './ModerationMenu.css';
-import {Icon} from 'coral-ui';
-import {Link} from 'react-router';
+import { Icon } from 'coral-ui';
+import { Link } from 'react-router';
 import cn from 'classnames';
 
-const ModerationMenu = ({
-  asset = {},
-  items,
-  getModPath,
-  activeTab
-}) => {
+const ModerationMenu = ({ asset = {}, items, getModPath, activeTab }) => {
   return (
     <div className="mdl-tabs">
-      <div className={cn('mdl-tabs__tab-bar', styles.tabBar, 'talk-admin-moderation-menu-tabbar')}>
-        <div className={cn(styles.tabBarContainer, 'talk-admin-moderation-menu-tabbar-container')}>
-          {items.map((queue) =>
+      <div
+        className={cn(
+          'mdl-tabs__tab-bar',
+          styles.tabBar,
+          'talk-admin-moderation-menu-tabbar'
+        )}
+      >
+        <div
+          className={cn(
+            styles.tabBarContainer,
+            'talk-admin-moderation-menu-tabbar-container'
+          )}
+        >
+          {items.map(queue => (
             <Link
               key={queue.key}
               to={getModPath(queue.key, asset.id)}
-              className={cn('mdl-tabs__tab', styles.tab, {[styles.active]: activeTab === queue.key})}
-              activeClassName={styles.active}>
-              <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name} <CountBadge count={queue.count} />
+              className={cn('mdl-tabs__tab', styles.tab, {
+                [styles.active]: activeTab === queue.key,
+              })}
+              activeClassName={styles.active}
+            >
+              <Icon name={queue.icon} className={styles.tabIcon} /> {queue.name}{' '}
+              <CountBadge count={queue.count} />
             </Link>
-          )}
+          ))}
         </div>
       </div>
     </div>
@@ -34,7 +44,7 @@ const ModerationMenu = ({
 ModerationMenu.propTypes = {
   items: PropTypes.array.isRequired,
   asset: PropTypes.shape({
-    id: PropTypes.string
+    id: PropTypes.string,
   }),
   getModPath: PropTypes.func.isRequired,
   activeTab: PropTypes.string.isRequired,
diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index 83678a4c1..ce957b82d 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -7,11 +7,16 @@ import EmptyCard from '../../../components/EmptyCard';
 import AutoLoadMore from './AutoLoadMore';
 import ViewMore from './ViewMore';
 import t from 'coral-framework/services/i18n';
-import {WindowScroller, CellMeasurer, CellMeasurerCache, List} from 'react-virtualized';
+import {
+  WindowScroller,
+  CellMeasurer,
+  CellMeasurerCache,
+  List,
+} from 'react-virtualized';
 import throttle from 'lodash/throttle';
 import key from 'keymaster';
 
-const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
+const hasComment = (nodes, id) => nodes.some(node => node.id === id);
 
 // resetCursors will return the id cursors of the first and second comment of
 // the current comment The spare cursor functions as a backup in case one
@@ -26,7 +31,7 @@ function resetCursors(state, props) {
     }
   }
   const view = getVisibleComments(props.comments, idCursors[0]);
-  return {idCursors, view};
+  return { idCursors, view };
 }
 
 // invalidateCursor is called whenever a comment is removed which is referenced
@@ -37,7 +42,7 @@ function invalidateCursor(invalidated, state, props) {
   const idCursors = [];
   if (state.idCursors[alt]) {
     idCursors.push(state.idCursors[alt]);
-    const index = props.comments.findIndex((node) => node.id === idCursors[0]);
+    const index = props.comments.findIndex(node => node.id === idCursors[0]);
     const nextInLine = props.comments[index + 1];
     if (nextInLine) {
       idCursors.push(nextInLine.id);
@@ -49,14 +54,13 @@ function invalidateCursor(invalidated, state, props) {
 // getVisibileComments returns a list containing comments
 // which comes after the `idCursor`.
 function getVisibleComments(comments, idCursor) {
-
   if (!comments) {
     return [];
   }
 
   const view = [];
   let pastCursor = false;
-  comments.forEach((comment) => {
+  comments.forEach(comment => {
     if (comment.id === idCursor) {
       pastCursor = true;
     }
@@ -76,7 +80,7 @@ let keyMapper = null;
 const cache = new CellMeasurerCache({
   fixedWidth: true,
   defaultHeight: 250,
-  keyMapper: (index) => keyMapper(index),
+  keyMapper: index => keyMapper(index),
 });
 
 class ModerationQueue extends React.Component {
@@ -93,12 +97,11 @@ class ModerationQueue extends React.Component {
     };
 
     // Set keyMapper to map to comment ids.
-    keyMapper = (index) => {
+    keyMapper = index => {
       const view = this.state.view;
       if (index < view.length) {
         return view[index].id;
-      }
-      else if (index === view.length) {
+      } else if (index === view.length) {
         return 'loadMore';
       }
       throw new Error(`unknown index ${index}`);
@@ -129,11 +132,14 @@ class ModerationQueue extends React.Component {
   }
 
   componentWillReceiveProps(next) {
-    const {comments: prevComments} = this.props;
-    const {comments: nextComments} = next;
+    const { comments: prevComments } = this.props;
+    const { comments: nextComments } = next;
 
     // New comments where added and our cursor list is incomplete.
-    if (this.state.idCursors.length < 2 && nextComments.length > this.state.idCursors.length) {
+    if (
+      this.state.idCursors.length < 2 &&
+      nextComments.length > this.state.idCursors.length
+    ) {
       this.setState(resetCursors(this.state, next));
       return;
     }
@@ -142,17 +148,23 @@ class ModerationQueue extends React.Component {
 
     // Comments have been removed.
     if (
-      prevComments && nextComments &&
+      prevComments &&
+      nextComments &&
       nextComments.length < prevComments.length
     ) {
-
       // Invalidate first cursor if referenced comment was removed.
-      if (this.state.idCursors[0] && !hasComment(nextComments, this.state.idCursors[0])) {
+      if (
+        this.state.idCursors[0] &&
+        !hasComment(nextComments, this.state.idCursors[0])
+      ) {
         idCursors = invalidateCursor(0, this.state, next);
       }
 
       // Invalidate second cursor if referenced comment was removed.
-      if (this.state.idCursors[1] && !hasComment(nextComments, this.state.idCursors[1])) {
+      if (
+        this.state.idCursors[1] &&
+        !hasComment(nextComments, this.state.idCursors[1])
+      ) {
         idCursors = invalidateCursor(1, this.state, next);
       }
 
@@ -165,10 +177,12 @@ class ModerationQueue extends React.Component {
         let nextSelectedCommentId = null;
 
         // Determine a comment to select.
-        const prevIndex = view.findIndex((comment) => comment.id === this.props.selectedCommentId);
+        const prevIndex = view.findIndex(
+          comment => comment.id === this.props.selectedCommentId
+        );
         if (prevIndex !== view.length - 1) {
           nextSelectedCommentId = view[prevIndex + 1].id;
-        } else if(prevIndex > 0) {
+        } else if (prevIndex > 0) {
           nextSelectedCommentId = view[prevIndex - 1].id;
         }
         this.props.selectCommentId(nextSelectedCommentId);
@@ -178,26 +192,29 @@ class ModerationQueue extends React.Component {
     // Comments changed.
     if (prevComments !== nextComments) {
       const nextView = getVisibleComments(nextComments, idCursors[0]);
-      this.setState({idCursors, view: nextView});
+      this.setState({ idCursors, view: nextView });
 
       // TODO: removing or adding a comment from the list seems to render incorrect, is this a bug?
       // Find first changed comment and perform a reflow.
-      const index = this.state.view.findIndex((comment, i) => !nextView[i] || nextView[i].id !== comment.id);
+      const index = this.state.view.findIndex(
+        (comment, i) => !nextView[i] || nextView[i].id !== comment.id
+      );
       this.reflowList(index);
     }
   }
 
-  componentDidUpdate (prev) {
-    const {commentCount, selectedCommentId} = this.props;
+  componentDidUpdate(prev) {
+    const { commentCount, selectedCommentId } = this.props;
 
     const switchedToMultiMode = prev.singleView && !this.props.singleView;
     const switchedMode = prev.singleView !== this.props.singleView;
-    const selectedDifferentComment = prev.selectedCommentId !== selectedCommentId && selectedCommentId;
-    const moderatedLastComment = prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0;
+    const selectedDifferentComment =
+      prev.selectedCommentId !== selectedCommentId && selectedCommentId;
+    const moderatedLastComment =
+      prev.comments.length > 0 && this.getCommentCountWithoutDagling() === 0;
     const hasMoreComment = commentCount > 0;
 
     if (switchedToMultiMode) {
-
       // Reflow virtual list.
       this.reflowList();
     }
@@ -213,13 +230,20 @@ class ModerationQueue extends React.Component {
 
   // Returns comment counts without dangling comments.
   getCommentCountWithoutDagling(props = this.props) {
-    return props.comments.filter((comment) => props.commentBelongToQueue(props.activeTab, comment)).length;
+    return props.comments.filter(comment =>
+      props.commentBelongToQueue(props.activeTab, comment)
+    ).length;
   }
 
   async selectDown() {
     const view = this.state.view;
-    const index = view.findIndex(({id}) => id === this.props.selectedCommentId);
-    if (index === view.length - 1 && this.getCommentCountWithoutDagling() !== this.props.commentCount) {
+    const index = view.findIndex(
+      ({ id }) => id === this.props.selectedCommentId
+    );
+    if (
+      index === view.length - 1 &&
+      this.getCommentCountWithoutDagling() !== this.props.commentCount
+    ) {
       await this.props.loadMore();
       this.selectDown();
       return;
@@ -231,7 +255,9 @@ class ModerationQueue extends React.Component {
 
   selectUp() {
     const view = this.state.view;
-    const index = view.findIndex(({id}) => id === this.props.selectedCommentId);
+    const index = view.findIndex(
+      ({ id }) => id === this.props.selectedCommentId
+    );
 
     if (index === 0 && view.length < this.props.comments.length) {
       this.viewNewComments(() => this.selectUp());
@@ -242,43 +268,43 @@ class ModerationQueue extends React.Component {
     }
   }
 
-  handleListRef = (list) => {
+  handleListRef = list => {
     this.listRef = list;
   };
 
   scrollToSelectedComment = (props = this.props, state = this.state) => {
     if (props.singleMode) {
-      document.querySelector(`#comment_${props.selectedCommentId}`).scrollIntoView();
-    }
-    else if(this.listRef) {
+      document
+        .querySelector(`#comment_${props.selectedCommentId}`)
+        .scrollIntoView();
+    } else if (this.listRef) {
       const view = state.view;
-      const index = view.findIndex(({id}) => id === props.selectedCommentId);
+      const index = view.findIndex(({ id }) => id === props.selectedCommentId);
       this.listRef.scrollToRow(index);
     }
-  }
+  };
 
-  viewNewComments = (callback) => {
+  viewNewComments = callback => {
     this.setState(resetCursors, () => {
       this.reflowList();
       callback && callback();
     });
   };
 
-  reflowList = throttle((index) => {
+  reflowList = throttle(index => {
     if (index >= 0) {
       cache.clear(index);
       this.listRef && this.listRef.recomputeRowHeights(index);
-    }
-    else {
+    } else {
       cache.clearAll();
       this.listRef && this.listRef.recomputeRowHeights();
     }
   }, 500);
 
   rowRenderer = ({
-    index,       // Index of row within collection
+    index, // Index of row within collection
     parent,
-    style        // Style object to be applied to row (to position it)
+    style, // Style object to be applied to row (to position it)
   }) => {
     const view = this.state.view;
     const rowCount = view.length + 1;
@@ -291,43 +317,41 @@ class ModerationQueue extends React.Component {
     if (index === rowCount - 1) {
       key = 'end-of-comment-list';
       child = (
-        <div
-          style={style}
-          id={'end-of-comment-list'}
-        >
-          {this.props.hasNextPage && <AutoLoadMore
-            loadMore={this.props.loadMore}
-            loading={this.props.isLoadingMore}
-          />}
+        <div style={style} id={'end-of-comment-list'}>
+          {this.props.hasNextPage && (
+            <AutoLoadMore
+              loadMore={this.props.loadMore}
+              loading={this.props.isLoadingMore}
+            />
+          )}
         </div>
       );
-    }
-    else {
+    } else {
       const comment = view[index];
 
       // Use callback cache so not to change the identity of these arrow functions.
       // Otherwise shallow compare will fail to optimize.
       if (!this.callbackCaches.clearHeightCache[index]) {
-        this.callbackCaches.clearHeightCache[index] = () => this.reflowList(index);
+        this.callbackCaches.clearHeightCache[index] = () =>
+          this.reflowList(index);
       }
       if (!this.callbackCaches.selectCommentId[comment.id]) {
-        this.callbackCaches.selectCommentId[comment.id] = () => this.props.selectCommentId(comment.id);
+        this.callbackCaches.selectCommentId[comment.id] = () =>
+          this.props.selectCommentId(comment.id);
       }
 
       key = comment.id;
       child = (
-        <div
-          style={style}
-        >
+        <div style={style}>
           <Comment
             data={this.props.data}
             root={this.props.root}
             comment={comment}
-            dangling={!this.props.commentBelongToQueue(this.props.activeTab, comment)}
+            dangling={
+              !this.props.commentBelongToQueue(this.props.activeTab, comment)
+            }
             selected={comment.id === this.props.selectedCommentId}
             viewUserDetail={this.props.viewUserDetail}
-            showBanUserDialog={this.props.showBanUserDialog}
-            showSuspendUserDialog={this.props.showSuspendUserDialog}
             acceptComment={this.props.acceptComment}
             rejectComment={this.props.rejectComment}
             currentAsset={this.props.currentAsset}
@@ -352,7 +376,7 @@ class ModerationQueue extends React.Component {
     );
   };
 
-  render () {
+  render() {
     const {
       comments,
       selectedCommentId,
@@ -370,7 +394,9 @@ class ModerationQueue extends React.Component {
     }
 
     if (singleView) {
-      const index = comments.findIndex((comment) => comment.id === selectedCommentId);
+      const index = comments.findIndex(
+        comment => comment.id === selectedCommentId
+      );
       const comment = comments[index];
       return (
         <div className={styles.root}>
@@ -381,13 +407,13 @@ class ModerationQueue extends React.Component {
             comment={comment}
             selected={true}
             viewUserDetail={viewUserDetail}
-            showBanUserDialog={props.showBanUserDialog}
-            showSuspendUserDialog={props.showSuspendUserDialog}
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment}
             currentAsset={props.currentAsset}
             currentUserId={this.props.currentUserId}
-            dangling={!this.props.commentBelongToQueue(this.props.activeTab, comment)}
+            dangling={
+              !this.props.commentBelongToQueue(this.props.activeTab, comment)
+            }
           />;
         </div>
       );
@@ -402,7 +428,7 @@ class ModerationQueue extends React.Component {
           count={comments.length - view.length}
         />
         <WindowScroller onResize={this.reflowList}>
-          {({height, isScrolling, onChildScroll, scrollTop}) => (
+          {({ height, isScrolling, onChildScroll, scrollTop }) => (
             <List
               ref={this.handleListRef}
               autoHeight
@@ -428,18 +454,16 @@ class ModerationQueue extends React.Component {
 }
 
 ModerationQueue.propTypes = {
+  selectCommentId: PropTypes.func.isRequired,
+  selectedCommentId: PropTypes.string,
   viewUserDetail: PropTypes.func.isRequired,
   currentAsset: PropTypes.object,
-  showBanUserDialog: PropTypes.func.isRequired,
-  selectCommentId: PropTypes.func.isRequired,
-  showSuspendUserDialog: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   commentBelongToQueue: PropTypes.func.isRequired,
   cleanUpQueue: PropTypes.func.isRequired,
   commentCount: PropTypes.number.isRequired,
   loadMore: PropTypes.func.isRequired,
-  selectedCommentId: PropTypes.string,
   singleView: PropTypes.bool,
   isLoadingMore: PropTypes.bool,
   hasNextPage: PropTypes.bool,
diff --git a/client/coral-admin/src/routes/Moderation/components/NotFoundAsset.js b/client/coral-admin/src/routes/Moderation/components/NotFoundAsset.js
index 820bff81c..90f10b943 100644
--- a/client/coral-admin/src/routes/Moderation/components/NotFoundAsset.js
+++ b/client/coral-admin/src/routes/Moderation/components/NotFoundAsset.js
@@ -1,13 +1,17 @@
 import React from 'react';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 import styles from './NotFoundAsset.css';
 import PropTypes from 'prop-types';
 
-const NotFound = (props) => (
+const NotFound = props => (
   <div className={`mdl-card mdl-shadow--2dp ${styles.notFound}`}>
     <p>
-      The provided asset id <Link to={`/admin/moderate/${props.assetId}`}>{props.assetId}</Link> does not exist.
-      <Link className={styles.goToStreams} to="/admin/stories">Go to Streams</Link>
+      The provided asset id{' '}
+      <Link to={`/admin/moderate/${props.assetId}`}>{props.assetId}</Link> does
+      not exist.
+      <Link className={styles.goToStreams} to="/admin/stories">
+        Go to Streams
+      </Link>
     </p>
   </div>
 );
diff --git a/client/coral-admin/src/routes/Moderation/components/Story.js b/client/coral-admin/src/routes/Moderation/components/Story.js
index 6720124c7..7624f9549 100644
--- a/client/coral-admin/src/routes/Moderation/components/Story.js
+++ b/client/coral-admin/src/routes/Moderation/components/Story.js
@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './Story.css';
 
-const formatDate = (date) => {
+const formatDate = date => {
   const d = new Date(date);
   return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
 };
 
-const Story = ({author, title, createdAt, open, id, goToStory}) => {
+const Story = ({ author, title, createdAt, open, id, goToStory }) => {
   return (
     <li className={styles.story} onClick={() => goToStory(id)}>
       <span className={styles.title}>{title}</span>
diff --git a/client/coral-admin/src/routes/Moderation/components/StorySearch.js b/client/coral-admin/src/routes/Moderation/components/StorySearch.js
index 512ec542f..011f49d5e 100644
--- a/client/coral-admin/src/routes/Moderation/components/StorySearch.js
+++ b/client/coral-admin/src/routes/Moderation/components/StorySearch.js
@@ -1,17 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './StorySearch.css';
-import {Button, Spinner, Icon} from 'coral-ui';
+import { Button, Spinner, Icon } from 'coral-ui';
 import Story from './Story';
 
-const StorySearch = (props) => {
-
-  const {
-    root: {
-      assets,
-    },
-    data: {loading}
-  } = props;
+const StorySearch = props => {
+  const { root: { assets }, data: { loading } } = props;
 
   if (!props.moderation.storySearchVisible) {
     return null;
@@ -19,7 +13,11 @@ const StorySearch = (props) => {
 
   return (
     <div>
-      <div className={styles.container} role='alertdialog' onKeyDown={props.handleEsc}>
+      <div
+        className={styles.container}
+        role="alertdialog"
+        onKeyDown={props.handleEsc}
+      >
         <div className={styles.positionShim}>
           <div className={styles.headInput}>
             <input
@@ -30,42 +28,47 @@ const StorySearch = (props) => {
               autoFocus
             />
             <Button
-              cStyle='blue'
+              cStyle="blue"
               className={styles.searchButton}
               onClick={props.search}
-              raised >
+              raised
+            >
               Search
             </Button>
           </div>
           <div className={styles.results}>
-            {props.assetId &&
+            {props.assetId && (
               <div className={styles.cta}>
-                <a onClick={props.goToModerateAll}>Moderate comments on All Stories</a>
+                <a onClick={props.goToModerateAll}>
+                  Moderate comments on All Stories
+                </a>
               </div>
-            }
+            )}
             <div className={styles.storyList}>
+              {props.moderation.storySearchString ? (
+                <div className={styles.searchResults}>
+                  <Icon name="search" />
+                  <span className={styles.headlineRecent}>Search Results</span>
+                </div>
+              ) : (
+                <div className={styles.searchResults}>
+                  <Icon name="access_time" />
+                  <span className={styles.headlineRecent}>
+                    Most Recent Stories
+                  </span>
+                </div>
+              )}
 
-              {
-                props.moderation.storySearchString ? (
-                  <div className={styles.searchResults}>
-                    <Icon name="search" />
-                    <span className={styles.headlineRecent}>Search Results</span>
-                  </div>
-                ) : (
-                  <div className={styles.searchResults}>
-                    <Icon name="access_time" />
-                    <span className={styles.headlineRecent}>Most Recent Stories</span>
-                  </div>
-                )
-              }
+              {loading ? (
+                <Spinner />
+              ) : (
+                assets.nodes.map((story, i) => {
+                  const storyOpen =
+                    story.closedAt === null ||
+                    new Date(story.closedAt) > new Date();
 
-              {
-                loading
-                  ? <Spinner />
-                  : assets.nodes.map((story, i) => {
-                    const storyOpen = story.closedAt === null || new Date(story.closedAt) > new Date();
-
-                    return <Story
+                  return (
+                    <Story
                       key={i}
                       id={story.id}
                       title={story.title}
@@ -73,11 +76,14 @@ const StorySearch = (props) => {
                       open={storyOpen}
                       author={story.author}
                       goToStory={props.goToStory}
-                    />;
-                  })
-              }
+                    />
+                  );
+                })
+              )}
 
-              {assets.nodes.length === 0 && <div className={styles.noResults}>No results</div>}
+              {assets.nodes.length === 0 && (
+                <div className={styles.noResults}>No results</div>
+              )}
             </div>
           </div>
         </div>
diff --git a/client/coral-admin/src/routes/Moderation/components/ViewMore.js b/client/coral-admin/src/routes/Moderation/components/ViewMore.js
index d7a6f156c..92d6a097e 100644
--- a/client/coral-admin/src/routes/Moderation/components/ViewMore.js
+++ b/client/coral-admin/src/routes/Moderation/components/ViewMore.js
@@ -1,27 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 import styles from './ViewMore.css';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 
-const ViewMore = ({viewMore, count, className, ...rest}) =>
+const ViewMore = ({ viewMore, count, className, ...rest }) => (
   <div {...rest} className={cn(className, styles.viewMoreContainer)}>
-    {
-      count > 0 && <Button
-        className={styles.viewMore}
-        onClick={viewMore}>
+    {count > 0 && (
+      <Button className={styles.viewMore} onClick={viewMore}>
         {count === 1
           ? t('framework.new_count', count, t('framework.comment'))
           : t('framework.new_count', count, t('framework.comments'))}
       </Button>
-    }
-  </div>;
+    )}
+  </div>
+);
 
 ViewMore.propTypes = {
   viewMore: PropTypes.func.isRequired,
   count: PropTypes.number.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
 };
 
 export default ViewMore;
diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
index 68f089c27..c5f167dac 100644
--- a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
+++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
@@ -9,7 +9,7 @@
   height: 144px;
   min-height: auto;
   margin-top: 16px;
-  z-index: 10;
+  z-index: 4;
 
   @media (--tablet) {
     width: 650px;
diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.js b/client/coral-admin/src/routes/Moderation/components/ViewOptions.js
index a65af66a6..3faa56d55 100644
--- a/client/coral-admin/src/routes/Moderation/components/ViewOptions.js
+++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.js
@@ -3,19 +3,22 @@ import PropTypes from 'prop-types';
 import styles from './ViewOptions.css';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
-import {Card, Dropdown, Option} from 'coral-ui';
+import { Card, Dropdown, Option } from 'coral-ui';
 
 class ViewOptions extends React.Component {
   render() {
-
-    const {
-      selectSort,
-      sort
-    } = this.props;
+    const { selectSort, sort } = this.props;
 
     return (
-      <Card className={cn(styles.viewOptions, 'talk-admin-moderation-view-options')}>
-        <h2 className={cn(styles.headline, 'talk-admin-moderation-view-options-headline')}>
+      <Card
+        className={cn(styles.viewOptions, 'talk-admin-moderation-view-options')}
+      >
+        <h2
+          className={cn(
+            styles.headline,
+            'talk-admin-moderation-view-options-headline'
+          )}
+        >
           View Options
         </h2>
         <div className={styles.viewOptionsContent}>
@@ -28,7 +31,8 @@ class ViewOptions extends React.Component {
                 toggleOpenClassName={styles.dropdownToggleOpen}
                 placeholder={t('modqueue.sort')}
                 value={sort}
-                onChange={(sort) => selectSort(sort)}>
+                onChange={sort => selectSort(sort)}
+              >
                 <Option value={'DESC'} label={t('modqueue.newest_first')} />
                 <Option value={'ASC'} label={t('modqueue.oldest_first')} />
               </Dropdown>
@@ -42,7 +46,7 @@ class ViewOptions extends React.Component {
 
 ViewOptions.propTypes = {
   selectSort: PropTypes.func.isRequired,
-  sort: PropTypes.string.isRequired
+  sort: PropTypes.string.isRequired,
 };
 
 export default ViewOptions;
diff --git a/client/coral-admin/src/routes/Moderation/containers/Comment.js b/client/coral-admin/src/routes/Moderation/containers/Comment.js
index 299c7cecb..053fb66db 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Comment.js
@@ -1,9 +1,12 @@
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import Comment from '../components/Comment';
 import CommentLabels from '../../../containers/CommentLabels';
 import CommentDetails from '../../../containers/CommentDetails';
 import withFragments from 'coral-framework/hocs/withFragments';
-import {getSlotFragmentSpreads, getDefinitionName} from 'coral-framework/utils';
+import {
+  getSlotFragmentSpreads,
+  getDefinitionName,
+} from 'coral-framework/utils';
 
 const slots = [
   'adminCommentInfoBar',
@@ -37,7 +40,6 @@ export default withFragments({
       user {
         id
         username
-        status
       }
       asset {
         id
@@ -57,5 +59,5 @@ export default withFragments({
     }
     ${CommentLabels.fragments.comment}
     ${CommentDetails.fragments.comment}
-  `
+  `,
 })(Comment);
diff --git a/client/coral-admin/src/routes/Moderation/containers/Moderation.js b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
index 9ea3baf00..f8db4c42c 100644
--- a/client/coral-admin/src/routes/Moderation/containers/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/containers/Moderation.js
@@ -1,21 +1,23 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {compose, gql} from 'react-apollo';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
 import withQuery from 'coral-framework/hocs/withQuery';
-import {getDefinitionName} from 'coral-framework/utils';
+import { getDefinitionName } from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
 import update from 'immutability-helper';
 import truncate from 'lodash/truncate';
 import NotFoundAsset from '../components/NotFoundAsset';
-import {isPremod, getModPath} from '../../../utils';
+import { isPremod, getModPath } from '../../../utils';
 
-import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import {handleCommentChange, commentBelongToQueue, cleanUpQueue} from '../graphql';
+import { withSetCommentStatus } from 'coral-framework/graphql/mutations';
+import {
+  handleCommentChange,
+  commentBelongToQueue,
+  cleanUpQueue,
+} from '../graphql';
 
-import {showBanUserDialog} from 'actions/banUserDialog';
-import {showSuspendUserDialog} from 'actions/suspendUserDialog';
-import {viewUserDetail} from '../../../actions/userDetail';
+import { viewUserDetail } from '../../../actions/userDetail';
 import {
   toggleModal,
   singleView,
@@ -27,15 +29,15 @@ import {
   selectCommentId,
 } from 'actions/moderation';
 import withQueueConfig from '../hoc/withQueueConfig';
-import {notify} from 'coral-framework/actions/notification';
+import { notify } from 'coral-framework/actions/notification';
 
-import {Spinner} from 'coral-ui';
+import { Spinner } from 'coral-ui';
 import Moderation from '../components/Moderation';
 import Comment from './Comment';
 import baseQueueConfig from '../queueConfig';
 
 function prepareNotificationText(text) {
-  return truncate(text, {length: 50}).replace('\n', ' ');
+  return truncate(text, { length: 50 }).replace('\n', ' ');
 }
 
 function getAssetId(props) {
@@ -67,13 +69,15 @@ class ModerationContainer extends Component {
   };
 
   get activeTab() {
-
-    const {root: {asset, settings}} = this.props;
+    const { root: { asset, settings } } = this.props;
     const id = getAssetId(this.props);
     const tab = getTab(this.props);
 
     // Grab premod from asset or from settings if it's defined.
-    const setting = id && asset && asset.settings ? asset.settings.moderation : settings.moderation;
+    const setting =
+      id && asset && asset.settings
+        ? asset.settings.moderation
+        : settings.moderation;
 
     const queue = isPremod(setting) ? 'premod' : 'new';
     const activeTab = tab ? tab : queue;
@@ -86,64 +90,105 @@ class ModerationContainer extends Component {
       {
         document: COMMENT_ADDED_SUBSCRIPTION,
         variables,
-        updateQuery: (prev, {subscriptionData: {data: {commentAdded: comment}}}) => {
+        updateQuery: (
+          prev,
+          { subscriptionData: { data: { commentAdded: comment } } }
+        ) => {
           return this.handleCommentChange(prev, comment);
         },
       },
       {
         document: COMMENT_ACCEPTED_SUBSCRIPTION,
         variables,
-        updateQuery: (prev, {subscriptionData: {data: {commentAccepted: comment}}}) => {
-          const user = comment.status_history[comment.status_history.length - 1].assigned_by;
-          const notifyText = this.props.auth.user.id === user.id
-            ? ''
-            : t('modqueue.notify_accepted', user.username, prepareNotificationText(comment.body));
+        updateQuery: (
+          prev,
+          { subscriptionData: { data: { commentAccepted: comment } } }
+        ) => {
+          const user =
+            comment.status_history[comment.status_history.length - 1]
+              .assigned_by;
+          const notifyText =
+            this.props.auth.user.id === user.id
+              ? ''
+              : t(
+                  'modqueue.notify_accepted',
+                  user.username,
+                  prepareNotificationText(comment.body)
+                );
           return this.handleCommentChange(prev, comment, notifyText);
         },
       },
       {
         document: COMMENT_REJECTED_SUBSCRIPTION,
         variables,
-        updateQuery: (prev, {subscriptionData: {data: {commentRejected: comment}}}) => {
-          const user = comment.status_history[comment.status_history.length - 1].assigned_by;
-          const notifyText = this.props.auth.user.id === user.id
-            ? ''
-            : t('modqueue.notify_rejected', user.username, prepareNotificationText(comment.body));
+        updateQuery: (
+          prev,
+          { subscriptionData: { data: { commentRejected: comment } } }
+        ) => {
+          const user =
+            comment.status_history[comment.status_history.length - 1]
+              .assigned_by;
+          const notifyText =
+            this.props.auth.user.id === user.id
+              ? ''
+              : t(
+                  'modqueue.notify_rejected',
+                  user.username,
+                  prepareNotificationText(comment.body)
+                );
           return this.handleCommentChange(prev, comment, notifyText);
         },
       },
       {
         document: COMMENT_RESET_SUBSCRIPTION,
         variables,
-        updateQuery: (prev, {subscriptionData: {data: {commentReset: comment}}}) => {
-          const user = comment.status_history[comment.status_history.length - 1].assigned_by;
-          const notifyText = this.props.auth.user.id === user.id
-            ? ''
-            : t('modqueue.notify_reset', user.username, prepareNotificationText(comment.body));
+        updateQuery: (
+          prev,
+          { subscriptionData: { data: { commentReset: comment } } }
+        ) => {
+          const user =
+            comment.status_history[comment.status_history.length - 1]
+              .assigned_by;
+          const notifyText =
+            this.props.auth.user.id === user.id
+              ? ''
+              : t(
+                  'modqueue.notify_reset',
+                  user.username,
+                  prepareNotificationText(comment.body)
+                );
           return this.handleCommentChange(prev, comment, notifyText);
         },
       },
       {
         document: COMMENT_EDITED_SUBSCRIPTION,
         variables,
-        updateQuery: (prev, {subscriptionData: {data: {commentEdited: comment}}}) => {
+        updateQuery: (
+          prev,
+          { subscriptionData: { data: { commentEdited: comment } } }
+        ) => {
           return this.handleCommentChange(prev, comment);
         },
       },
       {
         document: COMMENT_FLAGGED_SUBSCRIPTION,
         variables,
-        updateQuery: (prev, {subscriptionData: {data: {commentFlagged: comment}}}) => {
+        updateQuery: (
+          prev,
+          { subscriptionData: { data: { commentFlagged: comment } } }
+        ) => {
           return this.handleCommentChange(prev, comment);
         },
       },
     ];
 
-    this.subscriptions = parameters.map((param) => this.props.data.subscribeToMoreThrottled(param));
+    this.subscriptions = parameters.map(param =>
+      this.props.data.subscribeToMoreThrottled(param)
+    );
   }
 
   unsubscribe() {
-    this.subscriptions.forEach((unsubscribe) => unsubscribe());
+    this.subscriptions.forEach(unsubscribe => unsubscribe());
     this.subscriptions = [];
   }
 
@@ -162,34 +207,40 @@ class ModerationContainer extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-
     // Resubscribe when we change between assets.
-    if(this.props.data.variables.asset_id !== nextProps.data.variables.asset_id) {
+    if (
+      this.props.data.variables.asset_id !== nextProps.data.variables.asset_id
+    ) {
       this.resubscribe(nextProps.data.variables);
     }
   }
 
-  cleanUpQueue = (queue) => {
+  cleanUpQueue = queue => {
     if (!this.props.data.loading) {
-      this.props.data.updateQuery((query) => {
-        return cleanUpQueue(query, queue, this.props.moderation.sortOrder, this.props.queueConfig);
+      this.props.data.updateQuery(query => {
+        return cleanUpQueue(
+          query,
+          queue,
+          this.props.moderation.sortOrder,
+          this.props.queueConfig
+        );
       });
     }
-  }
+  };
 
-  acceptComment = ({commentId}) => {
-    return this.props.setCommentStatus({commentId, status: 'ACCEPTED'});
-  }
+  acceptComment = ({ commentId }) => {
+    return this.props.setCommentStatus({ commentId, status: 'ACCEPTED' });
+  };
 
-  rejectComment = ({commentId}) => {
-    return this.props.setCommentStatus({commentId, status: 'REJECTED'});
-  }
+  rejectComment = ({ commentId }) => {
+    return this.props.setCommentStatus({ commentId, status: 'REJECTED' });
+  };
 
   commentBelongToQueue = (queue, comment) => {
     return commentBelongToQueue(queue, comment, this.props.queueConfig);
-  }
+  };
 
-  loadMore = (tab) => {
+  loadMore = tab => {
     const variables = {
       limit: 20,
       cursor: this.props.root[tab].endCursor,
@@ -202,20 +253,20 @@ class ModerationContainer extends Component {
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
       variables,
-      updateQuery: (prev, {fetchMoreResult:{comments}}) => {
+      updateQuery: (prev, { fetchMoreResult: { comments } }) => {
         return update(prev, {
           [tab]: {
-            nodes: {$push: comments.nodes},
-            hasNextPage: {$set: comments.hasNextPage},
-            endCursor: {$set: comments.endCursor},
+            nodes: { $push: comments.nodes },
+            hasNextPage: { $set: comments.hasNextPage },
+            endCursor: { $set: comments.endCursor },
           },
         });
-      }
+      },
     });
   };
 
-  render () {
-    const {root, root: {asset, settings}, data} = this.props;
+  render() {
+    const { root, root: { asset, settings }, data } = this.props;
     const assetId = getAssetId(this.props);
 
     if (data.error) {
@@ -224,20 +275,19 @@ class ModerationContainer extends Component {
 
     if (assetId) {
       if (asset === null) {
-
         // Not found.
         return <NotFoundAsset assetId={assetId} />;
       }
     }
 
-    if(data.loading) {
-
+    if (data.loading) {
       // loading.
       return <Spinner />;
     }
 
-    const premodEnabled = assetId ? isPremod(asset.settings.moderation) :
-      isPremod(settings.moderation);
+    const premodEnabled = assetId
+      ? isPremod(asset.settings.moderation)
+      : isPremod(settings.moderation);
 
     const currentQueueConfig = Object.assign({}, this.props.queueConfig);
 
@@ -249,19 +299,21 @@ class ModerationContainer extends Component {
       delete currentQueueConfig.premod;
     }
 
-    return <Moderation
-      {...this.props}
-      getModPath={getModPath}
-      loadMore={this.loadMore}
-      acceptComment={this.acceptComment}
-      rejectComment={this.rejectComment}
-      activeTab={this.activeTab}
-      queueConfig={currentQueueConfig}
-      handleCommentChange={this.handleCommentChange}
-      selectedCommentId={this.props.selectedCommentId}
-      commentBelongToQueue={this.commentBelongToQueue}
-      cleanUpQueue={this.cleanUpQueue}
-    />;
+    return (
+      <Moderation
+        {...this.props}
+        getModPath={getModPath}
+        loadMore={this.loadMore}
+        acceptComment={this.acceptComment}
+        rejectComment={this.rejectComment}
+        activeTab={this.activeTab}
+        queueConfig={currentQueueConfig}
+        handleCommentChange={this.handleCommentChange}
+        selectedCommentId={this.props.selectedCommentId}
+        commentBelongToQueue={this.commentBelongToQueue}
+        cleanUpQueue={this.cleanUpQueue}
+      />
+    );
   }
 }
 const COMMENT_ADDED_SUBSCRIPTION = gql`
@@ -368,28 +420,57 @@ const commentConnectionFragment = gql`
   ${Comment.fragments.comment}
 `;
 
-const withModQueueQuery = withQuery(({queueConfig}) => gql`
+const withModQueueQuery = withQuery(
+  ({ queueConfig }) => gql`
   query CoralAdmin_Moderation($asset_id: ID, $sortOrder: SORT_ORDER, $allAssets: Boolean!, $nullStatuses: [COMMENT_STATUS!]) {
-    ${Object.keys(queueConfig).map((queue) => `
+    ${Object.keys(queueConfig).map(
+      queue => `
       ${queue}: comments(query: {
-        statuses: ${queueConfig[queue].statuses ? `[${queueConfig[queue].statuses.join(', ')}],` : '$nullStatuses'}
-        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
-        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
+        statuses: ${
+          queueConfig[queue].statuses
+            ? `[${queueConfig[queue].statuses.join(', ')}],`
+            : '$nullStatuses'
+        }
+        ${
+          queueConfig[queue].tags
+            ? `tags: ["${queueConfig[queue].tags.join('", "')}"],`
+            : ''
+        }
+        ${
+          queueConfig[queue].action_type
+            ? `action_type: ${queueConfig[queue].action_type}`
+            : ''
+        }
         asset_id: $asset_id,
         sortOrder: $sortOrder,
         limit: 20,
       }) {
         ...CoralAdmin_Moderation_CommentConnection
       }
-    `)}
-    ${Object.keys(queueConfig).map((queue) => `
+    `
+    )}
+    ${Object.keys(queueConfig).map(
+      queue => `
       ${queue}Count: commentCount(query: {
-        statuses: ${queueConfig[queue].statuses ? `[${queueConfig[queue].statuses.join(', ')}],` : '$nullStatuses'}
-        ${queueConfig[queue].tags ? `tags: ["${queueConfig[queue].tags.join('", "')}"],` : ''}
-        ${queueConfig[queue].action_type ? `action_type: ${queueConfig[queue].action_type}` : ''}
+        statuses: ${
+          queueConfig[queue].statuses
+            ? `[${queueConfig[queue].statuses.join(', ')}],`
+            : '$nullStatuses'
+        }
+        ${
+          queueConfig[queue].tags
+            ? `tags: ["${queueConfig[queue].tags.join('", "')}"],`
+            : ''
+        }
+        ${
+          queueConfig[queue].action_type
+            ? `action_type: ${queueConfig[queue].action_type}`
+            : ''
+        }
         asset_id: $asset_id,
       })
-    `)}
+    `
+    )}
     asset(id: $asset_id) @skip(if: $allAssets) {
       id
       title
@@ -409,46 +490,49 @@ const withModQueueQuery = withQuery(({queueConfig}) => gql`
   }
   ${Comment.fragments.root}
   ${commentConnectionFragment}
-`, {
-  options: (props) => {
-    const id = getAssetId(props);
-    return {
-      variables: {
-        asset_id: id,
-        sortOrder: props.moderation.sortOrder,
-        allAssets: id === null,
-        nullStatuses: null,
-      },
-      fetchPolicy: 'network-only'
-    };
-  },
-});
+`,
+  {
+    options: props => {
+      const id = getAssetId(props);
+      return {
+        variables: {
+          asset_id: id,
+          sortOrder: props.moderation.sortOrder,
+          allAssets: id === null,
+          nullStatuses: null,
+        },
+        fetchPolicy: 'network-only',
+      };
+    },
+  }
+);
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   moderation: state.moderation,
   auth: state.auth,
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  ...bindActionCreators({
-    toggleModal,
-    singleView,
-    showBanUserDialog,
-    hideShortcutsNote,
-    toggleStorySearch,
-    showSuspendUserDialog,
-    viewUserDetail,
-    setSortOrder,
-    storySearchChange,
-    clearState,
-    notify,
-    selectCommentId,
-  }, dispatch),
+const mapDispatchToProps = dispatch => ({
+  ...bindActionCreators(
+    {
+      toggleModal,
+      singleView,
+      hideShortcutsNote,
+      toggleStorySearch,
+      viewUserDetail,
+      setSortOrder,
+      storySearchChange,
+      clearState,
+      notify,
+      selectCommentId,
+    },
+    dispatch
+  ),
 });
 
 export default compose(
   withQueueConfig(baseQueueConfig),
   connect(mapStateToProps, mapDispatchToProps),
   withSetCommentStatus,
-  withModQueueQuery,
+  withModQueueQuery
 )(ModerationContainer);
diff --git a/client/coral-admin/src/routes/Moderation/containers/StorySearch.js b/client/coral-admin/src/routes/Moderation/containers/StorySearch.js
index 04aab2d84..7f0bd639b 100644
--- a/client/coral-admin/src/routes/Moderation/containers/StorySearch.js
+++ b/client/coral-admin/src/routes/Moderation/containers/StorySearch.js
@@ -1,16 +1,16 @@
 import React from 'react';
-import {compose, gql} from 'react-apollo';
+import { compose, gql } from 'react-apollo';
 import StorySearch from '../components/StorySearch';
-import {withRouter} from 'react-router';
+import { withRouter } from 'react-router';
 import withQuery from 'coral-framework/hocs/withQuery';
-import {isEmpty} from 'lodash';
+import isEmpty from 'lodash/isEmpty';
 
 class StorySearchContainer extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      searchValue: props.moderation.storySearchString
+      searchValue: props.moderation.storySearchString,
     };
   }
 
@@ -19,57 +19,57 @@ class StorySearchContainer extends React.Component {
   }
 
   clearSearch = () => {
-    this.setState({searchValue: ''}, () => {
+    this.setState({ searchValue: '' }, () => {
       this.search();
     });
-  }
+  };
 
   clearAndCloseSearch = () => {
     if (!isEmpty(this.state.searchValue)) {
       this.clearSearch();
     }
     this.props.closeSearch();
-  }
+  };
 
-  handleSearchChange = (e) => {
-    const {value} = e.target;
+  handleSearchChange = e => {
+    const { value } = e.target;
     this.setState({
-      searchValue: value
+      searchValue: value,
     });
-  }
+  };
 
-  handleEsc = (e) => {
+  handleEsc = e => {
     if (e.key === 'Escape') {
       e.preventDefault();
       this.clearAndCloseSearch();
     }
-  }
+  };
 
-  handleEnter = (e) => {
+  handleEnter = e => {
     if (e.key === 'Enter') {
       e.preventDefault();
       this.search();
     }
-  }
+  };
 
   search = () => {
-    const {searchValue} = this.state;
+    const { searchValue } = this.state;
     this.props.storySearchChange(searchValue);
-  }
+  };
 
-  goToStory = (id) => {
-    const {router} = this.props;
+  goToStory = id => {
+    const { router } = this.props;
     router.push(`/admin/moderate/${id}`);
     this.clearAndCloseSearch();
-  }
+  };
 
   goToModerateAll = () => {
-    const {router} = this.props;
+    const { router } = this.props;
     router.push('/admin/moderate');
     this.clearAndCloseSearch();
-  }
+  };
 
-  render () {
+  render() {
     return (
       <StorySearch
         search={this.search}
@@ -86,30 +86,30 @@ class StorySearchContainer extends React.Component {
   }
 }
 
-export const withAssetSearchQuery = withQuery(gql`
-  query SearchStories($value: String = "") {
-    assets(query: {value: $value, limit: 10}) {
-      nodes {
-        id
-        title
-        url
-        created_at
-        closedAt
-        author
+export const withAssetSearchQuery = withQuery(
+  gql`
+    query SearchStories($value: String = "") {
+      assets(query: { value: $value, limit: 10 }) {
+        nodes {
+          id
+          title
+          url
+          created_at
+          closedAt
+          author
+        }
       }
     }
-  }
-`, {
-    options: ({moderation: {storySearchString = ''}}) => {
+  `,
+  {
+    options: ({ moderation: { storySearchString = '' } }) => {
       return {
         variables: {
-          value: storySearchString
-        }
+          value: storySearchString,
+        },
       };
-    }
-  });
+    },
+  }
+);
 
-export default compose(
-  withRouter,
-  withAssetSearchQuery
-)(StorySearchContainer);
+export default compose(withRouter, withAssetSearchQuery)(StorySearchContainer);
diff --git a/client/coral-admin/src/routes/Moderation/graphql.js b/client/coral-admin/src/routes/Moderation/graphql.js
index 86bc524b8..56302adfb 100644
--- a/client/coral-admin/src/routes/Moderation/graphql.js
+++ b/client/coral-admin/src/routes/Moderation/graphql.js
@@ -5,15 +5,19 @@ const limit = 10;
 const ascending = (a, b) => {
   const dateA = new Date(a.created_at);
   const dateB = new Date(b.created_at);
-  if (dateA < dateB) { return -1; }
-  if (dateA > dateB) { return 1; }
+  if (dateA < dateB) {
+    return -1;
+  }
+  if (dateA > dateB) {
+    return 1;
+  }
   return 0;
 };
 
 const descending = (a, b) => -ascending(a, b);
 
 function queueHasComment(root, queue, id) {
-  return root[queue].nodes.find((c) => c.id === id);
+  return root[queue].nodes.find(c => c.id === id);
 }
 
 function removeCommentFromQueue(root, queue, id, dangling = false) {
@@ -21,12 +25,12 @@ function removeCommentFromQueue(root, queue, id, dangling = false) {
     return root;
   }
   const changes = {
-    [`${queue}Count`]: {$set: root[`${queue}Count`] - 1},
+    [`${queue}Count`]: { $set: root[`${queue}Count`] - 1 },
   };
 
   if (!dangling) {
     changes[queue] = {
-      nodes: {$apply: (nodes) => nodes.filter((c) => c.id !== id)},
+      nodes: { $apply: nodes => nodes.filter(c => c.id !== id) },
     };
   }
 
@@ -35,7 +39,6 @@ function removeCommentFromQueue(root, queue, id, dangling = false) {
 
 function shouldCommentBeAdded(root, queue, comment, sortOrder) {
   if (root[`${queue}Count`] < limit) {
-
     // Adding all comments until first limit has reached.
     return true;
   }
@@ -51,7 +54,7 @@ function addCommentToQueue(root, queue, comment, sortOrder, cleanup) {
   }
 
   const changes = {
-    [`${queue}Count`]: {$set: root[`${queue}Count`] + 1},
+    [`${queue}Count`]: { $set: root[`${queue}Count`] + 1 },
   };
 
   if (!shouldCommentBeAdded(root, queue, comment, sortOrder)) {
@@ -61,16 +64,14 @@ function addCommentToQueue(root, queue, comment, sortOrder, cleanup) {
   const cursor = new Date(root[queue].startCursor);
   const date = new Date(comment.created_at);
 
-  let append = sortOrder === 'ASC'
-    ? date >= cursor
-    : date <= cursor;
+  let append = sortOrder === 'ASC' ? date >= cursor : date <= cursor;
 
   const nodes = append
     ? root[queue].nodes.concat(comment)
     : [comment].concat(...root[queue].nodes);
 
   changes[queue] = {
-    nodes: {$set: nodes},
+    nodes: { $set: nodes },
   };
 
   const next = update(root, changes);
@@ -92,7 +93,7 @@ function sortComments(nodes, sortOrder) {
  */
 function getCommentQueues(comment, queueConfig) {
   const queues = [];
-  Object.keys(queueConfig).forEach((key) => {
+  Object.keys(queueConfig).forEach(key => {
     if (commentBelongToQueue(key, comment, queueConfig)) {
       queues.push(key);
     }
@@ -104,15 +105,25 @@ function getCommentQueues(comment, queueConfig) {
  * Return whether or not the comment belongs to the queue.
  */
 export function commentBelongToQueue(queue, comment, queueConfig) {
-  const {action_type, statuses, tags} = queueConfig[queue];
+  const { action_type, statuses, tags } = queueConfig[queue];
   let belong = true;
   if (statuses && statuses.indexOf(comment.status) === -1) {
     belong = false;
   }
-  if (tags && (!comment.tags || !comment.tags.some((tagLink) => tags.indexOf(tagLink.tag.name) >= 0))) {
+  if (
+    tags &&
+    (!comment.tags ||
+      !comment.tags.some(tagLink => tags.indexOf(tagLink.tag.name) >= 0))
+  ) {
     belong = false;
   }
-  if (action_type && (!comment.actions || !comment.actions.some((a) => a.__typename.toLowerCase() === `${action_type.toLowerCase()}action`))) {
+  if (
+    action_type &&
+    (!comment.actions ||
+      !comment.actions.some(
+        a => a.__typename.toLowerCase() === `${action_type.toLowerCase()}action`
+      ))
+  ) {
     belong = false;
   }
   return belong;
@@ -123,19 +134,22 @@ function isVisible(id) {
 }
 
 function isEndOfListVisible(root, queue) {
-  return root[queue].nodes.length === 0 || !!document.getElementById('end-of-comment-list');
+  return (
+    root[queue].nodes.length === 0 ||
+    !!document.getElementById('end-of-comment-list')
+  );
 }
 
 function applyCommentChanges(root, comment, queueConfig) {
   const queues = Object.keys(queueConfig);
   for (let i = 0; i < queues.length; i++) {
     const queue = queues[i];
-    const index = root[queue].nodes.findIndex(({id}) => id === comment.id);
+    const index = root[queue].nodes.findIndex(({ id }) => id === comment.id);
     if (index > -1) {
       return update(root, {
         [queue]: {
           nodes: {
-            [index]: {$merge: comment},
+            [index]: { $merge: comment },
           },
         },
       });
@@ -157,13 +171,12 @@ export function cleanUpQueue(root, queue, sortOrder, queueConfig) {
   }
 
   if (queueConfig) {
-    nodes = root[queue].nodes.filter((comment) => commentBelongToQueue(queue, comment, queueConfig));
+    nodes = root[queue].nodes.filter(comment =>
+      commentBelongToQueue(queue, comment, queueConfig)
+    );
   }
 
-  nodes = sortComments(
-    nodes,
-    sortOrder,
-  );
+  nodes = sortComments(nodes, sortOrder);
 
   if (nodes.length > 100) {
     nodes = nodes.slice(0, 100);
@@ -172,9 +185,9 @@ export function cleanUpQueue(root, queue, sortOrder, queueConfig) {
 
   return update(root, {
     [queue]: {
-      nodes: {$set: nodes},
-      endCursor: {$set: nodes[nodes.length - 1].created_at},
-      hasNextPage: {$set: hasNextPage},
+      nodes: { $set: nodes },
+      endCursor: { $set: nodes[nodes.length - 1].created_at },
+      hasNextPage: { $set: hasNextPage },
     },
   });
 }
@@ -189,7 +202,14 @@ export function cleanUpQueue(root, queue, sortOrder, queueConfig) {
  * @param  {Object} queueConfig        queue configuration
  * @return {Object}                    next state of the store
  */
-export function handleCommentChange(root, comment, sortOrder, notify, queueConfig, activeQueue) {
+export function handleCommentChange(
+  root,
+  comment,
+  sortOrder,
+  notify,
+  queueConfig,
+  activeQueue
+) {
   let next = root;
 
   const nextQueues = getCommentQueues(comment, queueConfig);
@@ -203,16 +223,29 @@ export function handleCommentChange(root, comment, sortOrder, notify, queueConfi
     notificationShown = true;
   };
 
-  Object.keys(queueConfig).forEach((queue) => {
+  Object.keys(queueConfig).forEach(queue => {
     if (nextQueues.indexOf(queue) >= 0) {
       if (!queueHasComment(next, queue, comment.id)) {
-        next = addCommentToQueue(next, queue, comment, sortOrder, activeQueue !== queue);
-        if (notify && activeQueue === queue && isEndOfListVisible(root, queue)) {
+        next = addCommentToQueue(
+          next,
+          queue,
+          comment,
+          sortOrder,
+          activeQueue !== queue
+        );
+        if (
+          notify &&
+          activeQueue === queue &&
+          isEndOfListVisible(root, queue)
+        ) {
           showNotificationOnce();
         }
       }
-    } else if(queueHasComment(next, queue, comment.id)){
-      const dangling = activeQueue === queue && comment.status_history[comment.status_history.length - 1].assigned_by.id !== root.me.id;
+    } else if (queueHasComment(next, queue, comment.id)) {
+      const dangling =
+        activeQueue === queue &&
+        comment.status_history[comment.status_history.length - 1].assigned_by
+          .id !== root.me.id;
       next = removeCommentFromQueue(next, queue, comment.id, dangling);
       if (notify && isVisible(comment.id)) {
         showNotificationOnce();
diff --git a/client/coral-admin/src/routes/Moderation/hoc/withQueueConfig.js b/client/coral-admin/src/routes/Moderation/hoc/withQueueConfig.js
index a56051810..baf2a7c3f 100644
--- a/client/coral-admin/src/routes/Moderation/hoc/withQueueConfig.js
+++ b/client/coral-admin/src/routes/Moderation/hoc/withQueueConfig.js
@@ -6,21 +6,24 @@ import PropTypes from 'prop-types';
  * WithQueueConfig takes a `queueConfig` parameter that is
  * passed down as a prop enriched with queue config data from plugins.
  */
-export default (queueConfig) => hoistStatics((WrappedComponent) => {
-  class WithQueueConfig extends React.Component {
-    static contextTypes = {
-      plugins: PropTypes.object,
-    };
+export default queueConfig =>
+  hoistStatics(WrappedComponent => {
+    class WithQueueConfig extends React.Component {
+      static contextTypes = {
+        plugins: PropTypes.object,
+      };
 
-    pluginsConfig = this.context.plugins.getModQueueConfigs();
+      pluginsConfig = this.context.plugins.getModQueueConfigs();
 
-    render() {
-      return <WrappedComponent
-        {...this.props}
-        queueConfig={{...queueConfig, ...this.pluginsConfig}}
-      />;
+      render() {
+        return (
+          <WrappedComponent
+            {...this.props}
+            queueConfig={{ ...queueConfig, ...this.pluginsConfig }}
+          />
+        );
+      }
     }
-  }
 
-  return WithQueueConfig;
-});
+    return WithQueueConfig;
+  });
diff --git a/client/coral-admin/src/routes/Moderation/index.js b/client/coral-admin/src/routes/Moderation/index.js
index e6bef5ef3..49e592561 100644
--- a/client/coral-admin/src/routes/Moderation/index.js
+++ b/client/coral-admin/src/routes/Moderation/index.js
@@ -1,2 +1,2 @@
-export {default as Moderation} from './containers/Moderation';
-export {default as ModerationLayout} from './components/ModerationLayout';
+export { default as Moderation } from './containers/Moderation';
+export { default as ModerationLayout } from './components/ModerationLayout';
diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js
index 933237ab9..f94685fe8 100644
--- a/client/coral-admin/src/routes/Stories/components/Stories.js
+++ b/client/coral-admin/src/routes/Stories/components/Stories.js
@@ -1,94 +1,119 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import cn from 'classnames';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 import PropTypes from 'prop-types';
-import {Dropdown, Option, Paginate, Icon} from 'coral-ui';
-import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl';
+import { Dropdown, Option, Paginate, Icon } from 'coral-ui';
+import { DataTable, TableHeader, RadioGroup, Radio } from 'react-mdl';
 import t from 'coral-framework/services/i18n';
 import styles from './Stories.css';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 
 class Stories extends Component {
-
-  renderDate = (date) => {
+  renderDate = date => {
     const d = new Date(date);
     return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
-  }
+  };
 
-  renderTitle = (title, {id}) =>  <Link to={`/admin/moderate/${id}`}>{title}</Link>
+  renderTitle = (title, { id }) => (
+    <Link to={`/admin/moderate/${id}`}>{title}</Link>
+  );
 
-  renderStatus = (closedAt, {id}) => {
+  renderStatus = (closedAt, { id }) => {
     const closed = !!(closedAt && new Date(closedAt).getTime() < Date.now());
     return (
       <Dropdown
         value={closed}
-        onChange={(value) => this.props.onStatusChange(value, id)}>
+        onChange={value => this.props.onStatusChange(value, id)}
+      >
         <Option value={false} label={t('streams.open')} />
         <Option value={true} label={t('streams.closed')} />
       </Dropdown>
     );
-  }
+  };
 
-  render () {
-    const {assets, searchValue, filter, onSearchChange, onSettingChange, onPageChange, asc} = this.props;
-    const rows = assets.ids.map((id) => assets.byId[id]);
+  render() {
+    const {
+      assets,
+      searchValue,
+      filter,
+      onSearchChange,
+      onSettingChange,
+      onPageChange,
+      asc,
+    } = this.props;
+    const rows = assets.ids.map(id => assets.byId[id]);
 
     return (
       <div className={cn('talk-admin-stories', styles.container)}>
         <div className={styles.leftColumn}>
           <div className={styles.searchBox}>
-            <Icon name='search' className={styles.searchIcon}/>
+            <Icon name="search" className={styles.searchIcon} />
             <input
-              type='text'
+              type="text"
               value={searchValue}
               className={styles.searchBoxInput}
               onChange={onSearchChange}
-              placeholder={t('streams.search')}/>
+              placeholder={t('streams.search')}
+            />
+          </div>
+          <div className={styles.optionHeader}>
+            {t('streams.filter_streams')}
+          </div>
+          <div className={styles.optionDetail}>
+            {t('streams.stream_status')}
           </div>
-          <div className={styles.optionHeader}>{t('streams.filter_streams')}</div>
-          <div className={styles.optionDetail}>{t('streams.stream_status')}</div>
           <RadioGroup
-            name='statusFilter'
+            name="statusFilter"
             value={filter}
-            childContainer='div'
+            childContainer="div"
             onChange={onSettingChange('filter')}
             className={styles.radioGroup}
           >
-            <Radio value='all'>{t('streams.all')}</Radio>
-            <Radio value='open'>{t('streams.open')}</Radio>
-            <Radio value='closed'>{t('streams.closed')}</Radio>
+            <Radio value="all">{t('streams.all')}</Radio>
+            <Radio value="open">{t('streams.open')}</Radio>
+            <Radio value="closed">{t('streams.closed')}</Radio>
           </RadioGroup>
           <div className={styles.optionHeader}>{t('streams.sort_by')}</div>
           <RadioGroup
-            name='sortBy'
+            name="sortBy"
             value={asc}
-            childContainer='div'
+            childContainer="div"
             onChange={onSettingChange('asc')}
             className={styles.radioGroup}
           >
-            <Radio value='false'>{t('streams.newest')}</Radio>
-            <Radio value='true'>{t('streams.oldest')}</Radio>
+            <Radio value="false">{t('streams.newest')}</Radio>
+            <Radio value="true">{t('streams.oldest')}</Radio>
           </RadioGroup>
         </div>
-        {
-          rows.length
-            ? <div className={styles.mainContent}>
-              <DataTable className={styles.streamsTable} rows={rows}>
-                <TableHeader name="title" cellFormatter={this.renderTitle}>{t('streams.article')}</TableHeader>
-                <TableHeader name="publication_date" cellFormatter={this.renderDate}>
-                  {t('streams.pubdate')}
-                </TableHeader>
-                <TableHeader name="closedAt" cellFormatter={this.renderStatus} className={styles.status}>
-                  {t('streams.status')}
-                </TableHeader>
-              </DataTable>
-              <Paginate
-                pageCount={assets.totalPages}
-                page={assets.page - 1}
-                onPageChange={onPageChange} />
-            </div>
-            : <EmptyCard>{t('streams.empty_result')}</EmptyCard>
-        }
+        {rows.length ? (
+          <div className={styles.mainContent}>
+            <DataTable className={styles.streamsTable} rows={rows}>
+              <TableHeader name="title" cellFormatter={this.renderTitle}>
+                {t('streams.article')}
+              </TableHeader>
+              <TableHeader
+                name="publication_date"
+                cellFormatter={this.renderDate}
+              >
+                {t('streams.pubdate')}
+              </TableHeader>
+              <TableHeader
+                name="closedAt"
+                cellFormatter={this.renderStatus}
+                className={styles.status}
+              >
+                {t('streams.status')}
+              </TableHeader>
+            </DataTable>
+            <Paginate
+              pageCount={assets.totalPages}
+              page={assets.page - 1}
+              onPageChange={onPageChange}
+            />
+          </div>
+        ) : (
+          <EmptyCard>{t('streams.empty_result')}</EmptyCard>
+        )}
       </div>
     );
   }
@@ -106,4 +131,3 @@ Stories.propTypes = {
 };
 
 export default Stories;
-
diff --git a/client/coral-admin/src/routes/Stories/containers/Stories.js b/client/coral-admin/src/routes/Stories/containers/Stories.js
index d91bed968..6c54f79d7 100644
--- a/client/coral-admin/src/routes/Stories/containers/Stories.js
+++ b/client/coral-admin/src/routes/Stories/containers/Stories.js
@@ -1,78 +1,86 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import {bindActionCreators} from 'redux';
-import {fetchAssets, updateAssetState, setPage, setSearchValue, setCriteria} from 'coral-admin/src/actions/stories';
+import { bindActionCreators } from 'redux';
+import {
+  fetchAssets,
+  updateAssetState,
+  setPage,
+  setSearchValue,
+  setCriteria,
+} from 'coral-admin/src/actions/stories';
 import Stories from '../components/Stories';
 
 class StoriesContainer extends Component {
-  timer=null;
+  timer = null;
 
-  componentDidMount () {
+  componentDidMount() {
     this.fetchAssets();
   }
 
-  onSearchChange = (e) => {
-    const {value} = e.target;
+  onSearchChange = e => {
+    const { value } = e.target;
 
     this.props.setSearchValue(value);
     clearTimeout(this.timer);
     this.timer = setTimeout(() => {
       this.fetchAssets();
     }, 350);
-  }
+  };
 
-  onSettingChange = (setting) => (e) => {
-    const criteria = {[setting]: e.target.value};
+  onSettingChange = setting => e => {
+    const criteria = { [setting]: e.target.value };
     this.props.setCriteria(criteria);
     this.fetchAssets(criteria);
-  }
+  };
 
-  fetchAssets = (query) => {
-    const {searchValue, asc, filter, limit} = this.props;
+  fetchAssets = query => {
+    const { searchValue, asc, filter, limit } = this.props;
 
     this.props.fetchAssets({
       value: searchValue,
       asc,
       filter,
       limit,
-      ...query
+      ...query,
     });
   };
 
   onStatusChange = async (closeStream, id) => {
-    const {updateAssetState} = this.props;
+    const { updateAssetState } = this.props;
 
     try {
       updateAssetState(id, closeStream ? Date.now() : null);
       this.fetchAssets();
-    } catch(err) {
+    } catch (err) {
       console.error(err);
     }
-  }
+  };
 
-  onPageChange = ({selected}) => {
+  onPageChange = ({ selected }) => {
     const page = selected + 1;
     this.props.setPage(page);
-    this.fetchAssets({page});
-  }
+    this.fetchAssets({ page });
+  };
 
-  render () {
-    return <Stories
-      assets={this.props.assets}
-      searchValue={this.props.searchValue}
-      asc={this.props.asc}
-      filter={this.props.filter}
-      limit={this.props.limit}
-      onPageChange={this.onPageChange}
-      onStatusChange={this.onStatusChange}
-      onSettingChange={this.onSettingChange}
-      onSearchChange={this.onSearchChange}
-    />;
+  render() {
+    return (
+      <Stories
+        assets={this.props.assets}
+        searchValue={this.props.searchValue}
+        asc={this.props.asc}
+        filter={this.props.filter}
+        limit={this.props.limit}
+        onPageChange={this.onPageChange}
+        onStatusChange={this.onStatusChange}
+        onSettingChange={this.onSettingChange}
+        onSearchChange={this.onSearchChange}
+      />
+    );
   }
 }
 
-const mapStateToProps = ({stories}) => ({
+const mapStateToProps = ({ stories }) => ({
   assets: stories.assets,
   searchValue: stories.searchValue,
   asc: stories.criteria.asc,
@@ -80,14 +88,17 @@ const mapStateToProps = ({stories}) => ({
   limit: stories.criteria.limit,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    setPage,
-    setCriteria,
-    setSearchValue,
-    fetchAssets,
-    updateAssetState,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      setPage,
+      setCriteria,
+      setSearchValue,
+      fetchAssets,
+      updateAssetState,
+    },
+    dispatch
+  );
 
 StoriesContainer.propTypes = {
   assets: PropTypes.object,
@@ -103,4 +114,3 @@ StoriesContainer.propTypes = {
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(StoriesContainer);
-
diff --git a/client/coral-admin/src/routes/Stories/index.js b/client/coral-admin/src/routes/Stories/index.js
index 5b2999b21..252181643 100644
--- a/client/coral-admin/src/routes/Stories/index.js
+++ b/client/coral-admin/src/routes/Stories/index.js
@@ -1 +1 @@
-export {default} from './containers/Stories.js';
+export { default } from './containers/Stories.js';
diff --git a/client/coral-admin/src/services/notification.js b/client/coral-admin/src/services/notification.js
index aca5bdc80..90a0685de 100644
--- a/client/coral-admin/src/services/notification.js
+++ b/client/coral-admin/src/services/notification.js
@@ -6,13 +6,13 @@
 export function createNotificationService(toast) {
   return {
     success(msg) {
-      toast(msg, {type: 'success'});
+      toast(msg, { type: 'success' });
     },
     error(msg) {
-      toast(msg, {type: 'error'});
+      toast(msg, { type: 'error' });
     },
     info(msg) {
-      toast(msg, {type: 'info'});
+      toast(msg, { type: 'info' });
     },
   };
 }
diff --git a/client/coral-admin/src/utils/index.js b/client/coral-admin/src/utils/index.js
index f78a7b631..41ff3db3c 100644
--- a/client/coral-admin/src/utils/index.js
+++ b/client/coral-admin/src/utils/index.js
@@ -7,8 +7,7 @@ export function matchLinks(text) {
   return linkify.match(text);
 }
 
-export const isPremod = (mod) => mod === 'PRE';
+export const isPremod = mod => mod === 'PRE';
 
 export const getModPath = (type = 'all', assetId) =>
   assetId ? `/admin/moderate/${type}/${assetId}` : `/admin/moderate/${type}`;
-
diff --git a/client/coral-docs/src/index.js b/client/coral-docs/src/index.js
index e706203a8..d65c6c29e 100644
--- a/client/coral-docs/src/index.js
+++ b/client/coral-docs/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import {render} from 'react-dom';
-import {GraphQLDocs} from 'graphql-docs';
+import { render } from 'react-dom';
+import { GraphQLDocs } from 'graphql-docs';
 
 import fetcher from './services/fetcher';
 
diff --git a/client/coral-docs/src/services/fetcher.js b/client/coral-docs/src/services/fetcher.js
index aec448762..32b412f67 100644
--- a/client/coral-docs/src/services/fetcher.js
+++ b/client/coral-docs/src/services/fetcher.js
@@ -5,6 +5,6 @@ export default function fetcher(query) {
       Accept: 'application/json',
       'Content-Type': 'application/json',
     },
-    body: JSON.stringify({query}),
-  }).then((res) => res.json());
+    body: JSON.stringify({ query }),
+  }).then(res => res.json());
 }
diff --git a/client/coral-embed-stream/src/AppRouter.js b/client/coral-embed-stream/src/AppRouter.js
index 38093abd8..4b101fb61 100644
--- a/client/coral-embed-stream/src/AppRouter.js
+++ b/client/coral-embed-stream/src/AppRouter.js
@@ -1,14 +1,14 @@
 import React from 'react';
-import {Router, Route} from 'react-router';
+import { Router, Route } from 'react-router';
 import PropTypes from 'prop-types';
 
 import Embed from './containers/Embed';
-import {LoginContainer} from 'coral-sign-in/containers/LoginContainer';
+import { LoginContainer } from 'coral-sign-in/containers/LoginContainer';
 
 const routes = (
   <div>
-    <Route exact path="/embed/stream/login" component={LoginContainer}/>
-    <Route path="*" component={Embed}/>
+    <Route exact path="/embed/stream/login" component={LoginContainer} />
+    <Route path="*" component={Embed} />
   </div>
 );
 
diff --git a/client/coral-embed-stream/src/actions/asset.js b/client/coral-embed-stream/src/actions/asset.js
index 1fc9f09f7..158e65594 100644
--- a/client/coral-embed-stream/src/actions/asset.js
+++ b/client/coral-embed-stream/src/actions/asset.js
@@ -1,53 +1,75 @@
 import * as actions from '../constants/asset';
-import {notify} from 'coral-framework/actions/notification';
+import { notify } from 'coral-framework/actions/notification';
 
 import t from 'coral-framework/services/i18n';
 
-export const fetchAssetRequest = () => ({type: actions.FETCH_ASSET_REQUEST});
-export const fetchAssetSuccess = (asset) => ({type: actions.FETCH_ASSET_SUCCESS, asset});
-export const fetchAssetFailure = (error) => ({type: actions.FETCH_ASSET_FAILURE, error});
+export const fetchAssetRequest = () => ({ type: actions.FETCH_ASSET_REQUEST });
+export const fetchAssetSuccess = asset => ({
+  type: actions.FETCH_ASSET_SUCCESS,
+  asset,
+});
+export const fetchAssetFailure = error => ({
+  type: actions.FETCH_ASSET_FAILURE,
+  error,
+});
 
-const updateAssetSettingsRequest = () => ({type: actions.UPDATE_ASSET_SETTINGS_REQUEST});
-const updateAssetSettingsSuccess = (settings) => ({type: actions.UPDATE_ASSET_SETTINGS_SUCCESS, settings});
-const updateAssetSettingsFailure = (error) => ({type: actions.UPDATE_ASSET_SETTINGS_FAILURE, error});
+const updateAssetSettingsRequest = () => ({
+  type: actions.UPDATE_ASSET_SETTINGS_REQUEST,
+});
+const updateAssetSettingsSuccess = settings => ({
+  type: actions.UPDATE_ASSET_SETTINGS_SUCCESS,
+  settings,
+});
+const updateAssetSettingsFailure = error => ({
+  type: actions.UPDATE_ASSET_SETTINGS_FAILURE,
+  error,
+});
 
-export const updateConfiguration = (newConfig) => (dispatch, getState, {rest}) => {
+export const updateConfiguration = newConfig => (
+  dispatch,
+  getState,
+  { rest }
+) => {
   const assetId = getState().asset.id;
   dispatch(updateAssetSettingsRequest());
-  rest(`/assets/${assetId}/settings`, {method: 'PUT', body: newConfig})
+  rest(`/assets/${assetId}/settings`, { method: 'PUT', body: newConfig })
     .then(() => {
       dispatch(notify('success', t('framework.success_update_settings')));
       dispatch(updateAssetSettingsSuccess(newConfig));
     })
-    .catch((error) => {
+    .catch(error => {
       console.error(error);
       dispatch(updateAssetSettingsFailure(error));
     });
 };
 
-export const updateOpenStream = (closedBody) => (dispatch, getState, {rest}) => {
+export const updateOpenStream = closedBody => (
+  dispatch,
+  getState,
+  { rest }
+) => {
   const assetId = getState().asset.id;
   dispatch(fetchAssetRequest());
-  rest(`/assets/${assetId}/status`, {method: 'PUT', body: closedBody})
+  rest(`/assets/${assetId}/status`, { method: 'PUT', body: closedBody })
     .then(() => {
       dispatch(notify('success', t('framework.success_update_settings')));
       dispatch(fetchAssetSuccess(closedBody));
     })
-    .catch((error) => {
+    .catch(error => {
       console.error(error);
       dispatch(fetchAssetFailure(error));
     });
 };
 
-const openStream = () => ({type: actions.OPEN_COMMENTS});
-const closeStream = () => ({type: actions.CLOSE_COMMENTS});
+const openStream = () => ({ type: actions.OPEN_COMMENTS });
+const closeStream = () => ({ type: actions.CLOSE_COMMENTS });
 
-export const updateOpenStatus = (status) => (dispatch) => {
+export const updateOpenStatus = status => dispatch => {
   if (status === 'open') {
     dispatch(openStream());
-    dispatch(updateOpenStream({closedAt: null}));
+    dispatch(updateOpenStream({ closedAt: null }));
   } else {
     dispatch(closeStream());
-    dispatch(updateOpenStream({closedAt: new Date().getTime()}));
+    dispatch(updateOpenStream({ closedAt: new Date().getTime() }));
   }
 };
diff --git a/client/coral-embed-stream/src/actions/auth.js b/client/coral-embed-stream/src/actions/auth.js
index 22d46a768..e74265026 100644
--- a/client/coral-embed-stream/src/actions/auth.js
+++ b/client/coral-embed-stream/src/actions/auth.js
@@ -1,17 +1,21 @@
 import jwtDecode from 'jwt-decode';
 import bowser from 'bowser';
 import * as actions from '../constants/auth';
-import {notify} from 'coral-framework/actions/notification';
-
+import { notify } from 'coral-framework/actions/notification';
 import t from 'coral-framework/services/i18n';
+import get from 'lodash/get';
+
+export const updateStatus = status => ({
+  type: actions.UPDATE_STATUS,
+  status,
+});
 
 export const showSignInDialog = () => ({
   type: actions.SHOW_SIGNIN_DIALOG,
 });
 
-export const hideSignInDialog = () => (dispatch) => {
+export const hideSignInDialog = () => dispatch => {
   if (window.opener && window.opener !== window) {
-
     // TODO: We need to address this when we refactor the
     // login popup out of the embed.
 
@@ -20,11 +24,11 @@ export const hideSignInDialog = () => (dispatch) => {
   } else {
     dispatch(checkLogin());
   }
-  dispatch({type: actions.HIDE_SIGNIN_DIALOG});
+  dispatch({ type: actions.HIDE_SIGNIN_DIALOG });
 };
 
-export const resetSignInDialog = () => (dispatch) => {
-  dispatch({type: actions.HIDE_SIGNIN_DIALOG});
+export const resetSignInDialog = () => dispatch => {
+  dispatch({ type: actions.HIDE_SIGNIN_DIALOG });
 };
 
 export const focusSignInDialog = () => ({
@@ -35,117 +39,89 @@ export const blurSignInDialog = () => ({
   type: actions.BLUR_SIGNIN_DIALOG,
 });
 
-export const createUsernameRequest = () => ({
-  type: actions.CREATE_USERNAME_REQUEST
-});
 export const showCreateUsernameDialog = () => ({
-  type: actions.SHOW_CREATEUSERNAME_DIALOG
+  type: actions.SHOW_CREATEUSERNAME_DIALOG,
 });
+
 export const hideCreateUsernameDialog = () => ({
-  type: actions.HIDE_CREATEUSERNAME_DIALOG
+  type: actions.HIDE_CREATEUSERNAME_DIALOG,
 });
 
-const createUsernameSuccess = () => ({
-  type: actions.CREATE_USERNAME_SUCCESS
-});
-
-const createUsernameFailure = (error) => ({
-  type: actions.CREATE_USERNAME_FAILURE,
-  error
-});
-
-export const updateUsername = ({username}) => ({
+export const updateUsername = username => ({
   type: actions.UPDATE_USERNAME,
-  username
+  username,
 });
 
-export const createUsername = (userId, formData) => (dispatch, _, {rest}) => {
-  dispatch(createUsernameRequest());
-  rest('/account/username', {method: 'PUT', body: formData})
-    .then(() => {
-      dispatch(createUsernameSuccess());
-      dispatch(hideCreateUsernameDialog());
-      dispatch(updateUsername(formData));
-    })
-    .catch((error) => {
-      console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch(createUsernameFailure(errorMessage));
-    });
-};
-
-export const changeView = (view) => (dispatch) => {
+export const changeView = view => dispatch => {
   dispatch({
     type: actions.CHANGE_VIEW,
-    view
+    view,
   });
 
   switch (view) {
-  case 'SIGNUP':
-    window.resizeTo(500, 800);
-    break;
-  case 'FORGOT':
-    window.resizeTo(500, 400);
-    break;
-  default:
-    window.resizeTo(500, 550);
+    case 'SIGNUP':
+      window.resizeTo(500, 800);
+      break;
+    case 'FORGOT':
+      window.resizeTo(500, 400);
+      break;
+    default:
+      window.resizeTo(500, 550);
   }
 };
 
 export const cleanState = () => ({
-  type: actions.CLEAN_STATE
+  type: actions.CLEAN_STATE,
 });
 
 // Sign In Actions
 
-const signInRequest = (email) => ({
+const signInRequest = email => ({
   type: actions.FETCH_SIGNIN_REQUEST,
   email,
 });
 
-const signInFailure = (error) => ({
+const signInFailure = error => ({
   type: actions.FETCH_SIGNIN_FAILURE,
-  error
+  error,
 });
 
 //==============================================================================
 // AUTH TOKEN
 //==============================================================================
 
-export const handleAuthToken = (token) => (dispatch, _, {storage}) => {
+export const handleAuthToken = token => (dispatch, _, { storage }) => {
   if (storage) {
     storage.setItem('exp', jwtDecode(token).exp);
     storage.setItem('token', token);
   }
 
-  dispatch({type: 'HANDLE_AUTH_TOKEN'});
+  dispatch({ type: 'HANDLE_AUTH_TOKEN' });
 };
 
 //==============================================================================
 // SIGN IN
 //==============================================================================
 
-export const fetchSignIn = (formData) => {
-  return (dispatch, _, {rest}) => {
+export const fetchSignIn = formData => {
+  return (dispatch, _, { rest }) => {
     dispatch(signInRequest(formData.email));
 
-    return rest('/auth/local', {method: 'POST', body: formData})
-      .then(({token}) => {
+    return rest('/auth/local', { method: 'POST', body: formData })
+      .then(({ token }) => {
         if (!bowser.safari && !bowser.ios) {
           dispatch(handleAuthToken(token));
         }
         dispatch(hideSignInDialog());
       })
-      .catch((error) => {
+      .catch(error => {
         console.error(error);
         if (error.metadata) {
-
           // the user might not have a valid email. prompt the user user re-request the confirmation email
           dispatch(
             signInFailure(t('error.email_not_verified', error.metadata))
           );
         } else if (error.translation_key === 'NOT_AUTHORIZED') {
-
           // invalid credentials
           dispatch(signInFailure(t('error.email_password'), error.metadata));
         } else {
@@ -160,20 +136,20 @@ export const fetchSignIn = (formData) => {
 //==============================================================================
 
 const signInFacebookRequest = () => ({
-  type: actions.FETCH_SIGNIN_FACEBOOK_REQUEST
+  type: actions.FETCH_SIGNIN_FACEBOOK_REQUEST,
 });
 
-const signInFacebookSuccess = (user) => ({
+const signInFacebookSuccess = user => ({
   type: actions.FETCH_SIGNIN_FACEBOOK_SUCCESS,
-  user
+  user,
 });
 
-const signInFacebookFailure = (error) => ({
+const signInFacebookFailure = error => ({
   type: actions.FETCH_SIGNIN_FACEBOOK_FAILURE,
-  error
+  error,
 });
 
-export const fetchSignInFacebook = () => (dispatch, _, {rest}) => {
+export const fetchSignInFacebook = () => (dispatch, _, { rest }) => {
   dispatch(signInFacebookRequest());
   window.open(
     `${rest.uri}/auth/facebook`,
@@ -187,10 +163,10 @@ export const fetchSignInFacebook = () => (dispatch, _, {rest}) => {
 //==============================================================================
 
 const signUpFacebookRequest = () => ({
-  type: actions.FETCH_SIGNUP_FACEBOOK_REQUEST
+  type: actions.FETCH_SIGNUP_FACEBOOK_REQUEST,
 });
 
-export const fetchSignUpFacebook = () => (dispatch, _, {rest}) => {
+export const fetchSignUpFacebook = () => (dispatch, _, { rest }) => {
   dispatch(signUpFacebookRequest());
   window.open(
     `${rest.uri}/auth/facebook`,
@@ -199,7 +175,7 @@ export const fetchSignUpFacebook = () => (dispatch, _, {rest}) => {
   );
 };
 
-export const facebookCallback = (err, data) => (dispatch) => {
+export const facebookCallback = (err, data) => dispatch => {
   if (err) {
     dispatch(signInFacebookFailure(err));
     return;
@@ -218,25 +194,27 @@ export const facebookCallback = (err, data) => (dispatch) => {
 // SIGN UP
 //==============================================================================
 
-const signUpRequest = () => ({type: actions.FETCH_SIGNUP_REQUEST});
-const signUpSuccess = (user) => ({type: actions.FETCH_SIGNUP_SUCCESS, user});
-const signUpFailure = (error) => ({type: actions.FETCH_SIGNUP_FAILURE, error});
+const signUpRequest = () => ({ type: actions.FETCH_SIGNUP_REQUEST });
+const signUpSuccess = user => ({ type: actions.FETCH_SIGNUP_SUCCESS, user });
+const signUpFailure = error => ({ type: actions.FETCH_SIGNUP_FAILURE, error });
 
-export const fetchSignUp = (formData) => (dispatch, getState, {rest}) => {
+export const fetchSignUp = formData => (dispatch, getState, { rest }) => {
   const redirectUri = getState().auth.redirectUri;
   dispatch(signUpRequest());
 
   rest('/users', {
     method: 'POST',
     body: formData,
-    headers: {'X-Pym-Url': redirectUri}
+    headers: { 'X-Pym-Url': redirectUri },
   })
-    .then(({user}) => {
+    .then(({ user }) => {
       dispatch(signUpSuccess(user));
     })
-    .catch((error) => {
+    .catch(error => {
       console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
       dispatch(signUpFailure(errorMessage));
     });
 };
@@ -246,29 +224,31 @@ export const fetchSignUp = (formData) => (dispatch, getState, {rest}) => {
 //==============================================================================
 
 const forgotPasswordRequest = () => ({
-  type: actions.FETCH_FORGOT_PASSWORD_REQUEST
+  type: actions.FETCH_FORGOT_PASSWORD_REQUEST,
 });
 
 const forgotPasswordSuccess = () => ({
-  type: actions.FETCH_FORGOT_PASSWORD_SUCCESS
+  type: actions.FETCH_FORGOT_PASSWORD_SUCCESS,
 });
 
-const forgotPasswordFailure = (error) => ({
+const forgotPasswordFailure = error => ({
   type: actions.FETCH_FORGOT_PASSWORD_FAILURE,
   error,
 });
 
-export const fetchForgotPassword = (email) => (dispatch, getState, {rest}) => {
+export const fetchForgotPassword = email => (dispatch, getState, { rest }) => {
   dispatch(forgotPasswordRequest(email));
   const redirectUri = getState().auth.redirectUri;
   rest('/account/password/reset', {
     method: 'POST',
-    body: {email, loc: redirectUri}
+    body: { email, loc: redirectUri },
   })
     .then(() => dispatch(forgotPasswordSuccess()))
-    .catch((error) => {
+    .catch(error => {
       console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
       dispatch(forgotPasswordFailure(errorMessage));
     });
 };
@@ -277,8 +257,12 @@ export const fetchForgotPassword = (email) => (dispatch, getState, {rest}) => {
 // LOGOUT
 //==============================================================================
 
-export const logout = () => async (dispatch, _, {rest, client, pym, storage}) => {
-  await rest('/auth', {method: 'DELETE'});
+export const logout = () => async (
+  dispatch,
+  _,
+  { rest, client, pym, storage }
+) => {
+  await rest('/auth', { method: 'DELETE' });
 
   if (storage) {
     storage.removeItem('token');
@@ -287,7 +271,7 @@ export const logout = () => async (dispatch, _, {rest, client, pym, storage}) =>
   // Reset the websocket.
   client.resetWebsocket();
 
-  dispatch({type: actions.LOGOUT});
+  dispatch({ type: actions.LOGOUT });
   pym.sendMessage('coral-auth-changed');
 };
 
@@ -295,24 +279,33 @@ export const logout = () => async (dispatch, _, {rest, client, pym, storage}) =>
 // CHECK LOGIN
 //==============================================================================
 
-const checkLoginRequest = () => ({type: actions.CHECK_LOGIN_REQUEST});
-const checkLoginFailure = (error) => ({type: actions.CHECK_LOGIN_FAILURE, error});
+const checkLoginRequest = () => ({ type: actions.CHECK_LOGIN_REQUEST });
+const checkLoginFailure = error => ({
+  type: actions.CHECK_LOGIN_FAILURE,
+  error,
+});
 
 const checkLoginSuccess = (user, isAdmin) => ({
   type: actions.CHECK_LOGIN_SUCCESS,
   user,
-  isAdmin
+  isAdmin,
 });
 
-export const checkLogin = () => (dispatch, _, {rest, client, pym, storage}) => {
+const ErrNotLoggedIn = new Error('Not logged in');
+
+export const checkLogin = () => (
+  dispatch,
+  _,
+  { rest, client, pym, storage }
+) => {
   dispatch(checkLoginRequest());
   rest('/auth')
-    .then((result) => {
+    .then(result => {
       if (!result.user) {
         if (storage) {
           storage.removeItem('token');
         }
-        throw new Error('Not logged in');
+        throw ErrNotLoggedIn;
       }
 
       // Reset the websocket.
@@ -321,55 +314,61 @@ export const checkLogin = () => (dispatch, _, {rest, client, pym, storage}) => {
       dispatch(checkLoginSuccess(result.user));
       pym.sendMessage('coral-auth-changed', JSON.stringify(result.user));
 
-      // Display create username dialog if necessary.
-      if (result.user.canEditName && result.user.status !== 'BANNED') {
+      // This is for login via social. Usernames should be set.
+      if (
+        get(result.user, 'status.username.status') === 'UNSET' &&
+        !get(result.user, 'status.banned.status')
+      ) {
         dispatch(showCreateUsernameDialog());
       }
     })
-    .catch((error) => {
-      console.error(error);
+    .catch(error => {
+      if (error !== ErrNotLoggedIn) {
+        console.error(error);
+      }
       if (error.status && error.status === 401 && storage) {
-
         // Unauthorized.
         storage.removeItem('token');
       }
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
       dispatch(checkLoginFailure(errorMessage));
     });
 };
 
-export const validForm = () => ({type: actions.VALID_FORM});
-export const invalidForm = (error) => ({type: actions.INVALID_FORM, error});
+export const validForm = () => ({ type: actions.VALID_FORM });
+export const invalidForm = error => ({ type: actions.INVALID_FORM, error });
 
 //==============================================================================
 // VERIFY EMAIL
 //==============================================================================
 
 const verifyEmailRequest = () => ({
-  type: actions.VERIFY_EMAIL_REQUEST
+  type: actions.VERIFY_EMAIL_REQUEST,
 });
 
 const verifyEmailSuccess = () => ({
-  type: actions.VERIFY_EMAIL_SUCCESS
+  type: actions.VERIFY_EMAIL_SUCCESS,
 });
 
-const verifyEmailFailure = (error) => ({
+const verifyEmailFailure = error => ({
   type: actions.VERIFY_EMAIL_FAILURE,
   error,
 });
 
-export const requestConfirmEmail = (email) => (dispatch, getState, {rest}) => {
+export const requestConfirmEmail = email => (dispatch, getState, { rest }) => {
   const redirectUri = getState().auth.redirectUri;
   dispatch(verifyEmailRequest());
   return rest('/users/resend-verify', {
     method: 'POST',
-    body: {email},
-    headers: {'X-Pym-Url': redirectUri}
+    body: { email },
+    headers: { 'X-Pym-Url': redirectUri },
   })
     .then(() => {
       dispatch(verifyEmailSuccess());
     })
-    .catch((error) => {
+    .catch(error => {
       console.error(error);
       dispatch(verifyEmailFailure(error));
       throw error;
@@ -377,12 +376,12 @@ export const requestConfirmEmail = (email) => (dispatch, getState, {rest}) => {
 };
 
 // Login Popup actions.
-export const setRequireEmailVerification = (required) => ({
+export const setRequireEmailVerification = required => ({
   type: actions.SET_REQUIRE_EMAIL_VERIFICATION,
   required,
 });
 
-export const setRedirectUri = (uri) => ({
+export const setRedirectUri = uri => ({
   type: actions.SET_REDIRECT_URI,
   uri,
 });
@@ -391,18 +390,23 @@ export const setRedirectUri = (uri) => ({
 // Edit Username
 //==============================================================================
 
-const editUsernameFailure = (error) => ({type: actions.EDIT_USERNAME_FAILURE, error});
-const editUsernameSuccess = () => ({type: actions.EDIT_USERNAME_SUCCESS});
+const editUsernameFailure = error => ({
+  type: actions.EDIT_USERNAME_FAILURE,
+  error,
+});
+const editUsernameSuccess = () => ({ type: actions.EDIT_USERNAME_SUCCESS });
 
-export const editName = (username) => (dispatch, _, {rest}) => {
-  return rest('/account/username', {method: 'PUT', body: {username}})
+export const editName = username => (dispatch, _, { rest }) => {
+  return rest('/account/username', { method: 'PUT', body: { username } })
     .then(() => {
       dispatch(editUsernameSuccess());
       dispatch(notify('success', t('framework.success_name_update')));
     })
-    .catch((error) => {
+    .catch(error => {
       console.error(error);
-      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
       dispatch(editUsernameFailure(errorMessage));
     });
 };
diff --git a/client/coral-embed-stream/src/actions/config.js b/client/coral-embed-stream/src/actions/config.js
index 4aecb808b..e30dc24cf 100644
--- a/client/coral-embed-stream/src/actions/config.js
+++ b/client/coral-embed-stream/src/actions/config.js
@@ -1,6 +1,6 @@
-import {ADD_EXTERNAL_CONFIG} from '../constants/config';
+import { ADD_EXTERNAL_CONFIG } from '../constants/config';
 
-export const addExternalConfig = (config) => ({
+export const addExternalConfig = config => ({
   type: ADD_EXTERNAL_CONFIG,
-  config
+  config,
 });
diff --git a/client/coral-embed-stream/src/actions/configure.js b/client/coral-embed-stream/src/actions/configure.js
index bfc738fe0..74cb5ce84 100644
--- a/client/coral-embed-stream/src/actions/configure.js
+++ b/client/coral-embed-stream/src/actions/configure.js
@@ -1,9 +1,9 @@
 import * as actions from '../constants/configure';
 
-export const updatePending = ({updater, errorUpdater}) => {
-  return {type: actions.UPDATE_PENDING, updater, errorUpdater};
+export const updatePending = ({ updater, errorUpdater }) => {
+  return { type: actions.UPDATE_PENDING, updater, errorUpdater };
 };
 
 export const clearPending = () => {
-  return {type: actions.CLEAR_PENDING};
+  return { type: actions.CLEAR_PENDING };
 };
diff --git a/client/coral-embed-stream/src/actions/embed.js b/client/coral-embed-stream/src/actions/embed.js
index 98505cb99..aae4595ea 100644
--- a/client/coral-embed-stream/src/actions/embed.js
+++ b/client/coral-embed-stream/src/actions/embed.js
@@ -1,8 +1,8 @@
 import * as actions from '../constants/embed';
-import {viewAllComments} from './stream';
+import { viewAllComments } from './stream';
 
-export const setActiveTab = (tab) => (dispatch, getState) => {
-  dispatch({type: actions.SET_ACTIVE_TAB, tab});
+export const setActiveTab = tab => (dispatch, getState) => {
+  dispatch({ type: actions.SET_ACTIVE_TAB, tab });
   if (getState().stream.commentId) {
     dispatch(viewAllComments());
   }
diff --git a/client/coral-embed-stream/src/actions/stream.js b/client/coral-embed-stream/src/actions/stream.js
index 8326d8753..8af2dfef2 100644
--- a/client/coral-embed-stream/src/actions/stream.js
+++ b/client/coral-embed-stream/src/actions/stream.js
@@ -1,65 +1,72 @@
 import * as actions from '../constants/stream';
-import {buildUrl} from 'coral-framework/utils/url';
+import { buildUrl } from 'coral-framework/utils/url';
 import queryString from 'query-string';
 
-export const setActiveReplyBox = (id) => ({type: actions.SET_ACTIVE_REPLY_BOX, id});
+export const setActiveReplyBox = id => ({
+  type: actions.SET_ACTIVE_REPLY_BOX,
+  id,
+});
 
-export const setSort = ({sortOrder, sortBy}) => ({type: actions.SET_SORT, sortOrder, sortBy});
-
-export const viewAllComments = () => (dispatch, _, {pym}) => {
+export const setSort = ({ sortOrder, sortBy }) => ({
+  type: actions.SET_SORT,
+  sortOrder,
+  sortBy,
+});
 
+export const viewAllComments = () => (dispatch, _, { pym }) => {
   const search = queryString.stringify({
     ...queryString.parse(location.search),
     comment_id: undefined,
   });
 
   // remove the comment_id url param
-  const url = buildUrl({...location, search});
+  const url = buildUrl({ ...location, search });
 
   try {
-
     // "window" here refers to the embedded iframe
     window.history.replaceState({}, document.title, url);
 
     // also change the parent url
     pym.sendMessage('coral-view-all-comments');
-  } catch (e) { /* not sure if we're worried about old browsers */ }
+  } catch (e) {
+    /* not sure if we're worried about old browsers */
+  }
 
-  dispatch({type: actions.VIEW_ALL_COMMENTS});
+  dispatch({ type: actions.VIEW_ALL_COMMENTS });
 };
 
-export const viewComment = (id) => (dispatch, _, {pym}) => {
-
+export const viewComment = id => (dispatch, _, { pym }) => {
   const search = queryString.stringify({
     ...queryString.parse(location.search),
     comment_id: id,
   });
 
   // remove the comment_id url param
-  const url = buildUrl({...location, search});
+  const url = buildUrl({ ...location, search });
 
   try {
-
     // "window" here refers to the embedded iframe
     window.history.replaceState({}, document.title, url);
 
     // also change the parent url
     pym.sendMessage('coral-view-comment', id);
-  } catch (e) { /* not sure if we're worried about old browsers */ }
+  } catch (e) {
+    /* not sure if we're worried about old browsers */
+  }
 
-  dispatch({type: actions.VIEW_COMMENT, id});
+  dispatch({ type: actions.VIEW_COMMENT, id });
 };
 
-export const addCommentClassName = (className) => ({
+export const addCommentClassName = className => ({
   type: actions.ADD_COMMENT_CLASSNAME,
-  className
+  className,
 });
 
-export const removeCommentClassName = (idx) => ({
+export const removeCommentClassName = idx => ({
   type: actions.REMOVE_COMMENT_CLASSNAME,
-  idx
+  idx,
 });
 
-export const setActiveTab = (tab) => (dispatch) => {
-  dispatch({type: actions.SET_ACTIVE_TAB, tab});
+export const setActiveTab = tab => dispatch => {
+  dispatch({ type: actions.SET_ACTIVE_TAB, tab });
 };
diff --git a/client/coral-embed-stream/src/components/BannedAccount.js b/client/coral-embed-stream/src/components/BannedAccount.js
new file mode 100644
index 000000000..4e03d41e6
--- /dev/null
+++ b/client/coral-embed-stream/src/components/BannedAccount.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import t from 'coral-framework/services/i18n';
+import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';
+
+class BannedAccount extends Component {
+  render() {
+    return (
+      <RestrictedMessageBox>
+        <span>
+          <b>{t('framework.banned_account_header')}</b>
+          <br /> {t('framework.banned_account_body')}
+        </span>
+      </RestrictedMessageBox>
+    );
+  }
+}
+
+export default BannedAccount;
diff --git a/client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.js b/client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.js
index acb3f2e64..e5e08e7e2 100644
--- a/client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.js
+++ b/client/coral-embed-stream/src/components/DefaultQuestionBoxIcon.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './DefaultQuestionBoxIcon.css';
-import {Icon} from 'coral-ui';
+import { Icon } from 'coral-ui';
 
-const DefaultQuestionBoxIcon = ({className}) => (
+const DefaultQuestionBoxIcon = ({ className }) => (
   <div className={cn(styles.root, className)}>
     <Icon name="chat_bubble" className={cn(styles.iconBubble)} />
     <Icon name="person" className={cn(styles.iconPerson)} />
diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index 7445bf300..e64a54caa 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -3,42 +3,53 @@ import PropTypes from 'prop-types';
 import Stream from '../tabs/stream/containers/Stream';
 import Configure from '../tabs/configure/containers/Configure';
 import Slot from 'coral-framework/components/Slot';
-import {can} from 'coral-framework/services/perms';
+import { can } from 'coral-framework/services/perms';
 import t from 'coral-framework/services/i18n';
 import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
 
 import ExtendableTabPanel from '../containers/ExtendableTabPanel';
-import {Tab, TabPane} from 'coral-ui';
+import { Tab, TabPane } from 'coral-ui';
 import ProfileContainer from 'coral-settings/containers/ProfileContainer';
 import Popup from 'coral-framework/components/Popup';
 import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
 import cn from 'classnames';
 
 export default class Embed extends React.Component {
-  changeTab = (tab) => {
-
+  changeTab = tab => {
     // TODO: move data fetching to appropiate containers.
     switch (tab) {
-    case 'profile':
-      this.props.data.refetch();
-      break;
+      case 'profile':
+        this.props.data.refetch();
+        break;
     }
     this.props.setActiveTab(tab);
   };
 
   getTabs() {
-    const {user} = this.props.auth;
+    const { user } = this.props.auth;
     const tabs = [
-      <Tab key='stream' tabId='stream' className='talk-embed-stream-comments-tab'>
+      <Tab
+        key="stream"
+        tabId="stream"
+        className="talk-embed-stream-comments-tab"
+      >
         {t('embed_comments_tab')}
       </Tab>,
-      <Tab key='profile' tabId='profile' className='talk-embed-stream-profile-tab'>
+      <Tab
+        key="profile"
+        tabId="profile"
+        className="talk-embed-stream-profile-tab"
+      >
         {t('framework.my_profile')}
       </Tab>,
     ];
     if (can(user, 'UPDATE_CONFIG')) {
       tabs.push(
-        <Tab key='config' tabId='config'>
+        <Tab
+          key="config"
+          tabId="config"
+          className="talk-embed-stream-config-tab"
+        >
           {t('framework.configure_stream')}
         </Tab>
       );
@@ -47,17 +58,34 @@ export default class Embed extends React.Component {
   }
 
   render() {
-    const {activeTab, commentId, root, root: {asset}, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog, router: {location: {query: {parentUrl}}}} = this.props;
+    const {
+      activeTab,
+      commentId,
+      root,
+      root: { asset },
+      data,
+      auth: { showSignInDialog, signInDialogFocus },
+      blurSignInDialog,
+      focusSignInDialog,
+      hideSignInDialog,
+      router: { location: { query: { parentUrl } } },
+    } = this.props;
     const hasHighlightedComment = !!commentId;
 
     return (
-      <div className={cn('talk-embed-stream', {'talk-embed-stream-highlight-comment': hasHighlightedComment})}>
+      <div
+        className={cn('talk-embed-stream', {
+          'talk-embed-stream-highlight-comment': hasHighlightedComment,
+        })}
+      >
         <AutomaticAssetClosure asset={asset} />
         <IfSlotIsNotEmpty slot="login">
           <Popup
-            href={`embed/stream/login?parentUrl=${encodeURIComponent(parentUrl)}`}
-            title='Login'
-            features='menubar=0,resizable=0,width=500,height=550,top=200,left=500'
+            href={`embed/stream/login?parentUrl=${encodeURIComponent(
+              parentUrl
+            )}`}
+            title="Login"
+            features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
             open={showSignInDialog}
             focus={signInDialogFocus}
             onFocus={focusSignInDialog}
@@ -66,31 +94,39 @@ export default class Embed extends React.Component {
           />
         </IfSlotIsNotEmpty>
 
-        <Slot
-          data={data}
-          queryData={{root}}
-          fill="embed"
-        />
+        <Slot data={data} queryData={{ root }} fill="embed" />
 
         <ExtendableTabPanel
-          className='talk-embed-stream-tab-bar'
+          className="talk-embed-stream-tab-bar"
           activeTab={activeTab}
           setActiveTab={this.changeTab}
-          fallbackTab='stream'
-          tabSlot='embedStreamTabs'
-          tabSlotPrepend='embedStreamTabsPrepend'
-          tabPaneSlot='embedStreamTabPanes'
-          slotProps={{data}}
-          queryData={{root}}
+          fallbackTab="stream"
+          tabSlot="embedStreamTabs"
+          tabSlotPrepend="embedStreamTabsPrepend"
+          tabPaneSlot="embedStreamTabPanes"
+          slotProps={{ data }}
+          queryData={{ root }}
           tabs={this.getTabs()}
           tabPanes={[
-            <TabPane key='stream' tabId='stream' className='talk-embed-stream-comments-tab-pane'>
+            <TabPane
+              key="stream"
+              tabId="stream"
+              className="talk-embed-stream-comments-tab-pane"
+            >
               <Stream data={data} root={root} asset={root.asset} />
             </TabPane>,
-            <TabPane key='profile' tabId='profile' className='talk-embed-stream-profile-tab-pane'>
+            <TabPane
+              key="profile"
+              tabId="profile"
+              className="talk-embed-stream-profile-tab-pane"
+            >
               <ProfileContainer />
             </TabPane>,
-            <TabPane key='config' tabId='config' className='talk-embed-stream-configuration-tab-pane'>
+            <TabPane
+              key="config"
+              tabId="config"
+              className="talk-embed-stream-config-tab-pane"
+            >
               <Configure data={data} root={root} asset={root.asset} />
             </TabPane>,
           ]}
@@ -101,8 +137,18 @@ export default class Embed extends React.Component {
 }
 
 Embed.propTypes = {
+  setActiveTab: PropTypes.func,
+  auth: PropTypes.object,
+  blurSignInDialog: PropTypes.func,
+  focusSignInDialog: PropTypes.func,
+  hideSignInDialog: PropTypes.func,
+  router: PropTypes.object,
+  commentId: PropTypes.string,
+  root: PropTypes.object,
+  activeTab: PropTypes.string,
   data: PropTypes.shape({
     loading: PropTypes.bool,
-    error: PropTypes.object
-  }).isRequired
+    error: PropTypes.object,
+    refetch: PropTypes.func,
+  }).isRequired,
 };
diff --git a/client/coral-embed-stream/src/components/ExtendableTab.js b/client/coral-embed-stream/src/components/ExtendableTab.js
index 75c6739a4..5db151368 100644
--- a/client/coral-embed-stream/src/components/ExtendableTab.js
+++ b/client/coral-embed-stream/src/components/ExtendableTab.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Tab} from 'coral-ui';
+import { Tab } from 'coral-ui';
 import PropTypes from 'prop-types';
 
 /**
@@ -10,10 +10,10 @@ import PropTypes from 'prop-types';
 class ExtendableTab extends React.Component {
   state = {
     hover: false,
-  }
+  };
 
-  handleMouseEnter = () => this.setState({hover: true});
-  handleMouseLeave = () => this.setState({hover: false});
+  handleMouseEnter = () => this.setState({ hover: true });
+  handleMouseLeave = () => this.setState({ hover: false });
 
   render() {
     return (
@@ -22,7 +22,7 @@ class ExtendableTab extends React.Component {
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
       >
-        {React.cloneElement(this.props.children, {hover: this.state.hover})}
+        {React.cloneElement(this.props.children, { hover: this.state.hover })}
       </Tab>
     );
   }
diff --git a/client/coral-embed-stream/src/components/ExtendableTabPanel.js b/client/coral-embed-stream/src/components/ExtendableTabPanel.js
index ec582eb84..1eb420ef0 100644
--- a/client/coral-embed-stream/src/components/ExtendableTabPanel.js
+++ b/client/coral-embed-stream/src/components/ExtendableTabPanel.js
@@ -1,23 +1,33 @@
 import React from 'react';
-import {Spinner, TabBar, TabContent} from 'coral-ui';
+import { Spinner, TabBar, TabContent } from 'coral-ui';
 import PropTypes from 'prop-types';
 import styles from './ExtendableTabPanel.css';
 
 class ExtendableTabPanel extends React.Component {
-
   render() {
-    const {activeTab, setActiveTab, tabs, tabPanes, sub, loading, ...rest} = this.props;
+    const {
+      activeTab,
+      setActiveTab,
+      tabs,
+      tabPanes,
+      sub,
+      loading,
+      ...rest
+    } = this.props;
     return (
       <div {...rest}>
         <TabBar activeTab={activeTab} onTabClick={setActiveTab} sub={sub}>
           {tabs}
         </TabBar>
-        {loading
-          ? <div className={styles.spinnerContainer}><Spinner /></div>
-          : <TabContent activeTab={activeTab} sub={sub}>
+        {loading ? (
+          <div className={styles.spinnerContainer}>
+            <Spinner />
+          </div>
+        ) : (
+          <TabContent activeTab={activeTab} sub={sub}>
             {tabPanes}
           </TabContent>
-        }
+        )}
       </div>
     );
   }
@@ -29,11 +39,11 @@ ExtendableTabPanel.propTypes = {
   loading: PropTypes.bool,
   tabs: PropTypes.oneOfType([
     PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element)
+    PropTypes.arrayOf(PropTypes.element),
   ]),
   tabPanes: PropTypes.oneOfType([
     PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element)
+    PropTypes.arrayOf(PropTypes.element),
   ]),
   className: PropTypes.string,
   sub: PropTypes.bool,
diff --git a/client/coral-embed-stream/src/components/QuestionBox.js b/client/coral-embed-stream/src/components/QuestionBox.js
index 1f34afcd7..4245f96fe 100644
--- a/client/coral-embed-stream/src/components/QuestionBox.js
+++ b/client/coral-embed-stream/src/components/QuestionBox.js
@@ -1,23 +1,21 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './QuestionBox.css';
-import {Icon} from 'coral-ui';
+import { Icon } from 'coral-ui';
 import Markdown from 'coral-framework/components/Markdown';
 import DefaultQuestionBoxIcon from './DefaultQuestionBoxIcon';
 
-const QuestionBox = ({content, icon, className, children}) => (
+const QuestionBox = ({ content, icon, className, children }) => (
   <div className={cn(styles.qbInfo, 'questionbox-info', className)}>
-    {
-      icon === 'default' ? (
-        <div className={cn(styles.qbIconContainer)}>
-          <DefaultQuestionBoxIcon />
-        </div>
-      ) : (
-        <div className={cn(styles.qbIconContainer)}>
-          <Icon name={icon} className={cn(styles.icon)} />
-        </div>
-      )
-    }
+    {icon === 'default' ? (
+      <div className={cn(styles.qbIconContainer)}>
+        <DefaultQuestionBoxIcon />
+      </div>
+    ) : (
+      <div className={cn(styles.qbIconContainer)}>
+        <Icon name={icon} className={cn(styles.icon)} />
+      </div>
+    )}
     <div className={cn(styles.qbContent, 'questionbox-content')}>
       <Markdown content={content} />
     </div>
diff --git a/client/coral-embed-stream/src/components/Toggleable.js b/client/coral-embed-stream/src/components/Toggleable.js
index a65e8212c..c25da1300 100644
--- a/client/coral-embed-stream/src/components/Toggleable.js
+++ b/client/coral-embed-stream/src/components/Toggleable.js
@@ -3,38 +3,39 @@ import ClickOutside from 'coral-framework/components/ClickOutside';
 import styles from './Toggleable.css';
 import cn from 'classnames';
 
-const upArrow = <span className={cn(styles.chevron, styles.up)}></span>;
-const downArrow = <span className={cn(styles.chevron, styles.down)}></span>;
+const upArrow = <span className={cn(styles.chevron, styles.up)} />;
+const downArrow = <span className={cn(styles.chevron, styles.down)} />;
 
 export default class Toggleable extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isOpen: false
+      isOpen: false,
     };
   }
 
   toggle = () => {
-    this.setState({isOpen: !this.state.isOpen});
-  }
+    this.setState({ isOpen: !this.state.isOpen });
+  };
 
   close = () => {
     if (this.state.isOpen) {
-      this.setState({isOpen: false});
+      this.setState({ isOpen: false });
     }
-  }
+  };
 
   render() {
-    const {children, className, ...rest} = this.props;
-    const {isOpen} = this.state;
+    const { children, className, ...rest } = this.props;
+    const { isOpen } = this.state;
     return (
       <ClickOutside onClickOutside={this.close}>
-        <span {...rest} className={cn(className, styles.Toggleable)} >
-          <button className={styles.toggler} onClick={this.toggle}>{isOpen ? upArrow : downArrow}</button>
+        <span {...rest} className={cn(className, styles.Toggleable)}>
+          <button className={styles.toggler} onClick={this.toggle}>
+            {isOpen ? upArrow : downArrow}
+          </button>
           {isOpen ? children : null}
         </span>
       </ClickOutside>
     );
   }
 }
-
diff --git a/client/coral-embed-stream/src/constants/auth.js b/client/coral-embed-stream/src/constants/auth.js
index bb2ea6c15..3187873fe 100644
--- a/client/coral-embed-stream/src/constants/auth.js
+++ b/client/coral-embed-stream/src/constants/auth.js
@@ -54,3 +54,4 @@ export const SET_REQUIRE_EMAIL_VERIFICATION = 'SET_REQUIRE_EMAIL_VERIFICATION';
 export const SET_REDIRECT_URI = 'SET_REDIRECT_URI';
 
 export const RESET_SIGNIN_DIALOG = 'RESET_SIGNIN_DIALOG';
+export const UPDATE_STATUS = 'UPDATE_STATUS';
diff --git a/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js b/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js
index f6ade1de0..3c1fc41f3 100644
--- a/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js
+++ b/client/coral-embed-stream/src/containers/AutomaticAssetClosure.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {gql, compose} from 'react-apollo';
-import {withFragments} from 'coral-framework/hocs';
+import { gql, compose } from 'react-apollo';
+import { withFragments } from 'coral-framework/hocs';
 
 const FRAGMENT = gql`
   fragment CoralEmbedStream_AutomaticAssetClosure_Fragment on Asset {
@@ -60,7 +60,7 @@ class AutomaticAssetClosure extends React.Component {
       });
 
       if (!asset.isClosed && closedAt) {
-        const diff = (new Date(closedAt) - new Date());
+        const diff = new Date(closedAt) - new Date();
         if (diff >= 0) {
           this.timer = setTimeout(() => this.closeAsset(assetId), diff);
         } else {
@@ -88,8 +88,6 @@ const withAutomaticAssetClosureFragments = withFragments({
   `,
 });
 
-const enhance = compose(
-  withAutomaticAssetClosureFragments,
-);
+const enhance = compose(withAutomaticAssetClosureFragments);
 
 export default enhance(AutomaticAssetClosure);
diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js
index 7a8df6e7c..cf4ec66d6 100644
--- a/client/coral-embed-stream/src/containers/Embed.js
+++ b/client/coral-embed-stream/src/containers/Embed.js
@@ -1,28 +1,38 @@
 import React from 'react';
-import {compose, gql} from 'react-apollo';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import { compose, gql } from 'react-apollo';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import isEqual from 'lodash/isEqual';
 import get from 'lodash/get';
 import branch from 'recompose/branch';
 import renderComponent from 'recompose/renderComponent';
 
-import {Spinner} from 'coral-ui';
+import { Spinner } from 'coral-ui';
 import * as authActions from '../actions/auth';
 import * as assetActions from '../actions/asset';
-import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
-import {withQuery} from 'coral-framework/hocs';
+import {
+  getDefinitionName,
+  getSlotFragmentSpreads,
+} from 'coral-framework/utils';
+import { withQuery } from 'coral-framework/hocs';
 import Embed from '../components/Embed';
 import Stream from '../tabs/stream/containers/Stream';
 import AutomaticAssetClosure from './AutomaticAssetClosure';
 import Configure from '../tabs/configure/containers/Configure';
-import {notify} from 'coral-framework/actions/notification';
+import { notify } from 'coral-framework/actions/notification';
 import t from 'coral-framework/services/i18n';
 import PropTypes from 'prop-types';
-import {setActiveTab} from '../actions/embed';
+import { setActiveTab } from '../actions/embed';
 
-const {logout, checkLogin, focusSignInDialog, blurSignInDialog, hideSignInDialog} = authActions;
-const {fetchAssetSuccess} = assetActions;
+const {
+  logout,
+  checkLogin,
+  focusSignInDialog,
+  blurSignInDialog,
+  hideSignInDialog,
+  updateStatus,
+} = authActions;
+const { fetchAssetSuccess } = assetActions;
 
 class EmbedContainer extends React.Component {
   static contextTypes = {
@@ -33,37 +43,53 @@ class EmbedContainer extends React.Component {
 
   subscribeToUpdates(props = this.props) {
     if (props.auth.loggedIn) {
-      const newSubscriptions = [{
-        document: USER_BANNED_SUBSCRIPTION,
-        updateQuery: () => {
-          notify('info', t('your_account_has_been_banned'));
+      const newSubscriptions = [
+        {
+          document: USER_BANNED_SUBSCRIPTION,
+          updateQuery: (
+            _,
+            { subscriptionData: { data: { userBanned: { state } } } }
+          ) => {
+            notify('info', t('your_account_has_been_banned'));
+            props.updateStatus(state.status);
+          },
         },
-      },
-      {
-        document: USER_SUSPENDED_SUBSCRIPTION,
-        updateQuery: () => {
-          notify('info', t('your_account_has_been_suspended'));
+        {
+          document: USER_SUSPENDED_SUBSCRIPTION,
+          updateQuery: (
+            _,
+            { subscriptionData: { data: { userSuspended: { state } } } }
+          ) => {
+            notify('info', t('your_account_has_been_suspended'));
+            props.updateStatus(state.status);
+          },
         },
-      },
-      {
-        document: USERNAME_REJECTED_SUBSCRIPTION,
-        updateQuery: () => {
-          notify('info', t('your_username_has_been_rejected'));
+        {
+          document: USERNAME_REJECTED_SUBSCRIPTION,
+          updateQuery: (
+            _,
+            { subscriptionData: { data: { usernameRejected: { state } } } }
+          ) => {
+            notify('info', t('your_username_has_been_rejected'));
+            props.updateStatus(state.status);
+          },
         },
-      }];
+      ];
 
-      this.subscriptions = newSubscriptions.map((s) => props.data.subscribeToMore({
-        document: s.document,
-        variables: {
-          user_id: props.auth.user.id,
-        },
-        updateQuery: s.updateQuery,
-      }));
+      this.subscriptions = newSubscriptions.map(s =>
+        props.data.subscribeToMore({
+          document: s.document,
+          variables: {
+            user_id: props.auth.user.id,
+          },
+          updateQuery: s.updateQuery,
+        })
+      );
     }
   }
 
   unsubscribe() {
-    this.subscriptions.forEach((unsubscribe) => unsubscribe());
+    this.subscriptions.forEach(unsubscribe => unsubscribe());
     this.subscriptions = [];
   }
 
@@ -82,25 +108,29 @@ class EmbedContainer extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     if (this.props.auth.loggedIn !== nextProps.auth.loggedIn) {
-
       // Refetch after login/logout.
       this.props.data.refetch();
       this.resubscribe(nextProps);
     }
 
-    const {fetchAssetSuccess} = this.props;
+    const { fetchAssetSuccess } = this.props;
     if (!isEqual(nextProps.root.asset, this.props.root.asset)) {
-
       // TODO: remove asset data from redux store.
       fetchAssetSuccess(nextProps.root.asset);
     }
   }
 
   componentDidUpdate(prevProps) {
-    if (!get(prevProps, 'root.asset.comment') && get(this.props, 'root.asset.comment')) {
-
+    if (
+      !get(prevProps, 'root.asset.comment') &&
+      get(this.props, 'root.asset.comment')
+    ) {
       // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
-      setTimeout(() => this.context.pym.scrollParentToChildEl('talk-embed-stream-container'), 0);
+      setTimeout(
+        () =>
+          this.context.pym.scrollParentToChildEl('talk-embed-stream-container'),
+        0
+      );
     }
   }
 
@@ -114,12 +144,20 @@ class EmbedContainer extends React.Component {
 
 const USER_BANNED_SUBSCRIPTION = gql`
   subscription UserBanned($user_id: ID!) {
-    userBanned(user_id: $user_id){
+    userBanned(user_id: $user_id) {
       id
-      status
-      canEditName
-      suspension {
-        until
+      state {
+        status {
+          username {
+            status
+          }
+          banned {
+            status
+          }
+          suspension {
+            until
+          }
+        }
       }
     }
   }
@@ -127,12 +165,20 @@ const USER_BANNED_SUBSCRIPTION = gql`
 
 const USER_SUSPENDED_SUBSCRIPTION = gql`
   subscription UserSuspended($user_id: ID!) {
-    userSuspended(user_id: $user_id){
+    userSuspended(user_id: $user_id) {
       id
-      status
-      canEditName
-      suspension {
-        until
+      state {
+        status {
+          username {
+            status
+          }
+          banned {
+            status
+          }
+          suspension {
+            until
+          }
+        }
       }
     }
   }
@@ -140,12 +186,20 @@ const USER_SUSPENDED_SUBSCRIPTION = gql`
 
 const USERNAME_REJECTED_SUBSCRIPTION = gql`
   subscription UsernameRejected($user_id: ID!) {
-    usernameRejected(user_id: $user_id){
+    usernameRejected(user_id: $user_id) {
       id
-      status
-      canEditName
-      suspension {
-        until
+      state {
+        status {
+          username {
+            status
+          }
+          banned {
+            status
+          }
+          suspension {
+            until
+          }
+        }
       }
     }
   }
@@ -170,7 +224,19 @@ const EMBED_QUERY = gql`
   ) {
     me {
       id
-      status
+      state {
+        status {
+          username {
+            status
+          }
+          banned {
+            status
+          }
+          suspension {
+            until
+          }
+        }
+      }
     }
     asset(id: $assetId, url: $assetUrl) {
       ...${getDefinitionName(Configure.fragments.asset)}
@@ -189,7 +255,7 @@ const EMBED_QUERY = gql`
 `;
 
 export const withEmbedQuery = withQuery(EMBED_QUERY, {
-  options: ({auth, commentId, assetId, assetUrl, sortBy, sortOrder}) => ({
+  options: ({ auth, commentId, assetId, assetUrl, sortBy, sortOrder }) => ({
     variables: {
       assetId,
       assetUrl,
@@ -202,7 +268,7 @@ export const withEmbedQuery = withQuery(EMBED_QUERY, {
   }),
 });
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   auth: state.auth,
   commentId: state.stream.commentId,
   assetId: state.stream.assetId,
@@ -213,7 +279,7 @@ const mapStateToProps = (state) => ({
   sortBy: state.stream.sortBy,
 });
 
-const mapDispatchToProps = (dispatch) =>
+const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       logout,
@@ -224,12 +290,13 @@ const mapDispatchToProps = (dispatch) =>
       focusSignInDialog,
       blurSignInDialog,
       hideSignInDialog,
+      updateStatus,
     },
     dispatch
   );
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  branch((props) => !props.auth.checkedInitialLogin, renderComponent(Spinner)),
-  withEmbedQuery,
+  branch(props => !props.auth.checkedInitialLogin, renderComponent(Spinner)),
+  withEmbedQuery
 )(EmbedContainer);
diff --git a/client/coral-embed-stream/src/containers/ExtendableTabPanel.js b/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
index 3fca664e7..14cf1c4a4 100644
--- a/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
+++ b/client/coral-embed-stream/src/containers/ExtendableTabPanel.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ExtendableTabPanel from '../components/ExtendableTabPanel';
-import {connect} from 'react-redux';
-import {TabPane} from 'coral-ui';
+import { connect } from 'react-redux';
+import { TabPane } from 'coral-ui';
 import ExtendableTab from '../components/ExtendableTab';
-import {getShallowChanges} from 'coral-framework/utils';
+import { getShallowChanges } from 'coral-framework/utils';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 
@@ -21,13 +21,16 @@ class ExtendableTabPanelContainer extends React.Component {
   }
 
   shouldComponentUpdate(next) {
-
     // Prevent Slot from rerendering when only reduxState has changed and
     // it does not result in a change of slot children.
     const changes = getShallowChanges(this.props, next);
     if (changes.length === 1 && changes[0] === 'reduxState') {
-      const prevKeys = this.getSlotElements(this.props.tabSlot, this.props).map((el) => el.key);
-      const nextKeys = this.getSlotElements(next.tabSlot, next).map((el) => el.key);
+      const prevKeys = this.getSlotElements(this.props.tabSlot, this.props).map(
+        el => el.key
+      );
+      const nextKeys = this.getSlotElements(next.tabSlot, next).map(
+        el => el.key
+      );
       return !isEqual(prevKeys, nextKeys);
     }
 
@@ -42,12 +45,17 @@ class ExtendableTabPanelContainer extends React.Component {
   }
 
   getTabNames(props = this.props) {
-    return this.getTabElements(props).map((el) => el.props.tabId);
+    return this.getTabElements(props).map(el => el.props.tabId);
   }
 
   getSlotElements(slot, props = this.props) {
-    const {plugins} = this.context;
-    return plugins.getSlotElements(slot, props.reduxState, props.slotProps, props.queryData);
+    const { plugins } = this.context;
+    return plugins.getSlotElements(
+      slot,
+      props.reduxState,
+      props.slotProps,
+      props.queryData
+    );
   }
 
   getPluginTabElements(props = this.props) {
@@ -59,10 +67,15 @@ class ExtendableTabPanelContainer extends React.Component {
   }
 
   getSlotTabElements(slot) {
-    return this.getSlotElements(slot).map((el) => {
+    return this.getSlotElements(slot).map(el => {
       return (
-        <ExtendableTab tabId={el.type.talkPluginName} key={el.type.talkPluginName}>
-          {React.cloneElement(el, {active: this.props.activeTab === el.type.talkPluginName})}
+        <ExtendableTab
+          tabId={el.type.talkPluginName}
+          key={el.type.talkPluginName}
+        >
+          {React.cloneElement(el, {
+            active: this.props.activeTab === el.type.talkPluginName,
+          })}
         </ExtendableTab>
       );
     });
@@ -80,7 +93,7 @@ class ExtendableTabPanelContainer extends React.Component {
   }
 
   getPluginTabPaneElements(props = this.props) {
-    return this.getSlotElements(props.tabPaneSlot).map((el) => {
+    return this.getSlotElements(props.tabPaneSlot).map(el => {
       return (
         <TabPane tabId={el.type.talkPluginName} key={el.type.talkPluginName}>
           {el}
@@ -109,11 +122,11 @@ ExtendableTabPanelContainer.propTypes = {
   setActiveTab: PropTypes.func.isRequired,
   tabs: PropTypes.oneOfType([
     PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element)
+    PropTypes.arrayOf(PropTypes.element),
   ]),
   tabPanes: PropTypes.oneOfType([
     PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element)
+    PropTypes.arrayOf(PropTypes.element),
   ]),
   fallbackTab: PropTypes.string.isRequired,
   tabSlot: PropTypes.string.isRequired,
@@ -126,7 +139,7 @@ ExtendableTabPanelContainer.propTypes = {
   loading: PropTypes.bool,
 };
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   reduxState: state,
 });
 
diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js
index 542a767e2..dcded6b45 100644
--- a/client/coral-embed-stream/src/graphql/index.js
+++ b/client/coral-embed-stream/src/graphql/index.js
@@ -1,8 +1,11 @@
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import update from 'immutability-helper';
 import uuid from 'uuid/v4';
-import {insertCommentIntoEmbedQuery, removeCommentFromEmbedQuery} from './utils';
-import {mapLeaves} from 'coral-framework/utils';
+import {
+  insertCommentIntoEmbedQuery,
+  removeCommentFromEmbedQuery,
+} from './utils';
+import { mapLeaves } from 'coral-framework/utils';
 
 export default {
   fragments: {
@@ -45,7 +48,7 @@ export default {
         }
       }
     `,
-    CreateDontAgreeResponse : gql`
+    CreateDontAgreeResponse: gql`
       fragment CoralEmbedStream_CreateDontAgreeResponse on CreateDontAgreeResponse {
         dontagree {
           id
@@ -125,8 +128,8 @@ export default {
   },
   mutations: {
     PostComment: ({
-      variables: {input: {asset_id, body, parent_id, tags = []}},
-      state: {auth},
+      variables: { input: { asset_id, body, parent_id, tags = [] } },
+      state: { auth },
     }) => ({
       optimisticResponse: {
         createComment: {
@@ -139,29 +142,29 @@ export default {
               __typename: 'User',
               id: auth.user.id,
               username: auth.user.username,
-              tags: tags.map((tag) => ({
+              tags: tags.map(tag => ({
                 tag: {
                   name: tag,
                   created_at: new Date().toISOString(),
-                  __typename: 'Tag'
+                  __typename: 'Tag',
                 },
                 assigned_by: {
                   id: auth.user.id,
-                  __typename: 'User'
+                  __typename: 'User',
                 },
-                __typename: 'TagLink'
+                __typename: 'TagLink',
               })),
             },
             created_at: new Date().toISOString(),
             body,
             action_summaries: [],
-            tags: tags.map((tag) => ({
+            tags: tags.map(tag => ({
               tag: {
                 name: tag,
                 created_at: new Date().toISOString(),
-                __typename: 'Tag'
+                __typename: 'Tag',
               },
-              __typename: 'TagLink'
+              __typename: 'TagLink',
             })),
             status: 'NONE',
             replyCount: 0,
@@ -171,9 +174,7 @@ export default {
               title: '',
               url: '',
             },
-            parent: parent_id
-              ? {__typename: 'Comment', id: parent_id}
-              : null,
+            parent: parent_id ? { __typename: 'Comment', id: parent_id } : null,
             replies: {
               __typename: 'CommentConnection',
               nodes: [],
@@ -188,13 +189,17 @@ export default {
             },
             status_history: [],
             id: `pending-${uuid()}`,
-          }
-        }
+          },
+        },
       },
       updateQueries: {
-        CoralEmbedStream_Embed: (prev, {mutationResult: {data: {createComment: {comment}}}}) => {
+        CoralEmbedStream_Embed: (
+          prev,
+          { mutationResult: { data: { createComment: { comment } } } }
+        ) => {
           if (
-            prev.me.roles.indexOf('ADMIN') === -1 && prev.asset.settings.moderation === 'PRE' ||
+            (prev.me.role !== 'ADMIN' &&
+              prev.asset.settings.moderation === 'PRE') ||
             comment.status === 'PREMOD' ||
             comment.status === 'REJECTED' ||
             comment.status === 'SYSTEM_WITHHELD'
@@ -203,39 +208,46 @@ export default {
           }
           return insertCommentIntoEmbedQuery(prev, comment);
         },
-        CoralEmbedStream_Profile: (prev, {mutationResult: {data: {createComment: {comment}}}}) => {
+        CoralEmbedStream_Profile: (
+          prev,
+          { mutationResult: { data: { createComment: { comment } } } }
+        ) => {
           return update(prev, {
             me: {
               comments: {
-                nodes: {$unshift: [comment]},
+                nodes: { $unshift: [comment] },
               },
             },
           });
         },
-      }
+      },
     }),
     EditComment: () => ({
       updateQueries: {
-        CoralEmbedStream_Embed: (prev, {mutationResult: {data: {editComment: {comment}}}}) => {
-          if (!['PREMOD', 'REJECTED', 'SYSTEM_WITHHELD'].includes(comment.status)) {
+        CoralEmbedStream_Embed: (
+          prev,
+          { mutationResult: { data: { editComment: { comment } } } }
+        ) => {
+          if (
+            !['PREMOD', 'REJECTED', 'SYSTEM_WITHHELD'].includes(comment.status)
+          ) {
             return null;
           }
           return removeCommentFromEmbedQuery(prev, comment.id);
         },
       },
     }),
-    UpdateAssetSettings: ({variables: {input}})  => ({
+    UpdateAssetSettings: ({ variables: { input } }) => ({
       updateQueries: {
-        CoralEmbedStream_Embed: (prev) => {
+        CoralEmbedStream_Embed: prev => {
           const updated = update(prev, {
             asset: {
-              settings: mapLeaves(input, (leaf) => ({$set: leaf})),
+              settings: mapLeaves(input, leaf => ({ $set: leaf })),
             },
           });
           return updated;
-        }
-      }
+        },
+      },
     }),
   },
 };
-
diff --git a/client/coral-embed-stream/src/graphql/utils.js b/client/coral-embed-stream/src/graphql/utils.js
index 177f131dc..720cb7f2e 100644
--- a/client/coral-embed-stream/src/graphql/utils.js
+++ b/client/coral-embed-stream/src/graphql/utils.js
@@ -1,5 +1,5 @@
 import update from 'immutability-helper';
-import {appendNewNodes} from 'coral-framework/utils';
+import { appendNewNodes } from 'coral-framework/utils';
 
 function determineCommentDepth(comment) {
   let depth = 0;
@@ -15,9 +15,9 @@ function applyToCommentsOrigin(root, callback) {
   if (root.asset.comment) {
     let comment = root.asset.comment;
     for (let depth = 0; depth <= determineCommentDepth(comment); depth++) {
-      let changes = {$apply: (node) => node ? callback(node) : node};
+      let changes = { $apply: node => (node ? callback(node) : node) };
       for (let i = 0; i < depth; i++) {
-        changes = {parent: changes};
+        changes = { parent: changes };
       }
       comment = update(comment, changes);
     }
@@ -31,7 +31,7 @@ function applyToCommentsOrigin(root, callback) {
     };
   }
   return update(root, {
-    asset: {$apply: (asset) => callback(asset)},
+    asset: { $apply: asset => callback(asset) },
   });
 }
 
@@ -42,14 +42,14 @@ function findAndInsertComment(parent, comment) {
     : ['replies', 'replyCount', '$push'];
 
   if (
-    !comment.parent && isAsset                            // A top level comment in the asset.
-    || comment.parent && parent.id === comment.parent.id  // A reply at the correct parent.
+    (!comment.parent && isAsset) || // A top level comment in the asset.
+    (comment.parent && parent.id === comment.parent.id) // A reply at the correct parent.
   ) {
     return update(parent, {
       [connectionField]: {
-        nodes: {[action]: [comment]},
+        nodes: { [action]: [comment] },
       },
-      [countField]: {$apply: (c) => c + 1},
+      [countField]: { $apply: c => c + 1 },
     });
   }
   const connection = parent[connectionField];
@@ -59,45 +59,49 @@ function findAndInsertComment(parent, comment) {
   return update(parent, {
     [connectionField]: {
       nodes: {
-        $apply: (nodes) =>
-          nodes.map((node) => findAndInsertComment(node, comment))
+        $apply: nodes => nodes.map(node => findAndInsertComment(node, comment)),
       },
     },
   });
 }
 
 export function insertCommentIntoEmbedQuery(root, comment) {
-  return applyToCommentsOrigin(root, (origin) => findAndInsertComment(origin, comment));
+  return applyToCommentsOrigin(root, origin =>
+    findAndInsertComment(origin, comment)
+  );
 }
 
 function findAndRemoveComment(parent, id) {
-  const [connectionField, countField] = parent.__typename === 'Asset'
-    ? ['comments', 'totalCommentCount']
-    : ['replies', 'replyCount'];
+  const [connectionField, countField] =
+    parent.__typename === 'Asset'
+      ? ['comments', 'totalCommentCount']
+      : ['replies', 'replyCount'];
 
   const connection = parent[connectionField];
   if (!connection) {
     return parent;
   }
 
-  let next = connection.nodes.filter((node) => node.id !== id);
+  let next = connection.nodes.filter(node => node.id !== id);
   if (next.length === connection.nodes.length) {
-    next = next.map((node) => findAndRemoveComment(node, id));
+    next = next.map(node => findAndRemoveComment(node, id));
   }
   let changes = {
     [connectionField]: {
-      nodes: {$set: next},
+      nodes: { $set: next },
     },
   };
 
   if (parent[countField] && next.length !== connection.nodes.length) {
-    changes[countField] = {$set: parent[countField] - 1};
+    changes[countField] = { $set: parent[countField] - 1 };
   }
   return update(parent, changes);
 }
 
 export function removeCommentFromEmbedQuery(root, id) {
-  return applyToCommentsOrigin(root, (origin) => findAndRemoveComment(origin, id));
+  return applyToCommentsOrigin(root, origin =>
+    findAndRemoveComment(origin, id)
+  );
 }
 
 export function getTopLevelParent(comment) {
@@ -115,7 +119,7 @@ export function findComment(nodes, callback) {
     }
     if (node.replies) {
       const find = findComment(node.replies.nodes, callback);
-      if (find){
+      if (find) {
         return find;
       }
     }
@@ -124,7 +128,7 @@ export function findComment(nodes, callback) {
 }
 
 export function findCommentWithId(nodes, id) {
-  return findComment(nodes, (node) => node.id === id);
+  return findComment(nodes, node => node.id === id);
 }
 
 export function findCommentInEmbedQuery(root, callbackOrId) {
@@ -134,7 +138,7 @@ export function findCommentInEmbedQuery(root, callbackOrId) {
 export function findCommentInAsset(asset, callbackOrId) {
   let callback = callbackOrId;
   if (typeof callbackOrId === 'string') {
-    callback = (node) => node.id === callbackOrId;
+    callback = node => node.id === callbackOrId;
   }
   if (asset.comment) {
     return findComment([getTopLevelParent(asset.comment)], callback);
@@ -148,12 +152,15 @@ export function findCommentInAsset(asset, callbackOrId) {
 function findAndInsertFetchedComments(parent, comments, parent_id) {
   const isAsset = parent.__typename === 'Asset';
   const connectionField = isAsset ? 'comments' : 'replies';
-  if (!parent_id && connectionField === 'comments' || parent.id === parent_id) {
+  if (
+    (!parent_id && connectionField === 'comments') ||
+    parent.id === parent_id
+  ) {
     return update(parent, {
       [connectionField]: {
-        hasNextPage: {$set: comments.hasNextPage},
-        endCursor: {$set: comments.endCursor},
-        nodes: {$apply: (nodes) => appendNewNodes(nodes, comments.nodes)},
+        hasNextPage: { $set: comments.hasNextPage },
+        endCursor: { $set: comments.endCursor },
+        nodes: { $apply: nodes => appendNewNodes(nodes, comments.nodes) },
       },
     });
   }
@@ -165,15 +172,19 @@ function findAndInsertFetchedComments(parent, comments, parent_id) {
   return update(parent, {
     [connectionField]: {
       nodes: {
-        $apply: (nodes) =>
-          nodes.map((node) => findAndInsertFetchedComments(node, comments, parent_id))
+        $apply: nodes =>
+          nodes.map(node =>
+            findAndInsertFetchedComments(node, comments, parent_id)
+          ),
       },
     },
   });
 }
 
 export function insertFetchedCommentsIntoEmbedQuery(root, comments, parent_id) {
-  return applyToCommentsOrigin(root, (origin) => findAndInsertFetchedComments(origin, comments, parent_id));
+  return applyToCommentsOrigin(root, origin =>
+    findAndInsertFetchedComments(origin, comments, parent_id)
+  );
 }
 
 /**
@@ -185,18 +196,19 @@ export function attachCommentToParent(topLevelComment, comment) {
     return update(topLevelComment, {
       replies: {
         nodes: {
-          $apply: (nodes) => appendNewNodes(nodes, [comment]),
+          $apply: nodes => appendNewNodes(nodes, [comment]),
         },
       },
       replyCount: {
-        $set: (count) => count + 1,
-      }
+        $set: count => count + 1,
+      },
     });
   }
   return update(topLevelComment, {
     replies: {
       nodes: {
-        $apply: (nodes) => nodes.map((node) => attachCommentToParent(node, comment)),
+        $apply: nodes =>
+          nodes.map(node => attachCommentToParent(node, comment)),
       },
     },
   });
diff --git a/client/coral-embed-stream/src/index.js b/client/coral-embed-stream/src/index.js
index 841b7b3d0..2226f46ab 100644
--- a/client/coral-embed-stream/src/index.js
+++ b/client/coral-embed-stream/src/index.js
@@ -1,10 +1,14 @@
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 
-import {checkLogin, handleAuthToken, logout} from 'coral-embed-stream/src/actions/auth';
+import {
+  checkLogin,
+  handleAuthToken,
+  logout,
+} from 'coral-embed-stream/src/actions/auth';
 import graphqlExtension from './graphql';
-import {addExternalConfig} from 'coral-embed-stream/src/actions/config';
-import {createContext} from 'coral-framework/services/bootstrap';
+import { addExternalConfig } from 'coral-embed-stream/src/actions/config';
+import { createContext } from 'coral-framework/services/bootstrap';
 import AppRouter from './AppRouter';
 import reducers from './reducers';
 import TalkProvider from 'coral-framework/components/TalkProvider';
@@ -19,8 +23,7 @@ function inIframe() {
 }
 
 // TODO: move init code into `bootstrap` service after auth has been refactored.
-function preInit({store, pym}) {
-
+function preInit({ store, pym }) {
   // TODO: This is popup specific code and needs to be refactored.
   if (!inIframe()) {
     store.dispatch(addExternalConfig({}));
@@ -28,7 +31,7 @@ function preInit({store, pym}) {
     return;
   }
 
-  pym.onMessage('login', (token) => {
+  pym.onMessage('login', token => {
     if (token) {
       store.dispatch(handleAuthToken(token));
     }
@@ -39,9 +42,9 @@ function preInit({store, pym}) {
     store.dispatch(logout());
   });
 
-  return new Promise((resolve) => {
+  return new Promise(resolve => {
     pym.sendMessage('getConfig');
-    pym.onMessage('config', (config) => {
+    pym.onMessage('config', config => {
       store.dispatch(addExternalConfig(JSON.parse(config)));
       store.dispatch(checkLogin());
       resolve();
@@ -50,12 +53,17 @@ function preInit({store, pym}) {
 }
 
 async function main() {
-  const context = await createContext({reducers, graphqlExtension, pluginsConfig, preInit});
+  const context = await createContext({
+    reducers,
+    graphqlExtension,
+    pluginsConfig,
+    preInit,
+  });
   render(
     <TalkProvider {...context}>
       <AppRouter />
-    </TalkProvider>
-    , document.querySelector('#talk-embed-stream-container')
+    </TalkProvider>,
+    document.querySelector('#talk-embed-stream-container')
   );
 }
 
diff --git a/client/coral-embed-stream/src/reducers/asset.js b/client/coral-embed-stream/src/reducers/asset.js
index b9837eddd..b683eae30 100644
--- a/client/coral-embed-stream/src/reducers/asset.js
+++ b/client/coral-embed-stream/src/reducers/asset.js
@@ -7,22 +7,22 @@ const initialState = {
   url: null,
   features: {},
   status: 'open',
-  moderation: null
+  moderation: null,
 };
 
-export default function asset (state = initialState, action) {
+export default function asset(state = initialState, action) {
   switch (action.type) {
-  case actions.FETCH_ASSET_SUCCESS:
-    return {
-      ...state,
-      ...action.asset,
-    };
-  case actions.UPDATE_ASSET_SETTINGS_SUCCESS:
-    return {
-      ...state,
-      settings: action.settings,
-    };
-  default:
-    return state;
+    case actions.FETCH_ASSET_SUCCESS:
+      return {
+        ...state,
+        ...action.asset,
+      };
+    case actions.UPDATE_ASSET_SETTINGS_SUCCESS:
+      return {
+        ...state,
+        settings: action.settings,
+      };
+    default:
+      return state;
   }
 }
diff --git a/client/coral-embed-stream/src/reducers/auth.js b/client/coral-embed-stream/src/reducers/auth.js
index 679e8d858..faa576fff 100644
--- a/client/coral-embed-stream/src/reducers/auth.js
+++ b/client/coral-embed-stream/src/reducers/auth.js
@@ -1,5 +1,6 @@
 import * as actions from '../constants/auth';
 import pym from 'coral-framework/services/pym';
+import merge from 'lodash/merge';
 
 const initialState = {
   isLoading: false,
@@ -22,241 +23,227 @@ const initialState = {
   redirectUri: pym.parentUrl || location.href,
 };
 
-const purge = (user) => {
+const purge = user => {
   const {settings, ...userData} = user; // eslint-disable-line
   return userData;
 };
 
-export default function auth (state = initialState, action) {
+export default function auth(state = initialState, action) {
   switch (action.type) {
-  case actions.FOCUS_SIGNIN_DIALOG:
-    return {
-      ...state,
-      signInDialogFocus: true,
-    };
-  case actions.BLUR_SIGNIN_DIALOG:
-    return {
-      ...state,
-      signInDialogFocus: false,
-    };
-  case actions.SHOW_SIGNIN_DIALOG:
-    return {
-      ...state,
-      showSignInDialog: true,
-      signInDialogFocus: true,
-    };
-  case actions.RESET_SIGNIN_DIALOG:
-  case actions.HIDE_SIGNIN_DIALOG:
-    return {
-      ...state,
-      isLoading: false,
-      showSignInDialog: false,
-      signInDialogFocus: false,
-      view: 'SIGNIN',
-      error: null,
-      passwordRequestFailure: null,
-      passwordRequestSuccess: null,
-      emailVerificationFailure: false,
-      emailVerificationSuccess: false,
-      emailVerificationLoading: false,
-      successSignUp: false
-    };
-  case actions.SHOW_CREATEUSERNAME_DIALOG:
-    return {
-      ...state,
-      showCreateUsernameDialog: true,
-    };
-  case actions.HIDE_CREATEUSERNAME_DIALOG:
-    return {
-      ...state,
-      showCreateUsernameDialog: false,
-    };
-  case actions.CREATE_USERNAME_SUCCESS:
-    return {
-      ...state,
-      showCreateUsernameDialog: false,
-      error: null,
-    };
-  case actions.CREATE_USERNAME_FAILURE:
-    return {
-      ...state,
-      error: action.error,
-    };
-  case actions.CHANGE_VIEW:
-    return {
-      ...state,
-      error: action.error,
-      view: action.view,
-    };
-  case actions.CLEAN_STATE:
-    return initialState;
-  case actions.FETCH_SIGNIN_REQUEST:
-    return {
-      ...state,
-      email: action.email,
-      isLoading: true,
-    };
-  case actions.CHECK_LOGIN_FAILURE:
-    return {
-      ...state,
-      checkedInitialLogin: true,
-      loggedIn: false,
-      user: null,
-    };
-  case actions.CHECK_LOGIN_SUCCESS:
-    return {
-      ...state,
-      checkedInitialLogin: true,
-      loggedIn: true,
-      user: purge(action.user),
-    };
-  case actions.FETCH_SIGNIN_SUCCESS:
-    return {
-      ...state,
-      loggedIn: true,
-      user: purge(action.user),
-    };
-  case actions.FETCH_SIGNIN_FAILURE:
-    return {
-      ...state,
-      isLoading: false,
-      error: action.error,
-      user: null,
-      view: action.error.translation_key === 'EMAIL_NOT_VERIFIED' ? 'RESEND_VERIFICATION' : state.view,
-    };
-  case actions.FETCH_SIGNUP_FACEBOOK_REQUEST:
-    return {
-      ...state,
-      fromSignUp: true,
-    };
-  case actions.FETCH_SIGNIN_FACEBOOK_REQUEST:
-    return {
-      ...state,
-      fromSignUp: false,
-    };
-  case actions.FETCH_SIGNIN_FACEBOOK_SUCCESS:
-    return {
-      ...state,
-      loggedIn: true,
-      user: purge(action.user),
-    };
-  case actions.FETCH_SIGNIN_FACEBOOK_FAILURE:
-    return {
-      ...state,
-      error: action.error,
-      user: null,
-    };
-  case actions.FETCH_SIGNUP_REQUEST:
-    return {
-      ...state,
-      isLoading: true,
-    };
-  case actions.FETCH_SIGNUP_FAILURE:
-    return {
-      ...state,
-      error: action.error,
-      isLoading: false,
-    };
-  case actions.FETCH_SIGNUP_SUCCESS:
-    return {
-      ...state,
-      isLoading: false,
-      successSignUp: true,
-    };
-  case actions.LOGOUT:
-    return {
-      ...state,
-      user: null,
-      isLoading: false,
-      loggedIn: false,
-    };
-  case actions.INVALID_FORM:
-    return {
-      ...state,
-      error: action.error,
-    };
-  case actions.VALID_FORM:
-    return {
-      ...state,
-      error: null,
-    };
-  case actions.FETCH_FORGOT_PASSWORD_SUCCESS:
-    return {
-      ...state,
-      passwordRequestFailure: null,
-      passwordRequestSuccess: 'If you have a registered account, a password reset link was sent to that email',
-    };
-  case actions.FETCH_FORGOT_PASSWORD_FAILURE:
-    return {
-      ...state,
-      passwordRequestFailure: 'There was an error sending your password reset email. Please try again soon!',
-      passwordRequestSuccess: null,
-    };
-  case actions.UPDATE_USERNAME:
-    return {
-      ...state,
-      user: {
-        ...state.user,
-        username: action.username,
-      }
-    };
-  case actions.VERIFY_EMAIL_FAILURE:
-    return {
-      ...state,
-      emailVerificationFailure: action.error,
-      emailVerificationLoading: false,
-    };
-  case actions.VERIFY_EMAIL_REQUEST:
-    return {
-      ...state,
-      emailVerificationLoading: true,
-    };
-  case actions.VERIFY_EMAIL_SUCCESS:
-    return {
-      ...state,
-      emailVerificationSuccess: true,
-      emailVerificationLoading: false,
-    };
-  case actions.SET_REQUIRE_EMAIL_VERIFICATION:
-    return {
-      ...state,
-      requireEmailConfirmation: action.required,
-    };
-  case actions.SET_REDIRECT_URI:
-    return {
-      ...state,
-      redirectUri: action.uri,
-    };
-  case 'APOLLO_SUBSCRIPTION_RESULT':
-    if (action.operationName === 'UserBanned' && state.getIn(['user', 'id']) === action.variables.user_id) {
+    case actions.FOCUS_SIGNIN_DIALOG:
+      return {
+        ...state,
+        signInDialogFocus: true,
+      };
+    case actions.BLUR_SIGNIN_DIALOG:
+      return {
+        ...state,
+        signInDialogFocus: false,
+      };
+    case actions.SHOW_SIGNIN_DIALOG:
+      return {
+        ...state,
+        showSignInDialog: true,
+        signInDialogFocus: true,
+      };
+    case actions.RESET_SIGNIN_DIALOG:
+    case actions.HIDE_SIGNIN_DIALOG:
+      return {
+        ...state,
+        isLoading: false,
+        showSignInDialog: false,
+        signInDialogFocus: false,
+        view: 'SIGNIN',
+        error: null,
+        passwordRequestFailure: null,
+        passwordRequestSuccess: null,
+        emailVerificationFailure: false,
+        emailVerificationSuccess: false,
+        emailVerificationLoading: false,
+        successSignUp: false,
+      };
+    case actions.SHOW_CREATEUSERNAME_DIALOG:
+      return {
+        ...state,
+        showCreateUsernameDialog: true,
+      };
+    case actions.HIDE_CREATEUSERNAME_DIALOG:
+      return {
+        ...state,
+        showCreateUsernameDialog: false,
+      };
+    case actions.CREATE_USERNAME_SUCCESS:
+      return {
+        ...state,
+        showCreateUsernameDialog: false,
+        error: null,
+      };
+    case actions.CREATE_USERNAME_FAILURE:
+      return {
+        ...state,
+        error: action.error,
+      };
+    case actions.CHANGE_VIEW:
+      return {
+        ...state,
+        error: action.error,
+        view: action.view,
+      };
+    case actions.CLEAN_STATE:
+      return initialState;
+    case actions.FETCH_SIGNIN_REQUEST:
+      return {
+        ...state,
+        email: action.email,
+        isLoading: true,
+      };
+    case actions.CHECK_LOGIN_FAILURE:
+      return {
+        ...state,
+        checkedInitialLogin: true,
+        loggedIn: false,
+        user: null,
+      };
+    case actions.CHECK_LOGIN_SUCCESS:
+      return {
+        ...state,
+        checkedInitialLogin: true,
+        loggedIn: true,
+        user: purge(action.user),
+      };
+    case actions.FETCH_SIGNIN_SUCCESS:
+      return {
+        ...state,
+        loggedIn: true,
+        user: purge(action.user),
+      };
+    case actions.FETCH_SIGNIN_FAILURE:
+      return {
+        ...state,
+        isLoading: false,
+        error: action.error,
+        user: null,
+        view:
+          action.error.translation_key === 'EMAIL_NOT_VERIFIED'
+            ? 'RESEND_VERIFICATION'
+            : state.view,
+      };
+    case actions.FETCH_SIGNUP_FACEBOOK_REQUEST:
+      return {
+        ...state,
+        fromSignUp: true,
+      };
+    case actions.FETCH_SIGNIN_FACEBOOK_REQUEST:
+      return {
+        ...state,
+        fromSignUp: false,
+      };
+    case actions.FETCH_SIGNIN_FACEBOOK_SUCCESS:
+      return {
+        ...state,
+        loggedIn: true,
+        user: purge(action.user),
+      };
+    case actions.FETCH_SIGNIN_FACEBOOK_FAILURE:
+      return {
+        ...state,
+        error: action.error,
+        user: null,
+      };
+    case actions.FETCH_SIGNUP_REQUEST:
+      return {
+        ...state,
+        isLoading: true,
+      };
+    case actions.FETCH_SIGNUP_FAILURE:
+      return {
+        ...state,
+        error: action.error,
+        isLoading: false,
+      };
+    case actions.FETCH_SIGNUP_SUCCESS:
+      return {
+        ...state,
+        isLoading: false,
+        successSignUp: true,
+      };
+    case actions.LOGOUT:
+      return {
+        ...state,
+        user: null,
+        isLoading: false,
+        loggedIn: false,
+      };
+    case actions.INVALID_FORM:
+      return {
+        ...state,
+        error: action.error,
+      };
+    case actions.VALID_FORM:
+      return {
+        ...state,
+        error: null,
+      };
+    case actions.FETCH_FORGOT_PASSWORD_SUCCESS:
+      return {
+        ...state,
+        passwordRequestFailure: null,
+        passwordRequestSuccess:
+          'If you have a registered account, a password reset link was sent to that email',
+      };
+    case actions.FETCH_FORGOT_PASSWORD_FAILURE:
+      return {
+        ...state,
+        passwordRequestFailure:
+          'There was an error sending your password reset email. Please try again soon!',
+        passwordRequestSuccess: null,
+      };
+    case actions.UPDATE_USERNAME:
       return {
         ...state,
         user: {
           ...state.user,
-          ...action.result.data.userBanned,
+          username: action.username,
+          lowercaseUsername: action.username.toLowerCase(),
         },
       };
-    }
-    if (action.operationName === 'UserSuspended' && state.getIn(['user', 'id']) === action.variables.user_id) {
+    case actions.VERIFY_EMAIL_FAILURE:
+      return {
+        ...state,
+        emailVerificationFailure: action.error,
+        emailVerificationLoading: false,
+      };
+    case actions.VERIFY_EMAIL_REQUEST:
+      return {
+        ...state,
+        emailVerificationLoading: true,
+      };
+    case actions.VERIFY_EMAIL_SUCCESS:
+      return {
+        ...state,
+        emailVerificationSuccess: true,
+        emailVerificationLoading: false,
+      };
+    case actions.SET_REQUIRE_EMAIL_VERIFICATION:
+      return {
+        ...state,
+        requireEmailConfirmation: action.required,
+      };
+    case actions.SET_REDIRECT_URI:
+      return {
+        ...state,
+        redirectUri: action.uri,
+      };
+    case actions.UPDATE_STATUS: {
       return {
         ...state,
         user: {
           ...state.user,
-          ...action.result.data.userSuspended,
+          status: merge({}, state.user.status, action.status),
         },
       };
     }
-    if (action.operationName === 'UsernameRejected' && state.getIn(['user', 'id']) === action.variables.user_id) {
-      return {
-        ...state,
-        user: {
-          ...state.user,
-          ...action.result.data.usernameRejected,
-        },
-      };
-    }
-    return state;
-  default :
-    return state;
+    default:
+      return state;
   }
 }
diff --git a/client/coral-embed-stream/src/reducers/config.js b/client/coral-embed-stream/src/reducers/config.js
index a602e7f59..09a89a743 100644
--- a/client/coral-embed-stream/src/reducers/config.js
+++ b/client/coral-embed-stream/src/reducers/config.js
@@ -1,15 +1,15 @@
-import {ADD_EXTERNAL_CONFIG} from '../constants/config';
+import { ADD_EXTERNAL_CONFIG } from '../constants/config';
 
 const initialState = {};
 
 export default function config(state = initialState, action) {
   switch (action.type) {
-  case ADD_EXTERNAL_CONFIG:
-    return {
-      ...state,
-      ...action.config
-    };
-  default:
-    return state;
+    case ADD_EXTERNAL_CONFIG:
+      return {
+        ...state,
+        ...action.config,
+      };
+    default:
+      return state;
   }
 }
diff --git a/client/coral-embed-stream/src/reducers/configure.js b/client/coral-embed-stream/src/reducers/configure.js
index 0a94d5a54..41d87f8d8 100644
--- a/client/coral-embed-stream/src/reducers/configure.js
+++ b/client/coral-embed-stream/src/reducers/configure.js
@@ -10,33 +10,36 @@ const initialState = {
 
 export default function config(state = initialState, action) {
   switch (action.type) {
-  case actions.UPDATE_PENDING: {
-    let next = state;
-    if (action.updater) {
+    case actions.UPDATE_PENDING: {
+      let next = state;
+      if (action.updater) {
+        next = update(next, {
+          pending: action.updater,
+        });
+      }
+      if (action.errorUpdater) {
+        next = update(next, {
+          errors: action.errorUpdater,
+        });
+      }
+      const noErrors = Object.keys(next.errors).reduce(
+        (res, error) => res && !next.errors[error],
+        true
+      );
+      const canSave = !isEmpty(next.pending) && noErrors;
       next = update(next, {
-        pending: action.updater,
+        canSave: { $set: canSave },
       });
-    }
-    if (action.errorUpdater) {
-      next = update(next, {
-        errors: action.errorUpdater,
-      });
-    }
-    const noErrors = Object.keys(next.errors).reduce((res, error) => res && !next.errors[error], true);
-    const canSave = !isEmpty(next.pending) && noErrors;
-    next = update(next, {
-      canSave: {$set: canSave},
-    });
 
-    return next;
-  }
-  case actions.CLEAR_PENDING:
-    return {
-      ...state,
-      pending: {},
-      canSave: false,
-    };
-  default:
-    return state;
+      return next;
+    }
+    case actions.CLEAR_PENDING:
+      return {
+        ...state,
+        pending: {},
+        canSave: false,
+      };
+    default:
+      return state;
   }
 }
diff --git a/client/coral-embed-stream/src/reducers/embed.js b/client/coral-embed-stream/src/reducers/embed.js
index 06073c54e..69e85f905 100644
--- a/client/coral-embed-stream/src/reducers/embed.js
+++ b/client/coral-embed-stream/src/reducers/embed.js
@@ -9,30 +9,13 @@ const initialState = {
 
 export default function stream(state = initialState, action) {
   switch (action.type) {
-  case actions.SET_ACTIVE_TAB:
-    return {
-      ...state,
-      activeTab: action.tab,
-      previousTab: state.activeTab,
-    };
-  case 'APOLLO_QUERY_INIT':
-    if (action.queryString.indexOf('query CoralEmbedStream_Embed(') >= 0) {
+    case actions.SET_ACTIVE_TAB:
       return {
         ...state,
-        refetching: action.isRefetch ? true : state.refetching,
-        refetchRequestId: action.isRefetch ? action.requestId : state.refetchRequestId,
+        activeTab: action.tab,
+        previousTab: state.activeTab,
       };
-    }
-    return state;
-  case 'APOLLO_QUERY_RESULT':
-    if (action.operationName === 'CoralEmbedStream_Embed') {
-      return {
-        ...state,
-        refetching: action.requestId === state.refetchRequestId ? false : state.refetching,
-      };
-    }
-    return state;
-  default:
-    return state;
+    default:
+      return state;
   }
 }
diff --git a/client/coral-embed-stream/src/reducers/index.js b/client/coral-embed-stream/src/reducers/index.js
index d6d0c7693..e895a70df 100644
--- a/client/coral-embed-stream/src/reducers/index.js
+++ b/client/coral-embed-stream/src/reducers/index.js
@@ -4,7 +4,7 @@ import embed from './embed';
 import config from './config';
 import configure from './configure';
 import stream from './stream';
-import {reducer as commentBox} from '../../../talk-plugin-commentbox';
+import { reducer as commentBox } from '../../../talk-plugin-commentbox';
 
 export default {
   auth,
diff --git a/client/coral-embed-stream/src/reducers/stream.js b/client/coral-embed-stream/src/reducers/stream.js
index 8e21e23b0..b5afddafc 100644
--- a/client/coral-embed-stream/src/reducers/stream.js
+++ b/client/coral-embed-stream/src/reducers/stream.js
@@ -29,52 +29,52 @@ const initialState = {
 
 export default function stream(state = initialState, action) {
   switch (action.type) {
-  case actions.SET_ACTIVE_TAB:
-    return {
-      ...state,
-      activeTab: action.tab,
-      previousTab: state.activeTab,
-    };
-  case authActions.LOGOUT:
-    return {
-      ...state,
-      activeReplyBox: '',
-    };
-  case actions.SET_ACTIVE_REPLY_BOX:
-    return {
-      ...state,
-      activeReplyBox: action.id,
-    };
-  case actions.VIEW_ALL_COMMENTS:
-    return {
-      ...state,
-      commentId: '',
-    };
-  case actions.VIEW_COMMENT:
-    return {
-      ...state,
-      commentId: action.id,
-    };
-  case actions.ADD_COMMENT_CLASSNAME :
-    return {
-      ...state,
-      commentClassNames: [...state.commentClassNames, action.className]
-    };
-  case actions.REMOVE_COMMENT_CLASSNAME :
-    return {
-      ...state,
-      commentClassNames: [
-        ...state.commentClassNames.slice(0, action.idx),
-        ...state.commentClassNames.slice(action.idx + 1)
-      ]
-    };
-  case actions.SET_SORT :
-    return {
-      ...state,
-      sortOrder: action.sortOrder ? action.sortOrder : state.sortOrder,
-      sortBy: action.sortBy ? action.sortBy : state.sortBy,
-    };
-  default:
-    return state;
+    case actions.SET_ACTIVE_TAB:
+      return {
+        ...state,
+        activeTab: action.tab,
+        previousTab: state.activeTab,
+      };
+    case authActions.LOGOUT:
+      return {
+        ...state,
+        activeReplyBox: '',
+      };
+    case actions.SET_ACTIVE_REPLY_BOX:
+      return {
+        ...state,
+        activeReplyBox: action.id,
+      };
+    case actions.VIEW_ALL_COMMENTS:
+      return {
+        ...state,
+        commentId: '',
+      };
+    case actions.VIEW_COMMENT:
+      return {
+        ...state,
+        commentId: action.id,
+      };
+    case actions.ADD_COMMENT_CLASSNAME:
+      return {
+        ...state,
+        commentClassNames: [...state.commentClassNames, action.className],
+      };
+    case actions.REMOVE_COMMENT_CLASSNAME:
+      return {
+        ...state,
+        commentClassNames: [
+          ...state.commentClassNames.slice(0, action.idx),
+          ...state.commentClassNames.slice(action.idx + 1),
+        ],
+      };
+    case actions.SET_SORT:
+      return {
+        ...state,
+        sortOrder: action.sortOrder ? action.sortOrder : state.sortOrder,
+        sortBy: action.sortBy ? action.sortBy : state.sortBy,
+      };
+    default:
+      return state;
   }
 }
diff --git a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
index d3c2f14d7..ad321199f 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 import PropTypes from 'prop-types';
-import t, {timeago} from 'coral-framework/services/i18n';
+import t, { timeago } from 'coral-framework/services/i18n';
 import cn from 'classnames';
 import styles from './AssetStatusInfo.css';
 
 class AssetStatusInfo extends React.Component {
-
   timer = null;
 
   constructor(props) {
@@ -25,7 +24,7 @@ class AssetStatusInfo extends React.Component {
   }
 
   // Timer that counts down the remaining time.
-  setupTimer({closedAt, isClosed} = this.props) {
+  setupTimer({ closedAt, isClosed } = this.props) {
     if (this.timer && (isClosed || !closedAt)) {
       clearTimeout(this.timer);
       this.timer = null;
@@ -44,17 +43,39 @@ class AssetStatusInfo extends React.Component {
   }
 
   render() {
-    const {isClosed, closedAt, onClose, onOpen} = this.props;
+    const { isClosed, closedAt, onClose, onOpen } = this.props;
     return (
-      <div>
-        <h3>{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
-        {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.</p> : ''}
-        <div className={cn('close-comments-intro-wrapper', styles.wrapper)}>
+      <div className="talk-config-close-comments">
+        <h3>
+          {!isClosed ? t('configure.close') : t('configure.open')}{' '}
+          {t('configure.comment_stream')}
+        </h3>
+        {!isClosed && closedAt ? (
           <p>
-            {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
+            {t('configure.comment_stream_will_close')}{' '}
+            {timeago(new Date(closedAt))}.
           </p>
-          <Button className={styles.button} onClick={!isClosed ? onClose : onOpen}>
-            {!isClosed ? t('configure.close_stream') : t('configure.open_stream')}
+        ) : (
+          ''
+        )}
+        <div
+          className={cn('talk-config-close-comments-wrapper', styles.wrapper)}
+        >
+          <p>
+            {!isClosed
+              ? t('configure.open_stream_configuration')
+              : t('configure.close_stream_configuration')}
+          </p>
+          <Button
+            className={cn(
+              styles.button,
+              `talk-config-close-comments-${isClosed ? 'open' : 'close'}-button`
+            )}
+            onClick={!isClosed ? onClose : onOpen}
+          >
+            {!isClosed
+              ? t('configure.close_stream')
+              : t('configure.open_stream')}
           </Button>
         </div>
       </div>
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configure.js b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
index a7000864e..b4b925d92 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Configure.js
@@ -6,16 +6,14 @@ import PropTypes from 'prop-types';
 class Configure extends React.Component {
   render() {
     return (
-      <div className='talk-embed-stream-configuration-container'>
+      <div className="talk-embed-stream-configuration-container">
         <Settings
           data={this.props.data}
           root={this.props.root}
           asset={this.props.asset}
         />
         <hr />
-        <AssetStatusInfo
-          asset={this.props.asset}
-        />
+        <AssetStatusInfo asset={this.props.asset} />
       </div>
     );
   }
diff --git a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js
index 0d44b4a3a..30fd8842c 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js
@@ -1,25 +1,20 @@
 import React from 'react';
 import QuestionBox from '../../../components/QuestionBox';
-import {Icon, Spinner} from 'coral-ui';
+import { Icon, Spinner } from 'coral-ui';
 import DefaultQuestionBoxIcon from '../../../components/DefaultQuestionBoxIcon';
 import cn from 'classnames';
 import styles from './QuestionBoxBuilder.css';
 
 const DefaultIcon = <DefaultQuestionBoxIcon className={styles.defaultIcon} />;
 
-const icons = [
-  {'default': DefaultIcon},
-  'forum',
-  'build',
-  'format_quote',
-];
+const icons = [{ default: DefaultIcon }, 'forum', 'build', 'format_quote'];
 
 class QuestionBoxBuilder extends React.Component {
   constructor() {
     super();
 
     this.state = {
-      loading: true
+      loading: true,
     };
   }
 
@@ -28,20 +23,27 @@ class QuestionBoxBuilder extends React.Component {
   }
 
   async loadEditor() {
-    const {default: MarkdownEditor} = await import('coral-framework/components/MarkdownEditor');
+    const {
+      default: MarkdownEditor,
+    } = await import('coral-framework/components/MarkdownEditor');
 
     return this.setState({
-      loading : false,
-      MarkdownEditor
+      loading: false,
+      MarkdownEditor,
     });
   }
 
   render() {
-    const {questionBoxIcon, questionBoxContent, onContentChange, onIconChange} = this.props;
-    const {loading, MarkdownEditor} = this.state;
+    const {
+      questionBoxIcon,
+      questionBoxContent,
+      onContentChange,
+      onIconChange,
+    } = this.props;
+    const { loading, MarkdownEditor } = this.state;
 
     if (loading) {
-      return <Spinner/>;
+      return <Spinner />;
     }
 
     return (
@@ -49,25 +51,18 @@ class QuestionBoxBuilder extends React.Component {
         <h4>Include an Icon</h4>
 
         <ul className={styles.iconList}>
-          {icons.map((item) => {
+          {icons.map(item => {
             const name = typeof item === 'object' ? Object.keys(item)[0] : item;
             const icon = typeof item === 'object' ? item[name] : item;
             return (
-              <li
-                className={styles.item}
-                key={name}
-              >
+              <li className={styles.item} key={name}>
                 <button
-                  className={cn(
-                    styles.button,
-                    {[styles.buttonActive]: questionBoxIcon === name},
-                  )}
+                  className={cn(styles.button, {
+                    [styles.buttonActive]: questionBoxIcon === name,
+                  })}
                   onClick={() => onIconChange(name)}
                 >
-                  {typeof icon === 'string'
-                    ? <Icon name={icon} />
-                    : icon
-                  }
+                  {typeof icon === 'string' ? <Icon name={icon} /> : icon}
                 </button>
               </li>
             );
@@ -80,11 +75,7 @@ class QuestionBoxBuilder extends React.Component {
           content={questionBoxContent}
         />
 
-        <MarkdownEditor
-          value={questionBoxContent}
-          onChange={onContentChange}
-        />
-
+        <MarkdownEditor value={questionBoxContent} onChange={onContentChange} />
       </div>
     );
   }
diff --git a/client/coral-embed-stream/src/tabs/configure/components/Settings.js b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
index 4e89172d2..2c4a42153 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/Settings.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
@@ -34,7 +34,10 @@ class Settings extends React.Component {
           <h3>{t('configure.title')}</h3>
           <Button
             type="submit"
-            className={cn(styles.apply, 'talk-embed-stream-configuration-submit-button')}
+            className={cn(
+              styles.apply,
+              'talk-embed-stream-configuration-submit-button'
+            )}
             checked={canSave}
             cStyle={canSave ? 'green' : 'darkGrey'}
             onClick={onApply}
@@ -63,23 +66,18 @@ class Settings extends React.Component {
             description={t('configure.enable_questionbox_description')}
             onCheckbox={onToggleQuestionBox}
           >
-            {
-              questionBoxEnable &&
-                <div className={styles.questionBoxContainer}>
-                  <QuestionBoxBuilder
-                    questionBoxIcon={questionBoxIcon}
-                    questionBoxContent={questionBoxContent}
-                    onIconChange={onQuestionBoxIconChange}
-                    onContentChange={onQuestionBoxContentChange}
-                  />
-                </div>
-            }
+            {questionBoxEnable && (
+              <div className={styles.questionBoxContainer}>
+                <QuestionBoxBuilder
+                  questionBoxIcon={questionBoxIcon}
+                  questionBoxContent={questionBoxContent}
+                  onIconChange={onQuestionBoxIconChange}
+                  onContentChange={onQuestionBoxContentChange}
+                />
+              </div>
+            )}
           </Configuration>
-          <Slot
-            fill="streamSettings"
-            queryData={queryData}
-            {...slotProps}
-          />
+          <Slot fill="streamSettings" queryData={queryData} {...slotProps} />
         </div>
       </div>
     );
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js
index 3d4248e24..8fb6dd2ef 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js
@@ -1,23 +1,28 @@
 import React from 'react';
-import {gql, compose} from 'react-apollo';
-import {withFragments} from 'coral-framework/hocs';
+import { gql, compose } from 'react-apollo';
+import { withFragments } from 'coral-framework/hocs';
 import AssetStatusInfo from '../components/AssetStatusInfo';
 import PropTypes from 'prop-types';
-import {withUpdateAssetStatus} from 'coral-framework/graphql/mutations';
+import { withUpdateAssetStatus } from 'coral-framework/graphql/mutations';
 
 class AssetStatusInfoContainer extends React.Component {
-
-  openAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: null});
-  closeAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: new Date().toISOString()});
+  openAsset = () =>
+    this.props.updateAssetStatus(this.props.asset.id, { closedAt: null });
+  closeAsset = () =>
+    this.props.updateAssetStatus(this.props.asset.id, {
+      closedAt: new Date().toISOString(),
+    });
 
   render() {
-    return <AssetStatusInfo
-      settings={this.props.asset.settings}
-      isClosed={this.props.asset.isClosed}
-      closedAt={this.props.asset.closedAt}
-      onOpen={this.openAsset}
-      onClose={this.closeAsset}
-    />;
+    return (
+      <AssetStatusInfo
+        settings={this.props.asset.settings}
+        isClosed={this.props.asset.isClosed}
+        closedAt={this.props.asset.closedAt}
+        onOpen={this.openAsset}
+        onClose={this.closeAsset}
+      />
+    );
   }
 }
 
@@ -36,9 +41,6 @@ const withAssetStatusInfoFragments = withFragments({
   `,
 });
 
-const enhance = compose(
-  withAssetStatusInfoFragments,
-  withUpdateAssetStatus,
-);
+const enhance = compose(withAssetStatusInfoFragments, withUpdateAssetStatus);
 
 export default enhance(AssetStatusInfoContainer);
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
index b88306262..c408d67fc 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js
@@ -1,20 +1,21 @@
 import React from 'react';
-import {gql, compose} from 'react-apollo';
-import {withFragments} from 'coral-framework/hocs';
+import { gql, compose } from 'react-apollo';
+import { withFragments } from 'coral-framework/hocs';
 import Configure from '../components/Configure';
 import AssetStatusInfo from './AssetStatusInfo';
 import Settings from './Settings';
 import PropTypes from 'prop-types';
-import {getDefinitionName} from 'coral-framework/utils';
+import { getDefinitionName } from 'coral-framework/utils';
 
 class ConfigureContainer extends React.Component {
-
   render() {
-    return <Configure
-      data={this.props.data}
-      root={this.props.root}
-      asset={this.props.asset}
-    />;
+    return (
+      <Configure
+        data={this.props.data}
+        root={this.props.root}
+        asset={this.props.asset}
+      />
+    );
   }
 }
 
@@ -43,8 +44,6 @@ const withConfigureFragments = withFragments({
   `,
 });
 
-const enhance = compose(
-  withConfigureFragments,
-);
+const enhance = compose(withConfigureFragments);
 
 export default enhance(ConfigureContainer);
diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
index afad3482d..ddb63c636 100644
--- a/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
+++ b/client/coral-embed-stream/src/tabs/configure/containers/Settings.js
@@ -1,71 +1,91 @@
 import React from 'react';
-import {gql, compose} from 'react-apollo';
-import {withFragments, withMergedSettings} from 'coral-framework/hocs';
-import {getErrorMessages, getSlotFragmentSpreads} from 'coral-framework/utils';
+import { gql, compose } from 'react-apollo';
+import { withFragments, withMergedSettings } from 'coral-framework/hocs';
+import {
+  getErrorMessages,
+  getSlotFragmentSpreads,
+} from 'coral-framework/utils';
 import Settings from '../components/Settings.js';
 import PropTypes from 'prop-types';
-import {withUpdateAssetSettings} from 'coral-framework/graphql/mutations';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {notify} from 'coral-framework/actions/notification';
-import {clearPending, updatePending} from '../../../actions/configure';
+import { withUpdateAssetSettings } from 'coral-framework/graphql/mutations';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { notify } from 'coral-framework/actions/notification';
+import { clearPending, updatePending } from '../../../actions/configure';
 
-const slots = [
-  'streamSettings',
-];
+const slots = ['streamSettings'];
 
 class SettingsContainer extends React.Component {
-
   toggleModeration = () => {
-    const updater = {moderation: {$set: this.props.mergedSettings.moderation === 'PRE' ? 'POST' : 'PRE'}};
-    this.props.updatePending({updater});
+    const updater = {
+      moderation: {
+        $set: this.props.mergedSettings.moderation === 'PRE' ? 'POST' : 'PRE',
+      },
+    };
+    this.props.updatePending({ updater });
   };
 
   togglePremodLinks = () => {
-    const updater = {premodLinksEnable: {$set: !this.props.mergedSettings.premodLinksEnable}};
-    this.props.updatePending({updater});
+    const updater = {
+      premodLinksEnable: { $set: !this.props.mergedSettings.premodLinksEnable },
+    };
+    this.props.updatePending({ updater });
   };
 
   toggleQuestionBox = () => {
-    const updater = {questionBoxEnable: {$set: !this.props.mergedSettings.questionBoxEnable}};
-    this.props.updatePending({updater});
+    const updater = {
+      questionBoxEnable: { $set: !this.props.mergedSettings.questionBoxEnable },
+    };
+    this.props.updatePending({ updater });
   };
 
-  setQuestionBoxIcon = (icon) => {
-    const updater = {questionBoxIcon: {$set: icon}};
-    this.props.updatePending({updater});
+  setQuestionBoxIcon = icon => {
+    const updater = { questionBoxIcon: { $set: icon } };
+    this.props.updatePending({ updater });
   };
 
-  setQuestionBoxContent = (content) => {
-    const updater = {questionBoxContent: {$set: content}};
-    this.props.updatePending({updater});
+  setQuestionBoxContent = content => {
+    const updater = { questionBoxContent: { $set: content } };
+    this.props.updatePending({ updater });
   };
 
   savePending = async () => {
     try {
-      await this.props.updateAssetSettings(this.props.asset.id, this.props.pending);
+      await this.props.updateAssetSettings(
+        this.props.asset.id,
+        this.props.pending
+      );
       this.props.clearPending();
-    }
-    catch(err) {
+    } catch (err) {
       this.props.notify('error', getErrorMessages(err));
     }
   };
 
   render() {
-    const {mergedSettings, canSave, data, root, asset, errors, updatePending} = this.props;
-    return <Settings
-      settings={mergedSettings}
-      queryData={{root, asset, settings: mergedSettings}}
-      slotProps={{data, updatePending, errors}}
-      savePending={this.savePending}
-      onToggleModeration={this.toggleModeration}
-      onTogglePremodLinks={this.togglePremodLinks}
-      onToggleQuestionBox={this.toggleQuestionBox}
-      onQuestionBoxIconChange={this.setQuestionBoxIcon}
-      onQuestionBoxContentChange={this.setQuestionBoxContent}
-      onApply={this.savePending}
-      canSave={canSave}
-    />;
+    const {
+      mergedSettings,
+      canSave,
+      data,
+      root,
+      asset,
+      errors,
+      updatePending,
+    } = this.props;
+    return (
+      <Settings
+        settings={mergedSettings}
+        queryData={{ root, asset, settings: mergedSettings }}
+        slotProps={{ data, updatePending, errors }}
+        savePending={this.savePending}
+        onToggleModeration={this.toggleModeration}
+        onTogglePremodLinks={this.togglePremodLinks}
+        onToggleQuestionBox={this.toggleQuestionBox}
+        onQuestionBoxIconChange={this.setQuestionBoxIcon}
+        onQuestionBoxContentChange={this.setQuestionBoxContent}
+        onApply={this.savePending}
+        canSave={canSave}
+      />
+    );
   }
 }
 
@@ -106,24 +126,27 @@ const withSettingsFragments = withFragments({
   `,
 });
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   pending: state.configure.pending,
   canSave: state.configure.canSave,
   errors: state.configure.errors,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    notify,
-    clearPending,
-    updatePending,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      notify,
+      clearPending,
+      updatePending,
+    },
+    dispatch
+  );
 
 const enhance = compose(
   withSettingsFragments,
   withUpdateAssetSettings,
   connect(mapStateToProps, mapDispatchToProps),
-  withMergedSettings('asset.settings', 'pending', 'mergedSettings'),
+  withMergedSettings('asset.settings', 'pending', 'mergedSettings')
 );
 
 export default enhance(SettingsContainer);
diff --git a/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js b/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js
index 3a64820c7..ed1fe73f9 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js
@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import LoadMore from './LoadMore';
 import NewCount from './NewCount';
-import {TransitionGroup} from 'react-transition-group';
-import {forEachError} from 'coral-framework/utils';
+import { TransitionGroup } from 'react-transition-group';
+import { forEachError } from 'coral-framework/utils';
 import Comment from '../containers/Comment';
 import NoComments from './NoComments';
 
-const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
+const hasComment = (nodes, id) => nodes.some(node => node.id === id);
 
 // resetCursors will return the id cursors of the first and second comment of
 // the current comment list. The cursors are used to dertermine which
@@ -20,9 +20,9 @@ function resetCursors(state, props) {
     if (comments.nodes[1]) {
       idCursors.push(comments.nodes[1].id);
     }
-    return {idCursors};
+    return { idCursors };
   }
-  return {idCursors: []};
+  return { idCursors: [] };
 }
 
 // invalidateCursor is called whenever a comment is removed which is referenced
@@ -34,17 +34,16 @@ function invalidateCursor(invalidated, state, props) {
   const idCursors = [];
   if (state.idCursors[alt]) {
     idCursors.push(state.idCursors[alt]);
-    const index = comments.nodes.findIndex((node) => node.id === idCursors[0]);
+    const index = comments.nodes.findIndex(node => node.id === idCursors[0]);
     const nextInLine = comments.nodes[index + 1];
     if (nextInLine) {
       idCursors.push(nextInLine.id);
     }
   }
-  return {idCursors};
+  return { idCursors };
 }
 
 class AllCommentsPane extends React.Component {
-
   constructor(props) {
     super(props);
     this.state = {
@@ -54,8 +53,8 @@ class AllCommentsPane extends React.Component {
   }
 
   componentWillReceiveProps(next) {
-    const {comments: prevComments} = this.props;
-    const {comments: nextComments} = next;
+    const { comments: prevComments } = this.props;
+    const { comments: nextComments } = next;
 
     if (!prevComments && nextComments) {
       this.setState(resetCursors);
@@ -63,33 +62,42 @@ class AllCommentsPane extends React.Component {
     }
 
     if (
-      prevComments && nextComments &&
-        nextComments.nodes.length < prevComments.nodes.length
+      prevComments &&
+      nextComments &&
+      nextComments.nodes.length < prevComments.nodes.length
     ) {
-
       // Invalidate first cursor if referenced comment was removed.
-      if (this.state.idCursors[0] && !hasComment(nextComments.nodes, this.state.idCursors[0])) {
+      if (
+        this.state.idCursors[0] &&
+        !hasComment(nextComments.nodes, this.state.idCursors[0])
+      ) {
         this.setState(invalidateCursor(0, this.state, next));
       }
 
       // Invalidate second cursor if referenced comment was removed.
-      if (this.state.idCursors[1] && !hasComment(nextComments.nodes, this.state.idCursors[1])) {
+      if (
+        this.state.idCursors[1] &&
+        !hasComment(nextComments.nodes, this.state.idCursors[1])
+      ) {
         this.setState(invalidateCursor(1, this.state, next));
       }
     }
   }
 
   loadMore = () => {
-    this.setState({loadingState: 'loading'});
-    this.props.loadMore()
+    this.setState({ loadingState: 'loading' });
+    this.props
+      .loadMore()
       .then(() => {
-        this.setState({loadingState: 'success'});
+        this.setState({ loadingState: 'success' });
       })
-      .catch((error) => {
-        this.setState({loadingState: 'error'});
-        forEachError(error, ({msg}) => {this.props.notify('error', msg);});
+      .catch(error => {
+        this.setState({ loadingState: 'error' });
+        forEachError(error, ({ msg }) => {
+          this.props.notify('error', msg);
+        });
       });
-  }
+  };
 
   viewNewComments = () => {
     this.setState(resetCursors);
@@ -99,7 +107,7 @@ class AllCommentsPane extends React.Component {
   // getVisibileComments returns a list containing comments
   // which were authored by current user or comes after the `idCursor`.
   getVisibleComments() {
-    const {comments, currentUser: user} = this.props;
+    const { comments, currentUser: user } = this.props;
     const idCursor = this.state.idCursors[0];
     const userId = user ? user.id : null;
 
@@ -109,7 +117,7 @@ class AllCommentsPane extends React.Component {
 
     const view = [];
     let pastCursor = false;
-    comments.nodes.forEach((comment) => {
+    comments.nodes.forEach(comment => {
       if (comment.id === idCursor) {
         pastCursor = true;
       }
@@ -144,7 +152,7 @@ class AllCommentsPane extends React.Component {
       emit,
     } = this.props;
 
-    const {loadingState} = this.state;
+    const { loadingState } = this.state;
     const visibleComments = this.getVisibleComments();
 
     return (
@@ -155,8 +163,8 @@ class AllCommentsPane extends React.Component {
               count={comments.nodes.length - visibleComments.length}
               loadMore={this.viewNewComments}
             />
-            <TransitionGroup component='div' className="embed__stream">
-              {visibleComments.map((comment) => {
+            <TransitionGroup component="div" className="embed__stream">
+              {visibleComments.map(comment => {
                 return (
                   <Comment
                     commentClassNames={commentClassNames}
diff --git a/client/coral-embed-stream/src/tabs/stream/components/ChangeUsername.css b/client/coral-embed-stream/src/tabs/stream/components/ChangeUsername.css
new file mode 100644
index 000000000..539df0812
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/components/ChangeUsername.css
@@ -0,0 +1,13 @@
+.editNameInput {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 10px;
+  border-radius: 3px;
+  border: solid 1px #d8d8d8;
+  font-size: 0.9em;
+}
+
+.alert {
+  margin-top: 10px;
+  color: #B71C1C;
+}
diff --git a/client/coral-embed-stream/src/tabs/stream/components/ChangeUsername.js b/client/coral-embed-stream/src/tabs/stream/components/ChangeUsername.js
new file mode 100644
index 000000000..d90d36733
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/components/ChangeUsername.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import t from 'coral-framework/services/i18n';
+import styles from './ChangeUsername.css';
+import { Button } from 'coral-ui';
+import validate from 'coral-framework/helpers/validate';
+import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';
+import { forEachError } from 'plugin-api/beta/client/utils';
+
+class ChangeUsername extends Component {
+  static propTypes = {
+    changeUsername: PropTypes.func.isRequired,
+    user: PropTypes.object.isRequired,
+  };
+
+  state = {
+    username: '',
+    alert: '',
+  };
+
+  onSubmitClick = e => {
+    const { changeUsername, user } = this.props;
+    const { username } = this.state;
+    e.preventDefault();
+
+    if (username === this.props.user.username) {
+      this.setState({ alert: t('error.SAME_USERNAME_PROVIDED') });
+    } else if (validate.username(username)) {
+      changeUsername(user.id, username)
+        .then(() => location.reload())
+        .catch(error => {
+          let errorMsg = '';
+          forEachError(
+            error,
+            ({ msg }) => (errorMsg = errorMsg ? `${errorMsg}, ${msg}` : msg)
+          );
+          this.setState({ alert: errorMsg });
+        });
+    } else {
+      this.setState({ alert: t('framework.edit_name.error') });
+    }
+  };
+
+  render() {
+    const { username, alert } = this.state;
+
+    return (
+      <RestrictedMessageBox>
+        <div className="talk-change-username">
+          <span>{t('framework.edit_name.msg')}</span>
+          <div className={styles.alert}>{alert}</div>
+          <label htmlFor="username" className="screen-reader-text">
+            {t('framework.edit_name.label')}
+          </label>
+          <input
+            type="text"
+            className={cn(
+              styles.editNameInput,
+              'talk-change-username-username-input'
+            )}
+            value={username}
+            placeholder={t('framework.edit_name.label')}
+            onChange={e => this.setState({ username: e.target.value })}
+          />
+          <br />
+          <Button
+            className="talk-change-username-submit-button"
+            onClick={this.onSubmitClick}
+          >
+            {t('framework.edit_name.button')}
+          </Button>
+        </div>
+      </RestrictedMessageBox>
+    );
+  }
+}
+
+export default ChangeUsername;
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
index ba14e3c7f..f4e8404e4 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.js
@@ -3,32 +3,39 @@ import PropTypes from 'prop-types';
 
 import TagLabel from 'talk-plugin-tag-label/TagLabel';
 import CommentTimestamp from 'coral-framework/components/CommentTimestamp';
-import {ReplyBox, ReplyButton} from 'talk-plugin-replies';
-import {FlagComment} from 'talk-plugin-flags';
-import {can} from 'coral-framework/services/perms';
-import {TransitionGroup} from 'react-transition-group';
+import { ReplyBox, ReplyButton } from 'talk-plugin-replies';
+import { FlagComment } from 'talk-plugin-flags';
+import { can } from 'coral-framework/services/perms';
+import { TransitionGroup } from 'react-transition-group';
 import cn from 'classnames';
 import styles from './Comment.css';
-import {THREADING_LEVEL} from '../../../constants/stream';
+import { THREADING_LEVEL } from '../../../constants/stream';
 import merge from 'lodash/merge';
 import mapValues from 'lodash/mapValues';
 
 import LoadMore from './LoadMore';
-import {getEditableUntilDate} from './util';
-import {findCommentWithId} from '../../../graphql/utils';
+import { getEditableUntilDate } from './util';
+import { findCommentWithId } from '../../../graphql/utils';
 import CommentContent from 'coral-framework/components/CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import CommentTombstone from './CommentTombstone';
 import InactiveCommentLabel from './InactiveCommentLabel';
-import {EditableCommentContent} from './EditableCommentContent';
-import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive, getShallowChanges} from 'coral-framework/utils';
+import { EditableCommentContent } from './EditableCommentContent';
+import {
+  getActionSummary,
+  iPerformedThisAction,
+  forEachError,
+  isCommentActive,
+  getShallowChanges,
+} from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
 import CommentContainer from '../containers/Comment';
-import {CommentAuthorName} from 'coral-framework/components';
+import { CommentAuthorName } from 'coral-framework/components';
 
-const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
-const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length;
-const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
+const isStaff = tags => !tags.every(t => t.tag.name !== 'STAFF');
+const hasTag = (tags, lookupTag) =>
+  !!tags.filter(t => t.tag.name === lookupTag).length;
+const hasComment = (nodes, id) => nodes.some(node => node.id === id);
 
 // resetCursors will return the id cursors of the first and second newest comment in
 // the current reply list. The cursors are used to dertermine which
@@ -41,9 +48,9 @@ function resetCursors(state, props) {
     if (replies.nodes.length >= 2) {
       idCursors.push(replies.nodes[replies.nodes.length - 2].id);
     }
-    return {idCursors};
+    return { idCursors };
   }
-  return {idCursors: []};
+  return { idCursors: [] };
 }
 
 // invalidateCursor is called whenever a comment is removed which is referenced
@@ -55,17 +62,17 @@ function invalidateCursor(invalidated, state, props) {
   const idCursors = [];
   if (state.idCursors[alt]) {
     idCursors.push(state.idCursors[alt]);
-    const index = replies.nodes.findIndex((node) => node.id === idCursors[0]);
+    const index = replies.nodes.findIndex(node => node.id === idCursors[0]);
     const prevInLine = replies.nodes[index - 1];
     if (prevInLine) {
       idCursors.push(prevInLine.id);
     }
   }
-  return {idCursors};
+  return { idCursors };
 }
 
 // hold actions links (e.g. Reply) along the comment footer
-const ActionButton = ({children}) => {
+const ActionButton = ({ children }) => {
   return (
     <span className="comment__action-button comment__action-button--nowrap">
       {children}
@@ -85,7 +92,6 @@ function containsCommentId(props, id) {
 }
 
 export default class Comment extends React.Component {
-
   constructor(props) {
     super(props);
 
@@ -103,29 +109,37 @@ export default class Comment extends React.Component {
   }
 
   componentWillReceiveProps(next) {
-    const {comment: {replies: prevReplies}} = this.props;
-    const {comment: {replies: nextReplies}} = next;
+    const { comment: { replies: prevReplies } } = this.props;
+    const { comment: { replies: nextReplies } } = next;
     if (
-      prevReplies && nextReplies &&
-        nextReplies.nodes.length < prevReplies.nodes.length
+      prevReplies &&
+      nextReplies &&
+      nextReplies.nodes.length < prevReplies.nodes.length
     ) {
-
       // Invalidate first cursor if referenced comment was removed.
-      if (this.state.idCursors[0] && !hasComment(nextReplies.nodes, this.state.idCursors[0])) {
+      if (
+        this.state.idCursors[0] &&
+        !hasComment(nextReplies.nodes, this.state.idCursors[0])
+      ) {
         this.setState(invalidateCursor(0, this.state, next));
       }
 
       // Invalidate second cursor if referenced comment was removed.
-      if (this.state.idCursors[1] && !hasComment(nextReplies.nodes, this.state.idCursors[1])) {
+      if (
+        this.state.idCursors[1] &&
+        !hasComment(nextReplies.nodes, this.state.idCursors[1])
+      ) {
         this.setState(invalidateCursor(1, this.state, next));
       }
     }
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-
     // Specifically handle `activeReplyBox` if it is the only change.
-    const changes = [...getShallowChanges(this.props, nextProps), ...getShallowChanges(this.state, nextState)];
+    const changes = [
+      ...getShallowChanges(this.props, nextProps),
+      ...getShallowChanges(this.state, nextState),
+    ];
     if (changes.length === 1 && changes[0] === 'activeReplyBox') {
       if (
         !containsCommentId(this.props, this.props.activeReplyBox) &&
@@ -140,7 +154,6 @@ export default class Comment extends React.Component {
   }
 
   static propTypes = {
-
     // id of currently opened ReplyBox. tracked in Stream.js
     activeReplyBox: PropTypes.string.isRequired,
     disableReply: PropTypes.bool,
@@ -156,7 +169,7 @@ export default class Comment extends React.Component {
     liveUpdates: PropTypes.bool,
     asset: PropTypes.object.isRequired,
     currentUser: PropTypes.shape({
-      id: PropTypes.string.isRequired
+      id: PropTypes.string.isRequired,
     }),
     charCountEnable: PropTypes.bool.isRequired,
     maxCharCount: PropTypes.number,
@@ -167,20 +180,20 @@ export default class Comment extends React.Component {
       id: PropTypes.string.isRequired,
       tags: PropTypes.arrayOf(
         PropTypes.shape({
-          name: PropTypes.string
+          name: PropTypes.string,
         })
       ),
       replies: PropTypes.object,
       user: PropTypes.shape({
         id: PropTypes.string.isRequired,
-        username: PropTypes.string.isRequired
+        username: PropTypes.string.isRequired,
       }).isRequired,
       editing: PropTypes.shape({
         edited: PropTypes.bool,
 
         // ISO8601
         editableUntil: PropTypes.string,
-      })
+      }),
     }).isRequired,
     setCommentStatus: PropTypes.func.isRequired,
 
@@ -189,24 +202,28 @@ export default class Comment extends React.Component {
 
     // emit custom events
     emit: PropTypes.func.isRequired,
-  }
+  };
 
   editComment = (...args) => {
-    return this.props.editComment(this.props.comment.id, this.props.asset.id, ...args);
-  }
+    return this.props.editComment(
+      this.props.comment.id,
+      this.props.asset.id,
+      ...args
+    );
+  };
 
-  onClickEdit (e) {
+  onClickEdit(e) {
     e.preventDefault();
     if (!can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
       this.props.notify('error', t('error.NOT_AUTHORIZED'));
       return;
     }
-    this.setState({isEditing: true});
+    this.setState({ isEditing: true });
   }
 
-  stopEditing () {
+  stopEditing() {
     if (this._isMounted) {
-      this.setState({isEditing: false});
+      this.setState({ isEditing: false });
     }
   }
 
@@ -219,35 +236,42 @@ export default class Comment extends React.Component {
     return (
       me &&
       me.ignoredUsers &&
-      me.ignoredUsers.find((u) => u.id === comment.user.id)
+      me.ignoredUsers.find(u => u.id === comment.user.id)
     );
   }
 
   hasIgnoredReplies() {
-    return this.props.comment.replies &&
-      this.props.comment.replies.nodes.some((reply) => this.commentIsIgnored(reply));
+    return (
+      this.props.comment.replies &&
+      this.props.comment.replies.nodes.some(reply =>
+        this.commentIsIgnored(reply)
+      )
+    );
   }
 
   loadNewReplies = () => {
-    const {comment: {replies, replyCount, id}, emit} = this.props;
+    const { comment: { replies, replyCount, id }, emit } = this.props;
     if (replyCount > replies.nodes.length) {
-      this.setState({loadingState: 'loading'});
-      this.props.loadMore(id)
+      this.setState({ loadingState: 'loading' });
+      this.props
+        .loadMore(id)
         .then(() => {
           this.setState({
             ...resetCursors(this.state, this.props),
             loadingState: 'success',
           });
         })
-        .catch((error) => {
-          this.setState({loadingState: 'error'});
-          forEachError(error, ({msg}) => {this.props.notify('error', msg);});
+        .catch(error => {
+          this.setState({ loadingState: 'error' });
+          forEachError(error, ({ msg }) => {
+            this.props.notify('error', msg);
+          });
         });
-      emit('ui.Comment.showMoreReplies', {id});
+      emit('ui.Comment.showMoreReplies', { id });
       return;
     }
     this.setState(resetCursors);
-    emit('ui.Comment.showMoreReplies', {id});
+    emit('ui.Comment.showMoreReplies', { id });
   };
 
   showReplyBox = () => {
@@ -261,16 +285,16 @@ export default class Comment extends React.Component {
       this.props.notify('error', t('error.NOT_AUTHORIZED'));
     }
     return;
-  }
+  };
 
   commentPostedHandler = () => {
     this.props.setActiveReplyBox('');
-  }
+  };
 
   // getVisibileReplies returns a list containing comments
   // which were authored by current user or comes before the `idCursor`.
   getVisibileReplies() {
-    const {comment: {replies}, currentUser, liveUpdates} = this.props;
+    const { comment: { replies }, currentUser, liveUpdates } = this.props;
     const idCursor = this.state.idCursors[0];
     const userId = currentUser ? currentUser.id : null;
 
@@ -284,8 +308,8 @@ export default class Comment extends React.Component {
 
     const view = [];
     let pastCursor = false;
-    replies.nodes.forEach((comment) => {
-      if (idCursor && !pastCursor || comment.user.id === userId) {
+    replies.nodes.forEach(comment => {
+      if ((idCursor && !pastCursor) || comment.user.id === userId) {
         view.push(comment);
       }
       if (comment.id === idCursor) {
@@ -305,7 +329,7 @@ export default class Comment extends React.Component {
     if (this.state.isEditable) {
       const msLeftToEdit = editWindowRemainingMs(this.props.comment);
       this.editWindowExpiryTimeout = setTimeout(() => {
-        this.setState({isEditable: false});
+        this.setState({ isEditable: false });
       }, Math.max(msLeftToEdit, 0));
     }
   }
@@ -315,7 +339,7 @@ export default class Comment extends React.Component {
     }
     this._isMounted = false;
   }
-  render () {
+  render() {
     const {
       asset,
       data,
@@ -340,20 +364,26 @@ export default class Comment extends React.Component {
       liveUpdates,
       animateEnter,
       emit,
-      commentClassNames = []
+      commentClassNames = [],
     } = this.props;
 
     if (!highlighted && this.commentIsRejected(comment)) {
-      return <CommentTombstone action='reject' onUndo={() => {
-        this.props.setCommentStatus({
-          commentId: comment.id,
-          status: comment.status_history[comment.status_history.length - 2].type,
-        });
-      }}/>;
+      return (
+        <CommentTombstone
+          action="reject"
+          onUndo={() => {
+            this.props.setCommentStatus({
+              commentId: comment.id,
+              status:
+                comment.status_history[comment.status_history.length - 2].type,
+            });
+          }}
+        />
+      );
     }
 
     if (this.commentIsIgnored(comment)) {
-      return <CommentTombstone action='ignore' />;
+      return <CommentTombstone action="ignore" />;
     }
 
     const view = this.getVisibileReplies();
@@ -361,12 +391,17 @@ export default class Comment extends React.Component {
     // Inactive comments can be viewed by moderators and admins (e.g. using permalinks).
     const isActive = isCommentActive(comment.status);
 
-    const {loadingState} = this.state;
+    const { loadingState } = this.state;
     const isPending = comment.id.indexOf('pending') >= 0;
     const isHighlighted = highlighted === comment.id;
 
-    const hasMoreComments = comment.replies && (comment.replies.hasNextPage || comment.replies.nodes.length > view.length);
-    const moreRepliesCount = this.hasIgnoredReplies() ? -1 : comment.replyCount - view.length;
+    const hasMoreComments =
+      comment.replies &&
+      (comment.replies.hasNextPage ||
+        comment.replies.nodes.length > view.length);
+    const moreRepliesCount = this.hasIgnoredReplies()
+      ? -1
+      : comment.replyCount - view.length;
     const flagSummary = getActionSummary('FlagActionSummary', comment);
     const dontAgreeSummary = getActionSummary(
       'DontAgreeActionSummary',
@@ -374,9 +409,9 @@ export default class Comment extends React.Component {
     );
     let myFlag = null;
     if (iPerformedThisAction('FlagActionSummary', comment)) {
-      myFlag = flagSummary.find((s) => s.current_user);
+      myFlag = flagSummary.find(s => s.current_user);
     } else if (iPerformedThisAction('DontAgreeActionSummary', comment)) {
-      myFlag = dontAgreeSummary.find((s) => s.current_user);
+      myFlag = dontAgreeSummary.find(s => s.current_user);
     }
 
     /**
@@ -390,13 +425,15 @@ export default class Comment extends React.Component {
      *
      * This will add myClassName to comments tagged with STAFF TAG.
      * **/
-    const conditionalClassNames =
-      mapValues(merge({}, ...commentClassNames), (condition) => {
+    const conditionalClassNames = mapValues(
+      merge({}, ...commentClassNames),
+      condition => {
         if (condition.tags) {
-          return condition.tags.some((tag) => hasTag(comment.tags, tag));
+          return condition.tags.some(tag => hasTag(comment.tags, tag));
         }
         return false;
-      });
+      }
+    );
 
     const rootClassName = cn(
       'talk-stream-comment-wrapper',
@@ -406,7 +443,7 @@ export default class Comment extends React.Component {
       {
         ...conditionalClassNames,
         [styles.enter]: animateEnter,
-      },
+      }
     );
 
     const commentClassName = cn(
@@ -435,12 +472,8 @@ export default class Comment extends React.Component {
     };
 
     return (
-      <div
-        className={rootClassName}
-        id={`c_${comment.id}`}
-      >
+      <div className={rootClassName} id={`c_${comment.id}`}>
         <div className={commentClassName}>
-
           <Slot
             className={`${styles.commentAvatar} talk-stream-comment-avatar`}
             fill="commentAvatar"
@@ -449,23 +482,43 @@ export default class Comment extends React.Component {
             inline
           />
 
-          <div className={cn(styles.commentContainer, 'talk-stream-comment-container')}>
+          <div
+            className={cn(
+              styles.commentContainer,
+              'talk-stream-comment-container'
+            )}
+          >
             <div className={cn(styles.header, 'talk-stream-comment-header')}>
-
-              <div className={cn(styles.headerContainer, 'talk-stream-comment-header-container')}>
+              <div
+                className={cn(
+                  styles.headerContainer,
+                  'talk-stream-comment-header-container'
+                )}
+              >
                 <Slot
-                  className={cn(styles.username, 'talk-stream-comment-user-name')}
+                  className={cn(
+                    styles.username,
+                    'talk-stream-comment-user-name'
+                  )}
                   fill="commentAuthorName"
                   defaultComponent={CommentAuthorName}
                   queryData={queryData}
                   {...slotProps}
                 />
 
-                <div className={cn(styles.tagsContainer, 'talk-stream-comment-header-tags-container')}>
+                <div
+                  className={cn(
+                    styles.tagsContainer,
+                    'talk-stream-comment-header-tags-container'
+                  )}
+                >
                   {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
                   <Slot
-                    className={cn(styles.commentAuthorTagsSlot, 'talk-stream-comment-author-tags')}
+                    className={cn(
+                      styles.commentAuthorTagsSlot,
+                      'talk-stream-comment-author-tags'
+                    )}
                     fill="commentAuthorTags"
                     queryData={queryData}
                     {...slotProps}
@@ -473,7 +526,11 @@ export default class Comment extends React.Component {
                   />
                 </div>
 
-                <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+                <span
+                  className={`${
+                    styles.bylineSecondary
+                  } talk-stream-comment-user-byline`}
+                >
                   <Slot
                     fill="commentTimestamp"
                     defaultComponent={CommentTimestamp}
@@ -482,11 +539,13 @@ export default class Comment extends React.Component {
                     queryData={queryData}
                     {...slotProps}
                   />
-                  {
-                    (comment.editing && comment.editing.edited)
-                      ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-                      : null
-                  }
+                  {comment.editing && comment.editing.edited ? (
+                    <span>
+                      &nbsp;<span className={styles.editedMarker}>
+                        ({t('comment.edited')})
+                      </span>
+                    </span>
+                  ) : null}
                 </span>
               </div>
 
@@ -497,48 +556,50 @@ export default class Comment extends React.Component {
                 queryData={queryData}
               />
 
-              { isActive && (currentUser && (comment.user.id === currentUser.id)) &&
-
-                /* User can edit/delete their own comment for a short window after posting */
-                <span className={cn(styles.topRight)}>
-                  {
-                    this.state.isEditable &&
-                    <a
-                      className={cn(styles.link, {[styles.active]: this.state.isEditing})}
-                      onClick={this.onClickEdit}>Edit</a>
-                  }
-                </span>
-              }
-              { !isActive &&
-                <InactiveCommentLabel status={comment.status}/>
-              }
+              {isActive &&
+                (currentUser && comment.user.id === currentUser.id) && (
+                  /* User can edit/delete their own comment for a short window after posting */
+                  <span className={cn(styles.topRight)}>
+                    {this.state.isEditable && (
+                      <a
+                        className={cn(styles.link, {
+                          [styles.active]: this.state.isEditing,
+                        })}
+                        onClick={this.onClickEdit}
+                      >
+                        Edit
+                      </a>
+                    )}
+                  </span>
+                )}
+              {!isActive && <InactiveCommentLabel status={comment.status} />}
             </div>
             <div className={styles.content}>
-              {
-                this.state.isEditing
-                  ? <EditableCommentContent
-                    editComment={this.editComment}
-                    notify={notify}
-                    comment={comment}
-                    currentUser={currentUser}
-                    charCountEnable={charCountEnable}
-                    maxCharCount={maxCharCount}
-                    parentId={parentId}
-                    stopEditing={this.stopEditing}
+              {this.state.isEditing ? (
+                <EditableCommentContent
+                  editComment={this.editComment}
+                  notify={notify}
+                  comment={comment}
+                  currentUser={currentUser}
+                  charCountEnable={charCountEnable}
+                  maxCharCount={maxCharCount}
+                  parentId={parentId}
+                  stopEditing={this.stopEditing}
+                />
+              ) : (
+                <div>
+                  <Slot
+                    fill="commentContent"
+                    className="talk-stream-comment-content"
+                    defaultComponent={CommentContent}
+                    {...slotProps}
+                    queryData={queryData}
                   />
-                  : <div>
-                    <Slot
-                      fill="commentContent"
-                      className='talk-stream-comment-content'
-                      defaultComponent={CommentContent}
-                      {...slotProps}
-                      queryData={queryData}
-                    />
-                  </div>
-              }
+                </div>
+              )}
             </div>
             <div className={cn(styles.footer, 'talk-stream-comment-footer')}>
-              {isActive &&
+              {isActive && (
                 <div className={'talk-stream-comment-actions-container'}>
                   <div className="talk-embed-stream-comment-actions-container-left commentActionsLeft comment__action-container">
                     <Slot
@@ -547,14 +608,16 @@ export default class Comment extends React.Component {
                       queryData={queryData}
                       inline
                     />
-                    {!disableReply &&
+
+                    {!disableReply && (
                       <ActionButton>
                         <ReplyButton
                           onClick={this.showReplyBox}
                           parentCommentId={parentId || comment.id}
                           currentUserId={currentUser && currentUser.id}
                         />
-                      </ActionButton>}
+                      </ActionButton>
+                    )}
                   </div>
                   <div className="talk-embed-stream-comment-actions-container-right commentActionsRight comment__action-container">
                     <Slot
@@ -580,27 +643,27 @@ export default class Comment extends React.Component {
                     </ActionButton>
                   </div>
                 </div>
-              }
+              )}
             </div>
           </div>
         </div>
 
-        {activeReplyBox === comment.id
-          ? <ReplyBox
+        {activeReplyBox === comment.id ? (
+          <ReplyBox
             commentPostedHandler={this.commentPostedHandler}
             charCountEnable={charCountEnable}
             maxCharCount={maxCharCount}
             setActiveReplyBox={setActiveReplyBox}
-            parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
+            parentId={depth < THREADING_LEVEL ? comment.id : parentId}
             notify={notify}
             postComment={postComment}
             currentUser={currentUser}
             assetId={asset.id}
           />
-          : null}
+        ) : null}
 
         <TransitionGroup>
-          {view.map((reply) => {
+          {view.map(reply => {
             return (
               <CommentContainer
                 data={this.props.data}
@@ -646,19 +709,23 @@ export default class Comment extends React.Component {
 }
 
 // return whether the comment is editable
-function commentIsStillEditable (comment) {
+function commentIsStillEditable(comment) {
   const editing = comment && comment.editing;
-  if (!editing) {return false;}
+  if (!editing) {
+    return false;
+  }
   const editableUntil = getEditableUntilDate(comment);
-  const editWindowExpired = (editableUntil - new Date) < 0;
+  const editWindowExpired = editableUntil - new Date() < 0;
   return !editWindowExpired;
 }
 
 // return number of milliseconds before edit window expires
-function editWindowRemainingMs (comment) {
+function editWindowRemainingMs(comment) {
   const editableUntil = getEditableUntilDate(comment);
-  if (!editableUntil) {return;}
+  if (!editableUntil) {
+    return;
+  }
   const now = new Date();
-  const editWindowRemainingMs = (editableUntil - now);
+  const editWindowRemainingMs = editableUntil - now;
   return editWindowRemainingMs;
 }
diff --git a/client/coral-embed-stream/src/tabs/stream/components/CommentTombstone.js b/client/coral-embed-stream/src/tabs/stream/components/CommentTombstone.js
index 4347d4277..a10369850 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CommentTombstone.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CommentTombstone.js
@@ -6,15 +6,15 @@ import styles from './CommentTombstone.css';
 // Render in place of a Comment when the author of the comment is <action>
 class CommentTombstone extends React.Component {
   getCopy() {
-    const {action} = this.props;
+    const { action } = this.props;
 
     switch (action) {
-    case 'ignore':
-      return t('framework.comment_is_ignored');
-    case 'reject':
-      return t('framework.comment_is_rejected');
-    default :
-      return t('framework.comment_is_hidden');
+      case 'ignore':
+        return t('framework.comment_is_ignored');
+      case 'reject':
+        return t('framework.comment_is_rejected');
+      default:
+        return t('framework.comment_is_hidden');
     }
   }
 
@@ -24,9 +24,11 @@ class CommentTombstone extends React.Component {
         <hr aria-hidden={true} />
         <p className={styles.commentTombstone}>
           {this.getCopy()}
-          {this.props.action === 'reject' &&
-            <span className={styles.undo} onClick={this.props.onUndo}>{t('comment.undo_reject')}</span>
-          }
+          {this.props.action === 'reject' && (
+            <span className={styles.undo} onClick={this.props.onUndo}>
+              {t('comment.undo_reject')}
+            </span>
+          )}
         </p>
       </div>
     );
diff --git a/client/coral-embed-stream/src/tabs/stream/components/CountdownSeconds.js b/client/coral-embed-stream/src/tabs/stream/components/CountdownSeconds.js
index 46b6b1fbf..26d306df3 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/CountdownSeconds.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/CountdownSeconds.js
@@ -9,17 +9,16 @@ export class CountdownSeconds extends React.Component {
   static propTypes = {
     until: PropTypes.instanceOf(Date).isRequired,
     classNameForMsRemaining: PropTypes.func,
-  }
+  };
   constructor(props) {
     super(props);
     this.countdownInterval = null;
   }
   componentDidMount() {
-    const {until} = this.props;
+    const { until } = this.props;
     const now = new Date();
     if (until - now > 0) {
       this.countdownInterval = setInterval(() => {
-
         // re-render
         this.forceUpdate();
       }, 1000);
@@ -32,27 +31,32 @@ export class CountdownSeconds extends React.Component {
   }
   render() {
     const now = new Date();
-    const {until, classNameForMsRemaining} = this.props;
+    const { until, classNameForMsRemaining } = this.props;
     const msRemaining = until - now;
     const secRemaining = msRemaining / 1000;
     const minRemaining = secRemaining / 60;
     const secToMinRemaining = secRemaining % 60;
     const wholeMinRemaining = Math.floor(minRemaining);
     const wholeSecRemaining = Math.floor(secToMinRemaining);
-    const secUnit = t(wholeSecRemaining !== 1 ? 'edit_comment.seconds_plural' : 'edit_comment.second');
-    const minUnit = t(wholeMinRemaining !== 1 ? 'edit_comment.minutes_plural' : 'edit_comment.minute');
+    const secUnit = t(
+      wholeSecRemaining !== 1
+        ? 'edit_comment.seconds_plural'
+        : 'edit_comment.second'
+    );
+    const minUnit = t(
+      wholeMinRemaining !== 1
+        ? 'edit_comment.minutes_plural'
+        : 'edit_comment.minute'
+    );
     let classFromProp;
     if (typeof classNameForMsRemaining === 'function') {
       classFromProp = classNameForMsRemaining(msRemaining);
     }
-    const text = wholeMinRemaining > 0
-      ? `${wholeMinRemaining} ${minUnit} ${wholeSecRemaining} ${secUnit}`
-      : `${wholeSecRemaining} ${secUnit}`;
+    const text =
+      wholeMinRemaining > 0
+        ? `${wholeMinRemaining} ${minUnit} ${wholeSecRemaining} ${secUnit}`
+        : `${wholeSecRemaining} ${secUnit}`;
 
-    return (
-      <span className={classFromProp}>
-        {text}
-      </span>
-    );
+    return <span className={classFromProp}>{text}</span>;
   }
 }
diff --git a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
index c256616f0..bfd2c8bad 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/EditableCommentContent.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {notifyForNewCommentStatus} from 'talk-plugin-commentbox/CommentBox';
-import {CommentForm} from 'talk-plugin-commentbox/CommentForm';
+import { notifyForNewCommentStatus } from 'talk-plugin-commentbox/CommentBox';
+import { CommentForm } from 'talk-plugin-commentbox/CommentForm';
 import styles from './Comment.css';
-import {CountdownSeconds} from './CountdownSeconds';
-import {getEditableUntilDate} from './util';
-import {can} from 'coral-framework/services/perms';
-import {forEachError} from 'coral-framework/utils';
+import { CountdownSeconds } from './CountdownSeconds';
+import { getEditableUntilDate } from './util';
+import { can } from 'coral-framework/services/perms';
+import { forEachError } from 'coral-framework/utils';
 
-import {Icon} from 'coral-ui';
+import { Icon } from 'coral-ui';
 import t from 'coral-framework/services/i18n';
 
 /**
@@ -16,7 +16,6 @@ import t from 'coral-framework/services/i18n';
  */
 export class EditableCommentContent extends React.Component {
   static propTypes = {
-
     // show notification to the user (e.g. for errors)
     notify: PropTypes.func.isRequired,
 
@@ -28,12 +27,12 @@ export class EditableCommentContent extends React.Component {
 
         // ISO8601
         editableUntil: PropTypes.string,
-      })
+      }),
     }).isRequired,
 
     // logged in user
     currentUser: PropTypes.shape({
-      id: PropTypes.string.isRequired
+      id: PropTypes.string.isRequired,
     }),
     charCountEnable: PropTypes.bool,
     maxCharCount: PropTypes.number,
@@ -43,7 +42,7 @@ export class EditableCommentContent extends React.Component {
 
     // called when editing should be stopped
     stopEditing: PropTypes.func,
-  }
+  };
 
   constructor(props) {
     super(props);
@@ -56,7 +55,7 @@ export class EditableCommentContent extends React.Component {
   componentDidMount() {
     const editableUntil = getEditableUntilDate(this.props.comment);
     const now = new Date();
-    const editWindowRemainingMs = editableUntil && (editableUntil - now);
+    const editWindowRemainingMs = editableUntil && editableUntil - now;
     if (editWindowRemainingMs > 0) {
       this.editWindowExpiryTimeout = setTimeout(() => {
         this.forceUpdate();
@@ -69,9 +68,9 @@ export class EditableCommentContent extends React.Component {
     }
   }
 
-  handleBodyChange = (body) => {
-    this.setState({body});
-  }
+  handleBodyChange = body => {
+    this.setState({ body });
+  };
 
   handleSubmit = async () => {
     if (!can(this.props.currentUser, 'INTERACT_WITH_COMMUNITY')) {
@@ -79,39 +78,42 @@ export class EditableCommentContent extends React.Component {
       return;
     }
 
-    this.setState({loadingState: 'loading'});
+    this.setState({ loadingState: 'loading' });
 
-    const {editComment, notify, stopEditing} = this.props;
-    if (typeof editComment !== 'function') {return;}
+    const { editComment, notify, stopEditing } = this.props;
+    if (typeof editComment !== 'function') {
+      return;
+    }
     let response;
     try {
-      response = await editComment({body: this.state.body});
-      this.setState({loadingState: 'success'});
+      response = await editComment({ body: this.state.body });
+      this.setState({ loadingState: 'success' });
       const status = response.data.editComment.comment.status;
       notifyForNewCommentStatus(this.props.notify, status);
       if (typeof stopEditing === 'function') {
         stopEditing();
       }
     } catch (error) {
-      this.setState({loadingState: 'error'});
-      forEachError(error, ({msg}) => notify('error', msg));
+      this.setState({ loadingState: 'error' });
+      forEachError(error, ({ msg }) => notify('error', msg));
     }
-  }
+  };
 
   getEditableUntil = (props = this.props) => {
     return getEditableUntilDate(props.comment);
-  }
+  };
 
   isEditWindowExpired = (props = this.props) => {
-    return (this.getEditableUntil(props) - new Date()) < 0;
-  }
-
-  isSubmitEnabled = (comment) => {
+    return this.getEditableUntil(props) - new Date() < 0;
+  };
 
+  isSubmitEnabled = comment => {
     // should be disabled if user hasn't actually changed their
     // original comment
-    return (comment.body !== this.props.comment.body) && !this.isEditWindowExpired();
-  }
+    return (
+      comment.body !== this.props.comment.body && !this.isEditWindowExpired()
+    );
+  };
 
   render() {
     return (
@@ -135,24 +137,34 @@ export class EditableCommentContent extends React.Component {
           buttonContainerStart={
             <div className={styles.buttonContainerLeft}>
               <span className={styles.editWindowRemaining}>
-                {
-                  this.isEditWindowExpired()
-                    ? <span>
-                      {t('edit_comment.edit_window_expired')}
-                      {
-                        typeof this.props.stopEditing === 'function'
-                          ? <span>&nbsp;<a className={styles.link} onClick={this.props.stopEditing}>{t('edit_comment.edit_window_expired_close')}</a></span>
-                          : null
+                {this.isEditWindowExpired() ? (
+                  <span>
+                    {t('edit_comment.edit_window_expired')}
+                    {typeof this.props.stopEditing === 'function' ? (
+                      <span>
+                        &nbsp;<a
+                          className={styles.link}
+                          onClick={this.props.stopEditing}
+                        >
+                          {t('edit_comment.edit_window_expired_close')}
+                        </a>
+                      </span>
+                    ) : null}
+                  </span>
+                ) : (
+                  <span>
+                    <Icon name="timer" className={styles.timerIcon} />{' '}
+                    {t('edit_comment.edit_window_timer_prefix')}
+                    <CountdownSeconds
+                      until={this.getEditableUntil()}
+                      classNameForMsRemaining={remainingMs =>
+                        remainingMs <= 10 * 1000
+                          ? styles.editWindowAlmostOver
+                          : ''
                       }
-                    </span>
-                    : <span>
-                      <Icon name="timer" className={styles.timerIcon}/> {t('edit_comment.edit_window_timer_prefix')}
-                      <CountdownSeconds
-                        until={this.getEditableUntil()}
-                        classNameForMsRemaining={(remainingMs) => (remainingMs <= 10 * 1000) ? styles.editWindowAlmostOver : '' }
-                      />
-                    </span>
-                }
+                    />
+                  </span>
+                )}
               </span>
             </div>
           }
diff --git a/client/coral-embed-stream/src/tabs/stream/components/IgnoreUserWizard.js b/client/coral-embed-stream/src/tabs/stream/components/IgnoreUserWizard.js
index 68b92ae29..b872cedf2 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/IgnoreUserWizard.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/IgnoreUserWizard.js
@@ -1,28 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './Comment.css';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 
 // Guides the user through ignoring another user, including confirming their decision
 export class IgnoreUserWizard extends React.Component {
   static propTypes = {
-
     // comment on which this menu appears
     user: PropTypes.shape({
       id: PropTypes.string.isRequired,
-      username: PropTypes.string.isRequired
+      username: PropTypes.string.isRequired,
     }).isRequired,
     cancel: PropTypes.func.isRequired,
 
     // actually submit the ignore. Provide {id: user id to ignore}
     ignoreUser: PropTypes.func.isRequired,
-  }
+  };
   constructor(props) {
     super(props);
     this.state = {
-
       // what step of the wizard is the user on
-      step: 1
+      step: 1,
     };
     this.onClickCancel = this.onClickCancel.bind(this);
   }
@@ -30,38 +28,41 @@ export class IgnoreUserWizard extends React.Component {
     this.props.cancel();
   }
   render() {
-    const {user, ignoreUser} = this.props;
-    const goToStep = (stepNum) => this.setState({step: stepNum});
+    const { user, ignoreUser } = this.props;
+    const goToStep = stepNum => this.setState({ step: stepNum });
     const step1 = (
       <div>
         <header>Ignore User</header>
-        <p>When you ignore a user, all comments they wrote on the site will be hidden from you. You can undo this later from the Profile tab.</p>
+        <p>
+          When you ignore a user, all comments they wrote on the site will be
+          hidden from you. You can undo this later from the Profile tab.
+        </p>
         <div className={styles.textAlignRight}>
-          <Button cStyle='cancel' onClick={this.onClickCancel}>Cancel</Button>
+          <Button cStyle="cancel" onClick={this.onClickCancel}>
+            Cancel
+          </Button>
           <Button onClick={() => goToStep(2)}>Ignore user</Button>
         </div>
       </div>
     );
     const onClickIgnoreUser = async () => {
-      await ignoreUser({id: user.id});
+      await ignoreUser({ id: user.id });
     };
     const step2Confirmation = (
       <div>
         <header>Ignore User</header>
-        <p>Are you sure you want to ignore { user.username }?</p>
+        <p>Are you sure you want to ignore {user.username}?</p>
         <div className={styles.textAlignRight}>
-          <Button cStyle='cancel' onClick={this.onClickCancel}>Cancel</Button>
+          <Button cStyle="cancel" onClick={this.onClickCancel}>
+            Cancel
+          </Button>
           <Button onClick={onClickIgnoreUser}>Ignore user</Button>
         </div>
       </div>
     );
     const elsForStep = [step1, step2Confirmation];
-    const {step} = this.state;
+    const { step } = this.state;
     const elForThisStep = elsForStep[step - 1];
-    return (
-      <div className={styles.Wizard}>
-        { elForThisStep }
-      </div>
-    );
+    return <div className={styles.Wizard}>{elForThisStep}</div>;
   }
 }
diff --git a/client/coral-embed-stream/src/tabs/stream/components/InactiveCommentLabel.js b/client/coral-embed-stream/src/tabs/stream/components/InactiveCommentLabel.js
index 6655c4881..3f0360099 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/InactiveCommentLabel.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/InactiveCommentLabel.js
@@ -2,29 +2,32 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import styles from './InactiveCommentLabel.css';
-import {Icon} from 'coral-ui';
+import { Icon } from 'coral-ui';
 import cn from 'classnames';
 
-const InactiveCommentLabel = ({status, className, ...rest}) => {
+const InactiveCommentLabel = ({ status, className, ...rest }) => {
   let label;
   let icon;
 
   switch (status) {
-  case 'PREMOD':
-    label = t('modqueue.premod');
-    icon = 'query_builder';
-    break;
-  case 'REJECTED':
-    label = t('modqueue.rejected');
-    icon = 'close';
-    break;
-  default:
-    throw new Error(`Unknown inactive status ${status}`);
+    case 'PREMOD':
+      label = t('modqueue.premod');
+      icon = 'query_builder';
+      break;
+    case 'REJECTED':
+      label = t('modqueue.rejected');
+      icon = 'close';
+      break;
+    default:
+      throw new Error(`Unknown inactive status ${status}`);
   }
 
   return (
-    <span {...rest} className={cn(className, styles.root, styles[status.toLowerCase()])}>
-      <Icon name={icon} className={styles.icon}/>
+    <span
+      {...rest}
+      className={cn(className, styles.root, styles[status.toLowerCase()])}
+    >
+      <Icon name={icon} className={styles.icon} />
       <span className={styles.label}>{label}</span>
     </span>
   );
diff --git a/client/coral-embed-stream/src/tabs/stream/components/LoadMore.js b/client/coral-embed-stream/src/tabs/stream/components/LoadMore.js
index 4e9807751..a39f7837f 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/LoadMore.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/LoadMore.js
@@ -1,32 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
 
 class LoadMore extends React.Component {
-  replyCountFormat = (count) => {
+  replyCountFormat = count => {
     if (!count) {
       return t('framework.show_all_replies');
     }
 
     return t('framework.show_more_replies');
-  }
+  };
 
-  render () {
-    const {topLevel, moreComments, replyCount, loadingState, loadMore} = this.props;
+  render() {
+    const {
+      topLevel,
+      moreComments,
+      replyCount,
+      loadingState,
+      loadMore,
+    } = this.props;
     const disabled = loadingState === 'loading';
-    return moreComments
-      ? <div className='talk-load-more'>
+    return moreComments ? (
+      <div className="talk-load-more">
         <Button
           onClick={loadMore}
-          className={cn('talk-load-more-button', {[`talk-load-more-button-${loadingState}`]: loadingState})}
+          className={cn('talk-load-more-button', {
+            [`talk-load-more-button-${loadingState}`]: loadingState,
+          })}
           disabled={disabled}
         >
-          {topLevel ? t('framework.view_more_comments') : this.replyCountFormat(replyCount)}
+          {topLevel
+            ? t('framework.view_more_comments')
+            : this.replyCountFormat(replyCount)}
         </Button>
       </div>
-      : null;
+    ) : null;
   }
 }
 
diff --git a/client/coral-embed-stream/src/tabs/stream/components/NewCount.js b/client/coral-embed-stream/src/tabs/stream/components/NewCount.js
index 71f15fbeb..abb4f1e23 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/NewCount.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/NewCount.js
@@ -1,21 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 
 import t from 'coral-framework/services/i18n';
 
-const NewCount = ({count, loadMore}) => {
-  return <div className='talk-new-comments talk-load-more'>
-    {
-      count ?
+const NewCount = ({ count, loadMore }) => {
+  return (
+    <div className="talk-new-comments talk-load-more">
+      {count ? (
         <Button onClick={loadMore}>
           {count === 1
             ? t('framework.new_count', count, t('framework.comment'))
             : t('framework.new_count', count, t('framework.comments'))}
         </Button>
-        : null
-    }
-  </div>;
+      ) : null}
+    </div>
+  );
 };
 
 NewCount.propTypes = {
diff --git a/client/coral-embed-stream/src/tabs/stream/components/NoComments.js b/client/coral-embed-stream/src/tabs/stream/components/NoComments.js
index 378c908d6..5adfa42ed 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/NoComments.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/NoComments.js
@@ -4,10 +4,12 @@ import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import styles from './NoComments.css';
 
-const NoComments = ({assetClosed}) => (
+const NoComments = ({ assetClosed }) => (
   <div className="talk-stream-no-comments">
     {assetClosed ? (
-      <div className={cn(styles.message, 'talk-stream-no-comments-closed-message')}>
+      <div
+        className={cn(styles.message, 'talk-stream-no-comments-closed-message')}
+      >
         {t('stream.no_comments_and_closed')}
       </div>
     ) : (
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
index e37b91ba6..d82f49498 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js
@@ -1,29 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {StreamError} from './StreamError';
+import { StreamError } from './StreamError';
 import Comment from '../containers/Comment';
-import SuspendedAccount from './SuspendedAccount';
+import BannedAccount from '../../../components/BannedAccount';
+import ChangeUsername from '../containers/ChangeUsername';
 import Slot from 'coral-framework/components/Slot';
 import InfoBox from 'talk-plugin-infobox/InfoBox';
-import {can} from 'coral-framework/services/perms';
-import {ModerationLink} from 'talk-plugin-moderation';
-import RestrictedMessageBox
-  from 'coral-framework/components/RestrictedMessageBox';
-import t, {timeago} from 'coral-framework/services/i18n';
+import { can } from 'coral-framework/services/perms';
+import { ModerationLink } from 'talk-plugin-moderation';
+import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';
+import t, { timeago } from 'coral-framework/services/i18n';
 import CommentBox from 'talk-plugin-commentbox/CommentBox';
 import QuestionBox from '../../../components/QuestionBox';
-import {isCommentActive} from 'coral-framework/utils';
-import {Tab, TabCount, TabPane} from 'coral-ui';
+import { isCommentActive } from 'coral-framework/utils';
+import { Tab, TabCount, TabPane } from 'coral-ui';
 import cn from 'classnames';
+import get from 'lodash/get';
 
-import {getTopLevelParent, attachCommentToParent} from '../../../graphql/utils';
+import {
+  getTopLevelParent,
+  attachCommentToParent,
+} from '../../../graphql/utils';
 import AllCommentsPane from './AllCommentsPane';
 import ExtendableTabPanel from '../../../containers/ExtendableTabPanel';
 
 import styles from './Stream.css';
 
 class Stream extends React.Component {
-
   constructor(props) {
     super(props);
     this.state = {
@@ -32,10 +35,9 @@ class Stream extends React.Component {
   }
 
   componentWillReceiveProps(next) {
-
     // Keep comment box when user was live suspended, banned, ...
     if (!this.props.userIsDegraged && next.userIsDegraged) {
-      this.setState({keepCommentBox: true});
+      this.setState({ keepCommentBox: true });
     }
   }
 
@@ -47,7 +49,7 @@ class Stream extends React.Component {
       setActiveReplyBox,
       commentClassNames,
       asset,
-      asset: {comment},
+      asset: { comment },
       postComment,
       notify,
       editComment,
@@ -56,7 +58,7 @@ class Stream extends React.Component {
       deleteAction,
       showSignInDialog,
       loadNewReplies,
-      auth: {user},
+      auth: { user },
       emit,
       viewAllComments,
     } = this.props;
@@ -64,11 +66,9 @@ class Stream extends React.Component {
     // even though the permalinked comment is the highlighted one, we're displaying its parent + replies
     let topLevelComment = getTopLevelParent(comment);
     if (topLevelComment) {
-
       // Inactive comments can be viewed by moderators and admins (e.g. using permalinks).
       const isInactive = !isCommentActive(comment.status);
       if (comment.parent && isInactive) {
-
         // the highlighted comment is not active and as such not in the replies, so we
         // attach it to the right parent.
         topLevelComment = attachCommentToParent(topLevelComment, comment);
@@ -76,15 +76,29 @@ class Stream extends React.Component {
     }
 
     return (
-      <div className={cn('talk-stream-highlighted-container', styles.highlightedContainer)}>
-        <div className={cn('talk-stream-show-all-comments-button-container', styles.viewAllButtonContainer)}>
+      <div
+        className={cn(
+          'talk-stream-highlighted-container',
+          styles.highlightedContainer
+        )}
+      >
+        <div
+          className={cn(
+            'talk-stream-show-all-comments-button-container',
+            styles.viewAllButtonContainer
+          )}
+        >
           <button
-            className={cn('talk-stream-show-all-comments-button', styles.viewAllButton)}
+            className={cn(
+              'talk-stream-show-all-comments-button',
+              styles.viewAllButton
+            )}
             onClick={viewAllComments}
           >
             {t('framework.show_all_comments')}
           </button>
         </div>
+
         <Comment
           data={data}
           root={root}
@@ -123,7 +137,7 @@ class Stream extends React.Component {
       setActiveReplyBox,
       commentClassNames,
       asset,
-      asset: {comments, totalCommentCount},
+      asset: { comments, totalCommentCount },
       postComment,
       notify,
       editComment,
@@ -135,47 +149,45 @@ class Stream extends React.Component {
       setActiveStreamTab,
       loadNewReplies,
       loadMoreComments,
-      auth: {user},
+      auth: { user },
       emit,
       sortOrder,
       sortBy,
       loading,
     } = this.props;
 
-    const slotProps = {data};
-    const slotQueryData = {root, asset};
+    const slotProps = { data };
+    const slotQueryData = { root, asset };
 
     // `key` of `ExtendableTabPanel` depends on sorting so that we always reset
     // the state when changing sorting.
     return (
       <div className={cn('talk-stream-tab-container', styles.tabContainer)}>
-        <div
-          className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}
-        >
-          <Slot
-            fill="streamFilter"
-            queryData={slotQueryData}
-            {...slotProps}
-          />
+        <div className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}>
+          <Slot fill="streamFilter" queryData={slotQueryData} {...slotProps} />
         </div>
+
         <ExtendableTabPanel
           key={`${sortBy}_${sortOrder}`}
           activeTab={activeStreamTab}
           setActiveTab={setActiveStreamTab}
-          fallbackTab='all'
-          tabSlot='streamTabs'
-          tabSlotPrepend='streamTabsPrepend'
-          tabPaneSlot='streamTabPanes'
+          fallbackTab="all"
+          tabSlot="streamTabs"
+          tabSlotPrepend="streamTabsPrepend"
+          tabPaneSlot="streamTabPanes"
           slotProps={slotProps}
           queryData={slotQueryData}
           loading={loading}
           tabs={
-            <Tab tabId={'all'} key='all'>
-              {t('stream.all_comments')} <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
+            <Tab tabId={'all'} key="all">
+              {t('stream.all_comments')}{' '}
+              <TabCount active={activeStreamTab === 'all'} sub>
+                {totalCommentCount}
+              </TabCount>
             </Tab>
           }
           tabPanes={
-            <TabPane tabId='all' key='all'>
+            <TabPane tabId="all" key="all">
               <AllCommentsPane
                 data={data}
                 root={root}
@@ -185,7 +197,7 @@ class Stream extends React.Component {
                 setActiveReplyBox={setActiveReplyBox}
                 activeReplyBox={activeReplyBox}
                 notify={notify}
-                disableReply={!open}
+                disableReply={asset.isClosed}
                 postComment={postComment}
                 currentUser={user}
                 postFlag={postFlag}
@@ -213,31 +225,31 @@ class Stream extends React.Component {
       root,
       appendItemArray,
       asset,
-      asset: {
-        comment: highlightedComment,
-        settings: {
-          questionBoxEnable,
-        }
-      },
+      asset: { comment: highlightedComment, settings: { questionBoxEnable } },
       postComment,
       notify,
       updateItem,
-      auth: {loggedIn, user},
-      editName,
+      auth: { loggedIn, user },
     } = this.props;
-    const {keepCommentBox} = this.state;
+    const { keepCommentBox } = this.state;
     const open = !asset.isClosed;
 
-    const banned = user && user.status === 'BANNED';
+    const banned = get(user, 'status.banned.status');
+    const suspensionUntil = get(user, 'status.suspension.until');
+    const rejectedUsername = get(user, 'status.username.status') === 'REJECTED';
 
     const temporarilySuspended =
-      user &&
-      user.suspension.until &&
-      new Date(user.suspension.until) > new Date();
+      user && suspensionUntil && new Date(suspensionUntil) > new Date();
 
-    const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox);
-    const slotProps = {data};
-    const slotQueryData = {root, asset};
+    const showCommentBox =
+      loggedIn &&
+      ((!banned &&
+        !temporarilySuspended &&
+        !rejectedUsername &&
+        !highlightedComment) ||
+        keepCommentBox);
+    const slotProps = { data };
+    const slotQueryData = { root, asset };
 
     if (highlightedComment === null) {
       return <StreamError>{t('stream.comment_not_found')}</StreamError>;
@@ -245,8 +257,8 @@ class Stream extends React.Component {
 
     return (
       <div id="stream" className={styles.root}>
-        {open
-          ? <div id="commentBox">
+        {open ? (
+          <div id="commentBox">
             <InfoBox
               content={asset.settings.infoBoxContent}
               enable={asset.settings.infoBoxEnable}
@@ -254,7 +266,8 @@ class Stream extends React.Component {
             {questionBoxEnable && (
               <QuestionBox
                 content={asset.settings.questionBoxContent}
-                icon={asset.settings.questionBoxIcon}>
+                icon={asset.settings.questionBoxIcon}
+              >
                 <Slot
                   fill="streamQuestionArea"
                   queryData={slotQueryData}
@@ -263,41 +276,37 @@ class Stream extends React.Component {
               </QuestionBox>
             )}
             {!banned &&
-                temporarilySuspended &&
+              temporarilySuspended && (
                 <RestrictedMessageBox>
                   {t(
                     'stream.temporarily_suspended',
                     root.settings.organizationName,
-                    timeago(user.suspension.until)
+                    timeago(suspensionUntil)
                   )}
-                </RestrictedMessageBox>}
-            {banned &&
-                <SuspendedAccount
-                  canEditName={user && user.canEditName}
-                  editName={editName}
-                  currentUsername={user.username}
-                />}
-            {showCommentBox &&
-                <CommentBox
-                  notify={notify}
-                  postComment={postComment}
-                  appendItemArray={appendItemArray}
-                  updateItem={updateItem}
-                  assetId={asset.id}
-                  premod={asset.settings.moderation}
-                  isReply={false}
-                  currentUser={user}
-                  charCountEnable={asset.settings.charCountEnable}
-                  maxCharCount={asset.settings.charCount}
-                />}
+                </RestrictedMessageBox>
+              )}
+            {!banned && rejectedUsername && <ChangeUsername user={user} />}
+            {banned && <BannedAccount />}
+            {showCommentBox && (
+              <CommentBox
+                notify={notify}
+                postComment={postComment}
+                appendItemArray={appendItemArray}
+                updateItem={updateItem}
+                assetId={asset.id}
+                premod={asset.settings.moderation}
+                isReply={false}
+                currentUser={user}
+                charCountEnable={asset.settings.charCountEnable}
+                maxCharCount={asset.settings.charCount}
+              />
+            )}
           </div>
-          : <p>{asset.settings.closedMessage}</p>}
+        ) : (
+          <p>{asset.settings.closedMessage}</p>
+        )}
 
-        <Slot
-          fill="stream"
-          queryData={slotQueryData}
-          {...slotProps}
-        />
+        <Slot fill="stream" queryData={slotQueryData} {...slotProps} />
 
         {loggedIn && (
           <ModerationLink
@@ -308,14 +317,14 @@ class Stream extends React.Component {
 
         {highlightedComment
           ? this.renderHighlightedComment()
-          : this.renderExtendableTabPanel()
-        }
+          : this.renderExtendableTabPanel()}
       </div>
     );
   }
 }
 
 Stream.propTypes = {
+  asset: PropTypes.object,
   activeStreamTab: PropTypes.string,
   data: PropTypes.object,
   root: PropTypes.object,
diff --git a/client/coral-embed-stream/src/tabs/stream/components/StreamError.js b/client/coral-embed-stream/src/tabs/stream/components/StreamError.js
index 2c381c720..0955de2ef 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/StreamError.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/StreamError.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import styles from './StreamError.css';
 
-export const StreamError = ({children}) => (
-  <div className={styles.streamError}>
-    {children}
-  </div>
+export const StreamError = ({ children }) => (
+  <div className={styles.streamError}>{children}</div>
 );
diff --git a/client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.js b/client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.js
index 0369ef559..40ef8d628 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/SuspendedAccount.js
@@ -1,86 +1,91 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import t from 'coral-framework/services/i18n';
 import styles from './SuspendedAccount.css';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 import validate from 'coral-framework/helpers/validate';
 import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';
 
 class SuspendedAccount extends Component {
-
   static propTypes = {
     canEditName: PropTypes.bool,
     editName: PropTypes.func.isRequired,
     currentUsername: PropTypes.string.isRequired,
-  }
+  };
 
   state = {
     username: '',
-    alert: ''
-  }
+    alert: '',
+  };
 
-  onSubmitClick = (e) => {
-    const {editName} = this.props;
-    const {username} = this.state;
+  onSubmitClick = e => {
+    const { editName } = this.props;
+    const { username } = this.state;
     e.preventDefault();
 
     if (username === this.props.currentUsername) {
-      this.setState({alert: t('error.SAME_USERNAME_PROVIDED')});
-    }
-    else if (validate.username(username)) {
+      this.setState({ alert: t('error.SAME_USERNAME_PROVIDED') });
+    } else if (validate.username(username)) {
       editName(username)
         .then(() => location.reload())
-        .catch((error) => {
-          this.setState({alert: t(`error.${error.translation_key}`)});
+        .catch(error => {
+          this.setState({ alert: t(`error.${error.translation_key}`) });
         });
     } else {
-      this.setState({alert: t('framework.edit_name.error')});
+      this.setState({ alert: t('framework.edit_name.error') });
     }
+  };
 
-  }
+  render() {
+    const { canEditName } = this.props;
+    const { username, alert } = this.state;
 
-  render () {
-    const {canEditName} = this.props;
-    const {username, alert} = this.state;
-
-    return <RestrictedMessageBox>
-      <span>{
-        canEditName ?
-          t('framework.edit_name.msg')
-          :
-          <span>
-            <b>{t('framework.banned_account_header')}</b><br/> {t('framework.banned_account_body')}
-          </span>
-      }</span>
-      {
-        canEditName ?
+    return (
+      <RestrictedMessageBox>
+        <span>
+          {canEditName ? (
+            t('framework.edit_name.msg')
+          ) : (
+            <span>
+              <b>{t('framework.banned_account_header')}</b>
+              <br /> {t('framework.banned_account_body')}
+            </span>
+          )}
+        </span>
+        {canEditName ? (
           <div>
-            <div className={styles.alert}>
-              {alert}
-            </div>
+            <div className={styles.alert}>{alert}</div>
             <label
-              htmlFor='username'
+              htmlFor="username"
               className="screen-reader-text"
-              aria-hidden={true}>
+              aria-hidden={true}
+            >
               {t('framework.edit_name.label')}
             </label>
             <input
-              type='text'
-              className={cn(styles.editNameInput, 'talk-suspended-account-username-input')}
+              type="text"
+              className={cn(
+                styles.editNameInput,
+                'talk-suspended-account-username-input'
+              )}
               value={username}
               placeholder={t('framework.edit_name.label')}
-              id='username'
-              onChange={(e) => this.setState({username: e.target.value})}
-              rows={3}/><br/>
+              id="username"
+              onChange={e => this.setState({ username: e.target.value })}
+              rows={3}
+            />
+            <br />
             <Button
               className="talk-suspended-account-submit-button"
-              onClick={this.onSubmitClick} >
+              onClick={this.onSubmitClick}
+            >
               {t('framework.edit_name.button')}
             </Button>
-          </div> : null
-      }
-    </RestrictedMessageBox>;
+          </div>
+        ) : null}
+      </RestrictedMessageBox>
+    );
   }
 }
 
diff --git a/client/coral-embed-stream/src/tabs/stream/components/util.js b/client/coral-embed-stream/src/tabs/stream/components/util.js
index fe5258853..7a88983e3 100644
--- a/client/coral-embed-stream/src/tabs/stream/components/util.js
+++ b/client/coral-embed-stream/src/tabs/stream/components/util.js
@@ -3,8 +3,11 @@
  * @param {Object} comment
  * @returns {Date} when the comment can no longer be edited.
  */
-export const getEditableUntilDate = (comment) => {
+export const getEditableUntilDate = comment => {
   const editing = comment && comment.editing;
-  const editableUntil = editing && editing.editableUntil && new Date(Date.parse(editing.editableUntil));
-  return editableUntil;  
+  const editableUntil =
+    editing &&
+    editing.editableUntil &&
+    new Date(Date.parse(editing.editableUntil));
+  return editableUntil;
 };
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/ChangeUsername.js b/client/coral-embed-stream/src/tabs/stream/containers/ChangeUsername.js
new file mode 100644
index 000000000..cc0b84f02
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/stream/containers/ChangeUsername.js
@@ -0,0 +1,5 @@
+import { compose } from 'react-apollo';
+import { withChangeUsername } from 'coral-framework/graphql/mutations';
+import ChangeUsername from '../components/ChangeUsername';
+
+export default compose(withChangeUsername)(ChangeUsername);
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
index eb27517f7..9ed421273 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js
@@ -1,12 +1,12 @@
-import {gql, compose} from 'react-apollo';
+import { gql, compose } from 'react-apollo';
 import React from 'react';
 import Comment from '../components/Comment';
-import {withFragments} from 'coral-framework/hocs';
-import {getSlotFragmentSpreads} from 'coral-framework/utils';
-import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import {THREADING_LEVEL} from '../../../constants/stream';
+import { withFragments } from 'coral-framework/hocs';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
+import { withSetCommentStatus } from 'coral-framework/graphql/mutations';
+import { THREADING_LEVEL } from '../../../constants/stream';
 import hoistStatics from 'recompose/hoistStatics';
-import {nest} from '../../../graphql/utils';
+import { nest } from '../../../graphql/utils';
 
 const slots = [
   'streamQuestionArea',
@@ -28,7 +28,7 @@ const slots = [
  * from https://github.com/reactjs/react-transition-group and as such must
  * be the uppermost HOC applied to the BaseComponent.
  */
-const withAnimateEnter = hoistStatics((BaseComponent) => {
+const withAnimateEnter = hoistStatics(BaseComponent => {
   class WithAnimateEnter extends React.Component {
     state = {
       animateEnter: false,
@@ -41,20 +41,21 @@ const withAnimateEnter = hoistStatics((BaseComponent) => {
         return;
       }
       if (userId && this.props.comment.user.id === userId) {
-
         // This comment was just added by currentUser.
-        if (Date.now() - Number(new Date(this.props.comment.created_at)) < 30 * 1000) {
+        if (
+          Date.now() - Number(new Date(this.props.comment.created_at)) <
+          30 * 1000
+        ) {
           return;
         }
       }
-      this.setState({animateEnter: true});
+      this.setState({ animateEnter: true });
     }
 
     render() {
-      return <BaseComponent
-        {...this.props}
-        animateEnter={this.state.animateEnter}
-      />;
+      return (
+        <BaseComponent {...this.props} animateEnter={this.state.animateEnter} />
+      );
     }
   }
   return WithAnimateEnter;
@@ -115,7 +116,8 @@ const withCommentFragments = withFragments({
   comment: gql`
     fragment CoralEmbedStream_Comment_comment on Comment {
       ...CoralEmbedStream_Comment_SingleComment
-      ${nest(`
+      ${nest(
+        `
         replies(query: {limit: 3, excludeIgnored: $excludeIgnored}) {
           nodes {
             ...CoralEmbedStream_Comment_SingleComment
@@ -125,16 +127,18 @@ const withCommentFragments = withFragments({
           startCursor
           endCursor
         }
-      `, THREADING_LEVEL)}
+      `,
+        THREADING_LEVEL
+      )}
     }
     ${singleCommentFragment}
-  `
+  `,
 });
 
 const enhance = compose(
   withAnimateEnter,
   withCommentFragments,
-  withSetCommentStatus,
+  withSetCommentStatus
 );
 
 export default enhance(Comment);
diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
index e1a6e14c8..70cbadae5 100644
--- a/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
+++ b/client/coral-embed-stream/src/tabs/stream/containers/Stream.js
@@ -1,22 +1,35 @@
 import React from 'react';
-import {gql, compose} from 'react-apollo';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {ADDTL_COMMENTS_ON_LOAD_MORE, THREADING_LEVEL} from '../../../constants/stream';
+import { gql, compose } from 'react-apollo';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import {
-  withPostComment, withPostFlag, withPostDontAgree,
-  withDeleteAction, withEditComment
+  ADDTL_COMMENTS_ON_LOAD_MORE,
+  THREADING_LEVEL,
+} from '../../../constants/stream';
+import {
+  withPostComment,
+  withPostFlag,
+  withPostDontAgree,
+  withDeleteAction,
+  withEditComment,
 } from 'coral-framework/graphql/mutations';
 
 import * as authActions from 'coral-embed-stream/src/actions/auth';
 import * as notificationActions from 'coral-framework/actions/notification';
-import {setActiveReplyBox, setActiveTab, viewAllComments} from '../../../actions/stream';
+import {
+  setActiveReplyBox,
+  setActiveTab,
+  viewAllComments,
+} from '../../../actions/stream';
 import Stream from '../components/Stream';
 import Comment from './Comment';
-import {withFragments, withEmit} from 'coral-framework/hocs';
-import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
-import {Spinner} from 'coral-ui';
-import {can} from 'coral-framework/services/perms';
+import { withFragments, withEmit } from 'coral-framework/hocs';
+import {
+  getDefinitionName,
+  getSlotFragmentSpreads,
+} from 'coral-framework/utils';
+import { Spinner } from 'coral-ui';
+import { can } from 'coral-framework/services/perms';
 import {
   findCommentInEmbedQuery,
   findCommentInAsset,
@@ -26,8 +39,8 @@ import {
   nest,
 } from '../../../graphql/utils';
 
-const {showSignInDialog, editName} = authActions;
-const {notify} = notificationActions;
+const { showSignInDialog, editName } = authActions;
+const { notify } = notificationActions;
 
 class StreamContainer extends React.Component {
   commentsAddedSubscription = null;
@@ -39,11 +52,16 @@ class StreamContainer extends React.Component {
       variables: {
         assetId: this.props.asset.id,
       },
-      updateQuery: (prev, {subscriptionData: {data: {commentEdited}}}) => {
-
+      updateQuery: (
+        prev,
+        { subscriptionData: { data: { commentEdited } } }
+      ) => {
         // Ignore mutations from me.
         // TODO: need way to detect mutations created by this client, and allow mutations from other clients.
-        if (this.props.auth.user && commentEdited.user.id === this.props.auth.user.id) {
+        if (
+          this.props.auth.user &&
+          commentEdited.user.id === this.props.auth.user.id
+        ) {
           return prev;
         }
 
@@ -52,7 +70,11 @@ class StreamContainer extends React.Component {
           return prev;
         }
 
-        if (['PREMOD', 'REJECTED', 'SYSTEM_WITHHELD'].includes(commentEdited.status)) {
+        if (
+          ['PREMOD', 'REJECTED', 'SYSTEM_WITHHELD'].includes(
+            commentEdited.status
+          )
+        ) {
           return removeCommentFromEmbedQuery(prev, commentEdited.id);
         }
       },
@@ -65,18 +87,23 @@ class StreamContainer extends React.Component {
       variables: {
         assetId: this.props.asset.id,
       },
-      updateQuery: (prev, {subscriptionData: {data: {commentAdded}}}) => {
-
+      updateQuery: (prev, { subscriptionData: { data: { commentAdded } } }) => {
         // Ignore mutations from me.
         // TODO: need way to detect mutations created by this client, and allow mutations from other clients.
-        if (this.props.auth.user && commentAdded.user.id === this.props.auth.user.id) {
+        if (
+          this.props.auth.user &&
+          commentAdded.user.id === this.props.auth.user.id
+        ) {
           return prev;
         }
 
         // Exit if author is ignored.
         if (
           this.props.root.me &&
-          this.props.root.me.ignoredUsers.some(({id}) => id === commentAdded.user.id)) {
+          this.props.root.me.ignoredUsers.some(
+            ({ id }) => id === commentAdded.user.id
+          )
+        ) {
           return prev;
         }
 
@@ -108,7 +135,7 @@ class StreamContainer extends React.Component {
     }
   }
 
-  loadNewReplies = (parent_id) => {
+  loadNewReplies = parent_id => {
     const comment = findCommentInAsset(this.props.asset, parent_id);
 
     return this.props.data.fetchMore({
@@ -121,11 +148,11 @@ class StreamContainer extends React.Component {
         sortOrder: 'ASC',
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
-      updateQuery: (prev, {fetchMoreResult:{comments}}) => {
+      updateQuery: (prev, { fetchMoreResult: { comments } }) => {
         return insertFetchedCommentsIntoEmbedQuery(prev, comments, parent_id);
       },
     });
-  }
+  };
 
   loadMoreComments = () => {
     return this.props.data.fetchMore({
@@ -139,13 +166,13 @@ class StreamContainer extends React.Component {
         sortBy: this.props.data.variables.sortBy,
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
-      updateQuery: (prev, {fetchMoreResult:{comments}}) => {
+      updateQuery: (prev, { fetchMoreResult: { comments } }) => {
         return insertFetchedCommentsIntoEmbedQuery(prev, comments);
       },
     });
   };
 
-  isSortedByNewestFirst({sortBy, sortOrder} = this.props) {
+  isSortedByNewestFirst({ sortBy, sortOrder } = this.props) {
     return sortBy === 'CREATED_AT' && sortOrder === 'DESC';
   }
 
@@ -168,33 +195,39 @@ class StreamContainer extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.sortOrder !== nextProps.sortOrder || this.props.sortBy !== nextProps.sortBy) {
+    if (
+      this.props.sortOrder !== nextProps.sortOrder ||
+      this.props.sortBy !== nextProps.sortBy
+    ) {
       nextProps.data.refetch();
     }
   }
 
-  userIsDegraged({auth: {user}} = this.props) {
+  userIsDegraged({ auth: { user } } = this.props) {
     return !can(user, 'INTERACT_WITH_COMMUNITY');
   }
 
   render() {
-    if (!this.props.asset
-      || this.props.asset.comment === undefined
-      && !this.props.asset.comments
+    if (
+      !this.props.asset ||
+      (this.props.asset.comment === undefined && !this.props.asset.comments)
     ) {
       return <Spinner />;
     }
 
-    const streamLoading = this.props.refetching || this.props.data.loading;
+    // @TODO: Detect refetch when we have apollo 2.0.
+    const streamLoading = this.props.data.loading;
 
-    return <Stream
-      {...this.props}
-      loadMore={this.loadMore}
-      loadMoreComments={this.loadMoreComments}
-      loadNewReplies={this.loadNewReplies}
-      userIsDegraged={this.userIsDegraged()}
-      loading={streamLoading}
-    />;
+    return (
+      <Stream
+        {...this.props}
+        loadMore={this.loadMore}
+        loadMoreComments={this.loadMoreComments}
+        loadNewReplies={this.loadNewReplies}
+        userIsDegraged={this.userIsDegraged()}
+        loading={streamLoading}
+      />
+    );
   }
 }
 
@@ -211,8 +244,8 @@ const commentFragment = gql`
 `;
 
 const COMMENTS_ADDED_SUBSCRIPTION = gql`
-  subscription CommentAdded($assetId: ID!, $excludeIgnored: Boolean){
-    commentAdded(asset_id: $assetId){
+  subscription CommentAdded($assetId: ID!, $excludeIgnored: Boolean) {
+    commentAdded(asset_id: $assetId) {
       parent {
         id
       }
@@ -223,8 +256,8 @@ const COMMENTS_ADDED_SUBSCRIPTION = gql`
 `;
 
 const COMMENTS_EDITED_SUBSCRIPTION = gql`
-  subscription CommentEdited($assetId: ID!){
-    commentEdited(asset_id: $assetId){
+  subscription CommentEdited($assetId: ID!) {
+    commentEdited(asset_id: $assetId) {
       id
       body
       status
@@ -281,11 +314,23 @@ const fragments = {
   root: gql`
     fragment CoralEmbedStream_Stream_root on RootQuery {
       me {
-        status
+        state {
+          status {
+            username {
+              status
+            }
+            banned {
+              status
+            }
+            suspension {
+              until
+            }
+          }
+        }
         ignoredUsers {
           id
         }
-        roles
+        role
       }
       settings {
         organizationName
@@ -299,12 +344,15 @@ const fragments = {
     fragment CoralEmbedStream_Stream_asset on Asset {
       comment(id: $commentId) @include(if: $hasComment) {
         ...CoralEmbedStream_Stream_comment
-        ${nest(`
+        ${nest(
+          `
           parent {
             ...CoralEmbedStream_Stream_comment
             ...nest
           }
-        `, THREADING_LEVEL)}
+        `,
+          THREADING_LEVEL
+        )}
       }
       id
       title
@@ -342,9 +390,8 @@ const fragments = {
   `,
 };
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   auth: state.auth,
-  refetching: state.embed.refetching,
   activeReplyBox: state.stream.activeReplyBox,
   commentId: state.stream.commentId,
   assetId: state.stream.assetId,
@@ -359,15 +406,18 @@ const mapStateToProps = (state) => ({
   sortBy: state.stream.sortBy,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    showSignInDialog,
-    notify,
-    setActiveReplyBox,
-    editName,
-    viewAllComments,
-    setActiveStreamTab: setActiveTab,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      showSignInDialog,
+      notify,
+      setActiveReplyBox,
+      editName,
+      viewAllComments,
+      setActiveStreamTab: setActiveTab,
+    },
+    dispatch
+  );
 
 export default compose(
   withFragments(fragments),
@@ -377,5 +427,5 @@ export default compose(
   withPostFlag,
   withPostDontAgree,
   withDeleteAction,
-  withEditComment,
+  withEditComment
 )(StreamContainer);
diff --git a/client/coral-embed/src/Snackbar.js b/client/coral-embed/src/Snackbar.js
index 11219102d..67851ce4e 100644
--- a/client/coral-embed/src/Snackbar.js
+++ b/client/coral-embed/src/Snackbar.js
@@ -17,7 +17,7 @@ const DEFAULT_STYLE = {
   transform: 'translate(-50%, 20px)',
   bottom: 0,
   boxSizing: 'border-box',
-  fontFamily: 'Helvetica, "Helvetica Neue", Verdana, sans-serif'
+  fontFamily: 'Helvetica, "Helvetica Neue", Verdana, sans-serif',
 };
 
 export default class Snackbar {
@@ -38,7 +38,7 @@ export default class Snackbar {
   }
 
   alert(message) {
-    const {type, text} = JSON.parse(message);
+    const { type, text } = JSON.parse(message);
     this.el.style.transform = 'translate(-50%, 20px)';
     this.el.style.opacity = 0;
     this.el.className = `coral-notif-${type}`;
diff --git a/client/coral-embed/src/Stream.js b/client/coral-embed/src/Stream.js
index 4d8980834..b3258c271 100644
--- a/client/coral-embed/src/Stream.js
+++ b/client/coral-embed/src/Stream.js
@@ -1,9 +1,12 @@
 import queryString from 'query-string';
 import pym from 'pym.js';
 import EventEmitter from 'eventemitter2';
-import {buildUrl} from 'coral-framework/utils/url';
+import { buildUrl } from 'coral-framework/utils/url';
 import Snackbar from './Snackbar';
-import {createStorage, connectStorageToPym} from 'coral-framework/services/storage';
+import {
+  createStorage,
+  connectStorageToPym,
+} from 'coral-framework/services/storage';
 
 const NOTIFICATION_OFFSET = 200;
 
@@ -12,7 +15,7 @@ function buildStreamIframeUrl(talkBaseUrl, query) {
   let url = [
     talkBaseUrl,
     talkBaseUrl.match(/\/$/) ? '' : '/', // make sure no double-'/' if opts.talk already ends with '/'
-    'embed/stream?'
+    'embed/stream?',
   ].join('');
 
   url += queryString.stringify(query);
@@ -22,7 +25,8 @@ function buildStreamIframeUrl(talkBaseUrl, query) {
 
 // Get dimensions of viewport.
 function viewportDimensions() {
-  let e = window, a = 'inner';
+  let e = window,
+    a = 'inner';
   if (!('innerWidth' in window)) {
     a = 'client';
     e = document.documentElement || document.body;
@@ -30,7 +34,7 @@ function viewportDimensions() {
 
   return {
     width: e[`${a}Width`],
-    height: e[`${a}Height`]
+    height: e[`${a}Height`],
   };
 }
 
@@ -39,15 +43,20 @@ export default class Stream {
     this.query = query;
 
     // Extract the non-opts opts from the object.
-    const {events = null, snackBarStyles = null, onAuthChanged = null, ...opts} = config;
+    const {
+      events = null,
+      snackBarStyles = null,
+      onAuthChanged = null,
+      ...opts
+    } = config;
 
     this.opts = opts;
 
-    this.emitter = new EventEmitter({wildcard: true});
+    this.emitter = new EventEmitter({ wildcard: true });
     this.pym = new pym.Parent(el.id, buildStreamIframeUrl(talkBaseUrl, query), {
       title: opts.title,
       id: `${el.id}_iframe`,
-      name: `${el.id}_iframe`
+      name: `${el.id}_iframe`,
     });
     this.snackBar = new Snackbar(snackBarStyles || {});
 
@@ -57,7 +66,7 @@ export default class Stream {
 
     // Resize parent iframe height when child height changes
     let cachedHeight;
-    this.pym.onMessage('height', (height) => {
+    this.pym.onMessage('height', height => {
       if (height !== cachedHeight) {
         this.pym.el.firstChild.style.height = `${height}px`;
         cachedHeight = height;
@@ -75,7 +84,7 @@ export default class Stream {
 
     // If the auth changes, and someone is listening for it, then re-emit it.
     if (onAuthChanged) {
-      this.pym.onMessage('coral-auth-changed', (message) => {
+      this.pym.onMessage('coral-auth-changed', message => {
         onAuthChanged(message ? JSON.parse(message) : null);
       });
     }
@@ -91,21 +100,21 @@ export default class Stream {
       });
 
       // Remove the commentId url param.
-      const url = buildUrl({...location, search});
+      const url = buildUrl({ ...location, search });
 
       // Change the url.
       window.history.replaceState({}, document.title, url);
     });
 
     // Remove the permalink comment id from the hash.
-    this.pym.onMessage('coral-view-comment', (id) => {
+    this.pym.onMessage('coral-view-comment', id => {
       const search = queryString.stringify({
         ...queryString.parse(location.search),
         commentId: id,
       });
 
       // Remove the commentId url param.
-      const url = buildUrl({...location, search});
+      const url = buildUrl({ ...location, search });
 
       // Change the url.
       window.history.replaceState({}, document.title, url);
@@ -113,7 +122,7 @@ export default class Stream {
 
     // Helps child show notifications at the right scrollTop.
     this.pym.onMessage('getPosition', () => {
-      const {height} = viewportDimensions();
+      const { height } = viewportDimensions();
       let position = height + document.body.scrollTop;
 
       if (position > NOTIFICATION_OFFSET) {
@@ -124,13 +133,13 @@ export default class Stream {
     });
 
     // When end-user clicks link in iframe, open it in parent context
-    this.pym.onMessage('navigate', (url) => {
+    this.pym.onMessage('navigate', url => {
       window.open(url, '_blank').focus();
     });
 
     // Pass events from iframe to the event emitter.
-    this.pym.onMessage('event', (raw) => {
-      const {eventName, value} = JSON.parse(raw);
+    this.pym.onMessage('event', raw => {
+      const { eventName, value } = JSON.parse(raw);
       this.emitter.emit(eventName, value);
     });
 
@@ -150,7 +159,6 @@ export default class Stream {
   }
 
   remove() {
-
     // Remove the event listeners.
     document.removeEventListener('click', this.handleClick.bind(this));
     this.emitter.removeAllListeners();
diff --git a/client/coral-embed/src/index.js b/client/coral-embed/src/index.js
index 1c067757a..43bd3202e 100644
--- a/client/coral-embed/src/index.js
+++ b/client/coral-embed/src/index.js
@@ -5,13 +5,14 @@ import StreamInterface from './StreamInterface';
 // Rebuild the origin if it isn't defined. This is our poor-mans polyfill
 // for the location API's.
 if (!window.location.origin) {
-  window.location.origin = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}`;
+  window.location.origin = `${window.location.protocol}//${
+    window.location.hostname
+  }${window.location.port ? `:${window.location.port}` : ''}`;
 }
 
 // parses the Asset URL from the config variable
 function parseAssetURL() {
   try {
-
     // Try to get the url from the canonical tag on the page.
     return document.querySelector('link[rel="canonical"]').href;
   } catch (e) {
@@ -24,7 +25,6 @@ function parseAssetURL() {
 }
 
 export class Talk {
-
   /**
    * Render a Talk stream
    * @param {HTMLElement} element - Element to render the stream in
@@ -54,13 +54,19 @@ export class Talk {
    */
   static render(element, config) {
     if (!element) {
-      throw new Error('Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.');
+      throw new Error(
+        'Please provide Coral.Talk.render() the HTMLElement you want to render Talk in.'
+      );
     }
     if (typeof element !== 'object') {
-      throw new Error(`Coral.Talk.render() expected HTMLElement but got ${element} (${typeof element})`);
+      throw new Error(
+        `Coral.Talk.render() expected HTMLElement but got ${element} (${typeof element})`
+      );
     }
     if (!config || typeof config !== 'object' || !config.talk) {
-      throw new Error('Coral.Talk.render() expected configuration with at least opts.talk as the Talk Base URL, none found');
+      throw new Error(
+        'Coral.Talk.render() expected configuration with at least opts.talk as the Talk Base URL, none found'
+      );
     }
 
     // Ensure el has an id, as pym can't directly accept the HTMLElement.
diff --git a/client/coral-framework/actions/notification.js b/client/coral-framework/actions/notification.js
index 872936d15..819761b0e 100644
--- a/client/coral-framework/actions/notification.js
+++ b/client/coral-framework/actions/notification.js
@@ -1,22 +1,22 @@
 import * as actions from '../constants/notification';
 
-export const notify = (kind, msg) => (dispatch, _, {notification}) => {
+export const notify = (kind, msg) => (dispatch, _, { notification }) => {
   const messages = Array.isArray(msg) ? msg : [msg];
 
-  messages.forEach((message) => {
+  messages.forEach(message => {
     switch (kind) {
-    case 'error':
-      notification.error(message);
-      break;
-    case 'info':
-      notification.info(message);
-      break;
-    case 'success':
-      notification.success(message);
-      break;
-    default:
-      throw new Error(`Unknown notification kind ${kind}`);
+      case 'error':
+        notification.error(message);
+        break;
+      case 'info':
+        notification.info(message);
+        break;
+      case 'success':
+        notification.success(message);
+        break;
+      default:
+        throw new Error(`Unknown notification kind ${kind}`);
     }
-    dispatch({type: actions.NOTIFY, kind, message});
+    dispatch({ type: actions.NOTIFY, kind, message });
   });
 };
diff --git a/client/coral-framework/components/ClickOutside.js b/client/coral-framework/components/ClickOutside.js
index 054a9e6fe..49dec5963 100644
--- a/client/coral-framework/components/ClickOutside.js
+++ b/client/coral-framework/components/ClickOutside.js
@@ -1,10 +1,11 @@
-import {Component, cloneElement, Children} from 'react';
+import { Component, cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
-import {findDOMNode} from 'react-dom';
+import { findDOMNode } from 'react-dom';
 
 export default class ClickOutside extends Component {
   static propTypes = {
-    onClickOutside: PropTypes.func.isRequired
+    onClickOutside: PropTypes.func,
+    children: PropTypes.node,
   };
 
   static contextTypes = {
@@ -13,15 +14,15 @@ export default class ClickOutside extends Component {
 
   domNode = null;
 
-  handleClick = (e) => {
-    const {onClickOutside} = this.props;
+  handleClick = e => {
+    const { onClickOutside } = this.props;
     if (!e || !this.domNode.contains(e.target)) {
-      onClickOutside(e);
+      onClickOutside && onClickOutside(e);
     }
   };
 
   componentDidMount() {
-    const {pym} = this.context;
+    const { pym } = this.context;
     this.domNode = findDOMNode(this);
     document.addEventListener('click', this.handleClick, true);
     if (pym) {
@@ -30,15 +31,17 @@ export default class ClickOutside extends Component {
   }
 
   componentWillUnmount() {
-    const {pym} = this.context;
+    const { pym } = this.context;
     document.removeEventListener('click', this.handleClick, true);
     if (pym) {
-      pym.messageHandlers.click = pym.messageHandlers.click.filter((h) => h !== this.handleClick);
+      pym.messageHandlers.click = pym.messageHandlers.click.filter(
+        h => h !== this.handleClick
+      );
     }
   }
 
   render() {
-    const {children, onClickOutside: _, ...rest} = this.props;
+    const { children, onClickOutside: _, ...rest } = this.props;
     return cloneElement(Children.only(children), rest);
   }
 }
diff --git a/client/coral-framework/components/CommentAuthorName.js b/client/coral-framework/components/CommentAuthorName.js
index 5a2e60c70..78404fab0 100644
--- a/client/coral-framework/components/CommentAuthorName.js
+++ b/client/coral-framework/components/CommentAuthorName.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import styles from './CommentAuthorName.css';
 
-const CommentAuthorName = ({comment}) => 
-  <span className={styles.authorName}>
-    {comment.user.username}
-  </span>;
+const CommentAuthorName = ({ comment }) => (
+  <span className={styles.authorName}>{comment.user.username}</span>
+);
 
 export default CommentAuthorName;
diff --git a/client/coral-framework/components/CommentContent.js b/client/coral-framework/components/CommentContent.js
index 0895ab6d5..82bedaa00 100644
--- a/client/coral-framework/components/CommentContent.js
+++ b/client/coral-framework/components/CommentContent.js
@@ -1,19 +1,21 @@
 import React from 'react';
 
-const CommentContent = ({comment}) => {
+const CommentContent = ({ comment }) => {
   const textbreaks = comment.body.split('\n');
-  return <span className={`${name}-text`}>
-    {
-      textbreaks.map((line, i) => {
+  return (
+    <span className={`${name}-text`}>
+      {textbreaks.map((line, i) => {
         return (
           <span key={i} className={`${name}-line`}>
             {line}
-            {i === textbreaks.length - 1 && <br className={`${name}-linebreak`}/>}
+            {i === textbreaks.length - 1 && (
+              <br className={`${name}-linebreak`} />
+            )}
           </span>
         );
-      })
-    }
-  </span>;
+      })}
+    </span>
+  );
 };
 
 export default CommentContent;
diff --git a/client/coral-framework/components/CommentDetail.css b/client/coral-framework/components/CommentDetail.css
index 4806b9522..f5bb33bf2 100644
--- a/client/coral-framework/components/CommentDetail.css
+++ b/client/coral-framework/components/CommentDetail.css
@@ -12,18 +12,18 @@
   margin: 0;
   font-weight: 500;
   display: inline-block;
-  font-size: 12px;
+  font-size: 13px;
   line-height: 12px;
   margin-right: 7px;
 }
 
 .info {
-  font-size: 12px;
+  font-size: 13px;
 }
 
 .details {
   padding: 0 20px 16px;
-  font-size: 12px;
+  font-size: 13px;
 
   &:empty {
     display: none;
@@ -32,6 +32,6 @@
 
 .icon {
   vertical-align: middle;
-  font-size: 12px;
+  font-size: 13px;
   margin-right: 7px;
 }
diff --git a/client/coral-framework/components/CommentDetail.js b/client/coral-framework/components/CommentDetail.js
index 2e1a89089..ceabe4cf3 100644
--- a/client/coral-framework/components/CommentDetail.js
+++ b/client/coral-framework/components/CommentDetail.js
@@ -2,21 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './CommentDetail.css';
-import {Icon} from 'coral-ui';
+import { Icon } from 'coral-ui';
 
-const CommentDetail = ({icon, header, info, children, className}) => {
+const CommentDetail = ({ icon, header, info, children, className }) => {
   return (
     <div className={cn(className, styles.root)}>
       <div className={styles.headerContainer}>
-        {icon && <Icon className={styles.icon} name={icon}/>}
+        {icon && <Icon className={styles.icon} name={icon} />}
         <h3 className={styles.header}>{header}:</h3>
         <div className={styles.info}>{info}</div>
       </div>
-      {children &&
-        <div className={styles.details}>
-          {children}
-        </div>
-      }
+      {children && <div className={styles.details}>{children}</div>}
     </div>
   );
 };
diff --git a/client/coral-framework/components/CommentTimestamp.js b/client/coral-framework/components/CommentTimestamp.js
index 0d1c72f2b..8e4466f7b 100644
--- a/client/coral-framework/components/CommentTimestamp.js
+++ b/client/coral-framework/components/CommentTimestamp.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {timeago} from 'coral-framework/services/i18n';
+import { timeago } from 'coral-framework/services/i18n';
 import cn from 'classnames';
 import styles from './CommentTimestamp.css';
 
-const CommentTimestamp = ({className, created_at}) => (
+const CommentTimestamp = ({ className, created_at }) => (
   <div className={cn(className, styles.timestamp, 'talk-comment-timestamp')}>
     {timeago(created_at)}
   </div>
diff --git a/client/coral-framework/components/ConfigureCard.js b/client/coral-framework/components/ConfigureCard.js
index b7198a480..703733a7d 100644
--- a/client/coral-framework/components/ConfigureCard.js
+++ b/client/coral-framework/components/ConfigureCard.js
@@ -1,33 +1,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './ConfigureCard.css';
-import {Card} from 'coral-ui';
-import {Checkbox} from 'react-mdl';
+import { Card } from 'coral-ui';
+import { Checkbox } from 'react-mdl';
 import cn from 'classnames';
 
-const ConfigureCard = ({title, children, className, onCheckbox, checked, ...rest}) => (
-  <Card {...rest} className={cn(
-    styles.card,
-    className,
-    {
+const ConfigureCard = ({
+  title,
+  children,
+  className,
+  onCheckbox,
+  checked,
+  ...rest
+}) => (
+  <Card
+    {...rest}
+    className={cn(styles.card, className, {
       [styles.enabledSetting]: checked === true,
       [styles.disabledSetting]: checked === false,
-    },
-  )}>
-    {checked !== undefined &&
+    })}
+  >
+    {checked !== undefined && (
       <div className={styles.action}>
-        <Checkbox
-          onChange={onCheckbox}
-          checked={checked} />
+        <Checkbox onChange={onCheckbox} checked={checked} />
       </div>
-    }
-    <div className={cn(styles.wrapper, {
-      [styles.content]: checked !== undefined,
-    })}>
+    )}
+    <div
+      className={cn(styles.wrapper, {
+        [styles.content]: checked !== undefined,
+      })}
+    >
       <div className={styles.header}>{title}</div>
-      <div className={cn({
-        [styles.disabledSettingText]: checked === false,
-      })}>
+      <div
+        className={cn({
+          [styles.disabledSettingText]: checked === false,
+        })}
+      >
         {children}
       </div>
     </div>
diff --git a/client/coral-framework/components/IfSlotIsEmpty.js b/client/coral-framework/components/IfSlotIsEmpty.js
index 8470fadba..9aebd94c6 100644
--- a/client/coral-framework/components/IfSlotIsEmpty.js
+++ b/client/coral-framework/components/IfSlotIsEmpty.js
@@ -1,7 +1,7 @@
-import React, {Children} from 'react';
-import {connect} from 'react-redux';
+import React, { Children } from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import {getShallowChanges} from 'coral-framework/utils';
+import { getShallowChanges } from 'coral-framework/utils';
 
 class IfSlotIsEmpty extends React.Component {
   static contextTypes = {
@@ -9,7 +9,6 @@ class IfSlotIsEmpty extends React.Component {
   };
 
   shouldComponentUpdate(next) {
-
     // Prevent Slot from rerendering when only reduxState has changed and
     // it does not result in a change.
     const changes = getShallowChanges(this.props, next);
@@ -22,13 +21,23 @@ class IfSlotIsEmpty extends React.Component {
   }
 
   isSlotEmpty(props = this.props) {
-    const {slot, className: _a, reduxState, component: _b = 'div', children: _c, queryData, ...rest} = props;
+    const {
+      slot,
+      className: _a,
+      reduxState,
+      component: _b = 'div',
+      children: _c,
+      queryData,
+      ...rest
+    } = props;
     const slots = Array.isArray(slot) ? slot : [slot];
-    return slots.every((slot) => this.context.plugins.isSlotEmpty(slot, reduxState, rest, queryData));
+    return slots.every(slot =>
+      this.context.plugins.isSlotEmpty(slot, reduxState, rest, queryData)
+    );
   }
 
   render() {
-    const {children} = this.props;
+    const { children } = this.props;
     return this.isSlotEmpty() ? Children.only(children) : null;
   }
 }
@@ -37,9 +46,8 @@ IfSlotIsEmpty.propTypes = {
   slot: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
 };
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(IfSlotIsEmpty);
-
diff --git a/client/coral-framework/components/IfSlotIsNotEmpty.js b/client/coral-framework/components/IfSlotIsNotEmpty.js
index a498ad3aa..03f300858 100644
--- a/client/coral-framework/components/IfSlotIsNotEmpty.js
+++ b/client/coral-framework/components/IfSlotIsNotEmpty.js
@@ -1,7 +1,7 @@
-import React, {Children} from 'react';
-import {connect} from 'react-redux';
+import React, { Children } from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import {getShallowChanges} from 'coral-framework/utils';
+import { getShallowChanges } from 'coral-framework/utils';
 
 class IfSlotIsNotEmpty extends React.Component {
   static contextTypes = {
@@ -9,7 +9,6 @@ class IfSlotIsNotEmpty extends React.Component {
   };
 
   shouldComponentUpdate(next) {
-
     // Prevent Slot from rerendering when only reduxState has changed and
     // it does not result in a change.
     const changes = getShallowChanges(this.props, next);
@@ -22,13 +21,23 @@ class IfSlotIsNotEmpty extends React.Component {
   }
 
   isSlotEmpty(props = this.props) {
-    const {slot, className: _a, reduxState, component: _b = 'div', children: _c, queryData, ...rest} = props;
+    const {
+      slot,
+      className: _a,
+      reduxState,
+      component: _b = 'div',
+      children: _c,
+      queryData,
+      ...rest
+    } = props;
     const slots = Array.isArray(slot) ? slot : [slot];
-    return slots.every((slot) => this.context.plugins.isSlotEmpty(slot, reduxState, rest, queryData));
+    return slots.every(slot =>
+      this.context.plugins.isSlotEmpty(slot, reduxState, rest, queryData)
+    );
   }
 
   render() {
-    const {children} = this.props;
+    const { children } = this.props;
     return this.isSlotEmpty() ? null : Children.only(children);
   }
 }
@@ -37,9 +46,8 @@ IfSlotIsNotEmpty.propTypes = {
   slot: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
 };
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(IfSlotIsNotEmpty);
-
diff --git a/client/coral-framework/components/Markdown.js b/client/coral-framework/components/Markdown.js
index d9d1bc4a7..0059a6ec6 100644
--- a/client/coral-framework/components/Markdown.js
+++ b/client/coral-framework/components/Markdown.js
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import marked from 'marked';
 
@@ -6,19 +6,20 @@ const renderer = new marked.Renderer();
 
 // Set link target to `_parent` to work properly in an embed.
 renderer.link = (href, title, text) =>
-  `<a target="_parent" href="${href}" ${title ? `title="${title}"` : ''}>${text}</a>`;
+  `<a target="_parent" href="${href}" ${
+    title ? `title="${title}"` : ''
+  }>${text}</a>`;
 
-marked.setOptions({renderer});
+marked.setOptions({ renderer });
 
 export default class Markdown extends PureComponent {
   render() {
-    const {content, ...rest} = this.props;
+    const { content, ...rest } = this.props;
     const __html = marked(content);
-    return <div {...rest} dangerouslySetInnerHTML={{__html}} />;
+    return <div {...rest} dangerouslySetInnerHTML={{ __html }} />;
   }
 }
 
 Markdown.propTypes = {
   content: PropTypes.string,
 };
-
diff --git a/client/coral-framework/components/MarkdownEditor.js b/client/coral-framework/components/MarkdownEditor.js
index 451a06019..e9658ec69 100644
--- a/client/coral-framework/components/MarkdownEditor.js
+++ b/client/coral-framework/components/MarkdownEditor.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import SimpleMDE from 'simplemde';
 import cn from 'classnames';
@@ -95,12 +95,11 @@ const config = {
   ],
 };
 
-export default class MarkdownEditor extends Component  {
+export default class MarkdownEditor extends Component {
+  textarea = null;
+  editor = null;
 
-  textarea = null
-  editor = null
-
-  onRef = (ref) => this.textarea = ref
+  onRef = ref => (this.textarea = ref);
 
   componentDidMount() {
     this.editor = new SimpleMDE({
@@ -116,13 +115,15 @@ export default class MarkdownEditor extends Component  {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.value !== nextProps.value && nextProps.value !== this.editor.value()) {
+    if (
+      this.props.value !== nextProps.value &&
+      nextProps.value !== this.editor.value()
+    ) {
       this.editor.value(nextProps.value);
     }
   }
 
   componentDidUpdate() {
-
     // Workaround empty render issue.
     // https://github.com/NextStepWebs/simplemde-markdown-editor/issues/313
     this.editor.codemirror.refresh();
@@ -136,7 +137,7 @@ export default class MarkdownEditor extends Component  {
     if (this.props.onChange) {
       this.props.onChange(this.editor.value());
     }
-  }
+  };
 
   render() {
     return (
diff --git a/client/coral-framework/components/Popup.js b/client/coral-framework/components/Popup.js
index 41a37237a..53d8f7cd8 100644
--- a/client/coral-framework/components/Popup.js
+++ b/client/coral-framework/components/Popup.js
@@ -1,4 +1,4 @@
-import {Component} from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 
 export default class Popup extends Component {
@@ -15,11 +15,7 @@ export default class Popup extends Component {
   }
 
   openWindow(props = this.props) {
-    this.ref = window.open(
-      props.href,
-      props.title,
-      props.features,
-    );
+    this.ref = window.open(props.href, props.title, props.features);
 
     this.setCallbacks();
 
@@ -96,31 +92,31 @@ export default class Popup extends Component {
     if (this.props.onLoad) {
       this.props.onLoad();
     }
-  }
+  };
 
   onUnload = () => {
     if (this.props.onUnload) {
       this.props.onUnload();
     }
-  }
+  };
 
   onClose = () => {
     if (this.props.onClose) {
       this.props.onClose();
     }
-  }
+  };
 
   onFocus = () => {
     if (this.props.onFocus) {
       this.props.onFocus();
     }
-  }
+  };
 
   onBlur = () => {
     if (this.props.onBlur) {
       this.props.onBlur();
     }
-  }
+  };
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.open && !this.ref) {
diff --git a/client/coral-framework/components/RestrictedContent.js b/client/coral-framework/components/RestrictedContent.js
index 02df566a4..7a23aa065 100644
--- a/client/coral-framework/components/RestrictedContent.js
+++ b/client/coral-framework/components/RestrictedContent.js
@@ -3,15 +3,20 @@ import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import RestrictedMessageBox from './RestrictedMessageBox';
 
-const RestrictedContent = ({children, restricted, message = t('framework.content_not_available'), restrictedComp}) => {
+const RestrictedContent = ({
+  children,
+  restricted,
+  message = t('framework.content_not_available'),
+  restrictedComp,
+}) => {
   if (restricted) {
-    return restrictedComp ? restrictedComp : <RestrictedMessageBox message={message} />;
-  } else {
-    return (
-      <div className="talk-restricted-content">
-        {children}
-      </div>
+    return restrictedComp ? (
+      restrictedComp
+    ) : (
+      <RestrictedMessageBox message={message} />
     );
+  } else {
+    return <div className="talk-restricted-content">{children}</div>;
   }
 };
 
diff --git a/client/coral-framework/components/RestrictedMessageBox.js b/client/coral-framework/components/RestrictedMessageBox.js
index 05c8c89aa..f0dea5c30 100644
--- a/client/coral-framework/components/RestrictedMessageBox.js
+++ b/client/coral-framework/components/RestrictedMessageBox.js
@@ -3,8 +3,11 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './RestrictedMessageBox.css';
 
-const RestrictedMessageBox = ({children}) => 
-  <div className={cn(styles.message, 'talk-restricted-message-box')}>{children}</div>;
+const RestrictedMessageBox = ({ children }) => (
+  <div className={cn(styles.message, 'talk-restricted-message-box')}>
+    {children}
+  </div>
+);
 
 RestrictedMessageBox.propTypes = {
   children: PropTypes.node,
diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js
index 0404df80f..af524b21d 100644
--- a/client/coral-framework/components/Slot.js
+++ b/client/coral-framework/components/Slot.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './Slot.css';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import kebabCase from 'lodash/kebabCase';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
-import {getShallowChanges} from 'coral-framework/utils';
+import { getShallowChanges } from 'coral-framework/utils';
 
 const emptyConfig = {};
 
@@ -15,13 +15,14 @@ class Slot extends React.Component {
   };
 
   shouldComponentUpdate(next) {
-
     // Prevent Slot from rerendering when only reduxState has changed and
     // it does not result in a change of slot children.
     const changes = getShallowChanges(this.props, next);
     if (changes.length === 1 && changes[0] === 'reduxState') {
-      const prevChildrenKeys = this.getChildren(this.props).map((child) => child.key);
-      const nextChildrenKeys = this.getChildren(next).map((child) => child.key);
+      const prevChildrenKeys = this.getChildren(this.props).map(
+        child => child.key
+      );
+      const nextChildrenKeys = this.getChildren(next).map(child => child.key);
       return !isEqual(prevChildrenKeys, nextChildrenKeys);
     }
 
@@ -45,8 +46,13 @@ class Slot extends React.Component {
   }
 
   getChildren(props = this.props) {
-    const {plugins} = this.context;
-    return plugins.getSlotElements(props.fill, props.reduxState, this.getSlotProps(props), props.queryData);
+    const { plugins } = this.context;
+    return plugins.getSlotElements(
+      props.fill,
+      props.reduxState,
+      this.getSlotProps(props),
+      props.queryData
+    );
   }
 
   render() {
@@ -60,11 +66,16 @@ class Slot extends React.Component {
       queryData,
       fill,
     } = this.props;
-    const {plugins} = this.context;
+    const { plugins } = this.context;
     let children = this.getChildren();
     const pluginConfig = reduxState.config.pluginConfig || emptyConfig;
     if (children.length === 0 && DefaultComponent) {
-      const props = plugins.getSlotComponentProps(DefaultComponent, reduxState, this.getSlotProps(this.props), queryData);
+      const props = plugins.getSlotComponentProps(
+        DefaultComponent,
+        reduxState,
+        this.getSlotProps(this.props),
+        queryData
+      );
       children = <DefaultComponent {...props} />;
     }
 
@@ -73,7 +84,13 @@ class Slot extends React.Component {
     }
 
     return (
-      <Component className={cn({[styles.inline]: inline, [styles.debug]: pluginConfig.debug}, className, `talk-slot-${kebabCase(fill)}`)}>
+      <Component
+        className={cn(
+          { [styles.inline]: inline, [styles.debug]: pluginConfig.debug },
+          className,
+          `talk-slot-${kebabCase(fill)}`
+        )}
+      >
         {children}
       </Component>
     );
@@ -89,19 +106,13 @@ Slot.propTypes = {
   inline: PropTypes.bool,
   className: PropTypes.string,
   reduxState: PropTypes.object,
-  defaultComponent: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.string,
-  ]),
+  defaultComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
   /**
    * You may specify the component to use as the root wrapper.
    * Defaults to 'div'.
    */
-  component: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.string,
-  ]),
+  component: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
   // props coming from graphql must be passed through this property.
   queryData: PropTypes.object,
@@ -119,9 +130,8 @@ Slot.propTypes = {
   childFactory: PropTypes.func,
 };
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   reduxState: state,
 });
 
 export default connect(mapStateToProps, null)(Slot);
-
diff --git a/client/coral-framework/components/StreamConfiguration.js b/client/coral-framework/components/StreamConfiguration.js
index 6331e8230..63b978421 100644
--- a/client/coral-framework/components/StreamConfiguration.js
+++ b/client/coral-framework/components/StreamConfiguration.js
@@ -6,30 +6,40 @@ import styles from './StreamConfiguration.css';
 import uuid from 'uuid/v4';
 
 class Configuration extends React.Component {
-
   id = uuid();
 
   render() {
-    const {title, description, children, className, onCheckbox, checked, ...rest} = this.props;
+    const {
+      title,
+      description,
+      children,
+      className,
+      onCheckbox,
+      checked,
+      ...rest
+    } = this.props;
     return (
       <div {...rest} className={cn(styles.root, className)}>
-        {checked !== undefined &&
+        {checked !== undefined && (
           <div className={styles.action}>
             <Checkbox
               id={this.id}
               className={styles.checkbox}
               onChange={onCheckbox}
-              checked={checked} />
+              checked={checked}
+            />
           </div>
-        }
-        <div className={cn(styles.wrapper, {
-          [styles.content]: checked !== undefined,
-        })}>
-          <label htmlFor={this.id} className={styles.title}>{title}</label>
+        )}
+        <div
+          className={cn(styles.wrapper, {
+            [styles.content]: checked !== undefined,
+          })}
+        >
+          <label htmlFor={this.id} className={styles.title}>
+            {title}
+          </label>
           <div className={styles.description}>{description}</div>
-          <div>
-            {children}
-          </div>
+          <div>{children}</div>
         </div>
       </div>
     );
diff --git a/client/coral-framework/components/TalkProvider.js b/client/coral-framework/components/TalkProvider.js
index 1b9c5ca9c..73dd4d86d 100644
--- a/client/coral-framework/components/TalkProvider.js
+++ b/client/coral-framework/components/TalkProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 const PropTypes = require('prop-types');
-import {ApolloProvider} from 'react-apollo';
+import { ApolloProvider } from 'react-apollo';
 
 class TalkProvider extends React.Component {
   getChildContext() {
@@ -18,12 +18,8 @@ class TalkProvider extends React.Component {
   }
 
   render() {
-    const {children, client} = this.props;
-    return (
-      <ApolloProvider client={client}>
-        {children}
-      </ApolloProvider>
-    );
+    const { children, client } = this.props;
+    return <ApolloProvider client={client}>{children}</ApolloProvider>;
   }
 }
 
diff --git a/client/coral-framework/components/__tests__/Markdown.spec.js b/client/coral-framework/components/__tests__/Markdown.spec.js
index ab2c1afd1..d869555c4 100644
--- a/client/coral-framework/components/__tests__/Markdown.spec.js
+++ b/client/coral-framework/components/__tests__/Markdown.spec.js
@@ -1,18 +1,18 @@
 import React from 'react';
-import {shallow} from 'enzyme';
+import { shallow } from 'enzyme';
 import Markdown from '../Markdown';
 
-const render = (props) => shallow(<Markdown {...props} />);
+const render = props => shallow(<Markdown {...props} />);
 
 describe('Markdown', () => {
   it('should convert Markdown to html', () => {
-    const wrapper = render({content: '*test*'});
+    const wrapper = render({ content: '*test*' });
     const html = wrapper.html();
     expect(html).toMatch('<em>');
   });
 
   it('should set target="_parent" for links', () => {
-    const wrapper = render({content: '[link](https://coralproject.net)'});
+    const wrapper = render({ content: '[link](https://coralproject.net)' });
     const html = wrapper.html();
     expect(html).toMatch('target="_parent"');
   });
diff --git a/client/coral-framework/components/index.js b/client/coral-framework/components/index.js
index 8ad08aa09..ebadfa037 100644
--- a/client/coral-framework/components/index.js
+++ b/client/coral-framework/components/index.js
@@ -1,2 +1,2 @@
-export {default as Slot} from './Slot';
-export {default as CommentAuthorName} from './CommentAuthorName';
+export { default as Slot } from './Slot';
+export { default as CommentAuthorName } from './CommentAuthorName';
diff --git a/client/coral-framework/constants/url.js b/client/coral-framework/constants/url.js
index 92144bdec..fccc3e717 100644
--- a/client/coral-framework/constants/url.js
+++ b/client/coral-framework/constants/url.js
@@ -1,7 +1,7 @@
 import url from 'url';
 
 const base = document.querySelector('base');
-const baseUrl = base && url.parse(base.href) || {};
+const baseUrl = (base && url.parse(base.href)) || {};
 
 export const BASE_URL = base.href;
 export const BASE_PATH = baseUrl.pathname;
diff --git a/client/coral-framework/graphql/anywhere.js b/client/coral-framework/graphql/anywhere.js
index 7a93f16ea..644757a3f 100644
--- a/client/coral-framework/graphql/anywhere.js
+++ b/client/coral-framework/graphql/anywhere.js
@@ -1,5 +1,5 @@
 import graphql from '@coralproject/graphql-anywhere-optimized';
-import {createTypeGetter} from 'graphql-ast-tools';
+import { createTypeGetter } from 'graphql-ast-tools';
 import introspectionData from './introspection.json';
 
 // Use typeGetter to get more optimized documents.
diff --git a/client/coral-framework/graphql/fragments.js b/client/coral-framework/graphql/fragments.js
index 8b4c19e6f..2ec92ea6b 100644
--- a/client/coral-framework/graphql/fragments.js
+++ b/client/coral-framework/graphql/fragments.js
@@ -1,13 +1,19 @@
-import {createDefaultResponseFragments} from '../utils';
+import { createDefaultResponseFragments } from '../utils';
 
 // fragments defined here are automatically registered.
 export default {
   ...createDefaultResponseFragments(
+    'SetUserRoleResponse',
+    'ChangeUsernameResponse',
+    'SetUsernameResponse',
+    'BanUsersResponse',
+    'UnbanUserResponse',
+    'SetUserSuspensionStatusResponse',
     'SetCommentStatusResponse',
+    'SetUsernameStatusResponse',
+    'UnsuspendUserResponse',
     'SuspendUserResponse',
-    'RejectUsernameResponse',
     'CreateCommentResponse',
-    'SetUserStatusResponse',
     'CreateFlagResponse',
     'EditCommentResponse',
     'PostFlagResponse',
@@ -18,7 +24,6 @@ export default {
     'StopIgnoringUserResponse',
     'UpdateSettingsResponse',
     'UpdateAssetSettingsResponse',
-    'UpdateAssetStatusResponse',
-  )
+    'UpdateAssetStatusResponse'
+  ),
 };
-
diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js
index 15d24a9ce..e5f0bb60e 100644
--- a/client/coral-framework/graphql/mutations.js
+++ b/client/coral-framework/graphql/mutations.js
@@ -1,16 +1,16 @@
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import withMutation from '../hocs/withMutation';
 
 function convertItemType(item_type) {
   switch (item_type) {
-  case 'COMMENTS':
-    return 'Comment';
-  case 'USERS':
-    return 'User';
-  case 'ASSETS':
-    return 'Asset';
-  default:
-    throw new Error(`Unknown item_type ${item_type}`);
+    case 'COMMENTS':
+      return 'Comment';
+    case 'USERS':
+      return 'User';
+    case 'ASSETS':
+      return 'Asset';
+    default:
+      throw new Error(`Unknown item_type ${item_type}`);
   }
 }
 
@@ -28,14 +28,27 @@ function getTagFragment(item_type) {
 
 export const withAddTag = withMutation(
   gql`
-    mutation AddTag($id: ID!, $asset_id: ID!, $name: String!, $item_type: TAGGABLE_ITEM_TYPE!) {
-      addTag(tag: {name: $name, id: $id, item_type: $item_type, asset_id: $asset_id}) {
+    mutation AddTag(
+      $id: ID!
+      $asset_id: ID!
+      $name: String!
+      $item_type: TAGGABLE_ITEM_TYPE!
+    ) {
+      addTag(
+        tag: {
+          name: $name
+          id: $id
+          item_type: $item_type
+          asset_id: $asset_id
+        }
+      ) {
         ...ModifyTagResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      addTag: ({id, name, assetId, itemType}) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      addTag: ({ id, name, assetId, itemType }) => {
         return mutate({
           variables: {
             id,
@@ -47,40 +60,55 @@ export const withAddTag = withMutation(
             addTag: {
               __typename: 'ModifyTagResponse',
               errors: null,
-            }
+            },
           },
-          update: (proxy) => {
+          update: proxy => {
             const fragmentId = `${convertItemType(itemType)}_${id}`;
             const fragment = getTagFragment(itemType);
 
             // Read the data from our cache for this query.
-            const data = proxy.readFragment({fragment, id: fragmentId});
+            const data = proxy.readFragment({ fragment, id: fragmentId });
 
             data.tags.push({
               tag: {
                 __typename: 'Tag',
-                name
+                name,
               },
-              __typename: 'TagLink'
+              __typename: 'TagLink',
             });
 
             // Write our data back to the cache.
-            proxy.writeFragment({fragment, id: fragmentId, data});
+            proxy.writeFragment({ fragment, id: fragmentId, data });
           },
         });
-      }}),
-  });
+      },
+    }),
+  }
+);
 
 export const withRemoveTag = withMutation(
   gql`
-    mutation RemoveTag($id: ID!, $asset_id: ID!, $name: String!, $item_type: TAGGABLE_ITEM_TYPE!) {
-      removeTag(tag: {name: $name, id: $id, item_type: $item_type, asset_id: $asset_id}) {
+    mutation RemoveTag(
+      $id: ID!
+      $asset_id: ID!
+      $name: String!
+      $item_type: TAGGABLE_ITEM_TYPE!
+    ) {
+      removeTag(
+        tag: {
+          name: $name
+          id: $id
+          item_type: $item_type
+          asset_id: $asset_id
+        }
+      ) {
         ...ModifyTagResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      removeTag: ({id, name, assetId, itemType}) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      removeTag: ({ id, name, assetId, itemType }) => {
         return mutate({
           variables: {
             id,
@@ -92,36 +120,42 @@ export const withRemoveTag = withMutation(
             removeTag: {
               __typename: 'ModifyTagResponse',
               errors: null,
-            }
+            },
           },
-          update: (proxy) => {
+          update: proxy => {
             const fragmentId = `${convertItemType(itemType)}_${id}`;
             const fragment = getTagFragment(itemType);
 
             // Read the data from our cache for this query.
-            const data = proxy.readFragment({fragment, id: fragmentId});
+            const data = proxy.readFragment({ fragment, id: fragmentId });
 
-            const idx = data.tags.findIndex((i) => i.tag.name === name);
+            const idx = data.tags.findIndex(i => i.tag.name === name);
 
-            data.tags = [...data.tags.slice(0, idx), ...data.tags.slice(idx + 1)];
+            data.tags = [
+              ...data.tags.slice(0, idx),
+              ...data.tags.slice(idx + 1),
+            ];
 
             // Write our data back to the cache.
-            proxy.writeFragment({fragment, id: fragmentId, data});
-          }
+            proxy.writeFragment({ fragment, id: fragmentId, data });
+          },
         });
-      }}),
-  });
+      },
+    }),
+  }
+);
 
 export const withSetCommentStatus = withMutation(
   gql`
-    mutation SetCommentStatus($commentId: ID!, $status: COMMENT_STATUS!){
+    mutation SetCommentStatus($commentId: ID!, $status: COMMENT_STATUS!) {
       setCommentStatus(id: $commentId, status: $status) {
         ...SetCommentStatusResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      setCommentStatus: ({commentId, status}) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      setCommentStatus: ({ commentId, status }) => {
         return mutate({
           variables: {
             commentId,
@@ -131,32 +165,38 @@ export const withSetCommentStatus = withMutation(
             setCommentStatus: {
               __typename: 'SetCommentStatusResponse',
               errors: null,
-            }
+            },
           },
-          update: (proxy) => {
-
+          update: proxy => {
             const fragment = gql`
               fragment Talk_SetCommentStatus on Comment {
                 status
                 status_history {
                   type
                 }
-              }`;
+              }
+            `;
 
             const fragmentId = `Comment_${commentId}`;
 
-            const data = proxy.readFragment({fragment, id: fragmentId});
+            const data = proxy.readFragment({ fragment, id: fragmentId });
 
             data.status = status;
-            data.status_history = data.status_history ? data.status_history : [];
-            data.status_history.push({__typename: 'CommentStatusHistory', type: status});
+            data.status_history = data.status_history
+              ? data.status_history
+              : [];
+            data.status_history.push({
+              __typename: 'CommentStatusHistory',
+              type: status,
+            });
 
-            proxy.writeFragment({fragment, id: fragmentId, data});
-          }
+            proxy.writeFragment({ fragment, id: fragmentId, data });
+          },
         });
-      }
-    })
-  });
+      },
+    }),
+  }
+);
 
 export const withSuspendUser = withMutation(
   gql`
@@ -165,56 +205,220 @@ export const withSuspendUser = withMutation(
         ...SuspendUserResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      suspendUser: (input) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      suspendUser: input => {
         return mutate({
           variables: {
             input,
           },
         });
+      },
+    }),
+  }
+);
+
+export const withUnsuspendUser = withMutation(
+  gql`
+    mutation UnsuspendUser($input: UnsuspendUserInput!) {
+      unsuspendUser(input: $input) {
+        ...UnsuspendUserResponse
       }
-    })
-  });
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      unsuspendUser: input => {
+        return mutate({
+          variables: {
+            input,
+          },
+        });
+      },
+    }),
+  }
+);
+
+export const withApproveUsername = withMutation(
+  gql`
+    mutation ApproveUsername($id: ID!) {
+      approveUsername(id: $id) {
+        ...SetUsernameStatusResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      approveUsername: id => {
+        return mutate({
+          variables: {
+            id,
+          },
+        });
+      },
+    }),
+  }
+);
 
 export const withRejectUsername = withMutation(
   gql`
-    mutation RejectUsername($input: RejectUsernameInput!) {
-      rejectUsername(input: $input) {
-        ...RejectUsernameResponse
+    mutation RejectUsername($id: ID!) {
+      rejectUsername(id: $id) {
+        ...SetUsernameStatusResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      rejectUsername: (input) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      rejectUsername: id => {
+        return mutate({
+          variables: {
+            id,
+          },
+        });
+      },
+    }),
+  }
+);
+
+const SetUsernameFragment = gql`
+  fragment Talk_SetUsername on User {
+    username
+  }
+`;
+
+export const withChangeUsername = withMutation(
+  gql`
+    mutation ChangeUsername($id: ID!, $username: String!) {
+      changeUsername(id: $id, username: $username) {
+        ...ChangeUsernameResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      changeUsername: (id, username) => {
+        return mutate({
+          variables: {
+            id,
+            username,
+          },
+          update: proxy => {
+            const fragmentId = `User_${id}`;
+            const data = {
+              __typename: 'User',
+              username,
+            };
+            proxy.writeFragment({
+              fragment: SetUsernameFragment,
+              id: fragmentId,
+              data,
+            });
+          },
+        });
+      },
+    }),
+  }
+);
+
+export const withSetUsername = withMutation(
+  gql`
+    mutation SetUsername($id: ID!, $username: String!) {
+      setUsername(id: $id, username: $username) {
+        ...SetUsernameResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      setUsername: (id, username) => {
+        return mutate({
+          variables: {
+            id,
+            username,
+          },
+          update: proxy => {
+            const fragmentId = `User_${id}`;
+            const data = {
+              __typename: 'User',
+              username,
+            };
+            proxy.writeFragment({
+              fragment: SetUsernameFragment,
+              id: fragmentId,
+              data,
+            });
+          },
+        });
+      },
+    }),
+  }
+);
+
+export const withBanUser = withMutation(
+  gql`
+    mutation BanUser($input: BanUserInput!) {
+      banUser(input: $input) {
+        ...BanUsersResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      banUser: input => {
         return mutate({
           variables: {
             input,
           },
         });
-      }
-    })
-  });
+      },
+    }),
+  }
+);
 
-export const withSetUserStatus = withMutation(
+export const withUnbanUser = withMutation(
   gql`
-    mutation SetUserStatus($userId: ID!, $status: USER_STATUS!) {
-      setUserStatus(id: $userId, status: $status) {
-        ...SetUserStatusResponse
+    mutation UnbanUser($input: UnbanUserInput!) {
+      unbanUser(input: $input) {
+        ...UnbanUserResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      setUserStatus: ({userId, status}) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      unbanUser: input => {
         return mutate({
           variables: {
-            userId,
-            status
+            input,
           },
         });
-      }
+      },
     }),
-  });
+  }
+);
+
+export const withSetUserRole = withMutation(
+  gql`
+    mutation SetUserRole($id: ID!, $role: USER_ROLES!) {
+      setUserRole(id: $id, role: $role) {
+        ...SetUserRoleResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      setUserRole: (id, role) => {
+        return mutate({
+          variables: {
+            id,
+            role,
+          },
+        });
+      },
+    }),
+  }
+);
 
 export const withPostComment = withMutation(
   gql`
@@ -223,28 +427,31 @@ export const withPostComment = withMutation(
         ...CreateCommentResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      postComment: (input) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      postComment: input => {
         return mutate({
           variables: {
-            input
+            input,
           },
         });
-      }
+      },
     }),
-  });
+  }
+);
 
 export const withEditComment = withMutation(
   gql`
     mutation EditComment($id: ID!, $asset_id: ID!, $edit: EditCommentInput) {
-      editComment(id:$id, asset_id:$asset_id, edit:$edit) {
+      editComment(id: $id, asset_id: $asset_id, edit: $edit) {
         ...EditCommentResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      editComment: (id, asset_id, edit)  => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      editComment: (id, asset_id, edit) => {
         return mutate({
           variables: {
             id,
@@ -252,9 +459,10 @@ export const withEditComment = withMutation(
             edit,
           },
         });
-      }
+      },
     }),
-  });
+  }
+);
 
 export const withPostFlag = withMutation(
   gql`
@@ -263,16 +471,19 @@ export const withPostFlag = withMutation(
         ...CreateFlagResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      postFlag: (flag) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      postFlag: flag => {
         return mutate({
           variables: {
-            flag
-          }
+            flag,
+          },
         });
-      }}),
-  });
+      },
+    }),
+  }
+);
 
 export const withPostDontAgree = withMutation(
   gql`
@@ -281,70 +492,82 @@ export const withPostDontAgree = withMutation(
         ...CreateDontAgreeResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      postDontAgree: (dontagree) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      postDontAgree: dontagree => {
         return mutate({
           variables: {
-            dontagree
-          }
+            dontagree,
+          },
         });
-      }}),
-  });
+      },
+    }),
+  }
+);
 
 export const withDeleteAction = withMutation(
   gql`
     mutation DeleteAction($id: ID!) {
-      deleteAction(id:$id) {
+      deleteAction(id: $id) {
         ...DeleteActionResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      deleteAction: (id) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      deleteAction: id => {
         return mutate({
           variables: {
-            id
-          }
+            id,
+          },
         });
-      }}),
-  });
+      },
+    }),
+  }
+);
 
 export const withIgnoreUser = withMutation(
   gql`
     mutation IgnoreUser($id: ID!) {
-      ignoreUser(id:$id) {
+      ignoreUser(id: $id) {
         ...IgnoreUserResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      ignoreUser: (id) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      ignoreUser: id => {
         return mutate({
           variables: {
             id,
           },
         });
-      }}),
-  });
+      },
+    }),
+  }
+);
 
 export const withStopIgnoringUser = withMutation(
   gql`
     mutation StopIgnoringUser($id: ID!) {
-      stopIgnoringUser(id:$id) {
+      stopIgnoringUser(id: $id) {
         ...StopIgnoringUserResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      stopIgnoringUser: ({id}) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      stopIgnoringUser: ({ id }) => {
         return mutate({
           variables: {
             id,
           },
         });
-      }}),
-  });
+      },
+    }),
+  }
+);
 
 export const withUpdateSettings = withMutation(
   gql`
@@ -353,16 +576,19 @@ export const withUpdateSettings = withMutation(
         ...UpdateSettingsResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
-      updateSettings: (input) => {
+  `,
+  {
+    props: ({ mutate }) => ({
+      updateSettings: input => {
         return mutate({
           variables: {
             input,
           },
         });
-      }}),
-  });
+      },
+    }),
+  }
+);
 
 export const withUpdateAssetSettings = withMutation(
   gql`
@@ -371,8 +597,9 @@ export const withUpdateAssetSettings = withMutation(
         ...UpdateAssetSettingsResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
+  `,
+  {
+    props: ({ mutate }) => ({
       updateAssetSettings: (id, input) => {
         return mutate({
           variables: {
@@ -383,11 +610,13 @@ export const withUpdateAssetSettings = withMutation(
             updateAssetSettings: {
               __typename: 'UpdateAssetSettingsResponse',
               errors: null,
-            }
+            },
           },
         });
-      }}),
-  });
+      },
+    }),
+  }
+);
 
 export const withUpdateAssetStatus = withMutation(
   gql`
@@ -396,8 +625,9 @@ export const withUpdateAssetStatus = withMutation(
         ...UpdateAssetStatusResponse
       }
     }
-  `, {
-    props: ({mutate}) => ({
+  `,
+  {
+    props: ({ mutate }) => ({
       updateAssetStatus: (id, input) => {
         return mutate({
           variables: {
@@ -408,25 +638,30 @@ export const withUpdateAssetStatus = withMutation(
             updateAssetStatus: {
               __typename: 'UpdateAssetStatusResponse',
               errors: null,
-            }
+            },
           },
-          update: (proxy) => {
+          update: proxy => {
             if (input.closedAt !== undefined) {
               const fragment = gql`
                 fragment Talk_UpdateAssetStatusResponse on Asset {
                   closedAt
                   isClosed
-                }`;
+                }
+              `;
 
               const fragmentId = `Asset_${id}`;
               const data = {
                 __typename: 'Asset',
                 closedAt: input.closedAt,
-                isClosed: !!input.closedAt && new Date(input.closedAt).getTime() <= new Date().getTime(),
+                isClosed:
+                  !!input.closedAt &&
+                  new Date(input.closedAt).getTime() <= new Date().getTime(),
               };
-              proxy.writeFragment({fragment, id: fragmentId, data});
+              proxy.writeFragment({ fragment, id: fragmentId, data });
             }
-          }
+          },
         });
-      }}),
-  });
+      },
+    }),
+  }
+);
diff --git a/client/coral-framework/helpers/validate.js b/client/coral-framework/helpers/validate.js
index ef64a2c84..849e00e7a 100644
--- a/client/coral-framework/helpers/validate.js
+++ b/client/coral-framework/helpers/validate.js
@@ -1,7 +1,7 @@
 export default {
-  email: (email) => (/^.+@.+\..+$/.test(email)),
-  password: (pass) => (/^(?=.{8,}).*$/.test(pass)),
+  email: email => /^.+@.+\..+$/.test(email),
+  password: pass => /^(?=.{8,}).*$/.test(pass),
   confirmPassword: () => true,
-  username: (username) => (/^[a-zA-Z0-9_]+$/.test(username)),
-  organizationName: (org) => (/^[a-zA-Z0-9_ ]+$/).test(org)
+  username: username => /^[a-zA-Z0-9_]+$/.test(username),
+  organizationName: org => /^[a-zA-Z0-9_ ]+$/.test(org),
 };
diff --git a/client/coral-framework/hocs/connect.js b/client/coral-framework/hocs/connect.js
index c49fe8380..735527fd2 100644
--- a/client/coral-framework/hocs/connect.js
+++ b/client/coral-framework/hocs/connect.js
@@ -1,6 +1,6 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 
-export default (mapStateToProps, ...rest) => (BaseComponent) => {
+export default (mapStateToProps, ...rest) => BaseComponent => {
   BaseComponent.mapStateToProps = mapStateToProps;
   return connect(mapStateToProps, ...rest)(BaseComponent);
 };
diff --git a/client/coral-framework/hocs/excludeIf.js b/client/coral-framework/hocs/excludeIf.js
index 524c97eb3..c07b40afc 100644
--- a/client/coral-framework/hocs/excludeIf.js
+++ b/client/coral-framework/hocs/excludeIf.js
@@ -5,15 +5,14 @@ import hoistStatics from 'recompose/hoistStatics';
  * ExcludeIf provides a property `emit: (eventName, value)`
  * to the wrapped component.
  */
-export default (condition) => hoistStatics((WrappedComponent) => {
-  class ExcludeIf extends React.Component {
-    render() {
-      return <WrappedComponent
-        {...this.props}
-      />;
+export default condition =>
+  hoistStatics(WrappedComponent => {
+    class ExcludeIf extends React.Component {
+      render() {
+        return <WrappedComponent {...this.props} />;
+      }
     }
-  }
 
-  WrappedComponent.isExcluded = condition;
-  return ExcludeIf;
-});
+    WrappedComponent.isExcluded = condition;
+    return ExcludeIf;
+  });
diff --git a/client/coral-framework/hocs/index.js b/client/coral-framework/hocs/index.js
index b3c0219e3..174f25a63 100644
--- a/client/coral-framework/hocs/index.js
+++ b/client/coral-framework/hocs/index.js
@@ -1,8 +1,8 @@
-export {default as withFragments} from './withFragments';
-export {default as withMutation} from './withMutation';
-export {default as withQuery} from './withQuery';
-export {default as withCopyToClipboard} from './withCopyToClipboard';
-export {default as withEmit} from './withEmit';
-export {default as excludeIf} from './excludeIf';
-export {default as connect} from './connect';
-export {default as withMergedSettings} from './withMergedSettings';
+export { default as withFragments } from './withFragments';
+export { default as withMutation } from './withMutation';
+export { default as withQuery } from './withQuery';
+export { default as withCopyToClipboard } from './withCopyToClipboard';
+export { default as withEmit } from './withEmit';
+export { default as excludeIf } from './excludeIf';
+export { default as connect } from './connect';
+export { default as withMergedSettings } from './withMergedSettings';
diff --git a/client/coral-framework/hocs/withCopyToClipboard.js b/client/coral-framework/hocs/withCopyToClipboard.js
index 4de606c40..e862ddc54 100644
--- a/client/coral-framework/hocs/withCopyToClipboard.js
+++ b/client/coral-framework/hocs/withCopyToClipboard.js
@@ -3,26 +3,33 @@ import ReactDOM from 'react-dom';
 import Clipboard from 'clipboard';
 import hoistStatics from 'recompose/hoistStatics';
 
-export default hoistStatics((WrappedComponent) => {
+export default hoistStatics(WrappedComponent => {
   class WithCopyToClipboard extends React.Component {
     componentDidMount() {
       const clipboard = new Clipboard(ReactDOM.findDOMNode(this));
 
-      clipboard.on('success', (e) => {
+      clipboard.on('success', e => {
         e.clearSelection();
       });
     }
 
     render() {
-      const {copyTarget = '', copyText = '', className = '', ...rest} = this.props;
+      const {
+        copyTarget = '',
+        copyText = '',
+        className = '',
+        ...rest
+      } = this.props;
 
-      return <WrappedComponent
-        className={className}
-        data-clipboard-action="copy"
-        data-clipboard-text={copyText}
-        data-clipboard-target={copyTarget}
-        {...rest}
-      />;
+      return (
+        <WrappedComponent
+          className={className}
+          data-clipboard-action="copy"
+          data-clipboard-text={copyText}
+          data-clipboard-target={copyTarget}
+          {...rest}
+        />
+      );
     }
   }
 
diff --git a/client/coral-framework/hocs/withEmit.js b/client/coral-framework/hocs/withEmit.js
index 22d98bb27..9b6ece28d 100644
--- a/client/coral-framework/hocs/withEmit.js
+++ b/client/coral-framework/hocs/withEmit.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
  * WithEmit provides a property `emit: (eventName, value)`
  * to the wrapped component.
  */
-export default hoistStatics((WrappedComponent) => {
+export default hoistStatics(WrappedComponent => {
   class WithEmit extends React.Component {
     static contextTypes = {
       eventEmitter: PropTypes.object,
@@ -17,10 +17,7 @@ export default hoistStatics((WrappedComponent) => {
     };
 
     render() {
-      return <WrappedComponent
-        {...this.props}
-        emit={this.emit}
-      />;
+      return <WrappedComponent {...this.props} emit={this.emit} />;
     }
   }
 
diff --git a/client/coral-framework/hocs/withFragments.js b/client/coral-framework/hocs/withFragments.js
index 3411e7552..f98411de1 100644
--- a/client/coral-framework/hocs/withFragments.js
+++ b/client/coral-framework/hocs/withFragments.js
@@ -2,20 +2,14 @@ import React from 'react';
 import graphql from 'graphql-anywhere';
 import mapValues from 'lodash/mapValues';
 import hoistStatics from 'recompose/hoistStatics';
-import {getShallowChanges} from 'coral-framework/utils';
+import { getShallowChanges } from 'coral-framework/utils';
 import PropTypes from 'prop-types';
 import union from 'lodash/union';
 
 // TODO: Should not depend on `props.data`
 // Currently necessary because of this https://github.com/apollographql/graphql-anywhere/issues/38
 function filter(doc, data, variables) {
-  const resolver = (
-    fieldName,
-    root,
-    args,
-    context,
-    info,
-  ) => {
+  const resolver = (fieldName, root, args, context, info) => {
     return root[info.resultKey];
   };
 
@@ -26,7 +20,7 @@ function filter(doc, data, variables) {
 // TODO: Should not depend on `props.data`
 function filterProps(props, fragments) {
   const filtered = {};
-  Object.keys(fragments).forEach((key) => {
+  Object.keys(fragments).forEach(key => {
     if (!(key in props)) {
       return;
     }
@@ -61,61 +55,69 @@ function hasEqualLeaves(a, b, path = '') {
   return true;
 }
 
-export default (fragments) => hoistStatics((BaseComponent) => {
-  class WithFragments extends React.Component {
-    static contextTypes = {
-      graphql: PropTypes.object,
-    };
+export default fragments =>
+  hoistStatics(BaseComponent => {
+    class WithFragments extends React.Component {
+      static contextTypes = {
+        graphql: PropTypes.object,
+      };
 
-    get graphqlRegistry() {
-      return this.context.graphql.registry;
-    }
+      get graphqlRegistry() {
+        return this.context.graphql.registry;
+      }
 
-    resolveDocument(documentOrCallback) {
-      return this.context.graphql.resolveDocument(documentOrCallback, this.props, this.context);
-    }
+      resolveDocument(documentOrCallback) {
+        return this.context.graphql.resolveDocument(
+          documentOrCallback,
+          this.props,
+          this.context
+        );
+      }
 
-    fragments = mapValues(fragments, (val) => this.resolveDocument(val));
-    fragmentKeys = Object.keys(fragments).sort();
+      fragments = mapValues(fragments, val => this.resolveDocument(val));
+      fragmentKeys = Object.keys(fragments).sort();
 
-    // Cache variables between lifecycles to speed up render.
-    filteredProps = filterProps(this.props, this.fragments)
-    queryDataHasChanged = false;
-    shallowChanges = null;
+      // Cache variables between lifecycles to speed up render.
+      filteredProps = filterProps(this.props, this.fragments);
+      queryDataHasChanged = false;
+      shallowChanges = null;
 
-    componentWillReceiveProps(next) {
-      this.shallowChanges = getShallowChanges(this.props, next);
+      componentWillReceiveProps(next) {
+        this.shallowChanges = getShallowChanges(this.props, next);
 
-      if (this.fragmentKeys.some((key) => this.shallowChanges.indexOf(key) >= 0)) {
-        const nextFilteredProps = filterProps(next, this.fragments);
-        this.queryDataHasChanged = !hasEqualLeaves(this.filteredProps, nextFilteredProps);
-        if (this.queryDataHasChanged) {
-
-          // Only changed props when query data has changed.
-          this.filteredProps = filterProps(next, this.fragments);
+        if (
+          this.fragmentKeys.some(key => this.shallowChanges.indexOf(key) >= 0)
+        ) {
+          const nextFilteredProps = filterProps(next, this.fragments);
+          this.queryDataHasChanged = !hasEqualLeaves(
+            this.filteredProps,
+            nextFilteredProps
+          );
+          if (this.queryDataHasChanged) {
+            // Only changed props when query data has changed.
+            this.filteredProps = filterProps(next, this.fragments);
+          }
         }
       }
-    }
 
-    shouldComponentUpdate(next) {
-      const onlyQueryDataChanges = this.shallowChanges.every((key) => this.fragmentKeys.indexOf(key) >= 0);
+      shouldComponentUpdate(next) {
+        const onlyQueryDataChanges = this.shallowChanges.every(
+          key => this.fragmentKeys.indexOf(key) >= 0
+        );
 
-      if (onlyQueryDataChanges) {
-        return this.queryDataHasChanged;
+        if (onlyQueryDataChanges) {
+          return this.queryDataHasChanged;
+        }
+
+        return this.shallowChanges.length !== 0;
       }
 
-      return this.shallowChanges.length !== 0;
+      render() {
+        const queryProps = this.filteredProps;
+        return <BaseComponent {...this.props} {...queryProps} />;
+      }
     }
 
-    render() {
-      const queryProps = this.filteredProps;
-      return <BaseComponent
-        {...this.props}
-        {...queryProps}
-      />;
-    }
-  }
-
-  WithFragments.fragments = fragments;
-  return WithFragments;
-});
+    WithFragments.fragments = fragments;
+    return WithFragments;
+  });
diff --git a/client/coral-framework/hocs/withMergedSettings.js b/client/coral-framework/hocs/withMergedSettings.js
index c90e360bc..0861f7bc2 100644
--- a/client/coral-framework/hocs/withMergedSettings.js
+++ b/client/coral-framework/hocs/withMergedSettings.js
@@ -1,7 +1,7 @@
-import {mergeExcludingArrays} from 'coral-framework/utils';
+import { mergeExcludingArrays } from 'coral-framework/utils';
 import assignWith from 'lodash/assignWith';
 import get from 'lodash/get';
-import {withPropsOnChange} from 'recompose';
+import { withPropsOnChange } from 'recompose';
 
 /**
  * Exports a HOC that applies props at `pending` to
@@ -17,8 +17,13 @@ const withMergedSettings = (settings, pending, result) =>
     (props, nextProps) =>
       get(props, settings) !== get(nextProps, settings) ||
       get(props, pending) !== get(nextProps, pending),
-    (props) => ({
-      [result]: assignWith({}, get(props, settings), get(props, pending), mergeExcludingArrays)
+    props => ({
+      [result]: assignWith(
+        {},
+        get(props, settings),
+        get(props, pending),
+        mergeExcludingArrays
+      ),
     })
   );
 
diff --git a/client/coral-framework/hocs/withMutation.js b/client/coral-framework/hocs/withMutation.js
index 639dbd461..b72e56f40 100644
--- a/client/coral-framework/hocs/withMutation.js
+++ b/client/coral-framework/hocs/withMutation.js
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import {graphql} from 'react-apollo';
+import { graphql } from 'react-apollo';
 import merge from 'lodash/merge';
 import uniq from 'lodash/uniq';
 import flatten from 'lodash/flatten';
 import isEmpty from 'lodash/isEmpty';
-import {getDefinitionName, getResponseErrors} from '../utils';
+import { getDefinitionName, getResponseErrors } from '../utils';
 import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
 import hoistStatics from 'recompose/hoistStatics';
@@ -13,7 +13,7 @@ import union from 'lodash/union';
 class ResponseErrors extends Error {
   constructor(errors) {
     super(`Response Errors ${JSON.stringify(errors)}`);
-    this.errors = errors.map((e) => new ResponseError(e));
+    this.errors = errors.map(e => new ResponseError(e));
   }
 }
 
@@ -31,80 +31,87 @@ class ResponseError {
  * Exports a HOC with the same signature as `graphql`, that will
  * apply mutation options registered in the graphRegistry.
  */
-export default (document, config = {}) => hoistStatics((WrappedComponent) => {
-  config = {
-    ...config,
-    options: config.options || {},
-    props: config.props || ((data) => ({mutate: data.mutate()})),
-  };
-
-  return class WithMutation extends React.Component {
-    static contextTypes = {
-      eventEmitter: PropTypes.object,
-      store: PropTypes.object,
-      graphql: PropTypes.object,
+export default (document, config = {}) =>
+  hoistStatics(WrappedComponent => {
+    config = {
+      ...config,
+      options: config.options || {},
+      props: config.props || (data => ({ mutate: data.mutate() })),
     };
 
-    get graphqlRegistry() {
-      return this.context.graphql.registry;
-    }
+    return class WithMutation extends React.Component {
+      static contextTypes = {
+        eventEmitter: PropTypes.object,
+        store: PropTypes.object,
+        graphql: PropTypes.object,
+      };
 
-    resolveDocument(documentOrCallback) {
-      return this.context.graphql.resolveDocument(documentOrCallback, this.props, this.context);
-    }
+      get graphqlRegistry() {
+        return this.context.graphql.registry;
+      }
 
-    // Lazily resolve fragments from graphRegistry to support circular dependencies.
-    memoized = null;
-
-    // Props as we would pass to the BaseComponent without optimizations.
-    dynamicProps = {};
-
-    // Props that are optimized by keeping the identity of function callbacks.
-    staticProps = {};
-
-    propsWrapper = (data) => {
-      const name = getDefinitionName(document);
-      const callbacks = this.graphqlRegistry.getMutationOptions(name);
-      const mutate = (base) => {
-        const variables = base.variables || config.options.variables;
-        const configs = callbacks.map((cb) => cb({variables, state: this.context.store.getState()}));
-
-        const optimisticResponse = merge(
-          base.optimisticResponse || config.options.optimisticResponse,
-          ...configs.map((cfg) => cfg.optimisticResponse),
+      resolveDocument(documentOrCallback) {
+        return this.context.graphql.resolveDocument(
+          documentOrCallback,
+          this.props,
+          this.context
         );
+      }
 
-        const refetchQueries = flatten(uniq([
-          base.refetchQueries || config.options.refetchQueries,
-          ...configs.map((cfg) => cfg.refetchQueries),
-        ].filter((i) => i)));
+      // Lazily resolve fragments from graphRegistry to support circular dependencies.
+      memoized = null;
 
-        const updateCallbacks =
-          [base.update || config.options.update]
-            .concat(...configs.map((cfg) => cfg.update))
-            .filter((i) => i);
+      // Props as we would pass to the BaseComponent without optimizations.
+      dynamicProps = {};
 
-        const update = (proxy, result) => {
-          if (getResponseErrors(result)) {
+      // Props that are optimized by keeping the identity of function callbacks.
+      staticProps = {};
 
-            // Do not run updates when we have mutation errors.
-            return;
-          }
-          updateCallbacks.forEach((cb) => cb(proxy, result));
-        };
+      propsWrapper = data => {
+        const name = getDefinitionName(document);
+        const callbacks = this.graphqlRegistry.getMutationOptions(name);
+        const mutate = base => {
+          const variables = base.variables || config.options.variables;
+          const configs = callbacks.map(cb =>
+            cb({ variables, state: this.context.store.getState() })
+          );
 
-        const updateQueries =
-          [
+          const optimisticResponse = merge(
+            base.optimisticResponse || config.options.optimisticResponse,
+            ...configs.map(cfg => cfg.optimisticResponse)
+          );
+
+          const refetchQueries = flatten(
+            uniq(
+              [
+                base.refetchQueries || config.options.refetchQueries,
+                ...configs.map(cfg => cfg.refetchQueries),
+              ].filter(i => i)
+            )
+          );
+
+          const updateCallbacks = [base.update || config.options.update]
+            .concat(...configs.map(cfg => cfg.update))
+            .filter(i => i);
+
+          const update = (proxy, result) => {
+            if (getResponseErrors(result)) {
+              // Do not run updates when we have mutation errors.
+              return;
+            }
+            updateCallbacks.forEach(cb => cb(proxy, result));
+          };
+
+          const updateQueries = [
             base.updateQueries || config.options.updateQueries,
-            ...configs.map((cfg) => cfg.updateQueries)
+            ...configs.map(cfg => cfg.updateQueries),
           ]
-            .filter((i) => i)
+            .filter(i => i)
             .reduce((res, map) => {
-              Object.keys(map).forEach((key) => {
+              Object.keys(map).forEach(key => {
                 if (!(key in res)) {
                   res[key] = (prev, result) => {
                     if (getResponseErrors(result.mutationResult)) {
-
                       // Do not run updates when we have mutation errors.
                       return prev;
                     }
@@ -114,7 +121,6 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
                   const existing = res[key];
                   res[key] = (prev, result) => {
                     if (getResponseErrors(result.mutationResult)) {
-
                       // Do not run updates when we have mutation errors.
                       return prev;
                     }
@@ -126,68 +132,84 @@ export default (document, config = {}) => hoistStatics((WrappedComponent) => {
               return res;
             }, {});
 
-        const wrappedConfig = {
-          variables,
-          optimisticResponse,
-          refetchQueries,
-          updateQueries,
-          update,
-        };
-        if (isEmpty(wrappedConfig.optimisticResponse)) {
-          delete wrappedConfig.optimisticResponse;
-        }
+          const wrappedConfig = {
+            variables,
+            optimisticResponse,
+            refetchQueries,
+            updateQueries,
+            update,
+          };
+          if (isEmpty(wrappedConfig.optimisticResponse)) {
+            delete wrappedConfig.optimisticResponse;
+          }
 
-        this.context.eventEmitter.emit(`mutation.${name}.begin`, {variables});
-
-        return data.mutate(wrappedConfig)
-          .then((res) => {
-            const errors = getResponseErrors(res);
-            if (errors) {
-              throw new ResponseErrors(errors);
-            }
-            this.context.eventEmitter.emit(`mutation.${name}.success`, {variables, data: res.data});
-            return Promise.resolve(res);
-          })
-          .catch((error) => {
-            this.context.eventEmitter.emit(`mutation.${name}.error`, {variables, error});
-            throw error;
+          this.context.eventEmitter.emit(`mutation.${name}.begin`, {
+            variables,
           });
+
+          return data
+            .mutate(wrappedConfig)
+            .then(res => {
+              const errors = getResponseErrors(res);
+              if (errors) {
+                throw new ResponseErrors(errors);
+              }
+              this.context.eventEmitter.emit(`mutation.${name}.success`, {
+                variables,
+                data: res.data,
+              });
+              return Promise.resolve(res);
+            })
+            .catch(error => {
+              this.context.eventEmitter.emit(`mutation.${name}.error`, {
+                variables,
+                error,
+              });
+              throw error;
+            });
+        };
+
+        // Save current props to `dynamicProps`
+        this.dynamicProps = config.props({ ...data, mutate });
+
+        // Sync props to `staticProps`.
+        // `staticProps` ultimately contains the same props as `dynamicProps` but all callbacks
+        // keep their identity.
+        union(
+          Object.keys(this.dynamicProps),
+          Object.keys(this.staticProps)
+        ).forEach(key => {
+          if (!(key in this.dynamicProps)) {
+            delete this.staticProps[key];
+            return;
+          }
+          if (typeof this.dynamicProps[key] !== 'function') {
+            this.staticProps[key] = this.dynamicProps[key];
+            return;
+          }
+
+          if (!(key in this.staticProps)) {
+            this.staticProps[key] = (...args) =>
+              this.dynamicProps[key](...args);
+            return;
+          }
+        });
+        return this.staticProps;
       };
 
-      // Save current props to `dynamicProps`
-      this.dynamicProps = config.props({...data, mutate});
-
-      // Sync props to `staticProps`.
-      // `staticProps` ultimately contains the same props as `dynamicProps` but all callbacks
-      // keep their identity.
-      union(Object.keys(this.dynamicProps), Object.keys(this.staticProps)).forEach((key) => {
-        if (!(key in this.dynamicProps)) {
-          delete this.staticProps[key];
-          return;
-        }
-        if (typeof this.dynamicProps[key] !== 'function') {
-          this.staticProps[key] = this.dynamicProps[key];
-          return;
+      getWrapped = () => {
+        if (!this.memoized) {
+          this.memoized = graphql(this.resolveDocument(document), {
+            ...config,
+            props: this.propsWrapper,
+          })(WrappedComponent);
         }
+        return this.memoized;
+      };
 
-        if (!(key in this.staticProps)) {
-          this.staticProps[key] = (...args) => this.dynamicProps[key](...args);
-          return;
-        }
-      });
-      return this.staticProps;
-    };
-
-    getWrapped = () => {
-      if (!this.memoized) {
-        this.memoized = graphql(this.resolveDocument(document), {...config, props: this.propsWrapper})(WrappedComponent);
+      render() {
+        const Wrapped = this.getWrapped();
+        return <Wrapped {...this.props} />;
       }
-      return this.memoized;
     };
-
-    render() {
-      const Wrapped = this.getWrapped();
-      return <Wrapped {...this.props} />;
-    }
-  };
-});
+  });
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index 433d4e43b..d5609c340 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -1,34 +1,41 @@
 import * as React from 'react';
-import {graphql} from 'react-apollo';
-import {getDefinitionName, separateDataAndRoot, getResponseErrors} from '../utils';
+import { graphql } from 'react-apollo';
+import {
+  getDefinitionName,
+  separateDataAndRoot,
+  getResponseErrors,
+} from '../utils';
 import PropTypes from 'prop-types';
 import hoistStatics from 'recompose/hoistStatics';
-import {getOperationName} from 'apollo-client/queries/getFromAST';
+import { getOperationName } from 'apollo-client/queries/getFromAST';
 import throttle from 'lodash/throttle';
 
-const withSkipOnErrors = (reducer) => (prev, action, ...rest) => {
-  if (action.type === 'APOLLO_MUTATION_RESULT' && getResponseErrors(action.result)) {
+const withSkipOnErrors = reducer => (prev, action, ...rest) => {
+  if (
+    action.type === 'APOLLO_MUTATION_RESULT' &&
+    getResponseErrors(action.result)
+  ) {
     return prev;
   }
   return reducer(prev, action, ...rest);
 };
 
 function networkStatusToString(networkStatus) {
-  switch(networkStatus) {
-  case 1:
-    return 'loading';
-  case 2:
-    return 'setVariables';
-  case 3:
-    return 'fetchMore';
-  case 4:
-    return 'refetch';
-  case 6:
-    return 'poll';
-  case 7:
-    return 'ready';
-  case 8:
-    return 'error';
+  switch (networkStatus) {
+    case 1:
+      return 'loading';
+    case 2:
+      return 'setVariables';
+    case 3:
+      return 'fetchMore';
+    case 4:
+      return 'refetch';
+    case 6:
+      return 'poll';
+    case 7:
+      return 'ready';
+    case 8:
+      return 'error';
   }
   throw new Error(`Unknown network status ${networkStatus}`);
 }
@@ -37,269 +44,278 @@ function networkStatusToString(networkStatus) {
  * Exports a HOC with the same signature as `graphql`, that will
  * apply query options registered in the graphRegistry.
  */
-export default (document, config = {}) => hoistStatics((WrappedComponent) => {
-  return class WithQuery extends React.Component {
-    static contextTypes = {
-      eventEmitter: PropTypes.object,
-      graphql: PropTypes.object,
-      client: PropTypes.object,
-    };
+export default (document, config = {}) =>
+  hoistStatics(WrappedComponent => {
+    return class WithQuery extends React.Component {
+      static contextTypes = {
+        eventEmitter: PropTypes.object,
+        graphql: PropTypes.object,
+        client: PropTypes.object,
+      };
 
-    // Lazily resolve fragments from graphRegistry to support circular dependencies.
-    memoized = null;
-    resolvedDocument = null;
-    lastNetworkStatus = null;
-    name = '';
-    apolloData = null;
-    data = null;
+      // Lazily resolve fragments from graphRegistry to support circular dependencies.
+      memoized = null;
+      resolvedDocument = null;
+      lastNetworkStatus = null;
+      name = '';
+      apolloData = null;
+      data = null;
 
-    // Pending subscription data.
-    subscriptionQueue = [];
+      // Pending subscription data.
+      subscriptionQueue = [];
 
-    get graphqlRegistry() {
-      return this.context.graphql.registry;
-    }
-
-    get client() {
-      return this.context.client;
-    }
-
-    resolveDocument(documentOrCallback) {
-      return this.context.graphql.resolveDocument(documentOrCallback, this.props, this.context);
-    }
-
-    emitWhenNeeded(data) {
-      const {variables, networkStatus} = data;
-      if (this.lastNetworkStatus === networkStatus) {
-        return;
+      get graphqlRegistry() {
+        return this.context.graphql.registry;
       }
-      this.lastNetworkStatus = networkStatus;
 
-      const status = networkStatusToString(networkStatus);
-
-      const {root} = separateDataAndRoot(data);
-      this.context.eventEmitter.emit(`query.${this.name}.${status}`, {variables, data: root});
-    }
-
-    // Handle any pending susbcription data in the subscription queue at max once every second.
-    // Updates are batched in written into apollo in one go.
-    processSubscriptionQueue = throttle(() => {
-      if (!this.subscriptionQueue.length) {
-        return;
+      get client() {
+        return this.context.client;
       }
-      const variables = typeof this.wrappedOptions === 'function'
-        ? this.wrappedOptions(this.props).variables
-        : this.wrappedOptions.variables;
 
-      const previousResult = this.client.readQuery({
-        query: this.resolvedDocument,
-        variables,
-      });
-
-      let result = previousResult;
-
-      this.subscriptionQueue.forEach(([updateQuery, data]) => {
-        result = updateQuery(result, {subscriptionData: {data}});
-      });
-
-      if (result !== previousResult) {
-        this.client.writeQuery({
-          query: this.resolvedDocument,
-          variables,
-          data: result,
-        });
+      resolveDocument(documentOrCallback) {
+        return this.context.graphql.resolveDocument(
+          documentOrCallback,
+          this.props,
+          this.context
+        );
       }
-      this.subscriptionQueue = [];
-    }, 1000);
 
-    handleOnLoaded() {
-
-      // Trigger subscription queue processing after query has loaded.
-      setTimeout(() => this.processSubscriptionQueue(), 1000);
-    }
-
-    subscribeToMoreThrottled = ({document, variables, updateQuery}) => {
-
-      // We need to add the typenames and resolve fragments.
-      const query = this.resolveDocument(document);
-      const handler = (error, data) => {
-        if (error) {
-
-          // TODO: shuld this show a notification?
-          console.error(error);
+      emitWhenNeeded(data) {
+        const { variables, networkStatus } = data;
+        if (this.lastNetworkStatus === networkStatus) {
           return;
         }
-        if (data) {
-          this.subscriptionQueue.push([updateQuery, data]);
+        this.lastNetworkStatus = networkStatus;
 
-          // Only trigger handler when query has been loaded.
-          if (!this.data.loading) {
+        const status = networkStatusToString(networkStatus);
 
-            // Triggers the throttled subscription queue processor.
-            this.processSubscriptionQueue();
+        const { root } = separateDataAndRoot(data);
+        this.context.eventEmitter.emit(`query.${this.name}.${status}`, {
+          variables,
+          data: root,
+        });
+      }
+
+      // Handle any pending susbcription data in the subscription queue at max once every second.
+      // Updates are batched in written into apollo in one go.
+      processSubscriptionQueue = throttle(() => {
+        if (!this.subscriptionQueue.length) {
+          return;
+        }
+        const variables =
+          typeof this.wrappedOptions === 'function'
+            ? this.wrappedOptions(this.props).variables
+            : this.wrappedOptions.variables;
+
+        const previousResult = this.client.readQuery({
+          query: this.resolvedDocument,
+          variables,
+        });
+
+        let result = previousResult;
+
+        this.subscriptionQueue.forEach(([updateQuery, data]) => {
+          result = updateQuery(result, { subscriptionData: { data } });
+        });
+
+        if (result !== previousResult) {
+          this.client.writeQuery({
+            query: this.resolvedDocument,
+            variables,
+            data: result,
+          });
+        }
+        this.subscriptionQueue = [];
+      }, 1000);
+
+      handleOnLoaded() {
+        // Trigger subscription queue processing after query has loaded.
+        setTimeout(() => this.processSubscriptionQueue(), 1000);
+      }
+
+      subscribeToMoreThrottled = ({ document, variables, updateQuery }) => {
+        // We need to add the typenames and resolve fragments.
+        const query = this.resolveDocument(document);
+        const handler = (error, data) => {
+          if (error) {
+            // TODO: shuld this show a notification?
+            console.error(error);
+            return;
           }
-        }
+          if (data) {
+            this.subscriptionQueue.push([updateQuery, data]);
+
+            // Only trigger handler when query has been loaded.
+            if (!this.data.loading) {
+              // Triggers the throttled subscription queue processor.
+              this.processSubscriptionQueue();
+            }
+          }
+        };
+
+        // Start subscription.
+        const request = {
+          query,
+          variables,
+          operationName: getOperationName(query),
+        };
+
+        const id = this.client.networkInterface.subscribe(request, handler);
+
+        // Return unsubscribe callback.
+        return () => this.client.networkInterface.unsubscribe(id);
       };
 
-      // Start subscription.
-      const request = {
-        query,
-        variables,
-        operationName: getOperationName(query),
-      };
+      nextData(data) {
+        this.apolloData = data;
+        this.emitWhenNeeded(data);
 
-      const id = this.client.networkInterface.subscribe(request, handler);
+        // If data was previously set, we update it in a immutable way.
+        if (this.data) {
+          if (this.data.loading && !data.loading) {
+            this.handleOnLoaded();
+          }
 
-      // Return unsubscribe callback.
-      return () => this.client.networkInterface.unsubscribe(id);
-    };
-
-    nextData(data) {
-      this.apolloData = data;
-      this.emitWhenNeeded(data);
-
-      // If data was previously set, we update it in a immutable way.
-      if (this.data) {
-
-        if (this.data.loading && !data.loading) {
-          this.handleOnLoaded();
-        }
-
-        if (this.data.networkStatus !== data.networkStatus ||
+          if (
+            this.data.networkStatus !== data.networkStatus ||
             this.data.loading !== data.loading ||
             this.data.error !== data.error ||
-            this.data.variables !== data.variables) {
+            this.data.variables !== data.variables
+          ) {
+            this.data = {
+              ...this.data,
+              error: data.error,
+              networkStatus: data.networkStatus,
+              loading: data.loading,
+              variables: data.variables,
+            };
+          }
+        } else {
+          // Set data for the first time.
           this.data = {
-            ...this.data,
             error: data.error,
+            variables: data.variables,
             networkStatus: data.networkStatus,
             loading: data.loading,
-            variables: data.variables,
+            subscribeToMoreThrottled: this.subscribeToMoreThrottled,
+            startPolling: (...args) => {
+              return this.apolloData.startPolling(...args);
+            },
+            stopPolling: (...args) => {
+              return this.apolloData.stopPolling(...args);
+            },
+            updateQuery: (...args) => {
+              return this.apolloData.updateQuery(...args);
+            },
+            refetch: (...args) => {
+              return this.apolloData.refetch(...args);
+            },
+            subscribeToMore: stmArgs => {
+              const resolvedDocument = this.resolveDocument(stmArgs.document);
+
+              // Resolve document fragments before passing it to `apollo-client`.
+              return this.apolloData.subscribeToMore({
+                ...stmArgs,
+                document: resolvedDocument,
+                onError: err => {
+                  if (stmArgs.onErr) {
+                    return stmArgs.onErr(err);
+                  }
+                  throw err;
+                },
+              });
+            },
+            fetchMore: lmArgs => {
+              const resolvedDocument = this.resolveDocument(lmArgs.query);
+              const fetchName = getDefinitionName(resolvedDocument);
+              this.context.eventEmitter.emit(
+                `query.${this.name}.fetchMore.${fetchName}.begin`,
+                { variables: lmArgs.variables }
+              );
+
+              // Resolve document fragments before passing it to `apollo-client`.
+              return this.apolloData
+                .fetchMore({
+                  ...lmArgs,
+                  query: resolvedDocument,
+                })
+                .then(res => {
+                  this.context.eventEmitter.emit(
+                    `query.${this.name}.fetchMore.${fetchName}.success`,
+                    { variables: lmArgs.variables, data: res.data }
+                  );
+                  return Promise.resolve(res);
+                })
+                .catch(err => {
+                  this.context.eventEmitter.emit(
+                    `query.${this.name}.fetchMore.${fetchName}.error`,
+                    { variables: lmArgs.variables, error: err }
+                  );
+                  throw err;
+                });
+            },
           };
         }
+        return this.data;
       }
-      else {
 
-        // Set data for the first time.
-        this.data = {
-          error: data.error,
-          variables: data.variables,
-          networkStatus: data.networkStatus,
-          loading: data.loading,
-          subscribeToMoreThrottled: this.subscribeToMoreThrottled,
-          startPolling: (...args) => {
-            return this.apolloData.startPolling(...args);
-          },
-          stopPolling: (...args) => {
-            return this.apolloData.stopPolling(...args);
-          },
-          updateQuery: (...args) => {
-            return this.apolloData.updateQuery(...args);
-          },
-          refetch: (...args) => {
-            return this.apolloData.refetch(...args);
-          },
-          subscribeToMore: (stmArgs) => {
-            const resolvedDocument = this.resolveDocument(stmArgs.document);
-
-            // Resolve document fragments before passing it to `apollo-client`.
-            return this.apolloData.subscribeToMore({
-              ...stmArgs,
-              document: resolvedDocument,
-              onError: (err) => {
-                if (stmArgs.onErr) {
-                  return stmArgs.onErr(err);
-                }
-                throw err;
-              },
+      wrappedConfig = {
+        ...config,
+        options: config.options || {},
+        props: args => {
+          const nextData = this.nextData(args.data);
+          const { root } = separateDataAndRoot(args.data);
+          if (config.props) {
+            // Custom props, in this case we just pass the wrapped args to it.
+            return config.props({
+              ...args,
+              data: { ...args.data, ...nextData },
             });
-          },
-          fetchMore: (lmArgs) => {
-            const resolvedDocument = this.resolveDocument(lmArgs.query);
-            const fetchName = getDefinitionName(resolvedDocument);
-            this.context.eventEmitter.emit(
-              `query.${this.name}.fetchMore.${fetchName}.begin`,
-              {variables: lmArgs.variables});
+          }
 
-            // Resolve document fragments before passing it to `apollo-client`.
-            return this.apolloData.fetchMore({
-              ...lmArgs,
-              query: resolvedDocument,
-            })
-              .then((res) => {
-                this.context.eventEmitter.emit(
-                  `query.${this.name}.fetchMore.${fetchName}.success`,
-                  {variables: lmArgs.variables, data: res.data});
-                return Promise.resolve(res);
-              })
-              .catch((err) => {
-                this.context.eventEmitter.emit(
-                  `query.${this.name}.fetchMore.${fetchName}.error`,
-                  {variables: lmArgs.variables, error: err});
-                throw err;
-              });
-          },
-        };
-      }
-      return this.data;
-    }
+          // Return our wrapped data with a separated root.
+          return { ...args, data: nextData, root };
+        },
+      };
 
-    wrappedConfig = {
-      ...config,
-      options: config.options || {},
-      props: (args) => {
-        const nextData = this.nextData(args.data);
-        const {root} = separateDataAndRoot(args.data);
-        if (config.props) {
+      wrappedOptions = data => {
+        const base =
+          typeof this.wrappedConfig.options === 'function'
+            ? this.wrappedConfig.options(data)
+            : this.wrappedConfig.options;
+        const configs = this.graphqlRegistry.getQueryOptions(this.name);
+        const reducerCallbacks = [base.reducer || (i => i)]
+          .concat(...configs.map(cfg => cfg.reducer))
+          .filter(i => i);
 
-          // Custom props, in this case we just pass the wrapped args to it.
-          return config.props({...args, data: {...args.data, ...nextData}});
-        }
-
-        // Return our wrapped data with a separated root.
-        return {...args, data: nextData, root};
-      },
-    };
-
-    wrappedOptions = (data) => {
-      const base = (typeof this.wrappedConfig.options === 'function')
-        ? this.wrappedConfig.options(data)
-        : this.wrappedConfig.options;
-      const configs = this.graphqlRegistry.getQueryOptions(this.name);
-      const reducerCallbacks =
-        [base.reducer || ((i) => i)]
-          .concat(...configs.map((cfg) => cfg.reducer))
-          .filter((i) => i);
-
-      const reducer = withSkipOnErrors(
-        reducerCallbacks.reduce(
-          (a, b) => (prev, ...rest) => {
+        const reducer = withSkipOnErrors(
+          reducerCallbacks.reduce((a, b) => (prev, ...rest) => {
             const next = a(prev, ...rest);
             return b(next, ...rest) || next;
-          }
-        ));
+          })
+        );
 
-      return {
-        ...base,
-        reducer,
+        return {
+          ...base,
+          reducer,
+        };
       };
-    };
 
-    getWrapped = () => {
-      if (!this.memoized) {
-        this.resolvedDocument = this.resolveDocument(document);
-        this.name = getDefinitionName(this.resolvedDocument);
-        this.memoized = graphql(
-          this.resolvedDocument,
-          {...this.wrappedConfig, options: this.wrappedOptions},
-        )(WrappedComponent);
+      getWrapped = () => {
+        if (!this.memoized) {
+          this.resolvedDocument = this.resolveDocument(document);
+          this.name = getDefinitionName(this.resolvedDocument);
+          this.memoized = graphql(this.resolvedDocument, {
+            ...this.wrappedConfig,
+            options: this.wrappedOptions,
+          })(WrappedComponent);
+        }
+        return this.memoized;
+      };
+
+      render() {
+        const Wrapped = this.getWrapped();
+        return <Wrapped {...this.props} />;
       }
-      return this.memoized;
     };
-
-    render() {
-      const Wrapped = this.getWrapped();
-      return <Wrapped {...this.props} />;
-    }
-  };
-});
+  });
diff --git a/client/coral-framework/loaders/plugins-loader.js b/client/coral-framework/loaders/plugins-loader.js
index 7683dae8d..e87150485 100644
--- a/client/coral-framework/loaders/plugins-loader.js
+++ b/client/coral-framework/loaders/plugins-loader.js
@@ -7,11 +7,13 @@
  * module.exports = [{plugin: string, module: object}, ...]
  *
  */
-const {stripIndent} = require('common-tags');
+const { stripIndent } = require('common-tags');
 
 function getPluginList(config) {
   if (config && config.client) {
-    return config.client.map((x) => typeof x === 'string' ? x : Object.keys(x)[0]);
+    return config.client.map(
+      x => (typeof x === 'string' ? x : Object.keys(x)[0])
+    );
   }
 
   return [];
@@ -20,10 +22,12 @@ function getPluginList(config) {
 module.exports = function(source) {
   this.cacheable();
   const config = this.exec(source, this.resourcePath);
-  const plugins = getPluginList(config).map((plugin) => `{
+  const plugins = getPluginList(config).map(
+    plugin => `{
     module: require('${plugin}/client').default,
     name: '${plugin}'
-  }`);
+  }`
+  );
 
   return stripIndent`
     module.exports = [
diff --git a/client/coral-framework/services/bootstrap.js b/client/coral-framework/services/bootstrap.js
index 1328b169d..b1014f2db 100644
--- a/client/coral-framework/services/bootstrap.js
+++ b/client/coral-framework/services/bootstrap.js
@@ -1,22 +1,25 @@
-import {createStore} from './store';
-import {createClient, apolloErrorReporter} from './client';
+import { createStore } from './store';
+import { createClient, apolloErrorReporter } from './client';
 import pym from './pym';
 import EventEmitter from 'eventemitter2';
-import {createReduxEmitter} from './events';
-import {createRestClient} from './rest';
+import { createReduxEmitter } from './events';
+import { createRestClient } from './rest';
 import thunk from 'redux-thunk';
-import {loadTranslations} from './i18n';
+import { loadTranslations } from './i18n';
 import bowser from 'bowser';
 import noop from 'lodash/noop';
-import {BASE_PATH} from 'coral-framework/constants/url';
-import {createPluginsService} from './plugins';
-import {createNotificationService} from './notification';
-import {createGraphQLRegistry} from './graphqlRegistry';
-import {createGraphQLService} from './graphql';
+import { BASE_PATH } from 'coral-framework/constants/url';
+import { createPluginsService } from './plugins';
+import { createNotificationService } from './notification';
+import { createGraphQLRegistry } from './graphqlRegistry';
+import { createGraphQLService } from './graphql';
 import globalFragments from 'coral-framework/graphql/fragments';
-import {createStorage, createPymStorage} from 'coral-framework/services/storage';
-import {createHistory} from 'coral-framework/services/history';
-import {createIntrospection} from 'coral-framework/services/introspection';
+import {
+  createStorage,
+  createPymStorage,
+} from 'coral-framework/services/storage';
+import { createHistory } from 'coral-framework/services/history';
+import { createIntrospection } from 'coral-framework/services/introspection';
 import introspectionData from 'coral-framework/graphql/introspection.json';
 
 /**
@@ -32,7 +35,9 @@ const getStaticConfiguration = (() => {
 
     const configElement = document.querySelector('#data');
 
-    staticConfiguration = JSON.parse(configElement ? configElement.textContent : '{}');
+    staticConfiguration = JSON.parse(
+      configElement ? configElement.textContent : '{}'
+    );
 
     return staticConfiguration;
   };
@@ -48,12 +53,9 @@ const getAuthToken = (store, storage) => {
   let state = store.getState();
 
   if (state.config.auth_token) {
-
     // if an auth_token exists in config, use it.
     return state.config.auth_token;
-
   } else if (!bowser.safari && !bowser.ios && storage) {
-
     // Use local storage auth tokens where there's a stable api.
     return storage.getItem('token');
   }
@@ -81,14 +83,13 @@ export async function createContext({
   preInit,
   init = noop,
 } = {}) {
-  const eventEmitter = new EventEmitter({wildcard: true});
+  const eventEmitter = new EventEmitter({ wildcard: true });
   const storage = createStorage();
   const pymStorage = createPymStorage(pym);
   const history = createHistory(BASE_PATH);
   const introspection = createIntrospection(introspectionData);
   let store = null;
   const token = () => {
-
     // Try to get the token from localStorage. If it isn't here, it may
     // be passed as a cookie.
 
@@ -104,9 +105,8 @@ export async function createContext({
 
   // Try to get an overrided liveUri from the static config, if none is found,
   // build it.
-  let {LIVE_URI: liveUri} = getStaticConfiguration();
+  let { LIVE_URI: liveUri } = getStaticConfiguration();
   if (liveUri == null) {
-
     // The protocol must match the origin protocol, secure/insecure.
     const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
 
@@ -123,10 +123,9 @@ export async function createContext({
   });
   const plugins = createPluginsService(pluginsConfig);
   const graphql = createGraphQLService(
-    createGraphQLRegistry(plugins.getSlotFragments.bind(plugins)),
+    createGraphQLRegistry(plugins.getSlotFragments.bind(plugins))
   );
   if (!notification) {
-
     // Use default notification service (pym based)
     notification = createNotificationService(pym);
   }
@@ -146,20 +145,22 @@ export async function createContext({
   };
 
   // Load framework fragments.
-  Object.keys(globalFragments).forEach((key) => graphql.registry.addFragment(key, globalFragments[key]));
+  Object.keys(globalFragments).forEach(key =>
+    graphql.registry.addFragment(key, globalFragments[key])
+  );
 
   // Register graphql extension
   graphql.registry.add(graphqlExtension);
 
   // Register plugin graphql extensions.
-  plugins.getGraphQLExtensions().forEach((ext) => graphql.registry.add(ext));
+  plugins.getGraphQLExtensions().forEach(ext => graphql.registry.add(ext));
 
   // Load plugin translations.
-  plugins.getTranslations().forEach((t) => loadTranslations(t));
+  plugins.getTranslations().forEach(t => loadTranslations(t));
 
   // Pass any events through our parent.
   eventEmitter.onAny((eventName, value) => {
-    pym.sendMessage('event', JSON.stringify({eventName, value}));
+    pym.sendMessage('event', JSON.stringify({ eventName, value }));
   });
 
   // Create our redux store.
@@ -176,13 +177,12 @@ export async function createContext({
   context.store = store;
 
   // Create apollo redux store.
-  context.apolloStore = createStore({
-    apollo: client.reducer(),
-  }, [
-    client.middleware(),
-    apolloErrorReporter,
-    createReduxEmitter(eventEmitter),
-  ]);
+  context.apolloStore = createStore(
+    {
+      apollo: client.reducer(),
+    },
+    [client.middleware(), apolloErrorReporter, createReduxEmitter(eventEmitter)]
+  );
 
   // Run pre initialization.
   if (preInit) {
diff --git a/client/coral-framework/services/client.js b/client/coral-framework/services/client.js
index dc5a67d03..3f435ef03 100644
--- a/client/coral-framework/services/client.js
+++ b/client/coral-framework/services/client.js
@@ -1,9 +1,15 @@
-import ApolloClient, {IntrospectionFragmentMatcher, createNetworkInterface} from 'apollo-client';
-import {SubscriptionClient, addGraphQLSubscriptions} from 'subscriptions-transport-ws';
+import ApolloClient, {
+  IntrospectionFragmentMatcher,
+  createNetworkInterface,
+} from 'apollo-client';
+import {
+  SubscriptionClient,
+  addGraphQLSubscriptions,
+} from 'subscriptions-transport-ws';
 import MessageTypes from 'subscriptions-transport-ws/dist/message-types';
 
 // Redux middleware to report any errors to the console.
-export const apolloErrorReporter = () => (next) => (action) => {
+export const apolloErrorReporter = () => next => action => {
   if (action.type === 'APOLLO_QUERY_ERROR') {
     console.error(action.error);
   }
@@ -24,48 +30,55 @@ function resolveToken(token) {
  * @return {Object}          apollo client
  */
 export function createClient(options = {}) {
-  const {token, uri, liveUri, introspectionData} = options;
+  const { token, uri, liveUri, introspectionData } = options;
   const wsClient = new SubscriptionClient(liveUri, {
     reconnect: true,
     lazy: true,
     connectionParams: {
-      get token() { return resolveToken(token); },
-    }
+      get token() {
+        return resolveToken(token);
+      },
+    },
   });
 
   const networkInterface = createNetworkInterface({
     uri,
     opts: {
-      credentials: 'same-origin'
-    }
+      credentials: 'same-origin',
+    },
   });
 
-  networkInterface.use([{
-    applyMiddleware(req, next) {
-      if (!req.options.headers) {
-        req.options.headers = {};  // Create the header object if needed.
-      }
+  networkInterface.use([
+    {
+      applyMiddleware(req, next) {
+        if (!req.options.headers) {
+          req.options.headers = {}; // Create the header object if needed.
+        }
 
-      let authToken = resolveToken(token);
-      if (authToken) {
-        req.options.headers['authorization'] = `Bearer ${authToken}`;
-      }
+        let authToken = resolveToken(token);
+        if (authToken) {
+          req.options.headers['authorization'] = `Bearer ${authToken}`;
+        }
 
-      next();
-    }
-  }]);
+        next();
+      },
+    },
+  ]);
 
   const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
     networkInterface,
-    wsClient,
+    wsClient
   );
 
   const client = new ApolloClient({
     connectToDevTools: true,
     addTypename: true,
-    fragmentMatcher: new IntrospectionFragmentMatcher({introspectionQueryResultData: introspectionData}),
-    dataIdFromObject: (result) => {
-      if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
+    fragmentMatcher: new IntrospectionFragmentMatcher({
+      introspectionQueryResultData: introspectionData,
+    }),
+    dataIdFromObject: result => {
+      if (result.id && result.__typename) {
+        // eslint-disable-line no-underscore-dangle
         return `${result.__typename}_${result.id}`; // eslint-disable-line no-underscore-dangle
       }
       return null;
@@ -74,7 +87,6 @@ export function createClient(options = {}) {
   });
 
   client.resetWebsocket = () => {
-
     // Close socket connection which will also unregister subscriptions on the server-side.
     wsClient.close();
 
@@ -83,8 +95,12 @@ export function createClient(options = {}) {
 
     // Reregister all subscriptions (uses non public api).
     // See: https://github.com/apollographql/subscriptions-transport-ws/issues/171
-    Object.keys(wsClient.operations).forEach((id) => {
-      wsClient.sendMessage(id, MessageTypes.GQL_START, wsClient.operations[id].options);
+    Object.keys(wsClient.operations).forEach(id => {
+      wsClient.sendMessage(
+        id,
+        MessageTypes.GQL_START,
+        wsClient.operations[id].options
+      );
     });
   };
 
diff --git a/client/coral-framework/services/events.js b/client/coral-framework/services/events.js
index e1b13afd9..e0d1b1354 100644
--- a/client/coral-framework/services/events.js
+++ b/client/coral-framework/services/events.js
@@ -5,17 +5,19 @@
  * @return {function}  redux middleware
  */
 export function createReduxEmitter(eventEmitter) {
-  return () => (next) => (action) => {
-
+  return () => next => action => {
     // Handle apollo actions.
     if (action.type.startsWith('APOLLO_')) {
       if (action.type === 'APOLLO_SUBSCRIPTION_RESULT') {
-        const {operationName, variables, result: {data}} = action;
-        eventEmitter.emit(`subscription.${operationName}.data`, {variables, data});
+        const { operationName, variables, result: { data } } = action;
+        eventEmitter.emit(`subscription.${operationName}.data`, {
+          variables,
+          data,
+        });
       }
       return next(action);
     }
-    eventEmitter.emit(`action.${action.type}`, {action});
+    eventEmitter.emit(`action.${action.type}`, { action });
 
     return next(action);
   };
diff --git a/client/coral-framework/services/graphql.js b/client/coral-framework/services/graphql.js
index d7b132bd4..dfb1810ce 100644
--- a/client/coral-framework/services/graphql.js
+++ b/client/coral-framework/services/graphql.js
@@ -1,4 +1,4 @@
-import {addTypenameToDocument} from 'apollo-client/queries/queryTransform';
+import { addTypenameToDocument } from 'apollo-client/queries/queryTransform';
 
 /**
  * createGraphQLService
@@ -9,9 +9,10 @@ export function createGraphQLService(registry) {
   return {
     registry,
     resolveDocument(documentOrCallback, props, context) {
-      let document = typeof documentOrCallback === 'function'
-        ? documentOrCallback(props, context)
-        : documentOrCallback;
+      let document =
+        typeof documentOrCallback === 'function'
+          ? documentOrCallback(props, context)
+          : documentOrCallback;
       document = registry.resolveFragments(document);
 
       // We also add typenames to the document which apollo would usually do,
diff --git a/client/coral-framework/services/graphqlRegistry.js b/client/coral-framework/services/graphqlRegistry.js
index 938bf7f78..b0aa4a2f4 100644
--- a/client/coral-framework/services/graphqlRegistry.js
+++ b/client/coral-framework/services/graphqlRegistry.js
@@ -1,6 +1,6 @@
-import {getDefinitionName, mergeDocuments} from 'coral-framework/utils';
+import { getDefinitionName, mergeDocuments } from 'coral-framework/utils';
 import uniq from 'lodash/uniq';
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 
 /*
  * Disable false-positive warning below, as it doesn't work well with how we currently
@@ -12,7 +12,7 @@ import {gql} from 'react-apollo';
  */
 gql.disableFragmentWarnings();
 
-const getTypeName = (ast) => ast.definitions[0].typeCondition.name.value;
+const getTypeName = ast => ast.definitions[0].typeCondition.name.value;
 
 class GraphQLRegistry {
   fragments = {};
@@ -37,7 +37,7 @@ class GraphQLRegistry {
     const type = getTypeName(document);
     const name = getDefinitionName(document);
     if (!(key in this.fragments)) {
-      this.fragments[key] = {type, names: [name], documents: [document]};
+      this.fragments[key] = { type, names: [name], documents: [document] };
     } else {
       if (type !== this.fragments[key].type) {
         console.error(`Type mismatch ${type} !== ${this.fragments[key].type}`);
@@ -131,9 +131,15 @@ class GraphQLRegistry {
    * });
    */
   add(extension) {
-    Object.keys(extension.fragments || []).forEach((key) => this.addFragment(key, extension.fragments[key]));
-    Object.keys(extension.mutations || []).forEach((key) => this.addMutationOptions(key, extension.mutations[key]));
-    Object.keys(extension.queries || []).forEach((key) => this.addQueryOptions(key, extension.queries[key]));
+    Object.keys(extension.fragments || []).forEach(key =>
+      this.addFragment(key, extension.fragments[key])
+    );
+    Object.keys(extension.mutations || []).forEach(key =>
+      this.addMutationOptions(key, extension.mutations[key])
+    );
+    Object.keys(extension.queries || []).forEach(key =>
+      this.addQueryOptions(key, extension.queries[key])
+    );
   }
 
   /**
@@ -169,7 +175,7 @@ class GraphQLRegistry {
       return '';
     }
 
-    const names = documents.map((d) => getDefinitionName(d));
+    const names = documents.map(d => getDefinitionName(d));
     const typeName = getTypeName(documents[0]);
 
     // Assemble arguments for `gql` to call it directly without using template literals.
@@ -191,7 +197,7 @@ class GraphQLRegistry {
     }
 
     let documents = this.fragments[key].documents;
-    let fields =  `...${this.fragments[key].names.join('\n...')}\n`;
+    let fields = `...${this.fragments[key].names.join('\n...')}\n`;
 
     // Assemble arguments for `gql` to call it directly without using template literals.
     const main = `
@@ -208,7 +214,9 @@ class GraphQLRegistry {
    * return the slot fragments specified by this key.
    */
   getFragmentDocument(key) {
-    return this.getRegistryFragmentDocument(key) || this.getSlotFragmentDocument(key);
+    return (
+      this.getRegistryFragmentDocument(key) || this.getSlotFragmentDocument(key)
+    );
   }
 
   /**
@@ -217,7 +225,6 @@ class GraphQLRegistry {
    */
   resolveFragments(document) {
     if (document.loc.source) {
-
       // Remember keys that we have already resolved.
       const resolvedKeys = [];
 
@@ -236,17 +243,18 @@ class GraphQLRegistry {
       while (!done) {
         done = true;
 
-        const matchedSubFragments = body.match(/\.\.\.([_a-zA-Z][_a-zA-Z0-9]*)/g) || [];
-        uniq(matchedSubFragments.map((f) => f.replace('...', '')))
-          .filter((key) => resolvedKeys.indexOf(key) === -1)
-          .forEach((key) => {
+        const matchedSubFragments =
+          body.match(/\.\.\.([_a-zA-Z][_a-zA-Z0-9]*)/g) || [];
+        uniq(matchedSubFragments.map(f => f.replace('...', '')))
+          .filter(key => resolvedKeys.indexOf(key) === -1)
+          .forEach(key => {
             const doc = this.getFragmentDocument(key);
             if (doc) {
               subFragments.push(doc);
 
               // We found a new fragment, so we are not done yet.
               done = false;
-            } else if(key.startsWith('TalkSlot_')) {
+            } else if (key.startsWith('TalkSlot_')) {
               spreadsToBeRemoved.push(key);
             }
             resolvedKeys.push(key);
@@ -255,14 +263,18 @@ class GraphQLRegistry {
         body = mergeDocuments([body, ...subFragments]).loc.source.body;
       }
 
-      spreadsToBeRemoved.forEach((key) => {
+      spreadsToBeRemoved.forEach(key => {
         const regex = new RegExp(`\\.\\.\\.${key}\n`, 'g');
         body = body.replace(regex, '');
       });
 
-      return gql`${body}`;
+      return gql`
+        ${body}
+      `;
     } else {
-      console.warn('Can only resolve fragments from documents definied using the gql tag.');
+      console.warn(
+        'Can only resolve fragments from documents definied using the gql tag.'
+      );
     }
     return document;
   }
diff --git a/client/coral-framework/services/history.js b/client/coral-framework/services/history.js
index c80d4b920..4e8365a66 100644
--- a/client/coral-framework/services/history.js
+++ b/client/coral-framework/services/history.js
@@ -1,5 +1,5 @@
-import {browserHistory} from 'react-router';
-import {useBasename} from 'history';
+import { browserHistory } from 'react-router';
+import { useBasename } from 'history';
 
 /**
  * createHistory returns the history service for react router
@@ -12,6 +12,6 @@ export function createHistory(basename) {
   }
 
   return useBasename(() => browserHistory)({
-    basename
+    basename,
   });
 }
diff --git a/client/coral-framework/services/i18n.js b/client/coral-framework/services/i18n.js
index 3b1fec2af..6c4aa00a9 100644
--- a/client/coral-framework/services/i18n.js
+++ b/client/coral-framework/services/i18n.js
@@ -3,6 +3,12 @@ import has from 'lodash/has';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
 
+import moment from 'moment';
+import 'moment/locale/da';
+import 'moment/locale/es';
+import 'moment/locale/fr';
+import 'moment/locale/pt-br';
+
 import daTA from 'timeago.js/locales/da';
 import esTA from 'timeago.js/locales/es';
 import frTA from 'timeago.js/locales/fr';
@@ -19,7 +25,15 @@ import zh_CN from '../../../locales/zh_CN.yml';
 import zh_TW from '../../../locales/zh_TW.yml';
 
 const defaultLanguage = process.env.TALK_DEFAULT_LANG;
-const translations = {...en, ...da, ...es, ...fr, ...pt_BR, ...zh_CN, ...zh_TW};
+const translations = {
+  ...en,
+  ...da,
+  ...es,
+  ...fr,
+  ...pt_BR,
+  ...zh_CN,
+  ...zh_TW,
+};
 
 let lang;
 let timeagoInstance;
@@ -33,13 +47,20 @@ function setLocale(locale) {
 }
 
 function getLocale() {
-  return (localStorage.getItem('locale') || navigator.language || defaultLanguage).split('-')[0];
+  return (
+    localStorage.getItem('locale') ||
+    navigator.language ||
+    defaultLanguage
+  ).split('-')[0];
 }
 
 function init() {
   const locale = getLocale();
   setLocale(locale);
 
+  // Setting moment
+  moment.locale(locale);
+
   // Extract language key.
   lang = locale.split('-')[0];
 
diff --git a/client/coral-framework/services/introspection.js b/client/coral-framework/services/introspection.js
index fd82d41d6..8e3160aa7 100644
--- a/client/coral-framework/services/introspection.js
+++ b/client/coral-framework/services/introspection.js
@@ -1,11 +1,11 @@
 class Introspection {
-  _enums=null;
+  _enums = null;
 
   constructor(data) {
     this._enums = data.__schema.types
-      .filter((type) => type.kind === 'ENUM')
+      .filter(type => type.kind === 'ENUM')
       .reduce((obj, enumType) => {
-        obj[enumType.name] = enumType.enumValues.map((value) => value.name);
+        obj[enumType.name] = enumType.enumValues.map(value => value.name);
         return obj;
       }, {});
   }
diff --git a/client/coral-framework/services/notification.js b/client/coral-framework/services/notification.js
index a3f1a6520..b80c3f0e5 100644
--- a/client/coral-framework/services/notification.js
+++ b/client/coral-framework/services/notification.js
@@ -6,13 +6,13 @@
 export function createNotificationService(pym) {
   return {
     success(text) {
-      pym.sendMessage('coral-alert', JSON.stringify({kind: 'success', text}));
+      pym.sendMessage('coral-alert', JSON.stringify({ kind: 'success', text }));
     },
     error(text) {
-      pym.sendMessage('coral-alert', JSON.stringify({kind: 'error', text}));
+      pym.sendMessage('coral-alert', JSON.stringify({ kind: 'error', text }));
     },
     info(text) {
-      pym.sendMessage('coral-alert', JSON.stringify({kind: 'info', text}));
+      pym.sendMessage('coral-alert', JSON.stringify({ kind: 'info', text }));
     },
   };
 }
diff --git a/client/coral-framework/services/perms.js b/client/coral-framework/services/perms.js
index 825c978ca..da833de14 100644
--- a/client/coral-framework/services/perms.js
+++ b/client/coral-framework/services/perms.js
@@ -1,40 +1,62 @@
-import intersection from 'lodash/intersection';
+import get from 'lodash/get';
+
+// =========================================================================
+// BASIC PERMISSIONS
+// =========================================================================
+
+const basicPerms = {
+  INTERACT_WITH_COMMUNITY: user => {
+    const banned = get(user, 'status.banned.status');
+    const suspensionUntil = get(user, 'status.suspension.until');
+    const suspended = suspensionUntil && new Date(suspensionUntil) > new Date();
+
+    return !banned && !suspended;
+  },
+  EDIT_NAME: user => {
+    const usernameStatus = user.status.username.status;
+    return usernameStatus === 'UNSET' || usernameStatus === 'REJECTED';
+  },
+};
+
+// =========================================================================
+// PERMISSIONS BY ROLE
+// =========================================================================
 
 const basicRoles = {
-  HAS_STAFF_TAG: ['ADMIN', 'MODERATOR', 'STAFF']
+  HAS_STAFF_TAG: ['ADMIN', 'MODERATOR', 'STAFF'],
 };
 
 const queryRoles = {
   UPDATE_CONFIG: ['ADMIN'],
   ACCESS_ADMIN: ['ADMIN', 'MODERATOR'],
-  VIEW_USER_EMAILS: ['ADMIN']
+  VIEW_USER_EMAILS: ['ADMIN'],
 };
 
 const mutationRoles = {
   CHANGE_ROLES: ['ADMIN'],
-  MODERATE_COMMENTS: ['ADMIN', 'MODERATOR']
+  MODERATE_COMMENTS: ['ADMIN', 'MODERATOR'],
 };
 
-const roles = {...basicRoles, ...queryRoles, ...mutationRoles};
+const roles = { ...basicRoles, ...queryRoles, ...mutationRoles };
 
 export const can = (user, ...perms) => {
-
   if (!user) {
     return false;
   }
 
-  const banned = user.status === 'BANNED';
-  const suspended = user.suspension.until && new Date(user.suspension.until) > new Date();
-
-  return perms.every((perm) => {
-    if (perm === 'INTERACT_WITH_COMMUNITY') {
-      return !banned && !suspended;
+  return perms.every(perm => {
+    // Basic Permissions
+    const permAction = basicPerms[perm];
+    if (typeof permAction !== 'undefined') {
+      return permAction(user);
     }
+
+    // Permissions by Role
     const role = roles[perm];
     if (typeof role === 'undefined') {
-      throw new Error(`${perm} is not a valid role`);
+      throw new Error(`${perm} is not a valid role or permission`);
     }
 
-    return intersection(role, user.roles).length > 0;
+    return role.includes(user.role);
   });
 };
diff --git a/client/coral-framework/services/plugins.js b/client/coral-framework/services/plugins.js
index c8eb737fd..8f9fa8080 100644
--- a/client/coral-framework/services/plugins.js
+++ b/client/coral-framework/services/plugins.js
@@ -6,7 +6,7 @@ import flattenDeep from 'lodash/flattenDeep';
 import isEmpty from 'lodash/isEmpty';
 import flatten from 'lodash/flatten';
 import mapValues from 'lodash/mapValues';
-import {getDisplayName} from 'coral-framework/helpers/hoc';
+import { getDisplayName } from 'coral-framework/helpers/hoc';
 import camelize from '../helpers/camelize';
 
 // This is returned for pluginConfig when it is empty.
@@ -19,32 +19,32 @@ const memoizedWarnings = [];
 // prints a warning when accessing deeper props.
 function withWarnings(component, queryData) {
   if (process.env.NODE_ENV !== 'production' && window.Proxy) {
-
     // Show warnings when accessing queryData only when not in production.
     return mapValues(queryData, (value, key) => {
-
       // Keep null values..
       if (!queryData[key]) {
         return queryData[key];
       }
       return new Proxy(queryData[key], {
         get(target, name) {
-
           // Detect access from React DevTools and ignore those.
           const error = new Error();
-          const accessFromDevTools = ['backend.js', 'dehydrate']
-            .every((keyword) => error.stack && error.stack.includes(keyword));
+          const accessFromDevTools = ['backend.js', 'dehydrate'].every(
+            keyword => error.stack && error.stack.includes(keyword)
+          );
 
           // Only care about the components defined in the plugins.
           if (component.talkPluginName && !accessFromDevTools) {
-            const warning = `'${getDisplayName(component)}' of '${component.talkPluginName}' accessed '${key}.${name}' but did not define fragments using the withFragment HOC`;
+            const warning = `'${getDisplayName(component)}' of '${
+              component.talkPluginName
+            }' accessed '${key}.${name}' but did not define fragments using the withFragment HOC`;
             if (memoizedWarnings.indexOf(warning) === -1) {
               console.warn(warning);
               memoizedWarnings.push(warning);
             }
           }
           return queryData[key][name];
-        }
+        },
       });
     });
   }
@@ -53,17 +53,16 @@ function withWarnings(component, queryData) {
 }
 
 function addMetaDataToSlotComponents(plugins) {
-
   // Add talkPluginName to Slot Components.
-  plugins.forEach((plugin) => {
+  plugins.forEach(plugin => {
     const slots = plugin.module.slots;
-    slots && Object.keys(slots).forEach((slot) => {
-      slots[slot].forEach((component) => {
-
-        // Attach plugin name to the component
-        component.talkPluginName = plugin.name;
+    slots &&
+      Object.keys(slots).forEach(slot => {
+        slots[slot].forEach(component => {
+          // Attach plugin name to the component
+          component.talkPluginName = plugin.name;
+        });
       });
-    });
   });
 }
 
@@ -74,7 +73,9 @@ class PluginsService {
   }
 
   isSlotEmpty(slot, reduxState, props = {}, queryData = {}) {
-    return this.getSlotElements(slot, reduxState, props, queryData).length === 0;
+    return (
+      this.getSlotElements(slot, reduxState, props, queryData).length === 0
+    );
   }
 
   /**
@@ -86,11 +87,9 @@ class PluginsService {
     return {
       ...props,
       config: pluginConfig,
-      ...(
-        component.fragments
-          ? pick(queryData, Object.keys(component.fragments))
-          : withWarnings(component, queryData)
-      )
+      ...(component.fragments
+        ? pick(queryData, Object.keys(component.fragments))
+        : withWarnings(component, queryData)),
     };
   }
 
@@ -100,7 +99,7 @@ class PluginsService {
   getSlotElements(slot, reduxState, props = {}, queryData = {}) {
     const pluginConfig = reduxState.config.plugin_config || emptyConfig;
 
-    const isDisabled = (component) => {
+    const isDisabled = component => {
       if (
         pluginConfig &&
         pluginConfig[component.talkPluginName] &&
@@ -110,10 +109,18 @@ class PluginsService {
       }
 
       // Check if component is excluded.
-      if(component.isExcluded) {
-        let resolvedProps = this.getSlotComponentProps(component, reduxState, props, queryData);
+      if (component.isExcluded) {
+        let resolvedProps = this.getSlotComponentProps(
+          component,
+          reduxState,
+          props,
+          queryData
+        );
         if (component.mapStateToProps) {
-          resolvedProps = {...resolvedProps, ...component.mapStateToProps(reduxState)};
+          resolvedProps = {
+            ...resolvedProps,
+            ...component.mapStateToProps(reduxState),
+          };
         }
         return component.isExcluded(resolvedProps);
       }
@@ -121,30 +128,42 @@ class PluginsService {
       return false;
     };
 
-    return flatten(this.plugins
-      .filter((o) => o.module.slots && o.module.slots[slot])
-      .map((o) => o.module.slots[slot])
+    return flatten(
+      this.plugins
+        .filter(o => o.module.slots && o.module.slots[slot])
+        .map(o => o.module.slots[slot])
     )
       .map((component, i) => ({
         component,
         disabled: isDisabled(component),
         key: i,
       }))
-      .filter((o) => !o.disabled)
-      .map(({component, key}) =>
-        React.createElement(component, {key, ...this.getSlotComponentProps(component, reduxState, props, queryData)})
+      .filter(o => !o.disabled)
+      .map(({ component, key }) =>
+        React.createElement(component, {
+          key,
+          ...this.getSlotComponentProps(
+            component,
+            reduxState,
+            props,
+            queryData
+          ),
+        })
       );
   }
 
   getSlotFragments(slot, part) {
-    const components = uniq(flattenDeep(this.plugins
-      .filter((o) => o.module.slots ? o.module.slots[slot] : false)
-      .map((o) => o.module.slots[slot])
-    ));
+    const components = uniq(
+      flattenDeep(
+        this.plugins
+          .filter(o => (o.module.slots ? o.module.slots[slot] : false))
+          .map(o => o.module.slots[slot])
+      )
+    );
 
     const documents = components
-      .map((c) => c.fragments)
-      .filter((fragments) => fragments && fragments[part])
+      .map(c => c.fragments)
+      .filter(fragments => fragments && fragments[part])
       .reduce((res, fragments) => {
         res.push(fragments[part]);
         return res;
@@ -155,35 +174,31 @@ class PluginsService {
 
   getGraphQLExtensions() {
     return this.plugins
-      .map((o) => pick(o.module, ['mutations', 'queries', 'fragments']))
-      .filter((o) => !isEmpty(o));
+      .map(o => pick(o.module, ['mutations', 'queries', 'fragments']))
+      .filter(o => !isEmpty(o));
   }
 
   getModQueueConfigs() {
-    return merge(...this.plugins
-      .map((o) => o.module.modQueues)
-      .filter((o) => o));
+    return merge(...this.plugins.map(o => o.module.modQueues).filter(o => o));
   }
 
   getTranslations() {
-    return this.plugins
-      .map((o) => o.module.translations)
-      .filter((o) => o);
+    return this.plugins.map(o => o.module.translations).filter(o => o);
   }
 
   getReducers() {
     return merge(
       ...this.plugins
-        .filter((o) => o.module.reducer)
-        .map((o) => ({[camelize(o.name)] : o.module.reducer}))
+        .filter(o => o.module.reducer)
+        .map(o => ({ [camelize(o.name)]: o.module.reducer }))
     );
   }
 
   async executeInit(context) {
     const results = this.plugins
-      .map((o) => o.module.init)
-      .filter((fn) => fn)
-      .map((fn) => fn(context));
+      .map(o => o.module.init)
+      .filter(fn => fn)
+      .map(fn => fn(context));
     await Promise.all(results);
   }
 }
diff --git a/client/coral-framework/services/pym.js b/client/coral-framework/services/pym.js
index bb5d90a0e..be81fc518 100644
--- a/client/coral-framework/services/pym.js
+++ b/client/coral-framework/services/pym.js
@@ -1,9 +1,9 @@
 import Pym from 'pym.js';
 
-const pym = new Pym.Child({polling: 100});
+const pym = new Pym.Child({ polling: 100 });
 export default pym;
 
-export const link = (url) => (e) => {
+export const link = url => e => {
   e.preventDefault();
   pym.sendMessage('navigate', url);
 };
diff --git a/client/coral-framework/services/rest.js b/client/coral-framework/services/rest.js
index e5f9e5e09..467cfead9 100644
--- a/client/coral-framework/services/rest.js
+++ b/client/coral-framework/services/rest.js
@@ -7,7 +7,7 @@ const buildOptions = (inputOptions = {}) => {
       Accept: 'application/json',
       'Content-Type': 'application/json',
     },
-    credentials: 'same-origin'
+    credentials: 'same-origin',
   };
 
   const options = merge({}, defaultOptions, inputOptions);
@@ -18,9 +18,9 @@ const buildOptions = (inputOptions = {}) => {
   return options;
 };
 
-const handleResp = (res) => {
+const handleResp = res => {
   if (res.status > 399) {
-    return res.json().then((err) => {
+    return res.json().then(err => {
       let message = err.message || res.status;
       const error = new Error();
 
@@ -51,7 +51,7 @@ const handleResp = (res) => {
  * @return {Object}          rest client
  */
 export function createRestClient(options) {
-  const {token, uri} = options;
+  const { token, uri } = options;
   const client = (path, options) => {
     const authToken = typeof token === 'function' ? token() : token;
     let opts = options;
diff --git a/client/coral-framework/services/storage.js b/client/coral-framework/services/storage.js
index 11aa5df98..1909373b7 100644
--- a/client/coral-framework/services/storage.js
+++ b/client/coral-framework/services/storage.js
@@ -1,32 +1,27 @@
 import uuid from 'uuid/v4';
 
 function getStorage(type) {
-  let storage = window[type], x = '__storage_test__';
+  let storage = window[type],
+    x = '__storage_test__';
   try {
     storage.setItem(x, x);
     storage.removeItem(x);
   } catch (e) {
-    const ignore = (
+    const ignore =
       e instanceof DOMException &&
-
       // everything except Firefox
       (e.code === 22 ||
-
         // Firefox
 
         e.code === 1014 ||
-
         // test name field too, because code might not be present
 
         // everything except Firefox
         e.name === 'QuotaExceededError' ||
-
         // Firefox
         e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
-
       // acknowledge QuotaExceededError only if there's something already stored
-      storage.length !== 0
-    );
+      storage.length !== 0;
     if (!ignore) {
       console.warning(e); // eslint-disable-line
       return null;
@@ -50,7 +45,6 @@ export function createStorage() {
  * @return {Object} storage
  */
 export function createPymStorage(pym) {
-
   // A Map of requestID => {resolve, reject}
   const requests = {};
 
@@ -58,29 +52,32 @@ export function createPymStorage(pym) {
   const call = (method, parameters) => {
     const id = uuid();
     return new Promise((resolve, reject) => {
-      requests[id] = {resolve, reject};
-      pym.sendMessage('pymStorage.request', JSON.stringify({id, method, parameters}));
+      requests[id] = { resolve, reject };
+      pym.sendMessage(
+        'pymStorage.request',
+        JSON.stringify({ id, method, parameters })
+      );
     });
   };
 
   // Receive successful responses.
-  pym.onMessage('pymStorage.response', (msg) => {
-    const {id, result} = JSON.parse(msg);
+  pym.onMessage('pymStorage.response', msg => {
+    const { id, result } = JSON.parse(msg);
     requests[id].resolve(result);
     delete requests[id];
   });
 
   // Receive error responses.
-  pym.onMessage('pymStorage.error', (msg) => {
-    const {id, error} = JSON.parse(msg);
+  pym.onMessage('pymStorage.error', msg => {
+    const { id, error } = JSON.parse(msg);
     requests[id].reject(error);
     delete requests[id];
   });
 
   return {
-    setItem: (key, value) => call('setItem', {key, value}),
-    getItem: (key, value) => call('getItem', {key, value}),
-    removeItem: (key) => call('removeItem', {key}),
+    setItem: (key, value) => call('setItem', { key, value }),
+    getItem: (key, value) => call('getItem', { key, value }),
+    removeItem: key => call('removeItem', { key }),
   };
 }
 
@@ -92,41 +89,39 @@ export function createPymStorage(pym) {
  * @param  {string} prefix   namespace requests by prepending a prefix to the keys
  */
 export function connectStorageToPym(storage, pym, prefix = 'talkPymStorage:') {
-  pym.onMessage('pymStorage.request', (msg) => {
-    const {id, method, parameters} = JSON.parse(msg);
-    const {key, value} = parameters;
+  pym.onMessage('pymStorage.request', msg => {
+    const { id, method, parameters } = JSON.parse(msg);
+    const { key, value } = parameters;
     const prefixedKey = `${prefix}${key}`;
 
     // Variable for the method return value.
     let result;
 
-    const sendError = (error) => {
+    const sendError = error => {
       console.error(error);
-      pym.sendMessage('pymStorage.error', JSON.stringify({id, error}));
+      pym.sendMessage('pymStorage.error', JSON.stringify({ id, error }));
     };
 
     try {
-      switch(method) {
-      case 'setItem':
-        result = storage.setItem(prefixedKey, value);
-        break;
-      case 'getItem':
-        result = storage.getItem(prefixedKey);
-        break;
-      case 'removeItem':
-        result = storage.removeItem(prefixedKey);
-        break;
-      default:
-        sendError(`Unknown method ${method}`);
-        return;
+      switch (method) {
+        case 'setItem':
+          result = storage.setItem(prefixedKey, value);
+          break;
+        case 'getItem':
+          result = storage.getItem(prefixedKey);
+          break;
+        case 'removeItem':
+          result = storage.removeItem(prefixedKey);
+          break;
+        default:
+          sendError(`Unknown method ${method}`);
+          return;
       }
-    }
-    catch(err) {
+    } catch (err) {
       sendError(err.toString());
       return;
     }
 
-    pym.sendMessage('pymStorage.response', JSON.stringify({id, result}));
+    pym.sendMessage('pymStorage.response', JSON.stringify({ id, result }));
   });
 }
-
diff --git a/client/coral-framework/services/store.js b/client/coral-framework/services/store.js
index 3ccfe9e2f..b3a470170 100644
--- a/client/coral-framework/services/store.js
+++ b/client/coral-framework/services/store.js
@@ -1,4 +1,9 @@
-import {createStore as reduxCreateStore, combineReducers, applyMiddleware, compose} from 'redux';
+import {
+  createStore as reduxCreateStore,
+  combineReducers,
+  applyMiddleware,
+  compose,
+} from 'redux';
 
 /**
  * createStore creates a Redux Store
@@ -7,21 +12,12 @@ import {createStore as reduxCreateStore, combineReducers, applyMiddleware, compo
  * @return {Object}  redux store
  */
 export function createStore(reducers, middlewares = []) {
-  const enhancers = [
-    applyMiddleware(
-      ...middlewares,
-    ),
-  ];
+  const enhancers = [applyMiddleware(...middlewares)];
 
   if (window.devToolsExtension) {
-
     // we can't have the last argument of compose() be undefined
     enhancers.push(window.devToolsExtension());
   }
 
-  return reduxCreateStore(
-    combineReducers(reducers),
-    {},
-    compose(...enhancers)
-  );
+  return reduxCreateStore(combineReducers(reducers), {}, compose(...enhancers));
 }
diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js
index 86e9e1915..d53b9b496 100644
--- a/client/coral-framework/utils/index.js
+++ b/client/coral-framework/utils/index.js
@@ -1,31 +1,30 @@
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import t from 'coral-framework/services/i18n';
 import union from 'lodash/union';
-import {capitalize} from 'coral-framework/helpers/strings';
+import { capitalize } from 'coral-framework/helpers/strings';
 import assignWith from 'lodash/assignWith';
 import mapValues from 'lodash/mapValues';
 export * from 'coral-framework/helpers/strings';
 
 export const getTotalActionCount = (type, comment) => {
   return comment.action_summaries
-    .filter((s) => s.__typename === type)
+    .filter(s => s.__typename === type)
     .reduce((total, summary) => {
       return total + summary.count;
     }, 0);
 };
 
 export const iPerformedThisAction = (type, comment) => {
-
   // if there is a current_user on any of the ActionSummary(s), the user performed this action
   return comment.action_summaries
-    .filter((a) => a.__typename === type)
-    .some((a) => a.current_user);
+    .filter(a => a.__typename === type)
+    .some(a => a.current_user);
 };
 
 export const getMyActionSummary = (type, comment) => {
   return comment.action_summaries
-    .filter((a) => a.__typename === type)
-    .find((a) => a.current_user);
+    .filter(a => a.__typename === type)
+    .find(a => a.current_user);
 };
 
 /**
@@ -35,7 +34,7 @@ export const getMyActionSummary = (type, comment) => {
  */
 
 export const getActionSummary = (type, comment) => {
-  return comment.action_summaries.filter((a) => a.__typename === type);
+  return comment.action_summaries.filter(a => a.__typename === type);
 };
 
 /**
@@ -50,23 +49,32 @@ export function getDefinitionName(doc, pos = 0) {
  * `data` will contain props like `loading`, `fetchMore`...
  * while `root` contains the actual query data.
  */
-export function separateDataAndRoot(
-  {
-    fetchMore,
-    loading,
-    networkStatus,
-    refetch,
-    startPolling,
-    stopPolling,
-    subscribeToMore,
-    updateQuery,
-    variables,
-    error,
-    ...root,
-  }) {
+export function separateDataAndRoot({
+  fetchMore,
+  loading,
+  networkStatus,
+  refetch,
+  startPolling,
+  stopPolling,
+  subscribeToMore,
+  updateQuery,
+  variables,
+  error,
+  ...root
+}) {
   return {
-    data: {fetchMore, loading, networkStatus, refetch, startPolling,
-      stopPolling, subscribeToMore, updateQuery, variables, error},
+    data: {
+      fetchMore,
+      loading,
+      networkStatus,
+      refetch,
+      startPolling,
+      stopPolling,
+      subscribeToMore,
+      updateQuery,
+      variables,
+      error,
+    },
     root,
   };
 }
@@ -87,22 +95,46 @@ export function dateAdd(date, interval, units) {
       ret.setDate(0);
     }
   };
-  switch(interval.toLowerCase()) {
-  case 'year'   :  ret.setFullYear(ret.getFullYear() + units); checkRollover();  break;
-  case 'quarter':  ret.setMonth(ret.getMonth() + 3 * units); checkRollover();  break;
-  case 'month'  :  ret.setMonth(ret.getMonth() + units); checkRollover();  break;
-  case 'week'   :  ret.setDate(ret.getDate() + 7 * units);  break;
-  case 'day'    :  ret.setDate(ret.getDate() + units);  break;
-  case 'hour'   :  ret.setTime(ret.getTime() + units * 3600000);  break;
-  case 'minute' :  ret.setTime(ret.getTime() + units * 60000);  break;
-  case 'second' :  ret.setTime(ret.getTime() + units * 1000);  break;
-  default       :  ret = undefined;  break;
+  switch (interval.toLowerCase()) {
+    case 'year':
+      ret.setFullYear(ret.getFullYear() + units);
+      checkRollover();
+      break;
+    case 'quarter':
+      ret.setMonth(ret.getMonth() + 3 * units);
+      checkRollover();
+      break;
+    case 'month':
+      ret.setMonth(ret.getMonth() + units);
+      checkRollover();
+      break;
+    case 'week':
+      ret.setDate(ret.getDate() + 7 * units);
+      break;
+    case 'day':
+      ret.setDate(ret.getDate() + units);
+      break;
+    case 'hour':
+      ret.setTime(ret.getTime() + units * 3600000);
+      break;
+    case 'minute':
+      ret.setTime(ret.getTime() + units * 60000);
+      break;
+    case 'second':
+      ret.setTime(ret.getTime() + units * 1000);
+      break;
+    default:
+      ret = undefined;
+      break;
   }
   return ret;
 }
 
 export function mergeDocuments(documents) {
-  const main = typeof documents[0] === 'string' ? documents[0] : documents[0].loc.source.body;
+  const main =
+    typeof documents[0] === 'string'
+      ? documents[0]
+      : documents[0].loc.source.body;
   const substitutions = documents.slice(1);
   const literals = [main, ...substitutions.map(() => '\n')];
   return gql.apply(null, [literals, ...substitutions]);
@@ -110,8 +142,9 @@ export function mergeDocuments(documents) {
 
 export function getResponseErrors(mutationResult) {
   const result = [];
-  Object.keys(mutationResult.data).forEach((response) => {
-    const errors = mutationResult.data[response] && mutationResult.data[response].errors;
+  Object.keys(mutationResult.data).forEach(response => {
+    const errors =
+      mutationResult.data[response] && mutationResult.data[response].errors;
     if (errors && errors.length) {
       result.push(...errors);
     }
@@ -121,7 +154,7 @@ export function getResponseErrors(mutationResult) {
 
 export function createDefaultResponseFragments(...names) {
   const result = {};
-  names.forEach((response) => {
+  names.forEach(response => {
     result[response] = gql`
       fragment Coral_${response} on ${response} {
         errors {
@@ -135,7 +168,7 @@ export function createDefaultResponseFragments(...names) {
 
 export function forEachError(error, callback) {
   const errors = error.errors || [error];
-  errors.forEach((e) => {
+  errors.forEach(e => {
     console.error(e);
 
     let msg = '';
@@ -146,25 +179,29 @@ export function forEachError(error, callback) {
     } else {
       msg = t('error.unexpected');
     }
-    callback({error: e, msg});
+    callback({ error: e, msg });
   });
 }
 
 export function getErrorMessages(error) {
   const result = [];
-  forEachError(error, ({msg}) => result.push(msg));
+  forEachError(error, ({ msg }) => result.push(msg));
   return result;
 }
 
 export function appendNewNodes(nodesA, nodesB) {
-  return nodesA.concat(nodesB.filter((nodeB) => !nodesA.some((nodeA) => nodeA.id === nodeB.id)));
+  return nodesA.concat(
+    nodesB.filter(nodeB => !nodesA.some(nodeA => nodeA.id === nodeB.id))
+  );
 }
 
 export function prependNewNodes(nodesA, nodesB) {
-  return nodesB.filter((nodeB) => !nodesA.some((nodeA) => nodeA.id === nodeB.id)).concat(nodesA);
+  return nodesB
+    .filter(nodeB => !nodesA.some(nodeA => nodeA.id === nodeB.id))
+    .concat(nodesA);
 }
 
-export const isTagged = (tags, which) => tags.some((t) => t.tag.name === which);
+export const isTagged = (tags, which) => tags.some(t => t.tag.name === which);
 
 export * from './url';
 
@@ -175,7 +212,9 @@ export * from './url';
  * `...TalkSlot_SlotName_root`.
  */
 export function getSlotFragmentSpreads(slots, resource) {
-  return `...${slots.map((s) => `TalkSlot_${capitalize(s)}_${resource}`).join('\n...')}\n`;
+  return `...${slots
+    .map(s => `TalkSlot_${capitalize(s)}_${resource}`)
+    .join('\n...')}\n`;
 }
 
 export function isCommentActive(commentStatus) {
@@ -183,21 +222,17 @@ export function isCommentActive(commentStatus) {
 }
 
 export function getShallowChanges(a, b) {
-  return union(Object.keys(a), Object.keys(b))
-    .filter((key) => a[key] !== b[key]);
+  return union(Object.keys(a), Object.keys(b)).filter(key => a[key] !== b[key]);
 }
 
 // TODO: replace with something less fragile.
 // NOT_REACTION_TYPES are the action summaries that are not reactions.
-const NOT_REACTION_TYPES = [
-  'FlagActionSummary',
-  'DontAgreeActionSummary',
-];
+const NOT_REACTION_TYPES = ['FlagActionSummary', 'DontAgreeActionSummary'];
 
 export function getTotalReactionsCount(actionSummaries) {
   return actionSummaries
-    .filter(({__typename}) => !NOT_REACTION_TYPES.includes(__typename))
-    .reduce((total, {count}) => total + count, 0);
+    .filter(({ __typename }) => !NOT_REACTION_TYPES.includes(__typename))
+    .reduce((total, { count }) => total + count, 0);
 }
 
 // Like lodash merge but does not recurse into arrays.
@@ -210,7 +245,7 @@ export function mergeExcludingArrays(objValue, srcValue) {
 
 // Map nested object leaves. Array objects are considered leaves.
 export function mapLeaves(o, mapper) {
-  return mapValues(o, (val) => {
+  return mapValues(o, val => {
     if (typeof val === 'object' && !Array.isArray(val)) {
       return mapLeaves(val, mapper);
     }
diff --git a/client/coral-framework/utils/url.js b/client/coral-framework/utils/url.js
index 603a3954d..e7bdb4d3b 100644
--- a/client/coral-framework/utils/url.js
+++ b/client/coral-framework/utils/url.js
@@ -1,8 +1,12 @@
-export function buildUrl({protocol, hostname, port, pathname, search, hash} = window.location) {
+export function buildUrl(
+  { protocol, hostname, port, pathname, search, hash } = window.location
+) {
   if (search && search[0] !== '?') {
     search = `?${search}`;
   } else if (search === '?') {
     search = '';
   }
-  return `${protocol}//${hostname}${port ? `:${port}` : ''}${pathname}${search}${hash}`;
+  return `${protocol}//${hostname}${
+    port ? `:${port}` : ''
+  }${pathname}${search}${hash}`;
 }
diff --git a/client/coral-framework/utils/user.js b/client/coral-framework/utils/user.js
index ccdf8ba42..f50fca335 100644
--- a/client/coral-framework/utils/user.js
+++ b/client/coral-framework/utils/user.js
@@ -1,9 +1,11 @@
+import get from 'lodash/get';
+
 /**
  * getReliability
  * retrieves reliability value as string
  */
-  
-export const getReliability = (reliabilityValue) => {
+
+export const getReliability = reliabilityValue => {
   if (reliabilityValue === null) {
     return 'neutral';
   } else if (reliabilityValue) {
@@ -12,3 +14,22 @@ export const getReliability = (reliabilityValue) => {
     return 'unreliable';
   }
 };
+
+/**
+ * isSuspended
+ * retrieves boolean based on the user suspension status
+ */
+
+export const isSuspended = user => {
+  const suspensionUntil = get(user, 'state.status.suspension.until');
+  return user && suspensionUntil && new Date(suspensionUntil) > new Date();
+};
+
+/**
+ * isBanned
+ * retrieves boolean based on the user ban status
+ */
+
+export const isBanned = user => {
+  return get(user, 'state.status.banned.status');
+};
diff --git a/client/coral-settings/components/Bio.css b/client/coral-settings/components/Bio.css
deleted file mode 100644
index 8c36b989d..000000000
--- a/client/coral-settings/components/Bio.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.bio textarea {
-  width: 100%;
-  box-sizing: border-box;
-  border-radius: 2px;
-  min-height: 100px;
-  margin: 10px 0;
-  border: solid 1px #d8d8d8;
-}
-
-.bio h1 {
-  font-size: 16px;
-  margin: 3px 0;
-}
-
-.bio p {
-  margin: 3px 0;
-}
-
-.actions {
-  text-align: right;
-}
diff --git a/client/coral-settings/components/Bio.js b/client/coral-settings/components/Bio.js
deleted file mode 100644
index cd1347781..000000000
--- a/client/coral-settings/components/Bio.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import styles from './Bio.css';
-import {Button} from '../../coral-ui';
-
-export default ({bio, handleSave, handleInput, handleCancel}) => (
-  <div className={styles.bio}>
-    <h1>Bio</h1>
-    <p>Tell the community about yourself</p>
-    <form>
-      <textarea value={bio} onChange={handleInput} />
-      <div className={styles.actions}>
-        <Button cStyle='cancel' type="button" onClick={handleCancel} raised>Cancel</Button>
-        <Button cStyle='success' type="submit" onClick={handleSave}>Save Changes</Button>
-      </div>
-    </form>
-  </div>
-);
-
diff --git a/client/coral-settings/components/NotLoggedIn.js b/client/coral-settings/components/NotLoggedIn.js
index 799579a05..4987d57be 100644
--- a/client/coral-settings/components/NotLoggedIn.js
+++ b/client/coral-settings/components/NotLoggedIn.js
@@ -4,13 +4,12 @@ import cn from 'classnames';
 
 import t from 'coral-framework/services/i18n';
 
-export default ({showSignInDialog}) => (
+export default ({ showSignInDialog }) => (
   <div className={cn(styles.message, 'talk-embed-stream-not-logged-in')}>
     <div>
-      <a onClick={showSignInDialog}>{t('settings.sign_in')}</a> {t('settings.to_access')}
-    </div>
-    <div>
-      {t('from_settings_page')}
+      <a onClick={showSignInDialog}>{t('settings.sign_in')}</a>{' '}
+      {t('settings.to_access')}
     </div>
+    <div>{t('from_settings_page')}</div>
   </div>
 );
diff --git a/client/coral-settings/containers/BioContainer.js b/client/coral-settings/containers/BioContainer.js
deleted file mode 100644
index b7c9611d4..000000000
--- a/client/coral-settings/containers/BioContainer.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, {Component} from 'react';
-import Bio from '../components/Bio';
-
-export default class BioContainer extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      bio: props.bio
-    };
-
-    this.handleSave = this.handleSave.bind(this);
-    this.handleInput = this.handleInput.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
-
-  handleInput(e) {
-    this.setState({
-      bio: e.target.value
-    });
-  }
-
-  handleSave (e) {
-    e.preventDefault();
-    const {userData, saveBio} = this.props;
-    const {bio} = this.state;
-    saveBio(userData.id, {bio});
-  }
-
-  handleCancel () {
-    this.setState({
-      bio: this.props.bio
-    });
-  }
-
-  render () {
-    return <Bio
-      bio={this.state.bio}
-      userData={this.props.userData}
-      handleSave={this.handleSave}
-      handleInput={this.handleInput}
-      handleCancel={this.handleCancel}
-    />;
-  }
-}
diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js
index 5b4f5f0ed..fb9d8de17 100644
--- a/client/coral-settings/containers/ProfileContainer.js
+++ b/client/coral-settings/containers/ProfileContainer.js
@@ -1,28 +1,30 @@
-import {connect} from 'react-redux';
-import {compose, gql} from 'react-apollo';
-import React, {Component} from 'react';
-import {bindActionCreators} from 'redux';
-import {withQuery} from 'coral-framework/hocs';
+import { connect } from 'react-redux';
+import { compose, gql } from 'react-apollo';
+import React, { Component } from 'react';
+import { bindActionCreators } from 'redux';
+import { withQuery } from 'coral-framework/hocs';
 import Slot from 'coral-framework/components/Slot';
 import cn from 'classnames';
-import {link} from 'coral-framework/services/pym';
+import { link } from 'coral-framework/services/pym';
 import NotLoggedIn from '../components/NotLoggedIn';
-import {Spinner} from 'coral-ui';
+import { Spinner } from 'coral-ui';
 import CommentHistory from 'talk-plugin-history/CommentHistory';
 
 // TODO: Auth logic needs refactoring.
-import {showSignInDialog, checkLogin} from 'coral-embed-stream/src/actions/auth';
+import {
+  showSignInDialog,
+  checkLogin,
+} from 'coral-embed-stream/src/actions/auth';
 
-import {appendNewNodes} from 'plugin-api/beta/client/utils';
+import { appendNewNodes } from 'plugin-api/beta/client/utils';
 import update from 'immutability-helper';
-import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import { getSlotFragmentSpreads } from 'coral-framework/utils';
 
 import t from 'coral-framework/services/i18n';
 
 class ProfileContainer extends Component {
   componentWillReceiveProps(nextProps) {
     if (!this.props.auth.loggedIn && nextProps.auth.loggedIn) {
-
       // Refetch after login.
       this.props.data.refetch();
     }
@@ -35,17 +37,17 @@ class ProfileContainer extends Component {
         limit: 5,
         cursor: this.props.root.me.comments.endCursor,
       },
-      updateQuery: (previous, {fetchMoreResult:{me: {comments}}}) => {
+      updateQuery: (previous, { fetchMoreResult: { me: { comments } } }) => {
         const updated = update(previous, {
           me: {
             comments: {
               nodes: {
-                $apply: (nodes) => appendNewNodes(nodes, comments.nodes),
+                $apply: nodes => appendNewNodes(nodes, comments.nodes),
               },
-              hasNextPage: {$set: comments.hasNextPage},
-              endCursor: {$set: comments.endCursor},
+              hasNextPage: { $set: comments.hasNextPage },
+              endCursor: { $set: comments.endCursor },
             },
-          }
+          },
         });
         return updated;
       },
@@ -53,8 +55,14 @@ class ProfileContainer extends Component {
   };
 
   render() {
-    const {auth, auth: {user: authUser}, showSignInDialog, root, data} = this.props;
-    const {me} = this.props.root;
+    const {
+      auth,
+      auth: { user: authUser },
+      showSignInDialog,
+      root,
+      data,
+    } = this.props;
+    const { me } = this.props.root;
     const loading = this.props.data.loading;
 
     if (!auth.loggedIn) {
@@ -65,28 +73,35 @@ class ProfileContainer extends Component {
       return <Spinner />;
     }
 
-    const localProfile = authUser.profiles.find(
-      (p) => p.provider === 'local'
-    );
+    const localProfile = authUser.profiles.find(p => p.provider === 'local');
     const emailAddress = localProfile && localProfile.id;
 
     return (
       <div className="talk-my-profile talk-embed-stream-profile-container">
         <h2>{me.username}</h2>
         {emailAddress ? <p>{emailAddress}</p> : null}
-        <Slot
-          fill="profileSections"
-          data={data}
-          queryData={{root}}
-        />
+        <Slot fill="profileSections" data={data} queryData={{ root }} />
         <hr />
         <h3>{t('framework.my_comments')}</h3>
-        <div className={cn('talk-my-profile-comment-history', {
-          'talk-my-profile-comment-history-no-comments': !me.comments.nodes.length
-        })}>
-          {me.comments.nodes.length
-            ? <CommentHistory data={data} root={root} comments={me.comments} link={link} loadMore={this.loadMore}/>
-            : <p className='talk-my-profile-comment-history-no-comments-cta'>{t('user_no_comment')}</p>}
+        <div
+          className={cn('talk-my-profile-comment-history', {
+            'talk-my-profile-comment-history-no-comments': !me.comments.nodes
+              .length,
+          })}
+        >
+          {me.comments.nodes.length ? (
+            <CommentHistory
+              data={data}
+              root={root}
+              comments={me.comments}
+              link={link}
+              loadMore={this.loadMore}
+            />
+          ) : (
+            <p className="talk-my-profile-comment-history-no-comments-cta">
+              {t('user_no_comment')}
+            </p>
+          )}
         </div>
       </div>
     );
@@ -128,7 +143,7 @@ const CommentFragment = gql`
 const LOAD_MORE_QUERY = gql`
   query TalkSettings_LoadMoreComments($limit: Int, $cursor: Cursor) {
     me {
-      comments(query: {limit: $limit, cursor: $cursor}) {
+      comments(query: { limit: $limit, cursor: $cursor }) {
         ...TalkSettings_CommentConnectionFragment
       }
     }
@@ -149,14 +164,15 @@ const withProfileQuery = withQuery(
     ${getSlotFragmentSpreads(slots, 'root')}
   }
   ${CommentFragment}
-`);
+`
+);
 
-const mapStateToProps = (state) => ({
-  auth: state.auth
+const mapStateToProps = state => ({
+  auth: state.auth,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({showSignInDialog, checkLogin}, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ showSignInDialog, checkLogin }, dispatch);
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
diff --git a/client/coral-sign-in/containers/LoginContainer.js b/client/coral-sign-in/containers/LoginContainer.js
index 8d19e5198..5ee0c54a1 100644
--- a/client/coral-sign-in/containers/LoginContainer.js
+++ b/client/coral-sign-in/containers/LoginContainer.js
@@ -1,6 +1,4 @@
 import React from 'react';
 import Slot from 'coral-framework/components/Slot';
 
-export const LoginContainer = () => (
-  <Slot fill="login"/>
-);
+export const LoginContainer = () => <Slot fill="login" />;
diff --git a/client/coral-ui/components/Alert.js b/client/coral-ui/components/Alert.js
index 02f0524ff..e89dcf7f0 100644
--- a/client/coral-ui/components/Alert.js
+++ b/client/coral-ui/components/Alert.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './Alert.css';
 
-const Alert = ({cStyle = 'error', children, className, ...props}) => (
+const Alert = ({ cStyle = 'error', children, className, ...props }) => (
   <div
     className={`${styles.alert} ${styles[`alert--${cStyle}`]} ${className}`}
     {...props}
diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css
index ce2cff350..f60e2c15e 100644
--- a/client/coral-ui/components/Button.css
+++ b/client/coral-ui/components/Button.css
@@ -150,6 +150,7 @@
      box-shadow: none;
      color: white;
      background-color: #616161;
+     border-color: transparent;
   }
 
   > .icon {
diff --git a/client/coral-ui/components/Button.js b/client/coral-ui/components/Button.js
index cbfb6ad61..c84479dc2 100644
--- a/client/coral-ui/components/Button.js
+++ b/client/coral-ui/components/Button.js
@@ -4,7 +4,15 @@ import Icon from './Icon';
 
 export default class Button extends React.Component {
   render() {
-    const {cStyle = 'local', children, className, raised = false, full = false, icon = '', ...props} = this.props;
+    const {
+      cStyle = 'local',
+      children,
+      className,
+      raised = false,
+      full = false,
+      icon = '',
+      ...props
+    } = this.props;
     return (
       <button
         className={`
diff --git a/client/coral-ui/components/Card.js b/client/coral-ui/components/Card.js
index aaf31d080..57acb2324 100644
--- a/client/coral-ui/components/Card.js
+++ b/client/coral-ui/components/Card.js
@@ -2,8 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './Card.css';
 
-const Card = ({children, className, shadow = 2, ...props}) => (
-  <div className={`${styles.base} ${className} ${styles[`shadow--${shadow}`]}`} {...props}>
+const Card = ({ children, className, shadow = 2, ...props }) => (
+  <div
+    className={`${styles.base} ${className} ${styles[`shadow--${shadow}`]}`}
+    {...props}
+  >
     {children}
   </div>
 );
diff --git a/client/coral-ui/components/Checkbox.js b/client/coral-ui/components/Checkbox.js
index 98804fe60..b2f738794 100644
--- a/client/coral-ui/components/Checkbox.js
+++ b/client/coral-ui/components/Checkbox.js
@@ -3,19 +3,19 @@ import styles from './Checkbox.css';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 
-const Checkbox = ({onChange, checked, className, ...rest}) => (
+const Checkbox = ({ onChange, checked, className, ...rest }) => (
   <label className={cn(styles.root, className)}>
     <input
       type="checkbox"
-      className={cn(styles.input, {[styles.inputChecked]: checked})}
+      className={cn(styles.input, { [styles.inputChecked]: checked })}
       onChange={onChange}
       checked={checked}
       {...rest}
     />
     <span
-      className={cn(styles.checkbox, {[styles.checkboxChecked]: checked})}
-      aria-hidden='true'
-    ></span>
+      className={cn(styles.checkbox, { [styles.checkboxChecked]: checked })}
+      aria-hidden="true"
+    />
   </label>
 );
 
diff --git a/client/coral-ui/components/CoralLogo.js b/client/coral-ui/components/CoralLogo.js
index ba640020e..6f3fe961b 100644
--- a/client/coral-ui/components/CoralLogo.js
+++ b/client/coral-ui/components/CoralLogo.js
@@ -2,31 +2,73 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './CoralLogo.css';
 
-const CoralLogo = ({className = ''}) => (
-  <svg className={`${styles.base} ${className}`} viewBox='0 0 381 391' version='1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink'>
-    <g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
-      <g id='Wordmark-Round' className={styles.mark} transform='translate(-1833.000000, -411.000000)' strokeWidth='22' strokeLinecap='round' strokeLinejoin='round'>
-        <g id='coralProjectLogo-2-Copy-2' transform='translate(1842.000000, 421.000000)'>
-          <g id='Layer_2' transform='translate(2.268750, 1.133903)'>
-            <rect id='Rectangle-1' fill='#F47E6B' x='0' y='0' width='358.4625' height='368.518519' rx='40'>
-            </rect>
-            <path d='M0.226875,105.679772 C13.7259375,122.688319 41.29125,131.986325 56.71875,116.792023 C67.0415625,106.586895 62.5040625,93.0934473 76.910625,63.3851852 C83.94375,48.7578348 90.523125,38.3259259 101.980313,37.5321937 C115.139063,36.6250712 131.814375,50.3452991 134.31,69.3948718 C137.826563,95.1344729 115.479375,105.339601 121.15125,123.822222 C127.390313,144.119088 157.110938,140.377208 166.52625,165.096296 C170.042813,174.394302 171.630938,190.382336 163.463438,198.319658 C149.170313,212.266667 120.584063,186.073504 80.7675,198.319658 C73.280625,200.587464 56.3784375,205.803419 51.500625,219.523647 C46.73625,233.130484 55.584375,251.046154 67.60875,260.797721 C93.245625,281.661538 119.79,254.674644 159.379688,271.909972 C181.840313,281.661538 203.053125,303.319088 208.725,330.305983 C211.674375,344.593162 209.6325,356.952707 207.704063,364.549858' id='Shape'>
-            </path>
+const CoralLogo = ({ className = '' }) => (
+  <svg
+    className={`${styles.base} ${className}`}
+    viewBox="0 0 381 391"
+    version="1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g
+        id="Wordmark-Round"
+        className={styles.mark}
+        transform="translate(-1833.000000, -411.000000)"
+        strokeWidth="22"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <g
+          id="coralProjectLogo-2-Copy-2"
+          transform="translate(1842.000000, 421.000000)"
+        >
+          <g id="Layer_2" transform="translate(2.268750, 1.133903)">
+            <rect
+              id="Rectangle-1"
+              fill="#F47E6B"
+              x="0"
+              y="0"
+              width="358.4625"
+              height="368.518519"
+              rx="40"
+            />
+            <path
+              d="M0.226875,105.679772 C13.7259375,122.688319 41.29125,131.986325 56.71875,116.792023 C67.0415625,106.586895 62.5040625,93.0934473 76.910625,63.3851852 C83.94375,48.7578348 90.523125,38.3259259 101.980313,37.5321937 C115.139063,36.6250712 131.814375,50.3452991 134.31,69.3948718 C137.826563,95.1344729 115.479375,105.339601 121.15125,123.822222 C127.390313,144.119088 157.110938,140.377208 166.52625,165.096296 C170.042813,174.394302 171.630938,190.382336 163.463438,198.319658 C149.170313,212.266667 120.584063,186.073504 80.7675,198.319658 C73.280625,200.587464 56.3784375,205.803419 51.500625,219.523647 C46.73625,233.130484 55.584375,251.046154 67.60875,260.797721 C93.245625,281.661538 119.79,254.674644 159.379688,271.909972 C181.840313,281.661538 203.053125,303.319088 208.725,330.305983 C211.674375,344.593162 209.6325,356.952707 207.704063,364.549858"
+              id="Shape"
+            />
           </g>
-          <g id='Layer_3' transform='translate(43.106250, 289.145299)'>
-            <path d='M90.4096875,72.5698006 C78.8390625,41.3874644 64.9996875,31.4091168 54.1096875,28.234188 C41.8584375,24.7190883 30.7415625,29.0279202 17.8096875,21.2039886 C8.394375,15.4210826 3.403125,6.57663818 0.680625,0'id='Shape'></path>
-          </g><g id='Layer_4' transform='translate(220.068750, 209.772080)'>
-            <path d='M81.7884375,152.963533 C74.9821875,122.007977 61.8234375,104.77265 50.593125,94.5675214 C31.8759375,77.6723647 14.746875,77.1054131 5.218125,57.2621083 C4.4240625,55.5612536 -5.7853125,33.4501425 5.218125,17.008547 C14.52,3.06153846 33.350625,1.47407407 41.518125,0.907122507 C64.3190625,-0.907122507 73.280625,9.52478632 100.959375,13.039886 C117.180938,15.0809117 130.793438,13.4934473 139.30125,12.0193732'id='Shape'></path>
+          <g id="Layer_3" transform="translate(43.106250, 289.145299)">
+            <path
+              d="M90.4096875,72.5698006 C78.8390625,41.3874644 64.9996875,31.4091168 54.1096875,28.234188 C41.8584375,24.7190883 30.7415625,29.0279202 17.8096875,21.2039886 C8.394375,15.4210826 3.403125,6.57663818 0.680625,0"
+              id="Shape"
+            />
           </g>
-          <g id='Layer_5' transform='translate(285.862500, 289.145299)'>
-            <path d='M74.415,2.04102564 C66.3609375,0.793732194 51.046875,-0.566951567 33.12375,5.1025641 C17.5828125,9.97834758 6.80625,18.0290598 0.9075,23.2450142'id='Shape'></path>
+          <g id="Layer_4" transform="translate(220.068750, 209.772080)">
+            <path
+              d="M81.7884375,152.963533 C74.9821875,122.007977 61.8234375,104.77265 50.593125,94.5675214 C31.8759375,77.6723647 14.746875,77.1054131 5.218125,57.2621083 C4.4240625,55.5612536 -5.7853125,33.4501425 5.218125,17.008547 C14.52,3.06153846 33.350625,1.47407407 41.518125,0.907122507 C64.3190625,-0.907122507 73.280625,9.52478632 100.959375,13.039886 C117.180938,15.0809117 130.793438,13.4934473 139.30125,12.0193732"
+              id="Shape"
+            />
           </g>
-          <g id='Layer_6' transform='translate(174.693750, 1.133903)'>
-            <path d='M184.109063,151.035897 C170.950313,174.507692 158.699063,180.290598 149.850938,181.311111 C133.85625,183.011966 129.091875,168.724786 104.475938,163.168661 C79.2928125,157.499145 72.2596875,169.745299 52.0678125,163.168661 C30.0609375,155.911681 18.7171875,134.821083 12.705,123.822222 C-1.588125,97.4022792 -0.3403125,71.6626781 0.5671875,51.2524217 C1.588125,29.4814815 6.125625,12.0193732 9.6421875,0.907122507'id='Shape'></path>
-            <path d='M183.541875,69.3948718 C170.496563,56.6951567 157.564688,45.8096866 149.28375,39.0062678 C143.385,34.1304843 134.990625,33.2233618 128.297813,36.8518519 C128.070938,36.9652422 127.844063,37.0786325 127.730625,37.1920228 C122.739375,40.1401709 119.449688,45.3561254 118.8825,51.1390313 C118.201875,59.0763533 117.0675,71.4358974 114.912188,82.8883191 C114.118125,87.0837607 107.085,103.865527 89.7290625,110.668946 C77.2509375,115.544729 62.0503125,110.668946 53.4290625,101.597721 C40.38375,87.7641026 44.8078125,66.9002849 47.416875,55.2210826 C53.5425,26.760114 73.3940625,9.07122507 82.6959375,1.81424501'id='Shape'></path>
+          <g id="Layer_5" transform="translate(285.862500, 289.145299)">
+            <path
+              d="M74.415,2.04102564 C66.3609375,0.793732194 51.046875,-0.566951567 33.12375,5.1025641 C17.5828125,9.97834758 6.80625,18.0290598 0.9075,23.2450142"
+              id="Shape"
+            />
           </g>
-          <g id='Layer_7' transform='translate(3.403125, 179.156695)'>
-            <path d='M0.1134375,0.226780627 C2.949375,6.34985755 8.394375,16.1014245 18.2634375,25.3994302 C27.67875,34.2438746 37.3209375,39.0062678 43.4465625,41.5008547'id='Shape'></path>
+          <g id="Layer_6" transform="translate(174.693750, 1.133903)">
+            <path
+              d="M184.109063,151.035897 C170.950313,174.507692 158.699063,180.290598 149.850938,181.311111 C133.85625,183.011966 129.091875,168.724786 104.475938,163.168661 C79.2928125,157.499145 72.2596875,169.745299 52.0678125,163.168661 C30.0609375,155.911681 18.7171875,134.821083 12.705,123.822222 C-1.588125,97.4022792 -0.3403125,71.6626781 0.5671875,51.2524217 C1.588125,29.4814815 6.125625,12.0193732 9.6421875,0.907122507"
+              id="Shape"
+            />
+            <path
+              d="M183.541875,69.3948718 C170.496563,56.6951567 157.564688,45.8096866 149.28375,39.0062678 C143.385,34.1304843 134.990625,33.2233618 128.297813,36.8518519 C128.070938,36.9652422 127.844063,37.0786325 127.730625,37.1920228 C122.739375,40.1401709 119.449688,45.3561254 118.8825,51.1390313 C118.201875,59.0763533 117.0675,71.4358974 114.912188,82.8883191 C114.118125,87.0837607 107.085,103.865527 89.7290625,110.668946 C77.2509375,115.544729 62.0503125,110.668946 53.4290625,101.597721 C40.38375,87.7641026 44.8078125,66.9002849 47.416875,55.2210826 C53.5425,26.760114 73.3940625,9.07122507 82.6959375,1.81424501"
+              id="Shape"
+            />
+          </g>
+          <g id="Layer_7" transform="translate(3.403125, 179.156695)">
+            <path
+              d="M0.1134375,0.226780627 C2.949375,6.34985755 8.394375,16.1014245 18.2634375,25.3994302 C27.67875,34.2438746 37.3209375,39.0062678 43.4465625,41.5008547"
+              id="Shape"
+            />
           </g>
         </g>
       </g>
@@ -37,8 +79,7 @@ const CoralLogo = ({className = ''}) => (
 CoralLogo.propTypes = {
   height: PropTypes.string,
   width: PropTypes.string,
-  stroke: PropTypes.string
+  stroke: PropTypes.string,
 };
 
 export default CoralLogo;
-
diff --git a/client/coral-ui/components/Dialog.js b/client/coral-ui/components/Dialog.js
index bba386026..158e96a8f 100644
--- a/client/coral-ui/components/Dialog.js
+++ b/client/coral-ui/components/Dialog.js
@@ -1,9 +1,9 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import dialogPolyfill from 'dialog-polyfill';
 import 'dialog-polyfill/dialog-polyfill.css';
 import styles from './Dialog.css';
-import {Portal} from 'react-portal';
+import { Portal } from 'react-portal';
 
 export default class Dialog extends Component {
   static propTypes = {
@@ -16,11 +16,11 @@ export default class Dialog extends Component {
   };
 
   static defaultProps = {
-    onCancel: (e) => e.preventDefault(),
-    onClose: (e) => e.preventDefault(),
+    onCancel: e => e.preventDefault(),
+    onClose: e => e.preventDefault(),
   };
 
-  componentDidMount(){
+  componentDidMount() {
     const dialog = this.dialog;
     dialogPolyfill.registerDialog(dialog);
 
@@ -56,7 +56,9 @@ export default class Dialog extends Component {
     return (
       <Portal>
         <dialog
-          ref={(el) => { this.dialog = el; }}
+          ref={el => {
+            this.dialog = el;
+          }}
           className={`mdl-dialog ${className} ${styles.dialog}`}
           {...rest}
         >
diff --git a/client/coral-ui/components/Drawer.css b/client/coral-ui/components/Drawer.css
index 88c30425f..40458b94f 100644
--- a/client/coral-ui/components/Drawer.css
+++ b/client/coral-ui/components/Drawer.css
@@ -23,6 +23,7 @@
 }
 
 .closeButton {
+  composes: buttonReset from 'coral-framework/styles/reset.css';
   position: absolute;
   width: 40px;
   height: 40px;
@@ -34,9 +35,14 @@
   top: 60px;
   box-shadow: -1px 3px 4px 0px rgba(0,0,0,0.15);
   text-align: center;
-  padding-top: 10px;
   cursor: pointer;
 
+  .icon {
+    color: #595959;
+    font-size: 25px;
+    display: block;
+  }
+
   &:hover {
     color: #ccc;
   }
diff --git a/client/coral-ui/components/Drawer.js b/client/coral-ui/components/Drawer.js
index d50237bfb..678548d62 100644
--- a/client/coral-ui/components/Drawer.js
+++ b/client/coral-ui/components/Drawer.js
@@ -1,21 +1,31 @@
 import React from 'react';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
 import styles from './Drawer.css';
+import { Icon } from 'coral-ui';
 
-const Drawer = ({children, onClose}) => {
+const Drawer = ({ children, onClose, className = '' }) => {
   return (
-    <div className={styles.drawer}>
-      <div className={styles.closeButton} onClick={onClose}>×</div>
-      <div className={styles.content}>
-        {children}
-      </div>
+    <div className={cn(styles.drawer, className)}>
+      <button
+        className={cn(
+          styles.closeButton,
+          [className, 'close-button'].join('-')
+        )}
+        onClick={onClose}
+      >
+        <Icon name="close" className={styles.icon} />
+      </button>
+      <div className={styles.content}>{children}</div>
     </div>
   );
 };
 
 Drawer.propTypes = {
   active: PropTypes.bool,
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  className: PropTypes.string,
 };
 
 export default Drawer;
diff --git a/client/coral-ui/components/Dropdown.css b/client/coral-ui/components/Dropdown.css
index 1d548bc18..794955220 100644
--- a/client/coral-ui/components/Dropdown.css
+++ b/client/coral-ui/components/Dropdown.css
@@ -1,19 +1,19 @@
 .dropdown {
   position: relative;
   width: 150px;
-  height: 36px;
+  height: 34px;
   background: #2c2c2c;
   box-sizing: border-box;
   color: white;
-  border-radius: 2px;
+  border-radius: 3px;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
 
-  line-height: 1.4;
-  font-size: 13px;
+  font-size: 0.98em;
+  border-radius: 3px;
 }
 
 .toggle {
-  padding: 10px 15px;
+  padding: 8px 15px;
   cursor: pointer;
   outline: none;
 
@@ -58,5 +58,5 @@
   right: 15px;
   font-size: 1.2rem;
   vertical-align: middle;
-  top: 13px;
+  top: 11px;
 }
diff --git a/client/coral-ui/components/Dropdown.js b/client/coral-ui/components/Dropdown.js
index dddffbfa2..fe852d265 100644
--- a/client/coral-ui/components/Dropdown.js
+++ b/client/coral-ui/components/Dropdown.js
@@ -6,109 +6,110 @@ import cn from 'classnames';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 
 class Dropdown extends React.Component {
-
   toggleRef = null;
   optionsRef = [];
 
   state = {
-    isOpen: false
+    isOpen: false,
   };
 
   componentDidUpdate(_, prevState) {
     if (!this.state.isOpen && prevState.isOpen) {
-
       // Refocus on the toggle element when menu closes.
       this.toggleRef.focus();
     }
   }
 
   goUp = () => {
-    const index = this.optionsRef.findIndex((ref) => ref.hasFocus());
+    const index = this.optionsRef.findIndex(ref => ref.hasFocus());
     if (index > 0) {
       this.optionsRef[index - 1].focus();
     }
-  }
+  };
 
   goDown = () => {
-    const index = this.optionsRef.findIndex((ref) => ref.hasFocus());
+    const index = this.optionsRef.findIndex(ref => ref.hasFocus());
     if (index < this.optionsRef.length - 1) {
       this.optionsRef[index + 1].focus();
     }
-  }
+  };
 
   handleOptionKeyDown = (value, e) => {
     const code = e.which;
 
     switch (code) {
-    case 13: // 13 = Return
-    case 32: // 32 = Space
-      e.preventDefault();
-      this.setValue(value);
-      break;
-    case 38: // 38 = Arrow Up
-      e.preventDefault();
-      this.goUp();
-      break;
-    case 40: // 40 = Arrow Down
-      e.preventDefault();
-      this.goDown();
-      break;
+      case 13: // 13 = Return
+      case 32: // 32 = Space
+        e.preventDefault();
+        this.setValue(value);
+        break;
+      case 38: // 38 = Arrow Up
+        e.preventDefault();
+        this.goUp();
+        break;
+      case 40: // 40 = Arrow Down
+        e.preventDefault();
+        this.goDown();
+        break;
     }
-  }
+  };
 
-  handleOptionClick = (value) => {
+  handleOptionClick = value => {
     this.setValue(value);
-  }
+  };
 
-  setValue = (value) => {
+  setValue = value => {
     if (this.props.onChange) {
       this.props.onChange(value);
     }
 
     this.setState({
-      isOpen: false
+      isOpen: false,
     });
-  }
+  };
 
   toggle = () => {
     this.setState({
-      isOpen: !this.state.isOpen
+      isOpen: !this.state.isOpen,
     });
-  }
+  };
 
   handleClick = () => {
     this.toggle();
-  }
+  };
 
-  handleKeyDown = (e) => {
+  handleKeyDown = e => {
     const code = e.which;
 
     // 13 = Return, 32 = Space
-    if ((code === 13) || (code === 32)) {
+    if (code === 13 || code === 32) {
       e.preventDefault();
       this.toggle();
     }
-  }
+  };
 
   hideMenu = () => {
     this.setState({
-      isOpen: false
+      isOpen: false,
     });
-  }
+  };
 
-  handleToggleRef = (ref) => this.toggleRef = ref;
+  handleToggleRef = ref => (this.toggleRef = ref);
 
   handleOptionsRef = (ref, index) => {
     this.optionsRef[index] = ref;
 
     // Focus on current value when menu opens.
     if (ref) {
-      if (ref.props.value === this.props.value || index === 0 && !this.props.value) {
+      if (
+        ref.props.value === this.props.value ||
+        (index === 0 && !this.props.value)
+      ) {
         ref.focus();
         return;
       }
     }
-  }
+  };
 
   // Trap keyboard focus inside the dropdown until a value has been chosen.
   trapFocusBegin = () => this.optionsRef[this.optionsRef.length - 1].focus();
@@ -116,7 +117,9 @@ class Dropdown extends React.Component {
 
   renderLabel() {
     const options = React.Children.toArray(this.props.children);
-    const option = options.find((option) => option.props.value === this.props.value);
+    const option = options.find(
+      option => option.props.value === this.props.value
+    );
 
     if (option) {
       return option.props.label ? option.props.label : option.props.value;
@@ -128,12 +131,20 @@ class Dropdown extends React.Component {
   }
 
   render() {
-    const {containerClassName, toggleClassName, toggleOpenClassName} = this.props;
+    const {
+      containerClassName,
+      toggleClassName,
+      toggleOpenClassName,
+    } = this.props;
     return (
       <ClickOutside onClickOutside={this.hideMenu}>
-        <div className={cn(styles.dropdown, containerClassName, 'dd dd-container')}>
+        <div
+          className={cn(styles.dropdown, containerClassName, 'dd dd-container')}
+        >
           <div
-            className={cn(styles.toggle, toggleClassName, {[cn(this.state.isOpen, toggleOpenClassName)]: this.state.isOpen})}
+            className={cn(styles.toggle, toggleClassName, {
+              [cn(this.state.isOpen, toggleOpenClassName)]: this.state.isOpen,
+            })}
             onClick={this.handleClick}
             onKeyDown={this.handleKeyDown}
             role="button"
@@ -142,27 +153,52 @@ class Dropdown extends React.Component {
             tabIndex="0"
             ref={this.handleToggleRef}
           >
-            {this.props.icon && <Icon name={this.props.icon} className={styles.icon} aria-hidden="true" />}
+            {this.props.icon && (
+              <Icon
+                name={this.props.icon}
+                className={styles.icon}
+                aria-hidden="true"
+              />
+            )}
             <span className={styles.label}>{this.renderLabel()}</span>
-            {this.state.isOpen ? <Icon name="keyboard_arrow_up" className={styles.arrow} aria-hidden="true"/> : <Icon name="keyboard_arrow_down" className={styles.arrow} aria-hidden="true"/>}
+            {this.state.isOpen ? (
+              <Icon
+                name="keyboard_arrow_up"
+                className={styles.arrow}
+                aria-hidden="true"
+              />
+            ) : (
+              <Icon
+                name="keyboard_arrow_down"
+                className={styles.arrow}
+                aria-hidden="true"
+              />
+            )}
           </div>
-          {this.state.isOpen &&
+          {this.state.isOpen && (
             <div>
               <div tabIndex="0" onFocus={this.trapFocusBegin} />
-              <ul className={cn(styles.list, {[styles.listActive] : this.state.isOpen}, 'dd-list-active')}>
-                {React.Children.toArray(this.props.children)
-                  .map((child, i) =>
-                    React.cloneElement(child, {
-                      key: child.props.value,
-                      ref: (ref) => this.handleOptionsRef(ref, i),
-                      index: i,
-                      onClick: () => this.handleOptionClick(child.props.value),
-                      onKeyDown: (e) => this.handleOptionKeyDown(child.props.value, e)
-                    }))}
+              <ul
+                className={cn(
+                  styles.list,
+                  { [styles.listActive]: this.state.isOpen },
+                  'dd-list-active'
+                )}
+              >
+                {React.Children.toArray(this.props.children).map((child, i) =>
+                  React.cloneElement(child, {
+                    key: child.props.value,
+                    ref: ref => this.handleOptionsRef(ref, i),
+                    index: i,
+                    onClick: () => this.handleOptionClick(child.props.value),
+                    onKeyDown: e =>
+                      this.handleOptionKeyDown(child.props.value, e),
+                  })
+                )}
               </ul>
               <div tabIndex="0" onFocus={this.trapFocusEnd} />
             </div>
-          }
+          )}
         </div>
       </ClickOutside>
     );
@@ -180,7 +216,7 @@ Dropdown.propTypes = {
   value: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.string,
-    PropTypes.bool
+    PropTypes.bool,
   ]),
 };
 
diff --git a/client/coral-ui/components/FabButton.js b/client/coral-ui/components/FabButton.js
index 64ba4e82a..1bc47764a 100644
--- a/client/coral-ui/components/FabButton.js
+++ b/client/coral-ui/components/FabButton.js
@@ -1,9 +1,14 @@
 import React from 'react';
 import styles from './FabButton.css';
-import {FABButton, Icon} from 'react-mdl';
+import { FABButton, Icon } from 'react-mdl';
 
-const FabButton = ({cStyle = 'local', icon, className, ...props}) => (
-  <FABButton className={`${styles.base} ${styles[`type--${cStyle}`]} ${className ? className : ''}`}  {...props}>
+const FabButton = ({ cStyle = 'local', icon, className, ...props }) => (
+  <FABButton
+    className={`${styles.base} ${styles[`type--${cStyle}`]} ${
+      className ? className : ''
+    }`}
+    {...props}
+  >
     <Icon name={icon} />
   </FABButton>
 );
diff --git a/client/coral-ui/components/FlagLabel.js b/client/coral-ui/components/FlagLabel.js
index 8a7864c8b..31ad0c06b 100644
--- a/client/coral-ui/components/FlagLabel.js
+++ b/client/coral-ui/components/FlagLabel.js
@@ -4,7 +4,7 @@ import styles from './FlagLabel.css';
 import Label from './Label';
 import cn from 'classnames';
 
-const FlagLabel = ({iconName, children, className}) => {
+const FlagLabel = ({ iconName, children, className }) => {
   return (
     <Label iconName={iconName} className={cn(className, styles.flag)}>
       {children}
diff --git a/client/coral-ui/components/Icon.js b/client/coral-ui/components/Icon.js
index 344bd7e04..5aa03be5d 100644
--- a/client/coral-ui/components/Icon.js
+++ b/client/coral-ui/components/Icon.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Icon as IconMDL}  from 'react-mdl';
+import { Icon as IconMDL } from 'react-mdl';
 import cn from 'classnames';
 import styles from './Icon.css';
 
-const Icon = ({className = '', ...rest}) => (
+const Icon = ({ className = '', ...rest }) => (
   <IconMDL className={cn(styles.root, className)} {...rest} />
 );
 
diff --git a/client/coral-ui/components/Item.js b/client/coral-ui/components/Item.js
index ecb81ab88..c41bd943c 100644
--- a/client/coral-ui/components/Item.js
+++ b/client/coral-ui/components/Item.js
@@ -2,7 +2,14 @@ import React from 'react';
 import styles from './Item.css';
 import Icon from './Icon';
 
-export default ({children, itemId, active, onItemClick, className = '', icon}) => (
+export default ({
+  children,
+  itemId,
+  active,
+  onItemClick,
+  className = '',
+  icon,
+}) => (
   <li
     className={`${styles.base} ${className} ${active ? styles.active : ''}`}
     onClick={() => onItemClick(itemId)}
diff --git a/client/coral-ui/components/Label.js b/client/coral-ui/components/Label.js
index a73b6183d..7a7870168 100644
--- a/client/coral-ui/components/Label.js
+++ b/client/coral-ui/components/Label.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './Label.css';
-import {Icon} from 'coral-ui';
+import { Icon } from 'coral-ui';
 import cn from 'classnames';
 
-const Label = ({iconName, children, className}) => {
+const Label = ({ iconName, children, className }) => {
   return (
     <span className={cn(className, styles.root)}>
       <Icon name={iconName} className={styles.icon} /> {children}
diff --git a/client/coral-ui/components/List.js b/client/coral-ui/components/List.js
index 1d941bce2..4529d5e26 100644
--- a/client/coral-ui/components/List.js
+++ b/client/coral-ui/components/List.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import styles from './List.css';
 
 export default class List extends Component {
@@ -14,11 +14,11 @@ export default class List extends Component {
   }
 
   render() {
-    const {children, activeItem, className = ''} = this.props;
+    const { children, activeItem, className = '' } = this.props;
     return (
       <ul className={`${styles.base} ${className}`}>
         {React.Children.toArray(children)
-          .filter((child) => !child.props.restricted)
+          .filter(child => !child.props.restricted)
           .map((child, i) =>
             React.cloneElement(child, {
               i,
diff --git a/client/coral-ui/components/Option.js b/client/coral-ui/components/Option.js
index 8fd92a904..704bca179 100644
--- a/client/coral-ui/components/Option.js
+++ b/client/coral-ui/components/Option.js
@@ -4,21 +4,30 @@ import styles from './Option.css';
 import cn from 'classnames';
 
 class Option extends React.Component {
-
   ref = null;
 
-  handleRef = (ref) => {
+  handleRef = ref => {
     this.ref = ref;
   };
 
-  focus = () => {this.ref.focus();}
+  focus = () => {
+    this.ref.focus();
+  };
   hasFocus = () => document.activeElement === this.ref;
 
   render() {
-    const {className, label = '', onClick, onKeyDown} = this.props;
+    const { className, label = '', onClick, onKeyDown } = this.props;
     const id = this.props.id ? this.props.id : this.props.value;
     return (
-      <li className={cn(styles.option, className, 'dd-option')} onClick={onClick} onKeyDown={onKeyDown} role="option" tabIndex="0" ref={this.handleRef} id={id}>
+      <li
+        className={cn(styles.option, className, 'dd-option')}
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+        role="option"
+        tabIndex="0"
+        ref={this.handleRef}
+        id={id}
+      >
         {label}
       </li>
     );
@@ -34,7 +43,7 @@ Option.propTypes = {
   value: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.string,
-    PropTypes.bool
+    PropTypes.bool,
   ]),
 };
 
diff --git a/client/coral-ui/components/Paginate.js b/client/coral-ui/components/Paginate.js
index df19450c3..a4133b91f 100644
--- a/client/coral-ui/components/Paginate.js
+++ b/client/coral-ui/components/Paginate.js
@@ -4,7 +4,7 @@ import ReactPaginate from 'react-paginate';
 import styles from './Paginate.css';
 import Icon from './Icon';
 
-const Paginate = ({pageCount, page, onPageChange}) => (
+const Paginate = ({ pageCount, page, onPageChange }) => (
   <ReactPaginate
     initialPage={0}
     forcePage={page}
@@ -17,10 +17,10 @@ const Paginate = ({pageCount, page, onPageChange}) => (
     pageClassName={styles.page}
     pageLinkClassName={styles.pageLink}
     activeClassName={styles.active}
-    previousLabel={<Icon name="chevron_left"/>}
+    previousLabel={<Icon name="chevron_left" />}
     previousClassName={styles.previous}
     previousLinkClassName={styles.previousLink}
-    nextLabel={<Icon name="chevron_right"/>}
+    nextLabel={<Icon name="chevron_right" />}
     nextClassName={styles.next}
     nextLinkClassName={styles.nextLink}
   />
diff --git a/client/coral-ui/components/PopupMenu.js b/client/coral-ui/components/PopupMenu.js
index 6d4381ffe..4ddb422f1 100644
--- a/client/coral-ui/components/PopupMenu.js
+++ b/client/coral-ui/components/PopupMenu.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './PopupMenu.css';
 
-export default ({children}) => (
+export default ({ children }) => (
   <div className={styles.popupMenu}>{children}</div>
 );
diff --git a/client/coral-ui/components/SnackBar.js b/client/coral-ui/components/SnackBar.js
index 3d2e2e626..eae54c5be 100644
--- a/client/coral-ui/components/SnackBar.js
+++ b/client/coral-ui/components/SnackBar.js
@@ -1,16 +1,18 @@
 import React from 'react';
 import styles from './SnackBar.css';
 
-const SnackBar = ({children, className, position, ...attrs}) => {
+const SnackBar = ({ children, className, position, ...attrs }) => {
   return (
-    <div className={`${styles.SnackBar} ${className}`}
-      style={ position ? {top: `${position}px`} : fixedStyle}
-      {...attrs} >
+    <div
+      className={`${styles.SnackBar} ${className}`}
+      style={position ? { top: `${position}px` } : fixedStyle}
+      {...attrs}
+    >
       {children}
     </div>
   );
 };
 
-const fixedStyle = {bottom: '200px', top: 'auto'};
+const fixedStyle = { bottom: '200px', top: 'auto' };
 
 export default SnackBar;
diff --git a/client/coral-ui/components/Spinner.js b/client/coral-ui/components/Spinner.js
index 058f1af7c..69d805354 100644
--- a/client/coral-ui/components/Spinner.js
+++ b/client/coral-ui/components/Spinner.js
@@ -3,8 +3,22 @@ import styles from './Spinner.css';
 
 const Spinner = () => (
   <div className={styles.container}>
-    <svg className={styles.spinner} width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
-      <circle className={styles.path} fill="none" strokeWidth="6" strokeLinecap="round" cx="33" cy="33" r="30"></circle>
+    <svg
+      className={styles.spinner}
+      width="40px"
+      height="40px"
+      viewBox="0 0 66 66"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        className={styles.path}
+        fill="none"
+        strokeWidth="6"
+        strokeLinecap="round"
+        cx="33"
+        cy="33"
+        r="30"
+      />
     </svg>
   </div>
 );
diff --git a/client/coral-ui/components/Success.js b/client/coral-ui/components/Success.js
index 4db697794..2dcd1c5d7 100644
--- a/client/coral-ui/components/Success.js
+++ b/client/coral-ui/components/Success.js
@@ -3,9 +3,17 @@ import styles from './Success.css';
 
 const Success = () => (
   <div className={styles.container}>
-    <svg className={styles.checkmark} viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
-      <circle className={styles.circle} cx="26" cy="26" r="25" fill="none"></circle>
-      <path className={styles.check} fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
+    <svg
+      className={styles.checkmark}
+      viewBox="0 0 52 52"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle className={styles.circle} cx="26" cy="26" r="25" fill="none" />
+      <path
+        className={styles.check}
+        fill="none"
+        d="M14.1 27.2l7.1 7.2 16.7-16.8"
+      />
     </svg>
   </div>
 );
diff --git a/client/coral-ui/components/Tab.js b/client/coral-ui/components/Tab.js
index 4fd85b303..79b3c1e20 100644
--- a/client/coral-ui/components/Tab.js
+++ b/client/coral-ui/components/Tab.js
@@ -12,32 +12,29 @@ class Tab extends React.Component {
     if (this.props.onTabClick) {
       this.props.onTabClick(this.props.tabId);
     }
-  }
+  };
 
-  getRootClassName({active, className, sub, classNames = {}} = this.props) {
+  getRootClassName({ active, className, sub, classNames = {} } = this.props) {
     return cn(
       'talk-tab',
-      className,
       {
         [classNames.root || styles.root]: !sub,
         [classNames.rootSub || styles.rootSub]: sub,
         [classNames.rootActive || styles.rootActive]: active && !sub,
         [classNames.rootSubActive || styles.rootSubActive]: active && sub,
         'talk-tab-active': active,
-      }
+      },
+      className
     );
   }
 
-  getButtonClassName({sub, active, classNames = {}} = this.props) {
-    return cn(
-      'talk-tab-button',
-      {
-        [classNames.button || styles.button]: !sub,
-        [classNames.buttonSub || styles.buttonSub]: sub,
-        [classNames.buttonActive || styles.buttonActive]: active && !sub,
-        [classNames.buttonSubActive || styles.buttonSubActive]: active && sub,
-      }
-    );
+  getButtonClassName({ sub, active, classNames = {} } = this.props) {
+    return cn('talk-tab-button', {
+      [classNames.button || styles.button]: !sub,
+      [classNames.buttonSub || styles.buttonSub]: sub,
+      [classNames.buttonActive || styles.buttonActive]: active && !sub,
+      [classNames.buttonSubActive || styles.buttonSubActive]: active && sub,
+    });
   }
 
   render() {
@@ -49,15 +46,11 @@ class Tab extends React.Component {
       tabId: _d,
       sub: _e,
       'aria-controls': ariaControls,
-      ...rest,
+      ...rest
     } = this.props;
 
     return (
-      <li
-        {...rest}
-        role="presentation"
-        className={this.getRootClassName()}
-      >
+      <li {...rest} role="presentation" className={this.getRootClassName()}>
         <button
           aria-controls={ariaControls}
           role="tab"
@@ -73,7 +66,6 @@ class Tab extends React.Component {
 }
 
 Tab.propTypes = {
-
   // className to be added to the root element.
   className: PropTypes.string,
 
diff --git a/client/coral-ui/components/TabBar.js b/client/coral-ui/components/TabBar.js
index 1a51c60f2..0ab8911e3 100644
--- a/client/coral-ui/components/TabBar.js
+++ b/client/coral-ui/components/TabBar.js
@@ -9,15 +9,14 @@ import PropTypes from 'prop-types';
  * a tab bar.
  */
 class TabBar extends React.Component {
-
-  getRootClassName({className, classNames = {}, sub} = this.props) {
+  getRootClassName({ className, classNames = {}, sub } = this.props) {
     return cn(
       'talk-tab-bar',
-      className,
       {
         [classNames.root || styles.root]: !sub,
         [classNames.rootSub || styles.rootSub]: sub,
-      }
+      },
+      className
     );
   }
 
@@ -30,33 +29,27 @@ class TabBar extends React.Component {
       onTabClick: _b,
       'aria-controls': ariaControls,
       sub,
-      ...rest,
+      ...rest
     } = this.props;
 
     return (
-      <ul
-        {...rest}
-        role="tablist"
-        className={this.getRootClassName()}
-      >
-        {React.Children.toArray(children)
-          .map((child, i) =>
-            React.cloneElement(child, {
-              tabId: (child.props.tabId !== undefined) ? child.props.tabId : i,
-              active: child.props.tabId === activeTab,
-              onTabClick: this.props.onTabClick,
-              classNames: tabClassNames,
-              'aria-controls': ariaControls,
-              sub,
-            })
-          )}
+      <ul {...rest} role="tablist" className={this.getRootClassName()}>
+        {React.Children.toArray(children).map((child, i) =>
+          React.cloneElement(child, {
+            tabId: child.props.tabId !== undefined ? child.props.tabId : i,
+            active: child.props.tabId === activeTab,
+            onTabClick: this.props.onTabClick,
+            classNames: tabClassNames,
+            'aria-controls': ariaControls,
+            sub,
+          })
+        )}
       </ul>
     );
   }
 }
 
 TabBar.propTypes = {
-
   // className to be added to the root element.
   className: PropTypes.string,
 
diff --git a/client/coral-ui/components/TabContent.js b/client/coral-ui/components/TabContent.js
index 99676f7cc..4e7f41b25 100644
--- a/client/coral-ui/components/TabContent.js
+++ b/client/coral-ui/components/TabContent.js
@@ -11,25 +11,20 @@ function getRootClassName(className) {
  * The `TabContent` component accepts `TabPane` components to render
  * the content of a `Tab`.
  */
-const TabContent = ({children, className, activeTab, sub, ...rest}) => (
-  <div
-    {...rest}
-    className={getRootClassName(className)}
-  >
-    {
-      React.Children.toArray(children)
-        .filter((child) => child.props.tabId === activeTab)
-        .map((child, i) =>
-          React.cloneElement(child, {
-            tabId: (child.props.tabId !== undefined) ? child.props.tabId : i,
-            sub,
-          }))
-    }
+const TabContent = ({ children, className, activeTab, sub, ...rest }) => (
+  <div {...rest} className={getRootClassName(className)}>
+    {React.Children.toArray(children)
+      .filter(child => child.props.tabId === activeTab)
+      .map((child, i) =>
+        React.cloneElement(child, {
+          tabId: child.props.tabId !== undefined ? child.props.tabId : i,
+          sub,
+        })
+      )}
   </div>
 );
 
 TabContent.propTypes = {
-
   // className to be added to the root element.
   className: PropTypes.string,
 
diff --git a/client/coral-ui/components/TabCount.js b/client/coral-ui/components/TabCount.js
index 01a3840a9..6bb01aa3f 100644
--- a/client/coral-ui/components/TabCount.js
+++ b/client/coral-ui/components/TabCount.js
@@ -11,29 +11,26 @@ function getNumber(no) {
   return result;
 }
 
-function getRootClassName({className, active, sub}) {
-  return cn(
-    'talk-tab-count',
-    className,
-    {
-      [styles.root]: !sub,
-      [styles.rootSub]: sub,
-      [styles.rootActive]: active && !sub,
-      [styles.rootSubActive]: active && sub,
-      'talk-tab-active': active,
-    }
-  );
+function getRootClassName({ className, active, sub }) {
+  return cn('talk-tab-count', className, {
+    [styles.root]: !sub,
+    [styles.rootSub]: sub,
+    [styles.rootActive]: active && !sub,
+    [styles.rootSubActive]: active && sub,
+    'talk-tab-active': active,
+  });
 }
 
 /**
  * The `TabCount` renders a count number next to a tab name.
  */
-const TabCount = ({children, active, sub, className}) => (
-  <span className={getRootClassName({className, active, sub})}>{getNumber(children)}</span>
+const TabCount = ({ children, active, sub, className }) => (
+  <span className={getRootClassName({ className, active, sub })}>
+    {getNumber(children)}
+  </span>
 );
 
 TabCount.propTypes = {
-
   // className to be added to the root element.
   className: PropTypes.string,
 
diff --git a/client/coral-ui/components/TabPane.js b/client/coral-ui/components/TabPane.js
index 16750b335..3867360e0 100644
--- a/client/coral-ui/components/TabPane.js
+++ b/client/coral-ui/components/TabPane.js
@@ -10,17 +10,13 @@ function getRootClassName(className) {
  * The `TabPane` component is used inside the `TabContent` component to render
  * the content of a `Tab`.
  */
-const TabPane = ({children, className, tabId: _a, sub: _b, ...rest}) => (
-  <div
-    {...rest}
-    className={getRootClassName(className)}
-  >
+const TabPane = ({ children, className, tabId: _a, sub: _b, ...rest }) => (
+  <div {...rest} className={getRootClassName(className)}>
     {children}
   </div>
 );
 
 TabPane.propTypes = {
-
   // className to be added to the root element.
   className: PropTypes.string,
 
diff --git a/client/coral-ui/components/TextArea.js b/client/coral-ui/components/TextArea.js
index 547c0fc2e..52311ce64 100644
--- a/client/coral-ui/components/TextArea.js
+++ b/client/coral-ui/components/TextArea.js
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './TextArea.css';
 
-const TextArea = ({className, value = '', ...props}) => (
+const TextArea = ({ className, value = '', ...props }) => (
   <div className={`${styles.textArea} ${className ? className : ''}`}>
-    <textarea value={value} {...props}/>
+    <textarea value={value} {...props} />
   </div>
 );
 
diff --git a/client/coral-ui/components/TextField.js b/client/coral-ui/components/TextField.js
index 80c8173e7..6cbb7a06b 100644
--- a/client/coral-ui/components/TextField.js
+++ b/client/coral-ui/components/TextField.js
@@ -2,17 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './TextField.css';
 
-const TextField = ({className, showErrors = false, errorMsg, label, ...props}) => (
+const TextField = ({
+  className,
+  showErrors = false,
+  errorMsg,
+  label,
+  ...props
+}) => (
   <div className={`${styles.textField} ${className ? className : ''}`}>
-    <label htmlFor={props.id}>
-      {label}
-    </label>
+    <label htmlFor={props.id}>{label}</label>
     <input
       className={showErrors && errorMsg ? styles.error : ''}
       name={props.id}
       {...props}
     />
-    {showErrors && errorMsg && <span className={styles.errorMsg}><span className={styles.attention}>!</span>{errorMsg}</span>}
+    {showErrors &&
+      errorMsg && (
+        <span className={styles.errorMsg}>
+          <span className={styles.attention}>!</span>
+          {errorMsg}
+        </span>
+      )}
   </div>
 );
 
@@ -21,7 +31,7 @@ TextField.propTypes = {
   value: PropTypes.string,
   onChange: PropTypes.func,
   errorMsg: PropTypes.string,
-  type: PropTypes.string
+  type: PropTypes.string,
 };
 
 export default TextField;
diff --git a/client/coral-ui/components/Tooltip.js b/client/coral-ui/components/Tooltip.js
index 833d76552..a8e2b1a11 100644
--- a/client/coral-ui/components/Tooltip.js
+++ b/client/coral-ui/components/Tooltip.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './Tooltip.css';
 
-export default ({children}) => (
+export default ({ children }) => (
   <span className={styles.tooltip}>{children}</span>
 );
diff --git a/client/coral-ui/components/Wizard.js b/client/coral-ui/components/Wizard.js
index 97b056674..13ad4b121 100644
--- a/client/coral-ui/components/Wizard.js
+++ b/client/coral-ui/components/Wizard.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Wizard = (props) => {
-  const {children, currentStep, ...rest} = props;
+const Wizard = props => {
+  const { children, currentStep, ...rest } = props;
   return (
     <section>
       {React.Children.toArray(children)
@@ -11,7 +11,7 @@ const Wizard = (props) => {
           React.cloneElement(child, {
             i,
             currentStep,
-            ...rest
+            ...rest,
           })
         )}
     </section>
@@ -22,7 +22,7 @@ Wizard.propTypes = {
   currentStep: PropTypes.number.isRequired,
   nextStep: PropTypes.func.isRequired,
   previousStep: PropTypes.func.isRequired,
-  goToStep: PropTypes.func.isRequired
+  goToStep: PropTypes.func.isRequired,
 };
 
 export default Wizard;
diff --git a/client/coral-ui/components/WizardNav.js b/client/coral-ui/components/WizardNav.js
index c465c1da4..b12cedd39 100644
--- a/client/coral-ui/components/WizardNav.js
+++ b/client/coral-ui/components/WizardNav.js
@@ -3,30 +3,31 @@ import PropTypes from 'prop-types';
 import styles from './WizardNav.css';
 import Icon from './Icon';
 
-const WizardNav = (props) => {
-  const {goToStep = () => {}, currentStep, items, icon} = props;
+const WizardNav = props => {
+  const { goToStep = () => {}, currentStep, items, icon } = props;
   return (
     <nav className={styles.WizardNav}>
       <ul>
-        {
-          items.map((item, i) => (
-            <li
-              key={i}
-              className={`${currentStep === item.step ? styles.active : ''} ${item.step < currentStep ? styles.done : ''}`}
-              onClick={() => goToStep(item.step)}>
-              {item.text}
-              {icon && <Icon name={icon} />}
-              <span/>
-            </li>
-          ))
-        }
+        {items.map((item, i) => (
+          <li
+            key={i}
+            className={`${currentStep === item.step ? styles.active : ''} ${
+              item.step < currentStep ? styles.done : ''
+            }`}
+            onClick={() => goToStep(item.step)}
+          >
+            {item.text}
+            {icon && <Icon name={icon} />}
+            <span />
+          </li>
+        ))}
       </ul>
     </nav>
   );
 };
 
 WizardNav.propTypes = {
-  currentStep: PropTypes.number.isRequired
+  currentStep: PropTypes.number.isRequired,
 };
 
 export default WizardNav;
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index a2d8049f7..7ab267b0f 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -1,30 +1,30 @@
-export {default as Alert} from './components/Alert';
-export {default as Dialog} from './components/Dialog';
-export {default as CoralLogo} from './components/CoralLogo';
-export {default as FabButton} from './components/FabButton';
-export {default as TabBar} from './components/TabBar';
-export {default as Tab} from './components/Tab';
-export {default as TabCount} from './components/TabCount';
-export {default as TabContent} from './components/TabContent';
-export {default as TabPane} from './components/TabPane';
-export {default as Button} from './components/Button';
-export {default as Spinner} from './components/Spinner';
-export {default as Tooltip} from './components/Tooltip';
-export {default as PopupMenu} from './components/PopupMenu';
-export {default as Checkbox} from './components/Checkbox';
-export {default as Icon} from './components/Icon';
-export {default as List} from './components/List';
-export {default as Item} from './components/Item';
-export {default as Card} from './components/Card';
-export {default as TextField} from './components/TextField';
-export {default as Success} from './components/Success';
-export {default as Paginate} from './components/Paginate';
-export {default as Wizard} from './components/Wizard';
-export {default as WizardNav} from './components/WizardNav';
-export {default as SnackBar} from './components/SnackBar';
-export {default as TextArea} from './components/TextArea';
-export {default as Drawer} from './components/Drawer';
-export {default as Label} from './components/Label';
-export {default as FlagLabel} from './components/FlagLabel';
-export {default as Dropdown} from './components/Dropdown';
-export {default as Option} from './components/Option';
+export { default as Alert } from './components/Alert';
+export { default as Dialog } from './components/Dialog';
+export { default as CoralLogo } from './components/CoralLogo';
+export { default as FabButton } from './components/FabButton';
+export { default as TabBar } from './components/TabBar';
+export { default as Tab } from './components/Tab';
+export { default as TabCount } from './components/TabCount';
+export { default as TabContent } from './components/TabContent';
+export { default as TabPane } from './components/TabPane';
+export { default as Button } from './components/Button';
+export { default as Spinner } from './components/Spinner';
+export { default as Tooltip } from './components/Tooltip';
+export { default as PopupMenu } from './components/PopupMenu';
+export { default as Checkbox } from './components/Checkbox';
+export { default as Icon } from './components/Icon';
+export { default as List } from './components/List';
+export { default as Item } from './components/Item';
+export { default as Card } from './components/Card';
+export { default as TextField } from './components/TextField';
+export { default as Success } from './components/Success';
+export { default as Paginate } from './components/Paginate';
+export { default as Wizard } from './components/Wizard';
+export { default as WizardNav } from './components/WizardNav';
+export { default as SnackBar } from './components/SnackBar';
+export { default as TextArea } from './components/TextArea';
+export { default as Drawer } from './components/Drawer';
+export { default as Label } from './components/Label';
+export { default as FlagLabel } from './components/FlagLabel';
+export { default as Dropdown } from './components/Dropdown';
+export { default as Option } from './components/Option';
diff --git a/client/talk-plugin-commentbox/CommentBox.js b/client/talk-plugin-commentbox/CommentBox.js
index b210f4e79..a8da78f3f 100644
--- a/client/talk-plugin-commentbox/CommentBox.js
+++ b/client/talk-plugin-commentbox/CommentBox.js
@@ -2,19 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import t from 'coral-framework/services/i18n';
-import {can} from 'coral-framework/services/perms';
-import {forEachError} from 'coral-framework/utils';
+import { can } from 'coral-framework/services/perms';
+import { forEachError } from 'coral-framework/utils';
 
 import Slot from 'coral-framework/components/Slot';
-import {connect} from 'react-redux';
-import {CommentForm} from './CommentForm';
+import { connect } from 'react-redux';
+import { CommentForm } from './CommentForm';
 
 export const name = 'talk-plugin-commentbox';
 
 const notifyReasons = ['LINKS', 'TRUST'];
 
 function shouldNotify(actions = []) {
-  return actions.some(({__typename, reason}) => __typename === 'FlagAction' && notifyReasons.includes(reason));
+  return actions.some(
+    ({ __typename, reason }) =>
+      __typename === 'FlagAction' && notifyReasons.includes(reason)
+  );
 }
 
 // Given a newly posted comment's status, show a notification to the user
@@ -24,7 +27,8 @@ export const notifyForNewCommentStatus = (notify, comment, actions) => {
     notify('error', t('comment_box.comment_post_banned_word'));
   } else if (
     comment.status === 'PREMOD' ||
-    comment.status === 'SYSTEM_WITHHELD' && shouldNotify(actions)) {
+    (comment.status === 'SYSTEM_WITHHELD' && shouldNotify(actions))
+  ) {
     notify('success', t('comment_box.comment_post_notif_premod'));
   }
 };
@@ -43,8 +47,8 @@ class CommentBox extends React.Component {
 
       hooks: {
         preSubmit: [],
-        postSubmit: []
-      }
+        postSubmit: [],
+      },
     };
   }
 
@@ -67,21 +71,21 @@ class CommentBox extends React.Component {
       asset_id: assetId,
       parent_id: parentId,
       body: this.state.body,
-      ...this.props.commentBox
+      ...this.props.commentBox,
     };
 
     // Execute preSubmit Hooks
-    this.state.hooks.preSubmit.forEach((hook) => hook(input));
-    this.setState({loadingState: 'loading'});
+    this.state.hooks.preSubmit.forEach(hook => hook(input));
+    this.setState({ loadingState: 'loading' });
 
     postComment(input, 'comments')
-      .then(({data}) => {
-        this.setState({loadingState: 'success', body: ''});
+      .then(({ data }) => {
+        this.setState({ loadingState: 'success', body: '' });
         const postedComment = data.createComment.comment;
         const actions = data.createComment.actions;
 
         // Execute postSubmit Hooks
-        this.state.hooks.postSubmit.forEach((hook) => hook(data));
+        this.state.hooks.postSubmit.forEach(hook => hook(data));
 
         notifyForNewCommentStatus(notify, postedComment, actions);
 
@@ -89,100 +93,104 @@ class CommentBox extends React.Component {
           commentPostedHandler();
         }
       })
-      .catch((err) => {
-        this.setState({loadingState: 'error'});
-        forEachError(err, ({msg}) => notify('error', msg));
+      .catch(err => {
+        this.setState({ loadingState: 'error' });
+        forEachError(err, ({ msg }) => notify('error', msg));
       });
-  }
+  };
 
-  handleBodyChange = (body) => {
-    this.setState({body});
-  }
+  handleBodyChange = body => {
+    this.setState({ body });
+  };
 
   registerHook = (hookType = '', hook = () => {}) => {
     if (typeof hook !== 'function') {
-      return console.warn(`Hooks must be functions. Please check your ${hookType} hooks`);
+      return console.warn(
+        `Hooks must be functions. Please check your ${hookType} hooks`
+      );
     } else if (typeof hookType === 'string') {
-      this.setState((state) => ({
+      this.setState(state => ({
         hooks: {
           ...state.hooks,
-          [hookType]: [
-            ...state.hooks[hookType],
-            hook
-          ]
-        }
+          [hookType]: [...state.hooks[hookType], hook],
+        },
       }));
 
       return {
         hookType,
-        hook
+        hook,
       };
-
     } else {
-      return console.warn('hookTypes must be a string. Please check your hooks');
+      return console.warn(
+        'hookTypes must be a string. Please check your hooks'
+      );
     }
-  }
+  };
 
-  unregisterHook = (hookData) => {
-    const {hookType, hook} = hookData;
+  unregisterHook = hookData => {
+    const { hookType, hook } = hookData;
 
-    this.setState((state) => {
+    this.setState(state => {
       let newHooks = state.hooks[newHooks];
       const idx = state.hooks[hookType].indexOf(hook);
 
       if (idx !== -1) {
         newHooks = [
           ...state.hooks[hookType].slice(0, idx),
-          ...state.hooks[hookType].slice(idx + 1)
+          ...state.hooks[hookType].slice(idx + 1),
         ];
       }
 
       return {
         hooks: {
           ...state.hooks,
-          [hookType]: newHooks
-        }
+          [hookType]: newHooks,
+        },
       };
-
     });
-  }
+  };
 
-  render () {
-    const {isReply, maxCharCount} = this.props;
-    let {onCancel} = this.props;
+  render() {
+    const { isReply, maxCharCount } = this.props;
+    let { onCancel } = this.props;
 
     if (isReply && typeof onCancel !== 'function') {
-      console.warn('the CommentBox component should have a onCancel callback defined if it lives in a Reply');
+      console.warn(
+        'the CommentBox component should have a onCancel callback defined if it lives in a Reply'
+      );
       onCancel = () => {};
     }
 
-    return <div>
-      <CommentForm
-        defaultValue={this.props.defaultValue}
-        bodyLabel={isReply ? t('comment_box.reply') : t('comment.comment')}
-        maxCharCount={maxCharCount}
-        charCountEnable={this.props.charCountEnable}
-        bodyPlaceholder={t('comment.comment')}
-        bodyInputId={isReply ? 'replyText' : 'commentText'}
-        body={this.state.body}
-        buttonContainerStart={<Slot
-          fill="commentInputDetailArea"
-          registerHook={this.registerHook}
-          unregisterHook={this.unregisterHook}
-          isReply={isReply}
-          inline
-        />}
-        onBodyChange={this.handleBodyChange}
-        loadingState={this.state.loadingState}
-        onCancel={onCancel}
-        onSubmit={this.handleSubmit}
-      />
-    </div>;
+    return (
+      <div>
+        <CommentForm
+          defaultValue={this.props.defaultValue}
+          bodyLabel={isReply ? t('comment_box.reply') : t('comment.comment')}
+          maxCharCount={maxCharCount}
+          charCountEnable={this.props.charCountEnable}
+          bodyPlaceholder={t('comment.comment')}
+          bodyInputId={isReply ? 'replyText' : 'commentText'}
+          body={this.state.body}
+          buttonContainerStart={
+            <Slot
+              fill="commentInputDetailArea"
+              registerHook={this.registerHook}
+              unregisterHook={this.unregisterHook}
+              isReply={isReply}
+              inline
+            />
+          }
+          onBodyChange={this.handleBodyChange}
+          loadingState={this.state.loadingState}
+          onCancel={onCancel}
+          onSubmit={this.handleSubmit}
+        />
+      </div>
+    );
   }
 }
 
 CommentBox.propTypes = {
-
   // Initial value for underlying comment body textarea
   defaultValue: PropTypes.string,
   charCountEnable: PropTypes.bool.isRequired,
@@ -199,6 +207,6 @@ CommentBox.propTypes = {
   commentBox: PropTypes.object,
 };
 
-const mapStateToProps = ({commentBox}) => ({commentBox});
+const mapStateToProps = ({ commentBox }) => ({ commentBox });
 
 export default connect(mapStateToProps, null)(CommentBox);
diff --git a/client/talk-plugin-commentbox/CommentForm.js b/client/talk-plugin-commentbox/CommentForm.js
index 7c9f1342f..62604d88f 100644
--- a/client/talk-plugin-commentbox/CommentForm.js
+++ b/client/talk-plugin-commentbox/CommentForm.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 import cn from 'classnames';
 import Slot from 'coral-framework/components/Slot';
 
-import {name} from './CommentBox';
+import { name } from './CommentBox';
 import styles from './styles.css';
 
 import t from 'coral-framework/services/i18n';
@@ -14,7 +14,6 @@ import t from 'coral-framework/services/i18n';
  */
 export class CommentForm extends React.Component {
   static propTypes = {
-
     charCountEnable: PropTypes.bool.isRequired,
     maxCharCount: PropTypes.number,
 
@@ -50,7 +49,7 @@ export class CommentForm extends React.Component {
     onCancel: PropTypes.func,
     state: PropTypes.string,
     loadingState: PropTypes.oneOf(['', 'loading', 'success', 'error']),
-  }
+  };
   static get defaultProps() {
     return {
       bodyLabel: t('comment_box.comment'),
@@ -61,88 +60,111 @@ export class CommentForm extends React.Component {
     };
   }
 
-  onBodyChange = (e) => {
+  onBodyChange = e => {
     this.props.onBodyChange(e.target.value);
-  }
+  };
 
   onClickSubmit = () => {
     this.props.onSubmit();
-  }
+  };
 
   getButtonClassName = () => {
     switch (this.props.loadingState) {
-    case 'loading':
-      return cn(`${name}-button-loading`, styles.buttonLoading);
-    case 'success':
-      return cn(`${name}-button-success`, styles.buttonSuccess);
-    case 'error':
-      return cn(`${name}-button-error`, styles.buttonError);
-    default:
-      return '';
+      case 'loading':
+        return cn(`${name}-button-loading`, styles.buttonLoading);
+      case 'success':
+        return cn(`${name}-button-success`, styles.buttonSuccess);
+      case 'error':
+        return cn(`${name}-button-error`, styles.buttonError);
+      default:
+        return '';
     }
-  }
+  };
 
   render() {
-    const {maxCharCount, submitEnabled, cancelButtonClassName, submitButtonClassName, charCountEnable, body, loadingState} = this.props;
+    const {
+      maxCharCount,
+      submitEnabled,
+      cancelButtonClassName,
+      submitButtonClassName,
+      charCountEnable,
+      body,
+      loadingState,
+    } = this.props;
 
     const length = body.length;
-    const isRespectingMaxCount = (length) => charCountEnable && maxCharCount && length > maxCharCount;
+    const isRespectingMaxCount = length =>
+      charCountEnable && maxCharCount && length > maxCharCount;
     const disableSubmitButton =
       !length ||
       body.trim().length === 0 ||
       isRespectingMaxCount(length) ||
-      !submitEnabled({body}) ||
+      !submitEnabled({ body }) ||
       loadingState === 'loading';
     const disableCancelButton = loadingState === 'loading';
     const disableTextArea = loadingState === 'loading';
 
-    return <div>
-      <div className={`${name}-container`}>
-        <label
-          htmlFor={this.props.bodyInputId}
-          className="screen-reader-text"
-          aria-hidden={true}>
-          {this.props.bodyLabel}
-        </label>
-        <textarea
-          className={`${name}-textarea`}
-          value={body}
-          placeholder={this.props.bodyPlaceholder}
-          id={this.props.bodyInputId}
-          onChange={this.onBodyChange}
-          rows={3}
-          disabled={disableTextArea}
-        />
-        <Slot fill='commentInputArea' />
-      </div>
-      {
-        this.props.charCountEnable &&
-        <div className={`${name}-char-count ${length > maxCharCount ? `${name}-char-max` : ''}`}>
-          {maxCharCount && `${maxCharCount - length} ${t('comment_box.characters_remaining')}`}
+    return (
+      <div>
+        <div className={`${name}-container`}>
+          <label
+            htmlFor={this.props.bodyInputId}
+            className="screen-reader-text"
+            aria-hidden={true}
+          >
+            {this.props.bodyLabel}
+          </label>
+          <textarea
+            className={`${name}-textarea`}
+            value={body}
+            placeholder={this.props.bodyPlaceholder}
+            id={this.props.bodyInputId}
+            onChange={this.onBodyChange}
+            rows={3}
+            disabled={disableTextArea}
+          />
+          <Slot fill="commentInputArea" />
         </div>
-      }
-      <div className={`${name}-button-container`}>
-        { this.props.buttonContainerStart }
-        {
-          typeof this.props.onCancel === 'function' && (
+        {this.props.charCountEnable && (
+          <div
+            className={`${name}-char-count ${
+              length > maxCharCount ? `${name}-char-max` : ''
+            }`}
+          >
+            {maxCharCount &&
+              `${maxCharCount - length} ${t(
+                'comment_box.characters_remaining'
+              )}`}
+          </div>
+        )}
+        <div className={`${name}-button-container`}>
+          {this.props.buttonContainerStart}
+          {typeof this.props.onCancel === 'function' && (
             <Button
-              cStyle='darkGrey'
+              cStyle="darkGrey"
               className={cn(`${name}-cancel-button`, cancelButtonClassName)}
               onClick={this.props.onCancel}
               disabled={disableCancelButton}
             >
               {t('comment_box.cancel')}
             </Button>
-          )
-        }
-        <Button
-          cStyle={disableSubmitButton ? 'lightGrey' : this.props.submitButtonCStyle}
-          className={cn(`${name}-button`, submitButtonClassName, this.getButtonClassName())}
-          onClick={this.onClickSubmit}
-          disabled={disableSubmitButton ? 'disabled' : ''}>
-          {this.props.submitText}
-        </Button>
+          )}
+          <Button
+            cStyle={
+              disableSubmitButton ? 'lightGrey' : this.props.submitButtonCStyle
+            }
+            className={cn(
+              `${name}-button`,
+              submitButtonClassName,
+              this.getButtonClassName()
+            )}
+            onClick={this.onClickSubmit}
+            disabled={disableSubmitButton ? 'disabled' : ''}
+          >
+            {this.props.submitText}
+          </Button>
+        </div>
       </div>
-    </div>;
+    );
   }
 }
diff --git a/client/talk-plugin-commentbox/actions.js b/client/talk-plugin-commentbox/actions.js
index acc84f60b..7a6aa3249 100644
--- a/client/talk-plugin-commentbox/actions.js
+++ b/client/talk-plugin-commentbox/actions.js
@@ -1,11 +1,11 @@
-export const addTag = (tag) => ({
+export const addTag = tag => ({
   type: 'ADD_TAG',
-  tag
+  tag,
 });
 
-export const removeTag = (idx) => ({
+export const removeTag = idx => ({
   type: 'REMOVE_TAG',
-  idx
+  idx,
 });
 
 export const clearTags = () => ({
diff --git a/client/talk-plugin-commentbox/index.js b/client/talk-plugin-commentbox/index.js
index 0d94a840e..cbc56ade5 100644
--- a/client/talk-plugin-commentbox/index.js
+++ b/client/talk-plugin-commentbox/index.js
@@ -1 +1 @@
-export {default as reducer} from './reducer';
+export { default as reducer } from './reducer';
diff --git a/client/talk-plugin-commentbox/reducer.js b/client/talk-plugin-commentbox/reducer.js
index e84f35e93..4c6e496ed 100644
--- a/client/talk-plugin-commentbox/reducer.js
+++ b/client/talk-plugin-commentbox/reducer.js
@@ -1,27 +1,27 @@
-import {ADD_TAG, REMOVE_TAG, CLEAR_TAGS} from './constants';
+import { ADD_TAG, REMOVE_TAG, CLEAR_TAGS } from './constants';
 
 const initialState = {
-  tags: []
+  tags: [],
 };
 
-export default function commentBox (state = initialState, action) {
+export default function commentBox(state = initialState, action) {
   switch (action.type) {
-  case ADD_TAG :
-    return {
-      ...state,
-      tags: [...state.tags, action.tag]
-    };
-  case REMOVE_TAG :
-    return {
-      ...state,
-      tags: [
-        ...state.tags.slice(0, action.idx),
-        ...state.tags.slice(action.idx + 1)
-      ]
-    };
-  case CLEAR_TAGS :
-    return initialState;
-  default :
-    return state;
+    case ADD_TAG:
+      return {
+        ...state,
+        tags: [...state.tags, action.tag],
+      };
+    case REMOVE_TAG:
+      return {
+        ...state,
+        tags: [
+          ...state.tags.slice(0, action.idx),
+          ...state.tags.slice(action.idx + 1),
+        ],
+      };
+    case CLEAR_TAGS:
+      return initialState;
+    default:
+      return state;
   }
 }
diff --git a/client/talk-plugin-flags/components/FlagButton.js b/client/talk-plugin-flags/components/FlagButton.js
index 22a9b1161..b8a24392d 100644
--- a/client/talk-plugin-flags/components/FlagButton.js
+++ b/client/talk-plugin-flags/components/FlagButton.js
@@ -1,19 +1,19 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 
 import t from 'coral-framework/services/i18n';
-import {can} from 'coral-framework/services/perms';
+import { can } from 'coral-framework/services/perms';
 
-import {PopupMenu, Button} from 'coral-ui';
+import { PopupMenu, Button } from 'coral-ui';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 import cn from 'classnames';
 import styles from './styles.css';
+import * as REASONS from '../helpers/flagReasons';
 
-import {getErrorMessages} from 'coral-framework/utils';
+import { getErrorMessages } from 'coral-framework/utils';
 
 const name = 'talk-plugin-flags';
 
 export default class FlagButton extends Component {
-
   state = {
     showMenu: false,
     itemType: '',
@@ -21,18 +21,21 @@ export default class FlagButton extends Component {
     message: '',
     step: 0,
     posted: false,
-    localPost: null
-  }
+    localPost: null,
+  };
 
-  componentDidUpdate () {
-    if (this.popup) { // this will be defined when the reporting popup is opened
-      this.popup.firstChild.style.top = `${this.flagButton.offsetTop - this.popup.firstChild.clientHeight - 15}px`;
+  componentDidUpdate() {
+    if (this.popup) {
+      // this will be defined when the reporting popup is opened
+      this.popup.firstChild.style.top = `${this.flagButton.offsetTop -
+        this.popup.firstChild.clientHeight -
+        15}px`;
     }
   }
 
   // When the "report" button is clicked expand the menu
   onReportClick = () => {
-    const {currentUser} = this.props;
+    const { currentUser } = this.props;
     if (!currentUser) {
       this.props.showSignInDialog();
       return;
@@ -41,12 +44,12 @@ export default class FlagButton extends Component {
       if (this.state.showMenu) {
         this.closeMenu();
       } else {
-        this.setState({showMenu: true});
+        this.setState({ showMenu: true });
       }
     } else {
       this.props.notify('error', t('error.NOT_AUTHORIZED'));
     }
-  }
+  };
 
   closeMenu = () => {
     this.setState({
@@ -54,103 +57,101 @@ export default class FlagButton extends Component {
       itemType: '',
       reason: '',
       message: '',
-      step: 0
+      step: 0,
     });
-  }
+  };
 
   onPopupContinue = () => {
-    const {postFlag, postDontAgree, id, author_id} = this.props;
-    const {itemType, reason, step, posted, message} = this.state;
+    const { postFlag, postDontAgree, id, author_id } = this.props;
+    const { itemType, reason, step, posted, message } = this.state;
 
     // Proceed to the next step or close the menu if we've reached the end
     if (step + 1 >= this.props.getPopupMenu.length) {
       this.closeMenu();
     } else {
-      this.setState({step: step + 1});
+      this.setState({ step: step + 1 });
     }
 
     // If itemType and reason are both set, post the action
     if (itemType && reason && !posted) {
-      this.setState({posted: true});
+      this.setState({ posted: true });
 
       let item_id;
-      switch(itemType) {
-      case 'COMMENTS':
-        item_id = id;
-        break;
-      case 'USERS':
-        item_id = author_id;
-        break;
+      switch (itemType) {
+        case 'COMMENTS':
+          item_id = id;
+          break;
+        case 'USERS':
+          item_id = author_id;
+          break;
       }
 
       if (itemType === 'COMMENTS') {
-        this.setState({localPost: 'temp'});
+        this.setState({ localPost: 'temp' });
       }
 
       let action = {
         item_id,
         item_type: itemType,
-        reason: null,
-        message
+        message,
       };
-      if (reason === 'COMMENT_NOAGREE') {
+      if (reason === REASONS.comment.noagree) {
         postDontAgree(action)
-          .then(({data}) => {
+          .then(({ data }) => {
             if (itemType === 'COMMENTS') {
-              this.setState({localPost: data.createDontAgree.dontagree.id});
+              this.setState({ localPost: data.createDontAgree.dontagree.id });
             }
           })
-          .catch((err) => {
+          .catch(err => {
             this.props.notify('error', getErrorMessages(err));
             console.error(err);
           });
       } else {
-        postFlag({...action, reason})
-          .then(({data}) => {
+        postFlag({ ...action, reason })
+          .then(({ data }) => {
             if (itemType === 'COMMENTS') {
-              this.setState({localPost: data.createFlag.flag.id});
+              this.setState({ localPost: data.createFlag.flag.id });
             }
           })
-          .catch((err) => {
+          .catch(err => {
             this.props.notify('error', getErrorMessages(err));
             console.error(err);
           });
       }
     }
-  }
-
-  onPopupOptionClick = (sets) => (e) => {
+  };
 
+  onPopupOptionClick = sets => e => {
     // If flagging a user, indicate that this is referencing the username rather than the bio
-    if(sets === 'itemType' && e.target.value === 'users') {
-      this.setState({field: 'username'});
+    if (sets === 'itemType' && e.target.value === 'users') {
+      this.setState({ field: 'username' });
     }
 
     // Set itemType and field if they are defined in the popupMenu
     const currentMenu = this.props.getPopupMenu[this.state.step]();
     if (currentMenu.itemType) {
-      this.setState({itemType: currentMenu.itemType});
+      this.setState({ itemType: currentMenu.itemType });
     }
     if (currentMenu.field) {
-      this.setState({field: currentMenu.field});
+      this.setState({ field: currentMenu.field });
     }
 
-    this.setState({[sets]: e.target.value});
-  }
+    this.setState({ [sets]: e.target.value });
+  };
 
-  onNoteTextChange = (e) => {
-    this.setState({message: e.target.value});
-  }
+  onNoteTextChange = e => {
+    this.setState({ message: e.target.value });
+  };
 
   handleClickOutside = () => {
     if (this.state.showMenu) {
       this.closeMenu();
     }
-  }
+  };
 
-  render () {
-    const {getPopupMenu, flaggedByCurrentUser} = this.props;
-    const {localPost} = this.state;
+  render() {
+    const { getPopupMenu, flaggedByCurrentUser } = this.props;
+    const { localPost } = this.state;
     const flagged = flaggedByCurrentUser || localPost;
     const popupMenu = getPopupMenu[this.state.step](this.state.itemType);
 
@@ -159,80 +160,98 @@ export default class FlagButton extends Component {
         <div className={`${name}-container`}>
           <button
             disabled={flagged}
-            ref={(ref) => this.flagButton = ref}
-            onClick={!this.props.banned && !flaggedByCurrentUser && !localPost ? this.onReportClick : null}
-            className={
-              cn(`${name}-button`, {
-                [`${name}-button-flagged`]: flagged,
-                [styles.flaggedButton]: flagged
-              },
-              styles.button)}
-          >
-            {
-              flagged
-                ? <span className={`${name}-button-text`}>{t('reported')}</span>
-                : <span className={`${name}-button-text`}>{t('report')}</span>
+            ref={ref => (this.flagButton = ref)}
+            onClick={
+              !this.props.banned && !flaggedByCurrentUser && !localPost
+                ? this.onReportClick
+                : null
             }
-            <i className={
-              cn(`${name}-icon`, 'material-icons', styles.icon, {
+            className={cn(
+              `${name}-button`,
+              {
+                [`${name}-button-flagged`]: flagged,
+                [styles.flaggedButton]: flagged,
+              },
+              styles.button
+            )}
+          >
+            {flagged ? (
+              <span className={`${name}-button-text`}>{t('reported')}</span>
+            ) : (
+              <span className={`${name}-button-text`}>{t('report')}</span>
+            )}
+            <i
+              className={cn(`${name}-icon`, 'material-icons', styles.icon, {
                 flaggedIcon: flagged,
                 [styles.flaggedIcon]: flagged,
               })}
-            aria-hidden={true}>flag</i>
+              aria-hidden={true}
+            >
+              flag
+            </i>
           </button>
-          {
-            this.state.showMenu &&
-            <div className={`${name}-popup`} ref={(ref) => this.popup = ref}>
+          {this.state.showMenu && (
+            <div className={`${name}-popup`} ref={ref => (this.popup = ref)}>
               <PopupMenu>
                 <div className={`${name}-popup-header`}>{popupMenu.header}</div>
-                {
-                  popupMenu.text &&
+                {popupMenu.text && (
                   <div className={`${name}-popup-text`}>{popupMenu.text}</div>
-                }
-                {
-                  popupMenu.options && <form className={`${name}-popup-form`}>
-                    {
-                      popupMenu.options.map((option) =>
-                        <div key={option.val}>
-                          <input
-                            className={`${name}-popup-radio`}
-                            type="radio"
-                            id={option.val}
-                            checked={this.state[popupMenu.sets] === option.val}
-                            onClick={this.onPopupOptionClick(popupMenu.sets)}
-                            value={option.val}/>
-                          <label htmlFor={option.val} className={`${name}-popup-radio-label`}>{option.text}</label><br/>
-                        </div>
-                      )
-                    }
-                    {
-                      this.state.reason && <div>
-                        <label htmlFor={'message'} className={`${name}-popup-textarea-label`}>
+                )}
+                {popupMenu.options && (
+                  <form className={`${name}-popup-form`}>
+                    {popupMenu.options.map(option => (
+                      <div key={option.val}>
+                        <input
+                          className={`${name}-popup-radio`}
+                          type="radio"
+                          id={option.val}
+                          checked={this.state[popupMenu.sets] === option.val}
+                          onClick={this.onPopupOptionClick(popupMenu.sets)}
+                          value={option.val}
+                        />
+                        <label
+                          htmlFor={option.val}
+                          className={`${name}-popup-radio-label`}
+                        >
+                          {option.text}
+                        </label>
+                        <br />
+                      </div>
+                    ))}
+                    {this.state.reason && (
+                      <div>
+                        <label
+                          htmlFor={'message'}
+                          className={`${name}-popup-textarea-label`}
+                        >
                           {t('flag_reason')}
-                        </label><br/>
+                        </label>
+                        <br />
                         <textarea
                           className={`${name}-reason-text`}
                           id="message"
                           rows={4}
                           onChange={this.onNoteTextChange}
-                          value={this.state.message}/>
+                          value={this.state.message}
+                        />
                       </div>
-                    }
+                    )}
                   </form>
-                }
+                )}
                 <div className={`${name}-popup-counter`}>
                   {this.state.step + 1} of {getPopupMenu.length}
                 </div>
-                {
-                  popupMenu.button && <Button
+                {popupMenu.button && (
+                  <Button
                     className={`${name}-popup-button`}
-                    onClick={this.onPopupContinue}>
+                    onClick={this.onPopupContinue}
+                  >
                     {popupMenu.button}
                   </Button>
-                }
+                )}
               </PopupMenu>
             </div>
-          }
+          )}
         </div>
       </ClickOutside>
     );
diff --git a/client/talk-plugin-flags/components/FlagComment.js b/client/talk-plugin-flags/components/FlagComment.js
index 2cf172eaa..bd8607c6b 100644
--- a/client/talk-plugin-flags/components/FlagComment.js
+++ b/client/talk-plugin-flags/components/FlagComment.js
@@ -2,51 +2,54 @@ import React from 'react';
 import FlagButton from './FlagButton';
 
 import t from 'coral-framework/services/i18n';
-import {username, comment} from '../helpers/flagReasons';
+import { username, comment } from '../helpers/flagReasons';
 
-const FlagComment = (props) => <FlagButton {...props} getPopupMenu={getPopupMenu} />;
+const FlagComment = props => (
+  <FlagButton {...props} getPopupMenu={getPopupMenu} />
+);
 
 const getPopupMenu = [
   () => {
     return {
       header: t('step_1_header'),
       options: [
-        {val: 'COMMENTS', text: t('flag_comment')},
-        {val: 'USERS', text: t('flag_username')}
+        { val: 'COMMENTS', text: t('flag_comment') },
+        { val: 'USERS', text: t('flag_username') },
       ],
       button: t('continue'),
-      sets: 'itemType'
+      sets: 'itemType',
     };
   },
-  (itemType) => {
-    const options = itemType === 'COMMENTS' ?
-      [
-        {val: comment.offensive, text: t('comment_offensive')},
-        {val: comment.spam, text: t('marketing')},
-        {val: comment.noagree, text: t('no_agree_comment')},
-        {val: comment.other, text: t('other')}
-      ]
-      : [
-        {val: username.offensive, text: t('username_offensive')},
-        {val: username.nolike, text: t('no_like_username')},
-        {val: username.impersonating, text: t('user_impersonating')},
-        {val: username.spam, text: t('marketing')},
-        {val: username.other, text: t('other')}
-      ];
+  itemType => {
+    const options =
+      itemType === 'COMMENTS'
+        ? [
+            { val: comment.offensive, text: t('comment_offensive') },
+            { val: comment.spam, text: t('marketing') },
+            { val: comment.noagree, text: t('no_agree_comment') },
+            { val: comment.other, text: t('other') },
+          ]
+        : [
+            { val: username.offensive, text: t('username_offensive') },
+            { val: username.nolike, text: t('no_like_username') },
+            { val: username.impersonating, text: t('user_impersonating') },
+            { val: username.spam, text: t('marketing') },
+            { val: username.other, text: t('other') },
+          ];
     return {
       header: t('step_2_header'),
       options,
       button: t('continue'),
-      sets: 'reason'
+      sets: 'reason',
     };
   },
-  () =>  {
+  () => {
     return {
       header: t('step_3_header'),
       text: t('thank_you'),
       button: t('done'),
     };
-  }
+  },
 ];
 
 export default FlagComment;
diff --git a/client/talk-plugin-flags/helpers/flagReasons.js b/client/talk-plugin-flags/helpers/flagReasons.js
index 52bddbb38..8ff2893ed 100644
--- a/client/talk-plugin-flags/helpers/flagReasons.js
+++ b/client/talk-plugin-flags/helpers/flagReasons.js
@@ -3,12 +3,12 @@ export const username = {
   nolike: 'USERNAME_NOLIKE',
   impersonating: 'USERNAME_IMPERSONATING',
   spam: 'USERNAME_SPAM',
-  other: 'USERNAME_OTHER'
+  other: 'USERNAME_OTHER',
 };
 
 export const comment = {
   offensive: 'COMMENT_OFFENSIVE',
   spam: 'COMMENT_SPAM',
   noagree: 'COMMENT_NOAGREE',
-  other: 'COMMENT_OTHER'
+  other: 'COMMENT_OTHER',
 };
diff --git a/client/talk-plugin-flags/index.js b/client/talk-plugin-flags/index.js
index dd851b094..8385ce482 100644
--- a/client/talk-plugin-flags/index.js
+++ b/client/talk-plugin-flags/index.js
@@ -1 +1 @@
-export {default as FlagComment} from './components/FlagComment';
+export { default as FlagComment } from './components/FlagComment';
diff --git a/client/talk-plugin-history/Comment.js b/client/talk-plugin-history/Comment.js
index 463122160..015044b37 100644
--- a/client/talk-plugin-history/Comment.js
+++ b/client/talk-plugin-history/Comment.js
@@ -1,21 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Icon} from '../coral-ui';
+import { Icon } from '../coral-ui';
 import styles from './Comment.css';
 import Slot from 'coral-framework/components/Slot';
 import CommentTimestamp from 'coral-framework/components/CommentTimestamp';
 import CommentContent from 'coral-framework/components/CommentContent';
 import cn from 'classnames';
-import {getTotalReactionsCount} from 'coral-framework/utils';
+import { getTotalReactionsCount } from 'coral-framework/utils';
 
 import t from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
-
   render() {
-    const {comment, link, data, root} = this.props;
+    const { comment, link, data, root } = this.props;
     const reactionCount = getTotalReactionsCount(comment.action_summaries);
-    const queryData = {root, comment, asset: comment.asset};
+    const queryData = { root, comment, asset: comment.asset };
 
     return (
       <div className={styles.myComment}>
@@ -28,34 +27,62 @@ class Comment extends React.Component {
             queryData={queryData}
           />
           <div className={cn(styles.commentSummary, 'comment-summary')}>
-            <span className={cn(styles.commentSummaryReactions, 'comment-summary-reactions', {[styles.countZero]: reactionCount === 0})}>
+            <span
+              className={cn(
+                styles.commentSummaryReactions,
+                'comment-summary-reactions',
+                { [styles.countZero]: reactionCount === 0 }
+              )}
+            >
               <Icon name="thumb_up" />
-              <span className={cn(styles.reactionCount, 'comment-summary-reaction-count')}>
+              <span
+                className={cn(
+                  styles.reactionCount,
+                  'comment-summary-reaction-count'
+                )}
+              >
                 {reactionCount}
               </span>
-              {reactionCount === 1 ? t('common.reaction') : t('common.reactions')}
+              {reactionCount === 1
+                ? t('common.reaction')
+                : t('common.reactions')}
             </span>
-            <span className={cn('comment-summary-replies', {[styles.countZero]: comment.replyCount === 0})}>
+            <span
+              className={cn('comment-summary-replies', {
+                [styles.countZero]: comment.replyCount === 0,
+              })}
+            >
               <Icon name="reply" />
-              <span className={cn(styles.replyCount, 'comment-summary-reply-count')}>
+              <span
+                className={cn(styles.replyCount, 'comment-summary-reply-count')}
+              >
                 {comment.replyCount}
               </span>
-              {comment.replyCount === 1 ? t('common.reply') : t('common.replies')}
+              {comment.replyCount === 1
+                ? t('common.reply')
+                : t('common.replies')}
             </span>
           </div>
           <div className="my-comment-asset">
-            <a className={cn(styles.assetURL, 'my-comment-anchor')}
+            <a
+              className={cn(styles.assetURL, 'my-comment-anchor')}
               href="#"
-              onClick={link(`${comment.asset.url}`)}>
-              {t('common.story')}: {comment.asset.title ? comment.asset.title : comment.asset.url}
+              onClick={link(`${comment.asset.url}`)}
+            >
+              {t('common.story')}:{' '}
+              {comment.asset.title ? comment.asset.title : comment.asset.url}
             </a>
           </div>
         </div>
         <div className={styles.sidebar}>
           <ul>
             <li>
-              <a onClick={link(`${comment.asset.url}?commentId=${comment.id}`)} className={styles.viewLink}>
-                <Icon name="open_in_new" className={styles.iconView}/>{t('view_conversation')}
+              <a
+                onClick={link(`${comment.asset.url}?commentId=${comment.id}`)}
+                className={styles.viewLink}
+              >
+                <Icon name="open_in_new" className={styles.iconView} />
+                {t('view_conversation')}
               </a>
             </li>
             <li>
@@ -80,7 +107,7 @@ class Comment extends React.Component {
 Comment.propTypes = {
   comment: PropTypes.shape({
     id: PropTypes.string,
-    body: PropTypes.string
+    body: PropTypes.string,
   }).isRequired,
 };
 
diff --git a/client/talk-plugin-history/CommentHistory.js b/client/talk-plugin-history/CommentHistory.js
index c64e5419b..a56350c4a 100644
--- a/client/talk-plugin-history/CommentHistory.js
+++ b/client/talk-plugin-history/CommentHistory.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Comment from './Comment';
 import LoadMore from './LoadMore';
-import {forEachError} from 'plugin-api/beta/client/utils';
+import { forEachError } from 'plugin-api/beta/client/utils';
 
 class CommentHistory extends React.Component {
   state = {
@@ -10,38 +10,43 @@ class CommentHistory extends React.Component {
   };
 
   loadMore = () => {
-    this.setState({loadingState: 'loading'});
-    this.props.loadMore()
+    this.setState({ loadingState: 'loading' });
+    this.props
+      .loadMore()
       .then(() => {
-        this.setState({loadingState: 'success'});
+        this.setState({ loadingState: 'success' });
       })
-      .catch((error) => {
-        this.setState({loadingState: 'error'});
-        forEachError(error, ({msg}) => {this.props.notify('error', msg);});
+      .catch(error => {
+        this.setState({ loadingState: 'error' });
+        forEachError(error, ({ msg }) => {
+          this.props.notify('error', msg);
+        });
       });
-  }
+  };
 
   render() {
-    const {link, comments, data, root} = this.props;
+    const { link, comments, data, root } = this.props;
     return (
       <div>
         <div className="commentHistory__list">
           {comments.nodes.map((comment, i) => {
-            return <Comment
-              key={i}
-              data={data}
-              root={root}
-              comment={comment}
-              link={link}
-            />;
+            return (
+              <Comment
+                key={i}
+                data={data}
+                root={root}
+                comment={comment}
+                link={link}
+              />
+            );
           })}
         </div>
-        {comments.hasNextPage &&
+        {comments.hasNextPage && (
           <LoadMore
             loadMore={this.loadMore}
             loadingState={this.state.loadingState}
           />
-        }
+        )}
       </div>
     );
   }
@@ -53,7 +58,7 @@ CommentHistory.propTypes = {
   notify: PropTypes.func,
   link: PropTypes.func,
   data: PropTypes.object,
-  root: PropTypes.object
+  root: PropTypes.object,
 };
 
 export default CommentHistory;
diff --git a/client/talk-plugin-history/LoadMore.js b/client/talk-plugin-history/LoadMore.js
index a168ed43a..9858811ad 100644
--- a/client/talk-plugin-history/LoadMore.js
+++ b/client/talk-plugin-history/LoadMore.js
@@ -1,18 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
 
 class LoadMore extends React.Component {
-  render () {
-    const {loadingState, loadMore} = this.props;
+  render() {
+    const { loadingState, loadMore } = this.props;
     const disabled = loadingState === 'loading';
     return (
-      <div className='talk-load-more'>
+      <div className="talk-load-more">
         <Button
           onClick={loadMore}
-          className={cn('talk-load-more-button', {[`talk-load-more-button-${loadingState}`]: loadingState})}
+          className={cn('talk-load-more-button', {
+            [`talk-load-more-button-${loadingState}`]: loadingState,
+          })}
           disabled={disabled}
         >
           {t('framework.view_more_comments')}
diff --git a/client/talk-plugin-infobox/InfoBox.js b/client/talk-plugin-infobox/InfoBox.js
index 81c69b0d6..8577dbc9b 100644
--- a/client/talk-plugin-infobox/InfoBox.js
+++ b/client/talk-plugin-infobox/InfoBox.js
@@ -3,10 +3,10 @@ import Markdown from 'coral-framework/components/Markdown';
 
 const packagename = 'talk-plugin-infobox';
 
-const InfoBox = ({enable, content}) =>
-  <div
-    className={`${packagename}-info ${enable ? '' : 'hidden'}` }>
+const InfoBox = ({ enable, content }) => (
+  <div className={`${packagename}-info ${enable ? '' : 'hidden'}`}>
     <Markdown content={content} />
-  </div>;
+  </div>
+);
 
 export default InfoBox;
diff --git a/client/talk-plugin-infobox/__tests__/InfoBox.spec.js b/client/talk-plugin-infobox/__tests__/InfoBox.spec.js
index e26baa54f..c2a7b631f 100644
--- a/client/talk-plugin-infobox/__tests__/InfoBox.spec.js
+++ b/client/talk-plugin-infobox/__tests__/InfoBox.spec.js
@@ -1,15 +1,13 @@
 import React from 'react';
-import {shallow} from 'enzyme';
+import { shallow } from 'enzyme';
 import InfoBox from '../InfoBox';
 import renderer from 'react-test-renderer';
 
-const render = (props) => shallow(<InfoBox {...props} />);
+const render = props => shallow(<InfoBox {...props} />);
 
 describe('InfoBox', () => {
   it('renders correctly', () => {
-    const tree = renderer.create(
-      <InfoBox content='test' enable/>
-    ).toJSON();
+    const tree = renderer.create(<InfoBox content="test" enable />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -21,14 +19,14 @@ describe('InfoBox', () => {
   });
 
   it('should render enabled InfoBox', () => {
-    const wrapper = render({enable: true});
+    const wrapper = render({ enable: true });
     const className = wrapper.prop('className');
     expect(className).toMatch('-info');
     expect(className).not.toMatch('hidden');
   });
 
   it('should render Markdown', () => {
-    const wrapper = render({content: 'x'});
+    const wrapper = render({ content: 'x' });
     const Markddown = wrapper.find('Markdown');
     expect(Markddown).toHaveLength(1);
     expect(Markddown.prop('content')).toEqual('x');
diff --git a/client/talk-plugin-moderation/ModerationLink.js b/client/talk-plugin-moderation/ModerationLink.js
index 50808984e..c40c50b82 100644
--- a/client/talk-plugin-moderation/ModerationLink.js
+++ b/client/talk-plugin-moderation/ModerationLink.js
@@ -4,19 +4,29 @@ import styles from './styles.css';
 import cn from 'classnames';
 
 import t from 'coral-framework/services/i18n';
-import {BASE_PATH} from 'coral-framework/constants/url';
+import { BASE_PATH } from 'coral-framework/constants/url';
 
-const ModerationLink = (props) => props.isAdmin ? (
-  <div className={cn(styles.moderationLink, 'talk-embed-stream-moderation-container')}>
-    <a className='talk-embed-stream-moderation-link' href={`${BASE_PATH}admin/moderate/${props.assetId}`} target="_blank">
-      {t('moderate_this_stream')}
-    </a>
-  </div>
-) : null;
+const ModerationLink = props =>
+  props.isAdmin ? (
+    <div
+      className={cn(
+        styles.moderationLink,
+        'talk-embed-stream-moderation-container'
+      )}
+    >
+      <a
+        className="talk-embed-stream-moderation-link"
+        href={`${BASE_PATH}admin/moderate/${props.assetId}`}
+        target="_blank"
+      >
+        {t('moderate_this_stream')}
+      </a>
+    </div>
+  ) : null;
 
 ModerationLink.propTypes = {
   assetId: PropTypes.string.isRequired,
-  isAdmin: PropTypes.bool.isRequired
+  isAdmin: PropTypes.bool.isRequired,
 };
 
 export default ModerationLink;
diff --git a/client/talk-plugin-moderation/index.js b/client/talk-plugin-moderation/index.js
index 4543750c4..38426167a 100644
--- a/client/talk-plugin-moderation/index.js
+++ b/client/talk-plugin-moderation/index.js
@@ -1 +1 @@
-export {default as ModerationLink} from './ModerationLink';
+export { default as ModerationLink } from './ModerationLink';
diff --git a/client/talk-plugin-replies/ReplyBox.js b/client/talk-plugin-replies/ReplyBox.js
index 606aad000..2a6bd017b 100644
--- a/client/talk-plugin-replies/ReplyBox.js
+++ b/client/talk-plugin-replies/ReplyBox.js
@@ -1,11 +1,10 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import CommentBox from '../talk-plugin-commentbox/CommentBox';
 
 const name = 'talk-plugin-replies';
 
 class ReplyBox extends Component {
-
   componentDidMount() {
     document.getElementById('replyText').focus();
   }
@@ -24,21 +23,24 @@ class ReplyBox extends Component {
       parentId,
       commentPostedHandler,
       maxCharCount,
-      charCountEnable
+      charCountEnable,
     } = this.props;
-    return <div className={`${name}-textarea`} style={styles && styles.container}>
-      <CommentBox
-        maxCharCount={maxCharCount}
-        charCountEnable={charCountEnable}
-        commentPostedHandler={commentPostedHandler}
-        parentId={parentId}
-        onCancel={this.cancelReply}
-        notify={notify}
-        currentUser={currentUser}
-        assetId={assetId}
-        postComment={postComment}
-        isReply={true} />
-    </div>;
+    return (
+      <div className={`${name}-textarea`} style={styles && styles.container}>
+        <CommentBox
+          maxCharCount={maxCharCount}
+          charCountEnable={charCountEnable}
+          commentPostedHandler={commentPostedHandler}
+          parentId={parentId}
+          onCancel={this.cancelReply}
+          notify={notify}
+          currentUser={currentUser}
+          assetId={assetId}
+          postComment={postComment}
+          isReply={true}
+        />
+      </div>
+    );
   }
 }
 
@@ -50,7 +52,7 @@ ReplyBox.propTypes = {
   parentId: PropTypes.string,
   notify: PropTypes.func.isRequired,
   postComment: PropTypes.func.isRequired,
-  assetId: PropTypes.string.isRequired
+  assetId: PropTypes.string.isRequired,
 };
 
 export default ReplyBox;
diff --git a/client/talk-plugin-replies/ReplyButton.js b/client/talk-plugin-replies/ReplyButton.js
index 13ff4de75..66433bdba 100644
--- a/client/talk-plugin-replies/ReplyButton.js
+++ b/client/talk-plugin-replies/ReplyButton.js
@@ -8,16 +8,19 @@ import styles from './ReplyButton.css';
 
 const name = 'talk-plugin-replies';
 
-const ReplyButton = ({onClick}) => {
+const ReplyButton = ({ onClick }) => {
   return (
     <button
       className={cn(`${name}-reply-button`, styles.button)}
-      onClick={onClick}>
-      <span className={cn(`${name}-label`, styles.label)}>
-        {t('reply')}
-      </span>
-      <i className={cn(`${name}-icon`, 'material-icons', styles.icon)}
-        aria-hidden={true}>reply</i>
+      onClick={onClick}
+    >
+      <span className={cn(`${name}-label`, styles.label)}>{t('reply')}</span>
+      <i
+        className={cn(`${name}-icon`, 'material-icons', styles.icon)}
+        aria-hidden={true}
+      >
+        reply
+      </i>
     </button>
   );
 };
diff --git a/client/talk-plugin-replies/index.js b/client/talk-plugin-replies/index.js
index 2eff814d8..813d96672 100644
--- a/client/talk-plugin-replies/index.js
+++ b/client/talk-plugin-replies/index.js
@@ -1,7 +1,4 @@
 import ReplyBox from './ReplyBox';
 import ReplyButton from './ReplyButton';
 
-export {
-  ReplyBox,
-  ReplyButton
-};
+export { ReplyBox, ReplyButton };
diff --git a/client/talk-plugin-tag-label/TagLabel.js b/client/talk-plugin-tag-label/TagLabel.js
index 8c6f19a60..27d6bdde4 100644
--- a/client/talk-plugin-tag-label/TagLabel.js
+++ b/client/talk-plugin-tag-label/TagLabel.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
-const TagLabel = ({children}) => <div className='talk-plugin-tag-label'>
-  {children}
-</div>;
+const TagLabel = ({ children }) => (
+  <div className="talk-plugin-tag-label">{children}</div>
+);
 
 export default TagLabel;
diff --git a/config.js b/config.js
index 5df965339..dd9aed13c 100644
--- a/config.js
+++ b/config.js
@@ -2,10 +2,8 @@
 // application. All defaults are assumed here, validation should also be
 // completed here.
 
-// Perform rewrites to the runtime environment variables based on the contents
-// of the process.env.REWRITE_ENV if it exists. This is done here as it is the
-// entrypoint for the entire applications configuration.
-require('env-rewrite').rewrite();
+// Setup the environment.
+require('./services/env');
 
 const uniq = require('lodash/uniq');
 const ms = require('ms');
@@ -18,10 +16,19 @@ const localAddress = require('ip').address('private');
 //==============================================================================
 
 const CONFIG = {
-
   // WEBPACK indicates when webpack is currently building.
   WEBPACK: process.env.WEBPACK === 'TRUE',
 
+  // APOLLO_ENGINE_KEY specifies the key used to connect Talk to
+  // https://engine.apollo.com/ for tracing of GraphQL requests.
+  //
+  // Note: Apollo Engine is a premium service, may not be free for certain
+  // volumes of queries.
+  APOLLO_ENGINE_KEY: process.env.APOLLO_ENGINE_KEY || null,
+
+  // ENABLE_TRACING is true when the APOLLO_ENGINE_KEY is provided.
+  ENABLE_TRACING: Boolean(process.env.APOLLO_ENGINE_KEY),
+
   // EMAIL_SUBJECT_PREFIX is the string before emails in the subject.
   EMAIL_SUBJECT_PREFIX: process.env.TALK_EMAIL_SUBJECT_PREFIX || '[Talk]',
 
@@ -54,14 +61,19 @@ const CONFIG = {
 
   // JWT_SIGNING_COOKIE_NAME will be the cookie set when cookies are issued.
   // This defaults to the TALK_JWT_COOKIE_NAME value.
-  JWT_SIGNING_COOKIE_NAME: process.env.TALK_JWT_SIGNING_COOKIE_NAME || process.env.TALK_JWT_COOKIE_NAME || 'authorization',
+  JWT_SIGNING_COOKIE_NAME:
+    process.env.TALK_JWT_SIGNING_COOKIE_NAME ||
+    process.env.TALK_JWT_COOKIE_NAME ||
+    'authorization',
 
   // JWT_COOKIE_NAMES declares the many cookie names used for verification.
   JWT_COOKIE_NAMES: process.env.TALK_JWT_COOKIE_NAMES || null,
 
   // JWT_CLEAR_COOKIE_LOGOUT specifies whether the named cookie should be
   // cleared when the user is logged out.
-  JWT_CLEAR_COOKIE_LOGOUT: process.env.TALK_JWT_CLEAR_COOKIE_LOGOUT ? process.env.TALK_JWT_CLEAR_COOKIE_LOGOUT !== 'FALSE' : true,
+  JWT_CLEAR_COOKIE_LOGOUT: process.env.TALK_JWT_CLEAR_COOKIE_LOGOUT
+    ? process.env.TALK_JWT_CLEAR_COOKIE_LOGOUT !== 'FALSE'
+    : true,
 
   // JWT_DISABLE_AUDIENCE when TRUE will disable the audience claim (aud) from tokens.
   JWT_DISABLE_AUDIENCE: process.env.TALK_JWT_DISABLE_AUDIENCE === 'TRUE',
@@ -102,7 +114,9 @@ const CONFIG = {
 
   // HELMET_CONFIGURATION provides the entrypoint to override options for the
   // helmet middleware used.
-  HELMET_CONFIGURATION: JSON.parse(process.env.TALK_HELMET_CONFIGURATION || '{}'),
+  HELMET_CONFIGURATION: JSON.parse(
+    process.env.TALK_HELMET_CONFIGURATION || '{}'
+  ),
 
   //------------------------------------------------------------------------------
   // External database url's
@@ -121,22 +135,30 @@ const CONFIG = {
 
   // REDIS_CLUSTER_CONFIGURATION contains the json string for the redis cluster
   // configuration.
-  REDIS_CLUSTER_CONFIGURATION: process.env.TALK_REDIS_CLUSTER_CONFIGURATION || '[]',
+  REDIS_CLUSTER_CONFIGURATION:
+    process.env.TALK_REDIS_CLUSTER_CONFIGURATION || '[]',
 
   // REDIS_RECONNECTION_BACKOFF_FACTOR is the factor that will be multiplied
   // against the current attempt count inbetween attempts to connect to redis.
-  REDIS_RECONNECTION_BACKOFF_FACTOR: ms(process.env.TALK_REDIS_RECONNECTION_BACKOFF_FACTOR || '500 ms'),
+  REDIS_RECONNECTION_BACKOFF_FACTOR: ms(
+    process.env.TALK_REDIS_RECONNECTION_BACKOFF_FACTOR || '500 ms'
+  ),
 
   // REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME is the minimum time used to delay
   // before attempting to reconnect to redis.
-  REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME: ms(process.env.TALK_REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME || '1 sec'),
+  REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME: ms(
+    process.env.TALK_REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME || '1 sec'
+  ),
 
   //------------------------------------------------------------------------------
   // Server Config
   //------------------------------------------------------------------------------
 
   // Port to bind to.
-  PORT: process.env.TALK_PORT || process.env.PORT || (process.env.NODE_ENV === 'test' ? '3001' : '3000'),
+  PORT:
+    process.env.TALK_PORT ||
+    process.env.PORT ||
+    (process.env.NODE_ENV === 'test' ? '3001' : '3000'),
 
   // The URL for this Talk Instance as viewable from the outside.
   ROOT_URL: process.env.TALK_ROOT_URL || null,
@@ -160,7 +182,8 @@ const CONFIG = {
   // Cache configuration
   //------------------------------------------------------------------------------
 
-  CACHE_EXPIRY_COMMENT_COUNT: process.env.TALK_CACHE_EXPIRY_COMMENT_COUNT || '1hr',
+  CACHE_EXPIRY_COMMENT_COUNT:
+    process.env.TALK_CACHE_EXPIRY_COMMENT_COUNT || '1hr',
 
   //------------------------------------------------------------------------------
   // Recaptcha configuration
@@ -189,7 +212,8 @@ const CONFIG = {
 
   // DISABLE_AUTOFLAG_SUSPECT_WORDS is true when the suspect words that are
   // matched should not be flagged.
-  DISABLE_AUTOFLAG_SUSPECT_WORDS: process.env.TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS === 'TRUE',
+  DISABLE_AUTOFLAG_SUSPECT_WORDS:
+    process.env.TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS === 'TRUE',
 
   // TRUST_THRESHOLDS defines the thresholds used for automoderation.
   TRUST_THRESHOLDS: process.env.TRUST_THRESHOLDS || 'comment:2,-1;flag:2,-1',
@@ -197,7 +221,8 @@ const CONFIG = {
   // IGNORE_FLAGS_AGAINST_STAFF disables staff members from entering the
   // reported queue from comments after this was enabled and from reports
   // against the staff members user account.
-  IGNORE_FLAGS_AGAINST_STAFF: process.env.TALK_DISABLE_IGNORE_FLAGS_AGAINST_STAFF !== 'TRUE',
+  IGNORE_FLAGS_AGAINST_STAFF:
+    process.env.TALK_DISABLE_IGNORE_FLAGS_AGAINST_STAFF !== 'TRUE',
 };
 
 //==============================================================================
@@ -224,7 +249,9 @@ if (CONFIG.JWT_SECRETS) {
 } else if (!CONFIG.JWT_SECRET) {
   if (process.env.NODE_ENV === 'test') {
     if (!CONFIG.JWT_ALG.startsWith('HS')) {
-      throw new Error('Providing a asymmetric signing/verfying algorithm without a corresponding secret is not permitted');
+      throw new Error(
+        'Providing a asymmetric signing/verfying algorithm without a corresponding secret is not permitted'
+      );
     }
 
     CONFIG.JWT_SECRET = 'keyboard cat';
@@ -253,7 +280,12 @@ if (CONFIG.JWT_COOKIE_NAMES) {
 }
 
 // Add in the default cookie names and strip duplicates.
-CONFIG.JWT_COOKIE_NAMES = uniq(CONFIG.JWT_COOKIE_NAMES.concat([CONFIG.JWT_COOKIE_NAME, CONFIG.JWT_SIGNING_COOKIE_NAME]));
+CONFIG.JWT_COOKIE_NAMES = uniq(
+  CONFIG.JWT_COOKIE_NAMES.concat([
+    CONFIG.JWT_COOKIE_NAME,
+    CONFIG.JWT_SIGNING_COOKIE_NAME,
+  ])
+);
 
 //------------------------------------------------------------------------------
 // External database url's
@@ -275,17 +307,25 @@ if (process.env.NODE_ENV === 'test' && !CONFIG.REDIS_URL) {
 // REDIS_CLUSTER_CONFIGURATION should be parsed when the cluster mode !== none.
 if (CONFIG.REDIS_CLUSTER_MODE === 'CLUSTER') {
   try {
-    CONFIG.REDIS_CLUSTER_CONFIGURATION = JSON.parse(CONFIG.REDIS_CLUSTER_CONFIGURATION);
+    CONFIG.REDIS_CLUSTER_CONFIGURATION = JSON.parse(
+      CONFIG.REDIS_CLUSTER_CONFIGURATION
+    );
   } catch (err) {
-    throw new Error('TALK_REDIS_CLUSTER_CONFIGURATION is not valid JSON, see https://github.com/luin/ioredis#cluster for valid syntax of the list of cluster nodes');
+    throw new Error(
+      'TALK_REDIS_CLUSTER_CONFIGURATION is not valid JSON, see https://github.com/luin/ioredis#cluster for valid syntax of the list of cluster nodes'
+    );
   }
 
   if (!Array.isArray(CONFIG.REDIS_CLUSTER_CONFIGURATION)) {
-    throw new Error('TALK_REDIS_CLUSTER_MODE is CLUSTER, but the TALK_REDIS_CLUSTER_CONFIGURATION is invalid, see https://github.com/luin/ioredis#cluster for valid syntax of the list of cluster nodes');
+    throw new Error(
+      'TALK_REDIS_CLUSTER_MODE is CLUSTER, but the TALK_REDIS_CLUSTER_CONFIGURATION is invalid, see https://github.com/luin/ioredis#cluster for valid syntax of the list of cluster nodes'
+    );
   }
 
   if (CONFIG.REDIS_CLUSTER_CONFIGURATION.length === 0) {
-    throw new Error('TALK_REDIS_CLUSTER_CONFIGURATION must have at least one node specified in the cluster, see https://github.com/luin/ioredis#cluster for valid syntax of the list of cluster nodes');
+    throw new Error(
+      'TALK_REDIS_CLUSTER_CONFIGURATION must have at least one node specified in the cluster, see https://github.com/luin/ioredis#cluster for valid syntax of the list of cluster nodes'
+    );
   }
 }
 
@@ -300,28 +340,14 @@ CONFIG.REDIS_CLIENT_CONFIG = JSON.parse(CONFIG.REDIS_CLIENT_CONFIG);
  * This is true when the recaptcha secret is provided and the Recaptcha feature
  * is to be enabled.
  */
-CONFIG.RECAPTCHA_ENABLED =
-  CONFIG.RECAPTCHA_SECRET &&
-  CONFIG.RECAPTCHA_SECRET.length > 0 &&
-  CONFIG.RECAPTCHA_PUBLIC &&
-  CONFIG.RECAPTCHA_PUBLIC.length > 0;
+CONFIG.RECAPTCHA_ENABLED = CONFIG.RECAPTCHA_SECRET && CONFIG.RECAPTCHA_PUBLIC;
 
-debug(`reCAPTCHA is ${CONFIG.RECAPTCHA_ENABLED ? 'enabled' : 'disabled, required config is not present'}`);
-
-//------------------------------------------------------------------------------
-// SMTP Server configuration
-//------------------------------------------------------------------------------
-
-CONFIG.EMAIL_ENABLED =
-  CONFIG.SMTP_FROM_ADDRESS &&
-  CONFIG.SMTP_FROM_ADDRESS.length > 0 &&
-  CONFIG.SMTP_USERNAME &&
-  CONFIG.SMTP_USERNAME.length > 0 &&
-  CONFIG.SMTP_PASSWORD &&
-  CONFIG.SMTP_PASSWORD.length > 0 &&
-  CONFIG.SMTP_HOST &&
-  CONFIG.SMTP_HOST.length > 0;
-
-debug(`Email is ${CONFIG.EMAIL_ENABLED ? 'enabled' : 'disabled, required config is not present'}`);
+debug(
+  `reCAPTCHA is ${
+    CONFIG.RECAPTCHA_ENABLED
+      ? 'enabled'
+      : 'disabled, required config is not present'
+  }`
+);
 
 module.exports = CONFIG;
diff --git a/docs/_config.yml b/docs/_config.yml
index ce28d72c0..6bc934521 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -21,7 +21,7 @@ url: "https://coralproject.github.io" # the base hostname & protocol for your si
 google_analytics: UA-73335347-5
 versions:
   node: 8+
-  yarn: 1.0.1+
+  yarn: 1.3.2+
   mongodb: 3.2+
   redis: 3.2.5+
   docker: 17.06.2+
diff --git a/docs/_data/nav.yaml b/docs/_data/nav.yaml
index 9138d6603..c765b0fb7 100644
--- a/docs/_data/nav.yaml
+++ b/docs/_data/nav.yaml
@@ -41,3 +41,7 @@ items:
     children:
       - title: FAQ
         url: /faq/
+  - title: Migrating
+    children:
+      - title: Migrating to v4.0.0
+        url: /migration/4/
diff --git a/docs/_docs/01-01-talk-quickstart.md b/docs/_docs/01-01-talk-quickstart.md
index 811bfe5ed..e3c12cc10 100644
--- a/docs/_docs/01-01-talk-quickstart.md
+++ b/docs/_docs/01-01-talk-quickstart.md
@@ -147,7 +147,7 @@ will definitely not work unless you change those values as well.
 You can now start the application by running:
 
 ```bash
-yarn dev-start
+yarn watch:server
 ```
 
 Continue onto the [Running](#running) section for details on how to complete the
diff --git a/docs/_docs/01-02-installation-from-docker.md b/docs/_docs/01-02-installation-from-docker.md
index fc699f127..3921a368f 100644
--- a/docs/_docs/01-02-installation-from-docker.md
+++ b/docs/_docs/01-02-installation-from-docker.md
@@ -121,7 +121,7 @@ your containerized infrastructure. The versioning of our Docker tags as well
 lets you do something like:
 
 ```docker
-FROM coralproject/talk:3.5-onbuild
+FROM coralproject/talk:4.0-onbuild
 ```
 
-Which would pin your image to `3.5` release's.
\ No newline at end of file
+Which would pin your image to `4.0` release's.
\ No newline at end of file
diff --git a/docs/_docs/01-03-installation-from-source.md b/docs/_docs/01-03-installation-from-source.md
index 646a100a9..d6799df15 100644
--- a/docs/_docs/01-03-installation-from-source.md
+++ b/docs/_docs/01-03-installation-from-source.md
@@ -73,7 +73,7 @@ values as well.
 You can now start the application by running:
 
 ```bash
-yarn dev-start
+yarn watch:server
 ```
 
 At this stage, you should refer to the [configuration]({{ "/configuration/" | relative_url }}) for
diff --git a/docs/_docs/02-01-required-configuration.md b/docs/_docs/02-01-required-configuration.md
index dc09a1707..da235ed90 100644
--- a/docs/_docs/02-01-required-configuration.md
+++ b/docs/_docs/02-01-required-configuration.md
@@ -8,7 +8,7 @@ Talk requires configuration in order to customize the installation. The default
 behavior is to load it's configuration from the environment, following the
 [12 Factor App Manifesto](https://12factor.net/){:target="_blank"}.
 In development, you can specify configuration in a file named `.env` and it will
-be loaded into the environment when you run `yarn dev-start`.
+be loaded into the environment when you run `yarn watch:server`.
 
 The following variables do not have defaults, and are **required** to start your
 instance of Talk:
diff --git a/docs/_docs/02-02-advanced-configuration.md b/docs/_docs/02-02-advanced-configuration.md
index d39fab4b8..e985f8f20 100644
--- a/docs/_docs/02-02-advanced-configuration.md
+++ b/docs/_docs/02-02-advanced-configuration.md
@@ -8,7 +8,7 @@ Talk requires configuration in order to customize the installation. The default
 behavior is to load its configuration from the environment, following the
 [12 Factor App Manifesto](https://12factor.net/){:target="_blank"}.
 In development, you can specify configuration in a file named `.env` and it will
-be loaded into the environment when you run `yarn dev-start`.
+be loaded into the environment when you run `yarn watch:server`.
 
 The following variables have defaults, and are _optional_ to start your
 instance of Talk:
@@ -467,3 +467,23 @@ same as any other user in the system. (Default `FALSE`)
 The prefix for the subject of emails sent. An email with the specified subject
 of `Email Confirmation` would then be sent as `[Talk] Email Confirmation`.
 (Default `[Talk]`)
+
+## DISABLE_CREATE_MONGO_INDEXES
+
+When `TRUE`, Talk will not attempt to create any indices. This is recommended
+for production systems that have ran Talk at least once during setup while unset
+or set to `FALSE`.
+
+## TALK_SETTINGS_CACHE_TIME
+
+The duration of time that the settings object will be kept in the Redis cache,
+parsed by [ms](https://www.npmjs.com/package/ms){:target="_blank"}. (Default
+`1hr`)
+
+## APOLLO_ENGINE_KEY
+
+Used to set the key for use with
+[Apollo Engine](https://www.apollographql.com/engine/){:target="_blank"} for
+tracing of GraphQL requests.
+
+**Note: Apollo Engine is a premium service, charges may apply.**
\ No newline at end of file
diff --git a/docs/_docs/06-01-migrating-4.md b/docs/_docs/06-01-migrating-4.md
new file mode 100644
index 000000000..b66921cf0
--- /dev/null
+++ b/docs/_docs/06-01-migrating-4.md
@@ -0,0 +1,80 @@
+---
+title: Migrating to v4.0.0
+permalink: /migration/4/
+---
+
+Since our `v3.*` release, this is the most significant set of changes introduced
+into Talk so far, as a major database migration and template change are both required to
+run it.
+
+## Dependencies
+
+If you are running via source, once you update your code, it's always important
+to run the following in order to update your dependencies:
+
+```bash
+yarn
+```
+
+If you are running via Docker, you just have to replace your version number with
+the desired version from Dockerhub.
+
+## Database Migrations
+
+We have introduced several new fields that require the database to be modified.
+To run these migrations, ensure that all nodes of Talk are stopped. It is not
+well defined what will happen if a Talk application begins writing data mid
+migration.
+
+Running the following will start the migration process:
+
+```bash
+./bin/cli migration run
+```
+This will prompt you to perform a database backup before starting the migration
+process. Data loss is entirely possible otherwise.
+{: .code-aside}
+
+The migration itself may take some time to complete, as we're reformatting
+documents rather than performing a nice table alter. If the process crashes
+during the migration, simply re-run it. The migration operations are designed
+to act atomically, and be idempotent to documents already updated.
+
+## Database Verifications
+
+In `v3.*`, we introduced the concept of "verifying the database". Some of our
+operations update cached values that live along side the original document to
+improve performance. Running the cli command for verifying the database's cache
+ensures that all the cached values are up to date.
+
+Running the following will start the database verification process:
+
+```bash
+./bin/cli verify db --fix
+```
+You can notice the `--fix` option, without it, the tool should instead perform
+a dry run of the operations it intends to perform.
+{: .code-aside}
+
+This process, like the migration process, should take some time to complete on
+large databases.
+
+Once you have updated your databases, that's all you have to do! Talk should now
+function even better and faster with all the new features we poured into v4.0.0!
+
+## Template Change
+
+In `v4.0.0`, we introduced extensive support for compressing our javascript
+bundles. To support this, we had to modify our routing. All static files are now
+served out of a `/static` prefix, so you will have to change your embed code:
+
+**Old:**
+
+```https://your-talk-url.com/embed.js```
+
+**New:**
+
+```https://your-talk-url.com/static/embed.js```
+
+This should be changed in your embed code on the site where you are embedding
+Talk.
diff --git a/errors.js b/errors.js
index cfabf5ec2..868be0488 100644
--- a/errors.js
+++ b/errors.js
@@ -5,7 +5,7 @@
 class ExtendableError {
   constructor(message = null) {
     this.message = message;
-    this.stack = (new Error(message)).stack;
+    this.stack = new Error(message).stack;
   }
 }
 
@@ -15,7 +15,11 @@ class ExtendableError {
  * consistently.
  */
 class APIError extends ExtendableError {
-  constructor(message, {status = 500, translation_key = null}, metadata = {}) {
+  constructor(
+    message,
+    { status = 500, translation_key = null },
+    metadata = {}
+  ) {
     super(message);
 
     this.status = status;
@@ -28,73 +32,93 @@ class APIError extends ExtendableError {
       message: this.message,
       status: this.status,
       translation_key: this.translation_key,
-      metadata: this.metadata
+      metadata: this.metadata,
     };
   }
 }
 
 // ErrPasswordTooShort is returned when the password length is too short.
-const ErrPasswordTooShort = new APIError('password must be at least 8 characters', {
-  status: 400,
-  translation_key: 'PASSWORD_LENGTH'
-});
+const ErrPasswordTooShort = new APIError(
+  'password must be at least 8 characters',
+  {
+    status: 400,
+    translation_key: 'PASSWORD_LENGTH',
+  }
+);
 
 const ErrMissingEmail = new APIError('email is required', {
   translation_key: 'EMAIL_REQUIRED',
-  status: 400
+  status: 400,
 });
 
 const ErrMissingPassword = new APIError('password is required', {
   translation_key: 'PASSWORD_REQUIRED',
-  status: 400
+  status: 400,
 });
 
 const ErrEmailTaken = new APIError('Email address already in use', {
   translation_key: 'EMAIL_IN_USE',
-  status: 400
+  status: 400,
 });
 
 const ErrUsernameTaken = new APIError('Username already in use', {
   translation_key: 'USERNAME_IN_USE',
-  status: 400
+  status: 400,
 });
 
-const ErrSpecialChars = new APIError('No special characters are allowed in a username', {
-  translation_key: 'NO_SPECIAL_CHARACTERS',
-  status: 400
-});
+const ErrSameUsernameProvided = new APIError(
+  'Username provided for change is the same as current',
+  {
+    translation_key: 'SAME_USERNAME_PROVIDED',
+    status: 400,
+  }
+);
 
-const ErrMissingUsername = new APIError('A username is required to create a user', {
-  translation_key: 'USERNAME_REQUIRED',
-  status: 400
-});
+const ErrSpecialChars = new APIError(
+  'No special characters are allowed in a username',
+  {
+    translation_key: 'NO_SPECIAL_CHARACTERS',
+    status: 400,
+  }
+);
+
+const ErrMissingUsername = new APIError(
+  'A username is required to create a user',
+  {
+    translation_key: 'USERNAME_REQUIRED',
+    status: 400,
+  }
+);
 
 // ErrEmailVerificationToken is returned in the event that the password reset is requested
 // without a token.
 const ErrEmailVerificationToken = new APIError('token is required', {
   translation_key: 'EMAIL_VERIFICATION_TOKEN_INVALID',
-  status: 400
+  status: 400,
 });
 
 // ErrPasswordResetToken is returned in the event that the password reset is requested
 // without a token.
 const ErrPasswordResetToken = new APIError('token is required', {
   translation_key: 'PASSWORD_RESET_TOKEN_INVALID',
-  status: 400
+  status: 400,
 });
 
 // ErrAssetCommentingClosed is returned when a comment or action is attempted on
 // a stream where commenting has been closed.
 class ErrAssetCommentingClosed extends APIError {
   constructor(closedMessage = null) {
-    super('asset commenting is closed', {
-      status: 400,
-      translation_key: 'COMMENTING_CLOSED'
-    }, {
-
-      // Include the closedMessage in the metadata piece of the error.
-      closedMessage
-    });
+    super(
+      'asset commenting is closed',
+      {
+        status: 400,
+        translation_key: 'COMMENTING_CLOSED',
+      },
+      {
+        // Include the closedMessage in the metadata piece of the error.
+        closedMessage,
+      }
+    );
   }
 }
 
@@ -104,12 +128,16 @@ class ErrAssetCommentingClosed extends APIError {
  */
 class ErrAuthentication extends APIError {
   constructor(message = null) {
-    super('authentication error occured', {
-      status: 401,
-      translation_key: 'AUTHENTICATION'
-    }, {
-      message
-    });
+    super(
+      'authentication error occured',
+      {
+        status: 401,
+        translation_key: 'AUTHENTICATION',
+      },
+      {
+        message,
+      }
+    );
   }
 }
 
@@ -118,98 +146,113 @@ class ErrAuthentication extends APIError {
  */
 class ErrAlreadyExists extends APIError {
   constructor(existing = null) {
-    super('resource already exists', {
-      translation_key: 'ALREADY_EXISTS',
-      status: 409
-    }, {
-      existing
-    });
+    super(
+      'resource already exists',
+      {
+        translation_key: 'ALREADY_EXISTS',
+        status: 409,
+      },
+      {
+        existing,
+      }
+    );
   }
 }
 
 // ErrContainsProfanity is returned in the event that the middleware detects
 // profanity/wordlisted words in the payload.
-const ErrContainsProfanity = new APIError('This username contains elements which are not permitted in our community. If you think this is in error, please contact us or try again.', {
-  translation_key: 'PROFANITY_ERROR',
-  status: 400
-});
+const ErrContainsProfanity = new APIError(
+  'This username contains elements which are not permitted in our community. If you think this is in error, please contact us or try again.',
+  {
+    translation_key: 'PROFANITY_ERROR',
+    status: 400,
+  }
+);
 
 const ErrNotFound = new APIError('not found', {
   translation_key: 'NOT_FOUND',
-  status: 404
+  status: 404,
 });
 
 const ErrInvalidAssetURL = new APIError('asset_url is invalid', {
   translation_key: 'INVALID_ASSET_URL',
-  status: 400
+  status: 400,
 });
 
 // ErrNotAuthorized is an error that is returned in the event an operation is
 // deemed not authorized.
 const ErrNotAuthorized = new APIError('not authorized', {
   translation_key: 'NOT_AUTHORIZED',
-  status: 401
+  status: 401,
 });
 
 // ErrSettingsNotInit is returned when the settings are required but not
 // initialized.
-const ErrSettingsNotInit = new Error('settings not initialized, run `./bin/cli setup` to setup the application first');
+const ErrSettingsNotInit = new Error(
+  'Talk is currently not setup. Please proceed to our webinstaller at $ROOT_URL/admin/install or run ./bin/cli-setup. Visit https://coralproject.github.io/talk/ for more information on installation and configuration instructions'
+);
 
 // ErrSettingsInit is returned when the setup endpoint is hit and we are already
 // initialized.
 const ErrSettingsInit = new APIError('settings are already initialized', {
-  status: 500
+  status: 500,
 });
 
 // ErrInstallLock is returned when the setup endpoint is hit and the install
 // lock is present.
 const ErrInstallLock = new APIError('install lock active', {
-  status: 500
+  status: 500,
 });
 
 // ErrPermissionUpdateUsername is returned when the user does not have permission to update their username.
-const ErrPermissionUpdateUsername = new APIError('You do not have permission to update your username.', {
-  translation_key: 'EDIT_USERNAME_NOT_AUTHORIZED',
-  status: 403
-});
-
-// ErrSameUsernameProvided is returned when attempting to update a username to the same username.
-const ErrSameUsernameProvided = new APIError('Same username provided.', {
-  translation_key: 'SAME_USERNAME_PROVIDED',
-  status: 400
-});
+const ErrPermissionUpdateUsername = new APIError(
+  'You do not have permission to update your username.',
+  {
+    translation_key: 'EDIT_USERNAME_NOT_AUTHORIZED',
+    status: 403,
+  }
+);
 
 // ErrLoginAttemptMaximumExceeded is returned when the login maximum is exceeded.
-const ErrLoginAttemptMaximumExceeded = new APIError('You have made too many incorrect password attempts.', {
-  translation_key: 'LOGIN_MAXIMUM_EXCEEDED',
-  status: 429
-});
+const ErrLoginAttemptMaximumExceeded = new APIError(
+  'You have made too many incorrect password attempts.',
+  {
+    translation_key: 'LOGIN_MAXIMUM_EXCEEDED',
+    status: 429,
+  }
+);
 
 // ErrEditWindowHasEnded is returned when the edit window has expired.
 const ErrEditWindowHasEnded = new APIError('Edit window is over', {
   translation_key: 'EDIT_WINDOW_ENDED',
-  status: 403
+  status: 403,
 });
 
 // ErrCommentTooShort is returned when the comment is too short.
 const ErrCommentTooShort = new APIError('Comment was too short', {
   translation_key: 'COMMENT_TOO_SHORT',
-  status: 400
+  status: 400,
 });
 
 // ErrAssetURLAlreadyExists is returned when a rename operation is requested
 // but an asset already exists with the new url.
-const ErrAssetURLAlreadyExists = new APIError('Asset URL already exists, cannot rename', {
-  translation_key: 'ASSET_URL_ALREADY_EXISTS',
-  status: 409
-});
+const ErrAssetURLAlreadyExists = new APIError(
+  'Asset URL already exists, cannot rename',
+  {
+    translation_key: 'ASSET_URL_ALREADY_EXISTS',
+    status: 409,
+  }
+);
 
 // ErrNotVerified is returned when a user tries to login with valid credentials
 // but their email address is not yet verified.
-const ErrNotVerified = new APIError('User does not have a verified email address', {
-  translation_key: 'EMAIL_NOT_VERIFIED',
-  status: 401,
-});
+const ErrNotVerified = new APIError(
+  'User does not have a verified email address',
+  {
+    translation_key: 'EMAIL_NOT_VERIFIED',
+    status: 401,
+  }
+);
 
 const ErrMaxRateLimit = new APIError('Rate limit exeeded', {
   translation_key: 'RATE_LIMIT_EXCEEDED',
@@ -247,10 +290,10 @@ module.exports = {
   ErrNotVerified,
   ErrPasswordTooShort,
   ErrPermissionUpdateUsername,
-  ErrSameUsernameProvided,
   ErrSettingsInit,
   ErrSettingsNotInit,
   ErrSpecialChars,
   ErrUsernameTaken,
+  ErrSameUsernameProvided,
   ExtendableError,
 };
diff --git a/graph/connectors.js b/graph/connectors.js
index c71942bc4..a27b9d38c 100644
--- a/graph/connectors.js
+++ b/graph/connectors.js
@@ -15,7 +15,7 @@ const Actions = require('../services/actions');
 const Assets = require('../services/assets');
 const Cache = require('../services/cache');
 const Comments = require('../services/comments');
-const DomainList = require('../services/domainlist');
+const DomainList = require('../services/domain_list');
 const I18n = require('../services/i18n');
 const Jwt = require('../services/jwt');
 const Karma = require('../services/karma');
@@ -79,9 +79,12 @@ const connectors = {
   },
 };
 
-module.exports = Plugins.get('server', 'connectors').reduce((defaultConnectors, {plugin, connectors: pluginConnectors}) => {
-  debug(`adding plugin '${plugin.name}'`);
+module.exports = Plugins.get('server', 'connectors').reduce(
+  (defaultConnectors, { plugin, connectors: pluginConnectors }) => {
+    debug(`adding plugin '${plugin.name}'`);
 
-  // Merge in the plugin connectors.
-  return merge(defaultConnectors, pluginConnectors);
-}, connectors);
+    // Merge in the plugin connectors.
+    return merge(defaultConnectors, pluginConnectors);
+  },
+  connectors
+);
diff --git a/graph/context.js b/graph/context.js
index e894c1534..35d84dd82 100644
--- a/graph/context.js
+++ b/graph/context.js
@@ -13,10 +13,12 @@ const debug = require('debug')('talk:graph:context');
  * level functions all need the context reference.
  * @type {Array}
  */
-const contextPlugins = plugins.get('server', 'context').map(({plugin, context}) => {
-  debug(`added plugin '${plugin.name}'`);
-  return {context};
-});
+const contextPlugins = plugins
+  .get('server', 'context')
+  .map(({ plugin, context }) => {
+    debug(`added plugin '${plugin.name}'`);
+    return { context };
+  });
 
 /**
  * This should iterate over the passed in plugins and load them all with the
@@ -24,18 +26,19 @@ const contextPlugins = plugins.get('server', 'context').map(({plugin, context})
  * @return {Object} the saturated plugins object
  */
 const decorateContextPlugins = (context, contextPlugins) => {
-
   // For each of the plugins, we execute with the context to get the context
   // based plugin. We then merge that into an object for the plugin. Once the
   // plugin is assembled, we merge that object with all the other objects
   // provided from the other plugins.
-  return merge(...contextPlugins.map((plugin) => {
-    return Object.keys(plugin.context).reduce((services, serviceName) => {
-      services[serviceName] = plugin.context[serviceName](context);
+  return merge(
+    ...contextPlugins.map(plugin => {
+      return Object.keys(plugin.context).reduce((services, serviceName) => {
+        services[serviceName] = plugin.context[serviceName](context);
 
-      return services;
-    }, {});
-  }));
+        return services;
+      }, {});
+    })
+  );
 };
 
 /**
@@ -43,7 +46,6 @@ const decorateContextPlugins = (context, contextPlugins) => {
  */
 class Context {
   constructor(parent) {
-
     // Generate a new context id for the request if the parent doesn't provide
     // one.
     this.id = parent.id || uuid.v4();
@@ -71,6 +73,18 @@ class Context {
     // Bind the parent context.
     this.parent = parent;
   }
+
+  /**
+   *
+   */
+  static forSystem() {
+    const { models: { User } } = connectors;
+
+    // Create the system user.
+    const user = new User({ system: true });
+
+    return new Context({ user });
+  }
 }
 
 module.exports = Context;
diff --git a/graph/errorHandler.js b/graph/errorHandler.js
index d7176f16a..89cd5d8a2 100644
--- a/graph/errorHandler.js
+++ b/graph/errorHandler.js
@@ -1,23 +1,21 @@
-const {forEachField} = require('./utils');
-const {maskErrors} = require('graphql-errors');
+const { forEachField } = require('./utils');
+const { maskErrors } = require('graphql-errors');
 const errors = require('../errors');
-const {Error: {ValidationError}} = require('mongoose');
+const { Error: { ValidationError } } = require('mongoose');
 
 // If an APIError happens in a mutation, then respond with `{errors: Array}`
 // according to the schema.
-const decorateWithMutationErrorHandler = (field) => {
+const decorateWithMutationErrorHandler = field => {
   const fieldResolver = field.resolve;
   field.resolve = async (obj, args, ctx, info) => {
     try {
       return await fieldResolver(obj, args, ctx, info);
-    }
-    catch(err) {
+    } catch (err) {
       if (err instanceof errors.APIError) {
         return {
-          errors: [err]
+          errors: [err],
         };
       } else if (err instanceof ValidationError) {
-
         // TODO: wrap this with one of our internal errors.
         throw err;
       }
@@ -32,9 +30,8 @@ const decorateWithMutationErrorHandler = (field) => {
  * @param  {GraphQLSchema} schema the schema to decorate
  * @return {void}
  */
-const decorateWithErrorHandler = (schema) => {
+const decorateWithErrorHandler = schema => {
   forEachField(schema, (field, typeName) => {
-
     // Handle mutation errors.
     if (typeName === 'RootMutation') {
       decorateWithMutationErrorHandler(field);
@@ -42,7 +39,6 @@ const decorateWithErrorHandler = (schema) => {
 
     // If we are in production mode, don't show server errors to the front end.
     if (process.env.NODE_ENV === 'production') {
-
       // Mask errors that are thrown if we are in a production environment.
       maskErrors(field);
     }
diff --git a/graph/hooks.js b/graph/hooks.js
index 3a34be0bb..e9de7bdfb 100644
--- a/graph/hooks.js
+++ b/graph/hooks.js
@@ -1,4 +1,4 @@
-const {forEachField} = require('./utils');
+const { forEachField } = require('./utils');
 const debug = require('debug')('talk:graph:schema');
 const Joi = require('joi');
 
@@ -11,8 +11,7 @@ const Joi = require('joi');
  * and returns it as the result, or if it's a function, returns the result
  * of calling that function.
  */
-const defaultResolveFn = (source, args, context, {fieldName}) => {
-
+const defaultResolveFn = (source, args, context, { fieldName }) => {
   // ensure source is a value for which property access is acceptable.
   if (typeof source === 'object' || typeof source === 'function') {
     const property = source[fieldName];
@@ -28,7 +27,6 @@ const defaultResolveFn = (source, args, context, {fieldName}) => {
  * default type in the form of `Default${typeName}`.
  */
 const decorateResolveFunction = (field, typeName, fieldName, post) => {
-
   // Cache the original resolverType function.
   let resolveType = field.resolveType;
 
@@ -53,7 +51,6 @@ const decorateResolveFunction = (field, typeName, fieldName, post) => {
 
   // This only needs to do something if post hooks are defined.
   if (post.length === 0) {
-
     // Set the default on the resolveType function.
     field.resolveType = defaultResolveFn;
 
@@ -61,7 +58,11 @@ const decorateResolveFunction = (field, typeName, fieldName, post) => {
   }
 
   // Ensure it matches the format we expect.
-  Joi.assert(post, Joi.array().items(Joi.func().maxArity(3)), `invalid post hooks were found for ${typeName}.${fieldName}`);
+  Joi.assert(
+    post,
+    Joi.array().items(Joi.func().maxArity(3)),
+    `invalid post hooks were found for ${typeName}.${fieldName}`
+  );
 
   // Return the function to handle the resolveType hooks.
   field.resolveType = (obj, context, info) => {
@@ -70,7 +71,11 @@ const decorateResolveFunction = (field, typeName, fieldName, post) => {
     // Only if a previous resolver was unable to resolve the field type do we
     // progress to the hooks (in order!) to resolve the field name until we
     // have resolved it.
-    if (typeof type !== 'undefined' && type != null && type !== defaultResolveType) {
+    if (
+      typeof type !== 'undefined' &&
+      type != null &&
+      type !== defaultResolveType
+    ) {
       return type;
     }
 
@@ -95,124 +100,151 @@ const decorateResolveFunction = (field, typeName, fieldName, post) => {
  * @param  {Array}         hooks  hooks to apply to the schema
  * @return {void}
  */
-const decorateWithHooks = (schema, hooks) => forEachField(schema, (field, typeName, fieldName, isResolveType = false) => {
+const decorateWithHooks = (schema, hooks) =>
+  forEachField(
+    schema,
+    (field, typeName, fieldName, isResolveType = false) => {
+      // Pull out the pre/post hooks from the available hooks.
+      const { pre, post } = hooks
 
-  // Pull out the pre/post hooks from the available hooks.
-  const {
-    pre,
-    post
-  } = hooks
+        // Only grab hooks that are associated with thie field and typeName.
+        .filter(
+          ({ hooks }) => typeName in hooks && fieldName in hooks[typeName]
+        )
 
-    // Only grab hooks that are associated with thie field and typeName.
-    .filter(({hooks}) => (typeName in hooks) && (fieldName in hooks[typeName]))
+        // Grab the hooks we need.
+        .map(({ plugin, hooks }) => ({
+          plugin,
+          hooks: hooks[typeName][fieldName],
+        }))
 
-    // Grab the hooks we need.
-    .map(({plugin, hooks}) => ({plugin, hooks: hooks[typeName][fieldName]}))
+        // Combine the pre/post hooks from each plugin into an array we can
+        // execute.
+        .reduce(
+          (acc, { plugin, hooks }) => {
+            // Itterate over the hooks on the fields and look at it with a switch
+            // block to check for misconfigured plugins.
+            Object.keys(hooks).forEach(hook => {
+              switch (hook) {
+                case 'pre':
+                  Joi.assert(hooks.pre, Joi.func().maxArity(4));
 
-    // Combine the pre/post hooks from each plugin into an array we can
-    // execute.
-    .reduce((acc, {plugin, hooks}) => {
+                  debug(
+                    `adding pre hook to resolver ${typeName}.${fieldName} from plugin '${
+                      plugin.name
+                    }'`
+                  );
 
-      // Itterate over the hooks on the fields and look at it with a switch
-      // block to check for misconfigured plugins.
-      Object.keys(hooks).forEach((hook) => {
-        switch (hook) {
-        case 'pre':
-          Joi.assert(hooks.pre, Joi.func().maxArity(4));
+                  if (typeof hooks.pre !== 'function') {
+                    throw new Error(
+                      `expected ${hook} hook on resolver ${typeName}.${fieldName} from plugin '${
+                        plugin.name
+                      }' to be a function, it was a '${typeof hooks[hook]}'`
+                    );
+                  }
 
-          debug(`adding pre hook to resolver ${typeName}.${fieldName} from plugin '${plugin.name}'`);
+                  acc.pre.push(hooks.pre);
+                  break;
+                case 'post':
+                  Joi.assert(hooks.pre, Joi.func().maxArity(5));
 
-          if (typeof hooks.pre !== 'function') {
-            throw new Error(`expected ${hook} hook on resolver ${typeName}.${fieldName} from plugin '${plugin.name}' to be a function, it was a '${typeof hooks[hook]}'`);
+                  debug(
+                    `adding post hook to resolver ${typeName}.${fieldName} from plugin '${
+                      plugin.name
+                    }'`
+                  );
+
+                  if (typeof hooks.post !== 'function') {
+                    throw new Error(
+                      `expected ${hook} hook on resolver ${typeName}.${fieldName} from plugin '${
+                        plugin.name
+                      }' to be a function, it was a '${typeof hooks[hook]}'`
+                    );
+                  }
+
+                  acc.post.unshift(hooks.post);
+                  break;
+                default:
+                  throw new Error(
+                    `invalid hook '${hook}' on resolver ${typeName}.${fieldName} from plugin '${
+                      plugin.name
+                    }'`
+                  );
+              }
+            });
+
+            return acc;
+          },
+          {
+            pre: [],
+            post: [],
           }
+        );
 
-          acc.pre.push(hooks.pre);
-          break;
-        case 'post':
-          Joi.assert(hooks.pre, Joi.func().maxArity(5));
-
-          debug(`adding post hook to resolver ${typeName}.${fieldName} from plugin '${plugin.name}'`);
-
-          if (typeof hooks.post !== 'function') {
-            throw new Error(`expected ${hook} hook on resolver ${typeName}.${fieldName} from plugin '${plugin.name}' to be a function, it was a '${typeof hooks[hook]}'`);
-          }
-
-          acc.post.unshift(hooks.post);
-          break;
-        default:
-          throw new Error(`invalid hook '${hook}' on resolver ${typeName}.${fieldName} from plugin '${plugin.name}'`);
+      // If this is a resolve type, we need to do some specific things to handle
+      // this type of field.
+      if (isResolveType) {
+        // Warn if we have any pre hooks.
+        if (pre.length !== 0) {
+          throw new Error(
+            `invalid pre hooks were found for ${typeName}.${fieldName}, only post hooks are supported on the __resolveType hook`
+          );
         }
-      });
 
-      return acc;
-    }, {
-      pre: [],
-      post: []
-    });
-
-  // If this is a resolve type, we need to do some specific things to handle
-  // this type of field.
-  if (isResolveType) {
-
-    // Warn if we have any pre hooks.
-    if (pre.length !== 0) {
-      throw new Error(`invalid pre hooks were found for ${typeName}.${fieldName}, only post hooks are supported on the __resolveType hook`);
-    }
-
-    // Decorate the resolve function on the field with the new resolveType func.
-    decorateResolveFunction(field, typeName, fieldName, post);
-    return;
-  }
-
-  // If we have no hooks to add here, don't try to modify anything.
-  if (pre.length === 0 && post.length === 0) {
-    return;
-  }
-
-  // Cache the original resolve function, this emulates the beheviour found in
-  // graphql-tools: https://github.com/apollographql/graphql-tools/blob/6e9cc124b10d673448386041e6c3d058bc205a02/src/schemaGenerator.ts#L423-L425
-  let resolve = field.resolve;
-  if (typeof resolve === 'undefined') {
-    resolve = defaultResolveFn;
-  }
-
-  // Apply our async resolve function which will fire all pre functions (and
-  // wait until they resolve) followed by waiting for the response and then
-  // firing their post hooks. Lastly, we respond with the result of the
-  // original resolver.
-  field.resolve = async (obj, args, context, info) => {
-
-    // Issue all pre hooks before we resolve the field.
-    await Promise.all(pre.map((pre) => pre(obj, args, context, info)));
-
-    // Resolve the field.
-    let result = await resolve(obj, args, context, info);
-
-    // Insure all post hooks after we've resolved the field with the result
-    // passed in as the fifth argument.
-    return await post.reduce(async (result, post) => {
-
-      // Wait for the accumulator to resolve before we continue.
-      result = await result;
-
-      // Check to see if this post function accepts a result, if it does, we
-      // expect that it modifies the result, otherwise, just fire the post hook,
-      // wait till it's done, then move onto the next hook.
-      if (post.length === 5) {
-        return await post(obj, args, context, info, result);
+        // Decorate the resolve function on the field with the new resolveType func.
+        decorateResolveFunction(field, typeName, fieldName, post);
+        return;
       }
 
-      // Wait for the post hook to finish.
-      await post(obj, args, context, info);
+      // If we have no hooks to add here, don't try to modify anything.
+      if (pre.length === 0 && post.length === 0) {
+        return;
+      }
 
-      // Return the result, which we already awaited for before.
-      return result;
-    }, result);
-  };
-}, {
-  includeResolveType: true,
-});
+      // Cache the original resolve function, this emulates the beheviour found in
+      // graphql-tools: https://github.com/apollographql/graphql-tools/blob/6e9cc124b10d673448386041e6c3d058bc205a02/src/schemaGenerator.ts#L423-L425
+      let resolve = field.resolve;
+      if (typeof resolve === 'undefined') {
+        resolve = defaultResolveFn;
+      }
+
+      // Apply our async resolve function which will fire all pre functions (and
+      // wait until they resolve) followed by waiting for the response and then
+      // firing their post hooks. Lastly, we respond with the result of the
+      // original resolver.
+      field.resolve = async (obj, args, context, info) => {
+        // Issue all pre hooks before we resolve the field.
+        await Promise.all(pre.map(pre => pre(obj, args, context, info)));
+
+        // Resolve the field.
+        let result = await resolve(obj, args, context, info);
+
+        // Insure all post hooks after we've resolved the field with the result
+        // passed in as the fifth argument.
+        return await post.reduce(async (result, post) => {
+          // Wait for the accumulator to resolve before we continue.
+          result = await result;
+
+          // Check to see if this post function accepts a result, if it does, we
+          // expect that it modifies the result, otherwise, just fire the post hook,
+          // wait till it's done, then move onto the next hook.
+          if (post.length === 5) {
+            return await post(obj, args, context, info, result);
+          }
+
+          // Wait for the post hook to finish.
+          await post(obj, args, context, info);
+
+          // Return the result, which we already awaited for before.
+          return result;
+        }, result);
+      };
+    },
+    {
+      includeResolveType: true,
+    }
+  );
 
 module.exports = {
-  decorateWithHooks
+  decorateWithHooks,
 };
diff --git a/graph/index.js b/graph/index.js
index 7495c0605..2ccaaea11 100644
--- a/graph/index.js
+++ b/graph/index.js
@@ -1,16 +1,20 @@
 const schema = require('./schema');
 const Context = require('./context');
-const {createSubscriptionManager} = require('./subscriptions');
+const { createSubscriptionManager } = require('./subscriptions');
+const { ENABLE_TRACING } = require('../config');
 
 module.exports = {
-  createGraphOptions: (req) => ({
-
+  createGraphOptions: req => ({
     // Schema is created already, so just include it.
     schema,
 
     // Load in the new context here, this'll create the loaders + mutators for
     // the lifespan of this request.
-    context: new Context(req)
+    context: new Context(req),
+
+    // Tracing request options, needed for Apollo Engine.
+    tracing: ENABLE_TRACING,
+    cacheControl: ENABLE_TRACING,
   }),
-  createSubscriptionManager
+  createSubscriptionManager,
 };
diff --git a/graph/loaders/actions.js b/graph/loaders/actions.js
index 2dd6472a0..96e45b0e3 100644
--- a/graph/loaders/actions.js
+++ b/graph/loaders/actions.js
@@ -9,9 +9,9 @@ const ActionModel = require('../../models/action');
  * Gets actions based on their item id's.
  */
 const genActionsByItemID = (_, item_ids) => {
-  return ActionsService
-    .findByItemIdArray(item_ids)
-    .then(util.arrayJoinBy(item_ids, 'item_id'));
+  return ActionsService.findByItemIdArray(item_ids).then(
+    util.arrayJoinBy(item_ids, 'item_id')
+  );
 };
 
 /**
@@ -20,10 +20,10 @@ const genActionsByItemID = (_, item_ids) => {
  * @param  {Array}  ids     array of id's to get
  * @return {Promise}        resolves to the promises of the requested actions
  */
-const genActionSummariessByItemID = ({user = {}}, item_ids) => {
-  return ActionsService
-    .getActionSummaries(item_ids, user.id)
-    .then(util.arrayJoinBy(item_ids, 'item_id'));
+const genActionSummariessByItemID = ({ user = {} }, item_ids) => {
+  return ActionsService.getActionSummaries(item_ids, user.id).then(
+    util.arrayJoinBy(item_ids, 'item_id')
+  );
 };
 
 /**
@@ -34,7 +34,7 @@ const genActionSummariessByItemID = ({user = {}}, item_ids) => {
  * @return {Promise}            resolves to distinct items actions
  */
 const getItemIdsByActionTypeAndItemType = (_, action_type, item_type) => {
-  return ActionModel.distinct('item_id', {action_type, item_type});
+  return ActionModel.distinct('item_id', { action_type, item_type });
 };
 
 /**
@@ -42,10 +42,13 @@ const getItemIdsByActionTypeAndItemType = (_, action_type, item_type) => {
  * @param  {Object} context the context of the GraphQL request
  * @return {Object}         object of loaders
  */
-module.exports = (context) => ({
+module.exports = context => ({
   Actions: {
-    getByID: new DataLoader((ids) => genActionsByItemID(context, ids)),
-    getSummariesByItemID: new DataLoader((ids) => genActionSummariessByItemID(context, ids)),
-    getByTypes: ({action_type, item_type}) => getItemIdsByActionTypeAndItemType(context, action_type, item_type)
-  }
+    getByID: new DataLoader(ids => genActionsByItemID(context, ids)),
+    getSummariesByItemID: new DataLoader(ids =>
+      genActionSummariessByItemID(context, ids)
+    ),
+    getByTypes: ({ action_type, item_type }) =>
+      getItemIdsByActionTypeAndItemType(context, action_type, item_type),
+  },
 });
diff --git a/graph/loaders/assets.js b/graph/loaders/assets.js
index 6ea7e6599..554ee527d 100644
--- a/graph/loaders/assets.js
+++ b/graph/loaders/assets.js
@@ -1,15 +1,18 @@
 const DataLoader = require('dataloader');
-const {URL} = require('url');
-const {singleJoinBy, SingletonResolver} = require('./util');
+const { URL } = require('url');
+const { singleJoinBy, SingletonResolver } = require('./util');
 
-const genAssetsByID = ({connectors: {models: {Asset}}}, ids) => Asset.find({
-  id: {
-    $in: ids
-  }
-}).then(singleJoinBy(ids, 'id'));
-
-const getAssetsByQuery = async ({connectors: {services: {Assets}}}, query) => {
+const genAssetsByID = ({ connectors: { models: { Asset } } }, ids) =>
+  Asset.find({
+    id: {
+      $in: ids,
+    },
+  }).then(singleJoinBy(ids, 'id'));
 
+const getAssetsByQuery = async (
+  { connectors: { services: { Assets } } },
+  query
+) => {
   // If we are requesting based on a limit, ask for one more than we want.
   const limit = query.limit;
   if (limit) {
@@ -22,7 +25,6 @@ const getAssetsByQuery = async ({connectors: {services: {Assets}}}, query) => {
   // if there is one more, than there is more).
   let hasNextPage = false;
   if (limit && nodes.length > limit) {
-
     // There was one more than we expected! Set hasNextPage = true and remove
     // the last item from the array that we requested.
     hasNextPage = true;
@@ -31,31 +33,21 @@ const getAssetsByQuery = async ({connectors: {services: {Assets}}}, query) => {
 
   return {
     startCursor: nodes && nodes.length > 0 ? nodes[0].created_at : null,
-    endCursor: nodes && nodes.length > 0 ? nodes[nodes.length - 1].created_at : null,
+    endCursor:
+      nodes && nodes.length > 0 ? nodes[nodes.length - 1].created_at : null,
     hasNextPage,
     nodes,
   };
 };
 
 const findOrCreateAssetByURL = async (ctx, url) => {
-
   // Pull our connectors out of the context.
   const {
-    loaders: {
-      Assets,
-      Settings,
-    },
+    loaders: { Assets, Settings },
     connectors: {
-      models: {
-        Asset,
-      },
-      services: {
-        DomainList,
-        Scraper,
-      },
-      errors: {
-        ErrInvalidAssetURL,
-      },
+      models: { Asset },
+      services: { DomainList, Scraper },
+      errors: { ErrInvalidAssetURL },
     },
   } = ctx;
 
@@ -77,10 +69,7 @@ const findOrCreateAssetByURL = async (ctx, url) => {
   // Seems the asset wasn't here yet.. We should do some validation.
 
   // Check for whitelisting + get the settings at the same time.
-  const [
-    whitelisted,
-    settings,
-  ] = await Promise.all([
+  const [whitelisted, settings] = await Promise.all([
     DomainList.urlCheck(url),
     Settings.load('autoCloseStream closedTimeout'),
   ]);
@@ -100,31 +89,35 @@ const findOrCreateAssetByURL = async (ctx, url) => {
   // If the auto-close stream is enabled, close the stream after the designated
   // timeout.
   if (settings.autoCloseStream) {
-    update.$setOnInsert.closedAt = new Date(Date.now() + settings.closedTimeout * 1000);
+    update.$setOnInsert.closedAt = new Date(
+      Date.now() + settings.closedTimeout * 1000
+    );
   }
 
   // We're using the findOneAndUpdate here instead of a insert to protect
   // against race conditions.
-  asset = await Asset.findOneAndUpdate({
-    url,
-  }, update, {
+  asset = await Asset.findOneAndUpdate(
+    {
+      url,
+    },
+    update,
+    {
+      // Ensure that if it's new, we return the new object created.
+      new: true,
 
-    // Ensure that if it's new, we return the new object created.
-    new: true,
+      // Perform an upsert in the event that this doesn't exist.
+      upsert: true,
 
-    // Perform an upsert in the event that this doesn't exist.
-    upsert: true,
+      // Set the default values if not provided based on the mongoose models.
+      setDefaultsOnInsert: true,
 
-    // Set the default values if not provided based on the mongoose models.
-    setDefaultsOnInsert: true,
-
-    // Ensure that we validate the input that we do have.
-    runValidators: true,
-  });
+      // Ensure that we validate the input that we do have.
+      runValidators: true,
+    }
+  );
 
   // If this is a new asset, then we need to scrape it!
   if (!asset.scraped) {
-
     // Create the Scraper job.
     await Scraper.create(asset);
   }
@@ -132,8 +125,10 @@ const findOrCreateAssetByURL = async (ctx, url) => {
   return asset;
 };
 
-const findByUrl = async ({connectors: {errors, services: {Assets}}}, asset_url) => {
-
+const findByUrl = async (
+  { connectors: { errors, services: { Assets } } },
+  asset_url
+) => {
   // Try to validate that the url is valid. If the URL constructor throws an
   // error, throw our internal ErrInvalidAssetURL instead. This will validate
   // that the url contains a valid scheme.
@@ -146,12 +141,12 @@ const findByUrl = async ({connectors: {errors, services: {Assets}}}, asset_url)
   return Assets.findByUrl(asset_url);
 };
 
-module.exports = (ctx) => ({
+module.exports = ctx => ({
   Assets: {
-    getByURL: (url) => findOrCreateAssetByURL(ctx, url),
-    findByUrl: (url) => findByUrl(ctx, url),
-    getByQuery: (query) => getAssetsByQuery(ctx, query),
-    getByID: new DataLoader((ids) => genAssetsByID(ctx, ids)),
-    getAll: new SingletonResolver(() => ctx.connectors.models.Asset.find({}))
-  }
+    getByURL: url => findOrCreateAssetByURL(ctx, url),
+    findByUrl: url => findByUrl(ctx, url),
+    getByQuery: query => getAssetsByQuery(ctx, query),
+    getByID: new DataLoader(ids => genAssetsByID(ctx, ids)),
+    getAll: new SingletonResolver(() => ctx.connectors.models.Asset.find({})),
+  },
 });
diff --git a/graph/loaders/comments.js b/graph/loaders/comments.js
index 050bd6340..7f0dbea00 100644
--- a/graph/loaders/comments.js
+++ b/graph/loaders/comments.js
@@ -1,15 +1,10 @@
-const {
-  SharedCounterDataLoader,
-  singleJoinBy,
-} = require('./util');
+const { SharedCounterDataLoader, singleJoinBy } = require('./util');
 const DataLoader = require('dataloader');
 const {
   SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS,
-  SEARCH_OTHERS_COMMENTS
+  SEARCH_OTHERS_COMMENTS,
 } = require('../../perms/constants');
-const {
-  CACHE_EXPIRY_COMMENT_COUNT
-} = require('../../config');
+const { CACHE_EXPIRY_COMMENT_COUNT } = require('../../config');
 const ms = require('ms');
 const sc = require('snake-case');
 
@@ -27,24 +22,24 @@ const getCountsByAssetID = (context, asset_ids) => {
     {
       $match: {
         asset_id: {
-          $in: asset_ids
+          $in: asset_ids,
         },
         status: {
-          $in: ['NONE', 'ACCEPTED']
-        }
-      }
+          $in: ['NONE', 'ACCEPTED'],
+        },
+      },
     },
     {
       $group: {
         _id: '$asset_id',
         count: {
-          $sum: 1
-        }
-      }
-    }
+          $sum: 1,
+        },
+      },
+    },
   ])
     .then(singleJoinBy(asset_ids, '_id'))
-    .then((results) => results.map((result) => result ? result.count : 0));
+    .then(results => results.map(result => (result ? result.count : 0)));
 };
 
 /**
@@ -59,25 +54,25 @@ const getParentCountsByAssetID = (context, asset_ids) => {
     {
       $match: {
         asset_id: {
-          $in: asset_ids
+          $in: asset_ids,
         },
         status: {
-          $in: ['NONE', 'ACCEPTED']
+          $in: ['NONE', 'ACCEPTED'],
         },
-        parent_id: null
-      }
+        parent_id: null,
+      },
     },
     {
       $group: {
         _id: '$asset_id',
         count: {
-          $sum: 1
-        }
-      }
-    }
+          $sum: 1,
+        },
+      },
+    },
   ])
     .then(singleJoinBy(asset_ids, '_id'))
-    .then((results) => results.map((result) => result ? result.count : 0));
+    .then(results => results.map(result => (result ? result.count : 0)));
 };
 
 /**
@@ -89,12 +84,20 @@ const getParentCountsByAssetID = (context, asset_ids) => {
  *                            query
  */
 const getCommentCountByQuery = (ctx, options) => {
-  const {statuses, asset_id, parent_id, author_id, tags, action_type} = options;
+  const {
+    statuses,
+    asset_id,
+    parent_id,
+    author_id,
+    tags,
+    action_type,
+  } = options;
 
   // If user queries for statuses other than NONE and/or ACCEPTED statuses, it needs
   // special privileges.
   if (
-    (!statuses || statuses.some((status) => !['NONE', 'ACCEPTED'].includes(status))) &&
+    (!statuses ||
+      statuses.some(status => !['NONE', 'ACCEPTED'].includes(status))) &&
     (ctx.user == null || !ctx.user.can(SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS))
   ) {
     return null;
@@ -103,15 +106,15 @@ const getCommentCountByQuery = (ctx, options) => {
   const query = CommentModel.find();
 
   if (asset_id != null) {
-    query.merge({asset_id});
+    query.merge({ asset_id });
   }
 
   if (parent_id !== undefined) {
-    query.merge({parent_id});
+    query.merge({ parent_id });
   }
 
   if (author_id) {
-    query.merge({author_id});
+    query.merge({ author_id });
   }
 
   if (ctx.user != null && ctx.user.can(SEARCH_OTHERS_COMMENTS) && action_type) {
@@ -123,7 +126,7 @@ const getCommentCountByQuery = (ctx, options) => {
   }
 
   if (statuses && statuses.length > 0) {
-    query.merge({status: {$in: statuses}});
+    query.merge({ status: { $in: statuses } });
   }
 
   if (tags && tags.length > 0) {
@@ -134,9 +137,7 @@ const getCommentCountByQuery = (ctx, options) => {
     });
   }
 
-  return CommentModel
-    .find(query)
-    .count();
+  return CommentModel.find(query).count();
 };
 
 /**
@@ -146,22 +147,30 @@ const getCommentCountByQuery = (ctx, options) => {
  * @param {Object} nodes the result set of retrieved comments
  * @param {Object} params the params from the client describing the query
  */
-const getStartCursor = (ctx, nodes, {cursor, sortBy}) => {
+const getStartCursor = (ctx, nodes, { cursor, sortBy }) => {
   switch (sortBy) {
-  case 'CREATED_AT':
-    return nodes.length ? nodes[0].created_at : null;
-  case 'REPLIES':
-
-    // The cursor is the start! This is using numeric pagination.
-    return cursor != null ? cursor : 0;
+    case 'CREATED_AT':
+      return nodes.length ? nodes[0].created_at : null;
+    case 'REPLIES':
+      // The cursor is the start! This is using numeric pagination.
+      return cursor != null ? cursor : 0;
   }
 
   const SORT_KEY = sortBy.toLowerCase();
-  if (!ctx.plugins || !ctx.plugins.Sort.Comments || !ctx.plugins.Sort.Comments[SORT_KEY] || !ctx.plugins.Sort.Comments[SORT_KEY].startCursor) {
-    throw new Error(`unable to sort by ${sortBy}, no plugin was provided to handle this type`);
+  if (
+    !ctx.plugins ||
+    !ctx.plugins.Sort.Comments ||
+    !ctx.plugins.Sort.Comments[SORT_KEY] ||
+    !ctx.plugins.Sort.Comments[SORT_KEY].startCursor
+  ) {
+    throw new Error(
+      `unable to sort by ${sortBy}, no plugin was provided to handle this type`
+    );
   }
 
-  return ctx.plugins.Sort.Comments[SORT_KEY].startCursor(ctx, nodes, {cursor});
+  return ctx.plugins.Sort.Comments[SORT_KEY].startCursor(ctx, nodes, {
+    cursor,
+  });
 };
 
 /**
@@ -171,20 +180,27 @@ const getStartCursor = (ctx, nodes, {cursor, sortBy}) => {
  * @param {Object} nodes the result set of retrieved comments
  * @param {Object} params the params from the client describing the query
  */
-const getEndCursor = (ctx, nodes, {cursor, sortBy}) => {
+const getEndCursor = (ctx, nodes, { cursor, sortBy }) => {
   switch (sortBy) {
-  case 'CREATED_AT':
-    return nodes.length ? nodes[nodes.length - 1].created_at : null;
-  case 'REPLIES':
-    return nodes.length ? (cursor != null ? cursor : 0) + nodes.length : null;
+    case 'CREATED_AT':
+      return nodes.length ? nodes[nodes.length - 1].created_at : null;
+    case 'REPLIES':
+      return nodes.length ? (cursor != null ? cursor : 0) + nodes.length : null;
   }
 
   const SORT_KEY = sortBy.toLowerCase();
-  if (!ctx.plugins || !ctx.plugins.Sort.Comments || !ctx.plugins.Sort.Comments[SORT_KEY] || !ctx.plugins.Sort.Comments[SORT_KEY].endCursor) {
-    throw new Error(`unable to sort by ${sortBy}, no plugin was provided to handle this type`);
+  if (
+    !ctx.plugins ||
+    !ctx.plugins.Sort.Comments ||
+    !ctx.plugins.Sort.Comments[SORT_KEY] ||
+    !ctx.plugins.Sort.Comments[SORT_KEY].endCursor
+  ) {
+    throw new Error(
+      `unable to sort by ${sortBy}, no plugin was provided to handle this type`
+    );
   }
 
-  return ctx.plugins.Sort.Comments[SORT_KEY].endCursor(ctx, nodes, {cursor});
+  return ctx.plugins.Sort.Comments[SORT_KEY].endCursor(ctx, nodes, { cursor });
 };
 
 /**
@@ -195,42 +211,55 @@ const getEndCursor = (ctx, nodes, {cursor, sortBy}) => {
  * @param {Object} query the current mongoose query object
  * @param {Object} params the params from the client describing the query
  */
-const applySort = (ctx, query, {cursor, sortOrder, sortBy}) => {
+const applySort = (ctx, query, { cursor, sortOrder, sortBy }) => {
   switch (sortBy) {
-  case 'CREATED_AT': {
-    if (cursor) {
-      if (sortOrder === 'DESC') {
-        query = query.where({
-          created_at: {
-            $lt: cursor,
-          },
-        });
-      } else {
-        query = query.where({
-          created_at: {
-            $gt: cursor,
-          },
-        });
+    case 'CREATED_AT': {
+      if (cursor) {
+        if (sortOrder === 'DESC') {
+          query = query.where({
+            created_at: {
+              $lt: cursor,
+            },
+          });
+        } else {
+          query = query.where({
+            created_at: {
+              $gt: cursor,
+            },
+          });
+        }
       }
-    }
 
-    return query.sort({created_at: sortOrder === 'DESC' ? -1 : 1});
-  }
-  case 'REPLIES': {
-    if (cursor) {
-      query = query.skip(cursor);
+      return query.sort({ created_at: sortOrder === 'DESC' ? -1 : 1 });
     }
+    case 'REPLIES': {
+      if (cursor) {
+        query = query.skip(cursor);
+      }
 
-    return query.sort({reply_count: sortOrder === 'DESC' ? -1 : 1, created_at: sortOrder === 'DESC' ? -1 : 1});
-  }
+      return query.sort({
+        reply_count: sortOrder === 'DESC' ? -1 : 1,
+        created_at: sortOrder === 'DESC' ? -1 : 1,
+      });
+    }
   }
 
   const SORT_KEY = sortBy.toLowerCase();
-  if (!ctx.plugins || !ctx.plugins.Sort.Comments || !ctx.plugins.Sort.Comments[SORT_KEY] || !ctx.plugins.Sort.Comments[SORT_KEY].sort) {
-    throw new Error(`unable to sort by ${sortBy}, no plugin was provided to handle this type`);
+  if (
+    !ctx.plugins ||
+    !ctx.plugins.Sort.Comments ||
+    !ctx.plugins.Sort.Comments[SORT_KEY] ||
+    !ctx.plugins.Sort.Comments[SORT_KEY].sort
+  ) {
+    throw new Error(
+      `unable to sort by ${sortBy}, no plugin was provided to handle this type`
+    );
   }
 
-  return ctx.plugins.Sort.Comments[SORT_KEY].sort(ctx, query, {cursor, sortOrder});
+  return ctx.plugins.Sort.Comments[SORT_KEY].sort(ctx, query, {
+    cursor,
+    sortOrder,
+  });
 };
 
 /**
@@ -242,10 +271,13 @@ const applySort = (ctx, query, {cursor, sortOrder, sortBy}) => {
  * @param {Object} query the current mongoose query object
  * @param {Object} params the params from the client describing the query
  */
-const executeWithSort = async (ctx, query, {cursor, sortOrder, sortBy, limit}) => {
-
+const executeWithSort = async (
+  ctx,
+  query,
+  { cursor, sortOrder, sortBy, limit }
+) => {
   // Apply the sort to the query.
-  query = applySort(ctx, query, {cursor, sortOrder, sortBy});
+  query = applySort(ctx, query, { cursor, sortOrder, sortBy });
 
   // Apply the limit (if it exists, as it's applied universally).
   if (limit) {
@@ -259,7 +291,6 @@ const executeWithSort = async (ctx, query, {cursor, sortOrder, sortBy, limit}) =
   // if there is one more, than there is more).
   let hasNextPage = false;
   if (limit && nodes.length > limit) {
-
     // There was one more than we expected! Set hasNextPage = true and remove
     // the last item from the array that we requested.
     hasNextPage = true;
@@ -269,8 +300,13 @@ const executeWithSort = async (ctx, query, {cursor, sortOrder, sortBy, limit}) =
   // Use the generator functions below to extract the cursor details based on
   // the current sortBy parameter.
   return {
-    startCursor: getStartCursor(ctx, nodes, {cursor, sortOrder, sortBy, limit}),
-    endCursor: getEndCursor(ctx, nodes, {cursor, sortOrder, sortBy, limit}),
+    startCursor: getStartCursor(ctx, nodes, {
+      cursor,
+      sortOrder,
+      sortBy,
+      limit,
+    }),
+    endCursor: getEndCursor(ctx, nodes, { cursor, sortOrder, sortBy, limit }),
     hasNextPage,
     nodes,
   };
@@ -283,20 +319,37 @@ const executeWithSort = async (ctx, query, {cursor, sortOrder, sortBy, limit}) =
  * @param  {Object} context   graph context
  * @param  {Object} query     query terms to apply to the comments query
  */
-const getCommentsByQuery = async (ctx, {ids, statuses, asset_id, parent_id, author_id, limit, cursor, sortOrder, sortBy, excludeIgnored, tags, action_type}) => {
+const getCommentsByQuery = async (
+  ctx,
+  {
+    ids,
+    statuses,
+    asset_id,
+    parent_id,
+    author_id,
+    limit,
+    cursor,
+    sortOrder,
+    sortBy,
+    excludeIgnored,
+    tags,
+    action_type,
+  }
+) => {
   let comments = CommentModel.find();
 
   // If user queries for statuses other than NONE and/or ACCEPTED statuses, it needs
   // special privileges.
   if (
-    (!statuses || statuses.some((status) => !['NONE', 'ACCEPTED'].includes(status))) &&
+    (!statuses ||
+      statuses.some(status => !['NONE', 'ACCEPTED'].includes(status))) &&
     (ctx.user == null || !ctx.user.can(SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS))
   ) {
     return null;
   }
 
   if (statuses) {
-    comments = comments.where({status: {$in: statuses}});
+    comments = comments.where({ status: { $in: statuses } });
   }
 
   if (ctx.user != null && ctx.user.can(SEARCH_OTHERS_COMMENTS) && action_type) {
@@ -310,8 +363,8 @@ const getCommentsByQuery = async (ctx, {ids, statuses, asset_id, parent_id, auth
   if (ids) {
     comments = comments.find({
       id: {
-        $in: ids
-      }
+        $in: ids,
+      },
     });
   }
 
@@ -324,27 +377,36 @@ const getCommentsByQuery = async (ctx, {ids, statuses, asset_id, parent_id, auth
   }
 
   // Only let an admin request any user or the current user request themself.
-  if (ctx.user && (ctx.user.can(SEARCH_OTHERS_COMMENTS) || ctx.user.id === author_id) && author_id != null) {
-    comments = comments.where({author_id});
+  if (
+    ctx.user &&
+    (ctx.user.can(SEARCH_OTHERS_COMMENTS) || ctx.user.id === author_id) &&
+    author_id != null
+  ) {
+    comments = comments.where({ author_id });
   }
 
   if (asset_id) {
-    comments = comments.where({asset_id});
+    comments = comments.where({ asset_id });
   }
 
   // We perform the undefined check because, null, is a valid state for the
   // search to be with, which indicates that it is at depth 0.
   if (parent_id !== undefined) {
-    comments = comments.where({parent_id});
+    comments = comments.where({ parent_id });
   }
 
-  if (excludeIgnored && ctx.user && ctx.user.ignoresUsers && ctx.user.ignoresUsers.length > 0) {
+  if (
+    excludeIgnored &&
+    ctx.user &&
+    ctx.user.ignoresUsers &&
+    ctx.user.ignoresUsers.length > 0
+  ) {
     comments = comments.where({
-      author_id: {$nin: ctx.user.ignoresUsers}
+      author_id: { $nin: ctx.user.ignoresUsers },
     });
   }
 
-  return executeWithSort(ctx, comments, {cursor, sortOrder, sortBy, limit});
+  return executeWithSort(ctx, comments, { cursor, sortOrder, sortBy, limit });
 };
 
 /**
@@ -355,22 +417,22 @@ const getCommentsByQuery = async (ctx, {ids, statuses, asset_id, parent_id, auth
  * @param  {Array<String>} ids     the comment id's to fetch
  * @return {Promise}       resolves to the comments
  */
-const getComments = ({user}, ids) => {
+const getComments = ({ user }, ids) => {
   let comments;
   if (user && user.can(SEARCH_OTHERS_COMMENTS)) {
     comments = CommentModel.find({
       id: {
-        $in: ids
-      }
+        $in: ids,
+      },
     });
   } else {
     comments = CommentModel.find({
       id: {
-        $in: ids
+        $in: ids,
       },
       status: {
-        $in: ['NONE', 'ACCEPTED']
-      }
+        $in: ['NONE', 'ACCEPTED'],
+      },
     });
   }
   return comments.then(singleJoinBy(ids, 'id'));
@@ -382,12 +444,20 @@ const getComments = ({user}, ids) => {
  * @param  {Object} context the context of the GraphQL request
  * @return {Object}         object of loaders
  */
-module.exports = (context) => ({
+module.exports = context => ({
   Comments: {
-    get: new DataLoader((ids) => getComments(context, ids)),
-    getByQuery: (query) => getCommentsByQuery(context, query),
-    getCountByQuery: (query) => getCommentCountByQuery(context, query),
-    countByAssetID: new SharedCounterDataLoader('Comments.totalCommentCount', ms(CACHE_EXPIRY_COMMENT_COUNT), (ids) => getCountsByAssetID(context, ids)),
-    parentCountByAssetID: new SharedCounterDataLoader('Comments.countByAssetID', ms(CACHE_EXPIRY_COMMENT_COUNT), (ids) => getParentCountsByAssetID(context, ids))
-  }
+    get: new DataLoader(ids => getComments(context, ids)),
+    getByQuery: query => getCommentsByQuery(context, query),
+    getCountByQuery: query => getCommentCountByQuery(context, query),
+    countByAssetID: new SharedCounterDataLoader(
+      'Comments.totalCommentCount',
+      ms(CACHE_EXPIRY_COMMENT_COUNT),
+      ids => getCountsByAssetID(context, ids)
+    ),
+    parentCountByAssetID: new SharedCounterDataLoader(
+      'Comments.countByAssetID',
+      ms(CACHE_EXPIRY_COMMENT_COUNT),
+      ids => getParentCountsByAssetID(context, ids)
+    ),
+  },
 });
diff --git a/graph/loaders/index.js b/graph/loaders/index.js
index 0ef09940f..4726bd5e1 100644
--- a/graph/loaders/index.js
+++ b/graph/loaders/index.js
@@ -11,7 +11,6 @@ const Users = require('./users');
 const plugins = require('../../services/plugins');
 
 let loaders = [
-
   // Load the core loaders.
   Actions,
   Assets,
@@ -21,12 +20,11 @@ let loaders = [
   Users,
 
   // Load the plugin loaders from the manager.
-  ...plugins
-    .get('server', 'loaders').map(({plugin, loaders}) => {
-      debug(`added plugin '${plugin.name}'`);
+  ...plugins.get('server', 'loaders').map(({ plugin, loaders }) => {
+    debug(`added plugin '${plugin.name}'`);
 
-      return loaders;
-    })
+    return loaders;
+  }),
 ];
 
 /**
@@ -34,12 +32,12 @@ let loaders = [
  * @param  {Object} context the context of the GraphQL request
  * @return {Object}         object of loaders
  */
-module.exports = (context) => {
-
+module.exports = context => {
   // We need to return an object to be accessed.
-  return _.merge(...loaders.map((loaders) => {
-
-    // Each loader is a function which takes the context.
-    return loaders(context);
-  }));
+  return _.merge(
+    ...loaders.map(loaders => {
+      // Each loader is a function which takes the context.
+      return loaders(context);
+    })
+  );
 };
diff --git a/graph/loaders/settings.js b/graph/loaders/settings.js
index a7a4b74e1..fa0a17459 100644
--- a/graph/loaders/settings.js
+++ b/graph/loaders/settings.js
@@ -7,13 +7,17 @@ const DataLoader = require('dataloader');
  * @return {Object}         object of loaders
  */
 module.exports = () => {
-  const loader = new DataLoader((selections) => Promise.all(selections.map((fields) => {
-    return SettingsService.retrieve(fields);
-  })));
+  const loader = new DataLoader(selections =>
+    Promise.all(
+      selections.map(fields => {
+        return SettingsService.retrieve(fields);
+      })
+    )
+  );
 
   return {
     Settings: {
       load: (fields = false) => loader.load(fields),
-    }
+    },
   };
 };
diff --git a/graph/loaders/tags.js b/graph/loaders/tags.js
index 23ab6fd43..6e9b86922 100644
--- a/graph/loaders/tags.js
+++ b/graph/loaders/tags.js
@@ -1,13 +1,31 @@
 const DataLoader = require('dataloader');
 const TagsService = require('../../services/tags');
+const plugins = require('../../services/plugins');
+const debug = require('debug')('talk:graph:loaders:tags');
+const PLUGIN_TAGS = plugins
+  .get('server', 'tags')
+  .reduce((acc, { plugin, tags }) => {
+    debug(`added plugin '${plugin.name}'`);
+
+    acc = acc.concat(tags);
+
+    return acc;
+  }, []);
 
 /**
  * Get all the tags for the context for the dataloader.
  */
 const genAll = (context, queries) => {
-  return Promise.all(queries.map(({id, item_type, asset_id}) => {
-    return TagsService.getAll({id, item_type, asset_id});
-  }));
+  return Promise.all(
+    queries.map(async ({ id, item_type, asset_id }) => {
+      let tags = await TagsService.getAll({ id, item_type, asset_id });
+
+      // Merge in the global plugin tags as well.
+      tags = tags.concat(PLUGIN_TAGS);
+
+      return tags;
+    })
+  );
 };
 
 /**
@@ -15,8 +33,8 @@ const genAll = (context, queries) => {
  * @param  {Object} context the context of the GraphQL request
  * @return {Object}         object of loaders
  */
-module.exports = (context) => ({
+module.exports = context => ({
   Tags: {
-    getAll: new DataLoader((queries) => genAll(context, queries))
-  }
+    getAll: new DataLoader(queries => genAll(context, queries)),
+  },
 });
diff --git a/graph/loaders/users.js b/graph/loaders/users.js
index dc58fffad..a3ec3c54e 100644
--- a/graph/loaders/users.js
+++ b/graph/loaders/users.js
@@ -1,15 +1,56 @@
 const DataLoader = require('dataloader');
 
 const util = require('./util');
-const union = require('lodash/union');
 
-const {
-  SEARCH_OTHER_USERS,
-} = require('../../perms/constants');
+const { SEARCH_OTHER_USERS } = require('../../perms/constants');
 
 const UsersService = require('../../services/users');
+const { escapeRegExp } = require('../../services/regex');
 const UserModel = require('../../models/user');
 
+const mergeState = (query, state) => {
+  const { status } = state;
+
+  if (status) {
+    const { username, banned, suspended } = status;
+
+    if (typeof username !== 'undefined' && username && username.length > 0) {
+      query.merge({
+        'status.username.status': {
+          $in: username,
+        },
+      });
+    }
+
+    if (typeof banned !== 'undefined' && banned !== null) {
+      query.merge({
+        'status.banned.status': banned,
+      });
+    }
+
+    if (typeof suspended !== 'undefined' && suspended !== null) {
+      if (suspended) {
+        query.merge({
+          'status.suspension.until': {
+            $gte: Date.now(),
+          },
+        });
+      } else {
+        query.merge({
+          $or: [
+            { 'status.suspension.until': null },
+            {
+              'status.suspension.until': {
+                $lt: Date.now(),
+              },
+            },
+          ],
+        });
+      }
+    }
+  }
+};
+
 const genUserByIDs = async (context, ids) => {
   if (!ids || ids.length === 0) {
     return [];
@@ -20,9 +61,7 @@ const genUserByIDs = async (context, ids) => {
     return [user];
   }
 
-  return UsersService
-    .findByIdArray(ids)
-    .then(util.singleJoinBy(ids, 'id'));
+  return UsersService.findByIdArray(ids).then(util.singleJoinBy(ids, 'id'));
 };
 
 /**
@@ -31,46 +70,74 @@ const genUserByIDs = async (context, ids) => {
  * @param  {Object} context   graph context
  * @param  {Object} query     query terms to apply to the users query
  */
-const getUsersByQuery = async ({user, loaders: {Actions}}, {ids, limit, cursor, statuses, action_type, sortOrder}) => {
+const getUsersByQuery = async (
+  { user },
+  { limit, cursor, value = '', state, action_type, sortOrder }
+) => {
   let query = UserModel.find();
 
-  if (action_type || statuses) {
+  if (action_type || state || value.length > 0) {
     if (!user || !user.can(SEARCH_OTHER_USERS)) {
       return null;
     }
 
-    if (statuses) {
-      query = query.where({
-        status: {
-          $in: statuses
-        }
-      });
-    } else {
-      const userIds = await Actions.getByTypes({action_type, item_type: 'USERS'});
-      ids = ids ? union(ids, userIds) : userIds;
-    }
-  }
+    if (value.length > 0) {
+      // Lowercase the search term and escape any regex characters.
+      value = escapeRegExp(value).toLowerCase();
 
-  if (ids) {
-    query = query.find({
-      id: {
-        $in: ids
-      }
-    });
+      // Compile the prefix search regex.
+      const $regex = new RegExp(`^${value}`);
+
+      // Merge in the regex params.
+      query.merge({
+        $or: [
+          // Search by a prefix match on the username.
+          {
+            lowercaseUsername: {
+              $regex,
+            },
+          },
+
+          // Search by a prefix match on the email address.
+          {
+            profiles: {
+              $elemMatch: {
+                id: {
+                  $regex,
+                },
+                provider: 'local',
+              },
+            },
+          },
+        ],
+      });
+    }
+
+    if (state) {
+      mergeState(query, state);
+    }
+
+    if (action_type) {
+      query.merge({
+        [`action_counts.${action_type.toLowerCase()}`]: {
+          $gt: 0,
+        },
+      });
+    }
   }
 
   if (cursor) {
     if (sortOrder === 'DESC') {
       query = query.where({
         created_at: {
-          $lt: cursor
-        }
+          $lt: cursor,
+        },
       });
     } else {
       query = query.where({
         created_at: {
-          $gt: cursor
-        }
+          $gt: cursor,
+        },
       });
     }
   }
@@ -81,15 +148,15 @@ const getUsersByQuery = async ({user, loaders: {Actions}}, {ids, limit, cursor,
   }
 
   // Sort by created_at.
-  query.sort({created_at: sortOrder === 'DESC' ? -1 : 1});
+  query.sort({ created_at: sortOrder === 'DESC' ? -1 : 1 });
 
+  // Execute the query.
   const nodes = await query.exec();
 
   // The hasNextPage is always handled the same (ask for one more than we need,
   // if there is one more, than there is more).
   let hasNextPage = false;
   if (limit && nodes.length > limit) {
-
     // There was one more than we expected! Set hasNextPage = true and remove
     // the last item from the array that we requested.
     hasNextPage = true;
@@ -115,30 +182,28 @@ const getUsersByQuery = async ({user, loaders: {Actions}}, {ids, limit, cursor,
  * @return {Promise}          resolves to the counts of the users from the
  *                            query
  */
-const getCountByQuery = async ({loaders: {Actions}}, {action_type, statuses}) => {
+const getCountByQuery = async ({ user }, { action_type, state }) => {
   let query = UserModel.find();
 
-  if (action_type) {
-    const userIds = await Actions.getByTypes({action_type, item_type: 'USERS'});
+  if (action_type || state) {
+    if (!user || !user.can(SEARCH_OTHER_USERS)) {
+      return null;
+    }
 
-    query = query.find({
-      id: {
-        $in: userIds
-      }
-    });
+    if (state) {
+      mergeState(query, state);
+    }
+
+    if (action_type) {
+      query.merge({
+        [`action_counts.${action_type.toLowerCase()}`]: {
+          $gt: 0,
+        },
+      });
+    }
   }
 
-  if (statuses) {
-    query = query.where({
-      status: {
-        $in: statuses
-      }
-    });
-  }
-
-  return UserModel
-    .find(query)
-    .count();
+  return UserModel.find(query).count();
 };
 
 /**
@@ -146,10 +211,10 @@ const getCountByQuery = async ({loaders: {Actions}}, {action_type, statuses}) =>
  * @param  {Object} context the context of the GraphQL request
  * @return {Object}         object of loaders
  */
-module.exports = (context) => ({
+module.exports = context => ({
   Users: {
-    getByQuery: (query) => getUsersByQuery(context, query),
-    getByID: new DataLoader((ids) => genUserByIDs(context, ids)),
-    getCountByQuery: (query) => getCountByQuery(context, query)
-  }
+    getByQuery: query => getUsersByQuery(context, query),
+    getByID: new DataLoader(ids => genUserByIDs(context, ids)),
+    getCountByQuery: query => getCountByQuery(context, query),
+  },
 });
diff --git a/graph/loaders/util.js b/graph/loaders/util.js
index 4d43d1811..aa4662f03 100644
--- a/graph/loaders/util.js
+++ b/graph/loaders/util.js
@@ -16,7 +16,7 @@ class SingletonResolver {
       return this._cache;
     }
 
-    let promise = this._resolver(arguments).then((result) => {
+    let promise = this._resolver(arguments).then(result => {
       return result;
     });
 
@@ -34,10 +34,10 @@ class SingletonResolver {
  * @param  {String} key key to group by
  * @return {Array}      array of results
  */
-const arrayJoinBy = (ids, key) => (items) => {
+const arrayJoinBy = (ids, key) => items => {
   const itemsByKey = _.groupBy(items, key);
 
-  return ids.map((id) => {
+  return ids.map(id => {
     if (id in itemsByKey) {
       return itemsByKey[id];
     }
@@ -53,9 +53,9 @@ const arrayJoinBy = (ids, key) => (items) => {
  * @param  {String} key key to group by
  * @return {Array}      array of results
  */
-const singleJoinBy = (ids, key) => (items) => {
+const singleJoinBy = (ids, key) => items => {
   const itemsByKey = _.groupBy(items, key);
-  return ids.map((id) => {
+  return ids.map(id => {
     if (id in itemsByKey) {
       return itemsByKey[id][0];
     }
@@ -70,7 +70,10 @@ const singleJoinBy = (ids, key) => (items) => {
  */
 class SharedCacheDataLoader extends DataLoader {
   constructor(prefix, expiry, batchLoadFn, options) {
-    super(SharedCacheDataLoader.batchLoadFn(prefix, expiry, batchLoadFn), options);
+    super(
+      SharedCacheDataLoader.batchLoadFn(prefix, expiry, batchLoadFn),
+      options
+    );
 
     // Expiry is provided as a number in ms, we're using commands optimized for
     // seconds, so convert this to seconds.
@@ -83,9 +86,7 @@ class SharedCacheDataLoader extends DataLoader {
    * clear the key from the shared cache and the request cache
    */
   clear(key) {
-    return cache
-      .invalidate(key, this._keyFunc)
-      .then(() => super.clear(key));
+    return cache.invalidate(key, this._keyFunc).then(() => super.clear(key));
   }
 
   /**
@@ -110,16 +111,22 @@ class SharedCacheDataLoader extends DataLoader {
    * wraps up the prefix needed for the redis backed shared cache driver
    */
   static keyFunc(prefix) {
-    return (key) => `cache.sbl[${prefix}][${key}]`;
+    return key => `cache.sbl[${prefix}][${key}]`;
   }
 
   /**
    * wraps the dataloader batchLoadFn with the shared cache's wrapper
    */
   static batchLoadFn(prefix, expiry, batchLoadFn) {
-    return (ids) => cache.wrapMany(ids, expiry, (workKeys) => {
-      return batchLoadFn(workKeys);
-    }, SharedCacheDataLoader.keyFunc(prefix));
+    return ids =>
+      cache.wrapMany(
+        ids,
+        expiry,
+        workKeys => {
+          return batchLoadFn(workKeys);
+        },
+        SharedCacheDataLoader.keyFunc(prefix)
+      );
   }
 }
 
@@ -128,7 +135,6 @@ class SharedCacheDataLoader extends DataLoader {
  * exception in that it is designed to work with numerical cached data.
  */
 class SharedCounterDataLoader extends SharedCacheDataLoader {
-
   /**
    * Increments the key in the cache if it already exists in the cache, if not
    * it does nothing.
@@ -151,8 +157,8 @@ class SharedCounterDataLoader extends SharedCacheDataLoader {
  * @param  {Array} paths paths on the object to be used to generate the cache
  *                       key
  */
-const objectCacheKeyFn = (...paths) => (obj) => {
-  return paths.map((path) => obj[path]).join(':');
+const objectCacheKeyFn = (...paths) => obj => {
+  return paths.map(path => obj[path]).join(':');
 };
 
 /**
@@ -160,7 +166,7 @@ const objectCacheKeyFn = (...paths) => (obj) => {
  * @param  {Array} paths paths on the object to be used to generate the cache
  *                       key
  */
-const arrayCacheKeyFn = (arr) => {
+const arrayCacheKeyFn = arr => {
   return arr.sort().join(':');
 };
 
@@ -171,5 +177,5 @@ module.exports = {
   arrayCacheKeyFn,
   SingletonResolver,
   SharedCacheDataLoader,
-  SharedCounterDataLoader
+  SharedCounterDataLoader,
 };
diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index 06417844b..13ccfda6b 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -1,9 +1,6 @@
 const errors = require('../../errors');
-const UsersService = require('../../services/users');
-const {CREATE_ACTION, DELETE_ACTION} = require('../../perms/constants');
-const {
-  IGNORE_FLAGS_AGAINST_STAFF,
-} = require('../../config');
+const { CREATE_ACTION, DELETE_ACTION } = require('../../perms/constants');
+const { IGNORE_FLAGS_AGAINST_STAFF } = require('../../config');
 
 /**
  * getActionItem will return the item that is associated with the given action.
@@ -13,28 +10,16 @@ const {
  * @param {Object} action the action being performed
  * @return {Promise}      resolves to the referenced item
  */
-const getActionItem = async (ctx, {item_id, item_type}) => {
-  const {
-    loaders: {
-      Comments,
-      Users,
-    },
-  } = ctx;
+const getActionItem = async (ctx, { item_id, item_type }) => {
+  const { loaders: { Comments, Users } } = ctx;
 
-  if (item_type === 'COMMENTS') {
-    const comment = await Comments.get.load(item_id);
-    if (!comment) {
-      throw errors.ErrNotFound;
-    }
-
-    return comment;
-  } else if (item_type === 'USERS') {
-    const user = await Users.getByID.load(item_id);
-    if (!user) {
-      throw errors.ErrNotFound;
-    }
-
-    return user;
+  switch (item_type) {
+    case 'COMMENTS':
+      return Comments.get.load(item_id);
+    case 'USERS':
+      return Users.getByID.load(item_id);
+    default:
+      return null;
   }
 };
 
@@ -46,25 +31,22 @@ const getActionItem = async (ctx, {item_id, item_type}) => {
  * @param  {Object} action the action being created
  * @return {Promise}       resolves to the action created
  */
-const createAction = async (ctx, {item_id, item_type, action_type, group_id, metadata = {}}) => {
-  const {
-    user = {},
-    pubsub,
-    connectors: {
-      services: {
-        Actions,
-      },
-    },
-  } = ctx;
+const createAction = async (
+  ctx,
+  { item_id, item_type, action_type, group_id, metadata = {} }
+) => {
+  const { user = {}, pubsub, connectors: { services: { Actions } } } = ctx;
 
   // Gets the item referenced by the action.
-  const item = await getActionItem(ctx, {item_id, item_type});
+  const item = await getActionItem(ctx, { item_id, item_type });
+  if (!item || item === null) {
+    throw errors.ErrNotFound;
+  }
 
   // If we are ignoring flags against staff, ensure that the target isn't a
   // staff member.
   if (IGNORE_FLAGS_AGAINST_STAFF) {
     if (action_type === 'FLAG') {
-
       // If the item is a user, and this is a flag. Check to see if they are
       // staff, if they are, don't permit the flag.
       if (item_type === 'USERS' && item.isStaff()) {
@@ -73,6 +55,14 @@ const createAction = async (ctx, {item_id, item_type, action_type, group_id, met
     }
   }
 
+  if (action_type === 'FLAG' && item_type === 'USERS') {
+    // The item is a user, and this is a flag. Check to see if they are staff,
+    // if they are, don't permit the flag.
+    if (item.isStaff()) {
+      throw errors.ErrNotAuthorized;
+    }
+  }
+
   // Create the action itself.
   let action = await Actions.create({
     item_id,
@@ -80,20 +70,13 @@ const createAction = async (ctx, {item_id, item_type, action_type, group_id, met
     user_id: user.id,
     group_id,
     action_type,
-    metadata
+    metadata,
   });
 
-  if (action_type === 'FLAG') {
-    if (item_type === 'USERS') {
-
-      // Set the user's status as pending, as we need to review it.
-      await UsersService.setStatus(item_id, 'PENDING');
-    } else if (item_type === 'COMMENTS') {
-
-      // The item is a comment, and this is a flag. Push that the comment was
-      // flagged, don't wait for it to finish.
-      pubsub.publish('commentFlagged', item);
-    }
+  if (action_type === 'FLAG' && item_type === 'COMMENTS') {
+    // The item is a comment, and this is a flag. Push that the comment was
+    // flagged, don't wait for it to finish.
+    pubsub.publish('commentFlagged', item);
   }
 
   return action;
@@ -101,37 +84,32 @@ const createAction = async (ctx, {item_id, item_type, action_type, group_id, met
 
 /**
  * Deletes an action based on the user id if the user owns that action.
+ *
  * @param  {Object} user the user performing the request
  * @param  {String} id   the id of the action to delete
  * @return {Promise}     resolves to the deleted action, or null if not found.
  */
-const deleteAction = (ctx, {id}) => {
-  const {
-    user,
-    connectors: {
-      services: {
-        Actions,
-      },
-    },
-  } = ctx;
+const deleteAction = (ctx, { id }) => {
+  const { user, connectors: { services: { Actions } } } = ctx;
 
-  return Actions.delete({id, user_id: user.id});
+  return Actions.delete({ id, user_id: user.id });
 };
 
-module.exports = (ctx) => {
-  if (ctx.user && ctx.user.can(CREATE_ACTION, DELETE_ACTION)) {
-    return {
-      Action: {
-        create: (action) => createAction(ctx, action),
-        delete: (action) => deleteAction(ctx, action)
-      }
-    };
-  }
-
-  return {
+module.exports = ctx => {
+  let mutators = {
     Action: {
       create: () => Promise.reject(errors.ErrNotAuthorized),
-      delete: () => Promise.reject(errors.ErrNotAuthorized)
-    }
+      delete: () => Promise.reject(errors.ErrNotAuthorized),
+    },
   };
+
+  if (ctx.user && ctx.user.can(CREATE_ACTION)) {
+    mutators.Action.create = action => createAction(ctx, action);
+  }
+
+  if (ctx.user && ctx.user.can(DELETE_ACTION)) {
+    mutators.Action.delete = action => deleteAction(ctx, action);
+  }
+
+  return mutators;
 };
diff --git a/graph/mutators/asset.js b/graph/mutators/asset.js
index 462607f5f..171c711f0 100644
--- a/graph/mutators/asset.js
+++ b/graph/mutators/asset.js
@@ -14,7 +14,8 @@ const AssetModel = require('../../models/asset');
  * @param {String} id the asset's id to update
  * @param {Object} settings the settings to update on the asset.
  */
-const updateSettings = async (ctx, id, settings) => AssetsService.overrideSettings(id, settings);
+const updateSettings = async (ctx, id, settings) =>
+  AssetsService.overrideSettings(id, settings);
 
 /**
  * updateStatus will update the status of an asset.
@@ -24,30 +25,36 @@ const updateSettings = async (ctx, id, settings) => AssetsService.overrideSettin
  * @param {Object} status the status to change on the asset relating to it's
  *                        current state.
  */
-const updateStatus = async (ctx, id, {closedAt, closedMessage}) => AssetModel.update({
-  id,
-}, {
-  $set: {
-    closedAt,
-    closedMessage
-  }
-});
+const updateStatus = async (ctx, id, { closedAt, closedMessage }) =>
+  AssetModel.update(
+    {
+      id,
+    },
+    {
+      $set: {
+        closedAt,
+        closedMessage,
+      },
+    }
+  );
 
-module.exports = (ctx) => {
+module.exports = ctx => {
   let mutators = {
     Asset: {
       updateSettings: () => Promise.reject(errors.ErrNotAuthorized),
-      updateStatus: () => Promise.reject(errors.ErrNotAuthorized)
-    }
+      updateStatus: () => Promise.reject(errors.ErrNotAuthorized),
+    },
   };
 
   if (ctx.user) {
     if (ctx.user.can(UPDATE_ASSET_SETTINGS)) {
-      mutators.Asset.updateSettings = (id, settings) => updateSettings(ctx, id, settings);
+      mutators.Asset.updateSettings = (id, settings) =>
+        updateSettings(ctx, id, settings);
     }
 
     if (ctx.user.can(UPDATE_ASSET_STATUS)) {
-      mutators.Asset.updateStatus = (id, status) => updateStatus(ctx, id, status);
+      mutators.Asset.updateStatus = (id, status) =>
+        updateStatus(ctx, id, status);
     }
   }
 
diff --git a/graph/mutators/comment.js b/graph/mutators/comment.js
index d5a131cc5..6106f819c 100644
--- a/graph/mutators/comment.js
+++ b/graph/mutators/comment.js
@@ -1,61 +1,49 @@
 const errors = require('../../errors');
-
 const ActionModel = require('../../models/action');
 const AssetsService = require('../../services/assets');
 const ActionsService = require('../../services/actions');
 const TagsService = require('../../services/tags');
 const CommentsService = require('../../services/comments');
 const KarmaService = require('../../services/karma');
-const tlds = require('tlds');
 const merge = require('lodash/merge');
-const linkify = require('linkify-it')()
-  .tlds(tlds);
+const linkify = require('linkify-it')().tlds(require('tlds'));
 const Wordlist = require('../../services/wordlist');
 const {
   CREATE_COMMENT,
   SET_COMMENT_STATUS,
   ADD_COMMENT_TAG,
-  EDIT_COMMENT
+  EDIT_COMMENT,
 } = require('../../perms/constants');
-
+const debug = require('debug')('talk:graph:mutators:comment');
 const {
   DISABLE_AUTOFLAG_SUSPECT_WORDS,
   IGNORE_FLAGS_AGAINST_STAFF,
 } = require('../../config');
 
-const debug = require('debug')('talk:graph:mutators:tags');
-const plugins = require('../../services/plugins');
-
-const pluginTags = plugins.get('server', 'tags').reduce((acc, {plugin, tags}) => {
-  debug(`added plugin '${plugin.name}'`);
-
-  acc = acc.concat(tags);
-
-  return acc;
-}, []);
-
-const resolveTagsForComment = async ({user, loaders: {Tags}}, {asset_id, tags = []}) => {
+const resolveTagsForComment = async (
+  { user, loaders: { Tags } },
+  { asset_id, tags = [] }
+) => {
   const item_type = 'COMMENTS';
 
   // Handle Tags
   if (tags.length) {
-
     // Get the global list of tags from the dataloader.
     let globalTags = await Tags.getAll.load({
       item_type,
-      asset_id
+      asset_id,
     });
     if (!Array.isArray(globalTags)) {
       globalTags = [];
     }
 
-    globalTags = globalTags.concat(pluginTags);
-
     // Merge in the tags for the given comment.
-    tags = tags.map((name) => {
-
+    tags = tags.map(name => {
       // Resolve the TagLink that we can use for the comment.
-      let {tagLink} = TagsService.resolveLink(user, globalTags, {name, item_type});
+      let { tagLink } = TagsService.resolveLink(user, globalTags, {
+        name,
+        item_type,
+      });
 
       // Return the tagLink for tag insertion.
       return tagLink;
@@ -64,10 +52,12 @@ const resolveTagsForComment = async ({user, loaders: {Tags}}, {asset_id, tags =
 
   // Add the staff tag for comments created as a staff member.
   if (user.can(ADD_COMMENT_TAG)) {
-    tags.push(TagsService.newTagLink(user, {
-      name: 'STAFF',
-      item_type
-    }));
+    tags.push(
+      TagsService.newTagLink(user, {
+        name: 'STAFF',
+        item_type,
+      })
+    );
   }
 
   return tags;
@@ -79,14 +69,9 @@ const resolveTagsForComment = async ({user, loaders: {Tags}}, {asset_id, tags =
  */
 const adjustKarma = (Comments, id, status) => async () => {
   try {
-
     // Use the dataloader to get the comment that was just moderated and
     // get the flag user's id's so we can adjust their karma too.
-    let [
-      comment,
-      flagUserIDs
-    ] = await Promise.all([
-
+    let [comment, flagUserIDs] = await Promise.all([
       // Load the comment that was just made/updated by the setCommentStatus
       // operation.
       Comments.get.load(id),
@@ -96,51 +81,53 @@ const adjustKarma = (Comments, id, status) => async () => {
       ActionModel.find({
         item_id: id,
         item_type: 'COMMENTS',
-        action_type: 'FLAG'
-      }).then((actions) => {
-
+        action_type: 'FLAG',
+      }).then(actions => {
         // This is to ensure that this is always an array.
         if (!actions) {
           return [];
         }
 
-        return actions.map(({user_id}) => user_id);
-      })
+        return actions.map(({ user_id }) => user_id);
+      }),
     ]);
 
     debug(`Comment[${id}] by User[${comment.author_id}] was Status[${status}]`);
 
     switch (status) {
-    case 'REJECTED':
+      case 'REJECTED':
+        // Reduce the user's karma.
+        debug(`CommentUser[${comment.author_id}] had their karma reduced`);
 
-      // Reduce the user's karma.
-      debug(`CommentUser[${comment.author_id}] had their karma reduced`);
+        // Decrease the flag user's karma, the moderator disagreed with this
+        // action.
+        debug(
+          `FlaggingUser[${flagUserIDs.join(', ')}] had their karma increased`
+        );
+        await Promise.all([
+          KarmaService.modifyUser(comment.author_id, -1, 'comment'),
+          KarmaService.modifyUser(flagUserIDs, 1, 'flag', true),
+        ]);
 
-      // Decrease the flag user's karma, the moderator disagreed with this
-      // action.
-      debug(`FlaggingUser[${flagUserIDs.join(', ')}] had their karma increased`);
-      await Promise.all([
-        KarmaService.modifyUser(comment.author_id, -1, 'comment'),
-        KarmaService.modifyUser(flagUserIDs, 1, 'flag', true)
-      ]);
+        break;
 
-      break;
+      case 'ACCEPTED':
+        // Increase the user's karma.
+        debug(`CommentUser[${comment.author_id}] had their karma increased`);
 
-    case 'ACCEPTED':
-
-      // Increase the user's karma.
-      debug(`CommentUser[${comment.author_id}] had their karma increased`);
-
-      // Increase the flag user's karma, the moderator agreed with this
-      // action.
-      debug(`FlaggingUser[${flagUserIDs.join(', ')}] had their karma reduced`);
-      await Promise.all([
-        KarmaService.modifyUser(comment.author_id, 1, 'comment'),
-        KarmaService.modifyUser(flagUserIDs, -1, 'flag', true)
-      ]);
-
-      break;
+        // Increase the flag user's karma, the moderator agreed with this
+        // action.
+        debug(
+          `FlaggingUser[${flagUserIDs.join(', ')}] had their karma reduced`
+        );
+        await Promise.all([
+          KarmaService.modifyUser(comment.author_id, 1, 'comment'),
+          KarmaService.modifyUser(flagUserIDs, -1, 'flag', true),
+        ]);
 
+        break;
+      default:
+        return;
     }
 
     return;
@@ -158,11 +145,21 @@ const adjustKarma = (Comments, id, status) => async () => {
  * @param  {String} [status='NONE'] the status of the new comment
  * @return {Promise}              resolves to the created comment
  */
-const createComment = async (context, {tags = [], body, asset_id, parent_id = null, status = 'NONE', metadata = {}}) => {
-  const {user, loaders: {Comments}, pubsub} = context;
+const createComment = async (
+  context,
+  {
+    tags = [],
+    body,
+    asset_id,
+    parent_id = null,
+    status = 'NONE',
+    metadata = {},
+  }
+) => {
+  const { user, loaders: { Comments }, pubsub } = context;
 
   // Resolve the tags for the comment.
-  tags = await resolveTagsForComment(context, {asset_id, tags});
+  tags = await resolveTagsForComment(context, { asset_id, tags });
 
   let comment = await CommentsService.publicCreate({
     body,
@@ -198,13 +195,9 @@ const createComment = async (context, {tags = [], body, asset_id, parent_id = nu
  * @param  {String} [asset_id]  id of asset comment is posted on
  * @return {Object}         resolves to the wordlist results
  */
-const filterNewComment = async (context, {body, asset_id}) => {
-
+const filterNewComment = async (context, { body, asset_id }) => {
   // Load the settings.
-  const [
-    settings,
-    asset,
-  ] = await Promise.all([
+  const [settings, asset] = await Promise.all([
     context.loaders.Settings.load(),
     context.loaders.Assets.getByID.load(asset_id),
   ]);
@@ -217,12 +210,11 @@ const filterNewComment = async (context, {body, asset_id}) => {
 
   // Load the wordlist and filter the comment content.
   return [
-
     // Scan the word.
     wl.scan('body', body),
 
     // Return the asset's settings.
-    await AssetsService.rectifySettings(asset, settings)
+    await AssetsService.rectifySettings(asset, settings),
   ];
 };
 
@@ -231,10 +223,8 @@ const filterNewComment = async (context, {body, asset_id}) => {
  * returned.
  */
 const moderationPhases = [
-
   // This phase checks to see if the comment is long enough.
   (context, comment) => {
-
     // Check to see if the body is too short, if it is, then complain about it!
     if (comment.body.length < 2) {
       throw errors.ErrCommentTooShort;
@@ -242,8 +232,7 @@ const moderationPhases = [
   },
 
   // This phase checks to see if the asset being processed is closed or not.
-  (context, comment, {asset}) => {
-
+  (context, comment, { asset }) => {
     // Check to see if the asset has closed commenting...
     if (asset.isClosed) {
       throw new errors.ErrAssetCommentingClosed(asset.closedMessage);
@@ -251,23 +240,23 @@ const moderationPhases = [
   },
 
   // This phase checks the comment against the wordlist.
-  (context, comment, {wordlist}) => {
-
+  (context, comment, { wordlist }) => {
     // Decide the status based on whether or not the current asset/settings
     // has pre-mod enabled or not. If the comment was rejected based on the
     // wordlist, then reject it, otherwise if the moderation setting is
     // premod, set it to `premod`.
     if (wordlist.banned) {
-
       // Add the flag related to Trust to the comment.
       return {
         status: 'REJECTED',
-        actions: [{
-          action_type: 'FLAG',
-          user_id: null,
-          group_id: 'BANNED_WORD',
-          metadata: {}
-        }]
+        actions: [
+          {
+            action_type: 'FLAG',
+            user_id: null,
+            group_id: 'BANNED_WORD',
+            metadata: {},
+          },
+        ],
       };
     }
 
@@ -278,44 +267,45 @@ const moderationPhases = [
     // If the wordlist has matched the suspect word filter and we haven't disabled
     // auto-flagging suspect words, then we should flag the comment!
     if (wordlist.suspect && !DISABLE_AUTOFLAG_SUSPECT_WORDS) {
-
       // TODO: this is kind of fragile, we should refactor this to resolve
       // all these const's that we're using like 'COMMENTS', 'FLAG' to be
       // defined in a checkable schema.
       return {
-        actions: [{
-          action_type: 'FLAG',
-          user_id: null,
-          group_id: 'Matched suspect word filter',
-          metadata: {}
-        }],
+        actions: [
+          {
+            action_type: 'FLAG',
+            user_id: null,
+            group_id: 'SUSPECT_WORD',
+            metadata: {},
+          },
+        ],
       };
     }
   },
 
   // This phase checks to see if the comment's length exceeds maximum.
-  (context, comment, {assetSettings: {charCountEnable, charCount}}) => {
-
+  (context, comment, { assetSettings: { charCountEnable, charCount } }) => {
     // Reject if the comment is too long
     if (charCountEnable && comment.body.length > charCount) {
-
       // Add the flag related to Trust to the comment.
       return {
         status: 'REJECTED',
-        actions: [{
-          action_type: 'FLAG',
-          user_id: null,
-          group_id: 'BODY_COUNT',
-          metadata: {
-            count: comment.body.length,
-          }
-        }]
+        actions: [
+          {
+            action_type: 'FLAG',
+            user_id: null,
+            group_id: 'BODY_COUNT',
+            metadata: {
+              count: comment.body.length,
+            },
+          },
+        ],
       };
     }
   },
 
   // If a given user is a staff member, always approve their comment.
-  (context) => {
+  context => {
     if (IGNORE_FLAGS_AGAINST_STAFF && context.user && context.user.isStaff()) {
       return {
         status: 'ACCEPTED',
@@ -325,48 +315,52 @@ const moderationPhases = [
 
   // This phase checks the comment if it has any links in it if the check is
   // enabled.
-  (context, comment, {assetSettings: {premodLinksEnable}}) => {
+  (context, comment, { assetSettings: { premodLinksEnable } }) => {
     if (premodLinksEnable && linkify.test(comment.body)) {
-
       // Add the flag related to Trust to the comment.
       return {
-        status:'SYSTEM_WITHHELD',
-        actions: [{
-          action_type: 'FLAG',
-          user_id: null,
-          group_id: 'LINKS',
-          metadata: {
-            links: comment.body,
-          }
-        }],
+        status: 'SYSTEM_WITHHELD',
+        actions: [
+          {
+            action_type: 'FLAG',
+            user_id: null,
+            group_id: 'LINKS',
+            metadata: {
+              links: comment.body,
+            },
+          },
+        ],
       };
     }
   },
 
   // This phase checks to see if the user making the comment is allowed to do so
   // considering their reliability (Trust) status.
-  (context) => {
+  context => {
     if (context.user && context.user.metadata) {
-
       // If the user is not a reliable commenter (passed the unreliability
       // threshold by having too many rejected comments) then we can change the
       // status of the comment to `SYSTEM_WITHHELD`, therefore pushing the user's
       // comments away from the public eye until a moderator can manage them. This of
       // course can only be applied if the comment's current status is `NONE`,
       // we don't want to interfere if the comment was rejected.
-      if (KarmaService.isReliable('comment', context.user.metadata.trust) === false) {
-
+      if (
+        KarmaService.isReliable('comment', context.user.metadata.trust) ===
+        false
+      ) {
         // Add the flag related to Trust to the comment.
         return {
           status: 'SYSTEM_WITHHELD',
-          actions: [{
-            action_type: 'FLAG',
-            user_id: null,
-            group_id: 'TRUST',
-            metadata: {
-              trust: context.user.metadata.trust,
-            }
-          }],
+          actions: [
+            {
+              action_type: 'FLAG',
+              user_id: null,
+              group_id: 'TRUST',
+              metadata: {
+                trust: context.user.metadata.trust,
+              },
+            },
+          ],
         };
       }
     }
@@ -374,7 +368,6 @@ const moderationPhases = [
 
   // This phase checks to see if the comment was already prescribed a status.
   (context, comment) => {
-
     // If the status was already defined, don't redefine it. It's only defined
     // when specific external conditions exist, we don't want to override that.
     if (comment.status && comment.status.length > 0) {
@@ -386,8 +379,7 @@ const moderationPhases = [
 
   // This phase checks to see if the settings have premod enabled, if they do,
   // the comment is premod, otherwise, it's just none.
-  (context, comment, {assetSettings: {moderation}}) => {
-
+  (context, comment, { assetSettings: { moderation } }) => {
     // If the settings say that we're in premod mode, then the comment is in
     // premod status.
     if (moderation === 'PRE') {
@@ -399,7 +391,7 @@ const moderationPhases = [
     return {
       status: 'NONE',
     };
-  }
+  },
 ];
 
 /**
@@ -411,7 +403,6 @@ const moderationPhases = [
  * @return {Promise}              resolves to the comment's status and actions
  */
 const resolveCommentModeration = async (context, comment) => {
-
   // First we filter the comment contents to ensure that we note any validation
   // issues.
   let [wordlist, settings] = await filterNewComment(context, comment);
@@ -419,7 +410,6 @@ const resolveCommentModeration = async (context, comment) => {
   // Get the asset from the loader.
   const asset = await context.loaders.Assets.getByID.load(comment.asset_id);
   if (!asset) {
-
     // And leave now if this asset wasn't found.
     throw errors.ErrNotFound;
   }
@@ -439,7 +429,6 @@ const resolveCommentModeration = async (context, comment) => {
     });
 
     if (result) {
-
       if (result.actions) {
         actions.push(...result.actions);
       }
@@ -447,7 +436,7 @@ const resolveCommentModeration = async (context, comment) => {
       // If this result contained a status, then we've finished resolving
       // phases!
       if (result.status) {
-        return {status: result.status, actions};
+        return { status: result.status, actions };
       }
     }
   }
@@ -462,11 +451,10 @@ const resolveCommentModeration = async (context, comment) => {
  * @return {Promise}             resolves to a new comment
  */
 const createPublicComment = async (context, comment) => {
-
   // We then take the wordlist and the comment into consideration when
   // considering what status to assign the new comment, and resolve the new
   // status to set the comment to.
-  let {actions, status} = await resolveCommentModeration(context, comment);
+  let { actions, status } = await resolveCommentModeration(context, comment);
 
   // Assign status to comment.
   comment.status = status;
@@ -484,10 +472,17 @@ const createPublicComment = async (context, comment) => {
 
 // createActions will for each of the provided actions, create the given action
 // on the comment at the same time using Promise.all.
-const createActions = async (item_id, actions = []) => Promise.all(actions.map((action) => merge(action, {
-  item_id,
-  item_type: 'COMMENTS',
-})).map((action) => ActionsService.create(action)));
+const createActions = async (item_id, actions = []) =>
+  Promise.all(
+    actions
+      .map(action =>
+        merge(action, {
+          item_id,
+          item_type: 'COMMENTS',
+        })
+      )
+      .map(action => ActionsService.create(action))
+  );
 
 /**
  * Sets the status of a comment
@@ -496,8 +491,12 @@ const createActions = async (item_id, actions = []) => Promise.all(actions.map((
  * @param {String} id          identifier of the comment  (uuid)
  * @param {String} status      the new status of the comment
  */
-const setStatus = async ({user, loaders: {Comments}}, {id, status}) => {
-  let comment = await CommentsService.pushStatus(id, status, user ? user.id : null);
+const setStatus = async ({ user, loaders: { Comments } }, { id, status }) => {
+  let comment = await CommentsService.pushStatus(
+    id,
+    status,
+    user ? user.id : null
+  );
 
   // If the loaders are present, clear the caches for these values because we
   // just added a new comment, hence the counts should be updated. It would
@@ -523,17 +522,21 @@ const setStatus = async ({user, loaders: {Comments}}, {id, status}) => {
  * @param {Object} edit       describes how to edit the comment
  * @param {String} edit.body  the new Comment body
  */
-const edit = async (context, {id, asset_id, edit: {body}}) => {
-
+const edit = async (context, { id, asset_id, edit: { body } }) => {
   // Build up the new comment we're setting. We need to check this with
   // moderation now.
-  let comment = {id, asset_id, body};
+  let comment = { id, asset_id, body };
 
   // Determine the new status of the comment.
-  const {actions, status} = await resolveCommentModeration(context, comment);
+  const { actions, status } = await resolveCommentModeration(context, comment);
 
   // Execute the edit.
-  comment = await CommentsService.edit({id, author_id: context.user.id, body, status});
+  comment = await CommentsService.edit({
+    id,
+    author_id: context.user.id,
+    body,
+    status,
+  });
 
   // Create all the actions that were determined during the moderation check
   // phase.
@@ -545,25 +548,25 @@ const edit = async (context, {id, asset_id, edit: {body}}) => {
   return comment;
 };
 
-module.exports = (context) => {
+module.exports = context => {
   let mutators = {
     Comment: {
       create: () => Promise.reject(errors.ErrNotAuthorized),
       setStatus: () => Promise.reject(errors.ErrNotAuthorized),
-      edit: () => Promise.reject(errors.ErrNotAuthorized)
-    }
+      edit: () => Promise.reject(errors.ErrNotAuthorized),
+    },
   };
 
   if (context.user && context.user.can(CREATE_COMMENT)) {
-    mutators.Comment.create = (comment) => createPublicComment(context, comment);
+    mutators.Comment.create = comment => createPublicComment(context, comment);
   }
 
   if (context.user && context.user.can(SET_COMMENT_STATUS)) {
-    mutators.Comment.setStatus = (action) => setStatus(context, action);
+    mutators.Comment.setStatus = action => setStatus(context, action);
   }
 
   if (context.user && context.user.can(EDIT_COMMENT)) {
-    mutators.Comment.edit = (action) => edit(context, action);
+    mutators.Comment.edit = action => edit(context, action);
   }
 
   return mutators;
diff --git a/graph/mutators/index.js b/graph/mutators/index.js
index 0f290c69a..e6b27fbcd 100644
--- a/graph/mutators/index.js
+++ b/graph/mutators/index.js
@@ -12,7 +12,6 @@ const User = require('./user');
 const plugins = require('../../services/plugins');
 
 let mutators = [
-
   // Load in the core mutators.
   Comment,
   Action,
@@ -23,12 +22,11 @@ let mutators = [
   User,
 
   // Load the plugin mutators from the manager.
-  ...plugins
-    .get('server', 'mutators').map(({plugin, mutators}) => {
-      debug(`added plugin '${plugin.name}'`);
+  ...plugins.get('server', 'mutators').map(({ plugin, mutators }) => {
+    debug(`added plugin '${plugin.name}'`);
 
-      return mutators;
-    })
+    return mutators;
+  }),
 ];
 
 /**
@@ -36,12 +34,12 @@ let mutators = [
  * @param  {Object} context the context of the GraphQL request
  * @return {Object}         object of mutators
  */
-module.exports = (context) => {
-
+module.exports = context => {
   // We need to return an object to be accessed.
-  return _.merge(...mutators.map((mutators) => {
-
-    // Each set of mutators is a function which takes the context.
-    return mutators(context);
-  }));
+  return _.merge(
+    ...mutators.map(mutators => {
+      // Each set of mutators is a function which takes the context.
+      return mutators(context);
+    })
+  );
 };
diff --git a/graph/mutators/settings.js b/graph/mutators/settings.js
index 59613ae6f..639b0619b 100644
--- a/graph/mutators/settings.js
+++ b/graph/mutators/settings.js
@@ -1,18 +1,16 @@
 const errors = require('../../errors');
 
-const {
-  UPDATE_SETTINGS,
-} = require('../../perms/constants');
+const { UPDATE_SETTINGS } = require('../../perms/constants');
 
 const SettingsService = require('../../services/settings');
 
 const update = async (ctx, settings) => SettingsService.update(settings);
 
-module.exports = (ctx) => {
+module.exports = ctx => {
   let mutators = {
     Settings: {
       update: () => Promise.reject(errors.ErrNotAuthorized),
-    }
+    },
   };
 
   if (ctx.user) {
diff --git a/graph/mutators/tag.js b/graph/mutators/tag.js
index dc2f96a68..c6d8d4c40 100644
--- a/graph/mutators/tag.js
+++ b/graph/mutators/tag.js
@@ -1,38 +1,47 @@
 const TagsService = require('../../services/tags');
 const errors = require('../../errors');
-const {ADD_COMMENT_TAG, REMOVE_COMMENT_TAG} = require('../../perms/constants');
+const {
+  ADD_COMMENT_TAG,
+  REMOVE_COMMENT_TAG,
+} = require('../../perms/constants');
 
 /**
  * Modifies the targeted model with the specified operation to add/remove a tag.
  */
-const modify = async ({user, loaders: {Tags}}, operation, {name, id, item_type, asset_id}) => {
-
+const modify = async (
+  { user, loaders: { Tags } },
+  operation,
+  { name, id, item_type, asset_id }
+) => {
   // Get the global list of tags from the dataloader.
-  const tags = await Tags.getAll.load({id, item_type, asset_id});
+  const tags = await Tags.getAll.load({ id, item_type, asset_id });
 
   // Resolve the TagLink that should be used to insert to the user. This will
-  // addtionally return with an ownership property that can be used to determine
+  // additionally return with an ownership property that can be used to determine
   // that the user who adds this tag must also be the owner of the resource.
-  let {tagLink, ownership} = TagsService.resolveLink(user, tags, {name, item_type});
+  let { tagLink, ownership } = TagsService.resolveLink(user, tags, {
+    name,
+    item_type,
+  });
 
   // Actually modify the tag on the model.
   return operation(id, item_type, tagLink, ownership);
 };
 
-module.exports = (context) => {
+module.exports = context => {
   let mutators = {
     Tag: {
       add: () => Promise.reject(errors.ErrNotAuthorized),
-      remove: () => Promise.reject(errors.ErrNotAuthorized)
-    }
+      remove: () => Promise.reject(errors.ErrNotAuthorized),
+    },
   };
 
   if (context.user && context.user.can(ADD_COMMENT_TAG)) {
-    mutators.Tag.add = (tag) => modify(context, TagsService.add, tag);
+    mutators.Tag.add = tag => modify(context, TagsService.add, tag);
   }
 
   if (context.user && context.user.can(REMOVE_COMMENT_TAG)) {
-    mutators.Tag.remove = (tag) => modify(context, TagsService.remove, tag);
+    mutators.Tag.remove = tag => modify(context, TagsService.remove, tag);
   }
 
   return mutators;
diff --git a/graph/mutators/token.js b/graph/mutators/token.js
index 2a1028596..5883a2f09 100644
--- a/graph/mutators/token.js
+++ b/graph/mutators/token.js
@@ -1,13 +1,10 @@
 const errors = require('../../errors');
 const TokensService = require('../../services/tokens');
-const {
-  CREATE_TOKEN,
-  REVOKE_TOKEN
-} = require('../../perms/constants');
+const { CREATE_TOKEN, REVOKE_TOKEN } = require('../../perms/constants');
 
 // Creates a new token for a user.
-const createToken = async ({user}, {name}) => {
-  let {pat, jwt} = await TokensService.create(user.id, name);
+const createToken = async ({ user }, { name }) => {
+  let { pat, jwt } = await TokensService.create(user.id, name);
 
   // Attach the token to the PAT.
   pat.jwt = jwt;
@@ -17,24 +14,24 @@ const createToken = async ({user}, {name}) => {
 };
 
 // Revokes the token from the user.
-const revokeToken = async ({user}, {id}) => {
+const revokeToken = async ({ user }, { id }) => {
   return TokensService.revoke(user.id, id);
 };
 
-module.exports = (context) => {
+module.exports = context => {
   let mutators = {
     Token: {
       create: () => Promise.reject(errors.ErrNotAuthorized),
-      revoke: () => Promise.reject(errors.ErrNotAuthorized)
-    }
+      revoke: () => Promise.reject(errors.ErrNotAuthorized),
+    },
   };
 
   if (context.user && context.user.can(CREATE_TOKEN)) {
-    mutators.Token.create = (input) => createToken(context, input);
+    mutators.Token.create = input => createToken(context, input);
   }
 
   if (context.user && context.user.can(REVOKE_TOKEN)) {
-    mutators.Token.revoke = (input) => revokeToken(context, input);
+    mutators.Token.revoke = input => revokeToken(context, input);
   }
 
   return mutators;
diff --git a/graph/mutators/user.js b/graph/mutators/user.js
index 31fa229aa..5e7df2db8 100644
--- a/graph/mutators/user.js
+++ b/graph/mutators/user.js
@@ -1,60 +1,118 @@
 const errors = require('../../errors');
 const UsersService = require('../../services/users');
-const {SET_USER_STATUS, SUSPEND_USER, REJECT_USERNAME} = require('../../perms/constants');
+const {
+  CHANGE_USERNAME,
+  SET_USERNAME,
+  SET_USER_USERNAME_STATUS,
+  SET_USER_BAN_STATUS,
+  SET_USER_SUSPENSION_STATUS,
+  UPDATE_USER_ROLES,
+} = require('../../perms/constants');
 
-const setUserStatus = async ({pubsub}, {id, status}) => {
-  const result = await UsersService.setStatus(id, status);
-  if (result && result.status === 'BANNED') {
-    pubsub.publish('userBanned', result);
+const setUserUsernameStatus = async (ctx, id, status) => {
+  const user = await UsersService.setUsernameStatus(id, status, ctx.user.id);
+  if (status === 'REJECTED') {
+    ctx.pubsub.publish('usernameRejected', user);
+  } else if (status === 'APPROVED') {
+    ctx.pubsub.publish('usernameApproved', user);
   }
-  return result;
 };
 
-const suspendUser = async ({pubsub}, {id, message, until}) => {
-  const result = await UsersService.suspendUser(id, message, until);
-  if (result) {
-    pubsub.publish('userSuspended', result);
+const setUserBanStatus = async (ctx, id, status = false, message = null) => {
+  const user = await UsersService.setBanStatus(
+    id,
+    status,
+    ctx.user.id,
+    message
+  );
+  if (user.banned) {
+    ctx.pubsub.publish('userBanned', user);
   }
-  return result;
 };
 
-const rejectUsername = async ({pubsub}, {id, message}) => {
-  const result = await UsersService.rejectUsername(id, message);
-  if (result) {
-    pubsub.publish('usernameRejected', result);
+const setUserSuspensionStatus = async (
+  ctx,
+  id,
+  until = null,
+  message = null
+) => {
+  const user = await UsersService.setSuspensionStatus(
+    id,
+    until,
+    ctx.user.id,
+    message
+  );
+  if (user.suspended) {
+    ctx.pubsub.publish('userSuspended', user);
   }
-  return result;
 };
 
-const ignoreUser = ({user}, userToIgnore) => {
+const ignoreUser = ({ user }, userToIgnore) => {
   return UsersService.ignoreUsers(user.id, [userToIgnore.id]);
 };
 
-const stopIgnoringUser = ({user}, userToStopIgnoring) => {
+const stopIgnoringUser = ({ user }, userToStopIgnoring) => {
   return UsersService.stopIgnoringUsers(user.id, [userToStopIgnoring.id]);
 };
 
-module.exports = (context) => {
+const changeUsername = async (ctx, id, username) => {
+  return UsersService.changeUsername(id, username, ctx.user.id);
+};
+
+const setUsername = async (ctx, id, username) => {
+  return UsersService.setUsername(id, username, ctx.user.id);
+};
+
+const setRole = (ctx, id, role) => {
+  return UsersService.setRole(id, role);
+};
+
+module.exports = ctx => {
   let mutators = {
     User: {
-      setUserStatus: () => Promise.reject(errors.ErrNotAuthorized),
-      suspendUser: () => Promise.reject(errors.ErrNotAuthorized),
-      rejectUsername: () => Promise.reject(errors.ErrNotAuthorized),
-      ignoreUser: (action) => ignoreUser(context, action),
-      stopIgnoringUser: (action) => stopIgnoringUser(context, action),
-    }
+      changeUsername: () => Promise.reject(errors.ErrNotAuthorized),
+      ignoreUser: () => Promise.reject(errors.ErrNotAuthorized),
+      setRole: () => Promise.reject(errors.ErrNotAuthorized),
+      setUserBanStatus: () => Promise.reject(errors.ErrNotAuthorized),
+      setUserSuspensionStatus: () => Promise.reject(errors.ErrNotAuthorized),
+      setUserUsernameStatus: () => Promise.reject(errors.ErrNotAuthorized),
+      setUsername: () => Promise.reject(errors.ErrNotAuthorized),
+      stopIgnoringUser: () => Promise.reject(errors.ErrNotAuthorized),
+    },
   };
 
-  if (context.user && context.user.can(SET_USER_STATUS)) {
-    mutators.User.setUserStatus = (action) => setUserStatus(context, action);
-  }
+  if (ctx.user) {
+    mutators.User.ignoreUser = action => ignoreUser(ctx, action);
+    mutators.User.stopIgnoringUser = action => stopIgnoringUser(ctx, action);
 
-  if (context.user && context.user.can(SUSPEND_USER)) {
-    mutators.User.suspendUser = (action) => suspendUser(context, action);
-  }
+    if (ctx.user.can(UPDATE_USER_ROLES)) {
+      mutators.User.setRole = (id, role) => setRole(ctx, id, role);
+    }
 
-  if (context.user && context.user.can(REJECT_USERNAME)) {
-    mutators.User.rejectUsername = (action) => rejectUsername(context, action);
+    if (ctx.user.can(CHANGE_USERNAME)) {
+      mutators.User.changeUsername = (id, username) =>
+        changeUsername(ctx, id, username);
+    }
+
+    if (ctx.user.can(SET_USERNAME)) {
+      mutators.User.setUsername = (id, username) =>
+        setUsername(ctx, id, username);
+    }
+
+    if (ctx.user.can(SET_USER_USERNAME_STATUS)) {
+      mutators.User.setUserUsernameStatus = (id, status) =>
+        setUserUsernameStatus(ctx, id, status);
+    }
+
+    if (ctx.user.can(SET_USER_BAN_STATUS)) {
+      mutators.User.setUserBanStatus = (id, status, message) =>
+        setUserBanStatus(ctx, id, status, message);
+    }
+
+    if (ctx.user.can(SET_USER_SUSPENSION_STATUS)) {
+      mutators.User.setUserSuspensionStatus = (id, until, message) =>
+        setUserSuspensionStatus(ctx, id, until, message);
+    }
   }
 
   return mutators;
diff --git a/graph/resolvers/action.js b/graph/resolvers/action.js
index 8ca05daf8..8a58cbbc0 100644
--- a/graph/resolvers/action.js
+++ b/graph/resolvers/action.js
@@ -1,22 +1,24 @@
-const {SEARCH_OTHER_USERS} = require('../../perms/constants');
+const { SEARCH_OTHER_USERS } = require('../../perms/constants');
 
 const Action = {
-  __resolveType({action_type}) {
+  __resolveType({ action_type }) {
     switch (action_type) {
-    case 'DONTAGREE':
-      return 'DontAgreeAction';
-    case 'FLAG':
-      return 'FlagAction';
+      case 'DONTAGREE':
+        return 'DontAgreeAction';
+      case 'FLAG':
+        return 'FlagAction';
+      default:
+        return undefined;
     }
   },
 
   // This will load the user for the specific action. We'll limit this to the
   // admin users only or the current logged in user.
-  user({user_id}, _, {loaders: {Users}, user}) {
+  user({ user_id }, _, { loaders: { Users }, user }) {
     if (user && (user.can(SEARCH_OTHER_USERS) || user_id === user.id)) {
       return Users.getByID.load(user_id);
     }
-  }
+  },
 };
 
 module.exports = Action;
diff --git a/graph/resolvers/action_summary.js b/graph/resolvers/action_summary.js
index f9c2ad324..eabdcbd0c 100644
--- a/graph/resolvers/action_summary.js
+++ b/graph/resolvers/action_summary.js
@@ -1,12 +1,14 @@
 const ActionSummary = {
-  __resolveType({action_type}) {
+  __resolveType({ action_type }) {
     switch (action_type) {
-    case 'FLAG':
-      return 'FlagActionSummary';
-    case 'DONTAGREE':
-      return 'DontAgreeActionSummary';
+      case 'FLAG':
+        return 'FlagActionSummary';
+      case 'DONTAGREE':
+        return 'DontAgreeActionSummary';
+      default:
+        return undefined;
     }
-  }
+  },
 };
 
 module.exports = ActionSummary;
diff --git a/graph/resolvers/asset.js b/graph/resolvers/asset.js
index b5fd92d34..6bdf4d19e 100644
--- a/graph/resolvers/asset.js
+++ b/graph/resolvers/asset.js
@@ -1,8 +1,7 @@
-const {decorateWithTags} = require('./util');
+const { decorateWithTags } = require('./util');
 
 const Asset = {
-  async comment({id}, {id: commentId}, {loaders: {Comments}}) {
-
+  async comment({ id }, { id: commentId }, { loaders: { Comments } }) {
     // Load the comment from the database.
     const comment = await Comments.get.load(commentId);
     if (!comment) {
@@ -16,7 +15,7 @@ const Asset = {
 
     return comment;
   },
-  comments({id}, {query, deep}, {loaders: {Comments}}) {
+  comments({ id }, { query, deep }, { loaders: { Comments } }) {
     if (!deep) {
       query.parent_id = null;
     }
@@ -26,14 +25,13 @@ const Asset = {
 
     return Comments.getByQuery(query);
   },
-  commentCount({id, commentCount}, {tags}, {loaders: {Comments}}) {
+  commentCount({ id, commentCount }, { tags }, { loaders: { Comments } }) {
     if (commentCount != null) {
       return commentCount;
     }
 
     // If we are filtering by a tag.
     if (tags && tags.length > 0) {
-
       // Then count the comments with those tags.
       return Comments.getCountByQuery({
         tags,
@@ -45,14 +43,17 @@ const Asset = {
 
     return Comments.parentCountByAssetID.load(id);
   },
-  totalCommentCount({id, totalCommentCount}, {tags}, {loaders: {Comments}}) {
+  totalCommentCount(
+    { id, totalCommentCount },
+    { tags },
+    { loaders: { Comments } }
+  ) {
     if (totalCommentCount != null) {
       return totalCommentCount;
     }
 
     // If we are filtering by a tag.
     if (tags && tags.length > 0) {
-
       // Then count the comments with those tags.
       return Comments.getCountByQuery({
         tags,
@@ -63,8 +64,7 @@ const Asset = {
 
     return Comments.countByAssetID.load(id);
   },
-  async settings({settings = null}, _, {loaders: {Settings}}) {
-
+  async settings({ settings = null }, _, { loaders: { Settings } }) {
     // Load the global settings, and merge them into the asset specific settings
     // if we have some.
     let globalSettings = await Settings.load();
@@ -75,7 +75,7 @@ const Asset = {
     }
 
     return settings;
-  }
+  },
 };
 
 // Decorate the Asset type resolver with a tags field.
diff --git a/graph/resolvers/asset_action_summary.js b/graph/resolvers/asset_action_summary.js
index c4a3cef01..cee10545b 100644
--- a/graph/resolvers/asset_action_summary.js
+++ b/graph/resolvers/asset_action_summary.js
@@ -1,12 +1,14 @@
 const AssetActionSummary = {
-  __resolveType({action_type}) {
+  __resolveType({ action_type }) {
     switch (action_type) {
-    case 'FLAG':
-      return 'FlagAssetActionSummary';
-    case 'LIKE':
-      return 'LikeAssetActionSummary';
+      case 'FLAG':
+        return 'FlagAssetActionSummary';
+      case 'LIKE':
+        return 'LikeAssetActionSummary';
+      default:
+        return undefined;
     }
-  }
+  },
 };
 
 module.exports = AssetActionSummary;
diff --git a/graph/resolvers/banned_status_history.js b/graph/resolvers/banned_status_history.js
new file mode 100644
index 000000000..a1474acd9
--- /dev/null
+++ b/graph/resolvers/banned_status_history.js
@@ -0,0 +1,7 @@
+const { decorateUserField } = require('./util');
+
+const BannedStatusHistory = {};
+
+decorateUserField(BannedStatusHistory, 'assigned_by');
+
+module.exports = BannedStatusHistory;
diff --git a/graph/resolvers/comment.js b/graph/resolvers/comment.js
index 8e063ad3c..9949a5e2e 100644
--- a/graph/resolvers/comment.js
+++ b/graph/resolvers/comment.js
@@ -1,21 +1,20 @@
-const {decorateWithTags} = require('./util');
+const { decorateWithTags } = require('./util');
 
 const Comment = {
-  hasParent({parent_id}) {
+  hasParent({ parent_id }) {
     return !!parent_id;
   },
-  parent({parent_id}, _, {loaders: {Comments}}) {
+  parent({ parent_id }, _, { loaders: { Comments } }) {
     if (parent_id == null) {
       return null;
     }
 
     return Comments.get.load(parent_id);
   },
-  user({author_id}, _, {loaders: {Users}}) {
+  user({ author_id }, _, { loaders: { Users } }) {
     return Users.getByID.load(author_id);
   },
-  replies({id, asset_id, reply_count}, {query}, {loaders: {Comments}}) {
-
+  replies({ id, asset_id, reply_count }, { query }, { loaders: { Comments } }) {
     // Don't bother looking up replies if there aren't any there!
     if (reply_count === 0) {
       return {
@@ -30,36 +29,37 @@ const Comment = {
 
     return Comments.getByQuery(query);
   },
-  replyCount({reply_count}) {
-
+  replyCount({ reply_count }) {
     // A simple remap from the underlying database model to the graph model.
     return reply_count;
   },
-  actions({id}, _, {user, loaders: {Actions}}) {
+  actions({ id }, _, { user, loaders: { Actions } }) {
     if (!user || !user.can('SEARCH_ACTIONS')) {
       return null;
     }
 
     return Actions.getByID.load(id);
   },
-  action_summaries({id, action_summaries}, _, {loaders: {Actions}}) {
+  action_summaries({ id, action_summaries }, _, { loaders: { Actions } }) {
     if (action_summaries) {
       return action_summaries;
     }
 
     return Actions.getSummariesByItemID.load(id);
   },
-  asset({asset_id}, _, {loaders: {Assets}}) {
+  asset({ asset_id }, _, { loaders: { Assets } }) {
     return Assets.getByID.load(asset_id);
   },
-  async editing(comment, _, {loaders: {Settings}}) {
+  async editing(comment, _, { loaders: { Settings } }) {
     const settings = await Settings.load();
-    const editableUntil = new Date(Number(new Date(comment.created_at)) + settings.editCommentWindowLength);
+    const editableUntil = new Date(
+      Number(new Date(comment.created_at)) + settings.editCommentWindowLength
+    );
     return {
       edited: comment.edited,
-      editableUntil: editableUntil
+      editableUntil: editableUntil,
     };
-  }
+  },
 };
 
 // Decorate the Comment type resolver with a tags field.
diff --git a/graph/resolvers/comment_status_history.js b/graph/resolvers/comment_status_history.js
index d51e71752..adeeca913 100644
--- a/graph/resolvers/comment_status_history.js
+++ b/graph/resolvers/comment_status_history.js
@@ -1,13 +1,7 @@
-const {SEARCH_OTHER_USERS} = require('../../perms/constants');
+const { decorateUserField } = require('./util');
 
-const CommentStatusHistory = {
-  assigned_by({assigned_by}, _, {user, loaders: {Users}}) {
-    if (!user || !user.can(SEARCH_OTHER_USERS) || assigned_by == null) {
-      return null;
-    }
+const CommentStatusHistory = {};
 
-    return Users.getByID.load(assigned_by);
-  }
-};
+decorateUserField(CommentStatusHistory, 'assigned_by');
 
 module.exports = CommentStatusHistory;
diff --git a/graph/resolvers/cursor.js b/graph/resolvers/cursor.js
index 2e7fec605..63f0d469f 100644
--- a/graph/resolvers/cursor.js
+++ b/graph/resolvers/cursor.js
@@ -20,16 +20,15 @@ module.exports = new GraphQLScalarType({
   },
   parseLiteral(ast) {
     switch (ast.kind) {
-    case Kind.STRING:
+      case Kind.STRING:
+        // This handles an empty string.
+        if (ast.value && ast.value.length === 0) {
+          return null;
+        }
 
-      // This handles an empty string.
-      if (ast.value && ast.value.length === 0) {
-        return null;
-      }
-
-      return new Date(ast.value);
-    default:
-      return ast.value;
+        return new Date(ast.value);
+      default:
+        return ast.value;
     }
-  }
+  },
 });
diff --git a/graph/resolvers/date.js b/graph/resolvers/date.js
index af79e3eb4..d4e72ff99 100644
--- a/graph/resolvers/date.js
+++ b/graph/resolvers/date.js
@@ -16,16 +16,15 @@ module.exports = new GraphQLScalarType({
   },
   parseLiteral(ast) {
     switch (ast.kind) {
-    case Kind.STRING:
+      case Kind.STRING:
+        // This handles an empty string.
+        if (ast.value && ast.value.length === 0) {
+          return null;
+        }
 
-      // This handles an empty string.
-      if (ast.value && ast.value.length === 0) {
+        return new Date(ast.value);
+      default:
         return null;
-      }
-
-      return new Date(ast.value);
-    default:
-      return null;
     }
-  }
+  },
 });
diff --git a/graph/resolvers/dont_agree_action.js b/graph/resolvers/dont_agree_action.js
index 25dc02503..a65a7894b 100644
--- a/graph/resolvers/dont_agree_action.js
+++ b/graph/resolvers/dont_agree_action.js
@@ -1,9 +1,3 @@
-const DontAgreeAction = {
-
-  // Stored in the metadata, extract and return.
-  reason({metadata: {reason}}) {
-    return reason;
-  }
-};
+const DontAgreeAction = {};
 
 module.exports = DontAgreeAction;
diff --git a/graph/resolvers/dont_agree_action_summary.js b/graph/resolvers/dont_agree_action_summary.js
index 520fdce3b..8daf6aed7 100644
--- a/graph/resolvers/dont_agree_action_summary.js
+++ b/graph/resolvers/dont_agree_action_summary.js
@@ -1,7 +1,3 @@
-const DontAgreeActionSummary = {
-  reason({group_id}) {
-    return group_id;
-  }
-};
+const DontAgreeActionSummary = {};
 
 module.exports = DontAgreeActionSummary;
diff --git a/graph/resolvers/flag_action.js b/graph/resolvers/flag_action.js
index dee583747..f03fb6afe 100644
--- a/graph/resolvers/flag_action.js
+++ b/graph/resolvers/flag_action.js
@@ -1,13 +1,12 @@
 const FlagAction = {
-
   // Stored in the metadata, extract and return.
-  message({metadata: {message}}) {
+  message({ metadata: { message } }) {
     return message;
   },
-  reason({group_id}) {
+  reason({ group_id }) {
     return group_id;
   },
-  user({user_id}, _, {loaders: {Users}}) {
+  user({ user_id }, _, { loaders: { Users } }) {
     if (!user_id) {
       return null;
     }
diff --git a/graph/resolvers/flag_action_summary.js b/graph/resolvers/flag_action_summary.js
index 58dda689e..9572d9743 100644
--- a/graph/resolvers/flag_action_summary.js
+++ b/graph/resolvers/flag_action_summary.js
@@ -1,7 +1,7 @@
 const FlagActionSummary = {
-  reason({group_id}) {
+  reason({ group_id }) {
     return group_id;
-  }
+  },
 };
 
 module.exports = FlagActionSummary;
diff --git a/graph/resolvers/index.js b/graph/resolvers/index.js
index 69ae9ca3e..8da8859e1 100644
--- a/graph/resolvers/index.js
+++ b/graph/resolvers/index.js
@@ -1,54 +1,62 @@
 const _ = require('lodash');
 const debug = require('debug')('talk:graph:resolvers');
 
-const ActionSummary = require('./action_summary');
 const Action = require('./action');
-const AssetActionSummary = require('./asset_action_summary');
+const ActionSummary = require('./action_summary');
 const Asset = require('./asset');
-const CommentStatusHistory = require('./comment_status_history');
+const AssetActionSummary = require('./asset_action_summary');
+const BannedStatusHistory = require('./banned_status_history');
 const Comment = require('./comment');
+const CommentStatusHistory = require('./comment_status_history');
 const Cursor = require('./cursor');
 const Date = require('./date');
-const FlagActionSummary = require('./flag_action_summary');
-const FlagAction = require('./flag_action');
 const DontAgreeAction = require('./dont_agree_action');
 const DontAgreeActionSummary = require('./dont_agree_action_summary');
+const FlagAction = require('./flag_action');
+const FlagActionSummary = require('./flag_action_summary');
 const GenericUserError = require('./generic_user_error');
 const RootMutation = require('./root_mutation');
 const RootQuery = require('./root_query');
 const Settings = require('./settings');
 const Subscription = require('./subscription');
-const TagLink = require('./tag_link');
+const SuspensionStatusHistory = require('./suspension_status_history');
 const Tag = require('./tag');
-const UserError = require('./user_error');
+const TagLink = require('./tag_link');
 const User = require('./user');
+const UserError = require('./user_error');
+const UserState = require('./user_state');
+const UsernameStatusHistory = require('./username_status_history');
 const ValidationUserError = require('./validation_user_error');
 
 const plugins = require('../../services/plugins');
 
 // Provide the core resolvers.
 let resolvers = {
-  ActionSummary,
   Action,
-  AssetActionSummary,
+  ActionSummary,
   Asset,
-  CommentStatusHistory,
+  AssetActionSummary,
+  BannedStatusHistory,
   Comment,
+  CommentStatusHistory,
   Cursor,
   Date,
-  FlagActionSummary,
-  FlagAction,
   DontAgreeAction,
   DontAgreeActionSummary,
+  FlagAction,
+  FlagActionSummary,
   GenericUserError,
   RootMutation,
   RootQuery,
   Settings,
   Subscription,
-  TagLink,
+  SuspensionStatusHistory,
   Tag,
-  UserError,
+  TagLink,
   User,
+  UserError,
+  UserState,
+  UsernameStatusHistory,
   ValidationUserError,
 };
 
@@ -57,10 +65,12 @@ let resolvers = {
  * plugin based ones. This allows plugins to extend existing resolvers as well
  * as provide new ones.
  */
-resolvers = plugins.get('server', 'resolvers').reduce((acc, {plugin, resolvers}) => {
-  debug(`added plugin '${plugin.name}'`);
+resolvers = plugins
+  .get('server', 'resolvers')
+  .reduce((acc, { plugin, resolvers }) => {
+    debug(`added plugin '${plugin.name}'`);
 
-  return _.merge(acc, resolvers);
-}, resolvers);
+    return _.merge(acc, resolvers);
+  }, resolvers);
 
 module.exports = resolvers;
diff --git a/graph/resolvers/root_mutation.js b/graph/resolvers/root_mutation.js
index f2a577d46..e99a8bd4b 100644
--- a/graph/resolvers/root_mutation.js
+++ b/graph/resolvers/root_mutation.js
@@ -1,47 +1,108 @@
 const RootMutation = {
-  createComment: async (_, {input}, {mutators: {Comment}, loaders: {Actions}}) => {
+  createComment: async (
+    _,
+    { input },
+    { mutators: { Comment }, loaders: { Actions } }
+  ) => {
     const comment = await Comment.create(input);
 
     // Retrieve actions that was assigned to comment.
     const actions = await Actions.getByID.load(comment.id);
 
-    return {comment, actions};
+    return { comment, actions };
   },
-  editComment: async (_, {id, asset_id, edit: {body}}, {mutators: {Comment}}) => ({
-    comment: await Comment.edit({id, asset_id, edit: {body}}),
+  editComment: async (
+    _,
+    { id, asset_id, edit: { body } },
+    { mutators: { Comment } }
+  ) => ({
+    comment: await Comment.edit({ id, asset_id, edit: { body } }),
   }),
-  createFlag: async (_, {flag: {item_id, item_type, reason, message}}, {mutators: {Action}}) => ({
-    flag: Action.create({item_id, item_type, action_type: 'FLAG', group_id: reason, metadata: {message}}),
+  createFlag: async (
+    _,
+    { flag: { item_id, item_type, reason, message } },
+    { mutators: { Action } }
+  ) => ({
+    flag: Action.create({
+      item_id,
+      item_type,
+      action_type: 'FLAG',
+      group_id: reason,
+      metadata: { message },
+    }),
   }),
-  createDontAgree: async (_, {dontagree: {item_id, item_type, reason, message}}, {mutators: {Action}}) => ({
-    dontagree: await Action.create({item_id, item_type, action_type: 'DONTAGREE', group_id: reason, metadata: {message}}),
+  createDontAgree: async (
+    _,
+    { dontagree: { item_id, item_type, message } },
+    { mutators: { Action } }
+  ) => ({
+    dontagree: await Action.create({
+      item_id,
+      item_type,
+      action_type: 'DONTAGREE',
+      metadata: { message },
+    }),
   }),
-  deleteAction: async (_, {id}, {mutators: {Action}}) => {
-    await Action.delete({id});
+  deleteAction: async (_, { id }, { mutators: { Action } }) => {
+    await Action.delete({ id });
   },
-  setUserStatus: async (_, {id, status}, {mutators: {User}}) => {
-    await User.setUserStatus({id, status});
+  approveUsername: async (_, { id }, { mutators: { User } }) => {
+    await User.setUserUsernameStatus(id, 'APPROVED');
   },
-  suspendUser: async (_, {input: {id, message, until}}, {mutators: {User}}) => {
-    await User.suspendUser({id, message, until});
+  rejectUsername: async (_, { id }, { mutators: { User } }) => {
+    await User.setUserUsernameStatus(id, 'REJECTED');
   },
-  rejectUsername: async (_, {input: {id, message}}, {mutators: {User}}) => {
-    await User.rejectUsername({id, message});
+  changeUsername: async (_, { id, username }, { mutators: { User } }) => {
+    await User.changeUsername(id, username);
   },
-  ignoreUser: async (_, {id}, {mutators: {User}}) => {
-    await User.ignoreUser({id});
+  setUsername: async (_, { id, username }, { mutators: { User } }) => {
+    await User.setUsername(id, username);
   },
-  stopIgnoringUser: async (_, {id}, {mutators: {User}}) => {
-    await User.stopIgnoringUser({id});
+  suspendUser: async (
+    obj,
+    { input: { id, until, message } },
+    { mutators: { User } }
+  ) => {
+    await User.setUserSuspensionStatus(id, until, message);
   },
-  updateAssetSettings: async (_, {id, input: settings}, {mutators: {Asset}}) => {
+  unsuspendUser: async (obj, { input: { id } }, { mutators: { User } }) => {
+    await User.setUserSuspensionStatus(id);
+  },
+  banUser: async (obj, { input: { id, message } }, { mutators: { User } }) => {
+    await User.setUserBanStatus(id, true, message);
+  },
+  unbanUser: async (obj, { input: { id } }, { mutators: { User } }) => {
+    await User.setUserBanStatus(id, false);
+  },
+  ignoreUser: async (_, { id }, { mutators: { User } }) => {
+    await User.ignoreUser({ id });
+  },
+  stopIgnoringUser: async (_, { id }, { mutators: { User } }) => {
+    await User.stopIgnoringUser({ id });
+  },
+  updateAssetSettings: async (
+    _,
+    { id, input: settings },
+    { mutators: { Asset } }
+  ) => {
     await Asset.updateSettings(id, settings);
   },
-  updateAssetStatus: async (_, {id, input: status}, {mutators: {Asset}}) => {
+  updateAssetStatus: async (
+    _,
+    { id, input: status },
+    { mutators: { Asset } }
+  ) => {
     await Asset.updateStatus(id, status);
   },
-  setCommentStatus: async (_, {id, status}, {mutators: {Comment}, pubsub}) => {
-    const comment = await Comment.setStatus({id, status});
+  setUserRole: async (_, { id, role }, { mutators: { User } }) => {
+    await User.setRole(id, role);
+  },
+  setCommentStatus: async (
+    _,
+    { id, status },
+    { mutators: { Comment }, pubsub }
+  ) => {
+    const comment = await Comment.setStatus({ id, status });
     if (status === 'ACCEPTED') {
       pubsub.publish('commentAccepted', comment);
     } else if (status === 'REJECTED') {
@@ -50,21 +111,25 @@ const RootMutation = {
       pubsub.publish('commentReset', comment);
     }
   },
-  addTag: async (_, {tag}, {mutators: {Tag}}) => {
+  addTag: async (_, { tag }, { mutators: { Tag } }) => {
     await Tag.add(tag);
   },
-  removeTag: async (_, {tag}, {mutators: {Tag}}) => {
+  removeTag: async (_, { tag }, { mutators: { Tag } }) => {
     await Tag.remove(tag);
   },
-  updateSettings: async (_, {input: settings}, {mutators: {Settings}}) => {
+  updateSettings: async (
+    _,
+    { input: settings },
+    { mutators: { Settings } }
+  ) => {
     await Settings.update(settings);
   },
-  createToken: async (_, {input}, {mutators: {Token}}) => ({
+  createToken: async (_, { input }, { mutators: { Token } }) => ({
     token: await Token.create(input),
   }),
-  revokeToken: async (_, {input}, {mutators: {Token}}) => {
+  revokeToken: async (_, { input }, { mutators: { Token } }) => {
     await Token.revoke(input);
-  }
+  },
 };
 
 module.exports = RootMutation;
diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js
index aa8b90f20..bf221610b 100644
--- a/graph/resolvers/root_query.js
+++ b/graph/resolvers/root_query.js
@@ -1,45 +1,49 @@
 const {
   SEARCH_ASSETS,
   SEARCH_OTHERS_COMMENTS,
-  SEARCH_OTHER_USERS
+  SEARCH_OTHER_USERS,
 } = require('../../perms/constants');
 
 const RootQuery = {
-  assets(_, {query}, {loaders: {Assets}, user}) {
+  assets(_, { query }, { loaders: { Assets }, user }) {
     if (user == null || !user.can(SEARCH_ASSETS)) {
       return null;
     }
 
     return Assets.getByQuery(query);
   },
-  asset(_, query, {loaders: {Assets}}) {
+  asset(_, query, { loaders: { Assets } }) {
     if (query.id) {
       return Assets.getByID.load(query.id);
     }
 
     return Assets.getByURL(query.url);
   },
-  settings(_, args, {loaders: {Settings}}) {
+  settings(_, args, { loaders: { Settings } }) {
     return Settings.load();
   },
 
   // This endpoint is used for loading moderation queues, so hide it in the
   // event that we aren't an admin.
-  async comments(_, {query}, {loaders: {Comments}}) {
+  async comments(_, { query }, { loaders: { Comments } }) {
     return Comments.getByQuery(query);
   },
 
-  comment(_, {id}, {loaders: {Comments}}) {
+  comment(_, { id }, { loaders: { Comments } }) {
     return Comments.get.load(id);
   },
 
-  async commentCount(_, {query}, {user, loaders: {Comments, Assets}}) {
+  async commentCount(_, { query }, { user, loaders: { Comments, Assets } }) {
     if (user == null || !user.can(SEARCH_OTHERS_COMMENTS)) {
       return null;
     }
 
-    const {asset_url, asset_id} = query;
-    if ((!asset_id || asset_id.length === 0) && asset_url && asset_url.length > 0) {
+    const { asset_url, asset_id } = query;
+    if (
+      (!asset_id || asset_id.length === 0) &&
+      asset_url &&
+      asset_url.length > 0
+    ) {
       let asset = await Assets.findByUrl(asset_url);
       if (asset) {
         query.asset_id = asset.id;
@@ -49,7 +53,7 @@ const RootQuery = {
     return Comments.getCountByQuery(query);
   },
 
-  async userCount(_, {query}, {user, loaders: {Users}}) {
+  async userCount(_, { query }, { user, loaders: { Users } }) {
     if (user == null || !user.can(SEARCH_OTHER_USERS)) {
       return null;
     }
@@ -59,7 +63,7 @@ const RootQuery = {
 
   // This returns the current user, ensure that if we aren't logged in, we
   // return null.
-  me(_, args, {user}) {
+  me(_, args, { user }) {
     if (user == null) {
       return null;
     }
@@ -68,7 +72,7 @@ const RootQuery = {
   },
 
   // this returns an arbitrary user
-  user(_, {id}, {user, loaders: {Users}}) {
+  user(_, { id }, { user, loaders: { Users } }) {
     if (user == null || !user.can(SEARCH_OTHER_USERS)) {
       return null;
     }
@@ -78,13 +82,13 @@ const RootQuery = {
 
   // This endpoint is used for loading the user moderation queues (users whose username has been flagged),
   // so hide it in the event that we aren't an admin.
-  async users(_, {query}, {user, loaders: {Users}}) {
+  users(_, { query }, { user, loaders: { Users } }) {
     if (user == null || !user.can(SEARCH_OTHER_USERS)) {
       return null;
     }
 
     return Users.getByQuery(query);
-  }
+  },
 };
 
 module.exports = RootQuery;
diff --git a/graph/resolvers/settings.js b/graph/resolvers/settings.js
index 30e614c38..6ad1aa455 100644
--- a/graph/resolvers/settings.js
+++ b/graph/resolvers/settings.js
@@ -1,18 +1,16 @@
-const {
-  VIEW_PROTECTED_SETTINGS,
-} = require('../../perms/constants');
+const { VIEW_PROTECTED_SETTINGS } = require('../../perms/constants');
 
-const {decorateWithPermissionCheck} = require('./util');
+const { decorateWithPermissionCheck } = require('./util');
 
 const Settings = {};
 
 // PROTECTED_SETTINGS are the settings keys that must be protected for only some
 // eyes.
 const PROTECTED_SETTINGS = {
-  'premodLinksEnable': [VIEW_PROTECTED_SETTINGS],
-  'autoCloseStream': [VIEW_PROTECTED_SETTINGS],
-  'wordlist': [VIEW_PROTECTED_SETTINGS],
-  'domains': [VIEW_PROTECTED_SETTINGS],
+  premodLinksEnable: [VIEW_PROTECTED_SETTINGS],
+  autoCloseStream: [VIEW_PROTECTED_SETTINGS],
+  wordlist: [VIEW_PROTECTED_SETTINGS],
+  domains: [VIEW_PROTECTED_SETTINGS],
 };
 
 // decorate the fields on the settings resolver with a permission check.
diff --git a/graph/resolvers/suspension_status_history.js b/graph/resolvers/suspension_status_history.js
new file mode 100644
index 000000000..6038df18a
--- /dev/null
+++ b/graph/resolvers/suspension_status_history.js
@@ -0,0 +1,7 @@
+const { decorateUserField } = require('./util');
+
+const SuspensionStatusHistory = {};
+
+decorateUserField(SuspensionStatusHistory, 'assigned_by');
+
+module.exports = SuspensionStatusHistory;
diff --git a/graph/resolvers/tag.js b/graph/resolvers/tag.js
index e1cd7922d..2844c4eaf 100644
--- a/graph/resolvers/tag.js
+++ b/graph/resolvers/tag.js
@@ -1,5 +1,3 @@
-const Tag = {
-
-};
+const Tag = {};
 
 module.exports = Tag;
diff --git a/graph/resolvers/tag_link.js b/graph/resolvers/tag_link.js
index af3b92eb3..5df43d05b 100644
--- a/graph/resolvers/tag_link.js
+++ b/graph/resolvers/tag_link.js
@@ -1,11 +1,11 @@
-const {SEARCH_OTHER_USERS} = require('../../perms/constants');
+const { SEARCH_OTHER_USERS } = require('../../perms/constants');
 
 const TagLink = {
-  assigned_by({assigned_by}, _, {user, loaders: {Users}}) {
+  assigned_by({ assigned_by }, _, { user, loaders: { Users } }) {
     if (user && user.can(SEARCH_OTHER_USERS) && assigned_by != null) {
       return Users.getByID.load(assigned_by);
     }
-  }
+  },
 };
 
 module.exports = TagLink;
diff --git a/graph/resolvers/user.js b/graph/resolvers/user.js
index d95ae53f6..11db4c366 100644
--- a/graph/resolvers/user.js
+++ b/graph/resolvers/user.js
@@ -1,28 +1,25 @@
-const {decorateWithTags} = require('./util');
+const { decorateWithTags } = require('./util');
 const KarmaService = require('../../services/karma');
 const {
   SEARCH_ACTIONS,
   SEARCH_OTHER_USERS,
   SEARCH_OTHERS_COMMENTS,
-  UPDATE_USER_ROLES,
-  VIEW_SUSPENSION_INFO,
-  LIST_OWN_TOKENS
+  VIEW_USER_ROLE,
+  LIST_OWN_TOKENS,
+  VIEW_USER_STATUS,
 } = require('../../perms/constants');
 
 const User = {
-  action_summaries({id}, _, {loaders: {Actions}}) {
+  action_summaries({ id }, _, { loaders: { Actions } }) {
     return Actions.getSummariesByItemID.load(id);
   },
-  actions({id}, _, {user, loaders: {Actions}}) {
-
+  actions({ id }, _, { user, loaders: { Actions } }) {
     // Only return the actions if the user is not an admin.
     if (user && user.can(SEARCH_ACTIONS)) {
       return Actions.getByID.load(id);
     }
-
   },
-  comments({id}, {query}, {loaders: {Comments}, user}) {
-
+  comments({ id }, { query }, { loaders: { Comments }, user }) {
     // If there is no user, or there is a user, but they are requesting someone
     // else's comments, and they aren't allowed, don't return then anything!
     if (!user || (user.id !== id && !user.can(SEARCH_OTHERS_COMMENTS))) {
@@ -34,8 +31,7 @@ const User = {
 
     return Comments.getByQuery(query);
   },
-  profiles({profiles}, _, {user}) {
-
+  profiles({ profiles }, _, { user }) {
     // if the user is not an admin, do not return the profiles
     if (user && user.can(SEARCH_OTHER_USERS)) {
       return profiles;
@@ -43,18 +39,17 @@ const User = {
 
     return null;
   },
-  tokens({id, tokens}, args, {user}) {
-    if (!user || ((user.id !== id) && !user.can(LIST_OWN_TOKENS))) {
+  tokens({ id, tokens }, args, { user }) {
+    if (!user || (user.id !== id && !user.can(LIST_OWN_TOKENS))) {
       return null;
     }
 
     return tokens;
   },
-  async ignoredUsers({id}, args, {user, loaders: {Users}}) {
-
+  ignoredUsers({ id }, args, { user, loaders: { Users } }) {
     // Only allow a logged in user that is either the current user or is a staff
     // member to access the ignoredUsers of a given user.
-    if (!user || ((user.id !== id) && !user.can(SEARCH_OTHER_USERS))) {
+    if (!user || (user.id !== id && !user.can(SEARCH_OTHER_USERS))) {
       return null;
     }
 
@@ -63,32 +58,32 @@ const User = {
       return [];
     }
 
-    const connection = await Users.getByQuery({ids: user.ignoresUsers});
-    return connection.nodes;
+    return Users.getByID.loadMany(user.ignoresUsers);
   },
-  roles({id, roles}, _, {user}) {
-
+  role({ id, role }, _, { user }) {
     // If the user is not an admin, only return the current user's roles.
-    if (user && (user.can(UPDATE_USER_ROLES) || user.id === id)) {
-      return roles;
+    if (user && (user.can(VIEW_USER_ROLE) || user.id === id)) {
+      return role;
     }
 
     return null;
   },
 
   // Extract the reliability from the user metadata if they have permission.
-  reliable(user, _, {user: requestingUser}) {
+  reliable(user, _, { user: requestingUser }) {
     if (requestingUser && requestingUser.can(SEARCH_ACTIONS)) {
       return KarmaService.model(user);
     }
   },
 
-  suspension({id, suspension}, _, {user}) {
-    if (user.id !== id && !user.can(VIEW_SUSPENSION_INFO)) {
-      return null;
+  state(user, args, ctx) {
+    if (
+      ctx.user &&
+      (ctx.user.id === user.id || ctx.user.can(VIEW_USER_STATUS))
+    ) {
+      return user;
     }
-    return suspension;
-  }
+  },
 };
 
 // Decorate the User type resolver with a tags field.
diff --git a/graph/resolvers/user_error.js b/graph/resolvers/user_error.js
index 3716fa126..926d39466 100644
--- a/graph/resolvers/user_error.js
+++ b/graph/resolvers/user_error.js
@@ -1,11 +1,11 @@
 const UserError = {
-  __resolveType({field_name}) {
+  __resolveType({ field_name }) {
     if (field_name) {
       return 'ValidationUserError';
     }
 
     return 'GenericUserError';
-  }
+  },
 };
 
 module.exports = UserError;
diff --git a/graph/resolvers/user_state.js b/graph/resolvers/user_state.js
new file mode 100644
index 000000000..0436101e0
--- /dev/null
+++ b/graph/resolvers/user_state.js
@@ -0,0 +1,14 @@
+const { VIEW_USER_STATUS } = require('../../perms/constants');
+
+const UserState = {
+  status: (user, args, ctx) => {
+    if (
+      ctx.user &&
+      (ctx.user.id === user.id || ctx.user.can(VIEW_USER_STATUS))
+    ) {
+      return user.status;
+    }
+  },
+};
+
+module.exports = UserState;
diff --git a/graph/resolvers/username_status_history.js b/graph/resolvers/username_status_history.js
new file mode 100644
index 000000000..c62cbf28a
--- /dev/null
+++ b/graph/resolvers/username_status_history.js
@@ -0,0 +1,7 @@
+const { decorateUserField } = require('./util');
+
+const UsernameStatusHistory = {};
+
+decorateUserField(UsernameStatusHistory, 'assigned_by');
+
+module.exports = UsernameStatusHistory;
diff --git a/graph/resolvers/util.js b/graph/resolvers/util.js
index cf3162679..ff9ab9c95 100644
--- a/graph/resolvers/util.js
+++ b/graph/resolvers/util.js
@@ -1,15 +1,19 @@
-const {ADD_COMMENT_TAG} = require('../../perms/constants');
+const {
+  ADD_COMMENT_TAG,
+  SEARCH_OTHER_USERS,
+} = require('../../perms/constants');
+const property = require('lodash/property');
 
 /**
  * Decorates the typeResolver with the tags field.
  */
-const decorateWithTags = (typeResolver) => {
-  typeResolver.tags = ({tags = []}, _, {user}) => {
+const decorateWithTags = typeResolver => {
+  typeResolver.tags = ({ tags = [] }, _, { user }) => {
     if (user && user.can(ADD_COMMENT_TAG)) {
       return tags;
     }
 
-    return tags.filter((t) => t.tag.permissions.public);
+    return tags.filter(t => t.tag.permissions.public);
   };
 };
 
@@ -22,7 +26,7 @@ const decorateWithTags = (typeResolver) => {
  */
 const decorateWithPermissionCheck = (typeResolver, protect) => {
   for (const [field, permissions] of Object.entries(protect)) {
-    let fieldResolver = (obj) => obj[field];
+    let fieldResolver = property(field);
     if (field in typeResolver) {
       fieldResolver = typeResolver[field];
     }
@@ -37,7 +41,39 @@ const decorateWithPermissionCheck = (typeResolver, protect) => {
   }
 };
 
+/**
+ * decorateUserField will decorate the user field accesses with correct
+ * permission checks.
+ *
+ * @param {Object} typeResolver the type resolver
+ * @param {String} field the field to decorate
+ */
+const decorateUserField = (typeResolver, field) => {
+  // The default resolver for the user decorator is loading the user by id.
+  let fieldResolver = (obj, args, ctx) =>
+    ctx.loaders.Users.getByID.load(obj[field]);
+
+  // The resolver can be overridden however. This decorator will simply wrap the
+  // field with a permission check.
+  if (field in typeResolver) {
+    fieldResolver = typeResolver[field];
+  }
+
+  typeResolver[field] = (obj, args, ctx, info) => {
+    if (
+      !ctx.user ||
+      obj[field] === null ||
+      (ctx.user.id !== obj[field] && !ctx.user.can(SEARCH_OTHER_USERS))
+    ) {
+      return null;
+    }
+
+    return fieldResolver(obj, args, ctx, info);
+  };
+};
+
 module.exports = {
+  decorateUserField,
   decorateWithTags,
   decorateWithPermissionCheck,
 };
diff --git a/graph/schema.js b/graph/schema.js
index d9df096a4..dff5da13a 100644
--- a/graph/schema.js
+++ b/graph/schema.js
@@ -3,14 +3,14 @@ const {
   addSchemaLevelResolveFunction,
 } = require('graphql-tools');
 const debug = require('debug')('talk:graph:schema');
-const {decorateWithHooks} = require('./hooks');
-const {decorateWithErrorHandler} = require('./errorHandler');
+const { decorateWithHooks } = require('./hooks');
+const { decorateWithErrorHandler } = require('./errorHandler');
 
 const plugins = require('../services/plugins');
 const resolvers = require('./resolvers');
 const typeDefs = require('./typeDefs');
 
-const schema = makeExecutableSchema({typeDefs, resolvers});
+const schema = makeExecutableSchema({ typeDefs, resolvers });
 
 // Plugin to the schema level resolvers to provide an before/after hook.
 decorateWithHooks(schema, plugins.get('server', 'hooks'));
@@ -19,10 +19,12 @@ decorateWithHooks(schema, plugins.get('server', 'hooks'));
 decorateWithErrorHandler(schema);
 
 // For each schemaLevelResolveFunction, add it to the schema.
-plugins.get('server', 'schemaLevelResolveFunction').forEach(({plugin, schemaLevelResolveFunction}) => {
-  debug(`added schemaLevelResolveFunction from plugin '${plugin.name}'`);
+plugins
+  .get('server', 'schemaLevelResolveFunction')
+  .forEach(({ plugin, schemaLevelResolveFunction }) => {
+    debug(`added schemaLevelResolveFunction from plugin '${plugin.name}'`);
 
-  addSchemaLevelResolveFunction(schema, schemaLevelResolveFunction);
-});
+    addSchemaLevelResolveFunction(schema, schemaLevelResolveFunction);
+  });
 
 module.exports = schema;
diff --git a/graph/setupFunctions.js b/graph/setupFunctions.js
index 390442f73..e25b770dd 100644
--- a/graph/setupFunctions.js
+++ b/graph/setupFunctions.js
@@ -8,141 +8,142 @@ const {
   SUBSCRIBE_ALL_USER_SUSPENDED,
   SUBSCRIBE_ALL_USER_BANNED,
   SUBSCRIBE_ALL_USERNAME_REJECTED,
+  SUBSCRIBE_ALL_USERNAME_APPROVED,
 } = require('../perms/constants');
 
 const merge = require('lodash/merge');
 const debug = require('debug')('talk:graph:setupFunctions');
 const plugins = require('../services/plugins');
 
+const setupFunctions = {
+  commentAdded: (options, args, comment, context) => {
+    // Only privileged users can subscribe to all assets.
+    if (
+      !args.asset_id &&
+      (!context.user || !context.user.can(SUBSCRIBE_ALL_COMMENT_ADDED))
+    ) {
+      return false;
+    }
+
+    // If user subscribes for statuses other than NONE and/or ACCEPTED statuses, it needs
+    // special privileges.
+    if (
+      (!args.statuses ||
+        args.statuses.some(status => !['NONE', 'ACCEPTED'].includes(status))) &&
+      (!context.user || !context.user.can(SUBSCRIBE_ALL_COMMENT_ADDED))
+    ) {
+      return false;
+    }
+
+    if (args.asset_id && comment.asset_id !== args.asset_id) {
+      return false;
+    }
+
+    if (args.statuses && !args.statuses.includes(comment.status)) {
+      return false;
+    }
+
+    return true;
+  },
+  commentEdited: (options, args, comment, context) => {
+    if (
+      !args.asset_id &&
+      (!context.user || !context.user.can(SUBSCRIBE_ALL_COMMENT_EDITED))
+    ) {
+      return false;
+    }
+    return !args.asset_id || comment.asset_id === args.asset_id;
+  },
+  commentFlagged: (options, args, comment, context) => {
+    if (!context.user || !context.user.can(SUBSCRIBE_COMMENT_FLAGGED)) {
+      return false;
+    }
+    return !args.asset_id || comment.asset_id === args.asset_id;
+  },
+  commentAccepted: (options, args, comment, context) => {
+    if (!context.user || !context.user.can(SUBSCRIBE_COMMENT_ACCEPTED)) {
+      return false;
+    }
+    return !args.asset_id || comment.asset_id === args.asset_id;
+  },
+  commentRejected: (options, args, comment, context) => {
+    if (!context.user || !context.user.can(SUBSCRIBE_COMMENT_REJECTED)) {
+      return false;
+    }
+    return !args.asset_id || comment.asset_id === args.asset_id;
+  },
+  commentReset: (options, args, comment, context) => {
+    if (!context.user || !context.user.can(SUBSCRIBE_COMMENT_RESET)) {
+      return false;
+    }
+    return !args.asset_id || comment.asset_id === args.asset_id;
+  },
+  userSuspended: (options, args, user, context) => {
+    if (
+      !context.user ||
+      (args.user_id !== user.id &&
+        !context.user.can(SUBSCRIBE_ALL_USER_SUSPENDED))
+    ) {
+      return false;
+    }
+    return !args.user_id || user.id === args.user_id;
+  },
+  userBanned: (options, args, user, context) => {
+    if (
+      !context.user ||
+      (args.user_id !== user.id && !context.user.can(SUBSCRIBE_ALL_USER_BANNED))
+    ) {
+      return false;
+    }
+    return !args.user_id || user.id === args.user_id;
+  },
+  usernameRejected: (options, args, user, context) => {
+    if (
+      !context.user ||
+      (args.user_id !== user.id &&
+        !context.user.can(SUBSCRIBE_ALL_USERNAME_REJECTED))
+    ) {
+      return false;
+    }
+    return !args.user_id || user.id === args.user_id;
+  },
+  usernameApproved: (options, args, user, context) => {
+    if (
+      !context.user ||
+      (args.user_id !== user.id &&
+        !context.user.can(SUBSCRIBE_ALL_USERNAME_APPROVED))
+    ) {
+      return false;
+    }
+    return !args.user_id || user.id === args.user_id;
+  },
+};
+
 /**
  * Plugin support requires that we merge in existing setupFunctions with our new
- * plugin based ones. This allows plugins to extend existing setupFunctions as well
- * as provide new ones.
+ * plugin based ones. This allows plugins to extend existing setupFunctions as
+ * well as provide new ones. We'll remap our internal representation of the
+ * setupFunctions into the format needed by Apollo.
  */
-const setupFunctions = plugins.get('server', 'setupFunctions').reduce((acc, {plugin, setupFunctions}) => {
-  debug(`added plugin '${plugin.name}'`);
+module.exports = plugins.get('server', 'setupFunctions').reduce(
+  (acc, { plugin, setupFunctions }) => {
+    debug(`added plugin '${plugin.name}'`);
 
-  return merge(acc, setupFunctions);
-}, {
-  commentAdded: (options, args) => ({
-    commentAdded: {
-      filter: (comment, context) => {
+    return merge(acc, setupFunctions);
+  },
+  Object.keys(setupFunctions)
+    .map(key => {
+      const filter = setupFunctions[key];
 
-        // Only priviledged users can subscribe to all assets.
-        if (!args.asset_id && (!context.user || !context.user.can(SUBSCRIBE_ALL_COMMENT_ADDED))) {
-          return false;
-        }
-
-        // If user scubsscribes for statuses other than NONE and/or ACCEPTED statuses, it needs
-        // special priviledges.
-        if (
-          (!args.statuses || args.statuses.some((status) => !['NONE', 'ACCEPTED'].includes(status))) &&
-          (!context.user || !context.user.can(SUBSCRIBE_ALL_COMMENT_ADDED))
-        ) {
-          return false;
-        }
-
-        if (args.asset_id && comment.asset_id !== args.asset_id) {
-          return false;
-        }
-
-        if (args.statuses && !args.statuses.includes(comment.status)) {
-          return false;
-        }
-
-        return true;
-      }
-    },
-  }),
-  commentEdited: (options, args) => ({
-    commentEdited: {
-      filter: (comment, context) => {
-        if (!args.asset_id && (!context.user || !context.user.can(SUBSCRIBE_ALL_COMMENT_EDITED))) {
-          return false;
-        }
-        return !args.asset_id || comment.asset_id === args.asset_id;
-      }
-    },
-  }),
-  commentFlagged: (options, args) => ({
-    commentFlagged: {
-      filter: (comment, context) => {
-        if (!context.user || !context.user.can(SUBSCRIBE_COMMENT_FLAGGED)) {
-          return false;
-        }
-        return !args.asset_id || comment.asset_id === args.asset_id;
-      }
-    },
-  }),
-  commentAccepted: (options, args) => ({
-    commentAccepted: {
-      filter: (comment, context) => {
-        if (!context.user || !context.user.can(SUBSCRIBE_COMMENT_ACCEPTED)) {
-          return false;
-        }
-        return !args.asset_id || comment.asset_id === args.asset_id;
-      }
-    },
-  }),
-  commentRejected: (options, args) => ({
-    commentRejected: {
-      filter: (comment, context) => {
-        if (!context.user || !context.user.can(SUBSCRIBE_COMMENT_REJECTED)) {
-          return false;
-        }
-        return !args.asset_id || comment.asset_id === args.asset_id;
-      }
-    },
-  }),
-  commentReset: (options, args) => ({
-    commentReset: {
-      filter: (comment, context) => {
-        if (!context.user || !context.user.can(SUBSCRIBE_COMMENT_RESET)) {
-          return false;
-        }
-        return !args.asset_id || comment.asset_id === args.asset_id;
-      }
-    },
-  }),
-  userSuspended: (options, args) => ({
-    userSuspended: {
-      filter: (user, context) => {
-        if (
-          !context.user
-          || args.user_id !== user.id && !context.user.can(SUBSCRIBE_ALL_USER_SUSPENDED)
-        ) {
-          return false;
-        }
-        return !args.user_id || user.id === args.user_id;
-      }
-    },
-  }),
-  userBanned: (options, args) => ({
-    userBanned: {
-      filter: (user, context) => {
-        if (
-          !context.user
-          || args.user_id !== user.id && !context.user.can(SUBSCRIBE_ALL_USER_BANNED)
-        ) {
-          return false;
-        }
-        return !args.user_id || user.id === args.user_id;
-      }
-    },
-  }),
-  usernameRejected: (options, args) => ({
-    usernameRejected: {
-      filter: (user, context) => {
-        if (
-          !context.user
-          || args.user_id !== user.id && !context.user.can(SUBSCRIBE_ALL_USERNAME_REJECTED)
-        ) {
-          return false;
-        }
-        return !args.user_id || user.id === args.user_id;
-      }
-    },
-  }),
-});
-
-module.exports = setupFunctions;
+      return {
+        [key]: (options, args) => ({
+          [key]: {
+            filter: (user, ctx) => filter(options, args, user, ctx),
+          },
+        }),
+      };
+    })
+    .reduce((setupFunction, setupFunctions) => {
+      return merge(setupFunctions, setupFunction);
+    }, {})
+);
diff --git a/graph/subscriptions.js b/graph/subscriptions.js
index 60afc9c45..948d10a8f 100644
--- a/graph/subscriptions.js
+++ b/graph/subscriptions.js
@@ -1,5 +1,5 @@
-const {SubscriptionManager} = require('graphql-subscriptions');
-const {SubscriptionServer} = require('subscriptions-transport-ws');
+const { SubscriptionManager } = require('graphql-subscriptions');
+const { SubscriptionServer } = require('subscriptions-transport-ws');
 const debug = require('debug')('talk:graph:subscriptions');
 
 const pubsub = require('../services/pubsub');
@@ -7,56 +7,65 @@ const schema = require('./schema');
 const Context = require('./context');
 const plugins = require('../services/plugins');
 
-const {deserializeUser} = require('../services/subscriptions');
+const { deserializeUser } = require('../services/subscriptions');
 const setupFunctions = require('./setupFunctions');
 
 const ms = require('ms');
-const {
-  KEEP_ALIVE
-} = require('../config');
+const { KEEP_ALIVE } = require('../config');
 
-const {BASE_PATH} = require('../url');
+const { BASE_PATH } = require('../url');
 
 // Collect all the plugin hooks that should be executed onConnect and
 // onDisconnect.
-const hooks = plugins.get('server', 'websockets')
-  .map(({plugin, websockets}) => {
-    debug(`added websocket hooks ${Object.keys(websockets)} from plugin '${plugin.name}'`);
+const hooks = plugins
+  .get('server', 'websockets')
+  .map(({ plugin, websockets }) => {
+    debug(
+      `added websocket hooks ${Object.keys(websockets)} from plugin '${
+        plugin.name
+      }'`
+    );
 
     return websockets;
   })
-  .reduce((hooks, {onConnect = null, onDisconnect = null}) => {
-    if (onConnect) {
-      hooks.onConnect.push(onConnect);
-    }
+  .reduce(
+    (hooks, { onConnect = null, onDisconnect = null }) => {
+      if (onConnect) {
+        hooks.onConnect.push(onConnect);
+      }
 
-    if (onDisconnect) {
-      hooks.onDisconnect.push(onDisconnect);
-    }
+      if (onDisconnect) {
+        hooks.onDisconnect.push(onDisconnect);
+      }
 
-    return hooks;
-  }, {
-    onConnect: [],
-    onDisconnect: [],
-  });
+      return hooks;
+    },
+    {
+      onConnect: [],
+      onDisconnect: [],
+    }
+  );
 
 const onConnect = async (connectionParams, connection) => {
-
   // Attach the token from the connection options if it was provided.
   if (connectionParams.token) {
-
-    debug('token sent via onConnect, attaching to the headers of the upgrade request');
+    debug(
+      'token sent via onConnect, attaching to the headers of the upgrade request'
+    );
 
     // Attach it to the upgrade request.
-    connection.upgradeReq.headers['authorization'] = `Bearer ${connectionParams.token}`;
+    connection.upgradeReq.headers['authorization'] = `Bearer ${
+      connectionParams.token
+    }`;
   }
 
   // Call all the hooks.
-  await Promise.all(hooks.onConnect.map((hook) => hook(connectionParams, connection)));
+  await Promise.all(
+    hooks.onConnect.map(hook => hook(connectionParams, connection))
+  );
 };
 
 const onOperation = (parsedMessage, baseParams, connection) => {
-
   // Cache the upgrade request.
   let upgradeReq = connection.upgradeReq;
 
@@ -79,27 +88,31 @@ const onOperation = (parsedMessage, baseParams, connection) => {
   return baseParams;
 };
 
-const onDisconnect = (connection) =>
-  Promise.all(hooks.onDisconnect.map((hook) => hook(connection)));
+const onDisconnect = connection =>
+  Promise.all(hooks.onDisconnect.map(hook => hook(connection)));
 
 /**
  * This creates a new subscription manager.
  */
-const createSubscriptionManager = (server) => new SubscriptionServer({
-  subscriptionManager: new SubscriptionManager({
-    schema,
-    pubsub: pubsub.getClient(),
-    setupFunctions,
-  }),
-  onConnect,
-  onDisconnect,
-  onOperation,
-  keepAlive: ms(KEEP_ALIVE)
-}, {
-  server,
-  path: `${BASE_PATH}api/v1/live`
-});
+const createSubscriptionManager = server =>
+  new SubscriptionServer(
+    {
+      subscriptionManager: new SubscriptionManager({
+        schema,
+        pubsub: pubsub.getClient(),
+        setupFunctions,
+      }),
+      onConnect,
+      onDisconnect,
+      onOperation,
+      keepAlive: ms(KEEP_ALIVE),
+    },
+    {
+      server,
+      path: `${BASE_PATH}api/v1/live`,
+    }
+  );
 
 module.exports = {
-  createSubscriptionManager
+  createSubscriptionManager,
 };
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index 182504abb..002318bc3 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -37,6 +37,12 @@ enum USER_ROLES {
 
   # a moderator of the site
   MODERATOR
+
+  # a staff of the site
+  STAFF
+
+  # a user without administrative roles.
+  COMMENTER
 }
 
 # Token is a personal access token associated with a given user.
@@ -64,8 +70,99 @@ type UserProfile {
   provider: String!
 }
 
-type SuspensionInfo {
+# USER_STATUS_USERNAME is the different states that a username can be in.
+enum USER_STATUS_USERNAME {
+  # UNSET is used when the username can be changed, and does not necessarily
+  # require moderator action to become active. This can be used when the user
+  # signs up with a social login and has the option of setting their own
+  # username.
+  UNSET
+
+  # SET is used when the username has been set for the first time, but cannot
+  # change without the username being rejected by a moderator and that moderator
+  # agreeing that the username should be allowed to change.
+  SET
+
+  # APPROVED is used when the username was changed, and subsequently approved by
+  # said moderator.
+  APPROVED
+
+  # REJECTED is used when the username was changed, and subsequently rejected by
+  # said moderator.
+  REJECTED
+
+  # CHANGED is used after a user has changed their username after it was
+  # rejected.
+  CHANGED
+}
+
+# UserStatusInput describes the queryable components of the UserStatus.
+input UserStatusInput {
+  # username will restrict the returned users to only those with the given
+  # username status's. If not provided, no filtering will be performed.
+  username: [USER_STATUS_USERNAME!]
+
+  # banned will restrict the returned users to only those that are, or are not
+  # banned. If not provided, no filtering will be performed.
+  banned: Boolean
+
+  # suspended will restrict the returned users to only those that are, or are not
+  # suspended. If not provided, no filtering will be performed.
+  suspended: Boolean
+}
+
+type UsernameStatusHistory {
+  status: USER_STATUS_USERNAME!
+  assigned_by: User
+  created_at: Date!
+}
+
+type UsernameStatus {
+  status: USER_STATUS_USERNAME!
+  history: [UsernameStatusHistory!]
+}
+
+type BannedStatusHistory {
+  status: Boolean!
+  assigned_by: User
+  created_at: Date!
+}
+
+type BannedStatus {
+  status: Boolean!
+  history: [BannedStatusHistory!]
+}
+
+type SuspensionStatusHistory {
   until: Date
+  assigned_by: User
+  created_at: Date!
+}
+
+type SuspensionStatus {
+  until: Date
+  history: [SuspensionStatusHistory!]
+}
+
+type UserStatus {
+  # username is the status of the username.
+  username: UsernameStatus!
+
+  # banned is the bool that determines if the user is banned or not.
+  banned: BannedStatus!
+
+  # suspension is the date that the user is suspended until.
+  suspension: SuspensionStatus!
+}
+
+input UserStateInput {
+  status: UserStatusInput
+}
+
+# UserState describes the different permission based details for a user.
+type UserState {
+  # status describes the statuses of different aspects of the user's details.
+  status: UserStatus
 }
 
 # Any person who can author comments, create actions, and view comments on a
@@ -88,7 +185,7 @@ type User {
   actions: [Action!]
 
   # the current roles of the user.
-  roles: [USER_ROLES!]
+  role: USER_ROLES
 
   # the current profiles of the user.
   profiles: [UserProfile]
@@ -96,9 +193,6 @@ type User {
   # the tags on the user
   tags: [TagLink!]
 
-  # determines whether the user can edit their username
-  canEditName: Boolean
-
   # ignored users.
   ignoredUsers: [User!]
 
@@ -114,11 +208,7 @@ type User {
   reliable: Reliability
 
   # returns user status
-  status: USER_STATUS
-
-  # returns suspension info. Only available to Admins and Moderators
-  # or on own logged in User.
-  suspension: SuspensionInfo
+  state: UserState
 }
 
 # UserConnection represents a paginable subset of a user list.
@@ -143,8 +233,11 @@ input UsersQuery {
   # Users returned will only be ones which have at least one action of this.
   action_type: ACTION_TYPE
 
-  # Current status of a user..
-  statuses: [USER_STATUS!]
+  # state will filter the users to a specific set of users that meet.
+  state: UserStateInput
+
+  # value is the search string to use to search for a pa
+  value: String = ""
 
   # Limit the number of results to be returned.
   limit: Int = 10
@@ -261,7 +354,7 @@ enum ACTION_TYPE {
 # CommentsQuery allows the ability to query comments by a specific methods.
 input CommentsQuery {
 
-  # Author of the commente
+  # Author of the comments.
   author_id: ID
 
   # Current status of a comment.
@@ -351,8 +444,8 @@ input UserCountQuery {
   # type.
   action_type: ACTION_TYPE
 
-  # Current status of a user.
-  statuses: [USER_STATUS]
+  # state queries for a specific subset of users with the given state query.
+  state: UserStateInput
 }
 
 type EditInfo {
@@ -518,6 +611,36 @@ type FlagAssetActionSummary implements AssetActionSummary {
   actionableItemCount: Int
 }
 
+enum FLAG_REASON {
+
+  # The current user thinks that the flagged username is offensive.
+  USERNAME_OFFENSIVE
+
+  # The current user does not like the flagged username.
+  USERNAME_NOLIKE
+
+  # The current user thinks that the flagged username is being used to
+  # impersonate another user.
+  USERNAME_IMPERSONATING
+
+  # The current user thinks that the flagged username is spam.
+  USERNAME_SPAM
+
+  # The current user thinks that the flagged username is wrong for another
+  # reason.
+  USERNAME_OTHER
+
+  # The current user thinks that the flagged comment is offensive.
+  COMMENT_OFFENSIVE
+
+  # The current user thinks that the flagged comment is spam.
+  COMMENT_SPAM
+
+  # The current user thinks that the flagged comment is wrong for another
+  # reason.
+  COMMENT_OTHER
+}
+
 # A FLAG action that contains flag metadata.
 type FlagAction implements Action {
 
@@ -546,9 +669,6 @@ type DontAgreeAction implements Action {
   # The ID of the DontAgree Action.
   id: ID!
 
-  # The reason for which the DontAgree Action was created.
-  reason: String
-
   # An optional message sent with the flagging action by the user.
   message: String
 
@@ -581,9 +701,6 @@ type DontAgreeActionSummary implements ActionSummary {
   # The total count of flags with this reason.
   count: Int!
 
-  # The reason for which the Flag Action was created.
-  reason: String
-
   # The don't agree action by the current user against the parent entity with this reason.
   current_user: DontAgreeAction
 }
@@ -810,14 +927,6 @@ enum SORT_COMMENTS_BY {
   REPLIES
 }
 
-# All queries that can be executed.
-enum USER_STATUS {
-  ACTIVE
-  BANNED
-  PENDING
-  APPROVED
-}
-
 type RootQuery {
 
   # Site wide settings and defaults.
@@ -892,15 +1001,6 @@ enum ACTION_ITEM_TYPE {
   USERS
 }
 
-input CreateLikeInput {
-
-  # The item's id for which we are to create a like.
-  item_id: ID!
-
-  # The type of the item for which we are to create the like.
-  item_type: ACTION_ITEM_TYPE!
-}
-
 # CreateCommentInput is the input content used to create a new comment.
 input CreateCommentInput {
 
@@ -915,7 +1015,6 @@ input CreateCommentInput {
 
   # Tags
   tags: [String]
-
 }
 
 input CreateFlagInput {
@@ -927,7 +1026,7 @@ input CreateFlagInput {
   item_type: ACTION_ITEM_TYPE!
 
   # The reason for flagging the item.
-  reason: String!
+  reason: FLAG_REASON
 
   # An optional message sent with the flagging action by the user.
   message: String
@@ -966,36 +1065,10 @@ input CreateDontAgreeInput {
   # The type of the item for which we are to create the don't agree.
   item_type: ACTION_ITEM_TYPE!
 
-  # The reason for not agreeing with the item.
-  reason: String
-
   # An optional message sent with the don't agree action by the user.
   message: String
 }
 
-# Input for suspendUser mutation.
-input SuspendUserInput {
-
-  # id of target user.
-  id: ID!
-
-  # message to be sent to the user.
-  message: String!
-
-  # target user will be suspended until this date.
-  until: Date!
-}
-
-# Input for rejectUsername mutation.
-input RejectUsernameInput {
-
-  # id of target user.
-  id: ID!
-
-  # message to be sent to the user.
-  message: String!
-}
-
 # Configurable settings that can be overridden for the Asset. You must specify
 # all fields that should be updated.
 input AssetSettingsInput {
@@ -1006,7 +1079,7 @@ input AssetSettingsInput {
   # moderation is the moderation mode for the asset.
   moderation: MODERATION_MODE
 
-  # questionBoxEnable will enable the Question Boxs' content to be visable above
+  # questionBoxEnable will enable the Question Boxs' content to be visible above
   # the comment box.
   questionBoxEnable: Boolean
 
@@ -1054,30 +1127,6 @@ type DeleteActionResponse implements Response {
   errors: [UserError!]
 }
 
-# SetUserStatusResponse is the response returned with possibly some errors
-# relating to the delete action attempt.
-type SetUserStatusResponse implements Response {
-
-  # An array of errors relating to the mutation that occurred.
-  errors: [UserError!]
-}
-
-# SuspendUserResponse is the response returned with possibly some errors
-# relating to the suspend action attempt.
-type SuspendUserResponse implements Response {
-
-  # An array of errors relating to the mutation that occurred.
-  errors: [UserError!]
-}
-
-# RejectUsernameResponse is the response returned with possibly some errors
-# relating to the reject username action attempt.
-type RejectUsernameResponse implements Response {
-
-  # An array of errors relating to the mutation that occurred.
-  errors: [UserError!]
-}
-
 # SetCommentStatusResponse is the response returned with possibly some errors
 # relating to the delete action attempt.
 type SetCommentStatusResponse implements Response {
@@ -1197,7 +1246,7 @@ input UpdateSettingsInput {
   # comment is posted that it can still be edited by the author.
   editCommentWindowLength: Int
 
-  # wordlist allows chaninging the available wordlists.
+  # wordlist allows changing the available wordlists.
   wordlist: UpdateWordlistInput
 
   # domains allows changing the available lists of domains.
@@ -1260,6 +1309,69 @@ type RevokeTokenResponse implements Response {
   errors: [UserError!]
 }
 
+input BanUserInput {
+  id: ID!
+  message: String!
+}
+
+input UnbanUserInput {
+  id: ID!
+}
+
+type BanUsersResponse implements Response {
+  errors: [UserError!]
+}
+
+type UnbanUserResponse implements Response {
+  errors: [UserError!]
+}
+
+input SuspendUserInput {
+  id: ID!
+  message: String!
+  until: Date!
+}
+
+type SuspendUserResponse implements Response {
+  errors: [UserError!]
+}
+
+input UnsuspendUserInput {
+  id: ID!
+}
+
+# UnsuspendUserResponse is the response returned with possibly some
+# errors relating to the suspend action attempt.
+type UnsuspendUserResponse implements Response {
+
+  # An array of errors relating to the mutation that occurred.
+  errors: [UserError!]
+}
+
+type SetUsernameStatusResponse implements Response {
+
+  # An array of errors relating to the mutation that occurred.
+  errors: [UserError!]
+}
+
+type ChangeUsernameResponse implements Response {
+
+  # An array of errors relating to the mutation that occurred.
+  errors: [UserError!]
+}
+
+type SetUsernameResponse implements Response {
+
+  # An array of errors relating to the mutation that occurred.
+  errors: [UserError!]
+}
+
+type SetUserRoleResponse implements Response {
+
+  # An array of errors relating to the mutation that occurred.
+  errors: [UserError!]
+}
+
 # All mutations for the application are defined on this object.
 type RootMutation {
 
@@ -1278,17 +1390,38 @@ type RootMutation {
   # Edit a comment
   editComment(id: ID!, asset_id: ID!, edit: EditCommentInput): EditCommentResponse!
 
-  # Sets User status. Requires the `ADMIN` role.
-  # Mutation is restricted.
-  setUserStatus(id: ID!, status: USER_STATUS!): SetUserStatusResponse
-
-  # Suspends a user. Requires the `ADMIN` role.
+  # Sets the suspension status on a given user. Requires the `MODERATOR` role.
   # Mutation is restricted.
   suspendUser(input: SuspendUserInput!): SuspendUserResponse
 
-  # Reject a username. Requires the `ADMIN` role.
+  # Sets the suspension status on a given user. Requires the `MODERATOR` role.
   # Mutation is restricted.
-  rejectUsername(input: RejectUsernameInput!): RejectUsernameResponse
+  unsuspendUser(input: UnsuspendUserInput!): UnsuspendUserResponse
+
+  # Sets the ban status on a given user. Requires the `MODERATOR` role.
+  # Mutation is restricted.
+  banUser(input: BanUserInput!): BanUsersResponse
+
+  # Sets the ban status on a given user. Requires the `MODERATOR` role.
+  # Mutation is restricted.
+  unbanUser(input: UnbanUserInput!): UnbanUserResponse
+
+  # Sets the username status on a given user to `APPROVED`. Requires the
+  # `MODERATOR` role. Mutation is restricted.
+  approveUsername(id: ID!): SetUsernameStatusResponse
+
+  # Sets the username status on a given user to `REJECTED`. Requires the
+  # `MODERATOR` role. Mutation is restricted.
+  rejectUsername(id: ID!): SetUsernameStatusResponse
+
+  # Changes the username to the desired username. Mutation is restricted to
+  # those users with permission do to so.
+  changeUsername(id: ID!, username: String!): ChangeUsernameResponse
+
+  # Sets the username to the desired username if the user has not had a chance
+  # to set their username. Mutation is restricted to those users with permission
+  # do to so that have not done so before.
+  setUsername(id: ID!, username: String!): SetUsernameResponse
 
   # Sets Comment status. Requires the `ADMIN` role.
   # Mutation is restricted.
@@ -1300,13 +1433,17 @@ type RootMutation {
   # Removes a tag.
   removeTag(tag: ModifyTagInput!): ModifyTagResponse
 
+  # Set's a given users role to the one provided. If `null` is passed, the user
+  # will not have any role.
+  setUserRole(id: ID!, role: USER_ROLES): SetUserRoleResponse
+
   # Updates settings on a given asset.
   # Mutation is restricted.
   updateAssetSettings(id: ID!, input: AssetSettingsInput!): UpdateAssetSettingsResponse
 
   # Updates the status of an asset allowing you to close/reopen an asset for
   # commenting.
-    # Mutation is restricted.
+  # Mutation is restricted.
   updateAssetStatus(id: ID!, input: UpdateAssetStatusInput!): UpdateAssetStatusResponse
 
   # updateSettings will update the global settings.
@@ -1373,6 +1510,10 @@ type Subscription {
   # `user_id` must match id of current user except for
   # users with the `ADMIN` or `MODERATOR` role.
   usernameRejected(user_id: ID): User
+
+  # Gen an update whenever a username has been approved. `user_id` must match id
+  # of current user except for users with the `ADMIN` or `MODERATOR` role.
+  usernameApproved(user_id: ID): User
 }
 
 ################################################################################
diff --git a/graph/typeDefs.js b/graph/typeDefs.js
index 9b2c8b7aa..46bc62dce 100644
--- a/graph/typeDefs.js
+++ b/graph/typeDefs.js
@@ -4,7 +4,7 @@
 
 const fs = require('fs');
 const path = require('path');
-const {mergeStrings} = require('gql-merge');
+const { mergeStrings } = require('gql-merge');
 const debug = require('debug')('talk:graph:typeDefs');
 const plugins = require('../services/plugins');
 
@@ -14,16 +14,15 @@ const plugins = require('../services/plugins');
  * available graph.
  */
 const typeDefs = mergeStrings([
-
   // Load the core graph definitions from the filesystem.
   fs.readFileSync(path.join(__dirname, 'typeDefs.graphql'), 'utf8'),
 
   // Load the plugin definitions from the manager.
-  ...plugins.get('server', 'typeDefs').map(({plugin, typeDefs}) => {
+  ...plugins.get('server', 'typeDefs').map(({ plugin, typeDefs }) => {
     debug(`added plugin '${plugin.name}'`);
 
     return typeDefs;
-  })
+  }),
 ]);
 
 module.exports = typeDefs;
diff --git a/graph/utils.js b/graph/utils.js
index d170a2d83..70a7fc830 100644
--- a/graph/utils.js
+++ b/graph/utils.js
@@ -1,7 +1,4 @@
-const {
-  GraphQLObjectType,
-  GraphQLInterfaceType
-} = require('graphql');
+const { GraphQLObjectType, GraphQLInterfaceType } = require('graphql');
 
 /**
  * Iterates over each field in a schema.
@@ -18,14 +15,16 @@ const {
  * @return {void}
  */
 const forEachField = (schema, fn, options = {}) => {
-  const {includeResolveType = false} = options;
+  const { includeResolveType = false } = options;
 
   const typeMap = schema.getTypeMap();
-  Object.keys(typeMap).forEach((typeName) => {
+  Object.keys(typeMap).forEach(typeName => {
     const type = typeMap[typeName];
 
-    if (type instanceof GraphQLObjectType || type instanceof GraphQLInterfaceType) {
-
+    if (
+      type instanceof GraphQLObjectType ||
+      type instanceof GraphQLInterfaceType
+    ) {
       // Here we capture the change to extract the resolve type. We pass this
       // with the `isResolveType = true` to introduce the specific beheviour.
       if (includeResolveType && 'resolveType' in type) {
@@ -33,7 +32,7 @@ const forEachField = (schema, fn, options = {}) => {
       }
 
       const fields = type.getFields();
-      Object.keys(fields).forEach((fieldName) => {
+      Object.keys(fields).forEach(fieldName => {
         const field = fields[fieldName];
         fn(field, typeName, fieldName);
       });
diff --git a/jest.config.js b/jest.config.js
index b070d8fc1..654b72cd0 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,14 +1,9 @@
 const path = require('path');
-const {pluginsPath} = require('./plugins');
+const { pluginsPath } = require('./plugins');
 
-const buildTargets = [
-  'coral-admin',
-  'coral-docs'
-];
+const buildTargets = ['coral-admin', 'coral-docs'];
 
-const buildEmbeds = [
-  'stream'
-];
+const buildEmbeds = ['stream'];
 
 // jest.config.js
 module.exports = {
@@ -17,15 +12,19 @@ module.exports = {
   modulePaths: [
     '<rootDir>/plugins',
     '<rootDir>/client',
-    ...buildTargets.map((target) => path.join('<rootDir>', 'client', target, 'src')),
-    ...buildEmbeds.map((embed) => path.join('<rootDir>', 'client', `coral-embed-${embed}`, 'src')),
+    ...buildTargets.map(target =>
+      path.join('<rootDir>', 'client', target, 'src')
+    ),
+    ...buildEmbeds.map(embed =>
+      path.join('<rootDir>', 'client', `coral-embed-${embed}`, 'src')
+    ),
   ],
   moduleFileExtensions: ['js', 'jsx', 'json', 'yaml', 'yml'],
   moduleDirectories: ['node_modules'],
 
   transform: {
     '^.+\\.jsx?$': 'babel-jest',
-    '\\.ya?ml$': '<rootDir>/test/client/yamlTransformer.js'
+    '\\.ya?ml$': '<rootDir>/test/client/yamlTransformer.js',
   },
 
   moduleNameMapper: {
@@ -34,6 +33,6 @@ module.exports = {
     '^pluginsConfig$': pluginsPath,
 
     '\\.(scss|css|less)$': 'identity-obj-proxy',
-    '\\.(gif|ttf|eot|svg)$': '<rootDir>/test/client/fileMock.js'
-  }
+    '\\.(gif|ttf|eot|svg)$': '<rootDir>/test/client/fileMock.js',
+  },
 };
diff --git a/locales/en.yml b/locales/en.yml
index 796b7b9a1..0da121202 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -10,8 +10,13 @@ en:
     cancel: "Cancel"
     note: "Note: {0}"
     note_reject_comment: "Banning this user will also place this comment in the Rejected queue."
-    note_ban_user: "Banning this user will not let them edit comment or remove anything."
+    note_ban_user: "Banning this user will not let them comment, react to, or report comments."
     yes_ban_user: "Yes, Ban User"
+    write_a_message: "Write a message"
+    send: "Send"
+    notify_ban_headline: "Notify the user of ban"
+    notify_ban_description: "This will notify the user by email that they have been banned from the community"
+    email_message_ban: "Dear {0},\n\nSomeone with access to your account has violated our community guidelines. As a result, your account has been banned. You will no longer be able to comment, like or report comments. if you think this has been done in error, please contact our community team."
   bio_offensive: "This bio is offensive"
   cancel: "Cancel"
   confirm_email:
@@ -85,7 +90,7 @@ en:
     status: Status
     username_and_email: "Username and Email"
     yes_ban_user: "Yes Ban User"
-    none: "None"
+    commenter: "Commenter"
   configure:
     apply: Apply
     banned_word_text: "Comments which contain these words or phrases (not case-sensitive) will be automatically removed from the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list."
@@ -260,6 +265,24 @@ en:
   loading_results: "Loading Results"
   marketing: "This looks like an ad/marketing"
   moderate_this_stream: "Moderate this stream"
+  flags:
+    reasons:
+       user:
+         username_offensive: "Offensive"
+         username_nolike: "Dislike"
+         username_impersonating: "Impersonation"
+         username_spam: "Spam"
+         username_other: "Other"
+       comment:
+         comment_offensive: "Offensive"
+         comment_spam: "Spam"
+         comment_noagree: "Disagree"
+         comment_other: "Other"
+         suspect_word: "Suspect Word"
+         banned_word: "Banned Word"
+         body_count: "Body exceeds max length"
+         trust: "Trust"
+         links: "Link"
   modqueue:
     account: "account flags"
     actions: Actions
diff --git a/locales/es.yml b/locales/es.yml
index 74dc325d8..584e83f7b 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -12,6 +12,11 @@ es:
     note_reject_comment: "Suspender a este usuario también va a colocar este comentario en la cola de Rechazados."
     note_ban_user: "Suspender a este usuario no le va a permitir (al usuario) borrar ni editar ni comentar."
     yes_ban_user: "Si, Suspender al usuario"
+    write_a_message: "Escribe un mensaje"
+    send: "Enviar"
+    notify_ban_headline: "Notificar al usuario de la suspensión"
+    notify_ban_description: "Esto notificará al usuario por email que fueron suspendidos de la comunidad"
+    email_message_ban: "Dear {0},\n\nSomeone with access to your account has violated our community guidelines. As a result, your account has been banned. You will no longer be able to comment, like or report comments. if you think this has been done in error, please contact our community team."
   bio_offensive: "Esta biografia es ofensiva"
   cancel: Cancelar
   characters_remaining: "carácteres restantes"
@@ -74,7 +79,7 @@ es:
     status: Estado
     username_and_email: "Usuario y Correo"
     yes_ban_user: "Si, Suspendan el usuario"
-    none: "Ninguno"
+    commenter: "Comentarista"
   configure:
     apply: Aplicar
     banned_word_text: "Comentarios que contengan estas palabras o frases,  en mayusculas o minúsculas, serán automáticamente eliminados del hilo de comentario. Escribir una palabra y apretar Enter o Tabulador para agregarla. O pueden pegar una lista de palabras separadas por coma."
@@ -238,6 +243,19 @@ es:
   loading_results: "Cargando Resultados"
   marketing: "Esto parece una propaganda"
   moderate_this_stream: "Moderar este hilo de comentarios"
+  flags:
+    reasons:
+       user:
+         username_offensive: "Es ofensivo"
+         username_nolike: "No le gusta"
+         username_impersonating: "Está suplantando identidad"
+         username_spam: "Contiene spam"
+         username_other: "Otra razón"
+       comment:
+         comment_offensive: "Es ofensivo"
+         comment_spam: "Contiene spam"
+         comment_noagree: "No está de acuerdo"
+         comment_other: "Otra razón"
   modqueue:
     account: "reportes de cuentas"
     actions: Acciones
diff --git a/middleware/authentication.js b/middleware/authentication.js
index 3e4b3fbff..5f6009136 100644
--- a/middleware/authentication.js
+++ b/middleware/authentication.js
@@ -1,25 +1,29 @@
-const {passport} = require('../services/passport');
+const { passport } = require('../services/passport');
 const debug = require('debug')('talk:middleware:authentication');
 
-const authentication = (req, res, next) => passport.authenticate('jwt', {
-  session: false
-}, (err, user) => {
-  if (err) {
-    debug(`cannot get the user: ${err}`);
-    return next(err);
-  }
+const authentication = (req, res, next) =>
+  passport.authenticate(
+    'jwt',
+    {
+      session: false,
+    },
+    (err, user) => {
+      if (err) {
+        debug(`cannot get the user: ${err}`);
+        return next(err);
+      }
 
-  if (user) {
+      if (user) {
+        debug('user was on request');
 
-    debug('user was on request');
+        // Attach the user to the request object, now that we know it exists.
+        req.user = user;
+      } else {
+        debug('user was not on request');
+      }
 
-    // Attach the user to the request object, now that we know it exists.
-    req.user = user;
-  } else {
-    debug('user was not on request');
-  }
-
-  next();
-})(req, res, next);
+      next();
+    }
+  )(req, res, next);
 
 module.exports = authentication;
diff --git a/middleware/authorization.js b/middleware/authorization.js
index 742b6983a..97003d970 100644
--- a/middleware/authorization.js
+++ b/middleware/authorization.js
@@ -2,9 +2,9 @@
  * authorization contains the references to the authorization middleware.
  * @type {Object}
  */
-const authorization = module.exports = {
-  middleware: []
-};
+const authorization = (module.exports = {
+  middleware: [],
+});
 
 const debug = require('debug')('talk:middleware:authorization');
 const ErrNotAuthorized = require('../errors').ErrNotAuthorized;
@@ -18,9 +18,8 @@ const ErrNotAuthorized = require('../errors').ErrNotAuthorized;
  *                        otherwise
  */
 authorization.has = (user, ...roles) => {
-
   // If no user is specified, then they can't have the roles you want!
-  if (!user || !user.roles) {
+  if (!user) {
     return false;
   }
 
@@ -31,7 +30,7 @@ authorization.has = (user, ...roles) => {
 
   // If there's a user, and roles, then check to see that the user has at least
   // one of those roles.
-  return roles.some((role) => user.roles.includes(role));
+  return roles.some(role => user.role === role);
 };
 
 /**
@@ -41,13 +40,11 @@ authorization.has = (user, ...roles) => {
  * @return {Callback}    connect middleware
  */
 authorization.needed = (...roles) => [
-
   // Insert the pre-needed middlware.
   ...authorization.middleware,
 
   // Insert the actual middleware to check for the required role.
   (req, res, next) => {
-
     // All routes that are wrapepd with this middleware actually require a role.
     if (!req.user) {
       debug(`No user on request, returning with ${ErrNotAuthorized}`);
@@ -64,5 +61,5 @@ authorization.needed = (...roles) => [
 
     // Looks like they're allowed!
     return next();
-  }
+  },
 ];
diff --git a/middleware/pubsub.js b/middleware/pubsub.js
index 957a523a7..2b7291bf3 100644
--- a/middleware/pubsub.js
+++ b/middleware/pubsub.js
@@ -3,7 +3,6 @@ const pubsub = require('../services/pubsub');
 // To handle dependancy injection safer, we inject the pubsub handle onto the
 // request object.
 module.exports = (req, res, next) => {
-
   // Attach the pubsub handle to the requests.
   req.pubsub = pubsub.getClient();
 
diff --git a/middleware/staticTemplate.js b/middleware/staticTemplate.js
index c94797519..6848e59e1 100644
--- a/middleware/staticTemplate.js
+++ b/middleware/staticTemplate.js
@@ -1,16 +1,8 @@
 const SettingsService = require('../services/settings');
 
-const {
-  BASE_URL,
-  BASE_PATH,
-  MOUNT_PATH,
-  STATIC_URL,
-} = require('../url');
+const { BASE_URL, BASE_PATH, MOUNT_PATH, STATIC_URL } = require('../url');
 
-const {
-  RECAPTCHA_PUBLIC,
-  WEBSOCKET_LIVE_URI,
-} = require('../config');
+const { RECAPTCHA_PUBLIC, WEBSOCKET_LIVE_URI } = require('../config');
 
 // TEMPLATE_LOCALS stores the static data that is provided as a `text/json` on
 // to the client from the template.
@@ -27,7 +19,7 @@ const TEMPLATE_LOCALS = {
 };
 
 // attachStaticLocals will attach the locals to the response only.
-const attachStaticLocals = (locals) => {
+const attachStaticLocals = locals => {
   for (const key in TEMPLATE_LOCALS) {
     const value = TEMPLATE_LOCALS[key];
 
@@ -36,11 +28,9 @@ const attachStaticLocals = (locals) => {
 };
 
 module.exports = async (req, res, next) => {
-
   try {
-
     // Attach the custom css url.
-    const {customCssUrl} = await SettingsService.retrieve('customCssUrl');
+    const { customCssUrl } = await SettingsService.retrieve('customCssUrl');
     res.locals.customCssUrl = customCssUrl;
   } catch (err) {
     console.warn(err);
diff --git a/migrations/1496771633_tags.js b/migrations/1496771633_tags.js
index be3fa2577..b21ff671e 100644
--- a/migrations/1496771633_tags.js
+++ b/migrations/1496771633_tags.js
@@ -2,32 +2,33 @@ const CommentModel = require('../models/comment');
 
 module.exports = {
   async up() {
-
     // Find all comments that have tags.
     let comments = await CommentModel.aggregate([
-      {$match: {
-        tags: {
-          $exists: true,
-          $ne: []
-        }
-      }},
-      {$project: {
-        id: true,
-        tags: true
-      }}
+      {
+        $match: {
+          tags: {
+            $exists: true,
+            $ne: [],
+          },
+        },
+      },
+      {
+        $project: {
+          id: true,
+          tags: true,
+        },
+      },
     ]);
 
-    // If no comments were found, nothing needes to be done!
+    // If no comments were found, nothing needs to be done!
     if (comments.length <= 0) {
       return;
     }
 
-    // Create a new batch operation.
-    let batch = CommentModel.collection.initializeUnorderedBulkOp();
+    const updates = [];
 
     // Loop over the comments retrieved, updating the tag structure.
-    for (let {id, tags} of comments) {
-
+    for (let { id, tags } of comments) {
       // OLD
       //
       // [
@@ -58,26 +59,35 @@ module.exports = {
       // ]
 
       // Remap the tag structure.
-      tags = tags.map(({name, assigned_by, created_at}) => ({
+      tags = tags.map(({ name, assigned_by, created_at }) => ({
         tag: {
           name,
           permissions: {
             public: true,
             self: name === 'OFF_TOPIC', // at the time of migration, only off topic tags were self assigning
-            roles: []
+            roles: [],
           },
           models: ['COMMENTS'],
-          created_at
+          created_at,
         },
         assigned_by,
-        created_at
+        created_at,
       }));
 
-      // Execute the batch operation.
-      batch.find({id}).updateOne({$set: {tags}});
+      updates.push({ query: { id }, update: { $set: { tags } } });
     }
 
-    // Execute the batch update operation.
-    await batch.execute();
-  }
+    if (updates.length > 0) {
+      // Create a new batch operation.
+      let batch = CommentModel.collection.initializeUnorderedBulkOp();
+
+      for (const { query, update } of updates) {
+        // Execute the batch operation.
+        batch.find(query).updateOne(update);
+      }
+
+      // Execute the batch update operation.
+      await batch.execute();
+    }
+  },
 };
diff --git a/migrations/1507310316_flags.js b/migrations/1507310316_flags.js
new file mode 100644
index 000000000..d29a2c25b
--- /dev/null
+++ b/migrations/1507310316_flags.js
@@ -0,0 +1,58 @@
+const ActionModel = require('../models/action');
+
+const mapping = {
+  COMMENTS: {
+    'Comment contains toxic language': 'TOXIC_COMMENT',
+    'Matched suspect word filter': 'SUSPECT_WORD',
+    other: 'COMMENT_OTHER',
+    Other: 'COMMENT_OTHER',
+    'This looks like an ad/marketing': 'COMMENT_SPAM',
+    'This comment is offensive': 'COMMENT_OFFENSIVE',
+  },
+};
+
+module.exports = {
+  async up() {
+    const updates = [];
+    for (const item_type in mapping) {
+      const mappings = mapping[item_type];
+
+      for (const OLD_GROUP_ID in mappings) {
+        const NEW_GROUP_ID = mappings[OLD_GROUP_ID];
+
+        // OLD
+        // {
+        //   group_id: <OLD_GROUP_ID>
+        // }
+        // NEW
+        // {
+        //   group_id: <NEW_GROUP_ID>
+        // }
+
+        updates.push({
+          query: {
+            group_id: OLD_GROUP_ID,
+            item_type,
+          },
+          update: {
+            $set: {
+              group_id: NEW_GROUP_ID,
+            },
+          },
+        });
+      }
+    }
+
+    if (updates.length > 0) {
+      // Setup the batch operation.
+      const batch = ActionModel.collection.initializeUnorderedBulkOp();
+
+      for (const { query, update } of updates) {
+        batch.find(query).update(update);
+      }
+
+      // Execute the batch update operation.
+      await batch.execute();
+    }
+  },
+};
diff --git a/migrations/1507322128_dontagree.js b/migrations/1507322128_dontagree.js
new file mode 100644
index 000000000..661c10769
--- /dev/null
+++ b/migrations/1507322128_dontagree.js
@@ -0,0 +1,23 @@
+const ActionModel = require('../models/action');
+
+module.exports = {
+  async up() {
+    // This will update all the old flags that are 'COMMENT_NOAGREE' to change
+    // them to DONTAGREE actions instead.
+    return ActionModel.update(
+      {
+        action_type: 'FLAG',
+        group_id: 'COMMENT_NOAGREE',
+      },
+      {
+        $set: {
+          action_type: 'DONTAGREE',
+          group_id: null,
+        },
+      },
+      {
+        multi: true,
+      }
+    );
+  },
+};
diff --git a/migrations/1510174676_user_status.js b/migrations/1510174676_user_status.js
new file mode 100644
index 000000000..b3d7c0984
--- /dev/null
+++ b/migrations/1510174676_user_status.js
@@ -0,0 +1,228 @@
+const UserModel = require('../models/user');
+const merge = require('lodash/merge');
+
+const getUserBatch = async () => {
+  let query = {
+    status: {
+      $in: ['ACTIVE', 'BANNED', 'PENDING', 'APPROVED'],
+    },
+  };
+
+  // Find all the users that need migrating.
+  return UserModel.collection.find(query);
+};
+
+module.exports = {
+  async up() {
+    const created_at = Date.now();
+
+    // Get the first batch of users.
+    let cursor = await getUserBatch();
+
+    const updates = [];
+    while (await cursor.hasNext()) {
+      const user = await cursor.next();
+
+      const { id, status, canEditName, suspension, disabled } = user;
+
+      let update = {
+        $unset: {
+          canEditName: '',
+          suspension: '',
+          disabled: '',
+        },
+        $set: {
+          status: {
+            // The username status is specific to each case.
+            username: {
+              history: [],
+            },
+
+            // The user is not banned by default.
+            banned: {
+              status: false,
+              history: [],
+            },
+
+            // The user is not suspended by default.
+            suspension: {
+              until: null,
+              history: [],
+            },
+          },
+          updated_at: created_at,
+        },
+      };
+
+      if (disabled) {
+        update = merge(update, {
+          $set: {
+            status: {
+              banned: {
+                status: true,
+                history: [
+                  {
+                    status: true,
+                    created_at,
+                  },
+                ],
+              },
+            },
+          },
+        });
+      }
+
+      // If the user has an "until" property of their suspension, then we need
+      // to reflect that in the new status object.
+      if (suspension && suspension.until !== null) {
+        update = merge(update, {
+          $set: {
+            status: {
+              suspension: {
+                until: suspension.until,
+                history: [
+                  {
+                    until: suspension.until,
+                    created_at,
+                  },
+                ],
+              },
+            },
+          },
+        });
+      }
+
+      switch (status) {
+        case 'ACTIVE':
+          if (canEditName) {
+            update = merge(update, {
+              $set: {
+                status: {
+                  username: {
+                    status: 'UNSET',
+                    history: [
+                      {
+                        status: 'UNSET',
+                        created_at,
+                      },
+                    ],
+                  },
+                },
+              },
+            });
+          } else {
+            update = merge(update, {
+              $set: {
+                status: {
+                  username: {
+                    status: 'SET',
+                    history: [
+                      {
+                        status: 'SET',
+                        created_at,
+                      },
+                    ],
+                  },
+                },
+              },
+            });
+          }
+          break;
+        case 'BANNED':
+          if (canEditName) {
+            update = merge(update, {
+              $set: {
+                status: {
+                  username: {
+                    status: 'REJECTED',
+                    history: [
+                      {
+                        status: 'REJECTED',
+                        created_at,
+                      },
+                    ],
+                  },
+                },
+              },
+            });
+          } else {
+            update = merge(update, {
+              $set: {
+                status: {
+                  banned: {
+                    status: true,
+                    history: [
+                      {
+                        status: true,
+                        created_at,
+                      },
+                    ],
+                  },
+                  username: {
+                    status: 'SET',
+                    history: [
+                      {
+                        status: 'SET',
+                        created_at,
+                      },
+                    ],
+                  },
+                },
+              },
+            });
+          }
+          break;
+        case 'PENDING':
+          update = merge(update, {
+            $set: {
+              status: {
+                username: {
+                  status: 'CHANGED',
+                  history: [
+                    {
+                      status: 'CHANGED',
+                      created_at,
+                    },
+                  ],
+                },
+              },
+            },
+          });
+          break;
+        case 'APPROVED':
+          update = merge(update, {
+            $set: {
+              status: {
+                username: {
+                  status: 'APPROVED',
+                  history: [
+                    {
+                      status: 'APPROVED',
+                      created_at,
+                    },
+                  ],
+                },
+              },
+            },
+          });
+          break;
+        default:
+          throw new Error(`${status} is an invalid status`);
+      }
+
+      updates.push({ query: { id }, update });
+    }
+
+    if (updates.length > 0) {
+      // Create a new batch operation.
+      let bulk = UserModel.collection.initializeUnorderedBulkOp();
+
+      for (const { query, update } of updates) {
+        bulk.find(query).updateOne(update);
+      }
+
+      // Execute the bulk update operation.
+      await bulk.execute();
+    }
+  },
+};
diff --git a/migrations/1511801783_user_roles.js b/migrations/1511801783_user_roles.js
new file mode 100644
index 000000000..08a0a1abc
--- /dev/null
+++ b/migrations/1511801783_user_roles.js
@@ -0,0 +1,56 @@
+const UserModel = require('../models/user');
+
+const findNewRole = roles => {
+  if (roles.includes('ADMIN')) {
+    return 'ADMIN';
+  } else if (roles.includes('MODERATOR')) {
+    return 'MODERATOR';
+  } else if (roles.includes('STAFF')) {
+    return 'STAFF';
+  }
+
+  return 'COMMENTER';
+};
+
+module.exports = {
+  async up() {
+    const cursor = await UserModel.collection.find({
+      roles: {
+        $exists: true,
+      },
+    });
+
+    const updates = [];
+    while (await cursor.hasNext()) {
+      const user = await cursor.next();
+
+      updates.push({
+        query: {
+          id: user.id,
+        },
+        update: {
+          $set: {
+            role: Array.isArray(user.roles)
+              ? findNewRole(user.roles)
+              : 'COMMENTER',
+          },
+          $unset: {
+            roles: '',
+          },
+        },
+      });
+    }
+
+    if (updates.length > 0) {
+      // Create a new batch operation.
+      const bulk = UserModel.collection.initializeUnorderedBulkOp();
+
+      for (const { query, update } of updates) {
+        bulk.find(query).updateOne(update);
+      }
+
+      // Execute the bulk update operation.
+      await bulk.execute();
+    }
+  },
+};
diff --git a/models/action.js b/models/action.js
index 8aa7322e3..5e2dc1128 100644
--- a/models/action.js
+++ b/models/action.js
@@ -4,35 +4,38 @@ const Schema = mongoose.Schema;
 const ACTION_TYPES = require('./enum/action_types');
 const ITEM_TYPES = require('./enum/item_types');
 
-const ActionSchema = new Schema({
-  id: {
-    type: String,
-    default: uuid.v4,
-    unique: true
-  },
-  action_type: {
-    type: String,
-    enum: ACTION_TYPES
-  },
-  item_type: {
-    type: String,
-    enum: ITEM_TYPES
-  },
-  item_id: String,
-  user_id: String,
+const ActionSchema = new Schema(
+  {
+    id: {
+      type: String,
+      default: uuid.v4,
+      unique: true,
+    },
+    action_type: {
+      type: String,
+      enum: ACTION_TYPES,
+    },
+    item_type: {
+      type: String,
+      enum: ITEM_TYPES,
+    },
+    item_id: String,
+    user_id: String,
 
-  // The element that summaries will additionally group on in addtion to their action_type, item_type, and
-  // item_id.
-  group_id: String,
+    // The element that summaries will additionally group on in addtion to their action_type, item_type, and
+    // item_id.
+    group_id: String,
 
-  // Additional metadata stored on the field.
-  metadata: Schema.Types.Mixed
-}, {
-  timestamps: {
-    createdAt: 'created_at',
-    updatedAt: 'updated_at'
+    // Additional metadata stored on the field.
+    metadata: Schema.Types.Mixed,
+  },
+  {
+    timestamps: {
+      createdAt: 'created_at',
+      updatedAt: 'updated_at',
+    },
   }
-});
+);
 
 const Action = mongoose.model('Action', ActionSchema);
 
diff --git a/models/asset.js b/models/asset.js
index 4a6aea7e0..1f565a110 100644
--- a/models/asset.js
+++ b/models/asset.js
@@ -3,83 +3,91 @@ const Schema = mongoose.Schema;
 const uuid = require('uuid');
 const TagLinkSchema = require('./schema/tag_link');
 
-const AssetSchema = new Schema({
-  id: {
-    type: String,
-    default: uuid.v4,
-    unique: true,
-    index: true
-  },
-  url: {
-    type: String,
-    unique: true,
-    index: true
-  },
-  type: {
-    type: String,
-    default: 'assets'
-  },
-  scraped: {
-    type: Date,
-    default: null
-  },
-  closedAt: {
-    type: Date,
-    default: null
-  },
-  closedMessage: {
-    type: String,
-    default: null
-  },
-  title: String,
-  description: String,
-  image: String,
-  section: String,
-  subsection: String,
-  author: String,
-  publication_date: Date,
-  modified_date: Date,
+const AssetSchema = new Schema(
+  {
+    id: {
+      type: String,
+      default: uuid.v4,
+      unique: true,
+      index: true,
+    },
+    url: {
+      type: String,
+      unique: true,
+      index: true,
+    },
+    type: {
+      type: String,
+      default: 'assets',
+    },
+    scraped: {
+      type: Date,
+      default: null,
+    },
+    closedAt: {
+      type: Date,
+      default: null,
+    },
+    closedMessage: {
+      type: String,
+      default: null,
+    },
+    title: String,
+    description: String,
+    image: String,
+    section: String,
+    subsection: String,
+    author: String,
+    publication_date: Date,
+    modified_date: Date,
 
-  // This object is used exclusivly for storing settings that are to override
-  // the base settings from the base Settings object. This is to be accessed
-  // always after running `rectifySettings` against it.
-  settings: {
-    type: Schema.Types.Mixed,
-    default: {},
+    // This object is used exclusivly for storing settings that are to override
+    // the base settings from the base Settings object. This is to be accessed
+    // always after running `rectifySettings` against it.
+    settings: {
+      type: Schema.Types.Mixed,
+      default: {},
+    },
+
+    // Tags are added by the self or by administrators.
+    tags: [TagLinkSchema],
+
+    // Additional metadata stored on the field.
+    metadata: {
+      default: {},
+      type: Object,
+    },
   },
-
-  // Tags are added by the self or by administrators.
-  tags: [TagLinkSchema],
-
-  // Additional metadata stored on the field.
-  metadata: {
-    default: {},
-    type: Object
+  {
+    versionKey: false,
+    timestamps: {
+      createdAt: 'created_at',
+      updatedAt: 'updated_at',
+    },
   }
-}, {
-  versionKey: false,
-  timestamps: {
-    createdAt: 'created_at',
-    updatedAt: 'updated_at'
-  },
-});
+);
 
-AssetSchema.index({
-  title: 'text',
-  url: 'text',
-  description: 'text',
-  section: 'text',
-  subsection: 'text',
-  author: 'text'
-}, {
-  background: true,
-});
+AssetSchema.index(
+  {
+    title: 'text',
+    url: 'text',
+    description: 'text',
+    section: 'text',
+    subsection: 'text',
+    author: 'text',
+  },
+  {
+    background: true,
+  }
+);
 
 /**
  * Returns true if the asset is closed, false else.
  */
 AssetSchema.virtual('isClosed').get(function() {
-  return Boolean(this.closedAt && this.closedAt.getTime() <= new Date().getTime());
+  return Boolean(
+    this.closedAt && this.closedAt.getTime() <= new Date().getTime()
+  );
 });
 
 const Asset = mongoose.model('Asset', AssetSchema);
diff --git a/models/comment.js b/models/comment.js
index ae6aa558f..88f5e5829 100644
--- a/models/comment.js
+++ b/models/comment.js
@@ -8,22 +8,25 @@ const COMMENT_STATUS = require('./enum/comment_status');
  * The Mongo schema for a Comment Status.
  * @type {Schema}
  */
-const StatusSchema = new Schema({
-  type: {
-    type: String,
-    enum: COMMENT_STATUS,
-  },
+const StatusSchema = new Schema(
+  {
+    type: {
+      type: String,
+      enum: COMMENT_STATUS,
+    },
 
-  // The User ID of the user that assigned the status.
-  assigned_by: {
-    type: String,
-    default: null
-  },
+    // The User ID of the user that assigned the status.
+    assigned_by: {
+      type: String,
+      default: null,
+    },
 
-  created_at: Date
-}, {
-  _id: false
-});
+    created_at: Date,
+  },
+  {
+    _id: false,
+  }
+);
 
 /**
  * A record of old body values for a Comment
@@ -39,153 +42,186 @@ const BodyHistoryItemSchema = new Schema({
     required: true,
     type: Date,
     default: Date,
-  }
+  },
 });
 
 /**
  * The Mongo schema for a Comment.
  * @type {Schema}
  */
-const CommentSchema = new Schema({
-  id: {
-    type: String,
-    default: uuid.v4,
-    unique: true
-  },
-  body: {
-    type: String,
-    required: [true, 'The body is required.'],
-    minlength: 2,
-  },
-  body_history: [BodyHistoryItemSchema],
-  asset_id: String,
-  author_id: String,
-  status_history: [StatusSchema],
-  status: {
-    type: String,
-    enum: COMMENT_STATUS,
-    default: 'NONE'
-  },
+const CommentSchema = new Schema(
+  {
+    id: {
+      type: String,
+      default: uuid.v4,
+      unique: true,
+    },
+    body: {
+      type: String,
+      required: [true, 'The body is required.'],
+      minlength: 2,
+    },
+    body_history: [BodyHistoryItemSchema],
+    asset_id: String,
+    author_id: String,
+    status_history: [StatusSchema],
+    status: {
+      type: String,
+      enum: COMMENT_STATUS,
+      default: 'NONE',
+    },
 
-  // parent_id is the id of the parent comment (null if there is none).
-  parent_id: String,
+    // parent_id is the id of the parent comment (null if there is none).
+    parent_id: String,
 
-  // The number of replies to this comment directly.
-  reply_count: {
-    type: Number,
-    default: 0,
+    // The number of replies to this comment directly.
+    reply_count: {
+      type: Number,
+      default: 0,
+    },
+
+    // Counts to store related to actions taken on the given comment.
+    action_counts: {
+      default: {},
+      type: Object,
+    },
+
+    // Tags are added by the self or by administrators.
+    tags: [TagLinkSchema],
+
+    // Additional metadata stored on the field.
+    metadata: {
+      default: {},
+      type: Object,
+    },
   },
-
-  // Counts to store related to actions taken on the given comment.
-  action_counts: {
-    default: {},
-    type: Object,
-  },
-
-  // Tags are added by the self or by administrators.
-  tags: [TagLinkSchema],
-
-  // Additional metadata stored on the field.
-  metadata: {
-    default: {},
-    type: Object,
+  {
+    timestamps: {
+      createdAt: 'created_at',
+      updatedAt: 'updated_at',
+    },
+    toJSON: {
+      virtuals: true,
+    },
   }
-}, {
-  timestamps: {
-    createdAt: 'created_at',
-    updatedAt: 'updated_at'
-  },
-  toJSON: {
-    virtuals: true,
-  },
-});
+);
 
 // Add the indexes for the id of the comment.
-CommentSchema.index({
-  'id': 1
-}, {
-  unique: true,
-  background: false
-});
+CommentSchema.index(
+  {
+    id: 1,
+  },
+  {
+    unique: true,
+    background: false,
+  }
+);
 
-CommentSchema.index({
-  'status': 1,
-  'created_at': 1,
-}, {
-  background: true,
-});
+CommentSchema.index(
+  {
+    status: 1,
+    created_at: 1,
+  },
+  {
+    background: true,
+  }
+);
 
-CommentSchema.index({
-  'status': 1,
-  'created_at': 1,
-  'asset_id': 1,
-}, {
-  background: true,
-});
+CommentSchema.index(
+  {
+    status: 1,
+    created_at: 1,
+    asset_id: 1,
+  },
+  {
+    background: true,
+  }
+);
 
 // Create a sparse index to search across.
-CommentSchema.index({
-  'created_at': 1,
-  'action_counts.flag': 1,
-  'status': 1,
-}, {
-  background: true,
-  sparse: true,
-});
+CommentSchema.index(
+  {
+    created_at: 1,
+    'action_counts.flag': 1,
+    status: 1,
+  },
+  {
+    background: true,
+    sparse: true,
+  }
+);
 
 // Create a sparse index to search across.
-CommentSchema.index({
-  'action_counts.flag': 1,
-  'status': 1,
-}, {
-  background: true,
-  sparse: true,
-});
+CommentSchema.index(
+  {
+    'action_counts.flag': 1,
+    status: 1,
+  },
+  {
+    background: true,
+    sparse: true,
+  }
+);
 
 // Add an index that is optimized for finding flagged comments.
-CommentSchema.index({
-  'asset_id': 1,
-  'created_at': 1,
-  'action_counts.flag': 1,
-}, {
-  background: true,
-});
+CommentSchema.index(
+  {
+    asset_id: 1,
+    created_at: 1,
+    'action_counts.flag': 1,
+  },
+  {
+    background: true,
+  }
+);
 
 // Add an index for the reply sort.
-CommentSchema.index({
-  'asset_id': 1,
-  'created_at': -1,
-  'reply_count': -1,
-}, {
-  background: true,
-});
+CommentSchema.index(
+  {
+    asset_id: 1,
+    created_at: -1,
+    reply_count: -1,
+  },
+  {
+    background: true,
+  }
+);
 
 // Optimize for tag searches/counts.
-CommentSchema.index({
-  'asset_id': 1,
-  'tags.tag.name': 1,
-  'status': 1,
-}, {
-  background: true,
-});
+CommentSchema.index(
+  {
+    asset_id: 1,
+    'tags.tag.name': 1,
+    status: 1,
+  },
+  {
+    background: true,
+  }
+);
 
 // Optimize for tag searches/counts.
-CommentSchema.index({
-  'tags.tag.name': 1,
-  'status': 1,
-}, {
-  background: true,
-  sparse: true,
-});
+CommentSchema.index(
+  {
+    'tags.tag.name': 1,
+    status: 1,
+  },
+  {
+    background: true,
+    sparse: true,
+  }
+);
 
 // Add an index that is optimized for sorting based on the created_at timestamp
 // but also good at locating comments that have a specific asset id.
-CommentSchema.index({
-  'asset_id': 1,
-  'created_at': 1,
-}, {
-  background: true,
-});
+CommentSchema.index(
+  {
+    asset_id: 1,
+    created_at: 1,
+  },
+  {
+    background: true,
+  }
+);
 
 CommentSchema.virtual('edited').get(function() {
   return this.body_history.length > 1;
@@ -196,7 +232,4 @@ CommentSchema.virtual('visible').get(function() {
   return ['ACCEPTED', 'NONE'].includes(this.status);
 });
 
-// Comment model.
-const Comment = mongoose.model('Comment', CommentSchema);
-
-module.exports = Comment;
+module.exports = mongoose.model('Comment', CommentSchema);
diff --git a/models/enum/action_types.js b/models/enum/action_types.js
index 3a27d3b85..12d91dd7e 100644
--- a/models/enum/action_types.js
+++ b/models/enum/action_types.js
@@ -1,4 +1 @@
-module.exports = [
-  'LIKE',
-  'FLAG'
-];
+module.exports = ['LIKE', 'FLAG'];
diff --git a/models/enum/comment_status.js b/models/enum/comment_status.js
index a0648f72e..c4910e633 100644
--- a/models/enum/comment_status.js
+++ b/models/enum/comment_status.js
@@ -1,7 +1 @@
-module.exports = [
-  'ACCEPTED',
-  'REJECTED',
-  'PREMOD',
-  'SYSTEM_WITHHELD',
-  'NONE'
-];
+module.exports = ['ACCEPTED', 'REJECTED', 'PREMOD', 'SYSTEM_WITHHELD', 'NONE'];
diff --git a/models/enum/item_types.js b/models/enum/item_types.js
index e95aff82d..b121fdc30 100644
--- a/models/enum/item_types.js
+++ b/models/enum/item_types.js
@@ -1,5 +1 @@
-module.exports = [
-  'ASSETS',
-  'COMMENTS',
-  'USERS'
-];
+module.exports = ['ASSETS', 'COMMENTS', 'USERS'];
diff --git a/models/enum/moderation_options.js b/models/enum/moderation_options.js
index 0331d59e0..2d1401c49 100644
--- a/models/enum/moderation_options.js
+++ b/models/enum/moderation_options.js
@@ -1,4 +1 @@
-module.exports = [
-  'PRE',
-  'POST'
-];
+module.exports = ['PRE', 'POST'];
diff --git a/models/enum/user_roles.js b/models/enum/user_roles.js
index 098eb0960..59ec3d31a 100644
--- a/models/enum/user_roles.js
+++ b/models/enum/user_roles.js
@@ -1,5 +1 @@
-module.exports = [
-  'ADMIN',
-  'MODERATOR',
-  'STAFF'
-];
+module.exports = ['ADMIN', 'MODERATOR', 'STAFF', 'COMMENTER'];
diff --git a/models/enum/user_status.js b/models/enum/user_status.js
deleted file mode 100644
index cec930904..000000000
--- a/models/enum/user_status.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = [
-  'ACTIVE',
-  'BANNED',
-  'PENDING',
-  'APPROVED' // Indicates that the users' username has been approved
-];
diff --git a/models/enum/user_status_username.js b/models/enum/user_status_username.js
new file mode 100644
index 000000000..fb11c0fda
--- /dev/null
+++ b/models/enum/user_status_username.js
@@ -0,0 +1,24 @@
+module.exports = [
+  // UNSET is used when the username can be changed, and does not necessarily
+  // require moderator action to become active. This can be used when the user
+  // signs up with a social login and has the option of setting their own
+  // username.
+  'UNSET',
+
+  // SET is used when the username has been set for the first time, but cannot
+  // change without the username being rejected by a moderator and that moderator
+  // agreeing that the username should be allowed to change.
+  'SET',
+
+  // APPROVED is used when the username was changed, and subsequently approved by
+  // said moderator.
+  'APPROVED',
+
+  // REJECTED is used when the username was changed, and subsequently rejected by
+  // said moderator.
+  'REJECTED',
+
+  // CHANGED is used after a user has changed their username after it was
+  // rejected.
+  'CHANGED',
+];
diff --git a/models/migration.js b/models/migration.js
index 648c5594b..d60a4c0d6 100644
--- a/models/migration.js
+++ b/models/migration.js
@@ -2,7 +2,7 @@ const mongoose = require('../services/mongoose');
 const Schema = mongoose.Schema;
 
 const MigrationSchema = new Schema({
-  version: Number
+  version: Number,
 });
 
 const Migration = mongoose.model('Migration', MigrationSchema);
diff --git a/models/schema/tag.js b/models/schema/tag.js
index 2d97185a0..c7cc674e7 100644
--- a/models/schema/tag.js
+++ b/models/schema/tag.js
@@ -8,46 +8,51 @@ const USER_ROLES = require('../enum/user_roles');
  * The Mongo schema for a Tag.
  * @type {Schema}
  */
-const TagSchema = new Schema({
+const TagSchema = new Schema(
+  {
+    // The actual name of the tag.
+    name: String,
 
-  // The actual name of the tag.
-  name: String,
+    // Contains permission data.
+    permissions: {
+      // Determines if this tag is public or not.
+      public: {
+        type: Boolean,
+        default: true,
+      },
 
-  // Contains permission data.
-  permissions: {
+      // Determines if the owner of the Model can add/remove this tag on their own
+      // resources.
+      self: Boolean,
 
-    // Determines if this tag is public or not.
-    public: {
-      type: Boolean,
-      default: true
+      // Determines other roles that are allowed to set this tag on other
+      // resources.
+      roles: [
+        {
+          type: String,
+          enum: USER_ROLES,
+          default: [],
+        },
+      ],
     },
 
-    // Determines if the owner of the Model can add/remove this tag on their own
-    // resources.
-    self: Boolean,
+    // A list of all the model types that this tag can be added to.
+    models: [
+      {
+        type: String,
+        enum: ITEM_TYPES,
+      },
+    ],
 
-    // Determines other roles that are allowed to set this tag on other
-    // resources.
-    roles: [{
-      type: String,
-      enum: USER_ROLES,
-      default: []
-    }]
+    // The date for when the tag was created.
+    created_at: {
+      type: Date,
+      default: Date,
+    },
   },
-
-  // A list of all the model types that this tag can be added to.
-  models: [{
-    type: String,
-    enum: ITEM_TYPES
-  }],
-
-  // The date for when the tag was created.
-  created_at: {
-    type: Date,
-    default: Date
+  {
+    _id: false,
   }
-}, {
-  _id: false
-});
+);
 
 module.exports = TagSchema;
diff --git a/models/schema/tag_link.js b/models/schema/tag_link.js
index 1cc1dbd08..2c1d3eef8 100644
--- a/models/schema/tag_link.js
+++ b/models/schema/tag_link.js
@@ -6,26 +6,28 @@ const TagSchema = require('./tag');
  * The Mongo schema for linking a Tag to a Model.
  * @type {Schema}
  */
-const TagLinkSchema = new Schema({
+const TagLinkSchema = new Schema(
+  {
+    // A deep copy of the tag that is the origin for this link. If the ID matches
+    // with existing tags in the global/asset context then content will be
+    // substituted.
+    tag: TagSchema,
 
-  // A deep copy of the tag that is the origin for this link. If the ID matches
-  // with existing tags in the global/asset context then content will be
-  // substituted.
-  tag: TagSchema,
+    // The User ID of the user that assigned the status.
+    assigned_by: {
+      type: String,
+      default: null,
+    },
 
-  // The User ID of the user that assigned the status.
-  assigned_by: {
-    type: String,
-    default: null
+    // The date when the tag was added to the model.
+    created_at: {
+      type: Date,
+      default: Date,
+    },
   },
-
-  // The date when the tag was added to the model.
-  created_at: {
-    type: Date,
-    default: Date
+  {
+    _id: false,
   }
-}, {
-  _id: false
-});
+);
 
 module.exports = TagLinkSchema;
diff --git a/models/schema/token.js b/models/schema/token.js
index 83b6cc049..17b9e1927 100644
--- a/models/schema/token.js
+++ b/models/schema/token.js
@@ -2,7 +2,6 @@ const mongoose = require('../../services/mongoose');
 const Schema = mongoose.Schema;
 
 const TokenSchema = new Schema({
-
   // ID is the JTI of a given JWT's identifier.
   id: String,
 
@@ -10,7 +9,7 @@ const TokenSchema = new Schema({
   name: String,
 
   // Active is used to determine if the token is valid.
-  active: Boolean
+  active: Boolean,
 });
 
 module.exports = TokenSchema;
diff --git a/models/setting.js b/models/setting.js
index d8cda8507..c4b20a4ed 100644
--- a/models/setting.js
+++ b/models/setting.js
@@ -7,118 +7,120 @@ const MODERATION_OPTIONS = require('./enum/moderation_options');
  * SettingSchema manages application settings that get used on front and backend.
  * @type {Schema}
  */
-const SettingSchema = new Schema({
-  id: {
-    type: String,
-    default: '1'
-  },
-  moderation: {
-    type: String,
-    enum: MODERATION_OPTIONS,
-    default: 'POST'
-  },
-  infoBoxEnable: {
-    type: Boolean,
-    default: false
-  },
-  customCssUrl: {
-    type: String,
-    default: ''
-  },
-  infoBoxContent: {
-    type: String,
-    default: ''
-  },
-  questionBoxEnable: {
-    type: Boolean,
-    default: false
-  },
-  questionBoxIcon: {
-    type: String,
-    default: 'default'
-  },
-  questionBoxContent: {
-    type: String,
-    default: ''
-  },
-  premodLinksEnable: {
-    type: Boolean,
-    default: false
-  },
-  organizationName: {
-    type: String
-  },
-  autoCloseStream: {
-    type: Boolean,
-    default: false
-  },
-  closedTimeout: {
-    type: Number,
-
-    // Two weeks default expiry.
-    default: 60 * 60 * 24 * 7 * 2
-  },
-  closedMessage: {
-    type: String,
-    default: 'Expired'
-  },
-  wordlist: {
-    banned: {
-      type: Array,
-      default: []
+const SettingSchema = new Schema(
+  {
+    id: {
+      type: String,
+      default: '1',
     },
-    suspect: {
-      type: Array,
-      default: []
-    }
-  },
-  charCount: {
-    type: Number,
-    default: 5000
-  },
-  charCountEnable: {
-    type: Boolean,
-    default: false
-  },
-  requireEmailConfirmation: {
-    type: Boolean,
-    default: false
-  },
-  domains: {
-    whitelist: {
-      type: Array,
-      default: ['localhost']
-    }
-  },
+    moderation: {
+      type: String,
+      enum: MODERATION_OPTIONS,
+      default: 'POST',
+    },
+    infoBoxEnable: {
+      type: Boolean,
+      default: false,
+    },
+    customCssUrl: {
+      type: String,
+      default: '',
+    },
+    infoBoxContent: {
+      type: String,
+      default: '',
+    },
+    questionBoxEnable: {
+      type: Boolean,
+      default: false,
+    },
+    questionBoxIcon: {
+      type: String,
+      default: 'default',
+    },
+    questionBoxContent: {
+      type: String,
+      default: '',
+    },
+    premodLinksEnable: {
+      type: Boolean,
+      default: false,
+    },
+    organizationName: {
+      type: String,
+    },
+    autoCloseStream: {
+      type: Boolean,
+      default: false,
+    },
+    closedTimeout: {
+      type: Number,
 
-  // Length of time (in milliseconds) after a comment is posted that it can still be edited by the author
-  editCommentWindowLength: {
-    type: Number,
-    min: [0, 'Edit Comment Window length must be greater than zero'],
-    default: 30 * 1000,
-  },
-  tags: [TagSchema]
-}, {
-  timestamps: {
-    createdAt: 'created_at',
-    updatedAt: 'updated_at'
-  },
-  toObject: {
-    transform: (doc, ret) => {
-      delete ret._id;
-      delete ret.__v;
+      // Two weeks default expiry.
+      default: 60 * 60 * 24 * 7 * 2,
+    },
+    closedMessage: {
+      type: String,
+      default: 'Expired',
+    },
+    wordlist: {
+      banned: {
+        type: Array,
+        default: [],
+      },
+      suspect: {
+        type: Array,
+        default: [],
+      },
+    },
+    charCount: {
+      type: Number,
+      default: 5000,
+    },
+    charCountEnable: {
+      type: Boolean,
+      default: false,
+    },
+    requireEmailConfirmation: {
+      type: Boolean,
+      default: false,
+    },
+    domains: {
+      whitelist: {
+        type: Array,
+        default: ['localhost'],
+      },
+    },
 
-      return ret;
-    }
+    // Length of time (in milliseconds) after a comment is posted that it can still be edited by the author
+    editCommentWindowLength: {
+      type: Number,
+      min: [0, 'Edit Comment Window length must be greater than zero'],
+      default: 30 * 1000,
+    },
+    tags: [TagSchema],
+  },
+  {
+    timestamps: {
+      createdAt: 'created_at',
+      updatedAt: 'updated_at',
+    },
+    toObject: {
+      transform: (doc, ret) => {
+        delete ret._id;
+        delete ret.__v;
+
+        return ret;
+      },
+    },
   }
-});
+);
 
 /**
  * Merges two settings objects.
  */
 SettingSchema.method('merge', function(src) {
-  SettingSchema.eachPath((path) => {
-
+  SettingSchema.eachPath(path => {
     // Exclude internal fields...
     if (['id', '_id', '__v', 'created_at', 'updated_at'].includes(path)) {
       return;
diff --git a/models/user.js b/models/user.js
index 450819d53..2aae9c4d3 100644
--- a/models/user.js
+++ b/models/user.js
@@ -4,174 +4,270 @@ const Schema = mongoose.Schema;
 const uuid = require('uuid');
 const TagLinkSchema = require('./schema/tag_link');
 const TokenSchema = require('./schema/token');
-const intersection = require('lodash/intersection');
 const can = require('../perms');
+const { get } = require('lodash');
 
 // USER_ROLES is the array of roles that is permissible as a user role.
 const USER_ROLES = require('./enum/user_roles');
 
-// USER_STATUS is the list of statuses that are permitted for the user status.
-const USER_STATUS = require('./enum/user_status');
+// USER_STATUS_USERNAME is the list of statuses that are supported by storing
+// the username state.
+const USER_STATUS_USERNAME = require('./enum/user_status_username');
 
 // ProfileSchema is the mongoose schema defined as the representation of a
 // User's profile stored in MongoDB.
-const ProfileSchema = new Schema({
+const ProfileSchema = new Schema(
+  {
+    // ID provides the identifier for the user profile, in the case of a local
+    // provider, the id would be an email, in the case of a social provider,
+    // the id would be the foreign providers identifier.
+    id: {
+      type: String,
+      required: true,
+    },
 
-  // ID provides the identifier for the user profile, in the case of a local
-  // provider, the id would be an email, in the case of a social provider,
-  // the id would be the foreign providers identifier.
-  id: {
-    type: String,
-    required: true
+    // Provider is simply the name attached to the authentication mode. In the
+    // case of a locally provided profile, this will simply be `local`, or a
+    // social provider which for Facebook would just be `facebook`.
+    provider: {
+      type: String,
+      required: true,
+    },
+
+    // Metadata provides a place to put provider specific details. An example of
+    // something that could be stored here is the `metadata.confirmed_at` could be
+    // used by the `local` provider to indicate when the email address was
+    // confirmed.
+    metadata: {
+      type: Schema.Types.Mixed,
+    },
   },
-
-  // Provider is simply the name attached to the authentication mode. In the
-  // case of a locally provided profile, this will simply be `local`, or a
-  // social provider which for Facebook would just be `facebook`.
-  provider: {
-    type: String,
-    required: true
-  },
-
-  // Metadata provides a place to put provider specific details. An example of
-  // something that could be stored here is the `metadata.confirmed_at` could be
-  // used by the `local` provider to indicate when the email address was
-  // confirmed.
-  metadata: {
-    type: Schema.Types.Mixed
+  {
+    _id: false,
   }
-}, {
-  _id: false
-});
+);
 
 // UserSchema is the mongoose schema defined as the representation of a User in
 // MongoDB.
-const UserSchema = new Schema({
+const UserSchema = new Schema(
+  {
+    // This ID represents the most unique identifier for a user, it is generated
+    // when the user is created as a random uuid.
+    id: {
+      type: String,
+      default: uuid.v4,
+      unique: true,
+      required: true,
+    },
 
-  // This ID represents the most unique identifier for a user, it is generated
-  // when the user is created as a random uuid.
-  id: {
-    type: String,
-    default: uuid.v4,
-    unique: true,
-    required: true
-  },
+    // This is sourced from the social provider or set manually during user setup
+    // and simply provides a name to display for the given user.
+    username: {
+      type: String,
+      required: true,
+    },
 
-  // This is sourced from the social provider or set manually during user setup
-  // and simply provides a name to display for the given user.
-  username: {
-    type: String,
-    required: true
-  },
+    // TODO: find a way that we can instead utilize MongoDB 3.4's collation
+    // options to build the index in a case insenstive manner:
+    // https://docs.mongodb.com/manual/reference/collation/
+    lowercaseUsername: {
+      type: String,
+      required: true,
+      unique: true,
+    },
 
-  // TODO: find a way that we can instead utilize MongoDB 3.4's collation
-  // options to build the index in a case insenstive manner:
-  // https://docs.mongodb.com/manual/reference/collation/
-  lowercaseUsername: {
-    type: String,
-    required: true,
-    unique: true
-  },
+    // This provides a source of identity proof for users who login using the
+    // local provider. A local provider will be assumed for users who do not
+    // have any social profiles.
+    password: String,
 
-  // This is true when the user account is disabled, no action should be
-  // acknowledged when they are disabled. Logins are also prevented.
-  disabled: Boolean,
+    // Profiles describes the array of identities for a given user. Any one user
+    // can have multiple profiles associated with them, including multiple email
+    // addresses.
+    profiles: [ProfileSchema],
 
-  // This provides a source of identity proof for users who login using the
-  // local provider. A local provider will be assumed for users who do not
-  // have any social profiles.
-  password: String,
+    // Tokens are the individual personal access tokens for a given user.
+    tokens: [TokenSchema],
 
-  // Profiles describes the array of identities for a given user. Any one user
-  // can have multiple profiles associated with them, including multiple email
-  // addresses.
-  profiles: [ProfileSchema],
+    // Role is the specific user role that the user holds.
+    role: {
+      type: String,
+      enum: USER_ROLES,
+      required: true,
+      default: 'COMMENTER',
+    },
 
-  // Tokens are the individual personal access tokens for a given user.
-  tokens: [TokenSchema],
+    // Status stores the user status information regarding permissions,
+    // capabilities and moderation state.
+    status: {
+      // Username stores the current user status for the username as well as the
+      // history of changes.
+      username: {
+        // Status stores the current username status.
+        status: {
+          type: String,
+          enum: USER_STATUS_USERNAME,
+        },
 
-  // Roles provides an array of roles (as strings) that is associated with a
-  // user.
-  roles: [{
-    type: String,
-    enum: USER_ROLES
-  }],
+        // History stores the history of username status changes.
+        history: [
+          {
+            // Status stores the historical username status.
+            status: {
+              type: String,
+              enum: USER_STATUS_USERNAME,
+            },
 
-  // Status provides a string that says in which state the account is.
-  // When the account is banned, the user login is disabled.
-  status: {
-    type: String,
-    enum: USER_STATUS,
-    default: 'ACTIVE'
-  },
+            // assigned_by stores the user id of the user who assigned this status.
+            assigned_by: { type: String, default: null },
 
-  // Determines whether the user can edit their username.
-  canEditName: {
-    type: Boolean,
-    default: false
-  },
+            // created_at stores the date when this status was assigned.
+            created_at: { type: Date, default: Date.now },
+          },
+        ],
+      },
 
-  // User's suspension details.
-  suspension: {
-    until: {
-      type: Date,
-      default: null,
+      // Banned stores the current user banned status as well as the history of
+      // changes.
+      banned: {
+        // Status stores the current user banned status.
+        status: {
+          type: Boolean,
+          required: true,
+          default: false,
+        },
+        history: [
+          {
+            // Status stores the historical banned status.
+            status: Boolean,
+
+            // assigned_by stores the user id of the user who assigned this status.
+            assigned_by: { type: String, default: null },
+
+            // message stores the email content sent to the user.
+            message: { type: String, default: null },
+
+            // created_at stores the date when this status was assigned.
+            created_at: { type: Date, default: Date.now },
+          },
+        ],
+      },
+
+      // Suspension stores the current user suspension status as well as the
+      // history of changes.
+      suspension: {
+        // until is the date that the user is suspended until.
+        until: {
+          type: Date,
+          default: null,
+        },
+        history: [
+          {
+            // until is the date that the user is suspended until.
+            until: Date,
+
+            // assigned_by stores the user id of the user who assigned this status.
+            assigned_by: { type: String, default: null },
+
+            // message stores the email content sent to the user.
+            message: { type: String, default: null },
+
+            // created_at stores the date when this status was assigned.
+            created_at: { type: Date, default: Date.now },
+          },
+        ],
+      },
+    },
+
+    // IgnoresUsers is an array of user id's that the current user is ignoring.
+    ignoresUsers: [String],
+
+    // Counts to store related to actions taken on the given user.
+    action_counts: {
+      default: {},
+      type: Object,
+    },
+
+    // Tags are added by the self or by administrators.
+    tags: [TagLinkSchema],
+
+    // Additional metadata stored on the field.
+    metadata: {
+      default: {},
+      type: Object,
     },
   },
+  {
+    // This will ensure that we have proper timestamps available on this model.
+    timestamps: {
+      createdAt: 'created_at',
+      updatedAt: 'updated_at',
+    },
 
-  // User's settings
-  settings: {
-    bio: {
-      type: String,
-      default: ''
-    }
-  },
-
-  ignoresUsers: [{
-
-    // user id of another user
-    type: String,
-  }],
-
-  // Tags are added by the self or by administrators.
-  tags: [TagLinkSchema],
-
-  // Additional metadata stored on the field.
-  metadata: {
-    default: {},
-    type: Object
+    toJSON: {
+      transform: function(doc, ret) {
+        delete ret.__v;
+        delete ret._id;
+        delete ret.password;
+        delete ret.status.username.history;
+        delete ret.status.banned.history;
+        delete ret.status.suspension.history;
+        delete ret.tokens;
+      },
+    },
   }
-}, {
+);
 
-  // This will ensure that we have proper timestamps available on this model.
-  timestamps: {
-    createdAt: 'created_at',
-    updatedAt: 'updated_at'
+// Add the index on the user profile data.
+UserSchema.index(
+  {
+    'profiles.id': 1,
+    'profiles.provider': 1,
   },
-
-  toJSON: {
-    transform: function (doc, ret) {
-      delete ret.password;
-      delete ret._id;
-      delete ret.__v;
-    }
+  {
+    unique: true,
+    background: false,
   }
-});
+);
 
-// Add the indixies on the user profile data.
-UserSchema.index({
-  'profiles.id': 1,
-  'profiles.provider': 1
-}, {
-  unique: true,
-  background: false
-});
+UserSchema.index(
+  {
+    lowercaseUsername: 1,
+    'profiles.id': 1,
+    created_at: -1,
+  },
+  {
+    background: true,
+  }
+);
+
+// This query is executed often, to count the number of flagged accounts with
+// usernames.
+UserSchema.index(
+  {
+    'action_counts.flag': 1,
+    'status.username.status': 1,
+  },
+  {
+    background: true,
+  }
+);
+
+// Sorting users by created at is the default people search.
+UserSchema.index(
+  {
+    created_at: -1,
+  },
+  {
+    background: true,
+  }
+);
 
 /**
  * returns true if a commenter is staff
  */
-UserSchema.method('isStaff', function () {
-  return intersection(['ADMIN', 'MODERATOR', 'STAFF'], this.roles).length !== 0;
+UserSchema.method('isStaff', function() {
+  return this.role !== 'COMMENTER';
 });
 
 /**
@@ -201,6 +297,85 @@ UserSchema.method('can', function(...actions) {
   return can(this, ...actions);
 });
 
+/**
+ * firstEmail will return the first email on the user.
+ */
+UserSchema.virtual('firstEmail').get(function() {
+  const emails = this.emails;
+  if (emails.length === 0) {
+    return null;
+  }
+
+  return emails[0];
+});
+
+/**
+ * emails will return all the emails on a user.
+ */
+UserSchema.virtual('emails').get(function() {
+  return (this.profiles || [])
+    .filter(({ provider }) => provider === 'local')
+    .map(({ id }) => id);
+});
+
+/**
+ * hasVerifiedEmail will return true if at least one of the local email accounts
+ * have their email verified.
+ */
+UserSchema.virtual('hasVerifiedEmail').get(function() {
+  return this.profiles
+    .filter(({ provider }) => provider === 'local')
+    .some(profile => {
+      const confirmedAt = get(profile, 'metadata.confirmed_at') || null;
+
+      // If the profile doesn't have a metadata field, or it does not have a
+      // confirmed_at field, or that field is null, then send them back.
+      return confirmedAt !== null;
+    });
+});
+
+UserSchema.virtual('system')
+  .get(function() {
+    return this._system;
+  })
+  .set(function(system) {
+    this._system = system;
+  });
+
+/**
+ * banned returns true when the user is currently banned, and sets the banned
+ * status locally.
+ */
+UserSchema.virtual('banned')
+  .get(function() {
+    return this.status.banned.status;
+  })
+  .set(function(status) {
+    this.status.banned.status = status;
+    this.status.banned.history.push({
+      status,
+      created_at: new Date(),
+    });
+  });
+
+/**
+ * suspended returns true when the user is currently suspended, and sets the
+ * suspension status locally.
+ */
+UserSchema.virtual('suspended')
+  .get(function() {
+    return Boolean(
+      this.status.suspension.until && this.status.suspension.until > new Date()
+    );
+  })
+  .set(function(until) {
+    this.status.suspension.until = until;
+    this.status.suspension.history.push({
+      until,
+      created_at: new Date(),
+    });
+  });
+
 // Create the User model.
 const UserModel = mongoose.model('User', UserSchema);
 
diff --git a/nightwatch-browserstack.conf.js b/nightwatch-browserstack.conf.js
index 567d5e1f4..961d50b4e 100644
--- a/nightwatch-browserstack.conf.js
+++ b/nightwatch-browserstack.conf.js
@@ -1,6 +1,4 @@
-const {
-  ROOT_URL
-} = require('./config');
+const { ROOT_URL } = require('./config');
 
 const nightwatch_config = {
   src_folders: './test/e2e/specs/',
@@ -8,10 +6,10 @@ const nightwatch_config = {
   page_objects_path: './test/e2e/page_objects',
   globals_path: './test/e2e/globals',
 
-  selenium : {
+  selenium: {
     start_process: false,
     host: 'hub-cloud.browserstack.com',
-    port: 80
+    port: 80,
   },
 
   test_settings: {
@@ -22,14 +20,17 @@ const nightwatch_config = {
         'browserstack.user': process.env.BROWSERSTACK_USER || 'coralproject2',
         'browserstack.key': process.env.BROWSERSTACK_KEY,
         'browserstack.local': true,
-        'browserstack.localIdentifier': process.env.BROWSERSTACK_LOCAL_IDENTIFIER ? process.env.BROWSERSTACK_LOCAL_IDENTIFIER : undefined,
+        'browserstack.localIdentifier': process.env
+          .BROWSERSTACK_LOCAL_IDENTIFIER
+          ? process.env.BROWSERSTACK_LOCAL_IDENTIFIER
+          : undefined,
         'browserstack.debug': true,
 
         // Disable this, as it makes bs slow and brittle.
         'browserstack.networkLogs': false,
-        'resolution': '1600x1200',
+        resolution: '1600x1200',
       },
-      screenshots : {
+      screenshots: {
         enabled: true,
         on_failure: true,
         on_error: true,
@@ -77,11 +78,11 @@ const nightwatch_config = {
         os_version: '10',
       },
     },
-  }
+  },
 };
 
 // Code to copy seleniumhost/port into test settings
-for(const i in nightwatch_config.test_settings){
+for (const i in nightwatch_config.test_settings) {
   const config = nightwatch_config.test_settings[i];
   config['selenium_host'] = nightwatch_config.selenium.host;
   config['selenium_port'] = nightwatch_config.selenium.port;
diff --git a/nightwatch.conf.js b/nightwatch.conf.js
index 260738e35..ac5887e51 100644
--- a/nightwatch.conf.js
+++ b/nightwatch.conf.js
@@ -1,6 +1,4 @@
-const {
-  ROOT_URL
-} = require('./config');
+const { ROOT_URL } = require('./config');
 
 module.exports = {
   src_folders: './test/e2e/specs/',
@@ -9,14 +7,17 @@ module.exports = {
   globals_path: './test/e2e/globals',
   selenium: {
     start_process: true,
-    server_path: 'node_modules/selenium-standalone/.selenium/selenium-server/3.7.1-server.jar',
+    server_path:
+      'node_modules/selenium-standalone/.selenium/selenium-server/3.7.1-server.jar',
     log_path: './test/e2e/',
     host: '127.0.0.1',
     port: 6666,
     cli_args: {
-      'webdriver.chrome.driver': 'node_modules/selenium-standalone/.selenium/chromedriver/2.33-x64-chromedriver',
-      'webdriver.gecko.driver': 'node_modules/selenium-standalone/.selenium/geckodriver/0.19.1-x64-geckodriver',
-    }
+      'webdriver.chrome.driver':
+        'node_modules/selenium-standalone/.selenium/chromedriver/2.33-x64-chromedriver',
+      'webdriver.gecko.driver':
+        'node_modules/selenium-standalone/.selenium/geckodriver/0.19.1-x64-geckodriver',
+    },
   },
   test_settings: {
     default: {
@@ -33,18 +34,17 @@ module.exports = {
         applicationCacheEnabled: false,
         nativeEvents: true,
       },
-      screenshots : {
+      screenshots: {
         enabled: true,
         on_failure: true,
         on_error: true,
         path: process.env.REPORTS_FOLDER || './test/e2e/reports',
       },
     },
-    'chrome': {
-    },
+    chrome: {},
     'chrome-headless': {
       desiredCapabilities: {
-        chromeOptions : {
+        chromeOptions: {
           args: ['--headless', '--disable-gpu', 'window-size=1600,1200'],
         },
       },
diff --git a/package.json b/package.json
index b499c99ea..9234e4ef7 100644
--- a/package.json
+++ b/package.json
@@ -1,44 +1,35 @@
 {
   "name": "talk",
-  "version": "3.9.1",
+  "version": "4.0.0",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "private": true,
   "scripts": {
     "postinstall": "./bin/cli plugins reconcile --skip-remote",
-    "start": "./bin/cli serve -j -w",
-    "dev-start": "nodemon -w . -w bin/cli -w bin/cli-serve --config .nodemon.json --exec \"yarn generate-introspection && ./bin/cli -c .env serve -j -w\"",
-    "prebuild": "yarn generate-introspection",
-    "build": "WEBPACK=TRUE NODE_ENV=production webpack -p --config webpack.config.js --bail",
-    "prebuild-watch": "yarn generate-introspection",
-    "build-watch": "WEBPACK=TRUE NODE_ENV=development webpack --progress --config webpack.config.js --watch",
-    "lint": "yamllint locales/*.yml && eslint --ext=.js --ext=.json bin/* .",
-    "lint-fix": "yarn lint --fix",
-    "jest-watch": "TEST_MODE=unit NODE_ENV=test jest --watch",
-    "e2e-ci": "./scripts/e2e-ci.sh",
+    "generate-introspection": "WEBPACK=TRUE NODE_ENV=test ./scripts/generateIntrospectionResult.js",
+    "clean": "rm -rf dist client/coral-framework/graphql/introspection.json",
+    "watch": "npm-run-all clean generate-introspection --parallel watch:*",
+    "watch:client": "NODE_ENV=development webpack --progress --watch",
+    "watch:server": "nodemon --config .nodemon.json",
+    "start:development": "NODE_ENV=development ./bin/cli-serve -j -w",
+    "start": "NODE_ENV=production ./bin/cli-serve -j -w",
+    "prebuild": "npm-run-all clean generate-introspection",
+    "build": "NODE_ENV=production webpack -p --bail",
+    "lint:yaml": "yamllint locales/*.yml",
+    "lint:js": "eslint bin/* .",
+    "lint": "npm-run-all lint:*",
+    "plugins:reconcile": "./bin/cli plugins reconcile",
+    "test": "npm-run-all test:client test:server",
+    "test:server": "TEST_MODE=unit NODE_ENV=test mocha -R ${MOCHA_REPORTER:-spec}",
+    "test:client": "TEST_MODE=unit NODE_ENV=test jest",
+    "test:client:watch": "TEST_MODE=unit NODE_ENV=test jest --watch",
     "e2e": "./scripts/e2e.js",
-    "test": "TEST_MODE=unit NODE_ENV=test jest && TEST_MODE=unit NODE_ENV=test mocha -R ${MOCHA_REPORTER:-spec}",
-    "test-cover": "TEST_MODE=unit NODE_ENV=test istanbul cover _mocha --report text --check-coverage -- -R spec",
-    "heroku-postbuild": "./bin/cli plugins reconcile && yarn build",
-    "generate-introspection": "WEBPACK=TRUE NODE_ENV=test ./scripts/generateIntrospectionResult.js"
+    "e2e:ci": "./scripts/e2e-ci.sh",
+    "heroku-postbuild": "npm-run-all plugins:reconcile build"
   },
   "talk": {
     "migration": {
-      "minVersion": 1496771633
-    }
-  },
-  "config": {
-    "pre-git": {
-      "commit-msg": [],
-      "pre-commit": [
-        "yarn lint",
-        "yarn test"
-      ],
-      "pre-push": [
-        "yarn test"
-      ],
-      "post-commit": [],
-      "post-merge": []
+      "minVersion": 1511801783
     }
   },
   "repository": {
@@ -61,6 +52,9 @@
     "@coralproject/graphql-anywhere-optimized": "^0.1.0",
     "accepts": "^1.3.4",
     "apollo-client": "^1.9.1",
+    "apollo-engine": "^0.8.1",
+    "apollo-server-express": "^1.2.0",
+    "apollo-utilities": "^1.0.3",
     "app-module-path": "^2.2.0",
     "autoprefixer": "^6.5.2",
     "babel-cli": "6.26.0",
@@ -79,6 +73,7 @@
     "babel-preset-react": "^6.23.0",
     "bcryptjs": "^2.4.3",
     "bowser": "^1.7.2",
+    "brotli-webpack-plugin": "^0.5.0",
     "cli-table": "^0.3.1",
     "clipboard": "^1.7.1",
     "colors": "^1.1.2",
@@ -100,16 +95,16 @@
     "eventemitter2": "^4.1.2",
     "exports-loader": "^0.6.4",
     "express": "4.16.0",
+    "express-static-gzip": "^0.3.1",
     "file-loader": "^0.11.2",
     "form-data": "^2.3.1",
     "fs-extra": "^4.0.1",
     "gql-merge": "^0.0.4",
-    "graphql": "^0.9.1",
+    "graphql": "^0.10.1",
     "graphql-ast-tools": "0.2.3",
     "graphql-docs": "0.2.0",
     "graphql-errors": "^2.1.0",
     "graphql-redis-subscriptions": "1.3.0",
-    "graphql-server-express": "^0.6.0",
     "graphql-subscriptions": "^0.4.3",
     "graphql-tag": "^1.2.3",
     "graphql-tools": "^0.10.1",
@@ -119,17 +114,17 @@
     "immutability-helper": "^2.2.0",
     "imports-loader": "^0.7.1",
     "inquirer": "^3.2.2",
+    "inquirer-autocomplete-prompt": "^0.12.1",
     "ioredis": "3.1.4",
-    "istanbul": "^1.1.0-alpha.1",
     "joi": "^10.6.0",
     "json-loader": "^0.5.7",
     "jsonwebtoken": "^7.4.3",
     "jwt-decode": "^2.2.0",
     "keymaster": "^1.6.2",
     "kue": "0.11.6",
-    "license-webpack-plugin": "^1.0.0",
     "linkify-it": "^2.0.3",
     "lodash": "^4.16.6",
+    "lodash-es": "^4.16.6",
     "marked": "^0.3.6",
     "material-design-lite": "^1.2.1",
     "metascraper": "1.0.7",
@@ -142,6 +137,7 @@
     "node-emoji": "^1.8.1",
     "node-fetch": "^1.7.2",
     "nodemailer": "^2.6.4",
+    "npm-run-all": "^4.1.2",
     "passport": "^0.4.0",
     "passport-jwt": "^3.0.0",
     "passport-local": "^1.0.0",
@@ -156,7 +152,7 @@
     "react-apollo": "^1.4.12",
     "react-dom": "^15.4.2",
     "react-input-autosize": "^1.1.4",
-    "react-mdl": "^1.7.2",
+    "react-mdl": "^1.11.0",
     "react-mdl-selectfield": "^0.2.0",
     "react-paginate": "^5.0.0",
     "react-portal": "^4.1.2",
@@ -172,13 +168,13 @@
     "redux": "^3.6.0",
     "redux-thunk": "^2.1.0",
     "resolve": "^1.4.0",
-    "selenium-standalone": "^6.11.0",
     "semver": "^5.4.1",
     "simplemde": "^1.11.2",
     "smoothscroll-polyfill": "^0.3.5",
     "snake-case": "2.1.0",
     "style-loader": "^0.16.0",
     "subscriptions-transport-ws": "^0.7.2",
+    "supports-color": "^4",
     "timeago.js": "^2.0.3",
     "timekeeper": "^1.0.0",
     "tlds": "^1.196.0",
@@ -192,13 +188,14 @@
     "yamljs": "^0.2.10"
   },
   "devDependencies": {
-    "@coralproject/eslint-config-talk": "^0.0.4",
+    "@coralproject/eslint-config-talk": "^0.1.0",
     "babel-jest": "^21.2.0",
     "babel-plugin-dynamic-import-node": "^1.1.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "browserstack-local": "^1.3.0",
     "chai": "^3.5.0",
     "chai-as-promised": "^6.0.0",
+    "chai-datetime": "^1.5.0",
     "chai-http": "^3.0.0",
     "enzyme": "^3.0.0",
     "enzyme-adapter-react-15": "^1.0.0",
@@ -211,7 +208,8 @@
     "mocha-junit-reporter": "^1.12.1",
     "nightwatch": "^0.9.16",
     "nodemon": "^1.11.0",
-    "pre-git": "^3.15.3",
+    "pre-git": "^3.16.0",
+    "selenium-standalone": "^6.11.0",
     "sinon": "^3.2.1",
     "sinon-chai": "^2.13.0",
     "yaml-lint": "^1.0.0"
@@ -219,8 +217,24 @@
   "engines": {
     "node": "^8"
   },
+  "config": {
+    "pre-git": {
+      "pre-commit": [
+        "yarn lint",
+        "yarn test:client",
+        "yarn test:server"
+      ],
+      "pre-push": [
+        "yarn lint",
+        "yarn test:client",
+        "yarn test:server"
+      ],
+      "post-commit": [],
+      "post-checkout": [],
+      "post-merge": []
+    }
+  },
   "release": {
     "analyzeCommits": "simple-commit-message"
-  },
-  "snyk": true
+  }
 }
diff --git a/perms/constants.js b/perms/constants.js
deleted file mode 100644
index 7841e9711..000000000
--- a/perms/constants.js
+++ /dev/null
@@ -1,44 +0,0 @@
-module.exports = {
-
-  // mutations
-  CREATE_COMMENT: 'CREATE_COMMENT',
-  CREATE_ACTION: 'CREATE_ACTION',
-  DELETE_ACTION: 'DELETE_ACTION',
-  EDIT_NAME: 'EDIT_NAME',
-  EDIT_COMMENT: 'EDIT_COMMENT',
-  REJECT_USERNAME: 'REJECT_USERNAME',
-  SET_USER_STATUS: 'SET_USER_STATUS',
-  SUSPEND_USER: 'SUSPEND_USER',
-  SET_COMMENT_STATUS: 'SET_COMMENT_STATUS',
-  ADD_COMMENT_TAG: 'ADD_COMMENT_TAG',
-  REMOVE_COMMENT_TAG: 'REMOVE_COMMENT_TAG',
-  UPDATE_USER_ROLES: 'UPDATE_USER_ROLES',
-  UPDATE_CONFIG: 'UPDATE_CONFIG',
-  CREATE_TOKEN: 'CREATE_TOKEN',
-  REVOKE_TOKEN: 'REVOKE_TOKEN',
-  UPDATE_ASSET_SETTINGS: 'UPDATE_ASSET_SETTINGS',
-  UPDATE_ASSET_STATUS: 'UPDATE_ASSET_STATUS',
-  UPDATE_SETTINGS: 'UPDATE_SETTINGS',
-
-  // queries
-  SEARCH_ASSETS: 'SEARCH_ASSETS',
-  SEARCH_OTHER_USERS: 'SEARCH_OTHER_USERS',
-  SEARCH_ACTIONS: 'SEARCH_ACTIONS',
-  SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS: 'SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS',
-  SEARCH_OTHERS_COMMENTS: 'SEARCH_OTHERS_COMMENTS',
-  LIST_OWN_TOKENS: 'LIST_OWN_TOKENS',
-  SEARCH_COMMENT_STATUS_HISTORY: 'SEARCH_COMMENT_STATUS_HISTORY',
-  VIEW_SUSPENSION_INFO: 'VIEW_SUSPENSION_INFO',
-  VIEW_PROTECTED_SETTINGS: 'VIEW_PROTECTED_SETTINGS',
-
-  // subscriptions
-  SUBSCRIBE_COMMENT_ACCEPTED: 'SUBSCRIBE_COMMENT_ACCEPTED',
-  SUBSCRIBE_COMMENT_REJECTED: 'SUBSCRIBE_COMMENT_REJECTED',
-  SUBSCRIBE_COMMENT_FLAGGED: 'SUBSCRIBE_COMMENT_FLAGGED',
-  SUBSCRIBE_COMMENT_RESET: 'SUBSCRIBE_COMMENT_RESET',
-  SUBSCRIBE_ALL_COMMENT_ADDED: 'SUBSCRIBE_ALL_COMMENT_ADDED',
-  SUBSCRIBE_ALL_COMMENT_EDITED: 'SUBSCRIBE_ALL_COMMENT_EDITED',
-  SUBSCRIBE_ALL_USER_SUSPENDED: 'SUBSCRIBE_ALL_USER_SUSPENDED',
-  SUBSCRIBE_ALL_USER_BANNED: 'SUBSCRIBE_ALL_USER_BANNED',
-  SUBSCRIBE_ALL_USERNAME_REJECTED: 'SUBSCRIBE_ALL_USERNAME_REJECTED',
-};
diff --git a/perms/constants/index.js b/perms/constants/index.js
new file mode 100644
index 000000000..1ed7ad947
--- /dev/null
+++ b/perms/constants/index.js
@@ -0,0 +1,7 @@
+const merge = require('lodash/merge');
+
+const mutation = require('./mutation');
+const query = require('./query');
+const subscription = require('./subscription');
+
+module.exports = merge(...[mutation, query, subscription]);
diff --git a/perms/constants/mutation.js b/perms/constants/mutation.js
new file mode 100644
index 000000000..06e5b6f0f
--- /dev/null
+++ b/perms/constants/mutation.js
@@ -0,0 +1,21 @@
+module.exports = {
+  CREATE_COMMENT: 'CREATE_COMMENT',
+  CREATE_ACTION: 'CREATE_ACTION',
+  CHANGE_USERNAME: 'CHANGE_USERNAME',
+  SET_USERNAME: 'SET_USERNAME',
+  DELETE_ACTION: 'DELETE_ACTION',
+  EDIT_COMMENT: 'EDIT_COMMENT',
+  SET_USER_USERNAME_STATUS: 'SET_USER_USERNAME_STATUS',
+  SET_USER_BAN_STATUS: 'SET_USER_BAN_STATUS',
+  SET_USER_SUSPENSION_STATUS: 'SET_USER_SUSPENSION_STATUS',
+  SET_COMMENT_STATUS: 'SET_COMMENT_STATUS',
+  ADD_COMMENT_TAG: 'ADD_COMMENT_TAG',
+  REMOVE_COMMENT_TAG: 'REMOVE_COMMENT_TAG',
+  UPDATE_USER_ROLES: 'UPDATE_USER_ROLES',
+  UPDATE_CONFIG: 'UPDATE_CONFIG',
+  CREATE_TOKEN: 'CREATE_TOKEN',
+  REVOKE_TOKEN: 'REVOKE_TOKEN',
+  UPDATE_ASSET_SETTINGS: 'UPDATE_ASSET_SETTINGS',
+  UPDATE_ASSET_STATUS: 'UPDATE_ASSET_STATUS',
+  UPDATE_SETTINGS: 'UPDATE_SETTINGS',
+};
diff --git a/perms/constants/query.js b/perms/constants/query.js
new file mode 100644
index 000000000..4cc07109c
--- /dev/null
+++ b/perms/constants/query.js
@@ -0,0 +1,12 @@
+module.exports = {
+  SEARCH_ASSETS: 'SEARCH_ASSETS',
+  SEARCH_OTHER_USERS: 'SEARCH_OTHER_USERS',
+  SEARCH_ACTIONS: 'SEARCH_ACTIONS',
+  SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS: 'SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS',
+  SEARCH_OTHERS_COMMENTS: 'SEARCH_OTHERS_COMMENTS',
+  SEARCH_COMMENT_STATUS_HISTORY: 'SEARCH_COMMENT_STATUS_HISTORY',
+  VIEW_USER_STATUS: 'VIEW_USER_STATUS',
+  VIEW_PROTECTED_SETTINGS: 'VIEW_PROTECTED_SETTINGS',
+  LIST_OWN_TOKENS: 'LIST_OWN_TOKENS',
+  VIEW_USER_ROLE: 'VIEW_USER_ROLE',
+};
diff --git a/perms/constants/subscription.js b/perms/constants/subscription.js
new file mode 100644
index 000000000..22dbd2fa3
--- /dev/null
+++ b/perms/constants/subscription.js
@@ -0,0 +1,12 @@
+module.exports = {
+  SUBSCRIBE_COMMENT_ACCEPTED: 'SUBSCRIBE_COMMENT_ACCEPTED',
+  SUBSCRIBE_COMMENT_REJECTED: 'SUBSCRIBE_COMMENT_REJECTED',
+  SUBSCRIBE_COMMENT_FLAGGED: 'SUBSCRIBE_COMMENT_FLAGGED',
+  SUBSCRIBE_COMMENT_RESET: 'SUBSCRIBE_COMMENT_RESET',
+  SUBSCRIBE_ALL_COMMENT_ADDED: 'SUBSCRIBE_ALL_COMMENT_ADDED',
+  SUBSCRIBE_ALL_COMMENT_EDITED: 'SUBSCRIBE_ALL_COMMENT_EDITED',
+  SUBSCRIBE_ALL_USER_SUSPENDED: 'SUBSCRIBE_ALL_USER_SUSPENDED',
+  SUBSCRIBE_ALL_USER_BANNED: 'SUBSCRIBE_ALL_USER_BANNED',
+  SUBSCRIBE_ALL_USERNAME_REJECTED: 'SUBSCRIBE_ALL_USERNAME_REJECTED',
+  SUBSCRIBE_ALL_USERNAME_APPROVED: 'SUBSCRIBE_ALL_USERNAME_APPROVED',
+};
diff --git a/perms/index.js b/perms/index.js
index a6b459efe..ade0ae5e7 100644
--- a/perms/index.js
+++ b/perms/index.js
@@ -1,35 +1,29 @@
 const constants = require('./constants');
-const root = require('./rootReducer');
-const queries = require('./queryReducer');
-const mutations = require('./mutationReducer');
-const subscriptions = require('./subscriptionReducer');
-
-const reducers = [
-  root,
-  queries,
-  mutations,
-  subscriptions,
-];
-
-// this will make 'reducer' a key in this array. hm.
-const allPermissions = Object.keys(constants);
-
-const findGrant = (user, perms) => {
-
-  return perms.every((perm) => {
+const reducers = require('./reducers');
+const constantsArray = Object.keys(constants);
 
+/**
+ * findGrant will try to check all the permissions if the user is allowed to do
+ * so.
+ *
+ * @param {Object} user the user being checked whether they have the required
+ *                      permissions
+ * @param {Array<String>} perms the array of permissions that the user must have
+ *                              in order to succeed
+ */
+const findGrant = (user, perms) =>
+  perms.every(perm => {
     for (let key in reducers) {
       const reducer = reducers[key];
       const grant = reducer(user, perm);
 
-      if (grant !== null && typeof grant !== 'undefined') {
+      if (typeof grant !== 'undefined' && grant !== null) {
         return grant;
       }
     }
 
     return false;
   });
-};
 
 /**
  * returns true, false, or null depending on whether the user has those permissions
@@ -40,10 +34,8 @@ const findGrant = (user, perms) => {
  * @return {Boolean}
  */
 module.exports = (user, ...perms) => {
-
-  // Make sure all the passed permissions are not typos.
-  const missingPerms = perms.filter((perm) => !allPermissions.includes(perm));
-  if (missingPerms.length > 0) {
+  if (perms.some(perm => !constantsArray.includes(perm))) {
+    const missingPerms = perms.filter(perm => !constantsArray.includes(perm));
     throw new Error(`${missingPerms.join(' ')} are not valid permissions.`);
   }
 
diff --git a/perms/mutationReducer.js b/perms/mutationReducer.js
deleted file mode 100644
index c44035372..000000000
--- a/perms/mutationReducer.js
+++ /dev/null
@@ -1,31 +0,0 @@
-const {check} = require('./utils');
-const types = require('./constants');
-
-module.exports = (user, perm) => {
-  switch (perm) {
-  case types.CREATE_COMMENT:
-  case types.CREATE_ACTION:
-  case types.DELETE_ACTION:
-  case types.EDIT_NAME:
-  case types.EDIT_COMMENT:
-    return true;
-  case types.ADD_COMMENT_TAG:
-  case types.REMOVE_COMMENT_TAG:
-    return check(user, ['ADMIN', 'MODERATOR', 'STAFF']);
-  case types.UPDATE_USER_ROLES:
-  case types.REJECT_USERNAME:
-  case types.SET_USER_STATUS:
-  case types.SUSPEND_USER:
-  case types.SET_COMMENT_STATUS:
-  case types.UPDATE_CONFIG:
-  case types.UPDATE_SETTINGS:
-  case types.UPDATE_ASSET_SETTINGS:
-  case types.UPDATE_ASSET_STATUS:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.CREATE_TOKEN:
-  case types.REVOKE_TOKEN:
-    return check(user, ['ADMIN']);
-  default:
-    break;
-  }
-};
diff --git a/perms/queryReducer.js b/perms/queryReducer.js
deleted file mode 100644
index 2cc5b95eb..000000000
--- a/perms/queryReducer.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const {check} = require('./utils');
-const types = require('./constants');
-
-module.exports = (user, perm) => {
-  switch (perm) {
-  case types.SEARCH_ASSETS:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SEARCH_OTHER_USERS:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SEARCH_ACTIONS:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SEARCH_OTHERS_COMMENTS:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.LIST_OWN_TOKENS:
-    return check(user, ['ADMIN']);
-  case types.SEARCH_COMMENT_STATUS_HISTORY:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.VIEW_SUSPENSION_INFO:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.VIEW_PROTECTED_SETTINGS:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  default:
-    break;
-  }
-};
diff --git a/perms/reducers/index.js b/perms/reducers/index.js
new file mode 100644
index 000000000..7d253b822
--- /dev/null
+++ b/perms/reducers/index.js
@@ -0,0 +1,22 @@
+const mutation = require('./mutation');
+const query = require('./query');
+const subscription = require('./subscription');
+
+module.exports = [
+  (user /* , perm*/) => {
+    // If a user is banned or currently suspended, then they aren't allowed to
+    // do anything.
+    if (user.banned || user.suspended) {
+      return false;
+    }
+  },
+  user => {
+    // System users can do everything!
+    if (user.system === true) {
+      return true;
+    }
+  },
+  query,
+  mutation,
+  subscription,
+];
diff --git a/perms/reducers/mutation.js b/perms/reducers/mutation.js
new file mode 100644
index 000000000..3e73afbc9
--- /dev/null
+++ b/perms/reducers/mutation.js
@@ -0,0 +1,42 @@
+const { check } = require('../utils');
+const types = require('../constants');
+
+module.exports = (user, perm) => {
+  switch (perm) {
+    case types.CHANGE_USERNAME:
+      return user.status.username.status === 'REJECTED';
+
+    case types.SET_USERNAME:
+      return user.status.username.status === 'UNSET';
+
+    case types.CREATE_COMMENT:
+    case types.CREATE_ACTION:
+    case types.DELETE_ACTION:
+    case types.EDIT_COMMENT:
+      // Anyone can do these things if they aren't suspended, banned, or blocked
+      // as they're editing their username.
+      return !['UNSET', 'REJECTED'].includes(user.status.username.status);
+
+    case types.ADD_COMMENT_TAG:
+    case types.REMOVE_COMMENT_TAG:
+      return check(user, ['ADMIN', 'MODERATOR', 'STAFF']);
+
+    case types.SET_COMMENT_STATUS:
+    case types.SET_USER_USERNAME_STATUS:
+    case types.SET_USER_BAN_STATUS:
+    case types.SET_USER_SUSPENSION_STATUS:
+    case types.UPDATE_ASSET_SETTINGS:
+    case types.UPDATE_ASSET_STATUS:
+      return check(user, ['ADMIN', 'MODERATOR']);
+
+    case types.UPDATE_CONFIG:
+    case types.UPDATE_SETTINGS:
+    case types.UPDATE_USER_ROLES:
+    case types.CREATE_TOKEN:
+    case types.REVOKE_TOKEN:
+      return check(user, ['ADMIN']);
+
+    default:
+      break;
+  }
+};
diff --git a/perms/reducers/query.js b/perms/reducers/query.js
new file mode 100644
index 000000000..4fc5ba79e
--- /dev/null
+++ b/perms/reducers/query.js
@@ -0,0 +1,22 @@
+const { check } = require('../utils');
+const types = require('../constants');
+
+module.exports = (user, perm) => {
+  switch (perm) {
+    case types.SEARCH_ASSETS:
+    case types.SEARCH_OTHER_USERS:
+    case types.SEARCH_ACTIONS:
+    case types.SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS:
+    case types.SEARCH_OTHERS_COMMENTS:
+      return check(user, ['ADMIN', 'MODERATOR']);
+    case types.SEARCH_COMMENT_STATUS_HISTORY:
+    case types.VIEW_USER_STATUS:
+    case types.VIEW_PROTECTED_SETTINGS:
+    case types.VIEW_USER_ROLE:
+      return check(user, ['ADMIN', 'MODERATOR']);
+    case types.LIST_OWN_TOKENS:
+      return check(user, ['ADMIN']);
+    default:
+      break;
+  }
+};
diff --git a/perms/reducers/subscription.js b/perms/reducers/subscription.js
new file mode 100644
index 000000000..3ae7d1cf8
--- /dev/null
+++ b/perms/reducers/subscription.js
@@ -0,0 +1,20 @@
+const { check } = require('../utils');
+const types = require('../constants');
+
+module.exports = (user, perm) => {
+  switch (perm) {
+    case types.SUBSCRIBE_COMMENT_FLAGGED:
+    case types.SUBSCRIBE_COMMENT_ACCEPTED:
+    case types.SUBSCRIBE_COMMENT_REJECTED:
+    case types.SUBSCRIBE_COMMENT_RESET:
+    case types.SUBSCRIBE_ALL_COMMENT_EDITED:
+    case types.SUBSCRIBE_ALL_COMMENT_ADDED:
+    case types.SUBSCRIBE_ALL_USER_SUSPENDED:
+    case types.SUBSCRIBE_ALL_USER_BANNED:
+    case types.SUBSCRIBE_ALL_USERNAME_REJECTED:
+    case types.SUBSCRIBE_ALL_USERNAME_APPROVED:
+      return check(user, ['ADMIN', 'MODERATOR']);
+    default:
+      break;
+  }
+};
diff --git a/perms/rootReducer.js b/perms/rootReducer.js
deleted file mode 100644
index 7fb665654..000000000
--- a/perms/rootReducer.js
+++ /dev/null
@@ -1,10 +0,0 @@
-module.exports = (user /* , perm*/) => {
-
-  // this runs before everything
-  if (
-    user.status === 'BANNED' ||
-    (user.suspension.until && user.suspension.until > new Date())
-  ) {
-    return false;
-  }
-};
diff --git a/perms/subscriptionReducer.js b/perms/subscriptionReducer.js
deleted file mode 100644
index 9ce0bc016..000000000
--- a/perms/subscriptionReducer.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const {check} = require('./utils');
-const types = require('./constants');
-
-module.exports = (user, perm) => {
-  switch (perm) {
-  case types.SUBSCRIBE_COMMENT_FLAGGED:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SUBSCRIBE_COMMENT_ACCEPTED:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SUBSCRIBE_COMMENT_REJECTED:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SUBSCRIBE_COMMENT_RESET:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SUBSCRIBE_ALL_COMMENT_EDITED:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SUBSCRIBE_ALL_COMMENT_ADDED:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SUBSCRIBE_ALL_USER_SUSPENDED:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SUBSCRIBE_ALL_USER_BANNED:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  case types.SUBSCRIBE_ALL_USERNAME_REJECTED:
-    return check(user, ['ADMIN', 'MODERATOR']);
-  default:
-    break;
-  }
-};
diff --git a/perms/utils.js b/perms/utils.js
index e72a49c53..dd6edb82c 100644
--- a/perms/utils.js
+++ b/perms/utils.js
@@ -1,8 +1,11 @@
-const intersection = require('lodash/intersection');
-const check = (user, roles) => {
-  return intersection(roles, user.roles).length > 0;
-};
+/**
+ * check will ensure that the user has the desired roles.
+ *
+ * @param {Object} user user being checked for roles
+ * @param {Array<String>} roles roles to check that the user has
+ */
+const check = (user, roles) => roles.some(role => role === user.role);
 
 module.exports = {
-  check
+  check,
 };
diff --git a/plugin-api/alpha/client/actions/index.js b/plugin-api/alpha/client/actions/index.js
index f6b2427a8..20bd2b9e3 100644
--- a/plugin-api/alpha/client/actions/index.js
+++ b/plugin-api/alpha/client/actions/index.js
@@ -1,2 +1,5 @@
-export {addTag, removeTag} from 'talk-plugin-commentbox/actions';
-export {addCommentClassName, removeCommentClassName} from 'coral-embed-stream/src/actions/stream';
+export { addTag, removeTag } from 'talk-plugin-commentbox/actions';
+export {
+  addCommentClassName,
+  removeCommentClassName,
+} from 'coral-embed-stream/src/actions/stream';
diff --git a/plugin-api/alpha/client/selectors/index.js b/plugin-api/alpha/client/selectors/index.js
index ad76326cf..988155308 100644
--- a/plugin-api/alpha/client/selectors/index.js
+++ b/plugin-api/alpha/client/selectors/index.js
@@ -1,2 +1,3 @@
-export const commentBoxTagsSelector = (state) => state.commentBox.tags;
-export const commentClassNamesSelector = (state) => state.stream.commentClassNames;
+export const commentBoxTagsSelector = state => state.commentBox.tags;
+export const commentClassNamesSelector = state =>
+  state.stream.commentClassNames;
diff --git a/plugin-api/beta/client/actions/admin.js b/plugin-api/beta/client/actions/admin.js
index 2a32e57bf..bcadab775 100644
--- a/plugin-api/beta/client/actions/admin.js
+++ b/plugin-api/beta/client/actions/admin.js
@@ -1 +1 @@
-export {viewUserDetail} from 'coral-admin/src/actions/userDetail';
+export { viewUserDetail } from 'coral-admin/src/actions/userDetail';
diff --git a/plugin-api/beta/client/actions/notification.js b/plugin-api/beta/client/actions/notification.js
index 0fae2b983..b7e9ed981 100644
--- a/plugin-api/beta/client/actions/notification.js
+++ b/plugin-api/beta/client/actions/notification.js
@@ -1 +1 @@
-export {notify} from 'coral-framework/actions/notification';
+export { notify } from 'coral-framework/actions/notification';
diff --git a/plugin-api/beta/client/actions/stream.js b/plugin-api/beta/client/actions/stream.js
index 8171357ba..2751f4a17 100644
--- a/plugin-api/beta/client/actions/stream.js
+++ b/plugin-api/beta/client/actions/stream.js
@@ -1 +1 @@
-export {setSort} from 'coral-embed-stream/src/actions/stream';
+export { setSort } from 'coral-embed-stream/src/actions/stream';
diff --git a/plugin-api/beta/client/components/SortOption.js b/plugin-api/beta/client/components/SortOption.js
index 7c8b4d761..8ed0dd149 100644
--- a/plugin-api/beta/client/components/SortOption.js
+++ b/plugin-api/beta/client/components/SortOption.js
@@ -19,7 +19,6 @@ export default class SortOption extends React.Component {
 }
 
 SortOption.propTypes = {
-
   // A simple callback to be called when clicking on this sort option.
   setSort: PropTypes.func.isRequired,
 
diff --git a/plugin-api/beta/client/components/index.js b/plugin-api/beta/client/components/index.js
index 28a7f4bbb..974c4609f 100644
--- a/plugin-api/beta/client/components/index.js
+++ b/plugin-api/beta/client/components/index.js
@@ -1,10 +1,28 @@
-export {Slot} from 'coral-framework/components';
-export {default as ClickOutside} from 'coral-framework/components/ClickOutside';
-export {default as IfSlotIsEmpty} from 'coral-framework/components/IfSlotIsEmpty';
-export {default as IfSlotIsNotEmpty} from 'coral-framework/components/IfSlotIsNotEmpty';
-export {default as CommentAuthorName} from 'coral-framework/components/CommentAuthorName';
-export {default as CommentTimestamp} from 'coral-framework/components/CommentTimestamp';
-export {default as CommentDetail} from 'coral-framework/components/CommentDetail';
-export {default as CommentContent} from 'coral-framework/components/CommentContent';
-export {default as ConfigureCard} from 'coral-framework/components/ConfigureCard';
-export {default as StreamConfiguration} from 'coral-framework/components/StreamConfiguration';
+export { Slot } from 'coral-framework/components';
+export {
+  default as ClickOutside,
+} from 'coral-framework/components/ClickOutside';
+export {
+  default as IfSlotIsEmpty,
+} from 'coral-framework/components/IfSlotIsEmpty';
+export {
+  default as IfSlotIsNotEmpty,
+} from 'coral-framework/components/IfSlotIsNotEmpty';
+export {
+  default as CommentAuthorName,
+} from 'coral-framework/components/CommentAuthorName';
+export {
+  default as CommentTimestamp,
+} from 'coral-framework/components/CommentTimestamp';
+export {
+  default as CommentDetail,
+} from 'coral-framework/components/CommentDetail';
+export {
+  default as CommentContent,
+} from 'coral-framework/components/CommentContent';
+export {
+  default as ConfigureCard,
+} from 'coral-framework/components/ConfigureCard';
+export {
+  default as StreamConfiguration,
+} from 'coral-framework/components/StreamConfiguration';
diff --git a/plugin-api/beta/client/factories/index.js b/plugin-api/beta/client/factories/index.js
index d413258c6..364537cd5 100644
--- a/plugin-api/beta/client/factories/index.js
+++ b/plugin-api/beta/client/factories/index.js
@@ -9,4 +9,5 @@ import SortOption from '../components/SortOption';
  * @param  {string} sort.sortOrder
  * @return {Object} Component
  */
-export const createSortOption = (label, sort) => withSortOption({...sort, label})(SortOption);
+export const createSortOption = (label, sort) =>
+  withSortOption({ ...sort, label })(SortOption);
diff --git a/plugin-api/beta/client/hocs/index.js b/plugin-api/beta/client/hocs/index.js
index 1359143e1..0d7cac460 100644
--- a/plugin-api/beta/client/hocs/index.js
+++ b/plugin-api/beta/client/hocs/index.js
@@ -1,13 +1,14 @@
-export {default as withReaction} from './withReaction';
-export {default as withTags} from './withTags';
-export {default as withSortOption} from './withSortOption';
-export {default as withFragments} from 'coral-framework/hocs/withFragments';
-export {default as excludeIf} from 'coral-framework/hocs/excludeIf';
-export {default as connect} from 'coral-framework/hocs/connect';
-export {default as withEmit} from 'coral-framework/hocs/withEmit';
+export { default as withReaction } from './withReaction';
+export { default as withTags } from './withTags';
+export { default as withSortOption } from './withSortOption';
+export { default as withFragments } from 'coral-framework/hocs/withFragments';
+export { default as excludeIf } from 'coral-framework/hocs/excludeIf';
+export { default as connect } from 'coral-framework/hocs/connect';
+export { default as withEmit } from 'coral-framework/hocs/withEmit';
 export {
   withIgnoreUser,
-  withSetUserStatus,
+  withBanUser,
+  withUnbanUser,
   withStopIgnoringUser,
   withSetCommentStatus,
 } from 'coral-framework/graphql/mutations';
diff --git a/plugin-api/beta/client/hocs/withReaction.js b/plugin-api/beta/client/hocs/withReaction.js
index 36d48316f..f5a0167b7 100644
--- a/plugin-api/beta/client/hocs/withReaction.js
+++ b/plugin-api/beta/client/hocs/withReaction.js
@@ -1,22 +1,26 @@
 import React from 'react';
 import get from 'lodash/get';
 import uuid from 'uuid/v4';
-import {connect} from 'plugin-api/beta/client/hocs';
-import {bindActionCreators} from 'redux';
-import {getDisplayName} from 'coral-framework/helpers/hoc';
-import {compose, gql} from 'react-apollo';
+import { connect } from 'plugin-api/beta/client/hocs';
+import { bindActionCreators } from 'redux';
+import { getDisplayName } from 'coral-framework/helpers/hoc';
+import { compose, gql } from 'react-apollo';
 import withFragments from 'coral-framework/hocs/withFragments';
 import withMutation from 'coral-framework/hocs/withMutation';
-import {notify} from 'coral-framework/actions/notification';
-import {capitalize} from 'coral-framework/helpers/strings';
-import {getMyActionSummary, getTotalActionCount, getErrorMessages} from 'coral-framework/utils';
+import { notify } from 'coral-framework/actions/notification';
+import { capitalize } from 'coral-framework/helpers/strings';
+import {
+  getMyActionSummary,
+  getTotalActionCount,
+  getErrorMessages,
+} from 'coral-framework/utils';
 import hoistStatics from 'recompose/hoistStatics';
 import * as PropTypes from 'prop-types';
-import {getDefinitionName} from '../utils';
-import {t, can} from 'plugin-api/beta/client/services';
+import { getDefinitionName } from '../utils';
+import { t, can } from 'plugin-api/beta/client/services';
 
 // TODO: Auth logic needs refactoring.
-import {showSignInDialog} from 'coral-embed-stream/src/actions/auth';
+import { showSignInDialog } from 'coral-embed-stream/src/actions/auth';
 
 /*
  * Disable false-positive warning below, as it doesn't work well with how we currently
@@ -28,26 +32,27 @@ import {showSignInDialog} from 'coral-embed-stream/src/actions/auth';
  */
 gql.disableFragmentWarnings();
 
-export default (reaction, options = {}) => hoistStatics((WrappedComponent) => {
-  if (typeof reaction !== 'string') {
-    console.error('Reaction must be a valid string');
-    return null;
-  }
+export default (reaction, options = {}) =>
+  hoistStatics(WrappedComponent => {
+    if (typeof reaction !== 'string') {
+      console.error('Reaction must be a valid string');
+      return null;
+    }
 
-  // fragments allow the extension of the fragments defined in this HOC.
-  const {fragments = {}} = options;
+    // fragments allow the extension of the fragments defined in this HOC.
+    const { fragments = {} } = options;
 
-  // Global instance counter for each `reaction` type.
-  let instances = 0;
+    // Global instance counter for each `reaction` type.
+    let instances = 0;
 
-  // Track current subscriptions.
-  let createdSubscription = null;
-  let deletedSubscription = null;
+    // Track current subscriptions.
+    let createdSubscription = null;
+    let deletedSubscription = null;
 
-  reaction = reaction.toLowerCase();
-  const Reaction = capitalize(reaction);
+    reaction = reaction.toLowerCase();
+    const Reaction = capitalize(reaction);
 
-  const COMMENT_FRAGMENT = gql`
+    const COMMENT_FRAGMENT = gql`
     fragment ${Reaction}Button_updateFragment on Comment {
         action_summaries {
         ... on ${Reaction}ActionSummary {
@@ -60,99 +65,98 @@ export default (reaction, options = {}) => hoistStatics((WrappedComponent) => {
     }
   `;
 
-  const isReaction = (a) =>
-    a.__typename === `${Reaction}ActionSummary`;
+    const isReaction = a => a.__typename === `${Reaction}ActionSummary`;
 
-  const addReactionToStore = (proxy, {action, self}) => {
-    const fragmentId = `Comment_${action.item_id}`;
+    const addReactionToStore = (proxy, { action, self }) => {
+      const fragmentId = `Comment_${action.item_id}`;
 
-    // Read the data from our cache for this query.
-    const data = proxy.readFragment({
-      fragment: COMMENT_FRAGMENT,
-      id: fragmentId
-    });
-
-    if (!data) {
-      if (self) {
-        throw new Error(`Comment ${action.item_id} was not found`);
-      }
-      return;
-    }
-
-    // Add our comment from the mutation to the end.
-    let idx = data.action_summaries.findIndex(isReaction);
-
-    // Check whether we already reactioned this comment.
-    if (self && idx >= 0 && data.action_summaries[idx].current_user) {
-      return;
-    }
-
-    if (idx < 0) {
-
-      // Add initial action when it doesn't exist.
-      data.action_summaries.push({
-        __typename: `${Reaction}ActionSummary`,
-        count: 0,
-        current_user: null
+      // Read the data from our cache for this query.
+      const data = proxy.readFragment({
+        fragment: COMMENT_FRAGMENT,
+        id: fragmentId,
       });
-      idx = data.action_summaries.length - 1;
-    }
 
-    data.action_summaries[idx] = {
-      ...data.action_summaries[idx],
-      count: data.action_summaries[idx].count + 1,
-      current_user: self ? action : data.action_summaries[idx].current_user
-    };
-
-    // Write our data back to the cache.
-    proxy.writeFragment({
-      fragment: COMMENT_FRAGMENT,
-      id: fragmentId,
-      data
-    });
-  };
-
-  const deleteReactionFromStore = (proxy, {action, self}) => {
-    const fragmentId = `Comment_${action.item_id}`;
-
-    // Read the data from our cache for this query.
-    const data = proxy.readFragment({
-      fragment: COMMENT_FRAGMENT,
-      id: fragmentId
-    });
-
-    if (!data) {
-      if (self) {
-        throw new Error(`Comment ${action.item_id} was not found`);
+      if (!data) {
+        if (self) {
+          throw new Error(`Comment ${action.item_id} was not found`);
+        }
+        return;
       }
-      return;
-    }
 
-    // Check whether we liked this comment.
-    const idx = data.action_summaries.findIndex(isReaction);
+      // Add our comment from the mutation to the end.
+      let idx = data.action_summaries.findIndex(isReaction);
 
-    if (
-      self &&
-      (idx < 0 || get(data.action_summaries[idx], 'current_user.id') !== action.id)
-    ) {
-      return;
-    }
+      // Check whether we already reactioned this comment.
+      if (self && idx >= 0 && data.action_summaries[idx].current_user) {
+        return;
+      }
 
-    data.action_summaries[idx] = {
-      ...data.action_summaries[idx],
-      count: data.action_summaries[idx].count - 1,
-      current_user: self ? null : data.action_summaries[idx].current_user,
+      if (idx < 0) {
+        // Add initial action when it doesn't exist.
+        data.action_summaries.push({
+          __typename: `${Reaction}ActionSummary`,
+          count: 0,
+          current_user: null,
+        });
+        idx = data.action_summaries.length - 1;
+      }
+
+      data.action_summaries[idx] = {
+        ...data.action_summaries[idx],
+        count: data.action_summaries[idx].count + 1,
+        current_user: self ? action : data.action_summaries[idx].current_user,
+      };
+
+      // Write our data back to the cache.
+      proxy.writeFragment({
+        fragment: COMMENT_FRAGMENT,
+        id: fragmentId,
+        data,
+      });
     };
 
-    // Write our data back to the cache.
-    proxy.writeFragment({
-      fragment: COMMENT_FRAGMENT,
-      id: fragmentId,
-      data
-    });
-  };
+    const deleteReactionFromStore = (proxy, { action, self }) => {
+      const fragmentId = `Comment_${action.item_id}`;
 
-  const REACTION_CREATED_SUBSCRIPTION = gql`
+      // Read the data from our cache for this query.
+      const data = proxy.readFragment({
+        fragment: COMMENT_FRAGMENT,
+        id: fragmentId,
+      });
+
+      if (!data) {
+        if (self) {
+          throw new Error(`Comment ${action.item_id} was not found`);
+        }
+        return;
+      }
+
+      // Check whether we liked this comment.
+      const idx = data.action_summaries.findIndex(isReaction);
+
+      if (
+        self &&
+        (idx < 0 ||
+          get(data.action_summaries[idx], 'current_user.id') !== action.id)
+      ) {
+        return;
+      }
+
+      data.action_summaries[idx] = {
+        ...data.action_summaries[idx],
+        count: data.action_summaries[idx].count - 1,
+        current_user: self ? null : data.action_summaries[idx].current_user,
+      };
+
+      // Write our data back to the cache.
+      proxy.writeFragment({
+        fragment: COMMENT_FRAGMENT,
+        id: fragmentId,
+        data,
+      });
+    };
+
+    const REACTION_CREATED_SUBSCRIPTION = gql`
     subscription ${Reaction}ActionCreated($assetId: ID!) {
       ${reaction}ActionCreated(asset_id: $assetId) {
         id
@@ -164,7 +168,7 @@ export default (reaction, options = {}) => hoistStatics((WrappedComponent) => {
     }
   `;
 
-  const REACTION_DELETED_SUBSCRIPTION = gql`
+    const REACTION_DELETED_SUBSCRIPTION = gql`
     subscription ${Reaction}ActionDeleted($assetId: ID!) {
       ${reaction}ActionDeleted(asset_id: $assetId) {
         id
@@ -176,156 +180,171 @@ export default (reaction, options = {}) => hoistStatics((WrappedComponent) => {
     }
   `;
 
-  class WithReactions extends React.Component {
+    class WithReactions extends React.Component {
+      static contextTypes = {
+        client: PropTypes.object.isRequired,
+      };
 
-    static contextTypes = {
-      client: PropTypes.object.isRequired,
-    };
+      // Whether or not a mutation is currently active.
+      duringMutation = false;
 
-    // Whether or not a mutation is currently active.
-    duringMutation = false;
+      constructor(props, context) {
+        super(props, context);
 
-    constructor(props, context) {
-      super(props, context);
+        // Start subscriptions when it is first needed.
+        if (instances === 0) {
+          createdSubscription = context.client
+            .subscribe({
+              query: REACTION_CREATED_SUBSCRIPTION,
+              variables: {
+                assetId: this.props.asset.id,
+              },
+            })
+            .subscribe({
+              next: this.onReactionCreated,
+              error(err) {
+                console.error('err', err);
+              },
+            });
 
-      // Start subscriptions when it is first needed.
-      if (instances === 0) {
-        createdSubscription = context.client.subscribe({
-          query: REACTION_CREATED_SUBSCRIPTION,
-          variables: {
-            assetId: this.props.asset.id,
-          },
-        }).subscribe({
-          next: this.onReactionCreated,
-          error(err) { console.error('err', err); },
-        });
-
-        deletedSubscription = context.client.subscribe({
-          query: REACTION_DELETED_SUBSCRIPTION,
-          variables: {
-            assetId: this.props.asset.id,
-          },
-        }).subscribe({
-          next: this.onReactionDeleted,
-          error(err) { console.error('err', err); },
-        });
-      }
-      instances++;
-    }
-
-    // onReactionCreated handles live updates through the subscriptions.
-    onReactionCreated = ({[`${reaction}ActionCreated`]: action}) => {
-      if (this.props.user && action.user && this.props.user.id === action.user.id) {
-        return;
-      }
-      addReactionToStore(this.context.client, {action, self: false});
-    };
-
-    // onReactionDeleted handles live updates through the subscriptions.
-    onReactionDeleted = ({[`${reaction}ActionDeleted`]: action}) => {
-      if (this.props.user && action.user && this.props.user.id === action.user.id) {
-        return;
-      }
-      deleteReactionFromStore(this.context.client, {action, self: false});
-    };
-
-    componentWillUnmount() {
-      instances--;
-
-      // End subscriptions when last component will be unmounted.
-      if (instances === 0) {
-        try {
-          createdSubscription.unsubscribe();
-          deletedSubscription.unsubscribe();
+          deletedSubscription = context.client
+            .subscribe({
+              query: REACTION_DELETED_SUBSCRIPTION,
+              variables: {
+                assetId: this.props.asset.id,
+              },
+            })
+            .subscribe({
+              next: this.onReactionDeleted,
+              error(err) {
+                console.error('err', err);
+              },
+            });
         }
-        catch(e) {
-          console.warn(e);
+        instances++;
+      }
+
+      // onReactionCreated handles live updates through the subscriptions.
+      onReactionCreated = ({ [`${reaction}ActionCreated`]: action }) => {
+        if (
+          this.props.user &&
+          action.user &&
+          this.props.user.id === action.user.id
+        ) {
+          return;
+        }
+        addReactionToStore(this.context.client, { action, self: false });
+      };
+
+      // onReactionDeleted handles live updates through the subscriptions.
+      onReactionDeleted = ({ [`${reaction}ActionDeleted`]: action }) => {
+        if (
+          this.props.user &&
+          action.user &&
+          this.props.user.id === action.user.id
+        ) {
+          return;
+        }
+        deleteReactionFromStore(this.context.client, { action, self: false });
+      };
+
+      componentWillUnmount() {
+        instances--;
+
+        // End subscriptions when last component will be unmounted.
+        if (instances === 0) {
+          try {
+            createdSubscription.unsubscribe();
+            deletedSubscription.unsubscribe();
+          } catch (e) {
+            console.warn(e);
+          }
         }
       }
+
+      postReaction = () => {
+        if (this.duringMutation) {
+          return;
+        }
+        this.duringMutation = true;
+
+        // If the current user is suspended, do nothing.
+        if (!can(this.props.user, 'INTERACT_WITH_COMMUNITY')) {
+          notify('error', t('error.NOT_AUTHORIZED'));
+          return;
+        }
+
+        return this.props
+          .postReaction(this.props.comment)
+          .then(result => {
+            this.duringMutation = false;
+            return result;
+          })
+          .catch(err => {
+            this.duringMutation = false;
+            this.props.notify('error', getErrorMessages(err));
+            throw err;
+          });
+      };
+
+      deleteReaction = () => {
+        if (this.duringMutation) {
+          return;
+        }
+        this.duringMutation = true;
+
+        // If the current user is suspended, do nothing.
+        if (!can(this.props.user, 'INTERACT_WITH_COMMUNITY')) {
+          notify('error', t('error.NOT_AUTHORIZED'));
+          return;
+        }
+
+        return this.props
+          .deleteReaction(this.props.comment)
+          .then(result => {
+            this.duringMutation = false;
+            return result;
+          })
+          .catch(err => {
+            this.duringMutation = false;
+            this.props.notify('error', getErrorMessages(err));
+            throw err;
+          });
+      };
+
+      render() {
+        const { root, asset, comment } = this.props;
+
+        const reactionSummary = getMyActionSummary(
+          `${Reaction}ActionSummary`,
+          comment
+        );
+
+        const count = getTotalActionCount(`${Reaction}ActionSummary`, comment);
+
+        const alreadyReacted = !!reactionSummary;
+
+        return (
+          <WrappedComponent
+            root={root}
+            asset={asset}
+            comment={comment}
+            showSignInDialog={this.props.showSignInDialog}
+            notify={this.props.notify}
+            user={this.props.user}
+            reactionSummary={reactionSummary}
+            count={count}
+            alreadyReacted={alreadyReacted}
+            postReaction={this.postReaction}
+            deleteReaction={this.deleteReaction}
+            config={this.props.config}
+          />
+        );
+      }
     }
 
-    postReaction = () => {
-      if (this.duringMutation) {
-        return;
-      }
-      this.duringMutation = true;
-
-      // If the current user is suspended, do nothing.
-      if (!can(this.props.user, 'INTERACT_WITH_COMMUNITY')) {
-        notify('error', t('error.NOT_AUTHORIZED'));
-        return;
-      }
-
-      return this.props.postReaction(this.props.comment)
-        .then((result) => {
-          this.duringMutation = false;
-          return result;
-        })
-        .catch((err) => {
-          this.duringMutation = false;
-          this.props.notify('error', getErrorMessages(err));
-          throw err;
-        });
-    }
-
-    deleteReaction = () => {
-      if (this.duringMutation) {
-        return;
-      }
-      this.duringMutation = true;
-
-      // If the current user is suspended, do nothing.
-      if (!can(this.props.user, 'INTERACT_WITH_COMMUNITY')) {
-        notify('error', t('error.NOT_AUTHORIZED'));
-        return;
-      }
-
-      return this.props.deleteReaction(this.props.comment)
-        .then((result) => {
-          this.duringMutation = false;
-          return result;
-        })
-        .catch((err) => {
-          this.duringMutation = false;
-          this.props.notify('error', getErrorMessages(err));
-          throw err;
-        });
-    }
-
-    render() {
-      const {root, asset, comment} = this.props;
-
-      const reactionSummary = getMyActionSummary(
-        `${Reaction}ActionSummary`,
-        comment
-      );
-
-      const count = getTotalActionCount(
-        `${Reaction}ActionSummary`,
-        comment
-      );
-
-      const alreadyReacted = !!reactionSummary;
-
-      return <WrappedComponent
-        root={root}
-        asset={asset}
-        comment={comment}
-        showSignInDialog={this.props.showSignInDialog}
-        notify={this.props.notify}
-        user={this.props.user}
-        reactionSummary={reactionSummary}
-        count={count}
-        alreadyReacted={alreadyReacted}
-        postReaction={this.postReaction}
-        deleteReaction={this.deleteReaction}
-        config={this.props.config}
-      />;
-    }
-  }
-
-  const withDeleteReaction = withMutation(
-    gql`
+    const withDeleteReaction = withMutation(
+      gql`
       mutation Delete${Reaction}Action($input: Delete${Reaction}ActionInput!) {
         delete${Reaction}Action(input: $input) {
           errors {
@@ -334,38 +353,40 @@ export default (reaction, options = {}) => hoistStatics((WrappedComponent) => {
         }
       }
     `,
-    {
-      props: ({mutate}) => ({
-        deleteReaction: (comment) => {
+      {
+        props: ({ mutate }) => ({
+          deleteReaction: comment => {
+            const reactionSummary = getMyActionSummary(
+              `${Reaction}ActionSummary`,
+              comment
+            );
 
-          const reactionSummary = getMyActionSummary(
-            `${Reaction}ActionSummary`,
-            comment
-          );
+            const id = reactionSummary.current_user.id;
+            const item_id = comment.id;
 
-          const id = reactionSummary.current_user.id;
-          const item_id = comment.id;
+            const input = { id };
+            return mutate({
+              variables: { input },
+              optimisticResponse: {
+                [`delete${Reaction}Action`]: {
+                  __typename: `Delete${Reaction}ActionResponse`,
+                  errors: null,
+                },
+              },
+              update: proxy => {
+                deleteReactionFromStore(proxy, {
+                  action: { item_id, id },
+                  self: true,
+                });
+              },
+            });
+          },
+        }),
+      }
+    );
 
-          const input = {id};
-          return mutate({
-            variables: {input},
-            optimisticResponse: {
-              [`delete${Reaction}Action`]: {
-                __typename: `Delete${Reaction}ActionResponse`,
-                errors: null
-              }
-            },
-            update: (proxy) => {
-              deleteReactionFromStore(proxy, {action: {item_id, id}, self: true});
-            }
-          });
-        }
-      })
-    }
-  );
-
-  const withPostReaction = withMutation(
-    gql`
+    const withPostReaction = withMutation(
+      gql`
         mutation Create${Reaction}Action($input: Create${Reaction}ActionInput!) {
           create${Reaction}Action(input: $input) {
             ${reaction} {
@@ -377,57 +398,61 @@ export default (reaction, options = {}) => hoistStatics((WrappedComponent) => {
           }
         }
     `,
-    {
-      props: ({mutate}) => ({
-        postReaction: (comment) => {
+      {
+        props: ({ mutate }) => ({
+          postReaction: comment => {
+            const input = {
+              item_id: comment.id,
+            };
 
-          const input = {
-            item_id: comment.id,
-          };
-
-          return mutate({
-            variables: {input},
-            optimisticResponse: {
-              [`create${Reaction}Action`]: {
-                __typename: `Create${Reaction}ActionResponse`,
-                errors: null,
-                [reaction]: {
-                  __typename: `${Reaction}Action`,
-                  id: uuid()
+            return mutate({
+              variables: { input },
+              optimisticResponse: {
+                [`create${Reaction}Action`]: {
+                  __typename: `Create${Reaction}ActionResponse`,
+                  errors: null,
+                  [reaction]: {
+                    __typename: `${Reaction}Action`,
+                    id: uuid(),
+                  },
+                },
+              },
+              update: (
+                proxy,
+                {
+                  data: { [`create${Reaction}Action`]: { [reaction]: action } },
                 }
-              }
-            },
-            update: (proxy, {data: {[`create${Reaction}Action`]: {[reaction]: action}}}) => {
-              const a = {
-                ...action,
-                item_id: input.item_id,
-              };
-              addReactionToStore(proxy, {action: a, self: true});
-            }
-          });
-        }
-      })
-    }
-  );
+              ) => {
+                const a = {
+                  ...action,
+                  item_id: input.item_id,
+                };
+                addReactionToStore(proxy, { action: a, self: true });
+              },
+            });
+          },
+        }),
+      }
+    );
 
-  const mapStateToProps = (state) => ({
-    user: state.auth.user,
-  });
+    const mapStateToProps = state => ({
+      user: state.auth.user,
+    });
 
-  const mapDispatchToProps = (dispatch) =>
-    bindActionCreators({showSignInDialog, notify}, dispatch);
+    const mapDispatchToProps = dispatch =>
+      bindActionCreators({ showSignInDialog, notify }, dispatch);
 
-  const enhance = compose(
-    withFragments({
-      ...fragments,
-      asset: gql`
+    const enhance = compose(
+      withFragments({
+        ...fragments,
+        asset: gql`
         fragment ${Reaction}Button_asset on Asset {
           id
           ${fragments.asset ? `...${getDefinitionName(fragments.asset)}` : ''}
         }
         ${fragments.asset ? fragments.asset : ''}
       `,
-      comment: gql`
+        comment: gql`
         fragment ${Reaction}Button_comment on Comment {
           id
           action_summaries {
@@ -439,17 +464,23 @@ export default (reaction, options = {}) => hoistStatics((WrappedComponent) => {
               }
             }
           }
-          ${fragments.comment ? `...${getDefinitionName(fragments.comment)}` : ''}
+          ${
+            fragments.comment
+              ? `...${getDefinitionName(fragments.comment)}`
+              : ''
+          }
         }
         ${fragments.comment ? fragments.comment : ''}
-      `
-    }),
-    connect(mapStateToProps, mapDispatchToProps),
-    withDeleteReaction,
-    withPostReaction
-  );
+      `,
+      }),
+      connect(mapStateToProps, mapDispatchToProps),
+      withDeleteReaction,
+      withPostReaction
+    );
 
-  WithReactions.displayName = `WithReactions(${getDisplayName(WrappedComponent)})`;
+    WithReactions.displayName = `WithReactions(${getDisplayName(
+      WrappedComponent
+    )})`;
 
-  return enhance(WithReactions);
-});
+    return enhance(WithReactions);
+  });
diff --git a/plugin-api/beta/client/hocs/withSortOption.js b/plugin-api/beta/client/hocs/withSortOption.js
index 1bdccbfc1..b9d556c32 100644
--- a/plugin-api/beta/client/hocs/withSortOption.js
+++ b/plugin-api/beta/client/hocs/withSortOption.js
@@ -1,17 +1,20 @@
 import React from 'react';
-import {connect} from 'plugin-api/beta/client/hocs';
-import {bindActionCreators} from 'redux';
-import {sortOrderSelector, sortBySelector} from 'plugin-api/beta/client/selectors/stream';
-import {setSort} from 'plugin-api/beta/client/actions/stream';
+import { connect } from 'plugin-api/beta/client/hocs';
+import { bindActionCreators } from 'redux';
+import {
+  sortOrderSelector,
+  sortBySelector,
+} from 'plugin-api/beta/client/selectors/stream';
+import { setSort } from 'plugin-api/beta/client/actions/stream';
 import hoistStatics from 'recompose/hoistStatics';
-import {closeMenu} from 'plugins/talk-plugin-viewing-options/client/actions';
+import { closeMenu } from 'plugins/talk-plugin-viewing-options/client/actions';
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   sortOrder: sortOrderSelector(state),
   sortBy: sortBySelector(state),
 });
 
-const mapDispatchToProps = (dispatch) =>
+const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       setSort,
@@ -28,24 +31,26 @@ const mapDispatchToProps = (dispatch) =>
  * @param  {string} sort.sortOrder
  * @return {Object} HOC
  */
-export default ({sortBy = 'created_at', sortOrder = 'DESC', label}) => hoistStatics((WrappedComponent) => {
-  class WithSortOption extends React.Component {
-    setSort = () => {
-      this.props.closeMenu();
-      this.props.setSort({sortBy, sortOrder});
-    }
+export default ({ sortBy = 'created_at', sortOrder = 'DESC', label }) =>
+  hoistStatics(WrappedComponent => {
+    class WithSortOption extends React.Component {
+      setSort = () => {
+        this.props.closeMenu();
+        this.props.setSort({ sortBy, sortOrder });
+      };
 
-    render() {
-      const active = this.props.sortOrder === sortOrder && this.props.sortBy === sortBy;
-      const resolvedLabel = typeof label === 'function' ? label() : label;
-      return (
-        <WrappedComponent
-          active={active}
-          setSort={this.setSort}
-          label={resolvedLabel}
-        />
-      );
+      render() {
+        const active =
+          this.props.sortOrder === sortOrder && this.props.sortBy === sortBy;
+        const resolvedLabel = typeof label === 'function' ? label() : label;
+        return (
+          <WrappedComponent
+            active={active}
+            setSort={this.setSort}
+            label={resolvedLabel}
+          />
+        );
+      }
     }
-  }
-  return connect(mapStateToProps, mapDispatchToProps)(WithSortOption);
-});
+    return connect(mapStateToProps, mapDispatchToProps)(WithSortOption);
+  });
diff --git a/plugin-api/beta/client/hocs/withTags.js b/plugin-api/beta/client/hocs/withTags.js
index 3edc66824..7b95a5e6c 100644
--- a/plugin-api/beta/client/hocs/withTags.js
+++ b/plugin-api/beta/client/hocs/withTags.js
@@ -1,15 +1,15 @@
 import React from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {compose, gql} from 'react-apollo';
-import {getDisplayName} from 'coral-framework/helpers/hoc';
-import {capitalize} from 'coral-framework/helpers/strings';
-import {withAddTag, withRemoveTag} from 'coral-framework/graphql/mutations';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
+import { getDisplayName } from 'coral-framework/helpers/hoc';
+import { capitalize } from 'coral-framework/helpers/strings';
+import { withAddTag, withRemoveTag } from 'coral-framework/graphql/mutations';
 import withFragments from 'coral-framework/hocs/withFragments';
-import {notify} from 'coral-framework/actions/notification';
-import {getErrorMessages, isTagged} from 'coral-framework/utils';
+import { notify } from 'coral-framework/actions/notification';
+import { getErrorMessages, isTagged } from 'coral-framework/utils';
 import hoistStatics from 'recompose/hoistStatics';
-import {getDefinitionName} from '../utils';
+import { getDefinitionName } from '../utils';
 
 /*
  * Disable false-positive warning below, as it doesn't work well with how we currently
@@ -21,108 +21,113 @@ import {getDefinitionName} from '../utils';
  */
 gql.disableFragmentWarnings();
 
-export default (tag, options = {}) => hoistStatics((WrappedComponent) => {
-  if (typeof tag !== 'string') {
-    console.error('Tag must be a valid string');
-    return null;
-  }
+export default (tag, options = {}) =>
+  hoistStatics(WrappedComponent => {
+    if (typeof tag !== 'string') {
+      console.error('Tag must be a valid string');
+      return null;
+    }
 
-  // fragments allow the extension of the fragments defined in this HOC.
-  const {fragments = {}} = options;
+    // fragments allow the extension of the fragments defined in this HOC.
+    const { fragments = {} } = options;
 
-  const Tag = capitalize(tag);
-  const TAG = tag.toUpperCase();
+    const Tag = capitalize(tag);
+    const TAG = tag.toUpperCase();
 
-  class WithTags extends React.Component {
-    loading = false;
+    class WithTags extends React.Component {
+      loading = false;
 
-    postTag = () => {
-      const {comment, asset, notify} = this.props;
+      postTag = () => {
+        const { comment, asset, notify } = this.props;
 
-      if (this.loading) {
-        return;
+        if (this.loading) {
+          return;
+        }
+
+        this.loading = true;
+
+        return this.props
+          .addTag({
+            id: comment.id,
+            name: TAG,
+            assetId: asset.id,
+            itemType: 'COMMENTS',
+          })
+          .then(result => {
+            this.loading = false;
+            return result;
+          })
+          .catch(err => {
+            this.loading = false;
+            notify('error', getErrorMessages(err));
+            throw err;
+          });
+      };
+
+      deleteTag = () => {
+        const { comment, asset, notify } = this.props;
+
+        if (this.loading) {
+          return;
+        }
+
+        this.props
+          .removeTag({
+            id: comment.id,
+            name: TAG,
+            assetId: asset.id,
+            itemType: 'COMMENTS',
+          })
+          .then(result => {
+            this.loading = false;
+            return result;
+          })
+          .catch(err => {
+            this.loading = false;
+            notify('error', getErrorMessages(err));
+            throw err;
+          });
+      };
+
+      render() {
+        const { root, asset, comment, user, config, ...rest } = this.props;
+
+        const alreadyTagged = isTagged(comment.tags, TAG);
+
+        return (
+          <WrappedComponent
+            {...rest}
+            root={root}
+            asset={asset}
+            comment={comment}
+            user={user}
+            alreadyTagged={alreadyTagged}
+            postTag={this.postTag}
+            deleteTag={this.deleteTag}
+            config={config}
+          />
+        );
       }
-
-      this.loading = true;
-
-      return this.props.addTag({
-        id: comment.id,
-        name: TAG,
-        assetId: asset.id,
-        itemType: 'COMMENTS',
-      })
-        .then((result) => {
-          this.loading = false;
-          return result;
-        })
-        .catch((err) => {
-          this.loading = false;
-          notify('error', getErrorMessages(err));
-          throw err;
-        });
     }
 
-    deleteTag = () => {
-      const {comment, asset, notify} = this.props;
+    const mapStateToProps = state => ({
+      user: state.auth.user,
+    });
 
-      if (this.loading) {
-        return;
-      }
+    const mapDispatchToProps = dispatch =>
+      bindActionCreators({ notify }, dispatch);
 
-      this.props.removeTag({
-        id: comment.id,
-        name: TAG,
-        assetId: asset.id,
-        itemType: 'COMMENTS',
-      })
-        .then((result) => {
-          this.loading = false;
-          return result;
-        })
-        .catch((err) => {
-          this.loading = false;
-          notify('error', getErrorMessages(err));
-          throw err;
-        });
-    }
-
-    render() {
-      const {root, asset, comment, user, config, ...rest} = this.props;
-
-      const alreadyTagged = isTagged(comment.tags, TAG);
-
-      return <WrappedComponent
-        {...rest}
-        root={root}
-        asset={asset}
-        comment={comment}
-        user={user}
-        alreadyTagged={alreadyTagged}
-        postTag={this.postTag}
-        deleteTag={this.deleteTag}
-        config={config}
-      />;
-    }
-  }
-
-  const mapStateToProps = (state) => ({
-    user: state.auth.user,
-  });
-
-  const mapDispatchToProps = (dispatch) =>
-    bindActionCreators({notify}, dispatch);
-
-  const enhance = compose(
-    withFragments({
-      ...fragments,
-      asset: gql`
+    const enhance = compose(
+      withFragments({
+        ...fragments,
+        asset: gql`
         fragment ${Tag}Button_asset on Asset {
           id
           ${fragments.asset ? `...${getDefinitionName(fragments.asset)}` : ''}
         }
         ${fragments.asset ? fragments.asset : ''}
       `,
-      comment: gql`
+        comment: gql`
         fragment ${Tag}Button_comment on Comment {
           id
           tags {
@@ -130,17 +135,21 @@ export default (tag, options = {}) => hoistStatics((WrappedComponent) => {
               name
             }
           }
-          ${fragments.comment ? `...${getDefinitionName(fragments.comment)}` : ''}
+          ${
+            fragments.comment
+              ? `...${getDefinitionName(fragments.comment)}`
+              : ''
+          }
         }
         ${fragments.comment ? fragments.comment : ''}
-      `
-    }),
-    withAddTag,
-    withRemoveTag,
-    connect(mapStateToProps, mapDispatchToProps),
-  );
+      `,
+      }),
+      withAddTag,
+      withRemoveTag,
+      connect(mapStateToProps, mapDispatchToProps)
+    );
 
-  WithTags.displayName = `WithTags(${getDisplayName(WrappedComponent)})`;
+    WithTags.displayName = `WithTags(${getDisplayName(WrappedComponent)})`;
 
-  return enhance(WithTags);
-});
+    return enhance(WithTags);
+  });
diff --git a/plugin-api/beta/client/selectors/index.js b/plugin-api/beta/client/selectors/index.js
index 09e25d453..97e4623e4 100644
--- a/plugin-api/beta/client/selectors/index.js
+++ b/plugin-api/beta/client/selectors/index.js
@@ -1 +1 @@
-export const pluginConfigSelector = (state) => state.config.pluginConfig;
+export const pluginConfigSelector = state => state.config.pluginConfig;
diff --git a/plugin-api/beta/client/selectors/stream.js b/plugin-api/beta/client/selectors/stream.js
index 6d8934bd3..0f5dd2dc7 100644
--- a/plugin-api/beta/client/selectors/stream.js
+++ b/plugin-api/beta/client/selectors/stream.js
@@ -1,2 +1,2 @@
-export const sortOrderSelector = (state) => state.stream.sortOrder;
-export const sortBySelector = (state) => state.stream.sortBy;
+export const sortOrderSelector = state => state.stream.sortOrder;
+export const sortBySelector = state => state.stream.sortBy;
diff --git a/plugin-api/beta/client/services/index.js b/plugin-api/beta/client/services/index.js
index 4d2281dc8..b29f75ff8 100644
--- a/plugin-api/beta/client/services/index.js
+++ b/plugin-api/beta/client/services/index.js
@@ -1,3 +1,2 @@
-export {t, timeago} from 'coral-framework/services/i18n';
-export {can} from 'coral-framework/services/perms';
-
+export { t, timeago } from 'coral-framework/services/i18n';
+export { can } from 'coral-framework/services/perms';
diff --git a/plugin-api/beta/server/getReactionConfig.js b/plugin-api/beta/server/getReactionConfig.js
index f4302050c..3baf65806 100644
--- a/plugin-api/beta/server/getReactionConfig.js
+++ b/plugin-api/beta/server/getReactionConfig.js
@@ -1,22 +1,24 @@
-const {SEARCH_OTHER_USERS} = require('../../../perms/constants');
+const { SEARCH_OTHER_USERS } = require('../../../perms/constants');
 const errors = require('../../../errors');
 const pluralize = require('pluralize');
-const CommentModel = require('../../../models/comment');
 const sc = require('snake-case');
-const {CREATE_MONGO_INDEXES} = require('../../../config');
+const CommentModel = require('../../../models/comment');
+const { CREATE_MONGO_INDEXES } = require('../../../config');
 
 function getReactionConfig(reaction) {
   reaction = reaction.toLowerCase();
 
   if (CREATE_MONGO_INDEXES) {
-
     // Create the index on the comment model based on the reaction config.
-    CommentModel.collection.createIndex({
-      created_at: 1,
-      [`action_counts.${sc(reaction)}`]: 1
-    }, {
-      background: true,
-    });
+    CommentModel.collection.createIndex(
+      {
+        created_at: 1,
+        [`action_counts.${sc(reaction)}`]: 1,
+      },
+      {
+        background: true,
+      }
+    );
   }
 
   const reactionPlural = pluralize(reaction);
@@ -126,24 +128,39 @@ function getReactionConfig(reaction) {
 
   return {
     typeDefs,
+    schemas: ({ CommentSchema }) => {
+      CommentSchema.index(
+        {
+          created_at: 1,
+          [`action_counts.${sc(reaction)}`]: 1,
+        },
+        {
+          background: true,
+        }
+      );
+    },
     context: {
       Sort: () => ({
         Comments: {
           [reactionPlural]: {
-            startCursor(ctx, nodes, {cursor}) {
-
+            startCursor(ctx, nodes, { cursor }) {
               // The cursor is the start! This is using numeric pagination.
               return cursor != null ? cursor : 0;
             },
-            endCursor(ctx, nodes, {cursor}) {
-              return nodes.length ? (cursor != null ? cursor : 0) + nodes.length : null;
+            endCursor(ctx, nodes, { cursor }) {
+              return nodes.length
+                ? (cursor != null ? cursor : 0) + nodes.length
+                : null;
             },
-            sort(ctx, query, {cursor, sortOrder}) {
+            sort(ctx, query, { cursor, sortOrder }) {
               if (cursor) {
                 query = query.skip(cursor);
               }
 
-              return query.sort({[`action_counts.${reaction}`]: sortOrder === 'DESC' ? -1 : 1, created_at: sortOrder === 'DESC' ? -1 : 1});
+              return query.sort({
+                [`action_counts.${reaction}`]: sortOrder === 'DESC' ? -1 : 1,
+                created_at: sortOrder === 'DESC' ? -1 : 1,
+              });
             },
           },
         },
@@ -151,37 +168,43 @@ function getReactionConfig(reaction) {
     },
     resolvers: {
       Subscription: {
-        [`${reaction}ActionCreated`]: ({action}) => {
+        [`${reaction}ActionCreated`]: ({ action }) => {
           return action;
         },
-        [`${reaction}ActionDeleted`]: ({action}) => {
+        [`${reaction}ActionDeleted`]: ({ action }) => {
           return action;
         },
       },
       [`${Reaction}Action`]: {
-
         // This will load the user for the specific action. We'll limit this to the
         // admin users only or the current logged in user.
-        user({user_id}, _, {loaders: {Users}, user}) {
+        user({ user_id }, _, { loaders: { Users }, user }) {
           if (user && (user.can(SEARCH_OTHER_USERS) || user_id === user.id)) {
             return Users.getByID.load(user_id);
           }
-        }
+        },
       },
       RootMutation: {
-        [`create${Reaction}Action`]: async (_, {input: {item_id}}, {mutators: {Action}, pubsub, loaders: {Comments}}) => {
+        [`create${Reaction}Action`]: async (
+          _,
+          { input: { item_id } },
+          { mutators: { Action }, pubsub, loaders: { Comments } }
+        ) => {
           const comment = await Comments.get.load(item_id);
           if (!comment) {
             throw errors.ErrNotFound;
           }
 
           try {
-            const action = await Action.create({item_id, item_type: 'COMMENTS', action_type: REACTION});
+            const action = await Action.create({
+              item_id,
+              item_type: 'COMMENTS',
+              action_type: REACTION,
+            });
 
             if (pubsub) {
-
               // The comment is needed to allow better filtering e.g. by asset_id.
-              pubsub.publish(`${reaction}ActionCreated`, {action, comment});
+              pubsub.publish(`${reaction}ActionCreated`, { action, comment });
             }
 
             return {
@@ -195,17 +218,20 @@ function getReactionConfig(reaction) {
             throw err;
           }
         },
-        [`delete${Reaction}Action`]: async (_, {input: {id}}, {mutators: {Action}, pubsub, loaders: {Comments}})  => {
-          const action = await Action.delete({id});
+        [`delete${Reaction}Action`]: async (
+          _,
+          { input: { id } },
+          { mutators: { Action }, pubsub, loaders: { Comments } }
+        ) => {
+          const action = await Action.delete({ id });
           if (!action) {
             return null;
           }
 
           const comment = await Comments.get.load(action.item_id);
           if (pubsub) {
-
             // The comment is needed to allow better filtering e.g. by asset_id.
-            pubsub.publish(`${reaction}ActionDeleted`, {action, comment});
+            pubsub.publish(`${reaction}ActionDeleted`, { action, comment });
           }
         },
       },
@@ -213,34 +239,38 @@ function getReactionConfig(reaction) {
     hooks: {
       Action: {
         __resolveType: {
-          post({action_type}) {
+          post({ action_type }) {
             switch (action_type) {
-            case REACTION:
-              return `${Reaction}Action`;
+              case REACTION:
+                return `${Reaction}Action`;
+              default:
+                return undefined;
             }
-          }
-        }
+          },
+        },
       },
       ActionSummary: {
         __resolveType: {
-          post({action_type}) {
+          post({ action_type }) {
             switch (action_type) {
-            case REACTION:
-              return `${Reaction}ActionSummary`;
+              case REACTION:
+                return `${Reaction}ActionSummary`;
+              default:
+                return undefined;
             }
-          }
-        }
-      }
+          },
+        },
+      },
     },
     setupFunctions: {
       [`${reaction}ActionCreated`]: (options, args) => ({
         [`${reaction}ActionCreated`]: {
-          filter: ({comment}) => comment.asset_id === args.asset_id,
+          filter: ({ comment }) => comment.asset_id === args.asset_id,
         },
       }),
       [`${reaction}ActionDeleted`]: (options, args) => ({
         [`${reaction}ActionDeleted`]: {
-          filter: ({comment}) => comment.asset_id === args.asset_id,
+          filter: ({ comment }) => comment.asset_id === args.asset_id,
         },
       }),
     },
diff --git a/plugins.js b/plugins.js
index 577289b25..053a0158e 100644
--- a/plugins.js
+++ b/plugins.js
@@ -4,6 +4,7 @@ const resolve = require('resolve');
 const debug = require('debug')('talk:plugins');
 const Joi = require('joi');
 const amp = require('app-module-path');
+const pkg = require('./package.json');
 
 const PLUGINS_JSON = process.env.TALK_PLUGINS_JSON;
 
@@ -35,7 +36,9 @@ try {
   plugins = require(pluginsPath);
 } catch (err) {
   if (err.code === 'ENOENT') {
-    console.error('plugins.json and plugins.default.json not found, plugins will not be active');
+    console.error(
+      'plugins.json and plugins.default.json not found, plugins will not be active'
+    );
   } else {
     throw err;
   }
@@ -48,13 +51,22 @@ const hookSchemas = {
   passport: Joi.func().arity(1),
   router: Joi.func().arity(1),
   context: Joi.object().pattern(/\w/, Joi.func().maxArity(1)),
-  hooks: Joi.object().pattern(/\w/, Joi.object().pattern(/(?:__resolveType|\w+)/, Joi.object({
-    pre: Joi.func(),
-    post: Joi.func()
-  }))),
+  hooks: Joi.object().pattern(
+    /\w/,
+    Joi.object().pattern(
+      /(?:__resolveType|\w+)/,
+      Joi.object({
+        pre: Joi.func(),
+        post: Joi.func(),
+      })
+    )
+  ),
   loaders: Joi.func().maxArity(1),
   mutators: Joi.func().maxArity(1),
-  resolvers: Joi.object().pattern(/\w/, Joi.object().pattern(/(?:__resolveType|\w+)/, Joi.func())),
+  resolvers: Joi.object().pattern(
+    /\w/,
+    Joi.object().pattern(/(?:__resolveType|\w+)/, Joi.func())
+  ),
   typeDefs: Joi.string(),
   schemaLevelResolveFunction: Joi.func(),
   websockets: Joi.object({
@@ -63,6 +75,15 @@ const hookSchemas = {
   }),
 };
 
+/**
+ * PluginContext provides server context for the global application.
+ */
+class PluginContext {
+  constructor() {
+    this.pkg = pkg;
+  }
+}
+
 /**
  * isInternal checks to see if a given plugin is internal, and returns true
  * if it is.
@@ -87,7 +108,10 @@ function isInternal(name) {
 function pluginPath(name) {
   if (isInternal(name)) {
     try {
-      return resolve.sync(name, {moduleDirectory: 'plugins', basedir: process.cwd()});
+      return resolve.sync(name, {
+        moduleDirectory: 'plugins',
+        basedir: process.cwd(),
+      });
     } catch (e) {
       console.warn(e);
       return undefined;
@@ -95,7 +119,7 @@ function pluginPath(name) {
   }
 
   try {
-    return resolve.sync(name, {basedir: process.cwd()});
+    return resolve.sync(name, { basedir: process.cwd() });
   } catch (e) {
     return undefined;
   }
@@ -103,7 +127,6 @@ function pluginPath(name) {
 
 class Plugin {
   constructor(entry) {
-
     // This checks to see if the structure for this entry is an object:
     //
     // {"people": "^1.2.0"}
@@ -113,13 +136,15 @@ class Plugin {
     // "people"
     //
     if (typeof entry === 'object') {
-      this.name = Object.keys(entry).find((name) => name !== null);
+      this.name = Object.keys(entry).find(name => name !== null);
       this.version = entry[this.name];
     } else if (typeof entry === 'string') {
       this.name = entry;
       this.version = `file:./plugins/${this.name}`;
     } else {
-      throw new Error(`plugins.json is malformed, refer to PLUGINS.md for formatting, expected a string or an object for a plugin entry, found a ${typeof entry}`);
+      throw new Error(
+        `plugins.json is malformed, refer to PLUGINS.md for formatting, expected a string or an object for a plugin entry, found a ${typeof entry}`
+      );
     }
 
     // Get the path for the plugin.
@@ -128,49 +153,72 @@ class Plugin {
 
   require() {
     if (typeof this.path === 'undefined') {
-      throw new Error(`plugin '${this.name}' is not local and is not resolvable, plugin reconsiliation may be required`);
+      throw new Error(
+        `plugin '${
+          this.name
+        }' is not local and is not resolvable, plugin reconciliation may be required`
+      );
     }
 
     try {
       this.module = require(this.path);
     } catch (e) {
-      if (e && e.code && e.code === 'MODULE_NOT_FOUND' && isInternal(this.name)) {
-        console.error(new Error(`plugin '${this.name}' could not be loaded due to missing dependencies, plugin reconsiliation may be required`));
+      if (
+        e &&
+        e.code &&
+        e.code === 'MODULE_NOT_FOUND' &&
+        isInternal(this.name)
+      ) {
+        console.error(
+          new Error(
+            `plugin '${
+              this.name
+            }' could not be loaded due to missing dependencies, plugin reconciliation may be required`
+          )
+        );
         throw e;
       }
 
-      console.error(new Error(`plugin '${this.name}' could not be required from '${this.path}': ${e.message}`));
+      console.error(
+        new Error(
+          `plugin '${this.name}' could not be required from '${this.path}': ${
+            e.message
+          }`
+        )
+      );
       throw e;
     }
   }
 }
 
 /**
- * Itterates over the plugins and gets the plugin path's, version, and name.
+ * Iterates over the plugins and gets the plugin path's, version, and name.
  *
  * @param {Array<Object|String>} plugins
  * @returns {Array<Object>}
  */
-const itteratePlugins = (plugins) => plugins.map((p) => new Plugin(p));
+const iteratePlugins = plugins => plugins.map(p => new Plugin(p));
 
 // Add each plugin folder to the allowed import path so that they can import our
-// internal dependancies.
-Object.keys(plugins).forEach((type) => itteratePlugins(plugins[type]).forEach((plugin) => {
-
-  // The plugin may be remote, and therefore not installed. We check here if the
-  // plugin path is available before trying to monkeypatch it's require path.
-  if (plugin.path) {
-    amp.enableForDir(path.dirname(plugin.path));
-  }
-}));
+// internal dependencies.
+Object.keys(plugins).forEach(type =>
+  iteratePlugins(plugins[type]).forEach(plugin => {
+    // The plugin may be remote, and therefore not installed. We check here if the
+    // plugin path is available before trying to monkey patch it's require path.
+    if (plugin.path) {
+      amp.enableForDir(path.dirname(plugin.path));
+    }
+  })
+);
 
 /**
  * Stores a reference to a section for a section of Plugins.
  */
 class PluginSection {
-  constructor(plugins) {
+  constructor(context, plugins) {
+    this.context = context;
     this.required = false;
-    this.plugins = itteratePlugins(plugins);
+    this.plugins = iteratePlugins(plugins);
   }
 
   require() {
@@ -179,8 +227,7 @@ class PluginSection {
     }
 
     this.required = true;
-    this.plugins.forEach((plugin) => {
-
+    this.plugins.forEach(plugin => {
       // Load the plugin.
       plugin.require();
 
@@ -195,43 +242,56 @@ class PluginSection {
   }
 
   /**
-   * This itterates over the section to provide all plugin hooks that are
+   * This iterates over the section to provide all plugin hooks that are
    * available.
    */
-  hook(hook) {
-
+  hook(hookName) {
     // Load the plugin source if we haven't already.
     this.require();
 
     return this.plugins
-      .filter(({module}) => hook in module)
-      .filter((plugin) => {
+      .filter(({ module }) => hookName in module)
+      .map(plugin => {
+        // Optionally bind the plugin context to a function if it's one.
+        const hook =
+          typeof plugin.module[hookName] === 'function'
+            ? plugin.module[hookName].bind(this.context)
+            : plugin.module[hookName];
 
         // Validate the hook.
-        if (hook in hookSchemas) {
-          Joi.assert(plugin.module[hook], hookSchemas[hook], `Plugin '${plugin.name}' failed validation for the '${hook}' hook`);
+        if (hookName in hookSchemas) {
+          Joi.assert(
+            hook,
+            hookSchemas[hookName],
+            `Plugin '${
+              plugin.name
+            }' failed validation for the '${hookName}' hook`
+          );
         }
 
-        return true;
-      })
-      .map((plugin) => ({
-        plugin,
-        [hook]: plugin.module[hook]
-      }));
+        return {
+          plugin,
+          [hookName]: hook,
+        };
+      });
   }
 }
 
-const NullPluginSection = new PluginSection([]);
+const NullPluginSection = new PluginSection({}, []);
 
 /**
  * Stores references to all the plugins available on the application.
  */
 class PluginManager {
   constructor(plugins) {
+    this.context = new PluginContext();
     this.sections = {};
 
     for (let section in plugins) {
-      this.sections[section] = new PluginSection(plugins[section]);
+      this.sections[section] = new PluginSection(
+        this.context,
+        plugins[section]
+      );
     }
   }
 
@@ -262,5 +322,5 @@ module.exports = {
   PluginManager,
   isInternal,
   pluginPath,
-  itteratePlugins
+  iteratePlugins,
 };
diff --git a/plugins/talk-plugin-auth/client/components/ChangeUsername.js b/plugins/talk-plugin-auth/client/components/ChangeUsername.js
index 5c5b0891d..e814a9d05 100644
--- a/plugins/talk-plugin-auth/client/components/ChangeUsername.js
+++ b/plugins/talk-plugin-auth/client/components/ChangeUsername.js
@@ -1,9 +1,13 @@
 import React from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'react-apollo';
+import { bindActionCreators } from 'redux';
 import errorMsj from 'coral-framework/helpers/error';
 import validate from 'coral-framework/helpers/validate';
 import CreateUsernameDialog from './CreateUsernameDialog';
+import { withSetUsername } from 'coral-framework/graphql/mutations';
+import { forEachError } from 'plugin-api/beta/client/utils';
 
 import t from 'coral-framework/services/i18n';
 
@@ -12,7 +16,7 @@ import {
   hideCreateUsernameDialog,
   invalidForm,
   validForm,
-  createUsername
+  updateUsername,
 } from 'coral-embed-stream/src/actions/auth';
 
 class ChangeUsernameContainer extends React.Component {
@@ -21,32 +25,36 @@ class ChangeUsernameContainer extends React.Component {
 
     this.state = {
       formData: {
-        username: (props.auth.user && props.auth.user.username) || ''
+        username: (props.auth.user && props.auth.user.username) || '',
       },
       errors: {},
-      showErrors: false
+      showErrors: false,
     };
   }
 
   componentWillReceiveProps(next) {
-    if (!this.props.auth.showCreateUsernameDialog && next.auth.showCreateUsernameDialog) {
+    if (
+      !this.props.auth.showCreateUsernameDialog &&
+      next.auth.showCreateUsernameDialog
+    ) {
       this.setState({
         formData: {
-          username: (this.props.auth.user && this.props.auth.user.username) || '',
+          username:
+            (this.props.auth.user && this.props.auth.user.username) || '',
         },
       });
     }
   }
 
-  handleChange = (e) => {
-    const {name, value} = e.target;
+  handleChange = e => {
+    const { name, value } = e.target;
     this.setState(
-      (state) => ({
+      state => ({
         ...state,
         formData: {
           ...state.formData,
-          [name]: value
-        }
+          [name]: value,
+        },
       }),
       () => {
         this.validation(name, value);
@@ -55,16 +63,16 @@ class ChangeUsernameContainer extends React.Component {
   };
 
   addError = (name, error) => {
-    return this.setState((state) => ({
+    return this.setState(state => ({
       errors: {
         ...state.errors,
-        [name]: error
-      }
+        [name]: error,
+      },
     }));
   };
 
   validation = (name, value) => {
-    const {addError} = this;
+    const { addError } = this;
 
     if (!value.length) {
       addError(name, t('createdisplay.required_field'));
@@ -73,38 +81,61 @@ class ChangeUsernameContainer extends React.Component {
     } else {
       const {[name]: prop, ...errors} = this.state.errors; // eslint-disable-line
       // Removes Error
-      this.setState((state) => ({...state, errors}));
+      this.setState(state => ({ ...state, errors }));
     }
   };
 
   isCompleted = () => {
-    const {formData} = this.state;
-    return !Object.keys(formData).filter((prop) => !formData[prop].length).length;
+    const { formData } = this.state;
+    return !Object.keys(formData).filter(prop => !formData[prop].length).length;
   };
 
   displayErrors = (show = true) => {
-    this.setState({showErrors: show});
+    this.setState({ showErrors: show });
   };
 
-  handleSubmitUsername = (e) => {
+  async setUsernameAndClose(username, props = this.props) {
+    const {
+      validForm,
+      invalidForm,
+      setUsername,
+      hideCreateUsernameDialog,
+      updateUsername,
+    } = props;
+    try {
+      // Perform mutation
+      await setUsername(this.props.auth.user.id, username);
+
+      // Also change in redux store...
+      updateUsername(username);
+
+      hideCreateUsernameDialog();
+      validForm();
+    } catch (error) {
+      const msgs = [];
+      forEachError(error, ({ msg }) => msgs.push(msg));
+      invalidForm(t(msgs.join(', ')));
+    }
+  }
+
+  handleSubmitUsername = e => {
     e.preventDefault();
-    const {errors} = this.state;
-    const {validForm, invalidForm} = this.props;
+    const { errors, formData: { username } } = this.state;
+    const { invalidForm } = this.props;
     this.displayErrors();
     if (this.isCompleted() && !Object.keys(errors).length) {
-      this.props.createUsername(this.props.auth.user.id, this.state.formData);
-      validForm();
+      this.setUsernameAndClose(username);
     } else {
       invalidForm(t('createdisplay.check_the_form'));
     }
   };
 
   handleClose = () => {
-    this.props.hideCreateUsernameDialog();
+    this.setUsernameAndClose(this.props.auth.user.username);
   };
 
   render() {
-    const {loggedIn, auth} = this.props;
+    const { loggedIn, auth } = this.props;
     return (
       <div>
         <CreateUsernameDialog
@@ -121,22 +152,32 @@ class ChangeUsernameContainer extends React.Component {
   }
 }
 
-const mapStateToProps = ({auth}) => ({
-  auth: auth
+ChangeUsernameContainer.propTypes = {
+  auth: PropTypes.object,
+  hideCreateUsernameDialog: PropTypes.func,
+  validForm: PropTypes.func,
+  invalidForm: PropTypes.func,
+  loggedIn: PropTypes.bool,
+  changeUsername: PropTypes.func,
+};
+
+const mapStateToProps = ({ auth }) => ({
+  auth: auth,
 });
 
-const mapDispatchToProps = (dispatch) =>
+const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
-      createUsername,
       showCreateUsernameDialog,
       hideCreateUsernameDialog,
       invalidForm,
-      validForm
+      validForm,
+      updateUsername,
     },
     dispatch
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(
-  ChangeUsernameContainer
-);
+export default compose(
+  withSetUsername,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ChangeUsernameContainer);
diff --git a/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js b/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js
index 5c289c1c7..08ddc171e 100644
--- a/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js
+++ b/plugins/talk-plugin-auth/client/components/CreateUsernameDialog.js
@@ -1,7 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './styles.css';
-import {Dialog, Alert, TextField, Button} from 'plugin-api/beta/client/components/ui';
-import {FakeComment} from './FakeComment';
+import {
+  Dialog,
+  Alert,
+  TextField,
+  Button,
+} from 'plugin-api/beta/client/components/ui';
+import { FakeComment } from './FakeComment';
 import t from 'coral-framework/services/i18n';
 
 const CreateUsernameDialog = ({
@@ -17,12 +23,12 @@ const CreateUsernameDialog = ({
     id="createUsernameDialog"
     open={open}
   >
-    <span className={styles.close} onClick={handleClose}>×</span>
+    <span className={styles.close} onClick={handleClose}>
+      ×
+    </span>
     <div>
       <div className={styles.header}>
-        <h1>
-          {t('createdisplay.write_your_username')}
-        </h1>
+        <h1>{t('createdisplay.write_your_username')}</h1>
       </div>
       <div>
         <p className={styles.yourusername}>
@@ -39,14 +45,16 @@ const CreateUsernameDialog = ({
         </p>
         {props.auth.error && <Alert>{props.auth.error}</Alert>}
         <form id="saveUsername" onSubmit={handleSubmitUsername}>
-          {props.errors.username &&
+          {props.errors.username && (
             <span className={styles.hint}>
-              {' '}{t('createdisplay.special_characters')}{' '}
-            </span>}
+              {' '}
+              {t('createdisplay.special_characters')}{' '}
+            </span>
+          )}
           <div className={styles.saveusername}>
             <TextField
               id="username"
-              style={{fontSize: 16}}
+              style={{ fontSize: 16 }}
               type="string"
               label={t('createdisplay.username')}
               value={formData.username}
@@ -62,4 +70,14 @@ const CreateUsernameDialog = ({
   </Dialog>
 );
 
+CreateUsernameDialog.propTypes = {
+  open: PropTypes.bool,
+  handleClose: PropTypes.func,
+  formData: PropTypes.object,
+  handleSubmitUsername: PropTypes.func,
+  handleChange: PropTypes.func,
+  auth: PropTypes.object,
+  errors: PropTypes.object,
+};
+
 export default CreateUsernameDialog;
diff --git a/plugins/talk-plugin-auth/client/components/FakeComment.js b/plugins/talk-plugin-auth/client/components/FakeComment.js
index e843a0cbf..d7367e838 100644
--- a/plugins/talk-plugin-auth/client/components/FakeComment.js
+++ b/plugins/talk-plugin-auth/client/components/FakeComment.js
@@ -1,25 +1,19 @@
 import React from 'react';
 import t from 'coral-framework/services/i18n';
-import {ReplyButton} from 'talk-plugin-replies';
+import { ReplyButton } from 'talk-plugin-replies';
 import styles from './FakeComment.css';
-import {Icon} from 'plugin-api/beta/client/components/ui';
-import {CommentTimestamp} from 'plugin-api/beta/client/components';
+import { Icon } from 'plugin-api/beta/client/components/ui';
+import { CommentTimestamp } from 'plugin-api/beta/client/components';
 
-export const FakeComment = ({username, created_at, body}) => (
+export const FakeComment = ({ username, created_at, body }) => (
   <div className={styles.root}>
-    <span className={styles.authorName}>
-      {username}
-    </span>
+    <span className={styles.authorName}>{username}</span>
     <CommentTimestamp created_at={created_at} />
-    <div className={styles.body}>
-      {body}
-    </div>
+    <div className={styles.body}>{body}</div>
     <div className={styles.footer}>
       <div>
         <button className={styles.button}>
-          <span className={styles.label}>
-            {t('like')}
-          </span>
+          <span className={styles.label}>{t('like')}</span>
           <Icon name="thumb_up" className={styles.icon} />
         </button>
         <ReplyButton
@@ -30,19 +24,14 @@ export const FakeComment = ({username, created_at, body}) => (
       </div>
       <div>
         <button className={styles.button}>
-          <span className={styles.label}>
-            {t('permalink')}
-          </span>
+          <span className={styles.label}>{t('permalink')}</span>
           <Icon name="link" className={styles.icon} />
         </button>
         <button className={styles.button}>
-          <span className={styles.label}>
-            {t('report')}
-          </span>
+          <span className={styles.label}>{t('report')}</span>
           <Icon name="flag" className={styles.icon} />
         </button>
       </div>
     </div>
   </div>
 );
-
diff --git a/plugins/talk-plugin-auth/client/components/ForgotContent.js b/plugins/talk-plugin-auth/client/components/ForgotContent.js
index d8ae2fab0..bfadbb001 100644
--- a/plugins/talk-plugin-auth/client/components/ForgotContent.js
+++ b/plugins/talk-plugin-auth/client/components/ForgotContent.js
@@ -1,26 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './styles.css';
-import {Button, TextField} from 'plugin-api/beta/client/components/ui';
+import { Button, TextField } from 'plugin-api/beta/client/components/ui';
 import t from 'coral-framework/services/i18n';
 
 class ForgotContent extends React.Component {
-  
-  state = {value: ''};
+  state = { value: '' };
 
-  handleSubmit = (e) => {
+  handleSubmit = e => {
     e.preventDefault();
     this.props.fetchForgotPassword(this.state.value);
   };
 
-  handleChangeEmail = (e) => {
-    const {value} = e.target;
-    this.setState({value});
-  }
+  handleChangeEmail = e => {
+    const { value } = e.target;
+    this.setState({ value });
+  };
 
   render() {
-    const {changeView, auth} = this.props;
-    const {passwordRequestSuccess, passwordRequestFailure} = auth;
+    const { changeView, auth } = this.props;
+    const { passwordRequestSuccess, passwordRequestFailure } = auth;
 
     return (
       <div>
@@ -31,7 +30,7 @@ class ForgotContent extends React.Component {
           <div className={styles.textField}>
             <TextField
               type="email"
-              style={{fontSize: 16}}
+              style={{ fontSize: 16 }}
               id="email"
               name="email"
               label={t('sign_in.email')}
@@ -47,31 +46,25 @@ class ForgotContent extends React.Component {
           >
             {t('sign_in.recover_password')}
           </Button>
-          {passwordRequestSuccess
-            ? <p className={styles.passwordRequestSuccess}>
+          {passwordRequestSuccess ? (
+            <p className={styles.passwordRequestSuccess}>
               {passwordRequestSuccess}
             </p>
-            : null}
-          {passwordRequestFailure
-            ? <p className={styles.passwordRequestFailure}>
+          ) : null}
+          {passwordRequestFailure ? (
+            <p className={styles.passwordRequestFailure}>
               {passwordRequestFailure}
             </p>
-            : null}
+          ) : null}
         </form>
         <div className={styles.footer}>
           <span>
-            {t('sign_in.need_an_account')}
-            {' '}
-            <a onClick={() => changeView('SIGNUP')}>
-              {t('sign_in.register')}
-            </a>
+            {t('sign_in.need_an_account')}{' '}
+            <a onClick={() => changeView('SIGNUP')}>{t('sign_in.register')}</a>
           </span>
           <span>
-            {t('sign_in.already_have_an_account')}
-            {' '}
-            <a onClick={() => changeView('SIGNIN')}>
-              {t('sign_in.sign_in')}
-            </a>
+            {t('sign_in.already_have_an_account')}{' '}
+            <a onClick={() => changeView('SIGNIN')}>{t('sign_in.sign_in')}</a>
           </span>
         </div>
       </div>
diff --git a/plugins/talk-plugin-auth/client/components/ResendVerification.js b/plugins/talk-plugin-auth/client/components/ResendVerification.js
index b345577a9..d2d71dd45 100644
--- a/plugins/talk-plugin-auth/client/components/ResendVerification.js
+++ b/plugins/talk-plugin-auth/client/components/ResendVerification.js
@@ -1,27 +1,38 @@
 import React from 'react';
-import {Button, Spinner, Success, Alert} from 'plugin-api/beta/client/components/ui';
+import {
+  Button,
+  Spinner,
+  Success,
+  Alert,
+} from 'plugin-api/beta/client/components/ui';
 import PropTypes from 'prop-types';
 import styles from './ResendVerification.css';
 import t from 'coral-framework/services/i18n';
 
 class ResendVerification extends React.Component {
   render() {
-    const {resendVerification, error, loading, success, email} = this.props;
+    const { resendVerification, error, loading, success, email } = this.props;
     return (
       <div className="talk-resend-verification">
-        <h1 className={styles.header}>
-          {t('sign_in.email_verify_cta')}
-        </h1>
+        <h1 className={styles.header}>{t('sign_in.email_verify_cta')}</h1>
 
-        {error &&
+        {error && (
           <Alert>
-            {error.translation_key ? t(`error.${error.translation_key}`) : error.toString()}
-          </Alert>}
+            {error.translation_key
+              ? t(`error.${error.translation_key}`)
+              : error.toString()}
+          </Alert>
+        )}
         <div className={styles.notVerified}>
           {t('error.email_not_verified', email)}
         </div>
         <div>
-          <Button id="resendConfirmEmail" cStyle="black" onClick={resendVerification} full>
+          <Button
+            id="resendConfirmEmail"
+            cStyle="black"
+            onClick={resendVerification}
+            full
+          >
             {t('sign_in.request_new_verify_email')}
           </Button>
           {loading && <Spinner />}
diff --git a/plugins/talk-plugin-auth/client/components/SignDialog.js b/plugins/talk-plugin-auth/client/components/SignDialog.js
index 652148d75..a33baeb99 100644
--- a/plugins/talk-plugin-auth/client/components/SignDialog.js
+++ b/plugins/talk-plugin-auth/client/components/SignDialog.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Dialog} from 'plugin-api/beta/client/components/ui';
+import { Dialog } from 'plugin-api/beta/client/components/ui';
 import styles from './styles.css';
 
 import SignInContent from './SignInContent';
@@ -7,20 +7,25 @@ import SignUpContent from './SignUpContent';
 import ForgotContent from './ForgotContent';
 import ResendVerification from './ResendVerification';
 
-const SignDialog = ({open, view, resetSignInDialog, ...props}) => (
+const SignDialog = ({ open, view, resetSignInDialog, ...props }) => (
   <Dialog className={styles.dialog} id="signInDialog" open={open}>
-    {view !== 'SIGNIN' && <span className={styles.close} onClick={resetSignInDialog}>×</span>}
+    {view !== 'SIGNIN' && (
+      <span className={styles.close} onClick={resetSignInDialog}>
+        ×
+      </span>
+    )}
     {view === 'SIGNIN' && <SignInContent {...props} />}
     {view === 'SIGNUP' && <SignUpContent {...props} />}
     {view === 'FORGOT' && <ForgotContent {...props} />}
-    {view === 'RESEND_VERIFICATION' &&
+    {view === 'RESEND_VERIFICATION' && (
       <ResendVerification
         resendVerification={props.resendVerification}
         error={props.auth.emailVerificationFailure}
         success={props.auth.emailVerificationSuccess}
         loading={props.auth.emailVerificationLoading}
         email={props.auth.email}
-      />}
+      />
+    )}
   </Dialog>
 );
 
diff --git a/plugins/talk-plugin-auth/client/components/SignInButton.js b/plugins/talk-plugin-auth/client/components/SignInButton.js
index ee8004aa8..163a5e5f8 100644
--- a/plugins/talk-plugin-auth/client/components/SignInButton.js
+++ b/plugins/talk-plugin-auth/client/components/SignInButton.js
@@ -1,25 +1,25 @@
 import React from 'react';
-import {Button} from 'plugin-api/beta/client/components/ui';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {showSignInDialog} from 'coral-embed-stream/src/actions/auth';
+import { Button } from 'plugin-api/beta/client/components/ui';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { showSignInDialog } from 'coral-embed-stream/src/actions/auth';
 import t from 'coral-framework/services/i18n';
 
-const SignInButton = ({loggedIn, showSignInDialog}) => (
+const SignInButton = ({ loggedIn, showSignInDialog }) => (
   <div className="talk-stream-auth-sign-in-button">
-    {!loggedIn
-      ? <Button id="coralSignInButton" onClick={showSignInDialog} full>
+    {!loggedIn ? (
+      <Button id="coralSignInButton" onClick={showSignInDialog} full>
         {t('sign_in.sign_in_to_comment')}
       </Button>
-      : null}
+    ) : null}
   </div>
 );
 
-const mapStateToProps = ({auth}) => ({
-  loggedIn: auth.loggedIn
+const mapStateToProps = ({ auth }) => ({
+  loggedIn: auth.loggedIn,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({showSignInDialog}, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ showSignInDialog }, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(SignInButton);
diff --git a/plugins/talk-plugin-auth/client/components/SignInContainer.js b/plugins/talk-plugin-auth/client/components/SignInContainer.js
index c22ad72c4..a4dec87e5 100644
--- a/plugins/talk-plugin-auth/client/components/SignInContainer.js
+++ b/plugins/talk-plugin-auth/client/components/SignInContainer.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SignDialog from './SignDialog';
-import {bindActionCreators} from 'redux';
+import { bindActionCreators } from 'redux';
 import t from 'coral-framework/services/i18n';
 import errorMsj from 'coral-framework/helpers/error';
 import validate from 'coral-framework/helpers/validate';
@@ -30,49 +30,48 @@ class SignInContainer extends React.Component {
         email: '',
         username: '',
         password: '',
-        confirmPassword: ''
+        confirmPassword: '',
       },
       errors: {},
-      showErrors: false
+      showErrors: false,
     };
   }
 
   componentDidMount() {
     window.addEventListener('storage', this.handleAuth);
 
-    const {formData} = this.state;
+    const { formData } = this.state;
     const errors = Object.keys(formData).reduce((map, prop) => {
       map[prop] = t('sign_in.required_field');
       return map;
     }, {});
-    this.setState({errors});
+    this.setState({ errors });
   }
 
   componentWillUnmount() {
     window.removeEventListener('storage', this.handleAuth);
   }
 
-  handleAuth = (e) => {
-
+  handleAuth = e => {
     // Listening to FB changes
     // FB localStorage key is 'auth'
     const authCallback = this.props.facebookCallback;
 
     if (e.key === 'auth') {
-      const {err, data} = JSON.parse(e.newValue);
+      const { err, data } = JSON.parse(e.newValue);
       authCallback(err, data);
     }
   };
 
-  handleChange = (e) => {
-    const {name, value} = e.target;
+  handleChange = e => {
+    const { name, value } = e.target;
     this.setState(
-      (state) => ({
+      state => ({
         ...state,
         formData: {
           ...state.formData,
-          [name]: value
-        }
+          [name]: value,
+        },
       }),
       () => {
         this.validation(name, value);
@@ -81,29 +80,26 @@ class SignInContainer extends React.Component {
   };
 
   resendVerification = () => {
-    this.props
-      .requestConfirmEmail(this.props.auth.email)
-      .then(() => {
-        setTimeout(() => {
-
-          // allow success UI to be shown for a second, and then close the modal
-          this.props.resetSignInDialog();
-        }, 2500);
-      });
+    this.props.requestConfirmEmail(this.props.auth.email).then(() => {
+      setTimeout(() => {
+        // allow success UI to be shown for a second, and then close the modal
+        this.props.resetSignInDialog();
+      }, 2500);
+    });
   };
 
   addError = (name, error) => {
-    return this.setState((state) => ({
+    return this.setState(state => ({
       errors: {
         ...state.errors,
-        [name]: error
-      }
+        [name]: error,
+      },
     }));
   };
 
   validation = (name, value) => {
-    const {addError} = this;
-    const {formData} = this.state;
+    const { addError } = this;
+    const { formData } = this.state;
 
     if (!value.length) {
       addError(name, t('sign_in.required_field'));
@@ -117,23 +113,23 @@ class SignInContainer extends React.Component {
     } else {
       const {[name]: prop, ...errors} = this.state.errors; // eslint-disable-line
       // Removes Error
-      this.setState((state) => ({...state, errors}));
+      this.setState(state => ({ ...state, errors }));
     }
   };
 
   isCompleted = () => {
-    const {formData} = this.state;
-    return !Object.keys(formData).filter((prop) => !formData[prop].length).length;
+    const { formData } = this.state;
+    return !Object.keys(formData).filter(prop => !formData[prop].length).length;
   };
 
   displayErrors = (show = true) => {
-    this.setState({showErrors: show});
+    this.setState({ showErrors: show });
   };
 
-  handleSignUp = (e) => {
+  handleSignUp = e => {
     e.preventDefault();
-    const {errors} = this.state;
-    const {fetchSignUp, validForm, invalidForm} = this.props;
+    const { errors } = this.state;
+    const { fetchSignUp, validForm, invalidForm } = this.props;
     this.displayErrors();
     if (this.isCompleted() && !Object.keys(errors).length) {
       fetchSignUp(this.state.formData);
@@ -143,14 +139,18 @@ class SignInContainer extends React.Component {
     }
   };
 
-  handleSignIn = (e) => {
+  handleSignIn = e => {
     e.preventDefault();
     this.props.fetchSignIn(this.state.formData);
   };
 
   render() {
-    const {auth} = this.props;
-    const {requireEmailConfirmation, emailVerificationLoading, emailVerificationSuccess} = auth;
+    const { auth } = this.props;
+    const {
+      requireEmailConfirmation,
+      emailVerificationLoading,
+      emailVerificationSuccess,
+    } = auth;
 
     return (
       <SignDialog
@@ -167,11 +167,11 @@ class SignInContainer extends React.Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  auth: state.auth
+const mapStateToProps = state => ({
+  auth: state.auth,
 });
 
-const mapDispatchToProps = (dispatch) =>
+const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       facebookCallback,
@@ -185,7 +185,7 @@ const mapDispatchToProps = (dispatch) =>
       hideSignInDialog,
       resetSignInDialog,
       invalidForm,
-      validForm
+      validForm,
     },
     dispatch
   );
diff --git a/plugins/talk-plugin-auth/client/components/SignInContent.js b/plugins/talk-plugin-auth/client/components/SignInContent.js
index 956176b32..e74de4ff2 100644
--- a/plugins/talk-plugin-auth/client/components/SignInContent.js
+++ b/plugins/talk-plugin-auth/client/components/SignInContent.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button, TextField, Spinner, Alert} from 'plugin-api/beta/client/components/ui';
+import {
+  Button,
+  TextField,
+  Spinner,
+  Alert,
+} from 'plugin-api/beta/client/components/ui';
 import styles from './styles.css';
 import t from 'coral-framework/services/i18n';
 
@@ -10,19 +15,20 @@ const SignInContent = ({
   changeView,
   handleSignIn,
   auth,
-  fetchSignInFacebook
+  fetchSignInFacebook,
 }) => {
   return (
     <div className="coral-sign-in">
       <div className={`${styles.header} header`}>
-        <h1>
-          {t('sign_in.sign_in_to_join')}
-        </h1>
+        <h1>{t('sign_in.sign_in_to_join')}</h1>
       </div>
-      {auth.error &&
+      {auth.error && (
         <Alert>
-          {auth.error.translation_key ? t(`error.${auth.error.translation_key}`) : auth.error.toString()}
-        </Alert>}
+          {auth.error.translation_key
+            ? t(`error.${auth.error.translation_key}`)
+            : auth.error.toString()}
+        </Alert>
+      )}
       <div>
         <div className={`${styles.socialConnections} social-connections`}>
           <Button cStyle="facebook" onClick={fetchSignInFacebook} full>
@@ -30,9 +36,7 @@ const SignInContent = ({
           </Button>
         </div>
         <div className={styles.separator}>
-          <h1>
-            {t('sign_in.or')}
-          </h1>
+          <h1>{t('sign_in.or')}</h1>
         </div>
         <form onSubmit={handleSignIn}>
           <TextField
@@ -40,7 +44,7 @@ const SignInContent = ({
             type="email"
             label={t('sign_in.email')}
             value={formData.email}
-            style={{fontSize: 16}}
+            style={{ fontSize: 16 }}
             onChange={handleChange}
           />
           <TextField
@@ -48,12 +52,12 @@ const SignInContent = ({
             type="password"
             label={t('sign_in.password')}
             value={formData.password}
-            style={{fontSize: 16}}
+            style={{ fontSize: 16 }}
             onChange={handleChange}
           />
           <div className={styles.action}>
-            {!auth.isLoading
-              ? <Button
+            {!auth.isLoading ? (
+              <Button
                 id="coralLogInButton"
                 type="submit"
                 cStyle="black"
@@ -62,7 +66,9 @@ const SignInContent = ({
               >
                 {t('sign_in.sign_in')}
               </Button>
-              : <Spinner />}
+            ) : (
+              <Spinner />
+            )}
           </div>
         </form>
       </div>
@@ -87,7 +93,7 @@ SignInContent.propTypes = {
   auth: PropTypes.shape({
     isLoading: PropTypes.bool.isRequired,
     error: PropTypes.string,
-    emailVerificationFailure: PropTypes.bool
+    emailVerificationFailure: PropTypes.bool,
   }).isRequired,
   fetchSignInFacebook: PropTypes.func.isRequired,
   handleSignIn: PropTypes.func.isRequired,
diff --git a/plugins/talk-plugin-auth/client/components/SignUpContent.js b/plugins/talk-plugin-auth/client/components/SignUpContent.js
index ff90a7fd8..845fe502c 100644
--- a/plugins/talk-plugin-auth/client/components/SignUpContent.js
+++ b/plugins/talk-plugin-auth/client/components/SignUpContent.js
@@ -1,10 +1,15 @@
 import styles from './styles.css';
 import React from 'react';
-import {Button, TextField, Spinner, Success, Alert} from 'plugin-api/beta/client/components/ui';
+import {
+  Button,
+  TextField,
+  Spinner,
+  Success,
+  Alert,
+} from 'plugin-api/beta/client/components/ui';
 import t from 'coral-framework/services/i18n';
 
 class SignUpContent extends React.Component {
-
   componentWillReceiveProps(next) {
     if (
       !this.props.emailVerificationEnabled &&
@@ -27,19 +32,17 @@ class SignUpContent extends React.Component {
       showErrors,
       changeView,
       handleSignUp,
-      fetchSignUpFacebook
+      fetchSignUpFacebook,
     } = this.props;
 
     return (
       <div>
         <div className={styles.header}>
-          <h1>
-            {t('sign_in.sign_up')}
-          </h1>
+          <h1>{t('sign_in.sign_up')}</h1>
         </div>
 
         {auth.error && <Alert>{auth.error}</Alert>}
-        {!auth.successSignUp &&
+        {!auth.successSignUp && (
           <div>
             <div className={styles.socialConnections}>
               <Button cStyle="facebook" onClick={fetchSignUpFacebook} full>
@@ -47,9 +50,7 @@ class SignUpContent extends React.Component {
               </Button>
             </div>
             <div className={styles.separator}>
-              <h1>
-                {t('sign_in.or')}
-              </h1>
+              <h1>{t('sign_in.or')}</h1>
             </div>
             <form onSubmit={handleSignUp}>
               <TextField
@@ -57,7 +58,7 @@ class SignUpContent extends React.Component {
                 type="email"
                 label={t('sign_in.email')}
                 value={formData.email}
-                style={{fontSize: 16}}
+                style={{ fontSize: 16 }}
                 showErrors={showErrors}
                 errorMsg={errors.email}
                 onChange={handleChange}
@@ -68,7 +69,7 @@ class SignUpContent extends React.Component {
                 label={t('sign_in.username')}
                 value={formData.username}
                 showErrors={showErrors}
-                style={{fontSize: 16}}
+                style={{ fontSize: 16 }}
                 errorMsg={errors.username}
                 onChange={handleChange}
               />
@@ -78,21 +79,23 @@ class SignUpContent extends React.Component {
                 label={t('sign_in.password')}
                 value={formData.password}
                 showErrors={showErrors}
-                style={{fontSize: 16}}
+                style={{ fontSize: 16 }}
                 errorMsg={errors.password}
                 onChange={handleChange}
                 minLength="8"
               />
-              {errors.password &&
+              {errors.password && (
                 <span className={styles.hint}>
-                  {' '}Password must be at least 8 characters.{' '}
-                </span>}
+                  {' '}
+                  Password must be at least 8 characters.{' '}
+                </span>
+              )}
               <TextField
                 id="confirmPassword"
                 type="password"
                 label={t('sign_in.confirm_password')}
                 value={formData.confirmPassword}
-                style={{fontSize: 16}}
+                style={{ fontSize: 16 }}
                 showErrors={showErrors}
                 errorMsg={errors.confirmPassword}
                 onChange={handleChange}
@@ -111,23 +114,24 @@ class SignUpContent extends React.Component {
                 {auth.isLoading && <Spinner />}
               </div>
             </form>
-          </div>}
-        {auth.successSignUp &&
+          </div>
+        )}
+        {auth.successSignUp && (
           <div>
             <Success />
-            {emailVerificationEnabled &&
+            {emailVerificationEnabled && (
               <p>
                 {t('sign_in.verify_email')}
                 <br />
                 <br />
                 {t('sign_in.verify_email2')}
-              </p>}
-          </div>}
+              </p>
+            )}
+          </div>
+        )}
         <div className={styles.footer}>
-          {t('sign_in.already_have_an_account')} <a
-            id="coralSignInViewTrigger"
-            onClick={() => changeView('SIGNIN')}
-          >
+          {t('sign_in.already_have_an_account')}{' '}
+          <a id="coralSignInViewTrigger" onClick={() => changeView('SIGNIN')}>
             {t('sign_in.sign_in')}
           </a>
         </div>
diff --git a/plugins/talk-plugin-auth/client/components/UserBox.js b/plugins/talk-plugin-auth/client/components/UserBox.js
index eea8e7690..d601ace74 100644
--- a/plugins/talk-plugin-auth/client/components/UserBox.js
+++ b/plugins/talk-plugin-auth/client/components/UserBox.js
@@ -1,32 +1,34 @@
 import React from 'react';
 import styles from './styles.css';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import t from 'coral-framework/services/i18n';
-import {logout} from 'coral-embed-stream/src/actions/auth';
+import { logout } from 'coral-embed-stream/src/actions/auth';
 
-const UserBox = ({loggedIn, user, logout, onShowProfile}) => (
+const UserBox = ({ loggedIn, user, logout, onShowProfile }) => (
   <div>
-    {
-      loggedIn ? (
-        <div className={`${styles.userBox} talk-stream-auth-userbox`}>
-          <span className={styles.userBoxLoggedIn}>{t('sign_in.logged_in_as')}</span>
-          <a onClick={onShowProfile}>{user.username}</a>. {t('sign_in.not_you')}
-          <a className={`${styles.logout} talk-stream-userbox-logout`} onClick={() => logout()}>
-            {t('sign_in.logout')}
-          </a>
-        </div>
-      ) : null
-    }
+    {loggedIn ? (
+      <div className={`${styles.userBox} talk-stream-auth-userbox`}>
+        <span className={styles.userBoxLoggedIn}>
+          {t('sign_in.logged_in_as')}
+        </span>
+        <a onClick={onShowProfile}>{user.username}</a>. {t('sign_in.not_you')}
+        <a
+          className={`${styles.logout} talk-stream-userbox-logout`}
+          onClick={() => logout()}
+        >
+          {t('sign_in.logout')}
+        </a>
+      </div>
+    ) : null}
   </div>
 );
 
-const mapStateToProps = ({auth}) => ({
+const mapStateToProps = ({ auth }) => ({
   loggedIn: auth.loggedIn,
-  user: auth.user
+  user: auth.user,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({logout}, dispatch);
+const mapDispatchToProps = dispatch => bindActionCreators({ logout }, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(UserBox);
diff --git a/plugins/talk-plugin-auth/client/index.js b/plugins/talk-plugin-auth/client/index.js
index 44221652f..12aa8ccd5 100644
--- a/plugins/talk-plugin-auth/client/index.js
+++ b/plugins/talk-plugin-auth/client/index.js
@@ -8,7 +8,6 @@ export default {
   translations,
   slots: {
     stream: [UserBox, SignInButton, ChangeUserNameContainer],
-    login: [SignInContainer]
-  }
+    login: [SignInContainer],
+  },
 };
-
diff --git a/plugins/talk-plugin-auth/index.js b/plugins/talk-plugin-auth/index.js
index 85dfb349b..f053ebf79 100644
--- a/plugins/talk-plugin-auth/index.js
+++ b/plugins/talk-plugin-auth/index.js
@@ -1,2 +1 @@
 module.exports = {};
-
diff --git a/plugins/talk-plugin-author-menu/client/actions.js b/plugins/talk-plugin-author-menu/client/actions.js
index 960e66bb4..97fcc8bf5 100644
--- a/plugins/talk-plugin-author-menu/client/actions.js
+++ b/plugins/talk-plugin-author-menu/client/actions.js
@@ -1,6 +1,11 @@
-import {SET_CONTENT_SLOT, RESET_CONTENT_SLOT, OPEN_MENU, CLOSE_MENU} from './constants';
+import {
+  SET_CONTENT_SLOT,
+  RESET_CONTENT_SLOT,
+  OPEN_MENU,
+  CLOSE_MENU,
+} from './constants';
 
-export const setContentSlot = (slot) => ({
+export const setContentSlot = slot => ({
   type: SET_CONTENT_SLOT,
   slot,
 });
@@ -9,7 +14,7 @@ export const resetContentSlot = () => ({
   type: RESET_CONTENT_SLOT,
 });
 
-export const openMenu = (id) => ({
+export const openMenu = id => ({
   type: OPEN_MENU,
   id,
 });
diff --git a/plugins/talk-plugin-author-menu/client/components/AuthorName.js b/plugins/talk-plugin-author-menu/client/components/AuthorName.js
index 191f93490..5d6e835e3 100644
--- a/plugins/talk-plugin-author-menu/client/components/AuthorName.js
+++ b/plugins/talk-plugin-author-menu/client/components/AuthorName.js
@@ -1,10 +1,19 @@
 import React from 'react';
 import Menu from './Menu';
 import styles from './AuthorName.css';
-import {ClickOutside} from 'plugin-api/beta/client/components';
+import { ClickOutside } from 'plugin-api/beta/client/components';
 import cn from 'classnames';
 
-export default ({data, root, asset, comment, contentSlot, menuVisible, toggleMenu, hideMenu}) => {
+export default ({
+  data,
+  root,
+  asset,
+  comment,
+  contentSlot,
+  menuVisible,
+  toggleMenu,
+  hideMenu,
+}) => {
   return (
     <ClickOutside onClickOutside={hideMenu}>
       <div className={cn(styles.root, 'talk-plugin-author-menu')}>
@@ -12,11 +21,9 @@ export default ({data, root, asset, comment, contentSlot, menuVisible, toggleMen
           className={cn(styles.button, 'talk-plugin-author-menu-button')}
           onClick={toggleMenu}
         >
-          <span className={styles.name}>
-            {comment.user.username}
-          </span>
+          <span className={styles.name}>{comment.user.username}</span>
         </button>
-        {menuVisible &&
+        {menuVisible && (
           <Menu
             data={data}
             root={root}
@@ -24,7 +31,7 @@ export default ({data, root, asset, comment, contentSlot, menuVisible, toggleMen
             comment={comment}
             contentSlot={contentSlot}
           />
-        }
+        )}
       </div>
     </ClickOutside>
   );
diff --git a/plugins/talk-plugin-author-menu/client/components/Menu.js b/plugins/talk-plugin-author-menu/client/components/Menu.js
index 0c4db07d9..e041720eb 100644
--- a/plugins/talk-plugin-author-menu/client/components/Menu.js
+++ b/plugins/talk-plugin-author-menu/client/components/Menu.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import styles from './Menu.css';
-import {Slot} from 'plugin-api/beta/client/components';
+import { Slot } from 'plugin-api/beta/client/components';
 import cn from 'classnames';
 
-export default ({data, root, asset, comment, contentSlot}) => {
+export default ({ data, root, asset, comment, contentSlot }) => {
   if (contentSlot) {
     return (
       <div className={cn(styles.menu, 'talk-plugin-author-menu-popup')}>
         <Slot
           fill={contentSlot}
           data={data}
-          queryData={{asset, root, comment}}
+          queryData={{ asset, root, comment }}
         />
       </div>
     );
@@ -22,13 +22,13 @@ export default ({data, root, asset, comment, contentSlot}) => {
         className={cn('talk-plugin-author-menu-infos')}
         fill={'authorMenuInfos'}
         data={data}
-        queryData={{asset, root, comment}}
+        queryData={{ asset, root, comment }}
       />
       <Slot
         className={cn(styles.actions, 'talk-plugin-author-menu-actions')}
         fill={'authorMenuActions'}
         data={data}
-        queryData={{asset, root, comment}}
+        queryData={{ asset, root, comment }}
       />
     </div>
   );
diff --git a/plugins/talk-plugin-author-menu/client/constants.js b/plugins/talk-plugin-author-menu/client/constants.js
index 1d14e94d4..4bcf5007a 100644
--- a/plugins/talk-plugin-author-menu/client/constants.js
+++ b/plugins/talk-plugin-author-menu/client/constants.js
@@ -4,4 +4,3 @@ export const SET_CONTENT_SLOT = `${prefix}_SET_CONTENT_SLOT`;
 export const RESET_CONTENT_SLOT = `${prefix}_RESET_CONTENT_SLOT`;
 export const OPEN_MENU = `${prefix}_OPEN_MENU`;
 export const CLOSE_MENU = `${prefix}_CLOSE_MENU`;
-
diff --git a/plugins/talk-plugin-author-menu/client/containers/AuthorName.js b/plugins/talk-plugin-author-menu/client/containers/AuthorName.js
index 78663b603..b06dbf1bb 100644
--- a/plugins/talk-plugin-author-menu/client/containers/AuthorName.js
+++ b/plugins/talk-plugin-author-menu/client/containers/AuthorName.js
@@ -1,15 +1,21 @@
 import React from 'react';
-import {connect, withFragments} from 'plugin-api/beta/client/hocs';
-import {bindActionCreators} from 'redux';
+import { connect, withFragments } from 'plugin-api/beta/client/hocs';
+import { bindActionCreators } from 'redux';
 import AuthorName from '../components/AuthorName';
-import {setContentSlot, resetContentSlot, openMenu, closeMenu} from '../actions';
-import {compose, gql} from 'react-apollo';
-import {getSlotFragmentSpreads, getShallowChanges} from 'plugin-api/beta/client/utils';
+import {
+  setContentSlot,
+  resetContentSlot,
+  openMenu,
+  closeMenu,
+} from '../actions';
+import { compose, gql } from 'react-apollo';
+import {
+  getSlotFragmentSpreads,
+  getShallowChanges,
+} from 'plugin-api/beta/client/utils';
 
 class AuthorNameContainer extends React.Component {
-
   shouldComponentUpdate(nextProps) {
-
     // Specifically handle `showMenuForComment` if it is the only change.
     const changes = getShallowChanges(this.props, nextProps);
     if (changes.length === 1 && changes[0] === 'showMenuForComment') {
@@ -32,45 +38,47 @@ class AuthorNameContainer extends React.Component {
     } else {
       this.props.openMenu(this.props.comment.id);
     }
-  }
+  };
 
   hideMenu = () => {
     if (this.props.showMenuForComment === this.props.comment.id) {
       this.props.closeMenu();
     }
-  }
+  };
 
   render() {
-    return <AuthorName
-      data={this.props.data}
-      root={this.props.root}
-      asset={this.props.asset}
-      comment={this.props.comment}
-      contentSlot={this.props.contentSlot}
-      menuVisible={this.props.showMenuForComment === this.props.comment.id}
-      toggleMenu={this.toggleMenu}
-      hideMenu={this.hideMenu}
-    />;
+    return (
+      <AuthorName
+        data={this.props.data}
+        root={this.props.root}
+        asset={this.props.asset}
+        comment={this.props.comment}
+        contentSlot={this.props.contentSlot}
+        menuVisible={this.props.showMenuForComment === this.props.comment.id}
+        toggleMenu={this.toggleMenu}
+        hideMenu={this.hideMenu}
+      />
+    );
   }
 }
 
-const slots = [
-  'authorMenuInfos',
-  'authorMenuActions',
-];
+const slots = ['authorMenuInfos', 'authorMenuActions'];
 
-const mapStateToProps = ({talkPluginAuthorMenu: state}) => ({
+const mapStateToProps = ({ talkPluginAuthorMenu: state }) => ({
   contentSlot: state.contentSlot,
   showMenuForComment: state.showMenuForComment,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    setContentSlot,
-    resetContentSlot,
-    openMenu,
-    closeMenu,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      setContentSlot,
+      resetContentSlot,
+      openMenu,
+      closeMenu,
+    },
+    dispatch
+  );
 
 const withAuthorNameFragments = withFragments({
   root: gql`
@@ -96,7 +104,7 @@ const withAuthorNameFragments = withFragments({
 
 const enhance = compose(
   connect(mapStateToProps, mapDispatchToProps),
-  withAuthorNameFragments,
+  withAuthorNameFragments
 );
 
 export default enhance(AuthorNameContainer);
diff --git a/plugins/talk-plugin-author-menu/client/index.js b/plugins/talk-plugin-author-menu/client/index.js
index a98a15822..ed3c684b1 100644
--- a/plugins/talk-plugin-author-menu/client/index.js
+++ b/plugins/talk-plugin-author-menu/client/index.js
@@ -5,7 +5,7 @@ import translations from './translations.yml';
 export default {
   reducer,
   slots: {
-    commentAuthorName: [AuthorName]
+    commentAuthorName: [AuthorName],
   },
-  translations
+  translations,
 };
diff --git a/plugins/talk-plugin-author-menu/client/reducer.js b/plugins/talk-plugin-author-menu/client/reducer.js
index 822c2a6a8..e2c879ec8 100644
--- a/plugins/talk-plugin-author-menu/client/reducer.js
+++ b/plugins/talk-plugin-author-menu/client/reducer.js
@@ -1,4 +1,9 @@
-import {SET_CONTENT_SLOT, RESET_CONTENT_SLOT, OPEN_MENU, CLOSE_MENU} from './constants';
+import {
+  SET_CONTENT_SLOT,
+  RESET_CONTENT_SLOT,
+  OPEN_MENU,
+  CLOSE_MENU,
+} from './constants';
 
 const initialState = {
   contentSlot: null,
@@ -7,28 +12,28 @@ const initialState = {
 
 export default function reducer(state = initialState, action) {
   switch (action.type) {
-  case SET_CONTENT_SLOT:
-    return {
-      ...state,
-      contentSlot: action.slot,
-    };
-  case RESET_CONTENT_SLOT:
-    return {
-      ...state,
-      contentSlot: initialState.contentSlot,
-    };
-  case OPEN_MENU:
-    return {
-      ...state,
-      showMenuForComment: action.id,
-    };
-  case CLOSE_MENU:
-    return {
-      ...state,
-      showMenuForComment: null,
-      contentSlot: null,
-    };
-  default :
-    return state;
+    case SET_CONTENT_SLOT:
+      return {
+        ...state,
+        contentSlot: action.slot,
+      };
+    case RESET_CONTENT_SLOT:
+      return {
+        ...state,
+        contentSlot: initialState.contentSlot,
+      };
+    case OPEN_MENU:
+      return {
+        ...state,
+        showMenuForComment: action.id,
+      };
+    case CLOSE_MENU:
+      return {
+        ...state,
+        showMenuForComment: null,
+        contentSlot: null,
+      };
+    default:
+      return state;
   }
 }
diff --git a/plugins/talk-plugin-comment-content/client/components/CommentContent.js b/plugins/talk-plugin-comment-content/client/components/CommentContent.js
index 8819d63ce..f21c888b7 100644
--- a/plugins/talk-plugin-comment-content/client/components/CommentContent.js
+++ b/plugins/talk-plugin-comment-content/client/components/CommentContent.js
@@ -3,22 +3,22 @@ import Linkify from 'react-linkify';
 
 const name = 'talk-plugin-comment-content';
 
-const CommentContent = ({comment}) => {
+const CommentContent = ({ comment }) => {
   const textbreaks = comment.body.split('\n');
-  return <span className={`${name}-text`}>
-    {
-      textbreaks.map((line, i) => {
+  return (
+    <span className={`${name}-text`}>
+      {textbreaks.map((line, i) => {
         return (
           <span key={i} className={`${name}-line`}>
-            <Linkify properties={{target: '_blank'}}>
-              {line.trim()}
-            </Linkify>
-            {i !== textbreaks.length - 1 && <br className={`${name}-linebreak`}/>}
+            <Linkify properties={{ target: '_blank' }}>{line.trim()}</Linkify>
+            {i !== textbreaks.length - 1 && (
+              <br className={`${name}-linebreak`} />
+            )}
           </span>
         );
-      })
-    }
-  </span>;
+      })}
+    </span>
+  );
 };
 
 export default CommentContent;
diff --git a/plugins/talk-plugin-comment-content/client/containers/CommentContent.js b/plugins/talk-plugin-comment-content/client/containers/CommentContent.js
index 2c9b36aa9..c5a830e01 100644
--- a/plugins/talk-plugin-comment-content/client/containers/CommentContent.js
+++ b/plugins/talk-plugin-comment-content/client/containers/CommentContent.js
@@ -1,10 +1,11 @@
-import {gql} from 'react-apollo';
-import {withFragments} from 'plugin-api/beta/client/hocs';
+import { gql } from 'react-apollo';
+import { withFragments } from 'plugin-api/beta/client/hocs';
 import CommentContent from '../components/CommentContent';
 
 export default withFragments({
   comment: gql`
     fragment TalkPluginCommentContent_comment on Comment {
       body
-    }`
+    }
+  `,
 })(CommentContent);
diff --git a/plugins/talk-plugin-comment-content/client/index.js b/plugins/talk-plugin-comment-content/client/index.js
index 06b6dee84..8abd9d93c 100644
--- a/plugins/talk-plugin-comment-content/client/index.js
+++ b/plugins/talk-plugin-comment-content/client/index.js
@@ -2,6 +2,6 @@ import CommentContent from './containers/CommentContent';
 
 export default {
   slots: {
-    commentContent: [CommentContent]
-  }
+    commentContent: [CommentContent],
+  },
 };
diff --git a/plugins/talk-plugin-deep-reply-count/index.js b/plugins/talk-plugin-deep-reply-count/index.js
index f46386c62..cec411114 100644
--- a/plugins/talk-plugin-deep-reply-count/index.js
+++ b/plugins/talk-plugin-deep-reply-count/index.js
@@ -3,25 +3,28 @@ const DataLoader = require('dataloader');
 
 const CommentModel = require('../../models/comment');
 
-console.warn('Enabling the talk-plugin-deep-reply-count plugin introduces a signifigant performance impact on larger sites, use with care.');
+console.warn(
+  'Enabling the talk-plugin-deep-reply-count plugin introduces a signifigant performance impact on larger sites, use with care.'
+);
 
 // genDeepCommentCount will return the deep comment count for a given parent id.
 const genDeepCommentCount = async (context, parent_ids) => {
-
   // Get all the replies to the parent comments.
-  const replies = await CommentModel
-    .find({
+  const replies = await CommentModel.find(
+    {
       parent_id: {
         $in: _.uniq(parent_ids),
       },
-    }, {
+    },
+    {
       id: 1,
       reply_count: 1,
       parent_id: 1,
-    });
+    }
+  );
 
   // Get all the replies that have comments on them.
-  const commentedOnReplies = replies.filter(({reply_count}) => {
+  const commentedOnReplies = replies.filter(({ reply_count }) => {
     return reply_count && reply_count > 0;
   });
 
@@ -29,27 +32,34 @@ const genDeepCommentCount = async (context, parent_ids) => {
 
   // And if there were any..
   if (commentedOnReplies.length > 0) {
-
     // Load the reply count for each of them.
-    deepReplyCount = await context.loaders.Comments.getDeepCount.loadMany(_.uniq(commentedOnReplies.map(({id}) => {
-      return id;
-    })));
+    deepReplyCount = await context.loaders.Comments.getDeepCount.loadMany(
+      _.uniq(
+        commentedOnReplies.map(({ id }) => {
+          return id;
+        })
+      )
+    );
   }
 
   // Get all the direct replies to the parent comments.
   const allDirectReplies = _.groupBy(replies, 'parent_id');
 
   // Collect all the ancestor replies.
-  const allAncestorReplies = _.groupBy(_.zip(commentedOnReplies, deepReplyCount), ([{parent_id}]) => {
-    return parent_id;
-  });
+  const allAncestorReplies = _.groupBy(
+    _.zip(commentedOnReplies, deepReplyCount),
+    ([{ parent_id }]) => {
+      return parent_id;
+    }
+  );
 
   // Return the replies in an array matching that of the input parent_ids array.
-  return parent_ids.map((parent_id) => {
-
+  return parent_ids.map(parent_id => {
     // Get the direct replies to this comment.
-    const directReplies = parent_id in allDirectReplies ? allDirectReplies[parent_id] : [];
-    const ancestorReplies = parent_id in allAncestorReplies ? allAncestorReplies[parent_id] : [];
+    const directReplies =
+      parent_id in allDirectReplies ? allDirectReplies[parent_id] : [];
+    const ancestorReplies =
+      parent_id in allAncestorReplies ? allAncestorReplies[parent_id] : [];
 
     // Reduce this array.
     return ancestorReplies.reduce((acc, [, count]) => {
@@ -66,16 +76,18 @@ module.exports = {
       deepReplyCount: Int
     }
   `,
-  loaders: (context) => ({
+  loaders: context => ({
     Comments: {
-      getDeepCount: new DataLoader((parent_ids) => genDeepCommentCount(context, parent_ids)),
-    }
+      getDeepCount: new DataLoader(parent_ids =>
+        genDeepCommentCount(context, parent_ids)
+      ),
+    },
   }),
   resolvers: {
     Comment: {
-      deepReplyCount({id}, args, {loaders: {Comments}}) {
+      deepReplyCount({ id }, args, { loaders: { Comments } }) {
         return Comments.getDeepCount.load(id);
-      }
-    }
-  }
+      },
+    },
+  },
 };
diff --git a/plugins/talk-plugin-facebook-auth/index.js b/plugins/talk-plugin-facebook-auth/index.js
index 3e7c61452..b9694613e 100644
--- a/plugins/talk-plugin-facebook-auth/index.js
+++ b/plugins/talk-plugin-facebook-auth/index.js
@@ -3,5 +3,5 @@ const router = require('./server/router');
 
 module.exports = {
   passport,
-  router
+  router,
 };
diff --git a/plugins/talk-plugin-facebook-auth/server/passport.js b/plugins/talk-plugin-facebook-auth/server/passport.js
index 14849b7da..477ed48a0 100644
--- a/plugins/talk-plugin-facebook-auth/server/passport.js
+++ b/plugins/talk-plugin-facebook-auth/server/passport.js
@@ -1,34 +1,42 @@
 const FacebookStrategy = require('passport-facebook').Strategy;
 const UsersService = require('services/users');
-const {ValidateUserLogin} = require('services/passport');
-let {
-  ROOT_URL
-} = require('config');
+const { ValidateUserLogin } = require('services/passport');
+let { ROOT_URL } = require('config');
 
 if (ROOT_URL[ROOT_URL.length - 1] !== '/') {
   ROOT_URL += '/';
 }
 
-module.exports = (passport) => {
-  if (process.env.TALK_FACEBOOK_APP_ID && process.env.TALK_FACEBOOK_APP_SECRET && process.env.TALK_ROOT_URL) {
-    passport.use(new FacebookStrategy({
-      clientID: process.env.TALK_FACEBOOK_APP_ID,
-      clientSecret: process.env.TALK_FACEBOOK_APP_SECRET,
-      callbackURL: `${ROOT_URL}api/v1/auth/facebook/callback`,
-      passReqToCallback: true,
-      profileFields: ['id', 'displayName', 'picture.type(large)']
-    }, async (req, accessToken, refreshToken, profile, done) => {
+module.exports = passport => {
+  if (
+    process.env.TALK_FACEBOOK_APP_ID &&
+    process.env.TALK_FACEBOOK_APP_SECRET &&
+    process.env.TALK_ROOT_URL
+  ) {
+    passport.use(
+      new FacebookStrategy(
+        {
+          clientID: process.env.TALK_FACEBOOK_APP_ID,
+          clientSecret: process.env.TALK_FACEBOOK_APP_SECRET,
+          callbackURL: `${ROOT_URL}api/v1/auth/facebook/callback`,
+          passReqToCallback: true,
+          profileFields: ['id', 'displayName', 'picture.type(large)'],
+        },
+        async (req, accessToken, refreshToken, profile, done) => {
+          let user;
+          try {
+            user = await UsersService.findOrCreateExternalUser(profile);
+          } catch (err) {
+            return done(err);
+          }
 
-      let user;
-      try {
-        user = await UsersService.findOrCreateExternalUser(profile);
-      } catch (err) {
-        return done(err);
-      }
-
-      return ValidateUserLogin(profile, user, done);
-    }));
+          return ValidateUserLogin(profile, user, done);
+        }
+      )
+    );
   } else if (process.env.NODE_ENV !== 'test') {
-    throw new Error('Facebook cannot be enabled, missing one of TALK_FACEBOOK_APP_ID, TALK_FACEBOOK_APP_SECRET, TALK_ROOT_URL');
+    throw new Error(
+      'Facebook cannot be enabled, missing one of TALK_FACEBOOK_APP_ID, TALK_FACEBOOK_APP_SECRET, TALK_ROOT_URL'
+    );
   }
 };
diff --git a/plugins/talk-plugin-facebook-auth/server/router.js b/plugins/talk-plugin-facebook-auth/server/router.js
index 56fcd2ab2..53b6c7e56 100644
--- a/plugins/talk-plugin-facebook-auth/server/router.js
+++ b/plugins/talk-plugin-facebook-auth/server/router.js
@@ -1,20 +1,29 @@
-module.exports = (router) => {
-
-  const {passport, HandleAuthPopupCallback} = require('services/passport');
+module.exports = router => {
+  const { passport, HandleAuthPopupCallback } = require('services/passport');
 
   /**
    * Facebook auth endpoint, this will redirect the user immediatly to facebook
    * for authorization.
    */
-  router.get('/api/v1/auth/facebook', passport.authenticate('facebook', {display: 'popup', authType: 'rerequest', scope: ['public_profile']}));
+  router.get(
+    '/api/v1/auth/facebook',
+    passport.authenticate('facebook', {
+      display: 'popup',
+      authType: 'rerequest',
+      scope: ['public_profile'],
+    })
+  );
 
   /**
    * Facebook callback endpoint, this will send the user a html page designed to
    * send back the user credentials upon sucesfull login.
    */
   router.get('/api/v1/auth/facebook/callback', (req, res, next) => {
-
     // Perform the facebook login flow and pass the data back through the opener.
-    passport.authenticate('facebook', {session: false}, HandleAuthPopupCallback(req, res, next))(req, res, next);
+    passport.authenticate(
+      'facebook',
+      { session: false },
+      HandleAuthPopupCallback(req, res, next)
+    )(req, res, next);
   });
 };
diff --git a/plugins/talk-plugin-featured-comments/client/actions.js b/plugins/talk-plugin-featured-comments/client/actions.js
index e16f06f48..00a3e9811 100644
--- a/plugins/talk-plugin-featured-comments/client/actions.js
+++ b/plugins/talk-plugin-featured-comments/client/actions.js
@@ -1,4 +1,4 @@
-import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants';
+import { OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG } from './constants';
 
 export const openFeaturedDialog = (comment, asset) => ({
   type: OPEN_FEATURED_DIALOG,
diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.js b/plugins/talk-plugin-featured-comments/client/components/Comment.js
index 0c66bc103..ce4aa7a5c 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Comment.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Comment.js
@@ -1,24 +1,27 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './Comment.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Slot, CommentAuthorName, CommentTimestamp, CommentContent} from 'plugin-api/beta/client/components';
-import {Icon} from 'plugin-api/beta/client/components/ui';
-import {pluginName} from '../../package.json';
+import { t } from 'plugin-api/beta/client/services';
+import {
+  Slot,
+  CommentAuthorName,
+  CommentTimestamp,
+  CommentContent,
+} from 'plugin-api/beta/client/components';
+import { Icon } from 'plugin-api/beta/client/components/ui';
+import { pluginName } from '../../package.json';
 import FeaturedButton from '../containers/FeaturedButton';
 
 class Comment extends React.Component {
-
   viewComment = () => {
     this.props.viewComment(this.props.comment.id);
-  }
+  };
 
   render() {
-    const {comment, asset, root, data} = this.props;
-    const queryData = {comment, asset, root};
+    const { comment, asset, root, data } = this.props;
+    const queryData = { comment, asset, root };
     return (
       <div className={cn(styles.root, `${pluginName}-comment`)}>
-
         <Slot
           component={'blockquote'}
           className={cn(styles.quote, `${pluginName}-comment-body`)}
@@ -29,7 +32,6 @@ class Comment extends React.Component {
         />
 
         <div className={cn(`${pluginName}-comment-username-box`)}>
-
           <Slot
             className={cn(styles.username, `${pluginName}-comment-username`)}
             fill="commentAuthorName"
@@ -51,8 +53,13 @@ class Comment extends React.Component {
         </div>
 
         <footer className={cn(styles.footer, `${pluginName}-comment-footer`)}>
-          <div className={cn('talk-embed-stream-comment-actions-container-left', styles.reactionsContainer, `${pluginName}-comment-reactions`)}>
-
+          <div
+            className={cn(
+              'talk-embed-stream-comment-actions-container-left',
+              styles.reactionsContainer,
+              `${pluginName}-comment-reactions`
+            )}
+          >
             <Slot
               fill="commentReactions"
               root={root}
@@ -69,9 +76,21 @@ class Comment extends React.Component {
               asset={asset}
             />
           </div>
-          <div className={cn('talk-embed-stream-comment-actions-container-right', styles.actionsContainer, `${pluginName}-comment-actions`)}>
-            <button className={cn(styles.goTo, `${pluginName}-comment-go-to`)} onClick={this.viewComment}>
-              <Icon name="forum" className={styles.repliesIcon} /> {comment.replyCount} | {t('talk-plugin-featured-comments.go_to_conversation')} <Icon name="keyboard_arrow_right" className={styles.goToIcon} />
+          <div
+            className={cn(
+              'talk-embed-stream-comment-actions-container-right',
+              styles.actionsContainer,
+              `${pluginName}-comment-actions`
+            )}
+          >
+            <button
+              className={cn(styles.goTo, `${pluginName}-comment-go-to`)}
+              onClick={this.viewComment}
+            >
+              <Icon name="forum" className={styles.repliesIcon} />{' '}
+              {comment.replyCount} |{' '}
+              {t('talk-plugin-featured-comments.go_to_conversation')}{' '}
+              <Icon name="keyboard_arrow_right" className={styles.goToIcon} />
             </button>
           </div>
         </footer>
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js
index 0555fbf81..f3bd0e20d 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedButton.js
@@ -1,25 +1,29 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './FeaturedButton.css';
-import {pluginName} from '../../package.json';
-import {can} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { pluginName } from '../../package.json';
+import { can } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 
-const FeaturedButton = (props) => {
-  const {alreadyTagged, deleteTag, postTag, user} = props;
+const FeaturedButton = props => {
+  const { alreadyTagged, deleteTag, postTag, user } = props;
 
   return can(user, 'MODERATE_COMMENTS') ? (
     <button
-      className={cn([`${pluginName}-tag-button`, styles.button, {[styles.featured] : alreadyTagged}])}
-      onClick={alreadyTagged ? deleteTag : postTag} >
-
-      {alreadyTagged ?
-        <Icon name="star" className={styles.icon} /> :
+      className={cn([
+        `${pluginName}-tag-button`,
+        styles.button,
+        { [styles.featured]: alreadyTagged },
+      ])}
+      onClick={alreadyTagged ? deleteTag : postTag}
+    >
+      {alreadyTagged ? (
+        <Icon name="star" className={styles.icon} />
+      ) : (
         <Icon name="star_border" className={styles.icon} />
-      }
-
+      )}
     </button>
-  ) : null ;
+  ) : null;
 };
 
 export default FeaturedButton;
diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
index 81c054ae8..e6ed46b10 100644
--- a/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
+++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedDialog.js
@@ -1,13 +1,16 @@
 import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
-import {Dialog} from 'coral-ui';
+import { Dialog } from 'coral-ui';
 import styles from './FeaturedDialog.css';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 import Button from 'coral-ui/components/Button';
 
-const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => {
-
+const FeaturedDialog = ({
+  showFeaturedDialog,
+  closeFeaturedDialog,
+  postTag,
+}) => {
   const onPerform = async () => {
     await postTag();
     await closeFeaturedDialog();
@@ -18,9 +21,14 @@ const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => {
       className={cn(styles.dialog, 'talk-featured-dialog')}
       id="talkFeaturedDialog"
       open={showFeaturedDialog}
-      onCancel={closeFeaturedDialog} >
-      <span className={styles.close} onClick={closeFeaturedDialog}>×</span>
-      <h2 className={styles.header}>{t('talk-plugin-featured-comments.feature_comment')}</h2>
+      onCancel={closeFeaturedDialog}
+    >
+      <span className={styles.close} onClick={closeFeaturedDialog}>
+        ×
+      </span>
+      <h2 className={styles.header}>
+        {t('talk-plugin-featured-comments.feature_comment')}
+      </h2>
       <div className={styles.content}>
         {t('talk-plugin-featured-comments.are_you_sure')}
       </div>
@@ -29,14 +37,16 @@ const FeaturedDialog = ({showFeaturedDialog, closeFeaturedDialog, postTag}) => {
           className={cn(styles.cancel, 'talk-featured-dialog-button-cancel')}
           cStyle="cancel"
           onClick={closeFeaturedDialog}
-          raised >
+          raised
+        >
           {t('talk-plugin-featured-comments.cancel')}
         </Button>
-        <Button 
+        <Button
           className={cn(styles.perform, 'talk-featured-dialog-button-confirm')}
           cStyle="black"
           onClick={onPerform}
-          raised >
+          raised
+        >
           {t('talk-plugin-featured-comments.yes_feature_comment')}
         </Button>
       </div>
diff --git a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
index 18db9a6c5..c971d1ca9 100644
--- a/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
+++ b/plugins/talk-plugin-featured-comments/client/components/InfoIcon.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import styles from './InfoIcon.css';
 import cn from 'classnames';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 
-export default ({hover}) => (
+export default ({ hover }) => (
   <Icon
     name="info_outline"
-    className={cn(styles.infoIcon, {[styles.on]: hover})}
+    className={cn(styles.infoIcon, { [styles.on]: hover })}
   />
 );
diff --git a/plugins/talk-plugin-featured-comments/client/components/LoadMore.js b/plugins/talk-plugin-featured-comments/client/components/LoadMore.js
index a168ed43a..9858811ad 100644
--- a/plugins/talk-plugin-featured-comments/client/components/LoadMore.js
+++ b/plugins/talk-plugin-featured-comments/client/components/LoadMore.js
@@ -1,18 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button} from 'coral-ui';
+import { Button } from 'coral-ui';
 import t from 'coral-framework/services/i18n';
 import cn from 'classnames';
 
 class LoadMore extends React.Component {
-  render () {
-    const {loadingState, loadMore} = this.props;
+  render() {
+    const { loadingState, loadMore } = this.props;
     const disabled = loadingState === 'loading';
     return (
-      <div className='talk-load-more'>
+      <div className="talk-load-more">
         <Button
           onClick={loadMore}
-          className={cn('talk-load-more-button', {[`talk-load-more-button-${loadingState}`]: loadingState})}
+          className={cn('talk-load-more-button', {
+            [`talk-load-more-button-${loadingState}`]: loadingState,
+          })}
           disabled={disabled}
         >
           {t('framework.view_more_comments')}
diff --git a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
index 8290ae8b6..84ea8ed8a 100644
--- a/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
+++ b/plugins/talk-plugin-featured-comments/client/components/ModActionButton.js
@@ -1,58 +1,62 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './ModActionButton.css';
-import {pluginName} from '../../package.json';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { pluginName } from '../../package.json';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 
 export class ModActionButton extends React.Component {
   constructor() {
     super();
 
     this.state = {
-      on: false
+      on: false,
     };
-
   }
 
-  handleMouseEnter = (e) => {
+  handleMouseEnter = e => {
     e.preventDefault();
     this.setState({
-      on: true
+      on: true,
     });
-  }
+  };
 
-  handleMouseLeave = (e) => {
+  handleMouseLeave = e => {
     e.preventDefault();
     this.setState({
-      on: false
+      on: false,
     });
-  }
+  };
 
   handleDeleteTag = () => {
     this.props.deleteTag();
     this.props.closeMenu();
-  }
+  };
 
   handlePostTag = () => {
     this.props.postTag();
     this.props.closeMenu();
-  }
+  };
 
   render() {
-    const {alreadyTagged} = this.props;
-    const {handleDeleteTag, handlePostTag} = this;
+    const { alreadyTagged } = this.props;
+    const { handleDeleteTag, handlePostTag } = this;
 
     return (
-      <button className={cn(`${pluginName}-tag-button`, styles.button, {[styles.featured] : alreadyTagged})}
+      <button
+        className={cn(`${pluginName}-tag-button`, styles.button, {
+          [styles.featured]: alreadyTagged,
+        })}
         onClick={alreadyTagged ? handleDeleteTag : handlePostTag}
         onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave} >
-
+        onMouseLeave={this.handleMouseLeave}
+      >
         {alreadyTagged ? (
           <span className={styles.approved}>
             <Icon name="star" className={styles.icon} />
-            {!this.state.on ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.un_feature')}
+            {!this.state.on
+              ? t('talk-plugin-featured-comments.featured')
+              : t('talk-plugin-featured-comments.un_feature')}
           </span>
         ) : (
           <span>
@@ -60,11 +64,9 @@ export class ModActionButton extends React.Component {
             {t('talk-plugin-featured-comments.feature')}
           </span>
         )}
-
       </button>
     );
   }
 }
 
 export default ModActionButton;
-
diff --git a/plugins/talk-plugin-featured-comments/client/components/ModTag.css b/plugins/talk-plugin-featured-comments/client/components/ModTag.css
index 683c16570..960985e0d 100644
--- a/plugins/talk-plugin-featured-comments/client/components/ModTag.css
+++ b/plugins/talk-plugin-featured-comments/client/components/ModTag.css
@@ -7,11 +7,11 @@
   padding: 0px 5px;
   border-radius: 2px;
   font-size: 12px;
-  height: 24px;
+  height: 26px;
   transition: background-color .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1);
   margin: 2px 0px;
   letter-spacing: 0.4px;
-
+  line-height: 25px;
 }
 
 .tag:hover {
@@ -38,5 +38,5 @@
 .tagIcon {
   margin-right: 5px;
   font-size: 15px;
-  vertical-align: text-bottom;
+  vertical-align: sub;
 }
diff --git a/plugins/talk-plugin-featured-comments/client/components/ModTag.js b/plugins/talk-plugin-featured-comments/client/components/ModTag.js
index 70f51dcbc..420ee9417 100644
--- a/plugins/talk-plugin-featured-comments/client/components/ModTag.js
+++ b/plugins/talk-plugin-featured-comments/client/components/ModTag.js
@@ -2,53 +2,60 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './ModTag.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 
 export default class ModTag extends React.Component {
   constructor() {
     super();
 
     this.state = {
-      on: false
+      on: false,
     };
-
   }
 
-  handleMouseEnter = (e) => {
+  handleMouseEnter = e => {
     e.preventDefault();
     this.setState({
-      on: true
+      on: true,
     });
-  }
+  };
 
-  handleMouseLeave = (e) => {
+  handleMouseLeave = e => {
     e.preventDefault();
     this.setState({
-      on: false
+      on: false,
     });
-  }
+  };
 
   openFeaturedDialog = (comment, asset) => {
     this.props.openFeaturedDialog(comment, asset);
-  }
+  };
 
   render() {
-    const {alreadyTagged, deleteTag, comment, asset} = this.props;
+    const { alreadyTagged, deleteTag, comment, asset } = this.props;
 
     return alreadyTagged ? (
-      <span className={cn(styles.tag, styles.featured)}
+      <span
+        className={cn(styles.tag, styles.featured)}
         onClick={deleteTag}
         onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave} >
+        onMouseLeave={this.handleMouseLeave}
+      >
         <Icon name="star_outline" className={cn(styles.tagIcon)} />
-        {!this.state.on ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.un_feature')}
+        {!this.state.on
+          ? t('talk-plugin-featured-comments.featured')
+          : t('talk-plugin-featured-comments.un_feature')}
       </span>
     ) : (
-      <span className={cn(styles.tag, {[styles.featured]: alreadyTagged})}
-        onClick={() => this.openFeaturedDialog(comment, asset)} >
+      <span
+        className={cn(styles.tag, { [styles.featured]: alreadyTagged })}
+        onClick={() => this.openFeaturedDialog(comment, asset)}
+      >
         <Icon name="star_outline" className={cn(styles.tagIcon)} />
-        {alreadyTagged ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.feature')}
+        {alreadyTagged
+          ? t('talk-plugin-featured-comments.featured')
+          : t('talk-plugin-featured-comments.feature')}
       </span>
     );
   }
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tab.js b/plugins/talk-plugin-featured-comments/client/components/Tab.js
index 804e7e99a..f6d3875f2 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tab.js
@@ -1,15 +1,17 @@
 import React from 'react';
-import {TabCount} from 'plugin-api/beta/client/components/ui';
+import { TabCount } from 'plugin-api/beta/client/components/ui';
 import InfoIcon from './InfoIcon';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 import Tooltip from './Tooltip';
 import PropTypes from 'prop-types';
 
-const Tab = ({active, hover, featuredCommentsCount}) => {
+const Tab = ({ active, hover, featuredCommentsCount }) => {
   return (
     <span>
       {t('talk-plugin-featured-comments.featured')}
-      <TabCount active={active} sub>{featuredCommentsCount}</TabCount>
+      <TabCount active={active} sub>
+        {featuredCommentsCount}
+      </TabCount>
       <InfoIcon hover={hover} />
       {hover && <Tooltip />}
     </span>
diff --git a/plugins/talk-plugin-featured-comments/client/components/TabPane.js b/plugins/talk-plugin-featured-comments/client/components/TabPane.js
index 941f15402..084de7d0a 100644
--- a/plugins/talk-plugin-featured-comments/client/components/TabPane.js
+++ b/plugins/talk-plugin-featured-comments/client/components/TabPane.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Comment from '../containers/Comment';
 import LoadMore from './LoadMore';
-import {getErrorMessages} from 'plugin-api/beta/client/utils';
+import { getErrorMessages } from 'plugin-api/beta/client/utils';
 
 class TabPane extends React.Component {
   state = {
@@ -9,36 +9,43 @@ class TabPane extends React.Component {
   };
 
   loadMore = () => {
-    this.setState({loadingState: 'loading'});
-    this.props.loadMore()
+    this.setState({ loadingState: 'loading' });
+    this.props
+      .loadMore()
       .then(() => {
-        this.setState({loadingState: 'success'});
+        this.setState({ loadingState: 'success' });
       })
-      .catch((error) => {
-        this.setState({loadingState: 'error'});
+      .catch(error => {
+        this.setState({ loadingState: 'error' });
         this.props.notify('error', getErrorMessages(error));
       });
-  }
+  };
 
   render() {
-    const {root, data, asset: {featuredComments, ...asset}, viewComment} = this.props;
+    const {
+      root,
+      data,
+      asset: { featuredComments, ...asset },
+      viewComment,
+    } = this.props;
     return (
       <div>
-        {featuredComments.nodes.map((comment) =>
+        {featuredComments.nodes.map(comment => (
           <Comment
             key={comment.id}
             root={root}
             data={data}
             comment={comment}
             asset={asset}
-            viewComment={viewComment} />
-        )}
-        {featuredComments.hasNextPage &&
+            viewComment={viewComment}
+          />
+        ))}
+        {featuredComments.hasNextPage && (
           <LoadMore
             loadMore={this.loadMore}
             loadingState={this.state.loadingState}
           />
-        }
+        )}
       </div>
     );
   }
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js
index 1d8a1c00f..d9d18fc06 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tag.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tag.js
@@ -2,39 +2,49 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Tag.css';
 import Tooltip from './Tooltip';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 
 export default class Tag extends React.Component {
   constructor() {
     super();
 
     this.state = {
-      tooltip: false
+      tooltip: false,
     };
-
   }
 
-  showTooltip = (e) => {
+  showTooltip = e => {
     e.preventDefault();
     this.setState({
-      tooltip: true
+      tooltip: true,
     });
-  }
+  };
 
-  hideTooltip = (e) => {
+  hideTooltip = e => {
     e.preventDefault();
     this.setState({
-      tooltip: false
+      tooltip: false,
     });
-  }
+  };
 
   render() {
-    const {tooltip} = this.state;
-    return(
-      <span className={cn(styles.tagContainer, styles.noSelect)} onMouseEnter={this.showTooltip}
-        onMouseLeave={this.hideTooltip} onTouchStart={this.showTooltip}
-        onTouchEnd={this.hideTooltip} >
-        <span className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip}, 'talk-stream-comment-featured-tag-label')}>
+    const { tooltip } = this.state;
+    return (
+      <span
+        className={cn(styles.tagContainer, styles.noSelect)}
+        onMouseEnter={this.showTooltip}
+        onMouseLeave={this.hideTooltip}
+        onTouchStart={this.showTooltip}
+        onTouchEnd={this.hideTooltip}
+      >
+        <span
+          className={cn(
+            styles.tag,
+            styles.noSelect,
+            { [styles.on]: tooltip },
+            'talk-stream-comment-featured-tag-label'
+          )}
+        >
           {t('talk-plugin-featured-comments.featured')}
         </span>
         {tooltip && <Tooltip className={styles.tooltip} />}
diff --git a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
index f98d4c0d5..6658096a8 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Tooltip.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './Tooltip.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 
-export default ({className = ''}) => (
+export default ({ className = '' }) => (
   <div className={cn(styles.tooltip, className)}>
     <Icon name="info_outline" className={styles.icon} />
     <h3 className={styles.headline}>
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Comment.js b/plugins/talk-plugin-featured-comments/client/containers/Comment.js
index de42d73ff..0485b7892 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/Comment.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/Comment.js
@@ -1,13 +1,9 @@
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import Comment from '../components/Comment';
-import {withFragments} from 'plugin-api/beta/client/hocs';
-import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';
+import { withFragments } from 'plugin-api/beta/client/hocs';
+import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils';
 
-const slots = [
-  'commentReactions',
-  'commentAuthorName',
-  'commentTimestamp',
-];
+const slots = ['commentReactions', 'commentAuthorName', 'commentTimestamp'];
 
 export default withFragments({
   root: gql`
@@ -39,5 +35,5 @@ export default withFragments({
       }
       ${getSlotFragmentSpreads(slots, 'comment')}
     }
-  `
+  `,
 })(Comment);
diff --git a/plugins/talk-plugin-featured-comments/client/containers/FeaturedButton.js b/plugins/talk-plugin-featured-comments/client/containers/FeaturedButton.js
index ba6f1587c..6115f61a6 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/FeaturedButton.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/FeaturedButton.js
@@ -1,4 +1,4 @@
 import FeaturedButton from '../components/FeaturedButton';
-import {withTags} from 'plugin-api/beta/client/hocs';
+import { withTags } from 'plugin-api/beta/client/hocs';
 
 export default withTags('featured')(FeaturedButton);
diff --git a/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js b/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js
index 0440e9d08..c3ad0a96d 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/FeaturedDialog.js
@@ -1,23 +1,26 @@
-import {compose} from 'react-apollo';
-import {bindActionCreators} from 'redux';
+import { compose } from 'react-apollo';
+import { bindActionCreators } from 'redux';
 import FeaturedDialog from '../components/FeaturedDialog';
-import {withTags, connect} from 'plugin-api/beta/client/hocs';
-import {closeFeaturedDialog} from '../actions';
+import { withTags, connect } from 'plugin-api/beta/client/hocs';
+import { closeFeaturedDialog } from '../actions';
 
-const mapStateToProps = ({talkPluginFeaturedComments: state}) => ({
+const mapStateToProps = ({ talkPluginFeaturedComments: state }) => ({
   showFeaturedDialog: state.showFeaturedDialog,
   comment: state.comment,
   asset: state.asset,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    closeFeaturedDialog,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      closeFeaturedDialog,
+    },
+    dispatch
+  );
 
 const enhance = compose(
   connect(mapStateToProps, mapDispatchToProps),
-  withTags('featured'),
+  withTags('featured')
 );
 
 export default enhance(FeaturedDialog);
diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
index 6f02164b2..1f210cb95 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/ModActionButton.js
@@ -1,17 +1,20 @@
-import {compose} from 'react-apollo';
-import {bindActionCreators} from 'redux';
+import { compose } from 'react-apollo';
+import { bindActionCreators } from 'redux';
 import ModActionButton from '../components/ModActionButton';
-import {withTags, connect} from 'plugin-api/beta/client/hocs';
-import {closeMenu} from 'plugins/talk-plugin-moderation-actions/client/actions';
+import { withTags, connect } from 'plugin-api/beta/client/hocs';
+import { closeMenu } from 'plugins/talk-plugin-moderation-actions/client/actions';
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    closeMenu,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      closeMenu,
+    },
+    dispatch
+  );
 
 const enhance = compose(
   withTags('featured'),
-  connect(null, mapDispatchToProps),
+  connect(null, mapDispatchToProps)
 );
 
 export default enhance(ModActionButton);
diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js b/plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js
index 7e8d7d426..3e7eb3aaf 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import {gql} from 'react-apollo';
-import {connect} from 'react-redux';
+import { gql } from 'react-apollo';
+import { connect } from 'react-redux';
 import Comment from 'coral-admin/src/routes/Moderation/containers/Comment';
-import {getDefinitionName} from 'coral-framework/utils';
+import { getDefinitionName } from 'coral-framework/utils';
 import truncate from 'lodash/truncate';
 import t from 'coral-framework/services/i18n';
 
 function prepareNotificationText(text) {
-  return truncate(text, {length: 50}).replace('\n', ' ');
+  return truncate(text, { length: 50 }).replace('\n', ' ');
 }
 
 class ModSubscription extends React.Component {
@@ -20,14 +20,18 @@ class ModSubscription extends React.Component {
         variables: {
           assetId: this.props.data.variables.asset_id,
         },
-        updateQuery: (prev, {subscriptionData: {data: {commentFeatured: {user, comment}}}}) => {
-          const notifyText = this.props.user.id === user.id
-            ? ''
-            : t(
-              'talk-plugin-featured-comments.notify_featured',
-              user.username,
-              prepareNotificationText(comment.body),
-            );
+        updateQuery: (
+          prev,
+          { subscriptionData: { data: { commentFeatured: { user, comment } } } }
+        ) => {
+          const notifyText =
+            this.props.user.id === user.id
+              ? ''
+              : t(
+                  'talk-plugin-featured-comments.notify_featured',
+                  user.username,
+                  prepareNotificationText(comment.body)
+                );
           return this.props.handleCommentChange(prev, comment, notifyText);
         },
       },
@@ -36,23 +40,33 @@ class ModSubscription extends React.Component {
         variables: {
           assetId: this.props.data.variables.asset_id,
         },
-        updateQuery: (prev, {subscriptionData: {data: {commentUnfeatured: {user, comment}}}}) => {
-          const notify = this.props.user.id === user.id
-            ? ''
-            : t(
-              'talk-plugin-featured-comments.notify_unfeatured',
-              user.username,
-              prepareNotificationText(comment.body),
-            );
+        updateQuery: (
+          prev,
+          {
+            subscriptionData: {
+              data: { commentUnfeatured: { user, comment } },
+            },
+          }
+        ) => {
+          const notify =
+            this.props.user.id === user.id
+              ? ''
+              : t(
+                  'talk-plugin-featured-comments.notify_unfeatured',
+                  user.username,
+                  prepareNotificationText(comment.body)
+                );
           return this.props.handleCommentChange(prev, comment, notify);
-        }
+        },
       },
     ];
-    this.subscriptions = configs.map((config) => this.props.data.subscribeToMore(config));
+    this.subscriptions = configs.map(config =>
+      this.props.data.subscribeToMore(config)
+    );
   }
 
   componentWillUnmount() {
-    this.subscriptions.forEach((unsubscribe) => unsubscribe());
+    this.subscriptions.forEach(unsubscribe => unsubscribe());
   }
 
   render() {
@@ -98,7 +112,7 @@ const COMMENT_UNFEATURED_SUBSCRIPTION = gql`
   ${Comment.fragments.comment}
 `;
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   user: state.auth.user,
 });
 
diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModTag.js b/plugins/talk-plugin-featured-comments/client/containers/ModTag.js
index 35e7edfcd..990a8a2e9 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/ModTag.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/ModTag.js
@@ -1,15 +1,18 @@
 import ModTag from '../components/ModTag';
-import {withTags, connect} from 'plugin-api/beta/client/hocs';
-import {gql, compose} from 'react-apollo';
-import {bindActionCreators} from 'redux';
-import {openFeaturedDialog} from '../actions';
-import {notify} from 'plugin-api/beta/client/actions/notification';
+import { withTags, connect } from 'plugin-api/beta/client/hocs';
+import { gql, compose } from 'react-apollo';
+import { bindActionCreators } from 'redux';
+import { openFeaturedDialog } from '../actions';
+import { notify } from 'plugin-api/beta/client/actions/notification';
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    notify,
-    openFeaturedDialog,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      notify,
+      openFeaturedDialog,
+    },
+    dispatch
+  );
 
 const fragments = {
   comment: gql`
@@ -18,11 +21,11 @@ const fragments = {
         username
       }
     }
-  `
+  `,
 };
 const enhance = compose(
-  withTags('featured', {fragments}),
-  connect(null, mapDispatchToProps),
+  withTags('featured', { fragments }),
+  connect(null, mapDispatchToProps)
 );
 
 export default enhance(ModTag);
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tab.js b/plugins/talk-plugin-featured-comments/client/containers/Tab.js
index f3443a122..29a8c73c1 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/Tab.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/Tab.js
@@ -1,17 +1,21 @@
 import Tab from '../components/Tab';
-import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
-import {compose, gql} from 'react-apollo';
-import {withProps} from 'recompose';
+import { withFragments, excludeIf } from 'plugin-api/beta/client/hocs';
+import { compose, gql } from 'react-apollo';
+import { withProps } from 'recompose';
 
 const enhance = compose(
   withFragments({
     asset: gql`
       fragment TalkFeaturedComments_Tab_asset on Asset {
-          featuredCommentsCount: totalCommentCount(tags: ["FEATURED"]) @skip(if: $hasComment)
-      }`,
+        featuredCommentsCount: totalCommentCount(tags: ["FEATURED"])
+          @skip(if: $hasComment)
+      }
+    `,
   }),
-  excludeIf((props) => props.asset.featuredCommentsCount === 0),
-  withProps((props) => ({featuredCommentsCount: props.asset.featuredCommentsCount})),
+  excludeIf(props => props.asset.featuredCommentsCount === 0),
+  withProps(props => ({
+    featuredCommentsCount: props.asset.featuredCommentsCount,
+  }))
 );
 
 export default enhance(Tab);
diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js
index 5f684b228..5bf92fb0a 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js
@@ -1,16 +1,18 @@
 import React from 'react';
-import {bindActionCreators} from 'redux';
-import {compose, gql} from 'react-apollo';
+import { bindActionCreators } from 'redux';
+import { compose, gql } from 'react-apollo';
 import TabPane from '../components/TabPane';
-import {withFragments, connect} from 'plugin-api/beta/client/hocs';
+import { withFragments, connect } from 'plugin-api/beta/client/hocs';
 import Comment from '../containers/Comment';
-import {notify} from 'plugin-api/beta/client/actions/notification';
-import {viewComment} from 'coral-embed-stream/src/actions/stream';
-import {appendNewNodes, getDefinitionName} from 'plugin-api/beta/client/utils';
+import { notify } from 'plugin-api/beta/client/actions/notification';
+import { viewComment } from 'coral-embed-stream/src/actions/stream';
+import {
+  appendNewNodes,
+  getDefinitionName,
+} from 'plugin-api/beta/client/utils';
 import update from 'immutability-helper';
 
 class TabPaneContainer extends React.Component {
-
   loadMore = () => {
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
@@ -22,17 +24,17 @@ class TabPaneContainer extends React.Component {
         sortBy: this.props.data.variables.sortBy,
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
-      updateQuery: (previous, {fetchMoreResult:{comments}}) => {
+      updateQuery: (previous, { fetchMoreResult: { comments } }) => {
         const updated = update(previous, {
           asset: {
             featuredComments: {
               nodes: {
-                $apply: (nodes) => appendNewNodes(nodes, comments.nodes),
+                $apply: nodes => appendNewNodes(nodes, comments.nodes),
               },
-              hasNextPage: {$set: comments.hasNextPage},
-              endCursor: {$set: comments.endCursor},
+              hasNextPage: { $set: comments.hasNextPage },
+              endCursor: { $set: comments.endCursor },
             },
-          }
+          },
         });
         return updated;
       },
@@ -40,10 +42,7 @@ class TabPaneContainer extends React.Component {
   };
 
   render() {
-    return <TabPane
-      {...this.props}
-      loadMore={this.loadMore}
-    />;
+    return <TabPane {...this.props} loadMore={this.loadMore} />;
   }
 }
 
@@ -78,11 +77,14 @@ const LOAD_MORE_QUERY = gql`
   ${Comment.fragments.comment}
 `;
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    viewComment,
-    notify,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      viewComment,
+      notify,
+    },
+    dispatch
+  );
 
 const enhance = compose(
   connect(null, mapDispatchToProps),
@@ -118,7 +120,7 @@ const enhance = compose(
       ${Comment.fragments.comment}
       ${Comment.fragments.asset}
     `,
-  }),
+  })
 );
 
 export default enhance(TabPaneContainer);
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tag.js b/plugins/talk-plugin-featured-comments/client/containers/Tag.js
index 902591875..59defe082 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/Tag.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/Tag.js
@@ -1,7 +1,7 @@
-import {compose, gql} from 'react-apollo';
+import { compose, gql } from 'react-apollo';
 import Tag from '../components/Tag';
-import {isTagged} from 'plugin-api/beta/client/utils';
-import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
+import { isTagged } from 'plugin-api/beta/client/utils';
+import { withFragments, excludeIf } from 'plugin-api/beta/client/hocs';
 
 export default compose(
   withFragments({
@@ -13,6 +13,7 @@ export default compose(
           }
         }
       }
-  `}),
-  excludeIf((props) => !isTagged(props.comment.tags, 'FEATURED'))
+    `,
+  }),
+  excludeIf(props => !isTagged(props.comment.tags, 'FEATURED'))
 )(Tag);
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index 304bff647..1f0bac704 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -7,11 +7,11 @@ import ModTag from './containers/ModTag';
 import ModActionButton from './containers/ModActionButton';
 import ModSubscription from './containers/ModSubscription';
 import FeaturedDialog from './containers/FeaturedDialog';
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import reducer from './reducer';
 
-import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
-import {prependNewNodes} from 'plugin-api/beta/client/utils';
+import { findCommentInEmbedQuery } from 'coral-embed-stream/src/graphql/utils';
+import { prependNewNodes } from 'plugin-api/beta/client/utils';
 
 export default {
   translations,
@@ -25,32 +25,35 @@ export default {
     adminCommentInfoBar: [ModTag],
   },
   mutations: {
-    IgnoreUser: ({variables}) => ({
+    IgnoreUser: ({ variables }) => ({
       updateQueries: {
-        CoralEmbedStream_Embed: (previous) => {
+        CoralEmbedStream_Embed: previous => {
           if (!previous.asset.featuredComments) {
             return previous;
           }
           const ignoredUserId = variables.id;
-          const newNodes = previous.asset.featuredComments.nodes.filter((n) => n.user.id !== ignoredUserId);
-          const removedCount =  previous.asset.featuredComments.nodes.length - newNodes.length;
+          const newNodes = previous.asset.featuredComments.nodes.filter(
+            n => n.user.id !== ignoredUserId
+          );
+          const removedCount =
+            previous.asset.featuredComments.nodes.length - newNodes.length;
           const updated = update(previous, {
             asset: {
               featuredComments: {
-                nodes: {$set: newNodes}
+                nodes: { $set: newNodes },
               },
               featuredCommentsCount: {
-                $apply: (value) => value - removedCount,
-              }
-            }
+                $apply: value => value - removedCount,
+              },
+            },
           });
           return updated;
-        }
-      }
+        },
+      },
     }),
-    AddTag: ({variables}) => ({
+    AddTag: ({ variables }) => ({
       updateQueries: {
-        CoralEmbedStream_Embed: (previous) => {
+        CoralEmbedStream_Embed: previous => {
           let updated = previous;
 
           if (variables.name !== 'FEATURED') {
@@ -64,21 +67,20 @@ export default {
               asset: {
                 featuredComments: {
                   nodes: {
-                    $apply: (nodes) => prependNewNodes(nodes, [comment]),
-                  }
+                    $apply: nodes => prependNewNodes(nodes, [comment]),
+                  },
                 },
                 featuredCommentsCount: {
-                  $apply: (value) => value + 1
+                  $apply: value => value + 1,
                 },
-              }
+              },
             });
           }
 
           return updated;
-        }
+        },
       },
-      update: (proxy) => {
-
+      update: proxy => {
         if (variables.name !== 'FEATURED') {
           return;
         }
@@ -91,16 +93,16 @@ export default {
           }
         `;
 
-        const data = proxy.readFragment({fragment, id: fragmentId});
+        const data = proxy.readFragment({ fragment, id: fragmentId });
 
         data.status = 'ACCEPTED';
 
-        proxy.writeFragment({fragment, id: fragmentId, data});
+        proxy.writeFragment({ fragment, id: fragmentId, data });
       },
     }),
-    RemoveTag: ({variables}) => ({
+    RemoveTag: ({ variables }) => ({
       updateQueries: {
-        CoralEmbedStream_Embed: (previous) => {
+        CoralEmbedStream_Embed: previous => {
           let updated = previous;
 
           if (variables.name !== 'FEATURED') {
@@ -112,20 +114,19 @@ export default {
               asset: {
                 featuredComments: {
                   nodes: {
-                    $apply: (nodes) =>
-                      nodes.filter((n) => n.id !== variables.id)
-                  }
+                    $apply: nodes => nodes.filter(n => n.id !== variables.id),
+                  },
                 },
                 featuredCommentsCount: {
-                  $apply: (value) => value - 1
-                }
-              }
+                  $apply: value => value - 1,
+                },
+              },
             });
           }
 
           return updated;
         },
-      }
-    })
+      },
+    }),
   },
 };
diff --git a/plugins/talk-plugin-featured-comments/client/reducer.js b/plugins/talk-plugin-featured-comments/client/reducer.js
index eb6d302ff..1d5a5c14d 100644
--- a/plugins/talk-plugin-featured-comments/client/reducer.js
+++ b/plugins/talk-plugin-featured-comments/client/reducer.js
@@ -1,10 +1,10 @@
-import {OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG} from './constants';
+import { OPEN_FEATURED_DIALOG, CLOSE_FEATURED_DIALOG } from './constants';
 
 const initialState = {
   showFeaturedDialog: false,
   comment: {
     id: null,
-    tags: []
+    tags: [],
   },
   asset: {
     id: null,
@@ -13,20 +13,20 @@ const initialState = {
 
 export default function reducer(state = initialState, action) {
   switch (action.type) {
-  case OPEN_FEATURED_DIALOG:
-    return {
-      ...state,
-      comment: action.comment,
-      asset: action.asset,
-      showFeaturedDialog: true,
-    };
-  case CLOSE_FEATURED_DIALOG:
-    return {
-      ...state,
-      featuredCommentId: null,
-      showFeaturedDialog: false,
-    };
-  default :
-    return state;
+    case OPEN_FEATURED_DIALOG:
+      return {
+        ...state,
+        comment: action.comment,
+        asset: action.asset,
+        showFeaturedDialog: true,
+      };
+    case CLOSE_FEATURED_DIALOG:
+      return {
+        ...state,
+        featuredCommentId: null,
+        showFeaturedDialog: false,
+      };
+    default:
+      return state;
   }
 }
diff --git a/plugins/talk-plugin-featured-comments/index.js b/plugins/talk-plugin-featured-comments/index.js
index 6cfc0b8d5..f5a9c8ae5 100644
--- a/plugins/talk-plugin-featured-comments/index.js
+++ b/plugins/talk-plugin-featured-comments/index.js
@@ -1,4 +1,4 @@
-const {check} = require('perms/utils');
+const { check } = require('perms/utils');
 
 module.exports = {
   typeDefs: `
@@ -24,18 +24,18 @@ module.exports = {
   `,
   resolvers: {
     Subscription: {
-      commentFeatured: ({user, comment}) => {
-        return {user, comment};
+      commentFeatured: ({ user, comment }) => {
+        return { user, comment };
       },
-      commentUnfeatured: ({user, comment}) => {
-        return {user, comment};
+      commentUnfeatured: ({ user, comment }) => {
+        return { user, comment };
       },
     },
   },
   setupFunctions: {
     commentFeatured: (options, args) => ({
       commentFeatured: {
-        filter: ({comment}, {user}) => {
+        filter: ({ comment }, { user }) => {
           if (args.asset_id === null) {
             return check(user, ['ADMIN', 'MODERATOR']);
           }
@@ -45,7 +45,7 @@ module.exports = {
     }),
     commentUnfeatured: (options, args) => ({
       commentUnfeatured: {
-        filter: ({comment}, {user}) => {
+        filter: ({ comment }, { user }) => {
           if (args.asset_id === null) {
             return check(user, ['ADMIN', 'MODERATOR']);
           }
@@ -57,27 +57,34 @@ module.exports = {
   hooks: {
     RootMutation: {
       addTag: {
-        async post(obj, {tag: {name, id, item_type}}, {user, mutators: {Comment}, pubsub}, info, result) {
+        async post(
+          obj,
+          { tag: { name, id, item_type } },
+          { user, mutators: { Comment }, pubsub }
+        ) {
           if (name === 'FEATURED' && item_type === 'COMMENTS') {
-            const comment = await Comment.setStatus({id: id, status: 'ACCEPTED'});
+            const comment = await Comment.setStatus({
+              id: id,
+              status: 'ACCEPTED',
+            });
             if (comment) {
-              pubsub.publish('commentFeatured', {comment, user});
+              pubsub.publish('commentFeatured', { comment, user });
             }
-            return result;
           }
-          return result;
         },
       },
       removeTag: {
-        async post(obj, {tag: {name, id, item_type}}, {user, loaders: {Comments}, pubsub}, info, result) {
+        async post(
+          obj,
+          { tag: { name, id, item_type } },
+          { user, loaders: { Comments }, pubsub }
+        ) {
           if (name === 'FEATURED' && item_type === 'COMMENTS') {
             const comment = await Comments.get.load(id);
             if (comment) {
-              pubsub.publish('commentUnfeatured', {comment, user});
+              pubsub.publish('commentUnfeatured', { comment, user });
             }
-            return result;
           }
-          return result;
         },
       },
     },
@@ -88,10 +95,10 @@ module.exports = {
       permissions: {
         public: true,
         self: false,
-        roles: []
+        roles: ['ADMIN', 'MODERATOR'],
       },
       models: ['COMMENTS'],
-      created_at: new Date()
-    }
-  ]
+      created_at: new Date(),
+    },
+  ],
 };
diff --git a/plugins/talk-plugin-flag-details/client/components/FlagDetails.css b/plugins/talk-plugin-flag-details/client/components/FlagDetails.css
index 3b59653c2..1e8d03ac4 100644
--- a/plugins/talk-plugin-flag-details/client/components/FlagDetails.css
+++ b/plugins/talk-plugin-flag-details/client/components/FlagDetails.css
@@ -4,7 +4,7 @@
   list-style: none;
   display: inline-block;
   padding: 0;
-  font-size: 12px;
+  font-size: 13px;
   margin: 0;
 }
 
@@ -12,7 +12,7 @@
   margin: 0;
   padding: 0;
   list-style: none;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 500;
 }
 
@@ -20,7 +20,7 @@
   margin-left:10px;
   padding: 0;
   list-style: none;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: normal;
   color: #888;
 }
diff --git a/plugins/talk-plugin-flag-details/client/components/FlagDetails.js b/plugins/talk-plugin-flag-details/client/components/FlagDetails.js
index 9e1d03c72..607ba48a2 100644
--- a/plugins/talk-plugin-flag-details/client/components/FlagDetails.js
+++ b/plugins/talk-plugin-flag-details/client/components/FlagDetails.js
@@ -1,18 +1,22 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from './FlagDetails.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Slot, IfSlotIsNotEmpty, CommentDetail} from 'plugin-api/beta/client/components';
+import { t } from 'plugin-api/beta/client/services';
+import {
+  Slot,
+  IfSlotIsNotEmpty,
+  CommentDetail,
+} from 'plugin-api/beta/client/components';
 
 class FlagDetails extends Component {
-
   render() {
-    const {comment: {actions}, more, data, root, comment} = this.props;
+    const { comment: { actions }, more, data, root, comment } = this.props;
 
-    const flagActions = actions && actions.filter((a) => a.__typename === 'FlagAction');
+    const flagActions =
+      actions && actions.filter(a => a.__typename === 'FlagAction');
     const summaries = flagActions.reduce((sum, action) => {
       if (!(action.reason in sum)) {
-        sum[action.reason] = {count: 0, actions: []};
+        sum[action.reason] = { count: 0, actions: [] };
       }
       sum[action.reason].count++;
       if (action.user) {
@@ -30,16 +34,21 @@ class FlagDetails extends Component {
     return (
       <CommentDetail
         icon={'flag'}
-        header={`${t('talk-plugin-flag-details.flags')} (${Object.keys(summaries).length})`}
+        header={`${t('talk-plugin-flag-details.flags')} (${
+          Object.keys(summaries).length
+        })`}
         info={
           <ul className={styles.info}>
-            {reasons.map((reason) =>
+            {reasons.map(reason => (
               <li key={reason} className={styles.lessDetail}>
-                {reason} {summaries[reason].userFlagged && `(${summaries[reason].count})`}
+                {t(`flags.reasons.comment.${reason.toLowerCase()}`)}{' '}
+                {summaries[reason].userFlagged &&
+                  `(${summaries[reason].count})`}
               </li>
-            )}
+            ))}
           </ul>
-        }>
+        }
+      >
         {more && (
           <IfSlotIsNotEmpty
             slot="adminCommentMoreFlagDetails"
@@ -62,10 +71,12 @@ FlagDetails.propTypes = {
   data: PropTypes.object,
   root: PropTypes.object,
   comment: PropTypes.shape({
-    actions: PropTypes.arrayOf(PropTypes.shape({
-      message: PropTypes.string,
-      user: PropTypes.shape({username: PropTypes.string})
-    })).isRequired,
+    actions: PropTypes.arrayOf(
+      PropTypes.shape({
+        message: PropTypes.string,
+        user: PropTypes.shape({ username: PropTypes.string }),
+      })
+    ).isRequired,
   }).isRequired,
 };
 
diff --git a/plugins/talk-plugin-flag-details/client/components/UserFlagDetails.css b/plugins/talk-plugin-flag-details/client/components/UserFlagDetails.css
index 3b59653c2..1e8d03ac4 100644
--- a/plugins/talk-plugin-flag-details/client/components/UserFlagDetails.css
+++ b/plugins/talk-plugin-flag-details/client/components/UserFlagDetails.css
@@ -4,7 +4,7 @@
   list-style: none;
   display: inline-block;
   padding: 0;
-  font-size: 12px;
+  font-size: 13px;
   margin: 0;
 }
 
@@ -12,7 +12,7 @@
   margin: 0;
   padding: 0;
   list-style: none;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 500;
 }
 
@@ -20,7 +20,7 @@
   margin-left:10px;
   padding: 0;
   list-style: none;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: normal;
   color: #888;
 }
diff --git a/plugins/talk-plugin-flag-details/client/components/UserFlagDetails.js b/plugins/talk-plugin-flag-details/client/components/UserFlagDetails.js
index 4b1b173ec..30f83ad9d 100644
--- a/plugins/talk-plugin-flag-details/client/components/UserFlagDetails.js
+++ b/plugins/talk-plugin-flag-details/client/components/UserFlagDetails.js
@@ -1,19 +1,20 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { t } from 'plugin-api/beta/client/services';
 import styles from './UserFlagDetails.css';
 
 class UserFlagDetails extends Component {
-
   render() {
-    const {comment: {actions}, viewUserDetail} = this.props;
+    const { comment: { actions }, viewUserDetail } = this.props;
 
-    const flagActions = actions && actions.filter((a) => a.__typename === 'FlagAction');
+    const flagActions =
+      actions && actions.filter(a => a.__typename === 'FlagAction');
     const summaries = flagActions.reduce((sum, action) => {
       if (!action.user) {
         return sum;
       }
       if (!(action.reason in sum)) {
-        sum[action.reason] = {count: 0, actions: []};
+        sum[action.reason] = { count: 0, actions: [] };
       }
       sum[action.reason].count++;
       sum[action.reason].actions.push(action);
@@ -22,25 +23,28 @@ class UserFlagDetails extends Component {
 
     return (
       <ul className={styles.detail}>
-        {Object.keys(summaries)
-          .map((reason) => (
-            <li key={reason}>
-              {reason} ({summaries[reason].count})
-              <ul className={styles.subDetail}>
-                {summaries[reason].actions.map((action) =>
-                  <li key={action.user.id}>
-                    {action.user &&
-                      <a className={styles.username} onClick={() => viewUserDetail(action.user.id)}>
-                        {action.user.username}
-                      </a>
-                    }
-                    {action.message}
-                  </li>
-                )}
-              </ul>
-            </li>
-          ))
-        }
+        {Object.keys(summaries).map(reason => (
+          <li key={reason}>
+            {t(`flags.reasons.comment.${reason.toLowerCase()}`)} ({
+              summaries[reason].count
+            })
+            <ul className={styles.subDetail}>
+              {summaries[reason].actions.map(action => (
+                <li key={action.user.id}>
+                  {action.user && (
+                    <a
+                      className={styles.username}
+                      onClick={() => viewUserDetail(action.user.id)}
+                    >
+                      {action.user.username}
+                    </a>
+                  )}
+                  {action.message}
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
       </ul>
     );
   }
@@ -48,10 +52,12 @@ class UserFlagDetails extends Component {
 
 UserFlagDetails.propTypes = {
   comment: PropTypes.shape({
-    actions: PropTypes.arrayOf(PropTypes.shape({
-      message: PropTypes.string,
-      user: PropTypes.shape({username: PropTypes.string})
-    })).isRequired,
+    actions: PropTypes.arrayOf(
+      PropTypes.shape({
+        message: PropTypes.string,
+        user: PropTypes.shape({ username: PropTypes.string }),
+      })
+    ).isRequired,
   }).isRequired,
   viewUserDetail: PropTypes.func.isRequired,
 };
diff --git a/plugins/talk-plugin-flag-details/client/containers/FlagDetails.js b/plugins/talk-plugin-flag-details/client/containers/FlagDetails.js
index da04dd65f..557e555e4 100644
--- a/plugins/talk-plugin-flag-details/client/containers/FlagDetails.js
+++ b/plugins/talk-plugin-flag-details/client/containers/FlagDetails.js
@@ -1,11 +1,9 @@
-import {compose, gql} from 'react-apollo';
+import { compose, gql } from 'react-apollo';
 import FlagDetails from '../components/FlagDetails';
-import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
-import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';
+import { withFragments, excludeIf } from 'plugin-api/beta/client/hocs';
+import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils';
 
-const slots = [
-  'adminCommentMoreFlagDetails',
-];
+const slots = ['adminCommentMoreFlagDetails'];
 
 const enhance = compose(
   withFragments({
@@ -31,9 +29,12 @@ const enhance = compose(
         }
         ${getSlotFragmentSpreads(slots, 'comment')}
       }
-    `
+    `,
   }),
-  excludeIf(({comment: {actions}}) => !actions.some((action) => action.__typename === 'FlagAction')),
+  excludeIf(
+    ({ comment: { actions } }) =>
+      !actions.some(action => action.__typename === 'FlagAction')
+  )
 );
 
 export default enhance(FlagDetails);
diff --git a/plugins/talk-plugin-flag-details/client/containers/UserFlagDetails.js b/plugins/talk-plugin-flag-details/client/containers/UserFlagDetails.js
index aedbb1de5..7dd867456 100644
--- a/plugins/talk-plugin-flag-details/client/containers/UserFlagDetails.js
+++ b/plugins/talk-plugin-flag-details/client/containers/UserFlagDetails.js
@@ -1,14 +1,17 @@
-import {compose, gql} from 'react-apollo';
+import { compose, gql } from 'react-apollo';
 import UserFlagDetails from '../components/UserFlagDetails';
-import {bindActionCreators} from 'redux';
-import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
-import {viewUserDetail} from 'plugin-api/beta/client/actions/admin';
-import {connect} from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { withFragments, excludeIf } from 'plugin-api/beta/client/hocs';
+import { viewUserDetail } from 'plugin-api/beta/client/actions/admin';
+import { connect } from 'react-redux';
 
-const mapDispatchToProps = (dispatch) => ({
-  ...bindActionCreators({
-    viewUserDetail,
-  }, dispatch)
+const mapDispatchToProps = dispatch => ({
+  ...bindActionCreators(
+    {
+      viewUserDetail,
+    },
+    dispatch
+  ),
 });
 
 const enhance = compose(
@@ -29,11 +32,12 @@ const enhance = compose(
           }
         }
       }
-    `
+    `,
   }),
-  excludeIf(({comment: {actions}}) =>
-    !actions.some((action) => action.__typename === 'FlagAction' && action.user
-    )),
+  excludeIf(
+    ({ comment: { actions } }) =>
+      !actions.some(action => action.__typename === 'FlagAction' && action.user)
+  )
 );
 
 export default enhance(UserFlagDetails);
diff --git a/plugins/talk-plugin-flag-details/client/index.js b/plugins/talk-plugin-flag-details/client/index.js
index 95f579da5..e50fa4f84 100644
--- a/plugins/talk-plugin-flag-details/client/index.js
+++ b/plugins/talk-plugin-flag-details/client/index.js
@@ -7,5 +7,5 @@ export default {
   slots: {
     adminCommentDetailArea: [FlagDetails],
     adminCommentMoreFlagDetails: [UserFlagDetails],
-  }
+  },
 };
diff --git a/plugins/talk-plugin-flag-details/client/translations.yml b/plugins/talk-plugin-flag-details/client/translations.yml
index f978ca7ee..df7a14fe9 100644
--- a/plugins/talk-plugin-flag-details/client/translations.yml
+++ b/plugins/talk-plugin-flag-details/client/translations.yml
@@ -1,6 +1,6 @@
 en:
   talk-plugin-flag-details:
-    flags: Flags
+    flags: Reports
 es:
   talk-plugin-flag-details:
     flags: Reportes
diff --git a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.js b/plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.js
index 19319ec9c..cf0b01357 100644
--- a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.js
+++ b/plugins/talk-plugin-ignore-user/client/components/IgnoreUserAction.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import styles from './IgnoreUserAction.css';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 import cn from 'classnames';
 
-export default ({ignoreUser}) => (
+export default ({ ignoreUser }) => (
   <button
     className={cn(styles.button, 'talk-plugin-ignore-user-action')}
-    onClick={ignoreUser}>
+    onClick={ignoreUser}
+  >
     {t('talk-plugin-ignore-user.ignore_user')}
   </button>
 );
diff --git a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css b/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css
index 4f3d8e9da..1a291d5e3 100644
--- a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css
+++ b/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.css
@@ -16,6 +16,7 @@
   padding: 0;
   margin: 0 0 8px 0;
   font-size: 15px;
+  word-wrap: break-word;
 }
 
 .button {
diff --git a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js b/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js
index 8da879f62..1e793dc4b 100644
--- a/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js
+++ b/plugins/talk-plugin-ignore-user/client/components/IgnoreUserConfirmation.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import styles from './IgnoreUserConfirmation.css';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 import cn from 'classnames';
 
-export default ({ignoreUser, cancel, username}) => (
+export default ({ ignoreUser, cancel, username }) => (
   <aside className={cn(styles.root, 'talk-plugin-ignore-user-confirmation')}>
     <div className={styles.message}>
       <h1 className={styles.title}>
@@ -11,11 +11,28 @@ export default ({ignoreUser, cancel, username}) => (
       </h1>
       {t('talk-plugin-ignore-user.confirmation')}
     </div>
-    <div className={cn(styles.actions, 'talk-plugin-ignore-user-confirmation-actions')}>
-      <button className={cn(styles.cancel, 'talk-plugin-ignore-user-confirmation-cancel')} onClick={cancel}>
+    <div
+      className={cn(
+        styles.actions,
+        'talk-plugin-ignore-user-confirmation-actions'
+      )}
+    >
+      <button
+        className={cn(
+          styles.cancel,
+          'talk-plugin-ignore-user-confirmation-cancel'
+        )}
+        onClick={cancel}
+      >
         {t('talk-plugin-ignore-user.cancel')}
       </button>
-      <button className={cn(styles.button, 'talk-plugin-ignore-user-confirmation-button')} onClick={ignoreUser}>
+      <button
+        className={cn(
+          styles.button,
+          'talk-plugin-ignore-user-confirmation-button'
+        )}
+        onClick={ignoreUser}
+      >
         {t('talk-plugin-ignore-user.ignore_user')}
       </button>
     </div>
diff --git a/plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.js b/plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.js
index 3946626cd..d199eb635 100644
--- a/plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.js
+++ b/plugins/talk-plugin-ignore-user/client/components/IgnoredUserSection.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import styles from './IgnoredUserSection.css';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 
-export default ({ignoredUsers, stopIgnoringUser}) => (
+export default ({ ignoredUsers, stopIgnoringUser }) => (
   <section className={'talk-plugin-ignore-user-section'}>
     <h3>{t('talk-plugin-ignore-user.section_title')}</h3>
     <p>{t('talk-plugin-ignore-user.section_info')}</p>
     <ul className={styles.list}>
-      {ignoredUsers.map(({username, id}) => (
+      {ignoredUsers.map(({ username, id }) => (
         <li className={styles.listItem} key={id}>
           <span className={styles.username}>{username}</span>
           <button
-            onClick={() => stopIgnoringUser({id})}
+            onClick={() => stopIgnoringUser({ id })}
             className={styles.button}
           >
             {t('talk-plugin-ignore-user.stop_ignoring')}
diff --git a/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js b/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js
index d7e9d38b5..033be6ed6 100644
--- a/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js
+++ b/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserAction.js
@@ -1,29 +1,29 @@
 import React from 'react';
 import IgnoreUserAction from '../components/IgnoreUserAction';
-import {compose, gql} from 'react-apollo';
-import {connect, withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
-import {bindActionCreators} from 'redux';
-import {setContentSlot} from 'plugins/talk-plugin-author-menu/client/actions';
+import { compose, gql } from 'react-apollo';
+import { connect, withFragments, excludeIf } from 'plugin-api/beta/client/hocs';
+import { bindActionCreators } from 'redux';
+import { setContentSlot } from 'plugins/talk-plugin-author-menu/client/actions';
 import IgnoreUserConfirmation from './IgnoreUserConfirmation';
-import {getDefinitionName} from 'plugin-api/beta/client/utils';
+import { getDefinitionName } from 'plugin-api/beta/client/utils';
 
 class IgnoreUserActionContainer extends React.Component {
-
   ignoreUser = () => {
     this.props.setContentSlot('ignoreUserConfirmation');
   };
 
   render() {
-    return <IgnoreUserAction
-      ignoreUser={this.ignoreUser}
-    />;
+    return <IgnoreUserAction ignoreUser={this.ignoreUser} />;
   }
 }
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    setContentSlot,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      setContentSlot,
+    },
+    dispatch
+  );
 
 const withIgnoreUserActionFragments = withFragments({
   root: gql`
@@ -47,7 +47,7 @@ const withIgnoreUserActionFragments = withFragments({
 const enhance = compose(
   connect(null, mapDispatchToProps),
   withIgnoreUserActionFragments,
-  excludeIf(({root: {me}, comment}) => !me || me.id === comment.user.id),
+  excludeIf(({ root: { me }, comment }) => !me || me.id === comment.user.id)
 );
 
 export default enhance(IgnoreUserActionContainer);
diff --git a/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js b/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js
index fdf6d1986..733dab756 100644
--- a/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js
+++ b/plugins/talk-plugin-ignore-user/client/containers/IgnoreUserConfirmation.js
@@ -1,22 +1,28 @@
 import React from 'react';
 import IgnoreUserConfirmation from '../components/IgnoreUserConfirmation';
-import {compose, gql} from 'react-apollo';
-import {connect, withFragments, withIgnoreUser} from 'plugin-api/beta/client/hocs';
-import {bindActionCreators} from 'redux';
-import {closeMenu} from 'plugins/talk-plugin-author-menu/client/actions';
-import {notify} from 'plugin-api/beta/client/actions/notification';
-import {t} from 'plugin-api/beta/client/services';
-import {getErrorMessages} from 'plugin-api/beta/client/utils';
+import { compose, gql } from 'react-apollo';
+import {
+  connect,
+  withFragments,
+  withIgnoreUser,
+} from 'plugin-api/beta/client/hocs';
+import { bindActionCreators } from 'redux';
+import { closeMenu } from 'plugins/talk-plugin-author-menu/client/actions';
+import { notify } from 'plugin-api/beta/client/actions/notification';
+import { t } from 'plugin-api/beta/client/services';
+import { getErrorMessages } from 'plugin-api/beta/client/utils';
 
 class IgnoreUserConfirmationContainer extends React.Component {
-
   ignoreUser = () => {
-    const {ignoreUser, notify, comment, closeMenu} = this.props;
+    const { ignoreUser, notify, comment, closeMenu } = this.props;
     ignoreUser(comment.user.id)
       .then(() => {
-        notify('success', t('talk-plugin-ignore-user.notify_success', comment.user.username));
+        notify(
+          'success',
+          t('talk-plugin-ignore-user.notify_success', comment.user.username)
+        );
       })
-      .catch((err) => {
+      .catch(err => {
         notify('error', getErrorMessages(err));
       });
     closeMenu();
@@ -24,22 +30,27 @@ class IgnoreUserConfirmationContainer extends React.Component {
 
   cancel = () => {
     this.props.closeMenu();
-  }
+  };
 
   render() {
-    return <IgnoreUserConfirmation
-      username={this.props.comment.user.username}
-      ignoreUser={this.ignoreUser}
-      cancel={this.cancel}
-    />;
+    return (
+      <IgnoreUserConfirmation
+        username={this.props.comment.user.username}
+        ignoreUser={this.ignoreUser}
+        cancel={this.cancel}
+      />
+    );
   }
 }
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    closeMenu,
-    notify,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      closeMenu,
+      notify,
+    },
+    dispatch
+  );
 
 const withIgnoreUserConfirmationFragments = withFragments({
   comment: gql`
@@ -48,13 +59,14 @@ const withIgnoreUserConfirmationFragments = withFragments({
         id
         username
       }
-    }`,
+    }
+  `,
 });
 
 const enhance = compose(
   connect(null, mapDispatchToProps),
   withIgnoreUserConfirmationFragments,
-  withIgnoreUser,
+  withIgnoreUser
 );
 
 export default enhance(IgnoreUserConfirmationContainer);
diff --git a/plugins/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js b/plugins/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js
index e420f180b..ae402286c 100644
--- a/plugins/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js
+++ b/plugins/talk-plugin-ignore-user/client/containers/IgnoredUserSection.js
@@ -1,15 +1,20 @@
 import React from 'react';
 import IgnoredUserSection from '../components/IgnoredUserSection';
-import {compose, gql} from 'react-apollo';
-import {withFragments, excludeIf, withStopIgnoringUser} from 'plugin-api/beta/client/hocs';
+import { compose, gql } from 'react-apollo';
+import {
+  withFragments,
+  excludeIf,
+  withStopIgnoringUser,
+} from 'plugin-api/beta/client/hocs';
 
 class IgnoredUserSectionContainer extends React.Component {
-
   render() {
-    return <IgnoredUserSection
-      stopIgnoringUser={this.props.stopIgnoringUser}
-      ignoredUsers={this.props.root.me.ignoredUsers}
-    />;
+    return (
+      <IgnoredUserSection
+        stopIgnoringUser={this.props.stopIgnoringUser}
+        ignoredUsers={this.props.root.me.ignoredUsers}
+      />
+    );
   }
 }
 
@@ -19,8 +24,8 @@ const withIgnoredUserSectionFragments = withFragments({
       me {
         id
         ignoredUsers {
-          id,
-          username,
+          id
+          username
         }
       }
     }
@@ -30,7 +35,7 @@ const withIgnoredUserSectionFragments = withFragments({
 const enhance = compose(
   withIgnoredUserSectionFragments,
   withStopIgnoringUser,
-  excludeIf(({root: {me}}) => me.ignoredUsers.length === 0),
+  excludeIf(({ root: { me } }) => me.ignoredUsers.length === 0)
 );
 
 export default enhance(IgnoredUserSectionContainer);
diff --git a/plugins/talk-plugin-ignore-user/client/index.js b/plugins/talk-plugin-ignore-user/client/index.js
index 6583f68e6..3284915db 100644
--- a/plugins/talk-plugin-ignore-user/client/index.js
+++ b/plugins/talk-plugin-ignore-user/client/index.js
@@ -12,32 +12,46 @@ export default {
   },
   translations,
   mutations: {
-    IgnoreUser: ({variables}) => ({
+    IgnoreUser: ({ variables }) => ({
       updateQueries: {
-        CoralEmbedStream_Embed: (previousData) => {
+        CoralEmbedStream_Embed: previousData => {
           const ignoredUserId = variables.id;
-          const updated = update(previousData, {me: {ignoredUsers: {$push: [{
-            id: ignoredUserId,
-            __typename: 'User',
-          }]}}});
+          const updated = update(previousData, {
+            me: {
+              ignoredUsers: {
+                $push: [
+                  {
+                    id: ignoredUserId,
+                    __typename: 'User',
+                  },
+                ],
+              },
+            },
+          });
           return updated;
-        }
-      }
+        },
+      },
     }),
-    StopIgnoringUser: ({variables}) => ({
+    StopIgnoringUser: ({ variables }) => ({
       updateQueries: {
-        CoralEmbedStream_Profile: (previousData) => {
+        CoralEmbedStream_Profile: previousData => {
           const noLongerIgnoredUserId = variables.id;
 
           // remove noLongerIgnoredUserId from ignoredUsers
-          const updated = update(previousData, {me: {ignoredUsers: {
-            $apply: (ignoredUsers) => {
-              return ignoredUsers.filter((u) => u.id !== noLongerIgnoredUserId);
-            }
-          }}});
+          const updated = update(previousData, {
+            me: {
+              ignoredUsers: {
+                $apply: ignoredUsers => {
+                  return ignoredUsers.filter(
+                    u => u.id !== noLongerIgnoredUserId
+                  );
+                },
+              },
+            },
+          });
           return updated;
-        }
-      }
+        },
+      },
     }),
   },
 };
diff --git a/plugins/talk-plugin-like/client/LikeButton.js b/plugins/talk-plugin-like/client/LikeButton.js
index cc65e0d58..2df5d4ab5 100644
--- a/plugins/talk-plugin-like/client/LikeButton.js
+++ b/plugins/talk-plugin-like/client/LikeButton.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import styles from './styles.css';
-import {withReaction} from 'plugin-api/beta/client/hocs';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { withReaction } from 'plugin-api/beta/client/hocs';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 import cn from 'classnames';
 
 const plugin = 'talk-plugin-like';
@@ -31,15 +31,23 @@ class LikeButton extends React.Component {
   };
 
   render() {
-    const {count, alreadyReacted} = this.props;
+    const { count, alreadyReacted } = this.props;
     return (
       <div className={cn(styles.container, `${plugin}-container`)}>
         <button
-          className={cn(styles.button, {[`${styles.liked} talk-plugin-like-liked`]: alreadyReacted}, `${plugin}-button`)}
+          className={cn(
+            styles.button,
+            { [`${styles.liked} talk-plugin-like-liked`]: alreadyReacted },
+            `${plugin}-button`
+          )}
           onClick={this.handleClick}
         >
           <span className={cn(`${plugin}-label`, styles.label)}>
-            {t(alreadyReacted ? 'talk-plugin-like.liked' : 'talk-plugin-like.like')}
+            {t(
+              alreadyReacted
+                ? 'talk-plugin-like.liked'
+                : 'talk-plugin-like.like'
+            )}
           </span>
           <Icon name="thumb_up" className={cn(`${plugin}-icon`, styles.icon)} />
           <span className={`${plugin}-count`}>{count > 0 && count}</span>
diff --git a/plugins/talk-plugin-like/client/index.js b/plugins/talk-plugin-like/client/index.js
index aaea3aaf4..7a3b2253f 100644
--- a/plugins/talk-plugin-like/client/index.js
+++ b/plugins/talk-plugin-like/client/index.js
@@ -4,6 +4,6 @@ import translations from './translations.yml';
 export default {
   translations,
   slots: {
-    commentReactions: [LikeButton]
+    commentReactions: [LikeButton],
   },
 };
diff --git a/plugins/talk-plugin-like/index.js b/plugins/talk-plugin-like/index.js
index 690577bed..7c4a2da3b 100644
--- a/plugins/talk-plugin-like/index.js
+++ b/plugins/talk-plugin-like/index.js
@@ -1,2 +1,2 @@
-const {getReactionConfig} = require('../../plugin-api/beta/server');
+const { getReactionConfig } = require('../../plugin-api/beta/server');
 module.exports = getReactionConfig('like');
diff --git a/plugins/talk-plugin-love/client/LoveButton.js b/plugins/talk-plugin-love/client/LoveButton.js
index 8c6a4848c..ece3a82b2 100644
--- a/plugins/talk-plugin-love/client/LoveButton.js
+++ b/plugins/talk-plugin-love/client/LoveButton.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import styles from './styles.css';
-import {withReaction} from 'plugin-api/beta/client/hocs';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { withReaction } from 'plugin-api/beta/client/hocs';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 import cn from 'classnames';
 
 const plugin = 'talk-plugin-love';
@@ -31,15 +31,23 @@ class LoveButton extends React.Component {
   };
 
   render() {
-    const {count, alreadyReacted} = this.props;
+    const { count, alreadyReacted } = this.props;
     return (
       <div className={cn(styles.container, `${plugin}-container`)}>
         <button
-          className={cn(styles.button, {[styles.loved]: alreadyReacted}, `${plugin}-button`)}
+          className={cn(
+            styles.button,
+            { [styles.loved]: alreadyReacted },
+            `${plugin}-button`
+          )}
           onClick={this.handleClick}
         >
           <span className={cn(`${plugin}-label`, styles.label)}>
-            {t(alreadyReacted ? 'talk-plugin-love.loved' : 'talk-plugin-love.love')}
+            {t(
+              alreadyReacted
+                ? 'talk-plugin-love.loved'
+                : 'talk-plugin-love.love'
+            )}
           </span>
           <Icon name="favorite" className={cn(`${plugin}-icon`, styles.icon)} />
           <span className={`${plugin}-count`}>{count > 0 && count}</span>
diff --git a/plugins/talk-plugin-love/client/index.js b/plugins/talk-plugin-love/client/index.js
index fd7174d81..57cf95e30 100644
--- a/plugins/talk-plugin-love/client/index.js
+++ b/plugins/talk-plugin-love/client/index.js
@@ -4,6 +4,6 @@ import translations from './translations.yml';
 export default {
   translations,
   slots: {
-    commentReactions: [LoveButton]
-  }
+    commentReactions: [LoveButton],
+  },
 };
diff --git a/plugins/talk-plugin-love/index.js b/plugins/talk-plugin-love/index.js
index b57fdec39..8587216b4 100644
--- a/plugins/talk-plugin-love/index.js
+++ b/plugins/talk-plugin-love/index.js
@@ -1,2 +1,2 @@
-const {getReactionConfig} = require('../../plugin-api/beta/server');
+const { getReactionConfig } = require('../../plugin-api/beta/server');
 module.exports = getReactionConfig('love');
diff --git a/plugins/talk-plugin-member-since/client/components/MemberSinceInfo.js b/plugins/talk-plugin-member-since/client/components/MemberSinceInfo.js
index 639f733d6..e35cf9bfc 100644
--- a/plugins/talk-plugin-member-since/client/components/MemberSinceInfo.js
+++ b/plugins/talk-plugin-member-since/client/components/MemberSinceInfo.js
@@ -1,15 +1,19 @@
 import React from 'react';
 import styles from './MemberSinceInfo.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 import cn from 'classnames';
 import moment from 'moment';
 
-export default ({memberSinceDate}) => (
+export default ({ memberSinceDate }) => (
   <div className={cn(styles.root, 'talk-plugin-member-since')}>
-    <Icon name="date_range" className={cn(styles.icon, 'talk-plugin-member-since-icon')} />
+    <Icon
+      name="date_range"
+      className={cn(styles.icon, 'talk-plugin-member-since-icon')}
+    />
     <span className={cn(styles.memberSince, 'talk-plugin-member-since-date')}>
-      {t('talk-plugin-member-since.member_since')}: {moment(new Date(memberSinceDate)).format('MMM DD, YYYY')}
+      {t('talk-plugin-member-since.member_since')}:{' '}
+      {moment(new Date(memberSinceDate)).format('MMM DD, YYYY')}
     </span>
   </div>
 );
diff --git a/plugins/talk-plugin-member-since/client/containers/MemberSinceInfo.js b/plugins/talk-plugin-member-since/client/containers/MemberSinceInfo.js
index 81e0600cd..7e6a23288 100644
--- a/plugins/talk-plugin-member-since/client/containers/MemberSinceInfo.js
+++ b/plugins/talk-plugin-member-since/client/containers/MemberSinceInfo.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import MemberSinceInfo from '../components/MemberSinceInfo';
-import {compose, gql} from 'react-apollo';
-import {withFragments} from 'plugin-api/beta/client/hocs';
+import { compose, gql } from 'react-apollo';
+import { withFragments } from 'plugin-api/beta/client/hocs';
 
 class MemberSinceInfoContainer extends React.Component {
   render() {
-    return <MemberSinceInfo
-      memberSinceDate={this.props.comment.user.created_at}
-    />;
+    return (
+      <MemberSinceInfo memberSinceDate={this.props.comment.user.created_at} />
+    );
   }
 }
 
@@ -18,11 +18,10 @@ const withMemberSinceInfoFragments = withFragments({
         username
         created_at
       }
-    }`,
+    }
+  `,
 });
 
-const enhance = compose(
-  withMemberSinceInfoFragments,
-);
+const enhance = compose(withMemberSinceInfoFragments);
 
 export default enhance(MemberSinceInfoContainer);
diff --git a/plugins/talk-plugin-member-since/client/index.js b/plugins/talk-plugin-member-since/client/index.js
index 12aed5e28..2091e4805 100644
--- a/plugins/talk-plugin-member-since/client/index.js
+++ b/plugins/talk-plugin-member-since/client/index.js
@@ -1,10 +1,10 @@
 import MemberSinceInfo from './containers/MemberSinceInfo';
 import translations from './translations.yml';
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 
 export default {
   slots: {
-    authorMenuInfos: [MemberSinceInfo]
+    authorMenuInfos: [MemberSinceInfo],
   },
   translations,
   fragments: {
@@ -15,7 +15,8 @@ export default {
             created_at
           }
         }
-      }`,
+      }
+    `,
   },
   mutations: {
     PostComment: () => ({
@@ -24,10 +25,10 @@ export default {
           comment: {
             user: {
               created_at: new Date(),
-              __typename: 'User'
+              __typename: 'User',
             },
-            __typename: 'Comment'
-          }
+            __typename: 'Comment',
+          },
         },
       },
     }),
diff --git a/plugins/talk-plugin-moderation-actions/client/actions.js b/plugins/talk-plugin-moderation-actions/client/actions.js
index 6e87f94ca..caad0cdc4 100644
--- a/plugins/talk-plugin-moderation-actions/client/actions.js
+++ b/plugins/talk-plugin-moderation-actions/client/actions.js
@@ -1,6 +1,11 @@
-import {OPEN_MENU, CLOSE_MENU, OPEN_BAN_DIALOG, CLOSE_BAN_DIALOG} from './constants';
+import {
+  OPEN_MENU,
+  CLOSE_MENU,
+  OPEN_BAN_DIALOG,
+  CLOSE_BAN_DIALOG,
+} from './constants';
 
-export const openMenu = (id) => ({
+export const openMenu = id => ({
   type: OPEN_MENU,
   id,
 });
@@ -9,11 +14,11 @@ export const closeMenu = () => ({
   type: CLOSE_MENU,
 });
 
-export const openBanDialog = ({commentId, authorId, commentStatus}) => ({
+export const openBanDialog = ({ commentId, authorId, commentStatus }) => ({
   type: OPEN_BAN_DIALOG,
   commentId,
   authorId,
-  commentStatus
+  commentStatus,
 });
 
 export const closeBanDialog = () => ({
diff --git a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
index 0f16ca595..331a75444 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ApproveCommentAction.js
@@ -1,25 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './styles.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 import cn from 'classnames';
 
-const isApproved = (status) => (status === 'ACCEPTED');
+const isApproved = status => status === 'ACCEPTED';
 
-const ApproveCommentAction = ({approveComment, comment: {status}}) => (
+const ApproveCommentAction = ({ approveComment, comment: { status } }) =>
   isApproved(status) ? (
     <span className={styles.approved}>
       <Icon name="check_circle" className={styles.icon} />
       {t('talk-plugin-moderation-actions.approved_comment')}
     </span>
   ) : (
-    <button className={cn(styles.button, 'talk-plugin-moderation-actions-approve')} onClick={approveComment}>
+    <button
+      className={cn(styles.button, 'talk-plugin-moderation-actions-approve')}
+      onClick={approveComment}
+    >
       <Icon name="done" className={styles.icon} />
       {t('talk-plugin-moderation-actions.approve_comment')}
     </button>
-  )
-);
+  );
 
 ApproveCommentAction.propTypes = {
   approveComment: PropTypes.func,
diff --git a/plugins/talk-plugin-moderation-actions/client/components/BanUserAction.js b/plugins/talk-plugin-moderation-actions/client/components/BanUserAction.js
index 75956a0b6..ce59d4158 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/BanUserAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/BanUserAction.js
@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './styles.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 import cn from 'classnames';
 
-const BanUserAction = ({onBanUser}) => (
-  <button 
+const BanUserAction = ({ onBanUser }) => (
+  <button
     className={cn(styles.button, 'talk-plugin-moderation-actions-ban')}
-    onClick={onBanUser} >
+    onClick={onBanUser}
+  >
     <Icon name="block" className={styles.icon} />
     {t('talk-plugin-moderation-actions.ban_user')}
   </button>
diff --git a/plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js b/plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js
index 9db509869..b35179621 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/BanUserDialog.js
@@ -2,12 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './BanUserDialog.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Dialog, Button} from 'plugin-api/beta/client/components/ui';
+import { t } from 'plugin-api/beta/client/services';
+import { Dialog, Button } from 'plugin-api/beta/client/components/ui';
 
-const BanUserDialog = ({showBanDialog, closeBanDialog, banUser}) => (
-  <Dialog open={showBanDialog} className={cn(styles.dialog, 'talk-ban-user-dialog')}>
-    <span className={styles.close} onClick={closeBanDialog}>×</span>
+const BanUserDialog = ({ showBanDialog, closeBanDialog, banUser }) => (
+  <Dialog
+    open={showBanDialog}
+    className={cn(styles.dialog, 'talk-ban-user-dialog')}
+  >
+    <span className={styles.close} onClick={closeBanDialog}>
+      ×
+    </span>
     <h2>{t('talk-plugin-moderation-actions.ban_user_dialog_headline')}</h2>
     <h3>{t('talk-plugin-moderation-actions.ban_user_dialog_sub')}</h3>
     <p className={styles.copy}>
@@ -18,14 +23,16 @@ const BanUserDialog = ({showBanDialog, closeBanDialog, banUser}) => (
         cStyle="cancel"
         onClick={closeBanDialog}
         className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
-        raised >
+        raised
+      >
         {t('talk-plugin-moderation-actions.ban_user_dialog_cancel')}
       </Button>
       <Button
         cStyle="black"
         onClick={banUser}
         className={cn(styles.confirm, 'talk-ban-user-dialog-button-confirm')}
-        raised >
+        raised
+      >
         {t('talk-plugin-moderation-actions.ban_user_dialog_yes')}
       </Button>
     </div>
diff --git a/plugins/talk-plugin-moderation-actions/client/components/Menu.js b/plugins/talk-plugin-moderation-actions/client/components/Menu.js
index 29120423e..3ce20559f 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/Menu.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/Menu.js
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './Menu.css';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 
-const Menu = ({className = '', children}) => (
+const Menu = ({ className = '', children }) => (
   <div className={cn(styles.menu, className)}>
     <h3 className={styles.headline}>
       {t('talk-plugin-moderation-actions.moderation_actions')}
diff --git a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
index e27626298..68abce826 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/ModerationActions.js
@@ -3,35 +3,58 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import Menu from './Menu';
 import styles from './ModerationActions.css';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 import RejectCommentAction from '../containers/RejectCommentAction';
 import ApproveCommentAction from '../containers/ApproveCommentAction';
 import BanUserAction from '../containers/BanUserAction';
-import {Slot} from 'plugin-api/beta/client/components';
+import { Slot } from 'plugin-api/beta/client/components';
 
 export default class ModerationActions extends React.Component {
   render() {
-    const {comment, root, asset, data, menuVisible, toogleMenu, hideMenu} = this.props;
+    const {
+      comment,
+      root,
+      asset,
+      data,
+      menuVisible,
+      toogleMenu,
+      hideMenu,
+    } = this.props;
 
-    return(
+    return (
       <ClickOutside onClickOutside={hideMenu}>
-        <div className={cn(styles.moderationActions, 'talk-plugin-moderation-actions')}>
-          <span onClick={toogleMenu} className={cn(styles.arrow, 'talk-plugin-moderation-actions-arrow')}>
-            {menuVisible ? <Icon name="keyboard_arrow_up" className={styles.icon} /> : 
-              <Icon name="keyboard_arrow_down" className={styles.icon} />}
+        <div
+          className={cn(
+            styles.moderationActions,
+            'talk-plugin-moderation-actions'
+          )}
+        >
+          <span
+            onClick={toogleMenu}
+            className={cn(styles.arrow, 'talk-plugin-moderation-actions-arrow')}
+          >
+            {menuVisible ? (
+              <Icon name="keyboard_arrow_up" className={styles.icon} />
+            ) : (
+              <Icon name="keyboard_arrow_down" className={styles.icon} />
+            )}
           </span>
           {menuVisible && (
             <Menu className="talk-plugin-modetarion-actions-menu">
               <Slot
                 className="talk-plugin-modetarion-actions-slot"
                 fill="moderationActions"
-                queryData={{comment, asset}}
+                queryData={{ comment, asset }}
                 data={data}
               />
               <ApproveCommentAction comment={comment} hideMenu={hideMenu} />
               <RejectCommentAction comment={comment} hideMenu={hideMenu} />
-              <BanUserAction comment={comment} root={root} hideMenu={hideMenu} />
+              <BanUserAction
+                comment={comment}
+                root={root}
+                hideMenu={hideMenu}
+              />
             </Menu>
           )}
         </div>
diff --git a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js
index 48a31c864..951530c00 100644
--- a/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/components/RejectCommentAction.js
@@ -2,11 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './styles.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
 
-const RejectCommentAction = ({rejectComment}) => (
-  <button className={cn(styles.button, 'talk-plugin-moderation-actions-reject')} onClick={rejectComment}>
+const RejectCommentAction = ({ rejectComment }) => (
+  <button
+    className={cn(styles.button, 'talk-plugin-moderation-actions-reject')}
+    onClick={rejectComment}
+  >
     <Icon name="clear" className={styles.icon} />
     {t('talk-plugin-moderation-actions.reject_comment')}
   </button>
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
index 4c4a457a2..70cb2ce4b 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/ApproveCommentAction.js
@@ -1,38 +1,44 @@
 import React from 'react';
-import {compose} from 'react-apollo';
-import {bindActionCreators} from 'redux';
-import {getErrorMessages} from 'plugin-api/beta/client/utils';
-import {notify} from 'plugin-api/beta/client/actions/notification';
+import { compose } from 'react-apollo';
+import { bindActionCreators } from 'redux';
+import { getErrorMessages } from 'plugin-api/beta/client/utils';
+import { notify } from 'plugin-api/beta/client/actions/notification';
 import ApproveCommentAction from '../components/ApproveCommentAction';
-import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';
+import { connect, withSetCommentStatus } from 'plugin-api/beta/client/hocs';
 
 class ApproveCommentActionContainer extends React.Component {
-
   approveComment = async () => {
-    const {setCommentStatus, comment, hideMenu, notify} = this.props;
+    const { setCommentStatus, comment, hideMenu, notify } = this.props;
 
     try {
       await setCommentStatus({
         commentId: comment.id,
-        status: 'ACCEPTED'
+        status: 'ACCEPTED',
       });
-    }
-    catch(err) {
+    } catch (err) {
       notify('error', getErrorMessages(err));
     }
 
     hideMenu();
-  }
+  };
 
   render() {
-    return <ApproveCommentAction comment={this.props.comment} approveComment={this.approveComment}/>;
+    return (
+      <ApproveCommentAction
+        comment={this.props.comment}
+        approveComment={this.approveComment}
+      />
+    );
   }
 }
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    notify
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      notify,
+    },
+    dispatch
+  );
 
 const enhance = compose(
   connect(null, mapDispatchToProps),
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/BanUserAction.js b/plugins/talk-plugin-moderation-actions/client/containers/BanUserAction.js
index 1e2f1925d..c5fdb1e32 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/BanUserAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/BanUserAction.js
@@ -1,36 +1,35 @@
 import React from 'react';
-import {compose} from 'react-apollo';
-import {openBanDialog} from '../actions';
-import {bindActionCreators} from 'redux';
+import { compose } from 'react-apollo';
+import { openBanDialog } from '../actions';
+import { bindActionCreators } from 'redux';
 import BanUserAction from '../components/BanUserAction';
-import {connect} from 'plugin-api/beta/client/hocs';
+import { connect } from 'plugin-api/beta/client/hocs';
 
 class BanUserActionContainer extends React.Component {
   onBanUser = () => {
     this.props.openBanDialog({
       commentId: this.props.comment.id,
       commentStatus: this.props.comment.status,
-      authorId: this.props.comment.user.id
+      authorId: this.props.comment.user.id,
     });
-  }
+  };
 
   render() {
-    const {root: {me}, comment} = this.props;
-    return (me.id !== comment.user.id) ?
-      <BanUserAction 
-        onBanUser={this.onBanUser}
-        comment={this.props.comment}
-      /> : null;
+    const { root: { me }, comment } = this.props;
+    return me.id !== comment.user.id ? (
+      <BanUserAction onBanUser={this.onBanUser} comment={this.props.comment} />
+    ) : null;
   }
 }
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    openBanDialog
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      openBanDialog,
+    },
+    dispatch
+  );
 
-const enhance = compose(
-  connect(null, mapDispatchToProps)
-);
+const enhance = compose(connect(null, mapDispatchToProps));
 
 export default enhance(BanUserActionContainer);
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/BanUserDialog.js b/plugins/talk-plugin-moderation-actions/client/containers/BanUserDialog.js
index 2c081580a..6d64addca 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/BanUserDialog.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/BanUserDialog.js
@@ -1,15 +1,18 @@
-
 import React from 'react';
-import {compose} from 'react-apollo';
-import {bindActionCreators} from 'redux';
-import {closeBanDialog, closeMenu} from '../actions';
-import {notify} from 'plugin-api/beta/client/actions/notification';
-import {connect, withSetCommentStatus, withSetUserStatus} from 'plugin-api/beta/client/hocs';
-import {getErrorMessages} from 'plugin-api/beta/client/utils';
+import PropTypes from 'prop-types';
+import { compose } from 'react-apollo';
+import { bindActionCreators } from 'redux';
+import { closeBanDialog, closeMenu } from '../actions';
+import { notify } from 'plugin-api/beta/client/actions/notification';
+import {
+  connect,
+  withSetCommentStatus,
+  withBanUser,
+} from 'plugin-api/beta/client/hocs';
+import { getErrorMessages } from 'plugin-api/beta/client/utils';
 import BanUserDialog from '../components/BanUserDialog';
 
-class BanUserDialogContainer extends React.Component {  
-
+class BanUserDialogContainer extends React.Component {
   banUser = async () => {
     const {
       notify,
@@ -19,13 +22,13 @@ class BanUserDialogContainer extends React.Component {
       closeMenu,
       closeBanDialog,
       setCommentStatus,
-      setUserStatus
+      banUser,
     } = this.props;
 
     try {
-      await setUserStatus({
-        userId: authorId,
-        status: 'BANNED'
+      await banUser({
+        id: authorId,
+        message: '',
       });
 
       closeMenu();
@@ -34,19 +37,18 @@ class BanUserDialogContainer extends React.Component {
       if (commentStatus !== 'REJECTED') {
         await setCommentStatus({
           commentId: commentId,
-          status: 'REJECTED'
+          status: 'REJECTED',
         });
       }
-    }
-    catch(err) {
+    } catch (err) {
       notify('error', getErrorMessages(err));
     }
-  }
+  };
 
   render() {
     return (
-      <BanUserDialog 
-        banUser={this.banUser} 
+      <BanUserDialog
+        banUser={this.banUser}
         showBanDialog={this.props.showBanDialog}
         closeBanDialog={this.props.closeBanDialog}
       />
@@ -54,23 +56,31 @@ class BanUserDialogContainer extends React.Component {
   }
 }
 
-const mapStateToProps = ({talkPluginModerationActions: state}) => ({
+BanUserDialogContainer.propTypes = {
+  showBanDialog: PropTypes.bool,
+  closeBanDialog: PropTypes.func,
+};
+
+const mapStateToProps = ({ talkPluginModerationActions: state }) => ({
   showBanDialog: state.showBanDialog,
   commentId: state.commentId,
-  authorId: state.authorId
+  authorId: state.authorId,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    notify,
-    closeBanDialog,
-    closeMenu
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      notify,
+      closeBanDialog,
+      closeMenu,
+    },
+    dispatch
+  );
 
 const enhance = compose(
   connect(mapStateToProps, mapDispatchToProps),
   withSetCommentStatus,
-  withSetUserStatus
+  withBanUser
 );
 
 export default enhance(BanUserDialogContainer);
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js
index 80df3fc2a..9e0edb9b3 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/ModerationActions.js
@@ -1,16 +1,14 @@
 import React from 'react';
-import {bindActionCreators} from 'redux';
-import {gql, compose} from 'react-apollo';
-import {openMenu, closeMenu} from '../actions';
-import {can} from 'plugin-api/beta/client/services';
-import {getShallowChanges} from 'plugin-api/beta/client/utils';
+import { bindActionCreators } from 'redux';
+import { gql, compose } from 'react-apollo';
+import { openMenu, closeMenu } from '../actions';
+import { can } from 'plugin-api/beta/client/services';
+import { getShallowChanges } from 'plugin-api/beta/client/utils';
 import ModerationActions from '../components/ModerationActions';
-import {connect, excludeIf, withFragments} from 'plugin-api/beta/client/hocs';
+import { connect, excludeIf, withFragments } from 'plugin-api/beta/client/hocs';
 
 class ModerationActionsContainer extends React.Component {
-
   shouldComponentUpdate(nextProps) {
-    
     // Specifically handle `showMenuForComment` if it is the only change.
     const changes = getShallowChanges(this.props, nextProps);
     if (changes.length === 1 && changes[0] === 'showMenuForComment') {
@@ -22,7 +20,7 @@ class ModerationActionsContainer extends React.Component {
         return false;
       }
     }
-    
+
     // Prevent Slot from rerendering when no props has shallowly changed.
     return changes.length !== 0;
   }
@@ -33,37 +31,42 @@ class ModerationActionsContainer extends React.Component {
     } else {
       this.props.openMenu(this.props.comment.id);
     }
-  }
+  };
 
   hideMenu = () => {
     if (this.props.showMenuForComment === this.props.comment.id) {
       this.props.closeMenu();
     }
-  }
+  };
 
   render() {
-    return <ModerationActions
-      data={this.props.data}
-      root={this.props.root}
-      asset={this.props.asset}
-      comment={this.props.comment}
-      toogleMenu={this.toogleMenu}
-      hideMenu={this.hideMenu}
-      menuVisible={this.props.showMenuForComment === this.props.comment.id}
-    />;
+    return (
+      <ModerationActions
+        data={this.props.data}
+        root={this.props.root}
+        asset={this.props.asset}
+        comment={this.props.comment}
+        toogleMenu={this.toogleMenu}
+        hideMenu={this.hideMenu}
+        menuVisible={this.props.showMenuForComment === this.props.comment.id}
+      />
+    );
   }
 }
 
-const mapStateToProps = ({auth, talkPluginModerationActions: state}) => ({
+const mapStateToProps = ({ auth, talkPluginModerationActions: state }) => ({
   user: auth.user,
   showMenuForComment: state.showMenuForComment,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    openMenu,
-    closeMenu,
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      openMenu,
+      closeMenu,
+    },
+    dispatch
+  );
 
 const enhance = compose(
   connect(mapStateToProps, mapDispatchToProps),
@@ -73,13 +76,13 @@ const enhance = compose(
         me {
           id
         }
-      }`
-    ,
+      }
+    `,
     asset: gql`
       fragment TalkModerationActions_asset on Asset {
         id
-      }`
-    ,
+      }
+    `,
     comment: gql`
       fragment TalkModerationActions_comment on Comment {
         id
@@ -93,8 +96,9 @@ const enhance = compose(
           }
         }
       }
-  `}),
-  excludeIf((props) => !can(props.user, 'MODERATE_COMMENTS')),
+    `,
+  }),
+  excludeIf(props => !can(props.user, 'MODERATE_COMMENTS'))
 );
 
 export default enhance(ModerationActionsContainer);
diff --git a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
index e744eb1d7..e49fdddba 100644
--- a/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
+++ b/plugins/talk-plugin-moderation-actions/client/containers/RejectCommentAction.js
@@ -1,38 +1,39 @@
 import React from 'react';
-import {compose} from 'react-apollo';
-import {bindActionCreators} from 'redux';
-import {getErrorMessages} from 'plugin-api/beta/client/utils';
-import {notify} from 'plugin-api/beta/client/actions/notification';
+import { compose } from 'react-apollo';
+import { bindActionCreators } from 'redux';
+import { getErrorMessages } from 'plugin-api/beta/client/utils';
+import { notify } from 'plugin-api/beta/client/actions/notification';
 import RejectCommentAction from '../components/RejectCommentAction';
-import {connect, withSetCommentStatus} from 'plugin-api/beta/client/hocs';
+import { connect, withSetCommentStatus } from 'plugin-api/beta/client/hocs';
 
 class RejectCommentActionContainer extends React.Component {
-
   rejectComment = async () => {
-    const {setCommentStatus, comment, hideMenu, notify} = this.props;
+    const { setCommentStatus, comment, hideMenu, notify } = this.props;
 
     try {
       await setCommentStatus({
         commentId: comment.id,
-        status: 'REJECTED'
+        status: 'REJECTED',
       });
-    }
-    catch(err) {
+    } catch (err) {
       notify('error', getErrorMessages(err));
     }
 
     hideMenu();
-  }
+  };
 
   render() {
-    return <RejectCommentAction rejectComment={this.rejectComment}/>;
+    return <RejectCommentAction rejectComment={this.rejectComment} />;
   }
 }
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    notify
-  }, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      notify,
+    },
+    dispatch
+  );
 
 const enhance = compose(
   connect(null, mapDispatchToProps),
diff --git a/plugins/talk-plugin-moderation-actions/client/index.js b/plugins/talk-plugin-moderation-actions/client/index.js
index c4d3a0dfc..ebe6e9dd7 100644
--- a/plugins/talk-plugin-moderation-actions/client/index.js
+++ b/plugins/talk-plugin-moderation-actions/client/index.js
@@ -9,5 +9,5 @@ export default {
     commentInfoBar: [ModerationActions],
   },
   reducer,
-  translations
+  translations,
 };
diff --git a/plugins/talk-plugin-moderation-actions/client/reducer.js b/plugins/talk-plugin-moderation-actions/client/reducer.js
index b2ace4d85..387c08673 100644
--- a/plugins/talk-plugin-moderation-actions/client/reducer.js
+++ b/plugins/talk-plugin-moderation-actions/client/reducer.js
@@ -1,42 +1,47 @@
-import {OPEN_MENU, CLOSE_MENU, OPEN_BAN_DIALOG, CLOSE_BAN_DIALOG} from './constants';
+import {
+  OPEN_MENU,
+  CLOSE_MENU,
+  OPEN_BAN_DIALOG,
+  CLOSE_BAN_DIALOG,
+} from './constants';
 
 const initialState = {
   showMenuForComment: null,
   showBanDialog: false,
   authorId: null,
   commentId: null,
-  commentStatus: null
+  commentStatus: null,
 };
 
 export default function reducer(state = initialState, action) {
   switch (action.type) {
-  case OPEN_MENU:
-    return {
-      ...state,
-      showMenuForComment: action.id
-    };
-  case CLOSE_MENU:
-    return {
-      ...state,
-      showMenuForComment: null
-    };
-  case OPEN_BAN_DIALOG:
-    return {
-      ...state,
-      showBanDialog: true,
-      authorId: action.authorId,
-      commentId: action.commentId,
-      commentStatus: action.commentStatus
-    };
-  case CLOSE_BAN_DIALOG:
-    return {
-      ...state,
-      showBanDialog: false,
-      authorId: null,
-      commentId: null,
-      commentStatus: null
-    };
-  default :
-    return state;
+    case OPEN_MENU:
+      return {
+        ...state,
+        showMenuForComment: action.id,
+      };
+    case CLOSE_MENU:
+      return {
+        ...state,
+        showMenuForComment: null,
+      };
+    case OPEN_BAN_DIALOG:
+      return {
+        ...state,
+        showBanDialog: true,
+        authorId: action.authorId,
+        commentId: action.commentId,
+        commentStatus: action.commentStatus,
+      };
+    case CLOSE_BAN_DIALOG:
+      return {
+        ...state,
+        showBanDialog: false,
+        authorId: null,
+        commentId: null,
+        commentStatus: null,
+      };
+    default:
+      return state;
   }
 }
diff --git a/plugins/talk-plugin-offtopic/client/actions.js b/plugins/talk-plugin-offtopic/client/actions.js
index 9cb3947f8..f1bfbfed5 100644
--- a/plugins/talk-plugin-offtopic/client/actions.js
+++ b/plugins/talk-plugin-offtopic/client/actions.js
@@ -1,5 +1,5 @@
-import {OFFTOPIC_TOGGLE_CHECKBOX} from './constants';
+import { OFFTOPIC_TOGGLE_CHECKBOX } from './constants';
 
 export const toggleCheckbox = () => ({
-  type: OFFTOPIC_TOGGLE_CHECKBOX
+  type: OFFTOPIC_TOGGLE_CHECKBOX,
 });
diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js b/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js
index 7f4ec3503..97916b900 100644
--- a/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js
@@ -1,10 +1,9 @@
 import React from 'react';
 import styles from './OffTopicCheckbox.css';
 
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 
 export default class OffTopicCheckbox extends React.Component {
-
   label = 'OFF_TOPIC';
 
   componentDidMount() {
@@ -18,28 +17,30 @@ export default class OffTopicCheckbox extends React.Component {
     this.props.unregisterHook(this.clearTagsHook);
   }
 
-  handleChange = (e) => {
-    const {addTag, removeTag} = this.props;
+  handleChange = e => {
+    const { addTag, removeTag } = this.props;
     if (e.target.checked) {
       addTag(this.label);
     } else {
       const idx = this.props.tags.indexOf(this.label);
       removeTag(idx);
     }
-  }
+  };
 
   render() {
     const checked = this.props.tags.indexOf(this.label) >= 0;
     return (
       <div className={styles.offTopic}>
-        {
-          !this.props.isReply ? (
-            <label className={styles.offTopicLabel}>
-              <input type="checkbox" onChange={this.handleChange} checked={checked}/>
-              {t('off_topic')}
-            </label>
-          ) : null
-        }
+        {!this.props.isReply ? (
+          <label className={styles.offTopicLabel}>
+            <input
+              type="checkbox"
+              onChange={this.handleChange}
+              checked={checked}
+            />
+            {t('off_topic')}
+          </label>
+        ) : null}
       </div>
     );
   }
diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicFilter.js b/plugins/talk-plugin-offtopic/client/components/OffTopicFilter.js
index f8d2ab6c6..f706cd567 100644
--- a/plugins/talk-plugin-offtopic/client/components/OffTopicFilter.js
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicFilter.js
@@ -1,23 +1,24 @@
 import React from 'react';
 import styles from './OffTopicFilter.css';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 
 export default class OffTopicFilter extends React.Component {
-
   tag = 'OFF_TOPIC';
   className = 'talk-plugin-off-topic-comment';
-  cn = {[this.className] : {tags: [this.tag]}};
+  cn = { [this.className]: { tags: [this.tag] } };
 
-  handleChange = (e) => {
+  handleChange = e => {
     if (e.target.checked) {
       this.props.addCommentClassName(this.cn);
       this.props.toggleCheckbox();
     } else {
-      const idx = this.props.commentClassNames.findIndex((i) => i[this.className]);
+      const idx = this.props.commentClassNames.findIndex(
+        i => i[this.className]
+      );
       this.props.removeCommentClassName(idx);
       this.props.toggleCheckbox();
     }
-  }
+  };
 
   render() {
     return (
diff --git a/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js b/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js
index 0e643ca04..415f7815e 100644
--- a/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js
+++ b/plugins/talk-plugin-offtopic/client/components/OffTopicTag.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import styles from './OffTopicTag.css';
-import {t} from 'plugin-api/beta/client/services';
-import {isTagged} from 'plugin-api/beta/client/utils';
+import { t } from 'plugin-api/beta/client/services';
+import { isTagged } from 'plugin-api/beta/client/utils';
 import cn from 'classnames';
 
-export default (props) => (
+export default props => (
   <span>
-    {
-      isTagged(props.comment.tags, 'OFF_TOPIC') && props.depth === 0 ? (
-        <span className={cn(styles.tag, 'talk-stream-comment-offtopic-tag-label')}>
-          {t('off_topic')}
-        </span>
-      ) : null
-    }
+    {isTagged(props.comment.tags, 'OFF_TOPIC') && props.depth === 0 ? (
+      <span
+        className={cn(styles.tag, 'talk-stream-comment-offtopic-tag-label')}
+      >
+        {t('off_topic')}
+      </span>
+    ) : null}
   </span>
 );
diff --git a/plugins/talk-plugin-offtopic/client/containers/OffTopicCheckbox.js b/plugins/talk-plugin-offtopic/client/containers/OffTopicCheckbox.js
index f8471344b..e8c07bee3 100644
--- a/plugins/talk-plugin-offtopic/client/containers/OffTopicCheckbox.js
+++ b/plugins/talk-plugin-offtopic/client/containers/OffTopicCheckbox.js
@@ -1,14 +1,14 @@
-import {bindActionCreators} from 'redux';
-import {addTag, removeTag} from 'plugin-api/alpha/client/actions';
-import {commentBoxTagsSelector} from 'plugin-api/alpha/client/selectors';
-import {connect} from 'plugin-api/beta/client/hocs';
+import { bindActionCreators } from 'redux';
+import { addTag, removeTag } from 'plugin-api/alpha/client/actions';
+import { commentBoxTagsSelector } from 'plugin-api/alpha/client/selectors';
+import { connect } from 'plugin-api/beta/client/hocs';
 import OffTopicCheckbox from '../components/OffTopicCheckbox';
 
-const mapStateToProps = (state) => ({
-  tags: commentBoxTagsSelector(state)
+const mapStateToProps = state => ({
+  tags: commentBoxTagsSelector(state),
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({addTag, removeTag}, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ addTag, removeTag }, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);
diff --git a/plugins/talk-plugin-offtopic/client/containers/OffTopicFilter.js b/plugins/talk-plugin-offtopic/client/containers/OffTopicFilter.js
index 7eab8c526..b63cfb13e 100644
--- a/plugins/talk-plugin-offtopic/client/containers/OffTopicFilter.js
+++ b/plugins/talk-plugin-offtopic/client/containers/OffTopicFilter.js
@@ -1,24 +1,24 @@
-import {connect} from 'plugin-api/beta/client/hocs';
-import {bindActionCreators} from 'redux';
-import {toggleCheckbox} from '../actions';
-import {commentClassNamesSelector} from 'plugin-api/alpha/client/selectors';
+import { connect } from 'plugin-api/beta/client/hocs';
+import { bindActionCreators } from 'redux';
+import { toggleCheckbox } from '../actions';
+import { commentClassNamesSelector } from 'plugin-api/alpha/client/selectors';
 import OffTopicFilter from '../components/OffTopicFilter';
 import {
   addCommentClassName,
-  removeCommentClassName
+  removeCommentClassName,
 } from 'plugin-api/alpha/client/actions';
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
   commentClassNames: commentClassNamesSelector(state),
-  checked: state.talkPluginOfftopic.checked
+  checked: state.talkPluginOfftopic.checked,
 });
 
-const mapDispatchToProps = (dispatch) =>
+const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       toggleCheckbox,
       addCommentClassName,
-      removeCommentClassName
+      removeCommentClassName,
     },
     dispatch
   );
diff --git a/plugins/talk-plugin-offtopic/client/containers/OffTopicTag.js b/plugins/talk-plugin-offtopic/client/containers/OffTopicTag.js
index bf57dc5cb..fd5951acf 100644
--- a/plugins/talk-plugin-offtopic/client/containers/OffTopicTag.js
+++ b/plugins/talk-plugin-offtopic/client/containers/OffTopicTag.js
@@ -1,6 +1,6 @@
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import OffTopicTag from '../components/OffTopicTag';
-import {withFragments} from 'plugin-api/beta/client/hocs';
+import { withFragments } from 'plugin-api/beta/client/hocs';
 
 export default withFragments({
   comment: gql`
@@ -11,5 +11,5 @@ export default withFragments({
         }
       }
     }
-  `
+  `,
 })(OffTopicTag);
diff --git a/plugins/talk-plugin-offtopic/client/index.js b/plugins/talk-plugin-offtopic/client/index.js
index f7156a0ec..168f12ab9 100644
--- a/plugins/talk-plugin-offtopic/client/index.js
+++ b/plugins/talk-plugin-offtopic/client/index.js
@@ -15,6 +15,6 @@ export default {
   slots: {
     commentInputDetailArea: [OffTopicCheckbox],
     commentInfoBar: [OffTopicTag],
-    viewingOptionsFilter: [OffTopicFilter]
-  }
+    viewingOptionsFilter: [OffTopicFilter],
+  },
 };
diff --git a/plugins/talk-plugin-offtopic/client/reducer.js b/plugins/talk-plugin-offtopic/client/reducer.js
index adab987a0..35081eb08 100644
--- a/plugins/talk-plugin-offtopic/client/reducer.js
+++ b/plugins/talk-plugin-offtopic/client/reducer.js
@@ -1,18 +1,18 @@
-import {OFFTOPIC_TOGGLE_CHECKBOX} from './constants';
+import { OFFTOPIC_TOGGLE_CHECKBOX } from './constants';
 
 const initialState = {
-  checked: false
+  checked: false,
 };
 
-export default function offTopic (state = initialState, action) {
+export default function offTopic(state = initialState, action) {
   switch (action.type) {
-  case OFFTOPIC_TOGGLE_CHECKBOX: {
-    return {
-      ...state,
-      checked: !state.checked
-    };
-  }
-  default :
-    return state;
+    case OFFTOPIC_TOGGLE_CHECKBOX: {
+      return {
+        ...state,
+        checked: !state.checked,
+      };
+    }
+    default:
+      return state;
   }
 }
diff --git a/plugins/talk-plugin-offtopic/index.js b/plugins/talk-plugin-offtopic/index.js
index eae6a2ef7..fdccbdd9b 100644
--- a/plugins/talk-plugin-offtopic/index.js
+++ b/plugins/talk-plugin-offtopic/index.js
@@ -5,10 +5,10 @@ module.exports = {
       permissions: {
         public: true,
         self: true,
-        roles: []
+        roles: [],
       },
       models: ['COMMENTS'],
-      created_at: new Date()
-    }
-  ]
+      created_at: new Date(),
+    },
+  ],
 };
diff --git a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
index d470ed2c9..5e0fb21d8 100644
--- a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
+++ b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
@@ -1,39 +1,38 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './styles.css';
-import {t} from 'plugin-api/beta/client/services';
-import {ClickOutside} from 'plugin-api/beta/client/components';
-import {Icon, Button} from 'plugin-api/beta/client/components/ui';
+import { t } from 'plugin-api/beta/client/services';
+import { ClickOutside } from 'plugin-api/beta/client/components';
+import { Icon, Button } from 'plugin-api/beta/client/components/ui';
 
 const name = 'talk-plugin-permalink';
 
 export default class PermalinkButton extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props);
 
     this.state = {
       popoverOpen: false,
       copySuccessful: null,
-      copyFailure: null
+      copyFailure: null,
     };
-
   }
 
   toggle = () => {
     this.popover.style.top = `${this.linkButton.offsetTop - 80}px`;
 
     this.setState({
-      popoverOpen: !this.state.popoverOpen
+      popoverOpen: !this.state.popoverOpen,
     });
-  }
+  };
 
   handleClickOutside = () => {
     if (this.state.popoverOpen) {
       this.setState({
-        popoverOpen: false
+        popoverOpen: false,
       });
     }
-  }
+  };
 
   copyPermalink = () => {
     this.permalinkInput.select();
@@ -41,52 +40,56 @@ export default class PermalinkButton extends React.Component {
       document.execCommand('copy');
       this.setState({
         copySuccessful: true,
-        copyFailure: null
+        copyFailure: null,
       });
     } catch (err) {
       this.setState({
         copyFailure: true,
-        copySuccessful: null
+        copySuccessful: null,
       });
     }
 
     this.timeout = window.setTimeout(() => {
       this.setState({
         copyFailure: null,
-        copySuccessful: null
+        copySuccessful: null,
       });
     }, 3000);
-  }
+  };
 
   componentWillUnmount() {
     window.clearTimeout(this.timeout);
   }
 
-  render () {
-    const {copySuccessful, copyFailure, popoverOpen} = this.state;
-    const {asset, comment} = this.props;
+  render() {
+    const { copySuccessful, copyFailure, popoverOpen } = this.state;
+    const { asset, comment } = this.props;
     return (
       <ClickOutside onClickOutside={this.handleClickOutside}>
         <div className={cn(`${name}-container`, styles.container)}>
-
           <button
-            ref={(ref) => this.linkButton = ref}
+            ref={ref => (this.linkButton = ref)}
             onClick={this.toggle}
-            className={cn(`${name}-button`, styles.button)}>
-            <span className='talk-plugin-permalink-button-label'>
+            className={cn(`${name}-button`, styles.button)}
+          >
+            <span className="talk-plugin-permalink-button-label">
               {t('permalink')}
             </span>
-            <Icon name="link" className={styles.icon}/>
+            <Icon name="link" className={styles.icon} />
           </button>
 
           <div
-            ref={(ref) => this.popover = ref}
-            className={cn([`${name}-popover`, styles.popover, {[styles.active]: popoverOpen}])}>
-
+            ref={ref => (this.popover = ref)}
+            className={cn([
+              `${name}-popover`,
+              styles.popover,
+              { [styles.active]: popoverOpen },
+            ])}
+          >
             <input
               className={cn(styles.input, `${name}-copy-field`)}
-              type='text'
-              ref={(input) => this.permalinkInput = input}
+              type="text"
+              ref={input => (this.permalinkInput = input)}
               defaultValue={`${asset.url}?commentId=${comment.id}`}
               readOnly
             />
@@ -95,15 +98,17 @@ export default class PermalinkButton extends React.Component {
               onClick={this.copyPermalink}
               className={cn([
                 styles.copyButton,
-                `${name}-copy-button`, {
-                  [styles.success]:copySuccessful,
-                  [styles.failure]: copyFailure
-                }])}>
+                `${name}-copy-button`,
+                {
+                  [styles.success]: copySuccessful,
+                  [styles.failure]: copyFailure,
+                },
+              ])}
+            >
               {!copyFailure && !copySuccessful && 'Copy'}
               {copySuccessful && 'Copied'}
               {copyFailure && 'Not supported'}
             </Button>
-
           </div>
         </div>
       </ClickOutside>
diff --git a/plugins/talk-plugin-permalink/client/containers/PermalinkButton.js b/plugins/talk-plugin-permalink/client/containers/PermalinkButton.js
index 5e1d11110..ab01622b5 100644
--- a/plugins/talk-plugin-permalink/client/containers/PermalinkButton.js
+++ b/plugins/talk-plugin-permalink/client/containers/PermalinkButton.js
@@ -1,16 +1,16 @@
-import {gql} from 'react-apollo';
+import { gql } from 'react-apollo';
 import PermalinkButton from '../components/PermalinkButton';
-import {withFragments} from 'plugin-api/beta/client/hocs';
+import { withFragments } from 'plugin-api/beta/client/hocs';
 
 export default withFragments({
   asset: gql`
     fragment TalkPermalink_Button_asset on Asset {
       url
     }
-    `,
+  `,
   comment: gql`
     fragment TalkPermalink_Button_comment on Comment {
       id
     }
-  `
+  `,
 })(PermalinkButton);
diff --git a/plugins/talk-plugin-permalink/client/index.js b/plugins/talk-plugin-permalink/client/index.js
index c28c4ae71..8772a809a 100644
--- a/plugins/talk-plugin-permalink/client/index.js
+++ b/plugins/talk-plugin-permalink/client/index.js
@@ -2,6 +2,6 @@ import PermalinkButton from './containers/PermalinkButton';
 
 export default {
   slots: {
-    commentActions: [PermalinkButton]
-  }
+    commentActions: [PermalinkButton],
+  },
 };
diff --git a/plugins/talk-plugin-remember-sort/client/index.js b/plugins/talk-plugin-remember-sort/client/index.js
index 061f71809..1309a3dc3 100644
--- a/plugins/talk-plugin-remember-sort/client/index.js
+++ b/plugins/talk-plugin-remember-sort/client/index.js
@@ -1,11 +1,13 @@
-import {setSort} from 'plugin-api/beta/client/actions/stream';
-import {sortOrderSelector, sortBySelector} from 'plugin-api/beta/client/selectors/stream';
+import { setSort } from 'plugin-api/beta/client/actions/stream';
+import {
+  sortOrderSelector,
+  sortBySelector,
+} from 'plugin-api/beta/client/selectors/stream';
 
 const STORAGE_PATH = 'talkPluginRememberSort';
 
 export default {
-  init: async ({store, pymStorage, introspection}) => {
-
+  init: async ({ store, pymStorage, introspection }) => {
     // TODO: workaround as this plugin is included in any target and
     // embeds (e.g. admin), but should only be included inside the stream.
 
@@ -32,9 +34,9 @@ export default {
 
       // Save sorting choice to storage if it has changed.
       if (!sort || sort.sortOrder !== sortOrder || sort.sortBy !== sortBy) {
-        sort = {sortOrder, sortBy};
+        sort = { sortOrder, sortBy };
         pymStorage.setItem(STORAGE_PATH, JSON.stringify(sort));
       }
     });
-  }
+  },
 };
diff --git a/plugins/talk-plugin-respect/client/Icon.js b/plugins/talk-plugin-respect/client/Icon.js
index c24841e97..8b45615aa 100644
--- a/plugins/talk-plugin-respect/client/Icon.js
+++ b/plugins/talk-plugin-respect/client/Icon.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
 
-export default ({className}) => (
-  <i className={cn('fa', 'fa-handshake-o', className)} aria-hidden="true"/>
+export default ({ className }) => (
+  <i className={cn('fa', 'fa-handshake-o', className)} aria-hidden="true" />
 );
diff --git a/plugins/talk-plugin-respect/client/RespectButton.js b/plugins/talk-plugin-respect/client/RespectButton.js
index 18bde9542..edf59db46 100644
--- a/plugins/talk-plugin-respect/client/RespectButton.js
+++ b/plugins/talk-plugin-respect/client/RespectButton.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import Icon from './Icon';
 import styles from './styles.css';
-import {withReaction} from 'plugin-api/beta/client/hocs';
-import {t} from 'plugin-api/beta/client/services';
+import { withReaction } from 'plugin-api/beta/client/hocs';
+import { t } from 'plugin-api/beta/client/services';
 import cn from 'classnames';
 
 const plugin = 'talk-plugin-respect';
@@ -31,15 +31,27 @@ class RespectButton extends React.Component {
   };
 
   render() {
-    const {count, alreadyReacted} = this.props;
+    const { count, alreadyReacted } = this.props;
     return (
       <div className={cn(styles.container, `${plugin}-container`)}>
         <button
-          className={cn(styles.button, {[`${styles.respected} talk-plugin-respect-respected`]: alreadyReacted}, `${plugin}-button`)}
+          className={cn(
+            styles.button,
+            {
+              [`${
+                styles.respected
+              } talk-plugin-respect-respected`]: alreadyReacted,
+            },
+            `${plugin}-button`
+          )}
           onClick={this.handleClick}
         >
           <span className={cn(`${plugin}-label`, styles.label)}>
-            {t(alreadyReacted ? 'talk-plugin-respect.respected' : 'talk-plugin-respect.respect')}
+            {t(
+              alreadyReacted
+                ? 'talk-plugin-respect.respected'
+                : 'talk-plugin-respect.respect'
+            )}
           </span>
           <Icon className={cn(styles.icon, `${plugin}-icon`)} />
           <span className={cn(`${plugin}-count`)}>{count > 0 && count}</span>
diff --git a/plugins/talk-plugin-respect/client/index.js b/plugins/talk-plugin-respect/client/index.js
index 0a1b58a0a..119639e5d 100644
--- a/plugins/talk-plugin-respect/client/index.js
+++ b/plugins/talk-plugin-respect/client/index.js
@@ -4,6 +4,6 @@ import translations from './translations.yml';
 export default {
   translations,
   slots: {
-    commentReactions: [RespectButton]
-  }
+    commentReactions: [RespectButton],
+  },
 };
diff --git a/plugins/talk-plugin-respect/index.js b/plugins/talk-plugin-respect/index.js
index 97f0e5a7c..558d24b81 100644
--- a/plugins/talk-plugin-respect/index.js
+++ b/plugins/talk-plugin-respect/index.js
@@ -1,2 +1,2 @@
-const {getReactionConfig} = require('../../plugin-api/beta/server');
+const { getReactionConfig } = require('../../plugin-api/beta/server');
 module.exports = getReactionConfig('respect');
diff --git a/plugins/talk-plugin-sort-most-liked/client/index.js b/plugins/talk-plugin-sort-most-liked/client/index.js
index 04836df53..eb49045af 100644
--- a/plugins/talk-plugin-sort-most-liked/client/index.js
+++ b/plugins/talk-plugin-sort-most-liked/client/index.js
@@ -1,10 +1,10 @@
 import translations from './translations.yml';
-import {createSortOption} from 'plugin-api/beta/client/factories';
-import {t} from 'plugin-api/beta/client/services';
+import { createSortOption } from 'plugin-api/beta/client/factories';
+import { t } from 'plugin-api/beta/client/services';
 
 const SortOption = createSortOption(
   () => t('talk-plugin-sort-most-liked.label'),
-  {sortBy: 'LIKES', sortOrder: 'DESC'},
+  { sortBy: 'LIKES', sortOrder: 'DESC' }
 );
 
 /**
@@ -14,6 +14,6 @@ const SortOption = createSortOption(
 export default {
   translations,
   slots: {
-    viewingOptionsSort: [SortOption]
-  }
+    viewingOptionsSort: [SortOption],
+  },
 };
diff --git a/plugins/talk-plugin-sort-most-liked/index.js b/plugins/talk-plugin-sort-most-liked/index.js
index 7be35b6b6..f053ebf79 100644
--- a/plugins/talk-plugin-sort-most-liked/index.js
+++ b/plugins/talk-plugin-sort-most-liked/index.js
@@ -1,2 +1 @@
-module.exports = {
-};
+module.exports = {};
diff --git a/plugins/talk-plugin-sort-most-loved/client/index.js b/plugins/talk-plugin-sort-most-loved/client/index.js
index 121a76239..371ff4deb 100644
--- a/plugins/talk-plugin-sort-most-loved/client/index.js
+++ b/plugins/talk-plugin-sort-most-loved/client/index.js
@@ -1,10 +1,10 @@
 import translations from './translations.yml';
-import {createSortOption} from 'plugin-api/beta/client/factories';
-import {t} from 'plugin-api/beta/client/services';
+import { createSortOption } from 'plugin-api/beta/client/factories';
+import { t } from 'plugin-api/beta/client/services';
 
 const SortOption = createSortOption(
   () => t('talk-plugin-sort-most-loved.label'),
-  {sortBy: 'LOVES', sortOrder: 'DESC'},
+  { sortBy: 'LOVES', sortOrder: 'DESC' }
 );
 
 /**
@@ -14,6 +14,6 @@ const SortOption = createSortOption(
 export default {
   translations,
   slots: {
-    viewingOptionsSort: [SortOption]
-  }
+    viewingOptionsSort: [SortOption],
+  },
 };
diff --git a/plugins/talk-plugin-sort-most-loved/index.js b/plugins/talk-plugin-sort-most-loved/index.js
index 7be35b6b6..f053ebf79 100644
--- a/plugins/talk-plugin-sort-most-loved/index.js
+++ b/plugins/talk-plugin-sort-most-loved/index.js
@@ -1,2 +1 @@
-module.exports = {
-};
+module.exports = {};
diff --git a/plugins/talk-plugin-sort-most-replied/client/index.js b/plugins/talk-plugin-sort-most-replied/client/index.js
index bdef73f03..5bd61eb5e 100644
--- a/plugins/talk-plugin-sort-most-replied/client/index.js
+++ b/plugins/talk-plugin-sort-most-replied/client/index.js
@@ -1,10 +1,10 @@
 import translations from './translations.yml';
-import {createSortOption} from 'plugin-api/beta/client/factories';
-import {t} from 'plugin-api/beta/client/services';
+import { createSortOption } from 'plugin-api/beta/client/factories';
+import { t } from 'plugin-api/beta/client/services';
 
 const SortOption = createSortOption(
   () => t('talk-plugin-sort-most-replied.label'),
-  {sortBy: 'REPLIES', sortOrder: 'DESC'},
+  { sortBy: 'REPLIES', sortOrder: 'DESC' }
 );
 
 /**
@@ -14,6 +14,6 @@ const SortOption = createSortOption(
 export default {
   translations,
   slots: {
-    viewingOptionsSort: [SortOption]
-  }
+    viewingOptionsSort: [SortOption],
+  },
 };
diff --git a/plugins/talk-plugin-sort-most-replied/index.js b/plugins/talk-plugin-sort-most-replied/index.js
index 7be35b6b6..f053ebf79 100644
--- a/plugins/talk-plugin-sort-most-replied/index.js
+++ b/plugins/talk-plugin-sort-most-replied/index.js
@@ -1,2 +1 @@
-module.exports = {
-};
+module.exports = {};
diff --git a/plugins/talk-plugin-sort-most-respected/client/index.js b/plugins/talk-plugin-sort-most-respected/client/index.js
index 762c94a7f..21f726ede 100644
--- a/plugins/talk-plugin-sort-most-respected/client/index.js
+++ b/plugins/talk-plugin-sort-most-respected/client/index.js
@@ -1,10 +1,10 @@
 import translations from './translations.yml';
-import {createSortOption} from 'plugin-api/beta/client/factories';
-import {t} from 'plugin-api/beta/client/services';
+import { createSortOption } from 'plugin-api/beta/client/factories';
+import { t } from 'plugin-api/beta/client/services';
 
 const SortOption = createSortOption(
   () => t('talk-plugin-sort-most-respected.label'),
-  {sortBy: 'RESPECTS', sortOrder: 'DESC'},
+  { sortBy: 'RESPECTS', sortOrder: 'DESC' }
 );
 
 /**
@@ -14,6 +14,6 @@ const SortOption = createSortOption(
 export default {
   translations,
   slots: {
-    viewingOptionsSort: [SortOption]
-  }
+    viewingOptionsSort: [SortOption],
+  },
 };
diff --git a/plugins/talk-plugin-sort-most-respected/index.js b/plugins/talk-plugin-sort-most-respected/index.js
index 7be35b6b6..f053ebf79 100644
--- a/plugins/talk-plugin-sort-most-respected/index.js
+++ b/plugins/talk-plugin-sort-most-respected/index.js
@@ -1,2 +1 @@
-module.exports = {
-};
+module.exports = {};
diff --git a/plugins/talk-plugin-sort-newest/client/index.js b/plugins/talk-plugin-sort-newest/client/index.js
index 83c20b166..e49ef4f7e 100644
--- a/plugins/talk-plugin-sort-newest/client/index.js
+++ b/plugins/talk-plugin-sort-newest/client/index.js
@@ -1,11 +1,11 @@
 import translations from './translations.yml';
-import {createSortOption} from 'plugin-api/beta/client/factories';
-import {t} from 'plugin-api/beta/client/services';
+import { createSortOption } from 'plugin-api/beta/client/factories';
+import { t } from 'plugin-api/beta/client/services';
 
-const SortOption = createSortOption(
-  () => t('talk-plugin-sort-newest.label'),
-  {sortBy: 'CREATED_AT', sortOrder: 'DESC'},
-);
+const SortOption = createSortOption(() => t('talk-plugin-sort-newest.label'), {
+  sortBy: 'CREATED_AT',
+  sortOrder: 'DESC',
+});
 
 /**
  * This plugin depends on talk-plugin-viewing-options.
@@ -14,6 +14,6 @@ const SortOption = createSortOption(
 export default {
   translations,
   slots: {
-    viewingOptionsSort: [SortOption]
-  }
+    viewingOptionsSort: [SortOption],
+  },
 };
diff --git a/plugins/talk-plugin-sort-newest/index.js b/plugins/talk-plugin-sort-newest/index.js
index 7be35b6b6..f053ebf79 100644
--- a/plugins/talk-plugin-sort-newest/index.js
+++ b/plugins/talk-plugin-sort-newest/index.js
@@ -1,2 +1 @@
-module.exports = {
-};
+module.exports = {};
diff --git a/plugins/talk-plugin-sort-oldest/client/index.js b/plugins/talk-plugin-sort-oldest/client/index.js
index e6a480340..5e010e2c4 100644
--- a/plugins/talk-plugin-sort-oldest/client/index.js
+++ b/plugins/talk-plugin-sort-oldest/client/index.js
@@ -1,11 +1,11 @@
 import translations from './translations.yml';
-import {createSortOption} from 'plugin-api/beta/client/factories';
-import {t} from 'plugin-api/beta/client/services';
+import { createSortOption } from 'plugin-api/beta/client/factories';
+import { t } from 'plugin-api/beta/client/services';
 
-const SortOption = createSortOption(
-  () => t('talk-plugin-sort-oldest.label'),
-  {sortBy: 'CREATED_AT', sortOrder: 'ASC'},
-);
+const SortOption = createSortOption(() => t('talk-plugin-sort-oldest.label'), {
+  sortBy: 'CREATED_AT',
+  sortOrder: 'ASC',
+});
 
 /**
  * This plugin depends on talk-plugin-viewing-options.
@@ -14,6 +14,6 @@ const SortOption = createSortOption(
 export default {
   translations,
   slots: {
-    viewingOptionsSort: [SortOption]
-  }
+    viewingOptionsSort: [SortOption],
+  },
 };
diff --git a/plugins/talk-plugin-sort-oldest/index.js b/plugins/talk-plugin-sort-oldest/index.js
index 7be35b6b6..f053ebf79 100644
--- a/plugins/talk-plugin-sort-oldest/index.js
+++ b/plugins/talk-plugin-sort-oldest/index.js
@@ -1,2 +1 @@
-module.exports = {
-};
+module.exports = {};
diff --git a/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.js b/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.js
index 60fe19dc9..8b83c7512 100644
--- a/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.js
+++ b/plugins/talk-plugin-subscriber/client/components/SubscriberBadge.js
@@ -1,9 +1,7 @@
 import React from 'react';
 import styles from './SubscriberBadge.css';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 
-export default () =>(
-  <span className={styles.badge}>
-    {t('talk-plugin-subscriber.subscriber')}
-  </span>
+export default () => (
+  <span className={styles.badge}>{t('talk-plugin-subscriber.subscriber')}</span>
 );
diff --git a/plugins/talk-plugin-subscriber/client/containers/SubscriberBadge.js b/plugins/talk-plugin-subscriber/client/containers/SubscriberBadge.js
index d00e5fc05..b78ee8a4c 100644
--- a/plugins/talk-plugin-subscriber/client/containers/SubscriberBadge.js
+++ b/plugins/talk-plugin-subscriber/client/containers/SubscriberBadge.js
@@ -1,8 +1,8 @@
 import SubscriberBadge from '../components/SubscriberBadge';
-import {compose, gql} from 'react-apollo';
-import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
+import { compose, gql } from 'react-apollo';
+import { withFragments, excludeIf } from 'plugin-api/beta/client/hocs';
 
-const isSubscriber = (tags = []) => tags.some((t) => t.tag.name === 'SUBSCRIBER');
+const isSubscriber = (tags = []) => tags.some(t => t.tag.name === 'SUBSCRIBER');
 
 const enhance = compose(
   withFragments({
@@ -15,9 +15,10 @@ const enhance = compose(
             }
           }
         }
-      }`
+      }
+    `,
   }),
-  excludeIf(({comment}) => !isSubscriber(comment.user.tags))
+  excludeIf(({ comment }) => !isSubscriber(comment.user.tags))
 );
-  
+
 export default enhance(SubscriberBadge);
diff --git a/plugins/talk-plugin-subscriber/client/index.js b/plugins/talk-plugin-subscriber/client/index.js
index 937191d41..dcb2f018b 100644
--- a/plugins/talk-plugin-subscriber/client/index.js
+++ b/plugins/talk-plugin-subscriber/client/index.js
@@ -4,6 +4,6 @@ import translations from './translations.yml';
 export default {
   translations,
   slots: {
-    commentAuthorTags: [SubscriberBadge]
-  }
+    commentAuthorTags: [SubscriberBadge],
+  },
 };
diff --git a/plugins/talk-plugin-subscriber/index.js b/plugins/talk-plugin-subscriber/index.js
index ad47ef264..7f677a1cf 100644
--- a/plugins/talk-plugin-subscriber/index.js
+++ b/plugins/talk-plugin-subscriber/index.js
@@ -5,10 +5,10 @@ module.exports = {
       permissions: {
         public: true,
         self: false,
-        roles: []
+        roles: [],
       },
       models: ['USERS'],
-      created_at: new Date()
-    }
-  ]
+      created_at: new Date(),
+    },
+  ],
 };
diff --git a/plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js b/plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js
index e4bd68097..528960310 100644
--- a/plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js
+++ b/plugins/talk-plugin-toxic-comments/client/components/CheckToxicityHook.js
@@ -1,19 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 
 /**
  * CheckToxicityHook adds hooks to the `commentBox`
  * that handles checking a comment for toxicity.
  */
 export default class CheckToxicityHook extends React.Component {
-
   // checked signifies if we already sent a request with the `checkToxicity` set to true.
   checked = false;
 
   componentDidMount() {
-    this.toxicityPreHook = this.props.registerHook('preSubmit', (input) => {
-
+    this.toxicityPreHook = this.props.registerHook('preSubmit', input => {
       // If we haven't check the toxicity yet, make sure to include `checkToxicity=true` in the mutation.
       // Otherwise post comment without checking the toxicity.
       if (!this.checked) {
@@ -22,9 +20,15 @@ export default class CheckToxicityHook extends React.Component {
       }
     });
 
-    this.toxicityPostHook = this.props.registerHook('postSubmit', (result) => {
+    this.toxicityPostHook = this.props.registerHook('postSubmit', result => {
       const actions = result.createComment.actions;
-      if (actions && actions.some(({__typename, reason}) => __typename === 'FlagAction' && reason === 'TOXIC_COMMENT')) {
+      if (
+        actions &&
+        actions.some(
+          ({ __typename, reason }) =>
+            __typename === 'FlagAction' && reason === 'TOXIC_COMMENT'
+        )
+      ) {
         this.props.notify('error', t('talk-plugin-toxic-comments.still_toxic'));
       }
 
diff --git a/plugins/talk-plugin-toxic-comments/client/components/ToxicDetail.js b/plugins/talk-plugin-toxic-comments/client/components/ToxicDetail.js
index 1c06c7dfa..6a278b63b 100644
--- a/plugins/talk-plugin-toxic-comments/client/components/ToxicDetail.js
+++ b/plugins/talk-plugin-toxic-comments/client/components/ToxicDetail.js
@@ -1,35 +1,33 @@
 import React from 'react';
-import {CommentDetail} from 'plugin-api/beta/client/components';
-import {isToxic} from '../utils';
+import { CommentDetail } from 'plugin-api/beta/client/components';
+import { isToxic } from '../utils';
 import styles from './ToxicDetail.css';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 
 const getInfo = (toxicity, actions) => {
   const toxic = isToxic(actions);
   let text = t('talk-plugin-toxic-comments.unlikely');
   if (toxicity > 0.8) {
     text = t('talk-plugin-toxic-comments.highly_likely');
-  }
-  else if (toxicity >= 0.5) {
+  } else if (toxicity >= 0.5) {
     text = t('talk-plugin-toxic-comments.possibly');
-  }
-  else if (toxicity >= 0.7) {
+  } else if (toxicity >= 0.7) {
     text = t('talk-plugin-toxic-comments.likely');
   }
 
   return (
     <div>
       {text}
-      <span className={cn(styles.info, {[styles.toxic]: toxic})}>
+      <span className={cn(styles.info, { [styles.toxic]: toxic })}>
         {Math.round(toxicity * 100)}%
       </span>
     </div>
   );
 };
 
-const ToxicLabel = ({comment: {actions, toxicity}}) => (
+const ToxicLabel = ({ comment: { actions, toxicity } }) => (
   <CommentDetail
     icon={'add_box'}
     header={t('talk-plugin-toxic-comments.toxic_comment')}
diff --git a/plugins/talk-plugin-toxic-comments/client/components/ToxicLabel.js b/plugins/talk-plugin-toxic-comments/client/components/ToxicLabel.js
index 3c17703dd..cb9bca87e 100644
--- a/plugins/talk-plugin-toxic-comments/client/components/ToxicLabel.js
+++ b/plugins/talk-plugin-toxic-comments/client/components/ToxicLabel.js
@@ -1,8 +1,6 @@
 import React from 'react';
-import {FlagLabel} from 'plugin-api/beta/client/components/ui';
+import { FlagLabel } from 'plugin-api/beta/client/components/ui';
 
-const ToxicLabel = () => (
-  <FlagLabel iconName="add_box">Toxic</FlagLabel>
-);
+const ToxicLabel = () => <FlagLabel iconName="add_box">Toxic</FlagLabel>;
 
 export default ToxicLabel;
diff --git a/plugins/talk-plugin-toxic-comments/client/containers/CheckToxicityHook.js b/plugins/talk-plugin-toxic-comments/client/containers/CheckToxicityHook.js
index f2b010b0d..82322b112 100644
--- a/plugins/talk-plugin-toxic-comments/client/containers/CheckToxicityHook.js
+++ b/plugins/talk-plugin-toxic-comments/client/containers/CheckToxicityHook.js
@@ -1,9 +1,8 @@
-import {bindActionCreators} from 'redux';
-import {connect} from 'plugin-api/beta/client/hocs';
-import {notify} from 'plugin-api/beta/client/actions/notification';
+import { bindActionCreators } from 'redux';
+import { connect } from 'plugin-api/beta/client/hocs';
+import { notify } from 'plugin-api/beta/client/actions/notification';
 import CheckToxicityHook from '../components/CheckToxicityHook';
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({notify}, dispatch);
+const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch);
 
 export default connect(null, mapDispatchToProps)(CheckToxicityHook);
diff --git a/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentDetail.js b/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentDetail.js
index 5c98fc29d..528cd1f40 100644
--- a/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentDetail.js
+++ b/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentDetail.js
@@ -1,10 +1,13 @@
-import {compose} from 'react-apollo';
-import {excludeIf} from 'plugin-api/beta/client/hocs';
+import { compose } from 'react-apollo';
+import { excludeIf } from 'plugin-api/beta/client/hocs';
 import ToxicDetail from './ToxicDetail';
-import {isToxic} from '../utils';
+import { isToxic } from '../utils';
 
 const enhance = compose(
-  excludeIf(({comment: {toxicity, actions}}) => toxicity === null || isToxic(actions)),
+  excludeIf(
+    ({ comment: { toxicity, actions } }) =>
+      toxicity === null || isToxic(actions)
+  )
 );
 
 export default enhance(ToxicDetail);
diff --git a/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentFlagDetail.js b/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentFlagDetail.js
index a43501ea4..a9aa1195d 100644
--- a/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentFlagDetail.js
+++ b/plugins/talk-plugin-toxic-comments/client/containers/ToxicCommentFlagDetail.js
@@ -1,10 +1,13 @@
-import {compose} from 'react-apollo';
-import {excludeIf} from 'plugin-api/beta/client/hocs';
+import { compose } from 'react-apollo';
+import { excludeIf } from 'plugin-api/beta/client/hocs';
 import ToxicDetail from './ToxicDetail';
-import {isToxic} from '../utils';
+import { isToxic } from '../utils';
 
 const enhance = compose(
-  excludeIf(({comment: {toxicity, actions}}) => toxicity === null || !isToxic(actions)),
+  excludeIf(
+    ({ comment: { toxicity, actions } }) =>
+      toxicity === null || !isToxic(actions)
+  )
 );
 
 export default enhance(ToxicDetail);
diff --git a/plugins/talk-plugin-toxic-comments/client/containers/ToxicDetail.js b/plugins/talk-plugin-toxic-comments/client/containers/ToxicDetail.js
index 78681261a..692249a4f 100644
--- a/plugins/talk-plugin-toxic-comments/client/containers/ToxicDetail.js
+++ b/plugins/talk-plugin-toxic-comments/client/containers/ToxicDetail.js
@@ -1,5 +1,5 @@
-import {compose, gql} from 'react-apollo';
-import {withFragments} from 'plugin-api/beta/client/hocs';
+import { compose, gql } from 'react-apollo';
+import { withFragments } from 'plugin-api/beta/client/hocs';
 import ToxicDetail from '../components/ToxicDetail';
 
 const enhance = compose(
@@ -13,8 +13,9 @@ const enhance = compose(
             reason
           }
         }
-      }`,
-  }),
+      }
+    `,
+  })
 );
 
 export default enhance(ToxicDetail);
diff --git a/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js b/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js
index ee43f4a7e..355717f45 100644
--- a/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js
+++ b/plugins/talk-plugin-toxic-comments/client/containers/ToxicLabel.js
@@ -1,7 +1,7 @@
-import {compose, gql} from 'react-apollo';
-import {withFragments, excludeIf} from 'plugin-api/beta/client/hocs';
+import { compose, gql } from 'react-apollo';
+import { withFragments, excludeIf } from 'plugin-api/beta/client/hocs';
 import ToxicLabel from '../components/ToxicLabel';
-import {isToxic} from '../utils';
+import { isToxic } from '../utils';
 
 const enhance = compose(
   withFragments({
@@ -13,9 +13,10 @@ const enhance = compose(
             reason
           }
         }
-      }`,
+      }
+    `,
   }),
-  excludeIf(({comment: {actions}}) => !isToxic(actions)),
+  excludeIf(({ comment: { actions } }) => !isToxic(actions))
 );
 
 export default enhance(ToxicLabel);
diff --git a/plugins/talk-plugin-toxic-comments/client/translations.yml b/plugins/talk-plugin-toxic-comments/client/translations.yml
index a6796999a..c0250bde5 100644
--- a/plugins/talk-plugin-toxic-comments/client/translations.yml
+++ b/plugins/talk-plugin-toxic-comments/client/translations.yml
@@ -4,15 +4,23 @@ en:
       Are you sure? The language in this comment might violate our community guidelines.
       You can edit the comment or submit it for moderator review.
   talk-plugin-toxic-comments:
-    unlikely: Unlikely
-    highly_likely: Highly Likely
-    possibly: Possibly
-    likely: Likely
-    toxic_comment: Toxic Comment
+    unlikely: "Unlikely"
+    highly_likely: "Highly Likely"
+    possibly: "Possibly"
+    likely: "Likely"
+    toxic_comment: "Toxic Comment"
     still_toxic: |
       This edited comment might still violate our community guidelines.
       Our moderation team will review your comment shortly.
+  flags:
+    reasons:
+      comment:
+        toxic_comment: "Highly likely to be Toxic"
 es:
+  flags:
+    reasons:
+      comment:
+        toxic_comment: "Muy probable que sea tóxico"
 zh_CN:
   error:
     COMMENT_IS_TOXIC: "您确定吗？此评论的表述可能违反了我们的社群指引方针。您可以编辑评论，或直接提交让管理人员审查。"
diff --git a/plugins/talk-plugin-toxic-comments/client/utils.js b/plugins/talk-plugin-toxic-comments/client/utils.js
index 57bfd9633..0f20b8728 100644
--- a/plugins/talk-plugin-toxic-comments/client/utils.js
+++ b/plugins/talk-plugin-toxic-comments/client/utils.js
@@ -1,4 +1,6 @@
 export function isToxic(actions) {
-  return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TOXIC_COMMENT');
+  return actions.some(
+    action =>
+      action.__typename === 'FlagAction' && action.reason === 'TOXIC_COMMENT'
+  );
 }
-
diff --git a/plugins/talk-plugin-toxic-comments/index.js b/plugins/talk-plugin-toxic-comments/index.js
index 444cb94f5..a318f8a11 100644
--- a/plugins/talk-plugin-toxic-comments/index.js
+++ b/plugins/talk-plugin-toxic-comments/index.js
@@ -1,10 +1,13 @@
-const {readFileSync} = require('fs');
+const { readFileSync } = require('fs');
 const path = require('path');
 const hooks = require('./server/hooks');
 const resolvers = require('./server/resolvers');
 
 module.exports = {
-  typeDefs: readFileSync(path.join(__dirname, 'server/typeDefs.graphql'), 'utf8'),
+  typeDefs: readFileSync(
+    path.join(__dirname, 'server/typeDefs.graphql'),
+    'utf8'
+  ),
   hooks,
   resolvers,
 };
diff --git a/plugins/talk-plugin-toxic-comments/server/config.js b/plugins/talk-plugin-toxic-comments/server/config.js
index b6c32417f..04102ed49 100644
--- a/plugins/talk-plugin-toxic-comments/server/config.js
+++ b/plugins/talk-plugin-toxic-comments/server/config.js
@@ -1,7 +1,9 @@
 const ms = require('ms');
 
 const config = {
-  API_ENDPOINT: process.env.TALK_PERSPECTIVE_API_ENDPOINT || 'https://commentanalyzer.googleapis.com/v1alpha1',
+  API_ENDPOINT:
+    process.env.TALK_PERSPECTIVE_API_ENDPOINT ||
+    'https://commentanalyzer.googleapis.com/v1alpha1',
   API_KEY: process.env.TALK_PERSPECTIVE_API_KEY,
   THRESHOLD: process.env.TALK_TOXICITY_THRESHOLD || 0.8,
   API_TIMEOUT: ms(process.env.TALK_PERSPECTIVE_TIMEOUT || '300ms'),
@@ -9,7 +11,9 @@ const config = {
 };
 
 if (process.env.NODE_ENV !== 'test' && !config.API_KEY) {
-  throw new Error('Please set the TALK_PERSPECTIVE_API_KEY environment variable to use the toxic-comments plugin. Visit https://www.perspectiveapi.com/ to request API access.');
+  throw new Error(
+    'Please set the TALK_PERSPECTIVE_API_KEY environment variable to use the toxic-comments plugin. Visit https://www.perspectiveapi.com/ to request API access.'
+  );
 }
 
 module.exports = config;
diff --git a/plugins/talk-plugin-toxic-comments/server/errors.js b/plugins/talk-plugin-toxic-comments/server/errors.js
index e5c77ff78..60135a8f8 100644
--- a/plugins/talk-plugin-toxic-comments/server/errors.js
+++ b/plugins/talk-plugin-toxic-comments/server/errors.js
@@ -1,4 +1,4 @@
-const {APIError} = require('errors');
+const { APIError } = require('errors');
 
 // ErrToxic is sent during a `CreateComment` mutation where
 // `input.checkToxicity` is set to true and the comment contains
diff --git a/plugins/talk-plugin-toxic-comments/server/hooks.js b/plugins/talk-plugin-toxic-comments/server/hooks.js
index a74c61a8c..7b9c93dad 100644
--- a/plugins/talk-plugin-toxic-comments/server/hooks.js
+++ b/plugins/talk-plugin-toxic-comments/server/hooks.js
@@ -1,5 +1,5 @@
-const {getScores, isToxic} = require('./perspective');
-const {ErrToxic} = require('./errors');
+const { getScores, isToxic } = require('./perspective');
+const { ErrToxic } = require('./errors');
 
 // We don't add the hooks during _test_ as the perspective API is not available.
 if (process.env.NODE_ENV === 'test') {
@@ -9,14 +9,12 @@ if (process.env.NODE_ENV === 'test') {
 module.exports = {
   RootMutation: {
     createComment: {
-      async pre(_, {input}, _context, _info) {
-
+      async pre(_, { input }, _context, _info) {
         // Try getting scores.
         let scores;
         try {
           scores = await getScores(input.body);
-        } catch(err) {
-
+        } catch (err) {
           // Warn and let mutation pass.
           console.trace(err);
           return;
@@ -33,12 +31,13 @@ module.exports = {
           }
 
           input.status = 'SYSTEM_WITHHELD';
-          input.actions = input.actions && input.actions.length >= 0 ? input.actions : [];
+          input.actions =
+            input.actions && input.actions.length >= 0 ? input.actions : [];
           input.actions.push({
             action_type: 'FLAG',
             user_id: null,
             group_id: 'TOXIC_COMMENT',
-            metadata: {}
+            metadata: {},
           });
         }
       },
diff --git a/plugins/talk-plugin-toxic-comments/server/perspective.js b/plugins/talk-plugin-toxic-comments/server/perspective.js
index 863466af4..4b7fcd0c0 100644
--- a/plugins/talk-plugin-toxic-comments/server/perspective.js
+++ b/plugins/talk-plugin-toxic-comments/server/perspective.js
@@ -1,5 +1,11 @@
 const fetch = require('node-fetch');
-const {API_ENDPOINT, API_KEY, THRESHOLD, API_TIMEOUT, DO_NOT_STORE} = require('./config');
+const {
+  API_ENDPOINT,
+  API_KEY,
+  THRESHOLD,
+  API_TIMEOUT,
+  DO_NOT_STORE,
+} = require('./config');
 
 /**
  * Get scores from the perspective api
@@ -7,33 +13,36 @@ const {API_ENDPOINT, API_KEY, THRESHOLD, API_TIMEOUT, DO_NOT_STORE} = require('.
  * @return {object}        object containing toxicity scores
  */
 async function getScores(text) {
-  const response = await fetch(`${API_ENDPOINT}/comments:analyze?key=${API_KEY}`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    timeout: API_TIMEOUT,
-    body: JSON.stringify({
-      comment: {
-        text,
+  const response = await fetch(
+    `${API_ENDPOINT}/comments:analyze?key=${API_KEY}`,
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
       },
+      timeout: API_TIMEOUT,
+      body: JSON.stringify({
+        comment: {
+          text,
+        },
 
-      // TODO: support other languages.
-      languages: ['en'],
-      doNotStore: DO_NOT_STORE,
-      requestedAttributes: {
-        TOXICITY: {},
-        SEVERE_TOXICITY: {},
-      }
-    }),
-  });
+        // TODO: support other languages.
+        languages: ['en'],
+        doNotStore: DO_NOT_STORE,
+        requestedAttributes: {
+          TOXICITY: {},
+          SEVERE_TOXICITY: {},
+        },
+      }),
+    }
+  );
   const data = await response.json();
   return {
     TOXICITY: {
-      summaryScore: data.attributeScores.TOXICITY.summaryScore.value
+      summaryScore: data.attributeScores.TOXICITY.summaryScore.value,
     },
     SEVERE_TOXICITY: {
-      summaryScore: data.attributeScores.SEVERE_TOXICITY.summaryScore.value
+      summaryScore: data.attributeScores.SEVERE_TOXICITY.summaryScore.value,
     },
   };
 }
@@ -53,9 +62,10 @@ function getProbability(scores) {
  * @return {boolean}
  */
 function isToxic(scoresOrProbability) {
-  const probability = typeof scoresOrProbability === 'object'
-    ? getProbability(scoresOrProbability)
-    : scoresOrProbability;
+  const probability =
+    typeof scoresOrProbability === 'object'
+      ? getProbability(scoresOrProbability)
+      : scoresOrProbability;
   return probability > THRESHOLD;
 }
 
@@ -69,8 +79,7 @@ function maskKeyInError(fn) {
   return async (...args) => {
     try {
       return await fn(...args);
-    }
-    catch(err) {
+    } catch (err) {
       if (err.message) {
         err.message = err.message.replace(API_KEY, '***');
       }
diff --git a/plugins/talk-plugin-toxic-comments/server/resolvers.js b/plugins/talk-plugin-toxic-comments/server/resolvers.js
index 5af584b44..8143b446e 100644
--- a/plugins/talk-plugin-toxic-comments/server/resolvers.js
+++ b/plugins/talk-plugin-toxic-comments/server/resolvers.js
@@ -2,6 +2,7 @@ const get = require('lodash/get');
 
 module.exports = {
   Comment: {
-    toxicity: (comment) => get(comment, 'metadata.perspective.SEVERE_TOXICITY.summaryScore'),
-  }
+    toxicity: comment =>
+      get(comment, 'metadata.perspective.SEVERE_TOXICITY.summaryScore'),
+  },
 };
diff --git a/plugins/talk-plugin-viewing-options/client/actions.js b/plugins/talk-plugin-viewing-options/client/actions.js
index fbac224bf..91835baf3 100644
--- a/plugins/talk-plugin-viewing-options/client/actions.js
+++ b/plugins/talk-plugin-viewing-options/client/actions.js
@@ -1,4 +1,4 @@
-import {OPEN_MENU, CLOSE_MENU} from './constants';
+import { OPEN_MENU, CLOSE_MENU } from './constants';
 
 export const openMenu = () => ({
   type: OPEN_MENU,
diff --git a/plugins/talk-plugin-viewing-options/client/components/Category.js b/plugins/talk-plugin-viewing-options/client/components/Category.js
index caa3904ff..0fc13d16f 100644
--- a/plugins/talk-plugin-viewing-options/client/components/Category.js
+++ b/plugins/talk-plugin-viewing-options/client/components/Category.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import styles from './Category.css';
-import {Slot} from 'plugin-api/beta/client/components';
+import { Slot } from 'plugin-api/beta/client/components';
 
-const childFactory = (child) => <li className={styles.listItem} key={child.key}>{child}</li>;
+const childFactory = child => (
+  <li className={styles.listItem} key={child.key}>
+    {child}
+  </li>
+);
 
-const ViewingOptions = ({slot, title, data, asset, root}) => {
+const ViewingOptions = ({ slot, title, data, asset, root }) => {
   return (
     <div className={styles.root}>
       <div className={styles.title}>{title}</div>
@@ -14,7 +18,7 @@ const ViewingOptions = ({slot, title, data, asset, root}) => {
         className={styles.list}
         component={'ul'}
         data={data}
-        queryData={{asset, root}}
+        queryData={{ asset, root }}
       />
     </div>
   );
diff --git a/plugins/talk-plugin-viewing-options/client/components/Menu.js b/plugins/talk-plugin-viewing-options/client/components/Menu.js
index 18186eccc..7ff5ac316 100644
--- a/plugins/talk-plugin-viewing-options/client/components/Menu.js
+++ b/plugins/talk-plugin-viewing-options/client/components/Menu.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './Menu.css';
-import {capitalize} from 'plugin-api/beta/client/utils';
-import {IfSlotIsNotEmpty} from 'plugin-api/beta/client/components';
+import { capitalize } from 'plugin-api/beta/client/utils';
+import { IfSlotIsNotEmpty } from 'plugin-api/beta/client/components';
 import Category from './Category';
-import {t} from 'plugin-api/beta/client/services';
+import { t } from 'plugin-api/beta/client/services';
 
 class Menu extends React.Component {
   categories = {
@@ -15,16 +15,17 @@ class Menu extends React.Component {
   render() {
     return (
       <div className={cn([styles.menu, 'talk-plugin-viewing-options-menu'])}>
-        {
-          Object.keys(this.categories).map((category) =>
-            <IfSlotIsNotEmpty slot={`viewingOptions${capitalize(category)}`} key={category}>
-              <Category
-                slot={`viewingOptions${capitalize(category)}`}
-                title={this.categories[category]}
-              />
-            </IfSlotIsNotEmpty>
-          )
-        }
+        {Object.keys(this.categories).map(category => (
+          <IfSlotIsNotEmpty
+            slot={`viewingOptions${capitalize(category)}`}
+            key={category}
+          >
+            <Category
+              slot={`viewingOptions${capitalize(category)}`}
+              title={this.categories[category]}
+            />
+          </IfSlotIsNotEmpty>
+        ))}
       </div>
     );
   }
diff --git a/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js b/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js
index 30997d5a2..8a0c09f61 100644
--- a/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js
+++ b/plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js
@@ -1,15 +1,14 @@
 import React from 'react';
 import cn from 'classnames';
 import styles from './ViewingOptions.css';
-import {t} from 'plugin-api/beta/client/services';
-import {Icon} from 'plugin-api/beta/client/components/ui';
-import {ClickOutside} from 'plugin-api/beta/client/components';
+import { t } from 'plugin-api/beta/client/services';
+import { Icon } from 'plugin-api/beta/client/components/ui';
+import { ClickOutside } from 'plugin-api/beta/client/components';
 import Menu from './Menu';
 
 class ViewingOptions extends React.Component {
-
   toggleOpen = () => {
-    const {open, openMenu, closeMenu} = this.props;
+    const { open, openMenu, closeMenu } = this.props;
     if (!open) {
       openMenu();
     } else {
@@ -18,25 +17,28 @@ class ViewingOptions extends React.Component {
   };
 
   handleClickOutside = () => {
-    const {open, closeMenu} = this.props;
+    const { open, closeMenu } = this.props;
     if (open) {
       closeMenu();
     }
   };
 
   render() {
-    const {open, data, root, asset} = this.props;
+    const { open, data, root, asset } = this.props;
     return (
       <ClickOutside onClickOutside={this.handleClickOutside}>
         <div className={cn([styles.root, 'talk-plugin-viewing-options'])}>
           <div>
             <button className={styles.button} onClick={this.toggleOpen}>
               <Icon className={styles.icon} name="filter_list" />
-              <span className={styles.label}>{t('talk-plugin-viewing-options.viewing_options')}</span>
-              {open
-                ? <Icon name="arrow_drop_up" className={styles.arrowIcon}/>
-                : <Icon name="arrow_drop_down" className={styles.arrowIcon}/>
-              }
+              <span className={styles.label}>
+                {t('talk-plugin-viewing-options.viewing_options')}
+              </span>
+              {open ? (
+                <Icon name="arrow_drop_up" className={styles.arrowIcon} />
+              ) : (
+                <Icon name="arrow_drop_down" className={styles.arrowIcon} />
+              )}
             </button>
           </div>
           {open && <Menu data={data} root={root} asset={asset} />}
diff --git a/plugins/talk-plugin-viewing-options/client/constants.js b/plugins/talk-plugin-viewing-options/client/constants.js
index 857a76e1b..c1b6a8216 100644
--- a/plugins/talk-plugin-viewing-options/client/constants.js
+++ b/plugins/talk-plugin-viewing-options/client/constants.js
@@ -2,4 +2,3 @@ const prefix = 'TALK_VIEWING_OPTIONS';
 
 export const OPEN_MENU = `${prefix}_OPEN_MENU`;
 export const CLOSE_MENU = `${prefix}_CLOSE_MENU`;
-
diff --git a/plugins/talk-plugin-viewing-options/client/containers/ViewingOptions.js b/plugins/talk-plugin-viewing-options/client/containers/ViewingOptions.js
index 8749d0137..b30721346 100644
--- a/plugins/talk-plugin-viewing-options/client/containers/ViewingOptions.js
+++ b/plugins/talk-plugin-viewing-options/client/containers/ViewingOptions.js
@@ -1,21 +1,18 @@
-import {connect, withFragments} from 'plugin-api/beta/client/hocs';
-import {bindActionCreators} from 'redux';
+import { connect, withFragments } from 'plugin-api/beta/client/hocs';
+import { bindActionCreators } from 'redux';
 import ViewingOptions from '../components/ViewingOptions';
-import {openMenu, closeMenu} from '../actions';
-import {compose, gql} from 'react-apollo';
-import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';
+import { openMenu, closeMenu } from '../actions';
+import { compose, gql } from 'react-apollo';
+import { getSlotFragmentSpreads } from 'plugin-api/beta/client/utils';
 
-const slots = [
-  'viewingOptionsSort',
-  'viewingOptionsFilter',
-];
+const slots = ['viewingOptionsSort', 'viewingOptionsFilter'];
 
-const mapStateToProps = ({talkPluginViewingOptions: state}) => ({
-  open: state.open
+const mapStateToProps = ({ talkPluginViewingOptions: state }) => ({
+  open: state.open,
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({openMenu, closeMenu}, dispatch);
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({ openMenu, closeMenu }, dispatch);
 
 const withViewingOptionsFragments = withFragments({
   root: gql`
@@ -32,7 +29,7 @@ const withViewingOptionsFragments = withFragments({
 
 const enhance = compose(
   connect(mapStateToProps, mapDispatchToProps),
-  withViewingOptionsFragments,
+  withViewingOptionsFragments
 );
 
 export default enhance(ViewingOptions);
diff --git a/plugins/talk-plugin-viewing-options/client/index.js b/plugins/talk-plugin-viewing-options/client/index.js
index 464a38d7d..cc230bfd6 100644
--- a/plugins/talk-plugin-viewing-options/client/index.js
+++ b/plugins/talk-plugin-viewing-options/client/index.js
@@ -5,7 +5,7 @@ import translations from './translations.yml';
 export default {
   reducer,
   slots: {
-    streamFilter: [ViewingOptions]
+    streamFilter: [ViewingOptions],
   },
-  translations
+  translations,
 };
diff --git a/plugins/talk-plugin-viewing-options/client/reducer.js b/plugins/talk-plugin-viewing-options/client/reducer.js
index 687de803a..4b42bea3f 100644
--- a/plugins/talk-plugin-viewing-options/client/reducer.js
+++ b/plugins/talk-plugin-viewing-options/client/reducer.js
@@ -1,22 +1,22 @@
-import {OPEN_MENU, CLOSE_MENU} from './constants';
+import { OPEN_MENU, CLOSE_MENU } from './constants';
 
 const initialState = {
-  open: false
+  open: false,
 };
 
 export default function reducer(state = initialState, action) {
   switch (action.type) {
-  case OPEN_MENU:
-    return {
-      ...state,
-      open: true
-    };
-  case CLOSE_MENU:
-    return {
-      ...state,
-      open: false
-    };
-  default :
-    return state;
+    case OPEN_MENU:
+      return {
+        ...state,
+        open: true,
+      };
+    case CLOSE_MENU:
+      return {
+        ...state,
+        open: false,
+      };
+    default:
+      return state;
   }
 }
diff --git a/routes/api/account/index.js b/routes/api/account/index.js
index 434edc58d..c666d9f2f 100644
--- a/routes/api/account/index.js
+++ b/routes/api/account/index.js
@@ -21,17 +21,14 @@ router.get('/', authorization.needed(), (req, res, next) => {
  * @param {Object} error the error object to send back in the event an error is found
  */
 const tokenCheck = (verifier, error) => async (req, res, next) => {
-  const {token = null, check = false} = req.body;
+  const { token = null, check = false } = req.body;
 
   if (check) {
-
     // This request is checking to see if the token is valid.
     try {
-
       // Verify the token.
       await verifier(token);
     } catch (err) {
-
       // Log out the error, slurp it and send out the predefined error to the
       // error handler.
       console.error(err);
@@ -51,20 +48,27 @@ const tokenCheck = (verifier, error) => async (req, res, next) => {
 // POST /email/confirm takes the password confirmation token available as a
 // payload parameter and if it verifies, it updates the confirmed_at date on the
 // local profile.
-router.post('/email/verify', tokenCheck(UsersService.verifyEmailConfirmationToken, errors.ErrEmailVerificationToken), async (req, res, next) => {
-  const {token} = req.body;
+router.post(
+  '/email/verify',
+  tokenCheck(
+    UsersService.verifyEmailConfirmationToken,
+    errors.ErrEmailVerificationToken
+  ),
+  async (req, res, next) => {
+    const { token } = req.body;
 
-  try {
-    let {referer} = await UsersService.verifyEmailConfirmation(token);
-    return res.json({redirectUri: referer});
-  } catch (err) {
-    console.error(err);
-    return next(errors.ErrEmailVerificationToken);
+    try {
+      let { referer } = await UsersService.verifyEmailConfirmation(token);
+      return res.json({ redirectUri: referer });
+    } catch (err) {
+      console.error(err);
+      return next(errors.ErrEmailVerificationToken);
+    }
   }
-});
+);
 
 router.post('/password/reset', async (req, res, next) => {
-  const {email, loc} = req.body;
+  const { email, loc } = req.body;
 
   if (!email) {
     return next(errors.ErrMissingEmail);
@@ -79,7 +83,7 @@ router.post('/password/reset', async (req, res, next) => {
           token,
         },
         subject: 'Password Reset',
-        to: email
+        to: email,
       });
     }
 
@@ -89,33 +93,31 @@ router.post('/password/reset', async (req, res, next) => {
   }
 });
 
-router.put('/password/reset', tokenCheck(UsersService.verifyPasswordResetToken, errors.ErrPasswordResetToken), async (req, res, next) => {
-  const {token, password} = req.body;
+router.put(
+  '/password/reset',
+  tokenCheck(
+    UsersService.verifyPasswordResetToken,
+    errors.ErrPasswordResetToken
+  ),
+  async (req, res, next) => {
+    const { token, password } = req.body;
 
-  if (!password || password.length < 8) {
-    return next(errors.ErrPasswordTooShort);
+    if (!password || password.length < 8) {
+      return next(errors.ErrPasswordTooShort);
+    }
+
+    try {
+      let [user, redirect] = await UsersService.verifyPasswordResetToken(token);
+
+      // Change the users' password.
+      await UsersService.changePassword(user.id, password);
+
+      res.json({ redirect });
+    } catch (e) {
+      console.error(e);
+      return next(errors.ErrNotAuthorized);
+    }
   }
-
-  try {
-    let [user, redirect] = await UsersService.verifyPasswordResetToken(token);
-
-    // Change the users' password.
-    await UsersService.changePassword(user.id, password);
-
-    res.json({redirect});
-  } catch (e) {
-    console.error(e);
-    return next(errors.ErrNotAuthorized);
-  }
-});
-
-router.put('/username', authorization.needed(), async (req, res, next) => {
-  try {
-    await UsersService.editName(req.user.id, req.body.username);
-    res.status(204).end();
-  } catch (e) {
-    return next(e);
-  }
-});
+);
 
 module.exports = router;
diff --git a/routes/api/assets/index.js b/routes/api/assets/index.js
index d7cc86438..47aca1cc8 100644
--- a/routes/api/assets/index.js
+++ b/routes/api/assets/index.js
@@ -8,126 +8,137 @@ const AssetsService = require('../../../services/assets');
 const AssetModel = require('../../../models/asset');
 
 const FilterOpenAssets = (query, filter) => {
-  switch(filter) {
-  case 'open':
-    return query.merge({
-      $or: [
-        {
-          closedAt: null
+  switch (filter) {
+    case 'open':
+      return query.merge({
+        $or: [
+          {
+            closedAt: null,
+          },
+          {
+            closedAt: {
+              $gt: Date.now(),
+            },
+          },
+        ],
+      });
+    case 'closed':
+      return query.merge({
+        closedAt: {
+          $lt: Date.now(),
         },
-        {
-          closedAt: {
-            $gt: Date.now()
-          }
-        }
-      ]
-    });
-  case 'closed':
-    return query.merge({
-      closedAt: {
-        $lt: Date.now()
-      }
-    });
-  default:
-    return query;
+      });
+    default:
+      return query;
   }
 };
 
 // List assets.
-router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, next) => {
+router.get(
+  '/',
+  authorization.needed('ADMIN', 'MODERATOR'),
+  async (req, res, next) => {
+    const {
+      value = '',
+      field = 'publication_date',
+      page = 1,
+      asc = 'false',
+      filter = 'all',
+      limit = 20,
+    } = req.query;
 
-  const {
-    value = '',
-    field = 'publication_date',
-    page = 1,
-    asc = 'false',
-    filter = 'all',
-    limit = 20,
-  } = req.query;
+    try {
+      const order = asc === 'true' ? 1 : -1;
 
-  try {
-    const order = (asc === 'true') ? 1 : -1;
+      const queryOpts = {
+        sort: { [field]: order, created_at: order },
+        skip: (page - 1) * limit,
+        limit,
+      };
 
-    const queryOpts = {
-      sort: {[field]: order, 'created_at': order},
-      skip: (page - 1) * limit,
-      limit
-    };
+      // Find all the assets.
+      let [result, count] = await Promise.all([
+        // Find the actuall assets.
+        FilterOpenAssets(AssetsService.search({ value }), filter)
+          .sort(queryOpts.sort)
+          .skip(parseInt(queryOpts.skip))
+          .limit(parseInt(queryOpts.limit))
+          .lean(),
 
-    // Find all the assets.
-    let [result, count] = await Promise.all([
+        // Get the count of actual assets.
+        FilterOpenAssets(AssetsService.search({ value }), filter).count(),
+      ]);
 
-      // Find the actuall assets.
-      FilterOpenAssets(AssetsService.search({value}), filter)
-        .sort(queryOpts.sort)
-        .skip(parseInt(queryOpts.skip))
-        .limit(parseInt(queryOpts.limit))
-        .lean(),
-
-      // Get the count of actual assets.
-      FilterOpenAssets(AssetsService.search({value}), filter)
-        .count()
-    ]);
-
-    // Send back the asset data.
-    res.json({
-      result,
-      limit: Number(limit),
-      count,
-      page: Number(page),
-      totalPages: Math.ceil(count / (limit === 0 ? 1 : limit))
-    });
-  } catch (e) {
-    return next(e);
+      // Send back the asset data.
+      res.json({
+        result,
+        limit: Number(limit),
+        count,
+        page: Number(page),
+        totalPages: Math.ceil(count / (limit === 0 ? 1 : limit)),
+      });
+    } catch (e) {
+      return next(e);
+    }
   }
-
-});
+);
 
 // Get an asset by id.
-router.get('/:asset_id', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, next) => {
-  try {
-
-    // Send back the asset.
-    let asset = await AssetsService.findById(req.params.asset_id);
-    if (!asset) {
-      return next(errors.ErrNotFound);
-    }
-
-    return res.json(asset);
-  } catch (e) {
-    return next(e);
-  }
-});
-
-router.put('/:asset_id/settings', authorization.needed('ADMIN'), async (req, res, next) => {
-  try {
-    await AssetsService.overrideSettings(req.params.asset_id, req.body);
-    res.status(204).end();
-  } catch (e) {
-    return next(e);
-  }
-});
-
-router.put('/:asset_id/status', authorization.needed('ADMIN'), async (req, res, next) => {
-  const {
-    closedAt,
-    closedMessage
-  } = req.body;
-
-  try {
-    await AssetModel.update({
-      id: req.params.asset_id
-    }, {
-      $set: {
-        closedAt,
-        closedMessage
+router.get(
+  '/:asset_id',
+  authorization.needed('ADMIN', 'MODERATOR'),
+  async (req, res, next) => {
+    try {
+      // Send back the asset.
+      let asset = await AssetsService.findById(req.params.asset_id);
+      if (!asset) {
+        return next(errors.ErrNotFound);
       }
-    });
 
-    res.status(204).json();
-  } catch (e) {
-    return next(e);
+      return res.json(asset);
+    } catch (e) {
+      return next(e);
+    }
   }
-});
+);
+
+router.put(
+  '/:asset_id/settings',
+  authorization.needed('ADMIN'),
+  async (req, res, next) => {
+    try {
+      await AssetsService.overrideSettings(req.params.asset_id, req.body);
+      res.status(204).end();
+    } catch (e) {
+      return next(e);
+    }
+  }
+);
+
+router.put(
+  '/:asset_id/status',
+  authorization.needed('ADMIN'),
+  async (req, res, next) => {
+    const { closedAt, closedMessage } = req.body;
+
+    try {
+      await AssetModel.update(
+        {
+          id: req.params.asset_id,
+        },
+        {
+          $set: {
+            closedAt,
+            closedMessage,
+          },
+        }
+      );
+
+      res.status(204).json();
+    } catch (e) {
+      return next(e);
+    }
+  }
+);
 
 module.exports = router;
diff --git a/routes/api/auth/index.js b/routes/api/auth/index.js
index 1af57fb54..90912a537 100644
--- a/routes/api/auth/index.js
+++ b/routes/api/auth/index.js
@@ -1,5 +1,9 @@
 const express = require('express');
-const {passport, HandleGenerateCredentials, HandleLogout} = require('../../../services/passport');
+const {
+  passport,
+  HandleGenerateCredentials,
+  HandleLogout,
+} = require('../../../services/passport');
 
 const router = express.Router();
 
@@ -17,7 +21,7 @@ router.get('/', (req, res, next) => {
   res.header('Pragma', 'no-cache');
 
   // Send back the user object.
-  res.json({user: req.user});
+  res.json({ user: req.user });
 });
 
 /**
@@ -34,9 +38,12 @@ router.delete('/', HandleLogout);
  * Local auth endpoint, will recieve a email and password
  */
 router.post('/local', (req, res, next) => {
-
   // Perform the local authentication.
-  passport.authenticate('local', {session: false}, HandleGenerateCredentials(req, res, next))(req, res, next);
+  passport.authenticate(
+    'local',
+    { session: false },
+    HandleGenerateCredentials(req, res, next)
+  )(req, res, next);
 });
 
 module.exports = router;
diff --git a/routes/api/index.js b/routes/api/index.js
index e44f1e7e5..5f704fcda 100644
--- a/routes/api/index.js
+++ b/routes/api/index.js
@@ -4,7 +4,7 @@ const pkg = require('../../package.json');
 const router = express.Router();
 
 router.get('/', (req, res) => {
-  res.json({version: pkg.version});
+  res.json({ version: pkg.version });
 });
 
 router.use('/assets', require('./assets'));
diff --git a/routes/api/settings/index.js b/routes/api/settings/index.js
index 5202f9a56..1cad31146 100644
--- a/routes/api/settings/index.js
+++ b/routes/api/settings/index.js
@@ -4,14 +4,18 @@ const authorization = require('../../../middleware/authorization');
 
 const router = express.Router();
 
-router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, next) => {
-  try {
-    let settings = await SettingsService.retrieve();
-    res.json(settings);
-  } catch (e) {
-    return next(e);
+router.get(
+  '/',
+  authorization.needed('ADMIN', 'MODERATOR'),
+  async (req, res, next) => {
+    try {
+      let settings = await SettingsService.retrieve();
+      res.json(settings);
+    } catch (e) {
+      return next(e);
+    }
   }
-});
+);
 
 router.put('/', authorization.needed('ADMIN'), async (req, res, next) => {
   try {
diff --git a/routes/api/setup/index.js b/routes/api/setup/index.js
index efb3c5d45..93b22fda1 100644
--- a/routes/api/setup/index.js
+++ b/routes/api/setup/index.js
@@ -7,9 +7,9 @@ const router = express.Router();
 router.get('/', async (req, res, next) => {
   try {
     await SetupService.isAvailable();
-    res.json({installed: false});
+    res.json({ installed: false });
   } catch (e) {
-    res.json({installed: true});
+    res.json({ installed: true });
   }
 });
 
@@ -20,13 +20,10 @@ router.post('/', async (req, res, next) => {
     return next(e);
   }
 
-  const {
-    settings,
-    user: {email, password, username}
-  } = req.body;
+  const { settings, user: { email, password, username } } = req.body;
 
   try {
-    await SetupService.setup({settings, user: {email, password, username}});
+    await SetupService.setup({ settings, user: { email, password, username } });
     res.status(204).end();
   } catch (err) {
     return next(err);
diff --git a/routes/api/users/index.js b/routes/api/users/index.js
index 056276a0e..8c1a7b7f3 100644
--- a/routes/api/users/index.js
+++ b/routes/api/users/index.js
@@ -1,142 +1,13 @@
 const express = require('express');
 const router = express.Router();
 const UsersService = require('../../../services/users');
-const mailer = require('../../../services/mailer');
 const errors = require('../../../errors');
 const authorization = require('../../../middleware/authorization');
-const i18n = require('../../../services/i18n');
 const Limit = require('../../../services/limit');
-const {
-  ROOT_URL
-} = require('../../../config');
-
-router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, next) => {
-
-  const {
-    value = '',
-    field = 'created_at',
-    page = 1,
-    asc = 'false',
-    limit = 20 // Total Per Page
-  } = req.query;
-
-  try {
-
-    const queryOpts = {
-      sort: {[field]: (asc === 'true') ? 1 : -1},
-      skip: (page - 1) * limit,
-      limit
-    };
-
-    let [result, count] = await Promise.all([
-      UsersService
-        .search(value)
-        .sort(queryOpts.sort)
-        .skip(parseInt(queryOpts.skip))
-        .limit(parseInt(queryOpts.limit))
-        .lean(),
-      UsersService.search(value).count()
-    ]);
-
-    res.json({
-      result,
-      limit: Number(limit),
-      count,
-      page: Number(page),
-      totalPages: Math.ceil(count / (limit === 0 ? 1 : limit))
-    });
-
-  } catch (e) {
-    next(e);
-  }
-});
-
-router.post('/:user_id/role', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, next) => {
-  try {
-    await UsersService.addRoleToUser(req.params.user_id, req.body.role);
-    res.status(204).end();
-  } catch (e) {
-    next(e);
-  }
-});
-
-// update the status of a user
-router.post('/:user_id/status', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, next) => {
-  let {status} = req.body;
-
-  try {
-    let user = await UsersService.setStatus(req.params.user_id, status);
-    if (!user) {
-      return next(errors.ErrNotFound);
-    }
-
-    if (user.status === 'BANNED') {
-      req.pubsub.publish('userBanned', user);
-    }
-
-    // TODO: investigate why this is returning a value? Also why is this a POST vs PUT?
-    res.status(201).json(user.status);
-  } catch (e) {
-    next(e);
-  }
-});
-
-router.post('/:user_id/username-enable', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, next) => {
-  try {
-    await UsersService.toggleNameEdit(req.params.user_id, true);
-    res.status(204).end();
-  } catch (e) {
-    next(e);
-  }
-});
-
-router.post('/:user_id/email', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, next) => {
-  try {
-    let user = await UsersService.findById(req.params.user_id);
-
-    let localProfile = user.profiles.find((profile) => profile.provider === 'local');
-    if (!localProfile) {
-      return next(errors.ErrMissingEmail);
-    }
-
-    await mailer.send({
-      template: 'notification',  // needed to know which template to render!
-      locals: {                  // specifies the template locals.
-        body: req.body.body
-      },
-      subject: req.body.subject,
-      to: localProfile.id        // This only works if the user has registered via e-mail.
-    });
-
-    res.status(204).end();
-  } catch (e) {
-    next(e);
-  }
-});
-
-/**
- * SendEmailConfirmation sends a confirmation email to the user.
- * @param {String}     userID  the id for the user to send the email to
- * @param {String}     email   the email for the user to send the email to
- */
-const SendEmailConfirmation = async (user, email, referer) => {
-  let token = await UsersService.createEmailConfirmToken(user, email, referer);
-
-  return mailer.send({
-    template: 'email-confirm',
-    locals: {
-      token,
-      rootURL: ROOT_URL,
-      email
-    },
-    subject: i18n.t('email.confirm.subject'),
-    to: email
-  });
-};
 
 // create a local user.
 router.post('/', async (req, res, next) => {
-  const {email, password, username} = req.body;
+  const { email, password, username } = req.body;
   const redirectUri = req.header('X-Pym-Url') || req.header('Referer');
 
   try {
@@ -144,7 +15,7 @@ router.post('/', async (req, res, next) => {
 
     // Send an email confirmation. The Front end will know about the
     // requireEmailConfirmation as it's included in the settings get endpoint.
-    await SendEmailConfirmation(user, email, redirectUri);
+    await UsersService.sendEmailConfirmation(user, email, redirectUri);
 
     res.status(201).json(user);
   } catch (e) {
@@ -152,33 +23,13 @@ router.post('/', async (req, res, next) => {
   }
 });
 
-router.post('/:user_id/actions', authorization.needed(), async (req, res, next) => {
-  const {
-    action_type,
-    metadata
-  } = req.body;
-
-  try {
-    let action = await UsersService.addAction(req.params.user_id, req.user.id, action_type, metadata);
-
-    // Set the user status to "pending" for review by moderators
-    if (action_type === 'FLAG') {
-      await UsersService.setStatus(req.params.user_id, 'PENDING');
-    }
-
-    res.status(201).json(action);
-  } catch (e) {
-    return next(e);
-  }
-});
-
 // This will allow 1 try every minute.
 const resendRateLimiter = new Limit('/api/v1/users/resend-verify', 1, '1m');
 
 // trigger an email confirmation re-send by a new user
 router.post('/resend-verify', async (req, res, next) => {
   const redirectUri = req.header('X-Pym-Url') || req.header('Referer');
-  let {email = ''} = req.body;
+  let { email = '' } = req.body;
 
   // Clean up and validate the email.
   email = email.toLowerCase().trim();
@@ -205,7 +56,7 @@ router.post('/resend-verify', async (req, res, next) => {
       throw errors.ErrNotFound;
     }
 
-    await SendEmailConfirmation(user, email, redirectUri);
+    await UsersService.sendEmailConfirmation(user, email, redirectUri);
 
     res.status(204).end();
   } catch (e) {
@@ -215,31 +66,32 @@ router.post('/resend-verify', async (req, res, next) => {
 });
 
 // trigger an email confirmation re-send from the admin panel
-router.post('/:user_id/email/confirm', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, next) => {
-  const {
-    user_id
-  } = req.params;
+router.post(
+  '/:user_id/email/confirm',
+  authorization.needed('ADMIN', 'MODERATOR'),
+  async (req, res, next) => {
+    const { user_id } = req.params;
 
-  try {
+    try {
+      let user = await UsersService.findById(user_id);
+      if (!user) {
+        return next(errors.ErrNotFound);
+      }
 
-    let user = await UsersService.findById(user_id);
-    if (!user) {
-      return next(errors.ErrNotFound);
+      // Find the first local profile.
+      const email = user.firstEmail;
+      if (!email) {
+        return next(errors.ErrMissingEmail);
+      }
+
+      // Send the email to the first local profile that was found.
+      await UsersService.sendEmailConfirmation(user, email);
+
+      res.status(204).end();
+    } catch (e) {
+      return next(e);
     }
-
-    // Find the first local profile.
-    let localProfile = user.profiles.find((profile) => profile.provider === 'local');
-    if (!localProfile) {
-      return next(errors.ErrMissingEmail);
-    }
-
-    // Send the email to the first local profile that was found.
-    await SendEmailConfirmation(user, localProfile.id);
-
-    res.status(204).end();
-  } catch (e) {
-    return next(e);
   }
-});
+);
 
 module.exports = router;
diff --git a/routes/assets/index.js b/routes/assets/index.js
index da4ea7e8d..35fb6e9ed 100644
--- a/routes/assets/index.js
+++ b/routes/assets/index.js
@@ -4,7 +4,8 @@ const router = express.Router();
 const errors = require('../../errors');
 const Assets = require('../../services/assets');
 
-const body = 'Lorem ipsum dolor sponge amet, consectetur adipiscing clam. Ut lobortis sollicitudin pillar a ornare. Curabitur dignissim vestibulum cay non rhoncus. Cras laoreet ante vel nunc hendrerit, shelf imperdiet neque egestas. Suspendisse aliquet iaculis fermentum. Talk volutpat, tellus posuere laoreet consequat, mi lacus laoreet massa, sed vehicula mauris velit non lectus. Integer non trust nec neque congue faucibus porttitor sit amet elkhorn.';
+const body =
+  'Lorem ipsum dolor sponge amet, consectetur adipiscing clam. Ut lobortis sollicitudin pillar a ornare. Curabitur dignissim vestibulum cay non rhoncus. Cras laoreet ante vel nunc hendrerit, shelf imperdiet neque egestas. Suspendisse aliquet iaculis fermentum. Talk volutpat, tellus posuere laoreet consequat, mi lacus laoreet massa, sed vehicula mauris velit non lectus. Integer non trust nec neque congue faucibus porttitor sit amet elkhorn.';
 
 router.get('/id/:asset_id', async (req, res, next) => {
   try {
@@ -18,7 +19,7 @@ router.get('/id/:asset_id', async (req, res, next) => {
       asset_id: asset.id,
       asset_url: asset.url,
       body: '',
-      basePath: '/client/embed/stream'
+      basePath: '/client/embed/stream',
     });
   } catch (err) {
     return next(err);
@@ -31,7 +32,7 @@ router.get('/title/:asset_title', (req, res) => {
     asset_url: '',
     asset_id: null,
     body: body,
-    basePath: '/client/embed/stream'
+    basePath: '/client/embed/stream',
   });
 });
 
@@ -42,7 +43,7 @@ router.get('/', async (req, res, next) => {
   try {
     const assets = await Assets.all(skip, limit);
     res.render('articles', {
-      assets: assets
+      assets: assets,
     });
   } catch (err) {
     return next(err);
diff --git a/routes/index.js b/routes/index.js
index 74e37999a..48981faff 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -1,5 +1,5 @@
-const accepts = require('accepts');
-const apollo = require('graphql-server-express');
+const SetupService = require('../services/setup');
+const apollo = require('apollo-server-express');
 const authentication = require('../middleware/authentication');
 const cookieParser = require('cookie-parser');
 const debug = require('debug')('talk:routes');
@@ -9,11 +9,13 @@ const express = require('express');
 const i18n = require('../middleware/i18n');
 const path = require('path');
 const plugins = require('../services/plugins');
-const pubsub = require('../middleware/pubsub');
-const {DISABLE_STATIC_SERVER} = require('../config');
-const {createGraphOptions} = require('../graph');
-const {passport} = require('../services/passport');
 const staticTemplate = require('../middleware/staticTemplate');
+const pubsub = require('../middleware/pubsub');
+const staticMiddleware = require('express-static-gzip');
+const { DISABLE_STATIC_SERVER } = require('../config');
+const { createGraphOptions } = require('../graph');
+const { passport } = require('../services/passport');
+const { MOUNT_PATH } = require('../url');
 
 const router = express.Router();
 
@@ -21,46 +23,47 @@ const router = express.Router();
 // STATIC FILES
 //==============================================================================
 
-// If the application is in production mode, then add gzip rewriting for the
-// content.
-if (process.env.NODE_ENV === 'production') {
-  router.get('*.js', (req, res, next) => {
-    const accept = accepts(req);
-    if (accept.encoding(['gzip']) === 'gzip') {
-
-      // Adjsut the headers on the request by adding a content type header
-      // because express won't be able to detect the mime-type with the .gz
-      // extension and we need to decalre support for the gzip encoding.
-      res.set('Content-Type', 'application/javascript');
-      res.set('Content-Encoding', 'gzip');
-
-      // Rewrite the url so that the gzip version will be served instead.
-      req.url = `${req.url}.gz`;
-    }
-
-    next();
-  });
-}
-
 if (!DISABLE_STATIC_SERVER) {
+  /**
+   * Serve the directories under public.
+   */
+  const public = path.resolve(path.join(__dirname, '../public'));
+  router.use('/public', express.static(public));
 
   /**
-   * Serve the directories under public/dist from this router.
+   * Redirect old embed calls.
    */
-  router.use('/client', express.static(path.join(__dirname, '../dist')));
-  router.use('/public', express.static(path.join(__dirname, '../public')));
+  router.get('/embed.js', (req, res) => {
+    const oldEmbed = path.resolve(MOUNT_PATH, 'embed.js');
+    const newEmbed = path.resolve(MOUNT_PATH, 'static/embed.js');
+
+    console.warn(
+      `deprecation warning: ${oldEmbed} will be phased out soon, please replace calls from ${oldEmbed} to ${newEmbed}`
+    );
+    res.redirect(301, newEmbed);
+  });
 
   /**
-   * Serves a file based on a relative path.
+   * Serve the directories under dist.
    */
-  const serveFile = (filename) => (req, res) => res.sendFile(path.join(__dirname, filename));
-
-  /**
-   * Serves the embed javascript files.
-   */
-  router.get('/embed.js', serveFile('../dist/embed.js'));
-  router.get('/embed.js.gz', serveFile('../dist/embed.js.gz'));
-  router.get('/embed.js.map', serveFile('../dist/embed.js.map'));
+  const dist = path.resolve(path.join(__dirname, '../dist'));
+  if (process.env.NODE_ENV === 'production') {
+    router.use(
+      '/static',
+      staticMiddleware(dist, {
+        indexFromEmptyFile: false,
+        enableBrotli: true,
+        customCompressions: [
+          {
+            encodingName: 'deflate',
+            fileExtension: 'zz',
+          },
+        ],
+      })
+    );
+  } else {
+    router.use('/static', express.static(dist));
+  }
 }
 
 // Add the i18n middleware to all routes.
@@ -86,7 +89,7 @@ router.use(express.json());
 const passportDebug = require('debug')('talk:passport');
 
 // Install the passport plugins.
-plugins.get('server', 'passport').forEach((plugin) => {
+plugins.get('server', 'passport').forEach(plugin => {
   passportDebug(`added plugin '${plugin.plugin.name}'`);
 
   // Pass the passport.js instance to the plugin to allow it to inject it's
@@ -110,11 +113,10 @@ router.use('/api/v1/graph/ql', apollo.graphqlExpress(createGraphOptions));
 
 // Only include the graphiql tool if we aren't in production mode.
 if (process.env.NODE_ENV !== 'production') {
-
   // Interactive graphiql interface.
   router.use('/api/v1/graph/iql', staticTemplate, (req, res) => {
     res.render('graphiql', {
-      endpointURL: 'api/v1/graph/ql'
+      endpointURL: 'api/v1/graph/ql',
     });
   });
 
@@ -122,7 +124,6 @@ if (process.env.NODE_ENV !== 'production') {
   router.get('/admin/docs', (req, res) => {
     res.render('admin/docs');
   });
-
 }
 
 router.use('/api/v1', require('./api'));
@@ -134,19 +135,33 @@ router.use('/api/v1', require('./api'));
 // Development routes.
 if (process.env.NODE_ENV !== 'production') {
   router.use('/assets', staticTemplate, require('./assets'));
-  router.get('/', staticTemplate, (req, res) => {
-    return res.render('article', {
-      title: 'Coral Talk',
-      asset_url: '',
-      asset_id: '',
-      body: '',
-      basePath: '/client/embed/stream'
-    });
+  router.get('/', staticTemplate, async (req, res) => {
+    try {
+      await SetupService.isAvailable();
+      return res.redirect('/admin/install');
+    } catch (e) {
+      return res.render('article', {
+        title: 'Coral Talk',
+        asset_url: '',
+        asset_id: '',
+        body: '',
+        basePath: '/static/embed/stream',
+      });
+    }
+  });
+} else {
+  router.get('/', async (req, res, next) => {
+    try {
+      await SetupService.isAvailable();
+      return res.redirect('/admin/install');
+    } catch (e) {
+      return res.redirect('/admin');
+    }
   });
 }
 
 // Inject server route plugins.
-plugins.get('server', 'router').forEach((plugin) => {
+plugins.get('server', 'router').forEach(plugin => {
   debug(`added plugin '${plugin.plugin.name}'`);
 
   // Pass the root router to the plugin to mount it's routes.
@@ -174,7 +189,7 @@ router.use('/api', (err, req, res, next) => {
   if (err instanceof errors.APIError) {
     res.status(err.status).json({
       message: res.locals.t(`error.${err.translation_key}`),
-      error: err
+      error: err,
     });
   } else {
     res.status(500).json({});
@@ -190,12 +205,12 @@ router.use('/', (err, req, res, next) => {
     res.status(err.status);
     res.render('error', {
       message: res.locals.t(`error.${err.translation_key}`),
-      error: process.env.NODE_ENV === 'development' ? err : {}
+      error: process.env.NODE_ENV === 'development' ? err : {},
     });
   } else {
     res.render('error', {
       message: err.message,
-      error: process.env.NODE_ENV === 'development' ? err : {}
+      error: process.env.NODE_ENV === 'development' ? err : {},
     });
   }
 });
diff --git a/scripts/docker.sh b/scripts/docker.sh
index 3aae8faf1..e1e3f9725 100755
--- a/scripts/docker.sh
+++ b/scripts/docker.sh
@@ -29,7 +29,7 @@ deploy_tag() {
       docker tag coralproject/talk:latest-onbuild coralproject/talk:$version-onbuild
   done
 
-  # Push each of the tags to docker hub, including latest
+  # Push each of the tags to dockerhub, including latest
   for version in $tag_list latest
   do
       echo "==> pushing $version"
@@ -44,6 +44,16 @@ deploy_latest() {
   docker push coralproject/talk:latest-onbuild
 }
 
+deploy_branch() {
+  echo "==> tagging branch $CIRCLE_BRANCH"
+  docker tag coralproject/talk:latest coralproject/talk:$CIRCLE_BRANCH
+  docker tag coralproject/talk:latest-onbuild coralproject/talk:$CIRCLE_BRANCH-onbuild
+
+  echo "==> pushing branch $CIRCLE_BRANCH"
+  docker push coralproject/talk:$CIRCLE_BRANCH
+  docker push coralproject/talk:$CIRCLE_BRANCH-onbuild
+}
+
 # build the repo, including the onbuild tagged versions.
 docker build -t coralproject/talk:latest -f Dockerfile .
 docker build -t coralproject/talk:latest-onbuild -f Dockerfile.onbuild .
@@ -58,11 +68,17 @@ then
     docker login -e $DOCKER_EMAIL -u $DOCKER_USER -p $DOCKER_PASS
   fi
 
-  # deploy based on the env
-  if [ -n "$CIRCLE_TAG" ]
+  if [ "$CIRCLE_BRANCH" = "master" ]
   then
-    deploy_tag
+
+    # deploy based on the env
+    if [ -n "$CIRCLE_TAG" ]
+    then
+      deploy_tag
+    else
+      deploy_latest
+    fi
   else
-    deploy_latest
+    deploy_branch
   fi
 fi
\ No newline at end of file
diff --git a/scripts/e2e.js b/scripts/e2e.js
index d1d06e99a..fb010f9e5 100755
--- a/scripts/e2e.js
+++ b/scripts/e2e.js
@@ -3,7 +3,7 @@
 process.env['NODE_ENV'] = 'test';
 
 const browserstack = require('browserstack-local');
-const {onshutdown, shutdown} = require('../bin/util');
+const { onshutdown, shutdown } = require('../bin/util');
 const program = require('commander');
 const Table = require('cli-table');
 const serve = require('../serve');
@@ -21,22 +21,23 @@ function startTunnel(key, localIdentifier) {
   console.log('Connecting local');
 
   return new Promise((resolve, reject) => {
-    bs_local.start({
-      key,
-      logFile: './test/e2e/bslocal.log',
-      verbose: 'true',
-      force: 'true',
-      onlyAutomate: 'true',
-      localIdentifier,
-    }, (error) => {
-      if (error) {
-        reject(error);
+    bs_local.start(
+      {
+        key,
+        logFile: './test/e2e/bslocal.log',
+        verbose: 'true',
+        force: 'true',
+        onlyAutomate: 'true',
+        localIdentifier,
+      },
+      error => {
+        if (error) {
+          reject(error);
+        }
+        resolve();
       }
-      resolve();
-    });
-    onshutdown([
-      () => bs_local.stop(function(){}),
-    ]);
+    );
+    onshutdown([() => bs_local.stop(function() {})]);
   });
 }
 
@@ -48,12 +49,12 @@ function seleniumInstall() {
         ['install'],
         {
           stdio: 'inherit',
-        });
-      nw.on('close', (code) => {
+        }
+      );
+      nw.on('close', code => {
         code === 0 ? resolve() : reject();
       });
-    }
-    catch (ex) {
+    } catch (ex) {
       reject(ex);
     }
   });
@@ -67,19 +68,19 @@ function nightwatch(env, config, reportsFolder, browserstack, timeout) {
         ['--config', config, '--env', env],
         {
           env: Object.assign({}, process.env, {
-            'BROWSERSTACK_LOCAL_IDENTIFIER': browserstack.localIdentifier,
-            'BROWSERSTACK_KEY': browserstack.key,
-            'BROWSERSTACK_USER': browserstack.user,
-            'REPORTS_FOLDER': `${reportsFolder}/${env}`,
-            'WAIT_FOR_TIMEOUT': timeout,
+            BROWSERSTACK_LOCAL_IDENTIFIER: browserstack.localIdentifier,
+            BROWSERSTACK_KEY: browserstack.key,
+            BROWSERSTACK_USER: browserstack.user,
+            REPORTS_FOLDER: `${reportsFolder}/${env}`,
+            WAIT_FOR_TIMEOUT: timeout,
           }),
           stdio: 'inherit',
-        });
-      nw.on('close', (code) => {
+        }
+      );
+      nw.on('close', code => {
         code === 0 ? resolve() : reject();
       });
-    }
-    catch (ex) {
+    } catch (ex) {
       reject(ex);
     }
   });
@@ -87,11 +88,7 @@ function nightwatch(env, config, reportsFolder, browserstack, timeout) {
 
 function printResults(browsers, succeeded, retries) {
   let table = new Table({
-    head: [
-      'Browser'.cyan,
-      'Status'.cyan,
-      'Retries'.cyan,
-    ]
+    head: ['Browser'.cyan, 'Status'.cyan, 'Retries'.cyan],
   });
 
   for (let browser of browsers) {
@@ -112,7 +109,14 @@ function printSection(txt) {
   console.log('*****************************'.magenta);
 }
 
-async function runBrowserTests(browsers, config, retries = 1, reportsFolder, browserstack, timeout) {
+async function runBrowserTests(
+  browsers,
+  config,
+  retries = 1,
+  reportsFolder,
+  browserstack,
+  timeout
+) {
   const succeeded = {};
   for (let browser of browsers) {
     for (let t = 0; t < retries + 1; t++) {
@@ -122,8 +126,7 @@ async function runBrowserTests(browsers, config, retries = 1, reportsFolder, bro
         succeeded[browser] = t;
         console.log(`\n==> Succeeded e2e for ${browser} #${t}\n`.green);
         break;
-      }
-      catch (ex) {
+      } catch (ex) {
         if (ex) {
           console.log('There was an error while starting the test runner:\n\n');
           process.stderr.write(`${ex.stack}\n`);
@@ -141,7 +144,8 @@ async function start(program) {
   let browsers = program.browsers.split(',');
   const retries = Number.parseInt(program.retries);
   const browserstack = {};
-  const date = new Date().toISOString()
+  const date = new Date()
+    .toISOString()
     .replace(/[T.]/g, '-')
     .replace(/:/g, '');
   const timeout = program.timeout;
@@ -163,11 +167,10 @@ async function start(program) {
       browserstack.key = program.bsKey;
       browserstack.user = program.bsUser;
     } else {
-
       // Install selenium standalone.
       await seleniumInstall();
       if (program.headless) {
-        browsers = browsers.map((b) => `${b}-headless`);
+        browsers = browsers.map(b => `${b}-headless`);
       }
     }
 
@@ -177,18 +180,16 @@ async function start(program) {
       retries,
       reportsFolder,
       browserstack,
-      timeout,
+      timeout
     );
     if (!succeeded) {
       exitCode = 1;
     }
-  }
-  catch (ex) {
+  } catch (ex) {
     console.log('There was an error:\n\n');
     process.stderr.write(`${ex.stack}\n`);
     process.exit(2);
-  }
-  finally {
+  } finally {
     console.log('Shutting down');
     shutdown();
   }
@@ -197,7 +198,9 @@ async function start(program) {
 
 program
   .version('0.1.0')
-  .description('Perform e2e testing locally or if browserstack credentials are provided on browserstack.')
+  .description(
+    'Perform e2e testing locally or if browserstack credentials are provided on browserstack.'
+  )
   .option('-u, --bs-user [user]', 'Browserstack user', 'coralproject2')
   .option('-k, --bs-key [key]', 'Browserstack api key')
   .option('--no-tunnel', 'Dont start browserstack-local')
diff --git a/scripts/generateIntrospectionResult.js b/scripts/generateIntrospectionResult.js
index a42dcd955..e07fe7c6d 100755
--- a/scripts/generateIntrospectionResult.js
+++ b/scripts/generateIntrospectionResult.js
@@ -1,24 +1,32 @@
 #! /usr/bin/env node
 
 const path = require('path');
-const introspectionFilename = path.resolve(__dirname, '..', 'client', 'coral-framework', 'graphql', 'introspection.json');
+const introspectionFilename = path.resolve(
+  __dirname,
+  '..',
+  'client',
+  'coral-framework',
+  'graphql',
+  'introspection.json'
+);
 
 const fs = require('fs');
-const {graphql, introspectionQuery} = require('graphql');
+const { graphql, introspectionQuery } = require('graphql');
 const schema = require('../graph/schema');
 
 graphql(schema, introspectionQuery)
-  .then(({data}) => {
-
+  .then(({ data }) => {
     // Serialize the introspection result as JSON.
     const introspectionResult = JSON.stringify(data, null, 2);
 
     // Write the introspection result to the filesystem.
     fs.writeFileSync(introspectionFilename, introspectionResult, 'utf8');
 
-    console.log(`Outputted result of introspectionQuery to ${introspectionFilename}`);
+    console.log(
+      `Outputted result of introspectionQuery to ${introspectionFilename}`
+    );
   })
-  .catch((err) => {
+  .catch(err => {
     console.error(err);
     process.exit(1);
   });
diff --git a/secrets.js b/secrets.js
index b7044fa09..bd15116b8 100644
--- a/secrets.js
+++ b/secrets.js
@@ -1,52 +1,70 @@
-const {
-  JWT_SECRETS,
-  JWT_SECRET,
-  JWT_ALG
-} = require('./config');
+const { JWT_SECRETS, JWT_SECRET, JWT_ALG } = require('./config');
 
 const debug = require('debug')('talk:secrets');
 const jwt = require('./services/jwt');
 
 if (JWT_SECRETS) {
   if (!Array.isArray(JWT_SECRETS)) {
-    throw new Error('TALK_JWT_SECRETS must be a JSON array in the form [{"kid": kid, ["secret": secret | "private": private, "public": public]}, ...]');
+    throw new Error(
+      'TALK_JWT_SECRETS must be a JSON array in the form [{"kid": kid, ["secret": secret | "private": private, "public": public]}, ...]'
+    );
   }
 
   if (JWT_SECRETS.length === 0) {
-    throw new Error('TALK_JWT_SECRETS must be a JSON array with non zero length');
+    throw new Error(
+      'TALK_JWT_SECRETS must be a JSON array with non zero length'
+    );
   }
 
   // Wrap a multi-secret around the available secrets.
-  module.exports.jwt = new jwt.MultiSecret(JWT_SECRETS.map((secret) => {
-    if (!('kid' in secret)) {
-      throw new Error('when multiple keys are specified, kid\'s must be specified');
-    }
+  module.exports.jwt = new jwt.MultiSecret(
+    JWT_SECRETS.map(secret => {
+      if (!('kid' in secret)) {
+        throw new Error(
+          "when multiple keys are specified, kid's must be specified"
+        );
+      }
 
-    if (typeof secret.kid !== 'string' || secret.kid.length === 0) {
-      throw new Error('kid must be a unique string');
-    }
+      if (typeof secret.kid !== 'string' || secret.kid.length === 0) {
+        throw new Error('kid must be a unique string');
+      }
 
-    // HMAC secrets do not have public/private keys.
-    if (JWT_ALG.startsWith('HS')) {
-      return new jwt.SharedSecret(secret, JWT_ALG);
-    }
+      // HMAC secrets do not have public/private keys.
+      if (JWT_ALG.startsWith('HS')) {
+        return new jwt.SharedSecret(secret, JWT_ALG);
+      }
 
-    if (!('public' in secret)) {
-      throw new Error('all symetric keys must provide a PEM encoded public key');
-    }
+      if (!('public' in secret)) {
+        throw new Error(
+          'all symetric keys must provide a PEM encoded public key'
+        );
+      }
 
-    return new jwt.AsymmetricSecret(secret, JWT_ALG);
-  }));
+      return new jwt.AsymmetricSecret(secret, JWT_ALG);
+    })
+  );
 
-  debug(`loaded ${JWT_SECRETS.length} ${JWT_ALG.startsWith('HS') ? 'shared' : 'asymmetric'} secrets`);
+  debug(
+    `loaded ${JWT_SECRETS.length} ${
+      JWT_ALG.startsWith('HS') ? 'shared' : 'asymmetric'
+    } secrets`
+  );
 } else if (JWT_SECRET) {
   if (JWT_ALG.startsWith('HS')) {
-    module.exports.jwt = new jwt.SharedSecret({
-      secret: JWT_SECRET
-    }, JWT_ALG);
+    module.exports.jwt = new jwt.SharedSecret(
+      {
+        secret: JWT_SECRET,
+      },
+      JWT_ALG
+    );
   } else {
-    module.exports.jwt = new jwt.AsymmetricSecret(JSON.parse(JWT_SECRET), JWT_ALG);
+    module.exports.jwt = new jwt.AsymmetricSecret(
+      JSON.parse(JWT_SECRET),
+      JWT_ALG
+    );
   }
 
-  debug(`loaded a ${JWT_ALG.startsWith('HS') ? 'shared' : 'asymmetric'} secret`);
+  debug(
+    `loaded a ${JWT_ALG.startsWith('HS') ? 'shared' : 'asymmetric'} secret`
+  );
 }
diff --git a/serve.js b/serve.js
index b98a49085..499df6cfe 100644
--- a/serve.js
+++ b/serve.js
@@ -1,7 +1,7 @@
 const app = require('./app');
 const debug = require('debug')('talk:cli:serve');
 const errors = require('./errors');
-const {createServer} = require('http');
+const { createServer } = require('http');
 const scraper = require('./services/scraper');
 const mailer = require('./services/mailer');
 const MigrationService = require('./services/migration');
@@ -10,16 +10,14 @@ const kue = require('./services/kue');
 const mongoose = require('./services/mongoose');
 const cache = require('./services/cache');
 const util = require('./bin/util');
-const {createSubscriptionManager} = require('./graph/subscriptions');
-const {
-  PORT
-} = require('./config');
+const { createSubscriptionManager } = require('./graph/subscriptions');
+const { PORT } = require('./config');
 
 const port = normalizePort(PORT);
 
 /**
-* Create HTTP server.
-*/
+ * Create HTTP server.
+ */
 const server = createServer(app);
 
 /**
@@ -30,18 +28,18 @@ function onError(error) {
     throw error;
   }
 
-  let bind = typeof port === 'string'
-    ? `Pipe ${port}`
-    : `Port ${port}`;
+  let bind = typeof port === 'string' ? `Pipe ${port}` : `Port ${port}`;
 
   // handle specific listen errors with friendly messages
   switch (error.code) {
-  case 'EACCES':
-    console.error(`${bind} requires elevated privileges`);
-    break;
-  case 'EADDRINUSE':
-    console.error(`${bind} is already in use`);
-    break;
+    case 'EACCES':
+      console.error(`${bind} requires elevated privileges`);
+      break;
+    case 'EADDRINUSE':
+      console.error(`${bind} is already in use`);
+      break;
+    default:
+      break;
   }
 
   throw error;
@@ -55,13 +53,11 @@ function normalizePort(val) {
   let port = parseInt(val, 10);
 
   if (isNaN(port)) {
-
     // named pipe
     return val;
   }
 
   if (port >= 0) {
-
     // port number
     return port;
   }
@@ -74,53 +70,42 @@ function normalizePort(val) {
  */
 
 async function onListening() {
-
   let addr = server.address();
-  let bind = typeof addr === 'string'
-    ? `pipe ${addr}`
-    : `port ${addr.port}`;
-  debug(`API Server Listening on ${bind}`);
+  let bind = typeof addr === 'string' ? `pipe ${addr}` : `port ${addr.port}`;
+  console.log(`API Server Listening on ${bind}`);
 }
 
 /**
  * Start the app.
  */
-async function serve({jobs = false, websockets = false} = {}) {
-
+async function serve({ jobs = false, websockets = false } = {}) {
   // Start the cache instance.
   await cache.init();
 
   try {
-
     // Check to see if the application is installed. If the application
     // has been installed, then it will throw errors.ErrSettingsNotInit, this
     // just means we don't have to check that the migrations have run.
     await SetupService.isAvailable();
 
     debug('setup is currently available, migrations not being checked');
-
   } catch (e) {
-
     // Check the error.
     switch (e) {
-    case errors.ErrInstallLock, errors.ErrSettingsInit:
+      case (errors.ErrInstallLock, errors.ErrSettingsInit):
+        debug('setup is not currently available, migrations now being checked');
 
-      debug('setup is not currently available, migrations now being checked');
-
-      // The error was expected, just continue.
-      break;
-    default:
-
-      // The error was not expected, throw the error!
-      throw e;
+        // The error was expected, just continue.
+        break;
+      default:
+        // The error was not expected, throw the error!
+        throw e;
     }
 
     // Now try and check the migration status.
     try {
-
       // Verify that the minimum migration version is met.
       await MigrationService.verify();
-
     } catch (e) {
       console.error(e);
       process.exit(1);
@@ -130,18 +115,15 @@ async function serve({jobs = false, websockets = false} = {}) {
   }
 
   /**
-  * Listen on provided port, on all network interfaces.
-  */
+   * Listen on provided port, on all network interfaces.
+   */
   server.on('error', onError);
   server.on('listening', onListening);
-  server.on('listening', () => {
-
-  });
+  server.on('listening', () => {});
   server.listen(port, () => {
-
     // Mount the websocket server if requested.
     if (websockets) {
-      debug(`Websocket Server Listening on ${port}`);
+      console.log(`Websocket Server Listening on ${port}`);
 
       // Mount the subscriptions server on the application server.
       createSubscriptionManager(server);
@@ -150,7 +132,6 @@ async function serve({jobs = false, websockets = false} = {}) {
 
   // Enable job processing on the thread if enabled.
   if (jobs) {
-
     // Start the scraper processor.
     scraper.process();
 
@@ -162,9 +143,9 @@ async function serve({jobs = false, websockets = false} = {}) {
   // because the node hooks are below which will interrupt the shutdown process.
   // Shutdown the mongoose connection, the app server, and the scraper.
   util.onshutdown([
-    () => jobs ? kue.Task.shutdown() : null,
+    () => (jobs ? kue.Task.shutdown() : null),
     () => mongoose.disconnect(),
-    () => server.close()
+    () => server.close(),
   ]);
 }
 
diff --git a/services/actions.js b/services/actions.js
index ba9f1fde5..a1cef9ff6 100644
--- a/services/actions.js
+++ b/services/actions.js
@@ -1,11 +1,10 @@
 const ActionModel = require('../models/action');
+const CommentModel = require('../models/comment');
+const UserModel = require('../models/user');
 const _ = require('lodash');
 const errors = require('../errors');
 const events = require('./events');
-const {
-  ACTIONS_NEW,
-  ACTIONS_DELETE,
-} = require('./events/constants');
+const { ACTIONS_NEW, ACTIONS_DELETE } = require('./events/constants');
 
 /**
  * findOnlyOneAndUpdate will perform a fondOneAndUpdate on the mongo collection
@@ -16,38 +15,44 @@ const {
  * @param {object} update the update operation for the mongo findOneAndUpdate op
  * @param {object} options the options operation for the mongo findOneAndUpdate op
  */
-const findOnlyOneAndUpdate = async (query, update, options = {}) => new Promise((resolve, reject) => {
-  ActionModel.findOneAndUpdate(query, update, Object.assign({}, options, {
+const findOnlyOneAndUpdate = async (query, update, options = {}) =>
+  new Promise((resolve, reject) => {
+    ActionModel.findOneAndUpdate(
+      query,
+      update,
+      Object.assign({}, options, {
+        // Use raw result to get `updatedExisting`.
+        passRawResult: true,
 
-    // Use raw result to get `updatedExisting`.
-    passRawResult: true,
+        // Ensure that if it's new, we return the new object created.
+        new: true,
 
-    // Ensure that if it's new, we return the new object created.
-    new: true,
+        // Perform an upsert in the event that this doesn't exist.
+        upsert: true,
 
-    // Perform an upsert in the event that this doesn't exist.
-    upsert: true,
-
-    // Set the default values if not provided based on the mongoose models.
-    setDefaultsOnInsert: true
-  }), (err, doc, raw) => {
-    if (err) { return reject(err); }
-    if (raw.lastErrorObject.updatedExisting) {
-      return reject(new errors.ErrAlreadyExists(raw.value));
-    }
-    return resolve(raw.value);
+        // Set the default values if not provided based on the mongoose models.
+        setDefaultsOnInsert: true,
+      }),
+      (err, doc, raw) => {
+        if (err) {
+          return reject(err);
+        }
+        if (raw.lastErrorObject.updatedExisting) {
+          return reject(new errors.ErrAlreadyExists(raw.value));
+        }
+        return resolve(raw.value);
+      }
+    );
   });
-});
 
 module.exports = class ActionsService {
-
   /**
    * Finds an action by the id.
    *
    * @param {String} id  identifier of the action (uuid)
-  */
+   */
   static findById(id) {
-    return ActionModel.findOne({id});
+    return ActionModel.findOne({ id });
   }
 
   /**
@@ -59,20 +64,21 @@ module.exports = class ActionsService {
    * @return {Promise}
    */
   static async create(action) {
-
     // Actions are made unique by using a query that can be reproducable, i.e.,
     // not containing user inputable values.
-    let foundAction = await findOnlyOneAndUpdate({
-      action_type: action.action_type,
-      item_type: action.item_type,
-      item_id: action.item_id,
-      user_id: action.user_id,
-      group_id: action.group_id,
-    }, {
-
-      // Only set when not existing.
-      $setOnInsert: action,
-    });
+    let foundAction = await findOnlyOneAndUpdate(
+      {
+        action_type: action.action_type,
+        item_type: action.item_type,
+        item_id: action.item_id,
+        user_id: action.user_id,
+        group_id: action.group_id,
+      },
+      {
+        // Only set when not existing.
+        $setOnInsert: action,
+      }
+    );
 
     // Emit that there was a new action created.
     await events.emitAsync(ACTIONS_NEW, foundAction);
@@ -84,10 +90,10 @@ module.exports = class ActionsService {
    * Finds actions in an array of ids.
    *
    * @param {String} ids array of user identifiers (uuid)
-  */
+   */
   static async findByItemIdArray(item_ids) {
     let actions = await ActionModel.find({
-      'item_id': {$in: item_ids}
+      item_id: { $in: item_ids },
     });
 
     if (actions === null) {
@@ -106,59 +112,64 @@ module.exports = class ActionsService {
    * @param  {String} [current_user_id=''] [description]
    * @return {[type]}                      [description]
    */
-  static getActionSummariesFromComments(asset_id = '', comments, current_user_id = '') {
-
+  static getActionSummariesFromComments(
+    asset_id = '',
+    comments,
+    current_user_id = ''
+  ) {
     // Get the user id's from the author id's as a unique array that gets
     // sorted.
-    let userIDs = _.uniq(comments.map((comment) => comment.author_id)).sort();
+    let userIDs = _.uniq(comments.map(comment => comment.author_id)).sort();
 
     // Fetch the actions for pretty much everything at this point.
-    return ActionsService.getActionSummaries(_.uniq([
+    return ActionsService.getActionSummaries(
+      _.uniq(
+        [
+          // Actions can be on assets...
+          asset_id,
 
-      // Actions can be on assets...
-      asset_id,
+          // Comments...
+          ...comments.map(comment => comment.id),
 
-      // Comments...
-      ...comments.map((comment) => comment.id),
-
-      // Or Authors...
-      ...userIDs
-    ].filter((e) => e)), current_user_id);
+          // Or Authors...
+          ...userIDs,
+        ].filter(e => e)
+      ),
+      current_user_id
+    );
   }
 
   /**
    * Returns summaries of actions for an array of ids.
    *
    * @param {String} ids array of user identifiers (uuid)
-  */
+   */
   static getActionSummaries(item_ids, current_user_id = '') {
-
     // only grab items that match the specified item id's
     let $match = {
       item_id: {
-        $in: item_ids
-      }
+        $in: item_ids,
+      },
     };
 
     let $group = {
-
       // group unique documents by these properties, we are leveraging the
-      // fact that each uuid is completly unique.
+      // fact that each uuid is completely unique.
       _id: {
         item_id: '$item_id',
         action_type: '$action_type',
-        group_id: '$group_id'
+        group_id: '$group_id',
       },
 
       // and sum up all actions matching the above grouping criteria
       count: {
-        $sum: 1
+        $sum: 1,
       },
 
-      // we are leveraging the fact that each uuid is completly unique and
+      // we are leveraging the fact that each uuid is completely unique and
       // just grabbing the last instance of the item type here.
       item_type: {
-        $first: '$item_type'
+        $first: '$item_type',
       },
 
       current_user: {
@@ -168,14 +179,13 @@ module.exports = class ActionsService {
               $eq: ['$user_id', current_user_id],
             },
             then: '$$CURRENT',
-            else: null
-          }
-        }
-      }
+            else: null,
+          },
+        },
+      },
     };
 
     let $project = {
-
       // suppress the _id field
       _id: false,
 
@@ -189,14 +199,14 @@ module.exports = class ActionsService {
       item_type: '$item_type',
 
       // set the current user to false here
-      current_user: '$current_user'
+      current_user: '$current_user',
     };
 
     return ActionModel.aggregate([
-      {$match},
-      {$group},
-      {$project},
-      {$sort: {action_type: 1, group_id: 1}},
+      { $match },
+      { $group },
+      { $project },
+      { $sort: { action_type: 1, group_id: 1 } },
     ]);
   }
 
@@ -205,11 +215,11 @@ module.exports = class ActionsService {
    *
    * @param {String} action_type type of action
    * @param {String} item_type type of item the action is on
-  */
+   */
   static findByType(action_type, item_type) {
     return ActionModel.find({
-      'action_type': action_type,
-      'item_type': item_type
+      action_type: action_type,
+      item_type: item_type,
     });
   }
 
@@ -220,7 +230,7 @@ module.exports = class ActionsService {
    * @param {object} param the action to use as the query source, for which we
    *                       only look at the id, user_id.
    */
-  static async delete({id, user_id}) {
+  static async delete({ id, user_id }) {
     let action = await ActionModel.findOneAndRemove({
       id,
       user_id,
@@ -240,11 +250,79 @@ module.exports = class ActionsService {
    *
    * @param {String} action_type type of action
    * @param {String} item_type type of item the action is on
-  */
+   */
   static findCommentsIdByActionType(action_type, item_type) {
-    return ActionModel.find({
-      'action_type': action_type,
-      'item_type': item_type
-    }, 'item_id');
+    return ActionModel.find(
+      {
+        action_type: action_type,
+        item_type: item_type,
+      },
+      'item_id'
+    );
   }
 };
+
+const incrActionCounts = async (action, value) => {
+  const ACTION_TYPE = action.action_type.toLowerCase();
+
+  const update = {
+    [`action_counts.${ACTION_TYPE}`]: value,
+  };
+
+  if (action.group_id && action.group_id.length > 0) {
+    const GROUP_ID = action.group_id.toLowerCase();
+
+    update[`action_counts.${ACTION_TYPE}_${GROUP_ID}`] = value;
+  }
+
+  try {
+    switch (action.item_type) {
+      case 'USERS':
+        return UserModel.update(
+          {
+            id: action.item_id,
+          },
+          {
+            $inc: update,
+          }
+        );
+      case 'COMMENTS':
+        return CommentModel.update(
+          {
+            id: action.item_id,
+          },
+          {
+            $inc: update,
+          }
+        );
+      default:
+        throw new Error('Invalid item type for action summary monitoring');
+    }
+  } catch (err) {
+    console.error(`Can't mutate the action_counts.${ACTION_TYPE}:`, err);
+  }
+};
+
+// When a new action is created, modify the comment.
+events.on(ACTIONS_NEW, async action => {
+  if (
+    !action ||
+    (action.item_type !== 'COMMENTS' && action.item_type !== 'USERS')
+  ) {
+    return;
+  }
+
+  return incrActionCounts(action, 1);
+});
+
+// When an action is deleted, remove the action count on the comment.
+events.on(ACTIONS_DELETE, async action => {
+  if (
+    !action ||
+    (action.item_type !== 'COMMENTS' && action.item_type !== 'USERS')
+  ) {
+    return;
+  }
+
+  return incrActionCounts(action, -1);
+});
diff --git a/services/assets.js b/services/assets.js
index e2ba0fe04..f229bb353 100644
--- a/services/assets.js
+++ b/services/assets.js
@@ -1,20 +1,19 @@
 const CommentModel = require('../models/comment');
 const AssetModel = require('../models/asset');
 const SettingsService = require('./settings');
-const domainlist = require('./domainlist');
+const DomainList = require('./domain_list');
 const errors = require('../errors');
 const merge = require('lodash/merge');
 const isEmpty = require('lodash/isEmpty');
-const {dotize} = require('./utils');
+const { dotize } = require('./utils');
 
 module.exports = class AssetsService {
-
   /**
    * Finds an asset by its id.
    * @param {String} id  identifier of the asset (uuid).
    */
   static findById(id) {
-    return AssetModel.findOne({id});
+    return AssetModel.findOne({ id });
   }
 
   /**
@@ -22,7 +21,7 @@ module.exports = class AssetsService {
    * @param {String} url  identifier of the asset (uuid).
    */
   static findByUrl(url) {
-    return AssetModel.findOne({url});
+    return AssetModel.findOne({ url });
   }
 
   /**
@@ -32,10 +31,7 @@ module.exports = class AssetsService {
    * @return {Promise}
    */
   static async rectifySettings(assetQuery, settings = null) {
-    const [
-      globalSettings,
-      asset,
-    ] = await Promise.all([
+    const [globalSettings, asset] = await Promise.all([
       settings !== null ? settings : SettingsService.retrieve(),
       assetQuery,
     ]);
@@ -63,24 +59,23 @@ module.exports = class AssetsService {
    * @return {Promise}
    */
   static findOrCreateByUrl(url) {
-
     // Check the URL to confirm that is in the domain whitelist
     return Promise.all([
-      domainlist.urlCheck(url),
-      SettingsService.retrieve()
+      DomainList.urlCheck(url),
+      SettingsService.retrieve(),
     ]).then(([whitelisted, settings]) => {
-
-      const update = {$setOnInsert: {url}};
+      const update = { $setOnInsert: { url } };
 
       if (settings.autoCloseStream) {
-        update.$setOnInsert.closedAt = new Date(Date.now() + settings.closedTimeout * 1000);
+        update.$setOnInsert.closedAt = new Date(
+          Date.now() + settings.closedTimeout * 1000
+        );
       }
 
       if (!whitelisted) {
         return Promise.reject(errors.ErrInvalidAssetURL);
       } else {
-        return AssetModel.findOneAndUpdate({url}, update, {
-
+        return AssetModel.findOneAndUpdate({ url }, update, {
           // Ensure that if it's new, we return the new object created.
           new: true,
 
@@ -88,7 +83,7 @@ module.exports = class AssetsService {
           upsert: true,
 
           // Set the default values if not provided based on the mongoose models.
-          setDefaultsOnInsert: true
+          setDefaultsOnInsert: true,
         });
       }
     });
@@ -102,27 +97,32 @@ module.exports = class AssetsService {
    */
   static async overrideSettings(id, settings) {
     try {
-      const result =  await AssetModel.findOneAndUpdate({id}, {
-
-        // The effect of dotize is that only the provided setting values are overwritten
-        // and does not replace the whole object.
-        $set: dotize({settings})
-      }, {
-        new: true
-      });
+      const result = await AssetModel.findOneAndUpdate(
+        { id },
+        {
+          // The effect of dotize is that only the provided setting values are overwritten
+          // and does not replace the whole object.
+          $set: dotize({ settings }),
+        },
+        {
+          new: true,
+        }
+      );
       return result;
     } catch (e) {
-
       // Legacy data models contains `settings=null` as a default which cannot be traversed.
       // New data models uses `settings={}`.
       if (e.code === 16837) {
-
         // Overwrite it fully in this case.
-        const result =  await AssetModel.findOneAndUpdate({id}, {
-          $set: {settings}
-        }, {
-          new: true
-        });
+        const result = await AssetModel.findOneAndUpdate(
+          { id },
+          {
+            $set: { settings },
+          },
+          {
+            new: true,
+          }
+        );
         return result;
       } else {
         throw e;
@@ -135,14 +135,14 @@ module.exports = class AssetsService {
    * @param  {String} value string to search by.
    * @return {Promise}
    */
-  static search({value, limit, open, sortOrder, cursor} = {}) {
+  static search({ value, limit, open, sortOrder, cursor } = {}) {
     let assets = AssetModel.find({});
 
     if (value && value.length > 0) {
       assets.merge({
         $text: {
-          $search: value
-        }
+          $search: value,
+        },
       });
     }
 
@@ -151,20 +151,20 @@ module.exports = class AssetsService {
         assets.merge({
           $or: [
             {
-              closedAt: null
+              closedAt: null,
             },
             {
               closedAt: {
-                $gt: Date.now()
-              }
-            }
-          ]
+                $gt: Date.now(),
+              },
+            },
+          ],
         });
       } else {
         assets.merge({
           closedAt: {
-            $lt: Date.now()
-          }
+            $lt: Date.now(),
+          },
         });
       }
     }
@@ -185,7 +185,9 @@ module.exports = class AssetsService {
       }
     }
 
-    return assets.sort({created_at: sortOrder === 'DESC' ? -1 : 1}).limit(limit);
+    return assets
+      .sort({ created_at: sortOrder === 'DESC' ? -1 : 1 })
+      .limit(limit);
   }
 
   /**
@@ -194,20 +196,18 @@ module.exports = class AssetsService {
    * @return {Promise}     resolves to list of Assets
    */
   static async findByIDs(ids) {
-
     // Find the assets.
     let assets = await AssetModel.find({
       id: {
-        $in: ids
-      }
+        $in: ids,
+      },
     });
 
     // Return them in the right order.
-    return ids.map((id) => assets.find((asset) => asset.id === id));
+    return ids.map(id => assets.find(asset => asset.id === id));
   }
 
   static async updateURL(id, url) {
-
     // Try to see if an asset already exists with the given url.
     let asset = await AssetsService.findByUrl(url);
     if (asset !== null) {
@@ -217,13 +217,15 @@ module.exports = class AssetsService {
     // Seems that there was no other asset with the same url, try and perform
     // the rename operation! An error may be thrown from this if the operation
     // fails. This is ok.
-    await AssetModel.update({id}, {$set: {url}});
+    await AssetModel.update({ id }, { $set: { url } });
   }
 
   static async merge(srcAssetID, dstAssetID) {
-
     // Fetch both assets.
-    let [srcAsset, dstAsset] = await AssetsService.findByIDs([srcAssetID, dstAssetID]);
+    let [srcAsset, dstAsset] = await AssetsService.findByIDs([
+      srcAssetID,
+      dstAssetID,
+    ]);
     if (!srcAsset || !dstAsset) {
       throw errors.ErrNotFound;
     }
@@ -232,27 +234,29 @@ module.exports = class AssetsService {
     // to the src asset to the dst asset, and then removing the src asset.
 
     // First, update all the old comments to the new asset.
-    await CommentModel.update({
-      asset_id: srcAssetID
-    }, {
-      $set: {
-        asset_id: dstAssetID
+    await CommentModel.update(
+      {
+        asset_id: srcAssetID,
+      },
+      {
+        $set: {
+          asset_id: dstAssetID,
+        },
+      },
+      {
+        multi: true,
       }
-    }, {
-      multi: true
-    });
+    );
 
     // Second remove the old asset.
     await AssetModel.remove({
-      id: srcAssetID
+      id: srcAssetID,
     });
 
     // That's it!
   }
 
   static all(limit = undefined) {
-    return AssetModel
-      .find({})
-      .limit(limit);
+    return AssetModel.find({}).limit(limit);
   }
 };
diff --git a/services/cache.js b/services/cache.js
index cac05c091..c413537a7 100644
--- a/services/cache.js
+++ b/services/cache.js
@@ -1,7 +1,7 @@
 const redis = require('./redis');
 const debug = require('debug')('talk:services:cache');
 
-const cache = module.exports = {};
+const cache = (module.exports = {});
 
 /**
  * This collects a key that may either be an array or a string and creates a
@@ -9,7 +9,7 @@ const cache = module.exports = {};
  * @param  {Mixed} key Either an array of items composing a key or a string
  * @return {String}    A string that represents a key
  */
-const keyfunc = (key) => {
+const keyfunc = key => {
   if (Array.isArray(key)) {
     return `cache[${key.join(':')}]`;
   }
@@ -55,7 +55,6 @@ cache.wrap = async (key, expiry, work, kf = keyfunc) => {
  * Init sets up the scripts used in Redis with the incr/decr commands.
  */
 cache.init = async () => {
-
   // Create the redis instance.
   cache.client = redis.createClient();
 
@@ -98,13 +97,15 @@ cache.init = async () => {
  * This will increment a key in redis and update the expiry iff it already
  * exists, otherwise it will do nothing.
  */
-cache.incr = async (key, expiry, kf = keyfunc) => cache.client.increx(kf(key), expiry);
+cache.incr = async (key, expiry, kf = keyfunc) =>
+  cache.client.increx(kf(key), expiry);
 
 /**
  * This will decrement a key in redis and update the expiry iff it already
  * exists, otherwise it will do nothing.
  */
-cache.decr = async (key, expiry, kf = keyfunc) => cache.client.decrex(kf(key, expiry));
+cache.decr = async (key, expiry, kf = keyfunc) =>
+  cache.client.decrex(kf(key, expiry));
 
 /**
  * This will increment many keys in redis and update the expiry iff it already
@@ -114,7 +115,6 @@ cache.incrMany = async (keys, expiry, kf = keyfunc) => {
   let multi = cache.client.multi();
 
   for (const key of keys) {
-
     // Queue up the evalsha command.
     multi.increx(kf(key), expiry);
   }
@@ -130,7 +130,6 @@ cache.decrMany = async (keys, expiry, kf = keyfunc) => {
   let multi = cache.client.multi();
 
   for (const key of keys) {
-
     // Queue up the evalsha command.
     multi.decrex(kf(key), expiry);
   }
@@ -154,10 +153,10 @@ cache.wrapMany = async (keys, expiry, work, kf = keyfunc) => {
 
   // find any of the null valued items by collecting the work
   let workRefs = values
-    .map((value, index) => ({value, index, key: keys[index]}))
-    .filter(({value}) => value === null);
+    .map((value, index) => ({ value, index, key: keys[index] }))
+    .filter(({ value }) => value === null);
 
-  let workKeys = workRefs.map(({key}) => key);
+  let workKeys = workRefs.map(({ key }) => key);
 
   debug(`wrapMany: hit ratio: ${keys.length - workKeys.length}/${keys.length}`);
 
@@ -172,7 +171,7 @@ cache.wrapMany = async (keys, expiry, work, kf = keyfunc) => {
         .then(() => {
           debug('wrapMany: setMany complete');
         })
-        .catch((err) => {
+        .catch(err => {
           console.error(err);
         });
     });
@@ -192,15 +191,15 @@ cache.wrapMany = async (keys, expiry, work, kf = keyfunc) => {
  * @param  {Mixed} key Either an array of items composing a key or a string
  * @return {Promise}
  */
-cache.get = async (key, kf = keyfunc) => cache.client.get(kf(key)).then((reply) => {
-  if (typeof reply !== 'undefined' && reply !== null) {
+cache.get = async (key, kf = keyfunc) =>
+  cache.client.get(kf(key)).then(reply => {
+    if (typeof reply !== 'undefined' && reply !== null) {
+      // Parse the stored cache value from JSON.
+      return JSON.parse(reply);
+    }
 
-    // Parse the stored cache value from JSON.
-    return JSON.parse(reply);
-  }
-
-  return null;
-});
+    return null;
+  });
 
 /**
  * Returns many replies.
@@ -209,23 +208,22 @@ cache.get = async (key, kf = keyfunc) => cache.client.get(kf(key)).then((reply)
  * @param  {Function}      [kf=keyfunc] optional key function to use to turn the
  *                                      provided key into a string for the cache.
  */
-cache.getMany = async (keys, kf = keyfunc) => cache.client.mget(keys.map(kf)).then((replies) => {
+cache.getMany = async (keys, kf = keyfunc) =>
+  cache.client.mget(keys.map(kf)).then(replies => {
+    // Parse the replies.
+    for (let i = 0; i < replies.length; i++) {
+      let value = null;
 
-  // Parse the replies.
-  for (let i = 0; i < replies.length; i++) {
-    let value = null;
+      if (typeof replies[i] !== 'undefined' && replies[i] !== null) {
+        // Parse the stored cache value from JSON.
+        value = JSON.parse(replies[i]);
+      }
 
-    if (typeof replies[i] !== 'undefined' && replies[i] !== null) {
-
-      // Parse the stored cache value from JSON.
-      value = JSON.parse(replies[i]);
+      replies[i] = value;
     }
 
-    replies[i] = value;
-  }
-
-  return replies;
-});
+    return replies;
+  });
 
 /**
  * Sets many entries in the cache.
@@ -238,7 +236,6 @@ cache.setMany = async (keys, values, expiry, kf = keyfunc) => {
   let multi = cache.client.multi();
 
   keys.forEach((key, index) => {
-
     // Serialize the value as JSON.
     let reply = JSON.stringify(values[index]);
 
@@ -255,7 +252,6 @@ cache.setMany = async (keys, values, expiry, kf = keyfunc) => {
  * @return {Promise}
  */
 cache.invalidate = async (key, kf = keyfunc) => {
-
   debug(`invalidate: ${kf(key)}`);
 
   return cache.client.del(kf(key));
@@ -270,7 +266,6 @@ cache.invalidate = async (key, kf = keyfunc) => {
  * @return {Promise}
  */
 cache.set = async (key, value, expiry, kf = keyfunc) => {
-
   // Serialize the value as JSON.
   let reply = JSON.stringify(value);
 
@@ -283,7 +278,6 @@ cache.set = async (key, value, expiry, kf = keyfunc) => {
 cache.h = {};
 
 cache.h.get = async (key, field = '__default__') => {
-
   // Get the current value from redis.
   const reply = await cache.client.hget(keyfunc(key), field);
 
@@ -295,7 +289,6 @@ cache.h.get = async (key, field = '__default__') => {
 };
 
 cache.h.set = async (key, field = '__default__', value, expiry = 60) => {
-
   // Serialize the value as JSON.
   let reply = JSON.stringify(value);
 
@@ -339,6 +332,8 @@ cache.h.wrap = async (key, field, expiry, work) => {
   return value;
 };
 
-cache.h.incr = async (key, field = '__default__', expiry) => cache.client.hincrbyex(keyfunc(key), field, 1, expiry);
+cache.h.incr = async (key, field = '__default__', expiry) =>
+  cache.client.hincrbyex(keyfunc(key), field, 1, expiry);
 
-cache.h.decr = async (key, field = '__default__', expiry) => cache.client.hincrbyex(keyfunc(key), field, -1, expiry);
+cache.h.decr = async (key, field = '__default__', expiry) =>
+  cache.client.hincrbyex(keyfunc(key), field, -1, expiry);
diff --git a/services/comments.js b/services/comments.js
index ec55cfb4d..344115054 100644
--- a/services/comments.js
+++ b/services/comments.js
@@ -4,45 +4,46 @@ const debug = require('debug')('talk:services:comments');
 const ActionsService = require('./actions');
 const SettingsService = require('./settings');
 
-const sc = require('snake-case');
 const cloneDeep = require('lodash/cloneDeep');
 const errors = require('../errors');
 const events = require('./events');
-const {
-  ACTIONS_NEW,
-  ACTIONS_DELETE,
-  COMMENTS_NEW,
-  COMMENTS_EDIT,
-} = require('./events/constants');
+const { COMMENTS_NEW, COMMENTS_EDIT } = require('./events/constants');
 
 module.exports = class CommentsService {
-
   /**
    * Creates a new Comment that came from a public source.
    * @param  {Mixed} comment either a single comment or an array of comments.
    * @return {Promise}
    */
   static async publicCreate(comment) {
-
     // Check to see if this is an array of comments, if so map it out.
     if (Array.isArray(comment)) {
       return Promise.all(comment.map(CommentsService.publicCreate));
     }
 
-    const {
-      status = 'NONE',
-    } = comment;
+    const { status = 'NONE' } = comment;
 
-    const commentModel = new CommentModel(Object.assign({
-      status_history: status ? [{
-        type: status,
-        created_at: new Date()
-      }] : [],
-      body_history: [{
-        body: comment.body,
-        created_at: new Date()
-      }]
-    }, comment));
+    const commentModel = new CommentModel(
+      Object.assign(
+        {
+          status_history: status
+            ? [
+                {
+                  type: status,
+                  created_at: new Date(),
+                },
+              ]
+            : [],
+          body_history: [
+            {
+              body: comment.body,
+              created_at: new Date(),
+            },
+          ],
+        },
+        comment
+      )
+    );
 
     const savedCommentModel = await commentModel.save();
 
@@ -58,13 +59,10 @@ module.exports = class CommentsService {
    * @param {Object} comment the comment to get the last status of
    */
   static lastUnmoderatedStatus(comment) {
-    const UNMODERATED_STATUSES = [
-      'NONE',
-      'PREMOD',
-    ];
+    const UNMODERATED_STATUSES = ['NONE', 'PREMOD'];
 
     for (let i = comment.status_history.length - 1; i >= 0; i--) {
-      const {type} = comment.status_history[i];
+      const { type } = comment.status_history[i];
 
       if (UNMODERATED_STATUSES.includes(type)) {
         return type;
@@ -80,7 +78,7 @@ module.exports = class CommentsService {
    * @param {String} body       the new Comment body
    * @param {String} status     the new Comment status
    */
-  static async edit({id, author_id, body, status}) {
+  static async edit({ id, author_id, body, status }) {
     const EDITABLE_STATUSES = ['NONE', 'PREMOD', 'ACCEPTED'];
 
     const query = {
@@ -93,7 +91,9 @@ module.exports = class CommentsService {
 
     // Establish the edit window (if it exists) and add the condition to the
     // original query.
-    const {editCommentWindowLength: editWindowMs} = await SettingsService.retrieve();
+    const {
+      editCommentWindowLength: editWindowMs,
+    } = await SettingsService.retrieve();
     const lastEditableCommentCreatedAt = new Date(Date.now() - editWindowMs);
     query.created_at = {
       $gt: lastEditableCommentCreatedAt,
@@ -112,12 +112,11 @@ module.exports = class CommentsService {
         status_history: {
           type: status,
           created_at: new Date(),
-        }
+        },
       },
     });
 
     if (originalComment == null) {
-
       // Try to get the comment.
       const comment = await CommentsService.findById(id);
       if (comment == null) {
@@ -127,13 +126,17 @@ module.exports = class CommentsService {
 
       // Check to see if the user was't allowed to edit it.
       if (comment.author_id !== author_id) {
-        debug('rejecting comment edit because author id does not match editing user');
+        debug(
+          'rejecting comment edit because author id does not match editing user'
+        );
         throw errors.ErrNotAuthorized;
       }
 
       // Check to see if the comment had a status that was editable.
       if (!EDITABLE_STATUSES.includes(comment.status)) {
-        debug('rejecting comment edit because original comment has a non-editable status');
+        debug(
+          'rejecting comment edit because original comment has a non-editable status'
+        );
         throw errors.ErrNotAuthorized;
       }
 
@@ -163,29 +166,32 @@ module.exports = class CommentsService {
     // previously, we should mark the comment as 'NONE' or 'PREMOD', which ever
     // was most recent if the new comment is destined to be `NONE` or `PREMOD`.
     if (originalComment.status === 'ACCEPTED' && status === 'NONE') {
-
-      const lastUnmoderatedStatus = CommentsService.lastUnmoderatedStatus(originalComment);
+      const lastUnmoderatedStatus = CommentsService.lastUnmoderatedStatus(
+        originalComment
+      );
 
       // If the last moderated status was found and the current comment doesn't
       // match this already.
       if (lastUnmoderatedStatus && status !== lastUnmoderatedStatus) {
-
         // Update the comment model (if at this point, the status is still
         // accepted) with the previously unmoderated status
-        await CommentModel.update({
-          id,
-          status,
-        }, {
-          $set: {
-            status: lastUnmoderatedStatus,
+        await CommentModel.update(
+          {
+            id,
+            status,
           },
-          $push: {
-            status_history: {
-              type: lastUnmoderatedStatus,
-              created_at: new Date(),
-            }
-          },
-        });
+          {
+            $set: {
+              status: lastUnmoderatedStatus,
+            },
+            $push: {
+              status_history: {
+                type: lastUnmoderatedStatus,
+                created_at: new Date(),
+              },
+            },
+          }
+        );
 
         // Update the returned comment.
         editedComment.status = lastUnmoderatedStatus;
@@ -207,7 +213,7 @@ module.exports = class CommentsService {
    * @return {Promise}
    */
   static findById(id) {
-    return CommentModel.findOne({id});
+    return CommentModel.findOne({ id });
   }
 
   /**
@@ -217,7 +223,7 @@ module.exports = class CommentsService {
    */
   static findByAssetId(asset_id) {
     return CommentModel.find({
-      asset_id
+      asset_id,
     });
   }
 
@@ -233,8 +239,8 @@ module.exports = class CommentsService {
     return CommentModel.find({
       asset_id,
       status: {
-        $in: statuses
-      }
+        $in: statuses,
+      },
     });
   }
 
@@ -244,13 +250,16 @@ module.exports = class CommentsService {
    * @return {Promise}
    */
   static findByActionType(action_type) {
-    return ActionsService
-      .findCommentsIdByActionType(action_type, 'COMMENTS')
-      .then((actions) => CommentModel.find({
+    return ActionsService.findCommentsIdByActionType(
+      action_type,
+      'COMMENTS'
+    ).then(actions =>
+      CommentModel.find({
         id: {
-          $in: actions.map((a) => a.item_id)
-        }
-      }));
+          $in: actions.map(a => a.item_id),
+        },
+      })
+    );
   }
 
   /**
@@ -259,9 +268,10 @@ module.exports = class CommentsService {
    * @return {Promise}
    */
   static findIdsByActionType(action_type) {
-    return ActionsService
-      .findCommentsIdByActionType(action_type, 'COMMENTS')
-      .then((actions) => actions.map((a) => a.item_id));
+    return ActionsService.findCommentsIdByActionType(
+      action_type,
+      'COMMENTS'
+    ).then(actions => actions.map(a => a.item_id));
   }
 
   /**
@@ -270,7 +280,7 @@ module.exports = class CommentsService {
    * @return {Promise} resovles to comment array
    */
   static findByStatus(status = 'NONE') {
-    return CommentModel.find({status});
+    return CommentModel.find({ status });
   }
 
   /**
@@ -283,16 +293,19 @@ module.exports = class CommentsService {
    */
   static async pushStatus(id, status, assigned_by = null) {
     const created_at = new Date();
-    const originalComment = await CommentModel.findOneAndUpdate({id}, {
-      $push: {
-        status_history: {
-          type: status,
-          created_at,
-          assigned_by,
-        }
-      },
-      $set: {status}
-    });
+    const originalComment = await CommentModel.findOneAndUpdate(
+      { id },
+      {
+        $push: {
+          status_history: {
+            type: status,
+            created_at,
+            assigned_by,
+          },
+        },
+        $set: { status },
+      }
+    );
 
     if (originalComment == null) {
       throw errors.ErrNotFound;
@@ -326,7 +339,7 @@ module.exports = class CommentsService {
       item_type: 'COMMENTS',
       user_id,
       action_type,
-      metadata
+      metadata,
     });
   }
 };
@@ -335,65 +348,26 @@ module.exports = class CommentsService {
 // Event Hooks
 //==============================================================================
 
-const incrActionCounts = async (action, value) => {
-  const ACTION_TYPE = sc(action.action_type.toLowerCase());
-
-  const update = {
-    [`action_counts.${ACTION_TYPE}`]: value,
-  };
-
-  if (action.group_id && action.group_id.length > 0) {
-    const GROUP_ID = sc(action.group_id.toLowerCase());
-
-    update[`action_counts.${ACTION_TYPE}_${GROUP_ID}`] = value;
-  }
-
-  try {
-    await CommentModel.update({
-      id: action.item_id,
-    }, {
-      $inc: update,
-    });
-  } catch (err) {
-    console.error(`Can't mutate the action_counts.${ACTION_TYPE}:`, err);
-  }
-};
-
-// When a new action is created, modify the comment.
-events.on(ACTIONS_NEW, async (action) => {
-  if (!action || action.item_type !== 'COMMENTS') {
-    return;
-  }
-
-  return incrActionCounts(action, 1);
-});
-
-// When an action is deleted, remove the action count on the comment.
-events.on(ACTIONS_DELETE, async (action) => {
-  if (!action || action.item_type !== 'COMMENTS') {
-    return;
-  }
-
-  return incrActionCounts(action, -1);
-});
-
 const incrReplyCount = async (comment, value) => {
   try {
-    await CommentModel.update({
-      id: comment.parent_id,
-    }, {
-      $inc: {
-        reply_count: value,
+    await CommentModel.update(
+      {
+        id: comment.parent_id,
       },
-    });
+      {
+        $inc: {
+          reply_count: value,
+        },
+      }
+    );
   } catch (err) {
-    console.error('Can\'t mutate the reply count:', err);
+    console.error("Can't mutate the reply count:", err);
   }
 };
 
 // When a comment is created, if it is a reply, increment the reply count on the
 // parent's document.
-events.on(COMMENTS_NEW, async (comment) => {
+events.on(COMMENTS_NEW, async comment => {
   if (
     !comment || // Check that the comment is defined.
     (!comment.parent_id || comment.parent_id.length === 0) || // Check that the comment has a parent (is a reply).
diff --git a/services/domainlist.js b/services/domain_list.js
similarity index 79%
rename from services/domainlist.js
rename to services/domain_list.js
index a75d62dca..aab1f9ea8 100644
--- a/services/domainlist.js
+++ b/services/domain_list.js
@@ -1,15 +1,14 @@
-const debug = require('debug')('talk:services:domainlist');
+const debug = require('debug')('talk:services:domain_list');
 const _ = require('lodash');
 const SettingsService = require('./settings');
 
-const {ROOT_URL} = require('../config');
+const { ROOT_URL } = require('../config');
 
 /**
  * The root domainlist object.
  * @type {Object}
  */
-class Domainlist {
-
+class DomainList {
   constructor() {
     this.lists = {
       whitelist: [],
@@ -20,7 +19,7 @@ class Domainlist {
    * Loads domains white list in from the database
    */
   async load() {
-    const {domains} = await SettingsService.retrieve();
+    const { domains } = await SettingsService.retrieve();
     this.upsert(domains);
   }
 
@@ -29,13 +28,12 @@ class Domainlist {
    * @param  {Array} list list of domains to be set to the whitelist
    */
   async upsert(lists) {
-
     // Add the domains to this array and also be sure are all unique domains
     if (!('whitelist' in lists)) {
       return;
     }
 
-    this.lists.whitelist = Domainlist.parseList(lists.whitelist);
+    this.lists.whitelist = DomainList.parseList(lists.whitelist);
     debug(`Added ${lists.whitelist.length} domains to the whitelist.`);
   }
 
@@ -45,9 +43,8 @@ class Domainlist {
    * @return {Boolean}      true if the url contains any of the domains, false otherwise.
    */
   match(list, url) {
-
     // Parse the url that we're matching with.
-    const domainToMatch = Domainlist.parseURL(url);
+    const domainToMatch = DomainList.parseURL(url);
 
     // This will return true in the event that at least one blockword is found
     // in the phrase.
@@ -61,7 +58,7 @@ class Domainlist {
    * @returns {Boolean} true if the domains match
    */
   static matchMount(url) {
-    return Domainlist.parseURL(url) === Domainlist.parseURL(ROOT_URL);
+    return DomainList.parseURL(url) === DomainList.parseURL(ROOT_URL);
   }
 
   /**
@@ -70,7 +67,7 @@ class Domainlist {
    * @return {Array}      the parsed list
    */
   static parseList(list) {
-    return _.uniq(list.map((domain) => Domainlist.parseURL(domain)));
+    return _.uniq(list.map(domain => DomainList.parseURL(domain)));
   }
 
   /**
@@ -78,7 +75,7 @@ class Domainlist {
    * @param  {String} url url to parse for a domain.
    * @return {String}      the domain
    */
-  static parseURL(url){
+  static parseURL(url) {
     let domain;
 
     // removes protocol and get domain
@@ -95,7 +92,7 @@ class Domainlist {
   }
 
   static async urlCheck(url) {
-    const dl = new Domainlist();
+    const dl = new DomainList();
 
     // Load the domain list.
     await dl.load();
@@ -103,7 +100,6 @@ class Domainlist {
     // Perform a match.
     return dl.match(dl.lists.whitelist, url);
   }
-
 }
 
-module.exports = Domainlist;
+module.exports = DomainList;
diff --git a/services/email/notification.html.ejs b/services/email/notification.html.ejs
deleted file mode 100644
index b36560ec5..000000000
--- a/services/email/notification.html.ejs
+++ /dev/null
@@ -1 +0,0 @@
-<%= body %>
diff --git a/services/email/notification.txt.ejs b/services/email/notification.txt.ejs
deleted file mode 100644
index b36560ec5..000000000
--- a/services/email/notification.txt.ejs
+++ /dev/null
@@ -1 +0,0 @@
-<%= body %>
diff --git a/services/email/banned.html.ejs b/services/email/plain.html.ejs
similarity index 100%
rename from services/email/banned.html.ejs
rename to services/email/plain.html.ejs
diff --git a/services/email/banned.txt.ejs b/services/email/plain.txt.ejs
similarity index 100%
rename from services/email/banned.txt.ejs
rename to services/email/plain.txt.ejs
diff --git a/services/email/suspension.html.ejs b/services/email/suspension.html.ejs
deleted file mode 100644
index 4fd8f191c..000000000
--- a/services/email/suspension.html.ejs
+++ /dev/null
@@ -1 +0,0 @@
-<%= body.replace(/\n/g, '<br />') %>
diff --git a/services/email/suspension.txt.ejs b/services/email/suspension.txt.ejs
deleted file mode 100644
index b36560ec5..000000000
--- a/services/email/suspension.txt.ejs
+++ /dev/null
@@ -1 +0,0 @@
-<%= body %>
diff --git a/services/env.js b/services/env.js
new file mode 100644
index 000000000..b40a44a83
--- /dev/null
+++ b/services/env.js
@@ -0,0 +1,10 @@
+// Perform rewrites to the runtime environment variables based on the contents
+// of the process.env.REWRITE_ENV if it exists. This is done here as it is the
+// entrypoint for the entire applications configuration.
+require('env-rewrite').rewrite();
+
+if (process.env.NODE_ENV !== 'test') {
+  // Apply all the configuration provided in the .env file if it isn't already
+  // in the environment.
+  require('dotenv').config();
+}
diff --git a/services/events/constants.js b/services/events/constants.js
index a1da8dce6..f3aa84d62 100644
--- a/services/events/constants.js
+++ b/services/events/constants.js
@@ -1,4 +1,10 @@
-module.exports.ACTIONS_DELETE = 'actions.delete';
-module.exports.ACTIONS_NEW = 'actions.new';
-module.exports.COMMENTS_NEW = 'comments.new';
-module.exports.COMMENTS_EDIT = 'comments.edit';
+module.exports = {
+  USERS_NEW: 'USERS_NEW',
+  ACTIONS_DELETE: 'ACTIONS_DELETE',
+  ACTIONS_NEW: 'ACTIONS_NEW',
+  COMMENTS_NEW: 'COMMENTS_NEW',
+  COMMENTS_EDIT: 'COMMENTS_EDIT',
+  USERS_SUSPENSION_CHANGE: 'USERS_SUSPENSION_CHANGE',
+  USERS_BAN_CHANGE: 'USERS_BAN_CHANGE',
+  USERS_USERNAME_STATUS_CHANGE: 'USERS_USERNAME_STATUS_CHANGE',
+};
diff --git a/services/events/index.js b/services/events/index.js
index 214e23d65..2698df653 100644
--- a/services/events/index.js
+++ b/services/events/index.js
@@ -1,22 +1,36 @@
-const {EventEmitter2} = require('eventemitter2');
+const { EventEmitter2 } = require('eventemitter2');
+const constants = require('./constants');
 const debug = require('debug')('talk:services:events');
 const enabled = require('debug').enabled('talk:services:events');
 
-const events = new EventEmitter2({
+const emitter = new EventEmitter2({
   wildcard: true,
 });
 
 // If event debugging is enabled, bind the debugger to all events being emitted
 // and log a debug message.
 if (enabled) {
-  events.onAny(function(event) {
-    debug(`[${event}] ${arguments.length - 1} argument${arguments.length - 1 === 1 ? '' : 's'}`);
+  emitter.onAny(function(event) {
+    debug(
+      `[${event}] ${arguments.length - 1} argument${
+        arguments.length - 1 === 1 ? '' : 's'
+      }`
+    );
   });
 }
 
+// Allow any number of listeners to attach to this.
+emitter.setMaxListeners(0);
+
 // The default error handler.
-events.on('error', (err) => {
+emitter.on('error', err => {
   console.error('events error:', err);
 });
 
-module.exports = events;
+emitter.on('newListener', event => {
+  if (!(event in constants)) {
+    throw new Error(`Event[${event}] not a valid event name`);
+  }
+});
+
+module.exports = emitter;
diff --git a/services/i18n.js b/services/i18n.js
index 14597e89b..7c237f903 100644
--- a/services/i18n.js
+++ b/services/i18n.js
@@ -5,25 +5,26 @@ const accepts = require('accepts');
 const _ = require('lodash');
 const yaml = require('yamljs');
 const plugins = require('./plugins');
-const {DEFAULT_LANG} = require('../config');
+const { DEFAULT_LANG } = require('../config');
 
-const resolve = (...paths) => path.resolve(path.join(__dirname, '..', 'locales', ...paths));
+const resolve = (...paths) =>
+  path.resolve(path.join(__dirname, '..', 'locales', ...paths));
 
 // Load all the translations.
-let translations = fs.readdirSync(resolve())
+let translations = fs
+  .readdirSync(resolve())
 
   // Resolve all the filenames relative the the locales directory.
-  .map((filename) => resolve(filename))
+  .map(filename => resolve(filename))
 
   // Translations are only yml/yaml files.
-  .filter((filename) => /\.(yaml|yml)$/.test(filename))
+  .filter(filename => /\.(yaml|yml)$/.test(filename))
 
   // Load the translation files from disk.
-  .map((filename) => fs.readFileSync(filename, 'utf8'))
+  .map(filename => fs.readFileSync(filename, 'utf8'))
 
   // Load the translation files.
   .reduce((packs, contents) => {
-
     const pack = yaml.parse(contents);
 
     return _.merge(packs, pack);
@@ -47,26 +48,26 @@ const loadPluginTranslations = () => {
   }
 
   // Load the plugin translations.
-  plugins.get('server', 'translations').forEach(({plugin, translations: filename}) => {
-    debug(`added plugin '${plugin.name}'`);
+  plugins
+    .get('server', 'translations')
+    .forEach(({ plugin, translations: filename }) => {
+      debug(`added plugin '${plugin.name}'`);
 
-    const pack = yaml.parse(fs.readFileSync(filename, 'utf8'));
+      const pack = yaml.parse(fs.readFileSync(filename, 'utf8'));
 
-    translations = _.merge(translations, pack);
-  });
+      translations = _.merge(translations, pack);
+    });
 
   loadedPluginTranslations = true;
 };
 
-const t = (language) => (key, ...replacements) => {
-
+const t = language => (key, ...replacements) => {
   // Loads the translations into the translations array from plugins. This is
   // done lazily to ensure that we don't have an import cycle.
   loadPluginTranslations();
 
   // Check if the translation exists on the object.
   if (_.has(translations[language], key)) {
-
     // Get the translation value.
     let translation = _.get(translations[language], key);
 
diff --git a/services/jwt.js b/services/jwt.js
index e38b1120b..67e45a3ab 100644
--- a/services/jwt.js
+++ b/services/jwt.js
@@ -7,10 +7,12 @@ const uniq = require('lodash/uniq');
  */
 class MultiSecret {
   constructor(secrets) {
-    this.kids = secrets.map(({kid}) => kid);
+    this.kids = secrets.map(({ kid }) => kid);
 
     if (uniq(this.kids).length !== secrets.length) {
-      throw new Error('Duplicate kid\'s cannot be used to construct a MultiSecret');
+      throw new Error(
+        "Duplicate kid's cannot be used to construct a MultiSecret"
+      );
     }
 
     this.secrets = secrets;
@@ -31,16 +33,18 @@ class MultiSecret {
     let header = null;
     try {
       header = JSON.parse(Buffer(token.split('.')[0], 'base64').toString());
-    } catch(err) {
+    } catch (err) {
       return callback(err);
     }
 
     if (!('kid' in header)) {
-      return callback(new Error('expected kid to exist in the token header, it did not.'));
+      return callback(
+        new Error('expected kid to exist in the token header, it did not.')
+      );
     }
 
     let kid = header.kid;
-    let verifier = this.secrets.find((secret) => secret.kid === kid);
+    let verifier = this.secrets.find(secret => secret.kid === kid);
     if (!verifier) {
       return callback(new Error(`expected kid ${kid} was not available.`));
     }
@@ -53,7 +57,7 @@ class MultiSecret {
  * Secret wraps the capabilities expected of a Secret, signing and verifying.
  */
 class Secret {
-  constructor({kid, signingKey, verifiyingKey, algorithm}) {
+  constructor({ kid, signingKey, verifiyingKey, algorithm }) {
     this.kid = kid;
     this.signingKey = signingKey;
     this.verifiyingKey = verifiyingKey;
@@ -71,10 +75,14 @@ class Secret {
       throw new Error('no signing key on secret, cannot sign');
     }
 
-    return jwt.sign(payload, this.signingKey, Object.assign({}, options, {
-      keyid: this.kid,
-      algorithm: this.algorithm
-    }));
+    return jwt.sign(
+      payload,
+      this.signingKey,
+      Object.assign({}, options, {
+        keyid: this.kid,
+        algorithm: this.algorithm,
+      })
+    );
   }
 
   /**
@@ -84,16 +92,21 @@ class Secret {
    * @param {Function} callback the function to call with the verification results
    */
   verify(token, options, callback) {
-    jwt.verify(token, this.verifiyingKey, Object.assign({}, options, {
-      algorithms: [this.algorithm]
-    }), callback);
+    jwt.verify(
+      token,
+      this.verifiyingKey,
+      Object.assign({}, options, {
+        algorithms: [this.algorithm],
+      }),
+      callback
+    );
   }
 }
 
 /**
  * SharedSecret is the HMAC based secret that's used for signing/verifying.
  */
-function SharedSecret({kid = undefined, secret = null}, algorithm) {
+function SharedSecret({ kid = undefined, secret = null }, algorithm) {
   if (secret === null || secret.length === 0) {
     throw new Error('Secret cannot have a zero length');
   }
@@ -102,7 +115,7 @@ function SharedSecret({kid = undefined, secret = null}, algorithm) {
     kid,
     signingKey: secret,
     verifiyingKey: secret,
-    algorithm
+    algorithm,
   });
 }
 
@@ -110,20 +123,26 @@ function SharedSecret({kid = undefined, secret = null}, algorithm) {
  * AsymmetricSecret is the Asymmetric based key, where a private key is optional
  * and the public key is required.
  */
-function AsymmetricSecret({kid = undefined, private: privateKey, public: publicKey}, algorithm) {
+function AsymmetricSecret(
+  { kid = undefined, private: privateKey, public: publicKey },
+  algorithm
+) {
   publicKey = Buffer.from(publicKey.replace(/\\n/g, '\n'));
-  privateKey = privateKey && privateKey.length > 0 ? Buffer.from(privateKey.replace(/\\n/g, '\n')) : null;
+  privateKey =
+    privateKey && privateKey.length > 0
+      ? Buffer.from(privateKey.replace(/\\n/g, '\n'))
+      : null;
 
   return new Secret({
     kid,
     signingKey: privateKey,
     verifiyingKey: publicKey,
-    algorithm
+    algorithm,
   });
 }
 
 module.exports = {
   AsymmetricSecret,
   SharedSecret,
-  MultiSecret
+  MultiSecret,
 };
diff --git a/services/karma.js b/services/karma.js
index 687b67af0..58d9da3a0 100644
--- a/services/karma.js
+++ b/services/karma.js
@@ -1,8 +1,6 @@
 const debug = require('debug')('talk:services:karma');
 const UserModel = require('../models/user');
-const {
-  TRUST_THRESHOLDS
-} = require('../config');
+const { TRUST_THRESHOLDS } = require('../config');
 
 /**
  * This will create an object with the property name of the action type as the
@@ -21,46 +19,52 @@ const {
  *
  *  comment:2,-2;flag:2,-2
  */
-const parseThresholds = (thresholds) => thresholds
-  .split(';')
-  .filter((threshold) => threshold && threshold.length > 0)
-  .reduce((acc, threshold) => {
-    const thresholds = threshold.split(':');
-    if (thresholds.length < 2) {
-      return acc;
-    }
+const parseThresholds = thresholds =>
+  thresholds
+    .split(';')
+    .filter(threshold => threshold && threshold.length > 0)
+    .reduce(
+      (acc, threshold) => {
+        const thresholds = threshold.split(':');
+        if (thresholds.length < 2) {
+          return acc;
+        }
 
-    let [name, values] = thresholds;
-    let [RELIABLE, UNRELIABLE] = values.split(',').map((value) => parseInt(value));
+        let [name, values] = thresholds;
+        let [RELIABLE, UNRELIABLE] = values
+          .split(',')
+          .map(value => parseInt(value));
 
-    if (!(name in acc)) {
-      acc[name] = {};
-    }
+        if (!(name in acc)) {
+          acc[name] = {};
+        }
 
-    if (isNaN(UNRELIABLE) && !isNaN(RELIABLE)) {
-      acc[name].RELIABLE = RELIABLE;
-      acc[name].UNRELIABLE = RELIABLE;
-    } else {
-      if (!isNaN(UNRELIABLE)) {
-        acc[name].UNRELIABLE = UNRELIABLE;
+        if (isNaN(UNRELIABLE) && !isNaN(RELIABLE)) {
+          acc[name].RELIABLE = RELIABLE;
+          acc[name].UNRELIABLE = RELIABLE;
+        } else {
+          if (!isNaN(UNRELIABLE)) {
+            acc[name].UNRELIABLE = UNRELIABLE;
+          }
+
+          if (!isNaN(RELIABLE)) {
+            acc[name].RELIABLE = RELIABLE;
+          }
+        }
+
+        return acc;
+      },
+      {
+        comment: {
+          RELIABLE: 0,
+          UNRELIABLE: 0,
+        },
+        flag: {
+          RELIABLE: 0,
+          UNRELIABLE: 0,
+        },
       }
-
-      if (!isNaN(RELIABLE)) {
-        acc[name].RELIABLE = RELIABLE;
-      }
-    }
-
-    return acc;
-  }, {
-    comment: {
-      RELIABLE: 0,
-      UNRELIABLE: 0
-    },
-    flag: {
-      RELIABLE: 0,
-      UNRELIABLE: 0
-    }
-  });
+    );
 
 const THRESHOLDS = parseThresholds(TRUST_THRESHOLDS);
 
@@ -88,7 +92,6 @@ class KarmaModel {
  * KarmaService provides interfaces for editing a user's karma.
  */
 class KarmaService {
-
   /**
    * Model returns a KarmaModel based on the passed in user.
    */
@@ -131,27 +134,30 @@ class KarmaService {
 
     let update = {
       $inc: {
-        [key]: direction
-      }
+        [key]: direction,
+      },
     };
 
     if (multi) {
-
       // If it was in multi-mode but there was no user's to adjust, bail.
       if (id.length <= 0) {
         return;
       }
 
-      return UserModel.update({
-        id: {
-          $in: id
+      return UserModel.update(
+        {
+          id: {
+            $in: id,
+          },
+        },
+        update,
+        {
+          multi: true,
         }
-      }, update, {
-        multi: true
-      });
+      );
     }
 
-    return UserModel.update({id}, update);
+    return UserModel.update({ id }, update);
   }
 }
 
diff --git a/services/kue.js b/services/kue.js
index a3eb6d985..380f6a8c5 100644
--- a/services/kue.js
+++ b/services/kue.js
@@ -10,7 +10,7 @@ const kue = require('kue');
 // object within your node.js process.
 let queue = null;
 let isManaging = false;
-const getQueue = ({managed = false} = {}) => {
+const getQueue = ({ managed = false } = {}) => {
   if (queue) {
     return queue;
   }
@@ -18,14 +18,13 @@ const getQueue = ({managed = false} = {}) => {
   debug('init the queue');
   queue = kue.createQueue({
     redis: {
-      createClientFactory: () => redis.createClient()
-    }
+      createClientFactory: () => redis.createClient(),
+    },
   });
 
   // If this is a managed queue, and we aren't managing yet, then start the
   // management.
   if (managed && !isManaging) {
-
     // Watch for stuck jobs to manage.
     queue.watchStuckJobs(60000);
 
@@ -37,8 +36,7 @@ const getQueue = ({managed = false} = {}) => {
 };
 
 class Task {
-
-  constructor({name, attempts = 3, delay = 1000}) {
+  constructor({ name, attempts = 3, delay = 1000 }) {
     debug(`Created new Task[${name}]`);
 
     this.name = name;
@@ -50,7 +48,6 @@ class Task {
    * Add a new job to the queue.
    */
   create(data) {
-
     debug(`Creating new job for Queue[${this.name}]`);
 
     return new Promise((resolve, reject) => {
@@ -58,9 +55,9 @@ class Task {
         .create(this.name, data)
         .attempts(this.attempts)
         .delay(this.delay)
-        .backoff({type: 'exponential'})
+        .backoff({ type: 'exponential' })
         .removeOnComplete(true)
-        .save((err) => {
+        .save(err => {
           if (err) {
             return reject(err);
           }
@@ -76,16 +73,14 @@ class Task {
    * Process jobs for the queue.
    */
   process(callback) {
-
     // Get the queue in managed mode.
-    return getQueue({managed: true}).process(this.name, callback);
+    return getQueue({ managed: true }).process(this.name, callback);
   }
 
   /**
    * Connect to redis now by getting the queue.
    */
   static connect() {
-
     // Force setup the redis connection for kue.
     getQueue();
   }
@@ -94,14 +89,12 @@ class Task {
    * Shutdown running jobs.
    */
   static shutdown() {
-
     debug('Shutting down the Queue');
 
     return new Promise((resolve, reject) => {
-
       // Shutdown and give the queue 5 seconds to shutdown before we start
       // killing jobs.
-      getQueue().shutdown(5000, (err) => {
+      getQueue().shutdown(5000, err => {
         if (err) {
           return reject(err);
         }
@@ -126,8 +119,7 @@ const TestQueue = [];
  * an array which can be inspected.
  */
 class TestTask {
-
-  constructor({name}) {
+  constructor({ name }) {
     this.name = name;
   }
 
@@ -137,29 +129,30 @@ class TestTask {
   create(task) {
     let id = TestQueue.push({
       name: this.name,
-      task
+      task,
     });
 
-    return Promise.resolve({id});
+    return Promise.resolve({ id });
   }
 
   // This is a NO-OP action simply provided to match the Task interface.
-  process() { return null; }
+  process() {
+    return null;
+  }
 
   /**
    * Returns the current tasks for this queue.
    * @return {Array} the tasks in the queue
    */
   get tasks() {
-    return TestQueue
-      .filter((testTask) => testTask.name === this.name)
-      .map((testTask) => testTask.task);
+    return TestQueue.filter(testTask => testTask.name === this.name).map(
+      testTask => testTask.task
+    );
   }
 
   static shutdown() {
     return Task.shutdown();
   }
-
 }
 
 if (process.env.NODE_ENV === 'test') {
diff --git a/services/limit.js b/services/limit.js
index 9d1101643..6d46f3715 100644
--- a/services/limit.js
+++ b/services/limit.js
@@ -1,6 +1,6 @@
 const ms = require('ms');
 const errors = require('../errors');
-const {createClientFactory} = require('./redis');
+const { createClientFactory } = require('./redis');
 const client = createClientFactory();
 
 /**
@@ -55,7 +55,6 @@ class Limit {
 
     // if this is new or has no expiry
     if (tries === 1 || expiry === -1) {
-
       // then expire it after the timeout
       client().expire(key, this.ttl);
     }
diff --git a/services/mailer.js b/services/mailer.js
index ecb65de8c..67cb188be 100644
--- a/services/mailer.js
+++ b/services/mailer.js
@@ -1,12 +1,11 @@
 const debug = require('debug')('talk:services:mailer');
 const nodemailer = require('nodemailer');
 const kue = require('./kue');
-const path = require('path');
-const fs = require('fs');
-const _ = require('lodash');
-const {TEMPLATE_LOCALS} = require('../middleware/staticTemplate');
-
 const i18n = require('./i18n');
+const path = require('path');
+const fs = require('fs-extra');
+const _ = require('lodash');
+const { TEMPLATE_LOCALS } = require('../middleware/staticTemplate');
 
 const {
   SMTP_HOST,
@@ -19,63 +18,51 @@ const {
 
 // load all the templates as strings
 const templates = {
-  data: {}
+  data: {},
 };
 
 // load the templates per request during development
-templates.render = (name, format = 'txt', context) => new Promise((resolve, reject) => {
-
-  // If we are in production mode, check the view cache.
+templates.render = async (name, format = 'txt', context) => {
   if (process.env.NODE_ENV === 'production') {
-    if (name in templates.data && format in templates.data[name]) {
-      let view = templates.data[name][format];
-
-      return resolve(view(context));
+    // If we are in production mode, check the view cache.
+    const view = _.get(templates.data, [name, format], null);
+    if (view !== null) {
+      return view(context);
     }
   }
 
-  const filename = path.join(__dirname, 'email', [name, format, 'ejs'].join('.'));
-
-  fs.readFile(filename, (err, file) => {
-    if (err) {
-      return reject(err);
-    }
-
-    let view = _.template(file);
+  const filename = path.join(
+    __dirname,
+    'email',
+    [name, format, 'ejs'].join('.')
+  );
+  const file = await fs.readFile(filename, 'utf8');
+  const view = _.template(file);
 
+  if (process.env.NODE_ENV === 'production') {
     // If we are in production mode, fill the view cache.
-    if (process.env.NODE_ENV === 'production') {
-      if (!(name in templates.data)) {
-        templates.data[name] = {};
-      }
+    _.set(templates.data, [name, format], view);
+  }
 
-      templates.data[name][format] = view;
-    }
-
-    return resolve(view(context));
-  });
-});
+  return view(context);
+};
 
 const mailer = {};
 
 // enabled is true when the required configuration is available. When testing
 // is enabled, we will be simulating that emails are being sent, because in a
 // production system, emails should and would be sent.
-mailer.enabled = Boolean(
-  SMTP_HOST &&
-  SMTP_USERNAME &&
-  SMTP_PORT &&
-  SMTP_PASSWORD &&
-  SMTP_FROM_ADDRESS
-) || process.env.NODE_ENV === 'test';
+mailer.enabled =
+  Boolean(SMTP_HOST && SMTP_USERNAME && SMTP_PASSWORD && SMTP_FROM_ADDRESS) ||
+  process.env.NODE_ENV === 'test';
 
 if (mailer.enabled) {
   const options = {
     host: SMTP_HOST,
     auth: {
       user: SMTP_USERNAME,
-      pass: SMTP_PASSWORD
-    }
+      pass: SMTP_PASSWORD,
+    },
   };
 
   if (SMTP_PORT) {
@@ -95,38 +82,41 @@ if (mailer.enabled) {
  * Create the new Task kue.
  */
 mailer.task = new kue.Task({
-  name: 'mailer'
+  name: 'mailer',
 });
 
 /**
  * send will create a new message and send it.
  */
-mailer.send = async (options) => {
+mailer.send = async options => {
   if (!mailer.enabled) {
-    throw new Error('email is not enabled because required configuration is not available');
+    const err = new Error(
+      'sending email is not enabled because required configuration is not available'
+    );
+    console.warn(err);
+    return;
   }
 
   // Create the new locals object and attach the static locals and the i18n
   // framework.
-  const locals = _.merge({}, options.locals, TEMPLATE_LOCALS, {t: i18n.t});
+  const locals = _.merge({}, options.locals, TEMPLATE_LOCALS, { t: i18n.t });
 
   // Render the templates.
-  const [
-    html,
-    text,
-  ] = await Promise.all(['html', 'txt'].map((fmt) => {
-    return templates.render(options.template, fmt, locals);
-  }));
+  const [html, text] = await Promise.all(
+    ['html', 'txt'].map(fmt => {
+      return templates.render(options.template, fmt, locals);
+    })
+  );
 
-  // Create the job.
+  // Create the job to send the email later.
   return mailer.task.create({
     title: 'Mail',
     message: {
       to: options.to,
       subject: `${EMAIL_SUBJECT_PREFIX} ${options.subject}`,
       text,
-      html
-    }
+      html,
+    },
   });
 };
 
@@ -134,17 +124,16 @@ mailer.send = async (options) => {
  * Start the queue processor for the mailer job.
  */
 mailer.process = () => {
-
   debug(`Now processing ${mailer.task.name} jobs`);
 
-  return mailer.task.process(({id, data}, done) => {
+  return mailer.task.process(({ id, data }, done) => {
     debug(`Starting to send mail for Job[${id}]`);
 
     // Set the `from` field.
     data.message.from = SMTP_FROM_ADDRESS;
 
     // Actually send the email.
-    mailer.transport.sendMail(data.message, (err) => {
+    mailer.transport.sendMail(data.message, err => {
       if (err) {
         debug(`Failed to send mail for Job[${id}]:`, err);
         return done(err);
diff --git a/services/metadata.js b/services/metadata.js
index e1960d1bd..32e5d77a4 100644
--- a/services/metadata.js
+++ b/services/metadata.js
@@ -12,7 +12,6 @@ const KEY_REGEX = /^(?:[A-Za-z][A-Za-z.]*[A-Za-z])?(?:[A-Za-z]*)$/;
  * @class MetadataService
  */
 class MetadataService {
-
   /**
    * Parses a key by ensuring that if it is either a string, or an array with
    * only characters defined in the `KEY_REGEX`
@@ -28,7 +27,7 @@ class MetadataService {
       key = key.join('.');
     }
 
-    if ((typeof key !== 'string') || !KEY_REGEX.test(key) || key.length === 0) {
+    if (typeof key !== 'string' || !KEY_REGEX.test(key) || key.length === 0) {
       throw new Error(`${key} is not valid, only a-zA-Z. allowed`);
     }
 
@@ -57,11 +56,14 @@ class MetadataService {
   static async set(model, id, key, value) {
     key = MetadataService.parseKey(key);
 
-    return model.update({id}, {
-      $set: {
-        [key]: value
+    return model.update(
+      { id },
+      {
+        $set: {
+          [key]: value,
+        },
       }
-    });
+    );
   }
 
   /**
@@ -85,9 +87,12 @@ class MetadataService {
   static async unset(model, id, key) {
     key = MetadataService.parseKey(key);
 
-    return model.update({id}, {
-      $unset: {[key]: ''}
-    });
+    return model.update(
+      { id },
+      {
+        $unset: { [key]: '' },
+      }
+    );
   }
 }
 
diff --git a/services/migration.js b/services/migration.js
index 8676b91be..f8f09d469 100644
--- a/services/migration.js
+++ b/services/migration.js
@@ -4,7 +4,7 @@ const path = require('path');
 const Joi = require('joi');
 const debug = require('debug')('talk:services:migration');
 const sc = require('snake-case');
-const {talk: {migration: {minVersion}}} = require('../package.json');
+const { talk: { migration: { minVersion } } } = require('../package.json');
 
 const migrationTemplate = `module.exports = {
   async up() {
@@ -15,10 +15,9 @@ const migrationTemplate = `module.exports = {
 `;
 
 class MigrationService {
-
   /**
    * Creates a new migration file.
-   * 
+   *
    * @param {String} name name of the migration
    */
   static async create(name) {
@@ -28,7 +27,12 @@ class MigrationService {
 
     // Create a new Migration based on the current time.
     let version = Math.round(Date.now() / 1000, 0);
-    let filename = path.join(__dirname, '..', 'migrations', `${version}_${sc(name)}.js`);
+    let filename = path.join(
+      __dirname,
+      '..',
+      'migrations',
+      `${version}_${sc(name)}.js`
+    );
     fs.writeFileSync(filename, migrationTemplate, 'utf8');
 
     console.log(`Created migration ${version} in ${filename}`);
@@ -38,14 +42,15 @@ class MigrationService {
    * Returns a list of all pending migrations.
    */
   static async listPending() {
-
     // Get all the migration files.
-    let migrationFiles = fs.readdirSync(path.join(__dirname, '..', 'migrations'));
+    let migrationFiles = fs.readdirSync(
+      path.join(__dirname, '..', 'migrations')
+    );
 
     // Ensure that all migrations follow this format.
     const migrationSchema = Joi.object({
       up: Joi.func().required(),
-      down: Joi.func()
+      down: Joi.func(),
     });
 
     // Extract the version from the filename with this regex.
@@ -56,8 +61,7 @@ class MigrationService {
 
     // Parse the migrations from the file listing.
     let migrations = migrationFiles
-      .map((filename) => {
-
+      .map(filename => {
         // Parse the version from the filename.
         let matches = filename.match(versionRe);
         if (matches.length !== 3) {
@@ -72,15 +76,19 @@ class MigrationService {
 
         // Read the migration from the filesystem.
         let migration = require(`../migrations/${filename}`);
-        Joi.assert(migration, migrationSchema, `Migration ${filename} does did not pass validation`);
+        Joi.assert(
+          migration,
+          migrationSchema,
+          `Migration ${filename} does did not pass validation`
+        );
 
         return {
           filename,
           version,
-          migration
+          migration,
         };
       })
-      .filter((migration) => migration !== null)
+      .filter(migration => migration !== null)
       .sort((a, b) => {
         if (a.version < b.version) {
           return -1;
@@ -92,13 +100,13 @@ class MigrationService {
 
         return 0;
       });
-    
+
     return migrations;
   }
 
   /**
    * Runs an list of migrations.
-   * 
+   *
    * @param {Array} migrations a list of migrations returned by `listPending`
    */
   static async run(migrations) {
@@ -107,7 +115,7 @@ class MigrationService {
       return;
     }
 
-    for (let {filename, version, migration} of migrations) {
+    for (let { filename, version, migration } of migrations) {
       try {
         console.log(`Starting migration ${filename}`);
         await migration.up();
@@ -116,12 +124,12 @@ class MigrationService {
         console.error(`Migration ${filename} failed`);
         throw e;
       }
-      
+
       try {
         console.log(`Recording migration ${filename}`);
 
         // Record that the migration was finished.
-        let m = new MigrationModel({version});
+        let m = new MigrationModel({ version });
         await m.save();
 
         console.log(`Finished recording migration ${filename}`);
@@ -131,7 +139,11 @@ class MigrationService {
       }
     }
 
-    console.log(`Database now at migration version ${migrations[migrations.length - 1].version}`);
+    console.log(
+      `Database now at migration version ${
+        migrations[migrations.length - 1].version
+      }`
+    );
   }
 
   /**
@@ -139,11 +151,9 @@ class MigrationService {
    * database, null if none were found.
    */
   static async latestVersion() {
-
     // Load the latest migration details from the database.
-    let latestMigration = await MigrationModel
-      .find({})
-      .sort({version: -1})
+    let latestMigration = await MigrationModel.find({})
+      .sort({ version: -1 })
       .limit(1)
       .exec();
 
@@ -151,14 +161,13 @@ class MigrationService {
     if (latestMigration.length === 0) {
       return null;
     }
-    
+
     // If the latest migration does not match the required version, then error
     // out.
     return latestMigration[0].version;
   }
 
   static async verify() {
-
     // If the requiredVersion isn't specified or is 0, then don't complain.
     if (typeof minVersion !== 'number' || minVersion === 0) {
       return;
@@ -168,10 +177,14 @@ class MigrationService {
     // out.
     let latestVersion = await MigrationService.latestVersion();
     if (!latestVersion || latestVersion < minVersion) {
-      throw new Error(`A database migration is required, version required ${minVersion}, found ${latestVersion}. Please run \`./bin/cli migration run\``);
+      throw new Error(
+        `A database migration is required, version required ${minVersion}, found ${latestVersion}. Please run \`./bin/cli migration run\``
+      );
     }
 
-    debug(`minimum migration version ${minVersion} was met with version ${latestVersion}`);
+    debug(
+      `minimum migration version ${minVersion} was met with version ${latestVersion}`
+    );
 
     return latestVersion;
   }
diff --git a/services/mongoose.js b/services/mongoose.js
index 747df2d66..20765293a 100644
--- a/services/mongoose.js
+++ b/services/mongoose.js
@@ -1,14 +1,10 @@
+const { MONGO_URL, WEBPACK, CREATE_MONGO_INDEXES } = require('../config');
+
 const mongoose = require('mongoose');
 const debug = require('debug')('talk:db');
 const enabled = require('debug').enabled;
 const queryDebugger = require('debug')('talk:db:query');
 
-const {
-  MONGO_URL,
-  WEBPACK,
-  CREATE_MONGO_INDEXES,
-} = require('../config');
-
 // Loading the formatter from Mongoose:
 //
 // https://github.com/Automattic/mongoose/blob/1a93d1f4d12e441e17ddf451e96fbc5f6e8f54b8/lib/drivers/node-mongodb-native/collection.js#L182
@@ -36,23 +32,19 @@ mongoose.Promise = global.Promise;
 
 // Check if debugging is enabled on the talk:db prefix.
 if (enabled('talk:db:query')) {
-
   // Enable the mongoose debugger, here we wrap the similar print function
   // provided by setting the debug parameter.
   mongoose.set('debug', debugQuery);
 }
 
 if (WEBPACK) {
-
   debug('Not connecting to mongodb during webpack build');
 
   // @wyattjoh: We didn't call connect, but because we include mongoose, it will hold the socket ready,
   // preventing node from exiting. Calling disconnect here just ensures that the application
   // can quit correctly.
   mongoose.disconnect();
-
 } else {
-
   // Connect to the Mongo instance.
   mongoose
     .connect(MONGO_URL, {
@@ -64,7 +56,7 @@ if (WEBPACK) {
     .then(() => {
       debug('connection established');
     })
-    .catch((err) => {
+    .catch(err => {
       console.error(err);
       process.exit(1);
     });
diff --git a/services/passport.js b/services/passport.js
index 1d5d0ddcf..369dc5e5c 100644
--- a/services/passport.js
+++ b/services/passport.js
@@ -1,5 +1,5 @@
 const passport = require('passport');
-const {set, get} = require('lodash');
+const { set, get } = require('lodash');
 const UsersService = require('./users');
 const SettingsService = require('./settings');
 const TokensService = require('./tokens');
@@ -11,9 +11,10 @@ const uuid = require('uuid');
 const debug = require('debug')('talk:services:passport');
 const bowser = require('bowser');
 const ms = require('ms');
+const _ = require('lodash');
 
 // Create a redis client to use for authentication.
-const {createClientFactory} = require('./redis');
+const { createClientFactory } = require('./redis');
 const client = createClientFactory();
 
 const {
@@ -29,13 +30,11 @@ const {
   JWT_USER_ID_CLAIM,
 } = require('../config');
 
-const {
-  jwt
-} = require('../secrets');
+const { jwt } = require('../secrets');
 
 // GenerateToken will sign a token to include all the authorization information
 // needed for the front end.
-const GenerateToken = (user) => {
+const GenerateToken = user => {
   const claims = {};
 
   // Set the user id.
@@ -46,7 +45,7 @@ const GenerateToken = (user) => {
     expiresIn: JWT_EXPIRY,
     issuer: JWT_ISSUER,
     audience: JWT_AUDIENCE,
-    algorithm: JWT_ALG
+    algorithm: JWT_ALG,
   });
 };
 
@@ -58,10 +57,10 @@ const SetTokenForSafari = (req, res, token) => {
     res.cookie(JWT_SIGNING_COOKIE_NAME, token, {
       httpOnly: true,
       secure: process.env.NODE_ENV === 'production',
-      expires: new Date(Date.now() + ms(JWT_EXPIRY))
+      expires: new Date(Date.now() + ms(JWT_EXPIRY)),
     });
   } else {
-    debug('browser wasn\'t safari/ios, didn\'t set a cookie');
+    debug("browser wasn't safari/ios, didn't set a cookie");
   }
 };
 
@@ -83,7 +82,7 @@ const HandleGenerateCredentials = (req, res, next) => (err, user) => {
   SetTokenForSafari(req, res, token);
 
   // Send back the details!
-  res.json({user, token});
+  res.json({ user, token });
 };
 
 /**
@@ -91,11 +90,15 @@ const HandleGenerateCredentials = (req, res, next) => (err, user) => {
  */
 const HandleAuthPopupCallback = (req, res, next) => (err, user) => {
   if (err) {
-    return res.render('auth-callback', {auth: JSON.stringify({err, data: null})});
+    return res.render('auth-callback', {
+      auth: JSON.stringify({ err, data: null }),
+    });
   }
 
   if (!user) {
-    return res.render('auth-callback', {auth: JSON.stringify({err: errors.ErrNotAuthorized, data: null})});
+    return res.render('auth-callback', {
+      auth: JSON.stringify({ err: errors.ErrNotAuthorized, data: null }),
+    });
   }
 
   // Generate the token to re-issue to the frontend.
@@ -104,7 +107,9 @@ const HandleAuthPopupCallback = (req, res, next) => (err, user) => {
   SetTokenForSafari(req, res, token);
 
   // We logged in the user! Let's send back the user data.
-  res.render('auth-callback', {auth: JSON.stringify({err: null, data: {user, token}})});
+  res.render('auth-callback', {
+    auth: JSON.stringify({ err: null, data: { user, token } }),
+  });
 };
 
 /**
@@ -127,15 +132,14 @@ async function ValidateUserLogin(loginProfile, user, done) {
   }
 
   // The user is a local user, check if we need email confirmation.
-  const {requireEmailConfirmation = false} = await SettingsService.retrieve();
+  const { requireEmailConfirmation = false } = await SettingsService.retrieve();
 
   // If we have the requirement of checking that emails for users are
   // verified, then we need to check the email address to ensure that it has
   // been verified.
   if (requireEmailConfirmation) {
-
     // Get the profile representing the local account.
-    let profile = user.profiles.find((profile) => profile.id === loginProfile.id);
+    let profile = user.profiles.find(profile => profile.id === loginProfile.id);
 
     // This should never get to this point, if it does, don't let this past.
     if (!profile) {
@@ -144,7 +148,7 @@ async function ValidateUserLogin(loginProfile, user, done) {
 
     // If the profile doesn't have a metadata field, or it does not have a
     // confirmed_at field, or that field is null, then send them back.
-    if (!profile.metadata || !profile.metadata.confirmed_at || profile.metadata.confirmed_at === null) {
+    if (_.get(profile, 'metadata.confirmed_at', null) === null) {
       return done(errors.ErrNotVerified);
     }
   }
@@ -160,7 +164,7 @@ async function ValidateUserLogin(loginProfile, user, done) {
  * Revoke the token on the request.
  */
 const HandleLogout = async (req, res, next) => {
-  const {jwt} = req;
+  const { jwt } = req;
 
   const now = new Date();
   const expiry = (jwt.exp - now.getTime() / 1000).toFixed(0);
@@ -180,18 +184,19 @@ const HandleLogout = async (req, res, next) => {
   res.status(204).end();
 };
 
-const checkGeneralTokenBlacklist = (jwt) => client().get(`jtir[${jwt.jti}]`)
-  .then((expiry) => {
-    if (expiry != null) {
-      throw new errors.ErrAuthentication('token was revoked');
-    }
-  });
+const checkGeneralTokenBlacklist = jwt =>
+  client()
+    .get(`jtir[${jwt.jti}]`)
+    .then(expiry => {
+      if (expiry != null) {
+        throw new errors.ErrAuthentication('token was revoked');
+      }
+    });
 
 /**
  * Check if the given token is already blacklisted, throw an error if it is.
  */
-const CheckBlacklisted = async (jwt) => {
-
+const CheckBlacklisted = async jwt => {
   // Check to see if this is a PAT.
   if (jwt.pat) {
     return TokensService.validate(get(jwt, JWT_USER_ID_CLAIM), jwt.jti);
@@ -206,14 +211,16 @@ const CheckBlacklisted = async (jwt) => {
 const JwtStrategy = require('passport-jwt').Strategy;
 const ExtractJwt = require('passport-jwt').ExtractJwt;
 
-let cookieExtractor = (req) => {
+let cookieExtractor = req => {
   if (req && req.cookies) {
-
     // Walk over all the cookie names in JWT_COOKIE_NAMES.
     for (const cookieName of JWT_COOKIE_NAMES) {
-
       // Check to see if that cookie is set.
-      if (cookieName in req.cookies && req.cookies[cookieName] !== null && req.cookies[cookieName].length > 0) {
+      if (
+        cookieName in req.cookies &&
+        req.cookies[cookieName] !== null &&
+        req.cookies[cookieName].length > 0
+      ) {
         return req.cookies[cookieName];
       }
     }
@@ -231,60 +238,64 @@ JwtStrategy.JwtVerifier = (token, secretOrKey, options, callback) => {
     }
 
     // Attach the original token onto the payload.
-    return callback(false, {token, jwt});
+    return callback(false, { token, jwt });
   });
 };
 
 // Extract the JWT from the 'Authorization' header with the 'Bearer' scheme.
-passport.use(new JwtStrategy({
+passport.use(
+  new JwtStrategy(
+    {
+      // Prepare the extractor from the header.
+      jwtFromRequest: ExtractJwt.fromExtractors([
+        cookieExtractor,
+        ExtractJwt.fromUrlQueryParameter('access_token'),
+        ExtractJwt.fromAuthHeaderWithScheme('Bearer'),
+      ]),
 
-  // Prepare the extractor from the header.
-  jwtFromRequest: ExtractJwt.fromExtractors([
-    cookieExtractor,
-    ExtractJwt.fromUrlQueryParameter('access_token'),
-    ExtractJwt.fromAuthHeaderWithScheme('Bearer')
-  ]),
+      // Use the secret passed in which is loaded from the environment. This can be
+      // a certificate (loaded) or a HMAC key.
+      secretOrKey: jwt,
 
-  // Use the secret passed in which is loaded from the environment. This can be
-  // a certificate (loaded) or a HMAC key.
-  secretOrKey: jwt,
+      // Verify the issuer.
+      issuer: JWT_ISSUER,
 
-  // Verify the issuer.
-  issuer: JWT_ISSUER,
+      // Verify the audience.
+      audience: JWT_AUDIENCE,
 
-  // Verify the audience.
-  audience: JWT_AUDIENCE,
+      // Enable only the HS256 algorithm.
+      algorithms: [JWT_ALG],
 
-  // Enable only the HS256 algorithm.
-  algorithms: [JWT_ALG],
+      // Pass the request object back to the callback so we can attach the JWT to
+      // it.
+      passReqToCallback: true,
+    },
+    async (req, { token, jwt }, done) => {
+      // Load the user from the environment, because we just got a user from the
+      // header.
+      try {
+        // Check to see if the token has been revoked
+        let user = await CheckBlacklisted(jwt);
 
-  // Pass the request object back to the callback so we can attach the JWT to
-  // it.
-  passReqToCallback: true
-}, async (req, {token, jwt}, done) => {
+        if (user === null) {
+          // Try to get the user from the database or crack it from the token and
+          // plugin integrations.
+          user = await UsersService.findOrCreateByIDToken(
+            get(jwt, JWT_USER_ID_CLAIM),
+            { token, jwt }
+          );
+        }
 
-  // Load the user from the environment, because we just got a user from the
-  // header.
-  try {
+        // Attach the JWT to the request.
+        req.jwt = jwt;
 
-    // Check to see if the token has been revoked
-    let user = await CheckBlacklisted(jwt);
-
-    if (user === null) {
-
-      // Try to get the user from the database or crack it from the token and
-      // plugin integrations.
-      user = await UsersService.findOrCreateByIDToken(get(jwt, JWT_USER_ID_CLAIM), {token, jwt});
+        return done(null, user);
+      } catch (e) {
+        return done(e);
+      }
     }
-
-    // Attach the JWT to the request.
-    req.jwt = jwt;
-
-    return done(null, user);
-  } catch(e) {
-    return done(e);
-  }
-}));
+  )
+);
 
 //==============================================================================
 // LOCAL STRATEGY
@@ -294,7 +305,7 @@ passport.use(new JwtStrategy({
  * This looks at the request headers to see if there is a recaptcha response on
  * the input request.
  */
-const CheckIfRecaptcha = (req) => {
+const CheckIfRecaptcha = req => {
   let response = req.get('X-Recaptcha-Response');
 
   if (response && response.length > 0) {
@@ -309,16 +320,15 @@ const CheckIfRecaptcha = (req) => {
  * for recaptcha compliance before being allowed to login.
  */
 const CheckIfNeedsRecaptcha = (user, email) => {
-
   // Get the profile representing the local account.
-  let profile = user.profiles.find((profile) => profile.id === email);
+  let profile = user.profiles.find(profile => profile.id === email);
 
   // This should never get to this point, if it does, don't let this past.
   if (!profile) {
     throw new Error('ID indicated by loginProfile is not on user object');
   }
 
-  if (profile.metadata && profile.metadata.recaptcha_required) {
+  if (_.get(profile, 'metadata.recaptcha_required', false)) {
     return true;
   }
 
@@ -330,8 +340,7 @@ const CheckIfNeedsRecaptcha = (user, email) => {
  * genuine or not.
  * @return {Promise} resolves with the success status of the recaptcha
  */
-const CheckRecaptcha = async (req) => {
-
+const CheckRecaptcha = async req => {
   // Ask Google to verify the recaptcha response: https://developers.google.com/recaptcha/docs/verify
   const form = new FormData();
 
@@ -343,7 +352,7 @@ const CheckRecaptcha = async (req) => {
   let res = await fetch('https://www.google.com/recaptcha/api/siteverify', {
     method: 'POST',
     body: form,
-    headers: form.getHeaders()
+    headers: form.getHeaders(),
   });
 
   // Parse the JSON response.
@@ -362,8 +371,11 @@ const HandleFailedAttempt = async (email, userNeedsRecaptcha) => {
   try {
     await UsersService.recordLoginAttempt(email);
   } catch (err) {
-    if (err === errors.ErrLoginAttemptMaximumExceeded && !userNeedsRecaptcha && RECAPTCHA_ENABLED) {
-
+    if (
+      err === errors.ErrLoginAttemptMaximumExceeded &&
+      !userNeedsRecaptcha &&
+      RECAPTCHA_ENABLED
+    ) {
       debug(`flagging user email=${email}`);
       await UsersService.flagForRecaptchaRequirement(email, true);
     }
@@ -372,141 +384,146 @@ const HandleFailedAttempt = async (email, userNeedsRecaptcha) => {
   }
 };
 
-passport.use(new LocalStrategy({
-  usernameField: 'email',
-  passwordField: 'password',
-  passReqToCallback: true
-}, async (req, email, password, done) => {
+passport.use(
+  new LocalStrategy(
+    {
+      usernameField: 'email',
+      passwordField: 'password',
+      passReqToCallback: true,
+    },
+    async (req, email, password, done) => {
+      // Normalize email
+      email = email.toLowerCase();
 
-  // Normalize email
-  email = email.toLowerCase();
+      // We need to check if this request has a recaptcha on it at all, if it does,
+      // we must verify it first. If verification fails, we fail the request early.
+      // We can only do this obviously when recaptcha is enabled.
+      let hasRecaptcha = CheckIfRecaptcha(req);
+      let recaptchaPassed = false;
+      if (RECAPTCHA_ENABLED && hasRecaptcha) {
+        try {
+          // Check to see if this recaptcha passed.
+          recaptchaPassed = await CheckRecaptcha(req);
+        } catch (err) {
+          return done(err);
+        }
 
-  // We need to check if this request has a recaptcha on it at all, if it does,
-  // we must verify it first. If verification fails, we fail the request early.
-  // We can only do this obviously when recaptcha is enabled.
-  let hasRecaptcha = CheckIfRecaptcha(req);
-  let recaptchaPassed = false;
-  if (RECAPTCHA_ENABLED && hasRecaptcha) {
+        if (!recaptchaPassed) {
+          try {
+            await HandleFailedAttempt(email);
+          } catch (err) {
+            return done(err);
+          }
 
-    try {
+          return done(null, false, { message: 'Incorrect recaptcha' });
+        }
+      }
 
-      // Check to see if this recaptcha passed.
-      recaptchaPassed = await CheckRecaptcha(req);
-    } catch (err) {
-      return done(err);
-    }
+      debug(`hasRecaptcha=${hasRecaptcha}, recaptchaPassed=${recaptchaPassed}`);
 
-    if (!recaptchaPassed) {
+      // If the request didn't have a recaptcha, check to see if we did need one by
+      // checking the rate limit against failed attempts on this email
+      // address/login.
+      if (!hasRecaptcha) {
+        try {
+          await UsersService.checkLoginAttempts(email);
+        } catch (err) {
+          if (err === errors.ErrLoginAttemptMaximumExceeded) {
+            // This says, we didn't have a recaptcha, yet we needed one.. Reject
+            // here.
+
+            try {
+              await HandleFailedAttempt(email);
+            } catch (err) {
+              return done(err);
+            }
+
+            return done(null, false, { message: 'Incorrect recaptcha' });
+          }
+
+          // Some other unexpected error occured.
+          return done(err);
+        }
+      }
+
+      // Let's find the user for which this login is connected to.
+      let user;
       try {
-        await HandleFailedAttempt(email);
+        user = await UsersService.findLocalUser(email);
       } catch (err) {
         return done(err);
       }
 
-      return done(null, false, {message: 'Incorrect recaptcha'});
-    }
-  }
-
-  debug(`hasRecaptcha=${hasRecaptcha}, recaptchaPassed=${recaptchaPassed}`);
-
-  // If the request didn't have a recaptcha, check to see if we did need one by
-  // checking the rate limit against failed attempts on this email
-  // address/login.
-  if (!hasRecaptcha) {
-    try {
-      await UsersService.checkLoginAttempts(email);
-    } catch (err) {
-      if (err === errors.ErrLoginAttemptMaximumExceeded) {
-
-        // This says, we didn't have a recaptcha, yet we needed one.. Reject
-        // here.
+      debug(`user=${user != null}`);
 
+      // If the user doesn't exist, then mark this as a failed attempt at logging in
+      // this non-existant user and continue.
+      if (!user) {
         try {
           await HandleFailedAttempt(email);
         } catch (err) {
           return done(err);
         }
 
-        return done(null, false, {message: 'Incorrect recaptcha'});
+        return done(null, false, {
+          message: 'Incorrect email/password combination',
+        });
       }
 
-      // Some other unexpected error occured.
-      return done(err);
+      // Let's check if the user indeed needed recaptcha in order to authenticate.
+      // We can only do this obviously when recaptcha is enabled.
+      let userNeedsRecaptcha = false;
+      if (RECAPTCHA_ENABLED && user) {
+        userNeedsRecaptcha = CheckIfNeedsRecaptcha(user, email);
+      }
+
+      debug(`userNeedsRecaptcha=${userNeedsRecaptcha}`);
+
+      // Let's check now if their password is correct.
+      let userPasswordCorrect;
+      try {
+        userPasswordCorrect = await user.verifyPassword(password);
+      } catch (err) {
+        return done(err);
+      }
+
+      debug(`userPasswordCorrect=${userPasswordCorrect}`);
+
+      // If their password wasn't correct, mark their attempt as failed and
+      // continue.
+      if (!userPasswordCorrect) {
+        try {
+          await HandleFailedAttempt(email, userNeedsRecaptcha);
+        } catch (err) {
+          return done(err);
+        }
+
+        return done(null, false, {
+          message: 'Incorrect email/password combination',
+        });
+      }
+
+      // If the user needed a recaptcha, yet we have gotten this far, this indicates
+      // that the password was correct, so let's unflag their account for logins. We
+      // can only do this obviously when recaptcha is enabled. The account wouldn't
+      // have been flagged otherwise.
+      if (RECAPTCHA_ENABLED && userNeedsRecaptcha) {
+        try {
+          await UsersService.flagForRecaptchaRequirement(email, false);
+        } catch (err) {
+          return done(err);
+        }
+      }
+
+      // Define the loginProfile being used to perform an additional
+      // verification.
+      let loginProfile = { id: email, provider: 'local' };
+
+      // Perform final steps to login the user.
+      return ValidateUserLogin(loginProfile, user, done);
     }
-  }
-
-  // Let's find the user for which this login is connected to.
-  let user;
-  try {
-    user = await UsersService.findLocalUser(email);
-  } catch (err) {
-    return done(err);
-  }
-
-  debug(`user=${user != null}`);
-
-  // If the user doesn't exist, then mark this as a failed attempt at logging in
-  // this non-existant user and continue.
-  if (!user) {
-    try {
-      await HandleFailedAttempt(email);
-    } catch (err) {
-      return done(err);
-    }
-
-    return done(null, false, {message: 'Incorrect email/password combination'});
-  }
-
-  // Let's check if the user indeed needed recaptcha in order to authenticate.
-  // We can only do this obviously when recaptcha is enabled.
-  let userNeedsRecaptcha = false;
-  if (RECAPTCHA_ENABLED && user) {
-    userNeedsRecaptcha = CheckIfNeedsRecaptcha(user, email);
-  }
-
-  debug(`userNeedsRecaptcha=${userNeedsRecaptcha}`);
-
-  // Let's check now if their password is correct.
-  let userPasswordCorrect;
-  try {
-    userPasswordCorrect = await user.verifyPassword(password);
-  } catch (err) {
-    return done(err);
-  }
-
-  debug(`userPasswordCorrect=${userPasswordCorrect}`);
-
-  // If their password wasn't correct, mark their attempt as failed and
-  // continue.
-  if (!userPasswordCorrect) {
-    try {
-      await HandleFailedAttempt(email, userNeedsRecaptcha);
-    } catch (err) {
-      return done(err);
-    }
-
-    return done(null, false, {message: 'Incorrect email/password combination'});
-  }
-
-  // If the user needed a recaptcha, yet we have gotten this far, this indicates
-  // that the password was correct, so let's unflag their account for logins. We
-  // can only do this obviously when recaptcha is enabled. The account wouldn't
-  // have been flagged otherwise.
-  if (RECAPTCHA_ENABLED && userNeedsRecaptcha) {
-    try {
-      await UsersService.flagForRecaptchaRequirement(email, false);
-    } catch (err) {
-      return done(err);
-    }
-  }
-
-  // Define the loginProfile being used to perform an additional
-  // verificaiton.
-  let loginProfile = {id: email, provider: 'local'};
-
-  // Perform final steps to login the user.
-  return ValidateUserLogin(loginProfile, user, done);
-}));
+  )
+);
 
 module.exports = {
   passport,
diff --git a/services/plugins.js b/services/plugins.js
index ced4bd75a..94abb6c62 100644
--- a/services/plugins.js
+++ b/services/plugins.js
@@ -1,3 +1,3 @@
-const {plugins, PluginManager} = require('../plugins');
+const { plugins, PluginManager } = require('../plugins');
 
 module.exports = new PluginManager(plugins);
diff --git a/services/pubsub.js b/services/pubsub.js
index afd31ce06..3bfb9aaa3 100644
--- a/services/pubsub.js
+++ b/services/pubsub.js
@@ -1,5 +1,5 @@
-const {RedisPubSub} = require('graphql-redis-subscriptions');
-const {createClient} = require('./redis');
+const { RedisPubSub } = require('graphql-redis-subscriptions');
+const { createClient } = require('./redis');
 
 /**
  * getClient returns the pubsub singleton for this instance.
diff --git a/services/redis.js b/services/redis.js
index 9b00b19db..2576d2c13 100644
--- a/services/redis.js
+++ b/services/redis.js
@@ -11,7 +11,7 @@ const {
   REDIS_CLUSTER_CONFIGURATION,
 } = require('../config');
 
-const attachMonitors = (client) => {
+const attachMonitors = client => {
   debug('client created');
 
   // Debug events.
@@ -19,21 +19,26 @@ const attachMonitors = (client) => {
     client.on('connect', () => debug('client connected'));
     client.on('ready', () => debug('client ready'));
     client.on('close', () => debug('client closed the connection'));
-    client.on('reconnecting', () => debug('client connection lost, attempting to reconnect'));
+    client.on('reconnecting', () =>
+      debug('client connection lost, attempting to reconnect')
+    );
     client.on('end', () => debug('client ended'));
   }
 
   // Error events.
-  client.on('error', (err) => {
+  client.on('error', err => {
     if (err) {
       console.error('Error connecting to redis:', err);
     }
   });
-  client.on('node error', (err) => debug('node error', err));
+  client.on('node error', err => debug('node error', err));
 };
 
 function retryStrategy(times) {
-  const delay = Math.max(times * REDIS_RECONNECTION_BACKOFF_FACTOR, REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME);
+  const delay = Math.max(
+    times * REDIS_RECONNECTION_BACKOFF_FACTOR,
+    REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME
+  );
 
   debug(`retry strategy: try to reconnect ${delay} ms from now`);
 
@@ -43,15 +48,25 @@ function retryStrategy(times) {
 const createClient = () => {
   let client;
   if (REDIS_CLUSTER_MODE === 'NONE') {
-    client = new Redis(REDIS_URL, merge({}, REDIS_CLIENT_CONFIG, {
-      retryStrategy,
-    }));
+    client = new Redis(
+      REDIS_URL,
+      merge({}, REDIS_CLIENT_CONFIG, {
+        retryStrategy,
+      })
+    );
   } else if (REDIS_CLUSTER_MODE === 'CLUSTER') {
-    client = new Redis.Cluster(REDIS_CLUSTER_CONFIGURATION, merge({
-      scaleReads: 'slave',
-    }, REDIS_CLIENT_CONFIG, {
-      clusterRetryStrategy: retryStrategy,
-    }));
+    client = new Redis.Cluster(
+      REDIS_CLUSTER_CONFIGURATION,
+      merge(
+        {
+          scaleReads: 'slave',
+        },
+        REDIS_CLIENT_CONFIG,
+        {
+          clusterRetryStrategy: retryStrategy,
+        }
+      )
+    );
   }
 
   // Attach the monitors that will print debug messages to the console.
@@ -74,5 +89,5 @@ module.exports = {
 
       return client;
     };
-  }
+  },
 };
diff --git a/services/scraper.js b/services/scraper.js
index e7bb5d4e6..36f935876 100644
--- a/services/scraper.js
+++ b/services/scraper.js
@@ -10,73 +10,75 @@ const metascraper = require('metascraper');
  * @type {Object}
  */
 const scraper = {
-
   /**
    * Create the new Task kue singleton.
    */
   task: new kue.Task({
-    name: 'scraper'
+    name: 'scraper',
   }),
 
   /**
    * Creates a new scraper job and scrapes the url when it gets processed.
    */
   create(asset) {
-
     debug(`Creating job for Asset[${asset.id}]`);
 
-    return scraper.task.create({
-      title: `Scrape for asset ${asset.id}`,
-      asset_id: asset.id
-    }).then((job) => {
+    return scraper.task
+      .create({
+        title: `Scrape for asset ${asset.id}`,
+        asset_id: asset.id,
+      })
+      .then(job => {
+        debug(`Created Job[${job.id}] for Asset[${asset.id}]`);
 
-      debug(`Created Job[${job.id}] for Asset[${asset.id}]`);
-
-      return job;
-    });
+        return job;
+      });
   },
 
   /**
    * Scrapes the given asset for metadata.
    */
   async scrape(asset) {
-    return metascraper.scrapeUrl(asset.url, Object.assign({}, metascraper.RULES, {
-      section: ($) => $('meta[property="article:section"]').attr('content'),
-      modified: ($) => $('meta[property="article:modified"]').attr('content')
-    }));
+    return metascraper.scrapeUrl(
+      asset.url,
+      Object.assign({}, metascraper.RULES, {
+        section: $ => $('meta[property="article:section"]').attr('content'),
+        modified: $ => $('meta[property="article:modified"]').attr('content'),
+      })
+    );
   },
 
   /**
    * Updates an Asset based on scraped asset metadata.
    */
   update(id, meta) {
-    return AssetModel.update({id}, {
-      $set: {
-        title: meta.title || '',
-        description: meta.description || '',
-        image: meta.image ? meta.image : '',
-        author: meta.author || '',
-        publication_date: meta.date || '',
-        modified_date: meta.modified || '',
-        section: meta.section || '',
-        scraped: new Date()
+    return AssetModel.update(
+      { id },
+      {
+        $set: {
+          title: meta.title || '',
+          description: meta.description || '',
+          image: meta.image ? meta.image : '',
+          author: meta.author || '',
+          publication_date: meta.date || '',
+          modified_date: meta.modified || '',
+          section: meta.section || '',
+          scraped: new Date(),
+        },
       }
-    });
+    );
   },
 
   /**
    * Start the queue processor for the scraper job.
    */
   process() {
-
     debug(`Now processing ${scraper.task.name} jobs`);
 
     scraper.task.process(async (job, done) => {
-
       debug(`Starting on Job[${job.id}] for Asset[${job.data.asset_id}]`);
 
       try {
-
         // Find the asset, or complain that it doesn't exist.
         const asset = await AssetsService.findById(job.data.asset_id);
         if (!asset) {
@@ -86,21 +88,26 @@ const scraper = {
         // Scrape the metadata from the asset.
         const meta = await scraper.scrape(asset);
 
-        debug(`Scraped ${JSON.stringify(meta)} on Job[${job.id}] for Asset[${job.data.asset_id}]`);
+        debug(
+          `Scraped ${JSON.stringify(meta)} on Job[${job.id}] for Asset[${
+            job.data.asset_id
+          }]`
+        );
 
         // Assign the metadata retrieved for the asset to the db.
         await scraper.update(job.data.asset_id, meta);
       } catch (err) {
-
-        debug(`Failed to scrape on Job[${job.id}] for Asset[${job.data.asset_id}]:`, err);
+        debug(
+          `Failed to scrape on Job[${job.id}] for Asset[${job.data.asset_id}]:`,
+          err
+        );
         return done(err);
       }
 
       debug(`Finished on Job[${job.id}] for Asset[${job.data.asset_id}]`);
       done();
     });
-  }
-
+  },
 };
 
 module.exports = scraper;
diff --git a/services/settings.js b/services/settings.js
index 72915f43b..f918f9d01 100644
--- a/services/settings.js
+++ b/services/settings.js
@@ -1,15 +1,15 @@
 const SettingModel = require('../models/setting');
 const cache = require('./cache');
 const errors = require('../errors');
-const {dotize} = require('./utils');
-const {SETTINGS_CACHE_TIME} = require('../config');
+const { dotize } = require('./utils');
+const { SETTINGS_CACHE_TIME } = require('../config');
 
 /**
  * The selector used to uniquely identify the settings document.
  */
-const selector = {id: '1'};
+const selector = { id: '1' };
 
-const retrieve = async (fields) => {
+const retrieve = async fields => {
   let settings;
   if (fields) {
     settings = await SettingModel.findOne(selector).select(fields);
@@ -27,16 +27,19 @@ const retrieve = async (fields) => {
  * The Setting Service object exposing the Setting model.
  */
 module.exports = class SettingsService {
-
   /**
    * Gets the entire settings record and sends it back
    * @return {Promise} settings the whole settings record
    */
   static async retrieve(fields) {
     if (process.env.NODE_ENV === 'production') {
-
       // When in production, wrap the settings retrieval with a cache.
-      const settings = await cache.h.wrap('settings', fields, SETTINGS_CACHE_TIME / 1000, () => retrieve(fields));
+      const settings = await cache.h.wrap(
+        'settings',
+        fields,
+        SETTINGS_CACHE_TIME / 1000,
+        () => retrieve(fields)
+      );
 
       return new SettingModel(settings);
     }
@@ -50,13 +53,17 @@ module.exports = class SettingsService {
    * @return {Promise} settings Promise that resolves to the entire (updated) settings object.
    */
   static async update(settings) {
-    const updatedSettings = await SettingModel.findOneAndUpdate(selector, {
-      $set: dotize(settings)
-    }, {
-      upsert: true,
-      new: true,
-      setDefaultsOnInsert: true
-    });
+    const updatedSettings = await SettingModel.findOneAndUpdate(
+      selector,
+      {
+        $set: dotize(settings),
+      },
+      {
+        upsert: true,
+        new: true,
+        setDefaultsOnInsert: true,
+      }
+    );
 
     if (process.env.NODE_ENV === 'production') {
       await cache.h.invalidate('settings');
@@ -69,12 +76,10 @@ module.exports = class SettingsService {
    * This is run once when the app starts to ensure settings are populated.
    */
   static init(defaults = {}) {
-    return SettingsService
-      .retrieve()
-      .catch(() => {
-        let settings = new SettingModel(defaults);
+    return SettingsService.retrieve().catch(() => {
+      let settings = new SettingModel(defaults);
 
-        return settings.save();
-      });
+      return settings.save();
+    });
   }
 };
diff --git a/services/setup.js b/services/setup.js
index 053a85789..29f84ff40 100644
--- a/services/setup.js
+++ b/services/setup.js
@@ -3,36 +3,30 @@ const SettingsService = require('./settings');
 const MigrationService = require('./migration');
 const SettingsModel = require('../models/setting');
 const errors = require('../errors');
-const {
-  INSTALL_LOCK
-} = require('../config');
+const { INSTALL_LOCK } = require('../config');
 
 /**
  * This service is used when we want to setup the application. It is consumed by
  * the dynamic setup endpoint and by the cli-setup tool.
  */
 module.exports = class SetupService {
-
   /**
    * This returns a promise which resolves if the setup is available.
    */
   static async isAvailable() {
-
     // Check if we have an install lock present.
     if (INSTALL_LOCK) {
       throw errors.ErrInstallLock;
     }
 
     try {
-
       // Get the current settings, we are expecing an error here.
       await SettingsService.retrieve();
-      
+
       // We should NOT have gotten a settings object, this means that the
       // application is already setup. Error out here.
       throw errors.ErrSettingsInit;
     } catch (e) {
-
       // If the error is `not init`, then we're good, otherwise, it's something
       // else.
       if (e !== errors.ErrSettingsNotInit) {
@@ -47,8 +41,7 @@ module.exports = class SetupService {
   /**
    * This verifies that the current input for the setup is valid.
    */
-  static validate({settings, user: {email, username, password}}) {
-
+  static validate({ settings, user: { email, username, password } }) {
     // Verify the email address of the user.
     if (!email) {
       return Promise.reject(errors.ErrMissingEmail);
@@ -61,17 +54,19 @@ module.exports = class SetupService {
     return Promise.all([
       UsersService.isValidUsername(username, false),
       UsersService.isValidPassword(password),
-      settingsModel.validate()
+      settingsModel.validate(),
     ]);
   }
 
   /**
    * This will perform the setup.
    */
-  static async setup({settings, user: {email, password, username}}) {
-
+  static async setup({ settings, user: { email, password, username } }) {
     // Validate the settings first.
-    await SetupService.validate({settings, user: {email, password, username}});
+    await SetupService.validate({
+      settings,
+      user: { email, password, username },
+    });
 
     // Get the migrations to run.
     let migrations = await MigrationService.listPending();
@@ -88,14 +83,13 @@ module.exports = class SetupService {
 
     // Grant them administrative privileges and confirm the email account.
     await Promise.all([
-      UsersService.addRoleToUser(user.id, 'ADMIN'),
-      UsersService.confirmEmail(user.id, email)
+      UsersService.setRole(user.id, 'ADMIN'),
+      UsersService.confirmEmail(user.id, email),
     ]);
-    
+
     return {
       settings,
-      user
+      user,
     };
   }
-
 };
diff --git a/services/subscriptions.js b/services/subscriptions.js
index d6a5b430c..e885ddbcc 100644
--- a/services/subscriptions.js
+++ b/services/subscriptions.js
@@ -4,18 +4,17 @@ const authentication = require('../middleware/authentication');
 // Session data does not automatically attach to websocket req objects.
 // This middleware code looks for a user in the session and, if it exists,
 // attaches it to the graph req.
-const deserializeUser = (req) => {
+const deserializeUser = req => {
   return new Promise((resolve, reject) => {
-
     // Parse the cookies (if they exist?).
-    cookieParser(req, null, (err) => {
+    cookieParser(req, null, err => {
       if (err) {
         return reject(err);
       }
 
       // This uses the authentication connect middleware to establish the
       // current user.
-      authentication(req, null, (err) => {
+      authentication(req, null, err => {
         if (err) {
           return reject(err);
         }
@@ -28,5 +27,5 @@ const deserializeUser = (req) => {
 };
 
 module.exports = {
-  deserializeUser
+  deserializeUser,
 };
diff --git a/services/tags.js b/services/tags.js
index b0d0c4b96..8183d0165 100644
--- a/services/tags.js
+++ b/services/tags.js
@@ -4,26 +4,27 @@ const UserModel = require('../models/user');
 
 const AssetsService = require('./assets');
 const SettingsService = require('./settings');
-const {ADD_COMMENT_TAG} = require('../perms/constants');
+const { ADD_COMMENT_TAG } = require('../perms/constants');
 
 const errors = require('../errors');
 
 const updateModel = async (item_type, query, update) => {
-
   // Get the model to update with.
   let Model;
   switch (item_type) {
-  case 'COMMENTS':
-    Model = CommentModel;
-    break;
-  case 'ASSETS':
-    Model = AssetModel;
-    break;
-  case 'USERS':
-    Model = UserModel;
-    break;
-  default:
-    throw new Error(`item_type ${item_type} is not a valid item_type to update a tag on`);
+    case 'COMMENTS':
+      Model = CommentModel;
+      break;
+    case 'ASSETS':
+      Model = AssetModel;
+      break;
+    case 'USERS':
+      Model = UserModel;
+      break;
+    default:
+      throw new Error(
+        `item_type ${item_type} is not a valid item_type to update a tag on`
+      );
   }
 
   // Execute the update operation.
@@ -32,41 +33,45 @@ const updateModel = async (item_type, query, update) => {
 
 const ownershipQuery = async (item_type, link, query) => {
   switch (item_type) {
-  case 'COMMENTS':
-    query['author_id'] = link.assigned_by;
-    break;
-  case 'USERS':
-    query['id'] = link.assigned_by;
-    break;
+    case 'COMMENTS':
+      query['author_id'] = link.assigned_by;
+      break;
+    case 'USERS':
+      query['id'] = link.assigned_by;
+      break;
+    default:
+      break;
   }
 };
 
 class TagsService {
-
   /**
    * Retrives a global tag from the settings based on the input_type.
    */
-  static async getAll({id, item_type, asset_id = null}) {
-
+  static async getAll({ id, item_type, asset_id = null }) {
     // Extract the settings from the database.
     let settings;
     switch (item_type) {
-    case 'COMMENTS':
-      settings = await AssetsService.rectifySettings(AssetsService.findById(asset_id));
-      break;
-    case 'ASSETS':
-      settings = await AssetsService.rectifySettings(AssetsService.findById(id));
-      break;
-    case 'USERS':
-      settings = await SettingsService.retrieve();
-      break;
-    default:
-      settings = await SettingsService.retrieve();
-      break;
+      case 'COMMENTS':
+        settings = await AssetsService.rectifySettings(
+          AssetsService.findById(asset_id)
+        );
+        break;
+      case 'ASSETS':
+        settings = await AssetsService.rectifySettings(
+          AssetsService.findById(id)
+        );
+        break;
+      case 'USERS':
+        settings = await SettingsService.retrieve();
+        break;
+      default:
+        settings = await SettingsService.retrieve();
+        break;
     }
 
     // Extract the tags from the settings object.
-    let {tags = []} = settings;
+    let { tags = [] } = settings;
 
     // Return the first tag that matches the requested form.
     return tags;
@@ -76,38 +81,43 @@ class TagsService {
    * Resolves the tagLink and ownership verification requirements that should be
    * used when trying to perform tag adding/removing operations.
    */
-  static resolveLink(user, tags, {name, item_type}) {
-
+  static resolveLink(user, tags, { name, item_type }) {
     // Try to find the tag in the global list. This will contain the permission
     // information if it's found.
-    let tag = tags.find((tag) => {
-      return tag.name === name && Array.isArray(tag.models) && tag.models.includes(item_type);
+    let tag = tags.find(tag => {
+      return (
+        tag.name === name &&
+        Array.isArray(tag.models) &&
+        tag.models.includes(item_type)
+      );
     });
 
     // Create the new tagLink that will be created to interact to the comment.
     let tagLink = {
       tag,
       assigned_by: user.id,
-      created_at: new Date()
+      created_at: new Date(),
     };
 
     // If the tag was found, we need to ensure that the current user can indeed
     // modify this tag on the comment.
     if (tag) {
-
       // If the tag has roles defined, and the current user has at least one of
       // the required roles, then modify the tag without checking for ownership.
-      if (tag.permissions && tag.permissions.roles && tag.permissions.roles.some((role) => user.roles.include(role))) {
-        return {tagLink, ownership: false};
+      if (
+        tag.permissions &&
+        tag.permissions.roles &&
+        tag.permissions.roles.includes(user.role)
+      ) {
+        return { tagLink, ownership: false };
       }
 
       // If the permissions allow for self assignment, then ensure that the query
       // is compose with that in mind.
       if (tag.permissions && tag.permissions.self) {
-
         // Otherwise, we assume that we have to check to see that the user indeed
         // owns the resource before allowing the tag to get modified.
-        return {tagLink, ownership: true};
+        return { tagLink, ownership: true };
       }
 
       throw errors.ErrNotAuthorized;
@@ -121,22 +131,22 @@ class TagsService {
 
     // Generate the tag in the event now that we have to create the tag for this
     // specific comment.
-    tagLink = TagsService.newTagLink(user, {name, item_type});
+    tagLink = TagsService.newTagLink(user, { name, item_type });
 
     // Actually modify the tag on the model.
-    return {tagLink, ownership: false};
+    return { tagLink, ownership: false };
   }
 
-  static newTag({name, item_type}) {
+  static newTag({ name, item_type }) {
     return {
       name,
       permissions: {
         public: true,
         self: false,
-        roles: []
+        roles: [],
       },
       models: [item_type],
-      created_at: new Date()
+      created_at: new Date(),
     };
   }
 
@@ -147,7 +157,7 @@ class TagsService {
     return {
       tag: TagsService.newTag(tag),
       assigned_by: user.id,
-      created_at: new Date()
+      created_at: new Date(),
     };
   }
 
@@ -155,19 +165,17 @@ class TagsService {
    * Adds a TagLink to a Model, optionally checking for ownership.
    */
   static async add(id, item_type, link, ownershipCheck) {
-
     // Compose the query to find the comment.
     const query = {
       id,
       'tags.tag.name': {
-        $ne: link.tag.name
-      }
+        $ne: link.tag.name,
+      },
     };
 
     // If ownership verification is required, ensure that the person that is
     // assigning the tag is the same person that owns the comment.
     if (ownershipCheck) {
-
       // Modify the query to support an ownership verification.
       ownershipQuery(item_type, link, query);
     }
@@ -175,8 +183,8 @@ class TagsService {
     // Get the Model to perform the update.
     return updateModel(item_type, query, {
       $push: {
-        tags: link
-      }
+        tags: link,
+      },
     });
   }
 
@@ -184,19 +192,17 @@ class TagsService {
    * Removes a TagLink to a Model, optionally checking for ownership.
    */
   static async remove(id, item_type, link, ownershipCheck) {
-
     // Compose the query to find the comment.
     const query = {
       id,
       'tags.tag.name': {
-        $eq: link.tag.name
-      }
+        $eq: link.tag.name,
+      },
     };
 
     // If ownership verification is required, ensure that the person that is
     // assigning the tag is the same person that owns the comment.
     if (ownershipCheck) {
-
       // Modify the query to support an ownership verification.
       ownershipQuery(item_type, link, query);
     }
@@ -207,7 +213,7 @@ class TagsService {
         tags: {
           'tag.name': link.tag.name,
         },
-      }
+      },
     });
   }
 }
diff --git a/services/timeago.js b/services/timeago.js
new file mode 100644
index 000000000..33cf37aea
--- /dev/null
+++ b/services/timeago.js
@@ -0,0 +1,12 @@
+const ta = require('timeago.js');
+
+ta.register('es', require('timeago.js/locales/es'));
+ta.register('da', require('timeago.js/locales/da'));
+ta.register('fr', require('timeago.js/locales/fr'));
+ta.register('pt_BR', require('timeago.js/locales/pt_BR'));
+
+const timeago = ta();
+
+module.exports = time => {
+  return timeago.format(new Date(time), 'en');
+};
diff --git a/services/tokens.js b/services/tokens.js
index 2df33c1ca..636465262 100644
--- a/services/tokens.js
+++ b/services/tokens.js
@@ -1,24 +1,17 @@
 const errors = require('../errors');
 const UserModel = require('../models/user');
 const uuid = require('uuid');
-const {set} = require('lodash');
+const { set } = require('lodash');
 
-const {
-  JWT_ISSUER,
-  JWT_AUDIENCE,
-  JWT_USER_ID_CLAIM,
-} = require('../config');
+const { JWT_ISSUER, JWT_AUDIENCE, JWT_USER_ID_CLAIM } = require('../config');
 
-const {
-  jwt: JWT_SECRET
-} = require('../secrets');
+const { jwt: JWT_SECRET } = require('../secrets');
 
 /**
  * TokenService manages Personal Access Tokens for users. These tokens are
  * persisted in the database and attached to the user.
  */
 module.exports = class TokenService {
-
   /**
    * Creates a token for a user with a given name.
    *
@@ -26,13 +19,12 @@ module.exports = class TokenService {
    * @param {String} tokenName  the name of the token to be created
    */
   static async create(userID, tokenName) {
-
     // Create the token.
     const payload = {
       jti: uuid.v4(),
       iss: JWT_ISSUER,
       aud: JWT_AUDIENCE,
-      pat: true
+      pat: true,
     };
 
     set(payload, JWT_USER_ID_CLAIM, userID);
@@ -44,17 +36,20 @@ module.exports = class TokenService {
     let pat = {
       id: payload.jti,
       name: tokenName,
-      active: true
+      active: true,
     };
 
     // Wait to update the user model with the new PAT.
-    await UserModel.update({id: userID}, {
-      $push: {
-        tokens: pat
+    await UserModel.update(
+      { id: userID },
+      {
+        $push: {
+          tokens: pat,
+        },
       }
-    });
+    );
 
-    return {payload, jwt, pat};
+    return { payload, jwt, pat };
   }
 
   /**
@@ -68,9 +63,9 @@ module.exports = class TokenService {
     let query = {
       tokens: {
         $elemMatch: {
-          id: tokenID
-        }
-      }
+          id: tokenID,
+        },
+      },
     };
 
     if (userID) {
@@ -80,8 +75,8 @@ module.exports = class TokenService {
     // Revoke the token id.
     await UserModel.update(query, {
       $set: {
-        'tokens.$.active': false
-      }
+        'tokens.$.active': false,
+      },
     });
   }
 
@@ -92,17 +87,16 @@ module.exports = class TokenService {
    * @param {String} tokenID the id of the token
    */
   static async validate(userID, tokenID) {
-
     // Find the user.
     let user = await UserModel.findOne({
-      id: userID
+      id: userID,
     });
     if (!user || !user.tokens) {
       throw new errors.ErrAuthentication('user does not exist');
     }
 
     // Extract the token from the user.
-    let token = user.tokens.find(({id}) => id === tokenID);
+    let token = user.tokens.find(({ id }) => id === tokenID);
     if (!token) {
       throw new errors.ErrAuthentication('token does not exist');
     }
@@ -121,14 +115,12 @@ module.exports = class TokenService {
    * @param {String} userID     the id of the user owning the token
    */
   static async list(userID) {
-
     // Get the user specified by the id.
-    let user = await UserModel.findOne({id: userID}).select('tokens');
+    let user = await UserModel.findOne({ id: userID }).select('tokens');
     if (!user || !user.tokens) {
       return [];
     }
 
     return user.tokens;
   }
-
 };
diff --git a/services/users.js b/services/users.js
index 9159ef5a6..96386108f 100644
--- a/services/users.js
+++ b/services/users.js
@@ -1,32 +1,33 @@
-const assert = require('assert');
 const uuid = require('uuid');
 const bcrypt = require('bcryptjs');
 const errors = require('../errors');
 const some = require('lodash/some');
+const merge = require('lodash/merge');
 
 const {
-  ROOT_URL
-} = require('../config');
+  USERS_NEW,
+  USERS_SUSPENSION_CHANGE,
+  USERS_BAN_CHANGE,
+  USERS_USERNAME_STATUS_CHANGE,
+} = require('./events/constants');
+const events = require('./events');
 
-const {
-  jwt: JWT_SECRET
-} = require('../secrets');
+const { ROOT_URL } = require('../config');
+
+const { jwt: JWT_SECRET } = require('../secrets');
 
 const debug = require('debug')('talk:services:users');
 
 const UserModel = require('../models/user');
-const USER_STATUS = require('../models/enum/user_status');
-const USER_ROLES = require('../models/enum/user_roles');
 
 const RECAPTCHA_WINDOW = '10m'; // 10 minutes.
 const RECAPTCHA_INCORRECT_TRIGGER = 5; // after 3 incorrect attempts, recaptcha will be required.
 
 const ActionsService = require('./actions');
-const MailerService = require('./mailer');
-const Wordlist = require('./wordlist');
+const mailer = require('./mailer');
 const i18n = require('./i18n');
-const Domainlist = require('./domainlist');
-const {escapeRegExp} = require('./regex');
+const Wordlist = require('./wordlist');
+const DomainList = require('./domain_list');
 
 const EMAIL_CONFIRM_JWT_SUBJECT = 'email_confirm';
 const PASSWORD_RESET_JWT_SUBJECT = 'password_reset';
@@ -37,32 +38,31 @@ const SALT_ROUNDS = 10;
 
 // Create a redis client to use for authentication.
 const Limit = require('./limit');
-const loginRateLimiter = new Limit('loginAttempts', RECAPTCHA_INCORRECT_TRIGGER, RECAPTCHA_WINDOW);
+const loginRateLimiter = new Limit(
+  'loginAttempts',
+  RECAPTCHA_INCORRECT_TRIGGER,
+  RECAPTCHA_WINDOW
+);
 
 // UsersService is the interface for the application to interact with the
 // UserModel through.
-module.exports = class UsersService {
-
+class UsersService {
   /**
    * Returns a user (if found) for the given email address.
    */
   static findLocalUser(email) {
-    if (!email || typeof email !== 'string') {
-      return Promise.reject('email is required for findLocalUser');
-    }
-
     return UserModel.findOne({
       profiles: {
         $elemMatch: {
           id: email.toLowerCase(),
-          provider: 'local'
-        }
-      }
+          provider: 'local',
+        },
+      },
     });
   }
 
   /**
-   * This records an unsucesfull login attempt for the given email address. If
+   * This records an unsuccessful login attempt for the given email address. If
    * the maximum has been reached, the promise will be rejected with:
    *
    *  errors.ErrLoginAttemptMaximumExceeded
@@ -82,8 +82,246 @@ module.exports = class UsersService {
     }
   }
 
+  static async setSuspensionStatus(id, until, assignedBy = null, message) {
+    let user = await UserModel.findOneAndUpdate(
+      { id },
+      {
+        $set: {
+          'status.suspension.until': until,
+        },
+        $push: {
+          'status.suspension.history': {
+            until,
+            assigned_by: assignedBy,
+            message,
+            created_at: Date.now(),
+          },
+        },
+      },
+      {
+        new: true,
+        runValidators: true,
+      }
+    );
+    if (user === null) {
+      user = await UserModel.findOne({ id });
+      if (user === null) {
+        throw errors.ErrNotFound;
+      }
+
+      // Date comparisons are difficult when using MongoDB. Javascript will
+      // store the date at a higher precision than Mongo can store, hence we
+      // check if the date is within 1 second of the time we're trying to set.
+      if (
+        user.status.suspension.until === until ||
+        (user.status.suspension.until.getTime() > until.getTime() - 1000 &&
+          user.status.suspension.until.getTime() < until.getTime() + 1000)
+      ) {
+        return user;
+      }
+
+      throw new Error(
+        'suspension status change edit failed for an unknown reason'
+      );
+    }
+
+    // Emit that the user username status was changed.
+    await events.emitAsync(USERS_SUSPENSION_CHANGE, user, {
+      until,
+      message,
+      assignedBy,
+    });
+
+    return user;
+  }
+
+  static async setBanStatus(id, status, assignedBy = null, message) {
+    let user = await UserModel.findOneAndUpdate(
+      {
+        id,
+        'status.banned.status': {
+          $ne: status,
+        },
+      },
+      {
+        $set: {
+          'status.banned.status': status,
+        },
+        $push: {
+          'status.banned.history': {
+            status,
+            assigned_by: assignedBy,
+            message,
+            created_at: Date.now(),
+          },
+        },
+      },
+      {
+        new: true,
+        runValidators: true,
+      }
+    );
+    if (user === null) {
+      user = await UserModel.findOne({ id });
+      if (user === null) {
+        throw errors.ErrNotFound;
+      }
+
+      if (user.status.banned.status === status) {
+        return user;
+      }
+
+      throw new Error('ban status change edit failed for an unknown reason');
+    }
+
+    // Emit that the user ban status was changed.
+    await events.emitAsync(USERS_BAN_CHANGE, user, {
+      status,
+      assignedBy,
+      message,
+    });
+
+    return user;
+  }
+
+  static async setUsernameStatus(id, status, assignedBy = null) {
+    let user = await UserModel.findOneAndUpdate(
+      {
+        id,
+        'status.username.status': {
+          $ne: status,
+        },
+      },
+      {
+        $set: {
+          'status.username.status': status,
+        },
+        $push: {
+          'status.username.history': {
+            status,
+            assigned_by: assignedBy,
+            created_at: Date.now(),
+          },
+        },
+      },
+      {
+        new: true,
+      }
+    );
+    if (user === null) {
+      user = await UserModel.findOne({ id });
+      if (user === null) {
+        throw errors.ErrNotFound;
+      }
+
+      if (user.status.username.status === status) {
+        return user;
+      }
+
+      throw new Error(
+        'username status change edit failed for an unknown reason'
+      );
+    }
+
+    // Emit that the user username status was changed.
+    await events.emitAsync(USERS_USERNAME_STATUS_CHANGE, user, {
+      status,
+      assignedBy,
+    });
+
+    return user;
+  }
+
+  static async _setUsername(
+    id,
+    username,
+    fromStatus,
+    toStatus,
+    assignedBy,
+    resetAllowed = false
+  ) {
+    try {
+      const query = {
+        id,
+        'status.username.status': fromStatus,
+      };
+      if (!resetAllowed) {
+        query.username = { $ne: username };
+      }
+
+      let user = await UserModel.findOneAndUpdate(
+        query,
+        {
+          $set: {
+            username,
+            lowercaseUsername: username.toLowerCase(),
+            'status.username.status': toStatus,
+          },
+          $push: {
+            'status.username.history': {
+              status: toStatus,
+              assigned_by: assignedBy,
+              created_at: Date.now(),
+            },
+          },
+        },
+        {
+          new: true,
+        }
+      );
+      if (!user) {
+        user = await UsersService.findById(id);
+        if (user === null) {
+          throw errors.ErrNotFound;
+        }
+
+        if (user.status.username.status !== fromStatus) {
+          throw errors.ErrPermissionUpdateUsername;
+        }
+
+        if (!resetAllowed && user.username === username) {
+          throw errors.ErrSameUsernameProvided;
+        }
+
+        throw new Error('edit username failed for an unexpected reason');
+      }
+
+      // Emit that the user username status was changed.
+      await events.emitAsync(USERS_USERNAME_STATUS_CHANGE, user, toStatus);
+
+      return user;
+    } catch (err) {
+      if (err.code === 11000) {
+        throw errors.ErrUsernameTaken;
+      }
+
+      throw err;
+    }
+  }
+
+  static async setUsername(id, username, assignedBy) {
+    return UsersService._setUsername(
+      id,
+      username,
+      'UNSET',
+      'SET',
+      assignedBy,
+      true
+    );
+  }
+
+  static async changeUsername(id, username, assignedBy) {
+    return UsersService._setUsername(
+      id,
+      username,
+      'REJECTED',
+      'CHANGED',
+      assignedBy
+    );
+  }
+
   /**
-   * This checks to see if the current login attempts against a user exeeds the
+   * This checks to see if the current login attempts against a user exceeds the
    * maximum value allowed, if so, it rejects with:
    *
    *  errors.ErrLoginAttemptMaximumExceeded
@@ -100,51 +338,24 @@ module.exports = class UsersService {
   }
 
   /**
-   * Sets or unsets the recaptcha_required flag on a user's local profile.
+   * Sets or removes the recaptcha_required flag on a user's local profile.
    */
   static flagForRecaptchaRequirement(email, required) {
-    return UserModel.update({
-      profiles: {
-        $elemMatch: {
-          id: email.toLowerCase(),
-          provider: 'local'
-        }
+    return UserModel.update(
+      {
+        profiles: {
+          $elemMatch: {
+            id: email.toLowerCase(),
+            provider: 'local',
+          },
+        },
+      },
+      {
+        $set: {
+          'profiles.$.metadata.recaptcha_required': required,
+        },
       }
-    }, {
-      $set: {
-        'profiles.$.metadata.recaptcha_required': required
-      }
-    });
-  }
-
-  /**
-   * Merges two users together by taking all the profiles on a given user and
-   * pushing them into the source user followed by deleting the destination user's
-   * user account. This will
-   * not merge the roles associated with the source user.
-   * @param  {String} dstUserID id of the user to which is the target of the merge
-   * @param  {String} srcUserID id of the user to which is the source of the merge
-   * @return {Promise}          resolves when the users are merged
-   */
-  static mergeUsers(dstUserID, srcUserID) {
-    let srcUser, dstUser;
-
-    return Promise
-      .all([
-        UserModel.findOne({id: dstUserID}).exec(),
-        UserModel.findOne({id: srcUserID}).exec()
-      ])
-      .then((users) => {
-        dstUser = users[0];
-        srcUser = users[1];
-
-        srcUser.profiles.forEach((profile) => {
-          dstUser.profiles.push(profile);
-        });
-
-        return srcUser.remove();
-      })
-      .then(() => dstUser.save());
+    );
   }
 
   static castUsername(username) {
@@ -157,47 +368,99 @@ module.exports = class UsersService {
    * @param  {Object}   profile - User social/external profile
    * @param  {Function} done    [description]
    */
-  static findOrCreateExternalUser({id, provider, displayName}) {
-    return UserModel
-      .findOne({
-        profiles: {
-          $elemMatch: {
-            id,
-            provider
-          }
-        }
+  static async findOrCreateExternalUser({ id, provider, displayName }) {
+    let user = await UserModel.findOne({
+      profiles: {
+        $elemMatch: {
+          id,
+          provider,
+        },
+      },
+    });
+    if (user) {
+      return user;
+    }
+
+    // User does not exist and need to be created.
+
+    // Create an initial username for the user.
+    let username = UsersService.castUsername(displayName);
+
+    // The user was not found, lets create them!
+    user = new UserModel({
+      username,
+      lowercaseUsername: username.toLowerCase(),
+      profiles: [{ id, provider }],
+      status: {
+        username: {
+          status: 'UNSET',
+          history: {
+            status: 'UNSET',
+          },
+        },
+      },
+    });
+
+    // Save the user in the database.
+    await user.save();
+
+    // Emit that the user was created.
+    await events.emitAsync(USERS_NEW, user);
+
+    return user;
+  }
+
+  /**
+   * sendEmailConfirmation sends a confirmation email to the user.
+   * @param {String}     user  the user to send the email to
+   * @param {String}     email   the email for the user to send the email to
+   */
+  static async sendEmailConfirmation(user, email, redirectURI = ROOT_URL) {
+    let token = await UsersService.createEmailConfirmToken(
+      user,
+      email,
+      redirectURI
+    );
+
+    return mailer.send({
+      template: 'email-confirm',
+      locals: {
+        token,
+        rootURL: ROOT_URL,
+        email,
+      },
+      subject: i18n.t('email.confirm.subject'),
+      to: email,
+    });
+  }
+
+  static async sendEmail(user, options) {
+    const email = user.firstEmail;
+    if (!email) {
+      // Rather than throwing an error here, we'll
+      console.warn(new Error('user does not have an email'));
+      return;
+    }
+
+    return mailer.send(
+      merge({}, options, {
+        to: email,
       })
-      .then((user) => {
-        if (user) {
-          return user;
-        }
-
-        // User does not exist and need to be created.
-
-        let username = UsersService.castUsername(displayName);
-
-        // The user was not found, lets create them!
-        user = new UserModel({
-          username,
-          lowercaseUsername: username.toLowerCase(),
-          roles: [],
-          profiles: [{id, provider}],
-          canEditName: true
-        });
-
-        return user.save();
-      });
+    );
   }
 
   static async changePassword(id, password) {
     const hashedPassword = await bcrypt.hash(password, SALT_ROUNDS);
 
-    return UserModel.update({id}, {
-      $inc: {__v: 1},
-      $set: {
-        password: hashedPassword
+    return UserModel.update(
+      { id },
+      {
+        $inc: { __v: 1 },
+        $set: {
+          password: hashedPassword,
+        },
       }
-    });
+    );
   }
 
   /**
@@ -206,10 +469,15 @@ module.exports = class UsersService {
    * @return {Promise}     Resolves with the users that were created
    */
   static createLocalUsers(users) {
-    return Promise.all(users.map((user) => {
-      return UsersService
-        .createLocalUser(user.email, user.password, user.username);
-    }));
+    return Promise.all(
+      users.map(user => {
+        return UsersService.createLocalUser(
+          user.email,
+          user.password,
+          user.username
+        );
+      })
+    );
   }
 
   /**
@@ -230,7 +498,6 @@ module.exports = class UsersService {
     }
 
     if (checkAgainstWordlist) {
-
       // check for profanity
       let err = await Wordlist.usernameCheck(username);
       if (err) {
@@ -265,7 +532,6 @@ module.exports = class UsersService {
    * @param  {Function} done        callback
    */
   static async createLocalUser(email, password, username) {
-
     if (!email) {
       throw errors.ErrMissingEmail;
     }
@@ -275,7 +541,7 @@ module.exports = class UsersService {
 
     await Promise.all([
       UsersService.isValidUsername(username),
-      UsersService.isValidPassword(password)
+      UsersService.isValidPassword(password),
     ]);
 
     const hashedPassword = await bcrypt.hash(password, SALT_ROUNDS);
@@ -284,13 +550,20 @@ module.exports = class UsersService {
       username,
       lowercaseUsername: username.toLowerCase(),
       password: hashedPassword,
-      roles: [],
       profiles: [
         {
           id: email,
-          provider: 'local'
-        }
-      ]
+          provider: 'local',
+        },
+      ],
+      status: {
+        username: {
+          status: 'SET',
+          history: {
+            status: 'SET',
+          },
+        },
+      },
     });
 
     try {
@@ -305,225 +578,31 @@ module.exports = class UsersService {
       throw err;
     }
 
+    // Emit that the user was created.
+    await events.emitAsync(USERS_NEW, user);
+
     return user;
   }
 
   /**
-   * Disables a given user account.
-   * @param  {String}   id   id of a user
-   * @param  {Function} done callback after the operation is complete
-   */
-  static disableUser(id) {
-    return UserModel.update({
-      id
-    }, {
-      $set: {
-        disabled: true
-      }
-    });
-  }
-
-  /**
-   * Enables a given user account.
-   * @param  {String}   id   id of a user
-   * @param  {Function} done callback after the operation is complete
-   */
-  static enableUser(id) {
-    return UserModel.update({
-      id
-    }, {
-      $set: {
-        disabled: false
-      }
-    });
-  }
-
-  /**
-   * Adds a role to a user.
+   * Sets a given user's role to the one provided.
    * @param  {String}   id   id of a user
    * @param  {String}   role role to add
-   * @param  {Function} done callback after the operation is complete
    */
-  static async addRoleToUser(id, role) {
-    const roles = [];
-
-    // Check to see if the user role is in the allowable set of roles.
-    if (role && USER_ROLES.indexOf(role) === -1) {
-
-      // User role is not supported! Error out here.
-      throw new Error(`role ${role} is not supported`);
-    } else if(role) {
-      roles.push(role);
-    }
-
-    return UserModel.update({id}, {$set: {roles}});
-  }
-
-  /**
-   * Removes a role from a user.
-   * @param  {String}   id   id of a user
-   * @param  {String}   role role to remove
-   * @param  {Function} done callback after the operation is complete
-   */
-  static async removeRoleFromUser(id, role) {
-
-    // Check to see if the user role is in the allowable set of roles.
-    if (USER_ROLES.indexOf(role) === -1) {
-
-      // User role is not supported! Error out here.
-      throw new Error(`role ${role} is not supported`);
-    }
-
-    return UserModel.update({id}, {
-      $pull: {
-        roles: role
-      }
-    });
-  }
-
-  /**
-   * Set status of a user.
-   * @param  {String}   id   id of a user
-   * @param  {String}   status status to set
-   * @param  {Function} done callback after the operation is complete
-   */
-  static async setStatus(id, status) {
-
-    // Check to see if the user status is in the allowable set of roles.
-    if (USER_STATUS.indexOf(status) === -1) {
-
-      // User status is not supported! Error out here.
-      throw new Error(`status ${status} is not supported`);
-    }
-
-    // Compose the query.
-    const query = {id};
-
-    // Insert extra validations into the query.
-    switch (status) {
-    case 'ACTIVE':
-    case 'BANNED':
-    case 'APPROVED':
-
-      // A user cannot become change their status from what it is already.
-      query.status = {
-        $ne: status,
-      };
-      break;
-    case 'PENDING':
-
-      // A user cannot become pending if they are already approved, pending, or
-      // banned
-      query.status = {
-        $nin: [status, 'APPROVED', 'BANNED'],
-      };
-      break;
-    }
-
-    const user = await UserModel.findOneAndUpdate(query, {
-      $set: {
-        status,
-      },
-    }, {
-      new: true,
-    });
-
-    if (status === 'BANNED') {
-      let localProfile = user.profiles.find((profile) => profile.provider === 'local');
-      if (localProfile) {
-        const options = {
-          template: 'banned',
-          locals: {
-            body: i18n.t('email.banned.body'),
-          },
-          subject: i18n.t('email.banned.subject'),
-          to: localProfile.id
-        };
-        await MailerService.send(options);
-      }
-    }
-
-    return user;
-  }
-
-  /**
-   * Suspend a user until specified time.
-   * @param  {String}   id                  id of a user
-   * @param  {String}   message             message to be send to the user
-   * @param  {Date}     until               date until the suspension is valid.
-   */
-  static async suspendUser(id, message, until) {
-    const user = await UserModel.findOneAndUpdate({id}, {
-      $set: {
-        suspension: {
-          until,
-        },
-      }
-    }, {
-      new: true,
-    });
-
-    if (message) {
-      let localProfile = user.profiles.find((profile) => profile.provider === 'local');
-      if (localProfile) {
-        const options = {
-          template: 'suspension',
-          locals: {
-            body: message
-          },
-          subject: i18n.t('email.suspended.subject'),
-          to: localProfile.id,
-        };
-
-        await MailerService.send(options);
-      }
-    }
-
-    return user;
-  }
-
-  /**
-   * Reject username. It changes the status to BANNED and canEditName to True.
-   * @param  {String}   id                  id of a user
-   * @param  {String}   message             message to be send to the user
-   * @param  {Date}     until               date until the suspension is valid.
-   */
-  static async rejectUsername(id, message) {
-    const user = await UserModel.findOneAndUpdate({id}, {
-      $set: {
-        status: 'BANNED',
-        canEditName: true,
-      }
-    }, {
-      new: true,
-    });
-
-    if (message) {
-      let localProfile = user.profiles.find(({provider}) => provider === 'local');
-      if (localProfile) {
-        const options = {
-          template: 'suspension',              // needed to know which template to render!
-          locals: {                            // specifies the template locals.
-            body: message
-          },
-          subject: i18n.t('email.suspended.subject'),
-          to: localProfile.id  // This only works if the user has registered via e-mail.
-          // We may want a standard way to access a user's e-mail address in the future
-        };
-
-        await MailerService.send(options);
-      }
-    }
-
-    return user;
+  static setRole(id, role) {
+    return UserModel.update(
+      { id },
+      { $set: { role } },
+      { runValidators: true }
+    );
   }
 
   /**
    * Finds a user with the id.
    * @param {String} id  user id (uuid)
-  */
+   */
   static findById(id) {
-    return UserModel.findOne({id});
+    return UserModel.findOne({ id });
   }
 
   /**
@@ -532,13 +611,11 @@ module.exports = class UsersService {
    * @param {Object} token  a jwt token used to sign in the user
    */
   static async findOrCreateByIDToken(id, token) {
-
     // Try to get the user.
-    let user = await UserModel.findOne({id});
+    let user = await UserModel.findOne({ id });
 
     // If the user was not found, try to look it up.
     if (user === null) {
-
       // If the user wasn't found, it will return null and the variable will be
       // unchanged.
       user = await lookupUserNotFound(token);
@@ -550,21 +627,24 @@ module.exports = class UsersService {
   /**
    * Finds users in an array of ids.
    * @param {Array} ids  array of user identifiers (uuid)
-  */
+   */
   static findByIdArray(ids) {
     return UserModel.find({
-      id: {$in: ids}
+      id: { $in: ids },
     });
   }
 
   /**
    * Finds public user information by an array of ids.
    * @param {Array} ids  array of user identifiers (uuid)
-  */
+   */
   static findPublicByIdArray(ids) {
-    return UserModel.find({
-      id: {$in: ids}
-    }, 'id username');
+    return UserModel.find(
+      {
+        id: { $in: ids },
+      },
+      'id username'
+    );
   }
 
   /**
@@ -573,17 +653,18 @@ module.exports = class UsersService {
    */
   static async createPasswordResetToken(email, loc) {
     if (!email || typeof email !== 'string') {
-      throw new Error('email is required when creating a JWT for resetting passord');
+      throw new Error(
+        'email is required when creating a JWT for resetting passord'
+      );
     }
 
     email = email.toLowerCase();
 
     const [user, domainValidated] = await Promise.all([
-      UserModel.findOne({profiles: {$elemMatch: {id: email}}}),
-      Domainlist.urlCheck(loc),
+      UserModel.findOne({ profiles: { $elemMatch: { id: email } } }),
+      DomainList.urlCheck(loc),
     ]);
     if (!user) {
-
       // Since we don't want to reveal that the email does/doesn't exist
       // just go ahead and resolve the Promise with null and check in the
       // endpoint.
@@ -592,7 +673,7 @@ module.exports = class UsersService {
 
     // If the domain didn't match any of the whitelisted domains and if it
     // didn't match the mount domain, then throw an error.
-    if (!domainValidated && !Domainlist.matchMount(loc)) {
+    if (!domainValidated && !DomainList.matchMount(loc)) {
       throw new Error('user supplied location exists on non-permitted domain');
     }
 
@@ -601,12 +682,12 @@ module.exports = class UsersService {
       email,
       loc,
       userId: user.id,
-      version: user.__v
+      version: user.__v,
     };
 
     return JWT_SECRET.sign(payload, {
       expiresIn: '1d',
-      subject: PASSWORD_RESET_JWT_SUBJECT
+      subject: PASSWORD_RESET_JWT_SUBJECT,
     });
   }
 
@@ -638,8 +719,8 @@ module.exports = class UsersService {
       throw new Error('cannot verify an empty token');
     }
 
-    const {userId, loc, version} = await UsersService.verifyToken(token, {
-      subject: PASSWORD_RESET_JWT_SUBJECT
+    const { userId, loc, version } = await UsersService.verifyToken(token, {
+      subject: PASSWORD_RESET_JWT_SUBJECT,
     });
 
     const user = await UsersService.findById(userId);
@@ -651,46 +732,6 @@ module.exports = class UsersService {
     return [user, loc];
   }
 
-  /**
-   * Finds a user using a value which gets compared using a prefix match against
-   * the user's email address and/or their username.
-   *
-   * @param  {String} value value to search by
-   * @return {Promise}
-   */
-  static search(value) {
-    if (!value || typeof value !== 'string' || value.length === 0) {
-      return UserModel.find({});
-    }
-
-    value = escapeRegExp(value);
-
-    return UserModel.find({
-      $or: [
-
-        // Search by a prefix match on the username.
-        {
-          'lowercaseUsername': {
-            $regex: new RegExp(value.toLowerCase())
-          }
-        },
-
-        // Search by a prefix match on the email address.
-        {
-          'profiles': {
-            $elemMatch: {
-              id: {
-                $regex: new RegExp(value),
-                $options: 'i'
-              },
-              provider: 'local'
-            }
-          }
-        }
-      ]
-    });
-  }
-
   /**
    * Returns a count of the current users.
    * @return {Promise}
@@ -712,13 +753,16 @@ module.exports = class UsersService {
    * @return {Promise}
    */
   static updateSettings(id, settings) {
-    return UserModel.update({
-      id
-    }, {
-      $set: {
-        settings
+    return UserModel.update(
+      {
+        id,
+      },
+      {
+        $set: {
+          settings,
+        },
       }
-    });
+    );
   }
 
   /**
@@ -734,7 +778,7 @@ module.exports = class UsersService {
       item_type: 'users',
       user_id,
       action_type,
-      metadata
+      metadata,
     });
   }
 
@@ -747,7 +791,9 @@ module.exports = class UsersService {
    */
   static async createEmailConfirmToken(user, email, referer = ROOT_URL) {
     if (!email || typeof email !== 'string') {
-      throw new Error('email is required when creating a JWT for resetting passord');
+      throw new Error(
+        'email is required when creating a JWT for resetting password'
+      );
     }
 
     // Conform the email to lowercase.
@@ -756,22 +802,27 @@ module.exports = class UsersService {
     const tokenOptions = {
       jwtid: uuid.v4(),
       expiresIn: '1d',
-      subject: EMAIL_CONFIRM_JWT_SUBJECT
+      subject: EMAIL_CONFIRM_JWT_SUBJECT,
     };
 
     // Get the profile representing the local account.
-    let profile = user.profiles.find((profile) => profile.id === email && profile.provider === 'local');
+    let profile = user.profiles.find(
+      profile => profile.id === email && profile.provider === 'local'
+    );
 
     // Ensure that the user email hasn't already been verified.
     if (profile && profile.metadata && profile.metadata.confirmed_at) {
       throw new Error('email address already confirmed');
     }
 
-    return JWT_SECRET.sign({
-      email,
-      referer,
-      userID: user.id
-    }, tokenOptions);
+    return JWT_SECRET.sign(
+      {
+        email,
+        referer,
+        userID: user.id,
+      },
+      tokenOptions
+    );
   }
 
   /**
@@ -786,7 +837,7 @@ module.exports = class UsersService {
     }
 
     const decoded = await UsersService.verifyToken(token, {
-      subject: EMAIL_CONFIRM_JWT_SUBJECT
+      subject: EMAIL_CONFIRM_JWT_SUBJECT,
     });
 
     const user = await UserModel.findOne({
@@ -802,7 +853,7 @@ module.exports = class UsersService {
       throw errors.ErrNotFound;
     }
 
-    const profile = user.profiles.find(({id}) => id === decoded.email);
+    const profile = user.profiles.find(({ id }) => id === decoded.email);
     if (!profile) {
       throw errors.ErrNotFound;
     }
@@ -822,114 +873,37 @@ module.exports = class UsersService {
    * @return {Promise}
    */
   static async verifyEmailConfirmation(token) {
-    let {userID, email, referer} = await UsersService.verifyEmailConfirmationToken(token);
+    let {
+      userID,
+      email,
+      referer,
+    } = await UsersService.verifyEmailConfirmationToken(token);
 
     await UsersService.confirmEmail(userID, email);
 
-    return {userID, email, referer};
+    return { userID, email, referer };
   }
 
   /**
    * Marks the email on the user as confirmed.
    */
   static confirmEmail(id, email) {
-    return UserModel
-      .update({
+    return UserModel.update(
+      {
         id,
         profiles: {
           $elemMatch: {
             id: email,
-            provider: 'local'
-          }
-        }
-      }, {
+            provider: 'local',
+          },
+        },
+      },
+      {
         $set: {
-          'profiles.$.metadata.confirmed_at': new Date()
-        }
-      });
-  }
-
-  /**
-   * Returns all users with pending 'ADMIN'ation actions.
-   * @return {Promise}
-   */
-  static moderationQueue() {
-    return UserModel.find({status: 'PENDING'});
-  }
-
-  /**
-   * Gives the user the ability to edit their username.
-   * @param  {String} id the id of the user to be toggled.
-   * @param  {Boolean} canEditName sets whether the user can edit their name.
-   * @return {Promise}
-   */
-  static toggleNameEdit(id, canEditName) {
-    return UserModel.update({id}, {
-      $set: {canEditName}
-    });
-  }
-
-  /**
-   * Updates the user's username.
-   * @param  {String} id       The id of the user.
-   * @param  {String} username The new username for the user.
-   * @return {Promise}
-   */
-  static async editName(id, username) {
-
-    // TODO: Revisit this when we revamped User status workflows.
-    const queryUsernameRejected = {
-      id,
-      username: {$ne: username},
-      status: 'BANNED',
-      canEditName: true
-    };
-
-    const queryCreateUsername = {
-      id,
-      status: 'ACTIVE',
-      canEditName: true
-    };
-
-    try {
-      const result = await UserModel.findOneAndUpdate({
-        $or: [queryUsernameRejected, queryCreateUsername],
-      }, {
-        $set: {
-          username: username,
-          lowercaseUsername: username.toLowerCase(),
-          canEditName: false,
-          status: 'PENDING',
-        }
-      }, {
-        new: true,
-      });
-
-      if (!result) {
-        const user = await UsersService.findById(id);
-        if (user === null) {
-          throw errors.ErrNotFound;
-        }
-
-        if (!user.canEditName) {
-          throw errors.ErrPermissionUpdateUsername;
-        }
-
-        if (user.username === username) {
-          throw errors.ErrSameUsernameProvided;
-        }
-
-        throw new Error('edit username failed for an unexpected reason');
+          'profiles.$.metadata.confirmed_at': new Date(),
+        },
       }
-
-      return result;
-    }
-    catch(err) {
-      if (err.code === 11000) {
-        throw errors.ErrUsernameTaken;
-      }
-      throw err;
-    }
+    );
   }
 
   /**
@@ -938,25 +912,25 @@ module.exports = class UsersService {
    * @param  {Array<String>} usersToIgnore Array of user IDs to ignore
    */
   static async ignoreUsers(id, usersToIgnore) {
-    assert(Array.isArray(usersToIgnore), 'usersToIgnore is an array');
-    assert(usersToIgnore.every((u) => typeof u === 'string'), 'usersToIgnore is an array of string user IDs');
     if (usersToIgnore.includes(id)) {
       throw new Error('Users cannot ignore themselves');
     }
 
     const users = await UsersService.findByIdArray(usersToIgnore);
-    if (some(users, (user) => user.isStaff())) {
+    if (some(users, user => user.isStaff())) {
       throw errors.ErrCannotIgnoreStaff;
     }
 
-    // TODO: For each usersToIgnore, make sure they exist?
-    return UserModel.update({id}, {
-      $addToSet:  {
-        ignoresUsers: {
-          $each: usersToIgnore
-        }
+    return UserModel.update(
+      { id },
+      {
+        $addToSet: {
+          ignoresUsers: {
+            $each: usersToIgnore,
+          },
+        },
       }
-    });
+    );
   }
 
   /**
@@ -965,15 +939,50 @@ module.exports = class UsersService {
    * @param  {Array<String>} usersToStopIgnoring Array of user IDs to stop ignoring
    */
   static async stopIgnoringUsers(id, usersToStopIgnoring) {
-    assert(Array.isArray(usersToStopIgnoring), 'usersToStopIgnoring is an array');
-    assert(usersToStopIgnoring.every((u) => typeof u === 'string'), 'usersToStopIgnoring is an array of string user IDs');
-    await UserModel.update({id}, {
-      $pullAll:  {
-        ignoresUsers: usersToStopIgnoring
+    await UserModel.update(
+      { id },
+      {
+        $pullAll: {
+          ignoresUsers: usersToStopIgnoring,
+        },
       }
+    );
+  }
+}
+
+module.exports = UsersService;
+
+events.on(USERS_BAN_CHANGE, async (user, { status, message }) => {
+  // Check to see if the user was banned now and is currently banned.
+  if (user.banned && status && message && message.length > 0) {
+    await UsersService.sendEmail(user, {
+      template: 'plain',
+      locals: {
+        body: message,
+      },
+      subject: 'Your account has been banned',
     });
   }
-};
+});
+
+events.on(USERS_SUSPENSION_CHANGE, async (user, { until, message }) => {
+  // Check to see if the user was suspended now and is currently suspended.
+  if (
+    user.suspended &&
+    until !== null &&
+    until > Date.now() &&
+    message &&
+    message.length > 0
+  ) {
+    await UsersService.sendEmail(user, {
+      template: 'plain',
+      locals: {
+        body: message,
+      },
+      subject: 'Your account has been suspended',
+    });
+  }
+});
 
 // Extract all the tokenUserNotFound plugins so we can integrate with other
 // providers.
@@ -981,11 +990,11 @@ let tokenUserNotFoundHooks = null;
 
 // Provide a function that can loop over the hooks and search for a provider
 // can crack the token to a user.
-const lookupUserNotFound = async (token) => {
+const lookupUserNotFound = async token => {
   if (!Array.isArray(tokenUserNotFoundHooks)) {
     tokenUserNotFoundHooks = require('./plugins')
       .get('server', 'tokenUserNotFound')
-      .map(({plugin, tokenUserNotFound}) => {
+      .map(({ plugin, tokenUserNotFound }) => {
         debug(`added plugin '${plugin.name}' to tokenUserNotFound hooks`);
 
         return tokenUserNotFound;
diff --git a/services/utils.js b/services/utils.js
index 0247e2889..1eafe86b5 100644
--- a/services/utils.js
+++ b/services/utils.js
@@ -1,4 +1,3 @@
-
 function dotizeRecurse(result, object, path = '') {
   for (const key in object) {
     const newPath = path ? `${path}.${key}` : key;
diff --git a/services/wordlist.js b/services/wordlist.js
index 601f4bc79..04012adcb 100644
--- a/services/wordlist.js
+++ b/services/wordlist.js
@@ -3,18 +3,20 @@ const _ = require('lodash');
 const SettingsService = require('./settings');
 const Errors = require('../errors');
 const memoize = require('lodash/memoize');
-const {escapeRegExp} = require('./regex');
+const { escapeRegExp } = require('./regex');
 
 /**
  * Generate a regulare expression that catches the `phrases`.
  */
 function generateRegExp(phrases) {
   const inner = phrases
-    .map((phrase) =>
-      phrase.split(/\s+/)
-        .map((word) => escapeRegExp(word))
+    .map(phrase =>
+      phrase
+        .split(/\s+/)
+        .map(word => escapeRegExp(word))
         .join('[\\s"?!.]+')
-    ).join('|');
+    )
+    .join('|');
 
   return new RegExp(`(^|[^\\w])(${inner})(?=[^\\w]|$)`, 'iu');
 }
@@ -22,7 +24,9 @@ function generateRegExp(phrases) {
 /**
  * Memoized version of generateRegExp.
  */
-const generateRegExpMemoized = memoize(generateRegExp, (phrases) => phrases.join(','));
+const generateRegExpMemoized = memoize(generateRegExp, phrases =>
+  phrases.join(',')
+);
 
 /**
  * Never matching regexp that exits immediately.
@@ -34,7 +38,6 @@ const neverMatch = /(?!)/;
  * @type {Object}
  */
 class Wordlist {
-
   constructor() {
     this.regexp = {
       banned: neverMatch,
@@ -46,13 +49,10 @@ class Wordlist {
    * Loads wordlists in from the database
    */
   load() {
-    return SettingsService
-      .retrieve()
-      .then((settings) => {
-
-        // Insert the settings wordlist.
-        this.upsert(settings.wordlist);
-      });
+    return SettingsService.retrieve().then(settings => {
+      // Insert the settings wordlist.
+      this.upsert(settings.wordlist);
+    });
   }
 
   /**
@@ -60,17 +60,17 @@ class Wordlist {
    * @param  {Array} list list of words to be set to the wordlist
    */
   upsert(lists) {
-
     // Add the words to this array, but also lowercase the words so that an
     // easy comparison can take place.
-    ['banned', 'suspect'].forEach((k) => {
+    ['banned', 'suspect'].forEach(k => {
       if (!(k in lists)) {
         return;
       }
 
-      this.regexp[k] = lists[k] && lists[k].length > 0
-        ? generateRegExpMemoized(lists[k])
-        : neverMatch;
+      this.regexp[k] =
+        lists[k] && lists[k].length > 0
+          ? generateRegExpMemoized(lists[k])
+          : neverMatch;
 
       debug(`Added ${lists[k].length} words to the ${k} wordlist.`);
     });
@@ -86,14 +86,15 @@ class Wordlist {
 
     // If the field doesn't exist in the body, then it can't be profane!
     if (!phrase) {
-
       // Return that there wasn't a profane word here.
       return errors;
     }
 
     // Check if the field contains a banned word.
     if (this.regexp.banned.test(phrase)) {
-      debug(`the field "${fieldName}" contained a phrase "${phrase}" which contained a banned word/phrase`);
+      debug(
+        `the field "${fieldName}" contained a phrase "${phrase}" which contained a banned word/phrase`
+      );
 
       errors.banned = Errors.ErrContainsProfanity;
 
@@ -104,7 +105,9 @@ class Wordlist {
 
     // Check if the field contains a suspected word.
     if (this.regexp.suspect.test(phrase)) {
-      debug(`the field "${fieldName}" contained a phrase "${phrase}" which contained a suspected word/phrase`);
+      debug(
+        `the field "${fieldName}" contained a phrase "${phrase}" which contained a suspected word/phrase`
+      );
 
       errors.suspect = Errors.ErrContainsProfanity;
 
@@ -120,7 +123,6 @@ class Wordlist {
    * Perform the filtering based on the loaded wordlists.
    */
   filter(body, ...fields) {
-
     // Start with the sensible default that the content does not contain
     // profanity.
     let errors = {};
@@ -133,7 +135,6 @@ class Wordlist {
 
       // If the field doesn't exist in the body, then it can't be profane!
       if (!phrase) {
-
         // Return that there wasn't a profane word here.
         continue;
       }
@@ -142,7 +143,6 @@ class Wordlist {
 
       // Check if the field contains a banned word.
       if (errors.banned) {
-
         // Stop looping through the fields now, we discovered the worst possible
         // situation (a banned word).
         break;
@@ -150,7 +150,6 @@ class Wordlist {
 
       // Check if the field contains a banned word.
       if (errors.suspect) {
-
         // Continue looping through the fields now, we discovered a possible bad
         // word (suspect).
         continue;
@@ -166,13 +165,11 @@ class Wordlist {
   static usernameCheck(username) {
     const wl = new Wordlist();
 
-    return wl
-      .load()
-      .then(() => {
-        if (wl.regexp.banned.test(username)) {
-          return Errors.ErrContainsProfanity;
-        }
-      });
+    return wl.load().then(() => {
+      if (wl.regexp.banned.test(username)) {
+        return Errors.ErrContainsProfanity;
+      }
+    });
   }
 
   /**
@@ -185,19 +182,16 @@ class Wordlist {
    */
   static filter(...fields) {
     return async (req, res, next) => {
-
       // Create a new instance of the Wordlist.
       const wl = new Wordlist();
 
       try {
-
         await wl.load();
 
         // Perform a filtering operation using the new instance of the
         // Wordlist.
         req.wordlist = wl.filter(req.body, ...fields);
-
-      } catch(err) {
+      } catch (err) {
         return next(err);
       }
 
diff --git a/test/.eslintrc.json b/test/.eslintrc.json
index 1e11eecb6..027872c7d 100644
--- a/test/.eslintrc.json
+++ b/test/.eslintrc.json
@@ -1,12 +1,12 @@
 {
-    "env": {
-      "mocha": true
-    },
-    "plugins": [
-      "mocha"
-    ],
-    "extends": "../.eslintrc.json",
-    "rules": {
-        "mocha/no-exclusive-tests": "warn"
-    }
+  "env": {
+    "mocha": true
+  },
+  "plugins": [
+    "mocha"
+  ],
+  "extends": "../.eslintrc.json",
+  "rules": {
+      "mocha/no-exclusive-tests": "warn"
+  }
 }
diff --git a/test/client/setupJest.js b/test/client/setupJest.js
index 0f985fc68..fdfd47107 100644
--- a/test/client/setupJest.js
+++ b/test/client/setupJest.js
@@ -1,7 +1,7 @@
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-15';
 
-Enzyme.configure({adapter: new Adapter()});
+Enzyme.configure({ adapter: new Adapter() });
 
 // Storage Mock
 
@@ -27,7 +27,7 @@ function storageMock() {
     key: function(i) {
       let keys = Object.keys(storage);
       return keys[i] || null;
-    }
+    },
   };
 }
 
diff --git a/test/e2e/globals.js b/test/e2e/globals.js
index 09b297a24..56bcd3868 100644
--- a/test/e2e/globals.js
+++ b/test/e2e/globals.js
@@ -1,13 +1,13 @@
 const mongoose = require('../../services/mongoose');
-const {shutdown} = require('../../bin/util');
+const { shutdown } = require('../../bin/util');
 
 module.exports = {
-  before: async (done) => {
+  before: async done => {
     console.log('Dropping test database');
     await mongoose.connection.dropDatabase();
     done();
   },
-  after: (done) => {
+  after: done => {
     shutdown();
     done();
   },
@@ -24,8 +24,8 @@ module.exports = {
       password: 'testtest',
     },
     comment: {
-      body: 'This is a test comment'
+      body: 'This is a test comment',
     },
     organizationName: 'Coral',
-  }
+  },
 };
diff --git a/test/e2e/page_objects/admin.js b/test/e2e/page_objects/admin.js
index c76a45d9e..218afe425 100644
--- a/test/e2e/page_objects/admin.js
+++ b/test/e2e/page_objects/admin.js
@@ -1,51 +1,41 @@
 module.exports = {
-  commands: [{
-    url: function() {
-      return `${this.api.launchUrl}/admin`;
+  commands: [
+    {
+      url: function() {
+        return `${this.api.launchUrl}/admin`;
+      },
+      ready() {
+        return this.waitForElementVisible('body');
+      },
+      openDrawer() {
+        this.waitForElementVisible('@drawerButton').click('@drawerButton');
+        this.expect.section('@drawer').to.be.visible;
+        return this.section.drawer;
+      },
+      goToModerate() {
+        this.click('@moderateNav').expect.section('@moderate').to.be.visible;
+        return this.section.moderate;
+      },
+      goToStories() {
+        this.click('@storiesNav').expect.section('@stories').to.be.visible;
+        return this.section.stories;
+      },
+      goToCommunity() {
+        this.click('@communityNav').expect.section('@community').to.be.visible;
+        return this.section.community;
+      },
+      logout() {
+        this.waitForElementVisible('@settingsButton')
+          .click('@settingsButton')
+          .waitForElementVisible('@signOutButton')
+          .click('@signOutButton');
+      },
+      navigateAndLogin(user) {
+        this.navigate().expect.section('@login').to.be.visible;
+        return this.section.login.login(user);
+      },
     },
-    ready() {
-      return this
-        .waitForElementVisible('body');
-    },
-    openDrawer() {
-      this
-        .waitForElementVisible('@drawerButton')
-        .click('@drawerButton');
-      this.expect.section('@drawer').to.be.visible;
-      return this.section.drawer;
-    },
-    goToModerate() {
-      this
-        .click('@moderateNav')
-        .expect.section('@moderate').to.be.visible;
-      return this.section.moderate;
-    },
-    goToStories() {
-      this
-        .click('@storiesNav')
-        .expect.section('@stories').to.be.visible;
-      return this.section.stories;
-    },
-    goToCommunity() {
-      this
-        .click('@communityNav')
-        .expect.section('@community').to.be.visible;
-      return this.section.community;
-    },
-    logout() {
-      this
-        .waitForElementVisible('@settingsButton')
-        .click('@settingsButton')
-        .waitForElementVisible('@signOutButton')
-        .click('@signOutButton');
-    },
-    navigateAndLogin(user) {
-      this
-        .navigate()
-        .expect.section('@login').to.be.visible;
-      return this.section.login.login(user);
-    },
-  }],
+  ],
   elements: {
     drawerButton: '.mdl-layout__drawer-button',
     drawerOverlay: 'div.mdl-layout__obfuscator.is-visible',
@@ -54,51 +44,61 @@ module.exports = {
     moderateNav: '.talk-admin-nav-moderate',
     settingsButton: '.talk-admin-header-settings-button',
     signOutButton: '.talk-admin-header-sign-out',
-    suspendUserDialog: '.talk-admin-suspend-user-dialog',
-    suspendUserConfirmButton: '.talk-admin-suspend-user-dialog-confirm',
-    supendUserSendButton: '.talk-admin-suspend-user-dialog-send',
-    usernameDialog: '.talk-reject-username-dialog',
-    usernameDialogButtons: '.talk-reject-username-dialog-buttons',
-    usernameDialogSuspend: '.talk-reject-username-dialog-button-k',
-    usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message',
     toast: '.toastify',
     toastClose: '.toastify__close',
   },
   sections: {
+    suspendUserDialog: {
+      selector: '.talk-admin-suspend-user-dialog',
+      elements: {
+        step0: '.talk-admin-suspend-user-dialog-step-0',
+        step1: '.talk-admin-suspend-user-dialog-step-1',
+        confirmButton: '.talk-admin-suspend-user-dialog-confirm',
+        sendButton: '.talk-admin-suspend-user-dialog-send',
+      },
+    },
+    usernameDialog: {
+      selector: '.talk-admin-reject-username-dialog',
+      elements: {
+        step0: '.talk-admin-reject-username-dialog-step-0',
+        step1: '.talk-admin-reject-username-dialog-step-1',
+        buttons: '.talk-admin-reject-username-dialog-buttons',
+        suspend: '.talk-admin-reject-username-dialog-button-k',
+        suspensionMessage:
+          '.talk-admin-reject-username-dialog-suspension-message',
+      },
+    },
     moderate: {
       selector: '.talk-admin-moderation-container',
       elements: {
         comment: '.talk-admin-moderate-comment',
-        commentActionMenu: '.talk-admin-moderate-comment-actions-menu',
-        actionItemSuspendUser: '.action-menu-item#suspendUser',
-        actionMenuButton: '.talk-admin-moderate-comment-actions-menu #actions-dropdown-0'
-      }
+        commentUsername: '.talk-admin-moderate-comment-username',
+      },
     },
     stories: {
       selector: '.talk-admin-stories',
     },
     community: {
       selector: '.talk-admin-community',
-      commands: [{
-        url: function() {
-          return `${this.api.launchUrl}/admin/community`;
+      commands: [
+        {
+          url: function() {
+            return `${this.api.launchUrl}/admin/community`;
+          },
+          ready() {
+            return this.waitForElementVisible('body');
+          },
+          goToPeople() {
+            this.click('@peopleNav').expect.section('@people').to.be.visible;
+            return this.section.people;
+          },
         },
-        ready() {
-          return this
-            .waitForElementVisible('body');
-        },
-        goToPeople() {
-          this
-            .click('@peopleNav')
-            .expect.section('@people').to.be.visible;
-          return this.section.people;
-        },
-      }],
+      ],
       elements: {
         peopleNav: '.talk-admin-nav-people',
         flaggedAccountsNav: '.talk-admin-nav-flagged-accounts',
         flaggedAccountsContainer: '.talk-adnin-community-flagged-accounts',
-        flaggedUser:'.talk-admin-community-flagged-user',
+        flaggedUser: '.talk-admin-community-flagged-user',
         flaggedUserApproveButton: '.talk-admin-flagged-user-approve-button',
         flaggedUserRejectButton: '.talk-admin-flagged-user-reject-button',
       },
@@ -109,67 +109,88 @@ module.exports = {
             firstRow: '.talk-admin-community-people-row:first-child',
             dropdownStatus: '.talk-admin-community-people-dd-status',
             dropdownRole: '.talk-admin-community-people-dd-role',
-            dropdownStatusActive: '.talk-admin-community-people-dd-status .dd-list-active',
-            optionActive: '.dd-option#ACTIVE',
-            optionBanned: '.dd-option#BANNED',
-          }
-        }
-      }
+            dropdownStatusActive:
+              '.talk-admin-community-people-dd-status .is-upgraded',
+            optionSuspendUser: '.action-menu-item#suspendUser',
+            optionBanUser: '.action-menu-item#banUser',
+            optionRemoveBan: '.action-menu-item#removeBan',
+            optionRemoveSuspension: '.action-menu-item#removeSuspension',
+          },
+        },
+      },
+    },
+    userDetailDrawer: {
+      selector: '.talk-admin-user-detail-drawer',
+      elements: {
+        closeButton: '.talk-admin-user-detail-drawer-close-button',
+        tabBar: '.talk-admin-user-detail-tab-bar',
+        allTab: '.talk-admin-user-detail-all-tab',
+        rejectedTab: '.talk-admin-user-detail-rejected-tab',
+        historyTab: '.talk-admin-user-detail-history-tab',
+        historyPane: '.talk-admin-user-detail-history-tab-pane',
+        accountHistory: '.talk-admin-account-history',
+        accountHistoryRowStatus: '.talk-admin-account-history-row-status',
+        actionsMenu: '.talk-admin-user-detail-actions-button',
+        actionItemSuspendUser: '.action-menu-item#suspendUser',
+        actionMenuButton:
+          '.talk-admin-user-detail-actions-menu #actions-dropdown-0',
+      },
     },
     drawer: {
       selector: '.talk-admin-drawer-nav',
-      commands: [{
-        goToStories() {
-          this
-            .click('@storiesButton');
-          this.parent.expect.section('@stories').to.be.visible;
-          this.close();
-          return this.parent.section.stories;
-        },
-        goToCommunity() {
-          this
-            .click('@communityButton');
-          this.parent.expect.section('@community').to.be.visible;
-          this.close();
-          return this.parent.section.stories;
-        },
-        close() {
-          this.parent
-            .click('@drawerOverlay')
-            .waitForElementNotPresent('@drawerOverlay');
+      commands: [
+        {
+          goToStories() {
+            this.click('@storiesButton');
+            this.parent.expect.section('@stories').to.be.visible;
+            this.close();
+            return this.parent.section.stories;
+          },
+          goToCommunity() {
+            this.click('@communityButton');
+            this.parent.expect.section('@community').to.be.visible;
+            this.close();
+            return this.parent.section.stories;
+          },
+          close() {
+            this.parent
+              .click('@drawerOverlay')
+              .waitForElementNotPresent('@drawerOverlay');
 
-          // Wait a bit to let animations terminate cleanly.
-          this.api.pause(200);
+            // Wait a bit to let animations terminate cleanly.
+            this.api.pause(200);
 
-          return this.parent;
+            return this.parent;
+          },
         },
-      }],
+      ],
       elements: {
-        'storiesButton': '.talk-admin-drawer-nav .talk-admin-nav-stories',
-        'communityButton': '.talk-admin-drawer-nav .talk-admin-nav-community',
+        storiesButton: '.talk-admin-drawer-nav .talk-admin-nav-stories',
+        communityButton: '.talk-admin-drawer-nav .talk-admin-nav-community',
       },
     },
     login: {
-      commands: [{
-        login(user) {
-          this
-            .waitForElementVisible('@signInForm')
-            .setValue('@emailInput', user.email)
-            .setValue('@passwordInput', user.password)
-            .waitForElementVisible('@signInButton')
-            .click('@signInButton');
-          const adminPage = this.api.page.admin();
-          adminPage.expect.section('@moderate').to.be.visible;
-          return adminPage.section.moderate;
+      commands: [
+        {
+          login(user) {
+            this.waitForElementVisible('@signInForm')
+              .setValue('@emailInput', user.email)
+              .setValue('@passwordInput', user.password)
+              .waitForElementVisible('@signInButton')
+              .click('@signInButton');
+            const adminPage = this.api.page.admin();
+            adminPage.expect.section('@moderate').to.be.visible;
+            return adminPage.section.moderate;
+          },
         },
-      }],
+      ],
       selector: '.talk-admin-login',
       elements: {
-        'signInForm': '.talk-admin-login-sign-in',
-        'emailInput': '.talk-admin-login-sign-in #email',
-        'passwordInput': '.talk-admin-login-sign-in #password',
-        'signInButton': '.talk-admin-login-sign-in-button',
-      }
+        signInForm: '.talk-admin-login-sign-in',
+        emailInput: '.talk-admin-login-sign-in #email',
+        passwordInput: '.talk-admin-login-sign-in #password',
+        signInButton: '.talk-admin-login-sign-in-button',
+      },
     },
   },
 };
diff --git a/test/e2e/page_objects/embedStream.js b/test/e2e/page_objects/embedStream.js
index 0a31745e4..c6aaff5e4 100644
--- a/test/e2e/page_objects/embedStream.js
+++ b/test/e2e/page_objects/embedStream.js
@@ -2,39 +2,47 @@ const iframeId = 'coralStreamEmbed_iframe';
 const SortedWindowHandler = require('../utils/SortedWindowHandler');
 
 module.exports = {
-  commands: [{
-    ready: function() {
-      this.switchToIframe();
-      this.expect.section('@comments').to.be.visible;
-      return this.section.comments;
-    },
-    goToProfileSection: function() {
-      this.waitForElementVisible('@profileTabButton');
-      this.click('@profileTabButton');
-      this.expect.section('@profile').to.be.visible;
-      return this.section.profile;
-    },
-    goToCommentsSection: function() {
-      this.waitForElementVisible('@commentsTabButton');
-      this.click('@commentsTabButton');
-      this.expect.section('@comments').to.be.visible;
-      return this.section.comments;
-    },
-    navigateToAsset: function(asset) {
-      this.api.url(`${this.api.launchUrl}/assets/title/${asset}`);
-      return this;
-    },
-    switchToIframe: function() {
-      this.waitForElementVisible('@iframe');
+  commands: [
+    {
+      ready: function() {
+        this.switchToIframe();
+        this.expect.section('@comments').to.be.visible;
+        return this.section.comments;
+      },
+      goToConfigSection: function() {
+        this.waitForElementVisible('@configTabButton');
+        this.click('@configTabButton');
+        this.expect.section('@config').to.be.visible;
+        return this.section.config;
+      },
+      goToProfileSection: function() {
+        this.waitForElementVisible('@profileTabButton');
+        this.click('@profileTabButton');
+        this.expect.section('@profile').to.be.visible;
+        return this.section.profile;
+      },
+      goToCommentsSection: function() {
+        this.waitForElementVisible('@commentsTabButton');
+        this.click('@commentsTabButton');
+        this.expect.section('@comments').to.be.visible;
+        return this.section.comments;
+      },
+      navigateToAsset: function(asset) {
+        this.api.url(`${this.api.launchUrl}/assets/title/${asset}`);
+        return this;
+      },
+      switchToIframe: function() {
+        this.waitForElementVisible('@iframe');
 
-      // Pause a bit to let iframe initialize in the hope that it'll
-      // fix https://www.browserstack.com/automate/builds/96419cf46e3d6376a36ae6d3f90934112df1ed91/sessions/224f1a1566c1c8c7859e2e76ece51862200f0173#automate_button
-      this.api.pause(1000);
+        // Pause a bit to let iframe initialize in the hope that it'll
+        // fix https://www.browserstack.com/automate/builds/96419cf46e3d6376a36ae6d3f90934112df1ed91/sessions/224f1a1566c1c8c7859e2e76ece51862200f0173#automate_button
+        this.api.pause(1000);
 
-      this.api.frame(iframeId);
-      return this;
+        this.api.frame(iframeId);
+        return this;
+      },
     },
-  }],
+  ],
   url: function() {
     return this.api.launchUrl;
   },
@@ -42,50 +50,49 @@ module.exports = {
     iframe: `#${iframeId}`,
     commentsTabButton: '.talk-embed-stream-comments-tab > button',
     profileTabButton: '.talk-embed-stream-profile-tab > button',
+    configTabButton: '.talk-embed-stream-config-tab > button',
     banDialog: '.talk-ban-user-dialog',
     banDialogConfirmButton: '.talk-ban-user-dialog-button-confirm',
   },
   sections: {
     comments: {
-      commands: [{
-        openLoginPopup(callback) {
-          const windowHandler = new SortedWindowHandler(this.api);
+      commands: [
+        {
+          openLoginPopup(callback) {
+            const windowHandler = new SortedWindowHandler(this.api);
 
-          this
-            .waitForElementVisible('@signInButton')
-            .click('@signInButton');
+            this.waitForElementVisible('@signInButton').click('@signInButton');
 
-          // Wait for window to be created
-          // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/17b1a79682bef2498cb0be86eac317a08c976b0a#automate_button
-          this.api.pause(200);
+            // Wait for window to be created
+            // https://www.browserstack.com/automate/builds/1ceccf4efb4683b7feb890f45a32b5922b40ed3f/sessions/17b1a79682bef2498cb0be86eac317a08c976b0a#automate_button
+            this.api.pause(200);
 
-          // Focusing on the Login PopUp
-          windowHandler.windowHandles((handles) => {
-            this.api.switchWindow(handles[1]);
+            // Focusing on the Login PopUp
+            windowHandler.windowHandles(handles => {
+              this.api.switchWindow(handles[1]);
 
-            const popup = this.api.page.popup().ready();
-            callback(popup);
+              const popup = this.api.page.popup().ready();
+              callback(popup);
 
-            // Focus on the Embed Window.
-            windowHandler.pop();
+              // Focus on the Embed Window.
+              windowHandler.pop();
 
-            // For some reasons firefox does not automatically load auth after login.
-            // https://www.browserstack.com/automate/builds/37650cb4e66c6edce0ba0800a1c1b7e7f74bf991/sessions/7a4e9da69b0f9ecdf8b7fa9150639e47b1532cb0#automate_button
-            if (this.api.capabilities.browserName === 'firefox') {
-              this.parent.navigate().ready();
-            } else {
-              this.parent.switchToIframe();
-            }
-          });
+              // For some reasons firefox does not automatically load auth after login.
+              // https://www.browserstack.com/automate/builds/37650cb4e66c6edce0ba0800a1c1b7e7f74bf991/sessions/7a4e9da69b0f9ecdf8b7fa9150639e47b1532cb0#automate_button
+              if (this.api.capabilities.browserName === 'firefox') {
+                this.parent.navigate().ready();
+              } else {
+                this.parent.switchToIframe();
+              }
+            });
 
-          return this;
+            return this;
+          },
+          logout() {
+            this.waitForElementVisible('@logoutButton').click('@logoutButton');
+          },
         },
-        logout() {
-          this
-            .waitForElementVisible('@logoutButton')
-            .click('@logoutButton');
-        },
-      }],
+      ],
       selector: '.talk-embed-stream-comments-tab-pane',
       elements: {
         logoutButton: '.talk-stream-userbox-logout',
@@ -93,24 +100,30 @@ module.exports = {
         commentBoxTextarea: '#commentText',
         commentBoxPostButton: '.talk-plugin-commentbox-button',
         firstComment: '.talk-stream-comment.talk-stream-comment-level-0',
-        firstCommentContent: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-content',
-        flagButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-plugin-flags-button',
-        respectButton: '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-footer .talk-plugin-respect-button',
+        firstCommentContent:
+          '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-content',
+        flagButton:
+          '.talk-stream-comment.talk-stream-comment-level-0 .talk-plugin-flags-button',
+        replyButton:
+          '.talk-stream-comment.talk-stream-comment-level-0 .talk-plugin-replies-reply-button',
+        respectButton:
+          '.talk-stream-comment.talk-stream-comment-level-0 .talk-stream-comment-footer .talk-plugin-respect-button',
         restrictedMessageBox: '.talk-restricted-message-box',
-        suspendedAccountInput: '.talk-suspended-account-username-input',
-        suspendedAccountSubmitButton: '.talk-suspended-account-submit-button',
+        changeUsernameInput: '.talk-change-username-username-input',
+        changeUsernameSubmitButton: '.talk-change-username-submit-button',
       },
       sections: {
         flag: {
           selector: '.talk-plugin-flags-popup',
           elements: {
-            offensiveUsernameRadio: '.talk-plugin-flags-popup-radio#USERNAME_OFFENSIVE',
+            offensiveUsernameRadio:
+              '.talk-plugin-flags-popup-radio#USERNAME_OFFENSIVE',
             flagUsernameRadio: '.talk-plugin-flags-popup-radio#USERS',
             flagCommentRadio: '.talk-plugin-flags-popup-radio#COMMENTS',
             continueButton: '.talk-plugin-flags-popup-button',
             popUpText: '.talk-plugin-flags-popup-text',
             spamCommentRadio: '.talk-plugin-flags-popup-radio#COMMENT_SPAM',
-          }
+          },
         },
         mod: {
           selector: '.talk-plugin-moderation-actions',
@@ -127,10 +140,36 @@ module.exports = {
       elements: {
         notLoggedIn: '.talk-embed-stream-not-logged-in',
         myCommentHistory: '.talk-my-profile-comment-history',
-        myCommentHistoryReactions: '.talk-my-profile-comment-history .comment-summary .comment-summary-reactions',
-        myCommentHistoryReactionCount: '.talk-my-profile-comment-history .comment-summary .comment-summary-reactions .comment-summary-reaction-count',
-        myCommentHistoryComment: '.talk-my-profile-comment-history .my-comment-body',
+        myCommentHistoryReactions:
+          '.talk-my-profile-comment-history .comment-summary .comment-summary-reactions',
+        myCommentHistoryReactionCount:
+          '.talk-my-profile-comment-history .comment-summary .comment-summary-reactions .comment-summary-reaction-count',
+        myCommentHistoryComment:
+          '.talk-my-profile-comment-history .my-comment-body',
       },
     },
+    config: {
+      selector: '.talk-embed-stream-config-tab-pane',
+      elements: {
+        openStream: '.talk-config-close-comments-open-button',
+        closeStream: '.talk-config-close-comments-close-button',
+      },
+      commands: [
+        {
+          openStream: function() {
+            this.waitForElementVisible('@openStream');
+            this.click('@openStream');
+            this.waitForElementVisible('@closeStream');
+            return this.section.config;
+          },
+          closeStream: function() {
+            this.waitForElementVisible('@closeStream');
+            this.click('@closeStream');
+            this.waitForElementVisible('@openStream');
+            return this.section.config;
+          },
+        },
+      ],
+    },
   },
 };
diff --git a/test/e2e/page_objects/install.js b/test/e2e/page_objects/install.js
index cb2c27abe..26b024993 100644
--- a/test/e2e/page_objects/install.js
+++ b/test/e2e/page_objects/install.js
@@ -1,13 +1,14 @@
 module.exports = {
-  commands: [{
-    url: function() {
-      return `${this.api.launchUrl}/admin/install`;
+  commands: [
+    {
+      url: function() {
+        return `${this.api.launchUrl}/admin/install`;
+      },
+      ready() {
+        return this.waitForElementVisible('body');
+      },
     },
-    ready() {
-      return this
-        .waitForElementVisible('body');
-    }
-  }],
+  ],
   sections: {
     step1: {
       selector: '.talk-install-step-1',
diff --git a/test/e2e/page_objects/popup.js b/test/e2e/page_objects/popup.js
index 4d2aee7b6..824546e5b 100644
--- a/test/e2e/page_objects/popup.js
+++ b/test/e2e/page_objects/popup.js
@@ -1,32 +1,31 @@
 module.exports = {
-  commands: [{
-    ready() {
-      return this
-        .waitForElementVisible('body');
+  commands: [
+    {
+      ready() {
+        return this.waitForElementVisible('body');
+      },
+      login(user) {
+        return this.setValue('@emailInput', user.email)
+          .setValue('@passwordInput', user.password)
+          .waitForElementVisible('@signIn')
+          .waitForElementVisible('@loginButton')
+          .click('@loginButton');
+      },
+      register(user) {
+        return this.waitForElementVisible('@registerButton')
+          .click('@registerButton')
+          .setValue('@emailInput', user.email)
+          .setValue('@usernameInput', user.username)
+          .setValue('@passwordInput', user.password)
+          .setValue('@confirmPasswordInput', user.password)
+          .waitForElementVisible('@signUpButton')
+          .click('@signUpButton')
+          .waitForElementVisible('@signIn')
+          .waitForElementVisible('@loginButton')
+          .click('@loginButton');
+      },
     },
-    login(user) {
-      return this
-        .setValue('@emailInput', user.email)
-        .setValue('@passwordInput', user.password)
-        .waitForElementVisible('@signIn')
-        .waitForElementVisible('@loginButton')
-        .click('@loginButton');
-    },
-    register(user) {
-      return this
-        .waitForElementVisible('@registerButton')
-        .click('@registerButton')
-        .setValue('@emailInput', user.email)
-        .setValue('@usernameInput', user.username)
-        .setValue('@passwordInput', user.password)
-        .setValue('@confirmPasswordInput', user.password)
-        .waitForElementVisible('@signUpButton')
-        .click('@signUpButton')
-        .waitForElementVisible('@signIn')
-        .waitForElementVisible('@loginButton')
-        .click('@loginButton');
-    },
-  }],
+  ],
   elements: {
     registerButton: '#coralRegister',
     signInButton: '#coralSignInButton',
@@ -36,6 +35,6 @@ module.exports = {
     confirmPasswordInput: '#confirmPassword',
     signUpButton: '#coralSignUpButton',
     signIn: '.coral-sign-in',
-    loginButton: '#coralLogInButton'
+    loginButton: '#coralLogInButton',
   },
 };
diff --git a/test/e2e/specs/.eslintrc.json b/test/e2e/specs/.eslintrc.json
index ba7451903..94e0d2cd0 100644
--- a/test/e2e/specs/.eslintrc.json
+++ b/test/e2e/specs/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": "@coralproject/eslint-config-talk",
+  "extends": "../../.eslintrc.json",
   "rules": {
     "indent": "off"
   }
diff --git a/test/e2e/specs/01_install.js b/test/e2e/specs/01_install.js
index e0734a2a6..a8a88566c 100644
--- a/test/e2e/specs/01_install.js
+++ b/test/e2e/specs/01_install.js
@@ -1,7 +1,7 @@
 module.exports = {
   '@tags': ['install'],
 
-  before: (client) => {
+  before: client => {
     client.setWindowPosition(0, 0);
     client.resizeWindow(1600, 1200);
   },
@@ -13,34 +13,28 @@ module.exports = {
     done();
   },
 
-  after: (client) => {
+  after: client => {
     client.end();
   },
 
-  'User goes to install': (client) => {
+  'User goes to install': client => {
     const install = client.page.install();
 
-    install
-      .navigate()
-      .expect.section('@step1').to.be.visible;
-
+    install.navigate().expect.section('@step1').to.be.visible;
   },
-  'User clicks get started button': (client) => {
+  'User clicks get started button': client => {
     const step1 = client.page.install().section.step1;
 
-    step1
-      .waitForElementVisible('@getStartedButton')
-      .click('@getStartedButton');
+    step1.waitForElementVisible('@getStartedButton').click('@getStartedButton');
   },
-  'User should see step 2 - Add Organization Name': (client) => {
+  'User should see step 2 - Add Organization Name': client => {
     const install = client.page.install();
 
-    install
-      .expect.section('@step2').to.be.visible;
+    install.expect.section('@step2').to.be.visible;
   },
-  'User fills step 2': (client) => {
+  'User fills step 2': client => {
     const step2 = client.page.install().section.step2;
-    const {testData} = client.globals;
+    const { testData } = client.globals;
 
     step2
       .waitForElementVisible('@organizationNameInput')
@@ -48,15 +42,14 @@ module.exports = {
       .waitForElementVisible('@saveButton')
       .click('@saveButton');
   },
-  'User should see step 3 - Create your account': (client) => {
+  'User should see step 3 - Create your account': client => {
     const install = client.page.install();
 
-    install
-      .expect.section('@step3').to.be.visible;
+    install.expect.section('@step3').to.be.visible;
   },
-  'User fills step 3': (client) => {
+  'User fills step 3': client => {
     const step3 = client.page.install().section.step3;
-    const {testData: {admin}} = client.globals;
+    const { testData: { admin } } = client.globals;
 
     step3
       .setValue('@emailInput', admin.email)
@@ -66,13 +59,12 @@ module.exports = {
       .waitForElementVisible('@saveButton')
       .click('@saveButton');
   },
-  'User should see step 4 - Domain Whitelist': (client) => {
+  'User should see step 4 - Domain Whitelist': client => {
     const install = client.page.install();
 
-    install
-      .expect.section('@step4').to.be.visible;
+    install.expect.section('@step4').to.be.visible;
   },
-  'User fills step 4': (client) => {
+  'User fills step 4': client => {
     const step4 = client.page.install().section.step4;
 
     step4
@@ -81,14 +73,11 @@ module.exports = {
 
     client.keys(client.Keys.ENTER);
 
-    step4
-      .waitForElementVisible('@saveButton')
-      .click('@saveButton');
+    step4.waitForElementVisible('@saveButton').click('@saveButton');
   },
-  'User should see step 5 - Final Step': (client) => {
+  'User should see step 5 - Final Step': client => {
     const install = client.page.install();
 
-    install
-      .expect.section('@step5').to.be.visible;
+    install.expect.section('@step5').to.be.visible;
   },
 };
diff --git a/test/e2e/specs/02_admin.js b/test/e2e/specs/02_admin.js
index d04f918bd..07f5b574c 100644
--- a/test/e2e/specs/02_admin.js
+++ b/test/e2e/specs/02_admin.js
@@ -1,7 +1,7 @@
 module.exports = {
   '@tags': ['admin', 'login'],
 
-  before: (client) => {
+  before: client => {
     client.setWindowPosition(0, 0);
     client.resizeWindow(1024, 800);
   },
@@ -13,30 +13,26 @@ module.exports = {
     done();
   },
 
-  after: (client) => {
+  after: client => {
     client.end();
   },
 
-  'Admin logs in': (client) => {
+  'Admin logs in': client => {
     const adminPage = client.page.admin();
-    const {testData: {admin}} = client.globals;
+    const { testData: { admin } } = client.globals;
 
     adminPage.navigateAndLogin(admin);
   },
 
-  'Admin goes to Stories': (client) => {
+  'Admin goes to Stories': client => {
     const adminPage = client.page.admin();
 
-    adminPage
-      .openDrawer()
-        .goToStories();
+    adminPage.openDrawer().goToStories();
   },
 
-  'Admin goes to Community': (client) => {
+  'Admin goes to Community': client => {
     const adminPage = client.page.admin();
 
-    adminPage
-      .openDrawer()
-        .goToCommunity();
+    adminPage.openDrawer().goToCommunity();
   },
 };
diff --git a/test/e2e/specs/03_embedStream.js b/test/e2e/specs/03_embedStream.js
index 56f267375..15fb299e4 100644
--- a/test/e2e/specs/03_embedStream.js
+++ b/test/e2e/specs/03_embedStream.js
@@ -1,7 +1,7 @@
 module.exports = {
   '@tags': ['embedStream', 'login'],
 
-  before: (client) => {
+  before: client => {
     client.setWindowPosition(0, 0);
     client.resizeWindow(1600, 1200);
   },
@@ -13,11 +13,11 @@ module.exports = {
     done();
   },
 
-  after: (client) => {
+  after: client => {
     client.end();
   },
 
-  'creates a new asset': (client) => {
+  'creates a new asset': client => {
     const asset = 'newAssetTest';
     const embedStream = client.page.embedStream();
 
@@ -27,24 +27,20 @@ module.exports = {
       .ready();
   },
 
-  'creates an user and user logs in': (client) => {
-    const {testData: {user}} = client.globals;
+  'creates an user and user logs in': client => {
+    const { testData: { user } } = client.globals;
     const embedStream = client.page.embedStream();
 
     // Go back to default asset.
-    const comments =
-      embedStream
-      .navigate()
-      .ready();
+    const comments = embedStream.navigate().ready();
 
-    comments
-      .openLoginPopup((popup) => {
-        popup.register(user);
-      });
+    comments.openLoginPopup(popup => {
+      popup.register(user);
+    });
   },
-  'user posts a comment': (client) => {
+  'user posts a comment': client => {
     const comments = client.page.embedStream().section.comments;
-    const {testData: {comment}} = client.globals;
+    const { testData: { comment } } = client.globals;
 
     comments
       .waitForElementVisible('@commentBoxTextarea')
@@ -52,39 +48,37 @@ module.exports = {
       .waitForElementVisible('@commentBoxPostButton')
       .click('@commentBoxPostButton')
       .waitForElementVisible('@firstCommentContent')
-      .getText('@firstCommentContent', (result) => {
+      .getText('@firstCommentContent', result => {
         comments.assert.equal(result.value, comment.body);
       });
   },
 
-  'signed in user sees comment history': (client) => {
+  'signed in user sees comment history': client => {
     const profile = client.page.embedStream().goToProfileSection();
-    const {testData: {comment}} = client.globals;
+    const { testData: { comment } } = client.globals;
 
     profile
       .waitForElementVisible('@myCommentHistory')
       .waitForElementVisible('@myCommentHistoryComment')
-      .getText('@myCommentHistoryComment', (result) => {
+      .getText('@myCommentHistoryComment', result => {
         profile.assert.equal(result.value, comment.body);
       });
   },
-  'user sees replies and reactions to comments': (client) => {
+  'user sees replies and reactions to comments': client => {
     const profile = client.page.embedStream().section.profile;
 
     profile
       .waitForElementVisible('@myCommentHistory')
       .waitForElementVisible('@myCommentHistoryReactions')
       .waitForElementVisible('@myCommentHistoryReactionCount')
-      .getText('@myCommentHistoryReactionCount', (result) => {
+      .getText('@myCommentHistoryReactionCount', result => {
         profile.assert.equal(result.value, '0');
       });
   },
-  'user goes to the stream and replies and reacts to comment': (client) => {
+  'user goes to the stream and replies and reacts to comment': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.goToCommentsSection();
-    comments
-      .waitForElementVisible('@respectButton')
-      .click('@respectButton');
+    comments.waitForElementVisible('@respectButton').click('@respectButton');
 
     const profile = embedStream.goToProfileSection();
 
@@ -92,22 +86,52 @@ module.exports = {
       .waitForElementVisible('@myCommentHistory')
       .waitForElementVisible('@myCommentHistoryReactions')
       .waitForElementVisible('@myCommentHistoryReactionCount')
-      .getText('@myCommentHistoryReactionCount', (result) => {
+      .getText('@myCommentHistoryReactionCount', result => {
         profile.assert.equal(result.value, '1');
       });
   },
-  'user logs out': (client) => {
+  'user logs out': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.goToCommentsSection();
 
-    comments
-      .logout();
+    comments.logout();
   },
-  'not logged in user clicks my profile tab': (client) => {
+  'not logged in user clicks my profile tab': client => {
     const embedStream = client.page.embedStream();
     const profile = embedStream.goToProfileSection();
 
-    profile
-      .assert.visible('@notLoggedIn');
+    profile.assert.visible('@notLoggedIn');
+  },
+  'admin logs in': client => {
+    const { testData: { admin } } = client.globals;
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .navigate()
+      .ready()
+      .openLoginPopup(popup => popup.login(admin));
+  },
+  "admin closes stream, users won't be able to perform some actions: reply ": client => {
+    const embedStream = client.page.embedStream();
+
+    embedStream
+      .goToCommentsSection()
+      .waitForElementVisible('@firstComment')
+      .waitForElementVisible('@replyButton');
+
+    embedStream.goToConfigSection().closeStream();
+
+    embedStream
+      .goToCommentsSection()
+      .waitForElementVisible('@firstComment')
+      .waitForElementNotPresent('@replyButton');
+
+    embedStream.goToConfigSection().openStream();
+  },
+  'admin logs out': client => {
+    const embedStream = client.page.embedStream();
+    const comments = embedStream.goToCommentsSection();
+
+    comments.logout();
   },
 };
diff --git a/test/e2e/specs/04_userStatus.js b/test/e2e/specs/04_userStatus.js
index 74f7e07b6..b63b051bb 100644
--- a/test/e2e/specs/04_userStatus.js
+++ b/test/e2e/specs/04_userStatus.js
@@ -1,6 +1,5 @@
 module.exports = {
-
-  before: (client) => {
+  before: client => {
     client.setWindowPosition(0, 0);
     client.resizeWindow(1600, 1200);
   },
@@ -12,22 +11,20 @@ module.exports = {
     done();
   },
 
-  after: (client) => {
+  after: client => {
     client.end();
   },
 
-  'admin logs in': (client) => {
+  'admin logs in': client => {
     const adminPage = client.page.admin();
-    const {testData: {admin}} = client.globals;
+    const { testData: { admin } } = client.globals;
 
     adminPage.navigateAndLogin(admin);
   },
-  'admin flags user\'s username as offensive': (client) => {
+  'admin flags users username as offensive': client => {
     const embedStream = client.page.embedStream();
 
-    const comments = embedStream
-      .navigate()
-      .ready();
+    const comments = embedStream.navigate().ready();
 
     comments
       .waitForElementVisible('@firstComment')
@@ -45,7 +42,7 @@ module.exports = {
       .waitForElementVisible('@popUpText')
       .click('@continueButton');
   },
-  'admin goes to Reported Usernames': (client) => {
+  'admin goes to Reported Usernames': client => {
     const adminPage = client.page.admin();
 
     const community = adminPage
@@ -57,48 +54,47 @@ module.exports = {
       .waitForElementVisible('@flaggedAccountsContainer')
       .waitForElementVisible('@flaggedUser');
   },
-  'admin rejects the user flag': (client) => {
+  'admin rejects the user flag': client => {
     const community = client.page.admin().section.community;
 
     community
       .waitForElementVisible('@flaggedUserRejectButton')
       .click('@flaggedUserRejectButton');
   },
-  'admin suspends the user': (client) => {
-    const adminPage = client.page.admin();
+  'admin suspends the user': client => {
     const community = client.page.admin().section.community;
+    const usernameDialog = client.page.admin().section.usernameDialog;
 
-    adminPage
-      .waitForElementVisible('@usernameDialog')
-      .waitForElementVisible('@usernameDialogButtons')
-      .waitForElementVisible('@usernameDialogSuspend')
-      .click('@usernameDialogSuspend')
-      .waitForElementVisible('@usernameDialogSuspensionMessage')
-      .click('@usernameDialogSuspend');
+    usernameDialog
+      .waitForElementVisible('@buttons')
+      .waitForElementVisible('@step0')
+      .waitForElementVisible('@suspend')
+      .click('@suspend')
+      .waitForElementVisible('@step1')
+      .waitForElementVisible('@suspend')
+      .click('@suspend');
 
-    community
-      .waitForElementNotPresent('@flaggedUser');
+    community.waitForElementNotPresent('@flaggedUser');
   },
-  'admin logs out': (client) => {
+  'admin logs out': client => {
     client.page.admin().logout();
   },
-  'user logs in': (client) => {
-    const {testData: {user}} = client.globals;
+  'user logs in': client => {
+    const { testData: { user } } = client.globals;
     const embedStream = client.page.embedStream();
 
     embedStream
       .navigate()
       .ready()
-      .openLoginPopup((popup) => popup.login(user));
+      .openLoginPopup(popup => popup.login(user));
   },
-  'user account is suspended, should see restricted message box': (client) => {
+  'user account is suspended, should see restricted message box': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
 
-    comments
-      .waitForElementVisible('@restrictedMessageBox');
+    comments.waitForElementVisible('@restrictedMessageBox');
   },
-  'user should not be able to comment': (client) => {
+  'user should not be able to comment': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
 
@@ -106,19 +102,19 @@ module.exports = {
       .waitForElementNotPresent('@commentBoxTextarea')
       .waitForElementNotPresent('@commentBoxPostButton');
   },
-  'user picks another username': (client) => {
+  'user picks another username': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
-    const {testData: {user}} = client.globals;
+    const { testData: { user } } = client.globals;
 
     comments
-      .waitForElementVisible('@suspendedAccountInput')
-      .setValue('@suspendedAccountInput', `${user.username}_alternative`)
-      .waitForElementVisible('@suspendedAccountSubmitButton')
-      .click('@suspendedAccountSubmitButton')
-      .waitForElementNotPresent('@suspendedAccountInput');
+      .waitForElementVisible('@changeUsernameInput')
+      .setValue('@changeUsernameInput', `${user.username}_alternative`)
+      .waitForElementVisible('@changeUsernameSubmitButton')
+      .click('@changeUsernameSubmitButton')
+      .waitForElementNotPresent('@changeUsernameInput');
   },
-  'user should be able to comment': (client) => {
+  'user should be able to comment': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
 
diff --git a/test/e2e/specs/05_banUser.js b/test/e2e/specs/05_banUser.js
index 41a0784ae..45ab0c347 100644
--- a/test/e2e/specs/05_banUser.js
+++ b/test/e2e/specs/05_banUser.js
@@ -1,6 +1,5 @@
 module.exports = {
-
-  before: (client) => {
+  before: client => {
     client.setWindowPosition(0, 0);
     client.resizeWindow(1600, 1200);
   },
@@ -12,24 +11,22 @@ module.exports = {
     done();
   },
 
-  after: (client) => {
+  after: client => {
     client.end();
   },
 
-  'admin logs in': (client) => {
+  'admin logs in': client => {
     const adminPage = client.page.admin();
-    const {testData: {admin}} = client.globals;
+    const { testData: { admin } } = client.globals;
 
     adminPage.navigateAndLogin(admin);
   },
-  'navigate to the embed stream': (client) => {
+  'navigate to the embed stream': client => {
     const embedStream = client.page.embedStream();
 
-    embedStream
-      .navigate()
-      .ready();
+    embedStream.navigate().ready();
   },
-  'admin bans user': (client) => {
+  'admin bans user': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
 
@@ -46,76 +43,65 @@ module.exports = {
       .click('@banDialogConfirmButton')
       .waitForElementNotVisible('@banDialog');
   },
-  'admin logs out': (client) => {
+  'admin logs out': client => {
     const comments = client.page.embedStream().section.comments;
 
-    comments
-      .logout();
+    comments.logout();
   },
-  'user logs in': (client) => {
-    const {testData: {user}} = client.globals;
+  'user logs in': client => {
+    const { testData: { user } } = client.globals;
     const comments = client.page.embedStream().section.comments;
 
-    comments
-      .openLoginPopup((popup) => popup.login(user));
+    comments.openLoginPopup(popup => popup.login(user));
   },
-  'user account is banned, should see restricted message box': (client) => {
+  'user account is banned, should see restricted message box': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
 
-    comments
-      .waitForElementVisible('@restrictedMessageBox');
+    comments.waitForElementVisible('@restrictedMessageBox');
   },
-  'user logs out': (client) => {
+  'user logs out': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
 
-    comments
-      .logout();
+    comments.logout();
   },
-  'admin logs in (2)': (client) => {
+  'admin logs in (2)': client => {
     const adminPage = client.page.admin();
-    const {testData: {admin}} = client.globals;
+    const { testData: { admin } } = client.globals;
 
     adminPage.navigateAndLogin(admin);
   },
-  'admin goes to community': (client) => {
+  'admin goes to community': client => {
     const adminPage = client.page.admin();
 
-    adminPage
-      .goToCommunity()
-        .goToPeople();
+    adminPage.goToCommunity().goToPeople();
   },
-  'admin removes ban from user': (client) => {
-    const people = client.page.admin()
-      .section.community
-      .section.people;
+  'admin removes ban from user': client => {
+    const people = client.page.admin().section.community.section.people;
 
     people
       .waitForElementVisible('@firstRow')
       .waitForElementVisible('@dropdownStatus')
       .click('@dropdownStatus')
       .waitForElementVisible('@dropdownStatusActive')
-      .click('@optionActive');
+      .click('@optionRemoveBan');
   },
-  'admin logs out 2': (client) => {
+  'admin logs out 2': client => {
     client.page.admin().logout();
   },
-  'navigate to the embed stream 2': (client) => {
+  'navigate to the embed stream 2': client => {
     const embedStream = client.page.embedStream();
 
-    embedStream
-      .navigate()
-      .ready();
+    embedStream.navigate().ready();
   },
-  'user logs in 2': (client) => {
-    const {testData: {user}} = client.globals;
+  'user logs in 2': client => {
+    const { testData: { user } } = client.globals;
     const comments = client.page.embedStream().section.comments;
 
-    comments
-      .openLoginPopup((popup) => popup.login(user));
+    comments.openLoginPopup(popup => popup.login(user));
   },
-  'user should be able to comment': (client) => {
+  'user should be able to comment': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
 
diff --git a/test/e2e/specs/06_suspendUser.js b/test/e2e/specs/06_suspendUser.js
index 7da11d0dd..0b89c5c01 100644
--- a/test/e2e/specs/06_suspendUser.js
+++ b/test/e2e/specs/06_suspendUser.js
@@ -1,6 +1,5 @@
 module.exports = {
-
-  before: (client) => {
+  before: client => {
     client.setWindowPosition(0, 0);
     client.resizeWindow(1600, 1200);
   },
@@ -12,24 +11,21 @@ module.exports = {
     done();
   },
 
-  after: (client) => {
+  after: client => {
     client.end();
   },
-  'user logs in': (client) => {
-    const {testData: {user}} = client.globals;
+  'user logs in': client => {
+    const { testData: { user } } = client.globals;
     const embedStream = client.page.embedStream();
     const comments = client.page.embedStream().section.comments;
 
-    embedStream
-      .navigate()
-      .ready();
+    embedStream.navigate().ready();
 
-    comments
-      .openLoginPopup((popup) => popup.login(user));
+    comments.openLoginPopup(popup => popup.login(user));
   },
-  'user posts comment': (client) => {
+  'user posts comment': client => {
     const comments = client.page.embedStream().section.comments;
-    const {testData: {comment}} = client.globals;
+    const { testData: { comment } } = client.globals;
 
     comments
       .waitForElementVisible('@commentBoxTextarea')
@@ -37,31 +33,28 @@ module.exports = {
       .waitForElementVisible('@commentBoxPostButton')
       .click('@commentBoxPostButton')
       .waitForElementVisible('@firstCommentContent')
-      .getText('@firstCommentContent', (result) => {
+      .getText('@firstCommentContent', result => {
         comments.assert.equal(result.value, comment.body);
       });
   },
-  'user logs out': (client) => {
+  'user logs out': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
 
-    comments
-      .logout();
+    comments.logout();
   },
-  'admin logs in': (client) => {
+  'admin logs in': client => {
     const adminPage = client.page.admin();
-    const {testData: {admin}} = client.globals;
+    const { testData: { admin } } = client.globals;
 
     adminPage.navigateAndLogin(admin);
   },
-  'navigate to the embed stream': (client) => {
+  'navigate to the embed stream': client => {
     const embedStream = client.page.embedStream();
 
-    embedStream
-      .navigate()
-      .ready();
+    embedStream.navigate().ready();
   },
-  'admin reports comment': (client) => {
+  'admin reports comment': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
 
@@ -81,9 +74,9 @@ module.exports = {
       .waitForElementVisible('@popUpText')
       .click('@continueButton');
   },
-  'admin suspends user': (client) => {
+  'admin suspends user': client => {
     const adminPage = client.page.admin();
-    const moderate = adminPage.section.moderate;
+    const { moderate, userDetailDrawer, suspendUserDialog } = adminPage.section;
 
     adminPage
       .navigate()
@@ -92,48 +85,67 @@ module.exports = {
 
     moderate
       .waitForElementVisible('@comment')
-      .waitForElementVisible('@commentActionMenu')
-      .waitForElementVisible('@actionMenuButton')
+      .waitForElementVisible('@commentUsername')
+      .click('@commentUsername');
+
+    userDetailDrawer
+      .waitForElementVisible('@actionsMenu')
       .click('@actionMenuButton')
       .waitForElementVisible('@actionItemSuspendUser')
       .click('@actionItemSuspendUser');
 
-    adminPage
-      .waitForElementVisible('@suspendUserDialog')
-      .waitForElementVisible('@suspendUserConfirmButton')
-      .click('@suspendUserConfirmButton')
-      .waitForElementVisible('@supendUserSendButton')
-      .click('@supendUserSendButton');
+    suspendUserDialog
+      .waitForElementVisible('@step0')
+      .waitForElementVisible('@confirmButton')
+      .click('@confirmButton')
+      .waitForElementVisible('@step1')
+      .waitForElementVisible('@sendButton')
+      .click('@sendButton');
 
     adminPage
       .waitForElementVisible('@toast')
       .waitForElementVisible('@toastClose')
       .click('@toastClose');
-
   },
-  'admin logs out': (client) => {
+  'admin checks user status and ban and suspension history': client => {
+    const adminPage = client.page.admin();
+    const { moderate, userDetailDrawer } = adminPage.section;
+
+    moderate
+      .waitForElementVisible('@comment')
+      .waitForElementVisible('@commentUsername')
+      .click('@commentUsername');
+
+    userDetailDrawer
+      .waitForElementVisible('@tabBar')
+      .waitForElementVisible('@allTab')
+      .click('@allTab')
+      .waitForElementVisible('@rejectedTab')
+      .click('@rejectedTab')
+      .waitForElementVisible('@historyTab')
+      .click('@historyTab')
+      .waitForElementVisible('@historyPane')
+      .waitForElementVisible('@accountHistory')
+      .click('@closeButton');
+  },
+  'admin logs out': client => {
     const adminPage = client.page.admin();
 
-    adminPage
-      .logout();
+    adminPage.logout();
   },
-  'user logs in (2)': (client) => {
-    const {testData: {user}} = client.globals;
+  'user logs in (2)': client => {
+    const { testData: { user } } = client.globals;
     const embedStream = client.page.embedStream();
     const comments = client.page.embedStream().section.comments;
 
-    embedStream
-      .navigate()
-      .ready();
+    embedStream.navigate().ready();
 
-    comments
-      .openLoginPopup((popup) => popup.login(user));
+    comments.openLoginPopup(popup => popup.login(user));
   },
-  'user account is suspended, should see restricted message box': (client) => {
+  'user account is suspended, should see restricted message box': client => {
     const embedStream = client.page.embedStream();
     const comments = embedStream.section.comments;
 
-    comments
-      .waitForElementVisible('@restrictedMessageBox');
+    comments.waitForElementVisible('@restrictedMessageBox');
   },
 };
diff --git a/test/e2e/utils/SortedWindowHandler.js b/test/e2e/utils/SortedWindowHandler.js
index a23f71506..c6f7ebcc4 100644
--- a/test/e2e/utils/SortedWindowHandler.js
+++ b/test/e2e/utils/SortedWindowHandler.js
@@ -1,4 +1,3 @@
-
 /**
  * SortedWindowHandler assists in making e2e tests more robust by returning
  * deterministic window handles. An instance must be created before new windows
@@ -6,16 +5,17 @@
  * closed.
  */
 class SortedWindowHandler {
-
   /**
    * Constructor, must be called before new windows were created.
    */
   constructor(client) {
     this.client = client;
-    this.client.windowHandles((result) => {
+    this.client.windowHandles(result => {
       this.handles = result.value;
       if (this.handles.length > 2) {
-        throw new Error('SortedWindowHandler must be created before new windows were created.');
+        throw new Error(
+          'SortedWindowHandler must be created before new windows were created.'
+        );
       }
     });
   }
@@ -24,20 +24,25 @@ class SortedWindowHandler {
    * windowHandles will call given `callback` with an array of window handles.
    */
   windowHandles(callback) {
-    this.client.windowHandles((result) => {
-
+    this.client.windowHandles(result => {
       if (result.value.message) {
         throw new Error(result.value.message);
       }
 
-      this.handles = this.handles.filter((handle) => result.value.includes(handle));
-      const remaining = result.value.filter((handle) => !this.handles.includes(handle));
+      this.handles = this.handles.filter(handle =>
+        result.value.includes(handle)
+      );
+      const remaining = result.value.filter(
+        handle => !this.handles.includes(handle)
+      );
 
       if (remaining.length === 1) {
         this.handles.push(remaining[0]);
       }
       if (remaining.length > 1) {
-        throw new Error('Cannot detect new window handle, because more than one windows was created.');
+        throw new Error(
+          'Cannot detect new window handle, because more than one windows was created.'
+        );
       }
       callback(this.handles);
     });
diff --git a/test/helpers/kue.js b/test/helpers/kue.js
index 8bdc9b398..77e783151 100644
--- a/test/helpers/kue.js
+++ b/test/helpers/kue.js
@@ -1,7 +1,6 @@
 const kue = require('../../services/kue');
 
 beforeEach(() => {
-
   // Empty the test tasks before finishing.
   kue.TestQueue.splice(0, kue.TestQueue.length);
 });
diff --git a/test/helpers/mongoose.js b/test/helpers/mongoose.js
index 53c373b60..e84e1d516 100644
--- a/test/helpers/mongoose.js
+++ b/test/helpers/mongoose.js
@@ -13,20 +13,21 @@ before(function(done) {
 });
 
 beforeEach(async () => {
-  await Promise.all(Object.keys(mongoose.connection.collections).map((collection) => {
-    return new Promise((resolve, reject) => {
-      mongoose.connection.collections[collection].remove(function(err) {
-        if (err) {
-          return reject(err);
-        }
+  await Promise.all(
+    Object.keys(mongoose.connection.collections).map(collection => {
+      return new Promise((resolve, reject) => {
+        mongoose.connection.collections[collection].remove(function(err) {
+          if (err) {
+            return reject(err);
+          }
 
-        return resolve();
+          return resolve();
+        });
       });
-    });
-  }));
+    })
+  );
 });
 
-after(function(done) {
+after(async function() {
   mongoose.disconnect();
-  done();
 });
diff --git a/test/helpers/redis.js b/test/helpers/redis.js
index 90e425c4a..d59a86144 100644
--- a/test/helpers/redis.js
+++ b/test/helpers/redis.js
@@ -1,8 +1,5 @@
-const {createClient} = require('../../services/redis');
+const { createClient } = require('../../services/redis');
 const cache = require('../../services/cache');
 const client = createClient();
 
-beforeEach(() => Promise.all([
-  client.flushdb(),
-  cache.init(),
-]));
+beforeEach(() => Promise.all([client.flushdb(), cache.init()]));
diff --git a/test/helpers/rejection.js b/test/helpers/rejection.js
new file mode 100644
index 000000000..044d893f0
--- /dev/null
+++ b/test/helpers/rejection.js
@@ -0,0 +1,3 @@
+process.on('unhandledRejection', function(reason, promise) {
+  console.error(promise);
+});
diff --git a/test/server/graph/context.js b/test/server/graph/context.js
index d6362e4ff..f1244c3e8 100644
--- a/test/server/graph/context.js
+++ b/test/server/graph/context.js
@@ -1,10 +1,9 @@
-
 const User = require('../../../models/user');
 const Context = require('../../../graph/context');
 const errors = require('../../../errors');
 const SettingsService = require('../../../services/settings');
 
-const {expect} = require('chai');
+const { expect } = require('chai');
 
 describe('graph.Context', () => {
   beforeEach(() => SettingsService.init());
@@ -13,10 +12,10 @@ describe('graph.Context', () => {
     let c;
 
     beforeEach(() => {
-      c = new Context({user: new User({id: '1', roles: ['ADMIN']})});
+      c = new Context({ user: new User({ id: '1', role: 'ADMIN' }) });
     });
 
-    it('creates a context with a user', (done) => {
+    it('creates a context with a user', done => {
       expect(c).to.have.property('user');
       expect(c.user).to.have.property('id', '1');
 
@@ -36,10 +35,10 @@ describe('graph.Context', () => {
     let c;
 
     beforeEach(() => {
-      c = new Context({user: undefined});
+      c = new Context({ user: undefined });
     });
 
-    it('creates a context without a user', (done) => {
+    it('creates a context without a user', done => {
       expect(c).to.not.have.property('user');
 
       done();
@@ -54,7 +53,7 @@ describe('graph.Context', () => {
         .then(() => {
           throw new Error('should not reach this point');
         })
-        .catch((err) => {
+        .catch(err => {
           expect(err).to.be.equal(errors.ErrNotAuthorized);
         });
     });
diff --git a/test/server/graph/mutations/addTag.js b/test/server/graph/mutations/addTag.js
index 52f20b065..d93c7fa44 100644
--- a/test/server/graph/mutations/addTag.js
+++ b/test/server/graph/mutations/addTag.js
@@ -1,4 +1,4 @@
-const {graphql} = require('graphql');
+const { graphql } = require('graphql');
 
 const schema = require('../../../../graph/schema');
 const Context = require('../../../../graph/context');
@@ -7,17 +7,20 @@ const UserModel = require('../../../../models/user');
 const SettingsService = require('../../../../services/settings');
 const CommentsService = require('../../../../services/comments');
 
-const {expect} = require('chai');
+const { expect } = require('chai');
 
 describe('graph.mutations.addTag', () => {
   let comment, asset;
   beforeEach(async () => {
     await SettingsService.init();
 
-    asset = new AssetModel({url: 'http://new.test.com/'});
+    asset = new AssetModel({ url: 'http://new.test.com/' });
     await asset.save();
 
-    comment = await CommentsService.publicCreate({asset_id: asset.id, body: `hello there! ${String(Math.random()).slice(2)}`});
+    comment = await CommentsService.publicCreate({
+      asset_id: asset.id,
+      body: `hello there! ${String(Math.random()).slice(2)}`,
+    });
   });
 
   const query = `
@@ -31,35 +34,50 @@ describe('graph.mutations.addTag', () => {
   `;
 
   it('moderators can add tags to comments', async () => {
-    const user = new UserModel({roles: ['MODERATOR']});
-    const context = new Context({user});
-    const res = await graphql(schema, query, {}, context, {id: comment.id, asset_id: asset.id, name: 'BEST'}, 'AddCommentTag');
+    const user = new UserModel({ role: 'MODERATOR' });
+    const context = new Context({ user });
+    const res = await graphql(
+      schema,
+      query,
+      {},
+      context,
+      { id: comment.id, asset_id: asset.id, name: 'BEST' },
+      'AddCommentTag'
+    );
     if (res.errors && res.errors.length) {
       console.error(res.errors);
     }
 
     expect(res.errors).to.be.empty;
 
-    let {tags} = await CommentsService.findById(comment.id);
+    let { tags } = await CommentsService.findById(comment.id);
     expect(tags).to.have.length(1);
   });
 
   describe('users who cant add tags', () => {
     Object.entries({
-      'anonymous': undefined,
+      anonymous: undefined,
       'regular commenter': new UserModel({}),
-      'banned moderator': new UserModel({roles: ['MODERATOR'], status: 'BANNED'})
-    }).forEach(([ userDescription, user ]) => {
+      'banned moderator': new UserModel({ role: 'MODERATOR', banned: true }),
+    }).forEach(([userDescription, user]) => {
       it(userDescription, async () => {
-        const context = new Context({user});
-        const res = await graphql(schema, query, {}, context, {id: comment.id, asset_id: asset.id, name: 'BEST'}, 'AddCommentTag');
+        const context = new Context({ user });
+        const res = await graphql(
+          schema,
+          query,
+          {},
+          context,
+          { id: comment.id, asset_id: asset.id, name: 'BEST' },
+          'AddCommentTag'
+        );
         if (res.errors && res.errors.length) {
           console.error(res.errors);
         }
         expect(res.errors).to.be.empty;
-        expect(res.data.addTag.errors).to.deep.equal([{'translation_key':'NOT_AUTHORIZED'}]);
+        expect(res.data.addTag.errors).to.deep.equal([
+          { translation_key: 'NOT_AUTHORIZED' },
+        ]);
       });
     });
   });
-
 });
diff --git a/test/server/graph/mutations/changeUsername.js b/test/server/graph/mutations/changeUsername.js
new file mode 100644
index 000000000..f54ea9ac1
--- /dev/null
+++ b/test/server/graph/mutations/changeUsername.js
@@ -0,0 +1,130 @@
+const { graphql } = require('graphql');
+
+const schema = require('../../../../graph/schema');
+const Context = require('../../../../graph/context');
+const SettingsService = require('../../../../services/settings');
+const UsersService = require('../../../../services/users');
+
+const { expect } = require('chai');
+
+describe('graph.mutations.changeUsername', () => {
+  let user;
+  beforeEach(async () => {
+    await SettingsService.init();
+    user = await UsersService.createLocalUser(
+      'test@test.com',
+      'testpassword1!',
+      'kirk'
+    );
+
+    expect(user).to.have.property('username', 'kirk');
+    expect(user).to.have.property('lowercaseUsername', 'kirk');
+    expect(user.status.username.status).to.equal('SET');
+  });
+
+  const changeUsernameMutation = `
+    mutation ChangeUsername($user_id: ID!, $username: String!) {
+      changeUsername(id: $user_id, username: $username) {
+        errors {
+          translation_key
+        }
+      }
+    }
+
+    query User {
+      me {
+        state {
+          status {
+            username {
+              history {
+                status
+                assigned_by {
+                  username
+                }
+                created_at
+              }
+            }
+          }
+        }
+      }
+    }
+  `;
+
+  [
+    { role: 'COMMENTER' },
+    { role: 'STAFF' },
+    { role: 'COMMENTER' },
+    { role: 'MODERATOR' },
+    { role: 'ADMIN' },
+  ].forEach(({ role }) => {
+    it(`can change the username with roles ${role}`, async () => {
+      let username = 'spock';
+
+      // Update the user role.
+      await UsersService.setRole(user.id, role);
+      user.role = role;
+
+      let ctx = new Context({ user });
+
+      let res = await graphql(
+        schema,
+        changeUsernameMutation,
+        {},
+        ctx,
+        {
+          user_id: user.id,
+          username,
+        },
+        'ChangeUsername'
+      );
+
+      if (res.errors && res.errors.length > 0) {
+        console.error(res.errors);
+      }
+
+      expect(res.errors).to.be.undefined;
+      expect(res.data.changeUsername).to.have.property('errors');
+      expect(res.data.changeUsername.errors).to.have.length(1);
+      expect(res.data.changeUsername.errors[0]).to.have.property(
+        'translation_key',
+        'NOT_AUTHORIZED'
+      );
+
+      // Set the user to the desired status.
+      user = await UsersService.setUsernameStatus(user.id, 'REJECTED');
+
+      expect(user.status.username.status, 'REJECTED');
+
+      ctx = new Context({ user });
+
+      res = await graphql(
+        schema,
+        changeUsernameMutation,
+        {},
+        ctx,
+        {
+          user_id: user.id,
+          username,
+        },
+        'ChangeUsername'
+      );
+
+      if (res.errors && res.errors.length > 0) {
+        console.error(res.errors);
+      }
+
+      expect(res.errors).to.be.undefined;
+      expect(res.data.changeUsername).to.be.null;
+
+      res = await graphql(schema, changeUsernameMutation, {}, ctx, {}, 'User');
+
+      if (res.errors && res.errors.length > 0) {
+        console.error(res.errors);
+      }
+
+      expect(res.errors).to.be.undefined;
+
+      expect(res.data.me.state.status.username.status, 'CHANGED');
+    });
+  });
+});
diff --git a/test/server/graph/mutations/createComment.js b/test/server/graph/mutations/createComment.js
index 9583c2066..88ca3415a 100644
--- a/test/server/graph/mutations/createComment.js
+++ b/test/server/graph/mutations/createComment.js
@@ -1,4 +1,4 @@
-const {graphql} = require('graphql');
+const { graphql } = require('graphql');
 
 const schema = require('../../../../graph/schema');
 const Context = require('../../../../graph/context');
@@ -10,7 +10,7 @@ const ActionModel = require('../../../../models/action');
 const SettingsService = require('../../../../services/settings');
 const CommentsService = require('../../../../services/comments');
 
-const {expect} = require('chai');
+const { expect } = require('chai');
 
 describe('graph.mutations.createComment', () => {
   beforeEach(() => SettingsService.init());
@@ -35,214 +35,268 @@ describe('graph.mutations.createComment', () => {
   `;
 
   describe('context with different user properties', () => {
-
-    beforeEach(() => AssetModel.create({id: '123'}));
+    beforeEach(() => AssetModel.create({ id: '123' }));
 
     [
-      {user: null, error: 'NOT_AUTHORIZED'},
-      {user: new UserModel({}), error: null}
-    ].forEach(({user, error}) => {
+      { user: null, error: 'NOT_AUTHORIZED' },
+      { user: new UserModel({}), error: null },
+    ].forEach(({ user, error }) => {
       describe(user != null ? 'with user' : 'without user', () => {
+        it(
+          error ? 'does not create the comment' : 'creates the comment',
+          () => {
+            const context = new Context({ user });
 
-        it(error ? 'does not create the comment' : 'creates the comment', () => {
-          const context = new Context({user});
-
-          return graphql(schema, query, {}, context)
-            .then(({data, errors}) => {
-              expect(errors).to.be.undefined;
-              if (error) {
-                expect(data.createComment).to.have.property('comment').null;
-                expect(data.createComment).to.have.property('errors').not.null;
-                expect(data.createComment.errors[0]).to.have.property('translation_key', error);
-              } else {
-                expect(data.createComment).to.have.property('comment').not.null;
-                expect(data.createComment).to.have.property('errors').null;
+            return graphql(schema, query, {}, context).then(
+              ({ data, errors }) => {
+                expect(errors).to.be.undefined;
+                if (error) {
+                  expect(data.createComment).to.have.property('comment').null;
+                  expect(data.createComment).to.have.property('errors').not
+                    .null;
+                  expect(data.createComment.errors[0]).to.have.property(
+                    'translation_key',
+                    error
+                  );
+                } else {
+                  expect(data.createComment).to.have.property('comment').not
+                    .null;
+                  expect(data.createComment).to.have.property('errors').null;
+                }
               }
-            });
-        });
-
+            );
+          }
+        );
       });
     });
-
   });
 
   describe('users with different statuses', () => {
-
-    beforeEach(() => AssetModel.create({id: '123'}));
+    beforeEach(() => AssetModel.create({ id: '123' }));
 
     [
-      {user: new UserModel({status: 'ACTIVE'}), error: null},
-      {user: new UserModel({status: 'BANNED'}), error: 'NOT_AUTHORIZED'},
-      {user: new UserModel({status: 'PENDING'}), error: null},
-      {user: new UserModel({status: 'APPROVED'}), error: null}
-    ].forEach(({user, error}) => {
-      describe(`user.status=${user.status}`, () => {
-        it(error ? 'does not create the comment' : 'creates the comment', () => {
-          const context = new Context({user});
+      { user: new UserModel({}), error: null },
+      { user: new UserModel({ banned: true }), error: 'NOT_AUTHORIZED' },
+      {
+        user: new UserModel({
+          suspended: new Date(new Date().getTime() - 10 * 86400000),
+        }),
+        error: null,
+      },
+      {
+        user: new UserModel({
+          suspended: new Date(new Date().getTime() + 10 * 86400000),
+        }),
+        error: 'NOT_AUTHORIZED',
+      },
+    ].forEach(({ user, error }) => {
+      describe(`user.banned=${user.banned} user.suspended=${
+        user.suspended
+      }`, () => {
+        it(
+          error ? 'does not create the comment' : 'creates the comment',
+          async () => {
+            const context = new Context({ user });
+            const { data, errors } = await graphql(schema, query, {}, context);
 
-          return graphql(schema, query, {}, context)
-            .then(({data, errors}) => {
-              expect(errors).to.be.undefined;
-              if (error) {
-                expect(data.createComment).to.have.property('comment').null;
-                expect(data.createComment).to.have.property('errors').not.null;
-                expect(data.createComment.errors[0]).to.have.property('translation_key', error);
-              } else {
-                expect(data.createComment).to.have.property('comment').not.null;
-                expect(data.createComment).to.have.property('errors').null;
+            expect(errors).to.be.undefined;
+            if (error) {
+              expect(data.createComment).to.have.property('comment').null;
+              expect(data.createComment).to.have.property('errors').not.null;
+              expect(data.createComment.errors[0]).to.have.property(
+                'translation_key',
+                error
+              );
+            } else {
+              if (
+                data.createComment.errors &&
+                data.createComment.errors.length > 0
+              ) {
+                console.error(data.createComment.errors);
               }
-            });
-        });
+              expect(data.createComment).to.have.property('errors').null;
+              expect(data.createComment).to.have.property('comment').not.null;
+            }
+          }
+        );
       });
     });
-
   });
 
   describe('assets with different statuses', () => {
-
     [
-      {asset: new AssetModel({id: '123', closedAt: new Date((new Date()).getTime() + (10 * 86400000))}), error: null},
-      {asset: new AssetModel({id: '123', closedAt: new Date((new Date()).getTime() - (10 * 86400000))}), error: 'COMMENTING_CLOSED'}
-    ].forEach(({asset, error}) => {
+      {
+        asset: new AssetModel({
+          id: '123',
+          closedAt: new Date(new Date().getTime() + 10 * 86400000),
+        }),
+        error: null,
+      },
+      {
+        asset: new AssetModel({
+          id: '123',
+          closedAt: new Date(new Date().getTime() - 10 * 86400000),
+        }),
+        error: 'COMMENTING_CLOSED',
+      },
+    ].forEach(({ asset, error }) => {
       describe(`asset.isClosed=${asset.isClosed}`, () => {
-
         beforeEach(() => asset.save());
 
-        it(error ? 'does not create the comment' : 'creates the comment', () => {
-          const context = new Context({user: new UserModel({status: 'ACTIVE'})});
+        it(
+          error ? 'does not create the comment' : 'creates the comment',
+          () => {
+            const context = new Context({ user: new UserModel({}) });
 
-          return graphql(schema, query, {}, context)
-            .then(({data, errors}) => {
-              expect(errors).to.be.undefined;
-              if (error) {
-                expect(data.createComment).to.have.property('comment').null;
-                expect(data.createComment).to.have.property('errors').not.null;
-                expect(data.createComment.errors[0]).to.have.property('translation_key', error);
-              } else {
-                expect(data.createComment).to.have.property('comment').not.null;
-                expect(data.createComment).to.have.property('errors').null;
+            return graphql(schema, query, {}, context).then(
+              ({ data, errors }) => {
+                expect(errors).to.be.undefined;
+                if (error) {
+                  expect(data.createComment).to.have.property('comment').null;
+                  expect(data.createComment).to.have.property('errors').not
+                    .null;
+                  expect(data.createComment.errors[0]).to.have.property(
+                    'translation_key',
+                    error
+                  );
+                } else {
+                  expect(data.createComment).to.have.property('comment').not
+                    .null;
+                  expect(data.createComment).to.have.property('errors').null;
+                }
               }
-            });
-        });
-
+            );
+          }
+        );
       });
-
     });
-
   });
 
   describe('comments made with different asset moderation settings', () => {
-
     [
-      {moderation: 'PRE', status: 'PREMOD'},
-      {moderation: 'POST', status: 'NONE'}
-    ].forEach(({moderation, status}) => {
+      { moderation: 'PRE', status: 'PREMOD' },
+      { moderation: 'POST', status: 'NONE' },
+    ].forEach(({ moderation, status }) => {
       describe(`moderation=${moderation}`, () => {
-
-        beforeEach(() => AssetModel.create({id: '123', settings: {moderation}}));
+        beforeEach(() =>
+          AssetModel.create({ id: '123', settings: { moderation } })
+        );
 
         it(`creates comment with status=${status}`, () => {
-          const context = new Context({user: new UserModel({status: 'ACTIVE'})});
+          const context = new Context({ user: new UserModel() });
 
-          return graphql(schema, query, {}, context)
-            .then(({data, errors}) => {
+          return graphql(schema, query, {}, context).then(
+            ({ data, errors }) => {
               expect(errors).to.be.undefined;
               expect(data.createComment).to.have.property('comment').not.null;
               expect(data.createComment).to.have.property('errors').null;
-              expect(data.createComment.comment).to.have.property('status', status);
-            });
+              expect(data.createComment.comment).to.have.property(
+                'status',
+                status
+              );
+            }
+          );
         });
-
       });
     });
-
   });
 
   describe('comments with/without banned words', () => {
-
-    beforeEach(() => Promise.all([
-      AssetModel.create({id: '123'}),
-      SettingsService.update({wordlist: {banned: ['WORST'], suspect: ['EH']}})
-    ]));
+    beforeEach(() =>
+      Promise.all([
+        AssetModel.create({ id: '123' }),
+        SettingsService.update({
+          wordlist: { banned: ['WORST'], suspect: ['EH'] },
+        }),
+      ])
+    );
 
     [
-      {message: 'comment does not contain banned/suspect words', body: 'This is such a nice comment!', status: 'NONE', flagged: false},
-      {message: 'comment contains banned words', body: 'This is the WORST comment!', status: 'REJECTED', flagged: true},
-      {message: 'comment contains suspect words', body: 'This is the EH comment!', status: 'NONE', flagged: true}
-    ].forEach(({message, body, status, flagged}) => {
+      {
+        message: 'comment does not contain banned/suspect words',
+        body: 'This is such a nice comment!',
+        status: 'NONE',
+        flagged: false,
+      },
+      {
+        message: 'comment contains banned words',
+        body: 'This is the WORST comment!',
+        status: 'REJECTED',
+        flagged: true,
+      },
+      {
+        message: 'comment contains suspect words',
+        body: 'This is the EH comment!',
+        status: 'NONE',
+        flagged: true,
+      },
+    ].forEach(({ message, body, status, flagged }) => {
       describe(message, () => {
+        it(`should create a comment with status=${status} and it ${
+          flagged ? 'should' : 'should not'
+        } be flagged`, async () => {
+          const context = new Context({ user: new UserModel({}) });
 
-        it(`should create a comment with status=${status} and it ${flagged ? 'should' : 'should not'} be flagged`, () => {
-          const context = new Context({user: new UserModel({status: 'ACTIVE'})});
-
-          return graphql(schema, query, {}, context, {
+          const { data, errors } = await graphql(schema, query, {}, context, {
             input: {
               asset_id: '123',
-              body
-            }
-          })
-            .then(({data, errors}) => {
-              expect(errors).to.be.undefined;
-              expect(data.createComment).to.have.property('comment').not.null;
-              expect(data.createComment.comment).to.have.property('status', status);
-              expect(data.createComment).to.have.property('errors').null;
+              body,
+            },
+          });
 
-              return ActionModel.find({
-                item_id: data.createComment.comment.id,
-                action_type: 'FLAG'
-              });
-            })
-            .then((actions) => {
-              if (flagged) {
-                expect(actions).to.have.length(1);
-              } else {
-                expect(actions).to.have.length(0);
-              }
-            });
+          expect(errors).to.be.undefined;
+          expect(data.createComment).to.have.property('comment').not.null;
+          expect(data.createComment.comment).to.have.property('status', status);
+          expect(data.createComment).to.have.property('errors').null;
+
+          const actions = await ActionModel.find({
+            item_id: data.createComment.comment.id,
+            action_type: 'FLAG',
+          });
+          if (flagged) {
+            expect(actions).to.have.length(1);
+          } else {
+            expect(actions).to.have.length(0);
+          }
         });
-
       });
     });
   });
 
   describe('users with different roles', () => {
-
-    beforeEach(() => AssetModel.create({id: '123'}));
+    beforeEach(() => AssetModel.create({ id: '123' }));
 
     [
-      {roles: [], tag: null},
-      {roles: ['ADMIN'], tag: 'STAFF'},
-      {roles: ['MODERATOR'], tag: 'STAFF'},
-      {roles: ['ADMIN', 'MODERATOR'], tag: 'STAFF'}
-    ].forEach(({roles, tag}) => {
-      describe(`user.roles=${JSON.stringify(roles)}`, () => {
+      { role: 'COMMENTER', tag: null },
+      { role: 'ADMIN', tag: 'STAFF' },
+      { role: 'MODERATOR', tag: 'STAFF' },
+    ].forEach(({ role, tag }) => {
+      describe(`user.role=${JSON.stringify(role)}`, () => {
+        it(`creates comment ${
+          tag ? `with tag=${tag}` : 'without tags'
+        }`, async () => {
+          const context = new Context({ user: new UserModel({ role }) });
 
-        it(`creates comment ${tag ? `with tag=${tag}` : 'without tags'}`, () => {
-          const context = new Context({user: new UserModel({roles})});
+          const { data, errors } = await graphql(schema, query, {}, context);
 
-          return graphql(schema, query, {}, context)
-            .then(({data, errors}) => {
-              if (errors) {
-                console.error(errors);
-              }
-              expect(errors).to.be.undefined;
-              expect(data.createComment).to.have.property('comment').not.null;
-              expect(data.createComment).to.have.property('errors').null;
+          if (errors) {
+            console.error(errors);
+          }
+          expect(errors).to.be.undefined;
+          expect(data.createComment).to.have.property('comment').not.null;
+          expect(data.createComment).to.have.property('errors').null;
 
-              return CommentsService.findById(data.createComment.comment.id);
-            })
-            .then(({tags}) => {
-              if (tag) {
-                expect(tags).to.have.length(1);
-                expect(tags[0].tag.name).to.have.equal(tag);
-              } else {
-                expect(tags).length(0);
-              }
-            });
+          const { tags } = await CommentsService.findById(
+            data.createComment.comment.id
+          );
+          if (tag) {
+            expect(tags).to.have.length(1);
+            expect(tags[0].tag.name).to.have.equal(tag);
+          } else {
+            expect(tags).length(0);
+          }
         });
-
       });
     });
-
   });
 });
diff --git a/test/server/graph/mutations/editComment.js b/test/server/graph/mutations/editComment.js
index 234bb308e..67c81a5d5 100644
--- a/test/server/graph/mutations/editComment.js
+++ b/test/server/graph/mutations/editComment.js
@@ -1,4 +1,4 @@
-const {graphql} = require('graphql');
+const { graphql } = require('graphql');
 const timekeeper = require('timekeeper');
 
 const schema = require('../../../../graph/schema');
@@ -8,7 +8,7 @@ const AssetModel = require('../../../../models/asset');
 const SettingsService = require('../../../../services/settings');
 const CommentsService = require('../../../../services/comments');
 
-const {expect} = require('chai');
+const { expect } = require('chai');
 
 describe('graph.mutations.editComment', () => {
   let asset, user;
@@ -16,7 +16,11 @@ describe('graph.mutations.editComment', () => {
     timekeeper.reset();
     await SettingsService.init();
     asset = await AssetModel.create({});
-    user = await UsersService.createLocalUser('usernameA@example.com', 'password', 'usernameA');
+    user = await UsersService.createLocalUser(
+      'usernameA@example.com',
+      'password',
+      'usernameA'
+    );
   });
 
   const editCommentMutation = `
@@ -30,7 +34,7 @@ describe('graph.mutations.editComment', () => {
   `;
 
   it('a user can edit their own comment', async () => {
-    const context = new Context({user});
+    const context = new Context({ user });
     const testStartedAt = new Date();
     const comment = await CommentsService.publicCreate({
       asset_id: asset.id,
@@ -50,14 +54,17 @@ describe('graph.mutations.editComment', () => {
       id: comment.id,
       asset_id: asset.id,
       edit: {
-        body: newBody
-      }
+        body: newBody,
+      },
     });
     if (response.errors && response.errors.length) {
       console.error(response.errors);
     }
     expect(response.errors).to.be.empty;
-    if (response.data.editComment.errors && response.data.editComment.errors.length > 0) {
+    if (
+      response.data.editComment.errors &&
+      response.data.editComment.errors.length > 0
+    ) {
       console.error(response.data.editComment.errors);
     }
     expect(response.data.editComment.errors).to.be.null;
@@ -69,11 +76,13 @@ describe('graph.mutations.editComment', () => {
     expect(commentAfterEdit.body_history.length).to.equal(2);
     expect(commentAfterEdit.body_history[1].body).to.equal(newBody);
     expect(commentAfterEdit.body_history[1].created_at).to.be.instanceOf(Date);
-    expect(commentAfterEdit.body_history[1].created_at).to.be.at.least(testStartedAt);
+    expect(commentAfterEdit.body_history[1].created_at).to.be.at.least(
+      testStartedAt
+    );
     expect(commentAfterEdit.status).to.equal('NONE');
   });
 
-  it('A user can\'t edit their comment outside of the edit comment time window', async () => {
+  it("A user can't edit their comment outside of the edit comment time window", async () => {
     const comment = await CommentsService.publicCreate({
       asset_id: asset.id,
       author_id: user.id,
@@ -85,68 +94,78 @@ describe('graph.mutations.editComment', () => {
     timekeeper.travel(oneHourFromNow);
 
     const newBody = 'This body should never be set';
-    const context = new Context({user});
+    const context = new Context({ user });
     const response = await graphql(schema, editCommentMutation, {}, context, {
       id: comment.id,
       asset_id: asset.id,
       edit: {
-        body: newBody
-      }
+        body: newBody,
+      },
     });
     if (response.errors && response.errors.length > 0) {
       console.error(response.errors);
     }
     expect(response.errors).to.be.empty;
     expect(response.data.editComment.errors).to.not.be.empty;
-    expect(response.data.editComment.errors[0].translation_key).to.equal('EDIT_WINDOW_ENDED');
+    expect(response.data.editComment.errors[0].translation_key).to.equal(
+      'EDIT_WINDOW_ENDED'
+    );
     const commentAfterEdit = await CommentsService.findById(comment.id);
 
     // it *hasn't* changed from the original
     expect(commentAfterEdit.body).to.equal(comment.body);
   });
 
-  it('A user can\'t edit someone else\'s comment', async () => {
+  it("A user can't edit someone else's comment", async () => {
     const comment = await CommentsService.publicCreate({
       asset_id: asset.id,
       author_id: user.id,
       body: `hello there! ${String(Math.random()).slice(2)}`,
     });
 
-    const userB = await UsersService.createLocalUser('usernameB@example.com', 'password', 'usernameB');
+    const userB = await UsersService.createLocalUser(
+      'usernameB@example.com',
+      'password',
+      'usernameB'
+    );
     const newBody = 'This body should never be set';
-    const context = new Context({user: userB});
+    const context = new Context({ user: userB });
     const response = await graphql(schema, editCommentMutation, {}, context, {
       id: comment.id,
       asset_id: asset.id,
       edit: {
-        body: newBody
-      }
+        body: newBody,
+      },
     });
     expect(response.errors).to.be.empty;
     expect(response.data.editComment.errors).to.not.be.empty;
-    expect(response.data.editComment.errors[0].translation_key).to.equal('NOT_AUTHORIZED');
+    expect(response.data.editComment.errors[0].translation_key).to.equal(
+      'NOT_AUTHORIZED'
+    );
     const commentAfterEdit = await CommentsService.findById(comment.id);
 
     // it *hasn't* changed from the original
     expect(commentAfterEdit.body).to.equal(comment.body);
   });
 
-  it('A user Can\'t edit a comment id that doesn\'t exist', async () => {
+  it("A user Can't edit a comment id that doesn't exist", async () => {
     const fakeCommentId = 'nooooope';
     const newBody = 'This body should never be set';
-    const context = new Context({user});
+    const context = new Context({ user });
     const response = await graphql(schema, editCommentMutation, {}, context, {
       id: fakeCommentId,
       asset_id: asset.id,
       edit: {
-        body: newBody
-      }
+        body: newBody,
+      },
     });
     if (response.errors && response.errors.length > 0) {
       console.error(response.errors);
     }
     expect(response.errors).to.be.empty;
-    expect(response.data.editComment.errors[0].translation_key).to.equal('NOT_FOUND');
+    expect(response.data.editComment.errors[0].translation_key).to.equal(
+      'NOT_FOUND'
+    );
   });
 
   const bannedWord = 'BANNED_WORD';
@@ -163,72 +182,77 @@ describe('graph.mutations.editComment', () => {
       edit: {
         body: 'I have been edited to be less offensive',
       },
-      error: true
+      error: true,
     },
     {
-      description: 'editing an ACCEPTED comment to add a bad word sets status to REJECTED',
+      description:
+        'editing an ACCEPTED comment to add a bad word sets status to REJECTED',
       settings: {
         moderation: 'POST',
         wordlist: {
-          banned: [bannedWord]
-        }
+          banned: [bannedWord],
+        },
       },
       beforeEdit: {
-        body: 'I\'m a perfectly acceptable comment',
+        body: "I'm a perfectly acceptable comment",
         status: 'ACCEPTED',
       },
       edit: {
-        body: `I have been sneakily edited to add a banned word: ${bannedWord}`
+        body: `I have been sneakily edited to add a banned word: ${bannedWord}`,
       },
       afterEdit: {
         status: 'REJECTED',
       },
     },
     {
-      description: 'postmod: editing a REJECTED comment with banned word be rejected',
+      description:
+        'postmod: editing a REJECTED comment with banned word be rejected',
       settings: {
         moderation: 'POST',
         wordlist: {
-          banned: [bannedWord]
-        }
+          banned: [bannedWord],
+        },
       },
       beforeEdit: {
         body: `I'm a rejected comment with bad word ${bannedWord}`,
         status: 'REJECTED',
       },
       edit: {
-        body: 'I have been edited to remove the bad word'
+        body: 'I have been edited to remove the bad word',
       },
-      error: true
+      error: true,
     },
     {
-      description: 'postmod + premodLinksEnable: editing an ACCEPTED comment to add a link sets status to PREMOD',
+      description:
+        'postmod + premodLinksEnable: editing an ACCEPTED comment to add a link sets status to PREMOD',
       settings: {
         moderation: 'POST',
         premodLinksEnable: true,
       },
       beforeEdit: {
-        body: 'I\'m a perfectly acceptable comment',
+        body: "I'm a perfectly acceptable comment",
         status: 'ACCEPTED',
       },
       edit: {
-        body: 'I have been edited to add a link: https://coralproject.net/'
+        body: 'I have been edited to add a link: https://coralproject.net/',
       },
       afterEdit: {
         status: 'SYSTEM_WITHHELD',
       },
     },
-  ].forEach(({description, settings, beforeEdit, edit, afterEdit, error}) => {
+  ].forEach(({ description, settings, beforeEdit, edit, afterEdit, error }) => {
     it(description, async () => {
       await SettingsService.update(settings);
-      const context = new Context({user});
-      const comment = await CommentsService.publicCreate(Object.assign(
-        {
-          asset_id: asset.id,
-          author_id: user.id,
-        },
-        beforeEdit
-      ));
+      const context = new Context({ user });
+      const comment = await CommentsService.publicCreate(
+        Object.assign(
+          {
+            asset_id: asset.id,
+            author_id: user.id,
+          },
+          beforeEdit
+        )
+      );
 
       // now edit
       const newBody = edit.body;
@@ -236,14 +260,17 @@ describe('graph.mutations.editComment', () => {
         id: comment.id,
         asset_id: asset.id,
         edit: {
-          body: newBody
-        }
+          body: newBody,
+        },
       });
 
       if (error) {
         expect(response.data.editComment.errors).to.not.be.empty;
       } else {
-        if (response.data.editComment.errors && response.data.editComment.errors.length) {
+        if (
+          response.data.editComment.errors &&
+          response.data.editComment.errors.length
+        ) {
           console.error(response.data.editComment.errors);
         }
         expect(response.data.editComment.errors).to.be.null;
diff --git a/test/server/graph/mutations/ignoreUser.js b/test/server/graph/mutations/ignoreUser.js
index 3d9db2d00..e1cb620e6 100644
--- a/test/server/graph/mutations/ignoreUser.js
+++ b/test/server/graph/mutations/ignoreUser.js
@@ -1,11 +1,11 @@
-const {graphql} = require('graphql');
+const { graphql } = require('graphql');
 
 const schema = require('../../../../graph/schema');
 const Context = require('../../../../graph/context');
 const UsersService = require('../../../../services/users');
 const SettingsService = require('../../../../services/settings');
 
-const {expect} = require('chai');
+const { expect } = require('chai');
 
 const ignoreUserMutation = `
   mutation ignoreUser ($id: ID!) {
@@ -34,11 +34,25 @@ describe('graph.mutations.ignoreUser', () => {
   });
 
   it('users can ignoreUser', async () => {
-    let currentUser = await UsersService.createLocalUser('usernameA@example.com', 'password', 'usernameA');
-    const userToIgnore = await UsersService.createLocalUser('usernameB@example.com', 'password', 'usernameB');
-    let context = new Context({user: currentUser});
+    let currentUser = await UsersService.createLocalUser(
+      'usernameA@example.com',
+      'password',
+      'usernameA'
+    );
+    const userToIgnore = await UsersService.createLocalUser(
+      'usernameB@example.com',
+      'password',
+      'usernameB'
+    );
+    let context = new Context({ user: currentUser });
 
-    const ignoreUserResponse = await graphql(schema, ignoreUserMutation, {}, context, {id: userToIgnore.id});
+    const ignoreUserResponse = await graphql(
+      schema,
+      ignoreUserMutation,
+      {},
+      context,
+      { id: userToIgnore.id }
+    );
     if (ignoreUserResponse.errors && ignoreUserResponse.errors.length) {
       console.error(ignoreUserResponse.errors);
     }
@@ -47,10 +61,16 @@ describe('graph.mutations.ignoreUser', () => {
     // Refresh the user from the database and create the new context for the
     // request.
     currentUser = await UsersService.findById(currentUser.id);
-    context = new Context({user: currentUser});
+    context = new Context({ user: currentUser });
 
     // now check my ignored users
-    const myIgnoredUsersResponse = await graphql(schema, getMyIgnoredUsersQuery, {}, context, {});
+    const myIgnoredUsersResponse = await graphql(
+      schema,
+      getMyIgnoredUsersQuery,
+      {},
+      context,
+      {}
+    );
     if (myIgnoredUsersResponse.errors && myIgnoredUsersResponse.errors.length) {
       console.error(myIgnoredUsersResponse.errors);
     }
@@ -63,13 +83,29 @@ describe('graph.mutations.ignoreUser', () => {
   });
 
   it('users cannot ignore themselves', async () => {
-    const user = await UsersService.createLocalUser('usernameA@example.com', 'password', 'usernameA');
-    const context = new Context({user});
-    const ignoreUserResponse = await graphql(schema, ignoreUserMutation, {}, context, {id: user.id});
+    const user = await UsersService.createLocalUser(
+      'usernameA@example.com',
+      'password',
+      'usernameA'
+    );
+    const context = new Context({ user });
+    const ignoreUserResponse = await graphql(
+      schema,
+      ignoreUserMutation,
+      {},
+      context,
+      { id: user.id }
+    );
     expect(ignoreUserResponse.errors).to.not.be.empty;
 
     // now check my ignored users
-    const myIgnoredUsersResponse = await graphql(schema, getMyIgnoredUsersQuery, {}, context, {});
+    const myIgnoredUsersResponse = await graphql(
+      schema,
+      getMyIgnoredUsersQuery,
+      {},
+      context,
+      {}
+    );
     if (myIgnoredUsersResponse.errors && myIgnoredUsersResponse.errors.length) {
       console.error(myIgnoredUsersResponse.errors);
     }
@@ -77,7 +113,6 @@ describe('graph.mutations.ignoreUser', () => {
     const myIgnoredUsers = myIgnoredUsersResponse.data.me.ignoredUsers;
     expect(myIgnoredUsers.length).to.equal(0);
   });
-
 });
 
 describe('graph.mutations.stopIgnoringUser', () => {
@@ -86,20 +121,35 @@ describe('graph.mutations.stopIgnoringUser', () => {
   });
 
   it('users can stop ignoring another user they ignore', async () => {
-
     // We're going to ignore 2 users,
     // then stopIgnoring 1 of them
     // then assert myIgnoredUsers only lists the one remaining
-    let currentUser = await UsersService.createLocalUser('usernameA@example.com', 'password', 'usernameA');
+    let currentUser = await UsersService.createLocalUser(
+      'usernameA@example.com',
+      'password',
+      'usernameA'
+    );
     const usersToIgnore = await Promise.all([
-      UsersService.createLocalUser('usernameB@example.com', 'password', 'usernameB'),
-      UsersService.createLocalUser('usernameC@example.com', 'password', 'usernameC'),
+      UsersService.createLocalUser(
+        'usernameB@example.com',
+        'password',
+        'usernameB'
+      ),
+      UsersService.createLocalUser(
+        'usernameC@example.com',
+        'password',
+        'usernameC'
+      ),
     ]);
-    let context = new Context({user: currentUser});
+    let context = new Context({ user: currentUser });
 
     // ignore two users
-    const ignoreUserResponses = await Promise.all(usersToIgnore.map((u) => graphql(schema, ignoreUserMutation, {}, context, {id: u.id})));
-    ignoreUserResponses.forEach((response) => {
+    const ignoreUserResponses = await Promise.all(
+      usersToIgnore.map(u =>
+        graphql(schema, ignoreUserMutation, {}, context, { id: u.id })
+      )
+    );
+    ignoreUserResponses.forEach(response => {
       if (response.errors && response.errors.length) {
         console.error(response.errors);
       }
@@ -109,7 +159,7 @@ describe('graph.mutations.stopIgnoringUser', () => {
     // Refresh the user from the database and create the new context for the
     // request.
     currentUser = await UsersService.findById(currentUser.id);
-    context = new Context({user: currentUser});
+    context = new Context({ user: currentUser });
 
     const stopIgnoringUserMutation = `
       mutation stopIgnoringUser ($id: ID!) {
@@ -122,8 +172,17 @@ describe('graph.mutations.stopIgnoringUser', () => {
     `;
 
     // stop ignoring one user
-    const stopIgnoringUserResponse = await graphql(schema, stopIgnoringUserMutation, {}, context, {id: usersToIgnore[0].id});
-    if (stopIgnoringUserResponse.errors && stopIgnoringUserResponse.errors.length) {
+    const stopIgnoringUserResponse = await graphql(
+      schema,
+      stopIgnoringUserMutation,
+      {},
+      context,
+      { id: usersToIgnore[0].id }
+    );
+    if (
+      stopIgnoringUserResponse.errors &&
+      stopIgnoringUserResponse.errors.length
+    ) {
       console.error(stopIgnoringUserResponse.errors);
     }
     expect(stopIgnoringUserResponse.errors).to.be.empty;
@@ -131,10 +190,16 @@ describe('graph.mutations.stopIgnoringUser', () => {
     // Refresh the user from the database and create the new context for the
     // request.
     currentUser = await UsersService.findById(currentUser.id);
-    context = new Context({user: currentUser});
+    context = new Context({ user: currentUser });
 
     // now check my ignored users
-    const myIgnoredUsersResponse = await graphql(schema, getMyIgnoredUsersQuery, {}, context, {});
+    const myIgnoredUsersResponse = await graphql(
+      schema,
+      getMyIgnoredUsersQuery,
+      {},
+      context,
+      {}
+    );
     if (myIgnoredUsersResponse.errors && myIgnoredUsersResponse.errors.length) {
       console.error(myIgnoredUsersResponse.errors);
     }
@@ -144,5 +209,4 @@ describe('graph.mutations.stopIgnoringUser', () => {
     expect(myIgnoredUsers[0].id).to.equal(usersToIgnore[1].id);
     expect(myIgnoredUsers[0].username).to.equal(usersToIgnore[1].username);
   });
-
 });
diff --git a/test/server/graph/mutations/removeTag.js b/test/server/graph/mutations/removeTag.js
index 761cd44c9..f1de90f5c 100644
--- a/test/server/graph/mutations/removeTag.js
+++ b/test/server/graph/mutations/removeTag.js
@@ -1,4 +1,4 @@
-const {graphql} = require('graphql');
+const { graphql } = require('graphql');
 
 const schema = require('../../../../graph/schema');
 const Context = require('../../../../graph/context');
@@ -10,17 +10,20 @@ const SettingsService = require('../../../../services/settings');
 const CommentsService = require('../../../../services/comments');
 const TagsService = require('../../../../services/tags');
 
-const {expect} = require('chai');
+const { expect } = require('chai');
 
 describe('graph.mutations.removeTag', () => {
   let asset, comment;
   beforeEach(async () => {
     await SettingsService.init();
 
-    asset = new AssetModel({url: 'http://new.test.com/'});
+    asset = new AssetModel({ url: 'http://new.test.com/' });
     await asset.save();
 
-    comment = await CommentsService.publicCreate({asset_id: asset.id, body: `hello there! ${String(Math.random()).slice(2)}`});
+    comment = await CommentsService.publicCreate({
+      asset_id: asset.id,
+      body: `hello there! ${String(Math.random()).slice(2)}`,
+    });
   });
 
   const query = `
@@ -34,13 +37,22 @@ describe('graph.mutations.removeTag', () => {
   `;
 
   it('moderators can add remove tags from comments', async () => {
-    const user = new UserModel({roles: ['MODERATOR']});
-    const context = new Context({user});
+    const user = new UserModel({ role: 'MODERATOR' });
+    const context = new Context({ user });
 
     // add a tag first
-    await TagsService.add(comment.id, 'COMMENTS', {tag: {name: 'BEST'}}, false);
+    await TagsService.add(
+      comment.id,
+      'COMMENTS',
+      { tag: { name: 'BEST' } },
+      false
+    );
 
-    const response = await graphql(schema, query, {}, context, {id: comment.id, asset_id: asset.id, name: 'BEST'});
+    const response = await graphql(schema, query, {}, context, {
+      id: comment.id,
+      asset_id: asset.id,
+      name: 'BEST',
+    });
     if (response.errors && response.errors.length) {
       console.error(response.errors);
     }
@@ -53,36 +65,50 @@ describe('graph.mutations.removeTag', () => {
   });
 
   describe('users who cant remove tags', () => {
-
-    before(() => SettingModel.findOneAndUpdate({id: 1}, {
-      $push: {
-        tags: {
-          id: 'BEST',
-          models: ['COMMENTS']
+    before(() =>
+      SettingModel.findOneAndUpdate(
+        { id: 1 },
+        {
+          $push: {
+            tags: {
+              id: 'BEST',
+              models: ['COMMENTS'],
+            },
+          },
         }
-      }
-    }));
+      )
+    );
 
     Object.entries({
-      'anonymous': undefined,
+      anonymous: undefined,
       'regular commenter': new UserModel({}),
-      'banned moderator': new UserModel({roles: ['MODERATOR'], status: 'BANNED'})
+      'banned moderator': new UserModel({ role: 'MODERATOR', banned: true }),
     }).forEach(([userDescription, user]) => {
-      it(userDescription, async function () {
-        const context = new Context({user});
+      it(userDescription, async function() {
+        const context = new Context({ user });
 
         // add a tag first
-        await TagsService.add(comment.id, 'COMMENTS', {tag: {name: 'BEST'}}, false);
+        await TagsService.add(
+          comment.id,
+          'COMMENTS',
+          { tag: { name: 'BEST' } },
+          false
+        );
 
-        const response = await graphql(schema, query, {}, context, {id: comment.id, asset_id: asset.id, name: 'BEST'});
+        const response = await graphql(schema, query, {}, context, {
+          id: comment.id,
+          asset_id: asset.id,
+          name: 'BEST',
+        });
         if (response.errors && response.errors.length) {
           console.error(response.errors);
         }
         expect(response.errors).to.be.empty;
 
-        expect(response.data.removeTag.errors).to.deep.equal([{'translation_key':'NOT_AUTHORIZED'}]);
+        expect(response.data.removeTag.errors).to.deep.equal([
+          { translation_key: 'NOT_AUTHORIZED' },
+        ]);
       });
     });
   });
-
 });
diff --git a/test/server/graph/mutations/setUserBanStatus.js b/test/server/graph/mutations/setUserBanStatus.js
new file mode 100644
index 000000000..4d2973b5a
--- /dev/null
+++ b/test/server/graph/mutations/setUserBanStatus.js
@@ -0,0 +1,172 @@
+const { graphql } = require('graphql');
+
+const schema = require('../../../../graph/schema');
+const Context = require('../../../../graph/context');
+const SettingsService = require('../../../../services/settings');
+const UserModel = require('../../../../models/user');
+const UsersService = require('../../../../services/users');
+const mailer = require('../../../../services/mailer');
+
+const sinon = require('sinon');
+const chai = require('chai');
+chai.use(require('sinon-chai'));
+const { expect } = chai;
+
+describe('graph.mutations.banUser', () => {
+  let user;
+  beforeEach(async () => {
+    await SettingsService.init();
+
+    user = await UsersService.createLocalUser(
+      'usernameA@example.com',
+      'password',
+      'usernameA'
+    );
+  });
+
+  let spy;
+  before(() => {
+    spy = sinon.spy(mailer, 'send');
+  });
+
+  afterEach(() => {
+    spy.reset();
+  });
+
+  after(() => {
+    spy.restore();
+  });
+
+  const banUserMutation = `
+    mutation BanUser($user_id: ID!, $message: String!) {
+      banUser(input: {
+        id: $user_id,
+        message: $message
+      }) {
+        errors {
+          translation_key
+        }
+      }
+    }
+
+    mutation UnBanUser($user_id: ID!) {
+      unbanUser(input: {
+        id: $user_id
+      }) {
+        errors {
+          translation_key
+        }
+      }
+    }
+  `;
+
+  [
+    { self: true, error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+    { self: true, error: 'NOT_AUTHORIZED', role: 'STAFF' },
+    { self: true, error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+    { error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+    { error: 'NOT_AUTHORIZED', role: 'STAFF' },
+    { error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+    { error: false, role: 'MODERATOR' },
+    { error: false, role: 'ADMIN' },
+  ].forEach(({ self, error, role }) => {
+    it(`${error ? 'can not' : 'can'} ban ${
+      self ? 'themself' : 'another user'
+    } as a user with role=${role}`, async () => {
+      const actor = new UserModel({ role });
+
+      // If we're testing self assign, set the id of the actor to the user
+      // we're acting on.
+      if (self) {
+        actor.id = user.id;
+      }
+
+      const ctx = new Context({ user: actor });
+
+      const { data, errors } = await graphql(
+        schema,
+        banUserMutation,
+        {},
+        ctx,
+        {
+          user_id: user.id,
+          message: 'This is a message',
+        },
+        'BanUser'
+      );
+
+      if (errors && errors.length > 0) {
+        console.error(errors);
+      }
+      expect(errors).to.be.undefined;
+      if (error) {
+        expect(data.banUser).to.have.property('errors').not.null;
+        expect(data.banUser.errors[0]).to.have.property(
+          'translation_key',
+          error
+        );
+      } else {
+        expect(data.banUser).to.be.null;
+
+        user = await UserModel.findOne({ id: user.id });
+
+        expect(user.status.banned.status).to.be.true;
+        expect(user.status.banned.history).to.have.length(1);
+        expect(user.status.banned.history[0]).to.have.property('status', true);
+        expect(user.status.banned.history[0]).to.have.property(
+          'message',
+          'This is a message'
+        );
+        expect(user.status.banned.history[0]).to.have.property(
+          'assigned_by',
+          actor.id
+        );
+        expect(user.status.banned.history[0]).to.have.property('created_at').not
+          .null;
+
+        expect(user.banned).to.be.true;
+
+        expect(spy).to.have.been.calledOnce;
+
+        const res = await graphql(
+          schema,
+          banUserMutation,
+          {},
+          ctx,
+          {
+            user_id: user.id,
+          },
+          'UnBanUser'
+        );
+        if (res.errors && res.errors.length > 0) {
+          console.error(res.errors);
+        }
+        expect(res.errors).to.be.undefined;
+        expect(res.data.unbanUser).to.be.null;
+
+        user = await UserModel.findOne({ id: user.id });
+
+        expect(user.status.banned.status).to.be.false;
+        expect(user.status.banned.history).to.have.length(2);
+        expect(user.status.banned.history[0]).to.have.property('status').to.be
+          .true;
+        expect(user.status.banned.history[0]).to.have.property(
+          'assigned_by',
+          actor.id
+        );
+        expect(user.status.banned.history[0]).to.have.property('created_at').not
+          .null;
+        expect(user.status.banned.history[1]).to.have.property('status').to.be
+          .false;
+        expect(user.status.banned.history[1]).to.have.property(
+          'assigned_by',
+          actor.id
+        );
+        expect(user.status.banned.history[1]).to.have.property('created_at').not
+          .null;
+
+        expect(user.banned).to.be.false;
+      }
+    });
+  });
+});
diff --git a/test/server/graph/mutations/setUserSuspensionStatus.js b/test/server/graph/mutations/setUserSuspensionStatus.js
new file mode 100644
index 000000000..f0b81cf49
--- /dev/null
+++ b/test/server/graph/mutations/setUserSuspensionStatus.js
@@ -0,0 +1,199 @@
+const { graphql } = require('graphql');
+const timekeeper = require('timekeeper');
+
+const schema = require('../../../../graph/schema');
+const Context = require('../../../../graph/context');
+const SettingsService = require('../../../../services/settings');
+const UserModel = require('../../../../models/user');
+const UsersService = require('../../../../services/users');
+const mailer = require('../../../../services/mailer');
+
+const sinon = require('sinon');
+const chai = require('chai');
+chai.use(require('chai-datetime'));
+chai.use(require('sinon-chai'));
+const { expect } = chai;
+
+describe('graph.mutations.suspendUser', () => {
+  let user;
+  beforeEach(async () => {
+    await SettingsService.init();
+
+    user = await UsersService.createLocalUser(
+      'usernameA@example.com',
+      'password',
+      'usernameA'
+    );
+  });
+
+  let spy;
+  before(() => {
+    spy = sinon.spy(mailer, 'send');
+  });
+
+  afterEach(() => {
+    spy.reset();
+  });
+
+  after(() => {
+    spy.restore();
+  });
+
+  const mutation = `
+    mutation SuspendUser($user_id: ID!, $until: Date!, $message: String!) {
+      suspendUser(input: {
+        id: $user_id,
+        until: $until,
+        message: $message,
+      }) {
+        errors {
+          translation_key
+        }
+      }
+    }
+
+    mutation UnSuspendUser($user_id: ID!) {
+      unsuspendUser(input: {
+        id: $user_id,
+      }) {
+        errors {
+          translation_key
+        }
+      }
+    }
+  `;
+
+  [
+    { self: true, error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+    { self: true, error: 'NOT_AUTHORIZED', role: 'STAFF' },
+    { self: true, error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+    { error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+    { error: 'NOT_AUTHORIZED', role: 'STAFF' },
+    { error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+    { error: false, role: 'MODERATOR' },
+    { error: false, role: 'ADMIN' },
+  ].forEach(({ self, error, role }) => {
+    it(`${error ? 'can not' : 'can'} suspend ${
+      self ? 'themself' : 'another user'
+    } as a user with role ${role}`, async () => {
+      const actor = new UserModel({ role });
+
+      // If we're testing self assign, set the id of the actor to the user
+      // we're acting on.
+      if (self) {
+        actor.id = user.id;
+      }
+
+      const ctx = new Context({ user: actor });
+
+      const now = new Date();
+      const oneHourFromNow = new Date(
+        new Date(now).setHours(now.getHours() + 1)
+      );
+
+      const { data, errors } = await graphql(
+        schema,
+        mutation,
+        {},
+        ctx,
+        {
+          user_id: user.id,
+          until: oneHourFromNow,
+          message: 'This is a message',
+        },
+        'SuspendUser'
+      );
+
+      if (errors && errors.length > 0) {
+        console.error(errors);
+      }
+      expect(errors).to.be.undefined;
+      if (error) {
+        expect(data.suspendUser).to.have.property('errors').not.null;
+        expect(data.suspendUser.errors[0]).to.have.property(
+          'translation_key',
+          error
+        );
+      } else {
+        expect(data.suspendUser).to.be.null;
+
+        user = await UserModel.findOne({ id: user.id });
+
+        // Mongoose messes with the date, check within a 2 second window.
+        expect(user.status.suspension.until).to.be.withinTime(
+          new Date(oneHourFromNow.getTime() - 1000),
+          new Date(oneHourFromNow.getTime() + 1000)
+        );
+        expect(user.status.suspension.history).to.have.length(1);
+        expect(user.status.suspension.history[0])
+          .to.have.property('until')
+          .to.be.withinTime(
+            new Date(oneHourFromNow.getTime() - 1000),
+            new Date(oneHourFromNow.getTime() + 1000)
+          );
+        expect(user.status.suspension.history[0]).to.have.property(
+          'assigned_by',
+          actor.id
+        );
+        expect(user.status.suspension.history[0]).to.have.property(
+          'message',
+          'This is a message'
+        );
+        expect(user.status.suspension.history[0]).to.have.property('created_at')
+          .not.null;
+
+        expect(user.suspended).to.be.true;
+        timekeeper.travel(new Date(oneHourFromNow.getTime() + 10000));
+        expect(user.suspended).to.be.false;
+        timekeeper.reset();
+
+        expect(spy).to.have.been.calledOnce;
+
+        const res = await graphql(
+          schema,
+          mutation,
+          {},
+          ctx,
+          {
+            user_id: user.id,
+            until: null,
+          },
+          'UnSuspendUser'
+        );
+        if (res.errors && res.errors.length > 0) {
+          console.error(res.errors);
+        }
+        expect(res.errors).to.be.undefined;
+        expect(res.data.unsuspendUser).to.be.null;
+
+        user = await UserModel.findOne({ id: user.id });
+
+        // Mongoose messes with the date, check within a 2 second window.
+        expect(user.status.suspension.until).to.be.null;
+        expect(user.status.suspension.history).to.have.length(2);
+        expect(user.status.suspension.history[0])
+          .to.have.property('until')
+          .to.be.withinTime(
+            new Date(oneHourFromNow.getTime() - 1000),
+            new Date(oneHourFromNow.getTime() + 1000)
+          );
+        expect(user.status.suspension.history[0]).to.have.property(
+          'assigned_by',
+          actor.id
+        );
+        expect(user.status.suspension.history[0]).to.have.property('created_at')
+          .not.null;
+        expect(user.status.suspension.history[1]).to.have.property('until').to
+          .be.null;
+        expect(user.status.suspension.history[1]).to.have.property(
+          'assigned_by',
+          actor.id
+        );
+        expect(user.status.suspension.history[1]).to.have.property('created_at')
+          .not.null;
+
+        expect(user.suspended).to.be.false;
+      }
+    });
+  });
+});
diff --git a/test/server/graph/mutations/setUserUsernameStatus.js b/test/server/graph/mutations/setUserUsernameStatus.js
new file mode 100644
index 000000000..d37bf4bf3
--- /dev/null
+++ b/test/server/graph/mutations/setUserUsernameStatus.js
@@ -0,0 +1,118 @@
+const { graphql } = require('graphql');
+
+const schema = require('../../../../graph/schema');
+const Context = require('../../../../graph/context');
+const SettingsService = require('../../../../services/settings');
+const UserModel = require('../../../../models/user');
+const UsersService = require('../../../../services/users');
+
+const chai = require('chai');
+chai.use(require('chai-datetime'));
+const { expect } = chai;
+
+[
+  { status: 'APPROVED', name: 'approve', mutation: 'approveUsername' },
+  { status: 'REJECTED', name: 'reject', mutation: 'rejectUsername' },
+].forEach(({ status, name, mutation }) => {
+  describe(`graph.mutations.${mutation}`, () => {
+    let user;
+    beforeEach(async () => {
+      await SettingsService.init();
+
+      user = await UsersService.createLocalUser(
+        'usernameA@example.com',
+        'password',
+        'usernameA'
+      );
+    });
+
+    const setUserUsernameStatusMutation = `
+    mutation SetUserUsernameStatus($user_id: ID!) {
+      ${mutation}(id: $user_id) {
+        errors {
+          translation_key
+        }
+      }
+    }
+  `;
+
+    [
+      { self: true, error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+      { self: true, error: 'NOT_AUTHORIZED', role: 'STAFF' },
+      { self: true, error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+      { error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+      { error: 'NOT_AUTHORIZED', role: 'STAFF' },
+      { error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+      { error: false, role: 'MODERATOR' },
+      { error: false, role: 'ADMIN' },
+    ].forEach(({ self, error, role }) => {
+      it(`${
+        error ? 'can not' : 'can'
+      } ${name} a username with the user role ${role}${
+        self ? ' on themself' : ''
+      }`, async () => {
+        const actor = new UserModel({ role });
+
+        // If we're testing self assign, set the id of the actor to the user
+        // we're acting on.
+        if (self) {
+          actor.id = user.id;
+        }
+
+        const ctx = new Context({ user: actor });
+
+        const { data, errors } = await graphql(
+          schema,
+          setUserUsernameStatusMutation,
+          {},
+          ctx,
+          {
+            user_id: user.id,
+          }
+        );
+
+        if (errors && errors.length > 0) {
+          console.error(errors);
+        }
+        expect(errors).to.be.undefined;
+        if (error) {
+          expect(data[mutation]).to.have.property('errors').not.null;
+          expect(data[mutation].errors[0]).to.have.property(
+            'translation_key',
+            error
+          );
+        } else {
+          expect(data[mutation]).to.be.null;
+
+          user = await UserModel.findOne({ id: user.id });
+
+          expect(user.status.username.status).to.equal(status);
+          expect(user.status.username.history).to.have.length(2);
+          expect(user.status.username.history[0]).to.have.property(
+            'status',
+            'SET'
+          );
+          expect(user.status.username.history[0]).to.have.property(
+            'assigned_by'
+          ).is.null;
+          expect(user.status.username.history[0]).to.have.property('created_at')
+            .not.null;
+          expect(user.status.username.history[1]).to.have.property(
+            'status',
+            status
+          );
+          expect(user.status.username.history[1]).to.have.property(
+            'assigned_by',
+            actor.id
+          );
+          expect(user.status.username.history[1]).to.have.property('created_at')
+            .not.null;
+
+          expect(user.status.username.history[1].created_at).afterTime(
+            user.status.username.history[0].created_at
+          );
+        }
+      });
+    });
+  });
+});
diff --git a/test/server/graph/mutations/updateAssetSettings.js b/test/server/graph/mutations/updateAssetSettings.js
index 306209c74..caf8a7cd9 100644
--- a/test/server/graph/mutations/updateAssetSettings.js
+++ b/test/server/graph/mutations/updateAssetSettings.js
@@ -1,4 +1,4 @@
-const {graphql} = require('graphql');
+const { graphql } = require('graphql');
 
 const schema = require('../../../../graph/schema');
 const Context = require('../../../../graph/context');
@@ -6,13 +6,13 @@ const UserModel = require('../../../../models/user');
 const SettingsService = require('../../../../services/settings');
 const AssetModel = require('../../../../models/asset');
 
-const {expect} = require('chai');
+const { expect } = require('chai');
 
 describe('graph.mutations.updateAssetSettings', () => {
   let asset;
   beforeEach(async () => {
     await SettingsService.init();
-    asset = await AssetModel.create({url: 'http://new.test.com/'});
+    asset = await AssetModel.create({ url: 'http://new.test.com/' });
   });
 
   const QUERY = `
@@ -22,19 +22,18 @@ describe('graph.mutations.updateAssetSettings', () => {
         translation_key
       }
     }
-  }
-`;
+  }`;
 
   describe('context with different user roles', () => {
-
     [
-      {error: 'NOT_AUTHORIZED'},
-      {roles: ['ADMIN', 'MODERATOR']},
-      {roles: ['MODERATOR']},
-    ].forEach(({roles, error}) => {
-      it(roles ? roles.join(', ') : '<None>', async () => {
-        const user = new UserModel({roles});
-        const ctx = new Context({user});
+      { role: 'COMMENTER', error: 'NOT_AUTHORIZED' },
+      { role: 'STAFF', error: 'NOT_AUTHORIZED' },
+      { role: 'ADMIN' },
+      { role: 'MODERATOR' },
+    ].forEach(({ role, error }) => {
+      it(`role = ${role}`, async () => {
+        const user = new UserModel({ role });
+        const ctx = new Context({ user });
 
         const settings = {
           premodLinksEnable: false,
@@ -55,16 +54,25 @@ describe('graph.mutations.updateAssetSettings', () => {
 
         if (error) {
           expect(res.data.updateAssetSettings.errors).to.not.be.empty;
-          expect(res.data.updateAssetSettings.errors[0]).to.have.property('translation_key', error);
+          expect(res.data.updateAssetSettings.errors[0]).to.have.property(
+            'translation_key',
+            error
+          );
         } else {
-          if (res.data.updateAssetSettings && res.data.updateAssetSettings.errors) {
+          if (
+            res.data.updateAssetSettings &&
+            res.data.updateAssetSettings.errors
+          ) {
             console.error(res.data.updateAssetSettings.errors);
           }
           expect(res.data.updateAssetSettings).to.be.null;
 
-          const retrievedAsset = await AssetModel.findOne({id: asset.id});
-          Object.keys(settings).forEach((key) => {
-            expect(retrievedAsset.settings).to.have.property(key, settings[key]);
+          const retrievedAsset = await AssetModel.findOne({ id: asset.id });
+          Object.keys(settings).forEach(key => {
+            expect(retrievedAsset.settings).to.have.property(
+              key,
+              settings[key]
+            );
           });
         }
       });
diff --git a/test/server/graph/mutations/updateAssetStatus.js b/test/server/graph/mutations/updateAssetStatus.js
index 77be55976..522b43185 100644
--- a/test/server/graph/mutations/updateAssetStatus.js
+++ b/test/server/graph/mutations/updateAssetStatus.js
@@ -1,4 +1,4 @@
-const {graphql} = require('graphql');
+const { graphql } = require('graphql');
 
 const schema = require('../../../../graph/schema');
 const Context = require('../../../../graph/context');
@@ -6,13 +6,13 @@ const UserModel = require('../../../../models/user');
 const SettingsService = require('../../../../services/settings');
 const AssetModel = require('../../../../models/asset');
 
-const {expect} = require('chai');
+const { expect } = require('chai');
 
 describe('graph.mutations.updateAssetStatus', () => {
   let asset;
   beforeEach(async () => {
     await SettingsService.init();
-    asset = await AssetModel.create({url: 'http://new.test.com/'});
+    asset = await AssetModel.create({ url: 'http://new.test.com/' });
   });
 
   const QUERY = `
@@ -26,17 +26,16 @@ describe('graph.mutations.updateAssetStatus', () => {
   `;
 
   describe('context with different user roles', () => {
-
     [
-      {error: 'NOT_AUTHORIZED'},
-      {roles: ['ADMIN', 'MODERATOR']},
-      {roles: ['MODERATOR']},
-    ].forEach(({roles, error}) => {
-      it(roles ? roles.join(', ') : '<None>', async () => {
-        const user = new UserModel({roles});
-        const ctx = new Context({user});
+      { role: 'COMMENTER', error: 'NOT_AUTHORIZED' },
+      { role: 'ADMIN' },
+      { role: 'MODERATOR' },
+    ].forEach(({ role, error }) => {
+      it(`role = ${role}`, async () => {
+        const user = new UserModel({ role });
+        const ctx = new Context({ user });
 
-        const closedAt = (new Date()).toISOString();
+        const closedAt = new Date().toISOString();
         const closedMessage = 'my closed message!';
 
         const res = await graphql(schema, QUERY, {}, ctx, {
@@ -53,16 +52,22 @@ describe('graph.mutations.updateAssetStatus', () => {
 
         if (error) {
           expect(res.data.updateAssetStatus.errors).to.not.be.empty;
-          expect(res.data.updateAssetStatus.errors[0]).to.have.property('translation_key', error);
+          expect(res.data.updateAssetStatus.errors[0]).to.have.property(
+            'translation_key',
+            error
+          );
         } else {
           if (res.data.updateAssetStatus && res.data.updateAssetStatus.errors) {
             console.error(res.data.updateAssetStatus.errors);
           }
           expect(res.data.updateAssetStatus).to.be.null;
 
-          const retrievedAsset = await AssetModel.findOne({id: asset.id});
+          const retrievedAsset = await AssetModel.findOne({ id: asset.id });
           expect(retrievedAsset.closedAt).to.not.be.null;
-          expect(retrievedAsset).to.have.property('closedMessage', closedMessage);
+          expect(retrievedAsset).to.have.property(
+            'closedMessage',
+            closedMessage
+          );
         }
       });
     });
diff --git a/test/server/graph/mutations/updateSettings.js b/test/server/graph/mutations/updateSettings.js
index 553a2be65..4d4f8cf50 100644
--- a/test/server/graph/mutations/updateSettings.js
+++ b/test/server/graph/mutations/updateSettings.js
@@ -1,4 +1,4 @@
-const {graphql} = require('graphql');
+const { graphql } = require('graphql');
 
 const schema = require('../../../../graph/schema');
 const Context = require('../../../../graph/context');
@@ -6,10 +6,9 @@ const UserModel = require('../../../../models/user');
 const SettingsService = require('../../../../services/settings');
 const isEqual = require('lodash/isEqual');
 
-const {expect} = require('chai');
+const { expect } = require('chai');
 
 describe('graph.mutations.updateSettings', () => {
-
   beforeEach(async () => {
     await SettingsService.init();
   });
@@ -21,24 +20,17 @@ describe('graph.mutations.updateSettings', () => {
         translation_key
       }
     }
-  }
-`;
+  }`;
 
   describe('context with different user roles', () => {
-
     [
-      {error: 'NOT_AUTHORIZED'},
-      {error: 'NOT_AUTHORIZED', roles: []},
-      {roles: ['ADMIN']},
-      {roles: ['ADMIN', 'MODERATOR']},
-      {roles: ['MODERATOR']},
-    ].forEach(({roles, error}) => {
-      it(roles ? roles.join(', ') : '<None>', async () => {
-        let user;
-        if (roles != null) {
-          user = new UserModel({roles});
-        }
-        const ctx = new Context({user});
+      { error: 'NOT_AUTHORIZED', role: 'COMMENTER' },
+      { error: 'NOT_AUTHORIZED', role: 'MODERATOR' },
+      { role: 'ADMIN' },
+    ].forEach(({ role, error }) => {
+      it(`role = ${role}`, async () => {
+        const user = new UserModel({ role });
+        const ctx = new Context({ user });
 
         const newSettings = {
           premodLinksEnable: false,
@@ -58,7 +50,10 @@ describe('graph.mutations.updateSettings', () => {
 
         if (error) {
           expect(res.data.updateSettings.errors).to.not.be.empty;
-          expect(res.data.updateSettings.errors[0]).to.have.property('translation_key', error);
+          expect(res.data.updateSettings.errors[0]).to.have.property(
+            'translation_key',
+            error
+          );
         } else {
           if (res.data.updateSettings && res.data.updateSettings.errors) {
             console.error(res.data.updateSettings.errors);
@@ -66,7 +61,7 @@ describe('graph.mutations.updateSettings', () => {
           expect(res.data.updateSettings).to.be.null;
 
           const retrievedSettings = await SettingsService.retrieve();
-          Object.keys(newSettings).forEach((key) => {
+          Object.keys(newSettings).forEach(key => {
             expect(retrievedSettings).to.have.property(key, newSettings[key]);
           });
         }
@@ -75,8 +70,8 @@ describe('graph.mutations.updateSettings', () => {
   });
 
   describe('nested objects', () => {
-    const user = new UserModel({roles: ['ADMIN']});
-    const ctx = new Context({user});
+    const user = new UserModel({ role: 'ADMIN' });
+    const ctx = new Context({ user });
 
     it('should handle nested objects', async () => {
       const initSettings = {
@@ -104,11 +99,16 @@ describe('graph.mutations.updateSettings', () => {
       expect(res.data.updateSettings).to.be.null;
 
       let retrievedSettings = await SettingsService.retrieve();
-      Object.keys(initSettings).forEach((key) => {
-        Object.keys(initSettings[key]).forEach((nestedKey) => {
+      Object.keys(initSettings).forEach(key => {
+        Object.keys(initSettings[key]).forEach(nestedKey => {
           expect(retrievedSettings).to.have.property(key);
           expect(retrievedSettings[key]).to.have.property(nestedKey);
-          expect(isEqual(retrievedSettings[key][nestedKey], initSettings[key][nestedKey])).to.be.true;
+          expect(
+            isEqual(
+              retrievedSettings[key][nestedKey],
+              initSettings[key][nestedKey]
+            )
+          ).to.be.true;
         });
       });
 
@@ -127,7 +127,7 @@ describe('graph.mutations.updateSettings', () => {
         },
         domains: {
           whitelist: change.domains.whitelist,
-        }
+        },
       });
 
       res = await graphql(schema, QUERY, {}, ctx, {
@@ -146,11 +146,16 @@ describe('graph.mutations.updateSettings', () => {
       expect(res.data.updateSettings).to.be.null;
 
       retrievedSettings = await SettingsService.retrieve();
-      Object.keys(changedSettings).forEach((key) => {
-        Object.keys(changedSettings[key]).forEach((nestedKey) => {
+      Object.keys(changedSettings).forEach(key => {
+        Object.keys(changedSettings[key]).forEach(nestedKey => {
           expect(retrievedSettings).to.have.property(key);
           expect(retrievedSettings[key]).to.have.property(nestedKey);
-          expect(isEqual(retrievedSettings[key][nestedKey], changedSettings[key][nestedKey])).to.be.true;
+          expect(
+            isEqual(
+              retrievedSettings[key][nestedKey],
+              changedSettings[key][nestedKey]
+            )
+          ).to.be.true;
         });
       });
     });
diff --git a/test/server/graph/queries/asset.js b/test/server/graph/queries/asset.js
index b49eb7429..af19e4f69 100644
--- a/test/server/graph/queries/asset.js
+++ b/test/server/graph/queries/asset.js
@@ -1,4 +1,4 @@
-const {graphql} = require('graphql');
+const { graphql } = require('graphql');
 
 const schema = require('../../../../graph/schema');
 const Context = require('../../../../graph/context');
@@ -7,42 +7,44 @@ const SettingsService = require('../../../../services/settings');
 const Asset = require('../../../../models/asset');
 const CommentsService = require('../../../../services/comments');
 
-const {expect} = require('chai');
+const { expect } = require('chai');
 
 describe('graph.queries.asset', () => {
   let assets, users, comments;
   beforeEach(async () => {
     await SettingsService.init();
     assets = await Asset.create([
-      {id: '1', url: 'https://example.com/?id=1'},
-      {id: '2', url: 'https://example.com/?id=2'}
+      { id: '1', url: 'https://example.com/?id=1' },
+      { id: '2', url: 'https://example.com/?id=2' },
     ]);
     users = await UsersService.createLocalUsers([
       {
         email: 'usernameA@example.com',
         password: 'password',
-        username: 'usernameA'
+        username: 'usernameA',
       },
       {
         email: 'usernameB@example.com',
         password: 'password',
-        username: 'usernameB'
+        username: 'usernameB',
       },
       {
         email: 'usernameC@example.com',
         password: 'password',
-        username: 'usernameC'
-      }
+        username: 'usernameC',
+      },
     ]);
-    comments = await CommentsService.publicCreate([0, 0, 1, 1].map((idx) => ({
-      author_id: users[idx].id,
-      asset_id: assets[idx].id,
-      body: `hello there! ${String(Math.random()).slice(2)}`,
-    })));
+    comments = await CommentsService.publicCreate(
+      [0, 0, 1, 1].map(idx => ({
+        author_id: users[idx].id,
+        asset_id: assets[idx].id,
+        body: `hello there! ${String(Math.random()).slice(2)}`,
+      }))
+    );
   });
 
   it('will not show the same asset stream across multiple assets', async () => {
-    const context = new Context({user: users[0]});
+    const context = new Context({ user: users[0] });
 
     const query = `
       fragment assetFragment on Asset {
@@ -64,20 +66,30 @@ describe('graph.queries.asset', () => {
       }
     `;
 
-    let res = await graphql(schema, query, {}, context, {id: assets[0].id, otherID: assets[1].id});
+    let res = await graphql(schema, query, {}, context, {
+      id: assets[0].id,
+      otherID: assets[1].id,
+    });
     if (res.errors) {
       console.error(res.errors);
     }
     expect(res.errors).is.empty;
 
-    let {asset: {comments: asset}, otherAsset: {comments: otherAsset}} = res.data;
+    let {
+      asset: { comments: asset },
+      otherAsset: { comments: otherAsset },
+    } = res.data;
 
     expect(asset.nodes).to.have.length(2);
     expect(asset.hasNextPage).to.be.false;
-    expect(asset.nodes.map(({id}) => id)).to.have.members(comments.slice(0, 2).map(({id}) => id));
+    expect(asset.nodes.map(({ id }) => id)).to.have.members(
+      comments.slice(0, 2).map(({ id }) => id)
+    );
     expect(otherAsset.nodes).to.have.length(2);
     expect(otherAsset.hasNextPage).to.be.false;
-    expect(otherAsset.nodes.map(({id}) => id)).to.have.members(comments.slice(2, 4).map(({id}) => id));
+    expect(otherAsset.nodes.map(({ id }) => id)).to.have.members(
+      comments.slice(2, 4).map(({ id }) => id)
+    );
 
     for (let node of asset.nodes) {
       for (let otherNode of otherAsset.nodes) {
@@ -87,7 +99,7 @@ describe('graph.queries.asset', () => {
   });
 
   it('can get comments edge', async () => {
-    const context = new Context({user: users[0]});
+    const context = new Context({ user: users[0] });
 
     const assetCommentsQuery = `
       query assetCommentsQuery($id: ID!) {
@@ -105,8 +117,15 @@ describe('graph.queries.asset', () => {
         }
       }
     `;
-    const res = await graphql(schema, assetCommentsQuery, {}, context, {id: assets[0].id});
-    const {nodes, startCursor, endCursor, hasNextPage} = res.data.asset.comments;
+    const res = await graphql(schema, assetCommentsQuery, {}, context, {
+      id: assets[0].id,
+    });
+    const {
+      nodes,
+      startCursor,
+      endCursor,
+      hasNextPage,
+    } = res.data.asset.comments;
     expect(nodes.length).to.equal(2);
     expect(startCursor).to.equal(nodes[0].created_at);
     expect(endCursor).to.equal(nodes[1].created_at);
@@ -114,7 +133,7 @@ describe('graph.queries.asset', () => {
   });
 
   it('can query comments edge to exclude comments ignored by user', async () => {
-    const context = new Context({user: users[0]});
+    const context = new Context({ user: users[0] });
 
     // Add the second user to the list of ignored users.
     context.user.ignoresUsers.push(users[1].id);
@@ -136,12 +155,11 @@ describe('graph.queries.asset', () => {
       const res = await graphql(schema, query, {}, context, {
         id: assets[0].id,
         url: assets[0].url,
-        excludeIgnored: true
+        excludeIgnored: true,
       });
       expect(res.errors).is.empty;
-      const {nodes} = res.data.asset.comments;
+      const { nodes } = res.data.asset.comments;
       expect(nodes.length).to.equal(2);
     }
   });
-
 });
diff --git a/test/server/graph/queries/settings.js b/test/server/graph/queries/settings.js
index 338999145..e9d4e1403 100644
--- a/test/server/graph/queries/settings.js
+++ b/test/server/graph/queries/settings.js
@@ -1,14 +1,14 @@
-const {graphql} = require('graphql');
+const { graphql } = require('graphql');
 
 const schema = require('../../../../graph/schema');
 const Context = require('../../../../graph/context');
 const SettingsService = require('../../../../services/settings');
 const UserModel = require('../../../../models/user');
 
-const {expect} = require('chai');
+const { expect } = require('chai');
 
 const defaultSettings = {
-  organizationName: 'The Coral Project'
+  organizationName: 'The Coral Project',
 };
 
 describe('graph.queries.settings', () => {
@@ -47,7 +47,6 @@ describe('graph.queries.settings', () => {
   `;
 
   describe('context with different user roles', () => {
-
     const BLACKLISTED_PROPERTIES = [
       'premodLinksEnable',
       'autoCloseStream',
@@ -56,19 +55,13 @@ describe('graph.queries.settings', () => {
     ];
 
     [
-      {bl: true},
-      {bl: true, roles: []},
-      {bl: false, roles: ['ADMIN']},
-      {bl: false, roles: ['ADMIN', 'MODERATOR']},
-      {bl: false, roles: ['MODERATOR']},
-    ].forEach(({bl, roles}) => {
-      it(roles && roles.length > 0 ? roles.join(', ') : '<None>', async () => {
-        let user;
-        if (roles != null) {
-          user = new UserModel({roles});
-        }
-
-        const ctx = new Context({user});
+      { bl: true, role: 'COMMENTER' },
+      { bl: false, role: 'ADMIN' },
+      { bl: false, role: 'MODERATOR' },
+    ].forEach(({ bl, role }) => {
+      it(`role = ${role}`, async () => {
+        let user = new UserModel({ role });
+        const ctx = new Context({ user });
 
         const res = await graphql(schema, QUERY, {}, ctx);
         if (res.errors) {
@@ -77,7 +70,7 @@ describe('graph.queries.settings', () => {
 
         expect(res.errors).to.be.empty;
         expect(res.data.settings).to.be.object;
-        Object.keys(res.data.settings).forEach((key) => {
+        Object.keys(res.data.settings).forEach(key => {
           if (bl && BLACKLISTED_PROPERTIES.includes(key)) {
             expect(res.data.settings).to.have.property(key, null);
             return;
@@ -93,5 +86,4 @@ describe('graph.queries.settings', () => {
       });
     });
   });
-
 });
diff --git a/test/server/graph/queries/user.js b/test/server/graph/queries/user.js
new file mode 100644
index 000000000..c5727987e
--- /dev/null
+++ b/test/server/graph/queries/user.js
@@ -0,0 +1,90 @@
+const { graphql } = require('graphql');
+
+const schema = require('../../../../graph/schema');
+const Context = require('../../../../graph/context');
+const SettingsService = require('../../../../services/settings');
+const UserModel = require('../../../../models/user');
+const UsersService = require('../../../../services/users');
+
+const chai = require('chai');
+chai.use(require('chai-datetime'));
+const { expect } = chai;
+
+describe('graph.queries.user', () => {
+  let user;
+  beforeEach(async () => {
+    await SettingsService.init();
+
+    user = await UsersService.createLocalUser(
+      'usernameA@example.com',
+      'password',
+      'usernameA'
+    );
+  });
+
+  describe('state', () => {
+    const meQuery = `
+      query Me {
+        me {
+          state {
+            status {
+              username {
+                status
+              }
+            }
+          }
+        }
+      }
+    `;
+
+    it('can query me', async () => {
+      const ctx = new Context({ user });
+
+      const { data, errors } = await graphql(schema, meQuery, {}, ctx);
+
+      expect(errors).to.be.undefined;
+      expect(data.me).to.not.be.null;
+      expect(data.me.state).not.to.be.null;
+      expect(data.me.state.status.username.status).to.be.equal('SET');
+    });
+
+    const query = `
+      query User($user_id: ID!) {
+        user(id: $user_id) {
+          state {
+            status {
+              username {
+                status
+              }
+            }
+          }
+        }
+      }
+    `;
+
+    [
+      { role: 'COMMENTER', can: false },
+      { role: 'STAFF', can: false },
+      { role: 'MODERATOR', can: true },
+      { role: 'ADMIN', can: true },
+    ].forEach(({ role, can }) => {
+      it(`${can ? 'can' : 'can not'} query with role = ${role}`, async () => {
+        const actor = new UserModel({ role });
+        const ctx = new Context({ user: actor });
+
+        const { data, errors } = await graphql(schema, query, {}, ctx, {
+          user_id: user.id,
+        });
+
+        expect(errors).to.be.undefined;
+        if (!can) {
+          expect(data.user).to.be.null;
+        } else {
+          expect(data.user).to.not.be.null;
+          expect(data.user.state).not.to.be.null;
+          expect(data.user.state.status.username.status).to.be.equal('SET');
+        }
+      });
+    });
+  });
+});
diff --git a/test/server/middleware/authorization.js b/test/server/middleware/authorization.js
index 7966cffa9..bc9c3dd0b 100644
--- a/test/server/middleware/authorization.js
+++ b/test/server/middleware/authorization.js
@@ -6,13 +6,14 @@ const authz = require('../../../middleware/authorization');
 describe('middleware.authorization', () => {
   describe('#has', () => {
     it('allows if no roles are specified', () => {
-      expect(authz.has({roles: []})).to.be.true;
+      expect(authz.has({ role: 'COMMENTER' })).to.be.true;
     });
     it('allows if the correct roles are met', () => {
-      expect(authz.has({roles: ['ADMIN']}, 'ADMIN', 'MODERATOR')).to.be.true;
+      expect(authz.has({ role: 'ADMIN' }, 'ADMIN', 'MODERATOR')).to.be.true;
     });
     it('disallows if the role required is missing', () => {
-      expect(authz.has({roles: []}, 'ADMIN', 'MODERATOR')).to.be.false;
+      expect(authz.has({ role: 'COMMENTER' }, 'ADMIN', 'MODERATOR')).to.be
+        .false;
     });
   });
 
@@ -24,22 +25,22 @@ describe('middleware.authorization', () => {
     };
 
     it('allows if no roles are specified', () => {
-      needed()({user: {roles: []}}, {}, (err) => {
+      needed()({ user: { role: 'COMMENTER' } }, {}, err => {
         expect(err).to.be.undefined;
       });
     });
     it('allows if the correct roles are met', () => {
-      needed()({user: {roles: ['ADMIN']}}, {}, (err) => {
+      needed()({ user: { role: 'ADMIN' } }, {}, err => {
         expect(err).to.be.undefined;
       });
     });
     it('disallows if the role required is missing', () => {
-      needed('ADMIN', 'MODERATOR')({user: {roles: []}}, {}, (err) => {
+      needed('ADMIN', 'MODERATOR')({ user: { role: 'COMMENTER' } }, {}, err => {
         expect(err).to.not.be.undefined;
       });
     });
     it('disallows if there is no user on the request', () => {
-      needed('ADMIN', 'MODERATOR')({}, {}, (err) => {
+      needed('ADMIN', 'MODERATOR')({}, {}, err => {
         expect(err).to.not.be.undefined;
       });
     });
diff --git a/test/server/migrations/1510174676_user_status.js b/test/server/migrations/1510174676_user_status.js
new file mode 100644
index 000000000..8e1ceca5d
--- /dev/null
+++ b/test/server/migrations/1510174676_user_status.js
@@ -0,0 +1,200 @@
+const migration = require('../../../migrations/1510174676_user_status');
+const UserModel = require('../../../models/user');
+
+const chai = require('chai');
+chai.use(require('chai-datetime'));
+const { expect } = chai;
+
+describe('migration.1510174676_user_status', () => {
+  describe('active user', () => {
+    beforeEach(async () => {
+      await UserModel.collection.insert({
+        id: '123',
+        username: 'Kirk',
+        lowercaseUsername: 'kirk',
+        status: 'ACTIVE',
+        canEditName: false,
+      });
+    });
+
+    it('completes the migration', async () => {
+      let user = await UserModel.collection.findOne({ id: '123' });
+
+      expect(user).to.have.property('status', 'ACTIVE');
+      expect(user).to.have.property('canEditName', false);
+
+      // Perform the migration.
+      await migration.up();
+
+      user = await UserModel.collection.findOne({ id: '123' });
+
+      // Check that it was correct.
+      expect(user).to.have.property('status');
+      expect(user.status).to.have.property('username');
+      expect(user.status.username).to.have.property('status', 'SET');
+      expect(user.status.username.history).to.have.length(1);
+    });
+  });
+
+  describe('social user', () => {
+    beforeEach(async () => {
+      await UserModel.collection.insert({
+        id: '123',
+        username: 'Kirk',
+        lowercaseUsername: 'kirk',
+        status: 'ACTIVE',
+        canEditName: true,
+      });
+    });
+
+    it('completes the migration', async () => {
+      let user = await UserModel.collection.findOne({ id: '123' });
+
+      expect(user).to.have.property('status', 'ACTIVE');
+      expect(user).to.have.property('canEditName', true);
+
+      // Perform the migration.
+      await migration.up();
+
+      user = await UserModel.collection.findOne({ id: '123' });
+
+      // Check that it was correct.
+      expect(user).to.have.property('status');
+      expect(user.status).to.have.property('username');
+      expect(user.status.username).to.have.property('status', 'UNSET');
+      expect(user.status.username.history).to.have.length(1);
+    });
+  });
+
+  describe('rejected username', () => {
+    beforeEach(async () => {
+      await UserModel.collection.insert({
+        id: '123',
+        username: 'Kirk',
+        lowercaseUsername: 'kirk',
+        status: 'BANNED',
+        canEditName: true,
+      });
+    });
+
+    it('completes the migration', async () => {
+      let user = await UserModel.collection.findOne({ id: '123' });
+
+      expect(user).to.have.property('status');
+      expect(user.status).to.equal('BANNED');
+      expect(user.canEditName).to.equal(true);
+
+      // Perform the migration.
+      await migration.up();
+
+      user = await UserModel.collection.findOne({ id: '123' });
+
+      // Check that it was correct.
+      expect(user).to.have.property('status');
+      expect(user.status).to.have.property('banned');
+      expect(user.status.banned).to.have.property('status', false);
+      expect(user.status.username).to.have.property('status', 'REJECTED');
+      expect(user.status.username.history).to.have.length(1);
+    });
+  });
+
+  describe('approved username', () => {
+    beforeEach(async () => {
+      await UserModel.collection.insert({
+        id: '123',
+        username: 'Kirk',
+        lowercaseUsername: 'kirk',
+        status: 'APPROVED',
+        canEditName: false,
+      });
+    });
+
+    it('completes the migration', async () => {
+      let user = await UserModel.collection.findOne({ id: '123' });
+
+      expect(user).to.have.property('status');
+      expect(user.status).to.equal('APPROVED');
+      expect(user.canEditName).to.equal(false);
+
+      // Perform the migration.
+      await migration.up();
+
+      user = await UserModel.collection.findOne({ id: '123' });
+
+      // Check that it was correct.
+      expect(user).to.have.property('status');
+      expect(user.status).to.have.property('banned');
+      expect(user.status.banned).to.have.property('status', false);
+      expect(user.status.username).to.have.property('status', 'APPROVED');
+      expect(user.status.username.history).to.have.length(1);
+    });
+  });
+
+  describe('suspended user', () => {
+    beforeEach(async () => {
+      await UserModel.collection.insert({
+        id: '123',
+        username: 'Kirk',
+        lowercaseUsername: 'kirk',
+        status: 'ACTIVE',
+        suspension: {
+          until: new Date(),
+        },
+      });
+    });
+
+    it('completes the migration', async () => {
+      let user = await UserModel.collection.findOne({ id: '123' });
+
+      expect(user).to.have.property('suspension');
+      expect(user.suspension).to.have.property('until');
+      expect(user.suspension.until).to.not.be.null;
+
+      const until = user.suspension.until;
+
+      // Perform the migration.
+      await migration.up();
+
+      user = await UserModel.collection.findOne({ id: '123' });
+
+      // Check that it was correct.
+      expect(user).to.have.property('status');
+      expect(user.status).to.have.property('suspension');
+      expect(user.status.suspension).to.have.property('until');
+      expect(user.status.suspension.until).to.not.be.null;
+      expect(user.status.suspension.until).to.be.withinTime(
+        new Date(until.getTime() - 1000),
+        new Date(until.getTime() + 1000)
+      );
+    });
+  });
+
+  describe('banned user', () => {
+    beforeEach(async () => {
+      await UserModel.collection.insert({
+        id: '123',
+        username: 'Kirk',
+        lowercaseUsername: 'kirk',
+        status: 'BANNED',
+        canEditName: false,
+      });
+    });
+
+    it('completes the migration', async () => {
+      let user = await UserModel.collection.findOne({ id: '123' });
+
+      expect(user).to.have.property('status');
+      expect(user.status).to.equal('BANNED');
+
+      // Perform the migration.
+      await migration.up();
+
+      user = await UserModel.collection.findOne({ id: '123' });
+
+      // Check that it was correct.
+      expect(user).to.have.property('status');
+      expect(user.status).to.have.property('banned');
+      expect(user.status.banned).to.have.property('status', true);
+    });
+  });
+});
diff --git a/test/server/passport.js b/test/server/passport.js
index 401e50b77..b1bac2648 100644
--- a/test/server/passport.js
+++ b/test/server/passport.js
@@ -2,13 +2,14 @@ const authorization = require('../../middleware/authorization');
 
 // Add the passport middleware here before it's setup.
 authorization.middleware.push((req, res, next) => {
-  req.user = JSON.parse(new Buffer(req.get('X-Mock-Authorization'), 'base64').toString('ascii'));
+  req.user = JSON.parse(
+    new Buffer(req.get('X-Mock-Authorization'), 'base64').toString('ascii')
+  );
 
   next();
 });
 
 const MockStrategy = {
-
   /**
    * Injects the new user into the request header for the mock middleware to
    * interpret.
@@ -17,9 +18,11 @@ const MockStrategy = {
    */
   inject(user) {
     return {
-      'X-Mock-Authorization': new Buffer(JSON.stringify(user)).toString('base64')
+      'X-Mock-Authorization': new Buffer(JSON.stringify(user)).toString(
+        'base64'
+      ),
     };
-  }
+  },
 };
 
 module.exports = MockStrategy;
diff --git a/test/server/routes/api/account/index.js b/test/server/routes/api/account/index.js
deleted file mode 100644
index 83c98de2c..000000000
--- a/test/server/routes/api/account/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-const passport = require('../../../passport');
-
-const app = require('../../../../../app');
-
-const UsersService = require('../../../../../services/users');
-const SettingsService = require('../../../../../services/settings');
-const settings = {id: '1', moderation: 'PRE', wordlist: {banned: ['bad words'], suspect: ['suspect words']}};
-
-const chai = require('chai');
-chai.should();
-chai.use(require('chai-http'));
-const expect = chai.expect;
-
-describe('/api/v1/account/username', () => {
-  let mockUser;
-  beforeEach(async () => {
-    await SettingsService.init(settings);
-    mockUser = await UsersService.createLocalUser('ana@gmail.com', '123321123', 'Ana');
-  });
-
-  describe('#put', () => {
-    it('it should enable a user to edit their username if canEditName is enabled', async () => {
-      await chai.request(app)
-        .post(`/api/v1/users/${mockUser.id}/username-enable`)
-        .set(passport.inject({id: '456', roles: ['ADMIN']}));
-
-      const res = await chai.request(app)
-        .put('/api/v1/account/username')
-        .set(passport.inject({id: mockUser.id, roles: []}))
-        .send({username: 'MojoJojo'});
-
-      expect(res).to.have.status(204);
-    });
-
-    it('it should return an error if the wrong user tries to edit a username', async () => {
-      await chai.request(app)
-        .post(`/api/v1/users/${mockUser.id}/username-enable`)
-        .set(passport.inject({id: '456', roles: ['ADMIN']}));
-
-      let res = chai.request(app)
-        .put('/api/v1/account/username')
-        .set(passport.inject({id: 'wrongid', roles: []}))
-        .send({username: 'MojoJojo'});
-
-      return expect(res).to.eventually.be.rejected;
-    });
-
-    it('it should return an error when the user tries to edit their username if canEditName is disabled', () => {
-      let res = chai.request(app)
-        .put('/api/v1/account/username')
-        .set(passport.inject({id: mockUser.id, roles: []}))
-        .send({username: 'MojoJojo'});
-
-      return expect(res).to.eventually.be.rejected;
-    });
-  });
-});
diff --git a/test/server/routes/api/assets/index.js b/test/server/routes/api/assets/index.js
index 0dacccbad..526d303c8 100644
--- a/test/server/routes/api/assets/index.js
+++ b/test/server/routes/api/assets/index.js
@@ -12,9 +12,12 @@ const AssetsService = require('../../../../../services/assets');
 const SettingsService = require('../../../../../services/settings');
 
 describe('/api/v1/assets', () => {
-
   beforeEach(async () => {
-    const settings = {id: '1', moderation: 'PRE', domains: {whitelist: ['test.com']}};
+    const settings = {
+      id: '1',
+      moderation: 'PRE',
+      domains: { whitelist: ['test.com'] },
+    };
 
     await SettingsService.init(settings);
 
@@ -23,24 +26,24 @@ describe('/api/v1/assets', () => {
         url: 'https://coralproject.net/news/asset1',
         title: 'Asset 1',
         description: 'term1',
-        closedAt: Date.now()
+        closedAt: Date.now(),
       },
       {
         url: 'https://coralproject.net/news/asset2',
         title: 'Asset 2',
         description: 'term2',
-        closedAt: null
-      }
+        closedAt: null,
+      },
     ]);
   });
 
   describe('#get', () => {
-
     it('should return all assets without a search query', async () => {
       for (const role of ['ADMIN', 'MODERATOR']) {
-        const res = await chai.request(app)
+        const res = await chai
+          .request(app)
           .get('/api/v1/assets')
-          .set(passport.inject({roles: [role]}));
+          .set(passport.inject({ role }));
 
         const body = res.body;
 
@@ -55,9 +58,10 @@ describe('/api/v1/assets', () => {
 
     it('should return assets that we search for', async () => {
       for (const role of ['ADMIN', 'MODERATOR']) {
-        const res = await chai.request(app)
+        const res = await chai
+          .request(app)
           .get('/api/v1/assets?value=term2')
-          .set(passport.inject({roles: [role]}));
+          .set(passport.inject({ role }));
 
         const body = res.body;
 
@@ -70,16 +74,20 @@ describe('/api/v1/assets', () => {
 
         const asset = assets[0];
 
-        expect(asset).to.have.property('url', 'https://coralproject.net/news/asset2');
+        expect(asset).to.have.property(
+          'url',
+          'https://coralproject.net/news/asset2'
+        );
         expect(asset).to.have.property('title', 'Asset 2');
       }
     });
 
     it('should not return assets that we do not search for', async () => {
       for (const role of ['ADMIN', 'MODERATOR']) {
-        const res = await chai.request(app)
+        const res = await chai
+          .request(app)
           .get('/api/v1/assets?value=term3')
-          .set(passport.inject({roles: [role]}));
+          .set(passport.inject({ role }));
         const body = res.body;
 
         expect(body).to.have.property('count', 0);
@@ -91,9 +99,10 @@ describe('/api/v1/assets', () => {
 
     it('should return only closed assets', async () => {
       for (const role of ['ADMIN', 'MODERATOR']) {
-        const res = await chai.request(app)
+        const res = await chai
+          .request(app)
           .get('/api/v1/assets?filter=closed')
-          .set(passport.inject({roles: [role]}));
+          .set(passport.inject({ role }));
         const body = res.body;
 
         expect(body).to.have.property('count', 1);
@@ -107,9 +116,10 @@ describe('/api/v1/assets', () => {
 
     it('should return only opened assets', async () => {
       for (const role of ['ADMIN', 'MODERATOR']) {
-        const res = await chai.request(app)
+        const res = await chai
+          .request(app)
           .get('/api/v1/assets?filter=open')
-          .set(passport.inject({roles: [role]}));
+          .set(passport.inject({ role }));
         const body = res.body;
 
         expect(body).to.have.property('count', 1);
@@ -120,28 +130,29 @@ describe('/api/v1/assets', () => {
         expect(assets[0]).to.have.property('title', 'Asset 2');
       }
     });
-
   });
 
   describe('#put', () => {
     it('should close the asset', async () => {
-
       const today = Date.now();
 
       const asset = await AssetsService.findOrCreateByUrl('http://test.com');
       expect(asset).to.have.property('isClosed', false);
       expect(asset).to.have.property('closedAt', null);
 
-      const res = await chai.request(app)
+      const res = await chai
+        .request(app)
         .put(`/api/v1/assets/${asset.id}/status`)
-        .set(passport.inject({roles: ['ADMIN']}))
-        .send({closedAt: today});
+        .set(passport.inject({ role: 'ADMIN' }))
+        .send({ closedAt: today });
 
       expect(res).to.have.status(204);
 
       const closedAsset = await AssetsService.findByUrl('http://test.com');
       expect(closedAsset).to.have.property('isClosed', true);
-      expect(closedAsset).to.have.property('closedAt').and.to.not.equal(null);
+      expect(closedAsset)
+        .to.have.property('closedAt')
+        .and.to.not.equal(null);
     });
 
     it('should require ADMIN role', async () => {
@@ -151,12 +162,12 @@ describe('/api/v1/assets', () => {
       expect(asset).to.have.property('isClosed', false);
       expect(asset).to.have.property('closedAt', null);
 
-      const promise = chai.request(app)
+      const promise = chai
+        .request(app)
         .put(`/api/v1/assets/${asset.id}/status`)
-        .set(passport.inject({roles: ['MODERATOR']}))
-        .send({closedAt: today});
+        .set(passport.inject({ role: 'MODERATOR' }))
+        .send({ closedAt: today });
       await expect(promise).to.eventually.be.rejected;
     });
   });
-
 });
diff --git a/test/server/routes/api/auth/index.js b/test/server/routes/api/auth/index.js
index 8e3061938..7080cf157 100644
--- a/test/server/routes/api/auth/index.js
+++ b/test/server/routes/api/auth/index.js
@@ -10,9 +10,10 @@ const UsersService = require('../../../../../services/users');
 describe('/api/v1/auth', () => {
   describe('#get', () => {
     it('should return nothing when no user is logged in', () => {
-      return chai.request(app)
+      return chai
+        .request(app)
         .get('/api/v1/auth')
-        .then((res) => {
+        .then(res => {
           expect(res.status).to.be.equal(204);
           expect(res).to.not.have.a.body;
         });
@@ -23,23 +24,29 @@ describe('/api/v1/auth', () => {
 const SettingsService = require('../../../../../services/settings');
 
 describe('/api/v1/auth/local', () => {
-
   let mockUser;
   beforeEach(async () => {
-    const settings = {requireEmailConfirmation: false, wordlist: {banned: ['bad'], suspect: ['naughty']}};
+    const settings = {
+      requireEmailConfirmation: false,
+      wordlist: { banned: ['bad'], suspect: ['naughty'] },
+    };
     await SettingsService.init(settings);
 
-    mockUser = await UsersService.createLocalUser('maria@gmail.com', 'password!', 'Maria');
+    mockUser = await UsersService.createLocalUser(
+      'maria@gmail.com',
+      'password!',
+      'Maria'
+    );
   });
 
   describe('email confirmation disabled', () => {
-
     describe('#post', () => {
       it('should send back the user on a successful login', () => {
-        return chai.request(app)
+        return chai
+          .request(app)
           .post('/api/v1/auth/local')
-          .send({email: 'maria@gmail.com', password: 'password!'})
-          .then((res2) => {
+          .send({ email: 'maria@gmail.com', password: 'password!' })
+          .then(res2 => {
             expect(res2).to.have.status(200);
             expect(res2).to.be.json;
             expect(res2.body).to.have.property('user');
@@ -48,42 +55,50 @@ describe('/api/v1/auth/local', () => {
       });
 
       it('should not send back the user on a unsuccessful login', () => {
-        return chai.request(app)
+        return chai
+          .request(app)
           .post('/api/v1/auth/local')
-          .send({email: 'maria@gmail.com', password: 'password!3'})
-          .catch((err) => {
+          .send({ email: 'maria@gmail.com', password: 'password!3' })
+          .catch(err => {
             expect(err).to.not.be.null;
             expect(err.response).to.have.status(401);
-            expect(err.response.body).to.have.property('message', 'You are not authorized to perform this action.');
+            expect(err.response.body).to.have.property(
+              'message',
+              'You are not authorized to perform this action.'
+            );
           });
       });
-
     });
-
   });
 
   describe('email confirmation enabled', () => {
-
-    beforeEach(() => SettingsService.update({requireEmailConfirmation: true}));
+    beforeEach(() =>
+      SettingsService.update({ requireEmailConfirmation: true })
+    );
 
     describe('#post', () => {
       it('should not allow a login from a user that is not confirmed', () => {
-        return chai.request(app)
+        return chai
+          .request(app)
           .post('/api/v1/auth/local')
-          .send({email: 'maria@gmail.com', password: 'password!'})
-          .catch((err) => {
+          .send({ email: 'maria@gmail.com', password: 'password!' })
+          .catch(err => {
             expect(err).to.have.status(401);
             err.response.body.should.have.property('error');
 
-            return UsersService.createEmailConfirmToken(mockUser, mockUser.profiles[0].id);
+            return UsersService.createEmailConfirmToken(
+              mockUser,
+              mockUser.profiles[0].id
+            );
           })
           .then(UsersService.verifyEmailConfirmation)
           .then(() => {
-            return chai.request(app)
+            return chai
+              .request(app)
               .post('/api/v1/auth/local')
-              .send({email: 'maria@gmail.com', password: 'password!'});
+              .send({ email: 'maria@gmail.com', password: 'password!' });
           })
-          .then((res) => {
+          .then(res => {
             expect(res).to.have.status(200);
             expect(res).to.be.json;
             expect(res.body).to.have.property('user');
diff --git a/test/server/routes/api/settings/index.js b/test/server/routes/api/settings/index.js
index d3728ff2c..52264d800 100644
--- a/test/server/routes/api/settings/index.js
+++ b/test/server/routes/api/settings/index.js
@@ -8,21 +8,18 @@ chai.use(require('chai-http'));
 const expect = chai.expect;
 
 const SettingsService = require('../../../../../services/settings');
-const defaults = {id: '1', moderation: 'PRE'};
+const defaults = { id: '1', moderation: 'PRE' };
 
 describe('/api/v1/settings', () => {
-
   beforeEach(() => SettingsService.init(defaults));
 
   describe('#get', () => {
-
     it('should return a settings object', async () => {
       for (let role of ['ADMIN', 'MODERATOR']) {
-        const res = await chai.request(app)
+        const res = await chai
+          .request(app)
           .get('/api/v1/settings')
-          .set(passport.inject({
-            roles: [role]
-          }));
+          .set(passport.inject({ role }));
         expect(res).to.have.status(200);
         expect(res).to.be.json;
         expect(res.body).to.have.property('moderation', 'PRE');
@@ -31,29 +28,29 @@ describe('/api/v1/settings', () => {
   });
 
   describe('#put', () => {
-
     it('should update the settings', () => {
-      return chai.request(app)
+      return chai
+        .request(app)
         .put('/api/v1/settings')
-        .set(passport.inject({roles: ['ADMIN']}))
-        .send({moderation: 'POST'})
-        .then((res) => {
+        .set(passport.inject({ role: 'ADMIN' }))
+        .send({ moderation: 'POST' })
+        .then(res => {
           expect(res).to.have.status(204);
 
           return SettingsService.retrieve();
         })
-        .then((settings) => {
+        .then(settings => {
           expect(settings).to.have.property('moderation', 'POST');
         });
     });
 
     it('should require ADMIN role', () => {
-      const promise = chai.request(app)
+      const promise = chai
+        .request(app)
         .put('/api/v1/settings')
-        .set(passport.inject({roles: ['MODERATOR']}))
-        .send({moderation: 'POST'});
+        .set(passport.inject({ role: 'MODERATOR' }))
+        .send({ moderation: 'POST' });
       return expect(promise).to.eventually.be.rejected;
     });
   });
-
 });
diff --git a/test/server/routes/api/user/index.js b/test/server/routes/api/user/index.js
index 6478956a2..e7e3f6c72 100644
--- a/test/server/routes/api/user/index.js
+++ b/test/server/routes/api/user/index.js
@@ -4,7 +4,11 @@ const app = require('../../../../../app');
 const mailer = require('../../../../../services/mailer');
 
 const SettingsService = require('../../../../../services/settings');
-const settings = {id: '1', moderation: 'PRE', wordlist: {banned: ['bad words'], suspect: ['suspect words']}};
+const settings = {
+  id: '1',
+  moderation: 'PRE',
+  wordlist: { banned: ['bad words'], suspect: ['suspect words'] },
+};
 
 const chai = require('chai');
 chai.should();
@@ -14,86 +18,45 @@ const expect = chai.expect;
 const UsersService = require('../../../../../services/users');
 
 describe('/api/v1/users/:user_id/email/confirm', () => {
-
   let mockUser;
 
-  beforeEach(() => SettingsService.init(settings).then(() => {
-    return UsersService.createLocalUser('ana@gmail.com', '123321123', 'Ana');
-  })
-    .then((user) => {
-      mockUser = user;
-    }));
+  beforeEach(() =>
+    SettingsService.init(settings)
+      .then(() => {
+        return UsersService.createLocalUser(
+          'ana@gmail.com',
+          '123321123',
+          'Ana'
+        );
+      })
+      .then(user => {
+        mockUser = user;
+      })
+  );
 
   describe('#post', () => {
     it('should send an email when we hit the endpoint', () => {
       expect(mailer.task.tasks).to.have.length(0);
 
-      return chai.request(app)
+      return chai
+        .request(app)
         .post(`/api/v1/users/${mockUser.id}/email/confirm`)
-        .set(passport.inject({roles: ['ADMIN']}))
-        .then((res) => {
+        .set(passport.inject({ role: 'ADMIN' }))
+        .then(res => {
           expect(res).to.have.status(204);
           expect(mailer.task.tasks).to.have.length(1);
         });
     });
 
     it('should send a 404 on not matching a user', () => {
-      return chai.request(app)
+      return chai
+        .request(app)
         .post(`/api/v1/users/${mockUser.id}/email/confirm`)
-        .set(passport.inject({roles: ['ADMIN']}))
-        .then((res) => {
+        .set(passport.inject({ role: 'ADMIN' }))
+        .then(res => {
           expect(res).to.have.status(204);
           expect(mailer.task.tasks).to.have.length(1);
         });
     });
   });
 });
-
-describe('/api/v1/users/:user_id/actions', () => {
-
-  let mockUser;
-
-  beforeEach(() => SettingsService.init(settings).then(() => {
-    return UsersService.createLocalUser('ana@gmail.com', '123321123', 'Ana');
-  })
-    .then((user) => {
-      mockUser = user;
-    }));
-
-  describe('#post', () => {
-    it('it should update actions', () => {
-      return chai.request(app)
-        .post(`/api/v1/users/${mockUser.id}/actions`)
-        .set(passport.inject({id: '456', roles: ['ADMIN']}))
-        .send({'action_type': 'FLAG', metadata: {reason: 'Bio is too awesome.'}})
-        .then((res) => {
-          expect(res).to.have.status(201);
-          expect(res).to.have.body;
-          expect(res.body).to.have.property('action_type', 'FLAG');
-          expect(res.body).to.have.property('item_id', mockUser.id);
-        });
-    });
-  });
-});
-
-describe('/api/v1/users/:user_id/username-enable', () => {
-  let mockUser;
-
-  beforeEach(() => SettingsService.init(settings).then(() => {
-    return UsersService.createLocalUser('ana@gmail.com', '123321123', 'Ana');
-  })
-    .then((user) => {
-      mockUser = user;
-    }));
-
-  describe('#post', () => {
-    it('it should enable a user to edit their username', () => {
-      return chai.request(app)
-        .post(`/api/v1/users/${mockUser.id}/username-enable`)
-        .set(passport.inject({id: '456', roles: ['ADMIN']}))
-        .then((res) => {
-          expect(res).to.have.status(204);
-        });
-    });
-  });
-});
diff --git a/test/server/services/actions.js b/test/server/services/actions.js
index aef565908..d1cab11bd 100644
--- a/test/server/services/actions.js
+++ b/test/server/services/actions.js
@@ -7,7 +7,10 @@ chai.use(require('chai-as-promised'));
 const expect = chai.expect;
 
 const events = require('../../../services/events');
-const {ACTIONS_NEW, ACTIONS_DELETE} = require('../../../services/events/constants');
+const {
+  ACTIONS_NEW,
+  ACTIONS_DELETE,
+} = require('../../../services/events/constants');
 
 const sinon = require('sinon');
 
@@ -22,7 +25,7 @@ describe('services.ActionsService', () => {
       status_history: [],
       parent_id: '',
       author_id: '123',
-      id: '1'
+      id: '1',
     });
 
     mockActions = await ActionModel.create([
@@ -30,31 +33,30 @@ describe('services.ActionsService', () => {
         action_type: 'FLAG',
         item_id: comment.id,
         item_type: 'COMMENTS',
-        user_id: 'flagginguserid'
+        user_id: 'flagginguserid',
       },
       {
         action_type: 'FLAG',
         item_id: '456',
         item_type: 'COMMENTS',
-        user_id: '1'
+        user_id: '1',
       },
       {
         action_type: 'FLAG',
         item_id: comment.id,
         item_type: 'COMMENTS',
-        user_id: '2'
+        user_id: '2',
       },
       {
         action_type: 'LIKE',
         item_id: comment.id,
         item_type: 'COMMENTS',
-        user_id: '3'
-      }
+        user_id: '3',
+      },
     ]);
   });
 
   describe('#create', () => {
-
     it('creates an action', async () => {
       const srcAction = {
         action_type: 'LIKE',
@@ -68,14 +70,16 @@ describe('services.ActionsService', () => {
       expect(createdAction).has.property('id');
       expect(createdAction).has.property('item_id', comment.id);
 
-      const retrievedAction = await ActionModel.findOne({id: createdAction.id});
+      const retrievedAction = await ActionModel.findOne({
+        id: createdAction.id,
+      });
 
       expect(retrievedAction).is.not.null;
       expect(retrievedAction).has.property('id', createdAction.id);
       expect(retrievedAction).has.property('item_id', comment.id);
     });
 
-    it('fires the callback sucesfully', async () => {
+    it('fires the callback successfully', async () => {
       const srcAction = {
         action_type: 'LIKE',
         item_type: 'COMMENTS',
@@ -93,27 +97,27 @@ describe('services.ActionsService', () => {
 
       expect(spy).to.have.been.calledWith(createdAction);
 
-      const retrievedComment = await CommentModel.findOne({id: comment.id});
+      const retrievedComment = await CommentModel.findOne({ id: comment.id });
 
       expect(retrievedComment).to.have.property('action_counts');
       expect(retrievedComment.action_counts).to.have.property('like', 1);
     });
-
   });
 
   describe('#delete', () => {
-
     it('deletes an action', async () => {
       const deletedAction = await ActionsService.delete(mockActions[0]);
 
       expect(deletedAction).has.property('id', mockActions[0].id);
 
-      const retrievedAction = await ActionModel.findOne({id: deletedAction.id});
+      const retrievedAction = await ActionModel.findOne({
+        id: deletedAction.id,
+      });
 
       expect(retrievedAction).is.null;
     });
 
-    it('fires the callback sucesfully', async () => {
+    it('fires the callback successfully', async () => {
       const spy = sinon.spy();
       events.once(ACTIONS_DELETE, spy);
 
@@ -122,17 +126,16 @@ describe('services.ActionsService', () => {
       expect(deletedAction).has.property('id', mockActions[0].id);
       expect(spy).to.have.been.calledWith(deletedAction);
 
-      const retrievedComment = await CommentModel.findOne({id: comment.id});
+      const retrievedComment = await CommentModel.findOne({ id: comment.id });
 
       expect(retrievedComment).to.have.property('action_counts');
       expect(retrievedComment.action_counts).to.have.property('flag', -1);
     });
-
   });
 
   describe('#findById()', () => {
     it('should find an action by id', () => {
-      return ActionsService.findById(mockActions[0].id).then((result) => {
+      return ActionsService.findById(mockActions[0].id).then(result => {
         expect(result).to.not.be.null;
         expect(result).to.have.property('action_type', 'FLAG');
       });
@@ -141,17 +144,18 @@ describe('services.ActionsService', () => {
 
   describe('#findByItemIdArray()', () => {
     it('should find an array of actions from an array of item_ids', () => {
-      return ActionsService.findByItemIdArray([comment.id, '456']).then((result) => {
-        expect(result).to.have.length(4);
-      });
+      return ActionsService.findByItemIdArray([comment.id, '456']).then(
+        result => {
+          expect(result).to.have.length(4);
+        }
+      );
     });
   });
 
   describe('#getActionSummaries()', () => {
     it('should return properly formatted summaries from an array of item_ids', () => {
-      return ActionsService
-        .getActionSummaries([comment.id, '789'])
-        .then((summaries) => {
+      return ActionsService.getActionSummaries([comment.id, '789']).then(
+        summaries => {
           expect(summaries).to.have.length(2);
 
           expect(summaries).to.deep.include({
@@ -159,7 +163,7 @@ describe('services.ActionsService', () => {
             count: 1,
             item_id: comment.id,
             item_type: 'COMMENTS',
-            current_user: null
+            current_user: null,
           });
 
           expect(summaries).to.deep.include({
@@ -167,39 +171,47 @@ describe('services.ActionsService', () => {
             count: 2,
             item_id: comment.id,
             item_type: 'COMMENTS',
-            current_user: null
+            current_user: null,
           });
-        });
+        }
+      );
     });
 
     it('should include a current user when one is passed', () => {
-      return ActionsService
-        .getActionSummaries([comment.id], 'flagginguserid')
-        .then((summaries) => {
-          expect(summaries).to.have.length(2);
+      return ActionsService.getActionSummaries(
+        [comment.id],
+        'flagginguserid'
+      ).then(summaries => {
+        expect(summaries).to.have.length(2);
 
-          let summary = summaries.find((s) => s.item_id === comment.id && s.action_type === 'FLAG');
+        let summary = summaries.find(
+          s => s.item_id === comment.id && s.action_type === 'FLAG'
+        );
 
-          expect(summary).to.not.be.undefined;
-          expect(summary.current_user).to.not.be.null;
-          expect(summary.current_user).to.have.property('item_id', comment.id);
-          expect(summary.current_user).to.have.property('item_type', 'COMMENTS');
-          expect(summary.current_user).to.have.property('user_id', 'flagginguserid');
-          expect(summary.current_user).to.have.property('action_type', 'FLAG');
-        });
+        expect(summary).to.not.be.undefined;
+        expect(summary.current_user).to.not.be.null;
+        expect(summary.current_user).to.have.property('item_id', comment.id);
+        expect(summary.current_user).to.have.property('item_type', 'COMMENTS');
+        expect(summary.current_user).to.have.property(
+          'user_id',
+          'flagginguserid'
+        );
+        expect(summary.current_user).to.have.property('action_type', 'FLAG');
+      });
     });
 
-    it('should not include a current user when one is passed for a user that doesn\'t have an action', () => {
-      return ActionsService
-        .getActionSummaries([comment.id], 'flagginguserid2')
-        .then((summaries) => {
-          expect(summaries).to.have.length(2);
+    it("should not include a current user when one is passed for a user that doesn't have an action", () => {
+      return ActionsService.getActionSummaries(
+        [comment.id],
+        'flagginguserid2'
+      ).then(summaries => {
+        expect(summaries).to.have.length(2);
 
-          summaries.forEach((summary) => {
-            expect(summary).to.not.be.undefined;
-            expect(summary).to.have.property('current_user', null);
-          });
+        summaries.forEach(summary => {
+          expect(summary).to.not.be.undefined;
+          expect(summary).to.have.property('current_user', null);
         });
+      });
     });
   });
 });
diff --git a/test/server/services/assets.js b/test/server/services/assets.js
index 163210b65..c071b5634 100644
--- a/test/server/services/assets.js
+++ b/test/server/services/assets.js
@@ -12,74 +12,76 @@ chai.should();
 
 const expect = chai.expect;
 
-const settings = {id: '1', moderation: 'PRE', domains: {whitelist: ['new.test.com', 'test.com', 'override.test.com']}};
-const defaults = {url:'http://test.com'};
+const settings = {
+  id: '1',
+  moderation: 'PRE',
+  domains: { whitelist: ['new.test.com', 'test.com', 'override.test.com'] },
+};
+const defaults = { url: 'http://test.com' };
 
 describe('services.AssetsService', () => {
-
   let asset;
   beforeEach(async () => {
     await SettingsService.init(settings);
 
-    asset = await AssetModel.findOneAndUpdate({id: '1'}, {$setOnInsert: defaults}, {upsert: true, new: true});
+    asset = await AssetModel.findOneAndUpdate(
+      { id: '1' },
+      { $setOnInsert: defaults },
+      { upsert: true, new: true }
+    );
   });
 
-  describe('#findById', ()=> {
+  describe('#findById', () => {
     it('should find an asset by the id', () => {
-      return AssetsService.findById(1)
-        .then((asset) => {
-          expect(asset).to.have.property('url')
-            .and.to.equal('http://test.com');
-        });
+      return AssetsService.findById(1).then(asset => {
+        expect(asset)
+          .to.have.property('url')
+          .and.to.equal('http://test.com');
+      });
     });
   });
 
-  describe('#findByUrl', ()=> {
+  describe('#findByUrl', () => {
     beforeEach(() => AssetsService.findOrCreateByUrl('http://test.com'));
 
     it('should find an asset by a url', () => {
-      return AssetsService
-        .findByUrl('http://test.com')
-        .then((asset) => {
-          expect(asset).to.have.property('url', 'http://test.com');
-        });
+      return AssetsService.findByUrl('http://test.com').then(asset => {
+        expect(asset).to.have.property('url', 'http://test.com');
+      });
     });
 
     it('should return null when a url does not exist', () => {
-      return AssetsService
-        .findByUrl('http://new.test.com')
-        .then((asset) => {
-          expect(asset).to.be.null;
-        });
+      return AssetsService.findByUrl('http://new.test.com').then(asset => {
+        expect(asset).to.be.null;
+      });
     });
   });
 
-  describe('#findOrCreateByUrl', ()=> {
+  describe('#findOrCreateByUrl', () => {
     it('should find an asset by a url', () => {
-      return AssetsService
-        .findOrCreateByUrl('http://test.com')
-        .then((asset) => {
-          expect(asset).to.have.property('url')
-            .and.to.equal('http://test.com');
-        });
+      return AssetsService.findOrCreateByUrl('http://test.com').then(asset => {
+        expect(asset)
+          .to.have.property('url')
+          .and.to.equal('http://test.com');
+      });
     });
 
     it('should return a new asset when the url does not exist and its domain is whitelisted', () => {
-      return AssetsService
-        .findOrCreateByUrl('http://new.test.com')
-        .then((asset) => {
-          expect(asset).to.have.property('id')
+      return AssetsService.findOrCreateByUrl('http://new.test.com').then(
+        asset => {
+          expect(asset)
+            .to.have.property('id')
             .and.to.not.equal(1);
-        });
+        }
+      );
     });
 
     it('should return an error when the url does not exist and its domain is not whitelisted', () => {
-      return AssetsService
-        .findOrCreateByUrl('http://bad.test.com')
-        .then((asset) => {
+      return AssetsService.findOrCreateByUrl('http://bad.test.com')
+        .then(asset => {
           expect(asset).to.be.null;
         })
-        .catch((error) => {
+        .catch(error => {
           expect(error).to.not.be.null;
         });
     });
@@ -87,18 +89,21 @@ describe('services.AssetsService', () => {
 
   describe('#overrideSettings', () => {
     it('should update the settings', () => {
-      return AssetsService
-        .findOrCreateByUrl('https://override.test.com/asset')
-        .then((asset) => {
+      return AssetsService.findOrCreateByUrl('https://override.test.com/asset')
+        .then(asset => {
           expect(asset).to.have.property('settings');
           expect(asset.settings).to.be.empty;
 
-          return AssetsService.overrideSettings(asset.id, {moderation: 'PRE'});
+          return AssetsService.overrideSettings(asset.id, {
+            moderation: 'PRE',
+          });
         })
         .then(() => {
-          return AssetsService.findOrCreateByUrl('https://override.test.com/asset');
+          return AssetsService.findOrCreateByUrl(
+            'https://override.test.com/asset'
+          );
         })
-        .then((asset) => {
+        .then(asset => {
           expect(asset).to.have.property('settings');
           expect(asset.settings).is.an('object');
           expect(asset.settings).to.have.property('moderation', 'PRE');
@@ -106,28 +111,27 @@ describe('services.AssetsService', () => {
     });
   });
 
-  describe('#findOrCreateByUrl', ()=> {
+  describe('#findOrCreateByUrl', () => {
     it('should find an asset by a url', () => {
-      return AssetsService
-        .findOrCreateByUrl('http://test.com')
-        .then((asset) => {
-          expect(asset).to.have.property('url')
-            .and.to.equal('http://test.com');
-        });
+      return AssetsService.findOrCreateByUrl('http://test.com').then(asset => {
+        expect(asset)
+          .to.have.property('url')
+          .and.to.equal('http://test.com');
+      });
     });
 
     it('should return a new asset when the url does not exist', () => {
-      return AssetsService
-        .findOrCreateByUrl('http://new.test.com')
-        .then((asset) => {
-          expect(asset).to.have.property('id')
+      return AssetsService.findOrCreateByUrl('http://new.test.com').then(
+        asset => {
+          expect(asset)
+            .to.have.property('id')
             .and.to.not.equal(1);
-        });
+        }
+      );
     });
   });
 
   describe('#updateURL', () => {
-
     it('should change the url if the asset was found, and there was no conflict', async () => {
       let newURL = url.resolve(asset.url, '/new-url');
 
@@ -135,7 +139,7 @@ describe('services.AssetsService', () => {
       await AssetsService.updateURL(asset.id, newURL);
 
       // Check that the url was updated.
-      let {url: databaseURL} = await AssetsService.findById(asset.id);
+      let { url: databaseURL } = await AssetsService.findById(asset.id);
 
       expect(databaseURL).to.equal(newURL);
     });
@@ -144,47 +148,55 @@ describe('services.AssetsService', () => {
       let newURL = url.resolve(asset.url, '/new-url');
 
       // Create a new asset with our new URL.
-      await AssetModel.findOneAndUpdate({id: '2'}, {$setOnInsert: {url: newURL}}, {upsert: true, new: true});
+      await AssetModel.findOneAndUpdate(
+        { id: '2' },
+        { $setOnInsert: { url: newURL } },
+        { upsert: true, new: true }
+      );
 
-      return AssetsService.updateURL(asset.id, newURL).should.eventually.be.rejected;
+      return AssetsService.updateURL(asset.id, newURL).should.eventually.be
+        .rejected;
     });
-
   });
 
   describe('#merge', () => {
-
     it('should error if either the src or the dst is missing', () => {
-      return AssetsService.merge('not-found', asset.id).should.eventually.be.rejected;
+      return AssetsService.merge('not-found', asset.id).should.eventually.be
+        .rejected;
     });
 
     it('should merge the assets', async () => {
       let newURL = url.resolve(asset.url, '/new-url');
 
       // Create a new asset with our new URL.
-      await AssetModel.findOneAndUpdate({id: '2'}, {$setOnInsert: {url: newURL}}, {upsert: true, new: true});
+      await AssetModel.findOneAndUpdate(
+        { id: '2' },
+        { $setOnInsert: { url: newURL } },
+        { upsert: true, new: true }
+      );
 
       // Create some comments on both assets.
       await CommentsService.publicCreate([
         {
           asset_id: '1',
           body: 'This is a comment!',
-          status: 'ACCEPTED'
+          status: 'ACCEPTED',
         },
         {
           asset_id: '1',
           body: 'This is a comment!',
-          status: 'ACCEPTED'
+          status: 'ACCEPTED',
         },
         {
           asset_id: '2',
           body: 'This is a comment!',
-          status: 'ACCEPTED'
+          status: 'ACCEPTED',
         },
         {
           asset_id: '2',
           body: 'This is a comment!',
-          status: 'ACCEPTED'
-        }
+          status: 'ACCEPTED',
+        },
       ]);
 
       // Merge all the comments from asset 1 into asset 2, followed by deleting
@@ -192,12 +204,11 @@ describe('services.AssetsService', () => {
       await AssetsService.merge('1', '2');
 
       // Check to see if the comments are moved.
-      expect(await CommentModel.find({asset_id: '1'}).count()).to.equal(0);
-      expect(await CommentModel.find({asset_id: '2'}).count()).to.equal(4);
+      expect(await CommentModel.find({ asset_id: '1' }).count()).to.equal(0);
+      expect(await CommentModel.find({ asset_id: '2' }).count()).to.equal(4);
 
       // Check to see if the asset was removed.
-      expect(await AssetModel.findOne({id: '1'})).to.equal(null);
+      expect(await AssetModel.findOne({ id: '1' })).to.equal(null);
     });
-
   });
 });
diff --git a/test/server/services/comments.js b/test/server/services/comments.js
index 77711d321..c9ec1315d 100644
--- a/test/server/services/comments.js
+++ b/test/server/services/comments.js
@@ -2,12 +2,16 @@ const CommentModel = require('../../../models/comment');
 const ActionModel = require('../../../models/action');
 
 const events = require('../../../services/events');
-const {COMMENTS_EDIT} = require('../../../services/events/constants');
+const { COMMENTS_EDIT } = require('../../../services/events/constants');
 const UsersService = require('../../../services/users');
 const SettingsService = require('../../../services/settings');
 const CommentsService = require('../../../services/comments');
 
-const settings = {id: '1', moderation: 'PRE', wordlist: {banned: ['bad words'], suspect: ['suspect words']}};
+const settings = {
+  id: '1',
+  moderation: 'PRE',
+  wordlist: { banned: ['bad words'], suspect: ['suspect words'] },
+};
 
 const chai = require('chai');
 chai.use(require('sinon-chai'));
@@ -16,84 +20,105 @@ const expect = chai.expect;
 const sinon = require('sinon');
 
 describe('services.CommentsService', () => {
-  const comments = [{
-    body: 'comment 10',
-    asset_id: '123',
-    status_history: [],
-    parent_id: '',
-    author_id: '123',
-    id: '1'
-  }, {
-    body: 'comment 20',
-    asset_id: '123',
-    status_history: [{
-      type: 'ACCEPTED'
-    }],
-    status: 'ACCEPTED',
-    parent_id: '',
-    author_id: '123',
-    id: '2'
-  }, {
-    body: 'comment 30',
-    asset_id: '456',
-    status_history: [],
-    parent_id: '',
-    author_id: '456',
-    id: '3'
-  }, {
-    body: 'comment 40',
-    asset_id: '123',
-    status_history: [{
-      type: 'REJECTED'
-    }],
-    status: 'REJECTED',
-    parent_id: '',
-    author_id: '456',
-    id: '4'
-  }, {
-    body: 'comment 50',
-    asset_id: '1234',
-    status_history: [{
-      type: 'PREMOD'
-    }],
-    status: 'PREMOD',
-    parent_id: '',
-    author_id: '456',
-    id: '5'
-  }, {
-    body: 'comment 60',
-    asset_id: '1234',
-    status_history: [{
-      type: 'PREMOD'
-    }],
-    status: 'PREMOD',
-    parent_id: '',
-    author_id: '456',
-    id: '6'
-  }];
+  const comments = [
+    {
+      body: 'comment 10',
+      asset_id: '123',
+      status_history: [],
+      parent_id: '',
+      author_id: '123',
+      id: '1',
+    },
+    {
+      body: 'comment 20',
+      asset_id: '123',
+      status_history: [
+        {
+          type: 'ACCEPTED',
+        },
+      ],
+      status: 'ACCEPTED',
+      parent_id: '',
+      author_id: '123',
+      id: '2',
+    },
+    {
+      body: 'comment 30',
+      asset_id: '456',
+      status_history: [],
+      parent_id: '',
+      author_id: '456',
+      id: '3',
+    },
+    {
+      body: 'comment 40',
+      asset_id: '123',
+      status_history: [
+        {
+          type: 'REJECTED',
+        },
+      ],
+      status: 'REJECTED',
+      parent_id: '',
+      author_id: '456',
+      id: '4',
+    },
+    {
+      body: 'comment 50',
+      asset_id: '1234',
+      status_history: [
+        {
+          type: 'PREMOD',
+        },
+      ],
+      status: 'PREMOD',
+      parent_id: '',
+      author_id: '456',
+      id: '5',
+    },
+    {
+      body: 'comment 60',
+      asset_id: '1234',
+      status_history: [
+        {
+          type: 'PREMOD',
+        },
+      ],
+      status: 'PREMOD',
+      parent_id: '',
+      author_id: '456',
+      id: '6',
+    },
+  ];
 
-  const users = [{
-    id: 'u1',
-    email: 'stampi@gmail.com',
-    username: 'Stampi',
-    password: '1Coral!!'
-  }, {
-    email: 'sockmonster@gmail.com',
-    username: 'Sockmonster',
-    password: '2Coral!!'
-  }];
+  const users = [
+    {
+      id: 'u1',
+      email: 'stampi@gmail.com',
+      username: 'Stampi',
+      password: '1Coral!!',
+    },
+    {
+      email: 'sockmonster@gmail.com',
+      username: 'Sockmonster',
+      password: '2Coral!!',
+    },
+  ];
 
-  const actions = [{
-    action_type: 'FLAG',
-    item_id: '3',
-    item_type: 'COMMENTS',
-    user_id: '123'
-  }, {
-    action_type: 'LIKE',
-    item_id: '1',
-    item_type: 'COMMENTS',
-    user_id: '456'
-  }];
+  const actions = [
+    {
+      action_type: 'FLAG',
+      item_id: '3',
+      item_type: 'COMMENTS',
+      user_id: '123',
+    },
+    {
+      action_type: 'LIKE',
+      item_id: '1',
+      item_type: 'COMMENTS',
+      user_id: '456',
+    },
+  ];
 
   beforeEach(async () => {
     await SettingsService.init(settings);
@@ -101,16 +126,15 @@ describe('services.CommentsService', () => {
     await Promise.all([
       CommentModel.create(comments),
       UsersService.createLocalUsers(users),
-      ActionModel.create(actions)
+      ActionModel.create(actions),
     ]);
   });
 
   describe('#publicCreate()', () => {
-
     it('creates a new comment', async () => {
       const c = await CommentsService.publicCreate({
         body: 'This is a comment!',
-        status: 'ACCEPTED'
+        status: 'ACCEPTED',
       });
 
       expect(c).to.not.be.null;
@@ -120,19 +144,19 @@ describe('services.CommentsService', () => {
     });
 
     it('creates many new comments', async () => {
-      const [
-        c1,
-        c2,
-        c3,
-      ] = await CommentsService.publicCreate([{
-        body: 'This is a comment!',
-        status: 'ACCEPTED'
-      }, {
-        body: 'This is another comment!'
-      }, {
-        body: 'This is a rejected comment!',
-        status: 'REJECTED'
-      }]);
+      const [c1, c2, c3] = await CommentsService.publicCreate([
+        {
+          body: 'This is a comment!',
+          status: 'ACCEPTED',
+        },
+        {
+          body: 'This is another comment!',
+        },
+        {
+          body: 'This is a rejected comment!',
+          status: 'REJECTED',
+        },
+      ]);
 
       expect(c1).to.not.be.null;
       expect(c1.status).to.be.equal('ACCEPTED');
@@ -161,7 +185,10 @@ describe('services.CommentsService', () => {
 
       expect(retrivedComment).to.have.property('status', 'ACCEPTED');
       expect(retrivedComment.status_history).to.have.length(2);
-      expect(retrivedComment.status_history[1]).to.have.property('type', 'ACCEPTED');
+      expect(retrivedComment.status_history[1]).to.have.property(
+        'type',
+        'ACCEPTED'
+      );
 
       const editedComment = await CommentsService.edit({
         id: originalComment.id,
@@ -172,34 +199,40 @@ describe('services.CommentsService', () => {
 
       expect(editedComment).to.have.property('status', 'PREMOD');
       expect(editedComment.status_history).to.have.length(4);
-      expect(editedComment.status_history[3]).to.have.property('type', 'PREMOD');
+      expect(editedComment.status_history[3]).to.have.property(
+        'type',
+        'PREMOD'
+      );
 
       retrivedComment = await CommentsService.findById(originalComment.id);
 
       expect(retrivedComment).to.have.property('status', 'PREMOD');
       expect(retrivedComment.status_history).to.have.length(4);
-      expect(retrivedComment.status_history[3]).to.have.property('type', 'PREMOD');
+      expect(retrivedComment.status_history[3]).to.have.property(
+        'type',
+        'PREMOD'
+      );
     });
   });
 
   describe('#findById()', () => {
-
     it('should find a comment by id', async () => {
       const comment = await CommentsService.findById('1');
       expect(comment).to.not.be.null;
       expect(comment).to.have.property('body', 'comment 10');
     });
-
   });
 
   describe('#findByAssetId()', () => {
-
     it('should find an array of all comments by asset id', async () => {
       const comments = await CommentsService.findByAssetId('123');
       expect(comments).to.have.length(3);
       comments.sort((a, b) => {
-        if (a.body < b.body) {return -1;}
-        else {return 1;}
+        if (a.body < b.body) {
+          return -1;
+        } else {
+          return 1;
+        }
       });
       expect(comments[0]).to.have.property('body', 'comment 10');
       expect(comments[1]).to.have.property('body', 'comment 20');
@@ -208,7 +241,6 @@ describe('services.CommentsService', () => {
   });
 
   describe('#changeStatus', () => {
-
     it('should change the status of a comment from no status', async () => {
       let comment_id = comments[0].id;
 
diff --git a/test/server/services/domainlist.js b/test/server/services/domain_list.js
similarity index 77%
rename from test/server/services/domainlist.js
rename to test/server/services/domain_list.js
index 33afdda87..35b373bd1 100644
--- a/test/server/services/domainlist.js
+++ b/test/server/services/domain_list.js
@@ -1,29 +1,27 @@
 const expect = require('chai').expect;
-const Domainlist = require('../../../services/domainlist');
+const DomainList = require('../../../services/domain_list');
 const SettingsService = require('../../../services/settings');
 
-describe('services.Domainlist', () => {
-
-  const domainlists = {
-    whitelist: [
-      'nytimes.com',
-      'wapo.com'
-    ]
+describe('services.DomainList', () => {
+  const domainLists = {
+    whitelist: ['nytimes.com', 'wapo.com'],
   };
 
-  let domainlist = new Domainlist();
-  const settings = {id: '1', moderation: 'PRE', domainlist: {whitelist: ['nytimes.com', 'wapo.com']}};
+  let domainList = new DomainList();
+  const settings = {
+    id: '1',
+    moderation: 'PRE',
+    domainlist: { whitelist: ['nytimes.com', 'wapo.com'] },
+  };
 
   beforeEach(() => SettingsService.init(settings));
 
   describe('#init', () => {
-
-    before(() => domainlist.upsert(domainlists));
+    before(() => domainList.upsert(domainLists));
 
     it('has entries', () => {
-      expect(domainlist.lists.whitelist).to.not.be.empty;
+      expect(domainList.lists.whitelist).to.not.be.empty;
     });
-
   });
 
   describe('#parseURL', () => {
@@ -92,31 +90,26 @@ describe('services.Domainlist', () => {
         ['google.Ca:80', 'google.ca'],
         ['google.Ca:443', 'google.ca'],
       ].forEach(([domain, hostname]) => {
-        expect(Domainlist.parseURL(domain), `domain ${domain} should be parsed as ${hostname}`).to.equal(hostname);
+        expect(
+          DomainList.parseURL(domain),
+          `domain ${domain} should be parsed as ${hostname}`
+        ).to.equal(hostname);
       });
     });
   });
 
   describe('#match', () => {
-
-    const whiteList = Domainlist.parseList(domainlists['whitelist']);
+    const whiteList = DomainList.parseList(domainLists['whitelist']);
 
     it('does match on an included domain', () => {
-      [
-        'http://wapo.com',
-        'nytimes.com'
-      ].forEach((domain) => {
-        expect(domainlist.match(whiteList, domain)).to.be.true;
+      ['http://wapo.com', 'nytimes.com'].forEach(domain => {
+        expect(domainList.match(whiteList, domain)).to.be.true;
       });
     });
 
     it('does not match on a not included domain', () => {
-      [
-        'badsite.com',
-        'www.badsite.com',
-        'otherexample.com'
-      ].forEach((domain) => {
-        expect(domainlist.match(whiteList, domain)).to.be.false;
+      ['badsite.com', 'www.badsite.com', 'otherexample.com'].forEach(domain => {
+        expect(domainList.match(whiteList, domain)).to.be.false;
       });
     });
   });
diff --git a/test/server/services/scraper.js b/test/server/services/scraper.js
deleted file mode 100644
index ab2474134..000000000
--- a/test/server/services/scraper.js
+++ /dev/null
@@ -1,22 +0,0 @@
-describe('services.scraper', () => {
-  describe('#create', () => {
-    it('should create a new kue job');
-  });
-
-  describe('#scrape', () => {
-    it('should scrape complete information');
-    it('should scrape what it can');
-  });
-
-  describe('#update', () => {
-    it('should update the database record entries from the meta');
-  });
-
-  describe('#process', () => {
-    it('should start the processor to scrape assets');
-  });
-
-  describe('#shutdown', () => {
-    it('should shutdown the job processor');
-  });
-});
diff --git a/test/server/services/settings.js b/test/server/services/settings.js
index 9384d8a4f..ff2c898e1 100644
--- a/test/server/services/settings.js
+++ b/test/server/services/settings.js
@@ -3,37 +3,54 @@ const chai = require('chai');
 const expect = chai.expect;
 
 describe('services.SettingsService', () => {
-
-  beforeEach(() => SettingsService.init({moderation: 'PRE', wordlist: ['donut']}));
+  beforeEach(() =>
+    SettingsService.init({ moderation: 'PRE', wordlist: ['donut'] })
+  );
 
   describe('#retrieve()', () => {
     it('should have a moderation field defined', () => {
-      return SettingsService.retrieve().then((settings) => {
-        expect(settings).to.have.property('moderation').and.to.equal('PRE');
+      return SettingsService.retrieve().then(settings => {
+        expect(settings)
+          .to.have.property('moderation')
+          .and.to.equal('PRE');
       });
     });
 
     it('should have two infoBox fields defined', () => {
-      return SettingsService.retrieve().then((settings) => {
-        expect(settings).to.have.property('infoBoxEnable').and.to.equal(false);
-        expect(settings).to.have.property('infoBoxContent').and.to.equal('');
+      return SettingsService.retrieve().then(settings => {
+        expect(settings)
+          .to.have.property('infoBoxEnable')
+          .and.to.equal(false);
+        expect(settings)
+          .to.have.property('infoBoxContent')
+          .and.to.equal('');
       });
     });
   });
 
   describe('#update()', () => {
     it('should update the settings with a passed object', () => {
-      const mockSettings = {moderation: 'POST', infoBoxEnable: true, infoBoxContent: 'yeah'};
-      return SettingsService.update(mockSettings).then((updatedSettings) => {
+      const mockSettings = {
+        moderation: 'POST',
+        infoBoxEnable: true,
+        infoBoxContent: 'yeah',
+      };
+      return SettingsService.update(mockSettings).then(updatedSettings => {
         expect(updatedSettings).to.be.an('object');
-        expect(updatedSettings).to.have.property('moderation').and.to.equal('POST');
+        expect(updatedSettings)
+          .to.have.property('moderation')
+          .and.to.equal('POST');
         expect(updatedSettings).to.have.property('infoBoxEnable', true);
         expect(updatedSettings).to.have.property('infoBoxContent', 'yeah');
       });
     });
 
     it('should be ok when receiving an object based off of a mongoose model', async () => {
-      const mockSettings = {moderation: 'POST', infoBoxEnable: true, infoBoxContent: 'yeah'};
+      const mockSettings = {
+        moderation: 'POST',
+        infoBoxEnable: true,
+        infoBoxContent: 'yeah',
+      };
       await SettingsService.update(mockSettings);
 
       const settings = await SettingsService.retrieve();
@@ -45,7 +62,7 @@ describe('services.SettingsService', () => {
 
   describe('#get', () => {
     it('should return the moderation settings', () => {
-      return SettingsService.retrieve().then(({moderation}) => {
+      return SettingsService.retrieve().then(({ moderation }) => {
         expect(moderation).not.to.be.null;
       });
     });
@@ -53,15 +70,13 @@ describe('services.SettingsService', () => {
 
   describe('#merge', () => {
     it('should merge a settings object and its overrides', () => {
-      return SettingsService
-        .retrieve()
-        .then((settings) => {
-          let ovrSett = {moderation: 'POST'};
+      return SettingsService.retrieve().then(settings => {
+        let ovrSett = { moderation: 'POST' };
 
-          settings.merge(ovrSett);
+        settings.merge(ovrSett);
 
-          expect(settings).to.have.property('moderation', 'POST');
-        });
+        expect(settings).to.have.property('moderation', 'POST');
+      });
     });
   });
 });
diff --git a/test/server/services/tags.js b/test/server/services/tags.js
index 69630ec82..eb3144114 100644
--- a/test/server/services/tags.js
+++ b/test/server/services/tags.js
@@ -12,14 +12,18 @@ describe('services.TagsService', () => {
   let comment, user;
   beforeEach(async () => {
     await SettingsService.init();
-    user = await UsersService.createLocalUser('stampi@gmail.com', '1Coral!!', 'Stampi');
+    user = await UsersService.createLocalUser(
+      'stampi@gmail.com',
+      '1Coral!!',
+      'Stampi'
+    );
     comment = await CommentModel.create({
       id: '1',
       body: 'comment 10',
       asset_id: '123',
       status_history: [],
       parent_id: null,
-      author_id: user.id
+      author_id: user.id,
     });
   });
 
@@ -31,43 +35,43 @@ describe('services.TagsService', () => {
 
       await TagsService.add(id, 'COMMENTS', {
         tag: {
-          name
+          name,
         },
-        assigned_by
+        assigned_by,
       });
 
-      const {tags} = await CommentsService.findById(id);
+      const { tags } = await CommentsService.findById(id);
       expect(tags.length).to.equal(1);
       expect(tags[0].tag.name).to.equal(name);
       expect(tags[0].assigned_by).to.equal(assigned_by);
     });
 
-    it('can\'t add same tag.id twice', async () => {
+    it("can't add same tag.id twice", async () => {
       const id = comment.id;
       const name = 'BEST';
       const assigned_by = user.id;
 
       await TagsService.add(id, 'COMMENTS', {
         tag: {
-          name
+          name,
         },
-        assigned_by
+        assigned_by,
       });
 
       {
-        let {tags} = await CommentsService.findById(id);
+        let { tags } = await CommentsService.findById(id);
         expect(tags.length).to.equal(1);
       }
 
       await TagsService.add(id, 'COMMENTS', {
         tag: {
-          name
+          name,
         },
-        assigned_by
+        assigned_by,
       });
 
       {
-        let {tags} = await CommentsService.findById(id);
+        let { tags } = await CommentsService.findById(id);
         expect(tags.length).to.equal(1);
       }
     });
@@ -81,26 +85,26 @@ describe('services.TagsService', () => {
 
       await TagsService.add(id, 'COMMENTS', {
         tag: {
-          name
+          name,
         },
-        assigned_by
+        assigned_by,
       });
 
       {
-        const {tags} = await CommentsService.findById(id);
+        const { tags } = await CommentsService.findById(id);
         expect(tags.length).to.equal(1);
       }
 
       // ok now to remove it
       await TagsService.remove(id, 'COMMENTS', {
         tag: {
-          name
+          name,
         },
-        assigned_by
+        assigned_by,
       });
 
       {
-        const {tags} = await CommentsService.findById(id);
+        const { tags } = await CommentsService.findById(id);
         expect(tags.length).to.equal(0);
       }
     });
@@ -111,33 +115,33 @@ describe('services.TagsService', () => {
 
       await TagsService.add(id, 'COMMENTS', {
         tag: {
-          name: 'ANOTHER'
+          name: 'ANOTHER',
         },
-        assigned_by
+        assigned_by,
       });
 
       await TagsService.add(id, 'COMMENTS', {
         tag: {
-          name
+          name,
         },
-        assigned_by
+        assigned_by,
       });
 
       {
-        const {tags} = await CommentsService.findById(id);
+        const { tags } = await CommentsService.findById(id);
         expect(tags.length).to.equal(2);
       }
 
       // ok now to remove it
       await TagsService.remove(id, 'COMMENTS', {
         tag: {
-          name
+          name,
         },
-        assigned_by
+        assigned_by,
       });
 
       {
-        const {tags} = await CommentsService.findById(id);
+        const { tags } = await CommentsService.findById(id);
         expect(tags.length).to.equal(1);
         expect(tags[0].tag.name).to.equal('ANOTHER');
       }
diff --git a/test/server/services/tokens.js b/test/server/services/tokens.js
index a89d01bef..7ff598936 100644
--- a/test/server/services/tokens.js
+++ b/test/server/services/tokens.js
@@ -7,15 +7,17 @@ chai.use(require('chai-as-promised'));
 const expect = chai.expect;
 
 describe('services.TokensService', () => {
-
   let user;
   beforeEach(async () => {
     await SettingsService.init();
-    user = await UsersService.createLocalUser('sockmonster@gmail.com', '2Coral!!', 'Sockmonster');
+    user = await UsersService.createLocalUser(
+      'sockmonster@gmail.com',
+      '2Coral!!',
+      'Sockmonster'
+    );
   });
 
   describe('#create', () => {
-
     it('can create the token without error', async () => {
       let token = await TokensService.create(user.id, 'Github Token');
       expect(token).to.be.an.object;
@@ -29,13 +31,11 @@ describe('services.TokensService', () => {
       expect(tokens[0]).to.have.property('id', pat.id);
       expect(tokens[0]).to.have.property('name', pat.name);
     });
-
   });
 
   describe('#revoke', () => {
-
     it('can revoke a token', async () => {
-      let {pat: {id}} = await TokensService.create(user.id, 'Github Token');
+      let { pat: { id } } = await TokensService.create(user.id, 'Github Token');
 
       let tokens = await TokensService.list(user.id);
       expect(tokens).to.have.length(1);
@@ -49,24 +49,20 @@ describe('services.TokensService', () => {
       expect(tokens[0]).to.have.property('id', id);
       expect(tokens[0]).to.have.property('active', false);
     });
-
   });
 
   describe('#validate', () => {
-
     it('will allow a valid token', async () => {
-
       // Create a token.
-      let {pat: {id}} = await TokensService.create(user.id, 'Github Token');
+      let { pat: { id } } = await TokensService.create(user.id, 'Github Token');
 
       // Validate it.
       await TokensService.validate(user.id, id);
     });
 
     it('will not allow an invalid token', async () => {
-
       // Create a token.
-      let {pat: {id}} = await TokensService.create(user.id, 'Github Token');
+      let { pat: { id } } = await TokensService.create(user.id, 'Github Token');
 
       // Revoke it.
       await TokensService.revoke(user.id, id);
@@ -74,23 +70,19 @@ describe('services.TokensService', () => {
       // Validate it.
       return TokensService.validate(user.id, id).should.eventually.be.rejected;
     });
-
   });
 
   describe('#list', () => {
-
     it('lists the tokens for a user', async () => {
-
       let tokens = await TokensService.list(user.id);
       expect(tokens).to.have.length(0);
 
       // Create a token.
-      let {pat: {id}} = await TokensService.create(user.id, 'Github Token');
+      let { pat: { id } } = await TokensService.create(user.id, 'Github Token');
 
       tokens = await TokensService.list(user.id);
       expect(tokens).to.have.length(1);
       expect(tokens[0]).to.have.property('id', id);
     });
-
   });
 });
diff --git a/test/server/services/users.js b/test/server/services/users.js
index 0293800eb..1676f517b 100644
--- a/test/server/services/users.js
+++ b/test/server/services/users.js
@@ -1,6 +1,6 @@
 const UsersService = require('../../../services/users');
 const SettingsService = require('../../../services/settings');
-const MailerService = require('../../../services/mailer');
+const mailer = require('../../../services/mailer');
 
 const chai = require('chai');
 chai.use(require('chai-as-promised'));
@@ -9,31 +9,38 @@ chai.use(require('sinon-chai'));
 const expect = chai.expect;
 
 describe('services.UsersService', () => {
-
   let mockUsers;
   beforeEach(async () => {
-    const settings = {id: '1', moderation: 'PRE', wordlist: {banned: ['bad words'], suspect: ['suspect words']}};
+    const settings = {
+      id: '1',
+      moderation: 'PRE',
+      wordlist: { banned: ['bad words'], suspect: ['suspect words'] },
+    };
 
     await SettingsService.init(settings);
-    mockUsers = await UsersService.createLocalUsers([{
-      email: 'stampi@gmail.com',
-      username: 'Stampi',
-      password: '1Coral!-',
-    }, {
-      email: 'sockmonster@gmail.com',
-      username: 'Sockmonster',
-      password: '2Coral!2'
-    }, {
-      email: 'marvel@gmail.com',
-      username: 'Marvel',
-      password: '3Coral!3'
-    }]);
+    mockUsers = await UsersService.createLocalUsers([
+      {
+        email: 'stampi@gmail.com',
+        username: 'Stampi',
+        password: '1Coral!-',
+      },
+      {
+        email: 'sockmonster@gmail.com',
+        username: 'Sockmonster',
+        password: '2Coral!2',
+      },
+      {
+        email: 'marvel@gmail.com',
+        username: 'Marvel',
+        password: '3Coral!3',
+      },
+    ]);
 
-    sinon.spy(MailerService, 'send');
+    sinon.spy(mailer, 'send');
   });
 
   afterEach(() => {
-    MailerService.send.restore();
+    mailer.send.restore();
   });
 
   describe('#findById()', () => {
@@ -45,7 +52,7 @@ describe('services.UsersService', () => {
 
   describe('#findByIdArray()', () => {
     it('should find an array of users from an array of ids', async () => {
-      const ids = mockUsers.map((user) => user.id);
+      const ids = mockUsers.map(user => user.id);
       const users = await UsersService.findByIdArray(ids);
       expect(users).to.have.length(3);
     });
@@ -53,13 +60,17 @@ describe('services.UsersService', () => {
 
   describe('#findPublicByIdArray()', () => {
     it('should find an array of users from an array of ids', async () => {
-      const ids = mockUsers.map((user) => user.id);
+      const ids = mockUsers.map(user => user.id);
       const users = await UsersService.findPublicByIdArray(ids);
       expect(users).to.have.length(3);
 
-      const sorted = users.sort((a, b) =>     {
-        if(a.username < b.username) {return -1;}
-        if(a.username > b.username) {return 1;}
+      const sorted = users.sort((a, b) => {
+        if (a.username < b.username) {
+          return -1;
+        }
+        if (a.username > b.username) {
+          return 1;
+        }
         return 0;
       });
       expect(sorted[0]).to.have.property('username', 'Marvel');
@@ -67,74 +78,83 @@ describe('services.UsersService', () => {
   });
 
   describe('#findLocalUser', () => {
-
     it('should find a user', () => {
-      return UsersService
-        .findLocalUser(mockUsers[0].profiles[0].id)
-        .then((user) => {
+      return UsersService.findLocalUser(mockUsers[0].profiles[0].id).then(
+        user => {
           expect(user).to.have.property('username', mockUsers[0].username);
-        });
+        }
+      );
     });
-
   });
 
   describe('#createLocalUser', () => {
     it('should not create a user with duplicate username', () => {
-      return UsersService.createLocalUsers([{
-        email: 'otrostampi@gmail.com',
-        username: 'StampiTheSecond',
-        password: '1Coralito!'
-      }])
-        .then((user) => {
+      return UsersService.createLocalUsers([
+        {
+          email: 'otrostampi@gmail.com',
+          username: 'StampiTheSecond',
+          password: '1Coralito!',
+        },
+      ])
+        .then(user => {
           expect(user).to.be.null;
         })
-        .catch((error) => {
+        .catch(error => {
           expect(error).to.not.be.null;
         });
     });
   });
 
   describe('#createEmailConfirmToken', () => {
-
     it('should create a token for a valid user', async () => {
-      const token = await UsersService.createEmailConfirmToken(mockUsers[0], mockUsers[0].profiles[0].id);
+      const token = await UsersService.createEmailConfirmToken(
+        mockUsers[0],
+        mockUsers[0].profiles[0].id
+      );
       expect(token).to.not.be.null;
     });
 
     it('should not create a token for a user already verified', async () => {
-      const token = await UsersService.createEmailConfirmToken(mockUsers[0], mockUsers[0].profiles[0].id);
+      const token = await UsersService.createEmailConfirmToken(
+        mockUsers[0],
+        mockUsers[0].profiles[0].id
+      );
       expect(token).to.not.be.null;
 
       await UsersService.verifyEmailConfirmation(token);
 
       const user = await UsersService.findById(mockUsers[0].id);
 
-      return expect(UsersService.createEmailConfirmToken(user, mockUsers[0].profiles[0].id)).to.eventually.be.rejected;
+      return expect(
+        UsersService.createEmailConfirmToken(user, mockUsers[0].profiles[0].id)
+      ).to.eventually.be.rejected;
     });
-
   });
 
   describe('#verifyEmailConfirmation', () => {
-
     it('should correctly validate a valid token', async () => {
-      const token = await UsersService.createEmailConfirmToken(mockUsers[0], mockUsers[0].profiles[0].id);
+      const token = await UsersService.createEmailConfirmToken(
+        mockUsers[0],
+        mockUsers[0].profiles[0].id
+      );
       expect(token).to.not.be.null;
 
-      return expect(UsersService.verifyEmailConfirmation(token)).to.eventually.not.be.rejected;
+      return expect(UsersService.verifyEmailConfirmation(token)).to.eventually
+        .not.be.rejected;
     });
 
     it('should correctly reject an invalid token', async () => {
-      return UsersService
-        .verifyEmailConfirmation('cats')
-        .catch((err) => {
-          expect(err).to.not.be.null;
-        });
+      return UsersService.verifyEmailConfirmation('cats').catch(err => {
+        expect(err).to.not.be.null;
+      });
     });
 
     it('should update the user model when verification is complete', () => {
-      return UsersService
-        .createEmailConfirmToken(mockUsers[0], mockUsers[0].profiles[0].id)
-        .then((token) => {
+      return UsersService.createEmailConfirmToken(
+        mockUsers[0],
+        mockUsers[0].profiles[0].id
+      )
+        .then(token => {
           expect(token).to.not.be.null;
 
           return UsersService.verifyEmailConfirmation(token);
@@ -142,40 +162,27 @@ describe('services.UsersService', () => {
         .then(() => {
           return UsersService.findById(mockUsers[0].id);
         })
-        .then((user) => {
+        .then(user => {
           expect(user.profiles[0]).to.have.property('metadata');
           expect(user.profiles[0].metadata).to.have.property('confirmed_at');
           expect(user.profiles[0].metadata.confirmed_at).to.not.be.null;
         });
     });
-
-  });
-
-  describe('#setStatus', () => {
-    it('should set the status to active', () => {
-      return UsersService
-        .setStatus(mockUsers[0].id, 'ACTIVE')
-        .then(() => UsersService.findById(mockUsers[0].id))
-        .then((user) => {
-          expect(user).to.have.property('status', 'ACTIVE');
-        })
-        .then(() => {
-          expect(MailerService.send).to.not.have.been.called;
-        });
-
-    });
   });
 
   describe('#ignoreUser', () => {
     it('should add user id to ignoredUsers set', async () => {
       const user = mockUsers[0];
       const usersToIgnore = [mockUsers[1], mockUsers[2]];
-      await UsersService.ignoreUsers(user.id, usersToIgnore.map((u) => u.id));
+      await UsersService.ignoreUsers(user.id, usersToIgnore.map(u => u.id));
       const userAfterIgnoring = await UsersService.findById(user.id);
       expect(userAfterIgnoring.ignoresUsers.length).to.equal(2);
 
       // ignore same user another time, make sure it's not added to the list.
-      await UsersService.ignoreUsers(user.id, usersToIgnore.slice(0, 1).map((u) => u.id));
+      await UsersService.ignoreUsers(
+        user.id,
+        usersToIgnore.slice(0, 1).map(u => u.id)
+      );
       const userAfterIgnoring2 = await UsersService.findById(user.id);
       expect(userAfterIgnoring2.ignoresUsers.length).to.equal(2);
     });
@@ -183,10 +190,10 @@ describe('services.UsersService', () => {
     it('should not ignore a staff member', async () => {
       const user = mockUsers[0];
       const usersToIgnore = [mockUsers[1]];
-      await UsersService.addRoleToUser(usersToIgnore[0].id, 'STAFF');
+      await UsersService.setRole(usersToIgnore[0].id, 'STAFF');
 
       try {
-        await UsersService.ignoreUsers(user.id, usersToIgnore.map((u) => u.id));
+        await UsersService.ignoreUsers(user.id, usersToIgnore.map(u => u.id));
       } catch (err) {
         expect(err.status).to.equal(400);
         expect(err.translation_key).to.equal('CANNOT_IGNORE_STAFF');
@@ -194,155 +201,103 @@ describe('services.UsersService', () => {
     });
   });
 
-  describe('#ban', () => {
-    it('should set the status to banned', () => {
-      return UsersService
-        .setStatus(mockUsers[0].id, 'BANNED')
-        .then(() => UsersService.findById(mockUsers[0].id))
-        .then((user) => {
-          expect(user).to.have.property('status', 'BANNED');
-        })
-        .then(() => {
-          expect(MailerService.send).to.have.been.calledWithMatch({
-            template: 'banned',
-            to: mockUsers[0].profiles[0].id
-          });
+  [
+    {
+      func: 'changeUsername',
+      okStatus: 'REJECTED',
+      notOKStatus: 'UNSET',
+      newStatus: 'CHANGED',
+    },
+    {
+      func: 'setUsername',
+      okStatus: 'UNSET',
+      notOKStatus: 'REJECTED',
+      newStatus: 'SET',
+    },
+  ].forEach(({ func, okStatus, notOKStatus, newStatus }) => {
+    describe(`#${func}`, () => {
+      [
+        { status: okStatus },
+        { error: 'EDIT_USERNAME_NOT_AUTHORIZED', status: notOKStatus },
+        { error: 'EDIT_USERNAME_NOT_AUTHORIZED', status: 'SET' },
+        { error: 'EDIT_USERNAME_NOT_AUTHORIZED', status: 'APPROVED' },
+        { error: 'EDIT_USERNAME_NOT_AUTHORIZED', status: 'CHANGED' },
+      ].forEach(({ status, error }) => {
+        it(`${
+          error ? 'should not' : 'should'
+        } let them change the username if they have the status of ${status}`, async () => {
+          const user = mockUsers[0];
+
+          // Set the user to the desired status.
+          await UsersService.setUsernameStatus(user.id, status);
+
+          try {
+            await UsersService[func](user.id, 'spock');
+          } catch (err) {
+            if (error) {
+              expect(err).have.property('translation_key', error);
+            } else {
+              throw err;
+            }
+          }
         });
-    });
+      });
 
-    it('should still disable and ban the user if there is no comment', () => {
-      return UsersService
-        .setStatus(mockUsers[0].id, 'BANNED')
-        .then(() => UsersService.findById(mockUsers[0].id))
-        .then((user) => {
-          expect(user).to.have.property('status', 'BANNED');
-        });
-    });
-  });
+      it(`should change the status to ${newStatus} when changed`, async () => {
+        const user = mockUsers[0];
 
-  describe('#unban', () => {
-    it('should set the status to active', () => {
-      return UsersService
-        .setStatus(mockUsers[0].id, 'ACTIVE')
-        .then(() => UsersService.findById(mockUsers[0].id))
-        .then((user) => {
-          expect(user).to.have.property('status', 'ACTIVE');
-        });
-    });
-  });
+        // Set the user to the desired status.
+        await UsersService.setUsernameStatus(user.id, okStatus);
 
-  describe('#toggleNameEdit', () => {
-    it('should toggle the canEditName field', () => {
-      return UsersService
-        .toggleNameEdit(mockUsers[0].id, true)
-        .then(() => UsersService.findById(mockUsers[0].id))
-        .then((user) => {
-          expect(user).to.have.property('canEditName', true);
-        });
-    });
-  });
+        const editedUser = await UsersService[func](user.id, 'spock');
 
-  describe('#search', () => {
-    it('should return all the results without a value', async () => {
-      expect(await UsersService.search()).to.have.length(3);
-    });
+        expect(editedUser.status.username.status).to.equal(newStatus);
 
-    it('should match the search terms', async () => {
-      const tests = [
-        {
-          search: 'monster',
-          results: 1,
-          id: mockUsers[1].id,
-        },
-        {
-          search: 'Stamp',
-          results: 1,
-          id: mockUsers[0].id,
-        },
-        {
-          search: 'sockmonster@gmail.com',
-          results: 1,
-          id: mockUsers[1].id,
-        },
-        {
-          search: 'marvel',
-          results: 1,
-          id: mockUsers[2].id,
-        },
-        {
-          search: 'gmail.com',
-          results: 3
+        try {
+          await UsersService[func](user.id, 'spock');
+          throw new Error('edit was processed successfully');
+        } catch (err) {
+          expect(err).have.property(
+            'translation_key',
+            'EDIT_USERNAME_NOT_AUTHORIZED'
+          );
         }
-      ];
+      });
 
-      for (const test of tests) {
-        const users = await UsersService.search(test.search);
+      it(`${
+        func === 'changeUsername' ? 'should' : 'should not'
+      } refuse changing the username to the same username`, async () => {
+        const user = mockUsers[0];
 
-        expect(users).to.have.length(test.results);
-        if (test.results === 1) {
-          expect(users[0]).to.have.property('id', test.id);
+        // Set the user to the desired status.
+        await UsersService.setUsernameStatus(user.id, okStatus);
+
+        if (func === 'changeUsername') {
+          try {
+            await UsersService[func](user.id, user.username);
+            throw new Error('edit was processed successfully');
+          } catch (err) {
+            expect(err).have.property(
+              'translation_key',
+              'SAME_USERNAME_PROVIDED'
+            );
+          }
+        } else {
+          await UsersService[func](user.id, user.username);
         }
-      }
+      });
     });
   });
 
-  describe('#editName', () => {
-    it('should let the user edit their username if the proper toggle is set', () => {
-      return UsersService
-        .toggleNameEdit(mockUsers[0].id, true)
-        .then(() => UsersService.editName(mockUsers[0].id, 'Jojo'))
-        .then(() => UsersService.findById(mockUsers[0].id))
-        .then((user) => {
-          expect(user).to.have.property('username', 'Jojo');
-          expect(user).to.have.property('canEditName', false);
-        });
-    });
-
-    it('should let the user submit the same username if user is not banned (create username)', () => {
-      return UsersService
-        .toggleNameEdit(mockUsers[0].id, true)
-        .then(() => UsersService.editName(mockUsers[0].id, mockUsers[0].username))
-        .then(() => UsersService.findById(mockUsers[0].id))
-        .then((user) => {
-          expect(user).to.have.property('username', mockUsers[0].username);
-          expect(user).to.have.property('canEditName', false);
-        });
-    });
-
-    it('should return error when a banned user submits the same username (rejected username)', () => {
-      return UsersService
-        .toggleNameEdit(mockUsers[0].id, true)
-        .then(() => UsersService.setStatus(mockUsers[0].id, 'BANNED'))
-        .then(() => UsersService.editName(mockUsers[0].id, mockUsers[0].username))
-        .then(() => UsersService.findById(mockUsers[0].id))
-        .then(() => {
-          throw new Error('Error expected');
-        })
-        .catch((err) => {
-          expect(err.status).to.equal(400);
-          expect(err.translation_key).to.equal('SAME_USERNAME_PROVIDED');
-        });
-    });
-
-    it('should return an error if canEditName is false', async () => {
-      return expect(UsersService.editName(mockUsers[0].id, 'Jojo')).to.eventually.be.rejected;
-    });
-
-    it('should return an error if the username is already taken', async () => {
-      await UsersService.toggleNameEdit(mockUsers[0].id, true);
-      return expect(UsersService.editName(mockUsers[0].id, 'Marvel')).to.eventually.be.rejected;
-    });
-
+  describe('#isValidUsername', () => {
     it('should not allow non-alphanumeric characters in usernames', () => {
-      return UsersService
-        .isValidUsername('hi🖕')
+      return UsersService.isValidUsername('hi🖕')
         .then(() => {
           expect(false).to.be.true;
         })
-        .catch((err) => {
+        .catch(err => {
           expect(err).to.be.ok;
         });
     });
   });
-
 });
diff --git a/test/server/services/wordlist.js b/test/server/services/wordlist.js
index 5a2422b89..7a11dbf80 100644
--- a/test/server/services/wordlist.js
+++ b/test/server/services/wordlist.js
@@ -6,7 +6,6 @@ const chai = require('chai');
 const expect = chai.expect;
 
 describe('services.Wordlist', () => {
-
   const wordlists = {
     banned: [
       'cookies',
@@ -17,18 +16,19 @@ describe('services.Wordlist', () => {
       'p**ch',
       'p*ch',
     ],
-    suspect: [
-      'do bad things',
-    ]
+    suspect: ['do bad things'],
   };
 
   let wordlist = new Wordlist();
-  const settings = {id: '1', moderation: 'PRE', wordlist: {banned: ['bad words'], suspect: ['suspect words']}};
+  const settings = {
+    id: '1',
+    moderation: 'PRE',
+    wordlist: { banned: ['bad words'], suspect: ['suspect words'] },
+  };
 
   beforeEach(() => SettingsService.init(settings));
 
   describe('#regexp', () => {
-
     before(() => wordlist.upsert(wordlists));
 
     it('does match on a bad word', () => {
@@ -40,8 +40,8 @@ describe('services.Wordlist', () => {
         'how to do bad things',
         'How To do bad things!',
         'This stuff is $hit!',
-        'That\'s a p**ch!',
-      ].forEach((word) => {
+        "That's a p**ch!",
+      ].forEach(word => {
         expect(wordlist.regexp.banned.test(word)).to.be.true;
       });
     });
@@ -54,16 +54,14 @@ describe('services.Wordlist', () => {
         'how to not do really bad things?',
         'i have $100 dollars.',
         'I have bad $ hit lling',
-        'That\'s a p***ch!',
-      ].forEach((word) => {
+        "That's a p***ch!",
+      ].forEach(word => {
         expect(wordlist.regexp.banned.test(word)).to.be.false;
       });
     });
-
   });
 
   describe('#scan', () => {
-
     it('does match on a bad word', () => {
       [
         'how to do really bad things',
@@ -73,8 +71,8 @@ describe('services.Wordlist', () => {
         'how to do bad things',
         'How To do bad things!',
         'This stuff is $hit!',
-        'That\'s a p**ch!',
-      ].forEach((word) => {
+        "That's a p**ch!",
+      ].forEach(word => {
         expect(wordlist.scan('body', word)).to.not.be.undefined;
       });
     });
@@ -87,43 +85,48 @@ describe('services.Wordlist', () => {
         'how to not do really bad things?',
         'i have $100 dollars.',
         'I have bad $ hit lling',
-        'That\'s a p***ch!',
-      ].forEach((word) => {
+        "That's a p***ch!",
+      ].forEach(word => {
         expect(wordlist.scan('body', word)).to.be.deep.equal({});
       });
     });
-
   });
 
   describe('#filter', () => {
-
     before(() => wordlist.upsert(wordlists));
 
     it('matches on bodies containing bad words', () => {
-      let errors = wordlist.filter({
-        content: 'how to do really bad things?'
-      }, 'content');
+      let errors = wordlist.filter(
+        {
+          content: 'how to do really bad things?',
+        },
+        'content'
+      );
 
       expect(errors).to.have.property('banned', Errors.ErrContainsProfanity);
     });
 
     it('does not match on bodies not containing bad words', () => {
-      let errors = wordlist.filter({
-        content: 'how to not do really bad things?'
-      }, 'content');
+      let errors = wordlist.filter(
+        {
+          content: 'how to not do really bad things?',
+        },
+        'content'
+      );
 
       expect(errors).to.not.have.property('banned');
     });
 
     it('does not match on bodies not containing the bad word field', () => {
-      let errors = wordlist.filter({
-        author: 'how to do really bad things?',
-        content: 'how to be a great person?'
-      }, 'content');
+      let errors = wordlist.filter(
+        {
+          author: 'how to do really bad things?',
+          content: 'how to be a great person?',
+        },
+        'content'
+      );
 
       expect(errors).to.not.have.property('banned');
     });
-
   });
-
 });
diff --git a/url.js b/url.js
index 10013ce35..e855859de 100644
--- a/url.js
+++ b/url.js
@@ -1,11 +1,8 @@
-const {
-  ROOT_URL,
-  ROOT_URL_MOUNT_PATH,
-  STATIC_URI,
-} = require('./config');
-const {URL} = require('url');
+const { ROOT_URL, ROOT_URL_MOUNT_PATH, STATIC_URI } = require('./config');
+const { URL } = require('url');
 
-const trailingSlash = (url) => url && url.length > 0 && url[url.length - 1] === '/' ? url : `${url}/`;
+const trailingSlash = url =>
+  url && url.length > 0 && url[url.length - 1] === '/' ? url : `${url}/`;
 
 // Set the BASE_URL as the ROOT_URL, here we derive the root url by ensuring
 // that it ends in a `/`.
diff --git a/views/admin.ejs b/views/admin.ejs
index 9cb8b8ad3..da689f07f 100644
--- a/views/admin.ejs
+++ b/views/admin.ejs
@@ -45,6 +45,6 @@
   <body class="admin-page">
     <div id="root"></div>
     <script src='https://www.google.com/recaptcha/api.js?render=explicit' async defer></script>
-    <script src="<%= STATIC_URL %>client/coral-admin/bundle.js" charset="utf-8"></script>
+    <script src="<%= STATIC_URL %>static/coral-admin/bundle.js" charset="utf-8"></script>
   </body>
 </html>
diff --git a/views/admin/docs.ejs b/views/admin/docs.ejs
index f66040be4..7c6ad9251 100644
--- a/views/admin/docs.ejs
+++ b/views/admin/docs.ejs
@@ -31,6 +31,6 @@
   </head>
   <body class="docs-page">
     <div id="root"></div>
-    <script src="<%= STATIC_URL %>client/coral-docs/bundle.js" charset="utf-8"></script>
+    <script src="<%= STATIC_URL %>static/coral-docs/bundle.js" charset="utf-8"></script>
   </body>
 </html>
diff --git a/views/article.ejs b/views/article.ejs
index 6c611c995..48d361d38 100644
--- a/views/article.ejs
+++ b/views/article.ejs
@@ -25,7 +25,7 @@
     <p><%= body %></p>
     <p><a href="<%= BASE_PATH %>admin">Admin</a> - <a href="<%= BASE_PATH %>assets">All Assets</a></p>
     <div id='coralStreamEmbed'></div>
-    <script src="<%= STATIC_URL %>embed.js" async onload="
+    <script src="<%= STATIC_URL %>static/embed.js" async onload="
       window.TalkEmbed = Coral.Talk.render(document.getElementById('coralStreamEmbed'), {
         talk: '<%= BASE_URL %>',
         asset_url: '<%= asset_url ? asset_url : '' %>',
diff --git a/views/embed/stream.ejs b/views/embed/stream.ejs
index 304a7daff..dcd84d5f7 100644
--- a/views/embed/stream.ejs
+++ b/views/embed/stream.ejs
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no">
-    <link rel="stylesheet" type="text/css" href="<%= STATIC_URL %>client/embed/stream/default.css">
+    <link rel="stylesheet" type="text/css" href="<%= STATIC_URL %>static/embed/stream/default.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
     <%_ if (locals.customCssUrl) { _%>
@@ -16,6 +16,6 @@
   </head>
   <body class="embed-stream-page">
     <div id="talk-embed-stream-container"></div>
-    <script src="<%= STATIC_URL %>client/embed/stream/bundle.js"></script>
+    <script src="<%= STATIC_URL %>static/embed/stream/bundle.js"></script>
   </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
index 14ac7caf5..cb3327fe7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,31 +1,26 @@
 const path = require('path');
 const fs = require('fs');
 const CompressionPlugin = require('compression-webpack-plugin');
+const BrotliPlugin = require('brotli-webpack-plugin');
 const autoprefixer = require('autoprefixer');
 const precss = require('precss');
 const _ = require('lodash');
 const Copy = require('copy-webpack-plugin');
-const {LicenseWebpackPlugin} = require('license-webpack-plugin');
 const webpack = require('webpack');
 const debug = require('debug')('talk:webpack');
 
 // Possibly load the config from the .env file (if there is one).
 require('dotenv').config();
 
-const {plugins, pluginsPath, PluginManager} = require('./plugins');
+const { plugins, pluginsPath, PluginManager } = require('./plugins');
 const manager = new PluginManager(plugins);
 const targetPlugins = manager.section('targets').plugins;
 
 debug(`Using ${pluginsPath} as the plugin configuration path`);
 
-const buildTargets = [
-  'coral-admin',
-  'coral-docs'
-];
+const buildTargets = ['coral-admin', 'coral-docs'];
 
-const buildEmbeds = [
-  'stream'
-];
+const buildEmbeds = ['stream'];
 
 //==============================================================================
 // Base Webpack Config
@@ -36,28 +31,29 @@ const config = {
   target: 'web',
   output: {
     path: path.join(__dirname, 'dist'),
-    publicPath: '/client/',
-    filename: '[name].js'
+    publicPath: '/static/',
+    filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
   },
   module: {
     rules: [
       {
         loader: 'plugins-loader',
         test: /\.(json|js)$/,
-        include: pluginsPath
+        include: pluginsPath,
       },
       {
         loader: 'babel-loader',
         exclude: /node_modules/,
         test: /\.js$/,
         query: {
-          cacheDirectory: true
-        }
+          cacheDirectory: true,
+        },
       },
       {
         loader: 'json-loader',
         test: /\.(json|yml)$/,
-        exclude: /node_modules/
+        exclude: /node_modules/,
       },
       {
         loader: 'yaml-loader',
@@ -68,71 +64,87 @@ const config = {
         loaders: [
           'style-loader',
           'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
-          'postcss-loader'
+          'postcss-loader',
         ],
         test: /.css$/,
       },
       {
         loader: 'file-loader',
-        test: /\.(jpg|png|gif|svg)$/
+        test: /\.(jpg|png|gif|svg)$/,
       },
       {
         loader: 'url-loader?limit=100000',
-        test: /\.woff$/
+        test: /\.woff$/,
       },
       {
         test: /\.(graphql|gql)$/,
         exclude: /node_modules/,
-        loader: 'graphql-tag/loader'
-      }
-    ]
+        loader: 'graphql-tag/loader',
+      },
+    ],
   },
   plugins: [
-    new LicenseWebpackPlugin({
-      pattern: /^(MIT|ISC|BSD.*)$/,
-      suppressErrors: true,
-    }),
     new Copy([
-      ...buildEmbeds.map((embed) => ({
+      ...buildEmbeds.map(embed => ({
         from: path.join(__dirname, 'client', `coral-embed-${embed}`, 'style'),
-        to: path.join(__dirname, 'dist', 'embed', embed)
-      }))
+        to: path.join(__dirname, 'dist', 'embed', embed),
+      })),
     ]),
     autoprefixer,
     precss,
     new webpack.ProvidePlugin({
-      'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
+      fetch:
+        'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
     }),
     new webpack.DefinePlugin({
       'process.env': {
-        'VERSION': `"${require('./package.json').version}"`,
-      }
+        VERSION: `"${require('./package.json').version}"`,
+      },
     }),
     new webpack.EnvironmentPlugin({
-      'TALK_PLUGINS_JSON': '{}',
-      'TALK_THREADING_LEVEL': '3',
-      'TALK_DEFAULT_STREAM_TAB': 'all',
-      'TALK_DEFAULT_LANG': 'en'
-    })
+      TALK_PLUGINS_JSON: '{}',
+      TALK_THREADING_LEVEL: '3',
+      TALK_DEFAULT_STREAM_TAB: 'all',
+      TALK_DEFAULT_LANG: 'en',
+    }),
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
   ],
   resolveLoader: {
-    modules: ['node_modules', path.resolve(__dirname, 'client/coral-framework/loaders')],
+    modules: [
+      'node_modules',
+      path.resolve(__dirname, 'client/coral-framework/loaders'),
+    ],
   },
   resolve: {
     alias: {
-      'graphql-anywhere': path.resolve(__dirname, 'client/coral-framework/graphql/anywhere'),
+      'graphql-anywhere': path.resolve(
+        __dirname,
+        'client/coral-framework/graphql/anywhere'
+      ),
       'plugin-api': path.resolve(__dirname, 'plugin-api/'),
       plugins: path.resolve(__dirname, 'plugins/'),
-      pluginsConfig: pluginsPath
+      pluginsConfig: pluginsPath,
+      lodash: path.resolve(
+        __dirname,
+        path.resolve(__dirname, 'node_modules/lodash-es')
+      ),
+      'lodash.isequal': path.resolve(
+        __dirname,
+        'node_modules/lodash-es/isEqual'
+      ),
     },
     modules: [
       path.resolve(__dirname, 'plugins'),
       path.resolve(__dirname, 'client'),
-      ...buildTargets.map((target) => path.join(__dirname, 'client', target, 'src')),
-      ...buildEmbeds.map((embed) => path.join(__dirname, 'client', `coral-embed-${embed}`, 'src')),
-      'node_modules'
-    ]
-  }
+      ...buildTargets.map(target =>
+        path.join(__dirname, 'client', target, 'src')
+      ),
+      ...buildEmbeds.map(embed =>
+        path.join(__dirname, 'client', `coral-embed-${embed}`, 'src')
+      ),
+      'node_modules',
+    ],
+  },
 };
 
 //==============================================================================
@@ -140,13 +152,23 @@ const config = {
 //==============================================================================
 
 if (process.env.NODE_ENV === 'production') {
-  config.plugins.push(new CompressionPlugin({
-    asset: '[path].gz[query]',
-    algorithm: 'gzip',
-    test: /\.(js)$/,
-    threshold: 10240,
-    minRatio: 0.8
-  }));
+  config.plugins.push(
+    new CompressionPlugin({
+      algorithm: 'gzip',
+      asset: '[path].gz[query]',
+      test: /\.(js|css)$/,
+    }),
+    new CompressionPlugin({
+      algorithm: 'deflate',
+      asset: '[path].zz[query]',
+      test: /\.(js|css)$/,
+    }),
+    new BrotliPlugin({
+      asset: '[path].br[query]',
+      threshold: 10240,
+      test: /\.(js|css)$/,
+    })
+  );
 }
 
 //==============================================================================
@@ -154,70 +176,85 @@ if (process.env.NODE_ENV === 'production') {
 //==============================================================================
 
 // Applies the base configuration to the following entries.
-const applyConfig = (entries, root = {}) => _.merge({}, config, {
-  entry: entries.reduce((entry, {name, path, disablePolyfill = false}) => {
-    if (disablePolyfill) {
-      entry[name] = path;
-    } else {
-      entry[name] = [
-        'babel-polyfill',
-        path
-      ];
-    }
+const applyConfig = (entries, root = {}) =>
+  _.merge(
+    {},
+    config,
+    {
+      entry: entries.reduce(
+        (entry, { name, path, disablePolyfill = false }) => {
+          if (disablePolyfill) {
+            entry[name] = path;
+          } else {
+            entry[name] = ['babel-polyfill', path];
+          }
 
-    return entry;
-  }, {})
-}, root);
+          return entry;
+        },
+        {}
+      ),
+    },
+    root
+  );
 
 module.exports = [
-
   // Coral Embed
-  applyConfig([
-
-    // Load in the root embed.
+  applyConfig(
+    [
+      // Load in the root embed.
+      {
+        name: 'embed',
+        path: path.join(__dirname, 'client/coral-embed/src/index'),
+        disablePolyfill: process.env.TALK_DISABLE_EMBED_POLYFILL === 'TRUE',
+      },
+    ],
     {
-      name: 'embed',
-      path: path.join(__dirname, 'client/coral-embed/src/index'),
-      disablePolyfill: process.env.TALK_DISABLE_EMBED_POLYFILL === 'TRUE'
+      output: {
+        library: 'Coral',
+      },
     }
-
-  ], {
-    output: {
-      library: 'Coral'
-    }
-  }),
+  ),
 
   // All framework targets/embeds/plugins.
   applyConfig([
-
     // Load in all the targets.
-    ...buildTargets.map((target) => ({
+    ...buildTargets.map(target => ({
       name: `${target}/bundle`,
-      path: path.join(__dirname, 'client/', target, '/src/index')
+      path: path.join(__dirname, 'client/', target, '/src/index'),
     })),
 
     // Load in all the embeds.
-    ...buildEmbeds.map((embed) => ({
+    ...buildEmbeds.map(embed => ({
       name: `embed/${embed}/bundle`,
-      path: path.join(__dirname, 'client/', `coral-embed-${embed}`, '/src/index')
+      path: path.join(
+        __dirname,
+        'client/',
+        `coral-embed-${embed}`,
+        '/src/index'
+      ),
     })),
 
     // Load in all the plugin entries.
     ...targetPlugins.reduce((entries, plugin) => {
-
       // Introspect the path to find a targets folder.
       let folder = path.dirname(plugin.path);
       let files = fs.readdirSync(folder);
 
       // While the folder does not contain the targets folder...
       while (!files.includes('targets')) {
-
         // Try to go up a folder.
         folder = path.normalize(path.join(folder, '..'));
 
         // And as long as we haven't gone too high
-        if (!(folder.includes(path.join(__dirname, 'node_modules')) || !folder.includes(path.join(__dirname, 'plugins')))) {
-          throw new Error(`target plugin ${plugin.name} does not have a 'targets' folder`);
+        if (
+          !(
+            folder.includes(path.join(__dirname, 'node_modules')) ||
+            !folder.includes(path.join(__dirname, 'plugins'))
+          )
+        ) {
+          throw new Error(
+            `target plugin ${plugin.name} does not have a 'targets' folder`
+          );
         }
 
         files = fs.readdirSync(folder);
@@ -228,13 +265,19 @@ module.exports = [
 
       let targets = fs.readdirSync(folder);
       if (targets.length === 0) {
-        throw new Error(`target plugin ${plugin.name} has no targets in it's target folder ${folder}`);
+        throw new Error(
+          `target plugin ${
+            plugin.name
+          } has no targets in it's target folder ${folder}`
+        );
       }
 
-      return entries.concat(targets.map((target) => ({
-        name: `plugin/${plugin.name}/${target}/bundle`,
-        path: path.join(folder, target, 'index')
-      })));
-    }, [])
-  ])
+      return entries.concat(
+        targets.map(target => ({
+          name: `plugin/${plugin.name}/${target}/bundle`,
+          path: path.join(folder, target, 'index'),
+        }))
+      );
+    }, []),
+  ]),
 ];
diff --git a/yarn.lock b/yarn.lock
index b9ef3f31e..53de65471 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,14 +2,69 @@
 # yarn lockfile v1
 
 
-"@coralproject/eslint-config-talk@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@coralproject/eslint-config-talk/-/eslint-config-talk-0.0.4.tgz#35a28c10b12bc4da96417afbce17b4743d3bfcf6"
+"@babel/code-frame@7.0.0-beta.36":
+  version "7.0.0-beta.36"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.36.tgz#2349d7ec04b3a06945ae173280ef8579b63728e4"
   dependencies:
-    eslint-plugin-jest "^21.2.0"
-    eslint-plugin-json "^1.2.0"
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+"@babel/helper-function-name@7.0.0-beta.36":
+  version "7.0.0-beta.36"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.36.tgz#366e3bc35147721b69009f803907c4d53212e88d"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-beta.36"
+    "@babel/template" "7.0.0-beta.36"
+    "@babel/types" "7.0.0-beta.36"
+
+"@babel/helper-get-function-arity@7.0.0-beta.36":
+  version "7.0.0-beta.36"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.36.tgz#f5383bac9a96b274828b10d98900e84ee43e32b8"
+  dependencies:
+    "@babel/types" "7.0.0-beta.36"
+
+"@babel/template@7.0.0-beta.36":
+  version "7.0.0-beta.36"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.36.tgz#02e903de5d68bd7899bce3c5b5447e59529abb00"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.36"
+    "@babel/types" "7.0.0-beta.36"
+    babylon "7.0.0-beta.36"
+    lodash "^4.2.0"
+
+"@babel/traverse@7.0.0-beta.36":
+  version "7.0.0-beta.36"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.36.tgz#1dc6f8750e89b6b979de5fe44aa993b1a2192261"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.36"
+    "@babel/helper-function-name" "7.0.0-beta.36"
+    "@babel/types" "7.0.0-beta.36"
+    babylon "7.0.0-beta.36"
+    debug "^3.0.1"
+    globals "^11.1.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+"@babel/types@7.0.0-beta.36":
+  version "7.0.0-beta.36"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.36.tgz#64f2004353de42adb72f9ebb4665fc35b5499d23"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
+"@coralproject/eslint-config-talk@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@coralproject/eslint-config-talk/-/eslint-config-talk-0.1.0.tgz#3ddc5f6fb4362a1cd05a5fea56cdb3095afc8cc3"
+  dependencies:
+    babel-eslint "^8.0.1"
+    eslint-config-prettier "^2.9.0"
+    eslint-plugin-jest "^21.6.1"
+    eslint-plugin-prettier "^2.4.0"
     eslint-plugin-promise "^3.3.1"
-    eslint-plugin-react "^7.3.0"
+    eslint-plugin-react "^7.5.1"
+    prettier "^1.10.2"
 
 "@coralproject/graphql-anywhere-optimized@^0.1.0":
   version "0.1.5"
@@ -24,30 +79,11 @@
     git-url-parse "^6.0.2"
     shelljs "^0.7.0"
 
-"@remy/pstree@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@remy/pstree/-/pstree-1.1.0.tgz#414045d4fec60946604f3718023052aaf49bd8d3"
-  dependencies:
-    ps-tree "^1.1.0"
-
-"@types/express-serve-static-core@*":
-  version "4.0.53"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.0.53.tgz#1723a35d1447f2c55e13c8721eab3448e42f4d82"
-  dependencies:
-    "@types/node" "*"
-
-"@types/express@^4.0.35":
-  version "4.0.37"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.0.37.tgz#625ac3765169676e01897ca47011c26375784971"
-  dependencies:
-    "@types/express-serve-static-core" "*"
-    "@types/serve-static" "*"
-
 "@types/graphql@0.10.2":
   version "0.10.2"
   resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.10.2.tgz#d7c79acbaa17453b6681c80c34b38fcb10c4c08c"
 
-"@types/graphql@^0.8.5", "@types/graphql@^0.8.6":
+"@types/graphql@^0.8.5":
   version "0.8.6"
   resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.8.6.tgz#b34fb880493ba835b0c067024ee70130d6f9bb68"
 
@@ -55,24 +91,9 @@
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.9.4.tgz#cdeb6bcbef9b6c584374b81aa7f48ecf3da404fa"
 
-"@types/mime@*":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.0.tgz#5a7306e367c539b9f6543499de8dd519fac37a8b"
-
 "@types/node@*":
-  version "8.0.45"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.45.tgz#89fad82439d5624e1b5c6b42f0f5d85136dcdecc"
-
-"@types/node@^6.0.46":
-  version "6.0.90"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.90.tgz#0ed74833fa1b73dcdb9409dcb1c97ec0a8b13b02"
-
-"@types/serve-static@*":
-  version "1.7.32"
-  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.7.32.tgz#0f6732e4dab0813771dd8fc8fe14940f34728b4c"
-  dependencies:
-    "@types/express-serve-static-core" "*"
-    "@types/mime" "*"
+  version "8.0.53"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.53.tgz#396b35af826fa66aad472c8cb7b8d5e277f4e6d8"
 
 "@types/ws@^3.0.0":
   version "3.2.0"
@@ -88,10 +109,6 @@ abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
 
-abbrev@1.0.x:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
-
 accepts@^1.3.4, accepts@~1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
@@ -169,7 +186,7 @@ ajv@^4.7.0, ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.0.0, ajv@^5.1.0:
+ajv@^5.0.0:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.3.tgz#c06f598778c44c6b161abafe3466b81ad1814ed2"
   dependencies:
@@ -178,7 +195,7 @@ ajv@^5.0.0, ajv@^5.1.0:
     json-schema-traverse "^0.3.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.2.3, ajv@^5.3.0:
+ajv@^5.1.0, ajv@^5.2.3, ajv@^5.3.0:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   dependencies:
@@ -221,6 +238,10 @@ ansi-escapes@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
 
+ansi-escapes@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
+
 ansi-escapes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
@@ -262,6 +283,12 @@ anymatch@^1.3.0:
     micromatch "^2.1.5"
     normalize-path "^2.0.0"
 
+apollo-cache-control@^0.0.x:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/apollo-cache-control/-/apollo-cache-control-0.0.7.tgz#ffef56413a429a1ce204be5b78d248c4fe3b67ac"
+  dependencies:
+    graphql-extensions "^0.0.x"
+
 apollo-client@^1.4.0, apollo-client@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/apollo-client/-/apollo-client-1.9.3.tgz#37000b3c801f4571b7b089739e696a158896aeab"
@@ -276,6 +303,29 @@ apollo-client@^1.4.0, apollo-client@^1.9.1:
   optionalDependencies:
     "@types/graphql" "0.10.2"
 
+apollo-engine-binary-darwin@0.2017.12-45-g12ba029f9:
+  version "0.2017.12-45-g12ba029f9"
+  resolved "https://registry.yarnpkg.com/apollo-engine-binary-darwin/-/apollo-engine-binary-darwin-0.2017.12-45-g12ba029f9.tgz#a1c646179337fa58093decc4fd278b6518d2734a"
+
+apollo-engine-binary-linux@0.2017.12-45-g12ba029f9:
+  version "0.2017.12-45-g12ba029f9"
+  resolved "https://registry.yarnpkg.com/apollo-engine-binary-linux/-/apollo-engine-binary-linux-0.2017.12-45-g12ba029f9.tgz#4a3948fb887a16f302ed9eb8466df7bf70c23e80"
+
+apollo-engine-binary-windows@0.2017.12-45-g12ba029f9:
+  version "0.2017.12-45-g12ba029f9"
+  resolved "https://registry.yarnpkg.com/apollo-engine-binary-windows/-/apollo-engine-binary-windows-0.2017.12-45-g12ba029f9.tgz#4a8985ae2e024e6b0c4b229f5fb6cf4b0baacf69"
+
+apollo-engine@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/apollo-engine/-/apollo-engine-0.8.1.tgz#ff3182061e729d631b4c5c1a49c2e731a430ba9b"
+  dependencies:
+    request "^2.81.0"
+    stream-json "^0.5.2"
+  optionalDependencies:
+    apollo-engine-binary-darwin "0.2017.12-45-g12ba029f9"
+    apollo-engine-binary-linux "0.2017.12-45-g12ba029f9"
+    apollo-engine-binary-windows "0.2017.12-45-g12ba029f9"
+
 apollo-link-core@^0.5.0:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/apollo-link-core/-/apollo-link-core-0.5.4.tgz#8efd4cd747959872a32f313f0ccfc2a76b396668"
@@ -284,6 +334,31 @@ apollo-link-core@^0.5.0:
     graphql-tag "^2.4.2"
     zen-observable-ts "^0.4.4"
 
+apollo-server-core@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/apollo-server-core/-/apollo-server-core-1.3.2.tgz#f36855a3ebdc2d77b8b9c454380bf1d706105ffc"
+  dependencies:
+    apollo-cache-control "^0.0.x"
+    apollo-tracing "^0.1.0"
+    graphql-extensions "^0.0.x"
+
+apollo-server-express@^1.2.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/apollo-server-express/-/apollo-server-express-1.3.2.tgz#0ff8201c0bf362804a151e1399767dae6ab7e309"
+  dependencies:
+    apollo-server-core "^1.3.2"
+    apollo-server-module-graphiql "^1.3.0"
+
+apollo-server-module-graphiql@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/apollo-server-module-graphiql/-/apollo-server-module-graphiql-1.3.2.tgz#0a9e4c48dece3af904fee333f95f7b9817335ca7"
+
+apollo-tracing@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/apollo-tracing/-/apollo-tracing-0.1.1.tgz#7a5707543fc102f81cda7ba45b98331a82a6750b"
+  dependencies:
+    graphql-extensions "^0.0.x"
+
 apollo-utilities@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.3.tgz#bf435277609850dd442cf1d5c2e8bc6655eaa943"
@@ -304,7 +379,7 @@ append-transform@^0.4.0:
   dependencies:
     default-require-extensions "^1.0.0"
 
-aproba@^1.0.3:
+aproba@^1.0.3, aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
 
@@ -335,6 +410,10 @@ array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
 
+array-filter@~0.0.0:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -346,6 +425,14 @@ array-includes@^3.0.3:
     define-properties "^1.1.2"
     es-abstract "^1.7.0"
 
+array-map@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
+
+array-reduce@~0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
+
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -418,10 +505,6 @@ async-limiter@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
 
-async@1.x, async@^1.4.0, async@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
-
 async@2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4"
@@ -434,7 +517,11 @@ async@2.4.1, async@^2.1.2:
   dependencies:
     lodash "^4.14.0"
 
-async@^2.1.4:
+async@^1.4.0, async@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+
+async@^2.1.4, async@~2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
   dependencies:
@@ -537,6 +624,17 @@ babel-eslint@7.2.3:
     babel-types "^6.23.0"
     babylon "^6.17.0"
 
+babel-eslint@^8.0.1:
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.1.tgz#136888f3c109edc65376c23ebf494f36a3e03951"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.36"
+    "@babel/traverse" "7.0.0-beta.36"
+    "@babel/types" "7.0.0-beta.36"
+    babylon "7.0.0-beta.36"
+    eslint-scope "~3.7.1"
+    eslint-visitor-keys "^1.0.0"
+
 babel-generator@^6.18.0, babel-generator@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
@@ -671,12 +769,10 @@ babel-plugin-check-es2015-constants@^6.22.0:
     babel-runtime "^6.22.0"
 
 babel-plugin-dynamic-import-node@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-1.1.0.tgz#bd1d88ac7aaf98df4917c384373b04d971a2b37a"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-1.2.0.tgz#f91631e703e0595e47d4beafbb088576c87fbeee"
   dependencies:
     babel-plugin-syntax-dynamic-import "^6.18.0"
-    babel-template "^6.26.0"
-    babel-types "^6.26.0"
 
 babel-plugin-istanbul@^4.0.0:
   version "4.1.5"
@@ -1085,6 +1181,10 @@ babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
+babylon@7.0.0-beta.36:
+  version "7.0.0-beta.36"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.36.tgz#3a3683ba6a9a1e02b0aa507c8e63435e39305b9e"
+
 babylon@^6.17.0, babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
@@ -1109,7 +1209,7 @@ balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
 
-base64-js@^1.0.2:
+base64-js@^1.0.2, base64-js@^1.1.2:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
 
@@ -1161,7 +1261,7 @@ bluebird@3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
 
-bluebird@3.5.1, bluebird@^3.3.4, bluebird@^3.4.6, bluebird@^3.5.0, bluebird@^3.5.1:
+bluebird@3.5.1, bluebird@^3.3.4, bluebird@^3.4.6, bluebird@^3.5.0:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
@@ -1207,8 +1307,8 @@ boom@5.x.x:
     hoek "4.x.x"
 
 bowser@^1.7.2:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.8.1.tgz#49785777e7302febadb1a5b71d9a646520ed310d"
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.0.tgz#c5015128dcf155b4e3d11d1ab46b7a4b6ee695b8"
 
 boxen@^1.2.1:
   version "1.3.0"
@@ -1241,6 +1341,22 @@ brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
 
+brotli-webpack-plugin@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/brotli-webpack-plugin/-/brotli-webpack-plugin-0.5.0.tgz#9a06a744bb4af0e6d66d08b7f4f8b892a53ccc58"
+  dependencies:
+    async "~2.6.0"
+    webpack-sources "^1.0.2"
+  optionalDependencies:
+    brotli "^1.3.1"
+    iltorb "^2.0.1"
+
+brotli@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/brotli/-/brotli-1.3.2.tgz#525a9cad4fcba96475d7d388f6aecb13eed52f46"
+  dependencies:
+    base64-js "^1.1.2"
+
 browser-resolve@^1.11.2:
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
@@ -1392,6 +1508,24 @@ bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
 
+cacache@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.1.tgz#3e05f6e616117d9b54665b1b20c8aeb93ea5d36f"
+  dependencies:
+    bluebird "^3.5.0"
+    chownr "^1.0.1"
+    glob "^7.1.2"
+    graceful-fs "^4.1.11"
+    lru-cache "^4.1.1"
+    mississippi "^1.3.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.1"
+    ssri "^5.0.0"
+    unique-filename "^1.1.0"
+    y18n "^3.2.1"
+
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
@@ -1464,6 +1598,12 @@ chai-as-promised@^6.0.0:
   dependencies:
     check-error "^1.0.2"
 
+chai-datetime@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/chai-datetime/-/chai-datetime-1.5.0.tgz#3742f18b024c75b76a2b7eee291662324467596c"
+  dependencies:
+    chai ">1.9.0"
+
 chai-http@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/chai-http/-/chai-http-3.0.0.tgz#5460d8036e1f1a12b0b5b5cbd529e6dc1d31eb4b"
@@ -1481,7 +1621,7 @@ chai-nightwatch@~0.1.x:
     assertion-error "1.0.0"
     deep-eql "0.1.3"
 
-chai@^3.5.0:
+chai@>1.9.0, chai@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/chai/-/chai-3.5.0.tgz#4d02637b067fe958bdbfdd3a40ec56fef7373247"
   dependencies:
@@ -1593,6 +1733,10 @@ chokidar@^1.6.1, chokidar@^1.7.0:
   optionalDependencies:
     fsevents "^1.0.0"
 
+chownr@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
+
 chrono-node@^1.2.3:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/chrono-node/-/chrono-node-1.3.5.tgz#a2495298a32da82bcc01ad9be7d77efa5e244122"
@@ -1665,13 +1809,6 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
-cli@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cli/-/cli-1.0.1.tgz#22817534f24bfa4950c34d532d48ecbc621b8c14"
-  dependencies:
-    exit "0.1.2"
-    glob "^7.1.1"
-
 clipboard@^1.7.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b"
@@ -1798,7 +1935,7 @@ combined-stream@~0.0.4:
   dependencies:
     delayed-stream "0.0.5"
 
-commander@2.11.0, commander@^2.11.0:
+commander@2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
 
@@ -1814,7 +1951,7 @@ commander@2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.9.0:
+commander@^2.11.0, commander@^2.9.0:
   version "2.12.2"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
 
@@ -1823,10 +1960,10 @@ commander@~2.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781"
 
 common-tags@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.4.0.tgz#1187be4f3d4cf0c0427d43f74eef1f73501614c0"
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.5.1.tgz#e2e39931a013cd02253defeed89a1ad615a27f07"
   dependencies:
-    babel-runtime "^6.18.0"
+    babel-runtime "^6.26.0"
 
 commondir@^1.0.1:
   version "1.0.1"
@@ -1843,10 +1980,13 @@ compressible@~2.0.11:
     mime-db ">= 1.29.0 < 2"
 
 compression-webpack-plugin@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-1.0.1.tgz#7f0a2af9f642b4f87b5989516a3b9e9b41bb4b3f"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-1.1.2.tgz#ae80491e3138db7ec168af91a800312594a18943"
   dependencies:
     async "2.4.1"
+    cacache "^10.0.1"
+    find-cache-dir "^1.0.0"
+    serialize-javascript "^1.4.0"
     webpack-sources "^1.0.1"
 
 compression@1.7.1:
@@ -1865,7 +2005,7 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
-concat-stream@^1.4.7, concat-stream@^1.6.0:
+concat-stream@^1.4.7, concat-stream@^1.5.0, concat-stream@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
   dependencies:
@@ -1893,7 +2033,7 @@ connect@3.6.5:
     parseurl "~1.3.2"
     utils-merge "1.0.1"
 
-console-browserify@1.1.x, console-browserify@^1.1.0:
+console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
   dependencies:
@@ -1968,24 +2108,41 @@ cookiejar@2.0.x, cookiejar@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.0.6.tgz#0abf356ad00d1c5a219d88d44518046dd026acfe"
 
-copy-webpack-plugin@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.1.1.tgz#53ae69e04955ebfa9fda411f54cbb968531d71fd"
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
   dependencies:
-    bluebird "^3.5.1"
-    fs-extra "^4.0.2"
-    glob "^7.1.2"
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
+
+copy-webpack-plugin@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.3.0.tgz#cfdf4d131c78d66917a1bb863f86630497aacf42"
+  dependencies:
+    cacache "^10.0.1"
+    find-cache-dir "^1.0.0"
+    globby "^7.1.1"
     is-glob "^4.0.0"
     loader-utils "^0.2.15"
     lodash "^4.3.0"
     minimatch "^3.0.4"
-    node-dir "^0.1.10"
+    p-limit "^1.0.0"
+    pify "^3.0.0"
+    serialize-javascript "^1.4.0"
 
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
 
-core-js@^2.4.0, core-js@^2.5.0:
+core-js@^2.4.0, core-js@^2.5.1:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.3.tgz#8acc38345824f16d8365b7c9b4259168e8ed603e"
+
+core-js@^2.5.0:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
 
@@ -2212,6 +2369,10 @@ cycle@1.0.x:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/cycle/-/cycle-1.0.3.tgz#21e80b2be8580f98b468f379430662b046c34ad2"
 
+cyclist@~0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
+
 cz-conventional-changelog@1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/cz-conventional-changelog/-/cz-conventional-changelog-1.1.5.tgz#0a4d1550c4e2fb6a3aed8f6cd858c21760e119b8"
@@ -2386,6 +2547,10 @@ detect-indent@^4.0.0:
   dependencies:
     repeating "^2.0.0"
 
+detect-libc@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-0.2.0.tgz#47fdf567348a17ec25fcbf0b9e446348a76f9fb5"
+
 detect-libc@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
@@ -2417,6 +2582,13 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+dir-glob@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  dependencies:
+    arrify "^1.0.1"
+    path-type "^3.0.0"
+
 discontinuous-range@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
@@ -2450,27 +2622,40 @@ domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
 
-domelementtype@1, domelementtype@~1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
-
-domelementtype@^1.3.0:
+domelementtype@1, domelementtype@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
 
-domhandler@2.3, domhandler@^2.3.0:
+domelementtype@~1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+
+domhandler@2.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.3.0.tgz#2de59a0822d5027fabff6f032c2b25a2a8abe738"
   dependencies:
     domelementtype "1"
 
-domutils@1.5, domutils@1.5.1, domutils@^1.5.1:
+domhandler@^2.3.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259"
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5, domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
   dependencies:
     dom-serializer "0"
     domelementtype "1"
 
+domutils@^1.5.1:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff"
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
 dont-sniff-mimetype@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dont-sniff-mimetype/-/dont-sniff-mimetype-1.0.0.tgz#5932890dc9f4e2f19e5eb02a20026e5e5efc8f58"
@@ -2497,6 +2682,15 @@ duplexer@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
 
+duplexify@^3.1.2, duplexify@^3.4.2:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.1.tgz#4e1516be68838bc90a49994f0b39a6e5960befcd"
+  dependencies:
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"
+
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -2548,7 +2742,7 @@ encoding@^0.1.11:
   dependencies:
     iconv-lite "~0.4.13"
 
-end-of-stream@^1.0.0:
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
   dependencies:
@@ -2605,19 +2799,20 @@ enzyme-adapter-utils@^1.0.0, enzyme-adapter-utils@^1.1.0:
     prop-types "^15.5.10"
 
 enzyme@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.1.0.tgz#d8ca84085790fbcec6ed40badd14478faee4c25a"
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.2.0.tgz#998bdcda0fc71b8764a0017f7cc692c943f54a7a"
   dependencies:
     cheerio "^1.0.0-rc.2"
     function.prototype.name "^1.0.3"
+    has "^1.0.1"
     is-subset "^0.1.1"
     lodash "^4.17.4"
     object-is "^1.0.1"
     object.assign "^4.0.4"
     object.entries "^1.0.4"
     object.values "^1.0.4"
-    raf "^3.3.2"
-    rst-selector-parser "^2.2.2"
+    raf "^3.4.0"
+    rst-selector-parser "^2.2.3"
 
 errno@^0.1.3, errno@^0.1.4:
   version "0.1.4"
@@ -2625,15 +2820,15 @@ errno@^0.1.3, errno@^0.1.4:
   dependencies:
     prr "~0.0.0"
 
-error-ex@^1.2.0:
+error-ex@^1.2.0, error-ex@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.6.1:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
+es-abstract@^1.4.3, es-abstract@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
   dependencies:
     es-to-primitive "^1.1.1"
     function-bind "^1.1.1"
@@ -2641,9 +2836,9 @@ es-abstract@^1.6.1:
     is-callable "^1.1.3"
     is-regex "^1.0.4"
 
-es-abstract@^1.7.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
+es-abstract@^1.6.1:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
   dependencies:
     es-to-primitive "^1.1.1"
     function-bind "^1.1.1"
@@ -2663,10 +2858,6 @@ es6-promise@3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.2.1.tgz#ec56233868032909207170c39448e24449dd1fc4"
 
-es6-promise@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
-
 es6-promise@^4.0.5:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.1.tgz#8811e90915d9a0dba36274f0b242dbda78f9c92a"
@@ -2694,15 +2885,15 @@ escodegen@1.x.x, escodegen@^1.6.1:
   optionalDependencies:
     source-map "~0.5.6"
 
-eslint-plugin-jest@^21.2.0:
-  version "21.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.2.0.tgz#292044df9cf0866ad9c530e78e6528fae287b926"
-
-eslint-plugin-json@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-json/-/eslint-plugin-json-1.2.0.tgz#9ba73bb0be99d50093e889f5b968463d2a30efae"
+eslint-config-prettier@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.9.0.tgz#5ecd65174d486c22dff389fe036febf502d468a3"
   dependencies:
-    jshint "^2.8.0"
+    get-stdin "^5.0.1"
+
+eslint-plugin-jest@^21.6.1:
+  version "21.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.6.1.tgz#adca015bbdb8d23b210438ff9e1cee1dd9ec35df"
 
 eslint-plugin-mocha@^4.11.0:
   version "4.11.0"
@@ -2710,26 +2901,37 @@ eslint-plugin-mocha@^4.11.0:
   dependencies:
     ramda "^0.24.1"
 
+eslint-plugin-prettier@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.4.0.tgz#85cab0775c6d5e3344ef01e78d960f166fb93aae"
+  dependencies:
+    fast-diff "^1.1.1"
+    jest-docblock "^21.0.0"
+
 eslint-plugin-promise@^3.3.1:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.6.0.tgz#54b7658c8f454813dc2a870aff8152ec4969ba75"
 
-eslint-plugin-react@^7.3.0:
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.4.0.tgz#300a95861b9729c087d362dd64abcc351a74364a"
+eslint-plugin-react@^7.5.1:
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.5.1.tgz#52e56e8d80c810de158859ef07b880d2f56ee30b"
   dependencies:
     doctrine "^2.0.0"
     has "^1.0.1"
     jsx-ast-utils "^2.0.0"
-    prop-types "^15.5.10"
+    prop-types "^15.6.0"
 
-eslint-scope@^3.7.1:
+eslint-scope@^3.7.1, eslint-scope@~3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
   dependencies:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
+eslint-visitor-keys@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
+
 eslint@^4.5.0:
   version "4.13.1"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.13.1.tgz#0055e0014464c7eb7878caf549ef2941992b444f"
@@ -2869,10 +3071,6 @@ exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
 
-exit@0.1.2, exit@0.1.x:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
-
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -2885,6 +3083,10 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
+expand-template@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-1.1.0.tgz#e09efba977bf98f9ee0ed25abd0c692e02aec3fc"
+
 expect-ct@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/expect-ct/-/expect-ct-0.1.0.tgz#52735678de18530890d8d7b95f0ac63640958094"
@@ -2907,6 +3109,12 @@ exports-loader@^0.6.4:
     loader-utils "^1.0.2"
     source-map "0.5.x"
 
+express-static-gzip@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/express-static-gzip/-/express-static-gzip-0.3.2.tgz#89ede84547a5717de3146315f62dc996c071a88d"
+  dependencies:
+    serve-static "^1.12.3"
+
 express@4.16.0, express@^4.12.2:
   version "4.16.0"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.0.tgz#b519638e4eb58e7178c81b498ef22f798cb2e255"
@@ -2980,6 +3188,10 @@ fast-deep-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
 
+fast-diff@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
@@ -3140,6 +3352,13 @@ flexbuffer@0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/flexbuffer/-/flexbuffer-0.0.6.tgz#039fdf23f8823e440c38f3277e6fef1174215b30"
 
+flush-write-stream@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.2.tgz#c81b90d8746766f1a609a46809946c45dd8ae417"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.4"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -3218,6 +3437,13 @@ fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
 
+from2@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+
 from@~0:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
@@ -3239,14 +3465,6 @@ fs-extra@^4.0.1:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.2.tgz#f91704c53d1b461f893452b0c307d9997647ab6b"
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-promise@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/fs-promise/-/fs-promise-0.3.1.tgz#bf34050368f24d6dc9dfc6688ab5cead8f86842a"
@@ -3257,6 +3475,15 @@ fs-readdir-recursive@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560"
 
+fs-write-stream-atomic@^1.0.8:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  dependencies:
+    graceful-fs "^4.1.2"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -3342,6 +3569,10 @@ get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
 
+get-stdin@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398"
+
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -3427,6 +3658,10 @@ git-url-parse@^6.0.2:
   dependencies:
     git-up "^2.0.0"
 
+github-from-package@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
+
 glob-base@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -3500,7 +3735,7 @@ global-dirs@^0.1.0:
   dependencies:
     ini "^1.3.4"
 
-globals@^11.0.1:
+globals@^11.0.1, globals@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.1.0.tgz#632644457f5f0e3ae711807183700ebf2e4633e4"
 
@@ -3530,6 +3765,17 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globby@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
 good-listener@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
@@ -3608,6 +3854,13 @@ graphql-errors@^2.1.0:
     babel-runtime "^6.6.1"
     uuid "^2.0.2"
 
+graphql-extensions@^0.0.x:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/graphql-extensions/-/graphql-extensions-0.0.5.tgz#63bc4a3fd31aab12bfadf783cbc038a9a6937cf0"
+  dependencies:
+    core-js "^2.5.1"
+    source-map-support "^0.5.0"
+
 graphql-redis-subscriptions@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/graphql-redis-subscriptions/-/graphql-redis-subscriptions-1.3.0.tgz#bbc52b0f77bf7d50945c6bf4e8b8aba5135555b4"
@@ -3617,26 +3870,6 @@ graphql-redis-subscriptions@1.3.0:
   optionalDependencies:
     ioredis "^3.1.2"
 
-graphql-server-core@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/graphql-server-core/-/graphql-server-core-0.6.0.tgz#468625cba4a00f80275c065432faa481985f5a65"
-  optionalDependencies:
-    "@types/graphql" "^0.8.5"
-
-graphql-server-express@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/graphql-server-express/-/graphql-server-express-0.6.0.tgz#516090b4add82e6ed2c4a70dd2d925031fdcc289"
-  dependencies:
-    graphql-server-core "^0.6.0"
-    graphql-server-module-graphiql "^0.6.0"
-  optionalDependencies:
-    "@types/express" "^4.0.35"
-    "@types/graphql" "^0.8.6"
-
-graphql-server-module-graphiql@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/graphql-server-module-graphiql/-/graphql-server-module-graphiql-0.6.0.tgz#e37634b05f000731981e8ed13103f9a5861e5da0"
-
 graphql-subscriptions@^0.4.2, graphql-subscriptions@^0.4.3:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/graphql-subscriptions/-/graphql-subscriptions-0.4.4.tgz#39cff32d08dd3c990113864bab77154403727e9b"
@@ -3663,7 +3896,7 @@ graphql-tools@^0.10.1:
   optionalDependencies:
     "@types/graphql" "^0.8.5"
 
-graphql@^0.10.0, graphql@^0.10.3:
+graphql@^0.10.0, graphql@^0.10.1, graphql@^0.10.3:
   version "0.10.5"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.10.5.tgz#c9be17ca2bdfdbd134077ffd9bbaa48b8becd298"
   dependencies:
@@ -3675,12 +3908,6 @@ graphql@^0.7.2:
   dependencies:
     iterall "1.0.2"
 
-graphql@^0.9.1:
-  version "0.9.6"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.9.6.tgz#514421e9d225c29dfc8fd305459abae58815ef2c"
-  dependencies:
-    iterall "^1.0.0"
-
 growl@1.9.2:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f"
@@ -3906,16 +4133,6 @@ html-encoding-sniffer@^1.0.1:
   dependencies:
     whatwg-encoding "^1.0.1"
 
-htmlparser2@3.8.x, htmlparser2@~3.8.1:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.8.3.tgz#996c28b191516a8be86501a7d79757e5c70c1068"
-  dependencies:
-    domelementtype "1"
-    domhandler "2.3"
-    domutils "1.5"
-    entities "1.0"
-    readable-stream "1.1"
-
 htmlparser2@^3.9.1:
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
@@ -3927,6 +4144,16 @@ htmlparser2@^3.9.1:
     inherits "^2.0.1"
     readable-stream "^2.0.2"
 
+htmlparser2@~3.8.1:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.8.3.tgz#996c28b191516a8be86501a7d79757e5c70c1068"
+  dependencies:
+    domelementtype "1"
+    domhandler "2.3"
+    domutils "1.5"
+    entities "1.0"
+    readable-stream "1.1"
+
 http-errors@1.6.2, http-errors@~1.6.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
@@ -4019,17 +4246,30 @@ ienoopen@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ienoopen/-/ienoopen-1.0.0.tgz#346a428f474aac8f50cf3784ea2d0f16f62bda6b"
 
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+
 ignore-by-default@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
 
-ignore@^3.3.3:
+ignore@^3.3.3, ignore@^3.3.5:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
 
+iltorb@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/iltorb/-/iltorb-2.0.2.tgz#3aed6f76397855c70daf7eaef18bfa48f729e6f9"
+  dependencies:
+    detect-libc "^0.2.0"
+    nan "^2.6.2"
+    node-gyp "^3.6.2"
+    prebuild-install "^2.3.0"
+
 immutability-helper@^2.2.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.4.0.tgz#00d421e2957c17f0f0781475f05ffd837e73458d"
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.6.2.tgz#0df76cd906518cf81f79caecb4e55d2850a11e2d"
   dependencies:
     invariant "^2.2.0"
 
@@ -4079,6 +4319,16 @@ ini@^1.3.4, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
+inquirer-autocomplete-prompt@^0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/inquirer-autocomplete-prompt/-/inquirer-autocomplete-prompt-0.12.1.tgz#17b20145fcd656634555ad5645727bd0fe816c57"
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    figures "^2.0.0"
+    inquirer "3.2.0"
+    run-async "^2.3.0"
+
 inquirer-confirm@0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/inquirer-confirm/-/inquirer-confirm-0.2.2.tgz#6f406d037bf9d9e455ef0f953929f357fe9a8848"
@@ -4117,6 +4367,25 @@ inquirer@0.8.2:
     rx "^2.4.3"
     through "^2.3.6"
 
+inquirer@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.0.tgz#45b44c2160c729d7578c54060b3eed94487bb42b"
+  dependencies:
+    ansi-escapes "^2.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.0.4"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rx-lite "^4.0.8"
+    rx-lite-aggregates "^4.0.8"
+    string-width "^2.1.0"
+    strip-ansi "^4.0.0"
+    through "^2.3.6"
+
 inquirer@3.3.0, inquirer@^3.0.6, inquirer@^3.2.2:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
@@ -4481,7 +4750,7 @@ isstream@0.1.x, isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
 
-istanbul-api@^1.1.0-alpha, istanbul-api@^1.1.1:
+istanbul-api@^1.1.1:
   version "1.1.14"
   resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.1.14.tgz#25bc5701f7c680c0ffff913de46e3619a3a6e680"
   dependencies:
@@ -4544,19 +4813,6 @@ istanbul-reports@^1.1.2:
   dependencies:
     handlebars "^4.0.3"
 
-istanbul@^1.1.0-alpha.1:
-  version "1.1.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/istanbul/-/istanbul-1.1.0-alpha.1.tgz#781795656018a2174c5f60f367ee5d361cb57b77"
-  dependencies:
-    abbrev "1.0.x"
-    async "1.x"
-    istanbul-api "^1.1.0-alpha"
-    js-yaml "3.x"
-    mkdirp "0.5.x"
-    nopt "3.x"
-    which "^1.1.1"
-    wordwrap "^1.0.0"
-
 items@2.x.x:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/items/-/items-2.1.1.tgz#8bd16d9c83b19529de5aea321acaada78364a198"
@@ -4565,7 +4821,7 @@ iterall@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.0.2.tgz#41a2e96ce9eda5e61c767ee5dc312373bb046e91"
 
-iterall@^1.0.0, iterall@^1.1.0, iterall@^1.1.1:
+iterall@^1.1.0, iterall@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.3.tgz#1cbbff96204056dde6656e2ed2e2226d0e6d72c9"
 
@@ -4634,7 +4890,7 @@ jest-diff@^21.2.1:
     jest-get-type "^21.2.0"
     pretty-format "^21.2.1"
 
-jest-docblock@^21.2.0:
+jest-docblock@^21.0.0, jest-docblock@^21.2.0:
   version "21.2.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
 
@@ -4828,7 +5084,7 @@ js-yaml@0.3.x:
   version "0.3.7"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-0.3.7.tgz#d739d8ee86461e54b354d6a7d7d1f2ad9a167f62"
 
-js-yaml@3.x, js-yaml@^3.4.3, js-yaml@^3.5.2, js-yaml@^3.7.0, js-yaml@^3.9.1:
+js-yaml@^3.4.3, js-yaml@^3.5.2, js-yaml@^3.7.0, js-yaml@^3.9.1:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
   dependencies:
@@ -4898,19 +5154,6 @@ jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
 
-jshint@^2.8.0:
-  version "2.9.5"
-  resolved "https://registry.yarnpkg.com/jshint/-/jshint-2.9.5.tgz#1e7252915ce681b40827ee14248c46d34e9aa62c"
-  dependencies:
-    cli "~1.0.0"
-    console-browserify "1.1.x"
-    exit "0.1.x"
-    htmlparser2 "3.8.x"
-    lodash "3.7.x"
-    minimatch "~3.0.2"
-    shelljs "0.3.x"
-    strip-json-comments "1.0.x"
-
 jsmin@1.x:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/jsmin/-/jsmin-1.0.1.tgz#e7bd0dcd6496c3bf4863235bf461a3d98aa3b98c"
@@ -4919,6 +5162,10 @@ json-loader@^0.5.4, json-loader@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
 
+json-parse-better-errors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.1.tgz#50183cd1b2d25275de069e9e71b467ac9eab973a"
+
 json-schema-traverse@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz#349a6d44c53a51de89b40805c5d5e59b417d3340"
@@ -5143,12 +5390,6 @@ libqp@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/libqp/-/libqp-1.1.0.tgz#f5e6e06ad74b794fb5b5b66988bf728ef1dedbe8"
 
-license-webpack-plugin@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-1.1.1.tgz#76b2cedccc78f139fd7877e576f756cfc141b8c2"
-  dependencies:
-    ejs "^2.5.7"
-
 linkify-it@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.0.3.tgz#d94a4648f9b1c179d64fa97291268bdb6ce9434f"
@@ -5174,6 +5415,15 @@ load-json-file@^2.0.0:
     pify "^2.0.0"
     strip-bom "^3.0.0"
 
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
 loader-runner@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
@@ -5202,7 +5452,7 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
-lodash-es@^4.2.1:
+lodash-es@^4.16.6, lodash-es@^4.2.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
 
@@ -5252,14 +5502,6 @@ lodash._bindcallback@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
 
-lodash._createassigner@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11"
-  dependencies:
-    lodash._bindcallback "^3.0.0"
-    lodash._isiterateecall "^3.0.0"
-    lodash.restparam "^3.0.0"
-
 lodash._getnative@^3.0.0:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
@@ -5272,14 +5514,6 @@ lodash._stack@^4.0.0:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/lodash._stack/-/lodash._stack-4.1.3.tgz#751aa76c1b964b047e76d14fc72a093fcb5e2dd0"
 
-lodash.assign@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-3.2.0.tgz#3ce9f0234b4b2223e296b8fa0ac1fee8ebca64fa"
-  dependencies:
-    lodash._baseassign "^3.0.0"
-    lodash._createassigner "^3.0.0"
-    lodash.keys "^3.0.0"
-
 lodash.assign@^4.0.3, lodash.assign@^4.0.6, lodash.assign@^4.1.0, lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
@@ -5316,13 +5550,6 @@ lodash.create@3.1.1:
     lodash._basecreate "^3.0.0"
     lodash._isiterateecall "^3.0.0"
 
-lodash.defaults@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-3.1.2.tgz#c7308b18dbf8bc9372d701a73493c61192bd2e2c"
-  dependencies:
-    lodash.assign "^3.0.0"
-    lodash.restparam "^3.0.0"
-
 lodash.defaults@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@@ -5442,10 +5669,6 @@ lodash.rest@^4.0.0:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/lodash.rest/-/lodash.rest-4.0.5.tgz#954ef75049262038c96d1fc98b28fdaf9f0772aa"
 
-lodash.restparam@^3.0.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-
 lodash.sample@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/lodash.sample/-/lodash.sample-4.2.1.tgz#5e4291b0c753fa1abeb0aab8fb29df1b66f07f6d"
@@ -5474,10 +5697,6 @@ lodash@3.10.1, lodash@^3.3.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@3.7.x:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.7.0.tgz#3678bd8ab995057c07ade836ed2ef087da811d45"
-
 lodash@4.17.4, lodash@^4.0.0, lodash@^4.1.0, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.16.6, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
@@ -5522,7 +5741,7 @@ lru-cache@^2.5.0, lru-cache@~2.6.5:
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.6.5.tgz#e56d6354148ede8d7707b58d143220fd08df0fd5"
 
-lru-cache@^4.0.1:
+lru-cache@^4.0.1, lru-cache@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
   dependencies:
@@ -5614,6 +5833,10 @@ memory-fs@^0.4.0, memory-fs@~0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+memorystream@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -5698,7 +5921,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
 
-"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
+"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   dependencies:
@@ -5722,7 +5945,22 @@ minimist@~0.0.1:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
 
-mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mississippi@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-1.3.0.tgz#d201583eb12327e3c5c1642a404a9cacf94e34f5"
+  dependencies:
+    concat-stream "^1.5.0"
+    duplexify "^3.4.2"
+    end-of-stream "^1.1.0"
+    flush-write-stream "^1.0.0"
+    from2 "^2.1.0"
+    parallel-transform "^1.1.0"
+    pump "^1.0.0"
+    pumpify "^1.3.3"
+    stream-each "^1.1.0"
+    through2 "^2.0.0"
+
+mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
@@ -5788,10 +6026,14 @@ moment@2.19.1, moment@^2.10.3:
   version "2.19.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.1.tgz#56da1a2d1cbf01d38b7e1afc31c10bcfa1929167"
 
-moment@2.x.x, "moment@>= 2.9.0", moment@^2.18.1:
+moment@2.x.x, "moment@>= 2.9.0":
   version "2.19.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.4.tgz#17e5e2c6ead8819c8ecfad83a0acccb312e94682"
 
+moment@^2.18.1:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
+
 mongodb-core@2.1.17:
   version "2.1.17"
   resolved "https://registry.yarnpkg.com/mongodb-core/-/mongodb-core-2.1.17.tgz#a418b337a14a14990fb510b923dee6a813173df8"
@@ -5839,6 +6081,17 @@ morgan@1.9.0:
     on-finished "~2.3.0"
     on-headers "~1.0.1"
 
+move-concurrently@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
+  dependencies:
+    aproba "^1.1.1"
+    copy-concurrently "^1.0.0"
+    fs-write-stream-atomic "^1.0.8"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.3"
+
 mpath@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/mpath/-/mpath-0.3.0.tgz#7a58f789e9b5fd3c94520634157960f26bd5ef44"
@@ -5888,7 +6141,7 @@ mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
-nan@^2.3.0:
+nan@^2.3.0, nan@^2.6.2:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
 
@@ -5974,11 +6227,11 @@ nocache@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/nocache/-/nocache-2.0.0.tgz#202b48021a0c4cbde2df80de15a17443c8b43980"
 
-node-dir@^0.1.10:
-  version "0.1.17"
-  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
+node-abi@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.1.2.tgz#4da6caceb6685fcd31e7dd1994ef6bb7d0a9c0b2"
   dependencies:
-    minimatch "^3.0.2"
+    semver "^5.4.1"
 
 node-emoji@^1.8.1:
   version "1.8.1"
@@ -5993,6 +6246,24 @@ node-fetch@^1.0.1, node-fetch@^1.7.2:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
+node-gyp@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
+  dependencies:
+    fstream "^1.0.0"
+    glob "^7.0.3"
+    graceful-fs "^4.1.2"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.0"
+    nopt "2 || 3"
+    npmlog "0 || 1 || 2 || 3 || 4"
+    osenv "0"
+    request "2"
+    rimraf "2"
+    semver "~5.3.0"
+    tar "^2.0.0"
+    which "1"
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -6114,16 +6385,14 @@ nodemailer@^2.6.4:
     socks "1.1.9"
 
 nodemon@^1.11.0:
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.13.3.tgz#92d23e6b91dca351215a4b8a50d2bd838cd0f9e3"
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.14.1.tgz#f43447d99cfacc586316b38b456a3ffb4537914f"
   dependencies:
-    "@remy/pstree" "^1.1.0"
     chokidar "^1.7.0"
     debug "^2.6.8"
-    es6-promise "^3.3.1"
     ignore-by-default "^1.0.1"
-    lodash.defaults "^3.1.2"
     minimatch "^3.0.4"
+    pstree.remy "^1.1.0"
     touch "^3.1.0"
     undefsafe "0.0.3"
     update-notifier "^2.3.0"
@@ -6135,7 +6404,11 @@ nomnom@~1.6.2:
     colors "0.5.x"
     underscore "~1.4.4"
 
-nopt@3.x:
+noop-logger@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
+
+"nopt@2 || 3":
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
   dependencies:
@@ -6182,13 +6455,27 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
+npm-run-all@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.2.tgz#90d62d078792d20669139e718621186656cea056"
+  dependencies:
+    ansi-styles "^3.2.0"
+    chalk "^2.1.0"
+    cross-spawn "^5.1.0"
+    memorystream "^0.3.1"
+    minimatch "^3.0.4"
+    ps-tree "^1.1.0"
+    read-pkg "^3.0.0"
+    shell-quote "^1.6.1"
+    string.prototype.padend "^3.0.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
   dependencies:
     path-key "^2.0.0"
 
-npmlog@^4.0.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.1, npmlog@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   dependencies:
@@ -6274,7 +6561,7 @@ on-headers@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
 
-once@^1.3.0, once@^1.3.3, once@^1.4.0:
+once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   dependencies:
@@ -6334,7 +6621,7 @@ os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
-osenv@^0.1.4:
+osenv@0, osenv@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
   dependencies:
@@ -6357,7 +6644,7 @@ p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
 
-p-limit@^1.1.0:
+p-limit@^1.0.0, p-limit@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
 
@@ -6404,6 +6691,14 @@ pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
 
+parallel-transform@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
+  dependencies:
+    cyclist "~0.2.2"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
+
 parse-asn1@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
@@ -6429,6 +6724,13 @@ parse-json@^2.2.0:
   dependencies:
     error-ex "^1.2.0"
 
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
 parse-url@^1.3.0:
   version "1.3.11"
   resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-1.3.11.tgz#57c15428ab8a892b1f43869645c711d0e144b554"
@@ -6441,10 +6743,14 @@ parse5@^1.5.1:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
 
 parse5@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.2.tgz#05eff57f0ef4577fb144a79f8b9a967a6cc44510"
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
   dependencies:
-    "@types/node" "^6.0.46"
+    "@types/node" "*"
+
+parser-toolkit@>=0.0.3:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/parser-toolkit/-/parser-toolkit-0.0.5.tgz#ec4b61729c86318b56ea971bfba6b3c672d62c01"
 
 parseurl@~1.3.2:
   version "1.3.2"
@@ -6528,6 +6834,12 @@ path-type@^2.0.0:
   dependencies:
     pify "^2.0.0"
 
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  dependencies:
+    pify "^3.0.0"
+
 pause-stream@0.0.11:
   version "0.0.11"
   resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445"
@@ -7033,7 +7345,7 @@ postcss@^6.0.1:
     source-map "^0.6.1"
     supports-color "^4.4.0"
 
-pre-git@^3.15.3:
+pre-git@^3.16.0:
   version "3.16.0"
   resolved "https://registry.yarnpkg.com/pre-git/-/pre-git-3.16.0.tgz#a7656bc5f277185fd213c78f39f24f2cb603eb61"
   dependencies:
@@ -7052,6 +7364,25 @@ pre-git@^3.15.3:
     validate-commit-msg "2.14.0"
     word-wrap "1.2.3"
 
+prebuild-install@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-2.3.0.tgz#19481247df728b854ab57b187ce234211311b485"
+  dependencies:
+    expand-template "^1.0.2"
+    github-from-package "0.0.0"
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    node-abi "^2.1.1"
+    noop-logger "^0.1.1"
+    npmlog "^4.0.1"
+    os-homedir "^1.0.1"
+    pump "^1.0.1"
+    rc "^1.1.6"
+    simple-get "^1.4.2"
+    tar-fs "^1.13.0"
+    tunnel-agent "^0.6.0"
+    xtend "4.0.1"
+
 precss@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/precss/-/precss-1.4.0.tgz#8d7c3ae70f10a00a3955287f85a66e0f8b31cda3"
@@ -7085,6 +7416,10 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
+prettier@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.10.2.tgz#1af8356d1842276a99a5b5529c82dd9e9ad3cc93"
+
 pretty-format@^21.2.1:
   version "21.2.1"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-21.2.1.tgz#ae5407f3cf21066cd011aa1ba5fce7b6a2eddb36"
@@ -7114,6 +7449,10 @@ promise-each@^2.2.0:
   dependencies:
     any-promise "^0.1.0"
 
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+
 promise@^7.0.1, promise@^7.1.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
@@ -7170,6 +7509,12 @@ pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
 
+pstree.remy@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.0.tgz#f2af27265bd3e5b32bbfcc10e80bac55ba78688b"
+  dependencies:
+    ps-tree "^1.1.0"
+
 public-encrypt@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
@@ -7273,6 +7618,21 @@ pug@^2.0.0-beta3:
     pug-runtime "^2.0.3"
     pug-strip-comments "^1.0.2"
 
+pump@^1.0.0, pump@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.3.tgz#5dfe8311c33bbf6fc18261f9f34702c47c08a954"
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^1.3.3:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.3.5.tgz#1b671c619940abcaeac0ad0e3a3c164be760993b"
+  dependencies:
+    duplexify "^3.1.2"
+    inherits "^2.0.1"
+    pump "^1.0.0"
+
 punycode@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
@@ -7340,7 +7700,7 @@ quote@0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/quote/-/quote-0.4.0.tgz#10839217f6c1362b89194044d29b233fd7f32f01"
 
-raf@^3.3.2:
+raf@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
   dependencies:
@@ -7447,16 +7807,7 @@ react-mdl-selectfield@^0.2.0:
     react-dom "^15.3.1"
     react-mdl "^1.7.1"
 
-react-mdl@^1.7.1:
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/react-mdl/-/react-mdl-1.10.3.tgz#f783e26a5eea4154a32129ab2562c09d5eeacf0d"
-  dependencies:
-    clamp "^1.0.1"
-    classnames "^2.2.3"
-    lodash.isequal "^4.4.0"
-    prop-types "^15.5.0"
-
-react-mdl@^1.7.2:
+react-mdl@^1.11.0, react-mdl@^1.7.1:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/react-mdl/-/react-mdl-1.11.0.tgz#7e07ee1009dd9b358b616dc400ff2ae1845a2e67"
   dependencies:
@@ -7507,8 +7858,8 @@ react-router@^3.0.0:
     warning "^3.0.0"
 
 react-tagsinput@^3.17.0:
-  version "3.18.0"
-  resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.18.0.tgz#40e036fc0f4c3d6b4689858189ab02926717a818"
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.19.0.tgz#6e3b45595f2d295d4657bf194491988f948caabf"
 
 react-test-renderer@15.5:
   version "15.5.4"
@@ -7597,6 +7948,26 @@ read-pkg@^2.0.0:
     normalize-package-data "^2.3.2"
     path-type "^2.0.0"
 
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
+"readable-stream@1 || 2", readable-stream@2, readable-stream@^2.0.0, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.0.3"
+    util-deprecate "~1.0.1"
+
 readable-stream@1.1:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.13.tgz#f6eef764f514c89e2b9e23146a75ba106756d23e"
@@ -7615,18 +7986,6 @@ readable-stream@1.1.x:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@2, readable-stream@^2.0.0, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.0.3"
-    util-deprecate "~1.0.1"
-
 readable-stream@2.2.7, readable-stream@^2.0.1, readable-stream@^2.2.6:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.7.tgz#07057acbe2467b22042d36f98c5ad507054e95b1"
@@ -7745,8 +8104,8 @@ regenerator-runtime@^0.10.5:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
 
 regenerator-runtime@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
 regenerator-transform@^0.10.0:
   version "0.10.1"
@@ -7823,6 +8182,33 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
+request@2, request@^2.55.0, request@^2.74.0, request@^2.79.0, request@^2.81.0:
+  version "2.83.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.6.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.5"
+    extend "~3.0.1"
+    forever-agent "~0.6.1"
+    form-data "~2.3.1"
+    har-validator "~5.0.3"
+    hawk "~6.0.2"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.17"
+    oauth-sign "~0.8.2"
+    performance-now "^2.1.0"
+    qs "~6.5.1"
+    safe-buffer "^5.1.1"
+    stringstream "~0.0.5"
+    tough-cookie "~2.3.3"
+    tunnel-agent "^0.6.0"
+    uuid "^3.1.0"
+
 request@2.79.0:
   version "2.79.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
@@ -7875,33 +8261,6 @@ request@2.81.0:
     tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
-request@^2.55.0, request@^2.74.0, request@^2.79.0:
-  version "2.83.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.6.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.1"
-    forever-agent "~0.6.1"
-    form-data "~2.3.1"
-    har-validator "~5.0.3"
-    hawk "~6.0.2"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.17"
-    oauth-sign "~0.8.2"
-    performance-now "^2.1.0"
-    qs "~6.5.1"
-    safe-buffer "^5.1.1"
-    stringstream "~0.0.5"
-    tough-cookie "~2.3.3"
-    tunnel-agent "^0.6.0"
-    uuid "^3.1.0"
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -7988,13 +8347,13 @@ right-pad@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/right-pad/-/right-pad-1.0.1.tgz#8ca08c2cbb5b55e74dafa96bf7fd1a27d568c8d0"
 
-rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.6.1:
+rimraf@2, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.1:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
   dependencies:
     glob "^7.0.5"
 
-rimraf@~2.5.2:
+rimraf@^2.2.8, rimraf@~2.5.2:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
   dependencies:
@@ -8007,9 +8366,9 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^2.0.0"
     inherits "^2.0.1"
 
-rst-selector-parser@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.2.tgz#9927b619bd5af8dc23a76c64caef04edf90d2c65"
+rst-selector-parser@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
   dependencies:
     lodash.flattendeep "^4.4.0"
     nearley "^2.7.10"
@@ -8020,12 +8379,18 @@ run-async@^0.1.0:
   dependencies:
     once "^1.3.0"
 
-run-async@^2.2.0:
+run-async@^2.2.0, run-async@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
   dependencies:
     is-promise "^2.1.0"
 
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  dependencies:
+    aproba "^1.1.1"
+
 rx-lite-aggregates@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
@@ -8128,6 +8493,10 @@ semver@~5.0.1:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.0.3.tgz#77466de589cd5d3c95f138aa78bc569a3cb5d27a"
 
+semver@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+
 send@0.16.0:
   version "0.16.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.16.0.tgz#16338dbb9a2ede4ad57b48420ec3b82d8e80a57b"
@@ -8146,6 +8515,28 @@ send@0.16.0:
     range-parser "~1.2.0"
     statuses "~1.3.1"
 
+send@0.16.1:
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.16.1.tgz#a70e1ca21d1382c11d0d9f6231deb281080d7ab3"
+  dependencies:
+    debug "2.6.9"
+    depd "~1.1.1"
+    destroy "~1.0.4"
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    fresh "0.5.2"
+    http-errors "~1.6.2"
+    mime "1.4.1"
+    ms "2.0.0"
+    on-finished "~2.3.0"
+    range-parser "~1.2.0"
+    statuses "~1.3.1"
+
+serialize-javascript@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.4.0.tgz#7c958514db6ac2443a8abc062dc9f7886a7f6005"
+
 serve-static@1.13.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.0.tgz#810c91db800e94ba287eae6b4e06caab9fdc16f1"
@@ -8155,6 +8546,15 @@ serve-static@1.13.0:
     parseurl "~1.3.2"
     send "0.16.0"
 
+serve-static@^1.12.3:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.1.tgz#4c57d53404a761d8f2e7c1e8a18a47dbf278a719"
+  dependencies:
+    encodeurl "~1.0.1"
+    escape-html "~1.0.3"
+    parseurl "~1.3.2"
+    send "0.16.1"
+
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -8192,9 +8592,14 @@ shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
 
-shelljs@0.3.x:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.3.0.tgz#3596e6307a781544f591f37da618360f31db57b1"
+shell-quote@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
+  dependencies:
+    array-filter "~0.0.0"
+    array-map "~0.0.0"
+    array-reduce "~0.0.0"
+    jsonify "~0.0.0"
 
 shelljs@0.7.8, shelljs@^0.7.0:
   version "0.7.8"
@@ -8228,6 +8633,14 @@ simple-commit-message@3.3.2:
     semver "5.4.1"
     word-wrap "1.2.3"
 
+simple-get@^1.4.2:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-1.4.3.tgz#e9755eda407e96da40c5e5158c9ea37b33becbeb"
+  dependencies:
+    once "^1.3.1"
+    unzip-response "^1.0.0"
+    xtend "^4.0.0"
+
 simplemde@^1.11.2:
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/simplemde/-/simplemde-1.11.2.tgz#a23a35d978d2c40ef07dec008c92f070d8e080e3"
@@ -8311,8 +8724,8 @@ sntp@1.x.x:
     hoek "2.x.x"
 
 sntp@2.x.x:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.0.2.tgz#5064110f0af85f7cfdb7d6b67a40028ce52b4b2b"
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
   dependencies:
     hoek "4.x.x"
 
@@ -8358,6 +8771,12 @@ source-map-support@^0.4.15:
   dependencies:
     source-map "^0.5.6"
 
+source-map-support@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.0.tgz#2018a7ad2bdf8faf2691e5fddab26bed5a2bacab"
+  dependencies:
+    source-map "^0.6.0"
+
 source-map@0.1.x:
   version "0.1.43"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
@@ -8374,7 +8793,7 @@ source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, sourc
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@^0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
@@ -8420,6 +8839,12 @@ sshpk@^1.7.0:
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
+ssri@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-5.0.0.tgz#13c19390b606c821f2a10d02b351c1729b94d8cf"
+  dependencies:
+    safe-buffer "^5.1.0"
+
 stack-trace@0.0.x:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
@@ -8445,6 +8870,13 @@ stream-combiner@~0.0.4:
   dependencies:
     duplexer "~0.1.1"
 
+stream-each@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.2.tgz#8e8c463f91da8991778765873fe4d960d8f616bd"
+  dependencies:
+    end-of-stream "^1.1.0"
+    stream-shift "^1.0.0"
+
 stream-http@^2.3.1:
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
@@ -8455,6 +8887,16 @@ stream-http@^2.3.1:
     to-arraybuffer "^1.0.0"
     xtend "^4.0.0"
 
+stream-json@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/stream-json/-/stream-json-0.5.2.tgz#f4256c0ef1a905f2ef2d473706b4b3ff827653cf"
+  dependencies:
+    parser-toolkit ">=0.0.3"
+
+stream-shift@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
+
 strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
@@ -8485,6 +8927,14 @@ string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
+string.prototype.padend@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.0.0.tgz#f3aaef7c1719f170c5eab1c32bf780d96e21f2f0"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.4.3"
+    function-bind "^1.0.2"
+
 string_decoder@^0.10.25, string_decoder@~0.10.x:
   version "0.10.31"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
@@ -8531,10 +8981,6 @@ strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
 
-strip-json-comments@1.0.x:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
-
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -8608,7 +9054,7 @@ supports-color@^3.1.0, supports-color@^3.1.2, supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^4.0.0, supports-color@^4.4.0:
+supports-color@^4, supports-color@^4.0.0, supports-color@^4.4.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
   dependencies:
@@ -8653,6 +9099,15 @@ tapable@^0.2.7, tapable@~0.2.5:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"
 
+tar-fs@^1.13.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-1.16.0.tgz#e877a25acbcc51d8c790da1c57c9cf439817b896"
+  dependencies:
+    chownr "^1.0.1"
+    mkdirp "^0.5.1"
+    pump "^1.0.0"
+    tar-stream "^1.1.2"
+
 tar-pack@^3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.1.tgz#e1dbc03a9b9d3ba07e896ad027317eb679a10a1f"
@@ -8666,7 +9121,7 @@ tar-pack@^3.4.0:
     tar "^2.2.1"
     uid-number "^0.0.6"
 
-tar-stream@1.5.2:
+tar-stream@1.5.2, tar-stream@^1.1.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.5.2.tgz#fbc6c6e83c1a19d4cb48c7d96171fc248effc7bf"
   dependencies:
@@ -8675,7 +9130,7 @@ tar-stream@1.5.2:
     readable-stream "^2.0.0"
     xtend "^4.0.0"
 
-tar@^2.2.1:
+tar@^2.0.0, tar@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
   dependencies:
@@ -8721,6 +9176,13 @@ throat@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
 
+through2@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"
+  dependencies:
+    readable-stream "^2.1.5"
+    xtend "~4.0.1"
+
 through@2, through@^2.3.6, through@~2.3, through@~2.3.1:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -8793,6 +9255,10 @@ to-fast-properties@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
 
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+
 to-no-case@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
@@ -8968,6 +9434,18 @@ uniqs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
 
+unique-filename@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.0.tgz#d05f2fe4032560871f30e93cbe735eea201514f3"
+  dependencies:
+    unique-slug "^2.0.0"
+
+unique-slug@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.0.tgz#db6676e7c7cc0629878ff196097c78855ae9f4ab"
+  dependencies:
+    imurmurhash "^0.1.4"
+
 unique-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
@@ -8982,6 +9460,10 @@ unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
 
+unzip-response@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe"
+
 unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
@@ -9157,12 +9639,12 @@ webpack-sources@^0.2.3:
     source-list-map "^1.1.1"
     source-map "~0.5.3"
 
-webpack-sources@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"
+webpack-sources@^1.0.1, webpack-sources@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"
   dependencies:
     source-list-map "^2.0.0"
-    source-map "~0.5.3"
+    source-map "~0.6.1"
 
 webpack@2.4.1:
   version "2.4.1"
@@ -9225,7 +9707,7 @@ which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
-which@^1.1.1, which@^1.2.12, which@^1.2.9:
+which@1, which@^1.2.12, which@^1.2.9:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
   dependencies:
@@ -9285,14 +9767,14 @@ wordwrap@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
 
-wordwrap@^1.0.0, wordwrap@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-
 wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
 
+wordwrap@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+
 worker-farm@^1.3.1:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.5.0.tgz#adfdf0cd40581465ed0a1f648f9735722afd5c8d"
@@ -9357,7 +9839,7 @@ xregexp@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-2.0.0.tgz#52a63e56ca0b84a7f3a5f3d61872f126ad7a5943"
 
-xtend@^4.0.0, xtend@^4.0.1:
+xtend@4.0.1, xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"