Ignore:
Timestamp:
09/01/26 07:17:16 (4 weeks ago)
Author:
mmilevski <markomilevski3@…>
Branches:
main
Children:
595d2e5
Parents:
d2eccb3
Message:

Added few implementaions, minor UI changes.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • KernelRecordsMVC.Web/Views/Account/Login.cshtml

    rd2eccb3 rd89d25b  
    11@model KernelRecordsMVC.Application.ViewModels.LoginViewModel
    22
    3 <h2>Login</h2>
     3@{
     4    ViewData["Title"] = "Login";
     5}
    46
    5 <form asp-action="Login" method="post">
     7<div class="auth-page">
    68
    7     <div asp-validation-summary="ModelOnly"
    8          class="text-danger">
    9     </div>
     9    <div class="auth-shell">
     10
     11        <div class="auth-brand-panel">
     12
     13            <a asp-controller="Home"
     14               asp-action="Index"
     15               class="auth-logo-link">
     16
     17                <img src="~/images/logo.png"
     18                     asp-append-version="true"
     19                     alt="Kernel Records"
     20                     class="auth-logo" />
     21
     22            </a>
     23
     24            <div class="auth-brand-copy">
     25
     26                <span class="auth-eyebrow">
     27                    KERNEL RECORDS
     28                </span>
     29
     30                <h1>
     31                    Welcome back.
     32                </h1>
     33
     34                <p>
     35                    Sign in to manage your wishlist,
     36                    orders and record collection.
     37                </p>
     38
     39            </div>
     40
     41        </div>
    1042
    1143
    12     <div class="mb-3">
     44        <div class="auth-form-panel">
    1345
    14         <label asp-for="Username"
    15                class="form-label">
    16         </label>
     46            <div class="auth-form-header">
    1747
    18         <input asp-for="Username"
    19                class="form-control"/>
     48                <span class="auth-eyebrow">
     49                    ACCOUNT
     50                </span>
    2051
    21         <span asp-validation-for="Username"
    22               class="text-danger">
    23         </span>
     52                <h2>Login</h2>
     53
     54                <p>
     55                    Enter your account details below.
     56                </p>
     57
     58            </div>
     59
     60
     61            <form asp-action="Login"
     62                  method="post"
     63                  class="auth-form">
     64
     65                @Html.AntiForgeryToken()
     66
     67
     68                <div asp-validation-summary="ModelOnly"
     69                     class="auth-validation-summary">
     70                </div>
     71
     72
     73                <!-- USERNAME -->
     74
     75                <div class="auth-field">
     76
     77                    <label asp-for="Username">
     78                        Username
     79                    </label>
     80
     81                    <input asp-for="Username"
     82                           autocomplete="username"
     83                           placeholder="Enter your username" />
     84
     85                    <span asp-validation-for="Username"
     86                          class="auth-field-error">
     87                    </span>
     88
     89                </div>
     90
     91
     92                <!-- PASSWORD -->
     93
     94                <div class="auth-field">
     95
     96                    <label asp-for="Password">
     97                        Password
     98                    </label>
     99
     100                    <div class="auth-password-field">
     101
     102                        <input asp-for="Password"
     103                               autocomplete="current-password"
     104                               placeholder="Enter your password"
     105                               id="loginPassword" />
     106
     107                        <button type="button"
     108                                class="auth-password-toggle"
     109                                data-password-toggle="loginPassword"
     110                                aria-label="Show password">
     111
     112                            Show
     113
     114                        </button>
     115
     116                    </div>
     117
     118                    <span asp-validation-for="Password"
     119                          class="auth-field-error">
     120                    </span>
     121
     122                </div>
     123
     124
     125                <button type="submit"
     126                        class="auth-submit">
     127
     128                    Login
     129
     130                </button>
     131
     132            </form>
     133
     134
     135            <div class="auth-switch">
     136
     137                <span>
     138                    Don't have an account?
     139                </span>
     140
     141                <a asp-action="Register">
     142                    Create account →
     143                </a>
     144
     145            </div>
     146
     147        </div>
    24148
    25149    </div>
    26150
     151</div>
    27152
    28     <div class="mb-3">
    29 
    30         <label asp-for="Password"
    31                class="form-label">
    32         </label>
    33 
    34         <input asp-for="Password"
    35                class="form-control"/>
    36 
    37         <span asp-validation-for="Password"
    38               class="text-danger">
    39         </span>
    40 
    41     </div>
    42 
    43 
    44     <button type="submit"
    45             class="btn btn-primary">
    46 
    47         Login
    48 
    49     </button>
    50 
    51 </form>
    52 
    53 <div class="mt-3">
    54 
    55     Don't have an account?
    56 
    57     <a asp-action="Register">
    58         Register
    59     </a>
    60 
    61 </div>
    62153
    63154@section Scripts
    64155{
    65     <partial name="_ValidationScriptsPartial"/>
     156    <partial name="_ValidationScriptsPartial" />
     157
     158    <script>
     159
     160        document
     161            .querySelectorAll("[data-password-toggle]")
     162            .forEach(function (button)
     163            {
     164                button.addEventListener(
     165                    "click",
     166                    function ()
     167                    {
     168                        const input =
     169                            document.getElementById(
     170                                button.dataset.passwordToggle);
     171
     172
     173                        if (input.type === "password")
     174                        {
     175                            input.type = "text";
     176                            button.textContent = "Hide";
     177                            button.setAttribute(
     178                                "aria-label",
     179                                "Hide password");
     180                        }
     181                        else
     182                        {
     183                            input.type = "password";
     184                            button.textContent = "Show";
     185                            button.setAttribute(
     186                                "aria-label",
     187                                "Show password");
     188                        }
     189                    });
     190            });
     191
     192    </script>
    66193}
Note: See TracChangeset for help on using the changeset viewer.