From 95359c792a8da71c4c63ce4e1d7059ec4aa48282 Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Sat, 20 May 2023 07:13:06 +0200
Subject: [PATCH] auth loader

---
 src/components/Auth.vue   |  7 ++++++-
 src/components/Modal.vue  | 11 ++++++++++-
 src/components/TopBar.vue |  5 +++--
 vite.config.ts            |  2 +-
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/Auth.vue b/src/components/Auth.vue
index de3f0df..2609ce1 100644
--- a/src/components/Auth.vue
+++ b/src/components/Auth.vue
@@ -4,6 +4,10 @@ import 'firebase/compat/auth'
 import * as firebaseui from 'firebaseui'
 import 'firebaseui/dist/firebaseui.css'
 
+const props = defineProps<{
+  authenticating: boolean
+}>()
+
 const emit = defineEmits<{
   signedIn: [authResult: any]
 }>()
@@ -35,5 +39,6 @@ const uiConfig = {
 onMounted(() => ui.start('#auth', uiConfig))
 </script>
 <template>
-  <div id="auth"></div>
+  <div id="auth" v-show="!props.authenticating"></div>
+  <progress v-show="props.authenticating" class="progress progress-primary w-full"></progress>
 </template>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index ba291a2..c0efd7b 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core'
 
-const show = defineModel<boolean>({ local: true, default: false })
+const props = withDefaults(
+  defineProps<{
+    open: boolean
+  }>(),
+  {
+    open: false
+  }
+)
+
+const show = ref<boolean>(props.open)
 
 const modal = ref<HTMLElement | null>(null)
 const modalBox = ref(null)
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 5a3698c..8514914 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -19,6 +19,7 @@ const signedIn = ref<boolean>(false)
 const closeAuthModal = async (close: () => Promise<boolean>) => {
   await close()
   signedIn.value = true
+  redirectPending.value = false
 }
 watch(user, () => {
   if (!user.value) signedIn.value = false
@@ -48,12 +49,12 @@ const redirectPending = ref<boolean>(isPendingRedirect())
         >
           <i class="fas fa-plus-circle text-[1.1rem]" />
         </button>
-        <Modal v-if="!signedIn" v-model="redirectPending">
+        <Modal v-if="!signedIn" :open="redirectPending">
           <template #activator="{ open }">
             <button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button>
           </template>
           <template #default="{ close }">
-            <Auth @signedIn="closeAuthModal(close)" />
+            <Auth :authenticating="redirectPending" @signedIn="closeAuthModal(close)" />
           </template>
           <template #actions="{ close }">
             <button class="btn-sm btn" @click="close">Close</button>
diff --git a/vite.config.ts b/vite.config.ts
index bef3597..044204d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,7 +12,7 @@ const require = createRequire(import.meta.url)
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue({ script: { defineModel: true } }),
+    vue(),
     AutoImport({ imports: ['vue'] }),
     Components(),
     ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') })