register mokup

src/Components/Register/PersonalInfo.js

@@ -0,0 +1,107 @@
+import { useFormik, Form, FormikProvider } from 'formik'; // import { useNavigate } from 'react-router-dom';
+import * as Yup from 'yup';
+
+import { 
+    Stack, TextField,
+} from '@mui/material';
+
+export function PersonalInfo() {
+
+    // let navigate = useNavigate()
+
+    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')
+    });
+
+    const formik = useFormik({
+
+        initialValues: {
+            nit: '',
+            cui: '',
+            direccion: '',
+            nacimiento: new Date(),
+            telefono: ''
+        },
+        validationSchema: RegisterSchema,
+        onSubmit: async (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'
+        }
+
+    });
+
+
+    const { errors, touched, handleSubmit, getFieldProps } = formik;
+
+    return(
+        <FormikProvider style={{ padding : 15}} value={formik}>
+            <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
+                <Stack spacing={3}>
+                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+                        <TextField
+                            label="Numero de Nit"
+                            fullWidth
+                            {...getFieldProps('nit')}
+                            error={Boolean(touched.nit && errors.nit)}
+                            helperText={touched.nit && errors.nit}
+                        />
+
+                        <TextField
+                            label="CUI/DPI"
+                            fullWidth
+                            {...getFieldProps('cui')}
+                            error={Boolean(touched.cui && errors.cui)}
+                            helperText={touched.cui && errors.cui}
+                        />
+                    </Stack>
+
+                    <TextField
+                        fullWidth
+                        type="text"
+                        label="Dirección"
+                        {...getFieldProps('direccion')}
+                        error={Boolean(touched.direccion && errors.direccion)}
+                        helperText={touched.direccion && errors.direccion}
+                    />
+                    
+                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+                        <TextField
+                            type="date"
+                            label="Fecha de nacimiento"
+                            fullWidth
+                            defaultValue={'2021-01-10'}
+                            InputLabelProps={{ shrink: true, required: true }}
+                            {...getFieldProps('nacimiento')}
+                            error={Boolean(touched.nacimiento && errors.nacimiento)}
+                            helperText={touched.nacimiento && errors.nacimiento}
+                        />
+
+                        <TextField
+                            label="Telefono"
+                            fullWidth
+                            {...getFieldProps('telefono')}
+                            error={Boolean(touched.telefono && errors.telefono)}
+                            helperText={touched.telefono && errors.telefono}
+                        />
+                    </Stack>
+
+
+                </Stack>
+            </Form>
+        </FormikProvider>
+    )
+}

src/Components/Register/RegisterForm.jsx

@@ -2,18 +2,18 @@ import React from 'react'
 import * as Yup from 'yup';
 import { useState } from 'react';
 import { useFormik, Form, FormikProvider } from 'formik';
-import { useNavigate } from 'react-router-dom';
+// import { useNavigate } from 'react-router-dom';
 import { Icon } from '@iconify/react';
 
 import { 
     Stack, TextField, IconButton, InputAdornment, 
-    Button, Backdrop, CircularProgress,
+    Backdrop, CircularProgress,
 } from '@mui/material';
 
 import eyeFill from '@iconify/icons-eva/eye-fill';
 import eyeOffFill from '@iconify/icons-eva/eye-off-fill';
-import toast, { Toaster } from 'react-hot-toast';
-import { V1, V2 } from '../../Utils/HTTP'
+import { Toaster } from 'react-hot-toast';
+// import { V1, V2 } from '../../Utils/HTTP'
 
 export function RegisterForm() {
 
@@ -24,7 +24,7 @@ export function RegisterForm() {
         setOpen(false);
     };
     
-    let navigate = useNavigate()
+    // let navigate = useNavigate()
 
     const RegisterSchema = Yup.object().shape({
         firstName: Yup.string()
@@ -63,8 +63,9 @@ export function RegisterForm() {
             }
 
             let url = 'http://204.48.25.93:8081/registro'
+            console.log(body, url)
             // let url = 'http://psicoadmin.ditca.org:8081/registro'
-            V1(url, body);
+            // V1(url, body);
             // V2(url, body);
             setOpen(false)
             //
@@ -75,7 +76,7 @@ export function RegisterForm() {
     const { errors, touched, handleSubmit, getFieldProps } = formik;
 
     return (
-        <FormikProvider value={formik}>
+        <FormikProvider style={{ padding : 15 }} value={formik}>
             <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
                 <Stack spacing={3}>
                     <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
@@ -143,13 +144,17 @@ export function RegisterForm() {
                         helperText={touched.password_confirm && errors.password_confirm}
                     />
 
-                    <Button 
-                        type="submit"
-                        size="large"
-                        style={{ backgroundColor : '#d32f2f'}}
-                        variant="contained" >
-                        Registrarme
-                    </Button>
+
+        {/*
+            <Button 
+            type="submit"
+            size="large"
+            style={{ backgroundColor : '#d32f2f'}}
+            variant="contained" >
+            Registrarme
+            </Button>
+            */
+        }
 
                 </Stack>
             </Form>

src/Pages/Register.jsx

@@ -6,10 +6,11 @@ import {
     Box, Card, Link, Container, Typography,
     StepLabel,Step,Stepper, Button,Paper, StepContent
 } from '@mui/material';
-import AuthLayout from '../Components/Register/AuthLayout';
 
 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';
 
 import Mock from  '../Images/register_mok.png'
 import useAuth from '../Auth/useAuth';
@@ -44,11 +45,9 @@ const steps = [
     {
         label: 'Información de tu cuenta',
         description: <RegisterForm/>
-    },
-    {
+    }, {
         label: 'Datos Personales',
-        description:
-        'An ad group contains one or more ads which target a shared set of keywords.',
+        description: <PersonalInfo/>
     },
 ];
 
@@ -118,23 +117,23 @@ export function Register() {
             >
               {step.label}
             </StepLabel>
-            <StepContent>
+        <StepContent style={{ padding : 25}}>
               {step.description}
               <Box sx={{ mb: 2 }}>
-                <div>
+                <div style={{ paddingTop  : 15}}>
                   <Button
                     variant="contained"
                     onClick={handleNext}
                     sx={{ mt: 1, mr: 1 }}
                   >
-                    {index === steps.length - 1 ? 'Finish' : 'Continue'}
+                    {index === steps.length - 1 ? 'Registrarme' : 'Siguiente'}
                   </Button>
                   <Button
                     disabled={index === 0}
                     onClick={handleBack}
                     sx={{ mt: 1, mr: 1 }}
                   >
-                    Back
+                    Regresar
                   </Button>
                 </div>
               </Box>