sweetalert: port to sweetalert2 (#1153)

Minor styling changes (same as web and desktop)

gulpfile.js

@@ -282,13 +282,6 @@ function ciCoverage(cb) {
         .pipe(gulp.dest(paths.coverage));
 }
 
-// ref: https://github.com/t4t5/sweetalert/issues/890
-function fixSweetAlert(cb) {
-    fs.writeFileSync(paths.node_modules + 'sweetalert/typings/sweetalert.d.ts',
-        'import swal, { SweetAlert } from "./core";export default swal;export as namespace swal;');
-    cb();
-}
-
 exports['dist:firefox'] = distFirefox;
 exports['dist:chrome'] = distChrome;
 exports['dist:opera'] = distOpera;
@@ -299,5 +292,3 @@ exports['ci:coverage'] = ciCoverage;
 exports.ci = ciCoverage;
 exports.webfonts = webfonts;
 exports.build = webfonts;
-exports.fixSweetAlert = fixSweetAlert;
-exports.postinstall = fixSweetAlert;

package-lock.json

@@ -4157,11 +4157,6 @@
         "es6-symbol": "^3.1.1"
       }
     },
-    "es6-object-assign": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
-      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
-    },
     "es6-symbol": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
@@ -10927,11 +10922,6 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
-    "promise-polyfill": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
-      "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
-    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -12307,14 +12297,10 @@
         "es6-symbol": "^3.1.1"
       }
     },
-    "sweetalert": {
+    "sweetalert2": {
-      "version": "2.1.2",
+      "version": "9.8.2",
-      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.8.2.tgz",
-      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+      "integrity": "sha512-Lr7DbVi/uNwQ9LOJXt9N5JZkJT0Tga9bCGfPbtnm9Gwfhs/Wthp8vSrtE+x9kjMSpvlkvoPO7TDFxoP0jFnDow=="
-      "requires": {
-        "es6-object-assign": "^1.1.0",
-        "promise-polyfill": "^6.0.2"
-      }
     },
     "tapable": {
       "version": "1.0.0",

package.json

@@ -5,7 +5,7 @@
     "sub:init": "git submodule update --init --recursive",
     "sub:update": "git submodule update --remote",
     "sub:pull": "git submodule foreach git pull origin master",
-    "postinstall": "npm run sub:init && gulp postinstall",
+    "postinstall": "npm run sub:init",
     "symlink:win": "rm -rf ./jslib && cmd /c mklink /J .\\jslib ..\\jslib",
     "symlink:mac": "npm run symlink:lin",
     "symlink:lin": "rm -rf ./jslib && ln -s ../jslib ./jslib",
@@ -102,7 +102,7 @@
     "nord": "^0.2.1",
     "papaparse": "4.6.0",
     "rxjs": "6.3.3",
-    "sweetalert": "2.1.2",
+    "sweetalert2": "^9.8.2",
     "tldjs": "2.3.1",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.28",

src/popup/app.component.ts

@@ -8,7 +8,7 @@ import {
     ToasterService,
 } from 'angular2-toaster';
 import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
-import swal from 'sweetalert';
+import Swal, { SweetAlertIcon } from 'sweetalert2/src/sweetalert2.js';
 
 import {
     ChangeDetectorRef,
@@ -213,59 +213,47 @@ export class AppComponent implements OnInit {
     }
 
     private async showDialog(msg: any) {
-        const buttons = [msg.confirmText == null ? this.i18nService.t('ok') : msg.confirmText];
+        let iconClasses = null;
-        if (msg.cancelText != null) {
+        const type = msg.type;
-            buttons.unshift(msg.cancelText);
+        if (type != null) {
-        }
+            // If you add custom types to this part, the type to SweetAlertIcon cast below needs to be changed.
-
+            switch (type) {
-        const contentDiv = document.createElement('div');
-        if (msg.type != null) {
-            const icon = document.createElement('i');
-            icon.classList.add('swal-custom-icon');
-            switch (msg.type) {
                 case 'success':
-                    icon.classList.add('fa', 'fa-check', 'text-success');
+                    iconClasses = 'fa-check text-success';
                     break;
                 case 'warning':
-                    icon.classList.add('fa', 'fa-warning', 'text-warning');
+                    iconClasses = 'fa-warning text-warning';
                     break;
                 case 'error':
-                    icon.classList.add('fa', 'fa-bolt', 'text-danger');
+                    iconClasses = 'fa-bolt text-danger';
                     break;
                 case 'info':
-                    icon.classList.add('fa', 'fa-info-circle', 'text-info');
+                    iconClasses = 'fa-info-circle text-info';
                     break;
                 default:
                     break;
             }
-            if (icon.classList.contains('fa')) {
-                contentDiv.appendChild(icon);
-            }
         }
 
-        if (msg.title != null) {
+        const cancelText = msg.cancelText;
-            const titleDiv = document.createElement('div');
+        const confirmText = msg.confirmText;
-            titleDiv.classList.add('swal-title');
+        const confirmed = await Swal.fire({
-            titleDiv.appendChild(document.createTextNode(msg.title));
+            heightAuto: false,
-            contentDiv.appendChild(titleDiv);
+            buttonsStyling: false,
-        }
+            icon: type as SweetAlertIcon, // required to be any of the SweetAlertIcons to output the iconHtml.
-
+            iconHtml: iconClasses != null ? `<i class="swal-custom-icon fa ${iconClasses}"></i>` : undefined,
-        if (msg.text != null) {
+            text: msg.text,
-            const textDiv = document.createElement('div');
+            title: msg.title,
-            textDiv.classList.add('swal-text');
+            showCancelButton: (cancelText != null),
-            textDiv.appendChild(document.createTextNode(msg.text));
+            cancelButtonText: cancelText,
-            contentDiv.appendChild(textDiv);
+            showConfirmButton: true,
-        }
+            confirmButtonText: confirmText == null ? this.i18nService.t('ok') : confirmText,
-
+            timer: 300000,
-        const confirmed = await swal({
-            content: { element: contentDiv },
-            buttons: buttons,
-            timer: 300000, // 5 minute timeout
         });
 
         this.messagingService.send('showDialogResolve', {
             dialogId: msg.dialogId,
-            confirmed: confirmed,
+            confirmed: confirmed.value,
         });
     }
 }

src/popup/scss/plugins.scss

@@ -1,6 +1,7 @@
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome.scss";
 @import "~angular2-toaster/toaster";
+@import "~sweetalert2/src/sweetalert2.scss";
 
 @import "variables.scss";
 @import "buttons.scss";
@@ -106,32 +107,27 @@ $fa-font-path: "~font-awesome/fonts";
 
 // SweetAlert
 
-.swal-modal {
+.swal2-popup {
+    padding: 0;
     border-radius: $border-radius;
-
+    width: 34em; // slightly bigger than the hardcoded 478px in v1.
     @include themify($themes) {
         background-color: themed('backgroundColorAlt');
         color: themed('textColor');
     }
 
-    .swal-icon {
+    .swal2-icon {
         margin: 15px auto 0 auto;
+        width: auto;
+        height: auto;
+        border: none;
     }
 
-    .swal-content {
+    .swal2-content {
-        margin: 15px 0 0 0;
+        padding: 20px 20px 15px;
-        padding: 0 10px;
         font-size: $font-size-base;
-
+        @include themify($themes) {
-        .swal-text {
+            color: themed('textColor');
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
-
-        .swal-title, .swal-text {
-            padding-left: 0;
-            padding-right: 0;
         }
 
         label.checkbox {
@@ -144,6 +140,30 @@ $fa-font-path: "~font-awesome/fonts";
                 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 {
@@ -152,7 +172,7 @@ $fa-font-path: "~font-awesome/fonts";
         font-size: 35px;
     }
 
-    .swal-title {
+    .swal2-title {
         padding: 10px 10px 15px 10px;
         margin: 0;
         font-size: $font-size-large;
@@ -162,7 +182,8 @@ $fa-font-path: "~font-awesome/fonts";
         }
     }
 
-    .swal-text {
+    .swal2-text {
+        text-align: left; // sweetalert1 behaviour
         font-size: $font-size-base;
 
         @include themify($themes) {
@@ -170,39 +191,23 @@ $fa-font-path: "~font-awesome/fonts";
         }
     }
 
-    > .swal-text:first-child {
+    > .swal2-text:first-child {
         margin-top: 20px;
     }
 
-    .swal-content__input, .swal-content__textarea {
+    .swal2-actions {
-        border: 1px solid #000000;
+        padding: 0 10px 10px 10px; // 0 due to padding to content being 15px
-        border-radius: $border-radius;
-        @include themify($themes) {
-            border-color: themed('inputBorderColor');
-            color: themed('textColor');
-            background-color: themed('inputBackgroundColor');
-        }
-        &::-webkit-input-placeholder {
-            @include themify($themes) {
-                color: themed('inputPlaceholderColor');
-            }
-        }
-    }
-
-    .swal-footer {
-        padding: 15px 10px 10px 10px;
         margin: 0;
+        justify-content: flex-end;
 
-        .swal-button {
+        button {
+            margin-left: 10px;
             @extend .btn;
 
-            &:focus {
+            &.swal2-confirm {
-                box-shadow: none;
+                @extend .btn.primary;
+                font-weight: bold;
             }
         }
-
-        .swal-button--confirm {
-            @extend .btn.primary;
-        }
     }
 }

src/popup/settings/settings.component.ts

@@ -1,5 +1,5 @@
 import { Angulartics2 } from 'angulartics2';
-import swal from 'sweetalert';
+import Swal from 'sweetalert2/src/sweetalert2.js';
 
 import {
     Component,
@@ -125,19 +125,28 @@ export class SettingsComponent implements OnInit {
             checkboxText.appendChild(restartText);
             label.innerHTML = '<input type="checkbox" id="master-pass-restart" checked>';
             label.appendChild(checkboxText);
-            div.innerHTML = '<input type="text" class="swal-content__input" id="pin-val" autocomplete="off" ' +
+
+            div.innerHTML =
+                `<div class="swal2-text">${this.i18nService.t('setYourPinCode')}</div>` +
+                '<input type="text" class="swal2-input" id="pin-val" autocomplete="off" ' +
                 'autocapitalize="none" autocorrect="none" spellcheck="false" inputmode="verbatim">';
+
             (div.querySelector('#pin-val') as HTMLInputElement).placeholder = this.i18nService.t('pin');
             div.appendChild(label);
 
-            const submitted = await swal({
+            const submitted = await Swal.fire({
-                text: this.i18nService.t('setYourPinCode'),
+                heightAuto: false,
-                content: { element: div },
+                buttonsStyling: false,
-                buttons: [this.i18nService.t('cancel'), this.i18nService.t('submit')],
+                html: div,
+                showCancelButton: true,
+                cancelButtonText: this.i18nService.t('cancel'),
+                showConfirmButton: true,
+                confirmButtonText: this.i18nService.t('submit'),
             });
+
             let pin: string = null;
             let masterPassOnRestart: boolean = null;
-            if (submitted) {
+            if (submitted.value) {
                 pin = (document.getElementById('pin-val') as HTMLInputElement).value;
                 masterPassOnRestart = (document.getElementById('master-pass-restart') as HTMLInputElement).checked;
             }
@@ -248,9 +257,13 @@ export class SettingsComponent implements OnInit {
             <p class="text-center"><b>Bitwarden</b><br>&copy; Bitwarden Inc. 2015-` + year + `</p>`;
         div.appendChild(versionText);
 
-        swal({
+        Swal.fire({
-            content: { element: div },
+            heightAuto: false,
-            buttons: [this.i18nService.t('close'), false],
+            buttonsStyling: false,
+            html: div,
+            showConfirmButton: false,
+            showCancelButton: true,
+            cancelButtonText: this.i18nService.t('close'),
         });
     }
 
@@ -266,12 +279,17 @@ export class SettingsComponent implements OnInit {
         div.appendChild(p);
         div.appendChild(p2);
 
-        const result = await swal({
+        const result = await Swal.fire({
-            content: { element: div },
+            heightAuto: false,
-            buttons: [this.i18nService.t('close'), this.i18nService.t('learnMore')],
+            buttonsStyling: false,
+            html: div,
+            showCancelButton: true,
+            cancelButtonText: this.i18nService.t('close'),
+            showConfirmButton: true,
+            confirmButtonText: this.i18nService.t('learnMore'),
         });
 
-        if (result) {
+        if (result.value) {
             this.platformUtilsService.launchUri('https://help.bitwarden.com/article/fingerprint-phrase/');
         }
     }

tsconfig.json

@@ -9,7 +9,8 @@
     "allowJs": true,
     "sourceMap": true,
     "types": [
-      "jasmine"
+      "jasmine",
+      "sweetalert2"
     ],
     "baseUrl": ".",
     "paths": {