Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
1 parent
67dad2b
commit acad953
Showing
16 changed files
with
278 additions
and
180 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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? | ||
| <Link className="form__signup-button" to="/signup">Sign Up</Link> | ||
| </p> | ||
| <p className="form__navigation-options"> | ||
| Forgot your password? | ||
| <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.