2 files changed, 48 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..cb1c2a1b
--- /dev/null
+++ b/src/components/remote_follow/remote_follow.vue
@@ -0,0 +1,38 @@
+<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">
+.remote-follow {
+  max-width: 220px;
+
+  .remote-button {
+    width: 100%;
+    min-height: 28px;
+  }
+}
+</style>