sweetalert: move to sweetalert2. (#388)

The styling got adjusted to stay as close as possible to the original sweetalert1 styles.
The only visible change is the button order, it is the same as in the web-vault now (OK - CANCEL instead of CANCEL - OK)

- Removed old postinstall gulp hack
- Added tsconfig type definition for sweetalert2 module typing.

gulpfile.js

@@ -29,16 +29,7 @@ function cleanupAotIssue() {
     return del(['./node_modules/@types/uglify-js/node_modules/source-map/source-map.d.ts']);
 }
 
-// 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.clean = clean;
 exports.cleanupAotIssue = cleanupAotIssue;
 exports.webfonts = gulp.series(clean, webfonts);
-exports['prebuild:renderer'] = gulp.parallel(webfonts, cleanupAotIssue);
+exports['prebuild:renderer'] = gulp.parallel(webfonts, cleanupAotIssue);
-exports.fixSweetAlert = fixSweetAlert;
-exports.postinstall = fixSweetAlert;

package-lock.json

@@ -5235,11 +5235,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",
@@ -11363,11 +11358,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="
-    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -12799,14 +12789,10 @@
         "es6-symbol": "^3.1.1"
       }
     },
-    "sweetalert": {
+    "sweetalert2": {
-      "version": "2.1.2",
+      "version": "9.8.1",
-      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.8.1.tgz",
-      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+      "integrity": "sha512-w+8vLSzKCZka6YMRVsPhD31teBan4v2FchX2qAQc4IYn5R6bt/EYC7yKeC2G0rCR/EksdqprnjJDxOZuMEMthA=="
-      "requires": {
-        "es6-object-assign": "^1.1.0",
-        "promise-polyfill": "^6.0.2"
-      }
     },
     "tapable": {
       "version": "1.1.0",

package.json

@@ -22,7 +22,7 @@
     "sub:update": "git submodule update --remote",
     "sub:pull": "git submodule foreach git pull origin master",
     "sub:commit": "npm run sub:pull && git commit -am \"update submodule\"",
-    "postinstall": "./node_modules/.bin/electron-rebuild && npm run sub:init && gulp postinstall",
+    "postinstall": "./node_modules/.bin/electron-rebuild && 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",
@@ -285,7 +285,7 @@
     "nord": "0.2.1",
     "papaparse": "4.6.0",
     "rxjs": "6.3.3",
-    "sweetalert": "2.1.2",
+    "sweetalert2": "^9.8.1",
     "zone.js": "0.8.28",
     "zxcvbn": "4.4.2"
   }

src/app/accounts/settings.component.ts

@@ -5,7 +5,7 @@ import {
 
 import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
-import swal from 'sweetalert';
+import Swal from 'sweetalert2/src/sweetalert2.js';
 
 import { DeviceType } from 'jslib/enums/deviceType';
 
@@ -136,19 +136,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'),
-                content: { element: div },
+                html: div,
-                buttons: [this.i18nService.t('cancel'), this.i18nService.t('submit')],
+
+                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;
             }

src/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";
 
@@ -96,18 +97,22 @@ $fa-font-path: "~font-awesome/fonts";
     }
 }
 
-// SweetAlert
+// SweetAlert2
 
-.swal-modal {
+.swal2-popup {
     border-radius: $border-radius;
+    padding: 0;
+    width: 34em;
 
     @include themify($themes) {
         background-color: themed('backgroundColorAlt');
         color: themed('textColor');
     }
 
-    .swal-content {
+    .swal2-content {
+        padding: 20px 20px 15px;
         font-size: $font-size-base;
+        color: inherit;
 
         label.checkbox {
             margin-top: 10px;
@@ -119,9 +124,34 @@ $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;
+
+            // 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');
+                }
+            }
+        }
     }
 
-    .swal-text {
+    .swal2-text {
+        text-align: left; // sweetalert1 behaviour
         font-size: $font-size-base;
 
         @include themify($themes) {
@@ -129,30 +159,16 @@ $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 {
+        .swal2-styled {
             @extend .btn;
 
             &:focus {
@@ -160,7 +176,12 @@ $fa-font-path: "~font-awesome/fonts";
             }
         }
 
-        .swal-button--confirm {
+        .swal2-confirm {
+            // Overwrite border-left and border-right-color
+            @include themify($themes) {
+                border-color: themed('buttonBorderColor') !important;
+            }
+
             @extend .btn.primary;
         }
     }

tsconfig.json

@@ -8,7 +8,7 @@
     "target": "ES2016",
     "allowJs": true,
     "sourceMap": true,
-    "types": [],
+    "types": ["sweetalert2"],
     "baseUrl": ".",
     "paths": {
       "tldjs": [