[deps] Auth: Update bootstrap to v5 [SECURITY] (#4881)

* [deps] Auth: Update bootstrap to v5 [SECURITY]

* Update bootstrap and import dependencies in site.scss

* Update site.scss to include the theme color 'dark'

* Refactor site.scss to merge the 'primary-accent' theme color into the existing theme colors

* Update bootstrap classes for v5

* Refactor form layout in Index.cshtml and AddExistingOrganization.cshtml

* Revert change to the shield icon in the navbar

* Fix organization form select inputs

* Fixed search input sizes

* Fix elements in Providers and Users search

* More bootstrap migration

* Revert change to tax rate delete button

* Add missing label classes in Users/Edit.cshtml

* More component migrations

* Refactor form classes and labels in CreateMsp.cshtml and CreateReseller.cshtml

* Update package dependencies in Sso

* Revert changes to Providers/Edit.cshtml

* Refactor CreateMultiOrganizationEnterprise.cshtml and Providers/Edit.cshtml for bootstrap 5

* Refactor webpack.config.js to use @popperjs/core instead of popper.js

* Remove popperjs package dependency

* Restore Bootstrap 4 link styling behavior

- Remove default text decoration
- Add underline only on hover

* Update Bootstrap to version 5.3.3

* Update deprecated text color classes from 'text-muted' to 'text-body-secondary' across various views

* Refactor provider edit view for bootstrap 5

* Remove underline in Add/Create organization links in provider page

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Rui Tome <rtome@bitwarden.com>
Co-authored-by: Rui Tomé <108268980+r-tome@users.noreply.github.com>

src/Admin/Views/Home/Index.cshtml

@@ -105,7 +105,7 @@
 <h3>SMTP</h3>
 @if(!Bit.Core.Utilities.CoreHelpers.SettingHasValue(Model.GlobalSettings.Mail?.Smtp?.Host))
 {
-    <p class="text-muted">Not configured</p>
+    <p class="text-body-secondary">Not configured</p>
 }
 else
 {
@@ -159,7 +159,7 @@ else
         }
         else
         {
-            <span class="text-muted">Not configured</span>
+            <span class="text-body-secondary">Not configured</span>
         }
     </dd>
 
@@ -171,7 +171,7 @@ else
         }
         else
         {
-            <span class="text-muted">Not configured</span>
+            <span class="text-body-secondary">Not configured</span>
         }
     </dd>
 
@@ -183,7 +183,7 @@ else
         }
         else
         {
-            <span class="text-muted">Not configured</span>
+            <span class="text-body-secondary">Not configured</span>
         }
     </dd>
 </dl>

src/Admin/Views/Shared/_Layout.cshtml

@@ -37,12 +37,12 @@
             <a class="navbar-brand" asp-controller="Home" asp-action="Index">
                 <i class="fa fa-lg fa-fw fa-shield"></i> Admin
             </a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
                     aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarCollapse">
-                <ul class="navbar-nav mr-auto">
+                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                     @if (SignInManager.IsSignedIn(User))
                     {
                         @if (canViewUsers)
@@ -69,10 +69,10 @@
                             {
                                 <li class="nav-item dropdown" active-controller="tools">
                                     <a class="nav-link dropdown-toggle" href="#" id="toolsDropdown" role="button"
-                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                         Tools
                                     </a>
-                                    <div class="dropdown-menu" aria-labelledby="toolsDropdown">
+                                    <ul class="dropdown-menu" aria-labelledby="toolsDropdown">
                                         @if (canChargeBraintree)
                                         {
                                             <a class="dropdown-item" asp-controller="Tools" asp-action="ChargeBraintree">
@@ -121,7 +121,7 @@
                                                 Migrate Providers
                                             </a>
                                         }
-                                    </div>
+                                    </ul>
                                 </li>
                             }
                         }

src/Admin/Views/Tools/CreateUpdateTransaction.cshtml

@@ -10,30 +10,30 @@
     <div asp-validation-summary="All" class="alert alert-danger"></div>
     <div class="row">
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="UserId"></label>
+            <div class="mb-3">
+                <label asp-for="UserId" class="form-label"></label>
                 <input type="text" class="form-control" asp-for="UserId">
             </div>
         </div>
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="OrganizationId"></label>
+            <div class="mb-3">
+                <label asp-for="OrganizationId" class="form-label"></label>
                 <input type="text" class="form-control" asp-for="OrganizationId">
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="Date"></label>
+            <div class="mb-3">
+                <label asp-for="Date" class="form-label"></label>
                 <input type="datetime-local" class="form-control" asp-for="Date" required>
             </div>
         </div>
         <div class="col-md">
             <div class="form-group">
-                <div class="form-group">
-                    <label asp-for="Type"></label>
-                    <select class="form-control" asp-for="Type" required
+                <div class="mb-3">
+                    <label asp-for="Type" class="form-label"></label>
+                    <select class="form-select" asp-for="Type" required
                             asp-items="Html.GetEnumSelectList<Bit.Core.Enums.TransactionType>()"></select>
                 </div>
             </div>
@@ -41,24 +41,20 @@
     </div>
     <div class="row">
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="Amount"></label>
-                <div class="input-group mb-3">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text">$</span>
-                    </div>
+            <div class="mb-3">
+                <label asp-for="Amount" class="form-label"></label>
+                <div class="input-group">
+                    <span class="input-group-text">$</span>
                     <input type="number" min="-1000000.00" max="1000000.00" step="0.01" class="form-control"
                            asp-for="Amount" required placeholder="ex. 10.00">
                 </div>
             </div>
         </div>
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="RefundedAmount"></label>
-                <div class="input-group mb-3">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text">$</span>
-                    </div>
+            <div class="mb-3">
+                <label asp-for="RefundedAmount" class="form-label"></label>
+                <div class="input-group">
+                    <span class="input-group-text">$</span>
                     <input type="number" min="0.01" max="1000000.00" step="0.01" class="form-control"
                            asp-for="RefundedAmount" placeholder="ex. 10.00">
                 </div>
@@ -69,39 +65,35 @@
         <input type="checkbox" class="form-check-input" asp-for="Refunded">
         <label class="form-check-label" asp-for="Refunded"></label>
     </div>
-    <div class="form-group">
-        <label asp-for="Details"></label>
+    <div class="mb-3">
+        <label asp-for="Details" class="form-label"></label>
         <input type="text" class="form-control" asp-for="Details" required>
     </div>
     <div class="row">
         <div class="col-md">
-            <div class="form-group">
-                <div class="form-group">
-                    <label asp-for="Gateway"></label>
-                    <select class="form-control" asp-for="Gateway"
-                            asp-items="Html.GetEnumSelectList<Bit.Core.Enums.GatewayType>()">
-                        <option value="">--</option>
-                    </select>
-                </div>
+            <div class="mb-3">
+                <label asp-for="Gateway" class="form-label"></label>
+                <select class="form-select" asp-for="Gateway"
+                        asp-items="Html.GetEnumSelectList<Bit.Core.Enums.GatewayType>()">
+                    <option value="">--</option>
+                </select>
             </div>
         </div>
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="GatewayId"></label>
+            <div class="mb-3">
+                <label asp-for="GatewayId" class="form-label"></label>
                 <input type="text" class="form-control" asp-for="GatewayId">
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-md-6">
-            <div class="form-group">
-                <div class="form-group">
-                    <label asp-for="PaymentMethod"></label>
-                    <select class="form-control" asp-for="PaymentMethod"
-                            asp-items="Html.GetEnumSelectList<Bit.Core.Enums.PaymentMethodType>()">
-                        <option value="">--</option>
-                    </select>
-                </div>
+            <div class="mb-3">
+                <label asp-for="PaymentMethod" class="form-label"></label>
+                <select class="form-select" asp-for="PaymentMethod"
+                        asp-items="Html.GetEnumSelectList<Bit.Core.Enums.PaymentMethodType>()">
+                    <option value="">--</option>
+                </select>
             </div>
         </div>
     </div>

src/Admin/Views/Tools/GenerateLicense.cshtml

@@ -9,28 +9,28 @@
     <div asp-validation-summary="All" class="alert alert-danger"></div>
     <div class="row">
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="UserId"></label>
+            <div class="mb-3">
+                <label asp-for="UserId" class="form-label"></label>
                 <input type="text" class="form-control" asp-for="UserId">
             </div>
         </div>
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="OrganizationId"></label>
+            <div class="mb-3">
+                <label asp-for="OrganizationId" class="form-label"></label>
                 <input type="text" class="form-control" asp-for="OrganizationId">
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="InstallationId"></label>
+            <div class="mb-3">
+                <label asp-for="InstallationId" class="form-label"></label>
                 <input type="text" class="form-control" asp-for="InstallationId">
             </div>
         </div>
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="Version"></label>
+            <div class="mb-3">
+                <label asp-for="Version" class="form-label"></label>
                 <input type="number" class="form-control" asp-for="Version">
             </div>
         </div>

src/Admin/Views/Tools/PromoteAdmin.cshtml

@@ -9,17 +9,17 @@
     <div asp-validation-summary="All" class="alert alert-danger"></div>
     <div class="row">
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="UserId"></label>
+            <div class="mb-3">
+                <label asp-for="UserId" class="form-label"></label>
                 <input type="text" class="form-control" asp-for="UserId">
             </div>
         </div>
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="OrganizationId"></label>
+            <div class="mb-3">
+                <label asp-for="OrganizationId" class="form-label"></label>
                 <input type="text" class="form-control" asp-for="OrganizationId">
             </div>
         </div>
     </div>
-    <button type="submit" class="btn btn-primary mb-2">Promote Admin</button>
+    <button type="submit" class="btn btn-primary">Promote Admin</button>
 </form>

src/Admin/Views/Tools/StripeSubscriptions.cshtml

@@ -74,208 +74,204 @@
     <div class="alert alert-success"></div>
 }
 <form method="post">
-<div asp-validation-summary="All" class="alert alert-danger"></div>
-<div class="row">
-    <div class="col-6">
-        <label asp-for="Filter.Status">Status</label>
-        <select asp-for="Filter.Status" name="filter.Status" class="form-control mr-2">
-            <option asp-selected="Model.Filter.Status == null" value="all">All</option>
-            <option asp-selected='Model.Filter.Status == "active"' value="active">Active</option>
-            <option asp-selected='Model.Filter.Status == "unpaid"' value="unpaid">Unpaid</option>
-        </select>
-    </div>
-    <div class="col-6">
-        <label asp-for="Filter.CurrentPeriodEnd">Current Period End</label>
-        <div class="input-group">
-            <div class="input-group-append">
+    <div asp-validation-summary="All" class="alert alert-danger"></div>
+    <div class="row g-3">
+        <div class="col-md-6">
+            <label class="form-label" asp-for="Filter.Status">Status</label>
+            <select asp-for="Filter.Status" name="filter.Status" class="form-select">
+                <option asp-selected="Model.Filter.Status == null" value="all">All</option>
+                <option asp-selected='Model.Filter.Status == "active"' value="active">Active</option>
+                <option asp-selected='Model.Filter.Status == "unpaid"' value="unpaid">Unpaid</option>
+            </select>
+        </div>
+        <div class="col-md-6">
+            <label class="form-label" asp-for="Filter.CurrentPeriodEnd">Current Period End</label>
+            <div class="input-group">
                 <div class="input-group-text">
-                    <span class="mr-1">
-                        <input type="radio" class="mr-1" asp-for="Filter.CurrentPeriodEndRange" name="filter.CurrentPeriodEndRange" value="lt">Before
-                    </span>
-                    <input type="radio" asp-for="Filter.CurrentPeriodEndRange" name="filter.CurrentPeriodEndRange" value="gt">After
+                    <div class="form-check form-check-inline mb-0">
+                        <input type="radio" class="form-check-input" asp-for="Filter.CurrentPeriodEndRange" value="lt" id="beforeRadio">
+                        <label class="form-check-label me-2" for="beforeRadio">Before</label>
+                    </div>
+                    <div class="form-check form-check-inline mb-0">
+                        <input type="radio" class="form-check-input" asp-for="Filter.CurrentPeriodEndRange" value="gt" id="afterRadio">
+                        <label class="form-check-label" for="afterRadio">After</label>
+                    </div>
                 </div>
-            </div>
-            @{
-                var date = @Model.Filter.CurrentPeriodEndDate.HasValue ? @Model.Filter.CurrentPeriodEndDate.Value.ToString("yyyy-MM-dd") : string.Empty;
+                @{
+                    var date = @Model.Filter.CurrentPeriodEndDate.HasValue ? @Model.Filter.CurrentPeriodEndDate.Value.ToString("yyyy-MM-dd") : string.Empty;
+                }
                 <input type="date" class="form-control" asp-for="Filter.CurrentPeriodEndDate" name="filter.CurrentPeriodEndDate" value="@date">
-            }
+            </div>
+        </div>
+        <div class="col-md-6">
+            <label class="form-label" asp-for="Filter.Price">Price ID</label>
+            <select asp-for="Filter.Price" name="filter.Price" class="form-select">
+                <option asp-selected="Model.Filter.Price == null" value="@null">All</option>
+                @foreach (var price in Model.Prices)
+                {
+                    <option asp-selected='@(Model.Filter.Price == price.Id)' value="@price.Id">@price.Id</option>
+                }
+            </select>
+        </div>
+        <div class="col-md-6">
+            <label class="form-label" asp-for="Filter.TestClock">Test Clock</label>
+            <select asp-for="Filter.TestClock" name="filter.TestClock" class="form-select">
+                <option asp-selected="Model.Filter.TestClock == null" value="@null">All</option>
+                @foreach (var clock in Model.TestClocks)
+                {
+                    <option asp-selected='@(Model.Filter.TestClock == clock.Id)' value="@clock.Id">@clock.Name</option>
+                }
+            </select>
+        </div>
+        <div class="col-12 text-end">
+            <button type="submit" class="btn btn-primary" title="Search" name="action" asp-for="Action" value="@StripeSubscriptionsAction.Search">
+                <i class="fa fa-search"></i> Search
+            </button>
         </div>
     </div>
-</div>
-<div class="row mt-2">
-    <div class="col-6">
-        <label asp-for="Filter.Price">Price ID</label>
-        <select asp-for="Filter.Price" name="filter.Price" class="form-control mr-2">
-            <option asp-selected="Model.Filter.Price == null" value="@null">All</option>
-            @foreach (var price in Model.Prices)
-            {
-                <option asp-selected='@(Model.Filter.Price == price.Id)' value="@price.Id">@price.Id</option>
-            }
-        </select>
+    <hr/>
+    <input type="checkbox" class="d-none" name="filter.SelectAll" id="selectAllInput" asp-for="@Model.Filter.SelectAll">
+    <div class="text-center row d-flex justify-content-center">
+        <div id="selectAll" class="d-none col-8">
+            All @Model.Items.Count subscriptions on this page are selected.<br/>
+            <button type="button" id="selectAllElement" class="btn btn-link p-0 pb-1" onclick="onSelectAll()">Click here to select all subscriptions for this search.</button>
+            <span id="selectedAllConfirmation" class="d-none text-body-secondary">
+                <i class="fa fa-check"></i> All subscriptions for this search are selected.
+            </span>
+            <div class="alert alert-warning mt-2" role="alert">
+                Please be aware that bulk operations may take several minutes to complete.
+            </div>
+        </div>
     </div>
-    <div class="col-6">
-        <label asp-for="Filter.TestClock">Test Clock</label>
-        <select asp-for="Filter.TestClock" name="filter.TestClock" class="form-control mr-2">
-            <option asp-selected="Model.Filter.TestClock == null" value="@null">All</option>
-            @foreach (var clock in Model.TestClocks)
-            {
-                <option asp-selected='@(Model.Filter.TestClock == clock.Id)' value="@clock.Id">@clock.Name</option>
-            }
-        </select>
-    </div>
-</div>
-<div class="row col-12 d-flex justify-content-end my-3">
-    <button type="submit" class="btn btn-primary" title="Search" name="action" asp-for="Action" value="@StripeSubscriptionsAction.Search"><i class="fa fa-search"></i> Search</button>
-</div>
-<hr/>
-<input type="checkbox" class="d-none" name="filter.SelectAll" id="selectAllInput" asp-for="@Model.Filter.SelectAll">
-<div class="text-center row d-flex justify-content-center">
-    <div id="selectAll" class="d-none col-8">
-        All @Model.Items.Count subscriptions on this page are selected.<br/>
-        <button type="button" id="selectAllElement" class="btn btn-link p-0 pb-1" onclick="onSelectAll()">Click here to select all subscriptions for this search.</button>
-        <span id="selectedAllConfirmation" class="d-none text-muted">✔ All subscriptions for this search are selected.</span><br/>
-        <div class="alert alert-warning" role="alert">Please be aware that bulk operations may take several minutes to complete.</div>
-    </div>
-</div>
-<div class="table-responsive">
-    <table class="table table-striped table-hover">
-        <thead>
-        <tr>
-            <th>
-                <div class="form-check form-check-inline">
-                    <input id="selectPage" class="form-check-input" type="checkbox" onchange="onRowSelect(true)">
-                </div>
-            </th>
-            <th>Id</th>
-            <th>Customer Email</th>
-            <th>Status</th>
-            <th>Product Tier</th>
-            <th>Current Period End</th>
-        </tr>
-        </thead>
-        <tbody>
-        @if (!Model.Items.Any())
-        {
+    <div class="table-responsive">
+        <table class="table table-striped table-hover align-middle">
+            <thead>
             <tr>
-                <td colspan="6">No results to list.</td>
+                <th>
+                    <div class="form-check">
+                        <input id="selectPage" class="form-check-input" type="checkbox" onchange="onRowSelect(true)">
+                    </div>
+                </th>
+                <th>Id</th>
+                <th>Customer Email</th>
+                <th>Status</th>
+                <th>Product Tier</th>
+                <th>Current Period End</th>
             </tr>
-        }
-        else
-        {
-            @for (var i = 0; i < Model.Items.Count; i++)
+            </thead>
+            <tbody>
+            @if (!Model.Items.Any())
             {
                 <tr>
-                    <td>
-
-                        @{
-                            var i0 = i;
-                        }
-                        <input type="hidden" asp-for="@Model.Items[i0].Subscription.Id" value="@Model.Items[i].Subscription.Id">
-                        <input type="hidden" asp-for="@Model.Items[i0].Subscription.Status" value="@Model.Items[i].Subscription.Status">
-                        <input type="hidden" asp-for="@Model.Items[i0].Subscription.CurrentPeriodEnd" value="@Model.Items[i].Subscription.CurrentPeriodEnd">
-                        <input type="hidden" asp-for="@Model.Items[i0].Subscription.Customer.Email" value="@Model.Items[i].Subscription.Customer.Email">
-                        <input type="hidden" asp-for="@Model.Items[i0].Subscription.LatestInvoice.Status" value="@Model.Items[i].Subscription.LatestInvoice.Status">
-                        <input type="hidden" asp-for="@Model.Items[i0].Subscription.LatestInvoice.Id" value="@Model.Items[i].Subscription.LatestInvoice.Id">
-
-                        @for (var j = 0; j < Model.Items[i].Subscription.Items.Data.Count; j++)
-                        {
-                            var i1 = i;
-                            var j1 = j;
-                            <input
-                                type="hidden"
-                                asp-for="@Model.Items[i1].Subscription.Items.Data[j1].Plan.Id"
-                                value="@Model.Items[i].Subscription.Items.Data[j].Plan.Id">
-                        }
-                        <div class="form-check">
-
-                            @{
-                                var i2 = i;
-                            }
-                            <input class="form-check-input row-check" onchange="onRowSelect()" asp-for="@Model.Items[i2].Selected">
-                        </div>
-                    </td>
-                    <td>
-                        @Model.Items[i].Subscription.Id
-                    </td>
-                    <td>
-                        @Model.Items[i].Subscription.Customer?.Email
-                    </td>
-                    <td>
-                        @Model.Items[i].Subscription.Status
-                    </td>
-                    <td>
-                        @string.Join(",", Model.Items[i].Subscription.Items.Data.Select(product => product.Plan.Id).ToArray())
-                    </td>
-                    <td>
-                        @Model.Items[i].Subscription.CurrentPeriodEnd.ToShortDateString()
-                    </td>
+                    <td colspan="6">No results to list.</td>
                 </tr>
             }
-        }
-        </tbody>
-    </table>
-</div>
-<nav class="d-inline-flex">
-    <ul class="pagination">
-        @if (!string.IsNullOrWhiteSpace(Model.Filter.EndingBefore))
-        {
-            <input type="hidden" asp-for="@Model.Filter.EndingBefore" value="@Model.Filter.EndingBefore">
-            <li class="page-item">
-                <button
-                    type="submit"
-                    class="page-link"
-                    name="action"
-                    asp-for="Action"
-                    value="@StripeSubscriptionsAction.PreviousPage">
-                    Previous
-                </button>
-            </li>
-        }
-        else
-        {
-            <li class="page-item disabled">
-                <a class="page-link" href="#" tabindex="-1">Previous</a>
-            </li>
-        }
-        @if (!string.IsNullOrWhiteSpace(Model.Filter.StartingAfter))
-        {
-            <input type="hidden" asp-for="@Model.Filter.StartingAfter" value="@Model.Filter.StartingAfter">
-            <li class="page-item">
-                <button class="page-link"
+            else
+            {
+                @for (var i = 0; i < Model.Items.Count; i++)
+                {
+                    <tr>
+                        <td>
+
+                            @{
+                                var i0 = i;
+                            }
+                            <input type="hidden" asp-for="@Model.Items[i0].Subscription.Id" value="@Model.Items[i].Subscription.Id">
+                            <input type="hidden" asp-for="@Model.Items[i0].Subscription.Status" value="@Model.Items[i].Subscription.Status">
+                            <input type="hidden" asp-for="@Model.Items[i0].Subscription.CurrentPeriodEnd" value="@Model.Items[i].Subscription.CurrentPeriodEnd">
+                            <input type="hidden" asp-for="@Model.Items[i0].Subscription.Customer.Email" value="@Model.Items[i].Subscription.Customer.Email">
+                            <input type="hidden" asp-for="@Model.Items[i0].Subscription.LatestInvoice.Status" value="@Model.Items[i].Subscription.LatestInvoice.Status">
+                            <input type="hidden" asp-for="@Model.Items[i0].Subscription.LatestInvoice.Id" value="@Model.Items[i].Subscription.LatestInvoice.Id">
+
+                            @for (var j = 0; j < Model.Items[i].Subscription.Items.Data.Count; j++)
+                            {
+                                var i1 = i;
+                                var j1 = j;
+                                <input
+                                    type="hidden"
+                                    asp-for="@Model.Items[i1].Subscription.Items.Data[j1].Plan.Id"
+                                    value="@Model.Items[i].Subscription.Items.Data[j].Plan.Id">
+                            }
+                            <div class="form-check">
+
+                                @{
+                                    var i2 = i;
+                                }
+                                <input class="form-check-input row-check mt-0" onchange="onRowSelect()" asp-for="@Model.Items[i2].Selected">
+                            </div>
+                        </td>
+                        <td>
+                            @Model.Items[i].Subscription.Id
+                        </td>
+                        <td>
+                            @Model.Items[i].Subscription.Customer?.Email
+                        </td>
+                        <td>
+                            @Model.Items[i].Subscription.Status
+                        </td>
+                        <td>
+                            @string.Join(",", Model.Items[i].Subscription.Items.Data.Select(product => product.Plan.Id).ToArray())
+                        </td>
+                        <td>
+                            @Model.Items[i].Subscription.CurrentPeriodEnd.ToShortDateString()
+                        </td>
+                    </tr>
+                }
+            }
+            </tbody>
+        </table>
+    </div>
+    <nav class="d-inline-flex align-items-center">
+        <ul class="pagination mb-0">
+            @if (!string.IsNullOrWhiteSpace(Model.Filter.EndingBefore))
+            {
+                <input type="hidden" asp-for="@Model.Filter.EndingBefore" value="@Model.Filter.EndingBefore">
+                <li class="page-item">
+                    <button
                         type="submit"
+                        class="page-link"
                         name="action"
                         asp-for="Action"
-                        value="@StripeSubscriptionsAction.NextPage">
-                    Next
+                        value="@StripeSubscriptionsAction.PreviousPage">
+                        Previous
+                    </button>
+                </li>
+            }
+            else
+            {
+                <li class="page-item disabled">
+                    <a class="page-link" href="#" tabindex="-1">Previous</a>
+                </li>
+            }
+            @if (!string.IsNullOrWhiteSpace(Model.Filter.StartingAfter))
+            {
+                <input type="hidden" asp-for="@Model.Filter.StartingAfter" value="@Model.Filter.StartingAfter">
+                <li class="page-item">
+                    <button class="page-link"
+                            type="submit"
+                            name="action"
+                            asp-for="Action"
+                            value="@StripeSubscriptionsAction.NextPage">
+                        Next
+                    </button>
+                </li>
+            }
+            else
+            {
+                <li class="page-item disabled">
+                    <a class="page-link" href="#" tabindex="-1">Next</a>
+                </li>
+            }
+        </ul>
+        <span id="bulkActions" class="d-none ms-3">
+            <span class="d-inline-flex gap-2">
+                <button type="submit" class="btn btn-primary" name="action" asp-for="Action" value="@StripeSubscriptionsAction.Export">
+                    Export
                 </button>
-            </li>
-        }
-        else
-        {
-            <li class="page-item disabled">
-                <a class="page-link" href="#" tabindex="-1">Next</a>
-            </li>
-        }
-    </ul>
-    <span id="bulkActions" class="d-none ml-2">
-        <span class="d-inline-flex">
-            <button
-                type="submit"
-                class="btn btn-primary mr-1"
-                name="action"
-                asp-for="Action"
-                value="@StripeSubscriptionsAction.Export">
-                Export
-            </button>
-            <button
-                type="submit"
-                class="btn btn-danger"
-                name="action"
-                asp-for="Action"
-                value="@StripeSubscriptionsAction.BulkCancel">
-                Bulk Cancel
-            </button>
+                <button type="submit" class="btn btn-danger" name="action" asp-for="Action" value="@StripeSubscriptionsAction.BulkCancel">
+                    Bulk Cancel
+                </button>
+            </span>
         </span>
-    </span>
-</nav>
+    </nav>
 </form>

src/Admin/Views/Tools/TaxRate.cshtml

@@ -27,20 +27,20 @@
         </div>
     </div>
     <form method="post" enctype="multipart/form-data" asp-action="TaxRateUpload">
-        <div class="form-group">
-            <input type="file" name="file" />
+        <div class="mb-3">
+            <input type="file" class="form-control" name="file" />
         </div>
-        <div class="form-group">
-            <input type="submit" value="Upload" class="btn btn-primary mb-2" />
+        <div class="mb-3">
+            <input type="submit" value="Upload" class="btn btn-primary" />
         </div>
     </form>
 </section>
 
-<hr/>
+<hr class="my-4">
 <h2>View &amp; Manage Tax Rates</h2>
-<a class="btn btn-primary mb-2" asp-controller="Tools" asp-action="TaxRateAddEdit">Add a Rate</a>
+<a class="btn btn-primary mb-3" asp-controller="Tools" asp-action="TaxRateAddEdit">Add a Rate</a>
 <div class="table-responsive">
-    <table class="table table-striped table-hover">
+    <table class="table table-striped table-hover align-middle">
         <thead>
             <tr>
                 <th style="width: 190px;">Id</th>
@@ -97,7 +97,7 @@
     </table>
 </div>
 
-<nav>
+<nav aria-label="Tax rates pagination">
     <ul class="pagination">
         @if(Model.PreviousPage.HasValue)
         {

src/Admin/Views/Users/Edit.cshtml

@@ -115,8 +115,8 @@
         <h2>Premium</h2>
         <div class="row">
             <div class="col-sm">
-                <div class="form-group">
-                    <label asp-for="MaxStorageGb"></label>
+                <div class="mb-3">
+                    <label asp-for="MaxStorageGb" class="form-label"></label>
                     <input type="number" class="form-control" asp-for="MaxStorageGb" min="1" readonly='@(!canEditPremium)'>
                 </div>
             </div>
@@ -131,14 +131,14 @@
         <h2>Licensing</h2>
         <div class="row">
             <div class="col-sm">
-                <div class="form-group">
-                    <label asp-for="LicenseKey"></label>
+                <div class="mb-3">
+                    <label asp-for="LicenseKey" class="form-label"></label>
                     <input type="text" class="form-control" asp-for="LicenseKey" readonly='@(!canEditLicensing)'>
                 </div>
             </div>
             <div class="col-sm">
-                <div class="form-group">
-                    <label asp-for="PremiumExpirationDate"></label>
+                <div class="mb-3">
+                    <label asp-for="PremiumExpirationDate" class="form-label"></label>
                     <input type="datetime-local" class="form-control" asp-for="PremiumExpirationDate" readonly='@(!canEditLicensing)'>
                 </div>
             </div>
@@ -149,44 +149,38 @@
     <h2>Billing</h2>
     <div class="row">
         <div class="col-md">
-            <div class="form-group">
-                <div class="form-group">
-                    <label asp-for="Gateway"></label>
-                    <select class="form-control" asp-for="Gateway" disabled='@(canEditBilling ? null : "disabled")'
-                            asp-items="Html.GetEnumSelectList<Bit.Core.Enums.GatewayType>()">
-                        <option value="">--</option>
-                    </select>
-                </div>
+            <div class="mb-3">
+                <label asp-for="Gateway" class="form-label"></label>
+                <select class="form-select" asp-for="Gateway" disabled='@(canEditBilling ? null : "disabled")'
+                        asp-items="Html.GetEnumSelectList<Bit.Core.Enums.GatewayType>()">
+                    <option value="">--</option>
+                </select>
             </div>
         </div>
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="GatewayCustomerId"></label>
+            <div class="mb-3">
+                <label asp-for="GatewayCustomerId" class="form-label"></label>
                 <div class="input-group">
                     <input type="text" class="form-control" asp-for="GatewayCustomerId" readonly='@(!canEditBilling)'>
                     @if (canLaunchGateway)
                     {
-                        <div class="input-group-append">
-                            <button class="btn btn-secondary" type="button" id="gateway-customer-link">
-                                <i class="fa fa-external-link"></i>
-                            </button>
-                        </div>
+                        <button class="btn btn-secondary" type="button" id="gateway-customer-link">
+                            <i class="fa fa-external-link"></i>
+                        </button>
                     }
                 </div>
             </div>
         </div>
         <div class="col-md">
-            <div class="form-group">
-                <label asp-for="GatewaySubscriptionId"></label>
+            <div class="mb-3">
+                <label asp-for="GatewaySubscriptionId" class="form-label"></label>
                 <div class="input-group">
                     <input type="text" class="form-control" asp-for="GatewaySubscriptionId" readonly='@(!canEditBilling)'>
                     @if (canLaunchGateway)
                     {
-                        <div class="input-group-append">
-                            <button class="btn btn-secondary" type="button" id="gateway-subscription-link">
-                                <i class="fa fa-external-link"></i>
-                            </button>
-                        </div>
+                        <button class="btn btn-secondary" type="button" id="gateway-subscription-link">
+                            <i class="fa fa-external-link"></i>
+                        </button>
                     }
                 </div>
             </div>
@@ -196,10 +190,10 @@
 </form>
 <div class="d-flex mt-4">
     <button type="submit" class="btn btn-primary" form="edit-form">Save</button>
-    <div class="ml-auto d-flex">
+    <div class="ms-auto d-flex">
         @if (canUpgradePremium)
         {
-            <button class="btn btn-secondary mr-2" type="button" id="upgrade-premium">
+            <button class="btn btn-secondary me-2" type="button" id="upgrade-premium">
                 Upgrade Premium
             </button>
         }

src/Admin/Views/Users/Index.cshtml

@@ -5,10 +5,16 @@
 
 <h1>Users</h1>
 
-<form class="form-inline mb-2" method="get">
-    <label class="sr-only" asp-for="Email">Email</label>
-    <input type="text" class="form-control mb-2 mr-2" placeholder="Email" asp-for="Email" name="email">
-    <button type="submit" class="btn btn-primary mb-2" title="Search"><i class="fa fa-search"></i> Search</button>
+<form class="row row-cols-lg-auto g-3 align-items-center mb-2" method="get">
+    <div class="col-12">
+        <label class="visually-hidden" asp-for="Email">Email</label>
+        <input type="text" class="form-control" placeholder="Email" asp-for="Email" name="email">
+    </div>
+    <div class="col-12">
+        <button type="submit" class="btn btn-primary" title="Search">
+            <i class="fa fa-search"></i> Search
+        </button>
+    </div>
 </form>
 
 <div class="table-responsive">
@@ -49,7 +55,7 @@
                         }
                         else
                         {
-                            <i class="fa fa-star-o fa-lg fa-fw text-muted" title="Not Premium"></i>
+                            <i class="fa fa-star-o fa-lg fa-fw text-body-secondary" title="Not Premium"></i>
                         }
                         @if (user.MaxStorageGb.HasValue && user.MaxStorageGb > 1)
                         {
@@ -59,7 +65,7 @@
                         }
                         else
                         {
-                            <i class="fa fa-plus-square-o fa-lg fa-fw text-muted"
+                            <i class="fa fa-plus-square-o fa-lg fa-fw text-body-secondary"
                                title="No Additional Storage">
                             </i>
                         }
@@ -69,7 +75,7 @@
                         }
                         else
                         {
-                            <i class="fa fa-times-circle-o fa-lg fa-fw text-muted" title="Email Not Verified"></i>
+                            <i class="fa fa-times-circle-o fa-lg fa-fw text-body-secondary" title="Email Not Verified"></i>
                         }
                         @if (user.TwoFactorEnabled)
                         {
@@ -77,7 +83,7 @@
                         }
                         else
                         {
-                            <i class="fa fa-unlock fa-lg fa-fw text-muted" title="2FA Not Enabled"></i>
+                            <i class="fa fa-unlock fa-lg fa-fw text-body-secondary" title="2FA Not Enabled"></i>
                         }
                     </td>
                 </tr>