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

32
website/src/Auth/ConfirmEmail.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import { api } from '../helpers'
import PropTypes from 'prop-types'
import { MessageDialog, WaitDialog } from '../Dialog'
import { MessageModal, WaitModal } from '../Modal'
export class ConfirmEmail extends React.Component {
static propTypes = {
@@ -10,18 +10,18 @@ export class ConfirmEmail extends React.Component {
constructor() {
super()
this.state = {
waitDialog: null,
messageDialog: null
waitModal: null,
messageModal: null
}
this.handleMessageDialogDismiss = this.handleMessageDialogDismiss.bind(this)
this.handleMessageModalDismiss = this.handleMessageModalDismiss.bind(this)
}
componentDidMount(props) {
let emailToken = new URLSearchParams(decodeURIComponent(window.location.search)).get('email-token')
this.setState({ waitDialog: { message: 'Validating Email...' } })
this.setState({ waitModal: { message: 'Validating Email...' } })
if (emailToken) {
api.confirmEmail(emailToken).then((response) => {
this.setState({ waitDialog: null })
this.setState({ waitModal: null })
if (response && response.passwordToken) {
// API will send a password reset token if this is the first time loggin on
this.props.history.replace(`/reset-password?password-token=${response.passwordToken}`)
@@ -35,8 +35,8 @@ export class ConfirmEmail extends React.Component {
? 'This email address may have already been confirmed.'
: `Please contact ${supportEmail} to request a new user invitation`
this.setState({
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
title: 'Error Verifying Email...',
message: `We couldn't complete that request. ${message}`
}
@@ -47,21 +47,21 @@ export class ConfirmEmail extends React.Component {
}
}
handleMessageDialogDismiss() {
this.setState({ messageDialog: null })
handleMessageModalDismiss() {
this.setState({ messageModal: null })
this.props.history.replace('/login')
}
render() {
return (
<div>
<WaitDialog active={!!this.state.waitDialog}
message={this.state.waitDialog ? this.state.waitDialog.message : ''} />
<WaitModal active={!!this.state.waitModal}
message={this.state.waitModal ? this.state.waitModal.message : ''} />
<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} />
</div>
)
}

58
website/src/Auth/ForgotPassword.js
View File

@@ -1,17 +1,17 @@
import React from 'react'
import PropTypes from 'prop-types'
import { regExpPattern } from 'regexp-pattern'
import { Text, Column } from 'ui'
import { MessageDialog, WaitDialog } from '../Dialog'
import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
import { Text, Column, BoundInput, BoundButton } from 'ui'
import { MessageModal, WaitModal } from '../Modal'
import { api } from '../helpers'
import { FormBinder } from 'react-form-binder'
export class ForgotPassword 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))
@@ -25,23 +25,23 @@ export class ForgotPassword extends React.Component {
constructor(props) {
super(props)
this.state = {
validator: new Validator({}, ForgotPassword.validations),
messageDialog: null,
waitDialog: null
binder: new FormBinder({}, ForgotPassword.bindings),
messageModal: null,
waitModal: null
}
this.handleSubmit = this.handleSubmit.bind(this)
this.handleMessageDialogDismiss = this.handleMessageDialogDismiss.bind(this)
this.handleMessageModalDismiss = this.handleMessageModalDismiss.bind(this)
}
handleSubmit() {
const obj = this.state.validator.getValues()
const obj = this.state.binder.getValues()
this.setState({ waitDialog: { message: 'Requesting Reset Email' } })
this.setState({ waitModal: { message: 'Requesting Reset Email' } })
api.sendResetPassword(obj.email).then((res) => {
const email = this.state.validator.getField('email').value
const email = this.state.binder.getField('email').value
this.setState({
waitDialog: null,
messageDialog: {
waitModal: null,
messageModal: {
error: false,
title: 'Password Reset Requested',
message: `An email will be sent to '${email}' with a reset link. Please click on it to finish resetting the password.`
@@ -49,9 +49,9 @@ export class ForgotPassword extends React.Component {
})
}).catch((error) => {
this.setState({
validator: new Validator({}, ForgotPassword.validations), // Reset to avoid rapid retries
waitDialog: null,
messageDialog: {
binder: new FormBinder({}, ForgotPassword.bindings), // Reset to avoid rapid retries
waitModal: null,
messageModal: {
error: true,
title: 'Password Reset Failed',
message: `There was a problem requesting the password reset. ${error ? error.message : ''}`
@@ -60,7 +60,7 @@ export class ForgotPassword extends React.Component {
})
}
handleMessageDialogDismiss() {
handleMessageModalDismiss() {
this.props.history.replace('/')
}
@@ -73,29 +73,29 @@ export class ForgotPassword extends React.Component {
<Text size='large'>Forgotten Password</Text>
</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='A valid email address' />
</Column.Item>
<Column.Item>
<Text>The email address of an existing user to send the password reset link to.</Text>
</Column.Item>
<Column.Item>
<ValidatedButton className='submit' name='submit' content='Submit'
primary submit validator={this.state.validator}>Submit</ValidatedButton>
<BoundButton className='submit' name='submit' content='Submit'
primary submit binder={this.state.binder}>Submit</BoundButton>
</Column.Item>
</Column>
</form>
<WaitDialog active={!!this.state.waitDialog}
message={this.state.waitDialog ? this.state.waitDialog.message : ''} />
<WaitModal active={!!this.state.waitModal}
message={this.state.waitModal ? this.state.waitModal.message : ''} />
<MessageDialog
open={!!this.state.messageDialog}
error={this.state.messageDialog ? this.state.messageDialog.error : true}
title={this.state.messageDialog ? this.state.messageDialog.title : ''}
message={this.state.messageDialog ? this.state.messageDialog.message : ''}
onDismiss={this.handleMessageDialogDismiss} />
<MessageModal
open={!!this.state.messageModal}
error={this.state.messageModal ? this.state.messageModal.error : true}
title={this.state.messageModal ? this.state.messageModal.title : ''}
message={this.state.messageModal ? this.state.messageModal.message : ''}
onDismiss={this.handleMessageModalDismiss} />
</div>
)
}

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>
)
}

56
website/src/Auth/ResetPassword.js
View File

@@ -1,16 +1,16 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Text, Column } from 'ui'
import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
import { MessageDialog, WaitDialog } from '../Dialog'
import { Text, Column, BoundInput, BoundButton } from 'ui'
import { MessageModal, WaitModal } from '../Modal'
import { api } from '../helpers'
import { FormBinder } from 'react-form-binder'
export class ResetPassword extends React.Component {
static propTypes = {
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
}
static validations = {
static bindings = {
newPassword: {
alwaysGet: true,
isValid: (r, v) => (v.length >= 6)
@@ -27,27 +27,27 @@ export class ResetPassword extends React.Component {
constructor(props) {
super(props)
this.state = {
validator: new Validator({}, ResetPassword.validations),
messageDialog: null,
waitDialog: null
binder: new FormBinder({}, ResetPassword.bindings),
messageModal: null,
waitModal: null
}
this.handleSubmit = this.handleSubmit.bind(this)
this.handleMessageDialogDismiss = this.handleMessageDialogDismiss.bind(this)
this.handleMessageModalDismiss = this.handleMessageModalDismiss.bind(this)
}
handleSubmit() {
const obj = this.state.validator.getValues()
const obj = this.state.binder.getValues()
const passwordToken = new URLSearchParams(decodeURIComponent(window.location.search)).get('password-token')
this.setState({ waitDialog: { message: 'Setting Password...' } })
this.setState({ waitModal: { message: 'Setting Password...' } })
api.resetPassword({ newPassword: obj.newPassword, passwordToken }).then(() => {
this.setState({ waitDialog: null })
this.setState({ waitModal: null })
this.props.history.replace('/login')
}).catch((error) => {
this.setState({
validator: new Validator({}, ResetPassword.validations), // Reset to avoid accidental rapid retries
waitDialog: null,
messageDialog: {
binder: new FormBinder({}, ResetPassword.bindings), // Reset to avoid accidental rapid retries
waitModal: null,
messageModal: {
title: 'We had a problem changing your password',
message: error.message
}
@@ -55,8 +55,8 @@ export class ResetPassword extends React.Component {
})
}
handleMessageDialogDismiss() {
this.setState({ messageDialog: null })
handleMessageModalDismiss() {
this.setState({ messageModal: null })
}
render() {
@@ -68,14 +68,14 @@ export class ResetPassword extends React.Component {
<Text size='large'>Reset Password</Text>
</Column.Item>
<Column.Item>
<ValidatedInput label='New Password' password name='newPassword'
<BoundInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password'
width={16} validator={this.state.validator} />
width={16} binder={this.state.binder} />
</Column.Item>
<Column.Item>
<ValidatedInput label='Re-entered New Password' password name='reenteredNewPassword'
<BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank'
width={16} validator={this.state.validator} />
width={16} binder={this.state.binder} />
</Column.Item>
<Column.Item>
<Text>
@@ -85,19 +85,19 @@ export class ResetPassword extends React.Component {
</Text>
</Column.Item>
<Column.Item>
<ValidatedButton className='submit' name='submit' content='Submit'
submit validator={this.state.validator} />
<BoundButton className='submit' name='submit' content='Submit'
submit binder={this.state.binder} />
</Column.Item>
</Column>
</form>
<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} />
<WaitDialog active={!!this.state.waitDialog}
message={this.state.waitDialog ? this.state.waitDialog.message : ''} />
<WaitModal active={!!this.state.waitModal}
message={this.state.waitModal ? this.state.waitModal.message : ''} />
</div>
)
}