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 01/15] 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 02/15] 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 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 03/15] 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 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 04/15] 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 05/15] 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 06/15] 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 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 07/15] 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 08/15] 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 09/15] 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 10/15] 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 11/15] 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 12/15] 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 13/15] 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 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 14/15] 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 15/15] 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);
         }
       }
     });