Permalink
Browse files

Taking login and sign pages out + new design for login and signup page (

#228)

* make login a seperate page

* make signup a another page

* get previousPath

* setPreviousPath between routes

* new desig for login pagen

* new design for signup page

* added login and exit icons

* added signup and exit icons

* refactor form-container.scss

* deleted extra code
  • Loading branch information...
yining1023 authored and catarak committed Dec 15, 2016
1 parent 67dad2b commit acad9538cc09456bbf2e420413d106e46050f4db
View
@@ -1,6 +1,7 @@
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import DevTools from './components/DevTools';
import { setPreviousPath } from '../IDE/actions/ide';
class App extends React.Component {
constructor(props, context) {
@@ -12,6 +13,12 @@ class App extends React.Component {
this.setState({ isMounted: true }); // eslint-disable-line react/no-did-mount-set-state
}
componentWillReceiveProps(nextProps) {
if (nextProps.location !== this.props.location) {
this.props.setPreviousPath(this.props.location.pathname);
}
}
render() {
return (
<div className="app">
@@ -23,7 +30,11 @@ class App extends React.Component {
}
App.propTypes = {
children: PropTypes.object
children: PropTypes.object,
location: PropTypes.shape({
pathname: PropTypes.string
}),
setPreviousPath: PropTypes.func.isRequired,
};
export default connect()(App);
export default connect(() => ({}), { setPreviousPath })(App);

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 LoginView from '../components/LoginView';
import SignupView from '../components/SignupView';
import ResetPasswordView from '../components/ResetPasswordView';
import NewPasswordView from '../components/NewPasswordView';
@@ -434,24 +432,6 @@ class IDEView extends React.Component {
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.location.pathname === '/login') {
return (
<Overlay>
<LoginView previousPath={this.props.ide.previousPath} />
</Overlay>
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.location.pathname === '/signup') {
return (
<Overlay>
<SignupView previousPath={this.props.ide.previousPath} />
</Overlay>
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.location.pathname === '/reset-password') {
return (
@@ -5,27 +5,29 @@ function LoginForm(props) {
const { fields: { email, password }, handleSubmit, submitting, pristine } = props;
return (
<form className="login-form" onSubmit={handleSubmit(props.validateAndLoginUser.bind(this, props.previousPath))}>
<p className="login-form__field">
<p className="form__field">
<label htmlFor="email" className="form__label">Email</label>
<input
className="login-form__email-input"
className="form__input"
aria-label="email"
type="text"
placeholder="Email"
id="email"
{...domOnlyProps(email)}
/>
{email.touched && email.error && <span className="form-error">{email.error}</span>}
</p>
<p className="login-form__field">
<p className="form__field">
<label htmlFor="password" className="form__label">Password</label>
<input
className="signup-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>
<input type="submit" disabled={submitting || pristine} value="Login" aria-label="login" />
<input type="submit" disabled={submitting || pristine} value="Log In" aria-label="login" />
</form>
);
}
@@ -5,42 +5,46 @@ 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))}>
<p className="signup-form__field">
<p className="form__field">
<label htmlFor="username" className="form__label">User Name</label>
<input
className="signup-form__username-input"
className="form__input"
aria-label="username"
type="text"
placeholder="Username"
id="username"
{...domOnlyProps(username)}
/>
{username.touched && username.error && <span className="form-error">{username.error}</span>}
</p>
<p className="signup-form__field">
<p className="form__field">
<label htmlFor="email" className="form__label">Email</label>
<input
className="signup-form__email-input"
className="form__input"
aria-label="email"
type="text"
placeholder="Email"
id="email"
{...domOnlyProps(email)}
/>
{email.touched && email.error && <span className="form-error">{email.error}</span>}
</p>
<p className="signup-form__field">
<p className="form__field">
<label htmlFor="password" className="form__label">Password</label>
<input
className="signup-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="signup-form__field">
<p className="form__field">
<label htmlFor="confirm password" className="form__label">Confirm Password</label>
<input
className="signup-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>}
@@ -0,0 +1,89 @@
import React, { PropTypes } from 'react';
import { reduxForm } from 'redux-form';
import { validateAndLoginUser } from '../actions';
import LoginForm from '../components/LoginForm';
// import GithubButton from '../components/GithubButton';
import { Link, browserHistory } from 'react-router';
import InlineSVG from 'react-inlinesvg';
const exitUrl = require('../../../images/exit.svg');
const logoUrl = require('../../../images/p5js-logo.svg');
class LoginView extends React.Component {
constructor(props) {
super(props);
this.closeLoginPage = this.closeLoginPage.bind(this);
this.gotoHomePage = this.gotoHomePage.bind(this);
}
closeLoginPage() {
browserHistory.push(this.props.previousPath);
}
gotoHomePage() {
browserHistory.push('/');
}
render() {
return (
<div className="form-container">
<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.closeLoginPage}>
<InlineSVG src={exitUrl} alt="Close Login Page" />
</button>
</div>
<div className="form-container__content">
<h2 className="form-container__title">Log In</h2>
<LoginForm {...this.props} />
{/* <h2 className="form-container__divider">Or</h2>
<GithubButton buttonText="Login with Github" /> */}
<p className="form__navigation-options">
Don't have an account?&nbsp;
<Link className="form__signup-button" to="/signup">Sign Up</Link>
</p>
<p className="form__navigation-options">
Forgot your password?&nbsp;
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
</p>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
user: state.user,
previousPath: state.ide.previousPath
};
}
function mapDispatchToProps() {
return {
validateAndLoginUser
};
}
function validate(formProps) {
const errors = {};
if (!formProps.email) {
errors.email = 'Please enter an email';
}
if (!formProps.password) {
errors.password = 'Please enter a password';
}
return errors;
}
LoginView.propTypes = {
previousPath: PropTypes.string.isRequired
};
export default reduxForm({
form: 'login',
fields: ['email', 'password'],
validate
}, mapStateToProps, mapDispatchToProps)(LoginView);
Oops, something went wrong.

0 comments on commit acad953

Please sign in to comment.