step four

src/Components/Modal/PasswordModal.jsx

@@ -9,6 +9,7 @@ import {
 import { StepOne } from '../Password/Steps/one'
 import { StepTwo } from '../Password/Steps/two'
 import { StepTree } from '../Password/Steps/tree'
+import { StepFour } from '../Password/Steps/four'
 
 export function HelpModal (props) {
 
@@ -68,7 +69,11 @@ export function HelpModal (props) {
         },
         {
             label : 'Confirmar',
-            operation: <h1>adios</h1>
+            operation: 
+                <StepFour
+                    handleNext={handleNext} 
+                    handleBack={handleBack} 
+                />
         },
     ];
 

src/Components/Password/Steps/four.js

@@ -0,0 +1,116 @@
+import * as Yup from 'yup';
+// import { useState, useEffect } from 'react';
+import { useFormik, Form, FormikProvider } from 'formik';
+
+import {
+    Box, Button, Stack, Checkbox,
+    TextField, Autocomplete,
+} from '@mui/material';
+
+
+export function StepFour(props) {
+
+
+    const PlazaScheme = Yup.object().shape({
+        puesto: Yup.object().required('Escoge un puesto valido')
+    });
+
+    let {  handleNext, handleBack } = props
+
+    const formik = useFormik({
+        initialValues: {
+            puesto: {}
+        },
+        onSubmit: (fields) => {
+            console.log('SUBMIT > ',fields)
+            handleNext()
+        },
+        validationSchema: PlazaScheme,
+    });
+
+    const {errors, touched, handleSubmit, getFieldProps, setValues } = formik;
+
+    return (
+        <FormikProvider style={{ padding : 25 }} value={formik}>
+            <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+                <Stack spacing={2}>
+
+
+                    <Box
+                        component="form"
+                        sx={{
+                            '& .MuiTextField-root': { m: 1, width: '25ch' },
+                        }}
+                        noValidate
+                        autoComplete="off"
+                    >
+                        <div>
+                            <TextField
+                                required
+                                id="outlined-required"
+                                label="Required"
+                                defaultValue="Hello World"
+                                />
+                            <TextField
+                                disabled
+                                id="outlined-disabled"
+                                label="Disabled"
+                                defaultValue="Hello World"
+                                />
+                            <TextField
+                                id="outlined-password-input"
+                                label="Password"
+                                type="password"
+                                autoComplete="current-password"
+                                />
+                            <TextField
+                                id="outlined-read-only-input"
+                                label="Read Only"
+                                defaultValue="Hello World"
+                                InputProps={{
+                                    readOnly: true,
+                                }}
+                                />
+                            <TextField
+                                id="outlined-number"
+                                label="Number"
+                                type="number"
+                                InputLabelProps={{
+                                    shrink: true,
+                                }}
+                                />
+                            <TextField id="outlined-search" label="Search field" type="search" />
+                            <TextField
+                                id="outlined-helperText"
+                                label="Helper text"
+                                defaultValue="Default Value"
+                                helperText="Some important text"
+                                />
+                        </div>
+                    </Box>
+
+                    <Box sx={{ mb: 2 }}>
+                        <div style={{ paddingTop  : 15}}>
+                            <Button
+                                type="submit"
+                                className="registerBtn" 
+                                variant="contained"
+                                sx={{ mt: 1, mr: 1 }}
+                            >
+                                {'Siguiente'}
+                            </Button>
+                            <Button
+                                disabled={false}
+                                onClick={handleBack}
+                                sx={{ mt: 1, mr: 1 }}
+                            >
+                                Regresar
+                            </Button>
+                        </div>
+                    </Box>
+
+                </Stack>
+            </Form>
+        </FormikProvider>
+    );
+}

src/Components/Password/Steps/tree.js

@@ -1,29 +1,120 @@
+import React from 'react'
+import * as Yup from 'yup';
+// import { useState, useEffect } from 'react';
+import { useFormik, Form, FormikProvider } from 'formik';
+
 import {
-    Box, Button, Stack,
-    TextField, Autocomplete
+    Box, Button, Stack, Checkbox,
+    TextField, Autocomplete,
 } from '@mui/material';
 
+import {
+    CheckBox as CheckBoxIcon,
+    CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon
+} from '@mui/icons-material';
+
+const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+const checkedIcon = <CheckBoxIcon fontSize="small" />;
+
 export function StepTree(props) {
-    return(
-        <Box sx={{ mb: 2 }}>
-            <div style={{ paddingTop  : 15}}>
-                <Button
-                    type="submit"
-                    className="registerBtn" 
-                    variant="contained"
-                    sx={{ mt: 1, mr: 1 }}
-                >
-                    {'Siguiente'}
-                </Button>
-                <Button
-                    disabled={false}
-                    onClick={props.handleBack}
-                    sx={{ mt: 1, mr: 1 }}
-                >
-                    Regresar
-                </Button>
-            </div>
-        </Box>
-
-    )
+
+    const PlazaScheme = Yup.object().shape({
+        puesto: Yup.object().required('Escoge un puesto valido')
+    });
+
+    let {  handleNext, handleBack } = props
+
+    const formik = useFormik({
+        initialValues: {
+            puesto: {}
+        },
+        onSubmit: (fields) => {
+            console.log('SUBMIT > ',fields)
+            handleNext()
+        },
+        validationSchema: PlazaScheme,
+    });
+
+    const {errors, touched, handleSubmit, getFieldProps, setValues } = formik;
+
+    return (
+        <FormikProvider style={{ padding : 25 }} value={formik}>
+            <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+                <Stack spacing={2}>
+
+                    <Autocomplete
+                        multiple
+                        id="checkboxes-tags-demo"
+                        options={top100Films}
+                        disableCloseOnSelect
+                        getOptionLabel={(option) => option.label}
+                        onChange={(a,b,c) => {
+                            setValues({
+                                puesto : b[0]
+                            })
+                        }}
+                        renderOption={(props, option, { selected }) => (
+                            <li {...props}>
+                                <Checkbox
+                                    icon={icon}
+                                    checkedIcon={checkedIcon}
+                                    // style={{ marginRight: 8 }}
+                                    checked={selected}
+                                    />
+                                {option.label}
+                            </li>
+                        )}
+                        renderInput={(params) => (
+                            <TextField 
+                                {...getFieldProps('puesto')}
+                                error={Boolean(touched.puesto && errors.puesto)}
+                                helperText={touched.puesto && errors.puesto}
+                                {...params} 
+                                label="Escribe el nombre de la prueba" 
+                                placeholder="Prueba" 
+                            />
+                        )}
+                    />
+
+                    <Box sx={{ mb: 2 }}>
+                        <div style={{ paddingTop  : 15}}>
+                            <Button
+                                type="submit"
+                                className="registerBtn" 
+                                variant="contained"
+                                sx={{ mt: 1, mr: 1 }}
+                            >
+                                {'Siguiente'}
+                            </Button>
+                            <Button
+                                disabled={false}
+                                onClick={handleBack}
+                                sx={{ mt: 1, mr: 1 }}
+                            >
+                                Regresar
+                            </Button>
+                        </div>
+                    </Box>
+
+                </Stack>
+            </Form>
+        </FormikProvider>
+    );
 }
+const top100Films = [
+    { label: 'City of God', year: 2002 },
+    { label: 'Se7en', year: 1995 },
+    { label: 'The Silence of the Lambs', year: 1991 },
+    { label: "It's a Wonderful Life", year: 1946 },
+    { label: 'Life Is Beautiful', year: 1997 },
+    { label: 'The Usual Suspects', year: 1995 },
+    { label: 'Grave of the Fireflies', year: 1988 },
+    { label: 'Paths of Glory', year: 1957 },
+    { label: 'Django Unchained', year: 2012 },
+    { label: 'The Shining', year: 1980 },
+    { label: 'WALL·E', year: 2008 },
+    { label: 'American Beauty', year: 1999 },
+    { label: 'The Dark Knight Rises', year: 2012 },
+];
+
+

src/Components/Password/Steps/two.js

@@ -5,7 +5,7 @@ import { useFormik, Form, FormikProvider } from 'formik';
 
 import {
     Box, Button, Stack, Checkbox,
-    TextField, Autocomplete,
+    TextField, Autocomplete,Select,FormControl,MenuItem,InputLabel
 } from '@mui/material';
 
 import {
@@ -35,6 +35,12 @@ export function StepTwo(props) {
         validationSchema: PlazaScheme,
     });
 
+    const [age, setAge] = React.useState('');
+
+    const handleChange = (event) => {
+        setAge(event.target.value);
+    };
+
     const {errors, touched, handleSubmit, getFieldProps, setValues } = formik;
 
     return (
@@ -42,38 +48,20 @@ export function StepTwo(props) {
             <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
                 <Stack spacing={2}>
 
-                    <Autocomplete
-                        multiple
-                        id="checkboxes-tags-demo"
-                        options={top100Films}
-                        disableCloseOnSelect
-                        getOptionLabel={(option) => option.label}
-                        onChange={(a,b,c) => {
-                            setValues({
-                                puesto : b[0]
-                            })
-                        }}
-                        renderOption={(props, option, { selected }) => (
-                            <li {...props}>
-                                <Checkbox
-                                    icon={icon}
-                                    checkedIcon={checkedIcon}
-                                    // style={{ marginRight: 8 }}
-                                    checked={selected}
-                                    />
-                                {option.label}
-                            </li>
-                        )}
-                        renderInput={(params) => (
-                            <TextField 
-                                {...getFieldProps('puesto')}
-                                error={Boolean(touched.puesto && errors.puesto)}
-                                helperText={touched.puesto && errors.puesto}
-                                {...params} 
-                                label="Checkboxes" placeholder="Favorites" 
-                                />
-                        )}
-                    />
+                    <FormControl fullWidth>
+                        <InputLabel id="demo-simple-select-label">Puestos</InputLabel>
+                        <Select
+                            labelId="demo-simple-select-label"
+                            id="demo-simple-select"
+                            value={age}
+                            label="Puestos"
+                            onChange={handleChange}
+                        >
+                            <MenuItem value={10}>Ten</MenuItem>
+                            <MenuItem value={20}>Twenty</MenuItem>
+                            <MenuItem value={30}>Thirty</MenuItem>
+                        </Select>
+                    </FormControl>
 
                     <Box sx={{ mb: 2 }}>
                         <div style={{ paddingTop  : 15}}>
@@ -101,80 +89,12 @@ export function StepTwo(props) {
     );
 }
 const top100Films = [
-    { label: 'The Shawshank Redemption', year: 1994 },
-    { label: 'The Godfather', year: 1972 },
-    { label: 'The Godfather: Part II', year: 1974 },
-    { label: 'The Dark Knight', year: 2008 },
-    { label: '12 Angry Men', year: 1957 },
-    { label: "Schindler's List", year: 1993 },
-    { label: 'Pulp Fiction', year: 1994 },
-    {
-        label: 'The Lord of the Rings: The Return of the King',
-        year: 2003,
-    },
-    { label: 'The Good, the Bad and the Ugly', year: 1966 },
-    { label: 'Fight Club', year: 1999 },
-    {
-        label: 'The Lord of the Rings: The Fellowship of the Ring',
-        year: 2001,
-    },
-    {
-        label: 'Star Wars: Episode V - The Empire Strikes Back',
-        year: 1980,
-    },
-    { label: 'Forrest Gump', year: 1994 },
-    { label: 'Inception', year: 2010 },
-    {
-        label: 'The Lord of the Rings: The Two Towers',
-        year: 2002,
-    },
-    { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
-    { label: 'Goodfellas', year: 1990 },
-    { label: 'The Matrix', year: 1999 },
-    { label: 'Seven Samurai', year: 1954 },
-    {
-        label: 'Star Wars: Episode IV - A New Hope',
-        year: 1977,
-    },
     { label: 'City of God', year: 2002 },
     { label: 'Se7en', year: 1995 },
     { label: 'The Silence of the Lambs', year: 1991 },
     { label: "It's a Wonderful Life", year: 1946 },
     { label: 'Life Is Beautiful', year: 1997 },
     { label: 'The Usual Suspects', year: 1995 },
-    { label: 'Léon: The Professional', year: 1994 },
-    { label: 'Spirited Away', year: 2001 },
-    { label: 'Saving Private Ryan', year: 1998 },
-    { label: 'Once Upon a Time in the West', year: 1968 },
-    { label: 'American History X', year: 1998 },
-    { label: 'Interstellar', year: 2014 },
-    { label: 'Casablanca', year: 1942 },
-    { label: 'City Lights', year: 1931 },
-    { label: 'Psycho', year: 1960 },
-    { label: 'The Green Mile', year: 1999 },
-    { label: 'The Intouchables', year: 2011 },
-    { label: 'Modern Times', year: 1936 },
-    { label: 'Raiders of the Lost Ark', year: 1981 },
-    { label: 'Rear Window', year: 1954 },
-    { label: 'The Pianist', year: 2002 },
-    { label: 'The Departed', year: 2006 },
-    { label: 'Terminator 2: Judgment Day', year: 1991 },
-    { label: 'Back to the Future', year: 1985 },
-    { label: 'Whiplash', year: 2014 },
-    { label: 'Gladiator', year: 2000 },
-    { label: 'Memento', year: 2000 },
-    { label: 'The Prestige', year: 2006 },
-    { label: 'The Lion King', year: 1994 },
-    { label: 'Apocalypse Now', year: 1979 },
-    { label: 'Alien', year: 1979 },
-    { label: 'Sunset Boulevard', year: 1950 },
-    {
-        label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
-        year: 1964,
-    },
-    { label: 'The Great Dictator', year: 1940 },
-    { label: 'Cinema Paradiso', year: 1988 },
-    { label: 'The Lives of Others', year: 2006 },
     { label: 'Grave of the Fireflies', year: 1988 },
     { label: 'Paths of Glory', year: 1957 },
     { label: 'Django Unchained', year: 2012 },
@@ -182,49 +102,4 @@ const top100Films = [
     { label: 'WALL·E', year: 2008 },
     { label: 'American Beauty', year: 1999 },
     { label: 'The Dark Knight Rises', year: 2012 },
-    { label: 'Princess Mononoke', year: 1997 },
-    { label: 'Aliens', year: 1986 },
-    { label: 'Oldboy', year: 2003 },
-    { label: 'Once Upon a Time in America', year: 1984 },
-    { label: 'Witness for the Prosecution', year: 1957 },
-    { label: 'Das Boot', year: 1981 },
-    { label: 'Citizen Kane', year: 1941 },
-    { label: 'North by Northwest', year: 1959 },
-    { label: 'Vertigo', year: 1958 },
-    {
-        label: 'Star Wars: Episode VI - Return of the Jedi',
-        year: 1983,
-    },
-    { label: 'Reservoir Dogs', year: 1992 },
-    { label: 'Braveheart', year: 1995 },
-    { label: 'M', year: 1931 },
-    { label: 'Requiem for a Dream', year: 2000 },
-    { label: 'Amélie', year: 2001 },
-    { label: 'A Clockwork Orange', year: 1971 },
-    { label: 'Like Stars on Earth', year: 2007 },
-    { label: 'Taxi Driver', year: 1976 },
-    { label: 'Lawrence of Arabia', year: 1962 },
-    { label: 'Double Indemnity', year: 1944 },
-    {
-        label: 'Eternal Sunshine of the Spotless Mind',
-        year: 2004,
-    },
-    { label: 'Amadeus', year: 1984 },
-    { label: 'To Kill a Mockingbird', year: 1962 },
-    { label: 'Toy Story 3', year: 2010 },
-    { label: 'Logan', year: 2017 },
-    { label: 'Full Metal Jacket', year: 1987 },
-    { label: 'Dangal', year: 2016 },
-    { label: 'The Sting', year: 1973 },
-    { label: '2001: A Space Odyssey', year: 1968 },
-    { label: "Singin' in the Rain", year: 1952 },
-    { label: 'Toy Story', year: 1995 },
-    { label: 'Bicycle Thieves', year: 1948 },
-    { label: 'The Kid', year: 1921 },
-    { label: 'Inglourious Basterds', year: 2009 },
-    { label: 'Snatch', year: 2000 },
-    { label: '3 Idiots', year: 2009 },
-    { label: 'Monty Python and the Holy Grail', year: 1975 },
 ];
-
-