105 lines
3.5 KiB
JavaScript
105 lines
3.5 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
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 bindings = {
|
|
newPassword: {
|
|
alwaysGet: true,
|
|
isValid: (r, v) => (v.length >= 6)
|
|
},
|
|
reenteredNewPassword: {
|
|
isValid: (r, v) => (v !== '' && v === r.getField('newPassword').value)
|
|
},
|
|
submit: {
|
|
nonValue: true,
|
|
isDisabled: (r) => (!r.anyModified && !r.allValid)
|
|
}
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
binder: new FormBinder({}, ResetPassword.bindings),
|
|
messageModal: null,
|
|
waitModal: null
|
|
}
|
|
this.handleSubmit = this.handleSubmit.bind(this)
|
|
this.handleMessageModalDismiss = this.handleMessageModalDismiss.bind(this)
|
|
}
|
|
|
|
handleSubmit() {
|
|
const obj = this.state.binder.getValues()
|
|
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) => {
|
|
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
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
handleMessageModalDismiss() {
|
|
this.setState({ messageModal: null })
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<form onSubmit={this.handleSubmit}>
|
|
<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'
|
|
width={16} 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'
|
|
width={16} 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 className='submit' name='submit' content='Submit'
|
|
submit binder={this.state.binder} />
|
|
</Column.Item>
|
|
</Column>
|
|
</form>
|
|
|
|
<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>
|
|
)
|
|
}
|
|
}
|