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

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

@@ -1,11 +1,14 @@
import React from 'react'
import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import { Text, Column, BoundInput, BoundButton } from 'ui'
import { Box, Text, Image, Column, Row, BoundInput, BoundButton } from 'ui'
import { MessageModal, WaitModal } from '../Modal'
import { api } from 'src/API'
import { FormBinder } from 'react-form-binder'
import { sizeInfo, colorInfo } from 'ui/style'
import autobind from 'autobind-decorator'
import headerLogo from 'images/deighton.png'
export class ResetPassword extends React.Component {
export class ResetPassword extends Component {
static propTypes = {
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
}
@@ -16,11 +19,11 @@ export class ResetPassword extends React.Component {
isValid: (r, v) => (v.length >= 6)
},
reenteredNewPassword: {
isValid: (r, v) => (v !== '' && v === r.getField('newPassword').value)
isValid: (r, v) => (v !== '' && v === r.getFieldValue('newPassword'))
},
submit: {
noValue: true,
isDisabled: (r) => (!r.anyModified && !r.allValid)
isDisabled: (r) => (!r.anyModified || !r.allValid)
}
}
@@ -31,73 +34,112 @@ export class ResetPassword extends React.Component {
messageModal: null,
waitModal: null
}
this.handleSubmit = this.handleSubmit.bind(this)
this.handleMessageModalDismiss = this.handleMessageModalDismiss.bind(this)
}
handleSubmit() {
const obj = this.state.binder.getValues()
@autobind
handleSubmit(e) {
e.preventDefault()
e.stopPropagation()
const obj = this.state.binder.getModifiedFieldValues()
const passwordToken = new URLSearchParams(decodeURIComponent(window.location.search)).get('password-token')
this.setState({ waitModal: { message: 'Setting Password...' } })
api.resetPassword({ newPassword: obj.newPassword, passwordToken }).then(() => {
this.setState({ waitModal: null })
this.props.history.replace('/login')
}).catch((error) => {
}).catch((err) => {
this.setState({
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
icon: 'hand',
title: 'There was a problem changing your password',
detail: err.message,
}
})
})
}
@autobind
handleMessageModalDismiss() {
this.setState({ messageModal: null })
}
render() {
const { messageModal, waitModal, binder } = this.state
return (
<div>
<form onSubmit={this.handleSubmit} id='resetPassword'>
<Column>
<Column.Item>
<Text size='large'>Reset Password</Text>
</Column.Item>
<Column.Item>
<BoundInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank'
binder={this.state.binder} />
</Column.Item>
<Column.Item>
<Text>
Passwords can contain special characters and should be unique to this application.
<br /><br />
Passwords must be at least 6 characters long.
</Text>
</Column.Item>
<Column.Item>
<BoundButton name='submit' text='Submit' submit='resetPassword' binder={this.state.binder} />
</Column.Item>
</Column>
</form>
<Fragment>
<Column.Item grow />
<Column.Item>
<Row>
<Row.Item grow />
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item width={sizeInfo.modalWidth}>
<form onSubmit={this.handleSubmit} id='resetPasswordForm'>
<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'>Reset Password</Text>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<BoundInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password'
binder={binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Re-enter New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank'
binder={binder} />
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item minHeight={sizeInfo.buttonHeight}>
<Row>
<Row.Item grow />
<Row.Item>
<BoundButton text='Submit' name='submit' submit='resetPasswordForm' binder={binder} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
</Column>
</Row.Item>
<Row.Item width={sizeInfo.formRowSpacing} />
</Row>
</Box>
</form>
</Row.Item>
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item grow>
<MessageModal
open={!!messageModal}
icon={messageModal ? messageModal.icon : ''}
title={messageModal ? messageModal.title : ''}
message={messageModal ? messageModal.message : ''}
onDismiss={this.handleMessageModalDismiss} />
<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} />
<WaitModal active={!!this.state.waitModal}
message={this.state.waitModal ? this.state.waitModal.message : ''} />
</div>
<WaitModal active={!!waitModal}
message={waitModal ? waitModal.message : ''} />
</Column.Item>
</Fragment>
)
}
}