@keycloakify/svelte 0.0.1-rc.6 → 0.1.0

package/keycloakify-svelte/bin/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/keycloakify-svelte/login/DefaultPage.svelte

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

package/keycloakify-svelte/login/DefaultPage.svelte.d.ts

@@ -0,0 +1,12 @@
+type DefaultPageProps = PageProps<KcContext, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+};
+import type { UserProfileFormFieldsProps } from './components/UserProfileFormFieldsProps';
+import type { PageProps } from './pages/PageProps';
+import type { Component } from 'svelte';
+import type { I18n } from './i18n';
+import type { KcContext } from './KcContext';
+declare const DefaultPage: Component<DefaultPageProps, {}, "">;
+type DefaultPage = ReturnType<typeof DefaultPage>;
+export default DefaultPage;

package/keycloakify-svelte/login/KcContext/KcContext.d.ts

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

package/keycloakify-svelte/login/KcContext/KcContext.js

@@ -0,0 +1 @@
+export {};

package/keycloakify-svelte/login/KcContext/index.d.ts

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

package/keycloakify-svelte/login/KcContext/index.js

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

package/keycloakify-svelte/login/Template.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+  import { useInitialize } from './Template.useInitialize';
+  import type { TemplateProps } from './TemplateProps';
+  import { useSetClassName } from '../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}

package/keycloakify-svelte/login/Template.svelte.d.ts

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

package/keycloakify-svelte/login/Template.useInitialize.d.ts

@@ -0,0 +1,14 @@
+export type KcContextLike = {
+    url: {
+        resourcesCommonPath: string;
+        resourcesPath: string;
+        ssoLoginInOtherTabsUrl: string;
+    };
+    scripts?: string[];
+};
+export declare function useInitialize(params: {
+    kcContext: KcContextLike;
+    doUseDefaultCss: boolean;
+}): {
+    isReadyToRender: import("svelte/store").Readable<boolean>;
+};

package/keycloakify-svelte/login/Template.useInitialize.js

@@ -0,0 +1,55 @@
+import { useInsertLinkTags } from '../tools/useInsertLinkTags';
+import { useInsertScriptTags } from '../tools/useInsertScriptTags';
+import { assert } from 'keycloakify/tools/assert';
+import { onMount } from 'svelte';
+assert();
+assert();
+export function useInitialize(params) {
+    const { kcContext, doUseDefaultCss } = params;
+    const { url, scripts } = kcContext;
+    const { areAllStyleSheetsLoaded } = useInsertLinkTags({
+        componentOrHookName: 'Template',
+        hrefs: !doUseDefaultCss
+            ? []
+            : [
+                `${url.resourcesCommonPath}/node_modules/@patternfly/patternfly/patternfly.min.css`,
+                `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
+                `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
+                `${url.resourcesCommonPath}/lib/pficon/pficon.css`,
+                `${url.resourcesPath}/css/login.css`,
+            ],
+    });
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: 'Template',
+        scriptTags: [
+            // NOTE: The importmap is added in by the FTL script because it's too late to add it here.
+            {
+                type: 'module',
+                src: `${url.resourcesPath}/js/menu-button-links.js`,
+            },
+            ...(scripts === undefined
+                ? []
+                : scripts.map((src) => ({
+                    type: 'text/javascript',
+                    src,
+                }))),
+            {
+                type: 'module',
+                textContent: `
+                    import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";
+
+                    checkCookiesAndSetTimer("${url.ssoLoginInOtherTabsUrl}");
+                `,
+            },
+        ],
+    });
+    onMount(() => {
+        const unsubscriber = areAllStyleSheetsLoaded.subscribe((isReadyToRender) => {
+            if (isReadyToRender) {
+                insertScriptTags();
+            }
+        });
+        return () => unsubscriber();
+    });
+    return { isReadyToRender: areAllStyleSheetsLoaded };
+}

package/keycloakify-svelte/login/TemplateProps.d.ts

@@ -0,0 +1,20 @@
+import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { Snippet } from 'svelte';
+import type { Readable } from 'svelte/store';
+export type TemplateProps<KcContext, I18n> = {
+    kcContext: KcContext;
+    i18n: Readable<I18n>;
+    doUseDefaultCss: boolean;
+    classes?: Partial<Record<ClassKey, string>>;
+    children: Snippet;
+    displayInfo?: boolean;
+    displayMessage?: boolean;
+    displayRequiredFields?: boolean;
+    showAnotherWayIfPresent?: boolean;
+    headerNode: Snippet;
+    socialProvidersNode?: Snippet | null;
+    infoNode?: Snippet | null;
+    documentTitle?: string;
+    bodyClassName?: string;
+};
+export type { ClassKey };

package/keycloakify-svelte/login/TemplateProps.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import {
+    getButtonToDisplayForMultivaluedAttributeField,
+    type FormAction,
+  } from '../lib/useUserProfileForm';
+  import type { Attribute } from 'keycloakify/login/KcContext';
+  import type { EventDispatcher } from 'svelte';
+  import type { Readable } from 'svelte/store';
+  import type { I18n } from '../i18n';
+
+  type AddRemoveButtonsMultiValuedAttributeProps = {
+    attribute: Attribute;
+    values: string[];
+    fieldIndex: number;
+    dispatchFormAction: EventDispatcher<{ formAction: Extract<FormAction, { action: 'update' }> }>;
+    i18n: Readable<I18n>;
+  };
+  const { attribute, values, fieldIndex, dispatchFormAction, i18n }: AddRemoveButtonsMultiValuedAttributeProps =
+    $props();
+  const { msg } = $i18n;
+
+  const { hasAdd, hasRemove } = getButtonToDisplayForMultivaluedAttributeField({ attribute, values, fieldIndex });
+
+  const idPostfix = `-${attribute.name}-${fieldIndex + 1}`;
+</script>
+
+{#if hasRemove}
+  <button
+    id={`kc-remove${idPostfix}`}
+    type="button"
+    class="pf-c-button pf-m-inline pf-m-link"
+    onclick={() =>
+      dispatchFormAction('formAction', {
+        action: 'update',
+        name: attribute.name,
+        valueOrValues: values.filter((_, i) => i !== fieldIndex),
+      })}
+  >
+    {@render msg('remove')()}
+  </button>
+  {#if hasAdd}&nbsp;|&nbsp;{/if}
+{/if}
+{#if hasAdd}
+  <button
+    id={`kc-add${idPostfix}`}
+    type="button"
+    class="pf-c-button pf-m-inline pf-m-link"
+    onclick={() =>
+      dispatchFormAction('formAction', {
+        action: 'update',
+        name: attribute.name,
+        valueOrValues: [...values, ''],
+      })}
+  >
+    {@render msg('addValue')()}
+  </button>
+{/if}

package/keycloakify-svelte/login/components/AddRemoveButtonsMultiValuedAttribute.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type FormAction } from '../lib/useUserProfileForm';
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { EventDispatcher } from 'svelte';
+import type { Readable } from 'svelte/store';
+import type { I18n } from '../i18n';
+declare const AddRemoveButtonsMultiValuedAttribute: import("svelte").Component<{
+    attribute: Attribute;
+    values: string[];
+    fieldIndex: number;
+    dispatchFormAction: EventDispatcher<{
+        formAction: Extract<FormAction, {
+            action: "update";
+        }>;
+    }>;
+    i18n: Readable<I18n>;
+}, {}, "">;
+type AddRemoveButtonsMultiValuedAttribute = ReturnType<typeof AddRemoveButtonsMultiValuedAttribute>;
+export default AddRemoveButtonsMultiValuedAttribute;

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { FormFieldError } from '../lib/useUserProfileForm';
+  import type { Attribute } from 'keycloakify/login/KcContext';
+  import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+
+  type FieldErrorProps = {
+    attribute: Attribute;
+    displayableErrors: FormFieldError[];
+    fieldIndex?: number;
+    kcClsx: KcClsx;
+  };
+  let { attribute, fieldIndex, kcClsx, displayableErrors = $bindable([]) }: FieldErrorProps = $props();
+</script>
+
+{#snippet fieldErrors()}
+  {@const _displayableErrors = displayableErrors.filter((error) => error.fieldIndex === fieldIndex)}
+  {#if _displayableErrors.length !== 0}
+    <span
+      id={`input-error-${attribute.name}${fieldIndex === undefined ? '' : `-${fieldIndex}`}`}
+      class={kcClsx('kcInputErrorMessageClass')}
+      aria-live="polite"
+    >
+      {#each _displayableErrors as displayableError, i}
+        {@const { errorMessage } = displayableError}
+        {@render errorMessage()}
+        {#if _displayableErrors.length - 1 !== i}<br />{/if}
+      {/each}
+    </span>
+  {/if}
+{/snippet}
+{@render fieldErrors()}

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

@@ -0,0 +1,12 @@
+type FieldErrorProps = {
+    attribute: Attribute;
+    displayableErrors: FormFieldError[];
+    fieldIndex?: number;
+    kcClsx: KcClsx;
+};
+import type { FormFieldError } from '../lib/useUserProfileForm';
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+declare const FieldErrors: import("svelte").Component<FieldErrorProps, {}, "displayableErrors">;
+type FieldErrors = ReturnType<typeof FieldErrors>;
+export default FieldErrors;