106 lines
3.2 KiB
JavaScript
106 lines
3.2 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { autoBind } from 'auto-bind2'
|
|
import { Modal, Button, Icon, Column, Row, Text, BoundInput, BoundButton } from 'ui'
|
|
import { FormBinder } from 'react-form-binder'
|
|
|
|
export class ChangePasswordModal extends React.Component {
|
|
static propTypes = {
|
|
open: PropTypes.bool,
|
|
onDismiss: PropTypes.func
|
|
}
|
|
|
|
static bindings = {
|
|
oldPassword: {
|
|
alwaysGet: true,
|
|
isValid: (r, v) => (v !== '')
|
|
},
|
|
newPassword: {
|
|
alwaysGet: true,
|
|
isValid: (r, v) => (v !== '' && v !== r.fields.oldPassword.value)
|
|
},
|
|
reenteredNewPassword: {
|
|
alwaysGet: true,
|
|
isValid: (r, v) => (v !== '' && v === r.fields.newPassword.value)
|
|
},
|
|
submit: {
|
|
isDisabled: (r) => (!r.allValid),
|
|
noValue: true
|
|
}
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
autoBind(this, (name) => (name.startsWith('handle')))
|
|
this.state = {
|
|
binder: new FormBinder({}, ChangePasswordModal.bindings)
|
|
}
|
|
}
|
|
|
|
close(passwords) {
|
|
this.state.binder = new FormBinder({}, ChangePasswordModal.bindings)
|
|
this.props.onDismiss(passwords)
|
|
}
|
|
|
|
handleClose() {
|
|
close(null)
|
|
}
|
|
|
|
handleSubmit(e) {
|
|
e.preventDefault()
|
|
let passwords = null
|
|
|
|
if (this.state.binder.allValid) {
|
|
const oldPassword = this.state.binder.getField('oldPassword').value
|
|
const newPassword = this.state.binder.getField('newPassword').value
|
|
passwords = { oldPassword, newPassword }
|
|
}
|
|
this.close(passwords)
|
|
}
|
|
|
|
handleClick(e) {
|
|
this.close(null)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose} closeOnDimmerClick={false}>
|
|
<form id='passwordForm' onSubmit={this.handleSubmit}>
|
|
<Column.Item color='black' icon='edit'>
|
|
<Text size='large'>Change Password</Text>
|
|
</Column.Item>
|
|
<Column.Item>
|
|
<Column>
|
|
<Column.Item>
|
|
<BoundInput label='Current Password' password name='oldPassword'
|
|
message='Your existing password, cannot be blank'
|
|
binder={this.state.binder} />
|
|
</Column.Item>
|
|
<Column.Item>
|
|
<BoundInput label='New Password' password name='newPassword'
|
|
message='A new password, cannot be blank or the same as your old password'
|
|
binder={this.state.binder} />
|
|
</Column.Item>
|
|
<Column.Item>
|
|
<BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
|
|
message='The new password again, must match and cannot be blank'
|
|
binder={this.state.binder} />
|
|
</Column.Item>
|
|
</Column>
|
|
</Column.Item>
|
|
<Column.Item>
|
|
<Row>
|
|
<BoundButton primary submit form='passwordForm' name='submit' binder={this.state.binder}>
|
|
<Icon name='checkmark' /> OK
|
|
</BoundButton>
|
|
<Button color='red' onClick={this.handleClick}>
|
|
<Icon name='close' /> Cancel
|
|
</Button>
|
|
</Row>
|
|
</Column.Item>
|
|
</form>
|
|
</Modal>
|
|
)
|
|
}
|
|
}
|