auth-monitorias-uniandes

Web Security Monitorias

This project has several tools for managing security in an Angular Project. It exposes directives and services for getting current user and roles, and showing or hiding components according this information.

Setup

Use npm package manager and execute following command:

npm i auth-monitorias-uniandes --save

Then import auth-monitorias-uniandes module in your main module.

    import { AppComponent } from './app.component';
    import { AuthMonitoriasModule } from 'auth-monitorias-uniandes';



    @NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AuthMonitoriasModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

Use

Once monitorias-auth module was imported, you can add the directives in your components.

Directives

• acShowFor: Shows a DOM element for the roles assigned.

    roles = ['COORDINATOR', 'PROFESSOR'];

  <ul>
    <li *acShowFor="['ADMINISTRATOR','PROFESSOR','COORDINATOR']"> It's visible for  <i>Administrator, Professor and Coordinator</i></li>
    <li *acShowFor="roles"> It's visible for  <i>Coordinator and Professor</i></li>
  </ul>

• acHideFor: Hides a DOM element for the roles assigned.

    roles = ['COORDINATOR', 'PROFESSOR'];

  <ul>
    <li *acHideFor="['ADMINISTRATOR','PROFESSOR','COORDINATOR']"> It's hide for  <i>Administrator, Professor and Coordinator</i></li>
    <li *acHideFor="roles"> It's hide for  <i>Professor and Coordinator</i></li>
  </ul>

• acReadOnlyFor: Put an input in mode readOnly for the roles assigned.

    roles = ['COORDINATOR'];

  <div class="form-group">
      <label class="center-block">Name: (It's read only for Coordinador)
        <input [acReadOnly]="['COORDINATOR']" class="form-control" formControlName="name">
      </label>
  </div>

  <div class="form-group">
      <label class="center-block">Name: (It's read only for Coordinator)
        <input [acReadOnly]="roles" class="form-control" formControlName="name">
      </label>
  </div>