add auth modal

src/components/Auth.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import firebase from 'firebase/compat/app'
+import 'firebase/compat/auth'
+import * as firebaseui from 'firebaseui'
+import 'firebaseui/dist/firebaseui.css'
+
+const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
+onMounted(() => {
+  ui.start('#auth', {
+    signInOptions: [firebase.auth.EmailAuthProvider.PROVIDER_ID]
+    // Other config options...
+  })
+})
+</script>
+<template>
+  <div id="auth"></div>
+</template>

src/components/Modal.vue

@@ -6,14 +6,10 @@ const modalBox = ref(null)
 const show = ref(false)
 
 const open = () => (show.value = true)
-const close = async () => {
+const close = () => {
   return new Promise((resolve) => {
     modal.value?.addEventListener('transitionend', () => resolve(true))
     show.value = false
-    // nextTick(() => {
-    //   console.log('done!')
-    //   resolve(true)
-    // })
   })
 }
 
@@ -45,7 +41,7 @@ const onLeave = (el: Element, done: () => void): void => {
           </p>
           <div class="modal-action">
             <slot name="actions" v-bind="slotProps">
-              <button class="btn-sm btn" @click="close">Close</button>
+              <button class="btn-sm btn" @click="close()">Close</button>
             </slot>
           </div>
         </div>

src/components/TopBar.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
+import Auth from '@/components/Auth.vue'
+
 const props = defineProps<{
   sideBarCollapsed: boolean
 }>()
@@ -7,14 +9,17 @@ const props = defineProps<{
 const emit = defineEmits<{
   toggleSideBar: []
 }>()
+
+// const authRef = ref<InstanceType<typeof Auth> | null>(null)
+// const closeAuthModal = (close: () => void) => {
+//   close()
+//   authRef.value?.deleteAuthUi()
+// }
 </script>
 <template>
   <div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
     <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
-      <div
-        class="flex items-center pl-3"
-        :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
-      >
+      <div class="flex items-center pl-3" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'">
         <Hamburger
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"
@@ -33,7 +38,15 @@ const emit = defineEmits<{
         >
           <i class="fas fa-plus-circle text-[1.1rem]" />
         </button>
-        <button class="btn-outline btn-sm btn py-1 text-white">Sign in</button>
+        <Modal>
+          <template #activator="{ open }">
+            <button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button>
+          </template>
+          <template #default><Auth /></template>
+          <template #actions="{ close }">
+            <button class="btn-sm btn" @click="close()">Close</button>
+          </template>
+        </Modal>
       </div>
     </div>
   </div>