Finish report issue page

src/routes/more/report/+page.svelte

@@ -4,9 +4,12 @@
 	import Nav from "$lib/navigation/nav.svelte";
     import { onMount } from "svelte";
 	import Loading from "$lib/navigation/loading.svelte";
+    import Done from "$lib/navigation/done.svelte";
 
     const title = "Report Issue";
     let isLoading = false;
+    let isDone = false;
+    let isError = false;
 
     let reportType = "", reportSubject = "", reportMsg = "", reportCollected
     onMount(async () => {
@@ -30,7 +33,7 @@
         console.log("SEND DATA REQUESTED")
         isLoading = true
         const formData = JSON.stringify({
-            labels: [reportType],
+            label: reportType,
             subject: reportSubject,
             msg: `User Agent: ${reportCollected.userAgent}\n` +
             `Browser: ${reportCollected.browser}\n` +
@@ -43,14 +46,28 @@
         const url = `https://owlboard.info/misc/issue`
         const options = {
             method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
             body: formData
         }
         const res = await fetch(url, options)
-        console.log(formData)
+        if (res.status == 200) {
+            isLoading = false;
+            isDone = true;
+            await new Promise(r => setTimeout(r, 2000));
+            window.location.href = "/";
+        } else {
+            isLoading = false;
+            isError = true;
+        }
     }
 
     async function cancel() {
         preFlight = false;
+        isLoading = false;
+        isDone = false;
+        isError = false;
     }
 
 </script>
@@ -60,13 +77,18 @@
   <Loading />
 {/if}
 
-{#if !preFlight}
+{#if isDone}
+  <Done />
+{/if}
+
+{#if !preFlight && !isDone}
   <p>Any data that you enter here will be visible publicly
      <a href="https://git.fjla.uk/OwlBoard/backend/issues" target="_blank">here</a>
   </p>
   <p>You will be shown all of the collected data before the form is submitted.</p>
   <form on:submit={submit}>
     <select class="formInputs" name="type" bind:value={reportType} placeholder="Choose Category">
+      <option value="" disabled selected>Choose an Issue Type</option>
       <option value="bug">Problem</option>
       <option value="enhancement">Feature Request</option>
       <option value="question">Question</option>