rhf-password-field

1'use client';
2 
3import type { Lens } from '@hookform/lenses';
4import { Eye, EyeOff, InfoIcon } from 'lucide-react';
5import * as React from 'react';
6import { useController } from 'react-hook-form';
7import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
8import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group';
9import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
10 
11export interface PasswordFieldProps extends Omit<React.ComponentProps<typeof InputGroupInput>, 'value' | 'onChange'> {
12  lens: Lens<string>;
13  label?: string;
14  description?: string;
15  tooltip?: React.ReactNode;
16}
17 
18export function PasswordField({ lens, label, description, tooltip, ...props }: PasswordFieldProps) {
19  const { field, fieldState } = useController(lens.interop());
20  const [showPassword, setShowPassword] = React.useState(false);
21  const id = props.id ?? field.name;
22 
23  const handleTogglePassword = React.useCallback(() => {
24    setShowPassword((prev) => !prev);
25  }, []);
26 
27  return (
28    <Field className='gap-2' data-invalid={fieldState.invalid}>
29      {label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
30      <InputGroup>
31        <InputGroupInput
32          {...field}
33          placeholder='Enter password'
34          {...props}
35          id={id}
36          type={showPassword ? 'text' : 'password'}
37          value={field.value ?? ''}
38          aria-invalid={fieldState.invalid}
39        />
40        <InputGroupAddon align='inline-end'>
41          <InputGroupButton aria-label='Toggle password' onClick={handleTogglePassword}>
42            {showPassword ? <EyeOff className='size-4' /> : <Eye className='size-4' />}
43          </InputGroupButton>
44 
45          {tooltip && (
46            <Tooltip>
47              <TooltipTrigger asChild>
48                <InputGroupButton aria-label='Info' size='icon-xs'>
49                  <InfoIcon />
50                </InputGroupButton>
51              </TooltipTrigger>
52              <TooltipContent>{tooltip}</TooltipContent>
53            </Tooltip>
54          )}
55        </InputGroupAddon>
56      </InputGroup>
57      {fieldState.invalid && <FieldError className='text-xs text-left opacity-80' errors={[fieldState.error]} />}
58      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}
59    </Field>
60  );
61}