From 7c59479f2994227385b8debad010e5a3ebff8708 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Sat, 31 Aug 2024 05:04:14 +0200
Subject: [PATCH] Centered key management on page.

---
 pages/auth/keys/+Page.vue | 160 ++++++++++++++++++++------------------
 1 file changed, 85 insertions(+), 75 deletions(-)

diff --git a/pages/auth/keys/+Page.vue b/pages/auth/keys/+Page.vue
index f606b3b..85a1674 100644
--- a/pages/auth/keys/+Page.vue
+++ b/pages/auth/keys/+Page.vue
@@ -1,94 +1,96 @@
 <template>
 	<div class="page">
-		<div class="keys-header">
-			<h2 class="heading">API keys</h2>
+		<div class="manager">
+			<div class="keys-header">
+				<h2 class="heading">API keys</h2>
 
-			<div class="keys-actions">
-				<Icon
-					v-tooltip="'Flush all keys'"
-					icon="stack-cancel"
-					@click="flushKeys"
-				/>
+				<div class="keys-actions">
+					<Icon
+						v-tooltip="'Flush all keys'"
+						icon="stack-cancel"
+						@click="flushKeys"
+					/>
 
-				<button
-					class="button"
-					@click="createKey"
-				>New key</button>
+					<button
+						class="button"
+						@click="createKey"
+					>New key</button>
+				</div>
 			</div>
-		</div>
 
-		<div
-			v-if="newKey"
-			class="newkey"
-		>
-			<p class="key-info">
-				Your new key identified by <strong>{{ newKey.identifier }}</strong> is
-				<input
-					:value="newKey.key"
-					class="input"
-					@click="copyKey"
-				>
-			</p>
-
-			<p class="key-info">Please store this key securely, you will <strong>not</strong> be able to retrieve it later. If you lose it, you must generate a new key.</p>
-		</div>
-
-		<ul
-			v-if="keys.length > 0"
-			class="keys nolist"
-		>
-			<li
-				v-for="key in keys"
-				:key="`key-${key.id}`"
-				class="key"
+			<div
+				v-if="newKey"
+				class="newkey"
 			>
-				<div class="key-row key-header">
-					<strong class="key-value key-identifier ellipsis">{{ key.identifier }}</strong>
+				<p class="key-info">
+					Your new key identified by <strong>{{ newKey.identifier }}</strong> is
+					<input
+						:value="newKey.key"
+						class="input"
+						@click="copyKey"
+					>
+				</p>
 
-					<span class="key-actions">
-						<Icon
-							icon="bin"
-							@click="removeKey(key)"
-						/>
-					</span>
-				</div>
+				<p class="key-info">Please store this key securely, you will <strong>not</strong> be able to retrieve it later. If you lose it, you must generate a new key.</p>
+			</div>
 
-				<div class="key-row key-details">
-					<span class="key-value key-created">
-						<Icon icon="plus-circle" />
+			<ul
+				v-if="keys.length > 0"
+				class="keys nolist"
+			>
+				<li
+					v-for="key in keys"
+					:key="`key-${key.id}`"
+					class="key"
+				>
+					<div class="key-row key-header">
+						<strong class="key-value key-identifier ellipsis">{{ key.identifier }}</strong>
 
-						<time
-							v-tooltip="format(key.createdAt, 'yyyy-MM-dd hh:mm:ss')"
-							:datetime="key.createdAt.toISOString()"
-						>{{ formatDistanceToNowStrict(key.createdAt) }} ago</time>
-					</span>
+						<span class="key-actions">
+							<Icon
+								icon="bin"
+								@click="removeKey(key)"
+							/>
+						</span>
+					</div>
 
-					<span class="key-value key-used">
-						<Icon icon="history" />
+					<div class="key-row key-details">
+						<span class="key-value key-created">
+							<Icon icon="plus-circle" />
 
-						<template v-if="key.lastUsedAt">
 							<time
-								v-tooltip="`${key.lastUsedIp} at ${format(key.lastUsedAt, 'yyyy-MM-dd hh:mm:ss')}`"
-								:datetime="key.lastUsedAt.toISOString()"
-							>{{ formatDistanceToNowStrict(key.lastUsedAt) }} ago</time>
-						</template>
+								v-tooltip="format(key.createdAt, 'yyyy-MM-dd hh:mm:ss')"
+								:datetime="key.createdAt.toISOString()"
+							>{{ formatDistanceToNowStrict(key.createdAt) }} ago</time>
+						</span>
 
-						<template v-else>Never</template>
-					</span>
-				</div>
-			</li>
-		</ul>
+						<span class="key-value key-used">
+							<Icon icon="history" />
 
-		<div
-			v-if="keys.length > 0"
-			class="info"
-		>
-			<h3 class="info-heading">HTTP headers</h3>
+							<template v-if="key.lastUsedAt">
+								<time
+									v-tooltip="`${key.lastUsedIp} at ${format(key.lastUsedAt, 'yyyy-MM-dd hh:mm:ss')}`"
+									:datetime="key.lastUsedAt.toISOString()"
+								>{{ formatDistanceToNowStrict(key.lastUsedAt) }} ago</time>
+							</template>
 
-			<code class="headers">
-				Api-User: {{ user.id }}<br>
-				Api-Key: YourSecurelyStoredApiKey12345678
-			</code>
+							<template v-else>Never</template>
+						</span>
+					</div>
+				</li>
+			</ul>
+
+			<div
+				v-if="keys.length > 0"
+				class="info"
+			>
+				<h3 class="info-heading">HTTP headers</h3>
+
+				<code class="headers">
+					Api-User: {{ user.id }}<br>
+					Api-Key: YourSecurelyStoredApiKey12345678
+				</code>
+			</div>
 		</div>
 	</div>
 </template>
@@ -147,7 +149,15 @@ function copyKey(event) {
 
 <style scoped>
 .page {
+	display: flex;
 	flex-grow: 1;
+	justify-content: center;
+}
+
+.manager {
+	width: 1200px;
+	max-width: 100%;
+	box-sizing: border-box;
 	padding: 1rem;
 }