From 971ca4bc75bb4018ea7e4b1df40081ef6863d22d Mon Sep 17 00:00:00 2001
From: bytedream <bytedream@protonmail.com>
Date: Thu, 30 Nov 2023 20:20:12 +0100
Subject: [PATCH] allow only number in phone number input (#10)

---
 src/lib/components/Input/Input.svelte | 19 ++++++++++++++++---
 src/routes/register/Register.svelte   | 13 ++++++++++---
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Input/Input.svelte b/src/lib/components/Input/Input.svelte
index feb04d8..7252e76 100644
--- a/src/lib/components/Input/Input.svelte
+++ b/src/lib/components/Input/Input.svelte
@@ -7,6 +7,7 @@
 	export let type = 'text';
 	export let value: string | null = null;
 	export let placeholder: string | null = null;
+	export let pattern: RegExp | null = null;
 	export let required = false;
 	export let disabled = false;
 	export let readonly = false;
@@ -91,10 +92,22 @@
 					bind:this={inputElement}
 					autocomplete="off"
 					on:input={(e) => {
-						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-						// @ts-ignore
 						value = e.target?.value;
-						input(e);
+						if (pattern && !pattern.test(e.target?.value)) {
+							if (inputElement?.value.endsWith(e.data)) {
+								value = e.target?.value.substring(0, -e.data.length);
+							}
+							return false;
+						}
+						return input(e);
+					}}
+					on:paste={(e) => {
+						if (
+							pattern &&
+							!pattern.test((e.clipboardData || window.clipboardData).getData('text'))
+						) {
+							e.preventDefault();
+						}
 					}}
 					on:click={click}
 				/>
diff --git a/src/routes/register/Register.svelte b/src/routes/register/Register.svelte
index edcb9c9..588d187 100644
--- a/src/routes/register/Register.svelte
+++ b/src/routes/register/Register.svelte
@@ -39,8 +39,15 @@
 	async function sendRegister() {
 		// eslint-disable-next-line no-async-promise-executor
 		registerRequest = new Promise(async (resolve, reject) => {
-			if (birthdayInput.valueAsDate || new Date() > new Date(Date.now() - 1000 * 60 * 60 * 24 * 365 * 6)) {
-				reject(Error('Bitte gib deinen vollständigen Geburtstag und die korrekte Jahreszahl an. Du musst mindestens 6 Jahre alt sein.'))
+			if (
+				birthdayInput.valueAsDate ||
+				new Date() > new Date(Date.now() - 1000 * 60 * 60 * 24 * 365 * 6)
+			) {
+				reject(
+					Error(
+						'Bitte gib deinen vollständigen Geburtstag und die korrekte Jahreszahl an. Du musst mindestens 6 Jahre alt sein.'
+					)
+				);
 				return;
 			}
 
@@ -100,7 +107,7 @@
 			<span slot="label">Geburtstag</span>
 			<span slot="notice">Die Angabe hat keine Auswirkungen auf das Spielgeschehen</span>
 		</Input>
-		<Input id="telephone" name="telephone" type="tel">
+		<Input id="telephone" name="telephone" type="tel" pattern={new RegExp(/^[+()\s/\d]+$/)}>
 			<span slot="label">Telefonnummer</span>
 			<p slot="notice">
 				Diese nutzen wir, um Dich in der Whatsapp-Gruppe zuzuordnen und kontaktieren zu können.