Add instance banner on login page

client/src/app/shared/shared-instance/index.ts

@@ -1,5 +1,6 @@
 export * from './feature-boolean.component'
 export * from './instance-about-accordion.component'
+export * from './instance-banner.component'
 export * from './instance-features-table.component'
 export * from './instance-follow.service'
 export * from './instance.service'

client/src/app/shared/shared-instance/instance-banner.component.html

@@ -0,0 +1,3 @@
+<div class="banner" [ngClass]="{ rounded }">
+  <img class="rounded" [src]="instanceBannerUrl" alt="Instance banner">
+</div>

client/src/app/shared/shared-instance/instance-banner.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit, booleanAttribute } from '@angular/core'
+import { InstanceService } from './instance.service'
+
+@Component({
+  selector: 'my-instance-banner',
+  templateUrl: './instance-banner.component.html'
+})
+export class InstanceBannerComponent implements OnInit {
+  @Input({ transform: booleanAttribute }) rounded: boolean
+
+  instanceBannerUrl: string
+
+  constructor (private instanceService: InstanceService) {
+
+  }
+
+  ngOnInit () {
+    this.instanceService.getInstanceBannerUrl()
+      .subscribe(instanceBannerUrl => this.instanceBannerUrl = instanceBannerUrl)
+  }
+}

client/src/app/shared/shared-instance/instance.service.ts

@@ -1,5 +1,5 @@
-import { forkJoin } from 'rxjs'
-import { catchError, map } from 'rxjs/operators'
+import { forkJoin, of } from 'rxjs'
+import { catchError, map, tap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { MarkdownService, RestExtractor, ServerService } from '@app/core'
@@ -18,6 +18,8 @@ export class InstanceService {
   private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config'
   private static BASE_SERVER_URL = environment.apiUrl + '/api/v1/server'
 
+  private instanceBannerUrl: string
+
   constructor (
     private authHttp: HttpClient,
     private restExtractor: RestExtractor,
@@ -28,9 +30,46 @@ export class InstanceService {
 
   getAbout () {
     return this.authHttp.get<About>(InstanceService.BASE_CONFIG_URL + '/about')
-               .pipe(catchError(res => this.restExtractor.handleError(res)))
+      .pipe(
+        tap(about => {
+          const banners = about.instance.banners
+          if (banners.length !== 0) this.instanceBannerUrl = banners[0].path
+        }),
+        catchError(res => this.restExtractor.handleError(res))
+      )
   }
 
+  // ---------------------------------------------------------------------------
+
+  getInstanceBannerUrl () {
+    if (this.instanceBannerUrl || this.instanceBannerUrl === null) {
+      return of(this.instanceBannerUrl)
+    }
+
+    return this.getAbout()
+      .pipe(map(() => this.instanceBannerUrl))
+  }
+
+  updateInstanceBanner (formData: FormData) {
+    this.instanceBannerUrl = undefined
+
+    const url = InstanceService.BASE_CONFIG_URL + '/instance-banner/pick'
+
+    return this.authHttp.post(url, formData)
+      .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  deleteInstanceBanner () {
+    this.instanceBannerUrl = null
+
+    const url = InstanceService.BASE_CONFIG_URL + '/instance-banner'
+
+    return this.authHttp.delete(url)
+      .pipe(catchError(err => this.restExtractor.handleError(err)))
+  }
+
+  // ---------------------------------------------------------------------------
+
   contactAdministrator (fromEmail: string, fromName: string, subject: string, message: string) {
     const body = {
       fromEmail,

client/src/app/shared/shared-instance/shared-instance.module.ts

@@ -7,6 +7,7 @@ import { InstanceAboutAccordionComponent } from './instance-about-accordion.comp
 import { InstanceFeaturesTableComponent } from './instance-features-table.component'
 import { InstanceFollowService } from './instance-follow.service'
 import { InstanceService } from './instance.service'
+import { InstanceBannerComponent } from './instance-banner.component'
 
 @NgModule({
   imports: [
@@ -18,13 +19,15 @@ import { InstanceService } from './instance.service'
   declarations: [
     FeatureBooleanComponent,
     InstanceAboutAccordionComponent,
-    InstanceFeaturesTableComponent
+    InstanceFeaturesTableComponent,
+    InstanceBannerComponent
   ],
 
   exports: [
     FeatureBooleanComponent,
     InstanceAboutAccordionComponent,
-    InstanceFeaturesTableComponent
+    InstanceFeaturesTableComponent,
+    InstanceBannerComponent
   ],
 
   providers: [