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

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
-            class="form-horizontal"
-            method="post"
-            [action]="url.accountUrl"
+<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"
-                            name="submitAction"
-                            value="Save"
-                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
-                        >
-                            {{ i18n.msgStr('doSave') }}
-                        </button>
-                        <button
-                            type="submit"
-                            name="submitAction"
-                            value="Cancel"
-                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
-                        >
-                            {{ 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';
 }