@keycloakify/svelte 0.0.1-rc.1

package/src/account/pages/Totp.svelte

@@ -0,0 +1,287 @@
+<script lang="ts">
+  import type { PageProps } from '@keycloakify/svelte/account/pages/PageProps';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+  import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+  import { clsx } from 'keycloakify/tools/clsx';
+
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'totp.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
+
+  const { msg, msgStr, advancedMsg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  active="totp"
+>
+  <div class="row">
+    <div class="col-md-10">
+      <h2>{@render msg('authenticatorTitle')()}</h2>
+    </div>
+    {#if totp.otpCredentials.length === 0}
+      <div class="subtitle col-md-2">
+        <span class="required">*</span>
+        {@render msg('requiredFields')()}
+      </div>
+    {/if}
+  </div>
+  {#if totp.enabled}
+    <table class="table table-bordered table-striped">
+      <thead>
+        {#if totp.otpCredentials.length > 1}
+          <tr>
+            <th colspan={4}>{@render msg('configureAuthenticators')()}</th>
+          </tr>
+        {:else}
+          <tr>
+            <th colspan={3}>{@render msg('configureAuthenticators')()}</th>
+          </tr>
+        {/if}
+      </thead>
+      <tbody>
+        {#each totp.otpCredentials as credential, index}
+          <tr>
+            <td class="provider">{@render msg('mobile')()}</td>
+            {#if totp.otpCredentials.length > 1}<td class="provider">{credential.id}</td>{/if}
+            <td class="provider">{credential.userLabel || ''}</td>
+            <td class="action">
+              <form
+                action={url.totpUrl}
+                method="post"
+                class="form-inline"
+              >
+                <input
+                  type="hidden"
+                  id="stateChecker"
+                  name="stateChecker"
+                  value={stateChecker}
+                />
+                <input
+                  type="hidden"
+                  id="submitAction"
+                  name="submitAction"
+                  value="Delete"
+                />
+                <input
+                  type="hidden"
+                  id="credentialId"
+                  name="credentialId"
+                  value={credential.id}
+                />
+                <button
+                  id={`remove-mobile-${index}`}
+                  class="btn btn-default"
+                  aria-label="delete"
+                >
+                  <i class="pficon pficon-delete"></i>
+                </button>
+              </form>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+  {#if !totp.enabled}
+    <div>
+      <hr />
+      <ol id="kc-totp-settings">
+        <li>
+          <p>{@render msg('totpStep1')()}</p>
+
+          <ul id="kc-totp-supported-apps">
+            {#each totp.supportedApplications as app}
+              <li>{@render advancedMsg(app)()}</li>
+            {/each}
+          </ul>
+        </li>
+
+        {#if mode && mode == 'manual'}
+          <li>
+            <p>{@render msg('totpManualStep2')()}</p>
+            <p>
+              <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
+            </p>
+            <p>
+              <a
+                href={totp.qrUrl}
+                id="mode-barcode"
+              >
+                {@render msg('totpScanBarcode')()}
+              </a>
+            </p>
+          </li>
+          <li>
+            <p>{@render msg('totpManualStep3')()}</p>
+            <ul>
+              <li id="kc-totp-type">
+                {@render msg('totpType')()}: {@render msg(`totp.${totp.policy.type}`)()}
+              </li>
+              <li id="kc-totp-algorithm">
+                {@render msg('totpAlgorithm')()}: {totp.policy.getAlgorithmKey()}
+              </li>
+              <li id="kc-totp-digits">
+                {@render msg('totpDigits')()}: {totp.policy.digits}
+              </li>
+              {#if totp.policy.type === 'totp'}
+                <li id="kc-totp-period">
+                  {@render msg('totpInterval')()}: {totp.policy.period}
+                </li>
+              {:else}
+                <li id="kc-totp-counter">
+                  {@render msg('totpCounter')()}: {totp.policy.initialCounter}
+                </li>
+              {/if}
+            </ul>
+          </li>
+        {:else}
+          <li>
+            <p>{@render msg('totpStep2')()}</p>
+            <p>
+              <img
+                id="kc-totp-secret-qr-code"
+                src={`data:image/png;base64, ${totp.totpSecretQrCode}`}
+                alt="Figure: Barcode"
+              />
+            </p>
+            <p>
+              <a
+                href={totp.manualUrl}
+                id="mode-manual"
+              >
+                {@render msg('totpUnableToScan')()}
+              </a>
+            </p>
+          </li>
+        {/if}
+        <li>
+          <p>{@render msg('totpStep3')()}</p>
+          <p>{@render msg('totpStep3DeviceName')()}</p>
+        </li>
+      </ol>
+      <hr />
+      <form
+        action={url.totpUrl}
+        class={kcClsx('kcFormClass')}
+        id="kc-totp-settings-form"
+        method="post"
+      >
+        <input
+          type="hidden"
+          id="stateChecker"
+          name="stateChecker"
+          value={stateChecker}
+        />
+        <div class={kcClsx('kcFormGroupClass')}>
+          <div class="col-sm-2 col-md-2">
+            <label
+              for="totp"
+              class="control-label"
+            >
+              {@render msg('authenticatorCode')()}
+            </label>
+            <span class="required">*</span>
+          </div>
+          <div class="col-sm-10 col-md-10">
+            <input
+              type="text"
+              id="totp"
+              name="totp"
+              autocomplete="off"
+              class={kcClsx('kcInputClass')}
+              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>
+          <input
+            type="hidden"
+            id="totpSecret"
+            name="totpSecret"
+            value={totp.totpSecret}
+          />
+          {#if mode}<input
+              type="hidden"
+              id="mode"
+              value={mode}
+            />{/if}
+        </div>
+
+        <div class={kcClsx('kcFormGroupClass')}>
+          <div class="col-sm-2 col-md-2">
+            <label
+              for="userLabel"
+              class={kcClsx('kcLabelClass')}
+            >
+              {@render msg('totpDeviceName')()}
+            </label>
+            {#if totp.otpCredentials.length >= 1}<span class="required">*</span>{/if}
+          </div>
+          <div class="col-sm-10 col-md-10">
+            <input
+              type="text"
+              id="userLabel"
+              name="userLabel"
+              autocomplete="off"
+              class={kcClsx('kcInputClass')}
+              aria-invalid={messagesPerField.existsError('userLabel')}
+            />
+            {#if messagesPerField.existsError('userLabel')}
+              <span
+                id="input-error-otp-label"
+                class={kcClsx('kcInputErrorMessageClass')}
+                aria-live="polite">{@html kcSanitize(messagesPerField.get('userLabel'))}</span
+              >
+            {/if}
+          </div>
+        </div>
+
+        <div
+          id="kc-form-buttons"
+          class={clsx(kcClsx('kcFormGroupClass'), 'text-right')}
+        >
+          <div class={kcClsx('kcInputWrapperClass')}>
+            <input
+              type="submit"
+              class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+              id="saveTOTPBtn"
+              value={msgStr('doSave')}
+            />
+            <button
+              type="submit"
+              class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass', 'kcButtonLargeClass')}
+              id="cancelTOTPBtn"
+              name="submitAction"
+              value="Cancel"
+            >
+              {@render msg('doCancel')()}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  {/if}
+</Template>

package/src/additional-svelte-typings.d.ts

@@ -0,0 +1,6 @@
+declare namespace svelteHTML {
+  // enhance attributes
+  interface HTMLAttributes {
+    'no-bottom-margin'?: boolean;
+  }
+}

package/src/login/DefaultPage.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type { UserProfileFormFieldsProps } from '@keycloakify/svelte/login/components/UserProfileFormFieldsProps';
+  import type { PageProps } from '@keycloakify/svelte/login/pages/PageProps';
+  import type { Component } from 'svelte';
+  import type { I18n } from './i18n';
+  import type { KcContext } from './KcContext';
+
+  type DefaultPageProps = PageProps<KcContext, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+  };
+  const props: DefaultPageProps = $props();
+  const { kcContext: kcContext, ...rest } = props;
+  const loadComponent = () => {
+    switch (kcContext.pageId) {
+      case 'login.ftl':
+        return import('@keycloakify/svelte/login/pages/Login.svelte');
+
+      case 'register.ftl':
+        return import('@keycloakify/svelte/login/pages/Register.svelte');
+
+      case 'info.ftl':
+        return import('@keycloakify/svelte/login/pages/Info.svelte');
+
+      case 'error.ftl':
+        return import('@keycloakify/svelte/login/pages/Error.svelte');
+
+      case 'login-reset-password.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginResetPassword.svelte');
+
+      case 'login-verify-email.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginVerifyEmail.svelte');
+
+      case 'terms.ftl':
+        return import('@keycloakify/svelte/login/pages/Terms.svelte');
+
+      case 'login-oauth2-device-verify-user-code.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginOauth2DeviceVerifyUserCode.svelte');
+
+      case 'login-oauth-grant.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginOauthGrant.svelte');
+
+      case 'login-otp.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginOtp.svelte');
+
+      case 'login-username.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginUsername.svelte');
+
+      case 'webauthn-authenticate.ftl':
+        return import('@keycloakify/svelte/login/pages/WebauthnAuthenticate.svelte');
+
+      case 'webauthn-register.ftl':
+        return import('@keycloakify/svelte/login/pages/WebauthnRegister.svelte');
+
+      case 'login-password.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginPassword.svelte');
+
+      case 'login-update-password.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginUpdatePassword.svelte');
+
+      case 'login-update-profile.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginUpdateProfile.svelte');
+
+      case 'login-idp-link-confirm.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginIdpLinkConfirm.svelte');
+
+      case 'login-idp-link-email.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginIdpLinkEmail.svelte');
+
+      case 'login-page-expired.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginPageExpired.svelte');
+
+      case 'login-config-totp.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginConfigTotp.svelte');
+
+      case 'logout-confirm.ftl':
+        return import('@keycloakify/svelte/login/pages/LogoutConfirm.svelte');
+
+      case 'idp-review-user-profile.ftl':
+        return import('@keycloakify/svelte/login/pages/IdpReviewUserProfile.svelte');
+
+      case 'update-email.ftl':
+        return import('@keycloakify/svelte/login/pages/UpdateEmail.svelte');
+
+      case 'select-authenticator.ftl':
+        return import('@keycloakify/svelte/login/pages/SelectAuthenticator.svelte');
+
+      case 'saml-post-form.ftl':
+        return import('@keycloakify/svelte/login/pages/SamlPostForm.svelte');
+
+      case 'delete-credential.ftl':
+        return import('@keycloakify/svelte/login/pages/DeleteCredential.svelte');
+
+      case 'code.ftl':
+        return import('@keycloakify/svelte/login/pages/Code.svelte');
+
+      case 'delete-account-confirm.ftl':
+        return import('@keycloakify/svelte/login/pages/DeleteAccountConfirm.svelte');
+
+      case 'frontchannel-logout.ftl':
+        return import('@keycloakify/svelte/login/pages/FrontchannelLogout.svelte');
+
+      case 'login-recovery-authn-code-config.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginRecoveryAuthnCodeConfig.svelte');
+
+      case 'login-recovery-authn-code-input.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginRecoveryAuthnCodeInput.svelte');
+
+      case 'login-reset-otp.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginResetOtp.svelte');
+
+      case 'login-x509-info.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginX509Info.svelte');
+
+      case 'webauthn-error.ftl':
+        return import('@keycloakify/svelte/login/pages/WebauthnError.svelte');
+
+      case 'login-passkeys-conditional-authenticate.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginPasskeysConditionalAuthenticate.svelte');
+
+      case 'login-idp-link-confirm-override.ftl':
+        return import('@keycloakify/svelte/login/pages/LoginIdpLinkConfirmOverride.svelte');
+    }
+  };
+  const lazyComponent = loadComponent();
+</script>
+
+{#if lazyComponent}
+  {#await lazyComponent then { default: LazyComponent }}
+    <LazyComponent
+      kcContext={kcContext as never}
+      {...rest}
+    />
+  {/await}
+{/if}

package/src/login/KcContext/KcContext.ts

@@ -0,0 +1 @@
+export type { ExtendKcContext, KcContext } from 'keycloakify/login/KcContext';

package/src/login/KcContext/index.ts

@@ -0,0 +1 @@
+export * from './KcContext';

package/src/login/Template.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+  import { useInitialize } from '@keycloakify/svelte/login/Template.useInitialize';
+  import type { TemplateProps } from '@keycloakify/svelte/login/TemplateProps';
+  import { useSetClassName } from '@keycloakify/svelte/tools/useSetClassName';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import { clsx } from 'keycloakify/tools/clsx';
+  import { onMount } from 'svelte';
+  import type { I18n } from './i18n';
+  import type { KcContext } from './KcContext';
+
+  const {
+    displayInfo = false,
+    displayMessage = true,
+    displayRequiredFields = false,
+    headerNode,
+    socialProvidersNode = null,
+    infoNode = null,
+    documentTitle,
+    bodyClassName,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+    children,
+  }: TemplateProps<KcContext, I18n> = $props();
+  const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+
+  const { msgStr, currentLanguage, enabledLanguages } = $i18n;
+
+  const { realm, auth, url, message, isAppInitiatedAction } = kcContext;
+  onMount(() => {
+    document.title = documentTitle ?? msgStr('loginTitle', kcContext.realm.displayName);
+  });
+  useSetClassName({
+    qualifiedName: 'html',
+    className: kcClsx('kcHtmlClass'),
+  });
+
+  useSetClassName({
+    qualifiedName: 'body',
+    className: bodyClassName ?? kcClsx('kcBodyClass'),
+  });
+  const { isReadyToRender } = useInitialize({ kcContext, doUseDefaultCss });
+</script>
+
+{#if $isReadyToRender}
+  <div class={kcClsx('kcLoginClass')}>
+    <div
+      id="kc-header"
+      class={kcClsx('kcHeaderClass')}
+    >
+      <div
+        id="kc-header-wrapper"
+        class={kcClsx('kcHeaderWrapperClass')}
+      >
+        {msgStr('loginTitleHtml', realm.displayNameHtml)}
+      </div>
+    </div>
+
+    <div class={kcClsx('kcFormCardClass')}>
+      <header class={kcClsx('kcFormHeaderClass')}>
+        {#if enabledLanguages.length > 1}
+          <div
+            class={kcClsx('kcLocaleMainClass')}
+            id="kc-locale"
+          >
+            <div
+              id="kc-locale-wrapper"
+              class={kcClsx('kcLocaleWrapperClass')}
+            >
+              <div
+                id="kc-locale-dropdown"
+                class={clsx('menu-button-links', kcClsx('kcLocaleDropDownClass'))}
+              >
+                <button
+                  tabindex={1}
+                  id="kc-current-locale-link"
+                  aria-label={msgStr('languages')}
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                  aria-controls="language-switch1"
+                >
+                  {currentLanguage.label}
+                </button>
+                <!-- svelte-ignore a11y_incorrect_aria_attribute_type -->
+                <ul
+                  role="menu"
+                  tabindex={-1}
+                  aria-labelledby="kc-current-locale-link"
+                  aria-activedescendant=""
+                  id="language-switch1"
+                  class={kcClsx('kcLocaleListClass')}
+                >
+                  {#each enabledLanguages as enabledLanguage, i}
+                    {@const { label, href } = enabledLanguage}
+                    <li
+                      class={kcClsx('kcLocaleListItemClass')}
+                      role="none"
+                    >
+                      <a
+                        role="menuitem"
+                        id={`language-${i + 1}`}
+                        class={kcClsx('kcLocaleItemClass')}
+                        {href}
+                      >
+                        {label}
+                      </a>
+                    </li>
+                  {/each}
+                </ul>
+              </div>
+            </div>
+          </div>
+        {/if}
+        {#snippet node()}
+          {#if !(auth !== undefined && auth.showUsername && !auth.showResetCredentials)}
+            <h1 id="kc-page-title">{@render headerNode?.()}</h1>
+          {:else}
+            <div
+              id="kc-username"
+              class={kcClsx('kcFormGroupClass')}
+            >
+              <!-- svelte-ignore a11y_label_has_associated_control -->
+              <label id="kc-attempted-username">{auth.attemptedUsername}</label>
+              <a
+                id="reset-login"
+                href={url.loginRestartFlowUrl}
+                aria-label={msgStr('restartLoginTooltip')}
+              >
+                <div class="kc-login-tooltip">
+                  <i class={kcClsx('kcResetFlowIcon')}></i>
+                  <span class="kc-tooltip-text">{msgStr('restartLoginTooltip')}</span>
+                </div>
+              </a>
+            </div>
+          {/if}
+        {/snippet}
+        {#if displayRequiredFields}
+          <div class={kcClsx('kcContentWrapperClass')}>
+            <div class={clsx(kcClsx('kcLabelWrapperClass'), 'subtitle')}>
+              <span class="subtitle">
+                <span class="required">*</span>
+                {msgStr('requiredFields')}
+              </span>
+            </div>
+            <div class="col-md-10">{@render node()}</div>
+          </div>
+        {:else}
+          {@render node()}
+        {/if}
+      </header>
+      <div id="kc-content">
+        <div id="kc-content-wrapper">
+          <!-- App-initiated actions should not see warning messages about the need to complete the action during login. -->
+          {#if displayMessage && message !== undefined && (message.type !== 'warning' || !isAppInitiatedAction)}
+            <div
+              class={clsx(
+                `alert-${message.type}`,
+                kcClsx('kcAlertClass'),
+                `pf-m-${message?.type === 'error' ? 'danger' : message.type}`,
+              )}
+            >
+              <div class="pf-c-alert__icon">
+                {#if message.type === 'success'}
+                  <span class={kcClsx('kcFeedbackSuccessIcon')}></span>
+                {:else if message.type === 'warning'}
+                  <span class={kcClsx('kcFeedbackWarningIcon')}></span>
+                {:else if message.type === 'error'}
+                  <span class={kcClsx('kcFeedbackErrorIcon')}></span>
+                {:else if message.type === 'info'}
+                  <span class={kcClsx('kcFeedbackInfoIcon')}></span>
+                {/if}
+              </div>
+              <span class={kcClsx('kcAlertTitleClass')}>{@html kcSanitize(message.summary)}</span>
+            </div>
+          {/if}
+          {@render children?.()}
+          {#if auth !== undefined && auth.showTryAnotherWayLink}
+            <form
+              id="kc-select-try-another-way-form"
+              action={url.loginAction}
+              method="post"
+            >
+              <div class={kcClsx('kcFormGroupClass')}>
+                <input
+                  type="hidden"
+                  name="tryAnotherWay"
+                  value="on"
+                />
+                <!-- svelte-ignore a11y_invalid_attribute -->
+                <a
+                  href="#"
+                  id="try-another-way"
+                  onclick={() => {
+                    document.forms['kc-select-try-another-way-form' as never].submit();
+                    return false;
+                  }}
+                >
+                  {msgStr('doTryAnotherWay')}
+                </a>
+              </div>
+            </form>
+          {/if}
+          {@render socialProvidersNode?.()}
+          {#if displayInfo}
+            <div
+              id="kc-info"
+              class={kcClsx('kcSignUpClass')}
+            >
+              <div
+                id="kc-info-wrapper"
+                class={kcClsx('kcInfoAreaWrapperClass')}
+              >
+                {@render infoNode?.()}
+              </div>
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}