Open Closed

Theme synchronisation between ui apps. #6321


User avatar
0
mgurer created
  • ABP Framework version: v7.4.2
  • UI Type: Blazor WASM
  • Database System: EF Core (PostgreSQL) /
  • Tiered (for MVC) or Auth Server Separated (for Angular): yes
  • Exception message and full stack trace:
  • Steps to reproduce the issue: Hello, is there a way to pass active theme name between ui app and auth server. When I select dark theme in blazor admin ui and click the login button, the page redirects to auth-server ui where light theme is selected. My client asks if the selected theme can be preserved between ui apps. Are there built in solution for this request?

13 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello mgurer,

    Are you using separate AuthServer?

    I have checked at my end its working properly for Light theme it is showing light for auth server and for dark theme it is showing dark for auth server.

    What exactly you are expecting can you please explain in detail.

    Thanks, Anjali

  • User Avatar
    0
    mgurer created

    Hello, I will check your reply.

    Actually I am not interested about the blazor admin UI. I have a custom UI admin app implemented with VUE. I can not figure out how to open auth-server app so that it renders specific theme. Maybe I can pass a querystring param to the auth-server redirect url.

  • User Avatar
    0
    mgurer created

    By the way, the I have checked your answer. On localhost, the app runs as you described. Theme cookies are set on "localhost" domain and ports are ignored. So same cookie for both sites are shared.

    On production, I have two seperate subdomain. admin.mysite.com and auth.mysite.com The theme cookies are set for each domain individualy and the values differ between cookies so the experience is broken.

  • User Avatar
    0
    mgurer created

    Any suggestions?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Are there built in solution for this request?

    You may consider setting cookies to the common domain. see: https://learn.microsoft.com/en-us/aspnet/core/security/cookie-sharing?view=aspnetcore-8.0#share-cookies-across-subdomains

  • User Avatar
    0
    mgurer created

    Thanks.

    Can you share the type of the options variable. It is not stated in the document.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    You can change CookieRequestCultureProvider.DefaultCookieName to your cookies name.

    https://gist.github.com/maliming/b1ea80d68982a5b7064d7df6bafa89f5

  • User Avatar
    0
    mgurer created

    hi,,

    that does not help.

    still abp loptonx theme cookies are created for subdomain.

    I could able to apply the code you provided from auth-server app. Changed the cookie name with the ones below. Still no chage. lpx_appereance lpx_loaded-css

    I could not even apply the given code for blazor webassembly ui. Too many missing types.

    I have traced all abp source codes, public/commercieal, and could not find where you place these cookies.

    I beleive I am not the only one experiencing this problem, you should have more common, built-in solution for this theme synchronisation issue. Blazor ui and auth-server ui must also be out-of-phase for someone else.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    They are actually set by JS.

    You can subscribe to events:

    myleptonx.js

    leptonx.AppearanceSettingEvent.on(document.body, evnet => {
       
        var theme = evnet.detail.theme;
    
        setCookie("lpx_loaded-css", theme, ".sharedDomain.com");
        setCookie("lpx_appearance", theme, ".sharedDomain.com");
    });
    
    function setCookie(name, value, domain, day = 365) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (day * 24 * 60 * 60 * 1000));
        document.cookie = name + '=' + value + ';expires=' + expires.toUTCString() + ';domain=' + domain + ';path=/';
    }
    
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    index.html

  • User Avatar
    0
    mgurer created

    Hi again.

    Some progress made finally.

    I have two issues now;

    1 - I have applied the script on blazor project. Now cookies are dubled with subdomain and root domain. I have tried to delete the cookie for the subdomain but still cookies are doubled. Maybe it will be helpful to unsubscribe before new subscribtion.

    function setCookie(name, value, domain, day = 365) {
        delete_cookie(name, '/', document.location.host);
        var expires = new Date();
        expires.setTime(expires.getTime() + (day * 24 * 60 * 60 * 1000));
        document.cookie = name + '=' + value + ';expires=' + expires.toUTCString() + ';domain=' + domain + ';path=/';
    }
    function get_cookie(name) {
        return document.cookie.split(';').some(c => {
            return c.trim().startsWith(name + '=');
        });
    }
    function delete_cookie(name, path, domain) {
        if (get_cookie(name)) {
            document.cookie = name + "=" +
                ((path) ? ";path=" + path : "") +
                ((domain) ? ";domain=" + domain : "") +
                ";expires=Thu, 01 Jan 1970 00:00:01 GMT";
        }
    }
    

    This issue is not big deal, because I see that theme is synchronised when I switch selected theme on blazor ui.

    2 - On authserver project, I tried to apply the same javascript but I get an error indicating leptonx is not defined. I guess the flow is somehow different for auth-server project. This issue needs to be fixed, when I set theme on auth-server site, synchronisation gets broken again.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    1

    You can ignore it if it's work.

    2

    Can you try this?

    Configure<AbpBundlingOptions>(options =>
    {
        options.ScriptBundles.Configure(
            LeptonXThemeBundles.Scripts.Global,
            bundle =>
            {
                bundle.AddFiles("/myleptonx.js");
            }
        );
    });
    
  • User Avatar
    0
    mgurer created

    Hi,

    Everything works fine.

    I also deleted subdomain cookies within a js interval of 500 ms.

    Thanks.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 12, 2024, 07:15