settings modal

src/components/TopBar/Settings.vue

@@ -1,61 +1,23 @@
 <script setup lang="ts">
-import { activeNotesSource, availableNotesSources } from '@/composables/useNotes'
-import { signOut as firebaseSignOut } from '@/composables/useFirebase'
 import { OnClickOutside } from '@vueuse/components'
-import { preferredNotesSource } from '@/composables/useSettings'
-
-const sourceLabels: { [source: string]: string } = {
-  local: 'Switch to local notes',
-  firebase: 'Switch to cloud notes'
-}
-
-const signOut = async (close: () => Promise<boolean>) => {
-  await firebaseSignOut()
-  preferredNotesSource.value = null
-  close()
-}
-
-const blur = () => (document.activeElement as HTMLElement)?.blur()
-
-const handleClick = (fn: (...args: any[]) => any) => {
-  blur()
-  fn()
-}
 </script>
 <template>
   <OnClickOutside>
     <UIDropdown class="search-active-hide">
       <template #activator>
-        <UIButton :dropdown="true" size="sm" variant="outline" class="py-1 text-white topbar-button">
+        <UIButton
+          :dropdown="true"
+          size="sm"
+          variant="outline"
+          class="topbar-button py-1 text-white"
+        >
           <i class="fa-fw fa-solid fa-user-gear" />
         </UIButton>
       </template>
       <template #items>
-        <UIDropdownItem
-          v-for="source in availableNotesSources.filter((source) => source !== activeNotesSource)"
-          :key="source"
-          @click="handleClick(() => (preferredNotesSource = source))"
-        >
-          <i class="fa-fw fa-solid fa-database" />
-          {{ sourceLabels[source] }}
-        </UIDropdownItem>
-        <UIModal>
-          <template #activator="{ open }">
-            <UIDropdownItem @click="open">
-              <i class="fa-fw fa-solid fa-right-from-bracket" />
-              Sign out
-            </UIDropdownItem>
-          </template>
-          <template #title>Sign out</template>
-          <template #default>
-            <p>Are you sure want to signout?</p>
-            <p>Your synchronized notes can't be accessed until you sign-in again.</p>
-          </template>
-          <template #actions="{ close }">
-            <UIButton size="sm" @click="close">Cancel</UIButton>
-            <UIButton size="sm" color="primary" @click="signOut(close)">Sign out</UIButton>
-          </template>
-        </UIModal>
+        <NotesSourceSwitcher />
+        <AccountSettings />
+        <SignOut />
       </template>
     </UIDropdown>
   </OnClickOutside>

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>

src/components/TopBar/Settings/NotesSourceSwitcher.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { activeNotesSource, availableNotesSources } from '@/composables/useNotes'
+import { preferredNotesSource } from '@/composables/useSettings'
+
+const sourceLabels: { [source: string]: string } = {
+  local: 'Switch to local notes',
+  firebase: 'Switch to cloud notes'
+}
+
+const blur = () => (document.activeElement as HTMLElement)?.blur()
+
+const handleClick = (fn: (...args: any[]) => any) => {
+  blur()
+  fn()
+}
+</script>
+<template>
+  <UIDropdownItem
+    v-for="source in availableNotesSources.filter((source) => source !== activeNotesSource)"
+    :key="source"
+    @click="handleClick(() => (preferredNotesSource = source))"
+  >
+    <i class="fa-fw fa-solid fa-database" />
+    {{ sourceLabels[source] }}
+  </UIDropdownItem>
+</template>

src/components/TopBar/Settings/SignOut.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { preferredNotesSource } from '@/composables/useSettings'
+import { signOut as firebaseSignOut } from '@/composables/useFirebase'
+
+const signOut = async (close: () => Promise<boolean>) => {
+  await firebaseSignOut()
+  preferredNotesSource.value = null
+  close()
+}
+</script>
+
+<template>
+  <UIModal>
+    <template #activator="{ open }">
+      <UIDropdownItem @click="open">
+        <i class="fa-fw fa-solid fa-right-from-bracket" />
+        Sign out
+      </UIDropdownItem>
+    </template>
+    <template #title>
+      <i class="fa-fw fa-solid fa-right-from-bracket mr-2" />
+      Sign out
+    </template>
+    <template #default>
+      <p>Are you sure want to signout?</p>
+      <p>Your synchronized notes can't be accessed until you sign-in again.</p>
+    </template>
+    <template #actions="{ close }">
+      <UIButton size="sm" @click="close">Cancel</UIButton>
+      <UIButton size="sm" color="primary" @click="signOut(close)">Sign out</UIButton>
+    </template>
+  </UIModal>
+</template>