@keycloakify/angular 0.0.1-rc.23 → 0.0.1-rc.25

package/src/bin/eject-page.ts

@@ -61,14 +61,23 @@ export async function command(params: { buildContext: BuildContext }) {
     console.log(chalk.cyan('Select the page you want to customize:'));
 
     const templateValue = 'template.ftl (Layout common to every page)';
+    const userProfileFormFieldsValue =
+        'user-profile-commons.ftl (Renders the form of the register.ftl, login-update-profile.ftl, update-email.ftl and idp-review-user-profile.ftl)';
 
     const { value: pageIdOrComponent } = await cliSelect<
-        LoginThemePageId | AccountThemePageId | typeof templateValue
+        | LoginThemePageId
+        | AccountThemePageId
+        | typeof templateValue
+        | typeof userProfileFormFieldsValue
     >({
         values: (() => {
             switch (themeType) {
                 case 'login':
-                    return [templateValue, ...LOGIN_THEME_PAGE_IDS];
+                    return [
+                        templateValue,
+                        userProfileFormFieldsValue,
+                        ...LOGIN_THEME_PAGE_IDS
+                    ];
                 case 'account':
                     return [templateValue, ...ACCOUNT_THEME_PAGE_IDS];
             }
@@ -85,6 +94,10 @@ export async function command(params: { buildContext: BuildContext }) {
             return pathJoin('containers', 'template');
         }
 
+        if (pageIdOrComponent === userProfileFormFieldsValue) {
+            return pathJoin('components', 'user-profile-form-fields');
+        }
+
         return pathJoin('pages', pageIdOrComponent.replace(/\.ftl$/, ''));
     })();
 
@@ -213,7 +226,10 @@ export async function command(params: { buildContext: BuildContext }) {
     }
 
     edit_KcPage: {
-        if (pageIdOrComponent !== templateValue) {
+        if (
+            pageIdOrComponent !== templateValue &&
+            pageIdOrComponent !== userProfileFormFieldsValue
+        ) {
             break edit_KcPage;
         }
 
@@ -281,6 +297,7 @@ export async function command(params: { buildContext: BuildContext }) {
                 `+      return {`,
                 `+        PageComponent: (await import('./${componentDirRelativeToThemeTypePath.split(pathSep).join('/')}')).${kebabCaseToCamelCase(capitalize(pageId).replace(/\.ftl$/, ''))}Component,`,
                 `+        TemplateComponent,`,
+                ...(themeType === 'login' ? [`+        UserProfileFormFieldsComponent,`] : []),
                 ...(themeType === 'login' ? [`+        doMakeUserConfirmPassword,`] : []),
                 `+        doUseDefaultCss,`,
                 `+        classes,`,
@@ -290,6 +307,7 @@ export async function command(params: { buildContext: BuildContext }) {
                 `       return {`,
                 `         PageComponent: await getDefaultPageComponent(pageId),`,
                 `         TemplateComponent,`,
+                ...(themeType === 'login' ? [`         UserProfileFormFieldsComponent,`] : []),
                 ...(themeType === 'login' ? [`         doMakeUserConfirmPassword,`] : []),
                 `         doUseDefaultCss,`,
                 `         classes,`,

package/src/bin/update-kc-gen.ts

@@ -88,7 +88,10 @@ export function command(params: { buildContext: BuildContext }) {
                     `                        doUseDefaultCss,`,
                     `                        classes,`,
                     ...(themeType === 'login'
-                        ? [`                        doMakeUserConfirmPassword,`]
+                        ? [
+                              `                        UserProfileFormFieldsComponent,`,
+                              `                        doMakeUserConfirmPassword,`
+                          ]
                         : []),
                     `                    },`,
                     `                ] = await Promise.all([`,
@@ -100,6 +103,7 @@ export function command(params: { buildContext: BuildContext }) {
                     `                const appRef = await bootstrapApplication({`,
                     `                    KcRootComponent: TemplateComponent,`,
                     `                    kcProvider: provideKeycloakifyAngular({`,
+                    `                        kcContext,`,
                     `                        classes,`,
                     `                        getI18n,`,
                     `                        doUseDefaultCss,`,
@@ -113,6 +117,16 @@ export function command(params: { buildContext: BuildContext }) {
                     `                    if ("page" in componentRef.instance) {`,
                     `                        componentRef.setInput("page", PageComponent);`,
                     `                    }`,
+                    ...(themeType === 'login'
+                        ? [
+                              `                    if ("userProfileFormFields" in componentRef.instance) {`,
+                              `                        componentRef.setInput(`,
+                              `                            "userProfileFormFields",`,
+                              `                            UserProfileFormFieldsComponent`,
+                              `                        );`,
+                              `                    }`
+                          ]
+                        : []),
                     `                });`,
                     `            }`,
                     `            break;`

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

@@ -163,6 +163,7 @@
                     @if (!!pageRef) {
                         <kc-dynamic-page-injector
                             [page]="pageRef"
+                            [userProfileFormFields]="userProfileFormFields()"
                             (componentCreated)="onComponentCreated($event)"
                         />
                     }

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

@@ -37,14 +37,19 @@ import { Observable } from 'rxjs';
 })
 export class DynamicPageInjectorComponent {
     page = input<Type<unknown>>();
+    userProfileFormFields = input<Type<unknown>>();
     componentCreated = output<object>();
     #vcr = inject<ViewContainerRef>(ViewContainerRef);
     constructor() {
         effect(
             () => {
                 const page = this.page();
+                const userProfileFormFields = this.userProfileFormFields();
                 if (!page) return;
                 const compRef = this.#vcr.createComponent(page);
+                if ('userProfileFormFields' in (compRef.instance as object) && userProfileFormFields) {
+                    compRef.setInput('userProfileFormFields', userProfileFormFields);
+                }
                 this.componentCreated.emit(compRef.instance as object);
             },
             { allowSignalWrites: true }
@@ -85,6 +90,7 @@ export class TemplateComponent extends ComponentReference implements OnInit {
     isReadyToRender$: Observable<boolean>;
 
     page = input<Type<unknown>>();
+    userProfileFormFields = input<Type<unknown>>();
     headerNode: Signal<TemplateRef<HTMLElement>> | undefined;
     infoNode: Signal<TemplateRef<HTMLElement>> | undefined;
     socialProvidersNode: Signal<TemplateRef<HTMLElement>> | undefined;

package/src/login/login.ts

@@ -10,5 +10,6 @@ export type KcPage = {
     TemplateComponent: Type<unknown>;
     doUseDefaultCss: boolean;
     classes: { [key in ClassKey]?: string };
+    UserProfileFormFieldsComponent: Type<unknown>;
     doMakeUserConfirmPassword: boolean;
 };

package/src/login/pages/code/code.component.html

@@ -1,6 +1,7 @@
 @let code = kcContext.code;
 
 <ng-template #headerNode>
+    @let code = kcContext.code;
     @if (code.success) {
         {{ i18n.msgStr('codeSuccessTitle') }}
     } @else {

package/src/login/pages/delete-credential/delete-credential.component.html

@@ -1,33 +1,33 @@
 @let url = kcContext.url;
 @let credentialLabel = kcContext.credentialLabel;
 <ng-template #headerNode>
+    @let credentialLabel = kcContext.credentialLabel;
     {{ i18n.msgStr('deleteCredentialTitle', credentialLabel) }}
 </ng-template>
-<ng-container content>
-    <div id="kc-delete-text">
-        {{ i18n.msgStr('deleteCredentialMessage', credentialLabel) }}
-    </div>
 
-    <form
-        class="form-actions"
-        method="post"
-        [action]="url.loginAction"
-    >
-        <input
-            name="accept"
-            id="kc-accept"
-            type="submit"
-            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
-            [value]="i18n.msgStr('doConfirmDelete')"
-        />
+<div id="kc-delete-text">
+    {{ i18n.msgStr('deleteCredentialMessage', credentialLabel) }}
+</div>
 
-        <input
-            name="cancel-aia"
-            id="kc-decline"
-            type="submit"
-            [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
-            [value]="i18n.msgStr('doCancel')"
-        />
-    </form>
-    <div class="clearfix"></div>
-</ng-container>
+<form
+    class="form-actions"
+    method="post"
+    [action]="url.loginAction"
+>
+    <input
+        name="accept"
+        id="kc-accept"
+        type="submit"
+        [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+        [value]="i18n.msgStr('doConfirmDelete')"
+    />
+
+    <input
+        name="cancel-aia"
+        id="kc-decline"
+        type="submit"
+        [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
+        [value]="i18n.msgStr('doCancel')"
+    />
+</form>
+<div class="clearfix"></div>

package/src/login/pages/error/error.component.html

@@ -4,20 +4,19 @@
 <ng-template #headerNode>
     {{ i18n.msgStr('errorTitle') }}
 </ng-template>
-<ng-container content>
-    <div id="kc-error-message">
-        <p
-            class="instruction"
-            [innerHTML]="message.summary | kcSanitize: 'html'"
-        ></p>
-        @if (!skipLink && !!client?.baseUrl) {
-            <p>
-                <a
-                    id="backToApplication"
-                    [href]="client.baseUrl"
-                    [innerHTML]="i18n.msgStr('backToApplication') | kcSanitize: 'html'"
-                ></a>
-            </p>
-        }
-    </div>
-</ng-container>
+
+<div id="kc-error-message">
+    <p
+        class="instruction"
+        [innerHTML]="message.summary | kcSanitize: 'html'"
+    ></p>
+    @if (!skipLink && !!client?.baseUrl) {
+        <p>
+            <a
+                id="backToApplication"
+                [href]="client.baseUrl"
+                [innerHTML]="i18n.msgStr('backToApplication') | kcSanitize: 'html'"
+            ></a>
+        </p>
+    }
+</div>

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

@@ -9,7 +9,7 @@
     [kcClass]="'kcFormClass'"
     [action]="url.loginAction"
 >
-    <kc-user-profile-form-fields />
+    <ng-container [ngComponentOutlet]="userProfileFormFields() ?? null" />
     <div [kcClass]="'kcFormGroupClass'">
         <div
             id="kc-form-options"

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

@@ -1,9 +1,9 @@
 import { NgComponentOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, forwardRef, inject, signal, type TemplateRef, viewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal, type TemplateRef, Type, viewChild } from '@angular/core';
 import { takeUntilDestroyed } 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 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';
@@ -15,7 +15,7 @@ import type { ClassKey } from 'keycloakify/login/lib/kcClsx';
 
 @Component({
     standalone: true,
-    imports: [KcClassDirective, NgComponentOutlet, UserProfileFormFieldsComponent],
+    imports: [KcClassDirective, NgComponentOutlet],
     selector: 'kc-idp-review-user-profile',
     templateUrl: 'idp-review-user-profile.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -45,6 +45,7 @@ export class IdpReviewUserProfileComponent extends ComponentReference {
     infoNode? = viewChild<TemplateRef<HTMLElement>>('infoNode');
     socialProvidersNode? = viewChild<TemplateRef<HTMLElement>>('socialProvidersNode');
 
+    userProfileFormFields = input<Type<UserProfileFormFieldsComponent>>();
     isFormSubmittable = signal(false);
 
     constructor() {

package/src/login/pages/info/info.component.html

@@ -2,10 +2,10 @@
 @let actionUri = kcContext.actionUri;
 @let pageRedirectUri = kcContext.pageRedirectUri;
 @let client = kcContext.client;
-@let messageHeader = kcContext.messageHeader;
-@let message = kcContext.message;
 
 <ng-template #headerNode>
+    @let messageHeader = kcContext.messageHeader;
+    @let message = kcContext.message;
     <span [innerHTML]="messageHeader ?? i18n.advancedMsgStr(message.summary) | kcSanitize: 'html'"> </span>
 </ng-template>
 <div id="kc-info-message">

package/src/login/pages/login/login.component.html

@@ -1,5 +1,4 @@
 @let realm = kcContext.realm;
-@let social = kcContext.social;
 @let usernameHidden = kcContext.usernameHidden;
 @let auth = kcContext.auth;
 @let messagesPerField = kcContext.messagesPerField;
@@ -10,6 +9,7 @@
     {{ i18n.msgStr('loginAccountTitle') }}
 </ng-template>
 <ng-template #infoNode>
+    @let url = kcContext.url;
     <div id="kc-registration-container">
         <div id="kc-registration">
             <span>
@@ -25,6 +25,8 @@
     </div>
 </ng-template>
 <ng-template #socialProvidersNode>
+    @let realm = kcContext.realm;
+    @let social = kcContext.social;
     @if (!!realm?.password && !!social?.providers?.length) {
         <div
             id="kc-social-providers"

package/src/login/pages/login-idp-link-email/login-idp-link-email.component.html

@@ -2,7 +2,9 @@
 @let brokerContext = kcContext.brokerContext;
 @let realm = kcContext.realm;
 @let url = kcContext.url;
+
 <ng-template #headerNode>
+    @let idpAlias = kcContext.idpAlias;
     {{ i18n.msgStr('emailLinkIdpTitle', idpAlias) }}
 </ng-template>
 <p

package/src/login/pages/login-oauth-grant/login-oauth-grant.component.html

@@ -3,6 +3,7 @@
 @let url = kcContext.url;
 
 <ng-template #headerNode>
+    @let client = kcContext.client;
     @if (client.attributes['logoUri']) {
         <img
             alt=""

package/src/login/pages/login-page-expired/login-page-expired.component.html

@@ -1,28 +1,27 @@
 @let url = kcContext.url;
 
-<ng-container #headerNode>
+<ng-template #headerNode>
     {{ i18n.msgStr('pageExpiredTitle') }}
-</ng-container>
-<ng-container content>
-    <p
-        id="instruction1"
-        class="instruction"
+</ng-template>
+
+<p
+    id="instruction1"
+    class="instruction"
+>
+    {{ i18n.msgStr('pageExpiredMsg1') }}
+    <a
+        id="loginRestartLink"
+        [href]="url.loginRestartFlowUrl"
+    >
+        {{ i18n.msgStr('doClickHere') }}
+    </a>
+    .<br />
+    {{ i18n.msgStr('pageExpiredMsg2') }}
+    <a
+        id="loginContinueLink"
+        [href]="url.loginAction"
     >
-        {{ i18n.msgStr('pageExpiredMsg1') }}
-        <a
-            id="loginRestartLink"
-            [href]="url.loginRestartFlowUrl"
-        >
-            {{ i18n.msgStr('doClickHere') }}
-        </a>
-        .<br />
-        {{ i18n.msgStr('pageExpiredMsg2') }}
-        <a
-            id="loginContinueLink"
-            [href]="url.loginAction"
-        >
-            {{ i18n.msgStr('doClickHere') }}
-        </a>
-        .
-    </p>
-</ng-container>
+        {{ i18n.msgStr('doClickHere') }}
+    </a>
+    .
+</p>