enable/disable e2e encryption

src/components/TopBar/Settings/AccountSettings.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { user } from '@/composables/useFirebase'
+import { encryptionKey, enableEncryption, disableEncryption } from '@/composables/useEncryption'
+import { notes } from '@/composables/useNotes'
 import { format } from 'date-fns'
+import JSZip from 'jszip'
+import FileSaver from 'file-saver'
 
 const verificationEmailSent = ref(false)
 const sendVerificationMail = () => {
@@ -8,18 +12,49 @@ const sendVerificationMail = () => {
   user.value.sendEmailVerification()
   verificationEmailSent.value = true
 }
+
+const exportNotes = async () => {
+  const zip = new JSZip()
+  notes.value.forEach((note) => {
+    zip.file(`${note.title}-${note.id}.md`, note.content)
+  })
+  const blob = await zip.generateAsync({ type: 'blob' })
+  const currentDate = format(new Date(), 'yyyyMMdd')
+  FileSaver.saveAs(blob, `contexted-${user.value?.email}-${currentDate}.zip`)
+}
+
+const showEncryptionDialog = ref(false)
+watch(showEncryptionDialog, () => {
+  passphrase.value = ''
+})
+const passphrase = ref('')
+const toggleEncryptionError = ref('')
+
+const encryptionEnabled = computed(() => Boolean(encryptionKey.value))
+
+const toggleEncryption = async () => {
+  const result = encryptionEnabled.value
+    ? await disableEncryption(passphrase.value)
+    : await enableEncryption(passphrase.value)
+  if (typeof result === 'string') {
+    toggleEncryptionError.value = result
+  } else {
+    toggleEncryptionError.value = ''
+    showEncryptionDialog.value = false
+  }
+}
 </script>
 <template>
   <UIModal size="lg">
     <template #activator="{ open }">
       <UIDropdownItem @click="open">
         <i class="fa-fw fa-solid fa-sliders" />
-        Settings
+        Account settings
       </UIDropdownItem>
     </template>
     <template #title>
       <i class="fa-fw fa-solid fa-sliders mr-2" />
-      Settings
+      Account settings
     </template>
     <template #default>
       <div class="space-y-2">
@@ -62,17 +97,75 @@ const sendVerificationMail = () => {
         <UICard>
           <template #title>Notes</template>
           <template #default>
-            <div class="w-full flex-row sm:flex items-center">
+            <div class="items-top w-full flex-row sm:flex">
               <div class="font-bold sm:w-4/12">Export notes</div>
-              <UIButton size="sm" color="secondary"><i class="fa-fw fa-solid fa-file-export mr-2"></i>Export notes</UIButton>
+              <UIButton size="sm" @click="exportNotes">
+                <i class="fa-fw fa-solid fa-file-export mr-2"></i>
+                Export notes
+              </UIButton>
             </div>
-            <div class="w-full flex-row sm:flex items-center">
+            <div class="items-top w-full flex-row sm:flex">
               <div class="font-bold sm:w-4/12">Delete account</div>
-              <UIButton size="sm" color="error"><i class="fa-fw fa-solid fa-trash mr-2"></i>Delete account</UIButton>
+              <UIButton size="sm" color="error">
+                <i class="fa-fw fa-solid fa-trash mr-2"></i>
+                Delete account
+              </UIButton>
             </div>
-            <div class="w-full flex-row sm:flex items-center">
+            <div class="items-top w-full flex-row sm:flex">
               <div class="font-bold sm:w-4/12">End-to-end encryption</div>
-              <UIButton size="sm" color="secondary"><i class="fa-fw fa-solid fa-key mr-2"></i>Enable end-to-end encryption</UIButton>
+              <div>
+                <template v-if="!encryptionEnabled">
+                  <UIButton
+                    size="sm"
+                    @click="showEncryptionDialog = true"
+                    v-if="showEncryptionDialog === false"
+                  >
+                    <i class="fa-fw fa-solid fa-key mr-2"></i>
+                    Enable end-to-end encryption
+                  </UIButton>
+                </template>
+                <template v-else>
+                  <UIButton
+                    size="sm"
+                    @click="showEncryptionDialog = true"
+                    v-if="showEncryptionDialog === false"
+                  >
+                    <i class="fa-fw fa-solid fa-key mr-2"></i>
+                    Disable end-to-end encryption
+                  </UIButton>
+                </template>
+                <UIAlert color="info" density="compact" v-if="showEncryptionDialog">
+                  <div class="space-y-2">
+                    <div>
+                      Enter your passphrase to
+                      {{ encryptionEnabled ? 'disable' : 'enable' }}
+                      encryption
+                    </div>
+                    <UIInputText
+                      size="sm"
+                      type="password"
+                      :color="toggleEncryptionError ? 'error' : 'regular'"
+                      v-model="passphrase"
+                      class="w-full"
+                    />
+                    <UIAlert density="compact" color="error" v-if="toggleEncryptionError">
+                      <i class="fa-solid fa-triangle-exclamation"></i>
+                      {{ toggleEncryptionError }}
+                    </UIAlert>
+                    <div class="flex justify-end space-x-2">
+                      <UIButton size="sm" @click="showEncryptionDialog = false">Close</UIButton>
+                      <UIButton
+                        :disabled="passphrase.length === 0"
+                        size="sm"
+                        color="primary"
+                        @click="toggleEncryption"
+                      >
+                        {{ encryptionEnabled ? 'Disable' : 'Enable' }} encryption
+                      </UIButton>
+                    </div>
+                  </div>
+                </UIAlert>
+              </div>
             </div>
           </template>
         </UICard>