Merge pull request #516 from coralproject/remove-rejected-comments

let ApolloClient know which types are interfaces

.dockerignore

@@ -1,3 +1,18 @@
+# excluded because we'll likely need to rebuild this.
 node_modules
+
+# scripts are used during development and testing, not
+# production.
+scripts
+
+# documentation should not be visable in production.
+docs
+
+# static assets are rebuild in the docker container.
+dist
+
+# tests are not run in the docker container.
 test
+
+# we won't use the .git folder in production.
 .git

.editorconfig

@@ -2,14 +2,11 @@ root = true
 
 [*]
 indent_style = space
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[{package.json,.*rc,*.yml}]
-indent_style = space
-indent_size = 2
-
 [*.md]
 trim_trailing_whitespace = false

.eslintignore

@@ -1,3 +1,7 @@
 dist
 client/lib
 **/*.html
+plugins/*
+!plugins/coral-plugin-facebook-auth
+!plugins/coral-plugin-respect
+node_modules

.eslintrc.json

@@ -4,6 +4,9 @@
         "node": true
     },
     "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 2017
+    },
     "rules": {
         "indent": ["error",
             2

.gitignore

@@ -1,14 +1,23 @@
 node_modules
-npm-debug.log*
+
 dist
-!dist/coral-admin
-dist/coral-admin/bundle.js
-test/e2e/reports
-.DS_Store
-*.iml
-*.swp
+
+npm-debug.log*
 dump.rdb
+
 .env
 *.cfg
+
 .idea/
+*.swp
+
+test/e2e/reports
 coverage/
+
+plugins.json
+plugins/*
+!plugins/coral-plugin-facebook-auth
+!plugins/coral-plugin-respect
+!plugins/coral-plugin-offtopic
+
+**/node_modules/*

.nodemon.json

@@ -1,5 +1,5 @@
 {
   "verbose": true,
-  "ignore": ["test/*", "client/*", "dist/*"],
+  "ignore": ["test/*", "client/*", "dist/*", "plugins/*/client"],
   "ext": "js,json,graphql"
 }

CONTRIBUTING.md

@@ -10,10 +10,11 @@ By contributing to this project you agree to the [Code of Conduct](https://coral
 
 You can view what the Coral Team is working on next here https://www.pivotaltracker.com/n/projects/1863625.
 
-You can view product ideas and our longer term roadmap here https://trello.com/b/ILND751a/talk.
+If you'd like to see our longer term roadmap, [get in touch.](https://coralproject.net/contact.html)
 
 
 ## Contribute to the documentation
+
 Clear docs are a prerequisite for a successful open source project. We value non-code and code contributions equally.
 
 We are looking for _documentarians_ to:
@@ -55,7 +56,7 @@ Please [contact us](https://github.com/coralproject/talk/wiki/Contact-Us) early
 
 To get an idea of where the Coral Team is going, see:
 
-* our [product/design Trello board](https://trello.com/b/ILND751a/talk),
+* 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).
 

Dockerfile

@@ -1,23 +1,25 @@
-FROM node:7.6
-
-# Add node-gyp for bcrypt build support
-RUN yarn global add node-gyp
+FROM node:7.8
 
 # Create app directory
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app
 
 # Setup the environment
-ENV NODE_ENV production
 ENV PATH /usr/src/app/bin:$PATH
 ENV TALK_PORT 5000
 EXPOSE 5000
 
-# Install app dependencies
-COPY package.json yarn.lock /usr/src/app/
-RUN yarn install --production
-
 # Bundle app source
 COPY . /usr/src/app
 
-CMD [ "yarn", "start" ]
+# Install app dependencies and build static assets.
+RUN yarn install --frozen-lockfile && \
+    cli plugins reconcile && \
+    yarn build && \
+    yarn install --production && \
+    yarn cache clean
+
+# Ensure the runtime of the container is in production mode.
+ENV NODE_ENV production
+
+CMD ["yarn", "start"]

Dockerfile.onbuild

@@ -0,0 +1,14 @@
+FROM coralproject/talk:latest
+
+# Bundle app source
+ONBUILD COPY . /usr/src/app
+
+# At this stage, we need to install the development dependancies again because
+# we need to have webpack available. We then build the new dependancies and
+# clear out the development dependancies again. After this we of course need to
+# clear out the yarn cache, this saves quite a lot of size.
+ONBUILD RUN NODE_ENV=development yarn install --frozen-lockfile && \
+            NODE_ENV=production  cli plugins reconcile && \
+            NODE_ENV=production  yarn build && \
+            NODE_ENV=production  yarn install --production --force && \
+            yarn cache clean

INSTALL.md

@@ -1,37 +1,204 @@
+## Contents
+
+- [Installation](#installation) - install the application on a machine
+	- [Via Docker](#installation-from-docker)
+	- [Via Source](#installation-from-source)
+- [Setup](#setup) - setup the application for first use
+- [Usage](#usage) - connect the application to a website
+
 # Installation
 
 ## Requirements
 
-### System
-
 - Any flavour of Linux, OSX or Windows
 - 1GB memory (minimum)
 - 5GB storage (minimum)
+- [MongoDB](https://www.mongodb.com/) v3.4 or later
+- [Redis](https://redis.io/) v3.2 or later
+- SSL Certificate
+  - This application assumes that you will be serving this application in a
+    production environment, and therefore requires that you serve it behind a
+    webserver with a valid SSL certificate. This is chosen in order to secure
+    user's sessions.
+
+## Installation From Docker
+
+We currently support packaging the Talk application via Docker, which automates
+the dependency install and asset build process. This is the recommended way to
+deploy the application when used in production.
+
+Available as [coralproject/talk](https://hub.docker.com/r/coralproject/talk/) on Docker Hub.
+
+Images are tagged using the following notation:
+
+- `x` (where `x` is the major version number): any minor or patch updates will be included in this. If you're ok getting
+  new features occasionally and all the bug fixes, this is the tag for you.
+- `x.y` (where `y` is the minor version number): any patch updates will be
+  included with this tag. If you like getting fixes and having features change
+  only when you want, this is the tag for you. **(recommended)**
+- `x.y.z` (where `z` is the patch version): this tag never gets updated, and
+  essentially freezes your version, this should only be used when you are either
+  extending Talk or are sure of a specific version you want to freeze.
+
+We provide tags with `*-onbuild` that can be used for easy plugin integration and
+acts as a customization endpoint. Instructions are provided in the `PLUGINS.md`
+document as to how to use it.
+
+### Requirements
+
+There are some runtime requirements for running Talk for Docker:
+
+- [Docker](https://www.docker.com/) v1.13.0 or later
+- [Docker Compose](https://docs.docker.com/compose/) v1.10.0 or later
+
+_Please be sure to check the versions of these requirements. Incorrect versions
+of these may lead to unexpected errors!_
+
+### Installing
+
+An example docker-compose.yml:
+
+```yaml
+version: '2'
+services:
+  talk:
+    image: coralproject/talk:1.5
+    restart: always
+    ports:
+      - "5000:5000"
+    depends_on:
+      - mongo
+      - redis
+    environment:
+      - TALK_MONGO_URL=mongodb://mongo/talk
+      - TALK_REDIS_URL=redis://redis
+  mongo:
+    image: mongo:3.2
+    restart: always
+    volumes:
+      - mongo:/data/db
+  redis:
+    image: redis:3.2
+    restart: always
+    volumes:
+      - redis:/data
+volumes:
+  mongo:
+    external: false
+  redis:
+    external: false
+```
+
+At this stage, you should refer to the `README.md` for configuration variables
+that are specific to your installation. Some pre-defined fields have been filled
+in the above example which are consistent with Docker Compose naming conventions
+for [Docker Links](https://docs.docker.com/compose/networking/#links).
+
+### Scaling
+
+If you are interested in splitting apart services, you can simply adjust the
+command being executed in the container to optimize for your use case. An
+example would be if you wanted to run the API server and the job processor
+on different machines. You can achieve this easily with docker compose:
+
+```yaml
+version: '2'
+services:
+  talk-api:
+    image: coralproject/talk:1.5
+    command: cli serve
+    restart: always
+    ports:
+      - "5000:5000"
+    depends_on:
+      - mongo
+      - redis
+    environment:
+      - TALK_MONGO_URL=mongodb://mongo/talk
+      - TALK_REDIS_URL=redis://redis
+  talk-jobs:
+    image: coralproject/talk:1.5
+    command: cli jobs process
+    restart: always
+    ports:
+      - "5001:5000"
+    depends_on:
+      - mongo
+      - redis
+    environment:
+      - TALK_MONGO_URL=mongodb://mongo/talk
+      - TALK_REDIS_URL=redis://redis
+  mongo:
+    image: mongo:3.2
+    restart: always
+    volumes:
+      - mongo:/data/db
+  redis:
+    image: redis:3.2
+    restart: always
+    volumes:
+      - redis:/data
+volumes:
+  mongo:
+    external: false
+  redis:
+    external: false
+```
+
+Note that the only difference is in the `command` key. From this, you are able
+to discretely control which modules are running in order to have the maximum
+flexibility when managing your application.
+
+### Running
+
+If you're using docker compose:
+
+```bash
+# Start the services using compose
+docker-compose up -d
+```
+
+If you're using plain docker:
+
+```bash
+docker run -d -P coralproject/talk:latest
+```
 
 ## Installation From Source
 
+This provides information on how to setup the application from source. Note that
+this is not recommended for production deploys, but will work for development
+and testing purposes.
+
 ### Requirements
 
 There are some runtime requirements for running Talk from source:
 
-- [Node](https://nodejs.org/) v7 or later
-- [MongoDB](https://www.mongodb.com/) v3.4 or later
-- [Redis](https://redis.io/) v3.2 or later
-- [Yarn](https://yarnpkg.com/) v0.19.1 or later
+- [Node](https://nodejs.org/) ~7.8
+- [Yarn](https://yarnpkg.com/) ^0.22.0
 
-_Please be sure to check the versions of these requirements. Insufficient versions of these may lead to unexpected errors!_
+_Please be sure to check the versions of these requirements. Incorrect versions
+of these may lead to unexpected errors!_
 
 ### Installing
 
+#### Download
+
+It is highly recommended that you download a released version as the code
+available in `master` may not be stable. You can download the latest release
+from the [releases page](https://github.com/coralproject/talk/releases).
+
+You can also clone the git repository via:
+
 ```bash
-# Download the tarball containing the repository
-curl -L https://github.com/coralproject/talk/tarball/master -o coralproject-talk.tar.gz
+git clone https://github.com/coralproject/talk.git
+```
 
-# Untar that file and change to that directory
-tar xpf coralproject-talk.tar.gz
-mv coralproject-talk-* coralproject-talk
-cd coralproject-talk
+#### Building
 
+We now have to install the dependencies and build the static assets.
+
+```bash
 # Install package dependancies
 yarn
 
@@ -39,6 +206,17 @@ yarn
 yarn build
 ```
 
+After you create/modify the `plugins.json` (refer to `PLUGINS.md` for plugin
+docs) file, you can re-run the following to install their dependencies:
+
+```bash
+# Reconcile plugins
+./bin/cli plugins reconcile
+
+# Build static files
+yarn build
+```
+
 ### Running
 
 Refer to the `README.md` file for required configuration variables to add to the
@@ -50,45 +228,48 @@ You can start the server after configuring the server using the command:
 yarn start
 ```
 
+This will setup the server to serve everything on a single node.js process and
+is designed to be used in production.
+
 You can see other scripts we've made available by consulting the `package.json`
 file under the `scripts` key including:
 
 - `yarn test` run unit tests
 - `yarn e2e` run end to end tests
 - `yarn build-watch` watch for changes to client files and build static assets
-- `yarn dev-start` watch for changes to server files and reload the server
+- `yarn dev-start` watch for changes to server files and reload the server while
+  also sourcing a `.env` file in your local directory for configuration
 
-## Installation From Docker Hub
+# Setup
 
-### Requirements
+Once you've installed Talk (either via Docker or source), you still need to
+setup the application. If you are unfamiliar with any terminoligy used in the
+setup process, refer to the `TERMINOLOGY.md` document.
 
-There are some runtime requirements for running Talk for Docker:
+## Via Web
 
-- [MongoDB](https://www.mongodb.com/) v3.2 or later
-- [Redis](https://redis.io/) v3.2 or later
-- [Docker](https://www.docker.com/) v1.13.0 or later
-- [Docker Compose](https://docs.docker.com/compose/) v1.10.0 or later
+If you want to perform your setup via the web, you can navigate to your
+installation of Talk at the path `/admin/install`. There you will be asked a
+series of questions for your installation.
 
-_Please be sure to check the versions of these requirements. Insufficient versions of these may lead to unexpected errors!_
+## Via CLI
 
-### Installing
+If you want to perform your setup through the terminal, you can simply run:
 
 ```bash
-# Create a directory for talk
-mkdir coralproject-talk
-cd coralproject-talk
-
-# Download the docker-compose.yml file from the repository
-curl -LO https://raw.githubusercontent.com/coralproject/talk/master/docker-compose.yml
+cli setup
 ```
 
-At this stage, you should refer to the `README.md` file for required
-configuration variables to add to the environment key for the `talk` service
-listed in the `docker-compose.yml` file.
+And follow the instructions to perform initial setup and create your first user
+account.
 
-### Running
 
-```bash
-# Start the services using compose
-docker-compose up -d
-```
+# Usage
+
+After setup is complete, you can then refer to the `/admin/configure` path to
+get the embed code that you can copy/paste onto your blog or website in order to
+start using Talk.
+
+_In order for the embed to work correctly, you will need to whitelist the domain
+that is allowed to embed your site on the `/admin/configure` page, failure to do
+so will result in the comment stream not loading._

PLUGINS.md

@@ -0,0 +1,436 @@
+# 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!]
+}
+```
+
+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: `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!]
+  }
+  `,
+  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;
+        }
+      }
+    }
+  }
+};
+
+```

README.md

@@ -1,6 +1,6 @@
 # Talk [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
 
-A commenting platform from [The Coral Project](https://coralproject.net). Talk enters a closed beta in March 2017, but you can download the code for our alpha here. [Read more about Talk here.](https://coralproject.net/products/talk.html)
+Talk is currently in Beta! [Read more about Talk here.](https://coralproject.net/products/talk.html)
 
 Third party licenses are available via the `/client/3rdpartylicenses.txt`
 endpoint when the server is running with built assets.
@@ -28,12 +28,6 @@ The Talk application looks for the following configuration values either as envi
 secure cookies.
 - `TALK_ROOT_URL` (*required*) - root url of the installed application externally
 available in the format: `<scheme>://<host>` without the path.
-
-- `TALK_FACEBOOK_APP_ID` (*required for login via fb*) - the Facebook app id for your Facebook
-Login enabled app.
-- `TALK_FACEBOOK_APP_SECRET` (*required for login via fb*) - the Facebook app secret for your
-Facebook Login enabled app.
-
 - `TALK_SMTP_EMAIL` (*required for email*) - the address to send emails from using the
   SMTP provider.
 - `TALK_SMTP_USERNAME` (*required for email*) - username of the SMTP provider you are using.
@@ -41,6 +35,9 @@ Facebook Login enabled app.
 - `TALK_SMTP_HOST` (*required for email*) - SMTP host url with format `smtp.domain.com`.
 - `TALK_SMTP_PORT` (*required for email*) - SMTP port.
 - `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - Defaults to `FALSE`. When `TRUE`, disables the dynamic setup endpoint.
+- `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
 
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.

app.js

@@ -3,7 +3,8 @@ const bodyParser = require('body-parser');
 const morgan = require('morgan');
 const path = require('path');
 const helmet = require('helmet');
-const passport = require('./services/passport');
+const {passport} = require('./services/passport');
+const plugins = require('./services/plugins');
 const session = require('express-session');
 const enabled = require('debug').enabled;
 const RedisStore = require('connect-redis')(session);
@@ -34,6 +35,7 @@ app.use(helmet({
 }));
 app.use(bodyParser.json());
 app.use('/client', express.static(path.join(__dirname, 'dist')));
+app.use('/public', express.static(path.join(__dirname, 'public')));
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
@@ -45,16 +47,15 @@ const session_opts = {
   secret: process.env.TALK_SESSION_SECRET,
   httpOnly: true,
   rolling: true,
-  saveUninitialized: false,
-  resave: false,
+  saveUninitialized: true,
+  resave: true,
   unset: 'destroy',
   name: 'talk.sid',
   cookie: {
     secure: false,
-    maxAge: 36000000, // 1 hour for expiry.
+    maxAge: 8.64e+7, // 24 hours for session token expiry
   },
   store: new RedisStore({
-    ttl: 1800,
     client: redis.createClient(),
   })
 };
@@ -75,6 +76,17 @@ app.use(session(session_opts));
 // PASSPORT MIDDLEWARE
 //==============================================================================
 
+const passportDebug = require('debug')('talk:passport');
+
+// Install the passport plugins.
+plugins.get('server', 'passport').forEach((plugin) => {
+  passportDebug(`added plugin '${plugin.plugin.name}'`);
+
+  // Pass the passport.js instance to the plugin to allow it to inject it's
+  // functionality.
+  plugin.passport(passport);
+});
+
 // Setup the PassportJS Middleware.
 app.use(passport.initialize());
 app.use(passport.session());

bin/cli

@@ -13,6 +13,7 @@ program
   .command('setup', 'setup the application')
   .command('jobs', 'work with the job queues')
   .command('users', 'work with the application auth')
+  .command('plugins', 'provides utilities for interacting with the plugin system')
   .parse(process.argv);
 
 /**

bin/cli-plugins

@@ -0,0 +1,298 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+// Interface heavily inspired by the yarn package manager:
+// https://yarnpkg.com/
+
+const program = require('./commander');
+
+// Make things colorful!
+require('colors');
+const emoji = require('node-emoji');
+
+const dir = process.cwd();
+const fs = require('fs');
+const path = require('path');
+const spawn = require('cross-spawn');
+const semver = require('semver');
+const resolve = require('resolve');
+const {plugins, itteratePlugins, isInternal} = require('../plugins');
+
+function existsInNodeModules(name) {
+  try {
+    resolve.sync(name, {basedir: dir});
+
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function versionMatch(name, version) {
+  try {
+    let matched = false;
+
+    resolve.sync(name, {
+      basedir: dir,
+      packageFilter: (pkg) => {
+        if (pkg && pkg.version && semver.satisfies(pkg.version, version)) {
+          matched = true;
+        }
+
+        return pkg;
+      }
+    });
+
+    return matched;
+  } catch (e) {
+    return false;
+  }
+}
+
+const EXTERNAL = /^\w[a-z\-0-9\.]+$/; // Match "react", "path", "fs", "lodash.random", etc.
+
+function reconcilePackages({quiet = false, upgradeRemote = false}) {
+  const fetchable = [];
+  const local = [];
+  const upgradable = [];
+
+  if (!quiet) {
+    console.log();
+    console.log(' +local     (l)  packages in your project');
+    console.log(' +external  (e)  packages are external');
+    console.log(' +outofdate (oe) packages are external but are out of date');
+    console.log(' +missing   (m)  packages are not found');
+    console.log();
+  }
+
+  for (let i in plugins) {
+    let section = itteratePlugins(plugins[i]);
+
+    for (let j in section) {
+      let {name, version} = section[j];
+
+      let namespaced = name.charAt(0) === '@';
+      let dep = name.split('/')
+        .slice(0, namespaced ? 2 : 1)
+        .join('/');
+
+      // Ignore relative modules, which aren't installed by NPM
+      if (!dep.match(EXTERNAL) && !namespaced) {
+        return;
+      }
+
+      if (isInternal(dep)) {
+        if (!quiet) {
+          console.log(` l  ${name}`);
+        }
+
+        local.push({name, version});
+        continue;
+      }
+
+      if (!existsInNodeModules(dep)) {
+        if (!quiet) {
+          console.log(` m  ${name}`);
+        }
+        fetchable.push({name, version});
+      } else if (!versionMatch(dep, version)) {
+
+        // A plugin was found, yet the current version does not match the
+        // current version installed. We should warn if upgradeRemote is
+        // not enabled that it is currently not supported.
+        if (!upgradeRemote) {
+          if (!quiet) {
+            console.warn(` oe ${name} (package upgrade may be required)`.bgRed);
+          }
+
+          continue;
+        }
+
+        console.log(` oe ${name} (package upgrade may be required)`);
+
+        upgradable.push({name, version});
+      } else {
+        if (!quiet) {
+          console.log(` e  ${name}`);
+        }
+
+        if (upgradeRemote) {
+          upgradable.push({name, version});
+        }
+      }
+    }
+  }
+
+  if (!quiet) {
+    console.log();
+  }
+
+  return {local, fetchable, upgradable};
+}
+
+async function reconcileRemotePlugins({skipLocal, dryRun, upgradeRemote}) {
+  console.log(`\n[${skipLocal ? '1/2' : '2/3'}] ${emoji.get('mag')} Reconciling plugins...`.yellow);
+  const {fetchable, upgradable} = reconcilePackages({upgradeRemote});
+
+  console.log(`[${skipLocal ? '2/2' : '3/3'}] ${emoji.get('truck')} Fetching plugins...\n`.yellow);
+
+  if (fetchable.length > 0) {
+
+    console.log(`$ yarn add --ignore-scripts ${fetchable.map(({name, version}) => `${name}@${version}`.cyan)}`);
+
+    if (!dryRun) {
+
+      let args = [
+        'add',
+        '--ignore-scripts',
+        ...fetchable.map(({name, version}) => `${name}@${version}`)
+      ];
+
+      let output = spawn.sync('yarn', args, {
+        stdio: ['ignore', 'pipe', 'inherit']
+      });
+
+      if (output.status) {
+        throw new Error('Could not install external plugins, errors occured during install');
+      }
+
+      console.log(output.stdout.toString());
+    }
+  }
+
+  if (upgradable.length > 0) {
+    console.log(`$ yarn upgrade ${upgradable.map(({name, version}) => `${name}@${version}`.cyan)}`);
+
+    if (!dryRun) {
+
+      let args = [
+        'upgrade',
+        ...upgradable.map(({name, version}) => `${name}@${version}`)
+      ];
+
+      let output = spawn.sync('yarn', args, {
+        stdio: ['ignore', 'pipe', 'inherit']
+      });
+
+      if (output.status) {
+        throw new Error('Could not install external plugins, errors occured during install');
+      }
+
+      console.log(output.stdout.toString());
+    }
+  }
+
+  return {upgradable, fetchable};
+}
+
+async function reconcileLocalPlugins({skipRemote, dryRun}) {
+  console.log(`\n[${skipRemote ? '1/1' : '1/3'}] ${emoji.get('pick')} Installing local plugin dependencies...\n`.yellow);
+  const {local} = reconcilePackages({quiet: true});
+
+  for (let i in local) {
+    let {name} = local[i];
+
+    if (!fs.existsSync(path.join(dir, 'plugins', name, 'package.json'))) {
+      continue;
+    }
+
+    let wd = path.join(dir, 'plugins', name);
+
+    console.log(`$ cd ${wd.cyan} && yarn`);
+
+    if (!dryRun) {
+      let args = [];
+
+      let output = spawn.sync('yarn', args, {
+        stdio: ['ignore', 'pipe', 'inherit'],
+        cwd: wd
+      });
+
+      if (output.status) {
+        throw new Error('Could not install local plugin dependencies, errors occured during install');
+      }
+
+      console.log(output.stdout.toString());
+    }
+  }
+}
+
+// This traverses the local plugins and installs any dependencies listed there,
+// this only is really needed for plugins that are installed via docker because
+// core plugins will have their dependencies already included in core.
+async function reconcilePluginDeps({skipLocal, skipRemote, dryRun, upgradeRemote}) {
+  let startTime = new Date();
+
+  // We don't need to do anything if we skip everything....
+  if (skipLocal && skipRemote) {
+    return;
+  }
+
+  // Traverse local plugins and install dependencies if enabled.
+  if (!skipLocal) {
+    await reconcileLocalPlugins({skipRemote, dryRun});
+  }
+
+  // Locate any external plugins and install them.
+  if (!skipRemote) {
+    let results = [];
+    try {
+      results = await reconcileRemotePlugins({skipLocal, skipRemote, dryRun, upgradeRemote});
+    } catch (e) {
+      throw e;
+    }
+
+    let status;
+    if (dryRun) {
+      status = '[dry-run] success'.green;
+    } else {
+      status = 'success'.green;
+    }
+
+    let message;
+    if (results.upgradable.length === 0 && results.fetchable.length === 0) {
+      message = 'Already up-to-date.';
+    } else if (results.upgradable.length === 0) {
+      message = `Fetched ${results.fetchable.length} new plugins.`;
+    } else if (results.fetchable.length === 0) {
+      message = `Upgraded ${results.upgradable.length} new plugins.`;
+    } else {
+      message = `Fetched ${results.fetchable.length} new plugins, upgraded ${results.upgradable.length} plugins.`;
+    }
+
+    console.log(`\n${status} ${message}`);
+  }
+
+  let endTime = new Date();
+
+  let totalTime = ((endTime.getTime() - startTime.getTime()) / 1000).toFixed(2);
+  console.log(`✨ Done in ${totalTime}s.`);
+}
+
+//==============================================================================
+// Setting up the program command line arguments.
+//==============================================================================
+
+program
+  .command('list')
+  .description('')
+  .action(reconcilePackages);
+
+program
+  .command('reconcile')
+  .description('reconciles local plugin dependencies and downloads external plugins')
+  .option('-u, --upgrade-remote', 'upgrades remote dependencies')
+  .option('-d, --dry-run', 'does not actually change anything on the filesystem acts only as a simulation')
+  .option('--skip-local', 'skips the local dependancy reconciliation')
+  .option('--skip-remote', 'skips the remote plugin reconciliation')
+  .action(reconcilePluginDeps);
+
+program.parse(process.argv);
+
+// If there is no command listed, output help.
+if (!process.argv.slice(2).length) {
+  program.outputHelp();
+}

circle.yml

@@ -1,6 +1,6 @@
 machine:
   node:
-    version: 7.6
+    version: 7.9
   services:
     - docker
     - redis
@@ -20,6 +20,7 @@ dependencies:
     # - sudo service mongod restart
 
     # Install node dependencies.
+    - yarn --version
     - yarn
   cache_directories:
     - ~/.cache/yarn
@@ -47,9 +48,9 @@ deployment:
   release:
     tag: /v[0-9]+(\.[0-9]+)*/
     commands:
-      - bash ./scripts/deploy.sh
+      - bash ./scripts/docker.sh deploy
 
   latest:
     branch: master
     commands:
-      - bash ./scripts/deploy.sh
+      - bash ./scripts/docker.sh deploy

client/.babelrc

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

client/coral-admin/README.md

@@ -1,23 +0,0 @@
-
-# Coral Admin
-
-This app handles moderation for Talk (and maybe more later on)
-
-## Installation
-
-    $ yarn install
-    $ cp config.sample.json config.json
-
-Then change `config.json` to adjust it to your project
-
-## Building for production
-
-    $ yarn build
-
-The public folder has everything you need for deployment. You can just copy that folder to your favorite static web server
-
-## Development
-
-    $ yarn start
-
-A development server will be running at http://localhost:4132

client/coral-admin/src/AppRouter.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import {Router, Route, IndexRoute, IndexRedirect, browserHistory} from 'react-router';
 
-import Streams from 'containers/Streams/Streams';
+import Stories from 'containers/Stories/Stories';
 import Configure from 'containers/Configure/Configure';
 import LayoutContainer from 'containers/LayoutContainer';
 import InstallContainer from 'containers/Install/InstallContainer';
+
+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';
 
 const routes = (
@@ -18,9 +21,21 @@ const routes = (
       <IndexRoute component={Dashboard} />
       <Route path='community' component={CommunityContainer} />
       <Route path='configure' component={Configure} />
-      <Route path='streams' component={Streams} />
+      <Route path='stories' component={Stories} />
       <Route path='dashboard' component={Dashboard} />
 
+      {/* Community Routes */}
+
+      <Route path='community' component={CommunityLayout}>
+        <Route path='flagged' components={CommunityContainer}>
+          <Route path=':id' components={CommunityContainer} />
+        </Route>
+        <Route path='people' components={CommunityContainer}>
+          <Route path=':id' components={CommunityContainer} />
+        </Route>
+        <IndexRedirect to='flagged' />
+      </Route>
+
       {/* Moderation Routes */}
 
       <Route path='moderate' component={ModerationLayout}>

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

@@ -2,15 +2,28 @@ import * as actions from '../constants/auth';
 import coralApi from 'coral-framework/helpers/response';
 
 // Log In.
-export const handleLogin = (email, password) => dispatch => {
+export const handleLogin = (email, password, recaptchaResponse) => dispatch => {
   dispatch({type: actions.LOGIN_REQUEST});
-  return coralApi('/auth/local', {method: 'POST', body: {email, password}})
-    .then(result => {
-      const isAdmin = !!result.user.roles.filter(i => i === 'ADMIN').length;
-      dispatch(checkLoginSuccess(result.user, isAdmin));
+  const params = {method: 'POST', body: {email, password}};
+  if (recaptchaResponse) {
+    params.headers = {'X-Recaptcha-Response': recaptchaResponse};
+  }
+  return coralApi('/auth/local', params)
+    .then(({user}) => {
+      if (!user) {
+        return dispatch(checkLoginFailure('not logged in'));
+      }
+
+      const isAdmin = !!user.roles.filter(i => i === 'ADMIN').length;
+      dispatch(checkLoginSuccess(user, isAdmin));
     })
     .catch(error => {
-      dispatch({type: actions.LOGIN_FAILURE, message: error.translation_key});
+
+      if (error.translation_key === 'LOGIN_MAXIMUM_EXCEEDED') {
+        dispatch({type: actions.LOGIN_MAXIMUM_EXCEEDED, message: error.translation_key});
+      } else {
+        dispatch({type: actions.LOGIN_FAILURE, message: error.translation_key});
+      }
     });
 };
 
@@ -34,9 +47,13 @@ const checkLoginFailure = error => ({type: actions.CHECK_LOGIN_FAILURE, error});
 export const checkLogin = () => dispatch => {
   dispatch(checkLoginRequest());
   return coralApi('/auth')
-    .then(result => {
-      const isAdmin = !!result.user.roles.filter(i => i === 'ADMIN').length;
-      dispatch(checkLoginSuccess(result.user, isAdmin));
+    .then(({user}) => {
+      if (!user) {
+        return dispatch(checkLoginFailure('not logged in'));
+      }
+
+      const isAdmin = !!user.roles.filter(i => i === 'ADMIN').length;
+      dispatch(checkLoginSuccess(user, isAdmin));
     })
     .catch(error => {
       console.error(error);

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

@@ -7,28 +7,33 @@ import {
   SORT_UPDATE,
   COMMENTERS_NEW_PAGE,
   SET_ROLE,
-  SET_COMMENTER_STATUS
+  SET_COMMENTER_STATUS,
+  SHOW_BANUSER_DIALOG,
+  HIDE_BANUSER_DIALOG,
+  SHOW_SUSPENDUSER_DIALOG,
+  HIDE_SUSPENDUSER_DIALOG
 } from '../constants/community';
 
 import coralApi from '../../../coral-framework/helpers/response';
 
-export const fetchCommenters = (query = {}) => dispatch => {
-  dispatch(requestFetchCommenters());
+export const fetchAccounts = (query = {}) => dispatch => {
+
+  dispatch(requestFetchAccounts());
   coralApi(`/users?${qs.stringify(query)}`)
-    .then(({result, page, count, limit, totalPages}) =>
+    .then(({result, page, count, limit, totalPages}) =>{
       dispatch({
         type: FETCH_COMMENTERS_SUCCESS,
-        commenters: result,
+        accounts: result,
         page,
         count,
         limit,
         totalPages
-      })
-    )
+      });
+    })
     .catch(error => dispatch({type: FETCH_COMMENTERS_FAILURE, error}));
 };
 
-const requestFetchCommenters = () => ({
+const requestFetchAccounts = () => ({
   type: FETCH_COMMENTERS_REQUEST
 });
 
@@ -55,3 +60,11 @@ export const setCommenterStatus = (id, status) => (dispatch) => {
     return dispatch({type: SET_COMMENTER_STATUS, id, status});
   });
 };
+
+// Ban User Dialog
+export const showBanUserDialog = (user) => ({type: SHOW_BANUSER_DIALOG, user});
+export const hideBanUserDialog = () => ({type: HIDE_BANUSER_DIALOG});
+
+// Suspend User Dialog
+export const showSuspendUserDialog = (user) => ({type: SHOW_SUSPENDUSER_DIALOG, user});
+export const hideSuspendUserDialog = () => ({type: HIDE_SUSPENDUSER_DIALOG});

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

@@ -0,0 +1,7 @@
+export const CONFIG_UPDATED = 'CONFIG_UPDATED';
+
+export const fetchConfig = () => dispatch => {
+  let json = document.getElementById('data');
+  let data = JSON.parse(json.textContent);
+  dispatch({type: CONFIG_UPDATED, data});
+};

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

@@ -4,5 +4,5 @@ export const toggleModal = open => ({type: actions.TOGGLE_MODAL, open});
 export const singleView = () => ({type: actions.SINGLE_VIEW});
 
 // Ban User Dialog
-export const showBanUserDialog = (user, commentId) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId});
+export const showBanUserDialog = (user, commentId, showRejectedNote) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId, showRejectedNote});
 export const hideBanUserDialog = (showDialog) => ({type: actions.HIDE_BANUSER_DIALOG, showDialog});

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

@@ -4,6 +4,7 @@ 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 {
@@ -18,13 +19,22 @@ class AdminLogin extends React.Component {
     this.props.handleLogin(this.state.email, this.state.password);
   }
 
+  onRecaptchaLoad = () => {
+
+    // do something?
+  }
+
+  onRecaptchaVerify = (recaptchaResponse) => {
+    this.props.handleLogin(this.state.email, this.state.password, recaptchaResponse);
+  }
+
   handleRequestPassword = e => {
     e.preventDefault();
     this.props.requestPasswordReset(this.state.email);
   }
 
   render () {
-    const {errorMessage} = this.props;
+    const {errorMessage, loginMaxExceeded, recaptchaPublic} = this.props;
     const signInForm = (
       <form onSubmit={this.handleSignIn}>
         {errorMessage && <Alert>{lang.t(`errors.${errorMessage}`)}</Alert>}
@@ -49,6 +59,15 @@ class AdminLogin extends React.Component {
             this.setState({requestPassword: true});
           }}>Request a new one.</a>
         </p>
+        {
+          loginMaxExceeded &&
+          <Recaptcha
+            sitekey={recaptchaPublic}
+            render='explicit'
+            theme='dark'
+            onloadCallback={this.onRecaptchaLoad}
+            verifyCallback={this.onRecaptchaVerify} />
+        }
       </form>
     );
     const requestPasswordForm = (
@@ -84,9 +103,11 @@ class AdminLogin extends React.Component {
 }
 
 AdminLogin.propTypes = {
+  loginMaxExceeded: PropTypes.bool.isRequired,
   handleLogin: PropTypes.func.isRequired,
   passwordRequestSuccess: PropTypes.string,
-  loginError: PropTypes.string
+  loginError: PropTypes.string,
+  recaptchaPublic: PropTypes.string
 };
 
 export default AdminLogin;

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

@@ -5,7 +5,7 @@
 
   i {
     vertical-align: middle;
-    margin-right: 10px;
+    margin-right: 5px;
     font-size: 14px;
   }
 }

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

@@ -8,7 +8,14 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
+const onBanClick = (userId, commentId, handleBanUser, rejectComment, handleClose) => (e) => {
+  e.preventDefault();
+  handleBanUser({userId})
+  .then(handleClose)
+  .then(() => rejectComment({commentId}));
+};
+
+const BanUserDialog = ({open, handleClose, handleBanUser, rejectComment, user, commentId, showRejectedNote}) => (
   <Dialog
     className={styles.dialog}
     id="banuserDialog"
@@ -23,13 +30,13 @@ const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
       </div>
       <div className={styles.separator}>
         <h3>{lang.t('bandialog.are_you_sure', user.name)}</h3>
-        <i>{lang.t('bandialog.note')}</i>
+        <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={() => handleBanUser({userId: user.id})} raised>
+        <Button cStyle="black" className={styles.ban} onClick={onBanClick(user.id, commentId, handleBanUser, rejectComment, handleClose)} raised>
           {lang.t('bandialog.yes_ban_user')}
         </Button>
       </div>
@@ -40,6 +47,8 @@ const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
 BanUserDialog.propTypes = {
   handleBanUser: PropTypes.func.isRequired,
   handleClose: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  commentId: PropTypes.string,
   user: PropTypes.object.isRequired,
 };
 

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

@@ -1,71 +0,0 @@
-import React from 'react';
-import timeago from 'timeago.js';
-import Linkify from 'react-linkify';
-
-import styles from './ModerationList.css';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations.json';
-
-import Highlighter from 'react-highlight-words';
-import {Icon} from 'coral-ui';
-import ActionButton from './ActionButton';
-
-const linkify = new Linkify();
-
-// Render a single comment for the list
-const Comment = props => {
-  const {comment, author} = props;
-  let authorStatus = author.status;
-  const links = linkify.getMatches(comment.body);
-
-  return (
-    <li tabIndex={props.index} className={`mdl-card mdl-shadow--2dp ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
-      <div className={styles.itemHeader}>
-        <div className={styles.author}>
-          <span>{author.username || lang.t('comment.anon')}</span>
-          <span className={styles.created}>{timeago().format(comment.createdAt || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}</span>
-          {comment.flagged ? <p className={styles.flagged}>{lang.t('comment.flagged')}</p> : null}
-        </div>
-        <div className={styles.sideActions}>
-          {links ?
-          <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
-          <div className={`actions ${styles.actions}`}>
-            {props.modActions.map(
-              (action, i) =>
-              <ActionButton
-                option={action}
-                key={i}
-                type='COMMENTS'
-                comment={comment}
-                user={author}
-                menuOptionsMap={props.menuOptionsMap}
-                onClickAction={props.onClickAction}
-                onClickShowBanDialog={props.onClickShowBanDialog}/>
-            )}
-          </div>
-          {authorStatus === 'banned' ?
-          <span className={styles.banned}><Icon name='error_outline'/> {lang.t('comment.banned_user')}</span> : null}
-        </div>
-      </div>
-      <div className={styles.itemBody}>
-        <span className={styles.body}>
-          <Linkify  component='span' properties={{style: linkStyles}}>
-            <Highlighter
-              searchWords={props.suspectWords}
-              textToHighlight={comment.body} />
-          </Linkify>
-        </span>
-      </div>
-    </li>
-  );
-};
-
-export default Comment;
-
-const linkStyles = {
-  backgroundColor: 'rgb(255, 219, 135)',
-  padding: '1px 2px'
-};
-
-const lang = new I18n(translations);

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

@@ -0,0 +1,83 @@
+import React, {PropTypes} from 'react';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations';
+import styles from 'coral-admin/src/containers/Dashboard/Dashboard.css';
+import {Icon} from 'coral-ui';
+
+const lang = new I18n(translations);
+const refreshIntervalSeconds = 60 * 5;
+
+class CountdownTimer extends React.Component {
+
+  static propTypes = {
+    handleTimeout: PropTypes.func.isRequired
+  }
+
+  constructor (props) {
+    super(props);
+    try {
+      if (window.localStorage.getItem('coral:dashboardNote') === null) {
+        window.localStorage.setItem('coral:dashboardNote', 'show');
+      }
+    } catch (e) {
+
+      // above will fail in Private Mode in some browsers.
+    }
+
+    this.state = {
+      secondsUntilRefresh: refreshIntervalSeconds,
+      dashboardNote: window.localStorage.getItem('coral:dashboardNote') || 'show'
+    };
+  }
+
+  componentWillMount () {
+    this.interval = setInterval(() => { // the countdown timer
+      let nextCount = this.state.secondsUntilRefresh - 1;
+      if (nextCount < 0) {
+        nextCount = refreshIntervalSeconds;
+        return this.props.handleTimeout();
+      }
+      this.setState({secondsUntilRefresh: nextCount});
+    }, 1000);
+  }
+
+  componentWillUnmount () {
+    window.clearInterval(this.interval);
+  }
+
+  formatTime = () => {
+    const minutes = Math.floor(this.state.secondsUntilRefresh / 60);
+    let seconds = (this.state.secondsUntilRefresh % 60).toString();
+    if (seconds.length < 2) {
+      seconds = `0${seconds}`;
+    }
+
+    return `${minutes}:${seconds}`;
+  }
+
+  dismissNote = () => {
+    try {
+      window.localStorage.setItem('coral:dashboardNote', 'hide');
+    } catch (e) {
+
+      // when setItem fails in Safari Private mode
+      this.setState({dashboardNote: 'hide'});
+    }
+  }
+
+  render () {
+    const hideReloadNote = window.localStorage.getItem('coral:dashboardNote') === 'hide' ||
+      this.state.dashboardNote === 'hide'; // for Safari Incognito
+    return (
+      <p
+        style={{display: hideReloadNote ? 'none' : 'block'}}
+        className={styles.autoUpdate}
+        onClick={this.dismissNote}>
+        <b>×</b>
+        <Icon name='timer' /> <strong>{lang.t('dashboard.next-update', this.formatTime())}</strong> {lang.t('dashboard.auto-update')}
+      </p>
+    );
+  }
+}
+
+export default CountdownTimer;

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

@@ -0,0 +1,622 @@
+$minHeight: 200px;
+$fullscreenZIndex: 10;
+
+.wrapper {
+  /* Fix blockquote styling of MDL: https://github.com/google/material-design-lite/issues/2037 */
+  blockquote {
+    > p:first-child {
+      padding-top: 16px;
+    }
+    > p:last-child {
+      margin-bottom: 0;
+    }
+    &::after {
+      margin-left: -0.5em;
+    }
+  }
+}
+
+.iconBold {
+  composes: material-icons from global;
+  &::before {
+    content: 'format_bold';
+  }
+}
+
+.iconItalic {
+  composes: material-icons from global;
+  &::before {
+    content: 'format_italic';
+  }
+}
+
+.iconTitle {
+  composes: material-icons from global;
+  &::before {
+    content: 'title';
+  }
+}
+
+.iconQuote {
+  composes: material-icons from global;
+  &::before {
+    content: 'format_quote';
+  }
+}
+
+.iconUnorderedList {
+  composes: material-icons from global;
+  &::before {
+    content: 'format_list_bulleted';
+  }
+}
+
+.iconOrderedList {
+  composes: material-icons from global;
+  &::before {
+    content: 'format_list_numbered';
+  }
+}
+
+.iconLink {
+  composes: material-icons from global;
+  &::before {
+    content: 'link';
+  }
+}
+
+.iconImage {
+  composes: material-icons from global;
+  &::before {
+    content: 'insert_photo';
+  }
+}
+
+.iconPreview {
+  composes: material-icons from global;
+  &::before {
+    content: 'remove_red_eye';
+  }
+}
+
+.iconSideBySide {
+  composes: material-icons from global;
+  &::before {
+    content: 'chrome_reader_mode';
+  }
+}
+
+.iconFullscreen {
+  composes: material-icons from global;
+  &::before {
+    content: 'fullscreen';
+  }
+}
+
+.iconGuide {
+  composes: material-icons from global;
+  &::before {
+    content: 'help_outline';
+  }
+}
+
+/*
+ * These are modified styles taken from https://github.com/NextStepWebs/simplemde-markdown-editor and
+ * put through http://sebastianpontow.de/css2compass/.
+ */
+
+/*
+ * simplemde v1.11.2
+ * Copyright Next Step Webs, Inc.
+ * @link https://github.com/NextStepWebs/simplemde-markdown-editor
+ * @license MIT
+ */
+:global {
+  .CodeMirror {
+    font-family: monospace;
+    color: black;
+    position: relative;
+    overflow: hidden;
+    background: white;
+    height: auto;
+    min-height: $minHeight;
+    border: 1px solid #ddd;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    padding: 10px;
+    font: inherit;
+    z-index: 1;
+    pre {
+      padding: 0 4px;
+      border-radius: 0;
+      border-width: 0;
+      background: transparent;
+      font-family: inherit;
+      font-size: inherit;
+      margin: 0;
+      white-space: pre;
+      word-wrap: normal;
+      line-height: inherit;
+      color: inherit;
+      z-index: 2;
+      position: relative;
+      overflow: visible;
+      font-variant-ligatures: none;
+    }
+    span {
+      /*TODO: vertical-align: text-bottom;*/
+    }
+    .CodeMirror-code {
+      .cm-tag {
+        color: #63a35c;
+      }
+      .cm-attribute {
+        color: #795da3;
+      }
+      .cm-string {
+        color: #183691;
+      }
+      .cm-header-1 {
+        font-size: 200%;
+        line-height: 200%;
+      }
+      .cm-header-2 {
+        font-size: 160%;
+        line-height: 160%;
+      }
+      .cm-header-3 {
+        font-size: 125%;
+        line-height: 125%;
+      }
+      .cm-header-4 {
+        font-size: 110%;
+        line-height: 110%;
+      }
+      .cm-comment {
+        background: rgba(0, 0, 0, .05);
+        border-radius: 2px;
+      }
+      .cm-link {
+        color: #7f8c8d;
+      }
+      .cm-url {
+        color: #aab2b3;
+      }
+      .cm-strikethrough {
+        text-decoration: line-through;
+      }
+      .cm-tab {
+        display: inline-block;
+        text-decoration: inherit;
+      }
+      .CodeMirror-ruler {
+        border-left: 1px solid #ccc;
+        position: absolute;
+      }
+      .cm-header {
+        font-weight: bold;
+      }
+      .cm-strong {
+        font-weight: bold;
+      }
+      .cm-em {
+        font-style: italic;
+      }
+      .cm-link {
+        text-decoration: underline;
+      }
+      .cm-strikethrough {
+        text-decoration: line-through;
+      }
+      .cm-invalidchar {
+        color: #f00;
+      }
+    }
+    .CodeMirror-selected {
+      background: #d9d9d9;
+    }
+    .CodeMirror-placeholder {
+      opacity: .5;
+    }
+    div.CodeMirror-secondarycursor {
+      border-left: 1px solid  silver;
+    }
+    .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
+      background: rgba(255, 0, 0, .15);
+    }
+  }
+  .CodeMirror-lines {
+    padding: 4px 0;
+    cursor: text;
+    min-height: 1px;
+  }
+  .CodeMirror-scrollbar-filler {
+    background-color: white;
+    position: absolute;
+    z-index: 6;
+    display: none;
+    right: 0;
+    bottom: 0;
+  }
+  .CodeMirror-gutter-filler {
+    background-color: white;
+    position: absolute;
+    z-index: 6;
+    display: none;
+    left: 0;
+    bottom: 0;
+  }
+  .CodeMirror-gutters {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+    white-space: nowrap;
+    position: absolute;
+    left: 0;
+    top: 0;
+    min-height: 100%;
+    z-index: 3;
+    box-sizing: content-box;
+  }
+  .CodeMirror-guttermarker {
+    color: black;
+  }
+  .CodeMirror-guttermarker-subtle {
+    color: #999;
+  }
+  .CodeMirror-cursors {
+    visibility: hidden;
+    position: relative;
+    z-index: 3;
+  }
+  .CodeMirror-cursor {
+    border-left: 1px solid  black;
+    border-right: none;
+    width: 0;
+    position: absolute;
+  }
+  @keyframes blink {
+    0% {
+    }
+    50% {
+      background-color: transparent;
+    }
+    100% {
+    }
+  }
+  .CodeMirror-scroll {
+    overflow: scroll !important;
+    margin-bottom: -30px;
+    margin-right: -30px;
+    padding-bottom: 30px;
+    height: 100%;
+    outline: none;
+    position: relative;
+    min-height: $minHeight;
+    box-sizing: content-box;
+  }
+  .CodeMirror-sizer {
+    position: relative;
+    border-right: 30px solid transparent;
+    box-sizing: content-box;
+  }
+  .CodeMirror-vscrollbar {
+    position: absolute;
+    z-index: 6;
+    display: none;
+    right: 0;
+    top: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+  .CodeMirror-hscrollbar {
+    position: absolute;
+    z-index: 6;
+    display: none;
+    bottom: 0;
+    left: 0;
+    overflow-y: hidden;
+    overflow-x: scroll;
+  }
+  .CodeMirror-gutter {
+    white-space: normal;
+    height: 100%;
+    display: inline-block;
+    vertical-align: top;
+    margin-bottom: -30px;
+    *zoom: 1;
+    *display: inline;
+    box-sizing: content-box;
+  }
+  .CodeMirror-gutter-wrapper {
+    position: absolute;
+    z-index: 4;
+    background: none !important;
+    border: none !important;
+    user-select: none;
+  }
+  .CodeMirror-gutter-background {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 4;
+  }
+  .CodeMirror-gutter-elt {
+    position: absolute;
+    cursor: default;
+    z-index: 4;
+  }
+  .CodeMirror-code {
+    outline: none;
+  }
+  .CodeMirror-measure {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pre {
+      position: static;
+    }
+  }
+  .CodeMirror-focused {
+    .CodeMirror-selected {
+      background: #d7d4f0;
+    }
+    div.CodeMirror-cursors {
+      visibility: visible;
+    }
+  }
+  .CodeMirror-selected {
+    background: #d9d9d9;
+  }
+  .CodeMirror-line::selection {
+    background: #d7d4f0;
+  }
+  .CodeMirror-line {
+    > span::selection {
+      background: #d7d4f0;
+    }
+    > span {
+      > span::selection {
+        background: #d7d4f0;
+      }
+    }
+  }
+  @media print {
+    .CodeMirror div.CodeMirror-cursors {
+      visibility: hidden;
+    }
+  }
+  .CodeMirror-fullscreen {
+    background: #fff;
+    position: fixed !important;
+    top: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: auto;
+    z-index: $fullscreenZIndex;
+  }
+  .CodeMirror-sided {
+    width: 50% !important;
+  }
+  .editor-toolbar {
+    position: relative;
+    opacity: .6;
+    user-select: none;
+    padding: 0 10px;
+    border-top: 1px solid #bbb;
+    border-left: 1px solid #bbb;
+    border-right: 1px solid #bbb;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    &:after {
+      display: block;
+      content: ' ';
+      height: 1px;
+      margin-top: 8px;
+    }
+    &:before {
+      display: block;
+      content: ' ';
+      height: 1px;
+      margin-bottom: 8px;
+    }
+    &:hover {
+      opacity: .8;
+    }
+    &.fullscreen {
+      width: 100%;
+      height: 50px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      white-space: nowrap;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      box-sizing: border-box;
+      background: #fff;
+      border: 0;
+      position: fixed;
+      top: 0;
+      left: 0;
+      opacity: 1;
+      z-index: $fullscreenZIndex;
+    }
+    &.fullscreen::before {
+      width: 20px;
+      height: 50px;
+      background: linear-gradient(to right, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
+      position: fixed;
+      top: 0;
+      left: 0;
+      margin: 0;
+      padding: 0;
+    }
+    &.fullscreen::after {
+      width: 20px;
+      height: 50px;
+      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);
+      position: fixed;
+      top: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+    }
+    a {
+      display: inline-block;
+      text-align: center;
+      text-decoration: none!important;
+      color: #2c3e50!important;
+      width: 30px;
+      height: 30px;
+      margin: 0;
+      border: 1px solid transparent;
+      border-radius: 3px;
+      cursor: pointer;
+      outline: 0;
+      margin-right: 2px;
+      &.active {
+        background: #fcfcfc;
+        border-color: #95a5a6;
+      }
+      &:hover {
+        background: #fcfcfc;
+        border-color: #95a5a6;
+      }
+      &:active {
+        background: #eee;
+      }
+      &:before {
+        line-height: 30px;
+      }
+    }
+    i.separator {
+      display: inline-block;
+      width: 0;
+      border-left: 1px solid #d9d9d9;
+      border-right: 1px solid #fff;
+      color: transparent;
+      text-indent: -10px;
+      margin: 0 6px;
+    }
+    &.disabled-for-preview a:not(.no-disable) {
+      pointer-events: none;
+      background: #fff;
+      border-color: transparent;
+      text-shadow: inherit;
+    }
+  }
+  @media only screen and(max-width: 700px) {
+    .editor-toolbar a.no-mobile {
+      display: none;
+    }
+  }
+  .editor-statusbar {
+    padding: 8px 10px;
+    font-size: 12px;
+    color: #959694;
+    text-align: right;
+    span {
+      display: inline-block;
+      min-width: 4em;
+      margin-left: 1em;
+    }
+    .lines:before {
+      content: 'lines: ';
+    }
+    .words:before {
+      content: 'words: ';
+    }
+    .characters:before {
+      content: 'characters: ';
+    }
+  }
+  .editor-preview {
+    padding: 10px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #fafafa;
+    z-index: 7;
+    overflow: auto;
+    display: none;
+    box-sizing: border-box;
+    > p {
+      margin-top: 0;
+    }
+    pre {
+      background: #eee;
+      margin-bottom: 10px;
+    }
+    table {
+      td {
+        border: 1px solid #ddd;
+        padding: 5px;
+      }
+      th {
+        border: 1px solid #ddd;
+        padding: 5px;
+      }
+    }
+  }
+  .editor-preview-side {
+    padding: 10px;
+    position: fixed;
+    bottom: 0;
+    width: 50%;
+    top: 50px;
+    right: 0;
+    background: #fafafa;
+    z-index: $fullscreenZIndex;
+    overflow: auto;
+    display: none;
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+    > p {
+      margin-top: 0;
+    }
+    pre {
+      background: #eee;
+      margin-bottom: 10px;
+    }
+    table {
+      td {
+        border: 1px solid #ddd;
+        padding: 5px;
+      }
+      th {
+        border: 1px solid #ddd;
+        padding: 5px;
+      }
+    }
+  }
+  .editor-preview-active-side {
+    display: block;
+  }
+  .editor-preview-active {
+    display: block;
+  }
+  .CodeMirror-overwrite .CodeMirror-cursor {
+  }
+  .CodeMirror-wrap pre {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: normal;
+  }
+  .cm-tab-wrap-hack:after {
+    content: '';
+  }
+  span.CodeMirror-selectedtext {
+    background: none;
+  }
+  .editor-wrapper input.title {
+    &:focus {
+      opacity: .8;
+    }
+    &:hover {
+      opacity: .8;
+    }
+  }
+}

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

@@ -0,0 +1,147 @@
+import React, {Component, PropTypes} from 'react';
+import SimpleMDE from 'simplemde';
+import cn from 'classnames';
+import noop from 'lodash/noop';
+import styles from './MarkdownEditor.css';
+
+const config = {
+  status: false,
+
+  // Do not download fontAwesome icons as we replace them with
+  // material icons.
+  autoDownloadFontAwesome: false,
+
+  // Disable built-in spell checker as it is very rudimentary.
+  spellChecker: false,
+
+  toolbar: [
+    {
+      name: 'bold',
+      action: SimpleMDE.toggleBold,
+      className: styles.iconBold,
+      title: 'Bold',
+    },
+    {
+      name: 'italic',
+      action: SimpleMDE.toggleItalic,
+      className: styles.iconItalic,
+      title: 'Italic',
+    },
+    {
+      name: 'title',
+      action: SimpleMDE.toggleHeadingSmaller,
+      className: styles.iconTitle,
+      title: 'Title, Subtitle, Heading',
+    },
+    '|',
+    {
+      name: 'quote',
+      action: SimpleMDE.toggleBlockquote,
+      className: styles.iconQuote,
+      title: 'Quote',
+    },
+    {
+      name: 'unordered-list',
+      action: SimpleMDE.toggleUnorderedList,
+      className: styles.iconUnorderedList,
+      title: 'Generic List',
+    },
+    {
+      name: 'ordered-list',
+      action: SimpleMDE.toggleOrderedList,
+      className: styles.iconOrderedList,
+      title: 'Numbered List',
+    },
+    '|',
+    {
+      name: 'link',
+      action: SimpleMDE.drawLink,
+      className: styles.iconLink,
+      title: 'Create Link',
+    },
+    {
+      name: 'image',
+      action: SimpleMDE.drawImage,
+      className: styles.iconImage,
+      title: 'Insert Image',
+    },
+    '|',
+    {
+      name: 'preview',
+      action: SimpleMDE.togglePreview,
+      className: cn(styles.iconPreview, 'no-disable'),
+      title: 'Toggle Preview',
+    },
+    {
+      name: 'side-by-side',
+      action: SimpleMDE.toggleSideBySide,
+      className: cn(styles.iconSideBySide, 'no-disable'),
+      title: 'Toggle Side by Side',
+    },
+    {
+      name: 'fullscreen',
+      action: SimpleMDE.toggleFullScreen,
+      className: cn(styles.iconFullscreen, 'no-disable'),
+      title: 'Toggle Fullscreen',
+    },
+    '|',
+    {
+      name: 'guide',
+      action: 'https://simplemde.com/markdown-guide',
+      className: styles.iconGuide,
+      title: 'Markdown Guide',
+    },
+  ],
+};
+
+export default class MarkdownEditor extends Component  {
+
+  textarea = null
+  editor = null
+
+  onRef = (ref) => this.textarea = ref
+
+  componentDidMount() {
+    this.editor = new SimpleMDE({
+      ...config,
+      element: this.textarea,
+    });
+    this.editor.codemirror.on('change', this.onChange);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.value !== nextProps.value && nextProps.value !== this.editor.value()) {
+      this.editor.value(nextProps.value);
+    }
+  }
+
+  componentDidUpdate() {
+
+    // Workaround empty render issue.
+    // https://github.com/NextStepWebs/simplemde-markdown-editor/issues/313
+    this.editor.codemirror.refresh();
+  }
+
+  componentWillUnmount() {
+    this.editor.toTextArea();
+  }
+
+  onChange = () => {
+    if (this.props.onChange) {
+      this.props.onChange(this.editor.value());
+    }
+  }
+
+  render() {
+    return (
+      <div className={styles.wrapper}>
+        <textarea ref={this.onRef} {...this.props} onChange={noop} />
+      </div>
+    );
+  }
+}
+
+MarkdownEditor.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+};

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

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import {Button, Icon} from 'react-mdl';
 import styles from './Modal.css';

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

@@ -178,8 +178,13 @@
   }
 }
 
+.selected {
+  border-radius: 10px;
+}
+
 
 .actionButton {
   transform: scale(.8);
   margin: 0;
+  width: 140px;
 }

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

@@ -1,106 +0,0 @@
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations.json';
-import React, {Component, PropTypes} from 'react';
-import Modal from 'components/Modal';
-import styles from './SuspendUserModal.css';
-import {Button} from 'coral-ui';
-
-const stages = [
-  {
-    title: 'suspenduser.title_0',
-    description: 'suspenduser.description_0',
-    options: {
-      'j': 'suspenduser.no_cancel',
-      'k': 'suspenduser.yes_suspend'
-    }
-  },
-  {
-    title: 'suspenduser.title_1',
-    description: 'suspenduser.description_1',
-    options: {
-      'j': 'bandialog.cancel',
-      'k': 'suspenduser.send'
-    }
-  }
-];
-
-class SuspendUserModal extends Component  {
-
-  state = {email: '', stage: 0}
-
-  static propTypes = {
-    stage: PropTypes.number,
-    actionType: PropTypes.string,
-    onClose: PropTypes.func.isRequired,
-    suspendUser: PropTypes.func.isRequired
-  }
-
-  componentDidMount() {
-    const about = lang.t('suspenduser.username');
-    this.setState({email: lang.t('suspenduser.email', about)});
-  }
-
-  /*
-  * When an admin clicks to suspend a user a dialog is shown, this function
-  * handles the possible actions for that dialog.
-  */
-  onActionClick = (stage, menuOption) => () => {
-    const {suspendUser, action} = this.props;
-    const {stage, email} = this.state;
-    const cancel = this.props.onClose;
-    const next = () => this.setState({stage: stage + 1});
-    const suspend = () => suspendUser(action.item_id, lang.t('suspenduser.email_subject'), email)
-      .then(this.props.onClose);
-    const suspendModalActions = [
-      [ cancel, next ],
-      [ cancel, suspend ]
-    ];
-    return suspendModalActions[stage][menuOption]();
-  }
-
-  onEmailChange = (e) => this.setState({email: e.target.value})
-
-  render () {
-    const {action, onClose} = this.props;
-
-    if (!action) {
-      return null;
-    }
-
-    const {stage} = this.state;
-    const actionType = action.actionType;
-    const about = actionType === 'flag_bio' ? lang.t('suspenduser.bio') : lang.t('suspenduser.username');
-    return <Modal open={true} onClose={onClose}>
-        <div className={styles.title}>{lang.t(stages[stage].title, about)}</div>
-        <div className={styles.container}>
-          <div className={styles.description}>
-            {lang.t(stages[stage].description, about)}
-          </div>
-          {
-            stage === 1 &&
-            <div className={styles.writeContainer}>
-              <div className={styles.emailMessage}>{lang.t('suspenduser.write_message')}</div>
-              <div className={styles.emailContainer}>
-                <textarea
-                  rows={5}
-                  className={styles.emailInput}
-                  value={this.state.email}
-                  onChange={this.onEmailChange}/>
-              </div>
-            </div>
-          }
-          <div className={styles.modalButtons}>
-            {Object.keys(stages[stage].options).map((key, i) => (
-              <Button key={i} onClick={this.onActionClick(stage, i)}>
-                {lang.t(stages[stage].options[key], about)}
-              </Button>
-            ))}
-        </div>
-        </div>
-      </Modal>;
-  }
-}
-
-export default SuspendUserModal;
-
-const lang = new I18n(translations);

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

@@ -1,50 +0,0 @@
-import React from 'react';
-import styles from './ModerationList.css';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations.json';
-
-import {Icon} from 'react-mdl';
-import ActionButton from './ActionButton';
-
-// Render a single comment for the list
-const User = props => {
-  const {action, user} = props;
-  let userStatus = user.status;
-
-  // Do not display unless the user status is 'pending' or 'banned'.
-  // This means that they have already been reviewed and approved.
-  return (userStatus === 'PENDING' ||  userStatus === 'BANNED') &&
-    <li tabIndex={props.index} className={`mdl-card mdl-shadow--2dp ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
-      <div className={styles.itemHeader}>
-        <div className={styles.author}>
-          <span>{user.username}</span>
-          </div>
-        <div className={styles.sideActions}>
-          <div className={`actions ${styles.actions}`}>
-            {props.modActions.map(
-              (action, i) =>
-              <ActionButton
-                type={action.toUpperCase()}
-                key={i}
-                user={user}
-                menuOptionsMap={props.menuOptionsMap}
-                onClickAction={props.onClickAction}
-                onClickShowBanDialog={props.onClickShowBanDialog}/>
-            )}
-          </div>
-        </div>
-        <div>
-          {userStatus === 'banned' ?
-          <span className={styles.banned}><Icon name='error_outline'/> {lang.t('comment.banned_user')}</span> : null}
-        </div>
-      </div>
-      <div className={styles.flagCount}>
-        {`${action.count} ${action.action_type === 'flag_bio' ? lang.t('user.bio_flags') : lang.t('user.username_flags')}`}
-      </div>
-    </li>;
-};
-
-export default User;
-
-const lang = new I18n(translations);

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

@@ -23,9 +23,9 @@ const CoralDrawer = ({handleLogout, restricted = false}) => (
             {lang.t('configure.moderate')}
           </Link>
           <Link className={styles.navLink}
-                to="/admin/streams"
+                to="/admin/stories"
                 activeClassName={styles.active}>
-            {lang.t('configure.streams')}
+            {lang.t('configure.stories')}
           </Link>
           <Link className={styles.navLink}
                 to="/admin/community"

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

@@ -74,8 +74,12 @@
   background-color: transparent;
   transition: background-color 200ms;
 
+  &:hover {
+    background-color: #232323;
+  }
+
   &.active {
-     background-color: #232323;
+    background-color: #232323;
   }
 }
 

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

@@ -14,28 +14,35 @@ const CoralHeader = ({handleLogout, restricted = false}) => (
       <div>
         <Navigation className={styles.nav}>
           <IndexLink
+            id='dashboardNav'
             className={styles.navLink}
             to="/admin/dashboard"
             activeClassName={styles.active}>
             {lang.t('configure.dashboard')}
           </IndexLink>
           <Link
+            id='moderateNav'
             className={styles.navLink}
             to="/admin/moderate"
             activeClassName={styles.active}>
             {lang.t('configure.moderate')}
           </Link>
-          <Link className={styles.navLink}
-            to="/admin/streams"
+          <Link
+            id='streamsNav'
+            className={styles.navLink}
+            to="/admin/stories"
             activeClassName={styles.active}>
-            {lang.t('configure.streams')}
+            {lang.t('configure.stories')}
           </Link>
-          <Link className={styles.navLink}
+          <Link
+            id='communityNav'
+            className={styles.navLink}
             to="/admin/community"
             activeClassName={styles.active}>
             {lang.t('configure.community')}
           </Link>
           <Link
+            id='configureNav'
             className={styles.navLink}
             to="/admin/configure"
             activeClassName={styles.active}>

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

@@ -11,6 +11,7 @@ export const LOGOUT_FAILURE = 'LOGOUT_FAILURE';
 export const LOGIN_REQUEST = 'LOGIN_REQUEST';
 export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
 export const LOGIN_FAILURE = 'LOGIN_FAILURE';
+export const LOGIN_MAXIMUM_EXCEEDED = 'LOGIN_MAXIMUM_EXCEEDED';
 
 export const FETCH_FORGOT_PASSWORD_REQUEST = 'FETCH_FORGOT_PASSWORD_REQUEST';
 export const FETCH_FORGOT_PASSWORD_SUCCESS = 'FETCH_FORGOT_PASSWORD_SUCCESS';

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

@@ -1,6 +1,7 @@
 export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
 export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
-export const USERS_MODERATION_QUEUE_FETCH_SUCCESS = 'USERS_MODERATION_QUEUE_FETCH_SUCCESS';
+export const SHOW_SUSPENDUSER_DIALOG = 'SHOW_SUSPENDUSER_DIALOG';
+export const HIDE_SUSPENDUSER_DIALOG = 'HIDE_SUSPENDUSER_DIALOG';
 export const COMMENTS_MODERATION_QUEUE_FETCH_REQUEST = 'COMMENTS_MODERATION_QUEUE_FETCH_REQUEST';
 export const COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS = 'COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS';
 export const COMMENT_CREATE_SUCCESS = 'COMMENT_CREATE_SUCCESS';

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

@@ -5,3 +5,13 @@ export const SORT_UPDATE = 'SORT_UPDATE';
 export const COMMENTERS_NEW_PAGE = 'COMMENTERS_NEW_PAGE';
 export const SET_ROLE = 'SET_ROLE';
 export const SET_COMMENTER_STATUS = 'SET_COMMENTER_STATUS';
+
+export const FETCH_FLAGGED_COMMENTERS_REQUEST = 'FETCH_FLAGGED_COMMENTERS_REQUEST';
+export const FETCH_FLAGGED_COMMENTERS_SUCCESS = 'FETCH_FLAGGED_COMMENTERS_SUCCESS';
+export const FETCH_FLAGGED_COMMENTERS_FAILURE = 'FETCH_FLAGGED_COMMENTERS_FAILURE';
+
+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';

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

@@ -3,4 +3,3 @@ export const UPDATE_STATUS_SUCCESS = 'UPDATE_STATUS_SUCCESS';
 export const UPDATE_STATUS_FAILURE = 'UPDATE_STATUS_FAILURE';
 export const USER_EMAIL_FAILURE = 'USER_EMAIL_FAILURE';
 export const USERNAME_ENABLE_FAILURE = 'USERNAME_ENABLE_FAILURE';
-export const USERS_MODERATION_QUEUE_FETCH_SUCCESS = 'USERS_MODERATION_QUEUE_FETCH_SUCCESS';

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

@@ -1,3 +1,5 @@
+@custom-media --big-viewport (min-width: 780px);
+
 .container {
   padding: 10px;
   display: flex;
@@ -15,6 +17,12 @@
   box-sizing: border-box;
 }
 
+.mainFlaggedContent {
+  width: 100%;
+  padding: 34px 14px;
+  box-sizing: border-box;
+}
+
 .roleButton {
   display: block;
 }
@@ -94,3 +102,232 @@
     cursor: pointer;
    }
 }
+
+.list {
+  padding: 8px 0;
+  list-style: none;
+  display: block;
+
+  &.singleView .listItem {
+    display: none;
+  }
+
+  &.singleView .listItem.activeItem {
+    display: block;
+    height: 100%;
+    font-size: 1.5em;
+    line-height: 1.5em;
+    border: none;
+
+    .actions {
+      position: fixed;
+      bottom: 60px;
+      left: 25%;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-around;
+      width: 50%;
+      margin: 0;
+    }
+
+    .actionButton {
+      transform: scale(1.4);
+    }
+  }
+}
+
+.listItem {
+  border-bottom: 1px solid #e0e0e0;
+  font-size: 18px;
+  width: 100%;
+  max-width: 660px;
+  min-width: 400px;
+  margin: 0 auto;
+  position: relative;
+  transition: all 200ms;
+  padding: 10px 0 0;
+  min-height: 220px;
+
+  .container {
+    display: block;
+    padding: 0 14px;
+    min-height: 180px;
+  }
+
+  &:hover {
+     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .context {
+    a {
+      color: #f36451;
+      text-decoration: underline;
+      float: right;
+    }
+  }
+
+   .sideActions {
+     position: absolute;
+     right: 0;
+     height: 100%;
+     top: 0;
+     padding: 40px 18px;
+     box-sizing: border-box;
+   }
+
+  .itemHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .author {
+      font-size: 16px;
+      font-weight: bold;
+      min-width: 230px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .itemBody {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .avatar {
+    margin-right: 16px;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    background-color: #757575;
+    font-size: 40px;
+    color: #fff;
+  }
+
+  .created {
+    color: #666;
+    font-size: 13px;
+    margin-left: 40px;
+  }
+
+  .actionButton {
+    transform: scale(.8);
+    margin: 0;
+  }
+
+  .body {
+    margin-top: 0px;
+    flex: 1;
+    color: black;
+    max-width: 500px;
+    word-wrap: break-word;
+  }
+
+  .flagged {
+    color: rgba(255, 0, 0, .5);
+    padding-top: 15px;
+    padding-left: 10px;
+  }
+
+  .flagCount{
+    font-size: 12px;
+    color: #d32f2f;
+  }
+
+}
+
+.empty {
+  color: #444;
+  margin-top: 50px;
+  text-align: center;
+}
+
+
+@media (--big-viewport) {
+  .listItem {
+    border: 1px solid #e0e0e0;
+    margin-bottom: 30px;
+
+    &:last-child {
+      border-bottom: 1px solid #e0e0e0;
+    }
+
+    &.activeItem {
+      border: 2px solid #333;
+    }
+  }
+
+}
+
+.hasLinks {
+  color: #f00;
+  text-align: right;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 5px;
+  }
+}
+
+.banned {
+  color: #f00;
+  text-align: left;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 5px;
+  }
+}
+
+.ban {
+  display: block;
+  text-align: center;
+  margin-top: 5px;
+}
+
+.banButton {
+  width: 114px;
+  letter-spacing: 1px;
+
+  i {
+    vertical-align: middle;
+    margin-right: 10px;
+    font-size: 14px;
+  }
+}
+
+.actionButton {
+  transform: scale(.8);
+  margin: 0;
+}
+
+.flaggedByCount {
+  display: block;
+  text-align: left;
+}
+
+.flaggedBy {
+  display: inline;
+  padding: 3px;
+  font-size: 16px;
+}
+
+.flaggedByLabel {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.flaggedReasons {
+  padding-top: 15px;
+  margin-left: 24px;
+}
+
+.flaggedByReason {
+  font-size: 1tpx;
+}

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

@@ -1,27 +1,47 @@
 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, suspendUser} from 'coral-admin/src/graphql/mutations';
+
 import {
-  fetchCommenters,
+  fetchAccounts,
   updateSorting,
   newPage,
+  showBanUserDialog,
+  hideBanUserDialog,
+  showSuspendUserDialog,
+  hideSuspendUserDialog
 } from '../../actions/community';
 
-import Community from './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: ''
+      searchValue: '',
+      timer: null
     };
 
     this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
-    this.onChangeHandler = this.onChangeHandler.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();
@@ -29,25 +49,29 @@ class CommunityContainer extends Component {
     }
   }
 
-  onChangeHandler(e) {
-    this.setState({
-      searchValue: e.target.value
+  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.dispatch(fetchCommenters({
+    this.props.fetchAccounts({
       value: this.state.searchValue,
-      field: community.field,
-      asc: community.asc,
+      field: community.fieldPeople,
+      asc: community.ascPeople,
       ...query
-    }));
-  }
+    });
 
-  componentDidMount() {
-    this.search();
   }
 
   onHeaderClickHandler(sort) {
@@ -60,19 +84,66 @@ class CommunityContainer extends Component {
     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}
+          suspendUser={props.suspendUser}
+          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}
+          suspendUser={props.suspendUser}
+        />
+      </div>
+    );
+  }
+
   render() {
     const {searchValue} = this.state;
-    const {community} = this.props;
+
+    const tab = this.getTabContent(searchValue, this.props);
+
     return (
-      <Community
-        searchValue={searchValue}
-        commenters={community.commenters}
-        isFetching={community.isFetching}
-        error={community.error}
-        totalPages={community.totalPages}
-        page={community.page}
-        {...this}
-      />
+      <div>
+        <CommunityMenu />
+        <div>
+          { tab }
+        </div>
+      </div>
     );
   }
 }
@@ -81,4 +152,18 @@ const mapStateToProps = state => ({
   community: state.community.toJS()
 });
 
-export default connect(mapStateToProps)(CommunityContainer);
+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,
+  suspendUser
+)(CommunityContainer);

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

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CommunityLayout = props => (
+  <div>
+    {props.children}
+  </div>
+);
+
+export default CommunityLayout;

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

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

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

@@ -5,7 +5,7 @@ import translations from 'coral-admin/src/translations.json';
 import styles from './Community.css';
 import Table from './Table';
 import Loading from './Loading';
-import {Pager} from 'coral-ui';
+import {Pager, Icon} from 'coral-ui';
 import EmptyCard from '../../components/EmptyCard';
 
 const lang = new I18n(translations);
@@ -29,28 +29,22 @@ const tableHeaders = [
   }
 ];
 
-const Community = ({isFetching, commenters, ...props}) => {
+const People = ({isFetching, commenters, searchValue, onSearchChange, ...props}) => {
   const hasResults = !isFetching && !!commenters.length;
   return (
     <div className={styles.container}>
       <div className={styles.leftColumn}>
-        <form action="">
-          <div className={`${styles.searchBox}`}>
-            <label htmlFor="commenters-search">
-              <i className="material-icons">search</i>
-            </label>
-            <div className="">
-              <input
-                id="commenters-search"
-                className={`${styles.searchInput}`}
-                type="text"
-                value={props.searchValue}
-                onKeyDown={props.onKeyDownHandler}
-                onChange={props.onChangeHandler}
-              />
-            </div>
-          </div>
-        </form>
+        <div className={styles.searchBox}>
+          <Icon name='search' className={styles.searchIcon}/>
+          <input
+            id="commenters-search"
+            type="text"
+            className={styles.searchBoxInput}
+            value={searchValue}
+            onChange={onSearchChange}
+            placeholder={lang.t('streams.search')}
+          />
+        </div>
       </div>
       <div className={styles.mainContent}>
         { isFetching && <Loading /> }
@@ -58,7 +52,7 @@ const Community = ({isFetching, commenters, ...props}) => {
           hasResults
           ? <Table
               headers={tableHeaders}
-              data={commenters}
+              commenters={commenters}
               onHeaderClickHandler={props.onHeaderClickHandler}
             />
           : <EmptyCard>{lang.t('community.no-results')}</EmptyCard>
@@ -73,4 +67,4 @@ const Community = ({isFetching, commenters, ...props}) => {
   );
 };
 
-export default Community;
+export default People;

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

@@ -77,4 +77,4 @@ class Table extends Component {
   }
 }
 
-export default connect(state => ({commenters: state.community.get('commenters')}))(Table);
+export default connect(state => ({commenters: state.community.get('accounts')}))(Table);

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

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

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

@@ -0,0 +1,164 @@
+.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

@@ -0,0 +1,54 @@
+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/Community/components/CommunityMenu.js

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

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

@@ -0,0 +1,115 @@
+import React, {Component, PropTypes} from 'react';
+
+import {Dialog, Button} from 'coral-ui';
+import styles from './SuspendUserDialog.css';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations.json';
+
+const lang = new I18n(translations);
+
+const stages = [
+  {
+    title: 'suspenduser.title_0',
+    description: 'suspenduser.description_0',
+    options: {
+      'j': 'suspenduser.no_cancel',
+      'k': 'suspenduser.yes_suspend'
+    }
+  },
+  {
+    title: 'suspenduser.title_1',
+    description: 'suspenduser.description_1',
+    options: {
+      'j': 'bandialog.cancel',
+      'k': 'suspenduser.send'
+    }
+  }
+];
+
+class SuspendUserDialog extends Component  {
+
+  state = {email: '', stage: 0}
+
+  static propTypes = {
+    stage: PropTypes.number,
+    handleClose: PropTypes.func.isRequired,
+    suspendUser: PropTypes.func.isRequired
+  }
+
+  componentDidMount() {
+    this.setState({email: lang.t('suspenduser.email'), about: lang.t('suspenduser.username')});
+  }
+
+  /*
+  * When an admin clicks to suspend a user a dialog is shown, this function
+  * handles the possible actions for that dialog.
+  */
+  onActionClick = (stage, menuOption) => () => {
+    const {suspendUser, user} = this.props;
+    const {stage} = this.state;
+
+    const cancel = this.props.handleClose;
+    const next = () => this.setState({stage: stage + 1});
+    const suspend = () => {
+      suspendUser({userId: user.user.id, message: this.state.email})
+      .then(() => {
+        this.props.handleClose();
+      });
+    };
+
+    const suspendModalActions = [
+      [ cancel, next ],
+      [ cancel, suspend ]
+    ];
+    return suspendModalActions[stage][menuOption]();
+  }
+
+  onEmailChange = (e) => {
+    this.setState({email: e.target.value});
+  }
+
+  render () {
+    const {open, handleClose} = this.props;
+    const {stage} = this.state;
+
+    return <Dialog
+            className={styles.suspendDialog}
+            id="suspendUserDialog"
+            open={open}
+            onClose={handleClose}
+            onCancel={handleClose}
+            title={lang.t('suspenduser.title')}>
+            <div className={styles.title}>
+              {lang.t(stages[stage].title, lang.t('suspenduser.username'))}
+            </div>
+            <div className={styles.container}>
+              <div className={styles.description}>
+                {lang.t(stages[stage].description, lang.t('suspenduser.username'))}
+              </div>
+              {
+                stage === 1 &&
+                <div className={styles.writeContainer}>
+                  <div className={styles.emailMessage}>{lang.t('suspenduser.write_message')}</div>
+                  <div className={styles.emailContainer}>
+                    <textarea
+                      rows={5}
+                      className={styles.emailInput}
+                      value={this.state.email}
+                      onChange={this.onEmailChange}/>
+                  </div>
+                </div>
+              }
+              <div className={styles.modalButtons}>
+                {Object.keys(stages[stage].options).map((key, i) => (
+                  <Button key={i} onClick={this.onActionClick(stage, i)}>
+                    {lang.t(stages[stage].options[key], lang.t('suspenduser.username'))}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          </Dialog>;
+  }
+}
+
+export default SuspendUserDialog;

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import styles from '../Community.css';
+
+import ActionButton from './ActionButton';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../../../translations.json';
+
+const lang = new I18n(translations);
+
+// Render a single user for the list
+const User = props => {
+  const {user, modActionButtons} = props;
+  let userStatus = user.status;
+
+  // Do not display unless the user status is 'pending' or 'banned'.
+  // This means that they have already been reviewed and approved.
+  return (userStatus === 'PENDING' ||  userStatus === 'BANNED') &&
+    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
+      <div className={styles.container}>
+        <div className={styles.itemHeader}>
+          <div className={styles.author}>
+            <span>
+              {user.username}
+            </span>
+            <ActionButton
+              className={styles.banButton}
+              type='BAN'
+              user={user}
+              showBanUserDialog={props.showBanUserDialog}
+            />
+          </div>
+        </div>
+
+        <div className={styles.itemBody}>
+          <div className={styles.body}>
+            <div className={styles.flaggedByCount}>
+              <i className="material-icons">flag</i><span className={styles.flaggedByLabel}>{lang.t('community.flags')}({ user.actions.length })</span>:
+                { user.action_summaries.map(
+                (action, i ) => {
+                  return <span className={styles.flaggedBy} key={i}>
+                    {lang.t(`community.${action.reason}`)} ({action.count})
+                  </span>;
+                }
+              )}
+            </div>
+            <div className={styles.flaggedReasons}>
+              { user.action_summaries.map(
+                (action_sum, i ) => {
+                  return <div key={i}>
+                    <span className={styles.flaggedByLabel}>
+                      {lang.t(`community.${action_sum.reason}`)} ({action_sum.count})
+                    </span>
+                    {user.actions.map(
+
+                      // find the action by action_sum.reason
+                      (action, j) => {
+                        if (action.reason === action_sum.reason) {
+                          return <p className={styles.flaggedByReason} key={j}>
+                            {action.user && action.user.username}: {action.message ? action.message : 'n/a'}
+                          </p>;
+                        }
+                        return null;
+                      }
+                    )}
+                  </div>;
+                }
+              )}
+
+            </div>
+          </div>
+          <div className={styles.sideActions}>
+            <div className={`actions ${styles.actions}`}>
+              {modActionButtons.map((action, i) =>
+                <ActionButton key={i}
+                              type={action.toUpperCase()}
+                              user={user}
+                              approveUser={props.approveUser}
+                              suspendUser={props.suspendUser}
+                              showSuspendUserDialog={props.showSuspendUserDialog}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>;
+};
+
+export default User;

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

@@ -0,0 +1,339 @@
+@custom-media --big-viewport (min-width: 780px);
+
+.listContainer {
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.tabBar {
+  background-color: rgba(44, 44, 44, 0.89);
+  z-index: 5;
+}
+
+.tab {
+  flex: 1;
+  color: white;
+  text-transform: capitalize;
+  font-weight: 500;
+  font-size: 15px;
+  letter-spacing: 1px;
+  transition: border-bottom 200ms;
+}
+
+.active {
+  color: white;
+  box-sizing: border-box;
+  border-bottom: solid 5px #F36451;
+}
+
+.active > span {
+  color: white;
+}
+
+.active:after {
+  background: transparent !important;
+}
+
+.showShortcuts {
+  position: absolute;
+  right: 130px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+
+span {
+  margin-left: 7px;
+}
+}
+
+@media (--big-viewport) {
+  .tab {
+    flex: none;
+  }
+}
+
+.notFound {
+  position: relative;
+  margin: 20px auto;
+  text-align: center;
+  padding: 68px 45px;
+  vertical-align: middle;
+  min-width: 500px;
+
+  a {
+    color: rgb(244, 126, 107);
+    font-weight: 500;
+
+    &.goToStreams {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+    }
+  }
+}
+
+.header {
+  background-color: #2c2c2c;
+  color: white;
+  margin-bottom: -1px;
+
+  .settingsButton {
+    i {
+      vertical-align: middle;
+      margin-left: 10px;
+      margin-top: -4px;
+    }
+  }
+
+  .moderateAsset {
+    a {
+      -webkit-box-flex: 1;
+      -ms-flex: 1;
+      flex: 1;
+      color: white;
+      text-transform: capitalize;
+      font-weight: 500;
+      font-size: 15px;
+      letter-spacing: 1px;
+      transition: opacity 200ms;
+      opacity: 1;
+
+      &:hover {
+          opacity: .8;
+         cursor: pointer;
+      }
+
+      &:first-child {
+        text-align: left;
+      }
+
+      &:nth-child(2) {
+       text-align: center;
+      }
+
+      &:last-child {
+        text-align: right;
+      }
+    }
+  }
+}
+
+
+@custom-media --big-viewport (min-width: 780px);
+
+.list {
+  padding: 8px 0;
+  list-style: none;
+  display: block;
+
+  &.singleView .listItem {
+    display: none;
+  }
+
+  &.singleView .listItem.activeItem {
+    display: block;
+    height: 100%;
+    font-size: 1.5em;
+    line-height: 1.5em;
+    border: none;
+
+    .actions {
+      position: fixed;
+      bottom: 60px;
+      left: 25%;
+      display: flex;
+      justify-content: space-around;
+      width: 50%;
+      margin: 0;
+    }
+
+    .actionButton {
+      transform: scale(1.4);
+    }
+  }
+}
+
+.listItem {
+  border-bottom: 1px solid #e0e0e0;
+  font-size: 18px;
+  width: 100%;
+  max-width: 660px;
+  min-width: 400px;
+  margin: 0 auto;
+  position: relative;
+  transition: all 200ms;
+  padding: 10px 0 0;
+  min-height: 220px;
+
+  .container {
+    padding: 0 14px;
+    min-height: 180px;
+  }
+
+  &:hover {
+     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .context {
+    a {
+      color: #f36451;
+      text-decoration: underline;
+      float: right;
+    }
+  }
+
+   .sideActions {
+     position: absolute;
+     right: 0;
+     height: 100%;
+     top: 0;
+     padding: 40px 18px;
+     box-sizing: border-box;
+   }
+
+  .itemHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .author {
+      min-width: 230px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .itemBody {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .avatar {
+    margin-right: 16px;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    background-color: #757575;
+    font-size: 40px;
+    color: #fff;
+  }
+
+  .created {
+    color: #666;
+    font-size: 13px;
+    margin-left: 40px;
+  }
+
+  .actionButton {
+    transform: scale(.8);
+    margin: 0;
+  }
+
+  .body {
+    margin-top: 0px;
+    flex: 1;
+    color: black;
+    max-width: 500px;
+    word-wrap: break-word;
+    font-weight: 300;
+  }
+
+  .flagged {
+    color: rgba(255, 0, 0, .5);
+    padding-top: 15px;
+    padding-left: 10px;
+  }
+
+  .flagCount{
+    font-size: 12px;
+    color: #d32f2f;
+  }
+
+}
+
+.empty {
+  color: #444;
+  margin-top: 50px;
+  text-align: center;
+}
+
+
+@media (--big-viewport) {
+  .listItem {
+    border: 1px solid #e0e0e0;
+    margin-bottom: 30px;
+
+    &:last-child {
+      border-bottom: 1px solid #e0e0e0;
+    }
+
+    &.activeItem {
+      border: 2px solid #333;
+    }
+  }
+
+}
+
+.hasLinks {
+  color: #f00;
+  text-align: right;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 5px;
+  }
+}
+
+.banned {
+  color: #f00;
+  text-align: left;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 5px;
+  }
+}
+
+.ban {
+  display: block;
+  text-align: center;
+  margin-top: 5px;
+}
+
+.Comment {
+  .moderateArticle {
+    font-size: 12px;
+    a {
+      display: inline-block;
+      color: #679af3;
+      text-decoration: none;
+      font-size: 1em;
+      font-weight: 400;
+      letter-spacing: .5px;
+      font-size: 12px;
+      margin-left: 10px;
+
+      &:hover {
+        text-decoration: underline;
+        opacity: .9;
+        cursor: pointer;
+       }
+    }
+  }
+}
+
+.flagBox {
+  max-width: 480px;
+  border-top: 1px solid rgba(66, 66, 66, 0.12);
+  h3 {
+    font-size: 14px;
+    margin: 0;
+    font-weight: 500;
+  }
+}

client/coral-admin/src/containers/Configure/Configure.css

@@ -24,10 +24,30 @@
   margin-bottom: 20px;
   align-items: flex-start;
   min-height: 100px;
+  max-width: 600px;
 
   h3 {
     margin: 0;
   }
+
+  .actions {
+    display: inline-block;
+    width: 100%;
+
+    .copiedText {
+      display: inline-block;
+      color: #00796b;
+      padding: 12px;
+      font-size: 14px;
+      float: right;
+    }
+
+    .copyButton {
+      display: inline-block;
+      width: 200px;
+      float: right;
+    }
+  }
 }
 
 .settingsError {
@@ -41,7 +61,9 @@
 
 .settingsHeader {
   margin-top: 3px;
-  margin-bottom: 10px;
+  margin-bottom: 7px;
+  font-size: 18px;
+  font-weight: 500;
 }
 
 .disabledSettingText {
@@ -51,18 +73,12 @@
 .configSettingInfoBox {
   min-height: 100px;
   margin-bottom: 20px;
-  cursor: pointer;
   width: auto;
   height: auto;
   text-align: left;
   overflow: visible;
 }
 
-.configSettingInfoBox p {
-  font-size: 12px;
-  bottom: 0;
-}
-
 .configSettingEmbed {
   border: 1px solid #ccc;
   border-radius: 4px;
@@ -73,6 +89,11 @@
 .configTimeoutSelect {
   display: inline-block;
   margin-left: 20px;
+
+  i { /* fix for firefox and react-mdl-selectfield@0.2.0 */
+    padding: 20px 0;
+    vertical-align: top;
+  }
 }
 
 .charCountTexfield {
@@ -81,6 +102,8 @@
   border-color: #ccc;
   border-style: solid;
   border-width: 0px 0px 1px 0px;
+  font-size: 14px;
+  text-align: center;
 }
 
 .charCountTexfieldEnabled {
@@ -96,29 +119,18 @@
   color: white;
 }
 
-.copiedText {
-  color: #00796b;
-  float: right;
-  padding: 12px;
-  font-size: 14px;
-}
-
-.copyButton {
-  float: right;
-  width: 200px;
-}
-
 .embedInput {
-  border-radius: 3px;
-  border: 1px solid #ccc;
+  width: 100%;
   display: block;
-  width: 90%;
-  vertical-align: middle;
-  margin-bottom: 10px;
-  color: #555;
-  padding: 14px;
+  outline: none;
+  border: 1px solid rgba(0,0,0,.12);
+  padding: 6px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin: 5px auto;
+  min-height: 175px;
   font-size: 14px;
-  letter-spacing: 0.03em;
+  resize: none;
 }
 
 #bannedWordlist, #suspectWordlist {
@@ -167,6 +179,28 @@
 
   .content {
     display: inline-block;
-    padding-left: 30px;
+    padding: 0px 30px;
+    box-sizing: border-box;
+    width: 100%;
+  }
+}
+
+.Configure {
+
+  p {
+    line-height: 1.2;
+    max-width: 550px;
+  }
+
+  .wrapper {
+    width: 100%;
+  }
+
+  .descriptionBox {
+    margin-top: 15px;
+
+    input {
+      height: 150px;
+    }
   }
 }

client/coral-admin/src/containers/Configure/Domainlist.js

@@ -10,15 +10,19 @@ const lang = new I18n(translations);
 const Domainlist = ({domains, onChangeDomainlist}) => {
   return (
     <Card id={styles.domainlist} className={styles.configSetting}>
-      <h3>{lang.t('configure.domain-list-title')}</h3>
-      <p className={styles.domainlistDesc}>{lang.t('configure.domain-list-text')}</p>
-      <TagsInput
-        value={domains}
-        inputProps={{placeholder: 'URL'}}
-        addOnPaste={true}
-        pasteSplit={data => data.split(',').map(d => d.trim())}
-        onChange={tags => onChangeDomainlist('whitelist', tags)}
-      />
+      <div className={styles.wrapper}>
+        <div className={styles.settingsHeader}>{lang.t('configure.domain-list-title')}</div>
+        <p className={styles.domainlistDesc}>{lang.t('configure.domain-list-text')}</p>
+        <div className={styles.wrapper}>
+          <TagsInput
+            value={domains}
+            inputProps={{placeholder: 'URL'}}
+            addOnPaste={true}
+            pasteSplit={data => data.split(',').map(d => d.trim())}
+            onChange={tags => onChangeDomainlist('whitelist', tags)}
+          />
+        </div>
+      </div>
     </Card>
   );
 };

client/coral-admin/src/containers/Configure/EmbedLink.js

@@ -45,13 +45,19 @@ class EmbedLink extends Component {
     `.trim();
     return (
       <Card shadow="2" className={styles.configSetting}>
-        <h3>Embed Comment Stream</h3>
-        <p>{lang.t('configure.copy-and-paste')}</p>
-        <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
-        <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
-          {lang.t('embedlink.copy')}
-        </Button>
-        <div className={styles.copiedText}>{this.state.copied && 'Copied!'}</div>
+        <div className={styles.wrapper}>
+          <div className={styles.settingsHeader}>Embed Comment Stream</div>
+          <p>{lang.t('configure.copy-and-paste')}</p>
+          <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
+          <div className={styles.actions}>
+            <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
+              {lang.t('embedlink.copy')}
+            </Button>
+            <div className={styles.copiedText}>
+              {this.state.copied && 'Copied!'}
+            </div>
+          </div>
+        </div>
       </Card>
     );
   }

client/coral-admin/src/containers/Configure/ModerationSettings.js

@@ -16,6 +16,11 @@ const updateEmailConfirmation = (updateSettings, verify) => () => {
   updateSettings({requireEmailConfirmation: !verify});
 };
 
+const updatePremodLinksEnable = (updateSettings, premodLinks) => () => {
+  const premodLinksEnable = !premodLinks;
+  updateSettings({premodLinksEnable});
+};
+
 const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
 
   // just putting this here for shorthand below
@@ -23,7 +28,7 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
   const off = styles.disabledSetting;
 
   return (
-    <div>
+    <div className={styles.Configure}>
       <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
         <div className={styles.action}>
           <Checkbox
@@ -50,6 +55,19 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
           </p>
         </div>
       </Card>
+      <Card className={`${styles.configSetting} ${settings.premodLinksEnable ? on : off}`}>
+        <div className={styles.action}>
+          <Checkbox
+            onChange={updatePremodLinksEnable(updateSettings, settings.premodLinksEnable)}
+            checked={settings.premodLinksEnable} />
+        </div>
+        <div className={styles.content}>
+          <div className={styles.settingsHeader}>{lang.t('configure.enable-premod-links')}</div>
+          <p>
+            {lang.t('configure.enable-premod-links-text')}
+          </p>
+        </div>
+      </Card>
       <Wordlist
         bannedWords={settings.wordlist.banned}
         suspectWords={settings.wordlist.suspect}

client/coral-admin/src/containers/Configure/StreamSettings.js

@@ -3,8 +3,9 @@ import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import styles from './Configure.css';
-import {Textfield, Checkbox} from 'react-mdl';
-import {Card, Icon} from 'coral-ui';
+import {Checkbox, Textfield} from 'react-mdl';
+import {Card, Icon, TextArea} from 'coral-ui';
+import MarkdownEditor from 'coral-admin/src/components/MarkdownEditor';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -32,11 +33,15 @@ const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
   updateSettings({infoBoxEnable});
 };
 
-const updateInfoBoxContent = (updateSettings) => (event) => {
-  const infoBoxContent =  event.target.value;
+const updateInfoBoxContent = (updateSettings) => (value) => {
+  const infoBoxContent = value;
   updateSettings({infoBoxContent});
 };
 
+const updateAutoClose = (updateSettings, autoCloseStream) => () => {
+  updateSettings({autoCloseStream});
+};
+
 const updateClosedMessage = (updateSettings) => (event) => {
   const closedMessage = event.target.value;
   updateSettings({closedMessage});
@@ -64,7 +69,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
   const off = styles.disabledSetting;
 
   return (
-    <div>
+    <div className={styles.Configure}>
       <Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
         <div className={styles.action}>
           <Checkbox
@@ -79,7 +84,9 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
               className={`${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
               htmlFor='charCount'
               onChange={updateCharCount(updateSettings, settingsError)}
-              value={settings.charCount}/>
+              value={settings.charCount}
+              disabled={settings.charCountEnable ? '' : 'disabled'}
+            />
             <span>{lang.t('configure.comment-count-text-post')}</span>
               {
                 errors.charCount &&
@@ -92,41 +99,46 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
           </p>
         </div>
       </Card>
-      <Card className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
+      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
         <div className={styles.action}>
           <Checkbox
             onChange={updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
             checked={settings.infoBoxEnable} />
         </div>
         <div className={styles.content}>
-          {lang.t('configure.include-comment-stream')}
-          <p>
+          <div className={styles.settingsHeader}>
+            {lang.t('configure.include-comment-stream')}
+          </div>
+          <p className={settings.infoBoxEnable ? '' : styles.disabledSettingText}>
             {lang.t('configure.include-comment-stream-desc')}
           </p>
           <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-            <div className={styles.content}>
-              <Textfield
-                onChange={updateInfoBoxContent(updateSettings)}
-                value={settings.infoBoxContent}
-                label={lang.t('configure.include-text')}
-                rows={3}/>
-            </div>
+            <MarkdownEditor
+              className={styles.descriptionBox}
+              onChange={updateInfoBoxContent(updateSettings)}
+              value={settings.infoBoxContent}
+            />
           </div>
         </div>
       </Card>
-      <Card className={styles.configSettingInfoBox}>
-        <div className={styles.content}>
-          {lang.t('configure.closed-comments-desc')}
+      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
+        <div className={styles.wrapper}>
+          <div className={styles.settingsHeader}>{lang.t('configure.closed-stream-settings')}</div>
+          <p>{lang.t('configure.closed-comments-desc')}</p>
           <div>
-          <Textfield
-            onChange={updateClosedMessage(updateSettings)}
-            value={settings.closedMessage}
-            label={lang.t('configure.closed-comments-label')}
-            rows={3}/>
+            <TextArea className={styles.descriptionBox}
+              onChange={updateClosedMessage(updateSettings)}
+              value={settings.closedMessage}
+            />
           </div>
         </div>
       </Card>
-      <Card className={styles.configSettingInfoBox}>
+      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
+        <div className={styles.action}>
+          <Checkbox
+            onChange={updateAutoClose(updateSettings, !settings.autoCloseStream)}
+            checked={settings.autoCloseStream} />
+        </div>
         <div className={styles.content}>
           {lang.t('configure.close-after')}
           <br />
@@ -149,6 +161,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
           </div>
         </div>
       </Card>
+      {/* the above card should be the last one if at all possible because of z-index issues with the selects */}
     </div>
   );
 };

client/coral-admin/src/containers/Configure/TechSettings.js

@@ -14,19 +14,20 @@ const updateCustomCssUrl = (updateSettings) => (event) => {
 
 const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
   return (
-    <div>
+    <div className={styles.Configure}>
       <Domainlist
         domains={settings.domains.whitelist}
         onChangeDomainlist={onChangeDomainlist} />
       <EmbedLink />
       <Card className={styles.configSetting}>
-        <h3>{lang.t('configure.custom-css-url')}</h3>
-        <p>{lang.t('configure.custom-css-url-desc')}</p>
-        <br />
-        <input
-          className={styles.customCSSInput}
-          value={settings.customCssUrl}
-          onChange={updateCustomCssUrl(updateSettings)} />
+        <div className={styles.wrapper}>
+          <div className={styles.settingsHeader}>{lang.t('configure.custom-css-url')}</div>
+          <p>{lang.t('configure.custom-css-url-desc')}</p>
+          <input
+            className={styles.customCSSInput}
+            value={settings.customCssUrl}
+            onChange={updateCustomCssUrl(updateSettings)} />
+        </div>
       </Card>
     </div>
   );

client/coral-admin/src/containers/Configure/Wordlist.js

@@ -8,25 +8,29 @@ import {Card} from 'coral-ui';
 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
   <div>
     <Card id={styles.bannedWordlist} className={styles.configSetting}>
-      <h3>{lang.t('configure.banned-words-title')}</h3>
+      <div className={styles.settingsHeader}>{lang.t('configure.banned-words-title')}</div>
       <p className={styles.wordlistDesc}>{lang.t('configure.banned-word-text')}</p>
-      <TagsInput
-        value={bannedWords}
-        inputProps={{placeholder: 'word or phrase'}}
-        addOnPaste={true}
-        pasteSplit={data => data.split(',').map(d => d.trim())}
-        onChange={tags => onChangeWordlist('banned', tags)}
-      />
+      <div className={styles.wrapper}>
+        <TagsInput
+          value={bannedWords}
+          inputProps={{placeholder: 'word or phrase'}}
+          addOnPaste={true}
+          pasteSplit={data => data.split(',').map(d => d.trim())}
+          onChange={tags => onChangeWordlist('banned', tags)}
+        />
+      </div>
     </Card>
     <Card id={styles.suspectWordlist} className={styles.configSetting}>
-      <h3>{lang.t('configure.suspect-words-title')}</h3>
+      <div className={styles.settingsHeader}>{lang.t('configure.suspect-words-title')}</div>
       <p className={styles.wordlistDesc}>{lang.t('configure.suspect-word-text')}</p>
-      <TagsInput
-        value={suspectWords}
-        inputProps={{placeholder: 'word or phrase'}}
-        addOnPaste={true}
-        pasteSplit={data => data.split(',').map(d => d.trim())}
-        onChange={tags => onChangeWordlist('suspect', tags)} />
+      <div className={styles.wrapper}>
+        <TagsInput
+          value={suspectWords}
+          inputProps={{placeholder: 'word or phrase'}}
+          addOnPaste={true}
+          pasteSplit={data => data.split(',').map(d => d.trim())}
+          onChange={tags => onChangeWordlist('suspect', tags)} />
+      </div>
     </Card>
   </div>
 );

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

@@ -0,0 +1,49 @@
+import React, {PropTypes} from 'react';
+import {Link} from 'react-router';
+import styles from './Widget.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations';
+
+const lang = new I18n(translations);
+
+const ActivityWidget = ({assets}) => {
+  return (
+    <div className={styles.widget}>
+      <h2 className={styles.heading}>Articles with the most conversations</h2>
+      <div className={styles.widgetHead}>
+        <p>{lang.t('streams.article')}</p>
+        <p>{lang.t('dashboard.comment_count')}</p>
+      </div>
+      <div className={styles.widgetTable}>
+        {
+          assets.length
+          ? assets.map(asset => {
+            return (
+              <div className={styles.rowLinkify} key={asset.id}>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
+                <p className={styles.widgetCount}>{asset.commentCount}</p>
+                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
+                  <p className={styles.assetTitle}>{asset.title}</p>
+                </Link>
+                <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+              </div>
+            );
+          })
+          : <div className={styles.rowLinkify}>{lang.t('dashboard.no_activity')}</div>
+        }
+      </div>
+    </div>
+  );
+};
+
+ActivityWidget.propTypes = {
+  assets: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    url: PropTypes.string,
+    commentCount: PropTypes.number,
+    author: PropTypes.string,
+    created_at: PropTypes.string
+  })).isRequired
+};
+
+export default ActivityWidget;

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

@@ -7,3 +7,28 @@
   font-size: 1.5rem;
   font-weight: bold;
 }
+
+.autoUpdate {
+  background-color: #d5d5d5;
+  padding: 3px 10px 10px 10px;
+  margin-bottom: 0;
+
+  i {
+    position: relative;
+    top: 7px;
+  }
+
+  b {
+    float: right;
+    border-radius: 20px;
+    cursor: pointer;
+    background-color: #c0c0c0;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    top: 4px;
+    position: relative;
+    line-height: 1.7em;
+    font-size: 1.3em;
+  }
+}

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

@@ -4,25 +4,33 @@ import {compose} from 'react-apollo';
 import {connect} from 'react-redux';
 import {getMetrics} from 'coral-admin/src/graphql/queries';
 import FlagWidget from './FlagWidget';
-import LikeWidget from './LikeWidget';
+import ActivityWidget from './ActivityWidget';
+import CountdownTimer from 'coral-admin/src/components/CountdownTimer';
 import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation';
 
 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: {assetsByLike, assetsByFlag}} = this.props;
+    const {data: {assetsByActivity, assetsByFlag}} = this.props;
 
     return (
-      <div className={styles.Dashboard}>
-        <FlagWidget assets={assetsByFlag} />
-        <LikeWidget assets={assetsByLike} />
+      <div>
+        <CountdownTimer handleTimeout={this.reloadData} />
+        <div className={styles.Dashboard}>
+          <FlagWidget assets={assetsByFlag} />
+          <ActivityWidget assets={assetsByActivity} />
+        </div>
       </div>
     );
   }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
 import styles from './Widget.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -6,50 +6,50 @@ import translations from 'coral-admin/src/translations';
 
 const lang = new I18n(translations);
 
-const FlagWidget = (props) => {
-  const {assets} = props;
+const FlagWidget = ({assets}) => {
 
   return (
     <div className={styles.widget}>
-      <h2 className={styles.heading}>Articles with the most flags</h2>
-      <table className={styles.widgetTable}>
-        <thead className={styles.widgetHead}>
-          <tr>
-            <th>{lang.t('streams.article')}</th>
-            <th>{lang.t('dashboard.flags')}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-            assets.length
-            ? assets.map(asset => {
-              const flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary');
-              return (
-                <tr className={styles.rowLinkify} key={asset.id}>
-                  <td>
-                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
-                      <p className={styles.assetTitle}>{asset.title}</p>
-                      <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                    </Link>
-                  </td>
-                  <td>
-                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
-                      <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
-                    </Link>
-                  </td>
-                </tr>
-              );
-            })
-            : <tr className={styles.rowLinkify}><td colSpan="2">{lang.t('dashboard.no_flags')}</td></tr>
-          }
-          { /* rows in a table with a fixed height will expand and ignore height.
-                this extra row will expand to fill the extra space. */
-            assets.length < 10 ? <tr></tr> : null
-          }
-        </tbody>
-      </table>
+      <h2 className={styles.heading}>{lang.t('dashboard.most_flags')}</h2>
+      <div className={styles.widgetHead}>
+        <p>{lang.t('streams.article')}</p>
+        <p>{lang.t('dashboard.flags')}</p>
+      </div>
+      <div className={styles.widgetTable}>
+        {
+          assets.length
+          ? assets.map(asset => {
+            let flagSummary = null;
+            if (asset.action_summaries) {
+              flagSummary = asset.action_summaries.find(s => s.type === 'FlagAssetActionSummary');
+            }
+
+            return (
+              <div className={styles.rowLinkify} key={asset.id}>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
+                <p className={styles.widgetCount}>{flagSummary ? flagSummary.actionCount : 0}</p>
+                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
+                  <p className={styles.assetTitle}>{asset.title}</p>
+                </Link>
+                <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+              </div>
+            );
+          })
+          : <div className={styles.rowLinkify}>{lang.t('dashboard.no_flags')}</div>
+        }
+      </div>
     </div>
   );
 };
 
+FlagWidget.propTypes = {
+  assets: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    url: PropTypes.string,
+    action_summaries: PropTypes.array,
+    author: PropTypes.string,
+    created_at: PropTypes.string
+  })).isRequired
+};
+
 export default FlagWidget;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
 import styles from './Widget.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -6,51 +6,46 @@ import translations from 'coral-admin/src/translations';
 
 const lang = new I18n(translations);
 
-const LikeWidget = (props) => {
-
-  const {assets} = props;
+const LikeWidget = ({assets}) => {
 
   return (
     <div className={styles.widget}>
       <h2 className={styles.heading}>Articles with the most likes</h2>
-      <table className={styles.widgetTable}>
-        <thead className={styles.widgetHead}>
-          <tr>
-            <th>{lang.t('streams.article')}</th>
-            <th>{lang.t('modqueue.likes')}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {
-            assets.length
-            ? assets.map(asset => {
-              const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary');
-              return (
-                <tr className={styles.rowLinkify} key={asset.id}>
-                  <td>
-                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
-                      <p className={styles.assetTitle}>{asset.title}</p>
-                      <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                    </Link>
-                  </td>
-                  <td>
-                    <Link className={styles.linkToAsset} to={`/admin/moderate/flagged/${asset.id}`}>
-                      <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
-                    </Link>
-                  </td>
-                </tr>
-              );
-            })
-            : <tr className={styles.rowLinkify}><td colSpan="2">{lang.t('dashboard.no_likes')}</td></tr>
-          }
-          { /* rows in a table with a fixed height will expand and ignore height.
-                this extra row will expand to fill the extra space. */
-            assets.length < 10 ? <tr></tr> : null
-          }
-        </tbody>
-      </table>
+      <div className={styles.widgetHead}>
+        <p>{lang.t('streams.article')}</p>
+        <p>{lang.t('modqueue.likes')}</p>
+      </div>
+      <div className={styles.widgetTable}>
+        {
+          assets.length
+          ? assets.map(asset => {
+            const likeSummary = asset.action_summaries.find(s => s.type === 'LikeAssetActionSummary');
+            return (
+              <div className={styles.rowLinkify} key={asset.id}>
+                <Link className={styles.linkToModerate} to={`/admin/moderate/flagged/${asset.id}`}>Moderate</Link>
+                <p className={styles.widgetCount}>{likeSummary ? likeSummary.actionCount : 0}</p>
+                <Link className={styles.linkToAsset} to={`${asset.url}#coralStreamEmbed_iframe`} target="_blank">
+                  <p className={styles.assetTitle}>{asset.title}</p>
+                </Link>
+                <p className={styles.lede}>{asset.author} — Published: {new Date(asset.created_at).toLocaleDateString()}</p>
+              </div>
+            );
+          })
+          : <div className={styles.rowLinkify}>{lang.t('dashboard.no_likes')}</div>
+        }
+      </div>
     </div>
   );
 };
 
+LikeWidget.propTypes = {
+  assets: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    url: PropTypes.string,
+    action_summaries: PropTypes.array,
+    author: PropTypes.string,
+    created_at: PropTypes.string
+  })).isRequired
+};
+
 export default LikeWidget;

client/coral-admin/src/containers/Dashboard/Widget.css

@@ -1,14 +1,17 @@
 :root {
-  --row-height: 80px;
+  --row-height: 60px;
 }
 
 .widget {
-  box-sizing: border-box;
   margin: 10px 5px 5px 5px;
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-  padding: 15px;
   flex: 1;
   background-color: white;
+  box-sizing: border-box;
+}
+
+.widget * {
+  box-sizing: border-box;
 }
 
 .heading {
@@ -19,21 +22,28 @@
 }
 
 .widgetTable {
-  width: 100%;
-  border-collapse: collapse;
-  user-select: none;
   height: calc(var(--row-height) * 10);
 }
 
-.widgetTable thead th {
+.widgetTable + div:after {
+  content: '';
+  clear: both;
+  display: block;
+}
+
+.widgetHead p {
   color: rgb(35, 102, 223);
   padding: 10px;
   text-align: left;
   text-transform: capitalize;
+  display: inline-block;
+  box-sizing: border-box;
+  margin-bottom: 0;
 }
 
-.widgetTable thead th:last-child {
-  width: 10%;
+.widgetHead p:last-child {
+  float: right;
+  margin-right: 100px;
 }
 
 .rowLinkify {
@@ -41,6 +51,7 @@
   border-bottom: 1px solid lightgrey;
   color: #555;
   height: var(--row-height);
+  padding: 10px;
 }
 
 .rowLinkify:last-child {
@@ -51,13 +62,22 @@
   background-color: #f8f8f8;
 }
 
-.widgetTable tbody td {
-  padding: 10px;
+.linkToAsset {
+  display: inline-block;
+  text-decoration: none;
 }
 
-.linkToAsset {
-  display: block;
+.linkToModerate {
+  background-color: #e0e0e0;
+  padding: 10px 14px;
   text-decoration: none;
+  color: black;
+  float: right;
+  margin-left: 15px;
+}
+
+.linkToModerate:hover {
+  background-color: #ccc;
 }
 
 .lede {
@@ -81,4 +101,6 @@
   color: #555;
   font-size: 1.3em;
   font-weight: 400;
+  float: right;
+  margin-top: 7px;
 }

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

@@ -2,13 +2,16 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import Layout from '../components/ui/Layout';
 import {checkLogin, handleLogin, logout, requestPasswordReset} from '../actions/auth';
+import {fetchConfig} from '../actions/config';
 import {FullLoading} from '../components/FullLoading';
 import AdminLogin from '../components/AdminLogin';
 
 class LayoutContainer extends Component {
   componentWillMount () {
-    const {checkLogin} = this.props;
+    const {checkLogin, fetchConfig} = this.props;
+
     checkLogin();
+    fetchConfig();
   }
   render () {
     const {
@@ -16,15 +19,19 @@ class LayoutContainer extends Component {
       loggedIn,
       loadingUser,
       loginError,
+      loginMaxExceeded,
       passwordRequestSuccess
     } = this.props.auth;
-    const {handleLogout} = this.props;
+
+    const {handleLogout, TALK_RECAPTCHA_PUBLIC} = this.props;
     if (loadingUser) { return <FullLoading />; }
     if (!isAdmin) {
       return <AdminLogin
+        loginMaxExceeded={loginMaxExceeded}
         handleLogin={this.props.handleLogin}
         requestPasswordReset={this.props.requestPasswordReset}
         passwordRequestSuccess={passwordRequestSuccess}
+        recaptchaPublic={TALK_RECAPTCHA_PUBLIC}
         errorMessage={loginError} />;
     }
     if (isAdmin && loggedIn) { return <Layout handleLogout={handleLogout} {...this.props} />; }
@@ -33,12 +40,14 @@ class LayoutContainer extends Component {
 }
 
 const mapStateToProps = state => ({
-  auth: state.auth.toJS()
+  auth: state.auth.toJS(),
+  TALK_RECAPTCHA_PUBLIC: state.config.get('data').get('TALK_RECAPTCHA_PUBLIC', null)
 });
 
 const mapDispatchToProps = dispatch => ({
   checkLogin: () => dispatch(checkLogin()),
-  handleLogin: (username, password) => dispatch(handleLogin(username, password)),
+  fetchConfig: () => dispatch(fetchConfig()),
+  handleLogin: (username, password, recaptchaResponse) => dispatch(handleLogin(username, password, recaptchaResponse)),
   requestPasswordReset: email => dispatch(requestPasswordReset(email)),
   handleLogout: () => dispatch(logout())
 });

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

@@ -3,6 +3,7 @@ import {connect} from 'react-redux';
 import {compose} from 'react-apollo';
 import key from 'keymaster';
 import isEqual from 'lodash/isEqual';
+import styles from './components/styles.css';
 
 import {modQueueQuery} from '../../graphql/queries';
 import {banUser, setCommentStatus} from '../../graphql/mutations';
@@ -17,22 +18,88 @@ import ModerationQueue from './ModerationQueue';
 import ModerationMenu from './components/ModerationMenu';
 import ModerationHeader from './components/ModerationHeader';
 import NotFoundAsset from './components/NotFoundAsset';
+import ModerationKeysModal from '../../components/ModerationKeysModal';
 
 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 commentId = {commentId: comments[selectedIndex].id};
+
+    if (accept) {
+      acceptComment(commentId);
+    } else {
+      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);
   }
 
   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) {
@@ -43,13 +110,13 @@ class ModerationContainer extends Component {
   }
 
   render () {
-    const {data, moderation, settings, assets, modQueueResort, ...props} = this.props;
+    const {data, moderation, settings, assets, onClose, ...props} = this.props;
     const providedAssetId = this.props.params.id;
     const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;
 
     let asset;
 
-    if (data.loading) {
+    if (!('premodCount' in data)) {
       return <div><Spinner/></div>;
     }
 
@@ -66,6 +133,18 @@ class ModerationContainer extends Component {
     }
 
     const comments = data[activeTab];
+    let activeTabCount;
+    switch(activeTab) {
+    case 'premod':
+      activeTabCount = data.premodCount;
+      break;
+    case 'flagged':
+      activeTabCount = data.flaggedCount;
+      break;
+    case 'rejected':
+      activeTabCount = data.rejectedCount;
+      break;
+    }
 
     return (
       <div>
@@ -75,23 +154,37 @@ class ModerationContainer extends Component {
           premodCount={data.premodCount}
           rejectedCount={data.rejectedCount}
           flaggedCount={data.flaggedCount}
-          modQueueResort={modQueueResort}
+          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}
           acceptComment={props.acceptComment}
           rejectComment={props.rejectComment}
+          loadMore={props.loadMore}
+          assetId={providedAssetId}
+          sort={this.state.sort}
+          commentCount={activeTabCount}
         />
         <BanUserDialog
           open={moderation.banDialog}
           user={moderation.user}
+          commentId={moderation.commentId}
           handleClose={props.hideBanUserDialog}
           handleBanUser={props.banUser}
+          showRejectedNote={moderation.showRejectedNote}
+          rejectComment={props.rejectComment}
         />
+      <ModerationKeysModal
+          open={moderation.modalOpen}
+          onClose={onClose}/>
       </div>
     );
   }
@@ -109,7 +202,7 @@ const mapDispatchToProps = dispatch => ({
   singleView: () => dispatch(singleView()),
   updateAssets: assets => dispatch(updateAssets(assets)),
   fetchSettings: () => dispatch(fetchSettings()),
-  showBanUserDialog: (user, commentId) => dispatch(showBanUserDialog(user, commentId)),
+  showBanUserDialog: (user, commentId, showRejectedNote) => dispatch(showBanUserDialog(user, commentId, showRejectedNote)),
   hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
 });
 

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

@@ -1,15 +1,17 @@
 import React, {PropTypes} from 'react';
 
 import Comment from './components/Comment';
+import styles from './components/styles.css';
 import EmptyCard from '../../components/EmptyCard';
 import {actionsMap} from './helpers/moderationQueueActionsMap';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
+import LoadMore from './components/LoadMore';
 
 const lang = new I18n(translations);
-const ModerationQueue = ({comments, ...props}) => {
+const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loadMore, activeTab, sort, ...props}) => {
   return (
-    <div id="moderationList">
+    <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
       <ul style={{paddingLeft: 0}}>
       {
         comments.length
@@ -19,8 +21,10 @@ const ModerationQueue = ({comments, ...props}) => {
             key={i}
             index={i}
             comment={comment}
-            commentType={props.activeTab}
+            commentType={activeTab}
+            selected={i === selectedIndex}
             suspectWords={props.suspectWords}
+            bannedWords={props.bannedWords}
             actions={actionsMap[status]}
             showBanUserDialog={props.showBanUserDialog}
             acceptComment={props.acceptComment}
@@ -31,11 +35,20 @@ const ModerationQueue = ({comments, ...props}) => {
         : <EmptyCard>{lang.t('modqueue.emptyqueue')}</EmptyCard>
       }
       </ul>
+      <LoadMore
+        comments={comments}
+        loadMore={loadMore}
+        sort={sort}
+        tab={activeTab}
+        showLoadMore={comments.length < commentCount}
+        assetId={props.assetId}
+        />
     </div>
   );
 };
 
 ModerationQueue.propTypes = {
+  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   currentAsset: PropTypes.object,
   showBanUserDialog: PropTypes.func.isRequired,

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

@@ -10,6 +10,7 @@ import FlagBox from './FlagBox';
 import CommentType from './CommentType';
 import ActionButton from 'coral-admin/src/components/ActionButton';
 import BanUserButton from 'coral-admin/src/components/BanUserButton';
+import {getActionSummary} from 'coral-framework/utils';
 
 const linkify = new Linkify();
 
@@ -17,56 +18,65 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
 const lang = new I18n(translations);
 
-const Comment = ({actions = [], ...props}) => {
-  const links = linkify.getMatches(props.comment.body);
-  const actionSummaries = props.comment.action_summaries;
+const Comment = ({actions = [], comment, ...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');
+
   return (
-    <li tabIndex={props.index}
-        className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
+    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem}`}>
       <div className={styles.container}>
         <div className={styles.itemHeader}>
-        <div className={styles.author}>
-          <span>{props.comment.user.name}</span>
-          <span className={styles.created}>
-              {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
+          <div className={styles.author}>
+            <span>
+              {comment.user.name}
             </span>
-          <BanUserButton user={props.comment.user} onClick={() => props.showBanUserDialog(props.comment.user, props.comment.id)} />
-          <CommentType type={props.commentType} />
-        </div>
-        <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) =>
-              <ActionButton key={i}
-                            type={action}
-                            user={props.comment.user}
-                            acceptComment={() => props.acceptComment({commentId: props.comment.id})}
-                            rejectComment={() => props.rejectComment({commentId: props.comment.id})}
-              />
-            )}
+            <span className={styles.created}>
+              {timeago().format(comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
+            </span>
+            <BanUserButton user={comment.user} onClick={() => props.showBanUserDialog(comment.user, comment.id, comment.status !== 'REJECTED')} />
+            <CommentType type={props.commentType} />
           </div>
-          {props.comment.user.status === 'banned' ?
+          {comment.user.status === 'banned' ?
             <span className={styles.banned}>
-                <Icon name='error_outline'/>
+              <Icon name='error_outline'/>
               {lang.t('comment.banned_user')}
-              </span>
+            </span>
             : null}
         </div>
-      </div>
-        {!props.currentAsset && (
-          <div className={styles.moderateArticle}>
-            Story: {props.comment.asset.title} <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate &rarr;</Link>
-          </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}>
-            <Linkify component='span' properties={{style: linkStyles}}>
-              <Highlighter searchWords={props.suspectWords} textToHighlight={props.comment.body}/>
-            </Linkify>
+            <Highlighter
+              searchWords={[...props.suspectWords, ...props.bannedWords, ...linkText]}
+              textToHighlight={comment.body} />
           </p>
+          <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) =>
+                <ActionButton key={i}
+                              type={action}
+                              user={comment.user}
+                              acceptComment={() => props.acceptComment({commentId: comment.id})}
+                              rejectComment={() => props.rejectComment({commentId: comment.id})}
+                />
+              )}
+            </div>
+          </div>
         </div>
       </div>
-      {actionSummaries && <FlagBox actionSummaries={actionSummaries} />}
+      {
+        flagActions && flagActions.length
+        ? <FlagBox actions={flagActions} actionSummaries={flagActionSummaries} />
+        : null
+      }
     </li>
   );
 };
@@ -75,10 +85,12 @@ Comment.propTypes = {
   acceptComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   currentAsset: PropTypes.object,
   comment: PropTypes.shape({
     body: PropTypes.string.isRequired,
     action_summaries: PropTypes.array,
+    actions: PropTypes.array,
     created_at: PropTypes.string.isRequired,
     user: PropTypes.shape({
       status: PropTypes.string
@@ -90,9 +102,4 @@ Comment.propTypes = {
   })
 };
 
-const linkStyles = {
-  backgroundColor: 'rgb(255, 219, 135)',
-  padding: '1px 2px'
-};
-
 export default Comment;

client/coral-admin/src/containers/ModerationQueue/components/CommentType.css

@@ -4,12 +4,12 @@
   top: 11px;
   color: white;
   background: grey;
-  padding: 2px 13px;
-  font-size: 14px;
   height: 32px;
   box-sizing: border-box;
   line-height: 29px;
-  padding-left: 26px;
+  padding: 2px 8px 2px 26px;
+  border-radius: 2px;
+  font-size: 12px;
 
   i {
     font-size: 14px;

client/coral-admin/src/containers/ModerationQueue/components/FlagBox.css

@@ -53,3 +53,17 @@
     font-size: 12px;
   }
 }
+
+.lessDetail {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.subDetail {
+  font-weight: normal;
+  color: #888;
+
+  span {
+    color: black;
+  }
+}

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

@@ -1,6 +1,17 @@
 import React, {Component, PropTypes} from 'react';
 import {Icon} from 'coral-ui';
 import styles from './FlagBox.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations.json';
+const lang = new I18n(translations);
+
+const shortReasons = {
+  'This comment is offensive': lang.t('modqueue.offensive'),
+  'This looks like an ad/marketing': lang.t('modqueue.spam/ads'),
+  'This user is impersonating': lang.t('modqueue.impersonating'),
+  'I don\'t like this username': lang.t('modqueue.dont-like-username'),
+  'Other': lang.t('modqueue.other')
+};
 
 class FlagBox extends Component {
   constructor () {
@@ -16,27 +27,50 @@ class FlagBox extends Component {
     }));
   }
 
+  reasonMap = (reason) => {
+    const shortReason = shortReasons[reason];
+
+    // if the short reason isn't found, just return the long one.
+    return shortReason ? shortReason : reason;
+  }
+
   render() {
-    const {props} = this;
+    const {actionSummaries, actions} = this.props;
+    const {showDetail} = this.state;
+
     return (
       <div className={styles.flagBox}>
         <div className={styles.container}>
           <div className={styles.header}>
-            <Icon name='flag'/><h3>Flags ({props.actionSummaries.length}):</h3>
+            <Icon name='flag'/><h3>Flags ({actionSummaries.length}):</h3>
             <ul>
-              {props.actionSummaries.map((action, i) =>
-                <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
+              {actionSummaries.map((action, i) =>
+                <li key={i} className={styles.lessDetail}>{this.reasonMap(action.reason)} (<strong>{action.count}</strong>)</li>
               )}
             </ul>
-            {/* <a onClick={this.toggleDetail} className={styles.moreDetail}>More detail</a>*/}
+            <a onClick={this.toggleDetail} className={styles.moreDetail}>{showDetail ? lang.t('modqueue.less-detail') : lang.t('modqueue.more-detail')}</a>
           </div>
-          {this.state.showDetail && (<div className={styles.detail}>
-            <ul>
-              {props.actionSummaries.map((action, i) =>
-                <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
-              )}
-            </ul>
-          </div>)}
+          {showDetail && (
+            <div className={styles.detail}>
+              <ul>
+                {actionSummaries.map((summary, i) => {
+
+                  const actionList = actions.filter(a => a.reason === summary.reason);
+
+                  return (
+                    <li key={i}>
+                      {this.reasonMap(summary.reason)} (<strong>{summary.count}</strong>)
+                      <ul>
+                        {
+                          actionList.map((action, j) => <li key={`${i}_${j}`} className={styles.subDetail}><span>{action.user.username}</span> {action.message}</li>)
+                        }
+                      </ul>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          )}
         </div>
       </div>
     );
@@ -44,7 +78,14 @@ class FlagBox extends Component {
 }
 
 FlagBox.propTypes = {
-  actionSummaries: PropTypes.array.isRequired
+  actionSummaries: PropTypes.arrayOf(PropTypes.shape({
+    reason: PropTypes.string,
+    count: PropTypes.number
+  })).isRequired,
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    message: PropTypes.string,
+    user: PropTypes.shape({username: PropTypes.string})
+  })).isRequired
 };
 
 export default FlagBox;

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

@@ -0,0 +1,31 @@
+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={() =>
+          loadMore({
+            cursor: comments[comments.length - 1].created_at,
+            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']).isRequired,
+  assetId: PropTypes.string,
+  showLoadMore: PropTypes.bool.isRequired
+};
+
+export default LoadMore;

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

@@ -10,17 +10,17 @@ const ModerationHeader = props => (
           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">
-                {props.asset.title}
-                <a href={props.asset.url} className={styles.settingsButton}><Icon name="settings"/></a>
+              <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/streams">Select Stream</Link>
+              <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/streams">Select Stream</Link>
+              <Link className="mdl-tabs__tab" to="/admin/stories">Select Stream</Link>
             </div>
         }
       </div>

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

@@ -1,4 +1,4 @@
-import React, {PropTypes, Component} from 'react';
+import React, {PropTypes} from 'react';
 import CommentCount from './CommentCount';
 import styles from './styles.css';
 import {SelectField, Option} from 'react-mdl-selectfield';
@@ -8,57 +8,63 @@ import {Link} from 'react-router';
 
 const lang = new I18n(translations);
 
-class ModerationMenu extends Component {
-  state = {
-    sort: 'REVERSE_CHRONOLOGICAL',
-  }
+const ModerationMenu = (
+  {asset, premodCount, rejectedCount, flaggedCount, selectSort, sort}
+) => {
+  const premodPath = asset
+    ? `/admin/moderate/premod/${asset.id}`
+    : '/admin/moderate/premod';
+  const rejectPath = asset
+    ? `/admin/moderate/rejected/${asset.id}`
+    : '/admin/moderate/rejected';
+  const flagPath = asset
+    ? `/admin/moderate/flagged/${asset.id}`
+    : '/admin/moderate/flagged';
 
-  static propTypes = {
-    premodCount: PropTypes.number.isRequired,
-    rejectedCount: PropTypes.number.isRequired,
-    flaggedCount: PropTypes.number.isRequired,
-    asset: PropTypes.shape({
-      id: PropTypes.string
-    })
-  }
-
-  selectSort = (sort) => {
-    this.setState({sort});
-    this.props.modQueueResort(sort);
-  }
-
-  render() {
-    const {asset, premodCount, rejectedCount, flaggedCount} = this.props;
-    const premodPath = asset ? `/admin/moderate/premod/${asset.id}` : '/admin/moderate/premod';
-    const rejectPath = asset ? `/admin/moderate/rejected/${asset.id}` : '/admin/moderate/rejected';
-    const flagPath = asset ? `/admin/moderate/flagged/${asset.id}` : '/admin/moderate/flagged';
-    return (
-      <div className='mdl-tabs'>
-        <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-          <div className={styles.tabBarPadding}/>
-          <div>
-            <Link to={premodPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-              {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
-            </Link>
-            <Link to={rejectPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-              {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
-            </Link>
-            <Link to={flagPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-              {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
-            </Link>
-          </div>
-          <SelectField
-            className={styles.selectField}
-            label='Sort'
-            value={this.state.sort}
-            onChange={sort => this.selectSort(sort)}>
-            <Option value={'REVERSE_CHRONOLOGICAL'}>Newest First</Option>
-            <Option value={'CHRONOLOGICAL'}>Oldest First</Option>
-          </SelectField>
+  return (
+    <div className="mdl-tabs">
+      <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
+        <div className={styles.tabBarPadding} />
+        <div>
+          <Link
+            to={premodPath}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
+          </Link>
+          <Link
+            to={flagPath}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
+          </Link>
+          <Link
+            to={rejectPath}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
+          </Link>
         </div>
+        <SelectField
+          className={styles.selectField}
+          label="Sort"
+          value={sort}
+          onChange={sort => selectSort(sort)}>
+          <Option value={'REVERSE_CHRONOLOGICAL'}>Newest First</Option>
+          <Option value={'CHRONOLOGICAL'}>Oldest First</Option>
+        </SelectField>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+ModerationMenu.propTypes = {
+  premodCount: PropTypes.number.isRequired,
+  rejectedCount: PropTypes.number.isRequired,
+  flaggedCount: PropTypes.number.isRequired,
+  asset: PropTypes.shape({
+    id: PropTypes.string
+  })
+};
 
 export default ModerationMenu;

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

@@ -6,7 +6,7 @@ const NotFound = props => (
   <div className={`mdl-card mdl-shadow--2dp ${styles.notFound}`}>
     <p>
       The provided asset id <Link to={`/admin/moderate/${props.assetId}`}>{props.assetId}</Link> does not exist.
-      <Link className={styles.goToStreams} to="/admin/streams">Go to Streams</Link>
+      <Link className={styles.goToStreams} to="/admin/stories">Go to Streams</Link>
     </p>
   </div>
 );

client/coral-admin/src/containers/ModerationQueue/components/styles.css

@@ -84,11 +84,10 @@ span {
   margin-bottom: -1px;
 
   .settingsButton {
-    i {
-      vertical-align: middle;
-      margin-left: 10px;
-      margin-top: -4px;
-    }
+    vertical-align: middle;
+    margin-left: 10px;
+    margin-top: -4px;
+    font-size: 16px;
   }
 
   .moderateAsset {
@@ -114,7 +113,15 @@ span {
       }
 
       &:nth-child(2) {
-       text-align: center;
+        span {
+          text-align: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          max-width: 344px;
+          display: inline-block;
+          vertical-align: top;
+        }
       }
 
       &:last-child {
@@ -136,7 +143,7 @@ span {
     display: none;
   }
 
-  &.singleView .listItem.activeItem {
+  &.singleView .listItem.selected {
     display: block;
     height: 100%;
     font-size: 1.5em;
@@ -147,7 +154,6 @@ span {
       position: fixed;
       bottom: 60px;
       left: 25%;
-      margin: 0 auto;
       display: flex;
       justify-content: space-around;
       width: 50%;
@@ -164,18 +170,17 @@ span {
   border-bottom: 1px solid #e0e0e0;
   font-size: 18px;
   width: 100%;
-  max-width: 660px;
+  max-width: 700px;
   min-width: 400px;
   margin: 0 auto;
   position: relative;
-  transition: box-shadow 200ms;
-  margin-top: 0;
-  padding: 4px 0 0;
+  transition: all 200ms;
+  padding: 10px 0 0;
   min-height: 220px;
 
   .container {
     padding: 0 14px;
-    min-height: 220px;
+    min-height: 180px;
   }
 
   &:hover {
@@ -186,6 +191,11 @@ span {
     border-bottom: none;
   }
 
+  &.selected {
+    max-width: 720px;
+    max-height: 410px;
+  }
+
   .context {
     a {
       color: #f36451;
@@ -195,11 +205,8 @@ span {
   }
 
    .sideActions {
-     position: absolute;
-     right: 0;
      height: 100%;
      top: 0;
-     padding: 100px 12px 65px;
      box-sizing: border-box;
    }
 
@@ -209,17 +216,21 @@ span {
     justify-content: space-between;
 
     .author {
+      font-weight: 300;
       min-width: 230px;
       display: flex;
       align-items: center;
+      color: #262626;
+      font-size: 16px;
     }
   }
 
   .itemBody {
     display: flex;
     justify-content: space-between;
-    margin-top: 15px;
-    font-size: 16px;
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 300;
   }
 
   .avatar {
@@ -233,9 +244,11 @@ span {
   }
 
   .created {
-    color: #666;
-    font-size: 13px;
+    color: #262626;
+    font-size: 14px;
     margin-left: 15px;
+    line-height: 1px;
+    font-weight: 300;
   }
 
   .actionButton {
@@ -246,10 +259,11 @@ span {
   .body {
     margin-top: 0px;
     flex: 1;
-    font-size: 0.88em;
     color: black;
     max-width: 500px;
     word-wrap: break-word;
+    font-weight: 300;
+    font-size: 16px;
   }
 
   .flagged {
@@ -319,9 +333,12 @@ span {
 .Comment {
 
   .moderateArticle {
-    font-size: 15px;
-    margin-top: 14px;
+    font-size: 14px;
+    margin: 10px 0;
     font-weight: 500;
+    line-height: 1.2;
+    max-width: 500px;
+
     a {
       display: inline-block;
       color: #063b9a;
@@ -381,3 +398,23 @@ span {
     cursor: pointer;
    }
 }
+
+.loadMoreContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+};
+
+.loadMore {
+  width: 100%;
+  text-align: center;
+  color: #FFF;
+  max-width: 660px;
+  margin-bottom: 30px;
+  background-color: #2376D8;
+  cursor: pointer;
+}
+
+.loadMore:hover {
+  background-color: #4399FF;
+}

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

@@ -0,0 +1,192 @@
+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 'coral-admin/src/actions/assets';
+import translations from 'coral-admin/src/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';
+import sortBy from 'lodash/sortBy';
+
+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 = sortBy(assets.ids.map((id) => assets.byId[id]), 'publication_date');
+
+    if (this.state.sort === 'desc') {
+      assetsIds.reverse();
+    }
+
+    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/Streams/Stories.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import styles from './Streams.css';
+import styles from './Stories.css';
 import {connect} from 'react-redux';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import {fetchAssets, updateAssetState} from '../../actions/assets';
@@ -12,7 +12,7 @@ import EmptyCard from 'coral-admin/src/components/EmptyCard';
 
 const limit = 25;
 
-class Streams extends Component {
+class Stories extends Component {
 
   state = {
     search: '',
@@ -80,8 +80,8 @@ class Streams extends Component {
       <div
         className={closed ? styles.statusMenuClosed : styles.statusMenuOpen}
         onClick={this.onStatusClick(closed, id, statusMenuOpen)}>
-        {closed ? lang.t('streams.closed') : lang.t('streams.open')}
         {!statusMenuOpen && <Icon className={styles.statusMenuIcon} name='keyboard_arrow_down'/>}
+        {closed ? lang.t('streams.closed') : lang.t('streams.open')}
       </div>
       {
         statusMenuOpen &&
@@ -182,6 +182,6 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Streams);
+export default connect(mapStateToProps, mapDispatchToProps)(Stories);
 
 const lang = new I18n(translations);

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

@@ -4,6 +4,7 @@ fragment metrics on Asset {
   url
   author
   created_at
+  commentCount
   action_summaries {
     type: __typename
     actionCount

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

@@ -12,4 +12,19 @@ fragment commentView on Comment {
       id
       title
     }
+    action_summaries {
+      count
+      ... on FlagActionSummary {
+        reason
+      }
+    }
+    actions {
+      ... on FlagAction {
+        reason
+        message
+        user {
+          username
+        }
+      }
+    }
 }

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

@@ -1,6 +1,7 @@
 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';
 
 export const banUser = graphql(SET_USER_STATUS, {
   props: ({mutate}) => ({
@@ -9,11 +10,40 @@ export const banUser = graphql(SET_USER_STATUS, {
         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: ({userId, message}) => {
+      return mutate({
+        variables: {
+          userId,
+          message
+        },
+        refetchQueries: ['Users']
+      });
+    }
+  })
+});
+
 export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
   props: ({mutate}) => ({
     acceptComment: ({commentId}) => {
@@ -22,7 +52,26 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
           commentId,
           status: 'ACCEPTED'
         },
-        refetchQueries: ['ModQueue']
+        updateQueries: {
+          ModQueue: (oldData) => {
+            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,
+              flaggedCount,
+              rejectedCount,
+              premod,
+              flagged,
+              rejected,
+            };
+          }
+        }
       });
     },
     rejectComment: ({commentId}) => {
@@ -31,7 +80,27 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
           commentId,
           status: 'REJECTED'
         },
-        refetchQueries: ['ModQueue']
+        updateQueries: {
+          ModQueue: (oldData) => {
+            const comment = oldData.premod.concat(oldData.flagged).filter(c => c.id === commentId)[0];
+            const rejected = [comment].concat(oldData.rejected);
+            const premod = oldData.premod.filter(c => c.id !== commentId);
+            const flagged = oldData.flagged.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 = oldData.rejectedCount + 1;
+
+            return {
+              ...oldData,
+              premodCount,
+              flaggedCount,
+              rejectedCount,
+              premod,
+              flagged,
+              rejected
+            };
+          }
+        }
       });
     }
   })

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

@@ -0,0 +1,7 @@
+mutation suspendUser($userId: ID!, $message: String) {
+  suspendUser(id: $userId, message: $message) {
+    errors {
+      translation_key
+    }
+  }
+}

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

@@ -1,6 +1,8 @@
 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';
 
 export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
@@ -14,7 +16,8 @@ export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
   },
   props: ({ownProps: {params: {id = null}}, data}) => ({
     data,
-    modQueueResort: modQueueResort(id, data.fetchMore)
+    modQueueResort: modQueueResort(id, data.fetchMore),
+    loadMore: loadMore(data.fetchMore)
   })
 });
 
@@ -30,6 +33,50 @@ export const getMetrics = graphql(METRICS, {
   }
 });
 
+export const loadMore = (fetchMore) => ({limit, cursor, sort, tab, asset_id}) => {
+  let statuses;
+  switch(tab) {
+  case 'premod':
+    statuses = ['PREMOD'];
+    break;
+  case 'flagged':
+    statuses = ['NONE', 'PREMOD'];
+    break;
+  case 'rejected':
+    statuses = ['REJECTED'];
+    break;
+  }
+  return fetchMore({
+    query: MOD_QUEUE_LOAD_MORE,
+    variables: {
+      limit,
+      cursor,
+      sort,
+      statuses,
+      asset_id
+    },
+    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,

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

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

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

@@ -4,7 +4,7 @@ query Metrics ($from: Date!, $to: Date!) {
   assetsByFlag: assetMetrics(from: $from, to: $to, sort: FLAG) {
     ...metrics
   }
-  assetsByLike: assetMetrics(from: $from, to: $to, sort: LIKE) {
+  assetsByActivity: assetMetrics(from: $from, to: $to, sort: ACTIVITY) {
     ...metrics
   }
 }

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

@@ -15,12 +15,6 @@ query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
         sort: $sort
     }) {
         ...commentView
-        action_summaries {
-          count
-          ... on FlagActionSummary {
-            reason
-          }
-        }
     }
     rejected: comments(query: {
         statuses: [REJECTED],

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

@@ -0,0 +1,26 @@
+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/index.js

@@ -7,7 +7,6 @@ import store from './services/store';
 
 import App from './components/App';
 
-import 'react-mdl/extra/material.css';
 import 'react-mdl/extra/material.js';
 
 render(

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

@@ -23,8 +23,13 @@ export default function assets (state = initialState, action) {
 }
 
 const replaceAssets = (action, state) => {
-  const assets = fromJS(action.assets.reduce((prev, curr) => { prev[curr.id] = curr; return prev; }, {}));
-  return state.set('byId', assets)
-  .set('count', action.count)
-  .set('ids', List(assets.keys()));
+  const assets = fromJS(action.assets.reduce((prev, curr) => {
+    prev[curr.id] = curr;
+    return prev;
+  }, {}));
+
+  return state
+    .set('byId', assets)
+    .set('count', action.count)
+    .set('ids', List(assets.keys()));
 };

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

@@ -6,6 +6,7 @@ const initialState = Map({
   user: null,
   isAdmin: false,
   loginError: null,
+  loginMaxExceeded: false,
   passwordRequestSuccess: null
 });
 
@@ -29,12 +30,18 @@ export default function auth (state = initialState, action) {
     return initialState;
   case actions.LOGIN_REQUEST:
     return state.set('loginError', null);
+  case actions.LOGIN_SUCCESS:
+    return state.set('loginMaxExceeded', false).set('loginError', null);
   case actions.LOGIN_FAILURE:
     return state.set('loginError', action.message);
   case actions.FETCH_FORGOT_PASSWORD_REQUEST:
     return state.set('passwordRequestSuccess', null);
   case actions.FETCH_FORGOT_PASSWORD_SUCCESS:
     return state.set('passwordRequestSuccess', 'If you have a registered account, a password reset link was sent to that email.');
+  case actions.LOGIN_MAXIMUM_EXCEEDED:
+    return state
+      .set('loginMaxExceeded', true)
+      .set('loginError', action.message);
   default :
     return state;
   }

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

@@ -6,58 +6,88 @@ import {
   FETCH_COMMENTERS_SUCCESS,
   SORT_UPDATE,
   SET_ROLE,
-  SET_COMMENTER_STATUS
+  SET_COMMENTER_STATUS,
+  SHOW_BANUSER_DIALOG,
+  HIDE_BANUSER_DIALOG,
+  SHOW_SUSPENDUSER_DIALOG,
+  HIDE_SUSPENDUSER_DIALOG
 } from '../constants/community';
 
 const initialState = Map({
   community: Map(),
-  isFetching: false,
-  error: '',
-  commenters: [],
-  field: 'created_at',
-  asc: false,
-  totalPages: 0,
-  page: 0
+  isFetchingPeople: false,
+  errorPeople: '',
+  accounts: [],
+  fieldPeople: 'created_at',
+  ascPeople: false,
+  totalPagesPeople: 0,
+  pagePeople: 0,
+  user: Map({}),
+  banDialog: false,
+  suspendDialog: false
 });
 
 export default function community (state = initialState, action) {
   switch (action.type) {
   case FETCH_COMMENTERS_REQUEST :
     return state
-      .set('isFetching', true);
+      .set('isFetchingPeople', true);
   case FETCH_COMMENTERS_FAILURE :
     return state
-      .set('isFetching', false)
-      .set('error', action.error);
+      .set('isFetchingPeople', false)
+      .set('errorPeople', action.error);
+
   case FETCH_COMMENTERS_SUCCESS : {
-    const {commenters, type, ...rest} = action; // eslint-disable-line
+    const {accounts, type, page, count, limit, totalPages, ...rest} = action; // eslint-disable-line
     return state
       .merge({
-        isFetching: false,
-        error: '',
+        isFetchingPeople: false,
+        errorPeople: '',
+        pagePeople: page,
+        countPeople: count,
+        limitPeople: limit,
+        totalPagesPeople: totalPages,
         ...rest
       })
-      .set('commenters', commenters); // Sets to normal array
+      .set('accounts', accounts); // Sets to normal array
   }
   case SET_ROLE : {
-    const commenters = state.get('commenters');
+    const commenters = state.get('accounts');
     const idx = commenters.findIndex(el => el.id === action.id);
 
     commenters[idx].roles[0] = action.role;
-    return state.set('commenters', commenters.map(id => id));
+    return state.set('accounts', commenters.map(id => id));
   }
   case SET_COMMENTER_STATUS: {
-    const commenters = state.get('commenters');
+    const commenters = state.get('accounts');
     const idx = commenters.findIndex(el => el.id === action.id);
 
     commenters[idx].status = action.status;
-    return state.set('commenters', commenters.map(id => id));
+    return state.set('accounts', commenters.map(id => id));
 
   }
   case SORT_UPDATE :
     return state
-      .set('field', action.sort.field)
-      .set('asc', !state.get('asc'));
+      .set('fieldPeople', action.sort.field)
+      .set('ascPeople', !state.get('ascPeople'));
+  case HIDE_BANUSER_DIALOG:
+    return state
+      .set('banDialog', false);
+  case SHOW_BANUSER_DIALOG:
+    return state
+      .merge({
+        user: Map(action.user),
+        banDialog: true
+      });
+  case HIDE_SUSPENDUSER_DIALOG:
+    return state
+      .set('suspendDialog', false);
+  case SHOW_SUSPENDUSER_DIALOG:
+    return state
+      .merge({
+        user: Map(action.user),
+        suspendDialog: true
+      });
   default :
     return state;
   }

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

@@ -0,0 +1,16 @@
+import {Map} from 'immutable';
+
+import * as actions from '../actions/config';
+
+const initialState = Map({
+  data: Map({})
+});
+
+export default function config (state = initialState, action) {
+  switch (action.type) {
+  case actions.CONFIG_UPDATED:
+    return state.set('data', Map(action.data));
+  default:
+    return state;
+  }
+}

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

@@ -4,6 +4,7 @@ import settings from './settings';
 import community from './community';
 import moderation from './moderation';
 import install from './install';
+import config from './config';
 
 export default {
   auth,
@@ -11,5 +12,6 @@ export default {
   settings,
   community,
   moderation,
-  install
+  install,
+  config
 };

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

@@ -19,6 +19,7 @@ export default function moderation (state = initialState, action) {
       .merge({
         user: Map(action.user),
         commentId: action.commentId,
+        showRejectedNote: action.showRejectedNote,
         banDialog: true
       });
   case actions.SET_ACTIVE_TAB:

client/coral-admin/src/services/client.js

@@ -1,7 +1,9 @@
 import ApolloClient, {addTypename} from 'apollo-client';
 import getNetworkInterface from './transport';
+import fragmentMatcher from './fragmentMatcher';
 
 export const client = new ApolloClient({
+  fragmentMatcher,
   addTypename: true,
   queryTransformer: addTypename,
   dataIdFromObject: (result) => {