Merge pull request #732 from coralproject/update-lockfile

Update yarn.lock

.eslintignore

@@ -1,4 +1,5 @@
 dist
+docs
 client/lib
 **/*.html
 plugins/*
@@ -9,4 +10,7 @@ plugins/*
 !plugins/coral-plugin-like
 !plugins/coral-plugin-mod
 !plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
+!plugins/coral-plugin-comment-content
+!plugins/talk-plugin-permalink
 node_modules

.eslintrc.json

@@ -53,7 +53,8 @@
         "no-lonely-if": [2],
         "curly": [2],
         "no-unused-vars": ["error", {
-            "argsIgnorePattern": "next"
+            "argsIgnorePattern": "^_|next",
+            "varsIgnorePattern": "^_"
         }],
         "no-multiple-empty-lines": ["error", {
             "max": 1

.gitignore

@@ -23,5 +23,8 @@ plugins/*
 !plugins/coral-plugin-like
 !plugins/coral-plugin-mod
 !plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
+!plugins/coral-plugin-comment-content
+!plugins/talk-plugin-permalink
 
 **/node_modules/*

PLUGINS.md

@@ -1,468 +1,3 @@
 # Talk Plugins
 
-Plugins for Talk can take various forms, currently we are only supporting server
-side plugins.
-
-## Plugin Registration
-
-The parsing order for the plugin registration is as follows:
-
-- `TALK_PLUGINS_JSON` environment variable
-- `plugins.json` file
-- `plugins.default.json` file
-
-If you need to "disable all plugins", you can simply provide `{}` as the
-contents of `process.env.TALK_PLUGINS_JSON` or the `plugins.json`.
-
-The format for this is thus:
-
-```json
-{
-  "server": [
-    "people"
-  ]
-}
-```
-
-Where we have a `server` key with an array of plugins that match the folder
-name in the `plugins/` folder. For example, the above config would
-require a plugin from `plugins/people`, which must provide a `index.js` file
-that returns an object that matches the Plugin Specification.
-
-If the package is external (available on NPM) you can specify the string for
-the version by using an object instead, for example:
-
-```json
-{
-  "server": [
-    {"people": "^1.2.0"}
-  ]
-}
-```
-
-External plugins can be resolved by running:
-
-```bash
-./bin/cli plugins reconcile
-```
-
-This achieves two things:
-
-1. It will traverse into local plugin folders and install their dependencies.
-  _Note that if the plugin is already installed and available in the node_modules folder, it will not be
-  fetched again unless there is a version mismatch._ This will result in the
-  project `package.json` and `yarn.lock` files to be modified, this is normal as
-  this ensures that repeated deployments (with the same config) will have the
-  same config, these changes should not be committed to source control.
-2. It will seek out dependencies that are listed in the object notation and try
-  to install them from npm.
-
-## Plugin Dependencies
-
-You may also include additional external dependencies in your local packages by
-specifying a `package.json` at your plugin root which will result in a
-`node_modules` folder being generated at the plugin root with your specific
-dependencies.
-
-## Deployment Solutions
-
-Plugins can be deployed with a production instance of Talk.
-
-### Source
-
-Source deployments can just modify the `plugins.json` file and include any
-local plugins into the `plugins/` directory. After including the config, you
-need to reconcile the plugins and build the static assets:
-
-```bash
-# get plugin dependancies and remote plugins
-./bin/cli plugins reconcile
-
-# build staic assets (including enabled client side plugins)
-yarn build
-```
-
-Then the application can be started as is.
-
-### Docker
-
-If you deploy using Docker, you can extend from the `*-onbuild` image, an
-example `Dockerfile` for your project could be:
-
-```Dockerfile
-FROM coralproject/talk:latest-onbuild
-```
-
-Where the directory for your instance would contain a `plugins.json` file
-describing the plugin requirements and a `plugins` directory containing any
-other local plugins that should be included.
-
-Onbuild triggers will execute when the image is building with your custom
-configuration and will ensure that the image is ready to use by building all
-assets inside the image as well.
-
-## Server Plugins
-
-### API
-
-You can access any API available inside the talk directory in a plugin by simply
-importing the file relative to the talk project root. An example would be if you
-wanted to import the `MetadataService`, you would simply write:
-
-```javascript
-const MetadataService = require('services/metadata');
-```
-
-### Specification
-
-Each plugin should export a single object with all hooks available on it.
-
-_**Note: You will have access to the whole core and other plugin's typeDefs,
-context, loaders, mutators, resolvers, hooks. This is intentional, as it
-encourages composing plugins to merge functionality, like a Slack plugin which
-provides a Slack notify context function as well as having the loader for
-comments.**_
-
-The following are the hooks available:
-
-#### Field: `typeDefs`
-
-```graphql
-enum COLOUR {
-  RED
-  BLUE
-}
-
-type Person {
-  name: String!
-  colour: COLOUR!
-}
-
-type RootMutation {
-  createPerson(name: String!): Person
-}
-
-type RootQuery {
-  people: [Person!]
-}
-
-type Subscription {
-  leader: Person
-}
-```
-
-Thanks to [gql-merge](https://www.npmjs.com/package/gql-merge) the contents of
-`typeDefs` should be a string that will be _merged_ with the existing type
-definitions. `enum`'s will be appended to, types will be appended, and new types
-will be added.
-
-#### Field: `context`
-
-```js
-{
-  Slack: (context) => ({
-    notify: (message) => {
-      // return a promise after we're done sending notifications.
-    }
-  })
-}
-```
-
-Any property provided here will be added to the context parameter available
-inside all resolvers, loaders, mutators, and of course, other context based
-plugins.
-
-The top level item must accept a context for the request which it should use to
-configure the context plugin before it would be mounted at `context.plugins`.
-This plugin above would mount at: `context.plugins.Slack`, or, if you're using
-[object destructuring](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), `{plugins: {Slack}}`.
-
-#### Field: `loaders`
-
-```js
-(context) => ({
-  People: {
-    load: () => db.people.find({user: context.user})
-  }
-})
-```
-
-Loaders should be provided as a function which returns a map which is used in
-the resolvers function. These must return a promise or a value.
-
-#### Field: `mutators`
-
-```js
-(context) => ({
-  People: {
-    create: (name) => {
-      return db.people.insert({user: context.user, name});
-    }
-  }
-})
-```
-
-Mutators should be provided as a function which returns a map which is used in
-the resolvers function. These must return a promise or a value.
-
-#### Field: `resolvers`
-
-```js
-{
-  Person: {
-    name(obj, args, context) {
-      return obj.name;
-    },
-    colour(obj, args, context) {
-      // Bill likes the colour red, everyone else likes blue.
-      return obj.name === 'bill' ? 'RED' : 'BLUE';
-    }
-  },
-  RootQuery: {
-    people(obj, args, {loaders: {People}}) {
-      return People.load();
-    }
-  },
-  RootMutation: {
-    createPerson(obj, {name}, {mutators: {People}}) {
-      return People.create(name);
-    }
-  }
-}
-```
-
-Should return a resolver map as described in the
-[Apollo Docs](http://dev.apollodata.com/tools/graphql-tools/resolvers.html#Resolver-map).
-
-This will merge with the existing resolvers in core and from previous plugins.
-
-#### Field: `hooks`
-
-```js
-{
-  RootMutation: {
-    createPerson: {
-      post: async (obj, args, {plugins: {Slack}}, info, person) {
-        if (!person) {
-          return person;
-        }
-
-        await Slack.notify(`A new person just was created with name ${person.name}`);
-
-        return person;
-      }
-    }
-  }
-}
-```
-
-Hooks here are pretty special, for each resolver field, you can specify a
-pre/post hook that will execute pre and post field resolution.
-
-If your post function accepts four parameters, then it can modify the field
-result. It is *required* that the function resolves a promise (or returns) with
-the modified value or simply the original if you didn't modify it.
-
-#### Field: `setupFunctions`
-
-```js
-setupFunctions: {
-  leader: (options, args) => ({
-    leader: {
-      filter: (person) => person.place === 1
-    },
-  }),
-}
-```
-
-Setup functions allow you to create filters that control which pubsub.publish() events
-send data to the client. If the type in question contains args, clients may subscribe using those arguments to further filter their subscription.
-
-For more information, see the [Apollo Docs](https://github.com/apollographql/graphql-subscriptions).
-
-#### Field: `router`
-
-```js
-(router) => {
-  router.get('/api/v1/people', (req, res) => {
-    res.json({people: [{name: 'Bob'}]});
-  });
-}
-```
-
-The Router hook allows you to create a function that accepts the base express
-router where you can mount any amount of middleware/routes to do any form of
-action needed by external applications. We also provide the authorization
-middleware via:
-
-```js
-const authorization = require('middleware/authorization');
-
-module.exports = {
-  router(router) {
-    router.get('/api/v1/people', authorization.needed('ADMIN'), (req, res) => {
-      res.json({people: [{name: 'SECRET PEOPLE'}]});
-    });
-  }
-}
-```
-
-#### Field: `passport`
-
-```js
-const FacebookStrategy = require('passport-facebook').Strategy;
-const UsersService = require('services/users');
-const {ValidateUserLogin, HandleAuthPopupCallback} = require('services/passport');
-
-module.exports = {
-  passport(passport) {
-    passport.use(new FacebookStrategy({
-      clientID: process.env.TALK_FACEBOOK_APP_ID,
-      clientSecret: process.env.TALK_FACEBOOK_APP_SECRET,
-      callbackURL: `${process.env.TALK_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);
-      }
-
-      return ValidateUserLogin(profile, user, done);
-    }));
-  },
-  router(router) {
-
-    // Note that we have to import the passport instance here, it is
-    // instantiated after all the strategies have been mounted.
-    const {passport} = require('services/passport');
-
-    /**
-     * Facebook auth endpoint, this will redirect the user immediatly to facebook
-     * for authorization.
-     */
-    router.get('/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('/facebook/callback', (req, res, next) => {
-
-      // Perform the facebook login flow and pass the data back through the opener.
-      passport.authenticate('facebook', HandleAuthPopupCallback(req, res, next))(req, res, next);
-    });
-  }
-};
-```
-
-This is a full example including the routes hook to add the required components
-to the application router to support a different auth strategy.
-
-### Full Example
-
-Contents of `plugins.json`:
-
-```json
-{
-  "server": [
-    "people"
-  ]
-}
-```
-
-Located in `plugins/people/index.js`:
-
-```js
-module.exports = {
-  typeDefs: `
-  enum COLOUR {
-    RED
-    BLUE
-  }
-
-  type Person {
-    name: String!
-    colour: COLOUR!
-  }
-
-  type RootMutation {
-    createPerson(name: String!): Person
-  }
-
-  type RootQuery {
-    people: [Person!]
-  }
-
-  type Subscription {
-    leader: Person
-  }
-  `,
-  context: {
-    Slack: () => ({
-      notify: (message) => {
-        // return a promise after we're done sending notifications.
-      }
-    })
-  },
-  loaders: ({user}) => ({
-    People: {
-      load: () => db.people.find({user})
-    }
-  }),
-  mutators: ({user}) => ({
-    People: {
-      create: (name) => {
-        return db.people.insert({user, name});
-      }
-    }
-  }),
-  resolvers: {
-    Person: {
-      name(obj, args, context) {
-        return obj.name;
-      },
-      colour(obj, args, context) {
-        // Bill likes the colour red, everyone else likes blue.
-        return obj.name === 'bill' ? 'RED' : 'BLUE';
-      }
-    },
-    RootQuery: {
-      people(obj, args, {loaders: {People}}) {
-        return People.load();
-      }
-    },
-    RootMutation: {
-      createPerson(obj, {name}, {mutators: {People}}) {
-        return People.create(name);
-      }
-    }
-  },
-  hooks: {
-    RootMutation: {
-      createPerson: {
-        post: async (obj, args, {plugins: {Slack}}, info, person) => {
-          if (!person) {
-            return person;
-          }
-
-          await Slack.notify(`A new person just was created with name ${person.name}`);
-
-          return person;
-        }
-      }
-    }
-  },
-  setupFunctions: {
-    leader: (options, args) => ({
-      leader: {
-        filter: (person) => person.place === 1
-      }
-    }
-  }
-};
-
-```
+Our documentation for Talk has moved! Utilize [this hyperlink](https://coralproject.github.io/talk/plugins.html) via click or tap to navigate your browser to the new location!

README.md

@@ -7,7 +7,17 @@ endpoint when the server is running with built assets.
 
 ## Contributing to Talk
 
-See our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md)!
+See our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md).
+
+## Documentation
+
+### General
+
+See our [Talk Documentation & Guides](https://coralproject.github.io/talk/index.html).
+
+### Plugins
+
+See our guide to using and building [Talk Plugins](https://github.com/coralproject/talk/blob/master/PLUGINS.md).
 
 ## Usage
 
@@ -17,7 +27,6 @@ To set up a development environment or build from source, see [INSTALL.md](https
 
 To launch a Talk server of your own from your browser without any need to muck about in a terminal or think about engineering concepts, stay tuned. We will launch [our installer](https://github.com/coralproject/talk-install) shortly!
 
-
 ### Configuration
 
 The Talk application looks for the following configuration values either as environment variables:
@@ -41,10 +50,21 @@ sign and verify tokens via a `HS256` algorithm.
 - `TALK_RECAPTCHA_SECRET` (*required for reCAPTCHA support*) - server secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
 - `TALK_RECAPTCHA_PUBLIC` (*required for reCAPTCHA support*) - client secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
 - `TALK_PLUGINS_JSON` (_optional_) - used to specify the plugin config via the environment
+- `TALK_KEEP_ALIVE` (_optional_) - The keepalive timeout that should be used to send keep alive messages through the websocket to keep the socket alive. (Default `30s`)
 
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.
 
+### Running Migrations
+
+We have a migration tool that can be run using `bin/cli migration run`. This will detect new migrations available and prompt you to backup your database before proceeding with the migration. Migrations are required with major version releases.
+
+### Using Trust
+
+Talk ships with core components we call "Trust". This allows Talk to automate certain actions based on previous user behavior.
+
+Our first feature is the notion of Karma. Talk will automatically pre-moderate comments of users who have a negative karma score. You can [see more how karma works here](/services/karma.js).
+
 ## Supported Browsers
 
 ### Web

app.js

@@ -6,6 +6,7 @@ const helmet = require('helmet');
 const authentication = require('./middleware/authentication');
 const {passport} = require('./services/passport');
 const plugins = require('./services/plugins');
+const i18n = require('./services/i18n');
 const enabled = require('debug').enabled;
 const errors = require('./errors');
 const {createGraphOptions} = require('./graph');
@@ -157,6 +158,8 @@ app.use('/', (err, req, res, next) => {
     console.error(err);
   }
 
+  i18n.init(req);
+  
   if (err instanceof errors.APIError) {
     res.status(err.status);
     res.render('error', {

bin/cli

@@ -12,7 +12,9 @@ program
   .command('assets', 'interact with assets')
   .command('setup', 'setup the application')
   .command('jobs', 'work with the job queues')
+  .command('token', 'work with the access tokens')
   .command('users', 'work with the application auth')
+  .command('migration', 'provides utilities for migrating the database')
   .command('plugins', 'provides utilities for interacting with the plugin system')
   .parse(process.argv);
 

bin/cli-assets

@@ -5,12 +5,15 @@
  */
 
 const program = require('./commander');
-const parseDuration = require('parse-duration');
+const parseDuration = require('ms');
 const Table = require('cli-table');
 const AssetModel = require('../models/asset');
+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([
@@ -20,65 +23,112 @@ util.onshutdown([
 /**
  * Lists all the assets registered in the database.
  */
-function listAssets() {
-  AssetModel
-    .find({})
-    .sort({'created_at': 1})
-    .then((asset) => {
-      let table = new Table({
-        head: [
-          'ID',
-          'Title',
-          'URL'
-        ]
-      });
+async function listAssets() {
+  try {
+    let assets = await AssetModel.find({}).sort({'created_at': 1});
 
-      asset.forEach((asset) => {
-        table.push([
-          asset.id,
-          asset.title ? asset.title : '',
-          asset.url ? asset.url : ''
-        ]);
-      });
-
-      console.log(table.toString());
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
+    let table = new Table({
+      head: [
+        'ID',
+        'Title',
+        'URL'
+      ]
     });
+
+    assets.forEach((asset) => {
+      table.push([
+        asset.id,
+        asset.title ? asset.title : '',
+        asset.url ? asset.url : ''
+      ]);
+    });
+
+    console.log(table.toString());
+    util.shutdown();
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
 }
 
-function refreshAssets(ageString) {
-  const now = new Date().getTime();
-  const ageMs = parseDuration(ageString);
-  const age = new Date(now - ageMs);
+async function refreshAssets(ageString) {
+  try {
+    const now = new Date().getTime();
+    const ageMs = parseDuration(ageString);
+    const age = new Date(now - ageMs);
 
-  AssetModel.find({
-    $or: [
-      {
-        scraped: {
-          $lte: age
+    let assets = await AssetModel.find({
+      $or: [
+        {
+          scraped: {
+            $lte: age
+          }
+        },
+        {
+          scraped: null
         }
-      },
-      {
-        scraped: null
-      }
-    ]
-  })
+      ]
+    });
 
-  // Queue all the assets for scraping.
-  .then((assets) => Promise.all(assets.map(scraper.create)))
+    // Queue all the assets for scraping.
+    await Promise.all(assets.map(scraper.create));
 
-  .then(() => {
     console.log('Assets were queued to be scraped');
     util.shutdown();
-  })
-  .catch((err) => {
-    console.error(err);
+  } catch (e) {
+    console.error(e);
     util.shutdown(1);
-  });
+  }
+}
+
+async function updateURL(assetID, assetURL) {
+  try {
+    await AssetsService.updateURL(assetID, assetURL);
+
+    console.log(`Asset ${assetID} was updated to have url ${assetURL}.`);
+    util.shutdown();
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
+}
+
+async function merge(srcID, dstID) {
+  try {
+
+    // Grab the assets...
+    let [srcAsset, dstAsset] = await AssetsService.findByIDs([srcID, dstID]);
+    if (!srcAsset || !dstAsset) {
+      throw new Error('Not all assets indicated by id exist, cannot merge');
+    }
+
+    // Count the affected resources...
+    let srcCommentCount = await CommentModel.find({asset_id: srcID}).count();
+
+    console.log(`Now going to update ${srcCommentCount} comments and delete the source Asset[${srcID}].`);
+
+    let {confirm} = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'confirm',
+        message: 'Proceed with merge',
+        default: false
+      }
+    ]);
+
+    if (confirm) {
+
+      // Perform the merge!
+      await AssetsService.merge(srcID, dstID);
+    } else {
+      console.warn('Aborting merge');
+    }
+
+    util.shutdown(0);
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
 }
 
 //==============================================================================
@@ -95,6 +145,16 @@ program
   .description('queues the assets that exceed the age requested')
   .action(refreshAssets);
 
+program
+  .command('update-url <assetID> <url>')
+  .description('update the URL of an asset')
+  .action(updateURL);
+
+program
+  .command('merge <srcID> <dstID>')
+  .description('merges two assets together by moving comments from src to dst and deleting the src asset')
+  .action(merge);
+
 program.parse(process.argv);
 
 // If there is no command listed, output help.

bin/cli-migration

@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+const program = require('./commander');
+const util = require('./util');
+const inquirer = require('inquirer');
+const mongoose = require('../services/mongoose');
+const MigrationService = require('../services/migration');
+
+// Register shutdown hooks.
+util.onshutdown([
+  () => mongoose.disconnect()
+]);
+
+async function createMigration(name) {
+  try {
+
+    // Create the migration.
+    await MigrationService.create(name);
+
+    util.shutdown();
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
+}
+
+async function runMigrations() {
+
+  try {
+
+    let {backedUp} = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'backedUp',
+        message: 'Did you perform a database backup',
+        default: false
+      }
+    ]);
+
+    if (!backedUp) {
+      throw new Error('Please backup your databases prior to migrations occuring');
+    }
+
+    // Get the migrations to run.
+    let migrations = await MigrationService.listPending();
+
+    console.log('Now going to run the following migrations:\n');
+
+    for (let {filename} of migrations) {
+      console.log(`\tmigrations/${filename}`);
+    }
+
+    let {confirm} = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'confirm',
+        message: 'Proceed with migrations',
+        default: false
+      }
+    ]);
+
+    if (confirm) {
+
+      // Run the migrations.
+      await MigrationService.run(migrations);
+    } else {
+      console.warn('Skipping migrations');
+    }
+
+    util.shutdown();
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
+}
+
+//==============================================================================
+// Setting up the program command line arguments.
+//==============================================================================
+
+program
+  .command('create <name>')
+  .description('creates a new migration')
+  .action(createMigration);
+
+program
+  .command('run')
+  .description('runs all pending migrations')
+  .action(runMigrations);
+
+program.parse(process.argv);
+
+// If there is no command listed, output help.
+if (process.argv.length <= 2) {
+  program.outputHelp();
+  util.shutdown();
+}

bin/cli-serve

@@ -2,9 +2,13 @@
 
 const program = require('./commander');
 const app = require('../app');
+const debug = require('debug')('talk:cli:serve');
+const errors = require('../errors');
 const {createServer} = require('http');
 const scraper = require('../services/scraper');
 const mailer = require('../services/mailer');
+const MigrationService = require('../services/migration');
+const SetupService = require('../services/setup');
 const kue = require('../services/kue');
 const mongoose = require('../services/mongoose');
 const util = require('./util');
@@ -87,7 +91,46 @@ function onListening() {
 /**
  * Start the app.
  */
-function startApp(program) {
+async function startApp(program) {
+
+  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:
+
+      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;
+    }
+
+    // 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);
+    }
+
+    debug('migrations do not have to be run');
+  }
 
   /**
   * Listen on provided port, on all network interfaces.

bin/cli-setup

@@ -8,6 +8,7 @@ const program = require('./commander');
 const inquirer = require('inquirer');
 const mongoose = require('../services/mongoose');
 const SettingModel = require('../models/setting');
+const MODERATION_OPTIONS = require('../models/enum/moderation_options');
 const SettingsService = require('../services/settings');
 const SetupService = require('../services/setup');
 const UsersService = require('../services/users');
@@ -32,166 +33,155 @@ program
 // Setup the application
 //==============================================================================
 
-const performSetup = () => {
-
-  if (program.defaults) {
-    return SettingsService
-      .init()
-      .then(() => {
-        console.log('Settings created.');
-        console.log('\nTalk is now installed!');
-        util.shutdown();
-      })
-      .catch((err) => {
-        console.error(err);
-        util.shutdown(1);
-      });
-  }
+const performSetup = async () => {
 
   // Get the current settings, we are expecing an error here.
-  return SettingsService
-    .retrieve()
-    .then(() => {
+  try {
 
-      // We should NOT have gotten a settings object, this means that the
-      // application is already setup. Error out here.
-      throw errors.ErrSettingsInit;
+    // Try to get the settings.
+    await SettingsService.retrieve();
 
-    })
-    .catch((err) => {
+    // We should NOT have gotten a settings object, this means that the
+    // application is already setup. Error out here.
+    throw errors.ErrSettingsInit;
 
-      // If the error is `not init`, then we're good, otherwise, it's something
-      // else.
-      if (err !== errors.ErrSettingsNotInit) {
-        throw err;
+  } catch (e) {
+
+    // If the error is `not init`, then we're good, otherwise, it's something
+    // else.
+    if (e !== errors.ErrSettingsNotInit) {
+      throw e;
+    }
+  }
+
+  if (program.defaults) {
+    await SettingsService.init();
+
+    console.log('Settings created.');
+    console.log('\nTalk is now installed!');
+
+    return;
+  }
+
+  // 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');
+
+  let answers = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'organizationName',
+      message: 'Organization Name',
+      default: settings.organizationName,
+      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'
+    },
+    {
+      type: 'confirm',
+      name: 'requireEmailConfirmation',
+      default: settings.requireEmailConfirmation,
+      message: 'Should emails always be confirmed'
+    }
+  ]);
 
-    })
-    .then(() => {
+  // Update the settings that were changed.
+  Object.keys(answers).forEach((key) => {
+    if (answers[key] !== undefined) {
+      settings[key] = answers[key];
+    }
+  });
 
-      // Create the base settings model.
-      let settings = new SettingModel();
+  console.log('\nWe\'ll ask you some questions about your first admin user.\n');
 
-      console.log('We\'ll ask you some questions in order to setup your installation of Talk.\n');
-
-      return inquirer.prompt([
-        {
-          type: 'input',
-          name: 'organizationName',
-          message: 'Organization Name',
-          default: settings.organizationName,
-          validate: (input) => {
-            if (input && input.length > 0) {
-              return true;
-            }
-
-            return 'Organization Name is required.';
-          }
-        },
-        {
-          type: 'list',
-          choices: SettingModel.MODERATION_OPTIONS,
-          name: 'moderation',
-          default: settings.moderation,
-          message: 'Select a moderation mode'
-        },
-        {
-          type: 'confirm',
-          name: 'requireEmailConfirmation',
-          default: settings.requireEmailConfirmation,
-          message: 'Should emails always be confirmed'
-        }
-      ])
-      .then((answers) => {
-
-        // Update the settings that were changed.
-        Object.keys(answers).forEach((key) => {
-          if (answers[key] !== undefined) {
-            settings[key] = answers[key];
-          }
-        });
-
-        console.log('\nWe\'ll ask you some questions about your first admin user.\n');
-
-        return inquirer.prompt([
-          {
-            type: 'input',
-            name: 'username',
-            message: 'Username',
-            filter: (username) => {
-              return UsersService
-                .isValidUsername(username, false)
-                .catch((err) => {
-                  throw err.message;
-                });
-            }
-          },
-          {
-            name: 'email',
-            message: 'Email',
-            format: 'email',
-            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;
-                });
-            }
-          },
-          {
-            name: 'confirmPassword',
-            message: 'Confirm Password',
-            type: 'password',
-            filter: (confirmPassword) => {
-              return UsersService
-                .isValidPassword(confirmPassword)
-                .catch((err) => {
-                  throw err.message;
-                });
-            }
-          },
-        ]);
-      })
-      .then((user) => {
-
-        if (user.password !== user.confirmPassword) {
-          return Promise.reject(new Error('Passwords do not match'));
+  let user = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'username',
+      message: 'Username',
+      filter: (username) => {
+        return UsersService
+          .isValidUsername(username, false)
+          .catch((err) => {
+            throw err.message;
+          });
+      }
+    },
+    {
+      name: 'email',
+      message: 'Email',
+      format: 'email',
+      validate: (value) => {
+        if (value && value.length >= 3) {
+          return true;
         }
 
-        return SetupService.setup({
-          settings: settings.toObject(),
-          user: {
-            email: user.email,
-            username: user.username,
-            password: user.password
-          }
-        });
-      });
-    })
-    .then(({user}) => {
-      console.log('Settings created.');
-      console.log(`User ${user.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.');
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
+        return '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;
+          });
+      }
+    },
+  ]);
+
+  if (user.password !== user.confirmPassword) {
+    return Promise.reject(new Error('Passwords do not match'));
+  }
+
+  let {user: newUser} = await SetupService.setup({
+    settings: settings.toObject(),
+    user: {
+      email: user.email,
+      username: user.username,
+      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.');
 };
 
 // Start tthe setup process.
-performSetup();
+performSetup()
+  .then(() => {
+    util.shutdown();
+  })
+  .catch((e) => {
+    console.error(e);
+    util.shutdown(1);
+  });

bin/cli-token

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+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()
+]);
+
+async function listTokens(userID) {
+  try {
+    let tokens = await TokensService.list(userID);
+
+    let table = new Table({
+      head: [
+        'ID',
+        'Name',
+        'Status'
+      ]
+    });
+
+    tokens.forEach((token) => {
+      table.push([
+        token.id,
+        token.name,
+        token.active ? 'Active' : 'Revoked'
+      ]);
+    });
+
+    console.log(table.toString());
+
+    util.shutdown();
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
+}
+
+async function revokeToken(tokenID) {
+  try {
+
+    await TokensService.revoke(null, tokenID);
+
+    console.log(`Revoked Token[${tokenID}]`);
+
+    util.shutdown();
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
+}
+
+async function createToken(userID, tokenName) {
+  try {
+
+    let {pat: {id}, jwt} = await TokensService.create(userID, tokenName);
+
+    console.log(`Created Token[${id}] for User[${userID}] = ${jwt}`);
+
+    util.shutdown();
+  } catch (e) {
+    console.error(e);
+    util.shutdown(1);
+  }
+}
+
+//==============================================================================
+// Setting up the program command line arguments.
+//==============================================================================
+
+program
+  .command('list <userID>')
+  .description('list tokens for a user')
+  .action(listTokens);
+
+program
+  .command('revoke <tokenID>')
+  .description('revokes a token with a given id')
+  .action(revokeToken);
+
+program
+  .command('create <userID> <tokenName>')
+  .description('create a token for a user with a given name')
+  .action(createToken);
+
+program.parse(process.argv);
+
+// If there is no command listed, output help.
+if (!process.argv.slice(2).length) {
+  program.outputHelp();
+  util.shutdown();
+}

bin/cli-users

@@ -8,6 +8,7 @@ const program = require('./commander');
 const inquirer = require('inquirer');
 const UsersService = require('../services/users');
 const UserModel = require('../models/user');
+const USER_ROLES = require('../models/enum/user_roles');
 const mongoose = require('../services/mongoose');
 const util = require('./util');
 const Table = require('cli-table');
@@ -36,7 +37,7 @@ function getUserCreateAnswers(options) {
       roles: []
     };
 
-    if (options.role && UserModel.USER_ROLES.indexOf(options.role) > -1) {
+    if (options.role && USER_ROLES.indexOf(options.role) > -1) {
       user.roles = [options.role];
     }
 
@@ -89,7 +90,7 @@ function getUserCreateAnswers(options) {
       name: 'roles',
       message: 'User Role',
       type: 'checkbox',
-      choices: UserModel.USER_ROLES
+      choices: USER_ROLES
     }
   ]);
 }
@@ -291,8 +292,8 @@ function mergeUsers(dstUserID, srcUserID) {
  */
 function addRole(userID, role) {
 
-  if (UserModel.USER_ROLES.indexOf(role) === -1) {
-    console.error(`Role '${role}' is not supported. Supported roles are ${UserModel.USER_ROLES.join(', ')}.`);
+  if (USER_ROLES.indexOf(role) === -1) {
+    console.error(`Role '${role}' is not supported. Supported roles are ${USER_ROLES.join(', ')}.`);
     util.shutdown(1);
     return;
   }
@@ -316,8 +317,8 @@ function addRole(userID, role) {
  */
 function removeRole(userID, role) {
 
-  if (UserModel.USER_ROLES.indexOf(role) === -1) {
-    console.error(`Role '${role}' is not supported. Supported roles are ${UserModel.USER_ROLES.join(', ')}.`);
+  if (USER_ROLES.indexOf(role) === -1) {
+    console.error(`Role '${role}' is not supported. Supported roles are ${USER_ROLES.join(', ')}.`);
     util.shutdown(1);
     return;
   }

circle.yml

@@ -52,5 +52,6 @@ deployment:
 
   latest:
     branch: master
+    owner: coralproject
     commands:
       - bash ./scripts/docker.sh deploy

client/.eslintrc.json

@@ -4,21 +4,20 @@
         "es6": true,
         "mocha": true
     },
-    "extends": "../.eslintrc.json",
     "parserOptions": {
+        "sourceType": "module",
         "ecmaFeatures": {
             "experimentalObjectRestSpread": true,
             "jsx": true
-        },
-        "sourceType": "module"
+        }
     },
     "parser": "babel-eslint",
     "plugins": [
         "react"
     ],
     "rules": {
-      "react/jsx-uses-react": "error",
-      "react/jsx-uses-vars": "error",
-      "no-console": ["warn", { "allow": ["warn", "error"] }]
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error",
+        "no-console": ["warn", { "allow": ["warn", "error"] }]
     }
 }

client/coral-admin/config.json

@@ -1,3 +0,0 @@
-{
-  "basePath": "admin"
-}

client/coral-admin/src/AppRouter.js

@@ -1,25 +1,20 @@
 import React from 'react';
-import {Router, Route, IndexRedirect, browserHistory} from 'react-router';
+import {Router, Route, IndexRedirect, browserHistory, Redirect} from 'react-router';
 
-import Stories from 'containers/Stories/Stories';
-import Configure from 'containers/Configure/Configure';
-import LayoutContainer from 'containers/LayoutContainer';
-import InstallContainer from 'containers/Install/InstallContainer';
+import Configure from 'routes/Configure';
+import Dashboard from 'routes/Dashboard';
+import Install from 'routes/Install';
+import Stories from 'routes/Stories';
+import {CommunityLayout, Community} from 'routes/Community';
+import {ModerationLayout, Moderation} from 'routes/Moderation';
 
-import CommunityLayout from 'containers/Community/CommunityLayout';
-import CommunityContainer from 'containers/Community/CommunityContainer';
-
-import ModerationLayout from 'containers/ModerationQueue/ModerationLayout';
-import ModerationContainer from 'containers/ModerationQueue/ModerationContainer';
-
-import Dashboard from 'containers/Dashboard/Dashboard';
+import Layout from 'containers/Layout';
 
 const routes = (
   <div>
-    <Route exact path="/admin/install" component={InstallContainer}/>
-    <Route path='/admin' component={LayoutContainer}>
+    <Route exact path="/admin/install" component={Install}/>
+    <Route path='/admin' component={Layout}>
       <IndexRedirect to='/admin/moderate/all' />
-      <Route path='community' component={CommunityContainer} />
       <Route path='configure' component={Configure} />
       <Route path='stories' component={Stories} />
       <Route path='dashboard' component={Dashboard} />
@@ -27,11 +22,11 @@ const routes = (
       {/* Community Routes */}
 
       <Route path='community' component={CommunityLayout}>
-        <Route path='flagged' components={CommunityContainer}>
-          <Route path=':id' components={CommunityContainer} />
+        <Route path='flagged' components={Community}>
+          <Route path=':id' components={Community} />
         </Route>
-        <Route path='people' components={CommunityContainer}>
-          <Route path=':id' components={CommunityContainer} />
+        <Route path='people' components={Community}>
+          <Route path=':id' components={Community} />
         </Route>
         <IndexRedirect to='flagged' />
       </Route>
@@ -39,23 +34,23 @@ const routes = (
       {/* Moderation Routes */}
 
       <Route path='moderate' component={ModerationLayout}>
-        <Route path='all' components={ModerationContainer}>
-          <Route path=':id' components={ModerationContainer} />
+        <Route path='all' components={Moderation}>
+          <Route path=':id' components={Moderation} />
         </Route>
-        <Route path='accepted' components={ModerationContainer}>
-          <Route path=':id' components={ModerationContainer} />
+        <Route path='accepted' components={Moderation}>
+          <Route path=':id' components={Moderation} />
         </Route>
-        <Route path='premod' components={ModerationContainer}>
-          <Route path=':id' components={ModerationContainer} />
+        <Route path='premod' components={Moderation}>
+          <Route path=':id' components={Moderation} />
         </Route>
-        <Route path='rejected' components={ModerationContainer}>
-          <Route path=':id' components={ModerationContainer} />
+        <Route path='rejected' components={Moderation}>
+          <Route path=':id' components={Moderation} />
         </Route>
-        <Route path='flagged' components={ModerationContainer}>
-          <Route path=':id' components={ModerationContainer} />
+        <Route path='flagged' components={Moderation}>
+          <Route path=':id' components={Moderation} />
         </Route>
-        <Route path=':id' components={ModerationContainer} />
-        <IndexRedirect to='premod' />
+        <Redirect from=':id' to='all/:id' />
+        <IndexRedirect to='all' />
       </Route>
     </Route>
   </div>

client/coral-admin/src/actions/assets.js

@@ -9,6 +9,7 @@ import {
 } from '../constants/assets';
 
 import coralApi from '../../../coral-framework/helpers/request';
+import t from 'coral-framework/services/i18n';
 
 /**
  * Action disptacher related to assets
@@ -19,12 +20,16 @@ import coralApi from '../../../coral-framework/helpers/request';
 export const fetchAssets = (skip = '', limit = '', search = '', sort = '', filter = '') => (dispatch) => {
   dispatch({type: FETCH_ASSETS_REQUEST});
   return coralApi(`/assets?skip=${skip}&limit=${limit}&sort=${sort}&search=${search}&filter=${filter}`)
-  .then(({result, count}) =>
-    dispatch({type: FETCH_ASSETS_SUCCESS,
-      assets: result,
-      count
-    }))
-    .catch((error) => dispatch({type: FETCH_ASSETS_FAILURE, error}));
+    .then(({result, count}) =>
+      dispatch({type: FETCH_ASSETS_SUCCESS,
+        assets: result,
+        count
+      }))
+    .catch((error) => {
+      console.error(error);
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch({type: FETCH_ASSETS_FAILURE, error: errorMessage});
+    });
 };
 
 // Update an asset state
@@ -32,9 +37,12 @@ export const fetchAssets = (skip = '', limit = '', search = '', sort = '', filte
 export const updateAssetState = (id, closedAt) => (dispatch) => {
   dispatch({type: UPDATE_ASSET_STATE_REQUEST});
   return coralApi(`/assets/${id}/status`, {method: 'PUT', body: {closedAt}})
-  .then(() =>
-    dispatch({type: UPDATE_ASSET_STATE_SUCCESS}))
-    .catch((error) => dispatch({type: UPDATE_ASSET_STATE_FAILURE, error}));
+    .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});
+    });
 };
 
 export const updateAssets = (assets) => (dispatch) => {

client/coral-admin/src/actions/auth.js

@@ -3,6 +3,8 @@ import * as actions from '../constants/auth';
 import coralApi from 'coral-framework/helpers/request';
 import * as Storage from 'coral-framework/helpers/storage';
 import {handleAuthToken} from 'coral-framework/actions/auth';
+import {resetWebsocket} from 'coral-framework/services/client';
+import t from 'coral-framework/services/i18n';
 
 //==============================================================================
 // SIGN IN
@@ -36,16 +38,31 @@ export const handleLogin = (email, password, recaptchaResponse) => (dispatch) =>
       }
 
       dispatch(handleAuthToken(token));
+      resetWebsocket();
       dispatch(checkLoginSuccess(user));
     })
     .catch((error) => {
-      if (error.translation_key === 'LOGIN_MAXIMUM_EXCEEDED') {
+      console.error(error);
+      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')
+        });
+      }
+      else if (error.translation_key === 'LOGIN_MAXIMUM_EXCEEDED') {
         dispatch({
           type: actions.LOGIN_MAXIMUM_EXCEEDED,
-          message: error.translation_key
+          message: t(`error.${error.translation_key}`),
         });
       } else {
-        dispatch({type: actions.LOGIN_FAILURE, message: error.translation_key});
+        dispatch({
+          type: actions.LOGIN_FAILURE,
+          message: errorMessage,
+        });
       }
     });
 };
@@ -54,25 +71,30 @@ export const handleLogin = (email, password, recaptchaResponse) => (dispatch) =>
 // FORGOT PASSWORD
 //==============================================================================
 
-const forgotPassowordRequest = () => ({
+const forgotPasswordRequest = () => ({
   type: actions.FETCH_FORGOT_PASSWORD_REQUEST
 });
 
-const forgotPassowordSuccess = () => ({
+const forgotPasswordSuccess = () => ({
   type: actions.FETCH_FORGOT_PASSWORD_SUCCESS
 });
 
-const forgotPassowordFailure = () => ({
-  type: actions.FETCH_FORGOT_PASSWORD_FAILURE
+const forgotPasswordFailure = (error) => ({
+  type: actions.FETCH_FORGOT_PASSWORD_FAILURE,
+  error,
 });
 
 export const requestPasswordReset = (email) => (dispatch) => {
-  dispatch(forgotPassowordRequest(email));
+  dispatch(forgotPasswordRequest(email));
   const redirectUri = location.href;
 
   return coralApi('/account/password/reset', {method: 'POST', body: {email,  loc: redirectUri}})
-    .then(() => dispatch(forgotPassowordSuccess()))
-    .catch((error) => dispatch(forgotPassowordFailure(error)));
+    .then(() => dispatch(forgotPasswordSuccess()))
+    .catch((error) => {
+      console.error(error);
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch(forgotPasswordFailure(errorMessage));
+    });
 };
 
 //==============================================================================
@@ -105,10 +127,12 @@ export const checkLogin = () => (dispatch) => {
         return dispatch(checkLoginFailure('not logged in'));
       }
 
+      resetWebsocket();
       dispatch(checkLoginSuccess(user));
     })
     .catch((error) => {
       console.error(error);
-      dispatch(checkLoginFailure(`${error.translation_key}`));
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch(checkLoginFailure(errorMessage));
     });
 };

client/coral-admin/src/actions/banUserDialog.js

@@ -0,0 +1,7 @@
+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});
+

client/coral-admin/src/actions/community.js

@@ -10,11 +10,12 @@ import {
   SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
   HIDE_BANUSER_DIALOG,
-  SHOW_SUSPENDUSER_DIALOG,
-  HIDE_SUSPENDUSER_DIALOG
+  SHOW_REJECT_USERNAME_DIALOG,
+  HIDE_REJECT_USERNAME_DIALOG
 } from '../constants/community';
 
 import coralApi from '../../../coral-framework/helpers/request';
+import t from 'coral-framework/services/i18n';
 
 export const fetchAccounts = (query = {}) => (dispatch) => {
 
@@ -30,7 +31,11 @@ export const fetchAccounts = (query = {}) => (dispatch) => {
         totalPages
       });
     })
-    .catch((error) => dispatch({type: FETCH_COMMENTERS_FAILURE, error}));
+    .catch((error) => {
+      console.error(error);
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch({type: FETCH_COMMENTERS_FAILURE, error: errorMessage});
+    });
 };
 
 const requestFetchAccounts = () => ({
@@ -47,7 +52,6 @@ export const newPage = () => ({
 });
 
 export const setRole = (id, role) => (dispatch) => {
-
   return coralApi(`/users/${id}/role`, {method: 'POST', body: {role}})
   .then(() => {
     return dispatch({type: SET_ROLE, id, role});
@@ -65,6 +69,6 @@ export const setCommenterStatus = (id, status) => (dispatch) => {
 export const showBanUserDialog = (user) => ({type: SHOW_BANUSER_DIALOG, user});
 export const hideBanUserDialog = () => ({type: HIDE_BANUSER_DIALOG});
 
-// Suspend User Dialog
-export const showSuspendUserDialog = (user) => ({type: SHOW_SUSPENDUSER_DIALOG, user});
-export const hideSuspendUserDialog = () => ({type: HIDE_SUSPENDUSER_DIALOG});
+// Reject Username Dialog
+export const showRejectUsernameDialog = (user) => ({type: SHOW_REJECT_USERNAME_DIALOG, user});
+export const hideRejectUsernameDialog = () => ({type: HIDE_REJECT_USERNAME_DIALOG});

client/coral-admin/src/actions/install.js

@@ -2,6 +2,7 @@ import coralApi from 'coral-framework/helpers/request';
 import * as actions from '../constants/install';
 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});
@@ -17,7 +18,8 @@ const clearErrors = () => ({type: actions.CLEAR_ERRORS});
 
 const validation = (formData, dispatch, next) => {
   if (!(formData != null)) {
-    return dispatch(hasError());
+    dispatch(hasError());
+    return;
   }
 
   const validKeys = Object.keys(formData)
@@ -40,7 +42,8 @@ const validation = (formData, dispatch, next) => {
   });
 
   if (empty.length) {
-    return dispatch(hasError());
+    dispatch(hasError());
+    return;
   }
 
   // RegExp Validation
@@ -59,7 +62,30 @@ const validation = (formData, dispatch, next) => {
     });
 
   if (validation.length) {
-    return dispatch(hasError());
+    dispatch(hasError());
+    return;
+  }
+
+  // Confirm Validation
+  const prefixLength = 'confirm'.length;
+  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;
+    });
+
+  if (confirm.length) {
+    dispatch(hasError());
+    return;
   }
 
   dispatch(clearErrors());
@@ -90,7 +116,8 @@ export const finishInstall = () => (dispatch, getState) => {
     })
     .catch((error) => {
       console.error(error);
-      dispatch(installFailure(`${error.translation_key}`));
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch(installFailure(errorMessage));
     });
 };
 
@@ -113,6 +140,7 @@ export const checkInstall = (next) => (dispatch) => {
     })
     .catch((error) => {
       console.error(error);
-      dispatch(checkInstallFailure(`${error.translation_key}`));
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch(checkInstallFailure(errorMessage));
     });
 };

client/coral-admin/src/actions/moderation.js

@@ -3,16 +3,6 @@ import * as actions from 'constants/moderation';
 export const toggleModal = (open) => ({type: actions.TOGGLE_MODAL, open});
 export const singleView = () => ({type: actions.SINGLE_VIEW});
 
-// Ban User Dialog
-export const showBanUserDialog = (user, commentId, commentStatus, showRejectedNote) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId, commentStatus, showRejectedNote});
-export const hideBanUserDialog = (showDialog) => ({type: actions.HIDE_BANUSER_DIALOG, showDialog});
-
-// Suspend User Dialog
-export const showSuspendUserDialog = (userId, username, commentId, commentStatus) =>
-  ({type: actions.SHOW_SUSPEND_USER_DIALOG, userId, username, commentId, commentStatus});
-
-export const hideSuspendUserDialog = () => ({type: actions.HIDE_SUSPEND_USER_DIALOG});
-
 // hide shortcuts note
 export const hideShortcutsNote = () => {
   try {
@@ -27,3 +17,40 @@ export const hideShortcutsNote = () => {
 
 export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
 export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
+
+export const setSortOrder = (order) => ({
+  type: actions.SET_SORT_ORDER,
+  order
+});
+
+export const changeUserDetailStatuses = (tab) => {
+  let statuses;
+  if (tab === 'all') {
+    statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'];
+  } else if (tab === 'rejected') {
+    statuses = ['REJECTED'];
+  }
+  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
+};
+
+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
+  };
+};
+
+export const toggleStorySearch = (active) => ({
+  type: active ? actions.SHOW_STORY_SEARCH : actions.HIDE_STORY_SEARCH
+});
+
+export const storySearchChange = (value) => ({
+  type: actions.STORY_SEARCH_CHANGE_VALUE,
+  value
+});
+
+export const clearState = () => ({
+  type: actions.MODERATION_CLEAR_STATE
+});

client/coral-admin/src/actions/settings.js

@@ -1,4 +1,5 @@
 import coralApi from '../../../coral-framework/helpers/request';
+import t from 'coral-framework/services/i18n';
 
 export const SETTINGS_LOADING = 'SETTINGS_LOADING';
 export const SETTINGS_RECEIVED = 'SETTINGS_RECEIVED';
@@ -20,7 +21,9 @@ export const fetchSettings = () => (dispatch) => {
       dispatch({type: SETTINGS_RECEIVED, settings});
     })
     .catch((error) => {
-      dispatch({type: SETTINGS_FETCH_ERROR, error});
+      console.error(error);
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch({type: SETTINGS_FETCH_ERROR, error: errorMessage});
     });
 };
 
@@ -49,6 +52,8 @@ export const saveSettingsToServer = () => (dispatch, getState) => {
       dispatch({type: SAVE_SETTINGS_SUCCESS, settings});
     })
     .catch((error) => {
-      dispatch({type: SAVE_SETTINGS_FAILED, error});
+      console.error(error);
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch({type: SAVE_SETTINGS_FAILED, error: errorMessage});
     });
 };

client/coral-admin/src/actions/suspendUserDialog.js

@@ -0,0 +1,7 @@
+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});
+

client/coral-admin/src/actions/users.js

@@ -1,5 +1,6 @@
 import coralApi from '../../../coral-framework/helpers/request';
 import * as userTypes from '../constants/users';
+import t from 'coral-framework/services/i18n';
 
 /**
  * Action disptacher related to users
@@ -10,7 +11,11 @@ export const userStatusUpdate = (status, userId, commentId) => {
     dispatch({type: userTypes.UPDATE_STATUS_REQUEST});
     return coralApi(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
       .then((res) => dispatch({type: userTypes.UPDATE_STATUS_SUCCESS, res}))
-      .catch((error) => dispatch({type: userTypes.UPDATE_STATUS_FAILURE, error}));
+      .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});
+      });
   };
 };
 
@@ -18,7 +23,11 @@ export const userStatusUpdate = (status, userId, commentId) => {
 export const sendNotificationEmail = (userId, subject, body) => {
   return (dispatch) => {
     return coralApi(`/users/${userId}/email`, {method: 'POST', body: {subject, body}})
-      .catch((error) => dispatch({type: userTypes.USER_EMAIL_FAILURE, error}));
+      .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});
+      });
   };
 };
 
@@ -26,6 +35,10 @@ export const sendNotificationEmail = (userId, subject, body) => {
 export const enableUsernameEdit = (userId) => {
   return (dispatch) => {
     return coralApi(`/users/${userId}/username-enable`, {method: 'POST'})
-      .catch((error) => dispatch({type: userTypes.USERNAME_ENABLE_FAILURE, error}));
+      .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});
+      });
   };
 };

client/coral-admin/src/components/ActionButton.js

@@ -1,25 +1,27 @@
 import React, {PropTypes} from 'react';
 import styles from './ModerationList.css';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../containers/ModerationQueue/helpers/moderationQueueActionsMap';
+import {menuActionsMap} from '../routes/Moderation/helpers/moderationQueueActionsMap';
+
+import t from 'coral-framework/services/i18n';
 
 const ActionButton = ({type = '', active, ...props}) => {
   const typeName = type.toLowerCase();
   let text = menuActionsMap[type].text;
 
-  if (text === 'Approve' && active) {
-    text = 'Approved';
-  } else if (text === 'Reject' && active) {
-    text = 'Rejected';
+  if (text === 'approve' && active) {
+    text = 'approved';
+  } else if (text === 'reject' && active) {
+    text = 'rejected';
   }
 
   return (
     <Button
-      className={`${typeName} ${styles.actionButton} ${active ? styles[`${typeName}__active`] : ''}`}
+      className={`${typeName} ${styles.actionButton} ${props.minimal ? styles.minimal : ''} ${active ? styles[`${typeName}__active`] : ''}`}
       cStyle={typeName}
       icon={menuActionsMap[type].icon}
       onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
-    >{text}</Button>
+    >{props.minimal ? '' : t(`modqueue.${text}`)}</Button>
   );
 };
 

client/coral-admin/src/components/ActionsMenu.js

@@ -5,9 +5,7 @@ import cn from 'classnames';
 import {findDOMNode} from 'react-dom';
 import styles from './ActionsMenu.css';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 let count = 0;
 
@@ -43,7 +41,7 @@ class ActionsMenu extends React.Component {
           onClick={this.syncOpenState}
           icon={this.props.icon}
           raised>
-          {lang.t('modqueue.actions')}
+          {t('modqueue.actions')}
           <Icon
             name={this.state.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
             className={styles.arrowIcon}

client/coral-admin/src/components/AdminLogin.js

@@ -2,10 +2,7 @@ import React, {PropTypes} from 'react';
 import Layout from 'coral-admin/src/components/ui/Layout';
 import styles from './NotFound.css';
 import {Button, TextField, Alert, Success} from 'coral-ui';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
 import Recaptcha from 'react-recaptcha';
-const lang = new I18n(translations);
 
 class AdminLogin extends React.Component {
 
@@ -37,7 +34,7 @@ class AdminLogin extends React.Component {
     const {errorMessage, loginMaxExceeded, recaptchaPublic} = this.props;
     const signInForm = (
       <form onSubmit={this.handleSignIn}>
-        {errorMessage && <Alert>{lang.t(`errors.${errorMessage}`)}</Alert>}
+        {errorMessage && <Alert>{errorMessage}</Alert>}
         <TextField
           label='Email Address'
           value={this.state.email}

client/coral-admin/src/components/BanUserDialog.js

@@ -0,0 +1,44 @@
+import React, {PropTypes} from 'react';
+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={styles.dialog}
+    id="banUserDialog"
+    open={open}
+    onCancel={onCancel}
+    title={t('bandialog.ban_user')}>
+    <span className={styles.close} onClick={onCancel}>×</span>
+    <div>
+      <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 cStyle="cancel" className={styles.cancel} onClick={onCancel} raised>
+          {t('bandialog.cancel')}
+        </Button>
+        <Button cStyle="black" className={styles.ban} onClick={onPerform} raised>
+          {t('bandialog.yes_ban_user')}
+        </Button>
+      </div>
+    </div>
+  </Dialog>
+);
+
+BanUserDialog.propTypes = {
+  open: PropTypes.bool,
+  onPerform: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  username: PropTypes.string,
+  info: PropTypes.string,
+};
+
+export default BanUserDialog;

client/coral-admin/src/components/ModerationKeysModal.js

@@ -1,17 +1,14 @@
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations.json';
 import React, {PropTypes} from 'react';
 import Modal from 'components/Modal';
 import styles from './ModerationKeysModal.css';
-
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 const shortcuts = [
   {
     title: 'modqueue.navigation',
     shortcuts: {
-      'j': 'modqueue.nextcomment',
-      'k': 'modqueue.prevcomment',
+      'j': 'modqueue.next_comment',
+      'k': 'modqueue.prev_comment',
       's': 'modqueue.singleview',
       '?': 'modqueue.thismenu'
     }
@@ -19,8 +16,8 @@ const shortcuts = [
   {
     title: 'modqueue.actions',
     shortcuts: {
-      't': 'modqueue.approve',
-      'r': 'modqueue.reject'
+      'd': 'modqueue.approve',
+      'f': 'modqueue.reject'
     }
   }
 ];
@@ -40,29 +37,29 @@ export default class ModerationKeysModal extends React.Component {
       <div>
         <div className={styles.callToAction} style={{display: shortcutsNoteVisible === 'show' ? 'block' : 'none'}}>
           <div onClick={hideShortcutsNote} className={styles.closeButton}>×</div>
-          <p className={styles.ctaHeader}>{lang.t('modqueue.mod-faster')}</p>
-          <p><strong>{lang.t('modqueue.try-these')}:</strong></p>
+          <p className={styles.ctaHeader}>{t('modqueue.mod_faster')}</p>
+          <p><strong>{t('modqueue.try_these')}:</strong></p>
           <ul>
-            <li><span>{lang.t('modqueue.approve')}</span> <span className={styles.smallKey}>t</span></li>
-            <li><span>{lang.t('modqueue.reject')}</span> <span className={styles.smallKey}>r</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>{lang.t('modqueue.view-more-shortcuts')}</span> <span className={styles.smallKey}>{lang.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>{lang.t('modqueue.shortcuts')}</h3>
+          <h3>{t('modqueue.shortcuts')}</h3>
           <div className={styles.container}>
             {shortcuts.map((shortcut, i) => (
               <table className={styles.table} key={i}>
                 <thead>
                   <tr>
-                    <th>{lang.t(shortcut.title)}</th>
+                    <th>{t(shortcut.title)}</th>
                   </tr>
                 </thead>
                 <tbody>
                   {Object.keys(shortcut.shortcuts).map((key) => (
                     <tr key={`${key}tr`}>
                       <td className={styles.shortcut}><span className={styles.key}>{key}</span></td>
-                      <td>{lang.t(shortcut.shortcuts[key])}</td>
+                      <td>{t(shortcut.shortcuts[key])}</td>
                     </tr>
                   ))}
                 </tbody>

client/coral-admin/src/components/ModerationList.css

@@ -189,6 +189,12 @@
   width: 140px;
 }
 
+.minimal {
+  width: 45px;
+  min-width: 0;
+  float: left;
+}
+
 .approve__active {
   box-shadow: none;
   color: white;

client/coral-admin/src/components/ModerationList.js

@@ -8,8 +8,8 @@ import SuspendUserModal from './SuspendUserModal';
 
 // Each action has different meaning and configuration
 const menuOptionsMap = {
-  'reject': {status: 'REJECTED', icon: 'close', key: 'r'},
-  'approve': {status: 'ACCEPTED', icon: 'done', key: 't'},
+  'reject': {status: 'REJECTED', icon: 'close', key: 'f'},
+  'approve': {status: 'ACCEPTED', icon: 'done', key: 'd'},
   'flag': {status: 'FLAGGED', icon: 'flag', filter: 'Untouched'},
   'ban': {status: 'BANNED', icon: 'not interested'}
 };

client/coral-admin/src/components/SuspendUserDialog.js

@@ -5,10 +5,8 @@ import styles from './SuspendUserDialog.css';
 
 import Button from 'coral-ui/components/Button';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
+import t, {timeago} from 'coral-framework/services/i18n';
 import {dateAdd} from 'coral-framework/utils';
-import translations from '../../../translations';
-const lang = new I18n(translations);
 
 const initialState = {step: 0, duration: '3'};
 
@@ -39,11 +37,11 @@ class SuspendUserDialog extends React.Component {
   goToStep1 = () => {
     this.setState({
       step: 1,
-      message: lang.t(
+      message: t(
         'suspenduser.email_message_suspend',
         this.props.username,
         this.props.organizationName,
-        lang.timeago(durationsToDate(this.state.duration)),
+        timeago(durationsToDate(this.state.duration)),
       ),
     });
   }
@@ -51,7 +49,6 @@ class SuspendUserDialog extends React.Component {
   handlePerform = () => {
 
     this.props.onPerform({
-      id: this.props.userId,
       message: this.state.message,
 
       // Add 1 minute more to help `timeago.js` to display the correct duration.
@@ -65,13 +62,13 @@ class SuspendUserDialog extends React.Component {
     return (
       <section>
         <h1 className={styles.header}>
-          {lang.t('suspenduser.title_suspend')}
+          {t('suspenduser.title_suspend')}
         </h1>
         <p className={styles.description}>
-         {lang.t('suspenduser.description_suspend', username)}
+         {t('suspenduser.description_suspend', username)}
         </p>
         <fieldset>
-          <legend className={styles.legend}>{lang.t('suspenduser.select_duration')}</legend>
+          <legend className={styles.legend}>{t('suspenduser.select_duration')}</legend>
           <RadioGroup
             name='status filter'
             value={duration}
@@ -79,18 +76,18 @@ class SuspendUserDialog extends React.Component {
             onChange={this.handleDurationChange}
             className={styles.radioGroup}
           >
-            <Radio value='1'>{lang.t('suspenduser.one_hour')}</Radio>
-            <Radio value='3'>{lang.t('suspenduser.hours', 3)}</Radio>
-            <Radio value='24'>{lang.t('suspenduser.hours', 24)}</Radio>
-            <Radio value='168'>{lang.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>
-            {lang.t('suspenduser.cancel')}
+            {t('suspenduser.cancel')}
           </Button>
           <Button cStyle="black" className={styles.perform} onClick={this.goToStep1} raised>
-            {lang.t('suspenduser.suspend_user')}
+            {t('suspenduser.suspend_user')}
           </Button>
         </div>
       </section>
@@ -103,13 +100,13 @@ class SuspendUserDialog extends React.Component {
     return (
       <section>
         <h1 className={styles.header}>
-          {lang.t('suspenduser.title_notify')}
+          {t('suspenduser.title_notify')}
         </h1>
         <p className={styles.description}>
-         {lang.t('suspenduser.description_notify', username)}
+         {t('suspenduser.description_notify', username)}
         </p>
         <fieldset>
-          <legend className={styles.legend}>{lang.t('suspenduser.write_message')}</legend>
+          <legend className={styles.legend}>{t('suspenduser.write_message')}</legend>
           <textarea
             rows={5}
             className={styles.messageInput}
@@ -118,7 +115,7 @@ class SuspendUserDialog extends React.Component {
         </fieldset>
         <div className={styles.buttons}>
           <Button cStyle="white" className={styles.cancel} onClick={onCancel} raised>
-            {lang.t('suspenduser.cancel')}
+            {t('suspenduser.cancel')}
           </Button>
           <Button
             cStyle="black"
@@ -127,7 +124,7 @@ class SuspendUserDialog extends React.Component {
             disabled={this.state.message.length === 0}
             raised
           >
-            {lang.t('suspenduser.send')}
+            {t('suspenduser.send')}
           </Button>
         </div>
       </section>
@@ -155,11 +152,10 @@ class SuspendUserDialog extends React.Component {
 
 SuspendUserDialog.propTypes = {
   open: PropTypes.bool.isRequired,
-  onCancel: PropTypes.func.isRequired,
   onPerform: PropTypes.func.isRequired,
-  username: PropTypes.string,
-  userId: PropTypes.string,
+  onCancel: PropTypes.func.isRequired,
   organizationName: PropTypes.string,
+  username: PropTypes.string,
 };
 
 export default SuspendUserDialog;

client/coral-admin/src/components/TagsInput.css

@@ -0,0 +1,51 @@
+.root {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  overflow: hidden;
+  padding-left: 5px;
+  padding-top: 5px;
+
+}
+
+.rootFocuesd {
+  border-color: rgb(142, 76, 65);
+}
+
+.tag {
+  background-color: rgb(255, 220, 214);
+  border-radius: 2px;
+  border: 1px solid rgb(244, 126, 107);
+  color: rgb(244, 126, 107);
+  display: inline-block;
+  font-family: sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  margin-bottom: 5px;
+  margin-right: 5px;
+  padding: 5px;
+}
+
+.tagRemove {
+  cursor: pointer;
+  font-weight: bold;
+  color: rgb(101, 24, 23);
+
+  &::before {
+    content: " ×";
+  }
+}
+
+.input > input {
+  background: transparent;
+  border: 0;
+  color: #777;
+  font-family: sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  margin-bottom: 6px;
+  margin-top: 1px;
+  outline: none;
+  padding: 5px;
+}
+
+

client/coral-admin/src/components/TagsInput.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import TagsInput from 'react-tagsinput';
+import styles from './TagsInput.css';
+import AutosizeInput from 'react-input-autosize';
+
+const autosizingRenderInput = ({onChange, value, addTag: _, ...other}) =>
+  <AutosizeInput type='text' onChange={onChange} value={value} {...other} />;
+
+export default (props) => {
+  return (
+    <TagsInput
+      addOnBlur={true}
+      addOnPaste={true}
+      pasteSplit={(data) => data.split(',').map((d) => d.trim())}
+      className={styles.root}
+      focusedClassName={styles.rootFocus}
+      renderInput={autosizingRenderInput}
+      {...props}
+
+      tagProps={{
+        className: styles.tag,
+        classNameRemove: styles.tagRemove,
+        ...props.tagProps,
+      }}
+      inputProps={{
+        className: styles.input,
+        ...props.inputProps,
+      }}
+    />
+  );
+};

client/coral-admin/src/components/ToastContainer.css

@@ -133,7 +133,7 @@
     animation-fill-mode: both; }
 
   .toastify {
-    z-index: 999;
+    z-index: 99999;
     position: fixed;
     padding: 4px;
     width: 350px;
@@ -197,7 +197,7 @@
     border-radius: 2px;
     box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1), 0 3px 20px 0 rgba(0, 0, 0, 0.05); }
     .toastify-content--info {
-      background: #2488cb; }
+      background: #404040; }
     .toastify-content--success {
       background: #008577; }
     .toastify-content--warning {
@@ -207,6 +207,7 @@
 
   .toastify__body {
     color: white;
+    overflow-x: scroll;
     font-size: 15px;
     font-weight: 400;
   }

client/coral-admin/src/components/ui/Drawer.js

@@ -2,8 +2,7 @@ import React, {PropTypes} from 'react';
 import {Navigation, Drawer} from 'react-mdl';
 import {IndexLink, Link} from 'react-router';
 import styles from './Drawer.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
 
 const CoralDrawer = ({handleLogout, auth}) => (
@@ -15,7 +14,7 @@ const CoralDrawer = ({handleLogout, auth}) => (
             className={styles.navLink}
             to="/admin/dashboard"
             activeClassName={styles.active}>
-            {lang.t('configure.dashboard')}
+            {t('configure.dashboard')}
           </IndexLink>
           {
             can(auth.user, 'MODERATE_COMMENTS') && (
@@ -23,19 +22,19 @@ const CoralDrawer = ({handleLogout, auth}) => (
                 className={styles.navLink}
                 to="/admin/moderate"
                 activeClassName={styles.active}>
-                {lang.t('configure.moderate')}
+                {t('configure.moderate')}
               </Link>
             )
           }
           <Link className={styles.navLink}
             to="/admin/stories"
             activeClassName={styles.active}>
-            {lang.t('configure.stories')}
+            {t('configure.stories')}
           </Link>
           <Link className={styles.navLink}
             to="/admin/community"
             activeClassName={styles.active}>
-            {lang.t('configure.community')}
+            {t('configure.community')}
           </Link>
           {
             can(auth.user, 'UPDATE_CONFIG') &&
@@ -44,7 +43,7 @@ const CoralDrawer = ({handleLogout, auth}) => (
                 className={styles.navLink}
                 to="/admin/configure"
                 activeClassName={styles.active}>
-                {lang.t('configure.configure')}
+                {t('configure.configure')}
               </Link>
             )
           }
@@ -60,6 +59,4 @@ CoralDrawer.propTypes = {
   restricted: PropTypes.bool // hide app elements from a logged out user
 };
 
-const lang = new I18n(translations);
-
 export default CoralDrawer;

client/coral-admin/src/components/ui/Header.css

@@ -40,12 +40,12 @@
   height: 100%;
 }
 
-.rightPanel ul {
+.rightPanel > ul {
   list-style: none;
   margin-right: 20px;
 }
 
-.rightPanel li {
+.rightPanel > ul > li {
   display: inline-block;
   float: right;
   margin-left: 15px;
@@ -54,6 +54,12 @@
   line-height: 33px;
 }
 
+.rightPanel a {
+  color: black;
+  text-decoration: none;
+  font-weight: 400;
+}
+
 .rightPanel .settings {
   line-height: 0;
 }
@@ -73,13 +79,16 @@
   font-weight: 500;
   background-color: transparent;
   transition: background-color 200ms;
+  font-weight: 100;
+  letter-spacing: .8;
 
   &:hover {
-    background-color: #232323;
+    background-color: #404040;
   }
 
   &.active {
     background-color: #232323;
+    font-weight: 400;
   }
 }
 

client/coral-admin/src/components/ui/Header.js

@@ -2,8 +2,7 @@ import React, {PropTypes} from 'react';
 import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
 import {Link, IndexLink} from 'react-router';
 import styles from './Header.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import t from 'coral-framework/services/i18n';
 import {Logo} from './Logo';
 import {can} from 'coral-framework/services/perms';
 
@@ -23,7 +22,7 @@ const CoralHeader = ({
               className={styles.navLink}
               to="/admin/dashboard"
               activeClassName={styles.active}>
-              {lang.t('configure.dashboard')}
+              {t('configure.dashboard')}
             </IndexLink>
             {
               can(auth.user, 'MODERATE_COMMENTS') && (
@@ -32,7 +31,7 @@ const CoralHeader = ({
                   className={styles.navLink}
                   to="/admin/moderate"
                   activeClassName={styles.active}>
-                  {lang.t('configure.moderate')}
+                  {t('configure.moderate')}
                 </Link>
               )
             }
@@ -41,14 +40,14 @@ const CoralHeader = ({
               className={styles.navLink}
               to="/admin/stories"
               activeClassName={styles.active}>
-              {lang.t('configure.stories')}
+              {t('configure.stories')}
             </Link>
             <Link
               id='communityNav'
               className={styles.navLink}
               to="/admin/community"
               activeClassName={styles.active}>
-              {lang.t('configure.community')}
+              {t('configure.community')}
             </Link>
             {
               can(auth.user, 'UPDATE_CONFIG') && (
@@ -57,7 +56,7 @@ const CoralHeader = ({
                   className={styles.navLink}
                   to="/admin/configure"
                   activeClassName={styles.active}>
-                  {lang.t('configure.configure')}
+                  {t('configure.configure')}
                 </Link>
               )
             }
@@ -71,13 +70,25 @@ const CoralHeader = ({
               <div>
                 <IconButton name="settings" id="menu-settings"/>
                 <Menu target="menu-settings" align="right">
-                  <MenuItem onClick={() => showShortcuts(true)}>{lang.t('configure.shortcuts')}</MenuItem>
-                  <MenuItem onClick={handleLogout}>{lang.t('configure.sign-out')}</MenuItem>
+                  <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                  <MenuItem>
+                    <a href="https://github.com/coralproject/talk/releases" target="_blank">
+                      View latest version
+                    </a>
+                  </MenuItem>
+                  <MenuItem>
+                    <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank">
+                      Report a bug or give feedback
+                    </a>
+                  </MenuItem>
+                  <MenuItem onClick={handleLogout}>
+                    {t('configure.sign_out')}
+                  </MenuItem>
                 </Menu>
               </div>
             </li>
-            <li>
-              {`v${process.env.VERSION}`}
+            <li>        
+             {`v${process.env.VERSION}`}        
             </li>
           </ul>
         </div>
@@ -91,6 +102,4 @@ CoralHeader.propTypes = {
   handleLogout: PropTypes.func.isRequired
 };
 
-const lang = new I18n(translations);
-
 export default CoralHeader;

client/coral-admin/src/components/ui/Layout.css

@@ -1,6 +1,5 @@
 .layout {
     max-width: 1280px;
     margin: 0 auto;
-    overflow: hidden;
     background-color: #FAFAFA;
 }

client/coral-admin/src/components/ui/Layout.js

@@ -10,7 +10,7 @@ const Layout = ({
   toggleShortcutModal,
   restricted = false,
   ...props}) => (
-  <LayoutMDL fixedDrawer>
+  <LayoutMDL className={styles.layout} fixedDrawer>
     <Header
       handleLogout={handleLogout}
       showShortcuts={toggleShortcutModal}

client/coral-admin/src/constants/banUserDialog.js

@@ -0,0 +1,2 @@
+export const SHOW_BAN_USER_DIALOG = 'SHOW_BAN_USER_DIALOG';
+export const HIDE_BAN_USER_DIALOG = 'HIDE_BAN_USER_DIALOG';

client/coral-admin/src/constants/community.js

@@ -13,5 +13,5 @@ export const FETCH_FLAGGED_COMMENTERS_FAILURE = 'FETCH_FLAGGED_COMMENTERS_FAILUR
 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 SHOW_REJECT_USERNAME_DIALOG = 'SHOW_REJECT_USERNAME_DIALOG';
+export const HIDE_REJECT_USERNAME_DIALOG = 'HIDE_REJECT_USERNAME_DIALOG';

client/coral-admin/src/constants/moderation.js

@@ -1,9 +1,14 @@
 export const TOGGLE_MODAL = 'TOGGLE_MODAL';
 export const SINGLE_VIEW = 'SINGLE_VIEW';
-export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
-export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
 export const HIDE_SHORTCUTS_NOTE = 'HIDE_SHORTCUTS_NOTE';
-export const SHOW_SUSPEND_USER_DIALOG = 'SHOW_SUSPEND_USER_DIALOG';
-export const HIDE_SUSPEND_USER_DIALOG = 'HIDE_SUSPEND_USER_DIALOG';
 export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
 export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
+export const SET_SORT_ORDER = 'MODERATION_SET_SORT_ORDER';
+export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
+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';
+export const SHOW_STORY_SEARCH = 'SHOW_STORY_SEARCH';
+export const HIDE_STORY_SEARCH = 'HIDE_STORY_SEARCH';
+export const STORY_SEARCH_CHANGE_VALUE = 'STORY_SEARCH_CHANGE_VALUE';
+export const MODERATION_CLEAR_STATE = 'MODERATION_CLEAR_STATE';

client/coral-admin/src/constants/suspendUserDialog.js

@@ -0,0 +1,2 @@
+export const SHOW_SUSPEND_USER_DIALOG = 'SHOW_SUSPEND_USER_DIALOG';
+export const HIDE_SUSPEND_USER_DIALOG = 'HIDE_SUSPEND_USER_DIALOG';

client/coral-admin/src/containers/BanUserDialog.js

@@ -0,0 +1,63 @@
+import React, {Component} from 'react';
+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 t from 'coral-framework/services/i18n';
+
+class BanUserDialogContainer extends Component {
+
+  banUser = async () => {
+    const {userId, commentId, commentStatus, setUserStatus, setCommentStatus, hideBanUserDialog} = this.props;
+    await setUserStatus({userId, status: 'BANNED'});
+    hideBanUserDialog();
+    if (commentId && commentStatus && commentStatus !== 'REJECTED') {
+      await setCommentStatus({commentId, status: 'REJECTED'});
+    }
+  }
+
+  getInfo() {
+    let note = t('bandialog.note_ban_user');
+    if (this.props.commentStatus && this.props.commentStatus !== 'REJECTED') {
+      note = t('bandialog.note_reject_comment');
+    }
+    return t('bandialog.note', note);
+  }
+
+  render() {
+    return (
+      <BanUserDialog
+        open={this.props.open}
+        onPerform={this.banUser}
+        onCancel={this.props.hideBanUserDialog}
+        username={this.props.username}
+        info={this.getInfo()}
+      />
+    );
+  }
+}
+
+const mapStateToProps = ({banUserDialog: {open, userId, username, commentId, commentStatus}}) => ({
+  open,
+  userId,
+  username,
+  commentId,
+  commentStatus,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  ...bindActionCreators({
+    hideBanUserDialog,
+  }, dispatch),
+});
+
+export default compose(
+  withSetUserStatus,
+  withSetCommentStatus,
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  ),
+)(BanUserDialogContainer);

client/coral-admin/src/containers/Community/CommunityContainer.js

@@ -1,169 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {compose} from 'react-apollo';
-
-import {modUserFlaggedQuery} from 'coral-admin/src/graphql/queries';
-import {banUser, setUserStatus, rejectUsername} from 'coral-admin/src/graphql/mutations';
-
-import {
-  fetchAccounts,
-  updateSorting,
-  newPage,
-  showBanUserDialog,
-  hideBanUserDialog,
-  showSuspendUserDialog,
-  hideSuspendUserDialog
-} from '../../actions/community';
-
-import CommunityMenu from './components/CommunityMenu';
-import BanUserDialog from './components/BanUserDialog';
-import SuspendUserDialog from './components/SuspendUserDialog';
-
-import People from './People';
-import FlaggedAccounts from './FlaggedAccounts';
-
-class CommunityContainer extends Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      searchValue: '',
-      timer: null
-    };
-
-    this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
-    this.onSearchChange = this.onSearchChange.bind(this);
-    this.onHeaderClickHandler = this.onHeaderClickHandler.bind(this);
-    this.onNewPageHandler = this.onNewPageHandler.bind(this);
-  }
-
-  componentWillMount() {
-    this.props.fetchAccounts({});
-  }
-
-  onKeyDownHandler(e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      this.search();
-    }
-  }
-
-  onSearchChange(e) {
-    const value = e.target.value;
-    this.setState((prevState) => {
-      prevState.searchValue = value;
-      clearTimeout(prevState.timer);
-      const fetchAccounts = this.props.fetchAccounts;
-      prevState.timer = setTimeout(() => {
-        fetchAccounts({value});
-      }, 350);
-      return prevState;
-    });
-  }
-
-  search(query = {}) {
-    const {community} = this.props;
-
-    this.props.fetchAccounts({
-      value: this.state.searchValue,
-      field: community.fieldPeople,
-      asc: community.ascPeople,
-      ...query
-    });
-
-  }
-
-  onHeaderClickHandler(sort) {
-    this.props.dispatch(updateSorting(sort));
-    this.search();
-  }
-
-  onNewPageHandler(page) {
-    this.props.dispatch(newPage(page));
-    this.search({page});
-  }
-
-  getTabContent(searchValue, props) {
-    const {community, data} = props;
-    const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
-
-    if (activeTab === 'people') {
-      return (
-        <People
-          isFetching={community.isFetchingPeople}
-          commenters={community.accounts}
-          searchValue={searchValue}
-          onSearchChange={this.onSearchChange}
-          error={community.errorPeople}
-          totalPages={community.totalPagesPeople}
-          page={community.pagePeople}
-          onKeyDown={this.onKeyDownHandler}
-          onHeaderClickHandler={this.onHeaderClickHandler}
-          onNewPageHandler={this.onNewPageHandler}
-        />
-      );
-    }
-
-    return (
-      <div>
-        <FlaggedAccounts
-          commenters={data.users}
-          isFetching={data.loading}
-          error={data.error}
-          showBanUserDialog={props.showBanUserDialog}
-          approveUser={props.approveUser}
-          rejectUsername={props.rejectUsername}
-          showSuspendUserDialog={props.showSuspendUserDialog}
-        />
-        <BanUserDialog
-          open={community.banDialog}
-          user={community.user}
-          handleClose={props.hideBanUserDialog}
-          handleBanUser={props.banUser}
-        />
-        <SuspendUserDialog
-          open={community.suspendDialog}
-          handleClose={props.hideSuspendUserDialog}
-          user={community.user}
-          rejectUsername={props.rejectUsername}
-        />
-      </div>
-    );
-  }
-
-  render() {
-    const {searchValue} = this.state;
-
-    const tab = this.getTabContent(searchValue, this.props);
-
-    return (
-      <div>
-        <CommunityMenu />
-        <div>
-          { tab }
-        </div>
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => ({
-  community: state.community.toJS()
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  fetchAccounts: (query) => dispatch(fetchAccounts(query)),
-  showBanUserDialog: (user) => dispatch(showBanUserDialog(user)),
-  hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
-  showSuspendUserDialog: (user) => dispatch(showSuspendUserDialog(user)),
-  hideSuspendUserDialog: () => dispatch(hideSuspendUserDialog())
-});
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  modUserFlaggedQuery,
-  banUser,
-  setUserStatus,
-  rejectUsername
-)(CommunityContainer);

client/coral-admin/src/containers/Community/Loading.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const Loading = () => (
-  <h1> Loading results </h1>
-);
-
-export default Loading;

client/coral-admin/src/containers/Community/Table.js

@@ -1,81 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {SelectField, Option} from 'react-mdl-selectfield';
-import styles from './Community.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations';
-import {setRole, setCommenterStatus} from '../../actions/community';
-
-const lang = new I18n(translations);
-
-class Table extends Component {
-
-  constructor (props) {
-    super(props);
-    this.onRoleChange = this.onRoleChange.bind(this);
-  }
-
-  onRoleChange (id, role) {
-    this.props.dispatch(setRole(id, role));
-  }
-
-  onCommenterStatusChange (id, status) {
-    this.props.dispatch(setCommenterStatus(id, status));
-  }
-
-  render () {
-    const {headers, commenters, onHeaderClickHandler} = this.props;
-
-    return (
-      <table className={`mdl-data-table ${styles.dataTable}`}>
-        <thead>
-          <tr>
-            {headers.map((header, i) =>(
-              <th
-              key={i}
-              className="mdl-data-table__cell--non-numeric"
-              onClick={() => onHeaderClickHandler({field: header.field})}>
-                {header.title}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {commenters.map((row, i)=> (
-            <tr key={i}>
-              <td className="mdl-data-table__cell--non-numeric">
-                {row.username}
-                <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">
-                <SelectField label={'Select me'} value={row.status || ''}
-                  className={styles.selectField}
-                  label={lang.t('community.status')}
-                  onChange={(status) => this.onCommenterStatusChange(row.id, status)}>
-                  <Option value={'ACTIVE'}>{lang.t('community.active')}</Option>
-                  <Option value={'BANNED'}>{lang.t('community.banned')}</Option>
-                </SelectField>
-              </td>
-              <td className="mdl-data-table__cell--non-numeric">
-                <SelectField label={'Select me'} value={row.roles[0] || ''}
-                  className={styles.selectField}
-                  label={lang.t('community.role')}
-                  onChange={(role) => this.onRoleChange(row.id, role)}>
-                  <Option value={''}>.</Option>
-                  <Option value={'STAFF'}>{lang.t('community.staff')}</Option>
-                  <Option value={'MODERATOR'}>{lang.t('community.moderator')}</Option>
-                  <Option value={'ADMIN'}>{lang.t('community.admin')}</Option>
-                </SelectField>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    );
-  }
-}
-
-export default connect((state) => ({commenters: state.community.get('accounts')}))(Table);

client/coral-admin/src/containers/Community/components/BanUserButton.css

@@ -1,11 +0,0 @@
-.banButton {
-  -webkit-transform: scale(.8);
-  transform: scale(.8);
-  margin: 0;
-
-  i {
-    vertical-align: middle;
-    margin-right: 5px;
-    font-size: 14px;
-  }
-}

client/coral-admin/src/containers/Community/components/BanUserButton.js

@@ -1,26 +0,0 @@
-import React, {PropTypes} from 'react';
-import {Button, Icon} from 'coral-ui';
-import styles from './BanUserButton.css';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
-const lang = new I18n(translations);
-
-const BanUserButton = ({user, ...props}) => (
-  <div className={styles.ban}>
-    <Button cStyle='ban'
-      className={`ban ${styles.banButton}`}
-      disabled={user.status === 'BANNED' ? 'disabled' : ''}
-      onClick={props.onClick}
-      raised>
-      <Icon name='not_interested' />
-      {lang.t('comment.ban_user')}
-    </Button>
-  </div>
-);
-
-BanUserButton.propTypes = {
-  onClick: PropTypes.func.isRequired
-};
-
-export default BanUserButton;

client/coral-admin/src/containers/Community/components/BanUserDialog.css

@@ -1,164 +0,0 @@
-.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;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 184px;
-  padding: 20px;
-
-  h2 {
-    color: black;
-    font-size: 1.76em;
-    font-weight: 500;
-    margin: 0;
-  }
-
-  h3 {
-    color: black;
-    font-size: 1.4em;
-    font-weight: 500;
-    margin: 0;
-  }
-}
-
-.textField {
-    margin-top: 15px;
-}
-
-.textField label {
-    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;
-}
-
-.footer {
-    margin: 20px auto 10px;
-    text-align: center;
-}
-
-.footer span {
-    display: block;
-    margin-bottom: 5px;
-}
-
-.footer a {
-    color: #2c69b6;
-    cursor: pointer;
-    margin: 0 5px;
-}
-
-.socialConnections {
-    margin-bottom: 20px;
-}
-
-.signInButton {
-    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;
-}
-
-.close:hover {
-    color: #6b6b6b;
-}
-
-input.error{
-    border: solid 2px #f44336;
-}
-
-.errorMsg, .hint {
-    color: grey;
-    font-weight: 600;
-    padding: 3px 0 16px;
-}
-
-.alert {
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 2px;
-}
-
-.alert--success {
-    border: solid 1px #1ec00e;
-    background: #cbf1b8;
-    color: #006900;
-}
-
-.alert--error {
-    background: #FFEBEE;
-    color: #B71C1C;
-}
-
-.userBox a {
-    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;
-}
-
-.action {
-    margin-top: 15px;
-}
-
-.passwordRequestSuccess {
-    border: 1px solid green;
-    background-color: lightgreen;
-    padding: 10px;
-}
-
-.passwordRequestFailure {
-    border: 1px solid orange;
-    background-color: 1px solid coral;
-    padding: 10px;
-}
-
-.cancel {
-  margin-right: 10px;
-  width: 47%;
-}
-
-.ban {
-  width: 47%;
-}
-
-.buttons {
-  margin: 20px 0;
-}

client/coral-admin/src/containers/Community/components/BanUserDialog.js

@@ -1,54 +0,0 @@
-import React, {PropTypes} from 'react';
-import {Dialog} from 'coral-ui';
-import styles from './BanUserDialog.css';
-
-import Button from 'coral-ui/components/Button';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
-
-const lang = new I18n(translations);
-
-const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
-  <Dialog
-    className={styles.dialog}
-    id="banuserDialog"
-    open={open}
-    onClose={handleClose}
-    onCancel={handleClose}
-    title={lang.t('community.ban_user')}>
-    <span className={styles.close} onClick={handleClose}>×</span>
-    <div>
-      <div className={styles.header}>
-        <h2>{lang.t('community.ban_user')}</h2>
-      </div>
-      <div className={styles.separator}>
-        <h3>{lang.t('community.are_you_sure', user.username)}</h3>
-        <i>{lang.t('community.note')}</i>
-      </div>
-      <div className={styles.buttons}>
-        <Button cStyle="cancel" className={styles.cancel} onClick={handleClose} raised>
-          {lang.t('community.cancel')}
-        </Button>
-        <Button
-          cStyle="black" className={styles.ban}
-          onClick={() => {
-            handleBanUser({userId: user.id}).then(() => {
-              handleClose();
-            });
-          }}
-          raised>
-          {lang.t('community.yes_ban_user')}
-        </Button>
-      </div>
-    </div>
-  </Dialog>
-);
-
-BanUserDialog.propTypes = {
-  handleBanUser: PropTypes.func.isRequired,
-  handleClose: PropTypes.func.isRequired,
-  user: PropTypes.object.isRequired,
-};
-
-export default BanUserDialog;

client/coral-admin/src/containers/Dashboard/Dashboard.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import styles from './Dashboard.css';
-import {compose} from 'react-apollo';
-import {connect} from 'react-redux';
-import {getMetrics} from 'coral-admin/src/graphql/queries';
-import FlagWidget from './FlagWidget';
-import ActivityWidget from './ActivityWidget';
-import CountdownTimer from 'coral-admin/src/components/CountdownTimer';
-
-import {Spinner} from 'coral-ui';
-
-class Dashboard extends React.Component {
-
-  reloadData = () => {
-    this.props.data.refetch();
-  }
-
-  render () {
-
-    if (this.props.data && this.props.data.loading) {
-      return <Spinner />;
-    }
-
-    const {data: {assetsByActivity, assetsByFlag}} = this.props;
-
-    return (
-      <div>
-        <CountdownTimer handleTimeout={this.reloadData} />
-        <div className={styles.Dashboard}>
-          <FlagWidget assets={assetsByFlag} />
-          <ActivityWidget assets={assetsByActivity} />
-        </div>
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => {
-  return {
-    settings: state.settings.toJS(),
-    moderation: state.moderation.toJS()
-  };
-};
-
-export default compose(
-  connect(mapStateToProps),
-  getMetrics
-)(Dashboard);

client/coral-admin/src/containers/Install/InstallContainer.js

@@ -1,101 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import styles from './style.css';
-import {Wizard, WizardNav} from 'coral-ui';
-import Layout from 'coral-admin/src/components/ui/Layout';
-
-import {
-  goToStep,
-  nextStep,
-  submitUser,
-  checkInstall,
-  previousStep,
-  finishInstall,
-  submitSettings,
-  updateUserFormData,
-  updateSettingsFormData,
-  updatePermittedDomains
-} from '../../actions/install';
-
-import InitialStep from './components/Steps/InitialStep';
-import AddOrganizationName from './components/Steps/AddOrganizationName';
-import CreateYourAccount from './components/Steps/CreateYourAccount';
-import PermittedDomainsStep from './components/Steps/PermittedDomainsStep';
-import FinalStep from './components/Steps/FinalStep';
-
-class InstallContainer extends Component {
-  componentDidMount() {
-    const {checkInstall} = this.props;
-    checkInstall(() => {
-      this.context.router.push('/admin');
-    });
-  }
-
-  render() {
-    const {install} = this.props;
-
-    return (
-      <Layout restricted={true}>
-        <div className={styles.Install}>
-          {
-            !install.alreadyInstalled ? (
-              <div>
-                <h2>Welcome to the Coral Project</h2>
-                { install.step !== 0 ? <WizardNav items={install.navItems} currentStep={install.step} icon='check'/> : null }
-                <Wizard currentStep={install.step} {...this.props}>
-                  <InitialStep/>
-                  <AddOrganizationName/>
-                  <CreateYourAccount/>
-                  <PermittedDomainsStep/>
-                  <FinalStep/>
-                </Wizard>
-              </div>
-            ) : (
-              <div>Talk is already installed</div>
-            )
-          }
-        </div>
-      </Layout>
-    );
-  }
-}
-
-InstallContainer.contextTypes = {
-  router: React.PropTypes.object
-};
-
-const mapStateToProps = (state) => ({
-  install: state.install.toJS()
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  nextStep: () => dispatch(nextStep()),
-  goToStep: (step) => dispatch(goToStep(step)),
-  previousStep: () => dispatch(previousStep()),
-  finishInstall: () => dispatch(finishInstall()),
-  checkInstall: (next) => dispatch(checkInstall(next)),
-  handleDomainsChange: (value) => {
-    dispatch(updatePermittedDomains(value));
-  },
-  handleSettingsChange: (e) => {
-    const {name, value} = e.currentTarget;
-    dispatch(updateSettingsFormData(name, value));
-  },
-  handleUserChange: (e) => {
-    const {name, value} = e.currentTarget;
-    dispatch(updateUserFormData(name, value));
-  },
-  handleSettingsSubmit: (e) => {
-    e.preventDefault();
-    dispatch(submitSettings());
-  },
-  handleUserSubmit: (e) => {
-    e.preventDefault();
-    dispatch(submitUser());
-  }
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(InstallContainer);

client/coral-admin/src/containers/Install/components/Steps/InitialStep.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import styles from './style.css';
-import {Button} from 'coral-ui';
-
-const lang = new I18n(translations);
-import translations from '../../translations.json';
-import I18n from 'coral-framework/modules/i18n/i18n';
-
-const InitialStep = (props) => {
-  const {nextStep} = props;
-  return (
-    <div className={styles.step}>
-      <p>{lang.t('INITIAL.DESCRIPTION')}</p>
-      <Button cStyle='green' onClick={nextStep} raised>{lang.t('INITIAL.SUBMIT')}</Button>
-    </div>
-  );
-};
-
-export default InitialStep;

client/coral-admin/src/containers/Install/translations.json

@@ -1,58 +0,0 @@
-{
-  "en": {
-    "INITIAL" : {
-      "DESCRIPTION": "Let's set up your Talk community in just a few short steps.",
-      "SUBMIT": "Get Started"
-    },
-    "ADD_ORGANIZATION": {
-      "DESCRIPTION": "Please tell us the name of your organization. This will appear in emails when inviting new team members.",
-      "LABEL": "Organization Name",
-      "SAVE": "Save"
-    },
-    "CREATE": {
-      "EMAIL": "Email address",
-      "USERNAME": "Username",
-      "PASSWORD": "Password",
-      "CONFIRM_PASSWORD": "Confirm Password",
-      "SAVE": "Save"
-    },
-    "PERMITTED_DOMAINS": {
-      "TITLE": "Permitted domains",
-      "DESCRIPTION": "Enter the domains you would like to permit for Talk, e.g. your local, staging and production environments (ex. localhost:3000, staging.domain.com, domain.com).",
-      "SUBMIT": "Finish install"
-    },
-    "FINAL": {
-      "DESCRIPTION": "Thanks for installing Talk! We sent an email to verify your email address. While you finish setting up the account, you can start engaging with your readers now.",
-      "LAUNCH": "Launch Talk",
-      "CLOSE": "Close this Installer"
-    }
-  },
-  "es": {
-    "INITIAL" : {
-      "DESCRIPTION": "Configuremos tu comunidad de Talk en sólo algunos pasos.",
-      "SUBMIT": "Empezá!"
-    },
-    "ADD_ORGANIZATION": {
-      "DESCRIPTION": "Por favor, dinos el nombre de tu organización. Este aparecerá en los emails cuando invites nuevos miembros.",
-      "LABEL": "Nombre de la Organización",
-      "SAVE": "Guardar"
-    },
-    "CREATE": {
-      "EMAIL": "Dirección de E-Mail",
-      "USERNAME": "Usuario",
-      "PASSWORD": "Contraseña",
-      "CONFIRM_PASSWORD": "Confirmar contraseña",
-      "SAVE": "Guardar"
-    },
-    "PERMITTED_DOMAINS": {
-      "TITLE": "Dominios Permitidos",
-      "DESCRIPTION": "Agrega dominios permitidos a Talk, e.g. tu localhost, staging y ambientes de production  (ex. localhost:3000, staging.domain.com, domain.com).",
-      "SUBMIT": "Finalizar instalación"
-    },
-    "FINAL": {
-      "DESCRIPTION": "Gracias por instalar Talk! Te enviamos un email para verificar tu identidad. Mientras se termina de configurar la cuenta, ya puedes empezar a interactuar con tus lectores",
-      "LAUNCH": "Lanzar Talk",
-      "CLOSE": "Cerrar este instalador"
-    }
-  }
-}

client/coral-admin/src/containers/Layout.js

@@ -5,6 +5,8 @@ import {fetchConfig} from '../actions/config';
 import AdminLogin from '../components/AdminLogin';
 import {logout} from 'coral-framework/actions/auth';
 import {FullLoading} from '../components/FullLoading';
+import BanUserDialog from './BanUserDialog';
+import SuspendUserDialog from './SuspendUserDialog';
 import {toggleModal as toggleShortcutModal} from '../actions/moderation';
 import {checkLogin, handleLogin, requestPasswordReset} from '../actions/auth';
 import {can} from 'coral-framework/services/perms';
@@ -52,7 +54,11 @@ class LayoutContainer extends Component {
           handleLogout={handleLogout}
           toggleShortcutModal={toggleShortcutModal}
           {...this.props}
-        />
+        >
+        <BanUserDialog />
+        <SuspendUserDialog />
+        {this.props.children}
+        </Layout>
       );
     } else if (loggedIn) {
       return (

client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js

@@ -1,298 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {compose} from 'react-apollo';
-import * as notification from 'coral-admin/src/services/notification';
-import key from 'keymaster';
-import isEqual from 'lodash/isEqual';
-import styles from './components/styles.css';
-import translations from 'coral-admin/src/translations';
-import I18n from 'coral-framework/modules/i18n/i18n';
-
-import {modQueueQuery, getQueueCounts} from '../../graphql/queries';
-import {banUser, setCommentStatus, suspendUser} from '../../graphql/mutations';
-
-import {fetchSettings} from 'actions/settings';
-import {updateAssets} from 'actions/assets';
-import {
-  toggleModal,
-  singleView,
-  showBanUserDialog,
-  hideBanUserDialog,
-  showSuspendUserDialog,
-  hideSuspendUserDialog,
-  hideShortcutsNote,
-  viewUserDetail,
-  hideUserDetail
-} from 'actions/moderation';
-
-import {Spinner} from 'coral-ui';
-import BanUserDialog from './components/BanUserDialog';
-import SuspendUserDialog from './components/SuspendUserDialog';
-import ModerationQueue from './ModerationQueue';
-import ModerationMenu from './components/ModerationMenu';
-import ModerationHeader from './components/ModerationHeader';
-import NotFoundAsset from './components/NotFoundAsset';
-import ModerationKeysModal from '../../components/ModerationKeysModal';
-import UserDetail from './UserDetail';
-
-const lang = new I18n(translations);
-
-class ModerationContainer extends Component {
-  state = {
-    selectedIndex: 0,
-    sort: 'REVERSE_CHRONOLOGICAL'
-  }
-
-  componentWillMount() {
-    const {toggleModal, singleView} = this.props;
-
-    this.props.fetchSettings();
-    key('s', () => singleView());
-    key('shift+/', () => toggleModal(true));
-    key('esc', () => toggleModal(false));
-    key('j', this.select(true));
-    key('k', this.select(false));
-    key('r', this.moderate(false));
-    key('t', this.moderate(true));
-  }
-
-  moderate = (accept) => () => {
-    const {acceptComment, rejectComment} = this.props;
-    const {selectedIndex} = this.state;
-    const comments = this.getComments();
-    const comment = comments[selectedIndex];
-    const commentId = {commentId: comment.id};
-
-    if (accept) {
-      comment.status !== 'ACCEPTED' && acceptComment(commentId);
-    } else {
-      comment.status !== 'REJECTED' && rejectComment(commentId);
-    }
-  }
-
-  getComments = () => {
-    const {data, route} = this.props;
-    const activeTab = route.path === ':id' ? 'premod' : route.path;
-    return data[activeTab];
-  }
-
-  select = (next) => () => {
-    if (next) {
-      this.setState((prevState) =>
-        ({
-          ...prevState,
-          selectedIndex: prevState.selectedIndex < this.getComments().length - 1
-            ? prevState.selectedIndex + 1 : prevState.selectedIndex
-        }));
-    } else {
-      this.setState((prevState) =>
-        ({
-          ...prevState,
-          selectedIndex: prevState.selectedIndex > 0 ?
-            prevState.selectedIndex - 1 : prevState.selectedIndex
-        }));
-    }
-  }
-
-  selectSort = (sort) => {
-    this.setState({sort});
-    this.props.modQueueResort(sort);
-  }
-
-  suspendUser = async (args) => {
-    this.props.hideSuspendUserDialog();
-    try {
-      const result = await this.props.suspendUser(args);
-      if (result.data.suspendUser.errors) {
-        throw result.data.suspendUser.errors;
-      }
-      notification.success(
-        lang.t('suspenduser.notify_suspend_until',
-          this.props.moderation.suspendUserDialog.username,
-          lang.timeago(args.until)),
-      );
-      const {commentStatus, commentId} = this.props.moderation.suspendUserDialog;
-      if (commentStatus !== 'REJECTED') {
-        return this.props.rejectComment({commentId})
-          .then((result) => {
-            if (result.data.setCommentStatus.errors) {
-              throw result.data.setCommentStatus.errors;
-            }
-          });
-      }
-    }
-    catch(err) {
-      notification.showMutationErrors(err);
-    }
-  };
-
-  componentWillUnmount() {
-    key.unbind('s');
-    key.unbind('shift+/');
-    key.unbind('esc');
-    key.unbind('j');
-    key.unbind('k');
-    key.unbind('r');
-    key.unbind('t');
-  }
-
-  componentDidUpdate(_, prevState) {
-
-    // If paging through using keybaord shortcuts, scroll the page to keep the selected
-    // comment in view.
-    if (prevState.selectedIndex !== this.state.selectedIndex) {
-
-      // the 'smooth' flag only works in FF as of March 2017
-      document.querySelector(`.${styles.selected}`).scrollIntoView({behavior: 'smooth'});
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const {updateAssets} = this.props;
-    if(!isEqual(nextProps.data.assets, this.props.data.assets)) {
-      updateAssets(nextProps.data.assets);
-    }
-  }
-
-  render () {
-    const {data, moderation, settings, assets, onClose, viewUserDetail, hideUserDetail, ...props} = this.props;
-    const providedAssetId = this.props.params.id;
-    const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;
-
-    let asset;
-
-    if (!('premodCount' in data)) {
-      return <div><Spinner/></div>;
-    }
-
-    if (data.error) {
-      return <div>Error</div>;
-    }
-
-    if (providedAssetId) {
-      asset = assets.find((asset) => asset.id === this.props.params.id);
-
-      if (!asset) {
-        return <NotFoundAsset assetId={providedAssetId} />;
-      }
-    }
-
-    const comments = data[activeTab];
-    let activeTabCount;
-    switch(activeTab) {
-    case 'all':
-      activeTabCount = data.allCount;
-      break;
-    case 'accepted':
-      activeTabCount = data.acceptedCount;
-      break;
-    case 'premod':
-      activeTabCount = data.premodCount;
-      break;
-    case 'flagged':
-      activeTabCount = data.flaggedCount;
-      break;
-    case 'rejected':
-      activeTabCount = data.rejectedCount;
-      break;
-    }
-
-    return (
-      <div>
-        <ModerationHeader asset={asset} />
-        <ModerationMenu
-          asset={asset}
-          allCount={data.allCount}
-          acceptedCount={data.acceptedCount}
-          premodCount={data.premodCount}
-          rejectedCount={data.rejectedCount}
-          flaggedCount={data.flaggedCount}
-          selectSort={this.selectSort}
-          sort={this.state.sort}
-        />
-        <ModerationQueue
-          currentAsset={asset}
-          comments={comments}
-          activeTab={activeTab}
-          singleView={moderation.singleView}
-          selectedIndex={this.state.selectedIndex}
-          bannedWords={settings.wordlist.banned}
-          suspectWords={settings.wordlist.suspect}
-          showBanUserDialog={props.showBanUserDialog}
-          showSuspendUserDialog={props.showSuspendUserDialog}
-          acceptComment={props.acceptComment}
-          rejectComment={props.rejectComment}
-          loadMore={props.loadMore}
-          assetId={providedAssetId}
-          sort={this.state.sort}
-          commentCount={activeTabCount}
-          currentUserId={this.props.auth.user.id}
-          viewUserDetail={viewUserDetail}
-          hideUserDetail={hideUserDetail}
-        />
-        <BanUserDialog
-          open={moderation.banDialog}
-          user={moderation.user}
-          commentId={moderation.commentId}
-          commentStatus={moderation.commentStatus}
-          handleClose={props.hideBanUserDialog}
-          handleBanUser={props.banUser}
-          showRejectedNote={moderation.showRejectedNote}
-          rejectComment={props.rejectComment}
-        />
-        <SuspendUserDialog
-          open={moderation.suspendUserDialog.show}
-          username={moderation.suspendUserDialog.username}
-          userId={moderation.suspendUserDialog.userId}
-          organizationName={data.settings.organizationName}
-          onCancel={props.hideSuspendUserDialog}
-          onPerform={this.suspendUser}
-        />
-        <ModerationKeysModal
-          hideShortcutsNote={props.hideShortcutsNote}
-          shortcutsNoteVisible={moderation.shortcutsNoteVisible}
-          open={moderation.modalOpen}
-          onClose={onClose}/>
-        {moderation.userDetailId && (
-          <UserDetail
-            id={moderation.userDetailId}
-            hideUserDetail={hideUserDetail} />
-        )}
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state) => ({
-  moderation: state.moderation.toJS(),
-  settings: state.settings.toJS(),
-  auth: state.auth.toJS(),
-  assets: state.assets.get('assets')
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  onClose: () => dispatch(toggleModal(false)),
-  hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
-  ...bindActionCreators({
-    toggleModal,
-    singleView,
-    updateAssets,
-    fetchSettings,
-    showBanUserDialog,
-    hideShortcutsNote,
-    showSuspendUserDialog,
-    hideSuspendUserDialog,
-    viewUserDetail,
-    hideUserDetail,
-  }, dispatch),
-});
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  setCommentStatus,
-  getQueueCounts,
-  banUser,
-  suspendUser,
-  modQueueQuery,
-)(ModerationContainer);

client/coral-admin/src/containers/ModerationQueue/UserDetail.css

@@ -1,41 +0,0 @@
-.copyButton {
-  float: right;
-  top: -10px;
-}
-
-.memberSince {
-  clear: both;
-}
-
-.small {
-  color: #aaa;
-}
-
-.stats {
-  display: flex;
-
-  .stat {
-    margin: 0 4px 12px;
-  }
-
-  .stat:last-child {
-    margin-right: 0;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .stat p:first-child {
-    font-weight: bold;
-  }
-}
-
-.profileEmail {
-  border: none;
-  background-color: transparent;
-  font-size: 16px;
-  position: absolute;
-  width: 100%;
-  outline: none;
-}

client/coral-admin/src/containers/ModerationQueue/UserDetail.js

@@ -1,74 +0,0 @@
-import React, {PropTypes} from 'react';
-import {Button, Drawer} from 'coral-ui';
-import styles from './UserDetail.css';
-import {compose} from 'react-apollo';
-import {getUserDetail} from 'coral-admin/src/graphql/queries';
-import Slot from 'coral-framework/components/Slot';
-
-class UserDetail extends React.Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired
-  }
-
-  copyPermalink = () => {
-    this.profile.select();
-    try {
-      document.execCommand('copy');
-    } catch (e) {
-
-      /* nothing */
-    }
-  }
-
-  render () {
-    const {data, hideUserDetail} = this.props;
-
-    if (!('user' in data)) {
-      return null;
-    }
-
-    const {user, totalComments, rejectedComments} = data;
-    const localProfile = user.profiles.find((p) => p.provider === 'local');
-    let profile;
-    if (localProfile) {
-      profile = localProfile.id;
-    }
-
-    let rejectedPercent = rejectedComments / totalComments;
-    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
-
-      // if totalComments is 0, you're dividing by zero, which is naughty
-      rejectedPercent = 0;
-    }
-
-    return (
-      <Drawer handleClickOutside={hideUserDetail}>
-        <h3>{user.username}</h3>
-        <Button className={styles.copyButton} onClick={this.copyPermalink}>Copy</Button>
-        {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
-        <Slot fill="userProfile" user={user} />
-        <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
-        <hr/>
-        <p>
-          <strong>Account summary</strong>
-          <br/><small className={styles.small}>Data represents the last six months of activity</small>
-        </p>
-        <div className={styles.stats}>
-          <div className={styles.stat}>
-            <p>Total Comments</p>
-            <p>{totalComments}</p>
-          </div>
-          <div className={styles.stat}>
-            <p>Reject Rate</p>
-            <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
-          </div>
-        </div>
-      </Drawer>
-    );
-  }
-}
-
-export default compose(
-  getUserDetail
-)(UserDetail);

client/coral-admin/src/containers/ModerationQueue/components/BanUserDialog.js

@@ -1,55 +0,0 @@
-import React, {PropTypes} from 'react';
-import {Dialog} from 'coral-ui';
-import styles from './BanUserDialog.css';
-
-import Button from 'coral-ui/components/Button';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../../translations';
-const lang = new I18n(translations);
-
-const onBanClick = (userId, commentId, commentStatus, handleBanUser, rejectComment, handleClose) => (e) => {
-  e.preventDefault();
-  handleBanUser({userId})
-  .then(handleClose)
-  .then(() => commentStatus === 'REJECTED' ? null : rejectComment({commentId}));
-};
-
-const BanUserDialog = ({open, handleClose, handleBanUser, rejectComment, user, commentId, commentStatus, showRejectedNote}) => (
-  <Dialog
-    className={styles.dialog}
-    id="banuserDialog"
-    open={open}
-    onClose={handleClose}
-    onCancel={handleClose}
-    title={lang.t('bandialog.ban_user')}>
-    <span className={styles.close} onClick={handleClose}>×</span>
-    <div>
-      <div className={styles.header}>
-        <h2>{lang.t('bandialog.ban_user')}</h2>
-      </div>
-      <div className={styles.separator}>
-        <h3>{lang.t('bandialog.are_you_sure', user.name)}</h3>
-        <i>{showRejectedNote && lang.t('bandialog.note')}</i>
-      </div>
-      <div className={styles.buttons}>
-        <Button cStyle="cancel" className={styles.cancel} onClick={handleClose} raised>
-          {lang.t('bandialog.cancel')}
-        </Button>
-        <Button cStyle="black" className={styles.ban} onClick={onBanClick(user.id, commentId, commentStatus, handleBanUser, rejectComment, handleClose)} raised>
-          {lang.t('bandialog.yes_ban_user')}
-        </Button>
-      </div>
-    </div>
-  </Dialog>
-);
-
-BanUserDialog.propTypes = {
-  handleBanUser: PropTypes.func.isRequired,
-  handleClose: PropTypes.func.isRequired,
-  rejectComment: PropTypes.func.isRequired,
-  commentId: PropTypes.string,
-  user: PropTypes.object.isRequired,
-};
-
-export default BanUserDialog;

client/coral-admin/src/containers/ModerationQueue/components/Comment.js

@@ -1,188 +0,0 @@
-import React, {PropTypes} from 'react';
-import timeago from 'timeago.js';
-import {Link} from 'react-router';
-import Linkify from 'react-linkify';
-
-import {Icon} from 'coral-ui';
-import FlagBox from './FlagBox';
-import styles from './styles.css';
-import CommentType from './CommentType';
-import Highlighter from 'react-highlight-words';
-import Slot from 'coral-framework/components/Slot';
-import {getActionSummary} from 'coral-framework/utils';
-import ActionButton from 'coral-admin/src/components/ActionButton';
-import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
-import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
-
-const linkify = new Linkify();
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
-const lang = new I18n(translations);
-
-const Comment = ({
-  actions = [],
-  comment,
-  viewUserDetail,
-  suspectWords,
-  bannedWords,
-  ...props
-}) => {
-  const links = linkify.getMatches(comment.body);
-  const linkText = links ? links.map((link) => link.raw) : [];
-  const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
-  const flagActions =
-    comment.actions &&
-    comment.actions.filter((a) => a.__typename === 'FlagAction');
-  let commentType = '';
-  if (comment.status === 'PREMOD') {
-    commentType = 'premod';
-  } else if (flagActions && flagActions.length) {
-    commentType = 'flagged';
-  }
-
-  // since words are checked against word boundaries on the backend,
-  // this should be the behavior on the front end as well.
-  // currently the highlighter plugin does not support this out of the box.
-  const searchWords = [...suspectWords, ...bannedWords]
-    .filter((w) => {
-      return new RegExp(`(^|\\s)${w}(\\s|$)`).test(comment.body);
-    })
-    .concat(linkText);
-
-  return (
-    <li
-      tabIndex={props.index}
-      className={`mdl-card ${props.selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}
-    >
-      <div className={styles.container}>
-        <div className={styles.itemHeader}>
-          <div className={styles.author}>
-            <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
-              {comment.user.name}
-            </span>
-            <span className={styles.created}>
-              {timeago().format(
-                comment.created_at || Date.now() - props.index * 60 * 1000,
-                lang.getLocale().replace('-', '_')
-              )}
-            </span>
-            {props.currentUserId !== comment.user.id &&
-              <ActionsMenu icon="not_interested">
-                <ActionsMenuItem
-                  disabled={comment.user.status === 'BANNED'}
-                  onClick={() => props.showSuspendUserDialog(comment.user.id, comment.user.name, comment.id, comment.status)}>
-                  Suspend User</ActionsMenuItem>
-                <ActionsMenuItem
-                  disabled={comment.user.status === 'BANNED'}
-                  onClick={() => props.showBanUserDialog(comment.user, comment.id, comment.status, comment.status !== 'REJECTED')}>
-                  Ban User
-                </ActionsMenuItem>
-              </ActionsMenu>
-            }
-            <CommentType type={commentType} />
-          </div>
-          {comment.user.status === 'banned'
-            ? <span className={styles.banned}>
-                <Icon name="error_outline" />
-                {lang.t('comment.banned_user')}
-              </span>
-            : null}
-          <Slot fill="adminCommentInfoBar" comment={comment} />
-        </div>
-        <div className={styles.moderateArticle}>
-          Story: {comment.asset.title}
-          {!props.currentAsset &&
-            <Link to={`/admin/moderate/${comment.asset.id}`}>Moderate →</Link>}
-        </div>
-        <div className={styles.itemBody}>
-          <p className={styles.body}>
-            <Highlighter
-              searchWords={searchWords}
-              textToHighlight={comment.body}
-            />
-            {' '}
-            <a
-              className={styles.external}
-              href={`${comment.asset.url}#${comment.id}`}
-              target="_blank"
-            >
-              <Icon name="open_in_new" /> {lang.t('comment.view_context')}
-            </a>
-          </p>
-          <Slot fill="adminCommentContent" comment={comment} />
-          <div className={styles.sideActions}>
-            {links
-              ? <span className={styles.hasLinks}>
-                  <Icon name="error_outline" /> Contains Link
-                </span>
-              : null}
-            <div className={`actions ${styles.actions}`}>
-              {actions.map((action, i) => {
-                const active =
-                  (action === 'REJECT' && comment.status === 'REJECTED') ||
-                  (action === 'APPROVE' && comment.status === 'ACCEPTED');
-                return (
-                  <ActionButton
-                    key={i}
-                    type={action}
-                    user={comment.user}
-                    status={comment.status}
-                    active={active}
-                    acceptComment={() =>
-                      (comment.status === 'ACCEPTED'
-                        ? null
-                        : props.acceptComment({commentId: comment.id}))}
-                    rejectComment={() =>
-                      (comment.status === 'REJECTED'
-                        ? null
-                        : props.rejectComment({commentId: comment.id}))}
-                  />
-                );
-              })}
-            </div>
-            <Slot fill="adminSideActions" comment={comment} />
-          </div>
-        </div>
-      </div>
-      <div>
-        <Slot fill="adminCommentDetailArea" comment={comment} />
-      </div>
-      {flagActions && flagActions.length
-        ? <FlagBox
-            actions={flagActions}
-            actionSummaries={flagActionSummaries}
-          />
-        : null}
-    </li>
-  );
-};
-
-Comment.propTypes = {
-  viewUserDetail: PropTypes.func.isRequired,
-  acceptComment: PropTypes.func.isRequired,
-  rejectComment: PropTypes.func.isRequired,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  currentAsset: PropTypes.object,
-  showBanUserDialog: PropTypes.func.isRequired,
-  showSuspendUserDialog: PropTypes.func.isRequired,
-  currentUserId: PropTypes.string.isRequired,
-  comment: PropTypes.shape({
-    body: PropTypes.string.isRequired,
-    action_summaries: PropTypes.array,
-    actions: PropTypes.array,
-    created_at: PropTypes.string.isRequired,
-    user: PropTypes.shape({
-      id: PropTypes.string,
-      status: PropTypes.string
-    }).isRequired,
-    asset: PropTypes.shape({
-      title: PropTypes.string,
-      url: PropTypes.string,
-      id: PropTypes.string
-    })
-  })
-};
-
-export default Comment;

client/coral-admin/src/containers/ModerationQueue/components/LoadMore.js

@@ -1,34 +0,0 @@
-import React, {PropTypes} from 'react';
-import {Button} from 'coral-ui';
-import styles from './styles.css';
-
-const LoadMore = ({comments, loadMore, sort, tab, assetId, showLoadMore}) =>
-  <div className={styles.loadMoreContainer}>
-    {
-      showLoadMore && <Button
-        className={styles.loadMore}
-        onClick={() => {
-          const lastComment = comments[comments.length - 1];
-          const cursor = lastComment ? lastComment.created_at : null;
-          return loadMore({
-            cursor,
-            sort,
-            tab,
-            asset_id: assetId
-          });
-        }}>
-        Load More
-      </Button>
-    }
-  </div>;
-
-LoadMore.propTypes = {
-  comments: PropTypes.array.isRequired,
-  loadMore: PropTypes.func.isRequired,
-  sort: PropTypes.oneOf(['CHRONOLOGICAL', 'REVERSE_CHRONOLOGICAL']).isRequired,
-  tab: PropTypes.oneOf(['rejected', 'premod', 'flagged', 'all', 'accepted']).isRequired,
-  assetId: PropTypes.string,
-  showLoadMore: PropTypes.bool.isRequired
-};
-
-export default LoadMore;

client/coral-admin/src/containers/ModerationQueue/components/ModerationHeader.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import {Link} from 'react-router';
-import {Icon} from 'coral-ui';
-import styles from './styles.css';
-
-const ModerationHeader = (props) => (
-    <div className=''>
-      <div className={`mdl-tabs ${styles.header}`}>
-        {
-          props.asset ?
-            <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
-              <Link className="mdl-tabs__tab" to="/admin/moderate">All Streams</Link>
-              <a className="mdl-tabs__tab" href={props.asset.url}>
-                <span>{props.asset.title}</span>
-                <Icon className={styles.settingsButton} name="open_in_new"/>
-              </a>
-              <Link className="mdl-tabs__tab" to="/admin/stories">Select Stream</Link>
-            </div>
-            :
-            <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
-              <a className="mdl-tabs__tab" />
-              <a className="mdl-tabs__tab">All Streams</a>
-              <Link className="mdl-tabs__tab" to="/admin/stories">Select Stream</Link>
-            </div>
-        }
-      </div>
-    </div>
-);
-export default ModerationHeader;

client/coral-admin/src/containers/ModerationQueue/helpers/moderationQueueActionsMap.js

@@ -1,14 +0,0 @@
-export const actionsMap = {
-  PREMOD: ['APPROVE', 'REJECT'],
-  FLAGGED: ['APPROVE', 'REJECT'],
-  REJECTED: ['APPROVE', 'REJECTED']
-};
-
-export const menuActionsMap = {
-  'REJECT': {status: 'REJECTED', text: 'Reject', icon: 'close', key: 'r'},
-  'REJECTED': {status: 'REJECTED', text: 'Rejected', icon: 'close'},
-  'APPROVE': {status: 'ACCEPTED', text: 'Approve', icon: 'done', key: 't'},
-  'FLAGGED': {status: 'FLAGGED', text: 'Flag', icon: 'flag', filter: 'Untouched'},
-  'BAN': {status: 'BANNED', text: 'Ban User', icon: 'not interested'},
-  '': {icon: 'done'}
-};

client/coral-admin/src/containers/Streams/Stories.js

@@ -1,187 +0,0 @@
-import React, {Component} from 'react';
-import styles from './Stories.css';
-import {connect} from 'react-redux';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import {fetchAssets, updateAssetState} from '../../actions/assets';
-import translations from '../../translations.json';
-import {Link} from 'react-router';
-
-import {Pager, Icon} from 'coral-ui';
-import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl';
-import EmptyCard from 'coral-admin/src/components/EmptyCard';
-
-const limit = 25;
-
-class Stories extends Component {
-
-  state = {
-    search: '',
-    sort: 'desc',
-    filter: 'all',
-    statusMenus: {},
-    timer: null,
-    page: 0
-  }
-
-  componentDidMount () {
-    this.props.fetchAssets(0, limit, '', this.state.sortBy);
-  }
-
-  onSettingChange = (setting) => (e) => {
-    let options = this.state;
-    this.setState({[setting]: e.target.value});
-    options[setting] = e.target.value;
-    this.props.fetchAssets(0, limit, options.search, options.sort, options.filter);
-  }
-
-  onSearchChange = (e) => {
-    const search = e.target.value;
-    this.setState((prevState) => {
-      prevState.search = search;
-      clearTimeout(prevState.timer);
-      const fetchAssets = this.props.fetchAssets;
-      prevState.timer = setTimeout(() => {
-        fetchAssets(0, limit, search, this.state.sort, this.state.filter);
-      }, 350);
-      return prevState;
-    });
-  }
-
-  renderDate = (date) => {
-    const d = new Date(date);
-    return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
-  }
-
-  onStatusClick = (closeStream, id, statusMenuOpen) => () => {
-    if (statusMenuOpen) {
-      this.setState((prev) => {
-        prev.statusMenus[id] = false;
-        return prev;
-      });
-      this.props.updateAssetState(id, closeStream ? Date.now() : null)
-        .then(() => {
-          const {search, sort, filter, page} = this.state;
-          this.props.fetchAssets(page, limit, search, sort, filter);
-        });
-    } else {
-      this.setState((prev) => {
-        prev.statusMenus[id] = true;
-        return prev;
-      });
-    }
-  }
-
-  renderTitle = (title, {id}) =>  <Link to={`/admin/moderate/${id}`}>{title}</Link>
-
-  renderStatus = (closedAt, {id}) => {
-    const closed = closedAt && new Date(closedAt).getTime() < Date.now();
-    const statusMenuOpen = this.state.statusMenus[id];
-    return <div className={styles.statusMenu}>
-      <div
-        className={closed ? styles.statusMenuClosed : styles.statusMenuOpen}
-        onClick={this.onStatusClick(closed, id, statusMenuOpen)}>
-        {!statusMenuOpen && <Icon className={styles.statusMenuIcon} name='keyboard_arrow_down'/>}
-        {closed ? lang.t('streams.closed') : lang.t('streams.open')}
-      </div>
-      {
-        statusMenuOpen &&
-        <div
-          className={!closed ? styles.statusMenuClosed : styles.statusMenuOpen}
-          onClick={this.onStatusClick(!closed, id, statusMenuOpen)}>
-          {!closed ? lang.t('streams.closed') : lang.t('streams.open')}
-        </div>
-      }
-    </div>;
-  }
-
-  onPageClick = (page) => {
-    this.setState({page});
-    const {search, sort, filter} = this.state;
-    this.props.fetchAssets((page - 1) * limit, limit, search, sort, filter);
-  }
-
-  render () {
-    const {search, sort, filter} = this.state;
-    const {assets} = this.props;
-
-    const assetsIds = assets.ids.map((id) => assets.byId[id]);
-
-    return (
-      <div className={styles.container}>
-        <div className={styles.leftColumn}>
-          <div className={styles.searchBox}>
-            <Icon name='search' className={styles.searchIcon}/>
-            <input
-              type='text'
-              value={search}
-              className={styles.searchBoxInput}
-              onChange={this.onSearchChange}
-              placeholder={lang.t('streams.search')}/>
-          </div>
-          <div className={styles.optionHeader}>{lang.t('streams.filter-streams')}</div>
-          <div className={styles.optionDetail}>{lang.t('streams.stream-status')}</div>
-          <RadioGroup
-            name='status filter'
-            value={filter}
-            childContainer='div'
-            onChange={this.onSettingChange('filter')}
-            className={styles.radioGroup}
-          >
-            <Radio value='all'>{lang.t('streams.all')}</Radio>
-            <Radio value='open'>{lang.t('streams.open')}</Radio>
-            <Radio value='closed'>{lang.t('streams.closed')}</Radio>
-          </RadioGroup>
-          <div className={styles.optionHeader}>{lang.t('streams.sort-by')}</div>
-            <RadioGroup
-              name='sort by'
-              value={sort}
-              childContainer='div'
-              onChange={this.onSettingChange('sort')}
-              className={styles.radioGroup}
-            >
-              <Radio value='desc'>{lang.t('streams.newest')}</Radio>
-              <Radio value='asc'>{lang.t('streams.oldest')}</Radio>
-            </RadioGroup>
-          </div>
-        {
-          assetsIds.length
-          ? <div className={styles.mainContent}>
-              <DataTable className={styles.streamsTable} rows={assetsIds} onClick={this.goToModeration}>
-                <TableHeader name="title" cellFormatter={this.renderTitle}>{lang.t('streams.article')}</TableHeader>
-                <TableHeader name="publication_date" cellFormatter={this.renderDate}>
-                  {lang.t('streams.pubdate')}
-                </TableHeader>
-                <TableHeader name="closedAt" cellFormatter={this.renderStatus} className={styles.status}>
-                  {lang.t('streams.status')}
-                </TableHeader>
-              </DataTable>
-              <Pager
-                totalPages={Math.ceil((assets.count || 0) / limit)}
-                page={this.state.page}
-                onNewPageHandler={this.onPageClick} />
-            </div>
-          : <EmptyCard>{lang.t('streams.empty_result')}</EmptyCard>
-        }
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = ({assets}) => {
-  return {
-    assets: assets.toJS()
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    fetchAssets: (...args) => {
-      dispatch(fetchAssets.apply(this, args));
-    },
-    updateAssetState: (...args) => dispatch(updateAssetState.apply(this, args))
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Stories);
-
-const lang = new I18n(translations);

client/coral-admin/src/containers/SuspendUserDialog.js

@@ -0,0 +1,83 @@
+import React, {Component} from 'react';
+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 * as notification from 'coral-admin/src/services/notification';
+import t, {timeago} from 'coral-framework/services/i18n';
+import withQuery from 'coral-framework/hocs/withQuery';
+import get from 'lodash/get';
+
+class SuspendUserDialogContainer extends Component {
+
+  suspendUser = async ({message, until}) => {
+    const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser} = this.props;
+    hideSuspendUserDialog();
+    try {
+      const result = await suspendUser({id: userId, message, until});
+      if (result.data.suspendUser.errors) {
+        throw result.data.suspendUser.errors;
+      }
+      notification.success(
+        t('suspenduser.notify_suspend_until', username, timeago(until)),
+      );
+      if (commentId && commentStatus && commentStatus !== 'REJECTED') {
+        return setCommentStatus({commentId, status: 'REJECTED'})
+          .then((result) => {
+            if (result.data.setCommentStatus.errors) {
+              throw result.data.setCommentStatus.errors;
+            }
+          });
+      }
+    }
+    catch(err) {
+      notification.showMutationErrors(err);
+    }
+  };
+
+  render() {
+    return (
+      <SuspendUserDialog
+        open={this.props.open}
+        onPerform={this.suspendUser}
+        onCancel={this.props.hideSuspendUserDialog}
+        organizationName={get(this.props, 'root.settings.organizationName')}
+        username={this.props.username}
+      />
+    );
+  }
+}
+
+const withOrganizationName = withQuery(gql`
+  query CoralAdmin_SuspendUserDialog {
+     settings {
+      organizationName
+    }
+  }
+`);
+
+const mapStateToProps = ({suspendUserDialog: {open, userId, username, commentId, commentStatus}}) => ({
+  open,
+  userId,
+  username,
+  commentId,
+  commentStatus,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  ...bindActionCreators({
+    hideSuspendUserDialog,
+  }, dispatch),
+});
+
+export default compose(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  ),
+  withSuspendUser,
+  withSetCommentStatus,
+  withOrganizationName,
+)(SuspendUserDialogContainer);

client/coral-admin/src/graphql/fragments/assetMetricsView.graphql

@@ -1,12 +0,0 @@
-fragment metrics on Asset {
-  id
-  title
-  url
-  author
-  created_at
-  commentCount
-  action_summaries {
-    actionCount
-    actionableItemCount
-  }
-}

client/coral-admin/src/graphql/fragments/commentView.graphql

@@ -1,31 +0,0 @@
-fragment commentView on Comment {
-    id
-    body
-    created_at
-    status
-    user {
-        id
-        name: username
-        status
-    }
-    asset {
-      id
-      title
-      url
-    }
-    action_summaries {
-      count
-      ... on FlagActionSummary {
-        reason
-      }
-    }
-    actions {
-      ... on FlagAction {
-        reason
-        message
-        user {
-          username
-        }
-      }
-    }
-}

client/coral-admin/src/graphql/index.js

@@ -0,0 +1,14 @@
+import {add} from 'coral-framework/services/graphqlRegistry';
+
+const extension = {
+  mutations: {
+    SetUserStatus: () => ({
+      refetchQueries: ['CoralAdmin_Community'],
+    }),
+    RejectUsername: () => ({
+      refetchQueries: ['CoralAdmin_Community'],
+    }),
+  },
+};
+
+add(extension);

client/coral-admin/src/graphql/mutations/index.js

@@ -1,153 +0,0 @@
-import {graphql} from 'react-apollo';
-import SET_USER_STATUS from './setUserStatus.graphql';
-import SET_COMMENT_STATUS from './setCommentStatus.graphql';
-import SUSPEND_USER from './suspendUser.graphql';
-import REJECT_USERNAME from './rejectUsername.graphql';
-
-export const banUser = graphql(SET_USER_STATUS, {
-  props: ({mutate}) => ({
-    banUser: ({userId}) => {
-      return mutate({
-        variables: {
-          userId,
-          status: 'BANNED'
-        },
-        refetchQueries: ['Users']
-      });
-    }}),
-});
-
-export const setUserStatus = graphql(SET_USER_STATUS, {
-  props: ({mutate}) => ({
-    approveUser: ({userId}) => {
-      return mutate({
-        variables: {
-          userId,
-          status: 'APPROVED'
-        },
-        refetchQueries: ['Users']
-      });
-    }
-  })
-});
-
-export const suspendUser = graphql(SUSPEND_USER, {
-  props: ({mutate}) => ({
-    suspendUser: (input) => {
-      return mutate({
-        variables: {
-          input,
-        },
-      });
-    }
-  })
-});
-
-export const rejectUsername = graphql(REJECT_USERNAME, {
-  props: ({mutate}) => ({
-    rejectUsername: (input) => {
-      return mutate({
-        variables: {
-          input,
-        },
-        refetchQueries: ['Users']
-      });
-    }
-  })
-});
-
-const views = ['all', 'premod', 'flagged', 'accepted', 'rejected'];
-export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
-  props: ({mutate}) => ({
-    acceptComment: ({commentId}) => {
-      return mutate({
-        variables: {
-          commentId,
-          status: 'ACCEPTED'
-        },
-        updateQueries: {
-          ModQueue: (oldData) => {
-            const comment = views.reduce((comment, view) => {
-              return comment ? comment : oldData[view].find((c) => c.id === commentId);
-            }, null);
-            let accepted;
-            let acceptedCount = oldData.acceptedCount;
-
-            // if the comment was already in the Approved queue, don't re-add it
-            if (comment.status === 'ACCEPTED') {
-              accepted = [...oldData.accepted];
-            } else {
-              comment.status = 'ACCEPTED';
-              acceptedCount++;
-              accepted = [comment, ...oldData.accepted];
-            }
-
-            const premod = oldData.premod.filter((c) => c.id !== commentId);
-            const flagged = oldData.flagged.filter((c) => c.id !== commentId);
-            const rejected = oldData.rejected.filter((c) => c.id !== commentId);
-            const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
-            const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
-            const rejectedCount = rejected.length < oldData.rejected.length ? oldData.rejectedCount - 1 : oldData.rejectedCount;
-
-            return {
-              ...oldData,
-              premodCount: Math.max(0, premodCount),
-              flaggedCount: Math.max(0, flaggedCount),
-              acceptedCount: Math.max(0, acceptedCount),
-              rejectedCount: Math.max(0, rejectedCount),
-              premod,
-              flagged,
-              accepted,
-              rejected,
-            };
-          }
-        }
-      });
-    },
-    rejectComment: ({commentId}) => {
-      return mutate({
-        variables: {
-          commentId,
-          status: 'REJECTED'
-        },
-        updateQueries: {
-          ModQueue: (oldData) => {
-            const comment = views.reduce((comment, view) => {
-              return comment ? comment : oldData[view].find((c) => c.id === commentId);
-            }, null);
-            let rejected;
-            let rejectedCount = oldData.rejectedCount;
-
-            // if the item was already in the Rejected queue, don't put it in again
-            if (comment.status === 'REJECTED') {
-              rejected = oldData.rejected;
-            } else {
-              comment.status = 'REJECTED';
-              rejectedCount++;
-              rejected = [comment, ...oldData.rejected];
-            }
-
-            const premod = oldData.premod.filter((c) => c.id !== commentId);
-            const flagged = oldData.flagged.filter((c) => c.id !== commentId);
-            const accepted = oldData.accepted.filter((c) => c.id !== commentId);
-            const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
-            const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
-            const acceptedCount = accepted.length < oldData.accepted.length ? oldData.acceptedCount - 1 : oldData.acceptedCount;
-
-            return {
-              ...oldData,
-              premodCount: Math.max(0, premodCount),
-              flaggedCount: Math.max(0, flaggedCount),
-              acceptedCount: Math.max(0, acceptedCount),
-              rejectedCount: Math.max(0, rejectedCount),
-              premod,
-              flagged,
-              accepted,
-              rejected
-            };
-          }
-        }
-      });
-    }
-  })
-});

client/coral-admin/src/graphql/mutations/rejectUsername.graphql

@@ -1,7 +0,0 @@
-mutation rejectUsername($input: RejectUsernameInput!) {
-  rejectUsername(input: $input) {
-    errors {
-      translation_key
-    }
-  }
-}

client/coral-admin/src/graphql/mutations/setCommentStatus.graphql

@@ -1,7 +0,0 @@
-mutation setCommentStatus($commentId: ID!, $status: COMMENT_STATUS!){
-  setCommentStatus(id: $commentId, status: $status) {
-    errors {
-      translation_key
-    }
-  }
-}

client/coral-admin/src/graphql/mutations/setUserStatus.graphql

@@ -1,7 +0,0 @@
-mutation setUserStatus($userId: ID!, $status: USER_STATUS!) {
-  setUserStatus(id: $userId, status: $status) {
-    errors {
-      translation_key
-    }
-  }
-}

client/coral-admin/src/graphql/mutations/suspendUser.graphql

@@ -1,7 +0,0 @@
-mutation suspendUser($input: SuspendUserInput!) {
-  suspendUser(input: $input) {
-    errors {
-      translation_key
-    }
-  }
-}

client/coral-admin/src/graphql/queries/assetsQuery.graphql

@@ -1,6 +0,0 @@
-query Assets {
-  assets {
-    id
-    title
-  }
-}

client/coral-admin/src/graphql/queries/getQueueCounts.graphql

@@ -1,22 +0,0 @@
-query Counts ($asset_id: ID) {
-  allCount: commentCount(query: {
-    asset_id: $asset_id
-  })
-  acceptedCount: commentCount(query: {
-    statuses: [ACCEPTED],
-    asset_id: $asset_id
-  })
-  premodCount: commentCount(query: {
-    statuses: [PREMOD],
-    asset_id: $asset_id
-  })
-  rejectedCount: commentCount(query: {
-     statuses: [REJECTED],
-     asset_id: $asset_id
-  })
-  flaggedCount: commentCount(query: {
-    action_type: FLAG,
-    asset_id: $asset_id,
-    statuses: [NONE, PREMOD]
-  })
-}

client/coral-admin/src/graphql/queries/index.js

@@ -1,116 +0,0 @@
-import {graphql} from 'react-apollo';
-
-import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
-import MOD_QUEUE_LOAD_MORE from './loadMore.graphql';
-import MOD_USER_FLAGGED_QUERY from './modUserFlaggedQuery.graphql';
-import METRICS from './metricsQuery.graphql';
-import USER_DETAIL from './userDetail.graphql';
-import GET_QUEUE_COUNTS from './getQueueCounts.graphql';
-
-export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
-  options: ({params: {id = null}}) => {
-    return {
-      variables: {
-        asset_id: id,
-        sort: 'REVERSE_CHRONOLOGICAL'
-      }
-    };
-  },
-  props: ({ownProps: {params: {id = null}}, data}) => ({
-    data,
-    modQueueResort: modQueueResort(id, data.fetchMore),
-    loadMore: loadMore(data.fetchMore)
-  })
-});
-
-export const getMetrics = graphql(METRICS, {
-  options: ({settings: {dashboardWindowStart, dashboardWindowEnd}}) => {
-
-    return {
-      variables: {
-        from: dashboardWindowStart,
-        to: dashboardWindowEnd
-      }
-    };
-  }
-});
-
-export const loadMore = (fetchMore) => ({limit = 10, cursor, sort, tab, asset_id}) => {
-  let variables = {
-    limit,
-    cursor,
-    sort,
-    asset_id
-  };
-  switch(tab) {
-  case 'all':
-    variables.statuses = null;
-    break;
-  case 'accepted':
-    variables.statuses = ['ACCEPTED'];
-    break;
-  case 'premod':
-    variables.statuses = ['PREMOD'];
-    break;
-  case 'flagged':
-    variables.statuses = ['NONE', 'PREMOD'];
-    variables.action_type = 'FLAG';
-    break;
-  case 'rejected':
-    variables.statuses = ['REJECTED'];
-    break;
-  }
-  return fetchMore({
-    query: MOD_QUEUE_LOAD_MORE,
-    variables,
-    updateQuery: (oldData, {fetchMoreResult:{comments}}) => {
-      return {
-        ...oldData,
-        [tab]: [
-          ...oldData[tab],
-          ...comments
-        ]
-      };
-    }
-  });
-};
-
-export const modUserFlaggedQuery  = graphql(MOD_USER_FLAGGED_QUERY, {
-  options: ({params: {action_type = 'FLAG'}}) => {
-    return {
-      variables: {
-        action_type: action_type
-      }
-    };
-  }
-});
-
-export const modQueueResort = (id, fetchMore) => (sort) => {
-  return fetchMore({
-    query: MOD_QUEUE_QUERY,
-    variables: {
-      asset_id: id,
-      sort
-    },
-    updateQuery: (oldData, {fetchMoreResult:{data}}) => data
-  });
-};
-
-export const getUserDetail = graphql(USER_DETAIL, {
-  options: ({id}) => {
-    return {
-      variables: {author_id: id}
-    };
-  }
-});
-
-export const getQueueCounts = graphql(GET_QUEUE_COUNTS, {
-  options: ({params: {id = null}}) => {
-    return {
-      pollInterval: 5000,
-      variables: {
-        asset_id: id
-      }
-    };
-  }
-});

client/coral-admin/src/graphql/queries/loadMore.graphql

@@ -1,13 +0,0 @@
-#import "../fragments/commentView.graphql"
-
-query LoadMoreModQueue($limit: Int = 10, $cursor: Date, $sort: SORT_ORDER, $asset_id: ID, $statuses:[COMMENT_STATUS!], $action_type: ACTION_TYPE) {
-  comments(query: {limit: $limit, cursor: $cursor, asset_id: $asset_id, statuses: $statuses, sort: $sort, action_type: $action_type}) {
-    ...commentView
-    action_summaries {
-      count
-      ... on FlagActionSummary {
-        reason
-      }
-    }
-  }
-}

client/coral-admin/src/graphql/queries/metricsQuery.graphql

@@ -1,10 +0,0 @@
-#import "../fragments/assetMetricsView.graphql"
-
-query Metrics ($from: Date!, $to: Date!) {
-  assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) {
-    ...metrics
-  }
-  assetsByActivity: assetMetrics(from: $from, to: $to, sort: ACTIVITY) {
-    ...metrics
-  }
-}

client/coral-admin/src/graphql/queries/modQueueQuery.graphql

@@ -1,68 +0,0 @@
-#import "../fragments/commentView.graphql"
-
-query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
-    all: comments(query: {
-      statuses: [NONE, PREMOD, ACCEPTED, REJECTED],
-      asset_id: $asset_id,
-      sort: $sort
-    }) {
-      ...commentView
-    }
-    accepted: comments(query: {
-      statuses: [ACCEPTED],
-      asset_id: $asset_id,
-      sort: $sort
-    }) {
-      ...commentView
-    }
-    premod: comments(query: {
-        statuses: [PREMOD],
-        asset_id: $asset_id,
-        sort: $sort
-    }) {
-        ...commentView
-    }
-    flagged: comments(query: {
-        action_type: FLAG,
-        asset_id: $asset_id,
-        statuses: [NONE, PREMOD],
-        sort: $sort
-    }) {
-        ...commentView
-    }
-    rejected: comments(query: {
-        statuses: [REJECTED],
-        asset_id: $asset_id,
-        sort: $sort
-    }) {
-        ...commentView
-    }
-    assets: assets {
-      id
-      title
-      url
-    }
-    allCount: commentCount(query: {
-      asset_id: $asset_id
-    })
-    acceptedCount: commentCount(query: {
-      statuses: [ACCEPTED],
-      asset_id: $asset_id
-    })
-    premodCount: commentCount(query: {
-      statuses: [PREMOD],
-      asset_id: $asset_id
-    })
-    rejectedCount: commentCount(query: {
-       statuses: [REJECTED],
-       asset_id: $asset_id
-    })
-    flaggedCount: commentCount(query: {
-      action_type: FLAG,
-      asset_id: $asset_id,
-      statuses: [NONE, PREMOD]
-    })
-    settings {
-      organizationName
-    }
-}

client/coral-admin/src/graphql/queries/modUserFlaggedQuery.graphql

@@ -1,26 +0,0 @@
-query Users ($action_type: ACTION_TYPE) {
-  users (query:{action_type: $action_type}){
-    id
-    username
-    status
-    roles
-    actions{
-      id
-      created_at
-      ... on FlagAction {
-        reason
-        message
-        user {
-          id
-          username
-        }
-      }
-    }
-    action_summaries {
-      count
-    	... on FlagActionSummary {
-      	reason
-      }
-    }
-  }
-}

client/coral-admin/src/graphql/queries/userDetail.graphql

@@ -1,13 +0,0 @@
-query UserDetail ($author_id: ID!) {
-  user(id: $author_id) {
-    id
-    username
-    created_at
-    profiles {
-      id
-      provider
-    }
-  }
-  totalComments: commentCount(query: {author_id: $author_id})
-  rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
-}

client/coral-admin/src/graphql/utils.js

@@ -0,0 +1,137 @@
+import update from 'immutability-helper';
+import * as notification from 'coral-admin/src/services/notification';
+
+const queues = ['all', 'premod', 'flagged', 'accepted', 'rejected'];
+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; }
+  return 0;
+};
+
+const descending = (a, b) => -ascending(a, b);
+
+function queueHasComment(root, queue, id) {
+  return root[queue].nodes.find((c) => c.id === id);
+}
+
+function removeCommentFromQueue(root, queue, id) {
+  if (!queueHasComment(root, queue, id)) {
+    return root;
+  }
+  return update(root, {
+    [`${queue}Count`]: {$set: root[`${queue}Count`] - 1},
+    [queue]: {
+      nodes: {$apply: (nodes) => nodes.filter((c) => c.id !== id)},
+    },
+  });
+}
+
+function shouldCommentBeAdded(root, queue, comment, sort) {
+  if (root[`${queue}Count`] < limit) {
+
+    // Adding all comments until first limit has reached.
+    return true;
+  }
+  const cursor = new Date(root[queue].endCursor);
+  return sort === 'CHRONOLOGICAL'
+    ? new Date(comment.created_at) <= cursor
+    : new Date(comment.created_at) >= cursor;
+}
+
+function addCommentToQueue(root, queue, comment, sort) {
+  if (queueHasComment(root, queue, comment.id)) {
+    return root;
+  }
+
+  const sortAlgo = sort === 'CHRONOLOGICAL' ? ascending : descending;
+  const changes = {
+    [`${queue}Count`]: {$set: root[`${queue}Count`] + 1},
+  };
+
+  if (shouldCommentBeAdded(root, queue, comment, sort)) {
+    const nodes = root[queue].nodes.concat(comment).sort(sortAlgo);
+    changes[queue] = {
+      nodes: {$set: nodes},
+      startCursor: {$set: nodes[0].created_at},
+      endCursor: {$set: nodes[nodes.length - 1].created_at},
+    };
+  }
+
+  return update(root, changes);
+}
+
+function getCommentQueues(comment) {
+  const queues = ['all'];
+  if (comment.status === 'ACCEPTED') {
+    queues.push('accepted');
+  }
+  else if (comment.status === 'REJECTED') {
+    queues.push('rejected');
+  }
+  else if (comment.status === 'PREMOD') {
+    queues.push('premod');
+  }
+  if (
+    ['NONE', 'PREMOD'].indexOf(comment.status) >= 0
+    && comment.actions && comment.actions.some((a) => a.__typename === 'FlagAction')
+  ) {
+    queues.push('flagged');
+  }
+  return queues;
+}
+
+/**
+ * Assimilate comment changes into current store.
+ * @param  {Object} root               current state of the store
+ * @param  {Object} comment            comment that was changed
+ * @param  {string} sort               current sort order of the queues
+ * @param  {Object} [notify]           show know notifications if set
+ * @param  {string} notify.activeQueue current active queue
+ * @param  {string} notify.text        notification text to show
+ * @param  {bool}   notify.anyQueue    if true show the notification when the comment is shown
+ *                                     in the current active queue besides the 'all' queue.
+ * @return {Object}                    next state of the store
+ */
+export function handleCommentChange(root, comment, sort, notify) {
+  let next = root;
+  const nextQueues = getCommentQueues(comment);
+
+  let notificationShown = false;
+  const showNotificationOnce = () => {
+    if (notificationShown) {
+      return;
+    }
+    notification.info(notify.text);
+    notificationShown = true;
+  };
+
+  queues.forEach((queue) => {
+    if (nextQueues.indexOf(queue) >= 0) {
+      if (!queueHasComment(next, queue, comment.id)) {
+        next = addCommentToQueue(next, queue, comment, sort);
+        if (notify && notify.activeQueue === queue && shouldCommentBeAdded(next, queue, comment, sort)) {
+          showNotificationOnce(comment);
+        }
+      }
+    } else if(queueHasComment(next, queue, comment.id)){
+      next = removeCommentFromQueue(next, queue, comment.id);
+      if (notify && notify.activeQueue === queue) {
+        showNotificationOnce(comment);
+      }
+    }
+
+    if (
+      notify
+      && (queue === 'all' || notify.anyQueue)
+      && queueHasComment(next, queue, comment.id)
+      && notify.activeQueue === queue
+    ) {
+      showNotificationOnce(comment);
+    }
+  });
+  return next;
+}

client/coral-admin/src/index.js

@@ -1,16 +1,23 @@
 import React from 'react';
 import {render} from 'react-dom';
 import {ApolloProvider} from 'react-apollo';
+import smoothscroll from 'smoothscroll-polyfill';
 
-import {client} from './services/client';
+import {getClient} from './services/client';
 import store from './services/store';
 
 import App from './components/App';
 
 import 'react-mdl/extra/material.js';
+import './graphql';
+import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
+
+loadPluginsTranslations();
+injectPluginsReducers();
+smoothscroll.polyfill();
 
 render(
-  <ApolloProvider client={client} store={store}>
+  <ApolloProvider client={getClient()} store={store}>
     <App />
   </ApolloProvider>
   , document.querySelector('#root')

client/coral-admin/src/reducers/banUserDialog.js

@@ -0,0 +1,30 @@
+import {SHOW_BAN_USER_DIALOG, HIDE_BAN_USER_DIALOG} from '../constants/banUserDialog';
+
+const initialState = {
+  open: false,
+  userId: null,
+  username: '',
+  commentId: null,
+  commentStatus: '',
+};
+
+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;
+  }
+}

client/coral-admin/src/reducers/community.js

@@ -9,8 +9,8 @@ import {
   SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
   HIDE_BANUSER_DIALOG,
-  SHOW_SUSPENDUSER_DIALOG,
-  HIDE_SUSPENDUSER_DIALOG
+  SHOW_REJECT_USERNAME_DIALOG,
+  HIDE_REJECT_USERNAME_DIALOG
 } from '../constants/community';
 
 const initialState = Map({
@@ -24,7 +24,7 @@ const initialState = Map({
   pagePeople: 0,
   user: Map({}),
   banDialog: false,
-  suspendDialog: false
+  rejectUsernameDialog: false
 });
 
 export default function community (state = initialState, action) {
@@ -79,14 +79,14 @@ export default function community (state = initialState, action) {
         user: Map(action.user),
         banDialog: true
       });
-  case HIDE_SUSPENDUSER_DIALOG:
+  case HIDE_REJECT_USERNAME_DIALOG:
     return state
-      .set('suspendDialog', false);
-  case SHOW_SUSPENDUSER_DIALOG:
+      .set('rejectUsernameDialog', false);
+  case SHOW_REJECT_USERNAME_DIALOG:
     return state
       .merge({
         user: Map(action.user),
-        suspendDialog: true
+        rejectUsernameDialog: true
       });
   default :
     return state;

client/coral-admin/src/reducers/index.js

@@ -5,13 +5,17 @@ import community from './community';
 import moderation from './moderation';
 import install from './install';
 import config from './config';
+import banUserDialog from './banUserDialog';
+import suspendUserDialog from './suspendUserDialog';
 
 export default {
   auth,
+  banUserDialog,
+  suspendUserDialog,
   assets,
   settings,
   community,
   moderation,
   install,
-  config
+  config,
 };

client/coral-admin/src/reducers/moderation.js

@@ -1,53 +1,23 @@
-import {fromJS, Map} from 'immutable';
+import {fromJS, Set} from 'immutable';
 import * as actions from '../constants/moderation';
 
 const initialState = fromJS({
   singleView: false,
   modalOpen: false,
-  user: {},
-  commentId: null,
-  commentStatus: null,
   userDetailId: null,
-  banDialog: false,
+  userDetailActiveTab: 'all',
+  userDetailStatuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
+  userDetailSelectedIds: new Set(),
+  storySearchVisible: false,
+  storySearchString: '',
   shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show',
-  suspendUserDialog: {
-    show: false,
-    userId: null,
-    username: '',
-    commentId: null,
-    commentStatus: '',
-  },
+  sortOrder: 'REVERSE_CHRONOLOGICAL',
 });
 
 export default function moderation (state = initialState, action) {
   switch (action.type) {
-  case actions.HIDE_BANUSER_DIALOG:
-    return state
-      .set('banDialog', false)
-      .set('commentStatus', null);
-  case actions.SHOW_BANUSER_DIALOG:
-    return state
-      .merge({
-        user: Map(action.user),
-        commentId: action.commentId,
-        commentStatus: action.commentStatus,
-        showRejectedNote: action.showRejectedNote,
-        banDialog: true
-      });
-  case actions.SHOW_SUSPEND_USER_DIALOG:
-    return state
-      .mergeDeep({
-        suspendUserDialog: {
-          show: true,
-          userId: action.userId,
-          username: action.username,
-          commentId: action.commentId,
-          commentStatus: action.commentStatus,
-        }
-      });
-  case actions.HIDE_SUSPEND_USER_DIALOG:
-    return state
-      .setIn(['suspendUserDialog', 'show'], false);
+  case actions.MODERATION_CLEAR_STATE:
+    return initialState;
   case actions.SET_ACTIVE_TAB:
     return state
       .set('activeTab', action.activeTab);
@@ -63,7 +33,27 @@ export default function moderation (state = initialState, action) {
   case actions.VIEW_USER_DETAIL:
     return state.set('userDetailId', action.userId);
   case actions.HIDE_USER_DETAIL:
-    return state.set('userDetailId', null);
+    return state
+      .set('userDetailId', null)
+      .update('userDetailSelectedIds', (set) => set.clear());
+  case actions.CLEAR_USER_DETAIL_SELECTIONS:
+    return state.update('userDetailSelectedIds', (set) => set.clear());
+  case actions.CHANGE_USER_DETAIL_STATUSES:
+    return state
+      .set('userDetailActiveTab', action.tab)
+      .set('userDetailStatuses', action.statuses);
+  case actions.SELECT_USER_DETAIL_COMMENT:
+    return state.update('userDetailSelectedIds', (set) => set.add(action.id));
+  case actions.UNSELECT_USER_DETAIL_COMMENT:
+    return state.update('userDetailSelectedIds', (set) => set.delete(action.id));
+  case actions.SHOW_STORY_SEARCH:
+    return state.set('storySearchVisible', true);
+  case actions.HIDE_STORY_SEARCH:
+    return state.set('storySearchVisible', false);
+  case actions.STORY_SEARCH_CHANGE_VALUE:
+    return state.set('storySearchString', action.value);
+  case actions.SET_SORT_ORDER:
+    return state.set('sortOrder', action.order);
   default :
     return state;
   }

client/coral-admin/src/reducers/suspendUserDialog.js

@@ -0,0 +1,30 @@
+import {SHOW_SUSPEND_USER_DIALOG, HIDE_SUSPEND_USER_DIALOG} from '../constants/suspendUserDialog';
+
+const initialState = {
+  open: false,
+  userId: null,
+  username: '',
+  commentId: null,
+  commentStatus: '',
+};
+
+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;
+  }
+}

client/coral-admin/src/routes/Community/components/ActionButton.js

@@ -1,23 +1,20 @@
 import React from 'react';
-import styles from '../Community.css';
-import BanUserButton from './BanUserButton';
+import styles from './Community.css';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../../../containers/ModerationQueue/helpers/moderationQueueActionsMap';
+import {menuActionsMap} from '../../Moderation/helpers/moderationQueueActionsMap';
+
+import t from 'coral-framework/services/i18n';
 
 const ActionButton = ({type = '', user, ...props}) => {
-  if (type === 'BAN') {
-    return <BanUserButton icon='not interested' user={user} onClick={() => props.showBanUserDialog(user)} />;
-  }
-
   return (
     <Button
       className={`${type.toLowerCase()} ${styles.actionButton}`}
       cStyle={type.toLowerCase()}
       icon={menuActionsMap[type].icon}
       onClick={() => {
-        type === 'APPROVE' ? props.approveUser({userId: user.id}) : props.showSuspendUserDialog({user: user});
+        type === 'APPROVE' ? props.approveUser({userId: user.id}) : props.showRejectUsernameDialog({user: user});
       }}
-    >{menuActionsMap[type].text}</Button>
+    >{t(`modqueue.${menuActionsMap[type].text}`)}</Button>
   );
 };
 

client/coral-admin/src/routes/Community/components/Community.css

@@ -175,7 +175,7 @@
      right: 0;
      height: 100%;
      top: 0;
-     padding: 40px 18px;
+     padding: 50px 18px;
      box-sizing: border-box;
    }
 
@@ -310,24 +310,33 @@
 .flaggedByCount {
   display: block;
   text-align: left;
+  margin-top: 5px;
+}
+
+.flaggedByCount i {
+  font-size: 14px;
+  margin-right: 10px;
 }
 
 .flaggedBy {
   display: inline;
   padding: 3px;
-  font-size: 16px;
+  font-size: 14px;
+  margin-left: 5px;
 }
 
 .flaggedByLabel {
-  font-weight: bold;
+  font-weight: 600;
   font-size: 14px;
 }
 
 .flaggedReasons {
-  padding-top: 15px;
   margin-left: 24px;
+  margin-top: 10px;
 }
 
-.flaggedByReason {
+p.flaggedByReason {
   font-size: 1tpx;
+  margin: 0px;
+  line-height: 1.4;
 }

client/coral-admin/src/routes/Community/components/Community.js

@@ -0,0 +1,112 @@
+import React, {Component} from 'react';
+
+import CommunityMenu from './CommunityMenu';
+import People from './People';
+import FlaggedAccounts from './FlaggedAccounts';
+import RejectUsernameDialog from './RejectUsernameDialog';
+
+export default class Community extends Component {
+
+  state = {
+    searchValue: '',
+    timer: null
+  };
+
+  onKeyDownHandler = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this.search();
+    }
+  }
+
+  onSearchChange = (e) => {
+    const value = e.target.value;
+    this.setState((prevState) => {
+      prevState.searchValue = value;
+      clearTimeout(prevState.timer);
+      const fetchAccounts = this.props.fetchAccounts;
+      prevState.timer = setTimeout(() => {
+        fetchAccounts({value});
+      }, 350);
+      return prevState;
+    });
+  }
+
+  onHeaderClickHandler = (sort) => {
+    this.props.updateSorting(sort);
+    this.search();
+  }
+
+  onNewPageHandler = (page) => {
+    this.props.newPage(page);
+    this.search({page});
+  }
+
+  search(query = {}) {
+    const {community} = this.props;
+
+    this.props.fetchAccounts({
+      value: this.state.searchValue,
+      field: community.fieldPeople,
+      asc: community.ascPeople,
+      ...query
+    });
+  }
+
+  getTabContent(searchValue, props) {
+    const {community, root: {users}} = props;
+    const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
+
+    if (activeTab === 'people') {
+      return (
+        <People
+          isFetching={community.isFetchingPeople}
+          commenters={community.accounts}
+          searchValue={searchValue}
+          onSearchChange={this.onSearchChange}
+          error={community.errorPeople}
+          totalPages={community.totalPagesPeople}
+          page={community.pagePeople}
+          onKeyDown={this.onKeyDownHandler}
+          onHeaderClickHandler={this.onHeaderClickHandler}
+          onNewPageHandler={this.onNewPageHandler}
+        />
+      );
+    }
+
+    return (
+      <div>
+        <FlaggedAccounts
+          commenters={users}
+          showBanUserDialog={props.showBanUserDialog}
+          showSuspendUserDialog={props.showSuspendUserDialog}
+          showRejectUsernameDialog={props.showRejectUsernameDialog}
+          approveUser={props.approveUser}
+          rejectUsername={props.rejectUsername}
+          currentUser={this.props.currentUser}
+        />
+        <RejectUsernameDialog
+          open={community.rejectUsernameDialog}
+          handleClose={props.hideRejectUsernameDialog}
+          user={community.user}
+          rejectUsername={props.rejectUsername}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const {searchValue} = this.state;
+    const tab = this.getTabContent(searchValue, this.props);
+
+    return (
+      <div>
+        <CommunityMenu />
+        <div>
+          { tab }
+        </div>
+      </div>
+    );
+  }
+}
+

client/coral-admin/src/routes/Community/components/CommunityMenu.js

@@ -1,14 +1,9 @@
 import React from 'react';
 
 import styles from './styles.css';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
-
+import t from 'coral-framework/services/i18n';
 import {Link} from 'react-router';
 
-const lang = new I18n(translations);
-
 const CommunityMenu = () => {
   const flaggedPath = '/admin/community/flagged';
   const peoplePath = '/admin/community/people';
@@ -17,10 +12,10 @@ const CommunityMenu = () => {
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
         <div>
           <Link to={flaggedPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-            {lang.t('community.flaggedaccounts')}
+            {t('community.flaggedaccounts')}
           </Link>
           <Link to={peoplePath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-            {lang.t('community.people')}
+            {t('community.people')}
           </Link>
         </div>
       </div>

client/coral-admin/src/routes/Community/components/FlaggedAccounts.js

@@ -1,25 +1,17 @@
 import React from 'react';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
-const lang = new I18n(translations);
-
+import t from 'coral-framework/services/i18n';
 import styles from './Community.css';
-
-import Loading from './Loading';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
-import User from './components/User';
+import User from './User';
 
 const FlaggedAccounts = ({...props}) => {
-  const {commenters, isFetching} = props;
-  const hasResults = !isFetching && commenters && !!commenters.length;
-
-// if (commenter.status === 'PENDING' && commenter.actions.length > 0) {
+  const {commenters} = props;
+  const hasResults = commenters && !!commenters.length;
 
   return (
     <div className={styles.container}>
       <div className={styles.mainFlaggedContent}>
-        { isFetching && <Loading /> }
         {
           hasResults
           ? commenters.map((commenter, index) => {
@@ -30,11 +22,12 @@ const FlaggedAccounts = ({...props}) => {
               modActionButtons={['APPROVE', 'REJECT']}
               showBanUserDialog={props.showBanUserDialog}
               showSuspendUserDialog={props.showSuspendUserDialog}
+              showRejectUsernameDialog={props.showRejectUsernameDialog}
               approveUser={props.approveUser}
-              suspendUser={props.suspendUser}
+              currentUser={props.currentUser}
               />;
           })
-          : <EmptyCard>{lang.t('community.no-flagged-accounts')}</EmptyCard>
+          : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
         }
       </div>
     </div>