@7comm/ngx-auth-core v0.0.3

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

Outputs

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

Outputs

Models

AuthCoreRoute

MenuItemReturn