@mintplayer/ng-spark-auth 0.0.1 → 0.0.2

package/fesm2022/mintplayer-ng-spark-auth.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, computed, Injectable, makeEnvironmentProviders, Component } from '@angular/core';
+import { InjectionToken, inject, signal, computed, Injectable, Pipe, makeEnvironmentProviders, Component } from '@angular/core';
 import { HttpClient, withInterceptors, withXsrfConfiguration } from '@angular/common/http';
 import { switchMap, tap } from 'rxjs';
 import { Router, RouterLink, ActivatedRoute } from '@angular/router';
@@ -76,6 +76,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+class SparkAuthTranslationService {
+    http = inject(HttpClient);
+    translationsMap = signal({}, ...(ngDevMode ? [{ debugName: "translationsMap" }] : []));
+    constructor() {
+        this.http.get('/spark/translations').subscribe(t => {
+            this.translationsMap.set(t);
+        });
+    }
+    t(key) {
+        const ts = this.translationsMap()[key];
+        if (!ts)
+            return key;
+        const lang = localStorage.getItem('spark-lang') ?? navigator.language?.split('-')[0] ?? 'en';
+        return ts[lang] ?? ts['en'] ?? Object.values(ts)[0] ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SparkAuthTranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SparkAuthTranslationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SparkAuthTranslationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class TranslateKeyPipe {
+    translation = inject(SparkAuthTranslationService);
+    transform(key) {
+        return this.translation.t(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslateKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: TranslateKeyPipe, isStandalone: true, name: "t", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslateKeyPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 't', pure: false, standalone: true }]
+        }] });
+
 const sparkAuthInterceptor = (req, next) => {
     const config = inject(SPARK_AUTH_CONFIG);
     const router = inject(Router);
@@ -175,24 +211,24 @@ class SparkAuthBarComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SparkAuthBarComponent, isStandalone: true, selector: "spark-auth-bar", ngImport: i0, template: `
     @if (authService.isAuthenticated()) {
       <span class="me-2">{{ authService.user()?.userName }}</span>
-      <button class="btn btn-outline-light btn-sm" (click)="onLogout()">Logout</button>
+      <button class="btn btn-outline-light btn-sm" (click)="onLogout()">{{ 'authLogout' | t }}</button>
     } @else {
-      <a class="btn btn-outline-light btn-sm" [routerLink]="config.loginUrl">Login</a>
+      <a class="btn btn-outline-light btn-sm" [routerLink]="config.loginUrl">{{ 'authLogin' | t }}</a>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SparkAuthBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spark-auth-bar',
                     standalone: true,
-                    imports: [RouterLink],
+                    imports: [RouterLink, TranslateKeyPipe],
                     template: `
     @if (authService.isAuthenticated()) {
       <span class="me-2">{{ authService.user()?.userName }}</span>
-      <button class="btn btn-outline-light btn-sm" (click)="onLogout()">Logout</button>
+      <button class="btn btn-outline-light btn-sm" (click)="onLogout()">{{ 'authLogout' | t }}</button>
     } @else {
-      <a class="btn btn-outline-light btn-sm" [routerLink]="config.loginUrl">Login</a>
+      <a class="btn btn-outline-light btn-sm" [routerLink]="config.loginUrl">{{ 'authLogin' | t }}</a>
     }
   `,
                 }]
@@ -204,6 +240,7 @@ class SparkLoginComponent {
     router = inject(Router);
     route = inject(ActivatedRoute);
     config = inject(SPARK_AUTH_CONFIG);
+    translation = inject(SparkAuthTranslationService);
     routePaths = inject(SPARK_AUTH_ROUTE_PATHS);
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     errorMessage = signal('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
@@ -233,7 +270,7 @@ class SparkLoginComponent {
                     });
                 }
                 else {
-                    this.errorMessage.set('Invalid email or password.');
+                    this.errorMessage.set(this.translation.t('authInvalidCredentials'));
                 }
             },
         });
@@ -243,7 +280,7 @@ class SparkLoginComponent {
     <div class="d-flex justify-content-center">
       <div class="card" style="width: 100%; max-width: 400px;">
         <div class="card-body">
-          <h3 class="card-title text-center mb-4">Login</h3>
+          <h3 class="card-title text-center mb-4">{{ 'authLogin' | t }}</h3>
 
           @if (errorMessage()) {
             <div class="alert alert-danger" role="alert">{{ errorMessage() }}</div>
@@ -252,7 +289,7 @@ class SparkLoginComponent {
           <bs-form>
             <form [formGroup]="form" (ngSubmit)="onSubmit()">
               <div class="mb-3">
-                <label for="email" class="form-label">Email</label>
+                <label for="email" class="form-label">{{ 'authEmail' | t }}</label>
                 <input
                   type="text"
                   id="email"
@@ -262,7 +299,7 @@ class SparkLoginComponent {
               </div>
 
               <div class="mb-3">
-                <label for="password" class="form-label">Password</label>
+                <label for="password" class="form-label">{{ 'authPassword' | t }}</label>
                 <input
                   type="password"
                   id="password"
@@ -272,7 +309,7 @@ class SparkLoginComponent {
               </div>
 
               <div class="mb-3">
-                <bs-toggle-button [type]="'checkbox'" formControlName="rememberMe" [name]="'rememberMe'">Remember me</bs-toggle-button>
+                <bs-toggle-button [type]="'checkbox'" formControlName="rememberMe" [name]="'rememberMe'">{{ 'authRememberMe' | t }}</bs-toggle-button>
               </div>
 
               <button
@@ -283,33 +320,33 @@ class SparkLoginComponent {
                 @if (loading()) {
                   <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                 }
-                Login
+                {{ 'authLogin' | t }}
               </button>
             </form>
           </bs-form>
 
           <div class="mt-3 text-center">
-            <a [routerLink]="routePaths.register">Create an account</a>
+            <a [routerLink]="routePaths.register">{{ 'authCreateAccount' | t }}</a>
           </div>
           <div class="mt-2 text-center">
-            <a [routerLink]="routePaths.forgotPassword">Forgot password?</a>
+            <a [routerLink]="routePaths.forgotPassword">{{ 'authForgotPassword' | t }}</a>
           </div>
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: BsFormModule }, { kind: "component", type: i2.BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: i2.BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "ngmodule", type: BsToggleButtonModule }, { kind: "component", type: i3.BsToggleButtonComponent, selector: "bs-toggle-button", inputs: ["type", "isToggled", "name", "value", "group"], outputs: ["isToggledChange"] }, { kind: "directive", type: i3.BsToggleButtonValueAccessor, selector: "bs-toggle-button" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: BsFormModule }, { kind: "component", type: i2.BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: i2.BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "ngmodule", type: BsToggleButtonModule }, { kind: "component", type: i3.BsToggleButtonComponent, selector: "bs-toggle-button", inputs: ["type", "isToggled", "name", "value", "group"], outputs: ["isToggledChange"] }, { kind: "directive", type: i3.BsToggleButtonValueAccessor, selector: "bs-toggle-button" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SparkLoginComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spark-login',
                     standalone: true,
-                    imports: [ReactiveFormsModule, RouterLink, BsFormModule, BsToggleButtonModule],
+                    imports: [ReactiveFormsModule, RouterLink, BsFormModule, BsToggleButtonModule, TranslateKeyPipe],
                     template: `
     <div class="d-flex justify-content-center">
       <div class="card" style="width: 100%; max-width: 400px;">
         <div class="card-body">
-          <h3 class="card-title text-center mb-4">Login</h3>
+          <h3 class="card-title text-center mb-4">{{ 'authLogin' | t }}</h3>
 
           @if (errorMessage()) {
             <div class="alert alert-danger" role="alert">{{ errorMessage() }}</div>
@@ -318,7 +355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <bs-form>
             <form [formGroup]="form" (ngSubmit)="onSubmit()">
               <div class="mb-3">
-                <label for="email" class="form-label">Email</label>
+                <label for="email" class="form-label">{{ 'authEmail' | t }}</label>
                 <input
                   type="text"
                   id="email"
@@ -328,7 +365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               </div>
 
               <div class="mb-3">
-                <label for="password" class="form-label">Password</label>
+                <label for="password" class="form-label">{{ 'authPassword' | t }}</label>
                 <input
                   type="password"
                   id="password"
@@ -338,7 +375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               </div>
 
               <div class="mb-3">
-                <bs-toggle-button [type]="'checkbox'" formControlName="rememberMe" [name]="'rememberMe'">Remember me</bs-toggle-button>
+                <bs-toggle-button [type]="'checkbox'" formControlName="rememberMe" [name]="'rememberMe'">{{ 'authRememberMe' | t }}</bs-toggle-button>
               </div>
 
               <button
@@ -349,16 +386,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 @if (loading()) {
                   <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                 }
-                Login
+                {{ 'authLogin' | t }}
               </button>
             </form>
           </bs-form>
 
           <div class="mt-3 text-center">
-            <a [routerLink]="routePaths.register">Create an account</a>
+            <a [routerLink]="routePaths.register">{{ 'authCreateAccount' | t }}</a>
           </div>
           <div class="mt-2 text-center">
-            <a [routerLink]="routePaths.forgotPassword">Forgot password?</a>
+            <a [routerLink]="routePaths.forgotPassword">{{ 'authForgotPassword' | t }}</a>
           </div>
         </div>
       </div>
@@ -379,6 +416,7 @@ class SparkTwoFactorComponent {
     router = inject(Router);
     route = inject(ActivatedRoute);
     config = inject(SPARK_AUTH_CONFIG);
+    translation = inject(SparkAuthTranslationService);
     routePaths = inject(SPARK_AUTH_ROUTE_PATHS);
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     errorMessage = signal('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
@@ -395,7 +433,9 @@ class SparkTwoFactorComponent {
         const isRecovery = this.useRecoveryCode();
         const code = isRecovery ? this.form.value.recoveryCode : this.form.value.code;
         if (!code?.trim()) {
-            this.errorMessage.set(isRecovery ? 'Please enter a recovery code.' : 'Please enter the 6-digit code.');
+            this.errorMessage.set(isRecovery
+                ? this.translation.t('authEnterRecoveryCodeError')
+                : this.translation.t('authEnterCodeError'));
             return;
         }
         this.loading.set(true);
@@ -410,7 +450,7 @@ class SparkTwoFactorComponent {
             },
             error: () => {
                 this.loading.set(false);
-                this.errorMessage.set('Invalid code. Please try again.');
+                this.errorMessage.set(this.translation.t('authInvalidCode'));
             },
         });
     }
@@ -419,7 +459,7 @@ class SparkTwoFactorComponent {
     <div class="d-flex justify-content-center">
       <div class="card" style="width: 100%; max-width: 400px;">
         <div class="card-body">
-          <h3 class="card-title text-center mb-4">Two-Factor Authentication</h3>
+          <h3 class="card-title text-center mb-4">{{ 'authTwoFactorTitle' | t }}</h3>
 
           @if (errorMessage()) {
             <div class="alert alert-danger" role="alert">{{ errorMessage() }}</div>
@@ -429,25 +469,25 @@ class SparkTwoFactorComponent {
             <form [formGroup]="form" (ngSubmit)="onSubmit()">
               @if (!useRecoveryCode()) {
                 <div class="mb-3">
-                  <label for="code" class="form-label">Authentication Code</label>
+                  <label for="code" class="form-label">{{ 'authCode' | t }}</label>
                   <input
                     type="text"
                     id="code"
                     formControlName="code"
                     autocomplete="one-time-code"
                     maxlength="6"
-                    placeholder="Enter 6-digit code"
+                    [placeholder]="'authEnterCode' | t"
                   />
                 </div>
               } @else {
                 <div class="mb-3">
-                  <label for="recoveryCode" class="form-label">Recovery Code</label>
+                  <label for="recoveryCode" class="form-label">{{ 'authRecoveryCode' | t }}</label>
                   <input
                     type="text"
                     id="recoveryCode"
                     formControlName="recoveryCode"
                     autocomplete="off"
-                    placeholder="Enter recovery code"
+                    [placeholder]="'authEnterRecoveryCode' | t"
                   />
                 </div>
               }
@@ -460,7 +500,7 @@ class SparkTwoFactorComponent {
                 @if (loading()) {
                   <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                 }
-                Verify
+                {{ 'authVerify' | t }}
               </button>
             </form>
           </bs-form>
@@ -468,31 +508,31 @@ class SparkTwoFactorComponent {
           <div class="mt-3 text-center">
             <button class="btn btn-link" (click)="toggleRecoveryCode()">
               @if (useRecoveryCode()) {
-                Use authentication code instead
+                {{ 'authUseAuthCode' | t }}
               } @else {
-                Use a recovery code instead
+                {{ 'authUseRecoveryCode' | t }}
               }
             </button>
           </div>
           <div class="mt-2 text-center">
-            <a [routerLink]="routePaths.login">Back to login</a>
+            <a [routerLink]="routePaths.login">{{ 'authBackToLogin' | t }}</a>
           </div>
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: BsFormModule }, { kind: "component", type: i2.BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: i2.BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: BsFormModule }, { kind: "component", type: i2.BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: i2.BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SparkTwoFactorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spark-two-factor',
                     standalone: true,
-                    imports: [ReactiveFormsModule, RouterLink, BsFormModule],
+                    imports: [ReactiveFormsModule, RouterLink, BsFormModule, TranslateKeyPipe],
                     template: `
     <div class="d-flex justify-content-center">
       <div class="card" style="width: 100%; max-width: 400px;">
         <div class="card-body">
-          <h3 class="card-title text-center mb-4">Two-Factor Authentication</h3>
+          <h3 class="card-title text-center mb-4">{{ 'authTwoFactorTitle' | t }}</h3>
 
           @if (errorMessage()) {
             <div class="alert alert-danger" role="alert">{{ errorMessage() }}</div>
@@ -502,25 +542,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <form [formGroup]="form" (ngSubmit)="onSubmit()">
               @if (!useRecoveryCode()) {
                 <div class="mb-3">
-                  <label for="code" class="form-label">Authentication Code</label>
+                  <label for="code" class="form-label">{{ 'authCode' | t }}</label>
                   <input
                     type="text"
                     id="code"
                     formControlName="code"
                     autocomplete="one-time-code"
                     maxlength="6"
-                    placeholder="Enter 6-digit code"
+                    [placeholder]="'authEnterCode' | t"
                   />
                 </div>
               } @else {
                 <div class="mb-3">
-                  <label for="recoveryCode" class="form-label">Recovery Code</label>
+                  <label for="recoveryCode" class="form-label">{{ 'authRecoveryCode' | t }}</label>
                   <input
                     type="text"
                     id="recoveryCode"
                     formControlName="recoveryCode"
                     autocomplete="off"
-                    placeholder="Enter recovery code"
+                    [placeholder]="'authEnterRecoveryCode' | t"
                   />
                 </div>
               }
@@ -533,7 +573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 @if (loading()) {
                   <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                 }
-                Verify
+                {{ 'authVerify' | t }}
               </button>
             </form>
           </bs-form>
@@ -541,14 +581,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <div class="mt-3 text-center">
             <button class="btn btn-link" (click)="toggleRecoveryCode()">
               @if (useRecoveryCode()) {
-                Use authentication code instead
+                {{ 'authUseAuthCode' | t }}
               } @else {
-                Use a recovery code instead
+                {{ 'authUseRecoveryCode' | t }}
               }
             </button>
           </div>
           <div class="mt-2 text-center">
-            <a [routerLink]="routePaths.login">Back to login</a>
+            <a [routerLink]="routePaths.login">{{ 'authBackToLogin' | t }}</a>
           </div>
         </div>
       </div>
@@ -575,6 +615,7 @@ class SparkRegisterComponent {
     fb = inject(FormBuilder);
     authService = inject(SparkAuthService);
     router = inject(Router);
+    translation = inject(SparkAuthTranslationService);
     routePaths = inject(SPARK_AUTH_ROUTE_PATHS);
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     errorMessage = signal('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
@@ -608,7 +649,7 @@ class SparkRegisterComponent {
                     this.errorMessage.set(err.error.detail);
                 }
                 else {
-                    this.errorMessage.set('Registration failed. Please try again.');
+                    this.errorMessage.set(this.translation.t('authRegistrationFailed'));
                 }
             },
         });
@@ -618,7 +659,7 @@ class SparkRegisterComponent {
     <div class="d-flex justify-content-center">
       <div class="card" style="width: 100%; max-width: 400px;">
         <div class="card-body">
-          <h3 class="card-title text-center mb-4">Register</h3>
+          <h3 class="card-title text-center mb-4">{{ 'authRegister' | t }}</h3>
 
           @if (errorMessage()) {
             <div class="alert alert-danger" role="alert">{{ errorMessage() }}</div>
@@ -627,7 +668,7 @@ class SparkRegisterComponent {
           <bs-form>
             <form [formGroup]="form" (ngSubmit)="onSubmit()">
               <div class="mb-3">
-                <label for="email" class="form-label">Email</label>
+                <label for="email" class="form-label">{{ 'authEmail' | t }}</label>
                 <input
                   type="email"
                   id="email"
@@ -635,12 +676,12 @@ class SparkRegisterComponent {
                   autocomplete="email"
                 />
                 @if (form.get('email')?.touched && form.get('email')?.hasError('email')) {
-                  <div class="text-danger mt-1">Please enter a valid email address.</div>
+                  <div class="text-danger mt-1">{{ 'authInvalidEmail' | t }}</div>
                 }
               </div>
 
               <div class="mb-3">
-                <label for="password" class="form-label">Password</label>
+                <label for="password" class="form-label">{{ 'authPassword' | t }}</label>
                 <input
                   type="password"
                   id="password"
@@ -650,7 +691,7 @@ class SparkRegisterComponent {
               </div>
 
               <div class="mb-3">
-                <label for="confirmPassword" class="form-label">Confirm Password</label>
+                <label for="confirmPassword" class="form-label">{{ 'authConfirmPassword' | t }}</label>
                 <input
                   type="password"
                   id="confirmPassword"
@@ -658,7 +699,7 @@ class SparkRegisterComponent {
                   autocomplete="new-password"
                 />
                 @if (form.touched && form.hasError('passwordMismatch')) {
-                  <div class="text-danger mt-1">Passwords do not match.</div>
+                  <div class="text-danger mt-1">{{ 'authPasswordMismatch' | t }}</div>
                 }
               </div>
 
@@ -670,31 +711,31 @@ class SparkRegisterComponent {
                 @if (loading()) {
                   <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                 }
-                Register
+                {{ 'authRegister' | t }}
               </button>
             </form>
           </bs-form>
 
           <div class="mt-3 text-center">
-            <span>Already have an account? </span>
-            <a [routerLink]="routePaths.login">Login</a>
+            <span>{{ 'authAlreadyHaveAccount' | t }} </span>
+            <a [routerLink]="routePaths.login">{{ 'authLogin' | t }}</a>
           </div>
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: BsFormModule }, { kind: "component", type: i2.BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: i2.BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: BsFormModule }, { kind: "component", type: i2.BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: i2.BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SparkRegisterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spark-register',
                     standalone: true,
-                    imports: [ReactiveFormsModule, RouterLink, BsFormModule],
+                    imports: [ReactiveFormsModule, RouterLink, BsFormModule, TranslateKeyPipe],
                     template: `
     <div class="d-flex justify-content-center">
       <div class="card" style="width: 100%; max-width: 400px;">
         <div class="card-body">
-          <h3 class="card-title text-center mb-4">Register</h3>
+          <h3 class="card-title text-center mb-4">{{ 'authRegister' | t }}</h3>
 
           @if (errorMessage()) {
             <div class="alert alert-danger" role="alert">{{ errorMessage() }}</div>
@@ -703,7 +744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
           <bs-form>
             <form [formGroup]="form" (ngSubmit)="onSubmit()">
               <div class="mb-3">
-                <label for="email" class="form-label">Email</label>
+                <label for="email" class="form-label">{{ 'authEmail' | t }}</label>
                 <input
                   type="email"
                   id="email"
@@ -711,12 +752,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   autocomplete="email"
                 />
                 @if (form.get('email')?.touched && form.get('email')?.hasError('email')) {
-                  <div class="text-danger mt-1">Please enter a valid email address.</div>
+                  <div class="text-danger mt-1">{{ 'authInvalidEmail' | t }}</div>
                 }
               </div>
 
               <div class="mb-3">
-                <label for="password" class="form-label">Password</label>
+                <label for="password" class="form-label">{{ 'authPassword' | t }}</label>
                 <input
                   type="password"
                   id="password"
@@ -726,7 +767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               </div>
 
               <div class="mb-3">
-                <label for="confirmPassword" class="form-label">Confirm Password</label>
+                <label for="confirmPassword" class="form-label">{{ 'authConfirmPassword' | t }}</label>
                 <input
                   type="password"
                   id="confirmPassword"
@@ -734,7 +775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   autocomplete="new-password"
                 />
                 @if (form.touched && form.hasError('passwordMismatch')) {
-                  <div class="text-danger mt-1">Passwords do not match.</div>
+                  <div class="text-danger mt-1">{{ 'authPasswordMismatch' | t }}</div>
                 }
               </div>
 
@@ -746,14 +787,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 @if (loading()) {
                   <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                 }
-                Register
+                {{ 'authRegister' | t }}
               </button>
             </form>
           </bs-form>
 
           <div class="mt-3 text-center">
-            <span>Already have an account? </span>
-            <a [routerLink]="routePaths.login">Login</a>
+            <span>{{ 'authAlreadyHaveAccount' | t }} </span>
+            <a [routerLink]="routePaths.login">{{ 'authLogin' | t }}</a>
           </div>
         </div>
       </div>
@@ -771,6 +812,7 @@ var sparkRegister_component = /*#__PURE__*/Object.freeze({
 class SparkForgotPasswordComponent {
     fb = inject(FormBuilder);
     authService = inject(SparkAuthService);
+    translation = inject(SparkAuthTranslationService);
     routePaths = inject(SPARK_AUTH_ROUTE_PATHS);
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     errorMessage = signal('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
@@ -790,12 +832,12 @@ class SparkForgotPasswordComponent {
         this.authService.forgotPassword(email).subscribe({
             next: () => {
                 this.loading.set(false);
-                this.successMessage.set('If an account with that email exists, we\'ve sent a password reset link.');
+                this.successMessage.set(this.translation.t('authForgotPasswordSuccess'));
             },
             error: () => {
                 this.loading.set(false);
                 // Don't reveal whether the email exists
-                this.successMessage.set('If an account with that email exists, we\'ve sent a password reset link.');
+                this.successMessage.set(this.translation.t('authForgotPasswordSuccess'));
             },
         });
     }
@@ -804,7 +846,7 @@ class SparkForgotPasswordComponent {
     <div class="d-flex justify-content-center">
       <div class="card" style="width: 100%; max-width: 400px;">
         <div class="card-body">
-          <h3 class="card-title text-center mb-4">Forgot Password</h3>
+          <h3 class="card-title text-center mb-4">{{ 'authForgotPasswordTitle' | t }}</h3>
 
           @if (successMessage()) {
             <div class="alert alert-success" role="alert">{{ successMessage() }}</div>
@@ -816,13 +858,13 @@ class SparkForgotPasswordComponent {
 
           @if (!successMessage()) {
             <p class="text-muted mb-3">
-              Enter your email address and we will send you a link to reset your password.
+              {{ 'authForgotPasswordDescription' | t }}
             </p>
 
             <bs-form>
               <form [formGroup]="form" (ngSubmit)="onSubmit()">
                 <div class="mb-3">
-                  <label for="email" class="form-label">Email</label>
+                  <label for="email" class="form-label">{{ 'authEmail' | t }}</label>
                   <input
                     type="email"
                     id="email"
@@ -839,31 +881,31 @@ class SparkForgotPasswordComponent {
                   @if (loading()) {
                     <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                   }
-                  Send Reset Link
+                  {{ 'authSendResetLink' | t }}
                 </button>
               </form>
             </bs-form>
           }
 
           <div class="mt-3 text-center">
-            <a [routerLink]="routePaths.login">Back to login</a>
+            <a [routerLink]="routePaths.login">{{ 'authBackToLogin' | t }}</a>
           </div>
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: BsFormModule }, { kind: "component", type: i2.BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: i2.BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: BsFormModule }, { kind: "component", type: i2.BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: i2.BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SparkForgotPasswordComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spark-forgot-password',
                     standalone: true,
-                    imports: [ReactiveFormsModule, RouterLink, BsFormModule],
+                    imports: [ReactiveFormsModule, RouterLink, BsFormModule, TranslateKeyPipe],
                     template: `
     <div class="d-flex justify-content-center">
       <div class="card" style="width: 100%; max-width: 400px;">
         <div class="card-body">
-          <h3 class="card-title text-center mb-4">Forgot Password</h3>
+          <h3 class="card-title text-center mb-4">{{ 'authForgotPasswordTitle' | t }}</h3>
 
           @if (successMessage()) {
             <div class="alert alert-success" role="alert">{{ successMessage() }}</div>
@@ -875,13 +917,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
           @if (!successMessage()) {
             <p class="text-muted mb-3">
-              Enter your email address and we will send you a link to reset your password.
+              {{ 'authForgotPasswordDescription' | t }}
             </p>
 
             <bs-form>
               <form [formGroup]="form" (ngSubmit)="onSubmit()">
                 <div class="mb-3">
-                  <label for="email" class="form-label">Email</label>
+                  <label for="email" class="form-label">{{ 'authEmail' | t }}</label>
                   <input
                     type="email"
                     id="email"
@@ -898,14 +940,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   @if (loading()) {
                     <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                   }
-                  Send Reset Link
+                  {{ 'authSendResetLink' | t }}
                 </button>
               </form>
             </bs-form>
           }
 
           <div class="mt-3 text-center">
-            <a [routerLink]="routePaths.login">Back to login</a>
+            <a [routerLink]="routePaths.login">{{ 'authBackToLogin' | t }}</a>
           </div>
         </div>
       </div>
@@ -933,6 +975,7 @@ class SparkResetPasswordComponent {
     authService = inject(SparkAuthService);
     router = inject(Router);
     route = inject(ActivatedRoute);
+    translation = inject(SparkAuthTranslationService);
     routePaths = inject(SPARK_AUTH_ROUTE_PATHS);
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     errorMessage = signal('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
@@ -947,7 +990,7 @@ class SparkResetPasswordComponent {
         this.email = this.route.snapshot.queryParamMap.get('email') ?? '';
         this.code = this.route.snapshot.queryParamMap.get('code') ?? '';
         if (!this.email || !this.code) {
-            this.errorMessage.set('Invalid password reset link. Please request a new one.');
+            this.errorMessage.set(this.translation.t('authInvalidResetLink'));
         }
     }
     onSubmit() {
@@ -956,7 +999,7 @@ class SparkResetPasswordComponent {
             return;
         }
         if (!this.email || !this.code) {
-            this.errorMessage.set('Invalid password reset link. Please request a new one.');
+            this.errorMessage.set(this.translation.t('authInvalidResetLink'));
             return;
         }
         this.loading.set(true);
@@ -966,7 +1009,7 @@ class SparkResetPasswordComponent {
         this.authService.resetPassword(this.email, this.code, newPassword).subscribe({
             next: () => {
                 this.loading.set(false);
-                this.successMessage.set('Your password has been reset successfully.');
+                this.successMessage.set(this.translation.t('authResetSuccess'));
             },
             error: (err) => {
                 this.loading.set(false);
@@ -974,7 +1017,7 @@ class SparkResetPasswordComponent {
                     this.errorMessage.set(err.error.detail);
                 }
                 else {
-                    this.errorMessage.set('Failed to reset password. The link may have expired.');
+                    this.errorMessage.set(this.translation.t('authResetFailed'));
                 }
             },
         });
@@ -984,13 +1027,13 @@ class SparkResetPasswordComponent {
     <div class="d-flex justify-content-center">
       <div class="card" style="width: 100%; max-width: 400px;">
         <div class="card-body">
-          <h3 class="card-title text-center mb-4">Reset Password</h3>
+          <h3 class="card-title text-center mb-4">{{ 'authResetPassword' | t }}</h3>
 
           @if (successMessage()) {
             <div class="alert alert-success" role="alert">
               {{ successMessage() }}
               <div class="mt-2">
-                <a [routerLink]="routePaths.login">Go to login</a>
+                <a [routerLink]="routePaths.login">{{ 'authGoToLogin' | t }}</a>
               </div>
             </div>
           }
@@ -1003,7 +1046,7 @@ class SparkResetPasswordComponent {
             <bs-form>
               <form [formGroup]="form" (ngSubmit)="onSubmit()">
                 <div class="mb-3">
-                  <label for="newPassword" class="form-label">New Password</label>
+                  <label for="newPassword" class="form-label">{{ 'authNewPassword' | t }}</label>
                   <input
                     type="password"
                     id="newPassword"
@@ -1013,7 +1056,7 @@ class SparkResetPasswordComponent {
                 </div>
 
                 <div class="mb-3">
-                  <label for="confirmPassword" class="form-label">Confirm Password</label>
+                  <label for="confirmPassword" class="form-label">{{ 'authConfirmPassword' | t }}</label>
                   <input
                     type="password"
                     id="confirmPassword"
@@ -1021,7 +1064,7 @@ class SparkResetPasswordComponent {
                     autocomplete="new-password"
                   />
                   @if (form.touched && form.hasError('passwordMismatch')) {
-                    <div class="text-danger mt-1">Passwords do not match.</div>
+                    <div class="text-danger mt-1">{{ 'authPasswordMismatch' | t }}</div>
                   }
                 </div>
 
@@ -1033,37 +1076,37 @@ class SparkResetPasswordComponent {
                   @if (loading()) {
                     <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                   }
-                  Reset Password
+                  {{ 'authResetPassword' | t }}
                 </button>
               </form>
             </bs-form>
 
             <div class="mt-3 text-center">
-              <a [routerLink]="routePaths.login">Back to login</a>
+              <a [routerLink]="routePaths.login">{{ 'authBackToLogin' | t }}</a>
             </div>
           }
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: BsFormModule }, { kind: "component", type: i2.BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: i2.BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: BsFormModule }, { kind: "component", type: i2.BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: i2.BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SparkResetPasswordComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'spark-reset-password',
                     standalone: true,
-                    imports: [ReactiveFormsModule, RouterLink, BsFormModule],
+                    imports: [ReactiveFormsModule, RouterLink, BsFormModule, TranslateKeyPipe],
                     template: `
     <div class="d-flex justify-content-center">
       <div class="card" style="width: 100%; max-width: 400px;">
         <div class="card-body">
-          <h3 class="card-title text-center mb-4">Reset Password</h3>
+          <h3 class="card-title text-center mb-4">{{ 'authResetPassword' | t }}</h3>
 
           @if (successMessage()) {
             <div class="alert alert-success" role="alert">
               {{ successMessage() }}
               <div class="mt-2">
-                <a [routerLink]="routePaths.login">Go to login</a>
+                <a [routerLink]="routePaths.login">{{ 'authGoToLogin' | t }}</a>
               </div>
             </div>
           }
@@ -1076,7 +1119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             <bs-form>
               <form [formGroup]="form" (ngSubmit)="onSubmit()">
                 <div class="mb-3">
-                  <label for="newPassword" class="form-label">New Password</label>
+                  <label for="newPassword" class="form-label">{{ 'authNewPassword' | t }}</label>
                   <input
                     type="password"
                     id="newPassword"
@@ -1086,7 +1129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 </div>
 
                 <div class="mb-3">
-                  <label for="confirmPassword" class="form-label">Confirm Password</label>
+                  <label for="confirmPassword" class="form-label">{{ 'authConfirmPassword' | t }}</label>
                   <input
                     type="password"
                     id="confirmPassword"
@@ -1094,7 +1137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     autocomplete="new-password"
                   />
                   @if (form.touched && form.hasError('passwordMismatch')) {
-                    <div class="text-danger mt-1">Passwords do not match.</div>
+                    <div class="text-danger mt-1">{{ 'authPasswordMismatch' | t }}</div>
                   }
                 </div>
 
@@ -1106,13 +1149,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   @if (loading()) {
                     <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                   }
-                  Reset Password
+                  {{ 'authResetPassword' | t }}
                 </button>
               </form>
             </bs-form>
 
             <div class="mt-3 text-center">
-              <a [routerLink]="routePaths.login">Back to login</a>
+              <a [routerLink]="routePaths.login">{{ 'authBackToLogin' | t }}</a>
             </div>
           }
         </div>
@@ -1132,5 +1175,5 @@ var sparkResetPassword_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { SPARK_AUTH_CONFIG, SPARK_AUTH_ROUTE_PATHS, SparkAuthBarComponent, SparkAuthService, SparkForgotPasswordComponent, SparkLoginComponent, SparkRegisterComponent, SparkResetPasswordComponent, SparkTwoFactorComponent, defaultSparkAuthConfig, provideSparkAuth, sparkAuthGuard, sparkAuthInterceptor, sparkAuthRoutes, withSparkAuth };
+export { SPARK_AUTH_CONFIG, SPARK_AUTH_ROUTE_PATHS, SparkAuthBarComponent, SparkAuthService, SparkAuthTranslationService, SparkForgotPasswordComponent, SparkLoginComponent, SparkRegisterComponent, SparkResetPasswordComponent, SparkTwoFactorComponent, TranslateKeyPipe, defaultSparkAuthConfig, provideSparkAuth, sparkAuthGuard, sparkAuthInterceptor, sparkAuthRoutes, withSparkAuth };
 //# sourceMappingURL=mintplayer-ng-spark-auth.mjs.map