From 396b933997ed343c23be9c3ca68af93fb6b48148 Mon Sep 17 00:00:00 2001
From: Bianca Bastos <biancabsouza23@gmail.com>
Date: Tue, 28 May 2024 05:05:07 -0300
Subject: [PATCH] caminho de tela incial para login criado #38

---
 Fronted/src/App.js                          |  2 +
 Fronted/src/componentes/FormularioLogin.css | 41 +++++++++++++++
 Fronted/src/componentes/FormularioLogin.js  | 57 +++++++++++++++++++++
 Fronted/src/componentes/inicial.js          |  6 ++-
 4 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 Fronted/src/componentes/FormularioLogin.css
 create mode 100644 Fronted/src/componentes/FormularioLogin.js

diff --git a/Fronted/src/App.js b/Fronted/src/App.js
index 5b77460..d4d5e47 100644
--- a/Fronted/src/App.js
+++ b/Fronted/src/App.js
@@ -2,6 +2,7 @@ import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import PaginaInicial from "./componentes/inicial";
 import FormularioCadastro from "./componentes/FormularioCadastro";
+import FormularioLogin from "./componentes/FormularioLogin"; // Importa o componente FormularioLogin
 import MeuPerfil from "./componentes/MeuPerfil";
 import EditPerfil from "./componentes/EditPerfil"; // Importe o componente EditPerfil
 
@@ -11,6 +12,7 @@ function App() {
       <Routes>
         <Route path="/" element={<PaginaInicial />} />
         <Route path="/cadastro" element={<FormularioCadastro />} />
+        <Route path="/login" element={<FormularioLogin />} /> {/* Nova rota */}
         <Route path="/meu-perfil" element={<MeuPerfil />} />
         <Route path="/editar-perfil" element={<EditPerfil />} /> {/* Nova rota */}
       </Routes>
diff --git a/Fronted/src/componentes/FormularioLogin.css b/Fronted/src/componentes/FormularioLogin.css
new file mode 100644
index 0000000..ed5b9a6
--- /dev/null
+++ b/Fronted/src/componentes/FormularioLogin.css
@@ -0,0 +1,41 @@
+/* src/componentes/FormularioLogin.css */
+form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 400px;
+    margin: 50px auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    background-color: #f9f9f9;
+  }
+  
+  div {
+    margin-bottom: 20px;
+  }
+  
+  input {
+    width: 100%;
+    padding: 30px;  /* Aumentar o padding para tornar os campos mais altos */
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+  }
+  
+  button {
+    padding: 30px;  /* Aumentar o padding para tornar o botão mais alto */
+    font-size: 16px;
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  button:hover {
+    background-color: #0056b3;
+  }
+  
\ No newline at end of file
diff --git a/Fronted/src/componentes/FormularioLogin.js b/Fronted/src/componentes/FormularioLogin.js
new file mode 100644
index 0000000..bb6aee4
--- /dev/null
+++ b/Fronted/src/componentes/FormularioLogin.js
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom'; // Importa useNavigate
+import './FormularioLogin.css';
+
+const FormularioLogin = () => {
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+  });
+
+  const navigate = useNavigate(); // Inicializa o useNavigate
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Dados do login enviados:', formData);
+    // Aqui você pode adicionar a lógica para enviar os dados para o servidor
+
+    // Redireciona para a página de perfil após o envio do formulário
+    navigate('/meu-perfil');
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <input
+          type="text"
+          id="username"
+          name="username"
+          placeholder="Nome de usuário"
+          value={formData.username}
+          onChange={handleChange}
+        />
+      </div>
+      <div>
+        <input
+          type="password"
+          id="password"
+          name="password"
+          placeholder="Senha"
+          value={formData.password}
+          onChange={handleChange}
+        />
+      </div>
+      <button type="submit">Entrar</button>
+    </form>
+  );
+};
+
+export default FormularioLogin;
diff --git a/Fronted/src/componentes/inicial.js b/Fronted/src/componentes/inicial.js
index 84afdc0..a0dbfc9 100644
--- a/Fronted/src/componentes/inicial.js
+++ b/Fronted/src/componentes/inicial.js
@@ -11,6 +11,10 @@ function Inicial() {
     navigate("/cadastro");
   };
 
+  const handleLoginClick = () => {
+    navigate("/login");
+  };
+
   return (
     <div>
       <header>
@@ -20,7 +24,7 @@ function Inicial() {
               <img src={logo} alt="Logo da Lelove" width="75" />
             </figure>
           </div>
-          <button className="buttons">Entrar</button>
+          <button className="buttons" onClick={handleLoginClick}>Entrar</button>
         </nav>
       </header>