fix: show "Sync Now" and "Test Email" button even if UI config is disabled

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { env } from '$env/dynamic/public';
 	import CollapsibleCard from '$lib/components/collapsible-card.svelte';
 	import AppConfigService from '$lib/services/app-config-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
@@ -14,7 +13,6 @@
 	let { data } = $props();
 	let appConfig = $state(data.appConfig);
 
-	const uiConfigDisabled = env.PUBLIC_UI_CONFIG_DISABLED === 'true';
 	const appConfigService = new AppConfigService();
 
 	async function updateAppConfig(updatedAppConfig: Partial<AllAppConfig>) {
@@ -57,28 +55,26 @@
 	<title>Application Configuration</title>
 </svelte:head>
 
-<fieldset class="flex flex-col gap-5" disabled={uiConfigDisabled}>
-	<CollapsibleCard id="application-configuration-general" title="General" defaultExpanded>
+<CollapsibleCard id="application-configuration-general" title="General" defaultExpanded>
 	<AppConfigGeneralForm {appConfig} callback={updateAppConfig} />
-	</CollapsibleCard>
+</CollapsibleCard>
 
-	<CollapsibleCard
+<CollapsibleCard
 	id="application-configuration-email"
 	title="Email"
 	description="Enable email notifications to alert users when a login is detected from a new device or
 			location."
-	>
+>
 	<AppConfigEmailForm {appConfig} callback={updateAppConfig} />
-	</CollapsibleCard>
+</CollapsibleCard>
 
-	<CollapsibleCard
+<CollapsibleCard
 	id="application-configuration-ldap"
 	title="LDAP"
 	description="Configure LDAP settings to sync users and groups from an LDAP server."
-	>
+>
 	<AppConfigLdapForm {appConfig} callback={updateAppConfig} />
-	</CollapsibleCard>
-</fieldset>
+</CollapsibleCard>
 
 <CollapsibleCard id="application-configuration-images" title="Images">
 	<UpdateApplicationImages callback={updateImages} />

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { env } from '$env/dynamic/public';
 	import CheckboxWithLabel from '$lib/components/checkbox-with-label.svelte';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog';
 	import FormInput from '$lib/components/form-input.svelte';
@@ -18,6 +19,7 @@
 	} = $props();
 
 	const appConfigService = new AppConfigService();
+	const uiConfigDisabled = env.PUBLIC_UI_CONFIG_DISABLED === 'true';
 
 	let isSendingTestEmail = $state(false);
 
@@ -86,6 +88,7 @@
 </script>
 
 <form onsubmit={onSubmit}>
+	<fieldset disabled={uiConfigDisabled}>
 		<h4 class="text-lg font-semibold">SMTP Configuration</h4>
 		<div class="mt-4 grid grid-cols-1 items-end gap-5 md:grid-cols-2">
 			<FormInput label="SMTP Host" bind:input={$inputs.smtpHost} />
@@ -121,11 +124,11 @@
 				bind:checked={$inputs.emailOneTimeAccessEnabled.value}
 			/>
 		</div>
-
+	</fieldset>
 	<div class="mt-8 flex flex-wrap justify-end gap-3">
 		<Button isLoading={isSendingTestEmail} variant="secondary" onclick={onTestEmail}
 			>Send test email</Button
 		>
-		<Button type="submit">Save</Button>
+		<Button type="submit" disabled={uiConfigDisabled}>Save</Button>
 	</div>
 </form>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { env } from '$env/dynamic/public';
 	import CheckboxWithLabel from '$lib/components/checkbox-with-label.svelte';
 	import FormInput from '$lib/components/form-input.svelte';
 	import { Button } from '$lib/components/ui/button';
@@ -15,6 +16,7 @@
 		callback: (appConfig: Partial<AllAppConfig>) => Promise<void>;
 	} = $props();
 
+	const uiConfigDisabled = env.PUBLIC_UI_CONFIG_DISABLED === 'true';
 	let isLoading = $state(false);
 
 	const updatedAppConfig = {
@@ -42,6 +44,7 @@
 </script>
 
 <form onsubmit={onSubmit}>
+	<fieldset class="flex flex-col gap-5" disabled={uiConfigDisabled}>
 		<div class="flex flex-col gap-5">
 			<FormInput label="Application Name" bind:input={$inputs.appName} />
 			<FormInput
@@ -66,4 +69,5 @@
 		<div class="mt-5 flex justify-end">
 			<Button {isLoading} type="submit">Save</Button>
 		</div>
+	</fieldset>
 </form>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { env } from '$env/dynamic/public';
 	import CheckboxWithLabel from '$lib/components/checkbox-with-label.svelte';
 	import FormInput from '$lib/components/form-input.svelte';
 	import { Button } from '$lib/components/ui/button';
@@ -18,6 +19,7 @@
 	} = $props();
 
 	const appConfigService = new AppConfigService();
+	const uiConfigDisabled = env.PUBLIC_UI_CONFIG_DISABLED === 'true';
 
 	let ldapEnabled = $state(appConfig.ldapEnabled);
 	let ldapSyncing = $state(false);
@@ -96,16 +98,25 @@
 </script>
 
 <form onsubmit={onSubmit}>
+	<fieldset disabled={uiConfigDisabled}>
 		<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 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} />
+			<FormInput
+				label="LDAP Base DN"
+				placeholder="dc=example,dc=com"
+				bind:input={$inputs.ldapBase}
+			/>
 			<FormInput
 				label="User Search Filter"
 				description="The Search filter to use to search/sync users."
@@ -171,14 +182,14 @@
 				bind:input={$inputs.ldapAttributeAdminGroup}
 			/>
 		</div>
-
+	</fieldset>
 	<div class="mt-8 flex flex-wrap justify-end gap-3">
 		{#if ldapEnabled}
-			<Button variant="secondary" onclick={onDisable}>Disable</Button>
+			<Button variant="secondary" onclick={onDisable} disabled={uiConfigDisabled}>Disable</Button>
 			<Button variant="secondary" onclick={syncLdap} isLoading={ldapSyncing}>Sync now</Button>
-			<Button type="submit">Save</Button>
+			<Button type="submit" disabled={uiConfigDisabled}>Save</Button>
 		{:else}
-			<Button onclick={onEnable}>Enable</Button>
+			<Button onclick={onEnable} disabled={uiConfigDisabled}>Enable</Button>
 		{/if}
 	</div>
 </form>