Open Closed

Blazor App: Issues overriding Login Page #2442


User avatar
0
joe@tronactive.com created
  • ABP Framework version: v5.1.1
  • UI type: Blazor
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no

I have been working on trying to override the login page. The first issue I am having is I want to remove the drop-down for localization on the login screen. I see that isn't a part of the account/login.cshtml page. I also want to change the tenant text box to a drop-down as our app is for the internal use of our company only. But the same issue with the language switch. I cannot figure out where to go for that. I thought I needed to override the Themes/Layouts/Account/Default.cshtml file, but that isn't working.

The second issue I am having is the CustomLoginModel.cs I created that inherits from LoginModel.cs doesn't seem to be working correctly. in the Login.cshtml the model isn't populated because when I hit an if statement in login.cshtml the bools are not set such as EnableLocalLogin so the login form doesn't show up anymore since I set this up.

Any help would be much appreciated. I wanted to note that I started out using this as a reference https://github.com/bartvanhoey/AbpBlazorCustomizeLoginPage


5 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    The first issue I am having is I want to remove the drop-down for localization on the login screen

    Line 92 lepton-theme\src\Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton\Themes\Lepton\Layouts\Account\Default.cshtml lepton-theme\src\Volo.Abp.AspNetCore.Mvc.UI.Theme.Lepton\Themes\Lepton\Components\Toolbar\LanguageSwitch\

    I also want to change the tenant text box to a drop-down as our app is for the internal use of our company

    https://github.com/abpframework/abp/tree/dev/framework/src/Volo.Abp.AspNetCore.Mvc.UI.MultiTenancy/Pages/Abp/MultiTenancy https://github.com/abpframework/abp/blob/dev/framework/src/Volo.Abp.AspNetCore.Mvc.UI.MultiTenancy/Pages/Abp/MultiTenancy/TenantSwitchModal.cshtml

    The second issue I am having is the CustomLoginModel.cs I created that inherits from LoginModel.cs doesn't seem to be working correctly. in the Login.cshtml the model isn't populated because when I hit an if statement in login.cshtml the bools are not set such as EnableLocalLogin so the login form doesn't show up anymore since I set this up.

    Please share your LoginModel class code.

  • User Avatar
    0
    joe@tronactive.com created

    Here is the Custom Login Model. Literally just basic.

    using Microsoft.AspNetCore.Authentication;
    using Microsoft.AspNetCore.Identity;
    using Microsoft.Extensions.Options;
    using Owl.reCAPTCHA;
    using Volo.Abp.Account.ExternalProviders;
    using Volo.Abp.Account.Public.Web;
    using Volo.Abp.Account.Public.Web.Pages.Account;
    using Volo.Abp.Account.Security.Recaptcha;
    using Volo.Abp.Security.Claims;
    
    namespace Cure8.Pages.Account
    {
        public class CustomLoginModel : LoginModel
        {
            public CustomLoginModel(IAuthenticationSchemeProvider schemeProvider, 
                IOptions<AbpAccountOptions> accountOptions, 
                IAbpRecaptchaValidatorFactory recaptchaValidatorFactory, 
                IAccountExternalProviderAppService accountExternalProviderAppService, 
                ICurrentPrincipalAccessor currentPrincipalAccessor,
                IOptions<IdentityOptions> identityOptions,
                IOptionsSnapshot<reCAPTCHAOptions> reCaptchaOptions) :
                base(schemeProvider, accountOptions, recaptchaValidatorFactory, 
                    accountExternalProviderAppService, 
                    currentPrincipalAccessor,
                    identityOptions, reCaptchaOptions)
            {
            }
        }
    }
    

    Then in the view here is where I reference the model @using Cure8.Pages.Account @model CustomLoginModel

  • User Avatar
    0
    joe@tronactive.com created

    WHen I added Themes/Lepton/Layouts/Account/Default.cshtml and made my changes it comes up with a white page with the form and my changes but no styling. In the console window it has the below.

    Uncaught ReferenceError: $ is not defined at ApplicationConfigurationScript:3:1 at ApplicationConfigurationScript:2571:3

    Uncaught ReferenceError: abp is not defined at ServiceProxyScript:12:5 at ServiceProxyScript:59:5 at ServiceProxyScript:236:3

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you create a new template copy your code then share it with me? liming.ma@volosoft.com

  • User Avatar
    0
    joe@tronactive.com created

    I switched things to Blazor Server instead of Web assembly and everything worked perfectly fine. Not sure why it wouldn't in the web assembly version.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 13, 2024, 06:09