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

I managed to change the CSS of my login page :) But I couldn't center the text on the page even though I added

.text-center {  
    text-align: center !important;  
}  

to the signin.css.

Here is my new login.cshtml:
@Anonymous

@using Microsoft.AspNetCore.Authorization  
@using Microsoft.AspNetCore.Mvc.TagHelpers  
@using IMS.WebApp.Shared  
@model LoginModel  
@attribute [AllowAnonymous]  
  
@{  
    Layout = "/Pages/Shared/_EmptyLayout.cshtml";  
}  
@{  
    ViewData["Title"] = "Log in";  
}  
<main class="form-signin">  
    <form id="account" method="post">  
        <img class="mb-4" src="~/css/images/logo.png" alt="" width="230" height="110">  
        <h1 class="h3 mb-3 fw-normal">Please sign in</h1>  
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>  
        <div class="form-floating">  
            <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>  
            @*<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">  
            <label for="floatingInput">Email address</label>*@  
        </div>  
        <div class="form-floating">  
            <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>  
            @*<input type="password" class="form-control" id="floatingPassword" placeholder="Password">  
            <label for="floatingPassword">Password</label>*@  
        </div>  
  
          
        <button id="login-submit" class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>  
        <p class="mt-5 mb-3 text-muted">© 2022</p>  
    </form>  
</main>     
  
@section Scripts {  
    <partial name="_ValidationScriptsPartial" />  
}  

Here is the screenshot:

Answer 3

Hi @Cenk ,

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?

You can refer to the following Login.cshtml page, and change the form content to yours: 240326-logincshtml.txt

The output 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