auth-academia-uniandes v0.1.4-beta.23

Web Security Academy

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-academia-uniandes --save

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

    import { AppComponent } from './app.component';
    import { AuthAcademyModule } from 'auth-academia-uniandes';



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

Use

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

Directives

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

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

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

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

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

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

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

    roles = ['PHDSTUDENT'];

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

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