move login to OAuth for new API version

package.json

@@ -17,6 +17,7 @@
     "@material/drawer": "^0.30.0",
     "ajv": "^5.5.0",
     "axios": "^0.17.1",
+    "client-oauth2": "^4.2.0",
     "mithril": "^1.1.6",
     "mithril-infinite": "^1.2.0",
     "polythene-core-css": "^1.0.0",
@@ -25,16 +26,16 @@
     "querystring": "^0.2.0"
   },
   "devDependencies": {
-    "eslint": "^4.10.0",
-    "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-import": "^2.8.0",
-    "babel-core": "^6.26.0",
     "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.1",
-    "file-loader": "^1.1.5",
     "css-loader": "^0.28.7",
+    "eslint": "^4.10.0",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-import": "^2.9.0",
+    "file-loader": "^1.1.5",
     "style-loader": "^0.19.0",
     "webpack": "^3.8.1",
     "webpack-dev-server": "^2.9.5"

src/auth.js

+import m from 'mithril';
 import axios from 'axios';
+import ClientOAuth2 from 'client-oauth2';
 import * as localStorage from './localStorage';
 import config from './config.json';
 
-const m = require('mithril');
-
 // Object which stores the current login-state
 const APISession = {
   authenticated: false,
   token: '',
 };
 
+// OAuth Handler
+const oauth = new ClientOAuth2({
+  clientId: 'Local Tool',
+  authorizationUri: `${config.apiUrl}/oauth`,
+  redirectUri: 'http://localhost:9000/oauthcallback',
+});
+
 export function resetSession() {
   APISession.authenticated = false;
   APISession.token = '';
-  m.route.set('/login');
+  localStorage.remove('token');
+  window.location.replace(oauth.token.getUri());
 }
 
 const amivapi = axios.create({
@@ -77,27 +85,11 @@ export function getSession() {
   });
 }
 
-export function login(username, password) {
-  return new Promise((resolve, reject) => {
-    amivapi.post('sessions', { username, password })
-      .then((response) => {
-        if (response.status === 201) {
-          APISession.token = response.data.token;
-          APISession.authenticated = true;
-          localStorage.set('token', response.data.token);
-          resolve();
-        }
-        reject();
-      }).catch(reject);
-  });
-}
-
 export class ResourceHandler {
   constructor(resource, searchKeys = false) {
     this.resource = resource;
     this.searchKeys = searchKeys || config[resource].searchKeys;
     this.patchKeys = config[resource].patchableKeys;
-
     checkAuthenticated();
   }
 
@@ -250,3 +242,15 @@ export class ResourceHandler {
     });
   }
 }
+
+export class OauthRedirect {
+  view() {
+    oauth.token.getToken(m.route.get()).then((response) => {
+      APISession.authenticated = true;
+      APISession.token = response.accessToken;
+      localStorage.set('token', response.accessToken);
+      m.route.set('/users');
+    });
+    return 'redirecting...';
+  }
+}

src/config.json

 {
-    "apiUrl": "https://amiv-api.ethz.ch/",
+    "apiUrl": "https://api-dev.amiv.ethz.ch",
     "events": {
         "keyDescriptors": {
             "title_de": "German Title",

src/index.js

 import m from 'mithril';
-import LoginScreen from './login';
+import { OauthRedirect } from './auth';
 import TableView from './views/tableView';
 import { UserModal, UserTable, NewUser } from './userTool';
 import { MembershipView } from './membershipTool';
@@ -13,7 +13,6 @@ import './style';
 
 const root = document.body;
 
-
 function layoutWith(view) {
   return {
     view() {
@@ -22,6 +21,7 @@ function layoutWith(view) {
   };
 }
 
+m.route.prefix('');
 m.route(root, '/users', {
   '/users': layoutWith(UserTable),
   '/users/:id': layoutWith(UserModal),
@@ -40,6 +40,8 @@ m.route(root, '/users', {
       });
     },
   }),
-  '/login': LoginScreen,
+  '/oauthcallback': OauthRedirect,
   // '/announce': layoutWith(AnnounceTool),
 });
+
+m.route.prefix('');

src/layout.js

@@ -3,6 +3,7 @@ import '@material/drawer';
 import { List, ListTile, Icon, Toolbar, ToolbarTitle } from 'polythene-mithril';
 import { styler } from 'polythene-core-css';
 import { icons } from './views/elements';
+import { resetSession } from './auth';
 
 const layoutStyle = [
   {
@@ -65,6 +66,7 @@ export default class Layout {
       m('div.wrapper-main.smooth', [
         m(Toolbar, { className: 'main-toolbar' }, [
           m(ToolbarTitle, { text: 'AMIV Admintools' }),
+          m('a', { onclick: resetSession }, 'Logout'),
         ]),
         m(
           'nav.mdc-drawer.mdc-drawer--permanent.mdc-typography.wrapper-sidebar',
@@ -98,14 +100,6 @@ export default class Layout {
         ),
         m('div.wrapper-content', children),
       ]),
-
-    /*return m('div.wrapper-sidebar.smooth', m('div.container-fluid', [
-      m('a[href=/]', { oncreate: m.route.link }, [
-        m('img.sidebar-logo[src="res/logo/main.svg"]'),
-      ]),
-      m('ul.nav.nav-pills.nav-stacked.nav-sidebar', [
-      ]),
-    ]));*/
     ]);
   }
 }

src/localStorage.js

@@ -34,3 +34,4 @@ export function set(key, value, shortSession = false) {
     window.localStorage.setItem(`glob-${key}`, value);
   }
 }
+

src/login.js

-import { login } from './auth';
-
-const m = require('mithril');
-
-const FormState = {
-  username: '',
-  setUsername(v) { FormState.username = v; },
-  password: '',
-  setPassword(v) { FormState.password = v; },
-};
-
-export default class LoginScreen {
-  view() {
-    return m('div', { class: 'loginPanel smooth' }, [
-      m('div.col-sm-4'),
-      m('div.col-sm-4', [
-        m('img.login-logo', { src: 'res/logo/main.svg' }),
-        m('div.input-group', [
-          m('input.form-control', {
-            oninput: m.withAttr('value', FormState.setUsername),
-            placeholder: 'user',
-          }),
-          m('span.input-group-addon', '@student.ethz.ch'),
-        ]),
-        m('br'),
-        m('input.form-control', {
-          oninput: m.withAttr('value', FormState.setPassword),
-          placeholder: 'password',
-          type: 'password',
-        }),
-        m('br'),
-        m('button.btn.btn-default', {
-          onclick() {
-            login(FormState.username, FormState.password).then(() => {
-              m.route.set('/users');
-            });
-          },
-        }, 'Submit'),
-      ]),
-      m('div.col-sm-4'),
-      m('div', [
-        m('span', FormState.username),
-        m('span', FormState.password),
-      ]),
-    ]);
-  }
-}

webpack.config.js

@@ -20,6 +20,9 @@ const config = {
     port: 9000,
     hot: true,
     index: 'index.html',
+    historyApiFallback: {
+      index: 'index.html',
+    },
   },
 
   plugins: [