feat: add LDAP sync (#106)

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

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pocket-id-frontend",
-  "version": "0.10.0",
+  "version": "0.24.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pocket-id-frontend",
-      "version": "0.10.0",
+      "version": "0.24.1",
       "dependencies": {
         "@simplewebauthn/browser": "^10.0.0",
         "axios": "^1.7.7",

frontend/src/lib/components/advanced-table.svelte

@@ -17,6 +17,7 @@
 		requestOptions = $bindable(),
 		selectedIds = $bindable(),
 		withoutSearch = false,
+		selectionDisabled = false,
 		defaultSort,
 		onRefresh,
 		columns,
@@ -26,6 +27,7 @@
 		requestOptions?: SearchPaginationSortRequest;
 		selectedIds?: string[];
 		withoutSearch?: boolean;
+		selectionDisabled?: boolean;
 		defaultSort?: { column: string; direction: 'asc' | 'desc' };
 		onRefresh: (requestOptions: SearchPaginationSortRequest) => Promise<Paginated<T>>;
 		columns: { label: string; hidden?: boolean; sortColumn?: string }[];
@@ -122,7 +124,11 @@
 			<Table.Row>
 				{#if selectedIds}
 					<Table.Head class="w-12">
-						<Checkbox checked={allChecked} onCheckedChange={(c) => onAllCheck(c as boolean)} />
+						<Checkbox
+							disabled={selectionDisabled}
+							checked={allChecked}
+							onCheckedChange={(c) => onAllCheck(c as boolean)}
+						/>
 					</Table.Head>
 				{/if}
 				{#each columns as column}
@@ -160,6 +166,7 @@
 					{#if selectedIds}
 						<Table.Cell class="w-12">
 							<Checkbox
+								disabled={selectionDisabled}
 								checked={selectedIds.includes(item.id)}
 								onCheckedChange={(c) => onCheck(c as boolean, item.id)}
 							/>

frontend/src/lib/components/checkbox-with-label.svelte

@@ -19,7 +19,7 @@
 	} = $props();
 </script>
 
-<div class="items-top mt-5 flex space-x-2">
+<div class="items-top flex space-x-2">
 	<Checkbox
 		{id}
 		{disabled}

frontend/src/lib/components/form-input.svelte

@@ -9,6 +9,7 @@
 		input = $bindable(),
 		label,
 		description,
+		placeholder,
 		disabled = false,
 		type = 'text',
 		children,
@@ -18,6 +19,7 @@
 		input?: FormInput<string | boolean | number>;
 		label?: string;
 		description?: string;
+		placeholder?: string;
 		disabled?: boolean;
 		type?: 'text' | 'password' | 'email' | 'number' | 'checkbox';
 		onInput?: (e: FormInputEvent) => void;
@@ -38,7 +40,7 @@
 		{#if children}
 			{@render children()}
 		{:else if input}
-			<Input {id} {type} bind:value={input.value} {disabled} on:input={(e) => onInput?.(e)} />
+			<Input {id} {placeholder} {type} bind:value={input.value} {disabled} on:input={(e) => onInput?.(e)} />
 		{/if}
 		{#if input?.error}
 			<p class="mt-1 text-sm text-red-500">{input.error}</p>

frontend/src/lib/services/app-config-service.ts

@@ -57,6 +57,10 @@ export default class AppConfigService extends APIService {
 		await this.api.post('/application-configuration/test-email');
 	}
 
+	async syncLdap() {
+		await this.api.post('/application-configuration/sync-ldap');
+	}
+
 	async getVersionInformation() {
 		const response = (
 			await axios.get('https://api.github.com/repos/stonith404/pocket-id/releases/latest')

frontend/src/lib/types/application-configuration.ts

@@ -4,8 +4,10 @@ export type AppConfig = {
 };
 
 export type AllAppConfig = AppConfig & {
+	// General
 	sessionDuration: number;
 	emailsVerified: boolean;
+	// Email
 	emailEnabled: boolean;
 	smtpHost: string;
 	smtpPort: number;
@@ -14,6 +16,21 @@ export type AllAppConfig = AppConfig & {
 	smtpPassword: string;
 	smtpTls: boolean;
 	smtpSkipCertVerify: boolean;
+	// LDAP
+	ldapEnabled: boolean;
+	ldapUrl: string;
+	ldapBindDn: string;
+	ldapBindPassword: string;
+	ldapBase: string;
+	ldapSkipCertVerify: boolean;
+	ldapAttributeUserUniqueIdentifier: string;
+	ldapAttributeUserUsername: string;
+	ldapAttributeUserEmail: string;
+	ldapAttributeUserFirstName: string;
+	ldapAttributeUserLastName: string;
+	ldapAttributeGroupUniqueIdentifier: string;
+	ldapAttributeGroupName: string;
+	ldapAttributeAdminGroup: string;
 };
 
 export type AppConfigRawResponse = {

frontend/src/lib/types/user-group.type.ts

@@ -7,6 +7,7 @@ export type UserGroup = {
 	name: string;
 	createdAt: string;
 	customClaims: CustomClaim[];
+	ldapId?: string;
 };
 
 export type UserGroupWithUsers = UserGroup & {
@@ -17,4 +18,4 @@ export type UserGroupWithUserCount = UserGroup & {
 	userCount: number;
 };
 
-export type UserGroupCreate = Pick<UserGroup, 'friendlyName' | 'name'>;
+export type UserGroupCreate = Pick<UserGroup, 'friendlyName' | 'name' | 'ldapId'>;

frontend/src/lib/types/user.type.ts

@@ -8,6 +8,7 @@ export type User = {
 	lastName: string;
 	isAdmin: boolean;
 	customClaims: CustomClaim[];
+	ldapId?: string;
 };
 
-export type UserCreate = Omit<User, 'id' | 'customClaims'>;
+export type UserCreate = Omit<User, 'id' | 'customClaims' | 'ldapId'>;

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>

frontend/svelte.config.js

@@ -1,6 +1,6 @@
 import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import packageJson from "./package.json" assert { type: "json" };
+import packageJson from './package.json' assert { type: 'json' };
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -14,7 +14,7 @@ const config = {
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
 		version: {
-			name: packageJson.version,
+			name: packageJson.version
 		}
 	}
 };

frontend/tests/application-configuration.spec.ts

@@ -6,7 +6,7 @@ test.beforeEach(cleanupBackend);
 test('Update general configuration', async ({ page }) => {
 	await page.goto('/settings/admin/application-configuration');
 
-	await page.getByLabel('Name').fill('Updated Name');
+	await page.getByLabel('Application Name', { exact: true }).fill('Updated Name');
 	await page.getByLabel('Session Duration').fill('30');
 	await page.getByRole('button', { name: 'Save' }).first().click();
 
@@ -17,7 +17,7 @@ test('Update general configuration', async ({ page }) => {
 
 	await page.reload();
 
-	await expect(page.getByLabel('Name')).toHaveValue('Updated Name');
+	await expect(page.getByLabel('Application Name', { exact: true })).toHaveValue('Updated Name');
 	await expect(page.getByLabel('Session Duration')).toHaveValue('30');
 });
 
@@ -29,7 +29,7 @@ test('Update email configuration', async ({ page }) => {
 	await page.getByLabel('SMTP User').fill('test@gmail.com');
 	await page.getByLabel('SMTP Password').fill('password');
 	await page.getByLabel('SMTP From').fill('test@gmail.com');
-	await page.getByRole('button', { name: 'Enable' }).click();
+	await page.getByRole('button', { name: 'Enable' }).nth(0).click();
 	await page.getByRole('status').click();
 
 	await expect(page.getByRole('status')).toHaveText('Email configuration updated successfully');