Tela de Login

Para a tela de login, utilizaremos um componente stantalone para acoplar a estrutura principal da aplicação conforme apresentado em código nos passos 5 e 6 da estrutura.

Agora iremos configurar o formulário e integrar ao sistema de token do Cat UI

1. Criando UserService

app/shared/user/user.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { CatServiceBase } from '@catrx/ui/common';
import { CatTokenService } from '@catrx/ui/core';
import { CatDatatableDataHttpResponse } from '@catrx/ui/datatable';
import { koala } from '@koalarx/utils';
import { first, Observable } from 'rxjs';
import { Credentials } from './user.interface';

@Injectable({ providedIn: 'any' })
export class UserService extends CatServiceBase {
  constructor(
    httpClient: HttpClient,
    private tokenService: CatTokenService
  ) {
    super(httpClient, 'user');
  }

  public auth(credentials: Credentials) {
    return new Observable(observe => {
      setTimeout(() => {
        this.tokenService.setDecodedToken(
          {
            login: credentials.username,
            expired: koala('now')
              .date()
              .add({ qtd: 1, type: 'days' })
              .getValue(),
          },
          'secret'
        );
        observe.next();
        observe.complete();
      }, 1000);
    }).pipe(first());
  }

  getDatatable(filter: any): Observable<CatDatatableDataHttpResponse<any>> {
    throw new Error('Method not implemented.');
  }
}

2. Implementando LoginComponent

login.component.ts

import { Component } from '@angular/core';
import { CatLogotypeApp } from '@catrx/ui';
import { CatFormModule, CatFormService } from '@catrx/ui/form';
import { CatPrimaryButtonComponent } from '@catrx/ui/button/primary';
import {
  CatDynamicComponentDataInterface,
  CatDynamicComponentModule,
} from '@catrx/ui/dynamic-component';
import { CatFormBase } from '@catrx/ui/common';
import { UserService } from './shared/services/user/user.service';
import { Credentials } from './shared/services/user/user.interface';
import { CommonModule } from '@angular/common';

@Component({
  template: `
    <form class="login-content" (submit)="submit($event)">
      <cat-dynamic-component class="logotype" [component]="data">
      </cat-dynamic-component>

      <cat-form #form [config]="loginFormConfig"> </cat-form>

      <cat-primary-button 
        type="submit" 
        [showLoader]="submitLoader$ | async"  
        class="w-100">
        Entrar
      </cat-primary-button>
    </form>
  `,
  styles: [
    `
      .login-content {
        width: 250px;
      }
      .logotype {
        display: block;
        width: 100px;
        height: 100px;
        margin: 0 auto 20px;
      }
    `,
  ],
  standalone: true,
  imports: [
    CommonModule,
    CatDynamicComponentModule,
    CatFormModule,
    CatPrimaryButtonComponent,
  ],
})
export class LoginComponent
  extends CatFormBase
  implements CatDynamicComponentDataInterface
{
  data: CatLogotypeApp;

  loginFormConfig = this.formService
    .build<Credentials>()
    .text('Usuário', 'username', (builder) => builder.setRequired().generate())
    .password('Senha', 'password', (builder) =>
      builder.setRequired().generate()
    )
    .onSubmit((data) => this.userService.auth(data))
    .generate();

  constructor(
    private formService: CatFormService,
    private userService: UserService
  ) {
    super();
  }
}