How to Add Password Meter to Login Form in Magento 2
Posted on 16 July 2018
The Password Strength Meter is a helpful thing that is displayed on the customer registration form and displays hints about complexity of password. This is a default Magento 2 functionality, and you can configure it in the settings.
For example, it can ask visitor of Magento 2 website to use uppercase letters or digits in password, therefore helping visitors using more secure passwords. It is not just about hints, it also does not allow customers to use too short, easy and predictable passwords.
However, the password strength meter is not displayed on the login form. If you want to insert the password validation tool to the login page for any reason, then this guide will help you.
1. The first step is to open the overridden login.phtml file
We suppose that you’re using a custom theme, and this file is already overriden:
If not, you need to override this file for you theme.
2. Then you need to add the following code after the password field:
= $block->escapeHtml(__('Password Strength')) ?>: = $block->escapeHtml(__('No Password')) ?>
Please keep in mind, that you need to use the ID or the form element class for the formSelector here. In our case the form selector is ‘form-login’, and that is why we used form.form-login here.
3. Flush Magento cache and enjoy the password meter on your login page!
About the Author
Stanislav has written most of PotatoCommerce blog posts. He belives that blog posts should be really helpful and be written primarily for people, not for Googlebot. Stanislav started working with Magento in 2011 as QA, and later as Product Manager. He joined PotatoCommerce in 2017, where he is responsible for marketing, web analytics, product specifications and finalizing the scope of our products and major extension updates.