Added login

.eslintrc.js

@@ -7,5 +7,6 @@ module.exports = {
     "rules": {
         "no-multi-str": 0,
         "no-underscore-dangle": 0,
+        "no-console": 0
     },
 };
\ No newline at end of file

src/index.js

 // src/index.js
 const m = require('mithril');
-const Layout = require('./layout');
-const amiv = require('./amiv');
+const Layout = require('./views/layout');
+const amiv = require('./views/amiv');
+const login = require('./views/login');
 
 m.route(document.body, '/', {
   '/': {
@@ -9,4 +10,9 @@ m.route(document.body, '/', {
       return m(Layout, m(amiv));
     },
   },
+  '/login': {
+    render() {
+      return m(Layout, m(login));
+    },
+  },
 });

src/layout.js

-const m = require('mithril');
-
-module.exports = {
-  view(vnode) {
-    return m('div', [
-      m('nav', [
-        m('a', { href: '/' }, 'AMIV'),
-        m('a', { href: '/events' }, 'Events'),
-        m('a', { href: '/studydocuments' }, 'Studienunterlagen'),
-        m('a', { href: '/jobs' }, 'Jobs'),
-        m('a', { href: '/profile' }, 'Profil'),
-      ]),
-      m('main', vnode.children),
-    ]);
-  },
-};

src/models/auth.js

+const m = require('mithril');
+const Config = require('./config');
+const log = require('./log');
+
+const auth = {
+  username: '',
+  token: '',
+  etag: '',
+  error: '',
+  id: '',
+  authenticated: false,
+  lastChecked: 0,
+  login(username, password) {
+    this.reloadLocalStorage();
+    return m.request({
+      method: 'POST',
+      url: `${Config.api_url}/sessions`,
+      data: { username, password },
+    }).then((result) => {
+      const dt = new Date();
+      log.log('logged in!');
+      this.token = result.token;
+      this.etag = result._etag;
+      this.id = result._id;
+      this.authenticated = true;
+      this.username = username;
+      localStorage.setItem('token', result.token);
+      localStorage.setItem('username', username);
+      localStorage.setItem('id', result._id);
+      localStorage.setItem('etag', result._etag);
+      this.lastChecked = dt.getTime();
+      m.route.set('/');
+    }).catch((e) => {
+      this.error = e.message;
+    });
+  },
+  logout() {
+    this.reloadLocalStorage();
+    this.authenticated = false;
+    return m.request({
+      method: 'DELETE',
+      url: `${Config.api_url}/sessions/${this.id}`,
+      headers: {
+        Authorization: `Token ${this.token}`,
+        'If-Match': this.etag,
+      },
+    }).then(() => {
+      log.log('logged out!');
+      this.token = '';
+      this.authenticated = false;
+      this.error = '';
+      localStorage.removeItem('token');
+      localStorage.removeItem('username');
+      localStorage.removeItem('id');
+      localStorage.removeItem('etag');
+      m.route.set('/login');
+    }).catch((e) => {
+      this.error = e.message;
+      this.authenticated = false;
+      m.route.set('/login');
+    });
+  },
+  checkLogin() {
+    const dt = new Date();
+    auth.reloadLocalStorage();
+    if (this.authenticated === true) {
+      log.log('no session found');
+      m.route.set('/login');
+      return new Promise(() => { });
+    }
+    if (dt.getTime() > this.lastChecked + 5000) {
+      return m.request({
+        method: 'GET',
+        url: `${Config.api_url}/sessions/${this.token}`,
+      }).then((result) => {
+        const dt2 = new Date();
+        log.log('session is still valid!');
+        this.authenticated = true;
+        this.etag = result._etag;
+        this.lastChecked = dt2.getTime();
+      }).catch((e) => {
+        log.log('token is not valid');
+        log.log(e);
+        this.authenticated = false;
+        localStorage.removeItem('session');
+        localStorage.removeItem('username');
+        localStorage.removeItem('id');
+        localStorage.removeItem('etag');
+        m.route.set('/login');
+      });
+    }
+    return new Promise(() => { });
+  },
+  reloadLocalStorage() {
+    log.log('checking stored session');
+    if (localStorage.getItem('token') !== null) {
+      this.token = localStorage.token;
+      this.id = localStorage.id;
+      this.username = localStorage.username;
+      this.etag = localStorage.etag;
+      this.authenticated = true;
+    }
+  },
+};
+
+module.exports = auth;

src/models/config.js

+
+const Config = {
+  api_url: 'https://amiv-api.ethz.ch',
+  verbose: true,
+};
+
+module.exports = Config;

src/models/log.js

+const config = require('./config.js');
+
+const log = {
+  log(message) {
+    if (config.verbose === true) console.log(message);
+  },
+};
+
+module.exports = log;

src/views/layout.js

+const m = require('mithril');
+const auth = require('../models/auth');
+
+module.exports = {
+  oninit: auth.checkLogin,
+  view(vnode) {
+    if (auth.authenticated === false) {
+      return m('div', [
+        m('nav', [
+          m('a', { href: '/' }, 'AMIV'),
+          m('a', { href: '/#!/events' }, 'Events'),
+          m('a', { href: '/#!/studydocuments' }, 'Studienunterlagen'),
+          m('a', { href: '/#!/jobs' }, 'Jobs'),
+          m('a', { href: '/#!/login' }, 'Login'),
+        ]),
+        m('main', vnode.children),
+      ]);
+    }
+    return m('div', [
+      m('nav', [
+        m('a', { href: '/' }, 'AMIV'),
+        m('a', { href: '/#!/events' }, 'Events'),
+        m('a', { href: '/#!/studydocuments' }, 'Studienunterlagen'),
+        m('a', { href: '/#!/jobs' }, 'Jobs'),
+        m('a', { href: '/#!/profile' }, 'Profil'),
+        m('a', {
+          href: '#',
+          onclick: () => {
+            auth.logout();
+            return false;
+          },
+        }, 'Logout'),
+      ]),
+      m('main', vnode.children),
+    ]);
+  },
+};

src/views/login.js

+const m = require('mithril');
+const Auth = require('../models/auth');
+
+module.exports = {
+  username: '',
+  password: '',
+  view() {
+    return m('div', [
+      m(
+        'form', {
+          onsubmit: (e) => {
+            e.preventDefault();
+            Auth.login(this.username, this.password);
+          },
+        },
+        m('h3', 'Login'), [
+          m('p', Auth.error),
+          m('input.input[type=text][placeholder=Username]', {
+            oninput: m.withAttr('value', (value) => { this.username = value; }),
+            value: this.username,
+          }),
+          m('input.input[placeholder=Password][type=password]', {
+            oninput: m.withAttr('value', (value) => { this.password = value; }),
+            value: this.password,
+          }),
+          m('button.button[type=submit]', 'Login'),
+        ],
+      ),
+    ]);
+  },
+};