@keycloakify/angular 0.0.1-rc.17 → 0.0.1-rc.19

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

@@ -4,255 +4,251 @@
 @let stateChecker = kcContext.stateChecker;
 @let totp = kcContext.totp;
 
-<kc-account-template [active]="'totp'">
-    <ng-container content>
-        <div class="row">
-            <div class="col-md-10">
-                <h2>{{ i18n.msgStr('authenticatorTitle') }}</h2>
-            </div>
-            @if (totp.otpCredentials.length) {
-                <div class="subtitle col-md-2">
-                    <span class="required">*</span>
-                    {{ i18n.msgStr('requiredFields') }}
-                </div>
-            }
+<div 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>
-        @if (totp.enabled) {
-            <table class="table table-bordered table-striped">
-                <thead>
+    }
+</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) {
-                        <tr>
-                            <th [colSpan]="4">{{ i18n.msgStr('configureAuthenticators') }}</th>
-                        </tr>
-                    } @else {
-                        <tr>
-                            <th [colSpan]="3">{{ i18n.msgStr('configureAuthenticators') }}</th>
-                        </tr>
-                    }
-                </thead>
-                <tbody>
-                    @for (credential of totp.otpCredentials; track credential; let index = $index) {
-                        <tr>
-                            <td class="provider">{{ i18n.msgStr('mobile') }}</td>
-                            @if (totp.otpCredentials.length > 1) {
-                                <td class="provider">{{ credential.id }}</td>
-                            }
-                            <td class="provider">{{ credential.userLabel || '' }}</td>
-                            <td class="action">
-                                <form
-                                    [action]="url.totpUrl"
-                                    method="post"
-                                    class="form-inline"
-                                >
-                                    <input
-                                        type="hidden"
-                                        id="stateChecker"
-                                        name="stateChecker"
-                                        [value]="stateChecker"
-                                    />
-                                    <input
-                                        type="hidden"
-                                        id="submitAction"
-                                        name="submitAction"
-                                        value="Delete"
-                                    />
-                                    <input
-                                        type="hidden"
-                                        id="credentialId"
-                                        name="credentialId"
-                                        [value]="credential.id"
-                                    />
-                                    <button
-                                        [id]="'remove-mobile-' + index"
-                                        class="btn btn-default"
-                                    >
-                                        <i class="pficon pficon-delete"></i>
-                                    </button>
-                                </form>
-                            </td>
-                        </tr>
-                    }
-                </tbody>
-            </table>
-        } @else {
-            <div>
-                <hr />
-                <ol id="kc-totp-settings">
-                    <li>
-                        <p>{{ i18n.msgStr('totpStep1') }}</p>
-
-                        <ul id="kc-totp-supported-apps">
-                            @for (app of totp.supportedApplications; track app) {
-                                <li>{{ i18n.advancedMsgStr(app) }}</li>
-                            }
-                        </ul>
-                    </li>
-                    @if (mode && mode === 'manual') {
-                        <li>
-                            <p>{{ i18n.msgStr('totpManualStep2') }}</p>
-                            <p>
-                                <span id="kc-totp-secret-key">{{ totp.totpSecretEncoded }}</span>
-                            </p>
-                            <p>
-                                <a
-                                    [href]="totp.qrUrl"
-                                    id="mode-barcode"
-                                >
-                                    {{ i18n.msgStr('totpScanBarcode') }}
-                                </a>
-                            </p>
-                        </li>
-                        <li>
-                            <p>{{ i18n.msgStr('totpManualStep3') }}</p>
-                            <ul>
-                                <li id="kc-totp-type">{{ i18n.msgStr('totpType') }}: {{ i18n.msgStr($any('totp.' + totp.policy.type)) }}</li>
-                                <li id="kc-totp-algorithm">{{ i18n.msgStr('totpAlgorithm') }}: {{ totp.policy.getAlgorithmKey() }}</li>
-                                <li id="kc-totp-digits">{{ i18n.msgStr('totpDigits') }}: {{ totp.policy.digits }}</li>
-                                @if (totp.policy.type === 'totp') {
-                                    <li id="kc-totp-period">{{ i18n.msgStr('totpInterval') }}: {{ totp.policy.period }}</li>
-                                } @else {
-                                    <li id="kc-totp-counter">{{ i18n.msgStr('totpCounter') }}: {{ totp.policy.initialCounter }}</li>
-                                }
-                            </ul>
-                        </li>
-                    } @else {
-                        <li>
-                            <p>{{ i18n.msgStr('totpStep2') }}</p>
-                            <p>
-                                <img
-                                    id="kc-totp-secret-qr-code"
-                                    [src]="'data:image/png;base64, ' + totp.totpSecretQrCode"
-                                    alt="Figure: Barcode"
-                                />
-                            </p>
-                            <p>
-                                <a
-                                    [href]="totp.manualUrl"
-                                    id="mode-manual"
-                                >
-                                    {{ i18n.msgStr('totpUnableToScan') }}
-                                </a>
-                            </p>
-                        </li>
+                        <td class="provider">{{ credential.id }}</td>
                     }
-                    <li>
-                        <p>{{ i18n.msgStr('totpStep3') }}</p>
-                        <p>{{ i18n.msgStr('totpStep3DeviceName') }}</p>
-                    </li>
-                </ol>
-                <hr />
-                <form
-                    [action]="url.totpUrl"
-                    [kcClass]="'kcFormClass'"
-                    id="kc-totp-settings-form"
-                    method="post"
-                >
-                    <input
-                        type="hidden"
-                        id="stateChecker"
-                        name="stateChecker"
-                        [value]="stateChecker"
-                    />
-                    <div [kcClass]="'kcFormGroupClass'">
-                        <div class="col-sm-2 col-md-2">
-                            <label
-                                for="totp"
-                                class="control-label"
-                            >
-                                {{ i18n.msgStr('authenticatorCode') }}
-                            </label>
-                            <span class="required">*</span>
-                        </div>
-                        <div class="col-sm-10 col-md-10">
-                            <input
-                                type="text"
-                                id="totp"
-                                name="totp"
-                                autoComplete="off"
-                                [kcClass]="'kcInputClass'"
-                                [attr.aria-invalid]="messagesPerField.existsError('totp')"
-                            />
-                            @if (messagesPerField.existsError('totp')) {
-                                <span
-                                    id="input-error-otp-code"
-                                    [kcClass]="'kcInputErrorMessageClass'"
-                                    aria-live="polite"
-                                    [innerHTML]="messagesPerField.get('totp') | kcSanitize: 'html'"
-                                ></span>
-                            }
-                        </div>
-                        <input
-                            type="hidden"
-                            id="totpSecret"
-                            name="totpSecret"
-                            [value]="totp.totpSecret"
-                        />
-                        @if (mode) {
+                    <td class="provider">{{ credential.userLabel || '' }}</td>
+                    <td class="action">
+                        <form
+                            method="post"
+                            class="form-inline"
+                            [action]="url.totpUrl"
+                        >
                             <input
                                 type="hidden"
-                                id="mode"
-                                [value]="mode"
+                                id="stateChecker"
+                                name="stateChecker"
+                                [value]="stateChecker"
                             />
-                        }
-                    </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')"
+                                type="hidden"
+                                id="submitAction"
+                                name="submitAction"
+                                value="Delete"
                             />
-                            @if (messagesPerField.existsError('userLabel')) {
-                                <span
-                                    id="input-error-otp-label"
-                                    [kcClass]="'kcInputErrorMessageClass'"
-                                    aria-live="polite"
-                                    [innerHTML]="messagesPerField.get('userLabel') | kcSanitize: 'html'"
-                                ></span>
-                            }
-                        </div>
-                    </div>
-
-                    <div
-                        id="kc-form-buttons"
-                        class="text-right"
-                        [kcClass]="'kcFormGroupClass'"
-                    >
-                        <div [kcClass]="'kcInputWrapperClass'">
                             <input
-                                type="submit"
-                                [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
-                                id="saveTOTPBtn"
-                                [value]="i18n.msgStr('doSave')"
+                                type="hidden"
+                                id="credentialId"
+                                name="credentialId"
+                                [value]="credential.id"
                             />
                             <button
-                                type="submit"
-                                [kcClass]="['kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass']"
-                                id="cancelTOTPBtn"
-                                name="submitAction"
-                                value="Cancel"
+                                class="btn btn-default"
+                                [id]="'remove-mobile-' + index"
                             >
-                                {{ i18n.msgStr('doCancel') }}
+                                <i class="pficon pficon-delete"></i>
                             </button>
-                        </div>
-                    </div>
-                </form>
+                        </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>
-        }
-    </ng-container>
-</kc-account-template>
+        </form>
+    </div>
+}

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

@@ -3,19 +3,19 @@ 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';
-import type { I18n } from '../../i18n';
-import type { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
     imports: [KcClassDirective, TemplateComponent, KcSanitizePipe, NgClass],
-    selector: 'kc-root',
+    selector: 'kc-totp',
     templateUrl: 'totp.component.html',
     providers: [
         {
@@ -29,4 +29,5 @@ export class TotpComponent extends ComponentReference {
     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

@@ -24,6 +24,7 @@ export const provideKeycloakifyAngularAccount = (
     makeEnvironmentProviders([
         {
             provide: KC_ACCOUNT_CONTEXT,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             useValue: window.kcContext
         },

package/src/login/components/add-remove-buttons-multi-valued-attribute/add-remove-buttons-multi-valued-attribute.component.html

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

package/src/login/components/field-errors/field-errors.component.html

@@ -1,8 +1,8 @@
 @let index = fieldIndex();
 <span
+    aria-live="polite"
     [id]="'input-error-' + attribute.name + (index === undefined ? '' : '-' + index)"
     [kcClass]="'kcInputErrorMessageClass'"
-    aria-live="polite"
 >
     @for (error of displayableErrors(); track error; let i = $index) {
         @if (error.fieldIndex === index) {

package/src/login/components/input-field-by-type/input-field-by-type.component.html

@@ -8,7 +8,7 @@
                 [value]="$any(valueOrValues())"
                 [displayableErrors]="displayableErrors()"
                 (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-textarea-tag>
+            />
         }
         @case (type === 'select' || type === 'multiselect' ? type : '') {
             <kc-select-tag
@@ -16,7 +16,7 @@
                 [valueOrValues]="valueOrValues()"
                 [displayableErrors]="displayableErrors()"
                 (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-select-tag>
+            />
         }
         @case (type === 'select-radiobuttons' || type === 'multiselect-checkboxes' ? type : '') {
             <kc-input-tag-selects
@@ -24,7 +24,7 @@
                 [valueOrValues]="valueOrValues()"
                 [displayableErrors]="displayableErrors()"
                 (dispatchFormAction)="dispatchFormAction.emit($event)"
-            ></kc-input-tag-selects>
+            />
         }
         @default {
             @let values = valueOrValues();
@@ -37,7 +37,7 @@
                         [fieldIndex]="i"
                         [displayableErrors]="displayableErrors()"
                         (dispatchFormAction)="dispatchFormAction.emit($event)"
-                    ></kc-input-tag>
+                    />
                 }
             } @else {
                 @if (attr.name === 'password' || attr.name === 'password-confirm') {
@@ -47,7 +47,7 @@
                             [valueOrValues]="valueOrValues()"
                             [displayableErrors]="displayableErrors()"
                             (dispatchFormAction)="dispatchFormAction.emit($event)"
-                        ></kc-input-tag>
+                        />
                     </kc-password-wrapper>
                 } @else {
                     <kc-input-tag
@@ -55,7 +55,7 @@
                         [valueOrValues]="valueOrValues()"
                         [displayableErrors]="displayableErrors()"
                         (dispatchFormAction)="dispatchFormAction.emit($event)"
-                    ></kc-input-tag>
+                    />
                 }
             }
         }

package/src/login/components/input-tag/input-tag.component.html

@@ -34,12 +34,12 @@
             [attribute]="attr"
             [displayableErrors]="displayableErrors()"
             [fieldIndex]="index"
-        ></kc-field-errors>
+        />
         <kc-add-remove-buttons-multi-valued-attribute
             [attribute]="attr"
             [values]="values"
             [fieldIndex]="index"
             (dispatchFormAction)="dispatchFormAction.emit($event)"
-        ></kc-add-remove-buttons-multi-valued-attribute>
+        />
     }
 }

package/src/login/components/password-wrapper/password-wrapper.component.html

@@ -1,5 +1,5 @@
 <div [kcClass]="'kcInputGroup'">
-    <ng-content></ng-content>
+    <ng-content />
     <button
         type="button"
         [kcClass]="'kcFormPasswordVisibilityButtonClass'"
@@ -8,8 +8,8 @@
         (click)="togglePasswordVisibility()"
     >
         <i
-            [kcClass]="isPasswordRevealed() ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow'"
             aria-hidden="true"
+            [kcClass]="isPasswordRevealed() ? 'kcFormPasswordVisibilityIconHide' : 'kcFormPasswordVisibilityIconShow'"
         ></i>
     </button>
 </div>