@eureca/eureca-ui/src/components/Inputs/password.js

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';

import { makeStyles } from '@material-ui/core/styles';
import { InputAdornment, IconButton } from '@material-ui/core';

import { FiEye, FiEyeOff } from 'react-icons/fi';

import { TextInput } from './text-input';

const styles = makeStyles({
  root: {
    padding: 0,
  },
});

function PasswordInput(props) {
  const iconStyles = styles();
  const [visible, setVisible] = useState(false);
  return (
    <TextInput
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={() => setVisible(!visible)}
              classes={iconStyles}
              data-testid="password-input-button"
            >
              {visible ? (
                <FiEye data-testid="password-input-icon" />
              ) : (
                <FiEyeOff data-testid="password-input-icon" />
              )}
            </IconButton>
          </InputAdornment>
        ),
      }}
      {...props}
      type={visible ? 'text' : 'password'}
    />
  );
}

export { PasswordInput };