@brightlayer-ui/react-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
26 lines (25 loc) • 1.43 kB
JavaScript
import React, { useState } from 'react';
import TextField from '@mui/material/TextField';
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';
/**
* Component that renders textfield with a visibility toggle. The toggle changes the
* input from hidden to visible.
*
* @param props all props will be passed to the underlying TextField component
*
* @category Component
*/
export const PasswordTextField = (props) => {
const { icon, sx, ...otherProps } = props;
const [showPassword, setShowPassword] = useState(false);
return (React.createElement(TextField, { type: showPassword ? 'text' : 'password', variant: "filled", fullWidth: true, sx: sx, ...otherProps, slotProps: {
input: {
endAdornment: (React.createElement(InputAdornment, { position: "end" },
icon && (React.createElement(IconButton, { "aria-label": "Toggle password visibility", edge: "end", size: "large" }, icon)),
React.createElement(IconButton, { "aria-label": "Toggle password visibility", onClick: () => setShowPassword(!showPassword), edge: 'end', size: "large" }, showPassword ? React.createElement(Visibility, null) : React.createElement(VisibilityOff, null)))),
},
} }));
};