john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Forgot password and reset password

Browse Source
This commit is contained in:
John Lyon-Smith
2018-03-22 14:56:39 -07:00
parent 82fbd88dab
commit 06ae76047e
15 changed files with 324 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
website/src/Auth/Login.js
View File

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
import { regExpPattern } from 'regexp-pattern'
import { api } from 'src/API'
import { WaitModal, MessageModal } from '../Modal'
import { Image, Link, Text, Row, Column, BoundInput, BoundCheckbox, BoundButton } from 'ui'
import { Box, Image, Link, Text, Row, Column, BoundInput, BoundCheckbox, BoundButton } from 'ui'
import headerLogo from 'images/deighton.png'
import { versionInfo } from '../version'
import { FormBinder } from 'react-form-binder'
import { reactAutoBind } from 'auto-bind2'
import { sizeInfo } from 'ui/style'
import { sizeInfo, colorInfo } from 'ui/style'
export class Login extends Component {
static propTypes = {
@@ -103,52 +103,67 @@ export class Login extends Component {
<Row.Item grow />
<Row.Item width={sizeInfo.modalWidth}>
<form onSubmit={this.handleSubmit} id='loginForm'>
<Column minHeight='100%'>
<Column.Item>
<Row>
<Row.Item grow />
<Row.Item>
<Image source={headerLogo} width={sizeInfo.loginLogoWidth} />
</Row.Item>
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item>
<BoundInput label='Email' name='email'
placeholder='example@xyz.com' binder={this.state.binder}
message='Enter the email address associated with your account.' />
</Column.Item>
<Column.Item>
<BoundInput password label='Password' name='password'
binder={this.state.binder} message='Enter your password.' />
</Column.Item>
<Column.Item>
<Row>
<Row.Item>
<Link to='/forgot-password'>Forgot your password?</Link>
</Row.Item>
<Row.Item grow />
<Row.Item>
<BoundCheckbox label='Remember Me' name='rememberMe' binder={this.state.binder} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}>
<Row>
<Row.Item grow />
<Row.Item>
<BoundButton name='submit' text='Login' submit='loginForm' binder={this.state.binder} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Text>
Please contact <Link to={`mailto:${versionInfo.supportEmail}`}>{versionInfo.supportEmail}</Link> to request login credentials.
</Text>
</Column.Item>
</Column>
<Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
<Row>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
<Column>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Row>
<Row.Item grow />
<Row.Item>
<Image source={headerLogo} width={sizeInfo.loginLogoWidth} />
</Row.Item>
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Text size='large'>Login</Text>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<BoundInput label='Email' name='email'
placeholder='example@xyz.com' binder={this.state.binder}
message='Enter the email address associated with your account.' />
</Column.Item>
<Column.Item>
<BoundInput password label='Password' name='password'
binder={this.state.binder} message='Enter your password.' />
</Column.Item>
<Column.Item>
<Row>
<Row.Item>
<Link to='/forgot-password'>Forgot your password?</Link>
</Row.Item>
<Row.Item grow />
<Row.Item>
<BoundCheckbox label='Remember Me' name='rememberMe' binder={this.state.binder} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}>
<Row>
<Row.Item grow />
<Row.Item>
<BoundButton name='submit' text='Login' submit='loginForm' binder={this.state.binder} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Text>
Please contact <Link to={`mailto:${versionInfo.supportEmail}`}>{versionInfo.supportEmail}</Link> to request login credentials.
</Text>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
</Column>
</Row.Item>
<Row.Item width={sizeInfo.formRowSpacing} />
</Row>
</Box>
</form>
</Row.Item>
<Row.Item grow />