dialogs with swal

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);

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(() => {

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"
   }
 }

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;
+        }
+    }
+}

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";
 

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 {