Adding language and e-mail input to suspend user modal.

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

@@ -33,7 +33,7 @@ export default class ModerationList extends React.Component {
     suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired
   }
 
-  state = {active: null, suspendUserModal: null};
+  state = {active: null, suspendUserModal: null, email: null};
 
   // remove key handlers before leaving
   componentWillUnmount () {

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

@@ -1,6 +1,6 @@
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
-import React from 'react';
+import React, {Component, PropTypes} from 'react';
 import Modal from 'components/Modal';
 import styles from './SuspendUserModal.css';
 import {Button} from 'coral-ui';
@@ -18,26 +18,57 @@ const stages = [
     title: 'suspenduser.title_1',
     description: 'suspenduser.description_1',
     options: {
-      'j': 'suspenduser.cancel',
+      'j': 'bandialog.cancel',
       'k': 'suspenduser.send'
     }
   }
 ];
 
-export default ({stage, actionType, onClose, onButtonClick}) =>
-  actionType ? <Modal open={actionType} onClose={onClose}>
-      <h3>{lang.t(stages[stage].title)}</h3>
-      <div className={styles.container}>
-        <div className={styles.description}>
-          {lang.t(stages[stage].description)}
+class SuspendUserModal extends Component  {
+
+  state = {email: ''}
+
+  static propTypes = {
+    stage: PropTypes.number,
+    actionType: PropTypes.string,
+    onClose: PropTypes.func.isRequired,
+    onButtonClick: PropTypes.func.isRequired
+  }
+
+  componentDidMount() {
+    const about = this.props.actionType === 'flag_bio' ? lang.t('suspenduser.bio') : lang.t('suspenduser.username');
+    this.setState({email: lang.t('suspenduser.email', about)});
+  }
+
+  onEmailChange = (e) => this.setState({email: e.target.value})
+
+  render () {
+    const {stage, actionType, onClose, onButtonClick} = this.props;
+    const about = actionType === 'flag_bio' ? lang.t('suspenduser.bio') : lang.t('suspenduser.username');
+    return actionType ? <Modal open={actionType} onClose={onClose}>
+        <h3>{lang.t(stages[stage].title, about)}</h3>
+        <div className={styles.container}>
+          <div className={styles.description}>
+            {lang.t(stages[stage].description, about)}
+          </div>
+          {
+            stage === 1 &&
+            <textarea
+              rows={10}
+              value={this.state.email}
+              onChange={this.onEmailChange}/>
+          }
+          {Object.keys(stages[stage].options).map((key, i) => (
+            <Button onClick={onButtonClick(stage, i)}>
+              {lang.t(stages[stage].options[key], about)}
+            </Button>
+          ))}
         </div>
-        {Object.keys(stages[stage].options).map((key, i) => (
-          <Button
-            label={stages[stage].options[key]}
-            onClick={onButtonClick(stage, i)}/>
-        ))}
-      </div>
-    </Modal>
-    : null;
+      </Modal>
+      : null;
+  }
+}
+
+export default SuspendUserModal;
 
 const lang = new I18n(translations);

client/coral-admin/src/translations.json

@@ -84,6 +84,18 @@
       "cancel": "Cancel",
       "yes_ban_user": "Yes, Ban User"
     },
+    "suspenduser": {
+      "title_0": "We noticed you rejected a {0}",
+      "description_0": "Would you like to temporarily ban this user becuase 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.",
+      "no_cancel": "No, cancel",
+      "yes_suspend": "Yes, suspend",
+      "send": "Send",
+      "bio": "bio",
+      "username": "username",
+      "email": "Another member of the community recently flagged your {0} for review. Because of its content your {0} was rejected. This means you can no longer comment, like, or flag content until you rewrite your {0}. Please e-mail moderator@newsorg.com if you have any questions or concerns."
+    },
     "streams": {
       "search": "Search",
       "filter-streams": "Filter Streams",