X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=skyquake%2Fplugins%2Fuser-management%2Fsrc%2Fdashboard%2Fdashboard.jsx;h=c997e15bcfb8e262848742751133f0f0203594a2;hb=c637db2bc817cb1cd1a4a20655bf7e01b1c490bd;hp=fdac58b4023fd8f78c2523f3d153706659d04221;hpb=526b989da8b4a69f83eeb960ad844ac97b1933de;p=osm%2FUI.git

diff --git a/skyquake/plugins/user-management/src/dashboard/dashboard.jsx b/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
index fdac58b40..c997e15bc 100644
--- a/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
+++ b/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
@@ -72,15 +72,21 @@ class UserManagementDashboard extends React.Component {
     viewUser = (un, index) => {
         this.actions.viewUser(un, index);
     }
+    editUser = () => {
+        this.actions.editUser(false);
+    }
+    cancelEditUser = () => {
+        this.actions.editUser(true)
+    }
     closePanel = () => {
         this.actions.handleCloseUserPanel();
     }
-    updateUser = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
+    // updateUser = (e) => {
+    //     e.preventDefault();
+    //     e.stopPropagation();
 
-        this.Store.updateUser();
-    }
+    //     this.Store.updateUser();
+    // }
     deleteUser = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -102,6 +108,41 @@ class UserManagementDashboard extends React.Component {
                 // 'confirm-password': this.state['confirm-password']
             });
         }
+    }
+    updateUser = (e) => {
+        let self = this;
+        e.preventDefault();
+        e.stopPropagation();
+        let validatedPasswords = validatePasswordFields(this.state);
+        if(validatedPasswords) {
+            this.Store.updateUser(_.merge({
+                            'user-name': this.state['user-name'],
+                            'user-domain': this.state['user-domain'],
+                            'password': this.state['new-password']
+                        }));
+        }
+        function validatePasswordFields(state) {
+            let oldOne = state['old-password'];
+            let newOne = state['new-password'];
+            let confirmOne = state['confirm-password'];
+            if(true) {
+                if(oldOne == newOne) {
+                    self.props.actions.showNotification('Your new password must not match your old one');
+                    return false;
+                }
+                if(newOne != confirmOne) {
+                    self.props.actions.showNotification('Passwords do not match');
+                    return false;
+                }
+                return {
+                    // 'old-password': oldOne,
+                    'new-password': newOne,
+                    'confirm-password': confirmOne
+                }
+            } else {
+                return {};
+            }
+        }
     }
      evaluateSubmit = (e) => {
         if (e.keyCode == 13) {
@@ -118,11 +159,59 @@ class UserManagementDashboard extends React.Component {
         this.actions.handleHideColumns(e);
         console.log('transition end')
     }
+    disableChange = (e) => {
+        let value = e.target.value;
+        value = value.toUpperCase();
+        if (value=="TRUE") {
+            value = true;
+        } else {
+            value = false;
+        }
+        console.log(value)
+    }
     render() {
         let self = this;
         let html;
         let props = this.props;
         let state = this.state;
+        let passwordSectionHTML = null;
+        let formButtonsHTML = (
+            <ButtonGroup className="buttonGroup">
+                <Button label="EDIT" type="submit" onClick={this.editUser} />
+            </ButtonGroup>
+        );
+        if(!this.state.isReadOnly) {
+            passwordSectionHTML = ( this.state.isEdit ?
+                                        (
+                                            <FormSection title="PASSWORD CHANGE">
+                                                <Input label="NEW PASSWORD" type="password" value={state['new-password']}  onChange={this.updateInput.bind(null, 'new-password')}/>
+                                                <Input label="REPEAT NEW PASSWORD" type="password"  value={state['confirm-password']}  onChange={this.updateInput.bind(null, 'confirm-password')}/>
+                                            </FormSection>
+                                        ) :
+                                        (
+                                            <FormSection title="CREATE PASSWORD">
+                                                <Input label="CREATE PASSWORD" type="password" value={state.newPassword}  onChange={this.updateInput.bind(null, 'new-password')}/>
+                                                <Input label="REPEAT PASSWORD" type="password"  value={state.repeatNewPassword}  onChange={this.updateInput.bind(null, 'confirm-password')}/>
+                                            </FormSection>
+                                        )
+                                    );
+            formButtonsHTML = (
+                                state.isEdit ?
+                                (
+                                    <ButtonGroup className="buttonGroup">
+                                        <Button label="Update" type="submit" onClick={this.updateUser} />
+                                        <Button label="Delete" onClick={this.deleteUser} />
+                                        <Button label="Cancel" onClick={this.cancelEditUser} />
+                                    </ButtonGroup>
+                                )
+                                : (
+                                    <ButtonGroup className="buttonGroup">
+                                        <Button label="Create" type="submit" onClick={this.createUser}  />
+                                    </ButtonGroup>
+                                )
+                            )
+        }
+
         html = (
             <PanelWrapper className={`row userManagement ${!this.state.userOpen ? 'userList-open' : ''}`} style={{'alignContent': 'center', 'flexDirection': 'row'}} >
                 <PanelWrapper ref={(div) => { this.UserList = div}} className={`column userList expanded ${this.state.userOpen ? 'collapsed ' : ' '} ${this.state.hideColumns ? 'hideColumns ' : ' '}`}>
@@ -171,20 +260,22 @@ class UserManagementDashboard extends React.Component {
                         {
                             this.state.isEdit ?
                                 null
-                                : <Input label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
+                                : <Input  readonly={state.isReadOnly}  label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
                         }
-                            <Input label="Domain" value={state['user-domain']}  onChange={this.updateInput.bind(null, 'user-domain')}></Input>
-                            <Input label="Disabled" onChange={this.disabledChange} checked={state.disabled} type="checkbox" />
+                            <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} />
                         </FormSection>
-                        <FormSection title="PLATFORM ROLES">
+                        <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" />
                             <Input label="Platform Admin" onChange={this.platformChange.bind(null, 'platform_admin')}  checked={state.platformRoles.platform_admin} type="checkbox" />
                             <Input label="Platform Oper" onChange={this.platformChange.bind(null, 'platform_oper')}  checked={state.platformRoles.platform_oper} type="checkbox" />
                         </FormSection>
-                        <FormSection title="PROJECT ROLES">
+                        <FormSection title="PROJECT ROLES" style={{display:'none'}}>
                             <InputCollection
                                 inital={true}
                                 type='select'
+                                readonly={state.isReadOnly}
                                 options={state.projectRolesOptions}
                                 collection={state.projectRoles}
                                 onChange={this.updateProjectRole}
@@ -192,40 +283,14 @@ class UserManagementDashboard extends React.Component {
                                 RemoveItemFn={this.removeProjectRole}
                                 />
                         </FormSection>
-                        { this.state.isEdit ?
-                            (
-                                <FormSection title="PASSWORD CHANGE">
-                                    <Input label="OLD PASSWORD" type="password" value={state['old-password']} onChange={this.updateInput.bind(null, 'old-password')} />
-                                    <Input label="NEW PASSWORD" type="password" value={state['new-password']}  onChange={this.updateInput.bind(null, 'new-password')}/>
-                                    <Input label="REPEAT NEW PASSWORD" type="password"  value={state['confirm-password']}  onChange={this.updateInput.bind(null, 'confirm-password')}/>
-                                </FormSection>
-                            ) :
-                            (
-                                <FormSection title="CREATE PASSWORD">
-                                    <Input label="CREATE PASSWORD" type="password" value={state.newPassword}  onChange={this.updateInput.bind(null, 'new-password')}/>
-                                    <Input label="REPEAT PASSWORD" type="password"  value={state.repeatNewPassword}  onChange={this.updateInput.bind(null, 'confirm-password')}/>
-                                </FormSection>
-                            )
-                        }
+                        {passwordSectionHTML}
 
                     </Panel>
+                        {formButtonsHTML}
 
-                        {
-                            state.isEdit ?
-                            (
-                                <ButtonGroup className="buttonGroup">
-                                    <Button label="Update" type="submit" onClick={this.updateUser} />
-                                    <Button label="Delete" onClick={this.deleteUser} />
-                                </ButtonGroup>
-                            )
-                            : (
-                                <ButtonGroup className="buttonGroup">
-                                    <Button label="Create" type="submit" onClick={this.createUser}  />
-                                </ButtonGroup>
-                            )
-                        }
                 </PanelWrapper>
 
+
             </PanelWrapper>
         );
         return html;
@@ -256,6 +321,18 @@ function isElementInView(el) {
 }
 
 
+// isReadOnly={state.isReadOnly} disabled={state.disabled} onChange={this.disableChange}
+
+class isDisabled extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        let props = this.props;
+        return (<div/>)
+    }
+}
+
 /**
  * AddItemFn:
  */
@@ -267,6 +344,7 @@ class InputCollection extends React.Component {
     buildTextInput(onChange, v, i) {
         return (
             <Input
+                readonly={this.props.readonly}
                 style={{flex: '1 1'}}
                 key={i}
                 value={v}
@@ -277,6 +355,7 @@ class InputCollection extends React.Component {
     buildSelectOption(initial, options, onChange, v, i) {
         return (
             <SelectOption
+                readonly={this.props.readonly}
                 key={`${i}-${v.replace(' ', '_')}`}
                 intial={initial}
                 defaultValue={v}
@@ -306,11 +385,12 @@ class InputCollection extends React.Component {
                     return (
                         <div key={i} className={className} >
                             {inputType(v, i)}
-                            <span onClick={props.RemoveItemFn.bind(null, i)} className="removeInput"><img src={imgRemove} />Remove</span>
+                            {
+                                props.readonly ? null : <span onClick={props.RemoveItemFn.bind(null, i)} className="removeInput"><img src={imgRemove} />Remove</span>}
                         </div>
                     )
                 })}
-                <span onClick={props.AddItemFn} className="addInput"><img src={imgAdd} />Add</span>
+                { props.readonly ? null : <span onClick={props.AddItemFn} className="addInput"><img src={imgAdd} />Add</span>}
             </div>
         );
         return html;