2018-08-26 09:35:53 +00:00
< template >
2018-12-19 09:01:59 +00:00
< div v-if ="!serverData.setup" id="app-social" :class="{public: serverData.public}" >
2018-10-26 08:33:27 +00:00
< div v-if ="!serverData.public" id="app-navigation" >
2019-01-30 19:58:29 +00:00
< ul >
< app -navigation -item v -for = " item in menu.items " :key ="item.key" :item ="item" / >
< / ul >
2018-08-26 09:35:53 +00:00
< / div >
< div id = "app-content" >
2018-12-04 15:42:04 +00:00
< div v-if ="serverData.isAdmin && !serverData.checks.success" class="setup social__wrapper" >
2019-01-02 23:25:44 +00:00
< h3 v-if ="!serverData.checks.checks.wellknown" >
{ { t ( 'social' , '.well-known/webfinger isn\'t properly set up!' ) } }
< / h3 >
< p v-if ="!serverData.checks.checks.wellknown" >
{ { t ( 'social' , 'Social needs the .well-known automatic discovery to be properly set up. If Nextcloud is not installed in the root of the domain, it is often the case that Nextcloud can\'t configure this automatically. To use Social, the admin of this Nextcloud instance needs to manually configure the .well-known redirects: ' ) } } < a class = "external_link" href = "https://docs.nextcloud.com/server/15/go.php?to=admin-setup-well-known-URL" target = "_blank"
2019-01-09 14:59:59 +00:00
rel = "noreferrer noopener" >
2019-01-02 23:25:44 +00:00
{ { t ( 'social' , 'Open documentation' ) } } ↗
< / a >
< / p >
2018-12-03 08:57:26 +00:00
< / div >
2019-01-02 23:25:44 +00:00
< search v -if = " searchTerm ! = = ' ' " :term ="searchTerm" / >
2018-12-03 10:04:25 +00:00
< router -view v -if = " searchTerm = = = ' ' " :key ="$route.fullPath" / >
2018-08-26 09:35:53 +00:00
< / div >
< / div >
2018-11-19 20:54:26 +00:00
< div v -else class = "setup" >
< template v-if ="serverData.isAdmin" >
< h2 > { { t ( 'social' , 'Social app setup' ) } } < / h2 >
2018-12-03 12:28:19 +00:00
< p > { { t ( 'social' , 'ActivityPub requires a fixed URL to make entries unique. Note that this can not be changed later without resetting the Social app.' ) } } < / p >
2018-11-19 20:54:26 +00:00
< form @submit.prevent ="setCloudAddress" >
< p >
2019-01-02 23:25:44 +00:00
< label class = "hidden" >
{ { t ( 'social' , 'ActivityPub URL base' ) } }
< / label >
< input v -model = " cloudAddress " :placeholder ="serverData.cliUrl" type = "url"
2019-01-09 14:59:59 +00:00
required >
2018-11-21 11:49:31 +00:00
< input : value = "t('social', 'Finish setup')" type = "submit" class = "primary" >
2018-11-19 20:54:26 +00:00
< / p >
2018-12-03 10:04:25 +00:00
< template v-if ="!serverData.checks.success" >
2019-01-02 23:25:44 +00:00
< h3 v-if ="!serverData.checks.checks.wellknown" >
{ { t ( 'social' , '.well-known/webfinger isn\'t properly set up!' ) } }
< / h3 >
< p v-if ="!serverData.checks.checks.wellknown" >
{ { t ( 'social' , 'Social needs the .well-known automatic discovery to be properly set up. If Nextcloud is not installed in the root of the domain, it is often the case that Nextcloud can\'t configure this automatically. To use Social, the admin of this Nextcloud instance needs to manually configure the .well-known redirects: ' ) } } < a class = "external_link" href = "https://docs.nextcloud.com/server/15/go.php?to=admin-setup-well-known-URL" target = "_blank"
2019-01-09 14:59:59 +00:00
rel = "noreferrer noopener" >
2019-01-02 23:25:44 +00:00
{ { t ( 'social' , 'Open documentation' ) } } ↗
< / a >
< / p >
2018-12-03 10:04:25 +00:00
< / template >
2018-11-19 20:54:26 +00:00
< / form >
< / template >
< template v-else >
2018-12-03 11:27:55 +00:00
< p > { { t ( 'social' , 'The Social app needs to be set up by the server administrator.' ) } } < / p >
2018-11-19 20:54:26 +00:00
< / template >
< / div >
2018-08-26 09:35:53 +00:00
< / template >
2018-10-10 07:11:37 +00:00
< style scoped >
2018-12-19 09:01:59 +00:00
# app - social {
2018-10-10 07:11:37 +00:00
width : 100 % ;
}
2018-10-26 11:08:12 +00:00
# app - content . social _ _wrapper {
2018-12-03 08:57:26 +00:00
padding : 15 px ;
2018-12-19 09:01:59 +00:00
max - width : 600 px ;
margin : auto ;
2018-12-03 08:57:26 +00:00
}
2018-12-19 09:01:59 +00:00
2018-12-03 08:57:26 +00:00
@ media ( min - width : 1200 px ) {
2018-12-19 08:50:59 +00:00
# app - social : not ( . public ) # app - content . social _ _wrapper {
2018-12-03 08:57:26 +00:00
margin : 15 px calc ( 50 % - 350 px - 75 px ) ;
2018-12-04 01:29:57 +00:00
max - width : 600 px ;
2018-12-03 08:57:26 +00:00
}
2018-11-19 20:54:26 +00:00
}
2018-11-27 16:43:28 +00:00
2018-12-19 09:01:59 +00:00
. setup {
margin : auto ;
width : 700 px ;
}
. setup input [ type = url ] {
width : 300 px ;
}
2018-11-27 16:43:28 +00:00
# social - spacer a : hover ,
# social - spacer a : focus {
border : none ! important ;
}
2018-11-30 08:51:48 +00:00
a . external _link {
text - decoration : underline ;
}
2018-11-27 16:43:28 +00:00
2018-10-10 07:11:37 +00:00
< / style >
2018-08-26 09:35:53 +00:00
< script >
2019-02-26 20:10:12 +00:00
import AppNavigationItem from 'nextcloud-vue/dist/Components/AppNavigationItem'
2018-11-19 20:54:26 +00:00
import axios from 'nextcloud-axios'
2018-11-27 09:24:16 +00:00
import Search from './components/Search'
2018-11-29 10:44:59 +00:00
import currentuserMixin from './mixins/currentUserMixin'
2018-10-26 08:33:27 +00:00
export default {
name : 'App' ,
components : {
2019-01-30 19:58:29 +00:00
AppNavigationItem ,
2018-11-27 09:24:16 +00:00
Search
2018-10-26 08:33:27 +00:00
} ,
2018-11-29 10:44:59 +00:00
mixins : [ currentuserMixin ] ,
2018-10-26 08:33:27 +00:00
data : function ( ) {
return {
infoHidden : false ,
2018-11-19 20:54:26 +00:00
state : [ ] ,
2018-11-27 09:24:16 +00:00
cloudAddress : '' ,
searchTerm : ''
2018-10-26 08:33:27 +00:00
}
} ,
computed : {
timeline : function ( ) {
return this . $store . getters . getTimeline
2018-10-10 10:20:42 +00:00
} ,
2018-10-26 08:33:27 +00:00
menu : function ( ) {
let defaultCategories = [
{
id : 'social-timeline' ,
classes : [ ] ,
2018-11-22 14:42:10 +00:00
icon : 'icon-home' ,
text : t ( 'social' , 'Home' ) ,
2018-10-26 08:33:27 +00:00
router : {
name : 'timeline'
}
} ,
2018-11-22 14:42:10 +00:00
{
id : 'social-direct-messages' ,
classes : [ ] ,
router : {
name : 'timeline' ,
params : { type : 'direct' }
} ,
icon : 'icon-comment' ,
text : t ( 'social' , 'Direct messages' )
} ,
2019-07-04 11:52:50 +00:00
// {
// id: 'social-notifications',
// classes: [],
// router: {
// name: 'timeline',
// params: { type: 'notifications' }
// },
// icon: 'icon-comment',
// text: t('social', 'Notifications')
// },
2018-10-26 08:33:27 +00:00
{
id : 'social-account' ,
classes : [ ] ,
icon : 'icon-user' ,
2018-11-01 03:55:33 +00:00
text : t ( 'social' , 'Profile' ) ,
2018-10-26 08:33:27 +00:00
router : {
name : 'profile' ,
params : { account : this . currentUser . uid }
}
} ,
2019-07-20 16:47:38 +00:00
{
id : 'social-liked' ,
classes : [ ] ,
icon : 'icon-favorite' ,
text : t ( 'social' , 'Liked' ) ,
router : {
name : 'timeline' ,
params : { type : 'liked' }
}
} ,
2018-11-22 14:42:10 +00:00
{
2018-11-22 15:11:46 +00:00
id : 'social-local' ,
2018-10-26 08:33:27 +00:00
classes : [ ] ,
2018-11-22 14:42:10 +00:00
icon : 'icon-category-monitoring' ,
text : t ( 'social' , 'Local timeline' ) ,
router : {
name : 'timeline' ,
2018-11-22 15:11:46 +00:00
params : { type : 'timeline' }
2018-11-22 14:42:10 +00:00
}
2018-10-26 08:33:27 +00:00
} ,
{
2018-11-22 15:11:46 +00:00
id : 'social-global' ,
2018-10-26 08:33:27 +00:00
classes : [ ] ,
2018-11-22 14:42:10 +00:00
icon : 'icon-link' ,
text : t ( 'social' , 'Global timeline' ) ,
router : {
name : 'timeline' ,
2018-11-22 15:11:46 +00:00
params : { type : 'federated' }
2018-11-22 14:42:10 +00:00
}
2018-08-26 09:35:53 +00:00
}
2018-10-26 08:33:27 +00:00
]
return {
items : defaultCategories ,
loading : false
2018-08-26 09:35:53 +00:00
}
}
2018-10-26 08:33:27 +00:00
} ,
2018-11-27 17:03:00 +00:00
watch : {
$route ( to , from ) {
this . searchTerm = ''
}
} ,
2018-10-26 08:33:27 +00:00
beforeMount : function ( ) {
// importing server data into the store
const serverDataElmt = document . getElementById ( 'serverData' )
if ( serverDataElmt !== null ) {
this . $store . commit ( 'setServerData' , JSON . parse ( document . getElementById ( 'serverData' ) . dataset . server ) )
}
2018-11-27 09:24:16 +00:00
2018-12-03 16:32:05 +00:00
if ( ! this . serverData . public ) {
this . search = new OCA . Search ( this . search , this . resetSearch )
2018-12-21 16:33:29 +00:00
this . $store . dispatch ( 'fetchCurrentAccountInfo' , this . cloudId )
2018-12-03 16:32:05 +00:00
}
2018-12-21 16:33:29 +00:00
2019-08-22 12:04:25 +00:00
if ( OCA . Push && OCA . Push . isEnabled ( ) ) {
OCA . Push . addCallback ( this . fromPushApp , 'social' )
2019-08-15 13:56:29 +00:00
}
2018-10-26 08:33:27 +00:00
} ,
methods : {
hideInfo ( ) {
this . infoHidden = true
2018-11-19 20:54:26 +00:00
} ,
setCloudAddress ( ) {
2018-11-21 11:49:31 +00:00
axios . post ( OC . generateUrl ( 'apps/social/api/v1/config/cloudAddress' ) , { cloudAddress : this . cloudAddress } ) . then ( ( response ) => {
this . $store . commit ( 'setServerDataEntry' , 'setup' , false )
this . $store . commit ( 'setServerDataEntry' , 'cloudAddress' , this . cloudAddress )
} )
2018-11-27 09:24:16 +00:00
} ,
search ( term ) {
this . searchTerm = term
} ,
resetSearch ( ) {
this . searchTerm = ''
2019-08-15 13:56:29 +00:00
} ,
2019-08-22 12:04:25 +00:00
fromPushApp : function ( data ) {
2019-08-15 13:56:29 +00:00
// FIXME: might be better to use Timeline.type() ?
let timeline = 'home'
2019-08-15 21:55:27 +00:00
if ( this . $route . name === 'tags' ) {
timeline = 'tags'
} else if ( this . $route . params . type ) {
2019-08-15 13:56:29 +00:00
timeline = this . $route . params . type
}
if ( data . source === 'timeline.home' && timeline === 'home' ) {
this . $store . dispatch ( 'addToTimeline' , [ data . payload ] )
}
if ( data . source === 'timeline.direct' && timeline === 'direct' ) {
this . $store . dispatch ( 'addToTimeline' , [ data . payload ] )
}
2018-10-26 08:33:27 +00:00
}
2018-08-26 09:35:53 +00:00
}
2018-10-26 08:33:27 +00:00
}
2018-11-21 11:49:31 +00:00
< / script >