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

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