From 07b8115a37a22b2a7d935154e8231c8a90f199d6 Mon Sep 17 00:00:00 2001
From: dave <starpumadev@gmail.com>
Date: Tue, 19 Mar 2019 14:36:27 -0400
Subject: [PATCH] #444 - show `remote follow` button when logged out

---
 src/components/follow_card/follow_card.js     |  7 ++++-
 src/components/follow_card/follow_card.vue    |  9 ++++---
 src/components/remote_follow/remote_follow.js | 10 +++++++
 .../remote_follow/remote_follow.vue           | 26 +++++++++++++++++++
 src/components/user_card/user_card.js         |  4 ++-
 src/components/user_card/user_card.vue        | 15 ++---------
 6 files changed, 53 insertions(+), 18 deletions(-)
 create mode 100644 src/components/remote_follow/remote_follow.js
 create mode 100644 src/components/remote_follow/remote_follow.vue

diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
index 425c9c3e..ac4e265a 100644
--- a/src/components/follow_card/follow_card.js
+++ b/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: {
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index 6cb064eb..9bd21cfd 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/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"
-        class="btn btn-default"
+        v-if="showFollow && loggedIn"
+        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;
diff --git a/src/components/remote_follow/remote_follow.js b/src/components/remote_follow/remote_follow.js
new file mode 100644
index 00000000..461d58c9
--- /dev/null
+++ b/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`
+    }
+  }
+}
diff --git a/src/components/remote_follow/remote_follow.vue b/src/components/remote_follow/remote_follow.vue
new file mode 100644
index 00000000..db361e49
--- /dev/null
+++ b/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>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 43a77f45..b07da675 100644
--- a/src/components/user_card/user_card.js
+++ b/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 () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 690e1bde..f4114e6e 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -84,14 +84,8 @@
             </button>
           </span>
         </div>
-        <div class="remote-follow" v-if='!loggedIn && user.is_local'>
-          <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 v-if='!loggedIn && user.is_local'>
+          <RemoteFollow :user="user" />
         </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;