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

package/src/login/pages/login-config-totp/login-config-totp.component.html

@@ -4,187 +4,197 @@
 @let mode = kcContext.mode;
 @let isAppInitiatedAction = kcContext.isAppInitiatedAction;
 <kc-login-template
-  [displayInfo]="displayInfo"
-  [bodyClassName]="bodyClassName()"
-  [displayMessage]="displayMessage"
-  [displayRequiredFields]="displayRequiredFields()"
-  [documentTitle]="documentTitle()"
+    [displayInfo]="displayInfo"
+    [bodyClassName]="bodyClassName()"
+    [displayMessage]="displayMessage"
+    [displayRequiredFields]="displayRequiredFields()"
+    [documentTitle]="documentTitle()"
 >
-  <ng-container headerNode>
-    {{ 'loginTotpStep1' | msgStr }}
-  </ng-container>
-  <ng-container content>
-    <ol id="kc-totp-settings">
-      <li>
-        <p>{{ 'loginTotpStep1' | msgStr }}</p>
-        <ul id="kc-totp-supported-apps">
-          @for (app of totp.supportedApplications; track app) {
-            <li>{{ app | advancedMsgStr }}</li>
-          }
-        </ul>
-      </li>
-      @if (kcContext.mode === 'manual') {
-        <li>
-          <p>{{ 'loginTotpManualStep2' | msgStr }}</p>
-          <p>
-            <span id="kc-totp-secret-key">{{ totp.totpSecretEncoded }}</span>
-          </p>
-          <p>
-            <a
-              href="{{ totp.qrUrl }}"
-              id="mode-barcode"
-            >
-              {{ 'loginTotpScanBarcode' | msgStr }}
-            </a>
-          </p>
-        </li>
-        <li>
-          <p>{{ 'loginTotpManualStep3' | msgStr }}</p>
-          <p></p>
-          <ul>
-            <li id="kc-totp-type">
-              {{ 'loginTotpType' | msgStr }}: {{ 'loginTotp.' + totp.policy.type | advancedMsgStr }}
+    <ng-container headerNode>
+        {{ 'loginTotpStep1' | msgStr }}
+    </ng-container>
+    <ng-container content>
+        <ol id="kc-totp-settings">
+            <li>
+                <p>{{ 'loginTotpStep1' | msgStr }}</p>
+                <ul id="kc-totp-supported-apps">
+                    @for (app of totp.supportedApplications; track app) {
+                        <li>{{ app | advancedMsgStr }}</li>
+                    }
+                </ul>
             </li>
-            <li id="kc-totp-algorithm">{{ 'loginTotpAlgorithm' | msgStr }}: {{ totp.policy.getAlgorithmKey() }}</li>
-            <li id="kc-totp-digits">{{ 'loginTotpDigits' | msgStr }}: {{ totp.policy.digits }}</li>
-            @if (totp.policy.type === 'totp') {
-              <li id="kc-totp-period">{{ 'loginTotpInterval' | msgStr }}: {{ totp.policy.period }}</li>
+            @if (kcContext.mode === 'manual') {
+                <li>
+                    <p>{{ 'loginTotpManualStep2' | msgStr }}</p>
+                    <p>
+                        <span id="kc-totp-secret-key">{{ totp.totpSecretEncoded }}</span>
+                    </p>
+                    <p>
+                        <a
+                            href="{{ totp.qrUrl }}"
+                            id="mode-barcode"
+                        >
+                            {{ 'loginTotpScanBarcode' | msgStr }}
+                        </a>
+                    </p>
+                </li>
+                <li>
+                    <p>{{ 'loginTotpManualStep3' | msgStr }}</p>
+                    <p></p>
+                    <ul>
+                        <li id="kc-totp-type">
+                            {{ 'loginTotpType' | msgStr }}:
+                            {{ 'loginTotp.' + totp.policy.type | advancedMsgStr }}
+                        </li>
+                        <li id="kc-totp-algorithm">
+                            {{ 'loginTotpAlgorithm' | msgStr }}:
+                            {{ totp.policy.getAlgorithmKey() }}
+                        </li>
+                        <li id="kc-totp-digits">{{ 'loginTotpDigits' | msgStr }}: {{ totp.policy.digits }}</li>
+                        @if (totp.policy.type === 'totp') {
+                            <li id="kc-totp-period">
+                                {{ 'loginTotpInterval' | msgStr }}:
+                                {{ totp.policy.period }}
+                            </li>
+                        } @else {
+                            <li id="kc-totp-counter">
+                                {{ 'loginTotpCounter' | msgStr }}:
+                                {{ totp.policy.initialCounter }}
+                            </li>
+                        }
+                    </ul>
+                </li>
             } @else {
-              <li id="kc-totp-counter">{{ 'loginTotpCounter' | msgStr }}: {{ totp.policy.initialCounter }}</li>
+                <li>
+                    <p>{{ 'loginTotpStep2' | msgStr }}</p>
+                    <img
+                        id="kc-totp-secret-qr-code"
+                        src="{{ 'data:image/png;base64, ' + totp.totpSecretQrCode }}"
+                        alt="Figure: Barcode"
+                    />
+                    <br />
+                    <p>
+                        <a
+                            href="{{ totp.manualUrl }}"
+                            id="mode-manual"
+                        >
+                            {{ 'loginTotpUnableToScan' | msgStr }}
+                        </a>
+                    </p>
+                </li>
             }
-          </ul>
-        </li>
-      } @else {
-        <li>
-          <p>{{ 'loginTotpStep2' | msgStr }}</p>
-          <img
-            id="kc-totp-secret-qr-code"
-            src="{{ 'data:image/png;base64, ' + totp.totpSecretQrCode }}"
-            alt="Figure: Barcode"
-          />
-          <br />
-          <p>
-            <a
-              href="{{ totp.manualUrl }}"
-              id="mode-manual"
-            >
-              {{ 'loginTotpUnableToScan' | msgStr }}
-            </a>
-          </p>
-        </li>
-      }
-      <li>
-        <p>{{ 'loginTotpStep3' | msgStr }}</p>
-        <p>{{ 'loginTotpStep3DeviceName' | msgStr }}</p>
-      </li>
-    </ol>
-    <form
-      [action]="url.loginAction"
-      [kcClass]="'kcFormClass'"
-      id="kc-totp-settings-form"
-      method="post"
-    >
-      <div [kcClass]="'kcFormGroupClass'">
-        <div [kcClass]="'kcInputWrapperClass'">
-          <label
-            for="totp"
-            [kcClass]="'kcLabelClass'"
-          >
-            {{ 'authenticatorCode' | msgStr }}
-          </label>
-          <span class="required">*</span>
-        </div>
-        <div [kcClass]="'kcInputWrapperClass'">
-          <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 [kcClass]="'kcInputWrapperClass'">
-          <label
-            for="userLabel"
-            [kcClass]="'kcLabelClass'"
-          >
-            {{ 'loginTotpDeviceName' | msgStr }}
-          </label>
-          @if (totp.otpCredentials.length >= 1) {
-            <span class="required">*</span>
-          }
-        </div>
-        <div [kcClass]="'kcInputWrapperClass'">
-          <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 [kcClass]="'kcFormGroupClass'">
-        <kc-logout-other-sessions />
-      </div>
-
-      @if (isAppInitiatedAction) {
-        <input
-          type="submit"
-          [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
-          id="saveTOTPBtn"
-          [value]="'doSubmit' | msgStr"
-        />
-        <button
-          type="submit"
-          [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass', 'kcButtonLargeClass']"
-          id="cancelTOTPBtn"
-          name="cancel-aia"
-          [value]="true"
+            <li>
+                <p>{{ 'loginTotpStep3' | msgStr }}</p>
+                <p>{{ 'loginTotpStep3DeviceName' | msgStr }}</p>
+            </li>
+        </ol>
+        <form
+            [action]="url.loginAction"
+            [kcClass]="'kcFormClass'"
+            id="kc-totp-settings-form"
+            method="post"
         >
-          {{ 'doCancel' | msgStr }}
-        </button>
-      } @else {
-        <input
-          type="submit"
-          [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
-          id="saveTOTPBtn"
-          [value]="'doSubmit' | msgStr"
-        />
-      }
-    </form> </ng-container
-></kc-login-template>
->
+            <div [kcClass]="'kcFormGroupClass'">
+                <div [kcClass]="'kcInputWrapperClass'">
+                    <label
+                        for="totp"
+                        [kcClass]="'kcLabelClass'"
+                    >
+                        {{ 'authenticatorCode' | msgStr }}
+                    </label>
+                    <span class="required">*</span>
+                </div>
+                <div [kcClass]="'kcInputWrapperClass'">
+                    <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 [kcClass]="'kcInputWrapperClass'">
+                    <label
+                        for="userLabel"
+                        [kcClass]="'kcLabelClass'"
+                    >
+                        {{ 'loginTotpDeviceName' | msgStr }}
+                    </label>
+                    @if (totp.otpCredentials.length >= 1) {
+                        <span class="required">*</span>
+                    }
+                </div>
+                <div [kcClass]="'kcInputWrapperClass'">
+                    <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 [kcClass]="'kcFormGroupClass'">
+                <kc-logout-other-sessions />
+            </div>
+
+            @if (isAppInitiatedAction) {
+                <input
+                    type="submit"
+                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+                    id="saveTOTPBtn"
+                    [value]="'doSubmit' | msgStr"
+                />
+                <button
+                    type="submit"
+                    [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass', 'kcButtonLargeClass']"
+                    id="cancelTOTPBtn"
+                    name="cancel-aia"
+                    [value]="true"
+                >
+                    {{ 'doCancel' | msgStr }}
+                </button>
+            } @else {
+                <input
+                    type="submit"
+                    [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
+                    id="saveTOTPBtn"
+                    [value]="'doSubmit' | msgStr"
+                />
+            }
+        </form>
+    </ng-container>
+</kc-login-template>

package/src/login/pages/login-config-totp/login-config-totp.component.ts

@@ -1,15 +1,5 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input
-} from '@angular/core';
-import {
-    CLASSES,
-    KC_CONTEXT,
-    USE_DEFAULT_CSS
-} from '@keycloakify/angular/lib/public-api';
+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';
@@ -22,14 +12,7 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
 
 @Component({
     standalone: true,
-    imports: [
-        TemplateComponent,
-        MsgStrPipe,
-        AdvancedMsgStrPipe,
-        KcClassDirective,
-        KcSanitizePipe,
-        LogoutOtherSessionsComponent
-    ],
+    imports: [TemplateComponent, MsgStrPipe, AdvancedMsgStrPipe, KcClassDirective, KcSanitizePipe, LogoutOtherSessionsComponent],
     selector: 'kc-root',
     templateUrl: 'login-config-totp.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -41,8 +24,7 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginConfigTotpComponent extends ComponentReference {
-    kcContext =
-        inject<Extract<KcContext, { pageId: 'login-config-totp.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-config-totp.ftl' }>>(KC_CONTEXT);
 
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
     override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
@@ -50,8 +32,5 @@ export class LoginConfigTotpComponent extends ComponentReference {
     documentTitle = input<string>();
     bodyClassName = input<string>();
     displayInfo: boolean = false;
-    displayMessage: boolean = this.kcContext.messagesPerField.existsError(
-        'totp',
-        'userLabel'
-    );
+    displayMessage: boolean = this.kcContext.messagesPerField.existsError('totp', 'userLabel');
 }

package/src/login/pages/login-idp-link-confirm/login-idp-link-confirm.component.html

@@ -1,41 +1,41 @@
 @let url = kcContext.url;
 @let idpAlias = kcContext.idpAlias;
 <kc-login-template
-  [displayInfo]="displayInfo"
-  [bodyClassName]="bodyClassName()"
-  [displayMessage]="displayMessage"
-  [displayRequiredFields]="displayRequiredFields()"
-  [documentTitle]="documentTitle()"
+    [displayInfo]="displayInfo"
+    [bodyClassName]="bodyClassName()"
+    [displayMessage]="displayMessage"
+    [displayRequiredFields]="displayRequiredFields()"
+    [documentTitle]="documentTitle()"
 >
-  <ng-container headerNode>
-    {{ 'confirmLinkIdpTitle' | msgStr }}
-  </ng-container>
-  <ng-container content>
-    <form
-      id="kc-register-form"
-      [action]="url.loginAction"
-      method="post"
-    >
-      <div [kcClass]="'kcFormGroupClass'">
-        <button
-          type="submit"
-          [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
-          name="submitAction"
-          id="updateProfile"
-          value="updateProfile"
+    <ng-container headerNode>
+        {{ 'confirmLinkIdpTitle' | msgStr }}
+    </ng-container>
+    <ng-container content>
+        <form
+            id="kc-register-form"
+            [action]="url.loginAction"
+            method="post"
         >
-          {{ 'confirmLinkIdpReviewProfile' | msgStr }}
-        </button>
-        <button
-          type="submit"
-          [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
-          name="submitAction"
-          id="linkAccount"
-          value="linkAccount"
-        >
-          {{ 'confirmLinkIdpContinue' | msgStr: idpAlias }}
-        </button>
-      </div>
-    </form>
-  </ng-container>
+            <div [kcClass]="'kcFormGroupClass'">
+                <button
+                    type="submit"
+                    [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+                    name="submitAction"
+                    id="updateProfile"
+                    value="updateProfile"
+                >
+                    {{ 'confirmLinkIdpReviewProfile' | msgStr }}
+                </button>
+                <button
+                    type="submit"
+                    [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+                    name="submitAction"
+                    id="linkAccount"
+                    value="linkAccount"
+                >
+                    {{ 'confirmLinkIdpContinue' | msgStr: idpAlias }}
+                </button>
+            </div>
+        </form>
+    </ng-container>
 </kc-login-template>

package/src/login/pages/login-idp-link-confirm/login-idp-link-confirm.component.ts

@@ -1,15 +1,5 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input
-} from '@angular/core';
-import {
-    CLASSES,
-    KC_CONTEXT,
-    USE_DEFAULT_CSS
-} from '@keycloakify/angular/lib/public-api';
+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';
@@ -31,8 +21,7 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginIdpLinkConfirmComponent extends ComponentReference {
-    kcContext =
-        inject<Extract<KcContext, { pageId: 'login-idp-link-confirm.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-idp-link-confirm.ftl' }>>(KC_CONTEXT);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
     override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
     displayRequiredFields = input(false);

package/src/login/pages/login-idp-link-confirm-override/login-idp-link-confirm-override.component.html

@@ -2,39 +2,39 @@
 @let idpDisplayName = kcContext.idpDisplayName;
 
 <kc-login-template
-  [displayInfo]="displayInfo"
-  [bodyClassName]="bodyClassName()"
-  [displayMessage]="displayMessage"
-  [displayRequiredFields]="displayRequiredFields()"
-  [documentTitle]="documentTitle()"
+    [displayInfo]="displayInfo"
+    [bodyClassName]="bodyClassName()"
+    [displayMessage]="displayMessage"
+    [displayRequiredFields]="displayRequiredFields()"
+    [documentTitle]="documentTitle()"
 >
-  <ng-container headerNode>
-    {{ 'confirmOverrideIdpTitle' | msgStr }}
-  </ng-container>
-  <ng-container content>
-    <form
-      id="kc-register-form"
-      [action]="url.loginAction"
-      method="post"
-    >
-      {{ 'pageExpiredMsg1' | msgStr }}
-      <a
-        id="loginRestartLink"
-        [href]="url.loginRestartFlowUrl"
-      >
-        {{ 'doClickHere' | msgStr }}
-      </a>
-      <br />
-      <br />
-      <button
-        type="submit"
-        [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
-        name="submitAction"
-        id="confirmOverride"
-        value="confirmOverride"
-      >
-        {{ 'confirmOverrideIdpContinue' | msgStr: idpDisplayName }}
-      </button>
-    </form>
-  </ng-container>
+    <ng-container headerNode>
+        {{ 'confirmOverrideIdpTitle' | msgStr }}
+    </ng-container>
+    <ng-container content>
+        <form
+            id="kc-register-form"
+            [action]="url.loginAction"
+            method="post"
+        >
+            {{ 'pageExpiredMsg1' | msgStr }}
+            <a
+                id="loginRestartLink"
+                [href]="url.loginRestartFlowUrl"
+            >
+                {{ 'doClickHere' | msgStr }}
+            </a>
+            <br />
+            <br />
+            <button
+                type="submit"
+                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
+                name="submitAction"
+                id="confirmOverride"
+                value="confirmOverride"
+            >
+                {{ 'confirmOverrideIdpContinue' | msgStr: idpDisplayName }}
+            </button>
+        </form>
+    </ng-container>
 </kc-login-template>

package/src/login/pages/login-idp-link-confirm-override/login-idp-link-confirm-override.component.ts

@@ -1,15 +1,5 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input
-} from '@angular/core';
-import {
-    CLASSES,
-    KC_CONTEXT,
-    USE_DEFAULT_CSS
-} from '@keycloakify/angular/lib/public-api';
+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';
@@ -31,10 +21,7 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginIdpLinkConfirmOverrideComponent extends ComponentReference {
-    kcContext =
-        inject<Extract<KcContext, { pageId: 'login-idp-link-confirm-override.ftl' }>>(
-            KC_CONTEXT
-        );
+    kcContext = inject<Extract<KcContext, { pageId: 'login-idp-link-confirm-override.ftl' }>>(KC_CONTEXT);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
     override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
     displayRequiredFields = input(false);