Move folder

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@vue/app"
+  ]
+}

js/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/airbnb'
+  ]
+}

js/.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+/tests/e2e/reports/
+selenium-debug.log
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

js/.postcssrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

js/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "eventos",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit",
+    "test:e2e": "vue-cli-service test:e2e"
+  },
+  "dependencies": {
+    "material-design-icons-iconfont": "^3.0.3",
+    "moment": "^2.22.1",
+    "ngeohash": "^0.6.0",
+    "register-service-worker": "^1.0.0",
+    "vue": "^2.5.16",
+    "vue-markdown": "^2.2.4",
+    "vue-router": "^3.0.1",
+    "vuetify": "^1.0.18",
+    "vuetify-google-autocomplete": "^2.0.0-Alpha.9",
+    "vuex": "^3.0.1",
+    "vuex-i18n": "^1.10.5"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.0-beta.10",
+    "@vue/cli-plugin-e2e-nightwatch": "^3.0.0-beta.10",
+    "@vue/cli-plugin-eslint": "^3.0.0-beta.10",
+    "@vue/cli-plugin-pwa": "^3.0.0-beta.10",
+    "@vue/cli-plugin-unit-mocha": "^3.0.0-beta.10",
+    "@vue/cli-service": "^3.0.0-beta.10",
+    "@vue/eslint-config-airbnb": "^3.0.0-beta.10",
+    "@vue/test-utils": "^1.0.0-beta.10",
+    "chai": "^4.1.2",
+    "node-sass": "^4.7.2",
+    "sass-loader": "^6.0.6",
+    "vue-template-compiler": "^2.5.13"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

js/public/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,149 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
+fill="#000000" stroke="none">
+<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
+-96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
+173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
+13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
+20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
+-215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
+11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
+-455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
+-105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
+11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
+-113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
+36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
+-206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
+-15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
+-153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
+10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
+-30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
+221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
+-265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
+-22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
+-102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
+-50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
+-414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
+30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
+-455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
+-19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
+96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
+-313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
+-145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
+-156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
+-203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
+-341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
+30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
+342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
+22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
+-235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
+-62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
+-22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
+-311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
+-140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
+17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
+-10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
+-485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
+-193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
+72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
+35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
+-5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
+-661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
+0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
+-520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
+-120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
+-229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
+11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
+-9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
+12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
+145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
+-118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
+-108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
+-659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
+248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
+29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
+-142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
+-16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
+-245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
+109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
+-90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
+-67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
+-298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
+38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
+34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
+136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
+67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
+150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
+116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
+113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
+175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
+89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
+11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
+6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
+430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
+220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
+24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
+478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
+394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
+55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
+175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
+88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
+155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
+11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
+14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
+51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
+37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
+55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
+55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
+295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
+16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
+157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
+200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
+241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
+61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
+28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
+62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
+56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
+350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
+90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
+121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
+60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
+167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
+171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
+97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
+111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
+11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
+13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
+101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
+19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
+54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
+0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
+90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
+108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
+20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
+-419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
+-31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
+-71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
+-477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
+-320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
+-245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
+-160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
+-109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
+396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
+110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
+-188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
+-205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
+583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
+408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
+561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
+-9615 0 20 -32z"/>
+</g>
+</svg>

js/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>eventos</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but eventos doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

js/public/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "eventos",
+  "short_name": "eventos",
+  "icons": [
+    {
+      "src": "/img/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/img/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#4DBA87"
+}

js/src/App.vue

@@ -0,0 +1,119 @@
+<template>
+  <v-app id="libre-event">
+    <v-navigation-drawer
+      light
+      clipped
+      fixed
+      app
+      v-model="drawer"
+      enable-resize-watcher
+    >
+      <v-list dense>
+        <template v-for="(item, i) in items" v-if="showMenuItem(item.role)">
+          <v-layout
+            row
+            v-if="item.heading"
+            align-center
+            :key="i"
+          >
+            <v-flex xs6>
+              <v-subheader v-if="item.heading">
+                {{ item.heading }}
+              </v-subheader>
+            </v-flex>
+            <v-flex xs6 class="text-xs-center">
+              <a href="#!" class="body-2 black--text">EDIT</a>
+            </v-flex>
+          </v-layout>
+          <v-list-tile v-bind:key="item.route" v-else @click="$router.push({ name: item.route })">
+            <v-list-tile-action>
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>
+                {{ item.text }}
+              </v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </template>
+      </v-list>
+    </v-navigation-drawer>
+    <NavBar></NavBar>
+    <v-content>
+      <v-container fluid fill-height>
+        <v-layout xs-12>
+          <transition>
+            <router-view></router-view>
+          </transition>
+        </v-layout>
+      </v-container>
+    </v-content>
+    <v-btn
+      fixed
+      dark
+      fab
+      bottom
+      right
+      color="pink"
+      @click="$router.push({name: 'CreateEvent'})"
+      v-if="getUser()"
+    >
+      <v-icon>add</v-icon>
+    </v-btn>
+    <v-footer class="indigo" app>
+      <span class="white--text">© Thomas Citharel {{ new Date().getFullYear() }} - Made with <a href="https://api-platform.com/">API Platform</a> & <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
+      :timeout="error.timeout"
+      :error="true"
+      v-model="error.show"
+    >
+      {{ error.text }}
+      <v-btn dark flat @click.native="error.show = false">Close</v-btn>
+    </v-snackbar>
+  </v-app>
+</template>
+
+<script>
+
+import NavBar from '@/components/NavBar';
+
+export default {
+  name: 'app',
+  components: {
+    NavBar,
+  },
+  data() {
+    return {
+      drawer: true,
+      user: false,
+      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,
+    };
+  },
+  methods: {
+    showMenuItem(elem) {
+      return elem !== null && this.$store.state.user && this.$store.state.user.roles !== undefined ? this.$store.state.user.roles.includes(elem) : true;
+    },
+    getUser() {
+      return this.$store.state.user === undefined ? false : this.$store.state.user;
+    }
+  },
+};
+</script>
+
+<style>
+</style>

js/src/actions/login.js

@@ -0,0 +1,5 @@
+export default {
+  login(state, user) {
+    state.user = user.user;
+  },
+};

js/src/api/_entrypoint.js

@@ -0,0 +1,2 @@
+export const API_HOST = 'http://0.0.0.0:4000';
+export const API_PATH = '/api';

js/src/api/eventFetch.js

@@ -0,0 +1,29 @@
+import { API_HOST, API_PATH } from './_entrypoint';
+
+const jsonLdMimeType = 'application/json';
+
+export default function eventFetch(url, store, optionsarg = {}) {
+  const options = optionsarg;
+  if (typeof options.headers === 'undefined') {
+    options.headers = new Headers();
+  }
+  if (options.headers.get('Accept') === null) {
+    options.headers.set('Accept', jsonLdMimeType);
+  }
+
+  if (options.body !== 'undefined' && !(options.body instanceof FormData) && options.headers.get('Content-Type') === null) {
+    options.headers.set('Content-Type', jsonLdMimeType);
+  }
+
+  if (store.state.user) {
+    options.headers.set('Authorization', `Bearer ${localStorage.getItem('token')}`);
+  }
+
+  const link = url.includes(API_PATH) ? API_HOST + url : API_HOST + API_PATH + url;
+
+  return fetch(link, options).then((response) => {
+    if (response.ok) return response;
+
+    throw response.text();
+  });
+}

js/src/auth/index.js

@@ -0,0 +1,117 @@
+import { API_HOST, API_PATH } from '../api/_entrypoint';
+
+// URL and endpoint constants
+const LOGIN_URL = `${API_HOST}${API_PATH}/login`;
+const SIGNUP_URL = `${API_HOST}${API_PATH}/users/`;
+const CHECK_AUTH = `${API_HOST}${API_PATH}/user/`;
+const REFRESH_TOKEN = `${API_HOST}${API_PATH}/token/refresh`;
+
+export default {
+
+  // Send a request to the login URL and save the returned JWT
+  login(creds, success, error) {
+    fetch(LOGIN_URL, { method: 'POST', body: creds, headers: { 'Content-Type': 'application/json' } })
+      .then((response) => {
+        if (response.status === 200) {
+          return response.json();
+        }
+        throw response.json();
+      })
+      .then((data) => {
+        localStorage.setItem('token', data.token);
+        // localStorage.setItem('refresh_token', data.refresh_token);
+        return success(data);
+      })
+      .catch(err => error(err));
+  },
+
+  signup(creds, success, error) {
+    fetch(SIGNUP_URL, { method: 'POST', body: creds, headers: { 'Content-Type': 'application/json' } })
+      .then((response) => {
+        if (response.status === 200) {
+          return response.json();
+        }
+        throw response.json();
+      })
+      .then((data) => {
+        localStorage.setItem('token', data.token);
+        // localStorage.setItem('refresh_token', data.refresh_token);
+
+        return success(data);
+      }).catch(err => error(err));
+  },
+  refreshToken(store, successHandler, errorHandler) {
+    const refreshToken = localStorage.getItem('refresh_token');
+    console.log('We are refreshing the jwt token');
+    fetch(REFRESH_TOKEN, { method: 'POST', body: JSON.stringify({ refresh_token: refreshToken }), headers: { 'Content-Type': 'application/json' } })
+      .then((response) => {
+        if (response.ok) {
+          return response.json();
+        }
+        return errorHandler('Error while authenticating');
+      })
+      .then((response) => {
+        console.log('We have a new token');
+        this.authenticated = true;
+        store.commit('LOGIN_USER', response);
+        localStorage.setItem('token', response.token);
+        console.log("Let's try to auth again");
+        successHandler();
+      });
+  },
+
+  // To log out, we just need to remove the token
+  logout() {
+    localStorage.removeItem('refresh_token');
+    localStorage.removeItem('token');
+    this.authenticated = false;
+  },
+
+  jwt_decode(token) {
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace('-', '+').replace('_', '/');
+    return JSON.parse(window.atob(base64));
+  },
+
+  getTokenExpirationDate(encodedToken) {
+    const token = this.jwt_decode(encodedToken);
+    if (!token.exp) { return null; }
+
+    const date = new Date(0);
+    date.setUTCSeconds(token.exp);
+
+    return date;
+  },
+
+  isTokenExpired(token) {
+    const expirationDate = this.getTokenExpirationDate(token);
+    return expirationDate < new Date();
+  },
+
+  getUser(store, successHandler, errorHandler) {
+    console.log('We are checking the auth');
+    this.token = localStorage.getItem('token');
+    const options = {};
+    options.headers = new Headers();
+    options.headers.set('Authorization', `Bearer ${this.token}`);
+    fetch(CHECK_AUTH, options)
+      .then((response) => {
+        if (response.ok) {
+          return response.json();
+        }
+        return errorHandler('Error while authenticating');
+      }).then((response) => {
+        this.authenticated = true;
+        console.log(response);
+        store.commit('LOAD_USER', response.data);
+        return successHandler();
+    });
+  },
+
+  // The object to be passed as a header for authenticated requests
+  getAuthHeader() {
+    return {
+      Authorization: `Bearer ${localStorage.getItem('access_token')}`,
+    };
+  },
+};

js/src/components/Account/Account.vue

@@ -0,0 +1,196 @@
+<template>
+  <v-container>
+    <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-layout column class="media">
+            <v-card-title>
+              <v-btn icon @click="$router.go(-1)">
+                <v-icon>chevron_left</v-icon>
+              </v-btn>
+              <v-spacer></v-spacer>
+              <v-btn icon class="mr-3" v-if="$store.state.user && $store.state.user.account.id === account.id">
+                <v-icon>edit</v-icon>
+              </v-btn>
+              <v-btn icon>
+                <v-icon>more_vert</v-icon>
+              </v-btn>
+            </v-card-title>
+            <v-spacer></v-spacer>
+            <div class="text-xs-center">
+              <v-avatar size="125px">
+                <img v-if="!account.avatar_url"
+                  class="img-circle elevation-7 mb-1"
+                  src="http://lorempixel.com/125/125/"
+                >
+                <img v-else
+                     class="img-circle elevation-7 mb-1"
+                     :src="account.avatar_url"
+                >
+              </v-avatar>
+            </div>
+            <v-container fluid grid-list-lg>
+              <v-layout row>
+                <v-flex xs7>
+                  <div class="headline">{{ account.display_name }}</div>
+                  <div><span class="subheading">@{{ account.username }}</span><span v-if="account.server">@{{ account.server.address }}</span></div>
+                  <v-card-text v-if="account.description" v-html="account.description"></v-card-text>
+                </v-flex>
+              </v-layout>
+            </v-container>
+          </v-layout>
+        <v-list three-line>
+          <v-list-tile>
+            <v-list-tile-action>
+              <v-icon color="indigo">phone</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>(323) 555-6789</v-list-tile-title>
+              <v-list-tile-sub-title>Work</v-list-tile-sub-title>
+            </v-list-tile-content>
+            <v-list-tile-action>
+              <v-icon dark>chat</v-icon>
+            </v-list-tile-action>
+          </v-list-tile>
+          <v-divider inset></v-divider>
+          <v-list-tile>
+            <v-list-tile-action>
+              <v-icon color="indigo">mail</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>ali_connors@example.com</v-list-tile-title>
+              <v-list-tile-sub-title>Work</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">location_on</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>1400 Main Street</v-list-tile-title>
+              <v-list-tile-sub-title>Orlando, FL 79938</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+        <v-container fluid grid-list-md v-if="account.participatingEvents && account.participatingEvents.length > 0">
+          <v-subheader>Participated at</v-subheader>
+          <v-layout row wrap>
+            <v-flex v-for="event in account.participatingEvents" :key="event.id">
+              <v-card>
+                <v-card-media
+                  class="black--text"
+                  height="200px"
+                  src="http://lorempixel.com/400/200/"
+                >
+                  <v-container fill-height fluid>
+                    <v-layout fill-height>
+                      <v-flex xs12 align-end flexbox>
+                        <span class="headline">{{ event.title }}</span>
+                      </v-flex>
+                    </v-layout>
+                  </v-container>
+                </v-card-media>
+                <v-card-title>
+                  <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>
+                  </div>
+                </v-card-title>
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <v-btn icon>
+                    <v-icon>favorite</v-icon>
+                  </v-btn>
+                  <v-btn icon>
+                    <v-icon>bookmark</v-icon>
+                  </v-btn>
+                  <v-btn icon>
+                    <v-icon>share</v-icon>
+                  </v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-flex>
+          </v-layout>
+        </v-container>
+        <v-container fluid grid-list-md v-if="account.organizingEvents && account.organizingEvents.length > 0">
+          <v-subheader>Organized events</v-subheader>
+          <v-layout row wrap>
+            <v-flex v-for="event in account.organizingEvents" :key="event.id">
+              <v-card>
+                <v-card-media
+                  class="black--text"
+                  height="200px"
+                  src="http://lorempixel.com/400/200/"
+                >
+                  <v-container fill-height fluid>
+                    <v-layout fill-height>
+                      <v-flex xs12 align-end flexbox>
+                        <span class="headline">{{ event.title }}</span>
+                      </v-flex>
+                    </v-layout>
+                  </v-container>
+                </v-card-media>
+                <v-card-title>
+                  <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>
+                  </div>
+                </v-card-title>
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <v-btn icon>
+                    <v-icon>favorite</v-icon>
+                  </v-btn>
+                  <v-btn icon>
+                    <v-icon>bookmark</v-icon>
+                  </v-btn>
+                  <v-btn icon>
+                    <v-icon>share</v-icon>
+                  </v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-flex>
+          </v-layout>
+        </v-container>
+      </v-card>
+    </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+  import eventFetch from '@/api/eventFetch';
+
+export default {
+  name: 'Account',
+  data() {
+    return {
+      account: null,
+      loading: true,
+    }
+  },
+  props: ['id'],
+  mounted() {
+    this.fetchData();
+  },
+  watch: {
+    // call again the method if the route changes
+    '$route': 'fetchData'
+  },
+  methods: {
+    fetchData() {
+      eventFetch(`/accounts/${this.id}`, this.$store)
+        .then(response => response.json())
+        .then((response) => {
+          this.account = response.data;
+          this.loading = false;
+          console.log(this.account);
+        })
+    }
+  }
+}
+</script>

js/src/components/Category/Create.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <h3>Create a new category</h3>
+    <v-form>
+      <v-text-field
+        label="Name of the category"
+        v-model="category.title"
+        :counter="100"
+        required
+      ></v-text-field>
+    </v-form>
+    <v-btn color="primary" @click="create">Create category</v-btn>
+  </div>
+</template>
+
+<script>
+  import eventFetch from '@/api/eventFetch';
+
+  export default {
+    name: 'create-category',
+    data() {
+      return {
+        category: {
+          title: '',
+        },
+      };
+    },
+    methods: {
+      create() {
+        const router = this.$router;
+        eventFetch('/categories', this.$store, { method: 'POST', body: JSON.stringify({ category: this.category }) })
+          .then(response => response.json())
+          .then(() => {
+            this.loading = false;
+            router.push('/category')
+          });
+      },
+    },
+  };
+</script>
+
+<style>
+  .markdown-render h1 {
+    font-size: 2em;
+  }
+</style>

js/src/components/Category/List.vue

@@ -0,0 +1,74 @@
+<template>
+  <v-container>
+    <h1>Category List</h1>
+
+    <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
+    <v-container fluid grid-list-md class="grey lighten-4">
+      <v-layout row wrap v-if="!loading">
+        <v-flex xs12 sm6 md3 v-for="category in categories" :key="category.id">
+          <v-card>
+            <v-card-media v-if="category.image" :src="'/images/categories/' + category.image.name" height="200px">
+            </v-card-media>
+            <v-card-title primary-title>
+              <div>
+                <h3 class="headline mb-0">{{ category.title }}</h3>
+                <div>{{ category.description }}</div>
+              </div>
+            </v-card-title>
+            <v-card-actions>
+              <v-btn flat class="orange--text">Explore</v-btn>
+              <v-btn flat class="red--text" v-on:click="deleteCategory(category.id)">Delete</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-flex>
+        <v-layout v-if="categories.length <= 0">
+          <h3>No categories :(</h3>
+        </v-layout>
+      </v-layout>
+    </v-container>
+
+    <router-link :to="{ name: 'CreateCategory' }" class="btn btn-default">Create</router-link>
+  </v-container>
+</template>
+
+<script>
+  import eventFetch from '@/api/eventFetch';
+
+  export default {
+    name: 'Home',
+    data() {
+      return {
+        categories: [],
+        loading: true,
+      };
+    },
+    created() {
+      this.fetchData();
+    },
+    methods: {
+      fetchData() {
+        eventFetch('/categories', this.$store)
+          .then(response => response.json())
+          .then((response) => {
+            this.loading = false;
+            this.categories = response.data;
+          });
+      },
+      deleteCategory(categoryId) {
+        const router = this.$router;
+        eventFetch('/categories/' + categoryId, this.$store, {method: 'DELETE'})
+          .then(() => {
+          this.categories = this.categories.filter((category) => {
+            return category.id !== categoryId;
+          });
+          router.push('/category');
+        });
+      }
+    },
+  };
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

js/src/components/Event/Create.vue

@@ -0,0 +1,340 @@
+<template>
+  <v-container fluid grid-list-md>
+    <h3>Create a new event</h3>
+    <v-form>
+      <v-stepper v-model="e1" vertical>
+        <v-stepper-step step="1" :complete="e1 > 1">Basic Informations
+        <small>Title and description</small>
+        </v-stepper-step>
+        <v-stepper-content step="1">
+          <v-layout row wrap>
+            <v-flex xs12>
+          <v-text-field
+            label="Title"
+            v-model="event.title"
+            :counter="100"
+            required
+          ></v-text-field>
+            </v-flex>
+          <v-flex md6>
+            <v-text-field
+              label="Description"
+              v-model="event.description"
+              multiLine
+              required
+            ></v-text-field>
+          </v-flex>
+          <v-flex md6>
+            <vue-markdown class="markdown-render"
+              :watches="['show','html','breaks','linkify','emoji','typographer','toc']"
+              :source="event.description"
+              :show="true" :html="false" :breaks="true" :linkify="true"
+              :emoji="true" :typographer="true" :toc="false"
+            ></vue-markdown>
+          </v-flex>
+            <v-flex md12>
+              <v-select
+                v-bind:items="categories"
+                v-model="event.category"
+                item-text="title"
+                item-value="@id"
+                label="Categories"
+                single-line
+                bottom
+              ></v-select>
+            </v-flex>
+            <v-flex md12>
+              <!--<v-text-field
+                v-model="tagsToSend"
+                label="Tags"
+              ></v-text-field>-->
+              <v-select
+                v-model="tagsToSend"
+                label="Tags"
+                chips
+                tags
+                :items="tagsFetched"
+              ></v-select>
+            </v-flex>
+          </v-layout>
+          <v-btn color="primary" @click.native="e1 = 2">Next</v-btn>
+        </v-stepper-content>
+        <v-stepper-step step="2" :complete="e1 > 2">Date and place</v-stepper-step>
+        <v-stepper-content step="2">
+          Event starts at:
+          <v-text-field type="datetime-local" v-model="event.begins_on"></v-text-field>
+          <!--<v-layout row wrap>
+            <v-flex md6>
+              <v-dialog
+                persistent
+                v-model="modals.beginning.date"
+                lazy
+                full-width
+              >
+                <v-text-field
+                  slot="activator"
+                  label="Beginning of the event date"
+                  v-model="event.startDate.date"
+                  prepend-icon="event"
+                  readonly
+                ></v-text-field>
+                <v-date-picker v-model="event.startDate.date" scrollable dateFormat="val => new Date(val).">
+                  <template scope="{ save, cancel }">
+                    <v-card-actions>
+                      <v-btn flat primary @click.native="cancel()">Cancel</v-btn>
+                      <v-btn flat primary @click.native="save()">Save</v-btn>
+                    </v-card-actions>
+                  </template>
+                </v-date-picker>
+              </v-dialog>
+            </v-flex>
+            <v-flex md6>
+              <v-dialog
+                persistent
+                v-model="modals.beginning.time"
+                lazy
+              >
+                <v-text-field
+                  slot="activator"
+                  label="Beginning of the event time"
+                  v-model="event.startDate.time"
+                  prepend-icon="access_time"
+                  readonly
+                ></v-text-field>
+                <v-time-picker v-model="event.startDate.time" actions format="24h">
+                  <template scope="{ save, cancel }">
+                    <v-card-actions>
+                      <v-btn flat primary @click.native="cancel()">Cancel</v-btn>
+                      <v-btn flat primary @click.native="save()">Save</v-btn>
+                    </v-card-actions>
+                  </template>
+                </v-time-picker>
+              </v-dialog>
+            </v-flex>
+          </v-layout>-->
+          Event ends at:
+          <v-text-field type="datetime-local" v-model="event.ends_on"></v-text-field>
+          <!--<v-layout row wrap>
+            <v-flex md6>
+              <v-dialog
+                persistent
+                v-model="modals.end.date"
+                lazy
+                full-width
+              >
+                <v-text-field
+                  slot="activator"
+                  label="End of the event date"
+                  v-model="event.endDate.date"
+                  prepend-icon="event"
+                  readonly
+                ></v-text-field>
+                <v-date-picker v-model="event.endDate.date" scrollable >
+                  <template scope="{ save, cancel }">
+                    <v-card-actions>
+                      <v-btn flat primary @click.native="cancel()">Cancel</v-btn>
+                      <v-btn flat primary @click.native="save()">Save</v-btn>
+                    </v-card-actions>
+                  </template>
+                </v-date-picker>
+              </v-dialog>
+            </v-flex>
+            <v-flex md6>
+              <v-dialog
+                persistent
+                v-model="modals.end.time"
+                lazy
+              >
+                <v-text-field
+                  slot="activator"
+                  label="End of the event time"
+                  v-model="event.endDate.time"
+                  prepend-icon="access_time"
+                  readonly
+                ></v-text-field>
+                <v-time-picker v-model="event.endDate.time" format="24h" actions >
+                  <template scope="{ save, cancel }">
+                    <v-card-actions>
+                      <v-btn flat primary @click.native="cancel()">Cancel</v-btn>
+                      <v-btn flat primary @click.native="save()">Save</v-btn>
+                    </v-card-actions>
+                  </template>
+                </v-time-picker>
+              </v-dialog>
+            </v-flex>
+          </v-layout>-->
+
+          <vuetify-google-autocomplete
+            id="map"
+            append-icon="search"
+            classname="form-control"
+            placeholder="Start typing"
+            label="Location"
+            enable-geolocation
+            types="geocode"
+            v-on:placechanged="getAddressData"
+          >
+          </vuetify-google-autocomplete>
+          <v-btn color="primary" @click.native="e1 = 3">Next</v-btn>
+        </v-stepper-content>
+        <v-stepper-step step="3" :complete="e1 > 3">Extra informations</v-stepper-step>
+        <v-stepper-content step="3">
+          <v-text-field
+            label="Number of seats"
+            v-model="event.seats"
+          ></v-text-field>
+          <v-text-field
+            label="Price"
+            prefix="$"
+            type="float"
+            v-model="event.price"
+          ></v-text-field>
+        </v-stepper-content>
+      </v-stepper>
+    </v-form>
+    <v-btn color="primary" @click="create">Create event</v-btn>
+  </v-container>
+</template>
+
+<script>
+  // import Location from '@/components/Location';
+  import eventFetch from '@/api/eventFetch';
+  import VueMarkdown from 'vue-markdown';
+
+  export default {
+    name: 'create-event',
+    props: ['id'],
+
+    components: {
+/*      Location,*/
+      VueMarkdown,
+    },
+    data() {
+      return {
+        e1: 0,
+        event: {
+          title: '',
+          description: '',
+          begins_on: new Date(),
+          ends_on: new Date(),
+          seats: 0,
+          address: {
+            description: null,
+            floor: null,
+            geo: {
+              type: null,
+              data: {
+                latitude: null,
+                longitude: null,
+              },
+            },
+            addressCountry: null,
+            addressLocality: null,
+            addressRegion: null,
+            postalCode: null,
+            streetAddress: null,
+          },
+          price: 0,
+          category: null,
+          tags: [],
+          participants: [],
+        },
+        categories: [],
+        tags: [{ name: 'test' }, { name: 'montag' }],
+        tagsToSend: [],
+        tagsFetched: [],
+      };
+    },
+    created() {
+      if (this.id) {
+        this.fetchEvent();
+      }
+    },
+    mounted() {
+      this.fetchCategories();
+      this.fetchTags();
+    },
+    methods: {
+      create() {
+        this.event.seats = parseInt(this.event.seats, 10);
+        this.tagsToSend.forEach((tag) => {
+          this.event.tags.push({
+            name: tag,
+            // '@type': 'Tag',
+          });
+        });
+        this.event.category_id = this.event.category.id;
+        this.event.organizer_account_id = this.$store.state.user.account.id;
+        this.event.participants = [this.$store.state.user.account.id];
+        this.event.price = parseFloat(this.event.price);
+
+        if (this.id === undefined) {
+          eventFetch('/events', this.$store, {method: 'POST', body: JSON.stringify({ event: this.event })})
+            .then(response => response.json())
+            .then((data) => {
+              this.loading = false;
+              this.$router.push({name: 'Event', params: {id: data.id}});
+            });
+        } else {
+          eventFetch(`/events/${this.id}`, this.$store, {method: 'PUT', body: JSON.stringify(this.event)})
+            .then(response => response.json())
+            .then((data) => {
+              this.loading = false;
+              this.$router.push({name: 'Event', params: {id: data.id}});
+            });
+        }
+      },
+      fetchCategories() {
+        eventFetch('/categories', this.$store)
+          .then(response => response.json())
+          .then((response) => {
+            this.loading = false;
+            this.categories = response.data;
+          });
+      },
+      fetchTags() {
+        eventFetch('/tags', this.$store)
+          .then(response => response.json())
+          .then((response) => {
+            this.loading = false;
+            response.data.forEach((tag) => {
+              this.tagsFetched.push(tag.name);
+            });
+          });
+      },
+      fetchEvent() {
+        eventFetch(`/events/${this.id}`, this.$store)
+          .then(response => response.json())
+          .then((data) => {
+            this.loading = false;
+            this.event = data;
+            console.log(this.event);
+          });
+      },
+      getAddressData: function (addressData) {
+        if (addressData !== null) {
+            this.event.address = {
+                geom: {
+                    data: {
+                        latitude: addressData.latitude,
+                        longitude: addressData.longitude,
+                    },
+                    type: "point",
+                },
+                addressCountry: addressData.country,
+                addressLocality: addressData.locality,
+                addressRegion: addressData.administrative_area_level_1,
+                postalCode: addressData.postal_code,
+                streetAddress: `${addressData.street_number} ${addressData.route}`,
+            };
+        }
+      },
+    },
+  };
+</script>
+
+<style>
+  .markdown-render h1 {
+    font-size: 2em;
+  }
+</style>

js/src/components/Event/Edit.vue

@@ -0,0 +1,126 @@
+<template>
+  <v-container fluid grid-list-md>
+    <h3>Update event {{ event.title }}</h3>
+    <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
+    <v-form v-if="!loading">
+      <v-stepper v-model="e1" vertical>
+        <v-stepper-step step="1" :complete="e1 > 1">Basic Informations
+          <small>Title and description</small>
+        </v-stepper-step>
+        <v-stepper-content step="1">
+          <v-layout row wrap>
+            <v-flex xs12>
+              <v-text-field
+                label="Title"
+                v-model="event.title"
+                :counter="100"
+                required
+              ></v-text-field>
+            </v-flex>
+            <v-flex md6>
+              <v-text-field
+                label="Description"
+                v-model="event.description"
+                multiLine
+                required
+              ></v-text-field>
+            </v-flex>
+            <v-flex md6>
+              <vue-markdown class="markdown-render"
+                            :watches="['show','html','breaks','linkify','emoji','typographer','toc']"
+                            :source="event.description"
+                            :show="true" :html="false" :breaks="true" :linkify="true"
+                            :emoji="true" :typographer="true" :toc="false"
+              ></vue-markdown>
+            </v-flex>
+            <v-flex md12>
+              <v-select
+                v-bind:items="categories"
+                v-model="event.category"
+                item-text="name"
+                item-value="@id"
+                label="Categories"
+                single-line
+                bottom
+              ></v-select>
+            </v-flex>
+            <v-flex md12>
+              <!--<v-text-field
+                v-model="tagsToSend"
+                label="Tags"
+              ></v-text-field>-->
+              <v-select
+                v-model="tagsToSend"
+                label="Tags"
+                chips
+                tags
+                :items="tagsFetched"
+              ></v-select>
+            </v-flex>
+          </v-layout>
+          <v-btn color="primary" @click.native="e1 = 2">Next</v-btn>
+        </v-stepper-content>
+        <v-stepper-step step="2" :complete="e1 > 2">Date and place</v-stepper-step>
+        <v-stepper-content step="2">
+          Event starts at:
+          <v-text-field type="datetime-local" v-model="event.startDate"></v-text-field>
+          Event ends at:
+          <v-text-field type="datetime-local" v-model="event.endDate"></v-text-field>
+
+          <vuetify-google-autocomplete
+            id="map"
+            append-icon="search"
+            placeholder="Start typing"
+            label="Location"
+            enable-geolocation
+            v-on:placechanged="getAddressData"
+          >
+          </vuetify-google-autocomplete>
+          <v-btn color="primary" @click.native="e1 = 3">Next</v-btn>
+        </v-stepper-content>
+        <v-stepper-step step="3" :complete="e1 > 3">Extra informations</v-stepper-step>
+        <v-stepper-content step="3">
+          <v-text-field
+            label="Number of seats"
+            v-model="event.seats"
+          ></v-text-field>
+          <v-text-field
+            label="Price"
+            prefix="$"
+            type="float"
+            v-model="event.price"
+          ></v-text-field>
+        </v-stepper-content>
+      </v-stepper>
+    </v-form>
+    <v-btn color="primary" @click="create">Create event</v-btn>
+  </v-container>
+</template>
+
+<script>
+  import eventFetch from '@/api/eventFetch';
+
+  export default {
+    props: ['id'],
+    data() {
+      return {
+        loading: true,
+        event: null,
+      };
+    },
+    created() {
+      this.fetchData();
+    },
+    methods: {
+      fetchData() {
+        eventFetch(`/events/${this.id}`, this.$store)
+          .then(response => response.json())
+          .then((data) => {
+            this.loading = false;
+            this.event = data;
+            console.log(this.event);
+          });
+      },
+    }
+  }
+</script>

js/src/components/Event/Event.vue

@@ -0,0 +1,169 @@
+<template>
+  <v-container>
+    <v-layout row>
+      <v-flex xs12 sm6 offset-sm3>
+        <span v-if="error">Error : event not found</span>
+        <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
+        <v-card v-if="!loading && !error">
+          <v-layout column class="media">
+            <v-card-title>
+              <v-btn icon @click="$router.go(-1)">
+                <v-icon>chevron_left</v-icon>
+              </v-btn>
+              <v-spacer></v-spacer>
+              <v-btn icon class="mr-3" v-if="event.organizer.id === $store.state.user.account.id" :to="{ name: 'EditEvent', params: {id: event.id}}">
+                <v-icon>edit</v-icon>
+              </v-btn>
+              <v-menu bottom left>
+                <v-btn icon slot="activator">
+                  <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="$store.state.user.account.id === event.organizer.id">
+                    <v-list-tile-title>Delete</v-list-tile-title>
+                  </v-list-tile>
+                </v-list>
+              </v-menu>
+            </v-card-title>
+            <v-spacer></v-spacer>
+            <div class="text-xs-center">
+              <v-card-title class="pl-5 pt-5">
+                <div class="display-1 pl-5 pt-5">{{ event.title }}</div>
+              </v-card-title>
+              <!--<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>-->
+            </div>
+          <v-container fluid grid-list-md>
+            <v-subheader>Membres</v-subheader>
+            <v-layout row>
+              <v-flex xs2>
+                <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">
+                  <v-avatar size="75px">
+                    <img v-if="!event.organizer.avatar_url"
+                         class="img-circle elevation-7 mb-1"
+                         src="http://lorempixel.com/125/125/"
+                    >
+                    <img v-else
+                         class="img-circle elevation-7 mb-1"
+                         :src="event.organizer.avatar_url"
+                    >
+                  </v-avatar>
+                </router-link>
+                Organisateur <span>{{ event.organizer.username }}</span>
+              </v-flex>
+              <v-flex xs2 v-for="account in event.participants" :key="account.id">
+                <router-link :to="{name: 'Account', params: {'id': account.id}}">
+                  <v-avatar size="75px">
+                    <img v-if="!account.avatar_url"
+                         class="img-circle elevation-7 mb-1"
+                         src="http://lorempixel.com/125/125/"
+                    >
+                    <img v-else
+                         class="img-circle elevation-7 mb-1"
+                         :src="account.avatar_url"
+                    >
+                  </v-avatar>
+                </router-link>
+                <span>{{ account.username }}</span>
+              </v-flex>
+            </v-layout>
+          </v-container>
+          <v-card-actions>
+            <button v-if="!event.participants.map(participant => participant.id).includes($store.state.user.account.id)" @click="joinEvent" class="btn btn-primary">Join</button>
+            <button v-if="event.participants.map(participant => participant.id).includes($store.state.user.account.id)" @click="leaveEvent" class="btn btn-primary">Leave</button>
+            <button @click="deleteEvent" class="btn btn-danger">Delete</button>
+          </v-card-actions>
+          </v-layout>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+  import eventFetch from '@/api/eventFetch';
+  import VueMarkdown from 'vue-markdown';
+
+  export default {
+    name: 'Home',
+    components: {
+      VueMarkdown,
+    },
+    data() {
+      return {
+        loading: true,
+        error: false,
+        event: {
+          id: this.id,
+          title: '',
+          description: '',
+          organizer: {
+            id: null,
+            username: null,
+          },
+          participants: [],
+        },
+      };
+    },
+    methods: {
+      deleteEvent() {
+        const router = this.$router;
+        eventFetch(`/events/${this.id}`, this.$store, { method: 'DELETE' })
+          .then(() => router.push({'name': 'EventList'}));
+      },
+      fetchData() {
+        eventFetch(`/events/${this.id}`, this.$store)
+          .then(response => response.json())
+          .then((data) => {
+            this.loading = false;
+            this.event = data.data;
+          }).catch((res) => {
+            Promise.resolve(res).then((data) => {
+              console.log(data);
+              this.error = true;
+              this.loading = false;
+          })
+        });
+      },
+      joinEvent() {
+        eventFetch(`/events/${this.id}/join`, this.$store)
+          .then(response => response.json())
+          .then((data) => {
+            console.log(data);
+          });
+      },
+      leaveEvent() {
+        eventFetch(`/events/${this.id}/leave`, this.$store)
+          .then(response => response.json())
+          .then((data) => {
+            console.log(data);
+          });
+      },
+      downloadIcsEvent() {
+        eventFetch('/events/' + this.event.id + '/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);
+          })
+      },
+    },
+    props: ['id'],
+    created() {
+      this.fetchData();
+    },
+  };
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

js/src/components/Event/EventList.vue

@@ -0,0 +1,129 @@
+<template>
+  <v-container>
+    <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-layout row wrap justify-space-around>
+      <v-flex xs12 md3 v-for="event in events" :key="event.id">
+        <v-card>
+          <v-card-media v-if="event.image"
+            class="white--text"
+            height="200px"
+            src="http://lorempixel.com/400/200/"
+          >
+            <v-container fill-height fluid>
+              <v-layout fill-height>
+                <v-flex xs12 align-end flexbox>
+                  <span class="headline">{{ event.title }}</span>
+                </v-flex>
+              </v-layout>
+            </v-container>
+          </v-card-media>
+          <v-card-title v-else primary-title>
+            <div class="headline">{{ event.title }}</div>
+          </v-card-title>
+          <v-container>
+              <!--<span class="grey&#45;&#45;text">{{ event.startDate | formatDate }} à <router-link :to="{name: 'EventList', params: {location: geocode(event.address.geo.latitude, event.address.geo.longitude, 10) }}">{{ event.address.addressLocality }}</router-link></span><br>-->
+              <p><vue-markdown>{{ event.description }}</vue-markdown></p>
+              <p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
+          </v-container>
+          <v-card-actions>
+            <v-btn flat color="orange" @click="downloadIcsEvent(event)">Share</v-btn>
+            <v-btn flat color="orange" @click="viewEvent(event.id)">Explore</v-btn>
+            <v-btn flat color="red" @click="deleteEvent(event.id)">Delete</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-flex>
+    </v-layout>
+    <router-link :to="{ name: 'CreateEvent' }" class="btn btn-default">Create</router-link>
+  </v-container>
+</template>
+
+<script>
+  import ngeohash from 'ngeohash';
+  import VueMarkdown from 'vue-markdown';
+  import eventFetch from '@/api/eventFetch';
+  import VCardTitle from "vuetify/es5/components/VCard/VCardTitle";
+
+  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) {
+        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) {
+          queryString += ('?geohash=' + location);
+          const { latitude, longitude } = ngeohash.decode(location);
+          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;
+          });
+      },
+      deleteEvent(id) {
+        const router = this.$router;
+        eventFetch('/events/' + id, this.$store, {'method': 'DELETE'})
+          .then(() => router.push('/events'));
+      },
+      viewEvent(id) {
+        this.$router.push({ name: 'Event', params: { id } })
+      },
+      downloadIcsEvent(event) {
+        eventFetch('/events/' + event.id + '/export', 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 -->
+<style scoped>
+
+</style>

js/src/components/Group/Create.vue

@@ -0,0 +1,125 @@
+<template>
+  <v-container>
+    <h3>Create a new group</h3>
+    <v-form>
+      <v-layout row wrap>
+        <v-flex xs12>
+          <v-text-field
+            label="Title"
+            v-model="group.title"
+            :counter="100"
+            required
+          ></v-text-field>
+        </v-flex>
+        <v-flex md6>
+          <v-text-field
+            label="Description"
+            v-model="group.description"
+            multiLine
+            required
+          ></v-text-field>
+        </v-flex>
+        <v-flex md6>
+          <vue-markdown class="markdown-render"
+                        :watches="['show','html','breaks','linkify','emoji','typographer','toc']"
+                        :source="group.description"
+                        :show="true" :html="false" :breaks="true" :linkify="true"
+                        :emoji="true" :typographer="true" :toc="false"
+          ></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"
+          >
+          </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)"
+          ></v-select>
+        </v-flex>
+      </v-layout>
+    </v-form>
+    <v-btn color="primary" @click="create">Create group</v-btn>
+  </v-container>
+</template>
+
+<script>
+  import eventFetch from '@/api/eventFetch';
+  import VueMarkdown from 'vue-markdown';
+  import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
+
+  export default {
+    name: 'create-group',
+
+    components: {
+      VueMarkdown,
+      VuetifyGoogleAutocomplete,
+    },
+    data() {
+      return {
+        e1: 0,
+        group: {
+          title: '',
+          description: '',
+          category: null,
+        },
+        categories: [],
+      };
+    },
+    mounted() {
+      this.fetchCategories();
+    },
+    methods: {
+      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 } });
+          });
+      },
+      fetchCategories() {
+        eventFetch('/categories', this.$store)
+          .then(response => response.json())
+          .then((data) => {
+            this.loading = false;
+            this.categories = data.data;
+          });
+      },
+      getAddressData: function (addressData) {
+        this.group.address = {
+          geo: {
+            latitude: addressData.latitude,
+            longitude: addressData.longitude,
+          },
+          addressCountry: addressData.country,
+          addressLocality: addressData.city,
+          addressRegion: addressData.administrative_area_level_1,
+          postalCode: addressData.postal_code,
+          streetAddress: `${addressData.street_number} ${addressData.route}`,
+        };
+      },
+    },
+  };
+</script>
+
+<style>
+  .markdown-render h1 {
+    font-size: 2em;
+  }
+</style>

js/src/components/Group/Group.vue

@@ -0,0 +1,179 @@
+<template>
+  <v-container>
+    <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-layout column class="media">
+            <v-card-title>
+              <v-btn icon @click="$router.go(-1)">
+                <v-icon>chevron_left</v-icon>
+              </v-btn>
+              <v-spacer></v-spacer>
+              <v-btn icon class="mr-3" v-if="$store.state.user">
+                <v-icon>edit</v-icon>
+              </v-btn>
+              <v-btn icon>
+                <v-icon>more_vert</v-icon>
+              </v-btn>
+            </v-card-title>
+            <v-spacer></v-spacer>
+            <div class="text-xs-center">
+              <v-avatar size="125px">
+                <img v-if="!group.avatar_url"
+                     class="img-circle elevation-7 mb-1"
+                     src="http://lorempixel.com/125/125/"
+                >
+                <img v-else
+                     class="img-circle elevation-7 mb-1"
+                     :src="group.avatar_url"
+                >
+              </v-avatar>
+              <v-card-title class="pl-5 pt-5">
+                <div class="display-1 pl-5 pt-5">{{ group.title }}<span v-if="group.server">@{{ group.server.address }}</span></div>
+              </v-card-title>
+              <v-card-text v-html="group.description"></v-card-text>
+            </div>
+          </v-layout>
+          <v-list three-line>
+            <v-list-tile>
+              <v-list-tile-action>
+                <v-icon color="indigo">phone</v-icon>
+              </v-list-tile-action>
+              <v-list-tile-content>
+                <v-list-tile-title>(323) 555-6789</v-list-tile-title>
+                <v-list-tile-sub-title>Work</v-list-tile-sub-title>
+              </v-list-tile-content>
+              <v-list-tile-action>
+                <v-icon dark>chat</v-icon>
+              </v-list-tile-action>
+            </v-list-tile>
+            <v-divider inset></v-divider>
+            <v-list-tile>
+              <v-list-tile-action>
+                <v-icon color="indigo">mail</v-icon>
+              </v-list-tile-action>
+              <v-list-tile-content>
+                <v-list-tile-title>ali_connors@example.com</v-list-tile-title>
+                <v-list-tile-sub-title>Work</v-list-tile-sub-title>
+              </v-list-tile-content>
+            </v-list-tile>
+            <v-divider inset></v-divider>
+            <v-list-tile v-if="group.address">
+              <v-list-tile-action>
+                <v-icon color="indigo">location_on</v-icon>
+              </v-list-tile-action>
+              <v-list-tile-content>
+                <v-list-tile-title>{{ group.address.streetAddress }}</v-list-tile-title>
+                <v-list-tile-sub-title>{{ group.address.postalCode }} {{ group.address.locality }}</v-list-tile-sub-title>
+              </v-list-tile-content>
+            </v-list-tile>
+          </v-list>
+          <v-container fluid grid-list-md v-if="group.members.length > 0">
+            <v-subheader>Membres</v-subheader>
+            <v-layout row>
+              <v-flex xs2 v-for="member in group.members" :key="member.id">
+                <router-link :to="{name: 'Account', params: {'id': member.account.id}}">
+                  <v-badge overlap>
+                    <span slot="badge" v-if="member.role == 3"><v-icon>stars</v-icon></span>
+                    <v-avatar size="75px">
+                      <img v-if="!member.account.avatar_url"
+                           class="img-circle elevation-7 mb-1"
+                           src="http://lorempixel.com/125/125/"
+                      >
+                      <img v-else
+                           class="img-circle elevation-7 mb-1"
+                           :src="member.account.avatar_url"
+                      >
+                    </v-avatar>
+                  </v-badge>
+                </router-link>
+                <span>{{ groupAccount.account.username }}</span>
+              </v-flex>
+            </v-layout>
+          </v-container>
+          <v-container fluid grid-list-md v-if="group.events.length > 0">
+            <v-subheader>Participated at</v-subheader>
+            <v-layout row wrap>
+              <v-flex v-for="event in group.events" :key="event.id">
+                <v-card>
+                  <v-card-media
+                    class="black--text"
+                    height="200px"
+                    src="http://lorempixel.com/400/200/"
+                  >
+                    <v-container fill-height fluid>
+                      <v-layout fill-height>
+                        <v-flex xs12 align-end flexbox>
+                          <span class="headline">{{ event.title }}</span>
+                        </v-flex>
+                      </v-layout>
+                    </v-container>
+                  </v-card-media>
+                  <v-card-title>
+                    <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>
+                    </div>
+                  </v-card-title>
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn icon>
+                      <v-icon>favorite</v-icon>
+                    </v-btn>
+                    <v-btn icon>
+                      <v-icon>bookmark</v-icon>
+                    </v-btn>
+                    <v-btn icon>
+                      <v-icon>share</v-icon>
+                    </v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+
+  import eventFetch from '@/api/eventFetch';
+
+  export default {
+    name: 'Group',
+    props: ['id'],
+    data() {
+      return {
+        group: {
+          id: this.id,
+          title: '',
+          description: '',
+        },
+        loading: true,
+      }
+    },
+    methods: {
+      fetchData() {
+        eventFetch(`/groups/${this.id}`, this.$store)
+          .then(response => response.json())
+          .then((data) => {
+            this.loading = false;
+            this.group = data.data;
+          });
+      },
+      deleteGroup() {
+        const router = this.$router;
+        eventFetch(`/groups/${this.id}`, this.$store, { method: 'DELETE' })
+          .then(response => response.json())
+          .then(() => router.push('/groups'));
+      },
+    },
+    created() {
+      this.fetchData();
+    },
+  }
+</script>

js/src/components/Group/GroupList.vue

@@ -0,0 +1,86 @@
+<template>
+  <v-container>
+    <h1>Group List</h1>
+
+    <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
+    <v-layout row wrap justify-space-around>
+      <v-flex xs12 md3 v-for="group in groups" :key="group.id">
+        <v-card>
+          <v-card-media
+            class="black--text"
+            height="200px"
+            src="http://lorempixel.com/400/200/"
+          >
+            <v-container fill-height fluid>
+              <v-layout fill-height>
+                <v-flex xs12 align-end flexbox>
+                  <span class="headline">{{ group.title }}</span>
+                </v-flex>
+              </v-layout>
+            </v-container>
+          </v-card-media>
+          <v-card-title>
+            <div>
+              <span class="grey--text">{{ group.startDate | formatDate }} à {{ group.location }}</span><br>
+              <p>{{ group.description }}</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.id)"><v-icon v-if="group.locked">lock</v-icon>Join</v-btn>
+            <v-btn flat color="orange" @click="viewEvent(group.id)">Explore</v-btn>
+            <v-btn flat color="red" @click="deleteEvent(group.id)">Delete</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-flex>
+    </v-layout>
+    <router-link :to="{ name: 'CreateGroup' }" class="btn btn-default">Create</router-link>
+  </v-container>
+</template>
+
+<script>
+  import eventFetch from '@/api/eventFetch';
+
+  export default {
+    name: 'GroupList',
+    data() {
+      return {
+        groups: [],
+        loading: true,
+      };
+    },
+    created() {
+      this.fetchData();
+    },
+    methods: {
+      fetchData() {
+        eventFetch('/groups', this.$store)
+          .then(response => response.json())
+          .then((data) => {
+            this.loading = false;
+            this.groups = data.data;
+          });
+      },
+      deleteEvent(id) {
+        const router = this.$router;
+        eventFetch('/groups/' + id, this.$store, {'method': 'DELETE'})
+          .then(response => response.json())
+          .then(() => router.push('/groups'));
+      },
+      viewEvent(id) {
+        this.$router.push({ name: 'Group', params: { id } })
+      },
+      joinGroup(id) {
+        const router = this.$router;
+        eventFetch('/groups/' + id + '/join', this.$store)
+          .then(response => response.json())
+          .then(() => router.push('/group/' + id))
+      }
+    },
+  };
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

js/src/components/Home.vue

@@ -0,0 +1,98 @@
+<template>
+  <v-container>
+    <h1 class="welcome" v-if="$store.state.user">{{ $t("home.welcome", { 'username': this.displayed_name }) }}</h1>
+    <h1 class="welcome" v-else>{{ $t("home.welcome_off", { 'username': $store.state.user.username}) }}</h1>
+    <router-link :to="{ name: 'EventList' }">{{ $t('home.events') }}</router-link>
+    <router-link v-if="$store.state.user === false" :to="{ name: 'Login' }">{{ $t('home.login') }}</router-link>
+    <router-link v-if="$store.state.user === false" :to="{ name: 'Register' }">{{ $t('home.register') }}</router-link>
+    <v-layout row>
+      <v-flex xs6>
+        <v-btn large @click="geoLocalize"><v-icon>my_location</v-icon>Me géolocaliser</v-btn>
+      </v-flex>
+      <v-flex xs6>
+        <vuetify-google-autocomplete
+          id="map"
+          append-icon="search"
+          classname="form-control"
+          placeholder="Start typing"
+          enable-geolocation
+          types="(cities)"
+          v-on:placechanged="getAddressData"
+        >
+        </vuetify-google-autocomplete>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>
+
+<script>
+
+import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
+import ngeohash from 'ngeohash';
+import eventFetch from "../api/eventFetch";
+
+export default {
+  components: { VuetifyGoogleAutocomplete },
+  name: 'Home',
+  data() {
+    return {
+      user: null,
+      searchTerm: null,
+      location_field: {
+        loading: false,
+        search: null,
+      },
+      locations: [],
+    };
+  },
+  mounted() {
+    // this.fetchLocations();
+  },
+  computed: {
+    displayed_name: function() {
+      return this.$store.state.user.account.display_name === null ? this.$store.state.user.account.username : this.$store.state.user.account.display_name
+    },
+  },
+  methods: {
+    fetchLocations() {
+      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')}})
+      } else {
+        navigator.geolocation.getCurrentPosition((pos) => {
+          const crd = pos.coords;
+
+          const geohash = ngeohash.encode(crd.latitude, crd.longitude, 11);
+          sessionStorage.setItem('City', geohash);
+          router.push({name: 'EventList', params: {location: geohash}});
+
+        }, (err) => console.warn(`ERROR(${err.code}): ${err.message}`), {
+          enableHighAccuracy: true,
+          timeout: 5000,
+          maximumAge: 0
+        });
+      }
+    },
+    getAddressData: function (addressData) {
+      const geohash = ngeohash.encode(addressData.latitude, addressData.longitude, 11);
+      sessionStorage.setItem('City', geohash);
+      this.$router.push({name: 'EventList', params: {location: geohash}});
+    },
+  },
+};
+</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);
+  }
+</style>

js/src/components/Location.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+
+    <!--<gmap-autocomplete :value="description" @input="setPlace"
+                       @place_changed="setPlace">
+    </gmap-autocomplete>
+    <br />
+
+    <gmap-map
+      :center="center"
+      :zoom="15"
+      style="width: 500px; height: 300px"
+    >
+      <gmap-marker
+        :key="index"
+        v-for="(m, index) in markers"
+        :position="m.position"
+        :clickable="true"
+        :draggable="true"
+        @click="center=m.position"
+      ></gmap-marker>
+    </gmap-map>-->
+    {{ center.lat }} - {{ center.lng }}
+  </div>
+</template>
+
+<script>
+
+  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 = [{
+          position: { lat: this.center.lat, lng: this.center.lng },
+        }];
+        this.$emit('input', place.formatted_address);
+      },
+    },
+  };
+
+</script>

js/src/components/Login.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+  <v-form>
+    <v-text-field
+      label="Email"
+      required
+      type="text"
+      v-model="credentials.email"
+      :rules="[rules.required]"
+    >
+    </v-text-field>
+    <v-text-field
+      label="password"
+      required
+      type="password"
+      v-model="credentials.password"
+      :rules="[rules.required]"
+    >
+    </v-text-field>
+    <v-btn @click="loginAction" color="blue">Login</v-btn>
+  </v-form>
+  <v-snackbar
+    :timeout="error.timeout"
+    :error="true"
+    v-model="error.show"
+  >
+    {{ error.text }}
+    <v-btn dark flat @click.native="error.show = false">Close</v-btn>
+  </v-snackbar>
+  </div>
+</template>
+
+<script>
+
+  import auth from '@/auth/index';
+
+  export default {
+
+    beforeCreate() {
+      if (this.$store.state.user) {
+        this.$router.push('/');
+      }
+    },
+
+    data() {
+      return {
+        credentials: {
+          email: '',
+          password: '',
+        },
+        error: {
+          show: false,
+          text: '',
+          timeout: 3000,
+          field: {
+            email: false,
+            password: false,
+          },
+        },
+        rules: {
+          required: value => !!value || 'Required.',
+        },
+      };
+    },
+    methods: {
+      loginAction(e) {
+        e.preventDefault();
+        auth.login(JSON.stringify(this.credentials), (data) => {
+          this.$store.commit('LOGIN_USER', data.user);
+          this.$router.push({ name: 'Home' });
+        }, (error) => {
+          Promise.resolve(error).then((errorMsg) => {
+            console.log(errorMsg);
+            this.error.show = true;
+            this.error.text = this.$t(errorMsg.display_error);
+          }).catch((e) => {
+            console.log(e);
+            this.error.show = true;
+            this.error.text = e.message;
+          });
+        });
+      },
+    },
+  };
+</script>

js/src/components/NavBar.vue

@@ -0,0 +1,138 @@
+<template>
+  <v-toolbar
+    class="blue darken-3"
+    dark
+    app
+    clipped-left
+    fixed
+  >
+    <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
+      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
+      <router-link :to="{ name: 'Home' }">
+        Libre-Event
+      </router-link>
+    </v-toolbar-title>
+    <v-select
+      autocomplete
+      :loading="searchElement.loading"
+      light
+      solo
+      prepend-icon="search"
+      placeholder="Search"
+      required
+      item-text="displayedText"
+      :items="searchElement.items"
+      :search-input.sync="search"
+      v-model="searchSelect"
+    ></v-select>
+    <v-spacer></v-spacer>
+    <v-menu
+      offset-y
+      :close-on-content-click="false"
+      :nudge-width="200"
+      v-model="notificationMenu"
+    >
+      <v-btn icon slot="activator">
+        <v-badge left color="red">
+          <span slot="badge">{{ notifications.length }}</span>
+          <v-icon>notifications</v-icon>
+        </v-badge>
+      </v-btn>
+      <v-card>
+        <v-list two-line>
+          <template v-for="item in notifications">
+            <v-subheader v-if="item.header" v-text="item.header" v-bind:key="item.header"></v-subheader>
+            <v-divider v-else-if="item.divider" v-bind:inset="item.inset" v-bind:key="item.inset"></v-divider>
+            <v-list-tile avatar v-else v-bind:key="item.title">
+              <v-list-tile-content>
+                <v-list-tile-title v-html="item.title"></v-list-tile-title>
+                <v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
+              </v-list-tile-content>
+            </v-list-tile>
+          </template>
+        </v-list>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn flat @click="notificationMenu = false">Close</v-btn>
+          <v-btn color="primary" flat @click="notificationMenu = false">Save</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-menu>
+    <v-btn flat @click="$router.push({name: 'Account', params: {'id': getUser().account.id}})" v-if="$store.state.user">{{ this.displayed_name }}</v-btn>
+  </v-toolbar>
+</template>
+
+<script>
+  import eventFetch from '@/api/eventFetch';
+
+  export default {
+    name: 'NavBar',
+    data() {
+      return {
+        notificationMenu: false,
+        notifications: [
+          {header: 'Coucou'},
+          {title: "T'as une notification", subtitle: 'Et elle est cool'},
+        ],
+        searchElement: {
+          loading: false,
+          items: [],
+        },
+        search: null,
+        searchSelect: null,
+      };
+    },
+    watch: {
+      search (val) {
+        val && this.querySelections(val)
+      },
+      searchSelect(val) {
+        console.log(val);
+        if (val.hasOwnProperty('addressLocality')) {
+          this.$router.push({name: 'EventList', params: {location: val.geohash}});
+        } else {
+          this.$router.push({name: 'Account', params: {id: val.id}});
+        }
+      }
+    },
+    computed: {
+      displayed_name: function() {
+        return this.$store.state.user.account.display_name === null ? this.$store.state.user.account.username : this.$store.state.user.account.display_name
+      },
+    },
+    methods: {
+      getUser() {
+        return this.$store.state.user === undefined ? false : this.$store.state.user;
+      },
+      querySelections(searchTerm) {
+        this.searchElement.loading = true;
+        eventFetch('/find/', this.$store, {method: 'POST', body: JSON.stringify({search: searchTerm})})
+          .then(response => response.json())
+          .then((results) => {
+            console.log(results);
+            const accountResults = results.accounts.map((result) => {
+              if (result.server) {
+                result.displayedText = `${result.username}@${result.server.address}`;
+              } else {
+                result.displayedText = result.username;
+              }
+              return result;
+            });
+            const cities = new Set();
+            const placeResults = results.places.map((result) => {
+              result.displayedText = result.addressLocality;
+              return result;
+            }).filter((result) => {
+              if (cities.has(result.addressLocality)) {
+                return false;
+              }
+              cities.add(result.addressLocality);
+              return true;
+            });
+            this.searchElement.items = accountResults.concat(placeResults);
+            this.searchElement.loading = false;
+          });
+      }
+    }
+  }
+</script>

js/src/components/PageNotFound.vue

@@ -0,0 +1,10 @@
+<template>
+  <v-container>
+    <v-layout row>
+      <v-flex xs12 sm6 offset-sm3>
+        <h1>404 !</h1>
+        <img src="../assets/oh_no.jpg" />
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>

js/src/components/Register.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+  <v-form>
+    <v-text-field
+      label="Username"
+      required
+      type="text"
+      v-model="credentials.username"
+      :rules="[rules.required]"
+    >
+    </v-text-field>
+    <v-text-field
+      label="email"
+      required
+      type="email"
+      v-model="credentials.email"
+      :rules="[rules.required, rules.email]"
+    >
+    </v-text-field>
+    <v-text-field
+      label="password"
+      required
+      type="password"
+      v-model="credentials.password"
+      :rules="[rules.required]"
+    >
+    </v-text-field>
+    <v-btn @click="registerAction" color="primary">Register</v-btn>
+  </v-form>
+  <v-snackbar
+    :timeout="error.timeout"
+    :error="true"
+    v-model="error.show"
+  >
+    {{ error.text }}
+    <v-btn dark flat @click.native="error.show = false">Close</v-btn>
+  </v-snackbar>
+  </div>
+</template>
+
+<script>
+
+  import auth from '@/auth/index';
+
+  export default {
+    data() {
+      return {
+        credentials: {
+          username: '',
+          email: '',
+          password: '',
+        },
+        error: {
+          show: false,
+          text: '',
+          timeout: 3000,
+          field: {
+            username: false,
+            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.';
+          },
+        },
+      };
+    },
+    methods: {
+      registerAction(e) {
+        e.preventDefault();
+        auth.signup(JSON.stringify(this.credentials), (response) => {
+          console.log(response);
+          this.$store.commit('LOGIN_USER', response.user);
+          this.$router.push({ name: 'Home' });
+        }, (error) => {
+          this.error.show = true;
+          this.error.text = error.message;
+          this.error.field[error.field] = true;
+        });
+      },
+    },
+  };
+</script>

js/src/i18n/en.js

@@ -0,0 +1,15 @@
+export default {
+  home: {
+    welcome: 'Welcome on Libre-Event, {username}',
+    welcome_off: 'Welcome on Libre-Event',
+    events: 'Events',
+    groups: 'Groups',
+    login: 'Login',
+    register: 'Register',
+  },
+  event: {
+    list: {
+      title: "Your event list",
+    },
+  },
+};

js/src/i18n/fr.js

@@ -0,0 +1,20 @@
+export default {
+  home: {
+    welcome: 'Bienvenue sur Libre-Event, {username}!',
+    welcome_off: 'Bienvenue sur Libre-Event',
+    events: 'Événements',
+    groups: 'Groupes',
+    login: 'Se connecter',
+    register: "S'inscrire",
+  },
+  event: {
+    list: {
+      title: "Votre liste d'événements",
+    },
+  },
+  session: {
+    error: {
+      bad_login: 'Erreur lors de la connexion : Votre nom d\'utilisateur ou votre mot de passe est incorrect',
+    },
+  },
+};

js/src/i18n/index.js

@@ -0,0 +1,6 @@
+import en from './en';
+import fr from './fr';
+
+export default {
+  en, fr,
+};

js/src/main.js

@@ -0,0 +1,76 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue';
+// import * as VueGoogleMaps from 'vue2-google-maps';
+import VueMarkdown from 'vue-markdown';
+import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
+import Vuetify from 'vuetify';
+import Vuex from 'vuex';
+import moment from 'moment';
+import VuexI18n from 'vuex-i18n';
+import 'vuetify/dist/vuetify.min.css';
+import 'material-design-icons-iconfont/dist/material-design-icons.css';
+import App from '@/App';
+import router from '@/router';
+import storeData from '@/store/index';
+import translations from '@/i18n/index';
+import auth from '@/auth';
+
+Vue.config.productionTip = false;
+
+Vue.use(VuetifyGoogleAutocomplete, {
+    apiKey: 'AIzaSyBF37pw38j0giICt73TCAPNogc07Upe_Q4', // Can also be an object. E.g, for Google Maps Premium API, pass `{ client: <YOUR-CLIENT-ID> }`
+});
+
+/*Vue.use(VueGoogleMaps, {
+  load: {
+    key: 'AIzaSyBF37pw38j0giICt73TCAPNogc07Upe_Q4',
+    libraries: 'places',
+    installComponents: false,
+  },
+});*/
+
+Vue.use(VueMarkdown);
+Vue.use(Vuetify);
+Vue.use(Vuex);
+let language = window.navigator.userLanguage || window.navigator.language;
+moment.locale(language);
+
+Vue.filter('formatDate', value => (value ? moment(String(value)).format('LLLL') : null));
+
+if (!(language in translations)) {
+  [language] = language.split('-', 1);
+}
+
+const store = new Vuex.Store(storeData);
+
+Vue.use(VuexI18n.plugin, store);
+
+Object.entries(translations).forEach((key) => {
+  Vue.i18n.add(key[0], key[1]);
+});
+
+Vue.i18n.set(language);
+Vue.i18n.fallback('en');
+
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiredAuth) && store.state.user === undefined || store.state.user == null) {
+    next({
+      name: 'Login',
+      query: { redirect: to.fullPath }
+    });
+  } else {
+    next();
+  }
+});
+
+auth.getUser(store, () => {}, () => {});
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  store,
+  template: '<App/>',
+  components: { App },
+});

js/src/registerServiceWorker.js

@@ -0,0 +1,24 @@
+/* eslint-disable no-console */
+
+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');
+    },
+    cached() {
+      console.log('Content has been cached for offline use.');
+    },
+    updated() {
+      console.log('New content is available; please refresh.');
+    },
+    offline() {
+      console.log('No internet connection found. App is running in offline mode.');
+    },
+    error(error) {
+      console.error('Error during service worker registration:', error);
+    },
+  });
+}

js/src/router/index.js

@@ -0,0 +1,120 @@
+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/Register';
+import Login from '@/components/Login';
+import Account from '@/components/Account/Account';
+import CreateGroup from '@/components/Group/Create';
+import Group from '@/components/Group/Group';
+import GroupList from '@/components/Group/GroupList';
+
+Vue.use(Router);
+
+const router = new Router({
+  mode: 'history',
+  base: '/',
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: Home,
+      meta: { requiredAuth: false },
+    },
+    {
+      path: '/events/list/:location?',
+      name: 'EventList',
+      component: EventList,
+      meta: { requiredAuth: false },
+    },
+    {
+      path: '/events/:id(\\d+)',
+      name: 'Event',
+      component: Event,
+      props: true,
+      meta: { requiredAuth: false },
+    },
+    {
+      path: '/events/create',
+      name: 'CreateEvent',
+      component: CreateEvent,
+      meta: { requiredAuth: true },
+    },
+    {
+      path: '/events/:id(\\d+)/edit',
+      name: 'EditEvent',
+      component: CreateEvent,
+      props: true,
+      meta: { requiredAuth: true },
+    },
+    {
+      path: '/location/new',
+      name: 'Location',
+      component: Location,
+      meta: { requiredAuth: true },
+    },
+    {
+      path: '/category',
+      name: 'CategoryList',
+      component: CategoryList,
+      meta: { requiredAuth: false },
+    },
+    {
+      path: '/category/create',
+      name: 'CreateCategory',
+      component: CreateCategory,
+      meta: { requiredAuth: true },
+    },
+    {
+      path: '/register',
+      name: 'Register',
+      component: Register,
+      meta: { requiredAuth: false },
+    },
+    {
+      path: '/login',
+      name: 'Login',
+      component: Login,
+      meta: { requiredAuth: false },
+    },
+    {
+      path: '/accounts/:id(\\d+)',
+      name: 'Account',
+      component: Account,
+      props: true,
+      meta: { requiredAuth: false },
+    },
+    {
+      path: '/group',
+      name: 'GroupList',
+      component: GroupList,
+      meta: { requiredAuth: false },
+    },
+    {
+      path: '/group-create',
+      name: 'CreateGroup',
+      component: CreateGroup,
+      meta: { requiredAuth: true },
+    },
+    {
+      path: '/group/:id',
+      name: 'Group',
+      component: Group,
+      props: true,
+      meta: { requiredAuth: false },
+    },
+    { path: "*",
+      name: 'PageNotFound',
+      component: PageNotFound,
+      meta: { requiredAuth: false },
+    },
+  ],
+});
+
+export default router;

js/src/store/index.js

@@ -0,0 +1,26 @@
+import { LOGIN_USER, LOGOUT_USER, LOAD_USER } from './mutation-types';
+
+const state = {
+  isLogged: !!localStorage.getItem('token'),
+  user: false,
+};
+
+/* eslint-disable */
+const mutations = {
+  [LOGIN_USER](state, user) {
+    state.isLogged = true;
+    state.user = user;
+  },
+
+  [LOAD_USER](state, user) {
+    state.user = user;
+  },
+
+  [LOGOUT_USER](state) {
+    state.isLogged = false;
+    state.user = null;
+  },
+};
+/* eslint-enable */
+
+export default { state, mutations };

js/src/store/mutation-types.js

@@ -0,0 +1,3 @@
+export const LOGIN_USER = 'LOGIN_USER';
+export const LOAD_USER = 'LOAD_USER';
+export const LOGOUT_USER = 'LOGOUT_USER';

js/tests/e2e/custom-assertions/elementCount.js

@@ -0,0 +1,19 @@
+// A custom Nightwatch assertion.
+// The assertion name is the filename.
+// Example usage:
+//
+//   browser.assert.elementCount(selector, count)
+//
+// For more information on custom assertions see:
+// http://nightwatchjs.org/guide#writing-custom-assertions
+
+exports.assertion = function elementCount(selector, count) {
+  this.message = `Testing if element <${selector}> has count: ${count}`;
+  this.expected = count;
+  this.pass = val => val === count;
+  this.value = res => res.value;
+  function evaluator(_selector) {
+    return document.querySelectorAll(_selector).length;
+  }
+  this.command = cb => this.api.execute(evaluator, [selector], cb);
+};

js/tests/e2e/specs/test.js

@@ -0,0 +1,14 @@
+// For authoring Nightwatch tests, see
+// http://nightwatchjs.org/guide#usage
+
+module.exports = {
+  'default e2e tests': (browser) => {
+    browser
+      .url(process.env.VUE_DEV_SERVER_URL)
+      .waitForElementVisible('#app', 5000)
+      .assert.elementPresent('.hello')
+      .assert.containsText('h1', 'Welcome to Your Vue.js App')
+      .assert.elementCount('img', 1)
+      .end();
+  },
+};

js/tests/unit/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  env: {
+    mocha: true
+  },
+  rules: {
+    'import/no-extraneous-dependencies': 'off'
+  }
+}

js/tests/unit/HelloWorld.spec.js

@@ -0,0 +1,13 @@
+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);
+  });
+});

js/vue.config.js

@@ -0,0 +1,11 @@
+//const Dotenv = require('dotenv-webpack');
+
+module.exports = {
+  lintOnSave: false,
+  compiler: true,
+  configureWebpack: {
+    plugins: [
+      //new Dotenv(),
+    ],
+  },
+};