Initial commit
This commit is contained in:
John Lyon-Smith
170
website/src/Profile/ProfileForm.js
Normal file
170
website/src/Profile/ProfileForm.js
Normal file
@@ -0,0 +1,170 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Grid, Form, Image } from 'semantic-ui-react'
|
||||
import { regExpPattern } from 'regexp-pattern'
|
||||
import './ProfileForm.scss'
|
||||
import { Constants } from '../helpers'
|
||||
import { FilePicker } from '../FilePicker'
|
||||
import { Validator, ValidatedInput, ValidatedDropdown, ValidatedButton, ValidatedDatePicker } 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,
|
||||
onSelectImage: PropTypes.func,
|
||||
userImageUrl: PropTypes.string
|
||||
}
|
||||
|
||||
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}>
|
||||
<Grid stackable>
|
||||
<Grid.Column width={3}>
|
||||
<Image id='userImage' shape='circular' size='medium' src={this.props.userImageUrl} centered />
|
||||
<FilePicker validExtensions={['.jpg', '.jpeg', '.png']} content='Select Image' onFileSelect={this.props.onSelectImage} />
|
||||
</Grid.Column>
|
||||
|
||||
<Grid.Column width={13}>
|
||||
<Form.Group>
|
||||
<ValidatedInput label='First Name' name='firstName' width={8}
|
||||
validator={this.state.validator} />
|
||||
<ValidatedInput label='Last Name' name='lastName' width={8}
|
||||
validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedInput label='Email' name='email' width={8} message='Required. Must be a valid email address.'
|
||||
validator={this.state.validator} />
|
||||
<Form.Button fluid content={'Change Email'} label=' '
|
||||
width={4} onClick={this.props.onChangeEmail} />
|
||||
<Form.Button fluid content={'Change Password'} label=' '
|
||||
width={4} onClick={this.props.onChangePassword} />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedInput label='Zip' name='zip' width={4}
|
||||
validator={this.state.validator} message='5 Character U.S. Zip Code. Optional.' />
|
||||
<ValidatedDropdown label='State' name='state' width={6} message='Type or select a U.S. State or Province.'
|
||||
placeholder='Select State' options={Constants.stateOptions}
|
||||
validator={this.state.validator} searchable />
|
||||
<ValidatedInput label='City' name='city' width={6}
|
||||
validator={this.state.validator} message='U.S. City. Optional.' />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedInput label='Address' name='address1' width={12}
|
||||
validator={this.state.validator} message='Primary Street Address. Optional.' />
|
||||
<ValidatedInput label='Apt. #' name='address2' width={4}
|
||||
validator={this.state.validator} message='Apartment/Unit number. Optional.' />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedInput label='Home Phone' name='homePhone' width={8}
|
||||
validator={this.state.validator} message='A valid U.S. phone number. IE: (555)123-4567. Optional.' />
|
||||
<ValidatedInput label='Cell Phone' name='cellPhone' width={8}
|
||||
validator={this.state.validator} message='A valid U.S. phone number. IE: (555)123-4567. Optional.' />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedDatePicker label='Date of Birth' name='dateOfBirth' width={5}
|
||||
validator={this.state.validator} message='Select a date.' />
|
||||
<ValidatedInput label='SSN' name='ssn' width={6}
|
||||
validator={this.state.validator} message='U.S. Social Security Number. IE: 123-45-6789' />
|
||||
<ValidatedDatePicker label='Hire Date' name='dateOfHire' width={5}
|
||||
validator={this.state.validator} message='Select a date.' />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<Form.Field width={12} />
|
||||
<ValidatedButton submit primary width={4} size='medium' content='Save' label=' ' name='save'
|
||||
validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user