validators as a plugin

components/FollowMe.vue

@@ -1,10 +1,19 @@
 <template lang='pug'>
   v-card
-    p(v-html="$t('event.follow_me_description', { title: settings.title, account: `@${settings.instance_name}@${domain}`})")
-    v-text-field(v-model='instance_hostname' ref='instance')
-      a(slot='append' :href='link' target='_blank')
-        v-btn(:disabled='(!couldGo || !proceed)' plain type="primary") {{$t("common.follow")}}
-    p.mt-2 <img class='instance_thumb' :src="instance.thumbnail"/> {{instance.title}}
+    v-card-title(v-text="$t('common.follow_me_title')")
+    v-card-text
+      p(v-html="$t('event.follow_me_description', { title: settings.title, account: `@${settings.instance_name}@${domain}`})")
+      v-text-field(
+        :rules='[$validators.required()]'
+        :label="$t('common.url')"
+        v-model='instance_hostname')
+      p <img class='instance_thumb' :src="instance.thumbnail"/> {{instance.title}}
+    v-card-actions
+      //- a(slot='append' :href='link' target='_blank')
+      v-spacer
+      v-btn(:disabled='(!couldGo || !proceed)'
+        :loading='loading'
+        color="primary") {{$t("common.follow")}}
 </template>
 <script>
 import { mapState } from 'vuex'
@@ -18,6 +27,7 @@ export default {
       instance_hostname: '',
       proceed: false,
       instance: {},
+      loading: false,
       get_instance_info: debounce(this.getInstanceInfo, 500)
     }
   },
@@ -29,7 +39,6 @@ export default {
       return URL.hostname
     },
     couldGo () {
-      console.error(this.instance_hostname)
       // check if is mastodon
       this.get_instance_info()
       return true

components/Snackbar.vue

@@ -19,8 +19,8 @@ export default {
     return {
       icon: 'md-alert',
       color: 'primary',
-      bottom: false,
-      top: true,
+      bottom: true,
+      top: false,
       left: false,
       right: false,
       active: false,

components/admin/Federation.vue

@@ -23,7 +23,7 @@
         //- div.mt-4 {{$t('admin.instance_name')}}
         v-text-field.mt-5(v-model='instance_name'
           :label="$t('admin.instance_name')"
-          :hint="`${$t('admin.instance_name_help')} (@${instance_name}@${settings.baseurl|url2host})`"
+          :hint="`${$t('admin.instance_name_help')} ${instance_ap_url}`"
           placeholder='Instance name' persistent-hint
           @blur='save("instance_name", instance_name)')
 
@@ -47,7 +47,7 @@
               v-form(v-model='valid')
               v-text-field.mt-4(v-model='instance_url'
                 persistent-hint
-                :rules="[validators.required('email')]"
+                :rules="[$validators.required()]"
                 :hint="$t('admin.add_trusted_instance')"
                 :label="$t('common.url')")
             v-card-actions
@@ -68,14 +68,12 @@
 </template>
 <script>
 import { mapActions, mapState } from 'vuex'
-import { validators } from '../../plugins/helpers'
 import axios from 'axios'
 
 export default {
   name: 'Federation',
   data ({ $store, $options }) {
     return {
-      validators,
       instance_url: '',
       instance_name: $store.state.settings.instance_name,
       instance_place: $store.state.settings.instance_place,
@@ -107,6 +105,10 @@ export default {
     enable_trusted_instances: {
       get () { return this.settings.enable_trusted_instances },
       set (value) { this.setSetting({ key: 'enable_trusted_instances', value }) }
+    },
+    instance_ap_url () {
+      const instance_url = this.settings.baseurl.match(/^https?:\/\/(.[^/:]+)/i)[1]
+      return `(@${this.instance_name}@${instance_url})`
     }
   },
   methods: {

components/admin/Theme.vue

@@ -38,11 +38,11 @@
           v-card-text
             v-form(v-model='valid' ref='linkModalForm')
               v-text-field(v-model='link.label'
-                :rules="[validators.required('label')]"
+                :rules="[$validators.required('label')]"
                 label='Label')
               v-text-field(v-model='link.href'
-                :rules="[validators.required('href')]"
-                label='Href')
+                :rules="[$validators.required($t('common.url'))]"
+                :label="$t('common.url')")
           v-card-actions
             v-spacer
             v-btn(link @click='linkModal=false' color='error') {{$t('common.cancel')}}
@@ -67,13 +67,11 @@
 </template>
 <script>
 import { mapActions, mapState } from 'vuex'
-import { validators } from '../../plugins/helpers'
 
 export default {
   name: 'Theme',
   data () {
     return {
-      validators,
       valid: false,
       logoKey: 0,
       link: { href: '', label: '' },

components/admin/Users.vue

@@ -17,7 +17,7 @@
           v-form
             v-text-field(v-model='new_user.email'
               :label="$t('common.email')"
-              :rules="[validators.required('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
@@ -42,7 +42,6 @@
 </template>
 <script>
 import { mapState } from 'vuex'
-import { validators } from '../../plugins/helpers'
 
 export default {
   name: 'Users',
@@ -51,7 +50,6 @@ export default {
   },
   data () {
     return {
-      validators,
       newUserDialog: false,
       new_user: {
         email: '',