settings modal

src/components/TopBar/Settings/AccountSettings.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { user } from '@/composables/useFirebase'
+import { format } from 'date-fns'
+
+const verificationEmailSent = ref(false)
+const sendVerificationMail = () => {
+  if (!user.value) throw Error("User doesn't exist, can't send verification email")
+  user.value.sendEmailVerification()
+  verificationEmailSent.value = true
+}
+</script>
+<template>
+  <UIModal size="lg">
+    <template #activator="{ open }">
+      <UIDropdownItem @click="open">
+        <i class="fa-fw fa-solid fa-sliders" />
+        Settings
+      </UIDropdownItem>
+    </template>
+    <template #title>
+      <i class="fa-fw fa-solid fa-sliders mr-2" />
+      Settings
+    </template>
+    <template #default>
+      <div class="space-y-2">
+        <UICard>
+          <template #title>Account</template>
+          <template #default>
+            <div class="w-full flex-row sm:flex">
+              <div class="font-bold sm:w-4/12">E-mail address</div>
+              <div>{{ user?.email }}</div>
+            </div>
+            <div class="w-full flex-row sm:flex">
+              <div class="font-bold sm:w-4/12">Verified</div>
+              <div class="col-auto">
+                <UIBadge :color="user?.emailVerified ? 'success' : 'warning'">
+                  {{ user?.emailVerified ? 'Verified' : 'Not yet verified' }}
+                </UIBadge>
+                <UIButton
+                  size="sm"
+                  class="ml-2"
+                  @click="sendVerificationMail"
+                  v-if="!user?.emailVerified"
+                  :disabled="verificationEmailSent"
+                >
+                  {{
+                    verificationEmailSent
+                      ? 'Verification email sent'
+                      : 'Request new verification email'
+                  }}
+                </UIButton>
+              </div>
+            </div>
+            <div class="w-full flex-row sm:flex">
+              <div class="font-bold sm:w-4/12">Account creation date</div>
+              <div>
+                {{ format(Date.parse(user?.metadata?.creationTime || ''), 'dd/MM/yyyy') }}
+              </div>
+            </div>
+          </template>
+        </UICard>
+        <UICard>
+          <template #title>Notes</template>
+          <template #default>
+            <div class="w-full flex-row sm:flex items-center">
+              <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>
+            </div>
+            <div class="w-full flex-row sm:flex items-center">
+              <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>
+            </div>
+            <div class="w-full flex-row sm:flex items-center">
+              <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>
+        </UICard>
+      </div>
+    </template>
+  </UIModal>
+</template>