[feat] followMe on fediverse component

pages/event/_id.vue

@@ -54,13 +54,18 @@
         :href='`${settings.baseurl}/api/event/${event.id}.ics`') <i class='el-icon-date'></i> {{$t('common.add_to_calendar')}}
 
     //- comments from fediverse
-    #comments(v-if='settings.enable_federation')
+    #comments.mt-1(v-if='settings.enable_federation')
       div.float-right(v-if='!settings.disable_gamification')
         small.mr-3 🔖 {{event.likes.length}}
         small ✊ {{event.boost.length}}<br/>
 
       strong(v-if='settings.enable_comments') {{$tc('common.comments', event.comments.length)}} -
-      small {{$t('event.interact_with_me_at')}} <u>{{fedi_user}}@{{settings.baseurl|url2host}}</u>
+      small {{$t('event.interact_with_me_at')}} 
+        el-button(type='text' size='mini' @click='showFollowMe=true') @{{fedi_user}}@{{settings.baseurl|url2host}}
+
+      el-dialog.followDialog(:visible.sync='showFollowMe')
+        h4(slot='title') {{$t('common.follow_me_title')}}
+        FollowMe
 
       .card-header(v-if='settings.enable_comments' v-for='comment in event.comments' :key='comment.id')
         a.float-right(:href='comment.data.url')
@@ -73,6 +78,7 @@
 import { mapState, mapGetters } from 'vuex'
 import EventAdmin from './eventAdmin'
 import EmbedEvent from './embedEvent'
+import FollowMe from './followMe'
 import { Message } from 'element-ui'
 
 import moment from 'dayjs'
@@ -80,11 +86,11 @@ import moment from 'dayjs'
 export default {
   name: 'Event',
   transition: null,
-  components: { EventAdmin, EmbedEvent },
+  components: { EventAdmin, EmbedEvent, FollowMe },
-  data () {
+  data() {
     return {
       showEmbed: false,
-      copied: false
+      showFollowMe: false
     }
   },
   head () {
@@ -214,6 +220,14 @@ export default {
     }
   }
 
+  .followDialog {
+    .el-dialog {
+      min-height: 300px;
+      max-width: 600px;
+      width: 100%;
+    }
+  }
+
   .head {
     z-index: 1;
     position: sticky;

pages/event/followMe.vue

@@ -0,0 +1,63 @@
+<template lang='pug'>
+  div
+    p(v-html="$t('event.follow_me_description', { title: settings.title, account: `@${settings.fedi_admin}@${domain}`})")
+    el-input(v-model='instance_hostname')
+      a(slot='append' :href='link' target='_blank')
+        el-button(:disabled='(!couldGo || !proceed)' plain type="primary" icon='el-icon-document') {{$t("common.follow")}}
+    p.mt-2 <img class='instance_thumb' :src="instance.thumbnail"/> {{instance.title}}
+</template>
+<script>
+import { mapState } from 'vuex'
+import { Message } from 'element-ui'
+import debounce from 'lodash/debounce'
+import url from 'url'
+
+export default {
+  
+  name: 'embedEvent',
+  data () {
+    return {
+      instance_hostname: '',
+      proceed: false,
+      instance: {},
+      get_instance_info: debounce(this.getInstanceInfo, 500)
+    }
+  },
+  methods: {
+    getInstanceInfo () {
+      const instance_url = `https://${this.instance_hostname}/api/v1/instance`
+      fetch(instance_url)
+        .then( ret => ret.json())
+        .then(ret => {
+          this.instance = ret
+          this.proceed = true
+        })
+        .catch( e => {
+          this.proceed = false
+        })
+    }
+  },
+  computed: {
+    ...mapState(['settings']),
+    domain () {
+      const URL = url.parse(this.settings.baseurl)
+      return URL.hostname
+    },
+    couldGo () {
+      // check if is mastodon
+      const instance_url = `https://${this.instance_hostname}/api/v1/instance`
+      this.get_instance_info()
+      return true
+    },
+    link () {
+      // check if exists
+      return `https://${this.instance_hostname}/authorize_interaction?uri=gancio@gancio.cisti.org`
+    }
+  }
+}
+</script>
+<style lang="less">
+.instance_thumb {
+  height: 20px;
+}
+</style>