Blazor Server - Login Page CSS editing

Cenk 951 Reputation points
2022-09-08T08:22:17.353+00:00

Hello nice people,

I am working on a Blazor Server Application. I am pretty new to Blazor, in fact, we have solved many problems with your help. My current request for help concerns the login page and main layout (I guess) CSS changes.

I am using identity user management and here is my login.cshtml:

@page  
  
@using Microsoft.AspNetCore.Authorization  
@using Microsoft.AspNetCore.Mvc.TagHelpers  
@using IMS.WebApp.Shared  
@model LoginModel  
@attribute [AllowAnonymous]  
  
@{  
    ViewData["Title"] = "Log in";  
}  
  
<h1>@ViewData["Title"]</h1>  
<div class="row">  
    <div class="col-md-4">  
        <section>  
            <form id="account" method="post">  
                @*<h2>Use a local account to log in.</h2>*@  
                <hr />  
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>  
                <div class="form-floating m-lg-3">  
                    <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" />  
                    <label asp-for="Input.Email" class="form-label"></label>  
                    <span asp-validation-for="Input.Email" class="text-danger"></span>  
                </div>  
                <div class="form-floating m-lg-3">  
                    <input asp-for="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" />  
                    <label asp-for="Input.Password" class="form-label"></label>  
                    <span asp-validation-for="Input.Password" class="text-danger"></span>  
                </div>  
                @*<div clas="m-lg-3">  
                    <div class="checkbox">  
                        <label asp-for="Input.RememberMe" class="form-label">  
                            <input class="form-check-input" asp-for="Input.RememberMe" />  
                            @Html.DisplayNameFor(m => m.Input.RememberMe)  
                        </label>  
                    </div>  
                </div>*@  
                <div>  
                    <button id="login-submit" type="submit" class="w-100 btn btn-lg btn-primary">Log in</button>  
                </div>  
               @* <div>  
                    <p>  
                        <a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>  
                    </p>  
                    <p>  
                        <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>  
                    </p>  
                    <p>  
                        <a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>  
                    </p>  
                </div>*@  
            </form>  
        </section>  
    </div>  
    @*<div class="col-md-6 col-md-offset-2">  
        <section>  
            <h3>Use another service to log in.</h3>  
            <hr />  
            @{  
                if ((Model.ExternalLogins?.Count ?? 0) == 0)  
                {  
                    <div>  
                        <p>  
                            There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article  
                            about setting up this ASP.NET application to support logging in via external services</a>.  
                        </p>  
                    </div>  
                }  
                else  
                {  
                    <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">  
                        <div>  
                            <p>  
                                @foreach (var provider in Model.ExternalLogins)  
                                {  
                                    <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>  
                                }  
                            </p>  
                        </div>  
                    </form>  
                }  
            }  
        </section>  
    </div>*@  
</div>  
  
@section Scripts {  
    <partial name="_ValidationScriptsPartial" />  
}  

My main goal is to be able to do as in this example (sign-in), but if not, at least the places marked with red should be removed.
238926-login.png

After successful login, is it possible to move "Hello, User" a little more to the left in order to fix the appearance of log out.

238957-logout.png

Thank you.

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,376 questions
0 comments No comments
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 32,006 Reputation points Microsoft Vendor
    2022-09-12T05:56:33.663+00:00

    Hi @Cenk ,

    since this is scaffolded login.cshtml, I can not add the layout the way you suggested.

    By default, the Scaffolded Login page will using the /Pages/Shared/_Layout.cshtml layout, you can check it in the _ViewStart.cshtml page:

    239858-image.png

    So, go to the /Pages/Shared/ folder and create a _IdentityEmptyLayout.cshtml layout, then, copy the _Layout.cshtml content to the _IdentityEmptyLayout.cshtml layout, after that, remove the header and footer elements:

    239935-image.png

    Then, in the Scaffolded Login page, use the following code to set the layout:

    @{  
        Layout = "/Pages/Shared/_IdentityEmptyLayout.cshtml";  
    }  
    

    After that, when login, the result like this:

    239944-1.gif


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

    0 comments No comments

6 additional answers

Sort by: Most helpful
  1. Zhi Lv - MSFT 32,006 Reputation points Microsoft Vendor
    2022-09-09T02:16:26.347+00:00

    Hi @Cenk ,

    After successful login, is it possible to move "Hello, User" a little more to the left in order to fix the appearance of log out.

    You can try increasing the width of the logout button.

    For example, by using the default CSS template and Style, the output like this:

    239294-image.png

    Then, go to the LoginDisplay.razor component (in the shared folder), and add the css width property to the log out button.

    239219-image.png

    After that, the result as below:

    239295-image.png


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

    0 comments No comments

  2. Cenk 951 Reputation points
    2022-09-09T04:45:51.46+00:00

    @Zhi Lv - MSFT thank you, I will try and let you now. What about my first request? The login page CSS changes?


  3. Cenk 951 Reputation points
    2022-09-09T08:10:00.587+00:00

    @Zhi Lv - MSFT since this is scaffolded login.cshtml, I can not add the layout the way you suggested.

    @page  
    @layout LoginLayout  
    @using Microsoft.AspNetCore.Authorization  
    @using Microsoft.AspNetCore.Mvc.TagHelpers  
    @using IMS.WebApp.Shared  
    @model LoginModel  
    @attribute [AllowAnonymous]  
      
    @{  
        ViewData["Title"] = "Log in";  
    }  
      
    <h1>@ViewData["Title"]</h1>  
    <div class="row">  
        <div class="col-md-4">  
            <section>  
                <form id="account" method="post">  
                    @*<h2>Use a local account to log in.</h2>*@  
                    <hr />  
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>  
                    <div class="form-floating m-lg-3">  
                        <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" />  
                        <label asp-for="Input.Email" class="form-label"></label>  
                        <span asp-validation-for="Input.Email" class="text-danger"></span>  
                    </div>  
                    <div class="form-floating m-lg-3">  
                        <input asp-for="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" />  
                        <label asp-for="Input.Password" class="form-label"></label>  
                        <span asp-validation-for="Input.Password" class="text-danger"></span>  
                    </div>  
                    @*<div clas="m-lg-3">  
                        <div class="checkbox">  
                            <label asp-for="Input.RememberMe" class="form-label">  
                                <input class="form-check-input" asp-for="Input.RememberMe" />  
                                @Html.DisplayNameFor(m => m.Input.RememberMe)  
                            </label>  
                        </div>  
                    </div>*@  
                    <div>  
                        <button id="login-submit" type="submit" class="w-100 btn btn-lg btn-primary">Log in</button>  
                    </div>  
                   @* <div>  
                        <p>  
                            <a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>  
                        </p>  
                        <p>  
                            <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>  
                        </p>  
                        <p>  
                            <a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>  
                        </p>  
                    </div>*@  
                </form>  
            </section>  
        </div>  
        @*<div class="col-md-6 col-md-offset-2">  
            <section>  
                <h3>Use another service to log in.</h3>  
                <hr />  
                @{  
                    if ((Model.ExternalLogins?.Count ?? 0) == 0)  
                    {  
                        <div>  
                            <p>  
                                There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article  
                                about setting up this ASP.NET application to support logging in via external services</a>.  
                            </p>  
                        </div>  
                    }  
                    else  
                    {  
                        <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">  
                            <div>  
                                <p>  
                                    @foreach (var provider in Model.ExternalLogins)  
                                    {  
                                        <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>  
                                    }  
                                </p>  
                            </div>  
                        </form>  
                    }  
                }  
            </section>  
        </div>*@  
    </div>  
      
    @section Scripts {  
        <partial name="_ValidationScriptsPartial" />  
    }  
    

    Login Layout:
    @inherits LayoutComponentBase

    <div class="main">  
        @Body  
    </div>  
    

    239403-login-layout.png

    0 comments No comments

  4. Cenk 951 Reputation points
    2022-09-12T18:10:50.247+00:00

    Thank you for the detailed reply. One last thing, I want to apply this https://getbootstrap.com/docs/5.0/examples/sign-in/ to my login. Which CSS should I change? Would you please guide me once again?

    I am grateful and happy :)

    0 comments No comments