Adding description field to flags.

client/coral-embed-stream/style/default.css

@@ -241,6 +241,7 @@ hr {
 .coral-plugin-flags-popup-radio-label {
   margin:5px;
   font-size: 14px;
+  font-weight: 700;
 }
 
 .coral-plugin-flags-popup-counter {
@@ -256,6 +257,7 @@ hr {
 
 .coral-plugin-flags-other-text {
   margin-left: 20px;
+  margin-top: 5px;
   width: 75%;
 }
 

client/coral-plugin-flags/FlagButton.js

@@ -10,10 +10,9 @@ class FlagButton extends Component {
 
   state = {
     showMenu: false,
-    showOther: false,
     itemType: '',
     detail: '',
-    otherText: '',
+    description: '',
     step: 0,
     posted: false
   }
@@ -30,7 +29,7 @@ class FlagButton extends Component {
 
   onPopupContinue = () => {
     const {postAction, addItem, updateItem, flag, id, author_id} = this.props;
-    const {itemType, field, detail, step, otherText, posted} = this.state;
+    const {itemType, field, detail, step, description, posted} = this.state;
 
     //Proceed to the next step or close the menu if we've reached the end
     if (step + 1 >= this.props.getPopupMenu.length) {
@@ -42,7 +41,6 @@ class FlagButton extends Component {
     // If itemType and detail are both set, post the action
     if (itemType && detail && !posted) {
       // Set the text from the "other" field if it exists.
-      const updatedDetail = otherText || detail;
       let item_id;
       switch(itemType) {
       case 'comments':
@@ -55,7 +53,8 @@ class FlagButton extends Component {
       const action = {
         action_type: 'flag',
         field,
-        detail: updatedDetail
+        detail,
+        description
       };
       postAction(item_id, itemType, action)
         .then((action) => {
@@ -92,7 +91,7 @@ class FlagButton extends Component {
   }
 
   onOtherTextChange = (e) => {
-    this.setState({otherText: e.target.value});
+    this.setState({description: e.target.value});
   }
 
   handleClickOutside () {
@@ -141,16 +140,16 @@ class FlagButton extends Component {
                   )
                 }
                 {
-                  this.state.showOther && <div>
-                    <input
+                  this.state.detail && <div>
+                  <label htmlFor={'description'} className={`${name}-popup-radio-label`}>
+                    {lang.t('flag-reason')}
+                  </label><br/>
+                <textarea
                       className={`${name}-other-text`}
-                      type="text"
-                      id="otherText"
+                      id="description"
+                      rows={4}
                       onChange={this.onOtherTextChange}
-                      value={this.state.otherText}/>
-                    <label htmlFor={'otherText'} className={`${name}-popup-radio-label screen-reader-text`}>
-                      lang.t('flag-reason')
-                    </label><br/>
+                      value={this.state.description}/>
                   </div>
                 }
               </form>

client/coral-plugin-flags/FlagComment.js

@@ -22,12 +22,13 @@ const getPopupMenu = [
     [
       {val: 'I don\'t agree with this comment', text: lang.t('no-agree-comment')},
       {val: 'This comment is offensive', text: lang.t('comment-offensive')},
-      {val: 'This comment reveals personally identifiable infomration', text: lang.t('personal-info')},
+      {val: 'This looks like an ad/marketing', text: lang.t('marketing')},
       {val: 'other', text: lang.t('other')}
     ]
     : [
       {val: 'This username is offensive', text: lang.t('username-offensive')},
       {val: 'I don\'t like this username', text: lang.t('no-like-username')},
+      {val: 'This user is impersonating', text: lang.t('user-impersonating')},
       {val: 'This looks like an ad/marketing', text: lang.t('marketing')},
       {val: 'other', text: lang.t('other')}
     ];

client/coral-plugin-flags/translations.json

@@ -19,8 +19,9 @@
     "bio-offensive": "This bio is offensive",
     "no-like-bio": "I don't like this bio",
     "marketing": "This looks like an ad/marketing",
+    "user-impersonating": "This user is impersonating",
     "thank-you": "We value your safety and feedback. A moderator will review your flag.",
-    "flag-reason": "Reason for flag",
+    "flag-reason": "Reason for flag (Optional)",
     "other": "Other"
   },
   "es": {
@@ -42,9 +43,10 @@
     "no-like-username": "No me gusta ese nombre de usuario",
     "bio-offensive": "Esta bio es ofensiva",
     "no-like-bio": "No me gusta esta bio",
+    "user-impersonating": "This user is impersonating",
     "marketing": "Esto parece una publicidad/marketing",
     "thank-you": "Nos interesa tu protección y comentarios. Un moderador va a mirar tu marca.",
-    "flag-reason": "Razón por la que marcar",
+    "flag-reason": "Razón por la que marcar (Opcional)",
     "other": "Otro"
   }
 }

models/action.js

@@ -15,6 +15,7 @@ const ActionSchema = new Schema({
   user_id: String,
   field: String, // Used when an action references a particular field of an object. (e.g. a flag on a username or bio)
   detail: String, // Describes the reason for an action (e.g. 'Username is offensive')
+  description: String, // Describes the reason for the action in more detail (e.g. A description of why the comment is offensive.)
 }, {
   timestamps: {
     createdAt: 'created_at',