I am trying to implement the show/hide password functionality when a user logs in. I followed the instructions from Magento, https://developer.adobe.com/commerce/frontend-core/ui-components/howto/show-hide-password-checkbox/, but they don’t seem to work.
I looked at this ticket as well, customer/account/login Showpassword checkbox doesnt work, but it didn’t help much.
I am able to get the checkbox to display, but when I click it, it doesn’t do anything.
It looks like it’s hitting the JS as it should …
Here is my code. What am I missing?
app/design/frontend/Vendor/default/Magento_Customer/templates/form/login.phtml
<div class="block block-customer-login">
<div class="block-title">
<strong id="block-customer-login-heading" role="heading" aria-level="2"><?= $block->escapeHtml(__('Registered Customers')) ?></strong>
</div>
<div class="block-content" aria-labelledby="block-customer-login-heading">
<form class="form form-login"
action="<?= $block->escapeUrl($block->getPostActionUrl()) ?>"
method="post"
id="login-form"
data-mage-init='{"validation":{}}'>
<?= $block->getBlockHtml('formkey') ?>
<fieldset class="fieldset login" data-hasrequired="<?= $block->escapeHtml(__('* Required Fields')) ?>">
<div class="field note"><?= $block->escapeHtml(__('If you have an account, sign in with your email address.')) ?></div>
<div class="field email required">
<label class="label" for="email"><span><?= $block->escapeHtml(__('Email')) ?></span></label>
<div class="control">
<input name="login[username]" value="<?= $block->escapeHtmlAttr($block->getUsername()) ?>"
<?php if ($block->isAutocompleteDisabled()): ?> autocomplete="off"<?php endif; ?>
id="email" type="email" class="input-text"
title="<?= $block->escapeHtmlAttr(__('Email')) ?>"
data-mage-init='{"mage/trim-input":{}}'
data-validate="{required:true, 'validate-email':true}"
placeholder="<?= $block->escapeHtml(__('Email')) ?>">
</div>
</div>
<div class="field password required">
<label for="pass" class="label"><span><?= $block->escapeHtml(__('Password')) ?></span></label>
<div class="control">
<input name="login[password]" type="password"
<?php if ($block->isAutocompleteDisabled()): ?> autocomplete="off"<?php endif; ?>
class="input-text" id="pass"
title="<?= $block->escapeHtmlAttr(__('Password')) ?>"
data-validate="{required:true}"
placeholder="<?= $block->escapeHtml(__('Password')) ?>">
</div>
</div>
<div class="field choice" data-bind="scope: 'showPassword'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
<?= $block->getChildHtml('form_additional_info') ?>
<div class="actions-toolbar">
<div class="primary"><button type="submit" class="action login primary" name="send" id="send2"><span><?= $block->escapeHtml(__('Sign In')) ?></span></button></div>
<div class="secondary"><a class="action remind" href="<?= $block->escapeUrl($block->getForgotPasswordUrl()) ?>"><span><?= $block->escapeHtml(__('Forgot Your Password?')) ?></span></a></div>
</div>
</fieldset>
</form>
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Customer/js/block-submit-on-send": {
"formId": "login-form"
},
"Magento_Ui/js/core/app": {
"components": {
"showPassword": {
"component": "Magento_Customer/js/show-password",
"passwordSelector": "#pass"
}
}
}
}
}
</script>