diff --git a/gulpfile.js b/gulpfile.js
index 497ac1c378..d57711f773 100644
--- a/gulpfile.js
+++ b/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.fixSweetAlert = fixSweetAlert;
-exports.postinstall = fixSweetAlert;
+exports['prebuild:renderer'] = gulp.parallel(webfonts, cleanupAotIssue);
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index aecf965883..a747bacac5 100644
--- a/package-lock.json
+++ b/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": {
- "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.1",
+ "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-9.8.1.tgz",
+ "integrity": "sha512-w+8vLSzKCZka6YMRVsPhD31teBan4v2FchX2qAQc4IYn5R6bt/EYC7yKeC2G0rCR/EksdqprnjJDxOZuMEMthA=="
},
"tapable": {
"version": "1.1.0",
diff --git a/package.json b/package.json
index 8e5c73093b..6cc3bb80ea 100644
--- a/package.json
+++ b/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"
}
diff --git a/src/app/accounts/settings.component.ts b/src/app/accounts/settings.component.ts
index 2d0eb8b2f1..69e13cc873 100644
--- a/src/app/accounts/settings.component.ts
+++ b/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 = '';
label.appendChild(checkboxText);
- div.innerHTML = '${this.i18nService.t('setYourPinCode')}` +
+ '';
+
(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 },
- 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;
}
diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss
index 6d45de9840..13e013c2ca 100644
--- a/src/scss/plugins.scss
+++ b/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 {
- 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 {
+ .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;
}
}
diff --git a/tsconfig.json b/tsconfig.json
index 251408992a..a2223f47c5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,7 @@
"target": "ES2016",
"allowJs": true,
"sourceMap": true,
- "types": [],
+ "types": ["sweetalert2"],
"baseUrl": ".",
"paths": {
"tldjs": [