Permalink
Browse files

New design for ResetPassword view and NewPassword view (#232)

* newdesign for resetpassword view and newpassword view

* bought password token back

* added params.reset_password_token

* no themify
  • Loading branch information...
yining1023 authored and catarak committed Dec 19, 2016
1 parent acad953 commit 0f17633f796c126e739f05539ee78d1a53a5b763

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
@@ -28,8 +28,6 @@ import SplitPane from 'react-split-pane';
import Overlay from '../../App/components/Overlay';
import SketchList from '../components/SketchList';
import About from '../components/About';
import ResetPasswordView from '../components/ResetPasswordView';
import NewPasswordView from '../components/NewPasswordView';
class IDEView extends React.Component {
constructor(props) {
@@ -432,26 +430,6 @@ class IDEView extends React.Component {
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.location.pathname === '/reset-password') {
return (
<Overlay>
<ResetPasswordView />
</Overlay>
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.location.pathname.match(/\/reset-password\/[a-fA-F0-9]+/)) {
return (
<Overlay>
<NewPasswordView
token={this.props.params.reset_password_token}
/>
</Overlay>
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.ide.forceAuthenticationVisible) {
return (
@@ -4,7 +4,7 @@ import { domOnlyProps } from '../../../utils/reduxFormUtils';
function LoginForm(props) {
const { fields: { email, password }, handleSubmit, submitting, pristine } = props;
return (
<form className="login-form" onSubmit={handleSubmit(props.validateAndLoginUser.bind(this, props.previousPath))}>
<form className="form" onSubmit={handleSubmit(props.validateAndLoginUser.bind(this, props.previousPath))}>
<p className="form__field">
<label htmlFor="email" className="form__label">Email</label>
<input
@@ -4,23 +4,25 @@ import { domOnlyProps } from '../../../utils/reduxFormUtils';
function NewPasswordForm(props) {
const { fields: { password, confirmPassword }, handleSubmit, submitting, invalid, pristine } = props;
return (
<form className="new-password-form" onSubmit={handleSubmit(props.updatePassword.bind(this, props.token))}>
<p className="new-password-form__field">
<form className="form" onSubmit={handleSubmit(props.updatePassword.bind(this, props.params.reset_password_token))}>
<p className="form__field">
<label htmlFor="password" className="form__label">Password</label>
<input
className="new-password-form__password-input"
className="form__input"
aria-label="password"
type="password"
placeholder="Password"
id="Password"
{...domOnlyProps(password)}
/>
{password.touched && password.error && <span className="form-error">{password.error}</span>}
</p>
<p className="new-password-form__field">
<p className="form__field">
<label htmlFor="confirm password" className="form__label">Confirm Password</label>
<input
className="new-password-form__confirm-password-input"
className="form__input"
type="password"
placeholder="Confirm Password"
aria-label="confirm password"
id="confirm password"
{...domOnlyProps(confirmPassword)}
/>
{confirmPassword.touched && confirmPassword.error && <span className="form-error">{confirmPassword.error}</span>}
@@ -40,7 +42,9 @@ NewPasswordForm.propTypes = {
submitting: PropTypes.bool,
invalid: PropTypes.bool,
pristine: PropTypes.bool,
token: PropTypes.string.isRequired
params: PropTypes.shape({
reset_password_token: PropTypes.string,
}),
};
export default NewPasswordForm;
@@ -4,17 +4,18 @@ import { domOnlyProps } from '../../../utils/reduxFormUtils';
function ResetPasswordForm(props) {
const { fields: { email }, handleSubmit, submitting, invalid, pristine } = props;
return (
<form className="reset-password-form" onSubmit={handleSubmit(props.initiateResetPassword.bind(this))}>
<p className="reset-password-form__field">
<form className="form" onSubmit={handleSubmit(props.initiateResetPassword.bind(this))}>
<p className="form__field">
<label htmlFor="email" className="form__label">Email used for registration</label>
<input
className="reset-password-form__email-input"
className="form__input"
aria-label="email"
type="text"
placeholder="Email used for registration"
id="email"
{...domOnlyProps(email)}
/>
</p>
<input type="submit" disabled={submitting || invalid || pristine || props.user.resetPasswordInitiate} value="Send password reset email" aria-label="Send email to reset password" />
<input type="submit" disabled={submitting || invalid || pristine || props.user.resetPasswordInitiate} value="Send Password Reset Email" aria-label="Send email to reset password" />
</form>
);
}
@@ -4,7 +4,7 @@ import { domOnlyProps } from '../../../utils/reduxFormUtils';
function SignupForm(props) {
const { fields: { username, email, password, confirmPassword }, handleSubmit, submitting, invalid, pristine } = props;
return (
<form className="signup-form" onSubmit={handleSubmit(props.signUpUser.bind(this, props.previousPath))}>
<form className="form" onSubmit={handleSubmit(props.signUpUser.bind(this, props.previousPath))}>
<p className="form__field">
<label htmlFor="username" className="form__label">User Name</label>
<input
@@ -0,0 +1,96 @@
import React, { PropTypes } from 'react';
import { reduxForm } from 'redux-form';
import NewPasswordForm from '../components/NewPasswordForm';
import * as UserActions from '../actions';
import { bindActionCreators } from 'redux';
import classNames from 'classnames';
import { browserHistory } from 'react-router';
import InlineSVG from 'react-inlinesvg';
const exitUrl = require('../../../images/exit.svg');
const logoUrl = require('../../../images/p5js-logo.svg');
class NewPasswordView extends React.Component {
constructor(props) {
super(props);
this.gotoHomePage = this.gotoHomePage.bind(this);
}
componentDidMount() {
// need to check if this is a valid token
this.props.validateResetPasswordToken(this.props.params.reset_password_token);
}
gotoHomePage() {
browserHistory.push('/');
}
render() {
const newPasswordClass = classNames({
'new-password': true,
'new-password--invalid': this.props.user.resetPasswordInvalid,
'form-container': true
});
return (
<div className={newPasswordClass}>
<div className="form-container__header">
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
<InlineSVG src={logoUrl} alt="p5js Logo" />
</button>
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
<InlineSVG src={exitUrl} alt="Close NewPassword Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Set a New Password</h2>
<NewPasswordForm {...this.props} />
<p className="new-password__invalid">
The password reset token is invalid or has expired.
</p>
</div>
</div>
);
}
}
NewPasswordView.propTypes = {
params: PropTypes.shape({
reset_password_token: PropTypes.string,
}),
validateResetPasswordToken: PropTypes.func.isRequired,
user: PropTypes.shape({
resetPasswordInvalid: PropTypes.bool
})
};
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);
Oops, something went wrong.

0 comments on commit 0f17633

Please sign in to comment.