npm package: @hyper-jobs/authenticate
Description: Para instalar esta biblioteca, execute:
Author: Fabio Junior Moreira
Latest version: 1.6.11

# hyper-jobs-login-component

## Instalação

Para instalar esta biblioteca, execute:

```bash
$ 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:

```bash
$ npm install hyper-jobs-login-component
```

depois importe em seu Angular `AppModule`:

```typescript
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:

```xml
<!-- 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:

```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:

```xml
<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:

```typescript
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.<br />
`listenerLogoutComponent` - Quando o usuário desloga este evento retorna 'true' para sucesso e 'false' para fail.<br />
`takeWhile` - Quando retornou um código que preciso cancelar as requisições<br />

## subscribe()

O componente Login se inscreve nos seguintes eventos:

`openLoginModal` - Escuta este evento esperando o parametro 'true' para que abra o modal de login.<br />
`logout` - Escuta este evento esperando um 'true' para deslogar o usuário.

## Environments

É necessário ter os seguintes nós em seu objeto:

```typescript
{
  apiUrl: '.../',
  assets: '.../',
  homeUrl: '.../'
}
// OBS: sempre finalizar com / as URL's
```

Nós Opcionais:

```typescript
// Habilita ou desabilita os botões "Worker" e "Sponsor" no momento do login
loginConfig: {
  worker: true,
  sponsor: false
}
```

## License

MIT © [Fabio Junior Moreira](mailto:fabio@hyper.jobs)