@keycloakify/angular 0.0.1-rc.2 → 0.0.1-rc.21

package/public-api.d.ts

@@ -0,0 +1 @@
+export declare const KEYCLOAKIFY_ANGULAR = "@keycloakify/angular";

package/src/account/DefaultPage.ts

@@ -0,0 +1,61 @@
+import { Type } from '@angular/core';
+import type { ClassKey } from 'keycloakify/account';
+import type { KcContext } from './KcContext';
+
+const DefaultPage = async (
+    pageId: KcContext['pageId'],
+    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 'password.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/password'
+            ).then(c => c.PasswordComponent);
+            break;
+        case 'account.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/account'
+            ).then(c => c.AccountComponent);
+            break;
+        case 'sessions.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/sessions'
+            ).then(c => c.SessionsComponent);
+            break;
+        case 'totp.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/totp'
+            ).then(c => c.TotpComponent);
+            break;
+        case 'applications.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/applications'
+            ).then(c => c.ApplicationsComponent);
+            break;
+        case 'log.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/log'
+            ).then(c => c.LogComponent);
+            break;
+        case 'federatedIdentity.ftl':
+            ComponentBootstrapPromise = import(
+                '@keycloakify/angular/account/pages/federatedIdentity'
+            ).then(c => c.FederatedIdentityComponent);
+            break;
+    }
+    return ComponentBootstrapPromise?.then(ComponentBootstrap => ({
+        ComponentBootstrap,
+        doMakeUserConfirmPassword: false,
+        doUseDefaultCss,
+        classes
+    }));
+};
+
+export { DefaultPage };

package/src/account/KcContext.ts

@@ -0,0 +1 @@
+export type { KcContext } from 'keycloakify/account/KcContext';

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

@@ -0,0 +1,6 @@
+import { ClassKey } from 'keycloakify/account';
+export abstract class ComponentReference {
+    doUseDefaultCss!: boolean | undefined;
+    classes!: Partial<Record<ClassKey, string>> | undefined;
+    additionalClasses!: Partial<Record<ClassKey, string>>;
+}

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

@@ -0,0 +1,130 @@
+@let enabledLanguages = i18n.enabledLanguages;
+@let currentLanguage = i18n.currentLanguage;
+@let url = kcContext.url;
+@let features = kcContext.features;
+@let realm = kcContext.realm;
+@let message = kcContext.message;
+@let referrer = kcContext.referrer;
+@let isReadyToRender = isReadyToRender$ | async;
+
+@if (isReadyToRender) {
+    <header class="navbar navbar-default navbar-pf navbar-main header">
+        <nav
+            class="navbar"
+            role="navigation"
+        >
+            <div class="navbar-header">
+                <div class="container">
+                    <h1 class="navbar-title">Keycloak</h1>
+                </div>
+            </div>
+            <div class="navbar-collapse navbar-collapse-1">
+                <div class="container">
+                    <ul class="nav navbar-nav navbar-utility">
+                        @if (enabledLanguages.length > 1) {
+                            <li>
+                                <div
+                                    class="kc-dropdown"
+                                    id="kc-locale-dropdown"
+                                >
+                                    <a
+                                        href="#"
+                                        id="kc-current-locale-link"
+                                    >
+                                        {{ currentLanguage.label }}
+                                    </a>
+                                    <ul>
+                                        @for (enabledLanguage of enabledLanguages; track enabledLanguage.languageTag) {
+                                            @let label = enabledLanguage.label;
+                                            @let href = enabledLanguage.href;
+
+                                            <li class="kc-dropdown-item">
+                                                <a [href]="href">{{ label }}</a>
+                                            </li>
+                                        }
+                                    </ul>
+                                </div>
+                            </li>
+                        }
+                        @if (!!referrer?.url) {
+                            <a
+                                id="referrer"
+                                [href]="referrer?.url"
+                            >
+                                {{ i18n.msgStr('backTo', referrer?.name) }}
+                            </a>
+                        }
+                        <li>
+                            <a [href]="url.getLogoutUrl()">{{ i18n.msgStr('doSignOut') }}</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <div class="container">
+        <div class="bs-sidebar col-sm-3">
+            <ul>
+                <li [ngClass]="{ active: active === 'account' }">
+                    <a [href]="url.accountUrl">{{ i18n.msgStr('account') }}</a>
+                </li>
+                @if (features.passwordUpdateSupported) {
+                    <li [ngClass]="{ active: active === 'password' }">
+                        <a [href]="url.passwordUrl">{{ i18n.msgStr('password') }}</a>
+                    </li>
+                }
+                <li [ngClass]="{ active: active === 'totp' }">
+                    <a [href]="url.totpUrl">{{ i18n.msgStr('authenticator') }}</a>
+                </li>
+                @if (features.identityFederation) {
+                    <li [ngClass]="{ active: active === 'social' }">
+                        <a [href]="url.socialUrl">{{ i18n.msgStr('federatedIdentity') }}</a>
+                    </li>
+                }
+                <li [ngClass]="{ active: active === 'sessions' }">
+                    <a [href]="url.sessionsUrl">{{ i18n.msgStr('sessions') }}</a>
+                </li>
+                <li [ngClass]="{ active: active === 'applications' }">
+                    <a [href]="url.applicationsUrl">{{ i18n.msgStr('applications') }}</a>
+                </li>
+                @if (features.log) {
+                    <li [ngClass]="{ active: active === 'log' }">
+                        <a [href]="url.logUrl">{{ i18n.msgStr('log') }}</a>
+                    </li>
+                }
+                @if (realm.userManagedAccessAllowed && features.authorization) {
+                    <li [ngClass]="{ active: active === 'authorization' }">
+                        <a [href]="url.resourceUrl">{{ i18n.msgStr('myResources') }}</a>
+                    </li>
+                }
+            </ul>
+        </div>
+
+        <div class="col-sm-9 content-area">
+            @if (message) {
+                <div [ngClass]="['alert', 'alert-' + message.type]">
+                    @switch (message.type) {
+                        @case ('success') {
+                            <span class="pficon pficon-ok"></span>
+                        }
+                        @case ('error') {
+                            <span class="pficon pficon-error-circle-o"></span>
+                        }
+                    }
+                    <span
+                        class="kc-feedback-text"
+                        [innerHTML]="message.summary | kcSanitize: 'html'"
+                    ></span>
+                </div>
+            }
+            @let pageRef = page();
+            @if (!!pageRef) {
+                <kc-dynamic-page-injector
+                    [page]="pageRef"
+                    (componentCreated)="onComponentCreated($event)"
+                />
+            }
+        </div>
+    </div>
+}

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

@@ -0,0 +1,118 @@
+import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
+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';
+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 { ClassKey, getKcClsx } from 'keycloakify/account/lib/kcClsx';
+import { Observable } from 'rxjs';
+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-root',
+    templateUrl: './template.component.html',
+    standalone: true,
+    imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective, NgClass, DynamicPageInjectorComponent],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => TemplateComponent)
+        }
+    ]
+})
+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);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    accountResourceInjectorService = inject(AccountResourceInjectorService);
+
+    isReadyToRender$: Observable<boolean>;
+
+    page = input<Type<unknown>>();
+
+    active: ActiveType;
+
+    constructor() {
+        super();
+        this.title.setTitle(this.i18n.msgStr('accountManagementTitle'));
+        this.isReadyToRender$ = this.accountResourceInjectorService.injectResource(this.doUseDefaultCss);
+    }
+
+    ngOnInit() {
+        this.applyKcIndexClasses();
+    }
+
+    private applyKcIndexClasses() {
+        const kcClsx = getKcClsx({
+            doUseDefaultCss: this.doUseDefaultCss,
+            classes: this.classes
+        }).kcClsx;
+        const kcBodyClass = kcClsx('kcBodyClass');
+        const kcHtmlClass = kcClsx('kcHtmlClass');
+        const kcBodyClasses = kcBodyClass.split(/\s+/);
+        const kcHtmlClasses = kcHtmlClass.split(/\s+/);
+        kcBodyClasses.push('admin-console', 'user');
+        kcBodyClasses.forEach(klass => {
+            this.renderer.addClass(document.body, klass);
+        });
+        kcHtmlClasses.forEach(klass => {
+            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/directives/kc-class/kc-class.directive.ts

@@ -0,0 +1,170 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
+import {
+    Directive,
+    DoCheck,
+    ElementRef,
+    inject,
+    Input,
+    isDevMode,
+    Renderer2,
+    ɵstringify as stringify
+} from '@angular/core';
+import { ClassKey } from 'keycloakify/account';
+import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
+
+interface CssClassState {
+    // PERF: could use a bit mask to represent state as all fields are boolean flags
+    enabled: boolean;
+    changed: boolean;
+    touched: boolean;
+}
+
+type KcClassSupportedTypes =
+    | ClassKey[]
+    | Set<ClassKey>
+    | Partial<{ [key in ClassKey]: any }>
+    | null
+    | undefined;
+
+type NgClassSupportedTypes =
+    | string[]
+    | Set<string>
+    | { [key: string]: any }
+    | null
+    | undefined;
+
+@Directive({ selector: '[kcClass]', standalone: true })
+export class KcClassDirective implements DoCheck {
+    private initialClasses: string[] = [];
+    private rawClass: NgClassSupportedTypes;
+    private rawKcClass: KcClassSupportedTypes;
+
+    private stateMap = new Map<string | ClassKey, CssClassState>();
+    readonly #renderer = inject(Renderer2);
+    readonly #el = inject(ElementRef);
+    readonly #host = inject(ComponentReference);
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('class')
+    set klass(value: string) {
+        this.initialClasses = value != null ? value.trim().split(/\s+/) : [];
+    }
+
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('ngClass')
+    set ngClass(value: string | NgClassSupportedTypes) {
+        this.rawClass = typeof value === 'string' ? value.trim().split(/\s+/) : value;
+    }
+
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('kcClass')
+    set kcClass(value: ClassKey | KcClassSupportedTypes) {
+        this.rawKcClass =
+            typeof value === 'string' ? (value.trim().split(/\s+/) as ClassKey[]) : value;
+    }
+
+    ngDoCheck(): void {
+        for (const klass of this.initialClasses) {
+            this._updateState(klass, true);
+        }
+        // classes from the [ngClass] binding
+        const rawClass = this.rawClass;
+        if (Array.isArray(rawClass) || rawClass instanceof Set) {
+            for (const klass of rawClass) {
+                this._updateState(klass, true);
+            }
+        } else if (rawClass != null) {
+            for (const klass of Object.keys(rawClass)) {
+                this._updateState(klass, Boolean(rawClass[klass]));
+            }
+        }
+
+        // classes from the [kcClass] binding
+        const rawKcClass = this.rawKcClass;
+        if (Array.isArray(rawKcClass) || rawKcClass instanceof Set) {
+            for (const klass of rawKcClass) {
+                this._updateState(klass, true, true);
+            }
+        } else if (rawKcClass != null) {
+            for (const klass of Object.keys(rawKcClass)) {
+                this._updateState(klass, Boolean(rawKcClass[klass as ClassKey]), true);
+            }
+        }
+
+        this._applyStateDiff();
+    }
+
+    private _updateState(
+        klass: string | ClassKey,
+        nextEnabled: boolean,
+        kcClsxCheck = false
+    ) {
+        const state = this.stateMap.get(klass);
+        if (state !== undefined) {
+            if (state.enabled !== nextEnabled) {
+                state.changed = true;
+                state.enabled = nextEnabled;
+            }
+            state.touched = true;
+        } else {
+            let klassChecked = klass;
+            if (kcClsxCheck) {
+                const doUseDefaultCss = this.#host.doUseDefaultCss ?? true;
+                const classes = {
+                    ...(this.#host.classes ?? {}),
+                    ...(this.#host.additionalClasses ?? {})
+                };
+                const kcClsx = getKcClsx({ doUseDefaultCss, classes }).kcClsx;
+                klassChecked = kcClsx(klass as ClassKey);
+            }
+            this.stateMap.set(klassChecked, {
+                enabled: nextEnabled,
+                changed: true,
+                touched: true
+            });
+        }
+    }
+
+    private _applyStateDiff() {
+        for (const stateEntry of this.stateMap) {
+            const klass = stateEntry[0];
+            const state = stateEntry[1];
+
+            if (state.changed) {
+                this._toggleClass(klass, state.enabled);
+                state.changed = false;
+            } else if (!state.touched) {
+                // A class that was previously active got removed from the new collection of classes -
+                // remove from the DOM as well.
+                if (state.enabled) {
+                    this._toggleClass(klass, false);
+                }
+                this.stateMap.delete(klass);
+            }
+
+            state.touched = false;
+        }
+    }
+
+    private _toggleClass(klass: string, enabled: boolean): void {
+        if (isDevMode()) {
+            if (typeof klass !== 'string') {
+                throw new Error(
+                    `NgClass can only toggle CSS classes expressed as strings, got ${stringify(klass)}`
+                );
+            }
+        }
+
+        klass = klass.trim();
+        if (klass.length > 0) {
+            klass.split(/\s+/).forEach(klass => {
+                if (enabled) {
+                    this.#renderer.addClass(this.#el.nativeElement, klass);
+                } else {
+                    this.#renderer.removeClass(this.#el.nativeElement, klass);
+                }
+            });
+        }
+    }
+}

package/src/account/i18n.ts

@@ -0,0 +1,4 @@
+import type { GenericI18n_noJsx } from 'keycloakify/account/i18n/noJsx/GenericI18n_noJsx';
+import { type MessageKey as MessageKey_defaultSet } from 'keycloakify/account/i18n/messages_defaultSet/types';
+/** INTERNAL: DO NOT IMPORT THIS */
+export type I18n = GenericI18n_noJsx<MessageKey_defaultSet, string>;

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

@@ -0,0 +1,161 @@
+@let url = kcContext.url;
+@let realm = kcContext.realm;
+@let messagesPerField = kcContext.messagesPerField;
+@let stateChecker = kcContext.stateChecker;
+@let account = kcContext.account;
+@let referrer = kcContext.referrer;
+
+<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') }"
+        >
+            <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>
+
+            <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="col-sm-2 col-md-2">
+            <label
+                for="email"
+                class="control-label"
+            >
+                {{ 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="form-group"
+        [ngClass]="{ 'has-error': messagesPerField.existsError('firstName') }"
+    >
+        <div class="col-sm-2 col-md-2">
+            <label
+                for="firstName"
+                class="control-label"
+            >
+                {{ 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="form-group"
+        [ngClass]="{ 'has-error': messagesPerField.existsError('lastName') }"
+    >
+        <div class="col-sm-2 col-md-2">
+            <label
+                for="lastName"
+                class="control-label"
+            >
+                {{ 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="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']"
+                >
+                    {{ i18n.msgStr('doCancel') }}
+                </button>
+            </div>
+        </div>
+    </div>
+</form>