@acontplus/ng-auth 1.0.0 → 1.0.2

package/fesm2022/acontplus-ng-auth.mjs

@@ -1,25 +1,50 @@
+import { UserRepository } from '@acontplus/ng-infrastructure';
 export { TOKEN_PROVIDER } from '@acontplus/ng-infrastructure';
 import * as i0 from '@angular/core';
-import { inject, Injectable } 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 { jwtDecode } from 'jwt-decode';
-import { ENVIRONMENT } from '@acontplus/ng-config';
+import { ENVIRONMENT, AUTH_API } from '@acontplus/ng-config';
+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';
+import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardFooter } from '@angular/material/card';
+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';
 
 class TokenRepository {
     environment = inject(ENVIRONMENT);
+    platformId = inject(PLATFORM_ID);
     saveTokens(tokens, rememberMe = false) {
-        this.setToken(tokens.token, rememberMe);
-        this.setRefreshToken(tokens.refreshToken, rememberMe);
+        if (isPlatformBrowser(this.platformId)) {
+            this.setToken(tokens.token, rememberMe);
+            this.setRefreshToken(tokens.refreshToken, rememberMe);
+        }
     }
     getAccessToken() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return null;
+        }
         return (localStorage.getItem(this.environment.tokenKey) ||
             sessionStorage.getItem(this.environment.tokenKey));
     }
     getRefreshToken() {
-        return (localStorage.getItem(this.environment.refreshTokenKey) ||
-            sessionStorage.getItem(this.environment.refreshTokenKey));
+        // 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;
     }
     setToken(token, rememberMe = false) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
         if (rememberMe) {
             localStorage.setItem(this.environment.tokenKey, token);
         }
@@ -27,15 +52,15 @@ class TokenRepository {
             sessionStorage.setItem(this.environment.tokenKey, token);
         }
     }
-    setRefreshToken(refreshToken, rememberMe = false) {
-        if (rememberMe) {
-            localStorage.setItem(this.environment.refreshTokenKey, refreshToken);
-        }
-        else {
-            sessionStorage.setItem(this.environment.refreshTokenKey, refreshToken);
-        }
+    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
     }
     clearTokens() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
         localStorage.removeItem(this.environment.tokenKey);
         localStorage.removeItem(this.environment.refreshTokenKey);
         sessionStorage.removeItem(this.environment.tokenKey);
@@ -43,30 +68,14 @@ class TokenRepository {
     }
     isAuthenticated() {
         const accessToken = this.getAccessToken();
-        const refreshToken = this.getRefreshToken();
-        if (!accessToken || !refreshToken) {
+        if (!accessToken) {
             return false;
         }
         try {
             const decodedAccessToken = jwtDecode(accessToken);
             const accessExpiration = Number(decodedAccessToken.exp);
             const currentTimeUTC = Math.floor(Date.now() / 1000);
-            if (accessExpiration > currentTimeUTC) {
-                return true;
-            }
-            return this.isRefreshTokenValid();
-        }
-        catch {
-            return false;
-        }
-    }
-    isRefreshTokenValid() {
-        const refreshToken = this.getRefreshToken();
-        if (!refreshToken) {
-            return false;
-        }
-        try {
-            return true; // Backend validates expiration
+            return accessExpiration > currentTimeUTC;
         }
         catch {
             return false;
@@ -140,9 +149,586 @@ const authGuard = (_route, _state) => {
     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
+     */
+    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',
+                }]
+        }] });
+
+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/index.ts
+
+class AuthRepository {
+}
+
+// src/lib/domain/repositories/index.ts
+
+// src/lib/domain/index.ts
+
+// src/lib/data/repositories/auth-http.repository.ts
+function getDeviceInfo() {
+    return `${navigator.platform ?? 'Unknown'} - ${navigator.userAgent}`;
+}
+class AuthHttpRepository extends AuthRepository {
+    http = inject(HttpClient);
+    csrfService = inject(CsrfService);
+    URL = `${AUTH_API.ACCOUNT}`;
+    login(request) {
+        return from(this.csrfService.getCsrfToken()).pipe(switchMap(csrfToken => this.http.post(`${this.URL}login`, request, {
+            headers: {
+                'Device-Info': getDeviceInfo(),
+                'X-CSRF-Token': csrfToken,
+            },
+            withCredentials: true,
+        })));
+    }
+    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 => {
+            // 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);
+        }))));
+    }
+    refreshToken(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 }, {
+            headers: { 'X-CSRF-Token': csrfToken },
+            withCredentials: true, // Ensure cookies are sent
+        })));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthHttpRepository, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthHttpRepository, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthHttpRepository, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// src/lib/data/repositories/index.ts
+
+// src/lib/data/index.ts
+
+// src/lib/presentation/stores/auth.store.ts
+class AuthStore {
+    authRepository = inject(AuthRepository);
+    tokenRepository = inject(TokenRepository);
+    userRepository = inject(UserRepository);
+    router = inject(Router);
+    // Authentication state signals
+    _isAuthenticated = signal(false, ...(ngDevMode ? [{ debugName: "_isAuthenticated" }] : []));
+    _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
+    _user = signal(null, ...(ngDevMode ? [{ debugName: "_user" }] : []));
+    // Public readonly signals
+    isAuthenticated = this._isAuthenticated.asReadonly();
+    isLoading = this._isLoading.asReadonly();
+    user = this._user.asReadonly();
+    // Private refresh token timeout (instead of interval)
+    refreshTokenTimeout;
+    refreshInProgress$;
+    constructor() {
+        this.initializeAuthentication();
+    }
+    /**
+     * Initialize authentication state on app startup
+     */
+    initializeAuthentication() {
+        this._isLoading.set(true);
+        try {
+            const isAuthenticated = this.tokenRepository.isAuthenticated();
+            this._isAuthenticated.set(isAuthenticated);
+            if (isAuthenticated) {
+                const userData = this.userRepository.getCurrentUser();
+                this._user.set(userData);
+                this.scheduleTokenRefresh();
+            }
+        }
+        catch {
+            this.logout();
+        }
+        finally {
+            this._isLoading.set(false);
+        }
+    }
+    /**
+     * Schedule token refresh based on actual expiration time
+     */
+    scheduleTokenRefresh() {
+        const accessToken = this.tokenRepository.getAccessToken();
+        if (!accessToken) {
+            return;
+        }
+        try {
+            const decodedToken = this.decodeToken(accessToken);
+            const currentTime = Math.floor(Date.now() / 1000);
+            const timeUntilExpiry = decodedToken.exp - currentTime;
+            // Refresh 5 minutes before expiry (300 seconds)
+            const refreshTime = Math.max((timeUntilExpiry - 300) * 1000, 1000);
+            // Clear any existing timeout
+            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);
+        }
+        catch {
+            // Silent fail - token might be invalid
+        }
+    }
+    /**
+     * Stop token refresh timer
+     */
+    stopTokenRefreshTimer() {
+        if (this.refreshTokenTimeout) {
+            clearTimeout(this.refreshTokenTimeout);
+            this.refreshTokenTimeout = undefined;
+        }
+    }
+    /**
+     * Refresh authentication tokens
+     */
+    refreshToken() {
+        // Return existing refresh request if one is in progress
+        if (this.refreshInProgress$) {
+            return this.refreshInProgress$;
+        }
+        const userData = this.userRepository.getCurrentUser();
+        const refreshToken = this.tokenRepository.getRefreshToken();
+        if (!userData?.email || !refreshToken) {
+            this.logout();
+            return of(null);
+        }
+        this.refreshInProgress$ = this.authRepository
+            .refreshToken({
+            email: userData.email,
+            refreshToken,
+        })
+            .pipe(tap(tokens => {
+            this.setAuthenticated(tokens);
+        }), catchError(() => {
+            this.logout();
+            return of(null);
+        }), tap({
+            complete: () => {
+                this.refreshInProgress$ = undefined;
+            },
+            error: () => {
+                this.refreshInProgress$ = undefined;
+            }
+        }));
+        return this.refreshInProgress$;
+    }
+    /**
+     * Set authentication state after successful login
+     */
+    setAuthenticated(tokens) {
+        this.tokenRepository.saveTokens(tokens);
+        this._isAuthenticated.set(true);
+        const userData = this.userRepository.getCurrentUser();
+        this._user.set(userData);
+        this.scheduleTokenRefresh();
+    }
+    /**
+     * Logout user and clear all authentication data
+     */
+    logout() {
+        const user = this._user();
+        if (user) {
+            // Call server-side logout first
+            this.authRepository.logout(user.email, '').subscribe({
+                next: () => {
+                    // Server logout successful, clear client-side data
+                    this.performClientLogout();
+                },
+                error: () => {
+                    // Server logout failed, still clear client-side data for security
+                    this.performClientLogout();
+                }
+            });
+        }
+        else {
+            // No user data, just clear client-side data
+            this.performClientLogout();
+        }
+    }
+    /**
+     * Perform client-side logout operations
+     */
+    performClientLogout() {
+        this.stopTokenRefreshTimer();
+        this.tokenRepository.clearTokens();
+        this._isAuthenticated.set(false);
+        this._user.set(null);
+        // Navigate to login page
+        this.router.navigate(['/auth']);
+    }
+    /**
+     * Check if user is authenticated
+     */
+    checkAuthentication() {
+        const isAuthenticated = this.tokenRepository.isAuthenticated();
+        this._isAuthenticated.set(isAuthenticated);
+        if (!isAuthenticated) {
+            this.logout();
+        }
+        return isAuthenticated;
+    }
+    /**
+     * Decode JWT token
+     */
+    decodeToken(token) {
+        try {
+            const base64Url = token.split('.')[1];
+            const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+            const jsonPayload = decodeURIComponent(atob(base64)
+                .split('')
+                .map(c => {
+                return `%${`00${c.charCodeAt(0).toString(16)}`.slice(-2)}`;
+            })
+                .join(''));
+            return JSON.parse(jsonPayload);
+        }
+        catch {
+            throw new Error('Invalid token format');
+        }
+    }
+    /**
+     * Cleanup on store destruction
+     */
+    ngOnDestroy() {
+        this.stopTokenRefreshTimer();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthStore, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthStore, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+// src/lib/application/use-cases/login.use-case.ts
+class LoginUseCase {
+    authRepository = inject(AuthRepository);
+    authStore = inject(AuthStore);
+    router = inject(Router);
+    execute(request) {
+        return this.authRepository.login(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: LoginUseCase, deps: [], 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: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// src/lib/application/use-cases/register.use-case.ts
+class RegisterUseCase {
+    authRepository = inject(AuthRepository);
+    router = inject(Router);
+    execute(request) {
+        return this.authRepository.register(request).pipe(tap(() => {
+            this.router.navigate(['/', 'auth']);
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RegisterUseCase, deps: [], 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: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// src/lib/application/use-cases/refresh-token.use-case.ts
+class RefreshTokenUseCase {
+    authRepository = inject(AuthRepository);
+    userRepository = inject(UserRepository);
+    tokenRepository = inject(TokenRepository);
+    authStore = inject(AuthStore);
+    execute() {
+        const userData = this.userRepository.getCurrentUser();
+        const refreshToken = this.tokenRepository.getRefreshToken();
+        if (!userData?.email || !refreshToken || refreshToken.trim().length === 0) {
+            const error = new Error('No refresh token or email available');
+            return throwError(() => error);
+        }
+        return this.authRepository
+            .refreshToken({
+            email: userData.email,
+            refreshToken,
+        })
+            .pipe(tap(tokens => {
+            // Update authentication state
+            this.authStore.setAuthenticated(tokens);
+        }), catchError(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 ɵ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: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// src/lib/application/use-cases/logout.use-case.ts
+class LogoutUseCase {
+    authRepository = inject(AuthRepository);
+    userRepository = inject(UserRepository);
+    tokenRepository = inject(TokenRepository);
+    authStore = inject(AuthStore);
+    execute() {
+        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()));
+        }
+        this.cleanup();
+        return of(void 0);
+    }
+    cleanup() {
+        // 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 ɵ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: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// src/lib/application/use-cases/index.ts
+
+// src/lib/application/index.ts
+
+// src/lib/presentation/stores/index.ts
+
+// src/lib/presentation/components/login/login.component.ts
+class LoginComponent {
+    title = input('Login', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    showRegisterButton = input(true, ...(ngDevMode ? [{ debugName: "showRegisterButton" }] : []));
+    // Additional form controls that can be passed from parent components
+    additionalSigninControls = input({}, ...(ngDevMode ? [{ debugName: "additionalSigninControls" }] : []));
+    additionalSignupControls = input({}, ...(ngDevMode ? [{ debugName: "additionalSignupControls" }] : []));
+    // Additional field templates
+    additionalSigninFields = input(null, ...(ngDevMode ? [{ debugName: "additionalSigninFields" }] : []));
+    additionalSignupFields = input(null, ...(ngDevMode ? [{ debugName: "additionalSignupFields" }] : []));
+    // Footer content template
+    footerContent = input(null, ...(ngDevMode ? [{ debugName: "footerContent" }] : []));
+    // Computed signal to check if footer content exists
+    hasFooterContent = computed(() => this.footerContent() !== null, ...(ngDevMode ? [{ debugName: "hasFooterContent" }] : []));
+    fb = inject(FormBuilder);
+    loginUseCase = inject(LoginUseCase);
+    registerUseCase = inject(RegisterUseCase);
+    // Angular 20+ signals
+    isLoginMode = signal(true, ...(ngDevMode ? [{ debugName: "isLoginMode" }] : []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    errorMessage = signal(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    signinForm;
+    signupForm;
+    constructor() {
+        this.signinForm = this.fb.group({
+            email: ['', [Validators.required, Validators.email]],
+            password: ['', Validators.required],
+        });
+        this.signupForm = this.fb.group({
+            displayName: ['', Validators.required],
+            email: ['', [Validators.required, Validators.email]],
+            password: ['', [Validators.required, Validators.minLength(6)]],
+        });
+    }
+    ngOnInit() {
+        // Add additional controls to signin form
+        Object.entries(this.additionalSigninControls()).forEach(([key, control]) => {
+            this.signinForm.addControl(key, control);
+        });
+        // Add additional controls to signup form
+        Object.entries(this.additionalSignupControls()).forEach(([key, control]) => {
+            this.signupForm.addControl(key, control);
+        });
+    }
+    switchMode() {
+        this.isLoginMode.set(!this.isLoginMode());
+        this.errorMessage.set(null);
+    }
+    signIn() {
+        if (this.signinForm.valid) {
+            this.isLoading.set(true);
+            this.errorMessage.set(null);
+            this.loginUseCase.execute(this.signinForm.value).subscribe({
+                next: () => {
+                    this.isLoading.set(false);
+                },
+                error: error => {
+                    this.isLoading.set(false);
+                    this.errorMessage.set('Error al iniciar sesión. Verifique sus credenciales.');
+                    console.error('Login error:', error);
+                },
+            });
+        }
+    }
+    registerUser() {
+        if (this.signupForm.valid) {
+            this.isLoading.set(true);
+            this.errorMessage.set(null);
+            this.registerUseCase.execute(this.signupForm.value).subscribe({
+                next: () => {
+                    this.isLoading.set(false);
+                    this.signupForm.reset();
+                    this.isLoginMode.set(true);
+                },
+                error: error => {
+                    this.isLoading.set(false);
+                    this.errorMessage.set('Error al registrar usuario. Intente nuevamente.');
+                    console.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 }, 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'acp-login', imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatCard,
+                        MatCardHeader,
+                        MatLabel,
+                        MatCardTitle,
+                        MatCardContent,
+                        MatFormField,
+                        MatInput,
+                        MatIcon,
+                        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"] }]
+        }], ctorParameters: () => [] });
+
+// src/lib/presentation/components/index.ts
+
+// src/lib/presentation/index.ts
+
+const authProviders = [
+    {
+        provide: AuthRepository,
+        useClass: AuthHttpRepository,
+    },
+];
+
+// src/lib/providers/index.ts
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AuthTokenService, TokenRepository, authGuard };
+export { AuthHttpRepository, AuthRepository, AuthStore, AuthTokenService, CsrfService, LoginComponent, LoginUseCase, LogoutUseCase, RefreshTokenUseCase, RegisterUseCase, TokenRepository, User, authGuard, authProviders };
 //# sourceMappingURL=acontplus-ng-auth.mjs.map