@keycloakify/angular 0.0.1-rc.0

package/login/pages/login-passkeys-conditional-authenticate/login-passkeys-conditional-authenticate.component.html

@@ -0,0 +1,203 @@
+@let authenticators = kcContext.authenticators;
+@let realm = kcContext.realm;
+@let url = kcContext.url;
+@let shouldDisplayAuthenticators = kcContext.shouldDisplayAuthenticators;
+@let login = kcContext.login;
+@let messagesPerField = kcContext.messagesPerField;
+@let usernameHidden = kcContext.usernameHidden;
+@let registrationDisabled = kcContext.registrationDisabled;
+<kc-login-template [displayInfo]="displayInfo">
+  <ng-container headerNode>
+    {{ 'passkey-login-title' | msgStr }}
+  </ng-container>
+  <ng-container infoNode>
+    @if (realm.registrationAllowed && !registrationDisabled) {
+      <div id="kc-registration">
+        <span>
+          {{ 'noAccount' | msgStr }}
+          <a
+            tabIndex="6"
+            [href]="url.registrationUrl"
+          >
+            {{ 'doRegister' | msgStr }}
+          </a>
+        </span>
+      </div>
+    }
+  </ng-container>
+
+  <ng-container content>
+    <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
+      [kcClass]="'kcFormGroupClass'"
+      no-bottom-margin="true"
+      style="margin-bottom: 0"
+    >
+      @if (authenticators !== undefined && authenticators.authenticators.length !== 0) {
+        <form
+          id="authn_select"
+          [kcClass]="'kcFormClass'"
+        >
+          @for (authenticator of authenticators.authenticators; track authenticator; let i = $index) {
+            <input
+              type="hidden"
+              name="authn_use_chk"
+              readOnly
+              [value]="authenticator.credentialId"
+            />
+          }
+        </form>
+
+        @if (shouldDisplayAuthenticators) {
+          @if (authenticators.authenticators.length > 1) {
+            <p [kcClass]="'kcSelectAuthListItemTitle'">
+              {{ 'passkey-available-authenticators' | msgStr }}
+            </p>
+          }
+
+          <div [kcClass]="'kcFormClass'">
+            @for (authenticator of authenticators.authenticators; track authenticator; let i = $index) {
+              <div
+                id="'kc-webauthn-authenticator-item-' + i"
+                [kcClass]="'kcSelectAuthListItemClass'"
+              >
+                <i
+                  [ngClass]="selectAuthListItemIconClass(authenticator.transports.iconClass)"
+                  [kcClass]="'kcCommonLogoIdP'"
+                  aria-hidden="true"
+                ></i>
+                <div [kcClass]="'kcSelectAuthListItemBodyClass'">
+                  <div
+                    [id]="'kc-webauthn-authenticator-label-' + i"
+                    [kcClass]="'kcSelectAuthListItemHeadingClass'"
+                  >
+                    {{ authenticator.label | advancedMsgStr }}
+                  </div>
+                  @if (
+                    authenticator.transports !== undefined &&
+                    authenticator.transports.displayNameProperties !== undefined &&
+                    authenticator.transports.displayNameProperties.length !== 0
+                  ) {
+                    <div
+                      [id]="'kc-webauthn-authenticator-transport-' + i"
+                      [kcClass]="'kcSelectAuthListItemDescriptionClass'"
+                    >
+                      @for (
+                        nameProperty of authenticator.transports.displayNameProperties;
+                        track nameProperty;
+                        let i = $index
+                      ) {
+                        <span> {{ nameProperty | advancedMsgStr }} </span>
+                        @if (i !== authenticator.transports.displayNameProperties.length - 1) {
+                          <span>, </span>
+                        }
+                      }
+                    </div>
+                    <div [kcClass]="'kcSelectAuthListItemDescriptionClass'">
+                      <span [id]="'kc-webauthn-authenticator-createdlabel-' + i">
+                        {{ 'passkey-createdAt-label' | msgStr }}
+                      </span>
+                      <span [id]="'kc-webauthn-authenticator-created-' + i">
+                        {{ authenticator.createdAt }}
+                      </span>
+                    </div>
+                    <div [kcClass]="'kcSelectAuthListItemFillClass'"></div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        }
+      }
+      <div id="kc-form-wrapper">
+        @if (realm.password) {
+          <form
+            id="kc-form-passkey"
+            [action]="url.loginAction"
+            method="post"
+            style="display: none"
+          >
+            @if (!usernameHidden) {
+              <div [kcClass]="'kcFormGroupClass'">
+                <label
+                  for="username"
+                  [kcClass]="'kcLabelClass'"
+                >
+                  {{ 'passkey-autofill-select' | msgStr }}
+                </label>
+                <input
+                  tabIndex="1"
+                  id="username"
+                  [attr.aria-invalid]="messagesPerField.existsError('username')"
+                  [kcClass]="'kcInputClass'"
+                  name="username"
+                  [value]="login.username ?? ''"
+                  type="text"
+                  autoFocus
+                  autoComplete="off"
+                />
+                @if (messagesPerField.existsError('username')) {
+                  <span
+                    id="input-error-username"
+                    [kcClass]="'kcInputErrorMessageClass'"
+                    aria-live="polite"
+                  >
+                    {{ messagesPerField.get('username') }}
+                  </span>
+                }
+              </div>
+            }
+          </form>
+          <div
+            id="kc-form-passkey-button"
+            [kcClass]="'kcFormButtonsClass'"
+            style="display: none"
+          >
+            <input
+              id="authButtonId"
+              type="button"
+              autoFocus
+              value="{{ 'passkey-doAuthenticate' | msgStr }}"
+              [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+            />
+          </div>
+        }
+      </div>
+    </div>
+  </ng-container>
+</kc-login-template>

package/login/pages/login-passkeys-conditional-authenticate/login-passkeys-conditional-authenticate.component.js

@@ -0,0 +1,91 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var LoginPasskeysConditionalAuthenticateComponent_1;
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from "@angular/core";
+import { CLASSES, KC_CONTEXT, USE_DEFAULT_CSS } from "../../../lib/public-api";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import { ComponentReference } from "../../../login/classes/component-reference.class";
+import { TemplateComponent } from "../../../login/containers/template.component";
+import { KcClassDirective } from "../../../login/directives/kc-class.directive";
+import { AdvancedMsgStrPipe } from "../../../login/pipes/advanced-msg-str.pipe";
+import { MsgStrPipe } from "../../../login/pipes/msg-str.pipe";
+import { LoginResourceInjectorService } from "../../../login/services";
+let LoginPasskeysConditionalAuthenticateComponent = LoginPasskeysConditionalAuthenticateComponent_1 = class LoginPasskeysConditionalAuthenticateComponent extends ComponentReference {
+    constructor() {
+        super();
+        this.kcContext = inject(KC_CONTEXT);
+        this.loginResourceInjectorService = inject(LoginResourceInjectorService);
+        this.msgStr = inject(MsgStrPipe);
+        this.doUseDefaultCss = inject(USE_DEFAULT_CSS);
+        this.classes = inject(CLASSES);
+        this.displayInfo = true;
+        this.authButtonId = "authenticateWebAuthnButton";
+        const { url, challenge, rpId, userVerification, isUserIdentified, createTimeout } = this.kcContext;
+        const scripts = [
+            {
+                type: "module",
+                id: "LoginRecoveryAuthnCodeConfig",
+                textContent: `
+                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+                    import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
+
+                    const authButton = document.getElementById("${this.authButtonId}");
+                    const input = {
+                        isUserIdentified : ${isUserIdentified},
+                        challenge : ${JSON.stringify(challenge)},
+                        userVerification : ${JSON.stringify(userVerification)},
+                        rpId : ${JSON.stringify(rpId)},
+                        createTimeout : ${createTimeout}
+                    };
+                    authButton.addEventListener("click", () => {
+                        authenticateByWebAuthn({
+                            ...input,
+                            errmsg : ${JSON.stringify(this.msgStr.transform("webauthn-unsupported-browser-text"))}
+                        });
+                    });
+
+                    initAuthenticate({
+                        ...input,
+                        errmsg : ${JSON.stringify(this.msgStr.transform("passkey-unsupported-browser-text"))}
+                    });
+          `
+            }
+        ];
+        this.loginResourceInjectorService.insertAdditionalScripts(scripts);
+    }
+    selectAuthListItemIconClass(iconClass) {
+        var _a;
+        const kcClsx = getKcClsx({
+            doUseDefaultCss: (_a = this.doUseDefaultCss) !== null && _a !== void 0 ? _a : true,
+            classes: this.classes
+        }).kcClsx;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const className = kcClsx(iconClass);
+        if (className === iconClass) {
+            return kcClsx("kcWebAuthnDefaultIcon");
+        }
+        return className;
+    }
+};
+LoginPasskeysConditionalAuthenticateComponent = LoginPasskeysConditionalAuthenticateComponent_1 = __decorate([
+    Component({
+        standalone: true,
+        imports: [TemplateComponent, MsgStrPipe, KcClassDirective, AdvancedMsgStrPipe],
+        selector: "kc-root",
+        templateUrl: "login-passkeys-conditional-authenticate.component.html",
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        providers: [
+            MsgStrPipe,
+            {
+                provide: ComponentReference,
+                useExisting: forwardRef(() => LoginPasskeysConditionalAuthenticateComponent_1)
+            }
+        ]
+    })
+], LoginPasskeysConditionalAuthenticateComponent);
+export { LoginPasskeysConditionalAuthenticateComponent };
+//# sourceMappingURL=login-passkeys-conditional-authenticate.component.js.map

package/login/pages/login-passkeys-conditional-authenticate/login-passkeys-conditional-authenticate.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"login-passkeys-conditional-authenticate.component.js","sourceRoot":"","sources":["../../../src/login/pages/login-passkeys-conditional-authenticate/login-passkeys-conditional-authenticate.component.ts"],"names":[],"mappings":"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"}

package/login/pages/login-password/login-password.component.d.ts

@@ -0,0 +1,14 @@
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+import { ComponentReference } from "../../../login/classes/component-reference.class";
+export declare class LoginPasswordComponent extends ComponentReference {
+    kcContext: KcContext.LoginPassword;
+    doUseDefaultCss: boolean;
+    classes: Partial<Record<ClassKey, string>>;
+    displayRequiredFields: import("@angular/core").InputSignal<boolean>;
+    documentTitle: import("@angular/core").InputSignal<string | undefined>;
+    bodyClassName: import("@angular/core").InputSignal<string | undefined>;
+    displayInfo: boolean;
+    displayMessage: boolean;
+    isLoginButtonDisabled: import("@angular/core").WritableSignal<boolean>;
+}

package/login/pages/login-password/login-password.component.html

@@ -0,0 +1,90 @@
+@let url = kcContext.url;
+@let messagesPerField = kcContext.messagesPerField;
+@let realm = kcContext.realm;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'doLogIn' | msgStr }}
+  </ng-container>
+  <ng-container content>
+    <div id="kc-form">
+      <div id="kc-form-wrapper">
+        <form
+          id="kc-form-login"
+          (onSubmit)="isLoginButtonDisabled.set(true)"
+          [action]="url?.loginAction"
+          method="post"
+        >
+          <div
+            [kcClass]="'kcFormGroupClass'"
+            class="no-bottom-margin"
+          >
+            <hr />
+            <label
+              for="password"
+              [kcClass]="'kcLabelClass'"
+            >
+              {{ 'password' | msgStr }}
+            </label>
+            <kc-password-wrapper passwordInputId="password">
+              <input
+                type="password"
+                id="password"
+                name="password"
+                [kcClass]="'kcInputClass'"
+                [required]="true"
+                [autofocus]="true"
+                [tabindex]="1"
+                aria-describedby="input-error-password"
+              />
+            </kc-password-wrapper>
+
+            @if (messagesPerField.existsError('password')) {
+              <span
+                id="input-error-password"
+                [kcClass]="'kcInputErrorMessageClass'"
+                aria-live="polite"
+                [innerHTML]="messagesPerField.getFirstError('password') | kcSanitize: 'html'"
+              >
+              </span>
+            }
+          </div>
+          <div [kcClass]="['kcFormGroupClass', 'kcFormSettingClass']">
+            <div id="kc-form-options"></div>
+            <div [kcClass]="'kcFormOptionsWrapperClass'">
+              @if (realm.resetPasswordAllowed) {
+                <span>
+                  <a
+                    tabindex="5"
+                    href="{{ url.loginResetCredentialsUrl }}"
+                  >
+                    {{ 'doForgotPassword' | msgStr }}
+                  </a>
+                </span>
+              }
+            </div>
+          </div>
+          <div
+            id="kc-form-buttons"
+            [kcClass]="'kcFormGroupClass'"
+          >
+            <input
+              type="submit"
+              id="kc-login"
+              name="login"
+              [value]="'doLogIn' | msgStr"
+              [disabled]="isLoginButtonDisabled()"
+              [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+              [tabindex]="4"
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+  </ng-container>
+</kc-login-template>

package/login/pages/login-password/login-password.component.js

@@ -0,0 +1,52 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var LoginPasswordComponent_1;
+import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal } from "@angular/core";
+import { CLASSES, KC_CONTEXT, USE_DEFAULT_CSS } from "../../../lib/public-api";
+import { ComponentReference } from "../../../login/classes/component-reference.class";
+import { PasswordWrapperComponent } from "../../../login/components/password-wrapper/password-wrapper.component";
+import { TemplateComponent } from "../../../login/containers/template.component";
+import { KcClassDirective } from "../../../login/directives/kc-class.directive";
+import { KcSanitizePipe } from "../../../login/pipes/kc-sanitize.pipe";
+import { MsgStrPipe } from "../../../login/pipes/msg-str.pipe";
+let LoginPasswordComponent = LoginPasswordComponent_1 = class LoginPasswordComponent extends ComponentReference {
+    constructor() {
+        super(...arguments);
+        this.kcContext = inject(KC_CONTEXT);
+        this.doUseDefaultCss = inject(USE_DEFAULT_CSS);
+        this.classes = inject(CLASSES);
+        this.displayRequiredFields = input(false);
+        this.documentTitle = input();
+        this.bodyClassName = input();
+        this.displayInfo = false;
+        this.displayMessage = this.kcContext.messagesPerField.existsError("password");
+        this.isLoginButtonDisabled = signal(false);
+    }
+};
+LoginPasswordComponent = LoginPasswordComponent_1 = __decorate([
+    Component({
+        standalone: true,
+        imports: [
+            TemplateComponent,
+            MsgStrPipe,
+            KcClassDirective,
+            PasswordWrapperComponent,
+            KcSanitizePipe
+        ],
+        selector: "kc-root",
+        templateUrl: "login-password.component.html",
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        providers: [
+            {
+                provide: ComponentReference,
+                useExisting: forwardRef(() => LoginPasswordComponent_1)
+            }
+        ]
+    })
+], LoginPasswordComponent);
+export { LoginPasswordComponent };
+//# sourceMappingURL=login-password.component.js.map

package/login/pages/login-password/login-password.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"login-password.component.js","sourceRoot":"","sources":["../../../src/login/pages/login-password/login-password.component.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EACH,uBAAuB,EACvB,SAAS,EACT,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACT,MAAM,eAAe,CAAC;AACvB,OAAO,EACH,OAAO,EACP,UAAU,EACV,eAAe,EAClB,MAAM,qCAAqC,CAAC;AAG7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC;AAClG,OAAO,EAAE,wBAAwB,EAAE,MAAM,mFAAmF,CAAC;AAC7H,OAAO,EAAE,iBAAiB,EAAE,MAAM,0DAA0D,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AAqBpE,IAAM,sBAAsB,8BAA5B,MAAM,sBAAuB,SAAQ,kBAAkB;IAAvD;;QACH,cAAS,GAAG,MAAM,CAAuD,UAAU,CAAC,CAAC;QAC5E,oBAAe,GAAG,MAAM,CAAU,eAAe,CAAC,CAAC;QACnD,YAAO,GAAG,MAAM,CAAoC,OAAO,CAAC,CAAC;QACtE,0BAAqB,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;QACrC,kBAAa,GAAG,KAAK,EAAU,CAAC;QAChC,kBAAa,GAAG,KAAK,EAAU,CAAC;QAChC,gBAAW,GAAG,KAAK,CAAC;QACpB,mBAAc,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAEzE,0BAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;CAAA,CAAA;AAXY,sBAAsB;IAnBlC,SAAS,CAAC;QACP,UAAU,EAAE,IAAI;QAChB,OAAO,EAAE;YACL,iBAAiB;YACjB,UAAU;YACV,gBAAgB;YAChB,wBAAwB;YACxB,cAAc;SACjB;QACD,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,+BAA+B;QAC5C,eAAe,EAAE,uBAAuB,CAAC,MAAM;QAC/C,SAAS,EAAE;YACP;gBACI,OAAO,EAAE,kBAAkB;gBAC3B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,wBAAsB,CAAC;aACxD;SACJ;KACJ,CAAC;GACW,sBAAsB,CAWlC;SAXY,sBAAsB"}

package/login/pages/login-recovery-authn-code-config/login-recovery-authn-code-config.component.d.ts

@@ -0,0 +1,15 @@
+import { ClassKey } from "keycloakify/login/lib/kcClsx";
+import { KcContext } from "keycloakify/login/KcContext";
+import { ComponentReference } from "../../../login/classes/component-reference.class";
+export declare class LoginRecoveryAuthnCodeConfigComponent extends ComponentReference {
+    kcContext: KcContext.LoginRecoveryAuthnCodeConfig;
+    doUseDefaultCss: boolean;
+    classes: Partial<Record<ClassKey, string>>;
+    displayRequiredFields: import("@angular/core").InputSignal<boolean>;
+    documentTitle: import("@angular/core").InputSignal<string | undefined>;
+    bodyClassName: import("@angular/core").InputSignal<string | undefined>;
+    displayInfo: boolean;
+    displayMessage: boolean;
+    toggleRecoveryCodesConfirmation: import("@angular/core").WritableSignal<boolean>;
+    olRecoveryCodesListId: string;
+}

package/login/pages/login-recovery-authn-code-config/login-recovery-authn-code-config.component.html

@@ -0,0 +1,155 @@
+@let recoveryAuthnCodesConfigBean = kcContext.recoveryAuthnCodesConfigBean;
+@let isAppInitiatedAction = kcContext.isAppInitiatedAction;
+<kc-login-template
+  [displayInfo]="displayInfo"
+  [bodyClassName]="bodyClassName()"
+  [displayMessage]="displayMessage"
+  [displayRequiredFields]="displayRequiredFields()"
+  [documentTitle]="documentTitle()"
+>
+  <ng-container headerNode>
+    {{ 'recovery-code-config-header' | msgStr }}
+  </ng-container>
+
+  <ng-container content>
+    <div
+      [kcClass]="'kcRecoveryCodesWarning'"
+      class="pf-c-alert pf-m-warning pf-m-inline"
+      aria-label="Warning alert"
+    >
+      <div class="pf-c-alert__icon">
+        <i
+          class="pficon-warning-triangle-o"
+          aria-hidden="true"
+        ></i>
+      </div>
+      <h4 class="pf-c-alert__title">
+        <span class="pf-screen-reader">Warning alert:</span>
+        {{ 'recovery-code-config-warning-title' | msgStr }}
+      </h4>
+      <div class="pf-c-alert__description">
+        <p>{{ 'recovery-code-config-warning-message' | msgStr }}</p>
+      </div>
+    </div>
+
+    <ol
+      [id]="olRecoveryCodesListId"
+      [kcClass]="'kcRecoveryCodesList'"
+    >
+      @for (code of recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList; track code; let i = $index) {
+        <li>
+          <span>{{ i + 1 }}:</span> {{ code.slice(0, 4) }}-{{ code.slice(4, 8) }}-{{ code.slice(8) }}
+        </li>
+      }
+    </ol>
+
+    <!-- actions -->
+    <div [kcClass]="'kcRecoveryCodesActions'">
+      <button
+        id="printRecoveryCodes"
+        class="pf-c-button pf-m-link"
+        type="button"
+      >
+        <i
+          class="pficon-print"
+          aria-hidden="true"
+        ></i>
+        {{ 'recovery-codes-print' | msgStr }}
+      </button>
+      <button
+        id="downloadRecoveryCodes"
+        class="pf-c-button pf-m-link"
+        type="button"
+      >
+        <i
+          class="pficon-save"
+          aria-hidden="true"
+        ></i>
+        {{ 'recovery-codes-download' | msgStr }}
+      </button>
+      <button
+        id="copyRecoveryCodes"
+        class="pf-c-button pf-m-link"
+        type="button"
+      >
+        <i
+          class="pficon-blueprint"
+          aria-hidden="true"
+        ></i>
+        {{ 'recovery-codes-copy' | msgStr }}
+      </button>
+    </div>
+
+    <!-- confirmation checkbox -->
+
+    <div
+      [kcClass]="'kcFormOptionsClass'"
+      class="checkbox"
+    >
+      <label for="kcRecoveryCodesConfirmationCheck">
+        <input
+          [kcClass]="'kcCheckInputClass'"
+          type="checkbox"
+          id="kcRecoveryCodesConfirmationCheck"
+          name="kcRecoveryCodesConfirmationCheck"
+          [checked]="toggleRecoveryCodesConfirmation()"
+          (change)="toggleRecoveryCodesConfirmation.set($any($event.target).checked)"
+        />
+        {{ 'recovery-codes-confirmation-message' | msgStr }}
+      </label>
+    </div>
+
+    <form
+      [action]="kcContext.url.loginAction"
+      [kcClass]="'kcFormGroupClass'"
+      id="kc-recovery-codes-settings-form"
+      method="post"
+    >
+      <input
+        type="hidden"
+        name="generatedRecoveryAuthnCodes"
+        [value]="recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString"
+      />
+      <input
+        type="hidden"
+        name="generatedAt"
+        [value]="recoveryAuthnCodesConfigBean.generatedAt"
+      />
+      <input
+        type="hidden"
+        id="userLabel"
+        name="userLabel"
+        [value]="'recovery-codes-label-default' | msgStr"
+      />
+
+      <kc-logout-other-sessions></kc-logout-other-sessions>
+
+      @if (isAppInitiatedAction) {
+        <input
+          type="submit"
+          [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+          id="saveRecoveryAuthnCodesBtn"
+          [value]="'recovery-codes-action-complete' | msgStr"
+          [disabled]="!toggleRecoveryCodesConfirmation()"
+        />
+        <button
+          type="submit"
+          [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
+          id="cancelRecoveryAuthnCodesBtn"
+          name="cancel-aia"
+          value="true"
+        >
+          {{ 'recovery-codes-action-cancel' | msgStr }}
+        </button>
+      } @else {
+        <input
+          type="submit"
+          [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+          id="saveRecoveryAuthnCodesBtn"
+          [value]="'recovery-codes-action-complete' | msgStr"
+          [disabled]="!toggleRecoveryCodesConfirmation()"
+        />
+      }
+    </form>
+  </ng-container>
+</kc-login-template>