From 38a95c37452c8844ce11b93e4496b5d4c1d4f3e2 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Fri, 8 Jun 2018 14:56:26 -0400 Subject: [PATCH] dialogs with swal --- src/app/services.module.ts | 2 +- src/app/vault/vault.component.ts | 2 + src/locales/en/messages.json | 57 +++++++++++++++++ src/scss/plugins.scss | 80 ++++++++++++++++++++++++ src/scss/styles.scss | 2 + src/services/webPlatformUtils.service.ts | 61 +++++++++++++++++- 6 files changed, 200 insertions(+), 4 deletions(-) diff --git a/src/app/services.module.ts b/src/app/services.module.ts index 9944a6895c..69a315a3f0 100644 --- a/src/app/services.module.ts +++ b/src/app/services.module.ts @@ -69,7 +69,7 @@ const i18nService = new I18nService(window.navigator.language, 'locales'); const stateService = new StateService(); const broadcasterService = new BroadcasterService(); const messagingService = new WebMessagingService(); -const platformUtilsService = new WebPlatformUtilsService(messagingService); +const platformUtilsService = new WebPlatformUtilsService(messagingService, i18nService); const storageService: StorageServiceAbstraction = new WebStorageService(); const cryptoFunctionService: CryptoFunctionServiceAbstraction = new WebCryptoFunctionService(window, platformUtilsService); diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts index 88ff234993..84bb38821b 100644 --- a/src/app/vault/vault.component.ts +++ b/src/app/vault/vault.component.ts @@ -207,9 +207,11 @@ export class VaultComponent implements OnInit { childComponent.cipherId = cipher == null ? null : cipher.id; childComponent.onSavedCipher.subscribe(async (c: CipherView) => { this.modal.close(); + await this.ciphersComponent.refresh(); }); childComponent.onDeletedCipher.subscribe(async (c: CipherView) => { this.modal.close(); + await this.ciphersComponent.refresh(); }); this.modal.onClosed.subscribe(() => { diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 42b36eef78..942eacd007 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -409,5 +409,62 @@ }, "updateKey": { "message": "You cannot use this feature until you update your encryption key." + }, + "addedItem": { + "message": "Added item" + }, + "editedItem": { + "message": "Edited item" + }, + "deleteItem": { + "message": "Delete Item" + }, + "deleteFolder": { + "message": "Delete Folder" + }, + "deleteAttachment": { + "message": "Delete Attachment" + }, + "deleteItemConfirmation": { + "message": "Are you sure you want to delete this item?" + }, + "deletedItem": { + "message": "Deleted item" + }, + "overwritePasswordConfirmation": { + "message": "Are you sure you want to overwrite the current password?" + }, + "editedFolder": { + "message": "Edited folder" + }, + "addedFolder": { + "message": "Added folder" + }, + "deleteFolderConfirmation": { + "message": "Are you sure you want to delete this folder?" + }, + "deletedFolder": { + "message": "Deleted folder" + }, + "loggedOut": { + "message": "Logged out" + }, + "loginExpired": { + "message": "Your login session has expired." + }, + "logOutConfirmation": { + "message": "Are you sure you want to log out?" + }, + "logOut": { + "message": "Log Out" + }, + "ok": { + "message": "Ok" + }, + "yes": { + "message": "Yes" + }, + "no": { + "message": "No" } } diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss index 53731fedb3..bac843cbed 100644 --- a/src/scss/plugins.scss +++ b/src/scss/plugins.scss @@ -69,3 +69,83 @@ } } } + +// SweetAlert + +.swal-overlay { + background-color: rgba(0,0,0,.3); +} + +.swal-modal { + border-radius: $border-radius; + background-color: $modal-content-bg; + color: $body-color; + + .swal-icon { + margin: 15px auto 0 auto; + } + + .swal-content { + margin: 15px 0 15px 0; + padding: 0 10px; + font-size: $font-size-base; + + .swal-text { + &:last-child { + margin-bottom: 0; + } + } + + .swal-title, .swal-text { + padding-left: 0; + padding-right: 0; + } + } + + i.swal-custom-icon { + display: block; + margin: 0 auto; + font-size: 35px; + } + + .swal-title { + padding: 10px 10px 15px 10px; + margin: 0; + font-size: $font-size-lg; + color: $body-color; + } + + .swal-text { + font-size: $font-size-base; + color: $body-color; + } + + .swal-footer { + padding: 15px 10px 10px 10px; + margin: 0; + border-top: $modal-footer-border-width solid $modal-footer-border-color; + background-color: $input-bg; + @include border-radius($modal-content-border-radius); + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + font-size: $font-size-base; + + .swal-button { + @extend .btn; + + &:focus { + box-shadow: none; + } + } + + .swal-button--confirm { + @extend .btn-primary; + } + + .swal-button--cancel { + @extend .btn-outline-secondary; + background-color: #ffffff; + } + } +} diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 8cc4a73447..09462df010 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -51,6 +51,8 @@ $input-disabled-bg: #e0e0e0; $table-accent-bg: rgba(#000000, .02); $table-hover-bg: rgba(#000000, .03); +$modal-backdrop-opacity: 0.3; + @import "~bootstrap/scss/bootstrap"; @import "./plugins"; diff --git a/src/services/webPlatformUtils.service.ts b/src/services/webPlatformUtils.service.ts index 0f52f74280..f1f6f0d3b7 100644 --- a/src/services/webPlatformUtils.service.ts +++ b/src/services/webPlatformUtils.service.ts @@ -1,17 +1,24 @@ +import * as _swal from 'sweetalert'; +import { SweetAlert } from 'sweetalert/typings/core'; + import { DeviceType } from 'jslib/enums/deviceType'; +import { I18nService } from 'jslib/abstractions/i18n.service'; import { MessagingService } from 'jslib/abstractions/messaging.service'; import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; import { AnalyticsIds } from 'jslib/misc/analytics'; import { Utils } from 'jslib/misc/utils'; +// Hack due to Angular 5.2 bug +const swal: SweetAlert = _swal as any; + export class WebPlatformUtilsService implements PlatformUtilsService { identityClientId: string = 'web'; private browserCache: string = null; - constructor(private messagingService: MessagingService) { } + constructor(private messagingService: MessagingService, private i18nService: I18nService) { } getDevice(): DeviceType { return DeviceType.Web; @@ -108,8 +115,56 @@ export class WebPlatformUtilsService implements PlatformUtilsService { throw new Error('showToast not implemented'); } - showDialog(text: string, title?: string, confirmText?: string, cancelText?: string, type?: string) { - return Promise.resolve(false); + async showDialog(text: string, title?: string, confirmText?: string, cancelText?: string, type?: string) { + const buttons = [confirmText == null ? this.i18nService.t('ok') : confirmText]; + if (cancelText != null) { + buttons.unshift(cancelText); + } + + const contentDiv = document.createElement('div'); + if (type != null) { + const icon = document.createElement('i'); + icon.classList.add('swal-custom-icon'); + switch (type) { + case 'success': + icon.classList.add('fa', 'fa-check', 'text-success'); + break; + case 'warning': + icon.classList.add('fa', 'fa-warning', 'text-warning'); + break; + case 'error': + icon.classList.add('fa', 'fa-bolt', 'text-danger'); + break; + case 'info': + icon.classList.add('fa', 'fa-info-circle', 'text-info'); + break; + default: + break; + } + if (icon.classList.contains('fa')) { + contentDiv.appendChild(icon); + } + } + + if (title != null) { + const titleDiv = document.createElement('div'); + titleDiv.classList.add('swal-title'); + titleDiv.appendChild(document.createTextNode(title)); + contentDiv.appendChild(titleDiv); + } + + if (text != null) { + const textDiv = document.createElement('div'); + textDiv.classList.add('swal-text'); + textDiv.appendChild(document.createTextNode(text)); + contentDiv.appendChild(textDiv); + } + + const confirmed = await swal({ + content: { element: contentDiv }, + buttons: buttons, + }); + return confirmed; } isDev(): boolean {