78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import { reduxForm } from 'redux-form';
|
|
import classNames from 'classnames';
|
|
import { bindActionCreators } from 'redux';
|
|
import { Helmet } from 'react-helmet';
|
|
import NewPasswordForm from '../components/NewPasswordForm';
|
|
import * as UserActions from '../actions';
|
|
import Nav from '../../../components/Nav';
|
|
|
|
function NewPasswordView(props) {
|
|
const newPasswordClass = classNames({
|
|
'new-password': true,
|
|
'new-password--invalid': props.user.resetPasswordInvalid,
|
|
'form-container': true,
|
|
'user': true
|
|
});
|
|
return (
|
|
<div className="new-password-container">
|
|
<Nav layout="dashboard" />
|
|
<div className={newPasswordClass}>
|
|
<Helmet>
|
|
<title>p5.js Web Editor | New Password</title>
|
|
</Helmet>
|
|
<div className="form-container__content">
|
|
<h2 className="form-container__title">Set a New Password</h2>
|
|
<NewPasswordForm {...props} />
|
|
<p className="new-password__invalid">
|
|
The password reset token is invalid or has expired.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
NewPasswordView.propTypes = {
|
|
params: PropTypes.shape({
|
|
reset_password_token: PropTypes.string,
|
|
}).isRequired,
|
|
validateResetPasswordToken: PropTypes.func.isRequired,
|
|
user: PropTypes.shape({
|
|
resetPasswordInvalid: PropTypes.bool
|
|
}).isRequired
|
|
};
|
|
|
|
function validate(formProps) {
|
|
const errors = {};
|
|
|
|
if (!formProps.password) {
|
|
errors.password = 'Please enter a password';
|
|
}
|
|
if (!formProps.confirmPassword) {
|
|
errors.confirmPassword = 'Please enter a password confirmation';
|
|
}
|
|
|
|
if (formProps.password !== formProps.confirmPassword) {
|
|
errors.password = 'Passwords must match';
|
|
}
|
|
|
|
return errors;
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
user: state.user
|
|
};
|
|
}
|
|
|
|
function mapDispatchToProps(dispatch) {
|
|
return bindActionCreators(UserActions, dispatch);
|
|
}
|
|
|
|
export default reduxForm({
|
|
form: 'new-password',
|
|
fields: ['password', 'confirmPassword'],
|
|
validate
|
|
}, mapStateToProps, mapDispatchToProps)(NewPasswordView);
|