src/App.css

   align-items: flex-start;
   align-content: flex-start;
 }
-#demo-radio-buttons-group-label{
+.demo-radio-buttons-group-label{
   font-weight: bold;
+  padding-top:10px !important;
+  padding-bottom:10px !important;
 }
 .typepwdlist{
   border-bottom: 1px solid gainsboro;
-  padding: 15px;
+  /* padding: 15px; */
 }
 .titleMarked{
   /* color : gray; */
   flex-direction: column;
   flex-wrap: wrap;
 }
+
+.control_flow_role{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-end;
+}

src/App.js

 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      refetchOnWindowFocus: false,
+      refetchOnWindowFocus: true,
     },
   },
 })

src/Components/Password/Steps/TypePwd.jsx

   FormControl, RadioGroup, FormControlLabel, FormLabel, Checkbox,
   TextField, Box, FormGroup, Button, Stack, Collapse
 } from '@mui/material'
-
-import { useForm } from "react-hook-form";
+import toast, { Toaster } from 'react-hot-toast';
 
 import { Simple as Loading } from '../../Generics/loading.jsx'
 
   CANDIDATO: 3,
 }
 
-function Marked({ step }) {
-  return (<strong className="important_marked">{step}</strong>)
-}
-
-function Title({ title, step }) {
-  return (<p className="titleMarked">{title}</p>)
-}
-
 function PasswordInfoForm({ setUser, user }) {
 
   return (
 }
 
 
+function validateMail(email) {
+  let re = /\S+@\S+\.\S+/;
+  return re.test(email);
+}
+
+function validatePassword(password) {
+  let re = /[A-Za-z0-9]{8,}/;
+  return re.test(password);
+}
+
 
 function PermisosList(props) {
 
-  let { recursos,selectedRole, setSelectedRole } = props
+  let { recursos, selectedRole, setSelectedRole } = props
 
   return (
     <FormControl className="rolelist" >
-      <FormLabel id="demo-radio-buttons-group-label">{recursos.label}</FormLabel>
+      <FormLabel className="demo-radio-buttons-group-label">{recursos.label}</FormLabel>
       <RadioGroup
         aria-labelledby="demo-radio-buttons-group-label"
         defaultValue="female"
 
   return (
     <FormControl>
-      <FormLabel id="demo-radio-buttons-group-label">Nivel de Acceso</FormLabel>
+      <FormLabel className="demo-radio-buttons-group-label">Nivel de Acceso</FormLabel>
       <FormGroup
         className="seluser_type"
         row
   // console.log(props)
 
   const auth = useSelector(state => state.token)
+  const profile = useSelector(state => state.user.profile)
   const [recursos, setRecursos] = useState(null)
   const [selectedRole, setSelectedRole] = useState([])
   const [userType, setUserType] = useState(ROLE.CANDIDATO)
   const [user, setUser] = useState(null)
 
-  const saveUser = () => {
+  const postUser = async (body) => {
+    try {
+      let rest = new Service('/addSubUser')
+      let req = {
+        "username": body.email,
+        "nombre": body.email,
+        "apelidos": body.email,
+        "decription": "somthing",
+        "pwd": body.password,
+        "idEmpresa": profile.id,
+      }
+      let response = await rest.post(req, auth.token)
+      return response.id || 0;
+    } catch (e) {
+      console.log('CATCH:', e)
+      return 0;
+    }
+  }
+
+  const saveUser = async () => {
     //TODO: trigger form submit
-    console.log(user, selectedRole)
+    if (user === null || !user || user === undefined) return toast.error('Falta informacion del usuario')
+
+    let { email, password } = user
+
+    let validMail = validateMail(email)
+    if (!validMail) return toast.error('Correo invalido')
+
+    let validPwd = validatePassword(password)
+    if (!validPwd) return toast.error('Contraseña invalida')
+
+    if (userType === ROLE.ASISTENTE && selectedRole.length === 0) return toast.error('Selecciona al menos un rol')
+
+    let id = await postUser(user)
+    if (id === 0) return toast.error('Ocurrio un error al crear el usuario')
+    toast.success('Usuario creado con exito')
+    console.log("id:", id)
+    if (userType === ROLE.ASISTENTE) postResources(id)
+    clearForm()
+
+  }
+
+  const postResources = (user_id) => {
+    let rest = new Service('/rolAdd/' + user_id)
+    let selected = selectedRole.map(id => ({ id: id, path: "" }))
+    console.log('selected:', selected)
+    let saved = rest.post(selected, auth.token)
+    console.log('saved:', saved)
+  }
+
+  const clearForm = () => {
+    setUser(null)
+    setSelectedRole([])
+    setUserType(ROLE.CANDIDATO)
   }
 
+
   useEffect(() => {
 
     const getRecursos = () => {
   return (
     <div class="gapwdrole">
 
-      <div className="typepwdlist">
+      <div className="typepwdlist control_flow_role">
         <TipoUsuarios type={userType} setType={setUserType} />
+
+
+        <Box sx={{ mb: 2 }}>
+          <div style={{ paddingTop: 15 }}>
+            <Button
+              onClick={parseInt(userType) === ROLE.CANDIDATO ? props.handleNext : saveUser}
+              className="registerBtn"
+              variant="contained"
+              sx={{ mt: 1, mr: 1 }}
+            >
+              {parseInt(userType) === ROLE.CANDIDATO ? 'Siguiente' : 'Guardar'}
+            </Button>
+            <Button
+              disabled={true}
+              onClick={props.handleBack}
+              sx={{ mt: 1, mr: 1 }}
+            >
+              Regresar
+            </Button>
+          </div>
+        </Box>
+
       </div>
 
       <Collapse orientation="vertical" in={parseInt(userType) === ROLE.ADMIN} >
         <div className="typepwdlist">
-          <Title title="Informacion de la contraseña" step={"B"} />
+          <FormLabel className="demo-radio-buttons-group-label">Información del usuario</FormLabel>
           <PasswordInfoForm setUser={setUser} user={user} />
         </div>
       </Collapse>
 
       <Collapse orientation="vertical" in={parseInt(userType) === ROLE.ASISTENTE} >
         <div className="typepwdlist">
-          <Title title="Informacion de la contraseña" step={"B"} />
+          <FormLabel className="demo-radio-buttons-group-label">Información del usuario</FormLabel>
           <PasswordInfoForm setUser={setUser} user={user} />
         </div>
 
         <div className="typepwdlist">
-          <Title title="Selecciona los privilegios" step={"C"} />
+          <FormLabel className="demo-radio-buttons-group-label">Selecciona los privilegios</FormLabel>
           {
             recursos &&
             Object.keys(recursos).map((k) =>
         </div>
       </Collapse>
 
-      <Box sx={{ mb: 2 }}>
-        <div style={{ paddingTop: 15 }}>
-          <Button
-            onClick={parseInt(userType) === ROLE.CANDIDATO ? props.handleNext : saveUser}
-            className="registerBtn"
-            variant="contained"
-            sx={{ mt: 1, mr: 1 }}
-          >
-            {parseInt(userType) === ROLE.CANDIDATO ? 'Siguiente' : 'Guardar'}
-          </Button>
-          <Button
-            disabled={true}
-            onClick={props.handleBack}
-            sx={{ mt: 1, mr: 1 }}
-          >
-            Regresar
-          </Button>
-        </div>
-      </Box>
-
+      <Toaster position="top-right" />
 
 
     </div>