feat: add LDAP sync (#106)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/routes/settings/admin/user-groups/[id]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CustomClaimsInput from '$lib/components/custom-claims-input.svelte';
+	import { Badge } from '$lib/components/ui/badge';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import CustomClaimService from '$lib/services/custom-claim-service';
@@ -58,10 +59,13 @@
 	<title>User Group Details {userGroup.name}</title>
 </svelte:head>
 
-<div>
+<div class="flex items-center justify-between">
 	<a class="text-muted-foreground flex text-sm" href="/settings/admin/user-groups"
 		><LucideChevronLeft class="h-5 w-5" /> Back</a
 	>
+	{#if !!userGroup.ldapId}
+		<Badge variant="default" class="">LDAP</Badge>
+	{/if}
 </div>
 <Card.Root>
 	<Card.Header>
@@ -81,10 +85,17 @@
 
 	<Card.Content>
 		{#await userService.list() then users}
-			<UserSelection {users} bind:selectedUserIds={userGroup.userIds} />
+			<UserSelection
+				{users}
+				bind:selectedUserIds={userGroup.userIds}
+				selectionDisabled={!!userGroup.ldapId}
+			/>
 		{/await}
 		<div class="mt-5 flex justify-end">
-			<Button on:click={() => updateUserGroupUsers(userGroup.userIds)}>Save</Button>
+			<Button
+				disabled={!!userGroup.ldapId}
+				on:click={() => updateUserGroupUsers(userGroup.userIds)}>Save</Button
+			>
 		</div>
 	</Card.Content>
 </Card.Root>

frontend/src/routes/settings/admin/user-groups/user-group-form.svelte

@@ -14,6 +14,7 @@
 	} = $props();
 
 	let isLoading = $state(false);
+	let inputDisabled = $derived(!!existingUserGroup?.ldapId);
 	let hasManualNameEdit = $state(!!existingUserGroup?.friendlyName);
 
 	const userGroup = {
@@ -23,10 +24,7 @@
 
 	const formSchema = z.object({
 		friendlyName: z.string().min(2).max(50),
-		name: z
-			.string()
-			.min(2)
-			.max(255)
+		name: z.string().min(2).max(255)
 	});
 	type FormSchema = typeof formSchema;
 
@@ -57,25 +55,27 @@
 </script>
 
 <form onsubmit={onSubmit}>
-	<div class="flex flex-col gap-3 sm:flex-row">
-		<div class="w-full">
-			<FormInput
-				label="Friendly Name"
-				description="Name that will be displayed in the UI"
-				bind:input={$inputs.friendlyName}
-				onInput={onFriendlyNameInput}
-			/>
+	<fieldset disabled={inputDisabled}>
+		<div class="flex flex-col gap-3 sm:flex-row">
+			<div class="w-full">
+				<FormInput
+					label="Friendly Name"
+					description="Name that will be displayed in the UI"
+					bind:input={$inputs.friendlyName}
+					onInput={onFriendlyNameInput}
+				/>
+			</div>
+			<div class="w-full">
+				<FormInput
+					label="Name"
+					description={`Name that will be in the "groups" claim`}
+					bind:input={$inputs.name}
+					onInput={onNameInput}
+				/>
+			</div>
 		</div>
-		<div class="w-full">
-			<FormInput
-				label="Name"
-				description={`Name that will be in the "groups" claim`}
-				bind:input={$inputs.name}
-				onInput={onNameInput}
-			/>
+		<div class="mt-5 flex justify-end">
+			<Button {isLoading} type="submit">Save</Button>
 		</div>
-	</div>
-	<div class="mt-5 flex justify-end">
-		<Button {isLoading} type="submit">Save</Button>
-	</div>
+	</fieldset>
 </form>

frontend/src/routes/settings/admin/user-groups/user-group-list.svelte

@@ -68,11 +68,13 @@
 					<DropdownMenu.Item href="/settings/admin/user-groups/{item.id}"
 						><LucidePencil class="mr-2 h-4 w-4" /> Edit</DropdownMenu.Item
 					>
-					<DropdownMenu.Item
-						class="text-red-500 focus:!text-red-700"
-						on:click={() => deleteUserGroup(item)}
-						><LucideTrash class="mr-2 h-4 w-4" />Delete</DropdownMenu.Item
-					>
+					{#if !item.ldapId}
+						<DropdownMenu.Item
+							class="text-red-500 focus:!text-red-700"
+							on:click={() => deleteUserGroup(item)}
+							><LucideTrash class="mr-2 h-4 w-4" />Delete</DropdownMenu.Item
+						>
+					{/if}
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
 		</Table.Cell>

frontend/src/routes/settings/admin/user-groups/user-selection.svelte

@@ -7,8 +7,11 @@
 
 	let {
 		users: initialUsers,
+		selectionDisabled = false,
 		selectedUserIds = $bindable()
-	}: { users: Paginated<User>; selectedUserIds: string[] } = $props();
+	}: { users: Paginated<User>; 
+		selectionDisabled?: boolean;
+		selectedUserIds: string[] } = $props();
 
 	const userService = new UserService();
 
@@ -23,6 +26,7 @@
 		{ label: 'Email', sortColumn: 'email' }
 	]}
 	bind:selectedIds={selectedUserIds}
+	{selectionDisabled}
 >
 	{#snippet rows({ item })}
 		<Table.Cell>{item.firstName} {item.lastName}</Table.Cell>