feat: add validation to custom claim input

frontend/src/lib/components/auto-complete-input.svelte

@@ -16,6 +16,7 @@
 
 	let filteredSuggestions: string[] = $state(suggestions.slice(0, suggestionLimit));
 	let selectedIndex = $state(-1);
+	let keyError: string | undefined = $state();
 
 	let isInputFocused = $state(false);
 
@@ -25,6 +26,13 @@
 	}
 
 	function handleOnInput() {
+		if (value.length > 0 && !/^[A-Za-z0-9]*$/.test(value)) {
+			keyError = 'Only alphanumeric characters are allowed';
+			return;
+		} else {
+			keyError = undefined;
+		}
+
 		filteredSuggestions = suggestions
 			.filter((s) => s.includes(value.toLowerCase()))
 			.slice(0, suggestionLimit);
@@ -75,6 +83,9 @@
 		onfocus={() => (isInputFocused = true)}
 		onblur={() => (isInputFocused = false)}
 	/>
+	{#if keyError}
+		<p class="mt-1 text-sm text-red-500">{keyError}</p>
+	{/if}
 	<Popover.Root
 		open={isOpen}
 		disableFocusTrap