diff --git a/client/src/app/admin/panel/settings/admin-panel-advanced-settings.js b/client/src/app/admin/panel/settings/admin-panel-advanced-settings.js index 010aa405..52f7245d 100644 --- a/client/src/app/admin/panel/settings/admin-panel-advanced-settings.js +++ b/client/src/app/admin/panel/settings/admin-panel-advanced-settings.js @@ -1,17 +1,21 @@ import React from 'react'; -import {connect} from 'react-redux'; +import {connect} from 'react-redux'; import ConfigActions from 'actions/config-actions'; import API from 'lib-app/api-call'; import i18n from 'lib-app/i18n'; import ToggleButton from 'app-components/toggle-button'; import AreYouSure from 'app-components/are-you-sure'; +import ModalContainer from 'app-components/modal-container'; import Message from 'core-components/message'; import Button from 'core-components/button'; import FileUploader from 'core-components/file-uploader'; import Header from 'core-components/header'; import Listing from 'core-components/listing'; +import Form from 'core-components/form'; +import FormField from 'core-components/form-field'; +import SubmitButton from 'core-components/submit-button'; class AdminPanelAdvancedSettings extends React.Component { @@ -21,9 +25,8 @@ class AdminPanelAdvancedSettings extends React.Component { messageContent: '', keyName: '', keyCode: '', - values: { - apikeys: [] - } + selectedAPIKey: -1, + APIKeys: [] }; componentDidMount() { @@ -32,21 +35,21 @@ class AdminPanelAdvancedSettings extends React.Component { render() { return ( -
+
{(this.state.messageType) ? this.renderMessage() : null}
-
- {i18n('ENABLE_USER_SYSTEM')} - +
+ {i18n('ENABLE_USER_SYSTEM')} +
-
- {i18n('ENABLE_USER_REGISTRATION')} - +
+ {i18n('ENABLE_USER_REGISTRATION')} +
@@ -55,36 +58,32 @@ class AdminPanelAdvancedSettings extends React.Component {
-
{i18n('INCLUDE_USERS_VIA_CSV')}
- +
{i18n('INCLUDE_USERS_VIA_CSV')}
+
-
{i18n('INCLUDE_DATABASE_VIA_SQL')}
- +
{i18n('INCLUDE_DATABASE_VIA_SQL')}
+
-
{i18n('BACKUP_DATABASE')}
- +
{i18n('BACKUP_DATABASE')}
+
-
{i18n('DELETE_ALL_USERS')}
- +
{i18n('DELETE_ALL_USERS')}
+
-
-
{i18n('REGISTRATION_API_KEYS')}
+
+
{i18n('REGISTRATION_API_KEYS')}
-
{i18n('NAME_OF_KEY')}
-
-
{i18n('KEY')}
-
- + {(this.state.selectedAPIKey === -1) ? this.renderNoKey() : this.renderKey()}
@@ -98,31 +97,86 @@ class AdminPanelAdvancedSettings extends React.Component { ); } + renderNoKey() { + return ( +
+ {i18n('NO_KEY_SELECTED')} +
+ ); + } + + renderKey() { + let currentAPIKey = this.state.APIKeys[this.state.selectedAPIKey]; + + return ( +
+
{i18n('NAME_OF_KEY')}
+
{currentAPIKey.name}
+
{i18n('KEY')}
+
{currentAPIKey.token}
+ +
+ ); + } + getListingProps() { return { title: i18n('REGISTRATION_API_KEYS'), enableAddNew: true, - items: this.state.values.apikeys.map((item) => { + items: this.state.APIKeys.map((item) => { return { content: item.name, icon: '' }; - }) - } + }), + selectedIndex: this.state.selectedAPIKey, + onChange: index => this.setState({selectedAPIKey: index}), + onAddClick: this.openAPIKeyModal.bind(this) + }; + } + + openAPIKeyModal() { + ModalContainer.openModal( +
+
+ + {i18n('SUBMIT')} + + ); + } + + addAPIKey({name}) { + ModalContainer.closeModal(); + API.call({ + path: '/system/add-api-key', + data: {name} + }).then(this.getAllKeys.bind(this)); } getAllKeys() { API.call({ - path: '/system/get-all-keys', + path: '/system/get-api-keys', data: {} }).then(this.onRetrieveSuccess.bind(this)); } + onDeleteKeyClick() { + AreYouSure.openModal(null, () => { + API.call({ + path: '/system/delete-api-key', + data: { + name: this.state.APIKeys[this.state.selectedAPIKey].name + } + }).then(this.getAllKeys.bind(this)); + }); + } + onRetrieveSuccess(result) { this.setState({ - values: { - apikeys: result.data - } + APIKeys: result.data, + selectedAPIKey: -1 }); } @@ -151,7 +205,7 @@ class AdminPanelAdvancedSettings extends React.Component { onAreYouSureRegistrationOk(password) { API.call({ - path: this.props.config['user-system-enabled'] ? '/system/disable-registration' : '/system/enable-registration', + path: this.props.config['registration'] ? '/system/disable-registration' : '/system/enable-registration', data: { password: password } @@ -179,8 +233,9 @@ class AdminPanelAdvancedSettings extends React.Component { file: file, password: password } - }).then(() => this.setState({messageType: 'success', messageContent: i18n('SUCCESS_IMPORTING_CSV_DESCRIPTION')} - )).catch(() => this.setState({messageType: 'error', messageContent: i18n('ERROR_IMPORTING_CSV_DESCRIPTION')})); + }) + .then(() => this.setState({messageType: 'success', messageContent: i18n('SUCCESS_IMPORTING_CSV_DESCRIPTION')})) + .catch(() => this.setState({messageType: 'error', messageContent: i18n('ERROR_IMPORTING_CSV_DESCRIPTION')})); } onAreYouSureSQLOk(file, password) { @@ -190,8 +245,9 @@ class AdminPanelAdvancedSettings extends React.Component { file: file, password: password } - }).then(() => this.setState({messageType: 'success', messageContent: i18n('SUCCESS_IMPORTING_SQL_DESCRIPTION')} - )).catch(() => this.setState({messageType: 'error', messageContent: i18n('ERROR_IMPORTING_SQL_DESCRIPTION')})); + }) + .then(() => this.setState({messageType: 'success', messageContent: i18n('SUCCESS_IMPORTING_SQL_DESCRIPTION')})) + .catch(() => this.setState({messageType: 'error', messageContent: i18n('ERROR_IMPORTING_SQL_DESCRIPTION')})); } onBackupDatabase() { diff --git a/client/src/app/admin/panel/settings/admin-panel-advanced-settings.scss b/client/src/app/admin/panel/settings/admin-panel-advanced-settings.scss index 30ea3730..86ec9150 100644 --- a/client/src/app/admin/panel/settings/admin-panel-advanced-settings.scss +++ b/client/src/app/admin/panel/settings/admin-panel-advanced-settings.scss @@ -1,6 +1,6 @@ @import "../../../../scss/vars"; -.admin-panel-system-settings { +.admin-panel-advanced-settings { &__user-system-enabled { } @@ -27,7 +27,6 @@ } &__api-keys { - text-align: left; &-title { font-size: $font-size--bg; @@ -35,15 +34,31 @@ text-align: left; } + &-info { + text-align: left; + } + &-subtitle { font-size: $font-size--md; margin-bottom: 5px; } - &-button { - margin-left: 20px; - margin-right: 20px; - width: 150px; + &-data { + background-color: $light-grey; + border-radius: 4px; + width: 300px; + margin: 10px 0; + text-align: center; + padding: 5px 0; + } + + &-modal { + min-width: 500px; + } + + &-none { + color: $dark-grey; + font-size: $font-size--md; } } } diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index 64f7d3d8..18b94c0f 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -248,7 +248,27 @@ module.exports = [ } }, { - path: '/system/get-all-keys', + path: '/system/add-api-key', + time: 300, + response: function () { + return { + status: 'success', + data: {} + }; + } + }, + { + path: '/system/delete-api-key', + time: 300, + response: function () { + return { + status: 'success', + data: {} + }; + } + }, + { + path: '/system/get-api-keys', time: 300, response: function () { return { diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 4d2564fa..fbd6a4ba 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -162,6 +162,8 @@ export default { 'REGISTRATION_API_KEYS': 'Registration API keys', 'NAME_OF_KEY': 'Name of key', 'KEY': 'Key', + 'ADD_API_KEY': 'Add API Key', + 'NO_KEY_SELECTED': 'No Key selected', //ACTIVITIES 'ACTIVITY_COMMENT': 'commented ticket', @@ -228,6 +230,7 @@ export default { 'USER_SYSTEM_ENABLED': 'User system has been enabled', 'REGISTRATION_DISABLED': 'Registration has been disabled', 'REGISTRATION_ENABLED': 'Registration has been enabled', + 'ADD_API_KEY_DESCRIPTION': 'Insert the name and a registration api key be generated.', //ERRORS 'EMAIL_OR_PASSWORD': 'Email or password invalid',