show modal on rules popup when clicking on button in the first 30 seconds

src/routes/register/Register.svelte

@@ -38,7 +38,7 @@
 
 	async function sendRegister() {
 		// eslint-disable-next-line no-async-promise-executor
-		registerRequest = new Promise(async (resolve, reject) => {
+		registerRequest = new Promise<void>(async (resolve, reject) => {
 			console.log(birthdayInput.valueAsDate);
 			if (
 				(birthdayInput.valueAsDate || new Date()) >
@@ -64,6 +64,9 @@
 			} else {
 				reject(Error(`${response.statusText} (${response.status})`));
 			}
+		}).catch((e) => {
+			errorMessage = (e as Error).message;
+			registerRequest = null;
 		});
 	}
 
@@ -74,6 +77,8 @@
 
 	let inputsInvalidMessage: string | null = 'Bitte fülle alle erforderlichen Felder aus';
 	let registerRequest: Promise<void> | null = null;
+
+	let errorMessage: string = '';
 </script>
 
 <h1 class="text-center text-3xl lg:text-5xl">Anmeldung</h1>
@@ -218,21 +223,6 @@
 					<span
 						class="relative top-[calc(50%-12px)] left-[calc(50%-12px)] row-[1] col-[1] loading loading-ring"
 					/>
-				{:catch error}
-					<dialog
-						class="modal"
-						on:close={() => setTimeout(() => (registerRequest = null), 200)}
-						open
-					>
-						<form method="dialog" class="modal-box">
-							<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
-							<h3 class="font-bold text-lg">Fehler</h3>
-							<p class="py-4">{error.message}</p>
-						</form>
-						<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.2)]">
-							<button>close</button>
-						</form>
-					</dialog>
 				{/await}
 			{/if}
 		{/key}
@@ -275,6 +265,7 @@
 					<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
 				{/each}
 			</div>
+			<!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
 			<div
 				class="relative w-min"
 				title={rulesModalSecondsOpened < 30
@@ -283,6 +274,12 @@
 							0
 					  )} Sekunden akzeptiert werden`
 					: ''}
+				on:click={() => {
+					if (rulesModalSecondsOpened < 30) {
+						errorMessage =
+							'Bitte lies die Regeln aufmerksam durch. Du kannst erst in einigen Sekunden fortfahren.';
+					}
+				}}
 			>
 				<div class="absolute top-0 left-0 h-full w-full overflow-hidden rounded-lg">
 					<div
@@ -309,3 +306,16 @@
 		<button>close</button>
 	</form>
 </dialog>
+
+{#if errorMessage}
+	<dialog class="modal" on:close={() => setTimeout(() => (errorMessage = ''), 200)} open>
+		<form method="dialog" class="modal-box z-50">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+			<h3 class="font-bold text-lg">Achtung</h3>
+			<p class="py-4">{errorMessage}</p>
+		</form>
+		<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.2)]">
+			<button>close</button>
+		</form>
+	</dialog>
+{/if}