add github login and signup

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 (
+    <a
+      className="github-button"
+      href="/auth/github"
+    >
+      <InlineSVG src={githubUrl} className="github-icon" />
+      <span>{props.buttonText}</span>
+    </a>
+  );
+}
+
+GithubButton.propTypes = {
+  buttonText: PropTypes.string.isRequired
+};
+
+export default GithubButton;

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';
+import GithubButton from '../components/GithubButton';
-const githubUrl = require('../../../images/github.svg');
 
 
 function LoginView(props) {
@@ -13,13 +12,7 @@ function LoginView(props) {
       <h1>Login</h1>
       <LoginForm {...props} />
       <h2 className="login__divider">Or</h2>
-      <a
+      <GithubButton buttonText="Login with Github" />
-        className="login__github-button"
-        href="/auth/github"
-      >
-        <InlineSVG src={githubUrl} className="login__github-icon" />
-        <span>Login with Github</span>
-      </a>
     </div>
   );
 }

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 (
     <div className="signup">
       <h1>Sign Up</h1>
       <SignupForm {...props} />
+      <h2 className="signup__divider">Or</h2>
+      <GithubButton buttonText="Sign Up with Github" />
     </div>
   );
 }

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;
+}

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

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;
+}

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

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.' });
+        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.' }});
-        done(err);
       } 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.' });
+            return res.json({'info', { msg: 'GitHub account has been linked.' }});
-            done(err, user);
           });
         });
       }
@@ -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.' });
+          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.' });
-          done(err);
         } 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.' }});
           });
         }
       });