add show/hide password feature in login and registration form

[msamgan]

No description provided.

[tdubouchet]

@msamgan good idea ! I think the InputGroup component would be more appropriate.

[SantosVilanculos]

@msamgan good idea ! I think the InputGroup component would be more appropriate.

Yes, but a reusable component would be better.

import { EyeClosedIcon, EyeIcon } from 'lucide-react';
import * as React from 'react';
import {
    InputGroup,
    InputGroupAddon,
    InputGroupButton,
    InputGroupInput
} from '@/components/ui/input-group';

function PasswordInput(
    props: Omit<React.ComponentProps<typeof InputGroupInput>, 'type'>
) {
    const [type, setType] = React.useState<'password' | 'text'>('password');

    return (
        <InputGroup>
            <InputGroupInput type={type} {...props} />
            <InputGroupAddon align="inline-end">
                <InputGroupButton
                    size="icon-xs"
                    onClick={() => {
                        setType(value => {
                            return value === 'password' ? 'text' : 'password';
                        });
                    }}
                >
                    {type === 'password' ? <EyeClosedIcon /> : <EyeIcon />}
                </InputGroupButton>
            </InputGroupAddon>
        </InputGroup>
    );
}

export { PasswordInput };