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

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

@@ -0,0 +1,59 @@
+@let url = kcContext.url;
+@let sessions = kcContext.sessions;
+@let stateChecker = kcContext.stateChecker;
+
+<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
+    method="post"
+    [action]="url.sessionsUrl"
+>
+    <input
+        type="hidden"
+        id="stateChecker"
+        name="stateChecker"
+        [value]="stateChecker"
+    />
+    <button
+        id="logout-all-sessions"
+        type="submit"
+        [kcClass]="['kcButtonDefaultClass', 'kcButtonClass']"
+    >
+        {{ i18n.msgStr('doLogOutAllSessions') }}
+    </button>
+</form>

package/src/account/pages/sessions/sessions.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';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+import type { I18n } from '../../i18n';
+import type { KcContext } from '../../KcContext';
+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 { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+import type { ClassKey } from 'keycloakify/account';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, NgClass],
+    selector: 'kc-sessions',
+    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);
+    active = 'sessions';
+}

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

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

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

@@ -0,0 +1,33 @@
+import { NgClass } from '@angular/common';
+import { Component, forwardRef, inject } from '@angular/core';
+import { ComponentReference } from '@keycloakify/angular/account/classes/component-reference';
+import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
+import { KcClassDirective } from '@keycloakify/angular/account/directives/kc-class';
+import type { I18n } from '../../i18n';
+import type { KcContext } from '../../KcContext';
+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 type { ClassKey } from 'keycloakify/account';
+
+@Component({
+    standalone: true,
+    imports: [KcClassDirective, TemplateComponent, KcSanitizePipe, NgClass],
+    selector: 'kc-totp',
+    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);
+    active = 'totp';
+}

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

@@ -0,0 +1,65 @@
+import { DOCUMENT } from '@angular/common';
+import { APP_INITIALIZER, LOCALE_ID, makeEnvironmentProviders } from '@angular/core';
+import { I18nService } from '@keycloakify/angular/account/services/i18n';
+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 { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
+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,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @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/account-resource-injector/account-resource-injector.service.ts

@@ -0,0 +1,41 @@
+import { inject, Injectable } from '@angular/core';
+import { KC_ACCOUNT_CONTEXT } from '@keycloakify/angular/account/tokens/kc-context';
+import { Script } from '@keycloakify/angular/lib/models/script';
+import { ResourceInjectorService } from '@keycloakify/angular/lib/services/resource-injector';
+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/services/i18n/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/tokens/classes/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/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/kc-context.token.ts

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

package/src/lib/pipes/is-array-with-empty-object/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/{login/pipes → lib/pipes/kc-sanitize}/kc-sanitize.pipe.ts

@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import {
     DomSanitizer,
     SafeHtml,
@@ -10,25 +10,23 @@ import {
 
 @Pipe({ name: 'kcSanitize', standalone: true })
 export class KcSanitizePipe implements PipeTransform {
-    constructor(private sanitizer: DomSanitizer) {}
-    // TODO: Fix typing
+    #sanitizer = inject(DomSanitizer);
 
     transform(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        value: any,
-        type: string
+        value: string,
+        type: 'html' | 'style' | 'script' | 'url' | 'resourceUrl'
     ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
         switch (type) {
             case 'html':
-                return this.sanitizer.bypassSecurityTrustHtml(value);
+                return this.#sanitizer.bypassSecurityTrustHtml(value);
             case 'style':
-                return this.sanitizer.bypassSecurityTrustStyle(value);
+                return this.#sanitizer.bypassSecurityTrustStyle(value);
             case 'script':
-                return this.sanitizer.bypassSecurityTrustScript(value);
+                return this.#sanitizer.bypassSecurityTrustScript(value);
             case 'url':
-                return this.sanitizer.bypassSecurityTrustUrl(value);
+                return this.#sanitizer.bypassSecurityTrustUrl(value);
             case 'resourceUrl':
-                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+                return this.#sanitizer.bypassSecurityTrustResourceUrl(value);
             default:
                 throw new Error(`Invalid safe type specified: ${type}`);
         }

package/src/lib/services/{resource-injector.service.ts → resource-injector/resource-injector.service.ts}

@@ -1,6 +1,6 @@
 import { inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
 import { Observable } from 'rxjs';
-import { Script } from '../models/script.model';
+import { Script } from '@keycloakify/angular/lib/models/script';
 
 @Injectable({
     providedIn: 'root'

package/src/lib/tokens/use-default-css/use-default-css.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const USE_DEFAULT_CSS = new InjectionToken<boolean>('use default css');

package/src/login/classes/{component-reference.class.ts → component-reference/component-reference.class.ts}

@@ -1,4 +1,4 @@
-import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import type { 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

@@ -1,24 +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;
-  }
+    <button
+        type="button"
+        class="pf-c-button pf-m-inline pf-m-link"
+        [id]="'kc-remove-' + idPostfix"
+        (click)="onRemove()"
+    >
+        {{ i18n.msgStr('remove') }}
+    </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>
+    <button
+        type="button"
+        class="pf-c-button pf-m-inline pf-m-link"
+        [id]="'kc-add-' + idPostfix"
+        (click)="onAdd()"
+    >
+        {{ i18n.msgStr('addValue') }}
+    </button>
 }