an ordinary terniary?

                  {values.showPassword ? <VisibilityOff /> : <Visibility />}

Q
From where comes values.showPassword ?

  const [values, setValues] = React.useState({
    ....
    showPassword: false,
  });

Q
From where comes : ?

import Visibility from "@mui/icons-material/Visibility"
import VisibilityOff from "@mui/icons-material/VisibilityOff"

Over is printed out
under is NOT printed out

Q
an ordinary icon button, kinda?

                <IconButton
                  aria-label="toggle password visibility"
                  onClick={handleClickShowPassword}
                  edge="end"
                >
                  {values.showPassword ? <VisibilityOff /> : <Visibility />}
                </IconButton>

Q
an ordinary onClick handler, kinda?

                <IconButton
                  ....
                  onClick={handleClickShowPassword}
                  ....
                >
                  //  {values.showPassword ? <VisibilityOff /> : <Visibility />}
                </IconButton>

A
Yes and it only sets the value of showPassword to be true and NOT false
showPassword to be true

  const [values, setValues] = React.useState({
    ....,
    showPassword: false,
  });

after spreading in the values ...values,

        </FormControl>
        <FormControl sx={{ m: 1, width: '25ch' }} variant="outlined">
          <InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
          <OutlinedInput
            id="outlined-adornment-password"
            type={values.showPassword ? 'text' : 'password'}
            value={values.password}
            onChange={handleChange('password')}
            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="toggle password visibility"
                  onClick={handleClickShowPassword}
                  onMouseDown={handleMouseDownPassword}
                  edge="end"
                >
                  {values.showPassword ? <VisibilityOff /> : <Visibility />}
                </IconButton>
              </InputAdornment>
            }
            label="Password"
          />
        </FormControl>

import

import InputAdornment from "@mui/material/InputAdornment"
import IconButton from "@mui/material/IconButton"
import Visibility from "@mui/icons-material/Visibility"
import VisibilityOff from "@mui/icons-material/VisibilityOff"

values?

endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="toggle password visibility"
                  onClick={handleClickShowPassword}

                  edge="end"
                >
                  {values.showPassword ? <VisibilityOff /> : <Visibility />}
                </IconButton>
              </InputAdornment>
            }

get userbase up and running

Wait with:

  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };

....
          <OutlinedInput
....
            value={values.password}
            onChange={handleChange('password')}
            
....
                  onMouseDown={handleMouseDownPassword}

Uh oh!

Password peek-a-boo #314

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions