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>

src/main.ts

@@ -5,6 +5,7 @@ import App from './App.vue'
 import { setDefaultNotes } from '@/composables/useNotes'
 import { defaultNotes } from '@/utils/defaultNotes'
 import { usePreferredDark, useFavicon } from '@vueuse/core'
+import '@/plugins/firebase'
 
 const isDark = usePreferredDark()
 const favicon = computed(() => (isDark.value ? '/contexted-white.ico' : '/contexted-black.ico'))

src/plugins/firebase.ts

@@ -0,0 +1,22 @@
+// import { initializeApp } from 'firebase/app'
+import firebase from 'firebase/compat/app'
+// import { getAnalytics } from "firebase/analytics";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+  databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
+  measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID
+}
+
+// Initialize Firebase
+export const firebaseApp = firebase.initializeApp(firebaseConfig)
+// const analytics = getAnalytics(app);

src/utils/firebase.ts

@@ -1,15 +0,0 @@
-import { initializeApp } from 'firebase/app'
-
-// TODO: Replace the following with your app's Firebase project configuration
-const firebaseConfig: any = {
-  apiKey: import.meta.env.VUE_APP_FIREBASE_API_KEY,
-  authDomain: import.meta.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
-  databaseURL: import.meta.env.VUE_APP_FIREBASE_DATABASE_URL,
-  projectId: import.meta.env.VUE_APP_FIREBASE_PROJECT_ID,
-  storageBucket: import.meta.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: import.meta.env.VUE_APP_FIREBASE_MESSAGE_SENDER_ID,
-  appId: import.meta.env.VUE_APP_FIREBASE_APP_ID,
-  measurementId: import.meta.env.VUE_APP_FIREBASE_MEASUREMENT_ID,
-}
-
-export const app = initializeApp(firebaseConfig)