Support clipboard upload on home page
Add shortcuts for all the buttons Add abuse reporter page Fix user buckets page Add a-ads advertisement
This commit is contained in:
@@ -32,6 +32,7 @@ export default [
|
||||
"filesystem",
|
||||
"modal",
|
||||
"user_buckets",
|
||||
"admin_abuse_reporters",
|
||||
].map((name, index) => ({
|
||||
input: `src/${name}.js`,
|
||||
output: {
|
||||
|
||||
8
svelte/src/admin_abuse_reporters.js
Normal file
8
svelte/src/admin_abuse_reporters.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import App from './admin_abuse_reporters/AbuseReporters.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById("page_content"),
|
||||
props: {}
|
||||
});
|
||||
|
||||
export default app;
|
||||
182
svelte/src/admin_abuse_reporters/AbuseReporters.svelte
Normal file
182
svelte/src/admin_abuse_reporters/AbuseReporters.svelte
Normal file
@@ -0,0 +1,182 @@
|
||||
<script>
|
||||
import { onMount } 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());
|
||||
}
|
||||
reporters = await resp.json();
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
const create_reporter = async () => {
|
||||
if (!new_reporter_email.value) {
|
||||
alert("Please enter an e-mail address!")
|
||||
return
|
||||
} else if (!new_reporter_name.value) {
|
||||
alert("Please enter a name!")
|
||||
return
|
||||
} else if (!new_reporter_type) {
|
||||
alert("Please enter a type!")
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const form = new FormData()
|
||||
form.append("email", new_reporter_email.value)
|
||||
form.append("name", new_reporter_name.value)
|
||||
form.append("type", new_reporter_type)
|
||||
|
||||
const resp = await fetch(
|
||||
window.api_endpoint+"/admin/abuse_reporter",
|
||||
{ method: "POST", body: form }
|
||||
);
|
||||
if(resp.status >= 400) {
|
||||
throw new Error(await resp.text());
|
||||
}
|
||||
} catch (err) {
|
||||
alert("Failed to add abuse reporter! "+err)
|
||||
}
|
||||
|
||||
creating = false
|
||||
get_reporters();
|
||||
}
|
||||
|
||||
const delete_reporter = async (email) => {
|
||||
if (!confirm("Delete this reporter address?\n\n"+email)) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await fetch(
|
||||
window.api_endpoint+"/admin/abuse_reporter/"+encodeURI(email),
|
||||
{ method: "DELETE" }
|
||||
);
|
||||
if(resp.status >= 400) {
|
||||
throw new Error(await resp.text());
|
||||
}
|
||||
} catch (err) {
|
||||
alert("Failed to delete abuse reporter! "+err)
|
||||
}
|
||||
|
||||
get_reporters();
|
||||
}
|
||||
|
||||
onMount(get_reporters);
|
||||
</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 abuse reporter
|
||||
</button>
|
||||
</div>
|
||||
{#if creating}
|
||||
<div class="highlight_light">
|
||||
<form on:submit|preventDefault={create_reporter}>
|
||||
<table class="form">
|
||||
<tr>
|
||||
<td>E-mail address</td>
|
||||
<td><input type="text" bind:this={new_reporter_email}/></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>
|
||||
<input id="reporter_type_individual" name="reporter_type" type="radio" bind:group={new_reporter_type} value="individual" />
|
||||
<label for="reporter_type_individual">Individual</label>
|
||||
<br/>
|
||||
<input id="reporter_type_org" name="reporter_type" type="radio" bind:group={new_reporter_type} value="org" />
|
||||
<label for="reporter_type_org">Organisation</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>E-mail</td>
|
||||
<td>Name</td>
|
||||
<td>Blocked</td>
|
||||
<td>Type</td>
|
||||
<td>Last used</td>
|
||||
<td>Created</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
{#each reporters as reporter}
|
||||
<tr>
|
||||
<td>{reporter.email}</td>
|
||||
<td>{reporter.name}</td>
|
||||
<td>{reporter.files_blocked}</td>
|
||||
<td>{reporter.type}</td>
|
||||
<td>{formatDate(reporter.last_used, true, true, false)}</td>
|
||||
<td>{formatDate(reporter.created, false, false, false)}</td>
|
||||
<td>
|
||||
<button on:click|preventDefault={() => {delete_reporter(reporter.email)}} 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>
|
||||
@@ -1,178 +1,181 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
let dispatch = createEventDispatcher();
|
||||
import { createEventDispatcher } from "svelte";
|
||||
let dispatch = createEventDispatcher();
|
||||
|
||||
export let bucket_id;
|
||||
export let target_dir;
|
||||
export let bucket_id;
|
||||
export let target_dir;
|
||||
|
||||
let upload_jobs = [];
|
||||
let upload_threads = 0;
|
||||
let max_upload_threads = 3;
|
||||
let upload_jobs = [];
|
||||
let upload_threads = 0;
|
||||
let max_upload_threads = 3;
|
||||
|
||||
// Adds files to the upload queue. The file_list parameter needs to be of type
|
||||
// FileList. Upload will also create the necessary directories to place nested
|
||||
// files in.
|
||||
export const upload = (file_list) => {
|
||||
for (let i = 0; i < file_list.length; i++) {
|
||||
upload_jobs.push({
|
||||
file: file_list[i],
|
||||
progress: 0,
|
||||
target_dir: target_dir.valueOf(),
|
||||
uploading: false,
|
||||
finished: false,
|
||||
tries: 0,
|
||||
});
|
||||
// Adds files to the upload queue. The file_list parameter needs to be of type
|
||||
// FileList. Upload will also create the necessary directories to place nested
|
||||
// files in.
|
||||
export const upload = (file_list) => {
|
||||
console.log(file_list)
|
||||
|
||||
for (let i = 0; i < file_list.length; i++) {
|
||||
upload_jobs.push({
|
||||
file: file_list[i],
|
||||
progress: 0,
|
||||
target_dir: target_dir.valueOf(),
|
||||
uploading: false,
|
||||
finished: false,
|
||||
tries: 0,
|
||||
});
|
||||
}
|
||||
|
||||
// This updates the UI
|
||||
upload_jobs = upload_jobs;
|
||||
|
||||
while (upload_threads < max_upload_threads) {
|
||||
upload_threads++;
|
||||
setTimeout(upload_file, 1);
|
||||
}
|
||||
};
|
||||
|
||||
const uploads_finished = () => {
|
||||
dispatch("finished");
|
||||
};
|
||||
|
||||
const upload_file = () => {
|
||||
let job = null;
|
||||
for (let i = 0; i < upload_jobs.length; i++) {
|
||||
// If a file is done we remove it from the array
|
||||
if (upload_jobs[i].progress >= 1) {
|
||||
upload_jobs.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
|
||||
// This updates the UI
|
||||
upload_jobs = upload_jobs;
|
||||
|
||||
while (upload_threads < max_upload_threads) {
|
||||
upload_threads++;
|
||||
setTimeout(upload_file, 1);
|
||||
if (
|
||||
upload_jobs[i].uploading === false &&
|
||||
upload_jobs[i].finished === false
|
||||
) {
|
||||
job = upload_jobs[i];
|
||||
job.uploading = true;
|
||||
upload_jobs = upload_jobs;
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
if (job === null) {
|
||||
upload_threads--;
|
||||
|
||||
const uploads_finished = () => {
|
||||
dispatch("finished");
|
||||
};
|
||||
|
||||
const upload_file = () => {
|
||||
let job = null;
|
||||
for (let i = 0; i < upload_jobs.length; i++) {
|
||||
// If a file is done we remove it from the array
|
||||
if (upload_jobs[i].progress >= 1) {
|
||||
upload_jobs.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (
|
||||
upload_jobs[i].uploading === false &&
|
||||
upload_jobs[i].finished === false
|
||||
) {
|
||||
job = upload_jobs[i];
|
||||
job.uploading = true;
|
||||
upload_jobs = upload_jobs;
|
||||
break;
|
||||
}
|
||||
if (upload_threads === 0) {
|
||||
uploads_finished();
|
||||
}
|
||||
if (job === null) {
|
||||
upload_threads--;
|
||||
return;
|
||||
}
|
||||
|
||||
if (upload_threads === 0) {
|
||||
uploads_finished();
|
||||
}
|
||||
console.log(job);
|
||||
|
||||
let form = new FormData();
|
||||
form.append("type", "file");
|
||||
form.append("file", job.file);
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open(
|
||||
"POST",
|
||||
"/api/filesystem/" +
|
||||
bucket_id +
|
||||
encodeURIComponent(job.target_dir + "/" + job.file.name),
|
||||
true
|
||||
);
|
||||
xhr.timeout = 21600000; // 6 hours, to account for slow connections
|
||||
|
||||
// Report progress updates back to the caller
|
||||
xhr.upload.addEventListener("progress", (evt) => {
|
||||
if (evt.lengthComputable) {
|
||||
job.progress = evt.loaded / evt.total;
|
||||
upload_jobs = upload_jobs;
|
||||
}
|
||||
});
|
||||
|
||||
xhr.onreadystatechange = () => {
|
||||
// readystate 4 means the upload is done
|
||||
if (xhr.readyState !== 4) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(job);
|
||||
if (xhr.status >= 100 && xhr.status < 400) {
|
||||
// Request is a success
|
||||
|
||||
let form = new FormData();
|
||||
form.append("type", "file");
|
||||
form.append("file", job.file);
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open(
|
||||
"POST",
|
||||
"/api/filesystem/" +
|
||||
bucket_id +
|
||||
encodeURIComponent(job.target_dir + "/" + job.file.name),
|
||||
true
|
||||
);
|
||||
xhr.timeout = 21600000; // 6 hours, to account for slow connections
|
||||
|
||||
// Report progress updates back to the caller
|
||||
xhr.upload.addEventListener("progress", (evt) => {
|
||||
if (evt.lengthComputable) {
|
||||
job.progress = evt.loaded / evt.total;
|
||||
upload_jobs = upload_jobs;
|
||||
}
|
||||
});
|
||||
|
||||
xhr.onreadystatechange = () => {
|
||||
// readystate 4 means the upload is done
|
||||
if (xhr.readyState !== 4) {
|
||||
// Finish the upload job
|
||||
job.uploading = false;
|
||||
job.finished = true;
|
||||
upload_file();
|
||||
} else if (xhr.status >= 400) {
|
||||
// Request failed
|
||||
console.log(
|
||||
"Upload error. status: " +
|
||||
xhr.status +
|
||||
" response: " +
|
||||
xhr.response
|
||||
);
|
||||
let resp = JSON.parse(xhr.response);
|
||||
if (job.tries === 3) {
|
||||
// Upload failed
|
||||
return;
|
||||
}
|
||||
|
||||
if (xhr.status >= 100 && xhr.status < 400) {
|
||||
// Request is a success
|
||||
|
||||
// Finish the upload job
|
||||
job.uploading = false;
|
||||
job.finished = true;
|
||||
upload_file();
|
||||
} else if (xhr.status >= 400) {
|
||||
// Request failed
|
||||
console.log(
|
||||
"Upload error. status: " +
|
||||
xhr.status +
|
||||
" response: " +
|
||||
xhr.response
|
||||
);
|
||||
let resp = JSON.parse(xhr.response);
|
||||
if (job.tries === 3) {
|
||||
// Upload failed
|
||||
return;
|
||||
} else {
|
||||
// Try again
|
||||
job.tries++;
|
||||
job.uploading = false;
|
||||
job.finished = false;
|
||||
}
|
||||
|
||||
// Sleep the upload thread for 5 seconds
|
||||
setTimeout(upload_file, 5000);
|
||||
} else {
|
||||
// Request did not arrive
|
||||
if (job.tries === 3) {
|
||||
// Upload failed
|
||||
alert("upload failed " + xhr.responseText);
|
||||
job.uploading = false;
|
||||
job.finished = false;
|
||||
} else {
|
||||
// Try again
|
||||
job.tries++;
|
||||
}
|
||||
|
||||
// Sleep the upload thread for 5 seconds
|
||||
setTimeout(upload_file, 5000);
|
||||
// Try again
|
||||
job.tries++;
|
||||
job.uploading = false;
|
||||
job.finished = false;
|
||||
}
|
||||
|
||||
upload_jobs = upload_jobs;
|
||||
};
|
||||
xhr.send(form);
|
||||
};
|
||||
// Sleep the upload thread for 5 seconds
|
||||
setTimeout(upload_file, 5000);
|
||||
} else {
|
||||
// Request did not arrive
|
||||
if (job.tries === 3) {
|
||||
// Upload failed
|
||||
alert("upload failed " + xhr.responseText);
|
||||
job.uploading = false;
|
||||
job.finished = false;
|
||||
} else {
|
||||
// Try again
|
||||
job.tries++;
|
||||
}
|
||||
|
||||
// File input dialog handling
|
||||
let file_input;
|
||||
export const picker = () => {
|
||||
file_input.click();
|
||||
};
|
||||
const file_input_change = (e) => {
|
||||
upload(e.target.files);
|
||||
file_input.nodeValue = "";
|
||||
};
|
||||
|
||||
// Drag and drop upload
|
||||
let hidden = true;
|
||||
const dragover = (e) => {
|
||||
hidden = false;
|
||||
};
|
||||
const dragleave = (e) => {
|
||||
hidden = true;
|
||||
};
|
||||
const drop = (e) => {
|
||||
hidden = true;
|
||||
upload(e.dataTransfer.files);
|
||||
};
|
||||
const paste = (e) => {
|
||||
if (e.clipboardData.files[0]) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log(e.clipboardData.files[0].getAsFile());
|
||||
// Sleep the upload thread for 5 seconds
|
||||
setTimeout(upload_file, 5000);
|
||||
}
|
||||
|
||||
upload_jobs = upload_jobs;
|
||||
};
|
||||
xhr.send(form);
|
||||
};
|
||||
|
||||
// File input dialog handling
|
||||
let file_input;
|
||||
export const picker = () => {
|
||||
file_input.click();
|
||||
};
|
||||
const file_input_change = (e) => {
|
||||
upload(e.target.files);
|
||||
file_input.nodeValue = "";
|
||||
};
|
||||
|
||||
// Drag and drop upload
|
||||
let hidden = true;
|
||||
const dragover = (e) => {
|
||||
hidden = false;
|
||||
};
|
||||
const dragleave = (e) => {
|
||||
hidden = true;
|
||||
};
|
||||
const drop = (e) => {
|
||||
hidden = true;
|
||||
upload(e.dataTransfer.files);
|
||||
};
|
||||
const paste = (e) => {
|
||||
if (e.clipboardData.files[0]) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log(e.clipboardData.files[0]);
|
||||
upload(e.clipboardData.files)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
<script>
|
||||
import { fs_create_bucket } from "../filesystem/FilesystemAPI.svelte";
|
||||
|
||||
let name
|
||||
|
||||
const submit = async () => {
|
||||
if (!name.value) {
|
||||
alert("Please enter a name!")
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
let bucket = await fs_create_bucket(name.value)
|
||||
console.log(bucket)
|
||||
} catch (err) {
|
||||
alert("Failed to create bucket! "+err)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="highlight_light">
|
||||
<form on:submit|preventDefault={submit}>
|
||||
<table class="form">
|
||||
<tr>
|
||||
<td>
|
||||
Name
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" bind:this={name}/>
|
||||
</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>
|
||||
@@ -1,5 +1,7 @@
|
||||
<script>
|
||||
import { fs_delete_bucket } from "../filesystem/FilesystemAPI.svelte";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
export let bucket
|
||||
let details_hidden = true
|
||||
@@ -24,6 +26,8 @@ const delete_bucket = async () => {
|
||||
} catch (err) {
|
||||
alert("Failed to delete bucket! "+err)
|
||||
}
|
||||
|
||||
dispatch("refresh");
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -1,17 +1,17 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import Bucket from "./Bucket.svelte";
|
||||
import UserBucket from "./UserBucket.svelte";
|
||||
import Spinner from "../util/Spinner.svelte";
|
||||
import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte";
|
||||
import NewBucket from "./NewBucket.svelte";
|
||||
import { fs_get_buckets, fs_create_bucket } from "../filesystem/FilesystemAPI.svelte";
|
||||
|
||||
let loading = true;
|
||||
let buckets = [];
|
||||
let loading = true
|
||||
let buckets = []
|
||||
|
||||
let new_bucket;
|
||||
let creating_bucket = false;
|
||||
let creating_bucket = false
|
||||
let new_bucket_name
|
||||
|
||||
const get_buckets = async () => {
|
||||
loading = true;
|
||||
try {
|
||||
let resp = await fs_get_buckets();
|
||||
buckets = resp.buckets;
|
||||
@@ -22,6 +22,23 @@ const get_buckets = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const create_bucket = async () => {
|
||||
if (!new_bucket_name.value) {
|
||||
alert("Please enter a name!")
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
let bucket = await fs_create_bucket(new_bucket_name.value)
|
||||
console.log(bucket)
|
||||
} catch (err) {
|
||||
alert("Failed to create bucket! "+err)
|
||||
}
|
||||
|
||||
creating_bucket = false
|
||||
get_buckets();
|
||||
}
|
||||
|
||||
onMount(get_buckets);
|
||||
</script>
|
||||
|
||||
@@ -42,29 +59,40 @@ onMount(get_buckets);
|
||||
</button>
|
||||
</div>
|
||||
{#if creating_bucket}
|
||||
<NewBucket bind:this={new_bucket}></NewBucket>
|
||||
<div class="highlight_light">
|
||||
<form on:submit|preventDefault={create_bucket}>
|
||||
<table class="form">
|
||||
<tr>
|
||||
<td>
|
||||
Name
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" bind:this={new_bucket_name}/>
|
||||
</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}
|
||||
|
||||
<h2>Persistent buckets</h2>
|
||||
<p>
|
||||
These buckets don't expire, but have limited storage space and
|
||||
bandwidth. Their limits can be raised by buying a subscription.
|
||||
</p>
|
||||
{#each buckets as bucket}
|
||||
<Bucket bucket={bucket}></Bucket>
|
||||
<UserBucket bucket={bucket} on:refresh={get_buckets}></UserBucket>
|
||||
{/each}
|
||||
<br/>
|
||||
<h2>Temporary buckets</h2>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.spinner_container {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user