#444 - show `remote follow` button when logged out

src/components/follow_card/follow_card.js

@@ -1,4 +1,5 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import RemoteFollow from '../remote_follow/remote_follow.vue'
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 
 const FollowCard = {
@@ -14,13 +15,17 @@ const FollowCard = {
     }
   },
   components: {
-    BasicUserCard
+    BasicUserCard,
+    RemoteFollow
   },
   computed: {
     isMe () { return this.$store.state.users.currentUser.id === this.user.id },
     following () { return this.updated ? this.updated.following : this.user.following },
     showFollow () {
       return !this.following || this.updated && !this.updated.following
+    },
+    loggedIn () {
+      return this.$store.state.users.currentUser
     }
   },
   methods: {

src/components/follow_card/follow_card.vue

@@ -4,9 +4,12 @@
       <span class="faint" v-if="!noFollowsYou && user.follows_you">
         {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
       </span>
+      <div class="btn-follow" v-if="showFollow && !loggedIn">
+        <RemoteFollow :user="user" />
+      </div>
       <button
-        v-if="showFollow"
+        v-if="showFollow && loggedIn"
-        class="btn btn-default"
+        class="btn btn-default btn-follow"
         @click="followUser"
         :disabled="inProgress"
         :title="requestSent ? $t('user_card.follow_again') : ''"
@@ -44,7 +47,7 @@
   flex-wrap: wrap;
   line-height: 1.5em;
 
-  .btn {
+  .btn-follow {
     margin-top: 0.5em;
     margin-left: auto;
     width: 10em;

src/components/remote_follow/remote_follow.js

@@ -0,0 +1,10 @@
+export default {
+  props: [ 'user' ],
+  computed: {
+    subscribeUrl () {
+      // eslint-disable-next-line no-undef
+      const serverUrl = new URL(this.user.statusnet_profile_url)
+      return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
+    }
+  }
+}

src/components/remote_follow/remote_follow.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="remote-follow">
+    <form method="POST" :action='subscribeUrl'>
+      <input type="hidden" name="nickname" :value="user.screen_name">
+      <input type="hidden" name="profile" value="">
+      <button click="submit" class="remote-button">
+        {{ $t('user_card.remote_follow') }}
+      </button>
+    </form>
+  </div>
+</template>
+
+<script src="./remote_follow.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.remote-follow {
+  max-width: 220px;
+
+  .remote-button {
+    width: 100%;
+    min-height: 28px;
+  }
+}
+</style>

src/components/user_card/user_card.js

@@ -1,4 +1,5 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import RemoteFollow from '../remote_follow/remote_follow.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -99,7 +100,8 @@ export default {
     }
   },
   components: {
-    UserAvatar
+    UserAvatar,
+    RemoteFollow
   },
   methods: {
     followUser () {

src/components/user_card/user_card.vue

@@ -84,14 +84,8 @@
             </button>
           </span>
         </div>
-        <div class="remote-follow" v-if='!loggedIn && user.is_local'>
+        <div v-if='!loggedIn && user.is_local'>
-          <form method="POST" :action='subscribeUrl'>
+          <RemoteFollow :user="user" />
-            <input type="hidden" name="nickname" :value="user.screen_name">
-            <input type="hidden" name="profile" value="">
-            <button click="submit" class="remote-button">
-              {{ $t('user_card.remote_follow') }}
-            </button>
-          </form>
         </div>
         <div class='block' v-if='isOtherUser && loggedIn'>
           <span v-if='user.statusnet_blocking'>
@@ -375,11 +369,6 @@
       min-height: 28px;
     }
 
-    .remote-follow {
-      max-width: 220px;
-      min-height: 28px;
-    }
-
     .follow {
       max-width: 220px;
       min-height: 28px;