tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Add api keys [skip ci]

This commit is contained in:
Ivan Diaz 2017-01-22 06:52:03 -03:00
parent 796571c8a1
commit 5e51536f25
4 changed files with 139 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
client/src/app/admin/panel/settings/admin-panel-advanced-settings.js
View File

@ -1,17 +1,21 @@
import React from 'react'; import React from 'react';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import ConfigActions from 'actions/config-actions'; import ConfigActions from 'actions/config-actions';
import API from 'lib-app/api-call'; import API from 'lib-app/api-call';
import i18n from 'lib-app/i18n'; import i18n from 'lib-app/i18n';
import ToggleButton from 'app-components/toggle-button'; import ToggleButton from 'app-components/toggle-button';
import AreYouSure from 'app-components/are-you-sure'; import AreYouSure from 'app-components/are-you-sure';
import ModalContainer from 'app-components/modal-container';
import Message from 'core-components/message'; import Message from 'core-components/message';
import Button from 'core-components/button'; import Button from 'core-components/button';
import FileUploader from 'core-components/file-uploader'; import FileUploader from 'core-components/file-uploader';
import Header from 'core-components/header'; import Header from 'core-components/header';
import Listing from 'core-components/listing'; 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 { class AdminPanelAdvancedSettings extends React.Component {
@ -21,9 +25,8 @@ class AdminPanelAdvancedSettings extends React.Component {
messageContent: '', messageContent: '',
keyName: '', keyName: '',
keyCode: '', keyCode: '',
values: { selectedAPIKey: -1,
apikeys: [] APIKeys: []
}
}; };
componentDidMount() { componentDidMount() {
@ -32,21 +35,21 @@ class AdminPanelAdvancedSettings extends React.Component {
render() { render() {
return ( return (
<div className="admin-panel-system-settings"> <div className="admin-panel-advanced-settings">
<Header title={i18n('ADVANCED_SETTINGS')} description={i18n('ADVANCED_SETTINGS_DESCRIPTION')}/> <Header title={i18n('ADVANCED_SETTINGS')} description={i18n('ADVANCED_SETTINGS_DESCRIPTION')}/>
{(this.state.messageType) ? this.renderMessage() : null} {(this.state.messageType) ? this.renderMessage() : null}
<div className="row"> <div className="row">
<div className="col-md-12"> <div className="col-md-12">
<div className="col-md-6"> <div className="col-md-6">
<div className="admin-panel-system-settings__user-system-enabled"> <div className="admin-panel-advanced-settings__user-system-enabled">
<span className="admin-panel-system-settings__text">{i18n('ENABLE_USER_SYSTEM')}</span> <span className="admin-panel-advanced-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)}/> <ToggleButton className="admin-panel-advanced-settings__toggle-button" value={this.props.config['user-system-enabled']} onChange={this.onToggleButtonUserSystemChange.bind(this)}/>
</div> </div>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<div className="admin-panel-system-settings__registration"> <div className="admin-panel-advanced-settings__registration">
<span className="admin-panel-system-settings__text">{i18n('ENABLE_USER_REGISTRATION')}</span> <span className="admin-panel-advanced-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)}/> <ToggleButton className="admin-panel-advanced-settings__toggle-button" value={this.props.config['registration']} onChange={this.onToggleButtonRegistrationChange.bind(this)}/>
</div> </div>
</div> </div>
</div> </div>
@ -55,36 +58,32 @@ class AdminPanelAdvancedSettings extends React.Component {
</div> </div>
<div className="col-md-12"> <div className="col-md-12">
<div className="col-md-3"> <div className="col-md-3">
<div className="admin-panel-system-settings__text">{i18n('INCLUDE_USERS_VIA_CSV')}</div> <div className="admin-panel-advanced-settings__text">{i18n('INCLUDE_USERS_VIA_CSV')}</div>
<FileUploader className="admin-panel-system-settings__button" text="Upload" onChange={this.onImportCSV.bind(this)}/> <FileUploader className="admin-panel-advanced-settings__button" text="Upload" onChange={this.onImportCSV.bind(this)}/>
</div> </div>
<div className="col-md-3"> <div className="col-md-3">
<div className="admin-panel-system-settings__text">{i18n('INCLUDE_DATABASE_VIA_SQL')}</div> <div className="admin-panel-advanced-settings__text">{i18n('INCLUDE_DATABASE_VIA_SQL')}</div>
<FileUploader className="admin-panel-system-settings__button" text="Upload" onChange={this.onImportSQL.bind(this)}/> <FileUploader className="admin-panel-advanced-settings__button" text="Upload" onChange={this.onImportSQL.bind(this)}/>
</div> </div>
<div className="col-md-3"> <div className="col-md-3">
<div className="admin-panel-system-settings__text">{i18n('BACKUP_DATABASE')}</div> <div className="admin-panel-advanced-settings__text">{i18n('BACKUP_DATABASE')}</div>
<Button className="admin-panel-system-settings__button" type="secondary" size="medium" onClick={this.onBackupDatabase.bind(this)}>Download</Button> <Button className="admin-panel-advanced-settings__button" type="secondary" size="medium" onClick={this.onBackupDatabase.bind(this)}>Download</Button>
</div> </div>
<div className="col-md-3"> <div className="col-md-3">
<div className="admin-panel-system-settings__text">{i18n('DELETE_ALL_USERS')}</div> <div className="admin-panel-advanced-settings__text">{i18n('DELETE_ALL_USERS')}</div>
<Button className="admin-panel-system-settings__button" size="medium" onClick={this.onDeleteAllUsers.bind(this)}>Delete</Button> <Button className="admin-panel-advanced-settings__button" size="medium" onClick={this.onDeleteAllUsers.bind(this)}>Delete</Button>
</div> </div>
</div> </div>
<div className="col-md-12"> <div className="col-md-12">
<span className="separator" /> <span className="separator" />
</div> </div>
<div className="col-md-12 admin-panel-system-settings__api-keys"> <div className="col-md-12 admin-panel-advanced-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-title">{i18n('REGISTRATION_API_KEYS')}</div>
<div className="col-md-4"> <div className="col-md-4">
<Listing {...this.getListingProps()} /> <Listing {...this.getListingProps()} />
</div> </div>
<div className="col-md-8"> <div className="col-md-8">
<div className="admin-panel-system-settings__api-keys-subtitle">{i18n('NAME_OF_KEY')}</div> {(this.state.selectedAPIKey === -1) ? this.renderNoKey() : this.renderKey()}
<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>
</div> </div>
</div> </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() { getListingProps() {
return { return {
title: i18n('REGISTRATION_API_KEYS'), title: i18n('REGISTRATION_API_KEYS'),
enableAddNew: true, enableAddNew: true,
items: this.state.values.apikeys.map((item) => { items: this.state.APIKeys.map((item) => {
return { return {
content: item.name, content: item.name,
icon: '' 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() { getAllKeys() {
API.call({ API.call({
path: '/system/get-all-keys', path: '/system/get-api-keys',
data: {} data: {}
}).then(this.onRetrieveSuccess.bind(this)); }).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) { onRetrieveSuccess(result) {
this.setState({ this.setState({
values: { APIKeys: result.data,
apikeys: result.data selectedAPIKey: -1
}
}); });
} }
@ -151,7 +205,7 @@ class AdminPanelAdvancedSettings extends React.Component {
onAreYouSureRegistrationOk(password) { onAreYouSureRegistrationOk(password) {
API.call({ 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: { data: {
password: password password: password
} }
@ -179,8 +233,9 @@ class AdminPanelAdvancedSettings extends React.Component {
file: file, file: file,
password: password 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) { onAreYouSureSQLOk(file, password) {
@ -190,8 +245,9 @@ class AdminPanelAdvancedSettings extends React.Component {
file: file, file: file,
password: password 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() { onBackupDatabase() {

27
client/src/app/admin/panel/settings/admin-panel-advanced-settings.scss
View File

@ -1,6 +1,6 @@
@import "../../../../scss/vars"; @import "../../../../scss/vars";
.admin-panel-system-settings { .admin-panel-advanced-settings {
&__user-system-enabled { &__user-system-enabled {
} }
@ -27,7 +27,6 @@
} }
&__api-keys { &__api-keys {
text-align: left;
&-title { &-title {
font-size: $font-size--bg; font-size: $font-size--bg;
@ -35,15 +34,31 @@
text-align: left; text-align: left;
} }
&-info {
text-align: left;
}
&-subtitle { &-subtitle {
font-size: $font-size--md; font-size: $font-size--md;
margin-bottom: 5px; margin-bottom: 5px;
} }
&-button { &-data {
margin-left: 20px; background-color: $light-grey;
margin-right: 20px; border-radius: 4px;
width: 150px; width: 300px;
margin: 10px 0;
text-align: center;
padding: 5px 0;
}
&-modal {
min-width: 500px;
}
&-none {
color: $dark-grey;
font-size: $font-size--md;
} }
} }
} }

22
client/src/data/fixtures/system-fixtures.js
View File

@ -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, time: 300,
response: function () { response: function () {
return { return {

3
client/src/data/languages/en.js
View File

@ -162,6 +162,8 @@ export default {
'REGISTRATION_API_KEYS': 'Registration API keys', 'REGISTRATION_API_KEYS': 'Registration API keys',
'NAME_OF_KEY': 'Name of key', 'NAME_OF_KEY': 'Name of key',
'KEY': 'Key', 'KEY': 'Key',
'ADD_API_KEY': 'Add API Key',
'NO_KEY_SELECTED': 'No Key selected',
//ACTIVITIES //ACTIVITIES
'ACTIVITY_COMMENT': 'commented ticket', 'ACTIVITY_COMMENT': 'commented ticket',
@ -228,6 +230,7 @@ export default {
'USER_SYSTEM_ENABLED': 'User system has been enabled', 'USER_SYSTEM_ENABLED': 'User system has been enabled',
'REGISTRATION_DISABLED': 'Registration has been disabled', 'REGISTRATION_DISABLED': 'Registration has been disabled',
'REGISTRATION_ENABLED': 'Registration has been enabled', 'REGISTRATION_ENABLED': 'Registration has been enabled',
'ADD_API_KEY_DESCRIPTION': 'Insert the name and a registration api key be generated.',
//ERRORS //ERRORS
'EMAIL_OR_PASSWORD': 'Email or password invalid', 'EMAIL_OR_PASSWORD': 'Email or password invalid',