add candi and pwd

src/App.css

@@ -261,6 +261,8 @@
 
 .name_header{
     max-width:20px;
-    background-color:whitesmoke;
     font-weight:bold;
 }
+.title_td{
+    font-weight: bold;
+}

src/Components/Modal/PasswordModal.jsx

@@ -93,6 +93,7 @@ export function HelpModal(props) {
                 <Resume
                     handleBack={handleBack}
                     password={password}
+                    handleClose={handleClose}
                 />
         },
     ];
@@ -144,7 +145,7 @@ export function HelpModal(props) {
                     ) : (
                         <React.Fragment>
 
-                            <Box style={{ padding: 18, marginTop: 10 }}>
+                            <Box style={{ padding: 18, marginTop: 2 }}>
                                 {steps[activeStep].operation}
                             </Box>
 

src/Components/Password/Steps/resume.jsx

@@ -1,66 +1,184 @@
 import * as React from 'react';
+
 import { Table } from 'react-bootstrap';
+import {
+    Box, Button, LinearProgress,
+    Backdrop, CircularProgress
+} from '@mui/material';
+
+import toast, { Toaster } from 'react-hot-toast';
+
+import { useMutation } from 'react-query';
+import { Service } from '../../../Utils/HTTP.js'
+import useAuth from '../../../Auth/useAuth.js'
 
-import { Box, Button } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+let theme = createTheme({
+    status: {
+        success: '#fd4b4b'
+    },
+    palette: {
+        primary: {
+            main: '#fd4b4b',
+        },
+        secondary: {
+            main: '#fd4b4b',
+        },
+    },
+});
 
 export function Resume(props) {
 
-    let {handleBack, password: key } = props
+    let { handleBack, password: key } = props
     const fmt = React.useRef({ weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })
+    const [pwdID, setPwdID] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    const auth = useAuth();
+    const token = auth.getToken();
+
+    const savePassword = async (body) => {
+        let rest = new Service('/contrasenia/create')
+        return await rest.postQuery(body, token)
+    }
+
+    const saveCandidato = async (body) => {
+        let rest = new Service('/passwordcandidato/candidato')
+        return await rest.postQuery(body, token)
+    }
+
+    const pwdMutation = useMutation('password', savePassword);
+    const candiMutation = useMutation('candidato', saveCandidato);
+
+    const saveStepper = () => {
+
+        setLoading(true);
+
+        let {
+            deadpwd, dateToActived, puesto, pwd,
+            nombres, apellidos, sendmail, nombrepuesto, nombreEmpresa
+        } = key;
+        console.log("KEY: ", key)
 
-    return(
+        let pwdBody = {
+            id: -1,
+            pwd,
+            link: "www.psicoadmin.com",
+            deadpwd: new Date(deadpwd).toISOString(),
+            state: 1,
+            dateToActived: new Date(dateToActived).toISOString(),
+            plaza_id: puesto[0].id
+        }
+
+        pwdMutation.mutate(pwdBody, {
+            onSuccess: (data) => {
+
+                let { id: password_id } = data.data;
+                setPwdID(password_id);
+
+                let candidatoBody = {
+                    id: -1,
+                    nombres,
+                    apellidos,
+                    sendmail: sendmail ? 1 : 0,
+                    idContrasenia: password_id,
+                    nombrepuesto,
+                    nombreEmpresa
+                }
+
+                candiMutation.mutate(candidatoBody, {
+                    onSuccess: (data) => {
+                        console.log("OK LETS GO >> ", data)
+                        toast.success("Contraseña agregada exitosamente!!")
+                        setLoading(false);
+                    },
+                    onError: () => {
+                        toast.error("Ups!! error al crear el candidato")
+                        setLoading(false);
+                    }
+                })
+
+
+            },
+            onError: () => {
+                console.log("No se pudo guardar pwd")
+                setLoading(false);
+                toast.error("Ups!! Ocurrio un error, inténtalo más tarde")
+            }
+        })
+    }
+
+    return (
         <React.Fragment>
-            <Table>
-                <thead>
-                    <tr>
-                        <th>{key.pwd}</th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>{"Candidato"}</td>
-                        <td colSpan={2}>{key.nombres + " " + key.apellidos} - {key.mail}</td>
-                    </tr>
-                    <tr>
-                        <td>{"Puesto"}</td>
-                        <td colSpan={2}>{key.puesto[0].nombrepuesto}</td>
-                    </tr>
-                    <tr>
-                        <td>{"Empresa"}</td>
-                        <td colSpan={2}>{key.nombreEmpresa}</td>
-                    </tr>
-                    <tr>
-                        <td>{"Fecha Activación"}</td>
-                        <td colSpan={2}>{new Date( key.dateToActived ).toLocaleDateString('es-GT',fmt.current )}</td>
-                    </tr>
-                    <tr>
-                        <td>{"Fecha de Vencimiento"}</td>
-                        <td colSpan={2}>{new Date( key.deadpwd ).toLocaleDateString('es-GT',fmt.current )}</td>
-                    </tr>
-                </tbody>
-            </Table>
-
-
-            <Box sx={{ mb: 2 }}>
-                <div style={{ paddingTop: 15 }}>
-                    <Button
-                        type="submit"
-                        className="registerBtn"
-                        variant="contained"
-                        sx={{ mt: 1, mr: 1 }}
-                    >
-                        {'Guardar'}
-                    </Button>
-                    <Button
-                        disabled={false}
-                        onClick={handleBack}
-                        sx={{ mt: 1, mr: 1 }}
-                    >
-                        Regresar
-                    </Button>
-                </div>
-            </Box>
+            <ThemeProvider theme={theme}>
+                {loading ? (
+                    <Box sx={{ paddingBottom: 3 }}>
+                        <LinearProgress color="inherit" />
+                    </Box>
+                ) : null}
+                <Table>
+                    <thead>
+                        <tr>
+                            <th>{key.pwd} ✅</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td className="title_td">{"Candidato"}</td>
+                            <td colSpan={2}>{key.nombres + " " + key.apellidos} - {key.mail}</td>
+                        </tr>
+                        <tr>
+                            <td className="title_td">{"Puesto"}</td>
+                            <td colSpan={2}>{key.puesto[0].nombrepuesto}</td>
+                        </tr>
+                        <tr>
+                            <td className="title_td">{"Empresa"}</td>
+                            <td colSpan={2}>{key.nombreEmpresa}</td>
+                        </tr>
+                        <tr>
+                            <td className="title_td">{"Fecha Activación"}</td>
+                            <td colSpan={2}>{new Date(key.dateToActived).toLocaleDateString('es-GT', fmt.current)}</td>
+                        </tr>
+                        <tr>
+                            <td className="title_td">{"Fecha de Vencimiento"}</td>
+                            <td colSpan={2}>{new Date(key.deadpwd).toLocaleDateString('es-GT', fmt.current)}</td>
+                        </tr>
+                    </tbody>
+                </Table>
+
+
+                <Box sx={{ mb: 2 }}>
+                    <div style={{ paddingTop: 15 }}>
+                        <Button
+                            disabled={loading}
+                            style={{
+                                color: loading ? 'white' : ''
+                            }}
+                            onClick={saveStepper}
+                            className="registerBtn"
+                            variant="contained"
+                            sx={{ mt: 1, mr: 1 }}
+                        >
+                            {'Guardar'}
+                        </Button>
+                        <Button
+                            disabled={loading}
+                            onClick={handleBack}
+                            sx={{ mt: 1, mr: 1 }}
+                        >
+                            Regresar
+                        </Button>
+                    </div>
+                </Box>
+            </ThemeProvider>
+            <Backdrop
+                sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+                open={loading}
+                onClick={() => console.log("close fetching")} >
+                <CircularProgress color="inherit" />
+            </Backdrop>
+            <Toaster position="bottom-right" />
         </React.Fragment>
     )
 }