fnx_web/svelte/src/user_home/APIKeys.svelte

<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>