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();
}
}
Last updated