add rules read timeout of 30 seconds

src/routes/register/Register.svelte

@@ -55,7 +55,9 @@
 	}
 
 	let rulesAccepted = false;
-	let rulesModal: HTMLDialogElement | null = null;
+	let rulesModal: HTMLDialogElement;
+	let rulesModalSecondsOpened = 0;
+	let rulesModalTimer: number | null = null;
 
 	let inputsInvalidMessage: string | null = 'Bitte fülle alle erforderlichen Felder aus';
 	let registerRequest: Promise<void> | null = null;
@@ -162,6 +164,7 @@
 					if (!rulesAccepted) {
 						e.detail.target.checked = false;
 						rulesModal.show();
+						rulesModalTimer = setInterval(() => rulesModalSecondsOpened++, 1000);
 					}
 				}}
 				bind:inputElement={rulesInput}
@@ -219,7 +222,14 @@
 	</div>
 </form>
 
-<dialog class="modal" bind:this={rulesModal}>
+<dialog
+	class="modal"
+	on:close={() => {
+		clearInterval(rulesModalTimer);
+		rulesModalTimer = null;
+	}}
+	bind:this={rulesModal}
+>
 	<form method="dialog" class="modal-box flex max-w-[95%] md:max-w-[90%] lg:max-w-[75%]">
 		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
 		<div class="overflow-auto">
@@ -248,15 +258,30 @@
 					<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
 				{/each}
 			</div>
-			<div>
+			<div
+				class="relative w-min"
+				title={rulesModalSecondsOpened < 30
+					? `Regeln können in ${Math.max(
+							30 - rulesModalSecondsOpened,
+							0
+					  )} Sekunden akzeptiert werden`
+					: ''}
+			>
+				<div class="absolute top-0 left-0 h-full w-full overflow-hidden rounded-lg">
+					<div
+						style="width: {Math.min((rulesModalSecondsOpened / 30) * 100, 100)}%"
+						class="h-full bg-base-300"
+					/>
+				</div>
 				<Input
 					id="rules-accept"
 					type="submit"
 					value="Akzeptieren"
+					disabled={rulesModalSecondsOpened < 30}
+					containerClass="bg-transparent z-[1] relative"
 					on:click={() => {
 						rulesAccepted = true;
 						rulesInput.checked = true;
-						// doesn't get triggered by `rulesInput.checked = true` so it must be called manually
 						checkInputs();
 					}}
 				/>