@keycloakify/angular 0.0.1-rc.7 → 0.0.1-rc.9

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

@@ -1,5 +1,6 @@
-import { AsyncPipe, NgComponentOutlet } from '@angular/common';
-import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChild, forwardRef, inject, input, signal, Type } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal, Type } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 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';
@@ -8,15 +9,14 @@ import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class
 import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
-import { USER_PROFILE_FORM_FIELDS_EJECTED_PATH } from '@keycloakify/angular/login/tokens/user-profile-form-fields-ejected-path.token';
 import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
-import { from, Observable, tap } from 'rxjs';
 import { type I18n } from '../../i18n';
 import { type KcContext } from '../../KcContext';
+import { SubmitService } from '@keycloakify/angular/login/services/submit.service';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, KcClassDirective, NgComponentOutlet, AsyncPipe],
+    imports: [TemplateComponent, KcClassDirective, NgComponentOutlet],
     selector: 'kc-root',
     templateUrl: 'idp-review-user-profile.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -27,8 +27,8 @@ import { type KcContext } from '../../KcContext';
         }
     ]
 })
-export class IdpReviewUserProfileComponent extends ComponentReference implements AfterContentInit {
-    @ContentChild(UserProfileFormFieldsComponent, { descendants: true }) userProfileFormFields: UserProfileFormFieldsComponent | undefined;
+export class IdpReviewUserProfileComponent extends ComponentReference {
+    #submitService = inject(SubmitService);
 
     kcContext = inject<Extract<KcContext, { pageId: 'idp-review-user-profile.ftl' }>>(KC_LOGIN_CONTEXT);
     displayRequiredFields = input(true);
@@ -41,20 +41,13 @@ export class IdpReviewUserProfileComponent extends ComponentReference implements
     displayInfo: boolean = false;
     displayMessage: boolean = !this.kcContext?.messagesPerField?.existsError('global');
 
-    userProfileFormFieldsComponent: Observable<Type<UserProfileFormFieldsComponent> | null>;
-    userProfileFormFieldsEjectedPath = inject<string | undefined>(USER_PROFILE_FORM_FIELDS_EJECTED_PATH);
+    userProfileFormFields = input<Type<UserProfileFormFieldsComponent>>();
+
     constructor() {
         super();
-        this.userProfileFormFieldsComponent = from(
-            import(/* @vite-ignore */
-                this.userProfileFormFieldsEjectedPath ??
-                    '../../components/user-profile-form-fields/user-profile-form-fields.component'
-            ).then(c => c.UserProfileFormFieldsComponent)
-        );
-    }
-
-    ngAfterContentInit(): void {
-        this.userProfileFormFields?.onIsFormSubmittable?.subscribe(submittable => this.isFormSubmittable.set(submittable));
+        this.#submitService.isSubmittable.pipe(takeUntilDestroyed()).subscribe(submittable => {
+            this.isFormSubmittable.set(submittable);
+        });
     }
 
     onCallback() {

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

@@ -17,8 +17,7 @@
             [action]="url.loginAction"
             method="post"
         >
-            <kc-user-profile-form-fields (onIsFormSubmittable)="isFormSubmittable.set($event)"></kc-user-profile-form-fields>
-
+            <ng-container [ngComponentOutlet]="userProfileFormFields() ?? null"></ng-container>
             <div [kcClass]="'kcFormGroupClass'">
                 <div
                     id="kc-form-options"
@@ -31,7 +30,7 @@
                     [kcClass]="'kcFormButtonsClass'"
                 >
                     <input
-                        [disabled]="!isFormSubmittable"
+                        [disabled]="!isFormSubmittable()"
                         [kcClass]="{
                             kcButtonClass: true,
                             kcButtonPrimaryClass: true,

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

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal, Type } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 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';
@@ -10,10 +12,11 @@ import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.t
 import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
 import { type I18n } from '../../i18n';
 import { type KcContext } from '../../KcContext';
+import { SubmitService } from '@keycloakify/angular/login/services/submit.service';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, KcClassDirective, UserProfileFormFieldsComponent],
+    imports: [TemplateComponent, KcClassDirective, NgComponentOutlet],
     selector: 'kc-root',
     templateUrl: 'login-update-profile.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -25,6 +28,7 @@ import { type KcContext } from '../../KcContext';
     ]
 })
 export class LoginUpdateProfileComponent extends ComponentReference {
+    #submitService = inject(SubmitService);
     kcContext = inject<Extract<KcContext, { pageId: 'login-update-profile.ftl' }>>(KC_LOGIN_CONTEXT);
     i18n = inject<I18n>(LOGIN_I18N);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
@@ -36,4 +40,12 @@ export class LoginUpdateProfileComponent extends ComponentReference {
     displayMessage: boolean = this.kcContext.messagesPerField.exists('global');
 
     isFormSubmittable = signal(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.html

@@ -24,7 +24,7 @@
             [action]="url.registrationAction"
             method="post"
         >
-            <kc-user-profile-form-fields (onIsFormSubmittable)="isFormSubmittable.set($event)"></kc-user-profile-form-fields>
+            <ng-container [ngComponentOutlet]="userProfileFormFields() ?? null"></ng-container>
             @if (termsAcceptanceRequired) {
                 <div className="form-group">
                     <div [kcClass]="'kcInputWrapperClass'">
@@ -113,7 +113,7 @@
                         [kcClass]="'kcFormButtonsClass'"
                     >
                         <input
-                            [disabled]="!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)"
+                            [disabled]="!isFormSubmittable() || (termsAcceptanceRequired && !areTermsAccepted())"
                             [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                             type="submit"
                             [value]="i18n.msgStr('doRegister')"

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

@@ -1,5 +1,6 @@
-import { AsyncPipe, NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal } from '@angular/core';
+import { AsyncPipe, NgClass, NgComponentOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal, Type } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 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';
@@ -12,13 +13,14 @@ import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.t
 import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
 import { type I18n } from '../../i18n';
 import { type KcContext } from '../../KcContext';
+import { SubmitService } from '@keycloakify/angular/login/services/submit.service';
 
 @Component({
     selector: 'kc-root',
     templateUrl: './register.component.html',
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [KcClassDirective, AsyncPipe, KcSanitizePipe, NgClass, TemplateComponent, UserProfileFormFieldsComponent],
+    imports: [KcClassDirective, AsyncPipe, KcSanitizePipe, NgClass, TemplateComponent, NgComponentOutlet],
     providers: [
         {
             provide: ComponentReference,
@@ -27,6 +29,7 @@ import { type KcContext } from '../../KcContext';
     ]
 })
 export class RegisterComponent extends ComponentReference {
+    #submitService = inject(SubmitService);
     kcContext = inject<Extract<KcContext, { pageId: 'register.ftl' }>>(KC_LOGIN_CONTEXT);
     displayRequiredFields = input(false);
     documentTitle = input<string>();
@@ -39,6 +42,14 @@ export class RegisterComponent extends ComponentReference {
     displayInfo: boolean = false;
     displayMessage: boolean = !this.kcContext?.messagesPerField?.existsError('global');
 
+    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.html

@@ -17,7 +17,7 @@
             [action]="url.loginAction"
             method="post"
         >
-            <kc-user-profile-form-fields (onIsFormSubmittable)="isFormSubmittable.set($event)"></kc-user-profile-form-fields>
+            <ng-container [ngComponentOutlet]="userProfileFormFields() ?? null"></ng-container>
             <div [kcClass]="'kcFormGroupClass'">
                 <div
                     id="kc-form-options"
@@ -31,7 +31,7 @@
                     [kcClass]="'kcFormButtonsClass'"
                 >
                     <input
-                        [disabled]="!isFormSubmittable"
+                        [disabled]="!isFormSubmittable()"
                         [kcClass]="{
                             kcButtonClass: true,
                             kcButtonPrimaryClass: true,

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

@@ -1,4 +1,6 @@
-import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal } from '@angular/core';
+import { NgComponentOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal, Type } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
 import { LogoutOtherSessionsComponent } from '@keycloakify/angular/login/components/logout-other-sessions/logout-other-sessions.component';
@@ -11,10 +13,11 @@ import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.t
 import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
 import { type I18n } from '../../i18n';
 import { type KcContext } from '../../KcContext';
+import { SubmitService } from '@keycloakify/angular/login/services/submit.service';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, KcClassDirective, UserProfileFormFieldsComponent, LogoutOtherSessionsComponent],
+    imports: [TemplateComponent, KcClassDirective, NgComponentOutlet, LogoutOtherSessionsComponent],
     selector: 'kc-root',
     templateUrl: 'update-email.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -26,6 +29,7 @@ import { type KcContext } from '../../KcContext';
     ]
 })
 export class UpdateEmailComponent extends ComponentReference {
+    #submitService = inject(SubmitService);
     kcContext = inject<Extract<KcContext, { pageId: 'update-email.ftl' }>>(KC_LOGIN_CONTEXT);
     i18n = inject<I18n>(LOGIN_I18N);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
@@ -36,4 +40,13 @@ export class UpdateEmailComponent extends ComponentReference {
     displayInfo: boolean = false;
     displayMessage: boolean = this.kcContext.messagesPerField.exists('global');
     isFormSubmittable = signal(false);
+
+    userProfileFormFields = input<Type<UserProfileFormFieldsComponent>>();
+
+    constructor() {
+        super();
+        this.#submitService.isSubmittable.pipe(takeUntilDestroyed()).subscribe(submittable => {
+            this.isFormSubmittable.set(submittable);
+        });
+    }
 }

package/src/login/providers/keycloakify-angular.providers.ts

@@ -5,7 +5,6 @@ import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
 import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
 import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
 import { DO_MAKE_USER_CONFIRM_PASSWORD } from '@keycloakify/angular/login/tokens/make-user-confirm-password.token';
-import { USER_PROFILE_FORM_FIELDS_EJECTED_PATH } from '@keycloakify/angular/login/tokens/user-profile-form-fields-ejected-path.token';
 import { type KcContextLike } from 'keycloakify/login/i18n/noJsx';
 import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
 import { type KcContext } from '../KcContext';
@@ -15,7 +14,6 @@ export type KeycloakifyAngularLoginConfig = {
     doMakeUserConfirmPassword?: boolean;
     doUseDefaultCss?: boolean;
     classes?: { [key in ClassKey]?: string };
-    userProfileFormFieldsEjectedPath?: string;
     getI18n: (params: { kcContext: KcContextLike }) => {
         i18n: unknown;
         prI18n_currentLanguage: Promise<unknown> | undefined;
@@ -66,9 +64,5 @@ export const provideKeycloakifyAngularLogin = (config: KeycloakifyAngularLoginCo
             deps: [I18nService]
         },
         { provide: USE_DEFAULT_CSS, useValue: config?.doUseDefaultCss ?? true },
-        { provide: LOGIN_CLASSES, useValue: config?.classes ?? {} },
-        {
-            provide: USER_PROFILE_FORM_FIELDS_EJECTED_PATH,
-            useValue: config.userProfileFormFieldsEjectedPath
-        }
+        { provide: LOGIN_CLASSES, useValue: config?.classes ?? {} }
     ]);

package/src/login/services/submit.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class SubmitService {
+    #submittableSubj: BehaviorSubject<boolean> = new BehaviorSubject(false);
+    isSubmittable: Observable<boolean> = this.#submittableSubj.asObservable();
+
+    setIsSubmittable(submittable: boolean) {
+        this.#submittableSubj.next(submittable);
+    }
+}

package/login/tokens/user-profile-form-fields-ejected-path.token.d.ts

@@ -1,2 +0,0 @@
-import { InjectionToken } from "@angular/core";
-export declare const USER_PROFILE_FORM_FIELDS_EJECTED_PATH: InjectionToken<string>;

package/login/tokens/user-profile-form-fields-ejected-path.token.js

@@ -1,3 +0,0 @@
-import { InjectionToken } from "@angular/core";
-export const USER_PROFILE_FORM_FIELDS_EJECTED_PATH = new InjectionToken('profile form fields ejected path');
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci1wcm9maWxlLWZvcm0tZmllbGRzLWVqZWN0ZWQtcGF0aC50b2tlbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tleWNsb2FraWZ5LWFuZ3VsYXIvc3JjL2xvZ2luL3Rva2Vucy91c2VyLXByb2ZpbGUtZm9ybS1maWVsZHMtZWplY3RlZC1wYXRoLnRva2VuLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0MsTUFBTSxDQUFDLE1BQU0scUNBQXFDLEdBQUcsSUFBSSxjQUFjLENBQVMsa0NBQWtDLENBQUMsQ0FBQSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGlvblRva2VuIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuZXhwb3J0IGNvbnN0IFVTRVJfUFJPRklMRV9GT1JNX0ZJRUxEU19FSkVDVEVEX1BBVEggPSBuZXcgSW5qZWN0aW9uVG9rZW48c3RyaW5nPigncHJvZmlsZSBmb3JtIGZpZWxkcyBlamVjdGVkIHBhdGgnKSJdfQ==

package/src/login/tokens/user-profile-form-fields-ejected-path.token.ts

@@ -1,3 +0,0 @@
-import { InjectionToken } from "@angular/core";
-
-export const USER_PROFILE_FORM_FIELDS_EJECTED_PATH = new InjectionToken<string>('profile form fields ejected path')