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

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

@@ -9,7 +9,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'doLogIn' | msgStr }}
+        {{ i18n.msgStr('doLogIn') }}
     </ng-container>
     <ng-container content>
         <div id="kc-form">
@@ -29,7 +29,7 @@
                             for="password"
                             [kcClass]="'kcLabelClass'"
                         >
-                            {{ 'password' | msgStr }}
+                            {{ i18n.msgStr('password') }}
                         </label>
                         <kc-password-wrapper passwordInputId="password">
                             <input
@@ -61,9 +61,9 @@
                                 <span>
                                     <a
                                         tabindex="5"
-                                        href="{{ url.loginResetCredentialsUrl }}"
+                                        [href]="url.loginResetCredentialsUrl"
                                     >
-                                        {{ 'doForgotPassword' | msgStr }}
+                                        {{ i18n.msgStr('doForgotPassword') }}
                                     </a>
                                 </span>
                             }
@@ -77,7 +77,7 @@
                             type="submit"
                             id="kc-login"
                             name="login"
-                            [value]="'doLogIn' | msgStr"
+                            [value]="i18n.msgStr('doLogIn')"
                             [disabled]="isLoginButtonDisabled()"
                             [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                             [tabindex]="4"

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

@@ -1,17 +1,20 @@
 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({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, KcClassDirective, PasswordWrapperComponent, KcSanitizePipe],
+    imports: [TemplateComponent, KcClassDirective, PasswordWrapperComponent, KcSanitizePipe],
     selector: 'kc-root',
     templateUrl: 'login-password.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,9 +26,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginPasswordComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-password.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-password.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-recovery-authn-code-config/login-recovery-authn-code-config.component.html

@@ -8,7 +8,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'recovery-code-config-header' | msgStr }}
+        {{ i18n.msgStr('recovery-code-config-header') }}
     </ng-container>
 
     <ng-container content>
@@ -25,10 +25,10 @@
             </div>
             <h4 class="pf-c-alert__title">
                 <span class="pf-screen-reader">Warning alert:</span>
-                {{ 'recovery-code-config-warning-title' | msgStr }}
+                {{ i18n.msgStr('recovery-code-config-warning-title') }}
             </h4>
             <div class="pf-c-alert__description">
-                <p>{{ 'recovery-code-config-warning-message' | msgStr }}</p>
+                <p>{{ i18n.msgStr('recovery-code-config-warning-message') }}</p>
             </div>
         </div>
 
@@ -54,7 +54,7 @@
                     class="pficon-print"
                     aria-hidden="true"
                 ></i>
-                {{ 'recovery-codes-print' | msgStr }}
+                {{ i18n.msgStr('recovery-codes-print') }}
             </button>
             <button
                 id="downloadRecoveryCodes"
@@ -65,7 +65,7 @@
                     class="pficon-save"
                     aria-hidden="true"
                 ></i>
-                {{ 'recovery-codes-download' | msgStr }}
+                {{ i18n.msgStr('recovery-codes-download') }}
             </button>
             <button
                 id="copyRecoveryCodes"
@@ -76,7 +76,7 @@
                     class="pficon-blueprint"
                     aria-hidden="true"
                 ></i>
-                {{ 'recovery-codes-copy' | msgStr }}
+                {{ i18n.msgStr('recovery-codes-copy') }}
             </button>
         </div>
 
@@ -95,7 +95,7 @@
                     [checked]="toggleRecoveryCodesConfirmation()"
                     (change)="toggleRecoveryCodesConfirmation.set($any($event.target).checked)"
                 />
-                {{ 'recovery-codes-confirmation-message' | msgStr }}
+                {{ i18n.msgStr('recovery-codes-confirmation-message') }}
             </label>
         </div>
 
@@ -119,7 +119,7 @@
                 type="hidden"
                 id="userLabel"
                 name="userLabel"
-                [value]="'recovery-codes-label-default' | msgStr"
+                [value]="i18n.msgStr('recovery-codes-label-default')"
             />
 
             <kc-logout-other-sessions></kc-logout-other-sessions>
@@ -129,7 +129,7 @@
                     type="submit"
                     [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass']"
                     id="saveRecoveryAuthnCodesBtn"
-                    [value]="'recovery-codes-action-complete' | msgStr"
+                    [value]="i18n.msgStr('recovery-codes-action-complete')"
                     [disabled]="!toggleRecoveryCodesConfirmation()"
                 />
                 <button
@@ -139,14 +139,14 @@
                     name="cancel-aia"
                     value="true"
                 >
-                    {{ 'recovery-codes-action-cancel' | msgStr }}
+                    {{ i18n.msgStr('recovery-codes-action-cancel') }}
                 </button>
             } @else {
                 <input
                     type="submit"
                     [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                     id="saveRecoveryAuthnCodesBtn"
-                    [value]="'recovery-codes-action-complete' | msgStr"
+                    [value]="i18n.msgStr('recovery-codes-action-complete')"
                     [disabled]="!toggleRecoveryCodesConfirmation()"
                 />
             }

package/src/login/pages/login-recovery-authn-code-config/login-recovery-authn-code-config.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 { LogoutOtherSessionsComponent } from '@keycloakify/angular/login/components/logout-other-sessions/logout-other-sessions.component';
 import { TemplateComponent } from '@keycloakify/angular/login/containers/template.component';
-import { KcClassDirective } from '@keycloakify/angular/login/directives';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+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: [MsgStrPipe, TemplateComponent, KcClassDirective, LogoutOtherSessionsComponent],
+    imports: [TemplateComponent, KcClassDirective, LogoutOtherSessionsComponent],
     selector: 'kc-root',
     templateUrl: 'login-recovery-authn-code-config.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,9 +25,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginRecoveryAuthnCodeConfigComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-recovery-authn-code-config.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-recovery-authn-code-config.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-recovery-authn-code-input/login-recovery-authn-code-input.component.html

@@ -10,7 +10,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'auth-recovery-code-header' | msgStr }}
+        {{ i18n.msgStr('auth-recovery-code-header') }}
     </ng-container>
 
     <ng-container content>
@@ -26,7 +26,7 @@
                         for="recoveryCodeInput"
                         [kcClass]="'kcLabelClass'"
                     >
-                        {{ 'auth-recovery-code-prompt' | msgStr: recoveryAuthnCodesInputBean.codeNumber.toString() }}
+                        {{ i18n.msgStr('auth-recovery-code-prompt', recoveryAuthnCodesInputBean.codeNumber.toString()) }}
                     </label>
                 </div>
                 <div [kcClass]="'kcInputWrapperClass'">
@@ -67,7 +67,7 @@
                         name="login"
                         id="kc-login"
                         type="submit"
-                        [value]="'doLogIn' | msgStr"
+                        [value]="i18n.msgStr('doLogIn')"
                     />
                 </div>
             </div>

package/src/login/pages/login-recovery-authn-code-input/login-recovery-authn-code-input.component.ts

@@ -1,16 +1,19 @@
 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 { KcClassDirective } from '@keycloakify/angular/login/directives';
+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({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, KcClassDirective, KcSanitizePipe],
+    imports: [TemplateComponent, KcClassDirective, KcSanitizePipe],
     selector: 'kc-root',
     templateUrl: 'login-recovery-authn-code-input.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,9 +25,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginRecoveryAuthnCodeInputComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-recovery-authn-code-input.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-recovery-authn-code-input.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-reset-otp/login-reset-otp.component.html

@@ -8,7 +8,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'doLogIn' | msgStr }}
+        {{ i18n.msgStr('doLogIn') }}
     </ng-container>
     <ng-container content>
         <form
@@ -20,7 +20,7 @@
             <div [kcClass]="'kcInputWrapperClass'">
                 <div [kcClass]="'kcInfoAreaWrapperClass'">
                     <p id="kc-otp-reset-form-description">
-                        {{ 'otp-reset-description' | msgStr }}
+                        {{ i18n.msgStr('otp-reset-description') }}
                     </p>
                     @for (otpCredential of configuredOtpCredentials.userOtpCredentials; track otpCredential; let i = $index) {
                         <input
@@ -56,7 +56,7 @@
                                 id="kc-otp-reset-form-submit"
                                 [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                                 type="submit"
-                                [value]="'doSubmit' | msgStr"
+                                [value]="i18n.msgStr('doSubmit')"
                             />
                         </div>
                     </div>

package/src/login/pages/login-reset-otp/login-reset-otp.component.ts

@@ -1,15 +1,18 @@
 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 { KcClassDirective } from '@keycloakify/angular/login/directives';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+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: [KcClassDirective, MsgStrPipe, TemplateComponent],
+    imports: [KcClassDirective, TemplateComponent],
     selector: 'kc-root',
     templateUrl: 'login-reset-otp.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,9 +24,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginResetOtpComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-reset-otp.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-reset-otp.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-reset-password/login-reset-password.component.html

@@ -10,13 +10,13 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'emailForgotTitle' | msgStr }}
+        {{ i18n.msgStr('emailForgotTitle') }}
     </ng-container>
     <ng-container infoNode>
         @if (realm.duplicateEmailsAllowed) {
-            {{ 'emailInstructionUsername' | msgStr }}
+            {{ i18n.msgStr('emailInstructionUsername') }}
         } @else {
-            {{ 'emailInstruction' | msgStr }}
+            {{ i18n.msgStr('emailInstruction') }}
         }
     </ng-container>
 
@@ -34,11 +34,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>
                 </div>
@@ -74,7 +74,7 @@
                         <span>
                             <a
                                 [href]="url.loginUrl"
-                                [innerHTML]="'backToLogin' | msgStr | kcSanitize: 'html'"
+                                [innerHTML]="i18n.msgStr('backToLogin') | kcSanitize: 'html'"
                             ></a>
                         </span>
                     </div>
@@ -86,7 +86,7 @@
                     <input
                         [kcClass]="['kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass']"
                         type="submit"
-                        [value]="'doSubmit' | msgStr"
+                        [value]="i18n.msgStr('doSubmit')"
                     />
                 </div>
             </div>

package/src/login/pages/login-reset-password/login-reset-password.component.ts

@@ -1,16 +1,19 @@
 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 { KcClassDirective } from '@keycloakify/angular/login/directives';
+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({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, KcClassDirective, KcSanitizePipe],
+    imports: [TemplateComponent, KcClassDirective, KcSanitizePipe],
     selector: 'kc-root',
     templateUrl: 'login-reset-password.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,9 +25,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginResetPasswordComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-reset-password.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-reset-password.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-update-password/login-update-password.component.html

@@ -10,7 +10,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'updatePasswordTitle' | msgStr }}
+        {{ i18n.msgStr('updatePasswordTitle') }}
     </ng-container>
     <ng-container content>
         <form
@@ -25,7 +25,7 @@
                         for="password-new"
                         [kcClass]="'kcLabelClass'"
                     >
-                        {{ 'passwordNew' | msgStr }}
+                        {{ i18n.msgStr('passwordNew') }}
                     </label>
                 </div>
                 <div [kcClass]="'kcInputWrapperClass'">
@@ -58,7 +58,7 @@
                         for="password-confirm"
                         [kcClass]="'kcLabelClass'"
                     >
-                        {{ 'passwordConfirm' | msgStr }}
+                        {{ i18n.msgStr('passwordConfirm') }}
                     </label>
                 </div>
                 <div [kcClass]="'kcInputWrapperClass'">
@@ -97,7 +97,7 @@
                             kcButtonLargeClass: true
                         }"
                         type="submit"
-                        value="{{ 'doSubmit' | msgStr }}"
+                        [value]="i18n.msgStr('doSubmit')"
                     />
                     @if (isAppInitiatedAction) {
                         <button
@@ -106,7 +106,7 @@
                             name="cancel-aia"
                             value="true"
                         >
-                            {{ 'doCancel' | msgStr }}
+                            {{ i18n.msgStr('doCancel') }}
                         </button>
                     }
                 </div>

package/src/login/pages/login-update-password/login-update-password.component.ts

@@ -1,18 +1,21 @@
 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 { 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';
+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({
     standalone: true,
-    imports: [TemplateComponent, MsgStrPipe, KcClassDirective, PasswordWrapperComponent, KcSanitizePipe, LogoutOtherSessionsComponent],
+    imports: [TemplateComponent, KcClassDirective, PasswordWrapperComponent, KcSanitizePipe, LogoutOtherSessionsComponent],
     selector: 'kc-root',
     templateUrl: 'login-update-password.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -24,9 +27,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginUpdatePasswordComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-update-password.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-update-password.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-update-profile/login-update-profile.component.html

@@ -8,7 +8,7 @@
     [documentTitle]="documentTitle()"
 >
     <ng-container headerNode>
-        {{ 'loginProfileTitle' | msgStr }}
+        {{ i18n.msgStr('loginProfileTitle') }}
     </ng-container>
     <ng-container content>
         <form
@@ -39,7 +39,7 @@
                             kcButtonLargeClass: true
                         }"
                         type="submit"
-                        value="{{ 'doSubmit' | msgStr }}"
+                        [value]="i18n.msgStr('doSubmit')"
                     />
                     @if (isAppInitiatedAction) {
                         <button
@@ -49,7 +49,7 @@
                             value="true"
                             formNoValidate
                         >
-                            {{ 'doCancel' | msgStr }}
+                            {{ i18n.msgStr('doCancel') }}
                         </button>
                     }
                 </div>

package/src/login/pages/login-update-profile/login-update-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';
-import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
+import { KcClassDirective } from '@keycloakify/angular/login/directives/kc-class.directive';
+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, KcClassDirective, MsgStrPipe, UserProfileFormFieldsComponent],
+    imports: [TemplateComponent, KcClassDirective, UserProfileFormFieldsComponent],
     selector: 'kc-root',
     templateUrl: 'login-update-profile.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,9 +25,10 @@ import { MsgStrPipe } from '@keycloakify/angular/login/pipes/msg-str.pipe';
     ]
 })
 export class LoginUpdateProfileComponent extends ComponentReference {
-    kcContext = inject<Extract<KcContext, { pageId: 'login-update-profile.ftl' }>>(KC_CONTEXT);
+    kcContext = inject<Extract<KcContext, { pageId: 'login-update-profile.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(true);
     documentTitle = input<string>();
     bodyClassName = input<string>();