From 4d0fff821e2245050ce631b4465969510466dfae Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Fri, 14 Feb 2025 13:32:01 +0100
Subject: [PATCH] fix: show  "Sync Now" and "Test Email" button even if UI
 config is disabled

---
 .../application-configuration/+page.svelte    |  38 ++--
 .../forms/app-config-email-form.svelte        |  77 ++++----
 .../forms/app-config-general-form.svelte      |  52 +++---
 .../forms/app-config-ldap-form.svelte         | 169 ++++++++++--------
 4 files changed, 175 insertions(+), 161 deletions(-)

diff --git a/frontend/src/routes/settings/admin/application-configuration/+page.svelte b/frontend/src/routes/settings/admin/application-configuration/+page.svelte
index 22e5656..28f6fac 100644
--- a/frontend/src/routes/settings/admin/application-configuration/+page.svelte
+++ b/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>
-		<AppConfigGeneralForm {appConfig} callback={updateAppConfig} />
-	</CollapsibleCard>
+<CollapsibleCard id="application-configuration-general" title="General" defaultExpanded>
+	<AppConfigGeneralForm {appConfig} callback={updateAppConfig} />
+</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
+<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>
+>
+	<AppConfigEmailForm {appConfig} callback={updateAppConfig} />
+</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
+	id="application-configuration-ldap"
+	title="LDAP"
+	description="Configure LDAP settings to sync users and groups from an LDAP server."
+>
+	<AppConfigLdapForm {appConfig} callback={updateAppConfig} />
+</CollapsibleCard>
 
 <CollapsibleCard id="application-configuration-images" title="Images">
 	<UpdateApplicationImages callback={updateImages} />
diff --git a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte b/frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte
index 30cf845..9ad1942 100644
--- a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte
+++ b/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,46 +88,47 @@
 </script>
 
 <form onsubmit={onSubmit}>
-	<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} />
-		<FormInput label="SMTP Port" type="number" bind:input={$inputs.smtpPort} />
-		<FormInput label="SMTP User" bind:input={$inputs.smtpUser} />
-		<FormInput label="SMTP Password" type="password" bind:input={$inputs.smtpPassword} />
-		<FormInput label="SMTP From" bind:input={$inputs.smtpFrom} />
-		<CheckboxWithLabel
-			id="tls"
-			label="TLS"
-			description="Enable TLS for the SMTP connection."
-			bind:checked={$inputs.smtpTls.value}
-		/>
-		<CheckboxWithLabel
-			id="skip-cert-verify"
-			label="Skip Certificate Verification"
-			description="This can be useful for self-signed certificates."
-			bind:checked={$inputs.smtpSkipCertVerify.value}
-		/>
-	</div>
-	<h4 class="mt-10 text-lg font-semibold">Enabled Emails</h4>
-	<div class="mt-4 flex flex-col gap-5">
-		<CheckboxWithLabel
-			id="email-login-notification"
-			label="Email Login Notification"
-			description="Send an email to the user when they log in from a new device."
-			bind:checked={$inputs.emailLoginNotificationEnabled.value}
-		/>
-		<CheckboxWithLabel
-			id="email-one-time-access"
-			label="Email One Time Access"
-			description="Allows users to sign in with a link sent to their email. This reduces the security significantly as anyone with access to the user's email can gain entry."
-			bind:checked={$inputs.emailOneTimeAccessEnabled.value}
-		/>
-	</div>
-
+	<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} />
+			<FormInput label="SMTP Port" type="number" bind:input={$inputs.smtpPort} />
+			<FormInput label="SMTP User" bind:input={$inputs.smtpUser} />
+			<FormInput label="SMTP Password" type="password" bind:input={$inputs.smtpPassword} />
+			<FormInput label="SMTP From" bind:input={$inputs.smtpFrom} />
+			<CheckboxWithLabel
+				id="tls"
+				label="TLS"
+				description="Enable TLS for the SMTP connection."
+				bind:checked={$inputs.smtpTls.value}
+			/>
+			<CheckboxWithLabel
+				id="skip-cert-verify"
+				label="Skip Certificate Verification"
+				description="This can be useful for self-signed certificates."
+				bind:checked={$inputs.smtpSkipCertVerify.value}
+			/>
+		</div>
+		<h4 class="mt-10 text-lg font-semibold">Enabled Emails</h4>
+		<div class="mt-4 flex flex-col gap-5">
+			<CheckboxWithLabel
+				id="email-login-notification"
+				label="Email Login Notification"
+				description="Send an email to the user when they log in from a new device."
+				bind:checked={$inputs.emailLoginNotificationEnabled.value}
+			/>
+			<CheckboxWithLabel
+				id="email-one-time-access"
+				label="Email One Time Access"
+				description="Allows users to sign in with a link sent to their email. This reduces the security significantly as anyone with access to the user's email can gain entry."
+				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>
diff --git a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte b/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte
index a1489f9..729fbdc 100644
--- a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte
+++ b/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,28 +44,30 @@
 </script>
 
 <form onsubmit={onSubmit}>
-	<div class="flex flex-col gap-5">
-		<FormInput label="Application Name" bind:input={$inputs.appName} />
-		<FormInput
-			label="Session Duration"
-			type="number"
-			description="The duration of a session in minutes before the user has to sign in again."
-			bind:input={$inputs.sessionDuration}
-		/>
-		<CheckboxWithLabel
-			id="self-account-editing"
-			label="Enable Self-Account Editing"
-			description="Whether the users should be able to edit their own account details."
-			bind:checked={$inputs.allowOwnAccountEdit.value}
-		/>
-		<CheckboxWithLabel
-			id="emails-verified"
-			label="Emails Verified"
-			description="Whether the user's email should be marked as verified for the OIDC clients."
-			bind:checked={$inputs.emailsVerified.value}
-		/>
-	</div>
-	<div class="mt-5 flex justify-end">
-		<Button {isLoading} type="submit">Save</Button>
-	</div>
+	<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
+				label="Session Duration"
+				type="number"
+				description="The duration of a session in minutes before the user has to sign in again."
+				bind:input={$inputs.sessionDuration}
+			/>
+			<CheckboxWithLabel
+				id="self-account-editing"
+				label="Enable Self-Account Editing"
+				description="Whether the users should be able to edit their own account details."
+				bind:checked={$inputs.allowOwnAccountEdit.value}
+			/>
+			<CheckboxWithLabel
+				id="emails-verified"
+				label="Emails Verified"
+				description="Whether the user's email should be marked as verified for the OIDC clients."
+				bind:checked={$inputs.emailsVerified.value}
+			/>
+		</div>
+		<div class="mt-5 flex justify-end">
+			<Button {isLoading} type="submit">Save</Button>
+		</div>
+	</fieldset>
 </form>
diff --git a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte b/frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte
index 4a76967..ff7a6de 100644
--- a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte
+++ b/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,89 +98,98 @@
 </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} />
-		<FormInput
-			label="User Search Filter"
-			description="The Search filter to use to search/sync users."
-			placeholder="(objectClass=person)"
-			bind:input={$inputs.ldapUserSearchFilter}
-		/>
-		<FormInput
-			label="Groups Search Filter"
-			description="The Search filter to use to search/sync groups."
-			placeholder="(objectClass=groupOfNames)"
-			bind:input={$inputs.ldapUserGroupSearchFilter}
-		/>
-		<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>
-
+	<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 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="User Search Filter"
+				description="The Search filter to use to search/sync users."
+				placeholder="(objectClass=person)"
+				bind:input={$inputs.ldapUserSearchFilter}
+			/>
+			<FormInput
+				label="Groups Search Filter"
+				description="The Search filter to use to search/sync groups."
+				placeholder="(objectClass=groupOfNames)"
+				bind:input={$inputs.ldapUserGroupSearchFilter}
+			/>
+			<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>
+	</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>