From 7301aea8f86c61b6ea8642a96d2c452002e986db Mon Sep 17 00:00:00 2001
From: Joao Maria Araujo do Nascimento <1724026@ifrn.local>
Date: Thu, 11 Jun 2026 22:17:58 -0300
Subject: [PATCH] =?UTF-8?q?Frontend=20in=C3=ADcio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/app.js                            |  3 +++
 backend/package-lock.json                 | 27 +++++++++++++++++++++++
 backend/package.json                      |  1 +
 backend/repositories/usuarioRepository.js |  5 ++++-
 frontend/app.js                           | 20 +++++++++++++++++
 frontend/index.html                       | 25 +++++++++++++++++++++
 6 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 frontend/app.js
 create mode 100644 frontend/index.html

diff --git a/backend/app.js b/backend/app.js
index 27c6ddf..79e15e7 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -1,9 +1,12 @@
 import express from "express";
 import usuarioRouter from "./routers/usuarioRouter.js";
+import cors from "cors";
 
 // Inicialização do Express
 const app = express();
 
+app.use(cors);
+
 // Rota de saúde, utilizada para testar se a API-REST está no ar
 app.get("/health", (req, res) => {
     res.json({
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 5af83c0..eb19b18 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "bcryptjs": "^3.0.3",
+        "cors": "^2.8.6",
         "dotenv": "^17.4.2",
         "express": "^5.2.1",
         "express-validator": "^7.3.2",
@@ -241,6 +242,23 @@
         "node": ">=6.6.0"
       }
     },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -887,6 +905,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
diff --git a/backend/package.json b/backend/package.json
index 6ebfac3..b2e139f 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -12,6 +12,7 @@
   "license": "ISC",
   "dependencies": {
     "bcryptjs": "^3.0.3",
+    "cors": "^2.8.6",
     "dotenv": "^17.4.2",
     "express": "^5.2.1",
     "express-validator": "^7.3.2",
diff --git a/backend/repositories/usuarioRepository.js b/backend/repositories/usuarioRepository.js
index d461160..8b6da89 100644
--- a/backend/repositories/usuarioRepository.js
+++ b/backend/repositories/usuarioRepository.js
@@ -1,7 +1,10 @@
 import {executarSQL} from "../config/database.js";
 
 export async function findAll() {
-    return executarSQL(`select usuario.id, usuario.nome, usuario.email, perfil.nome 
+    return executarSQL(`select usuario.id, 
+                        usuario.nome as usuario_nome, 
+                        usuario.email, 
+                        perfil.nome as perfil_nome 
                 from usuario inner join perfil on 
                 usuario.perfil_id = perfil.id 
                 where usuario.ativo = true`)
diff --git a/frontend/app.js b/frontend/app.js
new file mode 100644
index 0000000..5729d7a
--- /dev/null
+++ b/frontend/app.js
@@ -0,0 +1,20 @@
+async function carregarUsuarios(){
+    const tbody = document.querySelector("#conteudo_tabela_usuarios");
+
+    const resposta = await fetch("http://localhost:5000/api/v1/usuarios");
+    const usuarios = await resposta.json();
+
+    usuarios.forEach(usuario => {
+        const linha = document.createElement("tr");
+        linha.innerHTML = `
+                            <td>${usuario.usuario_nome}</td>
+                            <td>${usuario.email}</td>
+                            <td>${usuario.perfil_nome}</td>
+                          `;
+        tbody.appendChild(linha);
+    });
+}
+
+window.onload = () => {
+    carregarUsuarios();
+};
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..aa67a45
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+    <div>
+        <table>
+            <thead>
+                <th>Nome</th>
+                <th>E-mail</th>
+                <th>Perfil</th>
+            </thead>
+            <tbody id="conteudo_tabela_usuarios">
+
+            </tbody>
+        </table>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>
\ No newline at end of file