I am using Magento 2 with a hyva Theme when I go to the login page and write the wrong credentials it will not give an error Massage like Please provide correct credentials in this page /customer/account/login/ can anyone guide me to do that
How to solve I didn’t show an error message
And redirect to on the same page without any error
video link check ==> https://www.awesomescreenshot.com/video/19241045?key=6bbe82d68d414e53d9ae94f677a5f6aa
Here is my login.phtml code
<?php
/**
* Hyvä Themes - https://hyva.io
* Copyright © Hyvä Themes 2020-present. All rights reserved.
* This product is licensed per Magento install
* See https://hyva.io/license
*/
declare(strict_types=1);
use HyvaThemeModelViewModelRegistry;
use HyvaThemeViewModelCustomerLoginButton;
use HyvaThemeViewModelHeroiconsOutline;
use HyvaThemeViewModelHeroiconsSolid;
use HyvaThemeViewModelReCaptcha;
use MagentoCustomerBlockFormLogin;
use MagentoFrameworkEscaper;
$heroiconsoutline = $viewModels->require(HeroiconsOutline::class);
$heroiconssolid = $viewModels->require(HeroiconsSolid::class);
$loginButtonViewModel = $viewModels->require(LoginButton::class);
// Do not replace this with $viewModels->require(ReCaptcha::class); that might break the dependency
// on the Magento_ReCaptchaCustomer module
$recaptcha = $block->getData('viewModelRecaptcha');
?>
<div class="w-full md:w-1/2 card mr-4">
<div aria-labelledby="block-customer-login-heading">
<form class="form form-login"
action="<?= $escaper->escapeUrl($block->getPostActionUrl()) ?>"
method="post"
x-data="initCustomerLoginForm()"
@submit.prevent="submitForm()"
id="customer-login-form">
<?= $block->getBlockHtml('formkey') ?>
<fieldset class="fieldset login">
<legend class="mb-3">
<h2 class="text-xl font-medium title-font text-primary">
<?= $escaper->escapeHtml(__('Login')) ?>
</h2>
</legend>
<div class="text-secondary-darker mb-8">
<?= $escaper->escapeHtml(
__('If you have an account, sign in with your email address.')
) ?>
</div>
<div class="field email required">
<label class="label" for="email"><span><?= $escaper->escapeHtml(__('Email')) ?></span></label>
<div class="control">
<input name="login[username]"
class="form-input"
required
value="<?= $escaper->escapeHtmlAttr($block->getUsername()) ?>"
<?php if ($block->isAutocompleteDisabled()): ?>
autocomplete="off"
<?php endif; ?>
id="email"
type="email"
title="<?= $escaper->escapeHtmlAttr(__('Email')) ?>"/>
</div>
</div>
<div class="field password required">
<label for="pass" class="label"><span><?= $escaper->escapeHtml(__('Password')) ?></span></label>
<div class="control flex items-center">
<input name="login[password]"
class="form-input"
required
:type="showPassword ? 'text' : 'password'"
<?php if ($block->isAutocompleteDisabled()): ?>
autocomplete="off"
<?php endif; ?>
id="pass"
title="<?= $escaper->escapeHtmlAttr(__('Password')) ?>"/>
<div x-on:click="showPassword = !showPassword"
class="cursor-pointer px-4"
:aria-label="showPassword ? '<?= $escaper->escapeJs(__('Hide Password')) ?>' : '<?= $escaper->escapeJs(__('Show Password')) ?>'"
>
<template x-if="!showPassword">
<?= $heroiconssolid->eyeHtml('w-5 h-5'); ?>
</template>
<template x-if="showPassword">
<?= $heroiconssolid->eyeOffHtml('w-5 h-5'); ?>
</template>
</div>
</div>
</div>
<?= $recaptcha ? $recaptcha->getInputHtml(ReCaptcha::RECAPTCHA_FORM_ID_CUSTOMER_LOGIN) : '' ?>
<?= $block->getChildHtml('form_additional_info') ?>
<div class="actions-toolbar flex justify-between pt-6 pb-2 items-center">
<button type="submit" class="btn btn-primary disabled:opacity-75" name="send"
<?php if ($loginButtonViewModel->disabled()): ?> disabled="disabled" data-recaptcha-btn<?php endif; ?>
>
<span><?= $escaper->escapeHtml(__('Sign In')) ?></span></button>
<a class="underline text-secondary" href="<?= $escaper->escapeUrl(
$block->getForgotPasswordUrl()
) ?>"><span><?= $escaper->escapeHtml(__('Forgot Your Password?')) ?></span>
</a>
</div>
<div>
<template x-if="displayErrorMessage">
<p class="text-red flex items-center">
<span class="inline-block w-8 h-8 mr-3">
<?= $heroiconsoutline->exclamationCircleHtml(); ?>
</span>
<template x-for="errorMessage in errorMessages">
<span x-html="errorMessage"></span>
</template>
</p>
</template>
</div>
</fieldset>
</form>
</div>
<div class="w-full">
<?= $recaptcha ? $recaptcha->getLegalNoticeHtml(ReCaptcha::RECAPTCHA_FORM_ID_CUSTOMER_LOGIN) : '' ?>
</div>
<script>
function initCustomerLoginForm() {
return {
errors: 0,
hasCaptchaToken: 0,
showPassword: false,
displayErrorMessage: false,
errorMessages: [],
setErrorMessages(messages) {
this.errorMessages = [messages]
this.displayErrorMessage = this.errorMessages.length
},
submitForm() {
// do not rename $form, the variable is the expected name in the recaptcha output
const $form = document.querySelector('#customer-login-form');
<?= $recaptcha ? $recaptcha->getValidationJsHtml(ReCaptcha::RECAPTCHA_FORM_ID_CUSTOMER_LOGIN) : '' ?>
if (this.errors === 0) {
$form.submit();
}
}
}
}
</script>
</div>
Here is my message.phtml code
<?php
declare(strict_types=1);
use HyvaThemeModelViewModelRegistry;
use HyvaThemeViewModelHeroiconsOutline;
$heroicons = $viewModels->require(HeroiconsOutline::class);
?>
<script>
function initMessages() {
"use strict";
return {
messages: window.mageMessages || [],
isEmpty() {
return this.messages.reduce(
function (isEmpty, message) {
return isEmpty && message === undefined
}, true
)
},
removeMessage(messageIndex) {
this.messages[messageIndex] = undefined;
},
addMessages(messages, hideAfter) {
messages.map((message) => {
this.messages = this.messages.concat(message);
if (hideAfter) {
this.setHideTimeOut(this.messages.length -1, hideAfter);
}
});
},
setHideTimeOut(messageIndex, hideAfter) {
setTimeout((messageIndex) => {
this.removeMessage(messageIndex);
}, hideAfter, messageIndex);
},
eventListeners: {
['@messages-loaded.window']() {
this.addMessages(event.detail.messages, event.detail.hideAfter)
},
['@private-content-loaded.window'](event) {
const data = event.detail.data;
if (
data.messages &&
data.messages.messages &&
data.messages.messages.length
) {
this.addMessages(data.messages.messages);
}
},
['@clear-messages.window']() {
this.messages = [];
}
}
}
}
</script>
<section id="messages"
x-data="initMessages()"
x-spread="eventListeners"
>
<template x-if="!isEmpty()">
<div class="w-full">
<div role="alert" class="messages container mx-auto py-3">
<template x-for="(message, index) in messages" :key="index">
<div>
<template x-if="message">
<div class="message" :class="message.type"
:ui-id="'message-' + message.type"
>
<span x-html="message.text"></span>
<a href="#" class="close cursor-pointer" title="close"
@click.prevent="removeMessage(index)">
<?= $heroicons->xHtml('text-white', 18, 18); ?>
</a>
</div>
</template>
</div>
</template>
</div>
</div>
</template>
</section>
Where we are wrong I don’t know can anybody know how to solve this issue?
