mesauth-angular 1.2.0 → 1.2.1

package/package.json

@@ -1,40 +1,39 @@
-{
-  "name": "mesauth-angular",
-  "version": "1.2.0",
-  "description": "Angular helper library to connect to a backend API and SignalR hub to surface the current logged-in user and incoming notifications with dark/light theme support",
-  "scripts": {
-    "build": "ng-packagr -p ng-package.json",
-    "prepare": "npm run build"
-  },
-  "keywords": [
-    "angular",
-    "signalr",
-    "notifications",
-    "auth",
-    "mes"
-  ],
-  "license": "MIT",
-  "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/router": "^20.0.0",
-    "rxjs": "^7"
-  },
-  "dependencies": {
-    "@microsoft/signalr": "^7.0.0",
-    "rxjs": "^7"
-  },
-  "devDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/compiler": "^20.0.0",
-    "@angular/compiler-cli": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/router": "^20.0.0",
-    "ng-packagr": "^20.3.2",
-    "tslib": "^2.0.0",
-    "typescript": "~5.8.0"
-  },
-  "angularCompilerOptions": {
-    "enableIvy": true
-  }
-}
+{
+  "name": "mesauth-angular",
+  "version": "1.2.1",
+  "description": "Angular helper library to connect to a backend API and SignalR hub to surface the current logged-in user and incoming notifications with dark/light theme support",
+  "keywords": [
+    "angular",
+    "signalr",
+    "notifications",
+    "auth",
+    "mes"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "rxjs": "^7"
+  },
+  "dependencies": {
+    "@microsoft/signalr": "^7.0.0",
+    "rxjs": "^7",
+    "tslib": "^2.3.0"
+  },
+  "angularCompilerOptions": {
+    "enableIvy": true
+  },
+  "module": "fesm2022/mesauth-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/mesauth-angular.mjs"
+    }
+  },
+  "sideEffects": false
+}

package/dist/README.md

@@ -1,297 +0,0 @@
-# mesauth-angular
-
-Angular helper library to connect to a backend API and SignalR hub to surface the current logged-in user and incoming notifications with dark/light theme support.
-
-## Changelog
-
-### v1.2.0 (2026-02-05) - **Notification & Auth Interceptor Fix**
-- **Removed route-change user polling**: `MesAuthService` no longer re-fetches the user on every `NavigationEnd` event. User is fetched once on app init; SignalR handles real-time updates. This eliminates redundant API calls and notification toast spam on every route change.
-- **Removed `fetchInitialNotifications()`**: Historical notifications were being emitted through `notifications$` Subject on every user refresh, causing toast popups for old notifications. The `notifications$` observable now only carries truly new real-time events from SignalR.
-- **`refreshUser()` returns `Observable`**: Callers can now subscribe and wait for user data to load before proceeding (e.g., navigate after login). Previously returned `void`.
-- **Fixed 401 redirect for expired sessions**: Removed the `!isAuthenticated` guard from the interceptor's 401 condition. When a session expires, the `BehaviorSubject` still holds stale user data, so this check was blocking the redirect to login. The `!isMeAuthPage`, `!isLoginPage`, and `!isAuthPage` guards are sufficient to prevent redirect loops.
-
-### v1.1.0 (2026-01-21) - **Major Update**
-- 🚀 **New `provideMesAuth()` Function**: Simplified setup with a single function call
-- ✨ **Functional Interceptor**: New `mesAuthInterceptor` for better compatibility with standalone apps
-- 📦 **Automatic Initialization**: `provideMesAuth()` handles service initialization via `APP_INITIALIZER`
-- 🔧 **Simplified API**: Just pass `apiBaseUrl` and `userBaseUrl` - no manual DI required
-
-### v1.0.1 (2026-01-21)
-- 🔧 Internal refactoring for better module compatibility
-
-### v0.2.28 (2026-01-19)
-- ✨ **Enhanced Avatar Support**: Direct `avatarPath` usage from user data for instant display without backend calls
-- 🔄 **Improved Avatar Refresh**: Timestamp-based cache busting prevents request cancellation issues
-- 🎯 **Better Change Detection**: Signal-based user updates with `ChangeDetectorRef` for reliable UI updates
-
-### v0.2.27 (2026-01-19)
-- 🐛 Fixed avatar refresh issues in header components
-- 📦 Improved build process and dependencies
-
-## Features
-
-- 🔐 **Authentication**: User login/logout with API integration
-- 🔔 **Real-time Notifications**: SignalR integration for live notifications
-- 🎨 **Dark/Light Theme**: Automatic theme detection and support
-- 🖼️ **Avatar Support**: Direct API-based avatar loading
-- 🍞 **Toast Notifications**: In-app notification toasts
-- 🛡️ **HTTP Interceptor**: Automatic 401/403 error handling with redirects
-
-## Quick Start (v1.1.0+)
-
-### 1. Install
-
-```bash
-npm install mesauth-angular
-```
-
-### 2. Configure in app.config.ts (Recommended for Angular 14+)
-
-```ts
-import { ApplicationConfig } from '@angular/core';
-import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import { provideMesAuth, mesAuthInterceptor } from 'mesauth-angular';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideHttpClient(
-      withInterceptors([mesAuthInterceptor])  // Handles 401/403 redirects
-    ),
-    provideMesAuth({
-      apiBaseUrl: 'https://mes.kefico.vn/auth',
-      userBaseUrl: 'https://mes.kefico.vn/x'   // For login/403 redirects
-    })
-  ]
-};
-```
-
-That's it! The library handles:
-- Service initialization via `APP_INITIALIZER`
-- `HttpClient` and `Router` injection automatically
-- 401 → redirects to `{userBaseUrl}/login?returnUrl=...`
-- 403 → redirects to `{userBaseUrl}/403?returnUrl=...`
-
-### 3. Use in Components
-
-```ts
-import { MesAuthService } from 'mesauth-angular';
-
-@Component({...})
-export class MyComponent {
-  private auth = inject(MesAuthService);
-
-  // Observable streams
-  currentUser$ = this.auth.currentUser$;
-  notifications$ = this.auth.notifications$;
-
-  logout() {
-    this.auth.logout().subscribe();
-  }
-}
-```
-
-## Configuration Options
-
-```ts
-interface MesAuthConfig {
-  apiBaseUrl: string;      // Required: MesAuth API base URL
-  userBaseUrl?: string;    // Optional: Base URL for login/403 redirects
-  withCredentials?: boolean; // Optional: Send cookies (default: true)
-}
-```
-
-## Theme Support
-
-The library automatically detects and adapts to your application's theme:
-
-### Automatic Theme Detection
-The library checks for theme indicators on the `<html>` element:
-- `class="dark"`
-- `data-theme="dark"`
-- `theme="dark"`
-- `data-coreui-theme="dark"`
-
-### Dynamic Theme Changes
-Theme changes are detected in real-time using `MutationObserver`, so components automatically update when your app switches themes.
-
-### Manual Theme Control
-```ts
-import { ThemeService } from 'mesauth-angular';
-
-// Check current theme
-const currentTheme = themeService.currentTheme; // 'light' | 'dark'
-
-// Manually set theme
-themeService.setTheme('dark');
-
-// Listen for theme changes
-themeService.currentTheme$.subscribe(theme => {
-  console.log('Theme changed to:', theme);
-});
-```
-
-## Avatar Loading
-
-Avatars are loaded efficiently using multiple strategies:
-
-### Primary Method: Direct Path Usage
-If the user object contains an `avatarPath`, it's used directly:
-- **Full URLs**: Used as-is (e.g., `https://example.com/avatar.jpg`)
-- **Relative Paths**: Combined with API base URL (e.g., `/uploads/avatar.jpg` → `{apiBaseUrl}/uploads/avatar.jpg`)
-
-### Fallback Method: API Endpoint
-If no `avatarPath` is available, avatars are loaded via API:
-- **API Endpoint**: `GET {apiBaseUrl}/auth/{userId}/avatar`
-- **Authentication**: Uses the same credentials as other API calls
-
-### Cache Busting
-Avatar URLs include timestamps to prevent browser caching issues during updates:
-- Automatic refresh when user data changes
-- Manual refresh triggers for upload/delete operations
-
-### Fallback Service
-- **UI Avatars**: Generates initials-based avatars if no user data available
-- **Authentication**: Not required for fallback avatars
-
-## Components
-
-**Note:** All components are standalone and can be imported directly.
-
-### ma-user-profile
-
-A reusable Angular component for displaying the current user's profile information, with options for navigation and logout.
-
-- **Description**: Renders user details (e.g., name, avatar) fetched via the MesAuthService. Supports custom event handlers for navigation and logout actions.
-- **Inputs**: None (data is sourced from the MesAuthService).
-- **Outputs**:
-  - `onNavigate`: Emits an event when the user triggers navigation (e.g., to a profile page). Pass a handler to define behavior.
-  - `onLogout`: Emits an event when the user logs out. Pass a handler to perform logout logic (e.g., clear tokens, redirect).
-- **Usage Example**:
-
-    ```html
-    <ma-user-profile
-      (onNavigate)="handleNavigation($event)"
-      (onLogout)="handleLogout()">
-    </ma-user-profile>
-    ```
-
-    In your component's TypeScript file:
-
-    ```ts
-    handleNavigation(event: any) {
-      // Navigate to user profile page
-      this.router.navigate(['/profile']);
-    }
-
-    handleLogout() {
-      // Perform logout, e.g., clear session and redirect
-      this.mesAuth.logout(); // Assuming a logout method exists
-      this.router.navigate(['/login']);
-    }
-    ```
-
-### ma-notification-panel
-
-A standalone component for displaying a slide-out notification panel with real-time updates.
-
-- **Description**: Shows a list of notifications, allows marking as read/delete, and integrates with toast notifications for new alerts.
-- **Inputs**: None.
-- **Outputs**: None (uses internal methods for actions).
-- **Usage Example**:
-
-    ```html
-    <ma-notification-panel #notificationPanel></ma-notification-panel>
-    ```
-
-    In your component:
-
-    ```ts
-    // To open the panel
-    notificationPanel.open();
-    ```
-
-## Migration Guide
-
-### Upgrading from v0.x to v1.1.0+
-
-The setup has been greatly simplified. Here's how to migrate:
-
-**Before (v0.x):**
-```ts
-// app.config.ts - OLD WAY
-import { MesAuthModule, MesAuthService } from 'mesauth-angular';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    importProvidersFrom(MesAuthModule),
-    { provide: HTTP_INTERCEPTORS, useClass: MesAuthInterceptor, multi: true }
-  ]
-};
-
-// app.component.ts - OLD WAY
-export class AppComponent {
-  constructor() {
-    this.mesAuthService.init({
-      apiBaseUrl: '...',
-      userBaseUrl: '...'
-    }, inject(HttpClient), inject(Router));
-  }
-}
-```
-
-**After (v1.1.0+):**
-```ts
-// app.config.ts - NEW WAY (everything in one place!)
-import { provideMesAuth, mesAuthInterceptor } from 'mesauth-angular';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideHttpClient(withInterceptors([mesAuthInterceptor])),
-    provideMesAuth({
-      apiBaseUrl: 'https://mes.kefico.vn/auth',
-      userBaseUrl: 'https://mes.kefico.vn/x'
-    })
-  ]
-};
-
-// app.component.ts - No init() needed!
-export class AppComponent {
-  // Just inject and use - no manual initialization required
-}
-```
-
-**Key Changes:**
-- `provideMesAuth()` replaces `MesAuthModule` + manual `init()` call
-- `mesAuthInterceptor` (functional) replaces `MesAuthInterceptor` (class-based)
-- No need to inject `HttpClient` or `Router` manually
-- Configuration moved from `AppComponent` to `app.config.ts`
-
-## Troubleshooting
-
-### JIT Compiler Error in Production or AOT Mode
-If you encounter an error like "The injectable 'MesAuthService' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available," this typically occurs because:
-- The package is being imported directly from source code (e.g., during development) without building it first.
-- The client app is running in AOT (Ahead-of-Time) compilation mode, which requires pre-compiled libraries.
-
-**Solutions:**
-1. **Build the package for production/AOT compatibility:**
-   - Ensure you have built the package using `npm run build` (which uses ng-packagr or similar to generate AOT-ready code).
-   - Install the built package via npm (e.g., from a local tarball or registry) instead of linking to the source folder.
-
-2. **For development (if you must link to source):**
-   - Switch your Angular app to JIT mode by bootstrapping with `@angular/platform-browser-dynamic` instead of `@angular/platform-browser`.
-
-3. **Verify imports:**
-   - Ensure you're importing from the built package (e.g., `import { MesAuthService } from 'mesauth-angular';`) and not from the `src` folder.
-
-### Components Appear Empty
-If components like `ma-user` or `ma-user-profile` render as empty:
-- Ensure `provideMesAuth()` is called in your `app.config.ts`.
-- Check browser console for logs from components.
-- If `currentUser` is null, the component shows a login button—verify the API returns user data.
-
-## Notes
-- The service expects an endpoint `GET {apiBaseUrl}/auth/me` that returns the current user.
-- Avatar endpoint: `GET {apiBaseUrl}/auth/{userId}/avatar`
-- SignalR events used: `ReceiveNotification` (adjust to your backend).

package/ng-package.json

@@ -1,8 +0,0 @@
-{
-  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "dist",
-  "allowedNonPeerDependencies": ["@microsoft/signalr", "rxjs"],
-  "lib": {
-    "entryFile": "src/index.ts"
-  }
-}

package/src/index.ts

@@ -1,10 +0,0 @@
-export * from './mes-auth.service';
-export * from './mes-auth.interceptor';
-export * from './mes-auth.module';
-export * from './user-profile.component';
-export * from './ma-user.component';
-export * from './notification-badge.component';
-export * from './notification-panel.component';
-export * from './toast-container.component';
-export * from './toast.service';
-export * from './theme.service';

package/src/ma-user.component.ts

@@ -1,39 +0,0 @@
-import { Component, ViewChild, AfterViewInit } from '@angular/core';
-import { ToastContainerComponent } from './toast-container.component';
-import { UserProfileComponent } from './user-profile.component';
-import { NotificationPanelComponent } from './notification-panel.component';
-
-@Component({
-  selector: 'ma-user',
-  standalone: true,
-  imports: [ToastContainerComponent, UserProfileComponent, NotificationPanelComponent],
-  template: `
-    <ma-toast-container></ma-toast-container>
-    <div class="user-header">
-      <ma-user-profile (notificationClick)="notificationPanel.open()"></ma-user-profile>
-    </div>
-    <ma-notification-panel #notificationPanel (notificationRead)="onNotificationRead()"></ma-notification-panel>
-  `,
-  styles: [`
-    .user-header {
-      display: flex;
-      justify-content: flex-end;
-    }
-  `]
-})
-export class MaUserComponent implements AfterViewInit {
-  @ViewChild(UserProfileComponent) userProfile?: UserProfileComponent;
-
-  ngAfterViewInit() {
-    // Ensure proper initialization
-    if (this.userProfile) {
-      this.userProfile.loadUnreadCount();
-    }
-  }
-
-  onNotificationRead() {
-    if (this.userProfile) {
-      this.userProfile.loadUnreadCount();
-    }
-  }
-}

package/src/mes-auth.interceptor.ts

@@ -1,59 +0,0 @@
-import { inject } from '@angular/core';
-import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';
-import { throwError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { Router } from '@angular/router';
-import { MesAuthService } from './mes-auth.service';
-
-// Track if we're currently redirecting to prevent loopback
-let isRedirecting = false;
-
-/**
- * Functional HTTP interceptor for handling 401/403 auth errors.
- * Redirects to login page on 401, and to 403 page on 403.
- * Includes loopback prevention to avoid infinite redirects.
- */
-export const mesAuthInterceptor: HttpInterceptorFn = (req, next) => {
-  const authService = inject(MesAuthService);
-  const router = inject(Router);
-
-  return next(req).pipe(
-    catchError((error: HttpErrorResponse) => {
-      const status = error.status;
-
-      // Check if we should handle this error and prevent loopback
-      if ((status === 401 || status === 403) && !isRedirecting) {
-        const config = authService.getConfig();
-        const baseUrl = config?.userBaseUrl || '';
-
-        const currentUrl = router.url + (window.location.hash || '');
-        const returnUrl = encodeURIComponent(currentUrl);
-
-        // Avoid loops if already on auth/unauth pages
-        const isLoginPage = currentUrl.includes('/login');
-        const is403Page = currentUrl.includes('/403');
-        const isAuthPage = currentUrl.includes('/auth');
-        // Skip redirect for the initial /auth/me check (app startup when not logged in)
-        const isMeAuthPage = req.url.includes('/auth/me');
-
-        if (status === 401 && !isLoginPage && !isAuthPage && !isMeAuthPage) {
-          // Session expired or not authenticated - redirect to login
-          // No isAuthenticated check: when session expires, BehaviorSubject still holds
-          // stale user data, so checking isAuthenticated would block the redirect.
-          isRedirecting = true;
-          setTimeout(() => { isRedirecting = false; }, 5000);
-          window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
-        } else if (status === 403 && !is403Page) {
-          isRedirecting = true;
-          setTimeout(() => { isRedirecting = false; }, 5000);
-          let redirectUrl = `${baseUrl}/403?returnUrl=${returnUrl}`;
-          if (error.error && error.error.required) {
-            redirectUrl += `&required=${encodeURIComponent(error.error.required)}`;
-          }
-          window.location.href = redirectUrl;
-        }
-      }
-      return throwError(() => error);
-    })
-  );
-};

package/src/mes-auth.module.ts

@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MesAuthService } from './mes-auth.service';
-
-@NgModule({
-  providers: [
-    MesAuthService
-  ]
-})
-export class MesAuthModule {}