Merge pull request #826 from coralproject/featured-adm

Feature Comments for Moderators / Admins

.dockerignore

@@ -1,9 +1,10 @@
 # excluded because we'll likely need to rebuild this.
 node_modules
 
-# scripts are used during development and testing, not
+# most scripts are used during development and testing, not
 # production.
 scripts
+!scripts/generateIntrospectionResult.js
 
 # documentation should not be visable in production.
 docs

.eslintignore

@@ -3,13 +3,16 @@ docs
 client/lib
 **/*.html
 plugins/*
-!plugins/coral-plugin-facebook-auth
-!plugins/coral-plugin-auth
-!plugins/coral-plugin-respect
-!plugins/coral-plugin-offtopic
-!plugins/coral-plugin-like
-!plugins/coral-plugin-mod
-!plugins/coral-plugin-love
-!plugins/coral-plugin-viewing-options
-!plugins/coral-plugin-comment-content
+!plugins/talk-plugin-facebook-auth
+!plugins/talk-plugin-auth
+!plugins/talk-plugin-respect
+!plugins/talk-plugin-offtopic
+!plugins/talk-plugin-like
+!plugins/talk-plugin-mod
+!plugins/talk-plugin-love
+!plugins/talk-plugin-viewing-options
+!plugins/talk-plugin-comment-content
+!plugins/talk-plugin-permalink
+!plugins/talk-plugin-featured-comments
+
 node_modules

.eslintrc.json

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

.gitignore

@@ -5,25 +5,30 @@ dist
 npm-debug.log*
 dump.rdb
 
+client/coral-framework/graphql/introspection.json
+
 .env
 *.cfg
 
 .idea/
 *.swp
+*.DS_STORE
 
 test/e2e/reports
 coverage/
 
 plugins.json
 plugins/*
-!plugins/coral-plugin-facebook-auth
-!plugins/coral-plugin-auth
-!plugins/coral-plugin-respect
-!plugins/coral-plugin-offtopic
-!plugins/coral-plugin-like
-!plugins/coral-plugin-mod
-!plugins/coral-plugin-love
-!plugins/coral-plugin-viewing-options
-!plugins/coral-plugin-comment-content
+!plugins/talk-plugin-facebook-auth
+!plugins/talk-plugin-auth
+!plugins/talk-plugin-respect
+!plugins/talk-plugin-offtopic
+!plugins/talk-plugin-like
+!plugins/talk-plugin-mod
+!plugins/talk-plugin-love
+!plugins/talk-plugin-viewing-options
+!plugins/talk-plugin-comment-content
+!plugins/talk-plugin-permalink
+!plugins/talk-plugin-featured-comments
 
 **/node_modules/*

CONTRIBUTING.md

@@ -1,77 +0,0 @@
-# Contributor's Guide
-
-Welcome! We are very excited that you are interested in contributing to Talk.
-
-This document is a companion to help you approach contributing. If it does not do so, please [let us know how we can improve it](https://github.com/coralproject/talk/issues)!
-
-By contributing to this project you agree to the [Code of Conduct](https://coralproject.net/code-of-conduct.html).
-
-## Product Roadmap
-
-You can view what the Coral Team is working on next here https://www.pivotaltracker.com/n/projects/1863625.
-
-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:
-
-* make clarity, grammar and completeness updates,
-* create new / missing sections, and
-* take the lead in making sections, or the over all structure better.
-
-### But how?
-
-* Our public docs site can be updated [here](https://github.com/coralproject/docs).
-* [Let us know](https://github.com/coralproject/talk/wiki/Contact-Us) if you'd like permission to update our wiki.
-* Update any of our .md docs files by following [this guide](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging).
-* Our API docs need to be kept honest. [Update them here](https://github.com/coralproject/talk/blob/master/docs/swagger.yaml).
-
-## Integrate into your environment
-
-First, [set up a dev environment](https://github.com/coralproject/talk/blob/master/INSTALL.md). Please let us know how this goes!
-
-Talk is designed to integrate into existing environments in a variety of ways:
-
-* [Auth integrations](https://github.com/coralproject/talk/wiki/Security#authentication-strategies)
-* [Push assets into Talk](https://github.com/coralproject/talk/blob/master/routes/api/assets/index.js)
-* Monitoring Hooks (coming in 2017)
-
-If you're considering deploying Talk, [please let us know](https://github.com/coralproject/talk/wiki/Contact-Us)! We are quite literally doing this for you and want to help you succeed any way we can.
-
-If you are writing custom integration code in your fork of Talk, please consider keeping it generic and filing a Pull Request to contribute it back to the project! See our [forking and merging guidelines](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging) for more info.
-
-## Write some code
-
-First, [set up a dev environment](https://github.com/coralproject/talk/blob/master/INSTALL.md). Please let us know how this goes!
-
-### Build a New Feature / Plugin
-
-Talk is beginning life as a Commenting Platform, but is architected to support many varieties of community engagement.
-
-Please [contact us](https://github.com/coralproject/talk/wiki/Contact-Us) early and often if you'd like to help. We would love to hear your ideas for features and plugins and help you find a way to productively engage the project.
-
-To get an idea of where the Coral Team is going, see:
-
-* 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).
-
-
-Examples:
-
-* [Add An Emoji Button to Comments](https://github.com/coralproject/talk/wiki/Add-An-Emoji-Button-to-Comments)
-
-
-### Work on the Core
-
-There is always more work to be done to make an application more stable, scaleable and secure.
-
-If you see issues in the code or have ideas on how we may improve Talk, please consider:
-
-* [contributing a fix](https://github.com/coralproject/talk/wiki/Forking,-Branching-and-Merging),
-* [filing an issue](https://github.com/coralproject/talk/issues), or
-* or otherwise [letting us know](https://github.com/coralproject/talk/wiki/Contact-Us).

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:7.8
+FROM node:8
 
 # Create app directory
 RUN mkdir -p /usr/src/app
@@ -17,7 +17,6 @@ RUN yarn global add node-gyp && \
     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.

INSTALL.md

@@ -1,275 +0,0 @@
-## 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
-
-- 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/) ~7.8
-- [Yarn](https://yarnpkg.com/) ^0.22.0
-
-_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
-git clone https://github.com/coralproject/talk.git
-```
-
-#### Building
-
-We now have to install the dependencies and build the static assets.
-
-```bash
-# Install package dependancies
-yarn
-
-# Build static files
-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
-environment.
-
-You can start the server after configuring the server using the command:
-
-```bash
-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 while
-  also sourcing a `.env` file in your local directory for configuration
-
-# Setup
-
-Once you've installed Talk (either via Docker or source), you still need to
-setup the application. If you are unfamiliar with any terminology used in the
-setup process, refer to the `TERMINOLOGY.md` document.
-
-## Via Web
-
-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.
-
-## Via CLI
-
-If you want to perform your setup through the terminal, you can simply run:
-
-```bash
-cli setup
-```
-
-And follow the instructions to perform initial setup and create your first user
-account.
-
-
-# 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

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

README.md

@@ -5,90 +5,9 @@ Online comments are broken. Our open-source Talk tool rethinks how moderation, c
 Third party licenses are available via the `/client/3rdpartylicenses.txt`
 endpoint when the server is running with built assets.
 
-## Contributing to Talk
+## Documentation
 
-See our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md)!
-
-## Usage
-
-### Installation
-
-To set up a development environment or build from source, see [INSTALL.md](https://github.com/coralproject/talk/blob/master/INSTALL.md).
-
-To launch a Talk server of your own from your browser without any need to muck about in a terminal or think about engineering concepts, stay tuned. We will launch [our installer](https://github.com/coralproject/talk-install) shortly!
-
-### Configuration
-
-The Talk application looks for the following configuration values either as environment variables:
-
-- `TALK_MONGO_URL` (*required*) - the database connection string for the MongoDB database.
-- `TALK_REDIS_URL` (*required*) - the database connection string for the Redis database.
-- `TALK_ROOT_URL` (*required*) - root url of the installed application externally
-available in the format: `<scheme>://<host>` without the path.
-- `TALK_JWT_SECRET` (*required*) - a long and cryptographical secure random string which will be used to
-sign and verify tokens via a `HS256` algorithm.
-- `TALK_JWT_EXPIRY` (_optional_) - the expiry duration (`exp`) for the tokens issued for logged in sessions (Default `1 day`)
-- `TALK_JWT_ISSUER` (_optional_) - the issuer (`iss`) claim for login JWT tokens (Default `process.env.TALK_ROOT_URL`)
-- `TALK_JWT_AUDIENCE` (_optional_) - the audience (`aud`) claim for login JWT tokens (Default `talk`)
-- `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.
-- `TALK_SMTP_PASSWORD` (*required for email*) - password for the SMTP provider you are using.
-- `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.
-
-### Running Migrations
-
-We have a migration tool that can be run using `bin/cli migration run`. This will detect new migrations available and prompt you to backup your database before proceeding with the migration. Migrations are required with major version releases.
-
-### Using Trust
-
-Talk ships with core components we call "Trust". This allows Talk to automate certain actions based on previous user behavior.
-
-Our first feature is the notion of Karma. Talk will automatically pre-moderate comments of users who have a negative karma score. You can [see more how karma works here](/services/karma.js).
-
-## Supported Browsers
-
-### Web
-
-- Chrome: latest 2 versions
-- Firefox: latest 2 versions, and most recent extended support version, if any
-- Safari: latest 2 versions
-- Internet Explorer: IE Edge, 11
-
-### iOS Devices
-
-- iPad
-- iPad Pro
-- iPhone 7 Plus
-- iPhone 7
-- iPhone 6 Plus
-- iPhone 6
-- iPhone 5
-
-### iOS Browsers
-
-- Chrome for iOS: latest version
-- Firefox for iOS: latest version
-- Safari for iOS: latest version
-
-### Android Devices
-
-- Galaxy S5
-- Nexus 5X
-- Nexus 6P
-
-### Android Browsers
-
-- Chrome for Android: latest version
-- Firefox for Android: latest version
+See our [Talk Documentation & Guides](https://coralproject.github.io/talk/).
 
 ## License
 

TERMINOLOGY.md

@@ -1,73 +0,0 @@
-# Product's Terminology
-
-This is a guide to have a common language to talk about "Talk".
-
-## Definitions
-
-* Site - a top level site, aka nytimes.com
-* Section - the section of a site, aka, Politics.
-* Subsection - the section of a site, aka, Politics.
-* Asset - An article/video/etc identified by URL.
-
-* Embed - Things we put on a asset: comment box, ToS, Stream, etc…
-* Stream - All the activity on a certain asset. Container for Comments, actions, user
-* Thread - defined by a parent and everything below. All replies to a comment and their replies, etc…
-* Comment - a kind of user-generated content submitted by a comment author
-  * A parent comment has replies to it
-  * A child comments is a reply to another comment
-  * A comment can be both a parent comment and a child of another comment
-  * A top-level comment is a comment that is not a reply to any other comment
-  * A nth-level comment refers to the number of replies away from the top-level comment
-
-* User - an item to represent a person using Talk. It could be a moderator, reader, etc.
-* User Roles:
-  * Active: some who takes action (logged in or not)
-  * Passive: some who just reads, no actions performed
-  * Comment Author: The user who wrote the comment
-  * Staff Member: someone who works for an organization (tagged for leverage in trust)
-  * Moderator: someone with the ability to access the moderation queue and perform moderation actions
-  * Administrator: has the ability to change the setup of their coral space
-* Public Profile: information about users shown in public
-* Private Profile: information about users shown only to user about themselves
-* Protected Profile: information about users that only moderators and admins can see
-
-* Queue - Group of items based on a query, aka - moderation queue
-* Target - The item/s on which an action is performed
-
-##  Actions
-
-Actions are performed by users on items. Actions themselves are items. This requires two relationships: action on item, and user performs action.
-
-### Flag
-* A Flagger(user) performs a Flag
-* A Flag is performed on a Comment or a username or profile content
-
-
-## Moderation Actions and Status
-
-Comments contain a field `status`. As moderation actions are peformed, the status changes.
-
-* Initial status is empty.
-* When a moderator Approves, the status is set to 'approved'.
-* When a moderator Rejects, the status is set to 'reject'.
-
-### Pre and post moderation
-
-Comments can be set to be premoderated or postmoderated. 
-
-Premoderation means that moderation has to occur _before_ a comment is shown on the site:
-
-* New comments are shown in the moderator queues immediately. 
-* The are not shown to users until (aka in streams) until they are approved by a moderator.
-
-Postmoderation means that comments appear on the site _before_ any moderation action is taken.
-
-* New comments appear in comment streams immediately.
-* New comments do not appear in moderation queues unless they are flagged by other users.
-
-### Word lists
-
-* Banned words - words that the site never allows in a comment
-* Suspect words - words whose usage needs to be approved by a moderator before being shown in the stream
-* Approved words - words that are usually Banned or Suspect sitewide, but approved for use in a specific article stream
-

app.js

@@ -6,6 +6,7 @@ const helmet = require('helmet');
 const authentication = require('./middleware/authentication');
 const {passport} = require('./services/passport');
 const plugins = require('./services/plugins');
+const pubsub = require('./services/pubsub');
 const i18n = require('./services/i18n');
 const enabled = require('debug').enabled;
 const errors = require('./errors');
@@ -14,6 +15,7 @@ const apollo = require('graphql-server-express');
 const accepts = require('accepts');
 const compression = require('compression');
 const cookieParser = require('cookie-parser');
+const {ROOT_URL} = require('./config');
 
 const app = express();
 
@@ -73,6 +75,12 @@ app.use('/public', express.static(path.join(__dirname, 'public')));
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
+// Set the BASE_URL as the ROOT_URL.
+app.locals.BASE_URL = ROOT_URL;
+if (app.locals.BASE_URL[app.locals.BASE_URL.length - 1] !== '/') {
+  app.locals.BASE_URL += '/';
+}
+
 //==============================================================================
 // PASSPORT MIDDLEWARE
 //==============================================================================
@@ -95,6 +103,19 @@ app.use(passport.initialize());
 // (if present) the JWT on the request.
 app.use('/api', authentication);
 
+const pubsubClient = pubsub.createClientFactory();
+
+// To handle dependancy injection safer, we inject the pubsub handle onto the
+// request object.
+app.use('/api', (req, res, next) => {
+
+  // Attach the pubsub handle to the requests.
+  req.pubsub = pubsubClient();
+
+  // Forward on the request.
+  next();
+});
+
 //==============================================================================
 // GraphQL Router
 //==============================================================================
@@ -159,7 +180,7 @@ app.use('/', (err, req, res, next) => {
   }
 
   i18n.init(req);
-  
+
   if (err instanceof errors.APIError) {
     res.status(err.status);
     res.render('error', {

bin/cli

@@ -9,12 +9,17 @@ const program = require('./commander');
 
 program
   .command('serve', 'serve the application')
+  .command('settings', 'interact with the application settings')
   .command('assets', 'interact with assets')
   .command('setup', 'setup the application')
   .command('jobs', 'work with the job queues')
+  .command('token', 'work with the access tokens')
   .command('users', 'work with the application auth')
   .command('migration', 'provides utilities for migrating the database')
-  .command('plugins', 'provides utilities for interacting with the plugin system')
+  .command(
+    'plugins',
+    'provides utilities for interacting with the plugin system'
+  )
   .parse(process.argv);
 
 /**
@@ -24,7 +29,10 @@ program
  * labled with the PID written out by the parent process.
  */
 process.once('exit', () => {
-  if ((program.runningCommand.killed === false) && (program.runningCommand.exitCode === null)) {
+  if (
+    program.runningCommand.killed === false &&
+    program.runningCommand.exitCode === null
+  ) {
     program.runningCommand.kill('SIGINT');
   }
 });

bin/cli-plugins

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

bin/cli-serve

@@ -12,6 +12,7 @@ const SetupService = require('../services/setup');
 const kue = require('../services/kue');
 const mongoose = require('../services/mongoose');
 const util = require('./util');
+const cache = require('../services/cache');
 const {createSubscriptionManager} = require('../graph/subscriptions');
 const {
   PORT
@@ -80,12 +81,16 @@ function normalizePort(val) {
  * Event listener for HTTP server "listening" event.
  */
 
-function onListening() {
+async function onListening() {
+
+  // Start the cache instance.
+  await cache.init();
+
   let addr = server.address();
   let bind = typeof addr === 'string'
     ? `pipe ${addr}`
     : `port ${addr.port}`;
-  console.log(`API Server Listening on ${bind}`);
+  debug(`API Server Listening on ${bind}`);
 }
 
 /**
@@ -135,18 +140,21 @@ async function startApp(program) {
   /**
   * Listen on provided port, on all network interfaces.
   */
+  server.on('error', onError);
+  server.on('listening', onListening);
+  server.on('listening', () => {
+
+  });
   server.listen(port, () => {
 
     // Mount the websocket server if requested.
     if (program.websockets) {
-      console.log(`Websocket Server Listening on ${port}`);
+      debug(`Websocket Server Listening on ${port}`);
 
       // Mount the subscriptions server on the application server.
       createSubscriptionManager(server);
     }
   });
-  server.on('error', onError);
-  server.on('listening', onListening);
 }
 
 //==============================================================================

bin/cli-settings

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

bin/cli-token

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

bin/cli-users

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

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

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

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

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

bin/templates/plugin/client/index.js

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

bin/templates/plugin/client/translations.yml

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

circle.yml

@@ -1,6 +1,6 @@
 machine:
   node:
-    version: 7.9
+    version: 8
   services:
     - docker
     - redis
@@ -21,9 +21,8 @@ dependencies:
 
     # Install node dependencies.
     - yarn --version
+    - yarn global add node-gyp --force
     - yarn
-  cache_directories:
-    - ~/.cache/yarn
   post:
     # Build the static assets.
     - yarn build
@@ -52,5 +51,6 @@ deployment:
 
   latest:
     branch: master
+    owner: coralproject
     commands:
       - bash ./scripts/docker.sh deploy

client/.babelrc

@@ -11,4 +11,4 @@
     "transform-async-to-generator",
     "transform-react-jsx"
   ]
-}
+}

client/coral-admin/src/AppRouter.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import {Router, Route, IndexRedirect, browserHistory} from 'react-router';
+import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
+import {history} from 'coral-framework/helpers/router';
 
 import Configure from 'routes/Configure';
 import Dashboard from 'routes/Dashboard';
@@ -14,7 +15,7 @@ const routes = (
   <div>
     <Route exact path="/admin/install" component={Install}/>
     <Route path='/admin' component={Layout}>
-      <IndexRedirect to='/admin/moderate/all' />
+      <IndexRedirect to='/admin/moderate' />
       <Route path='configure' component={Configure} />
       <Route path='stories' component={Stories} />
       <Route path='dashboard' component={Dashboard} />
@@ -34,10 +35,15 @@ const routes = (
       {/* Moderation Routes */}
 
       <Route path='moderate' component={ModerationLayout}>
+        <IndexRoute components={Moderation} />
+
         <Route path='all' components={Moderation}>
           <Route path=':id' components={Moderation} />
         </Route>
-        <Route path='accepted' components={Moderation}>
+        <Route path='new' components={Moderation}>
+          <Route path=':id' components={Moderation} />
+        </Route>
+        <Route path='approved' components={Moderation}>
           <Route path=':id' components={Moderation} />
         </Route>
         <Route path='premod' components={Moderation}>
@@ -46,16 +52,17 @@ const routes = (
         <Route path='rejected' components={Moderation}>
           <Route path=':id' components={Moderation} />
         </Route>
-        <Route path='flagged' components={Moderation}>
+        <Route path='reported' components={Moderation}>
           <Route path=':id' components={Moderation} />
         </Route>
+
         <Route path=':id' components={Moderation} />
-        <IndexRedirect to='premod' />
+
       </Route>
     </Route>
   </div>
 );
 
-const AppRouter = () => <Router history={browserHistory} routes={routes} />;
+const AppRouter = () => <Router history={history} routes={routes}/>;
 
 export default AppRouter;

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

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

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

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

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

@@ -0,0 +1,7 @@
+import {SHOW_BAN_USER_DIALOG, HIDE_BAN_USER_DIALOG} from '../constants/banUserDialog';
+
+export const showBanUserDialog = ({userId, username, commentId, commentStatus}) =>
+  ({type: SHOW_BAN_USER_DIALOG, userId, username, commentId, commentStatus});
+
+export const hideBanUserDialog = () => ({type: HIDE_BAN_USER_DIALOG});
+

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

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

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

@@ -2,6 +2,7 @@ import coralApi from 'coral-framework/helpers/request';
 import * as actions from '../constants/install';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
+import t from 'coral-framework/services/i18n';
 
 export const nextStep = () => ({type: actions.NEXT_STEP});
 export const previousStep = () => ({type: actions.PREVIOUS_STEP});
@@ -17,7 +18,8 @@ const clearErrors = () => ({type: actions.CLEAR_ERRORS});
 
 const validation = (formData, dispatch, next) => {
   if (!(formData != null)) {
-    return dispatch(hasError());
+    dispatch(hasError());
+    return;
   }
 
   const validKeys = Object.keys(formData)
@@ -40,7 +42,8 @@ const validation = (formData, dispatch, next) => {
   });
 
   if (empty.length) {
-    return dispatch(hasError());
+    dispatch(hasError());
+    return;
   }
 
   // RegExp Validation
@@ -59,7 +62,30 @@ const validation = (formData, dispatch, next) => {
     });
 
   if (validation.length) {
-    return dispatch(hasError());
+    dispatch(hasError());
+    return;
+  }
+
+  // Confirm Validation
+  const prefixLength = 'confirm'.length;
+  const confirm = validKeys
+    .filter((name) => {
+      if (!name.startsWith('confirm')) {
+        return false;
+      }
+
+      // Check that 'confirmX' equals 'X'.
+      const other = name.substr(prefixLength, 1).toLowerCase() + name.substr(prefixLength + 1);
+      const cond = formData[other] !== formData[name];
+      if (cond) {
+        dispatch(addError(name, errorMsj[name]));
+      }
+      return cond;
+    });
+
+  if (confirm.length) {
+    dispatch(hasError());
+    return;
   }
 
   dispatch(clearErrors());
@@ -90,7 +116,8 @@ export const finishInstall = () => (dispatch, getState) => {
     })
     .catch((error) => {
       console.error(error);
-      dispatch(installFailure(`${error.translation_key}`));
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch(installFailure(errorMessage));
     });
 };
 
@@ -113,6 +140,7 @@ export const checkInstall = (next) => (dispatch) => {
     })
     .catch((error) => {
       console.error(error);
-      dispatch(checkInstallFailure(`${error.translation_key}`));
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch(checkInstallFailure(errorMessage));
     });
 };

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

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

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

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

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

@@ -0,0 +1,7 @@
+import {SHOW_SUSPEND_USER_DIALOG, HIDE_SUSPEND_USER_DIALOG} from '../constants/suspendUserDialog.js';
+
+export const showSuspendUserDialog = ({userId, username, commentId, commentStatus}) =>
+  ({type: SHOW_SUSPEND_USER_DIALOG, userId, username, commentId, commentStatus});
+
+export const hideSuspendUserDialog = () => ({type: HIDE_SUSPEND_USER_DIALOG});
+

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

@@ -0,0 +1,24 @@
+import * as actions from 'constants/userDetail';
+
+export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
+export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
+
+export const changeUserDetailStatuses = (tab) => {
+  let statuses;
+  if (tab === 'all') {
+    statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'];
+  } else if (tab === 'rejected') {
+    statuses = ['REJECTED'];
+  }
+  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
+};
+
+export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
+
+export const toggleSelectCommentInUserDetail = (id, active) => {
+  return {
+    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
+    id
+  };
+};
+

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

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

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

@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react';
 import styles from './ModerationList.css';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../routes/Moderation/helpers/moderationQueueActionsMap';
+import {menuActionsMap} from '../utils/moderationQueueActionsMap';
 
 import t from 'coral-framework/services/i18n';
 

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

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

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

@@ -0,0 +1,44 @@
+import React, {PropTypes} from 'react';
+import {Dialog} from 'coral-ui';
+import styles from './BanUserDialog.css';
+
+import Button from 'coral-ui/components/Button';
+import t from 'coral-framework/services/i18n';
+
+const BanUserDialog = ({open, onCancel, onPerform, username, info}) => (
+  <Dialog
+    className={styles.dialog}
+    id="banUserDialog"
+    open={open}
+    onCancel={onCancel}
+    title={t('bandialog.ban_user')}>
+    <span className={styles.close} onClick={onCancel}>×</span>
+    <div>
+      <div className={styles.header}>
+        <h2>{t('bandialog.ban_user')}</h2>
+      </div>
+      <div className={styles.separator}>
+        <h3>{t('bandialog.are_you_sure', username)}</h3>
+        <i>{info}</i>
+      </div>
+      <div className={styles.buttons}>
+        <Button cStyle="cancel" className={styles.cancel} onClick={onCancel} raised>
+          {t('bandialog.cancel')}
+        </Button>
+        <Button cStyle="black" className={styles.ban} onClick={onPerform} raised>
+          {t('bandialog.yes_ban_user')}
+        </Button>
+      </div>
+    </div>
+  </Dialog>
+);
+
+BanUserDialog.propTypes = {
+  open: PropTypes.bool,
+  onPerform: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  username: PropTypes.string,
+  info: PropTypes.string,
+};
+
+export default BanUserDialog;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import t from 'coral-framework/services/i18n';
+import {withCopyToClipboard} from 'coral-framework/hocs';
+
+class ButtonCopyToClipboard extends React.Component {
+  render () {
+    return (
+      <Button {...this.props} >
+        {t('common.copy')}
+      </Button>
+    );
+  }
+}
+
+export default withCopyToClipboard(ButtonCopyToClipboard);

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

@@ -0,0 +1,24 @@
+.bodyLeave {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  background-color: white;
+  opacity: 1.0;
+  transition: background 400ms, opacity 800ms 1600ms;
+  pointer-events: none;
+}
+
+.bodyLeaveActive {
+  opacity: 0;
+  background-color: rgba(255,255,0, 0.2);
+}
+
+.bodyEnter {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.bodyEnterActive {
+  opacity: 1.0;
+  transition: opacity 800ms 2400ms;
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import {murmur3} from 'murmurhash-js';
+import {CSSTransitionGroup} from 'react-transition-group';
+import styles from './CommentAnimatedEdit.css';
+
+export default ({children, body}) => {
+  return (
+    <CSSTransitionGroup
+      component={'div'}
+      transitionName={{
+        enter: styles.bodyEnter,
+        enterActive: styles.bodyEnterActive,
+        leave: styles.bodyLeave,
+        leaveActive: styles.bodyLeaveActive,
+      }}
+      transitionEnter={true}
+      transitionLeave={true}
+      transitionEnterTimeout={3600}
+      transitionLeaveTimeout={2800}
+    >
+      {React.cloneElement(React.Children.only(children), {key: murmur3(body)})}
+    </CSSTransitionGroup>
+  );
+};

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import Highlighter from 'react-highlight-words';
+import Linkify from 'react-linkify';
+const linkify = new Linkify();
+
+export default ({suspectWords, bannedWords, body, ...rest}) => {
+
+  const links = linkify.getMatches(body);
+  const linkText = links ? links.map((link) => link.raw) : [];
+
+  // since words are checked against word boundaries on the backend,
+  // should be the behavior on the front end as well.
+  // currently the highlighter plugin does not support out of the box.
+  const searchWords = [...suspectWords, ...bannedWords]
+    .filter((w) => {
+      return new RegExp(`(^|\\s)${w}(\\s|$)`, 'i').test(body);
+    })
+    .concat(linkText);
+
+  return (
+    <Highlighter
+      {...rest}
+      searchWords={searchWords}
+      textToHighlight={body}
+    />
+  );
+};

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

@@ -1,22 +1,18 @@
 .commentType {
-  position: absolute;
-  right: 15px;
-  top: 11px;
+  display: inline-block;
   color: white;
   background: grey;
-  height: 32px;
   box-sizing: border-box;
-  line-height: 29px;
-  padding: 2px 8px 2px 26px;
+  padding: 2px 8px;
   border-radius: 2px;
   font-size: 12px;
+  height: 28px;
 
-  i {
+  > i {
     font-size: 14px;
-    position: absolute;
-    left: 6px;
-    top: 8px;
+    vertical-align: text-top;
     margin: 0;
+    margin-right: 4px;
   }
 
   &.premod {

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

@@ -1,12 +1,13 @@
 import React, {PropTypes} from 'react';
 import styles from './CommentType.css';
 import {Icon} from 'coral-ui';
+import cn from 'classnames';
 
 const CommentType = (props) => {
   const typeData = getTypeData(props.type);
 
   return (
-    <span className={`${styles.commentType} ${styles[typeData.className]}`}>
+    <span className={cn(styles.commentType, styles[typeData.className], props.className)}>
       <Icon name={typeData.icon}/>{typeData.text}
     </span>
   );

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

@@ -67,3 +67,17 @@
     color: black;
   }
 }
+
+.username {
+  color: #393B44;
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 600;
+  padding: 2px 5px;
+  border-radius: 2px;
+  margin-left: -5px;
+  transition: background-color 200ms ease;
+&:hover {
+   background-color: #E0E0E0;
+ }
+}

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

@@ -33,7 +33,7 @@ class FlagBox extends Component {
   }
 
   render() {
-    const {actionSummaries, actions} = this.props;
+    const {actionSummaries, actions, viewUserDetail} = this.props;
     const {showDetail} = this.state;
 
     return (
@@ -59,9 +59,14 @@ class FlagBox extends Component {
                     <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>)
-                        }
+                        {actionList.map((action, j) =>
+                          <li key={`${i}_${j}`} className={styles.subDetail}>
+                            <a className={styles.username} onClick={() => viewUserDetail(action.user.id)}>
+                              {action.user.username}
+                            </a>
+                            {action.message}
+                          </li>
+                        )}
                       </ul>
                     </li>
                   );

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import Linkify from 'react-linkify';
+const linkify = new Linkify();
+
+export default ({text, children}) => {
+  const hasLinks = !!linkify.getMatches(text);
+
+  if (!hasLinks) {
+    return null;
+  }
+
+  return React.Children.only(children);
+};

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

@@ -16,8 +16,8 @@ const shortcuts = [
   {
     title: 'modqueue.actions',
     shortcuts: {
-      't': 'modqueue.approve',
-      'r': 'modqueue.reject'
+      'd': 'modqueue.approve',
+      'f': 'modqueue.reject'
     }
   }
 ];
@@ -40,8 +40,8 @@ export default class ModerationKeysModal extends React.Component {
           <p className={styles.ctaHeader}>{t('modqueue.mod_faster')}</p>
           <p><strong>{t('modqueue.try_these')}:</strong></p>
           <ul>
-            <li><span>{t('modqueue.approve')}</span> <span className={styles.smallKey}>t</span></li>
-            <li><span>{t('modqueue.reject')}</span> <span className={styles.smallKey}>r</span></li>
+            <li><span>{t('modqueue.approve')}</span> <span className={styles.smallKey}>d</span></li>
+            <li><span>{t('modqueue.reject')}</span> <span className={styles.smallKey}>f</span></li>
           </ul>
           <p><span>{t('modqueue.view_more_shortcuts')}</span> <span className={styles.smallKey}>{t('modqueue.shift_key')}</span> + <span className={styles.smallKey}>/</span></p>
         </div>

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

@@ -192,7 +192,6 @@
 .minimal {
   width: 45px;
   min-width: 0;
-  float: left;
 }
 
 .approve__active {

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

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

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

@@ -49,7 +49,6 @@ class SuspendUserDialog extends React.Component {
   handlePerform = () => {
 
     this.props.onPerform({
-      id: this.props.userId,
       message: this.state.message,
 
       // Add 1 minute more to help `timeago.js` to display the correct duration.
@@ -153,11 +152,10 @@ class SuspendUserDialog extends React.Component {
 
 SuspendUserDialog.propTypes = {
   open: PropTypes.bool.isRequired,
-  onCancel: PropTypes.func.isRequired,
   onPerform: PropTypes.func.isRequired,
-  username: PropTypes.string,
-  userId: PropTypes.string,
+  onCancel: PropTypes.func.isRequired,
   organizationName: PropTypes.string,
+  username: PropTypes.string,
 };
 
 export default SuspendUserDialog;

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

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

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

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

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

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

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

@@ -35,9 +35,8 @@
   border: none;
   background-color: transparent;
   font-size: 16px;
-  position: absolute;
-  width: 90%;
   outline: none;
+  width: calc(100% - 90px);
 }
 
 .commentStatuses {

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

@@ -0,0 +1,181 @@
+import React, {PropTypes} from 'react';
+import Comment from './UserDetailComment';
+import styles from './UserDetail.css';
+import {Button, Drawer, Spinner} from 'coral-ui';
+import {Slot} from 'coral-framework/components';
+import ButtonCopyToClipboard from './ButtonCopyToClipboard';
+import {actionsMap} from '../utils/moderationQueueActionsMap';
+import ClickOutside from 'coral-framework/components/ClickOutside';
+
+export default class UserDetail extends React.Component {
+
+  static propTypes = {
+    userId: PropTypes.string.isRequired,
+    hideUserDetail: PropTypes.func.isRequired,
+    root: PropTypes.object.isRequired,
+    bannedWords: PropTypes.array.isRequired,
+    suspectWords: PropTypes.array.isRequired,
+    acceptComment: PropTypes.func.isRequired,
+    rejectComment: PropTypes.func.isRequired,
+    changeStatus: PropTypes.func.isRequired,
+    toggleSelect: PropTypes.func.isRequired,
+    bulkAccept: PropTypes.func.isRequired,
+    bulkReject: PropTypes.func.isRequired,
+  }
+
+  rejectThenReload = (info) => {
+    this.props.rejectComment(info).then(() => {
+      this.props.data.refetch();
+    });
+  }
+
+  acceptThenReload = (info) => {
+    this.props.acceptComment(info).then(() => {
+      this.props.data.refetch();
+    });
+  }
+
+  showAll = () => {
+    this.props.changeStatus('all');
+  }
+
+  showRejected = () => {
+    this.props.changeStatus('rejected');
+  }
+
+  renderLoading() {
+    return (
+      <ClickOutside onClickOutside={this.props.hideUserDetail}>
+        <Drawer onClose={this.props.hideUserDetail}>
+          <Spinner />
+        </Drawer>
+      </ClickOutside>
+    );
+  }
+
+  renderLoaded() {
+    const {
+      root: {
+        user,
+        totalComments,
+        rejectedComments,
+        comments: {nodes}
+      },
+      activeTab,
+      selectedCommentIds,
+      bannedWords,
+      suspectWords,
+      toggleSelect,
+      bulkAccept,
+      bulkReject,
+      hideUserDetail,
+      viewUserDetail,
+    } = this.props;
+
+    const localProfile = user.profiles.find((p) => p.provider === 'local');
+
+    let profile;
+    if (localProfile) {
+      profile = localProfile.id;
+    }
+
+    let rejectedPercent = (rejectedComments / totalComments) * 100;
+    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
+
+      // if totalComments is 0, you're dividing by zero, which is naughty
+      rejectedPercent = 0;
+    }
+
+    return (
+      <ClickOutside onClickOutside={hideUserDetail}>
+        <Drawer onClose={hideUserDetail}>
+          <h3>{user.username}</h3>
+
+          <div>
+            {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
+            <ButtonCopyToClipboard className={styles.copyButton} copyText={profile} />
+          </div>
+
+          <Slot
+            fill="userProfile"
+            data={this.props.data}
+            root={this.props.root}
+            user={user}
+          />
+          <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
+          <hr/>
+          <p>
+            <strong>Account summary</strong>
+            <br/><small className={styles.small}>Data represents the last six months of activity</small>
+          </p>
+          <div className={styles.stats}>
+            <div className={styles.stat}>
+              <p>Total Comments</p>
+              <p>{totalComments}</p>
+            </div>
+            <div className={styles.stat}>
+              <p>Reject Rate</p>
+              <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
+            </div>
+          </div>
+          {
+            selectedCommentIds.length === 0
+            ? (
+              <ul className={styles.commentStatuses}>
+                <li className={activeTab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
+                <li className={activeTab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
+              </ul>
+            )
+            : (
+              <div className={styles.bulkActionGroup}>
+                <Button
+                  onClick={bulkAccept}
+                  className={styles.bulkAction}
+                  cStyle='approve'
+                  icon='done'>
+                </Button>
+                <Button
+                  onClick={bulkReject}
+                  className={styles.bulkAction}
+                  cStyle='reject'
+                  icon='close'>
+                </Button>
+                {`${selectedCommentIds.length} comments selected`}
+              </div>
+            )
+          }
+
+          <div>
+            {
+              nodes.map((comment) => {
+                const status = comment.action_summaries ? 'FLAGGED' : comment.status;
+                const selected = selectedCommentIds.indexOf(comment.id) !== -1;
+                return <Comment
+                  key={comment.id}
+                  user={user}
+                  comment={comment}
+                  selected={false}
+                  suspectWords={suspectWords}
+                  bannedWords={bannedWords}
+                  actions={actionsMap[status]}
+                  acceptComment={this.acceptThenReload}
+                  rejectComment={this.rejectThenReload}
+                  selected={selected}
+                  toggleSelect={toggleSelect}
+                  viewUserDetail={viewUserDetail}
+                />;
+              })
+            }
+          </div>
+        </Drawer>
+      </ClickOutside>
+    );
+  }
+
+  render () {
+    if (this.props.loading) {
+      return this.renderLoading();
+    }
+    return this.renderLoaded();
+  }
+}

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

@@ -0,0 +1,128 @@
+.root {
+  display: block;
+  margin: 0;
+  border-bottom: 1px solid #e0e0e0;
+  width: 100%;
+  transition: all 200ms;
+  padding: 10px 0px;
+  min-height: 0;
+}
+
+.rootSelected {
+  background-color: #ecf4ff;
+}
+
+.container {
+  padding: 0px 14px;
+}
+
+.story {
+  font-size: 14px;
+  margin: 10px 0;
+  font-weight: 500;
+  line-height: 1.2;
+  max-width: 500px;
+}
+
+.story > a {
+  display: inline-block;
+  color: #063b9a;
+  text-decoration: none;
+  font-weight: 500;
+  letter-spacing: .5px;
+  margin-left: 10px;
+  font-size: 13px;
+  margin-left: 5px;
+  padding-bottom: 0px;
+  border-bottom: solid 1px;
+  line-height: 16px;
+}
+
+.bodyContainer {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 300;
+  margin-bottom: 8px;
+}
+
+.header {
+  position: relative;
+}
+
+.commentType {
+  position: absolute;
+  right: 0px;
+}
+
+.created {
+  padding: 5px;
+  color: #262626;
+  font-size: 14px;
+  line-height: 1px;
+  font-weight: 300;
+}
+
+.body {
+  margin-top: 0px;
+  flex: 1;
+  color: black;
+  max-width: 500px;
+  word-wrap: break-word;
+  font-weight: 300;
+  font-size: 16px;
+  max-width: 360px;
+}
+
+.sideActions {
+}
+
+.editedMarker {
+  font-style: italic;
+  color: #666;
+  font-size: 12px;
+  line-height: 1px;
+  font-weight: 300;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bulkSelectInput {
+  cursor: pointer;
+}
+
+.external {
+  font-size: .7em;
+  text-decoration: none;
+  color: #063b9a;
+  cursor: pointer;
+  font-weight: normal;
+  margin-left: 10px;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: underline;
+    opacity: .9;
+  }
+
+  > i {
+    font-size: 12px;
+    top: 2px;
+    position: relative;
+  }
+}
+
+.hasLinks {
+  color: #f00;
+  text-align: right;
+  display: flex;
+  align-items: center;
+
+  > i {
+    margin-right: 5px;
+  }
+}

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

@@ -0,0 +1,151 @@
+import React, {PropTypes} from 'react';
+import {Link} from 'react-router';
+
+import {Icon} from 'coral-ui';
+import FlagBox from './FlagBox';
+import styles from './UserDetailComment.css';
+import CommentType from './CommentType';
+import {getActionSummary} from 'coral-framework/utils';
+import ActionButton from 'coral-admin/src/components/ActionButton';
+import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
+import IfHasLink from 'coral-admin/src/components/IfHasLink';
+import cn from 'classnames';
+import {getCommentType} from 'coral-admin/src/utils/comment';
+import CommentAnimatedEdit from './CommentAnimatedEdit';
+
+import t, {timeago} from 'coral-framework/services/i18n';
+
+class UserDetailComment extends React.Component {
+
+  render() {
+    const {
+      actions = [],
+      comment,
+      viewUserDetail,
+      suspectWords,
+      bannedWords,
+      selected,
+      toggleSelect,
+      className,
+      user,
+      ...props
+    } = this.props;
+
+    const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
+    const flagActions = comment.actions && comment.actions.filter((a) => a.__typename === 'FlagAction');
+    const commentType = getCommentType(comment);
+
+    return (
+      <li
+        tabIndex={0}
+        className={cn(className, styles.root, {[styles.rootSelected]: selected})}
+      >
+        <div className={styles.container}>
+          <div className={styles.header}>
+            <input
+              className={styles.bulkSelectInput}
+              type='checkbox'
+              value={comment.id}
+              checked={selected}
+              onChange={(e) => toggleSelect(e.target.value, e.target.checked)} />
+            <span className={styles.created}>
+              {timeago(comment.created_at)}
+            </span>
+            {
+              (comment.editing && comment.editing.edited)
+              ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+              : null
+            }
+            <CommentType type={commentType} className={styles.commentType}/>
+          </div>
+          <div className={styles.story}>
+            Story: {comment.asset.title}
+            {<Link to={`/admin/moderate/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
+          </div>
+          <CommentAnimatedEdit body={comment.body}>
+            <div className={styles.bodyContainer}>
+              <p className={styles.body}>
+                <CommentBodyHighlighter
+                  suspectWords={suspectWords}
+                  bannedWords={bannedWords}
+                  body={comment.body}
+                />
+                {' '}
+                <a
+                  className={styles.external}
+                  href={`${comment.asset.url}?commentId=${comment.id}`}
+                  target="_blank"
+                >
+                  <Icon name="open_in_new" /> {t('comment.view_context')}
+                </a>
+              </p>
+              <div className={styles.sideActions}>
+                <IfHasLink text={comment.body}>
+                  <span className={styles.hasLinks}>
+                    <Icon name="error_outline" /> Contains Link
+                  </span>
+                </IfHasLink>
+                <div className={styles.actions}>
+                  {actions.map((action, i) => {
+                    const active =
+                      (action === 'REJECT' && comment.status === 'REJECTED') ||
+                      (action === 'APPROVE' && comment.status === 'ACCEPTED');
+                    return (
+                      <ActionButton
+                        minimal={true}
+                        key={i}
+                        type={action}
+                        user={user}
+                        status={comment.status}
+                        active={active}
+                        acceptComment={() =>
+                          (comment.status === 'ACCEPTED'
+                            ? null
+                            : props.acceptComment({commentId: comment.id}))}
+                        rejectComment={() =>
+                          (comment.status === 'REJECTED'
+                            ? null
+                            : props.rejectComment({commentId: comment.id}))}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </CommentAnimatedEdit>
+        </div>
+        {flagActions && flagActions.length
+          ? <FlagBox
+              actions={flagActions}
+              actionSummaries={flagActionSummaries}
+              viewUserDetail={viewUserDetail}
+            />
+          : null}
+      </li>
+    );
+  }
+}
+
+UserDetailComment.propTypes = {
+  user: PropTypes.object.isRequired,
+  viewUserDetail: PropTypes.func.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  toggleSelect: PropTypes.func,
+  comment: PropTypes.shape({
+    body: PropTypes.string.isRequired,
+    action_summaries: PropTypes.array,
+    actions: PropTypes.array,
+    created_at: PropTypes.string.isRequired,
+    asset: PropTypes.shape({
+      title: PropTypes.string,
+      url: PropTypes.string,
+      id: PropTypes.string
+    })
+  })
+};
+
+export default UserDetailComment;

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

@@ -40,12 +40,12 @@
   height: 100%;
 }
 
-.rightPanel ul {
+.rightPanel > ul {
   list-style: none;
   margin-right: 20px;
 }
 
-.rightPanel li {
+.rightPanel > ul > li {
   display: inline-block;
   float: right;
   margin-left: 15px;
@@ -54,6 +54,12 @@
   line-height: 33px;
 }
 
+.rightPanel a {
+  color: black;
+  text-decoration: none;
+  font-weight: 400;
+}
+
 .rightPanel .settings {
   line-height: 0;
 }

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

@@ -71,12 +71,24 @@ const CoralHeader = ({
                 <IconButton name="settings" id="menu-settings"/>
                 <Menu target="menu-settings" align="right">
                   <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
-                  <MenuItem onClick={handleLogout}>{t('configure.sign_out')}</MenuItem>
+                  <MenuItem>
+                    <a href="https://github.com/coralproject/talk/releases" target="_blank">
+                      View latest version
+                    </a>
+                  </MenuItem>
+                  <MenuItem>
+                    <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank">
+                      Report a bug or give feedback
+                    </a>
+                  </MenuItem>
+                  <MenuItem onClick={handleLogout}>
+                    {t('configure.sign_out')}
+                  </MenuItem>
                 </Menu>
               </div>
             </li>
-            <li>
-              {`v${process.env.VERSION}`}
+            <li>        
+             {`v${process.env.VERSION}`}        
             </li>
           </ul>
         </div>

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

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

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

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

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

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

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

@@ -13,5 +13,5 @@ export const FETCH_FLAGGED_COMMENTERS_FAILURE = 'FETCH_FLAGGED_COMMENTERS_FAILUR
 export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
 export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
 
-export const SHOW_SUSPENDUSER_DIALOG = 'SHOW_SUSPENDUSER_DIALOG';
-export const HIDE_SUSPENDUSER_DIALOG = 'HIDE_SUSPENDUSER_DIALOG';
+export const SHOW_REJECT_USERNAME_DIALOG = 'SHOW_REJECT_USERNAME_DIALOG';
+export const HIDE_REJECT_USERNAME_DIALOG = 'HIDE_REJECT_USERNAME_DIALOG';

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

@@ -1,14 +1,8 @@
 export const TOGGLE_MODAL = 'TOGGLE_MODAL';
 export const SINGLE_VIEW = 'SINGLE_VIEW';
-export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
-export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
 export const HIDE_SHORTCUTS_NOTE = 'HIDE_SHORTCUTS_NOTE';
-export const SHOW_SUSPEND_USER_DIALOG = 'SHOW_SUSPEND_USER_DIALOG';
-export const HIDE_SUSPEND_USER_DIALOG = 'HIDE_SUSPEND_USER_DIALOG';
-export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
-export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
 export const SET_SORT_ORDER = 'MODERATION_SET_SORT_ORDER';
-export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
-export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
-export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
-export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
+export const SHOW_STORY_SEARCH = 'SHOW_STORY_SEARCH';
+export const HIDE_STORY_SEARCH = 'HIDE_STORY_SEARCH';
+export const STORY_SEARCH_CHANGE_VALUE = 'STORY_SEARCH_CHANGE_VALUE';
+export const MODERATION_CLEAR_STATE = 'MODERATION_CLEAR_STATE';

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

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

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

@@ -0,0 +1,7 @@
+export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
+export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
+export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
+export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
+export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
+export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
+

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

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

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

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

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

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

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

@@ -1,44 +1,41 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
 import {compose, gql} from 'react-apollo';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import UserDetail from '../components/UserDetail';
 import withQuery from 'coral-framework/hocs/withQuery';
-import {getSlotsFragments} from 'coral-framework/helpers/plugins';
-import {getDefinitionName} from 'coral-framework/utils';
+import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {
+  viewUserDetail,
+  hideUserDetail,
   changeUserDetailStatuses,
   clearUserDetailSelections,
-  toggleSelectCommentInUserDetail
-} from 'coral-admin/src/actions/moderation';
+  toggleSelectCommentInUserDetail,
+} from 'coral-admin/src/actions/userDetail';
 import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import Comment from './Comment';
+import UserDetailComment from './UserDetailComment';
 
 const commentConnectionFragment = gql`
   fragment CoralAdmin_Moderation_CommentConnection on CommentConnection {
     nodes {
-      ...${getDefinitionName(Comment.fragments.comment)}
+      ...${getDefinitionName(UserDetailComment.fragments.comment)}
     }
     hasNextPage
     startCursor
     endCursor
   }
-  ${Comment.fragments.comment}
+  ${UserDetailComment.fragments.comment}
 `;
 
-const pluginFragments = getSlotsFragments([
+const slots = [
   'userProfile',
-]);
+];
 
 class UserDetailContainer extends React.Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired
-  }
 
   // status can be 'ACCEPTED' or 'REJECTED'
   bulkSetCommentStatus = (status) => {
-    const changes = this.props.moderation.userDetailSelectedIds.map((commentId) => {
+    const changes = this.props.selectedCommentIds.map((commentId) => {
       return this.props.setCommentStatus({commentId, status});
     });
 
@@ -56,16 +53,29 @@ class UserDetailContainer extends React.Component {
     this.bulkSetCommentStatus('ACCEPTED');
   }
 
+  acceptComment = ({commentId}) => {
+    return this.props.setCommentStatus({commentId, status: 'ACCEPTED'});
+  }
+
+  rejectComment = ({commentId}) => {
+    return this.props.setCommentStatus({commentId, status: 'REJECTED'});
+  }
+
   render () {
-    if (!('user' in this.props.root)) {
+    if (!this.props.userId) {
       return null;
     }
 
+    const loading = !('user' in this.props.root) || this.props.root.user.id !== this.props.userId;
+
     return <UserDetail
       bulkReject={this.bulkReject}
       bulkAccept={this.bulkAccept}
       changeStatus={this.props.changeUserDetailStatuses}
       toggleSelect={this.props.toggleSelectCommentInUserDetail}
+      acceptComment={this.acceptComment}
+      rejectComment={this.rejectComment}
+      loading={loading}
       {...this.props} />;
   }
 }
@@ -80,7 +90,7 @@ export const withUserDetailQuery = withQuery(gql`
         id
         provider
       }
-      ${pluginFragments.spreads('user')}
+      ${getSlotFragmentSpreads(slots, 'user')}
     }
     totalComments: commentCount(query: {author_id: $author_id})
     rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
@@ -90,29 +100,34 @@ export const withUserDetailQuery = withQuery(gql`
     }) {
       ...CoralAdmin_Moderation_CommentConnection
     }
-    ${pluginFragments.spreads('root')}
+    ${getSlotFragmentSpreads(slots, 'root')}
   }
-  ${Comment.fragments.comment}
-  ${pluginFragments.definitions('user')}
-  ${pluginFragments.definitions('root')}
   ${commentConnectionFragment}
 `, {
-  options: ({id, moderation: {userDetailStatuses: statuses}}) => {
+  options: ({userId, statuses}) => {
     return {
-      variables: {author_id: id, statuses}
+      variables: {author_id: userId, statuses}
     };
-  }
+  },
+  skip: (ownProps) => !ownProps.userId,
 });
 
 const mapStateToProps = (state) => ({
-  moderation: state.moderation.toJS()
+  userId: state.userDetail.userId,
+  selectedCommentIds: state.userDetail.selectedCommentIds,
+  statuses: state.userDetail.statuses,
+  activeTab: state.userDetail.activeTab,
+  bannedWords: state.settings.toJS().wordlist.banned,
+  suspectWords: state.settings.toJS().wordlist.suspect,
 });
 
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     changeUserDetailStatuses,
     clearUserDetailSelections,
-    toggleSelectCommentInUserDetail
+    toggleSelectCommentInUserDetail,
+    viewUserDetail,
+    hideUserDetail,
   }, dispatch)
 });
 

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

@@ -0,0 +1,39 @@
+import {gql} from 'react-apollo';
+import UserDetailComment from '../components/UserDetailComment';
+import withFragments from 'coral-framework/hocs/withFragments';
+
+export default withFragments({
+  comment: gql`
+    fragment CoralAdmin_UserDetail_comment on Comment {
+      id
+      body
+      created_at
+      status
+      asset {
+        id
+        title
+        url
+      }
+      action_summaries {
+        count
+        ... on FlagActionSummary {
+          reason
+        }
+      }
+      actions {
+        ... on FlagAction {
+          id
+          reason
+          message
+          user {
+            id
+            username
+          }
+        }
+      }
+      editing {
+        edited
+      }
+    }
+  `
+})(UserDetailComment);

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

@@ -1,6 +1,4 @@
 import {add} from 'coral-framework/services/graphqlRegistry';
-import update from 'immutability-helper';
-const queues = ['all', 'premod', 'flagged', 'accepted', 'rejected'];
 
 const extension = {
   mutations: {
@@ -10,58 +8,6 @@ const extension = {
     RejectUsername: () => ({
       refetchQueries: ['CoralAdmin_Community'],
     }),
-    SetCommentStatus: ({variables: {commentId, status}}) => ({
-      updateQueries: {
-        CoralAdmin_Moderation: (prev) => {
-          const comment = queues.reduce((comment, queue) => {
-            return comment ? comment : prev[queue].nodes.find((c) => c.id === commentId);
-          }, null);
-
-          let acceptedNodes = prev.accepted.nodes;
-          let acceptedCount = prev.acceptedCount;
-          let rejectedNodes = prev.rejected.nodes;
-          let rejectedCount = prev.rejectedCount;
-
-          if (status !== comment.status) {
-            if (status === 'ACCEPTED') {
-              comment.status = 'ACCEPTED';
-              acceptedCount++;
-              acceptedNodes = [comment, ...acceptedNodes];
-            }
-            else if (status === 'REJECTED') {
-              comment.status = 'REJECTED';
-              rejectedCount++;
-              rejectedNodes = [comment, ...rejectedNodes];
-            }
-          }
-
-          const premodNodes = prev.premod.nodes.filter((c) => c.id !== commentId);
-          const flaggedNodes = prev.flagged.nodes.filter((c) => c.id !== commentId);
-          const premodCount = premodNodes.length < prev.premod.nodes.length ? prev.premodCount - 1 : prev.premodCount;
-          const flaggedCount = flaggedNodes.length < prev.flagged.nodes.length ? prev.flaggedCount - 1 : prev.flaggedCount;
-
-          if (status === 'REJECTED') {
-            acceptedNodes = prev.accepted.nodes.filter((c) => c.id !== commentId);
-            acceptedCount = acceptedNodes.length < prev.accepted.nodes.length ? prev.acceptedCount - 1 : prev.acceptedCount;
-          }
-          else if (status === 'ACCEPTED') {
-            rejectedNodes = prev.rejected.nodes.filter((c) => c.id !== commentId);
-            rejectedCount = rejectedNodes.length < prev.rejected.nodes.length ? prev.rejectedCount - 1 : prev.rejectedCount;
-          }
-
-          return update(prev, {
-            premodCount: {$set: Math.max(0, premodCount)},
-            flaggedCount: {$set: Math.max(0, flaggedCount)},
-            acceptedCount: {$set: Math.max(0, acceptedCount)},
-            rejectedCount: {$set: Math.max(0, rejectedCount)},
-            premod: {nodes: {$set: premodNodes}},
-            flagged: {nodes: {$set: flaggedNodes}},
-            accepted: {nodes: {$set: acceptedNodes}},
-            rejected: {nodes: {$set: rejectedNodes}},
-          });
-        }
-      }
-    }),
   },
 };
 

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

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

client/coral-admin/src/index.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import {render} from 'react-dom';
 import {ApolloProvider} from 'react-apollo';
+import smoothscroll from 'smoothscroll-polyfill';
+import EventEmitter from 'eventemitter2';
+import EventEmitterProvider from 'coral-framework/components/EventEmitterProvider';
 
-import {client} from './services/client';
+import {getClient} from 'coral-framework/services/client';
 import store from './services/store';
 
 import App from './components/App';
@@ -11,12 +14,19 @@ import 'react-mdl/extra/material.js';
 import './graphql';
 import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
 
+const eventEmitter = new EventEmitter();
+
+// TODO: pass redux actions through the emitter.
+
 loadPluginsTranslations();
 injectPluginsReducers();
+smoothscroll.polyfill();
 
 render(
-  <ApolloProvider client={client} store={store}>
-    <App />
-  </ApolloProvider>
+  <EventEmitterProvider eventEmitter={eventEmitter}>
+    <ApolloProvider client={getClient()} store={store}>
+      <App />
+    </ApolloProvider>
+  </EventEmitterProvider>
   , document.querySelector('#root')
 );

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

@@ -0,0 +1,30 @@
+import {SHOW_BAN_USER_DIALOG, HIDE_BAN_USER_DIALOG} from '../constants/banUserDialog';
+
+const initialState = {
+  open: false,
+  userId: null,
+  username: '',
+  commentId: null,
+  commentStatus: '',
+};
+
+export default function banUserDialog(state = initialState, action) {
+  switch (action.type) {
+  case SHOW_BAN_USER_DIALOG:
+    return {
+      ...state,
+      open: true,
+      userId: action.userId,
+      username: action.username,
+      commentId: action.commentId,
+      commentStatus: action.commentStatus,
+    };
+  case HIDE_BAN_USER_DIALOG:
+    return {
+      ...state,
+      open: false,
+    };
+  default:
+    return state;
+  }
+}

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

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

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

@@ -5,9 +5,15 @@ import community from './community';
 import moderation from './moderation';
 import install from './install';
 import config from './config';
+import banUserDialog from './banUserDialog';
+import suspendUserDialog from './suspendUserDialog';
+import userDetail from './userDetail';
 
 export default {
   auth,
+  banUserDialog,
+  suspendUserDialog,
+  userDetail,
   assets,
   settings,
   community,

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

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

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

@@ -0,0 +1,30 @@
+import {SHOW_SUSPEND_USER_DIALOG, HIDE_SUSPEND_USER_DIALOG} from '../constants/suspendUserDialog';
+
+const initialState = {
+  open: false,
+  userId: null,
+  username: '',
+  commentId: null,
+  commentStatus: '',
+};
+
+export default function suspendUserDialog(state = initialState, action) {
+  switch (action.type) {
+  case SHOW_SUSPEND_USER_DIALOG:
+    return {
+      ...state,
+      open: true,
+      userId: action.userId,
+      username: action.username,
+      commentId: action.commentId,
+      commentStatus: action.commentStatus,
+    };
+  case HIDE_SUSPEND_USER_DIALOG:
+    return {
+      ...state,
+      open: false,
+    };
+  default:
+    return state;
+  }
+}

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

@@ -0,0 +1,47 @@
+import * as actions from '../constants/userDetail';
+
+const initialState = {
+  userId: null,
+  activeTab: 'all',
+  statuses: ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'],
+  selectedCommentIds: [],
+};
+
+export default function banUserDialog(state = initialState, action) {
+  switch (action.type) {
+  case actions.VIEW_USER_DETAIL:
+    return {
+      ...state,
+      userId: action.userId,
+    };
+  case actions.HIDE_USER_DETAIL:
+    return {
+      ...state,
+      userId: null,
+      selectedCommentIds: [],
+    };
+  case actions.CLEAR_USER_DETAIL_SELECTIONS:
+    return {
+      ...state,
+      selectedCommentIds: [],
+    };
+  case actions.CHANGE_USER_DETAIL_STATUSES:
+    return {
+      ...state,
+      activeTab: action.tab,
+      statuses: action.statuses,
+    };
+  case actions.SELECT_USER_DETAIL_COMMENT:
+    return {
+      ...state,
+      selectedCommentIds: [...state.selectedCommentIds, action.id],
+    };
+  case actions.UNSELECT_USER_DETAIL_COMMENT:
+    return {
+      ...state,
+      selectedCommentIds: state.selectedCommentIds.filter((id) => id !== action.id),
+    };
+  default:
+    return state;
+  }
+}

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

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

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

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

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

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

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

@@ -1,164 +0,0 @@
-.dialog {
-  border: none;
-  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
-  width: 500px;
-  top: 50%;
-  transform: translateY(-50%);
-  height: 184px;
-  padding: 20px;
-
-  h2 {
-    color: black;
-    font-size: 1.76em;
-    font-weight: 500;
-    margin: 0;
-  }
-
-  h3 {
-    color: black;
-    font-size: 1.4em;
-    font-weight: 500;
-    margin: 0;
-  }
-}
-
-.textField {
-    margin-top: 15px;
-}
-
-.textField label {
-    font-size: 1.08em;
-    font-weight: bold;
-    margin-bottom: 5px;
-}
-
-.textField input {
-    width: 100%;
-    display: block;
-    border: none;
-    outline: none;
-    border: 1px solid rgba(0,0,0,.12);
-    padding: 10px 6px;
-    box-sizing: border-box;
-    border-radius: 2px;
-    margin: 5px auto;
-}
-
-.footer {
-    margin: 20px auto 10px;
-    text-align: center;
-}
-
-.footer span {
-    display: block;
-    margin-bottom: 5px;
-}
-
-.footer a {
-    color: #2c69b6;
-    cursor: pointer;
-    margin: 0 5px;
-}
-
-.socialConnections {
-    margin-bottom: 20px;
-}
-
-.signInButton {
-    margin-top: 10px;
-}
-
-.close {
-    font-size: 20px;
-    line-height: 14px;
-    top: 10px;
-    right: 10px;
-    position: absolute;
-    display: block;
-    font-weight: bold;
-    color: #363636;
-    cursor: pointer;
-}
-
-.close:hover {
-    color: #6b6b6b;
-}
-
-input.error{
-    border: solid 2px #f44336;
-}
-
-.errorMsg, .hint {
-    color: grey;
-    font-weight: 600;
-    padding: 3px 0 16px;
-}
-
-.alert {
-    padding: 10px;
-    margin-bottom: 20px;
-    border-radius: 2px;
-}
-
-.alert--success {
-    border: solid 1px #1ec00e;
-    background: #cbf1b8;
-    color: #006900;
-}
-
-.alert--error {
-    background: #FFEBEE;
-    color: #B71C1C;
-}
-
-.userBox a {
-    color: #2c69b6;
-    cursor: pointer;
-    margin: 0px;
-}
-
-.attention {
-    display: inline-block;
-    width: 15px;
-    height: 15px;
-    background: #B71C1C;
-    color: #FFEBEE;
-    font-weight: bolder;
-    padding: 4px;
-    vertical-align: middle;
-    border-radius: 20px;
-    box-sizing: border-box;
-    font-size: 9px;
-    line-height: 7px;
-    text-align: center;
-    margin-right: 5px;
-}
-
-.action {
-    margin-top: 15px;
-}
-
-.passwordRequestSuccess {
-    border: 1px solid green;
-    background-color: lightgreen;
-    padding: 10px;
-}
-
-.passwordRequestFailure {
-    border: 1px solid orange;
-    background-color: 1px solid coral;
-    padding: 10px;
-}
-
-.cancel {
-  margin-right: 10px;
-  width: 47%;
-}
-
-.ban {
-  width: 47%;
-}
-
-.buttons {
-  margin: 20px 0;
-}

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

@@ -1,51 +0,0 @@
-import React, {PropTypes} from 'react';
-import {Dialog} from 'coral-ui';
-import styles from './BanUserDialog.css';
-
-import Button from 'coral-ui/components/Button';
-
-import t from 'coral-framework/services/i18n';
-
-const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
-  <Dialog
-    className={styles.dialog}
-    id="banuserDialog"
-    open={open}
-    onClose={handleClose}
-    onCancel={handleClose}
-    title={t('community.ban_user')}>
-    <span className={styles.close} onClick={handleClose}>×</span>
-    <div>
-      <div className={styles.header}>
-        <h2>{t('community.ban_user')}</h2>
-      </div>
-      <div className={styles.separator}>
-        <h3>{t('community.are_you_sure', user.username)}</h3>
-        <i>{t('community.note')}</i>
-      </div>
-      <div className={styles.buttons}>
-        <Button cStyle="cancel" className={styles.cancel} onClick={handleClose} raised>
-          {t('community.cancel')}
-        </Button>
-        <Button
-          cStyle="black" className={styles.ban}
-          onClick={() => {
-            handleBanUser({userId: user.id}).then(() => {
-              handleClose();
-            });
-          }}
-          raised>
-          {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/routes/Community/components/Community.css

@@ -52,57 +52,6 @@
   }
 }
 
-.email {
-  display: block;
-}
-
-.dataTable {
-  width: 100%;
-  border-left: none;
-  border-right: none;
-
-  th {
-    font-size: 1.1em;
-  }
-
-  th:nth-child(2), th:nth-child(3) {
-    width: 100px;
-  }
-}
-
-.selectField {
-  position: relative;
-  width: 150px;
-  height: 36px;
-  background: #2c2c2c;
-  padding: 10px 15px;
-  box-sizing: border-box;
-  color: white;
-  border-radius: 2px;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-
-  > div {
-    padding: 0;
-  }
-
-  i {
-    position: absolute;
-    top: 7px;
-    right: 7px;
-  }
-
-  input {
-    padding: 0;
-    font-size: 13px;
-    letter-spacing: 0.7px;
-    font-weight: 400;
-  }
-
-  &:hover {
-    cursor: pointer;
-   }
-}
-
 .list {
   padding: 8px 0;
   list-style: none;
@@ -340,3 +289,11 @@ p.flaggedByReason {
   margin: 0px;
   line-height: 1.4;
 }
+
+.button {
+  composes: buttonReset from 'coral-framework/styles/reset.css';
+  vertical-align: text-bottom;
+  &:hover {
+    background-color: #E0E0E0;
+  }
+}

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

@@ -1,10 +1,9 @@
 import React, {Component} from 'react';
 
 import CommunityMenu from './CommunityMenu';
-import BanUserDialog from './BanUserDialog';
-import SuspendUserDialog from './SuspendUserDialog';
 import People from './People';
 import FlaggedAccounts from './FlaggedAccounts';
+import RejectUsernameDialog from './RejectUsernameDialog';
 
 export default class Community extends Component {
 
@@ -55,7 +54,7 @@ export default class Community extends Component {
   }
 
   getTabContent(searchValue, props) {
-    const {community, root: {users}} = props;
+    const {community, root: {users}, viewUserDetail} = props;
     const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
 
     if (activeTab === 'people') {
@@ -80,19 +79,16 @@ export default class Community extends Component {
         <FlaggedAccounts
           commenters={users}
           showBanUserDialog={props.showBanUserDialog}
+          showSuspendUserDialog={props.showSuspendUserDialog}
+          showRejectUsernameDialog={props.showRejectUsernameDialog}
           approveUser={props.approveUser}
           rejectUsername={props.rejectUsername}
-          showSuspendUserDialog={props.showSuspendUserDialog}
+          currentUser={this.props.currentUser}
+          viewUserDetail={viewUserDetail}
         />
-        <BanUserDialog
-          open={community.banDialog}
-          user={community.user}
-          handleClose={props.hideBanUserDialog}
-          handleBanUser={props.banUser}
-        />
-        <SuspendUserDialog
-          open={community.suspendDialog}
-          handleClose={props.hideSuspendUserDialog}
+        <RejectUsernameDialog
+          open={community.rejectUsernameDialog}
+          handleClose={props.hideRejectUsernameDialog}
           user={community.user}
           rejectUsername={props.rejectUsername}
         />

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

@@ -5,12 +5,10 @@ import styles from './Community.css';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 import User from './User';
 
-const FlaggedAccounts = ({...props}) => {
+const FlaggedAccounts = (props) => {
   const {commenters} = props;
   const hasResults = commenters && !!commenters.length;
 
-// if (commenter.status === 'PENDING' && commenter.actions.length > 0) {
-
   return (
     <div className={styles.container}>
       <div className={styles.mainFlaggedContent}>
@@ -24,8 +22,10 @@ const FlaggedAccounts = ({...props}) => {
               modActionButtons={['APPROVE', 'REJECT']}
               showBanUserDialog={props.showBanUserDialog}
               showSuspendUserDialog={props.showSuspendUserDialog}
+              showRejectUsernameDialog={props.showRejectUsernameDialog}
               approveUser={props.approveUser}
-              suspendUser={props.suspendUser}
+              currentUser={props.currentUser}
+              viewUserDetail={props.viewUserDetail}
               />;
           })
           : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>

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

@@ -1,30 +1,30 @@
 import React, {Component, PropTypes} from 'react';
 
 import {Dialog, Button} from 'coral-ui';
-import styles from './SuspendUserDialog.css';
+import styles from './RejectUsernameDialog.css';
 
 import t from 'coral-framework/services/i18n';
 
 const stages = [
   {
-    title: 'suspenduser.title_reject',
-    description: 'suspenduser.description_reject',
+    title: 'reject_username.title_reject',
+    description: 'reject_username.description_reject',
     options: {
-      'j': 'suspenduser.no_cancel',
-      'k': 'suspenduser.yes_suspend'
+      'j': 'reject_username.no_cancel',
+      'k': 'reject_username.yes_suspend'
     }
   },
   {
-    title: 'suspenduser.title_notify',
-    description: 'suspenduser.description_notify',
+    title: 'reject_username.title_notify',
+    description: 'reject_username.description_notify',
     options: {
       'j': 'bandialog.cancel',
-      'k': 'suspenduser.send'
+      'k': 'reject_username.send'
     }
   }
 ];
 
-class SuspendUserDialog extends Component  {
+class RejectUsernameDialog extends Component  {
 
   state = {email: '', stage: 0}
 
@@ -35,7 +35,7 @@ class SuspendUserDialog extends Component  {
   }
 
   componentDidMount() {
-    this.setState({email: t('suspenduser.email_message_reject'), about: t('suspenduser.username')});
+    this.setState({email: t('reject_username.email_message_reject'), about: t('reject_username.username')});
   }
 
   /*
@@ -72,22 +72,22 @@ class SuspendUserDialog extends Component  {
 
     return <Dialog
             className={styles.suspendDialog}
-            id="suspendUserDialog"
+            id="rejectUsernameDialog"
             open={open}
             onClose={handleClose}
             onCancel={handleClose}
-            title={t('suspenduser.suspend_user')}>
+            title={t('reject_username.suspend_user')}>
             <div className={styles.title}>
-              {t(stages[stage].title, t('suspenduser.username'))}
+              {t(stages[stage].title, t('reject_username.username'))}
             </div>
             <div className={styles.container}>
               <div className={styles.description}>
-                {t(stages[stage].description, t('suspenduser.username'))}
+                {t(stages[stage].description, t('reject_username.username'))}
               </div>
               {
                 stage === 1 &&
                 <div className={styles.writeContainer}>
-                  <div className={styles.emailMessage}>{t('suspenduser.write_message')}</div>
+                  <div className={styles.emailMessage}>{t('reject_username.write_message')}</div>
                   <div className={styles.emailContainer}>
                     <textarea
                       rows={5}
@@ -100,7 +100,7 @@ class SuspendUserDialog extends Component  {
               <div className={styles.modalButtons}>
                 {Object.keys(stages[stage].options).map((key, i) => (
                   <Button key={i} onClick={this.onActionClick(stage, i)}>
-                    {t(stages[stage].options[key], t('suspenduser.username'))}
+                    {t(stages[stage].options[key], t('reject_username.username'))}
                   </Button>
                 ))}
               </div>
@@ -109,4 +109,4 @@ class SuspendUserDialog extends Component  {
   }
 }
 
-export default SuspendUserDialog;
+export default RejectUsernameDialog;

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

@@ -0,0 +1,58 @@
+.dataTable {
+  width: 100%;
+  border-left: none;
+  border-right: none;
+
+  th {
+    font-size: 1.1em;
+  }
+
+  th:nth-child(2), th:nth-child(3) {
+    width: 100px;
+  }
+}
+
+.button {
+  composes: buttonReset from 'coral-framework/styles/reset.css';
+  &:hover {
+    background-color: #D0D0D0;
+  }
+}
+
+.email {
+  display: block;
+}
+
+.selectField {
+  position: relative;
+  width: 150px;
+  height: 36px;
+  background: #2c2c2c;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  color: white;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  > div {
+    padding: 0;
+  }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    padding: 0;
+    font-size: 13px;
+    letter-spacing: 0.7px;
+    font-weight: 400;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
+}
+

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import {SelectField, Option} from 'react-mdl-selectfield';
-import styles from '../components/Community.css';
+import styles from '../components/Table.css';
 import t from 'coral-framework/services/i18n';
 
-export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange}) => (
+export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
   <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
@@ -21,7 +21,7 @@ export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onComm
       {commenters.map((row, i)=> (
         <tr key={i}>
           <td className="mdl-data-table__cell--non-numeric">
-            {row.username}
+            <button onClick={() => {viewUserDetail(row.id);}} className={styles.button}>{row.username}</button>
             <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
           </td>
           <td className="mdl-data-table__cell--non-numeric">

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

@@ -2,15 +2,18 @@ import React from 'react';
 import styles from './Community.css';
 
 import ActionButton from './ActionButton';
+import {username} from 'talk-plugin-flags/helpers/flagReasons';
+import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
+import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 
 import t from 'coral-framework/services/i18n';
 
 const shortReasons = {
-  'This comment is offensive': t('community.offensive'),
-  'This looks like an ad/marketing': t('community.spam_ads'),
-  'This user is impersonating': t('community.impersonating'),
-  'I don\'t like this username': t('community.dont_like_username'),
-  'Other': t('community.other')
+  [username.other]: t('community.other'),
+  [username.spam]: t('community.spam_ads'),
+  [username.offensive]: t('community.offensive'),
+  [username.nolike]: t('community.dont_like_username'),
+  [username.impersonating]: t('community.impersonating'),
 };
 
 // Render a single user for the list
@@ -18,6 +21,16 @@ const User = (props) => {
   const {user, modActionButtons} = props;
   let userStatus = user.status;
 
+  const showSuspenUserDialog = () => props.showSuspendUserDialog({
+    userId: user.id,
+    username: user.username,
+  });
+
+  const showBanUserDialog = () => props.showBanUserDialog({
+    userId: user.id,
+    username: user.username,
+  });
+
   // 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') &&
@@ -25,15 +38,20 @@ const User = (props) => {
       <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}
-            />
+            <button onClick={() => {props.viewUserDetail(user.id);}} className={styles.button}>{user.username}</button>
+            {props.currentUser.id !== user.id &&
+              <ActionsMenu icon="not_interested">
+                <ActionsMenuItem
+                  disabled={user.status === 'BANNED'}
+                  onClick={showSuspenUserDialog}>
+                  Suspend User</ActionsMenuItem>
+                <ActionsMenuItem
+                  disabled={user.status === 'BANNED'}
+                  onClick={showBanUserDialog}>
+                  Ban User
+                </ActionsMenuItem>
+              </ActionsMenu>
+            }
           </div>
         </div>
 
@@ -62,7 +80,12 @@ const User = (props) => {
                       (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'}
+                            {action.user &&
+                              <button onClick={() => {props.viewUserDetail(action.user.id);}} className={styles.button}>
+                                {action.user.username}
+                              </button>
+                            }
+                            : {action.message ? action.message : 'n/a'}
                           </p>;
                         }
                         return null;
@@ -78,11 +101,10 @@ const User = (props) => {
             <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}
+                  type={action.toUpperCase()}
+                  user={user}
+                  approveUser={props.approveUser}
+                  showRejectUsernameDialog={props.showRejectUsernameDialog}
                 />
               )}
             </div>

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

@@ -91,6 +91,7 @@ span {
 
   .moderateAsset {
     a {
+      text-align: center;
       -webkit-box-flex: 1;
       -ms-flex: 1;
       flex: 1;
@@ -103,21 +104,9 @@ span {
       opacity: 1;
 
       &:hover {
-          opacity: .8;
+         opacity: .8;
          cursor: pointer;
       }
-
-      &:first-child {
-        text-align: left;
-      }
-
-      &:nth-child(2) {
-       text-align: center;
-      }
-
-      &:last-child {
-        text-align: right;
-      }
     }
   }
 }