Permalink
Browse files

Make Login & Sign Up as modal layovers (#122)

* make Login & Sign Up as modal layovers

* delete extra signupForm.js in original path

* deleted extra comments
  • Loading branch information...
yining1023 authored and catarak committed Oct 8, 2016
1 parent 64be537 commit 96321ca76727f4e57ffc7be4d514545384147634
@@ -1,21 +1,27 @@
import React from 'react';
import { reduxForm } from 'redux-form';
import { validateAndLoginUser } from '../actions';
import { validateAndLoginUser } from '../../User/actions';
import LoginForm from '../components/LoginForm';
// import GithubButton from '../components/GithubButton';
import { Link } from 'react-router';
function LoginView(props) {
return (
<div className="login">
<h1>Login</h1>
<LoginForm {...props} />
{/* <h2 className="login__divider">Or</h2>
<GithubButton buttonText="Login with Github" /> */}
<Link className="form__cancel-button" to="/">Cancel</Link>
</div>
);
class LoginView extends React.Component {
componentDidMount() {
this.refs.login.focus();
}
render() {
return (
<div className="login" ref="login" tabIndex="0">
<h1>Login</h1>
<LoginForm {...this.props} />
{/* <h2 className="login__divider">Or</h2>
<GithubButton buttonText="Login with Github" /> */}
<Link className="form__cancel-button" to="/">Cancel</Link>
</div>
);
}
}
function mapStateToProps(state) {
@@ -1,19 +1,25 @@
import React from 'react';
import { bindActionCreators } from 'redux';
import * as UserActions from '../actions';
import * as UserActions from '../../User/actions';
import { reduxForm } from 'redux-form';
import SignupForm from '../components/SignupForm';
import axios from 'axios';
import { Link } from 'react-router';
function SignupView(props) {
return (
<div className="signup">
<h1>Sign Up</h1>
<SignupForm {...props} />
<Link to="/">Cancel</Link>
</div>
);
class SignupView extends React.Component {
componentDidMount() {
this.refs.signup.focus();
}
render() {
return (
<div className="signup" ref="signup" tabIndex="0">
<h1>Sign Up</h1>
<SignupForm {...this.props} />
<Link className="form__cancel-button" to="/">Cancel</Link>
</div>
);
}
}
function mapStateToProps(state) {
@@ -27,6 +27,8 @@ 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';
class IDEView extends React.Component {
constructor(props) {
@@ -391,6 +393,24 @@ class IDEView extends React.Component {
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.location.pathname === '/login') {
return (
<Overlay>
<LoginView />
</Overlay>
);
}
})()}
{(() => { // eslint-disable-line
if (this.props.location.pathname === '/signup') {
return (
<Overlay>
<SignupView />
</Overlay>
);
}
})()}
</div>
);
View
@@ -3,8 +3,6 @@ import React from 'react';
import App from './modules/App/App';
import IDEView from './modules/IDE/pages/IDEView';
import FullView from './modules/IDE/pages/FullView';
import LoginView from './modules/User/pages/LoginView';
import SignupView from './modules/User/pages/SignupView';
// import SketchListView from './modules/Sketch/pages/SketchListView';
import { getUser } from './modules/User/actions';
@@ -16,8 +14,8 @@ const routes = (store) =>
(
<Route path="/" component={App}>
<IndexRoute component={IDEView} onEnter={checkAuth(store)} />
<Route path="/login" component={LoginView} />
<Route path="/signup" component={SignupView} />
<Route path="/login" component={IDEView} />
<Route path="/signup" component={IDEView} />
<Route path="/projects/:project_id" component={IDEView} />
<Route path="/full/:project_id" component={FullView} />
<Route path="/sketches" component={IDEView} />
@@ -1,9 +1,10 @@
.login {
@extend %modal;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: #{20 / $base-font-size}rem;
align-items: center;
}
@@ -1,9 +1,10 @@
.signup {
@extend %modal;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: #{20 / $base-font-size}rem;
align-items: center;
}

0 comments on commit 96321ca

Please sign in to comment.