From a79391c96c3bb5afdc58ebb127a71e303ff9a3dd Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Mon, 13 Jun 2016 21:07:00 -0400
Subject: [PATCH] add signup for styling

---
 package.json                                |  2 ++
 shared/components/SignupForm/SignupForm.jsx | 22 ++++++++++++++++-----
 shared/containers/SignupView/SignupView.jsx |  5 ++++-
 styles/abstracts/_placeholders.scss         | 19 ++++++++++++++++++
 styles/abstracts/_variables.scss            |  2 ++
 styles/base/_base.scss                      | 18 +++++++++++++++--
 styles/components/_signup.scss              | 21 ++++++++++++++++++++
 styles/main.scss                            |  1 +
 8 files changed, 82 insertions(+), 8 deletions(-)
 create mode 100644 styles/components/_signup.scss

diff --git a/package.json b/package.json
index 8de5002d..0d1de282 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "cookie-parser": "^1.4.1",
     "dotenv": "^2.0.0",
     "express": "^4.13.4",
+    "express-session": "^1.13.0",
     "mongoose": "^4.4.16",
     "passport": "^0.3.2",
     "passport-github": "^1.1.0",
@@ -51,6 +52,7 @@
     "react-dom": "^15.0.2",
     "react-inlinesvg": "^0.4.2",
     "react-redux": "^4.4.5",
+    "react-router": "^2.4.1",
     "redux": "^3.5.2",
     "redux-form": "^5.2.5",
     "redux-thunk": "^2.1.0"
diff --git a/shared/components/SignupForm/SignupForm.jsx b/shared/components/SignupForm/SignupForm.jsx
index 29aceab1..2caad118 100644
--- a/shared/components/SignupForm/SignupForm.jsx
+++ b/shared/components/SignupForm/SignupForm.jsx
@@ -4,11 +4,23 @@ class SignupForm extends React.Component {
 	render() {
 		const {fields: { username, email, password, confirmPassword }, handleSubmit} = this.props;
 		return (
-			<form onSubmit={handleSubmit(this.props.signUpUser.bind(this))}>
-				<input type="text" placeholder="Username" {...username}/>
-				<input type="text" placeholder="Email" {...email}/>
-				<input type="password" placeholder="Password" {...password}/>
-				<input type="password" placeholder="Confirm Password" {...confirmPassword}/>
+			<form className="signup-form" onSubmit={handleSubmit(this.props.signUpUser.bind(this))}>
+				<p>
+					<label className="signup-form__username-label" for="username">Username:</label>
+					<input className="signup-form__username-input" id="username" type="text" placeholder="Username" {...username}/>
+				</p>
+				<p>
+					<label className="signup-form__email-label" for="email">Email:</label>
+					<input className="signup-form__email-input" id="email" type="text" placeholder="Email" {...email}/>
+				</p>
+				<p>
+					<label className="signup-form__password-label" for="password">Password:</label>
+					<input className="signup-form__password-input" id="password" type="password" placeholder="Password" {...password}/>
+				</p>
+				<p>
+					<label className="signup-form__confirm-password-label" for="confirm-password">Confirm Password:</label>
+					<input className="signup-form__confirm-password-input" id="confirm-password" type="password" placeholder="Confirm Password" {...confirmPassword}/>
+				</p>
 				<input type="submit" value="Sign Up" />
 			</form>
 		)
diff --git a/shared/containers/SignupView/SignupView.jsx b/shared/containers/SignupView/SignupView.jsx
index 00018e9e..fdfc83b8 100644
--- a/shared/containers/SignupView/SignupView.jsx
+++ b/shared/containers/SignupView/SignupView.jsx
@@ -8,7 +8,10 @@ import SignupForm from '../../components/SignupForm/SignupForm'
 class SignupView extends React.Component {
 	render() {
 		return (
-			<SignupForm {...this.props} />
+			<div className="signup">
+				<h1>Sign Up</h1>
+				<SignupForm {...this.props} />
+			</div>
 		)
 	}
 }
diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss
index 348d1ac5..f26b6701 100644
--- a/styles/abstracts/_placeholders.scss
+++ b/styles/abstracts/_placeholders.scss
@@ -33,6 +33,25 @@
   }
 }
 
+%button {
+	background-color: $light-button-background-color;
+	color: $light-button-color;
+	cursor: pointer;
+	border: 1px solid $light-button-border-color;
+	border-radius: 2px;
+	padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
+	&:hover {
+		border-color: $light-button-background-hover-color;
+		background-color: $light-button-background-hover-color;
+		color: $light-button-hover-color;
+	}
+	&:active {
+		border-color: $light-button-background-active-color;
+		background-color: $light-button-background-active-color;
+		color: $light-button-active-color;
+	}
+}
+
 %preferences-button {
 	@extend %button;
 	background-color: $light-preferences-button-background-color;
diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss
index 25a0d322..e9339586 100644
--- a/styles/abstracts/_variables.scss
+++ b/styles/abstracts/_variables.scss
@@ -14,6 +14,7 @@ $light-background-color: #fdfdfd;
 
 $light-button-background-color: #f4f4f4;
 $light-button-color: $black;
+$light-button-border-color: #979797;
 $light-toolbar-button-color: $p5js-pink;
 $light-button-background-hover-color: $p5js-pink;
 $light-button-background-active-color: #f10046;
@@ -35,6 +36,7 @@ $dark-button-active-color: $white;
 
 $editor-border-color: #f4f4f4;
 $editor-selected-line-color: #f3f3f3;
+$input-border-color: #979797;
 
 $light-preferences-background-color: #f4f4f4;
 
diff --git a/styles/base/_base.scss b/styles/base/_base.scss
index 9cddec36..5351ee8b 100644
--- a/styles/base/_base.scss
+++ b/styles/base/_base.scss
@@ -2,11 +2,11 @@
 	box-sizing: border-box;
 }
 
-html {
+html, body {
 	font-size: #{$base-font-size}px;
 }
 
-body {
+body, input, button {
 	font-family: Montserrat, sans-serif;
 	color: $light-primary-text-color;
 }
@@ -23,4 +23,18 @@ a {
 		text-decoration: none;
 		color: $light-primary-text-color;
 	}
+}
+
+input, button {
+	font-size: 1rem;
+}
+
+input {
+	padding: #{5 / $base-font-size}rem;
+	border-radius: 2px;
+	border: 1px solid $input-border-color;
+}
+
+button, input[type="submit"] {
+	@extend %button;
 }
\ No newline at end of file
diff --git a/styles/components/_signup.scss b/styles/components/_signup.scss
new file mode 100644
index 00000000..3e5bd2c8
--- /dev/null
+++ b/styles/components/_signup.scss
@@ -0,0 +1,21 @@
+.signup {
+	text-align: center;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.signup-form__username-label, 
+.signup-form__email-label,
+.signup-form__password-label,
+.signup-form__confirm-password-label {
+	display: none;
+}
+
+.signup-form__username-input, 
+.signup-form__email-input,
+.signup-form__password-input,
+.signup-form__confirm-password-input {
+	width: #{300 / $base-font-size}rem;
+}
\ No newline at end of file
diff --git a/styles/main.scss b/styles/main.scss
index 573a2614..5cd91b77 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -11,5 +11,6 @@
 @import 'components/nav';
 @import 'components/toolbar';
 @import 'components/preferences';
+@import 'components/signup';
 
 @import 'layout/ide';