From 7a8e77282d2c4d8bfd92942462faae53cb0c2ab1 Mon Sep 17 00:00:00 2001 From: catarak Date: Wed, 31 Aug 2016 15:12:18 -0400 Subject: [PATCH] add github login and signup --- .../modules/User/components/GithubButton.js | 21 ++++++++++++++++++ client/modules/User/pages/LoginView.js | 11 ++-------- client/modules/User/pages/SignupView.js | 3 +++ client/styles/components/_github-button.scss | 21 ++++++++++++++++++ client/styles/components/_login.scss | 22 ------------------- client/styles/components/_signup.scss | 5 +++++ client/styles/main.scss | 1 + server/config/passport.js | 12 +++++----- 8 files changed, 58 insertions(+), 38 deletions(-) create mode 100644 client/modules/User/components/GithubButton.js create mode 100644 client/styles/components/_github-button.scss diff --git a/client/modules/User/components/GithubButton.js b/client/modules/User/components/GithubButton.js new file mode 100644 index 00000000..5bb2e283 --- /dev/null +++ b/client/modules/User/components/GithubButton.js @@ -0,0 +1,21 @@ +import InlineSVG from 'react-inlinesvg'; +const githubUrl = require('../../../images/github.svg'); +import React, { PropTypes } from 'react'; + +function GithubButton(props) { + return ( + + + {props.buttonText} + + ); +} + +GithubButton.propTypes = { + buttonText: PropTypes.string.isRequired +}; + +export default GithubButton; diff --git a/client/modules/User/pages/LoginView.js b/client/modules/User/pages/LoginView.js index b47aeff6..bf0cc918 100644 --- a/client/modules/User/pages/LoginView.js +++ b/client/modules/User/pages/LoginView.js @@ -3,8 +3,7 @@ import { bindActionCreators } from 'redux'; import { reduxForm } from 'redux-form'; import * as UserActions from '../actions'; import LoginForm from '../components/LoginForm'; -import InlineSVG from 'react-inlinesvg'; -const githubUrl = require('../../../images/github.svg'); +import GithubButton from '../components/GithubButton'; function LoginView(props) { @@ -13,13 +12,7 @@ function LoginView(props) {

Login

Or

- - - Login with Github - + ); } diff --git a/client/modules/User/pages/SignupView.js b/client/modules/User/pages/SignupView.js index a7ec9ef3..795c41c4 100644 --- a/client/modules/User/pages/SignupView.js +++ b/client/modules/User/pages/SignupView.js @@ -3,12 +3,15 @@ import { bindActionCreators } from 'redux'; import * as UserActions from '../actions'; import { reduxForm } from 'redux-form'; import SignupForm from '../components/SignupForm'; +import GithubButton from '../components/GithubButton'; function SignupView(props) { return (

Sign Up

+

Or

+
); } diff --git a/client/styles/components/_github-button.scss b/client/styles/components/_github-button.scss new file mode 100644 index 00000000..6013fd08 --- /dev/null +++ b/client/styles/components/_github-button.scss @@ -0,0 +1,21 @@ +.github-button { + @extend %button; + width: #{300 / $base-font-size}rem; + display: flex; + justify-content: center; + align-items: center; + & path { + color: $light-primary-text-color; + } + &:hover path, &:active path { + fill: $white; + } + &:hover, &:active { + background-color: $light-secondary-text-color; + border-color: $light-secondary-text-color + } +} + +.github-icon { + margin-right: #{10 / $base-font-size}rem; +} diff --git a/client/styles/components/_login.scss b/client/styles/components/_login.scss index 0931c9d2..aa728993 100644 --- a/client/styles/components/_login.scss +++ b/client/styles/components/_login.scss @@ -19,25 +19,3 @@ .login__divider { padding: #{20 / $base-font-size}rem 0; } - -.login__github-button { - @extend %button; - width: #{300 / $base-font-size}rem; - display: flex; - justify-content: center; - align-items: center; - & path { - color: $light-primary-text-color; - } - &:hover path, &:active path { - fill: $white; - } - &:hover, &:active { - background-color: $light-secondary-text-color; - border-color: $light-secondary-text-color - } -} - -.login__github-icon { - margin-right: #{10 / $base-font-size}rem; -} diff --git a/client/styles/components/_signup.scss b/client/styles/components/_signup.scss index 6aee6e75..aa0e49f0 100644 --- a/client/styles/components/_signup.scss +++ b/client/styles/components/_signup.scss @@ -4,6 +4,7 @@ display: flex; flex-direction: column; justify-content: center; + align-items: center; } .signup-form__username-input, @@ -16,3 +17,7 @@ .signup-form__field { margin: #{20 / $base-font-size}rem 0; } + +.signup__divider { + padding: #{20 / $base-font-size}rem 0; +} diff --git a/client/styles/main.scss b/client/styles/main.scss index be6f4a1f..d5a48f07 100644 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -23,6 +23,7 @@ @import 'components/resizer'; @import 'components/overlay'; @import 'components/about'; +@import 'components/github-button'; @import 'layout/ide'; @import 'layout/sketch-list'; diff --git a/server/config/passport.js b/server/config/passport.js index cccaea88..557d70f3 100644 --- a/server/config/passport.js +++ b/server/config/passport.js @@ -41,10 +41,10 @@ passport.use(new GitHubStrategy({ passReqToCallback: true }, (req, accessToken, refreshToken, profile, done) => { if (req.user) { + // the user should actually never get here. User.findOne({ github: profile.id }, (err, existingUser) => { if (existingUser) { - req.flash('errors', { msg: 'There is already a GitHub account that belongs to you. Sign in with that account or delete it, then link it with your current account.' }); - done(err); + return res.json({'errors', { msg: 'There is already a GitHub account that belongs to you. Sign in with that account or delete it, then link it with your current account.' }}); } else { User.findById(req.user.id, (err, user) => { user.email = user.email || profile._json.email; @@ -53,8 +53,7 @@ passport.use(new GitHubStrategy({ user.tokens.push({ kind: 'github', accessToken }); user.name = user.name || profile.displayName; user.save((err) => { - req.flash('info', { msg: 'GitHub account has been linked.' }); - done(err, user); + return res.json({'info', { msg: 'GitHub account has been linked.' }}); }); }); } @@ -66,8 +65,7 @@ passport.use(new GitHubStrategy({ } User.findOne({ email: profile._json.email }, (err, existingEmailUser) => { if (existingEmailUser) { - req.flash('errors', { msg: 'There is already an account using this email address. Sign in to that account and link it with GitHub manually from Account Settings.' }); - done(err); + return res.json('errors', { msg: 'There is already an account using this email address. Sign in to that account and link it with GitHub manually from Account Settings.' }); } else { const user = new User(); user.email = profile._json.email; @@ -76,7 +74,7 @@ passport.use(new GitHubStrategy({ user.tokens.push({ kind: 'github', accessToken }); user.name = profile.displayName; user.save((err) => { - done(err, user); + return res.json({'info', { msg: 'Account has been created with GitHub credentials.' }}); }); } });