Open Closed

Manage profile and user name get merged while changing language #2632

User avatar
0
safi created

Hi

I am facing a UI issue while changing the language from English to german. Please find the below screenshot for the same and please let me know how can I resolve this. Thanks,

  • ABP Framework version: v4.4.3
  • UI type: Blazor
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
Go to accepted answer
18 Answer(s)
  • User Avatar
    0
    safi created

    Any update?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you check the HTML structure via the chrome elements tool?

  • User Avatar
    0
    safi created

    hi

    Can you check the HTML structure via the chrome elements tool?

    Hi

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you try to get latest source code of Lepton and override the MainHeaderToolbarUserMenu?

  • User Avatar
    0
    safi created

    hi

    Can you try to get latest source code of Lepton and override the MainHeaderToolbarUserMenu?

    How can I do this?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    https://github.com/abpframework/abp/blob/dev/docs/en/UI/Blazor/Customization-Overriding-Components.md

    <AuthorizeView>
    <Authorized>
        @if ( UserMenu != null )
        {
            <BarItem>
                <BarDropdown>
                    <BarDropdownToggle Class="btn">
                        <img src="@ProfileImageUrl" width="21" class="user-avatar me-1" alt="@UserName" />
                        @if ( TenantName != null )
                        {
                            <span><i>@TenantName</i>\@UserName</span>
                        }
                        else
                        {
                            <span>@UserName</span>
                        }
                    </BarDropdownToggle>
                    <BarDropdownMenu RightAligned="true">
                        <BarDropdownItem>
                            <Row Padding="Padding.Is2">
                                <Column ColumnSize="ColumnSize.IsAuto" Padding="Padding.Is0.FromEnd">
                                    <img src="@ProfileImageUrl" class="user-avatar-big" width="48" alt="@UserName" />
                                </Column>
                                <Column Padding="Padding.Is2.FromStart">
                                    <span>@UiLocalizer["Welcome"]</span><br />
                                    <Strong>@UserFullName</Strong>
                                </Column>
                            </Row>
                        </BarDropdownItem>
                        <DropdownDivider />
                        @foreach ( var item in UserMenu.Items )
                        {
                            <BarDropdownItem id="@item.ElementId" Class="@item.CssClass" Clicked="() => NavigateToAsync(item.Url, item.Target)">@item.DisplayName</BarDropdownItem>
                        }
                        <BarDropdownItem Clicked="BeginSignOut">@UiLocalizer["Logout"]</BarDropdownItem>
                    </BarDropdownMenu>
                </BarDropdown>
            </BarItem>
        }
    </Authorized>
    <NotAuthorized>
        <a class="nav-link btn" href="authentication/login">@UiLocalizer["Login"]</a>
    </NotAuthorized>
</AuthorizeView>
  • User Avatar
    0
    safi created

    https://github.com/abpframework/abp/blob/dev/docs/en/UI/Blazor/Customization-Overriding-Components.md

    <AuthorizeView> 
    <Authorized> 
        @if ( UserMenu != null ) 
        { 
            <BarItem> 
                <BarDropdown> 
                    <BarDropdownToggle Class="btn"> 
                        <img src="@ProfileImageUrl" width="21" class="user-avatar me-1" alt="@UserName" /> 
                        @if ( TenantName != null ) 
                        { 
                            <span><i>@TenantName</i>\@UserName</span> 
                        } 
                        else 
                        { 
                            <span>@UserName</span> 
                        } 
                    </BarDropdownToggle> 
                    <BarDropdownMenu RightAligned="true"> 
                        <BarDropdownItem> 
                            <Row Padding="Padding.Is2"> 
                                <Column ColumnSize="ColumnSize.IsAuto" Padding="Padding.Is0.FromEnd"> 
                                    <img src="@ProfileImageUrl" class="user-avatar-big" width="48" alt="@UserName" /> 
                                </Column> 
                                <Column Padding="Padding.Is2.FromStart"> 
                                    <span>@UiLocalizer["Welcome"]</span><br /> 
                                    <Strong>@UserFullName</Strong> 
                                </Column> 
                            </Row> 
                        </BarDropdownItem> 
                        <DropdownDivider /> 
                        @foreach ( var item in UserMenu.Items ) 
                        { 
                            <BarDropdownItem id="@item.ElementId" Class="@item.CssClass" Clicked="() => NavigateToAsync(item.Url, item.Target)">@item.DisplayName</BarDropdownItem> 
                        } 
                        <BarDropdownItem Clicked="BeginSignOut">@UiLocalizer["Logout"]</BarDropdownItem> 
                    </BarDropdownMenu> 
                </BarDropdown> 
            </BarItem> 
        } 
    </Authorized> 
    <NotAuthorized> 
        <a class="nav-link btn" href="authentication/login">@UiLocalizer["Login"]</a> 
    </NotAuthorized> 
</AuthorizeView>

    I referred that link and created a razor page and pasted this code as well but while building project I am getting 20 errors which is related to above code only like Username is not defined etc.

    Can you please guide me for the same.

    Thanks,

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    The MainHeaderToolbarUserMenu class

    using System;
using System.Text;
using System.Threading.Tasks;
using Localization.Resources.AbpUi;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.Extensions.Localization;
using Microsoft.Extensions.Options;
using Microsoft.JSInterop;
using Volo.Abp.Http.Client;
using Volo.Abp.MultiTenancy;
using Volo.Abp.UI.Navigation;
using Volo.Abp.Users;

namespace Volo.Abp.AspNetCore.Components.WebAssembly.LeptonTheme.Components.ApplicationLayout.MainHeader;

public partial class MainHeaderToolbarUserMenu : IDisposable
{
    [Inject]
    protected IMenuManager MenuManager { get; set; }

    [Inject]
    protected ICurrentUser CurrentUser { get; set; }

    [Inject]
    protected ICurrentTenant CurrentTenant { get; set; }

    [Inject]
    protected SignOutSessionStateManager SignOutManager { get; set; }

    [Inject]
    protected NavigationManager Navigation { get; set; }

    [Inject]
    protected AuthenticationStateProvider AuthenticationStateProvider { get; set; }

    [Inject]
    protected IStringLocalizer<AbpUiResource> UiLocalizer { get; set; }

    [Inject]
    protected IOptions<AbpRemoteServiceOptions> RemoteServiceOptions { get; set; }

    [Inject]
    protected IJSRuntime JsRuntime { get; set; }

    protected ApplicationMenu UserMenu { get; set; }

    protected Guid? UserId { get; set; }

    protected string UserName { get; set; }

    protected string TenantName { get; set; }

    protected string ProfileImageUrl { get; set; }

    protected string UserFullName { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await SetUserMenuAndProfileAsync();

        Navigation.LocationChanged += OnLocationChanged;
        AuthenticationStateProvider.AuthenticationStateChanged += AuthenticationStateProviderOnAuthenticationStateChanged;
    }

    private async Task SetUserMenuAndProfileAsync()
    {
        UserMenu = await MenuManager.GetAsync(StandardMenus.User);

        UserId = CurrentUser.Id;
        UserName = CurrentUser.UserName;
        UserFullName = CalculateUserFullName();
        TenantName = CurrentTenant.Name;

        if (UserId != null)
        {
            ProfileImageUrl = RemoteServiceOptions.Value.RemoteServices.Default?.BaseUrl?.TrimEnd('/') +
                              $"/api/account/profile-picture-file/{UserId}";
        }
    }

    protected virtual void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        InvokeAsync(StateHasChanged);
    }

    private async void AuthenticationStateProviderOnAuthenticationStateChanged(Task<AuthenticationState> task)
    {
        await SetUserMenuAndProfileAsync();
        await InvokeAsync(StateHasChanged);
    }

    protected virtual async Task BeginSignOut()
    {
        await SignOutManager.SetSignOutState();
        await NavigateToAsync("authentication/logout");
    }

    protected virtual async Task NavigateToAsync(string uri, string target = null)
    {
        if (target == "_blank")
        {
            await JsRuntime.InvokeVoidAsync("open", uri, target);
        }
        else
        {
            Navigation.NavigateTo(uri);
        }

    }

    protected virtual string CalculateUserFullName()
    {
        //TODO: Should we move this logic to some extension method for the ICurrentUser?

        var fullName = new StringBuilder();

        if (!CurrentUser.Name.IsNullOrEmpty())
        {
            fullName.Append(CurrentUser.Name);
        }

        if (!CurrentUser.SurName.IsNullOrEmpty())
        {
            if (fullName.Length > 0)
            {
                fullName.Append(" ");
            }

            fullName.Append(CurrentUser.SurName);
        }

        if (fullName.Length == 0)
        {
            fullName.Append(CurrentUser.UserName);
        }

        return fullName.ToString();
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= OnLocationChanged;
        AuthenticationStateProvider.AuthenticationStateChanged -= AuthenticationStateProviderOnAuthenticationStateChanged;
    }
}
  • User Avatar
    0
    safi created

    hi

    The MainHeaderToolbarUserMenu class

    using System; 
using System.Text; 
using System.Threading.Tasks; 
using Localization.Resources.AbpUi; 
using Microsoft.AspNetCore.Components; 
using Microsoft.AspNetCore.Components.Authorization; 
using Microsoft.AspNetCore.Components.Routing; 
using Microsoft.AspNetCore.Components.WebAssembly.Authentication; 
using Microsoft.Extensions.Localization; 
using Microsoft.Extensions.Options; 
using Microsoft.JSInterop; 
using Volo.Abp.Http.Client; 
using Volo.Abp.MultiTenancy; 
using Volo.Abp.UI.Navigation; 
using Volo.Abp.Users; 
 
namespace Volo.Abp.AspNetCore.Components.WebAssembly.LeptonTheme.Components.ApplicationLayout.MainHeader; 
 
public partial class MainHeaderToolbarUserMenu : IDisposable 
{ 
    [Inject] 
    protected IMenuManager MenuManager { get; set; } 
 
    [Inject] 
    protected ICurrentUser CurrentUser { get; set; } 
 
    [Inject] 
    protected ICurrentTenant CurrentTenant { get; set; } 
 
    [Inject] 
    protected SignOutSessionStateManager SignOutManager { get; set; } 
 
    [Inject] 
    protected NavigationManager Navigation { get; set; } 
 
    [Inject] 
    protected AuthenticationStateProvider AuthenticationStateProvider { get; set; } 
 
    [Inject] 
    protected IStringLocalizer<AbpUiResource> UiLocalizer { get; set; } 
 
    [Inject] 
    protected IOptions<AbpRemoteServiceOptions> RemoteServiceOptions { get; set; } 
 
    [Inject] 
    protected IJSRuntime JsRuntime { get; set; } 
 
    protected ApplicationMenu UserMenu { get; set; } 
 
    protected Guid? UserId { get; set; } 
 
    protected string UserName { get; set; } 
 
    protected string TenantName { get; set; } 
 
    protected string ProfileImageUrl { get; set; } 
 
    protected string UserFullName { get; set; } 
 
    protected override async Task OnInitializedAsync() 
    { 
        await SetUserMenuAndProfileAsync(); 
 
        Navigation.LocationChanged += OnLocationChanged; 
        AuthenticationStateProvider.AuthenticationStateChanged += AuthenticationStateProviderOnAuthenticationStateChanged; 
    } 
 
    private async Task SetUserMenuAndProfileAsync() 
    { 
        UserMenu = await MenuManager.GetAsync(StandardMenus.User); 
 
        UserId = CurrentUser.Id; 
        UserName = CurrentUser.UserName; 
        UserFullName = CalculateUserFullName(); 
        TenantName = CurrentTenant.Name; 
 
        if (UserId != null) 
        { 
            ProfileImageUrl = RemoteServiceOptions.Value.RemoteServices.Default?.BaseUrl?.TrimEnd('/') + 
                              $"/api/account/profile-picture-file/{UserId}"; 
        } 
    } 
 
    protected virtual void OnLocationChanged(object sender, LocationChangedEventArgs e) 
    { 
        InvokeAsync(StateHasChanged); 
    } 
 
    private async void AuthenticationStateProviderOnAuthenticationStateChanged(Task<AuthenticationState> task) 
    { 
        await SetUserMenuAndProfileAsync(); 
        await InvokeAsync(StateHasChanged); 
    } 
 
    protected virtual async Task BeginSignOut() 
    { 
        await SignOutManager.SetSignOutState(); 
        await NavigateToAsync("authentication/logout"); 
    } 
 
    protected virtual async Task NavigateToAsync(string uri, string target = null) 
    { 
        if (target == "_blank") 
        { 
            await JsRuntime.InvokeVoidAsync("open", uri, target); 
        } 
        else 
        { 
            Navigation.NavigateTo(uri); 
        } 
 
    } 
 
    protected virtual string CalculateUserFullName() 
    { 
        //TODO: Should we move this logic to some extension method for the ICurrentUser? 
 
        var fullName = new StringBuilder(); 
 
        if (!CurrentUser.Name.IsNullOrEmpty()) 
        { 
            fullName.Append(CurrentUser.Name); 
        } 
 
        if (!CurrentUser.SurName.IsNullOrEmpty()) 
        { 
            if (fullName.Length > 0) 
            { 
                fullName.Append(" "); 
            } 
 
            fullName.Append(CurrentUser.SurName); 
        } 
 
        if (fullName.Length == 0) 
        { 
            fullName.Append(CurrentUser.UserName); 
        } 
 
        return fullName.ToString(); 
    } 
 
    public void Dispose() 
    { 
        Navigation.LocationChanged -= OnLocationChanged; 
        AuthenticationStateProvider.AuthenticationStateChanged -= AuthenticationStateProviderOnAuthenticationStateChanged; 
    } 
}

    Hi

    Thanks for this. I create a class in blazer project and put this class in root level while building the project getting errors like no suitable method.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Can you share the project with me? liming.ma@volosoft.com

  • User Avatar
    0
    safi created

    Can you share the project with me? liming.ma@volosoft.com

    yes I can but it's a big project so can we connect on zoom to check this?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    https://zoom.us/j/93375961515?pwd=bmlSak5TOFRka0dEWDkxMW5DbVE0UT09

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you use this to override your page?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    https://file.io/GaV0yJbA99oV

  • User Avatar
    0
    safi created

    https://file.io/GaV0yJbA99oV

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Send an email to me liming.ma@volosoft.com

  • User Avatar
    0
    safi created

    hi

    Send an email to me liming.ma@volosoft.com

    I just sent you a mail on this email id so please share necessary code on it.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    You can create a new project to see the HTML structure and CSS. Or try changing the current style.

Assignee
No one
Labels
None yet
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.3.0-preview. Updated on May 21, 2025, 13:37