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 (
-
)
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 (
-
+
+
Sign Up
+
+
)
}
}
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';