Peek-a-boo Skill-Building-Session

[olavea]

This screenshot is the End?:

The Start: A button for icons

              <Grid item xs={12}>
                <IconButton>👁️‍🗨️🎩</IconButton>
              </Grid>

Add onClick handler

                <IconButton
                  aria-label="toggle password visibility"
                  onClick={handleClickShowPassword}
                >
                  👁️‍🗨️🎩
                </IconButton>

Poke your eye

The old PasSword

              <Grid item xs={12}>
                <TextField
                  id="passwordInput"
                  variant="outlined"
                  margin="normal"
                  name="password"
                  label="{values.showPassword ? "
                  type="password"
                  autoComplete="new-password"
                  placeholder="<VisibilityOff /> : <Visibility />}"
                  InputLabelProps={{ shrink: true }}
                  // required
                  fullWidth
                />
              </Grid>

https://youtu.be/v00Uro6UQvY?t=422 Let's change type

                  type={values.showPassword ? "text" : "password"}

Let's look at handleClick

  const handleClickShowPassword = () => {
    setValues({
      showPassword: !values.showPassword,
    });
  };

Let's look at values

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

https://youtu.be/v00Uro6UQvY?t=693 Adornment

                  endAdornment={}

TextField is no good to us now

                <OutlinedInput

[olavea]

Here are some icons I found and didn't use on POW!

import {
  FaceIcon,
  FaceRetouchingNaturalOutlined,
  FaceRetouchingNaturalSharp,
} from "@mui/icons-material";
// import DraftsIcon from "@material-ui/icons/Drafts";
// import FaceIcon from "@material-ui/icons/Face";
//import FaceIcon from "@mui/icons-material/FaceIcon";

[olavea]

https://queen.raae.codes/emails/2022-03-15-pow-password-peek-a-boo/