117 lines
4.2 KiB
React
117 lines
4.2 KiB
React
import "./passwordTextField.css";
|
|
import React, { useState } from "react";
|
|
import { IconButton, InputAdornment, TextField } from "@mui/material";
|
|
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
|
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
|
|
import { useTheme } from "@mui/material";
|
|
import VisibilityOff from "@mui/icons-material/VisibilityOff";
|
|
import Visibility from "@mui/icons-material/Visibility";
|
|
|
|
/**
|
|
* @component
|
|
* @param {Object} props
|
|
* @param {function} props.onChange - The function to call when the text field changes (optional)
|
|
* @param {string} props.id - Unique ID for the text field (optional)
|
|
* @param {string} props.label - The label text displayed above the text field (optional)
|
|
* @param {"standard" | "outlined" | "filled"} props.variant - The variant of the text field (e.g., "outlined") (optional)
|
|
* @param {string} props.placeholder - The placeholder text displayed within the text field (optional)
|
|
* @param {"error" | "help"} [props.icon] - The type of icon to display (error or help) (optional)
|
|
* @param {string} props.helperText - The helper text displayed below the text field (optional)
|
|
* @param {boolean} props.error - A flag indicating if the text field has an error (required)
|
|
* @param {boolean} props.visibility - A flag indicating if the password visibility is toggled (optional)
|
|
* @param {function} props.setVisibility - Function to toggle password visibility (optional)
|
|
* @returns {JSX.Element} - Renders the password text field component with dynamic icon display
|
|
*/
|
|
const PasswordTextField = ({
|
|
onChange,
|
|
id,
|
|
label = "Password",
|
|
autoComplete,
|
|
variant,
|
|
placeholder,
|
|
icon,
|
|
helperText,
|
|
error,
|
|
visibility,
|
|
setVisibility,
|
|
}) => {
|
|
const theme = useTheme();
|
|
|
|
const fontLookup = {
|
|
default: theme.font.default.font,
|
|
};
|
|
|
|
const fontFamily = fontLookup["default"];
|
|
|
|
const [showIcon, setShowIcon] = useState(false);
|
|
|
|
const handleMouseEnter = () => setShowIcon(true);
|
|
const handleMouseLeave = () => setShowIcon(false);
|
|
|
|
return (
|
|
<div style={{ fontFamily: fontFamily }}>
|
|
<div className="password-text-field-title">{label}</div>
|
|
<div className="password-text-field">
|
|
<TextField
|
|
onChange={onChange}
|
|
type={visibility ? "text" : "password"}
|
|
autoComplete={autoComplete}
|
|
error={error}
|
|
className="password-text-field-input"
|
|
id={id}
|
|
variant={variant}
|
|
placeholder={placeholder}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
{visibility !== undefined ? (
|
|
<IconButton
|
|
aria-label="toggle password visibility"
|
|
onClick={() => setVisibility((show) => !show)}
|
|
tabIndex={-1}
|
|
sx={{
|
|
width: "30px",
|
|
height: "30px",
|
|
"&:focus": {
|
|
outline: "none",
|
|
},
|
|
}}
|
|
>
|
|
{!visibility ? <VisibilityOff /> : <Visibility />}
|
|
</IconButton>
|
|
) : (
|
|
<div className="icon-holder">
|
|
{error && showIcon && (
|
|
<ErrorOutlineIcon
|
|
className="text-field-icon"
|
|
style={{ fill: "red", width: "16px", height: "16px" }}
|
|
/>
|
|
)}
|
|
{error && !showIcon && (
|
|
<ErrorOutlineIcon
|
|
className="text-field-icon"
|
|
style={{ fill: "red", width: "16px", height: "16px" }}
|
|
/>
|
|
)}
|
|
{!error && showIcon && (
|
|
<HelpOutlineIcon
|
|
className="text-field-icon"
|
|
style={{ width: "16px", height: "16px" }}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
helperText={helperText}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PasswordTextField;
|