https://youtu.be/1by7pqbaJoA?si=CUaKd5YetSAUWFis

A seguir, você encontrará um tutorial detalhado para criar um formulário de login com verificação de credenciais utilizando Express e EJS. Esse exemplo mostrará como separar as responsabilidades entre rotas, controllers e views para criar uma aplicação organizada e escalável.

1. Estrutura do Projeto

Organize os arquivos do seu projeto da seguinte forma:

.
├── controllers/
│   └── authController.js
├── routes/
│   └── authRoutes.js
├── views/
│   ├── login.ejs
│   └── dashboard.ejs
├── public/
│   └── css/
│       └── styles.css
├── server.js
├── .env
└── .gitignore

• controllers/: Contém a lógica de autenticação (verificação das credenciais).
• routes/: Define as rotas para exibição do formulário e processamento do login.
• views/: Armazena as páginas EJS (o formulário de login e uma página de dashboard pós-login).
• public/: Pasta para arquivos estáticos, como CSS para estilização.
• server.js: Configura o Express, define middlewares e registra as rotas.

2. Configurando o Servidor (server.js)

O arquivo principal configura o Express, define o motor de views EJS, os arquivos estáticos e o middleware para processar os dados enviados pelo formulário (URL encoded).

// server.js
const express = require('express');
const path = require('path');
const app = express();

// Configurando o EJS como template engine
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Definindo a pasta de arquivos estáticos (CSS, JS, imagens)
app.use(express.static(path.join(__dirname, 'public')));

// Middleware para processar dados enviados via formulário
app.use(express.urlencoded({ extended: true }));

// Rotas de autenticação
const authRoutes = require('./routes/authRoutes');
app.use('/', authRoutes);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Servidor rodando na porta ${PORT}`);
});

3. Criando o Controller de Autenticação (authController.js)

No controller, definimos a lógica para exibir o formulário de login e para processar a verificação dos dados enviados.

// controllers/authController.js

// Usuário válido (exemplo estático)
const validUser = {
  username: 'admin',
  password: '12345'
};

// Exibe a página de login
exports.showLoginPage = (req, res) => {
  res.render('login', { error: null });
};

// Processa os dados do formulário de login
exports.loginProcess = (req, res) => {
  const { username, password } = req.body;

  // Verifica se os campos foram preenchidos
  if (!username || !password) {
    return res.render('login', { error: 'Preencha todos os campos.' });
  }

  // Verifica as credenciais
  if (username === validUser.username && password === validUser.password) {
    // Em caso de sucesso, renderiza o dashboard
    return res.render('dashboard', { username });
  } else {
    // Em caso de falha, retorna a página de login com mensagem de erro
    return res.render('login', { error: 'Usuário ou senha inválidos.' });
  }
};

Explicação do Controller