[PS-2841] remove SweetAlert2 dependency (#6191)

* remove swal from app.component

* remove dep

* remove unused swal css

apps/browser/src/popup/scss/misc.scss

@@ -422,8 +422,7 @@ img,
 .callout,
 .row-label,
 .modal-title,
-.overlay-container,
-.swal2-container {
+.overlay-container {
   user-select: none;
 }
 

apps/browser/src/popup/scss/plugins.scss

@@ -1,5 +1,4 @@
 @import "~ngx-toastr/toastr";
-@import "~#sweetalert2";
 
 @import "variables.scss";
 @import "buttons.scss";
@@ -98,119 +97,6 @@
   }
 }
 
-// SweetAlert
-
-.swal2-popup {
-  padding: 15px;
-  border-radius: $border-radius;
-  width: 34em;
-
-  @include themify($themes) {
-    background-color: themed("backgroundColorAlt");
-    color: themed("textColor");
-  }
-
-  .swal2-icon {
-    margin: 0 auto;
-    width: auto;
-    height: auto;
-    border: none;
-  }
-
-  .swal2-content {
-    margin: 0;
-    font-size: $font-size-base;
-    @include themify($themes) {
-      color: themed("textColor");
-    }
-
-    label.checkbox {
-      margin-top: 10px;
-      display: flex;
-      text-align: left;
-      align-items: top;
-
-      input {
-        margin: 3px 5px 0 1px;
-      }
-    }
-
-    .swal2-input,
-    .swal2-textarea {
-      border: 1px solid #000000;
-      border-radius: $border-radius;
-      margin-bottom: 0;
-      box-shadow: none;
-      // Inherit theme font-size
-      font-size: inherit;
-
-      // Sweetalert 1 did not have box-shadow
-      &:focus {
-        box-shadow: none;
-      }
-      @include themify($themes) {
-        border-color: themed("inputBorderColor");
-        color: themed("textColor");
-        background-color: themed("inputBackgroundColor");
-      }
-      &::-webkit-input-placeholder {
-        @include themify($themes) {
-          color: themed("inputPlaceholderColor");
-        }
-      }
-    }
-  }
-
-  i.swal-custom-icon {
-    display: block;
-    margin: 0 auto;
-    font-size: 35px;
-  }
-
-  .swal2-title {
-    padding: 10px 0 15px;
-    margin: 0;
-    font-size: $font-size-large;
-
-    @include themify($themes) {
-      color: themed("textColor");
-    }
-  }
-
-  .swal2-text {
-    text-align: left; // sweetalert1 behaviour
-    font-size: $font-size-base;
-
-    @include themify($themes) {
-      color: themed("textColor");
-    }
-  }
-
-  > .swal2-text:first-child {
-    margin-top: 20px;
-  }
-
-  .swal2-actions {
-    margin: 20px auto 0;
-    justify-content: flex-start;
-    flex-direction: row-reverse;
-
-    button {
-      margin-left: 10px;
-      @extend .btn;
-
-      &.swal2-confirm {
-        @extend .btn, .primary;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .swal2-validation-message {
-    margin-top: 20px;
-  }
-}
-
 date-input-polyfill {
   &[data-open="true"] {
     z-index: 10000 !important;

apps/browser/webpack.config.js

@@ -213,10 +213,6 @@ const mainConfig = {
     extensions: [".ts", ".js"],
     symlinks: false,
     modules: [path.resolve("../../node_modules")],
-    alias: {
-      sweetalert2: require.resolve("sweetalert2/dist/sweetalert2.js"),
-      "#sweetalert2": require.resolve("sweetalert2/src/sweetalert2.scss"),
-    },
     fallback: {
       assert: false,
       buffer: require.resolve("buffer/"),

apps/desktop/src/scss/plugins.scss

@@ -1,5 +1,4 @@
 @import "~ngx-toastr/toastr";
-@import "~sweetalert2/src/sweetalert2.scss";
 
 @import "variables.scss";
 
@@ -94,116 +93,3 @@
     }
   }
 }
-
-// SweetAlert2
-
-.swal2-popup {
-  padding: 15px;
-  border-radius: $border-radius;
-  width: 34em;
-
-  @include themify($themes) {
-    background-color: themed("backgroundColorAlt");
-    color: themed("textColor");
-  }
-
-  .swal2-icon {
-    margin: 0 auto;
-    width: auto;
-    height: auto;
-    border: none;
-  }
-
-  .swal2-content {
-    margin: 0;
-    font-size: $font-size-base;
-    @include themify($themes) {
-      color: themed("textColor");
-    }
-
-    label.checkbox {
-      margin-top: 10px;
-      display: flex;
-      text-align: left;
-      align-items: top;
-
-      input {
-        margin: 3px 5px 0 1px;
-      }
-    }
-
-    .swal2-input,
-    .swal2-textarea {
-      border: 1px solid #000000;
-      border-radius: $border-radius;
-      margin-bottom: 0;
-      box-shadow: none;
-      // Inherit theme font-size
-      font-size: inherit;
-
-      // Sweetalert 1 did not have box-shadow
-      &:focus {
-        box-shadow: none;
-      }
-      @include themify($themes) {
-        border-color: themed("inputBorderColor");
-        color: themed("textColor");
-        background-color: themed("inputBackgroundColor");
-      }
-      &::-webkit-input-placeholder {
-        @include themify($themes) {
-          color: themed("inputPlaceholderColor");
-        }
-      }
-    }
-  }
-
-  i.swal-custom-icon {
-    display: block;
-    margin: 0 auto;
-    font-size: 35px;
-  }
-
-  .swal2-title {
-    padding: 10px 0 15px;
-    margin: 0;
-    font-size: $font-size-large;
-
-    @include themify($themes) {
-      color: themed("textColor");
-    }
-  }
-
-  .swal2-text {
-    text-align: left; // sweetalert1 behaviour
-    font-size: $font-size-base;
-
-    @include themify($themes) {
-      color: themed("textColor");
-    }
-  }
-
-  > .swal2-text:first-child {
-    margin-top: 20px;
-  }
-
-  .swal2-actions {
-    margin: 20px auto 0;
-    justify-content: flex-start;
-    flex-direction: row-reverse;
-
-    button {
-      margin-left: 10px;
-      @extend .btn;
-
-      &.swal2-confirm {
-        @extend .btn, .primary;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .swal2-validation-message {
-    margin-top: 20px;
-  }
-}

apps/web/src/app/app.component.ts

@@ -5,7 +5,6 @@ import { NavigationEnd, Router } from "@angular/router";
 import * as jq from "jquery";
 import { IndividualConfig, ToastrService } from "ngx-toastr";
 import { Subject, takeUntil } from "rxjs";
-import Swal from "sweetalert2";
 
 import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service";
 import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service";
@@ -204,10 +203,6 @@ export class AppComponent implements OnDestroy, OnInit {
         for (const modal of modals) {
           (jq(modal) as any).modal("hide");
         }
-
-        if (document.querySelector(".swal-modal") != null) {
-          Swal.close(undefined);
-        }
       }
     });
 
@@ -258,7 +253,6 @@ export class AppComponent implements OnDestroy, OnInit {
       }
 
       await this.stateService.clean({ userId: userId });
-      Swal.close();
       if (redirect) {
         this.router.navigate(["/"]);
       }

apps/web/src/scss/base.scss

@@ -173,9 +173,7 @@ code {
 }
 
 .btn:focus,
-.swal2-popup .swal2-actions button:focus,
 .btn.focus,
-.swal2-popup .swal2-actions button.focus,
 .form-control:focus {
   @include themify($themes) {
     box-shadow: 0 0 0 0.2rem themed("focus");

apps/web/src/scss/buttons.scss

@@ -1,5 +1,4 @@
-.btn-primary,
-.swal2-confirm {
+.btn-primary {
   @include themify($themes) {
     background-color: themed("btnPrimary");
     border-color: themed("btnPrimary");
@@ -37,8 +36,7 @@
   }
 }
 
-.btn-secondary,
-.swal2-cancel {
+.btn-secondary {
   @include themify($themes) {
     background-color: themed("btnSecondary");
     border-color: themed("btnSecondaryBorder");
@@ -103,8 +101,7 @@
   }
 }
 
-.btn-danger,
-.swal2-deny {
+.btn-danger {
   @include themify($themes) {
     background-color: themed("btnDanger");
     border-color: themed("btnDanger");

apps/web/src/scss/plugins.scss

@@ -130,96 +130,6 @@
   }
 }
 
-// SweetAlert2
-
-[class*="swal2-"] {
-  &:not(.swal2-container, .swal2-confirm, .swal2-cancel, .swal2-deny) {
-    @include themify($themes) {
-      background-color: themed("backgroundColor");
-      color: themed("textColor");
-    }
-  }
-}
-
-.swal2-container {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-.swal2-popup {
-  @include themify($themes) {
-    background-color: themed("backgroundColor");
-    color: themed("textColor");
-  }
-  border: $modal-content-border-width solid #9a9a9a;
-  @include border-radius($modal-content-border-radius);
-  padding: 15px 0 0;
-  width: 34em; // slightly bigger than the hardcoded 478px in v1.
-
-  .swal2-header {
-    padding: 0 15px;
-  }
-
-  .swal2-icon {
-    border: none;
-    height: auto;
-    margin: 0 auto;
-    width: auto;
-  }
-
-  .swal2-content {
-    font-size: $font-size-base;
-    padding-bottom: 15px;
-    @include themify($themes) {
-      border-bottom: $modal-footer-border-width solid themed("separator");
-    }
-  }
-
-  i.swal-custom-icon {
-    display: block;
-    font-size: 35px;
-    margin: 0 auto;
-  }
-
-  .swal2-title {
-    font-size: $font-size-lg;
-    margin: 0;
-    padding: 10px 0 15px;
-    @include themify($themes) {
-      color: themed("textHeadingColor");
-    }
-  }
-
-  .swal2-content {
-    font-size: $font-size-base;
-    padding: 0 15px 15px;
-    @include themify($themes) {
-      color: themed("textColor");
-    }
-  }
-
-  .swal2-actions {
-    @include border-radius($modal-content-border-radius);
-    display: flex;
-    flex-direction: row;
-    font-size: $font-size-base;
-    justify-content: flex-start;
-    margin: 0;
-    padding: 15px;
-    @include themify($themes) {
-      background-color: themed("backgroundColor");
-    }
-
-    button {
-      margin-right: 10px;
-      @extend .btn;
-    }
-  }
-
-  .swal2-validation-message {
-    margin: 0 -15px;
-  }
-}
-
 date-input-polyfill {
   &[data-open="true"] {
     z-index: 10000 !important;

apps/web/src/scss/styles.scss

@@ -44,7 +44,6 @@
 @import "~bootstrap/scss/_print";
 
 @import "~ngx-toastr/toastr";
-@import "~#sweetalert2";
 
 @import "./base";
 @import "./buttons";

apps/web/webpack.config.js

@@ -349,10 +349,6 @@ const webpackConfig = {
     extensions: [".ts", ".js"],
     symlinks: false,
     modules: [path.resolve("../../node_modules")],
-    alias: {
-      sweetalert2: require.resolve("sweetalert2/dist/sweetalert2.js"),
-      "#sweetalert2": require.resolve("sweetalert2/src/sweetalert2.scss"),
-    },
     fallback: {
       buffer: false,
       util: require.resolve("util/"),

package-lock.json

@@ -64,7 +64,6 @@
         "proper-lockfile": "4.1.2",
         "qrious": "4.0.2",
         "rxjs": "7.8.1",
-        "sweetalert2": "10.16.11",
         "tldts": "6.0.14",
         "utf-8-validate": "5.0.10",
         "zone.js": "0.12.0",
@@ -37301,14 +37300,6 @@
         "webpack": ">=2"
       }
     },
-    "node_modules/sweetalert2": {
-      "version": "10.16.11",
-      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-10.16.11.tgz",
-      "integrity": "sha512-Rdfabv2G89Tr8vmUTb1auWCYYesKBEWnkYPSi7XaiCIW0ZXXGK8Nw1wYKPEMLU6O8gMSMJe5m6MRKqMQsAQy9A==",
-      "funding": {
-        "url": "https://sweetalert2.github.io/#donations"
-      }
-    },
     "node_modules/symbol-observable": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",

package.json

@@ -197,7 +197,6 @@
     "proper-lockfile": "4.1.2",
     "qrious": "4.0.2",
     "rxjs": "7.8.1",
-    "sweetalert2": "10.16.11",
     "tldts": "6.0.14",
     "utf-8-validate": "5.0.10",
     "zone.js": "0.12.0",