48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { EyeIcon, EyeOffIcon } from "lucide-react";
|
|
import React from "react";
|
|
import { useState } from "react";
|
|
|
|
import { Control, Path } from "react-hook-form";
|
|
import { FieldValues } from "react-hook-form";
|
|
|
|
export interface CommonReactHookFormProps<T extends FieldValues> {
|
|
name: Path<T>;
|
|
control: Control<T, any>;
|
|
}
|
|
|
|
interface PasswordProps
|
|
extends React.InputHTMLAttributes<
|
|
HTMLInputElement & CommonReactHookFormProps<FieldValues>
|
|
> {}
|
|
|
|
function Password(props: PasswordProps) {
|
|
const [show, setShow] = useState(false);
|
|
return (
|
|
<div className="relative">
|
|
<input
|
|
id="password"
|
|
autoComplete="current-password"
|
|
className="block w-full bg-brand-dark-input rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset ring-zinc-800 text-white placeholder:text-gray-400 focus:ring-2 focus:ring-neutral-400 focus:outline-none sm:text-sm sm:leading-6"
|
|
{...props}
|
|
type={show ? "text" : "password"}
|
|
/>
|
|
<div className="absolute right-3 top-[30%]">
|
|
{!show && (
|
|
<EyeIcon
|
|
onClick={() => setShow(true)}
|
|
className="text-gray-400 cursor-pointer h-4"
|
|
/>
|
|
)}
|
|
{show && (
|
|
<EyeOffIcon
|
|
onClick={() => setShow(false)}
|
|
className="text-gray-400 cursor-pointer h-4"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Password;
|