3. Estrutura da aplicação

O Cat UI possui uma estrutura inicial, onde será disponibilizada toda a "casca" necessária para sua aplicação, como:

• Sistema de autenticação JWT ou OpenID;

• Sistema de Notificações com PushNotification (Não notifica com a aba ou browser fechados);

• SideBar Menu;

• Modo Claro e Noturno (Sincroniza com o tema padrão do usuário no navegador);

• Definição de Logotipo (Modo claro e noturno);

Uso

1. Configurando environment

O Cat UI possui uma interface de environment própria, onde fornece configurações de segurança e nomeação de variáveis no localStorage.

import { CatEnvironmentInterface } from "@catrx/ui/common";

export const environment: CatEnvironmentInterface = {
  production: false,
  storageTokenName: 'app-example-token'
};

2. Importando módulo principal

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CatUiModule } from '@catrx/ui';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [CatUiModule.forRoot(environment), AppRoutingModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. Configurando app.component

ATENÇÃO

O token deve possuir o atributo login para que o nome desejado apareça no menu do usuário.

login.component.ts

import { Component } from '@angular/core';
import { CatLogotypeApp, CatTokenService } from '@catrx/ui';
import { CatFormModule, CatFormService } from '@catrx/ui/form';
import {
  CatDynamicComponentDataInterface,
  CatDynamicComponentModule,
} from '@catrx/ui/dynamic-component';
import { Observable } from 'rxjs';
import { CatFormBase } from '@catrx/ui/common';
import { CommonModule } from '@angular/common';
import { CatButtonModule } from '@catrx/ui/button';

@Component({
  standalone: true,
  imports: [
    CommonModule,
    CatDynamicComponentModule,
    CatFormModule,
    CatButtonModule,
  ],
  template: `
    <form class="login-content" (submit)="submit($event)">
      <cat-dynamic-component class="logotype" [component]="data" />

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

      <button
        catButton="primary"
        [showLoader]="submitLoader$ | async"
        class="w-100"
        type="submit"
      >
        Entrar
      </button>
    </form>
  `,
  styles: [
    '.login-content { width: 250px; }',
    '.logotype { display: flex; justify-content: center; margin: 0 0 40px; } ',
  ],
})
export class LoginComponent
  extends CatFormBase
  implements CatDynamicComponentDataInterface
{
  data: CatLogotypeApp;

  loginFormConfig = this.formService
    .build()
    .text('Usuário', 'login', (builder) =>
      builder.focus().setRequired().generate()
    )
    .password('Senha', 'password', (builder) =>
      builder.setRequired().generate()
    )
    .onSubmit(
      (data) =>
        new Observable((observe) => {
          setTimeout(() => {
            this.tokenService.setDecodedToken(data, 'demo');
            observe.next();
            observe.complete();
          }, 1000);
        })
    )
    .generate();

  constructor(
    private formService: CatFormService,
    private tokenService: CatTokenService
  ) {
    super();
  }
}

app.component.ts

import { Component } from '@angular/core';
import { CatAppService } from '@catrx/ui';
import { UserService } from './shared/services/user/user.service';
import { LoginComponent } from './login.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  appConfig = this.appService
    .build('Cat UI', {    
      autoAuth: false,
      jwt: {
        loginComponent: LoginComponent
      },
      onAuth: (decodedToken) => this.userService.getMenu(decodedToken),
    })
    .setLogotype({
      default: '../assets/logotype.svg',
      defaultForUncollapse: '../assets/logo.svg',
      negative: '../assets/logotype-negative.svg',
      negativeForUncollapse: '../assets/logo-negative.svg',
    })
    .enableDarkMode()
    .generate();

  constructor(
    private appService: CatAppService,
    private userService: UserService) {}
}

app.component.html

<cat-app-container [config]="appConfig">
  <ng-container router-container>
    <router-outlet></router-outlet>
  </ng-container>
</cat-app-container>