Abuse report management UI
This commit is contained in:
80
res/include/script/file_viewer/AbuseReportWindow.js
Normal file
80
res/include/script/file_viewer/AbuseReportWindow.js
Normal file
@@ -0,0 +1,80 @@
|
||||
function AbuseReportWindow(viewer) {
|
||||
this.viewer = viewer
|
||||
this.visible = false
|
||||
this.modal = new Modal(
|
||||
document.getElementById("file_viewer"),
|
||||
() => { this.toggle() },
|
||||
"Report abuse", "600px", "auto",
|
||||
)
|
||||
|
||||
this.btnReportAbuse = document.getElementById("btn_report_abuse")
|
||||
this.btnReportAbuse.addEventListener("click", () => { this.toggle() })
|
||||
|
||||
let clone = document.getElementById("tpl_report_abuse_popup").content.cloneNode(true)
|
||||
this.form = clone.querySelector(".abuse_type_form")
|
||||
// this.emailField = clone.querySelector(".abuse_email_field")
|
||||
this.notification = clone.querySelector(".abuse_report_notification")
|
||||
this.modal.setBody(clone)
|
||||
|
||||
this.form.addEventListener("submit", e => { this.submit(e) })
|
||||
}
|
||||
|
||||
AbuseReportWindow.prototype.toggle = function () {
|
||||
if (this.visible) {
|
||||
this.modal.close()
|
||||
this.btnReportAbuse.classList.remove("button_highlight")
|
||||
this.visible = false
|
||||
} else {
|
||||
this.modal.open()
|
||||
this.btnReportAbuse.classList.add("button_highlight")
|
||||
this.visible = true
|
||||
}
|
||||
}
|
||||
|
||||
AbuseReportWindow.prototype.notify = function (success, content) {
|
||||
this.notification.style.display = ""
|
||||
this.notification.classList = "abuse_report_notification " + (success ? "highlight_green" : "highlight_red")
|
||||
this.notification.innerHTML = content
|
||||
}
|
||||
|
||||
AbuseReportWindow.prototype.submit = async function (e) {
|
||||
e.preventDefault()
|
||||
|
||||
let abuseType = ""
|
||||
this.form.querySelectorAll('[name="abuse_type"]').forEach(elem => {
|
||||
if (elem.checked) {
|
||||
abuseType = elem.value
|
||||
}
|
||||
})
|
||||
|
||||
if (abuseType === "") {
|
||||
this.notify(false, "Please select an abuse type")
|
||||
return
|
||||
}
|
||||
|
||||
const form = new FormData()
|
||||
form.append("type", abuseType)
|
||||
// form.append("email", this.emailField.value)
|
||||
|
||||
try {
|
||||
const resp = await fetch(
|
||||
this.viewer.file.get_href + "/report_abuse",
|
||||
{ method: "POST", body: form }
|
||||
);
|
||||
if (resp.status >= 400) {
|
||||
let json = await resp.json()
|
||||
if (json.value === "resource_already_exists") {
|
||||
throw "You have already reported this file"
|
||||
} else if (json.value === "file_already_blocked") {
|
||||
throw "This file has already been blocked"
|
||||
} else if (json.value === "multiple_errors") {
|
||||
throw json.errors[0].message
|
||||
}
|
||||
throw json.message
|
||||
}
|
||||
|
||||
this.notify(true, "Report has been sent")
|
||||
} catch (err) {
|
||||
this.notify(false, "Failed to send report: " + err)
|
||||
}
|
||||
}
|
||||
@@ -77,6 +77,7 @@ function Viewer(type, viewToken, data) {
|
||||
}
|
||||
|
||||
this.embedWindow = new EmbedWindow(this)
|
||||
this.abuseReportWindow = new AbuseReportWindow(this)
|
||||
|
||||
if (userAuthenticated && !this.file.can_edit) {
|
||||
let btnGrab = document.getElementById("btn_grab")
|
||||
|
||||
@@ -17,6 +17,10 @@
|
||||
<i class="icon">block</i>
|
||||
Block files
|
||||
</a>
|
||||
<a class="button" href="/admin/abuse_reports">
|
||||
<i class="icon">report</i>
|
||||
User abuse reports
|
||||
</a>
|
||||
<a class="button" href="/admin/abuse_reporters">
|
||||
<i class="icon">report</i>
|
||||
Manage abuse reporters
|
||||
|
||||
19
res/template/admin_abuse_reports.html
Normal file
19
res/template/admin_abuse_reports.html
Normal file
@@ -0,0 +1,19 @@
|
||||
{{define "admin_abuse_reports"}}<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{template "meta_tags" "Abuse reports"}}
|
||||
{{template "user_style" .}}
|
||||
<script>window.api_endpoint = '{{.APIEndpoint}}';</script>
|
||||
<link rel='stylesheet' href='/res/svelte/admin_abuse_reports.css'>
|
||||
<script defer src='/res/svelte/admin_abuse_reports.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
{{template "page_top" .}}
|
||||
<h1>Abuse reports</h1>
|
||||
<div id="page_content" class="page_content"></div>
|
||||
|
||||
{{template "page_bottom" .}}
|
||||
{{template "analytics"}}
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
@@ -90,6 +90,10 @@
|
||||
<i class="icon">code</i>
|
||||
<span>E<u>m</u>bed</span>
|
||||
</button>
|
||||
<button id="btn_report_abuse" class="toolbar_button button_full_width" title="Report abuse in this file">
|
||||
<i class="icon">flag</i>
|
||||
<span>Report</span>
|
||||
</button>
|
||||
<br/>
|
||||
|
||||
{{ if and .Other.FileAdsEnabled .Other.UserAdsEnabled }}
|
||||
@@ -175,6 +179,10 @@
|
||||
<a class="sponsors_banner" style="display: inline-block; width: 576px; height: 96px;" href="/click/DtZ3hHT9?target=https%3A%2F%2Fwww.amarulasolutions.com/jobs">
|
||||
<img src="/res/img/misc/banner_amarula_jobs.png" style="width: 100%; height: 100%" />
|
||||
</a>
|
||||
{{ else if eq .Other.AdType 7 }}
|
||||
<a class="sponsors_banner" style="display: inline-block; width: 728px; height: 90px;" href="/brave">
|
||||
<img src="/res/img/misc/brave-728x90.png" style="width: 100%; height: 100%" />
|
||||
</a>
|
||||
{{ else if eq .Other.AdType 8 }}
|
||||
<div style="text-align: center; line-height: 1.4em; font-size: 22px;">
|
||||
<img src="/res/img/pixeldrain_128.png" style="height: 2.4em; vertical-align: middle; margin: 4px;"/>
|
||||
@@ -207,10 +215,6 @@
|
||||
<a href="/click/7wy9gg2J?target=%2F%23pro" class="button button_highlight">Pixeldrain Pro: Only €2 per month</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<a class="sponsors_banner" style="display: inline-block; width: 728px; height: 90px;" href="/click/MdUXxSov?target=https%3A%2F%2Fbrave.com%2Fpix009">
|
||||
<img src="/res/img/misc/brave-728x90.png" style="width: 100%; height: 100%" />
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ else if not .Other.UserAdsEnabled }}
|
||||
<div style="text-align: center; line-height: 1.3em; font-size: 13px;">
|
||||
@@ -309,6 +313,56 @@
|
||||
<div class="embed_preview_area" style="text-align: center;"></div>
|
||||
</template>
|
||||
|
||||
<template id="tpl_report_abuse_popup">
|
||||
<p>
|
||||
If you think this file violates pixeldrain's
|
||||
<a href="/about#content-policy">content policy</a> you can
|
||||
report it for moderation with this form. You cannot report
|
||||
copyright abuse with this form, send a formal DMCA notification
|
||||
to the
|
||||
<a href="/about#content-policy">abuse e-mail address</a>
|
||||
instead.
|
||||
</p>
|
||||
<form class="abuse_type_form" style="width: 100%">
|
||||
<h3>Abuse type</h3>
|
||||
<input type="radio" id="abuse_type_terrorism" name="abuse_type" value="terrorism">
|
||||
<label for="abuse_type_terrorism">Terrorism</label>
|
||||
<br/>
|
||||
<input type="radio" id="abuse_type_gore" name="abuse_type" value="gore">
|
||||
<label for="abuse_type_gore">Gore</label>
|
||||
<br/>
|
||||
<input type="radio" id="abuse_type_child_abuse" name="abuse_type" value="child_abuse">
|
||||
<label for="abuse_type_child_abuse">Child abuse</label>
|
||||
<br/>
|
||||
<input type="radio" id="abuse_type_malware" name="abuse_type" value="malware">
|
||||
<label for="abuse_type_malware">Malware</label>
|
||||
<br/>
|
||||
<!--
|
||||
<h3>E-mail address</h3>
|
||||
<p>
|
||||
If you want to be notified when this file gets blocked you
|
||||
can enter your e-mail address here. This is optional, you
|
||||
can leave it empty if you want.
|
||||
</p>
|
||||
<input class="abuse_email_field" type="text" placeholder="e-mail address" style="width: 100%"/>
|
||||
<br/>
|
||||
-->
|
||||
|
||||
<h3>Send</h3>
|
||||
<div class="abuse_report_notification" style="display: none;"></div>
|
||||
<p>
|
||||
Abuse reports are manually reviewed. Normally this shouldn't
|
||||
take more than 24 hours. But during busy periods it can take
|
||||
longer.
|
||||
</p>
|
||||
<div style="text-align: right;">
|
||||
<button class="button_highlight abuse_report_submit" role="submit">
|
||||
<i class="icon">send</i> Send
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script src="/res/script/Chart.min.js"></script>
|
||||
<script>
|
||||
'use strict';
|
||||
@@ -324,6 +378,7 @@
|
||||
{{template `EditWindow.js`}}
|
||||
{{template `EmbedWindow.js`}}
|
||||
{{template `DetailsWindow.js`}}
|
||||
{{template `AbuseReportWindow.js`}}
|
||||
{{template `ListNavigator.js`}}
|
||||
{{template `Viewer.js`}}
|
||||
|
||||
@@ -351,7 +406,7 @@
|
||||
{{ if eq .Other.AdType 5 }}
|
||||
<!-- AdMaven -->
|
||||
<script data-cfasync="false" async src="//d227cncaprzd7y.cloudfront.net/?acncd=905608"></script>
|
||||
{{ else if or (eq .Other.AdType 7) (eq .Other.AdType 8) (eq .Other.AdType 9) (eq .Other.AdType 10) (eq .Other.AdType 11) }}
|
||||
{{ else if ne .Other.AdType 4 }}
|
||||
<!-- PropellerAds -->
|
||||
<script>
|
||||
// Load fires when the page is completely finished loading,
|
||||
|
||||
@@ -33,6 +33,7 @@ export default [
|
||||
"modal",
|
||||
"user_buckets",
|
||||
"admin_abuse_reporters",
|
||||
"admin_abuse_reports",
|
||||
].map((name, index) => ({
|
||||
input: `src/${name}.js`,
|
||||
output: {
|
||||
|
||||
8
svelte/src/admin_abuse_reports.js
Normal file
8
svelte/src/admin_abuse_reports.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import App from './admin_abuse_reports/AbuseReports.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById("page_content"),
|
||||
props: {}
|
||||
});
|
||||
|
||||
export default app;
|
||||
110
svelte/src/admin_abuse_reports/AbuseReport.svelte
Normal file
110
svelte/src/admin_abuse_reports/AbuseReport.svelte
Normal file
@@ -0,0 +1,110 @@
|
||||
<script>
|
||||
import { formatDate } from "../util/Formatting.svelte";
|
||||
import Expandable from "../util/Expandable.svelte";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
export let report
|
||||
let expandable
|
||||
|
||||
let grant = () => {
|
||||
set_status("grant")
|
||||
}
|
||||
let reject = () => {
|
||||
set_status("reject")
|
||||
}
|
||||
let set_status = async (action) => {
|
||||
const form = new FormData()
|
||||
form.append("action", action)
|
||||
if (action === "grant") {
|
||||
form.append("type", report.type)
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await fetch(
|
||||
window.api_endpoint+"/admin/abuse_report/"+report.id,
|
||||
{ method: "POST", body: form }
|
||||
);
|
||||
if(resp.status >= 400) {
|
||||
throw new Error(resp.text())
|
||||
}
|
||||
|
||||
dispatch("refresh");
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<Expandable bind:this={expandable} expanded={report.status === "pending"}>
|
||||
<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"/>
|
||||
</div>
|
||||
|
||||
<div class="title">{report.file.name}</div>
|
||||
<div class="stats">Type<br/>{report.type}</div>
|
||||
{#if report.status !== "pending"}
|
||||
<div class="stats">Status<br/>{report.status}</div>
|
||||
{/if}
|
||||
<div class="stats">R<br/>{report.reports.length}</div>
|
||||
<div class="stats">V<br/>{report.file.views}</div>
|
||||
<div class="stats">DL<br/>{Math.round(report.file.bandwidth_used / report.file.size)}</div>
|
||||
</div>
|
||||
<div class="details">
|
||||
<div style="text-align: center;">
|
||||
<a class="button" target="_blank" href={"/u/"+report.file.id}>
|
||||
<i class="icon">open_in_new</i> Open file
|
||||
</a>
|
||||
<button on:click={grant}><i class="icon">done</i> Grant (block file)</button>
|
||||
<button on:click={reject}><i class="icon">delete</i> Ignore reports</button>
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Time</td>
|
||||
<td>IP</td>
|
||||
<td>Type</td>
|
||||
<td>Status</td>
|
||||
</tr>
|
||||
{#each report.reports as user_report}
|
||||
<tr>
|
||||
<td>{formatDate(user_report.time, true, true, true, true)}</td>
|
||||
<td>{user_report.ip_address}</td>
|
||||
<td>{user_report.type}</td>
|
||||
<td>{user_report.status}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
</Expandable>
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.icon_cell {
|
||||
flex: 0 0 auto;
|
||||
line-height: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.title {
|
||||
flex: 1 1 auto;
|
||||
align-self: center;
|
||||
}
|
||||
.stats {
|
||||
flex: 0 0 auto;
|
||||
padding: 3px 4px;
|
||||
line-height: 1.2em;
|
||||
border-left: 1px solid var(--layer_3_color_border);
|
||||
text-align: center;
|
||||
}
|
||||
.details {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.file_icon {
|
||||
width:48px;
|
||||
height:48px;
|
||||
}
|
||||
</style>
|
||||
108
svelte/src/admin_abuse_reports/AbuseReports.svelte
Normal file
108
svelte/src/admin_abuse_reports/AbuseReports.svelte
Normal file
@@ -0,0 +1,108 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import Spinner from "../util/Spinner.svelte";
|
||||
import AbuseReport from "./AbuseReport.svelte";
|
||||
|
||||
let loading = true
|
||||
let reports = []
|
||||
|
||||
const get_reports = async () => {
|
||||
loading = true;
|
||||
|
||||
let today = new Date()
|
||||
let start = new Date()
|
||||
start.setMonth(start.getMonth() - 1)
|
||||
|
||||
try {
|
||||
const resp = await fetch(
|
||||
window.api_endpoint+
|
||||
"/admin/abuse_report?start="+
|
||||
start.toISOString()+
|
||||
"&end="+today.toISOString()
|
||||
);
|
||||
if(resp.status >= 400) {
|
||||
throw new Error(resp.text());
|
||||
}
|
||||
reports = await resp.json();
|
||||
|
||||
reports.sort((a, b) => {
|
||||
if (a.first_report_time > b.first_report_time) {
|
||||
return -1
|
||||
} else if (a.first_report_time < b.first_report_time) {
|
||||
return 1
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
})
|
||||
reports.forEach(v => {
|
||||
v.reports.sort((a, b) => {
|
||||
if (a.time > b.time) {
|
||||
return 1
|
||||
} else if (a.time < b.time) {
|
||||
return -1
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
})
|
||||
})
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMount(get_reports);
|
||||
</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 on:click={get_reports}><i class="icon">refresh</i></button>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<h2>Pending</h2>
|
||||
{#each reports as report}
|
||||
{#if report.status === "pending"}
|
||||
<AbuseReport report={report} on:refresh={get_reports}/>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<h2>Resolved</h2>
|
||||
{#each reports as report}
|
||||
{#if report.status !== "pending"}
|
||||
<AbuseReport report={report} on:refresh={get_reports}/>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</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>
|
||||
63
svelte/src/util/Expandable.svelte
Normal file
63
svelte/src/util/Expandable.svelte
Normal file
@@ -0,0 +1,63 @@
|
||||
<script>
|
||||
export let expanded = false
|
||||
export const toggle = () => {
|
||||
expanded = !expanded
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="expandable">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
|
||||
<button class="bucket_expand" on:click={toggle}>
|
||||
{#if expanded}
|
||||
<i class="icon">expand_less</i>
|
||||
{:else}
|
||||
<i class="icon">expand_more</i>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<div class="body" class:hidden={!expanded}>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.expandable {
|
||||
text-decoration: none;
|
||||
background-color: var(--layer_3_color);
|
||||
transition: box-shadow 0.5s;
|
||||
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);
|
||||
margin: 1em 0;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: var(--text_color);
|
||||
}
|
||||
.header:hover {
|
||||
background-color: var(--input_color_dark)
|
||||
}
|
||||
.title {
|
||||
flex: 1 1 auto;
|
||||
text-align: left;
|
||||
}
|
||||
.bucket_expand {
|
||||
flex: 0 0 auto;
|
||||
align-self: center;
|
||||
height: auto;
|
||||
}
|
||||
.body {
|
||||
display: flex;
|
||||
padding: 0.4em;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
border-top: 1px solid var(--layer_3_color_border);
|
||||
color: var(--text_color);
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -187,6 +187,7 @@ func New(
|
||||
{GET, "admin/abuse" /* */, wc.serveForm(wc.adminAbuseForm, handlerOpts{Auth: true})},
|
||||
{PST, "admin/abuse" /* */, wc.serveForm(wc.adminAbuseForm, handlerOpts{Auth: true})},
|
||||
{GET, "admin/abuse_reporters" /**/, wc.serveTemplate("admin_abuse_reporters", handlerOpts{Auth: true})},
|
||||
{GET, "admin/abuse_reports" /* */, wc.serveTemplate("admin_abuse_reports", handlerOpts{Auth: true})},
|
||||
|
||||
// Advertising related
|
||||
{GET, "click/:id" /* */, wc.serveAdClick},
|
||||
|
||||
Reference in New Issue
Block a user