mesauth-angular 0.1.0

package/README.md

@@ -0,0 +1,40 @@
+# mesauth-angular
+
+Angular helper library to connect to a backend API and SignalR hub to surface the current logged-in user and incoming notifications.
+
+Quick start
+
+1. Install (from local folder during development):
+
+```bash
+cd /path/to/your/angular-app
+npm install ../path/to/mesauth-angular
+```
+
+2. Initialize in your app (e.g. `AppComponent` constructor or `AppModule` bootstrap):
+
+```ts
+// in AppComponent
+constructor(private mesAuth: MesAuthService) {
+  this.mesAuth.init({
+    signalrUrl: 'https://api.example.com/hubs/notify',
+    apiBaseUrl: 'https://api.example.com',
+    accessToken: () => localStorage.getItem('access_token')
+  });
+
+  this.mesAuth.currentUser$.subscribe(user => console.log('user', user));
+  this.mesAuth.notifications$.subscribe(n => console.log('notif', n));
+}
+```
+
+3. Build the package for publishing:
+
+```bash
+cd /path/to/mesauth-angular
+npm install
+npm run build
+```
+
+Notes
+- The service expects an endpoint `GET /api/user/current` that returns the current user.
+- SignalR events used: `UserUpdated` and `NewNotification` (adjust to your backend).

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/ma-user.component.d.ts

@@ -0,0 +1,2 @@
+export declare class MaUserComponent {
+}

package/dist/ma-user.component.js

@@ -0,0 +1,34 @@
+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;
+};
+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';
+let MaUserComponent = class MaUserComponent {
+};
+MaUserComponent = __decorate([
+    Component({
+        selector: 'ma-user',
+        standalone: true,
+        imports: [CommonModule, 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></ma-notification-panel>
+  `,
+        styles: [`
+    .user-header {
+      display: flex;
+      justify-content: flex-end;
+    }
+  `]
+    })
+], MaUserComponent);
+export { MaUserComponent };

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

@@ -0,0 +1,97 @@
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+export interface MesAuthConfig {
+    apiBaseUrl: string;
+    withCredentials?: boolean;
+    avatarUrl?: string;
+    userBaseUrl?: string;
+}
+export interface IUser {
+    userId?: string;
+    userName?: string;
+    fullName?: string;
+    gender?: string;
+    email?: string;
+    phoneNumber?: string;
+    department?: string;
+    position?: string;
+    tokenVersion?: string;
+    permEndpoint?: string;
+    perms?: Set<string>;
+    employeeCode?: string;
+    hrFullNameVn?: string;
+    hrFullNameEn?: string;
+    hrPosition?: string;
+    hrJobTitle?: string;
+    hrGender?: string;
+    hrMobile?: string;
+    hrEmail?: string;
+    hrJoinDate?: string;
+    hrBirthDate?: string;
+    hrWorkStatus?: string;
+    hrDoiTuong?: string;
+    hrTeamCode?: string;
+    hrLineCode?: string;
+}
+export declare enum NotificationType {
+    Info = "Info",
+    Warning = "Warning",
+    Error = "Error",
+    Success = "Success"
+}
+export interface NotificationDto {
+    id: string;
+    title: string;
+    message: string;
+    messageHtml?: string;
+    url?: string;
+    type: NotificationType;
+    isRead: boolean;
+    createdAt: string;
+    sourceAppName: string;
+    sourceAppIconUrl?: string;
+}
+export interface PagedList<T> {
+    items: T[];
+    totalCount: number;
+    page: number;
+    pageSize: number;
+    totalPages: number;
+    hasNext: boolean;
+    hasPrevious: boolean;
+}
+export interface RealTimeNotificationDto {
+    id: string;
+    title: string;
+    message: string;
+    messageHtml?: string;
+    url?: string;
+    type: NotificationType;
+    createdAt: string;
+    sourceAppName: string;
+    sourceAppIconUrl?: string;
+}
+export declare class MesAuthService {
+    private http;
+    private hubConnection;
+    private _currentUser;
+    currentUser$: Observable<IUser | null>;
+    private _notifications;
+    notifications$: Observable<any>;
+    private apiBase;
+    private config;
+    constructor(http: HttpClient);
+    init(config: MesAuthConfig): void;
+    getConfig(): MesAuthConfig | null;
+    private fetchCurrentUser;
+    private fetchInitialNotifications;
+    getUnreadCount(): Observable<any>;
+    getNotifications(page?: number, pageSize?: number, includeRead?: boolean, type?: string): Observable<any>;
+    markAsRead(notificationId: string): Observable<any>;
+    markAllAsRead(): Observable<any>;
+    deleteNotification(notificationId: string): Observable<any>;
+    private startConnection;
+    stop(): void;
+    logout(): Observable<any>;
+    refreshUser(): void;
+}

package/dist/mes-auth.service.js

@@ -0,0 +1,111 @@
+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 { HttpClient } from '@angular/common/http';
+import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
+import { BehaviorSubject, Subject } from 'rxjs';
+export var NotificationType;
+(function (NotificationType) {
+    NotificationType["Info"] = "Info";
+    NotificationType["Warning"] = "Warning";
+    NotificationType["Error"] = "Error";
+    NotificationType["Success"] = "Success";
+})(NotificationType || (NotificationType = {}));
+let MesAuthService = class MesAuthService {
+    constructor(http) {
+        this.http = http;
+        this.hubConnection = null;
+        this._currentUser = new BehaviorSubject(null);
+        this.currentUser$ = this._currentUser.asObservable();
+        this._notifications = new Subject();
+        this.notifications$ = this._notifications.asObservable();
+        this.apiBase = '';
+        this.config = null;
+    }
+    init(config) {
+        this.config = config;
+        this.apiBase = config.apiBaseUrl.replace(/\/$/, '');
+        this.fetchCurrentUser();
+        this.fetchInitialNotifications();
+        this.startConnection(config);
+    }
+    getConfig() {
+        return this.config;
+    }
+    fetchCurrentUser() {
+        if (!this.apiBase)
+            return;
+        this.http.get(`${this.apiBase}/auth/me`).subscribe({
+            next: (u) => this._currentUser.next(u),
+            error: (err) => console.error('fetchCurrentUser error', err)
+        });
+    }
+    fetchInitialNotifications() {
+        if (!this.apiBase)
+            return;
+        this.http.get(`${this.apiBase}/notif/me`).subscribe({
+            next: (notifications) => {
+                if (Array.isArray(notifications === null || notifications === void 0 ? void 0 : notifications.items)) {
+                    notifications.items.forEach((n) => this._notifications.next(n));
+                }
+            },
+            error: (err) => console.error('fetchInitialNotifications error', err)
+        });
+    }
+    getUnreadCount() {
+        return this.http.get(`${this.apiBase}/notif/me/unread-count`);
+    }
+    getNotifications(page = 1, pageSize = 20, includeRead = false, type) {
+        let url = `${this.apiBase}/notif/me?page=${page}&pageSize=${pageSize}&includeRead=${includeRead}`;
+        if (type) {
+            url += `&type=${type}`;
+        }
+        return this.http.get(url);
+    }
+    markAsRead(notificationId) {
+        return this.http.patch(`${this.apiBase}/notif/${notificationId}/read`, {});
+    }
+    markAllAsRead() {
+        return this.http.patch(`${this.apiBase}/notif/me/read-all`, {});
+    }
+    deleteNotification(notificationId) {
+        return this.http.delete(`${this.apiBase}/notif/${notificationId}`);
+    }
+    startConnection(config) {
+        var _a;
+        if (this.hubConnection)
+            return;
+        const signalrUrl = config.apiBaseUrl.replace(/\/$/, '') + '/hub/notification';
+        const builder = new HubConnectionBuilder()
+            .withUrl(signalrUrl, { withCredentials: (_a = config.withCredentials) !== null && _a !== void 0 ? _a : true })
+            .withAutomaticReconnect()
+            .configureLogging(LogLevel.Warning);
+        this.hubConnection = builder.build();
+        this.hubConnection.on('ReceiveNotification', (n) => this._notifications.next(n));
+        this.hubConnection.start().catch((err) => console.error('SignalR start error', err));
+    }
+    stop() {
+        if (!this.hubConnection)
+            return;
+        this.hubConnection.stop().catch(() => { });
+        this.hubConnection = null;
+    }
+    logout() {
+        return this.http.post(`${this.apiBase}/auth/logout`, {});
+    }
+    refreshUser() {
+        this.fetchCurrentUser();
+    }
+};
+MesAuthService = __decorate([
+    Injectable({ providedIn: 'root' }),
+    __metadata("design:paramtypes", [HttpClient])
+], MesAuthService);
+export { MesAuthService };

package/dist/notification-badge.component.d.ts

@@ -0,0 +1,13 @@
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
+import { MesAuthService } from './mes-auth.service';
+export declare class NotificationBadgeComponent implements OnInit, OnDestroy {
+    private authService;
+    notificationClick: EventEmitter<void>;
+    unreadCount: number;
+    private destroy$;
+    constructor(authService: MesAuthService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private loadUnreadCount;
+    onNotificationClick(): void;
+}

package/dist/notification-badge.component.js

@@ -0,0 +1,100 @@
+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 { Component, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MesAuthService } from './mes-auth.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+let NotificationBadgeComponent = class NotificationBadgeComponent {
+    constructor(authService) {
+        this.authService = authService;
+        this.notificationClick = new EventEmitter();
+        this.unreadCount = 0;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.loadUnreadCount();
+        // Listen for new notifications
+        this.authService.notifications$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.loadUnreadCount();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    loadUnreadCount() {
+        this.authService.getUnreadCount().subscribe({
+            next: (response) => {
+                this.unreadCount = response.unreadCount || 0;
+            },
+            error: (err) => console.error('Error loading unread count:', err)
+        });
+    }
+    onNotificationClick() {
+        this.notificationClick.emit();
+    }
+};
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], NotificationBadgeComponent.prototype, "notificationClick", void 0);
+NotificationBadgeComponent = __decorate([
+    Component({
+        selector: 'ma-notification-badge',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
+      <span class="icon">🔔</span>
+      <span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
+    </button>
+  `,
+        styles: [`
+    .notification-btn {
+      position: relative;
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      padding: 8px;
+      transition: opacity 0.2s;
+    }
+
+    .notification-btn:hover {
+      opacity: 0.7;
+    }
+
+    .icon {
+      display: inline-block;
+    }
+
+    .badge {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background-color: #f44336;
+      color: white;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: bold;
+    }
+  `]
+    }),
+    __metadata("design:paramtypes", [MesAuthService])
+], NotificationBadgeComponent);
+export { NotificationBadgeComponent };

package/dist/notification-panel.component.d.ts

@@ -0,0 +1,20 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { MesAuthService, NotificationDto } from './mes-auth.service';
+import { ToastService } from './toast.service';
+export declare class NotificationPanelComponent implements OnInit, OnDestroy {
+    private authService;
+    private toastService;
+    isOpen: boolean;
+    notifications: NotificationDto[];
+    private destroy$;
+    constructor(authService: MesAuthService, toastService: ToastService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private loadNotifications;
+    open(): void;
+    close(): void;
+    markAsRead(notificationId: string): void;
+    markAllAsRead(): void;
+    delete(notificationId: string, event: Event): void;
+    formatDate(dateString: string): string;
+}