add admin login

src/lib/components/Input/Input.svelte

@@ -31,10 +31,11 @@
 					</span>
 				</label>
 			{/if}
-			<div class="flex items-center">
+			<div class="flex items-center" class:sm:max-w-[16rem]={type !== 'checkbox'}>
 				<input
 					class:checkbox={type === 'checkbox'}
-					class:input,input-bordered,w-[100%],sm:max-w-[16rem]={type !== 'checkbox'}
+					class:input,input-bordered={type !== 'checkbox'}
+					class:w-[100%]={initialType !== 'password' && initialType !== 'checkbox'}
 					class:pr-11={initialType === 'password'}
 					{id}
 					{name}

src/lib/components/Toast/ErrorToast.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { IconOutline } from 'svelte-heros-v2';
+	import { fly } from 'svelte/transition';
+	import { onDestroy } from 'svelte';
+
+	export let timeout = 2000;
+	export let show = false;
+
+	export function reset() {
+		progressValue = 1;
+	}
+
+	let progressValue = 100;
+	let intervalClear: ReturnType<typeof setInterval> | undefined;
+
+	function startTimout() {
+		intervalClear = setInterval(() => {
+			if (++progressValue > 100) {
+				clearInterval(intervalClear);
+				show = false;
+				progressValue = 100;
+			}
+		}, timeout / 100);
+	}
+
+	$: if (show) {
+		progressValue = 0;
+		startTimout();
+	}
+
+	onDestroy(() => clearInterval(intervalClear));
+</script>
+
+{#if show && progressValue !== 0}
+	<div
+		in:fly={{ x: 0, duration: 200 }}
+		out:fly={{ x: 400, duration: 400 }}
+		class="toast"
+		on:mouseenter={() => {
+			clearInterval(intervalClear);
+			progressValue = 1;
+		}}
+		on:mouseleave={startTimout}
+		role="alert"
+	>
+		<div class="alert alert-error border-none relative text-gray-900 overflow-hidden">
+			<div class="flex gap-2 z-10">
+				<IconOutline name="exclamation-circle-outline" />
+				<span>Nutzername oder Passwort falsch</span>
+			</div>
+			<progress
+				class="progress progress-error absolute bottom-0 h-[3px] w-full bg-[rgba(0,0,0,0.6)]"
+				value={progressValue}
+				max="100"
+			/>
+		</div>
+	</div>
+{/if}