From 9e1b470cb52647cadaaee27623187f4fba9f849c Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Wed, 3 May 2017 09:32:05 -0600
Subject: [PATCH 01/58] saving my place

---
 .../coral-admin/src/components/UserDetail.css |  0
 .../coral-admin/src/components/UserDetail.js  | 39 +++++++++++++++++++
 .../ModerationQueue/ModerationContainer.js    | 16 +++++++-
 .../ModerationQueue/ModerationQueue.js        | 13 ++++++-
 .../ModerationQueue/components/Comment.js     | 11 ++++--
 .../ModerationQueue/components/styles.css     | 11 ++++++
 .../coral-admin/src/graphql/queries/index.js  | 15 +++++++
 .../src/graphql/queries/userDetail.graphql    |  6 +++
 client/coral-ui/components/Drawer.css         | 12 ++++++
 client/coral-ui/components/Drawer.js          | 17 ++++++++
 client/coral-ui/index.js                      |  1 +
 graph/resolvers/root_query.js                 | 10 +++++
 graph/typeDefs.graphql                        |  3 ++
 13 files changed, 148 insertions(+), 6 deletions(-)
 create mode 100644 client/coral-admin/src/components/UserDetail.css
 create mode 100644 client/coral-admin/src/components/UserDetail.js
 create mode 100644 client/coral-admin/src/graphql/queries/userDetail.graphql
 create mode 100644 client/coral-ui/components/Drawer.css
 create mode 100644 client/coral-ui/components/Drawer.js

diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
new file mode 100644
index 000000000..aa6997dc4
--- /dev/null
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -0,0 +1,39 @@
+import React, {PropTypes} from 'react';
+import {Button, Drawer} from 'coral-ui';
+import styles from './UserDetail.js';
+
+const UserDetail = ({user}) => {
+  const localProfile = user.profiles.find(p => p.provider === 'local');
+  const facebookProfile = user.profiles.find(p => p.provider === 'facebook');
+  let profile;
+  if (localProfile) {
+    profile = profile.id;
+  } else if (facebookProfile) {
+    profile = <a href={`https://facebook.com/${facebookProfile.id}`}>{facebookProfile.id}</a>;
+  }
+
+  return (
+    <Drawer>
+      <h3>{user.username}</h3>
+      <p>{profile}</p> <Button>Copy</Button>
+      <strong>Member since</strong> {user.created_at}
+      <hr/>
+      <strong>Account summary</strong>
+      <br/><span className={styles.small}>Data represents the last six months of activity</span>
+      <div className={styles.stats}>
+      </div>
+    </Drawer>
+  );
+};
+
+UserDetail.propTypes = {
+  user: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+    profiles: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.string,
+      provider: PropTypes.string
+    }))
+  })
+};
+
+export default UserDetail;
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index eb59f369e..fac092a77 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -5,7 +5,7 @@ import key from 'keymaster';
 import isEqual from 'lodash/isEqual';
 import styles from './components/styles.css';
 
-import {modQueueQuery} from '../../graphql/queries';
+import {modQueueQuery, getUserDetail} from '../../graphql/queries';
 import {banUser, setCommentStatus} from '../../graphql/mutations';
 
 import {fetchSettings} from 'actions/settings';
@@ -19,6 +19,7 @@ import ModerationMenu from './components/ModerationMenu';
 import ModerationHeader from './components/ModerationHeader';
 import NotFoundAsset from './components/NotFoundAsset';
 import ModerationKeysModal from '../../components/ModerationKeysModal';
+import UserDetail from '../../components/UserDetail';
 
 class ModerationContainer extends Component {
   state = {
@@ -76,6 +77,15 @@ class ModerationContainer extends Component {
     }
   }
 
+  viewUserDetail = (id) => {
+    console.log('getting user detail', id, typeof getUserDetail);
+    try {
+      getUserDetail({id});
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
   selectSort = (sort) => {
     this.setState({sort});
     this.props.modQueueResort(sort);
@@ -180,6 +190,7 @@ class ModerationContainer extends Component {
           assetId={providedAssetId}
           sort={this.state.sort}
           commentCount={activeTabCount}
+          viewUserDetail={this.viewUserDetail}
         />
         <BanUserDialog
           open={moderation.banDialog}
@@ -190,11 +201,12 @@ class ModerationContainer extends Component {
           showRejectedNote={moderation.showRejectedNote}
           rejectComment={props.rejectComment}
         />
-      <ModerationKeysModal
+        <ModerationKeysModal
           hideShortcutsNote={props.hideShortcutsNote}
           shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={onClose}/>
+        {data.user && <UserDetail user={data.user} />}
       </div>
     );
   }
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
index f986b947b..093c2f5dd 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
@@ -9,7 +9,16 @@ import translations from 'coral-admin/src/translations';
 import LoadMore from './components/LoadMore';
 
 const lang = new I18n(translations);
-const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loadMore, activeTab, sort, ...props}) => {
+const ModerationQueue = ({
+  comments,
+  selectedIndex,
+  commentCount,
+  singleView,
+  loadMore,
+  activeTab,
+  sort,
+  viewUserDetail,
+  ...props}) => {
   return (
     <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
       <ul style={{paddingLeft: 0}}>
@@ -26,6 +35,7 @@ const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loa
             bannedWords={props.bannedWords}
             actions={actionsMap[status]}
             showBanUserDialog={props.showBanUserDialog}
+            viewUserDetail={viewUserDetail}
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment}
             currentAsset={props.currentAsset}
@@ -47,6 +57,7 @@ const ModerationQueue = ({comments, selectedIndex, commentCount, singleView, loa
 };
 
 ModerationQueue.propTypes = {
+  viewUserDetail: PropTypes.func.isRequired,
   bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   currentAsset: PropTypes.object,
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
index 0fdf435bd..b35c688cd 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
@@ -18,7 +18,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
 const lang = new I18n(translations);
 
-const Comment = ({actions = [], comment, ...props}) => {
+const Comment = ({actions = [], comment, viewUserDetail, ...props}) => {
   const links = linkify.getMatches(comment.body);
   const linkText = links ? links.map(link => link.raw) : [];
   const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
@@ -35,7 +35,10 @@ const Comment = ({actions = [], comment, ...props}) => {
       <div className={styles.container}>
         <div className={styles.itemHeader}>
           <div className={styles.author}>
-            <span>
+            <span className={styles.username} onClick={() => {
+              console.log('clickt', comment.user.id);
+              viewUserDetail(comment.user.id);
+            }}>
               {comment.user.name}
             </span>
             <span className={styles.created}>
@@ -89,6 +92,7 @@ const Comment = ({actions = [], comment, ...props}) => {
 };
 
 Comment.propTypes = {
+  viewUserDetail: PropTypes.func.isRequired,
   acceptComment: PropTypes.func.isRequired,
   rejectComment: PropTypes.func.isRequired,
   suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -100,8 +104,9 @@ Comment.propTypes = {
     actions: PropTypes.array,
     created_at: PropTypes.string.isRequired,
     user: PropTypes.shape({
+      id: PropTypes.string,
       status: PropTypes.string
-    }),
+    }).isRequired,
     asset: PropTypes.shape({
       title: PropTypes.string,
       id: PropTypes.string
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index a22fbbc64..baa098d91 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -423,3 +423,14 @@ span {
   position: relative;
   top: 7px;
 }
+
+.username {
+  color: blue;
+  text-decoration: underline;
+  padding: 5px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(255, 0, 0, .1);
+  }
+}
diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js
index 9d2357ce7..aa5ffa505 100644
--- a/client/coral-admin/src/graphql/queries/index.js
+++ b/client/coral-admin/src/graphql/queries/index.js
@@ -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';
 
 export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
   options: ({params: {id = null}}) => {
@@ -93,3 +94,17 @@ export const modQueueResort = (id, fetchMore) => (sort) => {
     updateQuery: (oldData, {fetchMoreResult:{data}}) => data
   });
 };
+
+export const getUserDetail = ({id}) => {
+  console.log('close', id);
+  return graphql(USER_DETAIL, {
+    options: () => {
+      console.log('so close!', id);
+      return {
+        variables: {
+          id
+        }
+      };
+    }
+  });
+};
diff --git a/client/coral-admin/src/graphql/queries/userDetail.graphql b/client/coral-admin/src/graphql/queries/userDetail.graphql
new file mode 100644
index 000000000..f489e16d9
--- /dev/null
+++ b/client/coral-admin/src/graphql/queries/userDetail.graphql
@@ -0,0 +1,6 @@
+query UserDetail ($id: ID!) {
+  user(id: $id) {
+    id
+    username
+  }
+}
diff --git a/client/coral-ui/components/Drawer.css b/client/coral-ui/components/Drawer.css
new file mode 100644
index 000000000..57a44075e
--- /dev/null
+++ b/client/coral-ui/components/Drawer.css
@@ -0,0 +1,12 @@
+.wrapper {
+  transition: opacity 250ms;
+  position: fixed;
+  z-index: 10000;
+  background-color: rgba(0, 0, 0, .2);
+  height: 100%;
+  width: 100%;
+}
+
+.drawer {
+  transition: transform 500ms ease-in-out;
+}
diff --git a/client/coral-ui/components/Drawer.js b/client/coral-ui/components/Drawer.js
new file mode 100644
index 000000000..d56677d76
--- /dev/null
+++ b/client/coral-ui/components/Drawer.js
@@ -0,0 +1,17 @@
+import React, {PropTypes} from 'react';
+import styles from './Drawer.css';
+
+const Drawer = (props) => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.drawer}>{props.children}</div>
+      <div className={styles.closeButton} onClick={props.close}>×</div>
+    </div>
+  );
+};
+
+Drawer.propTypes = {
+  active: PropTypes.bool
+};
+
+export default Drawer;
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 148da0383..3e9456727 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -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';
diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js
index 4dcb7ea11..622584310 100644
--- a/graph/resolvers/root_query.js
+++ b/graph/resolvers/root_query.js
@@ -96,6 +96,16 @@ const RootQuery = {
     return await Users.getByQuery({ids: currentUser.ignoresUsers});
   },
 
+  // this returns an arbitrary user
+  user(_, {id}, {user, loaders: {Users}}) {
+    console.log("user id!", id);
+    if (user == null || !user.hasRoles('ADMIN')) {
+      return null;
+    }
+
+    return Users.getByID.load(id);
+  },
+
   // This endpoint is used for loading the user moderation queues (users whose username has been flagged),
   // so hide it in the event that we aren't an admin.
   users(_, {query: {action_type, limit, cursor, sort}}, {user, loaders: {Users, Actions}}) {
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index 81105ff58..4fa7a1531 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -585,6 +585,9 @@ type RootQuery {
   # Users returned based on a query.
   users(query: UsersQuery): [User]
 
+  # a single User by id
+  user(id: ID!): User
+
   # Asset metrics related to user actions are saturated into the assets
   # returned. Parameters `from` and `to` are related to the action created_at field.
   assetMetrics(from: Date!, to: Date!, sort: ASSET_METRICS_SORT!, limit: Int = 10): [Asset!]

From 4a42436b7b4b41921f28bc580a842faa8f250313 Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Wed, 3 May 2017 12:54:02 -0600
Subject: [PATCH 02/58] load user via HOC UserDetail

---
 client/coral-admin/src/actions/moderation.js  |  2 +
 .../coral-admin/src/components/UserDetail.js  | 39 ----------------
 .../coral-admin/src/constants/moderation.js   |  2 +
 .../ModerationQueue/ModerationContainer.js    | 29 ++++++------
 .../containers/ModerationQueue/UserDetail.js  | 46 +++++++++++++++++++
 .../ModerationQueue/components/Comment.js     |  5 +-
 .../coral-admin/src/graphql/queries/index.js  | 20 +++-----
 client/coral-admin/src/reducers/moderation.js |  5 ++
 graph/resolvers/root_query.js                 |  1 -
 graph/resolvers/user.js                       |  9 ++++
 graph/typeDefs.graphql                        | 11 +++++
 11 files changed, 97 insertions(+), 72 deletions(-)
 delete mode 100644 client/coral-admin/src/components/UserDetail.js
 create mode 100644 client/coral-admin/src/containers/ModerationQueue/UserDetail.js

diff --git a/client/coral-admin/src/actions/moderation.js b/client/coral-admin/src/actions/moderation.js
index b7117181e..557954b70 100644
--- a/client/coral-admin/src/actions/moderation.js
+++ b/client/coral-admin/src/actions/moderation.js
@@ -18,3 +18,5 @@ export const hideShortcutsNote = () => {
 
   return {type: actions.HIDE_SHORTCUTS_NOTE};
 };
+
+export const viewUserDetail = userId => ({type: actions.VIEW_USER_DETAIL, userId});
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
deleted file mode 100644
index aa6997dc4..000000000
--- a/client/coral-admin/src/components/UserDetail.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, {PropTypes} from 'react';
-import {Button, Drawer} from 'coral-ui';
-import styles from './UserDetail.js';
-
-const UserDetail = ({user}) => {
-  const localProfile = user.profiles.find(p => p.provider === 'local');
-  const facebookProfile = user.profiles.find(p => p.provider === 'facebook');
-  let profile;
-  if (localProfile) {
-    profile = profile.id;
-  } else if (facebookProfile) {
-    profile = <a href={`https://facebook.com/${facebookProfile.id}`}>{facebookProfile.id}</a>;
-  }
-
-  return (
-    <Drawer>
-      <h3>{user.username}</h3>
-      <p>{profile}</p> <Button>Copy</Button>
-      <strong>Member since</strong> {user.created_at}
-      <hr/>
-      <strong>Account summary</strong>
-      <br/><span className={styles.small}>Data represents the last six months of activity</span>
-      <div className={styles.stats}>
-      </div>
-    </Drawer>
-  );
-};
-
-UserDetail.propTypes = {
-  user: PropTypes.shape({
-    username: PropTypes.string.isRequired,
-    profiles: PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.string,
-      provider: PropTypes.string
-    }))
-  })
-};
-
-export default UserDetail;
diff --git a/client/coral-admin/src/constants/moderation.js b/client/coral-admin/src/constants/moderation.js
index 14672146e..1d09b0e1a 100644
--- a/client/coral-admin/src/constants/moderation.js
+++ b/client/coral-admin/src/constants/moderation.js
@@ -3,3 +3,5 @@ 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 VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
+export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index fac092a77..b76de1d05 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -5,12 +5,19 @@ import key from 'keymaster';
 import isEqual from 'lodash/isEqual';
 import styles from './components/styles.css';
 
-import {modQueueQuery, getUserDetail} from '../../graphql/queries';
+import {modQueueQuery} from '../../graphql/queries';
 import {banUser, setCommentStatus} 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,
+  hideShortcutsNote,
+  viewUserDetail
+} from 'actions/moderation';
 
 import {Spinner} from 'coral-ui';
 import BanUserDialog from '../../components/BanUserDialog';
@@ -19,7 +26,7 @@ import ModerationMenu from './components/ModerationMenu';
 import ModerationHeader from './components/ModerationHeader';
 import NotFoundAsset from './components/NotFoundAsset';
 import ModerationKeysModal from '../../components/ModerationKeysModal';
-import UserDetail from '../../components/UserDetail';
+import UserDetail from './UserDetail';
 
 class ModerationContainer extends Component {
   state = {
@@ -77,15 +84,6 @@ class ModerationContainer extends Component {
     }
   }
 
-  viewUserDetail = (id) => {
-    console.log('getting user detail', id, typeof getUserDetail);
-    try {
-      getUserDetail({id});
-    } catch (e) {
-      console.log(e);
-    }
-  }
-
   selectSort = (sort) => {
     this.setState({sort});
     this.props.modQueueResort(sort);
@@ -120,7 +118,7 @@ class ModerationContainer extends Component {
   }
 
   render () {
-    const {data, moderation, settings, assets, onClose, ...props} = this.props;
+    const {data, moderation, settings, assets, onClose, viewUserDetail, ...props} = this.props;
     const providedAssetId = this.props.params.id;
     const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;
 
@@ -190,7 +188,7 @@ class ModerationContainer extends Component {
           assetId={providedAssetId}
           sort={this.state.sort}
           commentCount={activeTabCount}
-          viewUserDetail={this.viewUserDetail}
+          viewUserDetail={viewUserDetail}
         />
         <BanUserDialog
           open={moderation.banDialog}
@@ -206,7 +204,7 @@ class ModerationContainer extends Component {
           shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={onClose}/>
-        {data.user && <UserDetail user={data.user} />}
+        {moderation.userDetailId && <UserDetail id={moderation.userDetailId} />}
       </div>
     );
   }
@@ -224,6 +222,7 @@ const mapDispatchToProps = dispatch => ({
   singleView: () => dispatch(singleView()),
   updateAssets: assets => dispatch(updateAssets(assets)),
   fetchSettings: () => dispatch(fetchSettings()),
+  viewUserDetail: id => dispatch(viewUserDetail(id)),
   showBanUserDialog: (user, commentId, showRejectedNote) => dispatch(showBanUserDialog(user, commentId, showRejectedNote)),
   hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
   hideShortcutsNote: () => dispatch(hideShortcutsNote()),
diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
new file mode 100644
index 000000000..45d98c56c
--- /dev/null
+++ b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
@@ -0,0 +1,46 @@
+import React, {PropTypes} from 'react';
+import {Button, Drawer} from 'coral-ui';
+import styles from './UserDetail.js';
+import {compose} from 'react-apollo';
+import {getUserDetail} from 'coral-admin/src/graphql/queries';
+
+class UserDetail extends React.Component {
+  static propTypes = {
+    id: PropTypes.string.isRequired
+  }
+
+  render () {
+    const {data} = this.props;
+
+    if (!('user' in data)) {
+      return null;
+    }
+
+    const {user} = data;
+    const localProfile = user.profiles.find(p => p.provider === 'local');
+    const facebookProfile = user.profiles.find(p => p.provider === 'facebook');
+    let profile;
+    if (localProfile) {
+      profile = localProfile.id;
+    } else if (facebookProfile) {
+      profile = <a href={`https://facebook.com/${facebookProfile.id}`}>{facebookProfile.id}</a>;
+    }
+
+    return (
+      <Drawer>
+        <h3>{user.username}</h3>
+        <p>{profile}</p> <Button>Copy</Button>
+        <strong>Member since</strong> {user.created_at}
+        <hr/>
+        <strong>Account summary</strong>
+        <br/><span className={styles.small}>Data represents the last six months of activity</span>
+        <div className={styles.stats}>
+        </div>
+      </Drawer>
+    );
+  }
+}
+
+export default compose(
+  getUserDetail
+)(UserDetail);
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
index b35c688cd..8956e6e03 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
@@ -35,10 +35,7 @@ const Comment = ({actions = [], comment, viewUserDetail, ...props}) => {
       <div className={styles.container}>
         <div className={styles.itemHeader}>
           <div className={styles.author}>
-            <span className={styles.username} onClick={() => {
-              console.log('clickt', comment.user.id);
-              viewUserDetail(comment.user.id);
-            }}>
+            <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
               {comment.user.name}
             </span>
             <span className={styles.created}>
diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js
index aa5ffa505..8ab3c7292 100644
--- a/client/coral-admin/src/graphql/queries/index.js
+++ b/client/coral-admin/src/graphql/queries/index.js
@@ -95,16 +95,10 @@ export const modQueueResort = (id, fetchMore) => (sort) => {
   });
 };
 
-export const getUserDetail = ({id}) => {
-  console.log('close', id);
-  return graphql(USER_DETAIL, {
-    options: () => {
-      console.log('so close!', id);
-      return {
-        variables: {
-          id
-        }
-      };
-    }
-  });
-};
+export const getUserDetail = graphql(USER_DETAIL, {
+  options: ({id}) => {
+    return {
+      variables: {id}
+    };
+  }
+});
diff --git a/client/coral-admin/src/reducers/moderation.js b/client/coral-admin/src/reducers/moderation.js
index a40ac865f..d8b9c59bb 100644
--- a/client/coral-admin/src/reducers/moderation.js
+++ b/client/coral-admin/src/reducers/moderation.js
@@ -6,6 +6,7 @@ const initialState = Map({
   modalOpen: false,
   user: Map({}),
   commentId: null,
+  userDetailId: null,
   banDialog: false,
   shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show'
 });
@@ -35,6 +36,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;
   }
diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js
index 622584310..9dd78c2fc 100644
--- a/graph/resolvers/root_query.js
+++ b/graph/resolvers/root_query.js
@@ -98,7 +98,6 @@ const RootQuery = {
 
   // this returns an arbitrary user
   user(_, {id}, {user, loaders: {Users}}) {
-    console.log("user id!", id);
     if (user == null || !user.hasRoles('ADMIN')) {
       return null;
     }
diff --git a/graph/resolvers/user.js b/graph/resolvers/user.js
index d8ed7ee15..4f6528454 100644
--- a/graph/resolvers/user.js
+++ b/graph/resolvers/user.js
@@ -20,6 +20,15 @@ const User = {
 
     return null;
   },
+  profiles({id, profiles}, _, {user}) {
+
+    // if the user is not an admin, do not return the profiles
+    if (user && (user.hasRoles('ADMIN') || user.id === id)) {
+      return profiles;
+    }
+
+    return null;
+  },
   roles({id, roles}, _, {user}) {
 
     // If the user is not an admin, only return the current user's roles.
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index 4fa7a1531..f1d0acac4 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -20,6 +20,14 @@ enum USER_ROLES {
   MODERATOR
 }
 
+type UserProfile {
+  # the id is an identifier for the user profile (email, facebook id, etc)
+  id: String!
+
+  # name of the provider attached to the authentication mode
+  provider: String!
+}
+
 # Any person who can author comments, create actions, and view comments on a
 # stream.
 type User {
@@ -39,6 +47,9 @@ type User {
   # the current roles of the user.
   roles: [USER_ROLES]
 
+  # the current profiles of the user.
+  profiles: [UserProfile]
+
   # determines whether the user can edit their username
   canEditName: Boolean
 

From 57b0b5ec67b71a2d2cc0d269a0459f98d13020aa Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Thu, 4 May 2017 13:58:43 -0600
Subject: [PATCH 03/58] add a drawer for the user details

---
 client/coral-admin/src/actions/moderation.js  |  1 +
 .../coral-admin/src/components/UserDetail.css |  0
 .../ModerationQueue/ModerationContainer.js    |  9 +++--
 .../containers/ModerationQueue/UserDetail.css | 12 +++++++
 .../containers/ModerationQueue/UserDetail.js  | 30 +++++++++++-----
 .../src/graphql/queries/userDetail.graphql    |  5 +++
 client/coral-ui/components/Drawer.css         | 35 ++++++++++++++-----
 client/coral-ui/components/Drawer.js          | 14 ++++----
 graph/resolvers/user.js                       | 11 ++++--
 graph/typeDefs.graphql                        |  3 ++
 package.json                                  |  6 ++--
 yarn.lock                                     |  2 +-
 12 files changed, 96 insertions(+), 32 deletions(-)
 delete mode 100644 client/coral-admin/src/components/UserDetail.css
 create mode 100644 client/coral-admin/src/containers/ModerationQueue/UserDetail.css

diff --git a/client/coral-admin/src/actions/moderation.js b/client/coral-admin/src/actions/moderation.js
index 557954b70..5107669cf 100644
--- a/client/coral-admin/src/actions/moderation.js
+++ b/client/coral-admin/src/actions/moderation.js
@@ -20,3 +20,4 @@ export const hideShortcutsNote = () => {
 };
 
 export const viewUserDetail = userId => ({type: actions.VIEW_USER_DETAIL, userId});
+export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index 29612b0a3..480666637 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -16,7 +16,8 @@ import {
   showBanUserDialog,
   hideBanUserDialog,
   hideShortcutsNote,
-  viewUserDetail
+  viewUserDetail,
+  hideUserDetail
 } from 'actions/moderation';
 
 import {Spinner} from 'coral-ui';
@@ -118,7 +119,7 @@ class ModerationContainer extends Component {
   }
 
   render () {
-    const {data, moderation, settings, assets, onClose, viewUserDetail, ...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;
 
@@ -189,6 +190,7 @@ class ModerationContainer extends Component {
           sort={this.state.sort}
           commentCount={activeTabCount}
           viewUserDetail={viewUserDetail}
+          hideUserDetail={hideUserDetail}
         />
         <BanUserDialog
           open={moderation.banDialog}
@@ -204,7 +206,7 @@ class ModerationContainer extends Component {
           shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={onClose}/>
-        {moderation.userDetailId && <UserDetail id={moderation.userDetailId} />}
+        {moderation.userDetailId && <UserDetail id={moderation.userDetailId} hideUserDetail={hideUserDetail}/>}
       </div>
     );
   }
@@ -223,6 +225,7 @@ const mapDispatchToProps = dispatch => ({
   updateAssets: assets => dispatch(updateAssets(assets)),
   fetchSettings: () => dispatch(fetchSettings()),
   viewUserDetail: id => dispatch(viewUserDetail(id)),
+  hideUserDetail: () => dispatch(hideUserDetail()),
   showBanUserDialog: (user, commentId, showRejectedNote) => dispatch(showBanUserDialog(user, commentId, showRejectedNote)),
   hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
   hideShortcutsNote: () => dispatch(hideShortcutsNote()),
diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.css b/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
new file mode 100644
index 000000000..9f41a9d8d
--- /dev/null
+++ b/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
@@ -0,0 +1,12 @@
+.copyButton {
+  float: right;
+  top: -10px;
+}
+
+.memberSince {
+  clear: both;
+}
+
+.small {
+  color: #aaa;
+}
diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
index 45d98c56c..06587065e 100644
--- a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
+++ b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
@@ -1,16 +1,27 @@
 import React, {PropTypes} from 'react';
 import {Button, Drawer} from 'coral-ui';
-import styles from './UserDetail.js';
+import styles from './UserDetail.css';
 import {compose} from 'react-apollo';
 import {getUserDetail} from 'coral-admin/src/graphql/queries';
 
 class UserDetail extends React.Component {
   static propTypes = {
-    id: PropTypes.string.isRequired
+    id: PropTypes.string.isRequired,
+    hideUserDetail: PropTypes.func.isRequired
+  }
+
+  copyPermalink () {
+    this.profile.select();
+    try {
+      document.execCommand('copy');
+    } catch (e) {
+
+      /* nothing */
+    }
   }
 
   render () {
-    const {data} = this.props;
+    const {data, hideUserDetail} = this.props;
 
     if (!('user' in data)) {
       return null;
@@ -27,13 +38,16 @@ class UserDetail extends React.Component {
     }
 
     return (
-      <Drawer>
+      <Drawer handleClickOutside={hideUserDetail}>
         <h3>{user.username}</h3>
-        <p>{profile}</p> <Button>Copy</Button>
-        <strong>Member since</strong> {user.created_at}
+        <Button className={styles.copyButton}>Copy</Button>
+        <p ref={ref => this.profile = ref} contentEditable="true">{profile}</p>
+        <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
         <hr/>
-        <strong>Account summary</strong>
-        <br/><span className={styles.small}>Data represents the last six months of activity</span>
+        <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>
       </Drawer>
diff --git a/client/coral-admin/src/graphql/queries/userDetail.graphql b/client/coral-admin/src/graphql/queries/userDetail.graphql
index f489e16d9..6d42682ea 100644
--- a/client/coral-admin/src/graphql/queries/userDetail.graphql
+++ b/client/coral-admin/src/graphql/queries/userDetail.graphql
@@ -2,5 +2,10 @@ query UserDetail ($id: ID!) {
   user(id: $id) {
     id
     username
+    created_at
+    profiles {
+      id
+      provider
+    }
   }
 }
diff --git a/client/coral-ui/components/Drawer.css b/client/coral-ui/components/Drawer.css
index 57a44075e..b967b20ab 100644
--- a/client/coral-ui/components/Drawer.css
+++ b/client/coral-ui/components/Drawer.css
@@ -1,12 +1,31 @@
-.wrapper {
-  transition: opacity 250ms;
+.drawer {
+  max-width: 700px;
+  padding: 20px;
   position: fixed;
-  z-index: 10000;
-  background-color: rgba(0, 0, 0, .2);
-  height: 100%;
-  width: 100%;
+  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);
 }
 
-.drawer {
-  transition: transform 500ms ease-in-out;
+.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;
+  }
 }
diff --git a/client/coral-ui/components/Drawer.js b/client/coral-ui/components/Drawer.js
index d56677d76..d896203a8 100644
--- a/client/coral-ui/components/Drawer.js
+++ b/client/coral-ui/components/Drawer.js
@@ -1,17 +1,19 @@
 import React, {PropTypes} from 'react';
 import styles from './Drawer.css';
+import onClickOutside from 'react-onclickoutside';
 
-const Drawer = (props) => {
+const Drawer = ({children, handleClickOutside}) => {
   return (
-    <div className={styles.wrapper}>
-      <div className={styles.drawer}>{props.children}</div>
-      <div className={styles.closeButton} onClick={props.close}>×</div>
+    <div className={styles.drawer}>
+      <div className={styles.closeButton} onClick={handleClickOutside}>×</div>
+      {children}
     </div>
   );
 };
 
 Drawer.propTypes = {
-  active: PropTypes.bool
+  active: PropTypes.bool,
+  handleClickOutside: PropTypes.func.isRequired
 };
 
-export default Drawer;
+export default onClickOutside(Drawer);
diff --git a/graph/resolvers/user.js b/graph/resolvers/user.js
index 4f6528454..4dbdc43c4 100644
--- a/graph/resolvers/user.js
+++ b/graph/resolvers/user.js
@@ -10,6 +10,13 @@ const User = {
     }
 
   },
+  created_at({roles, created_at}, _, {user}) {
+    if (user && user.hasRoles('ADMIN')) {
+      return created_at;
+    }
+
+    return null;
+  },
   comments({id}, _, {loaders: {Comments}, user}) {
 
     // If the user is not an admin, only return comment list for the owner of
@@ -20,10 +27,10 @@ const User = {
 
     return null;
   },
-  profiles({id, profiles}, _, {user}) {
+  profiles({profiles}, _, {user}) {
 
     // if the user is not an admin, do not return the profiles
-    if (user && (user.hasRoles('ADMIN') || user.id === id)) {
+    if (user && user.hasRoles('ADMIN')) {
       return profiles;
     }
 
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index a505f558e..7a5f0b76f 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -38,6 +38,9 @@ type User {
   # Username of a user.
   username: String!
 
+  # creation date of user
+  created_at: String!
+
   # Action summaries against the user.
   action_summaries: [ActionSummary]!
 
diff --git a/package.json b/package.json
index bfca21643..d61431b3a 100644
--- a/package.json
+++ b/package.json
@@ -98,12 +98,10 @@
     "react-recaptcha": "^2.2.6",
     "recompose": "^0.23.1",
     "redis": "^2.7.1",
-    "uuid": "^3.0.1",
-    "simplemde": "^1.11.2",
-    "subscriptions-transport-ws": "^0.5.5-alpha.0",
     "resolve": "^1.3.2",
     "semver": "^5.3.0",
     "simplemde": "^1.11.2",
+    "subscriptions-transport-ws": "^0.5.5-alpha.0",
     "uuid": "^3.0.1"
   },
   "devDependencies": {
@@ -174,7 +172,7 @@
     "react-linkify": "^0.1.3",
     "react-mdl": "^1.7.2",
     "react-mdl-selectfield": "^0.2.0",
-    "react-onclickoutside": "^5.7.1",
+    "react-onclickoutside": "^5.11.1",
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",
     "react-tagsinput": "^3.14.0",
diff --git a/yarn.lock b/yarn.lock
index 99703bdf3..7a5163706 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6780,7 +6780,7 @@ react-mdl@^1.7.1, react-mdl@^1.7.2:
     lodash.isequal "^4.4.0"
     prop-types "^15.5.0"
 
-react-onclickoutside@^5.7.1:
+react-onclickoutside@^5.11.1:
   version "5.11.1"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-5.11.1.tgz#00314e52567cf55faba94cabbacd119619070623"
   dependencies:

From 084f6b28ed0120fab1abed1a5c3092857b5bfe09 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Tue, 9 May 2017 10:06:41 -0600
Subject: [PATCH 04/58] merge master

---
 README.md                                     |  38 +++-
 client/coral-admin/src/AppRouter.js           |   4 +-
 .../ModerationQueue/components/Comment.js     |  14 +-
 .../components/ModerationMenu.js              |  12 +-
 .../ModerationQueue/components/styles.css     |  21 ++
 .../src/graphql/fragments/commentView.graphql |   1 +
 client/coral-admin/src/translations.json      |   2 +
 .../components/ConfigureCommentStream.css     |   6 +-
 .../components/ConfigureCommentStream.js      |   2 +-
 docs/frontend/PLUGINS-experimental.md         | 102 ++++++++++
 docs/frontend/PLUGINS.md                      | 186 ++++++++++++++++++
 graph/pubsub.js                               |   2 +-
 12 files changed, 371 insertions(+), 19 deletions(-)
 create mode 100644 docs/frontend/PLUGINS-experimental.md
 create mode 100644 docs/frontend/PLUGINS.md

diff --git a/README.md b/README.md
index ef621b59c..74097d48c 100644
--- a/README.md
+++ b/README.md
@@ -42,9 +42,43 @@ available in the format: `<scheme>://<host>` without the path.
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.
 
-### License
+## Supported Browsers
 
-    Copyright 2016 Mozilla Foundation
+### Web
+
+- Chrome: latest 2 versions
+- Firefox: latest 2 versions, and most recent extended support version, if any
+- Safari: latest 2 versions
+- Internet Explorer: IE Edge, 11
+
+### iOS Devices
+
+- iPad
+- iPad Pro
+- iPhone 6 Plus
+- iPhone 6
+- iPhone 5
+
+### iOS Browsers
+
+- Chrome for iOS: latest version
+- Firefox for iOS: latest version
+- Safari for iOS: latest version
+
+### Android Devices
+
+- Galaxy S5
+- Nexus 5X
+- Nexus 6P
+
+### Android Browsers
+
+- Chrome for Android: latest version
+- Firefox for Android: latest version
+
+## License
+
+    Copyright 2017 Mozilla Foundation
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index af3423acc..989316dd9 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/client/coral-admin/src/AppRouter.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Router, Route, IndexRoute, IndexRedirect, browserHistory} from 'react-router';
+import {Router, Route, IndexRedirect, browserHistory} from 'react-router';
 
 import Stories from 'containers/Stories/Stories';
 import Configure from 'containers/Configure/Configure';
@@ -18,7 +18,7 @@ const routes = (
   <div>
     <Route exact path="/admin/install" component={InstallContainer}/>
     <Route path='/admin' component={LayoutContainer}>
-      <IndexRoute component={Dashboard} />
+      <IndexRedirect to='/admin/moderate/all' />
       <Route path='community' component={CommunityContainer} />
       <Route path='configure' component={Configure} />
       <Route path='stories' component={Stories} />
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
index 8294e8c43..155d0c551 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
@@ -18,7 +18,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
 const lang = new I18n(translations);
 
-const Comment = ({actions = [], comment, viewUserDetail, ...props}) => {
+const Comment = ({actions = [], comment, viewUserDetail, suspectWords, bannedWords, ...props}) => {
   const links = linkify.getMatches(comment.body);
   const linkText = links ? links.map(link => link.raw) : [];
   const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
@@ -30,6 +30,13 @@ const Comment = ({actions = [], comment, viewUserDetail, ...props}) => {
     commentType = 'flagged';
   }
 
+  // since words are checked against word boundaries on the backend,
+  // this should be the behavior on the front end as well.
+  // currently the highlighter plugin does not support this out of the box.
+  const searchWords = [...suspectWords, ...bannedWords].filter(w => {
+    return new RegExp(`(^|\\s)${w}(\\s|$)`).test(comment.body);
+  }).concat(linkText);
+
   return (
     <li tabIndex={props.index} className={`mdl-card ${props.selected ?  'mdl-shadow--16dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
       <div className={styles.container}>
@@ -60,8 +67,8 @@ const Comment = ({actions = [], comment, viewUserDetail, ...props}) => {
         <div className={styles.itemBody}>
           <p className={styles.body}>
             <Highlighter
-              searchWords={[...props.suspectWords, ...props.bannedWords, ...linkText]}
-              textToHighlight={comment.body} />
+              searchWords={searchWords}
+              textToHighlight={comment.body} /> <a className={styles.external} href={`${comment.asset.url}#${comment.id}`} target="_blank"><Icon name='open_in_new' /> {lang.t('comment.view_context')}</a>
           </p>
           <div className={styles.sideActions}>
             {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
@@ -108,6 +115,7 @@ Comment.propTypes = {
     }).isRequired,
     asset: PropTypes.shape({
       title: PropTypes.string,
+      url: PropTypes.string,
       id: PropTypes.string
     })
   })
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
index 39594274e..7a50e6270 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
@@ -28,12 +28,6 @@ const ModerationMenu = (
             activeClassName={styles.active}>
             <Icon name='question_answer' className={styles.tabIcon} /> {lang.t('modqueue.all')} <CommentCount count={allCount} />
           </Link>
-          <Link
-            to={getPath('accepted')}
-            className={`mdl-tabs__tab ${styles.tab}`}
-            activeClassName={styles.active}>
-            <Icon name='check' className={styles.tabIcon} /> {lang.t('modqueue.approved')} <CommentCount count={acceptedCount} />
-          </Link>
           <Link
             to={getPath('premod')}
             className={`mdl-tabs__tab ${styles.tab}`}
@@ -46,6 +40,12 @@ const ModerationMenu = (
             activeClassName={styles.active}>
             <Icon name='flag' className={styles.tabIcon} /> {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
           </Link>
+          <Link
+            to={getPath('accepted')}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            <Icon name='check' className={styles.tabIcon} /> {lang.t('modqueue.approved')} <CommentCount count={acceptedCount} />
+          </Link>
           <Link
             to={getPath('rejected')}
             className={`mdl-tabs__tab ${styles.tab}`}
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index baa098d91..52800fe43 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -434,3 +434,24 @@ span {
     background-color: rgba(255, 0, 0, .1);
   }
 }
+
+.external {
+  font-size: .7em;
+  text-decoration: none;
+  color: #063b9a;
+  cursor: pointer;
+  font-weight: normal;
+  margin-left: 10px;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: underline;
+    opacity: .9;
+  }
+
+  i {
+    font-size: 12px;
+    top: 2px;
+    position: relative;
+  }
+}
diff --git a/client/coral-admin/src/graphql/fragments/commentView.graphql b/client/coral-admin/src/graphql/fragments/commentView.graphql
index 51b0a3f44..1f3b8b1d3 100644
--- a/client/coral-admin/src/graphql/fragments/commentView.graphql
+++ b/client/coral-admin/src/graphql/fragments/commentView.graphql
@@ -11,6 +11,7 @@ fragment commentView on Comment {
     asset {
       id
       title
+      url
     }
     action_summaries {
       count
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 3f9392656..68a3b93d5 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -72,6 +72,7 @@
       "flagged": "flagged",
       "anon": "Anonymous",
       "ban_user": "Ban User",
+      "view_context": "View context",
       "banned_user": "Banned User"
     },
     "user": {
@@ -259,6 +260,7 @@
     "comment": {
       "flagged": "marcado",
       "anon": "Anónimo",
+      "view_context": "Ver contexto",
       "ban_user": "Suspender Usuario",
       "banned_user": "Usuario Suspendido"
     },
diff --git a/client/coral-configure/components/ConfigureCommentStream.css b/client/coral-configure/components/ConfigureCommentStream.css
index 335c94377..a8cbc36cb 100644
--- a/client/coral-configure/components/ConfigureCommentStream.css
+++ b/client/coral-configure/components/ConfigureCommentStream.css
@@ -3,10 +3,8 @@
 }
 
 .apply {
-  position: absolute;
-  top: 38%;
-  transform: translateX(-50%);
-  right: 0;
+  float: right;
+  margin: 0 10px;
 }
 
 .wrapper ul {
diff --git a/client/coral-configure/components/ConfigureCommentStream.js b/client/coral-configure/components/ConfigureCommentStream.js
index bef53e1ef..6c00b5996 100644
--- a/client/coral-configure/components/ConfigureCommentStream.js
+++ b/client/coral-configure/components/ConfigureCommentStream.js
@@ -12,7 +12,6 @@ export default ({handleChange, handleApply, changed, ...props}) => (
     <div className={styles.wrapper}>
       <div className={styles.container}>
         <h3>{lang.t('configureCommentStream.title')}</h3>
-        <p>{lang.t('configureCommentStream.description')}</p>
         <Button
           type="submit"
           className={styles.apply}
@@ -20,6 +19,7 @@ export default ({handleChange, handleApply, changed, ...props}) => (
           cStyle={changed ? 'green' : 'darkGrey'} >
           {lang.t('configureCommentStream.apply')}
         </Button>
+        <p>{lang.t('configureCommentStream.description')}</p>
       </div>
       <ul>
         <li>
diff --git a/docs/frontend/PLUGINS-experimental.md b/docs/frontend/PLUGINS-experimental.md
new file mode 100644
index 000000000..895be5900
--- /dev/null
+++ b/docs/frontend/PLUGINS-experimental.md
@@ -0,0 +1,102 @@
+# Experimental plugins
+
+Talk plugins are, in essence, small programs that hook into the core application in a variety of ways. Ultimately, this code can do anything that javascript is capable of. In addition, plugins can import any core code to hook into talk at any level.
+
+If you want to write plugins that integrate with core code beyond the api described in [PLUGINS.md](PLUGINS.md), please keep the following things in mind:
+
+* core code may change and break your plugin
+* you may introduce inefficiencies with your plugin that could hurt performance/crash Talk
+* you may cause bugs in other areas of Talk
+
+If you'd like to build a supported plugin but don't have the hooks you need, please file an issue on this repo and we can discuss deepening the supported plugin api!
+
+With that said, here's some of the prime experimental integration points:
+
+## Reducers and Actions : Redux
+
+Talk is powered by Redux and our plugins can too! Our plugins can have their own reducers and actions.
+
+```js
+import MyButton from './MyButton';
+import reducer from './reducer';
+
+export default {
+  slots: {
+    commentDetail: [MyButton],
+  },
+	reducer
+};
+```
+
+## Import Actions from Talk
+We can easily trigger `Talk` actions in our plugin Components.
+
+```js
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {addTag, removeTag} from 'coral-plugin-commentbox/actions';
+
+class MyButton extends Component {
+  render() {
+    return <button onClick={this.props.addTag('MY_TAG')}>My Button</button>;
+  }
+}
+
+const mapStateToProps = ({commentBox}) => ({commentBox});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({addTag, removeTag}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);
+```
+
+## ESlint and Babel
+In talk we use `eslint:recommended` and Babel with the latest ECMAScript Features. But you can use your own!
+While building your plugin you need to specify a `.eslintrc.json` file and a`.babelrc` file.
+
+#### `.eslintrc.json`
+```json
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
+````
+
+
+#### `. babelrc `
+```json
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
+````
diff --git a/docs/frontend/PLUGINS.md b/docs/frontend/PLUGINS.md
new file mode 100644
index 000000000..fa582877c
--- /dev/null
+++ b/docs/frontend/PLUGINS.md
@@ -0,0 +1,186 @@
+# Plugins
+We can build plugins to extend the functionality of Talk.  
+
+This guide is a walkthrough of our plugin architecture and components that we provide that allow you to build on top of Core coral components without having to understand the concepts there in. It is organized into three sections:
+
+* Plugin architecture
+* Using our building block components
+* Styling
+
+Advanced users will quickly realize that our plugins have complete access to core code. If you would like to write advanced plugins that reach outside of our published API as described in this document, please see [our notes on experimental pluginss](PLUGINS-experimental.md).
+
+Under the hood our plugins are powered by *React*, *Redux* and *GraphQL*. We can also build them with simple vanilla javascript.
+
+## Plugin Architecture
+
+The plugins live in the `/plugins` folder. Each plugin must have an `index.js` file and two folders `client` and `server`.
+
+### The Client Folder
+The frontend of our plugin lives inside the `client` folder. The `client`  folder must have an `index.js` file that exports the configuration of our plugin.
+
+```
+my-plugin/
+  ├── client/
+  │   └── index.js <-- index for client side functionality
+  ├── server/
+  └── index.js <-- base plugin index
+```
+
+For now our base plugin `index.js` file should look like this:
+
+```js
+export default {
+	// We will add more here later.
+};
+```
+
+###  Creating a Component
+
+We can add our components (or any other javascript code) within the `client` folder.
+
+```
+my-plugin/
+  ├── client/
+  │   ├── MyComponent.js
+  │   └── index.js
+  ├── server/
+  └── index.js
+```
+
+Our component could look like this:
+
+```js
+import React, {Component} from 'react';
+
+class MyButton extends Component {
+  render() {
+    return <button>My Button</button>;
+  }
+}
+
+export default MyButton;
+```
+
+Here we create a component that renders a `button`. Now that we created our component we need to specify where it should get injected within Talk!
+
+To tell Talk where that Component should get injected we need to specify which *Slots* to insert it into.
+
+```js
+import React from 'react';
+export default = () => <button>My Button</button>;
+```
+
+### Slots
+In Talk we have defined specific *Slots* where we can inject components.
+
+Here is how we specify our slots config in `my-plugin/index.js`
+
+```js
+import MyButton from './MyButton';
+
+export default {
+  slots: {
+    commentDetail: [MyButton]
+  }
+};
+```
+
+Here I’m specifying that the MyComponent Component will take place within the `commentDetail` in Talk.
+
+`commentDetail` it’s a specific slot in the CommentStream. It means that it will be embedded inside de comment detail.
+
+Slots properties take an`Array` so we can add as many components as we want.
+
+## Building Blocks (TBD)
+
+`Note: the concepts in this section are still to be implemented. Code samples are for discussion and may change.`
+
+In order to allow you to build more complex plugins, we have wrapped some of our functionality in higher order componenets that expose a simple api.
+
+### Reactions
+
+Reactions provide users the ability to 'like', 'respect', etc... comments.
+
+```
+<Reaction name="love">
+	<img class="coralsrc="" />
+</Reaction>
+```
+
+Note: some server side work will need to accompany this client side component. See the like and respect plugins as examples.
+
+### Comment Stream
+
+Comment streams may be created with filtering and ordering in place:
+
+* filter by user
+* filter by tag
+* sort by date ascending / descrnding
+
+```
+<CommentStream userFilter="[userId]" tagFilter="[tag]" sort="[ascending|descending]"></CommentStream>
+```
+
+### Comment Commit hooks
+
+// docs for the pre/post comment submit commit hooks
+
+### Mod Queues
+
+Moderation queues can be added via configuration objects passed in through plugins.
+
+Basic mod queues will resemble the current moderation queues but can be generated from different lists of comments.
+
+* filter by user tag
+* filter by comment tag
+* filter by comment status
+* Custom queries (paired with back end plugins that provide queries to get the data)
+
+#### Advanced mod queues
+
+Advanced mod queues can be created giving plugin authors the power to create the cards that appear in the queue, create actions and custom buttons, etc...
+
+### Custom Configuration
+
+Plugins may rely on configuration options that admins/moderators can set in the Configuration section.
+
+Basic settings can be added via json configuration in a plugin.
+
+* Setting headline
+* Setting description
+* Setting input type
+* Default value
+* Variable name
+
+#### Advanced Custom Configuration (low prioritiy)
+
+Users can inject configuration interfaces that they create into the configuration allowing for more advanced configuration.
+
+
+## Styling Plugins
+Talk uses CSS Modules. This basically means that you can also add your CSS Module to your plugin without colliding with the rest of Talk!
+
+##### My Component
+```js
+import styles from './style.css';
+
+class MyCoralButton extends Component {
+  render() {
+    return <button className={styles.button}>My Button</button>;
+  }
+}
+````
+
+Our `style.css` should could look like this.
+```css
+
+.button {
+	background: coral;
+	border-radius: 3px;
+}
+```
+
+
+### The server folder and the index file
+Read more about the `/server` and how to extend Talk here.
+[talk/PLUGINS.md at master · coralproject/talk · GitHub](https://github.com/coralproject/talk/blob/master/PLUGINS.md)
diff --git a/graph/pubsub.js b/graph/pubsub.js
index a5ee95b80..704f83725 100644
--- a/graph/pubsub.js
+++ b/graph/pubsub.js
@@ -2,4 +2,4 @@ const {RedisPubSub} = require('graphql-redis-subscriptions');
 
 const {connectionOptions} = require('../services/redis');
 
-module.exports = new RedisPubSub(connectionOptions);
+module.exports = new RedisPubSub({connection: connectionOptions});

From fe279587b59df8a63856b1ec3b357e16a16ad7e5 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 10 May 2017 09:25:39 -0600
Subject: [PATCH 05/58] add staff to dropdown

---
 client/coral-admin/src/containers/Community/Table.js | 1 +
 models/user.js                                       | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/Community/Table.js b/client/coral-admin/src/containers/Community/Table.js
index aacc9c82f..2924e7fd3 100644
--- a/client/coral-admin/src/containers/Community/Table.js
+++ b/client/coral-admin/src/containers/Community/Table.js
@@ -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>
diff --git a/models/user.js b/models/user.js
index 458ac68f0..ec215b3fa 100644
--- a/models/user.js
+++ b/models/user.js
@@ -5,7 +5,8 @@ const uuid = require('uuid');
 // USER_ROLES is the array of roles that is permissible as a user role.
 const USER_ROLES = [
   'ADMIN',
-  'MODERATOR'
+  'MODERATOR',
+  'STAFF'
 ];
 
 // USER_STATUS is the list of statuses that are permitted for the user status.

From 40ff265ab1b4bbc4781358dc1eb7d08b7b45523b Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 10 May 2017 11:07:48 -0600
Subject: [PATCH 06/58] merge master

---
 client/coral-admin/src/actions/moderation.js       |  2 +-
 client/coral-admin/src/components/BanUserDialog.js |  8 ++++----
 .../coral-admin/src/components/ModerationList.css  |  2 ++
 .../src/containers/Dashboard/Dashboard.js          |  8 +-------
 .../ModerationQueue/ModerationContainer.js         | 10 ++++++----
 .../ModerationQueue/components/Comment.js          |  6 +++---
 client/coral-admin/src/reducers/moderation.js      |  5 ++++-
 docs/frontend/PLUGINS.md                           | 14 ++------------
 8 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/client/coral-admin/src/actions/moderation.js b/client/coral-admin/src/actions/moderation.js
index 5107669cf..a65b8c704 100644
--- a/client/coral-admin/src/actions/moderation.js
+++ b/client/coral-admin/src/actions/moderation.js
@@ -4,7 +4,7 @@ export const toggleModal = open => ({type: actions.TOGGLE_MODAL, open});
 export const singleView = () => ({type: actions.SINGLE_VIEW});
 
 // Ban User Dialog
-export const showBanUserDialog = (user, commentId, showRejectedNote) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId, showRejectedNote});
+export const showBanUserDialog = (user, commentId, commentStatus, showRejectedNote) => ({type: actions.SHOW_BANUSER_DIALOG, user, commentId, commentStatus, showRejectedNote});
 export const hideBanUserDialog = (showDialog) => ({type: actions.HIDE_BANUSER_DIALOG, showDialog});
 
 // hide shortcuts note
diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js
index ee5830249..b259012f3 100644
--- a/client/coral-admin/src/components/BanUserDialog.js
+++ b/client/coral-admin/src/components/BanUserDialog.js
@@ -8,14 +8,14 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-const onBanClick = (userId, commentId, handleBanUser, rejectComment, handleClose) => (e) => {
+const onBanClick = (userId, commentId, commentStatus, handleBanUser, rejectComment, handleClose) => (e) => {
   e.preventDefault();
   handleBanUser({userId})
   .then(handleClose)
-  .then(() => rejectComment({commentId}));
+  .then(() => commentStatus === 'REJECTED' ? null : rejectComment({commentId}));
 };
 
-const BanUserDialog = ({open, handleClose, handleBanUser, rejectComment, user, commentId, showRejectedNote}) => (
+const BanUserDialog = ({open, handleClose, handleBanUser, rejectComment, user, commentId, commentStatus, showRejectedNote}) => (
   <Dialog
     className={styles.dialog}
     id="banuserDialog"
@@ -36,7 +36,7 @@ const BanUserDialog = ({open, handleClose, handleBanUser, rejectComment, user, c
         <Button cStyle="cancel" className={styles.cancel} onClick={handleClose} raised>
           {lang.t('bandialog.cancel')}
         </Button>
-        <Button cStyle="black" className={styles.ban} onClick={onBanClick(user.id, commentId, handleBanUser, rejectComment, handleClose)} raised>
+        <Button cStyle="black" className={styles.ban} onClick={onBanClick(user.id, commentId, commentStatus, handleBanUser, rejectComment, handleClose)} raised>
           {lang.t('bandialog.yes_ban_user')}
         </Button>
       </div>
diff --git a/client/coral-admin/src/components/ModerationList.css b/client/coral-admin/src/components/ModerationList.css
index 1e871f97c..4d4f37c9a 100644
--- a/client/coral-admin/src/components/ModerationList.css
+++ b/client/coral-admin/src/components/ModerationList.css
@@ -193,10 +193,12 @@
   box-shadow: none;
   color: white;
   background-color: #519954;
+  cursor: not-allowed;
 }
 
 .reject__active, .rejected__active {
   color: white;
   background-color: #D03235;
   box-shadow: none;
+  cursor: not-allowed;
 }
diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js
index f5d0aa39b..e6cfa27cd 100644
--- a/client/coral-admin/src/containers/Dashboard/Dashboard.js
+++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js
@@ -6,7 +6,6 @@ import {getMetrics} from 'coral-admin/src/graphql/queries';
 import FlagWidget from './FlagWidget';
 import ActivityWidget from './ActivityWidget';
 import CountdownTimer from 'coral-admin/src/components/CountdownTimer';
-import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation';
 
 import {Spinner} from 'coral-ui';
 
@@ -43,12 +42,7 @@ const mapStateToProps = state => {
   };
 };
 
-const mapDispatchToProps = dispatch => ({
-  showBanUserDialog: (user, commentId) => dispatch(showBanUserDialog(user, commentId)),
-  hideBanUserDialog: () => dispatch(hideBanUserDialog(false))
-});
-
 export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(mapStateToProps),
   getMetrics
 )(Dashboard);
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index 480666637..121871de7 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -52,12 +52,13 @@ class ModerationContainer extends Component {
     const {acceptComment, rejectComment} = this.props;
     const {selectedIndex} = this.state;
     const comments = this.getComments();
-    const commentId = {commentId: comments[selectedIndex].id};
+    const comment = comments[selectedIndex];
+    const commentId = {commentId: comment.id};
 
     if (accept) {
-      acceptComment(commentId);
+      comment.status !== 'ACCEPTED' && acceptComment(commentId);
     } else {
-      rejectComment(commentId);
+      comment.status !== 'REJECTED' && rejectComment(commentId);
     }
   }
 
@@ -196,6 +197,7 @@ class ModerationContainer extends Component {
           open={moderation.banDialog}
           user={moderation.user}
           commentId={moderation.commentId}
+          commentStatus={moderation.commentStatus}
           handleClose={props.hideBanUserDialog}
           handleBanUser={props.banUser}
           showRejectedNote={moderation.showRejectedNote}
@@ -226,7 +228,7 @@ const mapDispatchToProps = dispatch => ({
   fetchSettings: () => dispatch(fetchSettings()),
   viewUserDetail: id => dispatch(viewUserDetail(id)),
   hideUserDetail: () => dispatch(hideUserDetail()),
-  showBanUserDialog: (user, commentId, showRejectedNote) => dispatch(showBanUserDialog(user, commentId, showRejectedNote)),
+  showBanUserDialog: (user, commentId, commentStatus, showRejectedNote) => dispatch(showBanUserDialog(user, commentId, commentStatus, showRejectedNote)),
   hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
   hideShortcutsNote: () => dispatch(hideShortcutsNote()),
 });
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
index 155d0c551..b38e0c4f0 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
@@ -48,7 +48,7 @@ const Comment = ({actions = [], comment, viewUserDetail, suspectWords, bannedWor
             <span className={styles.created}>
               {timeago().format(comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
             </span>
-            <BanUserButton user={comment.user} onClick={() => props.showBanUserDialog(comment.user, comment.id, comment.status !== 'REJECTED')} />
+            <BanUserButton user={comment.user} onClick={() => props.showBanUserDialog(comment.user, comment.id, comment.status, comment.status !== 'REJECTED')} />
             <CommentType type={commentType} />
           </div>
           {comment.user.status === 'banned' ?
@@ -81,8 +81,8 @@ const Comment = ({actions = [], comment, viewUserDetail, suspectWords, bannedWor
                   user={comment.user}
                   status={comment.status}
                   active={active}
-                  acceptComment={() => props.acceptComment({commentId: comment.id})}
-                  rejectComment={() => props.rejectComment({commentId: comment.id})} />;
+                  acceptComment={() => comment.status === 'ACCEPTED' ? null : props.acceptComment({commentId: comment.id})}
+                  rejectComment={() => comment.status === 'REJECTED' ? null : props.rejectComment({commentId: comment.id})} />;
               })}
             </div>
           </div>
diff --git a/client/coral-admin/src/reducers/moderation.js b/client/coral-admin/src/reducers/moderation.js
index d8b9c59bb..b0ff99617 100644
--- a/client/coral-admin/src/reducers/moderation.js
+++ b/client/coral-admin/src/reducers/moderation.js
@@ -6,6 +6,7 @@ const initialState = Map({
   modalOpen: false,
   user: Map({}),
   commentId: null,
+  commentStatus: null,
   userDetailId: null,
   banDialog: false,
   shortcutsNoteVisible: window.localStorage.getItem('coral:shortcutsNote') || 'show'
@@ -15,12 +16,14 @@ export default function moderation (state = initialState, action) {
   switch (action.type) {
   case actions.HIDE_BANUSER_DIALOG:
     return state
-      .set('banDialog', false);
+      .set('banDialog', false)
+      .set('commentStatus', null);
   case actions.SHOW_BANUSER_DIALOG:
     return state
       .merge({
         user: Map(action.user),
         commentId: action.commentId,
+        commentStatus: action.commentStatus,
         showRejectedNote: action.showRejectedNote,
         banDialog: true
       });
diff --git a/docs/frontend/PLUGINS.md b/docs/frontend/PLUGINS.md
index fa582877c..8377d0359 100644
--- a/docs/frontend/PLUGINS.md
+++ b/docs/frontend/PLUGINS.md
@@ -95,18 +95,12 @@ Slots properties take an`Array` so we can add as many components as we want.
 
 `Note: the concepts in this section are still to be implemented. Code samples are for discussion and may change.`
 
-In order to allow you to build more complex plugins, we have wrapped some of our functionality in higher order componenets that expose a simple api.
+In order to allow you to build more complex plugins, we have wrapped some of our functionality in higher order components that expose a simple api.
 
 ### Reactions
 
 Reactions provide users the ability to 'like', 'respect', etc... comments.
 
-```
-<Reaction name="love">
-	<img class="coralsrc="" />
-</Reaction>
-```
-
 Note: some server side work will need to accompany this client side component. See the like and respect plugins as examples.
 
 ### Comment Stream
@@ -115,11 +109,7 @@ Comment streams may be created with filtering and ordering in place:
 
 * filter by user
 * filter by tag
-* sort by date ascending / descrnding
-
-```
-<CommentStream userFilter="[userId]" tagFilter="[tag]" sort="[ascending|descending]"></CommentStream>
-```
+* sort by date ascending / descending
 
 ### Comment Commit hooks
 

From 602c3d0be286e617007f0f2b092992074818075f Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Wed, 10 May 2017 12:28:33 -0600
Subject: [PATCH 07/58] use a slot instead of trying to use facebook directly

---
 .../src/containers/ModerationQueue/UserDetail.js           | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
index 06587065e..a305118a7 100644
--- a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
+++ b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
@@ -3,6 +3,7 @@ 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 = {
@@ -29,19 +30,17 @@ class UserDetail extends React.Component {
 
     const {user} = data;
     const localProfile = user.profiles.find(p => p.provider === 'local');
-    const facebookProfile = user.profiles.find(p => p.provider === 'facebook');
     let profile;
     if (localProfile) {
       profile = localProfile.id;
-    } else if (facebookProfile) {
-      profile = <a href={`https://facebook.com/${facebookProfile.id}`}>{facebookProfile.id}</a>;
     }
 
     return (
       <Drawer handleClickOutside={hideUserDetail}>
         <h3>{user.username}</h3>
         <Button className={styles.copyButton}>Copy</Button>
-        <p ref={ref => this.profile = ref} contentEditable="true">{profile}</p>
+        {profile && <p ref={ref => this.profile = ref} contentEditable="true">{profile}</p>}
+        <Slot fill="userProfile" user={user} />
         <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
         <hr/>
         <p>

From 14b483d0894a07ca16b37da71158194f74e93be9 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Thu, 11 May 2017 14:23:02 -0600
Subject: [PATCH 08/58] create roles helper

---
 client/coral-admin/src/actions/auth.js               |  8 +++-----
 client/coral-admin/src/containers/LayoutContainer.js |  7 ++++---
 client/coral-admin/src/reducers/auth.js              |  2 --
 client/coral-embed-stream/src/components/Embed.js    |  5 +++--
 client/coral-embed-stream/src/components/Stream.js   |  5 +++--
 client/coral-framework/actions/auth.js               |  7 +++----
 client/coral-framework/reducers/auth.js              |  6 +-----
 client/coral-framework/utils/roles.js                | 10 ++++++++++
 services/users.js                                    | 11 ++++-------
 9 files changed, 31 insertions(+), 30 deletions(-)
 create mode 100644 client/coral-framework/utils/roles.js

diff --git a/client/coral-admin/src/actions/auth.js b/client/coral-admin/src/actions/auth.js
index 89b56d4dc..68da3577e 100644
--- a/client/coral-admin/src/actions/auth.js
+++ b/client/coral-admin/src/actions/auth.js
@@ -14,8 +14,7 @@ export const handleLogin = (email, password, recaptchaResponse) => 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 => {
 
@@ -41,7 +40,7 @@ export const requestPasswordReset = email => dispatch => {
 // Check Login
 
 const checkLoginRequest = () => ({type: actions.CHECK_LOGIN_REQUEST});
-const checkLoginSuccess = (user, isAdmin) => ({type: actions.CHECK_LOGIN_SUCCESS, user, isAdmin});
+const checkLoginSuccess = (user) => ({type: actions.CHECK_LOGIN_SUCCESS, user});
 const checkLoginFailure = error => ({type: actions.CHECK_LOGIN_FAILURE, error});
 
 export const checkLogin = () => dispatch => {
@@ -52,8 +51,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);
diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js
index 42e2baade..fea730c98 100644
--- a/client/coral-admin/src/containers/LayoutContainer.js
+++ b/client/coral-admin/src/containers/LayoutContainer.js
@@ -6,6 +6,7 @@ import {toggleModal as toggleShortcutModal} from '../actions/moderation';
 import {fetchConfig} from '../actions/config';
 import {FullLoading} from '../components/FullLoading';
 import AdminLogin from '../components/AdminLogin';
+import roleUtils from 'coral-framework/utils/roles';
 
 class LayoutContainer extends Component {
   componentWillMount () {
@@ -16,7 +17,7 @@ class LayoutContainer extends Component {
   }
   render () {
     const {
-      isAdmin,
+      user,
       loggedIn,
       loadingUser,
       loginError,
@@ -26,7 +27,7 @@ class LayoutContainer extends Component {
 
     const {handleLogout, toggleShortcutModal, TALK_RECAPTCHA_PUBLIC} = this.props;
     if (loadingUser) { return <FullLoading />; }
-    if (!isAdmin) {
+    if (roleUtils.canAccessAdmin(user)) {
       return <AdminLogin
         loginMaxExceeded={loginMaxExceeded}
         handleLogin={this.props.handleLogin}
@@ -35,7 +36,7 @@ class LayoutContainer extends Component {
         recaptchaPublic={TALK_RECAPTCHA_PUBLIC}
         errorMessage={loginError} />;
     }
-    if (isAdmin && loggedIn) {
+    if (roleUtils.canAccessAdmin(user) && loggedIn) {
       return <Layout handleLogout={handleLogout} toggleShortcutModal={toggleShortcutModal} {...this.props} />;
     }
     return <FullLoading />;
diff --git a/client/coral-admin/src/reducers/auth.js b/client/coral-admin/src/reducers/auth.js
index a7054ddfa..2bd42d112 100644
--- a/client/coral-admin/src/reducers/auth.js
+++ b/client/coral-admin/src/reducers/auth.js
@@ -4,7 +4,6 @@ import * as actions from '../constants/auth';
 const initialState = Map({
   loggedIn: false,
   user: null,
-  isAdmin: false,
   loginError: null,
   loginMaxExceeded: false,
   passwordRequestSuccess: null
@@ -24,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_SUCCESS:
     return initialState;
diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index 0d26cf740..908fd4a90 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations';
+import rolesHelper from 'coral-framework/utils/roles';
 const lang = new I18n(translations);
 
 import {TabBar, Tab, TabContent, Button} from 'coral-ui';
@@ -38,7 +39,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 +49,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={!rolesHelper.canAccessConfig(user)}>Configure Stream</Tab>
           </TabBar>
           {
             commentId &&
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 46ac75dca..7efadc921 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -11,6 +11,7 @@ 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 rolesHelper from 'coral-framework/utils/roles';
 import ChangeUsernameContainer
   from 'coral-sign-in/containers/ChangeUsernameContainer';
 
@@ -37,7 +38,7 @@ class Stream extends React.Component {
       removeCommentTag,
       pluginProps,
       ignoreUser,
-      auth: {loggedIn, isAdmin, user},
+      auth: {loggedIn, user},
       commentCountCache,
       editName
     } = this.props;
@@ -111,7 +112,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={rolesHelper.canModerate(user)} />}
 
         {/* the highlightedComment is isolated after the user followed a permalink */}
         {highlightedComment
diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js
index d689aeb63..527369b60 100644
--- a/client/coral-framework/actions/auth.js
+++ b/client/coral-framework/actions/auth.js
@@ -108,7 +108,7 @@ export const cleanState = () => ({type: actions.CLEAN_STATE});
 const signInRequest = () => ({type: actions.FETCH_SIGNIN_REQUEST});
 
 // TODO: revisit login redux flow.
-// const signInSuccess = (user, isAdmin) => ({type: actions.FETCH_SIGNIN_SUCCESS, user, isAdmin});
+// const signInSuccess = (user) => ({type: actions.FETCH_SIGNIN_SUCCESS, user});
 //
 const signInFailure = error => ({type: actions.FETCH_SIGNIN_FAILURE, error});
 
@@ -236,7 +236,7 @@ export const invalidForm = error => ({type: actions.INVALID_FORM, error});
 // Check Login
 
 const checkLoginRequest = () => ({type: actions.CHECK_LOGIN_REQUEST});
-const checkLoginSuccess = (user, isAdmin) => ({type: actions.CHECK_LOGIN_SUCCESS, user, isAdmin});
+const checkLoginSuccess = (user) => ({type: actions.CHECK_LOGIN_SUCCESS, user});
 const checkLoginFailure = error => ({type: actions.CHECK_LOGIN_FAILURE, error});
 
 export const checkLogin = () => dispatch => {
@@ -247,8 +247,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);
diff --git a/client/coral-framework/reducers/auth.js b/client/coral-framework/reducers/auth.js
index 83ea49ce5..5ac862431 100644
--- a/client/coral-framework/reducers/auth.js
+++ b/client/coral-framework/reducers/auth.js
@@ -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,
@@ -79,12 +78,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
@@ -120,8 +117,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);
diff --git a/client/coral-framework/utils/roles.js b/client/coral-framework/utils/roles.js
new file mode 100644
index 000000000..b457ff1b3
--- /dev/null
+++ b/client/coral-framework/utils/roles.js
@@ -0,0 +1,10 @@
+import includes from 'lodash/includes';
+
+export default {
+  canAccessConfig: (user) => includes(user.roles, 'ADMIN'),
+  canChangeRoles: user => includes(user.roles, 'ADMIN'),
+  hasStaffTag: user => includes(user.roles, 'ADMIN', 'MODERATOR', 'STAFF'),
+  canViewUserEmails: user => includes(user.roles, 'ADMIN'),
+  canModerate: user => includes(user.roles, 'ADMIN', 'MODERATOR'),
+  canAccessAdmin: user => includes(user.roles, 'ADMIN', 'MODERATOR')
+};
diff --git a/services/users.js b/services/users.js
index 14301ccf4..246d3fded 100644
--- a/services/users.js
+++ b/services/users.js
@@ -395,13 +395,10 @@ module.exports = class UsersService {
       return Promise.reject(new Error(`role ${role} is not supported`));
     }
 
-    return UserModel.update({
-      id: id
-    }, {
-      $addToSet: {
-        roles: role
-      }
-    });
+    // 5.11.2017 - Restricting this to a hierarchical system like WordPress
+    // where you can only set one role at a time.
+    // I'm not changing the data structure here, because I don't want a migration
+    return UserModel.update({id}, {$set: {roles: [role]}});
   }
 
   /**

From e32ab99edf17a85a41c7e1bc7e4f2cfabb3b83d6 Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Fri, 12 May 2017 09:57:07 -0600
Subject: [PATCH 09/58] remove hasRoles

---
 .../src/containers/LayoutContainer.js         |  2 +-
 graph/loaders/comments.js                     |  6 +-
 graph/mutators/comment.js                     |  2 +-
 graph/resolvers/comment.js                    |  7 +-
 graph/resolvers/root_query.js                 | 12 +--
 graph/resolvers/user.js                       |  6 +-
 models/user.js                                | 78 ++++++++++++++++---
 test/server/graph/mutations/addCommentTag.js  |  1 +
 8 files changed, 87 insertions(+), 27 deletions(-)

diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js
index fea730c98..8a3e0b0d2 100644
--- a/client/coral-admin/src/containers/LayoutContainer.js
+++ b/client/coral-admin/src/containers/LayoutContainer.js
@@ -27,7 +27,7 @@ class LayoutContainer extends Component {
 
     const {handleLogout, toggleShortcutModal, TALK_RECAPTCHA_PUBLIC} = this.props;
     if (loadingUser) { return <FullLoading />; }
-    if (roleUtils.canAccessAdmin(user)) {
+    if (!loggedIn) {
       return <AdminLogin
         loginMaxExceeded={loginMaxExceeded}
         handleLogin={this.props.handleLogin}
diff --git a/graph/loaders/comments.js b/graph/loaders/comments.js
index 0faa124da..b09dbc497 100644
--- a/graph/loaders/comments.js
+++ b/graph/loaders/comments.js
@@ -226,7 +226,7 @@ const getCommentsByQuery = async ({user}, {ids, statuses, asset_id, parent_id, a
 
   // Only administrators can search for comments with statuses that are not
   // `null`, or `'ACCEPTED'`.
-  if (user != null && user.hasRoles('ADMIN') && statuses) {
+  if (user != null && user.canViewNonNullOrAcceptedComments() && statuses) {
     comments = comments.where({
       status: {
         $in: statuses
@@ -249,7 +249,7 @@ const getCommentsByQuery = async ({user}, {ids, statuses, asset_id, parent_id, a
   }
 
   // Only let an admin request any user or the current user request themself.
-  if (user && (user.hasRoles('ADMIN') || user.id === author_id) && author_id != null) {
+  if (user && (user.canViewOthersComments() || user.id === author_id) && author_id != null) {
     comments = comments.where({author_id});
   }
 
@@ -403,7 +403,7 @@ const genRecentComments = (_, ids) => {
  */
 const genComments = ({user}, ids) => {
   let comments;
-  if (user && user.hasRoles('ADMIN')) {
+  if (user && user.canViewOthersComments()) {
     comments = CommentModel.find({
       id: {
         $in: ids
diff --git a/graph/mutators/comment.js b/graph/mutators/comment.js
index e2f2d3bac..9557c1dcf 100644
--- a/graph/mutators/comment.js
+++ b/graph/mutators/comment.js
@@ -22,7 +22,7 @@ const createComment = ({user, loaders: {Comments}, pubsub}, {body, asset_id, par
   tags = tags.map(tag => ({name: tag}));
 
   // If admin or moderator, adding STAFF tag
-  if (user.hasRoles('ADMIN') || user.hasRoles('MODERATOR')) {
+  if (user.isStaff()) {
     tags.push({name: 'STAFF'});
   }
 
diff --git a/graph/resolvers/comment.js b/graph/resolvers/comment.js
index 19ea11efe..fb01a1585 100644
--- a/graph/resolvers/comment.js
+++ b/graph/resolvers/comment.js
@@ -23,14 +23,13 @@ const Comment = {
   },
   replyCount({id}, {excludeIgnored}, {user, loaders: {Comments}}) {
     if (user && excludeIgnored) {
-      return Comments.countByParentIDPersonalized({id, excludeIgnored});      
+      return Comments.countByParentIDPersonalized({id, excludeIgnored});
     }
-    return Comments.countByParentID.load(id);      
+    return Comments.countByParentID.load(id);
   },
   actions({id}, _, {user, loaders: {Actions}}) {
 
-    // Only return the actions if the user is not an admin.
-    if (user && user.hasRoles('ADMIN')) {
+    if (user && user.canViewActions()) {
       return Actions.getByID.load(id);
     }
 
diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js
index 4dcb7ea11..9deaba5f6 100644
--- a/graph/resolvers/root_query.js
+++ b/graph/resolvers/root_query.js
@@ -1,6 +1,6 @@
 const RootQuery = {
   assets(_, args, {loaders: {Assets}, user}) {
-    if (user == null || !user.hasRoles('ADMIN')) {
+    if (user == null || !user.canQueryAssets()) {
       return null;
     }
 
@@ -22,7 +22,7 @@ const RootQuery = {
   comments(_, {query: {action_type, statuses, asset_id, parent_id, limit, cursor, sort, excludeIgnored}}, {user, loaders: {Comments, Actions}}) {
     let query = {statuses, asset_id, parent_id, limit, cursor, sort, excludeIgnored};
 
-    if (user != null && user.hasRoles('ADMIN') && action_type) {
+    if (user != null && user.canViewOthersComments() && action_type) {
       return Actions.getByTypes({action_type, item_type: 'COMMENTS'})
         .then((ids) => {
 
@@ -37,7 +37,7 @@ const RootQuery = {
     return Comments.get.load(id);
   },
   commentCount(_, {query: {action_type, statuses, asset_id, parent_id}}, {user, loaders: {Actions, Comments}}) {
-    if (user == null || !user.hasRoles('ADMIN')) {
+    if (user == null || !user.canViewOthersComments()) {
       return null;
     }
 
@@ -54,7 +54,7 @@ const RootQuery = {
   },
 
   assetMetrics(_, {from, to, sort, limit = 10}, {user, loaders: {Metrics: {Assets}}}) {
-    if (user == null || !user.hasRoles('ADMIN')) {
+    if (user == null || !user.canQueryAssets()) {
       return null;
     }
 
@@ -66,7 +66,7 @@ const RootQuery = {
   },
 
   commentMetrics(_, {from, to, sort, limit = 10}, {user, loaders: {Metrics: {Comments}}}) {
-    if (user == null || !user.hasRoles('ADMIN')) {
+    if (user == null || !user.canViewCommentMetrics()) {
       return null;
     }
 
@@ -100,7 +100,7 @@ const RootQuery = {
   // so hide it in the event that we aren't an admin.
   users(_, {query: {action_type, limit, cursor, sort}}, {user, loaders: {Users, Actions}}) {
 
-    if (user == null || !user.hasRoles('ADMIN')) {
+    if (user == null || !user.canViewOtherUsers()) {
       return null;
     }
 
diff --git a/graph/resolvers/user.js b/graph/resolvers/user.js
index d8ed7ee15..03e1b121a 100644
--- a/graph/resolvers/user.js
+++ b/graph/resolvers/user.js
@@ -5,7 +5,7 @@ const User = {
   actions({id}, _, {user, loaders: {Actions}}) {
 
     // Only return the actions if the user is not an admin.
-    if (user && user.hasRoles('ADMIN')) {
+    if (user && user.canViewActions()) {
       return Actions.getByID.load(id);
     }
 
@@ -14,7 +14,7 @@ const User = {
 
     // If the user is not an admin, only return comment list for the owner of
     // the comments.
-    if (user && (user.hasRoles('ADMIN') || user.id === id)) {
+    if (user && (user.canViewOthersComments() || user.id === id)) {
       return Comments.getByQuery({author_id: id, sort: 'REVERSE_CHRONOLOGICAL'});
     }
 
@@ -23,7 +23,7 @@ const User = {
   roles({id, roles}, _, {user}) {
 
     // If the user is not an admin, only return the current user's roles.
-    if (user && (user.hasRoles('ADMIN') || user.id === id)) {
+    if (user && (user.canChangeRoles() || user.id === id)) {
       return roles;
     }
 
diff --git a/models/user.js b/models/user.js
index ec215b3fa..179e6f7a5 100644
--- a/models/user.js
+++ b/models/user.js
@@ -1,6 +1,7 @@
 const mongoose = require('../services/mongoose');
 const bcrypt = require('bcrypt');
 const uuid = require('uuid');
+const intersection = require('lodash/intersection');
 
 // USER_ROLES is the array of roles that is permissible as a user role.
 const USER_ROLES = [
@@ -158,14 +159,74 @@ UserSchema.index({
 });
 
 /**
- * Returns true if the user has all the roles specified.
+ * returns true if the user can look up assets through the api
  */
-UserSchema.method('hasRoles', function(...roles) {
-  return roles.every((role) => {
+UserSchema.method('canQueryAssets', function () {
+  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
+});
 
-    // TODO: remove toUpperCase() once we've migrated usage.
-    return this.roles.indexOf(role.toUpperCase()) >= 0;
-  });
+/**
+ * returns true if the user can view actions
+ */
+UserSchema.method('canViewActions', function () {
+  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
+});
+
+/**
+ * returns true if the user can view non-null or non-ACCEPTED comments
+ */
+UserSchema.method('canViewNonNullOrAcceptedComments', function () {
+  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
+});
+
+/**
+ * returns true when a user can view comments that are not their own
+ */
+UserSchema.method('canViewOthersComments', function () {
+  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
+});
+
+/**
+ * returns true when a user can view comment metrics
+ */
+UserSchema.method('canViewCommentMetrics', function () {
+  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
+});
+
+/**
+ * returns true if a commenter is staff
+ */
+UserSchema.method('isStaff', function () {
+  return !!intersection(['ADMIN', 'MODERATOR', 'STAFF'], this.roles).length;
+});
+
+/**
+ * returns true when a user can see other user info
+ */
+UserSchema.method('canViewOtherUsers', function () {
+  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
+});
+
+/**
+ * when a user can modify tags
+ */
+UserSchema.method('canModifyTags', function () {
+  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
+});
+
+/**
+ * when a user can change roles
+ */
+UserSchema.method('canChangeUserRoles', function () {
+  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
+});
+
+UserSchema.method('canSetCommentStatus', function () {
+  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
+});
+
+UserSchema.method('canSetUserStatus', function () {
+  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
 });
 
 /**
@@ -216,13 +277,12 @@ UserSchema.method('can', function(...actions) {
     return false;
   }
 
-  if (actions.some((action) => action === 'mutation:setUserStatus' || action === 'mutation:suspendUser' || action === 'mutation:setCommentStatus') && !this.hasRoles('ADMIN')) {
+  if (actions.some((action) => action === 'mutation:setUserStatus' || action === 'mutation:suspendUser' || action === 'mutation:setCommentStatus') && !this.canSetUserStatus()) {
     return false;
   }
 
   // {add,remove}CommentTag - requires admin and/or moderator role
-  const userCanModifyTags = user => ['ADMIN', 'MODERATOR'].some(r => user.hasRoles(r));
-  if (actions.some(a => ['mutation:removeCommentTag', 'mutation:addCommentTag'].includes(a)) && ! userCanModifyTags(this)) {
+  if (actions.some(a => ['mutation:removeCommentTag', 'mutation:addCommentTag'].includes(a)) && ! this.canModifyTags()) {
     return false;
   }
 
diff --git a/test/server/graph/mutations/addCommentTag.js b/test/server/graph/mutations/addCommentTag.js
index 018e96631..1386d8339 100644
--- a/test/server/graph/mutations/addCommentTag.js
+++ b/test/server/graph/mutations/addCommentTag.js
@@ -44,6 +44,7 @@ describe('graph.mutations.addCommentTag', () => {
     Object.entries({
       'anonymous': undefined,
       'regular commenter': new UserModel({}),
+      'staff': new UserModel({roles: ['STAFF']}),
       'banned moderator': new UserModel({roles: ['MODERATOR'], status: 'BANNED'})
     }).forEach(([ userDescription, user ]) => {
       it(userDescription, async function () {

From 63fa3c4de79e5fb0c04eeac11966f909239adfa2 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 15 May 2017 22:28:04 +0700
Subject: [PATCH 10/58] Implement suspend user components

---
 client/coral-admin/src/actions/moderation.js  |   6 +
 .../src/components/ActionsMenu.css            |  53 ++++
 .../coral-admin/src/components/ActionsMenu.js |  64 +++++
 .../src/components/ActionsMenuItem.js         |   9 +
 client/coral-admin/src/components/App.js      |  10 +-
 .../src/components/ToastContainer.css         | 226 ++++++++++++++++++
 .../src/components/ToastContainer.js          |   7 +
 .../coral-admin/src/constants/moderation.js   |   2 +
 .../Community/components/ActionButton.js      |   2 +-
 .../Community}/components/BanUserButton.css   |   0
 .../Community}/components/BanUserButton.js    |   0
 .../Community/components/SuspendUserDialog.js |  10 +-
 .../ModerationQueue/ModerationContainer.js    |  38 ++-
 .../ModerationQueue/ModerationQueue.js        |   2 +
 .../components/BanUserDialog.css              |   7 +-
 .../components/BanUserDialog.js               |   2 +-
 .../ModerationQueue/components/Comment.js     |  19 +-
 .../components/SuspendUserDialog.css          |  90 +++++++
 .../components/SuspendUserDialog.js           | 147 ++++++++++++
 client/coral-admin/src/reducers/moderation.js |  28 ++-
 client/coral-admin/src/translations.json      |  41 ++--
 client/coral-ui/components/Button.css         |  36 ++-
 client/coral-ui/components/Button.js          |   2 +-
 package.json                                  |   5 +-
 yarn.lock                                     |  24 ++
 25 files changed, 770 insertions(+), 60 deletions(-)
 create mode 100644 client/coral-admin/src/components/ActionsMenu.css
 create mode 100644 client/coral-admin/src/components/ActionsMenu.js
 create mode 100644 client/coral-admin/src/components/ActionsMenuItem.js
 create mode 100644 client/coral-admin/src/components/ToastContainer.css
 create mode 100644 client/coral-admin/src/components/ToastContainer.js
 rename client/coral-admin/src/{ => containers/Community}/components/BanUserButton.css (100%)
 rename client/coral-admin/src/{ => containers/Community}/components/BanUserButton.js (100%)
 rename client/coral-admin/src/{ => containers/ModerationQueue}/components/BanUserDialog.css (97%)
 rename client/coral-admin/src/{ => containers/ModerationQueue}/components/BanUserDialog.js (97%)
 create mode 100644 client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.css
 create mode 100644 client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js

diff --git a/client/coral-admin/src/actions/moderation.js b/client/coral-admin/src/actions/moderation.js
index c93dc0c76..52d5134a5 100644
--- a/client/coral-admin/src/actions/moderation.js
+++ b/client/coral-admin/src/actions/moderation.js
@@ -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 {
diff --git a/client/coral-admin/src/components/ActionsMenu.css b/client/coral-admin/src/components/ActionsMenu.css
new file mode 100644
index 000000000..1d2f91f74
--- /dev/null
+++ b/client/coral-admin/src/components/ActionsMenu.css
@@ -0,0 +1,53 @@
+.button {
+  -webkit-transform: scale(.8);
+  transform: scale(.8);
+  margin: 0;
+}
+
+.root {
+  color: black;
+  > :global(.mdl-menu__container) {
+    margin-left: 10px;
+    > :global(.mdl-menu__outline) {
+      box-shadow: none;
+    }
+  }
+}
+
+.buttonOpen {
+  box-shadow: none;
+  color: white;
+  background-color: #616161;
+}
+
+.arrowIcon {
+  margin-left: 6px;
+  margin-right: 0;
+  vertical-align: middle;
+  margin-right: 0;
+  font-size: 14px;
+}
+
+.menu {
+  padding: 0;
+}
+
+.menuItem {
+  background-color: #2a2a2a;
+  color: white;
+  &:first-child {
+    margin-bottom: 1px;
+    border-radius: 2px 2px 0px 0px;
+  }
+  &:last-child {
+    border-radius: 0px 0px 2px 2px;
+  }
+  &:hover, &:active, &:focus {
+    background-color: #767676;
+  }
+  &[disabled], &[disabled]:hover, &[disabled]:focus, &[disabled]:active {
+    background-color: #262626;
+    color: rgba(255, 255, 255, 0.5);
+  }
+}
+
diff --git a/client/coral-admin/src/components/ActionsMenu.js b/client/coral-admin/src/components/ActionsMenu.js
new file mode 100644
index 000000000..eb173eb81
--- /dev/null
+++ b/client/coral-admin/src/components/ActionsMenu.js
@@ -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;
diff --git a/client/coral-admin/src/components/ActionsMenuItem.js b/client/coral-admin/src/components/ActionsMenuItem.js
new file mode 100644
index 000000000..82dab96f0
--- /dev/null
+++ b/client/coral-admin/src/components/ActionsMenuItem.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import cn from 'classnames';
+import {MenuItem} from 'react-mdl';
+import styles from './ActionsMenu.css';
+
+const ActionsMenuItem = (props) =>
+  <MenuItem className={cn(styles.menuItem, props.className)} {...props} />;
+
+export default ActionsMenuItem;
diff --git a/client/coral-admin/src/components/App.js b/client/coral-admin/src/components/App.js
index 3c6e88a14..1a15c72c3 100644
--- a/client/coral-admin/src/components/App.js
+++ b/client/coral-admin/src/components/App.js
@@ -1,16 +1,16 @@
 import React from 'react';
-import {Provider} from 'react-redux';
+import ToastContainer from './ToastContainer';
 import 'material-design-lite';
-import store from 'services/store';
 
 import AppRouter from '../AppRouter';
 
 export default class App extends React.Component {
   render () {
     return (
-      <Provider store={store}>
-        <AppRouter store={store} />
-      </Provider>
+      <div>
+        <ToastContainer />
+        <AppRouter />
+      </div>
     );
   }
 }
diff --git a/client/coral-admin/src/components/ToastContainer.css b/client/coral-admin/src/components/ToastContainer.css
new file mode 100644
index 000000000..319872ceb
--- /dev/null
+++ b/client/coral-admin/src/components/ToastContainer.css
@@ -0,0 +1,226 @@
+@keyframes :global(bounceInRight) {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  from {
+    opacity: 0;
+    transform: translate3d(3000px, 0, 0); }
+  60% {
+    opacity: 1;
+    transform: translate3d(-25px, 0, 0); }
+  75% {
+    transform: translate3d(10px, 0, 0); }
+  90% {
+    transform: translate3d(-5px, 0, 0); }
+  to {
+    transform: none; } }
+
+@keyframes :global(bounceOutRight) {
+  20% {
+    opacity: 1;
+    transform: translate3d(-20px, 0, 0); }
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0); } }
+
+@keyframes :global(bounceInLeft) {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  0% {
+    opacity: 0;
+    transform: translate3d(-3000px, 0, 0); }
+  60% {
+    opacity: 1;
+    transform: translate3d(25px, 0, 0); }
+  75% {
+    transform: translate3d(-10px, 0, 0); }
+  90% {
+    transform: translate3d(5px, 0, 0); }
+  to {
+    transform: none; } }
+
+@keyframes :global(bounceOutLeft) {
+  20% {
+    opacity: 1;
+    transform: translate3d(20px, 0, 0); }
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0); } }
+
+@keyframes :global(bounceInUp) {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  from {
+    opacity: 0;
+    transform: translate3d(0, 3000px, 0); }
+  60% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0); }
+  75% {
+    transform: translate3d(0, 10px, 0); }
+  90% {
+    transform: translate3d(0, -5px, 0); }
+  to {
+    transform: translate3d(0, 0, 0); } }
+
+@keyframes :global(bounceOutUp) {
+  20% {
+    transform: translate3d(0, -10px, 0); }
+  40%, 45% {
+    opacity: 1;
+    transform: translate3d(0, 20px, 0); }
+  to {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0); } }
+
+@keyframes :global(bounceInDown) {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -3000px, 0); }
+  60% {
+    opacity: 1;
+    transform: translate3d(0, 25px, 0); }
+  75% {
+    transform: translate3d(0, -10px, 0); }
+  90% {
+    transform: translate3d(0, 5px, 0); }
+  to {
+    transform: none; } }
+
+@keyframes :global(bounceOutDown) {
+  20% {
+    transform: translate3d(0, 10px, 0); }
+  40%, 45% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0); }
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0); } }
+
+@keyframes :global(track-progress) {
+  0% {
+    width: 100%; }
+  100% {
+    width: 0; } }
+
+:global {
+  .bounceOutRight, .toast-exit--top-right, .toast-exit--bottom-right {
+    animation-name: bounceOutRight; }
+
+  .bounceInRight, .toast-enter--top-right, .toast-enter--bottom-right {
+    animation-name: bounceInRight; }
+
+  .bounceInLeft, .toast-enter--top-left, .toast-enter--bottom-left {
+    animation-name: bounceInLeft; }
+
+  .bounceOutLeft, .toast-exit--top-left, .toast-exit--bottom-left {
+    animation-name: bounceOutLeft; }
+
+  .bounceInUp, .toast-enter--bottom-center {
+    animation-name: bounceInUp; }
+  .bounceOutUp, .toast-exit--top-center {
+    animation-name: bounceOutUp; }
+
+  .bounceInDown, .toast-enter--top-center {
+    animation-name: bounceInDown; }
+
+  .bounceOutDown, .toast-exit--bottom-center {
+    animation-name: bounceOutDown; }
+
+  .animated {
+    animation-duration: 0.75s;
+    animation-fill-mode: both; }
+
+  .toastify {
+    z-index: 999;
+    position: fixed;
+    padding: 4px;
+    width: 350px;
+    max-width: 98%;
+    color: #999;
+    box-sizing: border-box; }
+    .toastify--top-left {
+      top: 1em;
+      left: 1em; }
+    .toastify--top-center {
+      top: 1em;
+      left: 50%;
+      margin-left: -175px; }
+    .toastify--top-right {
+      top: 1em;
+      right: 2em; }
+    .toastify--bottom-left {
+      bottom: 1em;
+      left: 1em; }
+    .toastify--bottom-center {
+      bottom: 1em;
+      left: 50%;
+      margin-left: -175px; }
+    .toastify--bottom-right {
+      bottom: 1em;
+      right: 2em; }
+    .toastify__img {
+      float: left;
+      margin-right: 8px;
+      vertical-align: middle; }
+
+  .toastify__close {
+    position: absolute;
+    top: 18px;
+    left: 12px;
+    width: 20px;
+    height: 16px;
+    padding: 0;
+    text-align: center;
+    text-decoration: none;
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    background: transparent;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    opacity: 0.8;
+    transition: .3s ease; }
+    .toastify__close:hover, .toastify__close:focus {
+      opacity: 1;
+    }
+
+  .toastify-content {
+    position: relative;
+    width: 100%;
+    margin-bottom: 12px;
+    padding: 18px 24px 20px 48px;
+    box-sizing: border-box;
+    background: #404040;
+    border-radius: 2px;
+    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1), 0 3px 20px 0 rgba(0, 0, 0, 0.05); }
+    .toastify-content--info {
+      background: #2488cb; }
+    .toastify-content--success {
+      background: #008577; }
+    .toastify-content--warning {
+      background: #ef6c2b; }
+    .toastify-content--error {
+      background: #ef342b; }
+
+  .toastify__body {
+    color: white;
+    font-size: 15px;
+    font-weight: 400;
+  }
+
+  .toastify__progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 4px;
+    z-index: 999;
+    opacity: 0.8;
+    border-radius: 2px;
+    animation: track-progress linear 1;
+    background-color: white;
+  }
+}
diff --git a/client/coral-admin/src/components/ToastContainer.js b/client/coral-admin/src/components/ToastContainer.js
new file mode 100644
index 000000000..a751d2714
--- /dev/null
+++ b/client/coral-admin/src/components/ToastContainer.js
@@ -0,0 +1,7 @@
+import './ToastContainer.css';
+import {defaultProps} from 'recompose';
+import {ToastContainer} from 'react-toastify';
+
+export default defaultProps({
+  autoClose: 5000,
+})(ToastContainer);
diff --git a/client/coral-admin/src/constants/moderation.js b/client/coral-admin/src/constants/moderation.js
index 14672146e..7e918ed4a 100644
--- a/client/coral-admin/src/constants/moderation.js
+++ b/client/coral-admin/src/constants/moderation.js
@@ -3,3 +3,5 @@ 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';
diff --git a/client/coral-admin/src/containers/Community/components/ActionButton.js b/client/coral-admin/src/containers/Community/components/ActionButton.js
index 6352480fd..ad5346ac5 100644
--- a/client/coral-admin/src/containers/Community/components/ActionButton.js
+++ b/client/coral-admin/src/containers/Community/components/ActionButton.js
@@ -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';
 
diff --git a/client/coral-admin/src/components/BanUserButton.css b/client/coral-admin/src/containers/Community/components/BanUserButton.css
similarity index 100%
rename from client/coral-admin/src/components/BanUserButton.css
rename to client/coral-admin/src/containers/Community/components/BanUserButton.css
diff --git a/client/coral-admin/src/components/BanUserButton.js b/client/coral-admin/src/containers/Community/components/BanUserButton.js
similarity index 100%
rename from client/coral-admin/src/components/BanUserButton.js
rename to client/coral-admin/src/containers/Community/components/BanUserButton.js
diff --git a/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js b/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js
index 20e221c48..827352c42 100644
--- a/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js
+++ b/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js
@@ -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'
@@ -38,7 +38,7 @@ class SuspendUserDialog extends Component  {
   }
 
   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')});
   }
 
   /*
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index 9606be543..e8535f854 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -1,6 +1,8 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
 import {compose} from 'react-apollo';
+import {toast} from 'react-toastify';
 import key from 'keymaster';
 import isEqual from 'lodash/isEqual';
 import styles from './components/styles.css';
@@ -10,10 +12,19 @@ import {banUser, setCommentStatus} 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,
+} 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';
@@ -175,6 +186,7 @@ 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}
@@ -192,6 +204,12 @@ class ModerationContainer extends Component {
           showRejectedNote={moderation.showRejectedNote}
           rejectComment={props.rejectComment}
         />
+        <SuspendUserDialog
+          open={moderation.suspendUserDialog.show}
+          username={moderation.suspendUserDialog.username}
+          onCancel={props.hideSuspendUserDialog}
+          onPerform={() => toast('User admin has been suspended for 24 hours. this suspension will automatically end after 24 hours.', {type: 'success'}) && props.hideSuspendUserDialog()}
+        />
       <ModerationKeysModal
           hideShortcutsNote={props.hideShortcutsNote}
           shortcutsNoteVisible={moderation.shortcutsNoteVisible}
@@ -209,14 +227,18 @@ const mapStateToProps = state => ({
 });
 
 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,
+  }, dispatch),
 });
 
 export default compose(
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
index c4bf0f85c..b93f185f0 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
@@ -16,6 +16,7 @@ class ModerationQueue extends React.Component {
     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
@@ -51,6 +52,7 @@ class ModerationQueue extends React.Component {
                 bannedWords={props.bannedWords}
                 actions={actionsMap[status]}
                 showBanUserDialog={props.showBanUserDialog}
+                showSuspendUserDialog={props.showSuspendUserDialog}
                 acceptComment={props.acceptComment}
                 rejectComment={props.rejectComment}
                 currentAsset={props.currentAsset}
diff --git a/client/coral-admin/src/components/BanUserDialog.css b/client/coral-admin/src/containers/ModerationQueue/components/BanUserDialog.css
similarity index 97%
rename from client/coral-admin/src/components/BanUserDialog.css
rename to client/coral-admin/src/containers/ModerationQueue/components/BanUserDialog.css
index a46b9da32..f13f0e6aa 100644
--- a/client/coral-admin/src/components/BanUserDialog.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/BanUserDialog.css
@@ -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;
 }
diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/containers/ModerationQueue/components/BanUserDialog.js
similarity index 97%
rename from client/coral-admin/src/components/BanUserDialog.js
rename to client/coral-admin/src/containers/ModerationQueue/components/BanUserDialog.js
index b259012f3..87a5fe55a 100644
--- a/client/coral-admin/src/components/BanUserDialog.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/BanUserDialog.js
@@ -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) => {
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
index ffd4db2a6..2e940d0d8 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
@@ -9,7 +9,8 @@ import {Icon} from 'coral-ui';
 import FlagBox from './FlagBox';
 import CommentType from './CommentType';
 import ActionButton from 'coral-admin/src/components/ActionButton';
-import BanUserButton from 'coral-admin/src/components/BanUserButton';
+import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
+import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
 import {getActionSummary} from 'coral-framework/utils';
 
 const linkify = new Linkify();
@@ -48,7 +49,19 @@ const Comment = ({actions = [], comment, suspectWords, bannedWords, ...props}) =
             <span className={styles.created}>
               {timeago().format(comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
             </span>
-            <BanUserButton user={comment.user} onClick={() => props.showBanUserDialog(comment.user, comment.id, comment.status, comment.status !== 'REJECTED')} />
+
+            <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' ?
@@ -103,6 +116,8 @@ Comment.propTypes = {
   suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
   currentAsset: PropTypes.object,
+  showBanUserDialog: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func.isRequired,
   comment: PropTypes.shape({
     body: PropTypes.string.isRequired,
     action_summaries: PropTypes.array,
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.css b/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.css
new file mode 100644
index 000000000..1c96f509a
--- /dev/null
+++ b/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.css
@@ -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;
+}
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js b/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
new file mode 100644
index 000000000..0ce0a43d1
--- /dev/null
+++ b/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
@@ -0,0 +1,147 @@
+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 translations from '../../../translations';
+const lang = new I18n(translations);
+
+const initialState = {step: 0, duration: '3', message: lang.t('suspenduser.email_message_suspend')};
+
+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});
+  }
+
+  increaseStep = () => {
+    this.setState({step: this.state.step + 1});
+  }
+
+  resetStep = () => {
+    this.setState({step: 0});
+  }
+
+  handlePerform = () => {
+    this.props.onPerform({
+      duration: this.state.duration,
+      message: this.state.message,
+    });
+  };
+
+  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='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.increaseStep} 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.isRequired,
+};
+
+export default SuspendUserDialog;
diff --git a/client/coral-admin/src/reducers/moderation.js b/client/coral-admin/src/reducers/moderation.js
index 8f51cea6b..67fd8700b 100644
--- a/client/coral-admin/src/reducers/moderation.js
+++ b/client/coral-admin/src/reducers/moderation.js
@@ -1,14 +1,21 @@
-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,
   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 +33,19 @@ export default function moderation (state = initialState, action) {
         showRejectedNote: action.showRejectedNote,
         banDialog: true
       });
+  case actions.SHOW_SUSPEND_USER_DIALOG:
+    return state
+      .mergeDeep({
+        suspendUserDialog: {
+          show: true,
+          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);
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 68a3b93d5..174217930 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -140,19 +140,28 @@
       "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": "Your user account has been suspended. 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",
+      "hours": "{0} hours",
+      "days": "{0} days",
+      "suspend_user": "Suspend User",
+      "cancel": "Cancel",
+      "error_email_message_empty": "You must specify an E-Mail message."
     },
     "dashboard": {
       "next-update": "{0} minutes until next update.",
@@ -217,19 +226,23 @@
       "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",
+      "hours": "{0} horas",
+      "days": "{0} días",
+      "suspend_user": "Suspender",
+      "cancel": "Cancelar"
     },
     "modqueue": {
       "all": "todos",
diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css
index 219b70a65..5100d44a4 100644
--- a/client/coral-ui/components/Button.css
+++ b/client/coral-ui/components/Button.css
@@ -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 {
diff --git a/client/coral-ui/components/Button.js b/client/coral-ui/components/Button.js
index 52d806adb..6d3dc94d2 100644
--- a/client/coral-ui/components/Button.js
+++ b/client/coral-ui/components/Button.js
@@ -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>
 );
diff --git a/package.json b/package.json
index bfca21643..ce9058d18 100644
--- a/package.json
+++ b/package.json
@@ -96,14 +96,13 @@
     "prop-types": "^15.5.8",
     "react-apollo": "^1.1.0",
     "react-recaptcha": "^2.2.6",
+    "react-toastify": "^1.5.0",
     "recompose": "^0.23.1",
     "redis": "^2.7.1",
-    "uuid": "^3.0.1",
-    "simplemde": "^1.11.2",
-    "subscriptions-transport-ws": "^0.5.5-alpha.0",
     "resolve": "^1.3.2",
     "semver": "^5.3.0",
     "simplemde": "^1.11.2",
+    "subscriptions-transport-ws": "^0.5.5-alpha.0",
     "uuid": "^3.0.1"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 99703bdf3..fd118d728 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1476,6 +1476,10 @@ chai@^3.5.0:
     deep-eql "^0.1.3"
     type-detect "^1.0.0"
 
+chain-function@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
+
 chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -2422,6 +2426,10 @@ doctypes@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
 
+dom-helpers@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
+
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -6817,6 +6825,22 @@ react-tagsinput@^3.14.0:
   version "3.16.1"
   resolved "https://registry.yarnpkg.com/react-tagsinput/-/react-tagsinput-3.16.1.tgz#dfb3bcbe5fc4430f60c145716c17cdc2613ce117"
 
+react-toastify@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-1.5.0.tgz#e9857e0b5d640064e5ba6caf7a96bb1578273de7"
+  dependencies:
+    prop-types "^15.5.8"
+    react-transition-group "^1.1.2"
+
+react-transition-group@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.1.3.tgz#5e02cf6e44a863314ff3c68a0c826c2d9d70b221"
+  dependencies:
+    chain-function "^1.0.0"
+    dom-helpers "^3.2.0"
+    prop-types "^15.5.6"
+    warning "^3.0.0"
+
 react@^15.3.1, react@^15.4.2:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"

From a9207428feb89fbf02aaa739915cb2adcc62c7b7 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 15 May 2017 23:07:46 +0700
Subject: [PATCH 11/58] Calculate "until"

---
 .../ModerationQueue/ModerationContainer.js    | 14 ++++++++-
 .../components/SuspendUserDialog.js           |  3 +-
 client/coral-admin/src/translations.json      |  3 +-
 client/coral-framework/utils/index.js         | 30 +++++++++++++++++++
 4 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index e8535f854..dcf1d3d68 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -6,6 +6,8 @@ import {toast} from 'react-toastify';
 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';
@@ -31,6 +33,8 @@ import ModerationHeader from './components/ModerationHeader';
 import NotFoundAsset from './components/NotFoundAsset';
 import ModerationKeysModal from '../../components/ModerationKeysModal';
 
+const lang = new I18n(translations);
+
 class ModerationContainer extends Component {
   state = {
     selectedIndex: 0,
@@ -208,7 +212,15 @@ class ModerationContainer extends Component {
           open={moderation.suspendUserDialog.show}
           username={moderation.suspendUserDialog.username}
           onCancel={props.hideSuspendUserDialog}
-          onPerform={() => toast('User admin has been suspended for 24 hours. this suspension will automatically end after 24 hours.', {type: 'success'}) && props.hideSuspendUserDialog()}
+          onPerform={(result) => {
+            toast(
+              lang.t('suspenduser.notify_suspend_until',
+                moderation.suspendUserDialog.username,
+                lang.timeago(result.until)),
+              {type: 'success'}
+            );
+            props.hideSuspendUserDialog();
+          }}
         />
       <ModerationKeysModal
           hideShortcutsNote={props.hideShortcutsNote}
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js b/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
index 0ce0a43d1..4a56762bd 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
@@ -6,6 +6,7 @@ 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);
 
@@ -39,7 +40,7 @@ class SuspendUserDialog extends React.Component {
 
   handlePerform = () => {
     this.props.onPerform({
-      duration: this.state.duration,
+      until: dateAdd(new Date(), 'hour', this.state.duration),
       message: this.state.message,
     });
   };
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 174217930..4ff3bc0a6 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -161,7 +161,8 @@
       "days": "{0} days",
       "suspend_user": "Suspend User",
       "cancel": "Cancel",
-      "error_email_message_empty": "You must specify an E-Mail message."
+      "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.",
diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js
index 598fb59ab..3d26ebe49 100644
--- a/client/coral-framework/utils/index.js
+++ b/client/coral-framework/utils/index.js
@@ -61,3 +61,33 @@ export function separateDataAndRoot(
     root,
   };
 }
+
+/**
+ * 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;
+}

From 50db2d1dda44c0c89e35792a53155f7795bb56ca Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 15 May 2017 15:28:57 -0600
Subject: [PATCH 12/58] Initial merge of trust functionality

---
 graph/mutators/comment.js | 101 ++++++++++++++++++++++++-
 graph/resolvers/user.js   |   9 +++
 graph/typeDefs.graphql    |  21 ++++++
 services/karma.js         | 155 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 285 insertions(+), 1 deletion(-)
 create mode 100644 services/karma.js

diff --git a/graph/mutators/comment.js b/graph/mutators/comment.js
index 52440593d..621494db0 100644
--- a/graph/mutators/comment.js
+++ b/graph/mutators/comment.js
@@ -1,12 +1,91 @@
+const debug = require('debug')('talk:graph:mutators:comment');
 const errors = require('../../errors');
 
+const ActionModel = require('../../models/action');
 const AssetsService = require('../../services/assets');
 const ActionsService = require('../../services/actions');
 const CommentsService = require('../../services/comments');
+const KarmaService = require('../../services/karma');
 const linkify = require('linkify-it')();
 
 const Wordlist = require('../../services/wordlist');
 
+/**
+ * adjustKarma will adjust the affected user's karma depending on the moderators
+ * action.
+ */
+const adjustKarma = (Comments, id, status) => async () => {
+  try {
+
+    // Use the dataloader to get the comment that was just moderated and
+    // get the flag user's id's so we can adjust their karma too.
+    let [
+      comment,
+      flagUserIDs
+    ] = await Promise.all([
+
+      // Load the comment that was just made/updated by the setCommentStatus
+      // operation.
+      Comments.get.load(id),
+
+      // Find all the flag actions that were referenced by this comment
+      // at this point in time.
+      ActionModel.find({
+        item_id: id,
+        item_type: 'COMMENTS',
+        action_type: 'FLAG'
+      }).then((actions) => {
+
+        // This is to ensure that this is always an array.
+        if (!actions) {
+          return [];
+        }
+
+        return actions.map(({user_id}) => user_id);
+      })
+    ]);
+
+    debug(`Comment[${id}] by User[${comment.author_id}] was Status[${status}]`);
+
+    switch (status) {
+    case 'REJECTED':
+
+      // Reduce the user's karma.
+      debug(`CommentUser[${comment.author_id}] had their karma reduced`);
+
+      // Decrease the flag user's karma, the moderator disagreed with this
+      // action.
+      debug(`FlaggingUser[${flagUserIDs.join(', ')}] had their karma increased`);
+      await Promise.all([
+        KarmaService.modifyUser(comment.author_id, -1, 'comment'),
+        KarmaService.modifyUser(flagUserIDs, 1, 'flag', true)
+      ]);
+
+      break;
+
+    case 'ACCEPTED':
+
+      // Increase the user's karma.
+      debug(`CommentUser[${comment.author_id}] had their karma increased`);
+
+      // Increase the flag user's karma, the moderator agreed with this
+      // action.
+      debug(`FlaggingUser[${flagUserIDs.join(', ')}] had their karma reduced`);
+      await Promise.all([
+        KarmaService.modifyUser(comment.author_id, 1, 'comment'),
+        KarmaService.modifyUser(flagUserIDs, -1, 'flag', true)
+      ]);
+
+      break;
+
+    }
+
+    return;
+  } catch (e) {
+    console.error(e);
+  }
+};
+
 /**
  * Creates a new comment.
  * @param  {Object} user          the user performing the request
@@ -86,6 +165,7 @@ const filterNewComment = (context, {body, asset_id}) => {
  * @return {Promise}              resolves to the comment's status
  */
 const resolveNewCommentStatus = async (context, {asset_id, body}, wordlist = {}, settings = {}) => {
+  let {user} = context;
 
   // Check to see if the body is too short, if it is, then complain about it!
   if (body.length < 2) {
@@ -123,6 +203,22 @@ const resolveNewCommentStatus = async (context, {asset_id, body}, wordlist = {},
     return 'REJECTED';
   }
 
+  if (user && user.metadata) {
+
+    // If the user is not a reliable commenter (passed the unreliability
+    // threshold by having too many rejected comments) then we can change the
+    // status of the comment to `PREMOD`, therefore pushing the user's comments
+    // away from the public eye until a moderator can manage them. This of
+    // course can only be applied if the comment's current status is `NONE`,
+    // we don't want to interfere if the comment was rejected.
+    if (KarmaService.isReliable('comment', user.metadata.trust) === false) {
+
+      // Update the response from the comment creation to add the PREMOD so that
+      // that user's UI will reflect the fact that their comment is in pre-mod.
+      return 'PREMOD';
+    }
+  }
+
   return moderation === 'PRE' ? 'PREMOD' : 'NONE';
 };
 
@@ -179,7 +275,6 @@ const createPublicComment = async (context, commentInput) => {
  * @param {String} id          identifier of the comment  (uuid)
  * @param {String} status      the new status of the comment
  */
-
 const setStatus = async ({user, loaders: {Comments}}, {id, status}) => {
   let comment = await CommentsService.pushStatus(id, status, user ? user.id : null);
 
@@ -196,6 +291,10 @@ const setStatus = async ({user, loaders: {Comments}}, {id, status}) => {
 
   Comments.countByAssetID.clear(comment.asset_id);
 
+  // postSetCommentStatus will use the arguments from the mutation and
+  // adjust the affected user's karma in the next tick.
+  process.nextTick(adjustKarma(Comments, id, status));
+
   return comment;
 };
 
diff --git a/graph/resolvers/user.js b/graph/resolvers/user.js
index 9b25c812f..b9b72501e 100644
--- a/graph/resolvers/user.js
+++ b/graph/resolvers/user.js
@@ -1,3 +1,5 @@
+const KarmaService = require('../../services/karma');
+
 const User = {
   action_summaries({id}, _, {loaders: {Actions}}) {
     return Actions.getSummariesByItemID.load(id);
@@ -43,6 +45,13 @@ const User = {
     }
 
     return null;
+  },
+
+  // Extract the reliability from the user metadata if they have permission.
+  reliable(user, _, {user: requestingUser}) {
+    if (requestingUser && requestingUser.hasRoles('ADMIN')) {
+      return KarmaService.model(user);
+    }
   }
 };
 
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index f51258eb1..a9348f706 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -5,6 +5,22 @@
 # Date represented as an ISO8601 string.
 scalar Date
 
+################################################################################
+## Reliability
+################################################################################
+
+# Reliability defines how a given user should be considered reliable for their
+# comment or flag activity.
+type Reliability {
+
+  # flagger will be `true` when the flagger is reliable, `false` if not, or
+  # `null` if the reliability cannot be determined.
+  flagger: Boolean
+
+  # commenter will be `true` when the commenter is reliable, `false` if not, or
+  # `null` if the reliability cannot be determined.
+  commenter: Boolean
+}
 
 ################################################################################
 ## Users
@@ -48,6 +64,11 @@ type User {
   # returns all comments based on a query.
   comments(query: CommentsQuery): [Comment!]
 
+  # reliable is the reference to a given user's Reliability. If the requesting
+  # user does not have permission to access the reliability, null will be
+  # returned.
+  reliable: Reliability
+
   # returns user status
   status: USER_STATUS
 }
diff --git a/services/karma.js b/services/karma.js
new file mode 100644
index 000000000..ea932c86a
--- /dev/null
+++ b/services/karma.js
@@ -0,0 +1,155 @@
+const debug = require('debug')('talk:trust');
+const UserModel = require('../models/user');
+
+/**
+ * This will create an object with the property name of the action type as the
+ * key and an object as it's value. This will contain a RELIABLE, and UNRELIABLE
+ * property with the number of karma points associated with their particular
+ * state.
+ * 
+ * If only the RELIABLE variable is provided, then it will also be used as the
+ * UNRELIABLE variable.
+ * 
+ * The form of the environment variable is:
+ * 
+ *  <name>:<RELIABLE>,<UNRELIABLE>;<name>:<RELIABLE>,<UNRELIABLE>;...
+ * 
+ * The default used is:
+ * 
+ *  comment:1,1;flag:-1,-1
+ */
+const parseThresholds = (thresholds) => thresholds
+  .split(';')
+  .filter((threshold) => threshold && threshold.length > 0)
+  .reduce((acc, threshold) => {
+    const thresholds = threshold.split(':');
+    if (thresholds.length < 2) {
+      return acc;
+    }
+
+    let [name, values] = thresholds;
+    let [RELIABLE, UNRELIABLE] = values.split(',').map((value) => parseInt(value));
+
+    if (!(name in acc)) {
+      acc[name] = {};
+    }
+
+    if (isNaN(UNRELIABLE) && !isNaN(RELIABLE)) {
+      acc[name].RELIABLE = RELIABLE;
+      acc[name].UNRELIABLE = RELIABLE;
+    } else {
+      if (!isNaN(UNRELIABLE)) {
+        acc[name].UNRELIABLE = UNRELIABLE;
+      }
+
+      if (!isNaN(RELIABLE)) {
+        acc[name].RELIABLE = RELIABLE;
+      }
+    }
+
+    return acc;
+  }, {
+    comment: {
+      RELIABLE: -1,
+      UNRELIABLE: -1
+    },
+    flag: {
+      RELIABLE: -1,
+      UNRELIABLE: -1
+    }
+  });
+
+const THRESHOLDS = parseThresholds(process.env.TRUST_THRESHOLDS || '');
+
+debug('using thresholds: ', THRESHOLDS);
+
+/**
+ * KarmaModel represents the checkable properties of a user and wrapps the
+ * KarmaService function `isReliable` to work flexibly with the graph.
+ */
+class KarmaModel {
+  constructor(model) {
+    this.model = model;
+  }
+
+  get flagger() {
+    return KarmaService.isReliable('flag', this.model);
+  }
+
+  get commenter() {
+    return KarmaService.isReliable('comment', this.model);
+  }
+}
+
+/**
+ * KarmaService provides interfaces for editing a user's karma.
+ */
+class KarmaService {
+
+  /**
+   * Model returns a KarmaModel based on the passed in user.
+   */
+  static model(user) {
+    if (user === null || !user.metadata || !user.metadata.trust) {
+      return new KarmaModel({});
+    }
+
+    return new KarmaModel(user.metadata.trust);
+  }
+
+  /**
+   * Inspects the reliability of a property and returns it if known.
+   * @param {String} name - name of the property
+   * @param {Object} trust - object possibly containing the propertys
+   */
+  static isReliable(name, trust) {
+    if (trust && trust[name]) {
+      if (trust[name].karma > THRESHOLDS[name].RELIABLE) {
+        return true;
+      } else if (trust[name].karma < THRESHOLDS[name].UNRELIABLE) {
+        return false;
+      }
+    } else if (THRESHOLDS[name].RELIABLE < 0) {
+      return true;
+    } else if (THRESHOLDS[name].UNRELIABLE > 0) {
+      return false;
+    }
+
+    return null;
+  }
+
+  /**
+   * modifyUserKarma updates the user to adjust their karma, for either the `type`
+   * of 'comment' or 'flag'. If `multi` is true, then it assumes that `id` is an
+   * array of id's.
+   */
+  static async modifyUser(id, direction = 1, type = 'comment', multi = false) {
+    const key = `metadata.trust.${type}.karma`;
+
+    let update = {
+      $inc: {
+        [key]: direction
+      }
+    };
+
+    if (multi) {
+
+      // If it was in multi-mode but there was no user's to adjust, bail.
+      if (id.length <= 0) {
+        return;
+      }
+
+      return UserModel.update({
+        id: {
+          $in: id
+        }
+      }, update, {
+        multi: true
+      });
+    }
+
+    return UserModel.update({id}, update);
+  }
+}
+
+module.exports = KarmaService;

From 4d3788e4c96a8cc54642eaae778053338af3fce8 Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Mon, 15 May 2017 16:25:32 -0600
Subject: [PATCH 13/58] saving my place so i dont have too many threads

---
 .../src/containers/LayoutContainer.js         |  2 +
 client/coral-framework/utils/roles.js         | 36 ++++++++++----
 graph/resolvers/action.js                     |  2 +-
 models/user.js                                |  9 +---
 perms/index.js                                | 48 +++++++++++++++++++
 perms/mutationReducer.js                      | 48 +++++++++++++++++++
 perms/queryReducer.js                         | 36 ++++++++++++++
 perms/rootReducer.js                          | 12 +++++
 8 files changed, 177 insertions(+), 16 deletions(-)
 create mode 100644 perms/index.js
 create mode 100644 perms/mutationReducer.js
 create mode 100644 perms/queryReducer.js
 create mode 100644 perms/rootReducer.js

diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js
index 8a3e0b0d2..b72acb59c 100644
--- a/client/coral-admin/src/containers/LayoutContainer.js
+++ b/client/coral-admin/src/containers/LayoutContainer.js
@@ -38,6 +38,8 @@ class LayoutContainer extends Component {
     }
     if (roleUtils.canAccessAdmin(user) && loggedIn) {
       return <Layout handleLogout={handleLogout} toggleShortcutModal={toggleShortcutModal} {...this.props} />;
+    } else if (loggedIn) {
+      return <p>you do not have permission to see this page.</p>;
     }
     return <FullLoading />;
   }
diff --git a/client/coral-framework/utils/roles.js b/client/coral-framework/utils/roles.js
index b457ff1b3..63d34fb41 100644
--- a/client/coral-framework/utils/roles.js
+++ b/client/coral-framework/utils/roles.js
@@ -1,10 +1,30 @@
-import includes from 'lodash/includes';
+import intersection from 'lodash/intersection';
 
-export default {
-  canAccessConfig: (user) => includes(user.roles, 'ADMIN'),
-  canChangeRoles: user => includes(user.roles, 'ADMIN'),
-  hasStaffTag: user => includes(user.roles, 'ADMIN', 'MODERATOR', 'STAFF'),
-  canViewUserEmails: user => includes(user.roles, 'ADMIN'),
-  canModerate: user => includes(user.roles, 'ADMIN', 'MODERATOR'),
-  canAccessAdmin: user => includes(user.roles, 'ADMIN', 'MODERATOR')
+const basicRoles = {
+  hasStaffTag: ['ADMIN', 'MODERATOR', 'STAFF']
+};
+
+const queryRoles = {
+  canAccessConfig: ['ADMIN', 'MODERATOR'],
+  canAccessAdmin: ['ADMIN', 'MODERATOR'],
+  canViewUserEmails: ['ADMIN']
+};
+
+const mutationRoles = {
+  canChangeRoles: ['ADMIN'],
+  canModerateComments: ['ADMIN', 'MODERATOR']
+};
+
+const roles = {...basicRoles, ...queryRoles, ...mutationRoles};
+
+export const can = (user, perms) => {
+  for (let perm in perms) {
+    const role = roles[perm];
+    if (typeof role === 'undefined') {
+      continue;
+    }
+    let grant = intersection(role, user.roles).length > 0;
+    return grant;
+  }
+  return false;
 };
diff --git a/graph/resolvers/action.js b/graph/resolvers/action.js
index 393024fe1..cf7be3beb 100644
--- a/graph/resolvers/action.js
+++ b/graph/resolvers/action.js
@@ -11,7 +11,7 @@ const Action = {
   // This will load the user for the specific action. We'll limit this to the
   // admin users only or the current logged in user.
   user({user_id}, _, {loaders: {Users}, user}) {
-    if (user && (user.hasRole('ADMIN') || user_id === user.id)) {
+    if (user && (user.canViewOtherUsers() || user_id === user.id)) {
       return Users.getByID.load(user_id);
     }
   }
diff --git a/models/user.js b/models/user.js
index 179e6f7a5..ab88fe6f1 100644
--- a/models/user.js
+++ b/models/user.js
@@ -2,6 +2,7 @@ const mongoose = require('../services/mongoose');
 const bcrypt = require('bcrypt');
 const uuid = require('uuid');
 const intersection = require('lodash/intersection');
+const can = require('../perms');
 
 // USER_ROLES is the array of roles that is permissible as a user role.
 const USER_ROLES = [
@@ -269,13 +270,7 @@ const USER_GRAPH_OPERATIONS = [
  * operation.
  */
 UserSchema.method('can', function(...actions) {
-  if (actions.some((action) => USER_GRAPH_OPERATIONS.indexOf(action) === -1)) {
-    throw new Error(`invalid actions: ${actions}`);
-  }
-
-  if (this.status === 'BANNED') {
-    return false;
-  }
+  return can(this, null, actions);
 
   if (actions.some((action) => action === 'mutation:setUserStatus' || action === 'mutation:suspendUser' || action === 'mutation:setCommentStatus') && !this.canSetUserStatus()) {
     return false;
diff --git a/perms/index.js b/perms/index.js
new file mode 100644
index 000000000..c9b29ea85
--- /dev/null
+++ b/perms/index.js
@@ -0,0 +1,48 @@
+const root = require('./rootReducer');
+const queries = require('./queryReducer');
+const mutations = require('./mutationReducer');
+
+const reducers = [
+  root.reducer,
+  queries.reducer,
+  mutations.reducer
+];
+
+const allPermissions = [...root.constants, ...queries.constants, ...mutations.constants];
+
+const findGrant = (user, perms, context, initialState) => {
+  return perms.every(perm => {
+
+    for (let reducer in reducers) {
+      const grant = reducer(user, perm, context, initialState);
+
+      if (grant !== null && typeof grant !== 'undefined') {
+        return grant;
+      }
+    }
+
+    return false;
+  });
+};
+
+/**
+ * returns true, false, or null depending on whether the user has those permissions
+ * throws an error if you pass a permission that's not known to the system
+ * @param  {User} user          the user making the request for db operations
+ * @param  {[type]} context     [description]
+ * @param  {String/Array} perms a string an array of strings which are the names of the permissions
+ * @return {Boolean}
+ */
+module.exports = (user, context, ...perms) => {
+
+  // make sure all the passed permissions are not typos
+  const missingPerms = perms.filter(perm => {
+    return typeof allPermissions[perm] === 'undefined';
+  });
+
+  if (missingPerms.length) {
+    throw new Error(`${missingPerms.join(' ')} are not valid permissions.`);
+  }
+
+  return findGrant(user, perms, context, null);
+};
diff --git a/perms/mutationReducer.js b/perms/mutationReducer.js
new file mode 100644
index 000000000..75eb22400
--- /dev/null
+++ b/perms/mutationReducer.js
@@ -0,0 +1,48 @@
+const intersection = require('lodash/intersection');
+const check = (user, roles) => {
+  return !!intersection(roles, user.roles).length;
+};
+
+const CREATE_COMMENT = 'CREATE_COMMENT';
+const CREATE_ACTION = 'CREATE_ACTION';
+const DELETE_ACTION = 'DELETE_ACTION';
+const EDIT_NAME = 'EDIT_NAME';
+const SET_USER_STATUS = 'SET_USER_STATUS';
+const SUSPEND_USER = 'SUSPEND_USER';
+const SET_COMMENT_STATUS = 'SET_COMMENT_STATUS';
+const ADD_COMMENT_TAG = 'ADD_COMMENT_TAG';
+const REMOVE_COMMENT_TAG = 'REMOVE_COMMENT_TAG';
+const UPDATE_CONFIG = 'UPDATE_CONFIG';
+
+module.exports = {
+  constants: [
+    CREATE_COMMENT, CREATE_ACTION, DELETE_ACTION, EDIT_NAME, SET_USER_STATUS,
+    SUSPEND_USER, SET_COMMENT_STATUS, ADD_COMMENT_TAG, REMOVE_COMMENT_TAG, UPDATE_CONFIG
+  ],
+  reducer: (user, perm, context, initialState) => {
+    switch (perm) {
+    case 'muation:createComment':
+      return true;
+    case 'mutation:createAction':
+      return true;
+    case 'mutation:deleteAction':
+      return true;
+    case 'mutation:editName':
+      return true;
+    case 'mutation:setUserStatus':
+      return check(user, ['ADMIN', 'MODERATOR']);
+    case 'mutation:suspendUser':
+      return check(user, ['ADMIN', 'MODERATOR']);
+    case 'mutation:setCommentStatus':
+      return check(user, ['ADMIN', 'MODERATOR']);
+    case 'mutation:addCommentTag':
+      return check(user, ['ADMIN', 'MODERATOR']);
+    case 'mutation:removeCommentTag':
+      return check(user, ['ADMIN', 'MODERATOR']);
+    case 'mutation:updateConfig':
+      return check(user, ['ADMIN', 'MODERATOR']);
+    default:
+      return initialState;
+    }
+  }
+};
diff --git a/perms/queryReducer.js b/perms/queryReducer.js
new file mode 100644
index 000000000..b80a61ea7
--- /dev/null
+++ b/perms/queryReducer.js
@@ -0,0 +1,36 @@
+const intersection = require('lodash/intersection');
+const check = (user, roles) => {
+  return !!intersection(roles, user.roles).length;
+};
+
+const SEARCH_ASSETS = 'SEARCH_ASSETS';
+const SEARCH_OTHER_USERS = 'SEARCH_OTHER_USERS';
+const SEARCH_ACTIONS = 'SEARCH_ACTIONS';
+const SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS = 'SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS';
+const SEARCH_OTHERS_COMMENTS = 'SEARCH_OTHERS_COMMENTS';
+const SEARCH_COMMENT_METRICS = 'SEARCH_COMMENT_METRICS';
+
+module.exports = {
+  constants: [
+    SEARCH_ASSETS, SEARCH_OTHER_USERS, SEARCH_ACTIONS, SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS,
+    SEARCH_OTHERS_COMMENTS, SEARCH_COMMENT_METRICS
+  ],
+  reducer: (perm, user, context, initialState) => {
+    switch (perm) {
+    case SEARCH_ASSETS:
+      return check(user, ['ADMIN', 'MODERATOR']);
+    case SEARCH_OTHER_USERS:
+      return check(user, ['ADMIN', 'MODERATOR']);
+    case SEARCH_ACTIONS:
+      return check(user, ['ADMIN', 'MODERATOR']);
+    case SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS:
+      return check(user, ['ADMIN', 'MODERATOR']);
+    case SEARCH_OTHERS_COMMENTS:
+      return check(user, ['ADMIN', 'MODERATOR']);
+    case SEARCH_COMMENT_METRICS:
+      return check(user, ['ADMIN', 'MODERATOR']);
+    default:
+      return initialState;
+    }
+  }
+};
diff --git a/perms/rootReducer.js b/perms/rootReducer.js
new file mode 100644
index 000000000..b46b6e82a
--- /dev/null
+++ b/perms/rootReducer.js
@@ -0,0 +1,12 @@
+module.exports = {
+  constants: [],
+  reducer: (perm, user, context, initialState) => {
+
+    // this runs before everything
+    if (user.status === 'BANNED') {
+      return false;
+    }
+
+    return initialState;
+  }
+};

From 62e8e4c5c57bf43e80d9fd478b91d02b3822c4ab Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Tue, 16 May 2017 10:15:43 -0600
Subject: [PATCH 14/58] change how constants are exposed

---
 perms/index.js           |  3 ++-
 perms/mutationReducer.js | 27 +++++++++++----------------
 perms/queryReducer.js    | 31 +++++++++++++------------------
 perms/rootReducer.js     |  3 +--
 4 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/perms/index.js b/perms/index.js
index c9b29ea85..b2baf00ec 100644
--- a/perms/index.js
+++ b/perms/index.js
@@ -8,7 +8,8 @@ const reducers = [
   mutations.reducer
 ];
 
-const allPermissions = [...root.constants, ...queries.constants, ...mutations.constants];
+// this will make 'reducer' a key in this array. hm.
+const allPermissions = [...Object.keys(root), ...Object.keys(queries), ...Object.keys(mutations)];
 
 const findGrant = (user, perms, context, initialState) => {
   return perms.every(perm => {
diff --git a/perms/mutationReducer.js b/perms/mutationReducer.js
index 75eb22400..7e3c1b3cd 100644
--- a/perms/mutationReducer.js
+++ b/perms/mutationReducer.js
@@ -3,23 +3,18 @@ const check = (user, roles) => {
   return !!intersection(roles, user.roles).length;
 };
 
-const CREATE_COMMENT = 'CREATE_COMMENT';
-const CREATE_ACTION = 'CREATE_ACTION';
-const DELETE_ACTION = 'DELETE_ACTION';
-const EDIT_NAME = 'EDIT_NAME';
-const SET_USER_STATUS = 'SET_USER_STATUS';
-const SUSPEND_USER = 'SUSPEND_USER';
-const SET_COMMENT_STATUS = 'SET_COMMENT_STATUS';
-const ADD_COMMENT_TAG = 'ADD_COMMENT_TAG';
-const REMOVE_COMMENT_TAG = 'REMOVE_COMMENT_TAG';
-const UPDATE_CONFIG = 'UPDATE_CONFIG';
-
 module.exports = {
-  constants: [
-    CREATE_COMMENT, CREATE_ACTION, DELETE_ACTION, EDIT_NAME, SET_USER_STATUS,
-    SUSPEND_USER, SET_COMMENT_STATUS, ADD_COMMENT_TAG, REMOVE_COMMENT_TAG, UPDATE_CONFIG
-  ],
-  reducer: (user, perm, context, initialState) => {
+  CREATE_COMMENT: 'CREATE_COMMENT',
+  CREATE_ACTION: 'CREATE_ACTION',
+  DELETE_ACTION: 'DELETE_ACTION',
+  EDIT_NAME: 'EDIT_NAME',
+  SET_USER_STATUS: 'SET_USER_STATUS',
+  SUSPEND_USER: 'SUSPEND_USER',
+  SET_COMMENT_STATUS: 'SET_COMMENT_STATUS',
+  ADD_COMMENT_TAG: 'ADD_COMMENT_TAG',
+  REMOVE_COMMENT_TAG: 'REMOVE_COMMENT_TAG',
+  UPDATE_CONFIG: 'UPDATE_CONFIG',
+  reducer: function (user, perm, context, initialState) {
     switch (perm) {
     case 'muation:createComment':
       return true;
diff --git a/perms/queryReducer.js b/perms/queryReducer.js
index b80a61ea7..9e97c8ec4 100644
--- a/perms/queryReducer.js
+++ b/perms/queryReducer.js
@@ -3,31 +3,26 @@ const check = (user, roles) => {
   return !!intersection(roles, user.roles).length;
 };
 
-const SEARCH_ASSETS = 'SEARCH_ASSETS';
-const SEARCH_OTHER_USERS = 'SEARCH_OTHER_USERS';
-const SEARCH_ACTIONS = 'SEARCH_ACTIONS';
-const SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS = 'SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS';
-const SEARCH_OTHERS_COMMENTS = 'SEARCH_OTHERS_COMMENTS';
-const SEARCH_COMMENT_METRICS = 'SEARCH_COMMENT_METRICS';
-
 module.exports = {
-  constants: [
-    SEARCH_ASSETS, SEARCH_OTHER_USERS, SEARCH_ACTIONS, SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS,
-    SEARCH_OTHERS_COMMENTS, SEARCH_COMMENT_METRICS
-  ],
-  reducer: (perm, user, context, initialState) => {
+  SEARCH_ASSETS: 'SEARCH_ASSETS',
+  SEARCH_OTHER_USERS: 'SEARCH_OTHER_USERS',
+  SEARCH_ACTIONS: 'SEARCH_ACTIONS',
+  SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS: 'SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS',
+  SEARCH_OTHERS_COMMENTS: 'SEARCH_OTHERS_COMMENTS',
+  SEARCH_COMMENT_METRICS: 'SEARCH_COMMENT_METRICS',
+  reducer: function (perm, user, context, initialState) {
     switch (perm) {
-    case SEARCH_ASSETS:
+    case this.SEARCH_ASSETS:
       return check(user, ['ADMIN', 'MODERATOR']);
-    case SEARCH_OTHER_USERS:
+    case this.SEARCH_OTHER_USERS:
       return check(user, ['ADMIN', 'MODERATOR']);
-    case SEARCH_ACTIONS:
+    case this.SEARCH_ACTIONS:
       return check(user, ['ADMIN', 'MODERATOR']);
-    case SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS:
+    case this.SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS:
       return check(user, ['ADMIN', 'MODERATOR']);
-    case SEARCH_OTHERS_COMMENTS:
+    case this.SEARCH_OTHERS_COMMENTS:
       return check(user, ['ADMIN', 'MODERATOR']);
-    case SEARCH_COMMENT_METRICS:
+    case this.SEARCH_COMMENT_METRICS:
       return check(user, ['ADMIN', 'MODERATOR']);
     default:
       return initialState;
diff --git a/perms/rootReducer.js b/perms/rootReducer.js
index b46b6e82a..e8552c765 100644
--- a/perms/rootReducer.js
+++ b/perms/rootReducer.js
@@ -1,6 +1,5 @@
 module.exports = {
-  constants: [],
-  reducer: (perm, user, context, initialState) => {
+  reducer: function (perm, user, context, initialState) {
 
     // this runs before everything
     if (user.status === 'BANNED') {

From e90ce7f4c3265cbc052470680d79bf2e6be4915c Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 16 May 2017 10:20:16 -0600
Subject: [PATCH 15/58] fixed merge issue

---
 graph/resolvers/root_query.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js
index 34928ee52..7fd072854 100644
--- a/graph/resolvers/root_query.js
+++ b/graph/resolvers/root_query.js
@@ -79,19 +79,6 @@ const RootQuery = {
     return user;
   },
 
-  myIgnoredUsers: async (_, args, {user, loaders: {Users}}) => {
-    if (!user) {
-      return null;
-    }
-
-    // get currentUser again since context.user was out of date when running test/graph/mutations/ignoreUser
-    const currentUser = (await Users.getByQuery({ids: [user.id], limit: 1}))[0];
-    if (!(currentUser && Array.isArray(currentUser.ignoresUsers) && currentUser.ignoresUsers.length)) {
-      return [];
-    }
-    return await Users.getByQuery({ids: currentUser.ignoresUsers});
-  },
-
   // this returns an arbitrary user
   user(_, {id}, {user, loaders: {Users}}) {
     if (user == null || !user.hasRoles('ADMIN')) {

From c7e9fe3f5fb52979feb3a3ba3b1d1ea605f742ff Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Tue, 16 May 2017 10:50:09 -0600
Subject: [PATCH 16/58] update backend with the can() method

---
 graph/loaders/comments.js     |  6 +--
 graph/mutators/action.js      |  2 +-
 graph/mutators/comment.js     |  8 +--
 graph/mutators/user.js        |  4 +-
 graph/resolvers/action.js     |  2 +-
 graph/resolvers/comment.js    |  2 +-
 graph/resolvers/root_query.js | 12 ++---
 graph/resolvers/user.js       |  6 +--
 models/user.js                | 91 -----------------------------------
 perms/mutationReducer.js      | 23 +++++----
 10 files changed, 34 insertions(+), 122 deletions(-)

diff --git a/graph/loaders/comments.js b/graph/loaders/comments.js
index b09dbc497..2287527e6 100644
--- a/graph/loaders/comments.js
+++ b/graph/loaders/comments.js
@@ -226,7 +226,7 @@ const getCommentsByQuery = async ({user}, {ids, statuses, asset_id, parent_id, a
 
   // Only administrators can search for comments with statuses that are not
   // `null`, or `'ACCEPTED'`.
-  if (user != null && user.canViewNonNullOrAcceptedComments() && statuses) {
+  if (user != null && user.can('SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS') && statuses) {
     comments = comments.where({
       status: {
         $in: statuses
@@ -249,7 +249,7 @@ const getCommentsByQuery = async ({user}, {ids, statuses, asset_id, parent_id, a
   }
 
   // Only let an admin request any user or the current user request themself.
-  if (user && (user.canViewOthersComments() || user.id === author_id) && author_id != null) {
+  if (user && (user.can('SEARCH_OTHERS_COMMENTS') || user.id === author_id) && author_id != null) {
     comments = comments.where({author_id});
   }
 
@@ -403,7 +403,7 @@ const genRecentComments = (_, ids) => {
  */
 const genComments = ({user}, ids) => {
   let comments;
-  if (user && user.canViewOthersComments()) {
+  if (user && user.can('SEARCH_OTHERS_COMMENTS')) {
     comments = CommentModel.find({
       id: {
         $in: ids
diff --git a/graph/mutators/action.js b/graph/mutators/action.js
index a572a641c..dc3fe1a70 100644
--- a/graph/mutators/action.js
+++ b/graph/mutators/action.js
@@ -45,7 +45,7 @@ const deleteAction = ({user}, {id}) => {
 };
 
 module.exports = (context) => {
-  if (context.user && context.user.can('mutation:createAction', 'mutation:deleteAction')) {
+  if (context.user && context.user.can('CREATE_ACTION', 'DELETE_ACTION')) {
     return {
       Action: {
         create: (action) => createAction(context, action),
diff --git a/graph/mutators/comment.js b/graph/mutators/comment.js
index 9557c1dcf..51ebc5a4f 100644
--- a/graph/mutators/comment.js
+++ b/graph/mutators/comment.js
@@ -236,19 +236,19 @@ module.exports = (context) => {
     }
   };
 
-  if (context.user && context.user.can('mutation:createComment')) {
+  if (context.user && context.user.can('CREATE_COMMENT')) {
     mutators.Comment.create = (comment) => createPublicComment(context, comment);
   }
 
-  if (context.user && context.user.can('mutation:setCommentStatus')) {
+  if (context.user && context.user.can('SET_COMMENT_STATUS')) {
     mutators.Comment.setCommentStatus = (action) => setCommentStatus(context, action);
   }
 
-  if (context.user && context.user.can('mutation:addCommentTag')) {
+  if (context.user && context.user.can('ADD_COMMENT_TAG')) {
     mutators.Comment.addCommentTag = (action) => addCommentTag(context, action);
   }
 
-  if (context.user && context.user.can('mutation:removeCommentTag')) {
+  if (context.user && context.user.can('REMOVE_COMMENT_TAG')) {
     mutators.Comment.removeCommentTag = (action) => removeCommentTag(context, action);
   }
 
diff --git a/graph/mutators/user.js b/graph/mutators/user.js
index d68351701..c5819fded 100644
--- a/graph/mutators/user.js
+++ b/graph/mutators/user.js
@@ -31,11 +31,11 @@ module.exports = (context) => {
     }
   };
 
-  if (context.user && context.user.can('mutation:setUserStatus')) {
+  if (context.user && context.user.can('SET_USER_STATUS')) {
     mutators.User.setUserStatus = (action) => setUserStatus(context, action);
   }
 
-  if (context.user && context.user.can('mutation:suspendUser')) {
+  if (context.user && context.user.can('SUSPEND_USER')) {
     mutators.User.suspendUser = (action) => suspendUser(context, action);
   }
 
diff --git a/graph/resolvers/action.js b/graph/resolvers/action.js
index cf7be3beb..2814dc85f 100644
--- a/graph/resolvers/action.js
+++ b/graph/resolvers/action.js
@@ -11,7 +11,7 @@ const Action = {
   // This will load the user for the specific action. We'll limit this to the
   // admin users only or the current logged in user.
   user({user_id}, _, {loaders: {Users}, user}) {
-    if (user && (user.canViewOtherUsers() || user_id === user.id)) {
+    if (user && (user.can('SEARCH_OTHER_USERS') || user_id === user.id)) {
       return Users.getByID.load(user_id);
     }
   }
diff --git a/graph/resolvers/comment.js b/graph/resolvers/comment.js
index fb01a1585..2a678469b 100644
--- a/graph/resolvers/comment.js
+++ b/graph/resolvers/comment.js
@@ -29,7 +29,7 @@ const Comment = {
   },
   actions({id}, _, {user, loaders: {Actions}}) {
 
-    if (user && user.canViewActions()) {
+    if (user && user.can('SEARCH_ACTIONS')) {
       return Actions.getByID.load(id);
     }
 
diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js
index 9deaba5f6..3f76cb9d2 100644
--- a/graph/resolvers/root_query.js
+++ b/graph/resolvers/root_query.js
@@ -1,6 +1,6 @@
 const RootQuery = {
   assets(_, args, {loaders: {Assets}, user}) {
-    if (user == null || !user.canQueryAssets()) {
+    if (user == null || !user.can('SEARCH_ASSETS')) {
       return null;
     }
 
@@ -22,7 +22,7 @@ const RootQuery = {
   comments(_, {query: {action_type, statuses, asset_id, parent_id, limit, cursor, sort, excludeIgnored}}, {user, loaders: {Comments, Actions}}) {
     let query = {statuses, asset_id, parent_id, limit, cursor, sort, excludeIgnored};
 
-    if (user != null && user.canViewOthersComments() && action_type) {
+    if (user != null && user.can('SEARCH_OTHERS_COMMENTS') && action_type) {
       return Actions.getByTypes({action_type, item_type: 'COMMENTS'})
         .then((ids) => {
 
@@ -37,7 +37,7 @@ const RootQuery = {
     return Comments.get.load(id);
   },
   commentCount(_, {query: {action_type, statuses, asset_id, parent_id}}, {user, loaders: {Actions, Comments}}) {
-    if (user == null || !user.canViewOthersComments()) {
+    if (user == null || !user.can('SEARCH_OTHERS_COMMENTS')) {
       return null;
     }
 
@@ -54,7 +54,7 @@ const RootQuery = {
   },
 
   assetMetrics(_, {from, to, sort, limit = 10}, {user, loaders: {Metrics: {Assets}}}) {
-    if (user == null || !user.canQueryAssets()) {
+    if (user == null || !user.can('SEARCH_ASSETS')) {
       return null;
     }
 
@@ -66,7 +66,7 @@ const RootQuery = {
   },
 
   commentMetrics(_, {from, to, sort, limit = 10}, {user, loaders: {Metrics: {Comments}}}) {
-    if (user == null || !user.canViewCommentMetrics()) {
+    if (user == null || !user.can('SEARCH_COMMENT_METRICS')) {
       return null;
     }
 
@@ -100,7 +100,7 @@ const RootQuery = {
   // so hide it in the event that we aren't an admin.
   users(_, {query: {action_type, limit, cursor, sort}}, {user, loaders: {Users, Actions}}) {
 
-    if (user == null || !user.canViewOtherUsers()) {
+    if (user == null || !user.can('SEARCH_OTHER_USERS')) {
       return null;
     }
 
diff --git a/graph/resolvers/user.js b/graph/resolvers/user.js
index 03e1b121a..faec4bd75 100644
--- a/graph/resolvers/user.js
+++ b/graph/resolvers/user.js
@@ -5,7 +5,7 @@ const User = {
   actions({id}, _, {user, loaders: {Actions}}) {
 
     // Only return the actions if the user is not an admin.
-    if (user && user.canViewActions()) {
+    if (user && user.can('SEARCH_ACTIONS')) {
       return Actions.getByID.load(id);
     }
 
@@ -14,7 +14,7 @@ const User = {
 
     // If the user is not an admin, only return comment list for the owner of
     // the comments.
-    if (user && (user.canViewOthersComments() || user.id === id)) {
+    if (user && (user.can('SEARCH_OTHERS_COMMENTS') || user.id === id)) {
       return Comments.getByQuery({author_id: id, sort: 'REVERSE_CHRONOLOGICAL'});
     }
 
@@ -23,7 +23,7 @@ const User = {
   roles({id, roles}, _, {user}) {
 
     // If the user is not an admin, only return the current user's roles.
-    if (user && (user.canChangeRoles() || user.id === id)) {
+    if (user && (user.can('UPDATE_USER_ROLES') || user.id === id)) {
       return roles;
     }
 
diff --git a/models/user.js b/models/user.js
index ab88fe6f1..932d11775 100644
--- a/models/user.js
+++ b/models/user.js
@@ -159,41 +159,6 @@ UserSchema.index({
   background: false
 });
 
-/**
- * returns true if the user can look up assets through the api
- */
-UserSchema.method('canQueryAssets', function () {
-  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
-});
-
-/**
- * returns true if the user can view actions
- */
-UserSchema.method('canViewActions', function () {
-  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
-});
-
-/**
- * returns true if the user can view non-null or non-ACCEPTED comments
- */
-UserSchema.method('canViewNonNullOrAcceptedComments', function () {
-  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
-});
-
-/**
- * returns true when a user can view comments that are not their own
- */
-UserSchema.method('canViewOthersComments', function () {
-  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
-});
-
-/**
- * returns true when a user can view comment metrics
- */
-UserSchema.method('canViewCommentMetrics', function () {
-  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
-});
-
 /**
  * returns true if a commenter is staff
  */
@@ -201,35 +166,6 @@ UserSchema.method('isStaff', function () {
   return !!intersection(['ADMIN', 'MODERATOR', 'STAFF'], this.roles).length;
 });
 
-/**
- * returns true when a user can see other user info
- */
-UserSchema.method('canViewOtherUsers', function () {
-  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
-});
-
-/**
- * when a user can modify tags
- */
-UserSchema.method('canModifyTags', function () {
-  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
-});
-
-/**
- * when a user can change roles
- */
-UserSchema.method('canChangeUserRoles', function () {
-  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
-});
-
-UserSchema.method('canSetCommentStatus', function () {
-  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
-});
-
-UserSchema.method('canSetUserStatus', function () {
-  return !!intersection(['ADMIN', 'MODERATOR'], this.roles).length;
-});
-
 /**
  * This verifies that a password is valid.
  */
@@ -249,39 +185,12 @@ UserSchema.method('verifyPassword', function(password) {
   });
 });
 
-/**
- * All the graph operations that are available for a user.
- * @type {Array}
- */
-const USER_GRAPH_OPERATIONS = [
-  'mutation:createComment',
-  'mutation:createAction',
-  'mutation:deleteAction',
-  'mutation:editName',
-  'mutation:setUserStatus',
-  'mutation:suspendUser',
-  'mutation:setCommentStatus',
-  'mutation:addCommentTag',
-  'mutation:removeCommentTag'
-];
-
 /**
  * Can returns true if the user is allowed to perform a specific graph
  * operation.
  */
 UserSchema.method('can', function(...actions) {
   return can(this, null, actions);
-
-  if (actions.some((action) => action === 'mutation:setUserStatus' || action === 'mutation:suspendUser' || action === 'mutation:setCommentStatus') && !this.canSetUserStatus()) {
-    return false;
-  }
-
-  // {add,remove}CommentTag - requires admin and/or moderator role
-  if (actions.some(a => ['mutation:removeCommentTag', 'mutation:addCommentTag'].includes(a)) && ! this.canModifyTags()) {
-    return false;
-  }
-
-  return true;
 });
 
 // Create the User model.
diff --git a/perms/mutationReducer.js b/perms/mutationReducer.js
index 7e3c1b3cd..9aa34b017 100644
--- a/perms/mutationReducer.js
+++ b/perms/mutationReducer.js
@@ -13,28 +13,31 @@ module.exports = {
   SET_COMMENT_STATUS: 'SET_COMMENT_STATUS',
   ADD_COMMENT_TAG: 'ADD_COMMENT_TAG',
   REMOVE_COMMENT_TAG: 'REMOVE_COMMENT_TAG',
+  UPDATE_USER_ROLES: 'UPDATE_USER_ROLES',
   UPDATE_CONFIG: 'UPDATE_CONFIG',
   reducer: function (user, perm, context, initialState) {
     switch (perm) {
-    case 'muation:createComment':
+    case this.CREATE_COMMENT:
       return true;
-    case 'mutation:createAction':
+    case this.CREATE_ACTION:
       return true;
-    case 'mutation:deleteAction':
+    case this.DELETE_ACTION:
       return true;
-    case 'mutation:editName':
+    case this.EDIT_NAME:
       return true;
-    case 'mutation:setUserStatus':
+    case this.UPDATE_USER_ROLES:
+      return check(user, ['ADMIN']);
+    case this.SET_USER_STATUS:
       return check(user, ['ADMIN', 'MODERATOR']);
-    case 'mutation:suspendUser':
+    case this.SUSPEND_USER:
       return check(user, ['ADMIN', 'MODERATOR']);
-    case 'mutation:setCommentStatus':
+    case this.SET_COMMENT_STATUS:
       return check(user, ['ADMIN', 'MODERATOR']);
-    case 'mutation:addCommentTag':
+    case this.ADD_COMMENT_TAG:
       return check(user, ['ADMIN', 'MODERATOR']);
-    case 'mutation:removeCommentTag':
+    case this.REMOVE_COMMENT_TAG:
       return check(user, ['ADMIN', 'MODERATOR']);
-    case 'mutation:updateConfig':
+    case this.UPDATE_CONFIG:
       return check(user, ['ADMIN', 'MODERATOR']);
     default:
       return initialState;

From f4b91914767588fa6c3810ad80160140f1dbd185 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 16 May 2017 14:19:40 -0600
Subject: [PATCH 17/58] Added author_id to comment count query

---
 app.js                        |   8 ++-
 graph/loaders/comments.js     |   8 ++-
 graph/resolvers/root_query.js |   6 +-
 graph/subscriptions.js        |  21 +++---
 graph/typeDefs.graphql        |   6 +-
 views/graphiql.ejs            | 119 ++++++++++++++++++++++++++++++++++
 6 files changed, 148 insertions(+), 20 deletions(-)
 create mode 100644 views/graphiql.ejs

diff --git a/app.js b/app.js
index f5243f81a..9aca8b0ef 100644
--- a/app.js
+++ b/app.js
@@ -69,9 +69,11 @@ app.use('/api/v1/graph/ql', apollo.graphqlExpress(createGraphOptions));
 if (app.get('env') !== 'production') {
 
   // Interactive graphiql interface.
-  app.use('/api/v1/graph/iql', apollo.graphiqlExpress({
-    endpointURL: '/api/v1/graph/ql'
-  }));
+  app.use('/api/v1/graph/iql', (req, res) => {
+    res.render('graphiql', {
+      endpointURL: '/api/v1/graph/ql'
+    });
+  });
 
   // GraphQL documention.
   app.get('/admin/docs', (req, res) => {
diff --git a/graph/loaders/comments.js b/graph/loaders/comments.js
index ccee16ca7..96f0e8f73 100644
--- a/graph/loaders/comments.js
+++ b/graph/loaders/comments.js
@@ -120,7 +120,7 @@ const getParentCountByAssetIDPersonalized = async (context, {assetId, excludeIgn
     const ignoredUsers = freshUser.ignoresUsers;
     query.author_id = {$nin: ignoredUsers};
   }
-  
+
   return CommentModel.where(query).count();
 };
 
@@ -191,7 +191,7 @@ const getCountByParentIDPersonalized = async (context, {id, excludeIgnored}) =>
  * @return {Promise}          resolves to the counts of the comments from the
  *                            query
  */
-const getCommentCountByQuery = (context, {ids, statuses, asset_id, parent_id}) => {
+const getCommentCountByQuery = (context, {ids, statuses, asset_id, parent_id, author_id}) => {
   let query = CommentModel.find();
 
   if (ids) {
@@ -210,6 +210,10 @@ const getCommentCountByQuery = (context, {ids, statuses, asset_id, parent_id}) =
     query = query.where({parent_id});
   }
 
+  if (author_id) {
+    query = query.where({author_id});
+  }
+
   return CommentModel
     .find(query)
     .count();
diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js
index 7fd072854..4f79b1c18 100644
--- a/graph/resolvers/root_query.js
+++ b/graph/resolvers/root_query.js
@@ -34,7 +34,7 @@ const RootQuery = {
   comment(_, {id}, {loaders: {Comments}}) {
     return Comments.get.load(id);
   },
-  async commentCount(_, {query: {action_type, statuses, asset_id, parent_id}}, {user, loaders: {Actions, Comments}}) {
+  async commentCount(_, {query: {action_type, statuses, asset_id, parent_id, author_id}}, {user, loaders: {Actions, Comments}}) {
     if (user == null || !user.hasRoles('ADMIN')) {
       return null;
     }
@@ -43,10 +43,10 @@ const RootQuery = {
       let ids = await Actions.getByTypes({action_type, item_type: 'COMMENTS'});
 
       // Perform the query using the available resolver.
-      return Comments.getCountByQuery({ids, statuses, asset_id, parent_id});
+      return Comments.getCountByQuery({ids, statuses, asset_id, parent_id, author_id});
     }
 
-    return Comments.getCountByQuery({statuses, asset_id, parent_id});
+    return Comments.getCountByQuery({statuses, asset_id, parent_id, author_id});
   },
 
   assetMetrics(_, {from, to, sort, limit = 10}, {user, loaders: {Metrics: {Assets}}}) {
diff --git a/graph/subscriptions.js b/graph/subscriptions.js
index 369b5c058..2eb676cc4 100644
--- a/graph/subscriptions.js
+++ b/graph/subscriptions.js
@@ -1,6 +1,7 @@
 const {SubscriptionManager} = require('graphql-subscriptions');
 const {SubscriptionServer} = require('subscriptions-transport-ws');
 const _ = require('lodash');
+const debug = require('debug')('talk:graph:subscriptions');
 
 const pubsub = require('./pubsub');
 const schema = require('./schema');
@@ -9,24 +10,22 @@ const plugins = require('../services/plugins');
 
 const {deserializeUser} = require('../services/subscriptions');
 
-// Core setup functions
-let setupFunctions = {
-  commentAdded: (options, args) => ({
-    commentAdded: {
-      filter: (comment) => comment.asset_id === args.asset_id
-    },
-  }),
-};
-
 /**
  * Plugin support requires that we merge in existing setupFunctions with our new
  * plugin based ones. This allows plugins to extend existing setupFunctions as well
  * as provide new ones.
  */
-setupFunctions = plugins.get('server', 'setupFunctions').reduce((acc, {setupFunctions}) => {
+const setupFunctions = plugins.get('server', 'setupFunctions').reduce((acc, {plugin, setupFunctions}) => {
+  debug(`added plugin '${plugin.name}'`);
 
   return _.merge(acc, setupFunctions);
-}, setupFunctions);
+}, {
+  commentAdded: (options, args) => ({
+    commentAdded: {
+      filter: (comment) => comment.asset_id === args.asset_id
+    },
+  }),
+});
 
 /**
  * This creates a new subscription manager.
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index d4f035da6..b11889865 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -194,6 +194,10 @@ input CommentCountQuery {
   # type.
   action_type: ACTION_TYPE
 
+  # author_id allows the querying of comment counts based on the author of the
+  # comments.
+  author_id: ID
+
   # Filter by a specific tag name.
   tag: [String]
 }
@@ -779,7 +783,7 @@ type EditCommentResponse implements Response {
   comment: Comment
 
   # An array of errors relating to the mutation that occured.
-  errors: [UserError]  
+  errors: [UserError]
 }
 
 # All mutations for the application are defined on this object.
diff --git a/views/graphiql.ejs b/views/graphiql.ejs
new file mode 100644
index 000000000..5f1759c0d
--- /dev/null
+++ b/views/graphiql.ejs
@@ -0,0 +1,119 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>GraphiQL</title>
+  <meta name="robots" content="noindex" />
+  <style>
+    html, body {
+      height: 100%;
+      margin: 0;
+      overflow: hidden;
+      width: 100%;
+    }
+  </style>
+  <link href="//cdn.jsdelivr.net/graphiql/0.9.1/graphiql.css" rel="stylesheet" />
+  <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
+  <script src="//cdn.jsdelivr.net/react/15.0.0/react.min.js"></script>
+  <script src="//cdn.jsdelivr.net/react/15.0.0/react-dom.min.js"></script>
+  <script src="//cdn.jsdelivr.net/graphiql/0.9.1/graphiql.min.js"></script>
+</head>
+<body>
+  <script>
+    // Collect the URL parameters
+    var parameters = {};
+    window.location.search.substr(1).split('&').forEach(function (entry) {
+      var eq = entry.indexOf('=');
+      if (eq >= 0) {
+        parameters[decodeURIComponent(entry.slice(0, eq))] =
+          decodeURIComponent(entry.slice(eq + 1));
+      }
+    });
+    // Produce a Location query string from a parameter object.
+    function locationQuery(params, location) {
+      return (location ? location: '') + '?' + Object.keys(params).map(function (key) {
+        return encodeURIComponent(key) + '=' +
+          encodeURIComponent(params[key]);
+      }).join('&');
+    }
+    // Derive a fetch URL from the current URL, sans the GraphQL parameters.
+    var graphqlParamNames = {
+      query: true,
+      variables: true,
+      operationName: true
+    };
+    var otherParams = {};
+    for (var k in parameters) {
+      if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
+        otherParams[k] = parameters[k];
+      }
+    }
+    // We don't use safe-serialize for location, because it's not client input.
+    var fetchURL = locationQuery(otherParams, '<%= endpointURL %>');
+
+    // Defines a GraphQL fetcher using the fetch API.
+    function graphQLFetcher(graphQLParams) {
+      var headers = {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      };
+
+      try {
+        let token = localStorage.getItem('token');
+        if (token) {
+          headers['Authorization'] = 'Bearer ' + token;
+        }
+      } catch (e) {
+        console.error(e);
+      }
+
+      return fetch(fetchURL, {
+        method: 'post',
+        headers: headers,
+        body: JSON.stringify(graphQLParams),
+        credentials: 'include',
+      }).then(function (response) {
+        return response.text();
+      }).then(function (responseBody) {
+        try {
+          return JSON.parse(responseBody);
+        } catch (error) {
+          return responseBody;
+        }
+      });
+    }
+    // When the query and variables string is edited, update the URL bar so
+    // that it can be easily shared.
+    function onEditQuery(newQuery) {
+      parameters.query = newQuery;
+      updateURL();
+    }
+    function onEditVariables(newVariables) {
+      parameters.variables = newVariables;
+      updateURL();
+    }
+    function onEditOperationName(newOperationName) {
+      parameters.operationName = newOperationName;
+      updateURL();
+    }
+    function updateURL() {
+      history.replaceState(null, null, locationQuery(parameters));
+    }
+    // Render <GraphiQL /> into the body.
+    ReactDOM.render(
+      React.createElement(GraphiQL, {
+        fetcher: graphQLFetcher,
+        onEditQuery: onEditQuery,
+        onEditVariables: onEditVariables,
+        onEditOperationName: onEditOperationName,
+        query: null,
+        response: null,
+        variables: null,
+        operationName: null,
+      }),
+      document.body
+    );
+  </script>
+</body>
+</html>
\ No newline at end of file

From 31647fb2f0f4cc6ef98f5a3bf80de092eded1b38 Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Tue, 16 May 2017 15:41:27 -0600
Subject: [PATCH 18/58] have function params in the correct order

---
 .../src/containers/LayoutContainer.js         |  4 +--
 client/coral-framework/utils/roles.js         | 25 +++++++++----------
 models/user.js                                |  2 +-
 perms/index.js                                | 20 +++++++++------
 perms/mutationReducer.js                      |  4 +--
 perms/queryReducer.js                         |  4 +--
 perms/rootReducer.js                          |  4 +--
 7 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js
index b72acb59c..d4440c454 100644
--- a/client/coral-admin/src/containers/LayoutContainer.js
+++ b/client/coral-admin/src/containers/LayoutContainer.js
@@ -6,7 +6,7 @@ import {toggleModal as toggleShortcutModal} from '../actions/moderation';
 import {fetchConfig} from '../actions/config';
 import {FullLoading} from '../components/FullLoading';
 import AdminLogin from '../components/AdminLogin';
-import roleUtils from 'coral-framework/utils/roles';
+import {can} from 'coral-framework/utils/roles';
 
 class LayoutContainer extends Component {
   componentWillMount () {
@@ -36,7 +36,7 @@ class LayoutContainer extends Component {
         recaptchaPublic={TALK_RECAPTCHA_PUBLIC}
         errorMessage={loginError} />;
     }
-    if (roleUtils.canAccessAdmin(user) && loggedIn) {
+    if (can(user, 'ACCESS_ADMIN') && loggedIn) {
       return <Layout handleLogout={handleLogout} toggleShortcutModal={toggleShortcutModal} {...this.props} />;
     } else if (loggedIn) {
       return <p>you do not have permission to see this page.</p>;
diff --git a/client/coral-framework/utils/roles.js b/client/coral-framework/utils/roles.js
index 63d34fb41..41fd8abfa 100644
--- a/client/coral-framework/utils/roles.js
+++ b/client/coral-framework/utils/roles.js
@@ -1,30 +1,29 @@
 import intersection from 'lodash/intersection';
 
 const basicRoles = {
-  hasStaffTag: ['ADMIN', 'MODERATOR', 'STAFF']
+  HAS_STAFF_TAG: ['ADMIN', 'MODERATOR', 'STAFF']
 };
 
 const queryRoles = {
-  canAccessConfig: ['ADMIN', 'MODERATOR'],
-  canAccessAdmin: ['ADMIN', 'MODERATOR'],
-  canViewUserEmails: ['ADMIN']
+  UPDATE_CONFIG: ['ADMIN', 'MODERATOR'],
+  ACCESS_ADMIN: ['ADMIN', 'MODERATOR'],
+  VIEW_USER_EMAILS: ['ADMIN']
 };
 
 const mutationRoles = {
-  canChangeRoles: ['ADMIN'],
-  canModerateComments: ['ADMIN', 'MODERATOR']
+  CHANGE_ROLES: ['ADMIN'],
+  MODERATE_COMMENTS: ['ADMIN', 'MODERATOR']
 };
 
 const roles = {...basicRoles, ...queryRoles, ...mutationRoles};
 
-export const can = (user, perms) => {
-  for (let perm in perms) {
+export const can = (user, ...perms) => {
+  return perms.every(perm => {
     const role = roles[perm];
     if (typeof role === 'undefined') {
-      continue;
+      throw new Error(`${perm} is not a valid role`);
     }
-    let grant = intersection(role, user.roles).length > 0;
-    return grant;
-  }
-  return false;
+
+    return intersection(role, user.roles).length > 0;
+  });
 };
diff --git a/models/user.js b/models/user.js
index 932d11775..1a7b0fa7b 100644
--- a/models/user.js
+++ b/models/user.js
@@ -190,7 +190,7 @@ UserSchema.method('verifyPassword', function(password) {
  * operation.
  */
 UserSchema.method('can', function(...actions) {
-  return can(this, null, actions);
+  return can(this, null, ...actions);
 });
 
 // Create the User model.
diff --git a/perms/index.js b/perms/index.js
index b2baf00ec..9d29c1e57 100644
--- a/perms/index.js
+++ b/perms/index.js
@@ -3,19 +3,21 @@ const queries = require('./queryReducer');
 const mutations = require('./mutationReducer');
 
 const reducers = [
-  root.reducer,
-  queries.reducer,
-  mutations.reducer
+  root,
+  queries,
+  mutations
 ];
 
 // this will make 'reducer' a key in this array. hm.
 const allPermissions = [...Object.keys(root), ...Object.keys(queries), ...Object.keys(mutations)];
 
-const findGrant = (user, perms, context, initialState) => {
+const findGrant = (user, perms, context) => {
+
   return perms.every(perm => {
 
-    for (let reducer in reducers) {
-      const grant = reducer(user, perm, context, initialState);
+    for (let key in reducers) {
+      const reducer = reducers[key];
+      const grant = reducer.checkRoles(user, perm, context);
 
       if (grant !== null && typeof grant !== 'undefined') {
         return grant;
@@ -38,12 +40,14 @@ module.exports = (user, context, ...perms) => {
 
   // make sure all the passed permissions are not typos
   const missingPerms = perms.filter(perm => {
-    return typeof allPermissions[perm] === 'undefined';
+    return allPermissions.indexOf(perm) === -1;
   });
 
   if (missingPerms.length) {
+
+    // not sure if this is working.
     throw new Error(`${missingPerms.join(' ')} are not valid permissions.`);
   }
 
-  return findGrant(user, perms, context, null);
+  return findGrant(user, perms, context);
 };
diff --git a/perms/mutationReducer.js b/perms/mutationReducer.js
index 9aa34b017..5f763805d 100644
--- a/perms/mutationReducer.js
+++ b/perms/mutationReducer.js
@@ -15,7 +15,7 @@ module.exports = {
   REMOVE_COMMENT_TAG: 'REMOVE_COMMENT_TAG',
   UPDATE_USER_ROLES: 'UPDATE_USER_ROLES',
   UPDATE_CONFIG: 'UPDATE_CONFIG',
-  reducer: function (user, perm, context, initialState) {
+  checkRoles: function (user, perm, context) {
     switch (perm) {
     case this.CREATE_COMMENT:
       return true;
@@ -40,7 +40,7 @@ module.exports = {
     case this.UPDATE_CONFIG:
       return check(user, ['ADMIN', 'MODERATOR']);
     default:
-      return initialState;
+      break;
     }
   }
 };
diff --git a/perms/queryReducer.js b/perms/queryReducer.js
index 9e97c8ec4..bea059639 100644
--- a/perms/queryReducer.js
+++ b/perms/queryReducer.js
@@ -10,7 +10,7 @@ module.exports = {
   SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS: 'SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS',
   SEARCH_OTHERS_COMMENTS: 'SEARCH_OTHERS_COMMENTS',
   SEARCH_COMMENT_METRICS: 'SEARCH_COMMENT_METRICS',
-  reducer: function (perm, user, context, initialState) {
+  checkRoles: function (user, perm, context) {
     switch (perm) {
     case this.SEARCH_ASSETS:
       return check(user, ['ADMIN', 'MODERATOR']);
@@ -25,7 +25,7 @@ module.exports = {
     case this.SEARCH_COMMENT_METRICS:
       return check(user, ['ADMIN', 'MODERATOR']);
     default:
-      return initialState;
+      break;
     }
   }
 };
diff --git a/perms/rootReducer.js b/perms/rootReducer.js
index e8552c765..344c33ada 100644
--- a/perms/rootReducer.js
+++ b/perms/rootReducer.js
@@ -1,11 +1,9 @@
 module.exports = {
-  reducer: function (perm, user, context, initialState) {
+  checkRoles: function (user, perm, context) {
 
     // this runs before everything
     if (user.status === 'BANNED') {
       return false;
     }
-
-    return initialState;
   }
 };

From d081c0c5b500039ccf0e0aee101eecfa08a2c3fc Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Tue, 16 May 2017 16:34:04 -0600
Subject: [PATCH 19/58] remove context

---
 graph/resolvers/user.js  | 2 +-
 models/user.js           | 2 +-
 perms/mutationReducer.js | 2 +-
 perms/queryReducer.js    | 2 +-
 perms/rootReducer.js     | 8 +++++++-
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/graph/resolvers/user.js b/graph/resolvers/user.js
index 8a6ca69e3..6aba327ad 100644
--- a/graph/resolvers/user.js
+++ b/graph/resolvers/user.js
@@ -14,7 +14,7 @@ const User = {
 
     // If the user is not an admin, only return comment list for the owner of
     // the comments.
-    if (user && (user.can('SEARCH_OTHERS_COMMENTS') || user.id === id)) {
+    if (user && (user.can('SEARCH_OTHERS_COMMENTZ') || user.id === id)) {
       return Comments.getByQuery({author_id: id, sort: 'REVERSE_CHRONOLOGICAL'});
     }
 
diff --git a/models/user.js b/models/user.js
index 1a7b0fa7b..3d12d49e9 100644
--- a/models/user.js
+++ b/models/user.js
@@ -190,7 +190,7 @@ UserSchema.method('verifyPassword', function(password) {
  * operation.
  */
 UserSchema.method('can', function(...actions) {
-  return can(this, null, ...actions);
+  return can(this, ...actions);
 });
 
 // Create the User model.
diff --git a/perms/mutationReducer.js b/perms/mutationReducer.js
index 5f763805d..0078c327b 100644
--- a/perms/mutationReducer.js
+++ b/perms/mutationReducer.js
@@ -15,7 +15,7 @@ module.exports = {
   REMOVE_COMMENT_TAG: 'REMOVE_COMMENT_TAG',
   UPDATE_USER_ROLES: 'UPDATE_USER_ROLES',
   UPDATE_CONFIG: 'UPDATE_CONFIG',
-  checkRoles: function (user, perm, context) {
+  checkRoles: function (user, perm) {
     switch (perm) {
     case this.CREATE_COMMENT:
       return true;
diff --git a/perms/queryReducer.js b/perms/queryReducer.js
index bea059639..92f1566d5 100644
--- a/perms/queryReducer.js
+++ b/perms/queryReducer.js
@@ -10,7 +10,7 @@ module.exports = {
   SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS: 'SEARCH_NON_NULL_OR_ACCEPTED_COMMENTS',
   SEARCH_OTHERS_COMMENTS: 'SEARCH_OTHERS_COMMENTS',
   SEARCH_COMMENT_METRICS: 'SEARCH_COMMENT_METRICS',
-  checkRoles: function (user, perm, context) {
+  checkRoles: function (user, perm) {
     switch (perm) {
     case this.SEARCH_ASSETS:
       return check(user, ['ADMIN', 'MODERATOR']);
diff --git a/perms/rootReducer.js b/perms/rootReducer.js
index 344c33ada..7abf92753 100644
--- a/perms/rootReducer.js
+++ b/perms/rootReducer.js
@@ -1,9 +1,15 @@
 module.exports = {
-  checkRoles: function (user, perm, context) {
+  DUMMY_ROLE: 'DUMMY_ROLE',
+  checkRoles: function (user, perm) {
 
     // this runs before everything
     if (user.status === 'BANNED') {
       return false;
     }
+
+    switch (perm) {
+    default:
+      break;
+    }
   }
 };

From b49ace99eb0443e11db235ed83e383dd3bde6cf9 Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Tue, 16 May 2017 16:38:30 -0600
Subject: [PATCH 20/58] add permission for EDIT_COMMENT

---
 graph/mutators/comment.js | 6 +++---
 perms/mutationReducer.js  | 3 +++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/graph/mutators/comment.js b/graph/mutators/comment.js
index e35080314..538bba931 100644
--- a/graph/mutators/comment.js
+++ b/graph/mutators/comment.js
@@ -99,7 +99,7 @@ const resolveNewCommentStatus = async (context, {asset_id, body}, wordlist = {},
   if (wordlist.banned) {
     return 'REJECTED';
   }
-  
+
   if (settings.premodLinksEnable && linkify.test(body)) {
     return 'PREMOD';
   }
@@ -229,7 +229,7 @@ const edit = async (context, {id, asset_id, edit: {body}}) => {
   const [wordlist, settings] = await filterNewComment(context, {asset_id, body});
 
   // Determine the new status of the comment.
-  const status = await resolveNewCommentStatus(context, {asset_id, body}, wordlist, settings);    
+  const status = await resolveNewCommentStatus(context, {asset_id, body}, wordlist, settings);
 
   // Execute the edit.
   await CommentsService.edit(id, context.user.id, {body, status});
@@ -264,7 +264,7 @@ module.exports = (context) => {
     mutators.Comment.removeCommentTag = (action) => removeCommentTag(context, action);
   }
 
-  if (context.user && context.user.can('mutation:editComment')) {
+  if (context.user && context.user.can('EDIT_COMMENT')) {
     mutators.Comment.edit = (action) => edit(context, action);
   }
 
diff --git a/perms/mutationReducer.js b/perms/mutationReducer.js
index 0078c327b..b589bde90 100644
--- a/perms/mutationReducer.js
+++ b/perms/mutationReducer.js
@@ -8,6 +8,7 @@ module.exports = {
   CREATE_ACTION: 'CREATE_ACTION',
   DELETE_ACTION: 'DELETE_ACTION',
   EDIT_NAME: 'EDIT_NAME',
+  EDIT_COMMENT: 'EDIT_COMMENT',
   SET_USER_STATUS: 'SET_USER_STATUS',
   SUSPEND_USER: 'SUSPEND_USER',
   SET_COMMENT_STATUS: 'SET_COMMENT_STATUS',
@@ -25,6 +26,8 @@ module.exports = {
       return true;
     case this.EDIT_NAME:
       return true;
+    case this.EDIT_COMMENT:
+      return true;
     case this.UPDATE_USER_ROLES:
       return check(user, ['ADMIN']);
     case this.SET_USER_STATUS:

From fde4dee52f595023431344abf678cafa8103003c Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 16 May 2017 17:26:34 -0600
Subject: [PATCH 21/58] Resolver cleanup

---
 graph/loaders/users.js        | 10 +++++++++-
 graph/resolvers/root_query.js | 33 ++++++++++++++-------------------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/graph/loaders/users.js b/graph/loaders/users.js
index 145b0dfdb..c4850eaf0 100644
--- a/graph/loaders/users.js
+++ b/graph/loaders/users.js
@@ -15,7 +15,7 @@ const genUserByIDs = (context, ids) => UsersService
  * @param  {Object} context   graph context
  * @param  {Object} query     query terms to apply to the users query
  */
-const getUsersByQuery = ({user}, {ids, limit, cursor, sort}) => {
+const getUsersByQuery = ({user}, {ids, limit, cursor, statuses = null, sort}) => {
 
   let users = UserModel.find();
 
@@ -27,6 +27,14 @@ const getUsersByQuery = ({user}, {ids, limit, cursor, sort}) => {
     });
   }
 
+  if (statuses != null) {
+    users = users.where({
+      status: {
+        $in: statuses
+      }
+    });
+  }
+
   if (cursor) {
     if (sort === 'REVERSE_CHRONOLOGICAL') {
       users = users.where({
diff --git a/graph/resolvers/root_query.js b/graph/resolvers/root_query.js
index 4f79b1c18..8c1552b5f 100644
--- a/graph/resolvers/root_query.js
+++ b/graph/resolvers/root_query.js
@@ -19,34 +19,32 @@ const RootQuery = {
 
   // This endpoint is used for loading moderation queues, so hide it in the
   // event that we aren't an admin.
-  async comments(_, {query: {action_type, statuses, asset_id, parent_id, limit, cursor, sort, excludeIgnored}}, {user, loaders: {Comments, Actions}}) {
-    let query = {statuses, asset_id, parent_id, limit, cursor, sort, excludeIgnored};
+  async comments(_, {query}, {user, loaders: {Comments, Actions}}) {
+    let {action_type} = query;
 
     if (user != null && user.hasRoles('ADMIN') && action_type) {
-      let ids = await Actions.getByTypes({action_type, item_type: 'COMMENTS'});
-
-      // Perform the query using the available resolver.
-      return Comments.getByQuery({ids, statuses, asset_id, parent_id, limit, cursor, sort, excludeIgnored});
+      query.ids = await Actions.getByTypes({action_type, item_type: 'COMMENTS'});
     }
 
     return Comments.getByQuery(query);
   },
+
   comment(_, {id}, {loaders: {Comments}}) {
     return Comments.get.load(id);
   },
-  async commentCount(_, {query: {action_type, statuses, asset_id, parent_id, author_id}}, {user, loaders: {Actions, Comments}}) {
+
+  async commentCount(_, {query}, {user, loaders: {Actions, Comments}}) {
     if (user == null || !user.hasRoles('ADMIN')) {
       return null;
     }
 
-    if (action_type) {
-      let ids = await Actions.getByTypes({action_type, item_type: 'COMMENTS'});
+    const {action_type} = query;
 
-      // Perform the query using the available resolver.
-      return Comments.getCountByQuery({ids, statuses, asset_id, parent_id, author_id});
+    if (action_type) {
+      query.ids = await Actions.getByTypes({action_type, item_type: 'COMMENTS'});
     }
 
-    return Comments.getCountByQuery({statuses, asset_id, parent_id, author_id});
+    return Comments.getCountByQuery(query);
   },
 
   assetMetrics(_, {from, to, sort, limit = 10}, {user, loaders: {Metrics: {Assets}}}) {
@@ -90,19 +88,16 @@ const RootQuery = {
 
   // This endpoint is used for loading the user moderation queues (users whose username has been flagged),
   // so hide it in the event that we aren't an admin.
-  async users(_, {query: {action_type, limit, cursor, sort}}, {user, loaders: {Users, Actions}}) {
-
+  async users(_, {query}, {user, loaders: {Users, Actions}}) {
     if (user == null || !user.hasRoles('ADMIN')) {
       return null;
     }
 
-    const query = {limit, cursor, sort};
+    const {action_type} = query;
 
     if (action_type) {
-      let ids = await Actions.getByTypes({action_type, item_type: 'USERS'});
-
-      // Perform the query using the available resolver.
-      return Users.getByQuery({ids, limit, cursor, sort}).find({status: 'PENDING'});
+      query.ids = await Actions.getByTypes({action_type, item_type: 'USERS'});
+      query.statuses = ['PENDING'];
     }
 
     return Users.getByQuery(query);

From 71c743dda7b439423b714a8d367ae8b5b28003c1 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 17 May 2017 19:58:43 +0700
Subject: [PATCH 22/58] Extend backend to support new suspend feature

---
 .../Community/components/SuspendUserDialog.js |  4 +-
 .../src/graphql/mutations/index.js            |  5 +-
 .../src/graphql/mutations/suspendUser.graphql |  4 +-
 client/coral-framework/actions/auth.js        |  8 ++-
 .../containers/ChangeUsernameContainer.js     |  2 +-
 graph/mutators/user.js                        |  4 +-
 graph/resolvers/comment.js                    |  4 +-
 graph/resolvers/root_mutation.js              |  4 +-
 graph/typeDefs.graphql                        | 23 ++++++-
 models/user.js                                | 17 +++++
 services/users.js                             | 68 +++++++++++--------
 11 files changed, 94 insertions(+), 49 deletions(-)

diff --git a/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js b/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js
index 827352c42..0841333be 100644
--- a/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js
+++ b/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js
@@ -52,7 +52,7 @@ class SuspendUserDialog extends Component  {
     const cancel = this.props.handleClose;
     const next = () => this.setState({stage: stage + 1});
     const suspend = () => {
-      suspendUser({userId: user.user.id, message: this.state.email})
+      suspendUser({id: user.user.id, message: this.state.email, mustChangeUsername: true})
       .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>
diff --git a/client/coral-admin/src/graphql/mutations/index.js b/client/coral-admin/src/graphql/mutations/index.js
index 16c391907..aad348c5c 100644
--- a/client/coral-admin/src/graphql/mutations/index.js
+++ b/client/coral-admin/src/graphql/mutations/index.js
@@ -32,11 +32,10 @@ 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,
         },
         refetchQueries: ['Users']
       });
diff --git a/client/coral-admin/src/graphql/mutations/suspendUser.graphql b/client/coral-admin/src/graphql/mutations/suspendUser.graphql
index 0d56a3cc0..f6ab2426f 100644
--- a/client/coral-admin/src/graphql/mutations/suspendUser.graphql
+++ b/client/coral-admin/src/graphql/mutations/suspendUser.graphql
@@ -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
     }
diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js
index 79fba460c..827991cb5 100644
--- a/client/coral-framework/actions/auth.js
+++ b/client/coral-framework/actions/auth.js
@@ -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, suspension}} = getState().auth.toJS();
+    if (canEditName && !suspension.mustChangeUsername) {
+      dispatch(showCreateUsernameDialog());
+    }
   } catch (err) {
     dispatch(signInFacebookFailure(err));
     return;
diff --git a/client/coral-sign-in/containers/ChangeUsernameContainer.js b/client/coral-sign-in/containers/ChangeUsernameContainer.js
index 12a9a75b8..cebd9605b 100644
--- a/client/coral-sign-in/containers/ChangeUsernameContainer.js
+++ b/client/coral-sign-in/containers/ChangeUsernameContainer.js
@@ -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}
diff --git a/graph/mutators/user.js b/graph/mutators/user.js
index 2cc1962be..84fb8fd41 100644
--- a/graph/mutators/user.js
+++ b/graph/mutators/user.js
@@ -5,8 +5,8 @@ const setUserStatus = ({user}, {id, status}) => {
   return UsersService.setStatus(id, status);
 };
 
-const suspendUser = ({user}, {id, message}) => {
-  return UsersService.suspendUser(id, message);
+const suspendUser = ({user}, {id, message, mustChangeUsername, until}) => {
+  return UsersService.suspendUser(id, message, mustChangeUsername, until);
 };
 
 const ignoreUser = ({user}, userToIgnore) => {
diff --git a/graph/resolvers/comment.js b/graph/resolvers/comment.js
index 8d0473900..8074abe67 100644
--- a/graph/resolvers/comment.js
+++ b/graph/resolvers/comment.js
@@ -25,9 +25,9 @@ const Comment = {
 
     // TODO: remove
     if (user && excludeIgnored) {
-      return Comments.countByParentIDPersonalized({id, excludeIgnored});      
+      return Comments.countByParentIDPersonalized({id, excludeIgnored});
     }
-    return Comments.countByParentID.load(id);      
+    return Comments.countByParentID.load(id);
   },
   actions({id}, _, {user, loaders: {Actions}}) {
 
diff --git a/graph/resolvers/root_mutation.js b/graph/resolvers/root_mutation.js
index 2abc88f0d..0b954f2a1 100644
--- a/graph/resolvers/root_mutation.js
+++ b/graph/resolvers/root_mutation.js
@@ -20,8 +20,8 @@ const RootMutation = {
   setUserStatus(_, {id, status}, {mutators: {User}}) {
     return wrapResponse(null)(User.setUserStatus({id, status}));
   },
-  suspendUser(_, {id, message}, {mutators: {User}}) {
-    return wrapResponse(null)(User.suspendUser({id, message}));
+  suspendUser(_, {input: {id, message, mustChangeUsername, until}}, {mutators: {User}}) {
+    return wrapResponse(null)(User.suspendUser({id, message, mustChangeUsername, until}));
   },
   ignoreUser(_, {id}, {mutators: {User}}) {
     return wrapResponse(null)(User.ignoreUser({id}));
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index f51258eb1..824197f3b 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -669,6 +669,23 @@ input CreateDontAgreeInput {
   message: String
 }
 
+# Input for suspendUser mutation.
+input SuspendUserInput {
+
+  # id of target user.
+  id: ID!
+
+  # message to be sent to the user.
+  # TODO: should this be required?
+  message: String
+
+  # If set, the user is requested to change its username.
+  mustChangeUsername: Boolean
+
+  # If set, the suspension lasts at least until specified date.
+  until: Date
+}
+
 # DeleteActionResponse is the response returned with possibly some errors
 # relating to the delete action attempt.
 type DeleteActionResponse implements Response {
@@ -741,7 +758,7 @@ type EditCommentResponse implements Response {
   comment: Comment
 
   # An array of errors relating to the mutation that occured.
-  errors: [UserError]  
+  errors: [UserError]
 }
 
 # All mutations for the application are defined on this object.
@@ -765,8 +782,8 @@ type RootMutation {
   # Sets User status. Requires the `ADMIN` role.
   setUserStatus(id: ID!, status: USER_STATUS!): SetUserStatusResponse
 
-  # Sets User status to BANNED and canEditName to true. It sends a message to the banned User. Requires the `ADMIN` role.
-  suspendUser(id: ID!, message: String): SuspendUserResponse
+  # Suspends a user. Requires the `ADMIN` role.
+  suspendUser(input: SuspendUserInput!): SuspendUserResponse
 
   # Sets Comment status. Requires the `ADMIN` role.
   setCommentStatus(id: ID!, status: COMMENT_STATUS!): SetCommentStatusResponse
diff --git a/models/user.js b/models/user.js
index 56f750d34..47c521fba 100644
--- a/models/user.js
+++ b/models/user.js
@@ -111,6 +111,18 @@ const UserSchema = new mongoose.Schema({
     default: false
   },
 
+  // User's suspension details.
+  suspensionDetails: {
+    mustChangeUsername: {
+      type: Boolean,
+      default: false,
+    },
+    until: {
+      type: Date,
+      default: null,
+    },
+  },
+
   // User's settings
   settings: {
     bio: {
@@ -139,6 +151,7 @@ const UserSchema = new mongoose.Schema({
   },
 
   toJSON: {
+    virtuals: true,
     transform: function (doc, ret) {
       delete ret.password;
       delete ret._id;
@@ -147,6 +160,10 @@ const UserSchema = new mongoose.Schema({
   }
 });
 
+UserSchema.virtual('suspended').get(function() {
+  return this.suspensionDetails.mustChangeUsername || this.suspensionDetails.until > new Date();
+});
+
 // Add the indixies on the user profile data.
 UserSchema.index({
   'profiles.id': 1,
diff --git a/services/users.js b/services/users.js
index 9d15e129f..e4d2982bd 100644
--- a/services/users.js
+++ b/services/users.js
@@ -451,40 +451,48 @@ module.exports = class UsersService {
 
   /**
    * Suspend a user. It changes the status to BANNED and canEditName to True.
-   * @param  {String}   id   id of a user
-   * @param  {Function} done callback after the operation is complete
+   * @param  {String}   id                  id of a user
+   * @param  {String}   message             message to be send to the user
+   * @param  {Boolean}  mustChangeUsername  if set the suspension lasts at least until user changed its username.
+   * @param  {Date}     until               if set the suspension lasts at least until date.
    */
-  static suspendUser(id, message) {
-    return UserModel.findOneAndUpdate({
-      id
-    }, {
+  static suspendUser(id, message, mustChangeUsername, until) {
+    const changes = {
       $set: {
-        status: 'BANNED',
-        canEditName: true
+        suspensionDetails: {},
       }
-    })
-    .then((user) => {
-      if (message) {
-        let localProfile = user.profiles.find((profile) => profile.provider === 'local');
+    };
+    if (mustChangeUsername) {
+      changes.$set.status = 'BANNED';
+      changes.$set.canEditName = true;
+      changes.$set.suspensionDetails.mustChangeUsername = true;
+    }
+    if (until) {
+      changes.$set.suspensionDetails.until = until;
+    }
+    return UserModel.findOneAndUpdate({id}, changes)
+      .then((user) => {
+        if (message) {
+          let localProfile = user.profiles.find((profile) => profile.provider === 'local');
 
-        if (localProfile) {
-          const options =
-            {
-              template: 'suspension',              // needed to know which template to render!
-              locals: {                                  // specifies the template locals.
-                body: message
-              },
-              subject: 'Email Suspension',
-              to: localProfile.id  // This only works if the user has registered via e-mail.
-                                   // We may want a standard way to access a user's e-mail address in the future
-            };
+          if (localProfile) {
+            const options =
+              {
+                template: 'suspension',              // needed to know which template to render!
+                locals: {                            // specifies the template locals.
+                  body: message
+                },
+                subject: 'Email Suspension',
+                to: localProfile.id  // This only works if the user has registered via e-mail.
+                                     // We may want a standard way to access a user's e-mail address in the future
+              };
 
-          return MailerService.sendSimple(options);
-        } else {
-          return Promise.reject(errors.ErrMissingEmail);
+            return MailerService.sendSimple(options);
+          } else {
+            return Promise.reject(errors.ErrMissingEmail);
+          }
         }
-      }
-    });
+      });
   }
 
   /**
@@ -813,13 +821,15 @@ module.exports = class UsersService {
         username: username,
         lowercaseUsername: username.toLowerCase(),
         canEditName: false,
-        status: 'PENDING'
+        status: 'PENDING',
+        'suspensionDetails.mustChangeUsername': false,
       }
     })
     .then((result) => {
       if (result.nModified <= 0) {
         return Promise.reject(errors.ErrPermissionUpdateUsername);
       }
+      console.log(result);
 
       return result;
     })

From a0f41bb19dd29c69b336799484a7d2925b3ce577 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 17 May 2017 10:54:14 -0600
Subject: [PATCH 23/58] show total comments and rejected %

---
 .../ModerationQueue/ModerationContainer.js    |  6 +++++-
 .../containers/ModerationQueue/UserDetail.css | 20 +++++++++++++++++++
 .../containers/ModerationQueue/UserDetail.js  | 17 +++++++++++++++-
 .../coral-admin/src/graphql/queries/index.js  |  2 +-
 .../src/graphql/queries/userDetail.graphql    |  6 ++++--
 client/coral-ui/components/Drawer.css         |  2 ++
 6 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index 52282f630..e6062674d 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -208,7 +208,11 @@ class ModerationContainer extends Component {
           shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={onClose}/>
-        {moderation.userDetailId && <UserDetail id={moderation.userDetailId} hideUserDetail={hideUserDetail}/>}
+        {moderation.userDetailId && (
+          <UserDetail
+            id={moderation.userDetailId}
+            hideUserDetail={hideUserDetail} />
+        )}
       </div>
     );
   }
diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.css b/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
index 9f41a9d8d..eb3f2e4c7 100644
--- a/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
+++ b/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
@@ -10,3 +10,23 @@
 .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;
+  }
+}
diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
index 02e28dd84..200b8537d 100644
--- a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
+++ b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
@@ -28,13 +28,20 @@ class UserDetail extends React.Component {
       return null;
     }
 
-    const {user} = data;
+    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>
@@ -48,6 +55,14 @@ class UserDetail extends React.Component {
           <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>
     );
diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js
index 9caa90ad0..ae94d70c3 100644
--- a/client/coral-admin/src/graphql/queries/index.js
+++ b/client/coral-admin/src/graphql/queries/index.js
@@ -99,7 +99,7 @@ export const modQueueResort = (id, fetchMore) => (sort) => {
 export const getUserDetail = graphql(USER_DETAIL, {
   options: ({id}) => {
     return {
-      variables: {id}
+      variables: {author_id: id}
     };
   }
 });
diff --git a/client/coral-admin/src/graphql/queries/userDetail.graphql b/client/coral-admin/src/graphql/queries/userDetail.graphql
index 6d42682ea..c375b80ff 100644
--- a/client/coral-admin/src/graphql/queries/userDetail.graphql
+++ b/client/coral-admin/src/graphql/queries/userDetail.graphql
@@ -1,5 +1,5 @@
-query UserDetail ($id: ID!) {
-  user(id: $id) {
+query UserDetail ($author_id: ID!) {
+  user(id: $author_id) {
     id
     username
     created_at
@@ -8,4 +8,6 @@ query UserDetail ($id: ID!) {
       provider
     }
   }
+  totalComments: commentCount(query: {author_id: $author_id})
+  rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
 }
diff --git a/client/coral-ui/components/Drawer.css b/client/coral-ui/components/Drawer.css
index b967b20ab..d22512a3a 100644
--- a/client/coral-ui/components/Drawer.css
+++ b/client/coral-ui/components/Drawer.css
@@ -1,5 +1,6 @@
 .drawer {
   max-width: 700px;
+  min-width: 400px;
   padding: 20px;
   position: fixed;
   top: 0;
@@ -8,6 +9,7 @@
   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 {

From c66e3141e0b30adb6ff13df04c82a1c073596728 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 17 May 2017 11:38:43 -0600
Subject: [PATCH 24/58] actually check permissions

---
 client/coral-embed-stream/src/components/Embed.js  | 4 ++--
 client/coral-embed-stream/src/components/Stream.js | 4 ++--
 client/coral-framework/utils/roles.js              | 5 +++++
 graph/resolvers/user.js                            | 2 +-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index 908fd4a90..aa97eb091 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-framework/translations';
-import rolesHelper from 'coral-framework/utils/roles';
+import {can} from 'coral-framework/utils/roles';
 const lang = new I18n(translations);
 
 import {TabBar, Tab, TabContent, Button} from 'coral-ui';
@@ -49,7 +49,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={!rolesHelper.canAccessConfig(user)}>Configure Stream</Tab>
+            <Tab restricted={!can(user, 'UPDATE_CONFIG')}>Configure Stream</Tab>
           </TabBar>
           {
             commentId &&
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index f0ec8f353..225c7fafa 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -11,7 +11,7 @@ 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 rolesHelper from 'coral-framework/utils/roles';
+import {can} from 'coral-framework/utils/roles';
 import ChangeUsernameContainer
   from 'coral-sign-in/containers/ChangeUsernameContainer';
 
@@ -112,7 +112,7 @@ class Stream extends React.Component {
         {loggedIn &&
           user &&
           <ChangeUsernameContainer loggedIn={loggedIn} user={user} />}
-        {loggedIn && <ModerationLink assetId={asset.id} isAdmin={rolesHelper.canModerate(user)} />}
+        {loggedIn && <ModerationLink assetId={asset.id} isAdmin={can(user, 'MODERATE_COMMENTS')} />}
 
         {/* the highlightedComment is isolated after the user followed a permalink */}
         {highlightedComment
diff --git a/client/coral-framework/utils/roles.js b/client/coral-framework/utils/roles.js
index 4c9af3ca1..f5a285e17 100644
--- a/client/coral-framework/utils/roles.js
+++ b/client/coral-framework/utils/roles.js
@@ -18,6 +18,11 @@ const mutationRoles = {
 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') {
diff --git a/graph/resolvers/user.js b/graph/resolvers/user.js
index 6aba327ad..8a6ca69e3 100644
--- a/graph/resolvers/user.js
+++ b/graph/resolvers/user.js
@@ -14,7 +14,7 @@ const User = {
 
     // If the user is not an admin, only return comment list for the owner of
     // the comments.
-    if (user && (user.can('SEARCH_OTHERS_COMMENTZ') || user.id === id)) {
+    if (user && (user.can('SEARCH_OTHERS_COMMENTS') || user.id === id)) {
       return Comments.getByQuery({author_id: id, sort: 'REVERSE_CHRONOLOGICAL'});
     }
 

From 76e87f4c343e55e013cde0c424585aa2cee0b993 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 17 May 2017 23:43:16 +0700
Subject: [PATCH 25/58] Move previous suspendUser feature to rejectUsername

---
 .../Community/CommunityContainer.js           |  8 +--
 .../Community/components/SuspendUserDialog.js |  6 +-
 .../ModerationQueue/ModerationContainer.js    | 31 ++++++---
 .../components/SuspendUserDialog.js           |  3 +-
 .../src/graphql/mutations/index.js            | 14 ++++
 .../graphql/mutations/rejectUsername.graphql  |  7 ++
 client/coral-admin/src/reducers/moderation.js |  1 +
 client/coral-framework/actions/auth.js        |  4 +-
 graph/mutators/user.js                        | 13 +++-
 graph/resolvers/root_mutation.js              |  7 +-
 graph/typeDefs.graphql                        | 25 ++++++-
 models/user.js                                | 15 ++--
 services/users.js                             | 69 ++++++++++++++-----
 13 files changed, 146 insertions(+), 57 deletions(-)
 create mode 100644 client/coral-admin/src/graphql/mutations/rejectUsername.graphql

diff --git a/client/coral-admin/src/containers/Community/CommunityContainer.js b/client/coral-admin/src/containers/Community/CommunityContainer.js
index 899958e17..7c0051477 100644
--- a/client/coral-admin/src/containers/Community/CommunityContainer.js
+++ b/client/coral-admin/src/containers/Community/CommunityContainer.js
@@ -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);
diff --git a/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js b/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js
index 0841333be..b717d1719 100644
--- a/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js
+++ b/client/coral-admin/src/containers/Community/components/SuspendUserDialog.js
@@ -34,7 +34,7 @@ class SuspendUserDialog extends Component  {
   static propTypes = {
     stage: PropTypes.number,
     handleClose: PropTypes.func.isRequired,
-    suspendUser: PropTypes.func.isRequired
+    rejectUsername: PropTypes.func.isRequired
   }
 
   componentDidMount() {
@@ -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({id: user.user.id, message: this.state.email, mustChangeUsername: true})
+      rejectUsername({id: user.user.id, message: this.state.email})
       .then(() => {
         this.props.handleClose();
       });
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index df79adc44..e65551487 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -10,7 +10,7 @@ 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';
@@ -211,14 +211,24 @@ class ModerationContainer extends Component {
         <SuspendUserDialog
           open={moderation.suspendUserDialog.show}
           username={moderation.suspendUserDialog.username}
+          userId={moderation.suspendUserDialog.userId}
           onCancel={props.hideSuspendUserDialog}
-          onPerform={(result) => {
-            toast(
-              lang.t('suspenduser.notify_suspend_until',
-                moderation.suspendUserDialog.username,
-                lang.timeago(result.until)),
-              {type: 'success'}
-            );
+          onPerform={(args) => {
+            props.suspendUser(args)
+              .then(() => {
+                toast(
+                  lang.t('suspenduser.notify_suspend_until',
+                    moderation.suspendUserDialog.username,
+                    lang.timeago(args.until)),
+                  {type: 'success'}
+                );
+              })
+              .catch((err) => {
+                toast(
+                  err,
+                  {type: 'error'}
+                );
+              });
             props.hideSuspendUserDialog();
           }}
         />
@@ -238,7 +248,7 @@ const mapStateToProps = (state) => ({
   assets: state.assets.get('assets')
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   onClose: () => dispatch(toggleModal(false)),
   hideBanUserDialog: () => dispatch(hideBanUserDialog(false)),
   ...bindActionCreators({
@@ -257,6 +267,7 @@ export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   setCommentStatus,
   getQueueCounts,
+  banUser,
+  suspendUser,
   modQueueQuery,
-  banUser
 )(ModerationContainer);
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js b/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
index 4a56762bd..292c0909e 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
@@ -40,8 +40,9 @@ class SuspendUserDialog extends React.Component {
 
   handlePerform = () => {
     this.props.onPerform({
-      until: dateAdd(new Date(), 'hour', this.state.duration),
+      id: this.props.userId,
       message: this.state.message,
+      until: dateAdd(new Date(), 'hour', this.state.duration),
     });
   };
 
diff --git a/client/coral-admin/src/graphql/mutations/index.js b/client/coral-admin/src/graphql/mutations/index.js
index aad348c5c..0e3b6b25c 100644
--- a/client/coral-admin/src/graphql/mutations/index.js
+++ b/client/coral-admin/src/graphql/mutations/index.js
@@ -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}) => ({
@@ -43,6 +44,19 @@ export const suspendUser = graphql(SUSPEND_USER, {
   })
 });
 
+export const rejectUsername = graphql(REJECT_USERNAME, {
+  props: ({mutate}) => ({
+    rejectUsername: (input) => {
+      return mutate({
+        variables: {
+          input,
+        },
+        refetchQueries: ['Users']
+      });
+    }
+  })
+});
+
 const views = ['all', 'premod', 'flagged', 'accepted', 'rejected'];
 export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
   props: ({mutate}) => ({
diff --git a/client/coral-admin/src/graphql/mutations/rejectUsername.graphql b/client/coral-admin/src/graphql/mutations/rejectUsername.graphql
new file mode 100644
index 000000000..c07887649
--- /dev/null
+++ b/client/coral-admin/src/graphql/mutations/rejectUsername.graphql
@@ -0,0 +1,7 @@
+mutation rejectUsername($input: RejectUsernameInput!) {
+  rejectUsername(input: $input) {
+    errors {
+      translation_key
+    }
+  }
+}
diff --git a/client/coral-admin/src/reducers/moderation.js b/client/coral-admin/src/reducers/moderation.js
index 67fd8700b..ee8825acf 100644
--- a/client/coral-admin/src/reducers/moderation.js
+++ b/client/coral-admin/src/reducers/moderation.js
@@ -38,6 +38,7 @@ export default function moderation (state = initialState, action) {
       .mergeDeep({
         suspendUserDialog: {
           show: true,
+          userId: action.userId,
           username: action.username,
           commentId: action.commentId,
           commentStatus: action.commentStatus,
diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js
index 827991cb5..7da153019 100644
--- a/client/coral-framework/actions/auth.js
+++ b/client/coral-framework/actions/auth.js
@@ -196,8 +196,8 @@ export const facebookCallback = (err, data) => (dispatch, getState) => {
     dispatch(handleAuthToken(data.token));
     dispatch(signInFacebookSuccess(data.user));
     dispatch(hideSignInDialog());
-    const {user: {canEditName, suspension}} = getState().auth.toJS();
-    if (canEditName && !suspension.mustChangeUsername) {
+    const {user: {canEditName, status}} = getState().auth.toJS();
+    if (canEditName && status !== 'BANNED') {
       dispatch(showCreateUsernameDialog());
     }
   } catch (err) {
diff --git a/graph/mutators/user.js b/graph/mutators/user.js
index 84fb8fd41..34cfd4355 100644
--- a/graph/mutators/user.js
+++ b/graph/mutators/user.js
@@ -5,8 +5,12 @@ const setUserStatus = ({user}, {id, status}) => {
   return UsersService.setStatus(id, status);
 };
 
-const suspendUser = ({user}, {id, message, mustChangeUsername, until}) => {
-  return UsersService.suspendUser(id, message, mustChangeUsername, until);
+const suspendUser = ({user}, {id, message, until}) => {
+  return UsersService.suspendUser(id, message, until);
+};
+
+const rejectUsername = ({user}, {id, message}) => {
+  return UsersService.rejectUsername(id, message);
 };
 
 const ignoreUser = ({user}, userToIgnore) => {
@@ -22,6 +26,7 @@ module.exports = (context) => {
     User: {
       setUserStatus: () => Promise.reject(errors.ErrNotAuthorized),
       suspendUser: () => Promise.reject(errors.ErrNotAuthorized),
+      rejectUsername: () => Promise.reject(errors.ErrNotAuthorized),
       ignoreUser: (action) => ignoreUser(context, action),
       stopIgnoringUser: (action) => stopIgnoringUser(context, action),
     }
@@ -35,5 +40,9 @@ module.exports = (context) => {
     mutators.User.suspendUser = (action) => suspendUser(context, action);
   }
 
+  if (context.user && context.user.can('mutation:rejectUsername')) {
+    mutators.User.rejectUsername = (action) => rejectUsername(context, action);
+  }
+
   return mutators;
 };
diff --git a/graph/resolvers/root_mutation.js b/graph/resolvers/root_mutation.js
index 0b954f2a1..e17cdcc8a 100644
--- a/graph/resolvers/root_mutation.js
+++ b/graph/resolvers/root_mutation.js
@@ -20,8 +20,11 @@ const RootMutation = {
   setUserStatus(_, {id, status}, {mutators: {User}}) {
     return wrapResponse(null)(User.setUserStatus({id, status}));
   },
-  suspendUser(_, {input: {id, message, mustChangeUsername, until}}, {mutators: {User}}) {
-    return wrapResponse(null)(User.suspendUser({id, message, mustChangeUsername, until}));
+  suspendUser(_, {input: {id, message, until}}, {mutators: {User}}) {
+    return wrapResponse(null)(User.suspendUser({id, message, until}));
+  },
+  rejectUsername(_, {input: {id, message}}, {mutators: {User}}) {
+    return wrapResponse(null)(User.rejectUsername({id, message}));
   },
   ignoreUser(_, {id}, {mutators: {User}}) {
     return wrapResponse(null)(User.ignoreUser({id}));
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index 824197f3b..0579a2233 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -679,13 +679,21 @@ input SuspendUserInput {
   # TODO: should this be required?
   message: String
 
-  # If set, the user is requested to change its username.
-  mustChangeUsername: Boolean
-
   # If set, the suspension lasts at least until specified date.
   until: Date
 }
 
+# Input for rejectUsername mutation.
+input RejectUsernameInput {
+
+  # id of target user.
+  id: ID!
+
+  # message to be sent to the user.
+  # TODO: should this be required?
+  message: String
+}
+
 # DeleteActionResponse is the response returned with possibly some errors
 # relating to the delete action attempt.
 type DeleteActionResponse implements Response {
@@ -710,6 +718,14 @@ type SuspendUserResponse implements Response {
   errors: [UserError]
 }
 
+# RejectUsernameResponse is the response returned with possibly some errors
+# relating to the reject username action attempt.
+type RejectUsernameResponse implements Response {
+
+  # An array of errors relating to the mutation that occurred.
+  errors: [UserError]
+}
+
 # SetCommentStatusResponse is the response returned with possibly some errors
 # relating to the delete action attempt.
 type SetCommentStatusResponse implements Response {
@@ -785,6 +801,9 @@ type RootMutation {
   # Suspends a user. Requires the `ADMIN` role.
   suspendUser(input: SuspendUserInput!): SuspendUserResponse
 
+  # Suspends a user. Requires the `ADMIN` role.
+  rejectUsername(input: RejectUsernameInput!): RejectUsernameResponse
+
   # Sets Comment status. Requires the `ADMIN` role.
   setCommentStatus(id: ID!, status: COMMENT_STATUS!): SetCommentStatusResponse
 
diff --git a/models/user.js b/models/user.js
index 47c521fba..8d6cbdbb9 100644
--- a/models/user.js
+++ b/models/user.js
@@ -112,11 +112,7 @@ const UserSchema = new mongoose.Schema({
   },
 
   // User's suspension details.
-  suspensionDetails: {
-    mustChangeUsername: {
-      type: Boolean,
-      default: false,
-    },
+  suspension: {
     until: {
       type: Date,
       default: null,
@@ -151,7 +147,6 @@ const UserSchema = new mongoose.Schema({
   },
 
   toJSON: {
-    virtuals: true,
     transform: function (doc, ret) {
       delete ret.password;
       delete ret._id;
@@ -160,10 +155,6 @@ const UserSchema = new mongoose.Schema({
   }
 });
 
-UserSchema.virtual('suspended').get(function() {
-  return this.suspensionDetails.mustChangeUsername || this.suspensionDetails.until > new Date();
-});
-
 // Add the indixies on the user profile data.
 UserSchema.index({
   'profiles.id': 1,
@@ -214,6 +205,7 @@ const USER_GRAPH_OPERATIONS = [
   'mutation:editName',
   'mutation:setUserStatus',
   'mutation:suspendUser',
+  'mutation:rejectUsername',
   'mutation:setCommentStatus',
   'mutation:addCommentTag',
   'mutation:removeCommentTag',
@@ -233,7 +225,8 @@ UserSchema.method('can', function(...actions) {
     return false;
   }
 
-  if (actions.some((action) => action === 'mutation:setUserStatus' || action === 'mutation:suspendUser' || action === 'mutation:setCommentStatus') && !this.hasRoles('ADMIN')) {
+  const adminOnlyActions = ['mutation:setUserStatus', 'mutation:suspendUser', 'mutation:rejectUsername', 'mutation:setCommentStatus'];
+  if (actions.some((action) => adminOnlyActions.indexOf(action) > 0 && !this.hasRoles('ADMIN'))) {
     return false;
   }
 
diff --git a/services/users.js b/services/users.js
index e4d2982bd..e828307f5 100644
--- a/services/users.js
+++ b/services/users.js
@@ -450,28 +450,60 @@ module.exports = class UsersService {
   }
 
   /**
-   * Suspend a user. It changes the status to BANNED and canEditName to True.
+   * Suspend a user until specified time.
    * @param  {String}   id                  id of a user
    * @param  {String}   message             message to be send to the user
-   * @param  {Boolean}  mustChangeUsername  if set the suspension lasts at least until user changed its username.
-   * @param  {Date}     until               if set the suspension lasts at least until date.
+   * @param  {Date}     until               date until the suspension is valid.
    */
-  static suspendUser(id, message, mustChangeUsername, until) {
-    const changes = {
-      $set: {
-        suspensionDetails: {},
-      }
-    };
-    if (mustChangeUsername) {
-      changes.$set.status = 'BANNED';
-      changes.$set.canEditName = true;
-      changes.$set.suspensionDetails.mustChangeUsername = true;
-    }
-    if (until) {
-      changes.$set.suspensionDetails.until = until;
-    }
-    return UserModel.findOneAndUpdate({id}, changes)
+  static suspendUser(id, message, until) {
+    console.log('SUSPEND');
+    return UserModel.findOneAndUpdate(
+      {id}, {
+        $set: {
+          suspension: {
+            until,
+          },
+        }
+      })
       .then((user) => {
+        console.log(user);
+        if (message) {
+          let localProfile = user.profiles.find((profile) => profile.provider === 'local');
+
+          if (localProfile) {
+            const options =
+              {
+                template: 'suspension',              // needed to know which template to render!
+                locals: {                            // specifies the template locals.
+                  body: message
+                },
+                subject: 'Email Suspension',
+                to: localProfile.id  // This only works if the user has registered via e-mail.
+                                     // We may want a standard way to access a user's e-mail address in the future
+              };
+
+            return MailerService.sendSimple(options);
+          } else {
+            return Promise.reject(errors.ErrMissingEmail);
+          }
+        }
+      });
+  }
+
+  /**
+   * Reject username. It changes the status to BANNED and canEditName to True.
+   * @param  {String}   id                  id of a user
+   * @param  {String}   message             message to be send to the user
+   * @param  {Date}     until               date until the suspension is valid.
+   */
+  static rejectUsername(id, message) {
+    return UserModel.findOneAndUpdate(
+      {id}, {
+        $set: {
+          status: 'BANNED',
+          canEditName: true,
+        }
+      }).then((user) => {
         if (message) {
           let localProfile = user.profiles.find((profile) => profile.provider === 'local');
 
@@ -822,7 +854,6 @@ module.exports = class UsersService {
         lowercaseUsername: username.toLowerCase(),
         canEditName: false,
         status: 'PENDING',
-        'suspensionDetails.mustChangeUsername': false,
       }
     })
     .then((result) => {

From 2bdf413b88a31483d25280d90b1444dc1f7c4fe4 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 18 May 2017 02:16:20 +0700
Subject: [PATCH 26/58] Integrate into embed stream

---
 .../src/components/Embed.js                   |  7 +--
 .../src/components/Stream.js                  | 58 ++++++++++---------
 .../src/components/SuspendAccount.css}        |  5 --
 .../src}/components/SuspendedAccount.js       |  9 +--
 .../components/RestrictedContent.js           |  5 +-
 .../components/RestrictedMessageBox.css       |  5 ++
 .../components/RestrictedMessageBox.js        |  4 ++
 models/user.js                                |  2 +-
 8 files changed, 50 insertions(+), 45 deletions(-)
 rename client/{coral-framework/components/RestrictedContent.css => coral-embed-stream/src/components/SuspendAccount.css} (67%)
 rename client/{coral-framework => coral-embed-stream/src}/components/SuspendedAccount.js (88%)
 create mode 100644 client/coral-framework/components/RestrictedMessageBox.css
 create mode 100644 client/coral-framework/components/RestrictedMessageBox.js

diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index 0d26cf740..331cfd9a1 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -9,7 +9,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 {
@@ -68,10 +67,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>
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 2297a295b..6c84dd1ea 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -9,8 +9,8 @@ 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 ChangeUsernameContainer
   from 'coral-sign-in/containers/ChangeUsernameContainer';
 
@@ -49,6 +49,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 &&
@@ -72,32 +73,35 @@ 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>
+                  In accordance with &lt;organization name&gt;'s Community Guidlines,
+                  you have been temporarily suspended. You can rejoin the conversation
+                  with  our community in x hours.
+                </RestrictedMessageBox>
+              }
+              {banned &&
+                <SuspendedAccount
+                  canEditName={user && user.canEditName}
+                  editName={editName}
+                />
+              }
+              {loggedIn && !banned &&
+                <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 &&
diff --git a/client/coral-framework/components/RestrictedContent.css b/client/coral-embed-stream/src/components/SuspendAccount.css
similarity index 67%
rename from client/coral-framework/components/RestrictedContent.css
rename to client/coral-embed-stream/src/components/SuspendAccount.css
index ca5a6517c..f491ea889 100644
--- a/client/coral-framework/components/RestrictedContent.css
+++ b/client/coral-embed-stream/src/components/SuspendAccount.css
@@ -1,8 +1,3 @@
-.message {
-  background: #D8D8D8;
-  padding: 25px;
-}
-
 .editNameInput {
   margin-top: 10px;
   margin-bottom: 10px;
diff --git a/client/coral-framework/components/SuspendedAccount.js b/client/coral-embed-stream/src/components/SuspendedAccount.js
similarity index 88%
rename from client/coral-framework/components/SuspendedAccount.js
rename to client/coral-embed-stream/src/components/SuspendedAccount.js
index 446169b37..bf1de4c36 100644
--- a/client/coral-framework/components/SuspendedAccount.js
+++ b/client/coral-embed-stream/src/components/SuspendedAccount.js
@@ -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>;
   }
 }
 
diff --git a/client/coral-framework/components/RestrictedContent.js b/client/coral-framework/components/RestrictedContent.js
index 32aaf632d..d3406ca40 100644
--- a/client/coral-framework/components/RestrictedContent.js
+++ b/client/coral-framework/components/RestrictedContent.js
@@ -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>;
diff --git a/client/coral-framework/components/RestrictedMessageBox.css b/client/coral-framework/components/RestrictedMessageBox.css
new file mode 100644
index 000000000..396decd9c
--- /dev/null
+++ b/client/coral-framework/components/RestrictedMessageBox.css
@@ -0,0 +1,5 @@
+.message {
+  background: #D8D8D8;
+  padding: 25px;
+}
+
diff --git a/client/coral-framework/components/RestrictedMessageBox.js b/client/coral-framework/components/RestrictedMessageBox.js
new file mode 100644
index 000000000..c579a4731
--- /dev/null
+++ b/client/coral-framework/components/RestrictedMessageBox.js
@@ -0,0 +1,4 @@
+import React from 'react';
+import styles from './RestrictedMessageBox.css';
+
+export default ({children}) => <div className={styles.message}>{children}</div>;
diff --git a/models/user.js b/models/user.js
index 8d6cbdbb9..0a68ae07b 100644
--- a/models/user.js
+++ b/models/user.js
@@ -221,7 +221,7 @@ UserSchema.method('can', function(...actions) {
     throw new Error(`invalid actions: ${actions}`);
   }
 
-  if (this.status === 'BANNED') {
+  if (this.status === 'BANNED' || this.suspension.until && this.suspension.until > new Date()) {
     return false;
   }
 

From 492b9732066cfffb65d846e247573e6d8dde09ef Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 18 May 2017 02:26:38 +0700
Subject: [PATCH 27/58] Add 1 extra suspension minute

---
 .../ModerationQueue/components/SuspendUserDialog.js          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js b/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
index 292c0909e..47c449d0e 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
@@ -39,10 +39,13 @@ class SuspendUserDialog extends React.Component {
   }
 
   handlePerform = () => {
+
     this.props.onPerform({
       id: this.props.userId,
       message: this.state.message,
-      until: dateAdd(new Date(), 'hour', this.state.duration),
+
+      // Add 1 minute more to help `timeago.js` to display the correct duration.
+      until: dateAdd(new Date(), 'minute', this.state.duration * 60 + 1),
     });
   };
 

From 9eac05c8fb1117434cabfc087e507012dc47eed2 Mon Sep 17 00:00:00 2001
From: Benjamin Goering <bengoering@gmail.com>
Date: Wed, 17 May 2017 13:18:59 -0700
Subject: [PATCH 28/58] Ignored user tombstones work again

---
 .../src/components/Stream.js                  | 15 ++++---
 .../src/containers/Stream.js                  |  4 ++
 .../coral-embed-stream/src/graphql/index.js   | 44 ++++++++++++++-----
 client/coral-framework/reducers/user.js       | 11 +----
 4 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 2297a295b..90fa0aca8 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -25,7 +25,7 @@ class Stream extends React.Component {
 
   render() {
     const {
-      root: {asset, asset: {comments}, comment, myIgnoredUsers},
+      root: {asset, asset: {comments}, comment, me},
       postComment,
       addNotification,
       postFlag,
@@ -58,8 +58,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
@@ -150,8 +151,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 +181,9 @@ class Stream extends React.Component {
                           charCountEnable={asset.settings.charCountEnable}
                           maxCharCount={asset.settings.charCount}
                           editComment={this.props.editComment}
-                        />)
+                        />
+                    );
+                  }
                 )}
               </div>
               <LoadMore
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index daac49c51..b4b800d3c 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -113,6 +113,7 @@ class StreamContainer extends React.Component {
   componentDidMount() {
     if (this.props.previousTab) {
       this.props.data.refetch();
+      this.props.setCommentCountCache(0);
     }
     this.countPoll = setInterval(() => {
       this.getCounts(this.props.data.variables);
@@ -205,6 +206,9 @@ const fragments = {
       }
       me {
         status
+        ignoredUsers {
+          id
+        }
       }
       ...${getDefinitionName(Comment.fragments.root)}
     }
diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js
index 5ab1f0c37..09756fcd1 100644
--- a/client/coral-embed-stream/src/graphql/index.js
+++ b/client/coral-embed-stream/src/graphql/index.js
@@ -122,19 +122,43 @@ 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: () => ({
-
-      // TODO: don't rely on refetching.
+    StopIgnoringUser: ({variables}) => ({
       refetchQueries: [
-        'EmbedQuery', 'EmbedStreamProfileQuery',
+        'EmbedQuery',
       ],
+      updateQueries: {
+        EmbedStreamProfileQuery: (previousData, {mutationResult}) => {
+          const noLongerIgnoredUserId = variables.id;
+          const response = mutationResult.data.stopIgnoringUser;
+          if (noLongerIgnoredUserId && !response.errors) {
+
+            // 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 = []}},
diff --git a/client/coral-framework/reducers/user.js b/client/coral-framework/reducers/user.js
index 2969665e3..bc40cf3ae 100644
--- a/client/coral-framework/reducers/user.js
+++ b/client/coral-framework/reducers/user.js
@@ -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;
 }

From e34389752655861d548f751aba69ad379bc52125 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 17 May 2017 15:11:00 -0600
Subject: [PATCH 29/58] user detail copy button regression

---
 .../src/containers/ModerationQueue/UserDetail.css      | 10 ++++++++++
 .../src/containers/ModerationQueue/UserDetail.js       |  6 +++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.css b/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
index eb3f2e4c7..9c735d72b 100644
--- a/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
+++ b/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
@@ -30,3 +30,13 @@
     font-weight: bold;
   }
 }
+
+.profileEmail {
+  border: none;
+  background-color: transparent;
+  pointer-events: none;
+  font-size: 16px;
+  position: absolute;
+  width: 100%;
+  outline: none;
+}
diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
index 200b8537d..e05741889 100644
--- a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
+++ b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
@@ -11,7 +11,7 @@ class UserDetail extends React.Component {
     hideUserDetail: PropTypes.func.isRequired
   }
 
-  copyPermalink () {
+  copyPermalink = () => {
     this.profile.select();
     try {
       document.execCommand('copy');
@@ -45,8 +45,8 @@ class UserDetail extends React.Component {
     return (
       <Drawer handleClickOutside={hideUserDetail}>
         <h3>{user.username}</h3>
-        <Button className={styles.copyButton}>Copy</Button>
-        {profile && <p ref={(ref) => this.profile = ref} contentEditable="true">{profile}</p>}
+        <Button className={styles.copyButton} onClick={this.copyPermalink}>Copy</Button>
+        {profile && <input className={styles.profileEmail} 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/>

From 88377b31804fd4bd44e08e8629051798304027bc Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 17 May 2017 15:37:13 -0600
Subject: [PATCH 30/58] do not show Config tab for non-admins

---
 .../coral-admin/src/components/ui/Header.js   | 27 +++++++++++++------
 .../coral-admin/src/components/ui/Layout.js   |  7 ++++-
 .../src/containers/Configure/Configure.js     |  7 +++++
 client/coral-framework/utils/roles.js         |  2 +-
 4 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 6418efb10..32df0c011 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -5,8 +5,14 @@ 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/utils/roles';
 
-const CoralHeader = ({handleLogout, showShortcuts = () => {}, restricted = false}) => (
+const CoralHeader = ({
+  handleLogout,
+  showShortcuts = () => {},
+  restricted = false,
+  auth
+}) => (
   <Header className={styles.header}>
     <Logo className={styles.logo} />
     {
@@ -41,13 +47,17 @@ const CoralHeader = ({handleLogout, showShortcuts = () => {}, restricted = false
             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>
+          {
+            auth.user && can(auth.user, 'UPDATE_CONFIG') && (
+              <Link
+                id='configureNav'
+                className={styles.navLink}
+                to="/admin/configure"
+                activeClassName={styles.active}>
+                {lang.t('configure.configure')}
+              </Link>
+            )
+          }
         </Navigation>
         <div className={styles.rightPanel}>
           <ul>
@@ -73,6 +83,7 @@ const CoralHeader = ({handleLogout, showShortcuts = () => {}, restricted = false
 );
 
 CoralHeader.propTypes = {
+  auth: PropTypes.object.isRequired,
   showShortcuts: PropTypes.func,
   handleLogout: PropTypes.func.isRequired,
   restricted: PropTypes.bool // hide elemnts from a user that's logged out
diff --git a/client/coral-admin/src/components/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js
index 6bf9661b7..cb783ce5e 100644
--- a/client/coral-admin/src/components/ui/Layout.js
+++ b/client/coral-admin/src/components/ui/Layout.js
@@ -4,7 +4,12 @@ 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}
diff --git a/client/coral-admin/src/containers/Configure/Configure.js b/client/coral-admin/src/containers/Configure/Configure.js
index e041edfe3..44c38cd50 100644
--- a/client/coral-admin/src/containers/Configure/Configure.js
+++ b/client/coral-admin/src/containers/Configure/Configure.js
@@ -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/utils/roles';
 
 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);
diff --git a/client/coral-framework/utils/roles.js b/client/coral-framework/utils/roles.js
index f5a285e17..e93744506 100644
--- a/client/coral-framework/utils/roles.js
+++ b/client/coral-framework/utils/roles.js
@@ -5,7 +5,7 @@ const basicRoles = {
 };
 
 const queryRoles = {
-  UPDATE_CONFIG: ['ADMIN', 'MODERATOR'],
+  UPDATE_CONFIG: ['ADMIN'],
   ACCESS_ADMIN: ['ADMIN', 'MODERATOR'],
   VIEW_USER_EMAILS: ['ADMIN']
 };

From 4a97db3357803a64df843b230fb926ff3f1a7b0c Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 17 May 2017 15:41:49 -0600
Subject: [PATCH 31/58] emma's copy

---
 client/coral-admin/src/containers/LayoutContainer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js
index 6f14c6684..ce2761ce8 100644
--- a/client/coral-admin/src/containers/LayoutContainer.js
+++ b/client/coral-admin/src/containers/LayoutContainer.js
@@ -55,7 +55,7 @@ class LayoutContainer extends Component {
         />
       );
     } else if (loggedIn) {
-      return <p>you do not have permission to see this page.</p>;
+      return <p>This page is for team use only. Please contact an administrator if you want to join this team.</p>;
     }
     return <FullLoading />;
   }

From 54abaeb587d410749ca98bcb28787aece2cc3f0b Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Wed, 17 May 2017 15:47:41 -0600
Subject: [PATCH 32/58] wrap the not-authorized warning in a template

---
 client/coral-admin/src/containers/LayoutContainer.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js
index ce2761ce8..adeb8a346 100644
--- a/client/coral-admin/src/containers/LayoutContainer.js
+++ b/client/coral-admin/src/containers/LayoutContainer.js
@@ -55,7 +55,11 @@ class LayoutContainer extends Component {
         />
       );
     } else if (loggedIn) {
-      return <p>This page is for team use only. Please contact an administrator if you want to join this team.</p>;
+      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 />;
   }

From 3fc1029a9315e2daacdf42296427e1175d69a8bd Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Wed, 17 May 2017 16:00:01 -0600
Subject: [PATCH 33/58] do not require auth in the Header

---
 client/coral-admin/src/components/ui/Header.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 32df0c011..094aeee7d 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -48,7 +48,7 @@ const CoralHeader = ({
             {lang.t('configure.community')}
           </Link>
           {
-            auth.user && can(auth.user, 'UPDATE_CONFIG') && (
+            auth && auth.user && can(auth.user, 'UPDATE_CONFIG') && (
               <Link
                 id='configureNav'
                 className={styles.navLink}
@@ -83,7 +83,7 @@ const CoralHeader = ({
 );
 
 CoralHeader.propTypes = {
-  auth: PropTypes.object.isRequired,
+  auth: PropTypes.object,
   showShortcuts: PropTypes.func,
   handleLogout: PropTypes.func.isRequired,
   restricted: PropTypes.bool // hide elemnts from a user that's logged out

From c4210db3074dd1a03176441948c36bf12329f346 Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Wed, 17 May 2017 16:10:02 -0600
Subject: [PATCH 34/58] staff should not see moderate tag. translations

---
 client/coral-admin/src/components/ui/Header.js | 18 +++++++++++-------
 client/coral-admin/src/translations.json       |  2 ++
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 094aeee7d..38797a7c3 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -26,13 +26,17 @@ const CoralHeader = ({
             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>
+          {
+            auth && auth.user && 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}
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 68a3b93d5..5279ac451 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -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",
@@ -193,6 +194,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",

From d93ad38dd18af0af0e97860f0b5d92bb6d4c7d6e Mon Sep 17 00:00:00 2001
From: Benjamin Goering <bengoering@gmail.com>
Date: Wed, 17 May 2017 15:39:19 -0700
Subject: [PATCH 35/58] Admins can change Edit Comment Window length in
 Moderation Settings

---
 .../src/containers/Configure/Configure.css    | 21 ++++++++-------
 .../Configure/ModerationSettings.js           | 27 +++++++++++++++++++
 .../containers/Configure/StreamSettings.js    |  2 +-
 client/coral-admin/src/translations.json      |  6 +++++
 .../coral-embed-stream/src/graphql/index.js   |  6 ++++-
 graph/resolvers/comment.js                    |  6 +++--
 models/comment.js                             |  7 -----
 models/setting.js                             |  7 +++++
 services/comments.js                          |  6 +++--
 9 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css
index 04ef96dd2..3d5750693 100644
--- a/client/coral-admin/src/containers/Configure/Configure.css
+++ b/client/coral-admin/src/containers/Configure/Configure.css
@@ -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;
diff --git a/client/coral-admin/src/containers/Configure/ModerationSettings.js b/client/coral-admin/src/containers/Configure/ModerationSettings.js
index 5b7286b98..56be58c02 100644
--- a/client/coral-admin/src/containers/Configure/ModerationSettings.js
+++ b/client/coral-admin/src/containers/Configure/ModerationSettings.js
@@ -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>
   );
 };
diff --git a/client/coral-admin/src/containers/Configure/StreamSettings.js b/client/coral-admin/src/containers/Configure/StreamSettings.js
index 646eb9d9e..341c47ae9 100644
--- a/client/coral-admin/src/containers/Configure/StreamSettings.js
+++ b/client/coral-admin/src/containers/Configure/StreamSettings.js
@@ -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}
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 68a3b93d5..c31019031 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -106,6 +106,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.",
@@ -294,6 +297,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.",
diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js
index 5ab1f0c37..deb604b5c 100644
--- a/client/coral-embed-stream/src/graphql/index.js
+++ b/client/coral-embed-stream/src/graphql/index.js
@@ -200,7 +200,11 @@ const extension = {
       variables: {id, edit},
     }) => ({
       updateQueries: {
-        EmbedQuery: (previousData, {mutationResult: {data: {editComment: {comment: {status}}}}}) => {
+        EmbedQuery: (previousData, {mutationResult: {data: {editComment: {comment, errors}}}}) => {
+          if (errors && errors.length) {
+            return previousData;
+          }
+          const {status} = comment;
           const updateCommentWithEdit = (comment, edit) => {
             const {body} = edit;
             const editedComment = update(comment, {
diff --git a/graph/resolvers/comment.js b/graph/resolvers/comment.js
index 8d0473900..6f3313356 100644
--- a/graph/resolvers/comment.js
+++ b/graph/resolvers/comment.js
@@ -48,10 +48,12 @@ const Comment = {
   asset({asset_id}, _, {loaders: {Assets}}) {
     return Assets.getByID.load(asset_id);
   },
-  editing(comment) {
+  async editing(comment, _, {loaders: {Settings}}) {
+    const settings = await Settings.load();
+    const editableUntil = new Date(Number(comment.created_at) + settings.editCommentWindowLength);
     return {
       edited: comment.edited,
-      editableUntil: comment.editableUntil
+      editableUntil: editableUntil
     };
   }
 };
diff --git a/models/comment.js b/models/comment.js
index ddd39c68e..27a2bfae3 100644
--- a/models/comment.js
+++ b/models/comment.js
@@ -2,8 +2,6 @@ const mongoose = require('../services/mongoose');
 const Schema = mongoose.Schema;
 const uuid = require('uuid');
 
-const EDIT_WINDOW_MS = 30 * 1000; // 30 seconds
-
 const STATUSES = [
   'ACCEPTED',
   'REJECTED',
@@ -113,12 +111,7 @@ CommentSchema.virtual('edited').get(function() {
   return this.body_history.length > 1;
 });
 
-CommentSchema.virtual('editableUntil').get(function() {
-  return new Date(Number(this.created_at) + EDIT_WINDOW_MS);
-});
-
 // Comment model.
 const Comment = mongoose.model('Comment', CommentSchema);
 
 module.exports = Comment;
-module.exports.EDIT_WINDOW_MS = EDIT_WINDOW_MS;
diff --git a/models/setting.js b/models/setting.js
index e63fa8f3e..ecd9dfd26 100644
--- a/models/setting.js
+++ b/models/setting.js
@@ -88,6 +88,13 @@ const SettingSchema = new Schema({
       type: Array,
       default: ['localhost']
     }
+  },
+
+  // Length of time (in milliseconds) after a comment is posted that it can still be edited by the author
+  editCommentWindowLength: {
+    type: Number,
+    min: [0, 'Edit Comment Window length must be greater than zero'],
+    default: 30 * 1000,
   }
 }, {
   timestamps: {
diff --git a/services/comments.js b/services/comments.js
index 272b19cd0..f5defb935 100644
--- a/services/comments.js
+++ b/services/comments.js
@@ -1,8 +1,8 @@
 const CommentModel = require('../models/comment');
-const EDIT_WINDOW_MS = CommentModel.EDIT_WINDOW_MS;
 
 const ActionModel = require('../models/action');
 const ActionsService = require('./actions');
+const SettingsService = require('./settings');
 
 const errors = require('../errors');
 
@@ -53,8 +53,10 @@ module.exports = class CommentsService {
 
     // Establish the edit window (if it exists) and add the condition to the
     // original query.
-    const lastEditableCommentCreatedAt = new Date((new Date()).getTime() - EDIT_WINDOW_MS);
+    let lastEditableCommentCreatedAt;
     if (!ignoreEditWindow) {
+      const editWindowMs = (await SettingsService.retrieve()).editCommentWindowLength;
+      lastEditableCommentCreatedAt = new Date((new Date()).getTime() - editWindowMs);
       query.created_at = {
         $gt: lastEditableCommentCreatedAt,
       };

From cb1a4ee1cc2820749e766dea03805b02b80801b7 Mon Sep 17 00:00:00 2001
From: Benjamin Goering <bengoering@gmail.com>
Date: Wed, 17 May 2017 15:40:32 -0700
Subject: [PATCH 36/58] remove extraneous console.log

---
 services/users.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/services/users.js b/services/users.js
index 9d15e129f..0c83832ab 100644
--- a/services/users.js
+++ b/services/users.js
@@ -867,6 +867,5 @@ module.exports = class UsersService {
         ignoresUsers: usersToStopIgnoring
       }
     });
-    console.log('Mongo wrote stopIgnoringUsers', usersToStopIgnoring);
   }
 };

From 340d3cea62e3d9df4a3d110b88a6fdac16867cce Mon Sep 17 00:00:00 2001
From: Benjamin Goering <bengoering@gmail.com>
Date: Thu, 18 May 2017 08:10:20 -0700
Subject: [PATCH 37/58] contains/Stream setCommentCountCache waits for refetch
 promise

---
 client/coral-embed-stream/src/containers/Stream.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index b4b800d3c..b54e69dd6 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -112,8 +112,8 @@ class StreamContainer extends React.Component {
 
   componentDidMount() {
     if (this.props.previousTab) {
-      this.props.data.refetch();
-      this.props.setCommentCountCache(0);
+      this.props.data.refetch()
+        .then(() => this.props.setCommentCountCache(0));
     }
     this.countPoll = setInterval(() => {
       this.getCounts(this.props.data.variables);

From 6bbeee3a6b5fa942ae5a29079071c54aed25b3a0 Mon Sep 17 00:00:00 2001
From: Benjamin Goering <bengoering@gmail.com>
Date: Thu, 18 May 2017 08:11:39 -0700
Subject: [PATCH 38/58] StopIgnoringUser does not refetch EmbedQuery

---
 client/coral-embed-stream/src/graphql/index.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js
index 09756fcd1..079f0697b 100644
--- a/client/coral-embed-stream/src/graphql/index.js
+++ b/client/coral-embed-stream/src/graphql/index.js
@@ -139,9 +139,6 @@ const extension = {
       }
     }),
     StopIgnoringUser: ({variables}) => ({
-      refetchQueries: [
-        'EmbedQuery',
-      ],
       updateQueries: {
         EmbedStreamProfileQuery: (previousData, {mutationResult}) => {
           const noLongerIgnoredUserId = variables.id;

From fb33eefe8e2da22b6f023c6929ad9a7c0fe41750 Mon Sep 17 00:00:00 2001
From: Benjamin Goering <bengoering@gmail.com>
Date: Thu, 18 May 2017 08:19:52 -0700
Subject: [PATCH 39/58] trivial changes requested by review

---
 .../coral-admin/src/containers/Configure/ModerationSettings.js  | 2 +-
 client/coral-embed-stream/src/graphql/index.js                  | 2 ++
 services/comments.js                                            | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/containers/Configure/ModerationSettings.js b/client/coral-admin/src/containers/Configure/ModerationSettings.js
index 56be58c02..c7df573e8 100644
--- a/client/coral-admin/src/containers/Configure/ModerationSettings.js
+++ b/client/coral-admin/src/containers/Configure/ModerationSettings.js
@@ -80,7 +80,7 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
         onChangeWordlist={onChangeWordlist} />
 
       {/* Edit Comment Timeframe */}
-      <Card className={`${styles.configSetting}`}>
+      <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')}
diff --git a/client/coral-embed-stream/src/graphql/index.js b/client/coral-embed-stream/src/graphql/index.js
index deb604b5c..145098672 100644
--- a/client/coral-embed-stream/src/graphql/index.js
+++ b/client/coral-embed-stream/src/graphql/index.js
@@ -201,6 +201,8 @@ const extension = {
     }) => ({
       updateQueries: {
         EmbedQuery: (previousData, {mutationResult: {data: {editComment: {comment, errors}}}}) => {
+
+          // @TODO (kiwi) revisit after streamlining error handling
           if (errors && errors.length) {
             return previousData;
           }
diff --git a/services/comments.js b/services/comments.js
index f5defb935..def557c96 100644
--- a/services/comments.js
+++ b/services/comments.js
@@ -55,7 +55,7 @@ module.exports = class CommentsService {
     // original query.
     let lastEditableCommentCreatedAt;
     if (!ignoreEditWindow) {
-      const editWindowMs = (await SettingsService.retrieve()).editCommentWindowLength;
+      const {editCommentWindowLength: editWindowMs} = await SettingsService.retrieve();
       lastEditableCommentCreatedAt = new Date((new Date()).getTime() - editWindowMs);
       query.created_at = {
         $gt: lastEditableCommentCreatedAt,

From 555c593059ca525d0ca22549b2c4881c4973a56e Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 18 May 2017 11:08:46 -0600
Subject: [PATCH 40/58] Added gzip compression to bundle assets

---
 app.js            | 10 ++++++++++
 package.json      |  2 ++
 routes/index.js   | 14 ++++++++++++--
 webpack.config.js |  8 ++++++++
 yarn.lock         | 43 +++++++++++++++++++++++++++++++++++++++----
 5 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/app.js b/app.js
index 9aca8b0ef..1ec1db78a 100644
--- a/app.js
+++ b/app.js
@@ -10,6 +10,7 @@ const enabled = require('debug').enabled;
 const errors = require('./errors');
 const {createGraphOptions} = require('./graph');
 const apollo = require('graphql-server-express');
+const accepts = require('accepts');
 
 const app = express();
 
@@ -31,6 +32,15 @@ app.use(helmet({
   frameguard: false
 }));
 app.use(bodyParser.json());
+app.get('*.js', (req, res, next) => {
+  const accept = accepts(req);
+  if (accept.encoding(['gzip']) === 'gzip') {
+    req.url = `${req.url}.gz`;
+    res.set('Content-Encoding', 'gzip');
+  }
+
+  next();
+});
 app.use('/client', express.static(path.join(__dirname, 'dist')));
 app.use('/public', express.static(path.join(__dirname, 'public')));
 app.set('views', path.join(__dirname, 'views'));
diff --git a/package.json b/package.json
index fe7552414..76d822033 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
   },
   "homepage": "https://github.com/coralproject/talk#readme",
   "dependencies": {
+    "accepts": "^1.3.3",
     "app-module-path": "^2.2.0",
     "bcrypt": "^1.0.2",
     "body-parser": "^1.17.1",
@@ -131,6 +132,7 @@
     "chai-as-promised": "^6.0.0",
     "chai-http": "^3.0.0",
     "common-tags": "^1.4.0",
+    "compression-webpack-plugin": "^0.4.0",
     "copy-webpack-plugin": "^4.0.0",
     "css-loader": "^0.27.3",
     "dialog-polyfill": "^0.4.4",
diff --git a/routes/index.js b/routes/index.js
index 448bd6964..f1992e83d 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -8,8 +8,18 @@ const router = express.Router();
 router.use('/api/v1', require('./api'));
 router.use('/admin', require('./admin'));
 router.use('/embed', require('./embed'));
-router.get('/embed.js', (req, res) => res.sendFile(path.join(__dirname, '../dist/embed.js')));
-router.get('/embed.js.map', (req, res) => res.sendFile(path.join(__dirname, '../dist/embed.js.map')));
+
+/**
+ * Serves a file based on a relative path.
+ */
+const serveFile = (filename) => (req, res) => res.sendFile(path.join(__dirname, filename));
+
+/**
+ * Serves the embed javascript files.
+ */
+router.get('/embed.js', serveFile('../dist/embed.js'));
+router.get('/embed.js.gz', serveFile('../dist/embed.js.gz'));
+router.get('/embed.js.map', serveFile('../dist/embed.js.map'));
 
 if (process.env.NODE_ENV !== 'production') {
   router.use('/assets', require('./assets'));
diff --git a/webpack.config.js b/webpack.config.js
index 2d751f8b2..5072ec77a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const fs = require('fs');
+const CompressionPlugin = require('compression-webpack-plugin');
 const autoprefixer = require('autoprefixer');
 const precss = require('precss');
 const Copy = require('copy-webpack-plugin');
@@ -145,6 +146,13 @@ module.exports = {
     }),
     new webpack.EnvironmentPlugin({
       'TALK_PLUGINS_JSON': '{}'
+    }),
+    new CompressionPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: /\.(js)$/,
+      threshold: 10240,
+      minRatio: 0.8
     })
   ],
   resolveLoader: {
diff --git a/yarn.lock b/yarn.lock
index ef1afebfc..3cbe44a2b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -67,7 +67,7 @@ abbrev@1, abbrev@1.0.x:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
 
-accepts@~1.3.3:
+accepts@^1.3.3, accepts@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
   dependencies:
@@ -334,6 +334,10 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
+async@0.2.x:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+
 async@1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/async/-/async-1.2.1.tgz#a4816a17cd5ff516dfa2c7698a453369b9790de0"
@@ -1807,6 +1811,15 @@ component-emitter@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
 
+compression-webpack-plugin@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-0.4.0.tgz#811de04215f811ea6a12d4d8aed8457d758f13ac"
+  dependencies:
+    async "0.2.x"
+    webpack-sources "^0.1.0"
+  optionalDependencies:
+    node-zopfli "^2.0.0"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -2290,6 +2303,12 @@ default-require-extensions@^1.0.0:
   dependencies:
     strip-bom "^2.0.0"
 
+defaults@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
+  dependencies:
+    clone "^1.0.2"
+
 define-properties@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
@@ -5322,7 +5341,7 @@ mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
-nan@2.5.0, nan@^2.3.0, nan@^2.4.0:
+nan@2.5.0, nan@^2.0.0, nan@^2.3.0, nan@^2.4.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.0.tgz#aa8f1e34531d807e9e27755b234b4a6ec0c152a8"
 
@@ -5433,7 +5452,7 @@ node-libs-browser@^2.0.0:
     util "^0.10.3"
     vm-browserify "0.0.4"
 
-node-pre-gyp@0.6.32, node-pre-gyp@^0.6.29:
+node-pre-gyp@0.6.32, node-pre-gyp@^0.6.29, node-pre-gyp@^0.6.4:
   version "0.6.32"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.32.tgz#fc452b376e7319b3d255f5f34853ef6fd8fe1fd5"
   dependencies:
@@ -5461,6 +5480,15 @@ node-redis-warlock@~0.2.0:
     node-redis-scripty "0.0.5"
     uuid "^2.0.1"
 
+node-zopfli@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/node-zopfli/-/node-zopfli-2.0.2.tgz#a7a473ae92aaea85d4c68d45bbf2c944c46116b8"
+  dependencies:
+    commander "^2.8.1"
+    defaults "^1.0.2"
+    nan "^2.0.0"
+    node-pre-gyp "^0.6.4"
+
 nodemailer-direct-transport@3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/nodemailer-direct-transport/-/nodemailer-direct-transport-3.3.2.tgz#e96fafb90358560947e569017d97e60738a50a86"
@@ -7508,7 +7536,7 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-source-list-map@^0.1.7:
+source-list-map@^0.1.7, source-list-map@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
 
@@ -8254,6 +8282,13 @@ webidl-conversions@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.1.tgz#8015a17ab83e7e1b311638486ace81da6ce206a0"
 
+webpack-sources@^0.1.0:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.5.3"
+
 webpack-sources@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.2.3.tgz#17c62bfaf13c707f9d02c479e0dcdde8380697fb"

From 12713dae8650341dc5568a68dd3be164f6ff6822 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 18 May 2017 11:18:08 -0600
Subject: [PATCH 41/58] Removed unused assets

---
 .../coral-embed-stream/public/samplearticle.html | 16 ----------------
 client/lib/pym.v1.min.js                         |  2 --
 webpack.config.js                                |  6 +-----
 3 files changed, 1 insertion(+), 23 deletions(-)
 delete mode 100644 client/coral-embed-stream/public/samplearticle.html
 delete mode 100644 client/lib/pym.v1.min.js

diff --git a/client/coral-embed-stream/public/samplearticle.html b/client/coral-embed-stream/public/samplearticle.html
deleted file mode 100644
index 454cb249c..000000000
--- a/client/coral-embed-stream/public/samplearticle.html
+++ /dev/null
@@ -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>
diff --git a/client/lib/pym.v1.min.js b/client/lib/pym.v1.min.js
deleted file mode 100644
index 7aa54058d..000000000
--- a/client/lib/pym.v1.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! pym.js - v1.1.2 - 2016-10-25 */
-!function(a){"function"==typeof define&&define.amd?define(a):"undefined"!=typeof module&&module.exports?module.exports=a():window.pym=a.call(this)}(function(){var a="xPYMx",b={},c=function(a){var b=new RegExp("[\\?&]"+a.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]")+"=([^&#]*)"),c=b.exec(location.search);return null===c?"":decodeURIComponent(c[1].replace(/\+/g," "))},d=function(a,b){if("*"===b.xdomain||a.origin.match(new RegExp(b.xdomain+"$")))return!0},e=function(b,c,d){var e=["pym",b,c,d];return e.join(a)},f=function(b){var c=["pym",b,"(\\S+)","(.*)"];return new RegExp("^"+c.join(a)+"$")},g=function(){for(var a=b.autoInitInstances.length,c=a-1;c>=0;c--){var d=b.autoInitInstances[c];d.el.getElementsByTagName("iframe").length&&d.el.getElementsByTagName("iframe")[0].contentWindow||b.autoInitInstances.splice(c,1)}};return b.autoInitInstances=[],b.autoInit=function(){var a=document.querySelectorAll("[data-pym-src]:not([data-pym-auto-initialized])"),c=a.length;g();for(var d=0;d<c;++d){var e=a[d];e.setAttribute("data-pym-auto-initialized",""),""===e.id&&(e.id="pym-"+d);var f=e.getAttribute("data-pym-src"),h={xdomain:"string",title:"string",name:"string",id:"string",sandbox:"string",allowfullscreen:"boolean"},i={};for(var j in h)if(null!==e.getAttribute("data-pym-"+j))switch(h[j]){case"boolean":i[j]=!("false"===e.getAttribute("data-pym-"+j));break;case"string":i[j]=e.getAttribute("data-pym-"+j);break;default:console.err("unrecognized attribute type")}var k=new b.Parent(e.id,f,i);b.autoInitInstances.push(k)}return b.autoInitInstances},b.Parent=function(a,b,c){this.id=a,this.url=b,this.el=document.getElementById(a),this.iframe=null,this.settings={xdomain:"*"},this.messageRegex=f(this.id),this.messageHandlers={},c=c||{},this._constructIframe=function(){var a=this.el.offsetWidth.toString();this.iframe=document.createElement("iframe");var b="",c=this.url.indexOf("#");for(c>-1&&(b=this.url.substring(c,this.url.length),this.url=this.url.substring(0,c)),this.url.indexOf("?")<0?this.url+="?":this.url+="&",this.iframe.src=this.url+"initialWidth="+a+"&childId="+this.id+"&parentTitle="+encodeURIComponent(document.title)+"&parentUrl="+encodeURIComponent(window.location.href)+b,this.iframe.setAttribute("width","100%"),this.iframe.setAttribute("scrolling","no"),this.iframe.setAttribute("marginheight","0"),this.iframe.setAttribute("frameborder","0"),this.settings.title&&this.iframe.setAttribute("title",this.settings.title),void 0!==this.settings.allowfullscreen&&this.settings.allowfullscreen!==!1&&this.iframe.setAttribute("allowfullscreen",""),void 0!==this.settings.sandbox&&"string"==typeof this.settings.sandbox&&this.iframe.setAttribute("sandbox",this.settings.sandbox),this.settings.id&&(document.getElementById(this.settings.id)||this.iframe.setAttribute("id",this.settings.id)),this.settings.name&&this.iframe.setAttribute("name",this.settings.name);this.el.firstChild;)this.el.removeChild(this.el.firstChild);this.el.appendChild(this.iframe),window.addEventListener("resize",this._onResize)},this._onResize=function(){this.sendWidth()}.bind(this),this._fire=function(a,b){if(a in this.messageHandlers)for(var c=0;c<this.messageHandlers[a].length;c++)this.messageHandlers[a][c].call(this,b)},this.remove=function(){window.removeEventListener("message",this._processMessage),window.removeEventListener("resize",this._onResize),this.el.removeChild(this.iframe),g()},this._processMessage=function(a){if(d(a,this.settings)&&"string"==typeof a.data){var b=a.data.match(this.messageRegex);if(!b||3!==b.length)return!1;var c=b[1],e=b[2];this._fire(c,e)}}.bind(this),this._onHeightMessage=function(a){var b=parseInt(a);this.iframe.setAttribute("height",b+"px")},this._onNavigateToMessage=function(a){document.location.href=a},this._onScrollToChildPosMessage=function(a){var b=document.getElementById(this.id).getBoundingClientRect().top+window.pageYOffset,c=b+parseInt(a);window.scrollTo(0,c)},this.onMessage=function(a,b){a in this.messageHandlers||(this.messageHandlers[a]=[]),this.messageHandlers[a].push(b)},this.sendMessage=function(a,b){this.el.getElementsByTagName("iframe").length&&(this.el.getElementsByTagName("iframe")[0].contentWindow?this.el.getElementsByTagName("iframe")[0].contentWindow.postMessage(e(this.id,a,b),"*"):this.remove())},this.sendWidth=function(){var a=this.el.offsetWidth.toString();this.sendMessage("width",a)};for(var h in c)this.settings[h]=c[h];return this.onMessage("height",this._onHeightMessage),this.onMessage("navigateTo",this._onNavigateToMessage),this.onMessage("scrollToChildPos",this._onScrollToChildPosMessage),window.addEventListener("message",this._processMessage,!1),this._constructIframe(),this},b.Child=function(b){this.parentWidth=null,this.id=null,this.parentTitle=null,this.parentUrl=null,this.settings={renderCallback:null,xdomain:"*",polling:0},this.timerId=null,this.messageRegex=null,this.messageHandlers={},b=b||{},this.onMessage=function(a,b){a in this.messageHandlers||(this.messageHandlers[a]=[]),this.messageHandlers[a].push(b)},this._fire=function(a,b){if(a in this.messageHandlers)for(var c=0;c<this.messageHandlers[a].length;c++)this.messageHandlers[a][c].call(this,b)},this._processMessage=function(a){if(d(a,this.settings)&&"string"==typeof a.data){var b=a.data.match(this.messageRegex);if(b&&3===b.length){var c=b[1],e=b[2];this._fire(c,e)}}}.bind(this),this._onWidthMessage=function(a){var b=parseInt(a);b!==this.parentWidth&&(this.parentWidth=b,this.settings.renderCallback&&this.settings.renderCallback(b),this.sendHeight())},this.sendMessage=function(a,b){window.parent.postMessage(e(this.id,a,b),"*")},this.sendHeight=function(){var a=document.getElementsByTagName("body")[0].offsetHeight.toString();return this.sendMessage("height",a),a}.bind(this),this.scrollParentTo=function(a){this.sendMessage("navigateTo","#"+a)},this.navigateParentTo=function(a){this.sendMessage("navigateTo",a)},this.scrollParentToChildEl=function(a){var b=document.getElementById(a).getBoundingClientRect().top+window.pageYOffset;this.scrollParentToChildPos(b)},this.scrollParentToChildPos=function(a){this.sendMessage("scrollToChildPos",a.toString())},this._markWhetherEmbedded=function(a){var b,c=document.getElementsByTagName("html")[0],d=c.className;try{b=window.self!==window.top?"embedded":"not-embedded"}catch(a){b="embedded"}d.indexOf(b)<0&&(c.className=d?d+" "+b:b,a&&a(b))},this.remove=function(){window.removeEventListener("message",this._processMessage),this.timerId&&clearInterval(this.timerId)},this.id=c("childId")||b.id,this.messageRegex=new RegExp("^pym"+a+this.id+a+"(\\S+)"+a+"(.*)$");var f=parseInt(c("initialWidth"));this.parentUrl=c("parentUrl"),this.parentTitle=c("parentTitle"),this.onMessage("width",this._onWidthMessage);for(var g in b)this.settings[g]=b[g];return window.addEventListener("message",this._processMessage,!1),this.settings.renderCallback&&this.settings.renderCallback(f),this.sendHeight(),this.settings.polling&&(this.timerId=window.setInterval(this.sendHeight,this.settings.polling)),this._markWhetherEmbedded(b.onMarkedEmbeddedStatus),this},b.autoInit(),b});
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 5072ec77a..6a05f31b6 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -128,11 +128,7 @@ module.exports = {
       ...buildEmbeds.map((embed) => ({
         from: path.join(__dirname, 'client', `coral-embed-${embed}`, 'style'),
         to: path.join(__dirname, 'dist', 'embed', embed)
-      })),
-      {
-        from: path.join(__dirname, 'client', 'lib'),
-        to: path.join(__dirname, 'dist', 'embed', 'stream')
-      }
+      }))
     ]),
     autoprefixer,
     precss,

From 4dc83aaf6358c9a5b4b58c6b5b7818ef9b9ca5a2 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 18 May 2017 11:27:28 -0600
Subject: [PATCH 42/58] added middleware wrap

---
 app.js            | 31 +++++++++++++++++++++++--------
 webpack.config.js | 21 +++++++++++++--------
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/app.js b/app.js
index 1ec1db78a..868ceee4c 100644
--- a/app.js
+++ b/app.js
@@ -32,17 +32,32 @@ app.use(helmet({
   frameguard: false
 }));
 app.use(bodyParser.json());
-app.get('*.js', (req, res, next) => {
-  const accept = accepts(req);
-  if (accept.encoding(['gzip']) === 'gzip') {
-    req.url = `${req.url}.gz`;
-    res.set('Content-Encoding', 'gzip');
-  }
 
-  next();
-});
+//==============================================================================
+// STATIC FILES
+//==============================================================================
+
+// If the application is in production mode, then add gzip rewriting for the
+// content.
+if (process.env.NODE_ENV === 'production') {
+  app.get('*.js', (req, res, next) => {
+    const accept = accepts(req);
+    if (accept.encoding(['gzip']) === 'gzip') {
+      req.url = `${req.url}.gz`;
+      res.set('Content-Encoding', 'gzip');
+    }
+
+    next();
+  });
+}
+
 app.use('/client', express.static(path.join(__dirname, 'dist')));
 app.use('/public', express.static(path.join(__dirname, 'public')));
+
+//==============================================================================
+// VIEW CONFIGURATION
+//==============================================================================
+
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
diff --git a/webpack.config.js b/webpack.config.js
index 6a05f31b6..78b111579 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -37,7 +37,7 @@ const buildEmbeds = [
   'stream'
 ];
 
-module.exports = {
+const config = {
   devtool: 'cheap-module-source-map',
   entry: Object.assign({}, {
     'embed': [
@@ -142,13 +142,6 @@ module.exports = {
     }),
     new webpack.EnvironmentPlugin({
       'TALK_PLUGINS_JSON': '{}'
-    }),
-    new CompressionPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: /\.(js)$/,
-      threshold: 10240,
-      minRatio: 0.8
     })
   ],
   resolveLoader: {
@@ -168,3 +161,15 @@ module.exports = {
     ]
   }
 };
+
+if (process.env.NODE_ENV === 'production') {
+  config.plugins.push(new CompressionPlugin({
+    asset: '[path].gz[query]',
+    algorithm: 'gzip',
+    test: /\.(js)$/,
+    threshold: 10240,
+    minRatio: 0.8
+  }));
+}
+
+module.exports = config;

From aaa2da6c237185a7e4dc2b03dcdf107aadf56a26 Mon Sep 17 00:00:00 2001
From: Benjamin Goering <bengoering@gmail.com>
Date: Thu, 18 May 2017 10:43:38 -0700
Subject: [PATCH 43/58] Stream container refetch then setCommentCountCache to
 asset.commentCount instead of silly zero

---
 client/coral-embed-stream/src/containers/Stream.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index b54e69dd6..467242592 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -113,7 +113,9 @@ class StreamContainer extends React.Component {
   componentDidMount() {
     if (this.props.previousTab) {
       this.props.data.refetch()
-        .then(() => this.props.setCommentCountCache(0));
+        .then(({data: {asset: {commentCount}}}) => {
+          return this.props.setCommentCountCache(commentCount);
+        });
     }
     this.countPoll = setInterval(() => {
       this.getCounts(this.props.data.variables);

From d98ce38bf52b0a614ba2ac51bad6674141897416 Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Thu, 18 May 2017 12:06:07 -0600
Subject: [PATCH 44/58] show config tab to admins. hide menu items from users
 that can't access admin

---
 .../coral-admin/src/components/ui/Header.js   | 104 +++++++++---------
 .../src/containers/Configure/Configure.js     |   2 +-
 .../src/containers/LayoutContainer.js         |   2 +-
 3 files changed, 53 insertions(+), 55 deletions(-)

diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 38797a7c3..181bfe688 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -10,59 +10,61 @@ import {can} from 'coral-framework/utils/roles';
 const CoralHeader = ({
   handleLogout,
   showShortcuts = () => {},
-  restricted = false,
   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>
-          {
-            auth && auth.user && 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>
-          {
-            auth && auth.user && can(auth.user, 'UPDATE_CONFIG') && (
-              <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>
+            {
+              auth && auth.user && 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>
+            {
+              auth && auth.user && 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}>
@@ -80,17 +82,13 @@ const CoralHeader = ({
           </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);
diff --git a/client/coral-admin/src/containers/Configure/Configure.js b/client/coral-admin/src/containers/Configure/Configure.js
index 44c38cd50..79dd76cc5 100644
--- a/client/coral-admin/src/containers/Configure/Configure.js
+++ b/client/coral-admin/src/containers/Configure/Configure.js
@@ -119,7 +119,7 @@ class Configure extends Component {
   render () {
     const {activeSection} = this.state;
     const section = this.getSection(activeSection);
-    const {auth: user} = this.props;
+    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>;
diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js
index adeb8a346..14376b390 100644
--- a/client/coral-admin/src/containers/LayoutContainer.js
+++ b/client/coral-admin/src/containers/LayoutContainer.js
@@ -57,7 +57,7 @@ class LayoutContainer extends Component {
     } 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>;
+          <p>This page is for team use only. Please contact an administrator if you want to join this team.</p>
         </Layout>
       );
     }

From 056ba9a04c3a9d891777482339d0b7e6e6124760 Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Thu, 18 May 2017 12:11:11 -0600
Subject: [PATCH 45/58] do the same thing for the Drawer

---
 .../coral-admin/src/components/ui/Drawer.js   | 46 +++++++++++--------
 .../coral-admin/src/components/ui/Header.js   |  4 +-
 .../coral-admin/src/components/ui/Layout.js   |  1 -
 3 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/client/coral-admin/src/components/ui/Drawer.js b/client/coral-admin/src/components/ui/Drawer.js
index 5ac55045c..6a6737883 100644
--- a/client/coral-admin/src/components/ui/Drawer.js
+++ b/client/coral-admin/src/components/ui/Drawer.js
@@ -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/utils/roles';
 
-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>
diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 181bfe688..454aea62b 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -26,7 +26,7 @@ const CoralHeader = ({
               {lang.t('configure.dashboard')}
             </IndexLink>
             {
-              auth && auth.user && can(auth.user, 'MODERATE_COMMENTS') && (
+              can(auth.user, 'MODERATE_COMMENTS') && (
                 <Link
                   id='moderateNav'
                   className={styles.navLink}
@@ -51,7 +51,7 @@ const CoralHeader = ({
               {lang.t('configure.community')}
             </Link>
             {
-              auth && auth.user && can(auth.user, 'UPDATE_CONFIG') && (
+              can(auth.user, 'UPDATE_CONFIG') && (
                 <Link
                   id='configureNav'
                   className={styles.navLink}
diff --git a/client/coral-admin/src/components/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js
index cb783ce5e..11432e570 100644
--- a/client/coral-admin/src/components/ui/Layout.js
+++ b/client/coral-admin/src/components/ui/Layout.js
@@ -14,7 +14,6 @@ const Layout = ({
     <Header
       handleLogout={handleLogout}
       showShortcuts={toggleShortcutModal}
-      restricted={restricted}
       {...props} />
     <Drawer handleLogout={handleLogout} restricted={restricted} {...props} />
     <div className={styles.layout}>

From f641a3ec40b21534d5db1f8d106af56d64c9ee24 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 19 May 2017 01:52:03 +0700
Subject: [PATCH 46/58] Complete suspend user implementation

---
 .../ModerationQueue/ModerationContainer.js    | 49 ++++++++++++-------
 .../ModerationQueue/ModerationQueue.js        |  1 +
 .../ModerationQueue/components/Comment.js     | 25 +++++-----
 .../components/SuspendUserDialog.js           | 33 +++++++++----
 .../src/graphql/queries/modQueueQuery.graphql |  3 ++
 .../coral-admin/src/services/notification.js  | 28 +++++++++++
 client/coral-admin/src/translations.json      |  6 ++-
 .../src/components/Stream.js                  | 18 +++++--
 .../src/containers/Stream.js                  |  3 ++
 .../components/RestrictedMessageBox.css       |  1 +
 client/coral-framework/translations.json      |  2 +
 graph/typeDefs.graphql                        |  1 +
 services/email/suspension.ejs                 |  1 -
 services/email/suspension.html.ejs            |  2 +-
 services/users.js                             |  7 +--
 15 files changed, 126 insertions(+), 54 deletions(-)
 create mode 100644 client/coral-admin/src/services/notification.js
 delete mode 100644 services/email/suspension.ejs

diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index e65551487..5dc2930a2 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {compose} from 'react-apollo';
-import {toast} from 'react-toastify';
+import * as notification from 'coral-admin/src/services/notification';
 import key from 'keymaster';
 import isEqual from 'lodash/isEqual';
 import styles from './components/styles.css';
@@ -97,6 +97,31 @@ class ModerationContainer extends Component {
     this.props.modQueueResort(sort);
   }
 
+  suspendUser = (args) => {
+    this.props.suspendUser(args)
+      .then((result) => {
+        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(notification.handleMutationErrors);
+    this.props.hideSuspendUserDialog();
+  };
+
   componentWillUnmount() {
     key.unbind('s');
     key.unbind('shift+/');
@@ -197,6 +222,7 @@ class ModerationContainer extends Component {
           assetId={providedAssetId}
           sort={this.state.sort}
           commentCount={activeTabCount}
+          currentUserId={this.props.auth.user.id}
         />
         <BanUserDialog
           open={moderation.banDialog}
@@ -212,25 +238,9 @@ class ModerationContainer extends Component {
           open={moderation.suspendUserDialog.show}
           username={moderation.suspendUserDialog.username}
           userId={moderation.suspendUserDialog.userId}
+          organizationName={data.settings.organizationName}
           onCancel={props.hideSuspendUserDialog}
-          onPerform={(args) => {
-            props.suspendUser(args)
-              .then(() => {
-                toast(
-                  lang.t('suspenduser.notify_suspend_until',
-                    moderation.suspendUserDialog.username,
-                    lang.timeago(args.until)),
-                  {type: 'success'}
-                );
-              })
-              .catch((err) => {
-                toast(
-                  err,
-                  {type: 'error'}
-                );
-              });
-            props.hideSuspendUserDialog();
-          }}
+          onPerform={this.suspendUser}
         />
       <ModerationKeysModal
           hideShortcutsNote={props.hideShortcutsNote}
@@ -245,6 +255,7 @@ class ModerationContainer extends Component {
 const mapStateToProps = (state) => ({
   moderation: state.moderation.toJS(),
   settings: state.settings.toJS(),
+  auth: state.auth.toJS(),
   assets: state.assets.get('assets')
 });
 
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
index b93f185f0..f69e9c1b4 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
@@ -56,6 +56,7 @@ class ModerationQueue extends React.Component {
                 acceptComment={props.acceptComment}
                 rejectComment={props.rejectComment}
                 currentAsset={props.currentAsset}
+                currentUserId={this.props.currentUserId}
                 />;
             })
             : <EmptyCard>{lang.t('modqueue.emptyqueue')}</EmptyCard>
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
index 0b675702e..b76144d97 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
@@ -66,17 +66,19 @@ const Comment = ({
                 lang.getLocale().replace('-', '_')
               )}
             </span>
-            <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>
+            {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'
@@ -163,6 +165,7 @@ Comment.propTypes = {
   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,
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js b/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
index 47c449d0e..f257bcfb9 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/SuspendUserDialog.js
@@ -10,7 +10,13 @@ import {dateAdd} from 'coral-framework/utils';
 import translations from '../../../translations';
 const lang = new I18n(translations);
 
-const initialState = {step: 0, duration: '3', message: lang.t('suspenduser.email_message_suspend')};
+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 {
 
@@ -30,12 +36,16 @@ class SuspendUserDialog extends React.Component {
     this.setState({message: event.target.value});
   }
 
-  increaseStep = () => {
-    this.setState({step: this.state.step + 1});
-  }
-
-  resetStep = () => {
-    this.setState({step: 0});
+  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 = () => {
@@ -45,7 +55,7 @@ class SuspendUserDialog extends React.Component {
       message: this.state.message,
 
       // Add 1 minute more to help `timeago.js` to display the correct duration.
-      until: dateAdd(new Date(), 'minute', this.state.duration * 60 + 1),
+      until: durationsToDate(this.state.duration),
     });
   };
 
@@ -69,6 +79,7 @@ class SuspendUserDialog extends React.Component {
             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>
@@ -78,7 +89,7 @@ class SuspendUserDialog extends React.Component {
           <Button cStyle="white" className={styles.cancel} onClick={onCancel} raised>
             {lang.t('suspenduser.cancel')}
           </Button>
-          <Button cStyle="black" className={styles.perform} onClick={this.increaseStep} raised>
+          <Button cStyle="black" className={styles.perform} onClick={this.goToStep1} raised>
             {lang.t('suspenduser.suspend_user')}
           </Button>
         </div>
@@ -146,7 +157,9 @@ SuspendUserDialog.propTypes = {
   open: PropTypes.bool.isRequired,
   onCancel: PropTypes.func.isRequired,
   onPerform: PropTypes.func.isRequired,
-  username: PropTypes.string.isRequired,
+  username: PropTypes.string,
+  userId: PropTypes.string,
+  organizationName: PropTypes.string,
 };
 
 export default SuspendUserDialog;
diff --git a/client/coral-admin/src/graphql/queries/modQueueQuery.graphql b/client/coral-admin/src/graphql/queries/modQueueQuery.graphql
index 80dec5ff7..6bfcf81ec 100644
--- a/client/coral-admin/src/graphql/queries/modQueueQuery.graphql
+++ b/client/coral-admin/src/graphql/queries/modQueueQuery.graphql
@@ -62,4 +62,7 @@ query ModQueue ($asset_id: ID, $sort: SORT_ORDER) {
       asset_id: $asset_id,
       statuses: [NONE, PREMOD]
     })
+    settings {
+      organizationName
+    }
 }
diff --git a/client/coral-admin/src/services/notification.js b/client/coral-admin/src/services/notification.js
new file mode 100644
index 000000000..6223d1b4d
--- /dev/null
+++ b/client/coral-admin/src/services/notification.js
@@ -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 handleMutationErrors(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'}
+    );
+  });
+}
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 4ff3bc0a6..023270f14 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -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": {
@@ -155,8 +155,9 @@
       "username": "username",
       "email_subject": "Your account has been suspended",
       "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": "Your user account has been suspended. 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",
@@ -240,6 +241,7 @@
       "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",
+      "hour": "una hora",
       "hours": "{0} horas",
       "days": "{0} días",
       "suspend_user": "Suspender",
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 6c84dd1ea..89723f0c0 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -10,9 +10,14 @@ import CommentBox from 'coral-plugin-commentbox/CommentBox';
 import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import SuspendedAccount from './SuspendedAccount';
-import RestrictedMessageBox from 'coral-framework/components/RestrictedMessageBox';
+import RestrictedMessageBox
+  from 'coral-framework/components/RestrictedMessageBox';
 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) => {
@@ -75,9 +80,12 @@ class Stream extends React.Component {
               />
               {!banned && temporarilySuspended &&
                 <RestrictedMessageBox>
-                  In accordance with &lt;organization name&gt;'s Community Guidlines,
-                  you have been temporarily suspended. You can rejoin the conversation
-                  with  our community in x hours.
+                  {
+                    lang.t('temporarilySuspended',
+                      this.props.root.settings.organizationName,
+                      lang.timeago(user.suspension.until),
+                    )
+                  }
                 </RestrictedMessageBox>
               }
               {banned &&
@@ -86,7 +94,7 @@ class Stream extends React.Component {
                   editName={editName}
                 />
               }
-              {loggedIn && !banned &&
+              {loggedIn && !banned && !temporarilySuspended &&
                 <CommentBox
                     addNotification={this.props.addNotification}
                     postComment={this.props.postComment}
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index daac49c51..0b4ff833f 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -206,6 +206,9 @@ const fragments = {
       me {
         status
       }
+      settings {
+        organizationName
+      }
       ...${getDefinitionName(Comment.fragments.root)}
     }
     ${Comment.fragments.root}
diff --git a/client/coral-framework/components/RestrictedMessageBox.css b/client/coral-framework/components/RestrictedMessageBox.css
index 396decd9c..94b193a17 100644
--- a/client/coral-framework/components/RestrictedMessageBox.css
+++ b/client/coral-framework/components/RestrictedMessageBox.css
@@ -1,5 +1,6 @@
 .message {
   background: #D8D8D8;
   padding: 25px;
+  margin-bottom: 8px;
 }
 
diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json
index 2e4c405b4..2ea58e159 100644
--- a/client/coral-framework/translations.json
+++ b/client/coral-framework/translations.json
@@ -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",
diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index 0579a2233..9ea0d6c1a 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -404,6 +404,7 @@ type Settings {
   charCountEnable: Boolean
   charCount: Int
 
+  organizationName: String
 }
 
 ################################################################################
diff --git a/services/email/suspension.ejs b/services/email/suspension.ejs
deleted file mode 100644
index b36560ec5..000000000
--- a/services/email/suspension.ejs
+++ /dev/null
@@ -1 +0,0 @@
-<%= body %>
diff --git a/services/email/suspension.html.ejs b/services/email/suspension.html.ejs
index b36560ec5..4fd8f191c 100644
--- a/services/email/suspension.html.ejs
+++ b/services/email/suspension.html.ejs
@@ -1 +1 @@
-<%= body %>
+<%= body.replace(/\n/g, '<br />') %>
diff --git a/services/users.js b/services/users.js
index e828307f5..03b180150 100644
--- a/services/users.js
+++ b/services/users.js
@@ -456,7 +456,6 @@ module.exports = class UsersService {
    * @param  {Date}     until               date until the suspension is valid.
    */
   static suspendUser(id, message, until) {
-    console.log('SUSPEND');
     return UserModel.findOneAndUpdate(
       {id}, {
         $set: {
@@ -466,7 +465,6 @@ module.exports = class UsersService {
         }
       })
       .then((user) => {
-        console.log(user);
         if (message) {
           let localProfile = user.profiles.find((profile) => profile.provider === 'local');
 
@@ -477,14 +475,13 @@ module.exports = class UsersService {
                 locals: {                            // specifies the template locals.
                   body: message
                 },
-                subject: 'Email Suspension',
+                subject: 'Your account has been suspended',
                 to: localProfile.id  // This only works if the user has registered via e-mail.
                                      // We may want a standard way to access a user's e-mail address in the future
               };
 
+            console.log(options);
             return MailerService.sendSimple(options);
-          } else {
-            return Promise.reject(errors.ErrMissingEmail);
           }
         }
       });

From d995cdde07f3983620fe41f7bc0438a5b2a0b14b Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 19 May 2017 02:01:47 +0700
Subject: [PATCH 47/58] Make email message required

---
 graph/typeDefs.graphql | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index 9ea0d6c1a..8297ae7db 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -677,8 +677,7 @@ input SuspendUserInput {
   id: ID!
 
   # message to be sent to the user.
-  # TODO: should this be required?
-  message: String
+  message: String!
 
   # If set, the suspension lasts at least until specified date.
   until: Date
@@ -691,8 +690,7 @@ input RejectUsernameInput {
   id: ID!
 
   # message to be sent to the user.
-  # TODO: should this be required?
-  message: String
+  message: String!
 }
 
 # DeleteActionResponse is the response returned with possibly some errors

From 859a0b1fbea10a002c069cc7aedcbef940fafe5d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 19 May 2017 02:03:36 +0700
Subject: [PATCH 48/58] Make until arg required

---
 graph/typeDefs.graphql | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/graph/typeDefs.graphql b/graph/typeDefs.graphql
index 8297ae7db..217ec975f 100644
--- a/graph/typeDefs.graphql
+++ b/graph/typeDefs.graphql
@@ -679,8 +679,8 @@ input SuspendUserInput {
   # message to be sent to the user.
   message: String!
 
-  # If set, the suspension lasts at least until specified date.
-  until: Date
+  # target user will be suspended until this date.
+  until: Date!
 }
 
 # Input for rejectUsername mutation.

From 0588a8ab661dc32cb4bd34dd86679b79df469ee3 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 19 May 2017 02:07:38 +0700
Subject: [PATCH 49/58] Use async / await :-)

---
 .../ModerationQueue/ModerationContainer.js    | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index 5dc2930a2..f82d78e41 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -97,29 +97,31 @@ class ModerationContainer extends Component {
     this.props.modQueueResort(sort);
   }
 
-  suspendUser = (args) => {
-    this.props.suspendUser(args)
-      .then((result) => {
-        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(notification.handleMutationErrors);
+  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.handleMutationErrors(err);
+    }
   };
 
   componentWillUnmount() {

From 0040bc4c0118d37cd57bcf0ce5d669479a4f4f9d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 19 May 2017 02:12:27 +0700
Subject: [PATCH 50/58] Remove remaining debug msgs

---
 services/users.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/services/users.js b/services/users.js
index 03b180150..2608e24b0 100644
--- a/services/users.js
+++ b/services/users.js
@@ -480,7 +480,6 @@ module.exports = class UsersService {
                                      // We may want a standard way to access a user's e-mail address in the future
               };
 
-            console.log(options);
             return MailerService.sendSimple(options);
           }
         }
@@ -857,7 +856,6 @@ module.exports = class UsersService {
       if (result.nModified <= 0) {
         return Promise.reject(errors.ErrPermissionUpdateUsername);
       }
-      console.log(result);
 
       return result;
     })

From b521934ee2dc22647ce3c856800820726137e9fc Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 19 May 2017 02:24:47 +0700
Subject: [PATCH 51/58] Remove unneeded refetch

---
 client/coral-admin/src/graphql/mutations/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/coral-admin/src/graphql/mutations/index.js b/client/coral-admin/src/graphql/mutations/index.js
index 0e3b6b25c..3aef68ebc 100644
--- a/client/coral-admin/src/graphql/mutations/index.js
+++ b/client/coral-admin/src/graphql/mutations/index.js
@@ -38,7 +38,6 @@ export const suspendUser = graphql(SUSPEND_USER, {
         variables: {
           input,
         },
-        refetchQueries: ['Users']
       });
     }
   })

From 89b7918e41bcf1c721e0e586ec64587c9710b8c2 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 19 May 2017 02:29:59 +0700
Subject: [PATCH 52/58] Tiny renaming

---
 .../src/containers/ModerationQueue/ModerationContainer.js       | 2 +-
 client/coral-admin/src/services/notification.js                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
index b232c46ed..237059103 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js
@@ -123,7 +123,7 @@ class ModerationContainer extends Component {
       }
     }
     catch(err) {
-      notification.handleMutationErrors(err);
+      notification.showMutationErrors(err);
     }
   };
 
diff --git a/client/coral-admin/src/services/notification.js b/client/coral-admin/src/services/notification.js
index 6223d1b4d..01b256df0 100644
--- a/client/coral-admin/src/services/notification.js
+++ b/client/coral-admin/src/services/notification.js
@@ -16,7 +16,7 @@ export function info(msg) {
   return toast(msg, {type: 'info'});
 }
 
-export function handleMutationErrors(err) {
+export function showMutationErrors(err) {
   const errors = Array.isArray(err) ? err : [err];
   errors.forEach((err) => {
     console.error(err);

From c772cffc92708aa72c8f8ecfed80fed0a12dac85 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Thu, 18 May 2017 13:51:48 -0600
Subject: [PATCH 53/58] handle no-interaction input the correct way

---
 .../coral-admin/src/containers/ModerationQueue/UserDetail.css   | 1 -
 client/coral-admin/src/containers/ModerationQueue/UserDetail.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.css b/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
index 9c735d72b..e37971ada 100644
--- a/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
+++ b/client/coral-admin/src/containers/ModerationQueue/UserDetail.css
@@ -34,7 +34,6 @@
 .profileEmail {
   border: none;
   background-color: transparent;
-  pointer-events: none;
   font-size: 16px;
   position: absolute;
   width: 100%;
diff --git a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
index e05741889..d9b85a060 100644
--- a/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
+++ b/client/coral-admin/src/containers/ModerationQueue/UserDetail.js
@@ -46,7 +46,7 @@ class UserDetail extends React.Component {
       <Drawer handleClickOutside={hideUserDetail}>
         <h3>{user.username}</h3>
         <Button className={styles.copyButton} onClick={this.copyPermalink}>Copy</Button>
-        {profile && <input className={styles.profileEmail} type="text" ref={(ref) => this.profile = ref} value={profile} />}
+        {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/>

From 6deee7cb8029abd1b63e16a831dce43a0796cc3f Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Thu, 18 May 2017 14:28:43 -0600
Subject: [PATCH 54/58] add a perms utils file

---
 models/user.js           | 2 +-
 perms/mutationReducer.js | 5 +----
 perms/queryReducer.js    | 5 +----
 perms/rootReducer.js     | 8 +-------
 perms/utils.js           | 8 ++++++++
 services/users.js        | 3 ---
 6 files changed, 12 insertions(+), 19 deletions(-)
 create mode 100644 perms/utils.js

diff --git a/models/user.js b/models/user.js
index 3d12d49e9..30069abd0 100644
--- a/models/user.js
+++ b/models/user.js
@@ -163,7 +163,7 @@ UserSchema.index({
  * returns true if a commenter is staff
  */
 UserSchema.method('isStaff', function () {
-  return !!intersection(['ADMIN', 'MODERATOR', 'STAFF'], this.roles).length;
+  return intersection(['ADMIN', 'MODERATOR', 'STAFF'], this.roles).length !== 0;
 });
 
 /**
diff --git a/perms/mutationReducer.js b/perms/mutationReducer.js
index b589bde90..82bc2de42 100644
--- a/perms/mutationReducer.js
+++ b/perms/mutationReducer.js
@@ -1,7 +1,4 @@
-const intersection = require('lodash/intersection');
-const check = (user, roles) => {
-  return !!intersection(roles, user.roles).length;
-};
+const {check} = require('./utils');
 
 module.exports = {
   CREATE_COMMENT: 'CREATE_COMMENT',
diff --git a/perms/queryReducer.js b/perms/queryReducer.js
index 92f1566d5..65a52358a 100644
--- a/perms/queryReducer.js
+++ b/perms/queryReducer.js
@@ -1,7 +1,4 @@
-const intersection = require('lodash/intersection');
-const check = (user, roles) => {
-  return !!intersection(roles, user.roles).length;
-};
+const {check} = require('./utils');
 
 module.exports = {
   SEARCH_ASSETS: 'SEARCH_ASSETS',
diff --git a/perms/rootReducer.js b/perms/rootReducer.js
index 7abf92753..c48fb9c4d 100644
--- a/perms/rootReducer.js
+++ b/perms/rootReducer.js
@@ -1,15 +1,9 @@
 module.exports = {
-  DUMMY_ROLE: 'DUMMY_ROLE',
-  checkRoles: function (user, perm) {
+  checkRoles: function (user /* , perm*/) {
 
     // this runs before everything
     if (user.status === 'BANNED') {
       return false;
     }
-
-    switch (perm) {
-    default:
-      break;
-    }
   }
 };
diff --git a/perms/utils.js b/perms/utils.js
new file mode 100644
index 000000000..e72a49c53
--- /dev/null
+++ b/perms/utils.js
@@ -0,0 +1,8 @@
+const intersection = require('lodash/intersection');
+const check = (user, roles) => {
+  return intersection(roles, user.roles).length > 0;
+};
+
+module.exports = {
+  check
+};
diff --git a/services/users.js b/services/users.js
index 09a4f3a55..83a33e6f6 100644
--- a/services/users.js
+++ b/services/users.js
@@ -389,9 +389,6 @@ module.exports = class UsersService {
       return Promise.reject(new Error(`role ${role} is not supported`));
     }
 
-    // 5.11.2017 - Restricting this to a hierarchical system like WordPress
-    // where you can only set one role at a time.
-    // I'm not changing the data structure here, because I don't want a migration
     return UserModel.update({id}, {$set: {roles: [role]}});
   }
 

From 25230f2e9d1e2aedcb1663ce731986da275acd4f Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 18 May 2017 16:30:28 -0600
Subject: [PATCH 55/58] added fix for chrome + content type negotiation

---
 app.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app.js b/app.js
index 868ceee4c..16840f965 100644
--- a/app.js
+++ b/app.js
@@ -43,8 +43,15 @@ if (process.env.NODE_ENV === 'production') {
   app.get('*.js', (req, res, next) => {
     const accept = accepts(req);
     if (accept.encoding(['gzip']) === 'gzip') {
-      req.url = `${req.url}.gz`;
+
+      // Adjsut the headers on the request by adding a content type header
+      // because express won't be able to detect the mime-type with the .gz
+      // extension and we need to decalre support for the gzip encoding.
+      res.set('Content-Type', 'application/javascript');
       res.set('Content-Encoding', 'gzip');
+
+      // Rewrite the url so that the gzip version will be served instead.
+      req.url = `${req.url}.gz`;
     }
 
     next();

From 1d6455058e191d33e1786db356e0152d767452dc Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 19 May 2017 17:51:58 +0700
Subject: [PATCH 56/58] Apply review suggestions

---
 models/user.js    |  2 +-
 services/users.js | 54 +++++++++++++++++++++++------------------------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/models/user.js b/models/user.js
index 0a68ae07b..b02d2c3bc 100644
--- a/models/user.js
+++ b/models/user.js
@@ -221,7 +221,7 @@ UserSchema.method('can', function(...actions) {
     throw new Error(`invalid actions: ${actions}`);
   }
 
-  if (this.status === 'BANNED' || this.suspension.until && this.suspension.until > new Date()) {
+  if (this.status === 'BANNED' || (this.suspension.until && this.suspension.until > new Date())) {
     return false;
   }
 
diff --git a/services/users.js b/services/users.js
index 8c193cd5c..3af75b3c7 100644
--- a/services/users.js
+++ b/services/users.js
@@ -467,7 +467,6 @@ module.exports = class UsersService {
       .then((user) => {
         if (message) {
           let localProfile = user.profiles.find((profile) => profile.provider === 'local');
-
           if (localProfile) {
             const options =
               {
@@ -493,34 +492,35 @@ module.exports = class UsersService {
    * @param  {Date}     until               date until the suspension is valid.
    */
   static rejectUsername(id, message) {
-    return UserModel.findOneAndUpdate(
-      {id}, {
-        $set: {
-          status: 'BANNED',
-          canEditName: true,
-        }
-      }).then((user) => {
-        if (message) {
-          let localProfile = user.profiles.find((profile) => profile.provider === 'local');
+    return UserModel.findOneAndUpdate({
+      id
+    }, {
+      $set: {
+        status: 'BANNED',
+        canEditName: true,
+      }
+    })
+    .then((user) => {
+      if (message) {
+        let localProfile = user.profiles.find((profile) => profile.provider === 'local');
+        if (localProfile) {
+          const options =
+            {
+              template: 'suspension',              // needed to know which template to render!
+              locals: {                            // specifies the template locals.
+                body: message
+              },
+              subject: 'Email Suspension',
+              to: localProfile.id  // This only works if the user has registered via e-mail.
+                                   // We may want a standard way to access a user's e-mail address in the future
+            };
 
-          if (localProfile) {
-            const options =
-              {
-                template: 'suspension',              // needed to know which template to render!
-                locals: {                            // specifies the template locals.
-                  body: message
-                },
-                subject: 'Email Suspension',
-                to: localProfile.id  // This only works if the user has registered via e-mail.
-                                     // We may want a standard way to access a user's e-mail address in the future
-              };
-
-            return MailerService.sendSimple(options);
-          } else {
-            return Promise.reject(errors.ErrMissingEmail);
-          }
+          return MailerService.sendSimple(options);
+        } else {
+          return Promise.reject(errors.ErrMissingEmail);
         }
-      });
+      }
+    });
   }
 
   /**

From 3688d3f970cf149708a790b60b9e799e48bbe0ae Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 19 May 2017 17:53:10 +0700
Subject: [PATCH 57/58] Gracefully allow user with no email

---
 services/users.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/services/users.js b/services/users.js
index 3af75b3c7..728569cd5 100644
--- a/services/users.js
+++ b/services/users.js
@@ -516,8 +516,6 @@ module.exports = class UsersService {
             };
 
           return MailerService.sendSimple(options);
-        } else {
-          return Promise.reject(errors.ErrMissingEmail);
         }
       }
     });

From 17ceadd8c9c0aa3528f2228774b9c0ce612eefc0 Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Fri, 19 May 2017 09:18:24 -0600
Subject: [PATCH 58/58] move client-side perms to services

---
 client/coral-admin/src/components/ui/Drawer.js               | 2 +-
 client/coral-admin/src/components/ui/Header.js               | 2 +-
 client/coral-admin/src/containers/Configure/Configure.js     | 2 +-
 client/coral-admin/src/containers/LayoutContainer.js         | 2 +-
 client/coral-embed-stream/src/components/Embed.js            | 2 +-
 client/coral-embed-stream/src/components/Stream.js           | 2 +-
 client/coral-framework/{utils/roles.js => services/perms.js} | 0
 7 files changed, 6 insertions(+), 6 deletions(-)
 rename client/coral-framework/{utils/roles.js => services/perms.js} (100%)

diff --git a/client/coral-admin/src/components/ui/Drawer.js b/client/coral-admin/src/components/ui/Drawer.js
index 6a6737883..2fcb5aafe 100644
--- a/client/coral-admin/src/components/ui/Drawer.js
+++ b/client/coral-admin/src/components/ui/Drawer.js
@@ -4,7 +4,7 @@ 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/utils/roles';
+import {can} from 'coral-framework/services/perms';
 
 const CoralDrawer = ({handleLogout, auth}) => (
   <Drawer className={styles.header}>
diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 454aea62b..f7ba83491 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -5,7 +5,7 @@ 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/utils/roles';
+import {can} from 'coral-framework/services/perms';
 
 const CoralHeader = ({
   handleLogout,
diff --git a/client/coral-admin/src/containers/Configure/Configure.js b/client/coral-admin/src/containers/Configure/Configure.js
index 79dd76cc5..d22a19997 100644
--- a/client/coral-admin/src/containers/Configure/Configure.js
+++ b/client/coral-admin/src/containers/Configure/Configure.js
@@ -15,7 +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/utils/roles';
+import {can} from 'coral-framework/services/perms';
 
 class Configure extends Component {
   constructor (props) {
diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js
index 14376b390..340a18e3b 100644
--- a/client/coral-admin/src/containers/LayoutContainer.js
+++ b/client/coral-admin/src/containers/LayoutContainer.js
@@ -7,7 +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/utils/roles';
+import {can} from 'coral-framework/services/perms';
 
 class LayoutContainer extends Component {
   componentWillMount() {
diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index aa97eb091..1688ae31e 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -1,7 +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/utils/roles';
+import {can} from 'coral-framework/services/perms';
 const lang = new I18n(translations);
 
 import {TabBar, Tab, TabContent, Button} from 'coral-ui';
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 225c7fafa..cb5af4eb5 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -11,7 +11,7 @@ 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 {can} from 'coral-framework/utils/roles';
+import {can} from 'coral-framework/services/perms';
 import ChangeUsernameContainer
   from 'coral-sign-in/containers/ChangeUsernameContainer';
 
diff --git a/client/coral-framework/utils/roles.js b/client/coral-framework/services/perms.js
similarity index 100%
rename from client/coral-framework/utils/roles.js
rename to client/coral-framework/services/perms.js