@acontplus/ng-auth 1.1.0 → 1.1.1

package/README.md

@@ -1,6 +1,7 @@
 # @acontplus/ng-auth
 
-Acontplus Angular Authentication Module providing comprehensive authentication and authorization features for Angular applications.
+Acontplus Angular Authentication Module providing comprehensive authentication
+and authorization features for Angular applications.
 
 ## Installation
 
@@ -12,26 +13,36 @@ npm install @acontplus/ng-auth
 
 - **Auth Guard**: Route protection with automatic redirect to login page
 - **Auth Token Service**: JWT token management and authentication state handling
-- **URL Redirection Strategy**: Automatically redirects users back to their intended destination after login
-- **Session Expiry Handling**: Manages session expiry during HTTP requests with automatic redirection
+- **URL Redirection Strategy**: Automatically redirects users back to their
+  intended destination after login
+- **Session Expiry Handling**: Manages session expiry during HTTP requests with
+  automatic redirection
 - **CSRF Protection**: Built-in CSRF token management for secure API requests
-- **Token Repository**: Secure token storage and retrieval with local storage support
-- **Authentication Use Cases**: Login, register, refresh token, and logout functionality
+- **Token Repository**: Secure token storage and retrieval with local storage
+  support
+- **Authentication Use Cases**: Login, register, refresh token, and logout
+  functionality
 - **Domain Models**: User domain models and value objects
-- **Clean Architecture**: Organized in domain, application, data, and presentation layers
-- **Angular Integration**: Seamless integration with Angular Router and HTTP client
+- **Clean Architecture**: Organized in domain, application, data, and
+  presentation layers
+- **Angular Integration**: Seamless integration with Angular Router and HTTP
+  client
 - **Type Safety**: Full TypeScript support with comprehensive type definitions
 
 ## URL Redirection Strategy
 
-The module includes a comprehensive URL redirection strategy that ensures users are returned to their intended destination after authentication, even when sessions expire.
+The module includes a comprehensive URL redirection strategy that ensures users
+are returned to their intended destination after authentication, even when
+sessions expire.
 
 ### Components
 
 1. **UrlRedirectService** - Manages URL storage and redirection logic
 2. **Enhanced Auth Guard** - Captures URLs before redirecting to login
-3. **Enhanced Login Use Case** - Redirects to stored URLs after successful authentication
-4. **Auth Redirect Interceptor** - Handles session expiry during HTTP requests (optional)
+3. **Enhanced Login Use Case** - Redirects to stored URLs after successful
+   authentication
+4. **Auth Redirect Interceptor** - Handles session expiry during HTTP requests
+   (optional)
 
 ### Basic Setup
 
@@ -43,8 +54,8 @@ const routes: Routes = [
   {
     path: 'dashboard',
     component: DashboardComponent,
-    canActivate: [authGuard] // Automatically captures URL if not authenticated
-  }
+    canActivate: [authGuard], // Automatically captures URL if not authenticated
+  },
 ];
 ```
 
@@ -59,7 +70,7 @@ export const appConfig: ApplicationConfig = {
     provideHttpClient(
       withInterceptors([
         authRedirectInterceptor, // Handles session expiry during API calls
-      ])
+      ]),
     ),
   ],
 };
@@ -68,11 +79,13 @@ export const appConfig: ApplicationConfig = {
 ### How It Works
 
 **Scenario 1 - Route Protection:**
+
 ```
 User → /dashboard → Auth Guard → Store URL → Login → Success → Redirect to /dashboard
 ```
 
 **Scenario 2 - Session Expiry (with interceptor):**
+
 ```
 User on /reports → API Call → 401 Error → Store URL → Login → Success → Redirect to /reports
 ```
@@ -137,21 +150,19 @@ export class AuthComponent {
 
 ## Login UI Component
 
-The library includes a comprehensive login UI component with Material Design styling.
+The library includes a comprehensive login UI component with Material Design
+styling.
 
 ### Basic Usage
 
 ```html
-<acp-login
-  title="Welcome Back"
-  [showRegisterButton]="true">
-</acp-login>
+<acp-login title="Welcome Back" [showRegisterButton]="true"> </acp-login>
 ```
 
 ### Component Features
 
 - **Dual Mode Support**: Toggle between login and signup modes
-- **Material Design**: Built with Angular Material components  
+- **Material Design**: Built with Angular Material components
 - **Responsive Layout**: Works on desktop and mobile devices
 - **Theme Integration**: Automatically inherits your app's theme colors
 - **Validation**: Built-in form validation with error messaging
@@ -162,14 +173,15 @@ The library includes a comprehensive login UI component with Material Design sty
 ### Core Services
 
 - **AuthTokenService**: JWT token management and authentication state
-- **UrlRedirectService**: URL storage and redirection management  
+- **UrlRedirectService**: URL storage and redirection management
 - **CsrfService**: CSRF token management for secure API requests
 - **TokenRepository**: Secure token storage and retrieval
 
 ### Guards and Interceptors
 
 - **authGuard**: Route protection with automatic URL capture
-- **authRedirectInterceptor**: Session expiry handling during HTTP requests (optional)
+- **authRedirectInterceptor**: Session expiry handling during HTTP requests
+  (optional)
 
 ### Use Cases
 
@@ -180,7 +192,8 @@ The library includes a comprehensive login UI component with Material Design sty
 
 ## Architecture
 
-This library follows Clean Architecture principles with clear separation of concerns organized in domain, application, data, and presentation layers.
+This library follows Clean Architecture principles with clear separation of
+concerns organized in domain, application, data, and presentation layers.
 
 ### Authentication Service
 
@@ -212,7 +225,7 @@ export class LoginComponent {
 
   async login(credentials: LoginCredentials) {
     const csrfToken = await this.csrfService.getCsrfToken();
-    
+
     // Include CSRF token in your login request
     const response = await this.http.post('/api/login', {
       ...credentials,
@@ -257,11 +270,9 @@ import { NgModule } from '@angular/core';
 import { authProviders } from '@acontplus/ng-auth';
 
 @NgModule({
-  providers: [
-    ...authProviders
-  ]
+  providers: [...authProviders],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 ## Running unit tests
@@ -270,7 +281,8 @@ Run `nx test ng-auth` to execute the unit tests.
 
 ## Login Component
 
-The `LoginComponent` provides a flexible, themeable authentication UI component with support for custom fields and dynamic content.
+The `LoginComponent` provides a flexible, themeable authentication UI component
+with support for custom fields and dynamic content.
 
 ### Basic Usage
 
@@ -279,12 +291,9 @@ import { LoginComponent } from '@acontplus/ng-auth/ui/login';
 
 @Component({
   template: `
-    <acp-login 
-      title="Welcome Back"
-      [showRegisterButton]="true">
-    </acp-login>
+    <acp-login title="Welcome Back" [showRegisterButton]="true"> </acp-login>
   `,
-  imports: [LoginComponent]
+  imports: [LoginComponent],
 })
 export class AuthPageComponent {}
 ```
@@ -318,7 +327,8 @@ export class AuthPageComponent {
 ```html
 <acp-login
   [additionalSigninControls]="signinExtras"
-  [additionalSignupControls]="signupExtras">
+  [additionalSignupControls]="signupExtras"
+>
 </acp-login>
 ```
 
@@ -334,9 +344,7 @@ Use content projection slots for custom field templates:
       <mat-label>Company</mat-label>
       <mat-select formControlName="companyId">
         @for (company of companies; track company.id) {
-        <mat-option [value]="company.id">
-          {{ company.name }}
-        </mat-option>
+        <mat-option [value]="company.id"> {{ company.name }} </mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -348,9 +356,7 @@ Use content projection slots for custom field templates:
       <mat-label>Company</mat-label>
       <mat-select formControlName="companyId" required>
         @for (company of companies; track company.id) {
-        <mat-option [value]="company.id">
-          {{ company.name }}
-        </mat-option>
+        <mat-option [value]="company.id"> {{ company.name }} </mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -366,7 +372,13 @@ Use content projection slots for custom field templates:
 
     <mat-form-field class="w-100">
       <mat-label>Validation PIN</mat-label>
-      <input matInput type="text" placeholder="Enter PIN" formControlName="validationPin" required />
+      <input
+        matInput
+        type="text"
+        placeholder="Enter PIN"
+        formControlName="validationPin"
+        required
+      />
     </mat-form-field>
   </div>
 </acp-login>
@@ -393,13 +405,17 @@ Customize the footer with dynamic content:
 
 ### Theme Color Inheritance
 
-The component uses CSS custom properties to inherit colors from the parent app's theme:
+The component uses CSS custom properties to inherit colors from the parent app's
+theme:
 
 - Background gradient: Uses `--mdc-theme-primary` and `--mdc-theme-secondary`
 - Title color: Uses `--mdc-theme-on-surface`
-- Error alerts: Uses `--mdc-theme-error`, `--mdc-theme-error-container`, `--mdc-theme-on-error-container`
+- Error alerts: Uses `--mdc-theme-error`, `--mdc-theme-error-container`,
+  `--mdc-theme-on-error-container`
+
+Fallback colors use Angular Material's Material Design 3 (M3) neutral color
+tokens:
 
-Fallback colors use Angular Material's Material Design 3 (M3) neutral color tokens:
 - Primary: #5c5f5c (M3 neutral primary)
 - Secondary: #79747e (M3 neutral secondary)
 - On surface: #1c1b1f (M3 on-surface)
@@ -423,7 +439,10 @@ To customize colors, define these CSS variables in your app's global styles:
 ### Component Inputs
 
 - `title: string` - The title displayed in the card header (default: 'Login')
-- `showRegisterButton: boolean` - Whether to show the register button (default: true)
-- `additionalSigninControls: Record<string, AbstractControl>` - Additional controls for signin form
-- `additionalSignupControls: Record<string, AbstractControl>` - Additional controls for signup form
+- `showRegisterButton: boolean` - Whether to show the register button (default:
+  true)
+- `additionalSigninControls: Record<string, AbstractControl>` - Additional
+  controls for signin form
+- `additionalSignupControls: Record<string, AbstractControl>` - Additional
+  controls for signup form
 - `footerContent: TemplateRef<any> | null` - Custom footer template

package/fesm2022/acontplus-ng-auth.mjs

@@ -1,16 +1,15 @@
-import { UserRepository, BaseUseCase } from '@acontplus/ng-infrastructure';
+import { UserRepository, BaseUseCase, LoggingService } from '@acontplus/ng-infrastructure';
 export { TOKEN_PROVIDER } from '@acontplus/ng-infrastructure';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, signal, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, NgZone, signal, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Router } from '@angular/router';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import { jwtDecode } from 'jwt-decode';
 import { ENVIRONMENT, AUTH_API } from '@acontplus/ng-config';
 import { catchError, switchMap } from 'rxjs/operators';
-import { throwError, from, map, of, tap, catchError as catchError$1 } from 'rxjs';
+import { throwError, from, of, tap, catchError as catchError$1 } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
-import { AuthTokens } from '@acontplus/core';
 import * as i2 from '@angular/forms';
 import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardFooter } from '@angular/material/card';
@@ -112,7 +111,7 @@ class TokenRepository {
         try {
             return jwtDecode(token);
         }
-        catch (error) {
+        catch {
             return null;
         }
     }
@@ -139,23 +138,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
         }] });
 
 class AuthTokenService {
-    tokenRepository;
-    constructor(tokenRepository) {
-        this.tokenRepository = tokenRepository;
-    }
+    tokenRepository = inject(TokenRepository);
     getToken() {
         return this.tokenRepository.getAccessToken();
     }
     isAuthenticated() {
         return this.tokenRepository.isAuthenticated();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthTokenService, deps: [{ token: TokenRepository }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthTokenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthTokenService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthTokenService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: TokenRepository }] });
+        }] });
 
 /**
  * Service to manage URL redirection after authentication
@@ -164,7 +160,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
  */
 class UrlRedirectService {
     REDIRECT_URL_KEY = 'acp_redirect_url';
-    EXCLUDED_ROUTES = ['/login', '/register', '/forgot-password', '/reset-password'];
+    EXCLUDED_ROUTES = [
+        '/login',
+        '/auth',
+        '/register',
+        '/forgot-password',
+        '/reset-password',
+    ];
     router = inject(Router);
     platformId = inject(PLATFORM_ID);
     document = inject(DOCUMENT);
@@ -311,31 +313,7 @@ const authRedirectInterceptor = (req, next) => {
     }));
 };
 
-class User {
-    id;
-    email;
-    displayName;
-    _refreshToken;
-    constructor(id, email, displayName, _refreshToken) {
-        this.id = id;
-        this.email = email;
-        this.displayName = displayName;
-        this._refreshToken = _refreshToken;
-    }
-    get refreshToken() {
-        return this._refreshToken;
-    }
-    updateRefreshToken(token) {
-        this._refreshToken = token;
-    }
-    clearRefreshToken() {
-        this._refreshToken = undefined;
-    }
-    static create(email, displayName, _password) {
-        const id = Date.now(); // Generate a numeric ID
-        return new User(id, email, displayName);
-    }
-}
+// src/lib/domain/models/auth.ts
 
 // src/lib/domain/models/index.ts
 
@@ -405,26 +383,22 @@ class AuthHttpRepository extends AuthRepository {
         })));
     }
     register(request) {
-        return from(this.csrfService.getCsrfToken()).pipe(switchMap(csrfToken => this.http
-            .post(`${this.URL}register`, request, {
+        return from(this.csrfService.getCsrfToken()).pipe(switchMap(csrfToken => this.http.post(`${this.URL}register`, request, {
             headers: {
                 'Device-Info': getDeviceInfo(),
                 'X-CSRF-Token': csrfToken,
             },
             withCredentials: true,
-        })
-            .pipe(map(response => new AuthTokens(response.token, response.refreshToken)))));
+        })));
     }
     refreshToken(request) {
-        return from(this.csrfService.getCsrfToken()).pipe(switchMap(csrfToken => this.http
-            .post(`${this.URL}refresh`, request, {
+        return from(this.csrfService.getCsrfToken()).pipe(switchMap(csrfToken => this.http.post(`${this.URL}refresh`, request, {
             headers: {
                 'Device-Info': getDeviceInfo(),
                 'X-CSRF-Token': csrfToken,
             },
             withCredentials: true,
-        })
-            .pipe(map(response => new AuthTokens(response.token, response.refreshToken)))));
+        })));
     }
     logout(email, refreshToken) {
         return from(this.csrfService.getCsrfToken()).pipe(switchMap(csrfToken => this.http.post(`${this.URL}logout`, { email, refreshToken: refreshToken || undefined }, {
@@ -452,6 +426,7 @@ class AuthStore {
     tokenRepository = inject(TokenRepository);
     userRepository = inject(UserRepository);
     router = inject(Router);
+    ngZone = inject(NgZone);
     // Authentication state signals
     _isAuthenticated = signal(false, ...(ngDevMode ? [{ debugName: "_isAuthenticated" }] : []));
     _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
@@ -505,12 +480,16 @@ class AuthStore {
             if (this.refreshTokenTimeout) {
                 clearTimeout(this.refreshTokenTimeout);
             }
-            this.refreshTokenTimeout = window.setTimeout(() => {
-                // Check if refresh is still needed before executing
-                if (this.tokenRepository.needsRefresh()) {
-                    this.refreshToken().subscribe();
-                }
-            }, refreshTime);
+            this.ngZone.runOutsideAngular(() => {
+                this.refreshTokenTimeout = window.setTimeout(() => {
+                    this.ngZone.run(() => {
+                        // Check if refresh is still needed before executing
+                        if (this.tokenRepository.needsRefresh()) {
+                            this.refreshToken().subscribe();
+                        }
+                    });
+                }, refreshTime);
+            });
         }
         catch {
             // Silent fail - token might be invalid
@@ -555,7 +534,7 @@ class AuthStore {
             },
             error: () => {
                 this.refreshInProgress$ = undefined;
-            }
+            },
         }));
         return this.refreshInProgress$;
     }
@@ -584,7 +563,7 @@ class AuthStore {
                 error: () => {
                     // Server logout failed, still clear client-side data for security
                     this.performClientLogout();
-                }
+                },
             });
         }
         else {
@@ -744,7 +723,9 @@ class LogoutUseCase extends BaseUseCase {
         const userData = this.userRepository.getCurrentUser();
         const refreshToken = this.tokenRepository.getRefreshToken();
         if (userData?.email && refreshToken && refreshToken.length > 0) {
-            return this.authRepository.logout(userData.email, refreshToken).pipe(tap(() => this.cleanup()));
+            return this.authRepository
+                .logout(userData.email, refreshToken)
+                .pipe(tap(() => this.cleanup()));
         }
         this.cleanup();
         return of(void 0);
@@ -785,8 +766,10 @@ class LoginComponent {
     // Computed signal to check if footer content exists
     hasFooterContent = computed(() => this.footerContent() !== null, ...(ngDevMode ? [{ debugName: "hasFooterContent" }] : []));
     fb = inject(FormBuilder);
+    authStore = inject(AuthStore);
     loginUseCase = inject(LoginUseCase);
     registerUseCase = inject(RegisterUseCase);
+    loggingService = inject(LoggingService);
     // Angular 20+ signals
     isLoginMode = signal(true, ...(ngDevMode ? [{ debugName: "isLoginMode" }] : []));
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
@@ -832,7 +815,7 @@ class LoginComponent {
             const loginRequest = {
                 ...this.signinForm.value,
                 // If showRememberMe is false, default rememberMe to false
-                rememberMe: this.showRememberMe() ? (this.signinForm.value.rememberMe ?? false) : false
+                rememberMe: this.showRememberMe() ? (this.signinForm.value.rememberMe ?? false) : false,
             };
             this.loginUseCase.execute(loginRequest).subscribe({
                 next: () => {
@@ -841,7 +824,7 @@ class LoginComponent {
                 error: error => {
                     this.isLoading.set(false);
                     this.errorMessage.set('Error al iniciar sesión. Verifique sus credenciales.');
-                    console.error('Login error:', error);
+                    this.loggingService.error('Login failed', { error });
                 },
             });
         }
@@ -859,13 +842,13 @@ class LoginComponent {
                 error: error => {
                     this.isLoading.set(false);
                     this.errorMessage.set('Error al registrar usuario. Intente nuevamente.');
-                    console.error('Register error:', error);
+                    this.loggingService.error('Register error', { error });
                 },
             });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: LoginComponent, isStandalone: true, selector: "acp-login", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showRegisterButton: { classPropertyName: "showRegisterButton", publicName: "showRegisterButton", isSignal: true, isRequired: false, transformFunction: null }, showRememberMe: { classPropertyName: "showRememberMe", publicName: "showRememberMe", isSignal: true, isRequired: false, transformFunction: null }, additionalSigninControls: { classPropertyName: "additionalSigninControls", publicName: "additionalSigninControls", isSignal: true, isRequired: false, transformFunction: null }, additionalSignupControls: { classPropertyName: "additionalSignupControls", publicName: "additionalSignupControls", isSignal: true, isRequired: false, transformFunction: null }, additionalSigninFields: { classPropertyName: "additionalSigninFields", publicName: "additionalSigninFields", isSignal: true, isRequired: false, transformFunction: null }, additionalSignupFields: { classPropertyName: "additionalSignupFields", publicName: "additionalSignupFields", isSignal: true, isRequired: false, transformFunction: null }, footerContent: { classPropertyName: "footerContent", publicName: "footerContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section id=\"wrapper\" class=\"d-flex justify-content-center align-items-center\">\n  <mat-card class=\"mat-elevation-z8 p-4 rounded\">\n    <mat-card-header>\n      <mat-card-title class=\"text-center\">{{ title() }}</mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      @if (isLoginMode()) {\n      <form [formGroup]=\"signinForm\" (ngSubmit)=\"signIn()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Usuario</mat-label>\n          <input matInput type=\"text\" placeholder=\"Ingrese su usuario\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input matInput type=\"password\" placeholder=\"Ingrese su contrase\u00F1a\" formControlName=\"password\" />\n        </mat-form-field>\n\n        <!-- Remember Me checkbox - conditional -->\n        @if (showRememberMe()) {\n        <div class=\"d-flex align-items-center mt-2\">\n          <mat-checkbox formControlName=\"rememberMe\">\n            Recordarme\n          </mat-checkbox>\n        </div>\n        }\n\n        <!-- Additional signin fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSigninFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button mat-raised-button color=\"primary\" [disabled]=\"!signinForm.valid || isLoading()\" type=\"submit\"\n            class=\"w-100\">\n            @if (isLoading()) {\n            Ingresando...\n            } @else {\n            <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          @if (showRegisterButton()) {\n          <button mat-button type=\"button\" (click)=\"switchMode()\">\n            \u00BFNo tienes cuenta? Reg\u00EDstrate\n          </button>\n          }\n        </div>\n      </form>\n      } @else {\n      <form [formGroup]=\"signupForm\" (ngSubmit)=\"registerUser()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Nombre</mat-label>\n          <input matInput type=\"text\" placeholder=\"Ingrese su nombre\" formControlName=\"displayName\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Email</mat-label>\n          <input matInput type=\"email\" placeholder=\"Ingrese su email\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input matInput type=\"password\" placeholder=\"Ingrese su contrase\u00F1a\" formControlName=\"password\" />\n        </mat-form-field>\n\n        <!-- Additional signup fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSignupFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button mat-raised-button color=\"primary\" [disabled]=\"!signupForm.valid || isLoading()\" type=\"submit\"\n            class=\"w-100\">\n            @if (isLoading()) {\n            Registrando...\n            } @else {\n            <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          <button mat-button type=\"button\" (click)=\"switchMode()\">\u00BFYa tienes cuenta? Inicia sesi\u00F3n</button>\n        </div>\n      </form>\n      }\n      @if (errorMessage()) {\n      <div class=\"alert alert-danger mt-3\" role=\"alert\">\n        {{ errorMessage() }}\n      </div>\n      }\n    </mat-card-content>\n    @if (hasFooterContent()) {\n    <mat-card-footer>\n      <ng-container *ngTemplateOutlet=\"footerContent()\"></ng-container>\n    </mat-card-footer>\n    }\n  </mat-card>\n</section>\n", styles: ["#wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mdc-theme-primary, #5c5f5c) 0%,var(--mdc-theme-secondary, #79747e) 100%);padding:20px}mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}mat-card-header{text-align:center;margin-bottom:20px}mat-card-title{font-size:24px;font-weight:600;color:var(--mdc-theme-on-surface, #1c1b1f)}mat-form-field{width:100%}.w-100{width:100%}.d-flex{display:flex}.flex-column{flex-direction:column}.gap-3{gap:12px}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.mt-3{margin-top:12px}.mt-2{margin-top:8px}.text-center{text-align:center}.p-4{padding:16px}.rounded{border-radius:12px}.alert-danger{background-color:var(--mdc-theme-error-container, #ffdad6);border-color:var(--mdc-theme-error, #ba1a1a);color:var(--mdc-theme-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-xs-12,.col-sm-12,.col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}.m-t-10{margin-top:10px}.social{display:flex;justify-content:center}mat-button{border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: LoginComponent, isStandalone: true, selector: "acp-login", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showRegisterButton: { classPropertyName: "showRegisterButton", publicName: "showRegisterButton", isSignal: true, isRequired: false, transformFunction: null }, showRememberMe: { classPropertyName: "showRememberMe", publicName: "showRememberMe", isSignal: true, isRequired: false, transformFunction: null }, additionalSigninControls: { classPropertyName: "additionalSigninControls", publicName: "additionalSigninControls", isSignal: true, isRequired: false, transformFunction: null }, additionalSignupControls: { classPropertyName: "additionalSignupControls", publicName: "additionalSignupControls", isSignal: true, isRequired: false, transformFunction: null }, additionalSigninFields: { classPropertyName: "additionalSigninFields", publicName: "additionalSigninFields", isSignal: true, isRequired: false, transformFunction: null }, additionalSignupFields: { classPropertyName: "additionalSignupFields", publicName: "additionalSignupFields", isSignal: true, isRequired: false, transformFunction: null }, footerContent: { classPropertyName: "footerContent", publicName: "footerContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section id=\"wrapper\" class=\"d-flex justify-content-center align-items-center\">\n  <mat-card class=\"mat-elevation-z8 p-4 rounded\">\n    <mat-card-header>\n      <mat-card-title class=\"text-center\">{{ title() }}</mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      @if (isLoginMode()) {\n        <form [formGroup]=\"signinForm\" (ngSubmit)=\"signIn()\" class=\"d-flex flex-column gap-3\">\n          <mat-form-field class=\"w-100\">\n            <mat-label>Usuario</mat-label>\n            <input matInput type=\"text\" placeholder=\"Ingrese su usuario\" formControlName=\"email\" />\n          </mat-form-field>\n\n          <mat-form-field class=\"w-100\">\n            <mat-label>Contrase\u00F1a</mat-label>\n            <input\n              matInput\n              type=\"password\"\n              placeholder=\"Ingrese su contrase\u00F1a\"\n              formControlName=\"password\"\n              autocomplete=\"current-password\"\n            />\n          </mat-form-field>\n\n          <!-- Remember Me checkbox - conditional -->\n          @if (showRememberMe()) {\n            <div class=\"d-flex align-items-center mt-2\">\n              <mat-checkbox formControlName=\"rememberMe\"> Recordarme </mat-checkbox>\n            </div>\n          }\n\n          <!-- Additional signin fields -->\n          <ng-container *ngTemplateOutlet=\"additionalSigninFields()\"></ng-container>\n\n          <div class=\"d-flex justify-content-center mt-3\">\n            <button\n              mat-raised-button\n              color=\"primary\"\n              [disabled]=\"!signinForm.valid || isLoading()\"\n              type=\"submit\"\n              class=\"w-100\"\n            >\n              @if (isLoading()) {\n                Ingresando...\n              } @else {\n                <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>\n              }\n            </button>\n          </div>\n\n          <div class=\"text-center mt-2\">\n            @if (showRegisterButton()) {\n              <button mat-button type=\"button\" (click)=\"switchMode()\">\n                \u00BFNo tienes cuenta? Reg\u00EDstrate\n              </button>\n            }\n          </div>\n        </form>\n      } @else {\n        <form [formGroup]=\"signupForm\" (ngSubmit)=\"registerUser()\" class=\"d-flex flex-column gap-3\">\n          <mat-form-field class=\"w-100\">\n            <mat-label>Nombre</mat-label>\n            <input\n              matInput\n              type=\"text\"\n              placeholder=\"Ingrese su nombre\"\n              formControlName=\"displayName\"\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"w-100\">\n            <mat-label>Email</mat-label>\n            <input matInput type=\"email\" placeholder=\"Ingrese su email\" formControlName=\"email\" />\n          </mat-form-field>\n\n          <mat-form-field class=\"w-100\">\n            <mat-label>Contrase\u00F1a</mat-label>\n            <input\n              matInput\n              type=\"password\"\n              placeholder=\"Ingrese su contrase\u00F1a\"\n              formControlName=\"password\"\n              autocomplete=\"new-password\"\n            />\n          </mat-form-field>\n\n          <!-- Additional signup fields -->\n          <ng-container *ngTemplateOutlet=\"additionalSignupFields()\"></ng-container>\n\n          <div class=\"d-flex justify-content-center mt-3\">\n            <button\n              mat-raised-button\n              color=\"primary\"\n              [disabled]=\"!signupForm.valid || isLoading()\"\n              type=\"submit\"\n              class=\"w-100\"\n            >\n              @if (isLoading()) {\n                Registrando...\n              } @else {\n                <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>\n              }\n            </button>\n          </div>\n\n          <div class=\"text-center mt-2\">\n            <button mat-button type=\"button\" (click)=\"switchMode()\">\n              \u00BFYa tienes cuenta? Inicia sesi\u00F3n\n            </button>\n          </div>\n        </form>\n      }\n      @if (errorMessage()) {\n        <div class=\"alert alert-danger mt-3\" role=\"alert\">\n          {{ errorMessage() }}\n        </div>\n      }\n    </mat-card-content>\n    @if (hasFooterContent()) {\n      <mat-card-footer>\n        <ng-container *ngTemplateOutlet=\"footerContent()\"></ng-container>\n      </mat-card-footer>\n    }\n  </mat-card>\n</section>\n", styles: ["#wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mdc-theme-primary, #5c5f5c) 0%,var(--mdc-theme-secondary, #79747e) 100%);padding:20px}mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}mat-card-header{text-align:center;margin-bottom:20px}mat-card-title{font-size:24px;font-weight:600;color:var(--mdc-theme-on-surface, #1c1b1f)}mat-form-field{width:100%}.w-100{width:100%}.d-flex{display:flex}.flex-column{flex-direction:column}.gap-3{gap:12px}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.mt-3{margin-top:12px}.mt-2{margin-top:8px}.text-center{text-align:center}.p-4{padding:16px}.rounded{border-radius:12px}.alert-danger{background-color:var(--mdc-theme-error-container, #ffdad6);border-color:var(--mdc-theme-error, #ba1a1a);color:var(--mdc-theme-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-xs-12,.col-sm-12,.col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}.m-t-10{margin-top:10px}.social{display:flex;justify-content:center}mat-button{border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
@@ -884,7 +867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         MatCardFooter,
                         MatAnchor,
                         MatCheckbox,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section id=\"wrapper\" class=\"d-flex justify-content-center align-items-center\">\n  <mat-card class=\"mat-elevation-z8 p-4 rounded\">\n    <mat-card-header>\n      <mat-card-title class=\"text-center\">{{ title() }}</mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      @if (isLoginMode()) {\n      <form [formGroup]=\"signinForm\" (ngSubmit)=\"signIn()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Usuario</mat-label>\n          <input matInput type=\"text\" placeholder=\"Ingrese su usuario\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input matInput type=\"password\" placeholder=\"Ingrese su contrase\u00F1a\" formControlName=\"password\" />\n        </mat-form-field>\n\n        <!-- Remember Me checkbox - conditional -->\n        @if (showRememberMe()) {\n        <div class=\"d-flex align-items-center mt-2\">\n          <mat-checkbox formControlName=\"rememberMe\">\n            Recordarme\n          </mat-checkbox>\n        </div>\n        }\n\n        <!-- Additional signin fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSigninFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button mat-raised-button color=\"primary\" [disabled]=\"!signinForm.valid || isLoading()\" type=\"submit\"\n            class=\"w-100\">\n            @if (isLoading()) {\n            Ingresando...\n            } @else {\n            <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          @if (showRegisterButton()) {\n          <button mat-button type=\"button\" (click)=\"switchMode()\">\n            \u00BFNo tienes cuenta? Reg\u00EDstrate\n          </button>\n          }\n        </div>\n      </form>\n      } @else {\n      <form [formGroup]=\"signupForm\" (ngSubmit)=\"registerUser()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Nombre</mat-label>\n          <input matInput type=\"text\" placeholder=\"Ingrese su nombre\" formControlName=\"displayName\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Email</mat-label>\n          <input matInput type=\"email\" placeholder=\"Ingrese su email\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input matInput type=\"password\" placeholder=\"Ingrese su contrase\u00F1a\" formControlName=\"password\" />\n        </mat-form-field>\n\n        <!-- Additional signup fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSignupFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button mat-raised-button color=\"primary\" [disabled]=\"!signupForm.valid || isLoading()\" type=\"submit\"\n            class=\"w-100\">\n            @if (isLoading()) {\n            Registrando...\n            } @else {\n            <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          <button mat-button type=\"button\" (click)=\"switchMode()\">\u00BFYa tienes cuenta? Inicia sesi\u00F3n</button>\n        </div>\n      </form>\n      }\n      @if (errorMessage()) {\n      <div class=\"alert alert-danger mt-3\" role=\"alert\">\n        {{ errorMessage() }}\n      </div>\n      }\n    </mat-card-content>\n    @if (hasFooterContent()) {\n    <mat-card-footer>\n      <ng-container *ngTemplateOutlet=\"footerContent()\"></ng-container>\n    </mat-card-footer>\n    }\n  </mat-card>\n</section>\n", styles: ["#wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mdc-theme-primary, #5c5f5c) 0%,var(--mdc-theme-secondary, #79747e) 100%);padding:20px}mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}mat-card-header{text-align:center;margin-bottom:20px}mat-card-title{font-size:24px;font-weight:600;color:var(--mdc-theme-on-surface, #1c1b1f)}mat-form-field{width:100%}.w-100{width:100%}.d-flex{display:flex}.flex-column{flex-direction:column}.gap-3{gap:12px}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.mt-3{margin-top:12px}.mt-2{margin-top:8px}.text-center{text-align:center}.p-4{padding:16px}.rounded{border-radius:12px}.alert-danger{background-color:var(--mdc-theme-error-container, #ffdad6);border-color:var(--mdc-theme-error, #ba1a1a);color:var(--mdc-theme-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-xs-12,.col-sm-12,.col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}.m-t-10{margin-top:10px}.social{display:flex;justify-content:center}mat-button{border-radius:8px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section id=\"wrapper\" class=\"d-flex justify-content-center align-items-center\">\n  <mat-card class=\"mat-elevation-z8 p-4 rounded\">\n    <mat-card-header>\n      <mat-card-title class=\"text-center\">{{ title() }}</mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      @if (isLoginMode()) {\n        <form [formGroup]=\"signinForm\" (ngSubmit)=\"signIn()\" class=\"d-flex flex-column gap-3\">\n          <mat-form-field class=\"w-100\">\n            <mat-label>Usuario</mat-label>\n            <input matInput type=\"text\" placeholder=\"Ingrese su usuario\" formControlName=\"email\" />\n          </mat-form-field>\n\n          <mat-form-field class=\"w-100\">\n            <mat-label>Contrase\u00F1a</mat-label>\n            <input\n              matInput\n              type=\"password\"\n              placeholder=\"Ingrese su contrase\u00F1a\"\n              formControlName=\"password\"\n              autocomplete=\"current-password\"\n            />\n          </mat-form-field>\n\n          <!-- Remember Me checkbox - conditional -->\n          @if (showRememberMe()) {\n            <div class=\"d-flex align-items-center mt-2\">\n              <mat-checkbox formControlName=\"rememberMe\"> Recordarme </mat-checkbox>\n            </div>\n          }\n\n          <!-- Additional signin fields -->\n          <ng-container *ngTemplateOutlet=\"additionalSigninFields()\"></ng-container>\n\n          <div class=\"d-flex justify-content-center mt-3\">\n            <button\n              mat-raised-button\n              color=\"primary\"\n              [disabled]=\"!signinForm.valid || isLoading()\"\n              type=\"submit\"\n              class=\"w-100\"\n            >\n              @if (isLoading()) {\n                Ingresando...\n              } @else {\n                <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>\n              }\n            </button>\n          </div>\n\n          <div class=\"text-center mt-2\">\n            @if (showRegisterButton()) {\n              <button mat-button type=\"button\" (click)=\"switchMode()\">\n                \u00BFNo tienes cuenta? Reg\u00EDstrate\n              </button>\n            }\n          </div>\n        </form>\n      } @else {\n        <form [formGroup]=\"signupForm\" (ngSubmit)=\"registerUser()\" class=\"d-flex flex-column gap-3\">\n          <mat-form-field class=\"w-100\">\n            <mat-label>Nombre</mat-label>\n            <input\n              matInput\n              type=\"text\"\n              placeholder=\"Ingrese su nombre\"\n              formControlName=\"displayName\"\n            />\n          </mat-form-field>\n\n          <mat-form-field class=\"w-100\">\n            <mat-label>Email</mat-label>\n            <input matInput type=\"email\" placeholder=\"Ingrese su email\" formControlName=\"email\" />\n          </mat-form-field>\n\n          <mat-form-field class=\"w-100\">\n            <mat-label>Contrase\u00F1a</mat-label>\n            <input\n              matInput\n              type=\"password\"\n              placeholder=\"Ingrese su contrase\u00F1a\"\n              formControlName=\"password\"\n              autocomplete=\"new-password\"\n            />\n          </mat-form-field>\n\n          <!-- Additional signup fields -->\n          <ng-container *ngTemplateOutlet=\"additionalSignupFields()\"></ng-container>\n\n          <div class=\"d-flex justify-content-center mt-3\">\n            <button\n              mat-raised-button\n              color=\"primary\"\n              [disabled]=\"!signupForm.valid || isLoading()\"\n              type=\"submit\"\n              class=\"w-100\"\n            >\n              @if (isLoading()) {\n                Registrando...\n              } @else {\n                <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>\n              }\n            </button>\n          </div>\n\n          <div class=\"text-center mt-2\">\n            <button mat-button type=\"button\" (click)=\"switchMode()\">\n              \u00BFYa tienes cuenta? Inicia sesi\u00F3n\n            </button>\n          </div>\n        </form>\n      }\n      @if (errorMessage()) {\n        <div class=\"alert alert-danger mt-3\" role=\"alert\">\n          {{ errorMessage() }}\n        </div>\n      }\n    </mat-card-content>\n    @if (hasFooterContent()) {\n      <mat-card-footer>\n        <ng-container *ngTemplateOutlet=\"footerContent()\"></ng-container>\n      </mat-card-footer>\n    }\n  </mat-card>\n</section>\n", styles: ["#wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mdc-theme-primary, #5c5f5c) 0%,var(--mdc-theme-secondary, #79747e) 100%);padding:20px}mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}mat-card-header{text-align:center;margin-bottom:20px}mat-card-title{font-size:24px;font-weight:600;color:var(--mdc-theme-on-surface, #1c1b1f)}mat-form-field{width:100%}.w-100{width:100%}.d-flex{display:flex}.flex-column{flex-direction:column}.gap-3{gap:12px}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.mt-3{margin-top:12px}.mt-2{margin-top:8px}.text-center{text-align:center}.p-4{padding:16px}.rounded{border-radius:12px}.alert-danger{background-color:var(--mdc-theme-error-container, #ffdad6);border-color:var(--mdc-theme-error, #ba1a1a);color:var(--mdc-theme-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-xs-12,.col-sm-12,.col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}.m-t-10{margin-top:10px}.social{display:flex;justify-content:center}mat-button{border-radius:8px}\n"] }]
         }], ctorParameters: () => [] });
 
 // src/lib/presentation/components/index.ts
@@ -904,5 +887,5 @@ const authProviders = [
  * Generated bundle index. Do not edit.
  */
 
-export { AuthHttpRepository, AuthRepository, AuthStore, AuthTokenService, LoginComponent, LoginUseCase, LogoutUseCase, RefreshTokenUseCase, RegisterUseCase, TokenRepository, UrlRedirectService, User, authGuard, authProviders, authRedirectInterceptor };
+export { AuthHttpRepository, AuthRepository, AuthStore, AuthTokenService, LoginComponent, LoginUseCase, LogoutUseCase, RefreshTokenUseCase, RegisterUseCase, TokenRepository, UrlRedirectService, authGuard, authProviders, authRedirectInterceptor };
 //# sourceMappingURL=acontplus-ng-auth.mjs.map