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);
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();
// '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) {
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 ' : ' '}`}>
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)}>
{
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}
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;
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:
buildTextInput(onChange, v, i) {
return (
<Input
+ readonly={this.props.readonly}
style={{flex: '1 1'}}
key={i}
value={v}
buildSelectOption(initial, options, onChange, v, i) {
return (
<SelectOption
+ readonly={this.props.readonly}
key={`${i}-${v.replace(' ', '_')}`}
intial={initial}
defaultValue={v}
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;
projects / osm / UI.git / blobdiff