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

src/lib/components/Notification.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	export let title = 'Erfolgreich';
+	export let show = false;
+
+	let visible = false;
+
+	$: show && startShow();
+
+	function startShow() {
+		if (!show) {
+			return;
+		}
+		visible = true;
+		setTimeout(() => {
+			visible = false;
+		}, 4000);
+	}
+</script>
+
+<div
+	class:hidden={!visible}
+	class="pointer-events-none fixed inset-0 z-50 flex items-end justify-center px-4 py-6 sm:items-start sm:justify-end sm:p-6"
+>
+	<!--
+    Notification panel, show/hide based on alert state.
+
+    Entering: "transform ease-out duration-300 transition"
+      From: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+      To: "translate-y-0 opacity-100 sm:translate-x-0"
+    Leaving: "transition ease-in duration-100"
+      From: "opacity-100"
+      To: "opacity-0"
+  -->
+	<div
+		class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
+	>
+		<div class="p-4">
+			<div class="flex items-start">
+				<div class="flex-shrink-0">
+					<!-- Heroicon name: outline/check-circle -->
+					<svg
+						class="h-6 w-6 text-green-400"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				</div>
+				<div class="ml-3 w-0 flex-1 pt-0.5">
+					<p class="text-sm font-bold text-gray-900">{title}</p>
+					<p class="mt-1 text-sm text-gray-500">
+						<slot />
+					</p>
+				</div>
+				<div class="ml-4 flex flex-shrink-0">
+					<button
+						class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+					>
+						<span class="sr-only">Close</span>
+						<!-- Heroicon name: solid/x -->
+						<svg
+							class="h-5 w-5"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							aria-hidden="true"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>