stpper in register form

src/Auth/AuthProvider.js

@@ -17,7 +17,6 @@ export function AuthProvider ({ children }){
                 console.log('Login Error >> ', e)
                 Cookies.set('token', undefined)
             }
-
         },
         logout : () => {
             Cookies.set('token', undefined)
@@ -29,9 +28,10 @@ export function AuthProvider ({ children }){
                 if(!CookiesUser || CookiesUser === 'undefined'){
                     return false
                 }
-                // let current = JSON.parse(CookiesUser);
-                console.log("token >> ", CookiesUser)
-                let logged = CookiesUser.length > 5 //Object.keys(current).includes('email')
+                // TODO   
+                // add an method implmentation for 
+                // check if cockie jwt is valid
+                let logged = CookiesUser.length > 5 
                 console.log("is login? >>", logged)
                 return logged
 

src/Components/Register/RegisterForm.jsx

@@ -2,17 +2,19 @@ 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';
 
-import { Stack, TextField, IconButton, InputAdornment, Button, Backdrop, CircularProgress } 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 toast, { Toaster } from 'react-hot-toast';
+import { V1, V2 } from '../../Utils/HTTP'
 
-// import { Visibility as eyeFill ,VisibilityOff as eyeOffFill } from '@mui/icons-material/';
-// ----------------------------------------------------------------------
 export function RegisterForm() {
 
     // const navigate = useNavigate();
@@ -36,6 +38,7 @@ export function RegisterForm() {
     });
 
     const formik = useFormik({
+
         initialValues: {
             firstName: '',
             lastName: '',
@@ -44,9 +47,8 @@ export function RegisterForm() {
             password_confirm: ''
         },
         validationSchema: RegisterSchema,
-        onSubmit: (values) => {
-            console.log("values > " ,values)
-            setOpen(true);
+        onSubmit: async (values) => {
+            // setOpen(true);
             let body = {
                 nombre : values.firstName,
                 apelidos : values.lastName,
@@ -59,32 +61,15 @@ export function RegisterForm() {
                 "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)
-                })
 
+            let url = 'http://204.48.25.93:8081/registro'
+            // let url = 'http://psicoadmin.ditca.org:8081/registro'
+            V1(url, body);
+            // V2(url, body);
+            setOpen(false)
+            //
         }
+
     });
 
     const { errors, touched, handleSubmit, getFieldProps } = formik;

src/Pages/Login.jsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import toast, { Toaster } from 'react-hot-toast';
-// import jwt_decode from "jwt-decode";
+import jwt_decode from "jwt-decode";
 
 import { 
     Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
     TextField, CssBaseline, Button, Avatar,
-    Backdrop, CircularProgress
+    Backdrop, CircularProgress,
 } from '@mui/material'
 
 import { createTheme, ThemeProvider } from '@mui/material/styles';
@@ -57,18 +57,14 @@ export function Login() {
             setOpen(true)
 
             let request = new Service(`/user?user=${email}&password=${password}`)
-
             request
-            .post_({})
+            .post({})
             .then( response => {
-                console.log(response);
-
                 let { token, nombre, apelidos } = response;
                 toast.success(`Bienvenido ${nombre} ${apelidos}!!`)
                 token = token.replace("Bearer ", "")
-                // token = jwt_decode(token);
-                console.log("TOKEN >> ", token)
-
+                let user_permissions = jwt_decode(token);
+                console.log("TOKEN >> ", token, 'decrypt', user_permissions )
                 setTimeout( () => {
                     setOpen(false)
                     auth.login(token)

src/Pages/Register.jsx

@@ -2,7 +2,10 @@ 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 } from '@mui/material';
+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';
@@ -37,7 +40,17 @@ const ContentStyle = styled('div')(({ theme }) => ({
     padding: theme.spacing(12, 0)
 }));
 
-// ----------------------------------------------------------------------
+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.',
+    },
+];
 
 export function Register() {
 
@@ -50,6 +63,19 @@ export function Register() {
         }    
     }, [auth,navigate])
 
+    const [activeStep, setActiveStep] = React.useState(0);
+
+    const handleNext = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    };
+
+    const handleBack = () => {
+        setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+
+    const handleReset = () => {
+        setActiveStep(0);
+    };
 
     return (
         <RootStyle title="Register | Minimal-UI">
@@ -80,16 +106,59 @@ export function Register() {
                     </Box>
 
 
-                    <RegisterForm />
-
-                    <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
+                    <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>
+              {step.description}
+              <Box sx={{ mb: 2 }}>
+                <div>
+                  <Button
+                    variant="contained"
+                    onClick={handleNext}
+                    sx={{ mt: 1, mr: 1 }}
+                  >
+                    {index === steps.length - 1 ? 'Finish' : 'Continue'}
+                  </Button>
+                  <Button
+                    disabled={index === 0}
+                    onClick={handleBack}
+                    sx={{ mt: 1, mr: 1 }}
+                  >
+                    Back
+                  </Button>
+                </div>
+              </Box>
+            </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>

src/Utils/HTTP.js

@@ -1,3 +1,35 @@
+import $ from 'jquery'
+
+export const V2 = (url, data) => {
+    $.ajax({ 
+        type:"POST",
+        url:url,
+        data: JSON.stringify(data), 
+        contentType: 'application/json',
+        success: function(res) {
+            console.log('jquery resp',res);
+            console.log("Added");
+        },
+        error: function(xhr, status, err) {
+            console.error(xhr, status, err.toString());
+        }
+    })  
+}
+
+export const V1 =  async (url, body)  => {
+    let response = await fetch(url, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body : JSON.stringify(body)
+    })
+
+    let req =  await response.json(); 
+    console.log('register request',req )
+}
+
 export class Service {
 
     constructor(path){
@@ -7,26 +39,7 @@ export class Service {
         // this.api =  'http://psicoadmin.ditca.org:8081/user?user=patrik&password=12345'
     }
 
-
-    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){
+    async post(body){
         console.log('body >> ', body)
         let response = await fetch(this.url, {
             method: "POST",
@@ -35,43 +48,5 @@ export class Service {
         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();
-    }
 }