@keycloakify/angular 0.0.4 → 0.0.6

package/src/login/components/user-profile-form-fields/user-profile-form-fields.component.html

@@ -1,78 +1,81 @@
-@let formFieldStates = formState().formFieldStates;
+@let formState = formState$ | async;
+@if (formState) {
+    @let formFieldStates = formState.formFieldStates;
 
-@for (fieldState of formFieldStates; track fieldState.attribute) {
-    <kc-group-label [attribute]="fieldState.attribute" />
+    @for (fieldState of formFieldStates; track fieldState.attribute) {
+        <kc-group-label [attribute]="fieldState.attribute" />
 
-    @if (beforeField) {
-        <ng-container
-            [ngTemplateOutlet]="beforeField"
-            [ngTemplateOutletContext]="{
-                attribute: fieldState.attribute,
-                valueOrValues: fieldState.valueOrValues,
-                displayableErrors: fieldState.displayableErrors
-            }"
-        />
-    }
-
-    <div
-        [kcClass]="'kcFormGroupClass'"
-        [style.display]="fieldState.attribute.name === 'password-confirm' && !doMakeUserConfirmPassword ? 'none' : 'block'"
-    >
-        <div [kcClass]="'kcLabelWrapperClass'">
-            <label
-                [for]="fieldState.attribute.name"
-                [kcClass]="'kcLabelClass'"
-            >
-                {{ i18n.advancedMsgStr(fieldState.attribute.displayName ?? '') }}
-                @if (fieldState.attribute.required) {
-                    *
-                }
-            </label>
-        </div>
+        @if (beforeField) {
+            <ng-container
+                [ngTemplateOutlet]="beforeField"
+                [ngTemplateOutletContext]="{
+                    attribute: fieldState.attribute,
+                    valueOrValues: fieldState.valueOrValues,
+                    displayableErrors: fieldState.displayableErrors
+                }"
+            />
+        }
 
-        <div [kcClass]="'kcInputWrapperClass'">
-            @if (fieldState.attribute.annotations.inputHelperTextBefore) {
-                <div
-                    aria-live="polite"
-                    [kcClass]="'kcInputHelperTextBeforeClass'"
-                    [id]="'form-help-text-before-' + fieldState.attribute.name"
+        <div
+            [kcClass]="'kcFormGroupClass'"
+            [style.display]="fieldState.attribute.name === 'password-confirm' && !doMakeUserConfirmPassword ? 'none' : 'block'"
+        >
+            <div [kcClass]="'kcLabelWrapperClass'">
+                <label
+                    [for]="fieldState.attribute.name"
+                    [kcClass]="'kcLabelClass'"
                 >
-                    {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextBefore) }}
-                </div>
-            }
+                    {{ i18n.advancedMsgStr(fieldState.attribute.displayName ?? '') }}
+                    @if (fieldState.attribute.required) {
+                        *
+                    }
+                </label>
+            </div>
 
-            <kc-input-field-by-type
-                [attribute]="fieldState.attribute"
-                [valueOrValues]="fieldState.valueOrValues"
-                [displayableErrors]="fieldState.displayableErrors"
-                (dispatchFormAction)="onDispatch($event)"
-            />
+            <div [kcClass]="'kcInputWrapperClass'">
+                @if (fieldState.attribute.annotations.inputHelperTextBefore) {
+                    <div
+                        aria-live="polite"
+                        [kcClass]="'kcInputHelperTextBeforeClass'"
+                        [id]="'form-help-text-before-' + fieldState.attribute.name"
+                    >
+                        {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextBefore) }}
+                    </div>
+                }
 
-            <kc-field-errors
-                [attribute]="fieldState.attribute"
-                [displayableErrors]="fieldState.displayableErrors"
-            />
-            @if (fieldState.attribute.annotations.inputHelperTextAfter) {
-                <div
-                    aria-live="polite"
-                    [kcClass]="'kcInputHelperTextAfterClass'"
-                    [id]="'form-help-text-after-' + fieldState.attribute.name"
-                >
-                    {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextAfter) }}
-                </div>
-            }
+                <kc-input-field-by-type
+                    [attribute]="fieldState.attribute"
+                    [valueOrValues]="fieldState.valueOrValues"
+                    [displayableErrors]="fieldState.displayableErrors"
+                    (dispatchFormAction)="onDispatch($event)"
+                />
 
-            @if (afterField) {
-                <ng-container
-                    [ngTemplateOutlet]="afterField"
-                    [ngTemplateOutletContext]="{
-                        attribute: fieldState.attribute,
-                        valueOrValues: fieldState.valueOrValues,
-                        displayableErrors: fieldState.displayableErrors
-                    }"
+                <kc-field-errors
+                    [attribute]="fieldState.attribute"
+                    [displayableErrors]="fieldState.displayableErrors"
                 />
-            }
-            <!-- NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook -->
+                @if (fieldState.attribute.annotations.inputHelperTextAfter) {
+                    <div
+                        aria-live="polite"
+                        [kcClass]="'kcInputHelperTextAfterClass'"
+                        [id]="'form-help-text-after-' + fieldState.attribute.name"
+                    >
+                        {{ i18n.advancedMsgStr(fieldState.attribute.annotations.inputHelperTextAfter) }}
+                    </div>
+                }
+
+                @if (afterField) {
+                    <ng-container
+                        [ngTemplateOutlet]="afterField"
+                        [ngTemplateOutletContext]="{
+                            attribute: fieldState.attribute,
+                            valueOrValues: fieldState.valueOrValues,
+                            displayableErrors: fieldState.displayableErrors
+                        }"
+                    />
+                }
+                <!-- NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook -->
+            </div>
         </div>
-    </div>
+    }
 }

package/src/login/components/user-profile-form-fields/user-profile-form-fields.component.ts

@@ -1,5 +1,5 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ContentChild, effect, forwardRef, inject, output, TemplateRef } from '@angular/core';
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ContentChild, forwardRef, inject, TemplateRef } from '@angular/core';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
 import { FieldErrorsComponent } from '@keycloakify/angular/login/components/field-errors';
@@ -8,7 +8,6 @@ import { InputFieldByTypeComponent } from '@keycloakify/angular/login/components
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/login/i18n';
 import type { KcContext } from '@keycloakify/angular/login/KcContext';
-import { SubmitService } from '@keycloakify/angular/login/services/submit';
 import { type FormAction, UserProfileFormService } from '@keycloakify/angular/login/services/user-profile-form';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
@@ -25,7 +24,7 @@ import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
             }
         `
     ],
-    imports: [KcClassDirective, FieldErrorsComponent, InputFieldByTypeComponent, GroupLabelComponent, NgTemplateOutlet],
+    imports: [KcClassDirective, FieldErrorsComponent, InputFieldByTypeComponent, GroupLabelComponent, NgTemplateOutlet, AsyncPipe],
     selector: 'kc-user-profile-form-fields',
     templateUrl: 'user-profile-form-fields.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -40,31 +39,17 @@ import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 export class UserProfileFormFieldsComponent extends ComponentReference {
     i18n = inject<I18n>(LOGIN_I18N);
     kcContext = inject<KcContext>(KC_LOGIN_CONTEXT);
-    userProfileFormService = inject(UserProfileFormService);
-    #submitService = inject(SubmitService);
+    #userProfileFormService = inject(UserProfileFormService);
     doMakeUserConfirmPassword = inject(DO_MAKE_USER_CONFIRM_PASSWORD);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
     override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 
-    onIsFormSubmittable = output<boolean>();
-
-    formState = this.userProfileFormService.formState;
+    formState$ = this.#userProfileFormService.formState$;
 
     @ContentChild('beforField') beforeField: TemplateRef<unknown> | undefined;
     @ContentChild('afterField') afterField: TemplateRef<unknown> | undefined;
 
-    constructor() {
-        super();
-        effect(
-            () => {
-                const isFormSubmittable = this.formState().isFormSubmittable;
-                this.#submitService.setIsSubmittable(isFormSubmittable);
-            },
-            { allowSignalWrites: true }
-        );
-    }
-
     onDispatch(formAction: FormAction) {
-        this.userProfileFormService.dispatchFormAction(formAction);
+        this.#userProfileFormService.dispatchFormAction(formAction);
     }
 }

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

@@ -1,17 +1,18 @@
 import { NgComponentOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal, type TemplateRef, Type, viewChild } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, type TemplateRef, Type, viewChild } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
 import type { UserProfileFormFieldsComponent } from '@keycloakify/angular/login/components/user-profile-form-fields';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/login/i18n';
 import type { KcContext } from '@keycloakify/angular/login/KcContext';
-import { SubmitService } from '@keycloakify/angular/login/services/submit';
+import { UserProfileFormService } from '@keycloakify/angular/login/services/user-profile-form';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { map } from 'rxjs';
 
 @Component({
     standalone: true,
@@ -27,10 +28,9 @@ import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
     ]
 })
 export class IdpReviewUserProfileComponent extends ComponentReference {
-    #submitService = inject(SubmitService);
     kcContext = inject<Extract<KcContext, { pageId: 'idp-review-user-profile.ftl' }>>(KC_LOGIN_CONTEXT);
     i18n = inject<I18n>(LOGIN_I18N);
-
+    #userProfileFormService = inject(UserProfileFormService);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
     override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 
@@ -46,14 +46,7 @@ export class IdpReviewUserProfileComponent extends ComponentReference {
     socialProvidersNode = viewChild<TemplateRef<HTMLElement>>('socialProvidersNode');
 
     userProfileFormFields = input<Type<UserProfileFormFieldsComponent>>();
-    isFormSubmittable = signal(false);
-
-    constructor() {
-        super();
-        this.#submitService.isSubmittable.pipe(takeUntilDestroyed()).subscribe(submittable => {
-            this.isFormSubmittable.set(submittable);
-        });
-    }
+    isFormSubmittable = toSignal(this.#userProfileFormService.formState$.pipe(map(s => s.isFormSubmittable)), { initialValue: false });
 
     onCallback() {
         (document.getElementById('kc-register-form') as HTMLFormElement).submit();

package/src/login/pages/login-recovery-authn-code-config/login-recovery-authn-code-config.component.ts

@@ -5,6 +5,7 @@ import { LogoutOtherSessionsComponent } from '@keycloakify/angular/login/compone
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/login/i18n';
 import type { KcContext } from '@keycloakify/angular/login/KcContext';
+import { LoginResourceInjectorService } from '@keycloakify/angular/login/services/login-resource-injector';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
@@ -26,6 +27,7 @@ import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 export class LoginRecoveryAuthnCodeConfigComponent extends ComponentReference {
     kcContext = inject<Extract<KcContext, { pageId: 'login-recovery-authn-code-config.ftl' }>>(KC_LOGIN_CONTEXT);
     i18n = inject<I18n>(LOGIN_I18N);
+    loginResourceInjectorService = inject(LoginResourceInjectorService);
 
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
     override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
@@ -44,4 +46,125 @@ export class LoginRecoveryAuthnCodeConfigComponent extends ComponentReference {
     toggleRecoveryCodesConfirmation = signal(false);
 
     olRecoveryCodesListId = 'kc-recovery-codes-list';
+
+    constructor() {
+        super();
+        this.loginResourceInjectorService.insertAdditionalScripts([
+            {
+                type: 'text/javascript',
+                id: `${this.olRecoveryCodesListId}-script`,
+                textContent: `
+                    /* copy recovery codes  */
+                    function copyRecoveryCodes() {
+                        var tmpTextarea = document.createElement("textarea");
+                        var codes = document.querySelectorAll("#${this.olRecoveryCodesListId} li");
+                        for (i = 0; i < codes.length; i++) {
+                            tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\\n";
+                        }
+                        document.body.appendChild(tmpTextarea);
+                        tmpTextarea.select();
+                        document.execCommand("copy");
+                        document.body.removeChild(tmpTextarea);
+                    }
+
+                    var copyButton = document.getElementById("copyRecoveryCodes");
+                    copyButton && copyButton.addEventListener("click", function () {
+                        copyRecoveryCodes();
+                    });
+
+                    /* download recovery codes  */
+                    function formatCurrentDateTime() {
+                        var dt = new Date();
+                        var options = {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            timeZoneName: 'short'
+                        };
+
+                        return dt.toLocaleString('en-US', options);
+                    }
+
+                    function parseRecoveryCodeList() {
+                        var recoveryCodes = document.querySelectorAll("#${this.olRecoveryCodesListId} li");
+                        var recoveryCodeList = "";
+
+                        for (var i = 0; i < recoveryCodes.length; i++) {
+                            var recoveryCodeLiElement = recoveryCodes[i].innerText;
+                            recoveryCodeList += recoveryCodeLiElement + "\\r\\n";
+                        }
+
+                        return recoveryCodeList;
+                    }
+
+                    function buildDownloadContent() {
+                        var recoveryCodeList = parseRecoveryCodeList();
+                        var dt = new Date();
+                        var options = {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            timeZoneName: 'short'
+                        };
+
+                        return fileBodyContent =
+                            ${JSON.stringify(this.i18n.msgStr('recovery-codes-download-file-header'))} + "\\n\\n" +
+                            recoveryCodeList + "\\n" +
+                            ${JSON.stringify(this.i18n.msgStr('recovery-codes-download-file-description'))} + "\\n\\n" +
+                            ${JSON.stringify(this.i18n.msgStr('recovery-codes-download-file-date'))} + " " + formatCurrentDateTime();
+                    }
+
+                    function setUpDownloadLinkAndDownload(filename, text) {
+                        var el = document.createElement('a');
+                        el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+                        el.setAttribute('download', filename);
+                        el.style.display = 'none';
+                        document.body.appendChild(el);
+                        el.click();
+                        document.body.removeChild(el);
+                    }
+
+                    function downloadRecoveryCodes() {
+                        setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
+                    }
+
+                    var downloadButton = document.getElementById("downloadRecoveryCodes");
+                    downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
+
+                    /* print recovery codes */
+                    function buildPrintContent() {
+                        var recoveryCodeListHTML = document.getElementById('${this.olRecoveryCodesListId}').innerHTML;
+                        var styles =
+                            \`@page { size: auto;  margin-top: 0; }
+                            body { width: 480px; }
+                            div { list-style-type: none; font-family: monospace }
+                            p:first-of-type { margin-top: 48px }\`;
+
+                        return printFileContent =
+                            "<html><style>" + styles + "</style><body>" +
+                            "<title>kc-download-recovery-codes</title>" +
+                            "<p>" + ${JSON.stringify(this.i18n.msgStr('recovery-codes-download-file-header'))} + "</p>" +
+                            "<div>" + recoveryCodeListHTML + "</div>" +
+                            "<p>" + ${JSON.stringify(this.i18n.msgStr('recovery-codes-download-file-description'))} + "</p>" +
+                            "<p>" + ${JSON.stringify(this.i18n.msgStr('recovery-codes-download-file-date'))} + " " + formatCurrentDateTime() + "</p>" +
+                            "</body></html>";
+                    }
+
+                    function printRecoveryCodes() {
+                        var w = window.open();
+                        w.document.write(buildPrintContent());
+                        w.print();
+                        w.close();
+                    }
+
+                    var printButton = document.getElementById("printRecoveryCodes");
+                    printButton && printButton.addEventListener("click", printRecoveryCodes);
+                `
+            }
+        ]);
+    }
 }

package/src/login/pages/login-update-profile/login-update-profile.component.ts

@@ -1,17 +1,18 @@
 import { NgComponentOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal, type TemplateRef, Type, viewChild } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, type TemplateRef, Type, viewChild } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
 import { UserProfileFormFieldsComponent } from '@keycloakify/angular/login/components/user-profile-form-fields';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/login/i18n';
 import type { KcContext } from '@keycloakify/angular/login/KcContext';
-import { SubmitService } from '@keycloakify/angular/login/services/submit';
+import { UserProfileFormService } from '@keycloakify/angular/login/services/user-profile-form';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { map } from 'rxjs';
 
 @Component({
     standalone: true,
@@ -27,7 +28,7 @@ import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
     ]
 })
 export class LoginUpdateProfileComponent extends ComponentReference {
-    #submitService = inject(SubmitService);
+    #userProfileFormService = inject(UserProfileFormService);
     kcContext = inject<Extract<KcContext, { pageId: 'login-update-profile.ftl' }>>(KC_LOGIN_CONTEXT);
     i18n = inject<I18n>(LOGIN_I18N);
 
@@ -45,13 +46,6 @@ export class LoginUpdateProfileComponent extends ComponentReference {
     infoNode = viewChild<TemplateRef<HTMLElement>>('infoNode');
     socialProvidersNode = viewChild<TemplateRef<HTMLElement>>('socialProvidersNode');
 
-    isFormSubmittable = signal(false);
+    isFormSubmittable = toSignal(this.#userProfileFormService.formState$.pipe(map(s => s.isFormSubmittable)), { initialValue: false });
     userProfileFormFields = input<Type<UserProfileFormFieldsComponent>>();
-
-    constructor() {
-        super();
-        this.#submitService.isSubmittable.pipe(takeUntilDestroyed()).subscribe(submittable => {
-            this.isFormSubmittable.set(submittable);
-        });
-    }
 }

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

@@ -1,6 +1,6 @@
 import { AsyncPipe, NgClass, NgComponentOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal, type TemplateRef, Type, viewChild } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
@@ -8,11 +8,12 @@ import { UserProfileFormFieldsComponent } from '@keycloakify/angular/login/compo
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/login/i18n';
 import type { KcContext } from '@keycloakify/angular/login/KcContext';
-import { SubmitService } from '@keycloakify/angular/login/services/submit';
+import { UserProfileFormService } from '@keycloakify/angular/login/services/user-profile-form';
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
 import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { map } from 'rxjs';
 
 @Component({
     selector: 'kc-register',
@@ -28,7 +29,7 @@ import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
     ]
 })
 export class RegisterComponent extends ComponentReference {
-    #submitService = inject(SubmitService);
+    #userProfileFormService = inject(UserProfileFormService);
     kcContext = inject<Extract<KcContext, { pageId: 'register.ftl' }>>(KC_LOGIN_CONTEXT);
     i18n = inject<I18n>(LOGIN_I18N);
 
@@ -46,16 +47,10 @@ export class RegisterComponent extends ComponentReference {
     infoNode = viewChild<TemplateRef<HTMLElement>>('infoNode');
     socialProvidersNode = viewChild<TemplateRef<HTMLElement>>('socialProvidersNode');
 
-    isFormSubmittable = signal(false);
+    isFormSubmittable = toSignal(this.#userProfileFormService.formState$.pipe(map(s => s.isFormSubmittable)), { initialValue: false });
     areTermsAccepted = signal(false);
     userProfileFormFields = input<Type<UserProfileFormFieldsComponent>>();
 
-    constructor() {
-        super();
-        this.#submitService.isSubmittable.pipe(takeUntilDestroyed()).subscribe(submittable => {
-            this.isFormSubmittable.set(submittable);
-        });
-    }
     onCallback() {
         (document.getElementById('kc-register-form') as HTMLFormElement).submit();
     }

package/src/login/pages/update-email/update-email.component.ts

@@ -1,15 +1,16 @@
 import { NgComponentOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal, type TemplateRef, Type, viewChild } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, type TemplateRef, Type, viewChild } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
 import { LogoutOtherSessionsComponent } from '@keycloakify/angular/login/components/logout-other-sessions';
 import { UserProfileFormFieldsComponent } from '@keycloakify/angular/login/components/user-profile-form-fields';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class';
 import type { I18n } from '@keycloakify/angular/login/i18n';
 import type { KcContext } from '@keycloakify/angular/login/KcContext';
-import { SubmitService } from '@keycloakify/angular/login/services/submit';
+import { UserProfileFormService } from '@keycloakify/angular/login/services/user-profile-form';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
+import { map } from 'rxjs';
 
 @Component({
     standalone: true,
@@ -25,7 +26,7 @@ import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
     ]
 })
 export class UpdateEmailComponent extends ComponentReference {
-    #submitService = inject(SubmitService);
+    #userProfileFormService = inject(UserProfileFormService);
     kcContext = inject<Extract<KcContext, { pageId: 'update-email.ftl' }>>(KC_LOGIN_CONTEXT);
     i18n = inject<I18n>(LOGIN_I18N);
 
@@ -41,12 +42,5 @@ export class UpdateEmailComponent extends ComponentReference {
     socialProvidersNode = viewChild<TemplateRef<HTMLElement>>('socialProvidersNode');
 
     userProfileFormFields = input<Type<UserProfileFormFieldsComponent>>();
-    isFormSubmittable = signal(false);
-
-    constructor() {
-        super();
-        this.#submitService.isSubmittable.pipe(takeUntilDestroyed()).subscribe(submittable => {
-            this.isFormSubmittable.set(submittable);
-        });
-    }
+    isFormSubmittable = toSignal(this.#userProfileFormService.formState$.pipe(map(s => s.isFormSubmittable)), { initialValue: false });
 }