From 96321ca76727f4e57ffc7be4d514545384147634 Mon Sep 17 00:00:00 2001
From: Yining Shi <shiyining1023@gmail.com>
Date: Sat, 8 Oct 2016 18:03:39 -0400
Subject: [PATCH] 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
---
 .../{User => IDE}/components/LoginForm.js     |  0
 .../pages => IDE/components}/LoginView.js     | 28 +++++++++++--------
 .../{User => IDE}/components/SignupForm.js    |  0
 .../pages => IDE/components}/SignupView.js    | 24 ++++++++++------
 client/modules/IDE/pages/IDEView.js           | 20 +++++++++++++
 client/routes.js                              |  6 ++--
 client/styles/components/_login.scss          |  3 +-
 client/styles/components/_signup.scss         |  3 +-
 8 files changed, 58 insertions(+), 26 deletions(-)
 rename client/modules/{User => IDE}/components/LoginForm.js (100%)
 rename client/modules/{User/pages => IDE/components}/LoginView.js (59%)
 rename client/modules/{User => IDE}/components/SignupForm.js (100%)
 rename client/modules/{User/pages => IDE/components}/SignupView.js (86%)

diff --git a/client/modules/User/components/LoginForm.js b/client/modules/IDE/components/LoginForm.js
similarity index 100%
rename from client/modules/User/components/LoginForm.js
rename to client/modules/IDE/components/LoginForm.js
diff --git a/client/modules/User/pages/LoginView.js b/client/modules/IDE/components/LoginView.js
similarity index 59%
rename from client/modules/User/pages/LoginView.js
rename to client/modules/IDE/components/LoginView.js
index 318b3187..3327ed7b 100644
--- a/client/modules/User/pages/LoginView.js
+++ b/client/modules/IDE/components/LoginView.js
@@ -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) {
diff --git a/client/modules/User/components/SignupForm.js b/client/modules/IDE/components/SignupForm.js
similarity index 100%
rename from client/modules/User/components/SignupForm.js
rename to client/modules/IDE/components/SignupForm.js
diff --git a/client/modules/User/pages/SignupView.js b/client/modules/IDE/components/SignupView.js
similarity index 86%
rename from client/modules/User/pages/SignupView.js
rename to client/modules/IDE/components/SignupView.js
index 3a8e6362..4b8d8562 100644
--- a/client/modules/User/pages/SignupView.js
+++ b/client/modules/IDE/components/SignupView.js
@@ -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) {
diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js
index 28f4f3ec..060cf859 100644
--- a/client/modules/IDE/pages/IDEView.js
+++ b/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>
 
     );
diff --git a/client/routes.js b/client/routes.js
index b47056bc..dbe6f9eb 100644
--- a/client/routes.js
+++ b/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="/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} />
diff --git a/client/styles/components/_login.scss b/client/styles/components/_login.scss
index aa728993..62249a6b 100644
--- a/client/styles/components/_login.scss
+++ b/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;
 }
 
diff --git a/client/styles/components/_signup.scss b/client/styles/components/_signup.scss
index aa0e49f0..06f4d98c 100644
--- a/client/styles/components/_signup.scss
+++ b/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;
 }