passphrase prompt

src/App.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { activeNote, updateNote, notes } from '@/composables/useNotes'
+import { activeNote, updateNote, notes, activeNotesSource } from '@/composables/useNotes'
 import { viewModes, activeViewMode } from '@/composables/useViewMode'
+import {
+  getClientKey,
+  getEncryptionKey,
+  setClientKey,
+  passphraseRequired
+} from '@/composables/useEncryption'
 import { windowIsMobile } from '@/utils/helpers'
 import firebase from 'firebase/compat/app'
 import * as firebaseui from 'firebaseui'
@@ -15,7 +21,29 @@ const firebaseAuthUI =
   firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
 provide('firebaseAuthUI', firebaseAuthUI)
 
-const loading = computed(() => notes.value.length === 0)
+watch(
+  activeNotesSource,
+  () => {
+    if (activeNotesSource.value === 'firebase') {
+      getClientKey()
+      getEncryptionKey()
+    }
+  },
+  { immediate: true }
+)
+
+const passphrase = ref('')
+
+const submitPassphrase = (close: () => void) => {
+  const passphraseValid = setClientKey(passphrase.value)
+  if (!passphraseValid) {
+    console.log('passphrase is invalid')
+  } else {
+    close()
+  }
+}
+
+const loading = computed(() => notes.value.length === 0 || passphraseRequired.value)
 provide('loading', loading)
 </script>
 
@@ -31,9 +59,10 @@ provide('loading', loading)
       @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
       @collapse="(collapse) => (sideBarCollapsed = collapse)"
       class="mt-[50px] px-3 py-6"
+      :class="sideBarCollapsed && 'max-sm:hidden'"
     />
     <main
-      class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
+      class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out max-sm:px-4 max-sm:py-2"
       :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar max-sm:hidden'"
     >
       <template v-if="!loading">
@@ -50,4 +79,15 @@ provide('loading', loading)
       <SkeletonNote v-else />
     </main>
   </div>
+  <Modal :open="passphraseRequired" :persistent="true">
+    <template #default>
+      <p>
+        Your notes are encrypted. Please enter your encryption key passphrase to decrypt your notes.
+      </p>
+      <input type="password" class="input-bordered input mt-4 w-full" v-model="passphrase" />
+    </template>
+    <template #actions="{ close }">
+      <button class="btn-primary btn-sm btn" @click="submitPassphrase(close)">Submit</button>
+    </template>
+  </Modal>
 </template>