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
Files:
7 added
6 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}

  • KernelRecordsMVC.Web/Views/Admin/Index.cshtml

    rd2eccb3 rd89d25b  
    1313        <div>
    1414
    15             <span class="admin-eyebrow">
    16                 KERNEL RECORDS
    17             </span>
     15            <img src="~/images/logo.png"
     16                 asp-append-version="true"
     17                 alt="Kernel Records"
     18                 class="admin-page-logo" />
    1819
    1920            <h1>Admin Dashboard</h1>
    … …  
    256257
    257258            </a>
     259            <a asp-action="Artists"
     260               class="admin-action-card">
     261
     262                <div class="admin-action-icon">
     263                    ♫
     264                </div>
     265
     266                <div>
     267
     268                    <h3>Manage Artists</h3>
     269
     270                    <p>
     271                        Create and edit artist profiles,
     272                        descriptions and photos.
     273                    </p>
     274
     275                </div>
     276
     277                <span class="admin-action-arrow">
     278                    →
     279                </span>
     280
     281            </a>
     282
     283
     284            <a asp-action="Releases"
     285               class="admin-action-card">
     286
     287                <div class="admin-action-icon">
     288                    ◉
     289                </div>
     290
     291                <div>
     292
     293                    <h3>Manage Releases</h3>
     294
     295                    <p>
     296                        Browse and edit albums and singles
     297                        in the catalog.
     298                    </p>
     299
     300                </div>
     301
     302                <span class="admin-action-arrow">
     303                    →
     304                </span>
     305
     306            </a>
    258307
    259308        </div>

  • KernelRecordsMVC.Web/Views/Home/Index.cshtml

    rd2eccb3 rd89d25b  
    1212
    1313        <div class="home-hero-content">
    14 
    15             <span class="home-eyebrow">
    16                 KERNEL RECORDS
    17             </span>
    1814
    1915            <h1>
    … …  
    5248
    5349
    54         <div class="home-hero-mark">
    55             K
     50        <div class="hero-logo">
     51            <img src="~/images/logo.png"
     52                 asp-append-version="true"
     53                 alt="Kernel Records"
     54                 class="hero-logo-image" />
    5655        </div>
    5756

  • KernelRecordsMVC.Web/Views/Release/Details.cshtml

    rd2eccb3 rd89d25b  
    6868                </div>
    6969
     70
    7071                <div>
    7172
    … …  
    7879                </div>
    7980
     81
    8082                <div>
    8183
    … …  
    8385
    8486                    <strong>
    85                         @Model.RecordLabel
     87                        @(string.IsNullOrWhiteSpace(Model.RecordLabel)
     88                            ? "Independent"
     89                            : Model.RecordLabel)
    8690                    </strong>
    8791
    … …  
    102106                        .OrderBy(x => x.ReleaseOrdinal))
    103107                    {
    104                         <span class="artist-tag">
     108                        <a asp-controller="Artist"
     109                           asp-action="Details"
     110                           asp-route-id="@artist.ArtistId"
     111                           class="artist-tag">
    105112
    106113                            @artist.Artist.ArtistName
    … …  
    113120                            }
    114121
    115                         </span>
     122                        </a>
    116123                    }
    117124
    … …  
    172179                                @product.Format
    173180                            </span>
     181
    174182
    175183                            @if (product.Stock > 0)
    … …  
    203211                            <div class="product-actions">
    204212
     213                                <!-- ADD TO CART -->
     214
    205215                                <a asp-controller="Order"
    206216                                   asp-action="AddProduct"
    … …  
    212222                                </a>
    213223
    214                                 <a asp-controller="Wishlist"
    215                                    asp-action="Add"
    216                                    asp-route-productId="@product.ProductId"
    217                                    class="store-button secondary">
    218 
    219                                     ♡ Wishlist
    220 
    221                                 </a>
     224
     225                                <!-- ADD TO WISHLIST -->
     226
     227                                <form asp-controller="Wishlist"
     228                                      asp-action="Add"
     229                                      method="post">
     230
     231                                    @Html.AntiForgeryToken()
     232
     233                                    <input type="hidden"
     234                                           name="productId"
     235                                           value="@product.ProductId" />
     236
     237                                    <button type="submit"
     238                                            class="store-button secondary">
     239
     240                                        ♡ Wishlist
     241
     242                                    </button>
     243
     244                                </form>
    222245
    223246                            </div>
    … …  
    227250                            <div class="product-actions">
    228251
    229                                 <a asp-controller="Wishlist"
    230                                    asp-action="Add"
    231                                    asp-route-productId="@product.ProductId"
    232                                    class="store-button secondary full">
    233 
    234                                     ♡ Add to Wishlist
    235 
    236                                 </a>
     252                                <!-- OUT OF STOCK: WISHLIST ONLY -->
     253
     254                                <form asp-controller="Wishlist"
     255                                      asp-action="Add"
     256                                      method="post">
     257
     258                                    @Html.AntiForgeryToken()
     259
     260                                    <input type="hidden"
     261                                           name="productId"
     262                                           value="@product.ProductId" />
     263
     264                                    <button type="submit"
     265                                            class="store-button secondary full">
     266
     267                                        ♡ Add to Wishlist
     268
     269                                    </button>
     270
     271                                </form>
    237272
    238273                            </div>
    … …  
    277312
    278313
    279             <ol class="track-list">
    280 
    281                 @{
    282                     var trackNumber = 1;
    283                 }
    284 
    285                 @foreach (var albumSong in Model.Album.AlbumSongs
    286                     .OrderBy(x => x.SongId))
    287                 {
    288                     <li class="track-row">
    289 
    290                         <span class="track-number">
    291                             @trackNumber.ToString("00")
    292                         </span>
    293 
    294                         <div class="track-main">
    295 
    296                             <strong>
    297                                 @albumSong.Song.SongName
    298                             </strong>
    299 
    300                             @if (albumSong.Song.SongArtists.Any())
    301                             {
    302                                 <div class="song-artists">
    303 
    304                                     @string.Join(
    305                                         ", ",
    306                                         albumSong.Song.SongArtists
    307                                             .OrderBy(x => x.SongOrdinal)
    308                                             .Select(x => x.Artist.ArtistName)
    309                                     )
    310 
    311                                 </div>
    312                             }
    313 
    314                         </div>
    315 
    316                         <span class="track-duration">
    317                             @albumSong.Song.SongDuration
    318                         </span>
    319 
    320                     </li>
    321 
    322                     trackNumber++;
    323                 }
    324 
    325             </ol>
     314            @if (!Model.Album.AlbumSongs.Any())
     315            {
     316                <div class="no-products">
     317                    No tracks have been added to this album.
     318                </div>
     319            }
     320            else
     321            {
     322                <ol class="track-list">
     323
     324                    @{
     325                        var trackNumber = 1;
     326                    }
     327
     328
     329                    @foreach (var albumSong in Model.Album.AlbumSongs
     330                        .OrderBy(x => x.SongId))
     331                    {
     332                        <li class="track-row">
     333
     334                            <span class="track-number">
     335                                @trackNumber.ToString("00")
     336                            </span>
     337
     338
     339                            <div class="track-main">
     340
     341                                <strong>
     342                                    @albumSong.Song.SongName
     343                                </strong>
     344
     345
     346                                @if (albumSong.Song.SongArtists != null &&
     347                                     albumSong.Song.SongArtists.Any())
     348                                {
     349                                    <div class="song-artists">
     350
     351                                        @string.Join(
     352                                            ", ",
     353                                            albumSong.Song.SongArtists
     354                                                .OrderBy(x => x.SongOrdinal)
     355                                                .Select(x =>
     356                                                    x.Artist.ArtistName)
     357                                        )
     358
     359                                    </div>
     360                                }
     361
     362                            </div>
     363
     364
     365                            <span class="track-duration">
     366                                @albumSong.Song.SongDuration
     367                            </span>
     368
     369                        </li>
     370
     371                        trackNumber++;
     372                    }
     373
     374                </ol>
     375            }
    326376
    327377        </section>
    … …  
    368418                </div>
    369419
     420
    370421                <div class="single-duration">
    371422

  • KernelRecordsMVC.Web/Views/Shared/_Layout.cshtml

    rd2eccb3 rd89d25b  
    3131        <!-- LOGO -->
    3232
    33         <a class="brand"
    34            asp-controller="Home"
    35            asp-action="Index">
    36 
    37             <span class="brand-main">
    38                 KERNEL
    39             </span>
    40 
    41             <span class="brand-sub">
    42                 RECORDS
    43             </span>
     33        <a asp-controller="Home"
     34           asp-action="Index"
     35           class="navbar-brand logo-brand">
     36
     37            <img src="~/images/logo.png"
     38                 asp-append-version="true"
     39                 alt="Kernel Records"
     40                 class="site-logo" />
    4441
    4542        </a>
Note: See TracChangeset for help on using the changeset viewer.