agrego validacion por fornt

migracion/src/components/Form.jsx

@@ -26,33 +26,63 @@ const Formulario = ({handleSubmit})=>{
     setformValues({ ...formValues, categoria });
   };
 
-  const _handleSubmit = (e)=>{
-    e.preventDefault()
-    handleSubmit({...formValues,image:inputFileRef.current.files[0]})
-    // console.log(formValues)
-    // console.log(inputFileRef.current.files)
-  }
+  const _handleSubmit = (e) => {
+    e.preventDefault();
+    const nombre = document.getElementById('nombre');
+    const cantidad = document.getElementById('cantidad');
+    const precio = document.getElementById('precio');
+    const imgProducts = document.getElementById('imgProducts');
+    const parrafo = document.getElementById('parrafo');
+    const descripcion = document.getElementById('descripcion');
+
+    let entrar = false;
+    let texto = "";
+    let validarImg = /\.(svg|png|gif|jpg|jpeg)$/i;
+
+    if (nombre.value.length < 4) {
+      texto = `El nombre debe tener al menos 4 caracteres.`;
+      entrar = true;
+    } else if (cantidad.value <= 0) {
+      texto = `La cantidad debe ser mayor a 0`;
+      entrar = true;
+    } else if (precio.value <= 0) {
+      texto = `El precio debe ser mayor a 0`;
+      entrar = true;
+    } else if (!validarImg.test(imgProducts.value)) {
+      texto = `La imagen debe ser un archivo SVG, PNG, GIF o JPG`;
+      entrar = true;
+    } else if (descripcion.value.length < 4) {
+      texto = `La descripción debe ser mayor a 4 caracteres.`;
+      entrar = true;
+    } else if (formValues.categoria === '') {
+      texto = `Por favor, selecciona una categoría.`;
+      entrar = true;
+    }
+
+    if (entrar) {
+      parrafo.innerHTML = texto;
+    } else {
+      handleSubmit({ ...formValues, image: inputFileRef.current.files[0] });
+    }
+  };
 
   return (
   <Form  onSubmit={_handleSubmit}>
       <Form.Group className="mb-3" controlId="formBasicEmail">
         <Form.Label>Nombre</Form.Label>
-        <Form.Control name="name" value={formValues.name} onChange={handleChange} type="text" />
+        <Form.Control id='nombre' name="name" value={formValues.name} onChange={handleChange} type="text" />
         <Form.Text className="text-muted">
           Tipo de producto o nombre referente a ese producto.
         </Form.Text>
       </Form.Group>
-
       <Form.Group className="mb-3" controlId="formBasicPassword">
         <Form.Label>cantidad</Form.Label>
-        <Form.Control name="size"value={formValues.size} onChange={handleChange} type="number"/>
+        <Form.Control id='cantidad' name="size"value={formValues.size} onChange={handleChange} type="number"/>
       </Form.Group>
-
       <Form.Group className="mb-3" controlId="formBasicPassword">
         <Form.Label>Valor por unidad.</Form.Label>
-        <Form.Control name="priceUnitary"value={formValues.priceUnitary} onChange={handleChange} type="number" placeholder="sin putos"/>
+        <Form.Control id='precio' name="priceUnitary"value={formValues.priceUnitary} onChange={handleChange} type="number" placeholder="sin putos"/>
       </Form.Group>
-
       <Form.Group className="mb-3" controlId="formBasicPassword">
         <Form.Label>Categoria.</Form.Label>
         <Dropdown>
@@ -66,19 +96,20 @@ const Formulario = ({handleSubmit})=>{
           </Dropdown.Menu>
         </Dropdown>
       </Form.Group>
-
+      <p id='parrafo'></p>
       <Form.Group controlId="formProduct">
         <Form.Label>Descripción:</Form.Label>
-        <Form.Control as="textarea"name="description" value={formValues.description} onChange={handleChange} placeholder="Chaqueta talla... color..." />
+        <Form.Control id='descripcion' as="textarea"name="description" value={formValues.description} onChange={handleChange} placeholder="Chaqueta talla... color..." />
       </Form.Group>
       <br/>
       <Form.Group className="mb-3" controlId="formBasicPassword">
         <Form.Label>Img del producto</Form.Label>
-        <Form.Control ref={inputFileRef} type="file"/>
+        <Form.Control id='imgProducts' ref={inputFileRef} type="file"/>
       </Form.Group>
       <Button variant="primary" type="submit">
-        Submit
+        Enviar.
       </Button>
+      <p id='parrafo'></p>
     </Form>
   )
 }

migracion/src/components/FormAdmins.jsx

@@ -18,26 +18,50 @@ const FormAddAdmins = ({handleSubmit})=> {
 
   const _handleSubmit = (e)=> {
     e.preventDefault()
-    handleSubmit({...formValues})
+    const nombre = document.getElementById('nombre');
+    const password = document.getElementById('contraseña');
+    const parrafo = document.getElementById('parrafo');
+      let entrar = false;
+      let texto = "";
+      const validarContraseña = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z]).+$/;
+
+      if (nombre.value.length < 4) {
+        texto = `El nombre debe tener minimo cuatro caracteres.`;
+        entrar = true
+      } else if (!validarContraseña.test(password.value)) {
+        texto = `La contraseña debe tener:<br>
+        1.Al menos una letra minúscula<br>
+        2.Al menos una letra mayúscula,<br>
+        3.Al menos un carácter que no sea una letra,<br>
+        4.Cualquier carácter una o más veces.<br>
+        `;
+        entrar = true;
+      }
+      if (entrar) {
+        parrafo.innerHTML = texto;
+      } else {
+        handleSubmit({...formValues});
+      }
   }
   return(
-    <Form  onSubmit={_handleSubmit}>
+    <Form onSubmit={_handleSubmit}>
       <Form.Group className="mb-3" controlId="formBasicEmail">
         <Form.Label>Nombre</Form.Label>
-        <Form.Control name="nameAdmin" value={formValues.nameAdmin} onChange={handleChange} type="text" />
+        <Form.Control id="nombre" name="nameAdmin" value={formValues.nameAdmin} onChange={handleChange} type="text" />
         <Form.Text className="text-muted">
-          Tipo de producto o nombre referente a ese producto.
+          Nombre de la persona.
         </Form.Text>
       </Form.Group>
 
       <Form.Group className="mb-3" controlId="formBasicPassword">
         <Form.Label>Contraseña</Form.Label>
-        <Form.Control name="paswordAdmin"value={formValues.paswordAdmin} onChange={handleChange} type="text"/>
+        <Form.Control id='contraseña' name="paswordAdmin"value={formValues.paswordAdmin} onChange={handleChange} type="text"/>
       </Form.Group>
       <br/>
       <Button variant="primary" type="submit">
-        Submit
+        Enviar.
       </Button>
+      <p id="parrafo"></p>
     </Form>
   )
 }

migracion/src/main.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React,{useEffect} from "react";
 import ReactDOM from "react-dom/client";
 import {createBrowserRouter,RouterProvider} from "react-router-dom";
 import ErrorPage from "./error-page";

migracion/src/services/Admins.jsx

@@ -15,25 +15,6 @@ async function getAdmins() {
   }
 }
 
-// async function saveAdmins(productData) {
-//   try {
-//     console.log(productData);
-//     const formData = new FormData();
-
-//     formData.append('nameAdmin', productData.nameAdmin);
-//     formData.append('paswordAdmin', productData.paswordAdmin);
-
-//     const response = await axios({
-//       url: `${baseUrl}/Admins`,
-//       method: 'POST',
-//       data: formData
-//     });
-
-//     // return response;
-//   } catch (error) {
-//     console.log(error);
-//   }
-// }
 
 async function saveAdmins(productData) {
   try {