Add user activity page

svelte/src/admin_panel/AbuseReport.svelte

@@ -77,7 +77,7 @@ let set_status = async (action, report_type) => {
 			<iframe
 				title="File preview"
 				src="/u/{report.file.id}?embed"
-				style="border: none; width: 100%; height: 500px; border-radius: 6px;"
+				style="border: none; width: 100%; height: 600px; border-radius: 16px;"
 			></iframe>
 			{/if}
 		</div>

svelte/src/user_home/APIKeys.svelte

@@ -112,7 +112,7 @@ const logout = async (key) => {
 
 	<p>
 		If you delete the API key that you are currently using you will be
-		logged out of your account. API keys expire 90 days after the last
+		logged out of your account. API keys expire 30 days after the last
 		time they're used. If you think someone is using your account
 		without your authorization it's probably a good idea to delete all
 		your keys.

svelte/src/user_home/ActivityLog.svelte

@@ -0,0 +1,119 @@
+<script>
+import { onMount } from "svelte";
+import { formatDataVolume, formatDate } from "../util/Formatting.svelte";
+import Spinner from "../util/Spinner.svelte";
+import Euro from "../util/Euro.svelte"
+
+let loading = false
+let months = []
+
+const load_activity = async () => {
+	loading = true
+	try {
+		// We keep fetching history until we have fetched two months without
+		// any activity
+		let empty_months = 0
+		let now = new Date()
+		while (empty_months < 2) {
+			const resp = await fetch(
+				window.api_endpoint+"/user/activity/" +
+					now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2),
+			)
+			if(resp.status >= 400) {
+				let json = await resp.json()
+				if (json.value === "authentication_failed") {
+					window.location = "/login"
+					return
+				} else {
+					throw new Error(json.message)
+				}
+			}
+
+			let month = {
+				rows: await resp.json(),
+				month: now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2),
+			}
+
+			if (month.rows.length === 0) {
+				empty_months++
+				continue
+			}
+			months.push(month)
+			months = months
+
+			// Fetch the previous month
+			now.setMonth(now.getMonth()-1)
+		}
+	} catch (err) {
+		alert(err)
+	} finally {
+		loading = false
+	}
+};
+onMount(() => {
+	load_activity()
+})
+</script>
+
+{#if loading}
+	<div class="spinner_container">
+		<Spinner />
+	</div>
+{/if}
+
+<section>
+	<h2>Account activity log</h2>
+	<p>
+		Here you can see files that have recently expired or have been blocked
+		for breaking the content policy.
+	</p>
+
+	{#each months as month}
+		<h3>{month.month}</h3>
+		<div class="table_scroll">
+			<table style="text-align: left;">
+				<thead>
+					<tr>
+						<td>Time</td>
+						<td>Event</td>
+						<td>File name</td>
+						<td>File removal reason</td>
+					</tr>
+				</thead>
+				<tbody>
+					{#each month.rows as row}
+						<tr>
+							<td>
+								{formatDate(row.time, true, true, false)}
+							</td>
+							<td>
+								{#if row.event === "file_instance_blocked"}
+									File blocked for abuse
+								{:else if row.event === "file_instance_expired"}
+									File expired
+								{/if}
+							</td>
+							<td>
+								{row.file_name}
+							</td>
+							<td>
+								{row.file_removal_reason}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/each}
+</section>
+
+<style>
+.spinner_container {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	height: 100px;
+	width: 100px;
+	z-index: 1000;
+}
+</style>

svelte/src/user_home/Router.svelte

@@ -6,6 +6,7 @@ import APIKeys from "./APIKeys.svelte";
 import Transactions from "./Transactions.svelte";
 import Subscription from "./Subscription.svelte";
 import ConnectApp from "./ConnectApp.svelte";
+import ActivityLog from "./ActivityLog.svelte";
 
 let page = ""
 
@@ -58,6 +59,13 @@ onMount(() => {
 			<i class="icon">vpn_key</i>
 			API keys
 		</a>
+		<a class="button"
+			href="/user/activity"
+			class:button_highlight={page === "activity"}
+			on:click|preventDefault={() => {navigate("activity", "Activity log")}}>
+			<i class="icon">list</i>
+			Activity log
+		</a>
 		<a class="button"
 			href="/user/subscription"
 			class:button_highlight={page === "subscription"}
@@ -84,6 +92,8 @@ onMount(() => {
 	<AccountSettings/>
 {:else if page === "api_keys"}
 	<APIKeys/>
+{:else if page === "activity"}
+	<ActivityLog/>
 {:else if page === "connect_app"}
 	<ConnectApp/>
 {:else if page === "transactions"}

svelte/src/user_home/Transactions.svelte

@@ -10,9 +10,11 @@ let months = []
 const load_transactions = async () => {
 	loading = true
 	try {
-		// We keep fetching history until there is no history left
+		// We keep fetching history until we have fetched three months without
+		// any transactions
+		let empty_months = 0
 		let now = new Date()
-		while (true) {
+		while (empty_months < 3) {
 			const resp = await fetch(
 				window.api_endpoint+"/user/transactions/" +
 					now.getFullYear()+"-"+("00"+(now.getMonth()+1)).slice(-2),
@@ -39,7 +41,8 @@ const load_transactions = async () => {
 			}
 
 			if (month.rows.length === 0) {
-				break
+				empty_months++
+				continue
 			}
 
 			month.rows.forEach(row => {