Merge branch 'master' into story-138187767-mod-flag-names

client/coral-admin/src/AppRouter.js

@@ -18,8 +18,8 @@ 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='dashboard' component={Dashboard} />

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

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

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

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

@@ -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/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/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,6 +178,10 @@
   }
 }
 
+.selected {
+  border-radius: 10px;
+}
+
 
 .actionButton {
   transform: scale(.8);

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,11 +1,11 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Navigation, Drawer} from 'react-mdl';
 import {IndexLink, Link} from 'react-router';
 import styles from './Drawer.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 
-export default ({handleLogout, restricted = false}) => (
+const CoralDrawer = ({handleLogout, restricted = false}) => (
   <Drawer className={styles.header}>
     { !restricted ?
       <div>
@@ -45,5 +45,11 @@ export default ({handleLogout, restricted = false}) => (
   </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.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,7 +6,7 @@ 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 className={styles.logo} />
     {
@@ -14,28 +14,35 @@ export default ({handleLogout, restricted = false}) => (
       <div>
         <Navigation className={styles.nav}>
           <IndexLink
+            id='dashboardNav'
             className={styles.navLink}
             to="/admin/dashboard"
             activeClassName={styles.active}>
             {lang.t('configure.dashboard')}
           </IndexLink>
           <Link
+            id='moderateNav'
             className={styles.navLink}
             to="/admin/moderate"
             activeClassName={styles.active}>
             {lang.t('configure.moderate')}
           </Link>
-          <Link className={styles.navLink}
+          <Link
+            id='streamsNav'
+            className={styles.navLink}
             to="/admin/streams"
             activeClassName={styles.active}>
             {lang.t('configure.streams')}
           </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 {...props} />
-    <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/constants/auth.js

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

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

@@ -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/Community/CommunityContainer.js

@@ -97,7 +97,7 @@ class CommunityContainer extends Component {
     return (
       <div>
         <FlaggedAccounts
-          commenters={data.usersFlagged}
+          commenters={data.users}
           isFetching={data.loading}
           error={data.error}
           showBanUserDialog={props.showBanUserDialog}

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

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

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

@@ -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,14 +1,16 @@
 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}>
+const Domainlist = ({domains, onChangeDomainlist}) => {
+  return (
+    <Card id={styles.domainlist} className={styles.configSetting}>
+      <h3>{lang.t('configure.domain-list-title')}</h3>
       <p className={styles.domainlistDesc}>{lang.t('configure.domain-list-text')}</p>
       <TagsInput
         value={domains}
@@ -18,9 +20,7 @@ const Domainlist = ({domains, onChangeDomainlist}) => (
         onChange={tags => onChangeDomainlist('whitelist', tags)}
       />
     </Card>
-  </div>
-);
+  );
+};
 
 export default Domainlist;
-
-const lang = new I18n(translations);

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

@@ -44,19 +44,15 @@ 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}/>
-            <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
-              {lang.t('embedlink.copy')}
-            </Button>
-            <div className={styles.copiedText}>{this.state.copied && 'Copied!'}</div>
-          </Card>
-        </div>
-      </div>
+      <Card shadow="2" className={styles.configSetting}>
+        <h3>Embed Comment Stream</h3>
+        <p>{lang.t('configure.copy-and-paste')}</p>
+        <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
+        <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
+          {lang.t('embedlink.copy')}
+        </Button>
+        <div className={styles.copiedText}>{this.state.copied && 'Copied!'}</div>
+      </Card>
     );
   }
 }

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

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

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

@@ -4,7 +4,7 @@ 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 {Card, Icon} 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,11 +42,6 @@ const updateClosedMessage = (updateSettings) => (event) => {
   updateSettings({closedMessage});
 };
 
-const updateCustomCssUrl = (updateSettings) => (event) => {
-  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) => {
@@ -71,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>
       <Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
         <div className={styles.action}>
           <Checkbox
@@ -193,23 +149,11 @@ 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>
     </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,44 @@
+import React, {PropTypes} from 'react';
+import {Card} from 'coral-ui';
+import Domainlist from './Domainlist';
+import EmbedLink from './EmbedLink';
+import styles from './Configure.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../../translations.json';
+const lang = new I18n(translations);
+
+const updateCustomCssUrl = (updateSettings) => (event) => {
+  const customCssUrl = event.target.value;
+  updateSettings({customCssUrl});
+};
+
+const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
+  return (
+    <div>
+      <Domainlist
+        domains={settings.domains.whitelist}
+        onChangeDomainlist={onChangeDomainlist} />
+      <EmbedLink />
+      <Card className={styles.configSetting}>
+        <h3>{lang.t('configure.custom-css-url')}</h3>
+        <p>{lang.t('configure.custom-css-url-desc')}</p>
+        <br />
+        <input
+          className={styles.customCSSInput}
+          value={settings.customCssUrl}
+          onChange={updateCustomCssUrl(updateSettings)} />
+      </Card>
+    </div>
+  );
+};
+
+TechSettings.propTypes = {
+  settings: PropTypes.shape({
+    domains: PropTypes.shape({
+      whitelist: PropTypes.array.isRequired
+    })
+  }).isRequired,
+  updateSettings: PropTypes.func.isRequired
+};
+
+export default TechSettings;

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

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

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

@@ -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 {

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

@@ -1,38 +1,46 @@
 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 LikeWidget from './LikeWidget';
+import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation';
+
+import {Spinner} from 'coral-ui';
 
 class Dashboard extends React.Component {
+
   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: {assetsByLike, 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>
+        <FlagWidget assets={assetsByFlag} />
+        <LikeWidget assets={assetsByLike} />
       </div>
     );
   }
 }
 
+const mapStateToProps = state => {
+  return {
+    settings: state.settings.toJS(),
+    moderation: state.moderation.toJS()
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  showBanUserDialog: (user, commentId) => dispatch(showBanUserDialog(user, commentId)),
+  hideBanUserDialog: () => dispatch(hideBanUserDialog(false))
+});
+
 export default compose(
-  mostFlags
+  connect(mapStateToProps, mapDispatchToProps),
+  getMetrics
 )(Dashboard);

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

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

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

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

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

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

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

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

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

@@ -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,24 +1,33 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
-import {Layout} from '../components/ui/Layout';
-import {checkLogin, logout} from '../actions/auth';
+import Layout from '../components/ui/Layout';
+import {checkLogin, handleLogin, logout, requestPasswordReset} from '../actions/auth';
 import {FullLoading} from '../components/FullLoading';
-import {PermissionRequired} from '../components/PermissionRequired';
+import AdminLogin from '../components/AdminLogin';
 
 class LayoutContainer extends Component {
   componentWillMount () {
     const {checkLogin} = this.props;
-    checkLogin().then(() => {
-      if (!this.props.auth.isAdmin) {
-        location.href = '/admin/login';
-      }
-    });
+    checkLogin();
   }
   render () {
-    const {isAdmin, loggedIn, loadingUser} = this.props.auth;
+    const {
+      isAdmin,
+      loggedIn,
+      loadingUser,
+      loginError,
+      passwordRequestSuccess
+    } = this.props.auth;
+    const {handleLogout} = this.props;
     if (loadingUser) { return <FullLoading />; }
-    if (!isAdmin) { return <PermissionRequired />; }
-    if (isAdmin && loggedIn) { return <Layout {...this.props} />; }
+    if (!isAdmin) {
+      return <AdminLogin
+        handleLogin={this.props.handleLogin}
+        requestPasswordReset={this.props.requestPasswordReset}
+        passwordRequestSuccess={passwordRequestSuccess}
+        errorMessage={loginError} />;
+    }
+    if (isAdmin && loggedIn) { return <Layout handleLogout={handleLogout} {...this.props} />; }
     return <FullLoading />;
   }
 }
@@ -29,6 +38,8 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   checkLogin: () => dispatch(checkLogin()),
+  handleLogin: (username, password) => dispatch(handleLogin(username, password)),
+  requestPasswordReset: email => dispatch(requestPasswordReset(email)),
   handleLogout: () => dispatch(logout())
 });
 

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

@@ -17,22 +17,50 @@ 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
+  }
+
   componentWillMount() {
     const {toggleModal, singleView} = this.props;
+    const {selectedIndex} = this.state;
 
     this.props.fetchSettings();
-
     key('s', () => singleView());
     key('shift+/', () => toggleModal(true));
     key('esc', () => toggleModal(false));
+    key('j', () => this.setState({selectedIndex: selectedIndex + 1}));
+    key('k', () => this.setState({selectedIndex: selectedIndex > 0 ? selectedIndex + 1 : selectedIndex}));
+    key('r', () => this.moderate(false));
+    key('t', () => this.moderate(true));
+  }
+
+  moderate = (accept) => {
+    const {data, route, acceptComment, rejectComment} = this.props;
+    const {selectedIndex} = this.state;
+    const activeTab = route.path === ':id' ? 'premod' : route.path;
+    const comments = data[activeTab];
+    const commentId = {commentId: comments[selectedIndex].id};
+
+    if (accept) {
+      acceptComment(commentId);
+    } else {
+      rejectComment(commentId);
+    }
+
   }
 
   componentWillUnmount() {
     key.unbind('s');
     key.unbind('shift+/');
     key.unbind('esc');
+    key.unbind('j');
+    key.unbind('k');
+    key.unbind('r');
+    key.unbind('t');
   }
 
   componentWillReceiveProps(nextProps) {
@@ -43,7 +71,7 @@ class ModerationContainer extends Component {
   }
 
   render () {
-    const {data, moderation, settings, assets, ...props} = this.props;
+    const {data, moderation, settings, assets, modQueueResort, onClose, ...props} = this.props;
     const providedAssetId = this.props.params.id;
     const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;
 
@@ -65,6 +93,8 @@ class ModerationContainer extends Component {
       }
     }
 
+    const comments = data[activeTab];
+
     return (
       <div>
         <ModerationHeader asset={asset} />
@@ -73,11 +103,14 @@ class ModerationContainer extends Component {
           premodCount={data.premodCount}
           rejectedCount={data.rejectedCount}
           flaggedCount={data.flaggedCount}
+          modQueueResort={modQueueResort}
         />
         <ModerationQueue
-          data={data}
           currentAsset={asset}
+          comments={comments}
           activeTab={activeTab}
+          singleView={moderation.singleView}
+          selectedIndex={this.state.selectedIndex}
           suspectWords={settings.wordlist.suspect}
           showBanUserDialog={props.showBanUserDialog}
           acceptComment={props.acceptComment}
@@ -89,6 +122,9 @@ class ModerationContainer extends Component {
           handleClose={props.hideBanUserDialog}
           handleBanUser={props.banUser}
         />
+      <ModerationKeysModal
+          open={moderation.modalOpen}
+          onClose={onClose}/>
       </div>
     );
   }

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

@@ -1,26 +1,27 @@
 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';
 
 const lang = new I18n(translations);
-
-const ModerationQueue = ({activeTab = 'premod', ...props}) => {
-  const areComments = props.data[activeTab].length;
+const ModerationQueue = ({comments, selectedIndex, singleView, ...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={props.activeTab}
+            selected={i === selectedIndex}
             suspectWords={props.suspectWords}
             actions={actionsMap[status]}
             showBanUserDialog={props.showBanUserDialog}
@@ -37,12 +38,12 @@ const ModerationQueue = ({activeTab = 'premod', ...props}) => {
 };
 
 ModerationQueue.propTypes = {
-  data: PropTypes.object.isRequired,
-  acceptComment: PropTypes.func.isRequired,
-  rejectComment: PropTypes.func.isRequired,
-  showBanUserDialog: PropTypes.func.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();
 
@@ -19,48 +21,52 @@ const Comment = ({actions = [], ...props}) => {
   const links = linkify.getMatches(props.comment.body);
   const actionSummaries = props.comment.action_summaries;
   return (
-    <li tabIndex={props.index}
-        className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
-      <div className={styles.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)} />
+          <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}>
+            <Linkify component='span' properties={{style: linkStyles}}>
+              <Highlighter searchWords={props.suspectWords} textToHighlight={props.comment.body}/>
+            </Linkify>
+          </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>
@@ -72,7 +78,6 @@ Comment.propTypes = {
   rejectComment: PropTypes.func.isRequired,
   suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   currentAsset: PropTypes.object,
-  isActive: PropTypes.bool.isRequired,
   comment: PropTypes.shape({
     body: PropTypes.string.isRequired,
     action_summaries: PropTypes.array,

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/ModerationMenu.js

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

client/coral-admin/src/containers/ModerationQueue/components/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 {
@@ -130,7 +136,7 @@ span {
     display: none;
   }
 
-  &.singleView .listItem.activeItem {
+  &.singleView .listItem.selected {
     display: block;
     height: 100%;
     font-size: 1.5em;
@@ -141,7 +147,6 @@ span {
       position: fixed;
       bottom: 60px;
       left: 25%;
-      margin: 0 auto;
       display: flex;
       justify-content: space-around;
       width: 50%;
@@ -156,16 +161,20 @@ span {
 
 .listItem {
   border-bottom: 1px solid #e0e0e0;
-  font-size: 16px;
+  font-size: 18px;
   width: 100%;
   max-width: 660px;
   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 +184,11 @@ span {
     border-bottom: none;
   }
 
+  &.selected {
+    max-width: 670px;
+    max-height: 410px;
+  }
+
   .context {
     a {
       color: #f36451;
@@ -184,11 +198,8 @@ span {
   }
 
    .sideActions {
-     position: absolute;
-     right: 0;
      height: 100%;
      top: 0;
-     padding: 40px 18px;
      box-sizing: border-box;
    }
 
@@ -198,6 +209,7 @@ span {
     justify-content: space-between;
 
     .author {
+      font-weight: 600;
       min-width: 230px;
       display: flex;
       align-items: center;
@@ -207,6 +219,9 @@ span {
   .itemBody {
     display: flex;
     justify-content: space-between;
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 300;
   }
 
   .avatar {
@@ -222,7 +237,8 @@ span {
   .created {
     color: #666;
     font-size: 13px;
-    margin-left: 40px;
+    margin-left: 15px;
+    line-height: 1px;
   }
 
   .actionButton {
@@ -233,10 +249,10 @@ span {
   .body {
     margin-top: 0px;
     flex: 1;
-    font-size: 0.88em;
     color: black;
     max-width: 500px;
     word-wrap: break-word;
+    font-weight: 300;
   }
 
   .flagged {
@@ -304,20 +320,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 +350,40 @@ 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;
+   }
 }

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/graphql/fragments/assetMetricsView.graphql

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

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

@@ -1,33 +1,45 @@
 import {graphql} from 'react-apollo';
 
-import MOST_FLAGS from './mostFlags.graphql';
 import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
 import MOD_USER_FLAGGED_QUERY from './modUserFlaggedQuery.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 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)
+  })
+});
+
+export const getMetrics = graphql(METRICS, {
+  options: ({settings: {dashboardWindowStart, dashboardWindowEnd}}) => {
+
+    return {
+      variables: {
+        from: dashboardWindowStart,
+        to: dashboardWindowEnd
       }
     };
   }
 });
 
 export const modUserFlaggedQuery  = graphql(MOD_USER_FLAGGED_QUERY);
+
+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/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
+  }
+  assetsByLike: assetMetrics(from: $from, to: $to, sort: LIKE) {
+    ...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/reducers/auth.js

@@ -4,7 +4,9 @@ import * as actions from '../constants/auth';
 const initialState = Map({
   loggedIn: false,
   user: null,
-  isAdmin: false
+  isAdmin: false,
+  loginError: null,
+  passwordRequestSuccess: null
 });
 
 export default function auth (state = initialState, action) {
@@ -25,6 +27,14 @@ 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_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.');
   default :
     return state;
   }

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/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,8 @@
 {
   "en": {
+    "errors": {
+      "NOT_AUTHORIZED": "Your username or password is not recognized by our system."
+    },
     "community": {
       "username_and_email": "Username and Email",
       "account_creation_date": "Account Creation Date",
@@ -63,6 +66,9 @@
       "copy": "Copy to Clipboard"
     },
     "configure": {
+      "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",
@@ -75,8 +81,6 @@
       "include-text": "Include your text here.",
       "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",
@@ -98,8 +102,8 @@
       "comment-count-text-pre":  "Comments will be limited to ",
       "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?",
@@ -125,7 +129,9 @@
     },
     "dashboard": {
       "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",
+      "comment_count": "comments"
     },
     "streams": {
       "empty_result": "No assets match this search. Maybe try widening your search?",
@@ -146,6 +152,9 @@
     }
   },
   "es": {
+    "errors": {
+      "NOT_AUTHORIZED": "Acción no autorizada."
+    },
     "community": {
       "username_and_email": "Usuario y E-mail",
       "account_creation_date": "Fecha de creación de la cuenta",
@@ -210,6 +219,9 @@
       "username_flags": ""
     },
     "configure": {
+      "stream-settings": "Configuración de Comentarios",
+      "moderation-settings": "Configuración de Moderación",
+      "tech-settings": "Configuración Technical",
       "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.",
       "dashboard": "Panel",
@@ -223,8 +235,6 @@
       "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",
@@ -247,21 +257,23 @@
       "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, e.g. tu localhost, staging y ambientes de production  (ex. 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}?",
+      "are_you_sure": "Estas segura que quieres suspender a {0}?",
       "note": "Nota: Suspender este usuario también va a colocar este comentario en la cola de Rechazados.",
       "cancel": "Cancelar",
       "yes_ban_user": "Si, Suspendan el usuario"
     },
     "dashbord": {
       "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",
+      "comment_count": "comentarios"
     },
     "streams": {
       "empty_result": "No se encuentro articulo con esta busqueda. Tal vez extender la busqueda?",