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

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

@@ -1,15 +1,18 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject } 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 { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
 import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pipe';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { I18n } from '../../i18n';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, KcSanitizePipe],
+    imports: [TemplateComponent, KcSanitizePipe],
     selector: 'kc-root',
     templateUrl: 'error.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,7 +24,8 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class ErrorComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'error.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'error.ftl' }>>(KC_LOGIN_CONTEXT);
+    i18n = inject<I18n>(LOGIN_I18N);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
 }

package/src/login/pages/frontchannel-logout/frontchannel-logout.component.html

@@ -4,13 +4,13 @@
     [bodyClassName]="bodyClassName()"
     [displayMessage]="displayMessage"
     [displayRequiredFields]="displayRequiredFields()"
-    [documentTitle]="'frontchannel-logout.title' | msgStr"
+    [documentTitle]="i18n.msgStr('frontchannel-logout.title')"
 >
     <ng-container headerNode>
-        {{ 'frontchannel-logout.title' | msgStr }}
+        {{ i18n.msgStr('frontchannel-logout.title') }}
     </ng-container>
     <ng-container content>
-        <p>{{ 'frontchannel-logout.message' | msgStr }}</p>
+        <p>{{ i18n.msgStr('frontchannel-logout.message') }}</p>
         <ul>
             @for (client of logout.clients; track client.name; let idx = $index) {
                 <li>
@@ -28,7 +28,7 @@
                 class="btn btn-primary"
                 [href]="logout.logoutRedirectUri"
             >
-                {{ 'doContinue' | msgStr }}
+                {{ i18n.msgStr('doContinue') }}
             </a>
         }
     </ng-container>

package/src/login/pages/frontchannel-logout/frontchannel-logout.component.ts

@@ -1,15 +1,18 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input, OnInit } 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 { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
 import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pipe';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { I18n } from '../../i18n';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, KcSanitizePipe],
+    imports: [TemplateComponent, KcSanitizePipe],
     selector: 'kc-root',
     templateUrl: 'frontchannel-logout.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,9 +24,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class FrontchannelLogoutComponent extends ComponentReference implements OnInit {
-    kcContext = inject<Extract<KcContext, { pageId: 'frontchannel-logout.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'frontchannel-logout.ftl' }>>(KC_LOGIN_CONTEXT);
+    i18n = inject<I18n>(LOGIN_I18N);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
     displayRequiredFields = input(false);
     bodyClassName = input<string>();
     displayInfo: boolean = false;

package/src/login/pages/idp-review-user-profile/idp-review-user-profile.component.html

@@ -7,7 +7,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'loginIdpReviewProfileTitle' | msgStr }}
+        {{ i18n.msgStr('loginIdpReviewProfileTitle') }}
     </ng-container>
     <ng-container content>
         <form
@@ -31,7 +31,7 @@
                     <input
                         [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                         type="submit"
-                        value="{{ 'doSubmit' | msgStr }}"
+                        [value]="i18n.msgStr('doSubmit')"
                         [disabled]="!isFormSubmittable"
                     />
                 </div>

package/src/login/pages/idp-review-user-profile/idp-review-user-profile.component.ts

@@ -1,16 +1,19 @@
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal } 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 { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
 import { UserProfileFormFieldsComponent } from '@keycloakify/angular/login/components/user-profile-form-fields/user-profile-form-fields.component';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { I18n } from '../../i18n';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, UserProfileFormFieldsComponent, KcClassDirective],
+    imports: [TemplateComponent, UserProfileFormFieldsComponent, KcClassDirective],
     selector: 'kc-root',
     templateUrl: 'idp-review-user-profile.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,12 +25,13 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class IdpReviewUserProfileComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'idp-review-user-profile.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'idp-review-user-profile.ftl' }>>(KC_LOGIN_CONTEXT);
     displayRequiredFields = input(true);
     documentTitle = input<string>();
     bodyClassName = input<string>();
+    i18n = inject<I18n>(LOGIN_I18N);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
     isFormSubmittable = signal(false);
     displayInfo: boolean = false;
     displayMessage: boolean = !this.kcContext?.messagesPerField?.existsError('global');

package/src/login/pages/info/info.component.html

@@ -12,7 +12,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        <span [innerHTML]="messageHeader ?? message.summary | advancedMsgStr | kcSanitize: 'html'"> </span>
+        <span [innerHTML]="messageHeader ?? i18n.advancedMsgStr(message.summary) | kcSanitize: 'html'"> </span>
     </ng-container>
     <ng-container content>
         <div id="kc-info-message">
@@ -25,7 +25,7 @@
                     <p>
                         <a
                             [href]="pageRedirectUri"
-                            [innerHTML]="'backToApplication' | msgStr | kcSanitize: 'html'"
+                            [innerHTML]="i18n.msgStr('backToApplication') | kcSanitize: 'html'"
                         >
                         </a>
                     </p>
@@ -34,7 +34,7 @@
                     <p>
                         <a
                             [href]="actionUri"
-                            [innerHTML]="'proceedWithAction' | msgStr | kcSanitize: 'html'"
+                            [innerHTML]="i18n.msgStr('proceedWithAction') | kcSanitize: 'html'"
                         >
                         </a>
                     </p>
@@ -43,7 +43,7 @@
                     <p>
                         <a
                             [href]="client.baseUrl"
-                            [innerHTML]="'backToApplication' | msgStr | kcSanitize: 'html'"
+                            [innerHTML]="i18n.msgStr('backToApplication') | kcSanitize: 'html'"
                         >
                         </a>
                     </p>

package/src/login/pages/info/info.component.ts

@@ -1,23 +1,22 @@
 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 { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
-import { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-msg-str.pipe';
 import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pipe';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { I18n } from '../../i18n';
+import { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, KcSanitizePipe, AdvancedMsgStrPipe],
+    imports: [TemplateComponent, KcSanitizePipe],
     selector: 'kc-root',
     templateUrl: 'info.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
-        AdvancedMsgStrPipe,
-        MsgStrPipe,
-        KcSanitizePipe,
         {
             provide: ComponentReference,
             useExisting: forwardRef(() => InfoComponent)
@@ -25,12 +24,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class InfoComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'info.ftl' }>>(KC_CONTEXT);
-    advancedMsgStr = inject(AdvancedMsgStrPipe);
-    kcSanitize = inject(KcSanitizePipe);
-    msgStr = inject(MsgStrPipe);
+    kcContext = inject<Extract<KcContext, { pageId: 'info.ftl' }>>(KC_LOGIN_CONTEXT);
+    i18n = inject<I18n>(LOGIN_I18N);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
     displayRequiredFields = input(false);
     documentTitle = input<string>();
     bodyClassName = input<string>();
@@ -42,9 +39,7 @@ export class InfoComponent extends ComponentReference {
         if (this.kcContext.requiredActions) {
             html += '<b>';
 
-            html += this.kcContext.requiredActions
-                .map(requiredAction => this.advancedMsgStr.transform(`requiredAction.${requiredAction}`))
-                .join(', ');
+            html += this.kcContext.requiredActions.map(requiredAction => this.i18n.advancedMsgStr(`requiredAction.${requiredAction}`)).join(', ');
 
             html += '</b>';
         }

package/src/login/pages/login/login.component.html

@@ -14,18 +14,18 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'loginAccountTitle' | msgStr }}
+        {{ i18n.msgStr('loginAccountTitle') }}
     </ng-container>
     <ng-container infoNode>
         <div id="kc-registration-container">
             <div id="kc-registration">
                 <span>
-                    {{ 'noAccount' | msgStr }}
+                    {{ i18n.msgStr('noAccount') }}
                     <a
                         tabindex="8"
                         [href]="url?.registrationUrl"
                     >
-                        {{ 'doRegister' | msgStr }}
+                        {{ i18n.msgStr('doRegister') }}
                     </a>
                 </span>
             </div>
@@ -38,7 +38,7 @@
                 [kcClass]="'kcFormSocialAccountSectionClass'"
             >
                 <hr />
-                <h2>{{ 'identity-provider-login-label' | msgStr }}</h2>
+                <h2>{{ i18n.msgStr('identity-provider-login-label') }}</h2>
                 <ul
                     [kcClass]="{
                         kcFormSocialAccountListClass: true,
@@ -95,11 +95,11 @@
                                     [kcClass]="'kcLabelClass'"
                                 >
                                     @if (!realm?.loginWithEmailAllowed) {
-                                        {{ 'username' | msgStr }}
+                                        {{ i18n.msgStr('username') }}
                                     } @else if (!realm?.registrationEmailAsUsername) {
-                                        {{ 'usernameOrEmail' | msgStr }}
+                                        {{ i18n.msgStr('usernameOrEmail') }}
                                     } @else {
-                                        {{ 'email' | msgStr }}
+                                        {{ i18n.msgStr('email') }}
                                     }
                                 </label>
                                 <input
@@ -117,7 +117,7 @@
                                         id="input-error"
                                         [kcClass]="'kcInputErrorMessageClass'"
                                         aria-live="polite"
-                                        [innerHTML]="messagesPerField?.getFirstError('username', 'password') | kcSanitize: 'html'"
+                                        [innerHTML]="messagesPerField.getFirstError('username', 'password') | kcSanitize: 'html'"
                                     >
                                     </span>
                                 }
@@ -129,7 +129,7 @@
                                 for="password"
                                 [kcClass]="'kcLabelClass'"
                             >
-                                {{ 'password' | msgStr }}
+                                {{ i18n.msgStr('password') }}
                             </label>
 
                             <kc-password-wrapper passwordInputId="password">
@@ -148,7 +148,7 @@
                                     id="input-error"
                                     [kcClass]="'kcInputErrorMessageClass'"
                                     aria-live="polite"
-                                    [innerHTML]="messagesPerField?.getFirstError('username', 'password') | kcSanitize: 'html'"
+                                    [innerHTML]="messagesPerField.getFirstError('username', 'password') | kcSanitize: 'html'"
                                 >
                                 </span>
                             }
@@ -166,7 +166,7 @@
                                                 type="checkbox"
                                                 [defaultChecked]="!!login?.rememberMe"
                                             />
-                                            {{ 'rememberMe' | msgStr }}
+                                            {{ i18n.msgStr('rememberMe') }}
                                         </label>
                                     </div>
                                 }
@@ -178,7 +178,7 @@
                                         <a
                                             tabindex="6"
                                             [href]="url?.loginResetCredentialsUrl"
-                                            >{{ 'doForgotPassword' | msgStr }}</a
+                                            >{{ i18n.msgStr('doForgotPassword') }}</a
                                         >
                                     </span>
                                 }
@@ -200,7 +200,7 @@
                                 name="login"
                                 id="kc-login"
                                 type="submit"
-                                [value]="'doLogIn' | msgStr"
+                                [value]="i18n.msgStr('doLogIn')"
                                 [disabled]="isLoginButtonDisabled()"
                             />
                         </div>

package/src/login/pages/login/login.component.ts

@@ -1,21 +1,24 @@
 import { AsyncPipe, NgClass } from '@angular/common';
 import { ChangeDetectionStrategy, Component, forwardRef, inject, input, signal } 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 { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference.class';
 import { PasswordWrapperComponent } from '@keycloakify/angular/login/components/password-wrapper/password-wrapper.component';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
 import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
 import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pipe';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { I18n } from '../../i18n';
+import { KcContext } from '../../KcContext';
 
 @Component({
     selector: 'kc-root',
     templateUrl: './login.component.html',
     standalone: true,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [KcClassDirective, AsyncPipe, KcSanitizePipe, PasswordWrapperComponent, NgClass, TemplateComponent, MsgStrPipe],
+    imports: [KcClassDirective, AsyncPipe, KcSanitizePipe, PasswordWrapperComponent, NgClass, TemplateComponent],
     providers: [
         {
             provide: ComponentReference,
@@ -24,12 +27,13 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login.ftl' }>>(KC_LOGIN_CONTEXT);
     displayRequiredFields = input(false);
     documentTitle = input<string>();
     bodyClassName = input<string>();
+    i18n = inject<I18n>(LOGIN_I18N);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
     isLoginButtonDisabled = signal(false);
     displayInfo: boolean = !!this.kcContext?.realm?.password && !!this.kcContext?.realm?.registrationAllowed && !this.kcContext?.registrationDisabled;
     displayMessage: boolean = !this.kcContext?.messagesPerField?.existsError('username', 'password');

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

@@ -11,54 +11,54 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'loginTotpStep1' | msgStr }}
+        {{ i18n.msgStr('loginTotpStep1') }}
     </ng-container>
     <ng-container content>
         <ol id="kc-totp-settings">
             <li>
-                <p>{{ 'loginTotpStep1' | msgStr }}</p>
+                <p>{{ i18n.msgStr('loginTotpStep1') }}</p>
                 <ul id="kc-totp-supported-apps">
                     @for (app of totp.supportedApplications; track app) {
-                        <li>{{ app | advancedMsgStr }}</li>
+                        <li>{{ i18n.advancedMsgStr(app) }}</li>
                     }
                 </ul>
             </li>
             @if (kcContext.mode === 'manual') {
                 <li>
-                    <p>{{ 'loginTotpManualStep2' | msgStr }}</p>
+                    <p>{{ i18n.msgStr('loginTotpManualStep2') }}</p>
                     <p>
                         <span id="kc-totp-secret-key">{{ totp.totpSecretEncoded }}</span>
                     </p>
                     <p>
                         <a
-                            href="{{ totp.qrUrl }}"
+                            [href]="totp.qrUrl"
                             id="mode-barcode"
                         >
-                            {{ 'loginTotpScanBarcode' | msgStr }}
+                            {{ i18n.msgStr('loginTotpScanBarcode') }}
                         </a>
                     </p>
                 </li>
                 <li>
-                    <p>{{ 'loginTotpManualStep3' | msgStr }}</p>
+                    <p>{{ i18n.msgStr('loginTotpManualStep3') }}</p>
                     <p></p>
                     <ul>
                         <li id="kc-totp-type">
-                            {{ 'loginTotpType' | msgStr }}:
-                            {{ 'loginTotp.' + totp.policy.type | advancedMsgStr }}
+                            {{ i18n.msgStr('loginTotpType') }}:
+                            {{ i18n.advancedMsgStr('loginTotp.' + totp.policy.type) }}
                         </li>
                         <li id="kc-totp-algorithm">
-                            {{ 'loginTotpAlgorithm' | msgStr }}:
+                            {{ i18n.msgStr('loginTotpAlgorithm') }}:
                             {{ totp.policy.getAlgorithmKey() }}
                         </li>
-                        <li id="kc-totp-digits">{{ 'loginTotpDigits' | msgStr }}: {{ totp.policy.digits }}</li>
+                        <li id="kc-totp-digits">{{ i18n.msgStr('loginTotpDigits') }}: {{ totp.policy.digits }}</li>
                         @if (totp.policy.type === 'totp') {
                             <li id="kc-totp-period">
-                                {{ 'loginTotpInterval' | msgStr }}:
+                                {{ i18n.msgStr('loginTotpInterval') }}:
                                 {{ totp.policy.period }}
                             </li>
                         } @else {
                             <li id="kc-totp-counter">
-                                {{ 'loginTotpCounter' | msgStr }}:
+                                {{ i18n.msgStr('loginTotpCounter') }}:
                                 {{ totp.policy.initialCounter }}
                             </li>
                         }
@@ -66,26 +66,26 @@
                 </li>
             } @else {
                 <li>
-                    <p>{{ 'loginTotpStep2' | msgStr }}</p>
+                    <p>{{ i18n.msgStr('loginTotpStep2') }}</p>
                     <img
                         id="kc-totp-secret-qr-code"
-                        src="{{ 'data:image/png;base64, ' + totp.totpSecretQrCode }}"
+                        [src]="'data:image/png;base64, ' + totp.totpSecretQrCode"
                         alt="Figure: Barcode"
                     />
                     <br />
                     <p>
                         <a
-                            href="{{ totp.manualUrl }}"
+                            [href]="totp.manualUrl"
                             id="mode-manual"
                         >
-                            {{ 'loginTotpUnableToScan' | msgStr }}
+                            {{ i18n.msgStr('loginTotpUnableToScan') }}
                         </a>
                     </p>
                 </li>
             }
             <li>
-                <p>{{ 'loginTotpStep3' | msgStr }}</p>
-                <p>{{ 'loginTotpStep3DeviceName' | msgStr }}</p>
+                <p>{{ i18n.msgStr('loginTotpStep3') }}</p>
+                <p>{{ i18n.msgStr('loginTotpStep3DeviceName') }}</p>
             </li>
         </ol>
         <form
@@ -100,7 +100,7 @@
                         for="totp"
                         [kcClass]="'kcLabelClass'"
                     >
-                        {{ 'authenticatorCode' | msgStr }}
+                        {{ i18n.msgStr('authenticatorCode') }}
                     </label>
                     <span class="required">*</span>
                 </div>
@@ -142,7 +142,7 @@
                         for="userLabel"
                         [kcClass]="'kcLabelClass'"
                     >
-                        {{ 'loginTotpDeviceName' | msgStr }}
+                        {{ i18n.msgStr('loginTotpDeviceName') }}
                     </label>
                     @if (totp.otpCredentials.length >= 1) {
                         <span class="required">*</span>
@@ -176,7 +176,7 @@
                     type="submit"
                     [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     id="saveTOTPBtn"
-                    [value]="'doSubmit' | msgStr"
+                    [value]="i18n.msgStr('doSubmit')"
                 />
                 <button
                     type="submit"
@@ -185,14 +185,14 @@
                     name="cancel-aia"
                     [value]="true"
                 >
-                    {{ 'doCancel' | msgStr }}
+                    {{ i18n.msgStr('doCancel') }}
                 </button>
             } @else {
                 <input
                     type="submit"
                     [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     id="saveTOTPBtn"
-                    [value]="'doSubmit' | msgStr"
+                    [value]="i18n.msgStr('doSubmit')"
                 />
             }
         </form>

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

@@ -1,18 +1,20 @@
 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 { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css.token';
 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/kc-class.directive';
-import { AdvancedMsgStrPipe } from '@keycloakify/angular/login/pipes/advanced-msg-str.pipe';
 import { KcSanitizePipe } from '@keycloakify/angular/login/pipes/kc-sanitize.pipe';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { LOGIN_CLASSES } from '@keycloakify/angular/login/tokens/classes.token';
+import { LOGIN_I18N } from '@keycloakify/angular/login/tokens/i18n.token';
+import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context.token';
+import { ClassKey } from 'keycloakify/login/lib/kcClsx';
+import { I18n } from '../../i18n';
+import { KcContext } from '../../KcContext';
 
 @Component({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, AdvancedMsgStrPipe, KcClassDirective, KcSanitizePipe, LogoutOtherSessionsComponent],
+    imports: [TemplateComponent, KcClassDirective, KcSanitizePipe, LogoutOtherSessionsComponent],
     selector: 'kc-root',
     templateUrl: 'login-config-totp.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -24,10 +26,10 @@ 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_LOGIN_CONTEXT);
+    i18n = inject<I18n>(LOGIN_I18N);
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
-    override classes = inject<Partial<Record<ClassKey, string>>>(CLASSES);
+    override classes = inject<Partial<Record<ClassKey, string>>>(LOGIN_CLASSES);
     displayRequiredFields = input(false);
     documentTitle = input<string>();
     bodyClassName = input<string>();

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

@@ -8,7 +8,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'confirmLinkIdpTitle' | msgStr }}
+        {{ i18n.msgStr('confirmLinkIdpTitle') }}
     </ng-container>
     <ng-container content>
         <form
@@ -24,7 +24,7 @@
                     id="updateProfile"
                     value="updateProfile"
                 >
-                    {{ 'confirmLinkIdpReviewProfile' | msgStr }}
+                    {{ i18n.msgStr('confirmLinkIdpReviewProfile') }}
                 </button>
                 <button
                     type="submit"
@@ -33,7 +33,7 @@
                     id="linkAccount"
                     value="linkAccount"
                 >
-                    {{ 'confirmLinkIdpContinue' | msgStr: idpAlias }}
+                    {{ i18n.msgStr('confirmLinkIdpContinue', idpAlias) }}
                 </button>
             </div>
         </form>