Fixing last couple of auth dialogs

This commit is contained in:
John Lyon-Smith
2018-03-24 10:53:34 -07:00
parent ce25d56dfe
commit cb708c720f
16 changed files with 312 additions and 274 deletions

View File

@@ -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='&nbsp;'
onClick={this.props.onChangeEmail} />
<Button text={'Change Password'} label='&nbsp;'
onClick={this.props.onChangePassword} />
<BoundButton submit size='medium' text='Save' label='&nbsp;' name='save'
binder={binder} />
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}>
<Row>
<Row.Item>
<Button text={'Change Email'} label='&nbsp;'
width={sizeInfo.buttonWideWidth} onClick={this.handleChangeEmail} />
</Row.Item>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<Button text={'Change Password'} label='&nbsp;'
width={sizeInfo.buttonWideWidth} onClick={this.props.onChangePassword} />
</Row.Item>
<Row.Item grow />
<Row.Item>
<BoundButton submit='profileForm' size='medium' text='Save' label='&nbsp;' 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>