diff --git a/sitecomlogin/accounts.csv b/sitecomlogin/accounts.csv new file mode 100644 index 0000000..b796ead --- /dev/null +++ b/sitecomlogin/accounts.csv @@ -0,0 +1,4 @@ +email,senha +usuario1@example.com,senha123 +usuario2@example.com,senha456 +usuario3@example.com,senha789 diff --git a/sitecomlogin/index.html b/sitecomlogin/index.html new file mode 100644 index 0000000..1e962d5 --- /dev/null +++ b/sitecomlogin/index.html @@ -0,0 +1,18 @@ + + + + + + Login + + + +

Formulário de Login

+ + + + + + + + diff --git a/sitecomlogin/indextwo.html b/sitecomlogin/indextwo.html new file mode 100644 index 0000000..150a6e5 --- /dev/null +++ b/sitecomlogin/indextwo.html @@ -0,0 +1,13 @@ + + + + + + Página Protegida + + +

Bem-vindo

+

Conteúdo restrito apenas para usuários autorizados.

+ + + diff --git a/sitecomlogin/script.js b/sitecomlogin/script.js new file mode 100644 index 0000000..b8bb5ee --- /dev/null +++ b/sitecomlogin/script.js @@ -0,0 +1,22 @@ +async function login() { + const email = document.getElementById("emailUsuario").value.toLowerCase(); + const senha = document.getElementById("senhaUsuario").value; + + const response = await fetch('accounts.csv'); + const text = await response.text(); + + const parsedCSV = Papa.parse(text, { header: true }); + const usuarios = parsedCSV.data; + + const usuarioAutenticado = usuarios.find(usuario => { + return usuario.email.toLowerCase() === email && usuario.senha === senha; + }); + + if (usuarioAutenticado) { + window.location.href = "indextwo.html"; + } else { + alert("Email ou senha incorretos. Por favor, tente novamente."); + document.getElementById("emailUsuario").value = ''; + document.getElementById("senhaUsuario").value = ''; + } +} diff --git a/sitecomlogin/style.css b/sitecomlogin/style.css new file mode 100644 index 0000000..6ccc46b --- /dev/null +++ b/sitecomlogin/style.css @@ -0,0 +1,22 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + padding: 20px; +} + +input, button { + margin: 10px; + padding: 8px; + font-size: 16px; +} + +button { + background-color: #007bff; + color: white; + border: none; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +}