Add new instance follower notification in client

4 files changed, 20 insertions, 5 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>