Move folder

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

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';