diff --git a/client/images/github.svg b/client/images/github.svg new file mode 100755 index 00000000..e2377654 --- /dev/null +++ b/client/images/github.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/client/modules/User/pages/LoginView.js b/client/modules/User/pages/LoginView.js index b60d9181..b47aeff6 100644 --- a/client/modules/User/pages/LoginView.js +++ b/client/modules/User/pages/LoginView.js @@ -3,12 +3,23 @@ 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'); + function LoginView(props) { return (

Login

+

Or

+ + + Login with Github +
); } diff --git a/client/styles/components/_login.scss b/client/styles/components/_login.scss index 44871382..0931c9d2 100644 --- a/client/styles/components/_login.scss +++ b/client/styles/components/_login.scss @@ -4,6 +4,7 @@ display: flex; flex-direction: column; justify-content: center; + align-items: center; } .login-form__email-input, @@ -14,3 +15,29 @@ .login-form__field { margin: #{20 / $base-font-size}rem 0; } + +.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/server/config/passport.js b/server/config/passport.js index 54d7e1cf..cf2dfd81 100644 --- a/server/config/passport.js +++ b/server/config/passport.js @@ -1,5 +1,5 @@ const passport = require('passport'); -// const GitHubStrategy = require('passport-github').Strategy; +const GitHubStrategy = require('passport-github').Strategy; const LocalStrategy = require('passport-local').Strategy; import User from '../models/user'; @@ -34,56 +34,55 @@ passport.use(new LocalStrategy({ usernameField: 'email' }, (email, password, don /** * Sign in with GitHub. */ -// TODO add github login -// passport.use(new GitHubStrategy({ -// clientID: process.env.GITHUB_ID, -// clientSecret: process.env.GITHUB_SECRET, -// callbackURL: '/auth/github/callback', -// passReqToCallback: true -// }, (req, accessToken, refreshToken, profile, done) => { -// if (req.user) { -// 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); -// } else { -// User.findById(req.user.id, (err, user) => { -// user.github = profile.id; -// user.tokens.push({ kind: 'github', accessToken }); -// user.profile.name = user.profile.name || profile.displayName; -// user.profile.picture = user.profile.picture || profile._json.avatar_url; -// user.profile.location = user.profile.location || profile._json.location; -// user.profile.website = user.profile.website || profile._json.blog; -// user.save((err) => { -// req.flash('info', { msg: 'GitHub account has been linked.' }); -// done(err, user); -// }); -// }); -// } -// }); -// } else { -// User.findOne({ github: profile.id }, (err, existingUser) => { -// if (existingUser) { -// return done(null, existingUser); -// } -// 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); -// } else { -// const user = new User(); -// user.email = profile._json.email; -// user.github = profile.id; -// user.tokens.push({ kind: 'github', accessToken }); -// user.profile.name = profile.displayName; -// user.profile.picture = profile._json.avatar_url; -// user.profile.location = profile._json.location; -// user.profile.website = profile._json.blog; -// user.save((err) => { -// done(err, user); -// }); -// } -// }); -// }); -// } -// })); +passport.use(new GitHubStrategy({ + clientID: process.env.GITHUB_ID, + clientSecret: process.env.GITHUB_SECRET, + callbackURL: '/auth/github/callback', + passReqToCallback: true +}, (req, accessToken, refreshToken, profile, done) => { + if (req.user) { + 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); + } else { + User.findById(req.user.id, (err, user) => { + user.github = profile.id; + user.tokens.push({ kind: 'github', accessToken }); + user.profile.name = user.profile.name || profile.displayName; + user.profile.picture = user.profile.picture || profile._json.avatar_url; + user.profile.location = user.profile.location || profile._json.location; + user.profile.website = user.profile.website || profile._json.blog; + user.save((err) => { + req.flash('info', { msg: 'GitHub account has been linked.' }); + done(err, user); + }); + }); + } + }); + } else { + User.findOne({ github: profile.id }, (err, existingUser) => { + if (existingUser) { + return done(null, existingUser); + } + 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); + } else { + const user = new User(); + user.email = profile._json.email; + user.github = profile.id; + user.tokens.push({ kind: 'github', accessToken }); + user.profile.name = profile.displayName; + user.profile.picture = profile._json.avatar_url; + user.profile.location = profile._json.location; + user.profile.website = profile._json.blog; + user.save((err) => { + done(err, user); + }); + } + }); + }); + } +}));