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 };

[WendellAdriel]

Hey there @msamgan, thanks for the contribution! 💪
I agree with @SantosVilanculos here, let's create a reusable component for this.
I'm going to change the PR to draft, when you have it ready to review, just change it back and I'll take a look at it ASAP.

[WendellAdriel]

Please check my comment above on creating a reusable component for this

[devsravi]

good idea ! I thin

Yes, this is good Instead of modifying an existing component, I had also created a PasswordInput component in my project.

[msamgan]

Please check my comment above on creating a reusable component for this

I will make the updates on this weekend.