* Fixed annoying expand bug in peer frontend

* Fixed bug where address could not be changed for peers.
* Deleted old files.

wg_dashboard_backend/routers/v1/peer.py

@@ -99,6 +99,10 @@ def edit_peer(
         peer=peer,
         server=server
     ))
-    peer.sync(sess)
+    sess.query(models.WGPeer)\
+        .filter_by(id=peer.id)\
+        .update(peer.dict(exclude={"id"}))
+
+    sess.commit()
 
     return peer

wg_dashboard_frontend/src/app/page/components/modal-confirm/modal-confirm.component.ts

@@ -38,7 +38,7 @@ export class ModalConfirmComponent implements OnInit {
 
   open($event){
     if (this.noConfirm) {
-      this.onConfirm.emit();
+      this.onConfirm.emit($event);
       return true;
     }
 
@@ -48,13 +48,13 @@ export class ModalConfirmComponent implements OnInit {
   }
   confirm($event){
     $event.stopPropagation();
-    this.onConfirm.emit();
+    this.onConfirm.emit($event);
     this.shown=  false;
 
   }
 
   cancel($event){
-    this.onCancel.emit();
+    this.onCancel.emit($event);
     this.shown = false
   }
 

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

@@ -38,6 +38,7 @@ export class PeerComponent implements OnInit {
   edit() {
     if (this.peer._edit) {
 
+
       // Submit the edit (True -> False)
       const idx = this.server.peers.indexOf(this.peer);
       this.serverAPI.editPeer(this.peer).subscribe((newPeer) => {

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

@@ -110,7 +110,7 @@
                 <!-- Edit buttons -->
                 <app-modal-confirm
                   [noConfirm]="true"
-                  (onConfirm)="this.editPeerEmitter.emit({type: 'edit', peer: peer}); selectedPeer=peer"
+                  (onConfirm)="selectedPeer=peer; this.editPeerEmitter.emit({type: 'edit', peer: peer}); $event.stopPropagation();"
                   icon="edit"
                   hover="Edit {{peer.name}}">
                 </app-modal-confirm>
@@ -127,6 +127,7 @@
 
 
               </td>
+              LOL {{peer !== selectedPeer}}
             </tr>
             <tr [hidden]="peer !== selectedPeer">
               <td colspan="6">

wg_dashboard_frontend/src/app/pages/dashboard/accordion.scss

@@ -1,34 +0,0 @@
-.mdl-accordion.mdl-accordion--opened {
-  border-top: 1px solid #e0e0e0;
-  border-bottom: 1px solid #e0e0e0;
-  margin-top: -1px;
-}
-.mdl-accordion.mdl-accordion--opened + .mdl-accordion.mdl-accordion--opened {
-  border-top: none;
-  margin-top: 0
-}
-.mdl-accordion .mdl-accordion__content-wrapper {
-  overflow: hidden;
-}
-.mdl-accordion .mdl-accordion__content {
-  transition-property: margin-top;
-  transition-duration: 0.2s;
-}
-.mdl-accordion .mdl-accordion__icon {
-  transition-property: transform;
-  transition-duration: 0.2s;
-  color: rgba(0,0,0,0.3);
-
-  position: absolute;
-  right: 6px;
-  margin-top: -3px;
-}
-.mdl-accordion.mdl-accordion--opened .mdl-accordion__icon {
-  transform: rotate(-180deg);
-}
-.mdl-accordion.mdl-accordion--opened .mdl-accordion__button {
-  color: teal;
-}
-.mdl-accordion.mdl-accordion--opened .mdl-accordion__content {
-  margin-top: 0 !important;
-}

wg_dashboard_frontend/src/app/pages/dashboard/add-server/add-server.component.html

@@ -1,96 +0,0 @@
-
-
-  <base-card>
-    <base-card-title>
-      <h2 class="mdl-card__title-text">Add Server</h2>
-    </base-card-title>
-    <base-card-body>
-
-      <form [formGroup]="serverForm" (ngSubmit)="serverForm.valid && add(serverForm.value)" class="form">
-
-        <p style="margin-bottom: 10px;">Essentials</p>
-        <div class="mdl-grid">
-          <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input formControlName="interface" class="mdl-textfield__input" type="text" id="interface" placeholder="wg0" value=""/>
-            <label class="mdl-textfield__label" for="interface">Interface</label>
-          </div>
-
-          <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input formControlName="address" class="mdl-textfield__input" type="text" id="address" placeholder="10.0.200.1/24" value="10.0.200.1/24"/>
-            <label class="mdl-textfield__label" for="address">Address</label>
-          </div>
-
-          <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input formControlName="endpoint" class="mdl-textfield__input" type="text" id="endpoint" placeholder="my-address.com" value=""/>
-            <label class="mdl-textfield__label" for="endpoint">Endpoint</label>
-          </div>
-
-          <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input formControlName="listen_port" class="mdl-textfield__input" type="text" id="listen_port" placeholder="51820" value="51820"/>
-            <label class="mdl-textfield__label" for="listen_port">Listen-Port</label>
-          </div>
-
-        </div>
-
-        <p style="margin-bottom: 10px;">Keys</p>
-
-        <div class="mdl-grid">
-
-          <div class="mdl-cell mdl-cell--12-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input formControlName="private_key" class="mdl-textfield__input" type="text" id="private_key" placeholder="" value=""/>
-            <label class="mdl-textfield__label" for="private_key">Private-Key</label>
-          </div>
-
-          <div class="mdl-cell mdl-cell--12-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input formControlName="public_key" class="mdl-textfield__input" type="text" id="public_key" placeholder="" value=""/>
-            <label class="mdl-textfield__label" for="public_key">Public-Key</label>
-          </div>
-
-          <div class="mdl-cell mdl-cell--12-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input formControlName="shared_key" class="mdl-textfield__input" type="text" id="shared_key" placeholder="" value=""/>
-            <label class="mdl-textfield__label" for="shared_key">Shared-Key</label>
-          </div>
-
-          <button type="button" [hidden]="!isEdit" (click)="getKeyPair()" class="mdl-button mdl-js-button mdl-button--primary">
-            <i class="material-icons">vpn_key</i>
-            Generate KeyPair
-          </button>
-
-          <button type="button" [hidden]="!isEdit" (click)="getPSK()" class="mdl-button mdl-js-button mdl-button--primary">
-            <i class="material-icons">share</i>
-            Generate PSK
-          </button>
-
-        </div>
-        <p style="margin-bottom: 20px;">Scripts</p>
-
-        <div class="mdl-grid ">
-
-          <div class="mdl-cell mdl-cell--12-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input formControlName="post_up" class="mdl-textfield__input" type="text" id="post_up" placeholder="" value=""/>
-            <label class="mdl-textfield__label" for="post_up">Post-Up</label>
-          </div>
-
-          <div class="mdl-cell mdl-cell--12-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input formControlName="post_down" class="mdl-textfield__input" type="text" id="post_down" placeholder="" value=""/>
-            <label class="mdl-textfield__label" for="post_down">Post-Down</label>
-          </div>
-
-        </div>
-
-
-        <button [disabled]="!serverForm.valid" type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-light-blue">
-          <ng-container *ngIf="!isEdit">Add Server</ng-container>
-          <ng-container *ngIf="isEdit">Edit Server</ng-container>
-        </button>
-
-        <button (click)="isEdit = false; serverForm.reset()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-light-blue">
-          Reset
-        </button>
-
-      </form>
-
-
-    </base-card-body>
-  </base-card>
-

wg_dashboard_frontend/src/app/pages/dashboard/add-server/add-server.component.ts

@@ -1,84 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {FormControl, FormGroup, Validators} from "@angular/forms";
-import {IPValidator} from "../../../validators/ip-address.validator";
-import {NumberValidator} from "../../../validators/number.validator";
-import {Server} from "../../../interfaces/server";
-import {ServerService} from "../../../services/server.service";
-import {DataService} from "../../../services/data.service";
-
-@Component({
-  selector: 'app-add-server',
-  templateUrl: './add-server.component.html',
-  styleUrls: ['./add-server.component.scss']
-})
-export class AddServerComponent implements OnInit {
-
-  @Input() servers: Array<Server>;
-
-  serverForm = new FormGroup({
-    address: new FormControl('', [IPValidator.isIPAddress]),
-    interface: new FormControl('', [Validators.required, Validators.minLength(3)]),
-    listen_port: new FormControl('', [Validators.required, NumberValidator.stringIsNumber]),
-    endpoint: new FormControl('', Validators.required),
-    private_key: new FormControl('', [Validators.minLength(44), Validators.maxLength(44)]),
-    public_key: new FormControl('', [Validators.minLength(44), Validators.maxLength(44)]),
-    shared_key: new FormControl('', [Validators.minLength(44), Validators.maxLength(44)]),
-    post_up: new FormControl(''),
-    post_down: new FormControl(''),
-
-    // Unused on backend
-    is_running: new FormControl(false),
-    peers: new FormControl([]),
-  });
-  isEdit: boolean = false;
-  editServer: Server = null;
-
-  constructor(private serverAPI: ServerService, private comm: DataService) { }
-
-  ngOnInit(): void {
-
-    this.comm.on("server-edit").subscribe( (data: Server) => {
-      this.isEdit = true;
-      this.serverForm.setValue(data);
-      this.editServer = data;
-    })
-
-  }
-
-  add(form: Server) {
-
-    if(this.isEdit){
-      const idx = this.servers.indexOf(this.editServer);
-      this.serverAPI.editServer(this.editServer, form).subscribe((server: Server) => {
-        this.servers[idx] = server;
-      });
-
-    } else {
-
-      this.serverAPI.addServer(form).subscribe((server: Server) => {
-        this.servers.push(server);
-      });
-    }
-
-    this.isEdit = false;
-    this.serverForm.reset();
-    this.editServer = null;
-  }
-
-  getKeyPair() {
-    this.serverAPI.getKeyPair().subscribe((kp: any) => {
-      this.serverForm.patchValue({
-        private_key: kp.private_key,
-        public_key: kp.public_key
-      })
-    });
-  }
-
-  getPSK() {
-    this.serverAPI.getPSK().subscribe((psk: any) => {
-      this.serverForm.patchValue({
-        shared_key: psk.psk
-      })
-    });
-  }
-}

wg_dashboard_frontend/src/app/pages/dashboard/dashboard.component.html

@@ -1,29 +0,0 @@
-
-<div class="mdl-grid mdl-cell mdl-cell--8-col-desktop mdl-cell--8-col-tablet mdl-cell--12-col-phone mdl-cell--top">
-
-
-
-  <!-- No Servers -->
-  <div *ngIf="servers.length == 0" class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet">
-    <base-card>
-      <base-card-title>
-        <h2 class="mdl-card__title-text">Servers</h2>
-      </base-card-title>
-      <base-card-body>
-        <p>No Servers</p>
-      </base-card-body>
-    </base-card>
-  </div>
-
-  <!-- Servers For Loop -->
-  <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet" *ngFor="let server of servers; let idx = index">
-    <app-server [(server)]="servers[idx]" [(servers)]="servers"></app-server>
-  </div>
-
-
-</div>
-
-
-<div class="mdl-grid mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone mdl-cell--top" style="margin-top: 16px;">
-  <app-add-server [(servers)]="servers"></app-add-server>
-</div>

wg_dashboard_frontend/src/app/pages/dashboard/dashboard.component.ts

@@ -1,55 +0,0 @@
-import {Component, HostBinding, OnInit} from '@angular/core';
-
-import { UpgradableComponent } from 'theme/components/upgradable';
-import {AbstractControl, FormControl, FormGroup, NgForm, Validators} from "@angular/forms";
-// goog-webfont-dl -o src/theme/fonts/font-roboto.css -p assets/fonts/Roboto -d src/assets/fonts/Roboto -a Roboto
-
-import * as IPCIDR from "ip-cidr";
-import {Server} from "../../interfaces/server";
-import {ServerService} from "../../services/server.service";
-
-import {Peer} from "../../interfaces/peer";
-import {IPValidator} from "../../validators/ip-address.validator";
-
-
-
-
-@Component({
-  selector: 'app-dashboard',
-  styleUrls: ['./dashboard.component.scss', './accordion.scss'],
-  templateUrl: './dashboard.component.html',
-})
-export class DashboardComponent extends UpgradableComponent implements OnInit
-{
-  @HostBinding('class.mdl-grid') private readonly mdlGrid = true;
-  @HostBinding('class.mdl-grid--no-spacing') private readonly mdlGridNoSpacing = true;
-
-  servers: Array<Server> = [];
-
-  constructor(private serverAPI: ServerService) {
-    super();
-  }
-
-  ngOnInit(): void {
-    this.serverAPI.getServers()
-      .subscribe( (servers: Array<Server>) => {
-        this.servers.push(...servers)
-        servers.forEach((server) => {
-
-          this.serverAPI.serverStats(server).subscribe((stats: Peer[]) => {
-            stats.forEach( item => {
-              const peer = server.peers.find(x => x.public_key == item.public_key);
-              peer._stats = item
-            });
-
-
-          });
-
-
-        });
-
-
-      })
-  }
-
-}

wg_dashboard_frontend/src/app/pages/dashboard/dashboard.module.ts

@@ -1,33 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-
-import { ThemeModule } from 'theme';
-
-import { DashboardComponent } from './dashboard.component';
-import { PeerComponent } from './peer/peer.component';
-import { ComponentsModule } from "../components";
-import { AddServerComponent } from './add-server/add-server.component';
-import { ServerComponent } from './server/server.component';
-import {AppModule} from "../../app.module";
-import {QRCodeModule} from "angularx-qrcode";
-
-@NgModule({
-    imports: [
-        CommonModule,
-        ThemeModule,
-        FormsModule,
-        ReactiveFormsModule,
-        ComponentsModule,
-        QRCodeModule
-    ],
-  declarations: [
-    DashboardComponent,
-    PeerComponent,
-    AddServerComponent,
-    ServerComponent,
-  ],
-  exports: [
-  ],
-})
-export class DashboardModule { }

wg_dashboard_frontend/src/app/pages/dashboard/index.ts

@@ -1,2 +0,0 @@
-export { DashboardComponent } from './dashboard.component';
-export { DashboardModule } from './dashboard.module';

wg_dashboard_frontend/src/app/pages/dashboard/peer/peer.component.html

@@ -1,106 +0,0 @@
-<form ngForm #peerForm="ngForm">
-<div class="mdl-grid peer-item" (click)="peer._expand = !peer._expand; fetchConfig()">
-  <div class="mdl-cell--2-col mdl-cell--12-col-phone" *ngIf="{ a:
-  (peer._stats && peer._stats.handshake && (peer._stats.handshake.split(' ')[1] === 'seconds' || pInt(peer._stats.handshake.split(' ')[0]) < 3))}; let isRunning">
-    <i class="material-icons" [ngClass]="{'text-success': isRunning.a, 'text-danger': !isRunning.a}">check_circle</i>
-    <span>{{peer.name}}</span>
-  </div>
-  <div class="mdl-cell--2-col mdl-cell--12-col-phone">{{peer.address}}</div>
-  <div class="mdl-cell--3-col mdl-cell--12-col-phone">{{peer.public_key | slice:0:20}}...</div>
-  <div class="mdl-cell--2-col mdl-cell--12-col-phone">{{peer._stats?.tx || '0 B' }}/{{peer._stats?.rx || '0 B'}}</div>
-  <div class="mdl-cell--2-col mdl-cell--12-col-phone">{{peer._stats?.handshake || "N/A"}}</div>
-
-  <div class="mdl-cell--2-col mdl-cell--12-col-phone">
-
-    <app-modal-confirm
-      [noConfirm]="true"
-      (onConfirm)="edit()"
-      icon="edit"
-      hover="Edit {{peer.name}}">
-    </app-modal-confirm>
-
-    <app-modal-confirm
-      [noConfirm]="false"
-      (onConfirm)="delete()"
-      text="Are you sure you want to delete {{peer.name}} ({{peer.public_key}})?"
-      title="Delete {{peer.name}}"
-      icon="delete"
-      hover="Delete {{peer.name}} ({{peer.public_key}})">
-    </app-modal-confirm>
-
-  </div>
-
-</div>
-</form>
-
-<!-- Expand Area -->
-<div class="mdl-grid mdl-layout__header" *ngIf="peer._expand">
-  <div class="mdl-cell--5-col mdl-cell--12-col-phone mdl-cell--12-col-tablet">
-
-    <form  #peerForm="ngForm" class="form" (ngSubmit)="peerForm.valid && edit()" >
-
-      <p style="font-size: 24px; margin-bottom: 10px;">Essentials</p>
-      <div class="mdl-grid">
-        <div class="mdl-cell mdl-cell--6-col ">
-          <label class="" for="name">Name</label>
-          <input [disabled]="!peer._edit" type="text" name="name" id="name" [(ngModel)]="peer.name" class="mdl-textfield__input" />
-        </div>
-
-        <div class="mdl-cell mdl-cell--6-col">
-          <label class="" for="address">Address</label>
-          <input [disabled]="!peer._edit" type="text" name="address" id="address" [(ngModel)]="peer.address" class="mdl-textfield__input"/>
-
-        </div>
-        <p style="width: 100%;margin-bottom: 15px;"></p>
-        <div class="mdl-cell mdl-cell--12-col">
-          <label class="" for="dns">DNS</label>
-          <input [disabled]="!peer._edit" type="text" name="dns" id="dns" [(ngModel)]="peer.dns" class="mdl-textfield__input"/>
-        </div>
-
-        <p style="width: 100%;margin-bottom: 15px;"></p>
-        <div class="mdl-cell mdl-cell--12-col">
-          <label class="" for="allowed_ips">Allowed IPs</label>
-          <input [disabled]="!peer._edit" type="text" name="allowed_ips" id="allowed_ips" [(ngModel)]="peer.allowed_ips" class="mdl-textfield__input"/>
-        </div>
-      </div>
-      <p style="width: 100%;margin-bottom: 15px;"></p>
-      <p style="font-size:24px; margin-bottom: 10px;">Keys</p>
-
-      <div class="mdl-grid">
-
-        <div class="mdl-cell mdl-cell--12-col">
-          <label class="" for="private_key">Private-Key</label>
-          <input [disabled]="!peer._edit" type="text" name="private_key" id="private_key" [(ngModel)]="peer.private_key" class="mdl-textfield__input"/>
-        </div>
-        <p style="width: 100%;margin-bottom: 15px;"></p>
-        <div class="mdl-cell mdl-cell--12-col">
-          <label class="" for="public_key">Public-Key</label>
-          <input [disabled]="!peer._edit" type="text" name="public_key" id="public_key" [(ngModel)]="peer.public_key" class="mdl-textfield__input"/>
-        </div>
-
-      </div>
-
-
-      <button
-        [hidden]="!peer._edit"
-        [disabled]="!peerForm.valid"
-        type="submit"
-        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-light-blue">
-        Submit changes
-      </button>
-
-    </form>
-
-  </div>
-
-  <div class="mdl-cell--5-col mdl-cell--12-col-phone mdl-cell--12-col-tablet">
-                  <textarea readonly class="mdl-textfield--full-width"
-                            style="min-height: 250px; height: 100%; background-color: #202020; color: #00bcd4;">{{config}}</textarea>
-  </div>
-
-  <div class="mdl-cell--2-col mdl-cell--12-col-phone mdl-cell--12-col-tablet">
-    <div style="text-align: center;">
-      <qrcode [qrdata]="config" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
-    </div>
-  </div>
-</div>

wg_dashboard_frontend/src/app/pages/dashboard/peer/peer.component.scss

@@ -1,16 +0,0 @@
-.peer-item > div{
-  padding-top: 15px;
-  padding-bottom: 15px;
-  border-top: 1px solid black;
-
-}
-
-.peer-item-header > div{
-  font-weight: bold;
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
-.no-padding{
-  padding: 0 !important;
-}

wg_dashboard_frontend/src/app/pages/dashboard/peer/peer.component.ts

@@ -1,61 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {ServerService} from "../../../services/server.service";
-import {Peer} from "../../../interfaces/peer";
-import {Server} from "../../../interfaces/server";
-
-@Component({
-  selector: 'app-peer',
-  templateUrl: './peer.component.html',
-  styleUrls: ['./peer.component.scss']
-})
-export class PeerComponent implements OnInit {
-
-  @Input("peer") peer: Peer;
-  @Input("server") server: Server;
-
-  config: string = "Loading...";
-
-
-  constructor(public serverAPI: ServerService) { }
-
-  ngOnInit(): void {
-  }
-
-  edit(){
-    if(this.peer._edit) {
-
-      // Submit the edit (True -> False)
-      const idx = this.server.peers.indexOf(this.peer);
-      this.serverAPI.editPeer(this.peer).subscribe((newPeer) => {
-        this.server.peers[idx] = newPeer;
-      });
-
-    } else if(!this.peer._edit) {
-      this.peer._expand = true;
-
-      // Open for edit. aka do nothing (False -> True
-
-    }
-
-    this.peer._edit = !this.peer._edit;
-
-
-  }
-
-  delete(){
-    const idx = this.server.peers.indexOf(this.peer);
-    this.serverAPI.deletePeer(this.peer).subscribe((apiServer) => {
-      this.server.peers.splice(idx, 1);
-    })
-  }
-
-  fetchConfig() {
-    this.serverAPI.peerConfig(this.peer).subscribe((config: any) => {
-      this.config = config.config
-    })
-  }
-
-  pInt(string: string) {
-    return parseInt(string)
-  }
-}

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

@@ -1,96 +0,0 @@
-
-<div class=" mdl-card mdl-shadow--2dp">
-  <div class="mdl-card__title mdl-card--border">
-    <h2 class="mdl-card__title-text">{{server.interface}}</h2>
-    <span style="width:20px;"></span>
-    <i class="material-icons" [ngClass]="{'text-success': server.is_running, 'text-danger': !server.is_running}">check_circle</i>
-
-    <app-modal-confirm
-      [qrCode]="true"
-      [noConfirm]="false"
-      area="true"
-      icon="settings"
-      title="Configuration"
-      [text]="serverConfig"
-      hover="Show config for {{server.interface}}">
-    </app-modal-confirm>
-
-
-  </div>
-
-  <div class="mdl-card__actions">
-
-    <div class="mdl-grid peer-item-header">
-      <div class="mdl-cell--2-col mdl-cell--12-col-phone">Name</div>
-      <div class="mdl-cell--2-col mdl-cell--12-col-phone">Address</div>
-      <div class="mdl-cell--3-col mdl-cell--12-col-phone">Public-Key</div>
-      <div class="mdl-cell--2-col mdl-cell--12-col-phone">Total tx/rx</div>
-      <div class="mdl-cell--2-col mdl-cell--12-col-phone">Handshake</div>
-      <div class="mdl-cell--2-col mdl-cell--12-col-phone">Manage</div>
-    </div>
-
-
-    <div style="cursor: pointer;" *ngFor="let peer of server.peers; let idx = index;" >
-      <app-peer [(peer)]="server.peers[idx]" [(server)]="server"></app-peer>
-    </div>
-
-  </div>
-
-  <div class="mdl-card__supporting-text">
-  </div>
-
-
-
-
-  <div class="mdl-card__menu">
-
-    <app-modal-confirm
-      [noConfirm]="true"
-      (onConfirm)="addPeer()"
-      icon="person_add"
-      hover="Add peer to {{server.interface}}">
-    </app-modal-confirm>
-
-    <app-modal-confirm
-      *ngIf="!server.is_running"
-      [noConfirm]="true"
-      (onConfirm)="start()"
-      icon="play_arrow"
-      hover="Start {{server.interface}}">
-    </app-modal-confirm>
-
-    <app-modal-confirm
-      *ngIf="server.is_running"
-      [noConfirm]="false"
-      (onConfirm)="stop()"
-      title="Stop server {{server.interface}}?"
-      text="Are you sure you want to stop this server? This may cause you or your clients to lose connection to the server."
-      icon="stop"
-      hover="Stop {{server.interface}}">
-    </app-modal-confirm>
-
-    <app-modal-confirm
-      [noConfirm]="false"
-      (onConfirm)="restart()"
-      title="Restart server {{server.interface}}?"
-      text="Are you sure you want to restart this server? This may cause you or your clients to lose connection to the server."
-      icon="autorenew"
-      hover="Restart {{server.interface}}">
-    </app-modal-confirm>
-
-    <app-modal-confirm
-      [noConfirm]="true"
-      (onConfirm)="edit()"
-      icon="edit"
-      hover="Edit {{server.interface}}">
-    </app-modal-confirm>
-
-    <app-modal-confirm
-      (onConfirm)="delete()"
-      title="Delete {{server.interface}}"
-      text="Are you sure you want to delete {{server.interface}}"
-      icon="delete"
-      hover="Delete {{server.interface}}">
-    </app-modal-confirm>
-  </div>
-</div>

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

@@ -1,60 +0,0 @@
-import {Component, Input, OnInit, Output} from '@angular/core';
-import {Server} from "../../../interfaces/server";
-import {ServerService} from "../../../services/server.service";
-import {DataService} from "../../../services/data.service";
-
-@Component({
-  selector: 'app-server',
-  templateUrl: './server.component.html',
-  styleUrls: ['./server.component.scss']
-})
-export class ServerComponent implements OnInit {
-  @Input() server: Server;
-  @Input() servers: Array<Server>;
-  serverConfig: string;
-
-  constructor(private serverAPI: ServerService, private comm: DataService) { }
-
-  ngOnInit(): void {
-
-    this.serverAPI.serverConfig(this.server).subscribe((x: any) => this.serverConfig = x.config)
-
-  }
-
-  edit(){
-
-    this.comm.emit('server-edit', this.server);
-  }
-
-  stop() {
-    this.serverAPI.stopServer(this.server).subscribe((apiServer) => {
-      this.server.is_running = apiServer.is_running
-    })
-  }
-
-  start() {
-    this.serverAPI.startServer(this.server).subscribe((apiServer) => {
-      this.server.is_running = apiServer.is_running
-    })
-  }
-
-  addPeer() {
-    this.serverAPI.addPeer(this.server).subscribe((peer) => {
-      this.server.peers.push(peer)
-    })
-  }
-
-  restart() {
-    this.serverAPI.restartServer(this.server).subscribe((apiServer) => {
-      this.server.is_running = apiServer.is_running
-    })
-  }
-
-
-  delete() {
-    const index = this.servers.indexOf(this.server);
-    this.serverAPI.deleteServer(this.server).subscribe((apiServer) => {
-      this.servers.splice(index, 1);
-    })
-  }
-}

wg_dashboard_frontend/src/app/pages/user/edit/edit.component.html

@@ -1,48 +0,0 @@
-<div class="container">
-
-<base-card>
-  <base-card-title>
-    <h2 class="mdl-card__title-text">Edit User</h2>
-  </base-card-title>
-  <base-card-body>
-
-    <form [formGroup]="editForm" (ngSubmit)="editForm.valid && edit()" class="form">
-
-      <div class="mdl-grid">
-        <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-          <input formControlName="full_name" class="mdl-textfield__input" type="text" id="full_name"  value=""/>
-          <label class="mdl-textfield__label" for="full_name">Full Name</label>
-        </div>
-
-
-        <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-          <input formControlName="username" class="mdl-textfield__input" type="text" id="username" />
-          <label class="mdl-textfield__label" for="username">Username</label>
-        </div>
-
-        <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-          <input formControlName="password" class="mdl-textfield__input" type="text" id="password"/>
-          <label class="mdl-textfield__label" for="password">Password</label>
-        </div>
-
-        <div class="mdl-cell mdl-cell--6-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-          <input formControlName="email" class="mdl-textfield__input" type="text" id="email"/>
-          <label class="mdl-textfield__label" for="email">Email</label>
-        </div>
-
-      </div>
-
-
-      <button [disabled]="!editForm.valid" type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-light-blue">
-        Edit User
-      </button>
-
-
-
-    </form>
-
-
-  </base-card-body>
-</base-card>
-
-</div>

wg_dashboard_frontend/src/app/pages/user/edit/edit.component.ts

@@ -1,51 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {FormControl, FormGroup, Validators} from "@angular/forms";
-import {AuthService} from "@services/*";
-import {Router} from "@angular/router";
-
-@Component({
-  selector: 'app-edit',
-  templateUrl: './edit.component.html',
-  styleUrls: ['./edit.component.scss']
-})
-export class EditComponent implements OnInit {
-
-  public editForm: FormGroup = new FormGroup({
-    full_name: new FormControl(''),
-    password: new FormControl('', Validators.required),
-    email: new FormControl('', [
-      Validators.required,
-      Validators.pattern('^([a-zA-Z0-9_\\-\\.]+)@([a-zA-Z0-9_\\-\\.]+)\\.([a-zA-Z]{2,5})$'),
-      Validators.maxLength(20),
-    ]),
-    username: new FormControl('', [Validators.required, Validators.maxLength(20)]),
-  });
-  public user: any;
-  public error: string;
-
-  constructor(private authService: AuthService,
-              private router: Router) {
-
-  }
-
-  public ngOnInit() {
-    this.user = this.authService.user;
-
-
-    this.editForm.setValue({
-      full_name: this.user.full_name,
-      password: "",
-      email: this.user.email,
-      username: this.user.username
-    })
-  }
-
-  public edit() {
-    if (this.editForm.valid) {
-      this.authService.edit(this.editForm.getRawValue())
-        .subscribe(res => this.router.navigate(['/app/dashboard']),
-          error => this.error = error.message);
-    }
-  }
-
-}

wg_dashboard_frontend/src/app/pages/user/login/login.component.html

@@ -1,40 +0,0 @@
-<div class="container">
-
-  <base-card>
-    <base-card-title>
-      <h2 class="mdl-card__title-text">Edit User</h2>
-    </base-card-title>
-    <base-card-body>
-
-      <form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && login()" class="form">
-
-        <div class="mdl-grid">
-
-
-          <div class="mdl-cell mdl-cell--12-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input formControlName="username" class="mdl-textfield__input" type="text" id="username" />
-            <label class="mdl-textfield__label" for="username">Username</label>
-          </div>
-
-          <div class="mdl-cell mdl-cell--12-col mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input formControlName="password" class="mdl-textfield__input" type="text" id="password"/>
-            <label class="mdl-textfield__label" for="password">Password</label>
-          </div>
-
-
-        </div>
-
-
-        <button [disabled]="!loginForm.valid" type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-light-blue">
-          SIGN IN
-        </button>
-
-
-
-      </form>
-
-
-    </base-card-body>
-  </base-card>
-
-</div>

wg_dashboard_frontend/src/app/pages/user/login/login.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LoginComponent } from './login.component';
-
-describe('LoginComponent', () => {
-  let component: LoginComponent;
-  let fixture: ComponentFixture<LoginComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ LoginComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LoginComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

wg_dashboard_frontend/src/app/pages/user/login/login.component.ts

@@ -1,53 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
-import {AuthService} from "@services/*";
-import {Router} from "@angular/router";
-
-@Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
-})
-export class LoginComponent implements OnInit {
-
-  public loginForm: FormGroup;
-  public username;
-  public password;
-  public error: string;
-
-  constructor(private authService: AuthService,
-              private fb: FormBuilder,
-              private router: Router) {
-
-
-    this.loginForm = this.fb.group({
-      password: new FormControl('', Validators.required),
-      username: new FormControl('', [
-        Validators.required,
-      ]),
-    });
-    this.username = this.loginForm.get('username');
-    this.password = this.loginForm.get('password');
-  }
-
-  public ngOnInit() {
-    this.authService.logout();
-    this.loginForm.valueChanges.subscribe(() => {
-      this.error = null;
-    });
-  }
-
-  public login() {
-    this.error = null;
-    if (this.loginForm.valid) {
-      this.authService.login(this.loginForm.getRawValue())
-        .subscribe(res => this.router.navigate(['/app/dashboard']),
-          error => this.error = error.message);
-    }
-  }
-
-  public onInputChange(event) {
-    event.target.required = true;
-  }
-
-}

wg_dashboard_frontend/src/app/pages/user/user.module.ts

@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { EditComponent } from './edit/edit.component';
-import {ReactiveFormsModule} from "@angular/forms";
-import {CardModule} from "../../../theme/components/card";
-import { LoginComponent } from './login/login.component';
-
-
-
-@NgModule({
-  declarations: [
-    EditComponent,
-    LoginComponent
-  ],
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    CardModule
-  ]
-})
-export class UserModule {
-
-}