feat:#684 - Delete account

src/components/Profile/SettingsTab.vue

@@ -1,15 +1,44 @@
 <template>
   <q-input v-model="userStore.getUser.email" disable label="Email" />
   <q-btn class="full-width q-mt-lg" color="secondary" data-test="logout-button" label="Logout" padding="12px" rounded @click="onLogout" />
+
+  <q-btn
+    class="full-width q-mt-lg"
+    color="negative"
+    data-test="delete-account-button"
+    label="Delete Account"
+    padding="12px"
+    rounded
+    @click="openDeleteConfirmationDialog"
+  />
+
+  <q-dialog v-model="deleteDialog">
+    <q-card>
+      <q-card-section class="q-pb-none">
+        <h6 class="q-my-sm">Delete Account?</h6>
+      </q-card-section>
+      <q-card-section>
+        Hi
+        <strong>{{ userStore.getUser.displayName }}</strong>
+        , are you sure you want to delete your account? This action is irreversible.
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" color="primary" v-close-popup />
+        <q-btn data-test="delete-button" flat label="Delete" color="negative" @click="onDeleteAccount" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup>
 import { useUserStore } from 'app/src/stores'
 import { useRouter } from 'vue-router'
 import { customWeb3modal } from 'src/web3/walletConnect'
+import { ref } from 'vue'
 
 const userStore = useUserStore()
 const router = useRouter()
+const deleteDialog = ref(false)
 
 function onLogout() {
   if (customWeb3modal.getAddress()) {
@@ -18,4 +47,19 @@ function onLogout() {
   userStore.logout()
   router.push({ path: '/profile' })
 }
+
+function openDeleteConfirmationDialog() {
+  deleteDialog.value = true
+}
+
+async function onDeleteAccount() {
+  try {
+    await userStore.deleteOwnAccount()
+    router.push({ path: '/profile' })
+  } catch (error) {
+    console.error('Account deletion failed:', error)
+  } finally {
+    deleteDialog.value = false
+  }
+}
 </script>

src/stores/user.js

@@ -4,7 +4,8 @@ import {
   GoogleAuthProvider,
   signInWithEmailAndPassword,
   signInWithPopup,
-  signOut
+  signOut,
+  getAuth
 } from 'firebase/auth'
 import { collection, doc, getDoc, getDocs, onSnapshot, or, query, runTransaction, setDoc, where } from 'firebase/firestore'
 import { defineStore } from 'pinia'
@@ -245,7 +246,7 @@ export const useUserStore = defineStore('user', {
       } finally {
         this._isLoading = false
       }
-    }
+    },
 
     // async addAllUsers(users) {
     //   await fetch(`${baseURL}/add-all-users`, {
@@ -263,5 +264,44 @@ export const useUserStore = defineStore('user', {
     //   })
     //   this._statsUsers = await allUsers.json()
     // }
+
+    async deleteOwnAccount() {
+      this._isLoading = true
+      try {
+        const currentUser = getAuth().currentUser
+        if (!currentUser) {
+          throw new Error('User is not authenticated.')
+        }
+
+        const userDocRef = doc(db, 'users', currentUser.uid)
+        await deleteDoc(userDocRef)
+
+        await currentUser.delete()
+
+        Notify.create({
+          color: 'positive',
+          message: 'Your account has been deleted successfully.'
+        })
+
+        this.$reset()
+        LocalStorage.remove('user')
+      } catch (error) {
+        console.error('Error deleting account:', error)
+
+        if (error.code === 'auth/requires-recent-login') {
+          Notify.create({
+            color: 'negative',
+            message: 'Please log in again to delete your account.'
+          })
+        } else {
+          Notify.create({
+            color: 'negative',
+            message: 'Failed to delete your account. Please try again later.'
+          })
+        }
+      } finally {
+        this._isLoading = false
+      }
+    }
   }
 })