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

Add cancel button in api key pop up (#929) 

* Add cancel button in api key pop up

* Change space between add api key form buttons

* Add render close button param in open modal container function

* WIP
This commit is contained in:
LautaroCesso 2020-11-13 14:05:11 -03:00 committed by GitHub
parent 94926f90e6
commit 9feb7d6cd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 133 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/app-components/modal-container.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import { connect } from 'react-redux';
import keyCode from 'keycode';
import classNames from 'classnames';
import store from 'app/store';
import ModalActions from 'actions/modal-actions';
@ -9,12 +8,13 @@ import Modal from 'core-components/modal';
class ModalContainer extends React.Component {
static openModal(content, noPadding, outsideClick=false) {
static openModal(content, noPadding, outsideClick=false, showCloseButton=false) {
store.dispatch(
ModalActions.openModal({
content,
noPadding,
outsideClick
outsideClick,
showCloseButton
})
);
}
@ -50,9 +50,10 @@ class ModalContainer extends React.Component {
}
renderModal() {
const {content, noPadding, outsideClick} = this.props.modal;
const {content, noPadding, outsideClick, showCloseButton} = this.props.modal;
return (
<Modal content={content} noPadding={noPadding} outsideClick={outsideClick} onOutsideClick={this.closeModal.bind(this)}/>
<Modal content={content} noPadding={noPadding} outsideClick={outsideClick} onOutsideClick={this.closeModal.bind(this)} showCloseButton={showCloseButton} />
);
}

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

@ -36,10 +36,16 @@ class AdminPanelAdvancedSettings extends React.Component {
render() {
const { config } = this.props;
const {
messageType,
error,
selectedAPIKey
} = this.state;
return (
<div className="admin-panel-advanced-settings">
<Header title={i18n('ADVANCED_SETTINGS')} description={i18n('ADVANCED_SETTINGS_DESCRIPTION')} />
{(this.state.messageType) ? this.renderMessage() : null}
{messageType ? this.renderMessage() : null}
<div className="row">
<div className="col-md-12">
<div className="col-md-6 admin-panel-advanced-settings__mandatory-login">
@ -49,8 +55,7 @@ class AdminPanelAdvancedSettings extends React.Component {
className="admin-panel-advanced-settings__mandatory-login__checkbox"
value={config['mandatory-login']}
onChange={this.onCheckboxMandatoryLoginChange.bind(this)}
wrapInLabel
/>
wrapInLabel />
</div>
<div className="col-md-6">
<div className="admin-panel-advanced-settings__registration">
@ -60,8 +65,7 @@ class AdminPanelAdvancedSettings extends React.Component {
className="admin-panel-advanced-settings__registration__checkbox"
value={config['registration']}
onChange={this.onCheckboxRegistrationChange.bind(this)}
wrapInLabel
/>
wrapInLabel />
</div>
</div>
</div>
@ -93,7 +97,7 @@ class AdminPanelAdvancedSettings extends React.Component {
<Listing {...this.getListingProps()} />
</div>
<div className="col-md-8 admin-panel-advanced-settings__api-keys__container">
{this.state.error ? <Message type="error">{i18n(this.state.error)}</Message> : (this.state.selectedAPIKey === -1) ? this.renderNoKey() : this.renderKey()}
{error ? <Message type="error">{i18n(error)}</Message> : ((selectedAPIKey === -1) ? this.renderNoKey() : this.renderKey())}
</div>
</div>
</div>
@ -102,9 +106,15 @@ class AdminPanelAdvancedSettings extends React.Component {
}
renderMessage() {
const {
messageType,
messageTitle,
messageContent
} = this.state;
return (
<Message className="admin-panel-advanced-settings__message" type={this.state.messageType} title={this.state.messageTitle}>
{this.state.messageContent}
<Message className="admin-panel-advanced-settings__message" type={messageType} title={messageTitle}>
{messageContent}
</Message>
);
}
@ -118,21 +128,33 @@ class AdminPanelAdvancedSettings extends React.Component {
}
renderKey() {
let currentAPIKey = this.state.APIKeys[this.state.selectedAPIKey];
const {
APIKeys,
selectedAPIKey
} = this.state;
const {
name,
token,
canCreateTickets,
shouldReturnTicketNumber,
canCheckTickets,
canCreateUser
} = APIKeys[selectedAPIKey];
return (
<div className="admin-panel-advanced-settings__api-keys__container-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-data">{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>
<div className="admin-panel-advanced-settings__api-keys-data">{token}</div>
<div className="admin-panel-advanced-settings__api-keys-subtitle">{i18n('PERMISSIONS')}</div>
<div className="admin-panel-advanced-settings__api-keys__permissions">
<FormField className="admin-panel-advanced-settings__api-keys__permissions__item" value={currentAPIKey.canCreateTickets*1} label={i18n('TICKET_CREATION_PERMISSION')} field='checkbox'/>
<FormField value={currentAPIKey.shouldReturnTicketNumber*1} label={i18n('TICKET_NUMBER_RETURN_PERMISSION')} field='checkbox'/>
<FormField className="admin-panel-advanced-settings__api-keys__permissions__item" value={canCreateTickets*1} label={i18n('TICKET_CREATION_PERMISSION')} field='checkbox' />
<FormField value={shouldReturnTicketNumber*1} label={i18n('TICKET_NUMBER_RETURN_PERMISSION')} field='checkbox' />
</div>
<div className="admin-panel-advanced-settings__api-keys__permissions">
<FormField className="admin-panel-advanced-settings__api-keys__permissions__item" value={currentAPIKey.canCheckTickets*1} label={i18n('TICKET_CHECK_PERMISSION')} field='checkbox'/>
<FormField value={currentAPIKey.canCreateUser*1} label={i18n('USER_CREATION_PERMISSION')} field='checkbox'/>
<FormField className="admin-panel-advanced-settings__api-keys__permissions__item" value={canCheckTickets*1} label={i18n('TICKET_CHECK_PERMISSION')} field='checkbox' />
<FormField value={canCreateUser*1} label={i18n('USER_CREATION_PERMISSION')} field='checkbox' />
</div>
<Button className="admin-panel-advanced-settings__api-keys-button" size="medium" onClick={this.onDeleteKeyClick.bind(this)}>
{i18n('DELETE')}
@ -170,8 +192,20 @@ class AdminPanelAdvancedSettings extends React.Component {
<FormField className = "admin-panel-advanced-settings__api-keys__permissions__item" name="checkTicketPermission" label={i18n('TICKET_CHECK_PERMISSION')} field='checkbox' />
<FormField name="userPermission" label={i18n('USER_CREATION_PERMISSION')} field='checkbox' />
</div>
<div className="admin-panel-advanced-settings__api-keys__buttons-container">
<Button
className="admin-panel-advanced-settings__api-keys__cancel-button"
onClick={(e) => {e.preventDefault(); ModalContainer.closeModal();}}
type='link'
size="medium">
{i18n('CANCEL')}
</Button>
<SubmitButton className="admin-panel-advanced-settings__api-keys-modal__submit-button" type="secondary">{i18n('SUBMIT')}</SubmitButton>
</Form>
</div>
</Form>,
null,
null,
true
);
}
@ -200,11 +234,16 @@ class AdminPanelAdvancedSettings extends React.Component {
}
onDeleteKeyClick() {
const {
APIKeys,
selectedAPIKey
} = this.state;
AreYouSure.openModal(null, () => {
return API.call({
path: '/system/delete-api-key',
data: {
name: this.state.APIKeys[this.state.selectedAPIKey].name
name: APIKeys[selectedAPIKey].name
}
}).then(this.getAllKeys.bind(this));
});
@ -231,6 +270,7 @@ class AdminPanelAdvancedSettings extends React.Component {
config,
dispatch
} = this.props;
return API.call({
path: config['mandatory-login'] ? '/system/disable-mandatory-login' : '/system/enable-mandatory-login',
data: {
@ -251,6 +291,7 @@ class AdminPanelAdvancedSettings extends React.Component {
config,
dispatch
} = this.props;
return API.call({
path: config['registration'] ? '/system/disable-registration' : '/system/enable-registration',
data: {

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

@ -21,6 +21,13 @@
&__api-keys {
&__buttons-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
&-title {
font-size: $font-size--bg;
margin-bottom: 20px;
@ -55,7 +62,7 @@
}
&-modal {
min-width: 500px;
min-width: 400px;
&__submit-button {
margin-top: 20px;

34
client/src/core-components/modal.js
View File

@ -3,12 +3,15 @@ import classNames from 'classnames';
import {Motion, spring} from 'react-motion';
import Icon from 'core-components/icon';
class Modal extends React.Component {
static propTypes = {
content: React.PropTypes.node,
noPadding: React.PropTypes.bool,
outsideClick: React.PropTypes.bool,
onOutsideClick: React.PropTypes.func
onOutsideClick: React.PropTypes.func,
showCloseButton: React.PropTypes.bool
};
render() {
@ -33,15 +36,29 @@ class Modal extends React.Component {
}
renderModal(animation) {
const {
showCloseButton,
content
} = this.props;
return (
<div className={this.getClass()} style={{opacity: animation.fade}} onClick={this.onModalClick.bind(this)}>
<div className="modal__content" style={{transform: 'scale(' + animation.scale + ')'}} onClick={this.onModalContentClick.bind(this)}>
{this.props.content}
{showCloseButton ? this.renderCloseButton() : null}
{content}
</div>
</div>
)
}
renderCloseButton() {
return (
<span className="modal__close-icon" onClick={() => this.props.onOutsideClick()}>
<Icon name="times" size="2x"/>
</span>
);
}
getClass() {
let classes = {
'modal': true,
@ -52,15 +69,16 @@ class Modal extends React.Component {
}
onModalClick() {
if(this.props.outsideClick) {
this.props.onOutsideClick();
}
const {
outsideClick,
onOutsideClick
} = this.props;
outsideClick && onOutsideClick();
}
onModalContentClick(event) {
if(this.props.outsideClick) {
event.stopPropagation();
}
this.props.outsideClick && event.stopPropagation();
}
}

7
client/src/core-components/modal.scss
View File

@ -25,4 +25,11 @@
padding: 0;
}
}
&__close-icon {
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
}
}

18
client/src/reducers/modal-reducer.js
View File

@ -10,6 +10,7 @@ class ModalReducer extends Reducer {
noPadding: false,
content: null,
outsideClick: false,
showCloseButton: false
};
}
@ -21,13 +22,21 @@ class ModalReducer extends Reducer {
}
onOpenModal(state, payload) {
const {
content,
noPadding,
outsideClick,
showCloseButton
} = payload;
document.body.setAttribute('style', 'overflow:hidden');
return _.extend({}, state, {
opened: true,
content: payload.content,
noPadding: payload.noPadding || false,
outsideClick: payload.outsideClick
content,
noPadding: noPadding || false,
outsideClick,
showCloseButton
});
}
@ -38,7 +47,8 @@ class ModalReducer extends Reducer {
opened: false,
content: null,
noPadding: false,
outsideClick: false
outsideClick: false,
showCloseButton: false
});
}
}