From b54bea71929fc29eccd6cf469e2847eaae774f4e Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 16 Feb 2026 11:32:31 +0000
Subject: [PATCH] feat: add email validation and use TextInput in AddUser

Add client-side email format validation with error message display
and disable the Add button when email is invalid. Replace plain
<input> elements with TextInput component for consistent styling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/AddUser.svelte | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/AddUser.svelte b/frontend/src/lib/components/AddUser.svelte
index 741fee68f5..75c69a440b 100644
--- a/frontend/src/lib/components/AddUser.svelte
+++ b/frontend/src/lib/components/AddUser.svelte
@@ -11,6 +11,7 @@
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import { UserPlus } from 'lucide-svelte'
 	import Select from './select/Select.svelte'
+	import TextInput from './text_input/TextInput.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -93,6 +94,12 @@
 		dispatch('new')
 	}
 
+	let emailError = $derived.by(() => {
+		if (!email) return undefined
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+		return emailRegex.test(email) ? undefined : 'Please enter a valid email address'
+	})
+
 	let selected: 'operator' | 'developer' | 'admin' = $state('developer')
 </script>
 
@@ -117,14 +124,18 @@
 						email = v
 					}}
 					disablePortal={true}
+					error={!!emailError}
 				/>
 			{:else}
-				<input type="email" onkeyup={handleKeyUp} placeholder="email" bind:value={email} />
+				<TextInput inputProps={{ type: 'email', onkeyup: handleKeyUp, placeholder: 'email' }} bind:value={email} error={!!emailError} />
+			{/if}
+			{#if emailError}
+				<span class="text-2xs text-red-500 mt-0.5">{emailError}</span>
 			{/if}
 
 			{#if !automateUsernameCreation}
 				<span class="text-xs mb-1 pt-2 leading-6">Username</span>
-				<input type="text" onkeyup={handleKeyUp} placeholder="username" bind:value={username} />
+				<TextInput inputProps={{ type: 'text', onkeyup: handleKeyUp, placeholder: 'username' }} bind:value={username} />
 			{/if}
 
 			<span class="text-xs mb-1 pt-6 leading-6">Role</span>
@@ -161,7 +172,7 @@
 						username = undefined
 					})
 				}}
-				disabled={email === undefined || (!automateUsernameCreation && username === undefined)}
+				disabled={email === undefined || !!emailError || (!automateUsernameCreation && username === undefined)}
 			>
 				Add
 			</Button>