@keycloakify/svelte 0.0.1-rc.6 → 0.1.0

package/keycloakify-svelte/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/keycloakify-svelte/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/keycloakify-svelte/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/keycloakify-svelte/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/keycloakify-svelte/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/keycloakify-svelte/login/components/InputFieldByTypeProps.js

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

package/keycloakify-svelte/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/keycloakify-svelte/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/keycloakify-svelte/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/keycloakify-svelte/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/keycloakify-svelte/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/keycloakify-svelte/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;

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { useReducer } from '../../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>

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import type { KcClsx } from 'keycloakify/login/lib/kcClsx';
+import type { KcContext } from '../KcContext';
+import type { I18n } from '../i18n';
+import type { Readable } from 'svelte/store';
+declare const TermsAcceptance: import("svelte").Component<{
+    i18n: Readable<I18n>;
+    kcClsx: KcClsx;
+    messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
+    areTermsAccepted: boolean;
+    onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
+}, {}, "">;
+type TermsAcceptance = ReturnType<typeof TermsAcceptance>;
+export default TermsAcceptance;