mirror of
https://github.com/nikdoof/pocket-id.git
synced 2025-12-14 07:12:19 +00:00
fix: show "Sync Now" and "Test Email" button even if UI config is disabled
This commit is contained in:
Elias Schneider
@@ -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} />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user