add signup for styling

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"

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

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>
 		)
 	}
 }

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;

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;
 

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;
 }
@@ -24,3 +24,17 @@ a {
 		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;
+}

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

styles/main.scss

@@ -11,5 +11,6 @@
 @import 'components/nav';
 @import 'components/toolbar';
 @import 'components/preferences';
+@import 'components/signup';
 
 @import 'layout/ide';