add github button styling, add backend for login with github
This commit is contained in:
catarak
parent
f8ab95d0dc
commit
ab576fe737
4 changed files with 97 additions and 54 deletions
6
client/images/github.svg
Executable file
6
client/images/github.svg
Executable file
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -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 (
|
||||
<div className="login">
|
||||
<h1>Login</h1>
|
||||
<LoginForm {...props} />
|
||||
<h2 className="login__divider">Or</h2>
|
||||
<a
|
||||
className="login__github-button"
|
||||
href="/auth/github"
|
||||
>
|
||||
<InlineSVG src={githubUrl} className="login__github-icon" />
|
||||
<span>Login with Github</span>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}));
|
||||
|
|
|
|||
Loading…
Reference in a new issue