# 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](https://doc.catui.igordrangel.com.br/comece-por-aqui/4.-seguranca/openid-opcional);
* 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**.

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

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

#### **2. Importando módulo principal**

```typescript
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

{% hint style="danger" %}
**ATENÇÃO**

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

{% tabs %}
{% tab title="login.component.ts" %}

```typescript
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();
  }
}

```

{% endtab %}

{% tab title="app.component.ts" %}

```typescript
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) {}
}
```

{% endtab %}

{% tab title="app.component.html" %}

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

{% endtab %}
{% endtabs %}