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

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

@@ -4,255 +4,251 @@
 @let stateChecker = kcContext.stateChecker;
 @let totp = kcContext.totp;
 
-<kc-account-template [active]="'totp'">
-    <ng-container content>
-        <div class="row">
-            <div class="col-md-10">
-                <h2>{{ i18n.msgStr('authenticatorTitle') }}</h2>
-            </div>
-            @if (totp.otpCredentials.length) {
-                <div class="subtitle col-md-2">
-                    <span class="required">*</span>
-                    {{ i18n.msgStr('requiredFields') }}
-                </div>
-            }
+<div class="row">
+    <div class="col-md-10">
+        <h2>{{ i18n.msgStr('authenticatorTitle') }}</h2>
+    </div>
+    @if (totp.otpCredentials.length) {
+        <div class="subtitle col-md-2">
+            <span class="required">*</span>
+            {{ i18n.msgStr('requiredFields') }}
         </div>
-        @if (totp.enabled) {
-            <table class="table table-bordered table-striped">
-                <thead>
+    }
+</div>
+@if (totp.enabled) {
+    <table class="table table-bordered table-striped">
+        <thead>
+            @if (totp.otpCredentials.length > 1) {
+                <tr>
+                    <th [colSpan]="4">{{ i18n.msgStr('configureAuthenticators') }}</th>
+                </tr>
+            } @else {
+                <tr>
+                    <th [colSpan]="3">{{ i18n.msgStr('configureAuthenticators') }}</th>
+                </tr>
+            }
+        </thead>
+        <tbody>
+            @for (credential of totp.otpCredentials; track credential; let index = $index) {
+                <tr>
+                    <td class="provider">{{ i18n.msgStr('mobile') }}</td>
                     @if (totp.otpCredentials.length > 1) {
-                        <tr>
-                            <th [colSpan]="4">{{ i18n.msgStr('configureAuthenticators') }}</th>
-                        </tr>
-                    } @else {
-                        <tr>
-                            <th [colSpan]="3">{{ i18n.msgStr('configureAuthenticators') }}</th>
-                        </tr>
-                    }
-                </thead>
-                <tbody>
-                    @for (credential of totp.otpCredentials; track credential; let index = $index) {
-                        <tr>
-                            <td class="provider">{{ i18n.msgStr('mobile') }}</td>
-                            @if (totp.otpCredentials.length > 1) {
-                                <td class="provider">{{ credential.id }}</td>
-                            }
-                            <td class="provider">{{ credential.userLabel || '' }}</td>
-                            <td class="action">
-                                <form
-                                    method="post"
-                                    class="form-inline"
-                                    [action]="url.totpUrl"
-                                >
-                                    <input
-                                        type="hidden"
-                                        id="stateChecker"
-                                        name="stateChecker"
-                                        [value]="stateChecker"
-                                    />
-                                    <input
-                                        type="hidden"
-                                        id="submitAction"
-                                        name="submitAction"
-                                        value="Delete"
-                                    />
-                                    <input
-                                        type="hidden"
-                                        id="credentialId"
-                                        name="credentialId"
-                                        [value]="credential.id"
-                                    />
-                                    <button
-                                        class="btn btn-default"
-                                        [id]="'remove-mobile-' + index"
-                                    >
-                                        <i class="pficon pficon-delete"></i>
-                                    </button>
-                                </form>
-                            </td>
-                        </tr>
-                    }
-                </tbody>
-            </table>
-        } @else {
-            <div>
-                <hr />
-                <ol id="kc-totp-settings">
-                    <li>
-                        <p>{{ i18n.msgStr('totpStep1') }}</p>
-
-                        <ul id="kc-totp-supported-apps">
-                            @for (app of totp.supportedApplications; track app) {
-                                <li>{{ i18n.advancedMsgStr(app) }}</li>
-                            }
-                        </ul>
-                    </li>
-                    @if (mode && mode === 'manual') {
-                        <li>
-                            <p>{{ i18n.msgStr('totpManualStep2') }}</p>
-                            <p>
-                                <span id="kc-totp-secret-key">{{ totp.totpSecretEncoded }}</span>
-                            </p>
-                            <p>
-                                <a
-                                    id="mode-barcode"
-                                    [href]="totp.qrUrl"
-                                >
-                                    {{ i18n.msgStr('totpScanBarcode') }}
-                                </a>
-                            </p>
-                        </li>
-                        <li>
-                            <p>{{ i18n.msgStr('totpManualStep3') }}</p>
-                            <ul>
-                                <li id="kc-totp-type">{{ i18n.msgStr('totpType') }}: {{ i18n.msgStr($any('totp.' + totp.policy.type)) }}</li>
-                                <li id="kc-totp-algorithm">{{ i18n.msgStr('totpAlgorithm') }}: {{ totp.policy.getAlgorithmKey() }}</li>
-                                <li id="kc-totp-digits">{{ i18n.msgStr('totpDigits') }}: {{ totp.policy.digits }}</li>
-                                @if (totp.policy.type === 'totp') {
-                                    <li id="kc-totp-period">{{ i18n.msgStr('totpInterval') }}: {{ totp.policy.period }}</li>
-                                } @else {
-                                    <li id="kc-totp-counter">{{ i18n.msgStr('totpCounter') }}: {{ totp.policy.initialCounter }}</li>
-                                }
-                            </ul>
-                        </li>
-                    } @else {
-                        <li>
-                            <p>{{ i18n.msgStr('totpStep2') }}</p>
-                            <p>
-                                <img
-                                    id="kc-totp-secret-qr-code"
-                                    alt="Figure: Barcode"
-                                    [src]="'data:image/png;base64, ' + totp.totpSecretQrCode"
-                                />
-                            </p>
-                            <p>
-                                <a
-                                    id="mode-manual"
-                                    [href]="totp.manualUrl"
-                                >
-                                    {{ i18n.msgStr('totpUnableToScan') }}
-                                </a>
-                            </p>
-                        </li>
+                        <td class="provider">{{ credential.id }}</td>
                     }
-                    <li>
-                        <p>{{ i18n.msgStr('totpStep3') }}</p>
-                        <p>{{ i18n.msgStr('totpStep3DeviceName') }}</p>
-                    </li>
-                </ol>
-                <hr />
-                <form
-                    id="kc-totp-settings-form"
-                    method="post"
-                    [action]="url.totpUrl"
-                    [kcClass]="'kcFormClass'"
-                >
-                    <input
-                        type="hidden"
-                        id="stateChecker"
-                        name="stateChecker"
-                        [value]="stateChecker"
-                    />
-                    <div [kcClass]="'kcFormGroupClass'">
-                        <div class="col-sm-2 col-md-2">
-                            <label
-                                for="totp"
-                                class="control-label"
-                            >
-                                {{ i18n.msgStr('authenticatorCode') }}
-                            </label>
-                            <span class="required">*</span>
-                        </div>
-                        <div class="col-sm-10 col-md-10">
-                            <input
-                                type="text"
-                                id="totp"
-                                name="totp"
-                                autoComplete="off"
-                                [kcClass]="'kcInputClass'"
-                                [attr.aria-invalid]="messagesPerField.existsError('totp')"
-                            />
-                            @if (messagesPerField.existsError('totp')) {
-                                <span
-                                    id="input-error-otp-code"
-                                    aria-live="polite"
-                                    [kcClass]="'kcInputErrorMessageClass'"
-                                    [innerHTML]="messagesPerField.get('totp') | kcSanitize: 'html'"
-                                ></span>
-                            }
-                        </div>
-                        <input
-                            type="hidden"
-                            id="totpSecret"
-                            name="totpSecret"
-                            [value]="totp.totpSecret"
-                        />
-                        @if (mode) {
+                    <td class="provider">{{ credential.userLabel || '' }}</td>
+                    <td class="action">
+                        <form
+                            method="post"
+                            class="form-inline"
+                            [action]="url.totpUrl"
+                        >
                             <input
                                 type="hidden"
-                                id="mode"
-                                [value]="mode"
+                                id="stateChecker"
+                                name="stateChecker"
+                                [value]="stateChecker"
                             />
-                        }
-                    </div>
-
-                    <div [kcClass]="'kcFormGroupClass'">
-                        <div class="col-sm-2 col-md-2">
-                            <label
-                                for="userLabel"
-                                [kcClass]="'kcLabelClass'"
-                            >
-                                {{ i18n.msgStr('totpDeviceName') }}
-                            </label>
-                            @if (totp.otpCredentials.length >= 1) {
-                                <span class="required">*</span>
-                            }
-                        </div>
-                        <div class="col-sm-10 col-md-10">
                             <input
-                                type="text"
-                                id="userLabel"
-                                name="userLabel"
-                                autoComplete="off"
-                                [kcClass]="'kcInputClass'"
-                                [attr.aria-invalid]="messagesPerField.existsError('userLabel')"
+                                type="hidden"
+                                id="submitAction"
+                                name="submitAction"
+                                value="Delete"
                             />
-                            @if (messagesPerField.existsError('userLabel')) {
-                                <span
-                                    id="input-error-otp-label"
-                                    aria-live="polite"
-                                    [kcClass]="'kcInputErrorMessageClass'"
-                                    [innerHTML]="messagesPerField.get('userLabel') | kcSanitize: 'html'"
-                                ></span>
-                            }
-                        </div>
-                    </div>
-
-                    <div
-                        id="kc-form-buttons"
-                        class="text-right"
-                        [kcClass]="'kcFormGroupClass'"
-                    >
-                        <div [kcClass]="'kcInputWrapperClass'">
                             <input
-                                type="submit"
-                                id="saveTOTPBtn"
-                                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
-                                [value]="i18n.msgStr('doSave')"
+                                type="hidden"
+                                id="credentialId"
+                                name="credentialId"
+                                [value]="credential.id"
                             />
                             <button
-                                type="submit"
-                                id="cancelTOTPBtn"
-                                name="submitAction"
-                                value="Cancel"
-                                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
+                                class="btn btn-default"
+                                [id]="'remove-mobile-' + index"
                             >
-                                {{ i18n.msgStr('doCancel') }}
+                                <i class="pficon pficon-delete"></i>
                             </button>
-                        </div>
-                    </div>
-                </form>
+                        </form>
+                    </td>
+                </tr>
+            }
+        </tbody>
+    </table>
+} @else {
+    <div>
+        <hr />
+        <ol id="kc-totp-settings">
+            <li>
+                <p>{{ i18n.msgStr('totpStep1') }}</p>
+
+                <ul id="kc-totp-supported-apps">
+                    @for (app of totp.supportedApplications; track app) {
+                        <li>{{ i18n.advancedMsgStr(app) }}</li>
+                    }
+                </ul>
+            </li>
+            @if (mode && mode === 'manual') {
+                <li>
+                    <p>{{ i18n.msgStr('totpManualStep2') }}</p>
+                    <p>
+                        <span id="kc-totp-secret-key">{{ totp.totpSecretEncoded }}</span>
+                    </p>
+                    <p>
+                        <a
+                            id="mode-barcode"
+                            [href]="totp.qrUrl"
+                        >
+                            {{ i18n.msgStr('totpScanBarcode') }}
+                        </a>
+                    </p>
+                </li>
+                <li>
+                    <p>{{ i18n.msgStr('totpManualStep3') }}</p>
+                    <ul>
+                        <li id="kc-totp-type">{{ i18n.msgStr('totpType') }}: {{ i18n.msgStr($any('totp.' + totp.policy.type)) }}</li>
+                        <li id="kc-totp-algorithm">{{ i18n.msgStr('totpAlgorithm') }}: {{ totp.policy.getAlgorithmKey() }}</li>
+                        <li id="kc-totp-digits">{{ i18n.msgStr('totpDigits') }}: {{ totp.policy.digits }}</li>
+                        @if (totp.policy.type === 'totp') {
+                            <li id="kc-totp-period">{{ i18n.msgStr('totpInterval') }}: {{ totp.policy.period }}</li>
+                        } @else {
+                            <li id="kc-totp-counter">{{ i18n.msgStr('totpCounter') }}: {{ totp.policy.initialCounter }}</li>
+                        }
+                    </ul>
+                </li>
+            } @else {
+                <li>
+                    <p>{{ i18n.msgStr('totpStep2') }}</p>
+                    <p>
+                        <img
+                            id="kc-totp-secret-qr-code"
+                            alt="Figure: Barcode"
+                            [src]="'data:image/png;base64, ' + totp.totpSecretQrCode"
+                        />
+                    </p>
+                    <p>
+                        <a
+                            id="mode-manual"
+                            [href]="totp.manualUrl"
+                        >
+                            {{ i18n.msgStr('totpUnableToScan') }}
+                        </a>
+                    </p>
+                </li>
+            }
+            <li>
+                <p>{{ i18n.msgStr('totpStep3') }}</p>
+                <p>{{ i18n.msgStr('totpStep3DeviceName') }}</p>
+            </li>
+        </ol>
+        <hr />
+        <form
+            id="kc-totp-settings-form"
+            method="post"
+            [action]="url.totpUrl"
+            [kcClass]="'kcFormClass'"
+        >
+            <input
+                type="hidden"
+                id="stateChecker"
+                name="stateChecker"
+                [value]="stateChecker"
+            />
+            <div [kcClass]="'kcFormGroupClass'">
+                <div class="col-sm-2 col-md-2">
+                    <label
+                        for="totp"
+                        class="control-label"
+                    >
+                        {{ i18n.msgStr('authenticatorCode') }}
+                    </label>
+                    <span class="required">*</span>
+                </div>
+                <div class="col-sm-10 col-md-10">
+                    <input
+                        type="text"
+                        id="totp"
+                        name="totp"
+                        autoComplete="off"
+                        [kcClass]="'kcInputClass'"
+                        [attr.aria-invalid]="messagesPerField.existsError('totp')"
+                    />
+                    @if (messagesPerField.existsError('totp')) {
+                        <span
+                            id="input-error-otp-code"
+                            aria-live="polite"
+                            [kcClass]="'kcInputErrorMessageClass'"
+                            [innerHTML]="messagesPerField.get('totp') | kcSanitize: 'html'"
+                        ></span>
+                    }
+                </div>
+                <input
+                    type="hidden"
+                    id="totpSecret"
+                    name="totpSecret"
+                    [value]="totp.totpSecret"
+                />
+                @if (mode) {
+                    <input
+                        type="hidden"
+                        id="mode"
+                        [value]="mode"
+                    />
+                }
+            </div>
+
+            <div [kcClass]="'kcFormGroupClass'">
+                <div class="col-sm-2 col-md-2">
+                    <label
+                        for="userLabel"
+                        [kcClass]="'kcLabelClass'"
+                    >
+                        {{ i18n.msgStr('totpDeviceName') }}
+                    </label>
+                    @if (totp.otpCredentials.length >= 1) {
+                        <span class="required">*</span>
+                    }
+                </div>
+                <div class="col-sm-10 col-md-10">
+                    <input
+                        type="text"
+                        id="userLabel"
+                        name="userLabel"
+                        autoComplete="off"
+                        [kcClass]="'kcInputClass'"
+                        [attr.aria-invalid]="messagesPerField.existsError('userLabel')"
+                    />
+                    @if (messagesPerField.existsError('userLabel')) {
+                        <span
+                            id="input-error-otp-label"
+                            aria-live="polite"
+                            [kcClass]="'kcInputErrorMessageClass'"
+                            [innerHTML]="messagesPerField.get('userLabel') | kcSanitize: 'html'"
+                        ></span>
+                    }
+                </div>
+            </div>
+
+            <div
+                id="kc-form-buttons"
+                class="text-right"
+                [kcClass]="'kcFormGroupClass'"
+            >
+                <div [kcClass]="'kcInputWrapperClass'">
+                    <input
+                        type="submit"
+                        id="saveTOTPBtn"
+                        [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+                        [value]="i18n.msgStr('doSave')"
+                    />
+                    <button
+                        type="submit"
+                        id="cancelTOTPBtn"
+                        name="submitAction"
+                        value="Cancel"
+                        [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
+                    >
+                        {{ i18n.msgStr('doCancel') }}
+                    </button>
+                </div>
             </div>
-        }
-    </ng-container>
-</kc-account-template>
+        </form>
+    </div>
+}

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

@@ -3,19 +3,19 @@ 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 { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
 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, KcSanitizePipe, NgClass],
-    selector: 'kc-root',
+    selector: 'kc-totp',
     templateUrl: 'totp.component.html',
     providers: [
         {
@@ -29,4 +29,5 @@ export class TotpComponent extends ComponentReference {
     kcContext = inject<Extract<KcContext, { pageId: 'totp.ftl' }>>(KC_ACCOUNT_CONTEXT);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
     override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    active = 'totp';
 }

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

@@ -80,7 +80,10 @@
                 <ng-template #node>
                     @if (auth && !auth.showUsername && !auth.showResetCredentials) {
                         <h1 id="kc-page-title">
-                            <ng-content select="[headerNode]" />
+                            @let header = headerNode && headerNode();
+                            @if (header) {
+                                <ng-container [ngTemplateOutlet]="header" />
+                            }
                         </h1>
                     } @else {
                         <div
@@ -104,7 +107,7 @@
                     }
                 </ng-template>
 
-                @if (displayRequiredFields()) {
+                @if (displayRequiredFields) {
                     <div [kcClass]="'kcContentWrapperClass'">
                         <div
                             class="subtitle"
@@ -127,7 +130,7 @@
             <div id="kc-content">
                 <div id="kc-content-wrapper">
                     <!-- Message display -->
-                    @if (displayMessage() && message && (message.type !== 'warning' || !isAppInitiatedAction)) {
+                    @if (displayMessage && message && (message.type !== 'warning' || !isAppInitiatedAction)) {
                         <div
                             [kcClass]="'kcAlertClass'"
                             [ngClass]="message.type === 'error' ? 'pf-m-danger' : 'pf-m-' + message.type"
@@ -156,7 +159,13 @@
                         </div>
                     }
                     <!-- Content -->
-                    <ng-content select="[content]" />
+                    @let pageRef = page();
+                    @if (!!pageRef) {
+                        <kc-dynamic-page-injector
+                            [page]="pageRef"
+                            (componentCreated)="onComponentCreated($event)"
+                        />
+                    }
                     @if (!!auth && auth?.showTryAnotherWayLink) {
                         <form
                             id="kc-select-try-another-way-form"
@@ -180,10 +189,12 @@
                             </div>
                         </form>
                     }
-
-                    <ng-content select="[socialProvidersNode]" />
+                    @let socialProviders = socialProvidersNode && socialProvidersNode();
+                    @if (socialProviders) {
+                        <ng-container [ngTemplateOutlet]="socialProviders" />
+                    }
                     <!-- Info display -->
-                    @if (displayInfo()) {
+                    @if (displayInfo) {
                         <div
                             id="kc-info"
                             [kcClass]="'kcSignUpClass'"
@@ -192,7 +203,10 @@
                                 id="kc-info-wrapper"
                                 [kcClass]="'kcInfoAreaWrapperClass'"
                             >
-                                <ng-content select="[infoNode]" />
+                                @let info = infoNode && infoNode();
+                                @if (info) {
+                                    <ng-container [ngTemplateOutlet]="info" />
+                                }
                             </div>
                         </div>
                     }