mesauth-angular 0.1.0

package/dist/user-profile.component.js

@@ -0,0 +1,361 @@
+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 { Router } from '@angular/router';
+import { MesAuthService } from './mes-auth.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+let UserProfileComponent = class UserProfileComponent {
+    constructor(authService, router) {
+        this.authService = authService;
+        this.router = router;
+        this.notificationClick = new EventEmitter();
+        this.currentUser = null;
+        this.unreadCount = 0;
+        this.dropdownOpen = false;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.authService.currentUser$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(user => {
+            this.currentUser = user;
+        });
+        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)
+        });
+    }
+    getAvatarUrl(user) {
+        const config = this.authService.getConfig();
+        const baseUrl = (config === null || config === void 0 ? void 0 : config.avatarUrl) || 'https://ui-avatars.com/api/';
+        // Use userName first, fallback to userId, final fallback to 'User'
+        const displayName = user.userName || user.userId || 'User';
+        return `${baseUrl}?name=${encodeURIComponent(displayName)}&background=1976d2&color=fff`;
+    }
+    getLastNameInitial(user) {
+        const fullName = user.fullName || user.userName || 'U';
+        const parts = fullName.split(' ');
+        const lastPart = parts[parts.length - 1];
+        return lastPart.charAt(0).toUpperCase();
+    }
+    toggleDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+    }
+    onLogin() {
+        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}`);
+    }
+    onViewProfile() {
+        const config = this.authService.getConfig();
+        const baseUrl = (config === null || config === void 0 ? void 0 : config.userBaseUrl) || '';
+        this.router.navigateByUrl(`${baseUrl}/profile`);
+        this.dropdownOpen = false;
+    }
+    onLogout() {
+        this.authService.logout().subscribe({
+            next: () => {
+                // Clear current user after successful logout
+                this.currentUser = null;
+                this.dropdownOpen = false;
+                // 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}`);
+            },
+            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`);
+            }
+        });
+    }
+    onNotificationClick() {
+        this.notificationClick.emit();
+    }
+};
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], UserProfileComponent.prototype, "notificationClick", void 0);
+UserProfileComponent = __decorate([
+    Component({
+        selector: 'ma-user-profile',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <div class="user-profile-container">
+      <!-- Not logged in -->
+      <ng-container *ngIf="!currentUser">
+        <button class="login-btn" (click)="onLogin()">
+          Login
+        </button>
+      </ng-container>
+
+      <!-- Logged in -->
+      <ng-container *ngIf="currentUser">
+        <div class="user-header">
+          <button class="notification-btn" (click)="onNotificationClick()" title="Notifications">
+            <span class="icon">🔔</span>
+            <span class="badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
+          </button>
+
+          <div class="user-menu-wrapper">
+            <button class="user-menu-btn" (click)="toggleDropdown()">
+              <img 
+                *ngIf="currentUser.fullName || currentUser.userName"
+                [src]="getAvatarUrl(currentUser)" 
+                [alt]="currentUser.fullName || currentUser.userName"
+                class="avatar"
+              />
+              <span *ngIf="!(currentUser.fullName || currentUser.userName)" class="avatar-initial">
+                {{ getLastNameInitial(currentUser) }}
+              </span>
+            </button>
+
+            <div class="dropdown-menu" *ngIf="dropdownOpen">
+              <div class="dropdown-header">
+                {{ currentUser.fullName || currentUser.userName }}
+              </div>
+              <button class="dropdown-item profile-link" (click)="onViewProfile()">
+                View Profile
+              </button>
+              <button class="dropdown-item logout-item" (click)="onLogout()">
+                Logout
+              </button>
+            </div>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  `,
+        styles: [`
+    .user-profile-container {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 0 16px;
+    }
+
+    .login-btn {
+      padding: 8px 16px;
+      background-color: #1976d2;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 500;
+      transition: background-color 0.3s;
+    }
+
+    .login-btn:hover {
+      background-color: #1565c0;
+    }
+
+    .user-header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .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;
+    }
+
+    .user-menu-wrapper {
+      position: relative;
+    }
+
+    .user-menu-btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 50%;
+      transition: background-color 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .user-menu-btn:hover {
+      background-color: rgba(25, 118, 210, 0.1);
+    }
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      object-fit: cover;
+      background-color: #e0e0e0;
+    }
+
+    .avatar-initial {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background-color: #1976d2;
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      font-size: 16px;
+    }
+
+    .dropdown-menu {
+      position: absolute;
+      top: calc(100% + 8px);
+      right: 0;
+      background: white;
+      border: 1px solid #e0e0e0;
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      min-width: 200px;
+      z-index: 1000;
+      overflow: hidden;
+    }
+
+    .dropdown-header {
+      padding: 12px 16px;
+      border-bottom: 1px solid #f0f0f0;
+      font-weight: 600;
+      color: #333;
+      font-size: 14px;
+    }
+
+    .dropdown-item {
+      display: block;
+      width: 100%;
+      padding: 12px 16px;
+      border: none;
+      background: none;
+      text-align: left;
+      cursor: pointer;
+      font-size: 14px;
+      color: #333;
+      text-decoration: none;
+      transition: background-color 0.2s;
+    }
+
+    .dropdown-item:hover {
+      background-color: #f5f5f5;
+    }
+
+    .profile-link {
+      color: #1976d2;
+    }
+
+    .logout-item {
+      border-top: 1px solid #f0f0f0;
+      color: #f44336;
+    }
+
+    .logout-item:hover {
+      background-color: #ffebee;
+    }
+
+    .user-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .user-name {
+      font-weight: 500;
+      font-size: 14px;
+      color: #333;
+    }
+
+    .user-position {
+      font-size: 12px;
+      color: #666;
+    }
+
+    .logout-btn {
+      background: none;
+      border: none;
+      font-size: 20px;
+      cursor: pointer;
+      color: #666;
+      padding: 4px 8px;
+      transition: color 0.2s;
+    }
+
+    .logout-btn:hover {
+      color: #1976d2;
+    }
+
+    @media (max-width: 768px) {
+      .user-info {
+        display: none;
+      }
+
+      .avatar {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  `]
+    }),
+    __metadata("design:paramtypes", [MesAuthService, Router])
+], UserProfileComponent);
+export { UserProfileComponent };

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "mesauth-angular",
+  "version": "0.1.0",
+  "description": "Angular-friendly SignalR notifier + API helper for current user and notifications",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepare": "npm run build",
+    "publish": "npm publish"
+  },
+  "keywords": ["angular","signalr","notifications","auth","mes"],
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/core": "^9 || ^10 || ^11 || ^12 || ^13 || ^14 || ^15",
+    "@angular/common": "^9 || ^10 || ^11 || ^12 || ^13 || ^14 || ^15",
+    "@angular/router": "^9 || ^10 || ^11 || ^12 || ^13 || ^14 || ^15",
+    "rxjs": "^6 || ^7"
+  },
+  "dependencies": {
+    "@microsoft/signalr": "^7.0.0",
+    "rxjs": "^6.6.0"
+  },
+  "devDependencies": {
+    "typescript": "~4.9.5",
+    "tslib": "^2.0.0"
+  }
+}