|
@@ -4,9 +4,9 @@ import { useState } from 'react';
|
4
|
4
|
import { useFormik, Form, FormikProvider } from 'formik';
|
5
|
5
|
import { Icon } from '@iconify/react';
|
6
|
6
|
|
7
|
|
-import {
|
8
|
|
- Box, Button,
|
9
|
|
- Stack, TextField, IconButton, InputAdornment,
|
|
7
|
+import {
|
|
8
|
+ Box, Button,
|
|
9
|
+ Stack, TextField, IconButton, InputAdornment,
|
10
|
10
|
} from '@mui/material';
|
11
|
11
|
|
12
|
12
|
import eyeFill from '@iconify/icons-eva/eye-fill';
|
|
@@ -15,134 +15,135 @@ import eyeOffFill from '@iconify/icons-eva/eye-off-fill';
|
15
|
15
|
|
16
|
16
|
export function RegisterForm(props) {
|
17
|
17
|
|
18
|
|
- const steplen = 2;
|
19
|
|
- const index = 0;
|
20
|
|
-
|
21
|
|
- const [showPassword, setShowPassword] = useState(false);
|
22
|
|
- const [showPasswordTwo, setShowPasswordTwo] = useState(false);
|
23
|
|
-
|
24
|
|
- const RegisterSchema = Yup.object().shape({
|
25
|
|
- firstName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado largo!').required('Tu nombre es requerido'),
|
26
|
|
- 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')
|
30
|
|
- });
|
31
|
|
-
|
32
|
|
- let {client, setClient, handleNext, handleBack } = props
|
33
|
|
-
|
34
|
|
- const formik = useFormik({
|
35
|
|
- initialValues: {
|
36
|
|
- firstName: client.firstName,
|
37
|
|
- lastName: client.lastName,
|
38
|
|
- email: client.email,
|
39
|
|
- password: client.password,
|
40
|
|
- password_confirm: client.password_confirm
|
41
|
|
- },
|
42
|
|
- onSubmit: (fields) => {
|
43
|
|
- setClient({
|
44
|
|
- ...client,
|
45
|
|
- ...fields
|
46
|
|
- })
|
47
|
|
- handleNext()
|
48
|
|
- },
|
49
|
|
- validationSchema: RegisterSchema,
|
50
|
|
- });
|
51
|
|
-
|
52
|
|
- const {errors, touched, handleSubmit, getFieldProps } = formik;
|
53
|
|
-
|
54
|
|
- return (
|
55
|
|
- <FormikProvider style={{ padding : 15 }} value={formik}>
|
56
|
|
- <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
|
57
|
|
- <Stack spacing={3}>
|
58
|
|
- <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
|
59
|
|
- <TextField
|
60
|
|
- label="Nombre"
|
61
|
|
- fullWidth
|
62
|
|
- {...getFieldProps('firstName')}
|
63
|
|
- error={Boolean(touched.firstName && errors.firstName)}
|
64
|
|
- helperText={touched.firstName && errors.firstName}
|
65
|
|
- />
|
66
|
|
-
|
67
|
|
- <TextField
|
68
|
|
- label="Apellidos"
|
69
|
|
- fullWidth
|
70
|
|
- {...getFieldProps('lastName')}
|
71
|
|
- error={Boolean(touched.lastName && errors.lastName)}
|
72
|
|
- helperText={touched.lastName && errors.lastName}
|
73
|
|
- />
|
74
|
|
- </Stack>
|
75
|
|
-
|
76
|
|
- <TextField
|
77
|
|
- fullWidth
|
78
|
|
- autoComplete="username"
|
79
|
|
- type="email"
|
80
|
|
- label="Correo Electrónico"
|
81
|
|
- {...getFieldProps('email')}
|
82
|
|
- error={Boolean(touched.email && errors.email)}
|
83
|
|
- helperText={touched.email && errors.email}
|
84
|
|
- />
|
85
|
|
-
|
86
|
|
- <TextField
|
87
|
|
- fullWidth
|
88
|
|
- autoComplete="current-password"
|
89
|
|
- type={showPassword ? 'text' : 'password'}
|
90
|
|
- label="Contraseña"
|
91
|
|
- {...getFieldProps('password')}
|
92
|
|
- InputProps={{
|
93
|
|
- endAdornment: (
|
94
|
|
- <InputAdornment position="end">
|
95
|
|
- <IconButton edge="end" onClick={() => setShowPassword((prev) => !prev)}>
|
96
|
|
- <Icon icon={showPassword ? eyeFill : eyeOffFill} />
|
97
|
|
- </IconButton>
|
98
|
|
- </InputAdornment>
|
99
|
|
- )
|
100
|
|
- }}
|
101
|
|
- error={Boolean(touched.password && errors.password)}
|
102
|
|
- helperText={touched.password && errors.password}
|
103
|
|
- />
|
104
|
|
-
|
105
|
|
- <TextField
|
106
|
|
- fullWidth
|
107
|
|
- type={showPasswordTwo ? 'text' : 'password'}
|
108
|
|
- label="Confirma contraseña"
|
109
|
|
- {...getFieldProps('password_confirm')}
|
110
|
|
- InputProps={{
|
111
|
|
- endAdornment: (
|
112
|
|
- <InputAdornment position="end">
|
113
|
|
- <IconButton edge="end" onClick={() => setShowPasswordTwo((prev) => !prev)}>
|
114
|
|
- <Icon icon={showPasswordTwo ? eyeFill : eyeOffFill} />
|
115
|
|
- </IconButton>
|
116
|
|
- </InputAdornment>
|
117
|
|
- )
|
118
|
|
- }}
|
119
|
|
- error={Boolean(touched.password_confirm && errors.password_confirm)}
|
120
|
|
- helperText={touched.password_confirm && errors.password_confirm}
|
121
|
|
- />
|
122
|
|
-
|
123
|
|
-
|
124
|
|
- <Box sx={{ mb: 2 }}>
|
125
|
|
- <div style={{ paddingTop : 15}}>
|
126
|
|
- <Button
|
127
|
|
- type="submit"
|
128
|
|
- className="registerBtn"
|
129
|
|
- variant="contained"
|
130
|
|
- sx={{ mt: 1, mr: 1 }}
|
131
|
|
- >
|
132
|
|
- {index === steplen - 1 ? 'Registrarme' : 'Siguiente'}
|
133
|
|
- </Button>
|
134
|
|
- <Button
|
135
|
|
- disabled={true}
|
136
|
|
- onClick={handleBack}
|
137
|
|
- sx={{ mt: 1, mr: 1 }}
|
138
|
|
- >
|
139
|
|
- Regresar
|
140
|
|
- </Button>
|
141
|
|
- </div>
|
142
|
|
- </Box>
|
143
|
|
-
|
144
|
|
- </Stack>
|
145
|
|
- </Form>
|
146
|
|
- </FormikProvider>
|
147
|
|
- );
|
|
18
|
+ const steplen = 2;
|
|
19
|
+ const index = 0;
|
|
20
|
+
|
|
21
|
+ const [showPassword, setShowPassword] = useState(false);
|
|
22
|
+ const [showPasswordTwo, setShowPasswordTwo] = useState(false);
|
|
23
|
+
|
|
24
|
+ const RegisterSchema = Yup.object().shape({
|
|
25
|
+ firstName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado largo!').required('Tu nombre es requerido'),
|
|
26
|
+ 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')
|
|
30
|
+ });
|
|
31
|
+
|
|
32
|
+ let { client, setClient, handleNext, handleBack } = props
|
|
33
|
+
|
|
34
|
+ const formik = useFormik({
|
|
35
|
+ initialValues: {
|
|
36
|
+ firstName: client.firstName,
|
|
37
|
+ lastName: client.lastName,
|
|
38
|
+ email: client.email,
|
|
39
|
+ password: client.password,
|
|
40
|
+ password_confirm: client.password_confirm
|
|
41
|
+ },
|
|
42
|
+ onSubmit: (fields) => {
|
|
43
|
+ setClient({
|
|
44
|
+ ...client,
|
|
45
|
+ ...fields
|
|
46
|
+ })
|
|
47
|
+ handleNext()
|
|
48
|
+ },
|
|
49
|
+ validationSchema: RegisterSchema,
|
|
50
|
+ });
|
|
51
|
+
|
|
52
|
+ const { errors, touched, handleSubmit, getFieldProps } = formik;
|
|
53
|
+
|
|
54
|
+ return (
|
|
55
|
+ <FormikProvider style={{ padding: 15 }} value={formik}>
|
|
56
|
+ <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
|
|
57
|
+ <Stack spacing={3}>
|
|
58
|
+ <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
|
|
59
|
+ <TextField
|
|
60
|
+ label="Nombre"
|
|
61
|
+ fullWidth
|
|
62
|
+ {...getFieldProps('firstName')}
|
|
63
|
+ error={Boolean(touched.firstName && errors.firstName)}
|
|
64
|
+ helperText={touched.firstName && errors.firstName}
|
|
65
|
+ />
|
|
66
|
+
|
|
67
|
+ <TextField
|
|
68
|
+ label="Apellidos"
|
|
69
|
+ fullWidth
|
|
70
|
+ {...getFieldProps('lastName')}
|
|
71
|
+ error={Boolean(touched.lastName && errors.lastName)}
|
|
72
|
+ helperText={touched.lastName && errors.lastName}
|
|
73
|
+ />
|
|
74
|
+ </Stack>
|
|
75
|
+
|
|
76
|
+ <TextField
|
|
77
|
+ fullWidth
|
|
78
|
+ autoComplete="username"
|
|
79
|
+ type="email"
|
|
80
|
+ label="Correo Electrónico"
|
|
81
|
+ {...getFieldProps('email')}
|
|
82
|
+ error={Boolean(touched.email && errors.email)}
|
|
83
|
+ helperText={touched.email && errors.email}
|
|
84
|
+ />
|
|
85
|
+
|
|
86
|
+ <TextField
|
|
87
|
+ fullWidth
|
|
88
|
+ autoComplete="current-password"
|
|
89
|
+ type={showPassword ? 'text' : 'password'}
|
|
90
|
+ label="Contraseña"
|
|
91
|
+ {...getFieldProps('password')}
|
|
92
|
+ InputProps={{
|
|
93
|
+ endAdornment: (
|
|
94
|
+ <InputAdornment position="end">
|
|
95
|
+ <IconButton edge="end" onClick={() => setShowPassword((prev) => !prev)}>
|
|
96
|
+ <Icon icon={showPassword ? eyeFill : eyeOffFill} />
|
|
97
|
+ </IconButton>
|
|
98
|
+ </InputAdornment>
|
|
99
|
+ )
|
|
100
|
+ }}
|
|
101
|
+ error={Boolean(touched.password && errors.password)}
|
|
102
|
+ helperText={touched.password && errors.password}
|
|
103
|
+ />
|
|
104
|
+
|
|
105
|
+ <TextField
|
|
106
|
+ fullWidth
|
|
107
|
+ type={showPasswordTwo ? 'text' : 'password'}
|
|
108
|
+ label="Confirma contraseña"
|
|
109
|
+ {...getFieldProps('password_confirm')}
|
|
110
|
+ InputProps={{
|
|
111
|
+ endAdornment: (
|
|
112
|
+ <InputAdornment position="end">
|
|
113
|
+ <IconButton edge="end" onClick={() => setShowPasswordTwo((prev) => !prev)}>
|
|
114
|
+ <Icon icon={showPasswordTwo ? eyeFill : eyeOffFill} />
|
|
115
|
+ </IconButton>
|
|
116
|
+ </InputAdornment>
|
|
117
|
+ )
|
|
118
|
+ }}
|
|
119
|
+ error={Boolean(touched.password_confirm && errors.password_confirm)}
|
|
120
|
+ helperText={touched.password_confirm && errors.password_confirm}
|
|
121
|
+ />
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+ <Box sx={{ mb: 2 }}>
|
|
125
|
+ <div style={{ paddingTop: 15 }}>
|
|
126
|
+ <Button
|
|
127
|
+ name="submit_first_step"
|
|
128
|
+ type="submit"
|
|
129
|
+ className="registerBtn"
|
|
130
|
+ variant="contained"
|
|
131
|
+ sx={{ mt: 1, mr: 1 }}
|
|
132
|
+ >
|
|
133
|
+ {index === steplen - 1 ? 'Registrarme' : 'Siguiente'}
|
|
134
|
+ </Button>
|
|
135
|
+ <Button
|
|
136
|
+ disabled={true}
|
|
137
|
+ onClick={handleBack}
|
|
138
|
+ sx={{ mt: 1, mr: 1 }}
|
|
139
|
+ >
|
|
140
|
+ Regresar
|
|
141
|
+ </Button>
|
|
142
|
+ </div>
|
|
143
|
+ </Box>
|
|
144
|
+
|
|
145
|
+ </Stack>
|
|
146
|
+ </Form>
|
|
147
|
+ </FormikProvider>
|
|
148
|
+ );
|
148
|
149
|
}
|