wrbapp/frontend/app.vue

<template>
    <div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
        Loading
    </div>
    <div v-else>
        <div v-if="isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
            <LayoutTopbar />
            <div class="overflow-y-auto pt-3">
                <NuxtPage />
            </div>
            <LayoutNavbar class="mt-auto" />
        </div>
        <div v-else class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
            <Login />
        </div>
    </div>
</template>

<script setup>
import { doc, getFirestore, serverTimestamp, writeBatch, collection, getDoc } from "firebase/firestore";
import { getAuth, onAuthStateChanged, signInWithEmailAndPassword } from "firebase/auth";
import { getMessaging, getToken, onMessage } from "firebase/messaging";
import { PushNotifications } from '@capacitor/push-notifications';
import { Device } from '@capacitor/device';

const db = getFirestore()
const route = useRoute()

const isAuthenticated = ref(false)
const user = ref('frikandel')
const auth = ref(null)
const userLoaded = ref(false)
const userData = ref(null)
const userPersons = ref([])
const userAllPersons = ref([])
const calEvents = ref([])
const news = ref(null)

const messaging = getMessaging()

onMounted(() => {
    auth.value = getAuth()

    if (process.client) {
      window.addEventListener('load', () => {
        if (!('serviceWorker' in navigator)) {
          throw new Error('serviceWorker is not supported in current browser!')
        }
        navigator.serviceWorker.register('/sw.js')
      })
    }

    onAuthStateChanged(auth.value, async (usr) => {
        if (usr) {
            user.value = usr

            let docRef = doc(db, "users", user.value.uid);
            let docSnap = await getDoc(docRef);

            if (docSnap.exists()) {
                const data = docSnap.data()
                userData.value = data
                getPersons(userData.value.relatiecodes)
            }

            if (!userData.value.sendNews && route.path === '/news/newmessage') navigateTo('/')
            if (!userData.value.admin && route.path.startsWith('/settings/admin')) navigateTo('/')

            isAuthenticated.value = true

            logDeviceInfo()

        } else {
            isAuthenticated.value = false
            user.value = null
            userData.value = null
            userPersons.value = []
        }

        userLoaded.value = true
    })
})

onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);

  const { show } = useWebNotification({
    title: payload.notification.title,
    body: payload.notification.body,
    icon: 'http://localhost:3000/ios/256.png',
    dir: 'auto',
    lang: 'en',
    renotify: true,
    tag: 'wrbapp',
  })

  show()
});

const getPersons = async (persons) => {
    userPersons.value = [];

    for (let i = 0; i < persons.length; i++) {
        const docRef = doc(db, "ledenlijst", persons[i]);
        const docSnap = await getDoc(docRef);

        if (docSnap.exists()) {
            userPersons.value.push(docSnap.data())
        }
    }
}

const setupNotifications = () => {
    console.log('Initializing HomePage');

    // Request permission to use push notifications
    // iOS will prompt user and return if they granted permission or not
    // Android will just grant without prompting
    PushNotifications.requestPermissions().then(result => {
      if (result.receive === 'granted') {
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();
      } else {
        // Show some error
      }
    });

    // On success, we should be able to receive notifications
    PushNotifications.addListener('registration',
      (token) => {
        alert('Push registration success, token: ' + token.value);
      }
    );

    // Some issue with our setup and push will not work
    PushNotifications.addListener('registrationError',
      (error) => {
        alert('Error on registration: ' + JSON.stringify(error));
      }
    );

    // Show us the notification payload if the app is open on our device
    PushNotifications.addListener('pushNotificationReceived',
      (notification) => {
        alert('Push received: ' + JSON.stringify(notification));
      }
    );

    // Method called when tapping on a notification
    PushNotifications.addListener('pushNotificationActionPerformed',
      (notification) => {
        alert('Push action performed: ' + JSON.stringify(notification));
      }
    );
}

const registerFCM = () => {
  const messaging = getMessaging()

  getToken(messaging, { vapidKey: 'BI7l3nyGV6wJcFh7wrwmQ42W7RSXl46bmhXZJmDd4P-0K_JFP0ClTqjO-rr5H5DXBbmVR4kXwxFpUlo_d6cUy4Q' }).then((currentToken) => {
    if (currentToken) {
      console.log(currentToken)
    } else {
      // Show permission request UI
      console.log('No registration token available. Request permission to generate one.');
      // ...
    }
  }).catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
    // ...
  });
}

const logDeviceInfo = async () => {
  const info = await Device.getInfo();

  console.log(info);

  if (info.platform !== 'web') setupNotifications()
  else registerFCM()
};

const ledenlijst = ref([])

provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth, userAllPersons, getPersons, calEvents, news })
</script>