fix reactivity

keycloakify · Nov 24, 2024 · 800c795 · 800c795
1 parent bd9c819
commit 800c795
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 13 deletions.
diff --git a/dist/login/components/FieldErrors.svelte b/dist/login/components/FieldErrors.svelte
@@ -6,11 +6,11 @@
   type FieldErrorProps = {
     attribute: Attribute;
     displayableErrors: FormFieldError[];
-    fieldIndex: number | undefined;
+    fieldIndex?: number;
     kcClsx: KcClsx;
   };
   const { attribute, fieldIndex, kcClsx, displayableErrors: _displayableErrors }: FieldErrorProps = $props();
-  const displayableErrors = _displayableErrors.filter((error) => error.fieldIndex === fieldIndex);
+  const displayableErrors = _displayableErrors.filter((error) => !fieldIndex || error.fieldIndex === fieldIndex);
 </script>
 
 {#if displayableErrors.length !== 0}

diff --git a/dist/login/components/FieldErrors.svelte.d.ts b/dist/login/components/FieldErrors.svelte.d.ts
@@ -1,7 +1,7 @@
 type FieldErrorProps = {
     attribute: Attribute;
     displayableErrors: FormFieldError[];
-    fieldIndex: number | undefined;
+    fieldIndex?: number;
     kcClsx: KcClsx;
 };
 import type { FormFieldError } from '../lib/useUserProfileForm';

diff --git a/dist/login/components/UserProfileFormFields.svelte b/dist/login/components/UserProfileFormFields.svelte
@@ -59,7 +59,8 @@
         {@render advancedMsg(attribute.displayName ?? '')()}
       </label>
       {#if attribute.required}
-        *{/if}
+        *
+      {/if}
     </div>
     <div class={kcClsx('kcInputWrapperClass')}>
       {#if attribute.annotations.inputHelperTextBefore !== undefined}
@@ -83,7 +84,6 @@
         {attribute}
         {displayableErrors}
         {kcClsx}
-        fieldIndex={undefined}
       />
       {#if attribute.annotations.inputHelperTextAfter !== undefined}
         <div

diff --git a/src/lib/login/components/FieldErrors.svelte b/src/lib/login/components/FieldErrors.svelte
@@ -6,11 +6,11 @@
   type FieldErrorProps = {
     attribute: Attribute;
     displayableErrors: FormFieldError[];
-    fieldIndex: number | undefined;
+    fieldIndex?: number;
     kcClsx: KcClsx;
   };
   const { attribute, fieldIndex, kcClsx, displayableErrors: _displayableErrors }: FieldErrorProps = $props();
-  const displayableErrors = _displayableErrors.filter((error) => error.fieldIndex === fieldIndex);
+  const displayableErrors = _displayableErrors.filter((error) => !fieldIndex || error.fieldIndex === fieldIndex);
 </script>
 
 {#if displayableErrors.length !== 0}

diff --git a/src/lib/login/components/PasswordWrapper.svelte b/src/lib/login/components/PasswordWrapper.svelte
@@ -2,7 +2,7 @@
   import { useReducer } from '@keycloakify/svelte/tools/useReducer';
   import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
   import { assert } from 'keycloakify/tools/assert';
-  import type { Snippet } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
   import type { I18n } from '../i18n';
 
   const props: { kcClsx: KcClsx; i18n: I18n; passwordInputId: string; children: Snippet } = $props();
@@ -14,12 +14,14 @@
     (isPasswordRevealed: boolean) => !isPasswordRevealed,
     false,
   );
-  $effect(() => {
+  onMount(() => {
     const passwordInputElement: HTMLInputElement = document.getElementById(passwordInputId) as HTMLInputElement;
 
     assert(passwordInputElement instanceof HTMLInputElement);
-
-    passwordInputElement.type = isPasswordRevealed ? 'text' : 'password';
+    const unsubscribe = isPasswordRevealed.subscribe(($isPasswordRevealed) => {
+      passwordInputElement.type = $isPasswordRevealed ? 'text' : 'password';
+    });
+    return () => unsubscribe();
   });
 </script>
 

diff --git a/src/lib/login/components/UserProfileFormFields.svelte b/src/lib/login/components/UserProfileFormFields.svelte
@@ -59,7 +59,8 @@
         {@render advancedMsg(attribute.displayName ?? '')()}
       </label>
       {#if attribute.required}
-        *{/if}
+        *
+      {/if}
     </div>
     <div class={kcClsx('kcInputWrapperClass')}>
       {#if attribute.annotations.inputHelperTextBefore !== undefined}
@@ -83,7 +84,6 @@
         {attribute}
         {displayableErrors}
         {kcClsx}
-        fieldIndex={undefined}
       />
       {#if attribute.annotations.inputHelperTextAfter !== undefined}
         <div