add 'Create new User' modal

src/index.js

 import { LoginScreen } from './login';
 import TableView from './views/tableView';
-import { UserModal, UserTable } from './userTool';
+import { UserModal, UserTable, NewUser } from './userTool';
 import Sidebar from './sidebar';
 
 const m = require('mithril');
@@ -31,6 +31,7 @@ function layoutWith(view) {
 m.route(root, '/users', {
   '/users': layoutWith(UserTable),
   '/users/:id': layoutWith(UserModal),
+  '/newusers': layoutWith(NewUser),
   '/events': layoutWith({
     view() {
       return m(TableView, {

src/userTool.js

@@ -73,19 +73,7 @@ class UserEdit extends EditView {
     super(vnode, 'users');
   }
 
-  view() {
-    // do not render anything if there is no data yet
-    if (!this.data) return m.trust('');
-
-    // UPDATE button is inactive if form is not valid
-    const buttonArgs = this.patchOnClick([
-      'lastname', 'firstname', 'email', 'membership', 'gender']);
-    const updateButton = m(
-      'div.btn.btn-warning',
-      this.valid ? buttonArgs : { disabled: 'disabled' },
-      'Update',
-    );
-
+  getForm() {
     return m('form', [
       m('div.row', [
         m(inputGroup, this.bind({
@@ -109,12 +97,59 @@ class UserEdit extends EditView {
         })),
       ]),
       m('span', JSON.stringify(this.data)),
-      m('span', JSON.stringify(this.errorLists)),
+      m('span', JSON.stringify(this.errors)),
+    ]);
+  }
+
+  view() {
+    // do not render anything if there is no data yet
+    if (!this.data) return m.trust('');
+
+    // UPDATE button is inactive if form is not valid
+    const buttonArgs = this.patchOnClick([
+      'lastname', 'firstname', 'email', 'membership', 'gender']);
+    const updateButton = m(
+      'div.btn.btn-warning',
+      this.valid ? buttonArgs : { disabled: 'disabled' },
+      'Update',
+    );
+
+    return m('form', [
+      this.getForm(),
       updateButton,
     ]);
   }
 }
 
+export class NewUser extends UserEdit {
+  constructor(vnode) {
+    super(vnode);
+    this.data = {
+      gender: 'male',
+      membership: 'regular',
+    };
+    this.valid = false;
+  }
+
+  view() {
+    // UPDATE button is inactive if form is not valid
+    const buttonArgs = this.createOnClick(
+      ['lastname', 'firstname', 'email', 'membership', 'gender'],
+      (response) => { m.route.set(`/users/${response.data._id}`); },
+    );
+    const postButton = m(
+      'div.btn.btn-warning',
+      this.valid ? buttonArgs : { disabled: 'disabled' },
+      'Create',
+    );
+
+    return m('form', [
+      this.getForm(),
+      postButton,
+    ]);
+  }
+}
+
 export class UserModal {
   constructor() {
     this.edit = false;

src/views/editView.js

@@ -16,7 +16,11 @@ export class EditView extends ItemView {
 
     // state for validation
     this.valid = valid;
-    this.ajv = new Ajv({ missingRefs: 'ignore' });
+    this.ajv = new Ajv({
+      missingRefs: 'ignore',
+      errorDataPath: 'property',
+      allErrors: true,
+    });
     this.errors = {};
 
     // callback when edit is finished
@@ -24,12 +28,14 @@ export class EditView extends ItemView {
   }
 
   oninit() {
-    // load data for item
-    getSession().then((apiSession) => {
-      this.loadItemData(apiSession);
-    }).catch(() => {
-      m.route.set('/login');
-    });
+    if (this.id) {
+      // load data for item
+      getSession().then((apiSession) => {
+        this.loadItemData(apiSession);
+      }).catch(() => {
+        m.route.set('/login');
+      });
+    }
     // load schema
     m.request('http://amiv-api.ethz.ch/docs/api-docs').then((schema) => {
       const objectSchema = schema.definitions[
@@ -52,15 +58,21 @@ export class EditView extends ItemView {
         // validate against schema
         const validate = this.ajv.getSchema('schema');
         this.valid = validate(this.data);
+        console.log(validate.schema);
 
-        // get errors of this field
-        let errors = [];
-        if (!this.valid) {
-          errors = validate.errors.filter(error =>
-            `.${e.target.name}` === error.dataPath);
-          errors = errors.map(error => error.message);
+        console.log(validate.errors);
+        if (this.valid) {
+          Object.keys(this.errors).forEach((field) => {
+            this.errors[field] = [];
+          });
+        } else {
+          // get errors for respective fields
+          Object.keys(this.errors).forEach((field) => {
+            const errors = validate.errors.filter(error =>
+              `.${field}` === error.dataPath);
+            this.errors[field] = errors.map(error => error.message);
+          });
         }
-        this.errors[e.target.name] = errors;
       },
       getErrors: () => this.errors[attrs.name],
       value: this.data[attrs.name],
@@ -71,7 +83,7 @@ export class EditView extends ItemView {
     return boundFormelement;
   }
 
-  patchOnClick(patchableFields) {
+  patchOnClick(patchableFields, callback) {
     return {
       onclick: () => {
         if (this.changed) {
@@ -85,14 +97,32 @@ export class EditView extends ItemView {
 
             apiSession.patch(`${this.resource}/${this.id}`, patchData, {
               headers: { 'If-Match': this.data._etag },
-            }).then(() => { this.callback(); });
+            }).then(() => { callback(); });
           });
         } else {
-          this.callback();
+          callback();
         }
       },
     };
   }
+
+  createOnClick(fields, callback) {
+    return {
+      onclick: () => {
+        getSession().then((apiSession) => {
+          // fields like `_id` are not patchable and would lead to an error
+          // We therefore only send patchable fields
+          const postData = {};
+          fields.forEach((key) => {
+            postData[key] = this.data[key];
+          });
+
+          apiSession.post(this.resource, postData)
+            .then(response => { callback(response); });
+        });
+      },
+    };
+  }
 }
 
 export class inputGroup {
@@ -107,11 +137,12 @@ export class inputGroup {
   view(vnode) {
     // set display-settings accoridng to error-state
     let errorField = null;
-    const groupClasses = vnode.attrs.classes ? vnode.attrs.classes : [];
+    let groupClasses = vnode.attrs.classes ? vnode.attrs.classes : '';
+    console.log(groupClasses)
     const errors = this.getErrors();
     if (errors.length > 0) {
       errorField = m('span.help-block', `Error: ${errors.join(', ')}`);
-      groupClasses.push('has-error');
+      groupClasses += ' has-error';
     }
 
     return m('div.form-group', { class: groupClasses }, [