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

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

@@ -0,0 +1,63 @@
+@let url = kcContext.url;
+@let sessions = kcContext.sessions;
+@let stateChecker = kcContext.stateChecker;
+
+<kc-account-template [active]="'sessions'">
+    <ng-container content>
+        <div [kcClass]="'kcContentWrapperClass'">
+            <div class="col-md-10">
+                <h2>{{ i18n.msgStr('sessionsHtmlTitle') }}</h2>
+            </div>
+        </div>
+
+        <table class="table table-striped table-bordered">
+            <thead>
+                <tr>
+                    <th>{{ i18n.msgStr('ip') }}</th>
+                    <th>{{ i18n.msgStr('started') }}</th>
+                    <th>{{ i18n.msgStr('lastAccess') }}</th>
+                    <th>{{ i18n.msgStr('expires') }}</th>
+                    <th>{{ i18n.msgStr('clients') }}</th>
+                </tr>
+            </thead>
+
+            <tbody role="rowgroup">
+                @for (session of sessions.sessions; track session) {
+                    <tr>
+                        <td>{{ session.ipAddress }}</td>
+                        <td>{{ session?.started }}</td>
+                        <td>{{ session?.lastAccess }}</td>
+                        <td>{{ session?.expires }}</td>
+                        <td>
+                            @for (client of session.clients; track client) {
+                                <div>
+                                    {{ client }}
+                                    <br />
+                                </div>
+                            }
+                        </td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+
+        <form
+            [action]="url.sessionsUrl"
+            method="post"
+        >
+            <input
+                type="hidden"
+                id="stateChecker"
+                name="stateChecker"
+                [value]="stateChecker"
+            />
+            <button
+                id="logout-all-sessions"
+                type="submit"
+                [kcClass]="['kcButtonDefaultClass', 'kcButtonClass']"
+            >
+                {{ i18n.msgStr('doLogOutAllSessions') }}
+            </button>
+        </form>
+    </ng-container>
+</kc-account-template>

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

@@ -0,0 +1,31 @@
+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: 'sessions.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => SessionsComponent)
+        }
+    ]
+})
+export class SessionsComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    kcContext = inject<Extract<KcContext, { pageId: 'sessions.ftl' }>>(KC_ACCOUNT_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(ACCOUNT_CLASSES);
+}

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

@@ -0,0 +1,258 @@
+@let url = kcContext.url;
+@let mode = kcContext.mode;
+@let messagesPerField = kcContext.messagesPerField;
+@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>
+        @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) {
+                                <td class="provider">{{ credential.id }}</td>
+                            }
+                            <td class="provider">{{ credential.userLabel || '' }}</td>
+                            <td class="action">
+                                <form
+                                    [action]="url.totpUrl"
+                                    method="post"
+                                    class="form-inline"
+                                >
+                                    <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
+                                        [id]="'remove-mobile-' + index"
+                                        class="btn btn-default"
+                                    >
+                                        <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
+                                    [href]="totp.qrUrl"
+                                    id="mode-barcode"
+                                >
+                                    {{ 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"
+                                    [src]="'data:image/png;base64, ' + totp.totpSecretQrCode"
+                                    alt="Figure: Barcode"
+                                />
+                            </p>
+                            <p>
+                                <a
+                                    [href]="totp.manualUrl"
+                                    id="mode-manual"
+                                >
+                                    {{ i18n.msgStr('totpUnableToScan') }}
+                                </a>
+                            </p>
+                        </li>
+                    }
+                    <li>
+                        <p>{{ i18n.msgStr('totpStep3') }}</p>
+                        <p>{{ i18n.msgStr('totpStep3DeviceName') }}</p>
+                    </li>
+                </ol>
+                <hr />
+                <form
+                    [action]="url.totpUrl"
+                    [kcClass]="'kcFormClass'"
+                    id="kc-totp-settings-form"
+                    method="post"
+                >
+                    <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"
+                                    [kcClass]="'kcInputErrorMessageClass'"
+                                    aria-live="polite"
+                                    [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"
+                                    [kcClass]="'kcInputErrorMessageClass'"
+                                    aria-live="polite"
+                                    [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"
+                                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+                                id="saveTOTPBtn"
+                                [value]="i18n.msgStr('doSave')"
+                            />
+                            <button
+                                type="submit"
+                                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
+                                id="cancelTOTPBtn"
+                                name="submitAction"
+                                value="Cancel"
+                            >
+                                {{ i18n.msgStr('doCancel') }}
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        }
+    </ng-container>
+</kc-account-template>

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

@@ -0,0 +1,32 @@
+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 { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize.pipe';
+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, KcSanitizePipe, NgClass],
+    selector: 'kc-root',
+    templateUrl: 'totp.component.html',
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => TotpComponent)
+        }
+    ]
+})
+export class TotpComponent extends ComponentReference {
+    i18n = inject<I18n>(ACCOUNT_I18N);
+    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);
+}

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

@@ -0,0 +1,64 @@
+import { DOCUMENT } from '@angular/common';
+import { APP_INITIALIZER, LOCALE_ID, makeEnvironmentProviders } from '@angular/core';
+import { I18nService } from '@keycloakify/angular/account/services/i18n.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 { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
+import { type KcContextLike } from 'keycloakify/account/i18n/noJsx';
+import { type ClassKey } from 'keycloakify/account/lib/kcClsx';
+import { type KcContext } from '../KcContext';
+
+export type KeycloakifyAngularAccountConfig = {
+    doUseDefaultCss?: boolean;
+    classes?: { [key in ClassKey]?: string };
+    getI18n: (params: { kcContext: KcContextLike }) => {
+        i18n: unknown;
+        prI18n_currentLanguage: Promise<unknown> | undefined;
+    };
+};
+
+export const provideKeycloakifyAngularAccount = (
+    config: KeycloakifyAngularAccountConfig
+) =>
+    makeEnvironmentProviders([
+        {
+            provide: KC_ACCOUNT_CONTEXT,
+            // @ts-ignore
+            useValue: window.kcContext
+        },
+        {
+            provide: LOCALE_ID,
+            useFactory: (document: Document) => {
+                return document.documentElement.lang ?? 'en';
+            },
+            deps: [DOCUMENT]
+        },
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: (i18nService: I18nService, 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_ACCOUNT_CONTEXT]
+        },
+        {
+            provide: ACCOUNT_I18N,
+            useFactory: (i18nService: I18nService) => i18nService.i18n,
+            deps: [I18nService]
+        },
+        { provide: USE_DEFAULT_CSS, useValue: config?.doUseDefaultCss ?? true },
+        { provide: ACCOUNT_CLASSES, useValue: config?.classes ?? {} }
+    ]);

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

@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+/** INTERNAL: DO NOT IMPORT THIS */
+export class I18nService {
+    i18n!: unknown;
+}

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

@@ -0,0 +1,37 @@
+import { inject, Injectable } from '@angular/core';
+import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context.token';
+import { Script } from '@keycloakify/angular/lib/models/script.model';
+import { ResourceInjectorService } from '@keycloakify/angular/lib/services/resource-injector.service';
+import { catchError, forkJoin, of, switchMap } from 'rxjs';
+import { type KcContext } from '../KcContext';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AccountResourceInjectorService {
+  private kcContext: KcContext = inject<KcContext>(KC_ACCOUNT_CONTEXT);
+  private resourceInjectorService: ResourceInjectorService = inject(ResourceInjectorService);
+
+  injectResource(doUseDefaultCss = true) {
+    if (!doUseDefaultCss) {
+      return of(true);
+    }
+    const stylesheets = [
+      `${this.kcContext.url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
+      `${this.kcContext.url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
+      `${this.kcContext.url.resourcesPath}/css/account.css`,
+    ];
+
+    return forkJoin(stylesheets.map((url) => this.resourceInjectorService.createLink(url))).pipe(
+      switchMap(() => of(true)),
+      catchError((error) => {
+        console.error('Error loading styles:', error);
+        return of(false);
+      }),
+    );
+  }
+
+  insertAdditionalScripts(scripts: Script[]) {
+    scripts.map((script) => this.resourceInjectorService.createScript(script));
+  }
+}

package/src/account/tokens/classes.token.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+import { type ClassKey } from 'keycloakify/account/lib/kcClsx';
+
+export const ACCOUNT_CLASSES = new InjectionToken<{ [key in ClassKey]?: string }>(
+    'account classes'
+);

package/src/account/tokens/i18n.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const ACCOUNT_I18N = new InjectionToken<unknown>('account i18n');

package/src/account/tokens/kc-context.token.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { type KcContext } from '../KcContext';
+
+export const KC_ACCOUNT_CONTEXT = new InjectionToken<KcContext>('keycloak account context');

package/src/{login → lib}/directives/attributes.directive.ts

@@ -1,6 +1,6 @@
-import { Directive, effect, ElementRef, inject, input, Renderer2 } from "@angular/core";
+import { Directive, effect, ElementRef, inject, input, Renderer2 } from '@angular/core';
 
-@Directive({ selector: "[kcAttributes]", standalone: true })
+@Directive({ selector: '[kcAttributes]', standalone: true })
 export class AttributesDirective {
     kcAttributes = input<Record<string, string>>();
     readonly #el = inject<ElementRef<HTMLElement>>(ElementRef);

package/src/{login → lib}/pipes/input-type.pipe.ts

@@ -1,15 +1,15 @@
-import { Pipe, PipeTransform } from "@angular/core";
+import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-    name: "inputType",
+    name: 'inputType',
     standalone: true
 })
 export class InputTypePipe implements PipeTransform {
     transform(inputType?: string): string {
-        if (inputType?.startsWith("html5-")) {
+        if (inputType?.startsWith('html5-')) {
             return inputType.slice(6);
         }
 
-        return inputType ?? "text";
+        return inputType ?? 'text';
     }
 }

package/src/lib/pipes/is-array-with-empty-object.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'isArrayWithEmptyObject',
+  standalone: true,
+})
+export class IsArrayWithEmptyObjectPipe implements PipeTransform {
+  transform(variable: unknown): boolean {
+    return (
+      Array.isArray(variable) &&
+      variable.length === 1 &&
+      typeof variable[0] === 'object' &&
+      Object.keys(variable[0]).length === 0
+    );
+  }
+}

package/src/lib/pipes/kc-sanitize.pipe.ts

@@ -0,0 +1,34 @@
+import { inject, Pipe, PipeTransform } from '@angular/core';
+import {
+    DomSanitizer,
+    SafeHtml,
+    SafeResourceUrl,
+    SafeScript,
+    SafeStyle,
+    SafeUrl
+} from '@angular/platform-browser';
+
+@Pipe({ name: 'kcSanitize', standalone: true })
+export class KcSanitizePipe implements PipeTransform {
+    #sanitizer = inject(DomSanitizer);
+
+    transform(
+        value: string,
+        type: 'html' | 'style' | 'script' | 'url' | 'resourceUrl'
+    ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
+        switch (type) {
+            case 'html':
+                return this.#sanitizer.bypassSecurityTrustHtml(value);
+            case 'style':
+                return this.#sanitizer.bypassSecurityTrustStyle(value);
+            case 'script':
+                return this.#sanitizer.bypassSecurityTrustScript(value);
+            case 'url':
+                return this.#sanitizer.bypassSecurityTrustUrl(value);
+            case 'resourceUrl':
+                return this.#sanitizer.bypassSecurityTrustResourceUrl(value);
+            default:
+                throw new Error(`Invalid safe type specified: ${type}`);
+        }
+    }
+}

package/src/lib/pipes/to-array.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'toArray',
+  standalone: true,
+})
+export class ToArrayPipe implements PipeTransform {
+  transform(value: string | string[], emptyWhenString = false): string[] {
+    // if (!value) throw new Error('must pass a value');
+    if (value instanceof Array) {
+      return value;
+    }
+    return emptyWhenString ? [] : [value];
+  }
+}

package/src/lib/pipes/to-number.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'toNumber',
+  standalone: true,
+})
+export class ToNumberPipe implements PipeTransform {
+  transform(value: string | number): number {
+    const number = parseInt(`${value}`);
+    if (isNaN(number)) throw new Error('number is NaN');
+    return number;
+  }
+}