Add IP bans page

This commit is contained in:
2021-05-25 11:42:55 +02:00
parent b2500c7a57
commit c3aea28ca0
6 changed files with 225 additions and 1 deletions

View File

@@ -36,6 +36,7 @@ export default [
"user_file_manager",
"admin_abuse_reporters",
"admin_abuse_reports",
"admin_ip_bans",
].map((name, index) => ({
input: `src/${name}.js`,
output: {

View File

@@ -6,6 +6,7 @@ let dispatch = createEventDispatcher()
export let report
let expandable
let preview = false
let set_status = async (action, report_type) => {
const form = new FormData()
@@ -30,7 +31,7 @@ let set_status = async (action, report_type) => {
}
</script>
<Expandable bind:this={expandable} expanded={report.status === "pending" && report.reports.length > 2}>
<Expandable bind:this={expandable} expanded={report.status === "pending" && report.reports.length > 1}>
<div slot="header" class="header" on:click={expandable.toggle}>
<div class="icon_cell">
<img class="file_icon" src={"/api/file/"+report.file.id+"/thumbnail"} alt="File thumbnail"/>
@@ -53,6 +54,9 @@ let set_status = async (action, report_type) => {
<a class="button" target="_blank" href={"/u/"+report.file.id}>
<i class="icon">open_in_new</i> Open file
</a>
<button class:button_highlight={preview} on:click={() => {preview = !preview}}>
<i class="icon">visibility</i> Preview
</button>
<button class="button_highlight" on:click={() => {set_status("grant", report.type)}}>
<i class="icon">done</i> Block ({report.type})
</button>
@@ -67,6 +71,16 @@ let set_status = async (action, report_type) => {
<button on:click={() => {set_status("grant", "malware")}}>malware</button>
</div>
</div>
<div style="text-align: center;">
{#if preview}
<br/>
<iframe
title="File preview"
src="/u/{report.file.id}?embed"
style="border: none; width: 100%; height: 400px; border-radius: 6px;"
></iframe>
{/if}
</div>
<table>
<tr>
<td>Time</td>

View File

@@ -0,0 +1,8 @@
import App from './admin_ip_bans/IPBans.svelte';
const app = new App({
target: document.getElementById("page_content"),
props: {}
});
export default app;

View File

@@ -0,0 +1,181 @@
<script>
import { onMount } from "svelte";
import { formatDate } from "../util/Formatting.svelte";
import Spinner from "../util/Spinner.svelte";
let loading = true
let rows = []
let creating = false
let new_ban_address
let new_ban_reason = "unknown"
const get_bans = async () => {
loading = true;
try {
const resp = await fetch(window.api_endpoint+"/admin/ip_ban");
if(resp.status >= 400) {
throw new Error(resp.text());
}
rows = await resp.json();
} catch (err) {
alert(err);
} finally {
loading = false;
}
};
const create_ban = async () => {
if (!new_ban_address.value) {
alert("Please enter an IP address!")
return
} else if (!new_ban_reason) {
alert("Please enter a reason!")
return
}
try {
const form = new FormData()
form.append("address", new_ban_address.value)
form.append("reason", new_ban_reason)
const resp = await fetch(
window.api_endpoint+"/admin/ip_ban",
{ method: "POST", body: form }
);
if(resp.status >= 400) {
throw new Error(await resp.text());
}
} catch (err) {
alert("Failed to add IP ban! "+err)
}
creating = false
get_bans();
}
const delete_ban = async (addr) => {
if (!confirm("Delete this banned address?\n\n"+addr)) {
return
}
try {
const resp = await fetch(
window.api_endpoint+"/admin/ip_ban/"+encodeURI(addr),
{ method: "DELETE" }
);
if(resp.status >= 400) {
throw new Error(await resp.text());
}
} catch (err) {
alert("Failed to delete ban! "+err)
}
get_bans();
}
onMount(get_bans);
</script>
<div>
{#if loading}
<div class="spinner_container">
<Spinner />
</div>
{/if}
<div class="limit_width">
<div class="toolbar" style="text-align: left;">
<a class="button" href="/admin">
<i class="icon">arrow_back</i> Return to admin panel
</a>
<div class="toolbar_spacer"></div>
<button class:button_highlight={creating} on:click={() => {creating = !creating}}>
<i class="icon">create</i> Add IP ban
</button>
</div>
{#if creating}
<div class="highlight_light">
<form on:submit|preventDefault={create_ban}>
<table class="form">
<tr>
<td>IP address</td>
<td><input type="text" bind:this={new_ban_address}/></td>
</tr>
<tr>
<td>Reason</td>
<td>
<input id="reason_unknown" name="reporter_type" type="radio" bind:group={new_ban_reason} value="unknown" />
<label for="reason_unknown">unknown</label>
<br/>
<input id="reason_copyright" name="reporter_type" type="radio" bind:group={new_ban_reason} value="copyright" />
<label for="reason_copyright">copyright</label>
<br/>
<input id="reason_child_abuse" name="reporter_type" type="radio" bind:group={new_ban_reason} value="child_abuse" />
<label for="reason_child_abuse">child_abuse</label>
<br/>
<input id="reason_terrorism" name="reporter_type" type="radio" bind:group={new_ban_reason} value="terorrism" />
<label for="reason_terrorism">terrorism</label>
<br/>
<input id="reason_gore" name="reporter_type" type="radio" bind:group={new_ban_reason} value="gore" />
<label for="reason_gore">gore</label>
<br/>
<input id="reason_malware" name="reporter_type" type="radio" bind:group={new_ban_reason} value="malware" />
<label for="reason_malware">malware</label>
</td>
</tr>
<tr>
<td colspan="2">
<button class="button_highlight" type="submit" style="float: right;">
<i class="icon">save</i> Save
</button>
</td>
</tr>
</table>
</form>
</div>
{/if}
</div>
<br/>
<table style="text-align: left;">
<tr>
<td>Address</td>
<td>Reason</td>
<td>Ban time</td>
<td>Expire time</td>
<td></td>
</tr>
{#each rows as row}
<tr>
<td>{row.address}</td>
<td>{rows.reason}</td>
<td>{formatDate(row.ban_time, true, true, false)}</td>
<td>{formatDate(row.expire_time, true, true, false)}</td>
<td>
<button on:click|preventDefault={() => {delete_ban(row.address)}} class="button button_red">
<i class="icon">delete</i>
</button>
</td>
</tr>
{/each}
</table>
</div>
<style>
.spinner_container {
position: absolute;
top: 10px;
left: 10px;
height: 100px;
width: 100px;
}
.toolbar {
display: flex;
flex-direction: row;
width: 100%;
}
.toolbar > * { flex: 0 0 auto; }
.toolbar_spacer { flex: 1 1 auto; }
</style>