Add API keys page

res/include/style/layout.css

@@ -130,7 +130,7 @@ body, .checkers {
 	transition: left 0.5s;
 	padding: 70px 0 100px 0;
 }
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
 	.page_navigation {
 		left: -18em;
 	}

svelte/src/user_home/APIKeys.svelte

@@ -0,0 +1,127 @@
+<script>
+import { formatDate } from "../util/Formatting.svelte";
+import Spinner from "../util/Spinner.svelte";
+
+let loading = false
+let loaded = false
+let rows = []
+
+const load_keys = async () => {
+	loading = true
+	try {
+		const resp = await fetch(window.api_endpoint+"/user/session")
+		if(resp.status >= 400) {
+			let json = await resp.json()
+			if (json.value === "authentication_failed") {
+				window.location = "/login"
+				return
+			} else {
+				throw new Error(json.message)
+			}
+		}
+		rows = await resp.json()
+		rows.forEach(row => {
+			row.creation_date = new Date(row.creation_time)
+			row.last_used_date = new Date(row.last_used_time)
+		})
+		rows.sort((a, b) => {
+			return b.last_used_date - a.last_used_date
+		});
+	} catch (err) {
+		alert(err)
+	} finally {
+		loading = false
+		loaded = true
+	}
+};
+
+const logout = async (key) => {
+	loading = true
+
+	try {
+		const resp = await fetch(
+			window.api_endpoint+"/user/session",
+			{
+				method: "DELETE",
+				headers: {
+					"Authorization": "Basic "+btoa(":"+key),
+				}
+			}
+		);
+		if(resp.status >= 400) {
+			throw new Error(await resp.text());
+		}
+	} catch (err) {
+		alert("Failed to delete key: "+err)
+	}
+
+	load_keys();
+}
+</script>
+
+<div>
+	{#if loading}
+		<div class="spinner_container">
+			<Spinner />
+		</div>
+	{/if}
+	<div class="limit_width">
+		{#if !loaded}
+			<div class="highlight_blue">
+				<h2>Warning</h2>
+				<p>
+					API keys are sensitive information. They can be used to gain
+					full control over your account. Do not show your API keys to
+					someone or something you don't trust!
+				</p>
+				<button class="button_red" on:click={load_keys}>
+					<i class="icon">lock_open</i> Show API keys
+				</button>
+			</div>
+		{/if}
+
+		<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
+			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.
+		</p>
+	</div>
+	<table style="text-align: left;">
+		<tr>
+			<td>Key</td>
+			<td>Created</td>
+			<td>Last used ▼</td>
+			<td>IP address</td>
+			<td></td>
+		</tr>
+		{#each rows as row}
+			<tr style="border-bottom: none;">
+				<td>{row.auth_key}</td>
+				<td>{formatDate(row.creation_time, true, true, false)}</td>
+				<td>{formatDate(row.last_used_time, true, true, false)}</td>
+				<td>{row.creation_ip_address}</td>
+				<td>
+					<button on:click|preventDefault={() => {logout(row.auth_key)}} class="button button_red">
+						<i class="icon">delete</i>
+					</button>
+				</td>
+			</tr>
+			<tr>
+				<td colspan="5">User-Agent: {row.user_agent}</td>
+			</tr>
+		{/each}
+	</table>
+</div>
+
+<style>
+.spinner_container {
+	position: absolute;
+	top: 10px;
+	left: 10px;
+	height: 100px;
+	width: 100px;
+	z-index: 1000;
+}
+</style>

svelte/src/user_home/AccountSettings.svelte

@@ -81,6 +81,7 @@ let name_change = {
 			name: "new_username",
 			label: "New name",
 			type: "username",
+			default_value: window.user.username,
 			description: `changing your username also changes the name used to
 				log in. If you forget your username you can still log in using
 				your e-mail address if you have one configured`,

svelte/src/user_home/Router.svelte

@@ -2,6 +2,7 @@
 import { onMount } from "svelte";
 import Home from "./Home.svelte";
 import AccountSettings from "./AccountSettings.svelte";
+import APIKeys from "./APIKeys.svelte";
 
 let page = ""
 
@@ -37,12 +38,21 @@ onMount(() => {
 		<i class="icon">settings</i>
 		Account settings
 	</a>
+	<a class="button tab"
+		href="/user/api_keys"
+		class:button_highlight={page === "api_keys"}
+		on:click|preventDefault={() => {navigate("api_keys", "API keys")}}>
+		<i class="icon">vpn_key</i>
+		API keys
+	</a>
 	<hr/>
 
 	{#if page === ""}
 	<Home></Home>
 	{:else if page === "settings"}
 	<AccountSettings></AccountSettings>
+	{:else if page === "api_keys"}
+	<APIKeys></APIKeys>
 	{/if}
 </div>