ProfileMenu logout

Radzen Studio Blazor Server
1

Hi,
I have a logout button/link on my header, which i now want to move to a ProfileMenu instead. So far I have the following ProfileMenu:

<RadzenProfileMenu>
    <Template>
        <RadzenIcon Icon="account_circle"></RadzenIcon>
    </Template>
    <ChildContent>
        <RadzenProfileMenuItem Text="Manage account" Path="Identity/Account/Manage" Icon="manage_accounts"></RadzenProfileMenuItem>
        <RadzenProfileMenuItem Text="Logout" Icon="power_settings_new">
        </RadzenProfileMenuItem>
    </ChildContent>
</RadzenProfileMenu>

The working logout link is as follows:

<form method="post" action="Identity/Account/LogOut">
    <button type="submit" class="nav-link btn btn-link">Log out</button>
</form>

How can I achieve the same functionality in the ProfileMenu? Is there a way to specify a post request in the Path of RadzenProfileMenuItem?

2

Hi @esaitch,

There isn't a way to make a post request from the ProfileMenuItem. Can you make the Identity/Account/LogOut method support GET requests as well?

3

I don't think that would be a good idea. I would like to prevent users to get logged out by simply going to a url

Would I be able to style an element so that it looks like a ProfileMenuItem?

4

If you copy the HTML and CSS - yes. Use your browser's developer tools to inspect that.

5

In case anyone else runs into this problem, I solved it by using a form element and a Radzen button with ButtonType="ButtonType.Submit" and then adding some styling:

<RadzenProfileMenu>
    <Template>
        <RadzenIcon Icon="account_circle" Style="font-size:2rem"></RadzenIcon>
    </Template>
    <ChildContent>
        <RadzenProfileMenuItem Text="Manage account" Path="Identity/Account/Manage" Icon="manage_accounts"></RadzenProfileMenuItem>
        <form method="post" action="Identity/Account/LogOut">
            <RadzenButton class="logout-form-btn" ButtonType="ButtonType.Submit" Icon="power_settings_new" Text="Log out" />
        </form>
    </ChildContent>
</RadzenProfileMenu>

CSS:

.logout-form-btn {
    background-color: #ffffff !important;
    color: #4f4f50 !important;
    font-size: 14px !important;
    font-weight: unset !important;
    cursor: pointer !important;
    padding: 8px !important;
    width: 100%;
    text-align: left;
}
.logout-form-btn:hover {
    background-color: #D9E3FD !important;
    color: #1151F3 !important;
}
.rz-navigation-item-link {
    cursor: pointer !important;
}
1 Like
6

Example using Blazor .net 9

<form method="post" action="Account/Logout" name="logout">
    <AntiforgeryToken />
    <input type="hidden" value="Account/Login" name="returnUrl" />
</form>
<RadzenProfileMenuItem Text="Logout" Value="Logout" Icon="power_settings_new" Path="javascript:document.forms['logout'].submit();" />
1 Like