Notice: You are browsing the documentation for PrestaShop 9, which is currently in development.

You might want to read the documentation for the current version, PrestaShop 8. Read the current version of this page

ChangePasswordType

ChangePasswordType is used to create form for changing password and has a built-in new password generator which requires Javascript components.

Required Javascript components

Component Description
ChangePasswordControl Generates random passwords, validates new password and its confirmation, displays validation messages
Learn more about Javascript components and how to use them

Code example

<?php
// path/to/your/CustomType.php
    
use PrestaShopBundle\Form\Admin\Type\ChangePasswordType;
use Symfony\Component\Form\AbstractType;

class CustomType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('change_password', ChangePasswordType::class)
        ;
    }
}

Then in Javascript you have to enable ChangePasswordControl component.

import ChangePasswordControl from 'admin-dev/themes/new-theme/js/components/form/change-password-control';

// This component requires many css selectors for targeting.
// These css attributes names depends on you, but it should be placed on correct elements to work properly.
new ChangePasswordControl(
    '.js-change-password-block', // parent element in which other 'ChangePasswordType' inputs are rendered.
    '.js-change-password', // button which shows the whole form on click and is hidden afterwards.
    '.js-change-password-cancel', // button which cancels the form and shows 'change-password' button again.
    '.js-generate-password-button', // button which generates new password on click.
    '.js-old-password', // input of old password.
    '.js-new-password', // input of new password.
    '.js-password-confirm', // new password confirmation input.
    '.js-generated_password', // input in which the new generated password should be displayed.
    '.js-password-strength' // element in which password strength feedback should be displayed.
);

Preview example

ChangePasswordType show/hide button rendered in form

ChangePasswordType rendered in form