Merge pull request #368 from coralproject/asset-name-fixes

Asset Name + Profile Tab Bugs

.dockerignore

@@ -1 +1,3 @@
 node_modules
+test
+.git

.eslintrc.json

@@ -17,7 +17,7 @@
         "no-template-curly-in-string": [1],
         "no-unsafe-negation": [1],
         "array-callback-return": [1],
-        "eqeqeq": [2],
+        "eqeqeq": [2, "smart"],
         "no-eval": [2],
         "no-global-assign": [2],
         "no-implied-eval": [2],

.gitignore

@@ -3,13 +3,12 @@ npm-debug.log*
 dist
 !dist/coral-admin
 dist/coral-admin/bundle.js
-tests/e2e/reports
+test/e2e/reports
 .DS_Store
 *.iml
 *.swp
 dump.rdb
 .env
-gaba.cfg
+*.cfg
 .idea/
 coverage/
-yarn.lock

.nodemon.json

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

.travis-yml

@@ -1,3 +0,0 @@
-language: node_js
-node_js:
-  - 4

CONTRIBUTING.md

@@ -1,9 +1,10 @@
 # Contributor's Guide
 
-Welcome! We are very excited that you are interested in contributing to Talk. 
+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
 
@@ -13,7 +14,7 @@ You can view product ideas and our longer term roadmap here https://trello.com/b
 
 
 ## Contribute to the documentation
-Clear docs are a prerequisite for a successful open source project. We value non-code and code contributions equally. 
+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:
 
@@ -40,7 +41,7 @@ Talk is designed to integrate into existing environments in a variety of ways:
 
 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. 
+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
 
@@ -48,9 +49,9 @@ First, [set up a dev environment](https://github.com/coralproject/talk/blob/mast
 
 ### Build a New Feature / Plugin
 
-Talk is beginning life as a Commenting Platform, but is architected to support many varieties of community engagement. 
+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. 
+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:
 
@@ -66,13 +67,10 @@ Examples:
 
 ### Work on the Core
 
-There is always more work to be done to make an application more stable, scaleable and secure. 
+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,7 @@
-FROM node:7
+FROM node:7.6
+
+# Add node-gyp for bcrypt build support
+RUN yarn global add node-gyp
 
 # Create app directory
 RUN mkdir -p /usr/src/app
@@ -11,10 +14,10 @@ ENV TALK_PORT 5000
 EXPOSE 5000
 
 # Install app dependencies
-COPY package.json /usr/src/app/
-RUN npm install --production
+COPY package.json yarn.lock /usr/src/app/
+RUN yarn install --production
 
 # Bundle app source
 COPY . /usr/src/app
 
-CMD [ "npm", "start" ]
+CMD [ "yarn", "start" ]

INSTALL.md

@@ -1,95 +1,94 @@
-# Installing a dev environment
-
-By contributing to this project you agree to the [Code of Conduct](https://coralproject.net/code-of-conduct.html).
+# Installation
 
 ## Requirements
 
 ### System
 
-- Any flavor of Linux, OSX or Windows
+- Any flavour of Linux, OSX or Windows
 - 1GB memory (minimum)
 - 5GB storage (minimum)
 
-### Software
+## Installation From Source
 
-* [Node](https://nodejs.org/es/download/package-manager) v7 or later
-* Mongo v3.2 or later
-* Redis v3.2 or later 
+### Requirements
+
+There are some runtime requirements for running Talk from source:
+
+- [Node](https://nodejs.org/) v7 or later
+- [MongoDB](https://www.mongodb.com/) v3.4 or later
+- [Redis](https://redis.io/) v3.2 or later
+- [Yarn](https://yarnpkg.com/) v0.19.1 or later
 
 _Please be sure to check the versions of these requirements. Insufficient versions of these may lead to unexpected errors!_
 
-## First time setup
+### Installing
 
-### Installation
+```bash
+# Download the tarball containing the repository
+curl -L https://github.com/coralproject/talk/tarball/master -o coralproject-talk.tar.gz
 
-Navigate to a directory.
+# Untar that file and change to that directory
+tar xpf coralproject-talk.tar.gz
+mv coralproject-talk-* coralproject-talk
+cd coralproject-talk
 
-```
-git clone https://github.com/coralproject/talk
-cd talk
-npm install
+# Install package dependancies
+yarn
+
+# Build static files
+yarn build
 ```
 
-### Environmental Variables
+### Running
 
-Talk uses environmental variables for configuration. You can learn about them in the [README file](README.md).
+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:
 
-## Workflows
-
-### The server
-
-Starting the server:
-
-```
-npm start
+```bash
+yarn start
 ```
 
-Browse to `http://localhost:3000` (or your custom port.)
+You can see other scripts we've made available by consulting the `package.json`
+file under the `scripts` key including:
 
-### Building the front end
+- `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
 
-Our build process will build all front end components registered [here](https://github.com/coralproject/talk/blob/6052cac1d3494f8060325a88bb2ce03c88c2f94c/webpack.config.dev.js#L9-L15).
+## Installation From Docker Hub
 
-One time build:
+### Requirements
 
-```
-npm build
+There are some runtime requirements for running Talk for Docker:
+
+- [MongoDB](https://www.mongodb.com/) v3.2 or later
+- [Redis](https://redis.io/) v3.2 or later
+- [Docker](https://www.docker.com/) v1.13.0 or later
+- [Docker Compose](https://docs.docker.com/compose/) v1.10.0 or later
+
+_Please be sure to check the versions of these requirements. Insufficient versions of these may lead to unexpected errors!_
+
+### Installing
+
+```bash
+# Create a directory for talk
+mkdir coralproject-talk
+cd coralproject-talk
+
+# Download the docker-compose.yml file from the repository
+curl -LO https://raw.githubusercontent.com/coralproject/talk/master/docker-compose.yml
 ```
 
-Build, then rebuild when a file is updated (development build):
+At this stage, you should refer to the `README.md` file for required
+configuration variables to add to the environment key for the `talk` service
+listed in the `docker-compose.yml` file.
 
+### Running
+
+```bash
+# Start the services using compose
+docker-compose up -d
 ```
-npm build-watch
-```
-
-
-### Testing
-
-Run all tests once:
-
-`
-npm test
-`
-
-Run our end to end tests (will install Selenium and nightwatch):
-
-`
-npm run e2e
-`
-
-_Please ensure all tests are passing before submitting a PR!_
-
-## Troubleshooting
-
-
-##### Can't ping the redis server!
-
-- Check that Redis Server is running.
-- Check that TALK_REDIS_URL is set.
-
-##### Authenticaiton doesn't work!
-
-- Make sure Redis is the correct version. 
-
-

README.md

@@ -1,6 +1,9 @@
 # Talk [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
 
-A commenting platform from [The Coral Project](https://coralproject.net).
+A commenting platform from [The Coral Project](https://coralproject.net). Talk enters a closed beta in March 2017, but you can download the code for our alpha here. [Read more about Talk here.](https://coralproject.net/products/talk.html)
+
+Third party licenses are available via the `/client/3rdpartylicenses.txt`
+endpoint when the server is running with built assets.
 
 ## Contributing to Talk
 
@@ -12,7 +15,7 @@ See our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CO
 
 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!!
+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
@@ -37,6 +40,7 @@ Facebook Login enabled app.
 - `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.
 
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.

app.js

@@ -10,6 +10,8 @@ const RedisStore = require('connect-redis')(session);
 const redis = require('./services/redis');
 const csrf = require('csurf');
 const errors = require('./errors');
+const graph = require('./graph');
+const apollo = require('graphql-server-express');
 
 const app = express();
 
@@ -49,7 +51,7 @@ const session_opts = {
   name: 'talk.sid',
   cookie: {
     secure: false,
-    maxAge: 18000000, // 30 minutes for expiry.
+    maxAge: 36000000, // 1 hour for expiry.
   },
   store: new RedisStore({
     ttl: 1800,
@@ -77,6 +79,28 @@ app.use(session(session_opts));
 app.use(passport.initialize());
 app.use(passport.session());
 
+//==============================================================================
+// GraphQL Router
+//==============================================================================
+
+// GraphQL endpoint.
+app.use('/api/v1/graph/ql', apollo.graphqlExpress(graph.createGraphOptions));
+
+// Only include the graphiql tool if we aren't in production mode.
+if (app.get('env') !== 'production') {
+
+  // Interactive graphiql interface.
+  app.use('/api/v1/graph/iql', apollo.graphiqlExpress({
+    endpointURL: '/api/v1/graph/ql'
+  }));
+
+  // GraphQL documention.
+  app.get('/admin/docs', (req, res) => {
+    res.render('admin/docs');
+  });
+
+}
+
 //==============================================================================
 // CSRF MIDDLEWARE
 //==============================================================================

app.json

@@ -29,5 +29,5 @@
         "as": "POSTMARK"
     }],
     "image": "heroku/nodejs",
-    "success_url": "/admin/setup"
+    "success_url": "/admin/install"
 }

bin/cli

@@ -4,43 +4,25 @@
  * Module dependencies.
  */
 
-const program = require('commander');
-const pkg = require('../package.json');
-const dotenv = require('dotenv');
-
-//==============================================================================
-// Setting up the program command line arguments.
-//==============================================================================
-
-program
-  .version(pkg.version)
-  .option('-c, --config [path]', 'Specify the configuration file to load')
-  .parse(process.argv);
-
-if (program.config) {
-  let r = dotenv.config({
-    path: program.config
-  });
-
-  if (r.error) {
-    throw r.error;
-  }
-}
-
-// Perform rewrites to the runtime environment variables based on the contents
-// of the process.env.REWRITE_ENV if it exists. This is done here as it is the
-// entrypoint for the entire application.
-require('env-rewrite').rewrite();
+// const util = require('./util');
+const program = require('./commander');
 
 program
   .command('serve', 'serve the application')
   .command('assets', 'interact with assets')
-  .command('settings', 'work with the application settings')
+  .command('setup', 'setup the application')
   .command('jobs', 'work with the job queues')
   .command('users', 'work with the application auth')
   .parse(process.argv);
 
-// If there is no command listed, output help.
-if (!process.argv.slice(2).length) {
-  program.outputHelp();
-}
+/**
+ * When this provess exists, check to see if we have a running command, if we do
+ * check to see if it is still running. If it is, then kill it with a SIGINT
+ * signal. This is for the use case where we want to kill the process that is
+ * labled with the PID written out by the parent process.
+ */
+process.once('exit', () => {
+  if ((program.runningCommand.killed === false) && (program.runningCommand.exitCode === null)) {
+    program.runningCommand.kill('SIGINT');
+  }
+});

bin/cli-assets

@@ -4,14 +4,13 @@
  * Module dependencies.
  */
 
-const program = require('commander');
-const pkg = require('../package.json');
+const program = require('./commander');
 const parseDuration = require('parse-duration');
 const Table = require('cli-table');
-const Asset = require('../models/asset');
+const AssetModel = require('../models/asset');
 const mongoose = require('../services/mongoose');
 const scraper = require('../services/scraper');
-const util = require('../util');
+const util = require('./util');
 
 // Register the shutdown criteria.
 util.onshutdown([
@@ -22,7 +21,7 @@ util.onshutdown([
  * Lists all the assets registered in the database.
  */
 function listAssets() {
-  Asset
+  AssetModel
     .find({})
     .sort({'created_at': 1})
     .then((asset) => {
@@ -56,7 +55,7 @@ function refreshAssets(ageString) {
   const ageMs = parseDuration(ageString);
   const age = new Date(now - ageMs);
 
-  Asset.find({
+  AssetModel.find({
     $or: [
       {
         scraped: {
@@ -86,9 +85,6 @@ function refreshAssets(ageString) {
 // Setting up the program command line arguments.
 //==============================================================================
 
-program
-  .version(pkg.version);
-
 program
   .command('list')
   .description('list all the assets in the database')

bin/cli-jobs

@@ -4,10 +4,10 @@
  * Module dependencies.
  */
 
-const program = require('commander');
+const program = require('./commander');
 const scraper = require('../services/scraper');
 const mailer = require('../services/mailer');
-const util = require('../util');
+const util = require('./util');
 const mongoose = require('../services/mongoose');
 const kue = require('../services/kue');
 

bin/cli-serve

@@ -1,14 +1,13 @@
 #!/usr/bin/env node
 
 const app = require('../app');
-const debug = require('debug')('talk:server');
+const program = require('./commander');
 const http = require('http');
-const init = require('../init');
 const scraper = require('../services/scraper');
 const mailer = require('../services/mailer');
 const kue = require('../services/kue');
 const mongoose = require('../services/mongoose');
-const util = require('../util');
+const util = require('./util');
 
 /**
 * Get port from environment and store in Express.
@@ -79,34 +78,22 @@ function onListening() {
   let bind = typeof addr === 'string'
     ? `pipe ${  addr}`
     : `port ${  addr.port}`;
-  debug(`Listening on ${  bind}`);
+  console.log(`Listening on ${  bind}`);
 }
 
 /**
  * Start the app.
  */
 function startApp() {
-  init().then(() => {
 
-    /**
-    * Listen on provided port, on all network interfaces.
-    */
-    server.listen(port);
-    server.on('error', onError);
-    server.on('listening', onListening);
-  })
-  .catch((err) => {
-    console.error(err);
-    util.shutdown(1);
-  });
+  /**
+  * Listen on provided port, on all network interfaces.
+  */
+  server.listen(port);
+  server.on('error', onError);
+  server.on('listening', onListening);
 }
 
-/**
- * Module dependencies.
- */
-
-const program = require('commander');
-
 //==============================================================================
 // Setting up the program command line arguments.
 //==============================================================================

bin/cli-settings

@@ -1,45 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Module dependencies.
- */
-
-const program = require('commander');
-const mongoose = require('../services/mongoose');
-const Setting = require('../models/setting');
-const util = require('../util');
-
-// Register the shutdown criteria.
-util.onshutdown([
-  () => mongoose.disconnect()
-]);
-
-//==============================================================================
-// Setting up the program command line arguments.
-//==============================================================================
-
-program
-  .command('init')
-  .description('initilizes the talk settings')
-  .action(() => {
-    const defaults = {id: '1', moderation: 'pre'};
-
-    Setting
-      .update({id: '1'}, {$setOnInsert: defaults}, {upsert: true})
-      .then(() => {
-        console.log('Created settings object.');
-        util.shutdown();
-      })
-      .catch((err) => {
-        console.error(`failed to create the settings object ${JSON.stringify(err)}`);
-        util.shutdown(1);
-      });
-  });
-
-program.parse(process.argv);
-
-// If there is no command listed, output help.
-if (!process.argv.slice(2).length) {
-  program.outputHelp();
-  util.shutdown();
-}

bin/cli-setup

@@ -0,0 +1,197 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+const program = require('./commander');
+const inquirer = require('inquirer');
+const mongoose = require('../services/mongoose');
+const SettingModel = require('../models/setting');
+const SettingsService = require('../services/settings');
+const SetupService = require('../services/setup');
+const UsersService = require('../services/users');
+const util = require('./util');
+const errors = require('../errors');
+
+// Register the shutdown criteria.
+util.onshutdown([
+  () => mongoose.disconnect()
+]);
+
+//==============================================================================
+// Setting up the program command line arguments.
+//==============================================================================
+
+program
+  .description('runs the setup wizard to setup the application')
+  .option('--defaults', 'apply defaults for config instead of prompting')
+  .parse(process.argv);
+
+//==============================================================================
+// Setup the application
+//==============================================================================
+
+const performSetup = () => {
+
+  if (program.defaults) {
+    return SettingsService
+      .init()
+      .then(() => {
+        console.log('Settings created.');
+        console.log('\nTalk is now installed!');
+        util.shutdown();
+      })
+      .catch((err) => {
+        console.error(err);
+        util.shutdown(1);
+      });
+  }
+
+  // Get the current settings, we are expecing an error here.
+  return SettingsService
+    .retrieve()
+    .then(() => {
+
+      // We should NOT have gotten a settings object, this means that the
+      // application is already setup. Error out here.
+      throw errors.ErrSettingsInit;
+
+    })
+    .catch((err) => {
+
+      // If the error is `not init`, then we're good, otherwise, it's something
+      // else.
+      if (err !== errors.ErrSettingsNotInit) {
+        throw err;
+      }
+
+    })
+    .then(() => {
+
+      // Create the base settings model.
+      let settings = new SettingModel();
+
+      console.log('We\'ll ask you some questions in order to setup your installation of Talk.\n');
+
+      return inquirer.prompt([
+        {
+          type: 'input',
+          name: 'organizationName',
+          message: 'Organization Name',
+          default: settings.organizationName,
+          validate: (input) => {
+            if (input && input.length > 0) {
+              return true;
+            }
+
+            return 'Organization Name is required.';
+          }
+        },
+        {
+          type: 'list',
+          choices: SettingModel.MODERATION_OPTIONS,
+          name: 'moderation',
+          default: settings.moderation,
+          message: 'Select a moderation mode'
+        },
+        {
+          type: 'confirm',
+          name: 'requireEmailConfirmation',
+          default: settings.requireEmailConfirmation,
+          message: 'Should emails always be confirmed'
+        }
+      ])
+      .then((answers) => {
+
+        // Update the settings that were changed.
+        Object.keys(answers).forEach((key) => {
+          if (answers[key] !== undefined) {
+            settings[key] = answers[key];
+          }
+        });
+
+        console.log('\nWe\'ll ask you some questions about your first admin user.\n');
+
+        return inquirer.prompt([
+          {
+            type: 'input',
+            name: 'username',
+            message: 'Username',
+            filter: (username) => {
+              return UsersService
+                .isValidUsername(username, false)
+                .catch((err) => {
+                  throw err.message;
+                });
+            }
+          },
+          {
+            name: 'email',
+            message: 'Email',
+            format: 'email',
+            validate: (value) => {
+              if (value && value.length >= 3) {
+                return true;
+              }
+
+              return 'Email is required';
+            }
+          },
+          {
+            name: 'password',
+            message: 'Password',
+            type: 'password',
+            filter: (password) => {
+              return UsersService
+                .isValidPassword(password)
+                .catch((err) => {
+                  throw err.message;
+                });
+            }
+          },
+          {
+            name: 'confirmPassword',
+            message: 'Confirm Password',
+            type: 'password',
+            filter: (confirmPassword) => {
+              return UsersService
+                .isValidPassword(confirmPassword)
+                .catch((err) => {
+                  throw err.message;
+                });
+            }
+          },
+        ]);
+      })
+      .then((user) => {
+
+        if (user.password !== user.confirmPassword) {
+          return Promise.reject(new Error('Passwords do not match'));
+        }
+
+        return SetupService.setup({
+          settings: settings.toObject(),
+          user: {
+            email: user.email,
+            username: user.username,
+            password: user.password
+          }
+        });
+      });
+    })
+    .then(({user}) => {
+      console.log('Settings created.');
+      console.log(`User ${user.id} created.`);
+      console.log('\nTalk is now installed!');
+      console.log('\nWe recommend adding TALK_INSTALL_LOCK=TRUE to your environment to turn off the dynamic setup.');
+      util.shutdown();
+    })
+    .catch((err) => {
+      console.error(err);
+      util.shutdown(1);
+    });
+};
+
+// Start tthe setup process.
+performSetup();

bin/cli-users

@@ -4,105 +4,139 @@
  * Module dependencies.
  */
 
-const program = require('commander');
-const pkg = require('../package.json');
-const prompt = require('prompt');
-const User = require('../models/user');
+const program = require('./commander');
+const inquirer = require('inquirer');
+const UsersService = require('../services/users');
+const UserModel = require('../models/user');
 const mongoose = require('../services/mongoose');
-const util = require('../util');
+const util = require('./util');
 const Table = require('cli-table');
 
+const validateRequired = (msg = 'Field is required', len = 1) => (input) => {
+  if (input && input.length >= len) {
+    return true;
+  }
+
+  return msg;
+};
+
 // Regeister the shutdown criteria.
 util.onshutdown([
   () => mongoose.disconnect()
 ]);
 
+function getUserCreateAnswers(options) {
+  if (options.flag_mode) {
+
+    let user = {
+      email: options.email,
+      password: options.password,
+      confirmPassword: options.password,
+      username: options.name,
+      roles: []
+    };
+
+    if (options.role && UserModel.USER_ROLES.indexOf(options.role) > -1) {
+      user.roles = [options.role];
+    }
+
+    return Promise.resolve(user);
+  }
+
+  return inquirer.prompt([
+    {
+      name: 'email',
+      message: 'Email',
+      format: 'email',
+      validate: validateRequired('Email is required')
+    },
+    {
+      name: 'password',
+      message: 'Password',
+      type: 'password',
+      filter: (password) => {
+        return UsersService
+          .isValidPassword(password)
+          .catch((err) => {
+            throw err.message;
+          });
+      }
+    },
+    {
+      name: 'confirmPassword',
+      message: 'Confirm Password',
+      type: 'password',
+      filter: (confirmPassword) => {
+        return UsersService
+          .isValidPassword(confirmPassword)
+          .catch((err) => {
+            throw err.message;
+          });
+      }
+    },
+    {
+      name: 'username',
+      message: 'Username',
+      filter: (username) => {
+        return UsersService
+          .isValidUsername(username)
+          .catch((err) => {
+            throw err.message;
+          });
+      }
+    },
+    {
+      name: 'roles',
+      message: 'User Role',
+      type: 'checkbox',
+      choices: UserModel.USER_ROLES
+    }
+  ]);
+}
+
 /**
  * Prompts for input and registers a user based on those.
  */
 function createUser(options) {
-  return new Promise((resolve, reject) => {
-
-    if (options.flag_mode) {
-      return resolve({
-        email: options.email,
-        password: options.password,
-        displayName: options.name,
-        role: options.role
-      });
-    }
-
-    prompt.start();
-
-    prompt.get([
-      {
-        name: 'email',
-        description: 'Email',
-        format: 'email',
-        required: true
-      },
-      {
-        name: 'password',
-        description: 'Password',
-        hidden: true,
-        required: true
-      },
-      {
-        name: 'confirmPassword',
-        description: 'Confirm Password',
-        hidden: true,
-        required: true
-      },
-      {
-        name: 'displayName',
-        description: 'Display Name',
-        required: true
-      },
-      {
-        name: 'role',
-        description: 'User Role',
-        required: false
-      }
-    ], (err, result) => {
-      if (err) {
-        return reject(err);
+  getUserCreateAnswers(options)
+    .then((answers) => {
+      if (answers.password !== answers.confirmPassword) {
+        return Promise.reject(new Error('Passwords do not match'));
       }
 
-      if (result.password !== result.confirmPassword) {
-        return reject(new Error('Passwords do not match'));
-      }
+      return answers;
+    })
+    .then((answers) => {
+      return UsersService
+        .createLocalUser(answers.email.trim(), answers.password.trim(), answers.username.trim())
+        .then((user) => {
+          console.log(`Created user ${user.id}.`);
 
-      resolve(result);
-    });
-  })
-  .then((result) => {
-    return User.createLocalUser(result.email.trim(), result.password.trim(), result.displayName.trim())
-    .then((user) => {
-      console.log(`Created user ${user.id}.`);
-
-      if (result.role && result.role.length > 0) {
-        return User
-          .addRoleToUser(user.id, result.role.trim())
-          .then(() => {
-            console.log(`Added the admin ${result.role.trim()} to User ${user.id}.`);
-            util.shutdown();
-          });
-      } else {
-        util.shutdown();
-      }
+          if (answers.roles.length > 0) {
+            return Promise.all(answers.roles.map((role) => {
+              return UsersService
+                .addRoleToUser(user.id, role)
+                .then(() => {
+                  console.log(`Added the role ${role} to User ${user.id}.`);
+                });
+            }));
+          }
+        });
+    })
+    .then(() => {
+      util.shutdown();
     })
     .catch((err) => {
       console.error(err);
       util.shutdown();
     });
-  });
 }
 
 /**
  * Deletes a user.
  */
 function deleteUser(userID) {
-  User
+  UserModel
     .findOneAndRemove({
       id: userID
     })
@@ -120,44 +154,34 @@ function deleteUser(userID) {
  * Changes the password for a user.
  */
 function passwd(userID) {
-  prompt.start();
-
-  prompt.get([
+  inquirer.prompt([
     {
       name: 'password',
-      description: 'Password',
-      hidden: true,
-      required: true
+      message: 'Password',
+      type: 'password',
+      validate: validateRequired('Password is required')
     },
     {
       name: 'confirmPassword',
-      description: 'Confirm Password',
-      hidden: true,
-      required: true
+      message: 'Confirm Password',
+      type: 'password',
+      validate: validateRequired('Confirm Password is required')
     }
-  ], (err, result) => {
-    if (err) {
-      console.error(err);
-      util.shutdown();
-      return;
+  ])
+  .then((answers) => {
+    if (answers.password !== answers.confirmPassword) {
+      return Promise.reject(new Error('Password mismatch'));
     }
 
-    if (result.password !== result.confirmPassword) {
-      console.error(new Error('Password mismatch'));
-      util.shutdown(1);
-      return;
-    }
-
-    User
-      .changePassword(userID, result.password)
-      .then(() => {
-        console.log('Password changed.');
-        util.shutdown();
-      })
-      .catch((err) => {
-        console.error(err);
-        util.shutdown(1);
-      });
+    return UsersService.changePassword(userID, answers.password);
+  })
+  .then(() => {
+    console.log('Password changed.');
+    util.shutdown();
+  })
+  .catch((err) => {
+    console.error(err);
+    util.shutdown(1);
   });
 }
 
@@ -168,7 +192,7 @@ function updateUser(userID, options) {
   const updates = [];
 
   if (options.email && typeof options.email === 'string' && options.email.length > 0) {
-    let q = User.update({
+    let q = UserModel.update({
       'id': userID,
       'profiles.provider': 'local'
     }, {
@@ -181,11 +205,11 @@ function updateUser(userID, options) {
   }
 
   if (options.name && typeof options.name === 'string' && options.name.length > 0) {
-    let q = User.update({
+    let q = UserModel.update({
       'id': userID
     }, {
       $set: {
-        displayName: options.name
+        username: options.name
       }
     });
 
@@ -208,13 +232,13 @@ function updateUser(userID, options) {
  * Lists all the users registered in the database.
  */
 function listUsers() {
-  User
+  UsersService
     .all()
     .then((users) => {
       let table = new Table({
         head: [
           'ID',
-          'Display Name',
+          'Username',
           'Profiles',
           'Roles',
           'Status',
@@ -225,7 +249,7 @@ function listUsers() {
       users.forEach((user) => {
         table.push([
           user.id,
-          user.displayName,
+          user.username,
           user.profiles.map((p) => p.provider).join(', '),
           user.roles.join(', '),
           user.status,
@@ -248,7 +272,7 @@ function listUsers() {
  * @param  {String} srcUserID id of the user to which is the source of the merge
  */
 function mergeUsers(dstUserID, srcUserID) {
-  User
+  UsersService
     .mergeUsers(dstUserID, srcUserID)
     .then(() => {
       console.log(`User ${srcUserID} was merged into user ${dstUserID}.`);
@@ -266,7 +290,14 @@ function mergeUsers(dstUserID, srcUserID) {
  * @param  {String} role   the role to add
  */
 function addRole(userID, role) {
-  User
+
+  if (UserModel.USER_ROLES.indexOf(role) === -1) {
+    console.error(`Role '${role}' is not supported. Supported roles are ${UserModel.USER_ROLES.join(', ')}.`);
+    util.shutdown(1);
+    return;
+  }
+
+  UsersService
     .addRoleToUser(userID, role)
     .then(() => {
       console.log(`Added the ${role} role to User ${userID}.`);
@@ -284,7 +315,14 @@ function addRole(userID, role) {
  * @param  {String} role   the role to remove
  */
 function removeRole(userID, role) {
-  User
+
+  if (UserModel.USER_ROLES.indexOf(role) === -1) {
+    console.error(`Role '${role}' is not supported. Supported roles are ${UserModel.USER_ROLES.join(', ')}.`);
+    util.shutdown(1);
+    return;
+  }
+
+  UsersService
     .removeRoleFromUser(userID, role)
     .then(() => {
       console.log(`Removed the ${role} role from User ${userID}.`);
@@ -301,8 +339,8 @@ function removeRole(userID, role) {
  * @param  {String} userID id of the user to ban
  */
 function ban(userID) {
-  User
-    .setStatus(userID, 'banned', '')
+  UsersService
+    .setStatus(userID, 'BANNED')
     .then(() => {
       console.log(`Banned the User ${userID}.`);
       util.shutdown();
@@ -318,8 +356,8 @@ function ban(userID) {
  * @param  {String} userUD id of the user to remove the role from
  */
 function unban(userID) {
-  User
-    .setStatus(userID, 'active', '')
+  UsersService
+    .setStatus(userID, 'ACTIVE')
     .then(() => {
       console.log(`Unban the User ${userID}.`);
       util.shutdown();
@@ -335,7 +373,7 @@ function unban(userID) {
  * @param  {String} userID the ID of a user to disable
  */
 function disableUser(userID) {
-  User
+  UsersService
     .disableUser(userID)
     .then(() => {
       console.log(`User ${userID} was disabled.`);
@@ -352,7 +390,7 @@ function disableUser(userID) {
  * @param  {String} userID the ID of a user to enable
  */
 function enableUser(userID) {
-  User
+  UsersService
     .enableUser(userID)
     .then(() => {
       console.log(`User ${userID} was enabled.`);
@@ -368,9 +406,6 @@ function enableUser(userID) {
 // Setting up the program command line arguments.
 //==============================================================================
 
-program
-  .version(pkg.version);
-
 program
   .command('create')
   .option('--email [email]', 'Email to use')

bin/commander.js

@@ -0,0 +1,56 @@
+const pkg = require('../package.json');
+const dotenv = require('dotenv');
+const fs = require('fs');
+const program = require('commander');
+
+// Perform rewrites to the runtime environment variables based on the contents
+// of the process.env.REWRITE_ENV if it exists. This is done here as it is the
+// entrypoint for the entire application.
+require('env-rewrite').rewrite();
+
+//==============================================================================
+// Setting up the program command line arguments.
+//==============================================================================
+
+const parseArgs = require('minimist')(process.argv.slice(2), {
+  alias: {
+    'c': 'config'
+  },
+  string: [
+    'config',
+    'pid'
+  ],
+  default: {
+    'config': null,
+    'pid': null
+  }
+});
+
+/**
+ * If the config flag is present, then we have to load the configuration from
+ * the file specified. We will then load those values into the environment.
+ */
+if (parseArgs.config) {
+  let envConfig = dotenv.parse(fs.readFileSync(parseArgs.config, {encoding: 'utf8'}));
+
+  Object.keys(envConfig).forEach((k) => {
+    process.env[k] = envConfig[k];
+  });
+}
+
+/**
+ * If the pid flag is present, then we have to create a pid file at the location
+ * specified.
+ */
+if (parseArgs.pid) {
+  const util = require('./util');
+
+  console.log('Wrote PID');
+
+  util.pid(parseArgs.pid);
+}
+
+module.exports = program
+  .version(pkg.version)
+  .option('-c, --config [path]', 'Specify the configuration file to load')
+  .option('--pid [path]', 'Specify a path to output the current PID to');

bin/util.js

@@ -0,0 +1,94 @@
+const debug = require('debug')('talk:util');
+const fs = require('fs');
+
+const util = module.exports = {};
+
+/**
+ * Stores an array of functions that should be executed in the event that the
+ * application needs to shutdown.
+ * @type {Array}
+ */
+util.toshutdown = [];
+
+/**
+ * Calls all the shutdown functions and then ends the process.
+ * @param  {Number} [defaultCode=0] default return code upon sucesfull shutdown.
+ */
+util.shutdown = (defaultCode = 0, signal = null) => {
+
+  if (signal) {
+    debug(`Reached ${signal} signal`);
+  }
+
+  debug(`${util.toshutdown.length} jobs now being called`);
+
+  Promise
+    .all(util.toshutdown.map((func) => func ? func(signal) : null).filter((func) => func))
+    .then(() => {
+      debug('Shutdown complete, now exiting');
+      process.exit(defaultCode);
+    })
+    .catch((err) => {
+      console.error(err);
+
+      process.exit(1);
+    });
+};
+
+/**
+ * Waits until an event is triggered by the node runtime and elevates a series
+ * of jobs to be ran in the event we need to shutdown.
+ * @param  {Array} jobs Array of promise capable shutdown functions that are
+ *                      executed.
+ */
+util.onshutdown = (jobs) => {
+
+  debug(`${jobs.length} jobs registered to be called during shutdown`);
+
+  // Add the new jobs to shutdown to the object reference.
+  util.toshutdown = util.toshutdown.concat(jobs);
+};
+
+/**
+ * Register a PID file to be maintained for the lifespan of the process.
+ * @param  {String} path path to the PID file to create
+ */
+util.pid = (path) => {
+  if (!/\//.test(path)) {
+    if (!/\.pid/.test(path)) {
+      path += '.pid';
+    }
+    path = `/tmp/${path}`;
+  }
+
+  const pid = `${process.pid.toString()}\n`;
+
+  fs.writeFile(path, pid, (err) => {
+    if (err) {
+      console.error(`Can't write PID file: ${err}`);
+      throw err;
+    }
+
+    // Add the cleanup for the fs onto the shutdown.
+    util.onshutdown([
+      () => new Promise((resolve, reject) => {
+
+        // Remove the pid file.
+        fs.unlink(path, (err) => {
+          if (err) {
+            return reject(err);
+          }
+
+          return resolve();
+        });
+      })
+    ]);
+  });
+};
+
+// Attach to the SIGTERM + SIGINT handles to ensure a clean shutdown in the
+// event that we have an external event. SIGUSR2 is called when the app is asked
+// to be 'killed', same procedure here.
+process.on('SIGTERM',   () => util.shutdown(0, 'SIGTERM'));
+process.on('SIGINT',    () => util.shutdown(0, 'SIGINT'));
+process.once('SIGUSR2', () => util.shutdown(0, 'SIGUSR2'));

circle.yml

@@ -1,18 +1,51 @@
 machine:
   node:
-    version: 7
+    version: 7.6
   services:
     - docker
+    - redis
+  environment:
+    PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
+    NODE_ENV: "test"
+
+dependencies:
+  override:
+    # TODO: use the following to add in support for MongoDB 3.4.
+    # # Upgrade the database version to 3.4.
+    # - sudo apt-get purge mongodb-org*
+    # - sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6
+    # - echo "deb [ arch=amd64 ] http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list
+    # - sudo apt-get update
+    # - sudo apt-get install -y mongodb-org
+    # - sudo service mongod restart
+
+    # Install node dependencies.
+    - yarn
+  cache_directories:
+    - ~/.cache/yarn
+  post:
+    # Build the static assets.
+    - yarn build
+    # Lint the project here, before tests are ran.
+    - yarn lint
+
+database:
+  post:
+    # Initialize the settings in the database, this will create indicies for the
+    # database.
+    - ./bin/cli setup --defaults
+    - sleep 2
 
 test:
   override:
-    - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml ./node_modules/.bin/mocha tests --reporter mocha-junit-reporter
-    - npm run lint
-    - npm run build
+    # Run the tests using the junit reporter.
+    - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml MOCHA_REPORTER=mocha-junit-reporter yarn test
+    # Run the e2e test suite.
+    # - E2E_REPORT_PATH=$CIRCLE_TEST_REPORTS/e2e yarn e2e
 
 deployment:
   release:
-    tag: /[0-9]+(\.[0-9]+)*/
+    tag: /v[0-9]+(\.[0-9]+)*/
     commands:
       - bash ./scripts/deploy.sh
 

client/.eslintrc.json

@@ -18,6 +18,7 @@
     ],
     "rules": {
       "react/jsx-uses-react": "error",
-      "react/jsx-uses-vars": "error"
+      "react/jsx-uses-vars": "error",
+      "no-console": ["warn", { "allow": ["warn", "error"] }]
     }
 }

client/coral-admin/README.md

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

client/coral-admin/src/AppRouter.js

@@ -1,21 +1,43 @@
 import React from 'react';
-import {Router, Route, IndexRoute, browserHistory} from 'react-router';
+import {Router, Route, IndexRoute, IndexRedirect, browserHistory} from 'react-router';
 
-import ModerationContainer from 'containers/ModerationQueue/ModerationContainer';
-import CommentStream from 'containers/CommentStream/CommentStream';
-import Configure from 'containers/Configure/Configure';
 import Streams from 'containers/Streams/Streams';
-import CommunityContainer from 'containers/Community/CommunityContainer';
+import Configure from 'containers/Configure/Configure';
 import LayoutContainer from 'containers/LayoutContainer';
+import InstallContainer from 'containers/Install/InstallContainer';
+import CommunityContainer from 'containers/Community/CommunityContainer';
+
+import ModerationLayout from 'containers/ModerationQueue/ModerationLayout';
+import ModerationContainer from 'containers/ModerationQueue/ModerationContainer';
+import Dashboard from 'containers/Dashboard/Dashboard';
 
 const routes = (
-  <Route path='/admin' component={LayoutContainer}>
-    <IndexRoute component={ModerationContainer} />
-    <Route path='embed' component={CommentStream} />
-    <Route path='community' component={CommunityContainer} />
-    <Route path='configure' component={Configure} />
-    <Route path='streams' component={Streams} />
-  </Route>
+  <div>
+    <Route exact path="/admin/install" component={InstallContainer}/>
+    <Route path='/admin' component={LayoutContainer}>
+      <IndexRoute component={Dashboard} />
+      <Route path='community' component={CommunityContainer} />
+      <Route path='configure' component={Configure} />
+      <Route path='streams' component={Streams} />
+      <Route path='dashboard' component={Dashboard} />
+
+      {/* Moderation Routes */}
+
+      <Route path='moderate' component={ModerationLayout}>
+        <Route path='premod' components={ModerationContainer}>
+          <Route path=':id' components={ModerationContainer} />
+        </Route>
+        <Route path='rejected' components={ModerationContainer}>
+          <Route path=':id' components={ModerationContainer} />
+        </Route>
+        <Route path='flagged' components={ModerationContainer}>
+          <Route path=':id' components={ModerationContainer} />
+        </Route>
+        <Route path=':id' components={ModerationContainer} />
+        <IndexRedirect to='premod' />
+      </Route>
+    </Route>
+  </div>
 );
 
 const AppRouter = () => <Router history={browserHistory} routes={routes} />;

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

@@ -4,8 +4,10 @@ import {
   FETCH_ASSETS_FAILURE,
   UPDATE_ASSET_STATE_REQUEST,
   UPDATE_ASSET_STATE_SUCCESS,
-  UPDATE_ASSET_STATE_FAILURE
+  UPDATE_ASSET_STATE_FAILURE,
+  UPDATE_ASSETS
 } from '../constants/assets';
+
 import coralApi from '../../../coral-framework/helpers/response';
 
 /**
@@ -34,3 +36,7 @@ export const updateAssetState = (id, closedAt) => (dispatch) => {
     dispatch({type: UPDATE_ASSET_STATE_SUCCESS}))
     .catch(error => dispatch({type: UPDATE_ASSET_STATE_FAILURE, error}));
 };
+
+export const updateAssets = assets => dispatch => {
+  dispatch({type: UPDATE_ASSETS, assets});
+};

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

@@ -1,5 +1,29 @@
 import * as actions from '../constants/auth';
-import coralApi from '../../../coral-framework/helpers/response';
+import coralApi from 'coral-framework/helpers/response';
+
+// Log In.
+export const handleLogin = (email, password) => dispatch => {
+  dispatch({type: actions.LOGIN_REQUEST});
+  return coralApi('/auth/local', {method: 'POST', body: {email, password}})
+    .then(result => {
+      const isAdmin = !!result.user.roles.filter(i => i === 'ADMIN').length;
+      dispatch(checkLoginSuccess(result.user, isAdmin));
+    })
+    .catch(error => {
+      dispatch({type: actions.LOGIN_FAILURE, message: error.translation_key});
+    });
+};
+
+const forgotPassowordRequest = () => ({type: actions.FETCH_FORGOT_PASSWORD_REQUEST});
+const forgotPassowordSuccess = () => ({type: actions.FETCH_FORGOT_PASSWORD_SUCCESS});
+const forgotPassowordFailure = () => ({type: actions.FETCH_FORGOT_PASSWORD_FAILURE});
+
+export const requestPasswordReset = email => dispatch => {
+  dispatch(forgotPassowordRequest(email));
+  return coralApi('/account/password/reset', {method: 'POST', body: {email}})
+    .then(() => dispatch(forgotPassowordSuccess()))
+    .catch(error => dispatch(forgotPassowordFailure(error)));
+};
 
 // Check Login
 
@@ -9,12 +33,15 @@ const checkLoginFailure = error => ({type: actions.CHECK_LOGIN_FAILURE, error});
 
 export const checkLogin = () => dispatch => {
   dispatch(checkLoginRequest());
-  coralApi('/auth')
+  return coralApi('/auth')
     .then(result => {
-      const isAdmin = !!result.user.roles.filter(i => i === 'admin').length;
+      const isAdmin = !!result.user.roles.filter(i => i === 'ADMIN').length;
       dispatch(checkLoginSuccess(result.user, isAdmin));
     })
-    .catch(error => dispatch(checkLoginFailure(error)));
+    .catch(error => {
+      console.error(error);
+      dispatch(checkLoginFailure(`${error.translation_key}`));
+    });
 };
 
 // LogOut Actions
@@ -25,7 +52,7 @@ const logOutFailure = () => ({type: actions.LOGOUT_FAILURE});
 
 export const logout = () => dispatch => {
   dispatch(logOutRequest());
-  coralApi('/auth', {method: 'DELETE'})
+  return coralApi('/auth', {method: 'DELETE'})
     .then(() => dispatch(logOutSuccess()))
     .catch(error => dispatch(logOutFailure(error)));
 };

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

@@ -1,102 +0,0 @@
-import coralApi from '../../../coral-framework/helpers/response';
-import * as commentTypes from '../constants/comments';
-import * as actionTypes from '../constants/actions';
-
-function addUsersCommentsActions (dispatch, {comments, users, actions}) {
-  dispatch({type: commentTypes.USERS_MODERATION_QUEUE_FETCH_SUCCESS, users});
-  dispatch({type: commentTypes.COMMENTS_MODERATION_QUEUE_FETCH_SUCCESS, comments});
-  dispatch({type: actionTypes.ACTIONS_MODERATION_QUEUE_FETCH_SUCCESS, actions});
-}
-
-// Get comments to fill each of the three lists on the mod queue
-export const fetchModerationQueueComments = () => {
-  return dispatch => {
-    dispatch({type: commentTypes.COMMENTS_MODERATION_QUEUE_FETCH_REQUEST});
-
-    return Promise.all([
-      coralApi('/queue/comments/pending'),
-      coralApi('/queue/comments/rejected'),
-      coralApi('/queue/comments/flagged')
-    ])
-    .then(([pending, rejected, flagged]) => {
-
-      /* Combine seperate calls into a single object */
-      flagged.comments.forEach(comment => comment.flagged = true);
-      return {
-        comments: [...pending.comments, ...rejected.comments, ...flagged.comments],
-        users: [...pending.users, ...rejected.users, ...flagged.users],
-        actions: [...pending.actions, ...rejected.actions, ...flagged.actions]
-      };
-    })
-    .then(addUsersCommentsActions.bind(this, dispatch));
-  };
-};
-
-export const fetchPendingQueue = () => {
-  return dispatch => {
-    dispatch({type: commentTypes.COMMENTS_MODERATION_QUEUE_FETCH_REQUEST});
-
-    return coralApi('/queue/comments/pending')
-      .then(addUsersCommentsActions.bind(this, dispatch));
-  };
-};
-
-export const fetchRejectedQueue = () => {
-  return dispatch => {
-    dispatch({type: commentTypes.COMMENTS_MODERATION_QUEUE_FETCH_REQUEST});
-
-    return coralApi('/queue/comments/rejected')
-      .then(addUsersCommentsActions.bind(this, dispatch));
-  };
-};
-
-export const fetchFlaggedQueue = () => {
-  return dispatch => {
-    dispatch({type: commentTypes.COMMENTS_MODERATION_QUEUE_FETCH_REQUEST});
-
-    return coralApi('/queue/comments/flagged')
-      .then(results => {
-        results.comments.forEach(comment => comment.flagged = true);
-        return results;
-      })
-      .then(addUsersCommentsActions.bind(this, dispatch));
-  };
-};
-
-// Create a new comment
-export const createComment = (name, body) => {
-  return (dispatch) => {
-    const formData = {body, name};
-    return coralApi('/comments', {method: 'POST', body: formData})
-      .then(res => dispatch({type: commentTypes.COMMENT_CREATE_SUCCESS, comment: res}))
-      .catch(error => dispatch({type: commentTypes.COMMENT_CREATE_FAILED, error}));
-  };
-};
-
-/**
- * Action disptacher related to comments
- */
-
-// Update a comment. Now to update a comment we need to send back the whole object
-export const updateStatus = (status, comment) => {
-  return dispatch => {
-    dispatch({type: commentTypes.COMMENT_STATUS_UPDATE_REQUEST, id: comment.id, status});
-    return coralApi(`/comments/${comment.id}/status`, {method: 'PUT', body: {status}})
-      .then(res => dispatch({type: commentTypes.COMMENT_STATUS_UPDATE_SUCCESS, res}))
-      .catch(error => dispatch({type: commentTypes.COMMENT_STATUS_UPDATE_FAILURE, error}));
-  };
-};
-
-export const flagComment = id => (dispatch, getState) => {
-  dispatch({type: commentTypes.COMMENT_FLAG, id});
-  dispatch({type: 'COMMENT_UPDATE', comment: getState().comments.get('byId').get(id)});
-};
-
-// Dialog Actions
-export const showBanUserDialog = (userId, userName, commentId) => {
-  return {type: commentTypes.SHOW_BANUSER_DIALOG, userId, userName, commentId};
-};
-
-export const hideBanUserDialog = (showDialog) => {
-  return {type: commentTypes.HIDE_BANUSER_DIALOG, showDialog};
-};

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

@@ -0,0 +1,118 @@
+import coralApi from 'coral-framework/helpers/response';
+import * as actions from '../constants/install';
+import validate from 'coral-framework/helpers/validate';
+import errorMsj from 'coral-framework/helpers/error';
+
+export const nextStep = () => ({type: actions.NEXT_STEP});
+export const previousStep = () => ({type: actions.PREVIOUS_STEP});
+export const goToStep = step => ({type: actions.GO_TO_STEP, step});
+
+const installRequest = () => ({type: actions.INSTALL_REQUEST});
+const installSuccess = () => ({type: actions.INSTALL_SUCCESS});
+const installFailure = error => ({type: actions.INSTALL_FAILURE, error});
+
+const addError = (name, error) => ({type: actions.ADD_ERROR, name, error});
+const hasError = error => ({type: actions.HAS_ERROR, error});
+const clearErrors = () => ({type: actions.CLEAR_ERRORS});
+
+const validation = (formData, dispatch, next) => {
+  if (!(formData != null)) {
+    return dispatch(hasError());
+  }
+
+  const validKeys = Object.keys(formData)
+    .filter(name => name !== 'domains');
+
+  // Required Validation
+  const empty = validKeys
+  .filter(name => {
+    const cond = !formData[name].length;
+
+    if (cond) {
+
+    // Adding Error
+      dispatch(addError(name, 'This field is required.'));
+    } else {
+      dispatch(addError(name, ''));
+    }
+
+    return cond;
+  });
+
+  if (empty.length) {
+    return dispatch(hasError());
+  }
+
+  // RegExp Validation
+  const validation = validKeys
+    .filter(name => {
+      const cond = !validate[name](formData[name]);
+      if (cond) {
+
+      // Adding Error
+        dispatch(addError(name, errorMsj[name]));
+      } else {
+        dispatch(addError(name, ''));
+      }
+
+      return cond;
+    });
+
+  if (validation.length) {
+    return dispatch(hasError());
+  }
+
+  dispatch(clearErrors());
+  next();
+};
+
+export const submitSettings = () => (dispatch, getState) => {
+  const settingsFormData = getState().install.toJS().data.settings;
+  validation(settingsFormData, dispatch, function() {
+    dispatch(nextStep());
+  });
+};
+
+export const submitUser = () => (dispatch, getState) => {
+  const userFormData = getState().install.toJS().data.user;
+  validation(userFormData, dispatch, function() {
+    dispatch(nextStep());
+  });
+};
+
+export const finishInstall = () => (dispatch, getState) => {
+  const data = getState().install.toJS().data;
+  dispatch(installRequest());
+  return coralApi('/setup', {method: 'POST', body: data})
+    .then(() => {
+      dispatch(installSuccess());
+      dispatch(nextStep());
+    })
+    .catch(error => {
+      console.error(error);
+      dispatch(installFailure(`${error.translation_key}`));
+    });
+};
+
+export const updateSettingsFormData = (name, value) => ({type: actions.UPDATE_FORMDATA_SETTINGS, name, value});
+export const updateUserFormData = (name, value) => ({type: actions.UPDATE_FORMDATA_USER, name, value});
+export const updatePermittedDomains = (value) => ({type: actions.UPDATE_PERMITTED_DOMAINS_SETTINGS, value});
+
+const checkInstallRequest = () => ({type: actions.CHECK_INSTALL_REQUEST});
+const checkInstallSuccess = installed => ({type: actions.CHECK_INSTALL_SUCCESS, installed});
+const checkInstallFailure = error => ({type: actions.CHECK_INSTALL_FAILURE, error});
+
+export const checkInstall = next => dispatch => {
+  dispatch(checkInstallRequest());
+  coralApi('/setup')
+    .then(({installed}) => {
+      dispatch(checkInstallSuccess(installed));
+      if (installed) {
+        next();
+      }
+    })
+    .catch(error => {
+      console.error(error);
+      dispatch(checkInstallFailure(`${error.translation_key}`));
+    });
+};

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

@@ -0,0 +1,8 @@
+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) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId});
+export const hideBanUserDialog = (showDialog) => ({type: actions.HIDE_BANUSER_DIALOG, showDialog});

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

@@ -11,6 +11,7 @@ export const SAVE_SETTINGS_SUCCESS = 'SAVE_SETTINGS_SUCCESS';
 export const SAVE_SETTINGS_FAILED = 'SAVE_SETTINGS_FAILED';
 
 export const WORDLIST_UPDATED = 'WORDLIST_UPDATED';
+export const DOMAINLIST_UPDATED = 'DOMAINLIST_UPDATED';
 
 export const fetchSettings = () => dispatch => {
   dispatch({type: SETTINGS_LOADING});
@@ -33,8 +34,12 @@ export const updateWordlist = (listName, list) => {
   return {type: WORDLIST_UPDATED, listName, list};
 };
 
+export const updateDomainlist = (listName, list) => {
+  return {type: DOMAINLIST_UPDATED, listName, list};
+};
+
 export const saveSettingsToServer = () => (dispatch, getState) => {
-  let settings = getState().settings.toJS().settings;
+  let settings = getState().settings.toJS();
   if (settings.charCount) {
     settings.charCount = parseInt(settings.charCount);
   }

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

@@ -1,5 +1,5 @@
 import coralApi from '../../../coral-framework/helpers/response';
-import * as actions from '../constants/user';
+import * as userTypes from '../constants/users';
 
 /**
  * Action disptacher related to users
@@ -7,9 +7,25 @@ import * as actions from '../constants/user';
 // change status of a user
 export const userStatusUpdate = (status, userId, commentId) => {
   return (dispatch) => {
-    dispatch({type: actions.UPDATE_STATUS_REQUEST});
+    dispatch({type: userTypes.UPDATE_STATUS_REQUEST});
     return coralApi(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
-      .then(res => dispatch({type: actions.UPDATE_STATUS_SUCCESS, res}))
-      .catch(error => dispatch({type: actions.UPDATE_STATUS_FAILURE, error}));
+      .then(res => dispatch({type: userTypes.UPDATE_STATUS_SUCCESS, res}))
+      .catch(error => dispatch({type: userTypes.UPDATE_STATUS_FAILURE, error}));
+  };
+};
+
+// change status of a user
+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}));
+  };
+};
+
+// let a user edit their username
+export const enableUsernameEdit = (userId) => {
+  return (dispatch) => {
+    return coralApi(`/users/${userId}/username-enable`, {method: 'POST'})
+      .catch(error => dispatch({type: userTypes.USERNAME_ENABLE_FAILURE, error}));
   };
 };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './ModerationList.css';
+import {Button} from 'coral-ui';
+import {menuActionsMap} from '../containers/ModerationQueue/helpers/moderationQueueActionsMap';
+
+const ActionButton = ({type = '', ...props}) => {
+  return (
+    <Button
+      className={`${type.toLowerCase()} ${styles.actionButton}`}
+      cStyle={type.toLowerCase()}
+      icon={menuActionsMap[type].icon}
+      onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
+    >{menuActionsMap[type].text}</Button>
+  );
+};
+
+export default ActionButton;

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

@@ -0,0 +1,92 @@
+import React, {PropTypes} from 'react';
+import Layout from 'coral-admin/src/components/ui/Layout';
+import styles from './NotFound.css';
+import {Button, TextField, Alert, Success} from 'coral-ui';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations';
+const lang = new I18n(translations);
+
+class AdminLogin extends React.Component {
+
+  constructor (props) {
+    super(props);
+    this.state = {email: '', password: '', requestPassword: false};
+  }
+
+  handleSignIn = e => {
+    e.preventDefault();
+    this.props.handleLogin(this.state.email, this.state.password);
+  }
+
+  handleRequestPassword = e => {
+    e.preventDefault();
+    this.props.requestPasswordReset(this.state.email);
+  }
+
+  render () {
+    const {errorMessage} = this.props;
+    const signInForm = (
+      <form onSubmit={this.handleSignIn}>
+        {errorMessage && <Alert>{lang.t(`errors.${errorMessage}`)}</Alert>}
+        <TextField
+          label='Email Address'
+          value={this.state.email}
+          onChange={e => this.setState({email: e.target.value})} />
+        <TextField
+          label='Password'
+          value={this.state.password}
+          onChange={e => this.setState({password: e.target.value})}
+          type='password' />
+        <div style={{height: 10}}></div>
+        <Button
+          type='submit'
+          cStyle='black'
+          full
+          onClick={this.handleSignIn}>Sign In</Button>
+        <p className={styles.forgotPasswordCTA}>
+          Forgot your password? <a href="#" className={styles.forgotPasswordLink} onClick={e => {
+            e.preventDefault();
+            this.setState({requestPassword: true});
+          }}>Request a new one.</a>
+        </p>
+      </form>
+    );
+    const requestPasswordForm = (
+      this.props.passwordRequestSuccess
+      ? <p className={styles.passwordRequestSuccess} onClick={() => {
+        location.href = location.href;
+      }}>
+          {this.props.passwordRequestSuccess} <a className={styles.signInLink} href="#">Sign in</a>
+          <Success />
+        </p>
+      : <form onSubmit={this.handleRequestPassword}>
+        <TextField
+          label='Email Address'
+          value={this.state.email}
+          onChange={e => this.setState({email: e.target.value})} />
+        <Button
+          type='submit'
+          cStyle='black'
+          full
+          onClick={this.handleRequestPassword}>Reset Password</Button>
+      </form>
+    );
+    return (
+      <Layout fixedDrawer restricted={true}>
+        <div className={styles.loginLayout}>
+          <h1 className={styles.loginHeader}>Team sign in</h1>
+          <p className={styles.loginCTA}>Sign in to interact with your community.</p>
+          { this.state.requestPassword ? requestPasswordForm : signInForm }
+        </div>
+      </Layout>
+    );
+  }
+}
+
+AdminLogin.propTypes = {
+  handleLogin: PropTypes.func.isRequired,
+  passwordRequestSuccess: PropTypes.string,
+  loginError: PropTypes.string
+};
+
+export default AdminLogin;

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

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

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

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

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

@@ -22,17 +22,17 @@
   }
 }
 
-.formField {
+.textField {
     margin-top: 15px;
 }
 
-.formField label {
+.textField label {
     font-size: 1.08em;
     font-weight: bold;
     margin-bottom: 5px;
 }
 
-.formField input {
+.textField input {
     width: 100%;
     display: block;
     border: none;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Dialog} from 'coral-ui';
 import styles from './BanUserDialog.css';
 
@@ -8,34 +8,28 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-const BanUserDialog = ({open, handleClose, onClickBanUser, user = {}}) => (
+const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
   <Dialog
     className={styles.dialog}
     id="banuserDialog"
     open={open}
-    onClose={() => handleClose()}
-    onCancel={() => handleClose()}
+    onClose={handleClose}
+    onCancel={handleClose}
     title={lang.t('bandialog.ban_user')}>
     <span className={styles.close} onClick={handleClose}>×</span>
     <div>
       <div className={styles.header}>
-        <h2>
-          {lang.t('bandialog.ban_user')}
-        </h2>
+        <h2>{lang.t('bandialog.ban_user')}</h2>
       </div>
       <div className={styles.separator}>
-        <h3>
-          {lang.t('bandialog.are_you_sure', user.userName)}
-        </h3>
-        <i>
-          {lang.t('bandialog.note')}
-        </i>
+        <h3>{lang.t('bandialog.are_you_sure', user.name)}</h3>
+        <i>{lang.t('bandialog.note')}</i>
       </div>
       <div className={styles.buttons}>
-        <Button cStyle="cancel" className={styles.cancel} onClick={() => handleClose()} raised>
+        <Button cStyle="cancel" className={styles.cancel} onClick={handleClose} raised>
           {lang.t('bandialog.cancel')}
         </Button>
-        <Button cStyle="black" className={styles.ban} onClick={() => onClickBanUser(user.userId, user.commentId)} raised>
+        <Button cStyle="black" className={styles.ban} onClick={() => handleBanUser({userId: user.id})} raised>
           {lang.t('bandialog.yes_ban_user')}
         </Button>
       </div>
@@ -43,4 +37,10 @@ const BanUserDialog = ({open, handleClose, onClickBanUser, user = {}}) => (
   </Dialog>
 );
 
+BanUserDialog.propTypes = {
+  handleBanUser: PropTypes.func.isRequired,
+  handleClose: PropTypes.func.isRequired,
+  user: PropTypes.object.isRequired,
+};
+
 export default BanUserDialog;

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

@@ -2,18 +2,19 @@ import React from 'react';
 import timeago from 'timeago.js';
 import Linkify from 'react-linkify';
 
-import styles from './CommentList.css';
+import styles from './ModerationList.css';
 
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
 
 import Highlighter from 'react-highlight-words';
-import {FabButton, Button, Icon} from 'coral-ui';
+import {Icon} from 'coral-ui';
+import ActionButton from './ActionButton';
 
 const linkify = new Linkify();
 
 // Render a single comment for the list
-export default props => {
+const Comment = props => {
   const {comment, author} = props;
   let authorStatus = author.status;
   const links = linkify.getMatches(comment.body);
@@ -22,7 +23,7 @@ export default props => {
     <li tabIndex={props.index} className={`mdl-card mdl-shadow--2dp ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
       <div className={styles.itemHeader}>
         <div className={styles.author}>
-          <span>{author.displayName || lang.t('comment.anon')}</span>
+          <span>{author.username || lang.t('comment.anon')}</span>
           <span className={styles.created}>{timeago().format(comment.createdAt || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}</span>
           {comment.flagged ? <p className={styles.flagged}>{lang.t('comment.flagged')}</p> : null}
         </div>
@@ -30,7 +31,18 @@ export default props => {
           {links ?
           <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
           <div className={`actions ${styles.actions}`}>
-            {props.modActions.map((action, i) => getActionButton(action, i, props))}
+            {props.modActions.map(
+              (action, i) =>
+              <ActionButton
+                option={action}
+                key={i}
+                type='COMMENTS'
+                comment={comment}
+                user={author}
+                menuOptionsMap={props.menuOptionsMap}
+                onClickAction={props.onClickAction}
+                onClickShowBanDialog={props.onClickShowBanDialog}/>
+            )}
           </div>
           {authorStatus === 'banned' ?
           <span className={styles.banned}><Icon name='error_outline'/> {lang.t('comment.banned_user')}</span> : null}
@@ -49,43 +61,7 @@ export default props => {
   );
 };
 
-// Get the button of the action performed over a comment if any
-const getActionButton = (action, i, props) => {
-  const {comment, author} = props;
-  const status = comment.status;
-  const flagged = comment.flagged;
-  const banned = (author.status === 'banned');
-
-  if (action === 'flag' && (status || flagged === true)) {
-    return null;
-  }
-  if (action === 'ban') {
-    return (
-      <div className={styles.ban}>
-        <Button
-          className={`ban ${styles.banButton}`}
-          cStyle='darkGrey'
-          disabled={banned ? 'disabled' : ''}
-          onClick={() => props.onClickShowBanDialog(author.id, author.displayName, comment.id)}
-          key={i}
-          raised
-        >
-          <Icon name='not_interested' className={styles.banIcon} />
-          {lang.t('comment.ban_user')}
-        </Button>
-      </div>
-    );
-  }
-  return (
-    <FabButton
-      className={`${action} ${styles.actionButton}`}
-      cStyle={action}
-      icon={props.actionsMap[action].icon}
-      key={i}
-      onClick={() => props.onClickAction(props.actionsMap[action].status, comment)}
-    />
-  );
-};
+export default Comment;
 
 const linkStyles = {
   backgroundColor: 'rgb(255, 219, 135)',

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

@@ -1,166 +0,0 @@
-import React, {PropTypes} from 'react';
-import styles from './CommentList.css';
-import key from 'keymaster';
-import Hammer from 'hammerjs';
-import Comment from 'components/Comment';
-
-// Each action has different meaning and configuration
-const modActions = {
-  'reject': {status: 'rejected', icon: 'close', key: 'r'},
-  'approve': {status: 'accepted', icon: 'done', key: 't'},
-  'flag': {status: 'flagged', icon: 'flag', filter: 'Untouched'},
-  'ban': {status: 'banned', icon: 'not interested'}
-};
-
-// Renders a comment list and allow performing actions
-export default class CommentList extends React.Component {
-  static propTypes = {
-    isActive: PropTypes.bool,
-    singleView: PropTypes.bool,
-    commentIds: PropTypes.arrayOf(PropTypes.string).isRequired,
-    comments: PropTypes.object.isRequired,
-    users: PropTypes.object.isRequired,
-    onClickAction: PropTypes.func,
-    
-    // list of actions (flags, etc) associated with the comments
-    modActions: PropTypes.arrayOf(PropTypes.string).isRequired,
-    loading: PropTypes.bool,
-
-    suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired
-  }
-
-  constructor (props) {
-    super(props);
-
-    this.state = {active: null};
-    this.onClickAction = this.onClickAction.bind(this);
-    this.onClickShowBanDialog = this.onClickShowBanDialog.bind(this);
-  }
-
-  // remove key handlers before leaving
-  componentWillUnmount () {
-    this.unbindKeyHandlers();
-  }
-
-  // add key handlers and gestures
-  componentDidMount () {
-    this.bindKeyHandlers();
-
-    // this.bindGestures() // need to check whether we're on a mobile device or this throws an Error
-  }
-
-  // If entering to singleview and no active, active is the first eleement
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.singleView && !this.state.active) {
-      this.setState({active: nextProps.commentIds[0]});
-    }
-  }
-
-  // Add swipe to approve or reject
-  bindGestures () {
-    const {modActions} = this.props;
-    this._hammer = new Hammer(this.base);
-    this._hammer.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
-
-    if (modActions.indexOf('reject') !== -1) {
-      this._hammer.on('swipeleft', () => this.props.singleView && this.actionKeyHandler('Rejected'));
-    }
-    if (modActions.indexOf('approve') !== -1) {
-      this._hammer.on('swiperight', () => this.props.singleView && this.actionKeyHandler('Approved'));
-    }
-  }
-
-  // Add key handlers. Each action has one and added j/k for moving around
-  bindKeyHandlers () {
-    this.props.modActions.filter(action => modActions[action].key).forEach(action => {
-      key(modActions[action].key, 'commentList', () => this.props.isActive && this.actionKeyHandler(modActions[action].status));
-    });
-    key('j', 'commentList', () => this.props.isActive && this.moveKeyHandler('down'));
-    key('k', 'commentList', () => this.props.isActive && this.moveKeyHandler('up'));
-    key.setScope('commentList');
-  }
-
-  // Perform an action using the keys only if the comment is active
-  actionKeyHandler (action) {
-    if (this.props.isActive && this.state.active) {
-      this.onClickAction(action, this.state.active);
-    }
-  }
-
-  // move around with j/k
-  moveKeyHandler (direction) {
-    if (!this.props.isActive) {
-      return;
-    }
-
-    const {commentIds} = this.props;
-    const {active} = this.state;
-
-    // check boundaries
-    if (active === null || !commentIds.length) {
-      this.setState({active: commentIds[0]});
-    } else if (direction === 'up' && active !== commentIds[0]) {
-      this.setState({active: commentIds[commentIds.indexOf(active) - 1]});
-    } else if (direction === 'down' && active !== commentIds[commentIds.length - 1]) {
-      this.setState({active: commentIds[commentIds.indexOf(active) + 1]});
-    }
-
-    // scroll to the position
-    const index = Math.max(commentIds.indexOf(this.state.active), 0);
-    this.base.childNodes[index] && this.base.childNodes[index].focus();
-  }
-
-  unbindKeyHandlers () {
-    key.deleteScope('commentList');
-  }
-
-  // If we are performing an action over a comment (aka removing from the list) we need to select a new active.
-  // TODO: In the future this can be improved and look at the actual state to
-  // resolve since the content of the list could change externally. For now it works as expected
-  onClickAction (action, id, author_id) {
-
-    // activate the next comment
-    if (id === this.state.active) {
-      const {commentIds} = this.props;
-      if (commentIds[commentIds.length - 1] === this.state.active) {
-        this.setState({active: commentIds[commentIds.length - 2]});
-      } else {
-        this.setState({active: commentIds[Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.length - 1)]});
-      }
-    }
-    this.props.onClickAction(action, id, author_id);
-  }
-
-  onClickShowBanDialog(userId, userName, commentId) {
-    this.props.onClickShowBanDialog(userId, userName, commentId);
-  }
-
-  render () {
-    const {singleView, commentIds, comments, users, hideActive, key, suspectWords} = this.props;
-    const {active} = this.state;
-
-    return (
-      <ul
-        className={`${styles.list} ${singleView ? styles.singleView : ''}`} {...key}
-        id='commentList'
-      >
-        {commentIds.map((commentId, index) => {
-          const comment = comments[commentId];
-          const author = users[comment.author_id];
-          return <Comment
-            suspectWords={suspectWords}
-            comment={comment}
-            author={author}
-            key={index}
-            index={index}
-            onClickAction={this.onClickAction}
-            onClickShowBanDialog={this.onClickShowBanDialog}
-            modActions={this.props.modActions}
-            actionsMap={modActions}
-            isActive={commentId === active}
-            hideActive={hideActive} />;
-        })}
-      </ul>
-    );
-  }
-}

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

@@ -0,0 +1,14 @@
+import React, {PropTypes} from 'react';
+import {Card} from 'coral-ui';
+
+const EmptyCard = props => (
+  <Card style={{textAlign: 'center', maxWidth: 400, margin: '0 auto'}}>
+    {props.children}
+  </Card>
+);
+
+EmptyCard.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default EmptyCard;

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

@@ -0,0 +1,34 @@
+.heading {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.widgetTable {
+  width: 100%;
+  border-collapse: collapse;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
+}
+
+.widgetTable thead th {
+  border-bottom: 1px solid #f47e6b;
+  padding: 10px;
+  text-align: left;
+}
+
+.widgetTable tbody tr {
+  border-bottom: 1px solid lightgrey;
+}
+
+.widgetTable tbody tr:last-child {
+  border-bottom: none;
+}
+
+.widgetTable tbody td {
+  padding: 10px;
+}
+
+.lede {
+  font-size: 0.9em;
+  color: grey;
+}

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

@@ -19,7 +19,6 @@
 
 .inner {
   width: 100vw;
-  height: 100vh;
   background-color: #fff;
   box-shadow: 2px 2px 5px 0px rgba(153,153,153,1);
   padding: 20px;
@@ -37,7 +36,6 @@
 @media (--big-viewport) {
   .inner {
     width: 600px;
-    height: 50vh;
     border-radius: 4px;
   }
 }

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

@@ -69,6 +69,7 @@
     justify-content: space-between;
 
     .author {
+      min-width: 230px;
       display: flex;
       align-items: center;
     }
@@ -95,11 +96,6 @@
     margin-left: 40px;
   }
 
-  .actionButton {
-    transform: scale(.8);
-    margin: 0;
-  }
-
   .body {
     margin-top: 20px;
     flex: 1;
@@ -112,6 +108,12 @@
     padding-top: 15px;
     padding-left: 10px;
   }
+
+  .flagCount{
+    font-size: 12px;
+    color: #d32f2f;
+  }
+
 }
 
 .empty {
@@ -175,3 +177,9 @@
     font-size: 14px;
   }
 }
+
+
+.actionButton {
+  transform: scale(.8);
+  margin: 0;
+}

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

@@ -0,0 +1,227 @@
+import React, {PropTypes} from 'react';
+import styles from './ModerationList.css';
+import key from 'keymaster';
+import Hammer from 'hammerjs';
+import Comment from './Comment';
+import User from './User';
+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'},
+  'flag': {status: 'FLAGGED', icon: 'flag', filter: 'Untouched'},
+  'ban': {status: 'BANNED', icon: 'not interested'}
+};
+
+// Renders a comment list and allow performing actions
+export default class ModerationList extends React.Component {
+  static propTypes = {
+    isActive: PropTypes.bool,
+    singleView: PropTypes.bool,
+    commentIds: PropTypes.arrayOf(PropTypes.string),
+    actionIds: PropTypes.arrayOf(PropTypes.string),
+    comments: PropTypes.object,
+    users: PropTypes.object.isRequired,
+    actions: PropTypes.object,
+    userStatusUpdate: PropTypes.func.isRequired,
+    suspendUser: PropTypes.func.isRequired,
+
+    // list of actions (flags, etc) associated with the comments
+    modActions: PropTypes.arrayOf(PropTypes.string).isRequired,
+    loading: PropTypes.bool,
+
+    suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired
+  }
+
+  state = {active: null, suspendUserModal: null, email: null};
+
+  // remove key handlers before leaving
+  componentWillUnmount () {
+    this.unbindKeyHandlers();
+  }
+
+  // add key handlers and gestures
+  componentDidMount () {
+    this.bindKeyHandlers();
+
+    // this.bindGestures() // need to check whether we're on a mobile device or this throws an Error
+  }
+
+  // If entering to singleview and no active, active is the first eleement
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.singleView && !this.state.active) {
+      this.setState({active: nextProps.commentIds[0]});
+    }
+  }
+
+  // Add swipe to approve or reject
+  bindGestures () {
+    const {modActions} = this.props;
+    this._hammer = new Hammer(this.base);
+    this._hammer.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
+
+    if (modActions.indexOf('reject') !== -1) {
+      this._hammer.on('swipeleft', () => this.props.singleView && this.actionKeyHandler('Rejected'));
+    }
+    if (modActions.indexOf('approve') !== -1) {
+      this._hammer.on('swiperight', () => this.props.singleView && this.actionKeyHandler('Approved'));
+    }
+  }
+
+  // Add key handlers. Each action has one and added j/k for moving around
+  bindKeyHandlers () {
+    const {modActions, isActive} = this.props;
+    modActions.filter(action => menuOptionsMap[action].key).forEach(action => {
+      key(menuOptionsMap[action].key, 'moderationList', () => isActive && this.actionKeyHandler(menuOptionsMap[action].status));
+    });
+    key('j', 'moderationList', () => isActive && this.moveKeyHandler('down'));
+    key('k', 'moderationList', () => isActive && this.moveKeyHandler('up'));
+    key.setScope('moderationList');
+  }
+
+  // Perform an action using the keys only if the comment is active
+  actionKeyHandler (action) {
+    if (this.props.isActive && this.state.active) {
+      this.onClickAction(action, this.state.active);
+    }
+  }
+
+  // move around with j/k
+  moveKeyHandler (direction) {
+    if (!this.props.isActive) {
+      return;
+    }
+
+    const {commentIds} = this.props;
+    const {active} = this.state;
+
+    // check boundaries
+    if (active === null || !commentIds.length) {
+      this.setState({active: commentIds[0]});
+    } else if (direction === 'up' && active !== commentIds[0]) {
+      this.setState({active: commentIds[commentIds.indexOf(active) - 1]});
+    } else if (direction === 'down' && active !== commentIds[commentIds.length - 1]) {
+      this.setState({active: commentIds[commentIds.indexOf(active) + 1]});
+    }
+
+    // scroll to the position
+    const index = Math.max(commentIds.indexOf(this.state.active), 0);
+    this.base.childNodes[index] && this.base.childNodes[index].focus();
+  }
+
+  unbindKeyHandlers () {
+    key.deleteScope('moderationList');
+  }
+
+  // If we are performing an action over a comment (aka removing from the list) we need to select a new active.
+  // TODO: In the future this can be improved and look at the actual state to
+  // resolve since the content of the list could change externally. For now it works as expected
+  onClickAction = (menuOption, id, action) => {
+
+    // activate the next comment
+    if (id === this.state.active) {
+      const moderationIds = this.getModerationIds();
+      if (moderationIds[moderationIds.length - 1] === this.state.active) {
+        this.setState({active: moderationIds[moderationIds.length - 2]});
+      } else {
+        this.setState({active: moderationIds[Math.min(moderationIds.indexOf(this.state.active) + 1, moderationIds.length - 1)]});
+      }
+    }
+
+    // Update the status right away if this is a comment
+    if (action.item_type === 'COMMENTS') {
+      this.props.updateCommentStatus(menuOption, id);
+    } else if (action.item_type === 'USERS') {
+
+      // If a user bio or name is rejected, bring up a dialog before suspending them.
+      if (menuOption === 'REJECTED') {
+        this.setState({suspendUserModal: action});
+      } else if (menuOption === 'ACCEPTED') {
+        this.props.userStatusUpdate('APPROVED', action.item_id);
+      }
+    }
+  }
+
+  onClickShowBanDialog = (userId, userName, commentId) => {
+    this.props.onClickShowBanDialog(userId, userName, commentId);
+  }
+
+  mapModItems = (itemId, index) => {
+
+    const {comments = {}, users, actions = {}, modActions, suspectWords, hideActive} = this.props;
+    const {active} = this.state;
+
+    // Because ids are unique, the id will either appear as an action or as a comment.
+
+    const item = comments[itemId] || actions[itemId];
+    let modItem;
+
+    if (item.body) {
+
+      // If the item is a comment...
+      const author = users[item.author_id];
+      modItem = <Comment
+        suspectWords={suspectWords}
+        comment={item}
+        author={author}
+        key={index}
+        index={index}
+        onClickAction={this.onClickAction}
+        onClickShowBanDialog={this.onClickShowBanDialog}
+        modActions={modActions}
+        menuOptionsMap={menuOptionsMap}
+        isActive={itemId === active}
+        hideActive={hideActive} />;
+    } else {
+
+      // If the item is an action...
+      const user = users[item.item_id];
+      modItem = user && <User
+        suspectWords={suspectWords}
+        action={item}
+        user={user}
+        key={index}
+        index={index}
+        onClickAction={this.onClickAction}
+        onClickShowBanDialog={this.onClickShowBanDialog}
+        modActions={modActions}
+        menuOptionsMap={menuOptionsMap}
+        isActive={itemId === active}
+        hideActive={hideActive} />;
+    }
+    return modItem;
+  }
+
+  getModerationIds = () => {
+    const {commentIds = [], actionIds = [], comments, actions} = this.props;
+    if (comments && actions) {
+      return [ ...commentIds, ...actionIds ].sort((a, b) => {
+        const itemA = comments[a] || actions[a];
+        const itemB = comments[b] || actions[b];
+        return itemB.updated_at - itemA.updated_at;
+      });
+    } else {
+      return comments ? commentIds : actionIds;
+    }
+  }
+
+  render () {
+    const {singleView, key, suspendUser} = this.props;
+
+    // Combine moderations and actions into a single stream and sort by most recently updated.
+    const moderationIds = this.getModerationIds();
+
+    return (
+      <ul
+        className={`${styles.list} ${singleView ? styles.singleView : ''}`} {...key}
+        id='moderationList'>
+        {moderationIds.map(this.mapModItems)}
+        <SuspendUserModal
+          action = {this.state.suspendUserModal}
+          onClose={() => this.setState({suspendUserModal:null})}
+          suspendUser={suspendUser} />
+      </ul>
+    );
+  }
+}

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

@@ -1,12 +1,37 @@
 .layout {
-    max-width: 800px;
-    margin: 0 auto;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.loginLayout {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.loginHeader, .loginCTA, .forgotPasswordCTA, .passwordRequestSuccess {
+  text-align: center;
+  font-size: 16px;
+}
+
+.forgotPasswordLink, .signInLink {
+  color: blue;
+  font-weight: normal;
+  text-decoration: none;
+}
+
+.forgotPasswordLink:hover, .signInLink:hover {
+  text-decoration: underline;
 }
 
 .layout h1 {
-    font-size: 40px;
+  font-size: 40px;
 }
 
-.layout img {
-    width: 100%;
+.loginHeader {
+  font-size: 30px;
+}
+
+.passwordRequestSuccess {
+  cursor: pointer;
+  padding: 8px 14px;
 }

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import {Layout} from 'react-mdl';
-import styles from './NotFound.css';
-
-export const PermissionRequired = () => (
-  <Layout fixedDrawer>
-    <div className={styles.layout} >
-      <h1>Permission Required</h1>
-      <p>We’re sorry, but you don’t have access to that page.</p>
-      <img src="https://coralproject.net/images/communicorn.jpg" alt="Communicorn"/>
-    </div>
-  </Layout>
-);

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

@@ -0,0 +1,31 @@
+
+.modalButtons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 50px;
+}
+
+.emailInput {
+  border-radius: 3px;
+  width: 100%;
+  padding: 10px;
+  font-size: 14px;
+}
+
+.writeContainer {
+    margin-top: 20px;
+}
+
+.emailContainer {
+  display: flex;
+}
+
+.emailMessage {
+  font-weight: 800;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 800;
+  margin-bottom: 20px;
+}

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

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

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

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

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

@@ -1,18 +1,55 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Navigation, Drawer} from 'react-mdl';
-import {Link} from 'react-router';
-import styles from './Header.css';
+import {IndexLink, Link} from 'react-router';
+import styles from './Drawer.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 
-export default () => (
-  <Drawer>
-    <Navigation>
-      <Link className={styles.navLink} to="/admin">{lang.t('configure.moderate')}</Link>
-      <Link className={styles.navLink} to="/admin/community">{lang.t('configure.community')}</Link>
-      <Link className={styles.navLink} to="/admin/configure">{lang.t('configure.configure')}</Link>
-    </Navigation>
+const CoralDrawer = ({handleLogout, restricted = false}) => (
+  <Drawer className={styles.header}>
+    { !restricted ?
+      <div>
+        <Navigation className={styles.nav}>
+          <IndexLink
+            className={styles.navLink}
+            to="/admin/dashboard"
+            activeClassName={styles.active}>
+            {lang.t('configure.dashboard')}
+          </IndexLink>
+          <Link
+            className={styles.navLink}
+            to="/admin/moderate"
+            activeClassName={styles.active}>
+            {lang.t('configure.moderate')}
+          </Link>
+          <Link className={styles.navLink}
+                to="/admin/streams"
+                activeClassName={styles.active}>
+            {lang.t('configure.streams')}
+          </Link>
+          <Link className={styles.navLink}
+                to="/admin/community"
+                activeClassName={styles.active}>
+            {lang.t('configure.community')}
+          </Link>
+          <Link
+            className={styles.navLink}
+            to="/admin/configure"
+            activeClassName={styles.active}>
+            {lang.t('configure.configure')}
+          </Link>
+          <a onClick={handleLogout}>Sign Out</a>
+          <span>{`v${process.env.VERSION}`}</span>
+        </Navigation>
+      </div> : null }
   </Drawer>
 );
 
+CoralDrawer.propTypes = {
+  handleLogout: PropTypes.func.isRequired,
+  restricted: PropTypes.bool // hide app elements from a logged out user
+};
+
 const lang = new I18n(translations);
+
+export default CoralDrawer;

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

@@ -1,7 +1,25 @@
+@custom-media --table-viewport (max-width: 1024px);
+
+@media (--table-viewport) {
+  .logo {
+    margin-left: 58px;
+    h1 {
+      background: #696969;
+    }
+    span {
+      color: #fcfcfc;
+    }
+  }
+  .nav {
+    display: none;
+  }
+}
+
 .header {
   background-color: transparent;
   box-shadow: none;
   min-height: 58px;
+  display: block;
 }
 
 .header > div {
@@ -16,6 +34,7 @@
 
 .rightPanel {
   position: absolute;
+  top: 0;
   right: 0;
   width: 170px;
   height: 100%;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
 import {Link, IndexLink} from 'react-router';
 import styles from './Header.css';
@@ -6,35 +6,69 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import {Logo} from './Logo';
 
-export default ({handleLogout}) => (
+const CoralHeader = ({handleLogout, restricted = false}) => (
   <Header className={styles.header}>
-    <Logo />
-    <Navigation className={styles.nav}>
-      <IndexLink className={styles.navLink} to="/admin"
-                 activeClassName={styles.active}>{lang.t('configure.moderate')}</IndexLink>
-      <Link className={styles.navLink} to="/admin/community"
-            activeClassName={styles.active}>{lang.t('configure.community')}</Link>
-      <Link className={styles.navLink} to="/admin/configure"
-            activeClassName={styles.active}>{lang.t('configure.configure')}</Link>
-          <Link className={styles.navLink} to="/admin/streams"
-            activeClassName={styles.active}>{lang.t('configure.streams')}</Link>
-    </Navigation>
-    <div className={styles.rightPanel}>
-      <ul>
-        <li className={styles.settings}>
-          <div>
-            <IconButton name="settings" id="menu-settings"/>
-            <Menu target="menu-settings" align="right">
-              <MenuItem onClick={handleLogout}>Sign Out</MenuItem>
-            </Menu>
-          </div>
-        </li>
-        <li>
-          {`v${process.env.VERSION}`}
-        </li>
-      </ul>
-    </div>
+    <Logo className={styles.logo} />
+    {
+      !restricted ?
+      <div>
+        <Navigation className={styles.nav}>
+          <IndexLink
+            className={styles.navLink}
+            to="/admin/dashboard"
+            activeClassName={styles.active}>
+            {lang.t('configure.dashboard')}
+          </IndexLink>
+          <Link
+            className={styles.navLink}
+            to="/admin/moderate"
+            activeClassName={styles.active}>
+            {lang.t('configure.moderate')}
+          </Link>
+          <Link className={styles.navLink}
+            to="/admin/streams"
+            activeClassName={styles.active}>
+            {lang.t('configure.streams')}
+          </Link>
+          <Link className={styles.navLink}
+            to="/admin/community"
+            activeClassName={styles.active}>
+            {lang.t('configure.community')}
+          </Link>
+          <Link
+            className={styles.navLink}
+            to="/admin/configure"
+            activeClassName={styles.active}>
+            {lang.t('configure.configure')}
+          </Link>
+        </Navigation>
+        <div className={styles.rightPanel}>
+          <ul>
+            <li className={styles.settings}>
+              <div>
+                <IconButton name="settings" id="menu-settings"/>
+                <Menu target="menu-settings" align="right">
+                  <MenuItem onClick={handleLogout}>Sign Out</MenuItem>
+                </Menu>
+              </div>
+            </li>
+            <li>
+              {`v${process.env.VERSION}`}
+            </li>
+          </ul>
+        </div>
+      </div>
+    :
+    null
+  }
   </Header>
 );
 
+CoralHeader.propTypes = {
+  handleLogout: PropTypes.func.isRequired,
+  restricted: PropTypes.bool // hide elemnts from a user that's logged out
+};
+
 const lang = new I18n(translations);
+
+export default CoralHeader;

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

@@ -1,15 +1,22 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Layout as LayoutMDL} from 'react-mdl';
 import Header from './Header';
 import Drawer from './Drawer';
 import styles from './Layout.css';
 
-export const Layout = ({children, ...props}) => (
+const Layout = ({children, handleLogout = () => {}, restricted = false, ...props}) => (
   <LayoutMDL fixedDrawer>
-    <Header {...props}/>
-    <Drawer />
-    <div className={styles.layout} >
+    <Header handleLogout={handleLogout} restricted={restricted} {...props} />
+    <Drawer handleLogout={handleLogout} restricted={restricted} {...props} />
+    <div className={styles.layout}>
       {children}
     </div>
   </LayoutMDL>
 );
+
+Layout.propTypes = {
+  handleLogout: PropTypes.func,
+  restricted: PropTypes.bool // hide elements from a user that's logged out
+};
+
+export default Layout;

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

@@ -19,6 +19,7 @@
   background: #E5E5E5;
   height: 100%;
   width: 128px;
+  z-index: 10;
 }
 
 .base {

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

@@ -2,8 +2,8 @@ import React from 'react';
 import styles from './Logo.css';
 import {CoralLogo} from 'coral-ui';
 
-export const Logo = () => (
-  <div className={styles.logo}>
+export const Logo = ({className = ''}) => (
+  <div className={`${styles.logo} ${className}`}>
     <h1>
       <CoralLogo className={styles.base} />
       <span>Talk</span>

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

@@ -1,6 +1,9 @@
 export const FETCH_ASSETS_REQUEST = 'FETCH_ASSETS_REQUEST';
 export const FETCH_ASSETS_SUCCESS = 'FETCH_ASSETS_SUCCESS';
 export const FETCH_ASSETS_FAILURE = 'FETCH_ASSETS_FAILURE';
+
 export const UPDATE_ASSET_STATE_REQUEST = 'UPDATE_ASSET_STATE_REQUEST';
 export const UPDATE_ASSET_STATE_SUCCESS = 'UPDATE_ASSET_STATE_SUCCESS';
 export const UPDATE_ASSET_STATE_FAILURE = 'UPDATE_ASSET_STATE_FAILURE';
+
+export const UPDATE_ASSETS = 'UPDATE_ASSETS';

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

@@ -7,3 +7,11 @@ export const CHECK_CSRF_TOKEN = 'CHECK_CSRF_TOKEN';
 export const LOGOUT_REQUEST = 'LOGOUT_REQUEST';
 export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
 export const LOGOUT_FAILURE = 'LOGOUT_FAILURE';
+
+export const LOGIN_REQUEST = 'LOGIN_REQUEST';
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
+export const LOGIN_FAILURE = 'LOGIN_FAILURE';
+
+export const FETCH_FORGOT_PASSWORD_REQUEST = 'FETCH_FORGOT_PASSWORD_REQUEST';
+export const FETCH_FORGOT_PASSWORD_SUCCESS = 'FETCH_FORGOT_PASSWORD_SUCCESS';
+export const FETCH_FORGOT_PASSWORD_FAILURE = 'FETCH_FORGOT_PASSWORD_FAILURE';

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

@@ -0,0 +1,17 @@
+export const NEXT_STEP = 'NEXT_STEP';
+export const GO_TO_STEP = 'GO_TO_STEP';
+export const PREVIOUS_STEP = 'PREVIOUS_STEP';
+export const ADD_ERROR = 'ADD_ERROR';
+export const HAS_ERROR = 'HAS_ERROR';
+export const SHOW_ERRORS = 'SHOW_ERRORS';
+export const CLEAR_ERRORS = 'CLEAR_ERRORS';
+export const INSTALL_REQUEST = 'INSTALL_REQUEST';
+export const INSTALL_SUCCESS = 'INSTALL_SUCCESS';
+export const INSTALL_FAILURE = 'INSTALL_FAILURE';
+export const UPDATE_FORMDATA_USER = 'UPDATE_FORMDATA_USER';
+export const UPDATE_FORMDATA_SETTINGS = 'UPDATE_FORMDATA_SETTINGS';
+export const UPDATE_PERMITTED_DOMAINS_SETTINGS = 'UPDATE_PERMITTED_DOMAINS_SETTINGS';
+
+export const CHECK_INSTALL_REQUEST = 'CHECK_INSTALL_REQUEST';
+export const CHECK_INSTALL_SUCCESS = 'CHECK_INSTALL_SUCCESS';
+export const CHECK_INSTALL_FAILURE = 'CHECK_INSTALL_FAILURE';

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

@@ -0,0 +1,4 @@
+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';

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

@@ -1,3 +0,0 @@
-export const UPDATE_STATUS_REQUEST = 'UPDATE_STATUS_REQUEST';
-export const UPDATE_STATUS_SUCCESS = 'UPDATE_STATUS_SUCCESS';
-export const UPDATE_STATUS_FAILURE = 'UPDATE_STATUS_FAILURE';

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

@@ -0,0 +1,6 @@
+export const UPDATE_STATUS_REQUEST = 'UPDATE_STATUS_REQUEST';
+export const UPDATE_STATUS_SUCCESS = 'UPDATE_STATUS_SUCCESS';
+export const UPDATE_STATUS_FAILURE = 'UPDATE_STATUS_FAILURE';
+export const USER_EMAIL_FAILURE = 'USER_EMAIL_FAILURE';
+export const USERNAME_ENABLE_FAILURE = 'USERNAME_ENABLE_FAILURE';
+export const USERS_MODERATION_QUEUE_FETCH_SUCCESS = 'USERS_MODERATION_QUEUE_FETCH_SUCCESS';

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

@@ -1,13 +0,0 @@
-
-@custom-media --big-viewport (min-width: 780px);
-
-.container {
-  max-width: 860px;
-  margin: 0 auto;
-}
-
-@media (--big-viewport) {
-  .tab {
-    flex: none;
-  }
-}

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

@@ -1,66 +0,0 @@
-import React from 'react';
-import styles from './CommentStream.css';
-import {Snackbar} from 'react-mdl';
-import {connect} from 'react-redux';
-import {createComment, flagComment} from 'actions/comments';
-import CommentList from 'components/CommentList';
-import CommentBox from 'components/CommentBox';
-
-/**
- * Renders a comment stream using a CommentList component
- * and adds a box for adding a new comment
- */
-
-class CommentStream extends React.Component {
-  constructor (props) {
-    super(props);
-    this.state = {snackbar: false, snackbarMsg: ''};
-    this.onSubmit = this.onSubmit.bind(this);
-    this.onClickAction = this.onClickAction.bind(this);
-  }
-
-  // Fetch the comments before mounting
-  componentWillMount () {
-    this.props.dispatch({type: 'COMMENT_STREAM_FETCH'});
-  }
-
-  // Submit the new comment
-  onSubmit (comment) {
-    this.props.dispatch(createComment(comment.name, comment.body));
-  }
-
-  // The only action for now is flagging
-  onClickAction (action, id) {
-    if (action === 'flag') {
-      this.props.dispatch(flagComment(id));
-      clearTimeout(this._snackTimeout);
-      this.setState({snackbar: true, snackbarMsg: 'Thank you for reporting this comment. Our moderation team has been notified and will review it shortly.'});
-      this._snackTimeout = setTimeout(() => this.setState({snackbar: false}), 30000);
-    }
-  }
-
-  // Render the comment box along with the CommentList
-  render ({comments, users}, {snackbar, snackbarMsg}) {
-    return (
-      <div className={styles.container}>
-        <CommentBox onSubmit={this.onSubmit}/>
-        <CommentList isActive hideActive
-          singleView={false}
-          commentIds={comments.ids}
-          comments={comments.byId}
-          users={users.byId}
-          onClickAction={this.onClickAction}
-          actions={['flag']}
-          loading={comments.loading} />
-        <Snackbar active={snackbar}>{snackbarMsg}</Snackbar>
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = state => ({
-  comments: state.comments.toJS(),
-  users: state.users.toJS()
-});
-
-export default connect(mapStateToProps)(CommentStream);

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

@@ -1,19 +1,19 @@
 import React from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import translations from 'coral-admin/src/translations.json';
 
 import styles from './Community.css';
 import Table from './Table';
 import Loading from './Loading';
-import NoResults from './NoResults';
 import {Pager} from 'coral-ui';
+import EmptyCard from '../../components/EmptyCard';
 
 const lang = new I18n(translations);
 
 const tableHeaders = [
   {
     title: lang.t('community.username_and_email'),
-    field: 'displayName'
+    field: 'username'
   },
   {
     title: lang.t('community.account_creation_date'),
@@ -54,13 +54,14 @@ const Community = ({isFetching, commenters, ...props}) => {
       </div>
       <div className={styles.mainContent}>
         { isFetching && <Loading /> }
-        { !hasResults && <NoResults /> }
-        { hasResults &&
-          <Table
-            headers={tableHeaders}
-            data={commenters}
-            onHeaderClickHandler={props.onHeaderClickHandler}
-          />
+        {
+          hasResults
+          ? <Table
+              headers={tableHeaders}
+              data={commenters}
+              onHeaderClickHandler={props.onHeaderClickHandler}
+            />
+          : <EmptyCard>{lang.t('community.no-results')}</EmptyCard>
         }
         <Pager
           totalPages={props.totalPages}

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

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const NoResults = () => (
-  <div>
-    No users found with that user name or email address
-  </div>
-);
-
-export default NoResults;

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

@@ -44,7 +44,7 @@ class Table extends Component {
           {commenters.map((row, i)=> (
             <tr key={i}>
               <td className="mdl-data-table__cell--non-numeric">
-                {row.displayName}
+                {row.username}
                 <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
               </td>
               <td className="mdl-data-table__cell--non-numeric">
@@ -55,8 +55,8 @@ class Table extends Component {
                   className={styles.selectField}
                   label={lang.t('community.status')}
                   onChange={status => this.onCommenterStatusChange(row.id, status)}>
-                  <Option value={'active'}>{lang.t('community.active')}</Option>
-                  <Option value={'banned'}>{lang.t('community.banned')}</Option>
+                  <Option value={'ACTIVE'}>{lang.t('community.active')}</Option>
+                  <Option value={'BANNED'}>{lang.t('community.banned')}</Option>
                 </SelectField>
               </td>
               <td className="mdl-data-table__cell--non-numeric">
@@ -65,8 +65,8 @@ class Table extends Component {
                   label={lang.t('community.role')}
                   onChange={role => this.onRoleChange(row.id, role)}>
                   <Option value={''}>.</Option>
-                  <Option value={'moderator'}>{lang.t('community.moderator')}</Option>
-                  <Option value={'admin'}>{lang.t('community.admin')}</Option>
+                  <Option value={'MODERATOR'}>{lang.t('community.moderator')}</Option>
+                  <Option value={'ADMIN'}>{lang.t('community.admin')}</Option>
                 </SelectField>
               </td>
             </tr>

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

@@ -1,192 +0,0 @@
-import React from 'react';
-import {SelectField, Option} from 'react-mdl-selectfield';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
-import styles from './Configure.css';
-import {Textfield, Checkbox} from 'react-mdl';
-import {Card, Icon, Spinner} from 'coral-ui';
-
-const TIMESTAMPS = {
-  weeks: 60 * 60 * 24 * 7,
-  days: 60 * 60 * 24,
-  hours: 60 * 60
-};
-
-const updateCharCountEnable = (updateSettings, charCountChecked) => () => {
-  const charCountEnable = !charCountChecked;
-  updateSettings({charCountEnable});
-};
-
-const updateCharCount = (updateSettings, settingsError) => (event) => {
-  const charCount = event.target.value;
-  if (charCount.match(/[^0-9]/) || charCount.length === 0) {
-    settingsError('charCount', true);
-  } else {
-    settingsError('charCount', false);
-  }
-  updateSettings({charCount: charCount});
-};
-
-const updateModeration = (updateSettings, mod) => () => {
-  const moderation = mod === 'pre' ? 'post' : 'pre';
-  updateSettings({moderation});
-};
-
-const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
-  const infoBoxEnable = !infoBox;
-  updateSettings({infoBoxEnable});
-};
-
-const updateInfoBoxContent = (updateSettings) => (event) => {
-  const infoBoxContent =  event.target.value;
-  updateSettings({infoBoxContent});
-};
-
-const updateClosedMessage = (updateSettings) => (event) => {
-  const closedMessage = event.target.value;
-  updateSettings({closedMessage});
-};
-
-// If we are changing the measure we need to recalculate using the old amount
-// Same thing if we are just changing the amount
-const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
-  if (isMeasure) {
-    const amount = getTimeoutAmount(ts);
-    const closedTimeout = amount * TIMESTAMPS[event];
-    updateSettings({closedTimeout});
-  } else {
-    const val = event.target.value;
-    const measure = getTimeoutMeasure(ts);
-    const closedTimeout = val * TIMESTAMPS[measure];
-    updateSettings({closedTimeout});
-  }
-};
-
-const CommentSettings = ({fetchingSettings, title, updateSettings, settingsError, settings, errors}) => {
-  if (fetchingSettings) {
-    return <Card shadow="4"><Spinner/>Loading settings...</Card>;
-  }
-
-  return (
-    <div className={styles.commentSettingsSection}>
-      <h3>{title}</h3>
-        <Card className={`${styles.configSetting} ${settings.moderation === 'pre' ? styles.enabledSetting : styles.disabledSetting}`}>
-          <div className={styles.action}>
-            <Checkbox
-              onChange={updateModeration(updateSettings, settings.moderation)}
-              checked={settings.moderation === 'pre'} />
-          </div>
-          <div className={styles.content}>
-          <div className={styles.settingsHeader}>{lang.t('configure.enable-pre-moderation')}</div>
-          <p className={settings.moderation === 'pre' ? '' : styles.disabledSettingText}>
-            {lang.t('configure.enable-pre-moderation-text')}
-          </p>
-        </div>
-        </Card>
-        <Card className={`${styles.configSetting} ${settings.charCountEnable ? styles.enabledSetting : styles.disabledSetting}`}>
-          <div className={styles.action}>
-            <Checkbox
-              onChange={updateCharCountEnable(updateSettings, settings.charCountEnable)}
-              checked={settings.charCountEnable} />
-          </div>
-          <div className={styles.content}>
-            <div className={styles.settingsHeader}>{lang.t('configure.comment-count-header')}</div>
-            <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
-              <span>{lang.t('configure.comment-count-text-pre')}</span>
-              <input type='text'
-                className={`${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
-                htmlFor='charCount'
-                onChange={updateCharCount(updateSettings, settingsError)}
-                value={settings.charCount}/>
-              <span>{lang.t('configure.comment-count-text-post')}</span>
-                {
-                  errors.charCount &&
-                  <span className={styles.settingsError}>
-                    <br/>
-                    <Icon name="error_outline"/>
-                    {lang.t('configure.comment-count-error')}
-                  </span>
-                }
-            </p>
-          </div>
-        </Card>
-        <Card className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? styles.enabledSetting : styles.disabledSetting}`}>
-          <div className={styles.action}>
-            <Checkbox
-              onChange={updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
-              checked={settings.infoBoxEnable} />
-          </div>
-          <div className={styles.content}>
-            {lang.t('configure.include-comment-stream')}
-            <p>
-              {lang.t('configure.include-comment-stream-desc')}
-            </p>
-            <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-              <div className={styles.content}>
-                <Textfield
-                  onChange={updateInfoBoxContent(updateSettings)}
-                  value={settings.infoBoxContent}
-                  label={lang.t('configure.include-text')}
-                  rows={3}/>
-              </div>
-            </div>
-          </div>
-        </Card>
-        <Card className={styles.configSettingInfoBox}>
-          <div className={styles.content}>
-            {lang.t('configure.closed-comments-desc')}
-            <div>
-            <Textfield
-              onChange={updateClosedMessage(updateSettings)}
-              value={settings.closedMessage}
-              label={lang.t('configure.closed-comments-label')}
-              rows={3}/>
-            </div>
-          </div>
-        </Card>
-        <Card className={`${styles.configSettingInfoBox}`}>
-          <div className={styles.content}>
-            {lang.t('configure.close-after')}
-            <br />
-            <Textfield
-              type='number'
-              pattern='[0-9]+'
-              style={{width: 50}}
-              onChange={updateClosedTimeout(updateSettings, settings.closedTimeout)}
-              value={getTimeoutAmount(settings.closedTimeout)}
-              label={lang.t('configure.closed-comments-label')} />
-            <div className={styles.configTimeoutSelect}>
-              <SelectField
-                label="comments closed time window"
-                value={getTimeoutMeasure(settings.closedTimeout)}
-                onChange={updateClosedTimeout(updateSettings, settings.closedTimeout, true)}>
-                <Option value={'hours'}>{lang.t('configure.hours')}</Option>
-                <Option value={'days'}>{lang.t('configure.days')}</Option>
-                <Option value={'weeks'}>{lang.t('configure.weeks')}</Option>
-              </SelectField>
-            </div>
-          </div>
-        </Card>
-    </div>
-  );
-};
-
-export default CommentSettings;
-
-// To see if we are talking about weeks, days or hours
-// We talk the remainder of the division and see if it's 0
-const getTimeoutMeasure = ts => {
-  if (ts % TIMESTAMPS['weeks'] === 0) {
-    return 'weeks';
-  } else if (ts % TIMESTAMPS['days'] === 0) {
-    return 'days';
-  } else if (ts % TIMESTAMPS['hours'] === 0) {
-    return 'hours';
-  }
-};
-
-// Dividing the amount by it's measure (hours, days, weeks) we
-// obtain the amount of time
-const getTimeoutAmount = ts => ts / TIMESTAMPS[getTimeoutMeasure(ts)];
-
-const lang = new I18n(translations);

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

@@ -3,7 +3,7 @@
 
   h3 {
     color: black;
-    font-size: 1.76em;
+    font-size: 1.26em;
     font-weight: 500;
   }
 }
@@ -24,6 +24,10 @@
   margin-bottom: 20px;
   align-items: flex-start;
   min-height: 100px;
+
+  h3 {
+    margin: 0;
+  }
 }
 
 .settingsError {
@@ -118,18 +122,19 @@
 }
 
 #bannedWordlist, #suspectWordlist {
-  width: 100%;
-  padding: 10px;
-
+  display: block;
   input {
     width: 100%;
   }
 }
 
-.wordlistHeader {
-  font-weight: bold;
-  font-size:18px;
-  margin-bottom:3px;
+.customCSSInput {
+  width: 100%;
+  font-size: 14px;
+  padding: 14px;
+  letter-spacing: 0.03em;
+  color: #555;
+  box-sizing: border-box;
 }
 
 .enabledSetting {
@@ -150,7 +155,7 @@
   margin-top: 38px;
 }
 
-.commentSettingsSection {
+.settingsSection {
   padding-bottom: 200px;
   .action {
     display: inline-block;

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

@@ -5,23 +5,23 @@ import {
   updateSettings,
   saveSettingsToServer,
   updateWordlist,
+  updateDomainlist
 } from '../../actions/settings';
 
-import {Button, List, Item} from 'coral-ui';
+import {Button, List, Item, Card, Spinner} from 'coral-ui';
 import styles from './Configure.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
-import EmbedLink from './EmbedLink';
-import CommentSettings from './CommentSettings';
-import Wordlist from './Wordlist';
-import has from 'lodash/has';
+import translations from 'coral-admin/src/translations.json';
+import StreamSettings from './StreamSettings';
+import ModerationSettings from './ModerationSettings';
+import TechSettings from './TechSettings';
 
 class Configure extends Component {
   constructor (props) {
     super(props);
 
     this.state = {
-      activeSection: 'comments',
+      activeSection: 'stream',
       changed: false,
       errors: {}
     };
@@ -47,6 +47,11 @@ class Configure extends Component {
     this.props.dispatch(updateWordlist(listName, list));
   }
 
+  onChangeDomainlist = (listName, list) => {
+    this.setState({changed: true});
+    this.props.dispatch(updateDomainlist(listName, list));
+  }
+
   onSettingUpdate = (setting) => {
     this.setState({changed: true});
     this.props.dispatch(updateSettings(setting));
@@ -63,33 +68,48 @@ class Configure extends Component {
 
   getSection (section) {
     const pageTitle = this.getPageTitle(section);
+    let sectionComponent;
     switch(section){
-    case 'comments':
-      return <CommentSettings
-        title={pageTitle}
-        fetchingSettings={this.props.fetchingSettings}
+    case 'stream':
+      sectionComponent = <StreamSettings
         settings={this.props.settings}
         updateSettings={this.onSettingUpdate}
         errors={this.state.errors}
         settingsError={this.onSettingError}/>;
-    case 'embed':
-      return <EmbedLink title={pageTitle} />;
-    case 'wordlist':
-      return has(this, 'props.settings.wordlist')
-        ? <Wordlist
-          bannedWords={this.props.settings.wordlist.banned}
-          suspectWords={this.props.settings.wordlist.suspect}
-          onChangeWordlist={this.onChangeWordlist} />
-        : <p>loading wordlists</p>;
+      break;
+    case 'moderation':
+      sectionComponent = <ModerationSettings
+        onChangeWordlist={this.onChangeWordlist}
+        settings={this.props.settings}
+        updateSettings={this.onSettingUpdate} />;
+      break;
+    case 'tech':
+      sectionComponent = <TechSettings
+        onChangeDomainlist={this.onChangeDomainlist}
+        settings={this.props.settings}
+        updateSettings={this.onSettingUpdate} />;
     }
+
+    if (this.props.settings.fetchingSettings) {
+      return <Card shadow="4"><Spinner/>Loading settings...</Card>;
+    }
+
+    return (
+      <div className={styles.settingsSection}>
+        <h3>{pageTitle}</h3>
+        {sectionComponent}
+      </div>
+    );
   }
 
   getPageTitle (section) {
     switch(section) {
-    case 'comments':
-      return lang.t('configure.comment-settings');
-    case 'embed':
-      return lang.t('configure.embed-comment-stream');
+    case 'stream':
+      return lang.t('configure.stream-settings');
+    case 'moderation':
+      return lang.t('configure.moderation-settings');
+    case 'tech':
+      return lang.t('configure.tech-settings');
     default:
       return '';
     }
@@ -106,14 +126,14 @@ class Configure extends Component {
         <div className={styles.container}>
           <div className={styles.leftColumn}>
             <List onChange={this.changeSection} activeItem={activeSection}>
-              <Item itemId='comments' icon="settings">
-                {lang.t('configure.comment-settings')}
+              <Item itemId='stream' icon='speaker_notes'>
+                {lang.t('configure.stream-settings')}
               </Item>
-              <Item itemId='embed' icon='code'>
-                {lang.t('configure.embed-comment-stream')}
+              <Item itemId='moderation' icon='thumbs_up_down'>
+                {lang.t('configure.moderation-settings')}
               </Item>
-              <Item itemId='wordlist' icon='settings'>
-                {lang.t('configure.wordlist')}
+              <Item itemId='tech' icon='code'>
+                {lang.t('configure.tech-settings')}
               </Item>
             </List>
             <div className={styles.saveBox}>
@@ -151,7 +171,9 @@ class Configure extends Component {
   }
 }
 
-const mapStateToProps = state => state.settings.toJS();
+const mapStateToProps = state => ({
+  settings: state.settings.toJS()
+});
 export default connect(mapStateToProps)(Configure);
 
 const lang = new I18n(translations);

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import {Card} from 'coral-ui';
+import styles from './Configure.css';
+import TagsInput from 'react-tagsinput';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../../translations.json';
+const lang = new I18n(translations);
+
+const Domainlist = ({domains, onChangeDomainlist}) => {
+  return (
+    <Card id={styles.domainlist} className={styles.configSetting}>
+      <h3>{lang.t('configure.domain-list-title')}</h3>
+      <p className={styles.domainlistDesc}>{lang.t('configure.domain-list-text')}</p>
+      <TagsInput
+        value={domains}
+        inputProps={{placeholder: 'URL'}}
+        addOnPaste={true}
+        pasteSplit={data => data.split(',').map(d => d.trim())}
+        onChange={tags => onChangeDomainlist('whitelist', tags)}
+      />
+    </Card>
+  );
+};
+
+export default Domainlist;

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

@@ -25,22 +25,34 @@ class EmbedLink extends Component {
   }
 
   render () {
-    const embedText = `<div id='coralStreamEmbed'></div><script type='text/javascript' src='${window.location.protocol}//pym.nprapps.org/pym.v1.min.js'></script><script>var pymParent = new pym.Parent('coralStreamEmbed', '${window.location.protocol}//${window.location.host}/embed/stream', {title: 'Comments'});</script>`;
-
+    const location = window.location;
+    const talkBaseUrl = [
+      location.protocol,
+      '//',
+      location.hostname,
+      location.port ? (`:${  window.location.port}`) : ''
+    ].join('');
+    const coralJsUrl = [talkBaseUrl, '/embed.js'].join('');
+    const nonce = String(Math.random()).slice(2);
+    const streamElementId = `coral_talk_${nonce}`;
+    const embedText = `
+<div id="${streamElementId}"></div>
+<script src="${coralJsUrl}" async onload="
+  Coral.Talk.render(document.getElementById('${streamElementId}'), {
+    talk: '${talkBaseUrl}'
+  });
+"></script>
+    `.trim();
     return (
-      <div>
-        <h3>{this.props.title}</h3>
-        <div>
-          <Card shadow="2">
-            <p>{lang.t('configure.copy-and-paste')}</p>
-            <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
-            <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
-              {lang.t('embedlink.copy')}
-            </Button>
-            <div className={styles.copiedText}>{this.state.copied && 'Copied!'}</div>
-          </Card>
-        </div>
-      </div>
+      <Card shadow="2" className={styles.configSetting}>
+        <h3>Embed Comment Stream</h3>
+        <p>{lang.t('configure.copy-and-paste')}</p>
+        <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
+        <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
+          {lang.t('embedlink.copy')}
+        </Button>
+        <div className={styles.copiedText}>{this.state.copied && 'Copied!'}</div>
+      </Card>
     );
   }
 }

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

@@ -0,0 +1,73 @@
+import React, {PropTypes} from 'react';
+import styles from './Configure.css';
+import {Card} from 'coral-ui';
+import {Checkbox} from 'react-mdl';
+import Wordlist from './Wordlist';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../../translations.json';
+const lang = new I18n(translations);
+
+const updateModeration = (updateSettings, mod) => () => {
+  const moderation = mod === 'PRE' ? 'POST' : 'PRE';
+  updateSettings({moderation});
+};
+
+const updateEmailConfirmation = (updateSettings, verify) => () => {
+  updateSettings({requireEmailConfirmation: !verify});
+};
+
+const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
+
+  // just putting this here for shorthand below
+  const on = styles.enabledSetting;
+  const off = styles.disabledSetting;
+
+  return (
+    <div>
+      <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
+        <div className={styles.action}>
+          <Checkbox
+            onChange={updateEmailConfirmation(updateSettings, settings.requireEmailConfirmation)}
+            checked={settings.requireEmailConfirmation} />
+        </div>
+        <div className={styles.content}>
+          <div className={styles.settingsHeader}>{lang.t('configure.require-email-verification')}</div>
+          <p className={settings.requireEmailConfirmation ? '' : styles.disabledSettingText}>
+            {lang.t('configure.require-email-verification-text')}
+          </p>
+        </div>
+      </Card>
+      <Card className={`${styles.configSetting} ${settings.moderation === 'PRE' ? on : off}`}>
+        <div className={styles.action}>
+          <Checkbox
+            onChange={updateModeration(updateSettings, settings.moderation)}
+            checked={settings.moderation === 'PRE'} />
+        </div>
+        <div className={styles.content}>
+          <div className={styles.settingsHeader}>{lang.t('configure.enable-pre-moderation')}</div>
+          <p className={settings.moderation === 'PRE' ? '' : styles.disabledSettingText}>
+            {lang.t('configure.enable-pre-moderation-text')}
+          </p>
+        </div>
+      </Card>
+      <Wordlist
+        bannedWords={settings.wordlist.banned}
+        suspectWords={settings.wordlist.suspect}
+        onChangeWordlist={onChangeWordlist} />
+    </div>
+  );
+};
+
+ModerationSettings.propTypes = {
+  onChangeWordlist: PropTypes.func.isRequired,
+  settings: PropTypes.shape({
+    moderation: PropTypes.string.isRequired,
+    wordlist: PropTypes.shape({
+      banned: PropTypes.array.isRequired,
+      suspect: PropTypes.array.isRequired
+    })
+  }).isRequired,
+  updateSettings: PropTypes.func.isRequired
+};
+
+export default ModerationSettings;

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

@@ -0,0 +1,174 @@
+import React from 'react';
+import {SelectField, Option} from 'react-mdl-selectfield';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../../translations.json';
+import styles from './Configure.css';
+import {Textfield, Checkbox} from 'react-mdl';
+import {Card, Icon} from 'coral-ui';
+
+const TIMESTAMPS = {
+  weeks: 60 * 60 * 24 * 7,
+  days: 60 * 60 * 24,
+  hours: 60 * 60
+};
+
+const updateCharCountEnable = (updateSettings, charCountChecked) => () => {
+  const charCountEnable = !charCountChecked;
+  updateSettings({charCountEnable});
+};
+
+const updateCharCount = (updateSettings, settingsError) => (event) => {
+  const charCount = event.target.value;
+  if (charCount.match(/[^0-9]/) || charCount.length === 0) {
+    settingsError('charCount', true);
+  } else {
+    settingsError('charCount', false);
+  }
+  updateSettings({charCount: charCount});
+};
+
+const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
+  const infoBoxEnable = !infoBox;
+  updateSettings({infoBoxEnable});
+};
+
+const updateInfoBoxContent = (updateSettings) => (event) => {
+  const infoBoxContent =  event.target.value;
+  updateSettings({infoBoxContent});
+};
+
+const updateClosedMessage = (updateSettings) => (event) => {
+  const closedMessage = event.target.value;
+  updateSettings({closedMessage});
+};
+
+// If we are changing the measure we need to recalculate using the old amount
+// Same thing if we are just changing the amount
+const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
+  if (isMeasure) {
+    const amount = getTimeoutAmount(ts);
+    const closedTimeout = amount * TIMESTAMPS[event];
+    updateSettings({closedTimeout});
+  } else {
+    const val = event.target.value;
+    const measure = getTimeoutMeasure(ts);
+    const closedTimeout = val * TIMESTAMPS[measure];
+    updateSettings({closedTimeout});
+  }
+};
+
+const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
+
+  // just putting this here for shorthand below
+  const on = styles.enabledSetting;
+  const off = styles.disabledSetting;
+
+  return (
+    <div>
+      <Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
+        <div className={styles.action}>
+          <Checkbox
+            onChange={updateCharCountEnable(updateSettings, settings.charCountEnable)}
+            checked={settings.charCountEnable} />
+        </div>
+        <div className={styles.content}>
+          <div className={styles.settingsHeader}>{lang.t('configure.comment-count-header')}</div>
+          <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
+            <span>{lang.t('configure.comment-count-text-pre')}</span>
+            <input type='text'
+              className={`${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
+              htmlFor='charCount'
+              onChange={updateCharCount(updateSettings, settingsError)}
+              value={settings.charCount}/>
+            <span>{lang.t('configure.comment-count-text-post')}</span>
+              {
+                errors.charCount &&
+                <span className={styles.settingsError}>
+                  <br/>
+                  <Icon name="error_outline"/>
+                  {lang.t('configure.comment-count-error')}
+                </span>
+              }
+          </p>
+        </div>
+      </Card>
+      <Card className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
+        <div className={styles.action}>
+          <Checkbox
+            onChange={updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
+            checked={settings.infoBoxEnable} />
+        </div>
+        <div className={styles.content}>
+          {lang.t('configure.include-comment-stream')}
+          <p>
+            {lang.t('configure.include-comment-stream-desc')}
+          </p>
+          <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
+            <div className={styles.content}>
+              <Textfield
+                onChange={updateInfoBoxContent(updateSettings)}
+                value={settings.infoBoxContent}
+                label={lang.t('configure.include-text')}
+                rows={3}/>
+            </div>
+          </div>
+        </div>
+      </Card>
+      <Card className={styles.configSettingInfoBox}>
+        <div className={styles.content}>
+          {lang.t('configure.closed-comments-desc')}
+          <div>
+          <Textfield
+            onChange={updateClosedMessage(updateSettings)}
+            value={settings.closedMessage}
+            label={lang.t('configure.closed-comments-label')}
+            rows={3}/>
+          </div>
+        </div>
+      </Card>
+      <Card className={styles.configSettingInfoBox}>
+        <div className={styles.content}>
+          {lang.t('configure.close-after')}
+          <br />
+          <Textfield
+            type='number'
+            pattern='[0-9]+'
+            style={{width: 50}}
+            onChange={updateClosedTimeout(updateSettings, settings.closedTimeout)}
+            value={getTimeoutAmount(settings.closedTimeout)}
+            label={lang.t('configure.closed-comments-label')} />
+          <div className={styles.configTimeoutSelect}>
+            <SelectField
+              label="comments closed time window"
+              value={getTimeoutMeasure(settings.closedTimeout)}
+              onChange={updateClosedTimeout(updateSettings, settings.closedTimeout, true)}>
+              <Option value={'hours'}>{lang.t('configure.hours')}</Option>
+              <Option value={'days'}>{lang.t('configure.days')}</Option>
+              <Option value={'weeks'}>{lang.t('configure.weeks')}</Option>
+            </SelectField>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default StreamSettings;
+
+// To see if we are talking about weeks, days or hours
+// We talk the remainder of the division and see if it's 0
+const getTimeoutMeasure = ts => {
+  if (ts % TIMESTAMPS['weeks'] === 0) {
+    return 'weeks';
+  } else if (ts % TIMESTAMPS['days'] === 0) {
+    return 'days';
+  } else if (ts % TIMESTAMPS['hours'] === 0) {
+    return 'hours';
+  }
+};
+
+// Dividing the amount by it's measure (hours, days, weeks) we
+// obtain the amount of time
+const getTimeoutAmount = ts => ts / TIMESTAMPS[getTimeoutMeasure(ts)];
+
+const lang = new I18n(translations);

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

@@ -0,0 +1,44 @@
+import React, {PropTypes} from 'react';
+import {Card} from 'coral-ui';
+import Domainlist from './Domainlist';
+import EmbedLink from './EmbedLink';
+import styles from './Configure.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../../translations.json';
+const lang = new I18n(translations);
+
+const updateCustomCssUrl = (updateSettings) => (event) => {
+  const customCssUrl = event.target.value;
+  updateSettings({customCssUrl});
+};
+
+const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
+  return (
+    <div>
+      <Domainlist
+        domains={settings.domains.whitelist}
+        onChangeDomainlist={onChangeDomainlist} />
+      <EmbedLink />
+      <Card className={styles.configSetting}>
+        <h3>{lang.t('configure.custom-css-url')}</h3>
+        <p>{lang.t('configure.custom-css-url-desc')}</p>
+        <br />
+        <input
+          className={styles.customCSSInput}
+          value={settings.customCssUrl}
+          onChange={updateCustomCssUrl(updateSettings)} />
+      </Card>
+    </div>
+  );
+};
+
+TechSettings.propTypes = {
+  settings: PropTypes.shape({
+    domains: PropTypes.shape({
+      whitelist: PropTypes.array.isRequired
+    })
+  }).isRequired,
+  updateSettings: PropTypes.func.isRequired
+};
+
+export default TechSettings;

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

@@ -7,9 +7,8 @@ import {Card} from 'coral-ui';
 
 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
   <div>
-    <h3>{lang.t('configure.banned-words-title')}</h3>
-    <Card id={styles.bannedWordlist}>
-      <p className={styles.wordlistHeader}>{lang.t('configure.banned-word-header')}</p>
+    <Card id={styles.bannedWordlist} className={styles.configSetting}>
+      <h3>{lang.t('configure.banned-words-title')}</h3>
       <p className={styles.wordlistDesc}>{lang.t('configure.banned-word-text')}</p>
       <TagsInput
         value={bannedWords}
@@ -19,9 +18,8 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
         onChange={tags => onChangeWordlist('banned', tags)}
       />
     </Card>
-    <h3>{lang.t('configure.suspect-words-title')}</h3>
-    <Card id={styles.suspectWordlist}>
-      <p className={styles.wordlistHeader}>{lang.t('configure.suspect-word-header')}</p>
+    <Card id={styles.suspectWordlist} className={styles.configSetting}>
+      <h3>{lang.t('configure.suspect-words-title')}</h3>
       <p className={styles.wordlistDesc}>{lang.t('configure.suspect-word-text')}</p>
       <TagsInput
         value={suspectWords}

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

@@ -0,0 +1,9 @@
+.Dashboard {
+  display: flex;
+}
+
+.heading {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import styles from './Dashboard.css';
+import {compose} from 'react-apollo';
+import {connect} from 'react-redux';
+import {getMetrics} from 'coral-admin/src/graphql/queries';
+import FlagWidget from './FlagWidget';
+import LikeWidget from './LikeWidget';
+import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation';
+
+import {Spinner} from 'coral-ui';
+
+class Dashboard extends React.Component {
+
+  render () {
+
+    if (this.props.data && this.props.data.loading) {
+      return <Spinner />;
+    }
+
+    const {data: {assetsByLike, assetsByFlag}} = this.props;
+
+    return (
+      <div className={styles.Dashboard}>
+        <FlagWidget assets={assetsByFlag} />
+        <LikeWidget assets={assetsByLike} />
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    settings: state.settings.toJS(),
+    moderation: state.moderation.toJS()
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  showBanUserDialog: (user, commentId) => dispatch(showBanUserDialog(user, commentId)),
+  hideBanUserDialog: () => dispatch(hideBanUserDialog(false))
+});
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  getMetrics
+)(Dashboard);

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

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

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

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

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations';
+import ModerationQueue from 'coral-admin/src/containers/ModerationQueue/ModerationQueue';
+import styles from './Widget.css';
+import BanUserDialog from 'coral-admin/src/components/BanUserDialog';
+
+const lang = new I18n(translations);
+
+const MostLikedCommentsWidget = props => {
+  const {
+    comments,
+    moderation,
+    settings,
+    handleBanUser,
+    showBanUserDialog,
+    hideBanUserDialog,
+    acceptComment,
+    rejectComment
+  } = props;
+
+  return (
+    <div className={styles.widget}>
+      <h2 className={styles.heading}>{lang.t('most_liked_comments')}</h2>
+      <ModerationQueue
+        comments={comments}
+        suspectWords={settings.wordlist.suspect}
+        showBanUserDialog={showBanUserDialog}
+        acceptComment={acceptComment}
+        rejectComment={rejectComment} />
+      <BanUserDialog
+        open={moderation.banDialog}
+        user={moderation.user}
+        handleClose={hideBanUserDialog}
+        handleBanUser={handleBanUser} />
+    </div>
+  );
+};
+
+export default MostLikedCommentsWidget;

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

@@ -0,0 +1,84 @@
+:root {
+  --row-height: 80px;
+}
+
+.widget {
+  box-sizing: border-box;
+  margin: 10px 5px 5px 5px;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
+  padding: 15px;
+  flex: 1;
+  background-color: white;
+}
+
+.heading {
+  margin: 0;
+  padding-left: 10px;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.widgetTable {
+  width: 100%;
+  border-collapse: collapse;
+  user-select: none;
+  height: calc(var(--row-height) * 10);
+}
+
+.widgetTable thead th {
+  color: rgb(35, 102, 223);
+  padding: 10px;
+  text-align: left;
+  text-transform: capitalize;
+}
+
+.widgetTable thead th:last-child {
+  width: 10%;
+}
+
+.rowLinkify {
+  cursor: pointer;
+  border-bottom: 1px solid lightgrey;
+  color: #555;
+  height: var(--row-height);
+}
+
+.rowLinkify:last-child {
+  border-bottom: none;
+}
+
+.rowLinkify:hover {
+  background-color: #f8f8f8;
+}
+
+.widgetTable tbody td {
+  padding: 10px;
+}
+
+.linkToAsset {
+  display: block;
+  text-decoration: none;
+}
+
+.lede {
+  font-size: 0.9em;
+  color: #aaa;
+}
+
+.assetTitle {
+  color: #555;
+  text-decoration: none;
+  font-size: 1.2em;
+  font-weight: normal;
+  margin: 0;
+}
+
+.assetTitle:hover {
+  text-decoration: underline;
+}
+
+.widgetCount {
+  color: #555;
+  font-size: 1.3em;
+  font-weight: 400;
+}

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

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import styles from './style.css';
+import {TextField, Button} from 'coral-ui';
+
+const lang = new I18n(translations);
+import translations from '../../translations.json';
+import I18n from 'coral-framework/modules/i18n/i18n';
+
+const AddOrganizationName = props => {
+  const {handleSettingsChange, handleSettingsSubmit, install} = props;
+  return (
+    <div className={styles.step}>
+      <p>{lang.t('ADD_ORGANIZATION.DESCRIPTION')}</p>
+      <div className={styles.form}>
+        <form onSubmit={handleSettingsSubmit}>
+          <TextField
+            className={styles.TextField}
+            id="organizationName"
+            type="text"
+            label={lang.t('ADD_ORGANIZATION.LABEL')}
+            onChange={handleSettingsChange}
+            showErrors={install.showErrors}
+            errorMsg={install.errors.organizationName} />
+          <Button type="submit" cStyle='black' full>{lang.t('ADD_ORGANIZATION.SAVE')}</Button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default AddOrganizationName;

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import styles from './style.css';
+import {TextField, Button, Spinner} from 'coral-ui';
+
+const lang = new I18n(translations);
+import translations from '../../translations.json';
+import I18n from 'coral-framework/modules/i18n/i18n';
+
+const InitialStep = props => {
+  const {handleUserChange, handleUserSubmit, install} = props;
+  return (
+    <div className={styles.step}>
+      <div className={styles.form}>
+        <form onSubmit={handleUserSubmit}>
+          <TextField
+            className={styles.textField}
+            id="email"
+            type="email"
+            label={lang.t('CREATE.EMAIL')}
+            onChange={handleUserChange}
+            showErrors={install.showErrors}
+            errorMsg={install.errors.email}
+            noValidate
+            />
+
+          <TextField
+            className={styles.textField}
+            id="username"
+            type="text"
+            label={lang.t('CREATE.USERNAME')}
+            onChange={handleUserChange}
+            showErrors={install.showErrors}
+            errorMsg={install.errors.username}
+            />
+
+          <TextField
+            className={styles.textField}
+            id="password"
+            type="password"
+            label={lang.t('CREATE.PASSWORD')}
+            onChange={handleUserChange}
+            showErrors={install.showErrors}
+            errorMsg={install.errors.password}
+            />
+
+          <TextField
+            className={styles.textField}
+            id="confirmPassword"
+            type="password"
+            label={lang.t('CREATE.CONFIRM_PASSWORD')}
+            onChange={handleUserChange}
+            showErrors={install.showErrors}
+            errorMsg={install.errors.confirmPassword}
+            />
+
+          {
+            !props.install.isLoading ?
+            <Button cStyle='black' type="submit" full>{lang.t('CREATE.SAVE')}</Button>
+            :
+            <Spinner />
+          }
+          {props.install.installRequest === 'FAILURE' && <div className={styles.error}>Error: {props.install.installRequestError}</div>}
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default InitialStep;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './style.css';
+import {Button} from 'coral-ui';
+import {Link} from 'react-router';
+
+const lang = new I18n(translations);
+import translations from '../../translations.json';
+import I18n from 'coral-framework/modules/i18n/i18n';
+
+const InitialStep = () => {
+  return (
+    <div className={`${styles.step} ${styles.finalStep}`}>
+      <p>{lang.t('FINAL.DESCRIPTION')}</p>
+      <Button raised><Link to='/admin'>{lang.t('FINAL.LAUNCH')}</Link></Button>
+      <Button cStyle='black' raised><a href="http://coralproject.net">{lang.t('FINAL.CLOSE')}</a></Button>
+    </div>
+  );
+};
+
+export default InitialStep;

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

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

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import styles from './style.css';
+import {Button, Select, Option, TextField} from 'coral-ui';
+
+const InviteTeamMembers = props => {
+  const {nextStep} = props;
+  return (
+    <div className={styles.step}>
+      <h3>Invite Team Members </h3>
+      <p>
+        Once registered, new team members will receive an email to Create
+        their password.
+      </p>
+      <div className={styles.form}>
+        <form>
+
+          <TextField
+            className={styles.textField}
+            id="email"
+            type="email"
+            label='Email address' required/>
+
+          <TextField
+            className={styles.textField}
+            id="username"
+            type="text"
+            label='Username' required/>
+
+          <div className={styles.textField}>
+            <label htmlFor='role'>Assing a role</label>
+            <Select id='role' label='Select Role'>
+              <Option>Admin</Option>
+              <Option>Moderator</Option>
+            </Select>
+          </div>
+
+          <Button cStyle='black' onClick={nextStep} icon='arrow_forward' full>Invite team member</Button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default InviteTeamMembers;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import styles from './style.css';
+import {Button, Card} from 'coral-ui';
+import TagsInput from 'react-tagsinput';
+
+const lang = new I18n(translations);
+import translations from '../../translations.json';
+import I18n from 'coral-framework/modules/i18n/i18n';
+
+const PermittedDomainsStep = props => {
+  const {finishInstall, install, handleDomainsChange} = props;
+  const domains = install.data.settings.domains.whitelist;
+  return (
+    <div className={styles.step}>
+      <h3>{lang.t('PERMITTED_DOMAINS.TITLE')}</h3>
+      <Card className={styles.card}>
+        <p>{lang.t('PERMITTED_DOMAINS.DESCRIPTION')}</p>
+        <TagsInput
+          value={domains}
+          inputProps={{placeholder: 'URL'}}
+          addOnPaste={true}
+          pasteSplit={data => data.split(',').map(d => d.trim())}
+          onChange={tags => handleDomainsChange(tags)}
+        />
+      </Card>
+      <Button cStyle='green' onClick={finishInstall} raised>{lang.t('PERMITTED_DOMAINS.SUBMIT')}</Button>
+    </div>
+  );
+};
+
+export default PermittedDomainsStep;

client/coral-admin/src/containers/Install/components/Steps/style.css

@@ -0,0 +1,83 @@
+.step {
+  padding: 20px 0;
+
+  h3 {
+    max-width: 450px;
+    margin: 0 auto;
+    text-align: left;
+    font-size: 1.4em;
+    font-weight: bold;
+  }
+
+  p {
+    max-width: 450px;
+    margin: 0 auto 30px;
+    font-size: 1.1em;
+    text-align: left;
+  }
+
+  > button {
+    min-width: 145px;
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+  .form {
+    max-width: 300px;
+    margin: 30px auto;
+    text-align: left;
+
+    form > button {
+      margin: 30px 0;
+    }
+
+    .textField {
+      text-align: left;
+
+      label {
+        text-align: left;
+        display: block;
+        margin: 10px 0;
+        font-weight: 400;
+        font-size: 1.08em;
+      }
+
+      > input {
+        border: solid 1px rgba(0, 0, 0, 0.23);
+        padding: 10px;
+        border-radius: 3px;
+        width: 100%;
+        box-sizing: border-box;
+        transition: border-color 0.2s ease;
+        font-size: 1em;
+
+        &:focus {
+          border-color: black;
+        }
+      }
+    }
+  }
+
+  .card {
+    max-width: 500px;
+    margin: 20px auto;
+    text-align: left;
+  }
+}
+
+.finalStep {
+  button {
+    width: 225px;
+    margin-right: 10px;
+  }
+}
+
+.error {
+  background: #FFEBEE;
+  color: #B71C1C;
+  padding: 10px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+}

client/coral-admin/src/containers/Install/style.css

@@ -0,0 +1,12 @@
+.Install {
+  max-width: 900px;
+  margin: 0 auto;
+  text-align: center;
+  padding: 50px 0;
+
+  h2 {
+    font-size: 2em;
+    font-weight: 500;
+    margin: 0;
+  }
+}

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

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

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

@@ -1,9 +1,9 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
-import {Layout} from '../components/ui/Layout';
-import {checkLogin, logout} from '../actions/auth';
+import Layout from '../components/ui/Layout';
+import {checkLogin, handleLogin, logout, requestPasswordReset} from '../actions/auth';
 import {FullLoading} from '../components/FullLoading';
-import {PermissionRequired} from '../components/PermissionRequired';
+import AdminLogin from '../components/AdminLogin';
 
 class LayoutContainer extends Component {
   componentWillMount () {
@@ -11,10 +11,23 @@ class LayoutContainer extends Component {
     checkLogin();
   }
   render () {
-    const {isAdmin, loggedIn, loadingUser} = this.props.auth;
+    const {
+      isAdmin,
+      loggedIn,
+      loadingUser,
+      loginError,
+      passwordRequestSuccess
+    } = this.props.auth;
+    const {handleLogout} = this.props;
     if (loadingUser) { return <FullLoading />; }
-    if (!isAdmin) { return <PermissionRequired />; }
-    if (isAdmin && loggedIn) { return <Layout {...this.props} />; }
+    if (!isAdmin) {
+      return <AdminLogin
+        handleLogin={this.props.handleLogin}
+        requestPasswordReset={this.props.requestPasswordReset}
+        passwordRequestSuccess={passwordRequestSuccess}
+        errorMessage={loginError} />;
+    }
+    if (isAdmin && loggedIn) { return <Layout handleLogout={handleLogout} {...this.props} />; }
     return <FullLoading />;
   }
 }
@@ -25,6 +38,8 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   checkLogin: () => dispatch(checkLogin()),
+  handleLogin: (username, password) => dispatch(handleLogin(username, password)),
+  requestPasswordReset: email => dispatch(requestPasswordReset(email)),
   handleLogout: () => dispatch(logout())
 });
 
@@ -32,4 +47,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(LayoutContainer);
-

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

@@ -1,42 +1,32 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {connect} from 'react-redux';
+import {compose} from 'react-apollo';
 import key from 'keymaster';
+import isEqual from 'lodash/isEqual';
+
+import {modQueueQuery} from '../../graphql/queries';
+import {banUser, setCommentStatus} from '../../graphql/mutations';
 
-import {
-  updateStatus,
-  showBanUserDialog,
-  hideBanUserDialog,
-  fetchPendingQueue,
-  fetchRejectedQueue,
-  fetchFlaggedQueue,
-  fetchModerationQueueComments,
-} from 'actions/comments';
-import {userStatusUpdate} from 'actions/users';
 import {fetchSettings} from 'actions/settings';
+import {updateAssets} from 'actions/assets';
+import {toggleModal, singleView, showBanUserDialog, hideBanUserDialog} from 'actions/moderation';
 
+import {Spinner} from 'coral-ui';
+import BanUserDialog from '../../components/BanUserDialog';
 import ModerationQueue from './ModerationQueue';
+import ModerationMenu from './components/ModerationMenu';
+import ModerationHeader from './components/ModerationHeader';
+import NotFoundAsset from './components/NotFoundAsset';
 
-class ModerationContainer extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activeTab: 'pending',
-      singleView: false,
-      modalOpen: false
-    };
-
-    this.onClose = this.onClose.bind(this);
-    this.onTabClick = this.onTabClick.bind(this);
-  }
-
+class ModerationContainer extends Component {
   componentWillMount() {
-    this.props.fetchModerationQueueComments();
+    const {toggleModal, singleView} = this.props;
+
     this.props.fetchSettings();
-    key('s', () => this.setState({singleView: !this.state.singleView}));
-    key('shift+/', () => this.setState({modalOpen: true}));
-    key('esc', () => this.setState({modalOpen: false}));
+
+    key('s', () => singleView());
+    key('shift+/', () => toggleModal(true));
+    key('esc', () => toggleModal(false));
   }
 
   componentWillUnmount() {
@@ -45,78 +35,87 @@ class ModerationContainer extends React.Component {
     key.unbind('esc');
   }
 
-  componentDidMount() {
-
-    // Hack for dynamic mdl tabs
-    if (typeof componentHandler !== 'undefined') {
-
-      // FIXME: fix this hack
-      componentHandler.upgradeAllRegistered(); // eslint-disable-line no-undef
+  componentWillReceiveProps(nextProps) {
+    const {updateAssets} = this.props;
+    if(!isEqual(nextProps.data.assets, this.props.data.assets)) {
+      updateAssets(nextProps.data.assets);
     }
   }
 
-  onTabClick(activeTab) {
-    this.setState({activeTab});
-
-    if (activeTab === 'pending') {
-      this.props.fetchPendingQueue();
-    } else if (activeTab === 'rejected') {
-      this.props.fetchRejectedQueue();
-    } else if (activeTab === 'flagged') {
-      this.props.fetchFlaggedQueue();
-    } else {
-      this.props.fetchModerationQueueComments();
-    }
-  }
-
-  onClose() {
-    this.setState({modalOpen: false});
-  }
-
   render () {
-    const {comments} = this.props;
-    const premodIds = comments.ids.filter(id => comments.byId[id].status === 'premod');
-    const rejectedIds = comments.ids.filter(id => comments.byId[id].status === 'rejected');
-    const flaggedIds = comments.ids.filter(id =>
-        comments.byId[id].flagged === true &&
-        comments.byId[id].status !== 'rejected' &&
-        comments.byId[id].status !== 'accepted'
-      );
+    const {data, moderation, settings, assets, modQueueResort, ...props} = this.props;
+    const providedAssetId = this.props.params.id;
+    const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;
+
+    let asset;
+
+    if (data.loading) {
+      return <div><Spinner/></div>;
+    }
+
+    if (data.error) {
+      return <div>Error</div>;
+    }
+
+    if (providedAssetId) {
+      asset = assets.find(asset => asset.id === this.props.params.id);
+
+      if (!asset) {
+        return <NotFoundAsset assetId={providedAssetId} />;
+      }
+    }
+
+    const comments = data[activeTab];
 
     return (
-      <ModerationQueue
-        onTabClick={this.onTabClick}
-        onClose={this.onClose}
-        premodIds={premodIds}
-        rejectedIds={rejectedIds}
-        flaggedIds={flaggedIds}
-        {...this.props}
-        {...this.state}
-      />
+      <div>
+        <ModerationHeader asset={asset} />
+        <ModerationMenu
+          asset={asset}
+          premodCount={data.premodCount}
+          rejectedCount={data.rejectedCount}
+          flaggedCount={data.flaggedCount}
+          modQueueResort={modQueueResort}
+        />
+        <ModerationQueue
+          currentAsset={asset}
+          comments={comments}
+          activeTab={activeTab}
+          suspectWords={settings.wordlist.suspect}
+          showBanUserDialog={props.showBanUserDialog}
+          acceptComment={props.acceptComment}
+          rejectComment={props.rejectComment}
+        />
+        <BanUserDialog
+          open={moderation.banDialog}
+          user={moderation.user}
+          handleClose={props.hideBanUserDialog}
+          handleBanUser={props.banUser}
+        />
+      </div>
     );
   }
 }
 
 const mapStateToProps = state => ({
-  comments: state.comments.toJS(),
+  moderation: state.moderation.toJS(),
   settings: state.settings.toJS(),
-  users: state.users.toJS()
+  assets: state.assets.get('assets')
 });
 
-const mapDispatchToProps = dispatch => {
-  return {
-    fetchSettings: () => dispatch(fetchSettings()),
-    fetchModerationQueueComments: () => dispatch(fetchModerationQueueComments()),
-    fetchPendingQueue: () => dispatch(fetchPendingQueue()),
-    fetchRejectedQueue: () => dispatch(fetchRejectedQueue()),
-    fetchFlaggedQueue: () => dispatch(fetchFlaggedQueue()),
-    showBanUserDialog: (userId, userName, commentId) => dispatch(showBanUserDialog(userId, userName, commentId)),
-    hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
-    banUser: (userId, commentId) => dispatch(userStatusUpdate('banned', userId, commentId)).then(() => {
-      dispatch(fetchModerationQueueComments());
-    }),
-    updateStatus: (action, comment) => dispatch(updateStatus(action, comment))
-  };
-};
+const mapDispatchToProps = dispatch => ({
+  toggleModal: toggle => dispatch(toggleModal(toggle)),
+  onClose: () => dispatch(toggleModal(false)),
+  singleView: () => dispatch(singleView()),
+  updateAssets: assets => dispatch(updateAssets(assets)),
+  fetchSettings: () => dispatch(fetchSettings()),
+  showBanUserDialog: (user, commentId) => dispatch(showBanUserDialog(user, commentId)),
+  hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
+});
 
-export default connect(mapStateToProps, mapDispatchToProps)(ModerationContainer);
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  setCommentStatus,
+  modQueueQuery,
+  banUser
+)(ModerationContainer);

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

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

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

@@ -1,53 +0,0 @@
-@custom-media --big-viewport (min-width: 780px);
-
-.listContainer {
-  max-width: 860px;
-  margin: 0 auto;
-}
-
-.tabBar {
-  background: #262626;
-  z-index: 5;
-}
-
-.tab {
-  flex: 1;
-  color: white;
-  text-transform: capitalize;
-  font-weight: 500;
-  font-size: 15px;
-  letter-spacing: 1px;
-  transition: border-bottom 200ms;
-}
-
-.active {
-  color: white;
-  box-sizing: border-box;
-  border-bottom: solid 5px #F36451;
-}
-
-.active > span {
-  color: white;
-}
-
-.active:after {
-  background: transparent !important;
-}
-
-.showShortcuts {
-  position: absolute;
-  right: 130px;
-  display: flex;
-  align-items: center;
-  font-size: 13px;
-
-  span {
-    margin-left: 7px;
-  }
-}
-
-@media (--big-viewport) {
-  .tab {
-    flex: none;
-  }
-}

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

@@ -1,104 +1,47 @@
-import React from 'react';
-import styles from './ModerationQueue.css';
-
-import ModerationKeysModal from 'components/ModerationKeysModal';
-import CommentList from 'components/CommentList';
-import BanUserDialog from 'components/BanUserDialog';
+import React, {PropTypes} from 'react';
 
+import Comment from './components/Comment';
+import EmptyCard from '../../components/EmptyCard';
+import {actionsMap} from './helpers/moderationQueueActionsMap';
 import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import translations from 'coral-admin/src/translations';
 
 const lang = new I18n(translations);
-
-export default ({onTabClick, ...props}) => (
-  <div>
-    <div className='mdl-tabs'>
-      <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-        <a href='#pending'
-           onClick={(e) => {
-             e.preventDefault();
-             onTabClick('pending');
-           }}
-           className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'pending' ? styles.active : ''}`}
-        >
-          {lang.t('modqueue.pending')}
-        </a>
-        <a href='#rejected'
-           onClick={(e) => {
-             e.preventDefault();
-             onTabClick('rejected');
-           }}
-           className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'rejected' ? styles.active : ''}`}
-        >
-          {lang.t('modqueue.rejected')}
-        </a>
-        <a href='#flagged'
-           onClick={(e) => {
-             e.preventDefault();
-             onTabClick('flagged');
-           }}
-           className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'flagged' ? styles.active : ''}`}
-        >
-          {lang.t('modqueue.flagged')}
-        </a>
-      </div>
-      <div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='pending'>
-        {
-          props.activeTab === 'pending'
-          ? <div>
-              <CommentList
-                suspectWords={props.settings.settings.wordlist.suspect}
-                isActive={props.activeTab === 'pending'}
-                singleView={props.singleView}
-                commentIds={props.premodIds}
-                comments={props.comments.byId}
-                users={props.users.byId}
-                onClickAction={props.updateStatus}
-                onClickShowBanDialog={props.showBanUserDialog}
-                modActions={['reject', 'approve', 'ban']}
-                loading={props.comments.loading} />
-              <BanUserDialog
-                open={props.comments.showBanUserDialog}
-                handleClose={props.hideBanUserDialog}
-                onClickBanUser={props.banUser}
-                user={props.comments.banUser} />
-            </div>
-          : null
-        }
-      </div>
-      <div className={`mdl-tabs__panel ${styles.listContainer}`} id='rejected'>
+const ModerationQueue = ({comments, ...props}) => {
+  return (
+    <div id="moderationList">
+      <ul style={{paddingLeft: 0}}>
       {
-        props.activeTab === 'rejected'
-        ? <CommentList
-            suspectWords={props.settings.settings.wordlist.suspect}
-            isActive={props.activeTab === 'rejected'}
-            singleView={props.singleView}
-            commentIds={props.rejectedIds}
-            comments={props.comments.byId}
-            users={props.users.byId}
-            onClickAction={props.updateStatus}
-            modActions={['approve']}
-            loading={props.comments.loading} />
-        : null
+        comments.length
+        ? comments.map((comment, i) => {
+          const status = comment.action_summaries ? 'FLAGGED' : comment.status;
+          return <Comment
+            key={i}
+            index={i}
+            comment={comment}
+            commentType={props.activeTab}
+            suspectWords={props.suspectWords}
+            actions={actionsMap[status]}
+            showBanUserDialog={props.showBanUserDialog}
+            acceptComment={props.acceptComment}
+            rejectComment={props.rejectComment}
+            currentAsset={props.currentAsset}
+          />;
+        })
+        : <EmptyCard>{lang.t('modqueue.emptyqueue')}</EmptyCard>
       }
-      </div>
-      <div className={`mdl-tabs__panel ${styles.listContainer}`} id='flagged'>
-      {
-        props.activeTab === 'flagged'
-        ? <CommentList
-            suspectWords={props.settings.settings.wordlist.suspect}
-            isActive={props.activeTab === 'flagged'}
-            singleView={props.singleView}
-            commentIds={props.flaggedIds}
-            comments={props.comments.byId}
-            users={props.users.byId}
-            onClickAction={props.updateStatus}
-            modActions={['reject', 'approve']}
-            loading={props.comments.loading} />
-        : null
-      }
-       </div>
-      <ModerationKeysModal open={props.modalOpen} onClose={props.closeModal} />
+      </ul>
     </div>
-  </div>
-);
+  );
+};
+
+ModerationQueue.propTypes = {
+  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  currentAsset: PropTypes.object,
+  showBanUserDialog: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  acceptComment: PropTypes.func.isRequired,
+  comments: PropTypes.array.isRequired
+};
+
+export default ModerationQueue;

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

@@ -0,0 +1,98 @@
+import React, {PropTypes} from 'react';
+import timeago from 'timeago.js';
+import Linkify from 'react-linkify';
+import Highlighter from 'react-highlight-words';
+import {Link} from 'react-router';
+
+import styles from './styles.css';
+import {Icon} from 'coral-ui';
+import FlagBox from './FlagBox';
+import CommentType from './CommentType';
+import ActionButton from 'coral-admin/src/components/ActionButton';
+import BanUserButton from 'coral-admin/src/components/BanUserButton';
+
+const linkify = new Linkify();
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations.json';
+const lang = new I18n(translations);
+
+const Comment = ({actions = [], ...props}) => {
+  const links = linkify.getMatches(props.comment.body);
+  const actionSummaries = props.comment.action_summaries;
+  return (
+    <li tabIndex={props.index}
+        className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
+      <div className={styles.container}>
+        <div className={styles.itemHeader}>
+        <div className={styles.author}>
+          <span>{props.comment.user.name}</span>
+          <span className={styles.created}>
+              {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
+            </span>
+          <BanUserButton user={props.comment.user} onClick={() => props.showBanUserDialog(props.comment.user, props.comment.id)} />
+          <CommentType type={props.commentType} />
+        </div>
+        <div className={styles.sideActions}>
+          {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
+          <div className={`actions ${styles.actions}`}>
+            {actions.map((action, i) =>
+              <ActionButton key={i}
+                            type={action}
+                            user={props.comment.user}
+                            acceptComment={() => props.acceptComment({commentId: props.comment.id})}
+                            rejectComment={() => props.rejectComment({commentId: props.comment.id})}
+              />
+            )}
+          </div>
+          {props.comment.user.status === 'banned' ?
+            <span className={styles.banned}>
+                <Icon name='error_outline'/>
+              {lang.t('comment.banned_user')}
+              </span>
+            : null}
+        </div>
+      </div>
+        {!props.currentAsset && (
+          <div className={styles.moderateArticle}>
+            Story: {props.comment.asset.title} <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate &rarr;</Link>
+          </div>
+        )}
+        <div className={styles.itemBody}>
+          <p className={styles.body}>
+            <Linkify component='span' properties={{style: linkStyles}}>
+              <Highlighter searchWords={props.suspectWords} textToHighlight={props.comment.body}/>
+            </Linkify>
+          </p>
+        </div>
+      </div>
+      {actionSummaries && <FlagBox actionSummaries={actionSummaries} />}
+    </li>
+  );
+};
+
+Comment.propTypes = {
+  acceptComment: PropTypes.func.isRequired,
+  rejectComment: PropTypes.func.isRequired,
+  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  currentAsset: PropTypes.object,
+  comment: PropTypes.shape({
+    body: PropTypes.string.isRequired,
+    action_summaries: PropTypes.array,
+    created_at: PropTypes.string.isRequired,
+    user: PropTypes.shape({
+      status: PropTypes.string
+    }),
+    asset: PropTypes.shape({
+      title: PropTypes.string,
+      id: PropTypes.string
+    })
+  })
+};
+
+const linkStyles = {
+  backgroundColor: 'rgb(255, 219, 135)',
+  padding: '1px 2px'
+};
+
+export default Comment;

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

@@ -0,0 +1,14 @@
+.count {
+  display: inline-block;
+  background: #989797;
+  margin: 2px;
+  vertical-align: middle;
+  padding: 4px 7px;
+  border-radius: 2px;
+  margin-left: 10px;
+  line-height: 20px;
+  box-sizing: border-box;
+  height: 27px;
+  right: 0;
+  margin-top: -2px;
+}