Fix for https://github.com/GNS3/gns3-web-ui/issues/961

src/app/app.module.ts

@@ -278,6 +278,7 @@ import { DataSourceFilter } from './filters/dataSourceFilter';
 import { ChangeHostnameActionComponent } from './components/project-map/context-menu/actions/change-hostname/change-hostname-action.component';
 import { ChangeHostnameDialogComponent } from './components/project-map/change-hostname-dialog/change-hostname-dialog.component';
 import { ApplianceInfoDialogComponent } from './components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component';
+import { InformationDialogComponent } from './components/dialogs/information-dialog.component';
 
 @NgModule({
   declarations: [
@@ -460,7 +461,8 @@ import { ApplianceInfoDialogComponent } from './components/project-map/new-templ
     NewTemplateDialogComponent,
     ChangeHostnameActionComponent,
     ChangeHostnameDialogComponent,
-    ApplianceInfoDialogComponent
+    ApplianceInfoDialogComponent,
+    InformationDialogComponent
   ],
   imports: [
     BrowserModule,

src/app/components/dialogs/information-dialog.component.html

@@ -0,0 +1,7 @@
+<span>{{ confirmationMessage }}</span>
+<div mat-dialog-actions>
+  <button mat-button class="cancelButton" (click)="onNoClick()" color="accent">No</button>
+  <button mat-button class="confirmButton" (click)="onYesClick()" tabindex="2" mat-raised-button color="primary">
+    Yes
+  </button>
+</div>

src/app/components/dialogs/information-dialog.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-information-dialog',
+  templateUrl: 'information-dialog.component.html',
+  styleUrls: ['information-dialog.component.css']
+})
+export class InformationDialogComponent implements OnInit {
+  public confirmationMessage: string;
+  constructor(public dialogRef: MatDialogRef<InformationDialogComponent>) {}
+
+  ngOnInit() {}
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+  onYesClick(): void {
+    this.dialogRef.close(true);
+  }
+}

src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts

@@ -27,6 +27,7 @@ import { IouTemplate } from '../../../models/templates/iou-template';
 import { TemplateService } from '../../../services/template.service';
 import { Template } from '../../../models/template';
 import { ComputeService } from '../../../services/compute.service';
+import { InformationDialogComponent } from '../../../components/dialogs/information-dialog.component';
 
 @Component({
     selector: 'app-new-template-dialog',
@@ -321,8 +322,35 @@ export class NewTemplateDialogComponent implements OnInit {
         return false;
     }
 
+    openConfirmationDialog(message: string, link: string) {
+        const dialogRef = this.dialog.open(InformationDialogComponent, {
+            width: '400px',
+            height: '200px',
+            autoFocus: false,
+            disableClose: true
+        });
+        dialogRef.componentInstance.confirmationMessage = message;
+      
+        dialogRef.afterClosed().subscribe((answer: boolean) => {
+            if (answer) {
+              window.open(link);
+            }
+        });
+    }
+
     downloadImage(image: Image) {
-        window.open(image.download_url);
+        const directDownloadMessage: string = "Download will redirect you where the required file can be downloaded, you may have to be registered with the vendor in order to download the file.";
+        const compressionMessage: string = `The file is compressed with ${image.compression}, it must be uncompressed first.`;
+
+        if (image.direct_download_url) {
+            if (image.compression) {
+                this.openConfirmationDialog(compressionMessage, image.direct_download_url);
+            } else {
+                window.open(image.direct_download_url);
+            }
+        } else {
+            this.openConfirmationDialog(directDownloadMessage, image.download_url);
+        }
     }
 
     downloadImageFromVersion(image: string) {

src/app/models/appliance.ts

@@ -1,4 +1,6 @@
 export interface Image {
+    compression? : string;
+    direct_download_url? : string;
     download_url: string;
     filename: string;
     filesize: any;