126 lines
3.3 KiB
JavaScript
126 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Column, Button } from '../ui'
|
|
import { regExpPattern } from 'regexp-pattern'
|
|
import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
|
|
|
|
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 validations = {
|
|
email: {
|
|
isValid: (r, v) => (v !== ''),
|
|
isDisabled: (r) => (!!r._id)
|
|
},
|
|
firstName: {
|
|
isValid: (r, v) => (v !== '')
|
|
},
|
|
lastName: {
|
|
isValid: (r, v) => (v !== '')
|
|
},
|
|
zip: {
|
|
isValid: (r, v) => (v === '' || regExpPattern.zip.test(v))
|
|
},
|
|
state: {
|
|
isValid: (r, v) => (v === '' || regExpPattern.state.test(v))
|
|
},
|
|
city: {
|
|
isValid: true
|
|
},
|
|
address1: {
|
|
isValid: true
|
|
},
|
|
address2: {
|
|
isValid: true
|
|
},
|
|
homePhone: {
|
|
isValid: (r, v) => (v === '' || regExpPattern.phone.test(v))
|
|
},
|
|
cellPhone: {
|
|
isValid: (r, v) => (v === '' || regExpPattern.phone.test(v))
|
|
},
|
|
dateOfBirth: {
|
|
isValid: true
|
|
},
|
|
dateOfHire: {
|
|
isValid: true
|
|
},
|
|
ssn: {
|
|
isValid: (r, v) => (v === '' || regExpPattern.ssn.test(v))
|
|
},
|
|
role: {
|
|
isDisabled: true
|
|
},
|
|
save: {
|
|
nonValue: true,
|
|
isDisabled: (r) => (!r.anyModified || !r.allValid)
|
|
}
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
this.handleSubmit = this.handleSubmit.bind(this)
|
|
this.state = {
|
|
validator: new Validator(
|
|
this.props.user, ProfileForm.validations, this.props.onModifiedChanged)
|
|
}
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
if (nextProps.user !== this.props.user) {
|
|
this.setState({
|
|
validator: new Validator(
|
|
nextProps.user, ProfileForm.validations, nextProps.onModifiedChanged)
|
|
})
|
|
}
|
|
}
|
|
|
|
handleSubmit(e) {
|
|
e.preventDefault()
|
|
|
|
let obj = this.state.validator.getValues()
|
|
|
|
if (obj && this.props.onSaved) {
|
|
this.props.onSaved(obj)
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<form className='profile-form' onSubmit={this.handleSubmit}>
|
|
<Column stackable>
|
|
<Column.Item>
|
|
<ValidatedInput label='First Name' name='firstName' width={8}
|
|
validator={this.state.validator} />
|
|
</Column.Item>
|
|
<Column.Item>
|
|
<ValidatedInput label='Last Name' name='lastName' width={8}
|
|
validator={this.state.validator} />
|
|
</Column.Item>
|
|
<Column.Item>
|
|
<ValidatedInput label='Email' name='email' width={8} message='Required. Must be a valid email address.'
|
|
validator={this.state.validator} />
|
|
</Column.Item>
|
|
<Column.Item>
|
|
<Button fluid content={'Change Email'} label=' '
|
|
width={4} onClick={this.props.onChangeEmail} />
|
|
<Button fluid content={'Change Password'} label=' '
|
|
width={4} onClick={this.props.onChangePassword} />
|
|
</Column.Item>
|
|
<Column.Item>
|
|
<ValidatedButton submit primary width={4} size='medium' content='Save' label=' ' name='save'
|
|
validator={this.state.validator} />
|
|
</Column.Item>
|
|
</Column>
|
|
</form>
|
|
)
|
|
}
|
|
}
|