2018-08-26 09:35:53 +00:00
< template >
2018-11-21 11:49:31 +00:00
< div v-if ="!serverData.setup" class="app-social" >
2018-10-26 08:33:27 +00:00
< div v-if ="!serverData.public" id="app-navigation" >
< app -navigation :menu ="menu" / >
2018-08-26 09:35:53 +00:00
< / div >
< div id = "app-content" >
2018-12-03 10:04:25 +00:00
< div v-if ="serverData.isAdmin && !serverData.checks.success" class="setup" >
< h3 v-if ="!serverData.checks.checks.wellknown" > {{ t ( ' social ' , ' .well -known / webfinger isn \ ' t properly set up ! ' ) }} < / h3 >
2018-12-03 11:27:55 +00:00
< 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"
rel = "noreferrer noopener" > { { t ( 'social' , 'Open documentation' ) } } ↗ < / a > < / p >
2018-12-03 08:57:26 +00:00
< / div >
2018-12-03 10:04:25 +00:00
< Search v -if = " searchTerm ! = ' ' " :term ="searchTerm" / >
< 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 >
< label class = "hidden" > { { t ( 'social' , 'ActivityPub URL base' ) } } < / label >
2018-11-21 11:49:31 +00:00
< input :placeholder ="serverData.cliUrl" v -model = " cloudAddress " type = "url"
required >
< 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" >
< h3 v-if ="!serverData.checks.checks.wellknown" > {{ t ( ' social ' , ' .well -known / webfinger isn \ ' t properly set up ! ' ) }} < / h3 >
2018-12-03 11:27:55 +00:00
< 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"
rel = "noreferrer noopener" > { { 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-10-23 13:38:03 +00:00
. app - social {
2018-10-10 07:11:37 +00:00
width : 100 % ;
}
2018-10-26 11:08:12 +00:00
2018-11-19 20:54:26 +00:00
. setup {
margin : auto ;
width : 700 px ;
}
. setup input [ type = url ] {
width : 300 px ;
2018-11-12 18:58:11 +00:00
}
2018-10-26 11:08:12 +00:00
# app - content . social _ _wrapper {
2018-12-03 08:57:26 +00:00
padding : 15 px ;
}
@ media ( min - width : 1200 px ) {
# app - content . social _ _wrapper {
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
# 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 >
2018-10-26 08:33:27 +00:00
import {
PopoverMenu ,
AppNavigation ,
Multiselect ,
Avatar
} from 'nextcloud-vue'
2018-11-19 20:54:26 +00:00
import axios from 'nextcloud-axios'
2018-10-26 08:33:27 +00:00
import TimelineEntry from './components/TimelineEntry'
import ProfileInfo from './components/ProfileInfo'
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 : {
2018-08-26 09:35:53 +00:00
PopoverMenu ,
2018-10-23 13:38:03 +00:00
AppNavigation ,
2018-10-26 08:33:27 +00:00
TimelineEntry ,
2018-10-23 13:38:03 +00:00
Multiselect ,
2018-10-26 08:33:27 +00:00
Avatar ,
2018-11-27 09:24:16 +00:00
ProfileInfo ,
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' )
} ,
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 }
}
} ,
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
this . search = new OCA . Search ( this . search , this . resetSearch )
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 = ''
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 >