[#45] Agregada verificacion al login

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.bracketPairColorization.enabled": true,
   "editor.guides.bracketPairs": "active"

src/atoms/Button-primary.jsx

@@ -21,17 +21,15 @@ const ButtonAble = styled.button`
     cursor: not-allowed;
   }
 `;
-const ButtonPrimary = ({text, disable, className}) => {
-  const buttonClick = () => {
-    console.log('Do something');
-  };
+const ButtonPrimary = ({text, disable, className, typeOfButton, handleClick}) => {
+
 
   return disable ? (
     <ButtonAble disabled className={className}>
       {text}
     </ButtonAble>
   ) : (
-    <ButtonAble className={className} onClick={() => buttonClick()}>
+    <ButtonAble className={className} onClick={() => handleClick()} type={typeOfButton}>
       {text}
     </ButtonAble>
   );

src/atoms/Button-secondary.jsx

@@ -26,7 +26,7 @@ const ButtonSecondary = ({text, disable, buttonClick}) => {
   return disable ? (
     <ButtonAble disabled>{text}</ButtonAble>
   ) : (
-    <ButtonAble onClick={() => buttonClick()}>{text}</ButtonAble>
+    <ButtonAble onClick={buttonClick}>{text}</ButtonAble>
   );
 };
 

src/atoms/CoffeeBanner.jsx

@@ -6,9 +6,9 @@ import IconCoffee from '../image/IconCoffee.svg';
 
 const Logo = styled.div`
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem
 `;
 
 const LogoIcon = styled.img`

src/molecules/ChoosePayment.jsx

@@ -21,6 +21,10 @@ const SubHeaderSection = styled.div`
 `;
 
 export default function ChoosePayment() {
+  function handleClick(){
+    console.log("payment")
+  }
+
   return (
     <>
       <HeaderSection>
@@ -29,15 +33,15 @@ export default function ChoosePayment() {
       </HeaderSection>
 
       <SubHeaderSection>
-        <ButtonSecondary text={'tarjeta'} />
+        <ButtonSecondary text={'tarjeta'} buttonClick={() => handleClick()}/>
         <ButtonSecondary text={'efectivo'} />
       </SubHeaderSection>
 
       <CardPayment />
 
       <SubHeaderSection>
         <ButtonSecondary text={'cancelar'} />
-        <ButtonPrimary text={'pagar'} />
+        <ButtonPrimary text={'pagar'} handleClick={() => console.log("payment")} />
       </SubHeaderSection>
       {/* <Buttons /> */}
     </>

src/molecules/Header.jsx

@@ -8,15 +8,17 @@ import {TopMenu} from './TopMenu';
 const Container = styled.div`
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-evenly;
   padding: 0 2rem;
 `;
 
 export const Header = () => {
   return (
+    <>
     <Container>
       <CoffeeBanner />
       <TopMenu />
     </Container>
+    </>
   );
 };

src/molecules/LoginForm.jsx

@@ -1,11 +1,11 @@
-import React, {useState} from 'react';
-import styled from '@emotion/styled';
+import React, { useState } from "react";
+import styled from "@emotion/styled";
 
-import InputField from '../atoms/InputField';
-import Label from '../atoms/Label';
-import ButtonPrimary from '../atoms/Button-primary';
-import InputEmail from '../atoms/InputEmail';
-import InputPassword from '../atoms/InputPassword';
+import InputField from "../atoms/InputField";
+import Label from "../atoms/Label";
+import ButtonPrimary from "../atoms/Button-primary";
+import InputEmail from "../atoms/InputEmail";
+import InputPassword from "../atoms/InputPassword";
 
 const Container = styled.div`
   display: flex;
@@ -20,20 +20,56 @@ const LoginButtonStyled = styled(ButtonPrimary)`
 `;
 
 export const LoginForm = (className) => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  function validateEmail(emailToValidate) {
+    const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+    if (!emailRegex.test(emailToValidate)) {
+      console.log("El email debe contener un @ y .com");
+    }
+  }
+
+  function validatePassword(passwordToValidate) {
+    const passwordRegex = /[0-9]/;
+    if (
+      passwordToValidate.length < 5 &&
+      (typeof passwordToValidate == `string` ||
+        !passwordRegex.test(passwordToValidate))
+    ) {
+      console.log("La contraseña debe tener al menos 5 caracteres y un numero");
+    }
+  }
+
+  function handleClick() {
+    event.preventDefault();
+    validateEmail(email);
+    validatePassword(password);
+  }
 
   return (
     <Container className={className}>
-      <InputField>
-        <Label>Email</Label>
-        <InputEmail name="email" setValue={setEmail} value={email} />
-      </InputField>
-      <InputField>
-        <Label>Password</Label>
-        <InputPassword name="password" setValue={setPassword} value={password} />
-      </InputField>
-      <LoginButtonStyled disable={false} text={'Ingresar'} />
+      <form>
+        <InputField>
+          <Label>Email</Label>
+          <InputEmail name="email" setValue={setEmail} value={email} />
+        </InputField>
+        <InputField>
+          <Label>Password</Label>
+          <InputPassword
+            name="password"
+            setValue={setPassword}
+            value={password}
+          />
+        </InputField>
+
+        <LoginButtonStyled
+          disable={false}
+          text={"Ingresar"}
+          typeOfButton={`submit`}
+          handleClick={handleClick}
+        />
+      </form>
     </Container>
   );
 };

src/organisms/Order.jsx

@@ -41,6 +41,7 @@ const Footer = styled.div`
   margin: 2rem 0;
 `;
 
+
 export const Order = ({orderNumber, orderProducts, clearProducts}) => {
   const handleDeleteItem = () => {};
 
@@ -50,7 +51,7 @@ export const Order = ({orderNumber, orderProducts, clearProducts}) => {
     <Container>
       <Header>
         <H2>Orden N. {orderNumber}</H2>
-        <ButtonSecondary buttonClick={() => clearProducts()} disable={false} text={'Vaciar'} />
+        <ButtonSecondary buttonClick={clearProducts()} disable={false} text={'Vaciar'} />
       </Header>
 
       <Items>