Add more details to user ban table

svelte/src/admin_panel/AbuseReport.svelte

@@ -22,12 +22,18 @@ let set_status = async (action, report_type) => {
 			<img class="file_icon" src={"/api/file/"+report.file.id+"/thumbnail"} alt="File thumbnail"/>
 		</div>
 
-		<div class="title">{report.file.name}</div>
+		<div class="title">
-			<div class="stats">Type<br/>
+			{report.file.name}
-				{report.file.abuse_type === "" ? report.type : report.file.abuse_type}
+		</div>
-			</div>
+		<div class="stats">
+			Type<br/>
+			{report.file.abuse_type === "" ? report.type : report.file.abuse_type}
+		</div>
 		{#if report.status !== "pending"}
-			<div class="stats">Status<br/>{report.status}</div>
+			<div class="stats">
+				Status<br/>
+				{report.status}
+			</div>
 		{/if}
 		<div class="stats">R<br/>{report.reports.length}</div>
 		<div class="stats">V<br/>{formatNumber(report.file.views, 3)}</div>

svelte/src/admin_panel/UserBans.svelte

@@ -1,8 +1,10 @@
 <script>
 import { onMount } from "svelte";
-import { formatDate } from "../util/Formatting.svelte";
+import { formatDataVolume, formatDate } from "../util/Formatting.svelte";
 import Expandable from "../util/Expandable.svelte";
 import LoadingIndicator from "../util/LoadingIndicator.svelte";
+import Button from "../layout/Button.svelte"
+import Euro from "../util/Euro.svelte"
 
 let loading = true
 let rows = []
@@ -48,6 +50,22 @@ const delete_ban = async (userid) => {
 	get_bans();
 }
 
+const impersonate = async user_id => {
+	const form = new FormData()
+	form.append("id", user_id)
+
+	const resp = await fetch(
+		window.api_endpoint+"/admin/impersonate",
+		{ method: "POST", body: form }
+	);
+	if(resp.status >= 400) {
+		alert(await resp.text())
+		return
+	}
+
+	window.open("/user", "_blank")
+}
+
 onMount(get_bans);
 </script>
 
@@ -71,15 +89,18 @@ onMount(get_bans);
 		</button>
 	</div>
 
-	{#each rows as row (row.address)}
+	{#each rows as row (row.user_id)}
 		<Expandable expanded={expanded} click_expand>
 			<div slot="header" class="header">
 				<div class="title">
-					{row.username}<br/>
+					{row.user.username}
-					{row.user_id}
 				</div>
 				<div class="stats">
-					Offences<br/>
+					Type<br/>
+					{row.offences[0].reason}
+				</div>
+				<div class="stats">
+					Count<br/>
 					{row.offences.length}
 				</div>
 				<div class="stats">
@@ -90,6 +111,39 @@ onMount(get_bans);
 					<i class="icon">delete</i>
 				</button>
 			</div>
+
+			<Button click={() => impersonate(row.user_id)} icon="login" label="Impersonate user"/>
+			<table>
+				<tr>
+					<td>Username</td>
+					<td>{row.user.username}</td>
+				</tr>
+				<tr>
+					<td>ID</td>
+					<td>{row.user_id}</td>
+				</tr>
+				<tr>
+					<td>Email</td>
+					<td>{row.user.email}</td>
+				</tr>
+				<tr>
+					<td>Subscription</td>
+					<td>{row.user.subscription.name}</td>
+				</tr>
+				<tr>
+					<td>Credit balance</td>
+					<td><Euro amount={row.user.balance_micro_eur}/></td>
+				</tr>
+				<tr>
+					<td>Storage used</td>
+					<td>{formatDataVolume(row.user.storage_space_used, 3)}</td>
+				</tr>
+				<tr>
+					<td>FS Storage used</td>
+					<td>{formatDataVolume(row.user.filesystem_storage_used, 3)}</td>
+				</tr>
+			</table>
+			<br/>
 			<div class="table_scroll">
 				<table>
 					<tr>