Password peek-a-boo

[raae]

Add an eye icon to password fields so that the user can view the password they have entered.

Check out example here: https://material-ui.com/components/text-fields/#input-adornments

[raae]

Proposed steps @olavea:

1. Do this for the current password field in edit password
2. Create a password field component with this functionality
3. Use the new password field component everywhere there is a password field

[olavea]

The thing is not showing up, but I don't think the warning below solves it. I will keep working.

Warning: React does not recognize the endAdornment prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase endadornment instead.

[olavea]

an ordinary terniary?

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

Q From where comes values.showPassword ?

A

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

Q From where comes <VisibilityOff /> : <Visibility /> ?

A

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>

A

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}