Add new instance follower notification in client

6 files changed, 31 insertions, 19 deletions

diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
index 59422d682..93e294a96 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
@@ -4,8 +4,8 @@
   <div i18n *ngIf="emailEnabled">Email</div>
 </div>
 
-<div class="custom-row" *ngFor="let notificationType of notificationSettingKeys">
-  <ng-container *ngIf="hasUserRight(notificationType)">
+<ng-container *ngFor="let notificationType of notificationSettingKeys">
+  <div class="custom-row" *ngIf="hasUserRight(notificationType)">
     <div>{{ labelNotifications[notificationType] }}</div>
 
     <div>
@@ -15,5 +15,5 @@
     <div *ngIf="emailEnabled">
       <p-inputSwitch [(ngModel)]="emailNotifications[notificationType]" (onChange)="updateEmailSetting(notificationType, $event.checked)"></p-inputSwitch>
     </div>
-  </ng-container>
-</div>
+  </div>
+</ng-container>
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index d85f269ea..bd5b11bb0 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -43,7 +43,8 @@ const icons = {
   'videos': require('../../../assets/images/global/videos.html'),
   'folder': require('../../../assets/images/global/folder.html'),
   'administration': require('../../../assets/images/menu/administration.html'),
-  'subscriptions': require('../../../assets/images/menu/subscriptions.html')
+  'subscriptions': require('../../../assets/images/menu/subscriptions.html'),
+  'users': require('../../../assets/images/global/users.html')
 }
 
 export type GlobalIconName = keyof typeof icons
diff --git a/client/src/app/shared/users/user-notification.model.ts b/client/src/app/shared/users/user-notification.model.ts
index 76b983152..72fc3e7b4 100644
--- a/client/src/app/shared/users/user-notification.model.ts
+++ b/client/src/app/shared/users/user-notification.model.ts
@@ -59,6 +59,7 @@ export class UserNotification implements UserNotificationServer {
   accountUrl?: string
   videoImportIdentifier?: string
   videoImportUrl?: string
+  instanceFollowUrl?: string
 
   constructor (hash: UserNotificationServer) {
     this.id = hash.id
@@ -141,6 +142,10 @@ export class UserNotification implements UserNotificationServer {
         case UserNotificationType.NEW_FOLLOW:
           this.accountUrl = this.buildAccountUrl(this.actorFollow.follower)
           break
+
+        case UserNotificationType.NEW_INSTANCE_FOLLOWER:
+          this.instanceFollowUrl = '/admin/follows/followers-list'
+          break
       }
     } catch (err) {
       console.error(err)
diff --git a/client/src/app/shared/users/user-notifications.component.html b/client/src/app/shared/users/user-notifications.component.html
index 6d2f2750e..d27f60158 100644
--- a/client/src/app/shared/users/user-notifications.component.html
+++ b/client/src/app/shared/users/user-notifications.component.html
@@ -102,6 +102,15 @@
           <a (click)="markAsRead(notification)" [routerLink]="notification.accountUrl">{{ notification.comment.account.displayName }}</a> mentioned you on <a (click)="markAsRead(notification)" [routerLink]="notification.commentUrl">video {{ notification.comment.video.name }}</a>
         </div>
       </ng-container>
+
+      <ng-container i18n *ngSwitchCase="UserNotificationType.NEW_INSTANCE_FOLLOWER">
+        <my-global-icon iconName="users"></my-global-icon>
+
+        <div class="message">
+          Your instance has <a (click)="markAsRead(notification)" [routerLink]="notification.instanceFollowUrl">a new follower</a>
+          <ng-container *ngIf="notification.actorFollow.state === 'pending'"> awaiting your approval</ng-container>
+        </div>
+      </ng-container>
     </ng-container>
 
     <div class="from-date">{{ notification.createdAt | myFromNow }}</div>
diff --git a/client/src/assets/images/global/users.html b/client/src/assets/images/global/users.html
new file mode 100644
index 000000000..522883785
--- /dev/null
+++ b/client/src/assets/images/global/users.html
@@ -0,0 +1,11 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Artboard-4" transform="translate(-92.000000, -863.000000)">
+      <g id="342" transform="translate(92.000000, 863.000000)">
+        <path d="M7,21 C7,21 7,17 11,17 C15,17 14.9937515,17 19,17 C23.0062485,17 23.0062485,21 23.0062485,21" id="Path-41" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M8.27455269,11.9477557 C5.85692935,11.5963698 4,9.51503944 4,7 C4,4.23857625 6.23857625,2 9,2 C10.373942,2 11.6184509,2.55416948 12.5221996,3.45118158 C11.8469348,3.70680858 11.2215328,4.06387931 10.664592,4.50379553 C10.1883045,4.18555118 9.61582114,4 9,4 C7.34314575,4 6,5.34314575 6,7 C6,8.3069749 6.83577432,9.41874424 8.00202365,9.83000873 C8.00067709,9.88650926 8,9.94317556 8,10 C8,10.6759052 8.09579644,11.329436 8.27455269,11.9477557 Z M8.67363116,13 L5,13 C2.85717375,13 1.39436214,13.9752077 0.605572809,15.5527864 C0.148670182,16.4665917 -7.10542736e-14,17.3586127 -7.10542736e-14,18 C-7.10542736e-14,18.5522847 0.44771525,19 1,19 C1.55228475,19 2,18.5522847 2,18 C2,17.9269061 2.01176795,17.7621548 2.04889392,17.539399 C2.11167338,17.1627222 2.22417415,16.7877197 2.39442719,16.4472136 C2.85563786,15.5247923 3.64282625,15 5,15 L10.1010173,15 C9.51513298,14.4258795 9.02972955,13.7496048 8.67363116,13 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"/>
+        <circle id="Oval-40" stroke="#000000" stroke-width="2" cx="15" cy="10" r="4"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/src/assets/images/global/videos.svg b/client/src/assets/images/global/videos.svg
deleted file mode 100644
index 6e37f466f..000000000
--- a/client/src/assets/images/global/videos.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-312.000000, -511.000000)">
-            <g id="187" transform="translate(312.000000, 511.000000)">
-                <rect id="Rectangle-124" stroke="#000000" stroke-width="2" x="3" y="6" width="18" height="16" rx="1"/>
-
-                <polygon fill="#000000" id="Triangle-1" points="10 17.5 10 10.4 15.5 13.9"/>
-
-                <rect id="Rectangle-125" fill="#000000" x="4" y="3" width="16" height="1" rx="0.5"/>
-                <rect id="Rectangle-125" fill="#000000" x="5" y="1" width="14" height="1" rx="0.5"/>
-            </g>
-        </g>
-    </g>
-</svg>