r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

add github button styling, add backend for login with github

Browse source
This commit is contained in:
catarak 2016-08-31 12:28:06 -04:00
parent f8ab95d0dc
commit ab576fe737
4 changed files with 97 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/images/github.svg Executable file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

11
client/modules/User/pages/LoginView.js
View file

@ -3,12 +3,23 @@ import { bindActionCreators } from 'redux';
import { reduxForm } from 'redux-form'; import { reduxForm } from 'redux-form';
import * as UserActions from '../actions'; import * as UserActions from '../actions';
import LoginForm from '../components/LoginForm'; import LoginForm from '../components/LoginForm';
import InlineSVG from 'react-inlinesvg';
const githubUrl = require('../../../images/github.svg');
function LoginView(props) { function LoginView(props) {
return ( return (
<div className="login"> <div className="login">
<h1>Login</h1> <h1>Login</h1>
<LoginForm {...props} /> <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> </div>
); );
} }

27
client/styles/components/_login.scss
View file

@ -4,6 +4,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center;
} }
.login-form__email-input, .login-form__email-input,
@ -14,3 +15,29 @@
.login-form__field { .login-form__field {
margin: #{20 / $base-font-size}rem 0; 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;
}

107
server/config/passport.js
View file

@ -1,5 +1,5 @@
const passport = require('passport'); const passport = require('passport');
// const GitHubStrategy = require('passport-github').Strategy; const GitHubStrategy = require('passport-github').Strategy;
const LocalStrategy = require('passport-local').Strategy; const LocalStrategy = require('passport-local').Strategy;
import User from '../models/user'; import User from '../models/user';
@ -34,56 +34,55 @@ passport.use(new LocalStrategy({ usernameField: 'email' }, (email, password, don
/** /**
* Sign in with GitHub. * Sign in with GitHub.
*/ */
// TODO add github login passport.use(new GitHubStrategy({
// passport.use(new GitHubStrategy({ clientID: process.env.GITHUB_ID,
// clientID: process.env.GITHUB_ID, clientSecret: process.env.GITHUB_SECRET,
// clientSecret: process.env.GITHUB_SECRET, callbackURL: '/auth/github/callback',
// callbackURL: '/auth/github/callback', passReqToCallback: true
// passReqToCallback: true }, (req, accessToken, refreshToken, profile, done) => {
// }, (req, accessToken, refreshToken, profile, done) => { if (req.user) {
// if (req.user) { User.findOne({ github: profile.id }, (err, existingUser) => {
// User.findOne({ github: profile.id }, (err, existingUser) => { if (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.' });
// 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);
// done(err); } else {
// } else { User.findById(req.user.id, (err, user) => {
// User.findById(req.user.id, (err, user) => { user.github = profile.id;
// user.github = profile.id; user.tokens.push({ kind: 'github', accessToken });
// user.tokens.push({ kind: 'github', accessToken }); user.profile.name = user.profile.name || profile.displayName;
// user.profile.name = user.profile.name || profile.displayName; user.profile.picture = user.profile.picture || profile._json.avatar_url;
// user.profile.picture = user.profile.picture || profile._json.avatar_url; user.profile.location = user.profile.location || profile._json.location;
// user.profile.location = user.profile.location || profile._json.location; user.profile.website = user.profile.website || profile._json.blog;
// user.profile.website = user.profile.website || profile._json.blog; user.save((err) => {
// user.save((err) => { req.flash('info', { msg: 'GitHub account has been linked.' });
// req.flash('info', { msg: 'GitHub account has been linked.' }); done(err, user);
// done(err, user); });
// }); });
// }); }
// } });
// }); } else {
// } else { User.findOne({ github: profile.id }, (err, existingUser) => {
// User.findOne({ github: profile.id }, (err, existingUser) => { if (existingUser) {
// if (existingUser) { return done(null, existingUser);
// return done(null, existingUser); }
// } User.findOne({ email: profile._json.email }, (err, existingEmailUser) => {
// User.findOne({ email: profile._json.email }, (err, existingEmailUser) => { if (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.' });
// 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);
// done(err); } else {
// } else { const user = new User();
// const user = new User(); user.email = profile._json.email;
// user.email = profile._json.email; user.github = profile.id;
// user.github = profile.id; user.tokens.push({ kind: 'github', accessToken });
// user.tokens.push({ kind: 'github', accessToken }); user.profile.name = profile.displayName;
// user.profile.name = profile.displayName; user.profile.picture = profile._json.avatar_url;
// user.profile.picture = profile._json.avatar_url; user.profile.location = profile._json.location;
// user.profile.location = profile._json.location; user.profile.website = profile._json.blog;
// user.profile.website = profile._json.blog; user.save((err) => {
// user.save((err) => { done(err, user);
// done(err, user); });
// }); }
// } });
// }); });
// }); }
// } }));
// }));