# Whitelabels



# Implementação de Novos Whitelabels

Os Whitelabels são interfaces que sobrepõem o Console com a identidade visual de empresas parceiras, possuindo funcionalidades e acessos especiais.

[Lista completa dos whitelabels](https://console4.oystr.com.br/cp/whitelabels)

#### **Implementação de Novos Whitelabels**

A criação de Whitelabels envolve um trabalho conjunto entre a **Empresa Parceira** e o time de **Front-end**.

- **Responsabilidade do Parceiro:** Apontamento CNAME do endereço para o subdomínio Oystr e fornecimento dos arquivos de configuração e cores (especificações em anexo).
- **Pré-requisito:** O CNAME deve estar propagado antes de iniciar a configuração do Nginx/HTTPS.

##### 1. Configurações do Tema

 Os arquivos de configuração são armazenados no [Cloud Storage](https://console.cloud.google.com/storage/browser/oystr-console-configuration/whitelabels?project=oystr-cloud-test&pageState=(%22StorageObjectListTable%22:(%22f%22:%22%255B%255D%22))).

**Passo 1: Criação da Pasta de Configurações**

1. Crie uma pasta com o nome do whitelabel em `camelCase`.
2. Adicione este mesmo nome no arquivo `<a href="https://storage.googleapis.com/oystr-console-configuration/whitelabels/partners.json">partners.json</a>`.

**Passo 2: Arquivo de opções** Crie um arquivo `options.json` dentro da pasta. Todas as opções de tema são guardadas aqui. *Principais campos:*

1. `id`: Nome do whitelabel em `camelCase` (deve ser idêntico ao nome da pasta e ao registro em `partners.json`).
2. `name`: Nome de exibição do whitelabel.
3. `url`: URL final do whitelabel.
4. `assets`:
    
    
    - `logos`: Array com a URL de cada logo.
    - `favicon`: URL do favicon.
5. `colors`:
    
    
    - `gradient`: Cores de background da tela de login (preferência por cores do tema).
    - `primary`: Equivale ao *Primary* do modelo.
    - `primaryText`: Equivale ao *Text* do modelo.
    - `primaryDetails`: Equivale ao *PrimaryDetails* do modelo.
    - `secondary`: Equivale ao *Secondary* do modelo.
    - `custom`: Reúne uma série de opções customizadas de cores.
6. `options`: Campo legado (ignorar).

> As demais cores podem ser mantidas conforme o exemplo. Em casos específicos, podem ser alteradas para adaptação do tema

**Passo 3: Upload dos Arquivos** Faça o upload dos arquivos de configuração seguindo estritamente esta convenção de nomes:

- `logo-01.svg`
- `logo-02.svg`
- `logo-03.svg` (opcional)
- `favicon.svg`

> Se o formato do arquivo for diferente (ex: .png), lembre-se de adaptar o caminho dentro do `options.json`

##### 1. Configuração do Nginx

O Nginx deve ser configurado no servidor **Oystr 4 (Prod)**.

**Passo 1: Arquivo de Nginx** Crie um arquivo de configuração em `/etc/nginx/sites-available` com base na referência. O nome do arquivo deve ser o mesmo usado no Google Storage.

*Campos para substituição:*

- `server_name`: Substituir pela URL do whitelabel.
- `sub_filter`: Substituir por `'<server_name>' '{id do whitelabel}'`.

**Passo 2: Criar Link Simbólico** Crie um link simbólico na pasta `sites-enabled` apontando para o arquivo criado.

<div _ngcontent-ng-c3098535048="" class="code-block ng-tns-c3098535048-435 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" id="bkmrk-bash" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_35ebca6b5f590662","c_181c2bc77d344ea6",null,"rc_d3aa2716bb575f99",null,null,"pt",null,1,null,null,1,0]]"><div _ngcontent-ng-c3098535048="" class="code-block-decoration header-formatted gds-title-s ng-tns-c3098535048-435 ng-star-inserted"><span class="ng-tns-c3098535048-435">Bash</span><div _ngcontent-ng-c3098535048="" class="buttons ng-tns-c3098535048-435 ng-star-inserted"><button aria-label="Copy code" class="mdc-icon-button mat-mdc-icon-button mat-mdc-button-base mat-mdc-tooltip-trigger copy-button ng-tns-c3098535048-435 mat-unthemed ng-star-inserted"></button></div></div><div _ngcontent-ng-c3098535048="" class="formatted-code-block-internal-container ng-tns-c3098535048-435"><div _ngcontent-ng-c3098535048="" class="animated-opacity ng-tns-c3098535048-435"></div></div></div>```
sudo ln -s /etc/nginx/sites-available/{id-whitelabel}.conf /etc/nginx/sites-enabled/
```

<div _ngcontent-ng-c3098535048="" class="code-block ng-tns-c3098535048-435 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" id="bkmrk-" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_35ebca6b5f590662","c_181c2bc77d344ea6",null,"rc_d3aa2716bb575f99",null,null,"pt",null,1,null,null,1,0]]"><div _ngcontent-ng-c3098535048="" class="formatted-code-block-internal-container ng-tns-c3098535048-435"><div _ngcontent-ng-c3098535048="" class="animated-opacity ng-tns-c3098535048-435"></div></div></div>**Passo 3: Testar e Recarregar** Verifique se a configuração está válida e recarregue o serviço.<button aria-label="Copy code" class="mdc-icon-button mat-mdc-icon-button mat-mdc-button-base mat-mdc-tooltip-trigger copy-button ng-tns-c3098535048-436 mat-unthemed ng-star-inserted"></button>

 ```
sudo nginx -t
sudo systemctl reload nginx
```

**Passo 4: Executar Certbot (HTTPS)** Após confirmar que o acesso via HTTP funciona, execute o Certbot para gerar o certificado SSL.

<div _ngcontent-ng-c3098535048="" class="code-block ng-tns-c3098535048-437 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" id="bkmrk-bash-1" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_35ebca6b5f590662","c_181c2bc77d344ea6",null,"rc_d3aa2716bb575f99",null,null,"pt",null,1,null,null,1,0]]"><div _ngcontent-ng-c3098535048="" class="code-block-decoration header-formatted gds-title-s ng-tns-c3098535048-437 ng-star-inserted"><span class="ng-tns-c3098535048-437">Bash</span><div _ngcontent-ng-c3098535048="" class="buttons ng-tns-c3098535048-437 ng-star-inserted"><button aria-label="Copy code" class="mdc-icon-button mat-mdc-icon-button mat-mdc-button-base mat-mdc-tooltip-trigger copy-button ng-tns-c3098535048-437 mat-unthemed ng-star-inserted"></button></div></div><div _ngcontent-ng-c3098535048="" class="formatted-code-block-internal-container ng-tns-c3098535048-437"><div _ngcontent-ng-c3098535048="" class="animated-opacity ng-tns-c3098535048-437"></div></div></div>```
sudo certbot --nginx -d {whitelabel-url}
```

<div _ngcontent-ng-c3098535048="" class="code-block ng-tns-c3098535048-437 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" id="bkmrk--1" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_35ebca6b5f590662","c_181c2bc77d344ea6",null,"rc_d3aa2716bb575f99",null,null,"pt",null,1,null,null,1,0]]"><div _ngcontent-ng-c3098535048="" class="formatted-code-block-internal-container ng-tns-c3098535048-437"><div _ngcontent-ng-c3098535048="" class="animated-opacity ng-tns-c3098535048-437"></div></div></div>