@keycloakify/angular 0.0.1-rc.0

package/src/login/directives/attributes.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, effect, ElementRef, inject, input, Renderer2 } from "@angular/core";
+
+@Directive({ selector: "[kcAttributes]", standalone: true })
+export class AttributesDirective {
+    kcAttributes = input<Record<string, string>>();
+    readonly #el = inject<ElementRef<HTMLElement>>(ElementRef);
+    readonly #renderer = inject(Renderer2);
+
+    constructor() {
+        effect(() => {
+            const attributes = this.kcAttributes();
+            if (attributes) {
+                Object.entries(attributes).forEach(([key, value]) => {
+                    this.#renderer.setAttribute(
+                        this.#el.nativeElement,
+                        `data-${key}`,
+                        value
+                    );
+                });
+            }
+        });
+    }
+}

package/src/login/directives/index.ts

@@ -0,0 +1,2 @@
+export * from "./attributes.directive";
+export * from "./kc-class.directive";

package/src/login/directives/kc-class.directive.ts

@@ -0,0 +1,167 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
+import {
+    Directive,
+    DoCheck,
+    ElementRef,
+    inject,
+    Input,
+    isDevMode,
+    Renderer2,
+    ɵstringify as stringify
+} from "@angular/core";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import { ComponentReference } from "../classes/component-reference.class";
+
+interface CssClassState {
+    // PERF: could use a bit mask to represent state as all fields are boolean flags
+    enabled: boolean;
+    changed: boolean;
+    touched: boolean;
+}
+
+type KcClassSupportedTypes =
+    | ClassKey[]
+    | Set<ClassKey>
+    | Partial<{ [key in ClassKey]: any }>
+    | null
+    | undefined;
+
+type NgClassSupportedTypes =
+    | string[]
+    | Set<string>
+    | { [key: string]: any }
+    | null
+    | undefined;
+
+@Directive({ selector: "[kcClass]", standalone: true })
+export class KcClassDirective implements DoCheck {
+    private initialClasses: string[] = [];
+    private rawClass: NgClassSupportedTypes;
+    private rawKcClass: KcClassSupportedTypes;
+
+    private stateMap = new Map<string | ClassKey, CssClassState>();
+    readonly #renderer = inject(Renderer2);
+    readonly #el = inject(ElementRef);
+    readonly #host = inject(ComponentReference);
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input("class")
+    set klass(value: string) {
+        this.initialClasses = value != null ? value.trim().split(/\s+/) : [];
+    }
+
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input("ngClass")
+    set ngClass(value: string | NgClassSupportedTypes) {
+        this.rawClass = typeof value === "string" ? value.trim().split(/\s+/) : value;
+    }
+
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input("kcClass")
+    set kcClass(value: ClassKey | KcClassSupportedTypes) {
+        this.rawKcClass =
+            typeof value === "string" ? (value.trim().split(/\s+/) as ClassKey[]) : value;
+    }
+
+    ngDoCheck(): void {
+        for (const klass of this.initialClasses) {
+            this._updateState(klass, true);
+        }
+        // classes from the [ngClass] binding
+        const rawClass = this.rawClass;
+        if (Array.isArray(rawClass) || rawClass instanceof Set) {
+            for (const klass of rawClass) {
+                this._updateState(klass, true);
+            }
+        } else if (rawClass != null) {
+            for (const klass of Object.keys(rawClass)) {
+                this._updateState(klass, Boolean(rawClass[klass]));
+            }
+        }
+
+        // classes from the [kcClass] binding
+        const rawKcClass = this.rawKcClass;
+        if (Array.isArray(rawKcClass) || rawKcClass instanceof Set) {
+            for (const klass of rawKcClass) {
+                this._updateState(klass, true, true);
+            }
+        } else if (rawKcClass != null) {
+            for (const klass of Object.keys(rawKcClass)) {
+                this._updateState(klass, Boolean(rawKcClass[klass as ClassKey]), true);
+            }
+        }
+
+        this._applyStateDiff();
+    }
+
+    private _updateState(
+        klass: string | ClassKey,
+        nextEnabled: boolean,
+        kcClsxCheck = false
+    ) {
+        const state = this.stateMap.get(klass);
+        if (state !== undefined) {
+            if (state.enabled !== nextEnabled) {
+                state.changed = true;
+                state.enabled = nextEnabled;
+            }
+            state.touched = true;
+        } else {
+            let klassChecked = klass;
+            if (kcClsxCheck) {
+                const doUseDefaultCss = this.#host.doUseDefaultCss ?? true;
+                const classes = this.#host.classes;
+                const kcClsx = getKcClsx({ doUseDefaultCss, classes }).kcClsx;
+                klassChecked = kcClsx(klass as ClassKey);
+            }
+            this.stateMap.set(klassChecked, {
+                enabled: nextEnabled,
+                changed: true,
+                touched: true
+            });
+        }
+    }
+
+    private _applyStateDiff() {
+        for (const stateEntry of this.stateMap) {
+            const klass = stateEntry[0];
+            const state = stateEntry[1];
+
+            if (state.changed) {
+                this._toggleClass(klass, state.enabled);
+                state.changed = false;
+            } else if (!state.touched) {
+                // A class that was previously active got removed from the new collection of classes -
+                // remove from the DOM as well.
+                if (state.enabled) {
+                    this._toggleClass(klass, false);
+                }
+                this.stateMap.delete(klass);
+            }
+
+            state.touched = false;
+        }
+    }
+
+    private _toggleClass(klass: string, enabled: boolean): void {
+        if (isDevMode()) {
+            if (typeof klass !== "string") {
+                throw new Error(
+                    `NgClass can only toggle CSS classes expressed as strings, got ${stringify(klass)}`
+                );
+            }
+        }
+
+        klass = klass.trim();
+        if (klass.length > 0) {
+            klass.split(/\s+/).forEach(klass => {
+                if (enabled) {
+                    this.#renderer.addClass(this.#el.nativeElement, klass);
+                } else {
+                    this.#renderer.removeClass(this.#el.nativeElement, klass);
+                }
+            });
+        }
+    }
+}

package/src/login/i18n.ts

@@ -0,0 +1,4 @@
+import type { GenericI18n_noJsx } from "keycloakify/login/i18n/noJsx/GenericI18n_noJsx";
+import { MessageKey as MessageKey_defaultSet } from "keycloakify/login/i18n/messages_defaultSet/types";
+/** INTERNAL: DO NOT IMPORT THIS */
+export type I18n = GenericI18n_noJsx<MessageKey_defaultSet, string>;

package/src/login/pages/code/code.component.html

@@ -0,0 +1,26 @@
+@let code = kcContext.code;
+
+<kc-login-template>
+  <ng-container headerNode>
+    @if (code.success) {
+      {{ 'codeSuccessTitle' | msgStr }}
+    } @else {
+      {{ 'codeErrorTitle' | msgStr: code.error }}
+    }
+  </ng-container>
+
+  <ng-container content>
+    <div id="kc-code">
+      @if (code.success) {
+        <p>{{ 'copyCodeInstruction' | msgStr }}</p>
+        <input
+          id="code"
+          [kcClass]="'kcTextareaClass'"
+          defaultValue="{{ code.code }}"
+        />
+      } @else {
+        <p id="error">{{ code.error }}</p>
+      }
+    </div>
+  </ng-container>
+</kc-login-template>

package/src/login/pages/code/code.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    USE_DEFAULT_CSS
+} from "@keycloakify/angular/lib/public-api";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    standalone: true,
+    imports: [MsgStrPipe, TemplateComponent, KcClassDirective],
+    selector: "kc-root",
+    templateUrl: "code.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => CodeComponent)
+        }
+    ]
+})
+export class CodeComponent extends ComponentReference {
+    kcContext = inject<Extract<KcContext, { pageId: "code.ftl" }>>(KC_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+}

package/src/login/pages/delete-account-confirm/delete-account-confirm.component.html

@@ -0,0 +1,46 @@
+@let url = kcContext.url;
+@let triggered_from_aia = kcContext.triggered_from_aia;
+<kc-login-template>
+  <ng-container headerNode>
+    {{ 'deleteAccountConfirm' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <form
+      [action]="url.loginAction"
+      method="post"
+      class="form-actions"
+    >
+      <div
+        class="alert alert-warning"
+        style="margin-top: 0; margin-bottom: 30px"
+      >
+        <span class="pficon pficon-warning-triangle-o"></span>
+        {{ 'irreversibleAction' | msgStr }}
+      </div>
+      <p>{{ 'deletingImplies' | msgStr }}</p>
+      <ul style="color: #72767b; list-style: disc; list-style-position: inside">
+        <li>{{ 'loggingOutImmediately' | msgStr }}</li>
+        <li>{{ 'errasingData' | msgStr }}</li>
+      </ul>
+      <p class="delete-account-text">{{ 'finalDeletionConfirmation' | msgStr }}</p>
+      <div id="kc-form-buttons">
+        <input
+          [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+          type="submit"
+          value="{{ 'doConfirmDelete' | msgStr }}"
+        />
+        @if (triggered_from_aia) {
+          <button
+            [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
+            style="margin-left: calc(100% - 220px)"
+            type="submit"
+            name="cancel-aia"
+            value="true"
+          >
+            {{ 'doCancel' | msgStr }}
+          </button>
+        }
+      </div>
+    </form>
+  </ng-container>
+</kc-login-template>

package/src/login/pages/delete-account-confirm/delete-account-confirm.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    USE_DEFAULT_CSS
+} from "@keycloakify/angular/lib/public-api";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcClassDirective } from "@keycloakify/angular/login/directives";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    standalone: true,
+    imports: [TemplateComponent, MsgStrPipe, KcClassDirective],
+    selector: "kc-root",
+    templateUrl: "delete-account-confirm.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => DeleteAccountConfirmComponent)
+        }
+    ]
+})
+export class DeleteAccountConfirmComponent extends ComponentReference {
+    kcContext =
+        inject<Extract<KcContext, { pageId: "delete-account-confirm.ftl" }>>(KC_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+}

package/src/login/pages/delete-credential/delete-credential.component.html

@@ -0,0 +1,35 @@
+@let url = kcContext.url;
+@let credentialLabel = kcContext.credentialLabel;
+<kc-login-template [displayMessage]="displayMessage">
+  <ng-container headerNode>
+    {{ 'deleteCredentialTitle' | msgStr: credentialLabel }}
+  </ng-container>
+  <ng-container content>
+    <div id="kc-delete-text">
+      {{ 'deleteCredentialMessage' | msgStr: credentialLabel }}
+    </div>
+
+    <form
+      class="form-actions"
+      [action]="url.loginAction"
+      method="post"
+    >
+      <input
+        [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+        name="accept"
+        id="kc-accept"
+        type="submit"
+        [value]="'doConfirmDelete' | msgStr"
+      />
+
+      <input
+        [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
+        name="cancel-aia"
+        [value]="'doCancel' | msgStr"
+        id="kc-decline"
+        type="submit"
+      />
+    </form>
+    <div class="clearfix"></div>
+  </ng-container>
+</kc-login-template>

package/src/login/pages/delete-credential/delete-credential.component.ts

@@ -0,0 +1,43 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input
+} from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    USE_DEFAULT_CSS
+} from "@keycloakify/angular/lib/public-api";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    standalone: true,
+    imports: [MsgStrPipe, TemplateComponent, KcClassDirective],
+    selector: "kc-root",
+    templateUrl: "delete-credential.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => DeleteCredentialComponent)
+        }
+    ]
+})
+export class DeleteCredentialComponent extends ComponentReference {
+    kcContext =
+        inject<Extract<KcContext, { pageId: "delete-credential.ftl" }>>(KC_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    displayRequiredFields = input(false);
+    documentTitle = input<string>();
+    bodyClassName = input<string>();
+    displayInfo: boolean = false;
+    displayMessage: boolean = false;
+}

package/src/login/pages/error/error.component.html

@@ -0,0 +1,25 @@
+@let message = kcContext.message;
+@let skipLink = kcContext.skipLink;
+@let client = kcContext.client;
+<kc-login-template [displayMessage]="false">
+  <ng-container headerNode>
+    {{ 'errorTitle' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <div id="kc-error-message">
+      <p
+        class="instruction"
+        [innerHTML]="message.summary | kcSanitize: 'html'"
+      ></p>
+      @if (!skipLink && !!client?.baseUrl) {
+        <p>
+          <a
+            id="backToApplication"
+            [href]="client.baseUrl"
+            [innerHTML]="'backToApplication' | msgStr | kcSanitize: 'html'"
+          ></a>
+        </p>
+      }
+    </div>
+  </ng-container>
+</kc-login-template>

package/src/login/pages/error/error.component.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    USE_DEFAULT_CSS
+} from "@keycloakify/angular/lib/public-api";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcSanitizePipe } from "@keycloakify/angular/login/pipes/kc-sanitize.pipe";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    standalone: true,
+    imports: [TemplateComponent, MsgStrPipe, KcSanitizePipe],
+    selector: "kc-root",
+    templateUrl: "error.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => ErrorComponent)
+        }
+    ]
+})
+export class ErrorComponent extends ComponentReference {
+    kcContext = inject<Extract<KcContext, { pageId: "error.ftl" }>>(KC_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+}

package/src/login/pages/frontchannel-logout/frontchannel-logout.component.html

@@ -0,0 +1,35 @@
+@let logout = kcContext.logout;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="'frontchannel-logout.title' | msgStr"
+>
+  <ng-container headerNode>
+    {{ 'frontchannel-logout.title' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <p>{{ 'frontchannel-logout.message' | msgStr }}</p>
+    <ul>
+      @for (client of logout.clients; track client.name; let idx = $index) {
+        <li>
+          {{ client.name }}
+          <iframe
+            [src]="'client.frontChannelLogoutUrl' | kcSanitize: 'resourceUrl'"
+            style="display: none"
+          ></iframe>
+        </li>
+      }
+    </ul>
+    @if (logout.logoutRedirectUri) {
+      <a
+        id="continue"
+        class="btn btn-primary"
+        [href]="logout.logoutRedirectUri"
+      >
+        {{ 'doContinue' | msgStr }}
+      </a>
+    }
+  </ng-container>
+</kc-login-template>

package/src/login/pages/frontchannel-logout/frontchannel-logout.component.ts

@@ -0,0 +1,49 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input,
+    OnInit
+} from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    USE_DEFAULT_CSS
+} from "@keycloakify/angular/lib/public-api";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcSanitizePipe } from "@keycloakify/angular/login/pipes/kc-sanitize.pipe";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    standalone: true,
+    imports: [TemplateComponent, MsgStrPipe, KcSanitizePipe],
+    selector: "kc-root",
+    templateUrl: "frontchannel-logout.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => FrontchannelLogoutComponent)
+        }
+    ]
+})
+export class FrontchannelLogoutComponent extends ComponentReference implements OnInit {
+    kcContext =
+        inject<Extract<KcContext, { pageId: "frontchannel-logout.ftl" }>>(KC_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    displayRequiredFields = input(false);
+    bodyClassName = input<string>();
+    displayInfo: boolean = false;
+    displayMessage: boolean = false;
+
+    ngOnInit(): void {
+        if (this.kcContext.logout.logoutRedirectUri) {
+            window.location.replace(this.kcContext.logout.logoutRedirectUri);
+        }
+    }
+}

package/src/login/pages/idp-review-user-profile/idp-review-user-profile.component.html

@@ -0,0 +1,41 @@
+@let url = kcContext.url;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'loginIdpReviewProfileTitle' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <form
+      id="kc-idp-review-profile-form"
+      [kcClass]="'kcFormClass'"
+      [action]="url.loginAction"
+      method="post"
+    >
+      <kc-user-profile-form-fields (onIsFormSubmittable)="isFormSubmittable.set($event)" />
+      <div [kcClass]="'kcFormGroupClass'">
+        <div
+          id="kc-form-options"
+          [kcClass]="'kcFormOptionsClass'"
+        >
+          <div [kcClass]="'kcFormOptionsWrapperClass'"></div>
+        </div>
+        <div
+          id="kc-form-buttons"
+          [kcClass]="'kcFormButtonsClass'"
+        >
+          <input
+            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+            type="submit"
+            value="{{ 'doSubmit' | msgStr }}"
+            [disabled]="!isFormSubmittable"
+          />
+        </div>
+      </div>
+    </form>
+  </ng-container>
+</kc-login-template>

package/src/login/pages/idp-review-user-profile/idp-review-user-profile.component.ts

@@ -0,0 +1,55 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input,
+    signal
+} from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    USE_DEFAULT_CSS
+} from "@keycloakify/angular/lib/public-api";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { UserProfileFormFieldsComponent } from "@keycloakify/angular/login/components/user-profile-form-fields/user-profile-form-fields.component";
+import { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    standalone: true,
+    imports: [
+        TemplateComponent,
+        MsgStrPipe,
+        UserProfileFormFieldsComponent,
+        KcClassDirective
+    ],
+    selector: "kc-root",
+    templateUrl: "idp-review-user-profile.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => IdpReviewUserProfileComponent)
+        }
+    ]
+})
+export class IdpReviewUserProfileComponent extends ComponentReference {
+    kcContext =
+        inject<Extract<KcContext, { pageId: "idp-review-user-profile.ftl" }>>(KC_CONTEXT);
+    displayRequiredFields = input(true);
+    documentTitle = input<string>();
+    bodyClassName = input<string>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    isFormSubmittable = signal(false);
+    displayInfo: boolean = false;
+    displayMessage: boolean = !this.kcContext?.messagesPerField?.existsError("global");
+
+    onCallback() {
+        (document.getElementById("kc-register-form") as HTMLFormElement).submit();
+    }
+}