@keycloakify/angular 0.0.1-rc.0 → 0.0.1-rc.11

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

@@ -0,0 +1,125 @@
+@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 activeLink = active();
+@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
+                                [href]="referrer?.url"
+                                id="referrer"
+                            >
+                                {{ 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: activeLink === 'account' }">
+                    <a [href]="url.accountUrl">{{ i18n.msgStr('account') }}</a>
+                </li>
+                @if (features.passwordUpdateSupported) {
+                    <li [ngClass]="{ active: activeLink === 'password' }">
+                        <a [href]="url.passwordUrl">{{ i18n.msgStr('password') }}</a>
+                    </li>
+                }
+                <li [ngClass]="{ active: activeLink === 'totp' }">
+                    <a [href]="url.totpUrl">{{ i18n.msgStr('authenticator') }}</a>
+                </li>
+                @if (features.identityFederation) {
+                    <li [ngClass]="{ active: activeLink === 'social' }">
+                        <a [href]="url.socialUrl">{{ i18n.msgStr('federatedIdentity') }}</a>
+                    </li>
+                }
+                <li [ngClass]="{ active: activeLink === 'sessions' }">
+                    <a [href]="url.sessionsUrl">{{ i18n.msgStr('sessions') }}</a>
+                </li>
+                <li [ngClass]="{ active: activeLink === 'applications' }">
+                    <a [href]="url.applicationsUrl">{{ i18n.msgStr('applications') }}</a>
+                </li>
+                @if (features.log) {
+                    <li [ngClass]="{ active: activeLink === 'log' }">
+                        <a [href]="url.logUrl">{{ i18n.msgStr('log') }}</a>
+                    </li>
+                }
+                @if (realm.userManagedAccessAllowed && features.authorization) {
+                    <li [ngClass]="{ active: activeLink === '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>
+            }
+            <ng-content select="[content]"></ng-content>
+        </div>
+    </div>
+}

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

@@ -0,0 +1,71 @@
+import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, OnInit, Renderer2 } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference.class';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class.directive';
+import { AccountResourceInjectorService } from '@keycloakify/angular/account/services/resource-injector.service';
+import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes.token';
+import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n.token';
+import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context.token';
+import { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize.pipe';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+import { ClassKey, getKcClsx } from 'keycloakify/account/lib/kcClsx';
+import { Observable } from 'rxjs';
+import { I18n } from '../i18n';
+import { type KcContext } from '../KcContext';
+
+@Component({
+    selector: 'kc-account-template',
+    templateUrl: './template.component.html',
+    standalone: true,
+    imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective, NgClass],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => TemplateComponent)
+        }
+    ]
+})
+export class TemplateComponent extends ComponentReference implements OnInit {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    renderer = inject(Renderer2);
+    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);
+
+    active = input<'account' | 'password' | 'totp' | 'social' | 'sessions' | 'applications' | 'log' | 'authorization' | undefined>(undefined);
+
+    isReadyToRender$: Observable<boolean>;
+
+    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);
+        });
+    }
+}

package/src/account/directives/kc-class.directive.ts

@@ -0,0 +1,150 @@
+/* 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 '../classes/component-reference.class';
+
+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,165 @@
+@let url = kcContext.url;
+@let realm = kcContext.realm;
+@let messagesPerField = kcContext.messagesPerField;
+@let stateChecker = kcContext.stateChecker;
+@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
+            [action]="url.accountUrl"
+            class="form-horizontal"
+            method="post"
+        >
+            <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"
+                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+                            name="submitAction"
+                            value="Save"
+                        >
+                            {{ i18n.msgStr('doSave') }}
+                        </button>
+                        <button
+                            type="submit"
+                            [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+                            name="submitAction"
+                            value="Cancel"
+                        >
+                            {{ i18n.msgStr('doCancel') }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </ng-container>
+</kc-account-template>

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

@@ -0,0 +1,34 @@
+import { NgClass } from '@angular/common';
+import { Component, forwardRef, inject } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference.class';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template.component';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class.directive';
+import { ACCOUNT_CLASSES } from '@keycloakify/angular/account/tokens/classes.token';
+import { ACCOUNT_I18N } from '@keycloakify/angular/account/tokens/i18n.token';
+import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context.token';
+import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+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',
+    templateUrl: 'account.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => AccountComponent)
+        }
+    ]
+})
+export class AccountComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    kcContext = inject<Extract<KcContext, { pageId: 'account.ftl' }>>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+    override additionalClasses: Partial<Record<ClassKey, string>> = {
+        kcBodyClass: `${this.classes?.kcBodyClass} user`
+    };
+}