select role and set user

src/App.css

   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  gap: 10px;
 }

src/Components/Password/Steps/TypePwd.jsx

 import { useSelector } from 'react-redux'
 import {
   FormControl, RadioGroup, FormControlLabel, FormLabel, Checkbox,
-  TextField, Box, FormGroup, Button, Stack
+  TextField, Box, FormGroup, Button, Stack, Collapse
 } from '@mui/material'
 
+import { useForm } from "react-hook-form";
+
 import { Simple as Loading } from '../../Generics/loading.jsx'
 
+const ROLE = {
+  ADMIN: 1,
+  ASISTENTE: 2,
+  CANDIDATO: 3,
+}
+
 function Marked({ step }) {
   return (<strong className="important_marked">{step}</strong>)
 }
 
 function Title({ title, step }) {
-  return (<h5 className="titleMarked">{title}</h5>)
+  return (<p className="titleMarked">{title}</p>)
 }
 
-function PasswordInfoForm() {
+function PasswordInfoForm({ setUser, user }) {
+
   return (
     <Stack >
       <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} >
-        <TextField fullWidth id="outlined-basic" label="Correo" variant="outlined" />
-        <TextField fullWidth id="outlined-basic" label="Contraseña" variant="outlined" />
+
+        <TextField
+          value={user?.email}
+          onChange={(event) => {
+            let value = event.target.value
+            setUser({ ...user, ...{ email: value } })
+          }
+          }
+          fullWidth
+          id="outlined-basic"
+          label="Correo"
+          variant="outlined"
+        />
+
+        <TextField
+          value={user?.password}
+          onChange={(event) => {
+            let value = event.target.value
+            setUser({ ...user, ...{ password: value } })
+          }
+          }
+          fullWidth
+          id="outlined-basic"
+          label="Contraseña"
+          variant="outlined"
+        />
+
       </Stack>
     </Stack>
   );
 
 
 
-export default function PermisosList(props) {
+function PermisosList(props) {
+
+  let { recursos,selectedRole, setSelectedRole } = props
+
   return (
     <FormControl className="rolelist" >
-      <FormLabel id="demo-radio-buttons-group-label">{props.label}</FormLabel>
+      <FormLabel id="demo-radio-buttons-group-label">{recursos.label}</FormLabel>
       <RadioGroup
         aria-labelledby="demo-radio-buttons-group-label"
         defaultValue="female"
       >
         {
 
-          props.data.length === 0 ? <Loading /> :
-            props.data.map((r) => {
-              console.log(r)
+          recursos.data.length === 0 ? <Loading /> :
+            recursos.data.map((r) => {
               return (
-                <FormControlLabel value={r.id} control={<Checkbox />} label={r.nombre} />
+                <FormControlLabel
+                  value={r.id}
+                  onChange={(event) => {
+                    let { checked } = event.target
+                    setSelectedRole((prev) => {
+                      if (checked) {
+                        return [...prev, r.id]
+                      } else {
+                        return prev.filter((p) => p !== r.id)
+                      }
+                    })
+                  }}
+                  checked={selectedRole.includes(r.id)}
+                  control={<Checkbox />}
+                  label={r.nombre}
+                />
               )
             })
         }
 
   let { type, setType } = props
 
-  const handleChange = (event) => {
-    let { value, checked } = event.target
-    console.log({ value, checked })
-    // let value = event.target.checked ? event.target.value : 0
-    setType(parseInt(value));
-  };
+  const handleChange = (event) => setType(parseInt(event.target.value));
 
   return (
     <FormControl>
         value={type}
         onChange={handleChange}
       >
-        <FormControlLabel value={1} onChange={handleChange} checked={type === 1} control={<Checkbox />} label="Administrador" />
-        <FormControlLabel value={2} onChange={handleChange} checked={type === 2} control={<Checkbox />} label="Asistente" />
-        <FormControlLabel value={3} onChange={handleChange} checked={type === 3} control={<Checkbox />} label="Candidato" />
+        <FormControlLabel
+          value={ROLE.CANDIDATO}
+          onChange={handleChange}
+          checked={type === ROLE.CANDIDATO}
+          control={<Checkbox />}
+          label="Candidato"
+        />
+        <FormControlLabel
+          value={ROLE.ADMIN}
+          onChange={handleChange}
+          checked={type === 1}
+          control={<Checkbox />}
+          label="Administrador"
+        />
+        <FormControlLabel
+          value={ROLE.ASISTENTE}
+          onChange={handleChange}
+          checked={type === 2}
+          control={<Checkbox />}
+          label="Asistente"
+        />
       </FormGroup>
     </FormControl>
   );
 
 
 export function TypePwd(props) {
+  // console.log(props)
 
-  let auth = useSelector(state => state.token)
-  let [recursos, setRecursos] = useState(null)
-  let [userType, setUserType] = useState(1)
+  const auth = useSelector(state => state.token)
+  const [recursos, setRecursos] = useState(null)
+  const [selectedRole, setSelectedRole] = useState([])
+  const [userType, setUserType] = useState(ROLE.CANDIDATO)
+  const [user, setUser] = useState(null)
 
+  const saveUser = () => {
+    //TODO: trigger form submit
+    console.log(user, selectedRole)
+  }
 
   useEffect(() => {
 
         .forEach((k) => {
           templete[k].data = recursos_api[k];
         })
-      console.log('BUILD:', templete)
+
       setRecursos(templete)
     }
 
     <div class="gapwdrole">
 
       <div className="typepwdlist">
-        <Title title="Seleciona el tipo de contraseña" step={"A"} />
-      </div>
-
-      <div className="typepwdlist">
         <TipoUsuarios type={userType} setType={setUserType} />
       </div>
 
-      {
-        parseInt(userType) === 1 && (
-          <div>
-            <div className="typepwdlist">
-              <Title title="Informacion de la contraseña" step={"B"} />
-              <PasswordInfoForm />
-            </div>
-          </div>
-        )
-
-      }
-
-      {
-        parseInt(userType) === 2 && (
-          <div>
-            <div className="typepwdlist">
-              <Title title="Informacion de la contraseña" step={"B"} />
-              <PasswordInfoForm />
-            </div>
-
-            <div className="typepwdlist">
-              <Title title="Selecciona los privilegios" step={"C"} />
-              {recursos && Object.keys(recursos).map((k) => PermisosList(recursos[k]))}
-            </div>
-          </div>
-        )
-      }
+      <Collapse orientation="vertical" in={parseInt(userType) === ROLE.ADMIN} >
+        <div className="typepwdlist">
+          <Title title="Informacion de la contraseña" step={"B"} />
+          <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"} />
+          <PasswordInfoForm setUser={setUser} user={user} />
+        </div>
 
+        <div className="typepwdlist">
+          <Title title="Selecciona los privilegios" step={"C"} />
+          {
+            recursos &&
+            Object.keys(recursos).map((k) =>
+              <PermisosList
+                recursos={recursos[k]}
+                selectedRole={selectedRole}
+                setSelectedRole={setSelectedRole}
+              />
+            )}
+        </div>
+      </Collapse>
 
       <Box sx={{ mb: 2 }}>
         <div style={{ paddingTop: 15 }}>
           <Button
-            type="submit"
+            onClick={parseInt(userType) === ROLE.CANDIDATO ? props.handleNext : saveUser}
             className="registerBtn"
             variant="contained"
             sx={{ mt: 1, mr: 1 }}
           >
-            {'Siguiente'}
+            {parseInt(userType) === ROLE.CANDIDATO ? 'Siguiente' : 'Guardar'}
           </Button>
           <Button
             disabled={true}

src/Components/Password/Steps/puesto.js

                 {'Siguiente'}
               </Button>
               <Button
-                disabled={true}
+                disabled={false}
                 onClick={handleBack}
                 sx={{ mt: 1, mr: 1 }}
               >