@keycloakify/svelte 0.0.1-rc.1

package/dist/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/dist/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/dist/login/TemplateProps.js

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

package/dist/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/dist/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/dist/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/dist/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;

package/dist/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/dist/login/components/GroupLabel.svelte.d.ts

@@ -0,0 +1,15 @@
+type GroupLabelProps = {
+    attribute: Attribute;
+    groupNameRef: {
+        current: string;
+    };
+    i18n: Readable<I18n>;
+    kcClsx: KcClsx;
+};
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n';
+import type { Readable } from 'svelte/store';
+declare const GroupLabel: import("svelte").Component<GroupLabelProps, {}, "">;
+type GroupLabel = ReturnType<typeof GroupLabel>;
+export default GroupLabel;

package/dist/login/components/InputFieldByType.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+  import InputTag from './InputTag.svelte';
+  import InputTagSelects from './InputTagSelects.svelte';
+  import PasswordWrapper from './PasswordWrapper.svelte';
+  import SelectTag from './SelectTag.svelte';
+  import TextareaTag from './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/dist/login/components/InputFieldByType.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+declare const InputFieldByType: import("svelte").Component<InputFieldByTypeProps, {}, "">;
+type InputFieldByType = ReturnType<typeof InputFieldByType>;
+export default InputFieldByType;

package/dist/login/components/InputFieldByTypeProps.d.ts

@@ -0,0 +1,16 @@
+import type { FormAction, FormFieldError } from '../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/dist/login/components/InputFieldByTypeProps.js

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

package/dist/login/components/InputTag.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import AddRemoveButtonsMultiValuedAttribute from './AddRemoveButtonsMultiValuedAttribute.svelte';
+  import FieldErrors from './FieldErrors.svelte';
+  import type { InputFieldByTypeProps } from './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/dist/login/components/InputTag.svelte.d.ts

@@ -0,0 +1,7 @@
+type InputTagProps = InputFieldByTypeProps & {
+    fieldIndex?: number;
+};
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+declare const InputTag: import("svelte").Component<InputTagProps, {}, "displayableErrors">;
+type InputTag = ReturnType<typeof InputTag>;
+export default InputTag;

package/dist/login/components/InputTagSelects.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+  import { inputLabel } from './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/dist/login/components/InputTagSelects.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputFieldByTypeProps } from './InputFieldByTypeProps';
+declare const InputTagSelects: import("svelte").Component<InputFieldByTypeProps, {}, "">;
+type InputTagSelects = ReturnType<typeof InputTagSelects>;
+export default InputTagSelects;

package/dist/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/dist/login/components/LogoutOtherSessions.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    kcClsx: KcClsx;
+    i18n: Readable<I18n>;
+};
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { I18n } from '../i18n';
+import type { Readable } from 'svelte/store';
+declare const LogoutOtherSessions: import("svelte").Component<$$ComponentProps, {}, "">;
+type LogoutOtherSessions = ReturnType<typeof LogoutOtherSessions>;
+export default LogoutOtherSessions;