@keycloakify/angular 0.0.1-rc.0

package/src/login/pages/webauthn-authenticate/webauthn-authenticate.component.html

@@ -0,0 +1,162 @@
+@let url = kcContext.url;
+@let authenticators = kcContext.authenticators;
+@let shouldDisplayAuthenticators = kcContext.shouldDisplayAuthenticators;
+
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'webauthn-login-title' | msgStr }}
+  </ng-container>
+  <ng-container infoNode>
+    <div id="kc-registration">
+      <span>
+        {{ 'noAccount' | msgStr }}
+        <a
+          tabIndex="6"
+          [href]="url.registrationUrl"
+        >
+          {{ 'doRegister' | msgStr }}
+        </a>
+      </span>
+    </div>
+  </ng-container>
+  <ng-container content>
+    <div
+      id="kc-form-webauthn"
+      [kcClass]="'kcFormClass'"
+    >
+      <form
+        id="webauth"
+        [action]="url.loginAction"
+        method="post"
+      >
+        <input
+          type="hidden"
+          id="clientDataJSON"
+          name="clientDataJSON"
+        />
+        <input
+          type="hidden"
+          id="authenticatorData"
+          name="authenticatorData"
+        />
+        <input
+          type="hidden"
+          id="signature"
+          name="signature"
+        />
+        <input
+          type="hidden"
+          id="credentialId"
+          name="credentialId"
+        />
+        <input
+          type="hidden"
+          id="userHandle"
+          name="userHandle"
+        />
+        <input
+          type="hidden"
+          id="error"
+          name="error"
+        />
+      </form>
+
+      <div
+        class="no-bottom-margin"
+        [kcClass]="'kcFormGroupClass'"
+      >
+        @if (authenticators) {
+          <form
+            id="authn_select"
+            [kcClass]="'kcFormClass'"
+          >
+            @for (authenticator of authenticators.authenticators; track authenticator.credentialId) {
+              <input
+                type="hidden"
+                name="authn_use_chk"
+                [value]="authenticator.credentialId"
+              />
+            }
+            @if (shouldDisplayAuthenticators) {
+              @if (authenticators.authenticators.length > 1) {
+                <p [kcClass]="'kcSelectAuthListItemTitle'">{{ 'webauthn-available-authenticators' | msgStr }}</p>
+              }
+              <div [kcClass]="'kcFormOptionsClass'">
+                @for (
+                  authenticator of authenticators.authenticators;
+                  track authenticator.credentialId;
+                  let i = $index
+                ) {
+                  <div
+                    [id]="'kc-webauthn-authenticator-item-' + i"
+                    [kcClass]="'kcSelectAuthListItemClass'"
+                  >
+                    <div [kcClass]="'kcSelectAuthListItemIconClass'">
+                      <i
+                        [ngClass]="selectAuthListItemIconClass(authenticator.transports.iconClass)"
+                        [kcClass]="'kcSelectAuthListItemIconPropertyClass'"
+                      ></i>
+                      <div [kcClass]="'kcSelectAuthListItemArrowIconClass'">
+                        <div
+                          [id]="'kc-webauthn-authenticator-label-' + i"
+                          [kcClass]="'kcSelectAuthListItemHeadingClass'"
+                        >
+                          {{ authenticator.label | advancedMsgStr }}
+                        </div>
+                        @if (authenticator.transports.displayNameProperties?.length) {
+                          <div
+                            [id]="'kc-webauthn-authenticator-transport-' + i"
+                            [kcClass]="'kcSelectAuthListItemDescriptionClass'"
+                          >
+                            @for (
+                              displayNameProperty of authenticator.transports.displayNameProperties;
+                              track displayNameProperty;
+                              let last = $last
+                            ) {
+                              {{ displayNameProperty | advancedMsgStr }}
+                              @if (!last) {
+                                <span>, </span>
+                              }
+                            }
+                          </div>
+                          <div [kcClass]="'kcSelectAuthListItemDescriptionClass'">
+                            <span [id]="'kc-webauthn-authenticator-createdlabel-' + i">
+                              {{ 'webauthn-createdAt-label' | msgStr }}
+                            </span>
+                            <span [id]="'kc-webauthn-authenticator-created-' + i">{{ authenticator.createdAt }}</span>
+                          </div>
+                          <div [kcClass]="'kcSelectAuthListItemFillClass'"></div>
+                        }
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+            }
+          </form>
+        }
+
+        <div
+          [kcClass]="'kcFormButtonsClass'"
+          id="kc-form-buttons"
+        >
+          <input
+            [id]="authButtonId"
+            type="button"
+            autofocus
+            [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+            id="cancelWebAuthnAIA"
+            name="cancel-aia"
+            [value]="'webauthn-doAuthenticate' | msgStr"
+          />
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</kc-login-template>

package/src/login/pages/webauthn-authenticate/webauthn-authenticate.component.ts

@@ -0,0 +1,106 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input
+} from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    USE_DEFAULT_CSS
+} from "@keycloakify/angular/lib/public-api";
+import { Script } from "@keycloakify/angular/lib/models";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { LogoutOtherSessionsComponent } from "@keycloakify/angular/login/components/logout-other-sessions/logout-other-sessions.component";
+import { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcClassDirective } from "@keycloakify/angular/login/directives";
+import { AdvancedMsgStrPipe } from "@keycloakify/angular/login/pipes/advanced-msg-str.pipe";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+import { LoginResourceInjectorService } from "@keycloakify/angular/login/services";
+
+@Component({
+    standalone: true,
+    imports: [
+        TemplateComponent,
+        MsgStrPipe,
+        AdvancedMsgStrPipe,
+        KcClassDirective,
+        LogoutOtherSessionsComponent
+    ],
+    selector: "kc-root",
+    templateUrl: "webauthn-authenticate.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        MsgStrPipe,
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => WebauthnAuthenticateComponent)
+        }
+    ]
+})
+export class WebauthnAuthenticateComponent extends ComponentReference {
+    kcContext =
+        inject<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>>(KC_CONTEXT);
+    loginResourceInjectorService = inject(LoginResourceInjectorService);
+    msgStr = inject(MsgStrPipe);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    displayRequiredFields = input(false);
+    documentTitle = input<string>();
+    bodyClassName = input<string>();
+    displayInfo: boolean = false;
+    displayMessage: boolean = true;
+
+    authButtonId = "authenticateWebAuthnButton";
+
+    constructor() {
+        super();
+        const {
+            url,
+            isUserIdentified,
+            challenge,
+            userVerification,
+            rpId,
+            createTimeout
+        } = this.kcContext;
+        const scripts: Script[] = [
+            {
+                type: "module",
+                id: "WebAuthnAuthenticateScript",
+                textContent: `
+              import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+              const authButton = document.getElementById('${this.authButtonId}');
+              authButton.addEventListener("click", function() {
+                  const input = {
+                      isUserIdentified : ${isUserIdentified},
+                      challenge : '${challenge}',
+                      userVerification : '${userVerification}',
+                      rpId : '${rpId}',
+                      createTimeout : ${createTimeout},
+                      errmsg : ${JSON.stringify(this.msgStr.transform("webauthn-unsupported-browser-text"))}
+                  };
+                  authenticateByWebAuthn(input);
+              });
+          `
+            }
+        ];
+        this.loginResourceInjectorService.insertAdditionalScripts(scripts);
+    }
+
+    selectAuthListItemIconClass(iconClass: string) {
+        const kcClsx = getKcClsx({
+            doUseDefaultCss: this.doUseDefaultCss ?? true,
+            classes: this.classes
+        }).kcClsx;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const className = kcClsx(iconClass as any);
+        if (className === iconClass) {
+            return kcClsx("kcWebAuthnDefaultIcon");
+        }
+        return className;
+    }
+}

package/src/login/pages/webauthn-error/webauthn-error.component.html

@@ -0,0 +1,60 @@
+@let url = kcContext.url;
+@let isAppInitiatedAction = kcContext.isAppInitiatedAction;
+
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'webauthn-error-title' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <form
+      id="kc-error-credential-form"
+      [kcClass]="'kcFormClass'"
+      [action]="url.loginAction"
+      method="post"
+    >
+      <input
+        type="hidden"
+        id="executionValue"
+        name="authenticationExecution"
+      />
+      <input
+        type="hidden"
+        id="isSetRetry"
+        name="isSetRetry"
+      />
+    </form>
+    <input
+      tabIndex="4"
+      (click)="onClick()"
+      type="button"
+      [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+      name="try-again"
+      id="kc-try-again"
+      [value]="'doTryAgain' | msgStr"
+    />
+    @if (isAppInitiatedAction) {
+      <form
+        [action]="url.loginAction"
+        [kcClass]="'kcFormClass'"
+        id="kc-webauthn-settings-form"
+        method="post"
+      >
+        <button
+          type="submit"
+          [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+          id="cancelWebAuthnAIA"
+          name="cancel-aia"
+          value="true"
+        >
+          {{ 'doCancel' | msgStr }}
+        </button>
+      </form>
+    }
+  </ng-container>
+</kc-login-template>

package/src/login/pages/webauthn-error/webauthn-error.component.ts

@@ -0,0 +1,57 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input
+} from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    USE_DEFAULT_CSS
+} from "@keycloakify/angular/lib/public-api";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { LogoutOtherSessionsComponent } from "@keycloakify/angular/login/components/logout-other-sessions/logout-other-sessions.component";
+import { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcClassDirective } from "@keycloakify/angular/login/directives";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+
+@Component({
+    standalone: true,
+    imports: [
+        TemplateComponent,
+        MsgStrPipe,
+        KcClassDirective,
+        LogoutOtherSessionsComponent
+    ],
+    selector: "kc-root",
+    templateUrl: "webauthn-error.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => WebauthnErrorComponent)
+        }
+    ]
+})
+export class WebauthnErrorComponent extends ComponentReference {
+    kcContext = inject<Extract<KcContext, { pageId: "webauthn-error.ftl" }>>(KC_CONTEXT);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    displayRequiredFields = input(false);
+    documentTitle = input<string>();
+    bodyClassName = input<string>();
+    displayInfo: boolean = false;
+    displayMessage: boolean = true;
+
+    onClick() {
+        // @ts-expect-error: Trusted Keycloak's code
+        document.getElementById("isSetRetry").value = "retry";
+        // @ts-expect-error: Trusted Keycloak's code
+        document.getElementById("executionValue").value = "${execution}";
+        // @ts-expect-error: Trusted Keycloak's code
+        document.getElementById("kc-error-credential-form").submit();
+    }
+}

package/src/login/pages/webauthn-register/webauthn-register.component.html

@@ -0,0 +1,82 @@
+@let url = kcContext.url;
+@let isSetRetry = kcContext.isSetRetry;
+@let isAppInitiatedAction = kcContext.isAppInitiatedAction;
+
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    <span [kcClass]="'kcWebAuthnKeyIcon'"></span>
+    {{ 'webauthn-registration-title' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <form
+      id="register"
+      [kcClass]="'kcFormClass'"
+      [action]="url.loginAction"
+      method="post"
+    >
+      <div [kcClass]="'kcFormGroupClass'">
+        <input
+          type="hidden"
+          id="clientDataJSON"
+          name="clientDataJSON"
+        />
+        <input
+          type="hidden"
+          id="attestationObject"
+          name="attestationObject"
+        />
+        <input
+          type="hidden"
+          id="publicKeyCredentialId"
+          name="publicKeyCredentialId"
+        />
+        <input
+          type="hidden"
+          id="authenticatorLabel"
+          name="authenticatorLabel"
+        />
+        <input
+          type="hidden"
+          id="transports"
+          name="transports"
+        />
+        <input
+          type="hidden"
+          id="error"
+          name="error"
+        />
+        <kc-logout-other-sessions />
+      </div>
+    </form>
+    <input
+      type="submit"
+      [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+      [id]="authButtonId"
+      [value]="'doRegisterSecurityKey' | msgStr"
+    />
+    @if (!isSetRetry && isAppInitiatedAction) {
+      <form
+        [action]="url.loginAction"
+        [kcClass]="'kcFormClass'"
+        id="kc-webauthn-settings-form"
+        method="post"
+      >
+        <button
+          type="submit"
+          [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+          id="cancelWebAuthnAIA"
+          name="cancel-aia"
+          value="true"
+        >
+          {{ 'doCancel' | msgStr }}
+        </button>
+      </form>
+    }
+  </ng-container>
+</kc-login-template>

package/src/login/pages/webauthn-register/webauthn-register.component.ts

@@ -0,0 +1,106 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    forwardRef,
+    inject,
+    input
+} from "@angular/core";
+import {
+    CLASSES,
+    KC_CONTEXT,
+    USE_DEFAULT_CSS
+} from "@keycloakify/angular/lib/public-api";
+import { Script } from "@keycloakify/angular/lib/models";
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+import { ComponentReference } from "@keycloakify/angular/login/classes/component-reference.class";
+import { LogoutOtherSessionsComponent } from "@keycloakify/angular/login/components/logout-other-sessions/logout-other-sessions.component";
+import { TemplateComponent } from "@keycloakify/angular/login/containers/template.component";
+import { KcClassDirective } from "@keycloakify/angular/login/directives";
+import { MsgStrPipe } from "@keycloakify/angular/login/pipes/msg-str.pipe";
+import { LoginResourceInjectorService } from "@keycloakify/angular/login/services";
+
+@Component({
+    standalone: true,
+    imports: [
+        TemplateComponent,
+        MsgStrPipe,
+        KcClassDirective,
+        LogoutOtherSessionsComponent
+    ],
+    selector: "kc-root",
+    templateUrl: "webauthn-register.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        MsgStrPipe,
+        {
+            provide: ComponentReference,
+            useExisting: forwardRef(() => WebauthnRegisterComponent)
+        }
+    ]
+})
+export class WebauthnRegisterComponent extends ComponentReference {
+    kcContext =
+        inject<Extract<KcContext, { pageId: "webauthn-register.ftl" }>>(KC_CONTEXT);
+    loginResourceInjectorService = inject(LoginResourceInjectorService);
+    msgStr = inject(MsgStrPipe);
+    override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
+    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    displayRequiredFields = input(false);
+    documentTitle = input<string>();
+    bodyClassName = input<string>();
+    displayInfo: boolean = false;
+    displayMessage: boolean = true;
+
+    authButtonId = "authenticateWebAuthnButton";
+
+    constructor() {
+        super();
+        const {
+            url,
+            challenge,
+            userid,
+            username,
+            signatureAlgorithms,
+            rpEntityName,
+            rpId,
+            attestationConveyancePreference,
+            authenticatorAttachment,
+            requireResidentKey,
+            userVerificationRequirement,
+            createTimeout,
+            excludeCredentialIds
+        } = this.kcContext;
+        const scripts: Script[] = [
+            {
+                type: "module",
+                id: "WebAuthnRegisterScript",
+                textContent: `
+              import { registerByWebAuthn } from "${url.resourcesPath}/js/webauthnRegister.js";
+              const registerButton = document.getElementById('${this.authButtonId}');
+              registerButton.addEventListener("click", function() {
+                  const input = {
+                      challenge : '${challenge}',
+                      userid : '${userid}',
+                      username : '${username}',
+                      signatureAlgorithms : ${JSON.stringify(signatureAlgorithms)},
+                      rpEntityName : ${JSON.stringify(rpEntityName)},
+                      rpId : ${JSON.stringify(rpId)},
+                      attestationConveyancePreference : ${JSON.stringify(attestationConveyancePreference)},
+                      authenticatorAttachment : ${JSON.stringify(authenticatorAttachment)},
+                      requireResidentKey : ${JSON.stringify(requireResidentKey)},
+                      userVerificationRequirement : ${JSON.stringify(userVerificationRequirement)},
+                      createTimeout : ${createTimeout},
+                      excludeCredentialIds : ${JSON.stringify(excludeCredentialIds)},
+                      initLabel : ${JSON.stringify(this.msgStr.transform("webauthn-registration-init-label"))},
+                      initLabelPrompt : ${JSON.stringify(this.msgStr.transform("webauthn-registration-init-label-prompt"))},
+                      errmsg : ${JSON.stringify(this.msgStr.transform("webauthn-unsupported-browser-text"))}
+                  };
+                  registerByWebAuthn(input);
+              });
+          `
+            }
+        ];
+        this.loginResourceInjectorService.insertAdditionalScripts(scripts);
+    }
+}

package/src/login/pipes/advanced-msg-str.pipe.ts

@@ -0,0 +1,13 @@
+import { inject, Pipe, PipeTransform } from "@angular/core";
+import { I18N } from "@keycloakify/angular/lib/public-api";
+import { I18n } from "../i18n";
+@Pipe({
+    name: "advancedMsgStr",
+    standalone: true
+})
+export class AdvancedMsgStrPipe implements PipeTransform {
+    readonly #i18n = inject<I18n>(I18N);
+    transform(value: string, ...args: (string | undefined)[]): string {
+        return this.#i18n.advancedMsgStr(value, ...args);
+    }
+}

package/src/login/pipes/index.ts

@@ -0,0 +1,6 @@
+export * from "./advanced-msg-str.pipe";
+export * from "./input-type.pipe";
+export * from "./kc-sanitize.pipe";
+export * from "./msg-str.pipe";
+export * from "./to-array.pipe";
+export * from "./to-number.pipe";

package/src/login/pipes/input-type.pipe.ts

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

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

@@ -0,0 +1,36 @@
+import { 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 {
+    constructor(private sanitizer: DomSanitizer) {}
+    // TODO: Fix typing
+
+    transform(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        value: any,
+        type: string
+    ): 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/login/pipes/msg-str.pipe.ts

@@ -0,0 +1,14 @@
+import { inject, Pipe, PipeTransform } from "@angular/core";
+import { I18N } from "@keycloakify/angular/lib/public-api";
+import { I18n } from "../i18n";
+import { MessageKey } from "keycloakify/login/i18n/messages_defaultSet/types";
+@Pipe({
+    name: "msgStr",
+    standalone: true
+})
+export class MsgStrPipe implements PipeTransform {
+    readonly #i18n = inject<I18n>(I18N);
+    transform(value: MessageKey, ...args: (string | undefined)[]): string {
+        return this.#i18n.msgStr(value, ...args);
+    }
+}

package/src/login/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];
+    }
+}