121 lines
3.7 KiB
JavaScript
121 lines
3.7 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Column, Row, Box, Button, BoundInput, BoundButton } from 'ui'
|
|
import { sizeInfo, colorInfo } from 'ui/style'
|
|
import { FormBinder } from 'react-form-binder'
|
|
import autobind from 'autobind-decorator'
|
|
|
|
export class ProfileForm extends React.Component {
|
|
static propTypes = {
|
|
user: PropTypes.object.isRequired,
|
|
onSaved: PropTypes.func.isRequired,
|
|
onModifiedChanged: PropTypes.func,
|
|
onChangePassword: PropTypes.func,
|
|
onChangeEmail: PropTypes.func
|
|
}
|
|
|
|
static bindings = {
|
|
email: {
|
|
isValid: (r, v) => (v !== ''),
|
|
isDisabled: (r) => (!!r._id)
|
|
},
|
|
firstName: {
|
|
isValid: (r, v) => (v !== '')
|
|
},
|
|
lastName: {
|
|
isValid: (r, v) => (v !== '')
|
|
},
|
|
save: {
|
|
noValue: true,
|
|
isDisabled: (r) => (!r.anyModified || !r.allValid)
|
|
}
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
binder: new FormBinder(
|
|
this.props.user, ProfileForm.bindings, this.props.onModifiedChanged)
|
|
}
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.user !== this.props.user) {
|
|
this.setState({
|
|
binder: new FormBinder(
|
|
nextProps.user, ProfileForm.bindings, nextProps.onModifiedChanged)
|
|
})
|
|
}
|
|
}
|
|
|
|
@autobind
|
|
handleSubmit(e) {
|
|
e.preventDefault()
|
|
|
|
let obj = this.state.binder.getValues()
|
|
|
|
if (obj && this.props.onSaved) {
|
|
this.props.onSaved(obj)
|
|
}
|
|
}
|
|
|
|
@autobind
|
|
handleChangeEmail() {
|
|
this.props.onChangeEmail(this.state.binder.getFieldValue('email'))
|
|
}
|
|
|
|
render() {
|
|
const { binder } = this.state
|
|
|
|
return (
|
|
<form onSubmit={this.handleSubmit} id='profileForm'>
|
|
<Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}
|
|
radius={sizeInfo.formBoxRadius}>
|
|
<Row>
|
|
<Row.Item width={sizeInfo.formRowSpacing} />
|
|
<Row.Item grow>
|
|
<Column>
|
|
<Column.Item height={sizeInfo.formColumnSpacing} />
|
|
<Column.Item>
|
|
<BoundInput label='First Name' name='firstName'
|
|
message='First name is required' binder={binder} />
|
|
</Column.Item>
|
|
<Column.Item>
|
|
<BoundInput label='Last Name' name='lastName'
|
|
binder={binder} />
|
|
</Column.Item>
|
|
<Column.Item>
|
|
<BoundInput label='Email' name='email'
|
|
message='Required. Must be a valid email address.'
|
|
binder={binder} />
|
|
</Column.Item>
|
|
<Column.Item height={sizeInfo.formColumnSpacing} />
|
|
<Column.Item height={sizeInfo.buttonHeight}>
|
|
<Row>
|
|
<Row.Item>
|
|
<Button text={'Change Email'} label=' '
|
|
width={sizeInfo.buttonWideWidth} onClick={this.handleChangeEmail} />
|
|
</Row.Item>
|
|
<Row.Item width={sizeInfo.formRowSpacing} />
|
|
<Row.Item>
|
|
<Button text={'Change Password'} label=' '
|
|
width={sizeInfo.buttonWideWidth} onClick={this.props.onChangePassword} />
|
|
</Row.Item>
|
|
<Row.Item grow />
|
|
<Row.Item>
|
|
<BoundButton submit='profileForm' size='medium' text='Save' label=' ' name='save'
|
|
binder={binder} />
|
|
</Row.Item>
|
|
</Row>
|
|
</Column.Item>
|
|
<Column.Item height={sizeInfo.formColumnSpacing} />
|
|
</Column>
|
|
</Row.Item>
|
|
<Row.Item width={sizeInfo.formRowSpacing} />
|
|
</Row>
|
|
</Box>
|
|
</form>
|
|
)
|
|
}
|
|
}
|