Open Closed

How change Login page: icon, background, title and add some HTML elements #7018

User avatar
0
viktor created
  • ABP Commercial version: v8.0.5
  • UI Type: Angular
  • Database System: EF Core (SQL Server)
  • Tiered (for MVC) or Auth Server Separated (for Angular): no

I want to change/customize Login page. I have created project using ABP Suite and can not change it.

<br>

I tried to follow this: UI/AspNetCore/Customization User Interface | Documentation Center | ABP.IO but I am getting error on some lines ( i think this example is not for commercial setup)

also I tried to set empty login page to check if it works and looks it is overrides some elements but not everything

so how customize Login page on project? At moment I need to change: a) Title "MyApplication" b) Background c) Icon d) add additional HTML text like link to Terms and Conditions.

<br> <br> <br>

Go to accepted answer
21 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    To change login page logo and background please check https://support.abp.io/QA/Questions/6203/Changing-Login-Page-Logo-and-Background

    thanks

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    To set the title you can add the title in MyApp.HttpApi.Host\MyAppBrandingProvider.cs file it will result like

    thanks

  • User Avatar
    0
    viktor created

    Hi, @Anjali_Musmade Thank you for your information.

    We are not using Tiered solution, so we do not have MyApp.HttpApi.Host

    and what about how: d) add additional HTML text like link to Terms and Conditions. ?

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    please check https://support.abp.io/QA/Questions/306/Custom-Login-Page-For-Angular

    thanks

  • User Avatar
    0
    viktor created

    Hi, @Anjali_Musmade Why you refering to some old pages which is not relevant anymore? Login page is not Angular anymore... We do not need to change Angular.

    Please provide infomation: a) how we may change "MyApplication" title. b) how to add additional HTML to Login page

    We are using single-layer project from ABP Suite

    1
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    I got that you are using Single-layer application. can you please confirm once your UI type, you have given it as angular?

    please let me know so that I can better assist you.

    thanks

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    To change "MyApplication" title. Create a class MyAppBrandingProvider and add below code

     public class MyAppBrandingProvider: DefaultBrandingProvider
 {
     public override string AppName => "Test";
 }

    it will result like

    thanks

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    to update login page please check https://github.com/abpframework/abp/blob/dev/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml also add code for login.cshtml.cs then you will not get the error for LoginModel as you showed above.

    Thanks

  • User Avatar
    0
    viktor created

    public class MyAppBrandingProvider: DefaultBrandingProvider { public override string AppName => "Test"; }

    Where should I create and place this class?

  • User Avatar
    0
    viktor created

    Hello,

    to update login page please check https://github.com/abpframework/abp/blob/dev/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml also add code for login.cshtml.cs then you will not get the error for LoginModel as you showed above.

    Thanks

    I tried to login.cshtml.cs use but getting error:

    And this is not same Login page. It is different design and missing some elements. I do not want to change anything on Login page, it has everything we need to have, just want to add some HTML to page like checkbox with "I agree with Terms and Conditions".

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    check once https://gist.github.com/ebicoglu/ce0f0425bab806d0ee1a87d0073af96b?permalink_comment_id=3575448#gistcomment-3575448 I tried and it works for me.

    Thanks

  • User Avatar
    0
    viktor created

    Hello,

    check once https://gist.github.com/ebicoglu/ce0f0425bab806d0ee1a87d0073af96b?permalink_comment_id=3575448#gistcomment-3575448 I tried and it works for me.

    Thanks

    What should I check from this link? It is 4 years ago code:

    Please include code for login.cshtml and login.cshtml.cs which works for you.

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    I have used this code for login.cshtml

    which results like

  • User Avatar
    0
    viktor created

    Hi, And what is about login.cshtml.cs because I can not use it without having proper .cs file

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    For login.cshtml.cs you may refer https://github.com/abpframework/abp/blob/dev/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml.cs

  • User Avatar
    0
    viktor created

    I used yours code and it gives me follwing output:

    Strange but no styles of Input textboxes and no style of Login button. No [remember me] checkbox Also Login button is not working.

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    It's strange, With same code I have this output,

    just add login.cshtml code in *.host project like

    please check once

    Thanks,

  • User Avatar
    0
    viktor created

    Hi, I already mentioned we are using Single-tiered application so I have no *.host project.

    I have created Pages/Account in my project

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hi,

    Yes its alright even in Single layer application also it is working fine.

    Can you please check once with this Login.cshtml code

    I think there is no need to add Login.cshtml.cs code. Just add Login.cshtml code I hope this will work, its work at my end

    thanks

  • User Avatar
    0
    viktor created

    Hi, @Anjali_Musmade Now it works. Thank you!

    This issue could be closed. Thank you for for help and patience :)

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    : )

Assignee
User avatar Anjali_Musmade
Labels
None yet
Made with ❤️ on ABP v9.1.0-preview. Updated on December 12, 2024, 07:15