Merge pull request #133 from coralproject/flag-username

Flag username

client/coral-embed-stream/src/CommentStream.js

@@ -90,8 +90,8 @@ class CommentStream extends Component {
     const rootItemId = this.props.items.assets && Object.keys(this.props.items.assets)[0];
     const rootItem = this.props.items.assets && this.props.items.assets[rootItemId];
     const {actions, users, comments} = this.props.items;
+    const {status, moderation, closedMessage} = this.props.config;
     const {loggedIn, user, showSignInDialog, signInOffset} = this.props.auth;
-    const {status, closedMessage} = this.props.config;
     const {activeTab} = this.state;
     const banned = (this.props.userData.status === 'banned');
 
@@ -123,7 +123,7 @@ class CommentStream extends Component {
                         appendItemArray={this.props.appendItemArray}
                         updateItem={this.props.updateItem}
                         id={rootItemId}
-                        premod={this.props.config.moderation}
+                        premod={moderation}
                         reply={false}
                         currentUser={this.props.auth.user}
                         banned={banned}
@@ -165,6 +165,7 @@ class CommentStream extends Component {
                         <FlagButton
                           addNotification={this.props.addNotification}
                           id={commentId}
+                          author_id={comment.author_id}
                           flag={actions[comment.flag]}
                           postAction={this.props.postAction}
                           deleteAction={this.props.deleteAction}
@@ -185,8 +186,8 @@ class CommentStream extends Component {
                         id={rootItemId}
                         author={user}
                         parent_id={commentId}
-                        currentUser={this.props.auth.user}
-                        premod={this.props.config.moderation}
+                        premod={moderation}
+                        currentUser={user}
                         showReply={comment.showReply}/>
                       {
                         comment.children &&
@@ -220,7 +221,8 @@ class CommentStream extends Component {
                               <FlagButton
                                 addNotification={this.props.addNotification}
                                 id={replyId}
-                                flag={this.props.items.actions[reply.flag]}
+                                author_id={comment.author_id}
+                                flag={actions[reply.flag]}
                                 postAction={this.props.postAction}
                                 showSignInDialog={this.props.showSignInDialog}
                                 deleteAction={this.props.deleteAction}
@@ -242,9 +244,9 @@ class CommentStream extends Component {
                               author={user}
                               parent_id={commentId}
                               child_id={replyId}
-                              premod={this.props.config.moderation}
+                              premod={moderation}
                               banned={banned}
-                              currentUser={this.props.auth.user}
+                              currentUser={user}
                               showReply={reply.showReply}/>
                           </div>;
                         })
@@ -295,14 +297,14 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  addItem: (item, itemType) => dispatch(addItem(item, itemType)),
+  addItem: (item, item_id) => dispatch(addItem(item, item_id)),
   updateItem: (id, property, value, itemType) => dispatch(updateItem(id, property, value, itemType)),
   postItem: (data, type, id) => dispatch(postItem(data, type, id)),
   getStream: (rootId) => dispatch(getStream(rootId)),
   addNotification: (type, text) => dispatch(addNotification(type, text)),
   clearNotification: () => dispatch(clearNotification()),
+  postAction: (item, itemType, action) => dispatch(postAction(item, itemType, action)),
   showSignInDialog: (offset) => dispatch(showSignInDialog(offset)),
-  postAction: (item, action, user, itemType) => dispatch(postAction(item, action, user, itemType)),
   deleteAction: (item, action, user, itemType) => dispatch(deleteAction(item, action, user, itemType)),
   appendItemArray: (item, property, value, addToFront, itemType) => dispatch(appendItemArray(item, property, value, addToFront, itemType)),
   handleSignInDialog: () => dispatch(authActions.showSignInDialog()),

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

@@ -197,6 +197,50 @@ hr {
   margin: 8px;
 }
 
+/* Flag Styles */
+
+.coral-plugin-flags-popup span {
+  min-width: 100px;
+  bottom: 36px;
+  right: 75px;
+  position: absolute;
+}
+
+.coral-plugin-flags-popup-form {
+  margin-bottom: 10px;
+}
+
+.coral-plugin-flags-popup-header {
+  font-weight: bolder;
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.coral-plugin-flags-popup-radio {
+  margin:5px;
+}
+
+.coral-plugin-flags-popup-radio-label {
+  margin:5px;
+  font-size: 14px;
+}
+
+.coral-plugin-flags-popup-counter {
+    float: left;
+    margin-top: 21px;
+    color: #999;
+}
+
+.coral-plugin-flags-popup-button {
+    float: right;
+    margin-top: 10px;
+}
+
+.coral-plugin-flags-other-text {
+  margin-left: 20px;
+  width: 75%;
+}
+
 /* Close comments */
 
 .close-comments-intro-wrapper {

client/coral-framework/actions/items.js

@@ -212,13 +212,8 @@ export function postItem (item, type, id) {
 *
 */
 
-export function postAction (item_id, action_type, user_id, item_type) {
+export function postAction (item_id, item_type, action) {
   return () => {
-    const action = {
-      action_type,
-      user_id
-    };
-
     return coralApi(`/${item_type}/${item_id}/actions`, {method: 'POST', body: action});
   };
 }

client/coral-plugin-flags/FlagButton.js

@@ -1,52 +1,197 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {I18n} from '../coral-framework';
 import translations from './translations.json';
+import {PopupMenu, Button} from 'coral-ui';
+import onClickOutside from 'react-onclickoutside';
 
 const name = 'coral-plugin-flags';
 
-const FlagButton = ({flag, id, postAction, deleteAction, addItem, showSignInDialog, updateItem, addNotification, currentUser, banned}) => {
-  const flagged = flag && flag.current_user;
-  const onFlagClick = () => {
-    if (!currentUser) {
-      const offset = document.getElementById(`c_${id}`).getBoundingClientRect().top - 75;
-      showSignInDialog(offset);
+class FlagButton extends Component {
+
+  state = {
+    showMenu: false,
+    showOther: false,
+    itemType: '',
+    detail: '',
+    otherText: '',
+    step: 0,
+    posted: false
+  }
+
+  onReportClick = () => {
+    if (!this.props.currentUser) {
+      const offset = document.getElementById(`c_${this.props.id}`).getBoundingClientRect().top - 75;
+      this.props.showSignInDialog(offset);
       return;
     }
-    if (banned) {
-      return;
+    this.setState({showMenu: !this.state.showMenu});
+  }
+
+  onPopupContinue = () => {
+    const {postAction, addItem, updateItem, flag, id, author_id} = this.props;
+    const {itemType, field, detail, step, otherText, posted} = this.state;
+
+    if (step + 1 >= this.getPopupMenu.length) {
+      this.setState({showMenu: false});
+    } else {
+      this.setState({step: step + 1});
     }
-    if (!flagged) {
-      postAction(id, 'flag', currentUser.id, 'comments')
+
+    if (itemType && detail && !posted) {
+      const updatedDetail = otherText || detail;
+      const item_id = itemType === 'comments' ? id : author_id;
+      const action = {
+        action_type: 'flag',
+        field,
+        detail: updatedDetail
+      };
+      postAction(item_id, itemType, action)
         .then((action) => {
           let id = `${action.action_type}_${action.item_id}`;
           addItem({id, current_user: action, count: flag ? flag.count + 1 : 1}, 'actions');
-          updateItem(action.item_id, action.action_type, id, 'comments');
+          updateItem(action.item_id, action.action_type, id, action.item_type);
+          this.setState({posted: true});
         });
-      addNotification('success', lang.t('flag-notif'));
-    } else {
-      deleteAction(flagged.id)
-        .then(() => {
-          updateItem(id, 'flag', '', 'comments');
-        });
-      addNotification('success', lang.t('flag-notif-remove'));
     }
-  };
+  }
 
-  return <div className={`${name}-container`}>
-    <button onClick={onFlagClick} className={`${name}-button`}>
+  getPopupMenu = [
+    () => {
+      return {
+        header: lang.t('step-1-header'),
+        options: [
+          {val: 'user', text: lang.t('flag-username')},
+          {val: 'comments', text: lang.t('flag-comment')}
+        ],
+        button: lang.t('continue'),
+        sets: 'itemType'
+      };
+    },
+    (itemType) => {
+      const options = itemType === 'comments' ?
+      [
+        {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: '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 looks like an ad/marketing', text: lang.t('marketing')},
+        {val: 'other', text: lang.t('other')}
+      ];
+      return {
+        header: lang.t('step-2-header'),
+        options,
+        button: lang.t('continue'),
+        sets: 'detail'
+      };
+    },
+    () =>  {
+      return {
+        header: lang.t('step-3-header'),
+        text: lang.t('thank-you'),
+        button: lang.t('done'),
+      };
+    }
+  ]
+
+  onPopupOptionClick = (sets) => (e) => {
+    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'});
+    }
+
+    this.setState({[sets]: e.target.value});
+  }
+
+  onOtherTextChange = (e) => {
+    this.setState({otherText: e.target.value});
+  }
+
+  handleClickOutside () {
+    this.setState({showMenu: false});
+  }
+
+  render () {
+    const {flag} = this.props;
+    const flagged = flag && flag.current_user;
+    const popupMenu = this.getPopupMenu[this.state.step](this.state.itemType);
+
+    return <div className={`${name}-container`}>
+      <button onClick={this.onReportClick} className={`${name}-button`}>
+        {
+          flagged
+          ? <span className={`${name}-button-text`}>{lang.t('reported')}</span>
+        : <span className={`${name}-button-text`}>{lang.t('report')}</span>
+        }
+        <i className={`${name}-icon material-icons ${flagged && 'flaggedIcon'}`}
+          style={flagged ? styles.flaggedIcon : {}}
+          aria-hidden={true}>flag</i>
+      </button>
       {
-        flagged
-        ? <span className={`${name}-button-text`}>{lang.t('flagged')}</span>
-      : <span className={`${name}-button-text`}>{lang.t('flag')}</span>
+        this.state.showMenu &&
+        <div className={`${name}-popup`}>
+          <PopupMenu>
+            <div className={`${name}-popup-header`}>{popupMenu.header}</div>
+            {
+              popupMenu.text &&
+              <div className={`${name}-popup-text`}>{popupMenu.text}</div>
+            }
+            {
+              popupMenu.options && <form className={`${name}-popup-form`}>
+                {
+                  popupMenu.options.map((option) =>
+                    <div key={option.val}>
+                      <input
+                        className={`${name}-popup-radio`}
+                        type="radio"
+                        id={option.val}
+                        checked={this.state[popupMenu.sets] === option.val}
+                        onClick={this.onPopupOptionClick(popupMenu.sets)}
+                        value={option.val}/>
+                      <label htmlFor={option.val} className={`${name}-popup-radio-label`}>{option.text}</label><br/>
+                    </div>
+                  )
+                }
+                {
+                  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/>
+                  </div>
+                }
+              </form>
+            }
+            <div className={`${name}-popup-counter`}>
+              {this.state.step + 1} of {this.getPopupMenu.length}
+            </div>
+            {
+              popupMenu.button && <Button
+              className={`${name}-popup-button`}
+              onClick={this.onPopupContinue}>
+                {popupMenu.button}
+              </Button>
+            }
+          </PopupMenu>
+        </div>
       }
-      <i className={`${name}-icon material-icons ${flagged && 'flaggedIcon'}`}
-        style={flagged ? styles.flaggedIcon : {}}
-        aria-hidden={true}>flag</i>
-    </button>
-  </div>;
-};
+    </div>;
+  }
+}
 
-export default FlagButton;
+export default onClickOutside(FlagButton);
 
 const styles = {
   flaggedIcon: {

client/coral-plugin-flags/translations.json

@@ -1,14 +1,46 @@
 {
   "en": {
-    "flag": "Flag",
-    "flagged": "Flagged",
-    "flag-notif": "Thank you for reporting this comment. Our moderation team has been notified and will review it shortly.",
-    "flag-notif-remove": "Your flag has been removed."
+    "report": "Report",
+    "reported": "Reported",
+    "report-notif": "Thank you for reporting this comment. Our moderation team has been notified and will review it shortly.",
+    "report-notif-remove": "Your report has been removed.",
+    "step-1-header": "Report an issue",
+    "step-2-header": "Help us understand",
+    "step-3-header": "Thank you for your input",
+    "flag-username": "Flag username",
+    "flag-comment": "Flag comment",
+    "continue": "Continue",
+    "done": "Done",
+    "no-agree-comment": "I don't agree with this comment",
+    "comment-offensive": "This comment is offensive",
+    "personal-info": "This comment reveals personally identifiable information",
+    "username-offensive": "This username is offensive",
+    "no-like-username": "I don't like this username",
+    "marketing": "This looks like an ad/marketing",
+    "thank-you": "We value your safety and feedback. A moderator will review your flag.",
+    "flag-reason": "Reason for flag",
+    "other": "Other"
   },
   "es": {
-    "flag": "Marcar",
-    "flagged": "Marcado",
-    "flag-notif": "Gracias por marcar este comentario. Nuestro equipo de moderación ha sido notificado y muy pronto lo va a revisar.",
-    "flag-notif-remove": "Tu marca ha sido eliminada."
+    "report": "Informe",
+    "reported": "Informado",
+    "report-notif": "Gracias por marcar este comentario. Nuestro equipo de moderación ha sido notificado y muy pronto lo va a revisar.",
+    "report-notif-remove": "Tu marca ha sido eliminada.",
+    "step-1-header": "¡traduceme!",
+    "step-2-header": "¡traduceme!",
+    "step-3-header": "¡traduceme!",
+    "flag-username": "¡traduceme!",
+    "flag-comment": "¡traduceme!",
+    "continue": "¡traduceme!",
+    "done": "¡traduceme!",
+    "no-agree-comment": "¡traduceme!",
+    "comment-offensive": "¡traduceme!",
+    "personal-info": "¡traduceme!",
+    "username-offensive": "¡traduceme!",
+    "no-like-username": "¡traduceme!",
+    "marketing": "¡traduceme!",
+    "thank-you": "¡traduceme!",
+    "flag-reason": "¡traduceme!",
+    "other": "¡traduceme!"
   }
 }

client/coral-plugin-likes/LikeButton.js

@@ -16,7 +16,10 @@ const LikeButton = ({like, id, postAction, deleteAction, addItem, showSignInDial
       return;
     }
     if (!liked) {
-      postAction(id, 'like', currentUser.id, 'comments')
+      const action = {
+        action_type: 'like'
+      };
+      postAction(id, 'comments', action)
         .then((action) => {
           let id = `${action.action_type}_${action.item_id}`;
           addItem({id, current_user: action, count: like ? like.count + 1 : 1}, 'actions');

client/coral-ui/components/Button.css

@@ -21,7 +21,7 @@
     cursor: pointer;
     text-decoration: none;
     text-align: center;
-    line-height: 36px;
+    line-height: 28px;
     vertical-align: middle;
     margin: 2px;
 }

client/coral-ui/components/PopupMenu.css

@@ -0,0 +1,31 @@
+.popupMenu {
+  display: inline-block;
+  width: inherit;
+  border: solid 1px #999;
+  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
+  box-sizing: border-box;
+  background: white;
+  border-radius: 3px;
+  padding: 20px 10px;
+  z-index: 3;
+}
+
+.popupMenu:before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  right: 3em;
+  bottom: -20px;
+  z-index: 2;
+}
+
+.popupMenu:after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #999;
+  position: absolute;
+  right: 3em;
+  bottom: -21px;
+  z-index: 1;
+}

client/coral-ui/components/PopupMenu.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import styles from './PopupMenu.css';
+
+export default ({children}) => (
+  <span className={styles.popupMenu}>{children}</span>
+);

client/coral-ui/index.js

@@ -7,4 +7,5 @@ export {default as TabContent} from './components/TabContent';
 export {default as Button} from './components/Button';
 export {default as Spinner} from './components/Spinner';
 export {default as Tooltip} from './components/Tooltip';
+export {default as PopupMenu} from './components/PopupMenu';
 export {default as Checkbox} from './components/Checkbox';

models/action.js

@@ -12,7 +12,9 @@ const ActionSchema = new Schema({
   action_type: String,
   item_type: String,
   item_id: String,
-  user_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')
 }, {
   timestamps: {
     createdAt: 'created_at',
@@ -35,13 +37,7 @@ ActionSchema.statics.findById = function(id) {
  * @param {String} action the new action to the comment
  * @return {Promise}
  */
-ActionSchema.statics.insertUserAction = ({item_id, item_type, user_id, action_type}) => {
-  const action = {
-    item_id,
-    item_type,
-    user_id,
-    action_type
-  };
+ActionSchema.statics.insertUserAction = (action) => {
 
   // Create/Update the action.
   return Action.findOneAndUpdate(action, action, {

models/comment.js

@@ -287,11 +287,13 @@ 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) => Action.insertUserAction({
+CommentSchema.statics.addAction = (item_id, user_id, action_type, field, detail) => Action.insertUserAction({
   item_id,
-  item_type: 'comment',
+  item_type: 'comments',
   user_id,
-  action_type
+  action_type,
+  field,
+  detail
 });
 
 /**

models/user.js

@@ -3,6 +3,7 @@ const uuid = require('uuid');
 const _ = require('lodash');
 const bcrypt = require('bcrypt');
 const jwt = require('jsonwebtoken');
+const Action = require('./action');
 
 const Comment = require('./comment');
 
@@ -596,3 +597,19 @@ UserService.addBio = (id, bio) => (
     new: true
   })
 );
+
+/**
+ * Add an action to the user.
+ * @param {String} item_id  identifier of the user  (uuid)
+ * @param {String} user_id  user id of the action (uuid)
+ * @param {String} action the new action to the user
+ * @return {Promise}
+ */
+UserService.addAction = (item_id, user_id, action_type, field, detail) => Action.insertUserAction({
+  item_id,
+  item_type: 'comment',
+  user_id,
+  action_type,
+  field,
+  detail
+});

routes/api/comments/index.js

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

routes/api/user/index.js

@@ -158,4 +158,21 @@ router.put('/:user_id/bio', (req, res, next) => {
     });
 });
 
+router.post('/:user_id/actions',  authorization.needed(), (req, res, next) => {
+  const {
+    action_type,
+    field,
+    detail
+  } = req.body;
+
+  User
+    .addAction(req.params.user_id, req.user.id, action_type, field, detail)
+    .then((action) => {
+      res.status(201).json(action);
+    })
+    .catch((err) => {
+      next(err);
+    });
+});
+
 module.exports = router;

tests/client/coral-framework/store/itemActions.spec.js

@@ -155,7 +155,11 @@ describe('itemActions', () => {
   describe('postAction', () => {
     it ('should post an action', () => {
       fetchMock.post('*', {id: '456'});
-      return actions.postAction('abc', 'flag', '123', 'comments')(store.dispatch)
+      const action = {
+        action_type: 'flag',
+        detail: 'Comment smells funny'
+      };
+      return actions.postAction('abc', 'comments', action)(store.dispatch)
         .then(response => {
           expect(fetchMock.calls().matched[0][0]).to.equal('/api/v1/comments/abc/actions');
           expect(response).to.deep.equal({id:'456'});

tests/routes/api/comments/index.js

@@ -395,11 +395,12 @@ 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({'user_id': '456', 'action_type': 'flag'})
+        .send({'action_type': 'flag', 'detail': '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('item_id', 'abc');
         });
     });

tests/routes/api/user/index.js

@@ -0,0 +1,44 @@
+const passport = require('../../../passport');
+
+const app = require('../../../../app');
+const chai = require('chai');
+const expect = chai.expect;
+
+// Setup chai.
+chai.should();
+chai.use(require('chai-http'));
+
+const User = require('../../../../models/user');
+
+describe('/api/v1/user/:user_id/actions', () => {
+
+  const users = [{
+    displayName: 'Ana',
+    email: 'ana@gmail.com',
+    password: '123'
+  }, {
+    displayName: 'Maria',
+    email: 'maria@gmail.com',
+    password: '123'
+  }];
+
+  beforeEach(() => {
+    return User.createLocalUsers(users);
+  });
+
+  describe('#post', () => {
+    it('it should update actions', () => {
+      return chai.request(app)
+        .post('/api/v1/user/abc/actions')
+        .set(passport.inject({id: '456', roles: ['admin']}))
+        .send({'action_type': 'flag', 'detail': '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('item_id', 'abc');
+        });
+    });
+  });
+});