Merge pull request #653 from adshares/develop

Release v0.7.2
adshares · May 10, 2019 · 289d7c4 · 289d7c4
2 parents 19e8db1 + 1dd6756
commit 289d7c4
Show file tree

Hide file tree

Showing 55 changed files with 470 additions and 264 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- User impersonation by server admin
 
 ## [0.7.0] - 2019-04-29
 ### Added

diff --git a/src/app/admin/admin-routing.module.ts b/src/app/admin/admin-routing.module.ts
@@ -9,6 +9,7 @@ import { FinancesSettingsComponent } from "admin/finances/finances-settings.comp
 import { GeneralSettingsComponent } from "admin/general-settings/general-settings.component";
 import { RebrandingComponent } from 'admin/rebranding/rebranding.component';
 import { PrivacyAndTermsSettingsComponent } from "admin/privacy-and-terms-settings/privacy-and-terms-settings.component";
+import { UserListComponent } from "admin/user-list/user-list.component";
 
 const adminRoutes: Routes = [
   {
@@ -46,6 +47,7 @@ const adminRoutes: Routes = [
             path: 'privacy',
             component: PrivacyAndTermsSettingsComponent,
           },
+          {path: 'users', component: UserListComponent},
         ]
       },
     ]

diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
@@ -10,7 +10,8 @@ import {
   MatInputModule,
   MatSliderModule,
   MatCheckboxModule,
-  MatDividerModule
+  MatDividerModule,
+  MatPaginatorModule
 } from '@angular/material';
 import { AppCommonModule } from 'common/common.module';
 import { AdminRoutingModule } from './admin-routing.module';
@@ -44,7 +45,8 @@ import { PanelBlockadeComponent } from "admin/dashboard/panel-blockade/panel-blo
     MatSliderModule,
     SettingsModule,
     MatCheckboxModule,
-    MatDividerModule
+    MatDividerModule,
+    MatPaginatorModule
   ],
   providers: [
     AdminGuard,

diff --git a/src/app/admin/admin.service.ts b/src/app/admin/admin.service.ts
@@ -16,8 +16,14 @@ export class AdminService {
   constructor(private http: HttpClient) {
   }
 
-  getUsers(): Observable<UserInfoStats[]> {
-    return this.http.get<UserInfoStats[]>(`${environment.apiUrl}/users`);
+  getUsers(nextPage?: string): Observable<UserInfoStats[]> {
+    const url = (nextPage && nextPage.replace('http', 'https')) ||
+      `${environment.serverUrl}/admin/users`;
+    return this.http.get<UserInfoStats[]>(url);
+  }
+
+  impersonateUser(id: number): Observable<string> {
+    return this.http.get<string>(`${environment.serverUrl}/admin/impersonation/${id}`)
   }
 
   getAdminSettings(): Observable<AdminSettingsResponse> {

diff --git a/src/app/admin/dashboard/dashboard.component.ts b/src/app/admin/dashboard/dashboard.component.ts
@@ -60,6 +60,14 @@ export class DashboardComponent extends HandleSubscription implements OnInit {
         {name: 'Email & Password', icon: 'assets/images/preferences.svg'},
       ],
     },
+    {
+      title: 'Users',
+      description: '',
+      link: '/admin/dashboard/users',
+      values: [
+        {name: 'Users List', icon: 'assets/images/user-gray.svg'},
+      ],
+    },
   ];
 
   constructor(private store: Store<AppState>) {

diff --git a/src/app/admin/user-list/user-list-item/user-list-item.component.html b/src/app/admin/user-list/user-list-item/user-list-item.component.html
@@ -1,65 +1,21 @@
-<div class="dwmth-box">
-  <div class="user-item">
-    <div
-      class="
-        row
-        align-center
-        dwmth-copy
-        dwmth-copy--semi"
+<tr class="user-list-item">
+  <td class="col-xs-4 user-list-item__cell user-list-item__cell--bold">
+    {{ userInfoStats.email }}
+  </td>
+  <td class="col-xs-2 user-list-item__cell"
+      [title]="userInfoStats.isAdvertiser && userInfoStats.isPublisher ? 'Advertiser and Publisher' : ''">
+    {{
+    userInfoStats.isAdvertiser && userInfoStats.isPublisher ? 'Adv / Pub' :
+    userInfoStats.isAdvertiser && !userInfoStats.isPublisher ? 'Advertiser' : 'Publisher'
+    }}
+  </td>
+
+  <td class="col-xs-2 user-list-item__cell">
+    <button
+      class="user-list-item__btn"
+      (click)="handleImpersonating()"
     >
-      <div
-        class="
-          col-xs-4
-          row
-          align-center"
-      >
-        <div
-          class="
-            dwmth-heading
-            dwmth-heading--secondary"
-        >
-          {{ userInfoStats.email }}
-        </div>
-      </div>
-      <div
-        class="
-          col-xs-2
-          row
-          align-center
-          dwmth-copy
-          dwmth-copy--large"
-      >
-        {{
-          userInfoStats.isAdvertiser && userInfoStats.isPublisher ? 'Both' :
-          userInfoStats.isAdvertiser && !userInfoStats.isPublisher ? 'Advertiser' : 'Publisher'
-        }}
-      </div>
-      <div
-        class="
-          col-xs-2
-          row
-          align-center
-          dwmth-heading
-          dwmth-heading--secondary"
-        [ngClass]="{'positive': userInfoStats.profit > 0, 'negative': userInfoStats.profit < 0 }"
-      >
-        {{ userInfoStats.profit | currency:'USD':true  }}
-      </div>
-      <div
-        class="
-          col-xs-4
-          row
-          align-center"
-      >
-        <div
-          class="
-            dwmth-chip-box
-            dwmth-chip-box--dark"
-          *ngFor="let keyword of userInfoStats.topKeywords"
-        >
-          {{ keyword }}
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+      Impersonate
+    </button>
+  </td>
+</tr>
diff --git a/src/app/admin/user-list/user-list-item/user-list-item.component.scss b/src/app/admin/user-list/user-list-item/user-list-item.component.scss
@@ -1,9 +1,31 @@
 @import '../../../../styles.scss';
 
-.positive {
-  color: pal(green);
-}
+.user-list-item {
+  @include container($border-color: pal(gray, nearly-white));
+  display: flex;
+  justify-content: space-between;
+
+  &__cell {
+    @include copy($font-size: 16);
+    display: flex;
+    align-items: center;
+
+    &--bold {
+      @include copy(
+        $color: pal(navy, base),
+        $font-weight: semi,
+        $font-size: 16
+      );
+    }
+  }
 
-.negative {
-  color: pal(red);
+  &__btn {
+    @include btn(
+      $border-color: pal(navy, light),
+      $color: pal(navy, light),
+      $background-color: pal(white),
+      $padding-horizontal: 12px,
+      $padding-vertical: 8px
+    );
+  }
 }
diff --git a/src/app/admin/user-list/user-list-item/user-list-item.component.ts b/src/app/admin/user-list/user-list-item/user-list-item.component.ts
@@ -1,6 +1,11 @@
 import { Component, Input } from '@angular/core';
 
 import { UserInfoStats } from 'models/settings.model';
+import { AdminService } from "admin/admin.service";
+import { Store } from "@ngrx/store";
+import { AppState } from "models/app-state.model";
+import { ImpersonateUser } from "store/auth/auth.actions";
+import { Router } from "@angular/router";
 
 @Component({
   selector: 'app-user-list-item',
@@ -9,4 +14,21 @@ import { UserInfoStats } from 'models/settings.model';
 })
 export class UserListItemComponent {
   @Input() userInfoStats: UserInfoStats;
+
+  constructor(
+    private adminService: AdminService,
+    private store: Store<AppState>,
+    private router: Router,
+  ) {
+  }
+
+  handleImpersonating() {
+    this.adminService.impersonateUser(this.userInfoStats.id).subscribe(
+      (token) => {
+        this.store.dispatch(new ImpersonateUser(token))
+        this.router.navigate([`/${'publisher'.toLowerCase()}`, 'dashboard'])
+
+      }
+    )
+  }
 }
diff --git a/src/app/admin/user-list/user-list.component.html b/src/app/admin/user-list/user-list.component.html
@@ -1,5 +1,6 @@
 <section
   class="
+  container
     col
     user-list"
 >
@@ -21,40 +22,39 @@
           dwmth-heading--primary"
       >
         Users
-        <span data-test="admin-user-list-user-count">({{ userCount }})</span>
       </h1>
     </div>
     <div
       class="
         col-xs-12
         col-md-5"
     >
-      <div
-        class="
-          row
-          align-center"
-      >
-        <label
-          for="search"
-          class="
-            dwmth-copy
-            dwmth-copy--large
-            search-label"
-        >
-          Search users
-        </label>
-        <input
-          id="search"
-          class="
-            search
-            dwmth-form-input"
-          placeholder="Search by email"
-          matInput
-          [(ngModel)]="userSearch"
-          (ngModelChange)="onSearchChange()"
-          data-test="admin-user-search-input"
-        >
-      </div>
+      <!--<div-->
+        <!--class="-->
+          <!--row-->
+          <!--align-center"-->
+      <!--&gt;-->
+        <!--<label-->
+          <!--for="search"-->
+          <!--class="-->
+            <!--dwmth-copy-->
+            <!--dwmth-copy&#45;&#45;large-->
+            <!--search-label"-->
+        <!--&gt;-->
+          <!--Search users-->
+        <!--</label>-->
+        <!--<input-->
+          <!--id="search"-->
+          <!--class="-->
+            <!--search-->
+            <!--dwmth-form-input"-->
+          <!--placeholder="Search by email"-->
+          <!--matInput-->
+          <!--[(ngModel)]="userSearch"-->
+          <!--(ngModelChange)="onSearchChange()"-->
+          <!--data-test="admin-user-search-input"-->
+        <!--&gt;-->
+      <!--</div>-->
     </div>
     <div
       class="
@@ -97,26 +97,31 @@
     </div>
   </div>
 
-  <div class="user-list__items">
-    <div class="dwmth-box">
+  <table class="user-list__items">
       <app-table-navigation
         [navigationName]="'userListNavigation'"
-        class="
-          row
-          dwmth-copy"
         (sortTable)="sortTable($event)"
       ></app-table-navigation>
-    </div>
-
-    <app-user-list-item
-      *ngFor="let user of filteredUsers"
-      [userInfoStats]="user"
-    ></app-user-list-item>
-  </div>
+    <tbody *ngIf="!isLoading; else loading"
+           [@fadeIn]
+           class="col user-list__table-body">
+      <app-user-list-item
+        *ngFor="let user of filteredUsers"
+        [userInfoStats]="user"
+      ></app-user-list-item>
+    </tbody>
+    <ng-template #loading>
+      <div class="loading-wrapper user-list__loader-container"
+           [@fadeIn]>
+        <mat-spinner [diameter]="60" [strokeWidth]="8"></mat-spinner>
+      </div>
+    </ng-template>
+  </table>
 
-  <ng-template #loading>
-    <div class="loading-wrapper">
-      <mat-spinner [diameter]="30" [strokeWidth]="4"></mat-spinner>
-    </div>
-  </ng-template>
+  <mat-paginator
+    [length]="users ? users.total : 0"
+    [pageSize]="15"
+    (page)="handlePaginationEvent($event)"
+  >
+  </mat-paginator>
 </section>
diff --git a/src/app/admin/user-list/user-list.component.scss b/src/app/admin/user-list/user-list.component.scss
@@ -12,6 +12,21 @@
       margin: 10px 0;
     }
   }
+  &__items {
+    position: relative;
+    height: calc((54px * 15) + 40px);
+  }
+
+  &__loader-container {
+    height: calc(54px * 15);
+    display: flex;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.9);
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 40px;
+  }
 }
 
 .choose-user-type {