From 15eb946f00928e2077cc83a1e85b0c2e3c67d466 Mon Sep 17 00:00:00 2001 From: gaba Date: Thu, 1 Dec 2016 13:05:10 -0800 Subject: [PATCH] Trying to get the Dialog up. --- client/coral-admin/src/actions/users.js | 8 +- .../src/components/BanUserDialog.css | 143 ++++++++++++++++++ .../src/components/BanUserDialog.js | 14 ++ .../src/components/BanUserDialogContent.js | 34 +++++ client/coral-admin/src/components/Comment.js | 37 ++++- .../coral-admin/src/components/CommentList.js | 2 +- client/coral-admin/src/constants/users.js | 2 + .../ModerationQueue/ModerationQueue.js | 1 + client/coral-admin/src/reducers/users.js | 14 +- .../coral-admin/src/services/talk-adapter.js | 3 - client/coral-admin/src/translations.json | 14 ++ models/user.js | 37 ++--- tests/models/user.js | 26 ---- 13 files changed, 269 insertions(+), 66 deletions(-) create mode 100644 client/coral-admin/src/components/BanUserDialog.css create mode 100644 client/coral-admin/src/components/BanUserDialog.js create mode 100644 client/coral-admin/src/components/BanUserDialogContent.js create mode 100644 client/coral-admin/src/constants/users.js diff --git a/client/coral-admin/src/actions/users.js b/client/coral-admin/src/actions/users.js index 53ff83e42..2fe40eb24 100644 --- a/client/coral-admin/src/actions/users.js +++ b/client/coral-admin/src/actions/users.js @@ -2,10 +2,10 @@ * Action disptacher related to users */ -let rejected = 'rejected'; + // Dialog Actions +export const showBanUserDialog = () => ({type: 'SHOW_BANUSER_DIALOG'}); +export const hideBanUserDialog = () => ({type: 'HIDE_BANUSER_DIALOG'}); -export const banUser = (status, id, author_id) => (dispatch, getState) => { +export const banUser = (status, id, author_id) => (dispatch) => { dispatch({type: 'USER_STATUS_UPDATE', id, author_id, status}); - dispatch({type: 'COMMENT_STATUS_UPDATE', id, rejected}); - dispatch({type: 'COMMENT_UPDATE', comment: getState().comments.get('byId').get(id)}); }; diff --git a/client/coral-admin/src/components/BanUserDialog.css b/client/coral-admin/src/components/BanUserDialog.css new file mode 100644 index 000000000..e645885ce --- /dev/null +++ b/client/coral-admin/src/components/BanUserDialog.css @@ -0,0 +1,143 @@ +.dialog { + border: none; + box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); + width: 280px; + top: 10px; +} + +.header { + margin-bottom: 20px; +} + +.header h1, .separator h1{ + text-align: center; + font-size: 1.2em; +} + +.formField { + margin-top: 15px; +} + +.formField label { + font-size: 1.08em; + font-weight: bold; + margin-bottom: 5px; +} + +.formField input { + width: 100%; + display: block; + border: none; + outline: none; + border: 1px solid rgba(0,0,0,.12); + padding: 10px 6px; + box-sizing: border-box; + border-radius: 2px; + margin: 5px auto; +} + +.footer { + margin: 20px auto 10px; + text-align: center; +} + +.footer span { + display: block; + margin-bottom: 5px; +} + +.footer a { + color: #2c69b6; + cursor: pointer; + margin: 0 5px; +} + +.socialConnections { + margin-bottom: 20px; +} + +.signInButton { + margin-top: 10px; +} + +.close { + font-size: 20px; + line-height: 14px; + top: 10px; + right: 10px; + position: absolute; + display: block; + font-weight: bold; + color: #363636; + cursor: pointer; +} + +.close:hover { + color: #6b6b6b; +} + +input.error{ + border: solid 2px #f44336; +} + +.errorMsg, .hint { + color: grey; + font-weight: 600; + padding: 3px 0 16px; +} + +.alert { + padding: 10px; + margin-bottom: 20px; + border-radius: 2px; +} + +.alert--success { + border: solid 1px #1ec00e; + background: #cbf1b8; + color: #006900; +} + +.alert--error { + background: #FFEBEE; + color: #B71C1C; +} + +.userBox a { + color: #2c69b6; + cursor: pointer; + margin: 0px; +} + +.attention { + display: inline-block; + width: 15px; + height: 15px; + background: #B71C1C; + color: #FFEBEE; + font-weight: bolder; + padding: 4px; + vertical-align: middle; + border-radius: 20px; + box-sizing: border-box; + font-size: 9px; + line-height: 7px; + text-align: center; + margin-right: 5px; +} + +.action { + margin-top: 15px; +} + +.passwordRequestSuccess { + border: 1px solid green; + background-color: lightgreen; + padding: 10px; +} + +.passwordRequestFailure { + border: 1px solid orange; + background-color: 1px solid coral; + padding: 10px; +} diff --git a/client/coral-admin/src/components/BanUserDialog.js b/client/coral-admin/src/components/BanUserDialog.js new file mode 100644 index 000000000..4e6837acf --- /dev/null +++ b/client/coral-admin/src/components/BanUserDialog.js @@ -0,0 +1,14 @@ +import React from 'react'; +import {Dialog} from 'coral-ui'; +import styles from './BanUserDialog.css'; + +import BanUserDialogContent from './BanUserDialogContent'; + +const BanUserDialog = ({view, handleClose, ...props}) => ( + + × + {view === 'Ban' && } + +); + +export default BanUserDialog; diff --git a/client/coral-admin/src/components/BanUserDialogContent.js b/client/coral-admin/src/components/BanUserDialogContent.js new file mode 100644 index 000000000..c36d1fd95 --- /dev/null +++ b/client/coral-admin/src/components/BanUserDialogContent.js @@ -0,0 +1,34 @@ +import React from 'react'; +import Button from 'coral-ui/components/Button'; +import styles from './BanUserDialog.css'; +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from '../translations'; +const lang = new I18n(translations); + +const BanUserDialogContent = ({...props}) => ( +
+
+

+ {lang.t('bandialog.ban_user')} +

+
+
+

+ {lang.t('bandialog.are_you_sure')} +

+

+ {lang.t('bandialog.note')} +

+
+
+ + +
+
+); + +export default BanUserDialogContent; diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js index 6d7eaf3db..fc1f82286 100644 --- a/client/coral-admin/src/components/Comment.js +++ b/client/coral-admin/src/components/Comment.js @@ -1,4 +1,3 @@ - import React from 'react'; import timeago from 'timeago.js'; import styles from './CommentList.css'; @@ -7,8 +6,19 @@ import translations from '../translations.json'; import Linkify from 'react-linkify'; import {Icon} from 'react-mdl'; import {FabButton, Button} from 'coral-ui'; +import BanUserDialog from './BanUserDialog'; +// import {showBanUserDialog, hideBanUserDialog} from '../actions/users'; const linkify = new Linkify(); +// +// const mapDispatchToProps = dispatch => ({ +// showBanUserDialog: () => dispatch(showBanUserDialog()), +// handleClose: () => dispatch(hideBanUserDialog()), +// }); + +// handleClose() { +// this.props.hideBanUserDialog(); +// } // Render a single comment for the list export default props => { @@ -52,17 +62,30 @@ export default props => { const getActionButton = (action, i, props) => { const status = props.comment.get('status'); const flagged = props.comment.get('flagged'); - const banned = (props.author.get('status') === 'banned'); if (action === 'flag' && (status || flagged === true)) { return null; } - if (action === 'ban' && !banned) { + if (action === 'ban') { + //const {showBanUserDialog} = this.props; return ( - - ); + // +
+ + +
+ ); } return ( { switch (action.type) { case 'USERS_MODERATION_QUEUE_FETCH_SUCCESS': return replaceUsers(action, state); case 'USER_STATUS_UPDATE': return updateUserStatus(state, action); + case actions.SHOW_BANUSER_DIALOG: + return state + .set('showBanUserDialog', true); + case actions.HIDE_BANUSER_DIALOG: + return state + .set('showBanUserDialog', false); default: return state; } }; @@ -23,6 +31,6 @@ const replaceUsers = (action, state) => { // Update a user status const updateUserStatus = (state, action) => { const byId = state.get('byId'); - const data = byId.get(action.id).set('status', action.status.toLowerCase()); - return state.set('byId', byId.set(action.id, data)); + const data = byId.get(action.author_id).set('status', action.status.toLowerCase()); + return state.set('byId', byId.set(action.author_id, data)); }; diff --git a/client/coral-admin/src/services/talk-adapter.js b/client/coral-admin/src/services/talk-adapter.js index 246b656f0..0065ce99a 100644 --- a/client/coral-admin/src/services/talk-adapter.js +++ b/client/coral-admin/src/services/talk-adapter.js @@ -87,9 +87,6 @@ const createComment = (store, name, comment) => { // Ban a user const userStatusUpdate = (store, author_id, status) => { - console.log('DEBUG author_id', author_id); - console.log('DEBUG status', status); - console.log('DEBUG store', store); coralApi(`/user/${author_id}/status`, {method: 'POST', body: {status: status, comment_id: ''}}) .then(res => store.dispatch({type: 'USER_BAN_SUCESSS', res})) .catch(error => store.dispatch({type: 'USER_BAN_FAILED', error})); diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index d219361b4..cd598df08 100644 --- a/client/coral-admin/src/translations.json +++ b/client/coral-admin/src/translations.json @@ -51,6 +51,13 @@ "moderate": "Moderate", "configure": "Configure", "community": "Community" + }, + "bandialog": { + "ban_user": "Ban User?", + "are_you_sure": "Are you sure you would like to ban {props.author.displayName}?", + "note": "Note: Banning this user will also place this comment in the Rejected queue.", + "cancel": "Cancel", + "yes_ban_user": "Yes, Ban User" } }, "es": { @@ -94,6 +101,13 @@ "moderate": "Moderar", "configure": "Configurar", "community": "Comunidad" + }, + "bandialog": { + "ban_user": "Quieres suspender el Usuario?", + "are_you_sure": "Estas segura que quieres suspender a {props.author.displayName}?", + "note": "Nota: Suspender este usuario también va a colocar este comentario en la cola de Rechazados.", + "cancel": "Cancelar", + "yes_ban_user": "Si, Suspendan el usuario" } } } diff --git a/models/user.js b/models/user.js index b73c99d68..6dfaa53ff 100644 --- a/models/user.js +++ b/models/user.js @@ -422,34 +422,27 @@ UserService.setStatus = (id, status, comment_id) => { return Promise.reject(new Error(`status ${status} is not supported`)); } - // If ban then disable the account, reject the comment and update status + // If ban then reject the comment and update status if (status === 'banned') { - return UserService.disableUser(id) + return UserModel.update({ + id: id + }, { + $set: { + status: status + } + }) .then(() => { - return Comment.changeStatus(comment_id, 'rejected') - .then(() => { - return UserModel.update({ - id: id - }, { - $set: { - status: status - } - }); - }); + return Comment.changeStatus(comment_id, 'rejected'); }); } - // If active then unable the account and update status if (status === 'active') { - return UserService.enableUser(id) - .then(() => { - return UserModel.update({ - id: id - }, { - $set: { - status: status - } - }); + return UserModel.update({ + id: id + }, { + $set: { + status: status + } }); } }; diff --git a/tests/models/user.js b/tests/models/user.js index 22aedf361..586206cab 100644 --- a/tests/models/user.js +++ b/tests/models/user.js @@ -105,18 +105,6 @@ describe('User: models', () => { }); }); - it('should disable the user', () => { - return User - .setStatus(mockUsers[0].id, 'banned', mockComment.id) - .then(() => { - User.findById(mockUsers[0].id) - .then((user) => { - expect(user).to.have.property('disabled') - .and.to.equal(true); - }); - }); - }); - it('should set the status to banned', () => { return User .setStatus(mockUsers[0].id, 'banned', mockComment.id) @@ -149,8 +137,6 @@ describe('User: models', () => { .then((user) => { expect(user).to.have.property('status') .and.to.equal('banned'); - expect(user).to.have.property('disabled') - .and.to.equal(true); }); }); }); @@ -167,18 +153,6 @@ describe('User: models', () => { }); }); - it('should enable the user', () => { - return User - .setStatus(mockUsers[0].id, 'active', mockComment.id) - .then(() => { - User.findById(mockUsers[0].id) - .then((user) => { - expect(user).to.have.property('disabled') - .and.to.equal(false); - }); - }); - }); - it('should set the status to active', () => { return User .setStatus(mockUsers[0].id, 'active', mockComment.id)