From 0b42d14d58734691e931a8e33022fbf721a7a3ac Mon Sep 17 00:00:00 2001 From: MartB Date: Wed, 4 Mar 2020 17:42:21 +0100 Subject: [PATCH] sweetalert: port to sweetalert2 (#1153) Minor styling changes (same as web and desktop) --- gulpfile.js | 9 --- package-lock.json | 22 ++---- package.json | 4 +- src/popup/app.component.ts | 62 +++++++--------- src/popup/scss/plugins.scss | 91 +++++++++++++----------- src/popup/settings/settings.component.ts | 46 ++++++++---- tsconfig.json | 3 +- 7 files changed, 113 insertions(+), 124 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index bf90d7dee9..2d60e06dad 100644 --- 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; diff --git a/package-lock.json b/package-lock.json index 51b1204ed5..a5def7b927 100644 --- 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", diff --git a/package.json b/package.json index 4694dbee8e..e7c0effc1e 100644 --- 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", diff --git a/src/popup/app.component.ts b/src/popup/app.component.ts index e4960c0559..f25cab064f 100644 --- 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 ? `` : 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, }); } } diff --git a/src/popup/scss/plugins.scss b/src/popup/scss/plugins.scss index 4c28e4d909..d0d7c1a88b 100644 --- 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; - } } } diff --git a/src/popup/settings/settings.component.ts b/src/popup/settings/settings.component.ts index 28fddb472f..5170e53eb8 100644 --- 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 = ''; 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({ - 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 {

Bitwarden
© Bitwarden Inc. 2015-` + year + `

`; 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/'); } } diff --git a/tsconfig.json b/tsconfig.json index 28ffb2876e..b0e93eacb4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,8 @@ "allowJs": true, "sourceMap": true, "types": [ - "jasmine" + "jasmine", + "sweetalert2" ], "baseUrl": ".", "paths": {