diff --git a/client/src/app/admin/panel/users/admin-panel-ban-users.js b/client/src/app/admin/panel/users/admin-panel-ban-users.js index acb259e4..a368eeaf 100644 --- a/client/src/app/admin/panel/users/admin-panel-ban-users.js +++ b/client/src/app/admin/panel/users/admin-panel-ban-users.js @@ -1,14 +1,127 @@ import React from 'react'; +import i18n from 'lib-app/i18n'; +import API from 'lib-app/api-call'; + +import Header from 'core-components/header'; +import Table from 'core-components/table'; +import SearchBox from 'core-components/search-box'; +import Button from 'core-components/button'; +import SubmitButton from 'core-components/submit-button'; +import Form from 'core-components/form'; +import FormField from 'core-components/form-field'; + class AdminPanelBanUsers extends React.Component { + state = { + loadingList: true, + loadingForm: false, + emails: [], + filteredEmails: [] + }; + + componentDidMount() { + this.retrieveEmails() + } + render() { return ( -
- /admin/panel/users/ban-users +
+
+
+ + + +
+ + {i18n('BAN_NEW_EMAIL')} + +
+ + {i18n('BAN_EMAIL')} + +
); } + + getTableProps() { + return { + loading: this.state.loadingList, + headers: [{ + key: 'email', + value: i18n('EMAIL_BANNED') + }], + pageSize: 10, + rows: this.state.filteredEmails.map(this.getEmailRow.bind(this)) + }; + } + + getFormProps() { + return { + loading: this.state.loadingForm, + onSubmit: this.onBanMailFormSubmit.bind(this) + }; + } + + getEmailRow(email) { + return { + email: ( +
+ {email} + +
+ ) + }; + } + + onSearch(query) { + this.setState({ + filteredEmails: SearchBox.searchQueryInList(this.state.emails, query) + }); + } + + onBanMailFormSubmit(form) { + this.setState({ + loadingForm: true + }); + + API.call({ + path: '/user/ban', + data: { + email: form.email + } + }).then(this.retrieveEmails.bind(this)); + } + + onUnBanClick(email) { + API.call({ + path: '/user/un-ban', + data: { + email: email + } + }).then(this.retrieveEmails.bind(this)); + } + + retrieveEmails() { + this.setState({ + loadingList: true + }); + + API.call({ + path: '/user/list-ban', + data: {} + }).then((result) => { + this.setState({ + loadingList: false, + loadingForm: false, + emails: result.data, + filteredEmails: result.data + }); + }); + } } export default AdminPanelBanUsers; \ No newline at end of file diff --git a/client/src/app/admin/panel/users/admin-panel-ban-users.scss b/client/src/app/admin/panel/users/admin-panel-ban-users.scss new file mode 100644 index 00000000..799e21fe --- /dev/null +++ b/client/src/app/admin/panel/users/admin-panel-ban-users.scss @@ -0,0 +1,36 @@ +@import '../../../../scss/vars'; + +.admin-panel-ban-users { + padding: 0 20px; + + &__email-list { + + } + + &__search { + margin-bottom: 20px; + } + + &__email-row { + text-align: left; + padding: 5px 10px; + } + + &__un-ban-button { + float: right; + margin-top: -5px; + } + + &__ban-email { + text-align: center; + + &-title { + color: $primary-black; + font-size: $font-size--md; + } + } + + &__input { + display: inline-block; + } +} \ No newline at end of file diff --git a/client/src/core-components/search-box.js b/client/src/core-components/search-box.js index d7bb3a99..cdb34936 100644 --- a/client/src/core-components/search-box.js +++ b/client/src/core-components/search-box.js @@ -1,5 +1,6 @@ import React from 'react'; import classNames from 'classnames'; +import _ from 'lodash'; import Input from 'core-components/input'; import Icon from 'core-components/icon'; @@ -7,13 +8,36 @@ import keyCode from 'keycode'; class SearchBox extends React.Component { + static searchQueryInList(list, query) { + let match = []; + let rest = []; + + list.forEach(function (item) { + if(_.startsWith(item, query)) { + match.push(item); + } else { + rest.push(item); + } + }); + + rest.forEach(function (item) { + if(_.includes(item, query)) { + match.push(item); + } + }); + + return match; + } + static propTypes = { onSearch: React.PropTypes.func, - placeholder: React.PropTypes.string + placeholder: React.PropTypes.string, + searchOnType: React.PropTypes.bool }; state = { - value: '' + value: '', + searchOnType: false }; render() { @@ -41,10 +65,14 @@ class SearchBox extends React.Component { this.setState({ value: event.target.value }); + + if (this.props.searchOnType && this.props.onSearch) { + this.props.onSearch(event.target.value); + } } onKeyDown(event) { - if(keyCode(event) === 'enter' && this.props.onSearch) { + if(keyCode(event) === 'enter' && this.props.onSearch && !this.props.searchOnType) { this.props.onSearch(this.state.value); } } diff --git a/client/src/data/fixtures/user-fixtures.js b/client/src/data/fixtures/user-fixtures.js index 5c3ce6e7..9845da48 100644 --- a/client/src/data/fixtures/user-fixtures.js +++ b/client/src/data/fixtures/user-fixtures.js @@ -720,5 +720,86 @@ module.exports = [ } }; } + }, + { + path: '/user/un-ban', + time: 100, + response: function () { + return { + status: 'success', + data: {} + }; + } + }, + { + path: '/user/ban', + time: 100, + response: function () { + return { + status: 'success', + data: {} + }; + } + }, + { + path: '/user/list-ban', + time: 100, + response: function () { + return { + status: 'success', + data: [ + 'unairable@randomword.com', + 'hotchpot@randomword.com', + 'elucidator@randomword.com', + 'sug@randomword.com', + 'nonculpability@randomword.com', + 'steeplechaser@randomword.com', + 'undefinite@randomword.com', + 'anthobian@randomword.com', + 'nontourist@randomword.com', + 'berberis@randomword.com', + 'sextus@randomword.com', + 'empiristic@randomword.com', + 'epistolized@randomword.com', + 'duntroon@randomword.com', + 'unpalled@randomword.com', + 'baddish@randomword.com', + 'subcritical@randomword.com', + 'bolger@randomword.com', + 'deactivate@randomword.com', + 'visually@randomword.com', + 'cameral@randomword.com', + 'unpieced@randomword.com', + 'gaging@randomword.com', + 'advancement@randomword.com', + 'plenteous@randomword.com', + 'thallious@randomword.com', + 'vernalizing@randomword.com', + 'nekhbetv@randomword.com', + 'unsmocke@randomword.com', + 'nonprojective@randomword.com', + 'nonconductible@randomword.com', + 'gladsomeness@randomword.com', + 'nongravitation@randomword.com', + 'restatement@randomword.com', + 'pokeys@randomword.com', + 'epis@randomword.com', + 'successor@randomword.com', + 'jurisprudentially@randomword.com', + 'medullization@randomword.com', + 'evan@randomword.com', + 'outliver@randomword.com', + 'antipode@randomword.com', + 'sunshiny@randomword.com', + 'microscopopy@randomword.com', + 'enatic@randomword.com', + 'smittle@randomword.com', + 'musk@randomword.com', + 'litui@randomword.com', + 'aquarellist@randomword.com', + 'chirac@randomword.com' + ] + }; + } } ]; \ No newline at end of file diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 29175429..da5706d9 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -59,7 +59,6 @@ export default { 'SAVE': 'Save', 'DISCARD_CHANGES': 'Discard changes', 'DELETE': 'Delete', - 'DELETE_AND_BAN': 'Delete and ban', 'LANGUAGE': 'Language', 'OWNER': 'Owner', 'OWNED': 'Owned', @@ -76,11 +75,16 @@ export default { 'WARNING': 'Warning', 'INFO': 'Information', 'ALL_DEPARTMENTS': 'All Departments', + 'EMAIL_BANNED': 'Email banned', + 'UN_BAN': 'Disable ban', + 'BAN_NEW_EMAIL': 'Ban new email', + 'BAN_EMAIL': 'Ban email', 'NAME': 'Name', 'SIGNUP_DATE': 'Sign up date', 'SEARCH_USERS': 'Search users...', + 'SEARCH_EMAIL': 'Search email...', 'USER_VIEW_TITLE': 'User #{userId}', - + //VIEW DESCRIPTIONS 'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.', 'TICKET_LIST_DESCRIPTION': 'Here you can find a list of all tickets you have sent to our support team.', @@ -93,6 +97,7 @@ export default { 'NEW_TICKETS_DESCRIPTION': 'Here you can view all the new tickets that are not assigned by anyone.', 'ALL_TICKETS_DESCRIPTION': 'Here you can view the tickets of the departments you are assigned.', 'TICKET_VIEW_DESCRIPTION': 'This ticket has been sent by a customer. Here you can respond or assign the ticket', + 'BAN_USERS_DESCRIPTION': 'Here you can see a list of banned emails, you can un-ban them or add more emails to the list.', 'LIST_USERS_DESCRIPTION': 'This is the list of users that are registered in this platform. You can search for someone in particular, delete it or ban it.', 'USER_VIEW_DESCRIPTION': 'Here you can find all the information about an user and all the tickets sent by the user. You can also delete or ban it.', 'DELETE_USER_DESCRIPTION': 'The user will not be able to log in aging and all its tickets will be erased. Also, the email can not be used any more.',