diff --git a/js/.eslintrc.js b/js/.eslintrc.js
deleted file mode 100644
index 081185d34..000000000
--- a/js/.eslintrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  root: true,
-  extends: [
-    'plugin:vue/essential',
-    '@vue/airbnb',
-  ],
-};
diff --git a/js/get_union_json.js b/js/get_union_json.ts
similarity index 100%
rename from js/get_union_json.js
rename to js/get_union_json.ts
diff --git a/js/package-lock.json b/js/package-lock.json
index 19317591d..a0580797a 100644
--- a/js/package-lock.json
+++ b/js/package-lock.json
@@ -867,6 +867,46 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fimbul/bifrost": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@fimbul/bifrost/-/bifrost-0.15.0.tgz",
+      "integrity": "sha512-sHTwnwA9YhxcVEJkBlfKH1KLmGQGnNYPxk+09w5NnkXelYiiP8a5f351weYfxG0CUPLt1Fgkha20Y/9+jhjn/Q==",
+      "dev": true,
+      "requires": {
+        "@fimbul/ymir": "^0.15.0",
+        "get-caller-file": "^2.0.0",
+        "tslib": "^1.8.1",
+        "tsutils": "^3.1.0"
+      },
+      "dependencies": {
+        "get-caller-file": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.1.tgz",
+          "integrity": "sha512-SpOZHfz845AH0wJYVuZk2jWDqFmu7Xubsx+ldIpwzy5pDUpu7OJHK7QYNSA2NPlDSKQwM1GFaAkciOWjjW92Sg==",
+          "dev": true
+        },
+        "tsutils": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.5.2.tgz",
+          "integrity": "sha512-qIlklNuI/1Dzfm+G+kJV5gg3gimZIX5haYtIVQe7qGyKd7eu8T1t1DY6pz4Sc2CGXAj9s1izycctm9Zfl9sRuQ==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.8.1"
+          }
+        }
+      }
+    },
+    "@fimbul/ymir": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@fimbul/ymir/-/ymir-0.15.0.tgz",
+      "integrity": "sha512-Ow0TfxxQ65vIktHcZyXHeDsGKuzJ9Vt6y77R/aOrXQXLMdYHG+XdbiUWzQbtaGOmNzYVkQfINiFnIdvn5Bn24g==",
+      "dev": true,
+      "requires": {
+        "inversify": "^5.0.0",
+        "reflect-metadata": "^0.1.12",
+        "tslib": "^1.8.1"
+      }
+    },
     "@intervolga/optimize-cssnano-plugin": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",
@@ -996,6 +1036,12 @@
         "@types/node": "*"
       }
     },
+    "@types/chai": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.1.7.tgz",
+      "integrity": "sha512-2Y8uPt0/jwjhQ6EiluT0XCri1Dbplr0ZxfFXUz+ye13gaqE8u5gL5ppao1JrUYr9cIip5S6MvQzBS7Kke7U9VA==",
+      "dev": true
+    },
     "@types/connect": {
       "version": "3.4.32",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.32.tgz",
@@ -1054,6 +1100,12 @@
       "integrity": "sha512-A2TAGbTFdBw9azHbpVd+/FkdW2T6msN1uct1O9bH3vTerEHKZhTXJUQXy+hNq1B0RagfU8U+KBdqiZpxjhOUQA==",
       "dev": true
     },
+    "@types/mocha": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-5.2.5.tgz",
+      "integrity": "sha512-lAVp+Kj54ui/vLUFxsJTMtWvZraZxum3w3Nwkble2dNuV5VnPA+Mi2oGX9XYJAaIvZi3tn3cbjS/qcJXRb6Bww==",
+      "dev": true
+    },
     "@types/node": {
       "version": "10.11.6",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-10.11.6.tgz",
@@ -1075,6 +1127,12 @@
         "@types/mime": "*"
       }
     },
+    "@types/webpack-env": {
+      "version": "1.13.6",
+      "resolved": "http://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.13.6.tgz",
+      "integrity": "sha512-5Th3OsZ4gTRdr9Mho83BQ23cex4sRhOR4XTG+m+cJc0FhtUBK9Vn62hBJ+pnQYnSxoPOsKoAPOx6FcphxBC8ng==",
+      "dev": true
+    },
     "@types/ws": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-6.0.1.tgz",
@@ -1140,20 +1198,50 @@
         "selenium-server": "^3.14.0"
       }
     },
-    "@vue/cli-plugin-eslint": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-3.1.5.tgz",
-      "integrity": "sha512-ZcRJqqDeMxf5c6YkCT7nr29SGePBfyeuYfG8p3QVSND90nhS/952/G6ZAb7Ph1dNNsEONU4plQYnQAte6Caf4w==",
+    "@vue/cli-plugin-pwa": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-pwa/-/cli-plugin-pwa-3.1.2.tgz",
+      "integrity": "sha512-3US2le6j47mwYiveGlT1xGseJdqOdPzwpjYXJh/q5P3922aozpOZYpq4K/DF6675YaOORfHoNlUvEfjMkoLJFA==",
       "dev": true,
       "requires": {
         "@vue/cli-shared-utils": "^3.1.1",
-        "babel-eslint": "^10.0.1",
-        "eslint": "^4.19.1",
-        "eslint-loader": "^2.1.1",
-        "eslint-plugin-vue": "^4.7.1",
-        "globby": "^8.0.1"
+        "workbox-webpack-plugin": "^3.6.3"
+      }
+    },
+    "@vue/cli-plugin-typescript": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-3.2.0.tgz",
+      "integrity": "sha512-zv9N92mMyidK3+0lyJhIimeMjqIv0SZg8Nkie4xDBEKyliF3KmGLwDstLft7rBm44yqppEROjLMVOxJkuwUVNw==",
+      "dev": true,
+      "requires": {
+        "@types/webpack-env": "^1.13.6",
+        "@vue/cli-shared-utils": "^3.2.0",
+        "fork-ts-checker-webpack-plugin": "^0.5.0",
+        "globby": "^8.0.1",
+        "ts-loader": "^5.3.1",
+        "tslint": "^5.11.0"
       },
       "dependencies": {
+        "@vue/cli-shared-utils": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-3.2.0.tgz",
+          "integrity": "sha512-FCX5ABFg5pWhomyXLpCaogJktMvjsS5d4Mn5BfvqcJxCvzOX6ze8ihFK3u//XMeM78dOFpHSjxnRSvHtkEwgsg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "execa": "^1.0.0",
+            "joi": "^13.0.0",
+            "launch-editor": "^2.2.1",
+            "lru-cache": "^4.1.3",
+            "node-ipc": "^9.1.1",
+            "opn": "^5.3.0",
+            "ora": "^2.1.0",
+            "request": "^2.87.0",
+            "request-promise-native": "^1.0.5",
+            "semver": "^5.5.0",
+            "string.prototype.padstart": "^3.0.0"
+          }
+        },
         "globby": {
           "version": "8.0.1",
           "resolved": "http://registry.npmjs.org/globby/-/globby-8.0.1.tgz",
@@ -1171,16 +1259,6 @@
         }
       }
     },
-    "@vue/cli-plugin-pwa": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-pwa/-/cli-plugin-pwa-3.1.2.tgz",
-      "integrity": "sha512-3US2le6j47mwYiveGlT1xGseJdqOdPzwpjYXJh/q5P3922aozpOZYpq4K/DF6675YaOORfHoNlUvEfjMkoLJFA==",
-      "dev": true,
-      "requires": {
-        "@vue/cli-shared-utils": "^3.1.1",
-        "workbox-webpack-plugin": "^3.6.3"
-      }
-    },
     "@vue/cli-plugin-unit-mocha": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-mocha/-/cli-plugin-unit-mocha-3.1.1.tgz",
@@ -1395,15 +1473,14 @@
         }
       }
     },
-    "@vue/eslint-config-airbnb": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@vue/eslint-config-airbnb/-/eslint-config-airbnb-3.0.5.tgz",
-      "integrity": "sha512-kbsSFewrwffK2Bcw4yB5TzIfMQFJ0Grc1VOvCo3bup1Saub2RZy5RO3PzEBlDArIF/hkNrJHFxo0wMMarDBnBw==",
+    "@vue/eslint-config-typescript": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-3.2.0.tgz",
+      "integrity": "sha512-rDcOpHpxVOyKVe5kaxV63UOQulYvIAwpX0HZO4+rEnDoxkKtS9iAw2VeaamvrYp+TCFMsguo3CsGg0leu1xWAg==",
       "dev": true,
       "requires": {
-        "eslint-config-airbnb-base": "^12.1.0",
-        "eslint-import-resolver-webpack": "^0.9.0",
-        "eslint-plugin-import": "^2.11.0"
+        "eslint-plugin-typescript": "^0.14.0",
+        "typescript-eslint-parser": "^21.0.1"
       }
     },
     "@vue/preload-webpack-plugin": {
@@ -1697,23 +1774,6 @@
         "acorn": "^5.4.1"
       }
     },
-    "acorn-jsx": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
-      "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=",
-      "dev": true,
-      "requires": {
-        "acorn": "^3.0.4"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
-          "dev": true
-        }
-      }
-    },
     "acorn-numeric-separator": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/acorn-numeric-separator/-/acorn-numeric-separator-0.1.1.tgz",
@@ -1802,12 +1862,6 @@
       "integrity": "sha1-7PAh+hCP0X37Xms4Py3SM+Mf/Fk=",
       "dev": true
     },
-    "ajv-keywords": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-2.1.1.tgz",
-      "integrity": "sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=",
-      "dev": true
-    },
     "align-text": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
@@ -1845,12 +1899,6 @@
       "integrity": "sha512-Xt+zb6nqgvV9SWAVp0EG3lRsHcbq5DDgqjPPz6pwgtj6RKz65zGXMNa82oJfOSBA/to6GmRP7Dr+6o+kbApTzQ==",
       "dev": true
     },
-    "ansi-escapes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
-      "integrity": "sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==",
-      "dev": true
-    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -2283,12 +2331,6 @@
       "integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw=",
       "dev": true
     },
-    "array-find": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-find/-/array-find-1.0.0.tgz",
-      "integrity": "sha1-bI4obRHtdoMn+OYuzuhzU8o+eLg=",
-      "dev": true
-    },
     "array-find-index": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
@@ -2574,20 +2616,6 @@
         }
       }
     },
-    "babel-eslint": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.1.tgz",
-      "integrity": "sha512-z7OT1iNV+TjOwHNLLyJk+HN+YVWX+CLE6fPD2SymJZOZQBs+QIexFjhm4keGTm8MW9xr4EC9Q0PbaLB24V5GoQ==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.0.0",
-        "@babel/traverse": "^7.0.0",
-        "@babel/types": "^7.0.0",
-        "eslint-scope": "3.7.1",
-        "eslint-visitor-keys": "^1.0.0"
-      }
-    },
     "babel-extract-comments": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz",
@@ -3209,21 +3237,6 @@
         }
       }
     },
-    "caller-path": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz",
-      "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=",
-      "dev": true,
-      "requires": {
-        "callsites": "^0.2.0"
-      }
-    },
-    "callsites": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz",
-      "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=",
-      "dev": true
-    },
     "camel-case": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
@@ -3368,12 +3381,6 @@
         "is-regex": "^1.0.3"
       }
     },
-    "chardet": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
-      "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=",
-      "dev": true
-    },
     "charenc": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
@@ -3530,12 +3537,6 @@
         "safe-buffer": "^5.0.1"
       }
     },
-    "circular-json": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz",
-      "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
-      "dev": true
-    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -3595,12 +3596,6 @@
       "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==",
       "dev": true
     },
-    "cli-width": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
-      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
-      "dev": true
-    },
     "clipboardy": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-1.2.3.tgz",
@@ -3923,12 +3918,6 @@
       "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=",
       "dev": true
     },
-    "contains-path": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz",
-      "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=",
-      "dev": true
-    },
     "content-disposition": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
@@ -4811,15 +4800,6 @@
         "buffer-indexof": "^1.0.0"
       }
     },
-    "doctrine": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-      "dev": true,
-      "requires": {
-        "esutils": "^2.0.2"
-      }
-    },
     "doctypes": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
@@ -5177,371 +5157,13 @@
         }
       }
     },
-    "eslint": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.19.1.tgz",
-      "integrity": "sha512-bT3/1x1EbZB7phzYu7vCr1v3ONuzDtX8WjuM9c0iYxe+cq+pwcKEoQjl7zd3RpC6YOLgnSy3cTN58M2jcoPDIQ==",
+    "eslint-plugin-typescript": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-typescript/-/eslint-plugin-typescript-0.14.0.tgz",
+      "integrity": "sha512-2u1WnnDF2mkWWgU1lFQ2RjypUlmRoBEvQN02y9u+IL12mjWlkKFGEBnVsjs9Y8190bfPQCvWly1c2rYYUSOxWw==",
       "dev": true,
       "requires": {
-        "ajv": "^5.3.0",
-        "babel-code-frame": "^6.22.0",
-        "chalk": "^2.1.0",
-        "concat-stream": "^1.6.0",
-        "cross-spawn": "^5.1.0",
-        "debug": "^3.1.0",
-        "doctrine": "^2.1.0",
-        "eslint-scope": "^3.7.1",
-        "eslint-visitor-keys": "^1.0.0",
-        "espree": "^3.5.4",
-        "esquery": "^1.0.0",
-        "esutils": "^2.0.2",
-        "file-entry-cache": "^2.0.0",
-        "functional-red-black-tree": "^1.0.1",
-        "glob": "^7.1.2",
-        "globals": "^11.0.1",
-        "ignore": "^3.3.3",
-        "imurmurhash": "^0.1.4",
-        "inquirer": "^3.0.6",
-        "is-resolvable": "^1.0.0",
-        "js-yaml": "^3.9.1",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.3.0",
-        "lodash": "^4.17.4",
-        "minimatch": "^3.0.2",
-        "mkdirp": "^0.5.1",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.8.2",
-        "path-is-inside": "^1.0.2",
-        "pluralize": "^7.0.0",
-        "progress": "^2.0.0",
-        "regexpp": "^1.0.1",
-        "require-uncached": "^1.0.3",
-        "semver": "^5.3.0",
-        "strip-ansi": "^4.0.0",
-        "strip-json-comments": "~2.0.1",
-        "table": "4.0.2",
-        "text-table": "~0.2.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "5.5.2",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
-          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
-          "dev": true,
-          "requires": {
-            "co": "^4.6.0",
-            "fast-deep-equal": "^1.0.0",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.3.0"
-          }
-        },
-        "co": {
-          "version": "4.6.0",
-          "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-          "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-          "dev": true
-        },
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "fast-deep-equal": {
-          "version": "1.1.0",
-          "resolved": "http://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
-          "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
-          "dev": true
-        },
-        "json-schema-traverse": {
-          "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
-          "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
-          "dev": true
-        }
-      }
-    },
-    "eslint-config-airbnb-base": {
-      "version": "12.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-12.1.0.tgz",
-      "integrity": "sha512-/vjm0Px5ZCpmJqnjIzcFb9TKZrKWz0gnuG/7Gfkt0Db1ELJR51xkZth+t14rYdqWgX836XbuxtArbIHlVhbLBA==",
-      "dev": true,
-      "requires": {
-        "eslint-restricted-globals": "^0.1.1"
-      }
-    },
-    "eslint-import-resolver-node": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz",
-      "integrity": "sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==",
-      "dev": true,
-      "requires": {
-        "debug": "^2.6.9",
-        "resolve": "^1.5.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
-        }
-      }
-    },
-    "eslint-import-resolver-webpack": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.9.0.tgz",
-      "integrity": "sha1-IxzhV4rVEk2leZ8Cm9M9KBN2I+M=",
-      "dev": true,
-      "requires": {
-        "array-find": "^1.0.0",
-        "debug": "^2.6.8",
-        "enhanced-resolve": "~0.9.0",
-        "find-root": "^1.1.0",
-        "has": "^1.0.1",
-        "interpret": "^1.0.0",
-        "is-absolute": "^0.2.3",
-        "lodash.get": "^4.4.2",
-        "node-libs-browser": "^1.0.0 || ^2.0.0",
-        "resolve": "^1.4.0",
-        "semver": "^5.3.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "enhanced-resolve": {
-          "version": "0.9.1",
-          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz",
-          "integrity": "sha1-TW5omzcl+GCQknzMhs2fFjW4ni4=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "memory-fs": "^0.2.0",
-            "tapable": "^0.1.8"
-          }
-        },
-        "memory-fs": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz",
-          "integrity": "sha1-8rslNovBIeORwlIN6Slpyu4KApA=",
-          "dev": true
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
-        },
-        "tapable": {
-          "version": "0.1.10",
-          "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.1.10.tgz",
-          "integrity": "sha1-KcNXB8K3DlDQdIK10gLo7URtr9Q=",
-          "dev": true
-        }
-      }
-    },
-    "eslint-loader": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-loader/-/eslint-loader-2.1.1.tgz",
-      "integrity": "sha512-1GrJFfSevQdYpoDzx8mEE2TDWsb/zmFuY09l6hURg1AeFIKQOvZ+vH0UPjzmd1CZIbfTV5HUkMeBmFiDBkgIsQ==",
-      "dev": true,
-      "requires": {
-        "loader-fs-cache": "^1.0.0",
-        "loader-utils": "^1.0.2",
-        "object-assign": "^4.0.1",
-        "object-hash": "^1.1.4",
-        "rimraf": "^2.6.1"
-      }
-    },
-    "eslint-module-utils": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.2.0.tgz",
-      "integrity": "sha1-snA2LNiLGkitMIl2zn+lTphBF0Y=",
-      "dev": true,
-      "requires": {
-        "debug": "^2.6.8",
-        "pkg-dir": "^1.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "find-up": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-          "dev": true,
-          "requires": {
-            "path-exists": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
-        },
-        "path-exists": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-          "dev": true,
-          "requires": {
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "pkg-dir": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-1.0.0.tgz",
-          "integrity": "sha1-ektQio1bstYp1EcFb/TpyTFM89Q=",
-          "dev": true,
-          "requires": {
-            "find-up": "^1.0.0"
-          }
-        }
-      }
-    },
-    "eslint-plugin-import": {
-      "version": "2.14.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.14.0.tgz",
-      "integrity": "sha512-FpuRtniD/AY6sXByma2Wr0TXvXJ4nA/2/04VPlfpmUDPOpOY264x+ILiwnrk/k4RINgDAyFZByxqPUbSQ5YE7g==",
-      "dev": true,
-      "requires": {
-        "contains-path": "^0.1.0",
-        "debug": "^2.6.8",
-        "doctrine": "1.5.0",
-        "eslint-import-resolver-node": "^0.3.1",
-        "eslint-module-utils": "^2.2.0",
-        "has": "^1.0.1",
-        "lodash": "^4.17.4",
-        "minimatch": "^3.0.3",
-        "read-pkg-up": "^2.0.0",
-        "resolve": "^1.6.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "doctrine": {
-          "version": "1.5.0",
-          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
-          "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "isarray": "^1.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
-        },
-        "path-type": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
-          "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
-          "dev": true,
-          "requires": {
-            "pify": "^2.0.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
-        },
-        "read-pkg": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
-          "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
-          "dev": true,
-          "requires": {
-            "load-json-file": "^2.0.0",
-            "normalize-package-data": "^2.3.2",
-            "path-type": "^2.0.0"
-          }
-        },
-        "read-pkg-up": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
-          "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
-          "dev": true,
-          "requires": {
-            "find-up": "^2.0.0",
-            "read-pkg": "^2.0.0"
-          }
-        }
-      }
-    },
-    "eslint-plugin-vue": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-4.7.1.tgz",
-      "integrity": "sha512-esETKhVMI7Vdli70Wt4bvAwnZBJeM0pxVX9Yb0wWKxdCJc2EADalVYK/q2FzMw8oKN0wPMdqVCKS8kmR89recA==",
-      "dev": true,
-      "requires": {
-        "vue-eslint-parser": "^2.0.3"
-      }
-    },
-    "eslint-restricted-globals": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz",
-      "integrity": "sha1-NfDVy8ZMLj7WLpO0saevBbp+1Nc=",
-      "dev": true
-    },
-    "eslint-scope": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
-      "integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=",
-      "dev": true,
-      "requires": {
-        "esrecurse": "^4.1.0",
-        "estraverse": "^4.1.1"
+        "requireindex": "~1.1.0"
       }
     },
     "eslint-visitor-keys": {
@@ -5556,31 +5178,12 @@
       "integrity": "sha512-SzSGoZc17S7P+12R9cg21Bdb7eybX25RnIeRZ80xZs+VZ3kdQKzqTp2k4hZJjR7p9l0186TTXSgrxzlMDBktlw==",
       "dev": true
     },
-    "espree": {
-      "version": "3.5.4",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.4.tgz",
-      "integrity": "sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==",
-      "dev": true,
-      "requires": {
-        "acorn": "^5.5.0",
-        "acorn-jsx": "^3.0.0"
-      }
-    },
     "esprima": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
       "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
       "dev": true
     },
-    "esquery": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.0.1.tgz",
-      "integrity": "sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==",
-      "dev": true,
-      "requires": {
-        "estraverse": "^4.0.0"
-      }
-    },
     "esrecurse": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
@@ -5797,17 +5400,6 @@
         }
       }
     },
-    "external-editor": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
-      "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==",
-      "dev": true,
-      "requires": {
-        "chardet": "^0.4.0",
-        "iconv-lite": "^0.4.17",
-        "tmp": "^0.0.33"
-      }
-    },
     "extglob": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@@ -5981,25 +5573,6 @@
       "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==",
       "dev": true
     },
-    "figures": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
-      "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
-      "dev": true,
-      "requires": {
-        "escape-string-regexp": "^1.0.5"
-      }
-    },
-    "file-entry-cache": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-2.0.0.tgz",
-      "integrity": "sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=",
-      "dev": true,
-      "requires": {
-        "flat-cache": "^1.2.1",
-        "object-assign": "^4.0.1"
-      }
-    },
     "file-loader": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-2.0.0.tgz",
@@ -6113,12 +5686,6 @@
         "pkg-dir": "^2.0.0"
       }
     },
-    "find-root": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-      "dev": true
-    },
     "find-up": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
@@ -6128,18 +5695,6 @@
         "locate-path": "^2.0.0"
       }
     },
-    "flat-cache": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.4.tgz",
-      "integrity": "sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==",
-      "dev": true,
-      "requires": {
-        "circular-json": "^0.3.1",
-        "graceful-fs": "^4.1.2",
-        "rimraf": "~2.6.2",
-        "write": "^0.2.1"
-      }
-    },
     "flush-write-stream": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz",
@@ -6188,6 +5743,20 @@
       "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
       "dev": true
     },
+    "fork-ts-checker-webpack-plugin": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-0.5.2.tgz",
+      "integrity": "sha512-a5IG+xXyKnpruI0CP/anyRLAoxWtp3lzdG6flxicANnoSzz64b12dJ7ASAVRrI2OaWwZR2JyBaMHFQqInhWhIw==",
+      "dev": true,
+      "requires": {
+        "babel-code-frame": "^6.22.0",
+        "chalk": "^2.4.1",
+        "chokidar": "^2.0.4",
+        "micromatch": "^3.1.10",
+        "minimatch": "^3.0.4",
+        "tapable": "^1.0.0"
+      }
+    },
     "form-data": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
@@ -6373,7 +5942,8 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -6500,7 +6070,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6512,6 +6083,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6637,7 +6209,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6770,6 +6343,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6894,12 +6468,6 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
-    "functional-red-black-tree": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
-      "dev": true
-    },
     "gauge": {
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@@ -7922,28 +7490,6 @@
       "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
       "dev": true
     },
-    "inquirer": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz",
-      "integrity": "sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==",
-      "dev": true,
-      "requires": {
-        "ansi-escapes": "^3.0.0",
-        "chalk": "^2.0.0",
-        "cli-cursor": "^2.1.0",
-        "cli-width": "^2.0.0",
-        "external-editor": "^2.0.4",
-        "figures": "^2.0.0",
-        "lodash": "^4.3.0",
-        "mute-stream": "0.0.7",
-        "run-async": "^2.2.0",
-        "rx-lite": "^4.0.8",
-        "rx-lite-aggregates": "^4.0.8",
-        "string-width": "^2.1.0",
-        "strip-ansi": "^4.0.0",
-        "through": "^2.3.6"
-      }
-    },
     "internal-ip": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-3.0.1.tgz",
@@ -7969,6 +7515,12 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "inversify": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/inversify/-/inversify-5.0.1.tgz",
+      "integrity": "sha512-Ieh06s48WnEYGcqHepdsJUIJUXpwH5o5vodAX+DK2JA/gjy4EbEcQZxw+uFfzysmKjiLXGYwNG3qDZsKVMcINQ==",
+      "dev": true
+    },
     "invert-kv": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
@@ -7993,24 +7545,6 @@
       "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4=",
       "dev": true
     },
-    "is-absolute": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.2.6.tgz",
-      "integrity": "sha1-IN5p89uULvLYe5wto28XIjWxtes=",
-      "dev": true,
-      "requires": {
-        "is-relative": "^0.2.1",
-        "is-windows": "^0.2.0"
-      },
-      "dependencies": {
-        "is-windows": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
-          "integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw=",
-          "dev": true
-        }
-      }
-    },
     "is-absolute-url": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz",
@@ -8272,15 +7806,6 @@
       "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
       "dev": true
     },
-    "is-relative": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.2.1.tgz",
-      "integrity": "sha1-0n9MfVFtF1+2ENuEu+7yPDvJeqU=",
-      "dev": true,
-      "requires": {
-        "is-unc-path": "^0.1.1"
-      }
-    },
     "is-resolvable": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
@@ -8323,15 +7848,6 @@
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
-    "is-unc-path": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-0.1.2.tgz",
-      "integrity": "sha1-arBTpyVzwQJQ/0FqOBTDUXivObk=",
-      "dev": true,
-      "requires": {
-        "unc-path-regex": "^0.1.0"
-      }
-    },
     "is-url": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
@@ -8573,12 +8089,6 @@
         "jsonify": "~0.0.0"
       }
     },
-    "json-stable-stringify-without-jsonify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
-      "dev": true
-    },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -8715,77 +8225,6 @@
         "uc.micro": "^1.0.1"
       }
     },
-    "load-json-file": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
-      "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^2.2.0",
-        "pify": "^2.0.0",
-        "strip-bom": "^3.0.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
-        }
-      }
-    },
-    "loader-fs-cache": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.1.tgz",
-      "integrity": "sha1-VuC/CL2XCLJqdltoUJhAyN7J/bw=",
-      "dev": true,
-      "requires": {
-        "find-cache-dir": "^0.1.1",
-        "mkdirp": "0.5.1"
-      },
-      "dependencies": {
-        "find-cache-dir": {
-          "version": "0.1.1",
-          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-0.1.1.tgz",
-          "integrity": "sha1-yN765XyKUqinhPnjHFfHQumToLk=",
-          "dev": true,
-          "requires": {
-            "commondir": "^1.0.1",
-            "mkdirp": "^0.5.1",
-            "pkg-dir": "^1.0.0"
-          }
-        },
-        "find-up": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-          "dev": true,
-          "requires": {
-            "path-exists": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "path-exists": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-          "dev": true,
-          "requires": {
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "pkg-dir": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-1.0.0.tgz",
-          "integrity": "sha1-ektQio1bstYp1EcFb/TpyTFM89Q=",
-          "dev": true,
-          "requires": {
-            "find-up": "^1.0.0"
-          }
-        }
-      }
-    },
     "loader-runner": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.3.1.tgz",
@@ -8964,12 +8403,6 @@
         }
       }
     },
-    "lodash.get": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
-      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
-      "dev": true
-    },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -9066,6 +8499,12 @@
       "integrity": "sha1-EjBkIvYzJK7YSD0/ODMrX2cFR6A=",
       "dev": true
     },
+    "lodash.unescape": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.unescape/-/lodash.unescape-4.0.1.tgz",
+      "integrity": "sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=",
+      "dev": true
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -9827,12 +9266,6 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
-    "mute-stream": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
-      "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
-      "dev": true
-    },
     "nan": {
       "version": "2.11.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.1.tgz",
@@ -9866,12 +9299,6 @@
         }
       }
     },
-    "natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
-      "dev": true
-    },
     "negotiator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
@@ -9891,9 +9318,9 @@
       "dev": true
     },
     "ngeohash": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/ngeohash/-/ngeohash-0.6.0.tgz",
-      "integrity": "sha1-MpcT6ec9HxpG2SqrC5StuUUz9oc="
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/ngeohash/-/ngeohash-0.6.3.tgz",
+      "integrity": "sha512-kltF0cOxgx1AbmVzKxYZaoB0aj7mOxZeHaerEtQV0YaqnkXNq26WWqMmJ6lTqShYxVRWZ/mwvvTrNeOwdslWiw=="
     },
     "nice-try": {
       "version": "1.0.5",
@@ -10266,12 +9693,6 @@
         }
       }
     },
-    "object-hash": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-1.3.1.tgz",
-      "integrity": "sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==",
-      "dev": true
-    },
     "object-keys": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
@@ -10824,12 +10245,6 @@
         "find-up": "^2.1.0"
       }
     },
-    "pluralize": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
-      "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==",
-      "dev": true
-    },
     "pn": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
@@ -12023,6 +11438,12 @@
         }
       }
     },
+    "reflect-metadata": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.12.tgz",
+      "integrity": "sha512-n+IyV+nGz3+0q3/Yf1ra12KpCyi001bi4XFxSjbiWWjfqb52iTTtpGXmCCAOWWIAn9KEuFZKGqBERHmrtScZ3A==",
+      "dev": true
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -12062,12 +11483,6 @@
         "safe-regex": "^1.1.0"
       }
     },
-    "regexpp": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-1.1.0.tgz",
-      "integrity": "sha512-LOPw8FpgdQF9etWMaAfG/WRthIdXJGYp4mJ2Jgn/2lpkbod9jPn0t9UqN7AxBOKNfzRbYyVfgc7Vk4t/MpnXgw==",
-      "dev": true
-    },
     "regexpu-core": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.2.0.tgz",
@@ -12279,15 +11694,11 @@
       "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
       "dev": true
     },
-    "require-uncached": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz",
-      "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=",
-      "dev": true,
-      "requires": {
-        "caller-path": "^0.1.0",
-        "resolve-from": "^1.0.0"
-      }
+    "requireindex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.1.0.tgz",
+      "integrity": "sha1-5UBLgVV+91225JxacgBIk/4D4WI=",
+      "dev": true
     },
     "requires-port": {
       "version": "1.0.0",
@@ -12320,12 +11731,6 @@
         }
       }
     },
-    "resolve-from": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
-      "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=",
-      "dev": true
-    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -12393,15 +11798,6 @@
         "inherits": "^2.0.1"
       }
     },
-    "run-async": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
-      "integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=",
-      "dev": true,
-      "requires": {
-        "is-promise": "^2.1.0"
-      }
-    },
     "run-queue": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
@@ -12411,21 +11807,6 @@
         "aproba": "^1.1.1"
       }
     },
-    "rx-lite": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
-      "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true
-    },
-    "rx-lite-aggregates": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz",
-      "integrity": "sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=",
-      "dev": true,
-      "requires": {
-        "rx-lite": "*"
-      }
-    },
     "rxjs": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.2.2.tgz",
@@ -12895,15 +12276,6 @@
       "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=",
       "dev": true
     },
-    "slice-ansi": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz",
-      "integrity": "sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==",
-      "dev": true,
-      "requires": {
-        "is-fullwidth-code-point": "^2.0.0"
-      }
-    },
     "smart-buffer": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-1.1.15.tgz",
@@ -13442,12 +12814,6 @@
         "ansi-regex": "^3.0.0"
       }
     },
-    "strip-bom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-      "dev": true
-    },
     "strip-comments": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-1.0.2.tgz",
@@ -13565,52 +12931,6 @@
       "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=",
       "dev": true
     },
-    "table": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz",
-      "integrity": "sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA==",
-      "dev": true,
-      "requires": {
-        "ajv": "^5.2.3",
-        "ajv-keywords": "^2.1.0",
-        "chalk": "^2.1.0",
-        "lodash": "^4.17.4",
-        "slice-ansi": "1.0.0",
-        "string-width": "^2.1.1"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "5.5.2",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
-          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
-          "dev": true,
-          "requires": {
-            "co": "^4.6.0",
-            "fast-deep-equal": "^1.0.0",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.3.0"
-          }
-        },
-        "co": {
-          "version": "4.6.0",
-          "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-          "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-          "dev": true
-        },
-        "fast-deep-equal": {
-          "version": "1.1.0",
-          "resolved": "http://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
-          "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
-          "dev": true
-        },
-        "json-schema-traverse": {
-          "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
-          "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
-          "dev": true
-        }
-      }
-    },
     "tapable": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.1.tgz",
@@ -13856,12 +13176,6 @@
         }
       }
     },
-    "text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
-      "dev": true
-    },
     "thread-loader": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/thread-loader/-/thread-loader-1.2.0.tgz",
@@ -13889,12 +13203,6 @@
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.0.1.tgz",
       "integrity": "sha512-Sr6jZBlWShsAaSXKyNXyNicOrJW/KtkDqIEwHt4wYwWA2wa/q67Luhqoujg48V8hTk60wB56tYrJJn6jc2R7VA=="
     },
-    "through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-      "dev": true
-    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
@@ -13938,15 +13246,6 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
-    "tmp": {
-      "version": "0.0.33",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
-      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
-      "dev": true,
-      "requires": {
-        "os-tmpdir": "~1.0.2"
-      }
-    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -14092,6 +13391,19 @@
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
       "dev": true
     },
+    "ts-loader": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-5.3.2.tgz",
+      "integrity": "sha512-TPeXFkdPjOrVEawY4xUgRnzlHEmKQF1DclJghPGq67jKnroVvs6mEGHWYtbUczgeWTvTaqUjSSaMmp1k5do4vw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.3.0",
+        "enhanced-resolve": "^4.0.0",
+        "loader-utils": "^1.0.2",
+        "micromatch": "^3.1.4",
+        "semver": "^5.0.1"
+      }
+    },
     "ts-node": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-7.0.1.tgz",
@@ -14121,6 +13433,141 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
       "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
     },
+    "tslint": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.12.0.tgz",
+      "integrity": "sha512-CKEcH1MHUBhoV43SA/Jmy1l24HJJgI0eyLbBNSRyFlsQvb9v6Zdq+Nz2vEOH00nC5SUx4SneJ59PZUS/ARcokQ==",
+      "dev": true,
+      "requires": {
+        "babel-code-frame": "^6.22.0",
+        "builtin-modules": "^1.1.1",
+        "chalk": "^2.3.0",
+        "commander": "^2.12.1",
+        "diff": "^3.2.0",
+        "glob": "^7.1.1",
+        "js-yaml": "^3.7.0",
+        "minimatch": "^3.0.4",
+        "resolve": "^1.3.2",
+        "semver": "^5.3.0",
+        "tslib": "^1.8.0",
+        "tsutils": "^2.27.2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
+          "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
+          "dev": true
+        },
+        "diff": {
+          "version": "3.5.0",
+          "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+          "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+          "dev": true
+        }
+      }
+    },
+    "tslint-config-airbnb": {
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/tslint-config-airbnb/-/tslint-config-airbnb-5.11.1.tgz",
+      "integrity": "sha512-hkaittm2607vVMe8eotANGN1CimD5tor7uoY3ypg2VTtEcDB/KGWYbJOz58t8LI4cWSyWtgqYQ5F0HwKxxhlkQ==",
+      "dev": true,
+      "requires": {
+        "tslint-consistent-codestyle": "^1.14.1",
+        "tslint-eslint-rules": "^5.4.0",
+        "tslint-microsoft-contrib": "~5.2.1"
+      }
+    },
+    "tslint-consistent-codestyle": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslint-consistent-codestyle/-/tslint-consistent-codestyle-1.14.1.tgz",
+      "integrity": "sha512-UxGRX2fF5LpZtqYpuPFaIva+2D7ASX3pTVw41yis6Hmw7PPA3cBnFEX1jqRsnyxGrca6mHxz7xDnwCHtOjWJMQ==",
+      "dev": true,
+      "requires": {
+        "@fimbul/bifrost": "^0.15.0",
+        "tslib": "^1.7.1",
+        "tsutils": "^2.29.0"
+      }
+    },
+    "tslint-eslint-rules": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/tslint-eslint-rules/-/tslint-eslint-rules-5.4.0.tgz",
+      "integrity": "sha512-WlSXE+J2vY/VPgIcqQuijMQiel+UtmXS+4nvK4ZzlDiqBfXse8FAvkNnTcYhnQyOTW5KFM+uRRGXxYhFpuBc6w==",
+      "dev": true,
+      "requires": {
+        "doctrine": "0.7.2",
+        "tslib": "1.9.0",
+        "tsutils": "^3.0.0"
+      },
+      "dependencies": {
+        "doctrine": {
+          "version": "0.7.2",
+          "resolved": "http://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
+          "integrity": "sha1-fLhgNZujvpDgQLJrcpzkv6ZUxSM=",
+          "dev": true,
+          "requires": {
+            "esutils": "^1.1.6",
+            "isarray": "0.0.1"
+          }
+        },
+        "esutils": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz",
+          "integrity": "sha1-wBzKqa5LiXxtDD4hCuUvPHqEQ3U=",
+          "dev": true
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "tslib": {
+          "version": "1.9.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
+          "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ==",
+          "dev": true
+        },
+        "tsutils": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.5.2.tgz",
+          "integrity": "sha512-qIlklNuI/1Dzfm+G+kJV5gg3gimZIX5haYtIVQe7qGyKd7eu8T1t1DY6pz4Sc2CGXAj9s1izycctm9Zfl9sRuQ==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.8.1"
+          }
+        }
+      }
+    },
+    "tslint-microsoft-contrib": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/tslint-microsoft-contrib/-/tslint-microsoft-contrib-5.2.1.tgz",
+      "integrity": "sha512-PDYjvpo0gN9IfMULwKk0KpVOPMhU6cNoT9VwCOLeDl/QS8v8W2yspRpFFuUS7/c5EIH/n8ApMi8TxJAz1tfFUA==",
+      "dev": true,
+      "requires": {
+        "tsutils": "^2.27.2 <2.29.0"
+      },
+      "dependencies": {
+        "tsutils": {
+          "version": "2.28.0",
+          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.28.0.tgz",
+          "integrity": "sha512-bh5nAtW0tuhvOJnx1GLRn5ScraRLICGyJV5wJhtRWOLsxW70Kk5tZtpK3O/hW6LDnqKS9mlUMPZj9fEMJ0gxqA==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.8.1"
+          }
+        }
+      }
+    },
+    "tsutils": {
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
+      "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.8.1"
+      }
+    },
     "tty-browserify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -14173,6 +13620,45 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typescript": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.2.2.tgz",
+      "integrity": "sha512-VCj5UiSyHBjwfYacmDuc/NOk4QQixbE+Wn7MFJuS0nRuPQbof132Pw4u53dm264O8LPc2MVsc7RJNml5szurkg==",
+      "dev": true
+    },
+    "typescript-eslint-parser": {
+      "version": "21.0.2",
+      "resolved": "https://registry.npmjs.org/typescript-eslint-parser/-/typescript-eslint-parser-21.0.2.tgz",
+      "integrity": "sha512-u+pj4RVJBr4eTzj0n5npoXD/oRthvfUCjSKndhNI714MG0mQq2DJw5WP7qmonRNIFgmZuvdDOH3BHm9iOjIAfg==",
+      "dev": true,
+      "requires": {
+        "eslint-scope": "^4.0.0",
+        "eslint-visitor-keys": "^1.0.0",
+        "typescript-estree": "5.3.0"
+      },
+      "dependencies": {
+        "eslint-scope": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.0.tgz",
+          "integrity": "sha512-1G6UTDi7Jc1ELFwnR58HV4fK9OQK4S6N985f166xqXxpjU6plxFISJa2Ba9KCQuFa8RCnj/lSFJbHo7UFDBnUA==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.1.0",
+            "estraverse": "^4.1.1"
+          }
+        }
+      }
+    },
+    "typescript-estree": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/typescript-estree/-/typescript-estree-5.3.0.tgz",
+      "integrity": "sha512-Vu0KmYdSCkpae+J48wsFC1ti19Hq3Wi/lODUaE+uesc3gzqhWbZ5itWbsjylLVbjNW4K41RqDzSfnaYNbmEiMQ==",
+      "dev": true,
+      "requires": {
+        "lodash.unescape": "4.0.1",
+        "semver": "5.5.0"
+      }
+    },
     "uc.micro": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
@@ -14208,12 +13694,6 @@
       "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
       "optional": true
     },
-    "unc-path-regex": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
-      "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
-      "dev": true
-    },
     "undefsafe": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz",
@@ -14647,6 +14127,11 @@
         "throttle-debounce": "^2.0.0"
       }
     },
+    "vue-class-component": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-6.3.2.tgz",
+      "integrity": "sha512-cH208IoM+jgZyEf/g7mnFyofwPDJTM/QvBNhYMjqGB8fCsRyTf68rH2ISw/G20tJv+5mIThQ3upKwoL4jLTr1A=="
+    },
     "vue-cli-plugin-apollo": {
       "version": "0.17.4",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-apollo/-/vue-cli-plugin-apollo-0.17.4.tgz",
@@ -14700,31 +14185,6 @@
         }
       }
     },
-    "vue-eslint-parser": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
-      "integrity": "sha512-ZezcU71Owm84xVF6gfurBQUGg8WQ+WZGxgDEQu1IHFBZNx7BFZg3L1yHxrCBNNwbwFtE1GuvfJKMtb6Xuwc/Bw==",
-      "dev": true,
-      "requires": {
-        "debug": "^3.1.0",
-        "eslint-scope": "^3.7.1",
-        "eslint-visitor-keys": "^1.0.0",
-        "espree": "^3.5.2",
-        "esquery": "^1.0.0",
-        "lodash": "^4.17.4"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        }
-      }
-    },
     "vue-gettext": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/vue-gettext/-/vue-gettext-2.1.1.tgz",
@@ -14777,6 +14237,14 @@
         "markdown-it-toc-and-anchor": "^4.1.2"
       }
     },
+    "vue-property-decorator": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-7.2.0.tgz",
+      "integrity": "sha512-sCI6NVM3tEDg+mpZrQlgkddtxd9LbFWetue8D+nqO3agfSLz0KoC/UIi2P1l5E0TDhcUeIXS9rasuP2HWg+L4w==",
+      "requires": {
+        "vue-class-component": "^6.2.0"
+      }
+    },
     "vue-router": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz",
@@ -15630,15 +15098,6 @@
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
       "dev": true
     },
-    "write": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/write/-/write-0.2.1.tgz",
-      "integrity": "sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=",
-      "dev": true,
-      "requires": {
-        "mkdirp": "^0.5.1"
-      }
-    },
     "write-file-atomic": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.3.0.tgz",
diff --git a/js/package.json b/js/package.json
index e51c93b83..cd3512c38 100644
--- a/js/package.json
+++ b/js/package.json
@@ -2,16 +2,13 @@
   "name": "mobilizon",
   "version": "0.1.0",
   "private": true,
-  "engines": {
-    "node": ">=10.0.0"
-  },
   "scripts": {
-    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build --modern",
     "lint": "vue-cli-service lint",
+    "analyze-bundle": "npm run build -- --report-json && webpack-bundle-analyzer ../priv/static/report.json",
+    "dev": "vue-cli-service serve",
     "test:e2e": "vue-cli-service test:e2e",
-    "test:unit": "vue-cli-service test:unit",
-    "analyze-bundle": "npm run build -- --report-json && webpack-bundle-analyzer ../priv/static/report.json"
+    "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
     "apollo-absinthe-upload-link": "^1.4.0",
@@ -22,31 +19,37 @@
     "graphql-tag": "^2.9.0",
     "material-design-icons": "^3.0.1",
     "moment": "^2.22.2",
-    "ngeohash": "^0.6.0",
+    "ngeohash": "^0.6.3",
     "register-service-worker": "^1.4.1",
     "vue": "^2.5.17",
     "vue-apollo": "^3.0.0-beta.26",
+    "vue-class-component": "^6.3.2",
     "vue-gettext": "^2.1.1",
     "vue-gravatar": "^1.3.0",
     "vue-markdown": "^2.2.4",
+    "vue-property-decorator": "^7.2.0",
     "vue-router": "^3.0.2",
     "vuetify": "^1.3.9",
     "vuetify-google-autocomplete": "^2.0.0-beta.5",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
+    "@types/chai": "^4.1.0",
+    "@types/mocha": "^5.2.4",
     "@vue/cli-plugin-babel": "^3.1.1",
     "@vue/cli-plugin-e2e-nightwatch": "^3.1.1",
-    "@vue/cli-plugin-eslint": "^3.1.5",
     "@vue/cli-plugin-pwa": "^3.1.2",
+    "@vue/cli-plugin-typescript": "^3.2.0",
     "@vue/cli-plugin-unit-mocha": "^3.1.1",
     "@vue/cli-service": "^3.1.4",
-    "@vue/eslint-config-airbnb": "^3.0.5",
+    "@vue/eslint-config-typescript": "^3.1.0",
     "@vue/test-utils": "^1.0.0-beta.26",
     "chai": "^4.2.0",
     "dotenv-webpack": "^1.5.7",
     "node-sass": "^4.10.0",
     "sass-loader": "^7.1.0",
+    "tslint-config-airbnb": "^5.11.1",
+    "typescript": "^3.0.0",
     "vue-cli-plugin-apollo": "^0.17.4",
     "vue-template-compiler": "^2.5.17",
     "webpack-bundle-analyzer": "^3.0.3"
@@ -55,5 +58,8 @@
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
-  ]
+  ],
+  "engines": {
+    "node": ">=10.0.0"
+  }
 }
diff --git a/js/src/App.vue b/js/src/App.vue
index 7c235cb08..3aefce0ad 100644
--- a/js/src/App.vue
+++ b/js/src/App.vue
@@ -14,15 +14,15 @@
         >
           <v-list-tile avatar v-if="actor" slot="activator">
             <v-list-tile-avatar>
-                <img v-if="!actor.avatar"
-                  class="img-circle elevation-7 mb-1"
-                  src="https://picsum.photos/125/125/"
-                >
-                <img v-else
-                      class="img-circle elevation-7 mb-1"
-                      :src="actor.avatar"
-                >
-              </v-list-tile-avatar>
+              <img v-if="!actor.avatar"
+                   class="img-circle elevation-7 mb-1"
+                   src="https://picsum.photos/125/125/"
+              >
+              <img v-else
+                   class="img-circle elevation-7 mb-1"
+                   :src="actor.avatar"
+              >
+            </v-list-tile-avatar>
 
             <v-list-tile-content @click="$router.push({name: 'Account', params: { name: actor.username }})">
               <v-list-tile-title>{{ this.displayed_name }}</v-list-tile-title>
@@ -31,11 +31,11 @@
 
           <v-list-tile avatar v-if="actor">
             <v-list-tile-avatar>
-                <img
-                  class="img-circle elevation-7 mb-1"
-                  src="https://picsum.photos/125/125/"
-                >
-              </v-list-tile-avatar>
+              <img
+                class="img-circle elevation-7 mb-1"
+                src="https://picsum.photos/125/125/"
+              >
+            </v-list-tile-avatar>
 
             <v-list-tile-content>
               <v-list-tile-title>Autre identité</v-list-tile-title>
@@ -44,8 +44,8 @@
 
           <v-list-tile @click="$router.push({ name: 'Identities' })">
             <v-list-tile-action>
-            <v-icon>group</v-icon>
-          </v-list-tile-action>
+              <v-icon>group</v-icon>
+            </v-list-tile-action>
             <v-list-tile-content>
               <v-list-tile-title>Identities</v-list-tile-title>
             </v-list-tile-content>
@@ -100,7 +100,7 @@
       transition="scale-transition"
       v-if="user"
     >
-    <v-btn
+      <v-btn
         slot="activator"
         v-model="fab"
         color="blue darken-2"
@@ -134,7 +134,8 @@
         class="white--text"
         v-translate="{
           date: new Date().getFullYear(),
-          }">© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix & <a href="https://vuejs.org/">VueJS</a> & <a href="https://www.vuetifyjs.com/">Vuetify</a> with some love and some weeks
+          }">© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix & <a href="https://vuejs.org/">VueJS</a> & <a
+        href="https://www.vuetifyjs.com/">Vuetify</a> with some love and some weeks
       </span>
     </v-footer>
     <v-snackbar
@@ -148,75 +149,76 @@
   </v-app>
 </template>
 
-<script>
-import gql from 'graphql-tag';
-import NavBar from '@/components/NavBar';
+<script lang="ts">
+import NavBar from '@/components/NavBar.vue';
+import { Component, Vue } from 'vue-property-decorator';
 import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
 
-export default {
-  name: 'app',
+@Component({
   components: {
     NavBar,
   },
-  data() {
-    return {
-      drawer: false,
-      fab: false,
-      user: localStorage.getItem(AUTH_USER_ID),
-      items: [
-        {
-          icon: 'poll', text: 'Events', route: 'EventList', role: null,
-        },
-        {
-          icon: 'group', text: 'Groups', route: 'GroupList', role: null,
-        },
-        {
-          icon: 'content_copy', text: 'Categories', route: 'CategoryList', role: 'ROLE_ADMIN',
-        },
-        { icon: 'settings', text: 'Settings', role: 'ROLE_USER' },
-        { icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
-        { icon: 'help', text: 'Help', role: null },
-        { icon: 'phonelink', text: 'App downloads', role: null },
-      ],
-      error: {
-        timeout: 3000,
-        show: false,
-        text: '',
-      },
-      show_new_event_button: false,
-      actor: localStorage.getItem(AUTH_USER_ACTOR),
-    };
-  },
-  methods: {
-    showMenuItem(elem) {
-      return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true;
+})
+export default class App extends Vue {
+  drawer = false;
+  fab = false;
+  user = localStorage.getItem(AUTH_USER_ID);
+  items = [
+    {
+      icon: 'poll', text: 'Events', route: 'EventList', role: null,
     },
-    getUser() {
-      return this.user === undefined ? false : this.user;
+    {
+      icon: 'group', text: 'Groups', route: 'GroupList', role: null,
     },
-    toggleDrawer() {
-      this.drawer = !this.drawer;
+    {
+      icon: 'content_copy', text: 'Categories', route: 'CategoryList', role: 'ROLE_ADMIN',
     },
-  },
-  computed: {
-    displayed_name() {
-      return this.actor.display_name === null ? this.actor.username : this.actor.display_name;
-    },
-  },
-};
+    { icon: 'settings', text: 'Settings', role: 'ROLE_USER' },
+    { icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
+    { icon: 'help', text: 'Help', role: null },
+    { icon: 'phonelink', text: 'App downloads', role: null },
+  ];
+  error = {
+    timeout: 3000,
+    show: false,
+    text: '',
+  };
+
+  actor = localStorage.getItem(AUTH_USER_ACTOR);
+
+  get displayed_name () {
+    // FIXME: load actor
+    return 'no implemented';
+    // return this.actor.display_name === null ? this.actor.username : this.actor.display_name
+  }
+
+  showMenuItem (elem) {
+    // FIXME: load actor
+    return false;
+    // return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true
+  }
+
+  getUser () {
+    return this.user === undefined ? false : this.user;
+  }
+
+  toggleDrawer () {
+    this.drawer = !this.drawer;
+  }
+}
 </script>
 
 <style>
-.router-enter-active, .router-leave-active {
-  transition-property: opacity;
-  transition-duration: .25s;
-}
+  .router-enter-active, .router-leave-active {
+    transition-property: opacity;
+    transition-duration: .25s;
+  }
 
-.router-enter-active {
-  transition-delay: .25s;
-}
+  .router-enter-active {
+    transition-delay: .25s;
+  }
 
-.router-enter, .router-leave-active {
-  opacity: 0
-}
+  .router-enter, .router-leave-active {
+    opacity: 0
+  }
 </style>
diff --git a/js/src/api/_entrypoint.js b/js/src/api/_entrypoint.ts
similarity index 100%
rename from js/src/api/_entrypoint.js
rename to js/src/api/_entrypoint.ts
diff --git a/js/src/components/Account/Account.vue b/js/src/components/Account/Account.vue
index 068348637..0f9b06a11 100644
--- a/js/src/components/Account/Account.vue
+++ b/js/src/components/Account/Account.vue
@@ -31,12 +31,12 @@
             <div class="text-xs-center">
               <v-avatar size="125px">
                 <img v-if="!actor.avatarUrl"
-                  class="img-circle elevation-7 mb-1"
-                  src="https://picsum.photos/125/125/"
+                     class="img-circle elevation-7 mb-1"
+                     src="https://picsum.photos/125/125/"
                 >
                 <img v-else
-                      class="img-circle elevation-7 mb-1"
-                      :src="actor.avatarUrl"
+                     class="img-circle elevation-7 mb-1"
+                     :src="actor.avatarUrl"
                 >
               </v-avatar>
             </div>
@@ -44,7 +44,8 @@
               <v-layout row>
                 <v-flex xs7>
                   <div class="headline">{{ actor.name }}</div>
-                  <div><span class="subheading">@{{ actor.preferredUsername }}<span v-if="actor.domain">@{{ actor.domain }}</span></span></div>
+                  <div><span class="subheading">@{{ actor.preferredUsername }}<span v-if="actor.domain">@{{ actor.domain }}</span></span>
+                  </div>
                   <v-card-text v-if="actor.description" v-html="actor.description"></v-card-text>
                 </v-flex>
               </v-layout>
@@ -107,7 +108,9 @@
                   <div>
                     <span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
                     <p>{{ event.description }}</p>
-                    <p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
+                    <p v-if="event.organizer">Organisé par
+                      <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link>
+                    </p>
                   </div>
                 </v-card-title>
                 <v-card-actions>
@@ -143,7 +146,7 @@
                     <span class="grey--text" v-html="nl2br(event.description)"></span>
                   </div>
                 </v-card-title>
-                
+
                 <!-- <v-card-title>
                   <div>
                     <span class="grey--text" v-if="event.addressType === 'physical'">{{ event.startDate }} à {{ event.location }}</span><br>
@@ -171,46 +174,40 @@
   </v-layout>
 </template>
 
-<script>
-import { FETCH_ACTOR } from '@/graphql/actor';
+<script lang="ts">
+  import { FETCH_ACTOR } from '@/graphql/actor';
+  import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 
-export default {
-  name: 'Account',
-  data() {
-    return {
-      actor: null,
-    };
-  },
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-  apollo: {
-    actor: {
-      query: FETCH_ACTOR,
-      variables() {
-        return {
-          name: this.$route.params.name,
-        };
+  @Component({
+    apollo: {
+      actor: {
+        query: FETCH_ACTOR,
+        variables() {
+          return {
+            name: this.$route.params.name,
+          };
+        },
       },
     },
-  },
-  created() {
-  },
-  watch: {
+  })
+  export default class Account extends Vue {
+    @Prop({ type: String, required: true }) name!: string;
+
+    actor = null;
+
     // call again the method if the route changes
-    $route: 'fetchData',
-  },
-  methods: {
+    @Watch('$route')
+    onRouteChange() {
+      // this.fetchData()
+    }
+
     logoutUser() {
       // TODO : implement logout
       this.$router.push({ name: 'Home' });
-    },
-    nl2br: function(text) {
+    }
+
+    nl2br(text) {
       return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
     }
-  },
-};
+  };
 </script>
diff --git a/js/src/components/Account/Identities.vue b/js/src/components/Account/Identities.vue
index 1e65e5437..0c468c26a 100644
--- a/js/src/components/Account/Identities.vue
+++ b/js/src/components/Account/Identities.vue
@@ -1,11 +1,11 @@
 <template>
   <v-layout row>
-  <v-flex xs12 sm6 offset-sm3>
-    <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
-    <v-card v-if="!loading">
-      <v-toolbar dark color="primary">
-        <v-toolbar-title>Identities</v-toolbar-title>
-      </v-toolbar>
+    <v-flex xs12 sm6 offset-sm3>
+      <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
+      <v-card v-if="!loading">
+        <v-toolbar dark color="primary">
+          <v-toolbar-title>Identities</v-toolbar-title>
+        </v-toolbar>
         <v-card-text>
           <v-list two-line>
             <v-list-tile
@@ -31,22 +31,22 @@
           <v-divider v-if="showForm"></v-divider>
           <v-form v-if="showForm">
             <v-text-field
-                label="Username"
-                required
-                type="text"
-                v-model="newActor.preferred_username"
-                :rules="[rules.required]"
-                :error="this.state.username.status"
-                :error-messages="this.state.username.msg"
-                :suffix="this.host()"
-                hint="You will be able to create more identities once registered"
-                persistent-hint
+              label="Username"
+              required
+              type="text"
+              v-model="newActor.preferred_username"
+              :rules="[rules.required]"
+              :error="this.state.username.status"
+              :error-messages="this.state.username.msg"
+              :suffix="this.host()"
+              hint="You will be able to create more identities once registered"
+              persistent-hint
             >
             </v-text-field>
             <v-textarea
-                name="input-7-1"
-                label="Profile description"
-                hint="Will be displayed publicly on your profile"
+              name="input-7-1"
+              label="Profile description"
+              hint="Will be displayed publicly on your profile"
             ></v-textarea>
           </v-form>
           <v-btn
@@ -57,73 +57,77 @@
             right
             fab
             @click="toggleForm()"
-            >
+          >
             <v-icon>{{ showForm ? 'check' : 'add' }}</v-icon>
           </v-btn>
         </v-card-text>
-    </v-card>
-  </v-flex>
+      </v-card>
+    </v-flex>
   </v-layout>
 </template>
 
-<script>
-export default {
-  name: 'Identities',
-  data() {
-    return {
-      actors: [],
-      newActor: {
-        preferred_username: '',
-        summary: '',
-      },
-      loading: true,
-      showForm: false,
-      rules: {
-        required: value => !!value || 'Required.',
-      },
-      state: {
-        username: {
-          status: false,
-          msg: [],
-        },
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class Identities extends Vue {
+    actors = [];
+    newActor = {
+      preferred_username: '',
+      summary: '',
+    };
+    loading = true;
+    showForm = false;
+    rules = {
+      required: value => !!value || 'Required.',
+    };
+    state = {
+      username: {
+        status: false,
+        msg: [],
       },
     };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
+
+    created() {
+      this.fetchData();
+    }
+
     fetchData() {
-      eventFetch('/user', this.$store)
-        .then(response => response.json())
-        .then((response) => {
-          this.actors = response.data.actors;
-          this.loading = false;
-        });
-    },
+      // Implements eventFetch
+      // eventFetch('/user', this.$store)
+      //   .then(response => response.json())
+      //   .then((response) => {
+      //     this.actors = response.data.actors;
+      //     this.loading = false;
+      //   });
+    }
+
     sendData() {
       this.loading = true;
       this.showForm = false;
-      eventFetch('/actors', this.$store, {
-        method: 'POST',
-        body: JSON.stringify({ actor: this.newActor }),
-      })
-        .then(response => response.json())
-        .then((response) => {
-          this.actors.push(response.data);
-          this.loading = false;
-        });
-    },
+
+      // Implements eventFetch
+      // eventFetch('/actors', this.$store, {
+      //   method: 'POST',
+      //   body: JSON.stringify({ actor: this.newActor }),
+      // })
+      //   .then(response => response.json())
+      //   .then((response) => {
+      //     this.actors.push(response.data);
+      //     this.loading = false;
+      //   });
+    }
+
     toggleForm() {
       if (this.showForm === true) {
         this.sendData();
       } else {
         this.showForm = true;
       }
-    },
+    }
+
     host() {
       return `@${window.location.host}`;
-    },
-  },
-};
+    }
+  }
 </script>
diff --git a/js/src/components/Account/Login.vue b/js/src/components/Account/Login.vue
index c730c3915..dcc74a40d 100644
--- a/js/src/components/Account/Login.vue
+++ b/js/src/components/Account/Login.vue
@@ -58,90 +58,84 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
 
-import Gravatar from 'vue-gravatar';
-import RegisterAvatar from './RegisterAvatar';
-import { AUTH_TOKEN, AUTH_USER_ID, AUTH_USER_ACTOR } from '@/constants';
-import { LOGIN } from '@/graphql/auth';
+  import Gravatar from 'vue-gravatar';
+  import RegisterAvatar from './RegisterAvatar.vue';
+  import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import { LOGIN } from '@/graphql/auth';
 
-export default {
-  props: {
-    email: {
-      type: String,
-      required: false,
-      default: '',
+  @Component({
+    components: {
+      'v-gravatar': Gravatar,
+      avatar: RegisterAvatar,
     },
-    password: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  beforeCreate() {
-    if (this.user) {
-      this.$router.push('/');
-    }
-  },
-  components: {
-    'v-gravatar': Gravatar,
-    avatar: RegisterAvatar,
-  },
-  mounted() {
-    this.credentials.email = this.email;
-    this.credentials.password = this.password;
-  },
-  data() {
-    return {
-      credentials: {
-        email: '',
-        password: '',
-      },
-      validationSent: false,
-      error: {
-        show: false,
-        text: '',
-        timeout: 3000,
-        field: {
-          email: false,
-          password: false,
-        },
-      },
-      rules: {
-        required: value => !!value || 'Required.',
-        email: (value) => {
-          const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-          return pattern.test(value) || 'Invalid e-mail.';
-        },
+  })
+  export default class Login extends Vue {
+    @Prop({ type: String, required: false, default: '' }) email!: string;
+    @Prop({ type: String, required: false, default: '' }) password!: string;
+
+    credentials = {
+      email: '',
+      password: '',
+    };
+    validationSent = false;
+    error = {
+      show: false,
+      text: '',
+      timeout: 3000,
+      field: {
+        email: false,
+        password: false,
       },
     };
-  },
-  methods: {
+    rules = {
+      required: value => !!value || 'Required.',
+      email: (value) => {
+        const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return pattern.test(value) || 'Invalid e-mail.';
+      },
+    };
+    user: any;
+
+    beforeCreate() {
+      if (this.user) {
+        this.$router.push('/');
+      }
+    }
+
+    mounted() {
+      this.credentials.email = this.email;
+      this.credentials.password = this.password;
+    }
+
     loginAction(e) {
       e.preventDefault();
       this.$apollo.mutate({
         mutation: LOGIN,
         variables: {
           email: this.credentials.email,
-          password: this.credentials.password
-        }
+          password: this.credentials.password,
+        },
       }).then((result) => {
         this.saveUserData(result.data);
-        this.$router.push({name: 'Home'});
+        this.$router.push({ name: 'Home' });
       }).catch((e) => {
         console.log(e);
         this.error.show = true;
         this.error.text = e.message;
       });
-    },
+    }
+
     validEmail() {
       return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
-    },
-    saveUserData({login: login}) {
+    }
+
+    saveUserData({ login: login }) {
       localStorage.setItem(AUTH_USER_ID, login.user.id);
       localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
       localStorage.setItem(AUTH_TOKEN, login.token);
     }
-  },
-};
+  }
 </script>
diff --git a/js/src/components/Account/PasswordReset.vue b/js/src/components/Account/PasswordReset.vue
index 939cc4e66..12ffe0039 100644
--- a/js/src/components/Account/PasswordReset.vue
+++ b/js/src/components/Account/PasswordReset.vue
@@ -36,75 +36,74 @@
   </v-container>
 </template>
 
-<script>
-export default {
-  name: 'PasswordReset',
-  props: {
-    token: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    samePasswords() {
-      return this.rules.password_length(this.credentials.password) === true &&
-          this.credentials.password === this.credentials.password_confirmation;
-    },
-  },
-  data() {
-    return {
-      credentials: {
-        password: '',
-        password_confirmation: '',
+<script lang="ts">
+
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class PasswordReset extends Vue {
+    @Prop({ type: String, required: true }) token!: string;
+
+    credentials = {
+      password: '',
+      password_confirmation: '',
+    };
+    error = {
+      show: false,
+    };
+    state = {
+      token: {
+        status: null,
+        msg: '',
       },
-      error: {
-        show: false,
+      password: {
+        status: null,
+        msg: '',
       },
-      state: {
-        token: {
-          status: null,
-          msg: '',
-        },
-        password: {
-          status: null,
-          msg: '',
-        },
-        password_confirmation: {
-          status: null,
-          msg: '',
-        },
-      },
-      rules: {
-        password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
-        required: value => !!value || 'Required.',
-        password_equal: value => value === this.credentials.password || 'Passwords must be the same',
+      password_confirmation: {
+        status: null,
+        msg: '',
       },
     };
-  },
-  methods: {
+    rules = {
+      password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
+      required: value => !!value || 'Required.',
+      password_equal: value => value === this.credentials.password || 'Passwords must be the same',
+    };
+
+    get samePasswords() {
+      return this.rules.password_length(this.credentials.password) === true &&
+        this.credentials.password === this.credentials.password_confirmation;
+    }
+
     resetAction(e) {
       this.resetState();
       e.preventDefault();
       console.log(this.token);
-      fetchStory('/users/password-reset/post', this.$store, { method: 'POST', body: JSON.stringify({ password: this.credentials.password, token: this.token }) }).then((data) => {
-        localStorage.setItem('token', data.token);
-        localStorage.setItem('refresh_token', data.refresh_token);
-        this.$store.commit('LOGIN_USER', data.account);
-        this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
-        this.$router.push({ name: 'Home' });
-      }, (error) => {
-        Promise.resolve(error).then((errormsg) => {
-          console.log('errormsg', errormsg);
-          this.error.show = true;
-          Object.entries(JSON.parse(errormsg).errors).forEach(([key, val]) => {
-            console.log('key', key);
-            console.log('val', val[0]);
-            this.state[key] = { status: false, msg: val[0] };
-            console.log('state', this.state);
-          });
-        });
-      });
-    },
+      // FIXME: implements fetchStory
+      // fetchStory('/users/password-reset/post', this.$store, {
+      //   method: 'POST',
+      //   body: JSON.stringify({ password: this.credentials.password, token: this.token }),
+      // }).then((data) => {
+      //   localStorage.setItem('token', data.token);
+      //   localStorage.setItem('refresh_token', data.refresh_token);
+      //   this.$store.commit('LOGIN_USER', data.account);
+      //   this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
+      //   this.$router.push({ name: 'Home' });
+      // }, (error) => {
+      //   Promise.resolve(error).then((errormsg) => {
+      //     console.log('errormsg', errormsg);
+      //     this.error.show = true;
+      //     Object.entries(JSON.parse(errormsg).errors).forEach(([ key, val ]) => {
+      //       console.log('key', key);
+      //       console.log('val', val[ 0 ]);
+      //       this.state[ key ] = { status: false, msg: val[ 0 ] };
+      //       console.log('state', this.state);
+      //     });
+      //   });
+      // });
+    }
+
     resetState() {
       this.state = {
         token: {
@@ -120,7 +119,6 @@ export default {
           msg: '',
         },
       };
-    },
-  },
-};
+    }
+  };
 </script>
diff --git a/js/src/components/Account/Register.vue b/js/src/components/Account/Register.vue
index 49bbdd931..d3010c55c 100644
--- a/js/src/components/Account/Register.vue
+++ b/js/src/components/Account/Register.vue
@@ -68,8 +68,12 @@
               <router-link :to="{ name: 'ResendConfirmation', params: { email }}">Didn't receive the instructions ?</router-link>
             </v-form>
             <div v-if="validationSent">
-              <h2><translate>A validation email was sent to %{email}</translate></h2>
-              <v-alert :value="true" type="info"><translate>Before you can login, you need to click on the link inside it to validate your account</translate></v-alert>
+              <h2>
+                <translate>A validation email was sent to %{email}</translate>
+              </h2>
+              <v-alert :value="true" type="info">
+                <translate>Before you can login, you need to click on the link inside it to validate your account</translate>
+              </v-alert>
             </div>
           </v-card-text>
         </v-card>
@@ -78,85 +82,78 @@
   </v-container>
 </template>
 
-<script>
-import Gravatar from 'vue-gravatar';
-import RegisterAvatar from './RegisterAvatar';
-import { CREATE_USER } from '@/graphql/user';
+<script lang="ts">
+  import Gravatar from 'vue-gravatar';
+  import RegisterAvatar from './RegisterAvatar.vue';
+  import { CREATE_USER } from '@/graphql/user';
+  import { Component, Prop, Vue } from 'vue-property-decorator';
 
-export default {
-  props: {
-    default_email: {
-      type: String,
-      required: false,
-      default: '',
+  @Component({
+    components: {
+      'v-gravatar': Gravatar,
+      avatar: RegisterAvatar,
     },
-    default_password: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  components: {
-    'v-gravatar': Gravatar,
-    avatar: RegisterAvatar,
-  },
-  data() {
-    return {
-      username: '',
-      email: this.default_email,
-      password: this.default_password,
-      error: {
-        show: false,
+  })
+  export default class Register extends Vue {
+    @Prop({ type: String, required: false, default: '' }) default_email!: string;
+    @Prop({ type: String, required: false, default: '' }) default_password!: string;
+
+    username = '';
+    email = this.default_email;
+    password = this.default_password;
+    error = {
+      show: false,
+    };
+    showPassword = false;
+    validationSent = false;
+    state = {
+      email: {
+        status: false,
+        msg: [],
       },
-      showPassword: false,
-      validationSent: false,
-      state: {
-        email: {
-          status: false,
-          msg: [],
-        },
-        username: {
-          status: false,
-          msg: [],
-        },
-        password: {
-          status: false,
-          msg: [],
-        },
+      username: {
+        status: false,
+        msg: [],
       },
-      rules: {
-        password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
-        required: value => !!value || 'Required.',
-        email: (value) => {
-          const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-          return pattern.test(value) || 'Invalid e-mail.';
-        },
+      password: {
+        status: false,
+        msg: [],
       },
     };
-  },
-  methods: {
+    rules = {
+      password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
+      required: value => !!value || 'Required.',
+      email: (value) => {
+        const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return pattern.test(value) || 'Invalid e-mail.';
+      },
+    };
+
     resetState() {
       this.state = {
         email: {
           status: false,
-          msg: '',
+          msg: [],
         },
         username: {
           status: false,
-          msg: '',
+          msg: [],
         },
         password: {
           status: false,
-          msg: '',
+          msg: [],
         },
       };
-    },
+    }
+
     host() {
       return `@${window.location.host}`;
-    },
+    }
+
     validEmail() {
       return this.rules.email(this.email) === true ? 'v-gravatar' : 'avatar';
-    },
+    }
+
     submit() {
       this.$apollo.mutate({
         mutation: CREATE_USER,
@@ -171,19 +168,20 @@ export default {
       }).catch((error) => {
         console.error(error);
       });
-    },
-  },
-};
+    }
+  };
 </script>
-<style lang="scss">
-.avatar-enter-active {
-  transition: opacity 1s ease;
-}
-.avatar-enter, .avatar-leave-to {
-  opacity: 0;
-}
 
-.avatar-leave {
-  display: none;
-}
+<style lang="scss">
+  .avatar-enter-active {
+    transition: opacity 1s ease;
+  }
+
+  .avatar-enter, .avatar-leave-to {
+    opacity: 0;
+  }
+
+  .avatar-leave {
+    display: none;
+  }
 </style>
diff --git a/js/src/components/Account/RegisterAvatar.vue b/js/src/components/Account/RegisterAvatar.vue
index d54e920a9..db44bb544 100644
--- a/js/src/components/Account/RegisterAvatar.vue
+++ b/js/src/components/Account/RegisterAvatar.vue
@@ -1,9 +1,12 @@
 <template>
-    <img class="img-circle elevation-7 mb-1" src="@/assets/profile.svg">
+  <img class="img-circle elevation-7 mb-1" src="@/assets/profile.svg">
 </template>
-<script>
-export default {
-  name: 'RegisterAvatar',
-};
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class RegisterAvatar extends Vue {
+  }
 </script>
 
diff --git a/js/src/components/Account/ResendConfirmation.vue b/js/src/components/Account/ResendConfirmation.vue
index 0dc3d1a9d..119f90182 100644
--- a/js/src/components/Account/ResendConfirmation.vue
+++ b/js/src/components/Account/ResendConfirmation.vue
@@ -30,53 +30,48 @@
   </v-container>
 </template>
 
-<script>
-export default {
-  name: 'ResendConfirmation',
-  props: {
-    email: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      credentials: {
-        email: '',
-      },
-      validationSent: false,
-      error: false,
-      state: {
-        email: {
-          status: null,
-          msg: '',
-        },
-      },
-      rules: {
-        required: value => !!value || 'Required.',
-        email: (value) => {
-          const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-          return pattern.test(value) || 'Invalid e-mail.';
-        },
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class ResendConfirmation extends Vue {
+    @Prop({ type: String, required: false, default: '' }) email!: string;
+
+    credentials = {
+      email: '',
+    };
+    validationSent = false;
+    error = false;
+    state = {
+      email: {
+        status: null,
+        msg: '',
       },
     };
-  },
-  mounted() {
-    this.credentials.email = this.email;
-  },
-  methods: {
+    rules = {
+      required: value => !!value || 'Required.',
+      email: (value) => {
+        const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return pattern.test(value) || 'Invalid e-mail.';
+      },
+    };
+
+    mounted() {
+      this.credentials.email = this.email;
+    }
+
     resendConfirmationAction(e) {
       e.preventDefault();
-      fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
-        this.validationSent = true;
-      }).catch((err) => {
-        Promise.resolve(err).then(() => {
-          this.error = true;
-          this.validationSent = true;
-        });
-      });
-    },
-  },
-};
+
+      // FIXME: implement fetchStory
+      // fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
+      //   this.validationSent = true;
+      // }).catch((err) => {
+      //   Promise.resolve(err).then(() => {
+      //     this.error = true;
+      //     this.validationSent = true;
+      //   });
+      // });
+    }
+  };
 </script>
diff --git a/js/src/components/Account/SendPasswordReset.vue b/js/src/components/Account/SendPasswordReset.vue
index e57376a73..bedc389b7 100644
--- a/js/src/components/Account/SendPasswordReset.vue
+++ b/js/src/components/Account/SendPasswordReset.vue
@@ -30,54 +30,51 @@
   </v-container>
 </template>
 
-<script>
-export default {
-  name: 'SendPasswordReset',
-  props: {
-    email: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  mounted() {
-    this.credentials.email = this.email;
-  },
-  data() {
-    return {
-      credentials: {
-        email: '',
-      },
-      validationSent: false,
-      error: false,
-      state: {
-        email: {
-          status: null,
-          msg: '',
-        },
-      },
-      rules: {
-        required: value => !!value || 'Required.',
-        email: (value) => {
-          const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-          return pattern.test(value) || 'Invalid e-mail.';
-        },
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class SendPasswordReset extends Vue {
+    @Prop({ type: String, required: false, default: '' }) email!: string;
+
+    credentials = {
+      email: '',
+    };
+    validationSent = false;
+    error = false;
+    state = {
+      email: {
+        status: null,
+        msg: '',
       },
     };
-  },
-  methods: {
+
+    rules = {
+      required: value => !!value || 'Required.',
+      email: (value) => {
+        const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return pattern.test(value) || 'Invalid e-mail.';
+      },
+    };
+
+    mounted() {
+      this.credentials.email = this.email;
+    }
+
     resendConfirmationAction(e) {
       e.preventDefault();
-      fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
-        this.error = false;
-        this.validationSent = true;
-      }).catch((err) => {
-        Promise.resolve(err).then((data) => {
-          this.error = true;
-          this.state.email = { status: false, msg: data.errors };
-        });
-      });
-    },
+      // FIXME: implement fetchStory
+      // fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
+      //   this.error = false;
+      //   this.validationSent = true;
+      // }).catch((err) => {
+      //   Promise.resolve(err).then((data) => {
+      //     this.error = true;
+      //     this.state.email = { status: false, msg: data.errors };
+      //   });
+      // });
+    }
+
     resetState() {
       this.state = {
         email: {
@@ -85,7 +82,6 @@ export default {
           msg: '',
         },
       };
-    },
-  },
-};
+    }
+  };
 </script>
diff --git a/js/src/components/Account/Validate.vue b/js/src/components/Account/Validate.vue
index b7163500d..32815d7f5 100644
--- a/js/src/components/Account/Validate.vue
+++ b/js/src/components/Account/Validate.vue
@@ -1,36 +1,37 @@
 <template>
   <v-container>
-    <h1 v-if="loading"><translate>Your account is being validated</translate></h1>
+    <h1 v-if="loading">
+      <translate>Your account is being validated</translate>
+    </h1>
     <div v-else>
       <div v-if="failed">
-        <v-alert :value="true" variant="danger"><translate>Error while validating account</translate></v-alert>
+        <v-alert :value="true" variant="danger">
+          <translate>Error while validating account</translate>
+        </v-alert>
       </div>
-      <h1 v-else><translate>Your account has been validated</translate></h1>
+      <h1 v-else>
+        <translate>Your account has been validated</translate>
+      </h1>
     </div>
   </v-container>
 </template>
 
-<script>
-import { VALIDATE_USER } from '@/graphql/user';
+<script lang="ts">
+  import { VALIDATE_USER } from '@/graphql/user';
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
+
+  @Component
+  export default class Validate extends Vue {
+    @Prop({ type: String, required: true }) token!: string;
+
+    loading = true;
+    failed = false;
+
+    created() {
+      this.validateAction();
+    }
 
-export default {
-  name: 'Validate',
-  data() {
-    return {
-      loading: true,
-      failed: false,
-    };
-  },
-  props: {
-    token: {
-      type: String,
-      required: true,
-    },
-  },
-  created() {
-    this.validateAction();
-  },
-  methods: {
     validateAction() {
       this.$apollo.mutate({
         mutation: VALIDATE_USER,
@@ -41,18 +42,19 @@ export default {
         this.loading = false;
         console.log(data);
         this.saveUserData(data.data);
-        this.$router.push({name: 'Home'});
+        this.$router.push({ name: 'Home' });
       }).catch((error) => {
         this.loading = false;
         console.log(error);
         this.failed = true;
       });
-    },
-    saveUserData({validateUser: login}) {
+    }
+
+    saveUserData({ validateUser: login }) {
       localStorage.setItem(AUTH_USER_ID, login.user.id);
       localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
       localStorage.setItem(AUTH_TOKEN, login.token);
     }
-  },
-};
+
+  };
 </script>
diff --git a/js/src/components/Category/Create.vue b/js/src/components/Category/Create.vue
index 05aa1530f..c36ddec53 100644
--- a/js/src/components/Category/Create.vue
+++ b/js/src/components/Category/Create.vue
@@ -4,7 +4,9 @@
       <v-flex xs12 sm8 md4>
         <v-card class="elevation-12">
           <v-toolbar dark color="primary">
-              <v-toolbar-title><translate>Create a new category</translate></v-toolbar-title>
+            <v-toolbar-title>
+              <translate>Create a new category</translate>
+            </v-toolbar-title>
           </v-toolbar>
           <v-card-text>
             <v-form>
@@ -29,7 +31,9 @@
                   @change="onFilePicked"
                 >
               </v-flex>
-              <v-btn color="primary" @click="create"><translate>Create category</translate></v-btn>
+              <v-btn color="primary" @click="create">
+                <translate>Create category</translate>
+              </v-btn>
             </v-form>
           </v-card-text>
         </v-card>
@@ -38,50 +42,48 @@
   </v-container>
 </template>
 
-<script>
-import { UPLOAD_PICTURE } from '@/graphql/upload';
-import { CREATE_CATEGORY } from '@/graphql/category';
+<script lang="ts">
+  import { CREATE_CATEGORY } from '@/graphql/category';
+  import { Component, Vue } from 'vue-property-decorator';
 
-export default {
-  name: 'create-category',
-  data() {
-    return {
-      title: '',
-      description: '',
-      image: {
-        url: '',
-        name: '',
-        file: '',
-      },
+  @Component
+  export default class CreateCategory extends Vue {
+    title = '';
+    description = '';
+    image = {
+      url: '',
+      name: '',
+      file: '',
     };
-  },
-  methods: {
+
     create() {
       this.$apollo.mutate({
         mutation: CREATE_CATEGORY,
         variables: {
           title: this.title,
           description: this.description,
-          picture: this.$refs.image.files[0],
-        }
+          picture: (this.$refs['image'] as any).files[ 0 ],
+        },
       }).then((data) => {
         console.log(data);
       }).catch((error) => {
         console.error(error);
       });
-    },
-    pickFile () {
-      this.$refs.image.click ()
-    },
+    }
+
+    pickFile() {
+      (this.$refs['image'] as any).click();
+    }
+
     onFilePicked(e) {
       const files = e.target.files;
-      if(files[0] === undefined || files[0].name.lastIndexOf('.') <= 0) {
-					console.error("File is incorrect")
+      if (files[ 0 ] === undefined || files[ 0 ].name.lastIndexOf('.') <= 0) {
+        console.error('File is incorrect');
       }
-      this.image.name = files[0].name;
-    },
-  },
-};
+      this.image.name = files[ 0 ].name;
+    }
+
+  };
 </script>
 
 <style>
diff --git a/js/src/components/Category/List.vue b/js/src/components/Category/List.vue
index 2155d1213..072f48082 100644
--- a/js/src/components/Category/List.vue
+++ b/js/src/components/Category/List.vue
@@ -15,8 +15,12 @@
               </div>
             </v-card-title>
             <v-card-actions>
-              <v-btn flat class="orange--text"><translate>Explore</translate></v-btn>
-              <v-btn flat class="red--text" v-on:click="deleteCategory(category.id)"><translate>Delete</translate></v-btn>
+              <v-btn flat class="orange--text">
+                <translate>Explore</translate>
+              </v-btn>
+              <v-btn flat class="red--text" v-on:click="deleteCategory(category.id)">
+                <translate>Delete</translate>
+              </v-btn>
             </v-card-actions>
           </v-card>
         </v-flex>
@@ -30,37 +34,34 @@
   </v-container>
 </template>
 
-<script>
-import { FETCH_CATEGORIES } from '@/graphql/category';
+<script lang="ts">
+  import { FETCH_CATEGORIES } from '@/graphql/category';
+  import { Component, Vue } from 'vue-property-decorator';
 
-// TODO : remove this hardcode
+  // TODO : remove this hardcode
 
-
-export default {
-  name: 'Home',
-  data() {
-    return {
-      categories: [],
-      loading: true,
-      HTTP_ENDPOINT: 'http://localhost:4000',
-    };
-  },
-  apollo: {
-    categories: {
-      query: FETCH_CATEGORIES,
+  @Component({
+    apollo: {
+      categories: {
+        query: FETCH_CATEGORIES,
+      },
     },
-  },
-  methods: {
+  })
+  export default class List extends Vue {
+    categories = [];
+    loading = true;
+    HTTP_ENDPOINT = 'http://localhost:4000';
+
     deleteCategory(categoryId) {
       const router = this.$router;
-      eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
-        .then(() => {
-          this.categories = this.categories.filter(category => category.id !== categoryId);
-          router.push('/category');
-        });
-    },
-  },
-};
+      // FIXME: remove eventFetch
+      // eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
+      //   .then(() => {
+      //     this.categories = this.categories.filter(category => category.id !== categoryId);
+      //     router.push('/category');
+      //   });
+    }
+  };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/js/src/components/Event/Create.vue b/js/src/components/Event/Create.vue
index fc8d21e69..3796aa61a 100644
--- a/js/src/components/Event/Create.vue
+++ b/js/src/components/Event/Create.vue
@@ -4,7 +4,7 @@
       <v-flex xs12 sm8 md4>
         <v-card class="elevation-12">
           <v-toolbar dark color="primary">
-              <v-toolbar-title>Create a new event</v-toolbar-title>
+            <v-toolbar-title>Create a new event</v-toolbar-title>
           </v-toolbar>
           <v-card-text>
             <v-form>
@@ -49,11 +49,11 @@
                 :required="event.location_type === 'phone'"
               ></v-text-field>
               <v-autocomplete
-              :items="categories"
-              v-model="event.category"
-              item-text="title"
-              item-value="id"
-              label="Categories"
+                :items="categories"
+                v-model="event.category"
+                item-text="title"
+                item-value="id"
+                label="Categories"
               >
               </v-autocomplete>
               <v-btn color="primary" @click="create">Create event</v-btn>
@@ -65,62 +65,58 @@
   </v-container>
 </template>
 
-<script>
-// import Location from '@/components/Location';
-import VueMarkdown from 'vue-markdown';
-import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
-import { FETCH_CATEGORIES } from '@/graphql/category';
-import { AUTH_USER_ACTOR } from '@/constants';
+<script lang="ts">
+  // import Location from '@/components/Location';
+  import VueMarkdown from 'vue-markdown';
+  import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
+  import { FETCH_CATEGORIES } from '@/graphql/category';
+  import { AUTH_USER_ACTOR } from '@/constants';
+  import { Component, Prop, Vue } from 'vue-property-decorator';
 
-export default {
-  name: 'create-event',
-  props: {
-    uuid: {
-      required: false,
-      type: String,
+  @Component({
+    components: {
+      VueMarkdown
     },
-  },
-  components: {
-    /*      Location, */
-    VueMarkdown,
-  },
-  data() {
-    return {
-      e1: 0,
-      event: {
-        title: null,
-        description: '',
-        begins_on: (new Date()).toISOString().substr(0, 10),
-        ends_on: new Date(),
-        seats: null,
-        physical_address: null,
-        location_type: 'physical',
-        online_address: null,
-        tel_num: null,
-        price: null,
-        category: null,
-        category_id: null,
-        tags: [],
-        participants: [],
+    apollo: {
+      categories: {
+        query: FETCH_CATEGORIES,
       },
-      categories: [],
+    }
+  })
+  export default class CreateEvent extends Vue {
+    @Prop({required: false, type: String}) uuid!: string
+
+    e1 = 0
+    event = {
+      title: null,
+      organizer_actor_id: null,
+      description: '',
+      begins_on: (new Date()).toISOString().substr(0, 10),
+      ends_on: new Date(),
+      seats: null,
+      physical_address: null,
+      location_type: 'physical',
+      online_address: null,
+      tel_num: null,
+      price: null,
+      category: null,
+      category_id: null,
       tags: [],
-      tagsToSend: [],
-      tagsFetched: [],
-    };
-  },
-  // created() {
-  //   if (this.uuid) {
-  //     this.fetchEvent();
-  //   }
-  // },
-  apollo: {
-    categories: {
-      query: FETCH_CATEGORIES,
-    },
-  },
-  methods: {
-    create() {
+      participants: [],
+    } as any // FIXME: correctly type an event
+    categories = []
+    tags = []
+    tagsToSend = []
+    tagsFetched = []
+    loading = false
+
+    // created() {
+    //   if (this.uuid) {
+    //     this.fetchEvent();
+    //   }
+    // }
+
+    create () {
       // this.event.seats = parseInt(this.event.seats, 10);
       // this.tagsToSend.forEach((tag) => {
       //   this.event.tags.push({
@@ -128,10 +124,11 @@ export default {
       //     // '@type': 'Tag',
       //   });
       // });
-      const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR));
-      this.event.category_id = this.event.category;
-      this.event.organizer_actor_id = actor.id;
-      this.event.participants = [actor.id];
+      // FIXME: correctly parse actor JSON
+      const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}')
+      this.event.category_id = this.event.category
+      this.event.organizer_actor_id = actor.id
+      this.event.participants = [actor.id]
       // this.event.price = parseFloat(this.event.price);
 
       if (this.uuid === undefined) {
@@ -146,33 +143,25 @@ export default {
             addressType: this.event.location_type,
           }
         }).then((data) => {
-          this.loading = false;
-          this.$router.push({ name: 'Event', params: { uuid: data.data.uuid } });
+          this.loading = false
+          this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
         }).catch((error) => {
-          console.log(error);
-        });
+          console.log(error)
+        })
       } else {
         this.$apollo.mutate({
           mutation: EDIT_EVENT,
         }).then((data) => {
-          this.loading = false;
-          this.$router.push({ name: 'Event', params: { uuid: data.data.uuid } });
+          this.loading = false
+          this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
         }).catch((error) => {
-          console.log(error);
-        });
+          console.log(error)
+        })
       }
-      this.event.tags = [];
-    },
-    // fetchEvent() {
-    //   eventFetch(`/events/${this.id}`, this.$store)
-    //     .then(response => response.json())
-    //     .then((data) => {
-    //       this.loading = false;
-    //       this.event = data;
-    //       console.log(this.event);
-    //     });
-    // },
-    getAddressData(addressData) {
+      this.event.tags = []
+    }
+
+    getAddressData (addressData) {
       if (addressData !== null) {
         this.event.address = {
           geom: {
@@ -187,11 +176,11 @@ export default {
           addressRegion: addressData.administrative_area_level_1,
           postalCode: addressData.postal_code,
           streetAddress: `${addressData.street_number} ${addressData.route}`,
-        };
+        }
       }
-    },
-  },
-};
+    }
+
+  };
 </script>
 
 <style>
diff --git a/js/src/components/Event/Edit.vue b/js/src/components/Event/Edit.vue
index 179657e68..cb23cc4ed 100644
--- a/js/src/components/Event/Edit.vue
+++ b/js/src/components/Event/Edit.vue
@@ -97,28 +97,29 @@
   </v-container>
 </template>
 
-<script>
-export default {
-  props: ['id'],
-  data() {
-    return {
-      loading: true,
-      event: null,
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class EventEdit extends Vue {
+    @Prop(String) id!: string;
+
+    loading = true;
+    event = null;
+
+    created() {
+      this.fetchData();
+    }
+
     fetchData() {
-      eventFetch(`/events/${this.id}`, this.$store)
-        .then(response => response.json())
-        .then((data) => {
-          this.loading = false;
-          this.event = data;
-          console.log(this.event);
-        });
-    },
-  },
-};
+      // FIXME: remove eventFetch
+      // eventFetch(`/events/${this.id}`, this.$store)
+      //   .then(response => response.json())
+      //   .then((data) => {
+      //     this.loading = false;
+      //     this.event = data;
+      //     console.log(this.event);
+      //   });
+    }
+  };
 </script>
diff --git a/js/src/components/Event/Event.vue b/js/src/components/Event/Event.vue
index a2f556e72..6fa6c9e7b 100644
--- a/js/src/components/Event/Event.vue
+++ b/js/src/components/Event/Event.vue
@@ -1,242 +1,245 @@
 <template>
   <v-layout row>
     <v-flex xs12 sm6 offset-sm3>
-          <v-progress-circular v-if="$apollo.loading" indeterminate color="primary"></v-progress-circular>
-          <div>{{ event }}</div>
-          <v-card v-if="event">
-            <!-- <v-img
-              src="https://picsum.photos/600/400/"
-              height="200px"
-            >
-              <v-container fill-height fluid>
-                <v-layout fill-height>
-                  <v-flex xs12 align-end flexbox>
-                    <v-card-title>
-                      <v-btn icon @click="$router.go(-1)" class="white--text">
-                        <v-icon>chevron_left</v-icon>
-                      </v-btn>
-                      <v-spacer></v-spacer>
-                      <v-btn icon class="mr-3 white--text" v-if="actorIsOrganizer()" :to="{ name: 'EditEvent', params: {uuid: event.uuid}}">
-                        <v-icon>edit</v-icon>
-                      </v-btn>
-                      <v-menu bottom left>
-                        <v-btn icon slot="activator" class="white--text">
-                          <v-icon>more_vert</v-icon>
-                        </v-btn>
-                        <v-list>
-                          <v-list-tile @click="downloadIcsEvent()">
-                            <v-list-tile-title>Download</v-list-tile-title>
-                          </v-list-tile>
-                          <v-list-tile @click="deleteEvent()" v-if="actorIsOrganizer()">
-                            <v-list-tile-title>Delete</v-list-tile-title>
-                          </v-list-tile>
-                        </v-list>
-                      </v-menu>
-                    </v-card-title>
-                  </v-flex>
-                </v-layout>
-              </v-container>
-            </v-img> -->
-            <v-container grid-list-md>
-              <v-layout row wrap>
-                <v-flex md10>
+      <v-progress-circular v-if="$apollo.loading" indeterminate color="primary"></v-progress-circular>
+      <div>{{ event }}</div>
+      <v-card v-if="event">
+        <!-- <v-img
+          src="https://picsum.photos/600/400/"
+          height="200px"
+        >
+          <v-container fill-height fluid>
+            <v-layout fill-height>
+              <v-flex xs12 align-end flexbox>
+                <v-card-title>
+                  <v-btn icon @click="$router.go(-1)" class="white--text">
+                    <v-icon>chevron_left</v-icon>
+                  </v-btn>
                   <v-spacer></v-spacer>
-                  <span class="subheading grey--text">{{ event.begins_on | formatDay }}</span>
-                  <h1 class="display-1">{{ event.title }}</h1>
-                  <div>
-                    <!-- <router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
-                        <v-avatar size="25px">
-                            <img class="img-circle elevation-7 mb-1"
-                                  :src="event.organizer_actor.avatarUrl"
-                            >
-                        </v-avatar>
-                    </router-link> -->
-                    <!-- <span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span> -->
-                  </div>
-                <!-- <p><router-link :to="{ name: 'Account', params: {id: event.organizer.id} }"><span class="grey&#45;&#45;text">{{ event.organizer.username }}</span></router-link> organises {{ event.title }} <span v-if="event.address.addressLocality">in {{ event.address.addressLocality }}</span> on the {{ event.startDate | formatDate }}.</p> -->
-                <v-card-text v-if="event.description"><vue-markdown :source="event.description"></vue-markdown></v-card-text>
-                </v-flex>
-                <!-- <v-flex md2>
-                  <p v-if="actorIsOrganizer()">
-                    Vous êtes organisateur de cet événement.
-                  </p>
-                  <div v-else>
-                    <p v-if="actorIsParticipant()">
-                      Vous avez annoncé aller à cet événement.
-                    </p>
-                    <p v-else>Vous y allez ?
-                      <span class="text--darken-2 grey--text">{{ event.participants.length }} personnes y vont.</span>
-                    </p>
-                  </div>
-                  <v-card-actions v-if="!actorIsOrganizer()">
-                    <v-btn v-if="!actorIsParticipant()" @click="joinEvent" color="success"><v-icon>check</v-icon> Join</v-btn>
-                    <v-btn v-if="actorIsParticipant()" @click="leaveEvent" color="error">Leave</v-btn>
-                  </v-card-actions>
-                </v-flex> -->
-              </v-layout>
-            </v-container>
-            <v-divider></v-divider>
-            <v-container>
-              <v-layout row wrap>
-                <v-flex xs12 md4 order-md1>
-                  <v-layout
-                    column
-                    fill-height
-                  >
-                    <v-list two-line>
-                      <v-list-tile>
-                        <v-list-tile-action>
-                          <v-icon color="indigo">access_time</v-icon>
-                        </v-list-tile-action>
-
-                        <v-list-tile-content>
-                          <v-list-tile-title>{{ event.begins_on | formatDate }}</v-list-tile-title>
-                          <v-list-tile-sub-title>{{ event.ends_on | formatDate }}</v-list-tile-sub-title>
-                        </v-list-tile-content>
+                  <v-btn icon class="mr-3 white--text" v-if="actorIsOrganizer()" :to="{ name: 'EditEvent', params: {uuid: event.uuid}}">
+                    <v-icon>edit</v-icon>
+                  </v-btn>
+                  <v-menu bottom left>
+                    <v-btn icon slot="activator" class="white--text">
+                      <v-icon>more_vert</v-icon>
+                    </v-btn>
+                    <v-list>
+                      <v-list-tile @click="downloadIcsEvent()">
+                        <v-list-tile-title>Download</v-list-tile-title>
                       </v-list-tile>
-
-                      <v-divider inset></v-divider>
-
-                      <v-list-tile>
-                        <v-list-tile-action>
-                          <v-icon color="indigo">place</v-icon>
-                        </v-list-tile-action>
-
-                        <v-list-tile-content>
-                          <v-list-tile-title><span v-if="event.address_type === 'physical'">
-                      {{ event.physical_address.streetAddress }}
-                    </span></v-list-tile-title>
-                          <v-list-tile-sub-title>Mobile</v-list-tile-sub-title>
-                        </v-list-tile-content>
+                      <v-list-tile @click="deleteEvent()" v-if="actorIsOrganizer()">
+                        <v-list-tile-title>Delete</v-list-tile-title>
                       </v-list-tile>
                     </v-list>
-                  </v-layout>
-                </v-flex>
-                <v-flex md8 xs12>
-                  <p>
-                    <h2>Details</h2>
-                    <vue-markdown :source="event.description" v-if="event.description" :toc-first-level="3"></vue-markdown>
-                  </p>
-                  <v-subheader>Participants</v-subheader>
-                  <!-- <v-flex md2 v-for="participant in event.participants" :key="participant.actor.uuid">
-                    <router-link :to="{name: 'Account', params: { name: participant.actor.preferredUsername }}">
-                      <v-card>
-                        <v-avatar size="75px">
-                          <img v-if="!participant.actor.avatarUrl"
-                              class="img-circle elevation-7 mb-1"
-                              src="https://picsum.photos/125/125/"
-                          >
-                          <img v-else
-                              class="img-circle elevation-7 mb-1"
-                              :src="participant.actor.avatarUrl"
-                          >
-                        </v-avatar>
-                        <v-card-title>
-                          <span>{{ participant.actor.preferredUsername }}</span>
-                        </v-card-title>
-                      </v-card>
-                    </router-link>
-                  </v-flex> -->
-                </v-flex>
-                <span v-if="event.participants.length === 0">No participants yet.</span>
+                  </v-menu>
+                </v-card-title>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-img> -->
+        <v-container grid-list-md>
+          <v-layout row wrap>
+            <v-flex md10>
+              <v-spacer></v-spacer>
+              <span class="subheading grey--text">{{ event.begins_on | formatDay }}</span>
+              <h1 class="display-1">{{ event.title }}</h1>
+              <div>
+                <!-- <router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
+                    <v-avatar size="25px">
+                        <img class="img-circle elevation-7 mb-1"
+                              :src="event.organizer_actor.avatarUrl"
+                        >
+                    </v-avatar>
+                </router-link> -->
+                <!-- <span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span> -->
+              </div>
+              <!-- <p><router-link :to="{ name: 'Account', params: {id: event.organizer.id} }"><span class="grey&#45;&#45;text">{{ event.organizer.username }}</span></router-link> organises {{ event.title }} <span v-if="event.address.addressLocality">in {{ event.address.addressLocality }}</span> on the {{ event.startDate | formatDate }}.</p> -->
+              <v-card-text v-if="event.description">
+                <vue-markdown :source="event.description"></vue-markdown>
+              </v-card-text>
+            </v-flex>
+            <!-- <v-flex md2>
+              <p v-if="actorIsOrganizer()">
+                Vous êtes organisateur de cet événement.
+              </p>
+              <div v-else>
+                <p v-if="actorIsParticipant()">
+                  Vous avez annoncé aller à cet événement.
+                </p>
+                <p v-else>Vous y allez ?
+                  <span class="text--darken-2 grey--text">{{ event.participants.length }} personnes y vont.</span>
+                </p>
+              </div>
+              <v-card-actions v-if="!actorIsOrganizer()">
+                <v-btn v-if="!actorIsParticipant()" @click="joinEvent" color="success"><v-icon>check</v-icon> Join</v-btn>
+                <v-btn v-if="actorIsParticipant()" @click="leaveEvent" color="error">Leave</v-btn>
+              </v-card-actions>
+            </v-flex> -->
+          </v-layout>
+        </v-container>
+        <v-divider></v-divider>
+        <v-container>
+          <v-layout row wrap>
+            <v-flex xs12 md4 order-md1>
+              <v-layout
+                column
+                fill-height
+              >
+                <v-list two-line>
+                  <v-list-tile>
+                    <v-list-tile-action>
+                      <v-icon color="indigo">access_time</v-icon>
+                    </v-list-tile-action>
+
+                    <v-list-tile-content>
+                      <v-list-tile-title>{{ event.begins_on | formatDate }}</v-list-tile-title>
+                      <v-list-tile-sub-title>{{ event.ends_on | formatDate }}</v-list-tile-sub-title>
+                    </v-list-tile-content>
+                  </v-list-tile>
+
+                  <v-divider inset></v-divider>
+
+                  <v-list-tile>
+                    <v-list-tile-action>
+                      <v-icon color="indigo">place</v-icon>
+                    </v-list-tile-action>
+
+                    <v-list-tile-content>
+                      <v-list-tile-title><span v-if="event.address_type === 'physical'">
+                      {{ event.physical_address.streetAddress }}
+                    </span></v-list-tile-title>
+                      <v-list-tile-sub-title>Mobile</v-list-tile-sub-title>
+                    </v-list-tile-content>
+                  </v-list-tile>
+                </v-list>
               </v-layout>
-            </v-container>
-          </v-card>
+            </v-flex>
+            <v-flex md8 xs12>
+              <p>
+              <h2>Details</h2>
+              <vue-markdown :source="event.description" v-if="event.description" :toc-first-level="3"></vue-markdown>
+              </p>
+              <v-subheader>Participants</v-subheader>
+              <!-- <v-flex md2 v-for="participant in event.participants" :key="participant.actor.uuid">
+                <router-link :to="{name: 'Account', params: { name: participant.actor.preferredUsername }}">
+                  <v-card>
+                    <v-avatar size="75px">
+                      <img v-if="!participant.actor.avatarUrl"
+                          class="img-circle elevation-7 mb-1"
+                          src="https://picsum.photos/125/125/"
+                      >
+                      <img v-else
+                          class="img-circle elevation-7 mb-1"
+                          :src="participant.actor.avatarUrl"
+                      >
+                    </v-avatar>
+                    <v-card-title>
+                      <span>{{ participant.actor.preferredUsername }}</span>
+                    </v-card-title>
+                  </v-card>
+                </router-link>
+              </v-flex> -->
+            </v-flex>
+            <span v-if="event.participants.length === 0">No participants yet.</span>
+          </v-layout>
+        </v-container>
+      </v-card>
     </v-flex>
   </v-layout>
 </template>
 
-<script>
-import VueMarkdown from 'vue-markdown';
-import { FETCH_EVENT } from '@/graphql/event';
-import { LOGGED_ACTOR } from '@/graphql/actor';
+<script lang="ts">
+  import { FETCH_EVENT } from '@/graphql/event';
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import VueMarkdown from 'vue-markdown';
 
-export default {
-  name: 'Home',
-  components: {
-    VueMarkdown,
-  },
-  data() {
-    return {
-      event: {
-        name: '',
-        slug: '',
-        title: '',
-        uuid: this.uuid,
-        description: '',
-        organizer: {
-          id: null,
-          username: null,
-        },
-        participants: [],
-      },
-    };
-  },
-  apollo: {
-    event: {
-      query: FETCH_EVENT,
-      variables() {
-        return {
-          uuid: this.uuid,
-        };
-      },
+  @Component({
+    components: {
+      VueMarkdown,
     },
-    // loggedActor: {
-    //   query: LOGGED_ACTOR,
-    // }
-  },
-  methods: {
+    apollo: {
+      event: {
+        query: FETCH_EVENT,
+        variables() {
+          return {
+            uuid: this.uuid,
+          };
+        },
+      },
+      // loggedActor: {
+      //   query: LOGGED_ACTOR,
+      // }
+    },
+  })
+  export default class Event extends Vue {
+    @Prop({ type: String, required: true }) uuid!: string;
+
+    event = {
+      name: '',
+      slug: '',
+      title: '',
+      uuid: this.uuid,
+      description: '',
+      organizer: {
+        id: null,
+        username: null,
+      },
+      participants: [],
+    };
+
     deleteEvent() {
       const router = this.$router;
-      eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
-        .then(() => router.push({ name: 'EventList' }));
-    },
+      // FIXME: remove eventFetch
+      // eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
+      //   .then(() => router.push({ name: 'EventList' }));
+    }
+
     joinEvent() {
-      eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' })
-        .then(response => response.json())
-        .then((data) => {
-          console.log(data);
-        });
-    },
+      // FIXME: remove eventFetch
+      // eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' })
+      //   .then(response => response.json())
+      //   .then((data) => {
+      //     console.log(data);
+      //   });
+    }
+
     leaveEvent() {
-      eventFetch(`/events/${this.uuid}/leave`, this.$store)
-        .then(response => response.json())
-        .then((data) => {
-          console.log(data);
-        });
-    },
+      // FIXME: remove eventFetch
+      // eventFetch(`/events/${this.uuid}/leave`, this.$store)
+      //   .then(response => response.json())
+      //   .then((data) => {
+      //     console.log(data);
+      //   });
+    }
+
     downloadIcsEvent() {
-      eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
-        .then(response => response.text())
-        .then((response) => {
-          const blob = new Blob([response], { type: 'text/calendar' });
-          const link = document.createElement('a');
-          link.href = window.URL.createObjectURL(blob);
-          link.download = `${this.event.title}.ics`;
-          document.body.appendChild(link);
-          link.click();
-          document.body.removeChild(link);
-        });
-    },
+      // FIXME: remove eventFetch
+      // eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
+      //   .then(response => response.text())
+      //   .then((response) => {
+      //     const blob = new Blob([ response ], { type: 'text/calendar' });
+      //     const link = document.createElement('a');
+      //     link.href = window.URL.createObjectURL(blob);
+      //     link.download = `${this.event.title}.ics`;
+      //     document.body.appendChild(link);
+      //     link.click();
+      //     document.body.removeChild(link);
+      //   });
+    }
+
     // actorIsParticipant() {
     //   return this.loggedActor && this.event.participants.map(participant => participant.actor.preferredUsername).includes(this.loggedActor.preferredUsername) || this.actorIsOrganizer();
-    // },
+    // }
+    //
     // actorIsOrganizer() {
     //   return this.loggedActor && this.loggedActor.preferredUsername === this.event.organizer.preferredUsername;
-    // },
-  },
-  props: {
-    uuid: {
-      type: String,
-      required: true,
-    },
-  },
-};
+    // }
+  }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
-.v-card__media__background {
-  filter: contrast(0.4);
-}
+  .v-card__media__background {
+    filter: contrast(0.4);
+  }
 </style>
diff --git a/js/src/components/Event/EventList.vue b/js/src/components/Event/EventList.vue
index fe95558d5..8e3ba0408 100644
--- a/js/src/components/Event/EventList.vue
+++ b/js/src/components/Event/EventList.vue
@@ -1,98 +1,102 @@
 <template>
   <v-layout>
-      <v-flex xs12 sm8 offset-sm2>
-          <v-card>
-    <h1>{{ $t("event.list.title") }}</h1>
+    <v-flex xs12 sm8 offset-sm2>
+      <v-card>
+        <h1>{{ $t('event.list.title') }}</h1>
 
-    <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
-    <v-chip close v-model="locationChip" label color="pink" text-color="white" v-if="$router.currentRoute.params.location">
-      <v-icon left>location_city</v-icon>{{ locationText }}
-    </v-chip>
-              <v-container grid-list-sm fluid>
-    <v-layout row wrap>
-      <v-flex xs4 v-for="event in events" :key="event.id">
-        <v-card>
-          <v-card-media v-if="!event.image"
-            class="white--text"
-            height="200px"
-            src="https://picsum.photos/g/400/200/"
-          >
-            <v-container fill-height fluid>
-              <v-layout fill-height>
-                <v-flex xs12 align-end flexbox>
-                  <span class="headline black--text">{{ event.title }}</span>
-                </v-flex>
-              </v-layout>
-            </v-container>
-          </v-card-media>
-            <v-card-title primary-title>
-                <div>
+        <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
+        <v-chip close v-model="locationChip" label color="pink" text-color="white" v-if="$router.currentRoute.params.location">
+          <v-icon left>location_city</v-icon>
+          {{ locationText }}
+        </v-chip>
+        <v-container grid-list-sm fluid>
+          <v-layout row wrap>
+            <v-flex xs4 v-for="event in events" :key="event.id">
+              <v-card>
+                <v-card-media v-if="!event.image"
+                              class="white--text"
+                              height="200px"
+                              src="https://picsum.photos/g/400/200/"
+                >
+                  <v-container fill-height fluid>
+                    <v-layout fill-height>
+                      <v-flex xs12 align-end flexbox>
+                        <span class="headline black--text">{{ event.title }}</span>
+                      </v-flex>
+                    </v-layout>
+                  </v-container>
+                </v-card-media>
+                <v-card-title primary-title>
+                  <div>
                     <span class="grey--text">{{ event.begins_on | formatDate }}</span><br>
                     <router-link :to="{name: 'Account', params: { name: event.organizer.username } }">
-                        <v-avatar size="25px">
-                            <img class="img-circle elevation-7 mb-1"
-                                 :src="event.organizer.avatar"
-                            >
-                        </v-avatar>
+                      <v-avatar size="25px">
+                        <img class="img-circle elevation-7 mb-1"
+                             :src="event.organizer.avatar"
+                        >
+                      </v-avatar>
                     </router-link>
-                    <span v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
-                </div>
-            </v-card-title>
-          <v-card-actions>
-            <v-btn flat color="orange" @click="downloadIcsEvent(event)">Share</v-btn>
-            <v-btn flat color="orange" @click="viewEvent(event)">Explore</v-btn>
-            <v-btn flat color="red" @click="deleteEvent(event)">Delete</v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-flex>
-    </v-layout>
-              </v-container>
-    <router-link :to="{ name: 'CreateEvent' }" class="btn btn-default">Create</router-link>
-          </v-card>
-      </v-flex>
+                    <span v-if="event.organizer">Organisé par <router-link
+                      :to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
+                  </div>
+                </v-card-title>
+                <v-card-actions>
+                  <v-btn flat color="orange" @click="downloadIcsEvent(event)">Share</v-btn>
+                  <v-btn flat color="orange" @click="viewEvent(event)">Explore</v-btn>
+                  <v-btn flat color="red" @click="deleteEvent(event)">Delete</v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-flex>
+          </v-layout>
+        </v-container>
+        <router-link :to="{ name: 'CreateEvent' }" class="btn btn-default">Create</router-link>
+      </v-card>
+    </v-flex>
   </v-layout>
 </template>
 
-<script>
-import ngeohash from 'ngeohash';
-import VueMarkdown from 'vue-markdown';
-import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle';
+<script lang="ts">
+  import ngeohash from 'ngeohash';
+  import VueMarkdown from 'vue-markdown';
+  import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle';
+  import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 
-export default {
-  name: 'EventList',
-  components: {
-    VCardTitle,
-    VueMarkdown,
-  },
-  data() {
-    return {
-      events: [],
-      loading: true,
-      locationChip: false,
-      locationText: '',
-    };
-  },
-  props: ['location'],
-  created() {
-    this.fetchData(this.$router.currentRoute.params.location);
-  },
-  watch: {
-    locationChip(val) {
+  @Component({
+    components: {
+      VCardTitle: VCardTitle as any,
+      VueMarkdown,
+    },
+  })
+  export default class EventList extends Vue {
+    @Prop(String) location!: string;
+
+    events = [];
+    loading = true;
+    locationChip = false;
+    locationText = '';
+
+    created() {
+      this.fetchData(this.$router.currentRoute.params[ 'location' ]);
+    }
+
+    beforeRouteUpdate(to, from, next) {
+      this.fetchData(to.params.location);
+      next();
+    }
+
+    @Watch('locationChip')
+    onLocationChipChange(val) {
       if (val === false) {
         this.$router.push({ name: 'EventList' });
       }
-    },
-  },
-  beforeRouteUpdate(to, from, next) {
-    this.fetchData(to.params.location);
-    next();
-  },
-  methods: {
+    }
+
     geocode(lat, lon) {
       console.log({ lat, lon });
       console.log(ngeohash.encode(lat, lon, 10));
       return ngeohash.encode(lat, lon, 10);
-    },
+    }
+
     fetchData(location) {
       let queryString = '/events';
       if (location) {
@@ -101,37 +105,43 @@ export default {
         this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
       }
       this.locationChip = true;
-      eventFetch(queryString, this.$store)
-        .then(response => response.json())
-        .then((response) => {
-          this.loading = false;
-          this.events = response.data;
-          console.log(this.events);
-        });
-    },
+      // FIXME: remove eventFetch
+      // eventFetch(queryString, this.$store)
+      //   .then(response => response.json())
+      //   .then((response) => {
+      //     this.loading = false;
+      //     this.events = response.data;
+      //     console.log(this.events);
+      //   });
+    }
+
     deleteEvent(event) {
       const router = this.$router;
-      eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
-        .then(() => router.push('/events'));
-    },
+      // FIXME: remove eventFetch
+      // eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
+      //   .then(() => router.push('/events'));
+    }
+
     viewEvent(event) {
       this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
-    },
+    }
+
     downloadIcsEvent(event) {
-      eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
-        .then(response => response.text())
-        .then((response) => {
-          const blob = new Blob([response], { type: 'text/calendar' });
-          const link = document.createElement('a');
-          link.href = window.URL.createObjectURL(blob);
-          link.download = `${event.title}.ics`;
-          document.body.appendChild(link);
-          link.click();
-          document.body.removeChild(link);
-        });
-    },
-  },
-};
+      // FIXME: remove eventFetch
+      // eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
+      //   .then(response => response.text())
+      //   .then((response) => {
+      //     const blob = new Blob([ response ], { type: 'text/calendar' });
+      //     const link = document.createElement('a');
+      //     link.href = window.URL.createObjectURL(blob);
+      //     link.download = `${event.title}.ics`;
+      //     document.body.appendChild(link);
+      //     link.click();
+      //     document.body.removeChild(link);
+      //   });
+    }
+
+  };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/js/src/components/Group/Create.vue b/js/src/components/Group/Create.vue
index c4c2bc0bd..fb4dfa790 100644
--- a/js/src/components/Group/Create.vue
+++ b/js/src/components/Group/Create.vue
@@ -13,10 +13,10 @@
         </v-flex>
         <v-flex xs12>
           <v-text-field
-                  label="Title"
-                  v-model="group.name"
-                  :counter="100"
-                  required
+            label="Title"
+            v-model="group.name"
+            :counter="100"
+            required
           ></v-text-field>
         </v-flex>
         <v-flex md6>
@@ -36,27 +36,27 @@
           ></vue-markdown>
         </v-flex>
         <!--<v-flex md12>-->
-          <!--<vuetify-google-autocomplete-->
-            <!--id="map"-->
-            <!--append-icon="search"-->
-            <!--classname="form-control"-->
-            <!--placeholder="Start typing"-->
-            <!--enable-geolocation-->
-            <!--v-on:placechanged="getAddressData"-->
-          <!--&gt;-->
-          <!--</vuetify-google-autocomplete>-->
+        <!--<vuetify-google-autocomplete-->
+        <!--id="map"-->
+        <!--append-icon="search"-->
+        <!--classname="form-control"-->
+        <!--placeholder="Start typing"-->
+        <!--enable-geolocation-->
+        <!--v-on:placechanged="getAddressData"-->
+        <!--&gt;-->
+        <!--</vuetify-google-autocomplete>-->
         <!--</v-flex>-->
         <!--<v-flex md12>-->
-          <!--<v-select-->
-            <!--v-bind:items="categories"-->
-            <!--v-model="group.category"-->
-            <!--item-text="title"-->
-            <!--item-value="@id"-->
-            <!--label="Categories"-->
-            <!--single-line-->
-            <!--bottom-->
-            <!--types="(cities)"-->
-          <!--&gt;</v-select>-->
+        <!--<v-select-->
+        <!--v-bind:items="categories"-->
+        <!--v-model="group.category"-->
+        <!--item-text="title"-->
+        <!--item-value="@id"-->
+        <!--label="Categories"-->
+        <!--single-line-->
+        <!--bottom-->
+        <!--types="(cities)"-->
+        <!--&gt;</v-select>-->
         <!--</v-flex>-->
       </v-layout>
     </v-form>
@@ -64,51 +64,54 @@
   </v-container>
 </template>
 
-<script>
-import VueMarkdown from 'vue-markdown';
-import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
+<script lang="ts">
+  import VueMarkdown from 'vue-markdown';
+  import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
+  import { Component, Vue } from 'vue-property-decorator';
 
-export default {
-  name: 'create-group',
-
-  components: {
-    VueMarkdown,
-    VuetifyGoogleAutocomplete,
-  },
-  data() {
-    return {
-      e1: 0,
-      group: {
-        preferred_username: '',
-        name: '',
-        summary: '',
-        // category: null,
-      },
-      categories: [],
+  @Component({
+    components: {
+      VueMarkdown,
+      VuetifyGoogleAutocomplete,
+    },
+  })
+  export default class CreateGroup extends Vue {
+    e1 = 0;
+    // FIXME: correctly type group
+    group: { preferred_username: string, name: string, summary: string, address?: any } = {
+      preferred_username: '',
+      name: '',
+      summary: '',
+      // category: null,
     };
-  },
-  mounted() {
-    this.fetchCategories();
-  },
-  methods: {
+    categories = [];
+
+    mounted() {
+      this.fetchCategories();
+    }
+
     create() {
       // this.group.organizer = "/accounts/" + this.$store.state.user.id;
 
-      eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
-        .then(response => response.json())
-        .then((data) => {
-          this.loading = false;
-          this.$router.push({ path: 'Group', params: { id: data.id } });
-        });
-    },
+      // FIXME: remove eventFetch
+      // eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
+      //   .then(response => response.json())
+      //   .then((data) => {
+      //     this.loading = false;
+      //     this.$router.push({ path: 'Group', params: { id: data.id } });
+      //   });
+    }
+
     fetchCategories() {
-      eventFetch('/categories', this.$store)
-        .then(response => response.json())
-        .then((data) => {
-          this.loading = false;
-          this.categories = data.data;
-        });
-    },
+      // FIXME: remove eventFetch
+      // eventFetch('/categories', this.$store)
+      //   .then(response => response.json())
+      //   .then((data) => {
+      //     this.loading = false;
+      //     this.categories = data.data;
+      //   });
+    }
+
     getAddressData(addressData) {
       this.group.address = {
         geo: {
@@ -121,9 +124,9 @@ export default {
         postalCode: addressData.postal_code,
         streetAddress: `${addressData.street_number} ${addressData.route}`,
       };
-    },
-  },
-};
+    }
+
+  };
 </script>
 
 <style>
diff --git a/js/src/components/Group/Group.vue b/js/src/components/Group/Group.vue
index b2edec3b4..aec8085cb 100644
--- a/js/src/components/Group/Group.vue
+++ b/js/src/components/Group/Group.vue
@@ -12,7 +12,7 @@
                 </v-btn>
                 <v-spacer></v-spacer>
                 <!--<v-btn icon class="mr-3" v-if="$store.state.user && $store.state.actor.id === actor.id">-->
-                  <!--<v-icon>edit</v-icon>-->
+                <!--<v-icon>edit</v-icon>-->
                 <!--</v-btn>-->
                 <v-btn icon>
                   <v-icon>more_vert</v-icon>
@@ -42,12 +42,12 @@
                                 @{{ group.domain }}
                             </span>
                         </span>
-                        <v-chip color="indigo" text-color="white">
-                            <v-avatar>
-                                <v-icon>group</v-icon>
-                            </v-avatar>
-                            Group
-                        </v-chip>
+                      <v-chip color="indigo" text-color="white">
+                        <v-avatar>
+                          <v-icon>group</v-icon>
+                        </v-avatar>
+                        Group
+                      </v-chip>
                     </div>
                     <v-card-text v-if="group.description" v-html="group.description"></v-card-text>
                   </v-flex>
@@ -119,9 +119,9 @@
               <v-flex v-for="event in group.participatingEvents" :key="event.id">
                 <v-card>
                   <v-card-media
-                          class="black--text"
-                          height="200px"
-                          src="https://picsum.photos/400/200/"
+                    class="black--text"
+                    height="200px"
+                    src="https://picsum.photos/400/200/"
                   >
                     <v-container fill-height fluid>
                       <v-layout fill-height>
@@ -135,7 +135,10 @@
                     <div>
                       <span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
                       <p>{{ event.description }}</p>
-                      <p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
+                      <p v-if="event.organizer">Organisé par
+                        <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
+                        </router-link>
+                      </p>
                     </div>
                   </v-card-title>
                   <v-card-actions>
@@ -160,9 +163,9 @@
               <v-flex v-for="event in group.organizingEvents" :key="event.id">
                 <v-card>
                   <v-card-media
-                          class="black--text"
-                          height="200px"
-                          src="https://picsum.photos/400/200/"
+                    class="black--text"
+                    height="200px"
+                    src="https://picsum.photos/400/200/"
                   >
                     <v-container fill-height fluid>
                       <v-layout fill-height>
@@ -176,7 +179,10 @@
                     <div>
                       <span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
                       <p>{{ event.description }}</p>
-                      <p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
+                      <p v-if="event.organizer">Organisé par
+                        <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
+                        </router-link>
+                      </p>
                     </div>
                   </v-card-title>
                   <v-card-actions>
@@ -201,38 +207,35 @@
   </v-container>
 </template>
 
-<script>
-export default {
-  name: 'Group',
-  data() {
-    return {
-      group: null,
-      loading: true,
-    };
-  },
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-  created() {
-    this.fetchData();
-  },
-  watch: {
-    // call again the method if the route changes
-    $route: 'fetchData',
-  },
-  methods: {
+<script lang="ts">
+  import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+
+  @Component
+  export default class Group extends Vue {
+    @Prop({ type: String, required: true }) name!: string;
+
+    group = null;
+    loading = true;
+
+    created() {
+      this.fetchData();
+    }
+
+    @Watch('$route')
+    onRouteChanged() {
+      // call again the method if the route changes
+      this.fetchData();
+    }
+
     fetchData() {
-      eventFetch(`/actors/${this.name}`, this.$store)
-        .then(response => response.json())
-        .then((response) => {
-          this.group = response.data;
-          this.loading = false;
-          console.log(this.group);
-        });
-    },
-  },
-};
+      // FIXME: remove eventFetch
+      // eventFetch(`/actors/${this.name}`, this.$store)
+      //   .then(response => response.json())
+      //   .then((response) => {
+      //     this.group = response.data;
+      //     this.loading = false;
+      //     console.log(this.group);
+      //   });
+    }
+  };
 </script>
diff --git a/js/src/components/Group/GroupList.vue b/js/src/components/Group/GroupList.vue
index 7e009a2bd..c35a5b13a 100644
--- a/js/src/components/Group/GroupList.vue
+++ b/js/src/components/Group/GroupList.vue
@@ -22,11 +22,16 @@
           <v-card-title>
             <div>
               <p>{{ group.summary }}</p>
-              <p v-if="group.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': group.organizer.id}}">{{ group.organizer.username }}</router-link></p>
+              <p v-if="group.organizer">Organisé par
+                <router-link :to="{name: 'Account', params: {'id': group.organizer.id}}">{{ group.organizer.username }}</router-link>
+              </p>
             </div>
           </v-card-title>
           <v-card-actions>
-            <v-btn flat color="green" @click="joinGroup(group)"><v-icon v-if="group.locked">lock</v-icon>Join</v-btn>
+            <v-btn flat color="green" @click="joinGroup(group)">
+              <v-icon v-if="group.locked">lock</v-icon>
+              Join
+            </v-btn>
             <v-btn flat color="orange" @click="viewActor(group)">Explore</v-btn>
             <v-btn flat color="red" @click="deleteGroup(group)">Delete</v-btn>
           </v-card-actions>
@@ -37,48 +42,54 @@
   </v-container>
 </template>
 
-<script>
-export default {
-  name: 'GroupList',
-  data() {
-    return {
-      groups: [],
-      loading: true,
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    username_with_domain(actor) {
+<script lang="ts">
+
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class GroupList extends Vue {
+    groups = [];
+    loading = true;
+
+    created() {
+      this.fetchData();
+    }
+
+    usernameWithDomain(actor) {
       return actor.username + (actor.domain === null ? '' : `@${actor.domain}`);
-    },
+    }
+
     fetchData() {
-      eventFetch('/groups', this.$store)
-        .then(response => response.json())
-        .then((data) => {
-          console.log(data);
-          this.loading = false;
-          this.groups = data.data;
-        });
-    },
+      // FIXME: remove eventFetch
+      // eventFetch('/groups', this.$store)
+      //   .then(response => response.json())
+      //   .then((data) => {
+      //     console.log(data);
+      //     this.loading = false;
+      //     this.groups = data.data;
+      //   });
+    }
+
     deleteGroup(group) {
       const router = this.$router;
-      eventFetch(`/groups/${this.username_with_domain(group)}`, this.$store, { method: 'DELETE' })
-        .then(response => response.json())
-        .then(() => router.push('/groups'));
-    },
+      // FIXME: remove eventFetch
+      // eventFetch(`/groups/${this.usernameWithDomain(group)}`, this.$store, { method: 'DELETE' })
+      //   .then(response => response.json())
+      //   .then(() => router.push('/groups'));
+    }
+
     viewActor(actor) {
-      this.$router.push({ name: 'Group', params: { name: this.username_with_domain(actor) } });
-    },
+      this.$router.push({ name: 'Group', params: { name: this.usernameWithDomain(actor) } });
+    }
+
     joinGroup(group) {
       const router = this.$router;
-      eventFetch(`/groups/${this.username_with_domain(group)}/join`, this.$store, { method: 'POST' })
-        .then(response => response.json())
-        .then(() => router.push({ name: 'Group', params: { name: this.username_with_domain(group) } }));
-    },
-  },
-};
+      // FIXME: remove eventFetch
+      // eventFetch(`/groups/${this.usernameWithDomain(group)}/join`, this.$store, { method: 'POST' })
+      //   .then(response => response.json())
+      //   .then(() => router.push({ name: 'Group', params: { name: this.usernameWithDomain(group) } }));
+    }
+  };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/js/src/components/Home.vue b/js/src/components/Home.vue
index deb189d44..8f923d49e 100644
--- a/js/src/components/Home.vue
+++ b/js/src/components/Home.vue
@@ -1,128 +1,134 @@
 <template>
   <v-container>
-      <v-img
-        :gradient="gradient"
-        src="https://picsum.photos/1200/900"
-        dark
-        height="300"
-        v-if="!user"
-      >
-          <v-container fill-height>
-              <v-layout align-center>
-                  <v-flex text-xs-center>
-                      <h1 class="display-3">Find events you like</h1>
-                      <h2>Share it with Mobilizon</h2>
-                      <v-btn :to="{ name: 'Register' }"><translate>Register</translate></v-btn>
-                  </v-flex>
-              </v-layout>
-          </v-container>
-      </v-img>
-      <v-layout v-else>
-          <v-flex xs12 sm8 offset-sm2>
-            <v-layout row wrap>
-                <v-flex xs12 sm6>
-                  <h1><translate :translate-params="{username: actor.preferredUsername}">Welcome back %{username}</translate></h1>
-                </v-flex>
-                <v-flex xs12 sm6>
-                <v-layout align-center>
-                  <span class="events-nearby title">Events nearby </span><v-text-field
-                    solo
-                    append-icon="place"
-                    :value="ipLocation()"
-                  ></v-text-field>
-                </v-layout>
-              </v-flex>
-            </v-layout>
-              <div v-if="$apollo.loading">
-                Still loading
-              </div>
-              <v-card v-if="events.length > 0">
-                <v-layout row wrap>
-                    <v-flex md4 v-for="event in events" :key="event.uuid">
-                        <v-card :to="{ name: 'Event', params:{ uuid: event.uuid } }">
-                            <v-img v-if="!event.image"
-                                          class="white--text"
-                                          height="200px"
-                                          src="https://picsum.photos/g/400/200/"
-                            >
-                                <v-container fill-height fluid>
-                                    <v-layout fill-height>
-                                        <v-flex xs12 align-end flexbox>
-                                            <span class="headline black--text">{{ event.title }}</span>
-                                        </v-flex>
-                                    </v-layout>
-                                </v-container>
-                            </v-img>
-                            <v-card-title primary-title>
-                                <div>
-                                    <span class="grey--text">{{ event.begins_on | formatDay }}</span><br>
-                                    <router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
-                                        <v-avatar size="25px">
-                                            <img class="img-circle elevation-7 mb-1"
-                                                :src="event.organizerActor.avatarUrl"
-                                            >
-                                        </v-avatar>
-                                    </router-link>
-                                    <span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span>
-                                </div>
-                            </v-card-title>
-                        </v-card>
-                    </v-flex>
-                </v-layout>
-              </v-card>
-              <v-alert v-else :value="true" type="error">
-                No events found
-              </v-alert>
+    <v-img
+      :gradient="gradient"
+      src="https://picsum.photos/1200/900"
+      dark
+      height="300"
+      v-if="!user"
+    >
+      <v-container fill-height>
+        <v-layout align-center>
+          <v-flex text-xs-center>
+            <h1 class="display-3">Find events you like</h1>
+            <h2>Share it with Mobilizon</h2>
+            <v-btn :to="{ name: 'Register' }">
+              <translate>Register</translate>
+            </v-btn>
           </v-flex>
-      </v-layout>
+        </v-layout>
+      </v-container>
+    </v-img>
+    <v-layout v-else>
+      <v-flex xs12 sm8 offset-sm2>
+        <v-layout row wrap>
+          <v-flex xs12 sm6>
+            <h1>
+              <translate :translate-params="{username: actor.preferredUsername}">Welcome back %{username}</translate>
+            </h1>
+          </v-flex>
+          <v-flex xs12 sm6>
+            <v-layout align-center>
+              <span class="events-nearby title">Events nearby </span>
+              <v-text-field
+                solo
+                append-icon="place"
+                :value="ipLocation()"
+              ></v-text-field>
+            </v-layout>
+          </v-flex>
+        </v-layout>
+        <div v-if="$apollo.loading">
+          Still loading
+        </div>
+        <v-card v-if="events.length > 0">
+          <v-layout row wrap>
+            <v-flex md4 v-for="event in events" :key="event.uuid">
+              <v-card :to="{ name: 'Event', params:{ uuid: event.uuid } }">
+                <v-img v-if="!event.image"
+                       class="white--text"
+                       height="200px"
+                       src="https://picsum.photos/g/400/200/"
+                >
+                  <v-container fill-height fluid>
+                    <v-layout fill-height>
+                      <v-flex xs12 align-end flexbox>
+                        <span class="headline black--text">{{ event.title }}</span>
+                      </v-flex>
+                    </v-layout>
+                  </v-container>
+                </v-img>
+                <v-card-title primary-title>
+                  <div>
+                    <span class="grey--text">{{ event.begins_on | formatDay }}</span><br>
+                    <router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
+                      <v-avatar size="25px">
+                        <img class="img-circle elevation-7 mb-1"
+                             :src="event.organizerActor.avatarUrl"
+                        >
+                      </v-avatar>
+                    </router-link>
+                    <span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span>
+                  </div>
+                </v-card-title>
+              </v-card>
+            </v-flex>
+          </v-layout>
+        </v-card>
+        <v-alert v-else :value="true" type="error">
+          No events found
+        </v-alert>
+      </v-flex>
+    </v-layout>
   </v-container>
 </template>
 
-<script>
-import ngeohash from 'ngeohash';
-import {AUTH_USER_ACTOR, AUTH_USER_ID} from '@/constants';
-import { FETCH_EVENTS } from '@/graphql/event';
+<script lang="ts">
+  import ngeohash from 'ngeohash';
+  import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
+  import { FETCH_EVENTS } from '@/graphql/event';
+  import { Component, Vue } from 'vue-property-decorator';
 
-export default {
-  name: 'Home',
-  data() {
-    return {
-      gradient: 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)',
-      searchTerm: null,
-      location_field: {
-        loading: false,
-        search: null,
+  @Component({
+    apollo: {
+      events: {
+        query: FETCH_EVENTS,
       },
-      events: [],
-      locations: [],
-      city: { name: null },
-      country: { name: null },
-      actor: JSON.parse(localStorage.getItem(AUTH_USER_ACTOR)),
-      user: localStorage.getItem(AUTH_USER_ID),
+    },
+  })
+  export default class Home extends Vue {
+    gradient = 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)';
+    searchTerm = null;
+    location_field = {
+      loading: false,
+      search: null,
     };
-  },
-  apollo: {
-    events: {
-      query: FETCH_EVENTS,
-    },
-  },
-  computed: {
-    displayed_name() {
+    events = [];
+    locations = [];
+    city = { name: null };
+    country = { name: null };
+    // FIXME: correctly parse local storage
+    actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}');
+    user = localStorage.getItem(AUTH_USER_ID);
+
+    get displayed_name() {
       return this.actor.name === null ? this.actor.preferredUsername : this.actor.name;
-    },
-  },
-  methods: {
+    }
+
     fetchLocations() {
-      eventFetch('/locations', this.$store)
-        .then(response => (response.json()))
-        .then((response) => {
-          this.locations = response;
-        });
-    },
+      // FIXME: remove eventFetch
+      // eventFetch('/locations', this.$store)
+      //   .then(response => (response.json()))
+      //   .then((response) => {
+      //     this.locations = response;
+      //   });
+    }
+
     geoLocalize() {
       const router = this.$router;
-      if (sessionStorage.getItem('City')) {
-        router.push({ name: 'EventList', params: { location: localStorage.getItem('City') } });
+      const sessionCity = sessionStorage.getItem('City')
+      if (sessionCity) {
+        router.push({ name: 'EventList', params: { location: sessionCity } });
       } else {
         navigator.geolocation.getCurrentPosition((pos) => {
           const crd = pos.coords;
@@ -136,27 +142,29 @@ export default {
           maximumAge: 0,
         });
       }
-    },
+    }
+
     getAddressData(addressData) {
       const geohash = ngeohash.encode(addressData.latitude, addressData.longitude, 11);
       sessionStorage.setItem('City', geohash);
       this.$router.push({ name: 'EventList', params: { location: geohash } });
-    },
+    }
+
     viewEvent(event) {
       this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
-    },
+    }
+
     ipLocation() {
       return this.city.name ? this.city.name : this.country.name;
-    },
-  },
-};
+    }
+  }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
   .search-autocomplete {
     border: 1px solid #dbdbdb;
-    color: rgba(0,0,0,.87);
+    color: rgba(0, 0, 0, .87);
   }
 
   .events-nearby {
diff --git a/js/src/components/Location.vue b/js/src/components/Location.vue
index cbd47afdd..82a08fe5c 100644
--- a/js/src/components/Location.vue
+++ b/js/src/components/Location.vue
@@ -24,29 +24,28 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class Location extends Vue {
+    @Prop(String) address!: string;
+
+    description = 'Paris, France';
+    center = { lat: 48.85, lng: 2.35 };
+    markers: any[] = [];
 
-export default {
-  data() {
-    return {
-      description: 'Paris, France',
-      center: { lat: 48.85, lng: 2.35 },
-      markers: [],
-    };
-  },
-  props: ['address'],
-  methods: {
     setPlace(place) {
       this.center = {
         lat: place.geometry.location.lat(),
         lng: place.geometry.location.lng(),
       };
-      this.markers = [{
+      this.markers = [ {
         position: { lat: this.center.lat, lng: this.center.lng },
-      }];
+      } ];
+
       this.$emit('input', place.formatted_address);
-    },
-  },
-};
+    }
+  };
 
 </script>
diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index 9b2741432..ba3727451 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -74,42 +74,33 @@
         </v-list>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn flat @click="notificationMenu = false"><translate>Close</translate></v-btn>
-          <v-btn color="primary" flat @click="notificationMenu = false"><translate>Save</translate></v-btn>
+          <v-btn flat @click="notificationMenu = false">
+            <translate>Close</translate>
+          </v-btn>
+          <v-btn color="primary" flat @click="notificationMenu = false">
+            <translate>Save</translate>
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-menu>
-    <v-btn v-if="!user" :to="{ name: 'Login' }"><translate>Login</translate></v-btn>
+    <v-btn v-if="!user" :to="{ name: 'Login' }">
+      <translate>Login</translate>
+    </v-btn>
   </v-toolbar>
 </template>
 
-<script>
-import {AUTH_USER_ACTOR, AUTH_USER_ID} from '@/constants';
-import {SEARCH} from '@/graphql/search';
+<style>
+  nav.v-toolbar .v-input__slot {
+    margin-bottom: 0;
+  }
+</style>
 
-export default {
-  name: 'NavBar',
-  props: {
-    toggleDrawer: {
-      type: Function,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      notificationMenu: false,
-      notifications: [
-        { header: 'Coucou' },
-        { title: "T'as une notification", subtitle: 'Et elle est cool' },
-      ],
-      model: null,
-      search: [],
-      searchText: null,
-      searchSelect: null,
-      actor: localStorage.getItem(AUTH_USER_ACTOR),
-      user: localStorage.getItem(AUTH_USER_ID),
-    };
-  },
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
+import { SEARCH } from '@/graphql/search';
+
+@Component({
   apollo: {
     search: {
       query: SEARCH,
@@ -123,47 +114,56 @@ export default {
       },
     },
   },
-  watch: {
-    model(val) {
-      switch(val.__typename) {
-        case 'Event':
-          this.$router.push({ name: 'Event', params: { uuid: val.uuid } });
-          break;
+})
+export default class NavBar extends Vue {
+  @Prop({ required: true, type: Function }) toggleDrawer!: Function;
+
+  notificationMenu = false;
+  notifications = [
+    { header: 'Coucou' },
+    { title: 'T\'as une notification', subtitle: 'Et elle est cool' },
+  ];
+  model = null;
+  search: any[] = [];
+  searchText: string | null = null;
+  searchSelect = null;
+  actor = localStorage.getItem(AUTH_USER_ACTOR);
+  user = localStorage.getItem(AUTH_USER_ID);
+
+  get items() {
+    return this.search.map(searchEntry => {
+      switch (searchEntry.__typename) {
         case 'Actor':
-          this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } });
+          searchEntry.label = searchEntry.preferredUsername + (searchEntry.domain === null ? '' : `@${searchEntry.domain}`);
+          break;
+        case 'Event':
+          searchEntry.label = searchEntry.title;
           break;
       }
-    },
-  },
-  computed: {
-    items() {
-      return this.search.map(searchEntry => {
-        switch (searchEntry.__typename) {
-          case 'Actor':
-            searchEntry.label = searchEntry.preferredUsername + (searchEntry.domain === null ? '' : `@${searchEntry.domain}`);
-            break;
-          case 'Event':
-            searchEntry.label = searchEntry.title;
-            break;
-        }
-        return searchEntry;
-      });
-    },
-  },
-  methods: {
-    username_with_domain(actor) {
-      return actor.preferredUsername + (actor.domain === null ? '' : `@${actor.domain}`);
-    },
-    enter() {
-      console.log('enter');
-      this.$apollo.queries.search.refetch();
-    }
-  },
-};
-</script>
+      return searchEntry;
+    });
+  }
+
+  @Watch('model')
+  onModelChanged(val) {
+    switch (val.__typename) {
+      case 'Event':
+        this.$router.push({ name: 'Event', params: { uuid: val.uuid } });
+        break;
+      case 'Actor':
+        this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } });
+        break;
+    }
+  }
+
+  username_with_domain(actor) {
+    return actor.preferredUsername + (actor.domain === null ? '' : `@${actor.domain}`);
+  }
+
+  enter() {
+    console.log('enter');
+    this.$apollo.queries['search'].refetch();
+  }
 
-<style>
-nav.v-toolbar .v-input__slot {
-  margin-bottom: 0;
 }
-</style>
+</script>
diff --git a/js/src/constants.js b/js/src/constants.ts
similarity index 100%
rename from js/src/constants.js
rename to js/src/constants.ts
diff --git a/js/src/graphql/actor.js b/js/src/graphql/actor.ts
similarity index 100%
rename from js/src/graphql/actor.js
rename to js/src/graphql/actor.ts
diff --git a/js/src/graphql/auth.js b/js/src/graphql/auth.ts
similarity index 100%
rename from js/src/graphql/auth.js
rename to js/src/graphql/auth.ts
diff --git a/js/src/graphql/category.js b/js/src/graphql/category.ts
similarity index 100%
rename from js/src/graphql/category.js
rename to js/src/graphql/category.ts
diff --git a/js/src/graphql/event.js b/js/src/graphql/event.ts
similarity index 92%
rename from js/src/graphql/event.js
rename to js/src/graphql/event.ts
index 689ce2e33..4de9b9d6d 100644
--- a/js/src/graphql/event.js
+++ b/js/src/graphql/event.ts
@@ -90,11 +90,11 @@ export const CREATE_EVENT = gql`
         $addressType: AddressType!,
     ) {
         createEvent(
-            title: $title, 
-            description: $description, 
-            beginsOn: $beginsOn, 
-            organizerActorId: $organizerActorId, 
-            categoryId: $categoryId, 
+            title: $title,
+            description: $description,
+            beginsOn: $beginsOn,
+            organizerActorId: $organizerActorId,
+            categoryId: $categoryId,
             addressType: $addressType) {
                 uuid,
                 title,
diff --git a/js/src/graphql/search.js b/js/src/graphql/search.ts
similarity index 99%
rename from js/src/graphql/search.js
rename to js/src/graphql/search.ts
index 5182a98ca..e57c084d5 100644
--- a/js/src/graphql/search.js
+++ b/js/src/graphql/search.ts
@@ -16,4 +16,4 @@ query SearchEvents($searchText: String!) {
     }
   }
 }
-`;
\ No newline at end of file
+`;
diff --git a/js/src/graphql/upload.js b/js/src/graphql/upload.ts
similarity index 100%
rename from js/src/graphql/upload.js
rename to js/src/graphql/upload.ts
diff --git a/js/src/graphql/user.js b/js/src/graphql/user.ts
similarity index 100%
rename from js/src/graphql/user.js
rename to js/src/graphql/user.ts
diff --git a/js/src/main.js b/js/src/main.ts
similarity index 88%
rename from js/src/main.js
rename to js/src/main.ts
index 59584c5a6..ebf0703f4 100644
--- a/js/src/main.js
+++ b/js/src/main.ts
@@ -11,14 +11,16 @@ import 'vuetify/dist/vuetify.min.css';
 import App from '@/App.vue';
 import router from '@/router';
 // import store from './store';
-import translations from '@/i18n/translations.json';
 import { createProvider } from './vue-apollo';
 
+const translations = require('@/i18n/translations.json');
+
 Vue.config.productionTip = false;
 
 Vue.use(VueMarkdown);
 Vue.use(Vuetify);
-const language = window.navigator.userLanguage || window.navigator.language;
+
+const language = (window.navigator as any).userLanguage || window.navigator.language;
 moment.locale(language);
 
 Vue.filter('formatDate', value => (value ? moment(String(value)).format('LLLL') : null));
@@ -33,8 +35,8 @@ Vue.config.language = language.replace('-', '_');
 
 /* eslint-disable no-new */
 new Vue({
-  el: '#app',
   router,
+  el: '#app',
   template: '<App/>',
   apolloProvider: createProvider(),
   components: { App },
diff --git a/js/src/registerServiceWorker.js b/js/src/registerServiceWorker.ts
similarity index 90%
rename from js/src/registerServiceWorker.js
rename to js/src/registerServiceWorker.ts
index fbf9078f9..844b93bb9 100644
--- a/js/src/registerServiceWorker.js
+++ b/js/src/registerServiceWorker.ts
@@ -5,8 +5,7 @@ import { register } from 'register-service-worker';
 if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
     ready() {
-      console.log('App is being served from cache by a service worker.\n' +
-        'For more details, visit https://goo.gl/AFskqB');
+      console.log('App is being served from cache by a service worker.\nFor more details, visit https://goo.gl/AFskqB');
     },
     cached() {
       console.log('Content has been cached for offline use.');
diff --git a/js/src/router/index.js b/js/src/router/index.ts
similarity index 77%
rename from js/src/router/index.js
rename to js/src/router/index.ts
index 7b1f82f92..1bd4a0e36 100644
--- a/js/src/router/index.js
+++ b/js/src/router/index.ts
@@ -1,23 +1,23 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import PageNotFound from '@/components/PageNotFound';
-import Home from '@/components/Home';
-import Event from '@/components/Event/Event';
-import EventList from '@/components/Event/EventList';
-import Location from '@/components/Location';
-import CreateEvent from '@/components/Event/Create';
-import CategoryList from '@/components/Category/List';
-import CreateCategory from '@/components/Category/Create';
-import Register from '@/components/Account/Register';
-import Login from '@/components/Account/Login';
-import Validate from '@/components/Account/Validate';
-import ResendConfirmation from '@/components/Account/ResendConfirmation';
-import SendPasswordReset from '@/components/Account/SendPasswordReset';
-import PasswordReset from '@/components/Account/PasswordReset';
-import Account from '@/components/Account/Account';
-import CreateGroup from '@/components/Group/Create';
-import Group from '@/components/Group/Group';
-import GroupList from '@/components/Group/GroupList';
+import PageNotFound from '@/components/PageNotFound.vue';
+import Home from '@/components/Home.vue';
+import Event from '@/components/Event/Event.vue';
+import EventList from '@/components/Event/EventList.vue';
+import Location from '@/components/Location.vue';
+import CreateEvent from '@/components/Event/Create.vue';
+import CategoryList from '@/components/Category/List.vue';
+import CreateCategory from '@/components/Category/Create.vue';
+import Register from '@/components/Account/Register.vue';
+import Login from '@/components/Account/Login.vue';
+import Validate from '@/components/Account/Validate.vue';
+import ResendConfirmation from '@/components/Account/ResendConfirmation.vue';
+import SendPasswordReset from '@/components/Account/SendPasswordReset.vue';
+import PasswordReset from '@/components/Account/PasswordReset.vue';
+import Account from '@/components/Account/Account.vue';
+import CreateGroup from '@/components/Group/Create.vue';
+import Group from '@/components/Group/Group.vue';
+import GroupList from '@/components/Group/GroupList.vue';
 import Identities from '../components/Account/Identities.vue';
 
 Vue.use(Router);
diff --git a/js/src/shims-tsx.d.ts b/js/src/shims-tsx.d.ts
new file mode 100644
index 000000000..3b88b5829
--- /dev/null
+++ b/js/src/shims-tsx.d.ts
@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue';
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}
diff --git a/js/src/shims-vue.d.ts b/js/src/shims-vue.d.ts
new file mode 100644
index 000000000..8f6f41026
--- /dev/null
+++ b/js/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+  export default Vue;
+}
diff --git a/js/src/vue-apollo.js b/js/src/vue-apollo.ts
similarity index 93%
rename from js/src/vue-apollo.js
rename to js/src/vue-apollo.ts
index 5e8cbf76c..0a613e000 100644
--- a/js/src/vue-apollo.js
+++ b/js/src/vue-apollo.ts
@@ -33,7 +33,6 @@ const fragmentMatcher = new IntrospectionFragmentMatcher({
 
 const cache = new InMemoryCache({ fragmentMatcher });
 
-
 const authMiddleware = new ApolloLink((operation, forward) => {
   // add the authorization to the headers
   const token = localStorage.getItem(AUTH_TOKEN);
@@ -43,7 +42,9 @@ const authMiddleware = new ApolloLink((operation, forward) => {
     },
   });
 
-  return forward(operation);
+  if (forward) forward(operation);
+
+  return null;
 });
 
 const uploadLink = createLink({
@@ -60,6 +61,8 @@ const link = authMiddleware.concat(uploadLink);
 
 // Config
 const defaultOptions = {
+  cache,
+  link,
   // You can use `https` for secure connection (recommended in production)
   httpEndpoint,
   // You can use `wss` for secure connection (recommended in production)
@@ -74,9 +77,8 @@ const defaultOptions = {
   websocketsOnly: false,
   // Is being rendered on the server?
   ssr: false,
-  cache,
-  link,
   defaultHttpLink: false,
+  connectToDevTools: true,
 };
 
 // Call this in the Vue app file
@@ -89,23 +91,18 @@ export function createProvider(options = {}) {
   apolloClient.wsClient = wsClient;
 
   // Create vue apollo provider
-  const apolloProvider = new VueApollo({
+  return new VueApollo({
     defaultClient: apolloClient,
-    link,
-    cache,
-    connectToDevTools: true,
-    defaultOptions: {
-      $query: {
-        // fetchPolicy: 'cache-and-network',
-      },
-    },
+    // defaultOptions: {
+    //   $query: {
+    //     fetchPolicy: 'cache-and-network',
+    //   },
+    // },
     errorHandler(error) {
       // eslint-disable-next-line no-console
       console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message);
     },
   });
-
-  return apolloProvider;
 }
 
 // Manually call this when user log in
diff --git a/js/tests/unit/.eslintrc.js b/js/tests/unit/.eslintrc.js
deleted file mode 100644
index 00c5cf0bd..000000000
--- a/js/tests/unit/.eslintrc.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
-  env: {
-    mocha: true,
-  },
-  rules: {
-    'import/no-extraneous-dependencies': 'off',
-  },
-};
diff --git a/js/tests/unit/HelloWorld.spec.js b/js/tests/unit/HelloWorld.spec.js
deleted file mode 100644
index 7527955b9..000000000
--- a/js/tests/unit/HelloWorld.spec.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { expect } from 'chai';
-import { shallow } from '@vue/test-utils';
-import HelloWorld from '@/components/HelloWorld.vue';
-
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message';
-    const wrapper = shallow(HelloWorld, {
-      propsData: { msg },
-    });
-    expect(wrapper.text()).to.include(msg);
-  });
-});
diff --git a/js/tsconfig.json b/js/tsconfig.json
new file mode 100644
index 000000000..f28e98af7
--- /dev/null
+++ b/js/tsconfig.json
@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "mocha",
+      "chai"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/js/tslint.json b/js/tslint.json
new file mode 100644
index 000000000..cb6227b2b
--- /dev/null
+++ b/js/tslint.json
@@ -0,0 +1,8 @@
+{
+  "extends": "tslint-config-airbnb",
+  "rules": {
+    "max-line-length": [ true, 140 ],
+    "import-name": false,
+    "ter-arrow-parens": false
+  }
+}