#444 - show remote follow button when logged out

This commit is contained in:
dave 2019-03-19 14:36:27 -04:00
parent 96f9eab700
commit 07b8115a37
6 changed files with 53 additions and 18 deletions

View file

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

View file

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

View file

@ -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`
}
}
}

View file

@ -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>

View file

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

View file

@ -84,14 +84,8 @@
</button> </button>
</span> </span>
</div> </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>
<div class='block' v-if='isOtherUser && loggedIn'> <div class='block' v-if='isOtherUser && loggedIn'>
<span v-if='user.statusnet_blocking'> <span v-if='user.statusnet_blocking'>
@ -375,11 +369,6 @@
min-height: 28px; min-height: 28px;
} }
.remote-follow {
max-width: 220px;
min-height: 28px;
}
.follow { .follow {
max-width: 220px; max-width: 220px;
min-height: 28px; min-height: 28px;