Merge pull request #436 from coralproject/translations

Translations

.babelrc

@@ -5,7 +5,6 @@
   ],
   "plugins": [
     "add-module-exports",
-    "transform-async-to-generator",
     "transform-class-properties",
     "transform-decorators-legacy",
     "transform-object-assign",

.eslintrc.json

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

.gitignore

@@ -12,3 +12,7 @@ dump.rdb
 *.cfg
 .idea/
 coverage/
+
+# remove plugin folders
+plugins
+plugins.json

Dockerfile

@@ -1,8 +1,5 @@
 FROM node:7
 
-# Install yarn
-RUN npm install -g yarn
-
 # Create app directory
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app
@@ -20,4 +17,4 @@ RUN yarn install --production
 # Bundle app source
 COPY . /usr/src/app
 
-CMD [ "yarn", "start" ]
+CMD ["yarn", "start"]

PLUGINS.md

@@ -0,0 +1,265 @@
+# Talk Plugins
+
+Plugins for Talk can take various forms, currently we are only supporting server
+side plugins.
+
+## Plugin Registration: `plugins.json`
+
+All plugins must be registered in the root file `plugins.json`.
+
+The format for this file is thus:
+
+```js
+{
+  "server": [
+    "people"
+  ]
+}
+```
+
+Where we have a `server` key with an array of plugins that match the folder
+name in the `plugins/` folder. For example, the above `plugins.json` would
+require a plugin from `plugins/people`, which must provide a `index.js` file
+that returns an object that matches the Plugin Specification.
+
+## Server Plugins
+
+### Specification
+
+Each plugin should export a single object with all hooks available on it.
+
+_**Note: You will have access to the whole core and other plugin's typeDefs,
+context, loaders, mutators, resolvers, hooks. This is intentional, as it
+encourages composing plugins to merge functionality, like a Slack plugin which
+provides a Slack notify context function as well as having the loader for
+comments.**_
+
+The following are the hooks available:
+
+#### Field: `typeDefs`
+
+```graphql
+enum COLOUR {
+  RED
+  BLUE
+}
+
+type Person {
+  name: String!
+  colour: COLOUR!
+}
+
+type RootMutation {
+  createPerson(name: String!): Person
+}
+
+type RootQuery {
+  people: [Person!]
+}
+```
+
+Thanks to [gql-merge](https://www.npmjs.com/package/gql-merge) the contents of
+`typeDefs` should be a string that will be _merged_ with the existing type
+definitions. `enum`'s will be appended to, types will be appended, and new types
+will be added.
+
+#### Field: `context`
+
+```js
+{
+  Slack: (context) => ({
+    notify: (message) => {
+      // return a promise after we're done sending notifications.
+    }
+  })
+}
+```
+
+Any property provided here will be added to the context parameter available
+inside all resolvers, loaders, mutators, and of course, other context based
+plugins.
+
+The top level item must accept a context for the request which it should use to
+configure the context plugin before it would be mounted at `context.plugins`.
+This plugin above would mount at: `context.plugins.Slack`, or, if you're using
+[object destructuring](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), `{plugins: {Slack}}`.
+
+#### Field: `loaders`
+
+```js
+(context) => ({
+  People: {
+    load: () => db.people.find({user: context.user})
+  }
+})
+```
+
+Loaders should be provided as a function which returns a map which is used in
+the resolvers function. These must return a promise or a value.
+
+#### Field: `mutators`
+
+```js
+(context) => ({
+  People: {
+    create: (name) => {
+      return db.people.insert({user: context.user, name});
+    }
+  }
+})
+```
+
+Mutators should be provided as a function which returns a map which is used in
+the resolvers function. These must return a promise or a value.
+
+#### Field: `resolvers`
+
+```js
+{
+  Person: {
+    name(obj, args, context) {
+      return obj.name;
+    },
+    colour(obj, args, context) {
+      // Bill likes the colour red, everyone else likes blue.
+      return obj.name === 'bill' ? 'RED' : 'BLUE';
+    }
+  },
+  RootQuery: {
+    people(obj, args, {loaders: {People}}) {
+      return People.load();
+    }
+  },
+  RootMutation: {
+    createPerson(obj, {name}, {mutators: {People}}) {
+      return People.create(name);
+    }
+  }
+}
+```
+
+Should return a resolver map as described in the
+[Apollo Docs](http://dev.apollodata.com/tools/graphql-tools/resolvers.html#Resolver-map).
+
+This will merge with the existing resolvers in core and from previous plugins.
+
+#### Field: `hooks`
+
+```js
+{
+  RootMutation: {
+    createPerson: {
+      post: async (obj, args, {plugins: {Slack}}, info, person) {
+        if (!person) {
+          return person;
+        }
+
+        await Slack.notify(`A new person just was created with name ${person.name}`);
+
+        return person;
+      }
+    }
+  }
+}
+```
+
+Hooks here are pretty special, for each resolver field, you can specify a
+pre/post hook that will execute pre and post field resolution.
+
+If your post function accepts four parameters, then it can modify the field
+result. It is *required* that the function resolves a promise (or returns) with
+the modified value or simply the original if you didn't modify it.
+
+### Full Example
+
+Contents of `plugins.json`:
+
+```json
+{
+  "server": [
+    "people"
+  ]
+}
+```
+
+Located in `plugins/people/index.js`:
+
+```js
+module.exports = {
+  typeDefs: `
+  enum COLOUR {
+    RED
+    BLUE
+  }
+
+  type Person {
+    name: String!
+    colour: COLOUR!
+  }
+
+  type RootMutation {
+    createPerson(name: String!): Person
+  }
+
+  type RootQuery {
+    people: [Person!]
+  }
+  `,
+  context: {
+    Slack: () => ({
+      notify: (message) => {
+        // return a promise after we're done sending notifications.
+      }
+    })
+  },
+  loaders: ({user}) => ({
+    People: {
+      load: () => db.people.find({user})
+    }
+  }),
+  mutators: ({user}) => ({
+    People: {
+      create: (name) => {
+        return db.people.insert({user, name});
+      }
+    }
+  }),
+  resolvers: {
+    Person: {
+      name(obj, args, context) {
+        return obj.name;
+      },
+      colour(obj, args, context) {
+        // Bill likes the colour red, everyone else likes blue.
+        return obj.name === 'bill' ? 'RED' : 'BLUE';
+      }
+    },
+    RootQuery: {
+      people(obj, args, {loaders: {People}}) {
+        return People.load();
+      }
+    },
+    RootMutation: {
+      createPerson(obj, {name}, {mutators: {People}}) {
+        return People.create(name);
+      }
+    }
+  },
+  hooks: {
+    RootMutation: {
+      createPerson: {
+        post: async (obj, args, {plugins: {Slack}}, info, person) => {
+          if (!person) {
+            return person;
+          }
+
+          await Slack.notify(`A new person just was created with name ${person.name}`);
+
+          return person;
+        }
+      }
+    }
+  }
+};
+
+```

README.md

@@ -1,6 +1,9 @@
 # Talk [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
 
-A commenting platform from [The Coral Project](https://coralproject.net). Talk enters a closed beta in March 2017, but you can download the code for our alpha here. [Read more about Talk here.](https://coralproject.net/products/talk.html) 
+A commenting platform from [The Coral Project](https://coralproject.net). Talk enters a closed beta in March 2017, but you can download the code for our alpha here. [Read more about Talk here.](https://coralproject.net/products/talk.html)
+
+Third party licenses are available via the `/client/3rdpartylicenses.txt`
+endpoint when the server is running with built assets.
 
 ## Contributing to Talk
 
@@ -38,6 +41,8 @@ Facebook Login enabled app.
 - `TALK_SMTP_HOST` (*required for email*) - SMTP host url with format `smtp.domain.com`.
 - `TALK_SMTP_PORT` (*required for email*) - SMTP port.
 - `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - Defaults to `FALSE`. When `TRUE`, disables the dynamic setup endpoint.
+- `TALK_RECAPTCHA_SECRET` (*required for reCAPTCHA support*) - server secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
+- `TALK_RECAPTCHA_PUBLIC` (*required for reCAPTCHA support*) - client secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
 
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.

app.js

@@ -34,6 +34,7 @@ app.use(helmet({
 }));
 app.use(bodyParser.json());
 app.use('/client', express.static(path.join(__dirname, 'dist')));
+app.use('/public', express.static(path.join(__dirname, 'public')));
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
@@ -45,16 +46,15 @@ const session_opts = {
   secret: process.env.TALK_SESSION_SECRET,
   httpOnly: true,
   rolling: true,
-  saveUninitialized: false,
-  resave: false,
+  saveUninitialized: true,
+  resave: true,
   unset: 'destroy',
   name: 'talk.sid',
   cookie: {
     secure: false,
-    maxAge: 36000000, // 1 hour for expiry.
+    maxAge: 8.64e+7, // 24 hours for session token expiry
   },
   store: new RedisStore({
-    ttl: 1800,
     client: redis.createClient(),
   })
 };

circle.yml

@@ -1,6 +1,6 @@
 machine:
   node:
-    version: 7
+    version: 7.6
   services:
     - docker
     - redis

client/.babelrc

@@ -0,0 +1,6 @@
+{
+  "extends": "../.babelrc",
+  "plugins": [
+    "transform-async-to-generator",
+  ]
+}

client/.eslintrc.json

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

client/coral-admin/src/AppRouter.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Router, Route, IndexRoute, IndexRedirect, browserHistory} from 'react-router';
 
-import Streams from 'containers/Streams/Streams';
+import Stories from 'containers/Stories/Stories';
 import Configure from 'containers/Configure/Configure';
 import LayoutContainer from 'containers/LayoutContainer';
 import InstallContainer from 'containers/Install/InstallContainer';
@@ -15,10 +15,10 @@ const routes = (
   <div>
     <Route exact path="/admin/install" component={InstallContainer}/>
     <Route path='/admin' component={LayoutContainer}>
-      <IndexRoute component={ModerationContainer} />
+      <IndexRoute component={Dashboard} />
       <Route path='community' component={CommunityContainer} />
       <Route path='configure' component={Configure} />
-      <Route path='streams' component={Streams} />
+      <Route path='stories' component={Stories} />
       <Route path='dashboard' component={Dashboard} />
 
       {/* Moderation Routes */}

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

@@ -1,5 +1,42 @@
 import * as actions from '../constants/auth';
-import coralApi from '../../../coral-framework/helpers/response';
+import coralApi from 'coral-framework/helpers/response';
+
+// Log In.
+export const handleLogin = (email, password, recaptchaResponse) => dispatch => {
+  dispatch({type: actions.LOGIN_REQUEST});
+  const params = {method: 'POST', body: {email, password}};
+  if (recaptchaResponse) {
+    params.headers = {'X-Recaptcha-Response': recaptchaResponse};
+  }
+  return coralApi('/auth/local', params)
+    .then(({user}) => {
+      if (!user) {
+        return dispatch(checkLoginFailure('not logged in'));
+      }
+
+      const isAdmin = !!user.roles.filter(i => i === 'ADMIN').length;
+      dispatch(checkLoginSuccess(user, isAdmin));
+    })
+    .catch(error => {
+
+      if (error.translation_key === 'LOGIN_MAXIMUM_EXCEEDED') {
+        dispatch({type: actions.LOGIN_MAXIMUM_EXCEEDED, message: error.translation_key});
+      } else {
+        dispatch({type: actions.LOGIN_FAILURE, message: error.translation_key});
+      }
+    });
+};
+
+const forgotPassowordRequest = () => ({type: actions.FETCH_FORGOT_PASSWORD_REQUEST});
+const forgotPassowordSuccess = () => ({type: actions.FETCH_FORGOT_PASSWORD_SUCCESS});
+const forgotPassowordFailure = () => ({type: actions.FETCH_FORGOT_PASSWORD_FAILURE});
+
+export const requestPasswordReset = email => dispatch => {
+  dispatch(forgotPassowordRequest(email));
+  return coralApi('/account/password/reset', {method: 'POST', body: {email}})
+    .then(() => dispatch(forgotPassowordSuccess()))
+    .catch(error => dispatch(forgotPassowordFailure(error)));
+};
 
 // Check Login
 
@@ -10,9 +47,13 @@ const checkLoginFailure = error => ({type: actions.CHECK_LOGIN_FAILURE, error});
 export const checkLogin = () => dispatch => {
   dispatch(checkLoginRequest());
   return coralApi('/auth')
-    .then(result => {
-      const isAdmin = !!result.user.roles.filter(i => i === 'ADMIN').length;
-      dispatch(checkLoginSuccess(result.user, isAdmin));
+    .then(({user}) => {
+      if (!user) {
+        return dispatch(checkLoginFailure('not logged in'));
+      }
+
+      const isAdmin = !!user.roles.filter(i => i === 'ADMIN').length;
+      dispatch(checkLoginSuccess(user, isAdmin));
     })
     .catch(error => {
       console.error(error);
@@ -28,7 +69,7 @@ const logOutFailure = () => ({type: actions.LOGOUT_FAILURE});
 
 export const logout = () => dispatch => {
   dispatch(logOutRequest());
-  coralApi('/auth', {method: 'DELETE'})
+  return coralApi('/auth', {method: 'DELETE'})
     .then(() => dispatch(logOutSuccess()))
     .catch(error => dispatch(logOutFailure(error)));
 };

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

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

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

@@ -20,13 +20,17 @@ const validation = (formData, dispatch, next) => {
     return dispatch(hasError());
   }
 
+  const validKeys = Object.keys(formData)
+    .filter(name => name !== 'domains');
+
   // Required Validation
-  const empty = Object.keys(formData).filter(name => {
+  const empty = validKeys
+  .filter(name => {
     const cond = !formData[name].length;
 
     if (cond) {
 
-      // Adding Error
+    // Adding Error
       dispatch(addError(name, 'This field is required.'));
     } else {
       dispatch(addError(name, ''));
@@ -40,18 +44,19 @@ const validation = (formData, dispatch, next) => {
   }
 
   // RegExp Validation
-  const validation = Object.keys(formData).filter(name => {
-    const cond = !validate[name](formData[name]);
-    if (cond) {
+  const validation = validKeys
+    .filter(name => {
+      const cond = !validate[name](formData[name]);
+      if (cond) {
 
       // Adding Error
-      dispatch(addError(name, errorMsj[name]));
-    } else {
-      dispatch(addError(name, ''));
-    }
+        dispatch(addError(name, errorMsj[name]));
+      } else {
+        dispatch(addError(name, ''));
+      }
 
-    return cond;
-  });
+      return cond;
+    });
 
   if (validation.length) {
     return dispatch(hasError());
@@ -71,23 +76,27 @@ export const submitSettings = () => (dispatch, getState) => {
 export const submitUser = () => (dispatch, getState) => {
   const userFormData = getState().install.toJS().data.user;
   validation(userFormData, dispatch, function() {
-    const data = getState().install.toJS().data;
-    dispatch(installRequest());
-    coralApi('/setup', {method: 'POST', body: data})
-      .then(result => {
-        console.log(result);
-        dispatch(installSuccess());
-        dispatch(nextStep());
-      })
-      .catch(error => {
-        console.error(error);
-        dispatch(installFailure(`${error.translation_key}`));
-      });
+    dispatch(nextStep());
   });
 };
 
+export const finishInstall = () => (dispatch, getState) => {
+  const data = getState().install.toJS().data;
+  dispatch(installRequest());
+  return coralApi('/setup', {method: 'POST', body: data})
+    .then(() => {
+      dispatch(installSuccess());
+      dispatch(nextStep());
+    })
+    .catch(error => {
+      console.error(error);
+      dispatch(installFailure(`${error.translation_key}`));
+    });
+};
+
 export const updateSettingsFormData = (name, value) => ({type: actions.UPDATE_FORMDATA_SETTINGS, name, value});
 export const updateUserFormData = (name, value) => ({type: actions.UPDATE_FORMDATA_USER, name, value});
+export const updatePermittedDomains = (value) => ({type: actions.UPDATE_PERMITTED_DOMAINS_SETTINGS, value});
 
 const checkInstallRequest = () => ({type: actions.CHECK_INSTALL_REQUEST});
 const checkInstallSuccess = installed => ({type: actions.CHECK_INSTALL_SUCCESS, installed});

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

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

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

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

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

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

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

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

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

@@ -8,7 +8,7 @@ const lang = new I18n(translations);
 
 const BanUserButton = ({user, ...props}) => (
   <div className={styles.ban}>
-    <Button cStyle='darkGrey'
+    <Button cStyle='ban'
       className={`ban ${styles.banButton}`}
       disabled={user.status === 'BANNED' ? 'disabled' : ''}
       onClick={props.onClick}

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

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

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

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

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

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

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

@@ -1,66 +0,0 @@
-import React, {PropTypes} from 'react';
-import {Link} from 'react-router';
-import styles from './FlagWidget.css';
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from 'coral-admin/src/translations';
-
-const lang = new I18n(translations);
-
-const FlagWidget = ({assets}) => {
-
-  return (
-    <table className={styles.widgetTable}>
-      <thead className={styles.widgetHead}>
-        <tr>
-          <th></th>{/* empty on purpose */}
-          <th>{lang.t('streams.article')}</th>
-          <th>{lang.t('modqueue.flagged')}</th>
-          <th>{lang.t('modqueue.likes')}</th>
-          <th>{lang.t('dashboard.comment_count')}</th>
-        </tr>
-      </thead>
-      <tbody>
-        {
-          assets.length
-          ? assets.map((asset, index) => {
-            const flagSummary = asset.action_summaries.find(s => s.__typename === 'FlagAssetActionSummary');
-            const likeSummary = asset.action_summaries.find(s => s.__typename === 'LikeAssetActionSummary');
-            return (
-              <tr key={asset.id}>
-                <td>{index + 1}.</td>
-                <td>
-                  <Link to={`/admin/moderate/flagged/${asset.id}`}>{asset.title}</Link>
-                  <p className={styles.lede}>{asset.author} - Published: {new Date(asset.created_at).toLocaleDateString()}</p>
-                </td>
-                <td>{flagSummary ? flagSummary.actionCount : 0}</td>
-                <td>{likeSummary ? likeSummary.actionCount : 0}</td>
-                <td>{asset.commentCount}</td>
-              </tr>
-            );
-          })
-          : <tr><td colSpan="3">{lang.t('dashboard.no_flags')}</td></tr>
-        }
-      </tbody>
-    </table>
-  );
-};
-
-FlagWidget.propTypes = {
-  assets: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      title: PropTypes.string,
-      url: PropTypes.string,
-      commentCount: PropTypes.number,
-      action_summaries: PropTypes.arrayOf(
-        PropTypes.shape({
-          __typename: PropTypes.string.isRequired,
-          actionCount: PropTypes.number.isRequired,
-          actionableItemCount: PropTypes.number.isRequired
-        })
-      )
-    })
-  ).isRequired
-};
-
-export default FlagWidget;

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,25 @@
+@custom-media --table-viewport (max-width: 1024px);
+
+@media (--table-viewport) {
+  .logo {
+    margin-left: 58px;
+    h1 {
+      background: #696969;
+    }
+    span {
+      color: #fcfcfc;
+    }
+  }
+  .nav {
+    display: none;
+  }
+}
+
 .header {
   background-color: transparent;
   box-shadow: none;
   min-height: 58px;
+  display: block;
 }
 
 .header > div {
@@ -56,8 +74,12 @@
   background-color: transparent;
   transition: background-color 200ms;
 
+  &:hover {
+    background-color: #232323;
+  }
+
   &.active {
-     background-color: #232323;
+    background-color: #232323;
   }
 }
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
 import {Link, IndexLink} from 'react-router';
 import styles from './Header.css';
@@ -6,36 +6,43 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import {Logo} from './Logo';
 
-export default ({handleLogout, restricted = false}) => (
+const CoralHeader = ({handleLogout, restricted = false}) => (
   <Header className={styles.header}>
-    <Logo />
+    <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 className={styles.navLink}
-            to="/admin/streams"
+          <Link
+            id='streamsNav'
+            className={styles.navLink}
+            to="/admin/stories"
             activeClassName={styles.active}>
-            {lang.t('configure.streams')}
+            {lang.t('configure.stories')}
           </Link>
-          <Link className={styles.navLink}
+          <Link
+            id='communityNav'
+            className={styles.navLink}
             to="/admin/community"
             activeClassName={styles.active}>
             {lang.t('configure.community')}
           </Link>
           <Link
+            id='configureNav'
             className={styles.navLink}
             to="/admin/configure"
             activeClassName={styles.active}>
@@ -64,4 +71,11 @@ export default ({handleLogout, restricted = false}) => (
   </Header>
 );
 
+CoralHeader.propTypes = {
+  handleLogout: PropTypes.func.isRequired,
+  restricted: PropTypes.bool // hide elemnts from a user that's logged out
+};
+
 const lang = new I18n(translations);
+
+export default CoralHeader;

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

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

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

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

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

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

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

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

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

@@ -10,6 +10,7 @@ export const INSTALL_SUCCESS = 'INSTALL_SUCCESS';
 export const INSTALL_FAILURE = 'INSTALL_FAILURE';
 export const UPDATE_FORMDATA_USER = 'UPDATE_FORMDATA_USER';
 export const UPDATE_FORMDATA_SETTINGS = 'UPDATE_FORMDATA_SETTINGS';
+export const UPDATE_PERMITTED_DOMAINS_SETTINGS = 'UPDATE_PERMITTED_DOMAINS_SETTINGS';
 
 export const CHECK_INSTALL_REQUEST = 'CHECK_INSTALL_REQUEST';
 export const CHECK_INSTALL_SUCCESS = 'CHECK_INSTALL_SUCCESS';

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

@@ -3,7 +3,7 @@
 
   h3 {
     color: black;
-    font-size: 1.76em;
+    font-size: 1.26em;
     font-weight: 500;
   }
 }
@@ -24,6 +24,30 @@
   margin-bottom: 20px;
   align-items: flex-start;
   min-height: 100px;
+  max-width: 600px;
+
+  h3 {
+    margin: 0;
+  }
+
+  .actions {
+    display: inline-block;
+    width: 100%;
+
+    .copiedText {
+      display: inline-block;
+      color: #00796b;
+      padding: 12px;
+      font-size: 14px;
+      float: right;
+    }
+
+    .copyButton {
+      display: inline-block;
+      width: 200px;
+      float: right;
+    }
+  }
 }
 
 .settingsError {
@@ -37,7 +61,9 @@
 
 .settingsHeader {
   margin-top: 3px;
-  margin-bottom: 10px;
+  margin-bottom: 7px;
+  font-size: 18px;
+  font-weight: 500;
 }
 
 .disabledSettingText {
@@ -54,11 +80,6 @@
   overflow: visible;
 }
 
-.configSettingInfoBox p {
-  font-size: 12px;
-  bottom: 0;
-}
-
 .configSettingEmbed {
   border: 1px solid #ccc;
   border-radius: 4px;
@@ -69,6 +90,11 @@
 .configTimeoutSelect {
   display: inline-block;
   margin-left: 20px;
+
+  i { /* fix for firefox and react-mdl-selectfield@0.2.0 */
+    padding: 20px 0;
+    vertical-align: top;
+  }
 }
 
 .charCountTexfield {
@@ -77,6 +103,8 @@
   border-color: #ccc;
   border-style: solid;
   border-width: 0px 0px 1px 0px;
+  font-size: 14px;
+  text-align: center;
 }
 
 .charCountTexfieldEnabled {
@@ -92,44 +120,34 @@
   color: white;
 }
 
-.copiedText {
-  color: #00796b;
-  float: right;
-  padding: 12px;
-  font-size: 14px;
-}
-
-.copyButton {
-  float: right;
-  width: 200px;
-}
-
 .embedInput {
-  border-radius: 3px;
-  border: 1px solid #ccc;
+  width: 100%;
   display: block;
-  width: 90%;
-  vertical-align: middle;
-  margin-bottom: 10px;
-  color: #555;
-  padding: 14px;
+  outline: none;
+  border: 1px solid rgba(0,0,0,.12);
+  padding: 6px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin: 5px auto;
+  min-height: 175px;
   font-size: 14px;
-  letter-spacing: 0.03em;
+  resize: none;
 }
 
 #bannedWordlist, #suspectWordlist {
-  width: 100%;
-  padding: 10px;
-
+  display: block;
   input {
     width: 100%;
   }
 }
 
-.wordlistHeader {
-  font-weight: bold;
-  font-size:18px;
-  margin-bottom:3px;
+.customCSSInput {
+  width: 100%;
+  font-size: 14px;
+  padding: 14px;
+  letter-spacing: 0.03em;
+  color: #555;
+  box-sizing: border-box;
 }
 
 .enabledSetting {
@@ -150,7 +168,7 @@
   margin-top: 38px;
 }
 
-.commentSettingsSection {
+.settingsSection {
   padding-bottom: 200px;
   .action {
     display: inline-block;
@@ -165,3 +183,24 @@
     padding-left: 30px;
   }
 }
+
+.Configure {
+
+  p {
+    line-height: 1.2;
+    max-width: 550px;
+  }
+
+  .wrapper {
+    width: 550px;
+  }
+
+  .descriptionBox {
+    margin-top: 15px;
+    max-width: 550px;
+
+    input {
+      height: 150px;
+    }
+  }
+}

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

@@ -8,22 +8,20 @@ import {
   updateDomainlist
 } from '../../actions/settings';
 
-import {Button, List, Item} from 'coral-ui';
+import {Button, List, Item, Card, Spinner} from 'coral-ui';
 import styles from './Configure.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../../translations.json';
-import EmbedLink from './EmbedLink';
-import CommentSettings from './CommentSettings';
-import Wordlist from './Wordlist';
-import Domainlist from './Domainlist';
-import has from 'lodash/has';
+import translations from 'coral-admin/src/translations.json';
+import StreamSettings from './StreamSettings';
+import ModerationSettings from './ModerationSettings';
+import TechSettings from './TechSettings';
 
 class Configure extends Component {
   constructor (props) {
     super(props);
 
     this.state = {
-      activeSection: 'comments',
+      activeSection: 'stream',
       changed: false,
       errors: {}
     };
@@ -70,40 +68,48 @@ class Configure extends Component {
 
   getSection (section) {
     const pageTitle = this.getPageTitle(section);
+    let sectionComponent;
     switch(section){
-    case 'comments':
-      return <CommentSettings
-        title={pageTitle}
-        fetchingSettings={this.props.fetchingSettings}
+    case 'stream':
+      sectionComponent = <StreamSettings
         settings={this.props.settings}
         updateSettings={this.onSettingUpdate}
         errors={this.state.errors}
         settingsError={this.onSettingError}/>;
-    case 'embed':
-      return has(this, 'props.settings.domains.whitelist')
-        ? <div>
-            <Domainlist
-             domains={this.props.settings.domains.whitelist}
-             onChangeDomainlist={this.onChangeDomainlist}/>
-            <EmbedLink title={pageTitle} />
-          </div>
-        : <EmbedLink title={pageTitle} />;
-    case 'wordlist':
-      return has(this, 'props.settings.wordlist')
-        ? <Wordlist
-          bannedWords={this.props.settings.wordlist.banned}
-          suspectWords={this.props.settings.wordlist.suspect}
-          onChangeWordlist={this.onChangeWordlist} />
-        : <p>loading wordlists</p>;
+      break;
+    case 'moderation':
+      sectionComponent = <ModerationSettings
+        onChangeWordlist={this.onChangeWordlist}
+        settings={this.props.settings}
+        updateSettings={this.onSettingUpdate} />;
+      break;
+    case 'tech':
+      sectionComponent = <TechSettings
+        onChangeDomainlist={this.onChangeDomainlist}
+        settings={this.props.settings}
+        updateSettings={this.onSettingUpdate} />;
     }
+
+    if (this.props.settings.fetchingSettings) {
+      return <Card shadow="4"><Spinner/>Loading settings...</Card>;
+    }
+
+    return (
+      <div className={styles.settingsSection}>
+        <h3>{pageTitle}</h3>
+        {sectionComponent}
+      </div>
+    );
   }
 
   getPageTitle (section) {
     switch(section) {
-    case 'comments':
-      return lang.t('configure.comment-settings');
-    case 'embed':
-      return lang.t('configure.embed-comment-stream');
+    case 'stream':
+      return lang.t('configure.stream-settings');
+    case 'moderation':
+      return lang.t('configure.moderation-settings');
+    case 'tech':
+      return lang.t('configure.tech-settings');
     default:
       return '';
     }
@@ -120,14 +126,14 @@ class Configure extends Component {
         <div className={styles.container}>
           <div className={styles.leftColumn}>
             <List onChange={this.changeSection} activeItem={activeSection}>
-              <Item itemId='comments' icon="settings">
-                {lang.t('configure.comment-settings')}
+              <Item itemId='stream' icon='speaker_notes'>
+                {lang.t('configure.stream-settings')}
               </Item>
-              <Item itemId='embed' icon='code'>
-                {lang.t('configure.embed-comment-stream')}
+              <Item itemId='moderation' icon='thumbs_up_down'>
+                {lang.t('configure.moderation-settings')}
               </Item>
-              <Item itemId='wordlist' icon='settings'>
-                {lang.t('configure.wordlist')}
+              <Item itemId='tech' icon='code'>
+                {lang.t('configure.tech-settings')}
               </Item>
             </List>
             <div className={styles.saveBox}>

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

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

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

@@ -44,19 +44,21 @@ class EmbedLink extends Component {
 "></script>
     `.trim();
     return (
-      <div>
-        <h3>{this.props.title}</h3>
-        <div>
-          <Card shadow="2">
-            <p>{lang.t('configure.copy-and-paste')}</p>
-            <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
+      <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>
+          <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
+          <div className={styles.actions}>
             <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
               {lang.t('embedlink.copy')}
             </Button>
-            <div className={styles.copiedText}>{this.state.copied && 'Copied!'}</div>
-          </Card>
+            <div className={styles.copiedText}>
+              {this.state.copied && 'Copied!'}
+            </div>
+          </div>
         </div>
-      </div>
+      </Card>
     );
   }
 }

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

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

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

@@ -3,8 +3,8 @@ import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import styles from './Configure.css';
-import {Textfield, Checkbox} from 'react-mdl';
-import {Card, Icon, Spinner} from 'coral-ui';
+import {Checkbox, Textfield} from 'react-mdl';
+import {Card, Icon, TextArea} from 'coral-ui';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -27,15 +27,6 @@ const updateCharCount = (updateSettings, settingsError) => (event) => {
   updateSettings({charCount: charCount});
 };
 
-const updateModeration = (updateSettings, mod) => () => {
-  const moderation = mod === 'PRE' ? 'POST' : 'PRE';
-  updateSettings({moderation});
-};
-
-const updateEmailConfirmation = (updateSettings, verify) => () => {
-  updateSettings({requireEmailConfirmation: !verify});
-};
-
 const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
   const infoBoxEnable = !infoBox;
   updateSettings({infoBoxEnable});
@@ -51,12 +42,6 @@ const updateClosedMessage = (updateSettings) => (event) => {
   updateSettings({closedMessage});
 };
 
-const updateCustomCssUrl = (updateSettings) => (event) => {
-  console.log('updateCustomCssUrl', event.target.value);
-  const customCssUrl = event.target.value;
-  updateSettings({customCssUrl});
-};
-
 // If we are changing the measure we need to recalculate using the old amount
 // Same thing if we are just changing the amount
 const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
@@ -72,44 +57,14 @@ const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
   }
 };
 
-const CommentSettings = ({fetchingSettings, title, updateSettings, settingsError, settings, errors}) => {
-  if (fetchingSettings) {
-    return <Card shadow="4"><Spinner/>Loading settings...</Card>;
-  }
+const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
 
   // just putting this here for shorthand below
   const on = styles.enabledSetting;
   const off = styles.disabledSetting;
 
   return (
-    <div className={styles.commentSettingsSection}>
-      <h3>{title}</h3>
-      <Card className={`${styles.configSetting} ${settings.moderation === 'PRE' ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateModeration(updateSettings, settings.moderation)}
-            checked={settings.moderation === 'PRE'} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{lang.t('configure.enable-pre-moderation')}</div>
-          <p className={settings.moderation === 'PRE' ? '' : styles.disabledSettingText}>
-            {lang.t('configure.enable-pre-moderation-text')}
-          </p>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateEmailConfirmation(updateSettings, settings.requireEmailConfirmation)}
-            checked={settings.requireEmailConfirmation} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{lang.t('configure.require-email-verification')}</div>
-          <p className={settings.requireEmailConfirmation ? '' : styles.disabledSettingText}>
-            {lang.t('configure.require-email-verification-text')}
-          </p>
-        </div>
-      </Card>
+    <div className={styles.Configure}>
       <Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
         <div className={styles.action}>
           <Checkbox
@@ -124,7 +79,9 @@ const CommentSettings = ({fetchingSettings, title, updateSettings, settingsError
               className={`${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
               htmlFor='charCount'
               onChange={updateCharCount(updateSettings, settingsError)}
-              value={settings.charCount}/>
+              value={settings.charCount}
+              disabled={settings.charCountEnable ? '' : 'disabled'}
+            />
             <span>{lang.t('configure.comment-count-text-post')}</span>
               {
                 errors.charCount &&
@@ -137,41 +94,43 @@ const CommentSettings = ({fetchingSettings, title, updateSettings, settingsError
           </p>
         </div>
       </Card>
-      <Card className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
+      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
         <div className={styles.action}>
           <Checkbox
             onChange={updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
             checked={settings.infoBoxEnable} />
         </div>
         <div className={styles.content}>
-          {lang.t('configure.include-comment-stream')}
-          <p>
+          <div className={styles.settingsHeader}>
+            {lang.t('configure.include-comment-stream')}
+          </div>
+          <p className={settings.infoBoxEnable ? '' : styles.disabledSettingText}>
             {lang.t('configure.include-comment-stream-desc')}
           </p>
           <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-            <div className={styles.content}>
-              <Textfield
+            <div>
+              <TextArea
+                className={styles.descriptionBox}
                 onChange={updateInfoBoxContent(updateSettings)}
                 value={settings.infoBoxContent}
-                label={lang.t('configure.include-text')}
-                rows={3}/>
+              />
             </div>
           </div>
         </div>
       </Card>
-      <Card className={styles.configSettingInfoBox}>
-        <div className={styles.content}>
-          {lang.t('configure.closed-comments-desc')}
+      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
+        <div className={styles.settingsHeader}>{lang.t('configure.closed-stream-settings')}</div>
+        <div className={styles.wrapper}>
+          <p>{lang.t('configure.closed-comments-desc')}</p>
           <div>
-          <Textfield
-            onChange={updateClosedMessage(updateSettings)}
-            value={settings.closedMessage}
-            label={lang.t('configure.closed-comments-label')}
-            rows={3}/>
+            <TextArea className={styles.descriptionBox}
+              onChange={updateClosedMessage(updateSettings)}
+              value={settings.closedMessage}
+            />
           </div>
         </div>
       </Card>
-      <Card className={styles.configSettingInfoBox}>
+      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
         <div className={styles.content}>
           {lang.t('configure.close-after')}
           <br />
@@ -194,23 +153,12 @@ const CommentSettings = ({fetchingSettings, title, updateSettings, settingsError
           </div>
         </div>
       </Card>
-      <Card className={styles.configSettingInfoBox}>
-        <div className={styles.content}>
-          {lang.t('configure.custom-css-url')}
-          <p>{lang.t('configure.custom-css-url-desc')}</p>
-          <br />
-          <Textfield
-            style={{width: '100%'}}
-            label={lang.t('configure.custom-css-url')}
-            value={settings.customCssUrl}
-            onChange={updateCustomCssUrl(updateSettings)} />
-        </div>
-      </Card>
+      {/* the above card should be the last one if at all possible because of z-index issues with the selects */}
     </div>
   );
 };
 
-export default CommentSettings;
+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

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

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

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

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

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

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

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

@@ -1,19 +1,5 @@
 .Dashboard {
   display: flex;
-  padding: 5px;
-}
-
-.widget {
-  margin-top: 10px;
-  flex: 1;
-  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
-  margin-right: 10px;
-  padding: 15px;
-
-}
-
-.widget:last-child {
-  margin-right: 0;
 }
 
 .heading {
@@ -21,3 +7,28 @@
   font-size: 1.5rem;
   font-weight: bold;
 }
+
+.autoUpdate {
+  background-color: #d5d5d5;
+  padding: 3px 10px 10px 10px;
+  margin-bottom: 0;
+
+  i {
+    position: relative;
+    top: 7px;
+  }
+
+  b {
+    float: right;
+    border-radius: 20px;
+    cursor: pointer;
+    background-color: #c0c0c0;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    top: 4px;
+    position: relative;
+    line-height: 1.7em;
+    font-size: 1.3em;
+  }
+}

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

@@ -1,38 +1,54 @@
 import React from 'react';
-import {compose} from 'react-apollo';
-import {mostFlags} from 'coral-admin/src/graphql/queries';
-import {Spinner} from 'coral-ui';
 import styles from './Dashboard.css';
-import FlagWidget from '../../components/FlagWidget';
+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 () {
 
-    const {data} = this.props;
-    const {metrics: assets} = data;
-
-    if (data.loading) {
+    if (this.props.data && this.props.data.loading) {
       return <Spinner />;
     }
 
-    if (data.error) {
-      return <code><pre>{data.error}</pre></code>;
-    }
+    const {data: {assetsByActivity, assetsByFlag}} = this.props;
 
     return (
-      <div className={styles.Dashboard}>
-        <div className={styles.widget}>
-          <h2 className={styles.heading}>Top Ten Articles with the most flagged comments</h2>
-          <FlagWidget assets={assets} />
-        </div>
-        <div className={styles.widget}>
-          <h2 className={styles.heading}>Top ten comments with the most likes</h2>
+      <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(
-  mostFlags
+  connect(mapStateToProps, mapDispatchToProps),
+  getMetrics
 )(Dashboard);

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

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

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

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

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

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

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

@@ -0,0 +1,106 @@
+:root {
+  --row-height: 60px;
+}
+
+.widget {
+  margin: 10px 5px 5px 5px;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
+  flex: 1;
+  background-color: white;
+  box-sizing: border-box;
+}
+
+.widget * {
+  box-sizing: border-box;
+}
+
+.heading {
+  margin: 0;
+  padding-left: 10px;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.widgetTable {
+  height: calc(var(--row-height) * 10);
+}
+
+.widgetTable + div:after {
+  content: '';
+  clear: both;
+  display: block;
+}
+
+.widgetHead p {
+  color: rgb(35, 102, 223);
+  padding: 10px;
+  text-align: left;
+  text-transform: capitalize;
+  display: inline-block;
+  box-sizing: border-box;
+  margin-bottom: 0;
+}
+
+.widgetHead p:last-child {
+  float: right;
+  margin-right: 100px;
+}
+
+.rowLinkify {
+  cursor: pointer;
+  border-bottom: 1px solid lightgrey;
+  color: #555;
+  height: var(--row-height);
+  padding: 10px;
+}
+
+.rowLinkify:last-child {
+  border-bottom: none;
+}
+
+.rowLinkify:hover {
+  background-color: #f8f8f8;
+}
+
+.linkToAsset {
+  display: inline-block;
+  text-decoration: none;
+}
+
+.linkToModerate {
+  background-color: #e0e0e0;
+  padding: 10px 14px;
+  text-decoration: none;
+  color: black;
+  float: right;
+  margin-left: 15px;
+}
+
+.linkToModerate:hover {
+  background-color: #ccc;
+}
+
+.lede {
+  font-size: 0.9em;
+  color: #aaa;
+}
+
+.assetTitle {
+  color: #555;
+  text-decoration: none;
+  font-size: 1.2em;
+  font-weight: normal;
+  margin: 0;
+}
+
+.assetTitle:hover {
+  text-decoration: underline;
+}
+
+.widgetCount {
+  color: #555;
+  font-size: 1.3em;
+  font-weight: 400;
+  float: right;
+  margin-top: 7px;
+}

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

@@ -2,22 +2,25 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import styles from './style.css';
 import {Wizard, WizardNav} from 'coral-ui';
-import {Layout} from '../../components/ui/Layout';
+import Layout from 'coral-admin/src/components/ui/Layout';
 
 import {
-  nextStep,
-  previousStep,
   goToStep,
+  nextStep,
+  submitUser,
+  checkInstall,
+  previousStep,
+  finishInstall,
+  submitSettings,
   updateUserFormData,
   updateSettingsFormData,
-  submitSettings,
-  submitUser,
-  checkInstall
+  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 {
@@ -43,6 +46,7 @@ class InstallContainer extends Component {
                   <InitialStep/>
                   <AddOrganizationName/>
                   <CreateYourAccount/>
+                  <PermittedDomainsStep/>
                   <FinalStep/>
                 </Wizard>
               </div>
@@ -65,10 +69,14 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  checkInstall: next => dispatch(checkInstall(next)),
   nextStep: () => dispatch(nextStep()),
-  previousStep: () => dispatch(previousStep()),
   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));

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

@@ -2,25 +2,26 @@ import React from 'react';
 import styles from './style.css';
 import {TextField, Button} from 'coral-ui';
 
+const lang = new I18n(translations);
+import translations from '../../translations.json';
+import I18n from 'coral-framework/modules/i18n/i18n';
+
 const AddOrganizationName = props => {
   const {handleSettingsChange, handleSettingsSubmit, install} = props;
   return (
     <div className={styles.step}>
-      <p>
-        Please tell us the name of your organization. This will appear in emails when
-        inviting new team members
-      </p>
+      <p>{lang.t('ADD_ORGANIZATION.DESCRIPTION')}</p>
       <div className={styles.form}>
         <form onSubmit={handleSettingsSubmit}>
           <TextField
             className={styles.TextField}
             id="organizationName"
             type="text"
-            label='Organization name'
+            label={lang.t('ADD_ORGANIZATION.LABEL')}
             onChange={handleSettingsChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.organizationName} />
-          <Button type="submit" cStyle='black' full>Save</Button>
+          <Button type="submit" cStyle='black' full>{lang.t('ADD_ORGANIZATION.SAVE')}</Button>
         </form>
       </div>
     </div>

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

@@ -2,6 +2,10 @@ import React from 'react';
 import styles from './style.css';
 import {TextField, Button, Spinner} from 'coral-ui';
 
+const lang = new I18n(translations);
+import translations from '../../translations.json';
+import I18n from 'coral-framework/modules/i18n/i18n';
+
 const InitialStep = props => {
   const {handleUserChange, handleUserSubmit, install} = props;
   return (
@@ -12,7 +16,7 @@ const InitialStep = props => {
             className={styles.textField}
             id="email"
             type="email"
-            label='Email address'
+            label={lang.t('CREATE.EMAIL')}
             onChange={handleUserChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.email}
@@ -23,7 +27,7 @@ const InitialStep = props => {
             className={styles.textField}
             id="username"
             type="text"
-            label='Username'
+            label={lang.t('CREATE.USERNAME')}
             onChange={handleUserChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.username}
@@ -33,7 +37,7 @@ const InitialStep = props => {
             className={styles.textField}
             id="password"
             type="password"
-            label='Password'
+            label={lang.t('CREATE.PASSWORD')}
             onChange={handleUserChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.password}
@@ -43,7 +47,7 @@ const InitialStep = props => {
             className={styles.textField}
             id="confirmPassword"
             type="password"
-            label='Confirm Password'
+            label={lang.t('CREATE.CONFIRM_PASSWORD')}
             onChange={handleUserChange}
             showErrors={install.showErrors}
             errorMsg={install.errors.confirmPassword}
@@ -51,7 +55,7 @@ const InitialStep = props => {
 
           {
             !props.install.isLoading ?
-            <Button cStyle='black' type="submit" full>Save</Button>
+            <Button cStyle='black' type="submit" full>{lang.t('CREATE.SAVE')}</Button>
             :
             <Spinner />
           }

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

@@ -3,16 +3,16 @@ import styles from './style.css';
 import {Button} from 'coral-ui';
 import {Link} from 'react-router';
 
+const lang = new I18n(translations);
+import translations from '../../translations.json';
+import I18n from 'coral-framework/modules/i18n/i18n';
+
 const InitialStep = () => {
   return (
     <div className={`${styles.step} ${styles.finalStep}`}>
-      <p>
-        Thanks for installing Talk! We sent an email to verify your email
-        address. While you finish setting the account, you can start engaging
-        with your readers now.
-      </p>
-      <Button raised><Link to='/admin'>Launch Talk</Link></Button>
-      <Button cStyle='black' raised><a href="http://coralproject.net">Close this Installer</a></Button>
+      <p>{lang.t('FINAL.DESCRIPTION')}</p>
+      <Button raised><Link to='/admin'>{lang.t('FINAL.LAUNCH')}</Link></Button>
+      <Button cStyle='black' raised><a href="http://coralproject.net">{lang.t('FINAL.CLOSE')}</a></Button>
     </div>
   );
 };

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

@@ -2,16 +2,16 @@ 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>
-        The remainder of the Talk installation will take about ten minutes.
-        Once you complete the following two steps, you will have a free
-        installation and provision of Mongo and Redis.
-      </p>
-      <Button cStyle='green' onClick={nextStep} raised>Get Started</Button>
+      <p>{lang.t('INITIAL.DESCRIPTION')}</p>
+      <Button cStyle='green' onClick={nextStep} raised>{lang.t('INITIAL.SUBMIT')}</Button>
     </div>
   );
 };

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

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

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

@@ -59,6 +59,12 @@
       }
     }
   }
+
+  .card {
+    max-width: 500px;
+    margin: 20px auto;
+    text-align: left;
+  }
 }
 
 .finalStep {

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

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

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

@@ -1,34 +1,54 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
-import {Layout} from '../components/ui/Layout';
-import {checkLogin, logout} from '../actions/auth';
+import Layout from '../components/ui/Layout';
+import {checkLogin, handleLogin, logout, requestPasswordReset} from '../actions/auth';
+import {fetchConfig} from '../actions/config';
 import {FullLoading} from '../components/FullLoading';
-import {PermissionRequired} from '../components/PermissionRequired';
+import AdminLogin from '../components/AdminLogin';
 
 class LayoutContainer extends Component {
   componentWillMount () {
-    const {checkLogin} = this.props;
-    checkLogin().then(() => {
-      if (!this.props.auth.isAdmin) {
-        location.href = '/admin/login';
-      }
-    });
+    const {checkLogin, fetchConfig} = this.props;
+
+    checkLogin();
+    fetchConfig();
   }
   render () {
-    const {isAdmin, loggedIn, loadingUser} = this.props.auth;
+    const {
+      isAdmin,
+      loggedIn,
+      loadingUser,
+      loginError,
+      loginMaxExceeded,
+      passwordRequestSuccess
+    } = this.props.auth;
+
+    const {handleLogout, TALK_RECAPTCHA_PUBLIC} = this.props;
     if (loadingUser) { return <FullLoading />; }
-    if (!isAdmin) { return <PermissionRequired />; }
-    if (isAdmin && loggedIn) { return <Layout {...this.props} />; }
+    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()
+  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())
 });
 

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

@@ -3,6 +3,7 @@ import {connect} from 'react-redux';
 import {compose} from 'react-apollo';
 import key from 'keymaster';
 import isEqual from 'lodash/isEqual';
+import styles from './components/styles.css';
 
 import {modQueueQuery} from '../../graphql/queries';
 import {banUser, setCommentStatus} from '../../graphql/mutations';
@@ -17,22 +18,88 @@ import ModerationQueue from './ModerationQueue';
 import ModerationMenu from './components/ModerationMenu';
 import ModerationHeader from './components/ModerationHeader';
 import NotFoundAsset from './components/NotFoundAsset';
+import ModerationKeysModal from '../../components/ModerationKeysModal';
 
 class ModerationContainer extends Component {
+  state = {
+    selectedIndex: 0,
+    sort: 'REVERSE_CHRONOLOGICAL'
+  }
+
   componentWillMount() {
     const {toggleModal, singleView} = this.props;
 
     this.props.fetchSettings();
-
     key('s', () => singleView());
     key('shift+/', () => toggleModal(true));
     key('esc', () => toggleModal(false));
+    key('j', this.select(true));
+    key('k', this.select(false));
+    key('r', this.moderate(false));
+    key('t', this.moderate(true));
+  }
+
+  moderate = (accept) => () => {
+    const {acceptComment, rejectComment} = this.props;
+    const {selectedIndex} = this.state;
+    const comments = this.getComments();
+    const commentId = {commentId: comments[selectedIndex].id};
+
+    if (accept) {
+      acceptComment(commentId);
+    } else {
+      rejectComment(commentId);
+    }
+  }
+
+  getComments = () => {
+    const {data, route} = this.props;
+    const activeTab = route.path === ':id' ? 'premod' : route.path;
+    return data[activeTab];
+  }
+
+  select = (next) => () => {
+    if (next) {
+      this.setState(prevState =>
+        ({
+          ...prevState,
+          selectedIndex: prevState.selectedIndex < this.getComments().length - 1
+            ? prevState.selectedIndex + 1 : prevState.selectedIndex
+        }));
+    } else {
+      this.setState(prevState =>
+        ({
+          ...prevState,
+          selectedIndex: prevState.selectedIndex > 0 ?
+            prevState.selectedIndex - 1 : prevState.selectedIndex
+        }));
+    }
+  }
+
+  selectSort = (sort) => {
+    this.setState({sort});
+    this.props.modQueueResort(sort);
   }
 
   componentWillUnmount() {
     key.unbind('s');
     key.unbind('shift+/');
     key.unbind('esc');
+    key.unbind('j');
+    key.unbind('k');
+    key.unbind('r');
+    key.unbind('t');
+  }
+
+  componentDidUpdate(_, prevState) {
+
+    // If paging through using keybaord shortcuts, scroll the page to keep the selected
+    // comment in view.
+    if (prevState.selectedIndex !== this.state.selectedIndex) {
+
+      // the 'smooth' flag only works in FF as of March 2017
+      document.querySelector(`.${styles.selected}`).scrollIntoView({behavior: 'smooth'});
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -43,7 +110,7 @@ class ModerationContainer extends Component {
   }
 
   render () {
-    const {data, moderation, settings, assets, ...props} = this.props;
+    const {data, moderation, settings, assets, onClose, ...props} = this.props;
     const providedAssetId = this.props.params.id;
     const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;
 
@@ -54,7 +121,6 @@ class ModerationContainer extends Component {
     }
 
     if (data.error) {
-      console.log(data);
       return <div>Error</div>;
     }
 
@@ -66,6 +132,20 @@ class ModerationContainer extends Component {
       }
     }
 
+    const comments = data[activeTab];
+    let activeTabCount;
+    switch(activeTab) {
+    case 'premod':
+      activeTabCount = data.premodCount;
+      break;
+    case 'flagged':
+      activeTabCount = data.flaggedCount;
+      break;
+    case 'rejected':
+      activeTabCount = data.rejectedCount;
+      break;
+    }
+
     return (
       <div>
         <ModerationHeader asset={asset} />
@@ -74,22 +154,37 @@ class ModerationContainer extends Component {
           premodCount={data.premodCount}
           rejectedCount={data.rejectedCount}
           flaggedCount={data.flaggedCount}
+          selectSort={this.selectSort}
+          sort={this.state.sort}
         />
         <ModerationQueue
-          data={data}
           currentAsset={asset}
+          comments={comments}
           activeTab={activeTab}
+          singleView={moderation.singleView}
+          selectedIndex={this.state.selectedIndex}
+          bannedWords={settings.wordlist.banned}
           suspectWords={settings.wordlist.suspect}
           showBanUserDialog={props.showBanUserDialog}
           acceptComment={props.acceptComment}
           rejectComment={props.rejectComment}
+          loadMore={props.loadMore}
+          assetId={providedAssetId}
+          sort={this.state.sort}
+          commentCount={activeTabCount}
         />
         <BanUserDialog
           open={moderation.banDialog}
           user={moderation.user}
+          commentId={moderation.commentId}
           handleClose={props.hideBanUserDialog}
           handleBanUser={props.banUser}
+          showRejectedNote={moderation.showRejectedNote}
+          rejectComment={props.rejectComment}
         />
+      <ModerationKeysModal
+          open={moderation.modalOpen}
+          onClose={onClose}/>
       </div>
     );
   }
@@ -107,7 +202,7 @@ const mapDispatchToProps = dispatch => ({
   singleView: () => dispatch(singleView()),
   updateAssets: assets => dispatch(updateAssets(assets)),
   fetchSettings: () => dispatch(fetchSettings()),
-  showBanUserDialog: (user, commentId) => dispatch(showBanUserDialog(user, commentId)),
+  showBanUserDialog: (user, commentId, showRejectedNote) => dispatch(showBanUserDialog(user, commentId, showRejectedNote)),
   hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
 });
 

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

@@ -1,27 +1,30 @@
 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 = ({activeTab = 'premod', ...props}) => {
-  const areComments = props.data[activeTab].length;
+const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loadMore, activeTab, sort, ...props}) => {
   return (
-    <div id="moderationList">
+    <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
       <ul style={{paddingLeft: 0}}>
       {
-        areComments
-        ? props.data[activeTab].map((comment, i) => {
+        comments.length
+        ? comments.map((comment, i) => {
           const status = comment.action_summaries ? 'FLAGGED' : comment.status;
           return <Comment
             key={i}
             index={i}
             comment={comment}
+            commentType={activeTab}
+            selected={i === selectedIndex}
             suspectWords={props.suspectWords}
+            bannedWords={props.bannedWords}
             actions={actionsMap[status]}
             showBanUserDialog={props.showBanUserDialog}
             acceptComment={props.acceptComment}
@@ -32,17 +35,26 @@ const ModerationQueue = ({activeTab = 'premod', ...props}) => {
         : <EmptyCard>{lang.t('modqueue.emptyqueue')}</EmptyCard>
       }
       </ul>
+      <LoadMore
+        comments={comments}
+        loadMore={loadMore}
+        sort={sort}
+        tab={activeTab}
+        showLoadMore={comments.length < commentCount}
+        assetId={props.assetId}
+        />
     </div>
   );
 };
 
 ModerationQueue.propTypes = {
-  data: PropTypes.object.isRequired,
-  acceptComment: PropTypes.func.isRequired,
-  rejectComment: PropTypes.func.isRequired,
-  showBanUserDialog: PropTypes.func.isRequired,
+  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
+  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   currentAsset: PropTypes.object,
-  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired
+  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

@@ -6,8 +6,10 @@ import {Link} from 'react-router';
 
 import styles from './styles.css';
 import {Icon} from 'coral-ui';
-import ActionButton from '../../../components/ActionButton';
 import FlagBox from './FlagBox';
+import CommentType from './CommentType';
+import ActionButton from 'coral-admin/src/components/ActionButton';
+import BanUserButton from 'coral-admin/src/components/BanUserButton';
 
 const linkify = new Linkify();
 
@@ -17,50 +19,55 @@ const lang = new I18n(translations);
 
 const Comment = ({actions = [], ...props}) => {
   const links = linkify.getMatches(props.comment.body);
+  const linkText = links ? links.map(link => link.raw) : [];
   const actionSummaries = props.comment.action_summaries;
   return (
-    <li tabIndex={props.index}
-        className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
-      <div className={styles.itemHeader}>
-        <div className={styles.author}>
-          <span>{props.comment.user.name}</span>
+    <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
+      <div className={styles.container}>
+        <div className={styles.itemHeader}>
+          <div className={styles.author}>
+          <span>
+            {props.comment.user.name}
+          </span>
           <span className={styles.created}>
             {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
           </span>
-          {props.comment.action_summaries ? <p className={styles.flagged}>{lang.t('comment.flagged')}</p> : null}
+          <BanUserButton user={props.comment.user} onClick={() => props.showBanUserDialog(props.comment.user, props.comment.id, props.comment.status !== 'REJECTED')} />
+          <CommentType type={props.commentType} />
         </div>
-        <div className={styles.sideActions}>
-          {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
-           <div className={`actions ${styles.actions}`}>
-             {actions.map((action, i) =>
-               <ActionButton key={i}
-                 type={action}
-                 user={props.comment.user}
-                 acceptComment={() => props.acceptComment({commentId: props.comment.id})}
-                 rejectComment={() => props.rejectComment({commentId: props.comment.id})}
-                 showBanUserDialog={() => props.showBanUserDialog(props.comment.user, props.comment.id)}
-               />
-             )}
-           </div>
           {props.comment.user.status === 'banned' ?
             <span className={styles.banned}>
               <Icon name='error_outline'/>
               {lang.t('comment.banned_user')}
             </span>
-          : null}
+            : null}
         </div>
-      </div>
-      {!props.currentAsset && (
         <div className={styles.moderateArticle}>
-          Article: {props.comment.asset.title} <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate Article</Link>
+          Story: {props.comment.asset.title}
+          {!props.currentAsset && (
+            <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate &rarr;</Link>
+          )}
+        </div>
+        <div className={styles.itemBody}>
+          <p className={styles.body}>
+            <Highlighter
+              searchWords={[...props.suspectWords, ...props.bannedWords, ...linkText]}
+              textToHighlight={props.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={props.comment.user}
+                              acceptComment={() => props.acceptComment({commentId: props.comment.id})}
+                              rejectComment={() => props.rejectComment({commentId: props.comment.id})}
+                />
+              )}
+            </div>
+          </div>
         </div>
-      )}
-      <div className={styles.itemBody}>
-        <p className={styles.body}>
-          <Linkify component='span' properties={{style: linkStyles}}>
-            <Highlighter searchWords={props.suspectWords} textToHighlight={props.comment.body}/>
-          </Linkify>
-        </p>
       </div>
       {actionSummaries && <FlagBox actionSummaries={actionSummaries} />}
     </li>
@@ -71,8 +78,8 @@ 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,
-  isActive: PropTypes.bool.isRequired,
   comment: PropTypes.shape({
     body: PropTypes.string.isRequired,
     action_summaries: PropTypes.array,
@@ -87,9 +94,4 @@ Comment.propTypes = {
   })
 };
 
-const linkStyles = {
-  backgroundColor: 'rgb(255, 219, 135)',
-  padding: '1px 2px'
-};
-
 export default Comment;

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

@@ -0,0 +1,33 @@
+.commentType {
+  position: absolute;
+  right: 15px;
+  top: 11px;
+  color: white;
+  background: grey;
+  height: 32px;
+  box-sizing: border-box;
+  line-height: 29px;
+  padding: 2px 8px 2px 26px;
+  border-radius: 2px;
+  font-size: 12px;
+
+  i {
+    font-size: 14px;
+    position: absolute;
+    left: 6px;
+    top: 8px;
+    margin: 0;
+  }
+
+  &.premod {
+    background: #063B9A;
+  }
+
+  &.flagged {
+    background: #d03235;
+  }
+
+  &.no-type {
+    display: none;
+  }
+}

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

@@ -0,0 +1,30 @@
+import React, {PropTypes} from 'react';
+import styles from './CommentType.css';
+import {Icon} from 'coral-ui';
+
+const CommentType = props => {
+  const typeData = getTypeData(props.type);
+
+  return (
+    <span className={`${styles.commentType} ${styles[typeData.className]}`}>
+      <Icon name={typeData.icon}/>{typeData.text}
+    </span>
+  );
+};
+
+const getTypeData = type => {
+  switch (type) {
+  case 'premod':
+    return {icon: 'query_builder', text: 'Pre-Mod', className: 'premod'};
+  case 'flagged':
+    return {icon: 'flag', text: 'Flagged', className: 'flagged'};
+  default:
+    return {icon: 'flag', className: 'no-type'};
+  }
+};
+
+CommentType.propTypes = {
+  type: PropTypes.string.isRequired
+};
+
+export default CommentType;

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

@@ -0,0 +1,55 @@
+.flagBox {
+  border-top: 1px solid rgba(66, 66, 66, 0.12);
+
+  .container {
+    padding: 0 14px;
+  }
+
+  .detail {
+    padding: 0 20px 16px;
+    ul {
+      padding: 0;
+      list-style: none;
+      font-size: 12px;
+      font-weight: 500;
+    }
+  }
+
+  .header {
+    position: relative;
+    .moreDetail {
+      float: right;
+      font-size: 12px;
+      font-weight: 500;
+      margin-right: 10px;
+      margin-top: 8px;
+      color: black;
+
+      &:hover {
+        opacity: 0.9;
+        cursor: pointer;
+      }
+    }
+    i {
+      vertical-align: middle;
+      font-size: 12px;
+    }
+    ul {
+      vertical-align: middle;
+      list-style: none;
+      display: inline-block;
+      padding: 0;
+      margin-left: 10px;
+      font-size: 12px;
+    }
+  }
+
+  h3 {
+    vertical-align: middle;
+    margin: 0;
+    font-weight: 500;
+    display: inline-block;
+    margin-left: 7px;
+    font-size: 12px;
+  }
+}

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

@@ -1,16 +1,47 @@
-import React, {PropTypes} from 'react';
-import styles from './styles.css';
+import React, {Component, PropTypes} from 'react';
+import {Icon} from 'coral-ui';
+import styles from './FlagBox.css';
 
-const FlagBox = props => (
-  <div className={styles.flagBox}>
-    <h3>Flags:</h3>
-    <ul>
-      {props.actionSummaries.map((action, i) =>
-        <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
-      )}
-    </ul>
-  </div>
-);
+class FlagBox extends Component {
+  constructor () {
+    super();
+    this.state = {
+      showDetail: false
+    };
+  }
+
+  toggleDetail = () => {
+    this.setState((state) => ({
+      showDetail: !state.showDetail
+    }));
+  }
+
+  render() {
+    const {props} = this;
+    return (
+      <div className={styles.flagBox}>
+        <div className={styles.container}>
+          <div className={styles.header}>
+            <Icon name='flag'/><h3>Flags ({props.actionSummaries.length}):</h3>
+            <ul>
+              {props.actionSummaries.map((action, i) =>
+                <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
+              )}
+            </ul>
+            {/* <a onClick={this.toggleDetail} className={styles.moreDetail}>More detail</a>*/}
+          </div>
+          {this.state.showDetail && (<div className={styles.detail}>
+            <ul>
+              {props.actionSummaries.map((action, i) =>
+                <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
+              )}
+            </ul>
+          </div>)}
+        </div>
+      </div>
+    );
+  }
+}
 
 FlagBox.propTypes = {
   actionSummaries: PropTypes.array.isRequired

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

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

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

@@ -10,9 +10,9 @@ const ModerationHeader = props => (
           props.asset ?
             <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
               <Link className="mdl-tabs__tab" to="/admin/moderate">All Streams</Link>
-              <a className="mdl-tabs__tab">
-                {props.asset.title}
-                <a href={props.asset.url} className={styles.settingsButton}><Icon name="settings"/></a>
+              <a className="mdl-tabs__tab" href={props.asset.url}>
+                <span>{props.asset.title}</span>
+                <Icon className={styles.settingsButton} name="open_in_new"/>
               </a>
               <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
             </div>

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

@@ -1,30 +1,58 @@
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
 import CommentCount from './CommentCount';
 import styles from './styles.css';
+import { SelectField, Option } from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
 const lang = new I18n(translations);
 
-const ModerationMenu = ({asset, premodCount, rejectedCount, flaggedCount}) => {
-  const premodPath = asset ? `/admin/moderate/premod/${asset.id}` : '/admin/moderate/premod';
-  const rejectPath = asset ? `/admin/moderate/rejected/${asset.id}` : '/admin/moderate/rejected';
-  const flagPath = asset ? `/admin/moderate/flagged/${asset.id}` : '/admin/moderate/flagged';
+const ModerationMenu = (
+  { asset, premodCount, rejectedCount, flaggedCount, selectSort, sort }
+) => {
+  const premodPath = asset
+    ? `/admin/moderate/premod/${asset.id}`
+    : '/admin/moderate/premod';
+  const rejectPath = asset
+    ? `/admin/moderate/rejected/${asset.id}`
+    : '/admin/moderate/rejected';
+  const flagPath = asset
+    ? `/admin/moderate/flagged/${asset.id}`
+    : '/admin/moderate/flagged';
+
   return (
-    <div className='mdl-tabs'>
+    <div className="mdl-tabs">
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
+        <div className={styles.tabBarPadding} />
         <div>
-          <Link to={premodPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+          <Link
+            to={premodPath}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
             {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
           </Link>
-          <Link to={rejectPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+          <Link
+            to={flagPath}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
+          </Link>
+          <Link
+            to={rejectPath}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
             {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
           </Link>
-          <Link to={flagPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-            {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
-        </Link>
         </div>
+        <SelectField
+          className={styles.selectField}
+          label="Sort"
+          value={sort}
+          onChange={sort => selectSort(sort)}>
+          <Option value={'REVERSE_CHRONOLOGICAL'}>Newest First</Option>
+          <Option value={'CHRONOLOGICAL'}>Oldest First</Option>
+        </SelectField>
       </div>
     </div>
   );

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

@@ -8,6 +8,12 @@
 .tabBar {
   background-color: rgba(44, 44, 44, 0.89);
   z-index: 5;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tabBarPadding {
+  width: 150px;
 }
 
 .tab {
@@ -78,11 +84,10 @@ span {
   margin-bottom: -1px;
 
   .settingsButton {
-    i {
-      vertical-align: middle;
-      margin-left: 10px;
-      margin-top: -4px;
-    }
+    vertical-align: middle;
+    margin-left: 10px;
+    margin-top: -4px;
+    font-size: 16px;
   }
 
   .moderateAsset {
@@ -108,7 +113,15 @@ span {
       }
 
       &:nth-child(2) {
-       text-align: center;
+        span {
+          text-align: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          max-width: 344px;
+          display: inline-block;
+          vertical-align: top;
+        }
       }
 
       &:last-child {
@@ -130,7 +143,7 @@ span {
     display: none;
   }
 
-  &.singleView .listItem.activeItem {
+  &.singleView .listItem.selected {
     display: block;
     height: 100%;
     font-size: 1.5em;
@@ -141,7 +154,6 @@ span {
       position: fixed;
       bottom: 60px;
       left: 25%;
-      margin: 0 auto;
       display: flex;
       justify-content: space-around;
       width: 50%;
@@ -156,16 +168,20 @@ span {
 
 .listItem {
   border-bottom: 1px solid #e0e0e0;
-  font-size: 16px;
+  font-size: 18px;
   width: 100%;
-  max-width: 660px;
+  max-width: 700px;
   min-width: 400px;
   margin: 0 auto;
-  padding: 16px 14px;
   position: relative;
-  transition: box-shadow 200ms;
-  margin-top: 0;
+  transition: all 200ms;
+  padding: 10px 0 0;
+  min-height: 220px;
 
+  .container {
+    padding: 0 14px;
+    min-height: 180px;
+  }
 
   &:hover {
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
@@ -175,6 +191,11 @@ span {
     border-bottom: none;
   }
 
+  &.selected {
+    max-width: 720px;
+    max-height: 410px;
+  }
+
   .context {
     a {
       color: #f36451;
@@ -184,11 +205,8 @@ span {
   }
 
    .sideActions {
-     position: absolute;
-     right: 0;
      height: 100%;
      top: 0;
-     padding: 40px 18px;
      box-sizing: border-box;
    }
 
@@ -198,15 +216,21 @@ span {
     justify-content: space-between;
 
     .author {
+      font-weight: 300;
       min-width: 230px;
       display: flex;
       align-items: center;
+      color: #262626;
+      font-size: 16px;
     }
   }
 
   .itemBody {
     display: flex;
     justify-content: space-between;
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 300;
   }
 
   .avatar {
@@ -220,9 +244,11 @@ span {
   }
 
   .created {
-    color: #666;
-    font-size: 13px;
-    margin-left: 40px;
+    color: #262626;
+    font-size: 14px;
+    margin-left: 15px;
+    line-height: 1px;
+    font-weight: 300;
   }
 
   .actionButton {
@@ -233,10 +259,11 @@ span {
   .body {
     margin-top: 0px;
     flex: 1;
-    font-size: 0.88em;
     color: black;
     max-width: 500px;
     word-wrap: break-word;
+    font-weight: 300;
+    font-size: 16px;
   }
 
   .flagged {
@@ -304,20 +331,29 @@ span {
 }
 
 .Comment {
+
   .moderateArticle {
-    font-size: 12px;
+    font-size: 14px;
+    margin: 10px 0;
+    font-weight: 500;
+    line-height: 1.2;
+    max-width: 500px;
+
     a {
       display: inline-block;
-      color: #679af3;
+      color: #063b9a;
       text-decoration: none;
-      font-size: 1em;
-      font-weight: 400;
+      font-weight: 500;
       letter-spacing: .5px;
-      font-size: 12px;
       margin-left: 10px;
 
+      font-size: 13px;
+      margin-left: 5px;
+      padding-bottom: 0px;
+      border-bottom: solid 1px;
+      line-height: 16px;
+
       &:hover {
-        text-decoration: underline;
         opacity: .9;
         cursor: pointer;
        }
@@ -325,12 +361,60 @@ span {
   }
 }
 
-.flagBox {
-  max-width: 480px;
-  border-top: 1px solid rgba(66, 66, 66, 0.12);
-  h3 {
-    font-size: 14px;
-    margin: 0;
-    font-weight: 500;
+.selectField {
+  position: relative;
+  width: 140px;
+  height: 36px;
+  top: 5px;
+  margin-right: 10px;
+  background: #FFF;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  > div {
+    padding: 0;
   }
+
+  i {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+  }
+
+  input {
+    padding: 0;
+    font-size: 13px;
+    letter-spacing: 0.7px;
+    font-weight: 400;
+  }
+
+  label {
+    top: -4px;
+  }
+
+  &:hover {
+    cursor: pointer;
+   }
+}
+
+.loadMoreContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+};
+
+.loadMore {
+  width: 100%;
+  text-align: center;
+  color: #FFF;
+  max-width: 660px;
+  margin-bottom: 30px;
+  background-color: #2376D8;
+  cursor: pointer;
+}
+
+.loadMore:hover {
+  background-color: #4399FF;
 }

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

@@ -1,13 +1,14 @@
 export const actionsMap = {
-  PREMOD: ['REJECT', 'APPROVE', 'BAN'],
-  FLAGGED: ['REJECT', 'APPROVE', 'BAN'],
-  REJECTED: ['APPROVE']
+  PREMOD: ['APPROVE', 'REJECT'],
+  FLAGGED: ['APPROVE', 'REJECT'],
+  REJECTED: ['APPROVE', 'REJECTED']
 };
 
 export const menuActionsMap = {
-  'REJECT': {status: 'REJECTED', icon: 'close', key: 'r'},
-  'APPROVE': {status: 'ACCEPTED', icon: 'done', key: 't'},
-  'FLAGGED': {status: 'FLAGGED', icon: 'flag', filter: 'Untouched'},
-  'BAN': {status: 'BANNED', icon: 'not interested'},
+  '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/Stories/Stories.js

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

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

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

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

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

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

@@ -22,7 +22,26 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
           commentId,
           status: 'ACCEPTED'
         },
-        refetchQueries: ['ModQueue']
+        updateQueries: {
+          ModQueue: (oldData) => {
+            const premod = oldData.premod.filter(c => c.id !== commentId);
+            const flagged = oldData.flagged.filter(c => c.id !== commentId);
+            const rejected = oldData.rejected.filter(c => c.id !== commentId);
+            const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
+            const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
+            const rejectedCount = rejected.length < oldData.rejected.length ? oldData.rejectedCount - 1 : oldData.rejectedCount;
+
+            return {
+              ...oldData,
+              premodCount,
+              flaggedCount,
+              rejectedCount,
+              premod,
+              flagged,
+              rejected,
+            };
+          }
+        }
       });
     },
     rejectComment: ({commentId}) => {
@@ -31,7 +50,27 @@ export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
           commentId,
           status: 'REJECTED'
         },
-        refetchQueries: ['ModQueue']
+        updateQueries: {
+          ModQueue: (oldData) => {
+            const comment = oldData.premod.concat(oldData.flagged).filter(c => c.id === commentId)[0];
+            const rejected = [comment].concat(oldData.rejected);
+            const premod = oldData.premod.filter(c => c.id !== commentId);
+            const flagged = oldData.flagged.filter(c => c.id !== commentId);
+            const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
+            const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
+            const rejectedCount = oldData.rejectedCount + 1;
+
+            return {
+              ...oldData,
+              premodCount,
+              flaggedCount,
+              rejectedCount,
+              premod,
+              flagged,
+              rejected
+            };
+          }
+        }
       });
     }
   })

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

@@ -1,30 +1,78 @@
 import {graphql} from 'react-apollo';
 
-import MOST_FLAGS from './mostFlags.graphql';
 import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
-
-export const mostFlags = graphql(MOST_FLAGS, {
-  options: () => {
-
-    // currently hard-coded per Greg's advice
-    const fiveMinutesAgo = new Date();
-    fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 305);
-    return {
-      variables: {
-        sort: 'FLAG',
-        from: fiveMinutesAgo.toISOString(),
-        to: new Date().toISOString()
-      }
-    };
-  }
-});
+import MOD_QUEUE_LOAD_MORE from './loadMore.graphql';
+import METRICS from './metricsQuery.graphql';
 
 export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
   options: ({params: {id = null}}) => {
     return {
       variables: {
-        asset_id: id
+        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 '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:{data:{comments}}}) => {
+      return {
+        ...oldData,
+        [tab]: [
+          ...oldData[tab],
+          ...comments
+        ]
+      };
+    }
+  });
+};
+
+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

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

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

@@ -0,0 +1,10 @@
+#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,16 +1,18 @@
 #import "../fragments/commentView.graphql"
 
-query ModQueue ($asset_id: ID) {
+query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
     premod: comments(query: {
         statuses: [PREMOD],
-        asset_id: $asset_id
+        asset_id: $asset_id,
+        sort: $sort
     }) {
         ...commentView
     }
     flagged: comments(query: {
         action_type: FLAG,
         asset_id: $asset_id,
-        statuses: [NONE, PREMOD]
+        statuses: [NONE, PREMOD],
+        sort: $sort
     }) {
         ...commentView
         action_summaries {
@@ -22,7 +24,8 @@ query ModQueue ($asset_id: ID) {
     }
     rejected: comments(query: {
         statuses: [REJECTED],
-        asset_id: $asset_id
+        asset_id: $asset_id,
+        sort: $sort
     }) {
         ...commentView
     }

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

@@ -1,14 +0,0 @@
-query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) {
-  metrics(from: $from, to: $to, sort: $sort) {
-    id
-    title
-    url
-    commentCount
-    author
-    created_at
-    action_summaries {
-      actionCount
-      actionableItemCount
-    }
-  }
-}

client/coral-admin/src/index.js

@@ -7,6 +7,9 @@ import store from './services/store';
 
 import App from './components/App';
 
+import 'react-mdl/extra/material.css';
+import 'react-mdl/extra/material.js';
+
 render(
   <ApolloProvider client={client} store={store}>
     <App />

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

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

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

@@ -4,7 +4,10 @@ import * as actions from '../constants/auth';
 const initialState = Map({
   loggedIn: false,
   user: null,
-  isAdmin: false
+  isAdmin: false,
+  loginError: null,
+  loginMaxExceeded: false,
+  passwordRequestSuccess: null
 });
 
 export default function auth (state = initialState, action) {
@@ -25,6 +28,20 @@ export default function auth (state = initialState, action) {
       .set('user', action.user);
   case actions.LOGOUT_SUCCESS:
     return initialState;
+  case actions.LOGIN_REQUEST:
+    return state.set('loginError', null);
+  case actions.LOGIN_SUCCESS:
+    return state.set('loginMaxExceeded', false).set('loginError', null);
+  case actions.LOGIN_FAILURE:
+    return state.set('loginError', action.message);
+  case actions.FETCH_FORGOT_PASSWORD_REQUEST:
+    return state.set('passwordRequestSuccess', null);
+  case actions.FETCH_FORGOT_PASSWORD_SUCCESS:
+    return state.set('passwordRequestSuccess', 'If you have a registered account, a password reset link was sent to that email.');
+  case actions.LOGIN_MAXIMUM_EXCEEDED:
+    return state
+      .set('loginMaxExceeded', true)
+      .set('loginError', action.message);
   default :
     return state;
   }

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

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

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

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

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

@@ -1,4 +1,4 @@
-import {Map} from 'immutable';
+import {Map, List} from 'immutable';
 
 import * as actions from '../constants/install';
 
@@ -6,7 +6,10 @@ const initialState = Map({
   isLoading: false,
   data: Map({
     settings: Map({
-      organizationName: ''
+      organizationName: '',
+      domains: Map({
+        whitelist: List()
+      })
     }),
     user: Map({
       username: '',
@@ -33,6 +36,10 @@ const initialState = Map({
   {
     text: '2. Create your account',
     step: 2
+  },
+  {
+    text: '3. Domain Whitelist',
+    step: 3
   }],
   installRequest: null,
   installRequestError: null,
@@ -50,6 +57,9 @@ export default function install (state = initialState, action) {
   case actions.GO_TO_STEP:
     return state
       .set('step', action.step);
+  case actions.UPDATE_PERMITTED_DOMAINS_SETTINGS:
+    return state
+      .setIn(['data', 'settings', 'domains', 'whitelist'], action.value);
   case actions.UPDATE_FORMDATA_SETTINGS:
     return state
       .setIn(['data', 'settings', action.name], action.value);

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

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

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

@@ -1,11 +1,22 @@
 import {Map, List} from 'immutable';
 import * as actions from '../actions/settings';
 
+// this is initialized here because
+// currently you have to reload the dashboard to get new stats
+// cleaner updates are planned in the future.
+// TODO: if there are more than two fields for the dashboard being created here,
+// please create a new reducer specifically for the Dashboard.
+const DASHBOARD_WINDOW_MINUTES = 5;
+let then = new Date();
+then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
+
 const initialState = Map({
   wordlist: Map({
     banned: List(),
     suspect: List()
   }),
+  dashboardWindowStart: then.toISOString(),
+  dashboardWindowEnd: new Date().toISOString(),
   domains: Map({
     whitelist: List()
   }),
@@ -22,7 +33,7 @@ export default function settings (state = initialState, action) {
       .set('fetchSettingsError', null);
   case actions.SETTINGS_RECEIVED:
     return state.merge({
-      fetchingSettings: null,
+      fetchingSettings: false,
       fetchSettingsError: null,
       ...action.settings
     });
@@ -32,7 +43,7 @@ export default function settings (state = initialState, action) {
       .set('fetchSettingsError', action.error);
   case actions.SETTINGS_UPDATED:
     return state.merge({
-      fetchingSettings: null,
+      fetchingSettings: false,
       fetchSettingsError: null,
       ...action.settings
     });

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

@@ -2,6 +2,7 @@ import ApolloClient, {addTypename} from 'apollo-client';
 import getNetworkInterface from './transport';
 
 export const client = new ApolloClient({
+  addTypename: true,
   queryTransformer: addTypename,
   dataIdFromObject: (result) => {
     if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle

client/coral-admin/src/translations.json

@@ -1,5 +1,9 @@
 {
   "en": {
+    "errors": {
+      "NOT_AUTHORIZED": "Your username or password is not recognized by our system.",
+      "LOGIN_MAXIMUM_EXCEEDED": "You have made too many unsuccessful password attempts. Please wait."
+    },
     "community": {
       "username_and_email": "Username and Email",
       "account_creation_date": "Account Creation Date",
@@ -50,6 +54,10 @@
       "copy": "Copy to Clipboard"
     },
     "configure": {
+      "closed-stream-settings": "Closed Stream Message",
+      "stream-settings": "Stream Settings",
+      "moderation-settings": "Moderation Settings",
+      "tech-settings": "Tech Settings",
       "custom-css-url": "Custom CSS URL",
       "custom-css-url-desc": "URL of a CSS stylesheet that will override default Embed Stream styles. Can be internal or external.",
       "dashboard": "Dashboard",
@@ -57,13 +65,13 @@
       "enable-pre-moderation-text": "Moderators must approve any comment before it is published.",
       "require-email-verification": "Require Email Verification",
       "require-email-verification-text": "New Users must verify their email before commenting",
-      "include-comment-stream": "Include Comment Stream Description for Readers.",
+      "include-comment-stream": "Include Comment Stream Description for Readers",
       "include-comment-stream-desc": "Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.",
       "include-text": "Include your text here.",
+      "enable-premod-links": "Pre-Moderate Comments Containing Links",
+      "enable-premod-links-text": "Moderators must approve any comment containing a link before its published.",
       "comment-settings": "Settings",
       "embed-comment-stream": "Embed Stream",
-      "banned-word-header": "Write the banned words list",
-      "suspect-word-header": "Write the suspect words list",
       "banned-word-text": "Comments which contain these words or phrases (not case-sensitive) will be automatically removed from the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list.",
       "suspect-word-text": "Comments which contain these words or phrases (not case-sensitive) will be highlighted in the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list.",
       "wordlist": "Banned Words",
@@ -74,8 +82,8 @@
       "moderate": "Moderate",
       "configure": "Configure",
       "community": "Community",
-      "streams": "Streams",
-      "closed-comments-desc": "Write a message for closed threads",
+      "stories": "Stories",
+      "closed-comments-desc": "Write a message to be displayed when when your comment stream is closed and no longer accepting comments.",
       "closed-comments-label": "Write a message...",
       "hours": "Hours",
       "days": "Days",
@@ -83,10 +91,10 @@
       "close-after": "Close comments after",
       "comment-count-header": "Limit Comment Length",
       "comment-count-text-pre":  "Comments will be limited to ",
-      "comment-count-text-post": " characters.",
+      "comment-count-text-post": " characters",
       "comment-count-error": "Please enter a valid number.",
-      "domain-list-title": "Domain Whitelist",
-      "domain-list-text": "Some instructions on how to type the urls."
+      "domain-list-title": "Permitted Domains",
+      "domain-list-text": "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)."
     },
     "bandialog": {
       "ban_user": "Ban User?",
@@ -110,8 +118,13 @@
       "write_message": "Write a message"
     },
     "dashboard": {
+      "next-update": "{0} minutes until next update.",
+      "auto-update": "Data automatically updates every five minutes or when you Reload.",
       "no_flags": "There have been no flags in the last 5 minutes! Hooray!",
-      "comment_count": "Comments"
+      "no_likes": "There have been no likes in the last 5 minutes. All quiet.",
+      "flags": "Flags",
+      "no_activity": "There haven't been any comments anywhere in the last five minutes.",
+      "comment_count": "comments"
     },
     "streams": {
       "empty_result": "No assets match this search. Maybe try widening your search?",
@@ -126,25 +139,57 @@
       "sort-by": "Sort By",
       "open": "Open",
       "closed": "Closed",
-      "article": "Article",
+      "article": "Story",
       "pubdate": "Publication Date",
-      "status": "Status"
+      "status": "Stream Status"
     }
   },
   "es": {
+    "errors": {
+      "NOT_AUTHORIZED": "Acción no autorizada.",
+      "LOGIN_MAXIMUM_EXCEEDED": "Ha realizado demasiados intentos fallidos de colocar la contraseña. Por favor espere."
+    },
     "community": {
       "username_and_email": "Usuario y E-mail",
       "account_creation_date": "Fecha de creación de la cuenta",
       "newsroom_role": "Rol en la redacción",
-      "admin": "Administrador",
-      "moderator": "Moderador",
+      "admin": "Administradora",
+      "moderator": "Moderadora",
       "role": "Seleccionar rol...",
-      "no-results": "No se encontraron usuarios con ese nombre de usuario o correo electronico.",
+      "no-results": "No se encontraron usuarixs con ese nombre de usuario o e-mail.",
       "status": "Estado",
       "select-status": "Seleccionar estado...",
       "active": "Activa",
       "banned": "Suspendido",
       "banned-user": "Usuario Suspendido",
+      "loading": "Cargando resultados",
+      "flaggedaccounts": "Nombres de Usuario Reportados",
+      "people": "Gente",
+      "no-flagged-accounts": "No hay ninguna cuenta reportada.",
+      "I don't like this username": "No me gusta ese nombre de usuario",
+      "This user is impersonating": "Suplantación",
+      "This looks like an ad/marketing": "Spam/Propaganda",
+      "This username is offensive": "Ofensivo",
+      "Other": "Otros",
+      "ban_user": "Quieres suspender al Usuario?",
+      "are_you_sure": "Estas segura que quieres suspender a {0}?",
+      "note": "Nota: Suspender a este usuario no le va a permitir (al usuario) borrar ni editar ni comentar.",
+      "cancel": "Cancelar",
+      "yes_ban_user": "Si, Suspendan el usuario"
+    },
+    "suspenduser": {
+      "title": "Suspendiendo un usuario",
+      "title_0": "¿Esta queriendo suspender un usuario?",
+      "description_0": "¿Le gustaría suspender a esta usuaria temporalmente devido a su nombre de usuario? Si lo hace sus comentarios serán escondidos temporalmente hasta que el usuario pueda cambiar su nombre.",
+      "title_1": "Enviarle un correo al usuario informandole que su cuenta fue suspendida",
+      "description_1": "Si suspende a este usuario, su cuenta va a ser deshabilitada y todos sus comentarios escondidos del sitio.",
+      "no_cancel": "No, cancelar",
+      "yes_suspend": "Si, suspender",
+      "send": "Enviar",
+      "username": "nombre de usuario",
+      "email_subject": "Su cuenta ha sido suspendida temporalmente",
+      "email": "Una persona de la comunidad recientemente marcó su nombre de usuario para ser revisado. Por su contenido, el nombre de usuario ha sido rechazado. Esto quiere decir que no puede comentar, gustar o marcar contenido hasta que modifique su nombre de usuario. Por favor, envienos un correo si tiene alguna pregunta o comentario.",
+      "write_message": "Escribir un mensaje",
       "loading": "Cargando resultados"
     },
     "modqueue": {
@@ -164,37 +209,41 @@
       "banned_user": "Usuario Suspendido"
     },
     "user": {
-      "user_bio": "",
-      "bio_flags": "",
-      "username_flags": ""
+      "user_bio": "marcas para este usuario",
+      "bio_flags": "marcas para esta biografia",
+      "username_flags": "marcas para este nombre de usuario"
     },
     "configure": {
+      "closed-stream-settings": "Mensaje a enviar cuando los comentarios están cerrados en el artículo",
+      "stream-settings": "Configuración de Comentarios",
+      "moderation-settings": "Configuración de Moderación",
+      "tech-settings": "Configuración Técnica",
       "custom-css-url": "URL CSS a medida",
-      "custom-css-url-desc": "URL de una hoja de estilo que va a sobrescribir los estilos por defecto de Embed Stream. Puede ser interna o externa.",
+      "custom-css-url-desc": "URL de una hoja de estilo que va a sobrescribir los estilos por defecto del hilo de comentarios. Puede ser interna o externa.",
       "dashboard": "Panel",
       "enable-pre-moderation": "Habilitar pre-moderación",
       "enable-pre-moderation-text": "Los moderadores deben aprobar cada comentario antes de que sea publicado.",
-      "require-email-verification": "Necesita confirmación de correo",
-      "require-email-verification-text": "Nuevos usuarios deben verificar sus correos antes de comentar",
+      "require-email-verification": "Necesita confirmación de e-mail",
+      "require-email-verification-text": "Nuevos usuarios deben verificar sus e-mails antes de comentar",
       "include-comment-stream": "Incluir la Descripción a un Hilo de Comentario para los y las Lectoras.",
       "include-comment-stream-desc": "Escribir un mensaje que será agregado a la parte de arriba del tu hilo de comentarios. Por ejemplo, un tema, guias de comunidad, etc.",
       "include-text": "Incluir tu texto aqui.",
       "comment-settings": "Configuración de Comentarios",
       "embed-comment-stream": "Colocar Hilo de Comentarios",
-      "wordlist": "Palabras Suspendidas y Suspechosas",
-      "banned-word-header": "Escribir las palabras no permitidas",
-      "suspect-word-header": "Write the suspect words list",
-      "banned-word-text": "Comentarios que contengan estas palabras o frases, no separadas por comas y en mayusculas o minusuculas, serán automaticamente separadas de los comentarios publicados.",
-      "suspect-word-text": "Comments which contain these words or phrases (not case-sensitive) will be highlighted in the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list.",
-      "banned-words-title": "Banned words list",
-      "suspect-words-title": "Suspect words list",
+      "enable-premod-links": "Pre-Moderar Commentarios que contienen Enlaces",
+      "enable-premod-links-text": "Los y las Moderadoras deben aprobar cualquier comentario que contengan links antes de su publicación.",
+      "wordlist": "Palabras Suspendidas y Sospechosas",
+      "banned-word-text": "Comentarios que contengan estas palabras o frases, no separadas por comas y en mayusculas o minusuculas, serán automaticamente marcadas para separar los comentarios publicados.",
+      "suspect-word-text": "Comentarios que contengan estas palabras o frases, considerando mayusculas y minusculas, serán automaticamente  destacadas en los comentarios publicados. Escribir una palabra y apretar Enter o Tabulador para agergarla. Opcionalmente pegar una lista separada por coma.",
+      "banned-words-title": "Lista de palabras prohibidas",
+      "suspect-words-title": "Lista de palabras sospechosas",
       "save-changes": "Guardar Cambios",
       "copy-and-paste": "Copiar y pegar el código de más abajo en tu CMS para colocar la caja de comentarios en tus articulos",
       "moderate": "Moderar",
       "configure": "Configurar",
       "community": "Comunidad",
-      "streams": "Streams",
-      "closed-comments-desc": "Escribe un mensaje para cuando los comentarios se encuentran cerrados",
+      "stories": "Artículos",
+      "closed-comments-desc": "Escribe un mensaje que será mostrado cuando los comentarios estén cerrados y no se acepten más comentarios.",
       "closed-comments-label": "Escribe un mensaje...",
       "never": "Nunca",
       "hours": "Horas",
@@ -206,38 +255,41 @@
       "comment-count-text-post": " caracteres",
       "comment-count-error": "Por favor escribe un número válido.",
       "domain-list-title": "Lista de Dominios Permitidos",
-      "domain-list-text": "Instrucciones de como ingresar las URLs."
+      "domain-list-text": "Agrega dominios permitidos a Talk, por ejemplo tu localhost, staging y ambientes de producción (ej. localhost:3000, staging.domain.com, domain.com)."
     },
     "embedlink": {
       "copy": "Copiar"
     },
     "bandialog": {
-      "ban_user": "Quieres suspender el Usuario?",
-      "are_you_sure": "Estas segura que quieres suspender a {props.author.username}?",
-      "note": "Nota: Suspender este usuario también va a colocar este comentario en la cola de Rechazados.",
+      "ban_user": "¿Quieres suspender el Usuario?",
+      "are_you_sure": "¿Estás segura que quieres suspender a {0}?",
+      "note": "Nota: Suspender a este usuario también va a colocar este comentario en la cola de Rechazados.",
       "cancel": "Cancelar",
       "yes_ban_user": "Si, Suspendan el usuario"
     },
     "dashbord": {
+      "next-update": "{0} minutos hasta la siguiente actualización.",
+      "auto-update": "Los datos se actualizan automaticamente cada 5 minutos o cuando recargas.",
       "no_flags": "¡Nadie ha marcado nada en los últimos 5 minutos! ¡Bravo!",
-      "comment_count": "Comentarios"
+      "no_likes": "A nadie le ha gustado algún comentario en los últimos 5 minutos. Todo tranquilo.",
+      "flags": "Marcados",
+      "no_activity": "No hubo comentarios en los ultimos 5 minutos",
+      "comment_count": "comentarios"
     },
     "streams": {
-      "empty_result": "No se encuentro articulo con esta busqueda. Tal vez extender la busqueda?",
-      "search": "",
-      "filter-streams": "",
-      "stream-status": "",
-      "all": "",
-      "open": "",
-      "closed": "",
-      "newest": "",
-      "oldest": "",
-      "sort-by": "",
-      "open": "",
-      "closed": "",
-      "article": "",
-      "pubdate": "",
-      "status": ""
+      "empty_result": "No se encuentro articulo con esta busqueda. ¿Tal vez puedas extender la busqueda?",
+      "search": "buscar",
+      "filter-streams": "Filtrar Hilos de Comentarios",
+      "stream-status": "Estado del Hilo de Comentarios",
+      "all": "todxs",
+      "open": "abrir",
+      "closed": "cerrado",
+      "newest": "más nuevoß",
+      "oldest": "más viejo",
+      "sort-by": "ordenar por",
+      "article": "artículo",
+      "pubdate": "Fecha de Pblicación",
+      "status": "Estado"
     }
   }
 }

client/coral-configure/components/ConfigureCommentStream.js

@@ -34,6 +34,18 @@ export default ({handleChange, handleApply, changed, updateQuestionBoxContent, .
               description: lang.t('configureCommentStream.enablePremodDescription')
             }} />
         </li>
+        <li>
+          <Checkbox
+            className={styles.checkbox}
+            cStyle={changed ? 'green' : 'darkGrey'}
+            name="premodLinks"
+            onChange={handleChange}
+            defaultChecked={props.premodLinks}
+            info={{
+              title: lang.t('configureCommentStream.enablePremodLinks'),
+              description: lang.t('configureCommentStream.enablePremodLinksDescription')
+            }} />
+        </li>
         <li>
           <Checkbox
             className={styles.checkbox}

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -31,13 +31,14 @@ class ConfigureStreamContainer extends Component {
     const questionBoxEnable = elements.qboxenable.checked;
     const questionBoxContent = elements.qboxcontent.value;
 
-    // const premodLinks = elements.premodLinks.checked;
+    const premodLinksEnable = elements.premodLinks.checked;
     const {changed} = this.state;
 
     const newConfig = {
       moderation: premod ? 'PRE' : 'POST',
       questionBoxEnable,
-      questionBoxContent
+      questionBoxContent,
+      premodLinksEnable
     };
 
     if (changed) {
@@ -77,10 +78,9 @@ class ConfigureStreamContainer extends Component {
   }
 
   render () {
-    const status = this.props.asset.closedAt === null ? 'open' : 'closed';
-    const premod = this.props.asset.settings.moderation === 'PRE';
-    const questionBoxEnable = this.props.asset.settings.questionBoxEnable;
-    const questionBoxContent = this.props.asset.settings.questionBoxContent;
+    const {settings, closedAt} = this.props.asset;
+    const status = closedAt === null ? 'open' : 'closed';
+    const premod = settings.moderation === 'PRE';
 
     return (
       <div>
@@ -88,11 +88,11 @@ class ConfigureStreamContainer extends Component {
           handleChange={this.handleChange}
           handleApply={this.handleApply}
           changed={this.state.changed}
-          premodLinks={false}
+          premodLinks={settings.premodLinks}
           premod={premod}
           updateQuestionBoxContent={this.updateQuestionBoxContent}
-          questionBoxEnable={questionBoxEnable}
-          questionBoxContent={questionBoxContent}
+          questionBoxEnable={settings.questionBoxEnable}
+          questionBoxContent={settings.questionBoxContent}
         />
         <hr />
         <h3>{status === 'open' ? 'Close' : 'Open'} Comment Stream</h3>

client/coral-configure/translations.json

@@ -20,8 +20,8 @@
       "description": "Como Administrador/a puedes modificar las opciones de los comentarios en este artículo",
       "enablePremod": "Activar Pre Moderación",
       "enablePremodDescription": "Los y las Moderadoras deben aprobar cualquier comentario antes de su publicación",
-      "enablePremodLinks": "Pre-Moderar Commentarios que contienen Links",
-      "enablePremodLinksDescription": "Los y las Moderadoras deben probar cualquier comentario que contengan links antes de su publicación.",
+      "enablePremodLinks": "Pre-Moderar Comentarios que contienen Enlaces",
+      "enablePremodLinksDescription": "Los y las moderadoras deben aprobar cualquier comentario que contengan enlaces antes de su publicación.",
       "enableQuestionBox": "Hacer una pregunta a los y las lectoras.",
       "enableQuestionBoxDescription": "Esta pregunta aparecera en la parte de arriba del hilo de comentarios.",
       "includeQuestionHere": "Escribir la pregunta aquí."

client/coral-embed-stream/src/Comment.css

@@ -1,3 +1,13 @@
 .Reply {
   position: relative;
+  margin-bottom: 15px;
+}
+
+.Comment {
+  margin-bottom: 15px;
+}
+
+.pendingComment {
+  filter: blur(2px);
+  pointer-events: none;
 }

client/coral-embed-stream/src/Comment.js

@@ -17,6 +17,7 @@ import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
 import LikeButton from 'coral-plugin-likes/LikeButton';
+import {BestButton, IfUserCanModifyBest, BEST_TAG, commentIsBest, BestIndicator} from 'coral-plugin-best/BestButton';
 import LoadMore from 'coral-embed-stream/src/LoadMore';
 
 import styles from './Comment.css';
@@ -25,6 +26,11 @@ const getActionSummary = (type, comment) => comment.action_summaries
   .filter((a) => a.__typename === type)[0];
 const isStaff = (tags) => !tags.every((t) => t.name !== 'STAFF') ;
 
+// hold actions links (e.g. Like, Reply) along the comment footer
+const ActionButton = ({children}) => {
+  return <span className="comment__action-button comment__action-button--nowrap">{ children }</span>;
+};
+
 class Comment extends React.Component {
 
   constructor(props) {
@@ -37,13 +43,14 @@ class Comment extends React.Component {
 
     // id of currently opened ReplyBox. tracked in Stream.js
     activeReplyBox: PropTypes.string.isRequired,
+    disableReply: PropTypes.bool,
     setActiveReplyBox: PropTypes.func.isRequired,
-    refetch: PropTypes.func.isRequired,
     showSignInDialog: PropTypes.func.isRequired,
     postFlag: PropTypes.func.isRequired,
     postLike: PropTypes.func.isRequired,
     deleteAction: PropTypes.func.isRequired,
     parentId: PropTypes.string,
+    highlighted: PropTypes.string,
     addNotification: PropTypes.func.isRequired,
     postItem: PropTypes.func.isRequired,
     depth: PropTypes.number.isRequired,
@@ -74,7 +81,13 @@ class Comment extends React.Component {
         id: PropTypes.string.isRequired,
         name: PropTypes.string.isRequired
       }).isRequired
-    }).isRequired
+    }).isRequired,
+
+    // dispatch action to add a tag to a comment
+    addCommentTag: React.PropTypes.func,
+
+    // dispatch action to remove a tag from a comment
+    removeCommentTag: React.PropTypes.func,
   }
 
   render () {
@@ -85,34 +98,69 @@ class Comment extends React.Component {
       asset,
       depth,
       postItem,
-      refetch,
       addNotification,
       showSignInDialog,
       postLike,
+      highlighted,
       postFlag,
+      postDontAgree,
       loadMore,
       setActiveReplyBox,
       activeReplyBox,
-      deleteAction
+      deleteAction,
+      addCommentTag,
+      removeCommentTag,
+      disableReply,
     } = this.props;
 
     const like = getActionSummary('LikeActionSummary', comment);
     const flag = getActionSummary('FlagActionSummary', comment);
+    const dontagree = getActionSummary('DontAgreeActionSummary', comment);
+    let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`;
+    commentClass += highlighted === comment.id ? ' highlighted-comment' : '';
+    commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : '';
+
+    // call a function, and if it errors, call addNotification('error', ...) (e.g. to show user a snackbar)
+    const notifyOnError = (fn, errorToMessage) => async () => {
+      if (typeof errorToMessage !== 'function') {errorToMessage = (error) => error.message;}
+      try {
+        return await fn();
+      } catch (error) {
+        addNotification('error', errorToMessage(error));
+        throw error;
+      }
+    };
+
+    const addBestTag = notifyOnError(() => addCommentTag({
+      id: comment.id,
+      tag: BEST_TAG,
+    }), () => 'Failed to tag comment as best');
+
+    const removeBestTag = notifyOnError(() => removeCommentTag({
+      id: comment.id,
+      tag: BEST_TAG,
+    }), () => 'Failed to remove best comment tag');
 
     return (
       <div
-        className={parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`}
+        className={commentClass}
         id={`c_${comment.id}`}
         style={{marginLeft: depth * 30}}>
         <hr aria-hidden={true} />
         <AuthorName
           author={comment.user}/>
         { isStaff(comment.tags)
-          ? <TagLabel isStaff={true}/>
+          ? <TagLabel>Staff</TagLabel>
+          : null }
+
+        { commentIsBest(comment)
+          ? <TagLabel><BestIndicator /></TagLabel>
           : null }
         <PubDate created_at={comment.created_at} />
+
         <Content body={comment.body} />
-          <div className="commentActionsLeft">
+          <div className="commentActionsLeft comment__action-container">
+            <ActionButton>
               <LikeButton
                 like={like}
                 id={comment.id}
@@ -120,22 +168,41 @@ class Comment extends React.Component {
                 deleteAction={deleteAction}
                 showSignInDialog={showSignInDialog}
                 currentUser={currentUser} />
-              <ReplyButton
-                onClick={() => setActiveReplyBox(comment.id)}
-                parentCommentId={parentId || comment.id}
-                currentUserId={currentUser && currentUser.id}
-                banned={false} />
-            </div>
-        <div className="commentActionsRight">
-          <PermalinkButton articleURL={asset.url} commentId={comment.id} />
-          <FlagComment
-            flag={flag}
-            id={comment.id}
-            author_id={comment.user.id}
-            postFlag={postFlag}
-            deleteAction={deleteAction}
-            showSignInDialog={showSignInDialog}
-            currentUser={currentUser} />
+            </ActionButton>
+            {
+              !disableReply &&
+              <ActionButton>
+                <ReplyButton
+                  onClick={() => setActiveReplyBox(comment.id)}
+                  parentCommentId={parentId || comment.id}
+                  currentUserId={currentUser && currentUser.id}
+                  banned={false} />
+              </ActionButton>
+            }
+            <ActionButton>
+              <IfUserCanModifyBest user={currentUser}>
+                <BestButton
+                  isBest={commentIsBest(comment)}
+                  addBest={addBestTag}
+                  removeBest={removeBestTag} />
+              </IfUserCanModifyBest>
+            </ActionButton>
+          </div>
+        <div className="commentActionsRight comment__action-container">
+          <ActionButton>
+            <PermalinkButton articleURL={asset.url} commentId={comment.id} />
+          </ActionButton>
+          <ActionButton>
+            <FlagComment
+              flag={flag && flag.current_user ? flag : dontagree}
+              id={comment.id}
+              author_id={comment.user.id}
+              postFlag={postFlag}
+              postDontAgree={postDontAgree}
+              deleteAction={deleteAction}
+              showSignInDialog={showSignInDialog}
+              currentUser={currentUser} />
+          </ActionButton>
         </div>
         {
           activeReplyBox === comment.id
@@ -155,18 +222,21 @@ class Comment extends React.Component {
           comment.replies &&
           comment.replies.map(reply => {
             return <Comment
-              refetch={refetch}
               setActiveReplyBox={setActiveReplyBox}
+              disableReply={disableReply}
               activeReplyBox={activeReplyBox}
               addNotification={addNotification}
               parentId={comment.id}
               postItem={postItem}
               depth={depth + 1}
               asset={asset}
+              highlighted={highlighted}
               currentUser={currentUser}
               postLike={postLike}
               postFlag={postFlag}
               deleteAction={deleteAction}
+              addCommentTag={addCommentTag}
+              removeCommentTag={removeCommentTag}
               showSignInDialog={showSignInDialog}
               reactKey={reply.id}
               key={reply.id}
@@ -180,6 +250,8 @@ class Comment extends React.Component {
               assetId={asset.id}
               comments={comment.replies}
               parentId={comment.id}
+              topLevel={false}
+              replyCount={comment.replyCount}
               moreComments={comment.replyCount > comment.replies.length}
               loadMore={loadMore}/>
           </div>

client/coral-embed-stream/src/Embed.js

@@ -2,6 +2,9 @@ import React, {Component} from 'react';
 import {compose} from 'react-apollo';
 import {connect} from 'react-redux';
 import isEqual from 'lodash/isEqual';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-framework/translations';
+const lang = new I18n(translations);
 
 import {TabBar, Tab, TabContent, Spinner} from 'coral-ui';
 
@@ -10,10 +13,10 @@ const {addNotification, clearNotification} = notificationActions;
 const {fetchAssetSuccess} = assetActions;
 
 import {queryStream} from 'coral-framework/graphql/queries';
-import {postComment, postFlag, postLike, deleteAction} from 'coral-framework/graphql/mutations';
+import {postComment, postFlag, postLike, postDontAgree, deleteAction, addCommentTag, removeCommentTag} from 'coral-framework/graphql/mutations';
 import {editName} from 'coral-framework/actions/user';
 import {updateCountCache} from 'coral-framework/actions/asset';
-import {Notification, notificationActions, authActions, assetActions, pym} from 'coral-framework';
+import {notificationActions, authActions, assetActions, pym} from 'coral-framework';
 
 import Stream from './Stream';
 import InfoBox from 'coral-plugin-infobox/InfoBox';
@@ -25,15 +28,16 @@ import UserBox from 'coral-sign-in/components/UserBox';
 import SignInContainer from 'coral-sign-in/containers/SignInContainer';
 import SuspendedAccount from 'coral-framework/components/SuspendedAccount';
 import ChangeUsernameContainer from '../../coral-sign-in/containers/ChangeUsernameContainer';
-import SettingsContainer from 'coral-settings/containers/SettingsContainer';
+import ProfileContainer from 'coral-settings/containers/ProfileContainer';
 import RestrictedContent from 'coral-framework/components/RestrictedContent';
 import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
+import Comment from './Comment';
 import LoadMore from './LoadMore';
 import NewCount from './NewCount';
 
 class Embed extends Component {
 
-  state = {activeTab: 0, showSignInDialog: false};
+  state = {activeTab: 0, showSignInDialog: false, activeReplyBox: ''};
 
   changeTab = (tab) => {
 
@@ -51,28 +55,17 @@ class Embed extends Component {
     data: React.PropTypes.shape({
       loading: React.PropTypes.bool,
       error: React.PropTypes.object
-    }).isRequired
+    }).isRequired,
+
+    // dispatch action to add a tag to a comment
+    addCommentTag: React.PropTypes.func,
+
+    // dispatch action to remove a tag from a comment
+    removeCommentTag: React.PropTypes.func,
   }
 
   componentDidMount () {
     pym.sendMessage('childReady');
-
-    pym.onMessage('DOMContentLoaded', hash => {
-      const commentId = hash.replace('#', 'c_');
-      let count = 0;
-      const interval = setInterval(() => {
-        if (document.getElementById(commentId)) {
-          window.clearInterval(interval);
-          pym.scrollParentToChildEl(commentId);
-        }
-
-        if (++count > 100) { // ~10 seconds
-          // give up waiting for the comments to load.
-          // it would be weird for the page to jump after that long.
-          window.clearInterval(interval);
-        }
-      }, 100);
-    });
   }
 
   componentWillReceiveProps (nextProps) {
@@ -82,11 +75,29 @@ class Embed extends Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if(!isEqual(prevProps.data.comment, this.props.data.comment)) {
+
+      // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
+      setTimeout(()=>pym.scrollParentToChildEl(`c_${this.props.data.comment.id}`), 0);
+    }
+  }
+
+  setActiveReplyBox = (reactKey) => {
+    if (!this.props.auth.user) {
+      const offset = document.getElementById(`c_${reactKey}`).getBoundingClientRect().top - 75;
+      this.props.showSignInDialog(offset);
+    } else {
+      this.setState({activeReplyBox: reactKey});
+    }
+  }
+
   render () {
     const {activeTab} = this.state;
     const {closedAt, countCache = {}} = this.props.asset;
-    const {loading, asset, refetch} = this.props.data;
+    const {loading, asset, refetch, comment} = this.props.data;
     const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth;
+    const highlightedComment = comment && comment.parent ? comment.parent : comment;
 
     const openStream = closedAt === null;
 
@@ -110,10 +121,10 @@ class Embed extends Component {
         <div className="commentStream">
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
             <Tab><Count count={asset.commentCount}/></Tab>
-            <Tab>Settings</Tab>
+            <Tab>{lang.t('MY_COMMENTS')}</Tab>
             <Tab restricted={!isAdmin}>Configure Stream</Tab>
           </TabBar>
-          {loggedIn && <UserBox user={user} logout={this.props.logout}  changeTab={this.changeTab}/>}
+          {loggedIn && <UserBox user={user} logout={() => this.props.logout().then(refetch)}  changeTab={this.changeTab}/>}
           <TabContent show={activeTab === 0}>
             {
               openStream
@@ -149,13 +160,38 @@ class Embed extends Component {
                         charCount={asset.settings.charCountEnable && asset.settings.charCount} />
                      : null
                    }
-                   <ModerationLink assetId={asset.id} isAdmin={isAdmin} />
                  </RestrictedContent>
                  </div>
                : <p>{asset.settings.closedMessage}</p>
             }
-            {!loggedIn && <SignInContainer requireEmailConfirmation={asset.settings.requireEmailConfirmation} offset={signInOffset}/>}
+            {!loggedIn && <SignInContainer
+              requireEmailConfirmation={asset.settings.requireEmailConfirmation}
+              refetch={refetch}
+              offset={signInOffset}/>}
             {loggedIn &&  user && <ChangeUsernameContainer loggedIn={loggedIn} offset={signInOffset} user={user} />}
+            {loggedIn && <ModerationLink assetId={asset.id} isAdmin={isAdmin} />}
+            {
+              highlightedComment &&
+              <Comment
+                refetch={refetch}
+                setActiveReplyBox={this.setActiveReplyBox}
+                activeReplyBox={this.state.activeReplyBox}
+                addNotification={this.props.addNotification}
+                depth={0}
+                postItem={this.props.postItem}
+                asset={asset}
+                currentUser={user}
+                highlighted={comment.id}
+                postLike={this.props.postLike}
+                postFlag={this.props.postFlag}
+                postDontAgree={this.props.postDontAgree}
+                loadMore={this.props.loadMore}
+                deleteAction={this.props.deleteAction}
+                showSignInDialog={this.props.showSignInDialog}
+                key={highlightedComment.id}
+                reactKey={highlightedComment.id}
+                comment={highlightedComment} />
+            }
             <NewCount
               commentCount={asset.commentCount}
               countCache={countCache[asset.id]}
@@ -164,33 +200,36 @@ class Embed extends Component {
               assetId={asset.id}
               updateCountCache={this.props.updateCountCache}
               />
-            <Stream
-              refetch={refetch}
-              addNotification={this.props.addNotification}
-              postItem={this.props.postItem}
-              asset={asset}
-              currentUser={user}
-              postLike={this.props.postLike}
-              postFlag={this.props.postFlag}
-              getCounts={this.props.getCounts}
-              updateCountCache={this.props.updateCountCache}
-              loadMore={this.props.loadMore}
-              deleteAction={this.props.deleteAction}
-              showSignInDialog={this.props.showSignInDialog}
-              comments={asset.comments} />
-            <Notification
-              notifLength={4500}
-              clearNotification={this.props.clearNotification}
-              notification={{text: null}}
-            />
+            <div className="embed__stream">
+              <Stream
+                open={openStream}
+                addNotification={this.props.addNotification}
+                postItem={this.props.postItem}
+                setActiveReplyBox={this.setActiveReplyBox}
+                activeReplyBox={this.state.activeReplyBox}
+                asset={asset}
+                currentUser={user}
+                postLike={this.props.postLike}
+                postFlag={this.props.postFlag}
+                postDontAgree={this.props.postDontAgree}
+                getCounts={this.props.getCounts}
+                addCommentTag={this.props.addCommentTag}
+                removeCommentTag={this.props.removeCommentTag}
+                updateCountCache={this.props.updateCountCache}
+                loadMore={this.props.loadMore}
+                deleteAction={this.props.deleteAction}
+                showSignInDialog={this.props.showSignInDialog}
+                comments={asset.comments} />
+            </div>
           <LoadMore
+            topLevel={true}
             assetId={asset.id}
             comments={asset.comments}
-            moreComments={asset.commentCount > asset.comments.length}
+            moreComments={countCache[asset.id] > asset.comments.length}
             loadMore={this.props.loadMore}/>
         </TabContent>
          <TabContent show={activeTab === 1}>
-           <SettingsContainer
+           <ProfileContainer
              loggedIn={loggedIn}
              userData={this.props.userData}
              showSignInDialog={this.props.showSignInDialog}
@@ -204,11 +243,6 @@ class Embed extends Component {
              />
            </RestrictedContent>
          </TabContent>
-          <Notification
-            notifLength={4500}
-            clearNotification={this.props.clearNotification}
-            notification={this.props.notification}
-          />
         </div>
       </div>
     );
@@ -216,7 +250,6 @@ class Embed extends Component {
 }
 
 const mapStateToProps = state => ({
-  notification: state.notification.toJS(),
   auth: state.auth.toJS(),
   userData: state.user.toJS(),
   asset: state.asset.toJS()
@@ -225,13 +258,7 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   requestConfirmEmail: () => dispatch(requestConfirmEmail()),
   loadAsset: (asset) => dispatch(fetchAssetSuccess(asset)),
-  addNotification: (type, text) => {
-    pym.sendMessage('getPosition');
-
-    pym.onMessage('position', position => {
-      dispatch(addNotification(type, text, position));
-    });
-  },
+  addNotification: (type, text) => addNotification(type, text),
   clearNotification: () => dispatch(clearNotification()),
   editName: (username) => dispatch(editName(username)),
   showSignInDialog: (offset) => dispatch(showSignInDialog(offset)),
@@ -245,6 +272,9 @@ export default compose(
   postComment,
   postFlag,
   postLike,
+  postDontAgree,
+  addCommentTag,
+  removeCommentTag,
   deleteAction,
   queryStream
 )(Embed);

client/coral-embed-stream/src/LoadMore.js

@@ -7,39 +7,62 @@ const lang = new I18n(translations);
 
 const loadMoreComments = (assetId, comments, loadMore, parentId) => {
 
-  if (!comments.length) {
-    return;
+  let cursor = null;
+  if (comments.length) {
+    cursor = parentId
+      ? comments[0].created_at
+      : comments[comments.length - 1].created_at;
   }
 
-  const cursor = parentId
-    ? comments[0].created_at
-    : comments[comments.length - 1].created_at;
-
   loadMore({
     limit: ADDTL_COMMENTS_ON_LOAD_MORE,
     cursor,
-    assetId,
+    asset_id: assetId,
     parent_id: parentId,
     sort: parentId ? 'CHRONOLOGICAL' : 'REVERSE_CHRONOLOGICAL'
   });
 };
 
-const LoadMore = ({assetId, comments, loadMore, moreComments, parentId}) => (
-  moreComments
-  ? <Button
-      className='coral-load-more'
-      onClick={() => loadMoreComments(assetId, comments, loadMore, parentId)}>
-      {
-        lang.t('loadMore')
-      }
-    </Button>
-  : null
-);
+class LoadMore extends React.Component {
+
+  componentDidMount () {
+    this.initialState = true;
+  }
+
+  replyCountFormat = (count) => {
+    if (count === 1) {
+      return lang.t('viewReply');
+    }
+
+    if (this.initialState) {
+      return lang.t('viewAllRepliesInitial', count);
+    } else {
+      return lang.t('viewAllReplies', count);
+    }
+  }
+
+  render () {
+    const {assetId, comments, loadMore, moreComments, parentId, replyCount, topLevel} = this.props;
+    return moreComments
+      ? <div className='coral-load-more'>
+        <Button
+          onClick={() => {
+            this.initialState = false;
+            loadMoreComments(assetId, comments, loadMore, parentId);
+          }}>
+          {topLevel ? lang.t('viewMoreComments') : this.replyCountFormat(replyCount)}
+        </Button>
+      </div>
+      : null;
+  }
+}
 
 LoadMore.propTypes = {
   assetId: PropTypes.string.isRequired,
   comments: PropTypes.array.isRequired,
   moreComments: PropTypes.bool.isRequired,
+  topLevel: PropTypes.bool.isRequired,
+  replyCount: PropTypes.number,
   loadMore: PropTypes.func.isRequired
 };
 

client/coral-embed-stream/src/NewCount.js

@@ -19,12 +19,13 @@ const NewCount = (props) => {
 
   return <div className='coral-new-comments'>
     {
-      props.countCache && newComments > 0 &&
+      props.countCache && newComments > 0 ?
       <button onClick={onLoadMoreClick(props)} className='coral-load-more'>
         {newComments === 1
           ? lang.t('newCount', newComments, lang.t('comment'))
           : lang.t('newCount', newComments, lang.t('comments'))}
       </button>
+      : null
     }
   </div>;
 };