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=b5924ae0880f0eacadb6c9d5f5cf6185ae93e773;hpb=ba19ffdfd442c7ebe66f482b90f6bc65a0e9b8be;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 b5924ae08..c997e15bc 100644
--- a/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
+++ b/skyquake/plugins/user-management/src/dashboard/dashboard.jsx
@@ -29,8 +29,12 @@ class UserManagementDashboard extends React.Component {
         this.actions = this.state.actions;
     }
     componentDidUpdate() {
-
-      ReactDOM.findDOMNode(this.UserList).addEventListener('transitionend', this.onTransitionEnd, false);
+        let self = this;
+        ReactDOM.findDOMNode(this.UserList).addEventListener('transitionend', this.onTransitionEnd, false);
+        setTimeout(function() {
+            let element = self[`user-ref-${self.state.activeIndex}`]
+            element && !isElementInView(element) && element.scrollIntoView({block: 'end', behavior: 'smooth'});
+        })
     }
     componentWillMount() {
         this.Store.listen(this.updateState);
@@ -66,18 +70,23 @@ class UserManagementDashboard extends React.Component {
         this.actions.handleAddUser();
     }
     viewUser = (un, index) => {
-        console.log(un)
         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();
@@ -100,16 +109,109 @@ class UserManagementDashboard extends React.Component {
             });
         }
     }
-
+    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) {
+            if (this.props.isEdit) {
+                this.updateUser(e);
+            } else {
+                this.createUser(e);
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
     onTransitionEnd = (e) => {
         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 ' : ' '}`}>
@@ -122,13 +224,13 @@ class UserManagementDashboard extends React.Component {
                                 Domain
                             </div>
                         </div>
-                        {state.users.map((u, k) => {
+                        {state.users && state.users.map((u, k) => {
                             let platformRoles = [];
                             for(let role in u.platformRoles) {
                                 platformRoles.push(<div>{`${role}: ${u.platformRoles[role]}`}</div>)
                             }
                             return (
-                                <div 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}>
                                     <div
                                         className={`userName userName-header ${((self.state.activeIndex == k) && self.state.userOpen) ? 'activeUser' : ''}`}
                                         onClick={self.viewUser.bind(null, u, k)}>
@@ -147,7 +249,7 @@ class UserManagementDashboard extends React.Component {
                         <Button label="Add User" onClick={this.addUser} />
                     </ButtonGroup>
                 </PanelWrapper>
-                <PanelWrapper
+                <PanelWrapper onKeyUp={this.evaluateSubmit}
                     className={`userAdmin column`}>
                     <Panel
                         title={state.isEdit ? state['user-name'] : 'Create User'}
@@ -158,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}
@@ -179,41 +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>
-
-                        {
-                            state.isEdit ?
-                            (
-                                <ButtonGroup className="buttonGroup">
-                                    <Button label="Update" onClick={this.updateUser} />
-                                    <Button label="Delete" onClick={this.deleteUser} />
-                                </ButtonGroup>
-                            )
-                            : (
-                                <ButtonGroup className="buttonGroup">
-                                    <Button label="Create" onClick={this.createUser}  />
-                                </ButtonGroup>
-                            )
-                        }
+                        {formButtonsHTML}
 
                 </PanelWrapper>
 
+
             </PanelWrapper>
         );
         return html;
@@ -232,7 +309,29 @@ UserManagementDashboard.defaultProps = {
 export default SkyquakeComponent(UserManagementDashboard);
 
 
+function isElementInView(el) {
+    var rect = el && el.getBoundingClientRect() || {};
 
+    return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
+    );
+}
+
+
+// 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:
@@ -245,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}
@@ -255,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}
@@ -284,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;