2019-02-05 13:55:21 +00:00
< template >
2019-10-07 09:10:16 +00:00
< div v-if ="account" >
2019-02-06 10:48:46 +00:00
< div v-if ="!serverData.local" >
< h2 > { { t ( 'social' , 'Follow on Nextcloud Social' ) } } < / h2 >
2019-02-05 13:55:21 +00:00
< p > { { t ( 'social' , 'Hello' ) } } < avatar :user ="currentUser.uid" :size ="16" / > { { currentUser . displayName } } < / p >
2019-02-06 10:48:46 +00:00
< p v-if ="!isFollowing" >
{ { t ( 'social' , 'Please confirm that you want to follow this account:' ) } }
< / p >
2019-02-05 13:55:21 +00:00
2022-09-12 13:42:18 +00:00
< NcAvatar :url ="avatarUrl" :disable-tooltip ="true" :size ="128" / >
2019-02-05 13:55:21 +00:00
< h2 > { { displayName } } < / h2 >
2019-02-06 10:48:46 +00:00
< form v-if ="!isFollowing" @submit.prevent="follow" >
2019-02-05 13:55:21 +00:00
< input type = "submit" class = "primary" value = "Follow" >
< / form >
2019-02-06 10:48:46 +00:00
< p v-else >
< span class = "icon icon-checkmark-white" / >
{ { t ( 'social' , 'You are following this account' ) } }
< / p >
< div v-if ="isFollowing" >
2022-09-12 13:42:18 +00:00
< NcButton @click ="close" >
2019-02-06 10:48:46 +00:00
{ { t ( 'social' , 'Close' ) } }
2022-09-12 13:42:18 +00:00
< / NcButton >
2019-02-06 10:48:46 +00:00
< / div >
< / div >
2019-10-07 09:10:16 +00:00
<!-- Some unauthenticated user wants to follow a local account -- >
2019-02-06 10:48:46 +00:00
< div v-if ="serverData.local" >
< p > { { t ( 'social' , 'You are going to follow:' ) } } < / p >
2022-09-12 13:42:18 +00:00
< NcAvatar :user ="serverData.local" :disable-tooltip ="true" :size ="128" / >
2019-02-06 10:48:46 +00:00
< h2 > { { displayName } } < / h2 >
< form @submit.prevent ="followRemote" >
< input v-model ="remote" type="text" :placeholder="t('social', 'name@domain of your federation account')" >
< input type = "submit" class = "primary" : value = "t('social', 'Continue')" >
< / form >
< p > { { t ( 'social' , 'This step is needed as the user is probably not registered on the same server as you are. We will redirect you to your homeserver to follow this account.' ) } } < / p >
2019-02-05 13:55:21 +00:00
< / div >
< / div >
2019-10-07 09:10:16 +00:00
< div v -else : class = "{ 'icon-loading-dark': !account }" / >
2019-02-05 13:55:21 +00:00
< / template >
< style scoped >
h2 , p {
color : var ( -- color - primary - text ) ;
}
2019-02-06 10:48:46 +00:00
p . icon {
display : inline - block ;
}
2019-02-05 13:55:21 +00:00
. avatardiv {
vertical - align : - 4 px ;
margin - right : 3 px ;
2019-02-06 10:48:46 +00:00
filter : drop - shadow ( 0 0 0.5 rem # 333 ) ;
margin - top : 10 px ;
margin - bottom : 20 px ;
}
< / style >
< style >
. wrapper {
margin - top : 20 px ;
2019-02-05 13:55:21 +00:00
}
< / style >
< script >
2022-09-12 13:42:18 +00:00
import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
2019-11-05 15:41:02 +00:00
import axios from '@nextcloud/axios'
2022-09-12 13:42:18 +00:00
import accountMixins from '../mixins/accountMixins.js'
import currentuserMixin from '../mixins/currentUserMixin.js'
2020-09-01 22:54:44 +00:00
import { loadState } from '@nextcloud/initial-state'
2020-10-09 16:16:40 +00:00
import { generateUrl } from '@nextcloud/router'
2019-02-05 13:55:21 +00:00
export default {
name : 'App' ,
components : {
2022-09-12 13:42:18 +00:00
NcAvatar ,
2019-02-05 13:55:21 +00:00
} ,
2019-10-07 09:10:16 +00:00
mixins : [
accountMixins ,
currentuserMixin
] ,
2019-02-06 10:48:46 +00:00
data ( ) {
return {
2019-10-07 09:10:16 +00:00
remote : '' ,
account : { }
2019-02-06 10:48:46 +00:00
}
} ,
2019-02-05 13:55:21 +00:00
computed : {
2019-02-06 10:48:46 +00:00
isFollowing ( ) {
2019-10-07 09:10:16 +00:00
return this . $store . getters . isFollowingUser ( this . account . id )
2019-02-05 13:55:21 +00:00
} ,
avatarUrl ( ) {
2019-10-07 09:10:16 +00:00
return generateUrl ( '/apps/social/api/v1/global/actor/avatar?id=' + this . account . id )
2019-02-05 13:55:21 +00:00
} ,
currentUser ( ) {
return window . oc _current _user
} ,
displayName ( ) {
2019-10-07 09:10:16 +00:00
if ( typeof this . account . id === 'undefined' ) {
return ( this . serverData . account ? this . serverData . account : this . serverData . local )
2019-02-05 13:55:21 +00:00
}
2019-10-07 09:10:16 +00:00
return ( this . account . name ? this . account . name : this . account . preferredUsername )
2019-02-05 13:55:21 +00:00
}
} ,
beforeMount : function ( ) {
2019-10-07 09:10:16 +00:00
// importing server data into the store and fetching viewed account's information
2020-09-01 22:54:44 +00:00
try {
const serverData = loadState ( 'social' , 'serverData' )
2019-02-06 10:48:46 +00:00
if ( serverData . currentUser ) {
window . oc _current _user = JSON . parse ( JSON . stringify ( serverData . currentUser ) )
}
2019-02-05 13:55:21 +00:00
this . $store . commit ( 'setServerData' , serverData )
2019-02-06 10:48:46 +00:00
if ( this . serverData . account && ! this . serverData . local ) {
2019-10-07 09:10:16 +00:00
this . $store . dispatch ( 'fetchAccountInfo' , this . serverData . account ) . then ( ( result ) => {
this . account = result
} )
2019-02-06 10:48:46 +00:00
}
if ( this . serverData . local ) {
2019-10-07 09:10:16 +00:00
this . $store . dispatch ( 'fetchPublicAccountInfo' , this . serverData . local ) . then ( ( result ) => {
this . account = result
} )
2019-02-06 10:48:46 +00:00
}
2020-09-01 22:54:44 +00:00
} catch {
/* empty */
2019-02-05 13:55:21 +00:00
}
} ,
methods : {
follow ( ) {
2019-10-07 09:10:16 +00:00
this . $store . dispatch ( 'followAccount' , { currentAccount : this . cloudId , accountToFollow : this . account . account } ) . then ( ( ) => {
2019-02-06 10:48:46 +00:00
} )
} ,
followRemote ( ) {
2020-10-09 16:16:40 +00:00
axios . get ( generateUrl ( ` /apps/social/api/v1/ostatus/link/ ${ this . serverData . local } / ` + encodeURI ( this . remote ) ) ) . then ( ( a ) => {
2019-02-06 10:48:46 +00:00
window . location = a . data . result . url
2019-02-05 13:55:21 +00:00
} )
2019-02-06 10:48:46 +00:00
} ,
close ( ) {
window . close ( )
2019-02-05 13:55:21 +00:00
}
}
}
< / script >