z-song / laravel-admin

Build a full-featured administrative interface in ten minutes
https://laravel-admin.org
MIT License
11.13k stars 2.81k forks source link

How to view the password in password type in form #5710

Open Sivan4562 opened 1 year ago

Sivan4562 commented 1 year ago

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???....

alexoleynik0 commented 1 year ago

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

Sivan4562 commented 1 year ago

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.

alexoleynik0 commented 1 year ago

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.

Sivan4562 commented 1 year ago

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?

alexoleynik0 commented 1 year ago

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'));