test cors register

src/Components/Register/RegisterForm.jsx

@@ -1,29 +1,38 @@
+import React from 'react'
 import * as Yup from 'yup';
 import { useState } from 'react';
 import { useFormik, Form, FormikProvider } from 'formik';
+import { Service } from '../../Utils/HTTP'
 import { useNavigate } from 'react-router-dom';
 import { Icon } from '@iconify/react';
-// material
-import { Stack, TextField, IconButton, InputAdornment } from '@mui/material';
+
+import { Stack, TextField, IconButton, InputAdornment, Button, Backdrop, CircularProgress } from '@mui/material';
 import eyeFill from '@iconify/icons-eva/eye-fill';
 import eyeOffFill from '@iconify/icons-eva/eye-off-fill';
-import Button from '@mui/material/Button';
+import toast, { Toaster } from 'react-hot-toast';
 
 // import { Visibility as eyeFill ,VisibilityOff as eyeOffFill } from '@mui/icons-material/';
 // ----------------------------------------------------------------------
-
 export function RegisterForm() {
-    const navigate = useNavigate();
+
+    // const navigate = useNavigate();
     const [showPassword, setShowPassword] = useState(false);
+    const [open, setOpen] = React.useState(false);
+    const handleClose = () => {
+        setOpen(false);
+    };
+    
+    let navigate = useNavigate()
 
     const RegisterSchema = Yup.object().shape({
         firstName: Yup.string()
-        .min(2, 'Too Short!')
-        .max(50, 'Too Long!')
-        .required('First name required'),
-        lastName: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Last name required'),
-        email: Yup.string().email('Email must be a valid email address').required('Email is required'),
-        password: Yup.string().required('Password is required')
+        .min(2, 'Demasiado corto!')
+        .max(50, 'Demasiado largo!')
+        .required('Tu nombre es requerido'),
+        lastName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!').required('El apellido es requerido'),
+        email: Yup.string().email('El correo no es valido').required('Email es requerido'),
+        password: Yup.string().min(5, 'La contraseña debe contener mínimo 5 caracteres').required('la contraseña es requerida'),
+        password_confirm: Yup.string().required('Las contraseñas no coincidien').oneOf([Yup.ref('password'), null], 'Las contraseñas no coincidien')
     });
 
     const formik = useFormik({
@@ -31,11 +40,50 @@ export function RegisterForm() {
             firstName: '',
             lastName: '',
             email: '',
-            password: ''
+            password: '',
+            password_confirm: ''
         },
         validationSchema: RegisterSchema,
-        onSubmit: () => {
-            navigate('/dashboard', { replace: true });
+        onSubmit: (values) => {
+            console.log("values > " ,values)
+            setOpen(true);
+            let body = {
+                nombre : values.firstName,
+                apelidos : values.lastName,
+                email : values.email,
+                username : values.email,
+                pwd : values.password,
+                "nit": "5345435",
+                "cui": "555555",
+                "direccio": "4 calle zona 1",
+                "fechacumple": "2021-01-01",
+                "telefono" : "45435345",
+            }
+            // navigate('/dashboard', { replace: true });
+            let request = new Service('/registro');
+            request
+                .post(body)
+                .then( response => {
+                    console.log(response);
+                    let { status } = response;
+                    if(status !== 200){
+                        setOpen(false)
+                        return toast.error("Ups! verifica tus datos")
+                    }
+
+                    toast.success(`Bienvenido, ingresa tus credenciales`)
+                    setTimeout( () => {
+                        setOpen(false)
+                        navigate('/login')
+                        // auth.login(token)
+                    }, 5000)
+                }) 
+                .catch( err => {
+                    setOpen(false)
+                    toast.error("Solicitud incorrecta")
+                    console.log("ERROR ", err)
+                })
+
         }
     });
 
@@ -47,16 +95,16 @@ export function RegisterForm() {
                 <Stack spacing={3}>
                     <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
                         <TextField
+                            label="Nombre"
                             fullWidth
-                            label="First name"
                             {...getFieldProps('firstName')}
                             error={Boolean(touched.firstName && errors.firstName)}
                             helperText={touched.firstName && errors.firstName}
                         />
 
                         <TextField
+                            label="Apellidos"
                             fullWidth
-                            label="Last name"
                             {...getFieldProps('lastName')}
                             error={Boolean(touched.lastName && errors.lastName)}
                             helperText={touched.lastName && errors.lastName}
@@ -67,19 +115,17 @@ export function RegisterForm() {
                         fullWidth
                         autoComplete="username"
                         type="email"
-                        label="Email address"
+                        label="Correo Electrónico"
                         {...getFieldProps('email')}
                         error={Boolean(touched.email && errors.email)}
                         helperText={touched.email && errors.email}
                     />
 
-
-
                     <TextField
                         fullWidth
                         autoComplete="current-password"
                         type={showPassword ? 'text' : 'password'}
-                        label="Password"
+                        label="Contraseña"
                         {...getFieldProps('password')}
                         InputProps={{
                             endAdornment: (
@@ -96,10 +142,9 @@ export function RegisterForm() {
 
                     <TextField
                         fullWidth
-                        autoComplete="current-password"
                         type={showPassword ? 'text' : 'password'}
-                        label="Password"
-                        {...getFieldProps('password')}
+                        label="Confirma contraseña"
+                        {...getFieldProps('password_confirm')}
                         InputProps={{
                             endAdornment: (
                                 <InputAdornment position="end">
@@ -109,11 +154,12 @@ export function RegisterForm() {
                                 </InputAdornment>
                             )
                         }}
-                        error={Boolean(touched.password && errors.password)}
-                        helperText={touched.password && errors.password}
+                        error={Boolean(touched.password_confirm && errors.password_confirm)}
+                        helperText={touched.password_confirm && errors.password_confirm}
                     />
 
                     <Button 
+                        type="submit"
                         size="large"
                         style={{ backgroundColor : '#d32f2f'}}
                         variant="contained" >
@@ -122,6 +168,17 @@ export function RegisterForm() {
 
                 </Stack>
             </Form>
+            <Toaster
+                position="top-left"
+                reverseOrder={false}
+            />
+            <Backdrop
+                sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+                open={open}
+                onClick={handleClose}
+            >
+                <CircularProgress color="inherit" />
+            </Backdrop>
         </FormikProvider>
     );
 }

src/Pages/Login.jsx

@@ -59,7 +59,7 @@ export function Login() {
             let request = new Service(`/user?user=${email}&password=${password}`)
 
             request
-            .post({})
+            .post_({})
             .then( response => {
                 console.log(response);
 

src/Pages/Register.jsx

@@ -3,15 +3,14 @@ import { Link as RouterLink } from 'react-router-dom';
 
 import { styled } from '@mui/material/styles';
 import { Box, Card, Link, Container, Typography } from '@mui/material';
-
-// import AuthLayout from '../layouts/AuthLayout';
 import AuthLayout from '../Components/Register/AuthLayout';
 
 import Page from '../Components/Register/Page';
 import { RegisterForm } from '../Components/Register/RegisterForm';
-// import MHidden from '../Components/Register/MHidden';
 
 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')]: {
@@ -41,12 +40,24 @@ const ContentStyle = styled('div')(({ theme }) => ({
 // ----------------------------------------------------------------------
 
 export function Register() {
+
+    let auth = useAuth();
+    let navigate = useNavigate()
+
+    React.useEffect(() => {
+        if(auth.isLogged()){
+            return navigate('/dashboard/home')
+        }    
+    }, [auth,navigate])
+
+
     return (
         <RootStyle title="Register | Minimal-UI">
+
             <AuthLayout>
-                Already have an account? &nbsp;
-                <Link underline="none" variant="subtitle2" component={RouterLink} to="/login">
-                    Login
+                Ya tiene una cuenta?&nbsp;
+                <Link to="/login" component={RouterLink}>
+                    Ingresa
                 </Link>
             </AuthLayout>
 
@@ -72,22 +83,22 @@ export function Register() {
                     <RegisterForm />
 
                     <Typography variant="body2" align="center" sx={{ color: 'text.secondary', mt: 3 }}>
-                        By registering, I agree to Minimal&nbsp;
-                        <Link underline="always" sx={{ color: 'text.primary' }}>
-                            Terms of Service
+                        Estoy de acuerdo con las {" "}
+                        <Link underline="always" sx={{ color: "#d32f2f" }}>
+                            Condiciones de servicio
                         </Link>
-                        &nbsp;and&nbsp;
-                        <Link underline="always" sx={{ color: 'text.primary' }}>
-                            Privacy Policy
+                        {" "}y{" "}
+                        <Link underline="always" sx={{ color: "#d32f2f" }}>
+                            Política de privacidad
                         </Link>
                         .
                     </Typography>
 
                     <div>
                         <Typography variant="subtitle2" sx={{ mt: 3, textAlign: 'center' }}>
-                            Already have an account?&nbsp;
+                            Ya tiene una cuenta?&nbsp;
                             <Link to="/login" component={RouterLink}>
-                                Login
+                                Ingresa
                             </Link>
                         </Typography>
                     </div>

src/Utils/HTTP.js

@@ -7,13 +7,71 @@ export class Service {
         // this.api =  'http://psicoadmin.ditca.org:8081/user?user=patrik&password=12345'
     }
 
-    async post(body){
+
+    async browser(){
+        fetch("http://psicoadmin.ditca.org:8081/registro", {
+            "headers": {
+                "accept": "*/*",
+                "accept-language": "en-US,en;q=0.9,es;q=0.8",
+                "cache-control": "no-cache",
+                "pragma": "no-cache",
+                "sec-gpc": "1"
+            },
+            "referrer": "http://localhost:3000/",
+            "referrerPolicy": "strict-origin-when-cross-origin",
+            "body": null,
+            "method": "POST",
+            "mode": "cors",
+            "credentials": "omit"
+        });
+    }
+
+    async post_(body){
+        console.log('body >> ', body)
         let response = await fetch(this.url, {
             method: "POST",
-            data : body
+            body : JSON.stringify(body)
         })
         return await response.json(); 
     }
+    
+    async post(body){
 
+        let headers ={
+
+            "Accept-Encoding" : "gzip, deflate, br",
+            "accept": "*/*",
+            "accept-language": "en-US,en;q=0.9,es;q=0.8",
+            "cache-control": "no-cache",
+            "content-type": "text/plain;charset=UTF-8",
+            "pragma": "no-cache",
+            "sec-gpc": "1",
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            // "Content-Length": body.Length
+        }
+
+        headers = {
+            // 'Accept': '*/*',
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            "accept-language": "en-US,en;q=0.9,es;q=0.8",
+            "cache-control": "no-cache",
+            "pragma": "no-cache",
+            "sec-gpc": "1"
+        }
+
+        let response = await fetch("http://psicoadmin.ditca.org:8081/registro", {
+            // "headers": new Headers( headers ), 
+            "headers": new Headers( headers ),
+            "referrer": "http://localhost:3000/",
+            "referrerPolicy": "strict-origin-when-cross-origin",
+            "body": JSON.stringify(body),
+            "method": "POST",
+            "mode": "cors",
+        });    
+        console.log(response);
+        return await response.json();
+    }
 }