Add remove image option on image post

src/views/ImagePost.vue

@@ -19,6 +19,12 @@
           </li>
         </ul>
       </div>
+      <div>
+        <strong>Options</strong>
+        <ul class="pl-2">
+          <li><button @click="removeImage">Remove</button></li>
+        </ul>
+      </div>
     </section>
     <section class="flex-auto ml-12">
       <img :src="`/api/image/${flake}/file`" alt="" class="max-w-4xl" />
@@ -54,6 +60,9 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+import paths from "@/assets/js/paths.js";
+
 export default {
   data: function () {
     return {
@@ -63,6 +72,9 @@ export default {
       flake: this.$route.params.flake,
     };
   },
+  computed: {
+    ...mapState(["stateUser"]),
+  },
   methods: {
     async getImageTags() {
       const response = await fetch(`/api/image/${this.flake}/tag`);
@@ -80,6 +92,17 @@ export default {
         user: imageInfo.user,
       };
     },
+    async removeImage() {
+      if (confirm("Remove image?")) {
+        const options = {
+          method: "DELETE",
+          headers: { secret: this.stateUser.secret },
+        };
+        await fetch(paths.ImageField(this.flake), options);
+        // Redirect back to home page after removing image
+        this.$router.push({ name: "Home" });
+      }
+    },
   },
   async created() {
     this.imageTags = await this.getImageTags();