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

client/src/app-components/modal-container.js

@@ -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} />
         );
     }
 
@@ -71,4 +72,4 @@ export default connect((store) => {
     return {
         modal: store.modal
     };
-})(ModalContainer);
+})(ModalContainer);

client/src/app/admin/panel/settings/admin-panel-advanced-settings.js

@@ -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}
+                <Header title={i18n('ADVANCED_SETTINGS')} description={i18n('ADVANCED_SETTINGS_DESCRIPTION')} />
+                {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>
@@ -73,7 +77,7 @@ class AdminPanelAdvancedSettings extends React.Component {
                             <div className="admin-panel-advanced-settings__text">
                                 {i18n('INCLUDE_USERS_VIA_CSV')} <InfoTooltip text={i18n('CSV_DESCRIPTION')} />
                             </div>
-                            <FileUploader className="admin-panel-advanced-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 className="col-md-4">
                             <div className="admin-panel-advanced-settings__text">{i18n('BACKUP_DATABASE')}</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'/>
+                <div className="admin-panel-advanced-settings__api-keys__permissions">
+                    <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')}
@@ -160,18 +182,30 @@ class AdminPanelAdvancedSettings extends React.Component {
     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'}}/>
+                <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'}} />
                 <div className="admin-panel-advanced-settings__api-keys__permissions">
-                    <FormField className = "admin-panel-advanced-settings__api-keys__permissions__item" name="createTicketPermission" label={i18n('TICKET_CREATION_PERMISSION')}   field='checkbox'/>
-                    <FormField name="ticketNumberPermission" label={i18n('TICKET_NUMBER_RETURN_PERMISSION')}  field='checkbox'/>
+                    <FormField className = "admin-panel-advanced-settings__api-keys__permissions__item" name="createTicketPermission" label={i18n('TICKET_CREATION_PERMISSION')} field='checkbox' />
+                    <FormField name="ticketNumberPermission" 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" name="checkTicketPermission" label={i18n('TICKET_CHECK_PERMISSION')}  field='checkbox'/>
-                    <FormField name="userPermission" label={i18n('USER_CREATION_PERMISSION')}   field='checkbox'/>
+                    <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>
-                <SubmitButton className="admin-panel-advanced-settings__api-keys-modal__submit-button" type="secondary">{i18n('SUBMIT')}</SubmitButton>
-            </Form>
+                <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>
+                </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: {

client/src/app/admin/panel/settings/admin-panel-advanced-settings.scss

@@ -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;

client/src/core-components/modal.js

@@ -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,16 +69,17 @@ 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();
     }
 }
 
-export default Modal;
+export default Modal;

client/src/core-components/modal.scss

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

client/src/reducers/modal-reducer.js

@@ -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,9 +47,10 @@ class ModalReducer extends Reducer {
             opened: false,
             content: null,
             noPadding: false,
-            outsideClick: false
+            outsideClick: false,
+            showCloseButton: false
         });
     }
 }
 
-export default ModalReducer.getInstance();
+export default ModalReducer.getInstance();