.devcontainer/devcontainer.json

+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/docker-existing-dockerfile
+{
+	"name": "amiv-admintool",
+	"image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:14",
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [9000],
+
+	// Uncomment the next line to run commands after the container is created.
+	"postCreateCommand": "npm install"
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as an existing user other than the container default. More info: https://aka.ms/dev-containers-non-root.
+	//"remoteUser": "node"
+}

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
       "browser": true,
     },
     "rules": {
-        "no-console": 0,
+        "no-console": 1,
         "class-methods-use-this": 0,
         "prefer-destructuring": 1,
         "no-underscore-dangle": 0,

.gitignore

 
 .ftpconfig
 node_modules/
-package-lock.json
 
 .idea/
-dist/
\ No newline at end of file
+dist/
+
+.DS_Store

.gitlab-ci.yml

@@ -7,69 +7,46 @@ eslint:
   stage: test
   image: node:latest
   before_script:
-   - npm install
+    - npm install
   script:
-   - npm run lint
+    - npm run lint
 
-build_master_dev:
+build_master:
   stage: build
-  image: docker:latest
+  image: docker:stable
   services:
     - docker:dind
   before_script:
-    - docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
+    - echo "$CI_DOCKER_REGISTRY_TOKEN" | docker login -u "$CI_DOCKER_REGISTRY_USER" --password-stdin
   script:
-    - docker build --build-arg NPM_BUILD_COMMAND=build-dev --pull -t "$CI_REGISTRY_IMAGE:dev" ./
-    - docker push "$CI_REGISTRY_IMAGE:dev"
+    - docker build --build-arg NPM_BUILD_COMMAND=build --pull -t "$CI_REGISTRY_IMAGE:prod" ./
+    - docker build --build-arg NPM_BUILD_COMMAND=build-staging --pull -t "$CI_REGISTRY_IMAGE:staging" ./
+    - docker build --build-arg NPM_BUILD_COMMAND=build-local --pull -t "$CI_REGISTRY_IMAGE:local" ./
+    - docker push "$CI_REGISTRY_IMAGE:prod"
+    - docker push "$CI_REGISTRY_IMAGE:staging"
+    - docker push "$CI_REGISTRY_IMAGE:local"
+  environment:
+    name: production
+    url: https://admin.amiv.ethz.ch
   only:
     - master
 
-build_master_prod:
+build_dev:
   stage: build
-  image: docker:latest
+  image: docker:stable
   services:
     - docker:dind
   before_script:
-    - docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" $CI_REGISTRY
+    - echo "$CI_DOCKER_REGISTRY_TOKEN_DEV" | docker login -u "$CI_DOCKER_REGISTRY_USER_DEV" --password-stdin
   script:
-    - docker build --pull -t "$CI_REGISTRY_IMAGE" ./
-    - docker push "$CI_REGISTRY_IMAGE"
-  only:
-    - master
-
-# On branches except master: verify that build works, do not push to registry
-build:
-  stage: build
-  image: docker:latest
-  services:
-    - docker:dind
-  script:
-    - docker build --pull ./
-  except:
-    - master
-
-deploy_prod:
-  stage: deploy
-  image: amiveth/service-update-helper
-  script:
-    - /update.py
-  only:
-    - master
-
-deploy_dev:
-  stage: deploy
-  image: amiveth/service-update-helper
-  script:
-    - export CI_DEPLOY_SERVICE="$CI_DEPLOY_SERVICE_DEV"
-    - /update.py
-  only:
-    - master
+    - docker build --build-arg NPM_BUILD_COMMAND=build-dev --pull -t "$CI_REGISTRY_IMAGE_DEV" ./
+    - docker push "$CI_REGISTRY_IMAGE_DEV"
+  environment:
+    name: development
+    url: https://admin-dev.amiv.ethz.ch
 
-deploy_prod:
+deploy:
   stage: deploy
-  image: amiveth/service-update-helper
+  image: amiveth/ansible-ci-helper
   script:
-    - export CI_DEPLOY_SERVICE="$CI_DEPLOY_SERVICE_PROD"
-    - /update.py
-  only:
-    - master
+    - python /main.py

.gitlab/issue_templates/Bug.md

+# Summary
+
+> Hi! Thanks for contributing to the admintools by reporting a new Bug!
+> In order to fix the bug soon, please help us to figure out what causes the
+> malfunction!
+
+> describe the issue here
+
+# Steps to Reproduce
+
+> What is the main menu point (left menu bar) where this issue occurs?
+
+> Copy and Paste the url from the window where the issue occured
+
+> Describe in your own words what steps you did before the issue occured
+
+# Additional Debug Information
+
+> Please add information on what browser and operating system you are using
+
+> If possible, can you make a screenshot of the bug?
+
+> Please open the "developer tools" of your browser and copy and paste any
+> printouts in the "console"
+
+/label ~bug

.vscode/launch.json

+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}/src/relationlistcontroller.js"
+        }
+    ]
+}
\ No newline at end of file

Dockerfile

 # First stage: Build project
-FROM node as build
+FROM node:14 as build
 
 ARG NPM_BUILD_COMMAND=build
 

README.md

 # Admintool
 
 # Developer Installation
+## w/ Docker
+Start the dev Container in VS Code
+
+run ```npm run start``` inside the container.
+
+The development server is available under localhost:9000. It refreshes automatically as soon as you save changes in any `.js` file.
+
+## w/o Docker
 
 ```
 npm install

package.json

@@ -7,6 +7,8 @@
     "start": "webpack-dev-server --hot --inline",
     "build": "webpack -p --config webpack.config.prod.js",
     "build-dev": "webpack -p --config webpack.config.dev.js",
+    "build-staging": "webpack -p --config webpack.config.staging.js",
+    "build-local": "webpack -p --config webpack.config.local.js",
     "lint": "eslint src/**/*.js src/*.js"
   },
   "repository": {
@@ -18,31 +20,36 @@
     "@material/drawer": "^0.30.0",
     "@material/select": "^0.35.1",
     "ajv": "^5.5.0",
-    "amiv-web-ui-components": "git+https://git@gitlab.ethz.ch/amiv/web-ui-components.git#217aaba4e1ba269d4f27f134e95df8947036ea20",
+    "amiv-web-ui-components": "git+https://git@gitlab.ethz.ch/amiv/web-ui-components.git#360e65da63f4511db1f6ac56ce103be9254d1d9f",
     "axios": "^0.17.1",
     "client-oauth2": "^4.2.0",
     "mithril": "^1.1.6",
     "mithril-infinite": "^1.2.4",
     "polythene-core-css": "^1.2.0",
     "polythene-css": "^1.2.0",
-    "polythene-mithril": "^1.2.0",
-    "querystring": "^0.2.0"
+    "polythene-mithril": "1.2.0",
+    "querystring": "^0.2.0",
+    "showdown": "^1.9.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "compression-webpack-plugin": "^1.1.11",
-    "css-loader": "^0.28.11",
-    "eslint": "^4.19.1",
-    "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.12.0",
-    "webpack-dev-server": "^2.9.5"
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.4",
+    "compression-webpack-plugin": "^2.0.0",
+    "css-loader": "^2.1.0",
+    "eslint": "^5.16.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-import-resolver-webpack": "^0.10.1",
+    "eslint-loader": "^3.0.0",
+    "eslint-plugin-import": "^2.14.0",
+    "file-loader": "^3.0.1",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.28.3",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.14"
   }
 }

src/auth.js

@@ -5,15 +5,24 @@ import { Snackbar } from 'polythene-mithril';
 // eslint-disable-next-line import/extensions
 import { apiUrl, ownUrl, oAuthID } from 'networkConfig';
 import * as localStorage from './localStorage';
-import config from './resourceConfig.json';
 
 // Object which stores the current login-state
 const APISession = {
   authenticated: false,
   token: '',
   userID: null,
+  schema: null,
+  rights: {
+    users: [],
+    joboffers: [],
+    studydocuments: [],
+  },
 };
 
+if (!APISession.schema) {
+  m.request(`${apiUrl}/docs/api-docs`).then((schema) => { APISession.schema = schema; });
+}
+
 const amivapi = axios.create({
   baseURL: apiUrl,
   headers: { 'Content-Type': 'application/json' },
@@ -54,15 +63,22 @@ export function checkAuthenticated() {
     else {
       // let's see if we have a stored token
       const token = localStorage.get('token');
-      console.log(`found this token: ${token}`);
       if (token !== '') {
         // check of token is valid
         checkToken(token).then((session) => {
           APISession.token = token;
           APISession.authenticated = true;
           APISession.userID = session.user;
-          console.log(APISession);
-          resolve();
+          amivapi.get('/', {
+            headers: { 'Content-Type': 'application/json', Authorization: token },
+          }).then((response) => {
+            const rights = {};
+            response.data._links.child.forEach(({ href, methods }) => {
+              rights[href] = methods;
+            });
+            APISession.rights = rights;
+            resolve();
+          });
         }).catch(resetSession);
       } else resetSession();
     }
@@ -110,6 +126,27 @@ export function getCurrentUser() {
   return APISession.userID;
 }
 
+export function getUserRights() {
+  return APISession.rights;
+}
+
+export function getSchema() {
+  return APISession.schema;
+}
+
+// Mapper for resource vs schema-object names
+const objectNameForResource = {
+  users: 'User',
+  groupmemberships: 'Group Membership',
+  groups: 'Group',
+  eventsignups: 'Event Signup',
+  events: 'Event',
+  studydocuments: 'Study Document',
+  joboffers: 'Job Offer',
+  blacklist: 'Blacklist',
+  sessions: 'Session',
+};
+
 export class ResourceHandler {
   /* Handler to get and manipulate resource items
    *
@@ -118,19 +155,32 @@ export class ResourceHandler {
    *   when search is set, any of these keys may match the search pattern
    *   E.g. for an event, this may be ['title_de', 'title_en', 'location']
    */
-  constructor(resource, searchKeys = false) {
+  constructor(resource, searchKeys = []) {
+    // backwards compatibiliity, should be removed in future
+    // eslint-disable-next-line no-param-reassign
+    if (!searchKeys) searchKeys = [];
+
     this.resource = resource;
     this.rights = [];
-    // special case for users
+    this.schema = JSON.parse(JSON.stringify(getSchema().components.schemas[
+      objectNameForResource[this.resource]]));
+    // readOnly fields should be removed before patch
+    this.noPatchKeys = Object.keys(this.schema.properties).filter(
+      key => this.schema.properties[key].readOnly,
+    );
+    // any field that is a string can be searched
+    const possibleSearchKeys = Object.keys(this.schema.properties).filter((key) => {
+      const field = this.schema.properties[key];
+      return field.type === 'string' && field.format !== 'objectid'
+        && field.format !== 'date-time' && !key.startsWith('_');
+    });
+    // special case for users, we don't allow reverse search by legi or rfid
     if (resource === 'users') this.searchKeys = ['firstname', 'lastname', 'nethz'];
-    else this.searchKeys = searchKeys || config[resource].searchKeys;
-    this.noPatchKeys = [
-      '_etag', '_id', '_created', '_links', '_updated',
-      ...(config[resource].notPatchableKeys || [])];
+    else this.searchKeys = searchKeys.length === 0 ? possibleSearchKeys : searchKeys;
     checkAuthenticated().then(() => {
       // again special case for users
       if (resource === 'users' && APISession.isUserAdmin) {
-        this.searchKeys = searchKeys || config[resource].searchKeys;
+        this.searchKeys = searchKeys.length === 0 ? possibleSearchKeys : searchKeys;
       }
     });
   }
@@ -148,20 +198,38 @@ export class ResourceHandler {
 
     const fullQuery = {};
 
-    if ('search' in query && query.search && query.search.length > 0 && this.searchKeys) {
+    if ('search' in query && query.search && query.search.length > 0
+        && this.searchKeys.length !== 0) {
       // translate search into where, we just look if any field contains search
       // The search-string may match any of the keys in the object specified in the
       // constructor
-      const searchQuery = {
-        $or: this.searchKeys.map((key) => {
-          const fieldQuery = {};
-          fieldQuery[key] = {
-            $regex: `${query.search}`,
-            $options: 'i',
-          };
-          return fieldQuery;
-        }),
-      };
+      let searchQuery;
+      if (query.search.split(' ').length > 1) {
+        searchQuery = {
+          $and: query.search.split(' ').map(searchPhrase => ({
+            $or: this.searchKeys.map((key) => {
+              const fieldQuery = {};
+              fieldQuery[key] = {
+                $regex: `${searchPhrase}`,
+                $options: 'i',
+              };
+              return fieldQuery;
+            }),
+          })),
+        };
+      } else {
+        searchQuery = {
+          $or: this.searchKeys.map((key) => {
+            const fieldQuery = {};
+            fieldQuery[key] = {
+              $regex: `${query.search}`,
+              $options: 'i',
+            };
+            return fieldQuery;
+          }),
+        };
+      }
+
 
       // if there exists already a where-filter, AND them together
       if ('where' in query) {
@@ -178,10 +246,12 @@ export class ResourceHandler {
       .forEach((key) => { fullQuery[key] = JSON.stringify(query[key]); });
 
     // now we can acutally build the query string
-    return `?${m.buildQueryString(fullQuery)}`;
+    const maxResults = 50; // max_results for setting the page size of the return.
+    return `?${m.buildQueryString(fullQuery)}&max_results=${maxResults}`;
   }
 
   networkError(e) {
+    // eslint-disable-next-line no-console
     console.log(e);
     Snackbar.show({ title: 'Network error, try again.', style: { color: 'red' } });
   }
@@ -204,8 +274,8 @@ export class ResourceHandler {
         if (Object.keys(query).length > 0) url += this.buildQuerystring(query);
         api.get(url).then((response) => {
           if (response.status >= 400) {
-            resetSession();
             Snackbar.show({ title: response.data, style: { color: 'red' } });
+            if (response.status === 401) resetSession();
             reject();
           } else {
             this.rights = response.data._links.self.methods;
@@ -230,9 +300,11 @@ export class ResourceHandler {
           })}`;
         }
         api.get(url).then((response) => {
-          if (response.status >= 400) {
+          if (response.status === 404) {
+            m.route.set('/404');
+          } else if (response.status >= 400) {
             Snackbar.show({ title: response.data, style: { color: 'red' } });
-            resetSession();
+            if (response.status === 401) resetSession();
             reject();
           } else {
             resolve(response.data);
@@ -257,7 +329,7 @@ export class ResourceHandler {
             reject(response.data);
           } else if (response.status >= 400) {
             Snackbar.show({ title: response.data, style: { color: 'red' } });
-            resetSession();
+            if (response.status === 401) resetSession();
             reject();
           } else {
             resolve(response.data);
@@ -270,33 +342,31 @@ export class ResourceHandler {
     });
   }
 
-  patch(item, formData = false) {
+  patch(item) {
+    const isFormData = item instanceof FormData;
+    let patchInfo = {};
+    if (isFormData) patchInfo = { id: item.get('_id'), etag: item.get('_etag') };
+    else patchInfo = { id: item._id, etag: item._etag };
+
     return new Promise((resolve, reject) => {
       getSession().then((api) => {
+        let submitData = item;
+        if (!isFormData) submitData = Object.assign({}, item);
         // not all fields in the item can be patched. We filter out the fields
         // we are allowed to send
-        let submitData;
-        if (formData) {
-          submitData = new FormData();
-          Object.keys(item).forEach((key) => {
-            if (!this.noPatchKeys.includes(key)) {
-              submitData.append(key, item[key]);
-            }
-          });
-        } else {
-          submitData = Object.assign({}, item);
-          this.noPatchKeys.forEach((key) => { delete submitData[key]; });
-        }
-
-        api.patch(`${this.resource}/${item._id}`, submitData, {
-          headers: { 'If-Match': item._etag },
+        this.noPatchKeys.forEach((key) => {
+          if (isFormData) submitData.delete(key);
+          else delete submitData[key];
+        });
+        api.patch(`${this.resource}/${patchInfo.id}`, submitData, {
+          headers: { 'If-Match': patchInfo.etag },
         }).then((response) => {
           if (response.status === 422) {
             this.error422(response.data);
             reject(response.data);
           } else if (response.status >= 400) {
             Snackbar.show({ title: response.data, style: { color: 'red' } });
-            resetSession();
+            if (response.status === 401) resetSession();
             reject();
           } else {
             this.successful('Change successful.');
@@ -318,7 +388,7 @@ export class ResourceHandler {
         }).then((response) => {
           if (response.status >= 400) {
             Snackbar.show({ title: response.data, style: { color: 'red' } });
-            resetSession();
+            if (response.status === 401) resetSession();
             reject();
           } else {
             this.successful('Delete successful.');
@@ -336,18 +406,12 @@ export class ResourceHandler {
 export class OauthRedirect {
   view() {
     oauth.token.getToken(m.route.get()).then((auth) => {
-      APISession.authenticated = true;
-      APISession.token = auth.accessToken;
       localStorage.set('token', auth.accessToken);
-      amivapi.get(`sessions/${auth.accessToken}`, {
-        headers: { 'Content-Type': 'application/json', Authorization: APISession.token },
-      }).then((response) => {
-        console.log(response);
-        APISession.userID = response.data.user;
+      checkAuthenticated().then(() => {
+        // checkAuthenticated will check whetehr the token is valid
+        // and store all relevant session info for easy access
         m.route.set('/');
-      }).catch(() => {
-        resetSession();
-      });
+      }).catch(resetSession);
     });
     return 'redirecting...';
   }

src/base64.js

+/* eslint-disable operator-assignment */
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-bitwise */
+/* eslint-disable no-plusplus */
+/* eslint-disable no-param-reassign */
+/**
+ *
+ *  Base64 encode / decode
+ *  http://www.webtoolkit.info
+ *
+ * */
+const Base64 = {
+  // private property
+  _keyStr: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
+
+  // public method for encoding
+  encode(input) {
+    let output = '';
+    let chr1; let chr2; let chr3; let enc1; let enc2; let enc3; let enc4;
+    let i = 0;
+
+    input = Base64._utf8_encode(input);
+
+    while (i < input.length) {
+      chr1 = input.charCodeAt(i++);
+      chr2 = input.charCodeAt(i++);
+      chr3 = input.charCodeAt(i++);
+
+      enc1 = chr1 >> 2;
+      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+      enc4 = chr3 & 63;
+
+      if (isNaN(chr2)) {
+        enc3 = 64;
+        enc4 = 64;
+      } else if (isNaN(chr3)) {
+        enc4 = 64;
+      }
+
+      output = output
+        + this._keyStr.charAt(enc1)
+        + this._keyStr.charAt(enc2)
+        + this._keyStr.charAt(enc3)
+        + this._keyStr.charAt(enc4);
+    } // Whend
+
+    return output;
+  }, // End Function encode
+
+  // public method for decoding
+  decode(input) {
+    let output = '';
+    let chr1; let chr2; let chr3;
+    let enc1; let enc2; let enc3; let enc4;
+    let i = 0;
+
+    // eslint-disable-next-line no-useless-escape
+    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, '');
+    while (i < input.length) {
+      enc1 = this._keyStr.indexOf(input.charAt(i++));
+      enc2 = this._keyStr.indexOf(input.charAt(i++));
+      enc3 = this._keyStr.indexOf(input.charAt(i++));
+      enc4 = this._keyStr.indexOf(input.charAt(i++));
+
+      chr1 = (enc1 << 2) | (enc2 >> 4);
+      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+      chr3 = ((enc3 & 3) << 6) | enc4;
+
+      output = output + String.fromCharCode(chr1);
+
+      // eslint-disable-next-line eqeqeq
+      if (enc3 != 64) {
+        output = output + String.fromCharCode(chr2);
+      }
+
+      // eslint-disable-next-line eqeqeq
+      if (enc4 != 64) {
+        output = output + String.fromCharCode(chr3);
+      }
+    } // Whend
+
+    output = Base64._utf8_decode(output);
+
+    return output;
+  }, // End Function decode
+
+  // private method for UTF-8 encoding
+  _utf8_encode(string) {
+    let utftext = '';
+    string = string.replace(/\r\n/g, '\n');
+
+    for (let n = 0; n < string.length; n++) {
+      const c = string.charCodeAt(n);
+
+      if (c < 128) {
+        utftext += String.fromCharCode(c);
+      } else if (c > 127 && c < 2048) {
+        utftext += String.fromCharCode((c >> 6) | 192);
+        utftext += String.fromCharCode((c & 63) | 128);
+      } else {
+        utftext += String.fromCharCode((c >> 12) | 224);
+        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+        utftext += String.fromCharCode((c & 63) | 128);
+      }
+    } // Next n
+
+    return utftext;
+  }, // End Function _utf8_encode
+
+  // private method for UTF-8 decoding
+  _utf8_decode(utftext) {
+    let string = '';
+    let i = 0;
+    let c; let c2; let c3;
+    c = 0;
+    c2 = 0;
+
+    while (i < utftext.length) {
+      c = utftext.charCodeAt(i);
+
+      if (c < 128) {
+        string += String.fromCharCode(c);
+        i++;
+      } else if (c > 191 && c < 224) {
+        c2 = utftext.charCodeAt(i + 1);
+        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
+        i += 2;
+      } else {
+        c2 = utftext.charCodeAt(i + 1);
+        c3 = utftext.charCodeAt(i + 2);
+        string += String.fromCharCode(
+          ((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63),
+        );
+        i += 3;
+      }
+    } // Whend
+
+    return string;
+  }, // End Function _utf8_decode
+};
+
+export default Base64;

src/blacklist/editBlacklist.js

+import m from 'mithril';
+import { TextField } from 'polythene-mithril';
+import { ListSelect, DatalistController } from 'amiv-web-ui-components';
+import { ResourceHandler } from '../auth';
+import EditView from '../views/editView';
+
+class NanoController {
+  constructor(resource) {
+    this.resource = resource;
+    this.handler = new ResourceHandler(resource);
+    this.data = {};
+  }
+
+  post(data) {
+    return new Promise((resolve, reject) => {
+      this.handler.post(data).then(() => {
+        this.cancel();
+      }).catch(reject);
+    });
+  }
+
+  cancel() {
+    m.route.set(`/${this.resource}`);
+  }
+}
+
+/**
+ * Table of all possible permissions to edit
+ *
+ * @class      PermissionEditor (name)
+ */
+
+export default class NewBlacklist extends EditView {
+  constructor({ attrs }) {
+    super({ attrs: { controller: new NanoController('blacklist'), ...attrs } });
+    this.userHandler = new ResourceHandler('users', ['firstname', 'lastname', 'email', 'nethz']);
+    this.userController = new DatalistController((query, search) => this.userHandler.get(
+      { search, ...query },
+    ));
+  }
+
+  beforeSubmit() {
+    const { data } = this.form;
+    // exchange user object with string of id
+    this.submit({ ...data, user: data.user ? data.user._id : undefined }).then(() => {
+      this.controller.changeModus('view');
+    });
+  }
+
+  view() {
+    return this.layout([
+      m('div', { style: { display: 'flex' } }, [
+        m(TextField, { label: 'User: ', disabled: true, style: { width: '160px' } }),
+        m('div', { style: { 'flex-grow': 1 } }, m(ListSelect, {
+          controller: this.userController,
+          selection: this.form.data.user,
+          listTileAttrs: user => Object.assign({}, { title: `${user.firstname} ${user.lastname}` }),
+          selectedText: user => `${user.firstname} ${user.lastname}`,
+          onSelect: (data) => { this.form.data.user = data; },
+        })),
+      ]),
+      ...this.form.renderSchema(['reason', 'start_time', 'price']),
+    ]);
+  }
+}

src/blacklist/viewBlacklist.js

+import m from 'mithril';
+import { Button } from 'polythene-mithril';
+import TableView from '../views/tableView';
+import { ResourceHandler } from '../auth';
+import RelationlistController from '../relationlistcontroller';
+import { dateFormatter } from '../utils';
+
+export default class BlacklistTable {
+  constructor() {
+    this.handler = new ResourceHandler('blacklist');
+    this.ctrl = new RelationlistController({
+      primary: 'blacklist',
+      secondary: 'users',
+      query: { sort: [['start_time', -1]] },
+    });
+  }
+
+  getItemData(data) {
+    return [
+      m(
+        'div', { style: { width: '18em' } },
+        m(
+          'div', { style: { 'font-weight': 'bold' } },
+          `${data.user.firstname} ${data.user.lastname}`,
+        ),
+        m('div', data.user.email),
+      ),
+      m(
+        'div', { style: { width: 'calc(100%-18em)' } },
+        m('div', `From ${dateFormatter(data.start_time, false)}
+        ${data.end_time ? ` to ${dateFormatter(data.end_time, false)}` : ''}`),
+        m('div', `Reason: ${data.reason}`),
+        data.price && m('div', `price: ${data.price}`),
+      ),
+      m('div', { style: { 'flex-grow': '100' } }),
+      m('div', (!data.end_time && this.ctrl.handler.rights.includes('POST')) && m(Button, {
+        // Button to mark this entry as resolved
+        className: 'blue-row-button',
+        borders: false,
+        label: 'redeem',
+        events: {
+          onclick: () => {
+            const date = new Date(Date.now());
+            const patchdata = Object.assign({}, data);
+            delete patchdata.user;
+            patchdata.end_time = `${date.toISOString().slice(0, -5)}Z`;
+            this.ctrl.handler.patch(patchdata).then(() => {
+              this.ctrl.refresh();
+              m.redraw();
+            });
+          },
+        },
+      })),
+    ];
+  }
+
+  view() {
+    return m(TableView, {
+      clickOnRows: false,
+      controller: this.ctrl,
+      keys: [null, null],
+      tileContent: data => this.getItemData(data),
+      titles: [
+        { text: 'User', width: '18em' },
+        { text: 'Detail', width: '9em' },
+      ],
+      onAdd: (this.ctrl.handler.rights.includes('POST')) ? () => {
+        m.route.set('/newblacklistentry');
+      } : false,
+    });
+  }
+}

src/events/item.js

@@ -6,11 +6,13 @@ import { loadingScreen } from '../layout';
 
 export default class EventItem {
   constructor() {
-    this.controller = new ItemController('events');
+    this.controller = new ItemController('events', { moderator: 1 });
   }
 
   view() {
-    if (!this.controller || !this.controller.data) return m(loadingScreen);
+    if (!this.controller || (!this.controller.data && this.controller.modus !== 'new')) {
+      return m(loadingScreen);
+    }
     if (this.controller.modus !== 'view') return m(editEvent, { controller: this.controller });
     return m(viewEvent, { controller: this.controller });
   }

src/events/participants.js

+import m from 'mithril';
+import { ListSelect, DatalistController, Form } from 'amiv-web-ui-components';
+import { Toolbar, ToolbarTitle, Dialog, Card, Button } from 'polythene-mithril';
+import { ResourceHandler } from '../auth';
+import RelationlistController from '../relationlistcontroller';
+import TableView from '../views/tableView';
+import { dateFormatter } from '../utils';
+
+
+export class ParticipantsController {
+  constructor() {
+    this.signupHandler = new ResourceHandler('eventsignups');
+    this.signupCtrl = new DatalistController((query, search) => this.signupHandler.get({
+      search, ...query,
+    }));
+    this.userHandler = new ResourceHandler('users');
+    this.acceptedUserController = new RelationlistController({
+      primary: 'eventsignups',
+      secondary: 'users',
+      query: { where: { accepted: true } },
+      searchKeys: ['email'],
+      includeWithoutRelation: true,
+    });
+    this.waitingUserController = new RelationlistController({
+      primary: 'eventsignups',
+      secondary: 'users',
+      query: { where: { accepted: false } },
+      searchKeys: ['email'],
+      includeWithoutRelation: true,
+    });
+    this.allParticipants = [];
+  }
+
+  setEventId(eventId) {
+    this.signupCtrl.setQuery({ where: { event: eventId } });
+    this.acceptedUserController.setQuery({ where: { event: eventId, accepted: true } });
+    this.waitingUserController.setQuery({ where: { event: eventId, accepted: false } });
+  }
+
+  refresh() {
+    this.signupCtrl.getFullList().then((list) => {
+      this.allParticipants = list;
+    });
+    this.acceptedUserController.refresh();
+    this.waitingUserController.refresh();
+  }
+}
+
+
+// Helper class to either display the signed up participants or those on the
+// waiting list.
+export class ParticipantsTable {
+  constructor({
+    attrs: {
+      participantsCtrl,
+      waitingList,
+      additional_fields_schema: additionalFieldsSchema,
+    },
+  }) {
+    this.participantsCtrl = participantsCtrl;
+    if (waitingList) {
+      this.ctrl = this.participantsCtrl.waitingUserController;
+    } else {
+      this.ctrl = this.participantsCtrl.acceptedUserController;
+    }
+    this.add_fields_schema = additionalFieldsSchema
+      ? JSON.parse(additionalFieldsSchema).properties : null;
+
+    // true while in the modus of adding a signup
+    this.addmode = false;
+    this.userHandler = new ResourceHandler('users');
+    this.userController = new DatalistController(
+      (query, search) => this.userHandler.get({ search, ...query }).then(data => ({
+        ...data,
+        _items: data._items.map(user => ({
+          hasSignup: this.participantsCtrl.allParticipants.some(
+            signupUser => user._id === signupUser.user,
+          ),
+          ...user,
+        })),
+      })),
+    );
+  }
+
+  exportAsCSV(filePrefix) {
+    this.ctrl.getFullList().then((list) => {
+      const csvData = (list.map((item) => {
+        const additionalFields = item.additional_fields && JSON.parse(item.additional_fields);
+
+        const line = [
+          item.position,
+          item._created,
+          item.user ? item.user.firstname : '',
+          item.user ? item.user.lastname : '',
+          item.user ? item.user.membership : 'none',
+          item.email,
+          item.accepted,
+          item.confirmed,
+          ...Object.keys(this.add_fields_schema || {}).map(key => (
+            additionalFields && additionalFields[key] ? additionalFields[key] : '')),
+        ].join('","');
+        return `"${line}"`;
+      })).join('\n');
+
+      const headercontent = [
+        'Position', 'Date', 'Firstname', 'Lastname',
+        'Membership', 'Email', 'Accepted', 'Confirmed',
+        ...Object.keys(this.add_fields_schema || {}).map(key => this.add_fields_schema[key].title),
+      ].join('","');
+
+      const header = `"${headercontent}"`;
+
+      const filename = `${filePrefix}_participants_export.csv`;
+      const fileContent = `data:text/csv;charset=utf-8,${header}\n${csvData}`;
+
+      const link = document.createElement('a');
+      link.setAttribute('href', encodeURI(fileContent));
+      link.setAttribute('download', filename);
+      link.click();
+    });
+  }
+
+  itemRow(data) {
+    // TODO list should not have hardcoded size outside of stylesheet
+    const hasPatchRights = data._links.self.methods.indexOf('PATCH') > -1;
+    const additionalFields = data.additional_fields && JSON.parse(data.additional_fields);
+    const canBeAccepted = !data.accepted;
+    return [
+      m('div', { style: { width: '9em' } }, dateFormatter(data._created)),
+      m('div', { style: { width: '16em' } }, [
+        ...data.user ? [`${data.user.firstname} ${data.user.lastname}`, m('br')] : '',
+        data.email,
+      ]),
+      m(
+        'div', { style: { width: '14em' } },
+        m('div', ...data.user ? `Membership: ${data.user.membership}` : ''),
+        (additionalFields && this.add_fields_schema) ? Object.keys(additionalFields).map(
+          key => m('div', `${this.add_fields_schema[key].title}: ${additionalFields[key]}`),
+        ) : '',
+      ),
+      m('div', { style: { 'flex-grow': '100' } }),
+      canBeAccepted ? m('div', m(Button, {
+        // Button to accept this eventsignup
+        className: 'blue-row-button',
+        style: {
+          margin: '0px 4px',
+        },
+        borders: false,
+        label: 'accept',
+        events: {
+          onclick: () => {
+            // preapare data for patch request
+            const patch = (({ _id, _etag }) => ({ _id, _etag }))(data);
+            patch.accepted = true;
+            this.ctrl.handler.patch(patch).then(() => {
+              this.participantsCtrl.refresh();
+              m.redraw();
+            });
+          },
+        },
+      })) : '',
+      hasPatchRights ? m('div', m(Button, {
+        // Button to remove this eventsignup
+        className: 'red-row-button',
+        borders: false,
+        label: 'remove',
+        events: {
+          onclick: () => {
+            this.ctrl.handler.delete(data).then(() => {
+              this.participantsCtrl.refresh();
+              m.redraw();
+            });
+          },
+        },
+      })) : '',
+    ];
+  }
+
+  editEventSignup(user, event) {
+    const form = new Form();
+
+    const schema = JSON.parse(event.additional_fields);
+
+    if (schema && schema.$schema) {
+      // ajv fails to verify the v4 schema of some resources
+      schema.$schema = 'http://json-schema.org/draft-06/schema#';
+      form.setSchema(schema);
+    }
+
+    const elements = form.renderSchema();
+
+    Dialog.show({
+      body: m('form', { onsubmit: () => false }, elements),
+      backdrop: true,
+      footerButtons: [
+        m(Button, {
+          label: 'Cancel',
+          events: { onclick: () => Dialog.hide() },
+        }),
+        m(Button, {
+          label: 'Submit',
+          events: {
+            onclick: () => {
+              const additionalFieldsString = JSON.stringify(form.getData());
+              const data = {
+                event: event._id,
+                additional_fields: additionalFieldsString,
+              };
+              data.user = user._id;
+              this.ctrl.handler.post(data).then(() => {
+                Dialog.hide();
+                this.participantsCtrl.refresh();
+                m.redraw();
+              });
+            },
+          },
+        })],
+    });
+  }
+
+  view({ attrs: { title, filePrefix, event, waitingList } }) {
+    return m(Card, {
+      style: { height: '400px', 'margin-bottom': '10px' },
+      content: m('div', [
+        this.addmode ? m(ListSelect, {
+          controller: this.userController,
+          listTileAttrs: user => Object.assign({}, {
+            title: `${user.firstname} ${user.lastname}`,
+            style: (user.hasSignup ? { color: 'rgba(0, 0, 0, 0.2)' } : {}),
+            hoverable: !user.hasSignup,
+          }),
+          selectedText: user => `${user.firstname} ${user.lastname}`,
+          onSubmit: (user) => {
+            this.addmode = false;
+            if (event.additional_fields) {
+              this.editEventSignup(user, event);
+            } else {
+              this.ctrl.handler.post({
+                user: user._id,
+                event: event._id,
+                accepted: !waitingList,
+              }).then(() => {
+                this.participantsCtrl.refresh();
+                m.redraw();
+              });
+            }
+          },
+          onCancel: () => { this.addmode = false; m.redraw(); },
+        }) : '',
+        m(Toolbar, { compact: true }, [
+          m(ToolbarTitle, { text: title }),
+          (!waitingList
+             || event.selection_strategy === 'manual'
+             || event.signup_count >= event.spots) && m(Button, {
+            style: { margin: '0px 4px' },
+            className: 'blue-button',
+            borders: true,
+            label: 'add',
+            events: { onclick: () => { this.addmode = true; } },
+          }),
+          m(Button, {
+            className: 'blue-button',
+            borders: true,
+            label: 'export CSV',
+            events: { onclick: () => this.exportAsCSV(filePrefix) },
+          }),
+        ]),
+        m(TableView, {
+          tableHeight: '275px',
+          controller: this.ctrl,
+          tileContent: data => this.itemRow(data),
+          clickOnRows: false,
+          titles: [
+            { text: 'Date of Signup', width: '9em' },
+            { text: 'Participant', width: '16em' },
+            { text: 'Additional Info', width: '16em' },
+          ],
+        }),
+      ]),
+    });
+  }
+}

src/events/table.js

 import m from 'mithril';
+import { Snackbar } from 'polythene-mithril';
 import { DatalistController } from 'amiv-web-ui-components';
-import { events as config } from '../resourceConfig.json';
+import axios from 'axios';
+import { hookUrl } from 'networkConfig';
 import TableView from '../views/tableView';
 import { dateFormatter } from '../utils';
 import { ResourceHandler } from '../auth';
+import { get } from '../localStorage';
 
 
 /* Table of all Events
@@ -11,10 +14,22 @@ import { ResourceHandler } from '../auth';
  * Makes use of the standard TableView
  */
 
+const triggerHook = () => {
+  axios.post(hookUrl, { token: get('token') }).then(() => {
+    Snackbar.show({ title: 'Successful', style: { color: 'green' } });
+  }).catch((e) => {
+    // eslint-disable-next-line no-console
+    console.log(e);
+    Snackbar.show({
+      title: 'Network Error, please contact administrator',
+      style: { color: 'red' },
+    });
+  });
+};
 
 export default class EventTable {
   constructor() {
-    this.handler = new ResourceHandler('events', config.tableKeys);
+    this.handler = new ResourceHandler('events');
     this.ctrl = new DatalistController((query, search) => this.handler.get({ search, ...query }));
   }
 
@@ -30,7 +45,7 @@ export default class EventTable {
     const now = new Date();
     return m(TableView, {
       controller: this.ctrl,
-      keys: config.tableKeys,
+      keys: ['titel_en', 'time_start', 'time_end'],
       tileContent: this.getItemData,
       titles: [
         { text: 'Titel', width: 'calc(100% - 18em)' },
@@ -44,10 +59,13 @@ export default class EventTable {
         name: 'past',
         query: { time_start: { $lt: `${now.toISOString().slice(0, -5)}Z` } },
       }]],
+      buttons: this.handler.rights.includes('POST') ? [
+        { text: 'Rerender website', onclick: triggerHook },
+      ] : [],
       // per default, enable the 'upcoming' filter
       initFilterIdxs: [[0, 0]],
-      onAdd: (this.handler.rights.length > 0) ?
-        () => {
+      onAdd: (this.handler.rights.length > 0)
+        ? () => {
           if (this.handler.rights.includes('POST')) {
             m.route.set('/newevent');
           } else {