source: KernelRecordsMVC.Web/Views/Account/Login.cshtml

@model KernelRecordsMVC.Application.ViewModels.LoginViewModel

@{
    ViewData["Title"] = "Login";
}

<div class="auth-page">

    <div class="auth-shell">

        <div class="auth-brand-panel">

            <a asp-controller="Home"
               asp-action="Index"
               class="auth-logo-link">

                <img src="~/images/logo.png"
                     asp-append-version="true"
                     alt="Kernel Records"
                     class="auth-logo" />

            </a>

            <div class="auth-brand-copy">

                <span class="auth-eyebrow">
                    KERNEL RECORDS
                </span>

                <h1>
                    Welcome back.
                </h1>

                <p>
                    Sign in to manage your wishlist,
                    orders and record collection.
                </p>

            </div>

        </div>


        <div class="auth-form-panel">

            <div class="auth-form-header">

                <span class="auth-eyebrow">
                    ACCOUNT
                </span>

                <h2>Login</h2>

                <p>
                    Enter your account details below.
                </p>

            </div>


            <form asp-action="Login"
                  method="post"
                  class="auth-form">

                @Html.AntiForgeryToken()


                <div asp-validation-summary="ModelOnly"
                     class="auth-validation-summary">
                </div>


                <!-- USERNAME -->

                <div class="auth-field">

                    <label asp-for="Username">
                        Username
                    </label>

                    <input asp-for="Username"
                           autocomplete="username"
                           placeholder="Enter your username" />

                    <span asp-validation-for="Username"
                          class="auth-field-error">
                    </span>

                </div>


                <!-- PASSWORD -->

                <div class="auth-field">

                    <label asp-for="Password">
                        Password
                    </label>

                    <div class="auth-password-field">

                        <input asp-for="Password"
                               autocomplete="current-password"
                               placeholder="Enter your password"
                               id="loginPassword" />

                        <button type="button"
                                class="auth-password-toggle"
                                data-password-toggle="loginPassword"
                                aria-label="Show password">

                            Show

                        </button>

                    </div>

                    <span asp-validation-for="Password"
                          class="auth-field-error">
                    </span>

                </div>


                <button type="submit"
                        class="auth-submit">

                    Login

                </button>

            </form>


            <div class="auth-switch">

                <span>
                    Don't have an account?
                </span>

                <a asp-action="Register">
                    Create account →
                </a>

            </div>

        </div>

    </div>

</div>


@section Scripts
{
    <partial name="_ValidationScriptsPartial" />

    <script>

        document
            .querySelectorAll("[data-password-toggle]")
            .forEach(function (button)
            {
                button.addEventListener(
                    "click",
                    function ()
                    {
                        const input =
                            document.getElementById(
                                button.dataset.passwordToggle);


                        if (input.type === "password")
                        {
                            input.type = "text";
                            button.textContent = "Hide";
                            button.setAttribute(
                                "aria-label",
                                "Hide password");
                        }
                        else
                        {
                            input.type = "password";
                            button.textContent = "Show";
                            button.setAttribute(
                                "aria-label",
                                "Show password");
                        }
                    });
            });

    </script>
}