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

components/ConfirmPopup.vue

@@ -0,0 +1,152 @@
+<template>
+  <Popup :show-popup="display">
+    <div class="popup-delete">
+      <span class="title">{{ title }}</span>
+      <span class="description">
+        {{ description }}
+      </span>
+      <label v-if="hasToType" for="confirmation" class="confirmation-label">
+        <span>
+          To confirm your action, please type
+          <span class="confirmation-text">{{ confirmationText }}</span>
+          to continue
+        </span>
+      </label>
+      <input
+        v-if="hasToType"
+        id="confirmation"
+        v-model="confirmation_typed"
+        type="text"
+        placeholder="Type the input needed to continue"
+        @input="type"
+      />
+      <div class="actions">
+        <button class="button" @click="cancel">Cancel</button>
+        <button
+          class="button warn-button"
+          :disabled="action_disabled"
+          @click="proceed"
+        >
+          {{ proceedLabel }}
+        </button>
+      </div>
+    </div>
+  </Popup>
+</template>
+
+<script>
+export default {
+  name: 'ConfirmPopup',
+  props: {
+    confirmationText: {
+      type: String,
+      default: '',
+    },
+    hasToType: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: 'No title defined',
+      required: true,
+    },
+    description: {
+      type: String,
+      default: 'No description defined',
+      required: true,
+    },
+    proceedLabel: {
+      type: String,
+      default: 'Proceed',
+    },
+  },
+  data() {
+    return {
+      action_disabled: this.hasToType,
+      confirmation_typed: '',
+      display: false,
+    }
+  },
+  methods: {
+    cancel() {
+      this.display = false
+    },
+    proceed() {
+      this.display = false
+      this.$emit('proceed')
+    },
+    type() {
+      if (this.hasToType) {
+        this.action_disabled =
+          this.confirmation_typed.toLowerCase() !==
+          this.confirmationText.toLowerCase()
+      }
+    },
+    show() {
+      this.display = true
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.popup-delete {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (min-width: 900px) {
+  }
+
+  @media screen and (min-width: 1024px) {
+    max-width: 40vw;
+  }
+
+  .title {
+    font-size: 1.25rem;
+    align-self: stretch;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 1.5rem;
+  }
+
+  .description {
+    word-wrap: break-word;
+    padding-bottom: 1rem;
+  }
+
+  .confirmation-label {
+    margin-bottom: 0.5rem;
+  }
+
+  .confirmation-text {
+    font-weight: bold;
+    padding-right: 0;
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    margin-top: 1.5rem;
+
+    button {
+      flex-grow: 1;
+      width: 100%;
+      margin: 0.75rem 1rem;
+      padding: 0.75rem 0;
+    }
+
+    .warn-button {
+      transition: background-color 1s, color 1s;
+      color: var(--color-brand-inverted);
+      background-color: var(--color-badge-red-bg);
+
+      &:disabled {
+        background-color: var(--color-button-bg);
+        color: var(--color-button-text-disabled);
+      }
+    }
+  }
+}
+</style>

components/Popup.vue

@@ -40,7 +40,6 @@ export default {
   transform: translate(-50%, -50%);
   z-index: 2;
   box-shadow: 0 2px 3px 1px var(--color-button-bg);
-  padding: 5px 60px 5px 20px;
   border-radius: 10px;
   max-height: 80%;
   overflow-y: auto;

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()