@acontplus/ng-auth 1.0.2 → 1.1.0

package/fesm2022/acontplus-ng-auth.mjs

@@ -1,15 +1,15 @@
-import { UserRepository } from '@acontplus/ng-infrastructure';
+import { UserRepository, BaseUseCase } 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 { Router } from '@angular/router';
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, CommonModule } 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 { HttpClient } from '@angular/common/http';
-import { from, map, of, tap, catchError, throwError } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
 import { AuthTokens } from '@acontplus/core';
 import * as i2 from '@angular/forms';
 import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
@@ -18,6 +18,7 @@ import { MatLabel, MatFormField } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { MatIcon } from '@angular/material/icon';
 import { MatButton, MatAnchor } from '@angular/material/button';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 class TokenRepository {
     environment = inject(ENVIRONMENT);
@@ -36,10 +37,11 @@ class TokenRepository {
             sessionStorage.getItem(this.environment.tokenKey));
     }
     getRefreshToken() {
-        // Refresh tokens are now stored in HttpOnly cookies by the server
-        // We can't read them directly from client-side code for security
-        // They are automatically sent with requests when withCredentials: true is used
-        return null;
+        if (!isPlatformBrowser(this.platformId)) {
+            return null;
+        }
+        return (localStorage.getItem(this.environment.refreshTokenKey) ||
+            sessionStorage.getItem(this.environment.refreshTokenKey));
     }
     setToken(token, rememberMe = false) {
         if (!isPlatformBrowser(this.platformId)) {
@@ -52,10 +54,16 @@ class TokenRepository {
             sessionStorage.setItem(this.environment.tokenKey, token);
         }
     }
-    setRefreshToken(_refreshToken, _rememberMe = false) {
-        // Refresh tokens are now set by the server as HttpOnly cookies
-        // Client-side code cannot set HttpOnly cookies for security reasons
-        // They are set in response to successful login/register requests
+    setRefreshToken(refreshToken, rememberMe = false) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        if (rememberMe) {
+            localStorage.setItem(this.environment.refreshTokenKey, refreshToken);
+        }
+        else {
+            sessionStorage.setItem(this.environment.refreshTokenKey, refreshToken);
+        }
     }
     clearTokens() {
         if (!isPlatformBrowser(this.platformId)) {
@@ -108,6 +116,18 @@ class TokenRepository {
             return null;
         }
     }
+    /**
+     * Determines if tokens are stored persistently (localStorage) vs session (sessionStorage)
+     */
+    isRememberMeEnabled() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return false;
+        }
+        // Check if tokens exist in localStorage (persistent storage)
+        const tokenInLocalStorage = localStorage.getItem(this.environment.tokenKey);
+        const refreshTokenInLocalStorage = localStorage.getItem(this.environment.refreshTokenKey);
+        return !!(tokenInLocalStorage || refreshTokenInLocalStorage);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TokenRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TokenRepository, providedIn: 'root' });
 }
@@ -137,59 +157,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: TokenRepository }] });
 
-const authGuard = (_route, _state) => {
-    const authService = inject(AuthTokenService);
-    const router = inject(Router);
-    const environment = inject(ENVIRONMENT);
-    if (authService.isAuthenticated()) {
-        return true;
+/**
+ * Service to manage URL redirection after authentication
+ * Stores the intended URL when session is lost and redirects to it after successful login
+ * SSR-compatible by checking platform before accessing sessionStorage
+ */
+class UrlRedirectService {
+    REDIRECT_URL_KEY = 'acp_redirect_url';
+    EXCLUDED_ROUTES = ['/login', '/register', '/forgot-password', '/reset-password'];
+    router = inject(Router);
+    platformId = inject(PLATFORM_ID);
+    document = inject(DOCUMENT);
+    /**
+     * Stores the current URL for later redirection
+     * @param url - The URL to store (defaults to current URL)
+     */
+    storeIntendedUrl(url) {
+        // Only store in browser environment
+        if (!this.isBrowser()) {
+            return;
+        }
+        const urlToStore = url || this.router.url;
+        // Don't store authentication-related routes
+        if (this.isExcludedRoute(urlToStore)) {
+            return;
+        }
+        // Don't store URLs with query parameters that might contain sensitive data
+        const urlWithoutParams = urlToStore.split('?')[0];
+        this.getSessionStorage()?.setItem(this.REDIRECT_URL_KEY, urlWithoutParams);
     }
-    // Redirect to login page (configurable via environment)
-    router.navigate([environment.loginRoute]);
-    return false;
-};
-
-// src/lib/services/csrf.service.ts
-class CsrfService {
-    http = inject(HttpClient);
-    environment = inject(ENVIRONMENT);
-    csrfToken = null;
     /**
-     * Get CSRF token, fetching it if not available
+     * Gets the stored intended URL
+     * @returns The stored URL or null if none exists
      */
-    async getCsrfToken() {
-        if (this.csrfToken) {
-            return this.csrfToken;
+    getIntendedUrl() {
+        if (!this.isBrowser()) {
+            return null;
         }
-        try {
-            const response = await this.http
-                .get(`${this.environment.apiBaseUrl}/csrf-token`)
-                .toPromise();
-            this.csrfToken = response?.csrfToken || null;
-            return this.csrfToken || '';
+        return this.getSessionStorage()?.getItem(this.REDIRECT_URL_KEY) || null;
+    }
+    /**
+     * Redirects to the stored URL and clears it from storage
+     * @param defaultRoute - The default route to navigate to if no URL is stored
+     */
+    redirectToIntendedUrl(defaultRoute = '/') {
+        const intendedUrl = this.getIntendedUrl();
+        if (intendedUrl && !this.isExcludedRoute(intendedUrl)) {
+            this.clearIntendedUrl();
+            this.router.navigateByUrl(intendedUrl);
         }
-        catch {
-            // If CSRF endpoint fails, return empty token
-            // Server should handle missing CSRF tokens appropriately
-            return '';
+        else {
+            this.router.navigate([defaultRoute]);
         }
     }
     /**
-     * Clear stored CSRF token (useful on logout)
+     * Clears the stored intended URL
      */
-    clearCsrfToken() {
-        this.csrfToken = null;
+    clearIntendedUrl() {
+        if (!this.isBrowser()) {
+            return;
+        }
+        this.getSessionStorage()?.removeItem(this.REDIRECT_URL_KEY);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CsrfService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CsrfService, providedIn: 'root' });
+    /**
+     * Checks if a URL should be excluded from redirection
+     * @param url - The URL to check
+     * @returns True if the URL should be excluded
+     */
+    isExcludedRoute(url) {
+        return this.EXCLUDED_ROUTES.some(route => url.includes(route));
+    }
+    /**
+     * Stores the current URL if it's not an excluded route
+     * Useful for guards and interceptors
+     */
+    storeCurrentUrlIfAllowed() {
+        const currentUrl = this.router.url;
+        if (!this.isExcludedRoute(currentUrl)) {
+            this.storeIntendedUrl(currentUrl);
+        }
+    }
+    /**
+     * Checks if we're running in a browser environment
+     * @returns True if running in browser, false if SSR
+     */
+    isBrowser() {
+        return isPlatformBrowser(this.platformId);
+    }
+    /**
+     * Safely gets sessionStorage reference
+     * @returns sessionStorage object or null if not available
+     */
+    getSessionStorage() {
+        if (!this.isBrowser()) {
+            return null;
+        }
+        try {
+            return this.document.defaultView?.sessionStorage || null;
+        }
+        catch {
+            // Handle cases where sessionStorage might be disabled
+            return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UrlRedirectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UrlRedirectService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CsrfService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UrlRedirectService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
+const authGuard = (_route, state) => {
+    const authService = inject(AuthTokenService);
+    const router = inject(Router);
+    const urlRedirectService = inject(UrlRedirectService);
+    const environment = inject(ENVIRONMENT);
+    if (authService.isAuthenticated()) {
+        return true;
+    }
+    // Store the current URL for redirection after login
+    urlRedirectService.storeIntendedUrl(state.url);
+    // Redirect to login page (configurable via environment)
+    router.navigate([environment.loginRoute]);
+    return false;
+};
+
+/**
+ * Interceptor that handles authentication errors and manages URL redirection
+ * Captures the current URL when a 401 error occurs and redirects to login
+ */
+const authRedirectInterceptor = (req, next) => {
+    const router = inject(Router);
+    const urlRedirectService = inject(UrlRedirectService);
+    const authTokenService = inject(AuthTokenService);
+    const environment = inject(ENVIRONMENT);
+    return next(req).pipe(catchError((error) => {
+        // Handle 401 Unauthorized errors
+        if (error.status === 401) {
+            // Only store and redirect if user was previously authenticated
+            // This prevents redirect loops and handles session expiry scenarios
+            if (authTokenService.isAuthenticated()) {
+                // Store the current URL for redirection after re-authentication
+                urlRedirectService.storeCurrentUrlIfAllowed();
+                // Navigate to login page
+                router.navigate([environment.loginRoute]);
+            }
+        }
+        // Re-throw the error so other error handlers can process it
+        return throwError(() => error);
+    }));
+};
+
 class User {
     id;
     email;
@@ -225,6 +346,47 @@ class AuthRepository {
 
 // src/lib/domain/index.ts
 
+// src/lib/services/csrf.service.ts
+class CsrfService {
+    http = inject(HttpClient);
+    environment = inject(ENVIRONMENT);
+    csrfToken = null;
+    /**
+     * Get CSRF token, fetching it if not available
+     */
+    async getCsrfToken() {
+        if (this.csrfToken) {
+            return this.csrfToken;
+        }
+        try {
+            const response = await this.http
+                .get(`${this.environment.apiBaseUrl}/csrf-token`)
+                .toPromise();
+            this.csrfToken = response?.csrfToken || null;
+            return this.csrfToken || '';
+        }
+        catch {
+            // If CSRF endpoint fails, return empty token
+            // Server should handle missing CSRF tokens appropriately
+            return '';
+        }
+    }
+    /**
+     * Clear stored CSRF token (useful on logout)
+     */
+    clearCsrfToken() {
+        this.csrfToken = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CsrfService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CsrfService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CsrfService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 // src/lib/data/repositories/auth-http.repository.ts
 function getDeviceInfo() {
     return `${navigator.platform ?? 'Unknown'} - ${navigator.userAgent}`;
@@ -251,16 +413,7 @@ class AuthHttpRepository extends AuthRepository {
             },
             withCredentials: true,
         })
-            .pipe(map(response => {
-            // Convert string ID to number - if response.id is a string, hash it to get a number
-            const numericId = response.id !== ''
-                ? Math.abs(response.id.split('').reduce((a, b) => {
-                    a = (a << 5) - a + b.charCodeAt(0);
-                    return a & a;
-                }, 0))
-                : Date.now();
-            return new User(numericId, request.email, request.displayName);
-        }))));
+            .pipe(map(response => new AuthTokens(response.token, response.refreshToken)))));
     }
     refreshToken(request) {
         return from(this.csrfService.getCsrfToken()).pipe(switchMap(csrfToken => this.http
@@ -393,7 +546,7 @@ class AuthStore {
         })
             .pipe(tap(tokens => {
             this.setAuthenticated(tokens);
-        }), catchError(() => {
+        }), catchError$1(() => {
             this.logout();
             return of(null);
         }), tap({
@@ -409,8 +562,8 @@ class AuthStore {
     /**
      * Set authentication state after successful login
      */
-    setAuthenticated(tokens) {
-        this.tokenRepository.saveTokens(tokens);
+    setAuthenticated(tokens, rememberMe = false) {
+        this.tokenRepository.saveTokens(tokens, rememberMe);
         this._isAuthenticated.set(true);
         const userData = this.userRepository.getCurrentUser();
         this._user.set(userData);
@@ -497,19 +650,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
         }], ctorParameters: () => [] });
 
 // src/lib/application/use-cases/login.use-case.ts
-class LoginUseCase {
+class LoginUseCase extends BaseUseCase {
     authRepository = inject(AuthRepository);
     authStore = inject(AuthStore);
     router = inject(Router);
+    urlRedirectService = inject(UrlRedirectService);
     execute(request) {
         return this.authRepository.login(request).pipe(tap(tokens => {
-            // Set authentication state
-            this.authStore.setAuthenticated(tokens);
-            // Navigate to main page
-            this.router.navigate(['/']);
+            // Set authentication state with rememberMe preference
+            this.authStore.setAuthenticated(tokens, request.rememberMe ?? false);
+            // Redirect to intended URL or default route
+            this.urlRedirectService.redirectToIntendedUrl('/');
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginUseCase, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginUseCase, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginUseCase, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginUseCase, decorators: [{
@@ -520,15 +674,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
         }] });
 
 // src/lib/application/use-cases/register.use-case.ts
-class RegisterUseCase {
+class RegisterUseCase extends BaseUseCase {
     authRepository = inject(AuthRepository);
+    authStore = inject(AuthStore);
     router = inject(Router);
     execute(request) {
-        return this.authRepository.register(request).pipe(tap(() => {
-            this.router.navigate(['/', 'auth']);
+        return this.authRepository.register(request).pipe(tap(tokens => {
+            // Set authentication state
+            this.authStore.setAuthenticated(tokens);
+            // Navigate to main page
+            this.router.navigate(['/']);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RegisterUseCase, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RegisterUseCase, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RegisterUseCase, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RegisterUseCase, decorators: [{
@@ -539,7 +697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
         }] });
 
 // src/lib/application/use-cases/refresh-token.use-case.ts
-class RefreshTokenUseCase {
+class RefreshTokenUseCase extends BaseUseCase {
     authRepository = inject(AuthRepository);
     userRepository = inject(UserRepository);
     tokenRepository = inject(TokenRepository);
@@ -557,14 +715,16 @@ class RefreshTokenUseCase {
             refreshToken,
         })
             .pipe(tap(tokens => {
+            // Preserve the rememberMe preference from the current token storage
+            const rememberMe = this.tokenRepository.isRememberMeEnabled();
             // Update authentication state
-            this.authStore.setAuthenticated(tokens);
-        }), catchError(error => {
+            this.authStore.setAuthenticated(tokens, rememberMe);
+        }), catchError$1(error => {
             // Don't logout here, let the interceptor handle it
             return throwError(() => error);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RefreshTokenUseCase, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RefreshTokenUseCase, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RefreshTokenUseCase, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RefreshTokenUseCase, decorators: [{
@@ -575,7 +735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
         }] });
 
 // src/lib/application/use-cases/logout.use-case.ts
-class LogoutUseCase {
+class LogoutUseCase extends BaseUseCase {
     authRepository = inject(AuthRepository);
     userRepository = inject(UserRepository);
     tokenRepository = inject(TokenRepository);
@@ -593,7 +753,7 @@ class LogoutUseCase {
         // Use auth store for centralized logout
         this.authStore.logout();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LogoutUseCase, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LogoutUseCase, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LogoutUseCase, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LogoutUseCase, decorators: [{
@@ -613,6 +773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
 class LoginComponent {
     title = input('Login', ...(ngDevMode ? [{ debugName: "title" }] : []));
     showRegisterButton = input(true, ...(ngDevMode ? [{ debugName: "showRegisterButton" }] : []));
+    showRememberMe = input(true, ...(ngDevMode ? [{ debugName: "showRememberMe" }] : []));
     // Additional form controls that can be passed from parent components
     additionalSigninControls = input({}, ...(ngDevMode ? [{ debugName: "additionalSigninControls" }] : []));
     additionalSignupControls = input({}, ...(ngDevMode ? [{ debugName: "additionalSignupControls" }] : []));
@@ -636,6 +797,7 @@ class LoginComponent {
         this.signinForm = this.fb.group({
             email: ['', [Validators.required, Validators.email]],
             password: ['', Validators.required],
+            rememberMe: [false], // Default to false (unchecked)
         });
         this.signupForm = this.fb.group({
             displayName: ['', Validators.required],
@@ -644,6 +806,11 @@ class LoginComponent {
         });
     }
     ngOnInit() {
+        // Handle rememberMe control based on showRememberMe input
+        if (!this.showRememberMe()) {
+            // Remove rememberMe control if not needed
+            this.signinForm.removeControl('rememberMe');
+        }
         // Add additional controls to signin form
         Object.entries(this.additionalSigninControls()).forEach(([key, control]) => {
             this.signinForm.addControl(key, control);
@@ -661,7 +828,13 @@ class LoginComponent {
         if (this.signinForm.valid) {
             this.isLoading.set(true);
             this.errorMessage.set(null);
-            this.loginUseCase.execute(this.signinForm.value).subscribe({
+            // Prepare login request with rememberMe handling
+            const loginRequest = {
+                ...this.signinForm.value,
+                // If showRememberMe is false, default rememberMe to false
+                rememberMe: this.showRememberMe() ? (this.signinForm.value.rememberMe ?? false) : false
+            };
+            this.loginUseCase.execute(loginRequest).subscribe({
                 next: () => {
                     this.isLoading.set(false);
                 },
@@ -692,7 +865,7 @@ class LoginComponent {
         }
     }
     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 }, 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        <!-- 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" }], 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 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
@@ -710,7 +883,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         MatButton,
                         MatCardFooter,
                         MatAnchor,
-                    ], 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        <!-- 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"] }]
+                        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"] }]
         }], ctorParameters: () => [] });
 
 // src/lib/presentation/components/index.ts
@@ -730,5 +904,5 @@ const authProviders = [
  * Generated bundle index. Do not edit.
  */
 
-export { AuthHttpRepository, AuthRepository, AuthStore, AuthTokenService, CsrfService, LoginComponent, LoginUseCase, LogoutUseCase, RefreshTokenUseCase, RegisterUseCase, TokenRepository, User, authGuard, authProviders };
+export { AuthHttpRepository, AuthRepository, AuthStore, AuthTokenService, LoginComponent, LoginUseCase, LogoutUseCase, RefreshTokenUseCase, RegisterUseCase, TokenRepository, UrlRedirectService, User, authGuard, authProviders, authRedirectInterceptor };
 //# sourceMappingURL=acontplus-ng-auth.mjs.map