@model LoginModel
@using Nop.Core
@using Nop.Core.Domain.Customers

@inject IWebHelper webHelper
@{
    Layout = "_ColumnsOne";

    //title
    NopHtml.AddTitleParts(T("PageTitle.Login").Text);
    //page class
    NopHtml.AppendPageCssClassParts("html-login-page");

    //register URL with return URL (if specified)
    var registerUrl = Url.RouteUrl("Register", new { returnUrl = this.Context.Request.Query["returnUrl"] }, webHelper.GetCurrentRequestProtocol());
}
<div class="page login-page">
    <div class="page-title">
        <h1>@T("Account.Login.Welcome")</h1>
    </div>
    @await Html.PartialAsync("_ExternalAuthentication.Errors")
    <div class="page-body">
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.LoginTop, additionalData = Model })
        <div class="customer-blocks">
            @if (Model.RegistrationType == UserRegistrationType.Disabled)
            {
                <div class="new-wrapper">
                    <div class="title">
                        @T("Account.Register")
                    </div>
                    <div class="text">
                        @T("Account.Register.Result.Disabled")
                    </div>
                </div>
            }
            else if (Model.CheckoutAsGuest)
            {
                <div class="new-wrapper checkout-as-guest-or-register-block">
                    <div class="title">
                        <strong>@T("Account.Login.CheckoutAsGuestOrRegister")</strong>
                    </div>
                    <div class="text">
                        @await Component.InvokeAsync(typeof(TopicBlockViewComponent), new { systemName = "CheckoutAsGuestOrRegister" })
                    </div>
                    <div class="buttons">
                        <button type="button" class="button-1 checkout-as-guest-button" onclick="location.href='@Url.RouteUrl("Checkout")'">@T("Account.Login.CheckoutAsGuest")</button>
                        <button type="button" class="button-1 register-button" onclick="location.href='@registerUrl'">@T("Account.Register")</button>
                    </div>
                </div>
            }
            else
            {
                <div class="new-wrapper register-block">
                    <div class="title">
                        <strong>@T("Account.Login.NewCustomer")</strong>
                    </div>
                    <div class="text">
                        @T("Account.Login.NewCustomerText")
                    </div>
                    <div class="buttons">
                        <button type="button" class="button-1 register-button" onclick="location.href='@registerUrl'">@T("Account.Register")</button>
                    </div>
                </div>
            }
            <div class="returning-wrapper fieldset">
                <form asp-route="Login" asp-route-returnurl="@Context.Request.Query["ReturnUrl"]" method="post" autocomplete="off">
                    <div asp-validation-summary="ModelOnly" class="message-error">@T("Account.Login.Unsuccessful")</div>
                   
                    <div class="form-fields">
                        <div class="title">
                            <strong>@T("Account.Login.ReturningCustomer")</strong>
                        </div>
                        @if (Model.UsernamesEnabled)
                        {
                            <div class="inputs">
                                <label asp-for="Username" asp-postfix=":"></label>
                                <input asp-for="Username" class="username" autofocus="autofocus" />
                                <span asp-validation-for="Username"></span>
                            </div>
                        }
                        else
                        {
                            <div class="inputs">
                                <label asp-for="Email" asp-postfix=":"></label>
                                <input asp-for="Email" class="email" autofocus="autofocus" />
                                <span asp-validation-for="Email"></span>
                            </div>
                        }
                        <div class="inputs">
                            <label asp-for="Password" asp-postfix=":"></label>
                            <div class="login-password">
                                <input asp-for="Password" class="password" />
                                <span class="password-eye"></span>
                            </div>
                            <span asp-validation-for="Password"></span>
                        </div>
                        <div class="inputs reversed">
                            <input asp-for="RememberMe" />
                            <label asp-for="RememberMe"></label>
                            <span class="forgot-password">
                                <a asp-route="PasswordRecovery">@T("Account.Login.ForgotPassword")</a>
                            </span>
                        </div>
                        @if (Model.DisplayCaptcha)
                        {
                            <nop-captcha />
                        }
                        <div class="buttons">
                            <button type="submit" class="button-1 login-button">@T("Account.Login.LoginButton")</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="external-authentication">
            @await Component.InvokeAsync(typeof(ExternalMethodsViewComponent), "ExternalAuthentication")
        </div>
        @await Component.InvokeAsync(typeof(TopicBlockViewComponent), new { systemName = "LoginRegistrationInfo" })
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.LoginBottom, additionalData = Model })
    </div>
</div>

<script asp-location="Footer">
    $(function () {
        const password = $("#@Html.IdFor(m => m.Password)");

        $(".password-eye").on("click", function () {
            // toggle the type attribute
            const type = password.attr("type") === "password" ? "text" : "password";
            password.attr("type", type);

            // toggle the icon
            $(this).toggleClass("password-eye-open");
        });
    });
</script>