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

2 files changed, 36 insertions, 0 deletions

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>