diff --git a/src/views/ImagePost.vue b/src/views/ImagePost.vue index 4d4e18344309e3ade8cffd371e1a76e1ed9de356..4f5ac48b5e16d393bf4a47419fe895e141b68cfb 100644 --- a/src/views/ImagePost.vue +++ b/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();