Add page for connecting apps to your account

svelte/src/user_home/APIKeys.svelte

@@ -38,9 +38,15 @@ const load_keys = async () => {
 const create_key = async () => {
 	loading = true
 	try {
+		let form = new FormData()
+		form.append("app_name", "Key generated by user")
+
 		const resp = await fetch(
 			window.api_endpoint+"/user/session",
-			{ method: "POST" }
+			{
+				method: "POST",
+				body: form,
+			}
 		);
 		if(resp.status >= 400) {
 			throw new Error(await resp.text());
@@ -82,6 +88,7 @@ const logout = async (key) => {
 			<Spinner />
 		</div>
 	{/if}
+
 	<div class="limit_width">
 		{#if !loaded}
 			<div class="highlight_yellow">
@@ -134,7 +141,22 @@ const logout = async (key) => {
 					</td>
 				</tr>
 				<tr>
-					<td colspan="5">User-Agent: {row.user_agent}</td>
+					<td colspan="1">
+						App:
+						{#if row.app_name === "Pixeldrain Website"}
+							<img src="/res/img/pixeldrain_32.png" alt="Pixeldrain logo" class="app_icon"/>
+							Website
+						{:else if row.app_name === "sharex"}
+							<img src="/res/img/sharex.png" alt="ShareX logo" class="app_icon"/>
+							ShareX
+						{:else if row.app_name === "jdownloader"}
+							<img src="/res/img/jdownloader.png" alt="JDownloader logo" class="app_icon"/>
+							JDownloader
+						{:else}
+							{row.app_name}
+						{/if}
+					</td>
+					<td colspan="4">User-Agent: {row.user_agent}</td>
 				</tr>
 			{/each}
 		</table>
@@ -157,4 +179,9 @@ const logout = async (key) => {
 }
 .toolbar > * { flex: 0 0 auto; }
 .toolbar_spacer { flex: 1 1 auto; }
+
+.app_icon {
+	height: 1.6em;
+	vertical-align: middle;
+}
 </style>