Add block files page in svelte

res/include/style/layout.css

@@ -327,7 +327,8 @@ a:hover {
 	margin-left: auto;
 	margin-right: auto;
 	text-align: left;
-	max-width: 40em;
+	max-width: 30em;
+	width: 100%;
 }
 table:not(.form) {
 	border-collapse: collapse;

svelte/src/admin_panel/BlockFiles.svelte

@@ -0,0 +1,81 @@
+<script>
+import { onMount } from "svelte";
+
+import Form from "./../util/Form.svelte";
+
+let block_form = {
+	name: "block_files",
+	fields: [
+		{
+			name: "text",
+			label: "Files to delete",
+			type: "text_area",
+		}, {
+			name: "type",
+			label: "Type",
+			type: "radio",
+			radio_values: [
+				"unknown",
+				"copyright",
+				"child_abuse",
+				"terrorism",
+				"gore",
+				"malware",
+			]
+		}, {
+			name: "reporter",
+			label: "Reporter",
+			type: "text",
+			default_value: "Anonymous tip",
+		},
+	],
+	submit_label: `<i class="icon">send</i> Submit`,
+	on_submit: async fields => {
+		const form = new FormData()
+		form.append("text", fields.text)
+		form.append("type", fields.type)
+		form.append("reporter", fields.reporter)
+
+		const resp = await fetch(
+			window.api_endpoint+"/admin/block_files",
+			{ method: "POST", body: form }
+		);
+		if(resp.status >= 400) {
+			return {error_json: await resp.json()}
+		}
+		let jresp = await resp.json()
+		let message = "The following files were blocked:<br/>"
+		message += "<ul>"
+		jresp.files_blocked.forEach(file => {
+			message += "<li>pixeldrain.com/u/" + file + "</li>"
+		})
+		message += "</ul>"
+
+		return {success: true, message: message}
+	},
+}
+
+onMount(() => {
+	// Automatically select the text in the textarea when clicked
+	let ta = document.getElementById("input_text")
+	ta.addEventListener("click", (evt) => {
+		ta.focus()
+		ta.select()
+	})
+})
+</script>
+
+<div>
+	<div class="limit_width">
+		<h2>File removal</h2>
+		<p>
+			Paste any pixeldrain file links in here to remove them
+		</p>
+		<div class="highlight_dark">
+			<Form config={block_form}></Form>
+		</div>
+	</div>
+</div>
+
+<style>
+</style>

svelte/src/admin_panel/Router.svelte

@@ -4,6 +4,7 @@ import AbuseReports from "./AbuseReports.svelte"
 import IpBans from "./IPBans.svelte"
 import Home from "./Home.svelte"
 import { onMount } from "svelte";
+import BlockFiles from "./BlockFiles.svelte";
 
 let page = ""
 
@@ -33,7 +34,10 @@ onMount(() => {
 			<i class="icon">home</i>
 			Status
 		</a>
-		<a class="button" href="/admin/abuse">
+		<a class="button"
+			href="/admin/block_files"
+			class:button_highlight={page === "block_files"}
+			on:click|preventDefault={() => {navigate("block_files", "Block files")}}>
 			<i class="icon">block</i>
 			Block files
 		</a>
@@ -66,6 +70,8 @@ onMount(() => {
 
 	{#if page === "status"}
 	<Home></Home>
+	{:else if page === "block_files"}
+	<BlockFiles></BlockFiles>
 	{:else if page === "abuse_reports"}
 	<AbuseReports></AbuseReports>
 	{:else if page === "abuse_reporters"}

svelte/src/util/Form.svelte

@@ -40,8 +40,16 @@ let submit = async (event) => {
 
 	let field_values = {}
 
-	config.fields.forEach(val => {
+	config.fields.forEach(field => {
-		field_values[val.name] = val.binding.value
+		if (field.type === "radio") {
+			if (field.binding === undefined) {
+				field_values[field.name] = ""
+			} else {
+				field_values[field.name] = field.binding
+			}
+		} else {
+			field_values[field.name] = field.binding.value
+		}
 	})
 
 	submit_result = await config.on_submit(field_values)
@@ -115,7 +123,7 @@ let handle_errors = (response) => {
 			</div>
 		{:else}
 			<div id="submit_result" class:highlight_green={submit_result.success} class:highlight_red={!submit_result.success}>
-				{submit_result.message}
+				{@html submit_result.message}
 			</div>
 		{/if}
 	{/if}
@@ -124,68 +132,83 @@ let handle_errors = (response) => {
 	<table class="form">
 		{#each config.fields as field}
 			<tr class="form">
-				<td>{field.label}</td>
+				{#if field.type === "text_area"}
-				{#if field.type === "text"}
+					<td colspan="2">
-					<input bind:this={field.binding}
+						{field.label}
-						id="input_{field.name}"
+						<br/>
-						name="{field.name}"
+						<textarea bind:this={field.binding}
-						value="{field.default_value}"
+							id="input_{field.name}"
-						type="text"
+							name="{field.name}"
-						class="form_input"/>
+							class="form_input"
-				{:else if field.type === "number"}
+							style="width: 100%; height: 10em; resize: vertical;"
-					<input bind:this={field.binding}
+						>{field.default_value}</textarea>
-						id="input_{field.name}"
+					</td>
-						name="{field.name}"
+				{:else}
-						value="{field.default_value}"
+					<td>{field.label}</td>
-						type="number"
+					<td>
-						class="form_input"/>
+						{#if field.type === "text"}
-				{:else if field.type === "username"}
+							<input bind:this={field.binding}
-					<input bind:this={field.binding}
+								id="input_{field.name}"
-						id="input_{field.name}"
+								name="{field.name}"
-						name="{field.name}"
+								value="{field.default_value}"
-						value="{field.default_value}"
+								type="text"
-						type="text"
+								class="form_input"/>
-						autocomplete="username"
+						{:else if field.type === "number"}
-						class="form_input"/>
+							<input bind:this={field.binding}
-				{:else if field.type === "email"}
+								id="input_{field.name}"
-					<input bind:this={field.binding}
+								name="{field.name}"
-						id="input_{field.name}"
+								value="{field.default_value}"
-						name="{field.name}"
+								type="number"
-						value="{field.default_value}"
+								class="form_input"/>
-						type="email"
+						{:else if field.type === "username"}
-						autocomplete="email"
+							<input bind:this={field.binding}
-						class="form_input"/>
+								id="input_{field.name}"
-				{:else if field.type === "current_password"}
+								name="{field.name}"
-					<input bind:this={field.binding}
+								value="{field.default_value}"
-						id="input_{field.name}"
+								type="text"
-						name="{field.name}"
+								autocomplete="username"
-						value="{field.default_value}"
+								class="form_input"/>
-						type="password"
+						{:else if field.type === "email"}
-						autocomplete="current-password"
+							<input bind:this={field.binding}
-						class="form_input"/>
+								id="input_{field.name}"
-				{:else if field.type === "new_password"}
+								name="{field.name}"
-					<input bind:this={field.binding}
+								value="{field.default_value}"
-						id="input_{field.name}"
+								type="email"
-						name="{field.name}"
+								autocomplete="email"
-						value="{field.default_value}"
+								class="form_input"/>
-						type="password"
+						{:else if field.type === "current_password"}
-						autocomplete="new-password"
+							<input bind:this={field.binding}
-						class="form_input"/>
+								id="input_{field.name}"
-				{:else if field.type === "captcha"}
+								name="{field.name}"
-					<script src="https://www.google.com/recaptcha/api.js" async defer></script>
+								value="{field.default_value}"
-					<div class="g-recaptcha" data-theme="dark" data-sitekey="{field.captcha_site_key}"></div>
+								type="password"
-				{:else if field.type === "radio"}
+								autocomplete="current-password"
-					{#each field.radio_values as val}
+								class="form_input"/>
-					<input
+						{:else if field.type === "new_password"}
-						id="input_{field.name}_choice_{val}"
+							<input bind:this={field.binding}
-						name="{field.name}"
+								id="input_{field.name}"
-						value="{val}"
+								name="{field.name}"
-						type="radio"
+								value="{field.default_value}"
-						checked={val === field.default_value}/>
+								type="password"
-					<label for="input_{field.name}_choice_{val}">{val}</label><br/>
+								autocomplete="new-password"
-					{/each}
+								class="form_input"/>
-				{:else if field.type === "description"}
+						{:else if field.type === "captcha"}
-					{field.default_value}
+							<script src="https://www.google.com/recaptcha/api.js" async defer></script>
+							<div class="g-recaptcha" data-theme="dark" data-sitekey="{field.captcha_site_key}"></div>
+						{:else if field.type === "radio"}
+							{#each field.radio_values as val}
+								<input bind:group={field.binding}
+									id="input_{field.name}_choice_{val}"
+									name="{field.name}"
+									value={val}
+									type="radio"
+									checked={val === field.default_value}/>
+								<label for="input_{field.name}_choice_{val}">{val}</label><br/>
+							{/each}
+						{:else if field.type === "description"}
+							{field.default_value}
+						{/if}
+					</td>
 				{/if}
 			</tr>
 			{#if field.description}

webcontroller/web_controller.go

@@ -186,6 +186,7 @@ func New(
 		// Admin settings
 		{GET, "admin" /*                */, wc.serveTemplate("admin", handlerOpts{Auth: true})},
 		{GET, "admin/status" /*         */, wc.serveTemplate("admin", handlerOpts{Auth: true})},
+		{GET, "admin/block_files" /*    */, wc.serveTemplate("admin", handlerOpts{Auth: true})},
 		{GET, "admin/abuse_reporters" /**/, wc.serveTemplate("admin", handlerOpts{Auth: true})},
 		{GET, "admin/abuse_reports" /*  */, wc.serveTemplate("admin", handlerOpts{Auth: true})},
 		{GET, "admin/ip_bans" /*        */, wc.serveTemplate("admin", handlerOpts{Auth: true})},