Merge pull request #184 from coralproject/add-flag-option

Add flag option

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

@@ -239,7 +239,8 @@ hr {
 
 .coral-plugin-flags-popup-radio-label {
   margin:5px;
-  font-size: 1.16rem;
+  font-weight: 700;
+  font-size: .9rem;
 }
 
 .coral-plugin-flags-popup-counter {
@@ -253,8 +254,9 @@ hr {
     margin-top: 10px;
 }
 
-.coral-plugin-flags-other-text {
+.coral-plugin-flags-reason-text {
   margin-left: 20px;
+  margin-top: 5px;
   width: 75%;
 }
 

client/coral-plugin-flags/FlagBio.js

@@ -18,7 +18,7 @@ const getPopupMenu = [
         {val: 'other', text: lang.t('other')}
       ],
       button: lang.t('continue'),
-      sets: 'detail'
+      sets: 'reason'
     };
   },
   () =>  {

client/coral-plugin-flags/FlagButton.js

@@ -10,10 +10,9 @@ class FlagButton extends Component {
 
   state = {
     showMenu: false,
-    showOther: false,
     itemType: '',
-    detail: '',
-    otherText: '',
+    reason: '',
+    note: '',
     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, reason, step, note, 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) {
@@ -39,11 +38,10 @@ class FlagButton extends Component {
       this.setState({step: step + 1});
     }
 
-    // If itemType and detail are both set, post the action
-    if (itemType && detail && !posted) {
+    // If itemType and reason are both set, post the action
+    if (itemType && reason && !posted) {
 
       // Set the text from the "other" field if it exists.
-      const updatedDetail = otherText || detail;
       let item_id;
       switch(itemType) {
       case 'comments':
@@ -55,8 +53,11 @@ class FlagButton extends Component {
       }
       const action = {
         action_type: 'flag',
-        field,
-        detail: updatedDetail
+        metadata: {
+          field,
+          reason,
+          note
+        }
       };
       postAction(item_id, itemType, action)
         .then((action) => {
@@ -70,11 +71,6 @@ class FlagButton extends Component {
 
   onPopupOptionClick = (sets) => (e) => {
 
-    // If the "other" option is clicked, show the other textbox
-    if(sets === 'detail' && e.target.value === 'other') {
-      this.setState({showOther: true});
-    }
-
     // If flagging a user, indicate that this is referencing the username rather than the bio
     if(sets === 'itemType' && e.target.value === 'user') {
       this.setState({field: 'username'});
@@ -92,8 +88,8 @@ class FlagButton extends Component {
     this.setState({[sets]: e.target.value});
   }
 
-  onOtherTextChange = (e) => {
-    this.setState({otherText: e.target.value});
+  onNoteTextChange = (e) => {
+    this.setState({note: e.target.value});
   }
 
   handleClickOutside () {
@@ -142,16 +138,16 @@ class FlagButton extends Component {
                   )
                 }
                 {
-                  this.state.showOther && <div>
-                    <input
-                      className={`${name}-other-text`}
-                      type="text"
-                      id="otherText"
-                      onChange={this.onOtherTextChange}
-                      value={this.state.otherText}/>
-                    <label htmlFor={'otherText'} className={`${name}-popup-radio-label screen-reader-text`}>
-                      lang.t('flag-reason')
-                    </label><br/>
+                  this.state.reason && <div>
+                  <label htmlFor={'note'} className={`${name}-popup-radio-label`}>
+                    {lang.t('flag-reason')}
+                  </label><br/>
+                  <textarea
+                      className={`${name}-reason-text`}
+                      id="note"
+                      rows={4}
+                      onChange={this.onNoteTextChange}
+                      value={this.state.note}/>
                   </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')}
     ];
@@ -35,7 +36,7 @@ const getPopupMenu = [
       header: lang.t('step-2-header'),
       options,
       button: lang.t('continue'),
-      sets: 'detail'
+      sets: 'reason'
     };
   },
   () =>  {

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": "Este usario suplanta a alguien",
     "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

@@ -13,8 +13,7 @@ const ActionSchema = new Schema({
   item_type: String,
   item_id: String,
   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')
+  metadata: Object, //Holds arbitrary metadata about the action.
 }, {
   timestamps: {
     createdAt: 'created_at',

models/comment.js

@@ -287,13 +287,12 @@ CommentSchema.statics.pushStatus = (id, status, assigned_by = null) => Comment.u
  * @param {String} action the new action to the comment
  * @return {Promise}
  */
-CommentSchema.statics.addAction = (item_id, user_id, action_type, field, detail) => Action.insertUserAction({
+CommentSchema.statics.addAction = (item_id, user_id, action_type, metadata) => Action.insertUserAction({
   item_id,
   item_type: 'comments',
   user_id,
   action_type,
-  field,
-  detail
+  metadata
 });
 
 /**

models/user.js

@@ -614,11 +614,10 @@ UserService.addBio = (id, bio) => (
  * @param {String} action the new action to the user
  * @return {Promise}
  */
-UserService.addAction = (item_id, user_id, action_type, field, detail) => Action.insertUserAction({
+UserService.addAction = (item_id, user_id, action_type, metadata) => Action.insertUserAction({
   item_id,
   item_type: 'users',
   user_id,
   action_type,
-  field,
-  detail
+  metadata
 });

routes/api/comments/index.js

@@ -190,12 +190,11 @@ router.post('/:comment_id/actions', (req, res, next) => {
 
   const {
     action_type,
-    field,
-    detail
+    metadata
   } = req.body;
 
   Comment
-    .addAction(req.params.comment_id, req.user.id, action_type, field, detail)
+    .addAction(req.params.comment_id, req.user.id, action_type, metadata)
     .then((action) => {
       res.status(201).json(action);
     })

routes/api/users/index.js

@@ -162,12 +162,11 @@ router.put('/:user_id/bio', (req, res, next) => {
 router.post('/:user_id/actions',  authorization.needed(), (req, res, next) => {
   const {
     action_type,
-    field,
-    detail
+    metadata
   } = req.body;
 
   User
-    .addAction(req.params.user_id, req.user.id, action_type, field, detail)
+    .addAction(req.params.user_id, req.user.id, action_type, metadata)
     .then((action) => {
       res.status(201).json(action);
     })

tests/routes/api/comments/index.js

@@ -440,12 +440,13 @@ describe('/api/v1/comments/:comment_id/actions', () => {
       return chai.request(app)
         .post('/api/v1/comments/abc/actions')
         .set(passport.inject({id: '456', roles: ['admin']}))
-        .send({'action_type': 'flag', 'detail': 'Comment is too awesome.'})
+        .send({'action_type': 'flag', 'metadata': {'reason': 'Comment is too awesome.'}})
         .then((res) => {
           expect(res).to.have.status(201);
           expect(res).to.have.body;
           expect(res.body).to.have.property('action_type', 'flag');
-          expect(res.body).to.have.property('detail', 'Comment is too awesome.');
+          expect(res.body).to.have.property('metadata')
+            .and.to.deep.equal({'reason': 'Comment is too awesome.'});
           expect(res.body).to.have.property('item_id', 'abc');
         });
     });

tests/routes/api/user/index.js

@@ -31,14 +31,16 @@ describe('/api/v1/users/:user_id/actions', () => {
       return chai.request(app)
         .post('/api/v1/users/abc/actions')
         .set(passport.inject({id: '456', roles: ['admin']}))
-        .send({'action_type': 'flag', 'detail': 'Bio is too awesome.'})
+        .send({'action_type': 'flag', 'metadata': {'reason': 'Bio is too awesome.'}})
         .then((res) => {
           expect(res).to.have.status(201);
           expect(res).to.have.body;
           expect(res.body).to.have.property('action_type', 'flag');
-          expect(res.body).to.have.property('detail', 'Bio is too awesome.');
+          expect(res.body).to.have.property('metadata')
+            .and.to.deep.equal({'reason': 'Bio is too awesome.'});
           expect(res.body).to.have.property('item_id', 'abc');
-        });
+        })
+        .catch(err => console.error(err.message));
     });
   });
 });