refactoring FollowMe flow

components/FollowMe.vue

@@ -5,20 +5,23 @@
       p(v-html="$t('event.follow_me_description', { title: settings.title, account: `@${settings.instance_name}@${domain}`})")
       v-text-field(
         :rules="[$validators.required('common.url')]"
+        :loading='loading'
         :label="$t('common.url')"
         v-model='instance_hostname')
-      p <img class='instance_thumb' :src="instance.thumbnail"/> {{instance.title}}
+        v-btn(v-if='!isDialog' slot='prepend' text :disabled='(!couldGo || !proceed)' :href='link' target='_blank'
+          :loading='loading' color="primary") {{$t("common.follow")}}
 
-    v-card-actions
+        p(slot='append') <img class='instance_thumb' :src="instance.thumbnail"/> {{instance.title}}
+
+    v-card-actions(v-if='isDialog')
       v-spacer
-      v-btn(color='warning' @click="$emit('close')") {{$t("common.cancel")}}
+      v-btn(v-if='isDialog' color='warning' @click="$emit('close')") {{$t("common.cancel")}}
-      v-btn(:disabled='(!couldGo || !proceed)'
+      v-btn(:disabled='(!couldGo || !proceed)' :href='link' target='_blank'
         :loading='loading' color="primary") {{$t("common.follow")}}
 </template>
 <script>
 import { mapState } from 'vuex'
 import debounce from 'lodash/debounce'
-import url from 'url'
 
 export default {
   name: 'FollowMe',
@@ -30,19 +33,19 @@ export default {
       proceed: false,
       instance: {},
       loading: false,
-      get_instance_info: debounce(this.getInstanceInfo, 500)
+      get_instance_info: debounce(this.getInstanceInfo, 300)
     }
   },
 
   computed: {
     ...mapState(['settings']),
     domain () {
-      const URL = url.parse(this.settings.baseurl)
+      const URL = new window.URL(this.settings.baseurl)
       return URL.hostname
     },
     couldGo () {
       // check if is mastodon
-      this.get_instance_info()
+      this.get_instance_info(this.instance_hostname)
       return true
     },
     link () {
@@ -55,14 +58,19 @@ export default {
       if (!this.instance_hostname) {
         return
       }
+      this.loading = true
+
       const instance_url = `https://${this.instance_hostname}/api/v1/instance`
       this.$axios.$get(instance_url)
         .then(ret => {
           this.instance = ret
           this.proceed = true
+          this.loading = false
         })
         .catch(e => {
+          this.instance = {}
           this.proceed = false
+          this.loading = false
         })
     }
   }

components/Footer.vue

@@ -1,13 +1,17 @@
 <template lang="pug">
   v-footer(color='secondary')
+
+    v-dialog(v-model='showFollowMe' destroy-on-close max-width='700px')
+      FollowMe(@close='showFollowMe=false' is-dialog)
+
     v-btn(color='primary' text href='https://gancio.org' target='_blank') Gancio <small>{{settings.version}}</small>
-    v-btn(v-for='link in settings.footerLinks'
+    v-btn.ml-1(v-for='link in settings.footerLinks'
       :key='link.label' color='primary' text :to='link.href') {{link.label}}
 
     v-menu(v-if='settings.enable_trusted_instances && settings.trusted_instances && settings.trusted_instances.length'
       offset-y bottom open-on-hover transition="slide-y-transition")
       template(v-slot:activator="{ on, attrs }")
-        v-btn(v-bind='attrs' v-on='on' color='primary' text) {{$t('common.places')}}
+        v-btn.ml-1(v-bind='attrs' v-on='on' color='primary' text) {{$t('common.places')}}
       v-list
         v-list-item(v-for='instance in settings.trusted_instances'
           :key='instance.name'
@@ -19,15 +23,21 @@
             v-list-item-title {{instance.name}}
             v-list-item-subtitle {{instance.label}}
 
-    //- v-btn(v-if='settings.enable_federation' text rel='me' @click.prevent='showFollowMe=true') follow me
+    v-btn.ml-1(v-if='settings.enable_federation' color='primary' text rel='me' @click.prevent='showFollowMe=true') {{$t('event.interact_with_me')}}
-    //- v-btn(nuxt to='/about' text) about
+      //- v-btn(href='https://blog.gancio.org' text) blog
-    //- v-btn(href='https://blog.gancio.org' text) blog
     //- v-btn(href='https://framagit.org/les/gancio' text) source
 </template>
 <script>
 import { mapState } from 'vuex'
+import FollowMe from '../components/FollowMe'
 
 export default {
+  components: { FollowMe },
+  data () {
+    return {
+      showFollowMe: false
+    }
+  },
   computed: mapState(['settings'])
 }
 </script>

layouts/default.vue

@@ -13,7 +13,6 @@
 </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'
@@ -21,7 +20,7 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'Default',
-  components: { Nav, FollowMe, Snackbar, Footer, Confirm },
+  components: { Nav, Snackbar, Footer, Confirm },
   computed: mapState(['settings']),
   created () {
     this.$vuetify.theme.dark = this.settings['theme.is_dark']

layouts/modal.vue

@@ -13,13 +13,12 @@
 </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 },
+  components: { Nav, Snackbar, Footer, Confirm }
 }
 </script>

locales/it.json

@@ -165,7 +165,8 @@
         "event_confirm_description": "Puoi confermare qui gli eventi inseriti da utenti anonimi",
         "delete_user": "Elimina",
         "remove_admin": "Rimuovi admin",
-        "delete_user_confirm": "Sei sicuro/a di rimuovere questo utente?",
+        "disable_user_confirm": "Vuoi disabilitare {user}?",
+        "delete_user_confirm": "Vuoi rimuovere {user}?",
         "user_remove_ok": "Utente eliminato",
         "user_create_ok": "Utente creato",
         "allow_registration_description": "Vuoi abilitare la registrazione?",

pages/event/_id.vue

@@ -74,14 +74,6 @@ v-container#event
           small.mr-3 🔖 {{event.likes.length}}
           small ✊ {{event.boost.length}}<br/>
 
-        //- p.p-2
-          //- v-btn(type='text' @click='showFollowMe=true') {{$t('event.interact_with_me')}}
-          //- span(v-if='settings.enable_resources && event.resources.length')  -  {{$tc('common.n_resources', event.resources.length)}}
-
-        //- v-dialog(v-model='showFollowMe' destroy-on-close max-width='500px')
-          h4(slot='title') {{$t('common.follow_me_title')}}
-          FollowMe(@close='showFollowMe=false' is-dialog)
-
         v-dialog.showResource#resourceDialog(v-model='showResources' fullscreen
           width='95vw'
           destroy-on-close
@@ -132,13 +124,12 @@ v-container#event
 import { mapState } from 'vuex'
 import EventAdmin from './eventAdmin'
 import EmbedEvent from './embedEvent'
-import FollowMe from '../../components/FollowMe'
 import moment from 'dayjs'
 const htmlToText = require('html-to-text')
 
 export default {
   name: 'Event',
-  components: { EventAdmin, EmbedEvent, FollowMe },
+  components: { EventAdmin, EmbedEvent },
   async asyncData ({ $axios, params, error, store }) {
     try {
       const event = await $axios.$get(`/event/${params.id}`)
@@ -151,7 +142,6 @@ export default {
     return {
       event: {},
       showEmbed: false,
-      showFollowMe: false,
       showResources: false,
       selectedResource: { data: { attachment: [] } }
     }

pages/export.vue

@@ -64,9 +64,9 @@
                   color='primary' v-clipboard:copy='listScript' v-clipboard:success='copyLink.bind(this,"list")') {{$t('common.copy')}}
                     v-icon.ml-1 mdi-content-copy
 
-        //- v-tab(v-if='settings.enable_federation') {{$t('common.fediverse')}}
+        v-tab(v-if='settings.enable_federation') {{$t('common.fediverse')}}
-        //- v-tab-item(v-if='settings.enable_federation')
+        v-tab-item(v-if='settings.enable_federation')
-        //-   FollowMe
+          FollowMe
           //- TOFIX
           //- v-tab.pt-1(label='calendar' name='calendar')
           //- v-tab-item