[ref] style in register and step complete

src/App.css

@@ -173,3 +173,14 @@
     color: #fd4b4b !important;
 }
 
+.card_register{
+    min-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+    align-items: stretch;
+    align-content: stretch;
+    padding : 35px; 
+}
+

src/Components/Register/AuthLayout.js

@@ -9,19 +9,19 @@ import Image from 'react-bootstrap/Image'
 // ----------------------------------------------------------------------
 
 const HeaderStyle = styled('header')(({ theme }) => ({
-    top: 0,
-    zIndex: 9,
-    lineHeight: 0,
-    width: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    position: 'absolute',
-    padding: theme.spacing(3),
-    justifyContent: 'space-between',
-    [theme.breakpoints.up('md')]: {
-        alignItems: 'flex-start',
-        padding: theme.spacing(7, 5, 0, 7)
-    }
+    // top: 0,
+    // zIndex: 9,
+    // lineHeight: 0,
+    // width: '100%',
+    // display: 'flex',
+    // alignItems: 'center',
+    // position: 'absolute',
+    // padding: theme.spacing(3),
+    // justifyContent: 'space-between',
+    // [theme.breakpoints.up('md')]: {
+        // alignItems: 'flex-start',
+        // padding: theme.spacing(7, 5, 0, 7)
+    // }
 }));
 
 // ----------------------------------------------------------------------
@@ -34,7 +34,7 @@ export default function AuthLayout({ children }) {
     return (
         <HeaderStyle>
             <RouterLink to="/">
-                <Image style={{ width : '30%'}} fluid={true} alt="register logo" src={Logo}/>
+                <Image style={{ width : '70%'}} fluid={true} alt="register logo" src={Logo}/>
             </RouterLink>
 
             <div>

src/Components/Register/PersonalInfo.js

@@ -1,48 +1,36 @@
 import { useFormik, Form, FormikProvider } from 'formik'; // import { useNavigate } from 'react-router-dom';
+import { Stack, TextField,Box, Button } from '@mui/material';
 import * as Yup from 'yup';
 
-import { 
-    Stack, TextField,Box, Button
-} from '@mui/material';
-
 export function PersonalInfo(props) {
 
-    // let navigate = useNavigate()
+    let { handleBack, setClient, client } = props
 
-    const steplen = 2
     const RegisterSchema = Yup.object().shape({
         nit: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado largo!').required('El nit es requerido'),
         cui: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!').required('Tu CUI/DPI es requerido'),
         direccion: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!').required('La direccion es requerida'),
         nacimiento: Yup.date().required('Tu fecha  nacimiento es requerida'),
-        telefono: Yup.number().required('Tu numero de telefono es requerido').oneOf([Yup.ref('password'), null], 'Las contraseñas no coincidien')
+        telefono: Yup.number('Ingresa únicamente números').required('Tu numero de telefono es requerido')
     });
 
     const formik = useFormik({
-
         initialValues: {
-            nit: '',
-            cui: '',
-            direccion: '',
-            nacimiento: new Date(),
-            telefono: ''
+            nit: client.nit,
+            cui: client.cui,
+            direccion: client.direccion,
+            nacimiento: client.nacimiento,
+            telefono: client.telefono
         },
         validationSchema: RegisterSchema,
-        onSubmit: async (values) => {
+        onSubmit: (values) => {
             // setOpen(true);
-            let body = {
-                "nit": "5345435",
-                "cui": "555555",
-                "direccion": "4 calle zona 1",
-                "fechacumple": "2021-01-01",
-                "telefono" : "45435345",
-            }
-            console.log(values,body)
-
             // let url = 'http://204.48.25.93:8081/registro'
             // let url = 'http://psicoadmin.ditca.org:8081/registro'
+            setClient({
+                ...client, ...values
+            })
         }
-
     });
 
 
@@ -99,28 +87,25 @@ export function PersonalInfo(props) {
                         />
                     </Stack>
 
-                  <Box sx={{ mb: 2 }}>
-                    <div style={{ paddingTop  : 15}}>
-                      <Button
-                        type="submit"
-                        className="registerBtn" 
-                        variant="contained"
-                        // onClick={handleNext}
-                        sx={{ mt: 1, mr: 1 }}
-                      >
-                        {props.index === steplen - 1 ? 'Registrarme' : 'Siguiente'}
-                      </Button>
-                      <Button
-                        onClick={props.handleBack}
-                        sx={{ mt: 1, mr: 1 }}
-                      >
-                        Regresar
-                      </Button>
-                    </div>
-                  </Box>
-
-
-
+                    <Box sx={{ mb: 2 }}>
+                        <div style={{ paddingTop: 15 }}>
+                            <Button
+                                type="submit"
+                                className="registerBtn"
+                                variant="contained"
+                                // onClick={handleNext}
+                                sx={{ mt: 1, mr: 1 }}
+                            >
+                                {'Registrarme'}
+                            </Button>
+                            <Button
+                                onClick={handleBack}
+                                sx={{ mt: 1, mr: 1 }}
+                            >
+                                Regresar
+                            </Button>
+                        </div>
+                    </Box>
 
                 </Stack>
             </Form>

src/Components/Register/RegisterForm.jsx

@@ -16,6 +16,7 @@ import eyeOffFill from '@iconify/icons-eva/eye-off-fill';
 export function RegisterForm(props) {
 
     const steplen = 2;
+    const index = 0;
 
     const [showPassword, setShowPassword] = useState(false);
     const [showPasswordTwo, setShowPasswordTwo] = useState(false);
@@ -28,7 +29,7 @@ export function RegisterForm(props) {
         password_confirm: Yup.string().required('Las contraseñas no coincidien').oneOf([Yup.ref('password'), null], 'Las contraseñas no coincidien')
     });
 
-    let {client, setClient } = props
+    let {client, setClient, handleNext, handleBack } = props
 
     const formik = useFormik({
         initialValues: {
@@ -39,8 +40,11 @@ export function RegisterForm(props) {
             password_confirm: client.password_confirm
         },
         onSubmit: (fields) => {
-            setClient({ ...fields })
-            props.handleNext()
+            setClient({ 
+                ...client,
+                ...fields 
+            })
+            handleNext()
         },
         validationSchema: RegisterSchema,
     });
@@ -123,13 +127,13 @@ export function RegisterForm(props) {
                         type="submit"
                         className="registerBtn" 
                         variant="contained"
-                        // onClick={handleNext}
                         sx={{ mt: 1, mr: 1 }}
                       >
-                        {props.index === steplen - 1 ? 'Registrarme' : 'Siguiente'}
+                        {index === steplen - 1 ? 'Registrarme' : 'Siguiente'}
                       </Button>
                       <Button
-                        onClick={props.handleBack}
+                        disabled={true}
+                        onClick={handleBack}
                         sx={{ mt: 1, mr: 1 }}
                       >
                         Regresar

src/Components/Register/temp.js

@@ -0,0 +1,107 @@
+const SectionStyle = styled(Card)(({ theme }) => ({
+    width: '100%',
+    maxWidth: 464,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    margin: theme.spacing(2, 0, 2, 2)
+}));
+
+const ContentStyle = styled('div')(({ theme }) => ({
+    maxWidth: 480,
+    margin: 'auto',
+    display: 'flex',
+    minHeight: '100vh',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    padding: theme.spacing(12, 0)
+}));
+
+const RootStyle = styled(Page)(({ theme }) => ({
+    [theme.breakpoints.up('md')]: {
+        display: 'flex'
+    }
+}));
+
+function temp () {
+    return(
+        <RootStyle title="Register | Minimal-UI">
+
+            <AuthLayout>
+                Ya tiene una cuenta?&nbsp;
+                <Link to="/login" component={RouterLink}>
+                    Ingresa
+                </Link>
+            </AuthLayout>
+
+            <SectionStyle>
+                <Typography variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
+                    Efectividad para tus procesos de reclutamiento
+                </Typography>
+                <img alt="register" src={Mock} />
+            </SectionStyle>
+
+            <Container>
+                <ContentStyle>
+                    <Box sx={{ mb: 5 }}>
+                        <Typography variant="h4" gutterBottom>
+                            Empieza de forma gratuita.
+                        </Typography>
+                        <Typography sx={{ color: 'text.secondary' }}>
+                            Gratis para siempre. No se necesita tarjeta de crédito.
+                        </Typography>
+                    </Box>
+
+                    <Stepper activeStep={activeStep} orientation="vertical">
+                        {steps.map((step, index) => (
+                            <Step key={step.label}>
+                                <StepLabel
+                                    optional={
+                                        index === 2 ? (
+                                            <Typography variant="caption">Last step</Typography>
+                                        ) : null
+                                    }
+                                >
+                                    {step.label}
+                                </StepLabel>
+                                <StepContent style={{ padding: 25 }}>
+                                    {step.description}
+                                </StepContent>
+                            </Step>
+                        ))}
+                    </Stepper>
+                    {activeStep === steps.length && (
+                        <Paper square elevation={0} sx={{ p: 3 }}>
+                            <Typography>All steps completed - you&apos;re finished</Typography>
+                            <Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
+                                Reset
+                            </Button>
+                        </Paper>
+                    )}
+
+                    <Typography variant="body2" align="center" sx={{ color: 'text.secondary', mt: 3 }}>
+                        Estoy de acuerdo con las {" "}
+                        <Link underline="always" sx={{ color: "#d32f2f" }}>
+                            Condiciones de servicio
+                        </Link>
+                        {" "}y{" "}
+                        <Link underline="always" sx={{ color: "#d32f2f" }}>
+                            Política de privacidad
+                        </Link>
+                        .
+                    </Typography>
+
+                    <div>
+                        <Typography variant="subtitle2" sx={{ mt: 3, textAlign: 'center' }}>
+                            Ya tiene una cuenta?&nbsp;
+                            <Link to="/login" component={RouterLink}>
+                                Ingresa
+                            </Link>
+                        </Typography>
+                    </div>
+                </ContentStyle>
+
+            </Container>
+        </RootStyle>
+    )
+}

src/Pages/Register.jsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 
-import { styled } from '@mui/material/styles';
 import { 
-    Box, Card, Link, Container, Typography,
+    Box, Link, Container, Typography,Card,
     StepLabel,Step,Stepper, Button,Paper, StepContent
 } from '@mui/material';
 
-import Page from '../Components/Register/Page';
 import { RegisterForm } from '../Components/Register/RegisterForm';
 import { PersonalInfo } from '../Components/Register/PersonalInfo.js';
 import AuthLayout from '../Components/Register/AuthLayout';
@@ -15,31 +13,7 @@ import AuthLayout from '../Components/Register/AuthLayout';
 import Mock from  '../Images/register_mok.png'
 import useAuth from '../Auth/useAuth';
 import { useNavigate } from 'react-router-dom'
-
-const RootStyle = styled(Page)(({ theme }) => ({
-    [theme.breakpoints.up('md')]: {
-        display: 'flex'
-    }
-}));
-
-const SectionStyle = styled(Card)(({ theme }) => ({
-    width: '100%',
-    maxWidth: 464,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    margin: theme.spacing(2, 0, 2, 2)
-}));
-
-const ContentStyle = styled('div')(({ theme }) => ({
-    maxWidth: 480,
-    margin: 'auto',
-    display: 'flex',
-    minHeight: '100vh',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    padding: theme.spacing(12, 0)
-}));
+import { Col , Row,} from 'react-bootstrap';
 
 
 export function Register() {
@@ -55,16 +29,16 @@ export function Register() {
 
     const [activeStep, setActiveStep] = React.useState(0);
     const [client, setClient] = React.useState({
-        firstName: 'Ming',
+        firstName: '',
         lastName: '',
         email: '',
         password: '',
         password_confirm: '',
-        nit: "5345435",
-        cui: "555555",
-        direccion: "4 calle zona 1",
-        fechacumple: "2021-01-01",
-        telefono : "45435345",
+        nit: "",
+        cui: "",
+        direccion: "",
+        fechacumple: "",
+        telefono : "",
     });
 
     const handleNext = () => {
@@ -94,32 +68,35 @@ export function Register() {
             label: 'Datos Personales',
             description: 
             <PersonalInfo 
-            client={client} 
-            setClient={setClient} 
+            client={client} setClient={setClient} 
             handleBack={handleBack}
             />
         },
     ];
 
     return (
-        <RootStyle title="Register | Minimal-UI">
-
-            <AuthLayout>
-                Ya tiene una cuenta?&nbsp;
-                <Link to="/login" component={RouterLink}>
-                    Ingresa
-                </Link>
-            </AuthLayout>
-
-            <SectionStyle>
-                <Typography variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
-                    Efectividad para tus procesos de reclutamiento
-                </Typography>
-                <img alt="register" src={Mock} />
-            </SectionStyle>
-
-            <Container>
-                <ContentStyle>
+        <Container>
+            <Row>
+                <Col md={4}>
+        <Card className="card_register">
+
+                    <AuthLayout>
+
+                        <Link to="/login" component={RouterLink}>
+
+                        </Link>
+                    </AuthLayout>
+
+                    <h1 variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
+                        Efectividad para tus procesos de reclutamiento
+                    </h1>
+                    <img alt="register" src={Mock} />
+        </Card>
+
+                </Col>
+
+        <Col style={{ "padding" : 45}} md={6}>
+
                     <Box sx={{ mb: 5 }}>
                         <Typography variant="h4" gutterBottom>
                             Empieza de forma gratuita.
@@ -129,56 +106,57 @@ export function Register() {
                         </Typography>
                     </Box>
 
-
                     <Stepper activeStep={activeStep} orientation="vertical">
-    {steps.map((step, index) => (
-          <Step key={step.label}>
-            <StepLabel
-              optional={
-                index === 2 ? (
-                  <Typography variant="caption">Last step</Typography>
-                ) : null
-              }
-            >
-              {step.label}
-            </StepLabel>
-            <StepContent style={{ padding : 25}}>
-                  {step.description}
-                </StepContent>
-              </Step>
-        ))}                    
+                        {steps.map((step, index) => (
+                            <Step key={step.label}>
+                                <StepLabel
+                                    optional={
+                                        index === 2 ? (
+                                            <Typography variant="caption">Last step</Typography>
+                                        ) : null
+                                    }
+                                >
+                                    {step.label}
+                                </StepLabel>
+                                <StepContent style={{ padding: 25 }}>
+                                    {step.description}
+                                </StepContent>
+                            </Step>
+                        ))}
                     </Stepper>
- {activeStep === steps.length && (
-        <Paper square elevation={0} sx={{ p: 3 }}>
-          <Typography>All steps completed - you&apos;re finished</Typography>
-          <Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
-            Reset
-          </Button>
-        </Paper>
-      )}
-
-        <Typography variant="body2" align="center" sx={{ color: 'text.secondary', mt: 3 }}>
-        Estoy de acuerdo con las {" "}
-        <Link underline="always" sx={{ color: "#d32f2f" }}>
-        Condiciones de servicio
-        </Link>
-        {" "}y{" "}
-        <Link underline="always" sx={{ color: "#d32f2f" }}>
-        Política de privacidad
+                    {activeStep === steps.length && (
+                        <Paper square elevation={0} sx={{ p: 3 }}>
+                            <Typography>All steps completed - you&apos;re finished</Typography>
+                            <Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
+                                Reset
+                            </Button>
+                        </Paper>
+                    )}
+
+                    <div>
+                    <Typography variant="body2" align="center" sx={{ color: 'text.secondary', mt: 0 }}>
+                        Estoy de acuerdo con las {" "}
+                        <Link underline="always" sx={{ color: "#d32f2f" }}>
+                            Condiciones de servicio
+                        </Link>
+                        {" "}y{" "}
+                        <Link underline="always" sx={{ color: "#d32f2f" }}>
+                            Política de privacidad
                         </Link>
                         .
                     </Typography>
 
-                    <div>
-                        <Typography variant="subtitle2" sx={{ mt: 3, textAlign: 'center' }}>
+                        <Typography variant="subtitle2" sx={{ mt: 0, textAlign: 'center' }}>
                             Ya tiene una cuenta?&nbsp;
                             <Link to="/login" component={RouterLink}>
                                 Ingresa
                             </Link>
                         </Typography>
                     </div>
-                </ContentStyle>
-            </Container>
-        </RootStyle>
+
+            
+                </Col>
+            </Row>
+        </Container>
     );
 }