# ADDED 'Download configuration'

You can now download configuration files directly as a .conf file for peer and .zip for servers. The server zip contains all peer configurations including the server.conf.

wg_dashboard_frontend/package.json

@@ -46,10 +46,16 @@
     "angularx-qrcode": "^2.1.0",
     "classlist.js": "1.1.20150312",
     "core-js": "3.6.4",
+    "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
+    "install": "^0.13.0",
     "ip-cidr": "^2.0.10",
+    "js-file-download": "^0.4.11",
+    "jszip": "^3.3.0",
     "material-icons": "^0.3.1",
     "ngx-cookie-service": "^3.0.4",
+    "npm": "^6.14.4",
+    "remove": "^0.1.5",
     "rxjs": "6.5.5",
     "tslib": "^1.10.0",
     "web-animations-js": "^2.3.2",

wg_dashboard_frontend/src/app/app-routing.module.ts

@@ -8,7 +8,7 @@ import { ErrorComponent } from './page/error';
   imports: [
     RouterModule.forRoot(
       [
-        { path: '', redirectTo: 'app/dashboard', pathMatch: 'full' },
+        { path: '', redirectTo: 'page/dashboard', pathMatch: 'full' },
         { path: 'page',  loadChildren: () => import('./page/page.module').then(m => m.PageModule) },
 
         /*{ path: 'app', component: LayoutComponent, children:

wg_dashboard_frontend/src/app/page/dashboard/server/server.component.html

@@ -14,6 +14,14 @@
     </mat-card-title>
     <mat-card-title class="card-container-right">
 
+      <app-modal-confirm
+        [noConfirm]="true"
+        (onConfirm)="downloadServerConfig()"
+        area="true"
+        icon="get_app"
+        hover="Download config zip for {{server.interface}}">
+      </app-modal-confirm>
+
       <app-modal-confirm
         [qrCode]="true"
         [noConfirm]="false"
@@ -107,6 +115,15 @@
               <td> {{peer._stats?.handshake || 'N/A'}}</td>
               <td>
 
+                <!-- Download Button -->
+                <app-modal-confirm
+                  [noConfirm]="true"
+                  (onConfirm)="downloadPeerConfig(peer); $event.stopPropagation();"
+                  icon="get_app"
+                  hover="Download configuration for {{peer.name}}">
+                </app-modal-confirm>
+
+
                 <!-- Edit buttons -->
                 <app-modal-confirm
                   [noConfirm]="true"

wg_dashboard_frontend/src/app/page/dashboard/server/server.component.ts

@@ -3,6 +3,8 @@ import { Server } from '../../../interfaces/server';
 import { ServerService } from '../../../services/server.service';
 import { DataService } from '../../../services/data.service';
 import { Peer } from '../../../interfaces/peer';
+import * as JSZip from 'jszip';
+import { saveAs } from 'file-saver';
 
 @Component({
   selector: 'app-server',
@@ -69,7 +71,25 @@ export class ServerComponent implements OnInit {
     this.selectedPeer = peer;
     this.editPeerEmitter.emit({ type: 'open', peer });
   }
+
   pInt(string: string) {
     return parseInt(string);
   }
+
+  downloadPeerConfig(peer: Peer){
+    const blob = new Blob([peer.configuration], {type: "text/plain;charset=utf-8"});
+    saveAs(blob, `${peer.name}_${peer.address}.conf`);
+  }
+
+  downloadServerConfig(){
+    const zip = new JSZip();
+    zip.file(`${this.server.interface}.conf`, this.server.configuration)
+    this.server.peers.forEach( peer => {
+      zip.file(`clients/${peer.name}_${peer.address}.conf`, peer.configuration)
+    })
+
+    zip.generateAsync({type:"blob"}).then((content) => {
+      saveAs(content, `${this.server.interface}_${this.server.address}.zip`);
+    });
+  }
 }