feat:#684 - Delete account

.github/workflows/cypress.yml

@@ -8,6 +8,7 @@ on:
 jobs:
   cypress:
     runs-on: ubuntu-latest
+    environment: Development
     steps:
       - name: 🛫 Checkout
         uses: actions/checkout@v3
@@ -18,17 +19,6 @@ jobs:
           node-version: 18.14.0
           cache: 'npm'
 
-      - name: 📄 Create .env file from GitHub secrets
-        run: |
-          echo VITE_FIREBASE_API_KEY=${{ secrets.VITE_FIREBASE_API_KEY }} > .env
-          echo VITE_FIREBASE_APP_ID=${{ secrets.VITE_FIREBASE_APP_ID }} >> .env
-          echo VITE_FIREBASE_AUTH_DOMAIN=${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }} >> .env
-          echo VITE_FIREBASE_MEASUREMENTID=${{ secrets.VITE_FIREBASE_MEASUREMENTID }} >> .env
-          echo VITE_FIREBASE_MESSAGING_SENDER_ID=${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }} >> .env
-          echo VITE_FIREBASE_PROJECT_ID=${{ secrets.VITE_FIREBASE_PROJECT_ID }} >> .env
-          echo VITE_FIREBASE_STORAGE_BUCKET=${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }} >> .env
-          echo VITE_FIREBASE_VAPID_KEY=${{ secrets.VITE_FIREBASE_VAPID_KEY }} >> .env
-
       - name: 💻 Run Cypress
         uses: cypress-io/github-action@v5
         with:
@@ -40,10 +30,20 @@ jobs:
           record: true
           parallel: true
         env:
-          # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY
-          # in GitHub repo → Settings → Secrets → Actions
+          # Set Firebase secrets directly from GitHub Secrets
+          VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}
+          VITE_FIREBASE_APP_ID: ${{ secrets.VITE_FIREBASE_APP_ID }}
+          VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}
+          VITE_FIREBASE_MEASUREMENTID: ${{ secrets.VITE_FIREBASE_MEASUREMENTID }}
+          VITE_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}
+          VITE_FIREBASE_PROJECT_ID: ${{ secrets.VITE_FIREBASE_PROJECT_ID }}
+          VITE_FIREBASE_STORAGE_BUCKET: ${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}
+          VITE_FIREBASE_VAPID_KEY: ${{ secrets.VITE_FIREBASE_VAPID_KEY }}
+          VITE_CURRENT_NETWORK_NAME: ${{ secrets.VITE_CURRENT_NETWORK_NAME }}
+          VITE_WALLET_CONNECT_PROJECT_ID: ${{ secrets.VITE_WALLET_CONNECT_PROJECT_ID }}
+          # For recording and parallelization to work, set your CYPRESS_RECORD_KEY
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          # pass GitHub token to detect new build vs re-run build
+          # Pass GitHub token to detect new build vs re-run build
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Codecov

src/components/Profile/SettingsTab.vue

@@ -1,15 +1,63 @@
 <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.show">
+    <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-section>
+        <q-input
+          v-model="confirmationText"
+          label="Type DELETE to confirm"
+          filled
+          :rules="[(val) => val === 'DELETE' || 'You must type DELETE to confirm']"
+        />
+      </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"
+          :disable="confirmationText !== 'DELETE'"
+          @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({
+  show: false,
+  author: userStore.getUser
+})
+const confirmationText = ref('')
 
 function onLogout() {
   if (customWeb3modal.getAddress()) {
@@ -18,4 +66,20 @@ function onLogout() {
   userStore.logout()
   router.push({ path: '/profile' })
 }
+
+function openDeleteConfirmationDialog() {
+  deleteDialog.value.show = true
+  confirmationText.value = ''
+}
+
+async function onDeleteAccount() {
+  try {
+    await userStore.deleteOwnAccount()
+    router.push({ path: '/profile' })
+  } catch (error) {
+    console.error('Account deletion failed:', error)
+  } finally {
+    deleteDialog.value.show = 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
+      }
+    }
   }
 })