Implementation of:

- Authenticated PIS
  - Report Issue
  - About Page

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

@@ -0,0 +1,140 @@
+<script>
+	import Header from "$lib/navigation/header.svelte";
+    import Island from "$lib/islands/island.svelte";
+	import Nav from "$lib/navigation/nav.svelte";
+    import { onMount } from "svelte";
+
+    const title = "Report Issue";
+
+    let reportType = "", reportSubject = "", reportMsg = "", reportCollected
+    onMount(async () => {
+        reportCollected = {
+            userAgent: navigator.userAgent,
+            browser: navigator.appName,
+            version: navigator.appVersion,
+            platform: navigator.platform,
+            viewport: `${window.innerWidth} x ${window.innerHeight}`,
+    };
+    })
+    
+    let preFlight = false;
+
+    async function submit() {
+        console.log(reportType,reportSubject,reportMsg)
+        preFlight = true;
+    }
+
+    async function send() {
+        console.log("SEND DATA REQUESTED")
+        const formData = JSON.stringify({
+            labels: [reportType],
+            subject: reportSubject,
+            msg: `User Agent: ${reportCollected.userAgent}\n` +
+            `Browser: ${reportCollected.browser}\n` +
+            `BrowserVersion: ${reportCollected.version}\n` +
+            `Platform: ${reportCollected.platform}\n` +
+            `Viewport: ${reportCollected.viewport}\n\n\n` +
+            `User Message:\n` +
+            `${reportMsg}`
+        })
+        const url = `https://owlboard.info/api/v1/issue`
+        const options = {
+            method: "POST",
+            body: formData
+        }
+        const res = await fetch(url, options)
+        console.log(formData)
+    }
+
+    async function cancel() {
+        preFlight = false;
+    }
+
+</script>
+<Header {title} />
+
+{#if !preFlight}
+  <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="bug">Problem</option>
+      <option value="enhancement">Feature Request</option>
+      <option value="question">Question</option>
+      <option value="user-support">Unable to sign up</option>
+    </select>
+    <br>
+    <input class="formInputs" type="text" bind:value={reportSubject} placeholder="Subject">
+    <br>
+    <textarea class="formInputs" bind:value={reportMsg} placeholder="Enter your message..."/>
+    <br>
+    <button type="submit">Submit</button>
+    <button type="reset">Reset</button>
+  </form>
+{:else}
+<Island>
+    <h2>Device Data:</h2>
+      <p><span class="dataType">User Agent: </span>{reportCollected.userAgent}</p>
+      <p><span class="dataType">Browser: </span>{reportCollected.browser} - {reportCollected.version}</p>
+      <p><span class="dataType">Platform: </span>{reportCollected.platform}</p>
+      <p><span class="dataType">Viewport: </span> {reportCollected.viewport}</p>
+    <h2>Reported Data:</h2>
+      <p><span class="dataType">Report Type: </span>{reportType}</p>
+      <p>{reportSubject}</p>
+      <p>{reportMsg}</p>
+    <button class="overlayButtons" on:click={send}>Send</button>
+    <button class="overlayButtons" on:click={cancel}>Cancel</button>
+</Island>
+{/if}
+<Nav />
+
+<style>
+    select {
+        text-align: center;
+        border: none;
+        border-radius: 50px;
+        height: 30px;
+        background-color: white;
+    }
+    .formInputs {
+        margin: 10px;
+        font-family: urwgothic, sans-serif;
+        font-size: 16px;
+        border: none;
+        width: 50%;
+        max-width: 250px;
+        min-width: 100px;
+    }
+    input {
+        text-align: center;
+        border-radius: 50px;
+        height: 30px;
+    }
+    textarea {
+        text-align: left;
+        border-radius: 10px;
+        padding-left: 5px;
+        padding-right: 5px;
+        height: 30vh;
+        min-height: 150px;
+        max-height: 400px;
+    }
+    button {
+        background-color: var(--overlay-color);
+        color: white;
+        font-family: urwgothic, sans-serif;
+        font-size: 16px;
+        border: none;
+        border-radius: 50px;
+        width: 25%;
+        height: 30px;
+        max-width: 100px;
+    }
+    h2 {color: white;}
+    .dataType {color: white;}
+    .overlayButtons {
+        background-color: var(--main-bg-color);
+    }
+</style>