user permis config

src/App.css

@@ -433,3 +433,31 @@
   object-position: left top;
   border: 2px solid black;
 }
+.seluser_type{
+  margin:3px solid black;
+  margin-bottom: 5px;
+}
+.rolelist{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-content: flex-start;
+}
+#demo-radio-buttons-group-label{
+  font-weight: bold;
+}
+.typepwdlist{
+  border-bottom: 1px solid gainsboro;
+  padding: 15px;
+}
+.titleMarked{
+  /* color : gray; */
+}
+.gapwdrole{
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 10px;
+}

src/Components/Password/Steps/TypePwd.jsx

@@ -0,0 +1,164 @@
+import { useEffect, useState } from 'react'
+import { Service } from '../../../Utils/HTTP.js'
+import { useSelector } from 'react-redux'
+import {
+  FormControl, RadioGroup, FormControlLabel, Radio, FormLabel, Checkbox,
+  TextField, Box
+} from '@mui/material'
+
+import { Simple as Loading } from '../../Generics/loading.jsx'
+
+function Marked({ step }) {
+  return (<strong className="important_marked">{step}</strong>)
+}
+
+function Title({ title, step }) {
+  return (<h5 className="titleMarked">{title}</h5>)
+}
+
+function PasswordInfoForm() {
+  return (
+    <Box
+      component="form"
+      sx={{
+        '& > :not(style)': { m: 1, width: '25ch' },
+      }}
+      noValidate
+      autoComplete="off"
+    >
+      <TextField id="outlined-basic" label="Outlined" variant="outlined" />
+      <TextField id="filled-basic" label="Filled" variant="filled" />
+      <TextField id="standard-basic" label="Standard" variant="standard" />
+    </Box>
+  );
+}
+
+
+
+export default function PermisosList(props) {
+  return (
+    <FormControl className="rolelist" >
+      <FormLabel id="demo-radio-buttons-group-label">{props.label}</FormLabel>
+      <RadioGroup
+        aria-labelledby="demo-radio-buttons-group-label"
+        defaultValue="female"
+        name="radio-buttons-group"
+      >
+        {
+
+          props.data.length === 0 ? <Loading /> :
+            props.data.map((r) => {
+              console.log(r)
+              return (
+                <FormControlLabel value={r.id} control={<Checkbox />} label={r.nombre} />
+              )
+            })
+        }
+      </RadioGroup>
+    </FormControl>
+  );
+}
+
+function TipoUsuarios(props) {
+  let { type, setType } = props
+  const handleChange = (event) => {
+    setType(event.target.value);
+  };
+
+  return (
+    <FormControl>
+      <FormLabel id="demo-radio-buttons-group-label">Nivel de Acceso</FormLabel>
+      <RadioGroup
+        className="seluser_type"
+        row
+        aria-labelledby="demo-row-radio-buttons-group-label"
+        name="row-radio-buttons-group"
+        value={type}
+        onChange={handleChange}
+      >
+        <FormControlLabel value={0} control={<Checkbox />} label="Administrador" />
+        <FormControlLabel value={1} control={<Checkbox />} label="Asistente" />
+        <FormControlLabel value={2} control={<Checkbox />} label="Candidato" />
+      </RadioGroup>
+    </FormControl>
+  );
+}
+
+
+export function TypePwd(props) {
+
+  let auth = useSelector(state => state.token)
+  let [recursos, setRecursos] = useState(null)
+  let [userType, setUserType] = useState(1)
+
+
+  useEffect(() => {
+
+    const getRecursos = () => {
+      let rest = new Service('/recursos/allow')
+      return rest.getQuery(auth.token);
+    }
+    const groupRecursos = (recursos) => {
+      let groups = {};
+      recursos.forEach((r) => {
+        if (groups[r.grupo]) {
+          groups[r.grupo].push(r)
+        } else {
+          groups[r.grupo] = [r]
+        }
+      })
+
+      assignRecursos(groups)
+    }
+
+    const assignRecursos = (recursos_api) => {
+      let templete = {
+        1: { "label": 'Puestos', data: [] },
+        2: { "label": 'Varios', data: [] },
+        3: { "label": 'General', data: [] }
+      }
+
+      Object.keys(recursos_api)
+        .forEach((k) => {
+          templete[k].data = recursos_api[k];
+        })
+      console.log('BUILD:', templete)
+      setRecursos(templete)
+    }
+
+    getRecursos()
+      .then(({ data }) => groupRecursos(data))
+      .catch((err) => console.log('ERROR:', err))
+
+  }, [auth.token])
+
+  console.log("USER TYPE:", userType)
+
+  return (
+    <div class="gapwdrole">
+      <Title title="Seleciona el tipo de contraseña" step={"A"} />
+
+      <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 className="typepwdlist">
+              <Title title="Selecciona los privilegios" step={"C"} />
+              {recursos && Object.keys(recursos).map((k) => PermisosList( recursos[k] )) }
+            </div>
+          </div>
+        )
+      }
+
+    </div>
+  )
+
+}

src/Css/all.css

@@ -827,6 +827,8 @@ table.dataTable tbody th, table.dataTable tbody td {
 .btn_add_producto span {
     display: block;
     padding: 6px;
+    font-weight: bold;
+    font-size:11px;
 }
 .modal-header {
     display: -ms-flexbox;
@@ -4023,6 +4025,8 @@ All this is done for any sub-level being entered.
     padding: 5px;
     padding-bottom: 5px;
 }
-
-
-
+.important_marked{
+  font-weight: bold;
+  font-size: 20px;
+  color : red;
+}