2020-03-12 13:29:21 +00:00
< template >
2020-02-18 07:57:00 +00:00
< div v-if ="loggedUser" >
2020-06-25 09:36:35 +00:00
< nav class = "breadcrumb" aria -label = " breadcrumbs " >
< ul >
< li >
2020-11-30 09:24:11 +00:00
< router -link : to = "{ name: RouteName.ACCOUNT_SETTINGS }" > { {
$t ( "Account" )
} } < / r o u t e r - l i n k >
2020-06-25 09:36:35 +00:00
< / li >
< li class = "is-active" >
< router -link : to = "{ name: RouteName.NOTIFICATIONS }" > { {
2021-03-26 18:01:55 +00:00
$t ( "Notifications" )
2020-06-25 09:36:35 +00:00
} } < / r o u t e r - l i n k >
< / li >
< / ul >
< / nav >
2020-06-08 10:28:19 +00:00
< section >
2021-05-06 16:39:59 +00:00
< div class = "setting-title" >
2021-06-01 16:08:03 +00:00
< h2 > { { $t ( "Browser notifications" ) } } < / h2 >
2021-05-06 16:39:59 +00:00
< / div >
2021-10-10 14:24:12 +00:00
< b -button
v - if = "subscribed"
@ click = "unsubscribeToWebPush()"
@ keyup . enter = "unsubscribeToWebPush()"
> { { $t ( "Unsubscribe to browser push notifications" ) } } < / b - b u t t o n
>
2021-05-06 16:39:59 +00:00
< b -button
icon - left = "rss"
@ click = "subscribeToWebPush"
2021-10-10 14:24:12 +00:00
@ keyup . enter = "subscribeToWebPush"
2021-06-28 07:38:35 +00:00
v - else - if = "canShowWebPush && webPushEnabled"
2021-06-26 13:23:22 +00:00
> { { $t ( "Activate browser push notifications" ) } } < / b - b u t t o n
2021-05-06 16:39:59 +00:00
>
2021-06-28 07:38:35 +00:00
< b -message type = "is-warning" v -else -if = " ! webPushEnabled " >
{ { $t ( "This instance hasn't got push notifications enabled." ) } }
< i18n path = "Ask your instance admin to {enable_feature}." >
< a
slot = "enable_feature"
href = "https://docs.joinmobilizon.org/administration/configure/push/"
target = "_blank"
rel = "noopener noreferer"
> { { $t ( "enable the feature" ) } } < / a
>
< / i18n >
< / b - m e s s a g e >
< b -message type = "is-danger" v-else > {{
2021-06-26 13:23:22 +00:00
$t ( "You can't use push notifications in this browser." )
2021-06-28 07:38:35 +00:00
} } < / b - m e s s a g e >
2021-06-01 16:08:03 +00:00
< / section >
< section >
< div class = "setting-title" >
< h2 > { { $t ( "Notification settings" ) } } < / h2 >
< / div >
< p >
{ {
$t (
"Select the activities for which you wish to receive an email or a push notification."
)
} }
< / p >
< table class = "table" >
< tbody >
< template v-for ="notificationType in notificationTypes" >
< tr :key ="`${notificationType.label}-title`" >
< th colspan = "3" >
{ { notificationType . label } }
< / th >
< / tr >
< tr :key ="`${notificationType.label}-subtitle`" >
< th v-for ="(method, key) in notificationMethods" :key ="key" >
{ { method } }
< / th >
2021-09-07 15:45:21 +00:00
< th > { { $t ( "Description" ) } } < / th >
2021-06-01 16:08:03 +00:00
< / tr >
< tr v-for ="subType in notificationType.subtypes" :key="subType.id" >
< td v-for ="(method, key) in notificationMethods" :key ="key" >
< b -checkbox
2021-09-07 15:45:21 +00:00
: value = "notificationValues[subType.id][key].enabled"
2021-06-01 16:08:03 +00:00
@ input = "(e) => updateNotificationValue(subType.id, key, e)"
2021-09-07 15:45:21 +00:00
: disabled = "notificationValues[subType.id][key].disabled"
2021-06-01 16:08:03 +00:00
/ >
< / td >
< td >
{ { subType . label } }
< / td >
< / tr >
< / template >
< / tbody >
< / table >
2021-06-26 13:23:22 +00:00
< b -field
: label = "$t('Send notification e-mails')"
2021-09-07 15:52:34 +00:00
label - for = "groupNotifications"
2021-06-26 13:23:22 +00:00
: message = "
$t (
'Announcements and mentions notifications are always sent straight away.'
)
"
>
< b -select
v - model = "groupNotifications"
@ input = "updateSetting({ groupNotifications })"
2021-09-07 15:52:34 +00:00
id = "groupNotifications"
2021-06-26 13:23:22 +00:00
>
< option
v - for = "(value, key) in groupNotificationsValues"
: value = "key"
: key = "key"
>
{ { value } }
< / option >
< / b - s e l e c t >
< / b - f i e l d >
2021-06-01 16:08:03 +00:00
< / section >
< section >
2020-06-08 10:28:19 +00:00
< div class = "setting-title" >
< h2 > { { $t ( "Participation notifications" ) } } < / h2 >
< / div >
< div class = "field" >
< strong > { {
2020-06-16 14:15:38 +00:00
$t (
"Mobilizon will send you an email when the events you are attending have important changes: date and time, address, confirmation or cancellation, etc."
)
2020-06-08 10:28:19 +00:00
} } < / strong >
< / div >
2020-11-02 09:30:28 +00:00
< p >
{ { $t ( "Other notification options:" ) } }
< / p >
2020-06-08 10:28:19 +00:00
< div class = "field" >
2020-11-30 09:24:11 +00:00
< b -checkbox
v - model = "notificationOnDay"
@ input = "updateSetting({ notificationOnDay })"
>
2020-06-08 10:28:19 +00:00
< strong > { { $t ( "Notification on the day of the event" ) } } < / strong >
< p >
{ {
2020-11-30 09:24:11 +00:00
$t (
"We'll use your timezone settings to send a recap of the morning of the event."
)
2020-06-08 10:28:19 +00:00
} }
< / p >
2020-06-16 14:15:38 +00:00
< div v-if ="loggedUser.settings && loggedUser.settings.timezone" >
< em > { {
$t ( "Your timezone is currently set to {timezone}." , {
timezone : loggedUser . settings . timezone ,
} )
} } < / em >
2020-11-30 09:24:11 +00:00
< router -link
class = "change-timezone"
: to = "{ name: RouteName.PREFERENCES }"
> { { $t ( "Change timezone" ) } } < / r o u t e r - l i n k
>
2020-06-16 14:15:38 +00:00
< / div >
2020-11-30 09:24:11 +00:00
< span v-else > {{
$t ( "You can pick your timezone into your preferences." )
} } < / span >
2020-06-08 10:28:19 +00:00
< / b - c h e c k b o x >
< / div >
< div class = "field" >
2020-11-30 09:24:11 +00:00
< b -checkbox
v - model = "notificationEachWeek"
@ input = "updateSetting({ notificationEachWeek })"
>
2020-06-08 10:28:19 +00:00
< strong > { { $t ( "Recap every week" ) } } < / strong >
< p >
2020-11-30 09:24:11 +00:00
{ {
$t (
"You'll get a weekly recap every Monday for upcoming events, if you have any."
)
} }
2020-06-08 10:28:19 +00:00
< / p >
< / b - c h e c k b o x >
< / div >
< div class = "field" >
< b -checkbox
v - model = "notificationBeforeEvent"
@ input = "updateSetting({ notificationBeforeEvent })"
>
< strong > { { $t ( "Notification before the event" ) } } < / strong >
< p >
{ {
$t (
"We'll send you an email one hour before the event begins, to be sure you won't forget about it."
)
} }
< / p >
< / b - c h e c k b o x >
< / div >
< / section >
< section >
< div class = "setting-title" >
< h2 > { { $t ( "Organizer notifications" ) } } < / h2 >
< / div >
2020-06-16 14:15:38 +00:00
< div class = "field is-primary" >
2021-09-07 15:52:34 +00:00
< label
class = "has-text-weight-bold"
for = "notificationPendingParticipation"
> { {
$t ( "Notifications for manually approved participations to an event" )
} } < / l a b e l
>
2020-10-06 13:36:19 +00:00
< p >
{ {
$t (
"If you have opted for manual validation of participants, Mobilizon will send you an email to inform you of new participations to be processed. You can choose the frequency of these notifications below."
)
} }
< / p >
2020-06-08 10:28:19 +00:00
< b -select
v - model = "notificationPendingParticipation"
2021-09-07 15:52:34 +00:00
id = "notificationPendingParticipation"
2020-06-08 10:28:19 +00:00
@ input = "updateSetting({ notificationPendingParticipation })"
>
< option
v - for = "(value, key) in notificationPendingParticipationValues"
: value = "key"
: key = "key"
>
2020-08-27 13:41:48 +00:00
{ { value } }
< / option >
2020-06-08 10:28:19 +00:00
< / b - s e l e c t >
< / div >
< / section >
2021-03-26 18:01:55 +00:00
< section >
< div class = "setting-title" >
< h2 > { { $t ( "Personal feeds" ) } } < / h2 >
< / div >
< p >
{ {
$t (
"These feeds contain event data for the events for which any of your profiles is a participant or creator. You should keep these private. You can find feeds for specific profiles on each profile edition page."
)
} }
< / p >
< div v-if ="feedTokens && feedTokens.length > 0" >
< div
class = "buttons"
v - for = "feedToken in feedTokens"
: key = "feedToken.token"
>
< b -tooltip
: label = "$t('URL copied to clipboard')"
: active = "showCopiedTooltip.atom"
always
type = "is-success"
position = "is-left"
>
< b -button
tag = "a"
icon - left = "rss"
@ click = "
( e ) => copyURL ( e , tokenToURL ( feedToken . token , 'atom' ) , 'atom' )
"
2021-10-10 14:24:12 +00:00
@ keyup . enter = "
( e ) => copyURL ( e , tokenToURL ( feedToken . token , 'atom' ) , 'atom' )
"
2021-03-26 18:01:55 +00:00
: href = "tokenToURL(feedToken.token, 'atom')"
target = "_blank"
> { { $t ( "RSS/Atom Feed" ) } } < / b - b u t t o n
>
< / b - t o o l t i p >
< b -tooltip
: label = "$t('URL copied to clipboard')"
: active = "showCopiedTooltip.ics"
always
type = "is-success"
position = "is-left"
>
< b -button
tag = "a"
@ click = "
( e ) => copyURL ( e , tokenToURL ( feedToken . token , 'ics' ) , 'ics' )
"
2021-10-10 14:24:12 +00:00
@ keyup . enter = "
( e ) => copyURL ( e , tokenToURL ( feedToken . token , 'ics' ) , 'ics' )
"
2021-03-26 18:01:55 +00:00
icon - left = "calendar-sync"
: href = "tokenToURL(feedToken.token, 'ics')"
target = "_blank"
> { { $t ( "ICS/WebCal Feed" ) } } < / b - b u t t o n
>
< / b - t o o l t i p >
< b -button
icon - left = "refresh"
type = "is-text"
@ click = "openRegenerateFeedTokensConfirmation"
2021-10-10 14:24:12 +00:00
@ keyup . enter = "openRegenerateFeedTokensConfirmation"
2021-03-26 18:01:55 +00:00
> { { $t ( "Regenerate new links" ) } } < / b - b u t t o n
>
< / div >
< / div >
< div v-else >
< b -button
icon - left = "refresh"
type = "is-text"
@ click = "generateFeedTokens"
2021-10-10 14:24:12 +00:00
@ keyup . enter = "generateFeedTokens"
2021-03-26 18:01:55 +00:00
> { { $t ( "Create new links" ) } } < / b - b u t t o n
>
< / div >
< / section >
2020-02-18 07:57:00 +00:00
< / div >
2020-03-12 13:29:21 +00:00
< / template >
< script lang = "ts" >
2020-02-18 07:57:00 +00:00
import { Component , Vue , Watch } from "vue-property-decorator" ;
2020-11-27 18:27:44 +00:00
import { INotificationPendingEnum } from "@/types/enums" ;
2021-03-26 18:01:55 +00:00
import {
SET _USER _SETTINGS ,
FEED _TOKENS _LOGGED _USER ,
2021-06-01 16:08:03 +00:00
USER _NOTIFICATIONS ,
UPDATE _ACTIVITY _SETTING ,
2021-03-26 18:01:55 +00:00
} from "../../graphql/user" ;
2021-09-07 15:45:21 +00:00
import { IActivitySettingMethod , IUser } from "../../types/current-user.model" ;
2020-06-16 14:15:38 +00:00
import RouteName from "../../router/name" ;
2021-03-26 18:01:55 +00:00
import { IFeedToken } from "@/types/feedtoken.model" ;
import { CREATE _FEED _TOKEN , DELETE _FEED _TOKEN } from "@/graphql/feed_tokens" ;
2021-05-06 16:39:59 +00:00
import {
subscribeUserToPush ,
unsubscribeUserToPush ,
} from "../../services/push-subscription" ;
import {
REGISTER _PUSH _MUTATION ,
UNREGISTER _PUSH _MUTATION ,
} from "@/graphql/webPush" ;
2021-07-01 08:48:37 +00:00
import merge from "lodash/merge" ;
2021-06-28 07:38:35 +00:00
import { WEB _PUSH } from "@/graphql/config" ;
2021-06-01 16:08:03 +00:00
type NotificationSubType = { label : string ; id : string } ;
type NotificationType = { label : string ; subtypes : NotificationSubType [ ] } ;
2020-03-12 13:29:21 +00:00
2020-02-18 07:57:00 +00:00
@ Component ( {
apollo : {
2021-06-01 16:08:03 +00:00
loggedUser : USER _NOTIFICATIONS ,
2021-03-26 18:01:55 +00:00
feedTokens : {
query : FEED _TOKENS _LOGGED _USER ,
update : ( data ) =>
data . loggedUser . feedTokens . filter (
( token : IFeedToken ) => token . actor === null
) ,
} ,
2021-06-28 07:38:35 +00:00
webPushEnabled : {
query : WEB _PUSH ,
update : ( data ) => data . config . webPush . enabled ,
} ,
2020-02-18 07:57:00 +00:00
} ,
2021-05-25 14:21:29 +00:00
metaInfo ( ) {
return {
2021-10-10 14:24:12 +00:00
title : this . $t ( "Notification settings" ) as string ,
2021-05-25 14:21:29 +00:00
} ;
} ,
2020-02-18 07:57:00 +00:00
} )
2020-03-12 13:29:21 +00:00
export default class Notifications extends Vue {
2020-06-27 17:12:45 +00:00
loggedUser ! : IUser ;
2020-02-18 07:57:00 +00:00
2021-03-26 18:01:55 +00:00
feedTokens : IFeedToken [ ] = [ ] ;
2021-02-12 17:19:49 +00:00
notificationOnDay : boolean | undefined = true ;
2020-02-18 07:57:00 +00:00
2021-02-12 17:19:49 +00:00
notificationEachWeek : boolean | undefined = false ;
2020-02-18 07:57:00 +00:00
2021-02-12 17:19:49 +00:00
notificationBeforeEvent : boolean | undefined = false ;
2020-03-12 13:29:21 +00:00
2021-02-12 17:19:49 +00:00
notificationPendingParticipation : INotificationPendingEnum | undefined =
INotificationPendingEnum . NONE ;
2020-06-08 10:28:19 +00:00
2021-06-26 13:23:22 +00:00
groupNotifications : INotificationPendingEnum | undefined =
INotificationPendingEnum . ONE _DAY ;
2020-10-06 13:36:19 +00:00
notificationPendingParticipationValues : Record < string , unknown > = { } ;
2021-06-26 13:23:22 +00:00
groupNotificationsValues : Record < string , unknown > = { } ;
2020-06-08 10:28:19 +00:00
2020-06-16 14:15:38 +00:00
RouteName = RouteName ;
2021-03-26 18:01:55 +00:00
showCopiedTooltip = { ics : false , atom : false } ;
2021-05-06 16:39:59 +00:00
subscribed = false ;
2021-06-26 13:23:22 +00:00
canShowWebPush = false ;
2021-06-28 07:38:35 +00:00
webPushEnabled = false ;
2021-06-01 16:08:03 +00:00
notificationMethods = {
email : this . $t ( "Email" ) as string ,
push : this . $t ( "Push" ) as string ,
} ;
defaultNotificationValues = {
participation _event _updated : {
2021-09-07 15:45:21 +00:00
email : { enabled : true , disabled : true } ,
push : { enabled : true , disabled : true } ,
2021-06-01 16:08:03 +00:00
} ,
participation _event _comment : {
2021-09-07 15:45:21 +00:00
email : { enabled : true , disabled : false } ,
push : { enabled : true , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
event _new _pending _participation : {
2021-09-07 15:45:21 +00:00
email : { enabled : true , disabled : false } ,
push : { enabled : true , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
event _new _participation : {
2021-09-07 15:45:21 +00:00
email : { enabled : false , disabled : false } ,
push : { enabled : false , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
event _created : {
2021-09-07 15:45:21 +00:00
email : { enabled : false , disabled : false } ,
push : { enabled : false , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
event _updated : {
2021-09-07 15:45:21 +00:00
email : { enabled : false , disabled : false } ,
push : { enabled : false , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
discussion _updated : {
2021-09-07 15:45:21 +00:00
email : { enabled : false , disabled : false } ,
push : { enabled : false , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
post _published : {
2021-09-07 15:45:21 +00:00
email : { enabled : false , disabled : false } ,
push : { enabled : false , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
post _updated : {
2021-09-07 15:45:21 +00:00
email : { enabled : false , disabled : false } ,
push : { enabled : false , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
resource _updated : {
2021-09-07 15:45:21 +00:00
email : { enabled : false , disabled : false } ,
push : { enabled : false , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
member _request : {
2021-09-07 15:45:21 +00:00
email : { enabled : true , disabled : false } ,
push : { enabled : true , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
member _updated : {
2021-09-07 15:45:21 +00:00
email : { enabled : false , disabled : false } ,
push : { enabled : false , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
user _email _password _updated : {
2021-09-07 15:45:21 +00:00
email : { enabled : true , disabled : true } ,
push : { enabled : false , disabled : true } ,
2021-06-01 16:08:03 +00:00
} ,
event _comment _mention : {
2021-09-07 15:45:21 +00:00
email : { enabled : true , disabled : false } ,
push : { enabled : true , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
discussion _mention : {
2021-09-07 15:45:21 +00:00
email : { enabled : true , disabled : false } ,
push : { enabled : false , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
event _new _comment : {
2021-09-07 15:45:21 +00:00
email : { enabled : true , disabled : false } ,
push : { enabled : false , disabled : false } ,
2021-06-01 16:08:03 +00:00
} ,
} ;
notificationTypes : NotificationType [ ] = [
{
label : this . $t ( "Mentions" ) as string ,
subtypes : [
{
id : "event_comment_mention" ,
label : this . $t (
"I've been mentionned in a comment under an event"
) as string ,
} ,
{
id : "discussion_mention" ,
label : this . $t (
"I've been mentionned in a group discussion"
) as string ,
} ,
] ,
} ,
{
label : this . $t ( "Participations" ) as string ,
subtypes : [
{
id : "participation_event_updated" ,
label : this . $t ( "An event I'm going to has been updated" ) as string ,
} ,
{
id : "participation_event_comment" ,
label : this . $t (
"An event I'm going to has posted an announcement"
) as string ,
} ,
] ,
} ,
{
label : this . $t ( "Organizers" ) as string ,
subtypes : [
{
id : "event_new_pending_participation" ,
label : this . $t (
"An event I'm organizing has a new pending participation"
) as string ,
} ,
{
id : "event_new_participation" ,
label : this . $t (
"An event I'm organizing has a new participation"
) as string ,
} ,
{
id : "event_new_comment" ,
label : this . $t ( "An event I'm organizing has a new comment" ) as string ,
} ,
] ,
} ,
{
label : this . $t ( "Group activity" ) as string ,
subtypes : [
{
id : "event_created" ,
label : this . $t (
"An event from one of my groups has been published"
) as string ,
} ,
{
id : "event_updated" ,
label : this . $t (
"An event from one of my groups has been updated or deleted"
) as string ,
} ,
{
id : "discussion_updated" ,
label : this . $t ( "A discussion has been created or updated" ) as string ,
} ,
{
id : "post_published" ,
label : this . $t ( "A post has been published" ) as string ,
} ,
{
id : "post_updated" ,
label : this . $t ( "A post has been updated" ) as string ,
} ,
{
id : "resource_updated" ,
label : this . $t ( "A resource has been created or updated" ) as string ,
} ,
{
id : "member_request" ,
label : this . $t (
"A member requested to join one of my groups"
) as string ,
} ,
{
id : "member_updated" ,
label : this . $t ( "A member has been updated" ) as string ,
} ,
] ,
} ,
{
label : this . $t ( "User settings" ) as string ,
subtypes : [
{
id : "user_email_password_updated" ,
label : this . $t ( "You changed your email or password" ) as string ,
} ,
] ,
} ,
] ;
2021-09-07 15:45:21 +00:00
get userNotificationValues ( ) : Record <
string ,
Record < IActivitySettingMethod , { enabled : boolean ; disabled : boolean } >
> {
2021-06-01 16:08:03 +00:00
return this . loggedUser . activitySettings . reduce ( ( acc , activitySetting ) => {
acc [ activitySetting . key ] = acc [ activitySetting . key ] || { } ;
acc [ activitySetting . key ] [ activitySetting . method ] =
2021-09-07 15:45:21 +00:00
acc [ activitySetting . key ] [ activitySetting . method ] || { } ;
acc [ activitySetting . key ] [ activitySetting . method ] . enabled =
2021-06-01 16:08:03 +00:00
activitySetting . enabled ;
return acc ;
2021-09-07 15:45:21 +00:00
} , { } as Record < string , Record < IActivitySettingMethod , { enabled : boolean ; disabled : boolean } > > ) ;
2021-06-01 16:08:03 +00:00
}
2021-09-07 15:45:21 +00:00
get notificationValues ( ) : Record <
string ,
Record < IActivitySettingMethod , { enabled : boolean ; disabled : boolean } >
> {
const values = merge (
this . defaultNotificationValues ,
this . userNotificationValues
) ;
for ( const value in values ) {
if ( ! this . canShowWebPush ) {
values [ value ] . push . disabled = true ;
}
}
return values ;
2021-06-01 16:08:03 +00:00
}
2021-06-26 13:23:22 +00:00
async mounted ( ) : Promise < void > {
2020-06-08 10:28:19 +00:00
this . notificationPendingParticipationValues = {
2020-11-06 10:34:32 +00:00
[ INotificationPendingEnum . NONE ] : this . $t ( "Do not receive any mail" ) ,
2020-11-30 09:24:11 +00:00
[ INotificationPendingEnum . DIRECT ] : this . $t (
"Receive one email per request"
) ,
2020-11-06 10:34:32 +00:00
[ INotificationPendingEnum . ONE _HOUR ] : this . $t ( "Hourly email summary" ) ,
[ INotificationPendingEnum . ONE _DAY ] : this . $t ( "Daily email summary" ) ,
2021-06-26 13:23:22 +00:00
[ INotificationPendingEnum . ONE _WEEK ] : this . $t ( "Weekly email summary" ) ,
} ;
this . groupNotificationsValues = {
[ INotificationPendingEnum . NONE ] : this . $t ( "Do not receive any mail" ) ,
[ INotificationPendingEnum . DIRECT ] : this . $t (
"Receive one email for each activity"
) ,
[ INotificationPendingEnum . ONE _HOUR ] : this . $t ( "Hourly email summary" ) ,
[ INotificationPendingEnum . ONE _DAY ] : this . $t ( "Daily email summary" ) ,
[ INotificationPendingEnum . ONE _WEEK ] : this . $t ( "Weekly email summary" ) ,
2020-06-08 10:28:19 +00:00
} ;
2021-06-26 13:23:22 +00:00
this . canShowWebPush = await this . checkCanShowWebPush ( ) ;
2020-06-08 10:28:19 +00:00
}
2020-06-11 08:58:23 +00:00
@ Watch ( "loggedUser" )
2020-10-06 13:36:19 +00:00
setSettings ( ) : void {
2020-06-11 08:58:23 +00:00
if ( this . loggedUser && this . loggedUser . settings ) {
this . notificationOnDay = this . loggedUser . settings . notificationOnDay ;
this . notificationEachWeek = this . loggedUser . settings . notificationEachWeek ;
2021-05-17 17:01:08 +00:00
this . notificationBeforeEvent =
this . loggedUser . settings . notificationBeforeEvent ;
this . notificationPendingParticipation =
this . loggedUser . settings . notificationPendingParticipation ;
2021-06-26 13:23:22 +00:00
this . groupNotifications = this . loggedUser . settings . groupNotifications ;
2020-06-11 08:58:23 +00:00
}
}
2020-10-06 13:36:19 +00:00
async updateSetting ( variables : Record < string , unknown > ) : Promise < void > {
2020-02-18 07:57:00 +00:00
await this . $apollo . mutate < { setUserSettings : string } > ( {
mutation : SET _USER _SETTINGS ,
variables ,
2021-06-01 16:08:03 +00:00
refetchQueries : [ { query : USER _NOTIFICATIONS } ] ,
2020-02-18 07:57:00 +00:00
} ) ;
}
2021-03-26 18:01:55 +00:00
tokenToURL ( token : string , format : string ) : string {
return ` ${ window . location . origin } /events/going/ ${ token } / ${ format } ` ;
}
copyURL ( e : Event , url : string , format : "ics" | "atom" ) : void {
if ( navigator . clipboard ) {
e . preventDefault ( ) ;
navigator . clipboard . writeText ( url ) ;
this . showCopiedTooltip [ format ] = true ;
setTimeout ( ( ) => {
this . showCopiedTooltip [ format ] = false ;
} , 2000 ) ;
}
}
openRegenerateFeedTokensConfirmation ( ) : void {
this . $buefy . dialog . confirm ( {
type : "is-warning" ,
title : this . $t ( "Regenerate new links" ) as string ,
message : this . $t (
"You'll need to change the URLs where there were previously entered."
) as string ,
confirmText : this . $t ( "Regenerate new links" ) as string ,
cancelText : this . $t ( "Cancel" ) as string ,
onConfirm : ( ) => this . regenerateFeedTokens ( ) ,
} ) ;
}
async regenerateFeedTokens ( ) : Promise < void > {
if ( this . feedTokens . length < 1 ) return ;
await this . deleteFeedToken ( this . feedTokens [ 0 ] . token ) ;
const newToken = await this . createNewFeedToken ( ) ;
this . feedTokens . pop ( ) ;
this . feedTokens . push ( newToken ) ;
}
async generateFeedTokens ( ) : Promise < void > {
const newToken = await this . createNewFeedToken ( ) ;
this . feedTokens . push ( newToken ) ;
}
2021-05-06 16:39:59 +00:00
async subscribeToWebPush ( ) : Promise < void > {
2021-05-12 16:30:02 +00:00
try {
2021-06-26 13:23:22 +00:00
if ( this . canShowWebPush ) {
2021-05-12 16:30:02 +00:00
const subscription = await subscribeUserToPush ( ) ;
if ( subscription ) {
const subscriptionJSON = subscription ? . toJSON ( ) ;
2021-06-28 07:38:35 +00:00
await this . $apollo . mutate ( {
2021-05-12 16:30:02 +00:00
mutation : REGISTER _PUSH _MUTATION ,
variables : {
endpoint : subscriptionJSON . endpoint ,
auth : subscriptionJSON ? . keys ? . auth ,
p256dh : subscriptionJSON ? . keys ? . p256dh ,
} ,
} ) ;
this . subscribed = true ;
2021-06-24 09:17:30 +00:00
} else {
this . $notifier . error (
this . $t ( "Error while subscribing to push notifications" ) as string
) ;
2021-05-12 16:30:02 +00:00
}
} else {
2021-06-28 07:38:35 +00:00
console . error ( "can't do webpush" ) ;
2021-05-12 16:30:02 +00:00
}
} catch ( e ) {
console . error ( e ) ;
}
}
async unsubscribeToWebPush ( ) : Promise < void > {
try {
const endpoint = await unsubscribeUserToPush ( ) ;
if ( endpoint ) {
2021-05-06 16:39:59 +00:00
const { data } = await this . $apollo . mutate ( {
2021-05-12 16:30:02 +00:00
mutation : UNREGISTER _PUSH _MUTATION ,
2021-05-06 16:39:59 +00:00
variables : {
2021-05-12 16:30:02 +00:00
endpoint ,
2021-05-06 16:39:59 +00:00
} ,
} ) ;
console . log ( data ) ;
2021-05-12 16:30:02 +00:00
this . subscribed = false ;
2021-05-06 16:39:59 +00:00
}
2021-05-12 16:30:02 +00:00
} catch ( e ) {
console . error ( e ) ;
2021-05-06 16:39:59 +00:00
}
}
2021-06-26 13:23:22 +00:00
async checkCanShowWebPush ( ) : Promise < boolean > {
2021-08-11 09:16:03 +00:00
try {
if ( ! window . isSecureContext || ! ( "serviceWorker" in navigator ) )
return Promise . resolve ( false ) ;
const registration = await navigator . serviceWorker . getRegistration ( ) ;
return registration !== undefined ;
} catch ( e ) {
console . error ( e ) ;
2021-06-26 13:23:22 +00:00
return Promise . resolve ( false ) ;
2021-08-11 09:16:03 +00:00
}
2021-05-06 16:39:59 +00:00
}
async created ( ) : Promise < void > {
this . subscribed = await this . isSubscribed ( ) ;
}
2021-06-01 16:08:03 +00:00
async updateNotificationValue (
key : string ,
method : string ,
enabled : boolean
) : Promise < void > {
await this . $apollo . mutate ( {
mutation : UPDATE _ACTIVITY _SETTING ,
variables : {
key ,
method ,
enabled ,
userId : this . loggedUser . id ,
} ,
} ) ;
}
2021-05-06 16:39:59 +00:00
private async isSubscribed ( ) : Promise < boolean > {
2021-08-11 09:16:03 +00:00
try {
if ( ! ( "serviceWorker" in navigator ) ) return Promise . resolve ( false ) ;
const registration = await navigator . serviceWorker . getRegistration ( ) ;
return ( await registration ? . pushManager ? . getSubscription ( ) ) != null ;
} catch ( e ) {
console . error ( e ) ;
return Promise . resolve ( false ) ;
}
2021-05-06 16:39:59 +00:00
}
2021-03-26 18:01:55 +00:00
private async deleteFeedToken ( token : string ) : Promise < void > {
await this . $apollo . mutate ( {
mutation : DELETE _FEED _TOKEN ,
variables : { token } ,
} ) ;
}
private async createNewFeedToken ( ) : Promise < IFeedToken > {
const { data } = await this . $apollo . mutate ( {
mutation : CREATE _FEED _TOKEN ,
} ) ;
return data . createFeedToken ;
}
2020-03-12 13:29:21 +00:00
}
2020-02-18 07:57:00 +00:00
< / script >
2020-06-16 14:15:38 +00:00
< style lang = "scss" scoped >
. field {
& : not ( : last - child ) {
margin - bottom : 1.5 rem ;
}
a . change - timezone {
2020-06-17 13:54:24 +00:00
color : $primary ;
2020-06-16 14:15:38 +00:00
text - decoration : underline ;
text - decoration - color : # fea72b ;
text - decoration - thickness : 2 px ;
margin - left : 5 px ;
}
}
2021-03-26 18:01:55 +00:00
: : v - deep . buttons > * : not ( : last - child ) . button {
margin - right : 0.5 rem ;
}
2020-06-16 14:15:38 +00:00
< / style >