mesauth-angular 1.2.0 → 1.2.1

package/src/user-profile.component.ts

@@ -1,449 +0,0 @@
-import { Component, OnInit, OnDestroy, Output, EventEmitter, HostBinding, HostListener, signal, ChangeDetectorRef } from '@angular/core';
-import { NgIf } from '@angular/common';
-import { Router } from '@angular/router';
-import { MesAuthService, IUser } from './mes-auth.service';
-import { ThemeService, Theme } from './theme.service';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-
-@Component({
-  selector: 'ma-user-profile',
-  standalone: true,
-  imports: [NgIf],
-  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="mes-dropdown-menu" *ngIf="dropdownOpen">
-              <div class="mes-dropdown-header">
-                {{ currentUser().fullName || currentUser().userName }}
-              </div>
-              <button class="mes-dropdown-item profile-link" (click)="onViewProfile()">
-                View Profile
-              </button>
-              <button class="mes-dropdown-item logout-item" (click)="onLogout()">
-                Logout
-              </button>
-            </div>
-          </div>
-        </div>
-      </ng-container>
-    </div>
-  `,
-  styles: [`
-    :host {
-      --primary-color: #1976d2;
-      --primary-hover: #1565c0;
-      --primary-light: rgba(25, 118, 210, 0.1);
-      --error-color: #f44336;
-      --error-light: #ffebee;
-      --text-primary: #333;
-      --text-secondary: #666;
-      --text-muted: #999;
-      --bg-primary: white;
-      --bg-secondary: #f5f5f5;
-      --bg-tertiary: #fafafa;
-      --bg-hover: #f5f5f5;
-      --border-color: #e0e0e0;
-      --border-light: #f0f0f0;
-      --shadow: rgba(0, 0, 0, 0.15);
-      --shadow-light: rgba(0, 0, 0, 0.1);
-    }
-
-    :host(.theme-dark) {
-      --primary-color: #90caf9;
-      --primary-hover: #64b5f6;
-      --primary-light: rgba(144, 202, 249, 0.1);
-      --error-color: #ef5350;
-      --error-light: rgba(239, 83, 80, 0.1);
-      --text-primary: #e0e0e0;
-      --text-secondary: #b0b0b0;
-      --text-muted: #888;
-      --bg-primary: #1e1e1e;
-      --bg-secondary: #2d2d2d;
-      --bg-tertiary: #252525;
-      --bg-hover: #333;
-      --border-color: #404040;
-      --border-light: #333;
-      --shadow: rgba(0, 0, 0, 0.3);
-      --shadow-light: rgba(0, 0, 0, 0.2);
-    }
-
-    .user-profile-container {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 0 16px;
-    }
-
-    .login-btn {
-      padding: 8px 16px;
-      background-color: var(--primary-color);
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-weight: 500;
-      transition: background-color 0.3s;
-    }
-
-    .login-btn:hover {
-      background-color: var(--primary-hover);
-    }
-
-    .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: var(--error-color);
-      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: var(--primary-light);
-    }
-
-    .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: var(--primary-color);
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: bold;
-      font-size: 16px;
-    }
-
-    .mes-dropdown-menu {
-      position: absolute;
-      top: calc(100% + 8px);
-      right: 0;
-      background: var(--bg-primary);
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-      box-shadow: 0 2px 8px var(--shadow);
-      min-width: 200px;
-      z-index: 1000;
-      overflow: hidden;
-    }
-
-    .mes-dropdown-header {
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--border-light);
-      font-weight: 600;
-      color: var(--text-primary);
-      font-size: 14px;
-    }
-
-    .mes-dropdown-item {
-      display: block;
-      width: 100%;
-      padding: 12px 16px;
-      border: none;
-      background: none;
-      text-align: left;
-      cursor: pointer;
-      font-size: 14px;
-      color: var(--text-primary);
-      text-decoration: none;
-      transition: background-color 0.2s;
-    }
-
-    .mes-dropdown-item:hover {
-      background-color: var(--bg-hover);
-    }
-
-    .profile-link {
-      color: var(--primary-color);
-    }
-
-    .logout-item {
-      border-top: 1px solid var(--border-light);
-      color: var(--error-color);
-    }
-
-    .logout-item:hover {
-      background-color: var(--error-light);
-    }
-
-    .user-info {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-    }
-
-    .user-name {
-      font-weight: 500;
-      font-size: 14px;
-      color: var(--text-primary);
-    }
-
-    .user-position {
-      font-size: 12px;
-      color: var(--text-secondary);
-    }
-
-    .logout-btn {
-      background: none;
-      border: none;
-      font-size: 20px;
-      cursor: pointer;
-      color: var(--text-secondary);
-      padding: 4px 8px;
-      transition: color 0.2s;
-    }
-
-    .logout-btn:hover {
-      color: var(--primary-color);
-    }
-
-    @media (max-width: 768px) {
-      .user-info {
-        display: none;
-      }
-
-      .avatar {
-        width: 32px;
-        height: 32px;
-      }
-    }
-  `]
-})
-export class UserProfileComponent implements OnInit, OnDestroy {
-  @Output() notificationClick = new EventEmitter<void>();
-  @HostBinding('class') get themeClass(): string {
-    return `theme-${this.currentTheme}`;
-  }
-
-  currentUser = signal<IUser | null>(null);
-  currentTheme: Theme = 'light';
-  unreadCount = 0;
-  dropdownOpen = false;
-  private hasUser = false;
-  private destroy$ = new Subject<void>();
-
-  // Signal to force avatar refresh
-  avatarRefresh = signal<number>(Date.now());
-
-  constructor(private authService: MesAuthService, private router: Router, private themeService: ThemeService, private cdr: ChangeDetectorRef) {}
-
-  ngOnInit() {
-    this.authService.currentUser$
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(user => {
-        this.currentUser.set(user);
-        this.hasUser = !!user;
-        // Force avatar refresh when user changes
-        this.avatarRefresh.set(Date.now());
-        if (!this.hasUser) {
-          this.unreadCount = 0;
-        } else {
-          this.loadUnreadCount();
-        }
-        this.cdr.markForCheck();
-      });
-
-    this.themeService.currentTheme$
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(theme => {
-        this.currentTheme = theme;
-      });
-
-    // Listen for new real-time notifications (SignalR only)
-    this.authService.notifications$
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(() => {
-        if (this.hasUser) {
-          this.loadUnreadCount();
-        }
-      });
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  loadUnreadCount() {
-    if (!this.hasUser) {
-      this.unreadCount = 0;
-      return;
-    }
-
-    this.authService.getUnreadCount().subscribe({
-      next: (response: any) => {
-        this.unreadCount = response.unreadCount || 0;
-      },
-      error: (err) => {}
-    });
-  }
-
-  getAvatarUrl(user: IUser): string {
-    // Use the refresh signal to force update
-    const refresh = this.avatarRefresh();
-    const config = this.authService.getConfig();
-    const baseUrl = config?.apiBaseUrl || '';
-    
-    // If user has avatarPath, use it directly
-    if (user.avatarPath) {
-      // If avatarPath is already a full URL, use it as-is
-      if (user.avatarPath.startsWith('http://') || user.avatarPath.startsWith('https://')) {
-        return user.avatarPath;
-      }
-      // If it's a relative path, construct full URL with refresh timestamp
-      return `${baseUrl.replace(/\/$/, '')}${user.avatarPath}?t=${refresh}`;
-    }
-
-    // Fallback: construct URL using userId
-    const userId = user.userId;
-    if (userId && baseUrl) {
-      return `${baseUrl.replace(/\/$/, '')}/auth/${userId}/avatar?t=${refresh}`;
-    }
-    
-    // Fallback to UI avatars service if no userId or baseUrl
-    const displayName = user.userName || user.userId || 'User';
-    return `https://ui-avatars.com/api/?name=${encodeURIComponent(displayName)}&background=1976d2&color=fff`;
-  }
-
-  getLastNameInitial(user: IUser): string {
-    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;
-  }
-
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: Event) {
-    const target = event.target as HTMLElement;
-    const clickedInside = target.closest('.user-menu-wrapper');
-    if (!clickedInside) {
-      this.dropdownOpen = false;
-    }
-  }
-
-  onLogin() {
-    const config = this.authService.getConfig();
-    const baseUrl = config?.userBaseUrl || '';
-    const returnUrl = encodeURIComponent(this.router.url);
-    window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
-  }
-
-  onViewProfile() {
-    this.router.navigate(['/profile']);
-    this.dropdownOpen = false;
-  }
-
-  onLogout() {
-    this.authService.logout().subscribe({
-      next: () => {
-        // Clear current user after successful logout
-        this.dropdownOpen = false;
-        
-        // Navigate to login with return URL
-        const config = this.authService.getConfig();
-        const baseUrl = config?.userBaseUrl || '';
-        const returnUrl = encodeURIComponent(window.location.href);
-        window.location.href = `${baseUrl}/login?returnUrl=${returnUrl}`;
-      },
-      error: (err) => {
-        // Still navigate to login even if logout fails
-        const config = this.authService.getConfig();
-        const baseUrl = config?.userBaseUrl || '';
-        window.location.href = `${baseUrl}/login`;
-      }
-    });
-  }
-
-  onNotificationClick() {
-    this.notificationClick.emit();
-  }
-}
-

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2020",
-    "module": "es2020",
-    "lib": ["es2020", "dom"],
-    "declaration": true,
-    "outDir": "dist",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
-  },
-  "angularCompilerOptions": {
-    "enableIvy": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}