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';