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

src/lib/components/Modal/Modal.svelte

@@ -0,0 +1,103 @@
+<style>
+	.dialog {
+		@apply inline-block;
+		@apply bg-white;
+		@apply rounded-lg;
+		@apply text-left;
+		@apply overflow-hidden;
+		@apply shadow-xl;
+		@apply transform;
+		@apply transition-all;
+		@apply my-8;
+
+		width: 95%;
+	}
+	.my-max-w-xl {
+		@apply max-w-xl;
+	}
+	.my-max-w-2xl {
+		@apply max-w-2xl;
+	}
+	.my-max-w-3xl {
+		@apply max-w-3xl;
+	}
+	.my-max-w-4xl {
+		@apply max-w-4xl;
+	}
+	.my-max-w-5xl {
+		@apply max-w-5xl;
+	}
+	.my-max-w-6xl {
+		@apply max-w-6xl;
+	}
+	.my-max-w-7xl {
+		@apply max-w-7xl;
+	}
+	.my-align-middle {
+		@apply align-middle;
+	}
+	.h90 {
+		max-height: 90vh;
+	}
+</style>
+
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	export let size = 'xl'; // https://tailwindcss.com/docs/max-width#class-reference
+	export let open = false;
+	export let scrollable = true;
+	export let verticalAlign = 'middle';
+</script>
+
+<!-- This example requires Tailwind CSS v2.0+ -->
+<div
+	class:hidden={!open}
+	class:overflow-y-auto={scrollable}
+	class="fixed inset-0 z-50"
+	in:fade={{ delay: 100 }}
+	out:fade={{ delay: 100 }}
+>
+	<div
+		class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+	>
+		<!--
+          Background overlay, show/hide based on modal state.
+  
+          Entering: "ease-out duration-300"
+              From: "opacity-0"
+              To: "opacity-100"
+          Leaving: "ease-in duration-200"
+              From: "opacity-100"
+              To: "opacity-0"
+          -->
+		<div class="fixed inset-0 transition-opacity" aria-hidden="true">
+			<div class="absolute inset-0 bg-gray-500 opacity-75" ></div>
+		</div>
+
+		<!-- This element is to trick the browser into centering the modal contents. -->
+		<span class="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"
+			>&#8203;</span
+		>
+		<!--
+          Modal panel, show/hide based on modal state.
+  
+          Entering: "ease-out duration-300"
+              From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              To: "opacity-100 translate-y-0 sm:scale-100"
+          Leaving: "ease-in duration-200"
+              From: "opacity-100 translate-y-0 sm:scale-100"
+              To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          -->
+
+		<div
+			class="dialog my-max-w-{size} my-align-{verticalAlign}"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="modal-headline"
+		>
+			<div class="h90 flex flex-col">
+				<slot />
+			</div>
+		</div>
+	</div>
+</div>