fix(frontend): validate username

frontend/src/routes/user/create_workspace@user.svelte

@@ -15,10 +15,12 @@
 	let domain = ''
 
 	let errorId = ''
+	let errorUser = ''
 
 	$: id = name.toLowerCase().replace(/\s/gi, '-')
 
 	$: validateName(id)
+	$: validateUsername(username)
 
 	async function validateName(id: string): Promise<void> {
 		let exists = await WorkspaceService.existsWorkspace({ requestBody: { id } })
@@ -31,6 +33,14 @@
 		}
 	}
 
+	async function validateUsername(username: string): Promise<void> {
+		if (username != '' && !/^\w+$/.test(username)) {
+			errorUser = 'username can only contain letters and numbers'
+		} else {
+			errorUser = ''
+		}
+	}
+
 	async function createWorkspace(): Promise<void> {
 		await WorkspaceService.createWorkspace({
 			requestBody: {
@@ -100,12 +110,15 @@
 	</label>
 	<label class="block pb-2">
 		<span class="text-gray-700">your username in that workspace:</span>
+		{#if errorUser}
+			<span class="text-red-500 text-xs">{errorId}</span>
+		{/if}
 		<input bind:value={username} on:keyup={handleKeyUp} class="default-input" />
 	</label>
 	<div class="flex flex-row justify-between pt-4">
 		<a href="/user/workspaces">&leftarrow; Back to workspaces</a>
 		<button
-			disabled={errorId != '' || !name || !username || !id}
+			disabled={errorId != '' || errorUser != '' || !name || !username || !id}
 			class="default-button"
 			type="button"
 			on:click={createWorkspace}