diff --git a/bin/cli b/bin/cli index c5c61fbf6..5b52d96b9 100755 --- a/bin/cli +++ b/bin/cli @@ -4,38 +4,13 @@ * Module dependencies. */ -const program = require('commander'); -const pkg = require('../package.json'); -const dotenv = require('dotenv'); - -//============================================================================== -// Setting up the program command line arguments. -//============================================================================== - -program - .version(pkg.version) - .option('-c, --config [path]', 'Specify the configuration file to load') - .parse(process.argv); - -if (program.config) { - let r = dotenv.config({ - path: program.config - }); - - if (r.error) { - throw r.error; - } -} - -// Perform rewrites to the runtime environment variables based on the contents -// of the process.env.REWRITE_ENV if it exists. This is done here as it is the -// entrypoint for the entire application. -require('env-rewrite').rewrite(); +const util = require('../util'); +const program = require('./commander'); program .command('serve', 'serve the application') .command('assets', 'interact with assets') - .command('settings', 'work with the application settings') + .command('setup', 'setup the application') .command('jobs', 'work with the job queues') .command('users', 'work with the application auth') .parse(process.argv); @@ -43,4 +18,15 @@ program // If there is no command listed, output help. if (!process.argv.slice(2).length) { program.outputHelp(); + return; } + +// The ensures that the child process that is created here is always cleaned up +// properly when the parent process dies. +util.onshutdown([ + (signal) => { + if ((program.runningCommand.killed === false) && (program.runningCommand.exitCode === null)) { + program.runningCommand.kill(signal); + } + } +]); diff --git a/bin/cli-assets b/bin/cli-assets index f7d6a0bbb..76ca5735b 100755 --- a/bin/cli-assets +++ b/bin/cli-assets @@ -4,8 +4,7 @@ * Module dependencies. */ -const program = require('commander'); -const pkg = require('../package.json'); +const program = require('./commander'); const parseDuration = require('parse-duration'); const Table = require('cli-table'); const AssetModel = require('../models/asset'); @@ -86,9 +85,6 @@ function refreshAssets(ageString) { // Setting up the program command line arguments. //============================================================================== -program - .version(pkg.version); - program .command('list') .description('list all the assets in the database') diff --git a/bin/cli-jobs b/bin/cli-jobs index 879927197..4d348fabb 100755 --- a/bin/cli-jobs +++ b/bin/cli-jobs @@ -4,7 +4,7 @@ * Module dependencies. */ -const program = require('commander'); +const program = require('./commander'); const scraper = require('../services/scraper'); const mailer = require('../services/mailer'); const util = require('../util'); diff --git a/bin/cli-serve b/bin/cli-serve index c8cf37a47..0427dcf34 100755 --- a/bin/cli-serve +++ b/bin/cli-serve @@ -1,9 +1,9 @@ #!/usr/bin/env node const app = require('../app'); +const program = require('./commander'); const debug = require('debug')('talk:server'); const http = require('http'); -const init = require('../init'); const scraper = require('../services/scraper'); const mailer = require('../services/mailer'); const kue = require('../services/kue'); @@ -86,27 +86,15 @@ function onListening() { * Start the app. */ function startApp() { - init().then(() => { - /** - * Listen on provided port, on all network interfaces. - */ - server.listen(port); - server.on('error', onError); - server.on('listening', onListening); - }) - .catch((err) => { - console.error(err); - util.shutdown(1); - }); + /** + * Listen on provided port, on all network interfaces. + */ + server.listen(port); + server.on('error', onError); + server.on('listening', onListening); } -/** - * Module dependencies. - */ - -const program = require('commander'); - //============================================================================== // Setting up the program command line arguments. //============================================================================== diff --git a/bin/cli-settings b/bin/cli-settings deleted file mode 100755 index 7854942c0..000000000 --- a/bin/cli-settings +++ /dev/null @@ -1,51 +0,0 @@ -#!/usr/bin/env node - -/** - * Module dependencies. - */ - -const program = require('commander'); -const mongoose = require('../services/mongoose'); -const SettingsService = require('../services/settings'); -const util = require('../util'); - -// Register the shutdown criteria. -util.onshutdown([ - () => mongoose.disconnect() -]); - -//============================================================================== -// Setting up the program command line arguments. -//============================================================================== - -program - .command('init') - .description('initilizes the talk settings') - .action(() => { - const defaults = { - moderation: 'PRE', - wordlist: { - banned: [], - suspect: [] - } - }; - - SettingsService - .init(defaults) - .then(() => { - console.log('Created settings object.'); - util.shutdown(); - }) - .catch((err) => { - console.error(`failed to create the settings object ${JSON.stringify(err)}`); - util.shutdown(1); - }); - }); - -program.parse(process.argv); - -// If there is no command listed, output help. -if (!process.argv.slice(2).length) { - program.outputHelp(); - util.shutdown(); -} diff --git a/bin/cli-setup b/bin/cli-setup new file mode 100755 index 000000000..eaa2b90b1 --- /dev/null +++ b/bin/cli-setup @@ -0,0 +1,88 @@ +#!/usr/bin/env node + +/** + * Module dependencies. + */ + +const program = require('./commander'); +const inquirer = require('inquirer'); +const mongoose = require('../services/mongoose'); +const SettingModel = require('../models/setting'); +const SettingsService = require('../services/settings'); +const util = require('../util'); + +// Register the shutdown criteria. +util.onshutdown([ + () => mongoose.disconnect() +]); + +//============================================================================== +// Setting up the program command line arguments. +//============================================================================== + +program + .description('runs the setup wizard to setup the application') + .option('--defaults', 'apply defaults for config instead of prompting') + .parse(process.argv); + +//============================================================================== +// Setup the application +//============================================================================== + +SettingsService + .init() + .then((settings) => { + if (program.defaults) { + return settings.save(); + } + + console.log('We\'ll ask you some questions in order to setup your installation of Talk.\n'); + + return inquirer.prompt([ + { + type: 'input', + name: 'organizationName', + message: 'Organization Name', + default: settings.organizationName, + validate: (input) => { + if (input && input.length > 0) { + return true; + } + + return 'Organization Name is required.'; + } + }, + { + type: 'list', + choices: SettingModel.MODERATION_OPTIONS, + name: 'moderation', + default: settings.moderation, + message: 'Select a moderation mode' + }, + { + type: 'confirm', + name: 'requireEmailConfirmation', + default: settings.requireEmailConfirmation, + message: 'Should emails always be confirmed' + } + ]) + .then((answers) => { + + // Update the settings that were changed. + Object.keys(answers).forEach((key) => { + if (answers[key] !== undefined) { + settings[key] = answers[key]; + } + }); + + return settings.save(); + }); + }) + .then(() => { + console.log('Talk is now installed!'); + util.shutdown(); + }) + .catch((err) => { + console.error(err); + util.shutdown(1); + }); diff --git a/bin/cli-users b/bin/cli-users index a7e9cdbda..072a143ee 100755 --- a/bin/cli-users +++ b/bin/cli-users @@ -4,105 +4,132 @@ * Module dependencies. */ -const program = require('commander'); -const pkg = require('../package.json'); -const prompt = require('prompt'); +const program = require('./commander'); +const inquirer = require('inquirer'); const UsersService = require('../services/users'); const UserModel = require('../models/user'); const mongoose = require('../services/mongoose'); const util = require('../util'); const Table = require('cli-table'); +const validateRequired = (msg = 'Field is required', len = 1) => (input) => { + if (input && input.length >= len) { + return true; + } + + return msg; +}; + // Regeister the shutdown criteria. util.onshutdown([ () => mongoose.disconnect() ]); +function getUserCreateAnswers(options) { + if (options.flag_mode) { + + let user = { + email: options.email, + password: options.password, + confirmPassword: options.password, + displayName: options.name, + roles: [] + }; + + if (options.role && UserModel.USER_ROLES.indexOf(options.role) > -1) { + user.roles = [options.role]; + } + + return Promise.resolve(user); + } + + return inquirer.prompt([ + { + name: 'email', + message: 'Email', + format: 'email', + validate: validateRequired('Email is required') + }, + { + name: 'password', + message: 'Password', + type: 'password', + filter: (password) => { + return UsersService + .isValidPassword(password) + .catch((err) => { + throw err.message; + }); + } + }, + { + name: 'confirmPassword', + message: 'Confirm Password', + type: 'password', + filter: (confirmPassword) => { + return UsersService + .isValidPassword(confirmPassword) + .catch((err) => { + throw err.message; + }); + } + }, + { + name: 'displayName', + message: 'Display Name', + filter: (displayName) => { + return UsersService + .isValidDisplayName(displayName) + .catch((err) => { + throw err.message; + }); + } + }, + { + name: 'roles', + message: 'User Role', + type: 'checkbox', + choices: UserModel.USER_ROLES + } + ]); +} + /** * Prompts for input and registers a user based on those. */ function createUser(options) { - return new Promise((resolve, reject) => { - - if (options.flag_mode) { - return resolve({ - email: options.email, - password: options.password, - displayName: options.name, - role: options.role - }); - } - - prompt.start(); - - prompt.get([ - { - name: 'email', - description: 'Email', - format: 'email', - required: true - }, - { - name: 'password', - description: 'Password', - hidden: true, - required: true - }, - { - name: 'confirmPassword', - description: 'Confirm Password', - hidden: true, - required: true - }, - { - name: 'displayName', - description: 'Display Name', - required: true - }, - { - name: 'role', - description: 'User Role', - required: false - } - ], (err, result) => { - if (err) { - return reject(err); + getUserCreateAnswers(options) + .then((answers) => { + if (answers.password !== answers.confirmPassword) { + return Promise.reject(new Error('Passwords do not match')); } - if (result.password !== result.confirmPassword) { - return reject(new Error('Passwords do not match')); - } + return answers; + }) + .then((answers) => { + return UsersService + .createLocalUser(answers.email.trim(), answers.password.trim(), answers.displayName.trim()) + .then((user) => { + console.log(`Created user ${user.id}.`); - resolve(result); - }); - }) - .then((result) => { - return UsersService.createLocalUser(result.email.trim(), result.password.trim(), result.displayName.trim()) - .then((user) => { - console.log(`Created user ${user.id}.`); - - let role = result.role ? result.role.trim() : null; - - if (role && role.length > 0) { - return UsersService - .addRoleToUser(user.id, role) - .then(() => { - console.log(`Added the admin ${result.role.trim()} to User ${user.id}.`); - util.shutdown(); - }) - .catch((err) => { - console.error(err); - util.shutdown(); - }); - } else { - util.shutdown(); - } + if (answers.roles.length > 0) { + return Promise.all(answers.roles.map((role) => { + return UsersService + .addRoleToUser(user.id, role) + .then(() => { + console.log(`Added the role ${role} to User ${user.id}.`); + }); + })); + } + }); + }) + .then(() => { + util.shutdown(); }) .catch((err) => { console.error(err); util.shutdown(); }); - }); } /** @@ -127,44 +154,34 @@ function deleteUser(userID) { * Changes the password for a user. */ function passwd(userID) { - prompt.start(); - - prompt.get([ + inquirer.prompt([ { name: 'password', - description: 'Password', - hidden: true, - required: true + message: 'Password', + type: 'password', + validate: validateRequired('Password is required') }, { name: 'confirmPassword', - description: 'Confirm Password', - hidden: true, - required: true + message: 'Confirm Password', + type: 'password', + validate: validateRequired('Confirm Password is required') } - ], (err, result) => { - if (err) { - console.error(err); - util.shutdown(); - return; + ]) + .then((answers) => { + if (answers.password !== answers.confirmPassword) { + return Promise.reject(new Error('Password mismatch')); } - if (result.password !== result.confirmPassword) { - console.error(new Error('Password mismatch')); - util.shutdown(1); - return; - } - - UsersService - .changePassword(userID, result.password) - .then(() => { - console.log('Password changed.'); - util.shutdown(); - }) - .catch((err) => { - console.error(err); - util.shutdown(1); - }); + return UsersService.changePassword(userID, answers.password); + }) + .then(() => { + console.log('Password changed.'); + util.shutdown(); + }) + .catch((err) => { + console.error(err); + util.shutdown(1); }); } @@ -273,6 +290,13 @@ function mergeUsers(dstUserID, srcUserID) { * @param {String} role the role to add */ function addRole(userID, role) { + + if (UserModel.USER_ROLES.indexOf(role) === -1) { + console.error(`Role '${role}' is not supported. Supported roles are ${UserModel.USER_ROLES.join(', ')}.`); + util.shutdown(1); + return; + } + UsersService .addRoleToUser(userID, role) .then(() => { @@ -291,6 +315,13 @@ function addRole(userID, role) { * @param {String} role the role to remove */ function removeRole(userID, role) { + + if (UserModel.USER_ROLES.indexOf(role) === -1) { + console.error(`Role '${role}' is not supported. Supported roles are ${UserModel.USER_ROLES.join(', ')}.`); + util.shutdown(1); + return; + } + UsersService .removeRoleFromUser(userID, role) .then(() => { @@ -375,9 +406,6 @@ function enableUser(userID) { // Setting up the program command line arguments. //============================================================================== -program - .version(pkg.version); - program .command('create') .option('--email [email]', 'Email to use') diff --git a/bin/commander.js b/bin/commander.js new file mode 100644 index 000000000..2a3d1e363 --- /dev/null +++ b/bin/commander.js @@ -0,0 +1,46 @@ +const pkg = require('../package.json'); +const dotenv = require('dotenv'); +const fs = require('fs'); +const program = require('commander'); +const util = require('../util'); + +// Perform rewrites to the runtime environment variables based on the contents +// of the process.env.REWRITE_ENV if it exists. This is done here as it is the +// entrypoint for the entire application. +require('env-rewrite').rewrite(); + +//============================================================================== +// Setting up the program command line arguments. +//============================================================================== + +const parseArgs = require('minimist')(process.argv.slice(2), { + alias: { + 'c': 'config' + }, + string: [ + 'config', + 'pid' + ], + default: { + 'config': null, + 'pid': null + } +}); + +if (parseArgs.config) { + let envConfig = dotenv.parse(fs.readFileSync(parseArgs.config, {encoding: 'utf8'})); + + Object.keys(envConfig).forEach((k) => { + process.env[k] = envConfig[k]; + }); +} + +// If the `--pid` flag is used, put the current pid there. +if (parseArgs.pid) { + util.pid(parseArgs.pid); +} + +module.exports = program + .version(pkg.version) + .option('-c, --config [path]', 'Specify the configuration file to load') + .option('--pid [path]', 'Specify a path to output the current PID to'); diff --git a/circle.yml b/circle.yml index 160bc7bb9..99b7d852b 100644 --- a/circle.yml +++ b/circle.yml @@ -14,13 +14,15 @@ database: post: # Initialize the settings in the database, this will create indicies for the # database. - - ./bin/cli settings init + - ./bin/cli setup --defaults - sleep 2 test: override: # Run the tests using the junit reporter. - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml NPM_PACKAGE_CONFIG_MOCHA_REPORTER=mocha-junit-reporter npm run test + # Run the e2e test suite + - E2E_REPORT_PATH=$CIRCLE_TEST_REPORTS/e2e npm run e2e deployment: release: diff --git a/client/coral-admin/src/actions/auth.js b/client/coral-admin/src/actions/auth.js index c3f9b1be1..8bc0d4e4c 100644 --- a/client/coral-admin/src/actions/auth.js +++ b/client/coral-admin/src/actions/auth.js @@ -14,7 +14,10 @@ export const checkLogin = () => dispatch => { const isAdmin = !!result.user.roles.filter(i => i === 'ADMIN').length; dispatch(checkLoginSuccess(result.user, isAdmin)); }) - .catch(error => dispatch(checkLoginFailure(error))); + .catch(error => { + console.error(error); + dispatch(checkLoginFailure(`${error.message}`)); + }); }; // LogOut Actions diff --git a/client/coral-admin/src/actions/comments.js b/client/coral-admin/src/actions/comments.js index fe4895ed3..df68b72c4 100644 --- a/client/coral-admin/src/actions/comments.js +++ b/client/coral-admin/src/actions/comments.js @@ -15,17 +15,18 @@ export const fetchModerationQueueComments = () => { return Promise.all([ coralApi('/queue/comments/pending'), + coralApi('/queue/users/pending'), coralApi('/queue/comments/rejected'), coralApi('/queue/comments/flagged') ]) - .then(([pending, rejected, flagged]) => { + .then(([pendingComments, pendingUsers, rejected, flagged]) => { /* Combine seperate calls into a single object */ flagged.comments.forEach(comment => comment.flagged = true); return { - comments: [...pending.comments, ...rejected.comments, ...flagged.comments], - users: [...pending.users, ...rejected.users, ...flagged.users], - actions: [...pending.actions, ...rejected.actions, ...flagged.actions] + comments: [...pendingComments.comments, ...rejected.comments, ...flagged.comments], + users: [...pendingComments.users, ...pendingUsers.users, ...rejected.users, ...flagged.users], + actions: [...pendingComments.actions, ...pendingUsers.actions, ...rejected.actions, ...flagged.actions] }; }) .then(addUsersCommentsActions.bind(this, dispatch)); @@ -41,6 +42,15 @@ export const fetchPendingQueue = () => { }; }; +export const fetchPendingUsersQueue = () => { + return dispatch => { + dispatch({type: commentTypes.COMMENTS_MODERATION_QUEUE_FETCH_REQUEST}); + + return coralApi('/queue/users/pending') + .then(addUsersCommentsActions.bind(this, dispatch)); + }; +}; + export const fetchRejectedQueue = () => { return dispatch => { dispatch({type: commentTypes.COMMENTS_MODERATION_QUEUE_FETCH_REQUEST}); diff --git a/client/coral-admin/src/actions/users.js b/client/coral-admin/src/actions/users.js index 30d9cd34b..44f0325d9 100644 --- a/client/coral-admin/src/actions/users.js +++ b/client/coral-admin/src/actions/users.js @@ -1,5 +1,5 @@ import coralApi from '../../../coral-framework/helpers/response'; -import * as actions from '../constants/user'; +import * as userTypes from '../constants/users'; /** * Action disptacher related to users @@ -7,9 +7,17 @@ import * as actions from '../constants/user'; // change status of a user export const userStatusUpdate = (status, userId, commentId) => { return (dispatch) => { - dispatch({type: actions.UPDATE_STATUS_REQUEST}); + dispatch({type: userTypes.UPDATE_STATUS_REQUEST}); return coralApi(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}}) - .then(res => dispatch({type: actions.UPDATE_STATUS_SUCCESS, res})) - .catch(error => dispatch({type: actions.UPDATE_STATUS_FAILURE, error})); + .then(res => dispatch({type: userTypes.UPDATE_STATUS_SUCCESS, res})) + .catch(error => dispatch({type: userTypes.UPDATE_STATUS_FAILURE, error})); + }; +}; + +// change status of a user +export const sendNotificationEmail = (userId, subject, body) => { + return (dispatch) => { + return coralApi(`/users/${userId}/email`, {method: 'POST', body: {subject, body}}) + .catch(error => dispatch({type: userTypes.USER_EMAIL_FAILURE, error})); }; }; diff --git a/client/coral-admin/src/components/ActionButton.js b/client/coral-admin/src/components/ActionButton.js new file mode 100644 index 000000000..61de1c669 --- /dev/null +++ b/client/coral-admin/src/components/ActionButton.js @@ -0,0 +1,48 @@ +import React from 'react'; +import styles from './ModerationList.css'; +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from '../translations.json'; +import {FabButton, Button, Icon} from 'coral-ui'; + +const ActionButton = ({option, type, comment = {}, user, menuOptionsMap, onClickAction, onClickShowBanDialog}) => +{ + const banned = user.status === 'BANNED'; + + if (option === 'flag' && (type === 'USERS' || comment.status || comment.flagged === true)) { + return null; + } + if (option === 'ban') { + return ( +
+ +
+ ); + } + const menuOption = menuOptionsMap[option]; + const action = { + item_type: type, + item_id: type === 'COMMENTS' ? comment.id : user.id + }; + return ( + onClickAction(menuOption.status, type === 'COMMENTS' ? comment : user, action)} + /> + ); +}; + +export default ActionButton; + +const lang = new I18n(translations); diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js index c393df21d..0ad149fbe 100644 --- a/client/coral-admin/src/components/BanUserDialog.js +++ b/client/coral-admin/src/components/BanUserDialog.js @@ -35,7 +35,7 @@ const BanUserDialog = ({open, handleClose, onClickBanUser, user = {}}) => ( - diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js index 0eb4fce95..74b0361a2 100644 --- a/client/coral-admin/src/components/Comment.js +++ b/client/coral-admin/src/components/Comment.js @@ -2,18 +2,19 @@ import React from 'react'; import timeago from 'timeago.js'; import Linkify from 'react-linkify'; -import styles from './CommentList.css'; +import styles from './ModerationList.css'; import I18n from 'coral-framework/modules/i18n/i18n'; import translations from '../translations.json'; import Highlighter from 'react-highlight-words'; -import {FabButton, Button, Icon} from 'coral-ui'; +import {Icon} from 'coral-ui'; +import ActionButton from './ActionButton'; const linkify = new Linkify(); // Render a single comment for the list -export default props => { +const Comment = props => { const {comment, author} = props; let authorStatus = author.status; const links = linkify.getMatches(comment.body); @@ -30,7 +31,18 @@ export default props => { {links ? Contains Link : null}
- {props.modActions.map((action, i) => getActionButton(action, i, props))} + {props.modActions.map( + (action, i) => + + )}
{authorStatus === 'banned' ? {lang.t('comment.banned_user')} : null} @@ -49,43 +61,7 @@ export default props => { ); }; -// Get the button of the action performed over a comment if any -const getActionButton = (action, i, props) => { - const {comment, author} = props; - const status = comment.status; - const flagged = comment.flagged; - const banned = (author.status === 'banned'); - - if (action === 'flag' && (status || flagged === true)) { - return null; - } - if (action === 'ban') { - return ( -
- -
- ); - } - return ( - props.onClickAction(props.actionsMap[action].status, comment)} - /> - ); -}; +export default Comment; const linkStyles = { backgroundColor: 'rgb(255, 219, 135)', diff --git a/client/coral-admin/src/components/CommentList.js b/client/coral-admin/src/components/CommentList.js deleted file mode 100644 index 178d3cc02..000000000 --- a/client/coral-admin/src/components/CommentList.js +++ /dev/null @@ -1,166 +0,0 @@ -import React, {PropTypes} from 'react'; -import styles from './CommentList.css'; -import key from 'keymaster'; -import Hammer from 'hammerjs'; -import Comment from 'components/Comment'; - -// Each action has different meaning and configuration -const modActions = { - 'reject': {status: 'REJECTED', icon: 'close', key: 'r'}, - 'approve': {status: 'ACCEPTED', icon: 'done', key: 't'}, - 'flag': {status: 'FLAGGED', icon: 'flag', filter: 'Untouched'}, - 'ban': {status: 'BANNED', icon: 'not interested'} -}; - -// Renders a comment list and allow performing actions -export default class CommentList extends React.Component { - static propTypes = { - isActive: PropTypes.bool, - singleView: PropTypes.bool, - commentIds: PropTypes.arrayOf(PropTypes.string).isRequired, - comments: PropTypes.object.isRequired, - users: PropTypes.object.isRequired, - onClickAction: PropTypes.func, - - // list of actions (flags, etc) associated with the comments - modActions: PropTypes.arrayOf(PropTypes.string).isRequired, - loading: PropTypes.bool, - - suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired - } - - constructor (props) { - super(props); - - this.state = {active: null}; - this.onClickAction = this.onClickAction.bind(this); - this.onClickShowBanDialog = this.onClickShowBanDialog.bind(this); - } - - // remove key handlers before leaving - componentWillUnmount () { - this.unbindKeyHandlers(); - } - - // add key handlers and gestures - componentDidMount () { - this.bindKeyHandlers(); - - // this.bindGestures() // need to check whether we're on a mobile device or this throws an Error - } - - // If entering to singleview and no active, active is the first eleement - componentWillReceiveProps (nextProps) { - if (nextProps.singleView && !this.state.active) { - this.setState({active: nextProps.commentIds[0]}); - } - } - - // Add swipe to approve or reject - bindGestures () { - const {modActions} = this.props; - this._hammer = new Hammer(this.base); - this._hammer.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL}); - - if (modActions.indexOf('reject') !== -1) { - this._hammer.on('swipeleft', () => this.props.singleView && this.actionKeyHandler('Rejected')); - } - if (modActions.indexOf('approve') !== -1) { - this._hammer.on('swiperight', () => this.props.singleView && this.actionKeyHandler('Approved')); - } - } - - // Add key handlers. Each action has one and added j/k for moving around - bindKeyHandlers () { - this.props.modActions.filter(action => modActions[action].key).forEach(action => { - key(modActions[action].key, 'commentList', () => this.props.isActive && this.actionKeyHandler(modActions[action].status)); - }); - key('j', 'commentList', () => this.props.isActive && this.moveKeyHandler('down')); - key('k', 'commentList', () => this.props.isActive && this.moveKeyHandler('up')); - key.setScope('commentList'); - } - - // Perform an action using the keys only if the comment is active - actionKeyHandler (action) { - if (this.props.isActive && this.state.active) { - this.onClickAction(action, this.state.active); - } - } - - // move around with j/k - moveKeyHandler (direction) { - if (!this.props.isActive) { - return; - } - - const {commentIds} = this.props; - const {active} = this.state; - - // check boundaries - if (active === null || !commentIds.length) { - this.setState({active: commentIds[0]}); - } else if (direction === 'up' && active !== commentIds[0]) { - this.setState({active: commentIds[commentIds.indexOf(active) - 1]}); - } else if (direction === 'down' && active !== commentIds[commentIds.length - 1]) { - this.setState({active: commentIds[commentIds.indexOf(active) + 1]}); - } - - // scroll to the position - const index = Math.max(commentIds.indexOf(this.state.active), 0); - this.base.childNodes[index] && this.base.childNodes[index].focus(); - } - - unbindKeyHandlers () { - key.deleteScope('commentList'); - } - - // If we are performing an action over a comment (aka removing from the list) we need to select a new active. - // TODO: In the future this can be improved and look at the actual state to - // resolve since the content of the list could change externally. For now it works as expected - onClickAction (action, id, author_id) { - - // activate the next comment - if (id === this.state.active) { - const {commentIds} = this.props; - if (commentIds[commentIds.length - 1] === this.state.active) { - this.setState({active: commentIds[commentIds.length - 2]}); - } else { - this.setState({active: commentIds[Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.length - 1)]}); - } - } - this.props.onClickAction(action, id, author_id); - } - - onClickShowBanDialog(userId, userName, commentId) { - this.props.onClickShowBanDialog(userId, userName, commentId); - } - - render () { - const {singleView, commentIds, comments, users, hideActive, key, suspectWords} = this.props; - const {active} = this.state; - - return ( - - ); - } -} diff --git a/client/coral-admin/src/components/Modal.css b/client/coral-admin/src/components/Modal.css index 8a3d2ad00..fe089cf41 100644 --- a/client/coral-admin/src/components/Modal.css +++ b/client/coral-admin/src/components/Modal.css @@ -19,7 +19,6 @@ .inner { width: 100vw; - height: 100vh; background-color: #fff; box-shadow: 2px 2px 5px 0px rgba(153,153,153,1); padding: 20px; @@ -37,7 +36,6 @@ @media (--big-viewport) { .inner { width: 600px; - height: 50vh; border-radius: 4px; } } diff --git a/client/coral-admin/src/components/CommentList.css b/client/coral-admin/src/components/ModerationList.css similarity index 96% rename from client/coral-admin/src/components/CommentList.css rename to client/coral-admin/src/components/ModerationList.css index b90da3166..fbcbce7d7 100644 --- a/client/coral-admin/src/components/CommentList.css +++ b/client/coral-admin/src/components/ModerationList.css @@ -69,6 +69,7 @@ justify-content: space-between; .author { + min-width: 230px; display: flex; align-items: center; } @@ -112,6 +113,12 @@ padding-top: 15px; padding-left: 10px; } + + .flagCount{ + font-size: 12px; + color: #d32f2f; + } + } .empty { diff --git a/client/coral-admin/src/components/ModerationList.js b/client/coral-admin/src/components/ModerationList.js new file mode 100644 index 000000000..c1df40d31 --- /dev/null +++ b/client/coral-admin/src/components/ModerationList.js @@ -0,0 +1,227 @@ +import React, {PropTypes} from 'react'; +import styles from './ModerationList.css'; +import key from 'keymaster'; +import Hammer from 'hammerjs'; +import Comment from './Comment'; +import UserAction from './UserAction'; +import SuspendUserModal from './SuspendUserModal'; + +// Each action has different meaning and configuration +const menuOptionsMap = { + 'reject': {status: 'REJECTED', icon: 'close', key: 'r'}, + 'approve': {status: 'ACCEPTED', icon: 'done', key: 't'}, + 'flag': {status: 'FLAGGED', icon: 'flag', filter: 'Untouched'}, + 'ban': {status: 'BANNED', icon: 'not interested'} +}; + +// Renders a comment list and allow performing actions +export default class ModerationList extends React.Component { + static propTypes = { + isActive: PropTypes.bool, + singleView: PropTypes.bool, + commentIds: PropTypes.arrayOf(PropTypes.string), + actionIds: PropTypes.arrayOf(PropTypes.string), + comments: PropTypes.object, + users: PropTypes.object.isRequired, + actions: PropTypes.object, + userStatusUpdate: PropTypes.func.isRequired, + suspendUser: PropTypes.func.isRequired, + + // list of actions (flags, etc) associated with the comments + modActions: PropTypes.arrayOf(PropTypes.string).isRequired, + loading: PropTypes.bool, + + suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired + } + + state = {active: null, suspendUserModal: null, email: null}; + + // remove key handlers before leaving + componentWillUnmount () { + this.unbindKeyHandlers(); + } + + // add key handlers and gestures + componentDidMount () { + this.bindKeyHandlers(); + + // this.bindGestures() // need to check whether we're on a mobile device or this throws an Error + } + + // If entering to singleview and no active, active is the first eleement + componentWillReceiveProps (nextProps) { + if (nextProps.singleView && !this.state.active) { + this.setState({active: nextProps.commentIds[0]}); + } + } + + // Add swipe to approve or reject + bindGestures () { + const {modActions} = this.props; + this._hammer = new Hammer(this.base); + this._hammer.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL}); + + if (modActions.indexOf('reject') !== -1) { + this._hammer.on('swipeleft', () => this.props.singleView && this.actionKeyHandler('Rejected')); + } + if (modActions.indexOf('approve') !== -1) { + this._hammer.on('swiperight', () => this.props.singleView && this.actionKeyHandler('Approved')); + } + } + + // Add key handlers. Each action has one and added j/k for moving around + bindKeyHandlers () { + const {modActions, isActive} = this.props; + modActions.filter(action => menuOptionsMap[action].key).forEach(action => { + key(menuOptionsMap[action].key, 'moderationList', () => isActive && this.actionKeyHandler(menuOptionsMap[action].status)); + }); + key('j', 'moderationList', () => isActive && this.moveKeyHandler('down')); + key('k', 'moderationList', () => isActive && this.moveKeyHandler('up')); + key.setScope('moderationList'); + } + + // Perform an action using the keys only if the comment is active + actionKeyHandler (action) { + if (this.props.isActive && this.state.active) { + this.onClickAction(action, this.state.active); + } + } + + // move around with j/k + moveKeyHandler (direction) { + if (!this.props.isActive) { + return; + } + + const {commentIds} = this.props; + const {active} = this.state; + + // check boundaries + if (active === null || !commentIds.length) { + this.setState({active: commentIds[0]}); + } else if (direction === 'up' && active !== commentIds[0]) { + this.setState({active: commentIds[commentIds.indexOf(active) - 1]}); + } else if (direction === 'down' && active !== commentIds[commentIds.length - 1]) { + this.setState({active: commentIds[commentIds.indexOf(active) + 1]}); + } + + // scroll to the position + const index = Math.max(commentIds.indexOf(this.state.active), 0); + this.base.childNodes[index] && this.base.childNodes[index].focus(); + } + + unbindKeyHandlers () { + key.deleteScope('moderationList'); + } + + // If we are performing an action over a comment (aka removing from the list) we need to select a new active. + // TODO: In the future this can be improved and look at the actual state to + // resolve since the content of the list could change externally. For now it works as expected + onClickAction = (menuOption, id, action) => { + + // activate the next comment + if (id === this.state.active) { + const moderationIds = this.getModerationIds(); + if (moderationIds[moderationIds.length - 1] === this.state.active) { + this.setState({active: moderationIds[moderationIds.length - 2]}); + } else { + this.setState({active: moderationIds[Math.min(moderationIds.indexOf(this.state.active) + 1, moderationIds.length - 1)]}); + } + } + + // Update the status right away if this is a comment + if (action.item_type === 'COMMENTS') { + this.props.updateCommentStatus(menuOption, id); + } else if (action.item_type === 'USERS') { + + // If a user bio or name is rejected, bring up a dialog before suspending them. + if (menuOption === 'REJECTED') { + this.setState({suspendUserModal: action}); + } else if (menuOption === 'ACCEPTED') { + this.props.userStatusUpdate('ACTIVE', action.item_id); + } + } + } + + onClickShowBanDialog = (userId, userName, commentId) => { + this.props.onClickShowBanDialog(userId, userName, commentId); + } + + mapModItems = (itemId, index) => { + + const {comments = {}, users, actions = {}, modActions, suspectWords, hideActive} = this.props; + const {active} = this.state; + + // Because ids are unique, the id will either appear as an action or as a comment. + + const item = comments[itemId] || actions[itemId]; + let modItem; + + if (item.body) { + + // If the item is a comment... + const author = users[item.author_id]; + modItem = ; + } else { + + // If the item is an action... + const user = users[item.item_id]; + modItem = user && ; + } + return modItem; + } + + getModerationIds = () => { + const {commentIds = [], actionIds = [], comments, actions} = this.props; + if (comments && actions) { + return [ ...commentIds, ...actionIds ].sort((a, b) => { + const itemA = comments[a] || actions[a]; + const itemB = comments[b] || actions[b]; + return itemB.updated_at - itemA.updated_at; + }); + } else { + return comments ? commentIds : actionIds; + } + } + + render () { + const {singleView, key, suspendUser} = this.props; + + // Combine moderations and actions into a single stream and sort by most recently updated. + const moderationIds = this.getModerationIds(); + + return ( +
    + {moderationIds.map(this.mapModItems)} + this.setState({suspendUserModal:null})} + suspendUser={suspendUser} /> +
+ ); + } +} diff --git a/client/coral-admin/src/components/SuspendUserModal.css b/client/coral-admin/src/components/SuspendUserModal.css new file mode 100644 index 000000000..2dbdfc0f3 --- /dev/null +++ b/client/coral-admin/src/components/SuspendUserModal.css @@ -0,0 +1,31 @@ + +.modalButtons { + display: flex; + justify-content: flex-end; + margin-top: 50px; +} + +.emailInput { + border-radius: 3px; + width: 100%; + padding: 10px; + font-size: 14px; +} + +.writeContainer { + margin-top: 20px; +} + +.emailContainer { + display: flex; +} + +.emailMessage { + font-weight: 800; +} + +.title { + font-size: 20px; + font-weight: 800; + margin-bottom: 20px; +} diff --git a/client/coral-admin/src/components/SuspendUserModal.js b/client/coral-admin/src/components/SuspendUserModal.js new file mode 100644 index 000000000..5ad8c1616 --- /dev/null +++ b/client/coral-admin/src/components/SuspendUserModal.js @@ -0,0 +1,106 @@ +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from '../translations.json'; +import React, {Component, PropTypes} from 'react'; +import Modal from 'components/Modal'; +import styles from './SuspendUserModal.css'; +import {Button} from 'coral-ui'; + +const stages = [ + { + title: 'suspenduser.title_0', + description: 'suspenduser.description_0', + options: { + 'j': 'suspenduser.no_cancel', + 'k': 'suspenduser.yes_suspend' + } + }, + { + title: 'suspenduser.title_1', + description: 'suspenduser.description_1', + options: { + 'j': 'bandialog.cancel', + 'k': 'suspenduser.send' + } + } +]; + +class SuspendUserModal extends Component { + + state = {email: '', stage: 0} + + static propTypes = { + stage: PropTypes.number, + actionType: PropTypes.string, + onClose: PropTypes.func.isRequired, + suspendUser: 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)}); + } + + /* + * When an admin clicks to suspend a user a dialog is shown, this function + * handles the possible actions for that dialog. + */ + onActionClick = (stage, menuOption) => () => { + const {suspendUser, action} = this.props; + const {stage, email} = this.state; + const cancel = this.props.onClose; + const next = () => this.setState({stage: stage + 1}); + const suspend = () => suspendUser(action.item_id, lang.t('suspenduser.email_subject'), email) + .then(this.props.onClose); + const suspendModalActions = [ + [ cancel, next ], + [ cancel, suspend ] + ]; + return suspendModalActions[stage][menuOption](); + } + + onEmailChange = (e) => this.setState({email: e.target.value}) + + render () { + const {action, onClose} = this.props; + + if (!action) { + return null; + } + + const {stage} = this.state; + const actionType = action.actionType; + const about = actionType === 'flag_bio' ? lang.t('suspenduser.bio') : lang.t('suspenduser.username'); + return +
{lang.t(stages[stage].title, about)}
+
+
+ {lang.t(stages[stage].description, about)} +
+ { + stage === 1 && +
+
{lang.t('suspenduser.write_message')}
+
+