From 411560c2181452881746a035692404678f954f16 Mon Sep 17 00:00:00 2001
From: les <lesion@autistici.org>
Date: Tue, 28 Jul 2020 12:24:39 +0200
Subject: [PATCH] major UI modification

---
 components/Calendar.vue           |   4 +-
 components/Confirm.vue            |  86 ++++++++++++
 components/Editor.vue             |  27 +++-
 components/Event.vue              |  52 +++++--
 components/Home.vue               |   1 -
 components/List.vue               |   6 +-
 components/Snackbar.vue           |  10 +-
 components/admin/Announcement.vue |  35 +++--
 components/admin/Federation.vue   |  79 +++++------
 components/admin/Moderation.vue   | 131 +++++++++---------
 components/admin/Places.vue       |  45 +++---
 components/admin/Settings.vue     |  28 +---
 components/admin/Theme.vue        |  85 ++++++++++++
 components/admin/Users.vue        |  65 ++++-----
 layouts/default.vue               |  27 +---
 layouts/modal.vue                 |  28 +++-
 pages/Admin.vue                   |  36 +++--
 pages/Login.vue                   |  31 ++---
 pages/Register.vue                |  45 +++---
 pages/add/_edit.vue               | 219 ++++++++++++++++++------------
 pages/announcement/_id.vue        |  68 +++++-----
 pages/event/_id.vue               | 108 ++++++---------
 pages/event/eventAdmin.vue        |  52 +++----
 pages/recover/_code.vue           |  37 ++---
 plugins/helpers.js                |  13 ++
 server/api/controller/settings.js |  15 +-
 server/routes.js                  |   9 +-
 27 files changed, 770 insertions(+), 572 deletions(-)
 create mode 100644 components/Confirm.vue
 create mode 100644 components/admin/Theme.vue
 create mode 100644 plugins/helpers.js

diff --git a/components/Calendar.vue b/components/Calendar.vue
index 413c1924..9f714152 100644
--- a/components/Calendar.vue
+++ b/components/Calendar.vue
@@ -2,7 +2,7 @@
   #calendar
     v-calendar(
       title-position='left'
-      is-dark
+      :is-dark="settings['theme.is_dark']"
       @update:from-page='updatePage'
       :columns="$screens({ default: 1, lg: 2 })"
       :locale='$i18n.locale'
@@ -29,7 +29,7 @@ export default {
   },
   computed: {
     ...mapGetters(['filteredEventsWithPast']),
-    ...mapState(['tags', 'filters', 'in_past']),
+    ...mapState(['tags', 'filters', 'in_past', 'settings']),
 
     // TODO: could be better
     attributes () {
diff --git a/components/Confirm.vue b/components/Confirm.vue
new file mode 100644
index 00000000..4360a0ae
--- /dev/null
+++ b/components/Confirm.vue
@@ -0,0 +1,86 @@
+
+<template lang="pug">
+  v-dialog(v-model='show'
+    :color='options.color'
+    :title='title'
+    :max-width='options.width'
+    :style="{ zIndex: options.zIndex, position: 'absolute' }"
+    @keydown.esc='cancel')
+    v-card
+      v-card-title {{ title }}
+      v-card-text.pa-4(v-show='!!message') {{ message }}
+      v-card-actions.pt-0
+        v-spacer
+        v-btn(color='primary darken-1' text
+          @click='agree') {{$t('common.ok')}}
+        v-btn(color='secondary'
+          text @click='cancel') {{$t('common.cancel')}}
+</template>
+
+<script>
+/**
+ * Vuetify Confirm Dialog component
+ *
+ * Call it:
+ * this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' }).then((confirm) => {})
+ *
+ * Or use await:
+ * if (await this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' })) {
+ *   // yes
+ * }
+ * else {
+ *   // cancel
+ * }
+ *
+ */
+export default {
+  data: () => ({
+    dialog: false,
+    resolve: null,
+    reject: null,
+    message: null,
+    title: null,
+    options: {
+      color: 'danger',
+      width: 350,
+      zIndex: 500
+    }
+  }),
+  computed: {
+    show: {
+      get () {
+        return this.dialog
+      },
+      set (value) {
+        this.dialog = value
+        if (value === false) {
+          this.cancel()
+        }
+      }
+    }
+  },
+  created () {
+    this.$root.$confirm = this.open
+  },
+  methods: {
+    open (title, message, options) {
+      this.dialog = true
+      this.title = title
+      this.message = message
+      this.options = Object.assign(this.options, options)
+      return new Promise((resolve, reject) => {
+        this.resolve = resolve
+        this.reject = reject
+      })
+    },
+    agree () {
+      this.resolve(true)
+      this.dialog = false
+    },
+    cancel () {
+      this.resolve(false)
+      this.dialog = false
+    }
+  }
+}
+</script>
diff --git a/components/Editor.vue b/components/Editor.vue
index a1a2f89c..a5067d73 100644
--- a/components/Editor.vue
+++ b/components/Editor.vue
@@ -1,7 +1,17 @@
 <template lang='pug'>
-  .editor(:class='{ "with-border": border }')
-    editor-menu-bubble(:editor='editor' :keep-in-bounds='true' v-slot='{ commands, isActive, getMarkAttrs, menu }')
-      v-button-group.menububble(:class="{ 'is-active': menu.isActive }" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`")
+  .editor
+    editor-menu-bar(:editor='editor' :keep-in-bounds='true' v-slot='{ commands, isActive, getMarkAttrs, menu }')
+      v-btn-toggle(dense)
+        v-btn(icon
+          :color="isActive.bold() && 'primary' || ''"
+          @click="commands.bold")
+          v-icon mdi-format-bold
+        v-btn(icon
+          :color="isActive.underline() && 'primary' || ''"
+          @click="commands.underline")
+          v-icon mdi-format-italic
+
+      //- v-button-group.menububble(:class="{ 'is-active': menu.isActive }" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`")
         v-popover(trigger='hover' placement='bottom-start')
           v-btn.float-left(slot='reference' size='mini') <v-icon name='question'/>
           template
@@ -66,6 +76,7 @@ export default {
   },
   data () {
     return {
+      options: [],
       linkActive: false,
       editor: null,
       update: false
@@ -112,11 +123,17 @@ export default {
 </script>
 <style lang='less'>
 
-// .editor {
+.editor {
+  font-family: sans-serif;
+  font-size: 1.1em;
+  scrollbar-width: thin;
+  border-color: currentColor;
+  border-style: solid;
+  border-width: 0 0 thin 0;
+}
 //   position: relative;
 //   overflow-y: auto;
 //   padding-top: 1.7em;
-//   scrollbar-width: thin;
 
 //   &.with-border {
 //     border: 1px solid #ddd;
diff --git a/components/Event.vue b/components/Event.vue
index 629538ca..ab541480 100644
--- a/components/Event.vue
+++ b/components/Event.vue
@@ -1,24 +1,31 @@
 <template lang="pug">
-  v-card.h-event.mt-1
+  v-card.h-event.event.mt-1
     nuxt-link(:to='`/event/${event.id}`')
-      v-img(:src="`/media/thumb/${event.image_path}`" height="250" position="top top" class="white--text align-end")
-    v-list-item
+      v-img(:src="`/media/thumb/${event.image_path}`"
+        gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.7)"
+        height="250" position="top top"
+        class="white--text align-end")
+        v-card-title {{event.title}}
+    //- v-list-item
       v-list-item-content
         v-list-item-title.headline {{ event.title }}
         v-list-item-subtitle
           time(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  <v-icon>mdi-date</v-icon> {{ event|when }}
         v-list-item-subtitle
           span <v-icon>md-location-outline</v-icon> {{event.place.name}}
-
-    //- v-card-text
-
+    v-card-text
+      time(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  <v-icon>mdi-event</v-icon> {{ event|when }}
+      div <v-icon>mdi-location-on</v-icon> {{event.place.name}}
+      //- v-btn.ml-1(type='text' plain rounded size='mini' v-for='tag in event.tags' :key='tag' @click='addTag(tag)') {{tag}} -->
     v-card-actions
-      v-btn(text color='primary' nuxt :to='`/event/${event.id}`') {{$t('common.read')}}
+      v-chip.ml-1(v-for='tag in event.tags' link :key='tag' outlined color='primary' small) {{tag}}
       v-spacer
       v-btn(icon)
         v-icon mdi-bookmark
       v-btn(icon color='yellow')
         v-icon mdi-share-variant
+      v-btn(icon color='primary' nuxt :to='`/event/${event.id}`')
+        v-icon mdi-chevron-right
 
   //- <!-- //- v-card.event.h-event.mt-1(max-width="400")
   //-   p ciao
@@ -98,14 +105,39 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.h-event {
+.event {
   width: 300px;
   max-width: 450px;
   flex-grow: 1;
   margin: .2em;
-  background-color: #202020;
-  overflow: hidden;
+  // background-color: #202020;
+  // overflow: hidden;
+  .title {
+    line-height: 1.2em;
+    max-height: 2.4em;
+    overflow: hidden;
+  }
+
+  a {
+    text-decoration: none;
+  }
+  // .title::before {
+    // content: "...";
+    // position: absolute;
+    // bottom: 0;
+  //   right: 0;
+  // }
+
+  // .title::after {
+  //   content: "";
+  //   position: absolute;
+  //   right: 0; /* note: not using bottom */
+  //   width: 1rem;
+  //   height: 1rem;
+  //   background: white;
+  // }
 }
+
   // a:hover {
   //   text-decoration: none;
   //   .title {
diff --git a/components/Home.vue b/components/Home.vue
index 924d81f9..b9d4eabd 100644
--- a/components/Home.vue
+++ b/components/Home.vue
@@ -26,7 +26,6 @@ export default {
   components: { Calendar, Event, Search, Announcement },
   computed: {
     events () {
-      console.error('dentro computed di events in HOME!')
       return this.in_past ? this.filteredEventsWithPast : this.filteredEvents
     },
     ...mapGetters(['filteredEvents', 'filteredEventsWithPast']),
diff --git a/components/List.vue b/components/List.vue
index c9fc6b89..5ab1dd49 100644
--- a/components/List.vue
+++ b/components/List.vue
@@ -1,8 +1,8 @@
 <template lang='pug'>
 div#list
-  el-divider(v-if='title') {{title}}
-  el-timeline
-    el-timeline-item(
+  p(v-if='title') {{title}}
+  v-timeline
+    v-timeline-item(
       v-for='event in events'
       :key='`${event.id}_${event.start_datetime}`'
       :timestamp='event|when'
diff --git a/components/Snackbar.vue b/components/Snackbar.vue
index 1b70daff..e1552123 100644
--- a/components/Snackbar.vue
+++ b/components/Snackbar.vue
@@ -19,21 +19,21 @@ export default {
     return {
       icon: 'md-alert',
       color: 'primary',
-      bottom: true,
-      top: false,
+      bottom: false,
+      top: true,
       left: false,
-      right: true,
+      right: false,
       active: false,
       timeout: 5000,
       message: ''
     }
   },
   created () {
-    this.$root.$on('message', snackbar => {
+    this.$root.$message = snackbar => {
       this.active = true
       this.message = snackbar.message
       this.color = snackbar.color || 'primary'
-    })
+    }
   }
 }
 </script>
diff --git a/components/admin/Announcement.vue b/components/admin/Announcement.vue
index 474b8bd8..367ad60c 100644
--- a/components/admin/Announcement.vue
+++ b/components/admin/Announcement.vue
@@ -1,11 +1,24 @@
 <template lang='pug'>
   v-container
     v-subheader(v-html="$t('admin.announcement_description')")
-    v-text-field(v-model='announcement.title' :placeholder='$t("common.title")')
-    Editor.mt-2(v-model='announcement.announcement' border no-save style='max-height: 400px;')
-    v-btn.mt-2(@click='save' type='success' plain) {{$t(`common.${editing?'save':'send'}`)}}
+    v-dialog(v-model='dialog' width='800')
+      v-card
+        v-card-title {{$t('common.new_user')}}
+        v-card-text
+          v-form
+            v-text-field(v-model='announcement.title' :placeholder='$t("common.title")')
+            Editor.mt-2(v-model='announcement.announcement' border no-save style='max-height: 400px;')
+            v-btn.mt-2(@click='save' type='success' plain) {{$t(`common.${editing?'save':'send'}`)}}
 
-    v-data-table(:items='announcements')
+    v-data-table(
+        :headers='headers'
+        :items='announcements')
+      template(v-slot:item.actions='{ item }')
+        v-btn(text small @click.stop='toggle(item)'
+          :color='item.visible?"warning":"success"') {{item.visible?$t('common.deactivate'):$t('common.activate')}}
+        v-btn(text small @click='edit(item)') {{$t('common.edit')}}
+        v-btn(text small @click='remove(item)'
+          color='error') {{$t('common.delete')}}
 
       //- el-table-column(:label="$t('common.actions')")
       //-   template(slot-scope='data')
@@ -20,7 +33,6 @@
 
 </template>
 <script>
-import { Message, MessageBox } from 'element-ui'
 import { mapActions } from 'vuex'
 import cloneDeep from 'lodash/cloneDeep'
 import Editor from '../Editor'
@@ -30,8 +42,13 @@ export default {
   components: { Editor, Announcement },
   data () {
     return {
+      dialog: false,
       editing: false,
       announcements: [],
+      headers: [
+        { value: 'title', text: 'Title' },
+        { value: 'actions', text: 'Actions', align: 'right' }
+      ],
       announcement: { title: '', announcement: '' }
     }
   },
@@ -44,7 +61,7 @@ export default {
       this.announcement.title = announcement.title
       this.announcement.announcement = announcement.announcement
       this.announcement.id = announcement.id
-      this.editing = true
+      this.dialog = true
     },
     async toggle (announcement) {
       try {
@@ -55,7 +72,7 @@ export default {
       } catch (e) {}
     },
     remove (announcement) {
-      MessageBox.confirm(this.$t('admin.delete_announcement_confirm'),
+      this.$root.$confirm(this.$t('admin.delete_announcement_confirm'),
         this.$t('common.confirm'), {
           confirmButtonText: this.$t('common.ok'),
           cancelButtonText: this.$t('common.cancel'),
@@ -63,9 +80,7 @@ export default {
         })
         .then(() => this.$axios.delete(`/announcements/${announcement.id}`))
         .then(() => {
-          Message({
-            showClose: true,
-            type: 'success',
+          this.$root.$message({
             message: this.$t('admin.announcement_remove_ok')
           })
           this.announcements = this.announcements.filter(a => a.id !== announcement.id)
diff --git a/components/admin/Federation.vue b/components/admin/Federation.vue
index 7dc4c6b5..71e486c2 100644
--- a/components/admin/Federation.vue
+++ b/components/admin/Federation.vue
@@ -4,8 +4,7 @@
       :label="$t('admin.enable_federation')"
       persistent-hint
       inset
-      :hint="$t('admin.enable_federation_help')"
-    )
+      :hint="$t('admin.enable_federation_help')")
 
     template(v-if='enable_federation')
 
@@ -39,39 +38,29 @@
         @blur='save("instance_place", instance_place)'
       )
 
-      //- div.mt-4 {{$t('admin.add_trusted_instance')}}
-      v-text-field.mt-4(v-model='instance_url'
-        :full-width='false'
-        persistent-hint
-        :hint="$t('admin.add_trusted_instance')"
-        :label="$t('common.url')"
-        append-outer-icon="mdi-send"
-        @click:append-outer='createTrustedInstance'
-      )
+      v-dialog(v-model='dialogAddInstance' width="500px")
+        v-card
+          v-card-title {{$t('admin.add_trusted_instance')}}
+          v-card-text
+            v-text-field.mt-4(v-model='instance_url'
+              :full-width='false'
+              persistent-hint
+              :hint="$t('admin.add_trusted_instance')"
+              :label="$t('common.url')"
+              append-outer-icon="mdi-send"
+              @click:append-outer='createTrustedInstance')
 
+      v-btn(@click='dialogAddInstance = true') Add instance
       v-data-table.mt-4(
         :headers='headers'
-        :items='settings.trusted_instances'
-      )
-        //- el-table-column(:label="$t('common.name')")
-        //-   template(slot-scope='data')
-        //-     span {{data.row.name}}
-        //- el-table-column(:label="$t('common.url')")
-        //-   template(slot-scope='data')
-        //-     span {{data.row.url}}
-        //- el-table-column(:label="$t('common.place')")
-        //-   template(slot-scope='data')
-        //-     span {{data.row.label}}
-        //- el-table-column(:label="$t('common.actions')")
-        //-   template(slot-scope='data')
-        //-     el-button(size='mini'
-        //-       type='danger'
-        //-       @click='deleteInstance(data.row)') {{$t('admin.delete_user')}}
+        :items='settings.trusted_instances')
+        template(v-slot:item.actions="{item}")
+          v-btn(icon @click='deleteInstance(item)' color='error')
+            v-icon mdi-delete-forever
 
 </template>
 <script>
 import { mapActions, mapState } from 'vuex'
-import { Message, MessageBox } from 'element-ui'
 import axios from 'axios'
 
 export default {
@@ -81,7 +70,14 @@ export default {
       instance_url: '',
       instance_name: $store.state.settings.instance_name,
       instance_place: $store.state.settings.instance_place,
-      url2host: $options.filters.url2host
+      url2host: $options.filters.url2host,
+      dialogAddInstance: false,
+      headers: [
+        { value: 'name', text: 'Name' },
+        { value: 'url', text: 'URL' },
+        { value: 'label', text: 'Place' },
+        { value: 'actions', text: 'Actions', align: 'right' }
+      ]
     }
   },
   computed: {
@@ -103,9 +99,6 @@ export default {
       set (value) { this.setSetting({ key: 'enable_trusted_instances', value }) }
     }
   },
-  mounted () {
-    console.error(this.$options.filters)
-  },
   methods: {
     ...mapActions(['setSetting']),
     async createTrustedInstance () {
@@ -121,25 +114,19 @@ export default {
         })
         this.instance_url = ''
       } catch (e) {
-        Message({
-          showClose: true,
+        this.$root.$message({
           type: 'error',
           message: e
         })
       }
     },
-    deleteInstance (instance) {
-      MessageBox.confirm(this.$t('admin.delete_trusted_instance_confirm'),
-        this.$t('common.confirm'), {
-          confirmButtonText: this.$t('common.ok'),
-          cancelButtonText: this.$t('common.cancel'),
-          type: 'error'
-        }
-      ).then(() => {
-        this.setSetting({
-          key: 'trusted_instances',
-          value: this.settings.trusted_instances.filter(i => i.url !== instance.url)
-        })
+    async deleteInstance (instance) {
+      const ret = await this.$root.$confirm(this.$t('admin.delete_trusted_instance_confirm'),
+        this.$t('common.confirm'), { type: 'error' })
+      if (!ret) { return }
+      this.setSetting({
+        key: 'trusted_instances',
+        value: this.settings.trusted_instances.filter(i => i.url !== instance.url)
       })
     },
     save (key, value) {
diff --git a/components/admin/Moderation.vue b/components/admin/Moderation.vue
index 131c8c0c..47235e0d 100644
--- a/components/admin/Moderation.vue
+++ b/components/admin/Moderation.vue
@@ -1,70 +1,66 @@
 <template lang='pug'>
-  div
-    el-row
-      el-col(:span='12')
-        el-divider {{$t('common.instances')}}
-        el-input(v-model='instancesFilter' :placeholder="$t('admin.filter_instances')")
-        client-only
-          el-pagination(v-if='instances.length>perPage' :page-size='perPage' :currentPage.sync='instancePage' :total='instances.length')
-        el-table(:data='paginatedInstances' small @row-click='instanceSelected')
-          el-table-column(label='Domain' width='180')
-            template(slot-scope='data')
-              span(slot='reference') {{data.row.domain}}
-          el-table-column(label='Name' width='100')
-            template(slot-scope='data')
-              span(slot='reference') {{data.row.name}}
-          el-table-column(:label="$t('common.users')" width='70')
-            template(slot-scope='data')
-              span(slot='reference') {{data.row.users}}
-          el-table-column(:label="$t('common.actions')" width='120')
-            template(slot-scope='data')
-              el-button-group
-                el-button(size='mini'
-                  :type='data.row.blocked?"danger":"warning"'
-                  @click='toggleBlock(data.row)') {{data.row.blocked?$t('admin.unblock'):$t('admin.block')}}
+  v-container
+    v-row
+      v-col(:span='12')
+        //- el-divider {{$t('common.instances')}}
+        v-text-field(v-model='instancesFilter' :placeholder="$t('admin.filter_instances')")
+        v-data-table(:data='paginatedInstances' small @row-click='instanceSelected')
+          //- el-table-column(label='Domain' width='180')
+          //-   template(slot-scope='data')
+          //-     span(slot='reference') {{data.row.domain}}
+          //- el-table-column(label='Name' width='100')
+          //-   template(slot-scope='data')
+          //-     span(slot='reference') {{data.row.name}}
+          //- el-table-column(:label="$t('common.users')" width='70')
+          //-   template(slot-scope='data')
+          //-     span(slot='reference') {{data.row.users}}
+          //- el-table-column(:label="$t('common.actions')" width='120')
+          //-   template(slot-scope='data')
+          //-     el-button-group
+          //-       el-button(size='mini'
+          //-         :type='data.row.blocked?"danger":"warning"'
+          //-         @click='toggleBlock(data.row)') {{data.row.blocked?$t('admin.unblock'):$t('admin.block')}}
 
-      el-col.float-right(:span='11' align='right')
-        el-divider {{$t('common.users')}}
-        el-input(v-model='usersFilter' :placeholder="$t('admin.filter_users')")
-        client-only
-          el-pagination(v-if='users.length>perPage' :page-size='perPage' :currentPage.sync='userPage' :total='users.length')
-        el-table(:data='paginatedSelectedUsers' small)
-          el-table-column(:label="$t('common.user')" width='150')
-            template(slot-scope='data')
-              span(slot='reference')
-                a(:href='data.row.object.id' target='_blank') {{data.row.object.name}}
-                small ({{data.row.object.preferredUsername}})
-          el-table-column(:label="$t('common.resources')" width='90')
-            template(slot-scope='data')
-              span {{data.row.resources.length}}
-          el-table-column(:label="$t('common.actions')" width='200')
-            template(slot-scope='data')
-              el-button-group
-                el-button(size='mini'
-                  :type='data.row.blocked?"danger":"warning"'
-                  @click='toggleUserBlock(data.row)') {{data.row.blocked?$t('admin.unblock'):$t('admin.block')}}
+      v-col.float-right(:span='11' align='right')
+        //- el-divider {{$t('common.users')}}
+        v-text-field(v-model='usersFilter' :placeholder="$t('admin.filter_users')")
+        v-data-table(:data='paginatedSelectedUsers' small)
+          //- el-table-column(:label="$t('common.user')" width='150')
+          //-   template(slot-scope='data')
+          //-     span(slot='reference')
+          //-       a(:href='data.row.object.id' target='_blank') {{data.row.object.name}}
+          //-       small ({{data.row.object.preferredUsername}})
+          //- el-table-column(:label="$t('common.resources')" width='90')
+          //-   template(slot-scope='data')
+          //-     span {{data.row.resources.length}}
+          //- el-table-column(:label="$t('common.actions')" width='200')
+          //-   template(slot-scope='data')
+          //-     el-button-group
+          //-       el-button(size='mini'
+          //-         :type='data.row.blocked?"danger":"warning"'
+          //-         @click='toggleUserBlock(data.row)') {{data.row.blocked?$t('admin.unblock'):$t('admin.block')}}
 
     div
-      el-divider {{$t('common.resources')}}
-      el-table(:data='paginatedResources' small :row-style='resourceStyle')
-        el-table-column(:label="$t('common.event')")
-          template(slot-scope='data')
-            span {{data.row.event}}
-        el-table-column(:label="$t('common.resources')")
-          template(slot-scope='data')
-            span(:class='{disabled: data.row.hidden}' v-html='data.row.data.content')
-        el-table-column(:label="$t('common.user')" width='200')
-          template(slot-scope='data')
-            span(:class='{disabled: data.row.hidden}' v-html='data.row.data.actor')
-        el-table-column(:label="$t('common.actions')" width="150")
-          template(slot-scope='data')
-            el-dropdown
-              el-button(type="primary" icon="el-icon-arrow-down" size='mini') {{$t('common.moderation')}}
-              el-dropdown-menu(slot='dropdown')
-                el-dropdown-item(v-if='!data.row.hidden' icon='el-icon-remove' @click.native='hideResource(data.row, true)') {{$t('admin.hide_resource')}}
-                el-dropdown-item(v-else icon='el-icon-success' @click.native='hideResource(data.row, false)') {{$t('admin.show_resource')}}
-                el-dropdown-item(icon='el-icon-delete' @click.native='deleteResource(data.row)') {{$t('admin.delete_resource')}}
-                el-dropdown-item(icon='el-icon-lock' @click.native='toggleUserBlock(data.row.ap_user)') {{$t('admin.block_user')}}
+      //- el-divider {{$t('common.resources')}}
+      v-table(:data='paginatedResources' small :row-style='resourceStyle')
+        //- el-table-column(:label="$t('common.event')")
+        //-   template(slot-scope='data')
+        //-     span {{data.row.event}}
+        //- el-table-column(:label="$t('common.resources')")
+        //-   template(slot-scope='data')
+        //-     span(:class='{disabled: data.row.hidden}' v-html='data.row.data.content')
+        //- el-table-column(:label="$t('common.user')" width='200')
+        //-   template(slot-scope='data')
+        //-     span(:class='{disabled: data.row.hidden}' v-html='data.row.data.actor')
+        //- el-table-column(:label="$t('common.actions')" width="150")
+        //-   template(slot-scope='data')
+        //-     el-dropdown
+        //-       el-button(type="primary" icon="el-icon-arrow-down" size='mini') {{$t('common.moderation')}}
+        //-       el-dropdown-menu(slot='dropdown')
+        //-         el-dropdown-item(v-if='!data.row.hidden' icon='el-icon-remove' @click.native='hideResource(data.row, true)') {{$t('admin.hide_resource')}}
+        //-         el-dropdown-item(v-else icon='el-icon-success' @click.native='hideResource(data.row, false)') {{$t('admin.show_resource')}}
+        //-         el-dropdown-item(icon='el-icon-delete' @click.native='deleteResource(data.row)') {{$t('admin.delete_resource')}}
+        //-         el-dropdown-item(icon='el-icon-lock' @click.native='toggleUserBlock(data.row.ap_user)') {{$t('admin.block_user')}}
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'
@@ -135,7 +131,7 @@ export default {
     async toggleUserBlock (ap_user) {
       try {
         if (!ap_user.blocked) {
-          await MessageBox.confirm(this.$t('admin.user_block_confirm'), {
+          await this.$root.$confirm(this.$t('admin.user_block_confirm'), {
             confirmButtonText: this.$t('common.ok'),
             cancelButtonText: this.$t('common.cancel'),
             type: 'error'
@@ -146,7 +142,7 @@ export default {
       } catch (e) { }
     },
     deleteResource (resource) {
-      MessageBox.confirm(this.$t('admin.delete_resource_confirm'),
+      this.$root.$confirm(this.$t('admin.delete_resource_confirm'),
         this.$t('common.confirm'), {
           confirmButtonText: this.$t('common.ok'),
           cancelButtonText: this.$t('common.cancel'),
@@ -164,8 +160,3 @@ export default {
   }
 }
 </script>
-<style lang="less">
-.instance_thumb {
-  height: 20px;
-}
-</style>
diff --git a/components/admin/Places.vue b/components/admin/Places.vue
index 67f0fd1c..f284d8ad 100644
--- a/components/admin/Places.vue
+++ b/components/admin/Places.vue
@@ -1,22 +1,26 @@
 <template lang='pug'>
   v-container
     v-subheader(v-html="$t('admin.place_description')")
-    v-form.mb-2
-      //- el-form-item(:label="$t('common.name')")
-      //-   el-input.mr-1(:placeholder='$t("common.name")' v-model='place.name')
-      v-text-field(
-        :label="$t('common.name')"
-        v-model='place.name'
-        :placeholder='$t("common.name")')
 
-      v-text-field(
-        :label="$t('common.address')"
-        v-model='place.address'
-        :placeholder='$t("common.address")')
+    v-dialog
+      v-form.mb-2
+        //- el-form-item(:label="$t('common.name')")
+        //-   el-input.mr-1(:placeholder='$t("common.name")' v-model='place.name')
+        v-text-field(
+          :label="$t('common.name')"
+          v-model='place.name'
+          :placeholder='$t("common.name")')
 
-      v-btn(@click='savePlace') {{$t('common.save')}}
+        v-text-field(
+          :label="$t('common.address')"
+          v-model='place.address'
+          :placeholder='$t("common.address")')
+
+        v-btn(@click='savePlace') {{$t('common.save')}}
 
     v-data-table(
+      @click:row='selectPlace'
+      :headers='headers'
       :items='places')
 </template>
 <script>
@@ -24,17 +28,20 @@ import { mapState } from 'vuex'
 export default {
   data () {
     return {
-      place: { name: '', address: '', id: null }
+      place: { name: '', address: '', id: null },
+      headers: [
+        { value: 'name', text: 'Name' }
+      ]
     }
   },
   computed: mapState(['places']),
   methods: {
-    placeSelected (items) {
-      if (items.length === 0) {
-        this.place.name = this.place.address = ''
-        return
-      }
-      const item = items[0]
+    selectPlace (item) {
+      // if (items.length === 0) {
+      //   this.place.name = this.place.address = ''
+      //   return
+      // }
+      // const item = items[0]
       this.place.name = item.name
       this.place.address = item.address
       this.place.id = item.id
diff --git a/components/admin/Settings.vue b/components/admin/Settings.vue
index e6f3a710..75f72b04 100644
--- a/components/admin/Settings.vue
+++ b/components/admin/Settings.vue
@@ -20,8 +20,6 @@
         :label="$t('admin.instance_locale')"
         :hint="$t('admin.instance_locale_description')"
         persistent-hint
-        item-text='locale'
-        item-value='locale'
         :items='locales'
       )
 
@@ -38,20 +36,6 @@
         persistent-hint
         @blur='save("description", description)')
 
-      v-file-input.mt-5(ref='upload'
-        :label="$t('admin.favicon')"
-        :action='`${settings.baseurl}/api/settings/logo`'
-        :on-success="forceLogoReload"
-        name='logo'
-        :show-file-list="true"
-        accept='image/png'
-        :limit='1'
-        :multiple='false')
-        //- el-button-group
-          el-button(size='small' type='primary' plain) Select file
-          el-button(size='small' type='success' plain @click='resetLogo') Reset
-      v-img(:src='`${settings.baseurl}/favicon.ico?${logoKey}`')
-
       v-switch.mt-5(v-model='allow_registration'
         inset
         :label="$t('admin.allow_registration_description')")
@@ -82,8 +66,7 @@ export default {
     return {
       title: $store.state.settings.title,
       description: $store.state.settings.description,
-      locales,
-      logoKey: 0
+      locales: Object.keys(locales).map(locale => ({ value: locale, text: locales[locale] }))
     }
   },
   computed: {
@@ -123,15 +106,6 @@ export default {
   },
   methods: {
     ...mapActions(['setSetting']),
-    forceLogoReload () {
-      this.$refs.upload.clearFiles()
-      this.logoKey++
-    },
-    resetLogo (e) {
-      this.setSetting({ key: 'favicon', value: null })
-        .then(this.forceLogoReload)
-      e.stopPropagation()
-    },
     save (key, value) {
       if (this.settings[key] !== value) {
         this.setSetting({ key, value })
diff --git a/components/admin/Theme.vue b/components/admin/Theme.vue
new file mode 100644
index 00000000..33b1330b
--- /dev/null
+++ b/components/admin/Theme.vue
@@ -0,0 +1,85 @@
+<template lang="pug">
+  v-container
+
+    //- LOGO
+    v-file-input.mt-5(ref='upload'
+      :label="$t('admin.favicon')"
+      @change='uploadLogo'
+      accept='image/*')
+      template(slot='append-outer')
+        v-btn(small @click='resetLogo') Reset
+        v-img(:src='`${settings.baseurl}/favicon.ico?${logoKey}`'
+          max-width="100px" max-height="80px" contain)
+      //- el-button-group
+        el-button(size='small' type='primary' plain) Select file
+        el-button(size='small' type='success' plain @click='resetLogo') Reset
+
+    v-switch.mt-5(v-model='is_dark'
+      inset
+      :label="$t('admin.is_dark')")
+
+    v-color-picker(
+      mode='hexa'
+      :label="$t('common.primary_color')"
+      v-model='primary_color')
+
+</template>
+<script>
+import { mapActions, mapState } from 'vuex'
+export default {
+  name: 'Theme',
+  data () {
+    return {
+      logoKey: 0
+    }
+  },
+  computed: {
+    ...mapState(['settings']),
+    is_dark: {
+      get () { return this.settings['theme.is_dark'] },
+      set (value) {
+        this.$vuetify.theme.dark = value
+        this.setSetting({ key: 'theme.is_dark', value })
+      }
+    },
+    primary_color: {
+      get () { return this.settings['theme.primary'] },
+      set (value) {
+        // this.$vuetify.theme.themes.dark.primary = value.hex
+        this.$vuetify.theme.themes.light.primary = value.hex
+        this.setSetting({ key: 'theme.primary', value: value.hex })
+      }
+    }
+  },
+  methods: {
+    ...mapActions(['setSetting']),
+    forceLogoReload () {
+      this.$refs.upload.reset()
+      this.logoKey++
+    },
+    resetLogo (e) {
+      this.setSetting({ key: 'logo', value: null })
+        .then(this.forceLogoReload)
+      e.stopPropagation()
+    },
+    async uploadLogo (file) {
+      const formData = new FormData()
+      formData.append('logo', file)
+      try {
+        await this.$axios.$post('/settings/logo', formData)
+        this.$root.$emit('message', {
+          message: 'Logo updated'
+        })
+        this.forceLogoReload()
+      } catch (e) {
+
+      }
+    },
+    save (key, value) {
+      if (this.settings[key] !== value) {
+        this.setSetting({ key, value })
+      }
+    }
+  }
+}
+</script>
diff --git a/components/admin/Users.vue b/components/admin/Users.vue
index 2989bb53..cce1134b 100644
--- a/components/admin/Users.vue
+++ b/components/admin/Users.vue
@@ -1,59 +1,47 @@
 <template lang="pug">
-  v-container
+  v-card
+    v-card-title {{$t('common.users')}}
+      v-spacer
+      v-text-field(v-model='search'
+        append-icon='mdi-magnify'
+        label='Search',
+        single-line hide-details)
 
     //- ADD NEW USER
-    v-dialog(v-model='newUser' width='500')
-      template(v-slot:activator="{ on }")
-        v-btn(text v-on='on') <v-icon>mdi-plus</v-icon> {{$t('common.new_user')}}
+    v-dialog(v-model='newUserDialog' width='500')
 
       v-card
-        v-card-title <v-icon name='plus'/> {{$t('common.new_user')}}
+        v-card-title {{$t('common.new_user')}}
         v-card-text
-          v-form(inline @submit.native.prevent='create_user')
+          v-form
             v-text-field(v-model='new_user.email'
-              :label="$t('common.email')")
+              :label="$t('common.email')"
+              :rules="[validators.required('Email')]")
             v-switch(v-model='new_user.is_admin' :label="$t('common.admin')" inset)
           v-alert(type='info' :closable='false') {{$t('admin.user_add_help')}}
           v-card-actions
-            v-btn(@click='create_user' color='success' plain) {{$t('common.send')}}
+            v-btn(@click='createUser' color='primary') {{$t('common.send')}}
+            v-btn(@click='newUserDialog=false' color='danger' plain) {{$t('common.close')}}
 
     //- USERS LIST
     v-data-table(
       :headers='headers'
-      :items='users')
+      :items='users'
+      :search='search')
       template(v-slot:item.actions='{item}')
         v-btn(text small @click='toggle(item)'
           :color='item.is_active?"warning":"success"') {{item.is_active?$t('common.deactivate'):$t('common.activate')}}
         v-btn(text small @click='toggleAdmin(item)'
           :color='item.is_admin?"warning":"error"') {{item.is_admin?$t('common.remove_admin'):$t('common.admin')}}
         v-btn(text small @click='deleteUser(item)'
-          :color='danger') {{$t('admin.delete_user')}}
+          color='error') {{$t('admin.delete_user')}}
 
-      //- el-table-column(label='Email' width='220')
-      //-   template(slot-scope='data')
-      //-     el-popover(trigger='hover' :content='data.row.description' width='400')
-      //-       span(slot='reference') {{data.row.email}}
-      //- el-table-column(:label="$t('common.actions')")
-      //-   template(slot-scope='data')
-      //-     div(v-if='data.row.id!==$auth.user.id')
-      //-       el-button-group
-      //-         el-button(size='mini'
-      //-           :type='data.row.is_active?"warning":"success"'
-      //-           @click='toggle(data.row)') {{data.row.is_active?$t('common.deactivate'):$t('common.activate')}}
-      //-         el-button(size='mini'
-      //-           :type='data.row.is_admin?"danger":"warning"'
-      //-           @click='toggleAdmin(data.row)') {{data.row.is_admin?$t('admin.remove_admin'):$t('common.admin')}}
-      //-         el-button(size='mini'
-      //-           type='danger'
-      //-           @click='delete_user(data.row)') {{$t('admin.delete_user')}}
-      //-     div(v-else)
-      //-       span {{$t('common.me')}}
-      //- v-pagination(:page-size='perPage' :currentPage.sync='userPage' v-if='perPage<users_.length' :total='users_.length')
+    v-btn(text color='primary' small @click='newUserDialog = true') <v-icon>mdi-plus-user</v-icon> {{$t('common.new_user')}}
 
 </template>
 <script>
-import { Message, MessageBox } from 'element-ui'
 import { mapState } from 'vuex'
+import { validators } from '../../plugins/helpers'
 
 export default {
   name: 'Users',
@@ -62,12 +50,16 @@ export default {
   },
   data () {
     return {
+      validators,
+      newUserDialog: false,
       new_user: {
         email: '',
         is_admin: false
       },
+      search: '',
       headers: [
         { value: 'email', text: 'Email' },
+        { value: 'is_active', text: 'Active' },
         { value: 'actions', text: 'Actions', align: 'right' }
       ]
     }
@@ -75,7 +67,7 @@ export default {
   computed: mapState(['settings']),
   methods: {
     deleteUser (user) {
-      MessageBox.confirm(this.$t('admin.delete_user_confirm'),
+      this.$root.$confirm(this.$t('admin.delete_user_confirm'),
         this.$t('common.confirm'), {
           confirmButtonText: this.$t('common.ok'),
           cancelButtonText: this.$t('common.cancel'),
@@ -83,11 +75,7 @@ export default {
         })
         .then(() => this.$axios.delete(`/user/${user.id}`))
         .then(() => {
-          Message({
-            showClose: true,
-            type: 'success',
-            message: this.$t('admin.user_remove_ok')
-          })
+          this.$root.$message({ message: this.$t('admin.user_remove_ok')})
           this.users_ = this.users_.filter(u => u.id !== user.id)
         })
     },
@@ -103,11 +91,12 @@ export default {
         console.error(e)
       }
     },
-    async create_user () {
+    async createUser () {
       try {
         this.loading = true
         const user = await this.$axios.$post('/user', this.new_user)
         this.new_user = { email: '', is_admin: false }
+
         Message({
           showClose: true,
           type: 'success',
diff --git a/layouts/default.vue b/layouts/default.vue
index 77c444fb..69e94b1c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,42 +1,25 @@
 <template lang='pug'>
   v-app(app)
     Snackbar
+    Confirm
     Nav
+
     v-main(app)
-      v-scroll-x-transition(hide-on-leave)
+      v-scroll-y-transition(hide-on-leave)
         nuxt
 
     Footer
 
-  //- el-container#main(:class='{dark: $route.name==="index" || $route.name==="announcement-id"}')
-    el-dialog(:visible.sync='showFollowMe')
-      h4(slot='title') {{$t('common.follow_me_title')}}
-      FollowMe
-
-    el-backtop
-    Nav
-    #content
-      nuxt
-    el-footer.mt-1#footer
-      #links
-
 </template>
 <script>
 import Nav from '~/components/Nav.vue'
 import FollowMe from '../components/FollowMe'
 import Snackbar from '../components/Snackbar'
 import Footer from '../components/Footer'
+import Confirm from '../components/Confirm'
 
 export default {
   name: 'Default',
-  components: { Nav, FollowMe, Snackbar, Footer },
-  data () {
-    return { showFollowMe: false }
-  },
-  watch: {
-    '$route.name' (name) {
-      this.$vuetify.theme.dark = name !== 'NewEvent'
-    }
-  }
+  components: { Nav, FollowMe, Snackbar, Footer, Confirm },
 }
 </script>
diff --git a/layouts/modal.vue b/layouts/modal.vue
index 21a191b2..69e94b1c 100644
--- a/layouts/modal.vue
+++ b/layouts/modal.vue
@@ -1,9 +1,25 @@
 <template lang='pug'>
-  el-container#modal
-    el-header
-    .row.p-0.m-0
-      .col.p-0
-      .col-xl-5.col-lg-6.col-sm-10.col-xs-12.col-md-7.p-0
+  v-app(app)
+    Snackbar
+    Confirm
+    Nav
+
+    v-main(app)
+      v-scroll-y-transition(hide-on-leave)
         nuxt
-      .col.p-0
+
+    Footer
+
 </template>
+<script>
+import Nav from '~/components/Nav.vue'
+import FollowMe from '../components/FollowMe'
+import Snackbar from '../components/Snackbar'
+import Footer from '../components/Footer'
+import Confirm from '../components/Confirm'
+
+export default {
+  name: 'Default',
+  components: { Nav, FollowMe, Snackbar, Footer, Confirm },
+}
+</script>
diff --git a/pages/Admin.vue b/pages/Admin.vue
index 13e1460b..06ee2ed2 100644
--- a/pages/Admin.vue
+++ b/pages/Admin.vue
@@ -8,6 +8,11 @@
       v-tab-item
         Settings
 
+      //- THEME
+      v-tab {{$t('common.theme')}}
+      v-tab-item
+        Theme
+
       //- USERS
       v-tab
         v-badge(:value='unconfirmedUsers.length' :content='unconfirmedUsers.length') {{$t('common.users')}}
@@ -21,24 +26,13 @@
 
       //- EVENTS
       v-tab
-        v-badge(:content='events.length') {{$t('common.events')}}
+        v-badge(:value='events.length') {{$t('common.events')}}
       v-tab-item
-        p {{$t('admin.event_confirm_description')}}
-        v-data-table(
-          :items='events'
-          :headers='eventHeaders'
-        )
-        //-   el-table-column(:label='$t("common.name")' width='300')
-        //-     template(slot-scope='data') {{data.row.title}}
-        //-   el-table-column(:label='$t("common.where")' width='250')
-        //-     template(slot-scope='data') {{data.row.place.name}}
-        //-   el-table-column(:label='$t("common.confirm")' width='250')
-        //-     template(slot-scope='data')
-        //-       el-button-group
-        //-         el-button(type='primary' @click='confirm(data.row.id)' size='mini') {{$t('common.confirm')}}
-        //-         el-button(type='success' @click='preview(data.row.id)' size='mini') {{$t('common.preview')}}
-        //- client-only
-        //-   el-pagination(v-if='events.length>perPage' :page-size='perPage' :currentPage.sync='eventPage' :total='events.length')
+        v-container
+          v-subheader {{$t('admin.event_confirm_description')}}
+          v-data-table(
+            :items='events'
+            :headers='eventHeaders')
 
       //- ANNOUNCEMENTS
       v-tab {{$t('common.announcements')}}
@@ -65,10 +59,11 @@ import Settings from '../components/admin/Settings'
 import Federation from '../components/admin/Federation'
 import Moderation from '../components/admin/Moderation'
 import Announcement from '../components/admin/Announcement'
+import Theme from '../components/admin/Theme'
 
 export default {
   name: 'Admin',
-  components: { Users, Places, Settings, Federation, Moderation, Announcement },
+  components: { Users, Places, Settings, Federation, Moderation, Announcement, Theme },
   middleware: ['auth'],
   async asyncData ({ $axios, params, store }) {
     try {
@@ -83,7 +78,10 @@ export default {
   data () {
     return {
       description: '',
-      events: []
+      events: [],
+      eventHeaders: [
+        { value: 'title', text: 'Title' }
+      ]
     }
   },
   computed: {
diff --git a/pages/Login.vue b/pages/Login.vue
index 159c94c7..1eab67bd 100644
--- a/pages/Login.vue
+++ b/pages/Login.vue
@@ -7,18 +7,19 @@
         v-card-subtitle(v-text="$t('login.description')")
 
         v-card-text
+          v-form
+            v-text-field(v-model='email' type='email'
+              :rules='validators.email' autofocus
+              :placeholder='$t("common.email")'
+              ref='email')
 
-          v-text-field(v-model='email' type='email'
-            :placeholder='$t("common.email")'
-            ref='email')
-
-          v-text-field(v-model='password'
-            type='password'
-            :placeholder='$t("common.password")')
+            v-text-field(v-model='password'
+              :rules='validators.password'
+              type='password'
+              :placeholder='$t("common.password")')
 
           v-card-actions
             v-btn(color='success'
-              text
               :disabled='disabled'
               @click='submit') {{$t('common.login')}}
 
@@ -32,12 +33,13 @@
 
 <script>
 import { mapState } from 'vuex'
-import { Message } from 'element-ui'
+import { validators } from '../plugins/helpers'
 
 export default {
   name: 'Login',
   data () {
     return {
+      validators,
       password: '',
       email: '',
       loading: false
@@ -49,20 +51,17 @@ export default {
       return !this.email || !this.password
     }
   },
-  mounted () {
-    this.$refs.email.focus()
-  },
   methods: {
     async forgot () {
       if (!this.email) {
-        Message({ message: this.$t('login.insert_email'), showClose: true, type: 'error' })
+        this.$root.$message({ message: this.$t('login.insert_email'), color: 'error' })
         this.$refs.email.focus()
         return
       }
       this.loading = true
       await this.$axios.$post('/user/recover', { email: this.email })
       this.loading = false
-      Message({ message: this.$t('login.check_email'), type: 'success' })
+      this.$root.$message({ message: this.$t('login.check_email'), color: 'success' })
     },
     async submit (e) {
       if (this.disabled) { return false }
@@ -76,9 +75,9 @@ export default {
         data.append('client_id', 'self')
         await this.$auth.loginWith('local', { data })
         this.loading = false
-        Message({ message: this.$t('login.ok'), showClose: true, type: 'success' })
+        this.$root.$message({ message: this.$t('login.ok'), color: 'success' })
       } catch (e) {
-        Message({ message: this.$t('login.error'), showClose: true, type: 'error' })
+        this.$root.$message({ message: this.$t('login.error'), color: 'error' })
         this.loading = false
         return
       }
diff --git a/pages/Register.vue b/pages/Register.vue
index c2585904..d74d5c70 100644
--- a/pages/Register.vue
+++ b/pages/Register.vue
@@ -8,28 +8,35 @@
         v-card-text
 
           p(v-html="$t('register.description')")
-          v-text-field(ref='email' v-model='user.email' type='email' required
-            :placeholder='$t("common.email")' autocomplete='email'
-            prefix-icon='el-icon-message')
+          v-form(ref='form')
+            v-text-field(ref='email'
+              v-model='user.email' type='email'
+              :rules="validators.email"
+              :label='$t("common.email")' autocomplete='email')
 
-          v-text-field(v-model='user.password' type="password"
-            placeholder="Password")
+            v-text-field(v-model='user.password' type="password"
+              :rules="validators.password"
+              :label="$t('common.password')")
 
-          v-text-field(v-model='user.description' textarea rows='3' :placeholder="$t('common.description')")
+            v-textarea(v-model='user.description'
+              :rules="[validators.required('description')]"
+              :label="$t('common.description')")
 
         v-card-actions
-          v-btn(plain type="success" :disabled='disabled' @click='register') {{$t('common.send')}} <v-icon name='chevron-right'/>
+          v-btn(@click='register' color='primary') {{$t('common.send')}}
+            v-icon mdi-chevron-right
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import { Message } from 'element-ui'
 import get from 'lodash/get'
+import { validators } from '../plugins/helpers'
 
 export default {
   name: 'Register',
   data () {
     return {
+      validators,
       loading: false,
       user: {}
     }
@@ -41,34 +48,30 @@ export default {
   },
   computed: {
     ...mapState(['settings']),
-    disabled () {
-      if (process.server) { return false }
-      return !this.user.password || !this.user.email || !this.user.description
-    }
+    // disabled () {
+    //   if (process.server) { return false }
+    //   return !this.user.password || !this.user.email || !this.user.description
+    // }
   },
   mounted () {
     this.$refs.email.focus()
   },
   methods: {
     async register () {
+      const valid = this.$refs.form.validate()
+      if (!valid) { return }
       try {
         this.loading = true
         const user = await this.$axios.$post('/user/register', this.user)
         // this is the first user registered
         const first_user = user && user.is_admin && user.is_active
-        Message({
-          showClose: true,
-          message: first_user ? this.$t('register.first_user') : this.$t('register.complete'),
-          type: 'success'
+        this.$root.$message({
+          message: first_user ? this.$t('register.first_user') : this.$t('register.complete')
         })
         this.$router.replace('/')
       } catch (e) {
         const error = get(e, 'response.data.errors[0].message', String(e))
-        Message({
-          showClose: true,
-          message: this.$t(error),
-          type: 'error'
-        })
+        this.$root.$message({ message: this.$t(error), color: 'error' })
       }
       this.loading = false
     }
diff --git a/pages/add/_edit.vue b/pages/add/_edit.vue
index 04e92ff4..f95633fd 100644
--- a/pages/add/_edit.vue
+++ b/pages/add/_edit.vue
@@ -1,101 +1,132 @@
 <template lang="pug">
   v-container
-    h2.text-center {{edit?$t('common.edit_event'):$t('common.add_event')}}
-    v-form
+    v-card
+      v-card-text
+        h2.text-center {{edit?$t('common.edit_event'):$t('common.add_event')}}
+        p {{valid}}
+        v-form(v-model='valid')
 
-      //- NOT LOGGED EVENT
-      div(v-if='!$auth.loggedIn')
-        v-divider <v-icon name='user-secret'/> {{$t('event.anon')}}
-        p(v-html="$t('event.anon_description')")
+          //- NOT LOGGED EVENT
+          div(v-if='!$auth.loggedIn')
+            v-divider <v-icon name='user-secret'/> {{$t('event.anon')}}
+            p(v-html="$t('event.anon_description')")
 
-      //- title
-      v-text-field.mb-3(v-model='event.title'
-        :label="$t('event.what_description')"
-        ref='title')
+          //- title
+          v-text-field.mb-3(v-model='event.title'
+            :rules="[validators.required('title')]"
+            :label="$t('event.what_description')"
+            ref='title')
 
-      //- description
-      //- span {{$t('event.description_description')}}
-      //- Editor.mb-3(v-model='event.description' border no-save style='max-height: 400px;')
+          //- description
+          //- span {{$t('event.description_description')}}
+          Editor(
+            v-model='event.description'
+            :label="$t('event.description')"
+            style='max-height: 400px;')
 
-      //- tags
-      //- div {{$t('event.tag_description')}}
-      //- client-only
-        //- v-select.m b-3(v-model='event.tags' multiple filterable
-        //-   @input.native='queryTags=$event.target.value' @change='queryTags=""'
-        //-   allow-create default-first-option placeholder='Tag')
-        //-   v-option(v-for='tag in filteredTags' :key='tag.tag' :label='tag.tag' :value='tag.tag')
+          //- tags
+          //- div {{$t('event.tag_description')}}
+          //- client-only
+          v-combobox(v-model='event.tags'
+            chips multiple
+            :items="tags"
+            item-text='tag',
+            item-value='tag'
+            :hints="$t('event.tag_description')"
+            :label="$t('common.tags')")
+            //- v-option(v-for='tag in filteredTags' :key='tag.tag' :label='tag.tag' :value='tag.tag')
 
-      //- WHERE
-      //- v-divider
-        //- i.el-icon-location-outline
-        //- span {{$t('common.where')}}
-      //- p(v-html="$t('event.where_description')")
-      v-autocomplete(v-model='event.place.name'
-        :label="$t('common.where')"
-        :items="places"
-        item-text="name"
-        item-value="id"
-        @change='selectPlace')
+          //- WHERE
+          //- v-divider
+            //- i.el-icon-location-outline
+            //- span {{$t('common.where')}}
+          //- p(v-html="$t('event.where_description')")
+          v-autocomplete(v-model='event.place.name'
+            :label="$t('common.where')"
+            :items="places"
+            item-text="name"
+            item-value="name"
+            @change='selectPlace')
 
-      //- div {{$t("common.address")}}
-      v-text-field(ref='address' :label="$t('common.address')" v-model='event.place.address' :disabled='disableAddress')
+          //- div {{$t("common.address")}}
+          v-text-field(ref='address' :label="$t('common.address')" v-model='event.place.address' :disabled='disableAddress')
 
-      //- WHEN
-      //- v-divider <v-icon name='clock'/> {{$t('common.when')}}
-      .text-center
-        v-btn-toggle(v-model="event.type")
-          v-btn(value='normal' label="normal") <v-icon name='calendar-day'/> {{$t('event.normal')}}
-          v-btn(value='multidate' label="multidate") <v-icon name='calendar-week'/> {{$t('event.multidate')}}
-          v-btn(v-if='settings.allow_recurrent_event' value='recurrent' label="recurrent") <v-icon name='calendar-alt'/> {{$t('event.recurrent')}}
-        br
-        span {{$t(`event.${event.type}_description`)}}
-        v-select.ml-2(v-if='event.type==="recurrent"' v-model='event.recurrent.frequency' placeholder='Frequenza')
-          v-option(:label="$t('event.each_week')" value='1w' key='1w')
-          v-option(:label="$t('event.each_2w')" value='2w' key='2w')
-          //- el-option(:label="$t('event.each_month')" value='1m' key='1m')
+          //- WHEN
+          //- v-divider <v-icon name='clock'/> {{$t('common.when')}}
+          .text-center
+            v-btn-toggle(v-model="event.type" color='primary')
+              v-btn(value='normal' label="normal") {{$t('event.normal')}}
+              v-btn(value='multidate' label="multidate") {{$t('event.multidate')}}
+              v-btn(v-if='settings.allow_recurrent_event' value='recurrent' label="recurrent") {{$t('event.recurrent')}}
 
-      client-only
-        #picker.mx-auto
-          v-date-picker.mb-2.mt-3(
-            :mode='datePickerMode'
-            :attributes='attributes'
-            v-model='date'
-            :locale='$i18n.locale'
-            :from-page.sync='page'
-            is-dark
-            is-inline
-            is-expanded
-            :min-date='event.type !== "recurrent" && new Date()')
+            p {{$t(`event.${event.type}_description`)}}
+            v-select(v-if='event.type==="recurrent"'
+              :items="frequencies"
+              v-model='event.recurrent.frequency')
+              //- v-option(:label="$t('event.each_week')" value='1w' key='1w')
+              //- v-option(:label="$t('event.each_2w')" value='2w' key='2w')
+              //- el-option(:label="$t('event.each_month')" value='1m' key='1m')
 
-      div.text-center.mb-2(v-if='event.type === "recurrent"')
-        span(v-if='event.recurrent.frequency !== "1m" && event.recurrent.frequency !== "2m"') {{whenPatterns}}
-        v-radio-group(v-else v-model='event.recurrent.type')
-          v-radio-button(v-for='whenPattern in whenPatterns' :label='whenPattern.key' :key='whenPatterns.key')
-            span {{whenPattern.label}}
+            client-only
+              v-date-picker.mx-auto(
+                :mode='datePickerMode'
+                :attributes='attributes'
+                v-model='date'
+                :locale='$i18n.locale'
+                :from-page.sync='page'
+                is-dark
+                is-inline
+                is-expanded
+                :style="{width: '500px'}"
+                :min-date='event.type !== "recurrent" && new Date()')
 
-      .text-center
-        v-time-picker.mr-2(
-          :label="$t('event.from')"
-          ref='time_start'
-          v-model="time.start")
+          div.text-center.mb-2(v-if='event.type === "recurrent"')
+            span(v-if='event.recurrent.frequency !== "1m" && event.recurrent.frequency !== "2m"') {{whenPatterns}}
+            v-radio-group(v-else v-model='event.recurrent.type')
+              v-radio-button(v-for='whenPattern in whenPatterns' :label='whenPattern.key' :key='whenPatterns.key')
+                span {{whenPattern.label}}
 
-        v-time-picker(v-model='time.end'
-          :label="$t('event.due')")
+          v-row
+            v-col
+              v-menu(v-model='fromDateMenu')
+                template(v-slot:activator='{ on }')
+                  v-text-field(
+                    :label="$t('event.from')"
+                    v-on='on'
+                    :value='time.start'
+                    readonly)
+                v-time-picker.mr-2(
+                  :label="$t('event.from')"
+                  ref='time_start'
+                  v-model="time.start")
 
-      List(v-if='event.type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
+            v-col
+              v-menu(v-model='dueDateMenu')
+                template(v-slot:activator='{ on }')
+                  v-text-field(
+                    :label="$t('event.due')"
+                    v-on='on'
+                    :value='time.end'
+                    readonly)
+                v-time-picker.mr-2(
+                  :label="$t('event.due')"
+                  v-model="time.end")
 
-      //- MEDIA / FLYER / POSTER
+          List(v-if='event.type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
 
-      p {{JSON.stringify(event.image)}}
-      v-file-input(
-        :label="$t('common.media')"
-        :hint="$t('event.media_description')"
-        filled
-        prepend-icon="mdi-camera"
-        v-model='event.image'
-        persistent-hint
-        accept='image/*')
-      v-btn.mt-2.float-right(@click='done' :disabled='!couldProceed') {{edit?$t('common.edit'):$t('common.send')}}
+          //- MEDIA / FLYER / POSTER
+
+          v-file-input(
+            :label="$t('common.media')"
+            :hint="$t('event.media_description')"
+            prepend-icon="mdi-camera"
+            v-model='event.image'
+            persistent-hint
+            accept='image/*')
+
+        v-card-actions
+          v-spacer
+          v-btn(@click='done' color='primary') {{edit?$t('common.edit'):$t('common.send')}}
 
 </template>
 <script>
@@ -104,7 +135,7 @@ import _ from 'lodash'
 import moment from 'moment-timezone'
 import Editor from '@/components/Editor'
 import List from '@/components/List'
-import { Message } from 'element-ui'
+import { validators } from '../../plugins/helpers'
 
 export default {
   name: 'NewEvent',
@@ -152,6 +183,10 @@ export default {
     const month = moment().month() + 1
     const year = moment().year()
     return {
+      validators,
+      valid: false,
+      dueDateMenu: false,
+      fromDateMenu: false,
       event: {
         type: 'normal',
         place: { name: '', address: '' },
@@ -170,7 +205,12 @@ export default {
       loading: false,
       mediaUrl: '',
       queryTags: '',
-      disableAddress: true
+      disableAddress: true,
+      frequencies: [
+        { value: '1w', text: this.$t('event.each_week') },
+        { value: '2w', text: this.$t('event.each_2w') },
+        { value: '1m', text: this.$t('event.each_month') }
+      ]
     }
   },
   computed: {
@@ -289,7 +329,6 @@ export default {
       cb(ret)
     },
     selectPlace (p) {
-      console.error('sono dentro selectPlace ', p)
       const place = this.places.find(place => place.id === p)
       if (place && place.address) {
         this.event.place.address = place.address
@@ -312,7 +351,6 @@ export default {
     uploadedFile (files) {
       // const file = files[0]
 
-      console.error('dentro uploadedfile', arguments)
       // if (file.size / 1024 / 1024 > 4) {
       //   Message({ type: 'warning', showClose: true, message: this.$tc('event.image_too_big') })
       //   this.fileList = []
@@ -358,7 +396,8 @@ export default {
       }
 
       if (this.event.image) {
-        formData.append('image', this.event.image[0])
+        console.error(this.event.image)
+        formData.append('image', this.event.image)
       }
       formData.append('title', this.event.title)
       formData.append('place_name', this.event.place.name)
@@ -381,15 +420,15 @@ export default {
         this.updateMeta()
         this.$router.replace('/')
         this.loading = false
-        Message({ type: 'success', showClose: true, message: this.$auth.loggedIn ? this.$t('event.added') : this.$t('event.added_anon') })
+        this.$root.$message({ type: 'success', message: this.$auth.loggedIn ? this.$t('event.added') : this.$t('event.added_anon') })
       } catch (e) {
         console.error(e.response)
         switch (e.request.status) {
           case 413:
-            Message({ type: 'error', showClose: true, message: this.$t('event.image_too_big') })
+            this.$root.$message({ type: 'error', message: this.$t('event.image_too_big') })
             break
           default:
-            Message({ type: 'error', showClose: true, message: e.response.data })
+            this.$root.$message({ type: 'error', message: e.response.data })
         }
         this.loading = false
       }
diff --git a/pages/announcement/_id.vue b/pages/announcement/_id.vue
index c33ad975..5b0b3277 100644
--- a/pages/announcement/_id.vue
+++ b/pages/announcement/_id.vue
@@ -1,10 +1,8 @@
 <template lang="pug">
-  el-container.announcement-page.text-white
-    el-header.text-white
-      h3 <i style='color: red' class='el-icon-info'/> {{announcement.title}}
+  v-container.announcement-page.text-white
+    h3 <i style='color: red' class='el-icon-info'/> {{announcement.title}}
 
-    el-main
-      pre.mt-4(v-html='announcement.announcement')
+    p.mt-4(v-html='announcement.announcement')
 
 </template>
 <script>
@@ -36,39 +34,39 @@ export default {
 }
 </script>
 <style lang='less'>
-.announcement-page {
+// .announcement-page {
 
-  .el-header {
-    height: auto !important;
-    padding-top: 1em;
-    border-bottom: 1px solid lightgray;
-  }
+//   .el-header {
+//     height: auto !important;
+//     padding-top: 1em;
+//     border-bottom: 1px solid lightgray;
+//   }
 
-  .title {
-    max-width: 80%;
-    max-height: 0.1rem;
-    overflow: hidden;
-    font-size: 1.6rem;
-    line-height: 1;
-    padding-right: 40px;
-  }
+//   .title {
+//     max-width: 80%;
+//     max-height: 0.1rem;
+//     overflow: hidden;
+//     font-size: 1.6rem;
+//     line-height: 1;
+//     padding-right: 40px;
+//   }
 
-  pre {
-    white-space: pre-line;
-    word-break: break-word;
-    color: #aaa;
-    font-size: 1.2em;
-    font-family: inherit;
-  }
+//   pre {
+//     white-space: pre-line;
+//     word-break: break-word;
+//     color: #aaa;
+//     font-size: 1.2em;
+//     font-family: inherit;
+//   }
 
-}
+// }
 
-@media only screen and (max-width: 768px) {
-  #eventDetail {
-    .title {
-      font-size: 1em;
-      font-weight: bold;
-    }
-  }
-}
+// @media only screen and (max-width: 768px) {
+//   #eventDetail {
+//     .title {
+//       font-size: 1em;
+//       font-weight: bold;
+//     }
+//   }
+// }
 </style>
diff --git a/pages/event/_id.vue b/pages/event/_id.vue
index 74f1447f..f9595cc0 100644
--- a/pages/event/_id.vue
+++ b/pages/event/_id.vue
@@ -1,58 +1,27 @@
 <template lang="pug">
-  v-card#eventDetail.h-event.d-inline-block-mx-auto
-    v-toolbar(prominent)
+  v-card.h-event.eventDetail
+    //- .d-block
+    v-container
       v-list-item(two-line)
         v-list-item-content
-          h2(v-text='event.title')
-          v-list-item-subtitle
+          v-list-item-title
             time.dt-start(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')
             v-icon mdi-date
             b {{event|when}}
             small  ({{event.start_datetime|from}})
-          v-list-item-subtitle
+          v-list-item-title
             i.el-icon-location-outline
             b.p-location {{event.place.name}}
             span  - {{event.place.address}}
+          h2 {{event.title}}
 
-      v-spacer
-      v-btn.mr-1(nuxt :to='`/event/${event.prev}`' color='primary' icon :disabled='!event.prev')
-        v-icon mdi-arrow-left
-      v-btn(nuxt :to='`/event/${event.next}`' color='primary' :disabled='!event.next' icon)
-        v-icon mdi-arrow-right
-    //- h2 {{event.title}}
-    //- v-toolbar-subtitle
-
-    //- v-toolbar(prominent)
-      //- v-list-item
-        //- h3 {{event.title}}
-      //- v-row(justify='space-between')
-        v-col(cols='auto')
-          v-list-item(two-line)
-            v-list-item-content
-              v-list-item-title.headline(v-text='event.title')
-              v-list-item-subtitle
-                time.dt-start(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')
-                v-icon mdi-date
-                b {{event|when}}
-                small  ({{event.start_datetime|from}})
-              v-list-item-subtitle
-                i.el-icon-location-outline
-                b.p-location {{event.place.name}}
-                span  - {{event.place.address}}
-        v-col
-          v-btn.mr-1(nuxt :to='`/event/${event.prev}`' color='primary' icon :disabled='!event.prev')
-            v-icon mdi-arrow-left
-          v-btn(nuxt :to='`/event/${event.next}`' color='primary' :disabled='!event.next' icon)
-            v-icon mdi-arrow-right
-
-      template(slot='extension')
-        h2 {{event.title}}
-        //- v-list-item
-        //-   i.el-icon-location-outline
-        //-   b.p-location {{event.place.name}}
-        //-   span  - {{event.place.address}}
-        //- v-spacer
-        //- v-chip.p-category.ml-1(v-for='tag in event.tags' :key='tag' small color='secondary') {{tag}}
+      .v-btn--absolute.v-btn--right.v-btn--top
+        v-btn.mr-1(nuxt icon outlined color='primary'
+          :to='`/event/${event.prev}`' :disabled='!event.prev')
+          v-icon mdi-arrow-left
+        v-btn(nuxt bottom right outlined icon color='primary'
+          :to='`/event/${event.next}`' :disabled='!event.next')
+          v-icon mdi-arrow-right
 
     v-card-text
       v-dialog.embedDialog(:visible.sync='showEmbed')
@@ -65,31 +34,23 @@
       //- event image
       v-img.main_image.mb-3(
         lazy
+        contain
         :src='imgPath'
         :lazy-src='thumbImgPath'
         v-if='event.image_path')
 
       p.p-description(v-html='event.description')
-      v-btn.p-category.ml-1(type='text' plain round size='mini' v-for='tag in event.tags' :key='tag') {{tag}}
+      v-chip.p-category.ml-1(small v-for='tag in event.tags' color='primary' outlined :key='tag') {{tag}}
 
         //- info & actions
-        //- v-col
-          v-list
-            time.dt-start(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")') <i class='el-icon-date'></i>  <b>{{event|when}}</b> <br/><small>{{event.start_datetime|from}}</small>
-            p
-              i.el-icon-location-outline
-              b.p-location {{event.place.name}}
-              span  - {{event.place.address}}
-            v-divider {{$t('common.actions')}}
-            v-list-item(
-              v-clipboard:success='copyLink'
-              v-clipboard:copy='`${settings.baseurl}/event/${event.id}`') <i class='el-icon-paperclip'></i> {{$t('common.copy_link')}}
+      v-btn(text color='primary'
+        v-clipboard:success='copyLink'
+        v-clipboard:copy='`${settings.baseurl}/event/${event.id}`') {{$t('common.copy_link')}}
 
-            v-list-item(@click='showEmbed=true') <i class='el-icon-copy-document'></i> {{$t('common.embed')}}
+      v-btn(@click='showEmbed=true' text color='primary') {{$t('common.embed')}}
 
-            v-list-item
-              a(:href='`${settings.baseurl}/api/event/${event.id}.ics`') <i class='el-icon-date'></i> {{$t('common.add_to_calendar')}}
-          EventAdmin(v-if='is_mine' :event='event')
+      v-btn(:href='`${settings.baseurl}/api/event/${event.id}.ics`' text color='primary') {{$t('common.add_to_calendar')}}
+      EventAdmin(v-if='is_mine' :event='event')
 
       //- hr
 
@@ -137,7 +98,6 @@ import { mapState } from 'vuex'
 import EventAdmin from './eventAdmin'
 import EmbedEvent from './embedEvent'
 import FollowMe from '../../components/FollowMe'
-import { Message, MessageBox } from 'element-ui'
 import moment from 'moment-timezone'
 const htmlToText = require('html-to-text')
 
@@ -269,7 +229,7 @@ export default {
     },
     async remove () {
       try {
-        await MessageBox.confirm(this.$t('event.remove_confirmation'), this.$t('common.confirm'), {
+        await this.$root.$confirm(this.$t('event.remove_confirmation'), this.$t('common.confirm'), {
           confirmButtonText: this.$t('common.ok'),
           cancelButtonText: this.$t('common.cancel'),
           type: 'error'
@@ -300,18 +260,18 @@ export default {
     },
     async blockUser (resource) {
       try {
-        await MessageBox.confirm(this.$t('admin.user_block_confirm'), {
+        await this.$root.$confirm(this.$t('admin.user_block_confirm'), {
           confirmButtonText: this.$t('common.ok'),
           cancelButtonText: this.$t('common.cancel'),
           type: 'error'
         })
         await this.$axios.post('/instances/toggle_user_block', { ap_id: resource.ap_user.ap_id })
-        Message({ message: this.$t('admin.user_blocked', { user: resource.ap_user.ap_id }), type: 'success', showClose: true })
+        this.$root.$message({ message: this.$t('admin.user_blocked', { user: resource.ap_user.ap_id }), type: 'success' })
       } catch (e) { }
     },
     async deleteResource (resource) {
       try {
-        await MessageBox.confirm(this.$t('admin.delete_resource_confirm'),
+        await this.$root.$confirm(this.$t('admin.delete_resource_confirm'),
           this.$t('common.confirm'), {
             confirmButtonText: this.$t('common.ok'),
             cancelButtonText: this.$t('common.cancel'),
@@ -322,7 +282,7 @@ export default {
       } catch (e) { }
     },
     copyLink () {
-      Message({ message: this.$t('common.copied'), type: 'success', showClose: true })
+      this.$root.$message({ message: this.$t('common.copied'), type: 'success' })
     },
     // TOFIX
     resource_filter (value) {
@@ -343,7 +303,21 @@ export default {
 }
 </script>
 <style lang='less'>
-// #eventDetail {
+.eventDetail {
+  .toolbar {
+    height: auto !important;
+    padding: 1em 0;
+    box-sizing: content-box;
+  }
+
+  .main_image {
+    width: 100%;
+    transition: height .100s;
+    margin: 0 auto;
+    max-height: 83vh;
+  }
+
+}
 //   time {
 //     margin: 0rem 0rem 0rem 1rem;
 //     display: inline-block;
diff --git a/pages/event/eventAdmin.vue b/pages/event/eventAdmin.vue
index a3c520d4..5f71fe02 100644
--- a/pages/event/eventAdmin.vue
+++ b/pages/event/eventAdmin.vue
@@ -1,26 +1,21 @@
 <template lang='pug'>
 div
-  v-divider {{$t('common.admin')}}
+  v-btn(text color='primary' v-if='event.is_visible' @click='toggle(false)') {{$t(`common.${event.parentId?'skip':'hide'}`)}}
+  v-btn(text color='primary' v-else @click='toggle(false)') {{$t('common.confirm')}}
+  v-btn(text color='primary' @click='$router.push(`/add/${event.id}`)') {{$t('common.edit')}}
+  v-btn(text color='primary' v-if='!event.parentId' @click='remove(false)') {{$t('common.remove')}}
 
-  v-menu.menu
-    v-menu-item
-      div(v-if='event.is_visible' @click='toggle(false)') <i class='el-icon-open'/> {{$t(`common.${event.parentId?'skip':'hide'}`)}}
-      div(v-else @click='toggle(false)') <i class='el-icon-turn-off'/> {{$t('common.confirm')}}
-    v-menu-item(@click='$router.push(`/add/${event.id}`)') <i class='el-icon-edit'/> {{$t('common.edit')}}
-    v-menu-item(v-if='!event.parentId' @click='remove(false)') <i class='el-icon-delete'/> {{$t('common.remove')}}
-
-    template(v-if='event.parentId')
-      v-divider {{$t('event.recurrent')}}
-      p.text-secondary
-        i.el-icon-refresh
-        small  {{event|recurrentDetail}}<br/>
-      v-menu-item(v-if='event.parent.is_visible' @click='toggle(true)') <i class='el-icon-video-pause'/> {{$t('common.pause')}}
-      v-menu-item(v-else @click='toggle(true)') <i class='el-icon-video-play'/> {{$t('common.start')}}
-      v-menu-item(@click='$router.push(`/add/${event.parentId}`)') <i class='el-icon-edit'/> {{$t('common.edit')}}
-      v-menu-item(@click='remove(true)') <i class='el-icon-delete'/> {{$t('common.remove')}}
+  template(v-if='event.parentId')
+    v-divider {{$t('event.recurrent')}}
+    p.text-secondary
+      i.el-icon-refresh
+      small  {{event|recurrentDetail}}
+    v-btn(text color='primary' v-if='event.parent.is_visible' @click='toggle(true)') {{$t('common.pause')}}
+    v-btn(text color='primary' v-else @click='toggle(true)') {{$t('common.start')}}
+    v-btn(text color='primary' @click='$router.push(`/add/${event.parentId}`)') {{$t('common.edit')}}
+    v-btn(text color='primary' @click='remove(true)') {{$t('common.remove')}}
 </template>
 <script>
-import { MessageBox } from 'element-ui'
 import { mapActions } from 'vuex'
 
 export default {
@@ -34,19 +29,14 @@ export default {
   methods: {
     ...mapActions(['delEvent']),
     async remove (parent = false) {
-      try {
-        await MessageBox.confirm(this.$t(`event.remove_${parent ? 'recurrent_' : ''}confirmation`), this.$t('common.confirm'), {
-          confirmButtonText: this.$t('common.ok'),
-          cancelButtonText: this.$t('common.cancel'),
-          type: 'error'
-        })
-        const id = parent ? this.event.parentId : this.event.id
-        await this.$axios.delete(`/event/${id}`)
-        this.delEvent(Number(id))
-        this.$router.replace('/')
-      } catch (e) {
-        console.error(e)
-      }
+      const ret = await this.$root.$confirm(this.$t(`event.remove_${parent ? 'recurrent_' : ''}confirmation`), this.$t('common.confirm'), {
+        type: 'error'
+      })
+      if (!ret) { return }
+      const id = parent ? this.event.parentId : this.event.id
+      await this.$axios.delete(`/event/${id}`)
+      this.delEvent(Number(id))
+      this.$router.replace('/')
     },
     async toggle (parent = false) {
       const id = parent ? this.event.parentId : this.event.id
diff --git a/pages/recover/_code.vue b/pages/recover/_code.vue
index 74be70d4..96463be9 100644
--- a/pages/recover/_code.vue
+++ b/pages/recover/_code.vue
@@ -1,19 +1,25 @@
 <template lang='pug'>
-  el-card.mt-5
-    h4(slot='header')
-      nuxt-link(to='/')
-        img(src='/favicon.ico')
-      span  {{settings.title}} - {{$t('common.recover_password')}}
-    div(v-if='valid')
-      el-input(type='password', :placeholder='$t("common.new_password")' v-model='new_password' prefix-icon='el-icon-lock')
-    div(v-else) {{$t('recover.not_valid_code')}}
+  v-row.mt-5(align='center' justify='center')
+    v-col(cols='12' md="6" lg="5" xl="4")
+      v-card
+        v-card-title {{settings.title}} - {{$t('common.recover_password')}}
+          //- nuxt-link(to='/')
+            //- v-img(src='/logo.png')
+          //- span {{settings.title}} - {{$t('common.recover_password')}}
+        v-card-text
+          div(v-if='valid')
+            v-text-field(type='password'
+              :rules="validators.password"
+              autofocus :placeholder='$t("common.new_password")'
+              v-model='new_password')
+          div(v-else) {{$t('recover.not_valid_code')}}
 
-    el-button.mt-2(plain v-if='valid' type="success" icon='el-icon-check'
-      @click='change_password') {{$t('common.send')}}
+        v-card-actions
+          v-btn(v-if='valid' color='primary' @click='change_password') {{$t('common.send')}}
 </template>
 <script>
-import { Message } from 'element-ui'
 import { mapState } from 'vuex'
+import { validators } from '../../plugins/helpers'
 
 export default {
   name: 'Recover',
@@ -28,22 +34,19 @@ export default {
     }
   },
   data () {
-    return { new_password: '' }
+    return { new_password: '', validators }
   },
   computed: mapState(['settings']),
   methods: {
     async change_password () {
       try {
         await this.$axios.$post('/user/recover_password', { recover_code: this.code, password: this.new_password })
-        Message({
-          showClose: true,
-          type: 'success',
+        this.$root.$message({
           message: this.$t('common.password_updated')
         })
         this.$router.replace('/login')
       } catch (e) {
-        Message({
-          showClose: true,
+        this.$root.$message({
           type: 'warning',
           message: e
         })
diff --git a/plugins/helpers.js b/plugins/helpers.js
new file mode 100644
index 00000000..f2c331d0
--- /dev/null
+++ b/plugins/helpers.js
@@ -0,0 +1,13 @@
+const linkify = require('linkifyjs')
+export const validators = {
+  required (fieldName) {
+    return value => !!value || `validators.required.${fieldName}`
+  },
+  email: [
+    v => !!v || 'validators.required.email',
+    v => (v && !!linkify.test(v, 'email')) || 'validators.valid.email'
+  ],
+  password: [
+    v => !!v || 'validators.required.password'
+  ]
+}
diff --git a/server/api/controller/settings.js b/server/api/controller/settings.js
index 8923b7f9..71eee600 100644
--- a/server/api/controller/settings.js
+++ b/server/api/controller/settings.js
@@ -112,20 +112,19 @@ const settingsController = {
       return res.status(400).send('Mmmmm sould not be here!')
     }
 
-    const uploaded_path = path.join(req.file.destination, req.file.filename)
-    const logo_path = path.resolve(config.upload_path, 'favicon')
-    const favicon_path = path.resolve(config.upload_path, 'favicon')
+    const uploadedPath = path.join(req.file.destination, req.file.filename)
+    const baseImgPath = path.resolve(config.upload_path, 'logo')
 
     // convert and resize to png
-    sharp(uploaded_path)
+    sharp(uploadedPath)
       .resize(400)
       .png({ quality: 90 })
-      .toFile(logo_path + '.png', async (err, info) => {
+      .toFile(baseImgPath + '.png', async (err, info) => {
         console.error(err)
-        const image = await readFile(logo_path + '.png')
+        const image = await readFile(baseImgPath + '.png')
         const favicon = await toIco([image], { sizes: [64], resize: true })
-        writeFile(favicon_path + '.ico', favicon)
-        settingsController.set('favicon', favicon_path)
+        writeFile(baseImgPath + '.ico', favicon)
+        settingsController.set('logo', baseImgPath)
         res.sendStatus(200)
       })
   },
diff --git a/server/routes.js b/server/routes.js
index 469716be..e7e83d5c 100644
--- a/server/routes.js
+++ b/server/routes.js
@@ -29,15 +29,16 @@ app.use((req, res, next) => {
 app.use('/media/', express.static(config.upload_path))
 // initialize instance settings / authentication / locale
 app.use(helpers.initSettings)
+
 // serve favicon and static content
 app.use('/logo.png', (req, res, next) => {
-  const logo_path = req.settings.favicon || './static/gancio'
-  return express.static(logo_path + '.png')(req, res, next)
+  const logoPath = req.settings.logo || './static/gancio'
+  return express.static(logoPath + '.png')(req, res, next)
 })
 
 app.use('/favicon.ico', (req, res, next) => {
-  const favicon_path = req.settings.favicon || './assets/favicon'
-  return express.static(favicon_path + '.ico')(req, res, next)
+  const faviconPath = req.settings.logo || './assets/favicon'
+  return express.static(faviconPath + '.ico')(req, res, next)
 })
 
 // rss/ics/atom feed