NgxAuthCore

This library was generated with Angular CLI version 14.2.0.

Installing

$ npm install --save @7comm/ngx-auth-core

Import

Import @7comm/ngx-auth-core module in Angular app:

import { NgxAuthCoreModule } from 'ngx-auth-core';

@NgModule({
  imports: [
    NgxAuthCoreModule
  ]
})

Authenticated Layout

In your HTML file:

<ngx-authenticated-layout
[toolbarLogoPath]="'assets/logo.png'"
[toolbarLogoClass]="'className'"
[username]="'Username'"
[routes]="routes"
(menuItemClickEvent)="navigateTo($event)"
[activeRoute]="activeRoute"
[drawerWidthPx]="270"
[primaryColor]="'#3950B1'"
[secondaryColor]="'#E6EAF7'"
[toolbarTextColor]="'#fff'"
></ngx-authenticated-layout>

In your TS File:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthCoreRoute } from 'dist/ngx-auth-core/lib/models/auth-core-route';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  routes: AuthCoreRoute[] = [
    { path: '/', icon: 'home', description: 'Home', children: [] },
    {
      path: '', icon: 'search', description: 'Test pages expand', expand: false, children: [
        { path: '/test-page', icon: '', description: 'Test page', children: [] },
        { path: '/test-page2', icon: '', description: 'Test page 2', children: [] }
      ]
    },
  ];
  activeRoute = '';

  constructor(
    private _router: Router,
  ) { }

  ngOnInit() {
    this._updateActiveRoute();
  }

  public navigateTo(obj: any): void {
    if (obj.authCoreRoute.children.length === 0) {
      this._router.navigate([obj.authCoreRoute.path]);
      this._updateActiveRoute();
      obj.drawer.close();
    } else {
      obj.authCoreRoute.expand = !obj.authCoreRoute.expand;
    }
  }

  private _updateActiveRoute(): void {
    setTimeout(() => {
      this.activeRoute = this._router.url;
    }, 0);
  }
}

Inputs

| Name | Type | Description | | --- | --- | --- | | toolbarLogoPath | string | Path to your logo in toolbar | | toolbarLogoClass | string | Class name to your logo in toolbar | | username | string | Name to display in toolbar | | routes | AuthCoreRoute[] | List of routes to display in Material Drawer | | activeRoute | string | Path of active route | | drawerWidthPx | number | Width of Material Drawer | | primaryColor | string | Primary color for component | | secondaryColor | string | Secondary color for component | | toolbarTextColor | string | Color for text in toolbar |

Outputs

| Name | Type | Description | | --- | --- | --- | | menuItemClickEvent | EventEmitter (from "@angular/core") | Event triggered on click in Material Drawer item, it returns MenuItemReturn |

Default Login Page

In your HTML file:

  <ngx-default-login-page
  [logoPath]="'assets/logo-test.png'"
  [logoClass]="'class'"
  [loginFieldLabel]="'Usuário'"
  [loginFieldReqErrorMsg]="'Campo obrigatório'"
  [passwordFieldReqErrorMsg]="'Campo obrigatório'"
  [passwordFieldLabel]="'Senha'"
  [btnLabel]="'Entrar'"
  (submitEvent)="submitEvent($event)"
  ></ngx-default-login-page>

In your TS file:

import { Component, } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public submitEvent(form: FormGroup): void {
    console.log(form)
  }
}

Inputs

| Name | Type | Description | | --- | --- | --- | |loginFieldLabel| string | Label for login field |passwordFieldLabel| string | Label for password field |loginFieldReqErrorMsg| string | Error message for login required |passwordFieldReqErrorMsg| string | Error message for password required |btnLabel| string | Label for submit button |logoPath| string | Path for logo image |logoClass| string | Class name for logo

Outputs

| Name | Type | Description | | --- | --- | --- | |submitEvent| EventEmitter (from “@angular/core”) | Event trigger on submit form

Models

AuthCoreRoute

| Name | Type | Example | Description | | --- | --- | --- | --- | | path | string | /page-route | Route for a page | | icon | string | home | Icon name in Material Icons | | description | string | Description | Description to display in Material Drawer | | expand | boolean | true | Control of expand in menu | | children | AuthCoreRoute[] | [] | List of child routes |

MenuItemReturn

| Name | Type | Description | | --- | --- | --- | | authCoreRoute | AuthCoreRoute | Route that emits the event | | drawer | MatDrawer (from “@angular/material”) | Material Drawer Reference |