Add new account messages to account pop up

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

Hide file tree

Showing 4 changed files with 42 additions and 19 deletions.
diff --git a/modules/portmaster/projects/safing/portmaster-api/src/lib/spn.types.ts b/modules/portmaster/projects/safing/portmaster-api/src/lib/spn.types.ts
@@ -53,7 +53,18 @@ export interface Plan {
   amount: number;
   months: number;
   renewable: boolean;
+  feature_ids: string[];
 }
+
+export interface View {
+    Message           : string;
+    ShowAccountData   : boolean;
+    ShowAccountButton : boolean;
+    ShowLoginButton   : boolean;
+    ShowRefreshButton : boolean;
+    ShowLogoutButton  : boolean;
+}
+
 export interface UserProfile extends Record {
   username: string;
   state: string;
@@ -62,5 +73,7 @@ export interface UserProfile extends Record {
   subscription: Subscription | null;
   current_plan: Plan | null;
   next_plan: Plan | null;
+	view: View | null;
+	LastNotifiedOfEnd?: string;
   LoggedInAt?: string;
 }
diff --git a/modules/portmaster/src/app/layout/side-dash/side-dash.html b/modules/portmaster/src/app/layout/side-dash/side-dash.html
@@ -1,7 +1,7 @@
 <div class="relative flex flex-row w-full gap-2 px-2 pb-8 justify-evenly">
   <app-status-pilot class="block w-32"></app-status-pilot>
   <div class="h-full border-l-2 border-gray-300"></div>
-  <app-spn-status class="block w-64" (loginRequired)="spnLoginRequired = $event"></app-spn-status>
+  <app-spn-status class="block w-64"></app-spn-status>
 
   <div class="absolute top-0 right-0 flex flex-row gap-2 pr-4">
     <span (click)="openNetworkStatus()"

diff --git a/modules/portmaster/src/app/pages/spn/spn-page.html b/modules/portmaster/src/app/pages/spn/spn-page.html
@@ -48,7 +48,7 @@
         Login
       </button>
 
-      <button (click)="toggleSPN()" *ngIf="spnStatus?.Status === 'disabled' && !!currentUser"
+      <button (click)="toggleSPN()" *ngIf="currentUser?.current_plan?.feature_ids?.includes('spn')"
         class="w-56 px-5 py-2 font-medium text-white uppercase rounded-full bg-blue bg-opacity-90 hover:bg-blue">
         Enable the SPN
       </button>

diff --git a/modules/portmaster/src/app/shared/spn-account-details/spn-account-details.html b/modules/portmaster/src/app/shared/spn-account-details/spn-account-details.html
@@ -1,48 +1,58 @@
 <ng-container *ngIf="!!currentUser && currentUser.state !== '' && currentUser.state !== 'loggedout'">
   <h1 class="mb-4 text-xl">Account Details</h1>
 
-  <table class="mb-4">
-    <tr>
-      <th>Username</th>
-      <td>{{ currentUser.username }} </td>
-    </tr>
-    <tr>
-      <th>Balance</th>
-      <td>{{ currentUser.balance / 100 | currency:'EUR' }} </td>
-    </tr>
+  <!-- TODO: update to fit style -->
+  <div *ngIf="currentUser.view?.Message" class="flex bg-yellow-100 rounded-lg p-4 mb-4 text-sm text-yellow-700 font-medium" role="alert">
+    <svg class="w-5 h-5 inline mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
+    <div>
+      {{ currentUser.view?.Message }}
+    </div>
+  </div>
+
+  <table *ngIf="currentUser.view?.ShowAccountData" class="mb-4">
     <tr>
-      <th>Current Plan</th>
+      <th>Package</th>
       <td>{{ currentUser.current_plan?.name }}</td>
     </tr>
     <tr>
-      <th>Subscription ends at</th>
+      <th>Package Runs Until</th>
       <td>{{ currentUser.subscription?.ends_at | date:'medium' }}</td>
     </tr>
 
+    <tr>
+      <th>Username</th>
+      <td>{{ currentUser.username }} </td>
+    </tr>
     <tr>
       <th>Device Name</th>
       <td>{{ currentUser.device?.name }}</td>
     </tr>
+
     <tr *appExpertiseLevel="'developer'">
       <th>Device ID</th>
       <td>{{currentUser.device?.id}}</td>
     </tr>
-    <tr>
-      <th>Logged in since</th>
-      <td>{{ currentUser.LoggedInAt | date:'medium' }} </td>
-    </tr>
     <tr *appExpertiseLevel="'developer'">
       <th>Account State</th>
       <td>{{ currentUser.state }} </td>
     </tr>
+    <tr *appExpertiseLevel="'developer'">
+      <th>Logged in Since</th>
+      <td>{{ currentUser.LoggedInAt | date:'medium' }} </td>
+    </tr>
   </table>
 
   <div class="flex items-end justify-end w-full space-x-2">
     <button *ngIf="dialogRef" (click)="dialogRef.close()" class="">Close</button>
     <div class="flex-grow"></div>
 
-    <button (click)="logout()" class="bg-info-red">Logout</button>
-    <button (click)="refreshAccount()" style="width: 70px">
+    <a *ngIf="currentUser.view?.ShowAccountButton" href="https://account.safing.io/?source=Portmaster"
+      class="flex flex-row items-center self-stretch justify-center gap-1 px-2 bg-gray-300 rounded hover:bg-gray-200 text-blue whitespace-nowrap">
+      Open Account Page
+    </a>
+
+    <button *ngIf="currentUser.view?.ShowLogoutButton || currentUser.view?.ShowLoginButton" (click)="logout()" class="bg-info-red">Logout</button>
+    <button *ngIf="currentUser.view?.ShowRefreshButton" (click)="refreshAccount()" style="width: 70px">
       <ng-container *ngIf="!refreshing; else: loading">
         Refresh
       </ng-container>