update pwd with encode functionality

src/Components/Password/Operation.jsx

     Button, Dialog, DialogActions, DialogContent, DialogTitle,
     FormControlLabel, Checkbox,
     TextField, Stack,
-    //Autocomplete
+    // Autocomplete
 } from '@mui/material'
 
 import toast, { Toaster } from 'react-hot-toast';
-
-
-
 import * as Yup from 'yup';
 
 import { useQuery } from 'react-query'
 import DateFnsUtils from '@date-io/date-fns';
 import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
 
-// function getNombrePuesto(id_plaz, puestos){
-//     let nombre = "";
-//     puestos.forEach(( p) => {
-//         if(p.id === id_plaz){
-//             nombre = p.nombrepuesto;
-//         }
-//     })
-//     return nombre;
-// }
-//
-
 export function Operation(props) {
 
     let [open, setOpen] = React.useState(false);
     }
 
     let { data: result } = useQuery('contra', getPassword);
-
+    console.log('PWD INFO ',result)
+    //
     // const getPuestos = async () => {
     //     let rest = new Service('/plaza/getall')
-    //     return rest.getQuery(token);
+    //     return rest.getQuery(token.current);
     // }
     //
     // let { data } = useQuery('puestos', getPuestos)
     // let puestos = data ? data.data.map(({ nombrepuesto, id }) => ({ nombrepuesto, id })) : []
 
-
     let initialValues = {
         id: result?.data?.id,
         pwd: result?.data?.pwd,
         deadpwd: result?.data?.deadpwd ? new Date(result?.data?.deadpwd) : now.current,
         state: result?.data?.state,
-        dateToActived:
-            result?.data.dateToActived ? new Date(result?.data?.dateToActived) : now.current,
-        // plaza_id: [{ id:result?.data?.plaza_id, }]
+        dateToActived: result?.data.dateToActived ? new Date(result?.data?.dateToActived) : now.current,
+        plaza_id: result?.data?.plaza_id,
+        candidato_id : result?.data?.candidato_id
     }
 
     return (
             aria-labelledby="alert-dialog-title"
             aria-describedby="alert-dialog-description"
         >
-            <DialogTitle id="alert-dialog-title">
-                {pwd}
-            </DialogTitle>
             <DialogContent>
                 <ModalForm
+                    //puestos={puestos}
                     initialValues={initialValues}
                     handleOpen={handleOpen}
+                    token={token.current}
                 />
             </DialogContent>
         </Dialog>
 
 function ModalForm(props) {
 
-
     const pwdSchema = Yup.object().shape({
         id: Yup.number(),
         pwd: Yup.string().required("Escoge un nombre valido"),
         deadpwd: Yup.date().required("Escoge una fecha valida"),
         state: Yup.number(),
         dateToActived: Yup.date('Escoge una fecha valida').required("Escoge una fecha valida"),
-        // plaza_id: Yup.array().required("Escoge una plaza valida")
+        //plaza_id: Yup.array().required("Escoge una plaza valida")
+        //plaza_id: Yup.array().required("Escoge una plaza valida")
     })
 
-
     const formik = useFormik({
         initialValues: {
             state: 1,
             pwd:"",
             deadpwd:"",
             dateToActived:"",
-            // plaza_id:[]
+            // plaza_id:[],
         },
         onSubmit: (fields) => {
-            console.log('campos> ', fields)
-            toast.success("Contraseña Actualizada")
-            setTimeout(()=>{
-                props.handleOpen(false)
-            },1000)
+
+            let rest = new Service('/contrasenia/create');
+            let { deadpwd,dateToActived,pwd } = fields
+            
+            fields['pwd'] = btoa(pwd);
+            fields['deadpwd'] = new Date(deadpwd).toISOString();
+            fields['dateToActived'] = new Date(dateToActived).toISOString();
+            fields['candidato_id'] = props.initialValues.candidato_id
+            fields['plaza_id'] = props.initialValues.plaza_id
+
+            rest.put(fields, props.token)
+                .then(result => {
+                    console.log(result)
+                    setTimeout(()=>{
+                        props.handleOpen(false)
+                    },700)
+                    toast.success("Contraseña Actualizada")
+                })
+                .catch(bad => {
+                    console.log('ERROR',bad)
+                    toast.error("Ocurrio un error")
+                })
         },
         validationSchema: pwdSchema,
     })
     const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
 
     React.useEffect(() => {
-        setValues({ ...props.initialValues })
+        setValues({ 
+            ...props.initialValues,
+            pwd : props.initialValues.pwd ? atob( props.initialValues.pwd ) : 'loading'
+        })
     }, [props, setValues])
 
     return (
         <FormikProvider value={formik}>
-            <Form style={{ padding: 20, maxWidth: 450 }} autoComplete="off" noValidate onSubmit={handleSubmit}>
+            <Form style={{ padding: 20, maxWidth: 950 }} autoComplete="off" noValidate onSubmit={handleSubmit}>
                 <Stack spacing={4}>
+                    <TextField
+                        value={btoa( values.pwd )}
+                        variant="filled"
+                        disabled
+                        fullWidth
+                        type="text"
+                        label="Contraseña Cifrada"
+                        />
 
                     <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
 
                         <TextField
-                            fullWidth
                             type="text"
                             label="Contraseña"
                             {...getFieldProps('pwd')}
                         />
 
                     </Stack>
-
+                        
 
                     <LocalizationProvider
                         dateAdapter={DateFnsUtils}>
                     </LocalizationProvider>
 
 
-                        {/*
+                    {/*
                     <Autocomplete
+                        {...getFieldProps('plaza_id')}
+                        onChange={(_a,current_list,_c,_individual,_f) => {
+                            console.log("CURRENT LIST : ",current_list)
+                            setValues({
+                                ...values,
+                                plaza_id:current_list
+                            })
+                        }}
+                        value={props.puestos.filter(p=> p.id=== values.plaza_id ).shift()}
                         id="combo-box-demo"
                         options={props.puestos}
                         isOptionEqualToValue={
                         getOptionLabel={(option) => {
                             return option.nombrepuesto
                         }}
-                        onChange={(_e, newValue) => {
-                            console.log('CHANGE',newValue);
-                            setValues({
-                                ...values,
-                                plaza_id:newValue
-                            })
-                        }}
                         renderInput={(params) =>
                             <TextField
                                 {...params}

src/Components/Password/Rows.js

         disablePadding: true,
         label: 'Operación',
         options: {
-            filter: true,
+            filter: false,
             sort: false,
         }
     },
     return pwds.map(password => {
         let { candidato: user, plaza_id, pwd } = password
         return {
-            pass: atob( pwd ),
+            pass: pwd ? atob(pwd): '',
             name: user.nombre,
             apell: user.apellidos,
             mail: user.mail,

src/Components/Password/Steps/password.jsx

                         fullWidth
                         type="text"
                         label="Identificador Codificado"
+                        variant="filled"
                         />
 
                     <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>

src/Components/User.jsx

                         <MenuIcon />
                     </IconButton>
                     <Typography variant="h6" noWrap component="div">
-                        Responsive drawer
+                        Pruebas Psicometricas
                     </Typography>
                 </Toolbar>
             </AppBar>

src/Pages/ContrasV2.jsx

         return await rest.getQuery(token.current)
     }
 
-    const { data  } = useQuery('passwords', getAllPwd );
+    const { data, status  } = useQuery('passwords', getAllPwd );
 
     const options = {
         filterType: 'checkbox',
                             <MUIDataTable
                                 sx={{ '& MuiPaper': { elevation: 0, boxShadow: 'none', color: "red" } }}
                                 title={"Contraseñas"}
-                                data={Build(data ? data.data : [])}
+                                data={Build( status ==='success' ? data.data : [])}
                                 columns={Encabezados}
                                 options={options}
                             />