|
|
@@ -2,31 +2,28 @@ import React from 'react'
|
|
2
|
2
|
import * as Yup from 'yup';
|
|
3
|
3
|
import { useState } from 'react';
|
|
4
|
4
|
import { useFormik, Form, FormikProvider } from 'formik';
|
|
5
|
|
-import { Icon } from '@iconify/react';
|
|
6
|
5
|
|
|
7
|
6
|
import {
|
|
8
|
7
|
Box, Button,
|
|
9
|
|
- Stack, TextField, IconButton, InputAdornment,
|
|
|
8
|
+ Stack, TextField,
|
|
|
9
|
+ InputLabel,MenuItem,FormControl,Select
|
|
10
|
10
|
} from '@mui/material';
|
|
11
|
11
|
|
|
12
|
|
-import eyeFill from '@iconify/icons-eva/eye-fill';
|
|
13
|
|
-import eyeOffFill from '@iconify/icons-eva/eye-off-fill';
|
|
14
|
|
-// import { V1, V2 } from '../../Utils/HTTP'
|
|
|
12
|
+import { niveles_educativos } from '../Rows'
|
|
15
|
13
|
|
|
16
|
14
|
export function StepOne(props) {
|
|
17
|
15
|
|
|
18
|
|
- const steplen = 2;
|
|
19
|
|
- const index = 0;
|
|
|
16
|
+ const [educativo, setEducativo] = useState('');
|
|
20
|
17
|
|
|
21
|
|
- const [showPassword, setShowPassword] = useState(false);
|
|
22
|
|
- const [showPasswordTwo, setShowPasswordTwo] = useState(false);
|
|
|
18
|
+ const changeNivelEducativo = (event) => {
|
|
|
19
|
+ setEducativo(event.target.value);
|
|
|
20
|
+ };
|
|
23
|
21
|
|
|
24
|
|
- const RegisterSchema = Yup.object().shape({
|
|
25
|
|
- firstName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado largo!').required('Tu nombre es requerido'),
|
|
|
22
|
+ const CandidatoSchema = Yup.object().shape({
|
|
|
23
|
+ firstName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado largo!').required('El nombre es requerido'),
|
|
26
|
24
|
lastName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!').required('El apellido es requerido'),
|
|
27
|
|
- email: Yup.string().email('El correo no es valido').required('Email es requerido'),
|
|
28
|
|
- password: Yup.string().min(5, 'La contraseña debe contener mínimo 5 caracteres').required('la contraseña es requerida'),
|
|
29
|
|
- password_confirm: Yup.string().required('Las contraseñas no coincidien').oneOf([Yup.ref('password'), null], 'Las contraseñas no coincidien')
|
|
|
25
|
+ puesto: Yup.string().required('El puesto es requerido'),
|
|
|
26
|
+ niveles_educativo: Yup.number().required('Selecciona un nivel educativo')
|
|
30
|
27
|
});
|
|
31
|
28
|
|
|
32
|
29
|
let { handleNext, handleBack } = props
|
|
|
@@ -35,14 +32,14 @@ export function StepOne(props) {
|
|
35
|
32
|
initialValues: {
|
|
36
|
33
|
firstName: '',
|
|
37
|
34
|
lastName: '',
|
|
38
|
|
- email: '',
|
|
39
|
|
- password: '',
|
|
40
|
|
- password_confirm: ''
|
|
|
35
|
+ puesto: '',
|
|
|
36
|
+ niveles_educativo: 0,
|
|
41
|
37
|
},
|
|
42
|
38
|
onSubmit: (fields) => {
|
|
|
39
|
+ console.log('SUBMIT > ',fields)
|
|
43
|
40
|
handleNext()
|
|
44
|
41
|
},
|
|
45
|
|
- validationSchema: RegisterSchema,
|
|
|
42
|
+ validationSchema: CandidatoSchema,
|
|
46
|
43
|
});
|
|
47
|
44
|
|
|
48
|
45
|
const {errors, touched, handleSubmit, getFieldProps } = formik;
|
|
|
@@ -58,7 +55,7 @@ export function StepOne(props) {
|
|
58
|
55
|
{...getFieldProps('firstName')}
|
|
59
|
56
|
error={Boolean(touched.firstName && errors.firstName)}
|
|
60
|
57
|
helperText={touched.firstName && errors.firstName}
|
|
61
|
|
- />
|
|
|
58
|
+ />
|
|
62
|
59
|
|
|
63
|
60
|
<TextField
|
|
64
|
61
|
label="Apellidos"
|
|
|
@@ -66,76 +63,59 @@ export function StepOne(props) {
|
|
66
|
63
|
{...getFieldProps('lastName')}
|
|
67
|
64
|
error={Boolean(touched.lastName && errors.lastName)}
|
|
68
|
65
|
helperText={touched.lastName && errors.lastName}
|
|
69
|
|
- />
|
|
|
66
|
+ />
|
|
70
|
67
|
</Stack>
|
|
71
|
68
|
|
|
72
|
69
|
<TextField
|
|
73
|
70
|
fullWidth
|
|
74
|
|
- autoComplete="username"
|
|
75
|
|
- type="email"
|
|
76
|
|
- label="Correo Electrónico"
|
|
77
|
|
- {...getFieldProps('email')}
|
|
78
|
|
- error={Boolean(touched.email && errors.email)}
|
|
79
|
|
- helperText={touched.email && errors.email}
|
|
80
|
|
- />
|
|
81
|
|
-
|
|
82
|
|
- <TextField
|
|
83
|
|
- fullWidth
|
|
84
|
|
- autoComplete="current-password"
|
|
85
|
|
- type={showPassword ? 'text' : 'password'}
|
|
86
|
|
- label="Contraseña"
|
|
87
|
|
- {...getFieldProps('password')}
|
|
88
|
|
- InputProps={{
|
|
89
|
|
- endAdornment: (
|
|
90
|
|
- <InputAdornment position="end">
|
|
91
|
|
- <IconButton edge="end" onClick={() => setShowPassword((prev) => !prev)}>
|
|
92
|
|
- <Icon icon={showPassword ? eyeFill : eyeOffFill} />
|
|
93
|
|
- </IconButton>
|
|
94
|
|
- </InputAdornment>
|
|
95
|
|
- )
|
|
96
|
|
- }}
|
|
97
|
|
- error={Boolean(touched.password && errors.password)}
|
|
98
|
|
- helperText={touched.password && errors.password}
|
|
99
|
|
- />
|
|
|
71
|
+ type="text"
|
|
|
72
|
+ label="Experiencia laboral o puesto"
|
|
|
73
|
+ {...getFieldProps('puesto')}
|
|
|
74
|
+ error={Boolean(touched.puesto && errors.puesto)}
|
|
|
75
|
+ helperText={touched.puesto && errors.puesto}
|
|
|
76
|
+ />
|
|
100
|
77
|
|
|
101
|
|
- <TextField
|
|
102
|
|
- fullWidth
|
|
103
|
|
- type={showPasswordTwo ? 'text' : 'password'}
|
|
104
|
|
- label="Confirma contraseña"
|
|
105
|
|
- {...getFieldProps('password_confirm')}
|
|
106
|
|
- InputProps={{
|
|
107
|
|
- endAdornment: (
|
|
108
|
|
- <InputAdornment position="end">
|
|
109
|
|
- <IconButton edge="end" onClick={() => setShowPasswordTwo((prev) => !prev)}>
|
|
110
|
|
- <Icon icon={showPasswordTwo ? eyeFill : eyeOffFill} />
|
|
111
|
|
- </IconButton>
|
|
112
|
|
- </InputAdornment>
|
|
113
|
|
- )
|
|
114
|
|
- }}
|
|
115
|
|
- error={Boolean(touched.password_confirm && errors.password_confirm)}
|
|
116
|
|
- helperText={touched.password_confirm && errors.password_confirm}
|
|
117
|
|
- />
|
|
118
|
|
-
|
|
119
|
|
-
|
|
120
|
|
- <Box sx={{ mb: 2 }}>
|
|
121
|
|
- <div style={{ paddingTop : 15}}>
|
|
122
|
|
- <Button
|
|
123
|
|
- type="submit"
|
|
124
|
|
- className="registerBtn"
|
|
125
|
|
- variant="contained"
|
|
126
|
|
- sx={{ mt: 1, mr: 1 }}
|
|
127
|
|
- >
|
|
128
|
|
- {index === steplen - 1 ? 'Registrarme' : 'Siguiente'}
|
|
129
|
|
- </Button>
|
|
130
|
|
- <Button
|
|
131
|
|
- disabled={true}
|
|
132
|
|
- onClick={handleBack}
|
|
133
|
|
- sx={{ mt: 1, mr: 1 }}
|
|
134
|
|
- >
|
|
135
|
|
- Regresar
|
|
136
|
|
- </Button>
|
|
137
|
|
- </div>
|
|
138
|
|
- </Box>
|
|
|
78
|
+ <FormControl fullWidth>
|
|
|
79
|
+ <InputLabel id="demo-simple-select-label">Nivel Educativo</InputLabel>
|
|
|
80
|
+ <Select
|
|
|
81
|
+ labelId="demo-simple-select-label"
|
|
|
82
|
+ id="demo-simple-select"
|
|
|
83
|
+ value={educativo}
|
|
|
84
|
+ label="Nivel Educativo"
|
|
|
85
|
+ onChange={changeNivelEducativo}
|
|
|
86
|
+ {...getFieldProps('niveles_educativo')}
|
|
|
87
|
+ error={Boolean(touched.niveles_educativo && errors.niveles_educativo)}
|
|
|
88
|
+ >
|
|
|
89
|
+ {
|
|
|
90
|
+ niveles_educativos.map( ( nivel, index ) => {
|
|
|
91
|
+ return (
|
|
|
92
|
+ <MenuItem key={nivel} value={index}>{nivel}</MenuItem>
|
|
|
93
|
+ )
|
|
|
94
|
+ })
|
|
|
95
|
+ }
|
|
|
96
|
+ </Select>
|
|
|
97
|
+ </FormControl>
|
|
|
98
|
+
|
|
|
99
|
+
|
|
|
100
|
+ <Box sx={{ mb: 2 }}>
|
|
|
101
|
+ <div style={{ paddingTop : 15}}>
|
|
|
102
|
+ <Button
|
|
|
103
|
+ type="submit"
|
|
|
104
|
+ className="registerBtn"
|
|
|
105
|
+ variant="contained"
|
|
|
106
|
+ sx={{ mt: 1, mr: 1 }}
|
|
|
107
|
+ >
|
|
|
108
|
+ {'Siguiente'}
|
|
|
109
|
+ </Button>
|
|
|
110
|
+ <Button
|
|
|
111
|
+ disabled={true}
|
|
|
112
|
+ onClick={handleBack}
|
|
|
113
|
+ sx={{ mt: 1, mr: 1 }}
|
|
|
114
|
+ >
|
|
|
115
|
+ Regresar
|
|
|
116
|
+ </Button>
|
|
|
117
|
+ </div>
|
|
|
118
|
+ </Box>
|
|
139
|
119
|
|
|
140
|
120
|
</Stack>
|
|
141
|
121
|
</Form>
|
amenpunk