@keycloakify/angular 0.0.1-rc.17 → 0.0.1-rc.19

package/login/pages/webauthn-register/webauthn-register.component.d.ts

@@ -1,8 +1,9 @@
+import { TemplateRef } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
-import { LoginResourceInjectorService } from '@keycloakify/angular/login/services/login-resource-injector';
-import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 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 type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 import * as i0 from "@angular/core";
 export declare class WebauthnRegisterComponent extends ComponentReference {
     kcContext: KcContext.WebauthnRegister;
@@ -10,13 +11,16 @@ export declare class WebauthnRegisterComponent extends ComponentReference {
     i18n: I18n;
     doUseDefaultCss: boolean;
     classes: Partial<Record<ClassKey, string>>;
-    displayRequiredFields: import("@angular/core").InputSignal<boolean>;
-    documentTitle: import("@angular/core").InputSignal<string | undefined>;
-    bodyClassName: import("@angular/core").InputSignal<string | undefined>;
+    documentTitle: string | undefined;
+    bodyClassName: string | undefined;
+    displayRequiredFields: boolean;
     displayInfo: boolean;
     displayMessage: boolean;
+    headerNode?: import("@angular/core").Signal<TemplateRef<HTMLElement> | undefined> | undefined;
+    infoNode?: import("@angular/core").Signal<TemplateRef<HTMLElement> | undefined> | undefined;
+    socialProvidersNode?: import("@angular/core").Signal<TemplateRef<HTMLElement> | undefined> | undefined;
     authButtonId: string;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<WebauthnRegisterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WebauthnRegisterComponent, "kc-root", never, { "displayRequiredFields": { "alias": "displayRequiredFields"; "required": false; "isSignal": true; }; "documentTitle": { "alias": "documentTitle"; "required": false; "isSignal": true; }; "bodyClassName": { "alias": "bodyClassName"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WebauthnRegisterComponent, "kc-webauthn-register", never, {}, {}, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/angular",
-  "version": "0.0.1-rc.17",
+  "version": "0.0.1-rc.19",
   "peerDependencies": {
     "keycloakify": "^11.2.4",
     "@angular/core": "^18.0.0",
@@ -303,6 +303,12 @@
       "esm": "./esm2022/login/directives/kc-class/keycloakify-angular-login-directives-kc-class.mjs",
       "default": "./fesm2022/keycloakify-angular-login-directives-kc-class.mjs"
     },
+    "./login/providers/keycloakify-angular": {
+      "types": "./login/providers/keycloakify-angular/index.d.ts",
+      "esm2022": "./esm2022/login/providers/keycloakify-angular/keycloakify-angular-login-providers-keycloakify-angular.mjs",
+      "esm": "./esm2022/login/providers/keycloakify-angular/keycloakify-angular-login-providers-keycloakify-angular.mjs",
+      "default": "./fesm2022/keycloakify-angular-login-providers-keycloakify-angular.mjs"
+    },
     "./login/pages/code": {
       "types": "./login/pages/code/index.d.ts",
       "esm2022": "./esm2022/login/pages/code/keycloakify-angular-login-pages-code.mjs",
@@ -519,12 +525,6 @@
       "esm": "./esm2022/login/pages/webauthn-register/keycloakify-angular-login-pages-webauthn-register.mjs",
       "default": "./fesm2022/keycloakify-angular-login-pages-webauthn-register.mjs"
     },
-    "./login/providers/keycloakify-angular": {
-      "types": "./login/providers/keycloakify-angular/index.d.ts",
-      "esm2022": "./esm2022/login/providers/keycloakify-angular/keycloakify-angular-login-providers-keycloakify-angular.mjs",
-      "esm": "./esm2022/login/providers/keycloakify-angular/keycloakify-angular-login-providers-keycloakify-angular.mjs",
-      "default": "./fesm2022/keycloakify-angular-login-providers-keycloakify-angular.mjs"
-    },
     "./login/services/i18n": {
       "types": "./login/services/i18n/index.d.ts",
       "esm2022": "./esm2022/login/services/i18n/keycloakify-angular-login-services-i18n.mjs",
@@ -574,7 +574,7 @@
       "default": "./fesm2022/keycloakify-angular-login-tokens-make-user-confirm-password.mjs"
     }
   },
-  "description": "Angular components for Keycloakify",
+  "description": "Angular Components for Keycloakify!",
   "keywords": [
     "keycloak",
     "angular",

package/src/account/containers/template/template.component.html

@@ -5,7 +5,6 @@
 @let realm = kcContext.realm;
 @let message = kcContext.message;
 @let referrer = kcContext.referrer;
-@let activeLink = active();
 @let isReadyToRender = isReadyToRender$ | async;
 
 @if (isReadyToRender) {
@@ -49,8 +48,8 @@
                         }
                         @if (!!referrer?.url) {
                             <a
-                                [href]="referrer?.url"
                                 id="referrer"
+                                [href]="referrer?.url"
                             >
                                 {{ i18n.msgStr('backTo', referrer?.name) }}
                             </a>
@@ -67,35 +66,35 @@
     <div class="container">
         <div class="bs-sidebar col-sm-3">
             <ul>
-                <li [ngClass]="{ active: activeLink === 'account' }">
+                <li [ngClass]="{ active: active === 'account' }">
                     <a [href]="url.accountUrl">{{ i18n.msgStr('account') }}</a>
                 </li>
                 @if (features.passwordUpdateSupported) {
-                    <li [ngClass]="{ active: activeLink === 'password' }">
+                    <li [ngClass]="{ active: active === 'password' }">
                         <a [href]="url.passwordUrl">{{ i18n.msgStr('password') }}</a>
                     </li>
                 }
-                <li [ngClass]="{ active: activeLink === 'totp' }">
+                <li [ngClass]="{ active: active === 'totp' }">
                     <a [href]="url.totpUrl">{{ i18n.msgStr('authenticator') }}</a>
                 </li>
                 @if (features.identityFederation) {
-                    <li [ngClass]="{ active: activeLink === 'social' }">
+                    <li [ngClass]="{ active: active === 'social' }">
                         <a [href]="url.socialUrl">{{ i18n.msgStr('federatedIdentity') }}</a>
                     </li>
                 }
-                <li [ngClass]="{ active: activeLink === 'sessions' }">
+                <li [ngClass]="{ active: active === 'sessions' }">
                     <a [href]="url.sessionsUrl">{{ i18n.msgStr('sessions') }}</a>
                 </li>
-                <li [ngClass]="{ active: activeLink === 'applications' }">
+                <li [ngClass]="{ active: active === 'applications' }">
                     <a [href]="url.applicationsUrl">{{ i18n.msgStr('applications') }}</a>
                 </li>
                 @if (features.log) {
-                    <li [ngClass]="{ active: activeLink === 'log' }">
+                    <li [ngClass]="{ active: active === 'log' }">
                         <a [href]="url.logUrl">{{ i18n.msgStr('log') }}</a>
                     </li>
                 }
                 @if (realm.userManagedAccessAllowed && features.authorization) {
-                    <li [ngClass]="{ active: activeLink === 'authorization' }">
+                    <li [ngClass]="{ active: active === 'authorization' }">
                         <a [href]="url.resourceUrl">{{ i18n.msgStr('myResources') }}</a>
                     </li>
                 }
@@ -119,7 +118,13 @@
                     ></span>
                 </div>
             }
-            <ng-content select="[content]"></ng-content>
+            @let pageRef = page();
+            @if (!!pageRef) {
+                <kc-dynamic-page-injector
+                    [page]="pageRef"
+                    (componentCreated)="onComponentCreated($event)"
+                />
+            }
         </div>
     </div>
 }

package/src/account/containers/template/template.component.ts

@@ -1,8 +1,23 @@
 import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, forwardRef, inject, input, OnInit, Renderer2 } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    effect,
+    forwardRef,
+    inject,
+    input,
+    OnInit,
+    output,
+    Renderer2,
+    Type,
+    ViewContainerRef
+} from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
 import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+import type { I18n } from '../../i18n';
+import type { KcContext } from '../../KcContext';
 import { AccountResourceInjectorService } from '@keycloakify/angular/account/services/account-resource-injector';
 import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';
 import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';
@@ -11,14 +26,35 @@ import { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import { ClassKey, getKcClsx } from 'keycloakify/account/lib/kcClsx';
 import { Observable } from 'rxjs';
-import type { I18n } from '../../i18n';
-import type { KcContext } from '../../KcContext';
+type ActiveType = 'account' | 'password' | 'totp' | 'social' | 'sessions' | 'applications' | 'log' | 'authorization' | undefined;
+
+@Component({
+    selector: 'kc-dynamic-page-injector',
+    standalone: true,
+    template: ``
+})
+export class DynamicPageInjectorComponent {
+    page = input<Type<unknown>>();
+    componentCreated = output<object>();
+    #vcr = inject<ViewContainerRef>(ViewContainerRef);
+    constructor() {
+        effect(
+            () => {
+                const page = this.page();
+                if (!page) return;
+                const compRef = this.#vcr.createComponent(page);
+                this.componentCreated.emit(compRef.instance as object);
+            },
+            { allowSignalWrites: true }
+        );
+    }
+}
 
 @Component({
-    selector: 'kc-account-template',
+    selector: 'kc-root',
     templateUrl: './template.component.html',
     standalone: true,
-    imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective, NgClass],
+    imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective, NgClass, DynamicPageInjectorComponent],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -30,6 +66,7 @@ import type { KcContext } from '../../KcContext';
 export class TemplateComponent extends ComponentReference implements OnInit {
     i18n = inject<I18n>(ACCOUNT_I18N);
     renderer = inject(Renderer2);
+    #cdr = inject(ChangeDetectorRef);
     meta = inject(Meta);
     title = inject(Title);
     kcContext = inject<KcContext>(KC_ACCOUNT_CONTEXT);
@@ -37,10 +74,12 @@ export class TemplateComponent extends ComponentReference implements OnInit {
     override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
     accountResourceInjectorService = inject(AccountResourceInjectorService);
 
-    active = input<'account' | 'password' | 'totp' | 'social' | 'sessions' | 'applications' | 'log' | 'authorization' | undefined>(undefined);
-
     isReadyToRender$: Observable<boolean>;
 
+    page = input<Type<unknown>>();
+
+    active: ActiveType;
+
     constructor() {
         super();
         this.title.setTitle(this.i18n.msgStr('accountManagementTitle'));
@@ -68,4 +107,12 @@ export class TemplateComponent extends ComponentReference implements OnInit {
             this.renderer.addClass(document.documentElement, klass);
         });
     }
+
+    onComponentCreated(compRef: object) {
+        if ('active' in compRef && compRef.active) {
+            this.active = compRef.active as ActiveType;
+        }
+
+        this.#cdr.markForCheck();
+    }
 }

package/src/account/pages/account/account.component.html

@@ -5,161 +5,157 @@
 @let account = kcContext.account;
 @let referrer = kcContext.referrer;
 
-<kc-account-template [active]="'account'">
-    <ng-container content>
-        <div class="row">
-            <div class="col-md-10">
-                <h2>{{ i18n.msgStr('editAccountHtmlTitle') }}</h2>
-            </div>
-            <div class="col-md-2 subtitle">
-                <span class="subtitle"> <span class="required">*</span> {{ i18n.msgStr('requiredFields') }} </span>
-            </div>
-        </div>
-        <form
-            [action]="url.accountUrl"
-            class="form-horizontal"
-            method="post"
+<div class="row">
+    <div class="col-md-10">
+        <h2>{{ i18n.msgStr('editAccountHtmlTitle') }}</h2>
+    </div>
+    <div class="col-md-2 subtitle">
+        <span class="subtitle"> <span class="required">*</span> {{ i18n.msgStr('requiredFields') }} </span>
+    </div>
+</div>
+<form
+    class="form-horizontal"
+    method="post"
+    [action]="url.accountUrl"
+>
+    <input
+        type="hidden"
+        id="stateChecker"
+        name="stateChecker"
+        [value]="stateChecker"
+    />
+    @if (!realm.registrationEmailAsUsername) {
+        <div
+            class="form-group"
+            [ngClass]="{ 'has-error': messagesPerField.existsError('username') }"
         >
-            <input
-                type="hidden"
-                id="stateChecker"
-                name="stateChecker"
-                [value]="stateChecker"
-            />
-            @if (!realm.registrationEmailAsUsername) {
-                <div
-                    class="form-group"
-                    [ngClass]="{ 'has-error': messagesPerField.existsError('username') }"
+            <div class="col-sm-2 col-md-2">
+                <label
+                    for="username"
+                    class="control-label"
                 >
-                    <div class="col-sm-2 col-md-2">
-                        <label
-                            for="username"
-                            class="control-label"
-                        >
-                            {{ i18n.msgStr('username') }}
-                        </label>
-                        @if (realm.editUsernameAllowed) {
-                            <span class="required">*</span>
-                        }
-                    </div>
+                    {{ i18n.msgStr('username') }}
+                </label>
+                @if (realm.editUsernameAllowed) {
+                    <span class="required">*</span>
+                }
+            </div>
 
-                    <div class="col-sm-10 col-md-10">
-                        <input
-                            type="text"
-                            class="form-control"
-                            id="username"
-                            name="username"
-                            [disabled]="!realm.editUsernameAllowed"
-                            [defaultValue]="account.username ?? ''"
-                        />
-                    </div>
-                </div>
-            }
+            <div class="col-sm-10 col-md-10">
+                <input
+                    type="text"
+                    class="form-control"
+                    id="username"
+                    name="username"
+                    [disabled]="!realm.editUsernameAllowed"
+                    [defaultValue]="account.username ?? ''"
+                />
+            </div>
+        </div>
+    }
 
-            <div
-                class="form-group"
-                [ngClass]="{ 'has-error': messagesPerField.existsError('email') }"
+    <div
+        class="form-group"
+        [ngClass]="{ 'has-error': messagesPerField.existsError('email') }"
+    >
+        <div class="col-sm-2 col-md-2">
+            <label
+                for="email"
+                class="control-label"
             >
-                <div class="col-sm-2 col-md-2">
-                    <label
-                        for="email"
-                        class="control-label"
-                    >
-                        {{ i18n.msgStr('email') }}
-                    </label>
-                    <span class="required">*</span>
-                </div>
+                {{ i18n.msgStr('email') }}
+            </label>
+            <span class="required">*</span>
+        </div>
 
-                <div class="col-sm-10 col-md-10">
-                    <input
-                        type="text"
-                        class="form-control"
-                        id="email"
-                        name="email"
-                        autoFocus
-                        [defaultValue]="account.email ?? ''"
-                    />
-                </div>
-            </div>
+        <div class="col-sm-10 col-md-10">
+            <input
+                type="text"
+                class="form-control"
+                id="email"
+                name="email"
+                autoFocus
+                [defaultValue]="account.email ?? ''"
+            />
+        </div>
+    </div>
 
-            <div
-                class="form-group"
-                [ngClass]="{ 'has-error': messagesPerField.existsError('firstName') }"
+    <div
+        class="form-group"
+        [ngClass]="{ 'has-error': messagesPerField.existsError('firstName') }"
+    >
+        <div class="col-sm-2 col-md-2">
+            <label
+                for="firstName"
+                class="control-label"
             >
-                <div class="col-sm-2 col-md-2">
-                    <label
-                        for="firstName"
-                        class="control-label"
-                    >
-                        {{ i18n.msgStr('firstName') }}
-                    </label>
-                    <span class="required">*</span>
-                </div>
+                {{ i18n.msgStr('firstName') }}
+            </label>
+            <span class="required">*</span>
+        </div>
 
-                <div class="col-sm-10 col-md-10">
-                    <input
-                        type="text"
-                        class="form-control"
-                        id="firstName"
-                        name="firstName"
-                        [defaultValue]="account.firstName"
-                    />
-                </div>
-            </div>
+        <div class="col-sm-10 col-md-10">
+            <input
+                type="text"
+                class="form-control"
+                id="firstName"
+                name="firstName"
+                [defaultValue]="account.firstName"
+            />
+        </div>
+    </div>
 
-            <div
-                class="form-group"
-                [ngClass]="{ 'has-error': messagesPerField.existsError('lastName') }"
+    <div
+        class="form-group"
+        [ngClass]="{ 'has-error': messagesPerField.existsError('lastName') }"
+    >
+        <div class="col-sm-2 col-md-2">
+            <label
+                for="lastName"
+                class="control-label"
             >
-                <div class="col-sm-2 col-md-2">
-                    <label
-                        for="lastName"
-                        class="control-label"
-                    >
-                        {{ i18n.msgStr('lastName') }}
-                    </label>
-                    <span class="required">*</span>
-                </div>
+                {{ i18n.msgStr('lastName') }}
+            </label>
+            <span class="required">*</span>
+        </div>
 
-                <div class="col-sm-10 col-md-10">
-                    <input
-                        type="text"
-                        class="form-control"
-                        id="lastName"
-                        name="lastName"
-                        [defaultValue]="account.lastName ?? ''"
-                    />
-                </div>
-            </div>
+        <div class="col-sm-10 col-md-10">
+            <input
+                type="text"
+                class="form-control"
+                id="lastName"
+                name="lastName"
+                [defaultValue]="account.lastName ?? ''"
+            />
+        </div>
+    </div>
 
-            <div class="form-group">
-                <div
-                    id="kc-form-buttons"
-                    class="col-md-offset-2 col-md-10 submit"
+    <div class="form-group">
+        <div
+            id="kc-form-buttons"
+            class="col-md-offset-2 col-md-10 submit"
+        >
+            <div>
+                @if (referrer) {
+                    <a [href]="referrer?.url">{{ i18n.msgStr('backToApplication') }}</a>
+                }
+                <button
+                    type="submit"
+                    name="submitAction"
+                    value="Save"
+                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+                >
+                    {{ i18n.msgStr('doSave') }}
+                </button>
+                <button
+                    type="submit"
+                    name="submitAction"
+                    value="Cancel"
+                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                 >
-                    <div>
-                        @if (referrer) {
-                            <a [href]="referrer?.url">{{ i18n.msgStr('backToApplication') }}</a>
-                        }
-                        <button
-                            type="submit"
-                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
-                            name="submitAction"
-                            value="Save"
-                        >
-                            {{ i18n.msgStr('doSave') }}
-                        </button>
-                        <button
-                            type="submit"
-                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
-                            name="submitAction"
-                            value="Cancel"
-                        >
-                            {{ i18n.msgStr('doCancel') }}
-                        </button>
-                    </div>
-                </div>
+                    {{ i18n.msgStr('doCancel') }}
+                </button>
             </div>
-        </form>
-    </ng-container>
-</kc-account-template>
+        </div>
+    </div>
+</form>

package/src/account/pages/account/account.component.ts

@@ -3,18 +3,18 @@ import { Component, forwardRef, inject } from '@angular/core';
 import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
 import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
 import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+import type { I18n } from '../../i18n';
+import type { KcContext } from '../../KcContext';
 import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes';
 import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n';
 import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import type { ClassKey } from 'keycloakify/account';
-import type { I18n } from '../../i18n';
-import type { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
     imports: [KcClassDirective, TemplateComponent, NgClass],
-    selector: 'kc-root',
+    selector: 'kc-account',
     templateUrl: 'account.component.html',
     providers: [
         {
@@ -31,4 +31,5 @@ export class AccountComponent extends ComponentReference {
     override additionalClasses: Partial<Record<ClassKey, string>> = {
         kcBodyClass: `${this.classes?.kcBodyClass} user`
     };
+    active = 'account';
 }