From 00ef845277819e7defa606641c6cf2e03d94fd43 Mon Sep 17 00:00:00 2001
From: nobswebdev <nobswebdev@noreply.git.nobswebdev.com>
Date: Tue, 27 Oct 2026 19:13:40 +0100
Subject: [PATCH] Add DeleteView one-click delete page at /d/:id?token=...

---
 frontend/src/stores/upload.ts                |  9 ++-
 frontend/src/types/delete/DeleteViewState.ts |  1 +
 frontend/src/views/DeleteView.vue            | 59 +++++++++++++++++++-
 3 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/types/delete/DeleteViewState.ts

diff --git a/frontend/src/stores/upload.ts b/frontend/src/stores/upload.ts
index 459dd94..ab5c819 100644
--- a/frontend/src/stores/upload.ts
+++ b/frontend/src/stores/upload.ts
@@ -96,6 +96,12 @@ export const useUploadStore = defineStore('upload', () => {
         return data;
     };
 
+    const deleteUpload = async (uploadId: string, deleteToken: string): Promise<void> => {
+        await api.delete(`/uploads/${uploadId}`, {
+            params: { delete_token: deleteToken }
+        });
+    };
+
     const getUploadRequestHeaders = (altcha?: string) => (altcha ? { [ALTCHA_REQUEST_HEADER]: altcha } : undefined);
 
     const uploadBatch = async (
@@ -257,6 +263,7 @@ export const useUploadStore = defineStore('upload', () => {
         clearAllUploads,
         uploadBatch,
         uploadZk,
-        uploadHotlink
+        uploadHotlink,
+        deleteUpload
     };
 });
diff --git a/frontend/src/types/delete/DeleteViewState.ts b/frontend/src/types/delete/DeleteViewState.ts
new file mode 100644
index 0000000..3cb0844
--- /dev/null
+++ b/frontend/src/types/delete/DeleteViewState.ts
@@ -0,0 +1 @@
+export type DeleteViewState = 'invalid' | 'deleting' | 'deleted' | 'notFound' | 'error';
diff --git a/frontend/src/views/DeleteView.vue b/frontend/src/views/DeleteView.vue
index 04e61e3..d2945c7 100644
--- a/frontend/src/views/DeleteView.vue
+++ b/frontend/src/views/DeleteView.vue
@@ -1,6 +1,59 @@
 <template>
-    <main class="flex min-h-screen flex-col p-8">
-        <h1 class="text-2xl font-semibold tracking-tight">Delete</h1>
-        <p class="mt-2 text-muted-foreground">Delete upload — coming soon.</p>
+    <main class="mx-auto flex min-h-screen max-w-lg flex-col items-center justify-center gap-3 p-8 text-center">
+        <p v-if="state === 'invalid'" class="text-sm text-muted-foreground">
+            This delete link is incomplete. Use the delete URL from your upload results.
+        </p>
+
+        <p v-else-if="state === 'deleting'" class="text-sm text-muted-foreground">Deleting image...</p>
+
+        <p v-else-if="state === 'deleted'" class="text-sm text-muted-foreground"> The image has been deleted. </p>
+
+        <p v-else-if="state === 'notFound'" class="text-sm text-muted-foreground"> This image was not found. </p>
+
+        <p v-else-if="state === 'error'" class="text-sm text-destructive">
+            Could not delete this image. Try again later.
+        </p>
     </main>
 </template>
+
+<script setup lang="ts">
+import axios, { HttpStatusCode } from 'axios';
+import { onBeforeMount, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useUploadStore } from '@/stores/upload';
+import type { DeleteViewState } from '@/types/delete/DeleteViewState';
+
+const route = useRoute();
+const uploadStore = useUploadStore();
+
+const state = ref<DeleteViewState>('deleting');
+
+onBeforeMount(async () => {
+    const uploadId = route.params.id;
+    const deleteToken = route.query.token;
+
+    if (typeof uploadId !== 'string' || !uploadId || typeof deleteToken !== 'string' || !deleteToken) {
+        state.value = 'invalid';
+
+        return;
+    }
+
+    state.value = 'deleting';
+
+    try {
+        await uploadStore.deleteUpload(uploadId, deleteToken);
+
+        state.value = 'deleted';
+    } catch (error) {
+        if (axios.isAxiosError(error) && error.response?.status === HttpStatusCode.NotFound) {
+            state.value = 'notFound';
+
+            return;
+        }
+
+        console.error('[delete] failed', { uploadId, error });
+
+        state.value = 'error';
+    }
+});
+</script>