[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 <[email protected]> Co-authored-by: Rui Tomé <[email protected]>
bitwarden · Nov 19, 2024 · b2b0f1e · b2b0f1e
1 parent ab5d473
commit b2b0f1e
Show file tree

Hide file tree

Showing 32 changed files with 535 additions and 540 deletions.
diff --git a/bitwarden_license/src/Sso/Views/Shared/_Layout.cshtml b/bitwarden_license/src/Sso/Views/Shared/_Layout.cshtml
@@ -23,7 +23,7 @@
         @RenderBody()
     </div>
 
-    <div class="container footer text-muted">
+    <div class="container footer text-body-secondary">
         <div class="row">
             <div class="col">
                 &copy; @DateTime.Now.Year, Bitwarden Inc.

diff --git a/bitwarden_license/src/Sso/package-lock.json b/bitwarden_license/src/Sso/package-lock.json
diff --git a/bitwarden_license/src/Sso/package.json b/bitwarden_license/src/Sso/package.json
@@ -8,10 +8,9 @@
     "build": "webpack"
   },
   "dependencies": {
-    "bootstrap": "4.6.2",
+    "bootstrap": "5.3.3",
     "font-awesome": "4.7.0",
-    "jquery": "3.7.1",
-    "popper.js": "1.16.1"
+    "jquery": "3.7.1"
   },
   "devDependencies": {
     "css-loader": "7.1.2",

diff --git a/bitwarden_license/src/Sso/webpack.config.js b/bitwarden_license/src/Sso/webpack.config.js
@@ -13,8 +13,6 @@ module.exports = {
   entry: {
     site: [
       path.resolve(__dirname, paths.sassDir, "site.scss"),
-
-      "popper.js",
       "bootstrap",
       "jquery",
       "font-awesome/css/font-awesome.css",

diff --git a/src/Admin/AdminConsole/Views/Organizations/Edit.cshtml b/src/Admin/AdminConsole/Views/Organizations/Edit.cshtml
@@ -103,19 +103,19 @@
 
 <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 (canInitiateTrial && Model.Provider is null)
         {
-            <button class="btn btn-secondary mr-2" type="button" id="teams-trial">
+            <button class="btn btn-secondary me-2" type="button" id="teams-trial">
                 Teams Trial
             </button>
-            <button class="btn btn-secondary mr-2" type="button" id="enterprise-trial">
+            <button class="btn btn-secondary me-2" type="button" id="enterprise-trial">
                 Enterprise Trial
             </button>
         }
         @if (canUnlinkFromProvider && Model.Provider is not null)
         {
-            <button class="btn btn-outline-danger mr-2"
+            <button class="btn btn-outline-danger me-2"
                     onclick="return unlinkProvider('@Model.Organization.Id');">
                 Unlink provider
             </button>
@@ -124,7 +124,7 @@
         {
             <form asp-action="DeleteInitiation" asp-route-id="@Model.Organization.Id" id="initiate-delete-form">
                 <input type="hidden" name="AdminEmail" id="AdminEmail" />
-                <button class="btn btn-danger mr-2" type="submit">Request Delete</button>
+                <button class="btn btn-danger me-2" type="submit">Request Delete</button>
             </form>
             <form asp-action="Delete" asp-route-id="@Model.Organization.Id"
                   onsubmit="return confirm('Are you sure you want to hard delete this organization?')">

diff --git a/src/Admin/AdminConsole/Views/Organizations/Index.cshtml b/src/Admin/AdminConsole/Views/Organizations/Index.cshtml
@@ -5,21 +5,31 @@
 
 <h1>Organizations</h1>
 
-<form class="form-inline mb-2" method="get">
-    <label class="sr-only" asp-for="Name">Name</label>
-    <input type="text" class="form-control mb-2 mr-2" placeholder="Name" asp-for="Name" name="name">
-    <label class="sr-only" asp-for="UserEmail">User email</label>
-    <input type="text" class="form-control mb-2 mr-2" placeholder="User email" asp-for="UserEmail" name="userEmail">
+<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="Name">Name</label>
+        <input type="text" class="form-control" placeholder="Name" asp-for="Name" name="name">
+    </div>
+    <div class="col-12">
+        <label class="visually-hidden" asp-for="UserEmail">User email</label>
+        <input type="text" class="form-control" placeholder="User email" asp-for="UserEmail" name="userEmail">
+    </div>
     @if(!Model.SelfHosted)
     {
-        <label class="sr-only" asp-for="Paid">Customer</label>
-        <select class="form-control mb-2 mr-2" asp-for="Paid" name="paid">
-            <option asp-selected="!Model.Paid.HasValue" value="">-- Customer --</option>
-            <option asp-selected="Model.Paid.GetValueOrDefault(false)" value="true">Paid</option>
-            <option asp-selected="!Model.Paid.GetValueOrDefault(true)" value="false">Freeloader</option>
-        </select>
+        <div class="col-12">
+            <label class="visually-hidden" asp-for="Paid">Customer</label>
+            <select class="form-select" asp-for="Paid" name="paid">
+                <option asp-selected="!Model.Paid.HasValue" value="">-- Customer --</option>
+                <option asp-selected="Model.Paid.GetValueOrDefault(false)" value="true">Paid</option>
+                <option asp-selected="!Model.Paid.GetValueOrDefault(true)" value="false">Freeloader</option>
+            </select>
+        </div>
     }
-    <button type="submit" class="btn btn-primary mb-2" title="Search"><i class="fa fa-search"></i> Search</button>
+    <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">
@@ -68,7 +78,7 @@
                                 }
                                 else
                                 {
-                                    <i class="fa fa-smile-o fa-lg fa-fw text-muted" title="Freeloader"></i>
+                                    <i class="fa fa-smile-o fa-lg fa-fw text-body-secondary" title="Freeloader"></i>
                                 }
                             }
                             @if(org.MaxStorageGb.HasValue && org.MaxStorageGb > 1)
@@ -78,7 +88,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>
                             }
                             @if(org.Enabled)
@@ -88,15 +98,15 @@
                             }
                             else
                             {
-                                <i class="fa fa-times-circle-o fa-lg fa-fw text-muted" title="Disabled"></i>
+                                <i class="fa fa-times-circle-o fa-lg fa-fw text-body-secondary" title="Disabled"></i>
                             }
                             @if(org.TwoFactorIsEnabled())
                             {
                                 <i class="fa fa-lock fa-lg fa-fw" title="2FA Enabled"></i>
                             }
                             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>

diff --git a/src/Admin/AdminConsole/Views/Providers/AddExistingOrganization.cshtml b/src/Admin/AdminConsole/Views/Providers/AddExistingOrganization.cshtml
@@ -9,12 +9,18 @@
 <h1>Add Existing Organization</h1>
 <div class="row mb-2">
     <div class="col">
-        <form class="form-inline mb-2" method="get" asp-route-id="@providerId">
-            <label class="sr-only" asp-for="OrganizationName"></label>
-            <input type="text" class="form-control mb-2 mr-2 flex-fill" placeholder="@Html.DisplayNameFor(m => m.OrganizationName)" asp-for="OrganizationName" name="name">
-            <label class="sr-only" asp-for="OrganizationOwnerEmail"></label>
-            <input type="email" class="form-control mb-2 mr-2 flex-fill" placeholder="@Html.DisplayNameFor(m => m.OrganizationOwnerEmail)" asp-for="OrganizationOwnerEmail" name="ownerEmail">
-            <button type="submit" class="btn btn-primary mb-2" title="Search" formmethod="get"><i class="fa fa-search"></i> Search</button>
+        <form class="row g-3 align-items-center mb-2" method="get" asp-route-id="@providerId">
+            <div class="col">
+                <label class="visually-hidden" asp-for="OrganizationName"></label>
+                <input type="text" class="form-control" placeholder="@Html.DisplayNameFor(m => m.OrganizationName)" asp-for="OrganizationName" name="name">
+            </div>
+            <div class="col">
+                <label class="visually-hidden" asp-for="OrganizationOwnerEmail"></label>
+                <input type="email" class="form-control" placeholder="@Html.DisplayNameFor(m => m.OrganizationOwnerEmail)" asp-for="OrganizationOwnerEmail" name="ownerEmail">
+            </div>
+            <div class="col-auto">
+                <button type="submit" class="btn btn-primary" title="Search" formmethod="get"><i class="fa fa-search"></i> Search</button>
+            </div>
         </form>
     </div>
 </div>

diff --git a/src/Admin/AdminConsole/Views/Providers/Create.cshtml b/src/Admin/AdminConsole/Views/Providers/Create.cshtml
@@ -22,23 +22,23 @@
 <h1>Create Provider</h1>
 <form method="post" asp-action="Create">
     <div asp-validation-summary="All" class="alert alert-danger"></div>
-    <div class="form-group">
-        <label asp-for="Type" class="h2"></label>
+    <div class="mb-3">
+        <label asp-for="Type" class="form-label h2"></label>
         @foreach (var providerType in providerTypes)
         {
             var providerTypeValue = (int)providerType;
-            <div class="form-group">
+            <div class="mb-3">
                 <div class="row">
                     <div class="col">
                         <div class="form-check">
                             @Html.RadioButtonFor(m => m.Type, providerType, new { id = $"providerType-{providerTypeValue}", @class = "form-check-input" })
-                            @Html.LabelFor(m => m.Type, providerType.GetDisplayAttribute()?.GetName(), new { @class = "form-check-label align-middle", @for = $"providerType-{providerTypeValue}" })
+                            @Html.LabelFor(m => m.Type, providerType.GetDisplayAttribute()?.GetName(), new { @class = "form-check-label", @for = $"providerType-{providerTypeValue}" })
                         </div>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col">
-                        @Html.LabelFor(m => m.Type, providerType.GetDisplayAttribute()?.GetDescription(), new { @class = "form-check-label small text-muted align-top", @for = $"providerType-{providerTypeValue}" })
+                        @Html.LabelFor(m => m.Type, providerType.GetDisplayAttribute()?.GetDescription(), new { @class = "form-check-label small text-body-secondary ps-4", @for = $"providerType-{providerTypeValue}" })
                     </div>
                 </div>
             </div>

diff --git a/src/Admin/AdminConsole/Views/Providers/CreateMsp.cshtml b/src/Admin/AdminConsole/Views/Providers/CreateMsp.cshtml
@@ -6,22 +6,22 @@
 
 <h1>Create Managed Service Provider</h1>
 <div>
-    <form class="form-group" method="post" asp-action="CreateMsp">
+    <form method="post" asp-action="CreateMsp">
         <div asp-validation-summary="All" class="alert alert-danger"></div>
-        <div class="form-group">
-            <label asp-for="OwnerEmail"></label>
+        <div class="mb-3">
+            <label asp-for="OwnerEmail" class="form-label"></label>
             <input type="text" class="form-control" asp-for="OwnerEmail">
         </div>
         <div class="row">
             <div class="col-sm">
-                <div class="form-group">
-                    <label asp-for="TeamsMonthlySeatMinimum"></label>
+                <div class="mb-3">
+                    <label asp-for="TeamsMonthlySeatMinimum" class="form-label"></label>
                     <input type="number" class="form-control" asp-for="TeamsMonthlySeatMinimum">
                 </div>
             </div>
             <div class="col-sm">
-                <div class="form-group">
-                    <label asp-for="EnterpriseMonthlySeatMinimum"></label>
+                <div class="mb-3">
+                    <label asp-for="EnterpriseMonthlySeatMinimum" class="form-label"></label>
                     <input type="number" class="form-control" asp-for="EnterpriseMonthlySeatMinimum">
                 </div>
             </div>

diff --git a/src/Admin/AdminConsole/Views/Providers/CreateMultiOrganizationEnterprise.cshtml b/src/Admin/AdminConsole/Views/Providers/CreateMultiOrganizationEnterprise.cshtml
@@ -7,37 +7,37 @@
     ViewData["Title"] = "Create Multi-organization Enterprise Provider";
 }
 
-<h1>Create Multi-organization Enterprise Provider</h1>
+<h1 class="mb-4">Create Multi-organization Enterprise Provider</h1>
 <div>
-    <form class="form-group" method="post" asp-action="CreateMultiOrganizationEnterprise">
+    <form method="post" asp-action="CreateMultiOrganizationEnterprise">
         <div asp-validation-summary="All" class="alert alert-danger"></div>
-        <div class="form-group">
-            <label asp-for="OwnerEmail"></label>
+        <div class="mb-3">
+            <label asp-for="OwnerEmail" class="form-label"></label>
             <input type="text" class="form-control" asp-for="OwnerEmail">
         </div>
         <div class="row">
             <div class="col-sm">
-                <div class="form-group">
+                <div class="mb-3">
                     @{
                         var multiOrgPlans = new List<PlanType>
                         {
                             PlanType.EnterpriseAnnually,
                             PlanType.EnterpriseMonthly
                         };
                     }
-                    <label asp-for="Plan"></label>
-                    <select class="form-control" asp-for="Plan" asp-items="Html.GetEnumSelectList(multiOrgPlans)">
+                    <label asp-for="Plan" class="form-label"></label>
+                    <select class="form-select" asp-for="Plan" asp-items="Html.GetEnumSelectList(multiOrgPlans)">
                         <option value="">--</option>
                     </select>
                 </div>
             </div>
             <div class="col-sm">
-                <div class="form-group">
-                    <label asp-for="EnterpriseSeatMinimum"></label>
+                <div class="mb-3">
+                    <label asp-for="EnterpriseSeatMinimum" class="form-label"></label>
                     <input type="number" class="form-control" asp-for="EnterpriseSeatMinimum">
                 </div>
             </div>
         </div>
-        <button type="submit" class="btn btn-primary mb-2">Create Provider</button>
+        <button type="submit" class="btn btn-primary">Create Provider</button>
     </form>
 </div>
diff --git a/src/Admin/AdminConsole/Views/Providers/CreateOrganization.cshtml b/src/Admin/AdminConsole/Views/Providers/CreateOrganization.cshtml
@@ -18,7 +18,7 @@
 @await Html.PartialAsync("~/AdminConsole/Views/Shared/_OrganizationForm.cshtml", Model)
 <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">
         <form asp-controller="Providers" asp-action="Edit" asp-route-id="@Model.Provider.Id"
               onsubmit="return confirm('Are you sure you want to cancel?')">
             <button class="btn btn-outline-secondary" type="submit">Cancel</button>

diff --git a/src/Admin/AdminConsole/Views/Providers/CreateReseller.cshtml b/src/Admin/AdminConsole/Views/Providers/CreateReseller.cshtml
@@ -6,18 +6,18 @@
 
 <h1>Create Reseller Provider</h1>
 <div>
-    <form class="form-group" method="post" asp-action="CreateReseller">
+    <form class="mb-3" method="post" asp-action="CreateReseller">
         <div asp-validation-summary="All" class="alert alert-danger"></div>
-        <div class="form-group">
-            <label asp-for="Name"></label>
+        <div class="mb-3">
+            <label asp-for="Name" class="form-label"></label>
             <input type="text" class="form-control" asp-for="Name">
         </div>
-        <div class="form-group">
-            <label asp-for="BusinessName"></label>
+        <div class="mb-3">
+            <label asp-for="BusinessName" class="form-label"></label>
             <input type="text" class="form-control" asp-for="BusinessName">
         </div>
-        <div class="form-group">
-            <label asp-for="BillingEmail"></label>
+        <div class="mb-3">
+            <label asp-for="BillingEmail" class="form-label"></label>
             <input type="text" class="form-control" asp-for="BillingEmail">
         </div>
         <button type="submit" class="btn btn-primary mb-2">Create Provider</button>