Close button on view user in user management dashboard
[osm/UI.git] / skyquake / plugins / user_management / src / dashboard / dashboard.jsx
index 28471b7..0377a54 100644 (file)
@@ -10,7 +10,7 @@ import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx'
 import 'style/layout.scss';
 import './userMgmt.scss';
 import {Panel, PanelWrapper} from 'widgets/panel/panel';
-
+import SkyquakeRBAC from 'widgets/skyquake_rbac/skyquakeRBAC.jsx';
 
 import TextInput from 'widgets/form_controls/textInput.jsx';
 import Input from 'widgets/form_controls/input.jsx';
@@ -19,6 +19,10 @@ import SelectOption from 'widgets/form_controls/selectOption.jsx';
 import 'widgets/form_controls/formControls.scss';
 import imgAdd from '../../node_modules/open-iconic/svg/plus.svg'
 import imgRemove from '../../node_modules/open-iconic/svg/trash.svg';
+import {merge} from 'lodash';
+
+import ROLES from 'utils/roleConstants.js';
+const PLATFORM = ROLES.PLATFORM;
 
 class UserManagementDashboard extends React.Component {
     constructor(props) {
@@ -26,7 +30,6 @@ class UserManagementDashboard extends React.Component {
         this.Store = this.props.flux.stores.hasOwnProperty('UserManagementStore') ? this.props.flux.stores.UserManagementStore : this.props.flux.createStore(UserManagementStore);
        this.state = this.Store.getState();
        this.actions = this.state.actions;
-
     }
     componentDidUpdate() {
         let self = this;
@@ -79,7 +82,7 @@ class UserManagementDashboard extends React.Component {
     cancelEditUser = () => {
         this.actions.editUser(true)
     }
-    osePanel = () => {
+    closePanel = () => {
         this.actions.handleCloseUserPanel();
     }
     // updateUser = (e) => {
@@ -91,10 +94,13 @@ class UserManagementDashboard extends React.Component {
     deleteUser = (e) => {
         e.preventDefault();
         e.stopPropagation();
-        this.Store.deleteUser({
+        if (confirm('Are you sure you want to delete this user?')) {
+            this.Store.deleteUser({
                 'user-name': this.state['user-name'],
                 'user-domain': this.state['user-domain']
             });
+        }
+
     }
     createUser = (e) => {
         e.preventDefault();
@@ -102,6 +108,12 @@ class UserManagementDashboard extends React.Component {
         if(this.state['new-password'] != this.state['confirm-password']) {
             this.props.actions.showNotification('Passwords do not match')
         } else {
+            let isDisabled = {};
+            if (this.state.disabled == "TRUE") {
+                let isDisabled = {
+                    disabled: [null]
+                }
+            }
             this.Store.createUser({
                 'user-name': this.state['user-name'],
                 'user-domain': this.state['user-domain'],
@@ -116,18 +128,35 @@ class UserManagementDashboard extends React.Component {
         e.stopPropagation();
         let validatedPasswords = validatePasswordFields(this.state);
         if(validatedPasswords) {
+            let isDisabled = {};
+            let password = {};
+            if (self.state.disabled == "TRUE") {
+                isDisabled = {
+                    disabled: [null]
+                }
+            }
+            if (this.state['new-password'] != '') {
+                password = {'password': this.state['new-password']}
+            } else {
+                password = {
+                    'password': this.state.currentPassword
+                }
+            }
             this.Store.updateUser(_.merge({
                             'user-name': this.state['user-name'],
-                            'user-domain': this.state['user-domain'],
-                            'password': this.state['new-password']
-                        }));
+                            'user-domain': this.state['user-domain']
+                        }, _.merge(isDisabled, password)));
         }
         function validatePasswordFields(state) {
             let oldOne = state['old-password'];
             let newOne = state['new-password'];
             let confirmOne = state['confirm-password'];
             if(true) {
-                if(oldOne == newOne) {
+                // if(!oldOne || !newOne) {
+                //      self.props.actions.showNotification('Please fill in all fields.');
+                //     return false;
+                // }
+                if((oldOne || newOne) && (oldOne == newOne)) {
                     self.props.actions.showNotification('Your new password must not match your old one');
                     return false;
                 }
@@ -163,12 +192,7 @@ class UserManagementDashboard extends React.Component {
     disableChange = (e) => {
         let value = e.target.value;
         value = value.toUpperCase();
-        if (value=="TRUE") {
-            value = true;
-        } else {
-            value = false;
-        }
-        console.log(value)
+        this.actions.handleDisabledChange(value);
     }
     render() {
         let self = this;
@@ -212,10 +236,11 @@ class UserManagementDashboard extends React.Component {
                                 )
                             )
         }
-
         html = (
             <PanelWrapper column>
-                <AppHeader nav={[{name: 'PLATFORM ROLE MANAGEMENT', onClick: this.context.router.push.bind(this, {pathname: '/platform'})}]}/>
+                <SkyquakeRBAC allow={[PLATFORM.SUPER, PLATFORM.ADMIN]} >
+                    <AppHeader nav={[{name: 'PLATFORM ROLE MANAGEMENT', onClick: this.context.router.push.bind(this, {pathname: '/platform'})}]}/>
+                </SkyquakeRBAC>
                 <PanelWrapper className={`row userManagement ${!this.state.userOpen ? 'userList-open' : ''}`} style={{'flexDirection': 'row'}} >
                     <PanelWrapper ref={(div) => { this.UserList = div}} className={`column userList expanded ${this.state.userOpen ? 'collapsed ' : ' '} ${this.state.hideColumns ? 'hideColumns ' : ' '}`}>
                         <Panel title="User List" style={{marginBottom: 0}} no-corners>
@@ -250,9 +275,11 @@ class UserManagementDashboard extends React.Component {
                                 )
                             })}
                         </Panel>
-                        <ButtonGroup  className="buttonGroup" style={{margin: '0 0.5rem 0.5rem', background: '#ddd', paddingBottom: '0.5rem'}}>
-                            <Button label="Add User" onClick={this.addUser} />
+                        <SkyquakeRBAC allow={[PLATFORM.SUPER, PLATFORM.ADMIN]} className="rbacButtonGroup">
+                            <ButtonGroup  className="buttonGroup">
+                                <Button label="Add User" onClick={this.addUser} />
                         </ButtonGroup>
+                        </SkyquakeRBAC>
                     </PanelWrapper>
                     <PanelWrapper onKeyUp={this.evaluateSubmit}
                         className={`userAdmin column`}>
@@ -262,14 +289,19 @@ class UserManagementDashboard extends React.Component {
                             hasCloseButton={this.closePanel}
                             no-corners>
                             <FormSection title="USER INFO">
-                            {
-                                this.state.isEdit ?
-                                    null
-                                    : <Input  readonly={state.isReadOnly}  label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
-                            }
+                                {
+                                    this.state.isEdit ?
+                                        null
+                                        : <Input  readonly={state.isReadOnly}  label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
+                                }
                                 <Input readonly={true} label="Domain" value={state['user-domain']}  onChange={this.updateInput.bind(null, 'user-domain')}></Input>
-
-                                <Input type="radiogroup" readonly={state.isReadOnly} label="Disabled" value={state.disabled} options={[{value: true, label: 'YES'}, {value: false, label: 'NO'}]}  onChange={this.disableChange} />
+                                <Input
+                                    type="radiogroup"
+                                    onChange={this.disableChange}
+                                    label="Disabled"
+                                    value={this.state.disabled}
+                                    options={["TRUE","FALSE"]}
+                                    readonly={state.isReadOnly} />
                             </FormSection>
                             <FormSection title="PLATFORM ROLES" style={{display:'none'}}>
                                 <Input label="Super Admin" onChange={this.platformChange.bind(null, 'super_admin')} checked={state.platformRoles.super_admin} type="checkbox" />
@@ -291,7 +323,9 @@ class UserManagementDashboard extends React.Component {
                             {passwordSectionHTML}
 
                         </Panel>
+                        <SkyquakeRBAC allow={[PLATFORM.SUPER, PLATFORM.ADMIN]} className="rbacButtonGroup">
                             {formButtonsHTML}
+                        </SkyquakeRBAC>
                     </PanelWrapper>
                 </PanelWrapper>
             </PanelWrapper>