Added messages

frontend/app.vue

@@ -1,21 +1,37 @@
 <template>
-  <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 v-if="!showInstallGuide">
+    <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="">
-    <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 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>
+    <p class="mb-10">
+      Ga naar <a href="https://apps.apple.com/us/app/waddinxveense-reddingsbrigade/id6443636255" class="underline">deze link</a> en download de app via de App Store
+    </p>
+    <h2 class="font-bold">Op een Android:</h2>
+    <ol class="list-decimal list-inside mb-3">
+      <li>Druk op het opties icoon:<Icon size="1.7em" name="ion:md-more" /></li>
+      <li>En kies voor "Toevoegen aan startscherm" of "App installeren"</li>
+    </ol>
+    <i>Als deze optie er niet is, gebruik dan de chrome browser</i>
   </div>
 </template>
 
@@ -23,22 +39,21 @@
 import { Device } from '@capacitor/device';
 
 const userStore = useUserStore()
+const showInstallGuide = ref(true)
 
 onMounted(async () => {
   userStore.init()
 
   Device.getInfo().then(info => {
-    if (info.platform === 'ios') document.getElementsByClassName('top-right')[0].classList.add('toastios')
-  });
+    if (info.platform === 'ios') {
+      showInstallGuide.value = false;
+      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
 
-  if (process.client) {
-    if ('serviceWorker' in navigator && window.isSecureContext) {
-      Device.getInfo().then(info => {
-        if (info.platform === 'web') registerServiceWorker()
-        else document.getElementsByClassName('top-right')[0].classList.add('toastios')
-      });
+      registerServiceWorker()
     }
-  }
+  });
 })
 </script>
 

frontend/components/Login.vue

@@ -17,6 +17,8 @@
           <input :disabled="disableButtons" type="submit" value="Login" class="btn w-full sm:w-24 mb-1">
           <button @click="forgotPassword" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Wachtwoord vergeten?</button>
         </div>
+
+        <i class="mt-10 text-black dark:text-gray-200">Is dit jouw eerste keer inloggen? Gebruik dan als email het email dat gebruikt is bij de inschrijving en het wachtwoord is uw Lidnummmer / Sportlinknummer</i>
       </form>
       <form v-else @submit.prevent="submitCreateForm" class="flex flex-col">
         <h3 class="text-center text-default text-lg mb-5">Account aanmaken voor <br><b>{{ form.email }}</b></h3>

frontend/composables/notifications.js

@@ -101,8 +101,6 @@ export const setupWebNotifications = () => {
 export const setupNotifications = async () => {
     const info = await Device.getInfo();
 
-    console.log(info);
-
     if (info.platform !== 'web') setupIosNotifications()
     else setupWebNotifications()
 }