Adicionando a pagina de registro

Author: Bruno Bach

web/src/assets/images/icons/invisivel.svg

@@ -1,18 +1,30 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 
 import Input from "../../components/Input";
+import purpleHeartIcon from '../../assets/images/icons/purple-heart.svg';
+
+import logoImg from "../../assets/images/logo.svg";
 
 import "./styles.css";
 
 function Login() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [remember, setRemember] = useState("");
+
+  useEffect(() => {
+    console.log(remember);
+  }, [remember]);
+
   return (
     <div id="page-login">
       <div className="page-login-logo" />
 
       <div className="page-login-form">
+      <div className="top-bar-login">
+          <img src={logoImg} alt="Proffy" />
+        </div>
         <form>
           <h2>Fazer login</h2>
           <Input
@@ -22,16 +34,24 @@ function Login() {
             value={email}
             onChange={(e) => setEmail(e.target.value)}
           />
+
           <Input
             typeinput="password"
             name="password"
             label="Senha"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
+            className="password-input"
           />
+
           <div className="remember-password">
-            <input type="checkbox" id="remember-check" name="remember-check" />
-            <label htmlFor="remember-check">Lembrar senha</label>
+            <input
+              type="checkbox"
+              id="remember-check"
+              name="remember-check"
+              onChange={(e) => setRemember(e.target.value)}
+            />
+            <label htmlFor="remember-check">Lembrar-me</label>
             <a href="">Esqueci minha senha</a>
           </div>
           <button
@@ -41,6 +61,16 @@ function Login() {
           >
             Entrar
           </button>
+
+          <div className="form-footer">
+            <h2>Nao tem conta?</h2>
+            <span>É de graça</span>
+            <img src={purpleHeartIcon} alt="Coração Roxo" />
+          </div>
+          <Link to="/register">
+          Cadastre-se Agora
+          </Link>
+          
         </form>
       </div>
     </div>

web/src/assets/images/icons/visao.svg

@@ -14,6 +14,17 @@
   width: 100vw;
   height: 100vh;
 }
+.top-bar-login {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.top-bar-login img {
+  margin: 10px 20px 0 0;
+  width: 150px;
+  height: 50px;
+}
 .page-login-form form h2 {
   font: 700 2.5rem Archivo;
   color: var(--color-text-base);
@@ -28,39 +39,37 @@
 .page-login-form form {
   display: flex;
   flex-direction: column;
-  margin-top: 30%;
+  margin-top: 20%;
   margin-left: 25%;
   width: 50%;
   justify-self: center;
   align-self: center;
 }
 
 .remember-password {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
 }
 .remember-password label {
-    margin-right: 40px;
-    margin-left: -50px;
-    font: 400 1.8rem Archivo;
-    color: var(--color-text-base);
+  margin-right: 40px;
+  margin-left: -50px;
+  font: 400 1.8rem Archivo;
+  color: var(--color-text-base);
 }
 
 .remember-password a {
-    font: 400 1.8rem Archivo;
-    outline: 0;
-    color: var(--color-text-base);
-    text-decoration: none;
+  font: 400 1.8rem Archivo;
+  outline: 0;
+  color: var(--color-text-base);
+  text-decoration: none;
 }
 
 #remember-check {
-    width: 40px;
-    height: 20px;
+  width: 40px;
+  height: 20px;
 }
 
-
-
 .page-login-form form button {
   height: 5.6rem;
   border: 0;
@@ -84,3 +93,19 @@
   color: var(--color-button-text);
   cursor: pointer;
 }
+
+.form-footer {
+  display: flex;
+  margin-top: 40%;
+}
+.form-footer h2 {
+  font: 700 1rem Archivo;
+  color: var(--color-text-base);
+  margin-bottom: 10px;
+}
+
+.form-footer span {
+  font: 400 1.5rem Archivo;
+  color: var(--color-text-complement);
+  margin: 10px 5px 0 30%;
+}

web/src/assets/images/logo.svg

@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+
+import Input from "../../components/Input";
+
+import logoImg from "../../assets/images/logo.svg";
+import backIcon from "../../assets/images/icons/back.svg";
+
+import "./styles.css";
+
+function Register() {
+  const [name, setName] = useState("");
+  const [lastname, setLastname] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  return (
+    <div id="page-register">
+      <div className="page-register-logo" />
+      <div className="page-register-form">
+        <div className="top-bar-register">
+          <Link to="/home">
+            <img src={backIcon} alt="Voltar" />
+          </Link>
+
+          <img src={logoImg} alt="Proffy" />
+        </div>
+
+        <form>
+          <h2>Cadastro</h2>
+          <legend>Preencha os dados abaixo para começar.</legend>
+
+          <Input
+            typeinput="text"
+            name="name"
+            label="Nome"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+          <Input
+            typeinput="text"
+            name="lastname"
+            label="Sobrenome"
+            value={lastname}
+            onChange={(e) => setLastname(e.target.value)}
+          />
+          <Input
+            typeinput="text"
+            name="email"
+            label="E-mail"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <Input
+            typeinput="password"
+            name="password"
+            label="Senha"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <button
+            className={password && email ? "active" : "disabled"}
+            disabled={email.length <= 1 && password.length <= 1}
+            type="submit"
+          >
+            Concluir cadastro
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default Register;