@keycloakify/svelte 0.0.1-rc.1

package/dist/login/pages/LoginOauth2DeviceVerifyUserCode.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login-oauth2-device-verify-user-code.ftl' }>, I18n> = $props();
+
+  const { url } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    {@render msg('oauth2DeviceVerificationTitle')()}
+  {/snippet}
+  <form
+    id="kc-user-verify-device-user-code-form"
+    class={kcClsx('kcFormClass')}
+    action={url.oauth2DeviceVerificationAction}
+    method="post"
+  >
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div class={kcClsx('kcLabelWrapperClass')}>
+        <label
+          for="device-user-code"
+          class={kcClsx('kcLabelClass')}
+        >
+          {@render msg('verifyOAuth2DeviceUserCode')()}
+        </label>
+      </div>
+
+      <div class={kcClsx('kcInputWrapperClass')}>
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+          id="device-user-code"
+          name="device_user_code"
+          autocomplete="off"
+          type="text"
+          class={kcClsx('kcInputClass')}
+          autofocus
+        />
+      </div>
+    </div>
+
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div
+        id="kc-form-options"
+        class={kcClsx('kcFormOptionsClass')}
+      >
+        <div class={kcClsx('kcFormOptionsWrapperClass')}></div>
+      </div>
+
+      <div
+        id="kc-form-buttons"
+        class={kcClsx('kcFormButtonsClass')}
+      >
+        <div class={kcClsx('kcFormButtonsWrapperClass')}>
+          <input
+            class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+            type="submit"
+            value={msgStr('doSubmit')}
+          />
+        </div>
+      </div>
+    </div>
+  </form>
+</Template>

package/dist/login/pages/LoginOauth2DeviceVerifyUserCode.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { PageProps } from './PageProps';
+import type { KcContext } from '../KcContext';
+import type { I18n } from '../i18n';
+declare const LoginOauth2DeviceVerifyUserCode: import("svelte").Component<PageProps<KcContext.LoginOauth2DeviceVerifyUserCode, I18n>, {}, "">;
+type LoginOauth2DeviceVerifyUserCode = ReturnType<typeof LoginOauth2DeviceVerifyUserCode>;
+export default LoginOauth2DeviceVerifyUserCode;

package/dist/login/pages/LoginOauthGrant.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login-oauth-grant.ftl' }>, I18n> = $props();
+
+  const { url, oauth, client } = kcContext;
+
+  const { msg, msgStr, advancedMsg, advancedMsgStr } = $i18n;
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  bodyClassName="oauth"
+>
+  {#snippet headerNode()}
+    {#if client.attributes.logoUri}
+      <img
+        src={client.attributes.logoUri}
+        alt="logo"
+      />
+    {/if}
+    <p>
+      {@render (client.name
+        ? msg('oauthGrantTitle', advancedMsgStr(client.name))
+        : msg('oauthGrantTitle', client.clientId))()}
+    </p>
+  {/snippet}
+  <div
+    id="kc-oauth"
+    class="content-area"
+  >
+    <h3>{@render msg('oauthGrantRequest')()}</h3>
+    <ul>
+      {#each oauth.clientScopesRequested as clientScope}
+        <li>
+          <span>
+            {@render advancedMsg(clientScope.consentScreenText)()}
+            {#if clientScope.dynamicScopeParameter}
+              : <b>{clientScope.dynamicScopeParameter}</b>
+            {/if}
+          </span>
+        </li>
+      {/each}
+    </ul>
+
+    {#if client.attributes.policyUri || client.attributes.tosUri}
+      <h3>
+        {@render (client.name
+          ? msg('oauthGrantInformation', advancedMsgStr(client.name))
+          : msg('oauthGrantInformation', client.clientId))()}
+        {#if client.attributes.tosUri}
+          {@render msg('oauthGrantReview')()}
+          <a
+            href={client.attributes.tosUri}
+            target="_blank"
+          >
+            {@render msg('oauthGrantTos')()}
+          </a>
+        {/if}
+        {#if client.attributes.policyUri}
+          {@render msg('oauthGrantReview')()}
+          <a
+            href={client.attributes.policyUri}
+            target="_blank"
+          >
+            {@render msg('oauthGrantPolicy')()}
+          </a>
+        {/if}
+      </h3>
+    {/if}
+
+    <form
+      class="form-actions"
+      action={url.oauthAction}
+      method="POST"
+    >
+      <input
+        type="hidden"
+        name="code"
+        value={oauth.code}
+      />
+      <div class={kcClsx('kcFormGroupClass')}>
+        <div id="kc-form-options">
+          <div class={kcClsx('kcFormOptionsWrapperClass')}></div>
+        </div>
+
+        <div id="kc-form-buttons">
+          <div class={kcClsx('kcFormButtonsWrapperClass')}>
+            <input
+              class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+              name="accept"
+              id="kc-login"
+              type="submit"
+              value={msgStr('doYes')}
+            />
+            <input
+              class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')}
+              name="cancel"
+              id="kc-cancel"
+              type="submit"
+              value={msgStr('doNo')}
+            />
+          </div>
+        </div>
+      </div>
+    </form>
+    <div class="clearfix"></div>
+  </div>
+</Template>

package/dist/login/pages/LoginOauthGrant.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { PageProps } from './PageProps';
+import type { KcContext } from '../KcContext';
+import type { I18n } from '../i18n';
+declare const LoginOauthGrant: import("svelte").Component<PageProps<KcContext.LoginOauthGrant, I18n>, {}, "">;
+type LoginOauthGrant = ReturnType<typeof LoginOauthGrant>;
+export default LoginOauthGrant;

package/dist/login/pages/LoginOtp.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login-otp.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { otpLogin, url, messagesPerField } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={!messagesPerField.existsError('totp')}
+>
+  {#snippet headerNode()}
+    {@render msg('doLogIn')()}
+  {/snippet}
+  <form
+    id="kc-otp-login-form"
+    class={kcClsx('kcFormClass')}
+    action={url.loginAction}
+    method="post"
+  >
+    {#if otpLogin.userOtpCredentials.length > 1}
+      <div class={kcClsx('kcFormGroupClass')}>
+        <div class={kcClsx('kcInputWrapperClass')}>
+          {#each otpLogin.userOtpCredentials as otpCredential, index}
+            <input
+              id={`kc-otp-credential-${index}`}
+              class={kcClsx('kcLoginOTPListInputClass')}
+              type="radio"
+              name="selectedCredentialId"
+              value={otpCredential.id}
+              checked={otpCredential.id === otpLogin.selectedCredentialId}
+            />
+            <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+            <label
+              for={`kc-otp-credential-${index}`}
+              class={kcClsx('kcLoginOTPListClass')}
+              tabindex={index}
+            >
+              <span class={kcClsx('kcLoginOTPListItemHeaderClass')}>
+                <span class={kcClsx('kcLoginOTPListItemIconBodyClass')}>
+                  <i
+                    class={kcClsx('kcLoginOTPListItemIconClass')}
+                    aria-hidden="true"
+                  ></i>
+                </span>
+                <span class={kcClsx('kcLoginOTPListItemTitleClass')}>{otpCredential.userLabel}</span>
+              </span>
+            </label>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div class={kcClsx('kcLabelWrapperClass')}>
+        <label
+          for="otp"
+          class={kcClsx('kcLabelClass')}
+        >
+          {@render msg('loginOtpOneTime')()}
+        </label>
+      </div>
+      <div class={kcClsx('kcInputWrapperClass')}>
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+          id="otp"
+          name="otp"
+          autocomplete="off"
+          type="text"
+          class={kcClsx('kcInputClass')}
+          autofocus
+          aria-invalid={messagesPerField.existsError('totp')}
+        />
+        {#if messagesPerField.existsError('totp')}
+          <span
+            id="input-error-otp-code"
+            class={kcClsx('kcInputErrorMessageClass')}
+            aria-live="polite"
+          >
+            {@html kcSanitize(messagesPerField.get('totp'))}
+          </span>
+        {/if}
+      </div>
+    </div>
+
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div
+        id="kc-form-options"
+        class={kcClsx('kcFormOptionsClass')}
+      >
+        <div class={kcClsx('kcFormOptionsWrapperClass')}></div>
+      </div>
+      <div
+        id="kc-form-buttons"
+        class={kcClsx('kcFormButtonsClass')}
+      >
+        <input
+          class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+          name="login"
+          id="kc-login"
+          type="submit"
+          value={msgStr('doLogIn')}
+        />
+      </div>
+    </div>
+  </form>
+</Template>

package/dist/login/pages/LoginOtp.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { PageProps } from './PageProps';
+import type { KcContext } from '../KcContext';
+import type { I18n } from '../i18n';
+declare const LoginOtp: import("svelte").Component<PageProps<KcContext.LoginOtp, I18n>, {}, "">;
+type LoginOtp = ReturnType<typeof LoginOtp>;
+export default LoginOtp;

package/dist/login/pages/LoginPageExpired.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login-page-expired.ftl' }>, I18n> = $props();
+
+  const { url } = kcContext;
+
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    {@render msg('pageExpiredTitle')()}
+  {/snippet}
+
+  <p
+    id="instruction1"
+    class="instruction"
+  >
+    {@render msg('pageExpiredMsg1')()}
+    <a
+      id="loginRestartLink"
+      href={url.loginRestartFlowUrl}
+    >
+      {@render msg('doClickHere')()}
+    </a>{' '}
+    .<br />
+    {@render msg('pageExpiredMsg2')()}{' '}
+    <a
+      id="loginContinueLink"
+      href={url.loginAction}
+    >
+      {@render msg('doClickHere')()}
+    </a>{' '}
+    .
+  </p>
+</Template>

package/dist/login/pages/LoginPageExpired.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { PageProps } from './PageProps';
+import type { KcContext } from '../KcContext';
+import type { I18n } from '../i18n';
+declare const LoginPageExpired: import("svelte").Component<PageProps<KcContext.LoginPageExpired, I18n>, {}, "">;
+type LoginPageExpired = ReturnType<typeof LoginPageExpired>;
+export default LoginPageExpired;

package/dist/login/pages/LoginPasskeysConditionalAuthenticate.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { useScript } from './LoginPasskeysConditionalAuthenticate.useScript';
+  import type { PageProps } from './PageProps';
+  import { type ClassKey, getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import { clsx } from 'keycloakify/tools/clsx';
+  import type { CxArg } from 'keycloakify/tools/clsx_withTransform';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login-passkeys-conditional-authenticate.ftl' }>, I18n> = $props();
+
+  const {
+    messagesPerField,
+    login,
+    url,
+    usernameHidden,
+    shouldDisplayAuthenticators,
+    authenticators,
+    registrationDisabled,
+    realm,
+  } = kcContext;
+
+  const { msg, msgStr, advancedMsg } = $i18n;
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const authButtonId = 'authenticateWebAuthnButton';
+
+  useScript({ authButtonId, kcContext, i18n });
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    {@render msg('passkey-login-title')()}
+  {/snippet}
+  {#snippet infoNode()}
+    {#if realm.registrationAllowed && !registrationDisabled}
+      <div id="kc-registration">
+        <span>
+          {@render msg('noAccount')()}
+          <a
+            tabindex={6}
+            href={url.registrationUrl}
+          >
+            {@render msg('doRegister')()}
+          </a>
+        </span>
+      </div>
+    {/if}
+  {/snippet}
+  <form
+    id="webauth"
+    action={url.loginAction}
+    method="post"
+  >
+    <input
+      type="hidden"
+      id="clientDataJSON"
+      name="clientDataJSON"
+    />
+    <input
+      type="hidden"
+      id="authenticatorData"
+      name="authenticatorData"
+    />
+    <input
+      type="hidden"
+      id="signature"
+      name="signature"
+    />
+    <input
+      type="hidden"
+      id="credentialId"
+      name="credentialId"
+    />
+    <input
+      type="hidden"
+      id="userHandle"
+      name="userHandle"
+    />
+    <input
+      type="hidden"
+      id="error"
+      name="error"
+    />
+  </form>
+  <div
+    class={kcClsx('kcFormGroupClass')}
+    no-bottom-margin={true}
+    style:margin-bottom={'0'}
+  >
+    {#if authenticators !== undefined && Object.keys(authenticators).length !== 0}
+      <form
+        id="authn_select"
+        class={kcClsx('kcFormClass')}
+      >
+        {#each authenticators.authenticators as authenticator}
+          <input
+            type="hidden"
+            name="authn_use_chk"
+            readOnly
+            value={authenticator.credentialId}
+          />
+        {/each}
+      </form>
+      {#if shouldDisplayAuthenticators}
+        {#if authenticators.authenticators.length > 1}
+          <p class={kcClsx('kcSelectAuthListItemTitle')}>{msg('passkey-available-authenticators')}</p>
+        {/if}
+        <div class={kcClsx('kcFormClass')}>
+          {#each authenticators.authenticators as authenticator, i}
+            <div
+              id={`kc-webauthn-authenticator-item-${i}`}
+              class={kcClsx('kcSelectAuthListItemClass')}
+            >
+              <i
+                class={clsx(
+                  (() => {
+                    const klass = kcClsx(authenticator.transports.iconClass as CxArg<ClassKey>);
+                    if (klass === authenticator.transports.iconClass) {
+                      return kcClsx('kcWebAuthnDefaultIcon');
+                    }
+                    return klass;
+                  })(),
+                  kcClsx('kcSelectAuthListItemIconPropertyClass'),
+                )}
+              ></i>
+              <div class={kcClsx('kcSelectAuthListItemBodyClass')}>
+                <div
+                  id={`kc-webauthn-authenticator-label-${i}`}
+                  class={kcClsx('kcSelectAuthListItemHeadingClass')}
+                >
+                  {advancedMsg(authenticator.label)}
+                </div>
+                {#if authenticator.transports !== undefined && authenticator.transports.displayNameProperties !== undefined && authenticator.transports.displayNameProperties.length !== 0}
+                  <div
+                    id={`kc-webauthn-authenticator-transport-${i}`}
+                    class={kcClsx('kcSelectAuthListItemDescriptionClass')}
+                  >
+                    {#each authenticator.transports.displayNameProperties as nameProperty, i}
+                      <span> {advancedMsg(nameProperty)} </span>
+                      {#if i !== authenticator.transports.displayNameProperties.length - 1}
+                        <span>, </span>{/if}
+                    {/each}
+                  </div>
+                {/if}
+                <div class={kcClsx('kcSelectAuthListItemDescriptionClass')}>
+                  <span id={`kc-webauthn-authenticator-createdlabel-${i}`}>{msg('passkey-createdAt-label')}</span>
+                  <span id={`kc-webauthn-authenticator-created-${i}`}>{authenticator.createdAt}</span>
+                </div>
+              </div>
+              <div class={kcClsx('kcSelectAuthListItemFillClass')}></div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    {/if}
+    <div id="kc-form">
+      <div id="kc-form-wrapper">
+        {#if realm.password}
+          <form
+            id="kc-form-login"
+            action={url.loginAction}
+            method="post"
+            style:display={'none'}
+            onsubmit={(event) => {
+              try {
+                event.currentTarget.login.disabled = true;
+              } catch (e) {
+                console.error(e);
+              }
+
+              return true;
+            }}
+          >
+            {#if !usernameHidden}
+              <div class={kcClsx('kcFormGroupClass')}>
+                <label
+                  for="username"
+                  class={kcClsx('kcLabelClass')}
+                >
+                  {msg('passkey-autofill-select')}
+                </label>
+                <!-- svelte-ignore a11y_autofocus -->
+                <input
+                  tabindex={1}
+                  id="username"
+                  aria-invalid={messagesPerField.existsError('username')}
+                  class={kcClsx('kcInputClass')}
+                  name="username"
+                  value={login.username ?? ''}
+                  autocomplete="username webauthn"
+                  type="text"
+                  autofocus
+                />
+                {#if messagesPerField.existsError('username')}
+                  <span
+                    id="input-error-username"
+                    class={kcClsx('kcInputErrorMessageClass')}
+                    aria-live="polite"
+                  >
+                    {messagesPerField.get('username')}
+                  </span>
+                {/if}
+              </div>
+            {/if}
+          </form>
+        {/if}
+        <div
+          id="kc-form-passkey-button"
+          class={kcClsx('kcFormButtonsClass')}
+          style:display={'none'}
+        >
+          <!-- svelte-ignore a11y_autofocus -->
+          <input
+            id={authButtonId}
+            type="button"
+            autofocus
+            value={msgStr('passkey-doAuthenticate')}
+            class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</Template>

package/dist/login/pages/LoginPasskeysConditionalAuthenticate.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { PageProps } from './PageProps';
+import type { KcContext } from '../KcContext';
+import type { I18n } from '../i18n';
+declare const LoginPasskeysConditionalAuthenticate: import("svelte").Component<PageProps<KcContext.LoginPasskeysConditionalAuthenticate, I18n>, {}, "">;
+type LoginPasskeysConditionalAuthenticate = ReturnType<typeof LoginPasskeysConditionalAuthenticate>;
+export default LoginPasskeysConditionalAuthenticate;

package/dist/login/pages/LoginPasskeysConditionalAuthenticate.useScript.d.ts

@@ -0,0 +1,21 @@
+import type { Readable } from 'svelte/store';
+type KcContextLike = {
+    url: {
+        resourcesPath: string;
+    };
+    isUserIdentified: boolean | 'true' | 'false';
+    challenge: string;
+    userVerification: string;
+    rpId: string;
+    createTimeout: number | string;
+};
+type I18nLike = {
+    msgStr: (key: 'webauthn-unsupported-browser-text' | 'passkey-unsupported-browser-text') => string;
+    isFetchingTranslations: boolean;
+};
+export declare function useScript(params: {
+    authButtonId: string;
+    kcContext: KcContextLike;
+    i18n: Readable<I18nLike>;
+}): void;
+export {};