Fix dashboard issues

modules/portmaster/projects/safing/portmaster-api/src/lib/netquery.service.ts

@@ -207,6 +207,7 @@ export class Netquery {
       },
       {
         observe: 'response',
+        responseType: 'text',
         reportProgress: false,
       }
     )

modules/portmaster/src/app/pages/dashboard/dashboard.component.ts

@@ -276,23 +276,30 @@ export class DashboardPageComponent implements OnInit, AfterViewInit {
       .pipe(
         takeUntilDestroyed(this.destroyRef)
       )
-      .subscribe(profile => {
-        this.profile = profile;
+      .subscribe({
+        next: (profile) => {
+        this.profile = profile || null;
         this.featureBw = profile?.current_plan?.feature_ids?.includes(FeatureID.Bandwidth) || false;
-        const featureSPN = profile?.current_plan?.feature_ids?.includes(FeatureID.SPN) || false;
+        this.featureSPN = profile?.current_plan?.feature_ids?.includes(FeatureID.SPN) || false;
 
-        if (featureSPN !== this.featureSPN) {
-          this.featureSPN = featureSPN;
+        // force a full change-detection cylce now!
+        this.cdr.detectChanges()
 
-          // force a full change-detection cylce now!
-          this.cdr.detectChanges()
+        // force re-draw of the charts after change-detection because the
+        // width may change now.
+        this.lineCharts?.forEach(chart => chart.redraw())
 
-          // force re-draw of the charts after change-detection because the
-          // width may change now.
-          this.lineCharts?.forEach(chart => chart.redraw())
-        }
         this.cdr.markForCheck();
-      })
+      },
+      complete: () => {
+        // Database entry deletion will complete the observer.
+        this.profile = null;
+        this.featureBw = false;
+        this.featureSPN = false;
+
+        this.cdr.markForCheck();
+      },
+    })
   }
 
   async ngAfterViewInit() {

modules/portmaster/src/app/shared/country-flag/country-flag.ts

@@ -33,7 +33,7 @@ export class CountryFlagDirective implements AfterViewInit, OnChanges {
     const flag = this.toUnicodeFlag(this.appCountryFlags);
     this.renderer.setAttribute(span, 'data-before', flag);
 
-    span.innerHTML = `<img style="display: inline" src="${this.flagDir}/${this.appCountryFlags.toLocaleUpperCase()}.png">`;
+    span.innerHTML = `<img style="display: inline" src="${this.flagDir}${this.appCountryFlags.toLocaleUpperCase()}.png">`;
   }
 
   private toUnicodeFlag(code: string) {

modules/portmaster/src/app/shared/spn-account-details/spn-account-details.ts

@@ -63,11 +63,20 @@ export class SPNAccountDetailsComponent implements OnInit {
         takeUntilDestroyed(this.destroyRef),
         catchError(err => of(null)),
       )
-      .subscribe(profile => {
-        this.loadingProfile = false;
-        this.currentUser = profile || null;
+      .subscribe({
+        next: (profile) => {
+          this.loadingProfile = false;
+          this.currentUser = profile || null;
 
-        this.cdr.markForCheck();
+          this.cdr.markForCheck();
+        },
+        complete: () => {
+          // Database entry deletion will complete the observer.
+          this.loadingProfile = false;
+          this.currentUser = null;
+
+          this.cdr.markForCheck();
+        },
       })
   }
 }