@keycloakify/svelte 0.2.0 → 0.2.2

package/keycloakify-svelte/login/Template.svelte

@@ -92,7 +92,7 @@
                   id="language-switch1"
                   class={kcClsx('kcLocaleListClass')}
                 >
-                  {#each enabledLanguages as enabledLanguage, i}
+                  {#each enabledLanguages as enabledLanguage, i (enabledLanguage.languageTag)}
                     {@const { label, href } = enabledLanguage}
                     <li
                       class={kcClsx('kcLocaleListItemClass')}

package/keycloakify-svelte/login/components/FieldErrors.svelte

@@ -20,7 +20,7 @@
       class={kcClsx('kcInputErrorMessageClass')}
       aria-live="polite"
     >
-      {#each _displayableErrors as displayableError, i}
+      {#each _displayableErrors as displayableError, i (i)}
         {@const { errorMessage } = displayableError}
         {@render errorMessage()}
         {#if _displayableErrors.length - 1 !== i}<br />{/if}

package/keycloakify-svelte/login/components/InputFieldByType.svelte

@@ -36,7 +36,7 @@
 {:else}
   <!-- default -->
   {#if valueOrValues instanceof Array}
-    {#each valueOrValues as _, i}
+    {#each valueOrValues as _, i (i)}
       <InputTag
         {...props}
         bind:displayableErrors

package/keycloakify-svelte/login/components/InputTagSelects.svelte

@@ -62,7 +62,7 @@
   })();
 </script>
 
-{#each options as option}
+{#each options as option (option)}
   <div class={classDiv}>
     <input
       type={inputType}

package/keycloakify-svelte/login/components/SelectTag.svelte

@@ -66,7 +66,7 @@
     })}
 >
   {#if !isMultiple}<option value=""></option>{/if}
-  {#each options as option}
+  {#each options as option (option)}
     <option value={option}>
       {@render inputLabel($i18n, attribute, option)()}
     </option>

package/keycloakify-svelte/login/components/UserProfileFormFields.svelte

@@ -41,7 +41,7 @@
   );
 </script>
 
-{#each $formFieldStates as formFieldState, i}
+{#each $formFieldStates as formFieldState, i (i)}
   {@const { attribute, valueOrValues } = formFieldState}
   <GroupLabel
     {attribute}

package/keycloakify-svelte/login/pages/DeleteAccountConfirm.svelte

@@ -39,17 +39,17 @@
   >
     <div
       class="alert alert-warning"
-      style:margin-top={'0'}
-      style:margin-bottom={'30px'}
+      style:margin-top="0"
+      style:margin-bottom="30px"
     >
       <span class="pficon pficon-warning-triangle-o"></span>
       {@render msg('irreversibleAction')()}
     </div>
     <p>{@render msg('deletingImplies')()}</p>
     <ul
-      style:color={'#72767b'}
-      style:list-style={'disc'}
-      style:list-style-position={'inside'}
+      style:color="#72767b"
+      style:list-style="disc"
+      style:list-style-position="inside"
     >
       <li>{@render msg('loggingOutImmediately')()}</li>
       <li>{@render msg('errasingData')()}</li>
@@ -64,7 +64,7 @@
       {#if triggered_from_aia}
         <button
           class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')}
-          style:margin-left={'calc(100% - 220px)'}
+          style:margin-left="calc(100% - 220px)"
           type="submit"
           name="cancel-aia"
           value="true"

package/keycloakify-svelte/login/pages/FrontchannelLogout.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { PageProps } from './PageProps';
-  import { onMount } from 'svelte';
   import type { KcContext } from '../KcContext';
   import type { I18n } from '../i18n';
 
@@ -15,11 +14,15 @@
   const { logout } = kcContext;
 
   const { msg, msgStr } = $i18n;
-
-  onMount(() => {
-    if (logout.logoutRedirectUri) {
-      window.location.replace(logout.logoutRedirectUri);
+  let iframeLoadCount = $state(0);
+  $effect(() => {
+    if (!kcContext.logout.logoutRedirectUri) {
+      return;
+    }
+    if (iframeLoadCount !== kcContext.logout.clients.length) {
+      return;
     }
+    window.location.replace(kcContext.logout.logoutRedirectUri);
   });
 </script>
 
@@ -35,13 +38,14 @@
   {/snippet}
   <p>{@render msg('frontchannel-logout.message')()}</p>
   <ul>
-    {#each logout.clients as client}
+    {#each logout.clients as client (client.name)}
       <li>
         {client.name}
         <!-- svelte-ignore a11y_missing_attribute -->
         <iframe
           src={client.frontChannelLogoutUrl}
-          style:display={'none'}
+          style:display="none"
+          onload={() => iframeLoadCount++}
         ></iframe>
       </li>{/each}
   </ul>

package/keycloakify-svelte/login/pages/Login.svelte

@@ -42,7 +42,7 @@
     <div id="kc-registration-container">
       <div id="kc-registration">
         <span>
-          {@render msg('noAccount')()}{' '}
+          {@render msg('noAccount')()}&nbsp;
           <a
             tabindex={8}
             href={url.registrationUrl}
@@ -63,7 +63,7 @@
         <hr />
         <h2>{@render msg('identity-provider-login-label')()}</h2>
         <ul class={kcClsx('kcFormSocialAccountListClass', providers.length > 3 && 'kcFormSocialAccountListGridClass')}>
-          {#each providers as p}
+          {#each providers as p (p.providerId)}
             <li>
               <a
                 id={`social-${p.alias}`}
@@ -178,7 +178,7 @@
                       name="rememberMe"
                       type="checkbox"
                       checked={!!login.rememberMe}
-                    />{' '}
+                    />&nbsp;
                     {@render msg('rememberMe')()}
                   </label>
                 </div>

package/keycloakify-svelte/login/pages/LoginConfigTotp.svelte

@@ -39,7 +39,7 @@
       <p>{@render msg('loginTotpStep1')()}</p>
 
       <ul id="kc-totp-supported-apps">
-        {#each totp.supportedApplications as app}
+        {#each totp.supportedApplications as app (app)}
           <li>{@render advancedMsg(app)()}</li>
         {/each}
       </ul>
@@ -119,7 +119,7 @@
           class={kcClsx('kcLabelClass')}
         >
           {@render msg('authenticatorCode')()}
-        </label>{' '}
+        </label>&nbsp;
         <span class="required">*</span>
       </div>
       <div class={kcClsx('kcInputWrapperClass')}>
@@ -160,7 +160,7 @@
           class={kcClsx('kcLabelClass')}
         >
           {@render msg('loginTotpDeviceName')()}
-        </label>{' '}
+        </label>&nbsp;
         {#if totp.otpCredentials.length >= 1}<span class="required">*</span>{/if}
       </div>
       <div class={kcClsx('kcInputWrapperClass')}>

package/keycloakify-svelte/login/pages/LoginIdpLinkConfirmOverride.svelte

@@ -37,7 +37,7 @@
     action={url.loginAction}
     method="post"
   >
-    {@render msg('pageExpiredMsg1')()}{' '}
+    {@render msg('pageExpiredMsg1')()} 
     <a
       id="loginRestartLink"
       href={url.loginRestartFlowUrl}

package/keycloakify-svelte/login/pages/LoginOauthGrant.svelte

@@ -48,7 +48,7 @@
   >
     <h3>{@render msg('oauthGrantRequest')()}</h3>
     <ul>
-      {#each oauth.clientScopesRequested as clientScope}
+      {#each oauth.clientScopesRequested as clientScope, i (i)}
         <li>
           <span>
             {@render advancedMsg(clientScope.consentScreenText)()}

package/keycloakify-svelte/login/pages/LoginOtp.svelte

@@ -42,7 +42,7 @@
     {#if otpLogin.userOtpCredentials.length > 1}
       <div class={kcClsx('kcFormGroupClass')}>
         <div class={kcClsx('kcInputWrapperClass')}>
-          {#each otpLogin.userOtpCredentials as otpCredential, index}
+          {#each otpLogin.userOtpCredentials as otpCredential, index (otpCredential.id)}
             <input
               id={`kc-otp-credential-${index}`}
               class={kcClsx('kcLoginOTPListInputClass')}

package/keycloakify-svelte/login/pages/LoginPageExpired.svelte

@@ -36,15 +36,13 @@
       href={url.loginRestartFlowUrl}
     >
       {@render msg('doClickHere')()}
-    </a>{' '}
-    .<br />
-    {@render msg('pageExpiredMsg2')()}{' '}
+    </a>&nbsp;.<br />
+    {@render msg('pageExpiredMsg2')()}&nbsp;
     <a
       id="loginContinueLink"
       href={url.loginAction}
     >
       {@render msg('doClickHere')()}
-    </a>{' '}
-    .
+    </a>&nbsp;.
   </p>
 </Template>

package/keycloakify-svelte/login/pages/LoginPasskeysConditionalAuthenticate.svelte

@@ -101,14 +101,14 @@
   <div
     class={kcClsx('kcFormGroupClass')}
     no-bottom-margin={true}
-    style:margin-bottom={'0'}
+    style:margin-bottom="0"
   >
     {#if authenticators !== undefined && Object.keys(authenticators).length !== 0}
       <form
         id="authn_select"
         class={kcClsx('kcFormClass')}
       >
-        {#each authenticators.authenticators as authenticator}
+        {#each authenticators.authenticators as authenticator (authenticator.credentialId)}
           <input
             type="hidden"
             name="authn_use_chk"
@@ -122,7 +122,7 @@
           <p class={kcClsx('kcSelectAuthListItemTitle')}>{msg('passkey-available-authenticators')}</p>
         {/if}
         <div class={kcClsx('kcFormClass')}>
-          {#each authenticators.authenticators as authenticator, i}
+          {#each authenticators.authenticators as authenticator, i (authenticator.credentialId)}
             <div
               id={`kc-webauthn-authenticator-item-${i}`}
               class={kcClsx('kcSelectAuthListItemClass')}
@@ -151,7 +151,7 @@
                     id={`kc-webauthn-authenticator-transport-${i}`}
                     class={kcClsx('kcSelectAuthListItemDescriptionClass')}
                   >
-                    {#each authenticator.transports.displayNameProperties as nameProperty, i}
+                    {#each authenticator.transports.displayNameProperties as nameProperty, i (nameProperty)}
                       <span> {advancedMsg(nameProperty)} </span>
                       {#if i !== authenticator.transports.displayNameProperties.length - 1}
                         <span>, </span>{/if}
@@ -176,7 +176,7 @@
             id="kc-form-login"
             action={url.loginAction}
             method="post"
-            style:display={'none'}
+            style:display="none"
             onsubmit={(event) => {
               try {
                 event.currentTarget.login.disabled = true;
@@ -223,7 +223,7 @@
         <div
           id="kc-form-passkey-button"
           class={kcClsx('kcFormButtonsClass')}
-          style:display={'none'}
+          style:display="none"
         >
           <!-- svelte-ignore a11y_autofocus -->
           <input

package/keycloakify-svelte/login/pages/LoginRecoveryAuthnCodeConfig.svelte

@@ -61,7 +61,7 @@
     id={olRecoveryCodesListId}
     class={kcClsx('kcRecoveryCodesList')}
   >
-    {#each recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code, index}
+    {#each recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code, index (code)}
       <li>
         <span>{index + 1}:</span>
         {code.slice(0, 4)}-{code.slice(4, 8)}-{code.slice(8)}

package/keycloakify-svelte/login/pages/LoginResetOtp.svelte

@@ -41,7 +41,7 @@
     <div class={kcClsx('kcInputWrapperClass')}>
       <div class={kcClsx('kcInfoAreaWrapperClass')}>
         <p id="kc-otp-reset-form-description">{msg('otp-reset-description')}</p>
-        {#each configuredOtpCredentials.userOtpCredentials as otpCredential, index}
+        {#each configuredOtpCredentials.userOtpCredentials as otpCredential, index (otpCredential.id)}
           <input
             id={`kc-otp-credential-${index}`}
             class={kcClsx('kcLoginOTPListInputClass')}

package/keycloakify-svelte/login/pages/LoginUsername.svelte

@@ -64,7 +64,7 @@
             social.providers.length > 3 && 'kcFormSocialAccountListGridClass',
           )}
         >
-          {#each social.providers as p}
+          {#each social.providers as p (p.providerId)}
             <li>
               <a
                 id={`social-${p.alias}`}
@@ -153,7 +153,7 @@
                       name="rememberMe"
                       type="checkbox"
                       checked={!!login.rememberMe}
-                    />{' '}
+                    />&nbsp;
                     {@render msg('rememberMe')()}
                   </label>
                 </div>

package/keycloakify-svelte/login/pages/Register.svelte

@@ -36,6 +36,23 @@
 
   const [isFormSubmittable, setIsFormSubmittable] = useState(false);
   const [areTermsAccepted, setAreTermsAccepted] = useState(false);
+  let htmlFormElement: HTMLFormElement | null = $state(null);
+
+  $effect(() => {
+    if (htmlFormElement === null) {
+      return;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any)['onSubmitRecaptcha'] = () => {
+      // @ts-expect-error; form not null
+      htmlFormElement.requestSubmit();
+    };
+
+    return () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      delete (window as any)['onSubmitRecaptcha'];
+    };
+  });
 </script>
 
 <Template
@@ -58,6 +75,7 @@
     class={kcClsx('kcFormClass')}
     action={url.registrationAction}
     method="post"
+    bind:this={htmlFormElement}
   >
     <UserProfileFormFields
       {kcContext}
@@ -109,9 +127,7 @@
               'g-recaptcha',
             )}
             data-sitekey={recaptchaSiteKey}
-            data-callback={() => {
-              (document.getElementById('kc-register-form') as HTMLFormElement).requestSubmit();
-            }}
+            data-callback="onSubmitRecaptcha"
             data-action={recaptchaAction}
             type="submit"
           >

package/keycloakify-svelte/login/pages/SelectAuthenticator.svelte

@@ -34,7 +34,7 @@
     method="post"
   >
     <div class={kcClsx('kcSelectAuthListClass')}>
-      {#each auth.authenticationSelections as authenticationSelection}
+      {#each auth.authenticationSelections as authenticationSelection (authenticationSelection.authExecId)}
         <button
           class={kcClsx('kcSelectAuthListItemClass')}
           type="submit"

package/keycloakify-svelte/login/pages/WebauthnAuthenticate.svelte

@@ -43,7 +43,7 @@
   {#snippet infoNode()}
     <div id="kc-registration">
       <span>
-        {@render msg('noAccount')()}{' '}
+        {@render msg('noAccount')()}&nbsp;
         <a
           tabindex={6}
           href={url.registrationUrl}
@@ -99,7 +99,7 @@
           id="authn_select"
           class={kcClsx('kcFormClass')}
         >
-          {#each authenticators.authenticators as authenticator}
+          {#each authenticators.authenticators as authenticator (authenticator.credentialId)}
             <input
               type="hidden"
               name="authn_use_chk"
@@ -113,7 +113,7 @@
             <p class={kcClsx('kcSelectAuthListItemTitle')}>{@render msg('webauthn-available-authenticators')()}</p>
           {/if}
           <div class={kcClsx('kcFormOptionsClass')}>
-            {#each authenticators.authenticators as authenticator, i}
+            {#each authenticators.authenticators as authenticator, i (authenticator.credentialId)}
               <div
                 id={`kc-webauthn-authenticator-item-${i}`}
                 class={kcClsx('kcSelectAuthListItemClass')}
@@ -144,7 +144,7 @@
                       id={`kc-webauthn-authenticator-transport-${i}`}
                       class={kcClsx('kcSelectAuthListItemDescriptionClass')}
                     >
-                      {#each authenticator.transports.displayNameProperties as displayNameProperty, i}
+                      {#each authenticator.transports.displayNameProperties as displayNameProperty, i (displayNameProperty)}
                         {@const hasNext = i !== authenticator.transports.displayNameProperties.length - 1}
                         {@render advancedMsg(displayNameProperty)()}
                         {#if hasNext}<span>, </span>{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/svelte",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Svelte Components for Keycloakify",
   "keywords": [
     "keycloak",
@@ -432,38 +432,38 @@
     "release": "sh scripts/release.sh"
   },
   "peerDependencies": {
-    "keycloakify": "^11.9.0",
+    "keycloakify": "^11.9.2",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^6.0.1",
-    "@sveltejs/kit": "^2.22.5",
-    "@sveltejs/package": "^2.3.12",
-    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/kit": "^2.29.1",
+    "@sveltejs/package": "^2.4.1",
+    "@sveltejs/vite-plugin-svelte": "^6.1.2",
     "@types/eslint": "^9.6.1",
     "@types/node": "^22.15.18",
     "@vercel/ncc": "^0.38.3",
-    "conventional-changelog-cli": "^5.0.0",
-    "cz-conventional-changelog": "^3.3.0",
     "cli-select": "^1.1.2",
-    "eslint": "^9.31.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-prettier": "^5.5.1",
-    "eslint-plugin-svelte": "^3.10.1",
+    "conventional-changelog": "^7.1.1",
+    "conventional-changelog-angular": "^8.0.0",
+    "eslint": "^9.33.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-svelte": "^3.11.0",
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^16.3.0",
-    "keycloakify": "^11.9.0",
-    "npm-check-updates": "^18.0.1",
+    "keycloakify": "^11.9.2",
+    "npm-check-updates": "^18.0.2",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "publint": "0.2.12",
-    "svelte": "^5.35.6",
-    "svelte-check": "^4.2.2",
-    "tsx": "^4.20.3",
+    "publint": "^0.3.12",
+    "svelte": "^5.38.1",
+    "svelte-check": "^4.3.1",
+    "tsx": "^4.20.4",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.36.0",
-    "vite": "^7.0.4",
-    "zod": "^4.0.5"
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.2",
+    "zod": "^4.0.17"
   },
   "bin": {
     "_keycloakify-custom-handler": "keycloakify-svelte/bin/index.js"

package/src/account/Template.svelte

@@ -62,7 +62,7 @@
                     {currentLanguage.label}
                   </a>
                   <ul>
-                    {#each enabledLanguages as { label, href }}
+                    {#each enabledLanguages as { label, href, languageTag } (languageTag)}
                       <li class="kc-dropdown-item">
                         <a {href}>{label}</a>
                       </li>

package/src/account/pages/Account.svelte

@@ -91,7 +91,7 @@
           class="control-label"
         >
           {@render msg('email')()}
-        </label>{' '}
+        </label>&nbsp;
         <span class="required">*</span>
       </div>
 
@@ -115,7 +115,7 @@
           class="control-label"
         >
           {@render msg('firstName')()}
-        </label>{' '}
+        </label>&nbsp;
         <span class="required">*</span>
       </div>
 
@@ -137,7 +137,7 @@
           class="control-label"
         >
           {@render msg('lastName')()}
-        </label>{' '}
+        </label>&nbsp;
         <span class="required">*</span>
       </div>
 

package/src/account/pages/Applications.svelte

@@ -76,7 +76,7 @@
         </thead>
 
         <tbody>
-          {#each applications as application}
+          {#each applications as application, i (i)}
             <tr>
               <td>
                 {#if application.effectiveUrl}
@@ -97,22 +97,22 @@
 
               <td>
                 {#if !isArrayWithEmptyObject(application.realmRolesAvailable)}
-                  {#each application.realmRolesAvailable as role, index}
+                  {#each application.realmRolesAvailable as role, index (role.name)}
                     <span>
                       {@render (role.description ? advancedMsg(role.description) : advancedMsg(role.name))()}
                       {#if index < application.realmRolesAvailable.length - 1},&nbsp;{/if}
                     </span>
                   {/each}
                   {#if application.resourceRolesAvailable}
-                    {#each Object.keys(application.resourceRolesAvailable) as resource}
+                    {#each Object.keys(application.resourceRolesAvailable) as resource (resource)}
                       <span>
                         {#if !isArrayWithEmptyObject(application.realmRolesAvailable)},&nbsp;{/if}
-                        {#each application.resourceRolesAvailable[resource] as clientRole}
+                        {#each application.resourceRolesAvailable[resource] as clientRole (clientRole.roleName)}
                           <span>
                             {@render (clientRole.roleDescription
                               ? advancedMsg(clientRole.roleDescription)
-                              : advancedMsg(clientRole.roleName))()}{' '}
-                            {@render msg('inResource')()}{' '}
+                              : advancedMsg(clientRole.roleName))()}&nbsp:
+                            {@render msg('inResource')()}&nbsp:
                             <strong>
                               {#if clientRole.clientName}
                                 {@render advancedMsg(clientRole.clientName)()}
@@ -131,7 +131,7 @@
 
               <td>
                 {#if application.client.consentRequired}
-                  {#each application.clientScopesGranted as claim}
+                  {#each application.clientScopesGranted as claim (claim)}
                     <span>
                       {@render advancedMsg(claim)()}
                       {#if claim !== application.clientScopesGranted[application.clientScopesGranted.length - 1]},&nbsp;{/if}
@@ -143,7 +143,7 @@
               </td>
 
               <td>
-                {#each application.additionalGrants as grant}
+                {#each application.additionalGrants as grant (grant)}
                   <span>
                     {@render advancedMsg(grant)()}
                     {#if grant !== application.additionalGrants[application.additionalGrants.length - 1]},&nbsp;{/if}

package/src/account/pages/FederatedIdentity.svelte

@@ -29,7 +29,7 @@
       </div>
     </div>
     <div id="federated-identities">
-      {#each federatedIdentity.identities as identity}
+      {#each federatedIdentity.identities as identity (identity.providerId)}
         <div class="row margin-bottom">
           <div class="col-sm-2 col-md-2">
             <label

package/src/account/pages/Log.svelte

@@ -46,14 +46,14 @@
       </thead>
 
       <tbody>
-        {#each log.events as event}
+        {#each log.events as event (event.event)}
           <tr>
             <td>{event.date ? new Date(event.date).toLocaleString() : ''}</td>
             <td>{event.event}</td>
             <td>{event.ipAddress}</td>
             <td>{event.client || ''}</td>
             <td>
-              {#each event.details as detail, detailIndex}
+              {#each event.details as detail, detailIndex (detail.key)}
                 <span>
                   {`${detail.key} = ${detail.value}`}
                   {#if detailIndex < event.details.length - 1},&nbsp;{/if}

package/src/account/pages/Password.svelte

@@ -108,7 +108,7 @@
       value={account.username ?? ''}
       autocomplete="username"
       readonly
-      style:display={'none'}
+      style:display="none"
     />
 
     {#if password.passwordSet}

package/src/account/pages/Sessions.svelte

@@ -48,14 +48,14 @@
 
     <!-- svelte-ignore a11y_no_redundant_roles -->
     <tbody role="rowgroup">
-      {#each sessions.sessions as session}
+      {#each sessions.sessions as session (session.id)}
         <tr>
           <td>{session.ipAddress}</td>
           <td>{session?.started}</td>
           <td>{session?.lastAccess}</td>
           <td>{session?.expires}</td>
           <td>
-            {#each session.clients as client}
+            {#each session.clients as client (client)}
               <div>
                 {client}
                 <br />