# 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](/comece-por-aqui/4.-seguranca/openid-opcional.md);
* 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.catui.igordrangel.com.br/comece-por-aqui/3.-estrutura-da-aplicacao.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.