Improve import error messages (#841)

* Display server import errors in modal

* Fix UI text and modal appearance

* Fix loading spinner behaviour

* Fix linting

* Update jslib version

src/app/tools/import.component.ts

@@ -9,6 +9,9 @@ import { Angulartics2 } from 'angulartics2';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
 import { ImportOption, ImportService } from 'jslib/abstractions/import.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import Swal, { SweetAlertIcon } from 'sweetalert2/dist/sweetalert2.js';
 
 @Component({
     selector: 'app-import',
@@ -20,13 +23,14 @@ export class ImportComponent implements OnInit {
     format: string = null;
     fileContents: string;
     formPromise: Promise<Error>;
+    loading: boolean = false;
 
     protected organizationId: string = null;
     protected successNavigate: any[] = ['vault'];
 
     constructor(protected i18nService: I18nService, protected analytics: Angulartics2,
         protected toasterService: ToasterService, protected importService: ImportService,
-        protected router: Router) { }
+        protected router: Router, protected platformUtilsService: PlatformUtilsService) { }
 
     ngOnInit() {
         this.setImportOptions();
@@ -47,10 +51,13 @@ export class ImportComponent implements OnInit {
     }
 
     async submit() {
+        this.loading = true;
+
         const importer = this.importService.getImporter(this.format, this.organizationId);
         if (importer === null) {
             this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
                 this.i18nService.t('selectFormat'));
+            this.loading = false;
             return;
         }
 
@@ -59,6 +66,7 @@ export class ImportComponent implements OnInit {
         if ((files == null || files.length === 0) && (this.fileContents == null || this.fileContents === '')) {
             this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
                 this.i18nService.t('selectFile'));
+            this.loading = false;
             return;
         }
 
@@ -75,6 +83,7 @@ export class ImportComponent implements OnInit {
         if (fileContents == null || fileContents === '') {
             this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
                 this.i18nService.t('selectFile'));
+            this.loading = false;
             return;
         }
 
@@ -83,6 +92,7 @@ export class ImportComponent implements OnInit {
             const error = await this.formPromise;
             if (error != null) {
                 this.error(error);
+                this.loading = false;
                 return;
             }
             this.analytics.eventTrack.next({
@@ -92,6 +102,8 @@ export class ImportComponent implements OnInit {
             this.toasterService.popAsync('success', null, this.i18nService.t('importSuccess'));
             this.router.navigate(this.successNavigate);
         } catch { }
+
+        this.loading = false;
     }
 
     getFormatInstructionTitle() {
@@ -114,12 +126,30 @@ export class ImportComponent implements OnInit {
         this.importOptions = this.importService.regularImportOptions;
     }
 
-    private error(error: Error) {
+    private async error(error: Error) {
         this.analytics.eventTrack.next({
             action: 'Import Data Failed',
             properties: { label: this.format },
         });
-        this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'), error.message);
+
+        await Swal.fire({
+            heightAuto: false,
+            buttonsStyling: false,
+            icon: 'error' as SweetAlertIcon,
+            iconHtml: `<i class="swal-custom-icon fa fa-bolt text-danger"></i>`,
+            input: 'textarea',
+            inputValue: error.message,
+            inputAttributes: {
+                'readonly': 'true',
+            },
+            title: this.i18nService.t('importError'),
+            text: this.i18nService.t('importErrorDesc'),
+            showConfirmButton: true,
+            confirmButtonText: this.i18nService.t('ok'),
+            onOpen: popupEl => {
+                popupEl.querySelector('.swal2-textarea').scrollTo(0, 0);
+             },
+        });
     }
 
     private getFileContents(file: File): Promise<string> {