add admin admin settings

src/lib/components/Input/Badges.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	// eslint-disable-next-line no-undef
+	type T = $$Generic;
+
+	export let id: string | null = null;
+	export let name: string | null = null;
+	export let disabled = true;
+	export let available: string[] | { [key: string]: T } = {};
+	export let value: T[] = [];
+</script>
+
+<div class="flex items-center gap-4">
+	<select
+		{id}
+		{name}
+		class="select select-bordered select-xs"
+		disabled={disabled || available.length === 0}
+		on:change={(e) => {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			value.push(Object.values(available)[Object.keys(available).indexOf(e.target.value)]);
+			value = value;
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			e.target.value = '-';
+		}}
+	>
+		<option selected hidden>-</option>
+		{#each Object.keys(available) as badge}
+			<option
+				hidden={value.find(
+					(v) => v === Object.values(available)[Object.keys(available).indexOf(badge)]
+				) !== undefined}>{badge}</option
+			>
+		{/each}
+	</select>
+	<div class="flex flow flex-wrap gap-2">
+		{#each value as badge, i}
+			{#if Object.values(available).indexOf(badge) !== -1}
+				<div class="badge badge-outline gap-1">
+					<button
+						{disabled}
+						on:click={() => {
+							value.splice(i, 1);
+							value = value;
+						}}>✕</button
+					>
+					{Object.keys(available)[Object.values(available).indexOf(badge)]}
+				</div>
+			{/if}
+		{/each}
+	</div>
+</div>

src/lib/components/Input/Input.svelte

@@ -3,10 +3,11 @@
 <script lang="ts">
 	import { IconSolid } from 'svelte-heros-v2';
 
-	export let id: string;
+	export let id: string | null = null;
 	export let name: string | null = null;
 	export let type: string;
 	export let value: string | null = null;
+	export let placeholder: string | null = null;
 	export let required = false;
 	export let disabled = false;
 
@@ -18,7 +19,7 @@
 <!-- the cursor-not-allowed class must be set here because a disabled button does not respect the 'cursor' css property -->
 <div class={type === 'submit' && disabled ? 'cursor-not-allowed' : ''}>
 	{#if type === 'submit'}
-		<input class="btn" {id} type="submit" {value} {disabled} bind:this={inputElement} />
+		<input class="btn" {id} type="submit" {disabled} bind:value bind:this={inputElement} />
 	{:else}
 		<div>
 			{#if $$slots.label}
@@ -31,24 +32,29 @@
 					</span>
 				</label>
 			{/if}
-			<div class="flex items-center" class:sm:max-w-[16rem]={type !== 'checkbox'}>
+			<div class="relative flex items-center" class:sm:max-w-[16rem]={type !== 'checkbox'}>
 				<input
 					class:checkbox={type === 'checkbox'}
-					class:input,input-bordered={type !== 'checkbox'}
-					class:w-[100%]={initialType !== 'password' && initialType !== 'checkbox'}
+					class:input,input-bordered,w-[100%]={type !== 'checkbox'}
 					class:pr-11={initialType === 'password'}
 					{id}
 					{name}
 					{type}
 					{value}
+					{placeholder}
 					{required}
 					{disabled}
-					autocomplete="off"
 					bind:this={inputElement}
+					autocomplete="off"
+					on:input={(e) => {
+						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+						// @ts-ignore
+						value = e.target?.value;
+					}}
 				/>
 				{#if initialType === 'password'}
 					<button
-						class="relative right-9"
+						class="absolute right-3"
 						type="button"
 						on:click={() => {
 							type = type === 'password' ? 'text' : 'password';

src/lib/components/Toast/ErrorToast.svelte

@@ -46,7 +46,7 @@
 		<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>
+				<slot />
 			</div>
 			<progress
 				class="progress progress-error absolute bottom-0 h-[3px] w-full bg-[rgba(0,0,0,0.6)]"