login validation schemea

src/Components/Footer.js

@@ -1,6 +1,4 @@
-
-import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
+import { Typography, Link } from '@mui/material'
 
 export default function Footer(props) {
     return (
@@ -14,3 +12,16 @@ export default function Footer(props) {
         </Typography>
     );
 }
+
+export function Copyright(props){
+    return (
+        <Typography variant="body2" color="text.secondary" align="center" {...props}>
+            {'Copyright © '}
+            <Link color="inherit" href="https://mui.com/">
+                GrupoDIT
+            </Link>{' '}
+            {new Date().getFullYear()}
+            {'.'}
+        </Typography>
+    );
+}

src/Pages/Login.jsx

@@ -1,29 +1,31 @@
 import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import CssBaseline from '@mui/material/CssBaseline';
-import TextField from '@mui/material/TextField';
 
-import PersonIcon from '@mui/icons-material/Person';
-import Typography from '@mui/material/Typography';
+import { 
+    Paper, Box, Grid,Link, Checkbox, FormControlLabel, Typography,
+    TextField, CssBaseline, Button, Avatar
+} from '@mui/material'
+
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import {Paper, Box, Grid,Link, Checkbox, FormControlLabel } from '@mui/material'
 
+import PersonIcon from '@mui/icons-material/Person';
 import { useNavigate } from 'react-router-dom'
+import { Copyright } from '../Components/Footer.js'
 import useAuth from '../Auth/useAuth';
 
-function Copyright(props){
-    return (
-        <Typography variant="body2" color="text.secondary" align="center" {...props}>
-            {'Copyright © '}
-            <Link color="inherit" href="https://mui.com/">
-                GrupoDIT
-            </Link>{' '}
-            {new Date().getFullYear()}
-            {'.'}
-        </Typography>
-    );
-}
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+
+const LoginSchema = Yup.object().shape({
+    email : Yup
+    .string()
+    .email('El correo debe ser válido')
+    .required('El correo es requerido'),
+
+    password : Yup
+    .string()
+    .required('El campo contraseña es requerido')
+    .min(6, 'La contraseña debe contener mínimo 6 caracteres')
+})
 
 const theme = createTheme();
 
@@ -32,22 +34,21 @@ export function Login() {
     let auth = useAuth();
     let navigate = useNavigate()
 
-    const handleSubmit = (event) => {
-
-        event.preventDefault();
-        const data = new FormData(event.currentTarget);
+    const formik = useFormik({
+        initialValues: {
+            email: '',
+            password: '',
+        },
+        validationSchema: LoginSchema,
+        onSubmit: (values) => {
+            // alert(JSON.stringify(values, null, 2));
+            // return navigate('/dashboard/home')
+            auth.login(values)
+        },
+    });
 
-        let user = {
-            email: data.get('email'),
-            password: data.get('password'),
-        }
-
-        auth.login(user)
-        return navigate('/dashboard/home')
-    };
 
     React.useEffect(() => {
-        console.log(auth)
         if(auth.isLogged()){
             return navigate('/dashboard/home')
         }    
@@ -88,23 +89,32 @@ export function Login() {
                         <Typography component="h1" variant="h5">
                             Ingresar
                         </Typography>
-                        <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
+
+                        <Box component="form" noValidate onSubmit={formik.handleSubmit} sx={{ mt: 1 }}>
                             <TextField
+                                value={formik.values.email}
+                                onChange={formik.handleChange}
+                                error={formik.touched.email && Boolean(formik.errors.email)}
+                                helperText={formik.touched.email && formik.errors.email}
                                 margin="normal"
                                 required
                                 fullWidth
                                 id="email"
-                                label="Email Address"
                                 name="email"
+                                label="Correo Electrónico"
                                 autoComplete="email"
                                 autoFocus
                             />
                             <TextField
+                                value={formik.values.password}
+                                onChange={formik.handleChange}
+                                error={formik.touched.password && Boolean(formik.errors.password)}
+                                helperText={formik.touched.password && formik.errors.password}
                                 margin="normal"
                                 required
                                 fullWidth
+                                label="Contraseña"
                                 name="password"
-                                label="Password"
                                 type="password"
                                 id="password"
                                 autoComplete="current-password"

src/Pages/PruebaAsignar.jsx

@@ -14,7 +14,8 @@ var ID = idMaker();
 
 function CardPrueba(props){
 
-    let id = ID.next().value * 2105981203;
+    let id = ( parseInt( ID.next().value ) * 210598120309218301923 );
+    console.log("ID >> ", id)
 
     return(
         <Col key={id} md="4">