Identity Admin Dashboard

How to install

npm i identity-admin

Features

• Creating Dashboard with minimal Ui for mongoose models.
• Provide DashboardController for custom routing and middlewares.
• Provide multiple dashboard instances with diffrent routes.

Create new unAuthenticated Dashboard:

• Create new instance from Dashboard.
• Provide Resources array of resources file.
• Build the instance after mongoose setup by passing app instance to the build function.

const dashboard: Dashboard = new Dashboard({ resources:[ <Resource: IResourceFile> ]);

dashboard.build(app);

To create new Authenticated Dashboard:

• Create new instance from Dashboard.
• Provide Resources array of resources file.
• Provide authenticate function which take AdminCredentials as parameter and return a promise of boolean or user data.
• Provide cookiesConfiguration (cookie name and cookie secret).
• Build the instance after mongoose setup by passing app instance to the build function.

const dashboard = new Dashboard({
        resources: [ UserResource ],
        cookiesConfiguration: {
            cookiesSecret: "cokieieSecret",
            cookieName: "connect.sid"
        },
        authenticate: async (credentials: AdminCredentials) => {
            const user = await Admin.findOne({ email: credentials.email });
            if (user) {
                const matched = await bcrypt.compare(credentials.password, user.encryptedPassword);
                if (matched) {
                    return user;
                }
            }
            return false;
        }
    })

dashboard.build(app);

To create new CustomRoutes Dashboard:

This method require to implement your own view and new react app

• Create new controller class with invirsify-express-utils notaitions and extend ActionController.
• Create new controller class with invirsify-express-utils notaitions and extend ResourceController.
• Create new controller class with invirsify-express-utils notaitions and extend DashboardController.
• Provide resource file and repository in super constructor.
• Following class will create new route /v1/contries ***Now you can pass any auth middlewares you want

@controller('/v1/actions', defaultHeaders)
export default class ActionsController extends ActionController{

  constructor(
      @inject(TYPES.IResources) private resources: IResourceFile[]) {
      super(resources);
  }
}

@controller('/v1/resources', defaultHeaders)
export default class ResourcesController extends ResourceController{

  constructor(
      @inject(TYPES.IResources) private resources: IResourceFile[]) {
      super(resources);
  }
}

@controller('/v1/contries', defaultHeaders)
export default class CountryController extends DashboardController{

  constructor(
      @inject(TYPES.ICountryRepository) private countryRepository: CountryRepository,
      @inject(TYPES.ICountryResource) private countryResource: IResourceFile  ) {

      super(CountryResource, countryRepository);
  }
}

Documentaion:

    Dashboard(dashBoardConfig: DashboardConfig);
    build(app: Application): void;

Dashboard:

Dashboard constructor to create new instance from idntity-admin.

• dashBoardConfig:

{
  resources: IResourceFile[]; // Array of resources files.
  rootPath?: string; // optional root path default to  /dashboard
  localesOptions?: i18n.ConfigurationOptions; // locales options for custom dashboard
  cookiesConfiguration: CookieConfiguration; // cookies configuration in case of authenticated dashboard
  authenticate?: AuthenticateMiddleWare; // authenticate function used to login the admin.
}

• IResourceFile For resource file example check IResourceFile

• CookieConfiguration

{
  cookiesSecret: string; // cookie secret to handle sessions
  cookieName: string; // cookie name as appeared in browser
}

Admin Notifications:

To add admin notifications in your project you should add the following

• Enable the admin notifications in the configuration file of the dashboard.

Configuration.ts

import { IConfiguartionFile } from "identity-admin/lib/types/IConfigurationFile";

export const configuration: IConfiguartionFile = {
    textFieldSize: 'small',
    defaultRowsPerPage: 50,
    adminNotifications: true // enable admin notifications
}

• Add these lines for the admin notification repository in the inversify container.

RepositoryTypes.ts

IAdminNotificationRepository: Symbol.for('IAdminNotificationRepository')

RepositoryInversify.ts

container.bind<IAdminNotificationRepository>(TYPES.IAdminNotificationRepository).to(AdminNotificationRepository);

• Create new dashboard controller for the admin notifications CRUD operations and another controller for the notifications services.

AdminNotificationController.ts

import { controller } from "inversify-express-utils";
import { defaultHeaders, isSessionAuth } from "@pbb/middlewares/isAuth";
import DashboardController from "identity-admin/lib/controllers/DashboardController";
import { inject } from "inversify";
import TYPES from "@pbb/container/types";
import AdminNotificationRepository from "identity-admin/lib/repositories/AdminNotificationRepository";
import { modelConfigurations } from "@pbb/settings";
import AdminNotificationsResource from "identity-admin/lib/resources/AdminNotificationsResource";

@controller("/v1/admin/adminNotifications", isSessionAuth, defaultHeaders) // admin can be changed according to your base route
export default class DashboardAdminNotificationController extends DashboardController {
  constructor(
    @inject(TYPES.IAdminNotificationRepository)
    private adminNotificationRepository: AdminNotificationRepository
  ) {
    super(
      AdminNotificationsResource,
      adminNotificationRepository,
      undefined,
      modelConfigurations
    );
  }
}

DashboardNotifications.ts

import { defaultHeaders, isSessionAuth } from "@pbb/middlewares/isAuth";
import { controller } from "inversify-express-utils";

import NotificationController from "identity-admin/lib/controllers/AdminNotificationController";

@controller("/v1/admin/notifications", isSessionAuth, defaultHeaders) // You can change the base route as your need.
export default class DashboardNotificationController extends NotificationController {
  constructor() {
    super();
  }
}

• Import these 2 controllers in the index file of the controllers folder.

  index.ts

import './AdminNotificationController'
import './DashboardNotifications';

• Add the resource file of the admin notifications in your index file of the resources folder.

  index.ts

// other imports
import AdminNotificationsResource from 'identity-admin/lib/resources/AdminNotificationsResource'

....

const resources: IResourceFile[] = [
    // other resources
    ...
    AdminNotificationsResource,
    ...
];

Add new notification:

To add a new notification just call the AdminNotificationCreation class as below

import {
  AdminNotificationCreation,
  NotificationNavigationType,
} from "identity-admin/lib/helpers/AdminNotifications/AdminNotificationCreation";

const record = await AdminNotificationCreation.insert({
      title: "Notification title",
      navigateTo: NotificationNavigationType.LIST,
      type: "Any notification type",
      modelName: ModelNames.User,
    });

• In case you choose NotificationNavigationType.LIST then you should provide a model name to be navigated to
• In case you choose NotificationNavigationType.SHOW then you should provide a model name to be navigated to and the relatedId of the record to be shown
• In case you choose NotificationNavigationType.EXTERNAL_LINK then you should provide the external link

The Frontend code:

• Add the notification provider just before the router.

  app.tsx

import { NotificationsContextProvider } from 'identity-admin-ui';

<NotificationsContextProvider notificationsUrl="notifications">
  <Router />
</NotificationsContextProvider>;

• Add the notification icon in the dashboard header.

  DashboardHeader.tsx

  const showNotifications = resources?.appConfigurations?.adminNotifications;

{showNotifications && <NotificationPopover />} // Add it just above the account popover
<AccountPopover userType={userType} />