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(:disabled='(!couldGo || !proceed)'
+      v-btn(v-if='isDialog' color='warning' @click="$emit('close')") {{$t("common.cancel")}}
+      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(nuxt to='/about' text) about
-    //- v-btn(href='https://blog.gancio.org' text) blog
+    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(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>