diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/passwordPolicies.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/passwordPolicies.svelte index 46547cecb9..22898b060c 100644 --- a/src/routes/(console)/project-[region]-[project]/auth/security/passwordPolicies.svelte +++ b/src/routes/(console)/project-[region]-[project]/auth/security/passwordPolicies.svelte @@ -8,65 +8,67 @@ import { sdk } from '$lib/stores/sdk'; import { Typography, Link, Layout } from '@appwrite.io/pink-svelte'; import type { Models } from '@appwrite.io/console'; - import { tick } from 'svelte'; + import { onMount } from 'svelte'; - let { project }: { project: Models.Project } = $props(); + let { + project + }: { + project: Models.Project; + } = $props(); + let lastValidLimit = $state(5); let passwordHistory = $state(5); - let passwordHistoryEnabled = $state(false); let passwordDictionary = $state(false); + let passwordHistoryEnabled = $state(false); let authPersonalDataCheck = $state(false); - let lastValidLimit = $state(5); - - let maxPasswordInputField: InputNumber | null = null; - // Initialize and sync state when project updates - $effect(() => { - const historyValue = project?.authPasswordHistory; + onMount(() => { + // update initial states here in onMount. + const historyValue = project.authPasswordHistory; if (historyValue && historyValue > 0) { passwordHistory = historyValue; lastValidLimit = historyValue; } + passwordHistoryEnabled = (historyValue ?? 0) !== 0; - passwordDictionary = project?.authPasswordDictionary ?? false; - authPersonalDataCheck = project?.authPersonalDataCheck ?? false; + passwordDictionary = project.authPasswordDictionary ?? false; + authPersonalDataCheck = project.authPersonalDataCheck ?? false; }); - // restore last valid limit when enabling $effect(() => { + // restore last valid limit when enabling if (passwordHistoryEnabled && passwordHistory < 1) { passwordHistory = lastValidLimit; } }); - $effect(() => { - if (passwordHistoryEnabled) { - tick().then(() => { - if (maxPasswordInputField) { - maxPasswordInputField.addInputFocus(); - } - }); - } - }); + const hasChanges = $derived.by(() => { + const dictChanged = passwordDictionary !== (project.authPasswordDictionary ?? false); + const dataCheckChanged = authPersonalDataCheck !== (project.authPersonalDataCheck ?? false); + const historyChanged = + passwordHistoryEnabled !== ((project.authPasswordHistory ?? 0) !== 0); + const limitChanged = + passwordHistoryEnabled && + Number(passwordHistory) !== (project.authPasswordHistory ?? 0); - const hasChanges = $derived( - passwordHistoryEnabled !== ((project?.authPasswordHistory ?? 0) !== 0) || - (passwordHistoryEnabled && passwordHistory !== (project?.authPasswordHistory ?? 0)) || - passwordDictionary !== (project?.authPasswordDictionary ?? false) || - authPersonalDataCheck !== (project?.authPersonalDataCheck ?? false) - ); + return historyChanged || dictChanged || dataCheckChanged || limitChanged; + }); async function updatePasswordPolicies() { try { - await sdk.forConsole.projects.updateAuthPasswordHistory({ + const projectSdk = sdk.forConsole.projects; + + await projectSdk.updateAuthPasswordHistory({ projectId: project.$id, limit: passwordHistoryEnabled ? passwordHistory : 0 }); - await sdk.forConsole.projects.updateAuthPasswordDictionary({ + + await projectSdk.updateAuthPasswordDictionary({ projectId: project.$id, enabled: passwordDictionary }); - await sdk.forConsole.projects.updatePersonalDataCheck({ + + await projectSdk.updatePersonalDataCheck({ projectId: project.$id, enabled: authPersonalDataCheck }); @@ -108,10 +110,10 @@ required max={20} min={1} - id="password-history" + autofocus label="Limit" + id="password-history" bind:value={passwordHistory} - bind:this={maxPasswordInputField} helper="Maximum 20 passwords." /> {/if} diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/sessionSecurity.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/sessionSecurity.svelte index f64fee94ed..6babbbecc6 100644 --- a/src/routes/(console)/project-[region]-[project]/auth/security/sessionSecurity.svelte +++ b/src/routes/(console)/project-[region]-[project]/auth/security/sessionSecurity.svelte @@ -8,22 +8,24 @@ import { sdk } from '$lib/stores/sdk'; import { Typography } from '@appwrite.io/pink-svelte'; import type { Models } from '@appwrite.io/console'; + import { onMount } from 'svelte'; let { project }: { project: Models.Project } = $props(); let authSessionAlerts = $state(false); let sessionInvalidation = $state(false); - // Initialize state from project - $effect(() => { + onMount(() => { authSessionAlerts = project?.authSessionAlerts ?? false; sessionInvalidation = project?.authInvalidateSessions ?? false; }); - const hasChanges = $derived( - authSessionAlerts !== (project?.authSessionAlerts ?? false) || - sessionInvalidation !== (project?.authInvalidateSessions ?? false) - ); + const hasChanges = $derived.by(() => { + const alertsChanged = authSessionAlerts !== (project?.authSessionAlerts ?? false); + const invalidationChanged = + sessionInvalidation !== (project?.authInvalidateSessions ?? false); + return alertsChanged || invalidationChanged; + }); async function updateSessionSecurity() { try {