Plugins can add custom instance infobox

client/src/app/+login/login.component.html

@@ -85,7 +85,10 @@
       </div>
 
       <div #instanceInformation class="instance-information">
-        <my-instance-about-accordion (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"></my-instance-about-accordion>
+        <my-instance-about-accordion
+          (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
+          pluginScope="login" pluginHook="filter:login.instance-about-plugin-panels.create.result"
+        ></my-instance-about-accordion>
       </div>
     </div>
   </ng-container>

client/src/app/+signup/+register/register.component.html

@@ -17,7 +17,10 @@
         <my-custom-stepper linear *ngIf="!signupDone">
           <cdk-step [stepControl]="formStepTerms" i18n-label="Stepper label for the registration page describing terms of service" label="Terms">
             <div class="instance-information">
-              <my-instance-about-accordion (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"></my-instance-about-accordion>
+              <my-instance-about-accordion
+                (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
+                pluginScope="signup" pluginHook="filter:signup.instance-about-plugin-panels.create.result"
+              ></my-instance-about-accordion>
             </div>
 
             <my-register-step-terms

client/src/app/shared/shared-instance/instance-about-accordion.component.html

@@ -49,5 +49,11 @@
         <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
       </ng-template>
     </ngb-panel>
+
+    <ngb-panel *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id" [title]="pluginPanel.title">
+      <ng-template ngbPanelContent>
+        <div class="block" [innerHTML]="pluginPanel.html"></div>
+      </ng-template>
+    </ngb-panel>
   </ng-container>
 </ngb-accordion>

client/src/app/shared/shared-instance/instance-about-accordion.component.ts

@@ -1,8 +1,9 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { HooksService, Notifier } from '@app/core'
 import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap'
-import { InstanceService } from './instance.service'
-import { Notifier } from '@app/core'
+import { ClientFilterHookName, PluginClientScope } from '@shared/models/plugins'
 import { About } from '@shared/models/server'
+import { InstanceService } from './instance.service'
 
 @Component({
   selector: 'my-instance-about-accordion',
@@ -11,8 +12,12 @@ import { About } from '@shared/models/server'
 })
 export class InstanceAboutAccordionComponent implements OnInit {
   @ViewChild('accordion', { static: true }) accordion: NgbAccordion
+
   @Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>()
 
+  @Input() pluginScope: PluginClientScope
+  @Input() pluginHook: ClientFilterHookName
+
   @Input() panels = {
     features: true,
     administrators: true,
@@ -29,12 +34,15 @@ export class InstanceAboutAccordionComponent implements OnInit {
     administrator: ''
   }
 
+  pluginPanels: { id: string, title: string, html: string }[] = []
+
   constructor (
     private instanceService: InstanceService,
-    private notifier: Notifier
+    private notifier: Notifier,
+    private hookService: HooksService
   ) { }
 
-  ngOnInit (): void {
+  async ngOnInit () {
     this.instanceService.getAbout()
       .subscribe({
         next: async about => {
@@ -47,6 +55,8 @@ export class InstanceAboutAccordionComponent implements OnInit {
 
         error: err => this.notifier.error(err.message)
       })
+
+    this.pluginPanels = await this.hookService.wrapObject([], this.pluginScope, this.pluginHook)
   }
 
   getAdministratorsPanel () {

shared/models/plugins/client/client-hook.model.ts

@@ -65,6 +65,9 @@ export const clientFilterHookObject = {
   // Filter upload page alert messages
   'filter:upload.messages.create.result': true,
 
+  'filter:login.instance-about-plugin-panels.create.result': true,
+  'filter:signup.instance-about-plugin-panels.create.result': true,
+
   // Filter videojs options built for PeerTube player
   'filter:internal.player.videojs.options.result': true
 }