merge master

2026-08-07 11:29:44 +08:00 · 2017-05-22 13:10:43 -06:00
parent 8f219c47a7 f32208b35b
commit ec03c6b48c
105 changed files with 2436 additions and 435 deletions
@@ -20,8 +20,7 @@ export const handleLogin = (email, password, recaptchaResponse) => (dispatch) =>
        return dispatch(checkLoginFailure('not logged in'));
      }
      dispatch(handleAuthToken(token));
-      const isAdmin = !!user.roles.filter((i) => i === 'ADMIN').length;
-      dispatch(checkLoginSuccess(user, isAdmin));
+      dispatch(checkLoginSuccess(user));
    })
    .catch((error) => {
      if (error.translation_key === 'LOGIN_MAXIMUM_EXCEEDED') {
@@ -86,8 +85,7 @@ export const checkLogin = () => (dispatch) => {
        return dispatch(checkLoginFailure('not logged in'));
      }

-      const isAdmin = !!user.roles.filter((i) => i === 'ADMIN').length;
-      dispatch(checkLoginSuccess(user, isAdmin));
+      dispatch(checkLoginSuccess(user));
    })
    .catch((error) => {
      console.error(error);
@@ -7,6 +7,12 @@ export const singleView = () => ({type: actions.SINGLE_VIEW});
 export const showBanUserDialog = (user, commentId, commentStatus, showRejectedNote) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId, commentStatus, showRejectedNote});
 export const hideBanUserDialog = (showDialog) => ({type: actions.HIDE_BANUSER_DIALOG, showDialog});

+// Suspend User Dialog
+export const showSuspendUserDialog = (userId, username, commentId, commentStatus) =>
+  ({type: actions.SHOW_SUSPEND_USER_DIALOG, userId, username, commentId, commentStatus});
+
+export const hideSuspendUserDialog = () => ({type: actions.HIDE_SUSPEND_USER_DIALOG});
+
 // hide shortcuts note
 export const hideShortcutsNote = () => {
  try {
@@ -18,3 +24,6 @@ export const hideShortcutsNote = () => {

  return {type: actions.HIDE_SHORTCUTS_NOTE};
 };
+
+export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
+export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
@@ -0,0 +1,53 @@
+.button {
+  -webkit-transform: scale(.8);
+  transform: scale(.8);
+  margin: 0;
+}
+
+.root {
+  color: black;
+  > :global(.mdl-menu__container) {
+    margin-left: 10px;
+    > :global(.mdl-menu__outline) {
+      box-shadow: none;
+    }
+  }
+}
+
+.buttonOpen {
+  box-shadow: none;
+  color: white;
+  background-color: #616161;
+}
+
+.arrowIcon {
+  margin-left: 6px;
+  margin-right: 0;
+  vertical-align: middle;
+  margin-right: 0;
+  font-size: 14px;
+}
+
+.menu {
+  padding: 0;
+}
+
+.menuItem {
+  background-color: #2a2a2a;
+  color: white;
+  &:first-child {
+    margin-bottom: 1px;
+    border-radius: 2px 2px 0px 0px;
+  }
+  &:last-child {
+    border-radius: 0px 0px 2px 2px;
+  }
+  &:hover, &:active, &:focus {
+    background-color: #767676;
+  }
+  &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active {
+    background-color: #262626;
+    color: rgba(255, 255, 255, 0.5);
+  }
+}
+
@@ -0,0 +1,64 @@
+import React, {PropTypes} from 'react';
+import {Button, Icon} from 'coral-ui';
+import {Menu} from 'react-mdl';
+import cn from 'classnames';
+import {findDOMNode} from 'react-dom';
+import styles from './ActionsMenu.css';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations.json';
+const lang = new I18n(translations);
+
+let count = 0;
+
+class ActionsMenu extends React.Component {
+  id = `actions-dropdown-${count++}`;
+  menu = null;
+  state = {open: false};
+  timeout = null;
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  handleRef = (ref) => {
+    this.menu = ref ? findDOMNode(ref).parentNode : null;
+  }
+
+  syncOpenState = () => {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(() => {
+      this.setState({open: this.menu.className.indexOf('is-visible') >= 0});
+    }, 150);
+  };
+
+  render() {
+    return (
+      <div className={styles.root} onBlur={this.syncOpenState} >
+        <Button
+          cStyle='actions'
+          className={cn(styles.button, {[styles.buttonOpen]: this.state.open})}
+          disabled={false}
+          id={this.id}
+          onClick={this.syncOpenState}
+          icon={this.props.icon}
+          raised>
+          {lang.t('modqueue.actions')}
+          <Icon
+            name={this.state.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
+            className={styles.arrowIcon}
+          />
+        </Button>
+        <Menu target={this.id} className={styles.menu} ref={this.handleRef}>
+          {this.props.children}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+ActionsMenu.propTypes = {
+  icon: PropTypes.string,
+};
+
+export default ActionsMenu;
@@ -0,0 +1,9 @@
+import React from 'react';
+import cn from 'classnames';
+import {MenuItem} from 'react-mdl';
+import styles from './ActionsMenu.css';
+
+const ActionsMenuItem = (props) =>
+  <MenuItem className={cn(styles.menuItem, props.className)} {...props} />;
+
+export default ActionsMenuItem;
@@ -1,16 +1,16 @@
 import React from 'react';
-import {Provider} from 'react-redux';
+import ToastContainer from './ToastContainer';
 import 'material-design-lite';
-import store from 'services/store';

 import AppRouter from '../AppRouter';

 export default class App extends React.Component {
  render () {
    return (
-      <Provider store={store}>
-        <AppRouter store={store} />
-      </Provider>
+      <div>
+        <ToastContainer />
+        <AppRouter />
+      </div>
    );
  }
 }
@@ -0,0 +1,226 @@
+@keyframes :global(bounceInRight) {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  from {
+    opacity: 0;
+    transform: translate3d(3000px, 0, 0); }
+  60% {
+    opacity: 1;
+    transform: translate3d(-25px, 0, 0); }
+  75% {
+    transform: translate3d(10px, 0, 0); }
+  90% {
+    transform: translate3d(-5px, 0, 0); }
+  to {
+    transform: none; } }
+
+@keyframes :global(bounceOutRight) {
+  20% {
+    opacity: 1;
+    transform: translate3d(-20px, 0, 0); }
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0); } }
+
+@keyframes :global(bounceInLeft) {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  0% {
+    opacity: 0;
+    transform: translate3d(-3000px, 0, 0); }
+  60% {
+    opacity: 1;
+    transform: translate3d(25px, 0, 0); }
+  75% {
+    transform: translate3d(-10px, 0, 0); }
+  90% {
+    transform: translate3d(5px, 0, 0); }
+  to {
+    transform: none; } }
+
+@keyframes :global(bounceOutLeft) {
+  20% {
+    opacity: 1;
+    transform: translate3d(20px, 0, 0); }
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0); } }
+
+@keyframes :global(bounceInUp) {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  from {
+    opacity: 0;
+    transform: translate3d(0, 3000px, 0); }
+  60% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0); }
+  75% {
+    transform: translate3d(0, 10px, 0); }
+  90% {
+    transform: translate3d(0, -5px, 0); }
+  to {
+    transform: translate3d(0, 0, 0); } }
+
+@keyframes :global(bounceOutUp) {
+  20% {
+    transform: translate3d(0, -10px, 0); }
+  40%, 45% {
+    opacity: 1;
+    transform: translate3d(0, 20px, 0); }
+  to {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0); } }
+
+@keyframes :global(bounceInDown) {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -3000px, 0); }
+  60% {
+    opacity: 1;
+    transform: translate3d(0, 25px, 0); }
+  75% {
+    transform: translate3d(0, -10px, 0); }
+  90% {
+    transform: translate3d(0, 5px, 0); }
+  to {
+    transform: none; } }
+
+@keyframes :global(bounceOutDown) {
+  20% {
+    transform: translate3d(0, 10px, 0); }
+  40%, 45% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0); }
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0); } }
+
+@keyframes :global(track-progress) {
+  0% {
+    width: 100%; }
+  100% {
+    width: 0; } }
+
+:global {
+  .bounceOutRight, .toast-exit--top-right, .toast-exit--bottom-right {
+    animation-name: bounceOutRight; }
+
+  .bounceInRight, .toast-enter--top-right, .toast-enter--bottom-right {
+    animation-name: bounceInRight; }
+
+  .bounceInLeft, .toast-enter--top-left, .toast-enter--bottom-left {
+    animation-name: bounceInLeft; }
+
+  .bounceOutLeft, .toast-exit--top-left, .toast-exit--bottom-left {
+    animation-name: bounceOutLeft; }
+
+  .bounceInUp, .toast-enter--bottom-center {
+    animation-name: bounceInUp; }
+  .bounceOutUp, .toast-exit--top-center {
+    animation-name: bounceOutUp; }
+
+  .bounceInDown, .toast-enter--top-center {
+    animation-name: bounceInDown; }
+
+  .bounceOutDown, .toast-exit--bottom-center {
+    animation-name: bounceOutDown; }
+
+  .animated {
+    animation-duration: 0.75s;
+    animation-fill-mode: both; }
+
+  .toastify {
+    z-index: 999;
+    position: fixed;
+    padding: 4px;
+    width: 350px;
+    max-width: 98%;
+    color: #999;
+    box-sizing: border-box; }
+    .toastify--top-left {
+      top: 1em;
+      left: 1em; }
+    .toastify--top-center {
+      top: 1em;
+      left: 50%;
+      margin-left: -175px; }
+    .toastify--top-right {
+      top: 1em;
+      right: 2em; }
+    .toastify--bottom-left {
+      bottom: 1em;
+      left: 1em; }
+    .toastify--bottom-center {
+      bottom: 1em;
+      left: 50%;
+      margin-left: -175px; }
+    .toastify--bottom-right {
+      bottom: 1em;
+      right: 2em; }
+    .toastify__img {
+      float: left;
+      margin-right: 8px;
+      vertical-align: middle; }
+
+  .toastify__close {
+    position: absolute;
+    top: 18px;
+    left: 12px;
+    width: 20px;
+    height: 16px;
+    padding: 0;
+    text-align: center;
+    text-decoration: none;
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    background: transparent;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    opacity: 0.8;
+    transition: .3s ease; }
+    .toastify__close:hover, .toastify__close:focus {
+      opacity: 1;
+    }
+
+  .toastify-content {
+    position: relative;
+    width: 100%;
+    margin-bottom: 12px;
+    padding: 18px 24px 20px 48px;
+    box-sizing: border-box;
+    background: #404040;
+    border-radius: 2px;
+    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1), 0 3px 20px 0 rgba(0, 0, 0, 0.05); }
+    .toastify-content--info {
+      background: #2488cb; }
+    .toastify-content--success {
+      background: #008577; }
+    .toastify-content--warning {
+      background: #ef6c2b; }
+    .toastify-content--error {
+      background: #ef342b; }
+
+  .toastify__body {
+    color: white;
+    font-size: 15px;
+    font-weight: 400;
+  }
+
+  .toastify__progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 4px;
+    z-index: 999;
+    opacity: 0.8;
+    border-radius: 2px;
+    animation: track-progress linear 1;
+    background-color: white;
+  }
+}
@@ -0,0 +1,7 @@
+import './ToastContainer.css';
+import {defaultProps} from 'recompose';
+import {ToastContainer} from 'react-toastify';
+
+export default defaultProps({
+  autoClose: 5000,
+})(ToastContainer);
@@ -4,10 +4,11 @@ import {IndexLink, Link} from 'react-router';
 import styles from './Drawer.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
+import {can} from 'coral-framework/services/perms';

-const CoralDrawer = ({handleLogout, restricted = false}) => (
+const CoralDrawer = ({handleLogout, auth}) => (
  <Drawer className={styles.header}>
-    { !restricted ?
+    { auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
      <div>
        <Navigation className={styles.nav}>
          <IndexLink
@@ -16,28 +17,37 @@ const CoralDrawer = ({handleLogout, restricted = false}) => (
            activeClassName={styles.active}>
            {lang.t('configure.dashboard')}
          </IndexLink>
-          <Link
-            className={styles.navLink}
-            to="/admin/moderate"
-            activeClassName={styles.active}>
-            {lang.t('configure.moderate')}
-          </Link>
-          <Link className={styles.navLink}
-                to="/admin/stories"
+          {
+            can(auth.user, 'MODERATE_COMMENTS') && (
+              <Link
+                className={styles.navLink}
+                to="/admin/moderate"
                activeClassName={styles.active}>
+                {lang.t('configure.moderate')}
+              </Link>
+            )
+          }
+          <Link className={styles.navLink}
+            to="/admin/stories"
+            activeClassName={styles.active}>
            {lang.t('configure.stories')}
          </Link>
          <Link className={styles.navLink}
-                to="/admin/community"
-                activeClassName={styles.active}>
+            to="/admin/community"
+            activeClassName={styles.active}>
            {lang.t('configure.community')}
          </Link>
-          <Link
-            className={styles.navLink}
-            to="/admin/configure"
-            activeClassName={styles.active}>
-            {lang.t('configure.configure')}
-          </Link>
+          {
+            can(auth.user, 'UPDATE_CONFIG') &&
+            (
+              <Link
+                className={styles.navLink}
+                to="/admin/configure"
+                activeClassName={styles.active}>
+                {lang.t('configure.configure')}
+              </Link>
+            )
+          }
          <a onClick={handleLogout}>Sign Out</a>
          <span>{`v${process.env.VERSION}`}</span>
        </Navigation>
@@ -5,50 +5,66 @@ import styles from './Header.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import {Logo} from './Logo';
+import {can} from 'coral-framework/services/perms';

-const CoralHeader = ({handleLogout, showShortcuts = () => {}, restricted = false}) => (
+const CoralHeader = ({
+  handleLogout,
+  showShortcuts = () => {},
+  auth
+}) => (
  <Header className={styles.header}>
    <Logo className={styles.logo} />
-    {
-      !restricted ?
      <div>
-        <Navigation className={styles.nav}>
-          <IndexLink
-            id='dashboardNav'
-            className={styles.navLink}
-            to="/admin/dashboard"
-            activeClassName={styles.active}>
-            {lang.t('configure.dashboard')}
-          </IndexLink>
-          <Link
-            id='moderateNav'
-            className={styles.navLink}
-            to="/admin/moderate"
-            activeClassName={styles.active}>
-            {lang.t('configure.moderate')}
-          </Link>
-          <Link
-            id='streamsNav'
-            className={styles.navLink}
-            to="/admin/stories"
-            activeClassName={styles.active}>
-            {lang.t('configure.stories')}
-          </Link>
-          <Link
-            id='communityNav'
-            className={styles.navLink}
-            to="/admin/community"
-            activeClassName={styles.active}>
-            {lang.t('configure.community')}
-          </Link>
-          <Link
-            id='configureNav'
-            className={styles.navLink}
-            to="/admin/configure"
-            activeClassName={styles.active}>
-            {lang.t('configure.configure')}
-          </Link>
-        </Navigation>
+        {
+          auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
+          <Navigation className={styles.nav}>
+            <IndexLink
+              id='dashboardNav'
+              className={styles.navLink}
+              to="/admin/dashboard"
+              activeClassName={styles.active}>
+              {lang.t('configure.dashboard')}
+            </IndexLink>
+            {
+              can(auth.user, 'MODERATE_COMMENTS') && (
+                <Link
+                  id='moderateNav'
+                  className={styles.navLink}
+                  to="/admin/moderate"
+                  activeClassName={styles.active}>
+                  {lang.t('configure.moderate')}
+                </Link>
+              )
+            }
+            <Link
+              id='streamsNav'
+              className={styles.navLink}
+              to="/admin/stories"
+              activeClassName={styles.active}>
+              {lang.t('configure.stories')}
+            </Link>
+            <Link
+              id='communityNav'
+              className={styles.navLink}
+              to="/admin/community"
+              activeClassName={styles.active}>
+              {lang.t('configure.community')}
+            </Link>
+            {
+              can(auth.user, 'UPDATE_CONFIG') && (
+                <Link
+                  id='configureNav'
+                  className={styles.navLink}
+                  to="/admin/configure"
+                  activeClassName={styles.active}>
+                  {lang.t('configure.configure')}
+                </Link>
+              )
+            }
+          </Navigation>
+          :
+          null
+        }
        <div className={styles.rightPanel}>
          <ul>
            <li className={styles.settings}>
@@ -66,16 +82,13 @@ const CoralHeader = ({handleLogout, showShortcuts = () => {}, restricted = false
          </ul>
        </div>
      </div>
-    :
-    null
-  }
  </Header>
 );

 CoralHeader.propTypes = {
+  auth: PropTypes.object,
  showShortcuts: PropTypes.func,
-  handleLogout: PropTypes.func.isRequired,
-  restricted: PropTypes.bool // hide elemnts from a user that's logged out
+  handleLogout: PropTypes.func.isRequired
 };

 const lang = new I18n(translations);
@@ -4,12 +4,16 @@ import Header from './Header';
 import Drawer from './Drawer';
 import styles from './Layout.css';

-const Layout = ({children, handleLogout = () => {}, toggleShortcutModal, restricted = false, ...props}) => (
+const Layout = ({
+  children,
+  handleLogout = () => {},
+  toggleShortcutModal,
+  restricted = false,
+  ...props}) => (
  <LayoutMDL fixedDrawer>
    <Header
      handleLogout={handleLogout}
      showShortcuts={toggleShortcutModal}
-      restricted={restricted}
      {...props} />
    <Drawer handleLogout={handleLogout} restricted={restricted} {...props} />
    <div className={styles.layout}>
@@ -3,3 +3,7 @@ export const SINGLE_VIEW = 'SINGLE_VIEW';
 export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
 export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
 export const HIDE_SHORTCUTS_NOTE = 'HIDE_SHORTCUTS_NOTE';
+export const SHOW_SUSPEND_USER_DIALOG = 'SHOW_SUSPEND_USER_DIALOG';
+export const HIDE_SUSPEND_USER_DIALOG = 'HIDE_SUSPEND_USER_DIALOG';
+export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
+export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 import {compose} from 'react-apollo';

 import {modUserFlaggedQuery} from 'coral-admin/src/graphql/queries';
-import {banUser, setUserStatus, suspendUser} from 'coral-admin/src/graphql/mutations';
+import {banUser, setUserStatus, rejectUsername} from 'coral-admin/src/graphql/mutations';

 import {
  fetchAccounts,
@@ -113,7 +113,7 @@ class CommunityContainer extends Component {
          error={data.error}
          showBanUserDialog={props.showBanUserDialog}
          approveUser={props.approveUser}
-          suspendUser={props.suspendUser}
+          rejectUsername={props.rejectUsername}
          showSuspendUserDialog={props.showSuspendUserDialog}
        />
        <BanUserDialog
@@ -126,7 +126,7 @@ class CommunityContainer extends Component {
          open={community.suspendDialog}
          handleClose={props.hideSuspendUserDialog}
          user={community.user}
-          suspendUser={props.suspendUser}
+          rejectUsername={props.rejectUsername}
        />
      </div>
    );
@@ -165,5 +165,5 @@ export default compose(
  modUserFlaggedQuery,
  banUser,
  setUserStatus,
-  suspendUser
+  rejectUsername
 )(CommunityContainer);
@@ -65,6 +65,7 @@ class Table extends Component {
                  label={lang.t('community.role')}
                  onChange={(role) => this.onRoleChange(row.id, role)}>
                  <Option value={''}>.</Option>
+                  <Option value={'STAFF'}>{lang.t('community.staff')}</Option>
                  <Option value={'MODERATOR'}>{lang.t('community.moderator')}</Option>
                  <Option value={'ADMIN'}>{lang.t('community.admin')}</Option>
                </SelectField>
@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from '../Community.css';
-import BanUserButton from '../../../components/BanUserButton';
+import BanUserButton from './BanUserButton';
 import {Button} from 'coral-ui';
 import {menuActionsMap} from '../../../containers/ModerationQueue/helpers/moderationQueueActionsMap';

@@ -10,16 +10,16 @@ const lang = new I18n(translations);

 const stages = [
  {
-    title: 'suspenduser.title_0',
-    description: 'suspenduser.description_0',
+    title: 'suspenduser.title_reject',
+    description: 'suspenduser.description_reject',
    options: {
      'j': 'suspenduser.no_cancel',
      'k': 'suspenduser.yes_suspend'
    }
  },
  {
-    title: 'suspenduser.title_1',
-    description: 'suspenduser.description_1',
+    title: 'suspenduser.title_notify',
+    description: 'suspenduser.description_notify',
    options: {
      'j': 'bandialog.cancel',
      'k': 'suspenduser.send'
@@ -34,11 +34,11 @@ class SuspendUserDialog extends Component  {
  static propTypes = {
    stage: PropTypes.number,
    handleClose: PropTypes.func.isRequired,
-    suspendUser: PropTypes.func.isRequired
+    rejectUsername: PropTypes.func.isRequired
  }

  componentDidMount() {
-    this.setState({email: lang.t('suspenduser.email'), about: lang.t('suspenduser.username')});
+    this.setState({email: lang.t('suspenduser.email_message_reject'), about: lang.t('suspenduser.username')});
  }

  /*
@@ -46,13 +46,13 @@ class SuspendUserDialog extends Component  {
  * handles the possible actions for that dialog.
  */
  onActionClick = (stage, menuOption) => () => {
-    const {suspendUser, user} = this.props;
+    const {rejectUsername, user} = this.props;
    const {stage} = this.state;

    const cancel = this.props.handleClose;
    const next = () => this.setState({stage: stage + 1});
    const suspend = () => {
-      suspendUser({userId: user.user.id, message: this.state.email})
+      rejectUsername({id: user.user.id, message: this.state.email})
      .then(() => {
        this.props.handleClose();
      });
@@ -79,7 +79,7 @@ class SuspendUserDialog extends Component  {
            open={open}
            onClose={handleClose}
            onCancel={handleClose}
-            title={lang.t('suspenduser.title')}>
+            title={lang.t('suspenduser.suspend_user')}>
            <div className={styles.title}>
              {lang.t(stages[stage].title, lang.t('suspenduser.username'))}
            </div>
@@ -96,24 +96,27 @@
  }
 }

+.inlineTextfield {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 0px 0px 1px 0px;  
+  text-align: center;
+  font-size: inherit;
+}
+
+.inlineTextfield:focus {
+  outline: none;
+}
+
 .charCountTexfield {
  width: 4em;
  padding: 0px;
-  border-color: #ccc;
-  border-style: solid;
-  border-width: 0px 0px 1px 0px;
-  font-size: 14px;
-  text-align: center;
 }

 .charCountTexfieldEnabled {
  border-color: #00796b;
 }

-.charCountTexfield:focus {
-  outline: none;
-}
-
 .changedSave {
  background-color: #00796B;
  color: white;
@@ -15,6 +15,7 @@ import translations from 'coral-admin/src/translations.json';
 import StreamSettings from './StreamSettings';
 import ModerationSettings from './ModerationSettings';
 import TechSettings from './TechSettings';
+import {can} from 'coral-framework/services/perms';

 class Configure extends Component {
  constructor (props) {
@@ -118,6 +119,11 @@ class Configure extends Component {
  render () {
    const {activeSection} = this.state;
    const section = this.getSection(activeSection);
+    const {auth: {user}} = this.props;
+
+    if (!can(user, 'UPDATE_CONFIG')) {
+      return <p>You must be an administrator to access config settings. Please find the nearest Admin and ask them to level you up!</p>;
+    }

    const showSave = Object.keys(this.state.errors).reduce(
      (bool, error) => this.state.errors[error] ? false : bool, this.state.changed);
@@ -172,6 +178,7 @@ class Configure extends Component {
 }

 const mapStateToProps = (state) => ({
+  auth: state.auth.toJS(),
  settings: state.settings.toJS()
 });
 export default connect(mapStateToProps)(Configure);
@@ -27,6 +27,12 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
  const on = styles.enabledSetting;
  const off = styles.disabledSetting;

+  const onChangeEditCommentWindowLength = (e) => {
+    const value = e.target.value;
+    const valueAsNumber = parseFloat(value);
+    const milliseconds = (!isNaN(valueAsNumber)) && (valueAsNumber * 1000);
+    updateSettings({editCommentWindowLength: milliseconds || value});
+  };
  return (
    <div className={styles.Configure}>
      <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
@@ -72,6 +78,27 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
        bannedWords={settings.wordlist.banned}
        suspectWords={settings.wordlist.suspect}
        onChangeWordlist={onChangeWordlist} />
+
+      {/* Edit Comment Timeframe */}
+      <Card className={styles.configSetting}>
+        <div className={styles.settingsHeader}>{lang.t('configure.edit-comment-timeframe-heading')}</div>
+        <p>
+          {lang.t('configure.edit-comment-timeframe-text-pre')}
+          &nbsp;
+          <input
+            style={{width: '3em'}}
+            className={styles.inlineTextfield}
+            type="number"
+            min="0"
+            onChange={onChangeEditCommentWindowLength}
+            placeholder="30"
+            defaultValue={(settings.editCommentWindowLength / 1000) /* saved as ms, rendered as seconds */}
+            pattern='[0-9]+([\.][0-9]*)?'
+          />
+          &nbsp;
+          {lang.t('configure.edit-comment-timeframe-text-post')}
+        </p>
+      </Card>      
    </div>
  );
 };
@@ -81,7 +81,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
          <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
            <span>{lang.t('configure.comment-count-text-pre')}</span>
            <input type='text'
-              className={`${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
+              className={`${styles.inlineTextfield} ${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
              htmlFor='charCount'
              onChange={updateCharCount(updateSettings, settingsError)}
              value={settings.charCount}
@@ -7,6 +7,7 @@ import {logout} from 'coral-framework/actions/auth';
 import {FullLoading} from '../components/FullLoading';
 import {toggleModal as toggleShortcutModal} from '../actions/moderation';
 import {checkLogin, handleLogin, requestPasswordReset} from '../actions/auth';
+import {can} from 'coral-framework/services/perms';

 class LayoutContainer extends Component {
  componentWillMount() {
@@ -17,7 +18,7 @@ class LayoutContainer extends Component {
  }
  render() {
    const {
-      isAdmin,
+      user,
      loggedIn,
      loadingUser,
      loginError,
@@ -33,7 +34,7 @@ class LayoutContainer extends Component {
    if (loadingUser) {
      return <FullLoading />;
    }
-    if (!isAdmin) {
+    if (!loggedIn) {
      return (
        <AdminLogin
          loginMaxExceeded={loginMaxExceeded}
@@ -45,7 +46,7 @@ class LayoutContainer extends Component {
        />
      );
    }
-    if (isAdmin && loggedIn) {
+    if (can(user, 'ACCESS_ADMIN') && loggedIn) {
      return (
        <Layout
          handleLogout={handleLogout}
@@ -53,6 +54,12 @@ class LayoutContainer extends Component {
          {...this.props}
        />
      );
+    } else if (loggedIn) {
+      return (
+        <Layout {...this.props}>
+          <p>This page is for team use only. Please contact an administrator if you want to join this team.</p>
+        </Layout>
+      );
    }
    return <FullLoading />;
  }
@@ -1,24 +1,42 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import {compose} from 'react-apollo';
+import * as notification from 'coral-admin/src/services/notification';
 import key from 'keymaster';
 import isEqual from 'lodash/isEqual';
 import styles from './components/styles.css';
+import translations from 'coral-admin/src/translations';
+import I18n from 'coral-framework/modules/i18n/i18n';

 import {modQueueQuery, getQueueCounts} from '../../graphql/queries';
-import {banUser, setCommentStatus} from '../../graphql/mutations';
+import {banUser, setCommentStatus, suspendUser} from '../../graphql/mutations';

 import {fetchSettings} from 'actions/settings';
 import {updateAssets} from 'actions/assets';
-import {toggleModal, singleView, showBanUserDialog, hideBanUserDialog, hideShortcutsNote} from 'actions/moderation';
+import {
+  toggleModal,
+  singleView,
+  showBanUserDialog,
+  hideBanUserDialog,
+  showSuspendUserDialog,
+  hideSuspendUserDialog,
+  hideShortcutsNote,
+  viewUserDetail,
+  hideUserDetail
+} from 'actions/moderation';

 import {Spinner} from 'coral-ui';
-import BanUserDialog from '../../components/BanUserDialog';
+import BanUserDialog from './components/BanUserDialog';
+import SuspendUserDialog from './components/SuspendUserDialog';
 import ModerationQueue from './ModerationQueue';
 import ModerationMenu from './components/ModerationMenu';
 import ModerationHeader from './components/ModerationHeader';
 import NotFoundAsset from './components/NotFoundAsset';
 import ModerationKeysModal from '../../components/ModerationKeysModal';
+import UserDetail from './UserDetail';
+
+const lang = new I18n(translations);

 class ModerationContainer extends Component {
  state = {
@@ -82,6 +100,33 @@ class ModerationContainer extends Component {
    this.props.modQueueResort(sort);
  }

+  suspendUser = async (args) => {
+    this.props.hideSuspendUserDialog();
+    try {
+      const result = await this.props.suspendUser(args);
+      if (result.data.suspendUser.errors) {
+        throw result.data.suspendUser.errors;
+      }
+      notification.success(
+        lang.t('suspenduser.notify_suspend_until',
+          this.props.moderation.suspendUserDialog.username,
+          lang.timeago(args.until)),
+      );
+      const {commentStatus, commentId} = this.props.moderation.suspendUserDialog;
+      if (commentStatus !== 'REJECTED') {
+        return this.props.rejectComment({commentId})
+          .then((result) => {
+            if (result.data.setCommentStatus.errors) {
+              throw result.data.setCommentStatus.errors;
+            }
+          });
+      }
+    }
+    catch(err) {
+      notification.showMutationErrors(err);
+    }
+  };
+
  componentWillUnmount() {
    key.unbind('s');
    key.unbind('shift+/');
@@ -111,7 +156,7 @@ class ModerationContainer extends Component {
  }

  render () {
-    const {data, moderation, settings, assets, onClose, ...props} = this.props;
+    const {data, moderation, settings, assets, onClose, viewUserDetail, hideUserDetail, ...props} = this.props;
    const providedAssetId = this.props.params.id;
    const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;

@@ -175,12 +220,16 @@ class ModerationContainer extends Component {
          bannedWords={settings.wordlist.banned}
          suspectWords={settings.wordlist.suspect}
          showBanUserDialog={props.showBanUserDialog}
+          showSuspendUserDialog={props.showSuspendUserDialog}
          acceptComment={props.acceptComment}
          rejectComment={props.rejectComment}
          loadMore={props.loadMore}
          assetId={providedAssetId}
          sort={this.state.sort}
          commentCount={activeTabCount}
+          currentUserId={this.props.auth.user.id}
+          viewUserDetail={viewUserDetail}
+          hideUserDetail={hideUserDetail}
        />
        <BanUserDialog
          open={moderation.banDialog}
@@ -192,11 +241,24 @@ class ModerationContainer extends Component {
          showRejectedNote={moderation.showRejectedNote}
          rejectComment={props.rejectComment}
        />
-      <ModerationKeysModal
+        <SuspendUserDialog
+          open={moderation.suspendUserDialog.show}
+          username={moderation.suspendUserDialog.username}
+          userId={moderation.suspendUserDialog.userId}
+          organizationName={data.settings.organizationName}
+          onCancel={props.hideSuspendUserDialog}
+          onPerform={this.suspendUser}
+        />
+        <ModerationKeysModal
          hideShortcutsNote={props.hideShortcutsNote}
          shortcutsNoteVisible={moderation.shortcutsNoteVisible}
          open={moderation.modalOpen}
          onClose={onClose}/>
+        {moderation.userDetailId && (
+          <UserDetail
+            id={moderation.userDetailId}
+            hideUserDetail={hideUserDetail} />
+        )}
      </div>
    );
  }
@@ -205,24 +267,32 @@ class ModerationContainer extends Component {
 const mapStateToProps = (state) => ({
  moderation: state.moderation.toJS(),
  settings: state.settings.toJS(),
+  auth: state.auth.toJS(),
  assets: state.assets.get('assets')
 });

 const mapDispatchToProps = (dispatch) => ({
-  toggleModal: (toggle) => dispatch(toggleModal(toggle)),
  onClose: () => dispatch(toggleModal(false)),
-  singleView: () => dispatch(singleView()),
-  updateAssets: (assets) => dispatch(updateAssets(assets)),
-  fetchSettings: () => dispatch(fetchSettings()),
-  showBanUserDialog: (user, commentId, commentStatus, showRejectedNote) => dispatch(showBanUserDialog(user, commentId, commentStatus, showRejectedNote)),
  hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
-  hideShortcutsNote: () => dispatch(hideShortcutsNote()),
+  ...bindActionCreators({
+    toggleModal,
+    singleView,
+    updateAssets,
+    fetchSettings,
+    showBanUserDialog,
+    hideShortcutsNote,
+    showSuspendUserDialog,
+    hideSuspendUserDialog,
+    viewUserDetail,
+    hideUserDetail,
+  }, dispatch),
 });

 export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  setCommentStatus,
  getQueueCounts,
+  banUser,
+  suspendUser,
  modQueueQuery,
-  banUser
 )(ModerationContainer);
@@ -12,10 +12,12 @@ const lang = new I18n(translations);
 class ModerationQueue extends React.Component {

  static propTypes = {
+    viewUserDetail: PropTypes.func.isRequired,
    bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
    suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
    currentAsset: PropTypes.object,
    showBanUserDialog: PropTypes.func.isRequired,
+    showSuspendUserDialog: PropTypes.func.isRequired,
    rejectComment: PropTypes.func.isRequired,
    acceptComment: PropTypes.func.isRequired,
    comments: PropTypes.array.isRequired
@@ -33,7 +35,17 @@ class ModerationQueue extends React.Component {
  }

  render () {
-    const {comments, selectedIndex, commentCount, singleView, loadMore, activeTab, sort, ...props} = this.props;
+    const {
+      comments,
+      selectedIndex,
+      commentCount,
+      singleView,
+      loadMore,
+      activeTab,
+      sort,
+      viewUserDetail,
+      ...props
+    } = this.props;

    return (
      <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
@@ -49,11 +61,14 @@ class ModerationQueue extends React.Component {
                selected={i === selectedIndex}
                suspectWords={props.suspectWords}
                bannedWords={props.bannedWords}
+                viewUserDetail={viewUserDetail}
                actions={actionsMap[status]}
                showBanUserDialog={props.showBanUserDialog}
+                showSuspendUserDialog={props.showSuspendUserDialog}
                acceptComment={props.acceptComment}
                rejectComment={props.rejectComment}
                currentAsset={props.currentAsset}
+                currentUserId={this.props.currentUserId}
                />;
            })
            : <EmptyCard>{lang.t('modqueue.emptyqueue')}</EmptyCard>
@@ -0,0 +1,41 @@
+.copyButton {
+  float: right;
+  top: -10px;
+}
+
+.memberSince {
+  clear: both;
+}
+
+.small {
+  color: #aaa;
+}
+
+.stats {
+  display: flex;
+
+  .stat {
+    margin: 0 4px 12px;
+  }
+
+  .stat:last-child {
+    margin-right: 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .stat p:first-child {
+    font-weight: bold;
+  }
+}
+
+.profileEmail {
+  border: none;
+  background-color: transparent;
+  font-size: 16px;
+  position: absolute;
+  width: 100%;
+  outline: none;
+}
@@ -0,0 +1,74 @@
+import React, {PropTypes} from 'react';
+import {Button, Drawer} from 'coral-ui';
+import styles from './UserDetail.css';
+import {compose} from 'react-apollo';
+import {getUserDetail} from 'coral-admin/src/graphql/queries';
+import Slot from 'coral-framework/components/Slot';
+
+class UserDetail extends React.Component {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    hideUserDetail: PropTypes.func.isRequired
+  }
+
+  copyPermalink = () => {
+    this.profile.select();
+    try {
+      document.execCommand('copy');
+    } catch (e) {
+
+      /* nothing */
+    }
+  }
+
+  render () {
+    const {data, hideUserDetail} = this.props;
+
+    if (!('user' in data)) {
+      return null;
+    }
+
+    const {user, totalComments, rejectedComments} = data;
+    const localProfile = user.profiles.find((p) => p.provider === 'local');
+    let profile;
+    if (localProfile) {
+      profile = localProfile.id;
+    }
+
+    let rejectedPercent = rejectedComments / totalComments;
+    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
+
+      // if totalComments is 0, you're dividing by zero, which is naughty
+      rejectedPercent = 0;
+    }
+
+    return (
+      <Drawer handleClickOutside={hideUserDetail}>
+        <h3>{user.username}</h3>
+        <Button className={styles.copyButton} onClick={this.copyPermalink}>Copy</Button>
+        {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
+        <Slot fill="userProfile" user={user} />
+        <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
+        <hr/>
+        <p>
+          <strong>Account summary</strong>
+          <br/><small className={styles.small}>Data represents the last six months of activity</small>
+        </p>
+        <div className={styles.stats}>
+          <div className={styles.stat}>
+            <p>Total Comments</p>
+            <p>{totalComments}</p>
+          </div>
+          <div className={styles.stat}>
+            <p>Reject Rate</p>
+            <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
+          </div>
+        </div>
+      </Drawer>
+    );
+  }
+}
+
+export default compose(
+  getUserDetail
+)(UserDetail);
@@ -152,13 +152,14 @@ input.error{

 .cancel {
  margin-right: 10px;
-  width: 47%;
+  width: 48%;
 }

 .ban {
-  width: 47%;
+  width: 48%;
 }

 .buttons {
-  margin: 20px 0;
+  margin: 20px;
+  text-align: center;
 }
@@ -5,7 +5,7 @@ import styles from './BanUserDialog.css';
 import Button from 'coral-ui/components/Button';

 import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations';
+import translations from '../../../translations';
 const lang = new I18n(translations);

 const onBanClick = (userId, commentId, commentStatus, handleBanUser, rejectComment, handleClose) => (e) => {
@@ -11,7 +11,8 @@ import Highlighter from 'react-highlight-words';
 import Slot from 'coral-framework/components/Slot';
 import {getActionSummary} from 'coral-framework/utils';
 import ActionButton from 'coral-admin/src/components/ActionButton';
-import BanUserButton from 'coral-admin/src/components/BanUserButton';
+import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
+import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';

 const linkify = new Linkify();

@@ -22,6 +23,7 @@ const lang = new I18n(translations);
 const Comment = ({
  actions = [],
  comment,
+  viewUserDetail,
  suspectWords,
  bannedWords,
  ...props
@@ -56,7 +58,7 @@ const Comment = ({
      <div className={styles.container}>
        <div className={styles.itemHeader}>
          <div className={styles.author}>
-            <span>
+            <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
              {comment.user.name}
            </span>
            <span className={styles.created}>
@@ -65,16 +67,19 @@ const Comment = ({
                lang.getLocale().replace('-', '_')
              )}
            </span>
-            <BanUserButton
-              user={comment.user}
-              onClick={() =>
-                props.showBanUserDialog(
-                  comment.user,
-                  comment.id,
-                  comment.status,
-                  comment.status !== 'REJECTED'
-                )}
-            />
+            {props.currentUserId !== comment.user.id &&
+              <ActionsMenu icon="not_interested">
+                <ActionsMenuItem
+                  disabled={comment.user.status === 'BANNED'}
+                  onClick={() => props.showSuspendUserDialog(comment.user.id, comment.user.name, comment.id, comment.status)}>
+                  Suspend User</ActionsMenuItem>
+                <ActionsMenuItem
+                  disabled={comment.user.status === 'BANNED'}
+                  onClick={() => props.showBanUserDialog(comment.user, comment.id, comment.status, comment.status !== 'REJECTED')}>
+                  Ban User
+                </ActionsMenuItem>
+              </ActionsMenu>
+            }
            <CommentType type={commentType} />
          </div>
          {comment.user.status === 'banned'
@@ -154,19 +159,24 @@ const Comment = ({
 };

 Comment.propTypes = {
+  viewUserDetail: PropTypes.func.isRequired,
  acceptComment: PropTypes.func.isRequired,
  rejectComment: PropTypes.func.isRequired,
  suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
  bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
  currentAsset: PropTypes.object,
+  showBanUserDialog: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func.isRequired,
+  currentUserId: PropTypes.string.isRequired,
  comment: PropTypes.shape({
    body: PropTypes.string.isRequired,
    action_summaries: PropTypes.array,
    actions: PropTypes.array,
    created_at: PropTypes.string.isRequired,
    user: PropTypes.shape({
+      id: PropTypes.string,
      status: PropTypes.string
-    }),
+    }).isRequired,
    asset: PropTypes.shape({
      title: PropTypes.string,
      url: PropTypes.string,
@@ -0,0 +1,90 @@
+.dialog {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 400px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 20px;
+  border-radius: 4px;
+}
+
+.header {
+  color: black;
+  font-size: 1.5em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
+
+.close {
+  display: block;
+  position: absolute;
+  top: 24px;
+  right: 20px;
+}
+
+.closeButton {
+  userSelect: none;
+  outline: none;
+  border: none;
+  touchAction: manipulation;
+  &::-moz-focus-inner: {
+    border: 0;
+  }
+  background: 0;
+  padding: 0;
+  font-size: 24px;
+  line-height: 14px;
+  cursor: pointer;
+  color: #363636;
+  &:hover {
+    color: #6b6b6b;
+  }
+}
+
+.legend {
+  padding: 0;
+  font-weight: bold;
+}
+
+div.radioGroup {
+  margin-top: 6px;
+}
+
+label.radioGroup {
+
+  &:global(.is-checked) > :global(.mdl-radio__outer-circle),
+  > :global(.mdl-radio__outer-circle) {
+    border-color: #212121;
+  }
+
+  > :global(.mdl-radio__inner-circle) {
+    background: #212121;
+  }
+
+  > :global(.mdl-radio__label) {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
+.messageInput {
+  border-radius: 3px;
+  width: 100%;
+  padding: 10px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+.cancel {
+  margin-right: 5px;
+}
+
+.perform {
+  min-width: 90px;
+}
+
+.buttons {
+  margin-top: 8px;
+  margin-bottom: 6px;
+  text-align: right;
+}
@@ -0,0 +1,165 @@
+import React, {PropTypes} from 'react';
+import {Dialog} from 'coral-ui';
+import {RadioGroup, Radio} from 'react-mdl';
+import styles from './SuspendUserDialog.css';
+
+import Button from 'coral-ui/components/Button';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import {dateAdd} from 'coral-framework/utils';
+import translations from '../../../translations';
+const lang = new I18n(translations);
+
+const initialState = {step: 0, duration: '3'};
+
+function durationsToDate(hours) {
+
+  // Add 1 minute more to help `timeago.js` to display the correct duration.
+  return dateAdd(new Date(), 'minute', hours * 60 + 1);
+}
+
+class SuspendUserDialog extends React.Component {
+
+  state = initialState;
+
+  componentWillReceiveProps(next) {
+    if (this.props.open && !next.open) {
+      this.setState(initialState);
+    }
+  }
+
+  handleDurationChange = (event) => {
+    this.setState({duration: event.target.value});
+  }
+
+  handleMessageChange = (event) => {
+    this.setState({message: event.target.value});
+  }
+
+  goToStep1 = () => {
+    this.setState({
+      step: 1,
+      message: lang.t(
+        'suspenduser.email_message_suspend',
+        this.props.username,
+        this.props.organizationName,
+        lang.timeago(durationsToDate(this.state.duration)),
+      ),
+    });
+  }
+
+  handlePerform = () => {
+
+    this.props.onPerform({
+      id: this.props.userId,
+      message: this.state.message,
+
+      // Add 1 minute more to help `timeago.js` to display the correct duration.
+      until: durationsToDate(this.state.duration),
+    });
+  };
+
+  renderStep0() {
+    const {onCancel, username} = this.props;
+    const {duration} = this.state;
+    return (
+      <section>
+        <h1 className={styles.header}>
+          {lang.t('suspenduser.title_suspend')}
+        </h1>
+        <p className={styles.description}>
+         {lang.t('suspenduser.description_suspend', username)}
+        </p>
+        <fieldset>
+          <legend className={styles.legend}>{lang.t('suspenduser.select_duration')}</legend>
+          <RadioGroup
+            name='status filter'
+            value={duration}
+            childContainer='div'
+            onChange={this.handleDurationChange}
+            className={styles.radioGroup}
+          >
+            <Radio value='1'>{lang.t('suspenduser.one_hour')}</Radio>
+            <Radio value='3'>{lang.t('suspenduser.hours', 3)}</Radio>
+            <Radio value='24'>{lang.t('suspenduser.hours', 24)}</Radio>
+            <Radio value='168'>{lang.t('suspenduser.days', 7)}</Radio>
+          </RadioGroup>
+        </fieldset>
+        <div className={styles.buttons}>
+          <Button cStyle="white" className={styles.cancel} onClick={onCancel} raised>
+            {lang.t('suspenduser.cancel')}
+          </Button>
+          <Button cStyle="black" className={styles.perform} onClick={this.goToStep1} raised>
+            {lang.t('suspenduser.suspend_user')}
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  renderStep1() {
+    const {onCancel, username} = this.props;
+    const {message} = this.state;
+    return (
+      <section>
+        <h1 className={styles.header}>
+          {lang.t('suspenduser.title_notify')}
+        </h1>
+        <p className={styles.description}>
+         {lang.t('suspenduser.description_notify', username)}
+        </p>
+        <fieldset>
+          <legend className={styles.legend}>{lang.t('suspenduser.write_message')}</legend>
+          <textarea
+            rows={5}
+            className={styles.messageInput}
+            value={message}
+            onChange={this.handleMessageChange} />
+        </fieldset>
+        <div className={styles.buttons}>
+          <Button cStyle="white" className={styles.cancel} onClick={onCancel} raised>
+            {lang.t('suspenduser.cancel')}
+          </Button>
+          <Button
+            cStyle="black"
+            className={styles.perform}
+            onClick={this.handlePerform}
+            disabled={this.state.message.length === 0}
+            raised
+          >
+            {lang.t('suspenduser.send')}
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  render() {
+    const {open, onCancel} = this.props;
+    const {step} = this.state;
+    return (
+      <Dialog
+        className={styles.dialog}
+        onCancel={onCancel}
+        open={open}
+      >
+        <div className={styles.close}>
+          <button aria-label="Close" onClick={onCancel} className={styles.closeButton}>×</button>
+        </div>
+        {step === 0 && this.renderStep0()}
+        {step === 1 && this.renderStep1()}
+      </Dialog>
+    );
+  }
+}
+
+SuspendUserDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onPerform: PropTypes.func.isRequired,
+  username: PropTypes.string,
+  userId: PropTypes.string,
+  organizationName: PropTypes.string,
+};
+
+export default SuspendUserDialog;
@@ -424,6 +424,17 @@ span {
  top: 7px;
 }

+.username {
+  color: blue;
+  text-decoration: underline;
+  padding: 5px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(255, 0, 0, .1);
+  }
+}
+
 .external {
  font-size: .7em;
  text-decoration: none;
@@ -2,6 +2,7 @@ import {graphql} from 'react-apollo';
 import SET_USER_STATUS from './setUserStatus.graphql';
 import SET_COMMENT_STATUS from './setCommentStatus.graphql';
 import SUSPEND_USER from './suspendUser.graphql';
+import REJECT_USERNAME from './rejectUsername.graphql';

 export const banUser = graphql(SET_USER_STATUS, {
  props: ({mutate}) => ({
@@ -32,11 +33,22 @@ export const setUserStatus = graphql(SET_USER_STATUS, {

 export const suspendUser = graphql(SUSPEND_USER, {
  props: ({mutate}) => ({
-    suspendUser: ({userId, message}) => {
+    suspendUser: (input) => {
      return mutate({
        variables: {
-          userId,
-          message
+          input,
+        },
+      });
+    }
+  })
+});
+
+export const rejectUsername = graphql(REJECT_USERNAME, {
+  props: ({mutate}) => ({
+    rejectUsername: (input) => {
+      return mutate({
+        variables: {
+          input,
        },
        refetchQueries: ['Users']
      });
@@ -0,0 +1,7 @@
+mutation rejectUsername($input: RejectUsernameInput!) {
+  rejectUsername(input: $input) {
+    errors {
+      translation_key
+    }
+  }
+}
@@ -1,5 +1,5 @@
-mutation suspendUser($userId: ID!, $message: String) {
-  suspendUser(id: $userId, message: $message) {
+mutation suspendUser($input: SuspendUserInput!) {
+  suspendUser(input: $input) {
    errors {
      translation_key
    }
@@ -4,6 +4,7 @@ import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
 import MOD_QUEUE_LOAD_MORE from './loadMore.graphql';
 import MOD_USER_FLAGGED_QUERY from './modUserFlaggedQuery.graphql';
 import METRICS from './metricsQuery.graphql';
+import USER_DETAIL from './userDetail.graphql';
 import GET_QUEUE_COUNTS from './getQueueCounts.graphql';

 export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
@@ -95,6 +96,14 @@ export const modQueueResort = (id, fetchMore) => (sort) => {
  });
 };

+export const getUserDetail = graphql(USER_DETAIL, {
+  options: ({id}) => {
+    return {
+      variables: {author_id: id}
+    };
+  }
+});
+
 export const getQueueCounts = graphql(GET_QUEUE_COUNTS, {
  options: ({params: {id = null}}) => {
    return {
@@ -62,4 +62,7 @@ query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
      asset_id: $asset_id,
      statuses: [NONE, PREMOD]
    })
+    settings {
+      organizationName
+    }
 }
@@ -0,0 +1,13 @@
+query UserDetail ($author_id: ID!) {
+  user(id: $author_id) {
+    id
+    username
+    created_at
+    profiles {
+      id
+      provider
+    }
+  }
+  totalComments: commentCount(query: {author_id: $author_id})
+  rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
+}
@@ -4,7 +4,6 @@ import * as actions from '../constants/auth';
 const initialState = Map({
  loggedIn: false,
  user: null,
-  isAdmin: false,
  loginError: null,
  loginMaxExceeded: false,
  passwordRequestSuccess: null
@@ -24,7 +23,6 @@ export default function auth (state = initialState, action) {
    return state
      .set('loggedIn', true)
      .set('loadingUser', false)
-      .set('isAdmin', action.isAdmin)
      .set('user', action.user);
  case actions.LOGOUT:
    return initialState;
@@ -1,14 +1,22 @@
-import {Map} from 'immutable';
+import {fromJS, Map} from 'immutable';
 import * as actions from '../constants/moderation';

-const initialState = Map({
+const initialState = fromJS({
  singleView: false,
  modalOpen: false,
-  user: Map({}),
+  user: {},
  commentId: null,
  commentStatus: null,
+  userDetailId: null,
  banDialog: false,
-  shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show'
+  shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show',
+  suspendUserDialog: {
+    show: false,
+    userId: null,
+    username: '',
+    commentId: null,
+    commentStatus: '',
+  },
 });

 export default function moderation (state = initialState, action) {
@@ -26,6 +34,20 @@ export default function moderation (state = initialState, action) {
        showRejectedNote: action.showRejectedNote,
        banDialog: true
      });
+  case actions.SHOW_SUSPEND_USER_DIALOG:
+    return state
+      .mergeDeep({
+        suspendUserDialog: {
+          show: true,
+          userId: action.userId,
+          username: action.username,
+          commentId: action.commentId,
+          commentStatus: action.commentStatus,
+        }
+      });
+  case actions.HIDE_SUSPEND_USER_DIALOG:
+    return state
+      .setIn(['suspendUserDialog', 'show'], false);
  case actions.SET_ACTIVE_TAB:
    return state
      .set('activeTab', action.activeTab);
@@ -38,6 +60,10 @@ export default function moderation (state = initialState, action) {
  case actions.HIDE_SHORTCUTS_NOTE:
    return state
      .set('shortcutsNoteVisible', 'hide');
+  case actions.VIEW_USER_DETAIL:
+    return state.set('userDetailId', action.userId);
+  case actions.HIDE_USER_DETAIL:
+    return state.set('userDetailId', null);
  default :
    return state;
  }
@@ -0,0 +1,28 @@
+import translations from 'coral-admin/src/translations';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import {toast} from 'react-toastify';
+
+const lang = new I18n(translations);
+
+export function success(msg) {
+  return toast(msg, {type: 'success'});
+}
+
+export function error(msg) {
+  return toast(msg, {type: 'error'});
+}
+
+export function info(msg) {
+  return toast(msg, {type: 'info'});
+}
+
+export function showMutationErrors(err) {
+  const errors = Array.isArray(err) ? err : [err];
+  errors.forEach((err) => {
+    console.error(err);
+    toast(
+      err.translation_key ? lang.t(`errors.${err.translation_key}`) : err,
+      {type: 'error'}
+    );
+  });
+}
@@ -1,7 +1,7 @@
 {
  "en": {
    "errors": {
-      "NOT_AUTHORIZED": "Your username or password is not recognized by our system.",
+      "NOT_AUTHORIZED": "You are not authorized to perform this action.",
      "LOGIN_MAXIMUM_EXCEEDED": "You have made too many unsuccessful password attempts. Please wait."
    },
    "community": {
@@ -10,6 +10,7 @@
      "newsroom_role": "Newsroom Role",
      "admin": "Administrator",
      "moderator": "Moderator",
+      "staff": "Staff",
      "role": "Select role...",
      "no-results": "No users found with that user name or email address. They're hiding!",
      "status": "Status",
@@ -106,6 +107,9 @@
      "include-text": "Include your text here.",
      "enable-premod-links": "Pre-Moderate Comments Containing Links",
      "enable-premod-links-text": "Moderators must approve any comment containing a link before its published.",
+      "edit-comment-timeframe-heading": "Edit Comment Timeframe",
+      "edit-comment-timeframe-text-pre": "Commenters will have",
+      "edit-comment-timeframe-text-post": "seconds to edit their comments.",
      "comment-settings": "Settings",
      "embed-comment-stream": "Embed Stream",
      "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.",
@@ -140,19 +144,30 @@
      "yes_ban_user": "Yes, Ban User"
    },
    "suspenduser": {
-      "title": "Suspend a user",
-      "title_0": "We noticed you rejected a username",
-      "description_0": "Would you like to temporarily ban this user because of their {0}? Doing so will temporarily hide their comments until they rewrite their {0}.",
-      "title_1": "Notify the user of their temporary suspension",
-      "description_1": "Suspending this user will temporarily disable their account and hide all of their comments on the site.",
+      "title_suspend": "Suspend User",
+      "description_suspend": "You are suspending {0}. This comment will go to the Rejected queue, and {0} will not be allowed to like, report, reply or post until the suspension time is complete.",
+      "select_duration": "Select suspension duration",
+      "title_reject": "We noticed you rejected a username",
+      "description_reject": "Would you like to temporarily ban this user because of their {0}? Doing so will temporarily hide their comments until they rewrite their {0}.",
+
+      "title_notify": "Notify the user of their temporary suspension",
+      "description_notify": "Suspending this user will temporarily disable their account and hide all of their comments on the site.",
      "no_cancel": "No, cancel",
      "yes_suspend": "Yes, suspend",
      "send": "Send",
      "bio": "bio",
      "username": "username",
      "email_subject": "Your account has been suspended",
-      "email": "Another member of the community recently flagged your username for review. Because of its content your user was rejected. This means you can no longer comment, like, or flag content until you rewrite your username. Please e-mail us if you have any questions or concerns.",
-      "write_message": "Write a message"
+      "email_message_reject": "Another member of the community recently flagged your username for review. Because of its content your user was rejected. This means you can no longer comment, like, or flag content until you rewrite your username. Please e-mail us if you have any questions or concerns.",
+      "email_message_suspend": "Dear {0},\n\nIn accordance with {1}’s community guidelines, your account has been temporarily suspended. During the suspension, you will be unable to comment, flag or engage with fellow commenters. Please rejoin the conversation {2}.",
+      "write_message": "Write a message",
+      "one_hour": "1 hour",
+      "hours": "{0} hours",
+      "days": "{0} days",
+      "suspend_user": "Suspend User",
+      "cancel": "Cancel",
+      "error_email_message_empty": "You must specify an E-Mail message.",
+      "notify_suspend_until": "User {0} has been temporarily suspended. This suspension will automatically end {1}."
    },
    "dashboard": {
      "next-update": "{0} minutes until next update.",
@@ -193,6 +208,7 @@
      "newsroom_role": "Rol en la redacción",
      "admin": "Administradora",
      "moderator": "Moderadora",
+      "staff": "Miembro",
      "role": "Seleccionar rol...",
      "no-results": "No se encontraron usuarixs con ese nombre de usuario o e-mail.",
      "status": "Estado",
@@ -217,19 +233,24 @@
      "yes_ban_user": "Si, Suspendan el usuario"
    },
    "suspenduser": {
-      "title": "Suspendiendo un usuario",
-      "title_0": "Esta queriendo suspender un usuario?",
-      "description_0": "Le gustaria suspender a esta usuaria temporarianmente por su nombre de usuario? Si lo hace sus comentarios serán escondidos temporariamente hasta que puedan reescribir su nombre de usuario.",
-      "title_1": "Enviarle una nota al usuario sobre su cuenta suspendida",
-      "description_1": "Si suspende a este usuario, su cuenta va a ser deshabilitada y todos sus comentarios escondidos del sitio.",
+      "title_suspend": "Suspender Usuario",
+      "title_reject": "Esta queriendo suspender un usuario?",
+      "description_reject": "Le gustaria suspender a esta usuaria temporarianmente por su nombre de usuario? Si lo hace sus comentarios serán escondidos temporariamente hasta que puedan reescribir su nombre de usuario.",
+      "title_notify": "Enviarle una nota al usuario sobre su cuenta suspendida",
+      "description_notify": "Si suspende a este usuario, su cuenta va a ser deshabilitada y todos sus comentarios escondidos del sitio.",
      "no_cancel": "No, cancelar",
      "yes_suspend": "Si, suspender",
      "send": "Enviar",
      "username": "nombre de usuario",
      "email_subject": "Su cuenta ha sido suspendida temporariamente",
-      "email": "Otra persona de la comunidad recientemente marcó su nombre de usuario para ser revisado. Por su contenido, el nombre de usuario ha sido rechazado. Esto quiere decir que no puede comentar, gustar o marcar contenido hasta que modifique su nombre de usuario. Por favor, envienos un correo a moderator@newsorg.com si tiene alguna pregunta o preocupación",
+      "email_message_reject": "Otra persona de la comunidad recientemente marcó su nombre de usuario para ser revisado. Por su contenido, el nombre de usuario ha sido rechazado. Esto quiere decir que no puede comentar, gustar o marcar contenido hasta que modifique su nombre de usuario. Por favor, envienos un correo a moderator@newsorg.com si tiene alguna pregunta o preocupación",
      "write_message": "Escribir un mensaje",
-      "loading": "Cargando resultados"
+      "loading": "Cargando resultados",
+      "hour": "una hora",
+      "hours": "{0} horas",
+      "days": "{0} días",
+      "suspend_user": "Suspender",
+      "cancel": "Cancelar"
    },
    "modqueue": {
      "all": "todos",
@@ -294,6 +315,9 @@
      "embed-comment-stream": "Colocar Hilo de Comentarios",
      "enable-premod-links": "Pre-Moderar Commentarios que contienen Enlaces",
      "enable-premod-links-text": "Los y las Moderadoras deben aprobar cualquier comentario que contengan links antes de su publicación.",
+      "edit-comment-timeframe-heading": "Editar Tiempo de Comentario",
+      "edit-comment-timeframe-text-pre": "Los comentaristas tendrán",
+      "edit-comment-timeframe-text-post": "segundos para editar sus comentarios.",
      "wordlist": "Palabras Suspendidas y Sospechosas",
      "banned-word-text": "Comentarios que contengan estas palabras o frases, no separadas por comas y en mayusculas o minusuculas, serán automaticamente marcadas para separar los comentarios publicados.",
      "suspect-word-text": "Comentarios que contengan estas palabras o frases, considerando mayusculas y minusculas, serán automaticamente  destacadas en los comentarios publicados. Escribir una palabra y apretar Enter o Tabulador para agergarla. Opcionalmente pegar una lista separada por coma.",
@@ -1,16 +0,0 @@
-<html>
-  <head>
-  </head>
-  <body>
-  <div style="margin-left:auto; margin-right:auto; width:500px">
-    <h1>Lorem ipsum</h1>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis sollicitudin eros a ornare. Curabitur dignissim vestibulum massa non rhoncus. Cras laoreet ante vel nunc hendrerit, ac imperdiet neque egestas. Suspendisse aliquet iaculis fermentum. Pellentesque interdum nec elit sed tincidunt. Donec volutpat, tellus posuere laoreet consequat, mi lacus laoreet massa, sed vehicula mauris velit non lectus. Integer non enim nec neque congue faucibus porttitor sit amet dui.</p>
-<p>Nunc pharetra orci id diam feugiat, vitae rutrum magna efficitur. Morbi porttitor blandit lorem, et facilisis tellus luctus at. Morbi tincidunt eget nisl id placerat. Nullam consectetur quam vel mauris lacinia, non consectetur est faucibus. Duis cursus auctor nulla nec sagittis. Aenean sem erat, ultrices a hendrerit consectetur, accumsan non lorem. Integer ac neque sed magna sodales vulputate at quis neque. Praesent eget ornare lacus. Donec ultricies, dolor eget commodo faucibus, arcu velit ullamcorper tellus, in cursus tellus elit sed urna. Suspendisse in consequat magna. Duis vel ullamcorper tortor, vel cursus libero. Proin et nisi luctus ligula faucibus luctus. Morbi pulvinar, justo ac feugiat elementum, libero tellus congue justo, pharetra ultrices felis felis id leo. Integer mattis quam tempus libero porta, ac pretium ligula elementum.</p>
-<div id='coralStreamEmbed'></div>
-<script type='text/javascript' src='/client/js/lib/pym.v1.min.js'></script>
-<script>
-var pymParent = new pym.Parent('coralStreamEmbed', 'index.html', {title: 'comments'});
-pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})</script>
-</div>
-  </body>
-</html>
@@ -25,7 +25,7 @@ import {getActionSummary, iPerformedThisAction} from 'coral-framework/utils';
 import {getEditableUntilDate} from './util';
 import styles from './Comment.css';

-const isStaff = (tags) => !!tags.filter((i) => i.tag.name === 'STAFF').length;
+const isStaff = (tags) => tags.some((i) => i.tag.name === 'STAFF');

 // hold actions links (e.g. Reply) along the comment footer
 const ActionButton = ({children}) => {
@@ -1,6 +1,7 @@
 import React from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations';
+import {can} from 'coral-framework/services/perms';
 const lang = new I18n(translations);

 import {TabBar, Tab, TabContent, Button} from 'coral-ui';
@@ -9,7 +10,6 @@ import Stream from '../containers/Stream';
 import Count from 'coral-plugin-comment-count/CommentCount';
 import UserBox from 'coral-sign-in/components/UserBox';
 import ProfileContainer from 'coral-settings/containers/ProfileContainer';
-import RestrictedContent from 'coral-framework/components/RestrictedContent';
 import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';

 export default class Embed extends React.Component {
@@ -38,7 +38,7 @@ export default class Embed extends React.Component {
  render () {
    const {activeTab, logout, viewAllComments, commentId} = this.props;
    const {asset: {totalCommentCount}} = this.props.root;
-    const {loggedIn, isAdmin, user} = this.props.auth;
+    const {loggedIn, user} = this.props.auth;

    const userBox = <UserBox user={user} onLogout={logout} onShowProfile={this.handleShowProfile}/>;

@@ -48,7 +48,7 @@ export default class Embed extends React.Component {
          <TabBar onChange={this.changeTab} activeTab={activeTab}>
            <Tab><Count count={totalCommentCount}/></Tab>
            <Tab>{lang.t('myProfile')}</Tab>
-            <Tab restricted={!isAdmin}>Configure Stream</Tab>
+            <Tab restricted={!can(user, 'UPDATE_CONFIG')}>Configure Stream</Tab>
          </TabBar>
          {
            commentId &&
@@ -68,10 +68,8 @@ export default class Embed extends React.Component {
            <ProfileContainer />
          </TabContent>
          <TabContent show={activeTab === 'config'}>
-            <RestrictedContent restricted={!loggedIn}>
-              { loggedIn ? userBox : null }
-              <ConfigureStreamContainer />
-            </RestrictedContent>
+            { loggedIn ? userBox : null }
+            <ConfigureStreamContainer />
          </TabContent>
        </div>
      </div>
@@ -9,10 +9,16 @@ import {ModerationLink} from 'coral-plugin-moderation';
 import CommentBox from 'coral-plugin-commentbox/CommentBox';
 import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
-import SuspendedAccount from 'coral-framework/components/SuspendedAccount';
-import RestrictedContent from 'coral-framework/components/RestrictedContent';
+import SuspendedAccount from './SuspendedAccount';
+import RestrictedMessageBox
+  from 'coral-framework/components/RestrictedMessageBox';
+import {can} from 'coral-framework/services/perms';
 import ChangeUsernameContainer
  from 'coral-sign-in/containers/ChangeUsernameContainer';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-framework/translations';
+
+const lang = new I18n(translations);

 class Stream extends React.Component {
  setActiveReplyBox = (reactKey) => {
@@ -25,7 +31,7 @@ class Stream extends React.Component {

  render() {
    const {
-      root: {asset, asset: {comments}, comment, myIgnoredUsers},
+      root: {asset, asset: {comments}, comment, me},
      postComment,
      addNotification,
      postFlag,
@@ -37,7 +43,7 @@ class Stream extends React.Component {
      removeTag,
      pluginProps,
      ignoreUser,
-      auth: {loggedIn, isAdmin, user},
+      auth: {loggedIn, user},
      commentCountCache,
      editName
    } = this.props;
@@ -49,6 +55,7 @@ class Stream extends React.Component {
      : comment;

    const banned = user && user.status === 'BANNED';
+    const temporarilySuspended = user && user.suspension.until && new Date(user.suspension.until) > new Date();

    const hasOlderComments = !!(asset &&
      asset.lastComment &&
@@ -58,8 +65,9 @@ class Stream extends React.Component {
    const firstCommentDate = asset.comments[0]
      ? asset.comments[0].created_at
      : new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
-    const commentIsIgnored = (comment) =>
-      myIgnoredUsers && myIgnoredUsers.includes(comment.user.id);
+    const commentIsIgnored = (comment) => {
+      return me && me.ignoredUsers && me.ignoredUsers.find((u) => u.id === comment.user.id);
+    };
    return (
      <div id="stream">
        {open
@@ -72,32 +80,38 @@ class Stream extends React.Component {
                content={asset.settings.questionBoxContent}
                enable={asset.settings.questionBoxEnable}
              />
-              <RestrictedContent
-                restricted={banned}
-                restrictedComp={
-                  <SuspendedAccount
-                    canEditName={user && user.canEditName}
-                    editName={editName}
+              {!banned && temporarilySuspended &&
+                <RestrictedMessageBox>
+                  {
+                    lang.t('temporarilySuspended',
+                      this.props.root.settings.organizationName,
+                      lang.timeago(user.suspension.until),
+                    )
+                  }
+                </RestrictedMessageBox>
+              }
+              {banned &&
+                <SuspendedAccount
+                  canEditName={user && user.canEditName}
+                  editName={editName}
+                />
+              }
+              {loggedIn && !banned && !temporarilySuspended &&
+                <CommentBox
+                    addNotification={this.props.addNotification}
+                    postComment={this.props.postComment}
+                    appendItemArray={this.props.appendItemArray}
+                    updateItem={this.props.updateItem}
+                    setCommentCountCache={this.props.setCommentCountCache}
+                    commentCountCache={commentCountCache}
+                    assetId={asset.id}
+                    premod={asset.settings.moderation}
+                    isReply={false}
+                    authorId={user.id}
+                    charCountEnable={asset.settings.charCountEnable}
+                    maxCharCount={asset.settings.charCount}
                  />
-                }
-              >
-                {user
-                  ? <CommentBox
-                      addNotification={this.props.addNotification}
-                      postComment={this.props.postComment}
-                      appendItemArray={this.props.appendItemArray}
-                      updateItem={this.props.updateItem}
-                      setCommentCountCache={this.props.setCommentCountCache}
-                      commentCountCache={commentCountCache}
-                      assetId={asset.id}
-                      premod={asset.settings.moderation}
-                      isReply={false}
-                      authorId={user.id}
-                      charCountEnable={asset.settings.charCountEnable}
-                      maxCharCount={asset.settings.charCount}
-                    />
-                  : null}
-              </RestrictedContent>
+              }
            </div>
          : <p>{asset.settings.closedMessage}</p>}
        {!loggedIn &&
@@ -111,7 +125,7 @@ class Stream extends React.Component {
        {loggedIn &&
          user &&
          <ChangeUsernameContainer loggedIn={loggedIn} user={user} />}
-        {loggedIn && <ModerationLink assetId={asset.id} isAdmin={isAdmin} />}
+        {loggedIn && <ModerationLink assetId={asset.id} isAdmin={can(user, 'MODERATE_COMMENTS')} />}

        {/* the highlightedComment is isolated after the user followed a permalink */}
        {highlightedComment
@@ -150,8 +164,8 @@ class Stream extends React.Component {
              />
              <div className="embed__stream">
                {comments.map(
-                  (comment) =>
-                    (commentIsIgnored(comment)
+                  (comment) => {
+                    return (commentIsIgnored(comment)
                      ? <IgnoredCommentTombstone key={comment.id} />
                      : <Comment
                          data={this.props.data}
@@ -180,7 +194,9 @@ class Stream extends React.Component {
                          charCountEnable={asset.settings.charCountEnable}
                          maxCharCount={asset.settings.charCount}
                          editComment={this.props.editComment}
-                        />)
+                        />
+                    );
+                  }
                )}
              </div>
              <LoadMore
@@ -1,8 +1,3 @@
-.message {
-  background: #D8D8D8;
-  padding: 25px;
-}
-
 .editNameInput {
  margin-top: 10px;
  margin-bottom: 10px;
@@ -2,9 +2,10 @@ import React, {Component, PropTypes} from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations.json';
 const lang = new I18n(translations);
-import styles from './RestrictedContent.css';
+import styles from './SuspendAccount.css';
 import {Button} from 'coral-ui';
-import validate from '../helpers/validate';
+import validate from 'coral-framework/helpers/validate';
+import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';

 class SuspendedAccount extends Component {

@@ -38,7 +39,7 @@ class SuspendedAccount extends Component {
    const {canEditName} = this.props;
    const {username, alert} = this.state;

-    return <div className={styles.message}>
+    return <RestrictedMessageBox>
      <span>{
          canEditName ?
          lang.t('editName.msg')
@@ -72,7 +73,7 @@ class SuspendedAccount extends Component {
          </Button>
        </div> : null
      }
-    </div>;
+    </RestrictedMessageBox>;
  }
 }

@@ -112,7 +112,10 @@ class StreamContainer extends React.Component {

  componentDidMount() {
    if (this.props.previousTab) {
-      this.props.data.refetch();
+      this.props.data.refetch()
+        .then(({data: {asset: {commentCount}}}) => {
+          return this.props.setCommentCountCache(commentCount);
+        });
    }
    this.countPoll = setInterval(() => {
      this.getCounts(this.props.data.variables);
@@ -205,6 +208,12 @@ const fragments = {
      }
      me {
        status
+        ignoredUsers {
+          id
+        }
+      }
+      settings {
+        organizationName
      }
      ...${getDefinitionName(Comment.fragments.root)}
    }
@@ -109,19 +109,40 @@ const extension = {
    `,
  },
  mutations: {
-    IgnoreUser: () => ({
-
-      // TODO: don't rely on refetching.
-      refetchQueries: [
-        'EmbedQuery', 'EmbedStreamProfileQuery',
-      ],
+    IgnoreUser: ({variables}) => ({
+      updateQueries: {
+        EmbedQuery: (previousData, {mutationResult}) => {
+          const ignoredUserId = variables.id;
+          const response = mutationResult.data.ignoreUser;
+          if (ignoredUserId && !response.errors) {
+            const updated = update(previousData, {me: {ignoredUsers: {$push: [{
+              id: ignoredUserId,
+              __typename: 'User',
+            }]}}});
+            return updated;
+          }
+          return previousData;
+        }
+      }
    }),
-    StopIgnoringUser: () => ({
+    StopIgnoringUser: ({variables}) => ({
+      updateQueries: {
+        EmbedStreamProfileQuery: (previousData, {mutationResult}) => {
+          const noLongerIgnoredUserId = variables.id;
+          const response = mutationResult.data.stopIgnoringUser;
+          if (noLongerIgnoredUserId && !response.errors) {

-      // TODO: don't rely on refetching.
-      refetchQueries: [
-        'EmbedQuery', 'EmbedStreamProfileQuery',
-      ],
+            // remove noLongerIgnoredUserId from ignoredUsers
+            const updated = update(previousData, {me: {ignoredUsers: {
+              $apply: (ignoredUsers) => {
+                return ignoredUsers.filter((u) => u.id !== noLongerIgnoredUserId);
+              }
+            }}});
+            return updated;
+          }
+          return previousData;
+        }
+      }
    }),
    PostComment: ({
      variables: {comment: {asset_id, body, parent_id, tags = []}},
@@ -195,7 +216,13 @@ const extension = {
      variables: {id, edit},
    }) => ({
      updateQueries: {
-        EmbedQuery: (previousData, {mutationResult: {data: {editComment: {comment: {status}}}}}) => {
+        EmbedQuery: (previousData, {mutationResult: {data: {editComment: {comment, errors}}}}) => {
+
+          // @TODO (kiwi) revisit after streamlining error handling
+          if (errors && errors.length) {
+            return previousData;
+          }
+          const {status} = comment;
          const updateCommentWithEdit = (comment, edit) => {
            const {body} = edit;
            const editedComment = update(comment, {
@@ -187,7 +187,7 @@ export const fetchSignUpFacebook = () => (dispatch) => {
  );
 };

-export const facebookCallback = (err, data) => (dispatch) => {
+export const facebookCallback = (err, data) => (dispatch, getState) => {
  if (err) {
    dispatch(signInFacebookFailure(err));
    return;
@@ -196,8 +196,10 @@ export const facebookCallback = (err, data) => (dispatch) => {
    dispatch(handleAuthToken(data.token));
    dispatch(signInFacebookSuccess(data.user));
    dispatch(hideSignInDialog());
-    dispatch(showCreateUsernameDialog());
-    dispatch(hideSignInDialog());
+    const {user: {canEditName, status}} = getState().auth.toJS();
+    if (canEditName && status !== 'BANNED') {
+      dispatch(showCreateUsernameDialog());
+    }
  } catch (err) {
    dispatch(signInFacebookFailure(err));
    return;
@@ -294,8 +296,7 @@ export const checkLogin = () => (dispatch) => {
        throw new Error('Not logged in');
      }

-      const isAdmin = !!result.user.roles.filter((i) => i === 'ADMIN').length;
-      dispatch(checkLoginSuccess(result.user, isAdmin));
+      dispatch(checkLoginSuccess(result.user));
    })
    .catch((error) => {
      console.error(error);
@@ -1,13 +1,13 @@
 import React from 'react';
-import styles from './RestrictedContent.css';

+import RestrictedMessageBox from './RestrictedMessageBox';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations.json';
 const lang = new I18n(translations);

 export default ({children, restricted, message = lang.t('contentNotAvailable'), restrictedComp}) => {
  if (restricted) {
-    return restrictedComp ? restrictedComp : messageBox(message);
+    return restrictedComp ? restrictedComp : <RestrictedMessageBox message={message} />;
  } else {
    return (
      <div>
@@ -17,4 +17,3 @@ export default ({children, restricted, message = lang.t('contentNotAvailable'),
  }
 };

-const messageBox = (message) => <div className={styles.message}>{message}</div>;
@@ -0,0 +1,6 @@
+.message {
+  background: #D8D8D8;
+  padding: 25px;
+  margin-bottom: 8px;
+}
+
@@ -0,0 +1,4 @@
+import React from 'react';
+import styles from './RestrictedMessageBox.css';
+
+export default ({children}) => <div className={styles.message}>{children}</div>;
@@ -4,7 +4,6 @@ import * as actions from '../constants/auth';
 const initialState = Map({
  isLoading: false,
  loggedIn: false,
-  isAdmin: false,
  user: null,
  showSignInDialog: false,
  showCreateUsernameDialog: false,
@@ -76,12 +75,10 @@ export default function auth (state = initialState, action) {
    return state
      .set('checkedInitialLogin', true)
      .set('loggedIn', true)
-      .set('isAdmin', action.isAdmin)
      .set('user', purge(action.user));
  case actions.FETCH_SIGNIN_SUCCESS:
    return state
      .set('loggedIn', true)
-      .set('isAdmin', action.isAdmin)
      .set('user', purge(action.user));
  case actions.FETCH_SIGNIN_FAILURE:
    return state
@@ -117,8 +114,7 @@ export default function auth (state = initialState, action) {
    return state
      .set('user', null)
      .set('isLoading', false)
-      .set('loggedIn', false)
-      .set('isAdmin', false);
+      .set('loggedIn', false);
  case actions.INVALID_FORM:
    return state
      .set('error', action.error);
@@ -1,4 +1,4 @@
-import {Map, Set} from 'immutable';
+import {Map} from 'immutable';
 import * as authActions from '../constants/auth';
 import * as actions from '../constants/user';
 import * as assetActions from '../constants/assets';
@@ -9,7 +9,6 @@ const initialState = Map({
  settings: {},
  myComments: [],
  myAssets: [], // the assets from which myComments (above) originated
-  ignoredUsers: Set(),
 });

 const purge = (user) => {
@@ -39,14 +38,6 @@ export default function user (state = initialState, action) {
    return state.set('myAssets', action.assets);
  case actions.LOGOUT_SUCCESS:
    return initialState;
-  case 'APOLLO_MUTATION_RESULT':
-    switch (action.operationName) {
-    case 'ignoreUser':
-      return state.updateIn(['ignoredUsers'], (i) => i.add(action.variables.id));        
-    case 'stopIgnoringUser':
-      return state.updateIn(['ignoredUsers'], (i) => i.delete(action.variables.id));
-    }
-    break;
  }
  return state;
 }
@@ -0,0 +1,34 @@
+import intersection from 'lodash/intersection';
+
+const basicRoles = {
+  HAS_STAFF_TAG: ['ADMIN', 'MODERATOR', 'STAFF']
+};
+
+const queryRoles = {
+  UPDATE_CONFIG: ['ADMIN'],
+  ACCESS_ADMIN: ['ADMIN', 'MODERATOR'],
+  VIEW_USER_EMAILS: ['ADMIN']
+};
+
+const mutationRoles = {
+  CHANGE_ROLES: ['ADMIN'],
+  MODERATE_COMMENTS: ['ADMIN', 'MODERATOR']
+};
+
+const roles = {...basicRoles, ...queryRoles, ...mutationRoles};
+
+export const can = (user, ...perms) => {
+
+  if (!user) {
+    return false;
+  }
+
+  return perms.every((perm) => {
+    const role = roles[perm];
+    if (typeof role === 'undefined') {
+      throw new Error(`${perm} is not a valid role`);
+    }
+
+    return intersection(role, user.roles).length > 0;
+  });
+};
@@ -7,6 +7,8 @@
    "successNameUpdate": "Your username has been updated",
    "contentNotAvailable": "This content is not available",
    "bannedAccountMsg": "Your account is currently suspended. This means that you cannot Like, Report, or write comments. Please contact us if you have any questions.",
+
+    "temporarilySuspended": "In accordance with {0}'s community guidlines, your account has been temporarily suspended. Please rejoin the conversation {1}.",
    "editName": {
      "msg": "Your account is currently suspended because your username has been deemed inappropriate. To restore your account, please enter a new username. Please contact us if you have any questions.",
      "label": "New Username",
@@ -64,10 +64,39 @@ export function separateDataAndRoot(
  };
 }

+/**
+ * Taken from: http://stackoverflow.com/questions/1197928/how-to-add-30-minutes-to-a-javascript-date-object.
+ * Adds time to a date. Modelled after MySQL DATE_ADD function.
+ * Example: dateAdd(new Date(), 'minute', 30)  //returns 30 minutes from now.
+ *
+ * @param date  Date to start with
+ * @param interval  One of: year, quarter, month, week, day, hour, minute, second
+ * @param units  Number of units of the given interval to add.
+ */
+export function dateAdd(date, interval, units) {
+  let ret = new Date(date); // don't change original date
+  const checkRollover = () => {
+    if (ret.getDate() !== date.getDate()) {
+      ret.setDate(0);
+    }
+  };
+  switch(interval.toLowerCase()) {
+  case 'year'   :  ret.setFullYear(ret.getFullYear() + units); checkRollover();  break;
+  case 'quarter':  ret.setMonth(ret.getMonth() + 3 * units); checkRollover();  break;
+  case 'month'  :  ret.setMonth(ret.getMonth() + units); checkRollover();  break;
+  case 'week'   :  ret.setDate(ret.getDate() + 7 * units);  break;
+  case 'day'    :  ret.setDate(ret.getDate() + units);  break;
+  case 'hour'   :  ret.setTime(ret.getTime() + units * 3600000);  break;
+  case 'minute' :  ret.setTime(ret.getTime() + units * 60000);  break;
+  case 'second' :  ret.setTime(ret.getTime() + units * 1000);  break;
+  default       :  ret = undefined;  break;
+  }
+  return ret;
+}
+
 export function mergeDocuments(documents) {
  const main = typeof documents[0] === 'string' ? documents[0] : documents[0].loc.source.body;
  const substitutions = documents.slice(1);
  const literals = [main, ...substitutions.map(() => '\n')];
  return gql.apply(null, [literals, ...substitutions]);
 }
-
@@ -104,7 +104,7 @@ class ChangeUsernameContainer extends Component {
    return (
      <div>
        <CreateUsernameDialog
-          open={auth.showCreateUsernameDialog && auth.user.canEditName}
+          open={auth.showCreateUsernameDialog}
          handleClose={this.handleClose}
          loggedIn={loggedIn}
          handleSubmitUsername={this.handleSubmitUsername}
@@ -25,12 +25,6 @@
    letter-spacing: 0.7px;
    font-weight: 400;

-    i {
-      margin-right: 13px;
-      font-size: 18px;
-      vertical-align: middle;
-    }
-
    &:disabled {
      background: #E0E0E0;
      color: #4f5c67;
@@ -38,11 +32,22 @@
    }
 }

+.icon {
+  margin-right: 13px;
+  font-size: 18px;
+  vertical-align: middle;
+}
+
 .type--black {
-    color: #E0E0E0;
+    color: white;
    background: #212121;
 }

+.type--white {
+    color: #212121;
+    background: white;
+}
+
 .type--local {
    background: #E0E0E0;
    color: #212121;
@@ -163,7 +168,7 @@
  cursor: not-allowed;
 }

-.type--ban {
+.type--ban, .type--actions {
  display: block;
  color: #616161;
  border: solid 1px rgba(97, 97, 97, 0.77);
@@ -179,11 +184,16 @@
  font-size: 14px;
  width: auto;

-&:hover {
-   box-shadow: none;
-   color: white;
-   background-color: #616161;
- }
+  &:hover {
+     box-shadow: none;
+     color: white;
+     background-color: #616161;
+  }
+
+  > .icon {
+    margin-right: 5px;
+    font-size: 14px;
+  }
 }

 .full {
@@ -13,7 +13,7 @@ const Button = ({cStyle = 'local', children, className, raised = false, full = f
    `}
    {...props}
  >
-    {icon && <Icon name={icon} />}
+    {icon && <Icon name={icon} className={styles.icon} />}
    {children}
  </button>
 );
@@ -0,0 +1,33 @@
+.drawer {
+  max-width: 700px;
+  min-width: 400px;
+  padding: 20px;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: white;
+  transition: transform 500ms ease-in-out;
+  box-shadow: -3px 0px 4px 0px rgba(0,0,0,0.15);
+  z-index: 10000;
+}
+
+.closeButton {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  left: -40px;
+  background-color: white;
+  border-radius: 4px 0 0 4px;
+  box-sizing: border-box;
+  font-size: 32px;
+  top: 60px;
+  box-shadow: -1px 3px 4px 0px rgba(0,0,0,0.15);
+  text-align: center;
+  padding-top: 10px;
+  cursor: pointer;
+
+  &:hover {
+    color: #ccc;
+  }
+}
@@ -0,0 +1,19 @@
+import React, {PropTypes} from 'react';
+import styles from './Drawer.css';
+import onClickOutside from 'react-onclickoutside';
+
+const Drawer = ({children, handleClickOutside}) => {
+  return (
+    <div className={styles.drawer}>
+      <div className={styles.closeButton} onClick={handleClickOutside}>×</div>
+      {children}
+    </div>
+  );
+};
+
+Drawer.propTypes = {
+  active: PropTypes.bool,
+  handleClickOutside: PropTypes.func.isRequired
+};
+
+export default onClickOutside(Drawer);
@@ -23,3 +23,4 @@ export {default as Select} from './components/Select';
 export {default as Option} from './components/Option';
 export {default as SnackBar} from './components/SnackBar';
 export {default as TextArea} from './components/TextArea';
+export {default as Drawer} from './components/Drawer';