@keycloakify/svelte 0.2.1 → 0.2.3

package/src/account/pages/Totp.svelte

@@ -56,7 +56,7 @@
         {/if}
       </thead>
       <tbody>
-        {#each totp.otpCredentials as credential, index}
+        {#each totp.otpCredentials as credential, index (credential.id)}
           <tr>
             <td class="provider">{@render msg('mobile')()}</td>
             {#if totp.otpCredentials.length > 1}<td class="provider">{credential.id}</td>{/if}
@@ -107,7 +107,7 @@
           <p>{@render msg('totpStep1')()}</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>

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/login/pages/FrontchannelLogout.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { PageProps } from '@keycloakify/svelte/login/pages/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/stories/account/KcPage.svelte

@@ -11,6 +11,7 @@
 
   const classes = {} satisfies { [key in ClassKey]?: string };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const page = async (): Promise<{ default?: Component<any> }> => {
     switch (kcContext.pageId) {
       default:

package/stories/login/KcPage.svelte

@@ -13,6 +13,7 @@
   const classes = {} satisfies { [key in ClassKey]?: string };
   const doMakeUserConfirmPassword = true;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const page = async (): Promise<{ default?: Component<any> }> => {
     switch (kcContext.pageId) {
       default: