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.

Location:
KernelRecordsMVC.Web/Views/Account
Files:
2 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}

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

    rd2eccb3 rd89d25b  
    11@model KernelRecordsMVC.Application.ViewModels.RegisterViewModel
    22
    3 <h2>Register</h2>
    4 
    5 <form asp-action="Register" method="post">
    6 
    7     <div class="mb-3">
    8         <label asp-for="Email" class="form-label"></label>
    9 
    10         <input asp-for="Email"
    11                class="form-control"/>
    12 
    13         <span asp-validation-for="Email"
    14               class="text-danger"></span>
     3@{
     4    ViewData["Title"] = "Register";
     5}
     6
     7<div class="auth-page">
     8
     9    <div class="auth-shell auth-shell-register">
     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                    Start your collection.
     32                </h1>
     33
     34                <p>
     35                    Create an account to save releases,
     36                    build your wishlist and place orders.
     37                </p>
     38
     39            </div>
     40
     41        </div>
     42
     43
     44        <div class="auth-form-panel">
     45
     46            <div class="auth-form-header">
     47
     48                <span class="auth-eyebrow">
     49                    NEW ACCOUNT
     50                </span>
     51
     52                <h2>Register</h2>
     53
     54                <p>
     55                    Create your Kernel Records account.
     56                </p>
     57
     58            </div>
     59
     60
     61            <form asp-action="Register"
     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                <!-- EMAIL -->
     74
     75                <div class="auth-field">
     76
     77                    <label asp-for="Email">
     78                        Email
     79                    </label>
     80
     81                    <input asp-for="Email"
     82                           autocomplete="email"
     83                           placeholder="mila@gmail.com" />
     84
     85                    <span asp-validation-for="Email"
     86                          class="auth-field-error">
     87                    </span>
     88
     89                </div>
     90
     91
     92                <!-- USERNAME -->
     93
     94                <div class="auth-field">
     95
     96                    <label asp-for="Username">
     97                        Username
     98                    </label>
     99
     100                    <input asp-for="Username"
     101                           autocomplete="username"
     102                           placeholder="Choose a username" />
     103
     104                    <span asp-validation-for="Username"
     105                          class="auth-field-error">
     106                    </span>
     107
     108                </div>
     109
     110
     111                <!-- PASSWORD ROW -->
     112
     113                <div class="auth-form-row">
     114
     115                    <div class="auth-field">
     116
     117                        <label asp-for="Password">
     118                            Password
     119                        </label>
     120
     121                        <div class="auth-password-field">
     122
     123                            <input asp-for="Password"
     124                                   autocomplete="new-password"
     125                                   placeholder="Create password"
     126                                   id="registerPassword" />
     127
     128                            <button type="button"
     129                                    class="auth-password-toggle"
     130                                    data-password-toggle="registerPassword"
     131                                    aria-label="Show password">
     132
     133                                Show
     134
     135                            </button>
     136
     137                        </div>
     138
     139                        <span asp-validation-for="Password"
     140                              class="auth-field-error">
     141                        </span>
     142
     143                    </div>
     144
     145
     146                    <div class="auth-field">
     147
     148                        <label asp-for="ConfirmPassword">
     149                            Confirm Password
     150                        </label>
     151
     152                        <div class="auth-password-field">
     153
     154                            <input asp-for="ConfirmPassword"
     155                                   autocomplete="new-password"
     156                                   placeholder="Repeat password"
     157                                   id="confirmPassword" />
     158
     159                            <button type="button"
     160                                    class="auth-password-toggle"
     161                                    data-password-toggle="confirmPassword"
     162                                    aria-label="Show password">
     163
     164                                Show
     165
     166                            </button>
     167
     168                        </div>
     169
     170                        <span asp-validation-for="ConfirmPassword"
     171                              class="auth-field-error">
     172                        </span>
     173
     174                    </div>
     175
     176                </div>
     177
     178
     179                <!-- SHIPPING ADDRESS -->
     180
     181                <div class="auth-field">
     182
     183                    <label asp-for="ShippingAddress">
     184                        Shipping Address
     185                        <span class="auth-optional">
     186                            Optional
     187                        </span>
     188                    </label>
     189
     190                    <input asp-for="ShippingAddress"
     191                           autocomplete="street-address"
     192                           placeholder="Shipping address" />
     193
     194                    <span asp-validation-for="ShippingAddress"
     195                          class="auth-field-error">
     196                    </span>
     197
     198                </div>
     199
     200
     201                <!-- TELEPHONE -->
     202
     203                <div class="auth-field">
     204
     205                    <label asp-for="TelephoneNumber">
     206                        Telephone Number
     207                        <span class="auth-optional">
     208                            Optional
     209                        </span>
     210                    </label>
     211   
     212                    <input asp-for="TelephoneNumber"
     213                           type="tel"
     214                           autocomplete="tel"
     215                           placeholder="+389..." />
     216
     217                    <span asp-validation-for="TelephoneNumber"
     218                          class="auth-field-error">
     219                    </span>
     220
     221                </div>
     222
     223
     224                <button type="submit"
     225                        class="auth-submit">
     226
     227                    Create Account
     228
     229                </button>
     230
     231            </form>
     232
     233
     234            <div class="auth-switch">
     235
     236                <span>
     237                    Already have an account?
     238                </span>
     239
     240                <a asp-action="Login">
     241                    Login →
     242                </a>
     243
     244            </div>
     245
     246        </div>
     247
    15248    </div>
    16249
    17 
    18     <div class="mb-3">
    19         <label asp-for="Username" class="form-label"></label>
    20 
    21         <input asp-for="Username"
    22                class="form-control"/>
    23 
    24         <span asp-validation-for="Username"
    25               class="text-danger"></span>
    26     </div>
    27 
    28 
    29     <div class="mb-3">
    30         <label asp-for="Password"
    31                class="form-label"></label>
    32 
    33         <input asp-for="Password"
    34                class="form-control"/>
    35 
    36         <span asp-validation-for="Password"
    37               class="text-danger"></span>
    38     </div>
    39 
    40 
    41     <div class="mb-3">
    42         <label asp-for="ConfirmPassword"
    43                class="form-label"></label>
    44 
    45         <input asp-for="ConfirmPassword"
    46                class="form-control"/>
    47 
    48         <span asp-validation-for="ConfirmPassword"
    49               class="text-danger"></span>
    50     </div>
    51 
    52 
    53     <div class="mb-3">
    54         <label asp-for="ShippingAddress"
    55                class="form-label">
    56 
    57             Shipping Address
    58 
    59         </label>
    60 
    61         <input asp-for="ShippingAddress"
    62                class="form-control"/>
    63     </div>
    64 
    65 
    66     <div class="mb-3">
    67         <label asp-for="TelephoneNumber"
    68                class="form-label">
    69 
    70             Telephone Number
    71 
    72         </label>
    73 
    74         <input asp-for="TelephoneNumber"
    75                class="form-control"/>
    76     </div>
    77 
    78 
    79     <button type="submit"
    80             class="btn btn-primary">
    81 
    82         Register
    83 
    84     </button>
    85 
    86 </form>
    87 
    88 <div class="mt-3">
    89 
    90     Already have an account?
    91 
    92     <a asp-action="Login">
    93         Login
    94     </a>
    95 
    96250</div>
     251
    97252
    98253@section Scripts
    99254{
    100     <partial name="_ValidationScriptsPartial"/>
     255    <partial name="_ValidationScriptsPartial" />
     256
     257    <script>
     258
     259        document
     260            .querySelectorAll("[data-password-toggle]")
     261            .forEach(function (button)
     262            {
     263                button.addEventListener(
     264                    "click",
     265                    function ()
     266                    {
     267                        const input =
     268                            document.getElementById(
     269                                button.dataset.passwordToggle);
     270
     271
     272                        if (input.type === "password")
     273                        {
     274                            input.type = "text";
     275                            button.textContent = "Hide";
     276                            button.setAttribute(
     277                                "aria-label",
     278                                "Hide password");
     279                        }
     280                        else
     281                        {
     282                            input.type = "password";
     283                            button.textContent = "Show";
     284                            button.setAttribute(
     285                                "aria-label",
     286                                "Show password");
     287                        }
     288                    });
     289            });
     290
     291    </script>
    101292}
Note: See TracChangeset for help on using the changeset viewer.