Authenticate seemlessly and handle error better

64json · 64json · commit 950f5d3ab534 · 2018-07-18T21:36:46.000+09:00
diff --git a/src/backend/common/error.js b/src/backend/common/error.js
@@ -1,29 +1,29 @@
-class ApplicationError extends Error {
+class ClientError extends Error {
   toJSON() {
-    return { message: this.message };
+    return { name: this.constructor.name, message: this.message };
   }
 }
 
-class NotFoundError extends ApplicationError {
+class NotFoundError extends ClientError {
 }
 
-class PermissionError extends ApplicationError {
+class ForbiddenError extends ClientError {
 }
 
-class AuthorizationError extends ApplicationError {
+class UnauthorizedError extends ClientError {
 }
 
-class CompileError extends ApplicationError {
+class CompileError extends ClientError {
 }
 
-class RuntimeError extends ApplicationError {
+class RuntimeError extends ClientError {
 }
 
 export {
-  ApplicationError,
+  ClientError,
   NotFoundError,
-  PermissionError,
-  AuthorizationError,
+  ForbiddenError,
+  UnauthorizedError,
   CompileError,
   RuntimeError,
 };
diff --git a/src/backend/controllers/auth.js b/src/backend/controllers/auth.js
@@ -12,14 +12,12 @@ const response = (req, res, next) => {
   const { code } = req.query;
 
   GitHubApi.getAccessToken(code).then(({ access_token }) => {
-    res.cookie('access_token', access_token);
-    res.redirect('/');
+    res.send(`<script>window.opener.signIn('${access_token}');window.close();</script>`);
   }).catch(next);
 };
 
 const destroy = (req, res, next) => {
-  res.clearCookie('access_token');
-  res.redirect('/');
+  res.send(`<script>window.opener.signOut();window.close();</script>`);
 };
 
 router.route('/request')
diff --git a/src/backend/index.js b/src/backend/index.js
@@ -3,7 +3,14 @@ import morgan from 'morgan';
 import cookieParser from 'cookie-parser';
 import bodyParser from 'body-parser';
 import * as controllers from '/controllers';
-import { AuthorizationError, CompileError, NotFoundError, PermissionError, RuntimeError } from '/common/error';
+import {
+  ClientError,
+  CompileError,
+  ForbiddenError,
+  NotFoundError,
+  RuntimeError,
+  UnauthorizedError,
+} from '/common/error';
 
 const app = express();
 app.use(morgan('tiny'));
@@ -14,19 +21,17 @@ Object.keys(controllers).forEach(key => app.use(`/${key}`, controllers[key]));
 app.use((req, res, next) => next(new NotFoundError()));
 app.use((err, req, res, next) => {
   const statusMap = [
-    [AuthorizationError, 401],
-    [PermissionError, 403],
+    [UnauthorizedError, 401],
+    [ForbiddenError, 403],
     [NotFoundError, 404],
     [CompileError, 422],
     [RuntimeError, 422],
+    [ClientError, 400],
     [Error, 500],
   ];
   const [, status] = statusMap.find(([Error]) => err instanceof Error);
   res.status(status);
-  res.json({
-    status,
-    err,
-  });
+  res.json(err);
   console.error(err);
 });
 
diff --git a/src/frontend/apis/index.js b/src/frontend/apis/index.js
@@ -1,11 +1,10 @@
 import Promise from 'bluebird';
 import axios from 'axios';
 
-axios.interceptors.response.use(response => {
-  return response.data;
-}, error => {
-  return Promise.reject(error.response.data);
-});
+axios.interceptors.response.use(
+  response => response.data,
+  error => Promise.reject(error.response.data),
+);
 
 const request = (url, process) => {
   const tokens = url.split('/');
@@ -59,7 +58,7 @@ const CategoryApi = {
 };
 
 const GitHubApi = {
-  auth: token => Promise.resolve(axios.defaults.headers.common['Authorization'] = `token ${token}`),
+  auth: token => Promise.resolve(axios.defaults.headers.common['Authorization'] = token && `token ${token}`),
   getUser: GET('https://api.github.com/user'),
   listGists: GET('https://api.github.com/gists'),
   createGist: POST('https://api.github.com/gists'),
@@ -74,7 +73,7 @@ const TracerApi = {
     if (jsWorker) jsWorker.terminate();
     jsWorker = new Worker('/api/tracers/js');
     jsWorker.onmessage = e => resolve(e.data);
-    jsWorker.onerror = err => reject({ status: 422, err });
+    jsWorker.onerror = reject;
     jsWorker.postMessage(code);
   }),
   java: POST('/tracers/java'),
diff --git a/src/frontend/components/App/index.jsx b/src/frontend/components/App/index.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Cookies from 'js-cookie';
 import { connect } from 'react-redux';
 import Promise from 'bluebird';
 import AutosizeInput from 'react-input-autosize';
@@ -40,26 +41,25 @@ class App extends React.Component {
   }
 
   componentDidMount() {
+    window.signIn = this.signIn.bind(this);
+    window.signOut = this.signOut.bind(this);
+
     this.loadAlgorithm(this.props.match.params);
 
-    const { accessToken } = this.props.env;
-    if (accessToken) {
-      GitHubApi.auth(accessToken)
-        .then(() => GitHubApi.getUser())
-        .then(user => {
-          const { login, avatar_url } = user;
-          this.props.setUser({ login, avatar_url });
-        })
-        .then(() => this.loadScratchPapers());
-    }
+    const accessToken = Cookies.get('access_token');
+    if (accessToken) this.signIn(accessToken);
 
     CategoryApi.getCategories()
-      .then(({ categories }) => this.props.setCategories(categories));
+      .then(({ categories }) => this.props.setCategories(categories))
+      .catch(this.props.showErrorToast);
 
-    tracerManager.setOnError(error => this.props.showErrorToast(error.message));
+    tracerManager.setOnError(error => this.props.showErrorToast({ name: error.name, message: error.message }));
   }
 
   componentWillUnmount() {
+    delete window.signIn;
+    delete window.signOut;
+
     tracerManager.setOnError(null);
   }
 
@@ -83,6 +83,25 @@ class App extends React.Component {
     }
   }
 
+  signIn(accessToken) {
+    Cookies.set('access_token', accessToken);
+    GitHubApi.auth(accessToken)
+      .then(() => GitHubApi.getUser())
+      .then(user => {
+        const { login, avatar_url } = user;
+        this.props.setUser({ login, avatar_url });
+      })
+      .then(() => this.loadScratchPapers())
+      .catch(() => this.signOut());
+  }
+
+  signOut() {
+    Cookies.remove('access_token');
+    GitHubApi.auth(undefined)
+      .then(() => this.props.setUser(undefined))
+      .then(() => this.props.setScratchPapers([]));
+  }
+
   loadScratchPapers() {
     const per_page = 100;
     const paginateGists = (page = 1, scratchPapers = []) => GitHubApi.listGists({
@@ -101,7 +120,9 @@ class App extends React.Component {
         return paginateGists(page + 1, scratchPapers);
       }
     });
-    return paginateGists().then(scratchPapers => this.props.setScratchPapers(scratchPapers));
+    return paginateGists()
+      .then(scratchPapers => this.props.setScratchPapers(scratchPapers))
+      .catch(this.props.showErrorToast);
   }
 
   loadAlgorithm({ categoryKey, algorithmKey, gistId }) {
diff --git a/src/frontend/components/Header/index.jsx b/src/frontend/components/Header/index.jsx
@@ -84,13 +84,17 @@ class Header extends React.Component {
     savePromise
       .then(refineGist)
       .then(algorithm => this.props.setCurrent(categoryKey, algorithmKey, algorithm.gistId, algorithm.titles, algorithm.files))
-      .then(this.props.loadScratchPapers);
+      .then(this.props.loadScratchPapers)
+      .catch(this.props.showErrorToast);
   }
 
   deleteGist() {
     const { gistId } = this.props.current;
     const deletePromise = gistId === 'new' ? Promise.resolve() : GitHubApi.deleteGist(gistId);
-    deletePromise.then(() => this.props.loadAlgorithm({})).then(this.props.loadScratchPapers);
+    deletePromise
+      .then(() => this.props.loadAlgorithm({}))
+      .then(this.props.loadScratchPapers)
+      .catch(this.props.showErrorToast);
   }
 
   isGistSaved() {
@@ -129,7 +133,8 @@ class Header extends React.Component {
           <div className={styles.section}>
             <Button icon={faSave} primary disabled={!gistId || this.isGistSaved()}
                     onClick={() => this.saveGist()}>Save</Button>
-            <Button icon={faTrashAlt} primary disabled={!gistId} onClick={() => this.deleteGist()} confirmNeeded>Delete</Button>
+            <Button icon={faTrashAlt} primary disabled={!gistId} onClick={() => this.deleteGist()}
+                    confirmNeeded>Delete</Button>
             <Button icon={faShare} primary disabled={gistId === 'new'} onClick={() => this.shareLink()}>Share</Button>
             <Button icon={faExpandArrowsAlt} primary
                     onClick={() => this.handleClickFullScreen()}>Fullscreen</Button>
@@ -142,10 +147,10 @@ class Header extends React.Component {
                 <Button className={styles.btn_dropdown} icon={user.avatar_url}>
                   {user.login}
                   <div className={styles.dropdown}>
-                    <ListItem href="/api/auth/destroy" label="Sign Out" />
+                    <ListItem label="Sign Out" href="/api/auth/destroy" rel="nofollow" />
                   </div>
                 </Button> :
-                <Button icon={faGithub} primary href="/api/auth/request">
+                <Button icon={faGithub} primary href="/api/auth/request" rel="nofollow">
                   <Ellipsis>Sign In</Ellipsis>
                 </Button>
             }
diff --git a/src/frontend/components/Navigator/index.jsx b/src/frontend/components/Navigator/index.jsx
@@ -108,21 +108,16 @@ class Navigator extends React.Component {
           }
         </div>
         <div className={styles.footer}>
-          {
-            user ?
-              <ExpandableListItem icon={faCode} label="Scratch Paper" onClick={() => this.toggleScratchPaper()}
-                                  opened={scratchPaperOpened}>
-                <ListItem indent label="New ..." onClick={() => loadAlgorithm({ gistId: 'new' })} />
-                {
-                  scratchPapers.map(scratchPaper => (
-                    <ListItem indent key={scratchPaper.key} selected={scratchPaper.key === gistId}
-                              onClick={() => loadAlgorithm({ gistId: scratchPaper.key })} label={scratchPaper.name} />
-                  ))
-                }
-              </ExpandableListItem> :
-              <ListItem icon={faCode} label="Scratch Paper"
-                        onClick={() => this.props.showSuccessToast('Sign In Required')} />
-          }
+          <ExpandableListItem icon={faCode} label="Scratch Paper" onClick={() => this.toggleScratchPaper()}
+                              opened={scratchPaperOpened}>
+            <ListItem indent label="New ..." onClick={() => loadAlgorithm({ gistId: 'new' })} />
+            {
+              scratchPapers.map(scratchPaper => (
+                <ListItem indent key={scratchPaper.key} selected={scratchPaper.key === gistId}
+                          onClick={() => loadAlgorithm({ gistId: scratchPaper.key })} label={scratchPaper.name} />
+              ))
+            }
+          </ExpandableListItem>
           <ListItem icon={faBook} label="Tracers API"
                     href="https://github.com/algorithm-visualizer/tracers/wiki" />
           <ListItem icon={faGithub} label="Fork me on GitHub"
diff --git a/src/frontend/core/tracerManager.jsx b/src/frontend/core/tracerManager.jsx
@@ -156,10 +156,7 @@ class TracerManager {
     const { name, content } = this.file;
     const ext = extension(name);
     if (ext in TracerApi) {
-      return TracerApi[ext]({ code: content })
-        .catch(e => {
-          throw e.err;
-        });
+      return TracerApi[ext]({ code: content });
     } else {
       return Promise.reject(new Error('Language Not Supported'));
     }
diff --git a/src/frontend/reducers/env.js b/src/frontend/reducers/env.js
@@ -15,7 +15,6 @@ export const actions = {
 };
 
 const defaultState = {
-  accessToken: Cookies.get('access_token'),
   ext: Cookies.get('ext') || 'js',
   user: undefined,
 };
diff --git a/src/frontend/reducers/toast.js b/src/frontend/reducers/toast.js
@@ -4,7 +4,10 @@ import uuid from 'uuid';
 const prefix = 'TOAST';
 
 const showSuccessToast = createAction(`${prefix}/SHOW_SUCCESS_TOAST`, message => ({ type: 'success', message }));
-const showErrorToast = createAction(`${prefix}/SHOW_ERROR_TOAST`, message => ({ type: 'error', message }));
+const showErrorToast = createAction(`${prefix}/SHOW_ERROR_TOAST`, error => ({
+  type: 'error',
+  message: [error.name, error.message].filter(v => v).join(': '),
+}));
 const hideToast = createAction(`${prefix}/HIDE_TOAST`, id => ({ id }));
 
 export const actions = {

Original file line number	Diff line number	Diff line change
`@@ -1,29 +1,29 @@`
`1`		`-class ApplicationError extends Error {`
	`1`	`+class ClientError extends Error {`
`2`	`2`	`toJSON() {`
`3`		`- return { message: this.message };`
	`3`	`+ return { name: this.constructor.name, message: this.message };`
`4`	`4`	`}`
`5`	`5`	`}`
`6`	`6`
`7`		`-class NotFoundError extends ApplicationError {`
	`7`	`+class NotFoundError extends ClientError {`
`8`	`8`	`}`
`9`	`9`
`10`		`-class PermissionError extends ApplicationError {`
	`10`	`+class ForbiddenError extends ClientError {`
`11`	`11`	`}`
`12`	`12`
`13`		`-class AuthorizationError extends ApplicationError {`
	`13`	`+class UnauthorizedError extends ClientError {`
`14`	`14`	`}`
`15`	`15`
`16`		`-class CompileError extends ApplicationError {`
	`16`	`+class CompileError extends ClientError {`
`17`	`17`	`}`
`18`	`18`
`19`		`-class RuntimeError extends ApplicationError {`
	`19`	`+class RuntimeError extends ClientError {`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`export {`
`23`		`- ApplicationError,`
	`23`	`+ ClientError,`
`24`	`24`	`NotFoundError,`
`25`		`- PermissionError,`
`26`		`- AuthorizationError,`
	`25`	`+ ForbiddenError,`
	`26`	`+ UnauthorizedError,`
`27`	`27`	`CompileError,`
`28`	`28`	`RuntimeError,`
`29`	`29`	`};`