Admin Dashboard Library

A reusable Angular library for building admin dashboards with role-based access control (RBAC), permissions, and rules management.

Features

• Role-Based Access Control (RBAC): Manage users with different roles and permissions
• Permission System: Fine-grained control over actions and resources
• Rule Engine: Apply business rules and constraints for access control
• Configurable: Runtime configuration via InjectionTokens
• Type-Safe: Full TypeScript support with comprehensive models
• Validation: Built-in validators for common use cases
• Guards: Route guards for authentication and permission checks
• Directives: Structural directive for permission-based rendering

Installation

npm install @shared/admin-dashboard-lib

Quick Start

1. Import the Module

import { AdminDashboardModule } from '@shared/admin-dashboard-lib';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
    AdminDashboardModule.forRoot({
      storageKey: 'myAppUser',
      ui: {
        appName: 'My Admin Panel',
        primaryColor: '#667eea'
      }
    })
  ]
})
export class AppModule { }

2. Configure the Library

import { AdminDashboardModule, AdminDashboardConfig } from '@shared/admin-dashboard-lib';

const config: Partial<AdminDashboardConfig> = {
  storageKey: 'currentUser',
  api: {
    login: '/api/auth/login',
    users: '/api/users',
    roles: '/api/roles'
  },
  customAuthHandler: async (email: string, password: string) => {
    const response = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    });
    if (!response.ok) throw new Error('Login failed');
    return response.json();
  },
  dataLoaders: {
    loadUsers: async () => {
      const response = await fetch('/api/users');
      return response.json();
    },
    loadRoles: async () => {
      const response = await fetch('/api/roles');
      return response.json();
    }
  },
  ui: {
    appName: 'Admin Dashboard',
    primaryColor: '#667eea',
    footerText: '© 2024 All rights reserved.'
  },
  features: {
    enableUsers: true,
    enableRoles: true,
    enableDashboard: true
  },
  routes: {
    loginPath: '/login',
    dashboardPath: '/dashboard',
    usersPath: '/users'
  }
};

AdminDashboardModule.forRoot(config);

3. Use Services

import { Component } from '@angular/core';
import { AuthService, RbacService, PermissionAction, PermissionResource } from '@shared/admin-dashboard-lib';

@Component({
  selector: 'app-users',
  template: `
    <button *appHasPermission="PermissionAction.CREATE; appHasPermissionResource: PermissionResource.USERS">
      Create User
    </button>
  `
})
export class UsersComponent {
  PermissionAction = PermissionAction;
  PermissionResource = PermissionResource;

  constructor(
    private authService: AuthService,
    private rbacService: RbacService
  ) {}

  async login() {
    try {
      const user = await this.authService.login('[email protected]', 'password');
      console.log('Logged in:', user);
    } catch (error) {
      console.error('Login failed:', error);
    }
  }

  checkPermission() {
    this.rbacService.hasPermission(PermissionAction.READ, PermissionResource.USERS)
      .subscribe(hasPermission => {
        console.log('Has permission:', hasPermission);
      });
  }
}

4. Use Guards

import { Routes } from '@angular/router';
import { authGuard, permissionGuard, PermissionAction, PermissionResource } from '@shared/admin-dashboard-lib';

export const routes: Routes = [
  {
    path: 'dashboard',
    canActivate: [authGuard],
    loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent)
  },
  {
    path: 'users',
    canActivate: [
      authGuard,
      permissionGuard(PermissionAction.READ, PermissionResource.USERS)
    ],
    loadComponent: () => import('./users.component').then(m => m.UsersComponent)
  }
];

5. Use Directives

<!-- Show element only if user has permission -->
<div *appHasPermission="PermissionAction.DELETE; appHasPermissionResource: PermissionResource.USERS">
  <button (click)="deleteUser()">Delete</button>
</div>

Configuration Options

AdminDashboardConfig

interface AdminDashboardConfig {
  storageKey?: string;                    // Storage key for user session
  api?: {                                 // API endpoints
    login?: string;
    logout?: string;
    users?: string;
    roles?: string;
    permissions?: string;
    rules?: string;
  };
  customAuthHandler?: (email: string, password: string) => Promise<any>;
  dataLoaders?: {                         // Custom data loaders
    loadUsers?: () => Promise<any[]>;
    loadRoles?: () => Promise<any[]>;
    loadPermissions?: () => Promise<any[]>;
    loadRules?: () => Promise<any[]>;
  };
  ui?: {                                  // UI configuration
    appName?: string;
    logoUrl?: string;
    primaryColor?: string;
    footerText?: string;
  };
  features?: {                            // Feature flags
    enableUsers?: boolean;
    enableRoles?: boolean;
    enablePermissions?: boolean;
    enableRules?: boolean;
    enableDashboard?: boolean;
  };
  routes?: {                              // Route paths
    loginPath?: string;
    dashboardPath?: string;
    usersPath?: string;
    rolesPath?: string;
    permissionsPath?: string;
    rulesPath?: string;
    unauthorizedPath?: string;
  };
}

API Reference

Services

• AuthService: Authentication and session management
• RbacService: Role-based access control
• RuleEngineService: Rule evaluation engine

Guards

• authGuard: Protects routes requiring authentication
• permissionGuard: Protects routes based on permissions

Directives

• appHasPermission: Conditionally render elements based on permissions

Validators

• ConstraintsValidator: Email, password strength, username, range, pattern, etc.

Models

• User: User model with role assignment
• Role: Role with permissions and rules
• Permission: Permission with action and resource
• Rule: Business rule with conditions

Examples

See the main application in src/ for complete usage examples.

License

MIT