Add profile page

* Add user info
* Add RFID form
* Add announce (un-)subscribe button

src/index.js

@@ -3,6 +3,7 @@ import studydocList from './views/studydocList';
 import studydocNew from './views/studydocNew';
 import eventList from './views/eventList';
 import eventDetails from './views/eventDetails';
+import profile from './views/profile';
 
 const m = require('mithril');
 
@@ -67,4 +68,9 @@ m.route(document.body, '/', {
       return m(Layout, m(eventDetails, vnode.attrs));
     },
   },
+  '/profile': {
+    render(vnode) {
+      return m(Layout, m(profile, vnode.attrs));
+    },
+  },
 });

src/models/user.js

+import { apiUrl } from './config';
+import { getToken, getUserId } from './auth';
+import { log, error } from './log';
+
+const m = require('mithril');
+
+// update data of logged in user
+export function update(options) {
+  log(this.user._etag);
+
+  return m.request({
+    method: 'PATCH',
+    url: `${apiUrl}/users/${getUserId()}`,
+    headers: getToken() ? {
+      Authorization: `Token ${getToken()}`,
+      'If-Match': this.user._etag,
+    } : { 'If-Match': this.user._etag },
+    data: options,
+  }).then((result) => {
+    this.user = result;
+  }).catch((e) => {
+    error(e.message);
+  });
+}
+
+// get available data of logged in user
+export function get() {
+  if (typeof this.user === 'undefined') {
+    return {};
+  }
+  return this.user;
+}
+
+// load information of logged in user
+export function load() {
+  return m.request({
+    method: 'GET',
+    url: `${apiUrl}/users/${getUserId()}`,
+    headers: getToken() ? {
+      Authorization: `Token ${getToken()}`,
+    } : {},
+  }).then((result) => {
+    this.user = result;
+  }).catch((e) => {
+    error(e.message);
+  });
+}

src/views/profile.js

+import { isLoggedIn } from '../models/auth';
+import * as user from '../models/user';
+import { log } from '../models/log';
+
+const m = require('mithril');
+
+// shows all relevant user information
+class showUserInfo {
+  static view() {
+    let freeBeerNotice;
+
+    if (user.get().membership !== 'none') {
+      if (user.get().rfid !== undefined && user.get().rfid.length === 6) {
+        freeBeerNotice = m('div', 'You are allowed to get free beer!');
+      } else {
+        freeBeerNotice = m('div', 'Set your RFID below to get free beer!');
+      }
+    }
+
+    return m('div', [
+      m('div', [
+        m('span', 'Membership: '),
+        m('span', user.get().membership),
+      ]),
+      freeBeerNotice,
+    ]);
+  }
+}
+
+// provides a form to change the users rfid
+class rfidForm {
+  submit() {
+    const savedRfid = this.rfid;
+    this.valid = false;
+    user.update({ rfid: savedRfid }).then(() => {
+      this.rfid = savedRfid;
+      this.valid = true;
+    }).catch(() => {
+      this.rfid = savedRfid;
+      this.valid = true;
+    });
+  }
+
+  view() {
+    const buttonArgs = { onclick: () => this.submit() };
+
+    if (this.rfid === undefined) this.rfid = user.get().rfid;
+    if (!this.valid) {
+      buttonArgs.disabled = 'disabled';
+    }
+
+    return m('div', [
+      m('input', {
+        name: 'rfid',
+        id: 'rfid',
+        type: 'text',
+        placeholder: 'RFID',
+        value: this.rfid,
+        onchange: (e) => {
+          this.rfid = e.target.value;
+          this.valid = /^\d{6}$/g.test(this.rfid);
+          log(`rfid valid: ${this.valid}`);
+        },
+      }),
+      m('button', buttonArgs, 'save'),
+    ]);
+  }
+}
+
+// provides a button to (un-)subscribe for the announce
+class announceSubscriptionForm {
+  oninit() {
+    this.valid = true;
+  }
+
+  submit() {
+    this.valid = false;
+    user.update({ send_newsletter: !user.get().send_newsletter }).then(() => {
+      this.valid = true;
+    }).catch(() => {
+      this.valid = true;
+    });
+  }
+
+  view() {
+    const buttonArgs = { onclick: () => this.submit() };
+
+    if (this.rfid === undefined) this.rfid = user.get().rfid;
+    if (!this.valid) {
+      buttonArgs.disabled = 'disabled';
+    }
+
+    return m('button', buttonArgs, user.get().send_newsletter ? 'unsubscribe from Newsletter' : 'subscribe to Newsletter');
+  }
+}
+
+// shows all submodules defined above
+export default class profile {
+  static oninit() {
+    if (!isLoggedIn()) {
+      m.route.set('/');
+    }
+    user.load();
+  }
+
+  static view() {
+    return m('div', [
+      m(showUserInfo),
+      m(rfidForm),
+      m(announceSubscriptionForm),
+    ]);
+  }
+}