@keycloakify/svelte 0.0.1-rc.1

package/src/login/components/SelectTag.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { InputFieldByTypeProps } from '@keycloakify/svelte/login/components/InputFieldByTypeProps';
+  import { inputLabel } from '@keycloakify/svelte/login/components/inputLabel';
+  import { assert } from 'keycloakify/tools/assert';
+  const { attribute, dispatchFormAction, kcClsx, displayableErrors, i18n, valueOrValues }: InputFieldByTypeProps =
+    $props();
+
+  const isMultiple = attribute.annotations.inputType === 'multiselect';
+  const options = (() => {
+    walk: {
+      const { inputOptionsFromValidation } = attribute.annotations;
+
+      if (inputOptionsFromValidation === undefined) {
+        break walk;
+      }
+
+      assert(typeof inputOptionsFromValidation === 'string');
+
+      const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
+
+      if (validator === undefined) {
+        break walk;
+      }
+
+      if (validator.options === undefined) {
+        break walk;
+      }
+
+      return validator.options;
+    }
+
+    return attribute.validators.options?.options ?? [];
+  })();
+</script>
+
+<select
+  id={attribute.name}
+  name={attribute.name}
+  class={kcClsx('kcInputClass')}
+  aria-invalid={displayableErrors.length !== 0}
+  disabled={attribute.readOnly}
+  multiple={isMultiple}
+  size={attribute.annotations.inputTypeSize === undefined
+    ? undefined
+    : parseInt(`${attribute.annotations.inputTypeSize}`)}
+  value={valueOrValues}
+  onchange={(event) =>
+    dispatchFormAction('formAction', {
+      action: 'update',
+      name: attribute.name,
+      valueOrValues: (() => {
+        if (isMultiple) {
+          return Array.from(event.currentTarget.selectedOptions).map((option) => option.value);
+        }
+
+        return event.currentTarget.value;
+      })(),
+    })}
+  onblur={() =>
+    dispatchFormAction('formAction', {
+      action: 'focus lost',
+      name: attribute.name,
+      fieldIndex: undefined,
+    })}
+>
+  {#if !isMultiple}<option value=""></option>{/if}
+  {#each options as option}
+    <option value={option}>
+      {@render inputLabel($i18n, attribute, option)()}
+    </option>
+  {/each}
+</select>

package/src/login/components/TermsAcceptance.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+  import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+  import type { Readable } from 'svelte/store';
+
+  type TermsAcceptanceProps = {
+    i18n: Readable<I18n>;
+    kcClsx: KcClsx;
+    messagesPerField: Pick<KcContext['messagesPerField'], 'existsError' | 'get'>;
+    areTermsAccepted: boolean;
+    onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
+  };
+  const { i18n, kcClsx, messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange }: TermsAcceptanceProps =
+    $props();
+
+  const { msg } = $i18n;
+</script>
+
+<div class="form-group">
+  <div class={kcClsx('kcInputWrapperClass')}>
+    {@render msg('termsTitle')()}
+    <div id="kc-registration-terms-text">{@render msg('termsText')()}</div>
+  </div>
+</div>
+<div class="form-group">
+  <div class={kcClsx('kcLabelWrapperClass')}>
+    <input
+      type="checkbox"
+      id="termsAccepted"
+      name="termsAccepted"
+      class={kcClsx('kcCheckboxInputClass')}
+      checked={areTermsAccepted}
+      onchange={(e) => onAreTermsAcceptedValueChange(e.currentTarget.checked)}
+      aria-invalid={messagesPerField.existsError('termsAccepted')}
+    />
+    <label
+      for="termsAccepted"
+      class={kcClsx('kcLabelClass')}
+    >
+      {@render msg('acceptTerms')()}
+    </label>
+  </div>
+  {#if messagesPerField.existsError('termsAccepted')}
+    <div class={kcClsx('kcLabelWrapperClass')}>
+      <span
+        id="input-error-terms-accepted"
+        class={kcClsx('kcInputErrorMessageClass')}
+        aria-live="polite"
+      >
+        {@html kcSanitize(messagesPerField.get('termsAccepted'))}
+      </span>
+    </div>
+  {/if}
+</div>

package/src/login/components/TextareaTag.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { assert } from 'keycloakify/tools/assert';
+  import type { InputFieldByTypeProps } from '@keycloakify/svelte/login/components/InputFieldByTypeProps';
+
+  const { attribute, dispatchFormAction, kcClsx, displayableErrors, valueOrValues }: InputFieldByTypeProps = $props();
+
+  assert(typeof valueOrValues === 'string');
+
+  const value = valueOrValues;
+</script>
+
+<textarea
+  id={attribute.name}
+  name={attribute.name}
+  class={kcClsx('kcInputClass')}
+  aria-invalid={displayableErrors.length !== 0}
+  disabled={attribute.readOnly}
+  cols={attribute.annotations.inputTypeCols === undefined
+    ? undefined
+    : parseInt(`${attribute.annotations.inputTypeCols}`)}
+  rows={attribute.annotations.inputTypeRows === undefined
+    ? undefined
+    : parseInt(`${attribute.annotations.inputTypeRows}`)}
+  maxlength={attribute.annotations.inputTypeMaxlength === undefined
+    ? undefined
+    : parseInt(`${attribute.annotations.inputTypeMaxlength}`)}
+  {value}
+  onchange={(event) =>
+    dispatchFormAction('formAction', {
+      action: 'update',
+      name: attribute.name,
+      valueOrValues: event.currentTarget.value,
+    })}
+  onblur={() =>
+    dispatchFormAction('formAction', {
+      action: 'focus lost',
+      name: attribute.name,
+      fieldIndex: undefined,
+    })}
+></textarea>

package/src/login/components/UserProfileFormFields.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import FieldErrors from '@keycloakify/svelte/login/components/FieldErrors.svelte';
+  import GroupLabel from '@keycloakify/svelte/login/components/GroupLabel.svelte';
+  import InputFieldByType from '@keycloakify/svelte/login/components/InputFieldByType.svelte';
+  import type { UserProfileFormFieldsProps } from '@keycloakify/svelte/login/components/UserProfileFormFieldsProps';
+  import { useUserProfileForm } from '@keycloakify/svelte/login/lib/useUserProfileForm';
+  import { onMount } from 'svelte';
+  import { derived } from 'svelte/store';
+  import type { I18n } from '../i18n';
+  import type { KcContext } from '../KcContext';
+
+  const props: UserProfileFormFieldsProps<KcContext, I18n> = $props();
+  const {
+    kcContext,
+    i18n,
+    kcClsx,
+    onIsFormSubmittableValueChange,
+    doMakeUserConfirmPassword,
+    beforeField,
+    afterField,
+  } = props;
+
+  const { advancedMsg } = $i18n;
+
+  const { formState, dispatchFormAction } = useUserProfileForm({
+    kcContext,
+    i18n: $i18n,
+    doMakeUserConfirmPassword,
+  });
+  onMount(() => {
+    const unsubscribe = formState.subscribe(({ isFormSubmittable }) => {
+      onIsFormSubmittableValueChange(isFormSubmittable);
+    });
+    return () => unsubscribe();
+  });
+
+  const groupNameRef = { current: '' };
+  const formFieldStates = derived(formState, ($formState) => $formState.formFieldStates);
+  const displayableErrors = derived(formFieldStates, ($formFieldStates) =>
+    $formFieldStates.map((f) => f.displayableErrors),
+  );
+</script>
+
+{#each $formFieldStates as formFieldState, i}
+  {@const { attribute, valueOrValues } = formFieldState}
+  <GroupLabel
+    {attribute}
+    {groupNameRef}
+    {i18n}
+    {kcClsx}
+  />
+  {#if beforeField}
+    {@render beforeField({
+      attribute,
+      dispatchFormAction,
+      displayableErrors: $displayableErrors[i],
+      valueOrValues,
+      kcClsx,
+      i18n,
+    })}
+  {/if}
+  <div
+    class={kcClsx('kcFormGroupClass')}
+    style:display={attribute.name === 'password-confirm' && !doMakeUserConfirmPassword ? 'none' : undefined}
+  >
+    <div class={kcClsx('kcLabelWrapperClass')}>
+      <label
+        for={attribute.name}
+        class={kcClsx('kcLabelClass')}
+      >
+        {@render advancedMsg(attribute.displayName ?? '')()}
+      </label>
+      {#if attribute.required}
+        *
+      {/if}
+    </div>
+    <div class={kcClsx('kcInputWrapperClass')}>
+      {#if attribute.annotations.inputHelperTextBefore !== undefined}
+        <div
+          class={kcClsx('kcInputHelperTextBeforeClass')}
+          id={`form-help-text-before-${attribute.name}`}
+          aria-live="polite"
+        >
+          {@render advancedMsg(attribute.annotations.inputHelperTextBefore)()}
+        </div>
+      {/if}
+      <InputFieldByType
+        {attribute}
+        {valueOrValues}
+        displayableErrors={$displayableErrors[i]}
+        {dispatchFormAction}
+        {kcClsx}
+        {i18n}
+      />
+      <FieldErrors
+        {attribute}
+        bind:displayableErrors={$displayableErrors[i]}
+        {kcClsx}
+      />
+      {#if attribute.annotations.inputHelperTextAfter !== undefined}
+        <div
+          class={kcClsx('kcInputHelperTextAfterClass')}
+          id={`form-help-text-after-${attribute.name}`}
+          aria-live="polite"
+        >
+          {@render advancedMsg(attribute.annotations.inputHelperTextAfter)()}
+        </div>
+      {/if}
+
+      {#if afterField}
+        {@render afterField({
+          attribute,
+          dispatchFormAction,
+          displayableErrors: $displayableErrors[i],
+          valueOrValues,
+          kcClsx,
+          i18n,
+        })}
+      {/if}
+      <!-- NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook -->
+    </div>
+  </div>
+{/each}

package/src/login/components/UserProfileFormFieldsProps.ts

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type FormAction, type FormFieldError } from '@keycloakify/svelte/login/lib/useUserProfileForm';
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { EventDispatcher, Snippet } from 'svelte';
+import type { Readable } from 'svelte/store';
+
+export type UserProfileFormFieldsProps<KcContext = any, I18n = any> = {
+  kcContext: Extract<KcContext, { profile: unknown }>;
+  i18n: Readable<I18n>;
+  kcClsx: KcClsx;
+  onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
+  doMakeUserConfirmPassword: boolean;
+  beforeField?: Snippet<[BeforeAfterFieldProps<I18n>]> | null;
+  afterField?: Snippet<[BeforeAfterFieldProps<I18n>]> | null;
+};
+
+type BeforeAfterFieldProps<I18n> = {
+  attribute: Attribute;
+  dispatchFormAction: EventDispatcher<{ formAction: FormAction }>;
+  displayableErrors: FormFieldError[];
+  valueOrValues: string | string[];
+  kcClsx: KcClsx;
+  i18n: Readable<I18n>;
+};

package/src/login/components/inputLabel.ts

@@ -0,0 +1,19 @@
+import type { Attribute } from 'keycloakify/login/KcContext';
+import { createRawSnippet } from 'svelte';
+import type { I18n } from '../i18n';
+
+export const inputLabel = (i18n: I18n, attribute: Attribute, option: string) => {
+  const { advancedMsg } = i18n;
+
+  if (attribute.annotations.inputOptionLabels !== undefined) {
+    const { inputOptionLabels } = attribute.annotations;
+
+    return advancedMsg(inputOptionLabels[option] ?? option);
+  }
+
+  if (attribute.annotations.inputOptionLabelsI18nPrefix !== undefined) {
+    return advancedMsg(`${attribute.annotations.inputOptionLabelsI18nPrefix}.${option}`);
+  }
+
+  return createRawSnippet(() => ({ render: () => option }));
+};

package/src/login/i18n/i18n.ts

@@ -0,0 +1,18 @@
+import type { GenericI18n_noJsx } from 'keycloakify/login/i18n/noJsx/GenericI18n_noJsx';
+import { type MessageKey as MessageKey_defaultSet } from 'keycloakify/login/i18n/messages_defaultSet/types';
+import type { Snippet } from 'svelte';
+/** INTERNAL: DO NOT IMPORT THIS */
+export type GenericI18n_svelte<MessageKey extends string, LanguageTag extends string> = GenericI18n_noJsx<
+  MessageKey,
+  LanguageTag
+> & {
+  /**
+   * Same as msgStr but returns a Snippet with the html string rendered as html.
+   */
+  msg: (key: MessageKey_defaultSet, ...args: (string | undefined)[]) => Snippet;
+  /**
+   * Same as advancedMsgStr but returns a Snippet with the html string rendered as html.
+   */
+  advancedMsg: (key: string, ...args: (string | undefined)[]) => Snippet;
+};
+export type I18n = GenericI18n_svelte<MessageKey_defaultSet, string>;

package/src/login/i18n/i18nBuilder.ts

@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type {
+  LanguageTag as LanguageTag_defaultSet,
+  MessageKey as MessageKey_defaultSet,
+} from 'keycloakify/login/i18n/messages_defaultSet/types';
+import { type ReturnTypeOfCreateUseI18n, createUseI18n } from './useI18n';
+
+export type I18nBuilder<
+  ThemeName extends string = never,
+  MessageKey_themeDefined extends string = never,
+  LanguageTag_notInDefaultSet extends string = never,
+  ExcludedMethod extends 'withThemeName' | 'withExtraLanguages' | 'withCustomTranslations' = never,
+> = Omit<
+  {
+    withThemeName: <ThemeName extends string>() => I18nBuilder<
+      ThemeName,
+      MessageKey_themeDefined,
+      LanguageTag_notInDefaultSet,
+      ExcludedMethod | 'withThemeName'
+    >;
+    withExtraLanguages: <LanguageTag_notInDefaultSet extends string>(extraLanguageTranslations: {
+      [LanguageTag in LanguageTag_notInDefaultSet]: {
+        label: string;
+        getMessages: () => Promise<{
+          default: Record<MessageKey_defaultSet, string>;
+        }>;
+      };
+    }) => I18nBuilder<
+      ThemeName,
+      MessageKey_themeDefined,
+      LanguageTag_notInDefaultSet,
+      ExcludedMethod | 'withExtraLanguages'
+    >;
+    withCustomTranslations: <MessageKey_themeDefined extends string>(
+      messagesByLanguageTag_themeDefined: Partial<{
+        [LanguageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: Record<
+          MessageKey_themeDefined,
+          string | Record<ThemeName, string>
+        >;
+      }>,
+    ) => I18nBuilder<
+      ThemeName,
+      MessageKey_themeDefined,
+      LanguageTag_notInDefaultSet,
+      ExcludedMethod | 'withCustomTranslations'
+    >;
+    build: () => ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet>;
+  },
+  ExcludedMethod
+>;
+
+function createI18nBuilder<
+  ThemeName extends string = never,
+  MessageKey_themeDefined extends string = never,
+  LanguageTag_notInDefaultSet extends string = never,
+>(params: {
+  extraLanguageTranslations: {
+    [LanguageTag in LanguageTag_notInDefaultSet]: {
+      label: string;
+      getMessages: () => Promise<{
+        default: Record<MessageKey_defaultSet, string>;
+      }>;
+    };
+  };
+  messagesByLanguageTag_themeDefined: Partial<{
+    [LanguageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: Record<
+      MessageKey_themeDefined,
+      string | Record<ThemeName, string>
+    >;
+  }>;
+}): I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet> {
+  const i18nBuilder: I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet> = {
+    withThemeName: () =>
+      createI18nBuilder({
+        extraLanguageTranslations: params.extraLanguageTranslations,
+        messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined as any,
+      }),
+    withExtraLanguages: (extraLanguageTranslations) =>
+      createI18nBuilder({
+        extraLanguageTranslations,
+        messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined as any,
+      }),
+    withCustomTranslations: (messagesByLanguageTag_themeDefined) =>
+      createI18nBuilder({
+        extraLanguageTranslations: params.extraLanguageTranslations,
+        messagesByLanguageTag_themeDefined,
+      }),
+    build: () =>
+      createUseI18n({
+        extraLanguageTranslations: params.extraLanguageTranslations,
+        messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined,
+      }),
+  };
+
+  return i18nBuilder;
+}
+
+export const i18nBuilder = createI18nBuilder({
+  extraLanguageTranslations: {},
+  messagesByLanguageTag_themeDefined: {},
+});

package/src/login/i18n/index.ts

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

package/src/login/i18n/useI18n.ts

@@ -0,0 +1,140 @@
+import { useState } from '@keycloakify/svelte/tools/useState';
+import {
+  type LanguageTag as LanguageTag_defaultSet,
+  type MessageKey as MessageKey_defaultSet,
+} from 'keycloakify/login/i18n/messages_defaultSet/types';
+import type { GenericI18n_noJsx } from 'keycloakify/login/i18n/noJsx/GenericI18n_noJsx';
+import { createGetI18n, type KcContextLike } from 'keycloakify/login/i18n/noJsx/getI18n';
+import { createRawSnippet, onMount, type Snippet } from 'svelte';
+import type { Readable } from 'svelte/store';
+import { Reflect } from 'tsafe/Reflect';
+import type { GenericI18n_svelte } from './i18n';
+
+export type ReturnTypeOfCreateUseI18n<
+  MessageKey_themeDefined extends string,
+  LanguageTag_notInDefaultSet extends string,
+> = {
+  useI18n: (params: { kcContext: KcContextLike }) => {
+    i18n: Readable<
+      GenericI18n_svelte<
+        MessageKey_defaultSet | MessageKey_themeDefined,
+        LanguageTag_defaultSet | LanguageTag_notInDefaultSet
+      >
+    >;
+  };
+  ofTypeI18n: GenericI18n_svelte<
+    MessageKey_defaultSet | MessageKey_themeDefined,
+    LanguageTag_defaultSet | LanguageTag_notInDefaultSet
+  >;
+};
+
+export type { KcContextLike };
+
+export function createUseI18n<
+  ThemeName extends string = string,
+  MessageKey_themeDefined extends string = never,
+  LanguageTag_notInDefaultSet extends string = never,
+>(params: {
+  extraLanguageTranslations: {
+    [languageTag in LanguageTag_notInDefaultSet]: {
+      label: string;
+      getMessages: () => Promise<{ default: Record<MessageKey_defaultSet, string> }>;
+    };
+  };
+  messagesByLanguageTag_themeDefined: Partial<{
+    [languageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: {
+      [key in MessageKey_themeDefined]: string | Record<ThemeName, string>;
+    };
+  }>;
+}): ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet> {
+  const { extraLanguageTranslations, messagesByLanguageTag_themeDefined } = params;
+
+  type LanguageTag = LanguageTag_defaultSet | LanguageTag_notInDefaultSet;
+
+  type MessageKey = MessageKey_defaultSet | MessageKey_themeDefined;
+  type I18n = GenericI18n_svelte<MessageKey, LanguageTag>;
+  type Result = { i18n: Readable<I18n> };
+
+  const { withSvelte } = (() => {
+    const cache = new WeakMap<
+      GenericI18n_noJsx<MessageKey, LanguageTag>,
+      GenericI18n_svelte<MessageKey, LanguageTag>
+    >();
+
+    function renderHtmlString(params: { htmlString: string; msgKey: string }): Snippet {
+      const { htmlString, msgKey } = params;
+      return createRawSnippet(() => ({
+        render: () => `<div data-kc-msg="${msgKey}">${htmlString}</div>`,
+      }));
+    }
+
+    function withSvelte(i18n_noJsx: GenericI18n_noJsx<MessageKey, LanguageTag>): I18n {
+      use_cache: {
+        const i18n = cache.get(i18n_noJsx);
+
+        if (i18n === undefined) {
+          break use_cache;
+        }
+
+        return i18n;
+      }
+
+      const i18n: I18n = {
+        ...i18n_noJsx,
+        msg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.msgStr(msgKey, ...args), msgKey }),
+        advancedMsg: (msgKey, ...args) =>
+          renderHtmlString({ htmlString: i18n_noJsx.advancedMsgStr(msgKey, ...args), msgKey }),
+      };
+
+      cache.set(i18n_noJsx, i18n);
+
+      return i18n;
+    }
+
+    return { withSvelte };
+  })();
+
+  add_style: {
+    const attributeName = 'data-kc-i18n';
+
+    // Check if already exists in head
+    if (document.querySelector(`style[${attributeName}]`) !== null) {
+      break add_style;
+    }
+
+    const styleElement = document.createElement('style');
+    styleElement.attributes.setNamedItem(document.createAttribute(attributeName));
+    styleElement.textContent = `[data-kc-msg] { display: inline-block; }`;
+    document.head.prepend(styleElement);
+  }
+
+  const { getI18n } = createGetI18n({ extraLanguageTranslations, messagesByLanguageTag_themeDefined });
+
+  function useI18n(params: { kcContext: KcContextLike }): Result {
+    const { kcContext } = params;
+
+    const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+
+    const [i18n_toReturn, setI18n_toReturn] = useState<I18n>(withSvelte(i18n));
+
+    onMount(() => {
+      let isActive = true;
+
+      prI18n_currentLanguage?.then((i18n) => {
+        if (!isActive) {
+          return;
+        }
+
+        setI18n_toReturn(withSvelte(i18n));
+      });
+
+      return () => {
+        isActive = false;
+      };
+    });
+
+    return { i18n: i18n_toReturn };
+  }
+
+  return { useI18n, ofTypeI18n: Reflect<I18n>() };
+}

package/src/login/index.ts

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