mesauth-angular 0.1.4 → 0.1.6

package/README.md

@@ -34,7 +34,36 @@ Angular helper library to connect to a backend API and SignalR hub to surface th
      };
      ```
 
-3. Initialize in your app (e.g. `AppComponent` constructor or `AppModule` bootstrap):
+3. (Optional) Provide the HTTP interceptor to handle 403 errors:
+   - The interceptor redirects to `${userBaseUrl}/403?returnUrl=encodedCurrentUrl` using `window.location.href` for external URLs (since `userBaseUrl` may be outside the client app).
+   - **For module-based apps**: Add `MesAuthInterceptor` to providers in `AppModule`.
+     ```ts
+     import { HTTP_INTERCEPTORS } from '@angular/common/http';
+     import { MesAuthInterceptor } from 'mesauth-angular';
+
+     @NgModule({
+       // ... other module config ...
+       providers: [
+         // ... other providers ...
+         { provide: HTTP_INTERCEPTORS, useClass: MesAuthInterceptor, multi: true }
+       ]
+     })
+     export class AppModule { }
+     ```
+   - **For standalone apps**: Add `MesAuthInterceptor` to providers in `app.config.ts`.
+     ```ts
+     import { HTTP_INTERCEPTORS } from '@angular/common/http';
+     import { MesAuthInterceptor } from 'mesauth-angular';
+
+     export const appConfig: ApplicationConfig = {
+       providers: [
+         // ... other providers ...
+         { provide: HTTP_INTERCEPTORS, useClass: MesAuthInterceptor, multi: true }
+       ]
+     };
+     ```
+
+4. Initialize in your app (e.g. `AppComponent` constructor or `AppModule` bootstrap):
 
     ```ts
     // in AppComponent
@@ -107,7 +136,7 @@ Angular helper library to connect to a backend API and SignalR hub to surface th
       }
       ```
 
-4. Build the package for publishing:
+5. Build the package for publishing:
 
     ```bash
     cd /path/to/mesauth-angular
@@ -160,6 +189,7 @@ A reusable Angular component for displaying the current user's profile informati
 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.
+- **Why JIT is required:** Originally, `MesAuthService` used `@Injectable({ providedIn: 'root' })`, making it a library-provided service. Angular libraries must be built with tools like ng-packagr to generate AOT-compatible code. If not, or if imported from source, the service requires JIT compilation in the client's app. This change (removing `providedIn: 'root'` and requiring manual provision) allows the service to be compiled in your app's context, supporting both JIT and AOT modes.
 
 **Solutions:**
 1. **Build the package for production/AOT compatibility:**

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/ma-user.component.js

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { ToastContainerComponent } from './toast-container.component';
 import { UserProfileComponent } from './user-profile.component';
 import { NotificationPanelComponent } from './notification-panel.component';
@@ -15,7 +14,7 @@ MaUserComponent = __decorate([
     Component({
         selector: 'ma-user',
         standalone: true,
-        imports: [CommonModule, ToastContainerComponent, UserProfileComponent, NotificationPanelComponent],
+        imports: [ToastContainerComponent, UserProfileComponent, NotificationPanelComponent],
         template: `
     <ma-toast-container></ma-toast-container>
     <div class="user-header">

package/dist/mes-auth.interceptor.d.ts

@@ -0,0 +1,10 @@
+import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Router } from '@angular/router';
+import { MesAuthService } from './mes-auth.service';
+export declare class MesAuthInterceptor implements HttpInterceptor {
+    private authService;
+    private router;
+    constructor(authService: MesAuthService, router: Router);
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;
+}

package/dist/mes-auth.interceptor.js

@@ -0,0 +1,36 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Injectable } from '@angular/core';
+import { throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { MesAuthService } from './mes-auth.service';
+let MesAuthInterceptor = class MesAuthInterceptor {
+    constructor(authService, router) {
+        this.authService = authService;
+        this.router = router;
+    }
+    intercept(req, next) {
+        return next.handle(req).pipe(catchError((error) => {
+            if (error.status === 403) {
+                const config = this.authService.getConfig();
+                const baseUrl = (config === null || config === void 0 ? void 0 : config.userBaseUrl) || '';
+                const returnUrl = encodeURIComponent(window.location.href);
+                window.location.href = `${baseUrl}/403?returnUrl=${returnUrl}`;
+            }
+            return throwError(error);
+        }));
+    }
+};
+MesAuthInterceptor = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [MesAuthService, Router])
+], MesAuthInterceptor);
+export { MesAuthInterceptor };

package/dist/notification-badge.component.js

@@ -8,7 +8,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { Component, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgIf } from '@angular/common';
 import { MesAuthService } from './mes-auth.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -52,7 +52,7 @@ NotificationBadgeComponent = __decorate([
     Component({
         selector: 'ma-notification-badge',
         standalone: true,
-        imports: [CommonModule],
+        imports: [NgIf],
         template: `
     <button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
       <span class="icon">🔔</span>

package/dist/user-profile.component.js

@@ -8,7 +8,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { Component, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgIf } from '@angular/common';
 import { Router } from '@angular/router';
 import { MesAuthService } from './mes-auth.service';
 import { Subject } from 'rxjs';
@@ -69,12 +69,12 @@ let UserProfileComponent = class UserProfileComponent {
         const config = this.authService.getConfig();
         const baseUrl = (config === null || config === void 0 ? void 0 : config.userBaseUrl) || '';
         const returnUrl = encodeURIComponent(this.router.url);
-        this.router.navigateByUrl(`${baseUrl}/login?returnUrl=${returnUrl}`);
+        window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
     }
     onViewProfile() {
         const config = this.authService.getConfig();
         const baseUrl = (config === null || config === void 0 ? void 0 : config.userBaseUrl) || '';
-        this.router.navigateByUrl(`${baseUrl}/profile`);
+        window.location.href = `${baseUrl}/profile`;
         this.dropdownOpen = false;
     }
     onLogout() {
@@ -86,15 +86,15 @@ let UserProfileComponent = class UserProfileComponent {
                 // Navigate to login with return URL
                 const config = this.authService.getConfig();
                 const baseUrl = (config === null || config === void 0 ? void 0 : config.userBaseUrl) || '';
-                const returnUrl = encodeURIComponent(this.router.url);
-                this.router.navigateByUrl(`${baseUrl}/login?returnUrl=${returnUrl}`);
+                const returnUrl = encodeURIComponent(window.location.href);
+                window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
             },
             error: (err) => {
                 console.error('Logout error:', err);
                 // Still navigate to login even if logout fails
                 const config = this.authService.getConfig();
                 const baseUrl = (config === null || config === void 0 ? void 0 : config.userBaseUrl) || '';
-                this.router.navigateByUrl(`${baseUrl}/login`);
+                window.location.href = `${baseUrl}/login`;
             }
         });
     }
@@ -110,7 +110,7 @@ UserProfileComponent = __decorate([
     Component({
         selector: 'ma-user-profile',
         standalone: true,
-        imports: [CommonModule],
+        imports: [NgIf],
         template: `
     <div class="user-profile-container">
       <!-- Not logged in -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mesauth-angular",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Angular-friendly SignalR notifier + API helper for current user and notifications",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",