@keycloakify/angular 0.0.1-rc.0

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

@@ -0,0 +1,92 @@
+import { DOCUMENT } from "@angular/common";
+import {
+    APP_INITIALIZER,
+    InjectionToken,
+    LOCALE_ID,
+    makeEnvironmentProviders
+} from "@angular/core";
+import { I18n } from "../i18n";
+import { I18nService } from "../services";
+
+export const I18N = new InjectionToken<I18n>("i18n");
+export const KC_CONTEXT = new InjectionToken<KcContext>("keycloak context");
+export const USE_DEFAULT_CSS = new InjectionToken<boolean>("use default css");
+export const CLASSES = new InjectionToken<{ [key in ClassKey]?: string }>("classes");
+export const DO_MAKE_USER_CONFIRM_PASSWORD = new InjectionToken<boolean>(
+    "doMakeUserConfirmPassword"
+);
+
+type ClassKey =
+    | import("keycloakify/login/lib/kcClsx").ClassKey
+    | import("keycloakify/account/lib/kcClsx").ClassKey;
+type KcContextLike =
+    | import("keycloakify/login/i18n/noJsx").KcContextLike
+    | import("keycloakify/account/i18n/noJsx").KcContextLike;
+type KcContext =
+    | import("keycloakify/login/KcContext").KcContext
+    | import("keycloakify/account/KcContext").KcContext;
+
+export type KeycloakifyAngularConfig = {
+    doMakeUserConfirmPassword?: boolean;
+    doUseDefaultCss?: boolean;
+    classes?: { [key in ClassKey]?: string };
+    getI18n: (params: { kcContext: KcContextLike }) => {
+        i18n: unknown;
+        prI18n_currentLanguage: Promise<unknown> | undefined;
+    };
+};
+
+export const provideKeycloakifyAngular = (config: KeycloakifyAngularConfig) =>
+    makeEnvironmentProviders([
+        {
+            provide: KC_CONTEXT,
+            useValue: window.kcContext
+        },
+        {
+            provide: DO_MAKE_USER_CONFIRM_PASSWORD,
+            useValue: config?.doMakeUserConfirmPassword ?? true
+        },
+        {
+            provide: LOCALE_ID,
+            useFactory: (document: Document) => {
+                return document.documentElement.lang ?? "en";
+            },
+            deps: [DOCUMENT]
+        },
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory:
+                (
+                    i18nService: I18nService<ReturnType<typeof config.getI18n>["i18n"]>,
+                    kcContext: KcContext
+                ) =>
+                async () => {
+                    const getI18n = config.getI18n;
+
+                    const { i18n, prI18n_currentLanguage } = getI18n({
+                        kcContext
+                    });
+                    let i18nPromise = new Promise<typeof i18n>(resolve => resolve(i18n));
+                    if (prI18n_currentLanguage) {
+                        i18nPromise = prI18n_currentLanguage;
+                    }
+                    return i18nPromise.then(i18n => {
+                        i18nService.i18n = i18n;
+                        return true;
+                    });
+                },
+            deps: [I18nService, KC_CONTEXT]
+        },
+        { provide: USE_DEFAULT_CSS, useValue: config?.doUseDefaultCss ?? true },
+        { provide: CLASSES, useValue: config?.classes ?? {} },
+        {
+            provide: I18N,
+            useFactory: (
+                i18nService: I18nService<ReturnType<typeof config.getI18n>["i18n"]>
+            ) => {
+                return i18nService.i18n;
+            },
+            deps: [I18nService]
+        }
+    ]);

package/src/lib/public-api.ts

@@ -0,0 +1,12 @@
+import { KcContext as KcAccountContext } from "keycloakify/account/KcContext";
+import { KcContext as KcLoginContext } from "keycloakify/login/KcContext";
+
+declare global {
+    interface Window {
+        kcContext?: KcLoginContext | KcAccountContext;
+    }
+}
+
+export * from "./models";
+export * from "./providers/keycloakify-angular.providers";
+export * from "./services";

package/src/lib/services/i18n.service.ts

@@ -0,0 +1,5 @@
+import { Injectable } from "@angular/core";
+@Injectable({ providedIn: "root" })
+export class I18nService<T> {
+    i18n!: T;
+}

package/src/lib/services/index.ts

@@ -0,0 +1,2 @@
+export * from "./resource-injector.service";
+export * from "./i18n.service";

package/src/lib/services/resource-injector.service.ts

@@ -0,0 +1,50 @@
+import { inject, Injectable, Renderer2, RendererFactory2 } from "@angular/core";
+import { Observable } from "rxjs";
+import { Script } from "../models/script.model";
+
+@Injectable({
+    providedIn: "root"
+})
+export class ResourceInjectorService {
+    private renderer: Renderer2 = inject(RendererFactory2).createRenderer(null, null);
+
+    createLink(url: string): Observable<void> {
+        return new Observable<void>(observer => {
+            // check if the style is already injected
+            if (Array.from(document.styleSheets).some(s => s.href?.includes(url))) {
+                observer.next();
+                observer.complete();
+                console.debug(`stylesheet: ${url} already loaded`);
+                return;
+            }
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = url;
+
+            link.onload = () => {
+                observer.next();
+                observer.complete();
+            };
+
+            link.onerror = () => {
+                observer.error(new Error(`Failed to load stylesheet: ${url}`));
+            };
+
+            this.renderer.appendChild(document.head, link);
+        });
+    }
+    createScript({ type, id, src, textContent }: Script): void {
+        // check if the script is already injected
+        if (Array.from(document.scripts).some(s => s.id?.includes(id))) {
+            console.debug(`script: ${src} already injected`);
+            return;
+        }
+        const script = document.createElement("script");
+        script.type = type;
+        if (src) script.src = src;
+        if (textContent) script.textContent = textContent;
+        script.id = id;
+
+        this.renderer.appendChild(document.head, script);
+    }
+}

package/src/login/DefaultPage.ts

@@ -0,0 +1,208 @@
+import { Type } from "@angular/core";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+
+const DefaultPage = async (
+    pageId: KcContext["pageId"],
+    doMakeUserConfirmPassword = true,
+    doUseDefaultCss = true,
+    classes: { [key in ClassKey]?: string } = {}
+): Promise<{
+    ComponentBootstrap: Type<unknown>;
+    doMakeUserConfirmPassword: boolean;
+    doUseDefaultCss: boolean;
+    classes: { [key in ClassKey]?: string };
+}> => {
+    let ComponentBootstrapPromise;
+    switch (pageId) {
+        case "login.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login/login.component"
+            ).then(c => c.LoginComponent);
+            break;
+        case "login-username.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-username/login-username.component"
+            ).then(c => c.LoginUsernameComponent);
+            break;
+        case "login-password.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-password/login-password.component"
+            ).then(c => c.LoginPasswordComponent);
+            break;
+        case "webauthn-authenticate.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/webauthn-authenticate/webauthn-authenticate.component"
+            ).then(c => c.WebauthnAuthenticateComponent);
+            break;
+        case "webauthn-register.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/webauthn-register/webauthn-register.component"
+            ).then(c => c.WebauthnRegisterComponent);
+            break;
+        case "register.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/register/register.component"
+            ).then(c => c.RegisterComponent);
+            break;
+        case "info.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/info/info.component"
+            ).then(c => c.InfoComponent);
+            break;
+        case "error.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/error/error.component"
+            ).then(c => c.ErrorComponent);
+            break;
+        case "login-reset-password.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-reset-password/login-reset-password.component"
+            ).then(c => c.LoginResetPasswordComponent);
+            break;
+        case "login-verify-email.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-verify-email/login-verify-email.component"
+            ).then(c => c.LoginVerifyEmailComponent);
+            break;
+        case "terms.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/terms/terms.component"
+            ).then(c => c.TermsComponent);
+            break;
+        case "login-oauth2-device-verify-user-code.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-oauth2-device-verify-user-code/login-oauth2-device-verify-user-code.component"
+            ).then(c => c.LoginOauth2DeviceVerifyUserCodeComponent);
+            break;
+        case "login-oauth-grant.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-oauth-grant/login-oauth-grant.component"
+            ).then(c => c.LoginOauthGrantComponent);
+            break;
+        case "login-otp.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-otp/login-otp.component"
+            ).then(c => c.LoginOtpComponent);
+
+            break;
+        case "login-update-profile.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-update-profile/login-update-profile.component"
+            ).then(c => c.LoginUpdateProfileComponent);
+            break;
+        case "login-update-password.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-update-password/login-update-password.component"
+            ).then(c => c.LoginUpdatePasswordComponent);
+            break;
+        case "login-idp-link-confirm.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-idp-link-confirm/login-idp-link-confirm.component"
+            ).then(c => c.LoginIdpLinkConfirmComponent);
+            break;
+        case "login-idp-link-email.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-idp-link-email/login-idp-link-email.component"
+            ).then(c => c.LoginIdpLinkEmailComponent);
+            break;
+        case "login-page-expired.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-page-expired/login-page-expired.component"
+            ).then(c => c.LoginPageExpiredComponent);
+            break;
+        case "login-config-totp.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-config-totp/login-config-totp.component"
+            ).then(c => c.LoginConfigTotpComponent);
+            break;
+        case "logout-confirm.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/logout-confirm/logout-confirm.component"
+            ).then(c => c.LogoutConfirmComponent);
+            break;
+        case "idp-review-user-profile.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/idp-review-user-profile/idp-review-user-profile.component"
+            ).then(c => c.IdpReviewUserProfileComponent);
+            break;
+        case "update-email.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/update-email/update-email.component"
+            ).then(c => c.UpdateEmailComponent);
+            break;
+        case "select-authenticator.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/select-authenticator/select-authenticator.component"
+            ).then(c => c.SelectAuthenticatorComponent);
+            break;
+        case "saml-post-form.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/saml-post-form/saml-post-form.component"
+            ).then(c => c.SamlPostFormComponent);
+            break;
+        case "delete-credential.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/delete-credential/delete-credential.component"
+            ).then(c => c.DeleteCredentialComponent);
+            break;
+        case "code.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/code/code.component"
+            ).then(c => c.CodeComponent);
+            break;
+        case "delete-account-confirm.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/delete-account-confirm/delete-account-confirm.component"
+            ).then(c => c.DeleteAccountConfirmComponent);
+            break;
+        case "frontchannel-logout.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/frontchannel-logout/frontchannel-logout.component"
+            ).then(c => c.FrontchannelLogoutComponent);
+            break;
+        case "login-recovery-authn-code-config.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-recovery-authn-code-config/login-recovery-authn-code-config.component"
+            ).then(c => c.LoginRecoveryAuthnCodeConfigComponent);
+            break;
+        case "login-recovery-authn-code-input.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-recovery-authn-code-input/login-recovery-authn-code-input.component"
+            ).then(c => c.LoginRecoveryAuthnCodeInputComponent);
+            break;
+        case "login-reset-otp.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-reset-otp/login-reset-otp.component"
+            ).then(c => c.LoginResetOtpComponent);
+            break;
+        case "login-x509-info.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-x509-info/login-x509-info.component"
+            ).then(c => c.LoginX509InfoComponent);
+            break;
+        case "webauthn-error.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/webauthn-error/webauthn-error.component"
+            ).then(c => c.WebauthnErrorComponent);
+            break;
+        case "login-passkeys-conditional-authenticate.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-passkeys-conditional-authenticate/login-passkeys-conditional-authenticate.component"
+            ).then(c => c.LoginPasskeysConditionalAuthenticateComponent);
+            break;
+        case "login-idp-link-confirm-override.ftl":
+            ComponentBootstrapPromise = import(
+                "@keycloakify/angular/login/pages/login-idp-link-confirm-override/login-idp-link-confirm-override.component"
+            ).then(c => c.LoginIdpLinkConfirmOverrideComponent);
+            break;
+    }
+    return ComponentBootstrapPromise?.then(ComponentBootstrap => ({
+        ComponentBootstrap,
+        doMakeUserConfirmPassword,
+        doUseDefaultCss,
+        classes
+    }));
+};
+
+export { DefaultPage };

package/src/login/KcContext.ts

@@ -0,0 +1 @@
+export type { KcContext } from "keycloakify/login/KcContext";

package/src/login/classes/component-reference.class.ts

@@ -0,0 +1,5 @@
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+export abstract class ComponentReference {
+    doUseDefaultCss: boolean | undefined;
+    classes: Partial<Record<ClassKey, string>> | undefined;
+}

package/src/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component.html

@@ -0,0 +1,24 @@
+@let idPostfix = attribute()?.name ?? '' + '-' + (fieldIndex() ?? 0 + 1);
+@if (hasRemove()) {
+  <button
+    [id]="'kc-remove-' + idPostfix"
+    type="button"
+    class="pf-c-button pf-m-inline pf-m-link"
+    (click)="onRemove()"
+  >
+    {{ 'remove' | msgStr }}
+  </button>
+  @if (hasAdd()) {
+    &nbsp;|&nbsp;
+  }
+}
+@if (hasAdd()) {
+  <button
+    [id]="'kc-add-' + idPostfix"
+    type="button"
+    class="pf-c-button pf-m-inline pf-m-link"
+    (click)="onAdd()"
+  >
+    {{ 'addValue' | msgStr }}
+  </button>
+}

package/src/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component.ts

@@ -0,0 +1,144 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+    output
+} from "@angular/core";
+import { Attribute } from "keycloakify/login/KcContext";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+import { FormAction } from "@keycloakify/angular/login/services/user-profile-form.service";
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [MsgStrPipe],
+    selector: "kc-add-remove-buttons-multi-valued-attribute",
+    templateUrl: "add-remove-buttons-multi-valued-attribute.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AddRemoveButtonsMultiValuedAttributeComponent {
+    attribute = input<Attribute>();
+    values = input<string[]>();
+    fieldIndex = input<number>();
+    dispatchFormAction = output<FormAction>();
+
+    hasRemove = computed(() => {
+        const attribute = this.attribute();
+        const values = this.values();
+        const fieldIndex = this.fieldIndex();
+        if (attribute && values && fieldIndex) {
+            return this.getButtonToDisplayForMultivaluedAttributeField({
+                attribute,
+                values,
+                fieldIndex
+            }).hasRemove;
+        }
+        return false;
+    });
+    hasAdd = computed(() => {
+        const attribute = this.attribute();
+        const values = this.values();
+        const fieldIndex = this.fieldIndex();
+        if (attribute && values && fieldIndex) {
+            return this.getButtonToDisplayForMultivaluedAttributeField({
+                attribute,
+                values,
+                fieldIndex
+            }).hasAdd;
+        }
+        return false;
+    });
+
+    onAdd() {
+        this.dispatchFormAction.emit({
+            action: "update",
+            name: this.attribute()?.name ?? "",
+            valueOrValues: [...(this.values() ?? []), ""]
+        });
+    }
+
+    onRemove() {
+        this.dispatchFormAction.emit({
+            action: "update",
+            name: this.attribute()?.name ?? "",
+            valueOrValues: (this.values() ?? []).filter((_, i) => i !== this.fieldIndex())
+        });
+    }
+
+    private getButtonToDisplayForMultivaluedAttributeField(params: {
+        attribute: Attribute;
+        values: string[];
+        fieldIndex: number;
+    }) {
+        const { attribute, values, fieldIndex } = params;
+
+        const hasRemove = (() => {
+            if (values.length === 1) {
+                return false;
+            }
+
+            const minCount = (() => {
+                const { multivalued } = attribute.validators;
+
+                if (multivalued === undefined) {
+                    return undefined;
+                }
+
+                const minStr = multivalued.min;
+
+                if (minStr === undefined) {
+                    return undefined;
+                }
+
+                return parseInt(`${minStr}`);
+            })();
+
+            if (minCount === undefined) {
+                return true;
+            }
+
+            if (values.length === minCount) {
+                return false;
+            }
+
+            return true;
+        })();
+
+        const hasAdd = (() => {
+            if (fieldIndex + 1 !== values.length) {
+                return false;
+            }
+
+            const maxCount = (() => {
+                const { multivalued } = attribute.validators;
+
+                if (multivalued === undefined) {
+                    return undefined;
+                }
+
+                const maxStr = multivalued.max;
+
+                if (maxStr === undefined) {
+                    return undefined;
+                }
+
+                return parseInt(`${maxStr}`);
+            })();
+
+            if (maxCount === undefined) {
+                return true;
+            }
+
+            return values.length !== maxCount;
+        })();
+
+        return { hasRemove, hasAdd };
+    }
+}

package/src/login/components/field-errors/field-errors.component.html

@@ -0,0 +1,15 @@
+@let index = fieldIndex();
+<span
+  [id]="'input-error-' + attribute.name + (index === undefined ? '' : '-' + index)"
+  [kcClass]="'kcInputErrorMessageClass'"
+  aria-live="polite"
+>
+  @for (error of displayableErrors(); track error; let i = $index) {
+    @if (error.fieldIndex === index) {
+      <span [innerHTML]="error.errorMessage"></span>
+      @if (displayableErrors()?.length ?? 0 - 1 !== i) {
+        <br />
+      }
+    }
+  }
+</span>

package/src/login/components/field-errors/field-errors.component.ts

@@ -0,0 +1,41 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input
+} from "@angular/core";
+import { CLASSES, USE_DEFAULT_CSS } from "@keycloakify/angular/lib/public-api";
+import { Attribute } from "keycloakify/login/KcContext";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { KcClassDirective } from "@keycloakify/angular/login/directives/kc-class.directive";
+import { FormFieldError } from "@keycloakify/angular/login/services/user-profile-form.service";
+
+@Component({
+    standalone: true,
+    styles: [
+        `
+            :host {
+                display: contents;
+            }
+        `
+    ],
+    imports: [KcClassDirective],
+    selector: "kc-field-errors",
+    templateUrl: "field-errors.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => FieldErrorsComponent)
+        }
+    ]
+})
+export class FieldErrorsComponent extends ComponentReference {
+    attribute = input<Attribute>();
+    displayableErrors = input<FormFieldError[]>();
+    fieldIndex = input<number>();
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+}

package/src/login/components/group-label/group-label.component.html

@@ -0,0 +1,30 @@
+@let attr = attribute();
+@let groupName = groupNameRef();
+@if (attr && groupName !== '') {
+  <div
+    [kcClass]="'kcFormGroupClass'"
+    [kcAttributes]="attr.group?.html5DataAnnotations"
+  >
+    @let groupDisplayHeader = attr.group?.displayHeader ?? '';
+    @let groupHeaderText = groupDisplayHeader !== '' ? groupDisplayHeader : (attr.group?.name ?? '');
+    <div [kcClass]="'kcContentWrapperClass'">
+      <label
+        [id]="'header-' + attr.group?.name"
+        [kcClass]="'kcFormGroupHeader'"
+      >
+        {{ groupHeaderText | advancedMsgStr }}
+      </label>
+    </div>
+    @let groupDisplayDescription = attr.group?.displayDescription ?? '';
+    @if (groupDisplayDescription !== '') {
+      <div [kcClass]="'kcLabelWrapperClass'">
+        <label
+          [id]="'description-' + attr.group?.name"
+          [kcClass]="'kcLabelClass'"
+        >
+          {{ groupDisplayDescription | advancedMsgStr }}
+        </label>
+      </div>
+    }
+  </div>
+}