Fix routing issues. Fix panel layout.

This commit is contained in:
John Lyon-Smith
2018-03-23 13:49:41 -07:00
parent 54365d3566
commit ce25d56dfe
17 changed files with 240 additions and 98 deletions

View File

@@ -1,6 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Column, Button, BoundInput, BoundButton } from 'ui'
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'
@@ -90,32 +91,39 @@ export class ProfileForm extends React.Component {
}
render() {
const { binder } = this.state
return (
<form onSubmit={this.handleSubmit} id='profileForm'>
<Column stackable>
<Column.Item>
<BoundInput label='First Name' name='firstName'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Last Name' name='lastName'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Email' name='email' message='Required. Must be a valid email address.'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<Button fluid content={'Change Email'} label='&nbsp;'
onClick={this.props.onChangeEmail} />
<Button fluid content={'Change Password'} label='&nbsp;'
onClick={this.props.onChangePassword} />
</Column.Item>
<Column.Item>
<BoundButton submit primary size='medium' content='Save' label='&nbsp;' name='save'
binder={this.state.binder} />
</Column.Item>
</Column>
<Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
<Row>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<Column stackable>
<Column.Item>
<BoundInput label='First Name' name='firstName'
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>
<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>
</Column>
</Row.Item>
</Row>
</Box>
</form>
)
}