role logics

src/Components/Password/Steps/TypePwd.jsx

@@ -2,8 +2,8 @@ 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
+  FormControl, RadioGroup, FormControlLabel, FormLabel, Checkbox,
+  TextField, Box, FormGroup, Button, Stack
 } from '@mui/material'
 
 import { Simple as Loading } from '../../Generics/loading.jsx'
@@ -18,18 +18,12 @@ function Title({ title, step }) {
 
 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>
+    <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" />
+      </Stack>
+    </Stack>
   );
 }
 
@@ -60,15 +54,20 @@ export default function PermisosList(props) {
 }
 
 function TipoUsuarios(props) {
+
   let { type, setType } = props
+
   const handleChange = (event) => {
-    setType(event.target.value);
+    let { value, checked } = event.target
+    console.log({ value, checked })
+    // let value = event.target.checked ? event.target.value : 0
+    setType(parseInt(value));
   };
 
   return (
     <FormControl>
       <FormLabel id="demo-radio-buttons-group-label">Nivel de Acceso</FormLabel>
-      <RadioGroup
+      <FormGroup
         className="seluser_type"
         row
         aria-labelledby="demo-row-radio-buttons-group-label"
@@ -76,10 +75,10 @@ function TipoUsuarios(props) {
         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>
+        <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" />
+      </FormGroup>
     </FormControl>
   );
 }
@@ -132,11 +131,12 @@ export function TypePwd(props) {
 
   }, [auth.token])
 
-  console.log("USER TYPE:", userType)
-
   return (
     <div class="gapwdrole">
-      <Title title="Seleciona el tipo de contraseña" step={"A"} />
+
+      <div className="typepwdlist">
+        <Title title="Seleciona el tipo de contraseña" step={"A"} />
+      </div>
 
       <div className="typepwdlist">
         <TipoUsuarios type={userType} setType={setUserType} />
@@ -144,6 +144,18 @@ export function TypePwd(props) {
 
       {
         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"} />
@@ -152,12 +164,36 @@ export function TypePwd(props) {
 
             <div className="typepwdlist">
               <Title title="Selecciona los privilegios" step={"C"} />
-              {recursos && Object.keys(recursos).map((k) => PermisosList( recursos[k] )) }
+              {recursos && Object.keys(recursos).map((k) => PermisosList(recursos[k]))}
             </div>
           </div>
         )
       }
 
+
+
+      <Box sx={{ mb: 2 }}>
+        <div style={{ paddingTop: 15 }}>
+          <Button
+            type="submit"
+            className="registerBtn"
+            variant="contained"
+            sx={{ mt: 1, mr: 1 }}
+          >
+            {'Siguiente'}
+          </Button>
+          <Button
+            disabled={true}
+            onClick={props.handleBack}
+            sx={{ mt: 1, mr: 1 }}
+          >
+            Regresar
+          </Button>
+        </div>
+      </Box>
+
+
+
     </div>
   )
 

src/temp.js

@@ -1,126 +1,85 @@
 import * as React from 'react';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import CircularProgress from '@mui/material/CircularProgress';
+import Box from '@mui/material/Box';
+import FormLabel from '@mui/material/FormLabel';
+import FormControl from '@mui/material/FormControl';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import Checkbox from '@mui/material/Checkbox';
 
-function sleep(delay = 0) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, delay);
+export default function CheckboxesGroup() {
+  const [state, setState] = React.useState({
+    gilad: true,
+    jason: false,
+    antoine: false,
   });
-}
-
-export default function Asynchronous() {
-  const [open, setOpen] = React.useState(false);
-  const [options, setOptions] = React.useState([]);
-  const loading = open && options.length === 0;
-
-  React.useEffect(() => {
-    let active = true;
-
-    if (!loading) {
-      return undefined;
-    }
 
-    (async () => {
-      await sleep(1e3); // For demo purposes.
+  const handleChange = (event) => {
+    setState({
+      ...state,
+      [event.target.name]: event.target.checked,
+    });
+  };
 
-      if (active) {
-        setOptions([...topFilms]);
-      }
-    })();
-
-    return () => {
-      active = false;
-    };
-  }, [loading]);
-
-  React.useEffect(() => {
-    if (!open) {
-      setOptions([]);
-    }
-  }, [open]);
+  const { gilad, jason, antoine } = state;
+  const error = [gilad, jason, antoine].filter((v) => v).length !== 2;
 
   return (
-    <Autocomplete
-      id="asynchronous-demo"
-      sx={{ width: 300 }}
-      open={open}
-      onOpen={() => {
-        setOpen(true);
-      }}
-      onClose={() => {
-        setOpen(false);
-      }}
-      isOptionEqualToValue={(option, value) => option.title === value.title}
-      getOptionLabel={(option) => option.title}
-      options={options}
-      loading={loading}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label="Asynchronous"
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <React.Fragment>
-                {loading ? <CircularProgress color="inherit" size={20} /> : null}
-                {params.InputProps.endAdornment}
-              </React.Fragment>
-            ),
-          }}
-        />
-      )}
-    />
+    <Box sx={{ display: 'flex' }}>
+      <FormControl sx={{ m: 3 }} component="fieldset" variant="standard">
+        <FormLabel component="legend">Assign responsibility</FormLabel>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox checked={gilad} onChange={handleChange} name="gilad" />
+            }
+            label="Gilad Gray"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox checked={jason} onChange={handleChange} name="jason" />
+            }
+            label="Jason Killian"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox checked={antoine} onChange={handleChange} name="antoine" />
+            }
+            label="Antoine Llorca"
+          />
+        </FormGroup>
+        <FormHelperText>Be careful</FormHelperText>
+      </FormControl>
+      <FormControl
+        required
+        error={error}
+        component="fieldset"
+        sx={{ m: 3 }}
+        variant="standard"
+      >
+        <FormLabel component="legend">Pick two</FormLabel>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox checked={gilad} onChange={handleChange} name="gilad" />
+            }
+            label="Gilad Gray"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox checked={jason} onChange={handleChange} name="jason" />
+            }
+            label="Jason Killian"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox checked={antoine} onChange={handleChange} name="antoine" />
+            }
+            label="Antoine Llorca"
+          />
+        </FormGroup>
+        <FormHelperText>You can display an error</FormHelperText>
+      </FormControl>
+    </Box>
   );
 }
-
-// Top films as rated by IMDb users. http://www.imdb.com/chart/top
-const topFilms = [
-  { title: 'The Shawshank Redemption', year: 1994 },
-  { title: 'The Godfather', year: 1972 },
-  { title: 'The Godfather: Part II', year: 1974 },
-  { title: 'The Dark Knight', year: 2008 },
-  { title: '12 Angry Men', year: 1957 },
-  { title: "Schindler's List", year: 1993 },
-  { title: 'Pulp Fiction', year: 1994 },
-  {
-    title: 'The Lord of the Rings: The Return of the King',
-    year: 2003,
-  },
-  { title: 'The Good, the Bad and the Ugly', year: 1966 },
-  { title: 'Fight Club', year: 1999 },
-  {
-    title: 'The Lord of the Rings: The Fellowship of the Ring',
-    year: 2001,
-  },
-  {
-    title: 'Star Wars: Episode V - The Empire Strikes Back',
-    year: 1980,
-  },
-  { title: 'Forrest Gump', year: 1994 },
-  { title: 'Inception', year: 2010 },
-  {
-    title: 'The Lord of the Rings: The Two Towers',
-    year: 2002,
-  },
-  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
-  { title: 'Goodfellas', year: 1990 },
-  { title: 'The Matrix', year: 1999 },
-  { title: 'Seven Samurai', year: 1954 },
-  {
-    title: 'Star Wars: Episode IV - A New Hope',
-    year: 1977,
-  },
-  { title: 'City of God', year: 2002 },
-  { title: 'Se7en', year: 1995 },
-  { title: 'The Silence of the Lambs', year: 1991 },
-  { title: "It's a Wonderful Life", year: 1946 },
-  { title: 'Life Is Beautiful', year: 1997 },
-  { title: 'The Usual Suspects', year: 1995 },
-  { title: 'Léon: The Professional', year: 1994 },
-  { title: 'Spirited Away', year: 2001 },
-  { title: 'Saving Private Ryan', year: 1998 },
-  { title: 'Once Upon a Time in the West', year: 1968 },
-  { title: 'American History X', year: 1998 },
-  { title: 'Interstellar', year: 2014 },
-];