Hi team,
I'm using the MVC UI with Account.Pro module and I would like to customize the alert messages shown on the login page — particularly in cases like invalid credentials.
My questions are:
1-Is there a way to change the position and style of the default alert messages on the login page? 2-Alternatively, is it possible to handle these alerts on the client side, so I can show a custom message instead of the default one?
I'd appreciate any guidance or recommended approach for customizing this behavior within the context of the MVC UI and Account.Pro module.
Thanks in advance!
7 Answer(s)
-
0
To customize the alert messages on the login page in an ABP MVC UI application (including with Account.Pro), you have several options:
Change the Position and Style of Default Alert Messages:
- ABP uses a shared "page alerts" component for displaying alerts (such as invalid credentials) on pages like login.
- You can override the default alert component by creating a file with the same name and folder structure in your project. For LeptonX theme, the alert component is located at
Themes/LeptonX/Components/PageAlerts/Default.cshtml. Copy this file into your project under the same path and modify its markup and CSS as needed to change the position and style. - You can also override the related C# view component (
PageAlertsViewComponent.cs) if you need to change logic.
Handle Alerts on the Client Side for Custom Messages:
- The default alerts are rendered server-side, typically based on model state or exceptions.
- To fully control the alert display (e.g., show custom messages or handle them with JavaScript), you can:
- Suppress the default alert output in your overridden login page (
Login.cshtml). - Add your own alert markup and use JavaScript to display messages as needed.
- Alternatively, you can customize the login page logic in your custom
LoginModelto set custom messages in the model, which you then render in your own way in the view.
- Suppress the default alert output in your overridden login page (
Recommended Approach:
- For most scenarios, overriding the alert component and/or the login page view is the cleanest and most maintainable way to customize both style and behavior.
- If you want to use client-side logic, ensure you suppress or remove the default alert rendering in your custom view.
References:
- Page Alerts in MVC/Razor Pages (ABP Docs)
- LeptonX Theme Customization (ABP Docs)
- UI Customization Guide (ABP Docs)
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
-
0
Can you share an example for method 2?
-
0
hi
The Login page will use a form to submit. The Alert message will be displayed on the entire HTML response page.
You can change the style and position of the Alert component. What is your current MVC theme? LeptonX?
Thanks.
-
0
Hi,
No, I use Basic Theme
-
0
The
Account layoutsource code is https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Layouts/Account.cshtml#L99The
PageAlertsViewComponentsource code is https://github.com/abpframework/abp/blob/WebRequestResources/modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic/Themes/Basic/Components/PageAlertsYou can change its position and style by overriding the account layout and creating your
MyPageAlertsViewComponentThanks.
-
0
It worked, thank you.
-
0
: )
