Close button on view user in user management dashboard
[osm/UI.git] / skyquake / plugins / user_management / src / dashboard / dashboard.jsx
index 2ff5f49..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;
@@ -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>
@@ -233,10 +258,12 @@ class UserManagementDashboard extends React.Component {
                                     platformRoles.push(<div>{`${role}: ${u.platformRoles[role]}`}</div>)
                                 }
                                 return (
-                                    <div ref={(el) => this[`user-ref-${k}`] = el} className={`tableRow tableRow--data ${((self.state.activeIndex == k) && self.state.userOpen) ? 'tableRow--data-active' : ''}`} key={k}>
+                                    <div ref={(el) => this[`user-ref-${k}`] = el} className={`tableRow tableRow--data ${((self.state.activeIndex == k) && self.state.userOpen) ? 'tableRow--data-active' : ''}`}
+                                        key={k}
+                                        onClick={self.viewUser.bind(null, u, k)}>
                                         <div
                                             className={`userName userName-header ${((self.state.activeIndex == k) && self.state.userOpen) ? 'activeUser' : ''}`}
-                                            onClick={self.viewUser.bind(null, u, k)}>
+                                            >
                                             {u['user-name']}
                                         </div>
                                         <div>
@@ -248,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`}>
@@ -260,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" />
@@ -289,7 +323,9 @@ class UserManagementDashboard extends React.Component {
                             {passwordSectionHTML}
 
                         </Panel>
+                        <SkyquakeRBAC allow={[PLATFORM.SUPER, PLATFORM.ADMIN]} className="rbacButtonGroup">
                             {formButtonsHTML}
+                        </SkyquakeRBAC>
                     </PanelWrapper>
                 </PanelWrapper>
             </PanelWrapper>
@@ -299,7 +335,8 @@ class UserManagementDashboard extends React.Component {
 }
 // onClick={this.Store.update.bind(null, Account)}
 UserManagementDashboard.contextTypes = {
-    router: React.PropTypes.object
+    router: React.PropTypes.object,
+    userProfile: React.PropTypes.object
 };
 
 UserManagementDashboard.defaultProps = {