@keycloakify/svelte 0.0.1-rc.6 → 0.1.0

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

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

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

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

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import FieldErrors from './FieldErrors.svelte';
+  import GroupLabel from './GroupLabel.svelte';
+  import InputFieldByType from './InputFieldByType.svelte';
+  import type { UserProfileFormFieldsProps } from './UserProfileFormFieldsProps';
+  import { useUserProfileForm } from '../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/keycloakify-svelte/login/components/UserProfileFormFields.svelte.d.ts

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

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

@@ -0,0 +1,27 @@
+import { type FormAction, type FormFieldError } from '../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>;
+};
+export {};

package/keycloakify-svelte/login/components/UserProfileFormFieldsProps.js

@@ -0,0 +1,2 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {} from '../lib/useUserProfileForm';

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

@@ -0,0 +1,3 @@
+import type { Attribute } from 'keycloakify/login/KcContext';
+import type { I18n } from '../i18n';
+export declare const inputLabel: (i18n: I18n, attribute: Attribute, option: string) => import("svelte").Snippet<[]>;

package/keycloakify-svelte/login/components/inputLabel.js

@@ -0,0 +1,12 @@
+import { createRawSnippet } from 'svelte';
+export const inputLabel = (i18n, attribute, option) => {
+    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/keycloakify-svelte/login/i18n/i18n.d.ts

@@ -0,0 +1,15 @@
+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/keycloakify-svelte/login/i18n/i18n.js

@@ -0,0 +1 @@
+import {} from 'keycloakify/login/i18n/messages_defaultSet/types';

package/keycloakify-svelte/login/i18n/i18nBuilder.d.ts

@@ -0,0 +1,18 @@
+import type { LanguageTag as LanguageTag_defaultSet, MessageKey as MessageKey_defaultSet } from 'keycloakify/login/i18n/messages_defaultSet/types';
+import { type ReturnTypeOfCreateUseI18n } 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>;
+export declare const i18nBuilder: I18nBuilder<never, never, never, never>;

package/keycloakify-svelte/login/i18n/i18nBuilder.js

@@ -0,0 +1,26 @@
+import { createUseI18n } from './useI18n';
+function createI18nBuilder(params) {
+    const i18nBuilder = {
+        withThemeName: () => createI18nBuilder({
+            extraLanguageTranslations: params.extraLanguageTranslations,
+            messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined,
+        }),
+        withExtraLanguages: (extraLanguageTranslations) => createI18nBuilder({
+            extraLanguageTranslations,
+            messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined,
+        }),
+        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/keycloakify-svelte/login/i18n/index.d.ts

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

package/keycloakify-svelte/login/i18n/index.js

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

package/keycloakify-svelte/login/i18n/useI18n.d.ts

@@ -0,0 +1,28 @@
+import { type LanguageTag as LanguageTag_defaultSet, type MessageKey as MessageKey_defaultSet } from 'keycloakify/login/i18n/messages_defaultSet/types';
+import { type KcContextLike } from 'keycloakify/login/i18n/noJsx/getI18n';
+import type { Readable } from 'svelte/store';
+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 declare 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>;

package/keycloakify-svelte/login/i18n/useI18n.js

@@ -0,0 +1,65 @@
+import { useState } from '../../tools/useState';
+import {} from 'keycloakify/login/i18n/messages_defaultSet/types';
+import { createGetI18n } from 'keycloakify/login/i18n/noJsx/getI18n';
+import { createRawSnippet, onMount } from 'svelte';
+import { Reflect } from 'tsafe/Reflect';
+export function createUseI18n(params) {
+    const { extraLanguageTranslations, messagesByLanguageTag_themeDefined } = params;
+    const { withSvelte } = (() => {
+        const cache = new WeakMap();
+        function renderHtmlString(params) {
+            const { htmlString, msgKey } = params;
+            return createRawSnippet(() => ({
+                render: () => `<div data-kc-msg="${msgKey}">${htmlString}</div>`,
+            }));
+        }
+        function withSvelte(i18n_noJsx) {
+            use_cache: {
+                const i18n = cache.get(i18n_noJsx);
+                if (i18n === undefined) {
+                    break use_cache;
+                }
+                return i18n;
+            }
+            const 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) {
+        const { kcContext } = params;
+        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+        const [i18n_toReturn, setI18n_toReturn] = useState(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() };
+}

package/keycloakify-svelte/login/index.d.ts

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

package/keycloakify-svelte/login/index.js

@@ -0,0 +1 @@
+export { i18nBuilder } from './i18n/i18nBuilder';

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