Merge commit from fork

Co-authored-by: Ayushi Rathore <ayushirathore@Ayushis-MacBook-Air.local>

public/script.js

@@ -42,7 +42,7 @@ function handleFile(file) {
     <td>${file.name}</td>
     <td><progress max="100" class="inline-block h-2 appearance-none overflow-hidden rounded-full border-0 bg-neutral-700 bg-none text-accent-500 accent-accent-500 [&::-moz-progress-bar]:bg-accent-500 [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:[background:none] [&[value]::-webkit-progress-value]:bg-accent-500 [&[value]::-webkit-progress-value]:transition-[inline-size]"></progress></td>
     <td>${(file.size / 1024).toFixed(2)} kB</td>
-    <td><a onclick="deleteRow(this)">Remove</a></td>
+    <td><button type="button" class="text-accent-500 hover:underline" onclick="deleteRow(this)">Remove</button></td>
   `;
 
   if (!fileType) {

src/pages/deleteJob.tsx

@@ -8,7 +8,9 @@ import { Jobs } from "../db/types";
 
 export const deleteJob = new Elysia()
   .use(userService)
-  .get(
+  // SECURE: Use POST instead of GET for state-changing actions to prevent CSRF.
+  // Browsers automatically follow GET links, which can lead to silent data deletion.
+  .post(
     "/delete/:jobId",
     async ({ params, redirect, user }) => {
       const job = db

src/pages/history.tsx

@@ -185,15 +185,17 @@ export const history = new Elysia().use(userService).get(
                           >
                             <EyeIcon />
                           </a>
-                          <a
-                            class={`
-                              text-accent-500 underline
-                              hover:text-accent-400
-                            `}
-                            href={`${WEBROOT}/delete/${job.id}`}
-                          >
-                            <DeleteIcon />
-                          </a>
+                          <form action={`${WEBROOT}/delete/${job.id}`} method="POST" class="inline">
+                            <button
+                              type="submit"
+                              class={`
+                                text-accent-500 underline
+                                hover:text-accent-400
+                              `}
+                            >
+                              <DeleteIcon />
+                            </button>
+                          </form>
                         </td>
                       </tr>
                       <tr id={`details-${job.id}`} class="hidden">

src/pages/results.tsx

@@ -23,14 +23,16 @@ function ResultsArticle({
       <div class="mb-4 flex items-center justify-between">
         <h1 class="text-xl">Results</h1>
         <div class="flex flex-row gap-4">
-          <a
-            style={files.length !== job.num_files ? "pointer-events: none;" : ""}
-            class="flex btn-secondary flex-row gap-2 text-contrast"
-            href={`${WEBROOT}/delete/${job.id}`}
-            {...(files.length !== job.num_files ? { disabled: true, "aria-busy": "true" } : "")}
-          >
-            <DeleteIcon /> <p>Delete</p>
-          </a>
+          <form action={`${WEBROOT}/delete/${job.id}`} method="POST">
+            <button
+              type="submit"
+              style={files.length !== job.num_files ? "pointer-events: none;" : ""}
+              class="flex btn-secondary flex-row gap-2 text-contrast"
+              {...(files.length !== job.num_files ? { disabled: true, "aria-busy": "true" } : "")}
+            >
+              <DeleteIcon /> <p>Delete</p>
+            </button>
+          </form>
           <a
             style={files.length !== job.num_files ? "pointer-events: none;" : ""}
             href={`${WEBROOT}/archive/${job.id}`}