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

Basic UI elements in place

Browse Source
This commit is contained in:
John Lyon-Smith
2018-02-27 12:16:27 -08:00
parent 5faa4600f5
commit 73b5cf6caa
49 changed files with 525 additions and 937 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,18 +2,18 @@ import React from 'react'
import PropTypes from 'prop-types'
import { regExpPattern } from 'regexp-pattern'
import { api } from '../helpers'
import { Validator, ValidatedInput, ValidatedCheckbox, ValidatedButton } from '../Validated'
import { WaitDialog, MessageDialog } from '../Dialog'
import { Image, Link, Text, Row, Column } from 'ui'
import { WaitModal, MessageModal } from '../Modal'
import { 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'
export class Login extends React.Component {
static propTypes = {
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
}
static validations = {
static bindings = {
email: {
alwaysGet: true,
isValid: (r, v) => (regExpPattern.email.test(v))
@@ -35,11 +35,11 @@ export class Login extends React.Component {
constructor(props) {
super(props)
this.handleSubmit = this.handleSubmit.bind(this)
this.handleMessageDialogDismiss = this.handleMessageDialogDismiss.bind(this)
this.handleMessageModalDismiss = this.handleMessageModalDismiss.bind(this)
this.state = {
waitDialog: false,
messageDialog: null,
validator: new Validator({}, Login.validations)
waitModal: false,
messageModal: null,
binder: new FormBinder({}, Login.bindings)
}
}
@@ -47,19 +47,19 @@ export class Login extends React.Component {
e.preventDefault()
e.stopPropagation()
if (this.state.messageDialog) {
this.setState({ messageDialog: null })
if (this.state.messageModal) {
this.setState({ messageModal: null })
return
} else if (this.state.waitDialog) {
} else if (this.state.waitModal) {
return
}
let obj = this.state.validator.getValues()
let obj = this.state.binder.getValues()
if (obj) {
this.setState({ waitDialog: true })
this.setState({ waitModal: true })
api.login(obj.email, obj.password, obj.rememberMe).then((user) => {
this.setState({ waitDialog: false })
this.setState({ waitModal: false })
if (this.props.history) {
const landing = user.role === 'broker' ? '/broker-dashboard' : 'dashboard'
let url = new URLSearchParams(window.location.search).get('redirect') || landing
@@ -75,16 +75,16 @@ export class Login extends React.Component {
elems[0].focus()
}
this.setState({
validator: new Validator({ email: this.state.validator.getField('email').value }, Login.validations),
waitDialog: false,
messageDialog: { title: 'Login Error...', message: `Unable to login. ${error.message}` }
binder: new FormBinder({ email: this.state.binder.getField('email').value }, Login.bindings),
waitModal: false,
messageModal: { title: 'Login Error...', message: `Unable to login. ${error.message}` }
})
})
}
}
handleMessageDialogDismiss() {
this.setState({ messageDialog: null })
handleMessageModalDismiss() {
this.setState({ messageModal: null })
}
render() {
@@ -104,13 +104,13 @@ export class Login extends React.Component {
</Row>
</Column.Item>
<Column.Item>
<ValidatedInput label='Email' name='email'
placeholder='example@xyz.com' validator={this.state.validator}
<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>
<ValidatedInput password label='Password' name='password'
validator={this.state.validator} message='Enter your password.' />
<BoundInput password label='Password' name='password'
binder={this.state.binder} message='Enter your password.' />
</Column.Item>
<Column.Item>
<Row>
@@ -119,8 +119,8 @@ export class Login extends React.Component {
</Row.Item>
<Row.Item grow />
<Row.Item>
<ValidatedCheckbox label='Remember Me'
name='rememberMe' onChange={this.handleChange} validator={this.state.validator} />
<BoundCheckbox label='Remember Me'
name='rememberMe' onChange={this.handleChange} binder={this.state.binder} />
</Row.Item>
</Row>
</Column.Item>
@@ -129,7 +129,7 @@ export class Login extends React.Component {
<Row.Item grow />
<Row.Item>
<br />
<ValidatedButton name='submit' content='Login' height={60} submit validator={this.state.validator} />
<BoundButton name='submit' content='Login' height={60} submit binder={this.state.binder} />
</Row.Item>
</Row>
</Column.Item>
@@ -144,12 +144,12 @@ export class Login extends React.Component {
</Row.Item>
<Row.Item grow>&nbsp;</Row.Item>
<WaitDialog active={this.state.waitDialog} message='Logging In' />
<WaitModal active={this.state.waitModal} message='Logging In' />
<MessageDialog error open={!!this.state.messageDialog}
title={this.state.messageDialog ? this.state.messageDialog.title : ''}
message={this.state.messageDialog ? this.state.messageDialog.message : ''}
onDismiss={this.handleMessageDialogDismiss} />
<MessageModal error open={!!this.state.messageModal}
title={this.state.messageModal ? this.state.messageModal.title : ''}
message={this.state.messageModal ? this.state.messageModal.message : ''}
onDismiss={this.handleMessageModalDismiss} />
</Row>
)
}