Ivan - Add api keys [skip ci]
This commit is contained in:
Ivan Diaz
parent
796571c8a1
commit
5e51536f25
|
|
@ -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 (
|
||||
<div className="admin-panel-system-settings">
|
||||
<div className="admin-panel-advanced-settings">
|
||||
<Header title={i18n('ADVANCED_SETTINGS')} description={i18n('ADVANCED_SETTINGS_DESCRIPTION')}/>
|
||||
{(this.state.messageType) ? this.renderMessage() : null}
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<div className="col-md-6">
|
||||
<div className="admin-panel-system-settings__user-system-enabled">
|
||||
<span className="admin-panel-system-settings__text">{i18n('ENABLE_USER_SYSTEM')}</span>
|
||||
<ToggleButton className="admin-panel-system-settings__toggle-button" value={this.props.config['user-system-enabled']} onChange={this.onToggleButtonUserSystemChange.bind(this)}/>
|
||||
<div className="admin-panel-advanced-settings__user-system-enabled">
|
||||
<span className="admin-panel-advanced-settings__text">{i18n('ENABLE_USER_SYSTEM')}</span>
|
||||
<ToggleButton className="admin-panel-advanced-settings__toggle-button" value={this.props.config['user-system-enabled']} onChange={this.onToggleButtonUserSystemChange.bind(this)}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="admin-panel-system-settings__registration">
|
||||
<span className="admin-panel-system-settings__text">{i18n('ENABLE_USER_REGISTRATION')}</span>
|
||||
<ToggleButton className="admin-panel-system-settings__toggle-button" value={this.props.config['registration']} onChange={this.onToggleButtonRegistrationChange.bind(this)}/>
|
||||
<div className="admin-panel-advanced-settings__registration">
|
||||
<span className="admin-panel-advanced-settings__text">{i18n('ENABLE_USER_REGISTRATION')}</span>
|
||||
<ToggleButton className="admin-panel-advanced-settings__toggle-button" value={this.props.config['registration']} onChange={this.onToggleButtonRegistrationChange.bind(this)}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,36 +58,32 @@ class AdminPanelAdvancedSettings extends React.Component {
|
|||
</div>
|
||||
<div className="col-md-12">
|
||||
<div className="col-md-3">
|
||||
<div className="admin-panel-system-settings__text">{i18n('INCLUDE_USERS_VIA_CSV')}</div>
|
||||
<FileUploader className="admin-panel-system-settings__button" text="Upload" onChange={this.onImportCSV.bind(this)}/>
|
||||
<div className="admin-panel-advanced-settings__text">{i18n('INCLUDE_USERS_VIA_CSV')}</div>
|
||||
<FileUploader className="admin-panel-advanced-settings__button" text="Upload" onChange={this.onImportCSV.bind(this)}/>
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<div className="admin-panel-system-settings__text">{i18n('INCLUDE_DATABASE_VIA_SQL')}</div>
|
||||
<FileUploader className="admin-panel-system-settings__button" text="Upload" onChange={this.onImportSQL.bind(this)}/>
|
||||
<div className="admin-panel-advanced-settings__text">{i18n('INCLUDE_DATABASE_VIA_SQL')}</div>
|
||||
<FileUploader className="admin-panel-advanced-settings__button" text="Upload" onChange={this.onImportSQL.bind(this)}/>
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<div className="admin-panel-system-settings__text">{i18n('BACKUP_DATABASE')}</div>
|
||||
<Button className="admin-panel-system-settings__button" type="secondary" size="medium" onClick={this.onBackupDatabase.bind(this)}>Download</Button>
|
||||
<div className="admin-panel-advanced-settings__text">{i18n('BACKUP_DATABASE')}</div>
|
||||
<Button className="admin-panel-advanced-settings__button" type="secondary" size="medium" onClick={this.onBackupDatabase.bind(this)}>Download</Button>
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<div className="admin-panel-system-settings__text">{i18n('DELETE_ALL_USERS')}</div>
|
||||
<Button className="admin-panel-system-settings__button" size="medium" onClick={this.onDeleteAllUsers.bind(this)}>Delete</Button>
|
||||
<div className="admin-panel-advanced-settings__text">{i18n('DELETE_ALL_USERS')}</div>
|
||||
<Button className="admin-panel-advanced-settings__button" size="medium" onClick={this.onDeleteAllUsers.bind(this)}>Delete</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<span className="separator" />
|
||||
</div>
|
||||
<div className="col-md-12 admin-panel-system-settings__api-keys">
|
||||
<div className="col-md-12 admin-panel-system-settings__api-keys-title">{i18n('REGISTRATION_API_KEYS')}</div>
|
||||
<div className="col-md-12 admin-panel-advanced-settings__api-keys">
|
||||
<div className="col-md-12 admin-panel-advanced-settings__api-keys-title">{i18n('REGISTRATION_API_KEYS')}</div>
|
||||
<div className="col-md-4">
|
||||
<Listing {...this.getListingProps()} />
|
||||
</div>
|
||||
<div className="col-md-8">
|
||||
<div className="admin-panel-system-settings__api-keys-subtitle">{i18n('NAME_OF_KEY')}</div>
|
||||
<div></div>
|
||||
<div className="admin-panel-system-settings__api-keys-subtitle">{i18n('KEY')}</div>
|
||||
<div></div>
|
||||
<Button className="admin-panel-system-settings__api-keys-button" size="medium">{i18n('DELETE')}</Button>
|
||||
{(this.state.selectedAPIKey === -1) ? this.renderNoKey() : this.renderKey()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,31 +97,86 @@ class AdminPanelAdvancedSettings extends React.Component {
|
|||
);
|
||||
}
|
||||
|
||||
renderNoKey() {
|
||||
return (
|
||||
<div className="admin-panel-advanced-settings__api-keys-none">
|
||||
{i18n('NO_KEY_SELECTED')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderKey() {
|
||||
let currentAPIKey = this.state.APIKeys[this.state.selectedAPIKey];
|
||||
|
||||
return (
|
||||
<div className="admin-panel-advanced-settings__api-keys-info">
|
||||
<div className="admin-panel-advanced-settings__api-keys-subtitle">{i18n('NAME_OF_KEY')}</div>
|
||||
<div className="admin-panel-advanced-settings__api-keys-data">{currentAPIKey.name}</div>
|
||||
<div className="admin-panel-advanced-settings__api-keys-subtitle">{i18n('KEY')}</div>
|
||||
<div className="admin-panel-advanced-settings__api-keys-data">{currentAPIKey.token}</div>
|
||||
<Button className="admin-panel-advanced-settings__api-keys-button" size="medium" onClick={this.onDeleteKeyClick.bind(this)}>
|
||||
{i18n('DELETE')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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(
|
||||
<Form className="admin-panel-advanced-settings__api-keys-modal" onSubmit={this.addAPIKey.bind(this)}>
|
||||
<Header title={i18n('ADD_API_KEY')} description={i18n('ADD_API_KEY_DESCRIPTION')}/>
|
||||
<FormField name="name" label={i18n('NAME_OF_KEY')} validation="DEFAULT" required fieldProps={{size: 'large'}}/>
|
||||
<SubmitButton type="secondary">{i18n('SUBMIT')}</SubmitButton>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
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() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue