hyper-jobs-login-component

Instalação

Para instalar esta biblioteca, execute:

$ npm install hyper-jobs-login-component --save

Consumindo sua biblioteca

Uma vez que você publicou sua biblioteca para npm, você pode importar sua biblioteca em qualquer aplicativo angular executando:

$ npm install hyper-jobs-login-component

depois importe em seu Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Importe seu módulo de rotas
import { AppRoutingModule } from './app.routing.module';
// Importe a biblioteca hyper-jobs-login-component
import { LoginModule } from 'hyper-jobs-login-component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Importe o módulo LoginModule passando o environment para o forRoot 
    LoginModule.forRoot(environment),
    // Crie ou use seu módulo de rotas existente
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Uma vez que sua biblioteca é importada, você pode usar seus componentes, diretrizes e pipes em seu aplicativo Angular:

<!-- Neste exemplo foi utilizado a diretiva `authenticate` --> 
<!-- que faz com que o usuário logue antes de executar a ação -->
<h1>Exemplo</h1>
<button (authenticate)="funcao()" type="button">Botao de ação</button>

Utilizando a diretiva via typescript:

import { ActionAuthenticatedDirective } from 'hyper-jobs-login-component';

@ViewChild(ActionAuthenticatedDirective) refDirective: ActionAuthenticatedDirective;

callTeste() {
    this.refDirective.eventClick();
  }

Folhas de Estilo(CSS)

É necessário adicionar dois css no arquivo index.html dando um identificador para cada um:

<link id="css_hj_ui" rel="stylesheet" href="">

No arquivo app.component.ts verifico qual ambiente estou utilizando e mudo a url dos css's:

import { Component, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import { environment } from './../environments/environment';
   
constructor(
    @Inject(DOCUMENT) private document
  )
  { }
ngOnInit() {
  this.document.getElementById('css_hj_ui').setAttribute('href', environment.assets + 'css/hj-ui.css');
}

Emit()

O componente Login emite os seguintes eventos:

listenerLoginComponent - Quando o usuário logou com sucesso este evento retorna o objeto deste usuário. listenerLogoutComponent - Quando o usuário desloga este evento retorna 'true' para sucesso e 'false' para fail. takeWhile - Quando retornou um código que preciso cancelar as requisições

subscribe()

O componente Login se inscreve nos seguintes eventos:

openLoginModal - Escuta este evento esperando o parametro 'true' para que abra o modal de login. logout - Escuta este evento esperando um 'true' para deslogar o usuário.

Environments

É necessário ter os seguintes nós em seu objeto:

{
  apiUrl: '.../',
  assets: '.../',
  homeUrl: '.../'
}
// OBS: sempre finalizar com / as URL's

Nós Opcionais:

// Habilita ou desabilita os botões "Worker" e "Sponsor" no momento do login
loginConfig: {
  worker: true,
  sponsor: false
}

License

MIT © Fabio Junior Moreira