Construindo um Sistema de Cadastro e Login Full Stack

Introdução

• Neste vídeo, vamos construir um sistema de cadastro e login.
• O foco de hoje é a construção do front-end com Angular.
• No próximo vídeo, construíremos o back-end para cadastro e autenticação dos usuários.
• Serão construídas as telas de login e cadastro, com tratamento de erros e sucessos nas requisições enviadas para o back-end.

Preparação do Projeto

Configuração Inicial

• Mostrar a interface no Figma: login com e-mail e senha, cadastro com nome, e-mail e senha.
• Abrir o terminal e verificar se o Node está instalado (node --version).
• Caso não tenha, instalar o Node (tutorial na descrição do vídeo).
• Instalar o Angular de forma global: npm install -g @angular/cli.
• Iniciar o projeto Angular: ng new login-page.
• Configurações do projeto:
  • Nome do projeto: login-page
  • Formato de stylesheets: SCSS
  • Server-side rendering: Não
• Entrar na pasta do projeto: cd login-page
• Abrir o VS Code na pasta do projeto: code .
• Confirmar os autores do projeto e iniciar o projeto: npm start.

Limpeza do Projeto Inicial

• Remover conteúdo inicial do app.component.html e app.component.css.
• Manter apenas <router-outlet></router-outlet> no app.component.html.
• Testar o funcionamento inicial com um <h1>Oi</h1>.

Criação dos Componentes

Default Login Layout

• Criar o layout para telas de login e cadastro.
• Exibir o layout no Figma e verificar os componentes comuns entre login e cadastro.
• Estrutura básica do layout com Angular (ng generate component): ng g c components/default-login-layout.
• Estrutura HTML inicial:

  <div class="main">
    <div class="form-section">
      <img src="" alt="Logo">
      <h2>{{ title }}</h2>
      <form>
        <!-- Inputs do formulário -->
      </form>
      <div class="button-wrapper">
        <button class="primary-button">{{ primaryButtonText }}</button>
        <div class="divider">
          <div></div>
          <span>or</span>
          <div></div>
        </div>
        <button class="secondary-button">{{ secondaryButtonText }}</button>
      </div>
    </div>
    <div class="main-section">
      <img src="assets/svg/main-illustration.svg" alt="Main Illustration">
    </div>
  </div>
  

Página de Login

• Criar componente de página de login: ng g c pages/login.
• Configurar o roteamento para a página de login.

Criação do Formulário de Login

• Importar ReactiveFormsModule e configurar formulário reativo.
• Estruturar o formulário no login.component.ts e login.component.html.
• Criação do componente de input primário: ng g c components/primary-input.

  <input [formControlName]="formName" [type]="type" [placeholder]="placeholder">
  <label for="{{ formName }}">{{ label }}</label>
  <ng-content></ng-content>
  

• Configurar validação e mensagem de erro nos inputs.

Estilização dos Componentes

Variáveis de Estilo CSS

• Criar arquivo de variáveis de estilo em SCSS (_variables.scss), contendo cores e tamanhos usados na aplicação.
• Importar as variáveis nos componentes necessários.

Estilização do Default Login Layout

• Configurar layout flexível com display: flex, flex-direction, align-items, e justify-content.
• Estilizar a aparência dos botões e inputs.

Estilização dos Inputs

• Configurar estilos globais e específicos para inputs.
• Adicionar ícones nos inputs e configurar espaçamento e alinhamento.

Interação com o Back-end

Serviço de Login

• Criar serviço para login (ng generate service services/login).
• Configurar HttpClient no serviço e no módulo principal.
• Implementar método de login no serviço e configurar interceptação de tokens.

Configuração de Toasters

• Instalar biblioteca de toasts: ng add ngx-toastr.
• Configurar e usar toasts para mostrar mensagens de sucesso e erro.

Página de Cadastro

Criação da Página de Cadastro

• Reaproveitar estrutura da página de login para criar a página de cadastro: ng g c pages/signup.
• Adicionar campo de confirmação de senha e validações específicas.
• Configurar roteamento para página de cadastro.
• Implementar lógica de navegação entre login e cadastro.

Conclusão

• Página de login e cadastro prontas no front-end.
• Próximo vídeo: construção do back-end para integração com o front-end.