PasswordInput.tsx raw

   1  import React from "react";
   2  import RevealPasswordToggle from "src/components/password/RevealPasswordToggle";
   3  import { InputWithAdornment } from "src/components/ui/custom/input-with-adornment";
   4  
   5  type PasswordInputProps = Omit<
   6    React.InputHTMLAttributes<HTMLInputElement>,
   7    "type" | "onChange" | "value"
   8  > & {
   9    value: string;
  10    onChange?: (value: string) => void;
  11  };
  12  
  13  export default function PasswordInput({
  14    onChange,
  15    placeholder,
  16    value,
  17    ...restProps
  18  }: PasswordInputProps) {
  19    const [passwordVisible, setPasswordVisible] = React.useState(false);
  20  
  21    return (
  22      <InputWithAdornment
  23        type={passwordVisible ? "text" : "password"}
  24        value={value}
  25        required
  26        onChange={(e) => onChange && onChange(e.target.value)}
  27        placeholder={placeholder}
  28        {...restProps}
  29        endAdornment={
  30          <RevealPasswordToggle
  31            isRevealed={passwordVisible}
  32            onChange={setPasswordVisible}
  33          />
  34        }
  35      />
  36    );
  37  }
  38