From a18491a1a25dc5e73518c48d0895210c8615800e Mon Sep 17 00:00:00 2001
From: Xeovalyte <me+gitea@xeovalyte.dev>
Date: Sun, 22 Jan 2023 15:34:32 +0100
Subject: [PATCH] added more info

---
 frontend/app.vue                          |  95 +++++++--------
 frontend/pages/settings/index.vue         | 136 +++++++++++-----------
 frontend/pages/settings/moreinfo.vue      |  36 ++++++
 frontend/pages/settings/privacypolicy.vue |  32 ++---
 4 files changed, 168 insertions(+), 131 deletions(-)
 create mode 100644 frontend/pages/settings/moreinfo.vue

diff --git a/frontend/app.vue b/frontend/app.vue
index 6537447..457fb93 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -48,61 +48,61 @@ const users = ref([])
 const messaging = ref(null)
 
 onMounted(() => {
-    auth.value = getAuth()
+  auth.value = getAuth()
 
-    if (process.client) {
-      if ('serviceWorker' in navigator && window.isSecureContext) {
-        Device.getInfo().then(info => {
-          if (info.platform === 'web') registerSW()
-        });
-        
+  if (process.client) {
+    if ('serviceWorker' in navigator && window.isSecureContext) {
+      Device.getInfo().then(info => {
+        if (info.platform === 'web') registerSW()
+      });
+      
+    }
+  }
+
+  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 = []
     }
 
-    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
-    })
+    userLoaded.value = true
+  })
 })
 
 const getPersons = async (persons) => {
-    userPersons.value = [];
+  userPersons.value = [];
 
-    for (let i = 0; i < persons.length; i++) {
-        const docRef = doc(db, "ledenlijst", persons[i]);
-        const docSnap = await getDoc(docRef);
+  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())
-        }
+    if (docSnap.exists()) {
+      userPersons.value.push(docSnap.data())
     }
+  }
 }
 
 const setupNotifications = () => {
@@ -173,7 +173,7 @@ const registerFCM = () => {
     if (currentToken) {
       console.log(currentToken)
 
-      await useFetch('/api/subscribetotopic', {
+      const { error} = await useFetch('/api/subscribetotopic', {
         method: 'post',
         body: { topic: 'all', registrationToken: currentToken } 
       })
@@ -183,6 +183,7 @@ const registerFCM = () => {
         return toast.error('Error tijdens het registreren van push notifications')
       }
 
+      registrationToken.value = currentToken
       console.log('Subscribed to topic!')
     } else {
       // Show permission request UI
@@ -220,7 +221,7 @@ const logDeviceInfo = async () => {
 
 const ledenlijst = ref([])
 
-provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth, users, userAllPersons, getPersons, calEvents, news, registrationToken, contestTimes, competitors })
+provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth, users, userAllPersons, getPersons, calEvents, news, registrationToken, contestTimes, competitors, registrationToken })
 </script>
 
 <style scoped>
diff --git a/frontend/pages/settings/index.vue b/frontend/pages/settings/index.vue
index 9ddf264..f559eca 100644
--- a/frontend/pages/settings/index.vue
+++ b/frontend/pages/settings/index.vue
@@ -1,90 +1,90 @@
 <template>
-    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
-        <div>
-            <h1 class="text-xl ml-2 font-bold">Info</h1>
-            <div class="container">
-                <div class="item">
-                    Email: <b>{{ user.email }}</b>
-                </div>
-                <div class="divider" />
-                <div class="item">
-                    Personen: <b>{{ userPersons.map(a => a.fullName).join(', ')}}</b>
-                </div>
-                <div class="divider" />
-                <div class="item">
-                    Groepen: <b>{{ groups.join(', ') }}</b>
-                </div>
-                <div v-if="userPersons.map(a => a.diploma).filter(n => n !== '').join('')" class="divider" />
-                <div v-if="userPersons.map(a => a.diploma).filter(n => n !== '').join('')" class="item">
-                    Diploma: <b>{{ userPersons.map(a => a.diploma).filter(n => n !== '').join(', ')}}</b>
-                </div>
-                <div class="divider" />
-                <NuxtLink to="/settings/privacypolicy" class="item-hover py-2 rounded-t flex items-center">
-                    <span>Privacybeleid</span>
-                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
-                </NuxtLink>
-            </div>
+  <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
+    <div>
+      <h1 class="text-xl ml-2 font-bold">Info</h1>
+      <div class="container">
+        <div class="item">
+          Email: <b>{{ user.email }}</b>
         </div>
-        <div>
-            <h1 class="text-xl ml-2 font-bold">Account</h1>
-            <div class="container">
-                <NuxtLink to="/settings/config/managerelatiecodes" class="item-hover py-2 rounded-t flex items-center">
-                    <span>Beheer Personen</span>
-                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
-                </NuxtLink>
-                <div class="divider" />
-                <NuxtLink to="/settings/config/changepassword" class="item-hover py-2 flex items-center">
-                    <span>Wachtwoord Wijzigen</span>
-                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
-                </NuxtLink>
-                <div class="divider" />
-                <NuxtLink to="/settings/config/changeemail" class="item-hover py-2 flex items-center">
-                    <span>Email Wijzigen</span>
-                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
-                </NuxtLink>
-                <div class="divider" />
-                <div @click="logout" class="item-hover rounded-b flex items-center">
-                    Uitloggen 
-                </div>
-            </div>
+        <div class="divider" />
+        <div class="item">
+          Personen: <b>{{ userPersons.map(a => a.fullName).join(', ')}}</b>
         </div>
-        <div v-if="userData.admin">
-            <h1 class="text-xl ml-2 font-bold">Admin</h1>
-            <div class="container">
-                <NuxtLink to="/settings/admin/users" class="rounded-t item-hover py-2 flex items-center">
-                    <span>Beheer gebruikers</span>
-                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
-                </NuxtLink>
-                <div class="divider" />
-                <NuxtLink to="/settings/admin/ledenlijst" class="rounded-b item-hover py-2 flex items-center">
-                    <span>Ledenlijst</span>
-                    <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
-                </NuxtLink>
-            </div>
+        <div class="divider" />
+        <div class="item">
+          Groepen: <b>{{ groups.join(', ') }}</b>
         </div>
-        <div>
-            <h2 class="text-center font-bold">Gemaakt door <u><a href="https://xeovalyte.com/">Timo Boomers</a></u></h2>
+        <div v-if="userPersons.map(a => a.diploma).filter(n => n !== '').join('')" class="divider" />
+        <div v-if="userPersons.map(a => a.diploma).filter(n => n !== '').join('')" class="item">
+          Diploma: <b>{{ userPersons.map(a => a.diploma).filter(n => n !== '').join(', ')}}</b>
         </div>
+        <div class="divider" />
+        <NuxtLink to="/settings/moreinfo" class="item-hover py-2 rounded-t flex items-center">
+          <span>Meer Informatie</span>
+          <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+        </NuxtLink>
+      </div>
     </div>
+    <div>
+      <h1 class="text-xl ml-2 font-bold">Account</h1>
+      <div class="container">
+        <NuxtLink to="/settings/config/managerelatiecodes" class="item-hover py-2 rounded-t flex items-center">
+          <span>Beheer Personen</span>
+          <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+        </NuxtLink>
+        <div class="divider" />
+        <NuxtLink to="/settings/config/changepassword" class="item-hover py-2 flex items-center">
+          <span>Wachtwoord Wijzigen</span>
+          <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+        </NuxtLink>
+        <div class="divider" />
+        <NuxtLink to="/settings/config/changeemail" class="item-hover py-2 flex items-center">
+          <span>Email Wijzigen</span>
+          <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+        </NuxtLink>
+        <div class="divider" />
+        <div @click="logout" class="item-hover rounded-b flex items-center">
+          Uitloggen 
+        </div>
+      </div>
+    </div>
+    <div v-if="userData.admin">
+      <h1 class="text-xl ml-2 font-bold">Admin</h1>
+      <div class="container">
+        <NuxtLink to="/settings/admin/users" class="rounded-t item-hover py-2 flex items-center">
+          <span>Beheer gebruikers</span>
+          <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+        </NuxtLink>
+        <div class="divider" />
+        <NuxtLink to="/settings/admin/ledenlijst" class="rounded-b item-hover py-2 flex items-center">
+          <span>Ledenlijst</span>
+          <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
+        </NuxtLink>
+      </div>
+    </div>
+    <div>
+      <h2 class="text-center font-bold">Gemaakt door <u><a href="https://xeovalyte.com/">Timo Boomers</a></u></h2>
+    </div>
+  </div>
 </template>
 
 <script setup>
 import { signOut } from "firebase/auth";
 
 definePageMeta({
-    title: 'Settings'
+  title: 'Settings'
 })
 
 const { auth, userData, userPersons, user } = inject('firebase')
 
 const groups = computed(() => {
-    return [...new Set(userPersons.value.map(a => a.groups.join()).join().split(','))]
+  return [...new Set(userPersons.value.map(a => a.groups.join()).join().split(','))]
 })
 
 const logout = () => {
-    signOut(auth.value)
-        .catch((error) => {
-            console.log(error)
-        })
+  signOut(auth.value)
+    .catch((error) => {
+      console.log(error)
+    })
 }
 </script>
diff --git a/frontend/pages/settings/moreinfo.vue b/frontend/pages/settings/moreinfo.vue
new file mode 100644
index 0000000..ca6ee02
--- /dev/null
+++ b/frontend/pages/settings/moreinfo.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md text-default text-sm">
+    <div>
+      <h1 class="text-xl ml-2 font-bold">Privacybeleid</h1>
+      <div class="container">
+        <div class="item">
+          <h2 class="font-bold">Privacy</h2>
+          Gegevens binnen deze app worden gebruikt voor de interne organisatie. Via Google analytics wordt bijgehouden welke schermen het meest worden gebruikt. Daarnaast maken wij gebruik van Firebase voor het anoniem verzamelen van gegevens omtrent crashes, bugs en het gebruik van de app.
+          <h2 class="font-bold mt-5">AVG</h2>
+          Sinds 25 mei 2018 is de Algemene verordening gegevensbescherming (AVG) van toepassing waardoor elke vereniging helder moet maken wat zij doen om de privacy van persoonsgegevens te waarborgen. U kunt <a href="https://www.reddingsbrigadewaddinxveen.nl/Doc/201809%20-%20Privacyverklaring%20WRB.pdf" class="underline">hier</a> onze privacy verklaring vinden.
+        </div>
+      </div>
+    </div>
+    <div>
+      <h1 class="text-xl ml-2 font-bold"></h1>
+      <div class="container">
+        <div class="item break-words ">
+            Registration Token: <b>{{ registrationToken }}</b>
+        </div>
+        <div class="divider" />
+        <div class="item break-words ">
+            User ID: <b>{{ userData.id }}</b>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+    title: 'Meer Informatie',
+    key: 'back'
+})
+
+const { registrationToken, userData } = inject('firebase')
+</script>
diff --git a/frontend/pages/settings/privacypolicy.vue b/frontend/pages/settings/privacypolicy.vue
index ebe8032..8a30910 100644
--- a/frontend/pages/settings/privacypolicy.vue
+++ b/frontend/pages/settings/privacypolicy.vue
@@ -1,23 +1,23 @@
 <template>
-    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md text-default text-sm">
-        <h2 class="text-xl font-bold">
-            Privacy
-        </h2>
-        <p>
-          Gegevens binnen deze app worden gebruikt voor de interne organisatie. Via Google analytics wordt bijgehouden welke schermen het meest worden gebruikt. Daarnaast maken wij gebruik van Firebase voor het anoniem verzamelen van gegevens omtrent crashes, bugs en het gebruik van de app.
-        </p>
-        <h2 class="text-xl font-bold">
-            AVG
-        </h2>
-        <p>
-          Sinds 25 mei 2018 is de Algemene verordening gegevensbescherming (AVG) van toepassing waardoor elke vereniging helder moet maken wat zij doen om de privacy van persoonsgegevens te waarborgen. U kunt <a href="https://www.reddingsbrigadewaddinxveen.nl/Doc/201809%20-%20Privacyverklaring%20WRB.pdf" class="underline">hier</a> onze privacy verklaring vinden.
-        </p>
-    </div>
+  <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md text-default text-sm">
+    <h2 class="text-xl font-bold">
+      Privacy
+    </h2>
+    <p>
+      Gegevens binnen deze app worden gebruikt voor de interne organisatie. Via Google analytics wordt bijgehouden welke schermen het meest worden gebruikt. Daarnaast maken wij gebruik van Firebase voor het anoniem verzamelen van gegevens omtrent crashes, bugs en het gebruik van de app.
+    </p>
+    <h2 class="text-xl font-bold">
+      AVG
+    </h2>
+    <p>
+      Sinds 25 mei 2018 is de Algemene verordening gegevensbescherming (AVG) van toepassing waardoor elke vereniging helder moet maken wat zij doen om de privacy van persoonsgegevens te waarborgen. U kunt <a href="https://www.reddingsbrigadewaddinxveen.nl/Doc/201809%20-%20Privacyverklaring%20WRB.pdf" class="underline">hier</a> onze privacy verklaring vinden.
+    </p>
+  </div>
 </template>
 
 <script setup>
 definePageMeta({
-    title: 'Privacybeleid',
-    key: 'back'
+  title: 'Privacybeleid',
+  key: 'back'
 })
 </script>