laravel-admin icon indicating copy to clipboard operation
laravel-admin copied to clipboard

How to view the password in password type in form

Open Sivan4562 opened this issue 2 years ago • 5 comments

Laravel Version: 5.6.39 PHP Version: 73 Laravel-admin: 1.6

Description:

I am using the password field in the create menu but, I enter the password in the field it shows dots I want to see the password what can I type there is now an option to view the password text. how can I fix this???....

Sivan4562 avatar Jan 19 '23 12:01 Sivan4562

Use $form->text('password') ?

alexoleynik0 avatar Mar 04 '23 02:03 alexoleynik0

but what is the purpose of using that @alexoleynik0 if I enter the password on the text field the text will show inside of showing a star or any other symbol.

Sivan4562 avatar Mar 14 '23 10:03 Sivan4562

Sorry, I'm just confused about what exactly you're trying to achieve. It's either the password field that shows actual symbols, not dots/stars; or something completely different. Maybe you can provide some examples of the code? Where you use it, how it behaves now, etc.

alexoleynik0 avatar Mar 14 '23 10:03 alexoleynik0

Hi @alexoleynik0 ,

i am using $form->password('password','Enter the password');

like the below image i have attached image

if I click the eye icon the password text will display if I click another time it shows as normal password field

how can I achieve this?

Sivan4562 avatar Mar 14 '23 11:03 Sivan4562

First of all, I want to remind that you need to store any password in DB only in hashed form ( like in shown here ). So that show/hide effect will only be useful for Create form.

Here's a quick custom field I've made for you:

namespace App\Admin\Extensions\Form;
class PasswordCustom extends \Encore\Admin\Form\Field\Password
{
    public function render()
    {
        $this->prepend('<i class="fa fa-eye-slash fa-fw"></i>')
            ->defaultAttribute('type', 'password')
        ;

        $script = <<<JAVASCRIPT
            var iconHidden = 'fa-eye-slash';
            var iconShown = 'fa-eye';
            var \$input = \$('{$this->getElementClassSelector()}');
            var \$inputGroupAddon = \$input.parent().find('.input-group-addon');
            var \$icon = \$inputGroupAddon.find('.fa');

            \$inputGroupAddon.attr('role', 'button');
            \$inputGroupAddon.on('click', function () {
                if (\$icon.hasClass(iconHidden)) {
                    \$input.attr('type', 'text');
                    \$icon.removeClass(iconHidden);
                    \$icon.addClass(iconShown);
                    return;
                }
                \$input.attr('type', 'password');
                \$icon.removeClass(iconShown);
                \$icon.addClass(iconHidden);
            });
        JAVASCRIPT;
        $this->setScript($script);

        return parent::render();
    }
}

// in `app/Admin/bootstrap.php`:
Form::extend('passwordCustom', PasswordCustom::class);

// in your form:
$form->passwordCustom('password', trans('admin.password'));

alexoleynik0 avatar Mar 14 '23 12:03 alexoleynik0