PR: tech-challenges-front

src/App.css

@@ -0,0 +1,87 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
+
+:root{
+    --white: #fff ;
+    --black: #000000;
+    --blue: #1C87C9;
+    --yellow: #F6DC01;
+    --green: #7FB445;
+    --grey: #f9f9f9;
+}
+
+.loginForm {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+}
+
+.header{
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+h2 {
+    text-align: center;
+}
+
+label {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+}
+
+img {
+    display: block;
+    margin: auto;
+    width: 200px;
+    height: auto;
+    margin-bottom:20px;
+}
+
+.loginForm .message {
+    color: red;
+    font-size: 14px;
+    padding-top: 0;
+    text-align: center;
+    margin: 0 auto;
+}
+
+input {
+    display: block;
+    text-align: center;
+    margin: 0 auto;
+    width: 85%;
+    height: 2em;
+    margin-bottom: 20px;
+    padding-left: 20px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+
+}
+
+button {
+    display: block; 
+    text-align: center;
+    margin: 0 auto;
+    margin-top: 5px;
+    width: 60%; 
+    height: 2em;
+    font-size: 16px;
+    font-weight: bold;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #1C87C9;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.3s; 
+}
+
+button:hover{
+    background-color: #7FB445;
+}
+

src/App.jsx

@@ -1,11 +1,62 @@
 import './App.css';
+import React, { useState, useEffect } from 'react'; // Importa o hook { useState } e { useEffect } que permite adicionar estado a componentes da funçao 
+import credentials from './credentials.json'; // Importa o arquivo com as credenciais estabelecidas
+
+
+
+function Login () {
+
+  //useState evita um infinite loop - update o input quando ele muda
+  const [username, setUsername] = useState(""); //aceita um default value e retorna um array de 2 valores, o username digitado e uma funçao
+  const [password, setPassword] = useState("");
+  const [message, setMessage] = useState("");
+
+  // useEffect verifica as credenciais e ve se elas match com a do arquivo credentials.json
+  useEffect(() => {
+   console.log(credentials); 
+  }, []); // [] está vazio para afzer com que useEffect seja executado uma vez
+
+  function handleSubmit(event) { // handleSubmit - funçao de java chamada quando um formulário é enviado (handleClick é usada para definir uma função que é chamada quando um elemento for clicado)
+    event.preventDefault();
+
+    // verifica se o usuario e a senha correspondem ás credenciais do arquivo credentials.json
+    const credencialValida = credentials.some(credencial => {
+      return credencial.username === username && credencial.password === password; // && - indicates that both conditions needs to be satisfied
+    });
+
+    if (username === "" || password === "") {
+      setMessage('Please, fill out all fields!');
+    } else if (credencialValida ){
+      setMessage('Information Authenticated');
+    } else {
+      setMessage('Incorrect Username or Password');
+    }
+  }
+
+
 
-function App() {
   return (
-    <div className="App">
-      <text>Faça suas mudanças em App.tsx e App.css</text>
+    <>
+    <div className="loginForm">
+      <header className="header"/>
+        <img src="https://invision-bucket.s3.us-east-1.amazonaws.com/monthly_2023_06/BRASA_Logo_horizontalPRETAPNG.png.21df0f6d75a657d0effa06046c9d542d.png.966f798a5ce47f6e14ac58356cbdc783.png" alt="Logo"/>
+      <h2>Login Information:</h2>
+      <form onSubmit={handleSubmit}>
+        <label htmlFor = "username"> Enter Username: </label>
+        <input type="text" id="username" placeholder="username" value={username} onChange={e => setUsername(e.target.value)}></input> {/* onChange - acionado toda vez que o valor do formulario é alterado pelo usuário */}
+        <label htmlFor="password"> Password: </label>
+        <input type="password" id="password" name="password" placeholder="password" value={password} onChange={e => setPassword(e.target.value)}></input> {/* e - parâmetro que representa o evento de mudança */}
+        <div className="message"><h4>{message}</h4></div>
+        <button className="btn" >Login</button> 
+      </form>
+
     </div>
+
+
+
+
+    </>
   );
 }
 
-export default App;
+export default Login;