Fixed small issues

frontend/app.vue

@@ -1,25 +1,5 @@
 <template>
-  <div v-if="!showInstallGuide">
+  <div v-if="showInstallGuide !== null && showInstallGuide" class="bg-neutral-1100 dark:bg-neutral-900 h-screen flex flex-col px-5 text-center text-black dark:text-gray-200">
-    <div v-if="!userStore.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="userStore.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>
-  </div>
-  <div v-else class="bg-neutral-1100 dark:bg-neutral-900 h-screen flex flex-col px-5 text-center text-black dark:text-gray-200">
     <h1 class="font-bold text-3xl text-center mb-10 mt-20 text-primary">Reddingsbrigade Waddinxveen</h1>
     <p class="mb-10">Om gebruik te maken van de WRB App moet je deze installeren</p>
     <h2 class="font-bold">Op een iPhone:</h2>
@@ -33,13 +13,31 @@
     </ol>
     <i>Als deze optie er niet is, gebruik dan de chrome browser</i>
   </div>
+  <div v-else-if="userStore.userLoaded">
+    <div v-if="userStore.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>
+  <div v-else 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>
 </template>
 
 <script setup>
 import { Device } from '@capacitor/device';
 
 const userStore = useUserStore()
-const showInstallGuide = ref(true)
+const showInstallGuide = ref(null)
 
 onMounted(async () => {
   userStore.init()
@@ -50,8 +48,11 @@ onMounted(async () => {
       document.getElementsByClassName('top-right')[0].classList.add('toastios')
     } else if (info.platform === 'web' && process.client && 'serviceWorker' in navigator && window.isSecureContext) {
       if (window.matchMedia('(display-mode: standalone)').matches) showInstallGuide.value = false
+      else showInstallGuide.value = true
 
       registerServiceWorker()
+    } else {
+      showInstallGuide.value = true
     }
   });
 })

frontend/components/Login.vue

@@ -123,6 +123,7 @@ const submitCreateForm = () => {
           email: form.value.email,
           relatiecodes: [form.value.password.toUpperCase()],
           allRelatiecodes: data.value.relatiecodes,
+          id: userCredential.user.uid,
         });
 
         data.value.persons.forEach(person => {

frontend/stores/usersStore.js

@@ -22,7 +22,7 @@ export const useUsersStore = defineStore('users', () => {
   }
 
   const getUsers = async () => {
-    if (users[0]) return
+    if (users.value[0]) return
 
     try {
       const querySnapshot = await getDocs(collection(db, "users"));