sweetalert: port to sweetalert2 (#1153)

Minor styling changes (same as web and desktop)
2025-01-02 18:17:46 +01:00 · 2020-03-04 17:42:21 +01:00 · 2020-03-04 17:42:21 +01:00 · 0b42d14d58
commit 0b42d14d58
parent ca870ce7f7
7 changed files with 113 additions and 124 deletions
--- a/gulpfile.js
+++ b/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;
--- a/package-lock.json
+++ b/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": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
-      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
-      "requires": {
-        "es6-object-assign": "^1.1.0",
-        "promise-polyfill": "^6.0.2"
-      }
+    "sweetalert2": {
+      "version": "9.8.2",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.8.2.tgz",
+      "integrity": "sha512-Lr7DbVi/uNwQ9LOJXt9N5JZkJT0Tga9bCGfPbtnm9Gwfhs/Wthp8vSrtE+x9kjMSpvlkvoPO7TDFxoP0jFnDow=="
    },
    "tapable": {
      "version": "1.0.0",
--- a/package.json
+++ b/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",
--- a/src/popup/app.component.ts
+++ b/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];
-        if (msg.cancelText != null) {
-            buttons.unshift(msg.cancelText);
-        }
-
-        const contentDiv = document.createElement('div');
-        if (msg.type != null) {
-            const icon = document.createElement('i');
-            icon.classList.add('swal-custom-icon');
-            switch (msg.type) {
+        let iconClasses = null;
+        const type = msg.type;
+        if (type != null) {
+            // If you add custom types to this part, the type to SweetAlertIcon cast below needs to be changed.
+            switch (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 titleDiv = document.createElement('div');
-            titleDiv.classList.add('swal-title');
-            titleDiv.appendChild(document.createTextNode(msg.title));
-            contentDiv.appendChild(titleDiv);
-        }
-
-        if (msg.text != null) {
-            const textDiv = document.createElement('div');
-            textDiv.classList.add('swal-text');
-            textDiv.appendChild(document.createTextNode(msg.text));
-            contentDiv.appendChild(textDiv);
-        }
-
-        const confirmed = await swal({
-            content: { element: contentDiv },
-            buttons: buttons,
-            timer: 300000, // 5 minute timeout
+        const cancelText = msg.cancelText;
+        const confirmText = msg.confirmText;
+        const confirmed = await Swal.fire({
+            heightAuto: false,
+            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,
+            text: msg.text,
+            title: msg.title,
+            showCancelButton: (cancelText != null),
+            cancelButtonText: cancelText,
+            showConfirmButton: true,
+            confirmButtonText: confirmText == null ? this.i18nService.t('ok') : confirmText,
+            timer: 300000,
        });

        this.messagingService.send('showDialogResolve', {
            dialogId: msg.dialogId,
-            confirmed: confirmed,
+            confirmed: confirmed.value,
        });
    }
 }
--- a/src/popup/scss/plugins.scss
+++ b/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 {
-        margin: 15px 0 0 0;
-        padding: 0 10px;
+    .swal2-content {
+        padding: 20px 20px 15px;
        font-size: $font-size-base;
-
-        .swal-text {
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
-
-        .swal-title, .swal-text {
-            padding-left: 0;
-            padding-right: 0;
+        @include themify($themes) {
+            color: themed('textColor');
        }

        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 {
-        border: 1px solid #000000;
-        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;
+    .swal2-actions {
+        padding: 0 10px 10px 10px; // 0 due to padding to content being 15px
        margin: 0;
+        justify-content: flex-end;

-        .swal-button {
+        button {
+            margin-left: 10px;
            @extend .btn;

-            &:focus {
-                box-shadow: none;
+            &.swal2-confirm {
+                @extend .btn.primary;
+                font-weight: bold;
            }
        }
-
-        .swal-button--confirm {
-            @extend .btn.primary;
-        }
    }
 }
--- a/src/popup/settings/settings.component.ts
+++ b/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({
-                text: this.i18nService.t('setYourPinCode'),
-                content: { element: div },
-                buttons: [this.i18nService.t('cancel'), this.i18nService.t('submit')],
+            const submitted = await Swal.fire({
+                heightAuto: false,
+                buttonsStyling: false,
+                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({
-            content: { element: div },
-            buttons: [this.i18nService.t('close'), false],
+        Swal.fire({
+            heightAuto: 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({
-            content: { element: div },
-            buttons: [this.i18nService.t('close'), this.i18nService.t('learnMore')],
+        const result = await Swal.fire({
+            heightAuto: false,
+            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/');
        }
    }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -9,7 +9,8 @@
    "allowJs": true,
    "sourceMap": true,
    "types": [
-      "jasmine"
+      "jasmine",
+      "sweetalert2"
    ],
    "baseUrl": ".",
    "paths": {