[#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,13 @@ 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} type={typeOfButton} onClick={handleClick}>
       {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

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

src/atoms/InputEmail.jsx

@@ -12,10 +12,11 @@ const InputEmailStyled = styled.input`
   padding-left: 1rem;
 `;
 
-function InputEmail({name, value, setValue}) {
+function InputEmail({name, value, setValue, placeholder}) {
   return (
     <InputEmailStyled
       name={name}
+      placeholder={placeholder}
       type="email"
       value={value}
       onChange={({target}) => setValue(target.value)}

src/atoms/InputPassword.jsx

@@ -63,15 +63,17 @@ function IconPassword({isVisible, setIsVisible}) {
   );
 }
 
-function InputPassword({name, value, setValue}) {
+function InputPassword({name, value, setValue, placeholder, handleBlur}) {
   const [isVisible, setIsVisible] = React.useState(false);
 
   return (
     <WrapperPassword>
       <InputPasswordStyled
         name={name}
+        placeholder={placeholder}
         type={isVisible ? 'text' : 'password'}
         value={value}
+        onBlur={handleBlur}
         onChange={({target}) => setValue(target.value)}
       />
       <IconPassword isVisible={isVisible} setIsVisible={setIsVisible} />

src/atoms/p.js

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+import colors from '../styles/colors';
+
+export const ErrorParagraph = styled.p`
+  color: ${colors.red};
+  font-size: 1.5em;
+`;

src/molecules/ChoosePayment.jsx

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

src/molecules/Header.jsx

@@ -6,10 +6,9 @@ import {CoffeeBanner} from '../atoms/CoffeeBanner';
 import {TopMenu} from './TopMenu';
 
 const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 2rem;
+  display: grid;
+  grid-template-columns: 5% 35% 30% 30%;
+  grid-template-areas: 'blank banner separator nav';
 `;
 
 export const Header = () => {

src/molecules/LoginForm.jsx

@@ -6,6 +6,7 @@ import Label from '../atoms/Label';
 import ButtonPrimary from '../atoms/Button-primary';
 import InputEmail from '../atoms/InputEmail';
 import InputPassword from '../atoms/InputPassword';
+import {ErrorParagraph} from '../atoms/p';
 
 const Container = styled.div`
   display: flex;
@@ -22,18 +23,67 @@ const LoginButtonStyled = styled(ButtonPrimary)`
 export const LoginForm = (className) => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [emailError, setEmailError] = useState(``);
+  const [passwordError, setPasswordError] = useState(``);
+
+  function validateEmail(emailToValidate) {
+    const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+
+    if (!emailRegex.test(emailToValidate)) {
+      setEmailError(`Asegurese de colocar un email correcto`);
+    } else {
+      setEmailError(``);
+    }
+  }
+
+  function validatePassword(passwordToValidate) {
+    const passwordRegex = /^(?=.*\d).{5,}$/;
+
+    if (!passwordRegex.test(passwordToValidate)) {
+      setPasswordError(`Asegurese de que su contraseña tenga al menos 5 caracteres y un numero`);
+    } else {
+      setPasswordError(``);
+    }
+  }
+
+  function handleClick(event) {
+    validateEmail(email);
+    validatePassword(password);
+    if (passwordError.length == 0 || emailError.length == 0) {
+      event.preventDefault();
+    }
+  }
 
   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 action="/" method="get">
+        <InputField>
+          <Label>Email</Label>
+          <InputEmail
+            name="email"
+            placeholder={'Escriba su email'}
+            setValue={setEmail}
+            value={email}
+          />
+        </InputField>
+        {emailError.length > 0 ? <ErrorParagraph>{emailError}</ErrorParagraph> : <></>}
+        <InputField>
+          <Label>Password</Label>
+          <InputPassword
+            name="password"
+            placeholder={'escriba su contraseña'}
+            setValue={setPassword}
+            value={password}
+          />
+        </InputField>
+        {passwordError.length > 0 ? <ErrorParagraph>{passwordError}</ErrorParagraph> : <></>}
+        <LoginButtonStyled
+          disable={false}
+          handleClick={(event) => handleClick(event)}
+          text={'Ingresar'}
+          typeOfButton={'submit'}
+        />
+      </form>
     </Container>
   );
 };

src/molecules/TopMenu.jsx

@@ -6,8 +6,9 @@ import H3 from '../atoms/H3';
 const Nav = styled.div`
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 4rem;
+  // justify-content: space-between;
+  gap: 5rem;
+  grid-area: nav;
 `;
 
 const NavItem = styled.a`

src/styles/colors.js

@@ -7,6 +7,7 @@ const wordsColor = {
   negro: '#000',
   gris: '#C5C5C5',
   marron: '#5E3E00',
+  rojo: `#fc0339`,
 };
 
 export default {
@@ -18,4 +19,5 @@ export default {
   accent_brown: wordsColor.marron,
   blue: wordsColor.azul,
   gray: wordsColor.gris,
+  red: wordsColor.rojo,
 };