Fixing last couple of auth dialogs
This commit is contained in:
@@ -2,7 +2,6 @@ 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 { regExpPattern } from 'regexp-pattern'
|
||||
import { FormBinder } from 'react-form-binder'
|
||||
import autobind from 'autobind-decorator'
|
||||
|
||||
@@ -26,36 +25,6 @@ export class ProfileForm extends React.Component {
|
||||
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))
|
||||
},
|
||||
save: {
|
||||
noValue: true,
|
||||
isDisabled: (r) => (!r.anyModified || !r.allValid)
|
||||
@@ -90,38 +59,59 @@ export class ProfileForm extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
@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}>
|
||||
<Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}
|
||||
radius={sizeInfo.formBoxRadius}>
|
||||
<Row>
|
||||
<Row.Item width={sizeInfo.formRowSpacing} />
|
||||
<Row.Item>
|
||||
<Column stackable>
|
||||
<Row.Item grow>
|
||||
<Column>
|
||||
<Column.Item height={sizeInfo.formColumnSpacing} />
|
||||
<Column.Item>
|
||||
<BoundInput label='First Name' name='firstName'
|
||||
binder={binder} />
|
||||
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.'
|
||||
<BoundInput label='Email' name='email'
|
||||
message='Required. Must be a valid email address.'
|
||||
binder={binder} />
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<Button text={'Change Email'} label=' '
|
||||
onClick={this.props.onChangeEmail} />
|
||||
<Button text={'Change Password'} label=' '
|
||||
onClick={this.props.onChangePassword} />
|
||||
<BoundButton submit size='medium' text='Save' label=' ' name='save'
|
||||
binder={binder} />
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user