|
@@ -1,167 +1,167 @@
|
1
|
1
|
import * as React from 'react';
|
2
|
2
|
import { Link as RouterLink } from 'react-router-dom';
|
3
|
3
|
|
4
|
|
-import {
|
5
|
|
- Box, Link, Container, Typography,Card,
|
6
|
|
- StepLabel,Step,Stepper, Button,Paper, StepContent
|
|
4
|
+import {
|
|
5
|
+ Box, Link, Container, Typography, Card,
|
|
6
|
+ StepLabel, Step, Stepper, Button, Paper, StepContent
|
7
|
7
|
} from '@mui/material';
|
8
|
8
|
|
9
|
9
|
import { RegisterForm } from '../Components/Register/RegisterForm';
|
10
|
10
|
import { PersonalInfo } from '../Components/Register/PersonalInfo.js';
|
11
|
11
|
import AuthLayout from '../Components/Register/AuthLayout';
|
12
|
12
|
|
13
|
|
-import Mock from '../Images/register_mok.png'
|
14
|
|
-import useAuth from '../Auth/useAuth';
|
|
13
|
+import Mock from '../Images/register_mok.png'
|
15
|
14
|
import { useNavigate } from 'react-router-dom'
|
16
|
|
-import { Col , Row,} from 'react-bootstrap';
|
|
15
|
+import { Col, Row, } from 'react-bootstrap';
|
|
16
|
+import { useSelector } from 'react-redux'
|
17
|
17
|
|
18
|
18
|
|
19
|
19
|
export function Register() {
|
20
|
20
|
|
21
|
|
- let auth = useAuth();
|
22
|
|
- let navigate = useNavigate()
|
23
|
|
-
|
24
|
|
- React.useEffect(() => {
|
25
|
|
- if(auth.isLogged()){
|
26
|
|
- return navigate('/dashboard/home')
|
27
|
|
- }
|
28
|
|
- }, [auth,navigate])
|
29
|
|
-
|
30
|
|
-
|
31
|
|
- const TODAY = new Date()
|
32
|
|
-
|
33
|
|
- const [activeStep, setActiveStep] = React.useState(0);
|
34
|
|
- const [client, setClient] = React.useState({
|
35
|
|
- firstName: '',
|
36
|
|
- lastName: '',
|
37
|
|
- email: '',
|
38
|
|
- password: '',
|
39
|
|
- password_confirm: '',
|
40
|
|
- nit: "",
|
41
|
|
- cui: "",
|
42
|
|
- direccion: "",
|
43
|
|
- nacimiento : TODAY.getFullYear() +'-10-18',
|
44
|
|
- telefono : "",
|
45
|
|
- });
|
46
|
|
-
|
47
|
|
- const handleNext = () => {
|
48
|
|
- setActiveStep((prevActiveStep) => prevActiveStep + 1);
|
49
|
|
- };
|
50
|
|
-
|
51
|
|
- const handleBack = () => {
|
52
|
|
- setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
53
|
|
- };
|
54
|
|
-
|
55
|
|
- const handleReset = () => {
|
56
|
|
- setActiveStep(0);
|
57
|
|
- };
|
58
|
|
-
|
59
|
|
- const steps = [
|
60
|
|
- {
|
61
|
|
- label: 'Información de tu cuenta',
|
62
|
|
- description:
|
63
|
|
- <RegisterForm
|
64
|
|
- client={client}
|
65
|
|
- setClient={setClient}
|
66
|
|
- handleBack={handleBack}
|
67
|
|
- handleNext={handleNext}
|
68
|
|
- />
|
69
|
|
- },
|
70
|
|
- {
|
71
|
|
- label: 'Datos Personales',
|
72
|
|
- description:
|
73
|
|
- <PersonalInfo
|
74
|
|
- client={client}
|
75
|
|
- setClient={setClient}
|
76
|
|
- handleBack={handleBack}
|
77
|
|
- />
|
78
|
|
- },
|
79
|
|
- ];
|
80
|
|
-
|
81
|
|
- return (
|
82
|
|
- <Container>
|
83
|
|
- <Row className="register_content">
|
84
|
|
- <Col md={4} className="d-none d-md-block">
|
85
|
|
-
|
86
|
|
- <Card className="card_register">
|
87
|
|
-
|
88
|
|
- <AuthLayout>
|
89
|
|
-
|
90
|
|
- <Link to="/login" component={RouterLink}>
|
91
|
|
-
|
92
|
|
- </Link>
|
93
|
|
- </AuthLayout>
|
94
|
|
-
|
95
|
|
- <h1 variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
|
96
|
|
- Efectividad para tus procesos de reclutamiento
|
97
|
|
- </h1>
|
98
|
|
- <img alt="register" src={Mock} />
|
99
|
|
- </Card>
|
100
|
|
-
|
101
|
|
- </Col>
|
102
|
|
-
|
103
|
|
- <Col style={{ "padding" : 45}} md={6}>
|
104
|
|
-
|
105
|
|
- <Box sx={{ mb: 5 }}>
|
106
|
|
- <Typography variant="h4" gutterBottom>
|
107
|
|
- Empieza de forma gratuita.
|
108
|
|
- </Typography>
|
109
|
|
- <Typography sx={{ color: 'text.secondary' }}>
|
110
|
|
- Gratis para siempre. No se necesita tarjeta de crédito.
|
111
|
|
- </Typography>
|
112
|
|
- </Box>
|
113
|
|
-
|
114
|
|
- <Stepper activeStep={activeStep} orientation="vertical">
|
115
|
|
- {steps.map((step, index) => (
|
116
|
|
- <Step key={step.label}>
|
117
|
|
- <StepLabel
|
118
|
|
- optional={
|
119
|
|
- index === 2 ? (
|
120
|
|
- <Typography variant="caption">Last step</Typography>
|
121
|
|
- ) : null
|
122
|
|
- }
|
123
|
|
- >
|
124
|
|
- {step.label}
|
125
|
|
- </StepLabel>
|
126
|
|
- <StepContent style={{ padding: 25 }}>
|
127
|
|
- {step.description}
|
128
|
|
- </StepContent>
|
129
|
|
- </Step>
|
130
|
|
- ))}
|
131
|
|
- </Stepper>
|
132
|
|
- {activeStep === steps.length && (
|
133
|
|
- <Paper square elevation={0} sx={{ p: 3 }}>
|
134
|
|
- <Typography>All steps completed - you're finished</Typography>
|
135
|
|
- <Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
|
136
|
|
- Reset
|
137
|
|
- </Button>
|
138
|
|
- </Paper>
|
139
|
|
- )}
|
140
|
|
-
|
141
|
|
- <div>
|
142
|
|
- <Typography variant="body2" align="center" sx={{ color: 'text.secondary', mt: 0 }}>
|
143
|
|
- Estoy de acuerdo con las {" "}
|
144
|
|
- <Link underline="always" sx={{ color: "#d32f2f" }}>
|
145
|
|
- Condiciones de servicio
|
146
|
|
- </Link>
|
147
|
|
- {" "}y{" "}
|
148
|
|
- <Link underline="always" sx={{ color: "#d32f2f" }}>
|
149
|
|
- Política de privacidad
|
150
|
|
- </Link>
|
151
|
|
- .
|
152
|
|
- </Typography>
|
153
|
|
-
|
154
|
|
- <Typography variant="subtitle2" sx={{ mt: 0, textAlign: 'center' }}>
|
155
|
|
- Ya tiene una cuenta?
|
156
|
|
- <Link to="/login" component={RouterLink}>
|
157
|
|
- Ingresa
|
158
|
|
- </Link>
|
159
|
|
- </Typography>
|
160
|
|
- </div>
|
161
|
|
-
|
162
|
|
-
|
163
|
|
- </Col>
|
164
|
|
- </Row>
|
165
|
|
- </Container>
|
166
|
|
- );
|
|
21
|
+ let navigate = useNavigate()
|
|
22
|
+ const auth = useSelector((state) => state.token)
|
|
23
|
+
|
|
24
|
+ React.useEffect(() => {
|
|
25
|
+ if (auth.token) {
|
|
26
|
+ return navigate('/dashboard/home')
|
|
27
|
+ }
|
|
28
|
+ }, [auth, navigate])
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+ const TODAY = new Date()
|
|
32
|
+
|
|
33
|
+ const [activeStep, setActiveStep] = React.useState(0);
|
|
34
|
+ const [client, setClient] = React.useState({
|
|
35
|
+ firstName: '',
|
|
36
|
+ lastName: '',
|
|
37
|
+ email: '',
|
|
38
|
+ password: '',
|
|
39
|
+ password_confirm: '',
|
|
40
|
+ nit: "",
|
|
41
|
+ cui: "",
|
|
42
|
+ direccion: "",
|
|
43
|
+ nacimiento: TODAY.getFullYear() + '-10-18',
|
|
44
|
+ telefono: "",
|
|
45
|
+ });
|
|
46
|
+
|
|
47
|
+ const handleNext = () => {
|
|
48
|
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
|
|
49
|
+ };
|
|
50
|
+
|
|
51
|
+ const handleBack = () => {
|
|
52
|
+ setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
|
53
|
+ };
|
|
54
|
+
|
|
55
|
+ const handleReset = () => {
|
|
56
|
+ setActiveStep(0);
|
|
57
|
+ };
|
|
58
|
+
|
|
59
|
+ const steps = [
|
|
60
|
+ {
|
|
61
|
+ label: 'Información de tu cuenta',
|
|
62
|
+ description:
|
|
63
|
+ <RegisterForm
|
|
64
|
+ client={client}
|
|
65
|
+ setClient={setClient}
|
|
66
|
+ handleBack={handleBack}
|
|
67
|
+ handleNext={handleNext}
|
|
68
|
+ />
|
|
69
|
+ },
|
|
70
|
+ {
|
|
71
|
+ label: 'Datos Personales',
|
|
72
|
+ description:
|
|
73
|
+ <PersonalInfo
|
|
74
|
+ client={client}
|
|
75
|
+ setClient={setClient}
|
|
76
|
+ handleBack={handleBack}
|
|
77
|
+ />
|
|
78
|
+ },
|
|
79
|
+ ];
|
|
80
|
+
|
|
81
|
+ return (
|
|
82
|
+ <Container style={{paddingTop:40}}>
|
|
83
|
+ <Row className="register_content">
|
|
84
|
+ <Col md={4} className="d-none d-md-block">
|
|
85
|
+
|
|
86
|
+ <Card className="card_register">
|
|
87
|
+
|
|
88
|
+ <AuthLayout>
|
|
89
|
+
|
|
90
|
+ <Link to="/login" component={RouterLink}>
|
|
91
|
+
|
|
92
|
+ </Link>
|
|
93
|
+ </AuthLayout>
|
|
94
|
+
|
|
95
|
+ <h1 variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
|
|
96
|
+ Efectividad para tus procesos de reclutamiento
|
|
97
|
+ </h1>
|
|
98
|
+ <img alt="register" src={Mock} />
|
|
99
|
+ </Card>
|
|
100
|
+
|
|
101
|
+ </Col>
|
|
102
|
+
|
|
103
|
+ <Col style={{ "padding": 45 }} md={6}>
|
|
104
|
+
|
|
105
|
+ <Box sx={{ mb: 5 }}>
|
|
106
|
+ <Typography variant="h4" gutterBottom>
|
|
107
|
+ Empieza de forma gratuita.
|
|
108
|
+ </Typography>
|
|
109
|
+ <Typography sx={{ color: 'text.secondary' }}>
|
|
110
|
+ Gratis para siempre. No se necesita tarjeta de crédito.
|
|
111
|
+ </Typography>
|
|
112
|
+ </Box>
|
|
113
|
+
|
|
114
|
+ <Stepper activeStep={activeStep} orientation="vertical">
|
|
115
|
+ {steps.map((step, index) => (
|
|
116
|
+ <Step key={step.label}>
|
|
117
|
+ <StepLabel
|
|
118
|
+ optional={
|
|
119
|
+ index === 2 ? (
|
|
120
|
+ <Typography variant="caption">Last step</Typography>
|
|
121
|
+ ) : null
|
|
122
|
+ }
|
|
123
|
+ >
|
|
124
|
+ {step.label}
|
|
125
|
+ </StepLabel>
|
|
126
|
+ <StepContent style={{ padding: 25 }}>
|
|
127
|
+ {step.description}
|
|
128
|
+ </StepContent>
|
|
129
|
+ </Step>
|
|
130
|
+ ))}
|
|
131
|
+ </Stepper>
|
|
132
|
+ {activeStep === steps.length && (
|
|
133
|
+ <Paper square elevation={0} sx={{ p: 3 }}>
|
|
134
|
+ <Typography>All steps completed - you're finished</Typography>
|
|
135
|
+ <Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
|
|
136
|
+ Reset
|
|
137
|
+ </Button>
|
|
138
|
+ </Paper>
|
|
139
|
+ )}
|
|
140
|
+
|
|
141
|
+ <div>
|
|
142
|
+ <Typography variant="body2" align="center" sx={{ color: 'text.secondary', mt: 0 }}>
|
|
143
|
+ Estoy de acuerdo con las {" "}
|
|
144
|
+ <Link underline="always" sx={{ color: "#d32f2f" }}>
|
|
145
|
+ Condiciones de servicio
|
|
146
|
+ </Link>
|
|
147
|
+ {" "}y{" "}
|
|
148
|
+ <Link underline="always" sx={{ color: "#d32f2f" }}>
|
|
149
|
+ Política de privacidad
|
|
150
|
+ </Link>
|
|
151
|
+ .
|
|
152
|
+ </Typography>
|
|
153
|
+
|
|
154
|
+ <Typography variant="subtitle2" sx={{ mt: 0, textAlign: 'center' }}>
|
|
155
|
+ Ya tiene una cuenta?
|
|
156
|
+ <Link to="/login" component={RouterLink}>
|
|
157
|
+ Ingresa
|
|
158
|
+ </Link>
|
|
159
|
+ </Typography>
|
|
160
|
+ </div>
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+ </Col>
|
|
164
|
+ </Row>
|
|
165
|
+ </Container>
|
|
166
|
+ );
|
167
|
167
|
}
|