Handle GitHub errors#62

app/config.js

@@ -8,8 +8,9 @@ dotenv.config({
 
 const config = {
   github: {
-    clientId: process.env.GITHUB_CLIENT_ID,
-    clientSecret: process.env.GITHUB_CLIENT_SECRET,
+    authUrl: 'https://timesheets-app.herokuapp.com/github/auth',
+    tokenUrl: 'https://timesheets-app.herokuapp.com/github/token',
+    resultUrl: 'https://timesheets-app.herokuapp.com/github/result',
     // Scopes limit access for OAuth tokens.
     scopes: [
       'repo',

app/main/createGithubAuthWindow.js

@@ -0,0 +1,54 @@
+import { BrowserWindow } from 'electron';
+import url from 'url';
+import config from '../config';
+
+const { authUrl, tokenUrl, resultUrl } = config.github;
+const tokenUrlRegex = RegExp(`^${tokenUrl}`);
+const resultUrlRegex = RegExp(`^${resultUrl}`);
+
+let authWindow;
+
+export default function createGithubAuthWindow() {
+  // Build the OAuth consent page URL
+  authWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    show: false,
+    'node-integration': false,
+  });
+  authWindow.loadURL(authUrl);
+  authWindow.show();
+
+  // Reset the authWindow on close
+  authWindow.on('close', () => {
+    authWindow = null;
+  }, false);
+
+  // TODO: move below to own module
+  return new Promise((resolve, reject) => {
+    function handleCallback(newUrl) {
+      if (tokenUrlRegex.test(newUrl)) authWindow.hide();
+      if (!resultUrlRegex.test(newUrl)) return;
+
+      authWindow.close();
+
+      const { query } = url.parse(newUrl, true);
+      const { access_token: accessToken, scope, token_type: tokenType, error } = query;
+
+      if (accessToken) {
+        resolve({ accessToken, scope, tokenType });
+      } else {
+        reject(error || 'No access token or error');
+      }
+    }
+
+
+    authWindow.webContents.on('will-navigate', (event, newUrl) => {
+      setImmediate(() => handleCallback(newUrl));
+    });
+
+    authWindow.webContents.on('did-get-redirect-request', (event, oldUrl, newUrl) => {
+      setImmediate(() => handleCallback(newUrl));
+    });
+  });
+}

app/renderer/main/components/Github/index.jsx

@@ -1,10 +1,9 @@
 /* eslint-disable max-len */
 import React, { PropTypes } from 'react';
-import { Grid, Cell } from 'react-mdl';
+import { Grid, Cell, Button } from 'react-mdl';
 import config from '../../../../config';
 import RepositoryList from './RepositoryList';
 import TrackedRepositoryList from './TrackedRepositoryList';
-import GithubAuth from './GithubAuth';
 
 // TODO: link to unlink account (remove token via API + delete from state)
 function Github({
@@ -29,13 +28,21 @@ function Github({
         <h1>Github</h1>
 
         {authRequired &&
-          <GithubAuth
-            onSubmit={({ username, password, twofa }) => requestAuthenticateGithub(username, password, twofa)}
-            github={github}
-          />
+          <div>
+            <p>Log in with Github</p>
+            <Button onClick={requestAuthenticateGithub} raised accent ripple>Connect</Button>
+          </div>
         }
 
-        {additionalScopesRequired && <div>Give me more permissions</div>}
+        {!authRequired && additionalScopesRequired &&
+          <div>
+            <p>
+              Additional permissions required:
+              <pre>{diff.join(', ')}</pre>
+            </p>
+            <Button onClick={requestAuthenticateGithub} raised accent ripple>Grant</Button>
+          </div>
+        }
 
         {!authRequired && !additionalScopesRequired &&
           <div>

app/shared/actions/github.js

@@ -1,5 +1,5 @@
 import { ALIASED } from '.';
-import githubAuth from '../../main/api/requestGithubToken';
+import githubAuth from '../../main/createGithubAuthWindow';
 import getRepos from '../../main/api/getRepos';
 import importProjects from '../../main/api/importProjects';
 import getIssuesForUser from '../../main/api/getIssuesForUser';
@@ -9,22 +9,18 @@ export const aliases = {};
 // Authenticate
 export const AUTHENTICATE_GITHUB = 'AUTHENTICATE_GITHUB';
 
-export function requestAuthenticateGithub(username, password, twofa) {
+export function requestAuthenticateGithub() {
   return {
     type: ALIASED,
-    payload: [username, password, twofa],
     meta: {
       trigger: AUTHENTICATE_GITHUB,
     },
   };
 }
-export function authenticateGithub(username, password, twofa) {
+export function authenticateGithub() {
   return {
     type: AUTHENTICATE_GITHUB,
-    payload: githubAuth(username, password, twofa),
-    meta: {
-      username,
-    },
+    payload: githubAuth(),
   };
 }
 aliases[AUTHENTICATE_GITHUB] = authenticateGithub;

app/shared/helpers/fetch/status.js

@@ -1,15 +1,3 @@
-function handleError(response) {
-  const twofa = response.headers._headers['x-github-otp'];
-  const tokenExists = response.status === 422;
-
-  const err = new Error(response.statusText);
-  if (twofa) err.twofa = true;
-  if (tokenExists) err.tokenExists = true;
-  err.response = response;
-
-  throw err;
-}
-
 /**
  * Handles non-200 statuses
  * @param  {Object} response
@@ -21,5 +9,8 @@ export default function status(response) {
     return response;
   }
 
-  handleError(response);
+  const err = new Error(response.statusText);
+  err.response = response;
+
+  throw err;
 }

app/shared/reducers/github.js

@@ -21,27 +21,24 @@ export default function github(state = initialState, action) {
   const { type, payload, error, meta } = action;
 
   switch (type) {
-    case AUTHENTICATE_GITHUB:
+    case AUTHENTICATE_GITHUB: {
       if (error) {
         return {
           ...state,
           error: true,
-          twofa: !!payload.twofa,
-          twofaFailed: !!state.twofa,
-          tokenExists: !!payload.tokenExists,
         };
       }
 
+      const { accessToken, tokenType, scope } = payload;
+
       return {
         ...state,
-        error: false,
-        twofa: false,
-        twofaFailed: false,
-        tokenExists: false,
-        accessToken: payload.token,
-        scope: payload.scopes,
+        accessToken,
+        tokenType,
+        scope: scope.split(','),
         username: meta.username,
       };
+    }
 
     case GET_GITHUB_REPOS: {
       if (error) return state;

package.json

@@ -64,9 +64,9 @@
     "electron-rebuild": "^1.1.3",
     "eslint": "^3.3.1",
     "eslint-config-airbnb": "^10.0.1",
+    "eslint-plugin-import": "^1.14.0",
     "eslint-plugin-jsx-a11y": "^2.1.0",
     "eslint-plugin-react": "^6.1.2",
-    "eslint-plugin-import": "^1.14.0",
     "express": "^4.13.4",
     "extract-text-webpack-plugin": "^1.0.1",
     "fbjs-scripts": "^0.7.1",