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

client/modules/IDE/components/LoginView.js

@@ -1,22 +1,28 @@
 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) {
+class LoginView extends React.Component {
+  componentDidMount() {
+    this.refs.login.focus();
+  }
+
+  render() {
     return (
-    <div className="login">
+      <div className="login" ref="login" tabIndex="0">
         <h1>Login</h1>
-      <LoginForm {...props} />
+        <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) {
   return {

client/modules/IDE/components/SignupView.js

@@ -1,20 +1,26 @@
 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) {
+class SignupView extends React.Component {
+  componentDidMount() {
+    this.refs.signup.focus();
+  }
+
+  render() {
     return (
-    <div className="signup">
+      <div className="signup" ref="signup" tabIndex="0">
         <h1>Sign Up</h1>
-      <SignupForm {...props} />
+        <SignupForm {...this.props} />
-      <Link to="/">Cancel</Link>
+        <Link className="form__cancel-button" to="/">Cancel</Link>
       </div>
     );
   }
+}
 
 function mapStateToProps(state) {
   return {

client/modules/IDE/pages/IDEView.js

@@ -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>
 
     );

client/routes.js

@@ -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="/login" component={IDEView} />
-    <Route path="/signup" component={SignupView} />
+    <Route path="/signup" component={IDEView} />
     <Route path="/projects/:project_id" component={IDEView} />
     <Route path="/full/:project_id" component={FullView} />
     <Route path="/sketches" component={IDEView} />

client/styles/components/_login.scss

@@ -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;
 }
 

client/styles/components/_signup.scss

@@ -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;
 }