Merge pull request #661 from coralproject/comment-stream-cleanup

Refinement of design for banned and suspend user messaging on comment stream.

.eslintignore

@@ -1,7 +1,14 @@
 dist
+docs
 client/lib
 **/*.html
 plugins/*
 !plugins/coral-plugin-facebook-auth
+!plugins/coral-plugin-auth
 !plugins/coral-plugin-respect
+!plugins/coral-plugin-offtopic
+!plugins/coral-plugin-like
+!plugins/coral-plugin-mod
+!plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
 node_modules

.eslintrc.json

@@ -20,6 +20,8 @@
         "no-template-curly-in-string": [1],
         "no-unsafe-negation": [1],
         "array-callback-return": [1],
+        "arrow-parens": ["warn", "always"],
+        "template-curly-spacing": "warn",
         "eqeqeq": [2, "smart"],
         "no-eval": [2],
         "no-global-assign": [2],
@@ -36,6 +38,11 @@
         "no-unneeded-ternary": [1],
         "object-curly-spacing": [1],
         "space-infix-ops": ["error"],
+        "space-in-parens": ["error", "never"],
+        "space-unary-ops": ["error", {
+          "words": true,
+          "nonwords": false
+        }],
         "no-const-assign": [2],
         "no-duplicate-imports": [2],
         "prefer-template": [1],

.gitignore

@@ -17,7 +17,12 @@ coverage/
 plugins.json
 plugins/*
 !plugins/coral-plugin-facebook-auth
+!plugins/coral-plugin-auth
 !plugins/coral-plugin-respect
 !plugins/coral-plugin-offtopic
+!plugins/coral-plugin-like
+!plugins/coral-plugin-mod
+!plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
 
 **/node_modules/*

Dockerfile

@@ -13,7 +13,8 @@ EXPOSE 5000
 COPY . /usr/src/app
 
 # Install app dependencies and build static assets.
-RUN yarn install --frozen-lockfile && \
+RUN yarn global add node-gyp && \
+    yarn install --frozen-lockfile && \
     cli plugins reconcile && \
     yarn build && \
     yarn install --production && \

INSTALL.md

@@ -243,7 +243,7 @@ file under the `scripts` key including:
 # Setup
 
 Once you've installed Talk (either via Docker or source), you still need to
-setup the application. If you are unfamiliar with any terminoligy used in the
+setup the application. If you are unfamiliar with any terminology used in the
 setup process, refer to the `TERMINOLOGY.md` document.
 
 ## Via Web

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2016 Mozilla Foundation
+Copyright 2017 Mozilla Foundation
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

PLUGINS.md

@@ -145,6 +145,10 @@ type RootMutation {
 type RootQuery {
   people: [Person!]
 }
+
+type Subscription {
+  leader: Person
+}
 ```
 
 Thanks to [gql-merge](https://www.npmjs.com/package/gql-merge) the contents of
@@ -259,6 +263,58 @@ If your post function accepts four parameters, then it can modify the field
 result. It is *required* that the function resolves a promise (or returns) with
 the modified value or simply the original if you didn't modify it.
 
+#### Field: `setupFunctions`
+
+```js
+setupFunctions: {
+  leader: (options, args) => ({
+    leader: {
+      filter: (person) => person.place === 1
+    },
+  }),
+}
+```
+
+Setup functions allow you to create filters that control which pubsub.publish() events
+send data to the client. If the type in question contains args, clients may subscribe using those arguments to further filter their subscription.
+
+For more information, see the [Apollo Docs](https://github.com/apollographql/graphql-subscriptions).
+
+#### Field: `tokenUserNotFound`
+
+```js
+tokenUserNotFound: async ({jwt, token}) => {
+  let profile = await someExternalService(token);
+  if (!profile) {
+    return null;
+  }
+
+  let user = await UserModel.findOneAndUpdate({
+    id: profile.id
+  }, {
+    id: profile.id,
+    username: profile.username,
+    lowercaseUsername: profile.username.toLowerCase(),
+    roles: [],
+    profiles: []
+  }, {
+    setDefaultsOnInsert: true,
+    new: true,
+    upsert: true
+  });
+
+  return user;
+}
+```
+
+The `tokenUserNotFound` hook allows auth integrations to hook into the event
+when a valid token is provided but a user can't be found in the database that
+matches the provided id.
+
+The function is async, and should return the user object that was created in the
+database, or null if the user wasn't found. The `jwt` paramenter of the object
+is the unpacked token, while `token` is the original jwt token string.
+
 #### Field: `router`
 
 ```js
@@ -375,6 +431,10 @@ module.exports = {
   type RootQuery {
     people: [Person!]
   }
+
+  type Subscription {
+    leader: Person
+  }
   `,
   context: {
     Slack: () => ({
@@ -430,6 +490,13 @@ module.exports = {
         }
       }
     }
+  },
+  setupFunctions: {
+    leader: (options, args) => ({
+      leader: {
+        filter: (person) => person.place === 1
+      }
+    }
   }
 };
 

README.md

@@ -1,6 +1,6 @@
 # Talk [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
 
-Talk is currently in Beta! [Read more about Talk here.](https://coralproject.net/products/talk.html)
+Online comments are broken. Our open-source Talk tool rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [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.
@@ -17,17 +17,19 @@ To set up a development environment or build from source, see [INSTALL.md](https
 
 To launch a Talk server of your own from your browser without any need to muck about in a terminal or think about engineering concepts, stay tuned. We will launch [our installer](https://github.com/coralproject/talk-install) shortly!
 
-
 ### Configuration
 
 The Talk application looks for the following configuration values either as environment variables:
 
 - `TALK_MONGO_URL` (*required*) - the database connection string for the MongoDB database.
 - `TALK_REDIS_URL` (*required*) - the database connection string for the Redis database.
-- `TALK_SESSION_SECRET` (*required*) - a random string which will be used to
-secure cookies.
 - `TALK_ROOT_URL` (*required*) - root url of the installed application externally
 available in the format: `<scheme>://<host>` without the path.
+- `TALK_JWT_SECRET` (*required*) - a long and cryptographical secure random string which will be used to
+sign and verify tokens via a `HS256` algorithm.
+- `TALK_JWT_EXPIRY` (_optional_) - the expiry duration (`exp`) for the tokens issued for logged in sessions (Default `1 day`)
+- `TALK_JWT_ISSUER` (_optional_) - the issuer (`iss`) claim for login JWT tokens (Default `process.env.TALK_ROOT_URL`)
+- `TALK_JWT_AUDIENCE` (_optional_) - the audience (`aud`) claim for login JWT tokens (Default `talk`)
 - `TALK_SMTP_EMAIL` (*required for email*) - the address to send emails from using the
   SMTP provider.
 - `TALK_SMTP_USERNAME` (*required for email*) - username of the SMTP provider you are using.
@@ -42,9 +44,51 @@ available in the format: `<scheme>://<host>` without the path.
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.
 
-### License
+### Using Trust
 
-    Copyright 2016 Mozilla Foundation
+Talk ships with core components we call "Trust". This allows Talk to automate certain actions based on previous user behavior.
+
+Our first feature is the notion of Karma. Talk will automatically pre-moderate comments of users who have a negative karma score. You can [see more how karma works here](/services/karma.js).
+
+## Supported Browsers
+
+### Web
+
+- Chrome: latest 2 versions
+- Firefox: latest 2 versions, and most recent extended support version, if any
+- Safari: latest 2 versions
+- Internet Explorer: IE Edge, 11
+
+### iOS Devices
+
+- iPad
+- iPad Pro
+- iPhone 7 Plus
+- iPhone 7
+- iPhone 6 Plus
+- iPhone 6
+- iPhone 5
+
+### iOS Browsers
+
+- Chrome for iOS: latest version
+- Firefox for iOS: latest version
+- Safari for iOS: latest version
+
+### Android Devices
+
+- Galaxy S5
+- Nexus 5X
+- Nexus 6P
+
+### Android Browsers
+
+- Chrome for Android: latest version
+- Firefox for Android: latest version
+
+## License
+
+    Copyright 2017 Mozilla Foundation
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

app.js

@@ -3,16 +3,17 @@ const bodyParser = require('body-parser');
 const morgan = require('morgan');
 const path = require('path');
 const helmet = require('helmet');
+const authentication = require('./middleware/authentication');
 const {passport} = require('./services/passport');
 const plugins = require('./services/plugins');
-const session = require('express-session');
+const i18n = require('./services/i18n');
 const enabled = require('debug').enabled;
-const RedisStore = require('connect-redis')(session);
-const redis = require('./services/redis');
-const csrf = require('csurf');
 const errors = require('./errors');
-const graph = require('./graph');
+const {createGraphOptions} = require('./graph');
 const apollo = require('graphql-server-express');
+const accepts = require('accepts');
+const compression = require('compression');
+const cookieParser = require('cookie-parser');
 
 const app = express();
 
@@ -33,44 +34,44 @@ app.set('trust proxy', 1);
 app.use(helmet({
   frameguard: false
 }));
+app.use(compression());
+app.use(cookieParser());
 app.use(bodyParser.json());
-app.use('/client', express.static(path.join(__dirname, 'dist')));
-app.use('/public', express.static(path.join(__dirname, 'public')));
-app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'ejs');
 
 //==============================================================================
-// SESSION MIDDLEWARE
+// STATIC FILES
 //==============================================================================
 
-const session_opts = {
-  secret: process.env.TALK_SESSION_SECRET,
-  httpOnly: true,
-  rolling: true,
-  saveUninitialized: true,
-  resave: true,
-  unset: 'destroy',
-  name: 'talk.sid',
-  cookie: {
-    secure: false,
-    maxAge: 8.64e+7, // 24 hours for session token expiry
-  },
-  store: new RedisStore({
-    client: redis.createClient(),
-  })
-};
+// If the application is in production mode, then add gzip rewriting for the
+// content.
+if (process.env.NODE_ENV === 'production') {
+  app.get('*.js', (req, res, next) => {
+    const accept = accepts(req);
+    if (accept.encoding(['gzip']) === 'gzip') {
 
-if (app.get('env') === 'production') {
+      // Adjsut the headers on the request by adding a content type header
+      // because express won't be able to detect the mime-type with the .gz
+      // extension and we need to decalre support for the gzip encoding.
+      res.set('Content-Type', 'application/javascript');
+      res.set('Content-Encoding', 'gzip');
 
-  // Enable the secure cookie when we are in production mode.
-  session_opts.cookie.secure = true;
-} else if (app.get('env') === 'test') {
+      // Rewrite the url so that the gzip version will be served instead.
+      req.url = `${req.url}.gz`;
+    }
 
-  // Add in the secret during tests.
-  session_opts.secret = 'keyboard cat';
+    next();
+  });
 }
 
-app.use(session(session_opts));
+app.use('/client', express.static(path.join(__dirname, 'dist')));
+app.use('/public', express.static(path.join(__dirname, 'public')));
+
+//==============================================================================
+// VIEW CONFIGURATION
+//==============================================================================
+
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'ejs');
 
 //==============================================================================
 // PASSPORT MIDDLEWARE
@@ -89,22 +90,27 @@ plugins.get('server', 'passport').forEach((plugin) => {
 
 // Setup the PassportJS Middleware.
 app.use(passport.initialize());
-app.use(passport.session());
+
+// Attach the authentication middleware, this will be responsible for decoding
+// (if present) the JWT on the request.
+app.use('/api', authentication);
 
 //==============================================================================
 // GraphQL Router
 //==============================================================================
 
 // GraphQL endpoint.
-app.use('/api/v1/graph/ql', apollo.graphqlExpress(graph.createGraphOptions));
+app.use('/api/v1/graph/ql', apollo.graphqlExpress(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'
-  }));
+  app.use('/api/v1/graph/iql', (req, res) => {
+    res.render('graphiql', {
+      endpointURL: '/api/v1/graph/ql'
+    });
+  });
 
   // GraphQL documention.
   app.get('/admin/docs', (req, res) => {
@@ -113,29 +119,6 @@ if (app.get('env') !== 'production') {
 
 }
 
-//==============================================================================
-// CSRF MIDDLEWARE
-//==============================================================================
-
-if (process.env.TEST_MODE === 'unit') {
-
-  // Add this fake test token in the event we are in unit test mode, and don't
-  // include the CSRF protection.
-  app.locals.csrfToken = 'UNIT_TESTS';
-
-} else {
-
-  // Setup route middlewares for CSRF protection.
-  // Default ignore methods are GET, HEAD, OPTIONS
-  app.use(csrf({}));
-  app.use((req, res, next) => {
-    res.locals.csrfToken = req.csrfToken();
-
-    next();
-  });
-
-}
-
 //==============================================================================
 // ROUTES
 //==============================================================================
@@ -175,6 +158,8 @@ app.use('/', (err, req, res, next) => {
     console.error(err);
   }
 
+  i18n.init(req);
+  
   if (err instanceof errors.APIError) {
     res.status(err.status);
     res.render('error', {

bin/cli-assets

@@ -5,7 +5,7 @@
  */
 
 const program = require('./commander');
-const parseDuration = require('parse-duration');
+const parseDuration = require('ms');
 const Table = require('cli-table');
 const AssetModel = require('../models/asset');
 const mongoose = require('../services/mongoose');

bin/cli-serve

@@ -1,26 +1,29 @@
 #!/usr/bin/env node
 
-const app = require('../app');
 const program = require('./commander');
-const http = require('http');
+const app = require('../app');
+const {createServer} = require('http');
 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 {createSubscriptionManager} = require('../graph/subscriptions');
+const {
+  PORT
+} = require('../config');
 
 /**
 * Get port from environment and store in Express.
 */
 
-const port = normalizePort(process.env.TALK_PORT || '3000');
-
+const port = normalizePort(PORT);
 app.set('port', port);
 
 /**
 * Create HTTP server.
 */
-const server = http.createServer(app);
+const server = createServer(app);
 
 /**
  * Event listener for HTTP server "error" event.
@@ -76,20 +79,29 @@ function normalizePort(val) {
 function onListening() {
   let addr = server.address();
   let bind = typeof addr === 'string'
-    ? `pipe ${  addr}`
-    : `port ${  addr.port}`;
-  console.log(`Listening on ${  bind}`);
+    ? `pipe ${addr}`
+    : `port ${addr.port}`;
+  console.log(`API Server Listening on ${bind}`);
 }
 
 /**
  * Start the app.
  */
-function startApp() {
+function startApp(program) {
 
   /**
   * Listen on provided port, on all network interfaces.
   */
-  server.listen(port);
+  server.listen(port, () => {
+
+    // Mount the websocket server if requested.
+    if (program.websockets) {
+      console.log(`Websocket Server Listening on ${port}`);
+
+      // Mount the subscriptions server on the application server.
+      createSubscriptionManager(server);
+    }
+  });
   server.on('error', onError);
   server.on('listening', onListening);
 }
@@ -100,10 +112,11 @@ function startApp() {
 
 program
   .option('-j, --jobs', 'enable job processing on this thread')
+  .option('-w, --websockets', 'enable the websocket (subscriptions) handler on this thread')
   .parse(process.argv);
 
 // Start the application serving.
-startApp();
+startApp(program);
 
 // Enable job processing on the thread if enabled.
 if (program.jobs) {

bin/commander.js

@@ -3,11 +3,6 @@ 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.
 //==============================================================================

client/.eslintrc.json

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

client/coral-admin/config.json

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

client/coral-admin/src/AppRouter.js

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

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

@@ -8,7 +8,7 @@ import {
   UPDATE_ASSETS
 } from '../constants/assets';
 
-import coralApi from '../../../coral-framework/helpers/response';
+import coralApi from '../../../coral-framework/helpers/request';
 
 /**
  * Action disptacher related to assets
@@ -24,7 +24,7 @@ export const fetchAssets = (skip = '', limit = '', search = '', sort = '', filte
       assets: result,
       count
     }))
-    .catch(error => dispatch({type: FETCH_ASSETS_FAILURE, error}));
+    .catch((error) => dispatch({type: FETCH_ASSETS_FAILURE, error}));
 };
 
 // Update an asset state
@@ -34,9 +34,9 @@ export const updateAssetState = (id, closedAt) => (dispatch) => {
   return coralApi(`/assets/${id}/status`, {method: 'PUT', body: {closedAt}})
   .then(() =>
     dispatch({type: UPDATE_ASSET_STATE_SUCCESS}))
-    .catch(error => dispatch({type: UPDATE_ASSET_STATE_FAILURE, error}));
+    .catch((error) => dispatch({type: UPDATE_ASSET_STATE_FAILURE, error}));
 };
 
-export const updateAssets = assets => dispatch => {
+export const updateAssets = (assets) => (dispatch) => {
   dispatch({type: UPDATE_ASSETS, assets});
 };

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

@@ -1,75 +1,114 @@
+import bowser from 'bowser';
 import * as actions from '../constants/auth';
-import coralApi from 'coral-framework/helpers/response';
+import coralApi from 'coral-framework/helpers/request';
+import * as Storage from 'coral-framework/helpers/storage';
+import {handleAuthToken} from 'coral-framework/actions/auth';
 
-// Log In.
-export const handleLogin = (email, password, recaptchaResponse) => dispatch => {
+//==============================================================================
+// SIGN IN
+//==============================================================================
+
+export const handleLogin = (email, password, recaptchaResponse) => (dispatch) => {
   dispatch({type: actions.LOGIN_REQUEST});
-  const params = {method: 'POST', body: {email, password}};
+
+  const params = {
+    method: 'POST',
+    body: {
+      email,
+      password
+    }
+  };
+
   if (recaptchaResponse) {
-    params.headers = {'X-Recaptcha-Response': recaptchaResponse};
+    params.headers = {
+      'X-Recaptcha-Response': recaptchaResponse
+    };
   }
+
   return coralApi('/auth/local', params)
-    .then(({user}) => {
+    .then(({user, token}) => {
+
       if (!user) {
+        if (!bowser.safari && !bowser.ios) {
+          Storage.removeItem('token');
+        }
         return dispatch(checkLoginFailure('not logged in'));
       }
 
-      const isAdmin = !!user.roles.filter(i => i === 'ADMIN').length;
-      dispatch(checkLoginSuccess(user, isAdmin));
+      dispatch(handleAuthToken(token));
+      dispatch(checkLoginSuccess(user));
     })
-    .catch(error => {
-
+    .catch((error) => {
       if (error.translation_key === 'LOGIN_MAXIMUM_EXCEEDED') {
-        dispatch({type: actions.LOGIN_MAXIMUM_EXCEEDED, message: error.translation_key});
+        dispatch({
+          type: actions.LOGIN_MAXIMUM_EXCEEDED,
+          message: error.translation_key
+        });
       } else {
         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});
+//==============================================================================
+// FORGOT PASSWORD
+//==============================================================================
 
-export const requestPasswordReset = email => dispatch => {
+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}})
+  const redirectUri = location.href;
+
+  return coralApi('/account/password/reset', {method: 'POST', body: {email,  loc: redirectUri}})
     .then(() => dispatch(forgotPassowordSuccess()))
-    .catch(error => dispatch(forgotPassowordFailure(error)));
+    .catch((error) => dispatch(forgotPassowordFailure(error)));
 };
 
-// Check Login
+//==============================================================================
+// CHECK LOGIN
+//==============================================================================
 
-const checkLoginRequest = () => ({type: actions.CHECK_LOGIN_REQUEST});
-const checkLoginSuccess = (user, isAdmin) => ({type: actions.CHECK_LOGIN_SUCCESS, user, isAdmin});
-const checkLoginFailure = error => ({type: actions.CHECK_LOGIN_FAILURE, error});
+const checkLoginRequest = () => ({
+  type: actions.CHECK_LOGIN_REQUEST
+});
 
-export const checkLogin = () => dispatch => {
+const checkLoginSuccess = (user, isAdmin) => ({
+  type: actions.CHECK_LOGIN_SUCCESS,
+  user,
+  isAdmin
+});
+
+const checkLoginFailure = (error) => ({
+  type: actions.CHECK_LOGIN_FAILURE,
+  error
+});
+
+export const checkLogin = () => (dispatch) => {
   dispatch(checkLoginRequest());
   return coralApi('/auth')
     .then(({user}) => {
       if (!user) {
+        if (!bowser.safari && !bowser.ios) {
+          Storage.removeItem('token');
+        }
         return dispatch(checkLoginFailure('not logged in'));
       }
 
-      const isAdmin = !!user.roles.filter(i => i === 'ADMIN').length;
-      dispatch(checkLoginSuccess(user, isAdmin));
+      dispatch(checkLoginSuccess(user));
     })
-    .catch(error => {
+    .catch((error) => {
       console.error(error);
       dispatch(checkLoginFailure(`${error.translation_key}`));
     });
 };
-
-// LogOut Actions
-
-const logOutRequest = () => ({type: actions.LOGOUT_REQUEST});
-const logOutSuccess = () => ({type: actions.LOGOUT_SUCCESS});
-const logOutFailure = () => ({type: actions.LOGOUT_FAILURE});
-
-export const logout = () => dispatch => {
-  dispatch(logOutRequest());
-  return coralApi('/auth', {method: 'DELETE'})
-    .then(() => dispatch(logOutSuccess()))
-    .catch(error => dispatch(logOutFailure(error)));
-};

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

@@ -14,9 +14,9 @@ import {
   HIDE_SUSPENDUSER_DIALOG
 } from '../constants/community';
 
-import coralApi from '../../../coral-framework/helpers/response';
+import coralApi from '../../../coral-framework/helpers/request';
 
-export const fetchAccounts = (query = {}) => dispatch => {
+export const fetchAccounts = (query = {}) => (dispatch) => {
 
   dispatch(requestFetchAccounts());
   coralApi(`/users?${qs.stringify(query)}`)
@@ -30,14 +30,14 @@ export const fetchAccounts = (query = {}) => dispatch => {
         totalPages
       });
     })
-    .catch(error => dispatch({type: FETCH_COMMENTERS_FAILURE, error}));
+    .catch((error) => dispatch({type: FETCH_COMMENTERS_FAILURE, error}));
 };
 
 const requestFetchAccounts = () => ({
   type: FETCH_COMMENTERS_REQUEST
 });
 
-export const updateSorting = sort => ({
+export const updateSorting = (sort) => ({
   type: SORT_UPDATE,
   sort
 });

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

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

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

@@ -1,18 +1,18 @@
-import coralApi from 'coral-framework/helpers/response';
+import coralApi from 'coral-framework/helpers/request';
 import * as actions from '../constants/install';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
 
 export const nextStep = () => ({type: actions.NEXT_STEP});
 export const previousStep = () => ({type: actions.PREVIOUS_STEP});
-export const goToStep = step => ({type: actions.GO_TO_STEP, 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 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 hasError = (error) => ({type: actions.HAS_ERROR, error});
 const clearErrors = () => ({type: actions.CLEAR_ERRORS});
 
 const validation = (formData, dispatch, next) => {
@@ -21,11 +21,11 @@ const validation = (formData, dispatch, next) => {
   }
 
   const validKeys = Object.keys(formData)
-    .filter(name => name !== 'domains');
+    .filter((name) => name !== 'domains');
 
   // Required Validation
   const empty = validKeys
-  .filter(name => {
+  .filter((name) => {
     const cond = !formData[name].length;
 
     if (cond) {
@@ -45,7 +45,7 @@ const validation = (formData, dispatch, next) => {
 
   // RegExp Validation
   const validation = validKeys
-    .filter(name => {
+    .filter((name) => {
       const cond = !validate[name](formData[name]);
       if (cond) {
 
@@ -88,7 +88,7 @@ export const finishInstall = () => (dispatch, getState) => {
       dispatch(installSuccess());
       dispatch(nextStep());
     })
-    .catch(error => {
+    .catch((error) => {
       console.error(error);
       dispatch(installFailure(`${error.translation_key}`));
     });
@@ -99,10 +99,10 @@ export const updateUserFormData = (name, value) => ({type: actions.UPDATE_FORMDA
 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});
+const checkInstallSuccess = (installed) => ({type: actions.CHECK_INSTALL_SUCCESS, installed});
+const checkInstallFailure = (error) => ({type: actions.CHECK_INSTALL_FAILURE, error});
 
-export const checkInstall = next => dispatch => {
+export const checkInstall = (next) => (dispatch) => {
   dispatch(checkInstallRequest());
   coralApi('/setup')
     .then(({installed}) => {
@@ -111,7 +111,7 @@ export const checkInstall = next => dispatch => {
         next();
       }
     })
-    .catch(error => {
+    .catch((error) => {
       console.error(error);
       dispatch(checkInstallFailure(`${error.translation_key}`));
     });

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

@@ -1,11 +1,17 @@
 import * as actions from 'constants/moderation';
 
-export const toggleModal = open => ({type: actions.TOGGLE_MODAL, open});
+export const toggleModal = (open) => ({type: actions.TOGGLE_MODAL, open});
 export const singleView = () => ({type: actions.SINGLE_VIEW});
 
 // Ban User Dialog
-export const showBanUserDialog = (user, commentId, showRejectedNote) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId, showRejectedNote});
-export const hideBanUserDialog = (showDialog) => ({type: actions.HIDE_BANUSER_DIALOG, showDialog});
+export const showBanUserDialog = (user, commentId, commentStatus, showRejectedNote) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId, commentStatus, showRejectedNote});
+export const hideBanUserDialog = () => ({type: actions.HIDE_BANUSER_DIALOG});
+
+// Suspend User Dialog
+export const showSuspendUserDialog = (userId, username, commentId, commentStatus) =>
+  ({type: actions.SHOW_SUSPEND_USER_DIALOG, userId, username, commentId, commentStatus});
+
+export const hideSuspendUserDialog = () => ({type: actions.HIDE_SUSPEND_USER_DIALOG});
 
 // hide shortcuts note
 export const hideShortcutsNote = () => {
@@ -18,3 +24,30 @@ export const hideShortcutsNote = () => {
 
   return {type: actions.HIDE_SHORTCUTS_NOTE};
 };
+
+export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
+export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
+
+export const setSortOrder = (order) => ({
+  type: actions.SET_SORT_ORDER,
+  order
+});
+
+export const changeUserDetailStatuses = (tab) => {
+  let statuses;
+  if (tab === 'all') {
+    statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'];
+  } else if (tab === 'rejected') {
+    statuses = ['REJECTED'];
+  }
+  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
+};
+
+export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
+
+export const toggleSelectCommentInUserDetail = (id, active) => {
+  return {
+    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
+    id
+  };
+};

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

@@ -1,4 +1,4 @@
-import coralApi from '../../../coral-framework/helpers/response';
+import coralApi from '../../../coral-framework/helpers/request';
 
 export const SETTINGS_LOADING = 'SETTINGS_LOADING';
 export const SETTINGS_RECEIVED = 'SETTINGS_RECEIVED';
@@ -13,19 +13,19 @@ export const SAVE_SETTINGS_FAILED = 'SAVE_SETTINGS_FAILED';
 export const WORDLIST_UPDATED = 'WORDLIST_UPDATED';
 export const DOMAINLIST_UPDATED = 'DOMAINLIST_UPDATED';
 
-export const fetchSettings = () => dispatch => {
+export const fetchSettings = () => (dispatch) => {
   dispatch({type: SETTINGS_LOADING});
   coralApi('/settings')
-    .then(settings => {
+    .then((settings) => {
       dispatch({type: SETTINGS_RECEIVED, settings});
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch({type: SETTINGS_FETCH_ERROR, error});
     });
 };
 
 // for updating top-level settings
-export const updateSettings = settings => {
+export const updateSettings = (settings) => {
   return {type: SETTINGS_UPDATED, settings};
 };
 
@@ -48,7 +48,7 @@ export const saveSettingsToServer = () => (dispatch, getState) => {
     .then(() => {
       dispatch({type: SAVE_SETTINGS_SUCCESS, settings});
     })
-    .catch(error => {
+    .catch((error) => {
       dispatch({type: SAVE_SETTINGS_FAILED, error});
     });
 };

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

@@ -1,4 +1,4 @@
-import coralApi from '../../../coral-framework/helpers/response';
+import coralApi from '../../../coral-framework/helpers/request';
 import * as userTypes from '../constants/users';
 
 /**
@@ -9,8 +9,8 @@ export const userStatusUpdate = (status, userId, commentId) => {
   return (dispatch) => {
     dispatch({type: userTypes.UPDATE_STATUS_REQUEST});
     return coralApi(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
-      .then(res => dispatch({type: userTypes.UPDATE_STATUS_SUCCESS, res}))
-      .catch(error => dispatch({type: userTypes.UPDATE_STATUS_FAILURE, error}));
+      .then((res) => dispatch({type: userTypes.UPDATE_STATUS_SUCCESS, res}))
+      .catch((error) => dispatch({type: userTypes.UPDATE_STATUS_FAILURE, error}));
   };
 };
 
@@ -18,7 +18,7 @@ export const userStatusUpdate = (status, userId, commentId) => {
 export const sendNotificationEmail = (userId, subject, body) => {
   return (dispatch) => {
     return coralApi(`/users/${userId}/email`, {method: 'POST', body: {subject, body}})
-      .catch(error => dispatch({type: userTypes.USER_EMAIL_FAILURE, error}));
+      .catch((error) => dispatch({type: userTypes.USER_EMAIL_FAILURE, error}));
   };
 };
 
@@ -26,6 +26,6 @@ export const sendNotificationEmail = (userId, subject, body) => {
 export const enableUsernameEdit = (userId) => {
   return (dispatch) => {
     return coralApi(`/users/${userId}/username-enable`, {method: 'POST'})
-      .catch(error => dispatch({type: userTypes.USERNAME_ENABLE_FAILURE, error}));
+      .catch((error) => dispatch({type: userTypes.USERNAME_ENABLE_FAILURE, error}));
   };
 };

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

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

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

@@ -0,0 +1,53 @@
+.button {
+  -webkit-transform: scale(.8);
+  transform: scale(.8);
+  margin: 0;
+}
+
+.root {
+  color: black;
+  > :global(.mdl-menu__container) {
+    margin-left: 10px;
+    > :global(.mdl-menu__outline) {
+      box-shadow: none;
+    }
+  }
+}
+
+.buttonOpen {
+  box-shadow: none;
+  color: white;
+  background-color: #616161;
+}
+
+.arrowIcon {
+  margin-left: 6px;
+  margin-right: 0;
+  vertical-align: middle;
+  margin-right: 0;
+  font-size: 14px;
+}
+
+.menu {
+  padding: 0;
+}
+
+.menuItem {
+  background-color: #2a2a2a;
+  color: white;
+  &:first-child {
+    margin-bottom: 1px;
+    border-radius: 2px 2px 0px 0px;
+  }
+  &:last-child {
+    border-radius: 0px 0px 2px 2px;
+  }
+  &:hover, &:active, &:focus {
+    background-color: #767676;
+  }
+  &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active {
+    background-color: #262626;
+    color: rgba(255, 255, 255, 0.5);
+  }
+}
+

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

@@ -0,0 +1,62 @@
+import React, {PropTypes} from 'react';
+import {Button, Icon} from 'coral-ui';
+import {Menu} from 'react-mdl';
+import cn from 'classnames';
+import {findDOMNode} from 'react-dom';
+import styles from './ActionsMenu.css';
+
+import t from 'coral-framework/services/i18n';
+
+let count = 0;
+
+class ActionsMenu extends React.Component {
+  id = `actions-dropdown-${count++}`;
+  menu = null;
+  state = {open: false};
+  timeout = null;
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  handleRef = (ref) => {
+    this.menu = ref ? findDOMNode(ref).parentNode : null;
+  }
+
+  syncOpenState = () => {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(() => {
+      this.setState({open: this.menu.className.indexOf('is-visible') >= 0});
+    }, 150);
+  };
+
+  render() {
+    return (
+      <div className={styles.root} onBlur={this.syncOpenState} >
+        <Button
+          cStyle='actions'
+          className={cn(styles.button, {[styles.buttonOpen]: this.state.open})}
+          disabled={false}
+          id={this.id}
+          onClick={this.syncOpenState}
+          icon={this.props.icon}
+          raised>
+          {t('modqueue.actions')}
+          <Icon
+            name={this.state.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
+            className={styles.arrowIcon}
+          />
+        </Button>
+        <Menu target={this.id} className={styles.menu} ref={this.handleRef}>
+          {this.props.children}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+ActionsMenu.propTypes = {
+  icon: PropTypes.string,
+};
+
+export default ActionsMenu;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import cn from 'classnames';
+import {MenuItem} from 'react-mdl';
+import styles from './ActionsMenu.css';
+
+const ActionsMenuItem = (props) =>
+  <MenuItem className={cn(styles.menuItem, props.className)} {...props} />;
+
+export default ActionsMenuItem;

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

@@ -2,10 +2,8 @@ import React, {PropTypes} from 'react';
 import Layout from 'coral-admin/src/components/ui/Layout';
 import styles from './NotFound.css';
 import {Button, TextField, Alert, Success} from 'coral-ui';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
+import t from 'coral-framework/services/i18n';
 import Recaptcha from 'react-recaptcha';
-const lang = new I18n(translations);
 
 class AdminLogin extends React.Component {
 
@@ -14,7 +12,7 @@ class AdminLogin extends React.Component {
     this.state = {email: '', password: '', requestPassword: false};
   }
 
-  handleSignIn = e => {
+  handleSignIn = (e) => {
     e.preventDefault();
     this.props.handleLogin(this.state.email, this.state.password);
   }
@@ -28,7 +26,7 @@ class AdminLogin extends React.Component {
     this.props.handleLogin(this.state.email, this.state.password, recaptchaResponse);
   }
 
-  handleRequestPassword = e => {
+  handleRequestPassword = (e) => {
     e.preventDefault();
     this.props.requestPasswordReset(this.state.email);
   }
@@ -37,15 +35,15 @@ class AdminLogin extends React.Component {
     const {errorMessage, loginMaxExceeded, recaptchaPublic} = this.props;
     const signInForm = (
       <form onSubmit={this.handleSignIn}>
-        {errorMessage && <Alert>{lang.t(`errors.${errorMessage}`)}</Alert>}
+        {errorMessage && <Alert>{t(`error.${errorMessage}`)}</Alert>}
         <TextField
           label='Email Address'
           value={this.state.email}
-          onChange={e => this.setState({email: e.target.value})} />
+          onChange={(e) => this.setState({email: e.target.value})} />
         <TextField
           label='Password'
           value={this.state.password}
-          onChange={e => this.setState({password: e.target.value})}
+          onChange={(e) => this.setState({password: e.target.value})}
           type='password' />
         <div style={{height: 10}}></div>
         <Button
@@ -54,7 +52,7 @@ class AdminLogin extends React.Component {
           full
           onClick={this.handleSignIn}>Sign In</Button>
         <p className={styles.forgotPasswordCTA}>
-          Forgot your password? <a href="#" className={styles.forgotPasswordLink} onClick={e => {
+          Forgot your password? <a href="#" className={styles.forgotPasswordLink} onClick={(e) => {
             e.preventDefault();
             this.setState({requestPassword: true});
           }}>Request a new one.</a>
@@ -82,7 +80,7 @@ class AdminLogin extends React.Component {
         <TextField
           label='Email Address'
           value={this.state.email}
-          onChange={e => this.setState({email: e.target.value})} />
+          onChange={(e) => this.setState({email: e.target.value})} />
         <Button
           type='submit'
           cStyle='black'

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

@@ -1,16 +1,16 @@
 import React from 'react';
-import {Provider} from 'react-redux';
+import ToastContainer from './ToastContainer';
 import 'material-design-lite';
-import store from 'services/store';
 
 import AppRouter from '../AppRouter';
 
 export default class App extends React.Component {
   render () {
     return (
-      <Provider store={store}>
-        <AppRouter store={store} />
-      </Provider>
+      <div>
+        <ToastContainer />
+        <AppRouter />
+      </div>
     );
   }
 }

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

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

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

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

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

@@ -189,14 +189,22 @@
   width: 140px;
 }
 
+.minimal {
+  width: 45px;
+  min-width: 0;
+  float: left;
+}
+
 .approve__active {
   box-shadow: none;
   color: white;
   background-color: #519954;
+  cursor: not-allowed;
 }
 
 .reject__active, .rejected__active {
   color: white;
   background-color: #D03235;
   box-shadow: none;
+  cursor: not-allowed;
 }

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

@@ -72,7 +72,7 @@ export default class ModerationList extends React.Component {
   // 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 => {
+    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'));

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

@@ -0,0 +1,226 @@
+@keyframes :global(bounceInRight) {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  from {
+    opacity: 0;
+    transform: translate3d(3000px, 0, 0); }
+  60% {
+    opacity: 1;
+    transform: translate3d(-25px, 0, 0); }
+  75% {
+    transform: translate3d(10px, 0, 0); }
+  90% {
+    transform: translate3d(-5px, 0, 0); }
+  to {
+    transform: none; } }
+
+@keyframes :global(bounceOutRight) {
+  20% {
+    opacity: 1;
+    transform: translate3d(-20px, 0, 0); }
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0); } }
+
+@keyframes :global(bounceInLeft) {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  0% {
+    opacity: 0;
+    transform: translate3d(-3000px, 0, 0); }
+  60% {
+    opacity: 1;
+    transform: translate3d(25px, 0, 0); }
+  75% {
+    transform: translate3d(-10px, 0, 0); }
+  90% {
+    transform: translate3d(5px, 0, 0); }
+  to {
+    transform: none; } }
+
+@keyframes :global(bounceOutLeft) {
+  20% {
+    opacity: 1;
+    transform: translate3d(20px, 0, 0); }
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0); } }
+
+@keyframes :global(bounceInUp) {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  from {
+    opacity: 0;
+    transform: translate3d(0, 3000px, 0); }
+  60% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0); }
+  75% {
+    transform: translate3d(0, 10px, 0); }
+  90% {
+    transform: translate3d(0, -5px, 0); }
+  to {
+    transform: translate3d(0, 0, 0); } }
+
+@keyframes :global(bounceOutUp) {
+  20% {
+    transform: translate3d(0, -10px, 0); }
+  40%, 45% {
+    opacity: 1;
+    transform: translate3d(0, 20px, 0); }
+  to {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0); } }
+
+@keyframes :global(bounceInDown) {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -3000px, 0); }
+  60% {
+    opacity: 1;
+    transform: translate3d(0, 25px, 0); }
+  75% {
+    transform: translate3d(0, -10px, 0); }
+  90% {
+    transform: translate3d(0, 5px, 0); }
+  to {
+    transform: none; } }
+
+@keyframes :global(bounceOutDown) {
+  20% {
+    transform: translate3d(0, 10px, 0); }
+  40%, 45% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0); }
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0); } }
+
+@keyframes :global(track-progress) {
+  0% {
+    width: 100%; }
+  100% {
+    width: 0; } }
+
+:global {
+  .bounceOutRight, .toast-exit--top-right, .toast-exit--bottom-right {
+    animation-name: bounceOutRight; }
+
+  .bounceInRight, .toast-enter--top-right, .toast-enter--bottom-right {
+    animation-name: bounceInRight; }
+
+  .bounceInLeft, .toast-enter--top-left, .toast-enter--bottom-left {
+    animation-name: bounceInLeft; }
+
+  .bounceOutLeft, .toast-exit--top-left, .toast-exit--bottom-left {
+    animation-name: bounceOutLeft; }
+
+  .bounceInUp, .toast-enter--bottom-center {
+    animation-name: bounceInUp; }
+  .bounceOutUp, .toast-exit--top-center {
+    animation-name: bounceOutUp; }
+
+  .bounceInDown, .toast-enter--top-center {
+    animation-name: bounceInDown; }
+
+  .bounceOutDown, .toast-exit--bottom-center {
+    animation-name: bounceOutDown; }
+
+  .animated {
+    animation-duration: 0.75s;
+    animation-fill-mode: both; }
+
+  .toastify {
+    z-index: 999;
+    position: fixed;
+    padding: 4px;
+    width: 350px;
+    max-width: 98%;
+    color: #999;
+    box-sizing: border-box; }
+    .toastify--top-left {
+      top: 1em;
+      left: 1em; }
+    .toastify--top-center {
+      top: 1em;
+      left: 50%;
+      margin-left: -175px; }
+    .toastify--top-right {
+      top: 1em;
+      right: 2em; }
+    .toastify--bottom-left {
+      bottom: 1em;
+      left: 1em; }
+    .toastify--bottom-center {
+      bottom: 1em;
+      left: 50%;
+      margin-left: -175px; }
+    .toastify--bottom-right {
+      bottom: 1em;
+      right: 2em; }
+    .toastify__img {
+      float: left;
+      margin-right: 8px;
+      vertical-align: middle; }
+
+  .toastify__close {
+    position: absolute;
+    top: 18px;
+    left: 12px;
+    width: 20px;
+    height: 16px;
+    padding: 0;
+    text-align: center;
+    text-decoration: none;
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    background: transparent;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    opacity: 0.8;
+    transition: .3s ease; }
+    .toastify__close:hover, .toastify__close:focus {
+      opacity: 1;
+    }
+
+  .toastify-content {
+    position: relative;
+    width: 100%;
+    margin-bottom: 12px;
+    padding: 18px 24px 20px 48px;
+    box-sizing: border-box;
+    background: #404040;
+    border-radius: 2px;
+    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1), 0 3px 20px 0 rgba(0, 0, 0, 0.05); }
+    .toastify-content--info {
+      background: #2488cb; }
+    .toastify-content--success {
+      background: #008577; }
+    .toastify-content--warning {
+      background: #ef6c2b; }
+    .toastify-content--error {
+      background: #ef342b; }
+
+  .toastify__body {
+    color: white;
+    font-size: 15px;
+    font-weight: 400;
+  }
+
+  .toastify__progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 4px;
+    z-index: 999;
+    opacity: 0.8;
+    border-radius: 2px;
+    animation: track-progress linear 1;
+    background-color: white;
+  }
+}

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

@@ -0,0 +1,7 @@
+import './ToastContainer.css';
+import {defaultProps} from 'recompose';
+import {ToastContainer} from 'react-toastify';
+
+export default defaultProps({
+  autoClose: 5000,
+})(ToastContainer);

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

@@ -2,42 +2,51 @@ import React, {PropTypes} from 'react';
 import {Navigation, Drawer} from 'react-mdl';
 import {IndexLink, Link} from 'react-router';
 import styles from './Drawer.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import t from 'coral-framework/services/i18n';
+import {can} from 'coral-framework/services/perms';
 
-const CoralDrawer = ({handleLogout, restricted = false}) => (
+const CoralDrawer = ({handleLogout, auth}) => (
   <Drawer className={styles.header}>
-    { !restricted ?
+    { auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
       <div>
         <Navigation className={styles.nav}>
           <IndexLink
             className={styles.navLink}
             to="/admin/dashboard"
             activeClassName={styles.active}>
-            {lang.t('configure.dashboard')}
+            {t('configure.dashboard')}
           </IndexLink>
-          <Link
-            className={styles.navLink}
-            to="/admin/moderate"
+          {
+            can(auth.user, 'MODERATE_COMMENTS') && (
+              <Link
+                className={styles.navLink}
+                to="/admin/moderate"
+                activeClassName={styles.active}>
+                {t('configure.moderate')}
+              </Link>
+            )
+          }
+          <Link className={styles.navLink}
+            to="/admin/stories"
             activeClassName={styles.active}>
-            {lang.t('configure.moderate')}
+            {t('configure.stories')}
           </Link>
           <Link className={styles.navLink}
-                to="/admin/stories"
-                activeClassName={styles.active}>
-            {lang.t('configure.stories')}
-          </Link>
-          <Link className={styles.navLink}
-                to="/admin/community"
-                activeClassName={styles.active}>
-            {lang.t('configure.community')}
-          </Link>
-          <Link
-            className={styles.navLink}
-            to="/admin/configure"
+            to="/admin/community"
             activeClassName={styles.active}>
-            {lang.t('configure.configure')}
+            {t('configure.community')}
           </Link>
+          {
+            can(auth.user, 'UPDATE_CONFIG') &&
+            (
+              <Link
+                className={styles.navLink}
+                to="/admin/configure"
+                activeClassName={styles.active}>
+                {t('configure.configure')}
+              </Link>
+            )
+          }
           <a onClick={handleLogout}>Sign Out</a>
           <span>{`v${process.env.VERSION}`}</span>
         </Navigation>
@@ -50,6 +59,4 @@ CoralDrawer.propTypes = {
   restricted: PropTypes.bool // hide app elements from a logged out user
 };
 
-const lang = new I18n(translations);
-
 export default CoralDrawer;

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

@@ -73,6 +73,8 @@
   font-weight: 500;
   background-color: transparent;
   transition: background-color 200ms;
+  font-weight: 100;
+  letter-spacing: .8;
 
   &:hover {
     background-color: #232323;
@@ -80,6 +82,7 @@
 
   &.active {
     background-color: #232323;
+    font-weight: 400;
   }
 }
 

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

@@ -2,60 +2,76 @@ import React, {PropTypes} from 'react';
 import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
 import {Link, IndexLink} from 'react-router';
 import styles from './Header.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import t from 'coral-framework/services/i18n';
 import {Logo} from './Logo';
+import {can} from 'coral-framework/services/perms';
 
-const CoralHeader = ({handleLogout, restricted = false}) => (
+const CoralHeader = ({
+  handleLogout,
+  showShortcuts = () => {},
+  auth
+}) => (
   <Header className={styles.header}>
     <Logo className={styles.logo} />
-    {
-      !restricted ?
       <div>
-        <Navigation className={styles.nav}>
-          <IndexLink
-            id='dashboardNav'
-            className={styles.navLink}
-            to="/admin/dashboard"
-            activeClassName={styles.active}>
-            {lang.t('configure.dashboard')}
-          </IndexLink>
-          <Link
-            id='moderateNav'
-            className={styles.navLink}
-            to="/admin/moderate"
-            activeClassName={styles.active}>
-            {lang.t('configure.moderate')}
-          </Link>
-          <Link
-            id='streamsNav'
-            className={styles.navLink}
-            to="/admin/stories"
-            activeClassName={styles.active}>
-            {lang.t('configure.stories')}
-          </Link>
-          <Link
-            id='communityNav'
-            className={styles.navLink}
-            to="/admin/community"
-            activeClassName={styles.active}>
-            {lang.t('configure.community')}
-          </Link>
-          <Link
-            id='configureNav'
-            className={styles.navLink}
-            to="/admin/configure"
-            activeClassName={styles.active}>
-            {lang.t('configure.configure')}
-          </Link>
-        </Navigation>
+        {
+          auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
+          <Navigation className={styles.nav}>
+            <IndexLink
+              id='dashboardNav'
+              className={styles.navLink}
+              to="/admin/dashboard"
+              activeClassName={styles.active}>
+              {t('configure.dashboard')}
+            </IndexLink>
+            {
+              can(auth.user, 'MODERATE_COMMENTS') && (
+                <Link
+                  id='moderateNav'
+                  className={styles.navLink}
+                  to="/admin/moderate"
+                  activeClassName={styles.active}>
+                  {t('configure.moderate')}
+                </Link>
+              )
+            }
+            <Link
+              id='streamsNav'
+              className={styles.navLink}
+              to="/admin/stories"
+              activeClassName={styles.active}>
+              {t('configure.stories')}
+            </Link>
+            <Link
+              id='communityNav'
+              className={styles.navLink}
+              to="/admin/community"
+              activeClassName={styles.active}>
+              {t('configure.community')}
+            </Link>
+            {
+              can(auth.user, 'UPDATE_CONFIG') && (
+                <Link
+                  id='configureNav'
+                  className={styles.navLink}
+                  to="/admin/configure"
+                  activeClassName={styles.active}>
+                  {t('configure.configure')}
+                </Link>
+              )
+            }
+          </Navigation>
+          :
+          null
+        }
         <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>
+                  <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                  <MenuItem onClick={handleLogout}>{t('configure.sign_out')}</MenuItem>
                 </Menu>
               </div>
             </li>
@@ -65,17 +81,13 @@ const CoralHeader = ({handleLogout, restricted = false}) => (
           </ul>
         </div>
       </div>
-    :
-    null
-  }
   </Header>
 );
 
 CoralHeader.propTypes = {
-  handleLogout: PropTypes.func.isRequired,
-  restricted: PropTypes.bool // hide elemnts from a user that's logged out
+  auth: PropTypes.object,
+  showShortcuts: PropTypes.func,
+  handleLogout: PropTypes.func.isRequired
 };
 
-const lang = new I18n(translations);
-
 export default CoralHeader;

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

@@ -4,9 +4,17 @@ import Header from './Header';
 import Drawer from './Drawer';
 import styles from './Layout.css';
 
-const Layout = ({children, handleLogout = () => {}, restricted = false, ...props}) => (
+const Layout = ({
+  children,
+  handleLogout = () => {},
+  toggleShortcutModal,
+  restricted = false,
+  ...props}) => (
   <LayoutMDL fixedDrawer>
-    <Header handleLogout={handleLogout} restricted={restricted} {...props} />
+    <Header
+      handleLogout={handleLogout}
+      showShortcuts={toggleShortcutModal}
+      {...props} />
     <Drawer handleLogout={handleLogout} restricted={restricted} {...props} />
     <div className={styles.layout}>
       {children}
@@ -16,6 +24,7 @@ const Layout = ({children, handleLogout = () => {}, restricted = false, ...props
 
 Layout.propTypes = {
   handleLogout: PropTypes.func,
+  toggleShortcutModal: PropTypes.func,
   restricted: PropTypes.bool // hide elements from a user that's logged out
 };
 

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

@@ -2,11 +2,7 @@ export const CHECK_LOGIN_REQUEST = 'CHECK_LOGIN_REQUEST';
 export const CHECK_LOGIN_SUCCESS = 'CHECK_LOGIN_SUCCESS';
 export const CHECK_LOGIN_FAILURE = 'CHECK_LOGIN_FAILURE';
 
-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 LOGOUT = 'LOGOUT';
 
 export const LOGIN_REQUEST = 'LOGIN_REQUEST';
 export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';

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

@@ -3,3 +3,12 @@ export const SINGLE_VIEW = 'SINGLE_VIEW';
 export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
 export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
 export const HIDE_SHORTCUTS_NOTE = 'HIDE_SHORTCUTS_NOTE';
+export const SHOW_SUSPEND_USER_DIALOG = 'SHOW_SUSPEND_USER_DIALOG';
+export const HIDE_SUSPEND_USER_DIALOG = 'HIDE_SUSPEND_USER_DIALOG';
+export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
+export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
+export const SET_SORT_ORDER = 'MODERATION_SET_SORT_ORDER';
+export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
+export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
+export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
+export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,85 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import Layout from '../components/ui/Layout';
+import {fetchConfig} from '../actions/config';
+import AdminLogin from '../components/AdminLogin';
+import {logout} from 'coral-framework/actions/auth';
+import {FullLoading} from '../components/FullLoading';
+import {toggleModal as toggleShortcutModal} from '../actions/moderation';
+import {checkLogin, handleLogin, requestPasswordReset} from '../actions/auth';
+import {can} from 'coral-framework/services/perms';
+
+class LayoutContainer extends Component {
+  componentWillMount() {
+    const {checkLogin, fetchConfig} = this.props;
+
+    checkLogin();
+    fetchConfig();
+  }
+  render() {
+    const {
+      user,
+      loggedIn,
+      loadingUser,
+      loginError,
+      loginMaxExceeded,
+      passwordRequestSuccess
+    } = this.props.auth;
+
+    const {
+      handleLogout,
+      toggleShortcutModal,
+      TALK_RECAPTCHA_PUBLIC
+    } = this.props;
+    if (loadingUser) {
+      return <FullLoading />;
+    }
+    if (!loggedIn) {
+      return (
+        <AdminLogin
+          loginMaxExceeded={loginMaxExceeded}
+          handleLogin={this.props.handleLogin}
+          requestPasswordReset={this.props.requestPasswordReset}
+          passwordRequestSuccess={passwordRequestSuccess}
+          recaptchaPublic={TALK_RECAPTCHA_PUBLIC}
+          errorMessage={loginError}
+        />
+      );
+    }
+    if (can(user, 'ACCESS_ADMIN') && loggedIn) {
+      return (
+        <Layout
+          handleLogout={handleLogout}
+          toggleShortcutModal={toggleShortcutModal}
+          {...this.props}
+        />
+      );
+    } else if (loggedIn) {
+      return (
+        <Layout {...this.props}>
+          <p>This page is for team use only. Please contact an administrator if you want to join this team.</p>
+        </Layout>
+      );
+    }
+    return <FullLoading />;
+  }
+}
+
+const mapStateToProps = (state) => ({
+  auth: state.auth.toJS(),
+  TALK_RECAPTCHA_PUBLIC: state.config
+    .get('data')
+    .get('TALK_RECAPTCHA_PUBLIC', null)
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  checkLogin: () => dispatch(checkLogin()),
+  fetchConfig: () => dispatch(fetchConfig()),
+  handleLogin: (username, password, recaptchaResponse) =>
+    dispatch(handleLogin(username, password, recaptchaResponse)),
+  requestPasswordReset: (email) => dispatch(requestPasswordReset(email)),
+  toggleShortcutModal: (toggle) => dispatch(toggleShortcutModal(toggle)),
+  handleLogout: () => dispatch(logout())
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(LayoutContainer);

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

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

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

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

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

@@ -1,112 +0,0 @@
-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';
-import {getActionSummary} from 'coral-framework/utils';
-
-const linkify = new Linkify();
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
-const lang = new I18n(translations);
-
-const Comment = ({actions = [], comment, ...props}) => {
-  const links = linkify.getMatches(comment.body);
-  const linkText = links ? links.map(link => link.raw) : [];
-  const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
-  const flagActions = comment.actions && comment.actions.filter(a => a.__typename === 'FlagAction');
-  let commentType = '';
-  if (comment.status === 'PREMOD') {
-    commentType = 'premod';
-  } else if (flagActions && flagActions.length) {
-    commentType = 'flagged';
-  }
-
-  return (
-    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem}`}>
-      <div className={styles.container}>
-        <div className={styles.itemHeader}>
-          <div className={styles.author}>
-            <span>
-              {comment.user.name}
-            </span>
-            <span className={styles.created}>
-              {timeago().format(comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
-            </span>
-            <BanUserButton user={comment.user} onClick={() => props.showBanUserDialog(comment.user, comment.id, comment.status !== 'REJECTED')} />
-            <CommentType type={commentType} />
-          </div>
-          {comment.user.status === 'banned' ?
-            <span className={styles.banned}>
-              <Icon name='error_outline'/>
-              {lang.t('comment.banned_user')}
-            </span>
-            : null}
-        </div>
-        <div className={styles.moderateArticle}>
-          Story: {comment.asset.title}
-          {!props.currentAsset && (
-            <Link to={`/admin/moderate/${comment.asset.id}`}>Moderate →</Link>
-          )}
-        </div>
-        <div className={styles.itemBody}>
-          <p className={styles.body}>
-            <Highlighter
-              searchWords={[...props.suspectWords, ...props.bannedWords, ...linkText]}
-              textToHighlight={comment.body} />
-          </p>
-          <div className={styles.sideActions}>
-            {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
-            <div className={`actions ${styles.actions}`}>
-              {actions.map((action, i) =>
-                <ActionButton key={i}
-                              type={action}
-                              user={comment.user}
-                              status={comment.status}
-                              acceptComment={() => props.acceptComment({commentId: comment.id})}
-                              rejectComment={() => props.rejectComment({commentId: comment.id})}
-                />
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-      {
-        flagActions && flagActions.length
-        ? <FlagBox actions={flagActions} actionSummaries={flagActionSummaries} />
-        : null
-      }
-    </li>
-  );
-};
-
-Comment.propTypes = {
-  acceptComment: PropTypes.func.isRequired,
-  rejectComment: PropTypes.func.isRequired,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
-  currentAsset: PropTypes.object,
-  comment: PropTypes.shape({
-    body: PropTypes.string.isRequired,
-    action_summaries: PropTypes.array,
-    actions: PropTypes.array,
-    created_at: PropTypes.string.isRequired,
-    user: PropTypes.shape({
-      status: PropTypes.string
-    }),
-    asset: PropTypes.shape({
-      title: PropTypes.string,
-      id: PropTypes.string
-    })
-  })
-};
-
-export default Comment;

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

@@ -1,12 +0,0 @@
-import React, {PropTypes} from 'react';
-import styles from './CommentCount.css';
-
-const CommentCount = props => (
-  <span className={styles.count}>{props.count}</span>
-);
-
-CommentCount.propTypes = {
-  count: PropTypes.number.isRequired
-};
-
-export default CommentCount;

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,107 +0,0 @@
-import {graphql} from 'react-apollo';
-import SET_USER_STATUS from './setUserStatus.graphql';
-import SET_COMMENT_STATUS from './setCommentStatus.graphql';
-import SUSPEND_USER from './suspendUser.graphql';
-
-export const banUser = graphql(SET_USER_STATUS, {
-  props: ({mutate}) => ({
-    banUser: ({userId}) => {
-      return mutate({
-        variables: {
-          userId,
-          status: 'BANNED'
-        },
-        refetchQueries: ['Users']
-      });
-    }}),
-});
-
-export const setUserStatus = graphql(SET_USER_STATUS, {
-  props: ({mutate}) => ({
-    approveUser: ({userId}) => {
-      return mutate({
-        variables: {
-          userId,
-          status: 'APPROVED'
-        },
-        refetchQueries: ['Users']
-      });
-    }
-  })
-});
-
-export const suspendUser = graphql(SUSPEND_USER, {
-  props: ({mutate}) => ({
-    suspendUser: ({userId, message}) => {
-      return mutate({
-        variables: {
-          userId,
-          message
-        },
-        refetchQueries: ['Users']
-      });
-    }
-  })
-});
-
-export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
-  props: ({mutate}) => ({
-    acceptComment: ({commentId}) => {
-      return mutate({
-        variables: {
-          commentId,
-          status: 'ACCEPTED'
-        },
-        updateQueries: {
-          ModQueue: (oldData) => {
-            const premod = oldData.premod.filter(c => c.id !== commentId);
-            const flagged = oldData.flagged.filter(c => c.id !== commentId);
-            const rejected = oldData.rejected.filter(c => c.id !== commentId);
-            const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
-            const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
-            const rejectedCount = rejected.length < oldData.rejected.length ? oldData.rejectedCount - 1 : oldData.rejectedCount;
-
-            return {
-              ...oldData,
-              premodCount,
-              flaggedCount,
-              rejectedCount,
-              premod,
-              flagged,
-              rejected,
-            };
-          }
-        }
-      });
-    },
-    rejectComment: ({commentId}) => {
-      return mutate({
-        variables: {
-          commentId,
-          status: 'REJECTED'
-        },
-        updateQueries: {
-          ModQueue: (oldData) => {
-            const comment = oldData.premod.concat(oldData.flagged).filter(c => c.id === commentId)[0];
-            const rejected = [comment].concat(oldData.rejected);
-            const premod = oldData.premod.filter(c => c.id !== commentId);
-            const flagged = oldData.flagged.filter(c => c.id !== commentId);
-            const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
-            const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
-            const rejectedCount = oldData.rejectedCount + 1;
-
-            return {
-              ...oldData,
-              premodCount,
-              flaggedCount,
-              rejectedCount,
-              premod,
-              flagged,
-              rejected
-            };
-          }
-        }
-      });
-    }
-  })
-});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

client/coral-admin/src/index.js

@@ -8,6 +8,11 @@ import store from './services/store';
 import App from './components/App';
 
 import 'react-mdl/extra/material.js';
+import './graphql';
+import {loadPluginsTranslations, injectPluginsReducers} from 'coral-framework/helpers/plugins';
+
+loadPluginsTranslations();
+injectPluginsReducers();
 
 render(
   <ApolloProvider client={client} store={store}>

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

@@ -4,7 +4,6 @@ import * as actions from '../constants/auth';
 const initialState = Map({
   loggedIn: false,
   user: null,
-  isAdmin: false,
   loginError: null,
   loginMaxExceeded: false,
   passwordRequestSuccess: null
@@ -24,12 +23,9 @@ export default function auth (state = initialState, action) {
     return state
       .set('loggedIn', true)
       .set('loadingUser', false)
-      .set('isAdmin', action.isAdmin)
       .set('user', action.user);
-  case actions.LOGOUT_SUCCESS:
+  case actions.LOGOUT:
     return initialState;
-  case actions.LOGIN_REQUEST:
-    return state.set('loginError', null);
   case actions.LOGIN_SUCCESS:
     return state.set('loginMaxExceeded', false).set('loginError', null);
   case actions.LOGIN_FAILURE:

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

@@ -53,17 +53,17 @@ export default function community (state = initialState, action) {
   }
   case SET_ROLE : {
     const commenters = state.get('accounts');
-    const idx = commenters.findIndex(el => el.id === action.id);
+    const idx = commenters.findIndex((el) => el.id === action.id);
 
     commenters[idx].roles[0] = action.role;
-    return state.set('accounts', commenters.map(id => id));
+    return state.set('accounts', commenters.map((id) => id));
   }
   case SET_COMMENTER_STATUS: {
     const commenters = state.get('accounts');
-    const idx = commenters.findIndex(el => el.id === action.id);
+    const idx = commenters.findIndex((el) => el.id === action.id);
 
     commenters[idx].status = action.status;
-    return state.set('accounts', commenters.map(id => id));
+    return state.set('accounts', commenters.map((id) => id));
 
   }
   case SORT_UPDATE :

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

@@ -13,5 +13,5 @@ export default {
   community,
   moderation,
   install,
-  config
+  config,
 };

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

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

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

@@ -1,8 +1,10 @@
 import React from 'react';
-import styles from '../Community.css';
-import BanUserButton from '../../../components/BanUserButton';
+import styles from './Community.css';
+import BanUserButton from './BanUserButton';
 import {Button} from 'coral-ui';
-import {menuActionsMap} from '../../../containers/ModerationQueue/helpers/moderationQueueActionsMap';
+import {menuActionsMap} from '../../Moderation/helpers/moderationQueueActionsMap';
+
+import t from 'coral-framework/services/i18n';
 
 const ActionButton = ({type = '', user, ...props}) => {
   if (type === 'BAN') {
@@ -17,7 +19,7 @@ const ActionButton = ({type = '', user, ...props}) => {
       onClick={() => {
         type === 'APPROVE' ? props.approveUser({userId: user.id}) : props.showSuspendUserDialog({user: user});
       }}
-    >{menuActionsMap[type].text}</Button>
+    >{t(`modqueue.${menuActionsMap[type].text}`)}</Button>
   );
 };
 

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

@@ -2,9 +2,7 @@ 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);
+import t from 'coral-framework/services/i18n';
 
 const BanUserButton = ({user, ...props}) => (
   <div className={styles.ban}>
@@ -14,7 +12,7 @@ const BanUserButton = ({user, ...props}) => (
       onClick={props.onClick}
       raised>
       <Icon name='not_interested' />
-      {lang.t('comment.ban_user')}
+      {t('comment.ban_user')}
     </Button>
   </div>
 );

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

@@ -4,10 +4,7 @@ import styles from './BanUserDialog.css';
 
 import Button from 'coral-ui/components/Button';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
-
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
   <Dialog
@@ -16,19 +13,19 @@ const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
     open={open}
     onClose={handleClose}
     onCancel={handleClose}
-    title={lang.t('community.ban_user')}>
+    title={t('community.ban_user')}>
     <span className={styles.close} onClick={handleClose}>×</span>
     <div>
       <div className={styles.header}>
-        <h2>{lang.t('community.ban_user')}</h2>
+        <h2>{t('community.ban_user')}</h2>
       </div>
       <div className={styles.separator}>
-        <h3>{lang.t('community.are_you_sure', user.username)}</h3>
-        <i>{lang.t('community.note')}</i>
+        <h3>{t('community.are_you_sure', user.username)}</h3>
+        <i>{t('community.note')}</i>
       </div>
       <div className={styles.buttons}>
         <Button cStyle="cancel" className={styles.cancel} onClick={handleClose} raised>
-          {lang.t('community.cancel')}
+          {t('community.cancel')}
         </Button>
         <Button
           cStyle="black" className={styles.ban}
@@ -38,7 +35,7 @@ const BanUserDialog = ({open, handleClose, handleBanUser, user}) => (
             });
           }}
           raised>
-          {lang.t('community.yes_ban_user')}
+          {t('community.yes_ban_user')}
         </Button>
       </div>
     </div>

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

@@ -1,55 +1,26 @@
 import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {compose} from 'react-apollo';
-
-import {modUserFlaggedQuery} from 'coral-admin/src/graphql/queries';
-import {banUser, setUserStatus, suspendUser} from 'coral-admin/src/graphql/mutations';
-
-import {
-  fetchAccounts,
-  updateSorting,
-  newPage,
-  showBanUserDialog,
-  hideBanUserDialog,
-  showSuspendUserDialog,
-  hideSuspendUserDialog
-} from '../../actions/community';
-
-import CommunityMenu from './components/CommunityMenu';
-import BanUserDialog from './components/BanUserDialog';
-import SuspendUserDialog from './components/SuspendUserDialog';
 
+import CommunityMenu from './CommunityMenu';
+import BanUserDialog from './BanUserDialog';
+import SuspendUserDialog from './SuspendUserDialog';
 import People from './People';
 import FlaggedAccounts from './FlaggedAccounts';
 
-class CommunityContainer extends Component {
+export default class Community extends Component {
 
-  constructor(props) {
-    super(props);
+  state = {
+    searchValue: '',
+    timer: null
+  };
 
-    this.state = {
-      searchValue: '',
-      timer: null
-    };
-
-    this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
-    this.onSearchChange = this.onSearchChange.bind(this);
-    this.onHeaderClickHandler = this.onHeaderClickHandler.bind(this);
-    this.onNewPageHandler = this.onNewPageHandler.bind(this);
-  }
-
-  componentWillMount() {
-    this.props.fetchAccounts({});
-  }
-
-  onKeyDownHandler(e) {
+  onKeyDownHandler = (e) => {
     if (e.key === 'Enter') {
       e.preventDefault();
       this.search();
     }
   }
 
-  onSearchChange(e) {
+  onSearchChange = (e) => {
     const value = e.target.value;
     this.setState((prevState) => {
       prevState.searchValue = value;
@@ -62,6 +33,16 @@ class CommunityContainer extends Component {
     });
   }
 
+  onHeaderClickHandler = (sort) => {
+    this.props.updateSorting(sort);
+    this.search();
+  }
+
+  onNewPageHandler = (page) => {
+    this.props.newPage(page);
+    this.search({page});
+  }
+
   search(query = {}) {
     const {community} = this.props;
 
@@ -71,21 +52,10 @@ class CommunityContainer extends Component {
       asc: community.ascPeople,
       ...query
     });
-
-  }
-
-  onHeaderClickHandler(sort) {
-    this.props.dispatch(updateSorting(sort));
-    this.search();
-  }
-
-  onNewPageHandler(page) {
-    this.props.dispatch(newPage(page));
-    this.search({page});
   }
 
   getTabContent(searchValue, props) {
-    const {community, data} = props;
+    const {community, root: {users}} = props;
     const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
 
     if (activeTab === 'people') {
@@ -108,12 +78,10 @@ class CommunityContainer extends Component {
     return (
       <div>
         <FlaggedAccounts
-          commenters={data.users}
-          isFetching={data.loading}
-          error={data.error}
+          commenters={users}
           showBanUserDialog={props.showBanUserDialog}
           approveUser={props.approveUser}
-          suspendUser={props.suspendUser}
+          rejectUsername={props.rejectUsername}
           showSuspendUserDialog={props.showSuspendUserDialog}
         />
         <BanUserDialog
@@ -126,7 +94,7 @@ class CommunityContainer extends Component {
           open={community.suspendDialog}
           handleClose={props.hideSuspendUserDialog}
           user={community.user}
-          suspendUser={props.suspendUser}
+          rejectUsername={props.rejectUsername}
         />
       </div>
     );
@@ -134,7 +102,6 @@ class CommunityContainer extends Component {
 
   render() {
     const {searchValue} = this.state;
-
     const tab = this.getTabContent(searchValue, this.props);
 
     return (
@@ -148,22 +115,3 @@ class CommunityContainer extends Component {
   }
 }
 
-const mapStateToProps = state => ({
-  community: state.community.toJS()
-});
-
-const mapDispatchToProps = dispatch => ({
-  fetchAccounts: query => dispatch(fetchAccounts(query)),
-  showBanUserDialog: (user) => dispatch(showBanUserDialog(user)),
-  hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
-  showSuspendUserDialog: (user) => dispatch(showSuspendUserDialog(user)),
-  hideSuspendUserDialog: () => dispatch(hideSuspendUserDialog())
-});
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  modUserFlaggedQuery,
-  banUser,
-  setUserStatus,
-  suspendUser
-)(CommunityContainer);

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

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

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

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

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

@@ -1,25 +1,19 @@
 import React from 'react';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
-const lang = new I18n(translations);
-
+import t from 'coral-framework/services/i18n';
 import styles from './Community.css';
-
-import Loading from './Loading';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
-import User from './components/User';
+import User from './User';
 
 const FlaggedAccounts = ({...props}) => {
-  const {commenters, isFetching} = props;
-  const hasResults = !isFetching && commenters && !!commenters.length;
+  const {commenters} = props;
+  const hasResults = commenters && !!commenters.length;
 
 // if (commenter.status === 'PENDING' && commenter.actions.length > 0) {
 
   return (
     <div className={styles.container}>
       <div className={styles.mainFlaggedContent}>
-        { isFetching && <Loading /> }
         {
           hasResults
           ? commenters.map((commenter, index) => {
@@ -34,7 +28,7 @@ const FlaggedAccounts = ({...props}) => {
               suspendUser={props.suspendUser}
               />;
           })
-          : <EmptyCard>{lang.t('community.no-flagged-accounts')}</EmptyCard>
+          : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
         }
       </div>
     </div>

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

@@ -1,36 +1,32 @@
 import React from 'react';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
 
 import styles from './Community.css';
-import Table from './Table';
-import Loading from './Loading';
+import Table from '../containers/Table';
 import {Pager, Icon} from 'coral-ui';
-import EmptyCard from '../../components/EmptyCard';
-
-const lang = new I18n(translations);
+import EmptyCard from '../../../components/EmptyCard';
+import t from 'coral-framework/services/i18n';
 
 const tableHeaders = [
   {
-    title: lang.t('community.username_and_email'),
+    title: t('community.username_and_email'),
     field: 'username'
   },
   {
-    title: lang.t('community.account_creation_date'),
+    title: t('community.account_creation_date'),
     field: 'created_at'
   },
   {
-    title: lang.t('community.status'),
+    title: t('community.status'),
     field: 'status'
   },
   {
-    title: lang.t('community.newsroom_role'),
+    title: t('community.newsroom_role'),
     field: 'role'
   }
 ];
 
-const People = ({isFetching, commenters, searchValue, onSearchChange, ...props}) => {
-  const hasResults = !isFetching && !!commenters.length;
+const People = ({commenters, searchValue, onSearchChange, ...props}) => {
+  const hasResults = !!commenters.length;
   return (
     <div className={styles.container}>
       <div className={styles.leftColumn}>
@@ -42,12 +38,11 @@ const People = ({isFetching, commenters, searchValue, onSearchChange, ...props})
             className={styles.searchBoxInput}
             value={searchValue}
             onChange={onSearchChange}
-            placeholder={lang.t('streams.search')}
+            placeholder={t('streams.search')}
           />
         </div>
       </div>
       <div className={styles.mainContent}>
-        { isFetching && <Loading /> }
         {
           hasResults
           ? <Table
@@ -55,7 +50,7 @@ const People = ({isFetching, commenters, searchValue, onSearchChange, ...props})
               commenters={commenters}
               onHeaderClickHandler={props.onHeaderClickHandler}
             />
-          : <EmptyCard>{lang.t('community.no-results')}</EmptyCard>
+          : <EmptyCard>{t('community.no_results')}</EmptyCard>
         }
         <Pager
           totalPages={props.totalPages}

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

@@ -3,23 +3,20 @@ import React, {Component, PropTypes} from 'react';
 import {Dialog, Button} from 'coral-ui';
 import styles from './SuspendUserDialog.css';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations.json';
-
-const lang = new I18n(translations);
+import t from 'coral-framework/services/i18n';
 
 const stages = [
   {
-    title: 'suspenduser.title_0',
-    description: 'suspenduser.description_0',
+    title: 'suspenduser.title_reject',
+    description: 'suspenduser.description_reject',
     options: {
       'j': 'suspenduser.no_cancel',
       'k': 'suspenduser.yes_suspend'
     }
   },
   {
-    title: 'suspenduser.title_1',
-    description: 'suspenduser.description_1',
+    title: 'suspenduser.title_notify',
+    description: 'suspenduser.description_notify',
     options: {
       'j': 'bandialog.cancel',
       'k': 'suspenduser.send'
@@ -34,11 +31,11 @@ class SuspendUserDialog extends Component  {
   static propTypes = {
     stage: PropTypes.number,
     handleClose: PropTypes.func.isRequired,
-    suspendUser: PropTypes.func.isRequired
+    rejectUsername: PropTypes.func.isRequired
   }
 
   componentDidMount() {
-    this.setState({email: lang.t('suspenduser.email'), about: lang.t('suspenduser.username')});
+    this.setState({email: t('suspenduser.email_message_reject'), about: t('suspenduser.username')});
   }
 
   /*
@@ -46,13 +43,13 @@ class SuspendUserDialog extends Component  {
   * handles the possible actions for that dialog.
   */
   onActionClick = (stage, menuOption) => () => {
-    const {suspendUser, user} = this.props;
+    const {rejectUsername, user} = this.props;
     const {stage} = this.state;
 
     const cancel = this.props.handleClose;
     const next = () => this.setState({stage: stage + 1});
     const suspend = () => {
-      suspendUser({userId: user.user.id, message: this.state.email})
+      rejectUsername({id: user.user.id, message: this.state.email})
       .then(() => {
         this.props.handleClose();
       });
@@ -79,18 +76,18 @@ class SuspendUserDialog extends Component  {
             open={open}
             onClose={handleClose}
             onCancel={handleClose}
-            title={lang.t('suspenduser.title')}>
+            title={t('suspenduser.suspend_user')}>
             <div className={styles.title}>
-              {lang.t(stages[stage].title, lang.t('suspenduser.username'))}
+              {t(stages[stage].title, t('suspenduser.username'))}
             </div>
             <div className={styles.container}>
               <div className={styles.description}>
-                {lang.t(stages[stage].description, lang.t('suspenduser.username'))}
+                {t(stages[stage].description, t('suspenduser.username'))}
               </div>
               {
                 stage === 1 &&
                 <div className={styles.writeContainer}>
-                  <div className={styles.emailMessage}>{lang.t('suspenduser.write_message')}</div>
+                  <div className={styles.emailMessage}>{t('suspenduser.write_message')}</div>
                   <div className={styles.emailContainer}>
                     <textarea
                       rows={5}
@@ -103,7 +100,7 @@ class SuspendUserDialog extends Component  {
               <div className={styles.modalButtons}>
                 {Object.keys(stages[stage].options).map((key, i) => (
                   <Button key={i} onClick={this.onActionClick(stage, i)}>
-                    {lang.t(stages[stage].options[key], lang.t('suspenduser.username'))}
+                    {t(stages[stage].options[key], t('suspenduser.username'))}
                   </Button>
                 ))}
               </div>

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import {SelectField, Option} from 'react-mdl-selectfield';
+import styles from '../components/Community.css';
+import t from 'coral-framework/services/i18n';
+
+export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange}) => (
+  <table className={`mdl-data-table ${styles.dataTable}`}>
+    <thead>
+      <tr>
+        {headers.map((header, i) =>(
+          <th
+          key={i}
+          className="mdl-data-table__cell--non-numeric"
+          onClick={() => onHeaderClickHandler({field: header.field})}>
+            {header.title}
+          </th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {commenters.map((row, i)=> (
+        <tr key={i}>
+          <td className="mdl-data-table__cell--non-numeric">
+            {row.username}
+            <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
+          </td>
+          <td className="mdl-data-table__cell--non-numeric">
+            {row.created_at}
+          </td>
+          <td className="mdl-data-table__cell--non-numeric">
+            <SelectField label={'Select me'} value={row.status || ''}
+              className={styles.selectField}
+              label={t('community.status')}
+              onChange={(status) => onCommenterStatusChange(row.id, status)}>
+              <Option value={'ACTIVE'}>{t('community.active')}</Option>
+              <Option value={'BANNED'}>{t('community.banned')}</Option>
+            </SelectField>
+          </td>
+          <td className="mdl-data-table__cell--non-numeric">
+            <SelectField label={'Select me'} value={row.roles[0] || ''}
+              className={styles.selectField}
+              label={t('community.role')}
+              onChange={(role) => onRoleChange(row.id, role)}>
+              <Option value={''}>.</Option>
+              <Option value={'STAFF'}>{t('community.staff')}</Option>
+              <Option value={'MODERATOR'}>{t('community.moderator')}</Option>
+              <Option value={'ADMIN'}>{t('community.admin')}</Option>
+            </SelectField>
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);

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

@@ -1,15 +1,20 @@
 import React from 'react';
-import styles from '../Community.css';
+import styles from './Community.css';
 
 import ActionButton from './ActionButton';
 
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../../translations.json';
+import t from 'coral-framework/services/i18n';
 
-const lang = new I18n(translations);
+const shortReasons = {
+  'This comment is offensive': t('community.offensive'),
+  'This looks like an ad/marketing': t('community.spam_ads'),
+  'This user is impersonating': t('community.impersonating'),
+  'I don\'t like this username': t('community.dont_like_username'),
+  'Other': t('community.other')
+};
 
 // Render a single user for the list
-const User = props => {
+const User = (props) => {
   const {user, modActionButtons} = props;
   let userStatus = user.status;
 
@@ -35,21 +40,21 @@ const User = props => {
         <div className={styles.itemBody}>
           <div className={styles.body}>
             <div className={styles.flaggedByCount}>
-              <i className="material-icons">flag</i><span className={styles.flaggedByLabel}>{lang.t('community.flags')}({ user.actions.length })</span>:
+              <i className="material-icons">flag</i><span className={styles.flaggedByLabel}>{t('community.flags')}({ user.actions.length })</span>:
                 { user.action_summaries.map(
-                (action, i ) => {
+                (action, i) => {
                   return <span className={styles.flaggedBy} key={i}>
-                    {lang.t(`community.${action.reason}`)} ({action.count})
+                    {shortReasons[action.reason]} ({action.count})
                   </span>;
                 }
               )}
             </div>
             <div className={styles.flaggedReasons}>
               { user.action_summaries.map(
-                (action_sum, i ) => {
+                (action_sum, i) => {
                   return <div key={i}>
                     <span className={styles.flaggedByLabel}>
-                      {lang.t(`community.${action_sum.reason}`)} ({action_sum.count})
+                      {shortReasons[action_sum.reason]} ({action_sum.count})
                     </span>
                     {user.actions.map(
 

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

@@ -0,0 +1,107 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import withQuery from 'coral-framework/hocs/withQuery';
+import {Spinner} from 'coral-ui';
+
+import {withSetUserStatus, withRejectUsername} from 'coral-framework/graphql/mutations';
+
+import {
+  fetchAccounts,
+  updateSorting,
+  newPage,
+  showBanUserDialog,
+  hideBanUserDialog,
+  showSuspendUserDialog,
+  hideSuspendUserDialog
+} from '../../../actions/community';
+
+import Community from '../components/Community';
+
+class CommunityContainer extends Component {
+
+  componentWillMount() {
+    this.props.fetchAccounts({});
+  }
+
+  approveUser = ({userId}) => {
+    return this.props.setUserStatus({userId, status: 'APPROVED'});
+  }
+
+  banUser = ({userId}) => {
+    return this.props.setUserStatus({userId, status: 'BANNED'});
+  }
+
+  render() {
+    if (this.props.data.error) {
+      return <div>{this.props.data.error.message}</div>;
+    }
+
+    if (!('users' in this.props.root)) {
+      return <div><Spinner/></div>;
+    }
+    return (
+      <Community {...this.props} approveUser={this.approveUser} banUser={this.banUser}/>
+    );
+  }
+}
+
+export const withCommunityQuery = withQuery(gql`
+  query CoralAdmin_Community($action_type: ACTION_TYPE) {
+    users(query:{action_type: $action_type}){
+      id
+      username
+      status
+      roles
+      actions{
+        id
+        created_at
+        ... on FlagAction {
+          reason
+          message
+          user {
+            id
+            username
+          }
+        }
+      }
+      action_summaries {
+        count
+        ... on FlagActionSummary {
+          reason
+        }
+      }
+    }
+  }
+`, {
+  options: ({params: {action_type = 'FLAG'}}) => {
+    return {
+      variables: {
+        action_type: action_type
+      }
+    };
+  }
+});
+
+const mapStateToProps = (state) => ({
+  community: state.community.toJS()
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    fetchAccounts,
+    showBanUserDialog,
+    hideBanUserDialog,
+    showSuspendUserDialog,
+    hideSuspendUserDialog,
+    updateSorting,
+    newPage,
+  }, dispatch);
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withCommunityQuery,
+  withSetUserStatus,
+  withRejectUsername,
+)(CommunityContainer);

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

@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose} from 'react-apollo';
+import {setRole, setCommenterStatus} from '../../../actions/community';
+import Table from '../components/Table';
+
+class TableContainer extends Component {
+
+  constructor (props) {
+    super(props);
+  }
+
+  render () {
+    return <Table
+      {...this.props}
+      onRoleChange={this.props.setRole}
+      onCommenterStatusChange={this.props.setCommenterStatus}
+      commenters={this.props.commenters}
+    />;
+  }
+}
+
+const mapStateToProps = (state) => ({
+  commenters: state.community.get('accounts'),
+});
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    setCommenterStatus,
+    setRole,
+  }, dispatch);
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+)(TableContainer);
+

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

@@ -0,0 +1,2 @@
+export {default as Community} from './containers/Community';
+export {default as CommunityLayout} from './components/CommunityLayout';

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

@@ -96,24 +96,27 @@
   }
 }
 
-.charCountTexfield {
-  width: 4em;
-  padding: 0px;
+.inlineTextfield {
   border-color: #ccc;
   border-style: solid;
   border-width: 0px 0px 1px 0px;
-  font-size: 14px;
   text-align: center;
+  font-size: inherit;
+}
+
+.inlineTextfield:focus {
+  outline: none;
+}
+
+.charCountTexfield, .editCommentTimeframeTextfield {
+  width: 4em;
+  padding: 0px;
 }
 
 .charCountTexfieldEnabled {
   border-color: #00796b;
 }
 
-.charCountTexfield:focus {
-  outline: none;
-}
-
 .changedSave {
   background-color: #00796B;
   color: white;

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

@@ -1,60 +1,43 @@
 import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {
-  fetchSettings,
-  updateSettings,
-  saveSettingsToServer,
-  updateWordlist,
-  updateDomainlist
-} from '../../actions/settings';
 
 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 'coral-admin/src/translations.json';
 import StreamSettings from './StreamSettings';
 import ModerationSettings from './ModerationSettings';
 import TechSettings from './TechSettings';
+import t from 'coral-framework/services/i18n';
+import {can} from 'coral-framework/services/perms';
 
-class Configure extends Component {
-  constructor (props) {
-    super(props);
+export default class Configure extends Component {
 
-    this.state = {
-      activeSection: 'stream',
-      changed: false,
-      errors: {}
-    };
-
-    this.changeSection = this.changeSection.bind(this);
-  }
-
-  componentWillMount = () => {
-    this.props.dispatch(fetchSettings());
-  }
+  state = {
+    activeSection: 'stream',
+    changed: false,
+    errors: {}
+  };
 
   saveSettings = () => {
-    this.props.dispatch(saveSettingsToServer());
+    this.props.saveSettingsToServer();
     this.setState({changed: false});
   }
 
-  changeSection(activeSection) {
+  changeSection = (activeSection) => {
     this.setState({activeSection});
   }
 
   onChangeWordlist = (listName, list) => {
     this.setState({changed: true});
-    this.props.dispatch(updateWordlist(listName, list));
+    this.props.updateWordlist(listName, list);
   }
 
   onChangeDomainlist = (listName, list) => {
     this.setState({changed: true});
-    this.props.dispatch(updateDomainlist(listName, list));
+    this.props.updateDomainlist(listName, list);
   }
 
   onSettingUpdate = (setting) => {
     this.setState({changed: true});
-    this.props.dispatch(updateSettings(setting));
+    this.props.updateSettings(setting);
   }
 
   // Sets an arbitrary error string and a boolean state.
@@ -105,11 +88,11 @@ class Configure extends Component {
   getPageTitle (section) {
     switch(section) {
     case 'stream':
-      return lang.t('configure.stream-settings');
+      return t('configure.stream_settings');
     case 'moderation':
-      return lang.t('configure.moderation-settings');
+      return t('configure.moderation_settings');
     case 'tech':
-      return lang.t('configure.tech-settings');
+      return t('configure.tech_settings');
     default:
       return '';
     }
@@ -118,6 +101,11 @@ class Configure extends Component {
   render () {
     const {activeSection} = this.state;
     const section = this.getSection(activeSection);
+    const {auth: {user}} = this.props;
+
+    if (!can(user, 'UPDATE_CONFIG')) {
+      return <p>You must be an administrator to access config settings. Please find the nearest Admin and ask them to level you up!</p>;
+    }
 
     const showSave = Object.keys(this.state.errors).reduce(
       (bool, error) => this.state.errors[error] ? false : bool, this.state.changed);
@@ -127,13 +115,13 @@ class Configure extends Component {
           <div className={styles.leftColumn}>
             <List onChange={this.changeSection} activeItem={activeSection}>
               <Item itemId='stream' icon='speaker_notes'>
-                {lang.t('configure.stream-settings')}
+                {t('configure.stream_settings')}
               </Item>
               <Item itemId='moderation' icon='thumbs_up_down'>
-                {lang.t('configure.moderation-settings')}
+                {t('configure.moderation_settings')}
               </Item>
               <Item itemId='tech' icon='code'>
-                {lang.t('configure.tech-settings')}
+                {t('configure.tech_settings')}
               </Item>
             </List>
             <div className={styles.saveBox}>
@@ -146,7 +134,7 @@ class Configure extends Component {
                   icon='check'
                   full
                 >
-                  {lang.t('configure.save-changes')}
+                  {t('configure.save_changes')}
                 </Button>
               :
                 <Button
@@ -155,7 +143,7 @@ class Configure extends Component {
                   icon='check'
                   full
                 >
-                {lang.t('configure.save-changes')}
+                {t('configure.save_changes')}
                </Button>
             }
             </div>
@@ -170,10 +158,3 @@ class Configure extends Component {
     );
   }
 }
-
-const mapStateToProps = state => ({
-  settings: state.settings.toJS()
-});
-export default connect(mapStateToProps)(Configure);
-
-const lang = new I18n(translations);

client/coral-admin/src/routes/Configure/components/Domainlist.js

@@ -2,24 +2,21 @@ 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);
+import t from 'coral-framework/services/i18n';
 
 const Domainlist = ({domains, onChangeDomainlist}) => {
   return (
     <Card id={styles.domainlist} className={styles.configSetting}>
       <div className={styles.wrapper}>
-        <div className={styles.settingsHeader}>{lang.t('configure.domain-list-title')}</div>
-        <p className={styles.domainlistDesc}>{lang.t('configure.domain-list-text')}</p>
+        <div className={styles.settingsHeader}>{t('configure.domain_list_title')}</div>
+        <p className={styles.domainlistDesc}>{t('configure.domain_list_text')}</p>
         <div className={styles.wrapper}>
           <TagsInput
             value={domains}
             inputProps={{placeholder: 'URL'}}
             addOnPaste={true}
-            pasteSplit={data => data.split(',').map(d => d.trim())}
-            onChange={tags => onChangeDomainlist('whitelist', tags)}
+            pasteSplit={(data) => data.split(',').map((d) => d.trim())}
+            onChange={(tags) => onChangeDomainlist('whitelist', tags)}
           />
         </div>
       </div>

client/coral-admin/src/routes/Configure/components/EmbedLink.js

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import t from 'coral-framework/services/i18n';
 import styles from './Configure.css';
 import {Button, Card} from 'coral-ui';
 
@@ -30,7 +29,7 @@ class EmbedLink extends Component {
       location.protocol,
       '//',
       location.hostname,
-      location.port ? (`:${  window.location.port}`) : ''
+      location.port ? (`:${window.location.port}`) : ''
     ].join('');
     const coralJsUrl = [talkBaseUrl, '/embed.js'].join('');
     const nonce = String(Math.random()).slice(2);
@@ -47,11 +46,11 @@ class EmbedLink extends Component {
       <Card shadow="2" className={styles.configSetting}>
         <div className={styles.wrapper}>
           <div className={styles.settingsHeader}>Embed Comment Stream</div>
-          <p>{lang.t('configure.copy-and-paste')}</p>
+          <p>{t('configure.copy_and_paste')}</p>
           <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
           <div className={styles.actions}>
             <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
-              {lang.t('embedlink.copy')}
+              {t('embedlink.copy')}
             </Button>
             <div className={styles.copiedText}>
               {this.state.copied && 'Copied!'}
@@ -64,5 +63,3 @@ class EmbedLink extends Component {
 }
 
 export default EmbedLink;
-
-const lang = new I18n(translations);

client/coral-admin/src/routes/Configure/components/ModerationSettings.js

@@ -3,9 +3,7 @@ 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);
+import t from 'coral-framework/services/i18n';
 
 const updateModeration = (updateSettings, mod) => () => {
   const moderation = mod === 'PRE' ? 'POST' : 'PRE';
@@ -36,9 +34,9 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
             checked={settings.requireEmailConfirmation} />
         </div>
         <div className={styles.content}>
-          <div className={styles.settingsHeader}>{lang.t('configure.require-email-verification')}</div>
+          <div className={styles.settingsHeader}>{t('configure.require_email_verification')}</div>
           <p className={settings.requireEmailConfirmation ? '' : styles.disabledSettingText}>
-            {lang.t('configure.require-email-verification-text')}
+            {t('configure.require_email_verification_text')}
           </p>
         </div>
       </Card>
@@ -49,9 +47,9 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
             checked={settings.moderation === 'PRE'} />
         </div>
         <div className={styles.content}>
-          <div className={styles.settingsHeader}>{lang.t('configure.enable-pre-moderation')}</div>
+          <div className={styles.settingsHeader}>{t('configure.enable_pre_moderation')}</div>
           <p className={settings.moderation === 'PRE' ? '' : styles.disabledSettingText}>
-            {lang.t('configure.enable-pre-moderation-text')}
+            {t('configure.enable_pre_moderation_text')}
           </p>
         </div>
       </Card>
@@ -62,9 +60,9 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
             checked={settings.premodLinksEnable} />
         </div>
         <div className={styles.content}>
-          <div className={styles.settingsHeader}>{lang.t('configure.enable-premod-links')}</div>
+          <div className={styles.settingsHeader}>{t('configure.enable_premod_links')}</div>
           <p>
-            {lang.t('configure.enable-premod-links-text')}
+            {t('configure.enable_premod_links_text')}
           </p>
         </div>
       </Card>

client/coral-admin/src/routes/Configure/components/StreamSettings.js

@@ -1,7 +1,6 @@
 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 t from 'coral-framework/services/i18n';
 import styles from './Configure.css';
 import {Checkbox, Textfield} from 'react-mdl';
 import {Card, Icon, TextArea} from 'coral-ui';
@@ -62,6 +61,13 @@ const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
   }
 };
 
+const updateEditCommentWindowLength = (updateSettings) => (e) => {
+  const value = e.target.value;
+  const valueAsNumber = parseFloat(value);
+  const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
+  updateSettings({editCommentWindowLength: milliseconds || value});
+};
+
 const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
 
   // just putting this here for shorthand below
@@ -77,23 +83,23 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
             checked={settings.charCountEnable} />
         </div>
         <div className={styles.content}>
-          <div className={styles.settingsHeader}>{lang.t('configure.comment-count-header')}</div>
+          <div className={styles.settingsHeader}>{t('configure.comment_count_header')}</div>
           <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
-            <span>{lang.t('configure.comment-count-text-pre')}</span>
+            <span>{t('configure.comment_count_text_pre')}</span>
             <input type='text'
-              className={`${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
+              className={`${styles.inlineTextfield} ${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
               htmlFor='charCount'
               onChange={updateCharCount(updateSettings, settingsError)}
               value={settings.charCount}
               disabled={settings.charCountEnable ? '' : 'disabled'}
             />
-            <span>{lang.t('configure.comment-count-text-post')}</span>
+          <span>{t('configure.comment_count_text_post')}</span>
               {
                 errors.charCount &&
                 <span className={styles.settingsError}>
                   <br/>
                   <Icon name="error_outline"/>
-                  {lang.t('configure.comment-count-error')}
+                  {t('configure.comment_count_error')}
                 </span>
               }
           </p>
@@ -107,10 +113,10 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
         </div>
         <div className={styles.content}>
           <div className={styles.settingsHeader}>
-            {lang.t('configure.include-comment-stream')}
+            {t('configure.include_comment_stream')}
           </div>
           <p className={settings.infoBoxEnable ? '' : styles.disabledSettingText}>
-            {lang.t('configure.include-comment-stream-desc')}
+            {t('configure.include_comment_stream_desc')}
           </p>
           <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
             <MarkdownEditor
@@ -123,8 +129,8 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
       </Card>
       <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
         <div className={styles.wrapper}>
-          <div className={styles.settingsHeader}>{lang.t('configure.closed-stream-settings')}</div>
-          <p>{lang.t('configure.closed-comments-desc')}</p>
+          <div className={styles.settingsHeader}>{t('configure.closed_stream_settings')}</div>
+          <p>{t('configure.closed_comments_desc')}</p>
           <div>
             <TextArea className={styles.descriptionBox}
               onChange={updateClosedMessage(updateSettings)}
@@ -133,6 +139,25 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
           </div>
         </div>
       </Card>
+      {/* Edit Comment Timeframe */}
+      <Card className={styles.configSetting}>
+        <div className={styles.settingsHeader}>{t('configure.edit_comment_timeframe_heading')}</div>
+        <p>
+          {t('configure.edit_comment_timeframe_text_pre')}
+          &nbsp;
+          <input
+            className={`${styles.inlineTextfield} ${styles.editCommentTimeframeTextfield}`}
+            type="number"
+            min="0"
+            onChange={updateEditCommentWindowLength(updateSettings)}
+            placeholder="30"
+            defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
+            pattern='[0-9]+([\.][0-9]*)?'
+          />
+          &nbsp;
+          {t('configure.edit_comment_timeframe_text_post')}
+        </p>
+      </Card>
       <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
         <div className={styles.action}>
           <Checkbox
@@ -140,7 +165,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
             checked={settings.autoCloseStream} />
         </div>
         <div className={styles.content}>
-          {lang.t('configure.close-after')}
+          {t('configure.close_after')}
           <br />
           <Textfield
             type='number'
@@ -148,15 +173,15 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
             style={{width: 50}}
             onChange={updateClosedTimeout(updateSettings, settings.closedTimeout)}
             value={getTimeoutAmount(settings.closedTimeout)}
-            label={lang.t('configure.closed-comments-label')} />
+            label={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>
+              <Option value={'hours'}>{t('configure.hours')}</Option>
+              <Option value={'days'}>{t('configure.days')}</Option>
+              <Option value={'weeks'}>{t('configure.weeks')}</Option>
             </SelectField>
           </div>
         </div>
@@ -170,7 +195,7 @@ 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 => {
+const getTimeoutMeasure = (ts) => {
   if (ts % TIMESTAMPS['weeks'] === 0) {
     return 'weeks';
   } else if (ts % TIMESTAMPS['days'] === 0) {
@@ -182,6 +207,4 @@ const getTimeoutMeasure = ts => {
 
 // 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);
+const getTimeoutAmount = (ts) => ts / TIMESTAMPS[getTimeoutMeasure(ts)];

client/coral-admin/src/routes/Configure/components/TechSettings.js

@@ -3,9 +3,7 @@ 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);
+import t from 'coral-framework/services/i18n';
 
 const updateCustomCssUrl = (updateSettings) => (event) => {
   const customCssUrl = event.target.value;
@@ -21,8 +19,8 @@ const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
       <EmbedLink />
       <Card className={styles.configSetting}>
         <div className={styles.wrapper}>
-          <div className={styles.settingsHeader}>{lang.t('configure.custom-css-url')}</div>
-          <p>{lang.t('configure.custom-css-url-desc')}</p>
+          <div className={styles.settingsHeader}>{t('configure.custom_css_url')}</div>
+          <p>{t('configure.custom_css_url_desc')}</p>
           <input
             className={styles.customCSSInput}
             value={settings.customCssUrl}

client/coral-admin/src/routes/Configure/components/Wordlist.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
+import t from 'coral-framework/services/i18n';
 import TagsInput from 'react-tagsinput';
 import styles from './Configure.css';
 import {Card} from 'coral-ui';
@@ -8,33 +7,31 @@ import {Card} from 'coral-ui';
 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
   <div>
     <Card id={styles.bannedWordlist} className={styles.configSetting}>
-      <div className={styles.settingsHeader}>{lang.t('configure.banned-words-title')}</div>
-      <p className={styles.wordlistDesc}>{lang.t('configure.banned-word-text')}</p>
+      <div className={styles.settingsHeader}>{t('configure.banned_words_title')}</div>
+      <p className={styles.wordlistDesc}>{t('configure.banned_word_text')}</p>
       <div className={styles.wrapper}>
         <TagsInput
           value={bannedWords}
           inputProps={{placeholder: 'word or phrase'}}
           addOnPaste={true}
-          pasteSplit={data => data.split(',').map(d => d.trim())}
-          onChange={tags => onChangeWordlist('banned', tags)}
+          pasteSplit={(data) => data.split(',').map((d) => d.trim())}
+          onChange={(tags) => onChangeWordlist('banned', tags)}
         />
       </div>
     </Card>
     <Card id={styles.suspectWordlist} className={styles.configSetting}>
-      <div className={styles.settingsHeader}>{lang.t('configure.suspect-words-title')}</div>
-      <p className={styles.wordlistDesc}>{lang.t('configure.suspect-word-text')}</p>
+      <div className={styles.settingsHeader}>{t('configure.suspect_word_title')}</div>
+      <p className={styles.wordlistDesc}>{t('configure.suspect_word_text')}</p>
       <div className={styles.wrapper}>
         <TagsInput
           value={suspectWords}
           inputProps={{placeholder: 'word or phrase'}}
           addOnPaste={true}
-          pasteSplit={data => data.split(',').map(d => d.trim())}
-          onChange={tags => onChangeWordlist('suspect', tags)} />
+          pasteSplit={(data) => data.split(',').map((d) => d.trim())}
+          onChange={(tags) => onChangeWordlist('suspect', tags)} />
       </div>
     </Card>
   </div>
 );
 
 export default Wordlist;
-
-const lang = new I18n(translations);