wrbapp/frontend/app.vue

<template>
    <div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex justify-center items-center">
        <div>
          <Icon size="4em" name="ion:load-c" class="animate-spin" />
          <h2 class="mt-2 font-bold">Loading...</h2>
        </div>
    </div>
    <div v-else class="">
        <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';
import { useToast } from 'vue-toastification'

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

const isAuthenticated = ref(false)
const user = ref('frikandel')
const registrationToken = ref('')
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 contestTimes = ref(null)
const competitors = ref([])
const users = ref([])

const messaging = ref(null)

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

  Device.getInfo().then(info => {
    if (info.platform === 'ios') document.getElementsByClassName('top-right')[0].classList.add('toastios')
  });

  if (process.client) {
    if ('serviceWorker' in navigator && window.isSecureContext) {
      Device.getInfo().then(info => {
        if (info.platform === 'web') registerSW()
        else document.getElementsByClassName('top-right')[0].classList.add('toastios')
      });
      
    }
  }

  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)
      } else {
        setTimeout(() => window.location.reload(true), 1000)
      }

      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
  })
})

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 {
      toast.error('Error tijdens het registrenen van push notificaties')
    }
  });

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

      const { error } = await useFetch('/api/subscribetotopic', {
        method: 'post',
        body: { topic: 'all', registrationToken: token.value } 
      })
      
      if (error.value) {
        console.log(error.value)
        return toast.error('Error tijdens het krijgen van relateicodes')
      }

      console.log('Subscribed to topic!')
    }
  );

  // Some issue with our setup and push will not work
  PushNotifications.addListener('registrationError',
    (error) => {
      toast.error('Error tijdens het registreren van push notificaties')

      console.log(error)
    }
  );

  // Show us the notification payload if the app is open on our device
  PushNotifications.addListener('pushNotificationReceived',
    (notification) => {

      toast.info(`${notification.title}`, {
        onClick: () => navigateTo('/news')
      })

    }
  );

  // Method called when tapping on a notification
  PushNotifications.addListener('pushNotificationActionPerformed',
    (notification) => {
      navigateTo('/news')
    }
  );
}

const registerFCM = () => {
  getToken(messaging.value, { vapidKey: 'BI7l3nyGV6wJcFh7wrwmQ42W7RSXl46bmhXZJmDd4P-0K_JFP0ClTqjO-rr5H5DXBbmVR4kXwxFpUlo_d6cUy4Q' }).then(async (currentToken) => {
    if (currentToken) {
      console.log(currentToken)

      const { error} = await useFetch('/api/subscribetotopic', {
        method: 'post',
        body: { topic: 'all', registrationToken: currentToken } 
      })

      if (error.value) {
        console.log(error.value)
        return toast.error('Error tijdens het registreren van push notifications')
      }

      registrationToken.value = currentToken
      console.log('Subscribed to topic!')
    } 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 registerSW = () => {
  messaging.value = getMessaging()
  navigator.serviceWorker.register('/sw.js').catch(e => alert(e));

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

    toast.info(`${payload.notification.title}`, {
      onClick: () => navigateTo('/news')
    })

  });
}

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, users, userAllPersons, getPersons, calEvents, news, registrationToken, contestTimes, competitors, registrationToken })
</script>

<style>
.body {
  padding-top: 10px;
  margin-bottom: env(safe-area-inset-bottom);
}

.toastios {
  padding-top: 20px;
}
</style>