refactor login page, change routes to token-based, add service classes

src/routes/(angemeldet)/list/+page.svelte

@@ -1,103 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import Trash from '$lib/icons/Trash.svelte';
-	import Folder from '$lib/icons/Folder.svelte';
-
-	/**
-	 * @type any[]
-	 */
-	let list: any[] = [];
-	//$: list;
-
-	onMount(async () => {
-		const response = await fetch('/api/list');
-		const stream = await response.body;
-		if (!stream) return;
-
-		const reader = stream.getReader();
-
-		while (true) {
-			const { done, value } = await reader.read();
-			if (done) return;
-
-			const objs = new TextDecoder()
-				.decode(value)
-				.split('\n')
-				.filter((i) => i.length > 0)
-				.map((i) => JSON.parse(i));
-
-			list = list.concat(objs);
-		}
-	});
-
-	async function delete_item(ev: Event) {
-		let delete_item = window.confirm('Bist du sicher?');
-
-		if (delete_item) {
-			const target = ev.currentTarget as HTMLElement | null;
-			if (!target) return;
-			let filename = target.id.split('del__')[1];
-			
-			// delete request
-			// --------------
-
-			let url = `/api/list/${filename}`;
-
-			try {
-				const response = await fetch(url, { method: 'DELETE' });
-				if (response.status == 204) {
-					setTimeout(() => {
-						window.location.reload();
-					}, 500);
-				}
-			} catch (error) {
-				if (error instanceof Error) {
-					console.log(error.message);
-				} else {
-					console.log(error);
-				}
-			}
-		}
-	}
-</script>
-
-<div class="-z-10 bg-white">
-	<div class="flex flex-col items-center justify-center w-full">
-		<h1 class="text-xl">Liste der Vorgänge</h1>
-	</div>
-	<div class="mx-auto flex justify-center max-w-7xl h-full">
-		<ul role="list" class="divide-y divide-gray-100">
-			{#each list as item}
-				<li>
-					<a href="/list/{item.name}" class="flex justify-between gap-x-6 py-5">
-						<div class="flex gap-x-4">
-							<!-- Ordner -->
-							<Folder />
-							<div class="min-w-0 flex-auto">
-								<span class="text-sm font-semibold leading-6 text-gray-900">{item.name}</span>
-								<!-- Delete button -->
-								<button
-									style="padding: 2px"
-									id="del__{item.name}"
-									on:click|preventDefault={delete_item}
-									aria-label="Vorgang {item.name} löschen"
-								>
-									<Trash />
-								</button>
-							</div>
-						</div>
-						<div class="hidden sm:flex sm:flex-col sm:items-end">
-							<p class="text-sm leading-6 text-gray-900">Vorgang</p>
-						</div>
-					</a>
-				</li>
-			{/each}
-		</ul>
-	</div>
-</div>
-
-<style>
-	ul {
-		min-width: 24rem;
-	}
-</style>