fix #697 & #700

src/core/auth/auth.controller.ts

@@ -1,4 +1,4 @@
-import { Controller, Post, Body, Get, UseGuards } from '@nestjs/common';
+import { Controller, Post, Body, Get, UseGuards, Header } from '@nestjs/common';
 import { AuthService } from './auth.service';
 import { AuthDto } from './auth.dto';
 import { ConfigService } from '../config/config.service';
@@ -21,6 +21,13 @@ export class AuthController {
     return this.configService.uiSettings();
   }
 
+  @Get('/wallpaper/:hash')
+  @Header('Content-Type', 'image/jpeg')
+  @Header('Cache-Control', 'public,max-age=31536000,immutable')
+  getCustomWallpaper() {
+    return this.configService.streamCustomWallpaper();
+  }
+
   @Post('/noauth')
   getToken() {
     return this.authService.generateNoAuthToken();

src/core/config/config.service.ts

@@ -48,6 +48,10 @@ export class ConfigService {
   // package.json
   public package = fs.readJsonSync(path.resolve(process.env.UIX_BASE_PATH, 'package.json'));
 
+  // custom wallpaper
+  public customWallpaperPath = path.resolve(this.storagePath, 'ui-wallpaper.jpg');
+  public customWallpaperHash: string;
+
   // set true to force the ui to restart on next restart request
   public hbServiceUiRestartRequired = false;
 
@@ -147,6 +151,7 @@ export class ConfigService {
     this.instanceId = this.getInstanceId();
 
     this.freezeUiSettings();
+    this.getCustomWallpaperHash();
   }
 
   /**
@@ -170,6 +175,7 @@ export class ConfigService {
         temperatureUnits: this.ui.tempUnits || 'c',
         lang: this.ui.lang === 'auto' ? null : this.ui.lang,
         instanceId: this.instanceId,
+        customWallpaperHash: this.customWallpaperHash,
       },
       formAuth: Boolean(this.ui.auth !== 'none'),
       theme: this.ui.theme || 'auto',
@@ -288,4 +294,26 @@ export class ConfigService {
     return crypto.createHash('sha256').update(this.secrets.secretKey).digest('hex');
   }
 
+  /**
+   * Checks to see if custom wallpaper has been set, and generate a sha256 hash to use as the file name
+   */
+  private async getCustomWallpaperHash(): Promise<void> {
+    try {
+      const stat = await fs.stat(this.ui.loginWallpaper || this.customWallpaperPath);
+      const hash = crypto.createHash('sha256');
+      hash.update(`${stat.birthtime}${stat.ctime}${stat.size}${stat.blocks}`);
+      this.customWallpaperHash = hash.digest('hex') + '.jpg';
+      console.log(this.customWallpaperHash);
+    } catch (e) {
+      // do nothing
+    }
+  }
+
+  /**
+   * Stream the custom wallpaper
+   */
+  public streamCustomWallpaper(): fs.ReadStream {
+    return fs.createReadStream(this.ui.loginWallpaper || this.customWallpaperPath);
+  }
+
 }

src/main.ts

@@ -82,22 +82,6 @@ async function bootstrap() {
     },
   });
 
-  // login page image
-  app.getHttpAdapter().get('/assets/snapshot.jpg', async (req, res) => {
-    if (configService.ui.loginWallpaper) {
-      if (!await fs.pathExists(configService.ui.loginWallpaper)) {
-        logger.error(`Custom Login Wallpaper does not exist: ${configService.ui.loginWallpaper}`);
-        return res.code(404).send('Not Found');
-      }
-      res.type('image/jpg');
-      res.header('Cache-Control', 'public,max-age=31536000,immutable');
-      res.send(await fs.readFile(path.resolve(configService.ui.loginWallpaper)));
-    } else {
-      res.header('Cache-Control', 'public,max-age=31536000,immutable');
-      res.sendFile('assets/snapshot.jpg');
-    }
-  });
-
   // set prefix
   app.setGlobalPrefix('/api');
 

src/modules/plugins/plugins.service.ts

@@ -491,6 +491,11 @@ export class PluginsService {
       configSchema.schema.properties.pin.default = this.configService.homebridgeConfig.bridge.pin;
     }
 
+    // add the display name from the config.json
+    if (plugin.displayName) {
+      configSchema.displayName = plugin.displayName;
+    }
+
     return configSchema;
   }
 

ui/src/app/core/auth/auth.service.ts

@@ -6,6 +6,8 @@ import { ToastrService } from 'ngx-toastr';
 import * as dayjs from 'dayjs';
 import { ApiService } from '../api.service';
 import { environment } from '../../../environments/environment';
+import { Observable, Subject } from 'rxjs';
+import { first } from 'rxjs/operators';
 
 interface UserInterface {
   username?: string;
@@ -30,11 +32,11 @@ interface EnvInterface {
   lang: string | null;
   temperatureUnits: string;
   instanceId: string;
+  customWallpaperHash: string;
 }
 
 @Injectable()
 export class AuthService {
-  public settingsLoaded = false;
   public env: EnvInterface = {} as EnvInterface;
   public uiVersion: string;
   public formAuth = true;
@@ -43,6 +45,11 @@ export class AuthService {
   public user: UserInterface = {};
   private logoutTimer;
 
+  // track to see if settings have been loaded
+  private settingsLoadedSubject = new Subject();
+  public onSettingsLoaded = this.settingsLoadedSubject.pipe(first());
+  public settingsLoaded = false;
+
   constructor(
     private $jwtHelper: JwtHelperService,
     private $api: ApiService,
@@ -157,6 +164,7 @@ export class AuthService {
         this.setUiVersion(data.env.packageVersion);
         this.setLang(this.env.lang);
         this.settingsLoaded = true;
+        this.settingsLoadedSubject.next();
       });
   }
 

ui/src/app/core/auth/login/login.component.html

@@ -1,4 +1,5 @@
-<div class="login-container d-flex align-items-center justify-content-center">
+<div class="login-container d-flex align-items-center justify-content-center"
+  [ngStyle]="{'background': backgroundStyle}">
   <div class="card card-body ml-2 mr-2 login-card">
 
     <form novalidate (ngSubmit)="onSubmit(form)" [formGroup]="form">

ui/src/app/core/auth/login/login.component.scss

@@ -6,7 +6,6 @@
 
 .login-container {
   background-color: #f4f4f4;
-  background: url('/assets/snapshot.jpg') no-repeat center center fixed; 
   background-size: cover;
   position: absolute;
   top: 0;

ui/src/app/core/auth/login/login.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 
 import { AuthService } from '../auth.service';
+import { environment } from '@/environments/environment';
 
 @Component({
   selector: 'app-login',
@@ -11,6 +12,7 @@ import { AuthService } from '../auth.service';
 })
 export class LoginComponent implements OnInit {
   public form: FormGroup;
+  public backgroundStyle: string;
   public invalidCredentials = false;
   public inProgress = false;
   private targetRoute;
@@ -28,6 +30,18 @@ export class LoginComponent implements OnInit {
     });
 
     this.targetRoute = window.sessionStorage.getItem('target_route') || '';
+    this.setBackground();
+  }
+
+  async setBackground() {
+    if (!this.$auth.settingsLoaded) {
+      await this.$auth.onSettingsLoaded.toPromise();
+    }
+
+    const backgroundImageUrl = this.$auth.env.customWallpaperHash ?
+      environment.api.base + '/auth/wallpaper/' + this.$auth.env.customWallpaperHash :
+      '/assets/snapshot.jpg';
+    this.backgroundStyle = `url('${backgroundImageUrl}') no-repeat center center fixed`;
   }
 
   async onSubmit({ value, valid }) {

ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.html

@@ -1,3 +1,3 @@
-<button type="button" class="btn btn-elegant" data-dismiss="modal" (click)="downloadDumpFile()">
+<button type="button" class="btn btn-elegant m-0" data-dismiss="modal" (click)="downloadDumpFile()">
   <i class="fas fa-download"></i> Download Dump File
 </button>

ui/src/app/core/manage-plugins/settings-plugins-modal/settings-plugins-modal.component.html

@@ -1,6 +1,7 @@
 <div class="modal-content hb-plugin-settings-modal">
   <div class="modal-header">
-    <h5 class="modal-title">{{'plugins.settings.title_settings' | translate}}: {{ pluginName }}</h5>
+    <h5 class="modal-title">{{'plugins.settings.title_settings' | translate}}:
+      {{ configSchema.displayName || pluginName }}</h5>
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"
       (click)="activeModal.dismiss('Cross click')">
       <span aria-hidden="true">&times;</span>
@@ -12,7 +13,9 @@ <h5 class="modal-title">{{'plugins.settings.title_settings' | translate}}: {{ pl
         *ngIf="configSchema.headerDisplay"></markdown>
     </div>
 
-    <ngb-accordion [closeOthers]="true" [activeIds]="show || pluginConfig[0].__uuid__" *ngIf="pluginConfig.length">
+    <!-- MULTIPLE CONFIG BLOCKS-->
+    <ngb-accordion [closeOthers]="true" [activeIds]="show || pluginConfig[0].__uuid__"
+      *ngIf="pluginConfig.length && !configSchema.singular">
       <ngb-panel [id]="block.__uuid__" [title]="block.name" *ngFor="let block of pluginConfig">
         <ng-template ngbPanelContent>
           <json-schema-form *ngIf="configSchema.schema" [options]="jsonFormOptions" [schema]="configSchema.schema"
@@ -30,13 +33,33 @@ <h5 class="modal-title">{{'plugins.settings.title_settings' | translate}}: {{ pl
       </ngb-panel>
     </ngb-accordion>
 
+    <!-- SINGLE CONFIG BLOCK ONLY -->
+    <div *ngIf="pluginConfig.length && configSchema.singular" class="card card-body">
+      <div *ngFor="let block of pluginConfig">
+        <json-schema-form *ngIf="configSchema.schema" [options]="jsonFormOptions" [schema]="configSchema.schema"
+          [layout]="configSchema.layout" [form]="configSchema.form" [(ngModel)]="block.config" framework="bootstrap-4"
+          (onChanges)="block.onChange($event)" class="ng-bs4-validate">
+        </json-schema-form>
+
+        <app-homebridge-hue *ngIf="pluginName === 'homebridge-hue'"></app-homebridge-hue>
+
+        <div class="d-flex">
+          <a *ngIf="pluginName !== 'homebridge-config-ui-x'" class="ml-auto red-text"
+            (click)="removeBlock(block.__uuid__)" [ngbTooltip]="'Remove ' + configSchema.pluginType + '.'"
+            container="body">
+            <i class="fas fa-trash"></i>
+          </a>
+        </div>
+      </div>
+
+    </div>
+
     <div class="mt-3">
       <markdown hrefTargetBlank class="plugin-md" [data]="configSchema.footerDisplay | interpolateMd"
         *ngIf="configSchema.footerDisplay"></markdown>
     </div>
   </div>
   <div class="modal-footer">
-    <app-homebridge-hue class="mr-auto" *ngIf="pluginName === 'homebridge-hue'"></app-homebridge-hue>
     <button type="button" class="btn btn-elegant mr-auto" data-dismiss="modal" (click)="addBlock()"
       *ngIf="!configSchema.singular || pluginConfig.length === 0">
       Add {{ configSchema.pluginType }} Block