@keycloakify/svelte 0.0.1-rc.1

package/dist/login/lib/useUserProfileForm.d.ts

@@ -0,0 +1,66 @@
+import type { Attribute, PasswordPolicies, Validators } from 'keycloakify/login/KcContext';
+import * as reactlessApi from 'keycloakify/login/lib/getUserProfileApi';
+import { type EventDispatcher, type Snippet } from 'svelte';
+import { type Readable } from 'svelte/store';
+import type { I18n } from '../i18n';
+export { getButtonToDisplayForMultivaluedAttributeField } from 'keycloakify/login/lib/getUserProfileApi';
+export type FormFieldError = {
+    errorMessage: Snippet;
+    errorMessageStr: string;
+    source: FormFieldError.Source;
+    fieldIndex: number | undefined;
+};
+export declare namespace FormFieldError {
+    type Source = Source.Validator | Source.PasswordPolicy | Source.Server | Source.Other;
+    namespace Source {
+        type Validator = {
+            type: 'validator';
+            name: keyof Validators;
+        };
+        type PasswordPolicy = {
+            type: 'passwordPolicy';
+            name: keyof PasswordPolicies;
+        };
+        type Server = {
+            type: 'server';
+        };
+        type Other = {
+            type: 'other';
+            rule: 'passwordConfirmMatchesPassword' | 'requiredField';
+        };
+    }
+}
+export type FormFieldState = {
+    attribute: Attribute;
+    displayableErrors: FormFieldError[];
+    valueOrValues: string | string[];
+};
+export type FormState = {
+    isFormSubmittable: boolean;
+    formFieldStates: FormFieldState[];
+};
+export type FormAction = {
+    action: 'update';
+    name: string;
+    valueOrValues: string | string[];
+    /** Default false */
+    displayErrorsImmediately?: boolean;
+} | {
+    action: 'focus lost';
+    name: string;
+    fieldIndex: number | undefined;
+};
+export type KcContextLike = reactlessApi.KcContextLike;
+export type I18nLike = Pick<I18n, 'advancedMsg' | 'advancedMsgStr'>;
+export type ParamsOfUseUserProfileForm = {
+    kcContext: KcContextLike;
+    doMakeUserConfirmPassword: boolean;
+    i18n: I18nLike;
+};
+export type ReturnTypeOfUseUserProfileForm = {
+    formState: Readable<FormState>;
+    dispatchFormAction: EventDispatcher<{
+        formAction: FormAction;
+    }>;
+};
+export declare function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTypeOfUseUserProfileForm;

package/dist/login/lib/useUserProfileForm.js

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+import { useState } from '../../tools/useState';
+import * as reactlessApi from 'keycloakify/login/lib/getUserProfileApi';
+import { onMount } from 'svelte';
+import { derived } from 'svelte/store';
+import { assert } from 'tsafe/assert';
+export { getButtonToDisplayForMultivaluedAttributeField } from 'keycloakify/login/lib/getUserProfileApi';
+{
+    assert();
+}
+{
+    assert();
+}
+{
+    assert();
+}
+{
+    assert();
+}
+{
+    assert();
+}
+{
+    assert();
+}
+export function useUserProfileForm(params) {
+    const { doMakeUserConfirmPassword, i18n, kcContext } = params;
+    const api = reactlessApi.getUserProfileApi({
+        kcContext,
+        doMakeUserConfirmPassword,
+    });
+    const [formState_reactless, setFormState_reactless] = useState(api.getFormState());
+    onMount(() => {
+        const { unsubscribe } = api.subscribeToFormState(() => {
+            setFormState_reactless(api.getFormState());
+        });
+        return () => unsubscribe();
+    });
+    const { advancedMsg, advancedMsgStr } = i18n;
+    const formState = derived(formState_reactless, ($formState) => ({
+        isFormSubmittable: $formState.isFormSubmittable,
+        formFieldStates: $formState.formFieldStates.map((formFieldState_reactless) => ({
+            attribute: formFieldState_reactless.attribute,
+            valueOrValues: formFieldState_reactless.valueOrValues,
+            displayableErrors: formFieldState_reactless.displayableErrors.map((formFieldError_reactless) => ({
+                errorMessage: advancedMsg(...formFieldError_reactless.advancedMsgArgs),
+                errorMessageStr: advancedMsgStr(...formFieldError_reactless.advancedMsgArgs),
+                source: formFieldError_reactless.source,
+                fieldIndex: formFieldError_reactless.fieldIndex,
+            })),
+        })),
+    }));
+    return {
+        formState,
+        dispatchFormAction: ((_, { ...args }) => {
+            if (args) {
+                api.dispatchFormAction(args);
+                return true;
+            }
+            return false;
+        }),
+    };
+}

package/dist/login/pages/Code.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const props: PageProps<Extract<KcContext, { pageId: 'code.ftl' }>, I18n> = $props();
+  const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { code } = kcContext;
+
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    {#if code.success}
+      {@render msg('codeSuccessTitle')()}
+    {:else}
+      {@render msg('codeErrorTitle', code.error)()}
+    {/if}
+  {/snippet}
+  <div id="kc-code">
+    {#if code.success}
+      <p>{@render msg('copyCodeInstruction')()}</p>
+      <input
+        id="code"
+        class={kcClsx('kcTextareaClass')}
+        value={code.code}
+      />
+    {:else if code.error}
+      <p id="error">{@html kcSanitize(code.error)}</p>
+    {/if}
+  </div>
+</Template>

package/dist/login/pages/Code.svelte.d.ts

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

package/dist/login/pages/DeleteAccountConfirm.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'delete-account-confirm.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { url, triggered_from_aia } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    {@render msg('deleteAccountConfirm')()}
+  {/snippet}
+
+  <form
+    action={url.loginAction}
+    class="form-vertical"
+    method="post"
+  >
+    <div
+      class="alert alert-warning"
+      style:margin-top={'0'}
+      style:margin-bottom={'30px'}
+    >
+      <span class="pficon pficon-warning-triangle-o"></span>
+      {@render msg('irreversibleAction')()}
+    </div>
+    <p>{@render msg('deletingImplies')()}</p>
+    <ul
+      style:color={'#72767b'}
+      style:list-style={'disc'}
+      style:list-style-position={'inside'}
+    >
+      <li>{@render msg('loggingOutImmediately')()}</li>
+      <li>{@render msg('errasingData')()}</li>
+    </ul>
+    <p class="delete-account-text">{@render msg('finalDeletionConfirmation')()}</p>
+    <div id="kc-form-buttons">
+      <input
+        class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+        type="submit"
+        value={msgStr('doConfirmDelete')}
+      />
+      {#if triggered_from_aia}
+        <button
+          class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')}
+          style:margin-left={'calc(100% - 220px)'}
+          type="submit"
+          name="cancel-aia"
+          value="true"
+        >
+          {msgStr('doCancel')}
+        </button>
+      {/if}
+    </div>
+  </form>
+</Template>

package/dist/login/pages/DeleteAccountConfirm.svelte.d.ts

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

package/dist/login/pages/DeleteCredential.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'delete-credential.ftl' }>, I18n> = $props();
+
+  const { msgStr, msg } = $i18n;
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { url, credentialLabel } = kcContext;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={false}
+>
+  {#snippet headerNode()}
+    {@render msg('deleteCredentialTitle', credentialLabel)()}
+  {/snippet}
+
+  <div id="kc-delete-text">{@render msg('deleteCredentialMessage', credentialLabel)()}</div>
+  <form
+    class="form-actions"
+    action={url.loginAction}
+    method="POST"
+  >
+    <input
+      class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+      name="accept"
+      id="kc-accept"
+      type="submit"
+      value={msgStr('doConfirmDelete')}
+    />
+    <input
+      class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')}
+      name="cancel-aia"
+      value={msgStr('doCancel')}
+      id="kc-decline"
+      type="submit"
+    />
+  </form>
+  <div class="clearfix"></div>
+</Template>

package/dist/login/pages/DeleteCredential.svelte.d.ts

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

package/dist/login/pages/Error.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'error.ftl' }>, I18n> = $props();
+
+  const { message, client, skipLink } = kcContext;
+
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={false}
+>
+  {#snippet headerNode()}
+    {@render msg('errorTitle')()}
+  {/snippet}
+  <div id="kc-error-message">
+    <p class="instruction">{@html kcSanitize(message.summary)}</p>
+    {#if !skipLink && client !== undefined && client.baseUrl !== undefined}
+      <p>
+        <a
+          id="backToApplication"
+          href={client.baseUrl}
+        >
+          {@render msg('backToApplication')()}
+        </a>
+      </p>
+    {/if}
+  </div>
+</Template>

package/dist/login/pages/Error.svelte.d.ts

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

package/dist/login/pages/FrontchannelLogout.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { onMount } from 'svelte';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'frontchannel-logout.ftl' }>, I18n> = $props();
+
+  const { logout } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+
+  onMount(() => {
+    if (logout.logoutRedirectUri) {
+      window.location.replace(logout.logoutRedirectUri);
+    }
+  });
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  documentTitle={msgStr('frontchannel-logout.title')}
+>
+  {#snippet headerNode()}
+    {@render msg('frontchannel-logout.title')()}
+  {/snippet}
+  <p>{@render msg('frontchannel-logout.message')()}</p>
+  <ul>
+    {#each logout.clients as client}
+      <li>
+        {client.name}
+        <!-- svelte-ignore a11y_missing_attribute -->
+        <iframe
+          src={client.frontChannelLogoutUrl}
+          style:display={'none'}
+        ></iframe>
+      </li>{/each}
+  </ul>
+  {#if logout.logoutRedirectUri}
+    <a
+      id="continue"
+      class="btn btn-primary"
+      href={logout.logoutRedirectUri}
+    >
+      {@render msg('doContinue')()}
+    </a>
+  {/if}
+</Template>

package/dist/login/pages/FrontchannelLogout.svelte.d.ts

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

package/dist/login/pages/IdpReviewUserProfile.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { UserProfileFormFieldsProps } from '../components/UserProfileFormFieldsProps';
+  import type { PageProps } from './PageProps';
+  import { useState } from '../../tools/useState';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { Component } from 'svelte';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  type IdpReviewUserProfileProps = PageProps<Extract<KcContext, { pageId: 'idp-review-user-profile.ftl' }>, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+  };
+
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    classes,
+    UserProfileFormFields,
+    doMakeUserConfirmPassword,
+  }: IdpReviewUserProfileProps = $props();
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { msg, msgStr } = $i18n;
+
+  const { url, messagesPerField } = kcContext;
+
+  const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={messagesPerField.exists('global')}
+  displayRequiredFields={true}
+>
+  {#snippet headerNode()}
+    {@render msg('loginIdpReviewProfileTitle')()}
+  {/snippet}
+  <form
+    id="kc-idp-review-profile-form"
+    class={kcClsx('kcFormClass')}
+    action={url.loginAction}
+    method="post"
+  >
+    <UserProfileFormFields
+      {kcContext}
+      {i18n}
+      onIsFormSubmittableValueChange={setIsFomSubmittable}
+      {kcClsx}
+      {doMakeUserConfirmPassword}
+    />
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div
+        id="kc-form-options"
+        class={kcClsx('kcFormOptionsClass')}
+      >
+        <div class={kcClsx('kcFormOptionsWrapperClass')}></div>
+      </div>
+      <div
+        id="kc-form-buttons"
+        class={kcClsx('kcFormButtonsClass')}
+      >
+        <input
+          class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+          type="submit"
+          value={msgStr('doSubmit')}
+          disabled={!$isFomSubmittable}
+        />
+      </div>
+    </div>
+  </form>
+</Template>

package/dist/login/pages/IdpReviewUserProfile.svelte.d.ts

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

package/dist/login/pages/Info.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'info.ftl' }>, I18n> = $props();
+
+  const { advancedMsgStr, msg } = $i18n;
+
+  const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={false}
+>
+  {#snippet headerNode()}
+    <span>{@html kcSanitize(messageHeader ?? message.summary)}</span>
+  {/snippet}
+
+  <div id="kc-info-message">
+    <p class="instruction">
+      {@html kcSanitize(
+        (() => {
+          let html = message.summary;
+
+          if (requiredActions) {
+            html += '<b>';
+
+            html += requiredActions
+              .map((requiredAction) => advancedMsgStr(`requiredAction.${requiredAction}`))
+              .join(', ');
+
+            html += '</b>';
+          }
+
+          return html;
+        })(),
+      )}
+    </p>
+    {#if !skipLink}
+      {#if pageRedirectUri}
+        <p>
+          <a href={pageRedirectUri}>{@render msg('backToApplication')()}</a>
+        </p>
+      {:else if actionUri}
+        <p>
+          <a href={actionUri}>{@render msg('proceedWithAction')()}</a>
+        </p>
+      {:else if client.baseUrl}<p>
+          <a href={client.baseUrl}>{@render msg('backToApplication')()}</a>
+        </p>
+      {/if}
+    {/if}
+  </div>
+</Template>

package/dist/login/pages/Info.svelte.d.ts

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