Update SPN status widget for new account type

safing · Dec 7, 2022 · e685bb5 · e685bb5
1 parent 91fef0b
commit e685bb5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 43 deletions.
diff --git a/modules/portmaster/src/app/shared/spn-status/spn-status.html b/modules/portmaster/src/app/shared/spn-status/spn-status.html
@@ -6,43 +6,38 @@
 
   <div class="relative flex flex-col justify-start gap-1 px-8 py-4">
     <h2 class="p-0 m-0 font-light outline-none cursor-pointer test-base" [routerLink]="['/spn']">SPN</h2>
-    <span class="-mt-1 text-xs font-medium text-secondary" [class.text-yellow-300]="spnStatus?.Status !== 'connected'"
-      [class.text-red-300]="spnStatus?.Status === 'failed' && !spnLoginRequired" *ngIf="spnLoginRequired">Please log
-      into your account</span>
 
-    <ng-container *ngIf="!spnLoginRequired">
-      <span [ngSwitch]="spnStatus?.Status" class="-mt-1 text-xs font-medium text-secondary">
-        <ng-template ngSwitchCase="disabled">
-          Increase privacy protection
-        </ng-template>
-        <ng-template ngSwitchCase="failed">
-          Failed to connect
-        </ng-template>
-        <ng-template ngSwitchCase="connecting">
-          Connecting to the SPN ...
-        </ng-template>
-        <ng-template ngSwitchCase="connected">
-          You're protected
-        </ng-template>
+    <span [ngSwitch]="spnStatus?.Status" class="-mt-1 text-xs font-medium text-secondary">
+      <ng-template ngSwitchCase="disabled">
+        Increase privacy protection
+      </ng-template>
+      <ng-template ngSwitchCase="failed">
+        Failed to connect
+      </ng-template>
+      <ng-template ngSwitchCase="connecting">
+        Connecting to the SPN ...
+      </ng-template>
+      <ng-template ngSwitchCase="connected">
+        You're protected
+      </ng-template>
+    </span>
+    <ng-container *ngIf="spnEnabled">
+      <span class="text-secondary text-xxs" *appExpertiseLevel="'developer'">
+        Home: <u>{{ spnStatus?.ConnectedIP }}</u> via <u>{{ spnStatus?.ConnectedTransport}}</u>
       </span>
-      <ng-container *ngIf="spnEnabled && !spnLoginRequired">
-        <span class="text-secondary text-xxs" *appExpertiseLevel="'developer'">
-          Home: <u>{{ spnStatus?.ConnectedIP }}</u> via <u>{{ spnStatus?.ConnectedTransport}}</u>
-        </span>
-      </ng-container>
     </ng-container>
 
     <sfng-toggle [ngModel]="spnEnabled" (ngModelChange)="setSPNEnabled($event)"
-      *ngIf="profile !== null && profile.state !== ''"></sfng-toggle>
+      *ngIf="spnEnabled || packageHasSPN"></sfng-toggle>
 
-    <div *ngIf="profile === null || profile.state === ''">
+    <div *ngIf="!packageHasSPN">
       <button class="px-3 py-1.5 uppercase rounded outline-none text-xxs custom bg-blue hover:bg-blue bg-opacity-70"
         (click)="openOrLogin()">
         Upgrade
       </button>
     </div>
   </div>
-  <div class="relative flex flex-col items-end justify-end flex-grow pb-4" *ngIf="spnEnabled && !spnLoginRequired">
+  <div class="relative flex flex-col items-end justify-end flex-grow pb-4" *ngIf="spnEnabled">
     <div class="flex flex-col items-center">
       <span class="-mb-1 leading-3 uppercase text-xxs text-secondary">Identities</span>
       <span class="text-lg text-primary">{{ identities }}</span>

diff --git a/modules/portmaster/src/app/shared/spn-status/spn-status.ts b/modules/portmaster/src/app/shared/spn-status/spn-status.ts
@@ -33,16 +33,11 @@ export class SPNStatusComponent implements OnInit, OnDestroy {
   /** The current status of the SPN module */
   spnStatus: SPNStatus | null = null;
 
-  /** Returns whether or not the SPN user login is required */
-  get spnLoginRequired() {
-    return this.spnEnabled && (this.profile === null || !this.profile.state);
+  /** Returns whether or not the current package has the SPN feature */
+  get packageHasSPN() {
+    return this.profile?.current_plan?.feature_ids?.includes('spn')
   }
 
-  private _previousLoginRequired = false;
-
-  @Output()
-  loginRequired = new EventEmitter<boolean>();
-
   constructor(
     private configService: ConfigService,
     private spnService: SPNService,
@@ -62,7 +57,6 @@ export class SPNStatusComponent implements OnInit, OnDestroy {
       )
       .subscribe(profile => {
         this.profile = profile || null;
-        this.updateLoginRequired()
 
         this.cdr.markForCheck();
       });
@@ -71,7 +65,6 @@ export class SPNStatusComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this.destroy$))
       .subscribe(status => {
         this.spnStatus = status;
-        this.updateLoginRequired()
 
         this.cdr.markForCheck();
       })
@@ -80,7 +73,6 @@ export class SPNStatusComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this.destroy$))
       .subscribe(value => {
         this.spnEnabled = value;
-        this.updateLoginRequired();
 
         // If the user disabled the SPN clear the connection chart
         // as well.
@@ -137,11 +129,4 @@ export class SPNStatusComponent implements OnInit, OnDestroy {
     this.configService.save(`spn/enable`, v)
       .subscribe();
   }
-
-  private updateLoginRequired() {
-    if (this._previousLoginRequired != this.spnLoginRequired) {
-      this._previousLoginRequired = this.spnLoginRequired;
-      this.loginRequired.next(this.spnLoginRequired);
-    }
-  }
 }