add reset password flow

This commit is contained in:
cleverbeagle 2017-05-28 12:11:07 -05:00
parent e56cd9cf80
commit 779e3ee978
3 changed files with 128 additions and 0 deletions

View file

@ -0,0 +1,28 @@
import { Meteor } from 'meteor/meteor';
import { Accounts } from 'meteor/accounts-base';
const name = 'Application Name';
const email = '<support@application.com>';
const from = `${name} ${email}`;
const emailTemplates = Accounts.emailTemplates;
emailTemplates.siteName = name;
emailTemplates.from = from;
emailTemplates.resetPassword = {
subject() {
return `[${name}] Reset Your Password`;
},
text(user, url) {
const userEmail = user.emails[0].address;
const urlWithoutHash = url.replace('#/', '');
if (Meteor.isDevelopment) console.info(`Reset Password Link: ${urlWithoutHash}`);
return `A password reset has been requested for the account related to this
address (${userEmail}). To reset the password, visit the following link:
\n\n${urlWithoutHash}\n\n If you did not request this reset, please ignore
this email. If you feel something is wrong, please contact our support team:
${email}.`;
},
};

View file

@ -1,2 +1,3 @@
import './accounts';
import './api';
import './fixtures';

View file

@ -0,0 +1,99 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap';
import { Accounts } from 'meteor/accounts-base';
import { Bert } from 'meteor/themeteorchef:bert';
import validate from '../../../modules/validate';
class ResetPassword extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
const component = this;
validate(component.form, {
rules: {
newPassword: {
required: true,
minlength: 6,
},
repeatNewPassword: {
required: true,
minlength: 6,
equalTo: '[name="newPassword"]',
},
},
messages: {
newPassword: {
required: 'Enter a new password, please.',
minlength: 'Use at least six characters, please.',
},
repeatNewPassword: {
required: 'Repeat your new password, please.',
equalTo: 'Hmm, your passwords don\'t match. Try again?',
},
},
submitHandler() { component.handleSubmit(); },
});
}
handleSubmit() {
const { match, history } = this.props;
const token = match.params.token;
Accounts.resetPassword(token, this.newPassword.value, (error) => {
if (error) {
Bert.alert(error.reason, 'danger');
} else {
history.push('/documents');
}
});
}
render() {
return (<div className="ResetPassword">
<Row>
<Col xs={12} sm={6} md={4}>
<h4 className="page-header">Reset Password</h4>
<Alert bsStyle="info">
To reset your password, enter a new one below. You will be logged in
with your new password.
</Alert>
<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
<FormGroup>
<ControlLabel>New Password</ControlLabel>
<input
type="password"
className="form-control"
ref={newPassword => (this.newPassword = newPassword)}
name="newPassword"
placeholder="New Password"
/>
</FormGroup>
<FormGroup>
<ControlLabel>Repeat New Password</ControlLabel>
<input
type="password"
className="form-control"
ref={repeatNewPassword => (this.repeatNewPassword = repeatNewPassword)}
name="repeatNewPassword"
placeholder="Repeat New Password"
/>
</FormGroup>
<Button type="submit" bsStyle="success">Reset Password &amp; Login</Button>
</form>
</Col>
</Row>
</div>);
}
}
ResetPassword.propTypes = {
match: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
};
export default ResetPassword;