Confirm popups (#135)

* Added confirmation popup for account deletion
(I nearly deleted my account twice, please help me)
Added component for easy adding of new confirmation popups.

* Add confirmation popup for mod deleting

* Add confirmation popup for version & file deletion

* Changed the placeholder to a generic value

pages/dashboard/settings.vue

@@ -1,6 +1,16 @@
 /* eslint-disable vue/attribute-hyphenation */
 <template>
   <DashboardPage>
+    <ConfirmPopup
+      ref="delete_popup"
+      title="Are you sure you want to delete your account?"
+      description="If you proceed, your user and all attached data will be removed from our
+        servers. This cannot be reversed, so be careful!"
+      proceed-label="Delete Account"
+      :confirmation-text="username"
+      :has-to-type="true"
+      @proceed="deleteAccount"
+    />
     <div class="section-header columns">
       <h3 class="column-grow-1">Settings</h3>
       <button class="brand-button column" @click="editProfile">Save</button>
@@ -93,7 +103,7 @@
           will be removed from our servers. This cannot be reversed, so be
           careful!</span
         >
-        <div type="button" class="button" @click="deleteAccount">
+        <div type="button" class="button" @click="showPopup">
           Delete Account
         </div>
       </label>
@@ -123,6 +133,7 @@ export default {
       email: '',
       bio: '',
       token: '',
+      confirm_delete: false,
     }
   },
   methods: {
@@ -192,6 +203,9 @@ export default {
 
       this.$nuxt.$loading.finish()
     },
+    showPopup() {
+      this.$refs.delete_popup.show()
+    },
   },
 }
 </script>

pages/mod/_id/settings.vue

@@ -7,6 +7,15 @@
     :link-bar="[['Settings', 'settings']]"
     :user-follows="userFollows"
   >
+    <ConfirmPopup
+      ref="delete_popup"
+      title="Are you sure you want to delete this mod?"
+      description="If you proceed, all versions and any attached data will be removed from our servers. This may break other projects, so be careful."
+      :has-to-type="true"
+      :confirmation-text="mod.title"
+      proceed-label="Delete Mod"
+      @proceed="deleteMod"
+    />
     <div class="section-header columns">
       <h3 class="column-grow-1">General</h3>
     </div>
@@ -34,7 +43,7 @@
         <div
           class="button"
           :disabled="(currentMember.permissions & DELETE_MOD) !== DELETE_MOD"
-          @click="deleteMod"
+          @click="showPopup"
         >
           Delete Mod
         </div>
@@ -401,12 +410,21 @@ export default {
 
       this.$nuxt.$loading.finish()
     },
+    showPopup() {
+      this.$refs.delete_popup.show()
+    },
     async deleteMod() {
       await axios.delete(
         `https://api.modrinth.com/api/v1/mod/${this.mod.id}`,
         this.$auth.headers
       )
       await this.$router.push('/dashboard/projects')
+      this.$notify({
+        group: 'main',
+        title: 'Action Success',
+        text: 'Your mod has been successfully deleted.',
+        type: 'success',
+      })
     },
   },
 }

pages/mod/_id/version/_version/index.vue

@@ -11,6 +11,22 @@
     ]"
     :user-follows="userFollows"
   >
+    <ConfirmPopup
+      ref="delete_file_popup"
+      title="Are you sure you want to delete this file?"
+      description="This will remove this file forever (like really forever)"
+      :has-to-type="false"
+      proceed-label="Delete File"
+      @proceed="deleteFile(popup_data)"
+    />
+    <ConfirmPopup
+      ref="delete_version_popup"
+      title="Are you sure you want to delete this version?"
+      description="This will remove this version forever (like really forever), and if some mods depends on this version, it won't work anymore."
+      :has-to-type="false"
+      proceed-label="Delete Version"
+      @proceed="deleteVersion()"
+    />
     <div class="version">
       <div class="version-header">
         <h4>{{ version.name }}</h4>
@@ -39,7 +55,7 @@
           <button
             v-if="currentMember"
             class="action iconified-button"
-            @click="deleteVersion"
+            @click="deleteVersionPopup"
           >
             <TrashIcon />
             Delete
@@ -108,7 +124,9 @@
           <div class="text-wrapper">
             <p>{{ file.filename }}</p>
             <div v-if="currentMember" class="actions">
-              <button @click="deleteFile(file.hashes.sha1)">Delete File</button>
+              <button @click="deleteFilePopup(file.hashes.sha1)">
+                Delete File
+              </button>
               <button @click="makePrimary(file.hashes.sha1)">
                 Make Primary
               </button>
@@ -231,6 +249,7 @@ export default {
   data() {
     return {
       filesToUpload: [],
+      popup_data: null,
     }
   },
   methods: {
@@ -244,6 +263,10 @@ export default {
       elem.href = url
       elem.click()
     },
+    deleteFilePopup(hash) {
+      this.popup_data = hash
+      this.$refs.delete_file_popup.show()
+    },
     async deleteFile(hash) {
       this.$nuxt.$loading.start()
 
@@ -314,6 +337,9 @@ export default {
 
       this.$nuxt.$loading.finish()
     },
+    deleteVersionPopup() {
+      this.$refs.delete_version_popup.show()
+    },
     async deleteVersion() {
       this.$nuxt.$loading.start()