Add DeleteView one-click delete page at /d/:id?token=...

2026-10-27 19:13:40 +01:00
parent c147a010b5
commit 00ef845277
3 changed files with 65 additions and 4 deletions
@@ -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>