@keycloakify/svelte 0.0.1-rc.1

package/src/login/Template.useInitialize.ts

@@ -0,0 +1,72 @@
+import type { KcContext } from '@keycloakify/svelte/login/KcContext';
+import { useInsertLinkTags } from '@keycloakify/svelte/tools/useInsertLinkTags';
+import { useInsertScriptTags } from '@keycloakify/svelte/tools/useInsertScriptTags';
+import { assert } from 'keycloakify/tools/assert';
+import { onMount } from 'svelte';
+
+export type KcContextLike = {
+  url: {
+    resourcesCommonPath: string;
+    resourcesPath: string;
+    ssoLoginInOtherTabsUrl: string;
+  };
+  scripts?: string[];
+};
+
+assert<keyof KcContextLike extends keyof KcContext ? true : false>();
+assert<KcContext extends KcContextLike ? true : false>();
+
+export function useInitialize(params: { kcContext: KcContextLike; doUseDefaultCss: boolean }) {
+  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' as const,
+            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/src/login/TemplateProps.ts

@@ -0,0 +1,23 @@
+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/src/login/components/AddRemoveButtonsMultiValuedAttribute.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import {
+    getButtonToDisplayForMultivaluedAttributeField,
+    type FormAction,
+  } from '@keycloakify/svelte/login/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/src/login/components/FieldErrors.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { FormFieldError } from '@keycloakify/svelte/login/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/src/login/components/GroupLabel.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { Attribute } from 'keycloakify/login/KcContext';
+  import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+  import { assert } from 'keycloakify/tools/assert';
+  import { createRawSnippet } from 'svelte';
+  import type { I18n } from '../i18n';
+  import type { Readable } from 'svelte/store';
+
+  type GroupLabelProps = {
+    attribute: Attribute;
+    groupNameRef: {
+      current: string;
+    };
+    i18n: Readable<I18n>;
+    kcClsx: KcClsx;
+  };
+  const { attribute, groupNameRef, i18n, kcClsx }: GroupLabelProps = $props();
+  const { advancedMsg } = $i18n;
+
+  let isGrouplabel = $state<boolean>(false);
+  if (attribute.group?.name !== groupNameRef.current) {
+    groupNameRef.current = attribute.group?.name ?? '';
+
+    if (groupNameRef.current !== '') {
+      assert(attribute.group !== undefined);
+      isGrouplabel = true;
+    }
+  }
+
+  const html5DataAnnotations = {
+    ...Object.fromEntries(
+      Object.entries(attribute.group?.html5DataAnnotations ?? {}).map(([key, value]) => [`data-${key}`, value]),
+    ),
+  };
+</script>
+
+{#if isGrouplabel}
+  {@const groupDisplayHeader = attribute.group?.displayHeader ?? ''}
+  {@const groupDisplayDescription = attribute.group?.displayDescription ?? ''}
+  {@const groupHeaderText =
+    groupDisplayHeader !== ''
+      ? advancedMsg(groupDisplayHeader)
+      : createRawSnippet(() => ({ render: () => attribute.group?.name ?? '' }))}
+  <div
+    class={kcClsx('kcFormGroupClass')}
+    {...html5DataAnnotations}
+  >
+    <div class={kcClsx('kcContentWrapperClass')}>
+      <label
+        id={`header-${attribute.group?.name}`}
+        class={kcClsx('kcFormGroupHeader')}
+      >
+        {@render groupHeaderText()}
+      </label>
+    </div>
+    {#if groupDisplayDescription !== ''}
+      {@const groupDescriptionText = advancedMsg(groupDisplayDescription)}
+      <div class={kcClsx('kcLabelWrapperClass')}>
+        <label
+          id={`description-${attribute.group?.name}`}
+          class={kcClsx('kcLabelClass')}
+        >
+          {@render groupDescriptionText()}
+        </label>
+      </div>
+    {/if}
+  </div>
+{/if}

package/src/login/components/InputFieldByType.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { InputFieldByTypeProps } from '@keycloakify/svelte/login/components/InputFieldByTypeProps';
+  import InputTag from '@keycloakify/svelte/login/components/InputTag.svelte';
+  import InputTagSelects from '@keycloakify/svelte/login/components/InputTagSelects.svelte';
+  import PasswordWrapper from '@keycloakify/svelte/login/components/PasswordWrapper.svelte';
+  import SelectTag from '@keycloakify/svelte/login/components/SelectTag.svelte';
+  import TextareaTag from '@keycloakify/svelte/login/components/TextareaTag.svelte';
+
+  let { displayableErrors, ...props }: InputFieldByTypeProps = $props();
+  const { attribute, valueOrValues } = props;
+  const inputType = attribute.annotations.inputType ?? '';
+</script>
+
+{#if inputType === 'textarea'}
+  <TextareaTag
+    {...props}
+    {displayableErrors}
+  />
+{:else if ['select', 'multiselect'].includes(inputType)}
+  <SelectTag
+    {...props}
+    {displayableErrors}
+  />
+{:else if ['select-radiobuttons', 'multiselect-checkboxes'].includes(inputType)}
+  <InputTagSelects
+    {...props}
+    {displayableErrors}
+  />
+{:else}
+  <!-- default -->
+  {#if valueOrValues instanceof Array}
+    {#each valueOrValues as _, i}
+      <InputTag
+        {...props}
+        bind:displayableErrors
+        fieldIndex={i}
+      />
+    {/each}
+  {:else}
+    {#snippet inputNode()}
+      <InputTag
+        {...props}
+        bind:displayableErrors
+      />
+    {/snippet}
+    {#if ['password', 'password-confirm'].includes(attribute.name)}
+      <PasswordWrapper
+        kcClsx={props.kcClsx}
+        i18n={props.i18n}
+        passwordInputId={attribute.name}
+      >
+        {@render inputNode()}
+      </PasswordWrapper>
+    {:else}
+      {@render inputNode()}
+    {/if}
+  {/if}
+{/if}

package/src/login/components/InputFieldByTypeProps.ts

@@ -0,0 +1,15 @@
+import type { FormAction, 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 } from 'svelte';
+import type { I18n } from '../i18n';
+import type { Readable } from 'svelte/store';
+
+export type InputFieldByTypeProps = {
+  attribute: Attribute;
+  valueOrValues: string | string[];
+  displayableErrors: FormFieldError[];
+  dispatchFormAction: EventDispatcher<{ formAction: FormAction }>;
+  i18n: Readable<I18n>;
+  kcClsx: KcClsx;
+};

package/src/login/components/InputTag.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import AddRemoveButtonsMultiValuedAttribute from '@keycloakify/svelte/login/components/AddRemoveButtonsMultiValuedAttribute.svelte';
+  import FieldErrors from '@keycloakify/svelte/login/components/FieldErrors.svelte';
+  import type { InputFieldByTypeProps } from '@keycloakify/svelte/login/components/InputFieldByTypeProps';
+  import { assert } from 'keycloakify/tools/assert';
+
+  type InputTagProps = InputFieldByTypeProps & { fieldIndex?: number };
+  let {
+    attribute,
+    fieldIndex,
+    kcClsx,
+    dispatchFormAction,
+    valueOrValues,
+    i18n,
+    displayableErrors = $bindable([]),
+  }: InputTagProps = $props();
+
+  const { advancedMsgStr } = $i18n;
+  const { inputType } = attribute.annotations;
+  let value = $state(
+    (() => {
+      if (fieldIndex !== undefined) {
+        assert(valueOrValues instanceof Array);
+        return valueOrValues[fieldIndex];
+      }
+
+      assert(typeof valueOrValues === 'string');
+
+      return valueOrValues;
+    })(),
+  );
+  const html5DataAnnotations = {
+    ...Object.fromEntries(
+      Object.entries(attribute.group?.html5DataAnnotations ?? {}).map(([key, value]) => [`data-${key}`, value]),
+    ),
+  };
+</script>
+
+<input
+  type={inputType?.startsWith('html5-') ? inputType.slice(6) : (inputType ?? 'text')}
+  id={attribute.name}
+  name={attribute.name}
+  bind:value
+  class={kcClsx('kcInputClass')}
+  aria-invalid={displayableErrors.find((error) => error.fieldIndex === fieldIndex) !== undefined}
+  disabled={attribute.readOnly}
+  autocomplete={attribute.autocomplete as 'on'}
+  placeholder={attribute.annotations.inputTypePlaceholder === undefined
+    ? undefined
+    : advancedMsgStr(attribute.annotations.inputTypePlaceholder)}
+  pattern={attribute.annotations.inputTypePattern}
+  size={attribute.annotations.inputTypeSize === undefined
+    ? undefined
+    : parseInt(`${attribute.annotations.inputTypeSize}`)}
+  maxlength={attribute.annotations.inputTypeMaxlength === undefined
+    ? undefined
+    : parseInt(`${attribute.annotations.inputTypeMaxlength}`)}
+  minlength={attribute.annotations.inputTypeMinlength === undefined
+    ? undefined
+    : parseInt(`${attribute.annotations.inputTypeMinlength}`)}
+  max={attribute.annotations.inputTypeMax}
+  min={attribute.annotations.inputTypeMin}
+  step={attribute.annotations.inputTypeStep}
+  {...html5DataAnnotations}
+  onchange={(event) =>
+    dispatchFormAction('formAction', {
+      action: 'update',
+      name: attribute.name,
+      valueOrValues: (() => {
+        if (fieldIndex !== undefined) {
+          assert(valueOrValues instanceof Array);
+
+          return (valueOrValues as string[]).map((value, i) => {
+            if (i === fieldIndex) {
+              return event.currentTarget.value;
+            }
+
+            return value;
+          });
+        }
+
+        return event.currentTarget.value;
+      })(),
+    })}
+  onblur={() =>
+    dispatchFormAction('formAction', {
+      action: 'focus lost',
+      name: attribute.name,
+      fieldIndex: fieldIndex,
+    })}
+/>
+{#if fieldIndex !== undefined && valueOrValues instanceof Array}
+  {@const values = valueOrValues}
+  <FieldErrors
+    {attribute}
+    {kcClsx}
+    bind:displayableErrors
+    {fieldIndex}
+  ></FieldErrors>
+  <AddRemoveButtonsMultiValuedAttribute
+    {attribute}
+    {values}
+    {fieldIndex}
+    {dispatchFormAction}
+    {i18n}
+  ></AddRemoveButtonsMultiValuedAttribute>
+{/if}

package/src/login/components/InputTagSelects.svelte

@@ -0,0 +1,111 @@
+<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, i18n, valueOrValues, displayableErrors }: InputFieldByTypeProps =
+    $props();
+
+  const { classDiv, classInput, classLabel, inputType } = (() => {
+    const { inputType } = attribute.annotations;
+
+    assert(inputType === 'select-radiobuttons' || inputType === 'multiselect-checkboxes');
+
+    switch (inputType) {
+      case 'select-radiobuttons':
+        return {
+          inputType: 'radio',
+          classDiv: kcClsx('kcInputClassRadio'),
+          classInput: kcClsx('kcInputClassRadioInput'),
+          classLabel: kcClsx('kcInputClassRadioLabel'),
+        };
+      case 'multiselect-checkboxes':
+        return {
+          inputType: 'checkbox',
+          classDiv: kcClsx('kcInputClassCheckbox'),
+          classInput: kcClsx('kcInputClassCheckboxInput'),
+          classLabel: kcClsx('kcInputClassCheckboxLabel'),
+        };
+      default:
+        return {
+          inputType: '',
+          classDiv: '',
+          classInput: '',
+          classLabel: '',
+        };
+    }
+  })();
+
+  const options = (() => {
+    walk: {
+      const { inputOptionsFromValidation } = attribute.annotations;
+
+      if (inputOptionsFromValidation === undefined) {
+        break walk;
+      }
+
+      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>
+
+{#each options as option}
+  <div class={classDiv}>
+    <input
+      type={inputType}
+      id={`${attribute.name}-${option}`}
+      name={attribute.name}
+      value={option}
+      class={classInput}
+      aria-invalid={displayableErrors.length !== 0}
+      disabled={attribute.readOnly}
+      checked={valueOrValues instanceof Array ? valueOrValues.includes(option) : valueOrValues === option}
+      onchange={(event) =>
+        dispatchFormAction('formAction', {
+          action: 'update',
+          name: attribute.name,
+          valueOrValues: (() => {
+            const isChecked = event.currentTarget.checked;
+
+            if (valueOrValues instanceof Array) {
+              const newValues = [...valueOrValues];
+
+              if (isChecked) {
+                newValues.push(option);
+              } else {
+                newValues.splice(newValues.indexOf(option), 1);
+              }
+
+              return newValues;
+            }
+
+            return event.currentTarget.checked ? option : '';
+          })(),
+        })}
+      onblur={() =>
+        dispatchFormAction('formAction', {
+          action: 'focus lost',
+          name: attribute.name,
+          fieldIndex: undefined,
+        })}
+    />
+    <label
+      for={`${attribute.name}-${option}`}
+      class={`${classLabel}${attribute.readOnly ? ` ${kcClsx('kcInputClassRadioCheckboxLabelDisabled')}` : ''}`}
+    >
+      {@render inputLabel($i18n, attribute, option)()}
+    </label>
+  </div>
+{/each}

package/src/login/components/LogoutOtherSessions.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { I18n } from '../i18n';
+  import type { Readable } from 'svelte/store';
+
+  const { kcClsx, i18n }: { kcClsx: KcClsx; i18n: Readable<I18n> } = $props();
+
+  const { msg } = $i18n;
+</script>
+
+<div
+  id="kc-form-options"
+  class={kcClsx('kcFormOptionsClass')}
+>
+  <div class={kcClsx('kcFormOptionsWrapperClass')}>
+    <div class="checkbox">
+      <label>
+        <input
+          type="checkbox"
+          id="logout-sessions"
+          name="logout-sessions"
+          value="on"
+          checked={true}
+        />
+        {@render msg('logoutOtherSessions')()}
+      </label>
+    </div>
+  </div>
+</div>

package/src/login/components/PasswordWrapper.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { useReducer } from '@keycloakify/svelte/tools/useReducer';
+  import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+  import { assert } from 'keycloakify/tools/assert';
+  import { onMount, type Snippet } from 'svelte';
+  import type { I18n } from '../i18n';
+  import type { Readable } from 'svelte/store';
+
+  const props: { kcClsx: KcClsx; i18n: Readable<I18n>; passwordInputId: string; children: Snippet } = $props();
+  const { kcClsx, i18n, passwordInputId, children } = props;
+
+  const { msgStr } = $i18n;
+
+  const [isPasswordRevealed, toggleIsPasswordRevealed] = useReducer<boolean, boolean>(
+    (isPasswordRevealed: boolean) => !isPasswordRevealed,
+    false,
+  );
+  onMount(() => {
+    const unsubscribe = isPasswordRevealed.subscribe(($isPasswordRevealed) => {
+      const passwordInputElement: HTMLInputElement = document.getElementById(passwordInputId) as HTMLInputElement;
+
+      assert(passwordInputElement instanceof HTMLInputElement);
+      passwordInputElement.type = $isPasswordRevealed ? 'text' : 'password';
+    });
+    return () => unsubscribe();
+  });
+</script>
+
+<div class={kcClsx('kcInputGroup')}>
+  {@render children?.()}
+  <button
+    type="button"
+    class={kcClsx('kcFormPasswordVisibilityButtonClass')}
+    aria-label={msgStr($isPasswordRevealed ? 'hidePassword' : 'showPassword')}
+    aria-controls={passwordInputId}
+    onclick={() => toggleIsPasswordRevealed($isPasswordRevealed)}
+  >
+    <i
+      class={kcClsx($isPasswordRevealed ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow')}
+      aria-hidden="true"
+    ></i>
+  </button>
+</div>