Blazor Server - Login Page CSS editing

Question

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.

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.

Thank you.

Answer 1

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:

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:

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:

---

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

Answer 2

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:

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

After that, the result as below:

---

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

Answer 3

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

Answer 4

@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>  

Answer 5

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 :)