pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Abuse report management UI

Browse Source
This commit is contained in:
Wim Brand
2021-05-11 16:14:16 +02:00
parent c10749fcb1
commit 9be306a427
11 changed files with 455 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
res/include/script/file_viewer/AbuseReportWindow.js Normal file
View 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)
}
}

1
res/include/script/file_viewer/Viewer.js
View File

@@ -77,6 +77,7 @@ function Viewer(type, viewToken, data) {
} }
this.embedWindow = new EmbedWindow(this) this.embedWindow = new EmbedWindow(this)
this.abuseReportWindow = new AbuseReportWindow(this)
if (userAuthenticated && !this.file.can_edit) { if (userAuthenticated && !this.file.can_edit) {
let btnGrab = document.getElementById("btn_grab") let btnGrab = document.getElementById("btn_grab")

4
res/template/admin.html
View File

@@ -17,6 +17,10 @@
<i class="icon">block</i> <i class="icon">block</i>
Block files Block files
</a> </a>
<a class="button" href="/admin/abuse_reports">
<i class="icon">report</i>
User abuse reports
</a>
<a class="button" href="/admin/abuse_reporters"> <a class="button" href="/admin/abuse_reporters">
<i class="icon">report</i> <i class="icon">report</i>
Manage abuse reporters Manage abuse reporters

19
res/template/admin_abuse_reports.html Normal file
View 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}}

65
res/template/file_viewer.html
View File

@@ -90,6 +90,10 @@
<i class="icon">code</i> <i class="icon">code</i>
<span>E<u>m</u>bed</span> <span>E<u>m</u>bed</span>
</button> </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/> <br/>
{{ if and .Other.FileAdsEnabled .Other.UserAdsEnabled }} {{ 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"> <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%" /> <img src="/res/img/misc/banner_amarula_jobs.png" style="width: 100%; height: 100%" />
</a> </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 }} {{ else if eq .Other.AdType 8 }}
<div style="text-align: center; line-height: 1.4em; font-size: 22px;"> <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;"/> <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> <a href="/click/7wy9gg2J?target=%2F%23pro" class="button button_highlight">Pixeldrain Pro: Only €2 per month</a>
</div> </div>
</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 }} {{ end }}
{{ else if not .Other.UserAdsEnabled }} {{ else if not .Other.UserAdsEnabled }}
<div style="text-align: center; line-height: 1.3em; font-size: 13px;"> <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> <div class="embed_preview_area" style="text-align: center;"></div>
</template> </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 src="/res/script/Chart.min.js"></script>
<script> <script>
'use strict'; 'use strict';
@@ -324,6 +378,7 @@
{{template `EditWindow.js`}} {{template `EditWindow.js`}}
{{template `EmbedWindow.js`}} {{template `EmbedWindow.js`}}
{{template `DetailsWindow.js`}} {{template `DetailsWindow.js`}}
{{template `AbuseReportWindow.js`}}
{{template `ListNavigator.js`}} {{template `ListNavigator.js`}}
{{template `Viewer.js`}} {{template `Viewer.js`}}
@@ -351,7 +406,7 @@
{{ if eq .Other.AdType 5 }} {{ if eq .Other.AdType 5 }}
<!-- AdMaven --> <!-- AdMaven -->
<script data-cfasync="false" async src="//d227cncaprzd7y.cloudfront.net/?acncd=905608"></script> <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 --> <!-- PropellerAds -->
<script> <script>
// Load fires when the page is completely finished loading, // Load fires when the page is completely finished loading,

1
svelte/rollup.config.js
View File

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

8
svelte/src/admin_abuse_reports.js Normal file
View 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
View 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
View 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
View 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>

1
webcontroller/web_controller.go
View File

@@ -187,6 +187,7 @@ func New(
{GET, "admin/abuse" /* */, wc.serveForm(wc.adminAbuseForm, handlerOpts{Auth: true})}, {GET, "admin/abuse" /* */, wc.serveForm(wc.adminAbuseForm, handlerOpts{Auth: true})},
{PST, "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_reporters" /**/, wc.serveTemplate("admin_abuse_reporters", handlerOpts{Auth: true})},
{GET, "admin/abuse_reports" /* */, wc.serveTemplate("admin_abuse_reports", handlerOpts{Auth: true})},
// Advertising related // Advertising related
{GET, "click/:id" /* */, wc.serveAdClick}, {GET, "click/:id" /* */, wc.serveAdClick},