add option to add user manually (#22)

src/routes/admin/users/NewUserModal.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import Input from '$lib/components/Input/Input.svelte';
+	import { env } from '$env/dynamic/public';
+	import Select from '$lib/components/Input/Select.svelte';
+	import { errorMessage } from '$lib/stores';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	let firstname: string;
+	let lastname: string;
+	let birthday: string;
+	let phone: string;
+	let username: string;
+	let playertype = 'java';
+
+	async function newUser() {
+		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/users`, {
+			method: 'PUT',
+			body: JSON.stringify({
+				firstname: firstname,
+				lastname: lastname,
+				birthday: birthday,
+				telephone: phone,
+				username: username,
+				playertype: playertype
+			})
+		});
+		if (response.ok) {
+			dispatch('submit', {
+				firstname: firstname,
+				lastname: lastname,
+				birthday: birthday,
+				telephone: phone,
+				username: username,
+				playertype: playertype
+			});
+			globalCloseForm.submit();
+		} else {
+			$errorMessage = (await response.json()).message;
+		}
+	}
+
+	let globalCloseForm: HTMLFormElement;
+
+	let reportForm: HTMLFormElement;
+	let confirmDialog: HTMLDialogElement;
+</script>
+
+<form method="dialog" class="modal-box" bind:this={reportForm}>
+	<button
+		class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+		on:click|preventDefault={() => globalCloseForm.submit()}>✕</button
+	>
+	<h3 class="font-roboto text-xl">Neuer Spieler</h3>
+	<div class="grid grid-cols-2 gap-4">
+		<Input type="text" required bind:value={firstname}>
+			<span slot="label">Vorname</span>
+		</Input>
+		<Input type="text" required bind:value={lastname}>
+			<span slot="label">Nachname</span>
+		</Input>
+		<Input type="date" required bind:value={birthday}>
+			<span slot="label">Geburtstag</span>
+		</Input>
+		<Input type="tel" bind:value={phone}>
+			<span slot="label">Telefonnummer</span>
+		</Input>
+		<Input type="text" required bind:value={username}>
+			<span slot="label">Minecraft-Spielername</span>
+		</Input>
+		<Select required label="Edition" bind:value={playertype}>
+			<option value="java">Java Edition</option>
+			<option value="bedrock">Bedrock Edition</option>
+		</Select>
+	</div>
+	<div class="flex flex-row space-x-2 mt-6">
+		<Input
+			type="submit"
+			value="Hinzufügen"
+			on:click={(e) => {
+				if (reportForm.checkValidity()) {
+					e.detail.preventDefault();
+					confirmDialog.show();
+				}
+			}}
+		/>
+		<Input
+			type="submit"
+			value="Abbrechen"
+			on:click={(e) => {
+				e.detail.preventDefault();
+				globalCloseForm.submit();
+			}}
+		/>
+	</div>
+</form>
+<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]" bind:this={globalCloseForm}>
+	<button>close</button>
+</form>
+
+<dialog class="modal" bind:this={confirmDialog}>
+	<form method="dialog" class="modal-box">
+		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+		<h3 class="font-roboto text-xl mb-2">Spieler hinzufügen?</h3>
+		<div class="flex flex-row space-x-2 mt-6">
+			<Input type="submit" value="Hinzufügen" on:click={newUser} />
+			<Input type="submit" value="Abbrechen" />
+		</div>
+	</form>
+	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
+		<button>close</button>
+	</form>
+</dialog>