feat: add LDAP sync (#106)

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

frontend/src/routes/settings/admin/application-configuration/+page.svelte

@@ -7,6 +7,7 @@
 	import { toast } from 'svelte-sonner';
 	import AppConfigEmailForm from './forms/app-config-email-form.svelte';
 	import AppConfigGeneralForm from './forms/app-config-general-form.svelte';
+	import AppConfigLdapForm from './forms/app-config-ldap-form.svelte';
 	import UpdateApplicationImages from './update-application-images.svelte';
 
 	let { data } = $props();
@@ -34,8 +35,12 @@
 		favicon: File | null
 	) {
 		const faviconPromise = favicon ? appConfigService.updateFavicon(favicon) : Promise.resolve();
-		const lightLogoPromise = logoLight ? appConfigService.updateLogo(logoLight, true) : Promise.resolve();
-		const darkLogoPromise = logoDark ? appConfigService.updateLogo(logoDark, false) : Promise.resolve();
+		const lightLogoPromise = logoLight
+			? appConfigService.updateLogo(logoLight, true)
+			: Promise.resolve();
+		const darkLogoPromise = logoDark
+			? appConfigService.updateLogo(logoDark, false)
+			: Promise.resolve();
 		const backgroundImagePromise = backgroundImage
 			? appConfigService.updateBackgroundImage(backgroundImage)
 			: Promise.resolve();
@@ -72,6 +77,18 @@
 	</Card.Content>
 </Card.Root>
 
+<Card.Root>
+	<Card.Header>
+		<Card.Title>LDAP</Card.Title>
+		<Card.Description>
+			Configure LDAP settings to sync users and groups from an LDAP server.
+		</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<AppConfigLdapForm {appConfig} callback={updateAppConfig} />
+	</Card.Content>
+</Card.Root>
+
 <Card.Root>
 	<Card.Header>
 		<Card.Title>Images</Card.Title>

frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte

@@ -45,7 +45,6 @@
 	const { inputs, ...form } = createForm<typeof formSchema>(formSchema, updatedAppConfig);
 
 	async function onSubmit() {
-		console.log('submit');
 		const data = form.validate();
 		if (!data) return false;
 		await callback({

frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import CheckboxWithLabel from '$lib/components/checkbox-with-label.svelte';
+	import FormInput from '$lib/components/form-input.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import AppConfigService from '$lib/services/app-config-service';
+	import type { AllAppConfig } from '$lib/types/application-configuration';
+	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { createForm } from '$lib/utils/form-util';
+	import { toast } from 'svelte-sonner';
+	import { z } from 'zod';
+
+	let {
+		callback,
+		appConfig
+	}: {
+		appConfig: AllAppConfig;
+		callback: (appConfig: Partial<AllAppConfig>) => Promise<void>;
+	} = $props();
+
+	const appConfigService = new AppConfigService();
+
+	let ldapEnabled = $state(appConfig.ldapEnabled);
+	let ldapSyncing = $state(false);
+
+	const updatedAppConfig = {
+		ldapEnabled: appConfig.ldapEnabled,
+		ldapUrl: appConfig.ldapUrl,
+		ldapBindDn: appConfig.ldapBindDn,
+		ldapBindPassword: appConfig.ldapBindPassword,
+		ldapBase: appConfig.ldapBase,
+		ldapSkipCertVerify: appConfig.ldapSkipCertVerify,
+		ldapAttributeUserUniqueIdentifier: appConfig.ldapAttributeUserUniqueIdentifier,
+		ldapAttributeUserUsername: appConfig.ldapAttributeUserUsername,
+		ldapAttributeUserEmail: appConfig.ldapAttributeUserEmail,
+		ldapAttributeUserFirstName: appConfig.ldapAttributeUserFirstName,
+		ldapAttributeUserLastName: appConfig.ldapAttributeUserLastName,
+		ldapAttributeGroupUniqueIdentifier: appConfig.ldapAttributeGroupUniqueIdentifier,
+		ldapAttributeGroupName: appConfig.ldapAttributeGroupName,
+		ldapAttributeAdminGroup: appConfig.ldapAttributeAdminGroup
+	};
+
+	const formSchema = z.object({
+		ldapUrl: z.string().url(),
+		ldapBindDn: z.string().min(1),
+		ldapBindPassword: z.string().min(1),
+		ldapBase: z.string().min(1),
+		ldapSkipCertVerify: z.boolean(),
+		ldapAttributeUserUniqueIdentifier: z.string().min(1),
+		ldapAttributeUserUsername: z.string().min(1),
+		ldapAttributeUserEmail: z.string().min(1),
+		ldapAttributeUserFirstName: z.string().min(1),
+		ldapAttributeUserLastName: z.string().min(1),
+		ldapAttributeGroupUniqueIdentifier: z.string().min(1),
+		ldapAttributeGroupName: z.string().min(1),
+		ldapAttributeAdminGroup: z.string()
+	});
+
+	const { inputs, ...form } = createForm<typeof formSchema>(formSchema, updatedAppConfig);
+
+	async function onSubmit() {
+		const data = form.validate();
+		if (!data) return false;
+		await callback({
+			...data,
+			ldapEnabled: true
+		});
+		toast.success('LDAP configuration updated successfully');
+		return true;
+	}
+
+	async function onDisable() {
+		ldapEnabled = false;
+		await callback({ ldapEnabled });
+		toast.success('LDAP disabled successfully');
+	}
+
+	async function onEnable() {
+		if (await onSubmit()) {
+			ldapEnabled = true;
+		}
+	}
+
+	async function syncLdap() {
+		ldapSyncing = true;
+		await appConfigService.syncLdap()
+		.then(()=>		toast.success('LDAP sync finished'))
+		.catch(axiosErrorToast);
+
+		ldapSyncing = false;
+
+	}
+
+</script>
+
+<form onsubmit={onSubmit}>
+	<h4 class="text-lg font-semibold">Client Configuration</h4>
+	<div class="mt-4 grid grid-cols-1 items-start gap-5 md:grid-cols-2">
+		<FormInput label="LDAP URL" placeholder="ldap://example.com:389" bind:input={$inputs.ldapUrl} />
+		<FormInput
+			label="LDAP Bind DN"
+			placeholder="cn=people,dc=example,dc=com"
+			bind:input={$inputs.ldapBindDn}
+		/>
+		<FormInput label="LDAP Bind Password" type="password" bind:input={$inputs.ldapBindPassword} />
+		<FormInput label="LDAP Base DN" placeholder="dc=example,dc=com" bind:input={$inputs.ldapBase} />
+		<CheckboxWithLabel
+			id="skip-cert-verify"
+			label="Skip Certificate Verification"
+			description="This can be useful for self-signed certificates."
+			bind:checked={$inputs.ldapSkipCertVerify.value}
+		/>
+	</div>
+	<h4 class="mt-10 text-lg font-semibold">Attribute Mapping</h4>
+	<div class="mt-4 grid grid-cols-1 items-end gap-5 md:grid-cols-2">
+		<FormInput
+			label="User Unique Identifier Attribute"
+			description="The value of this attribute should never change."
+			placeholder="uuid"
+			bind:input={$inputs.ldapAttributeUserUniqueIdentifier}
+		/>
+		<FormInput
+			label="Username Attribute"
+			placeholder="uid"
+			bind:input={$inputs.ldapAttributeUserUsername}
+		/>
+		<FormInput
+			label="User Mail Attribute"
+			placeholder="mail"
+			bind:input={$inputs.ldapAttributeUserEmail}
+		/>
+		<FormInput
+			label="User First Name Attribute"
+			placeholder="givenName"
+			bind:input={$inputs.ldapAttributeUserFirstName}
+		/>
+		<FormInput
+			label="User Last Name Attribute"
+			placeholder="sn"
+			bind:input={$inputs.ldapAttributeUserLastName}
+		/>
+		<FormInput
+			label="Group Unique Identifier Attribute"
+			description="The value of this attribute should never change."
+			placeholder="uuid"
+			bind:input={$inputs.ldapAttributeGroupUniqueIdentifier}
+		/>
+		<FormInput
+			label="Group Name Attribute"
+			placeholder="cn"
+			bind:input={$inputs.ldapAttributeGroupName}
+		/>
+		<FormInput
+			label="Admin Group Name"
+			description="Members of this group will have Admin Privileges in Pocket ID."
+			placeholder="_admin_group_name"
+			bind:input={$inputs.ldapAttributeAdminGroup}
+		/>
+	</div>
+
+	<div class="mt-8 flex flex-wrap justify-end gap-3">
+		{#if ldapEnabled}
+			<Button variant="secondary" onclick={onDisable}>Disable</Button>
+			<Button variant="secondary" onclick={syncLdap} isLoading={ldapSyncing}>Sync now</Button>
+			<Button type="submit">Save</Button>
+		{:else}
+			<Button onclick={onEnable}>Enable</Button>
+		{/if}
+	</div>
+</form>

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>

frontend/src/routes/settings/admin/users/[id]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Badge from '$lib/components/ui/badge/badge.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import CustomClaimService from '$lib/services/custom-claim-service';
@@ -43,10 +44,13 @@
 	<title>User Details {user.firstName} {user.lastName}</title>
 </svelte:head>
 
-<div>
+<div class="flex items-center justify-between">
 	<a class="text-muted-foreground flex text-sm" href="/settings/admin/users"
 		><LucideChevronLeft class="h-5 w-5" /> Back</a
 	>
+	{#if !!user.ldapId}
+		<Badge variant="default" class="">LDAP</Badge>
+	{/if}
 </div>
 <Card.Root>
 	<Card.Header>

frontend/src/routes/settings/admin/users/user-form.svelte

@@ -2,7 +2,7 @@
 	import CheckboxWithLabel from '$lib/components/checkbox-with-label.svelte';
 	import FormInput from '$lib/components/form-input.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import type { UserCreate } from '$lib/types/user.type';
+	import type { User, UserCreate } from '$lib/types/user.type';
 	import { createForm } from '$lib/utils/form-util';
 	import { z } from 'zod';
 
@@ -10,11 +10,12 @@
 		callback,
 		existingUser
 	}: {
-		existingUser?: UserCreate;
+		existingUser?: User;
 		callback: (user: UserCreate) => Promise<boolean>;
 	} = $props();
 
 	let isLoading = $state(false);
+	let inputDisabled = $derived(!!existingUser?.ldapId);
 
 	const user = {
 		firstName: existingUser?.firstName || '',
@@ -53,29 +54,21 @@
 </script>
 
 <form onsubmit={onSubmit}>
-	<div class="flex flex-col gap-3 sm:flex-row">
-		<div class="w-full">
+	<fieldset disabled={inputDisabled}>
+		<div class="grid grid-cols-1 items-start gap-5 md:grid-cols-2">
 			<FormInput label="First name" bind:input={$inputs.firstName} />
-		</div>
-		<div class="w-full">
 			<FormInput label="Last name" bind:input={$inputs.lastName} />
-		</div>
-	</div>
-	<div class="mt-3 flex flex-col gap-3 sm:flex-row">
-		<div class="w-full">
-			<FormInput label="Email" bind:input={$inputs.email} />
-		</div>
-		<div class="w-full">
 			<FormInput label="Username" bind:input={$inputs.username} />
+			<FormInput label="Email" bind:input={$inputs.email} />
+			<CheckboxWithLabel
+				id="admin-privileges"
+				label="Admin Privileges"
+				description="Admins have full access to the admin panel."
+				bind:checked={$inputs.isAdmin.value}
+			/>
 		</div>
-	</div>
-	<CheckboxWithLabel
-		id="admin-privileges"
-		label="Admin Privileges"
-		description="Admins have full access to the admin panel."
-		bind:checked={$inputs.isAdmin.value}
-	/>
-	<div class="mt-5 flex justify-end">
-		<Button {isLoading} type="submit">Save</Button>
-	</div>
+		<div class="mt-5 flex justify-end">
+			<Button {isLoading} type="submit">Save</Button>
+		</div>
+	</fieldset>
 </form>

frontend/src/routes/settings/admin/users/user-list.svelte

@@ -95,11 +95,13 @@
 					<DropdownMenu.Item onclick={() => goto(`/settings/admin/users/${item.id}`)}
 						><LucidePencil class="mr-2 h-4 w-4" /> Edit</DropdownMenu.Item
 					>
-					<DropdownMenu.Item
-						class="text-red-500 focus:!text-red-700"
-						onclick={() => deleteUser(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"
+							onclick={() => deleteUser(item)}
+							><LucideTrash class="mr-2 h-4 w-4" />Delete</DropdownMenu.Item
+						>
+					{/if}
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
 		</Table.Cell>