Update abuse reporter handling

svelte/src/admin_panel/AbuseReporters.svelte

@@ -1,22 +1,17 @@
 <script>
-import { onMount } from "svelte";
+import { onMount, tick } from "svelte";
 import { formatDate, formatDuration } from "../util/Formatting.svelte";
 import Spinner from "../util/Spinner.svelte";
 
 let loading = true
 let reporters = []
 
-let creating = false
-let new_reporter_email
-let new_reporter_name
-let new_reporter_type = "individual"
-
 const get_reporters = async () => {
 	loading = true;
 	try {
 		const resp = await fetch(window.api_endpoint+"/admin/abuse_reporter");
 		if(resp.status >= 400) {
-			throw new Error(resp.text());
+			throw new Error(await resp.text());
 		}
 		reporters = await resp.json();
 	} catch (err) {
@@ -26,23 +21,34 @@ const get_reporters = async () => {
 	}
 };
 
+let edit_button
+let creating = false
+let new_reporter_from_address
+let new_reporter_mail_server
+let new_reporter_name
+let new_reporter_status = "trusted"
+
 const create_reporter = async () => {
-	if (!new_reporter_email.value) {
+	if (!new_reporter_from_address.value) {
-		alert("Please enter an e-mail address!")
+		alert("Please enter an e-mail address")
+		return
+	} else if (!new_reporter_mail_server.value) {
+		alert("Please enter a mail server")
 		return
 	} else if (!new_reporter_name.value) {
-		alert("Please enter a name!")
+		alert("Please enter a name")
 		return
-	} else if (!new_reporter_type) {
+	} else if (!new_reporter_status) {
-		alert("Please enter a type!")
+		alert("Please enter a status")
 		return
 	}
 
 	try {
 		const form = new FormData()
-		form.append("email", new_reporter_email.value)
+		form.append("from_address", new_reporter_from_address.value)
+		form.append("mail_server", new_reporter_mail_server.value)
 		form.append("name", new_reporter_name.value)
-		form.append("type", new_reporter_type)
+		form.append("status", new_reporter_status)
 
 		const resp = await fetch(
 			window.api_endpoint+"/admin/abuse_reporter",
@@ -59,14 +65,24 @@ const create_reporter = async () => {
 	get_reporters();
 }
 
-const delete_reporter = async (email) => {
+const edit_reporter = async reporter => {
-	if (!confirm("Delete this reporter address?\n\n"+email)) {
+	edit_button.scrollIntoView()
+	creating = true
+	await tick()
+	new_reporter_from_address.value = reporter.from_address
+	new_reporter_mail_server.value = reporter.mail_server
+	new_reporter_name.value = reporter.name
+	new_reporter_status = reporter.status
+}
+
+const delete_reporter = async (address, server) => {
+	if (!confirm("Delete this reporter address?\n\n"+address)) {
 		return
 	}
 
 	try {
 		const resp = await fetch(
-			window.api_endpoint+"/admin/abuse_reporter/"+encodeURI(email),
+			window.api_endpoint+"/admin/abuse_reporter/"+encodeURI(address)+"/"+encodeURI(server),
 			{ method: "DELETE" }
 		);
 		if(resp.status >= 400) {
@@ -91,7 +107,7 @@ onMount(get_reporters);
 <section>
 	<div class="toolbar" style="text-align: left;">
 		<div class="toolbar_spacer"></div>
-		<button class:button_highlight={creating} on:click={() => {creating = !creating}}>
+		<button bind:this={edit_button} class:button_highlight={creating} on:click={() => {creating = !creating}}>
 			<i class="icon">create</i> Add abuse reporter
 		</button>
 	</div>
@@ -101,20 +117,24 @@ onMount(get_reporters);
 				<table class="form">
 					<tr>
 						<td>E-mail address</td>
-						<td><input type="text" bind:this={new_reporter_email}/></td>
+						<td><input type="text" bind:this={new_reporter_from_address}/></td>
+					</tr>
+					<tr>
+						<td>Mail server</td>
+						<td><input type="text" bind:this={new_reporter_mail_server}/></td>
 					</tr>
 					<tr>
 						<td>Name</td>
 						<td><input type="text" bind:this={new_reporter_name} value="Anonymous tip"/></td>
 					</tr>
 					<tr>
-						<td>Type</td>
+						<td>Status</td>
 						<td>
-							<input id="reporter_type_individual" name="reporter_type" type="radio" bind:group={new_reporter_type} value="individual" />
+							<input id="reporter_status_1" name="reporter_status" type="radio" bind:group={new_reporter_status} value="trusted" />
-							<label for="reporter_type_individual">Individual</label>
+							<label for="reporter_status_1">Trusted</label>
 							<br/>
-							<input id="reporter_type_org" name="reporter_type" type="radio" bind:group={new_reporter_type} value="org" />
+							<input id="reporter_status_2" name="reporter_status" type="radio" bind:group={new_reporter_status} value="rejected" />
-							<label for="reporter_type_org">Organisation</label>
+							<label for="reporter_status_2">Rejected</label>
 						</td>
 					</tr>
 					<tr>
@@ -135,24 +155,31 @@ onMount(get_reporters);
 <div class="table_scroll">
 	<table style="text-align: left;">
 		<tr>
-			<td>E-mail</td>
+			<td>Address</td>
+			<td>Server</td>
 			<td>Name</td>
+			<td>Status</td>
+			<td>Reports</td>
 			<td>Blocked</td>
-			<td>Type</td>
 			<td>Last used</td>
 			<td>Created</td>
 			<td></td>
 		</tr>
-		{#each reporters as reporter (reporter.email)}
+		{#each reporters as r (r.email)}
 			<tr>
-				<td>{reporter.email}</td>
+				<td>{r.from_address}</td>
-				<td>{reporter.name}</td>
+				<td>{r.mail_server}</td>
-				<td>{reporter.files_blocked}</td>
+				<td>{r.name}</td>
-				<td>{reporter.type}</td>
+				<td>{r.status}</td>
-				<td>{formatDate(reporter.last_used, true, true, false)}</td>
+				<td>{r.reports_sent}</td>
-				<td>{formatDate(reporter.created, false, false, false)}</td>
+				<td>{r.files_blocked}</td>
+				<td>{formatDate(r.last_used, true, true, false)}</td>
+				<td>{formatDate(r.created, false, false, false)}</td>
 				<td>
-					<button on:click|preventDefault={() => {delete_reporter(reporter.email)}} class="button button_red round">
+					<button on:click|preventDefault={() => {edit_reporter(r)}} class="button round">
+						<i class="icon">edit</i>
+					</button>
+					<button on:click|preventDefault={() => {delete_reporter(r.from_address, r.mail_server)}} class="button button_red round">
 						<i class="icon">delete</i>
 					</button>
 				</td>