Merge branch 'notifications' into 'master'

Notification issues

See merge request framasoft/mobilizon!961

js/src/graphql/config.ts

@@ -158,7 +158,7 @@ export const PRIVACY = gql`
 `;
 
 export const TIMEZONES = gql`
-  query {
+  query Timezones {
     config {
       timezones
     }
@@ -166,7 +166,7 @@ export const TIMEZONES = gql`
 `;
 
 export const WEB_PUSH = gql`
-  query {
+  query WebPush {
     config {
       webPush {
         enabled

js/src/i18n/en_US.json

@@ -1055,5 +1055,10 @@
   "Send notification e-mails": "Send notification e-mails",
   "Announcements and mentions notifications are always sent straight away.": "Announcements and mentions notifications are always sent straight away.",
   "Weekly email summary": "Weekly email summary",
-  "Receive one email for each activity": "Receive one email for each activity"
+  "Receive one email for each activity": "Receive one email for each activity",
+  "Error while updating participation status inside this browser": "Error while updating participation status inside this browser",
+  "We couldn't save your participation inside this browser. Not to worry, you have successfully confirmed your participation, we just couldn't save it's status in this browser because of a technical issue.": "We couldn't save your participation inside this browser. Not to worry, you have successfully confirmed your participation, we just couldn't save it's status in this browser because of a technical issue.",
+  "This instance hasn't got push notifications enabled.": "This instance hasn't got push notifications enabled.",
+  "enable the feature": "enable the feature",
+  "Ask your instance admin to {enable_feature}.": "Ask your instance admin to {enable_feature}."
 }

js/src/i18n/fr_FR.json

@@ -1146,5 +1146,10 @@
   "Send notification e-mails": "Envoyer des e-mails de notification",
   "Announcements and mentions notifications are always sent straight away.": "Les notifications d'annonces et de mentions sont toujours envoyées directement.",
   "Weekly email summary": "Résumé hebdomadaire par e-mail",
-  "Receive one email for each activity": "Recevoir un e-mail à chaque activité"
+  "Receive one email for each activity": "Recevoir un e-mail à chaque activité",
+  "Error while updating participation status inside this browser": "Erreur lors de la mise à jour du statut de votre participation dans ce navigateur",
+  "We couldn't save your participation inside this browser. Not to worry, you have successfully confirmed your participation, we just couldn't save it's status in this browser because of a technical issue.": "Nous n'avons pas pu sauvegarder votre participation dans ce navigateur. Aucune inquiétude, vous avez bien confirmé votre participation, nous n'avons juste pas pu enregistrer son statut dans ce navigateur à cause d'un souci technique.",
+  "This instance hasn't got push notifications enabled.": "Cette instance n'a pas activé la fonctionnalité de notification push.",
+  "enable the feature": "activer la fonctionnalité",
+  "Ask your instance admin to {enable_feature}.": "Demandez à l'administrateur⋅ice de votre instance d'{enable_feature}."
 }

js/src/services/push-subscription.ts

@@ -22,8 +22,8 @@ export async function subscribeUserToPush(): Promise<PushSubscription | null> {
     apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
 
   const registration = await navigator.serviceWorker.ready;
-  const { data } = await client.mutate<{ config: IConfig }>({
-    mutation: WEB_PUSH,
+  const { data } = await client.query<{ config: IConfig }>({
+    query: WEB_PUSH,
   });
 
   if (data?.config?.webPush?.enabled && data?.config?.webPush?.publicKey) {

js/src/views/Settings/Notifications.vue

@@ -24,12 +24,24 @@
       <b-button
         icon-left="rss"
         @click="subscribeToWebPush"
-        v-else-if="canShowWebPush"
+        v-else-if="canShowWebPush && webPushEnabled"
         >{{ $t("Activate browser push notifications") }}</b-button
       >
-      <span v-else>{{
+      <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-message>
+      <b-message type="is-danger" v-else>{{
         $t("You can't use push notifications in this browser.")
-      }}</span>
+      }}</b-message>
     </section>
     <section>
       <div class="setting-title">
@@ -292,6 +304,7 @@ import {
   UNREGISTER_PUSH_MUTATION,
 } from "@/graphql/webPush";
 import { merge } from "lodash";
+import { WEB_PUSH } from "@/graphql/config";
 
 type NotificationSubType = { label: string; id: string };
 type NotificationType = { label: string; subtypes: NotificationSubType[] };
@@ -306,6 +319,10 @@ type NotificationType = { label: string; subtypes: NotificationSubType[] };
           (token: IFeedToken) => token.actor === null
         ),
     },
+    webPushEnabled: {
+      query: WEB_PUSH,
+      update: (data) => data.config.webPush.enabled,
+    },
   },
   metaInfo() {
     return {
@@ -341,6 +358,8 @@ export default class Notifications extends Vue {
 
   canShowWebPush = false;
 
+  webPushEnabled = false;
+
   notificationMethods = {
     email: this.$t("Email") as string,
     push: this.$t("Push") as string,
@@ -626,8 +645,7 @@ export default class Notifications extends Vue {
         const subscription = await subscribeUserToPush();
         if (subscription) {
           const subscriptionJSON = subscription?.toJSON();
-          console.log("subscription", subscriptionJSON);
-          const { data } = await this.$apollo.mutate({
+          await this.$apollo.mutate({
             mutation: REGISTER_PUSH_MUTATION,
             variables: {
               endpoint: subscriptionJSON.endpoint,
@@ -636,14 +654,13 @@ export default class Notifications extends Vue {
             },
           });
           this.subscribed = true;
-          console.log(data);
         } else {
           this.$notifier.error(
             this.$t("Error while subscribing to push notifications") as string
           );
         }
       } else {
-        console.log("can't do webpush");
+        console.error("can't do webpush");
       }
     } catch (e) {
       console.error(e);
@@ -672,7 +689,6 @@ export default class Notifications extends Vue {
     if (!window.isSecureContext && !("serviceWorker" in navigator))
       return Promise.resolve(false);
     const registration = await navigator.serviceWorker.getRegistration();
-    console.log("registration", registration);
     return registration !== undefined;
   }