Merge pull request #764 from coralproject/update-readme-recipes

Update README with info about Recipes

.eslintignore

@@ -1,4 +1,5 @@
 dist
+docs
 client/lib
 **/*.html
 plugins/*
@@ -9,4 +10,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
+!plugins/talk-plugin-featured
 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,9 @@ 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
+!plugins/talk-plugin-featured
 
 **/node_modules/*

CONTRIBUTING.md

@@ -6,16 +6,46 @@ This document is a companion to help you approach contributing. If it does not d
 
 By contributing to this project you agree to the [Code of Conduct](https://coralproject.net/code-of-conduct.html).
 
-## Product Roadmap
+## What should I Contribute?
 
-You can view what the Coral Team is working on next here https://www.pivotaltracker.com/n/projects/1863625.
+There are at least three ways to contribute to Talk:
 
-If you'd like to see our longer term roadmap, [get in touch.](https://coralproject.net/contact.html)
+* Writing Code
+* Writing Docs
+* Providing Translations
 
+## Writing Code
 
-## Contribute to the documentation
+Conversation surrounding contributions begins in [issues](https://github.com/coralproject/talk/issues).
 
-Clear docs are a prerequisite for a successful open source project. We value non-code and code contributions equally.
+### When should I Create an Issue?
+
+File an issue as soon as you have an idea of something you'd like to contribute. We would love to hear what you're thinking and help refine the idea to make it into the Talk ecosystem.
+
+Please file issues if:
+
+* you would like to contribute to Talk Core.
+* you are building a Plugin that the current Plugin API doesn't support.
+* you are building a Plugin and want advice.
+
+### What should I include?
+
+Coral has adopted an iterative, agile development philosophy. All contributions that make it into the Talk repo should start with a story or this form:
+
+`As a [type of person] I'd like to be able to [do something] so that I can [get some result].`
+
+This exercise does two things:
+
+* allows us to ground our technical choices in a clear, simple product need.
+* expresses that product need in a way that doesn't imply a specific technical solution allowing for debate as to the best way to solve the problem.
+
+Please feel free to provide as much detail as possible when filing the issue but please do keep the initial issue specific to one need and try to avoid including technical or design solutions.
+
+If you have a specific technical or design solution in mind, please submit it as the first comment on the thread.
+
+## Contributing Documentation
+
+Clear docs are a prerequisite for a successful open source project. Contributing to the documentation is often more important than contributing to the code!
 
 We are looking for _documentarians_ to:
 
@@ -23,55 +53,34 @@ We are looking for _documentarians_ to:
 * create new / missing sections, and
 * take the lead in making sections, or the over all structure better.
 
-### But how?
+Information about how to update docs can be found in our [FAQ](faq.html#how-do-i-contribute-to-these-docs).
 
-* Our public docs site can be updated [here](https://github.com/coralproject/docs).
-* [Let us know](https://github.com/coralproject/talk/wiki/Contact-Us) if you'd like permission to update our wiki.
-* Update any of our .md docs files by following [this guide](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging).
-* Our API docs need to be kept honest. [Update them here](https://github.com/coralproject/talk/blob/master/docs/swagger.yaml).
+If you'd like to discuss a contribution, please [file an issue](https://github.com/coralproject/talk/issues) describing the changes you would like to see.
 
-## Integrate into your environment
+## Contributing Translations
 
-First, [set up a dev environment](https://github.com/coralproject/talk/blob/master/INSTALL.md). Please let us know how this goes!
+Talk's tranlations are stored in `.yml` files [here](https://github.com/coralproject/talk/tree/master/locales).
 
-Talk is designed to integrate into existing environments in a variety of ways:
+Translations can be submitted via pull request. If you do not use github, you can use 'en.yml' as a template and [email](https://coralproject.net/contact.html) the translations to us. We can import it into the repo.  
 
-* [Auth integrations](https://github.com/coralproject/talk/wiki/Security#authentication-strategies)
-* [Push assets into Talk](https://github.com/coralproject/talk/blob/master/routes/api/assets/index.js)
-* Monitoring Hooks (coming in 2017)
+## I want to contribute but I'm not sure what to do!
 
-If you're considering deploying Talk, [please let us know](https://github.com/coralproject/talk/wiki/Contact-Us)! We are quite literally doing this for you and want to help you succeed any way we can.
+If you want to contribute but don't have a clear idea of exactly what that may be, here are some resources that may help:
 
-If you are writing custom integration code in your fork of Talk, please consider keeping it generic and filing a Pull Request to contribute it back to the project! See our [forking and merging guidelines](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging) for more info.
+### Product Roadmap
 
-## Write some code
+Please visit our product roadmap here: https://www.pivotaltracker.com/n/projects/1863625. If you'd like to take on any of our scheduled tasks we'd be forever grateful!
 
-First, [set up a dev environment](https://github.com/coralproject/talk/blob/master/INSTALL.md). Please let us know how this goes!
+### Discussion Forum
 
-### Build a New Feature / Plugin
+If you'd like to discuss what we're up to, please visit or [community](https://community.coralproject.net/) or [contact us](https://coralproject.net/contact.html).
 
-Talk is beginning life as a Commenting Platform, but is architected to support many varieties of community engagement.
+### Integrations
 
-Please [contact us](https://github.com/coralproject/talk/wiki/Contact-Us) early and often if you'd like to help. We would love to hear your ideas for features and plugins and help you find a way to productively engage the project.
+Have a favorite analytics engine? Data science service? CMS? Auth platform? Deployment platform or pipeline? Pet project? Consider building a plugin to integrate them!
 
-To get an idea of where the Coral Team is going, see:
+### Favorite Features?
 
-* our [Slack channel](https://coralprojectslackin.herokuapp.com/), where you can talk directly with the Team and other community members,
-* our [current stories](https://www.pivotaltracker.com/n/projects/1863625), and
-* our [issues](https://github.com/coralproject/talk/issues).
+Do you have a favorite feature of an existing platform that's not yet been done in Talk? Sounds like Talk needs that feature.
 
-
-Examples:
-
-* [Add An Emoji Button to Comments](https://github.com/coralproject/talk/wiki/Add-An-Emoji-Button-to-Comments)
-
-
-### Work on the Core
-
-There is always more work to be done to make an application more stable, scaleable and secure.
-
-If you see issues in the code or have ideas on how we may improve Talk, please consider:
-
-* [contributing a fix](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging),
-* [filing an issue](https://github.com/coralproject/talk/issues), or
-* or otherwise [letting us know](https://github.com/coralproject/talk/wiki/Contact-Us).
+## Thanks!

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,21 @@ 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).
+
+### Recipes
+
+Recipes are plugin templates provided by the Coral Core team. Developers can use these recipes to build their own plugins. You can find all the Talk recipes here: https://github.com/coralproject/talk-recipes/
 
 ## Usage
 
@@ -17,7 +31,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 +54,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

@@ -9,11 +9,17 @@ const program = require('./commander');
 
 program
   .command('serve', 'serve the application')
+  .command('settings', 'interact with the application settings')
   .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('plugins', 'provides utilities for interacting with the plugin system')
+  .command('migration', 'provides utilities for migrating the database')
+  .command(
+    'plugins',
+    'provides utilities for interacting with the plugin system'
+  )
   .parse(process.argv);
 
 /**
@@ -23,7 +29,10 @@ program
  * labled with the PID written out by the parent process.
  */
 process.once('exit', () => {
-  if ((program.runningCommand.killed === false) && (program.runningCommand.exitCode === null)) {
+  if (
+    program.runningCommand.killed === false &&
+    program.runningCommand.exitCode === null
+  ) {
     program.runningCommand.kill('SIGINT');
   }
 });

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-plugins

@@ -8,13 +8,14 @@
 // https://yarnpkg.com/
 
 const program = require('./commander');
+const inquirer = require('inquirer');
 
 // Make things colorful!
 require('colors');
 const emoji = require('node-emoji');
 
 const dir = process.cwd();
-const fs = require('fs');
+const fs = require('fs-extra');
 const path = require('path');
 const spawn = require('cross-spawn');
 const semver = require('semver');
@@ -272,10 +273,128 @@ async function reconcilePluginDeps({skipLocal, skipRemote, dryRun, upgradeRemote
   console.log(`✨ Done in ${totalTime}s.`);
 }
 
+async function createSeedPlugin() {
+  const pluginsDir = path.join(__dirname, 'plugins');
+
+  function pluginNameExists(pluginName) {
+    const pluginNames = fs.readdirSync(pluginsDir);
+    return !!pluginNames
+      .filter((pn) => pn === pluginName).length;
+  }
+
+  let answers = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'pluginName',
+      message: 'Plugin Name:',
+      validate: (input) => {
+
+        if (pluginNameExists(input)) {
+          return 'Please, choose another name. That name already exists';
+        }
+
+        if (input && input.length > 0) {
+          return true;
+        }
+
+        return 'Plugin Name is required.';
+      }
+    },
+    {
+      type: 'confirm',
+      name: 'server',
+      message: 'Is this plugin extending the server capabilities?'
+    },
+    {
+      type: 'confirm',
+      name: 'client',
+      message: 'Is this plugin extending the client capabilities?'
+    },
+    {
+      type: 'confirm',
+      name: 'addPluginsJson',
+      message: 'Should we add it to the plugins.json?'
+    }
+  ]);
+
+  //==============================================================================
+  // Creating plugin seed
+  //==============================================================================
+
+  const seedPlugin = path.join(__dirname, 'bin/templates/plugin');
+  const newPluginPath = path.join(pluginsDir, answers.pluginName);
+
+  if (fs.existsSync(seedPlugin)) {
+
+    if (answers.server && answers.client) {
+
+      // This is a server-side and client-side plugin!, let's copy the template
+      fs.copySync(seedPlugin, newPluginPath);
+    } else  {
+
+      fs.copySync(seedPlugin, newPluginPath, {filter: (p) => {
+
+        // Allowing plugin folder and files with no subfolders
+        const rootRx = /plugin$|plugin\/[^/]*(\.).{2,3}/igm;
+        if (rootRx.test(p) && (fs.lstatSync(p).isDirectory() || fs.lstatSync(p).isFile())) {
+          return true;
+        }
+
+        // If it's a client-side plugin, copying client folder
+        if (answers.client) {
+          return /client/.test(p);
+        }
+
+        // If it's a server-side plugin, copying server folder
+        if (answers.server) {
+          return /server/.test(p);
+        }
+
+      }});
+    }
+
+    // Let's add this to the plugins.json
+    if (answers.addPluginsJson) {
+      const pluginsJson = path.join(dir, 'plugins.json');
+
+      fs.readJson(pluginsJson)
+        .then((j) => {
+
+          // This is a client-side plugin, let's push this.
+          if (answers.client) {
+            j.client.push(answers.pluginName);
+
+            const output = JSON.stringify(j, null, 2);
+            fs.writeFileSync(pluginsJson, output);
+          }
+
+          // This is a server-side plugin, let's push this.
+          if (answers.server) {
+            j.server.push(answers.pluginName);
+
+            const output = JSON.stringify(j, null, 2);
+            fs.writeFileSync(pluginsJson, output);
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    }
+
+    console.log(`✨ Yay! Plugin created! Find your plugin: ${answers.pluginName} in the ./plugins folder`);
+  }
+
+}
+
 //==============================================================================
 // Setting up the program command line arguments.
 //==============================================================================
 
+program
+  .command('create')
+  .description('creates a seed plugin')
+  .action(createSeedPlugin);
+
 program
   .command('list')
   .description('')

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-settings

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+
+const program = require('./commander');
+const inquirer = require('inquirer');
+const mongoose = require('../services/mongoose');
+const SettingsService = require('../services/settings');
+const util = require('./util');
+
+// Register the shutdown criteria.
+util.onshutdown([() => mongoose.disconnect()]);
+
+/**
+ * Change the organization name
+ */
+async function changeOrgName() {
+  try {
+    let settings = await SettingsService.retrieve();
+
+    let {organizationName} = await inquirer.prompt([
+      {
+        name: 'organizationName',
+        message: 'Organization Name',
+        default: settings.organizationName
+      }
+    ]);
+
+    if (settings.organizationName !== organizationName) {
+      settings.organizationName = organizationName;
+
+      await SettingsService.update(settings);
+
+      console.log('Settings were updated.');
+    } else {
+      console.log('No update needed, no change was made.');
+    }
+  } catch (err) {
+    console.error(err);
+    util.shutdown(1);
+  }
+
+  util.shutdown();
+}
+
+//==============================================================================
+// Setting up the program command line arguments.
+//==============================================================================
+
+program
+  .command('change-org-name')
+  .description('change the organization name')
+  .action(changeOrgName);
+
+program.parse(process.argv);
+
+// If there is no command listed, output help.
+if (!process.argv.slice(2).length) {
+  program.outputHelp();
+  util.shutdown();
+}

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;
   }

bin/templates/plugin/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

bin/templates/plugin/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

bin/templates/plugin/client/components/MyPluginComponent.css

@@ -0,0 +1,27 @@
+.myPluginContainer {
+    padding: 10px;
+    background: #f0f0f0;
+    border: 1px solid #d6d6d6;
+    margin: 10px 0;
+    text-align: center;
+    border-radius: 3px;
+}
+
+.logo {
+  position: block;
+  animation: spin 2s infinite ease;
+  animation-delay: 1s;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.description {
+  color: #444444;
+}

bin/templates/plugin/client/components/MyPluginComponent.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {CoralLogo} from 'plugin-api/beta/client/components/ui';
+import styles from './MyPluginComponent.css';
+
+class MyPluginComponent extends React.Component {
+  render() {
+    return (
+      <div className={styles.myPluginContainer}>
+        <CoralLogo className={styles.logo}/>
+        <div className={styles.description}>
+          <h3>Plugin created by Talk CLI</h3>
+
+          <small>
+            To read more about plugins check{' '}
+            <a href="https://coralproject.github.io/talk/plugins-client.html">
+              our docs and guides!
+            </a>
+          </small>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MyPluginComponent;

bin/templates/plugin/client/index.js

@@ -0,0 +1,26 @@
+
+/**
+  This is a client index example file and it could look like this:
+  
+  ```
+  import LoveButton from './components/LoveButton';
+
+  export default {
+    slots: {
+      commentReactions: [LoveButton]
+    },
+    reducer,
+    translations
+  };
+  ```
+
+  To read more info on how to build client plugins. Please, go to: https://coralproject.github.io/talk/plugins-client.html
+ */
+
+import MyPluginComponent from './components/MyPluginComponent';
+
+export default {
+  slots: {
+    stream: [MyPluginComponent]
+  }
+};

bin/templates/plugin/client/translations.yml

@@ -0,0 +1,15 @@
+# 
+#  This file is for translations and they should look like this:
+#
+#
+#  ```
+#   en:
+#    coral-plugin-respect:
+#     respect: Respect
+#     respected: Respected
+#   es:
+#    coral-plugin-respect:
+#     respect: Respetar
+#     respected: Respetado
+#  ```
+# 

bin/templates/plugin/index.js

@@ -0,0 +1 @@
+module.exports = {};

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;
+  }
+}