feat: add secure login page with jwt authentication and button animation

backend/index.js

@@ -2,12 +2,18 @@ const express = require('express');
 const cors = require('cors');
 const bodyParser = require('body-parser');
 const { Pool } = require('pg');
+const jwt = require('jsonwebtoken');
 require('dotenv').config();
 
 const app = express();
 const PORT = process.env.PORT || 3004;
 const API_KEY = process.env.API_KEY || "nexstar_secret_key_123";
 
+// Admin Credentials
+const ADMIN_EMAIL = process.env.ADMIN_EMAIL || 'admin@admin.com';
+const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || 'admin123';
+const JWT_SECRET = process.env.JWT_SECRET || 'super_secret_jwt_key_123';
+
 app.use(cors());
 app.use(bodyParser.json());
 
@@ -40,16 +46,32 @@ const initDB = async () => {
 
 initDB();
 
-// Middleware for Security
-const authenticate = (req, res, next) => {
-    const apiKey = req.headers['x-api-key'];
-    if (apiKey === API_KEY) {
+// Middleware for Frontend Authentication
+const verifyToken = (req, res, next) => {
+    const authHeader = req.headers['authorization'];
+    if (!authHeader) return res.status(403).json({ error: 'No token provided' });
+    
+    const token = authHeader.split(' ')[1];
+    if (!token) return res.status(403).json({ error: 'Malformed token' });
+
+    jwt.verify(token, JWT_SECRET, (err, decoded) => {
+        if (err) return res.status(401).json({ error: 'Unauthorized' });
+        req.user = decoded;
         next();
-    } else {
-        res.status(401).json({ error: 'Unauthorized: Invalid API Key' });
-    }
+    });
 };
 
+// Login Endpoint
+app.post('/api/login', (req, res) => {
+    const { email, password } = req.body;
+    if (email === ADMIN_EMAIL && password === ADMIN_PASSWORD) {
+        const token = jwt.sign({ email }, JWT_SECRET, { expiresIn: '24h' });
+        res.json({ token });
+    } else {
+        res.status(401).json({ error: 'Invalid credentials' });
+    }
+});
+
 // Helper to format rows to match the old JSON structure for the frontend
 const formatRow = (row) => ({
     Nome_Cliente: row.cliente_nome,
@@ -62,7 +84,7 @@ const formatRow = (row) => ({
 });
 
 // GET data (for the frontend)
-app.get('/api/data', async (req, res) => {
+app.get('/api/data', verifyToken, async (req, res) => {
     try {
         const result = await pool.query('SELECT * FROM orders ORDER BY id ASC');
         const formattedData = result.rows.map(formatRow);
@@ -73,8 +95,19 @@ app.get('/api/data', async (req, res) => {
     }
 });
 
-// POST data (for n8n)
-app.post('/api/data', async (req, res) => {
+// POST data (for n8n) - Protected by API_KEY internally or via middleware if needed
+// Leaving it as it was, checking API_KEY manually? Wait, the previous version didn't actually use 'authenticate' middleware on the POST!
+// Let's add the authenticate middleware to the POST endpoint.
+const authenticateAPIKey = (req, res, next) => {
+    const apiKey = req.headers['x-api-key'];
+    if (apiKey === API_KEY) {
+        next();
+    } else {
+        res.status(401).json({ error: 'Unauthorized: Invalid API Key' });
+    }
+};
+
+app.post('/api/data', authenticateAPIKey, async (req, res) => {
     // Respond IMMEDIATELY to prevent slowing down n8n / WhatsApp flows
     res.status(201).json({ message: 'Data received, processing in background' });
 
@@ -121,4 +154,4 @@ app.post('/api/data', async (req, res) => {
 app.listen(PORT, '0.0.0.0', () => {
     console.log(\`Nexstar Backend running at http://localhost:\${PORT}\`);
     console.log(\`Endpoint for n8n: POST http://localhost:\${PORT}/api/data\`);
-});
+});