From 9aa83a7066eef882a8c329c3e0cd50da0e00c760 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Fri, 9 Oct 2020 11:38:35 -0700
Subject: [PATCH] improved delete account

---
 src/components/Settings/DeleteAccount.vue | 120 +++++++++++++++-------
 src/pages/Account.vue                     |  47 +--------
 2 files changed, 88 insertions(+), 79 deletions(-)

diff --git a/src/components/Settings/DeleteAccount.vue b/src/components/Settings/DeleteAccount.vue
index 81baa846..c9df80f1 100644
--- a/src/components/Settings/DeleteAccount.vue
+++ b/src/components/Settings/DeleteAccount.vue
@@ -5,18 +5,36 @@
     <b-modal
       id="account-settings"
       hide-footer
-      body-class="p-0"
       title="Delete account"
     >
-      <!-- TODO: delete Boards -->
-      <!-- TODO: delete Files -->
-      <!-- TODO: delete Tags -->
-      <!-- TODO: delete Notes -->
-      <!-- TODO: delete Progresses -->
-      <!-- TODO: delete Settings -->
-      <!-- TODO: delete Tags -->
+      <b-alert show variant="success" v-if="deleting && progress === 5">
+        Account deleted
+      </b-alert>
 
-      <b-button variant="danger" @click="promptDeleteAccount">
+      <template v-else-if="deleting">
+        {{ message }}
+        <b-progress :value="progress" :max="5" class="mb-3"  />
+      </template>
+
+      <div v-else>
+        The following database entries will be deleted FOREVER.
+
+        <ul>
+          <li>User</li>
+          <li>Tags</li>
+          <li>Notes</li>
+          <li>Game Progresses</li>
+          <li>Settings</li>
+          <li>Boards</li>
+          <!-- <li>Wallpapers </li> -->
+        </ul>
+      </div>
+
+      <b-button
+        variant="danger"
+        @click="promptDeleteAccount"
+        :disabled="deleting"
+      >
         Delete Account
       </b-button>
     </b-modal>
@@ -25,10 +43,27 @@
 
 <script>
 import { mapState } from 'vuex';
+import firebase from 'firebase/app';
 
 export default {
+  data() {
+    return {
+      progress: 0,
+      deleting: false,
+      message: 'test',
+    };
+  },
+
   computed: {
-    ...mapState(['user']),
+    ...mapState([
+      'user',
+      'tags',
+      'notes',
+      'progresses',
+      'settings',
+      'boards',
+      'wallpapers',
+    ]),
   },
 
   methods: {
@@ -45,31 +80,46 @@ export default {
         });
     },
 
-    deleteAccount() {
-      // const db = firebase.firestore();
-      //
-      // // TODO: Add progress bar, delete tags, files, etc...
-      // // TODO: move to actions
-      // db.collection('settings').doc(this.user.uid).delete()
-      //   .then(() => {
-      //   // TODO: move to actions
-      //     db.collection('lists').doc(this.user.uid).delete()
-      //       .then(() => {
-      //         this.$bvToast.toast('Account deleted', { title: 'Success', variant: 'success' });
-      //         const exitUrl = process.env.NODE_ENV === 'development'
-      //           ? 'http://localhost:3000'
-      //           : 'https://gamebrary.com';
-      //
-      //         this.$store.commit('CLEAR_SESSION');
-      //         window.location.href = exitUrl;
-      //       })
-      //       .catch(() => {
-      //         this.$store.commit('SET_SESSION_EXPIRED', true);
-      //       });
-      //   })
-      //   .catch(() => {
-      //     this.$store.commit('SET_SESSION_EXPIRED', true);
-      //   });
+    async deleteAccount() {
+      this.deleting = true;
+
+      const db = firebase.firestore();
+      const user = firebase.auth().currentUser;
+
+      this.message = 'Deleting tags';
+      await db.collection('tags').doc(this.user.uid).delete();
+      this.progress = this.progress + 1;
+
+      this.message = 'Deleting notes';
+      await db.collection('notes').doc(this.user.uid).delete();
+      this.progress = this.progress + 1;
+
+      this.message = 'Deleting game progresses';
+      await db.collection('progresses').doc(this.user.uid).delete();
+      this.progress = this.progress + 1;
+
+      this.message = 'Deleting settings';
+      await db.collection('settings').doc(this.user.uid).delete();
+      this.progress = this.progress + 1;
+
+      this.message = 'Deleting boards';
+      await db.collection('boards').doc(this.user.uid).delete();
+      this.progress = this.progress + 1;
+
+      user.delete().then(() => {
+        this.$bvToast.toast('Account deleted', { title: 'Success', variant: 'success' });
+
+        const exitUrl = process.env.NODE_ENV === 'development'
+          ? 'http://localhost:3000'
+          : 'https://gamebrary.com';
+
+        window.location.href = exitUrl;
+
+        this.$store.commit('CLEAR_SESSION');
+      })
+        .catch(() => {
+          this.$store.commit('SET_SESSION_EXPIRED', true);
+        });
     },
   },
 };
diff --git a/src/pages/Account.vue b/src/pages/Account.vue
index 8a92dbf0..c567c1a5 100644
--- a/src/pages/Account.vue
+++ b/src/pages/Account.vue
@@ -51,9 +51,7 @@
         </b-list-group-item>
 
         <b-list-group-item>
-          <b-button variant="danger" @click="promptDeleteAccount">
-            Delete Account
-          </b-button>
+          <delete-account />
         </b-list-group-item>
 
         <b-list-group-item>
@@ -65,14 +63,15 @@
 </template>
 
 <script>
-import firebase from 'firebase/app';
 import SignOut from '@/components/Settings/SignOut';
+import DeleteAccount from '@/components/Settings/DeleteAccount';
 import moment from 'moment';
 import { mapState } from 'vuex';
 
 export default {
   components: {
     SignOut,
+    DeleteAccount,
   },
 
   computed: {
@@ -83,46 +82,6 @@ export default {
     formatDate(date) {
       return moment(date).format('LL');
     },
-
-    promptDeleteAccount() {
-      this.$bvModal.msgBoxConfirm('All your data will be removed', {
-        title: 'Are you sure you want to delete your account?',
-        okVariant: 'danger',
-        okTitle: 'Yes, delete account! Hahaha!',
-      })
-        .then((value) => {
-          if (value) {
-            this.deleteAccount();
-          }
-        });
-    },
-
-    deleteAccount() {
-      const db = firebase.firestore();
-
-      // TODO: Add progress bar, delete tags, files, etc...
-      // TODO: move to actions
-      db.collection('settings').doc(this.user.uid).delete()
-        .then(() => {
-        // TODO: move to actions
-          db.collection('lists').doc(this.user.uid).delete()
-            .then(() => {
-              this.$bvToast.toast('Account deleted', { title: 'Success', variant: 'success' });
-              const exitUrl = process.env.NODE_ENV === 'development'
-                ? 'http://localhost:3000'
-                : 'https://gamebrary.com';
-
-              this.$store.commit('CLEAR_SESSION');
-              window.location.href = exitUrl;
-            })
-            .catch(() => {
-              this.$store.commit('SET_SESSION_EXPIRED', true);
-            });
-        })
-        .catch(() => {
-          this.$store.commit('SET_SESSION_EXPIRED', true);
-        });
-    },
   },
 };
 </script>