4.4.2

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. This project uses [Semantic Versioning](https://semver.org/).
 
+## 4.4.2 (2019-05-19)
+
+### Other Changes
+
+* **Plugins:** Added extra logging to try and investigate the cause of [#299](https://github.com/oznu/homebridge-config-ui-x/issues/299)
+* Provide a more detailed error with steps to resolve if the `node-pty` module fails to load (after a Node.js update for example)
+* Added a warning message in the logs letting the user know if their Node.js version is to low (anything less than 8.0.0)
+* Updated npm dependencies
+
 ## 4.4.1 (2019-05-14)
 
 ### Notable Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homebridge-config-ui-x",
-  "version": "4.4.1",
+  "version": "4.4.2-beta.1",
   "description": "Configuration UI plugin for Homebridge",
   "license": "MIT",
   "author": "oznu <[email protected]>",
@@ -63,13 +63,13 @@
     "semver": "^6.0.0"
   },
   "devDependencies": {
-    "@nestjs/jwt": "^6.0.0",
-    "@nestjs/passport": "^6.0.0",
+    "@nestjs/jwt": "^6.1.0",
+    "@nestjs/passport": "^6.1.0",
     "@nestjs/platform-fastify": "^6.2.0",
     "@oznu/hap-client": "0.0.4",
     "@types/express": "^4.16.0",
     "@types/fs-extra": "^7.0.0",
-    "@types/node": "^12.0.1",
+    "@types/node": "^12.0.2",
     "@types/socket.io": "^2.1.2",
     "bash-color": "0.0.4",
     "buffer-shims": "^1.0.0",
@@ -84,13 +84,13 @@
     "passport": "^0.4.0",
     "passport-jwt": "^4.0.0",
     "pino-pretty": "^3.0.0",
-    "point-of-view": "^3.3.0",
+    "point-of-view": "^3.4.0",
     "prettier": "^1.17.1",
     "qr-image": "^3.2.0",
     "request": "^2.88.0",
     "request-promise": "^4.2.4",
     "rimraf": "^2.6.2",
-    "ts-loader": "^6.0.0",
+    "ts-loader": "^6.0.1",
     "ts-node": "^8.1.0",
     "tsconfig-paths": "^3.5.0",
     "tslint": "^5.16.0",

src/core/config/config.service.ts

@@ -36,6 +36,7 @@ export class ConfigService {
   public runningInLinux = (!this.runningInDocker && os.platform() === 'linux');
   public ableToConfigureSelf = (!this.runningInDocker || semver.satisfies(process.env.CONFIG_UI_VERSION, '>=3.5.5'), { includePrerelease: true });
   public enableTerminalAccess = this.runningInDocker || Boolean(process.env.HOMEBRIDGE_CONFIG_UI_TERMINAL === '1');
+  public branding = process.env.CONFIG_UI_BRANDING || false;
 
   // docker paths
   public startupScript = path.resolve(this.storagePath, 'startup.sh');
@@ -129,6 +130,7 @@ export class ConfigService {
         runningInLinux: this.runningInLinux,
         temperatureUnits: this.ui.tempUnits || 'c',
         websocketCompatibilityMode: this.ui.websocketCompatibilityMode || false,
+        branding: this.branding,
       },
       formAuth: Boolean(this.ui.auth !== 'none'),
       theme: this.ui.theme || 'teal',

src/index.ts

@@ -31,6 +31,10 @@ class HomebridgeConfigUi {
       .option('-T, --no-timestamp', '', () => process.env.UIX_LOG_NO_TIMESTAMPS = '1')
       .parse(process.argv);
 
+    if (!semver.satisfies(process.version, '>=8.0.0')) {
+      log.warn(`Node.js v8.0.0 higher is required. You may experience issues running this plugin.`);
+    }
+
     if (config.standalone || (
       process.env.HOMEBRIDGE_CONFIG_UI === '1' && semver.satisfies(process.env.CONFIG_UI_VERSION, '>=3.5.5', { includePrerelease: true }))
     ) {

src/main.ts

@@ -1,3 +1,5 @@
+import './self-check';
+
 import * as path from 'path';
 import * as fastify from 'fastify';
 import * as helmet from 'helmet';

src/modules/plugins/plugins.service.ts

@@ -188,6 +188,7 @@ export class PluginsService {
       return [plugin];
     } catch (e) {
       if (e.statusCode !== 404) {
+        this.logger.error('Failed to search npm registry');
         this.logger.error(e.message);
       }
       return [];
@@ -546,7 +547,7 @@ export class PluginsService {
       plugin.author = (pkg.maintainers.length) ? pkg.maintainers[0].name : null;
     } catch (e) {
       if (e.statusCode !== 404) {
-        this.logger.error(e.message);
+        this.logger.error(`[${plugin}] ${e.message}`);
       }
       plugin.publicPackage = false;
       plugin.latestVersion = null;

src/self-check.ts

@@ -0,0 +1,27 @@
+import { Logger } from './core/logger/logger.service';
+
+/**
+ * The purpose of this script is to check the environment before launching the UI
+ */
+async function main() {
+  const logger = new Logger();
+
+  // check if node-pty is built correctly
+  try {
+    require('node-pty-prebuilt-multiarch');
+  } catch (e) {
+    logger.error(e);
+    logger.error(`[node-pty] Node.js ${process.version}`);
+    logger.error('[node-pty] Failed to load node-pty module');
+    logger.error('[node-pty] This could be because the installation of this plugin did not complete successfully ' +
+      'or you may have recently upgraded Node.js to a new major version and have not reinstalled or rebuilt this plugin.');
+    logger.error('[node-pty] This can usually be fixed by uninstalling and ' +
+      'reinstalling this plugin (exact command may vary based on your platform and setup):');
+    logger.error('[node-pty] sudo npm uninstall -g homebridge-config-ui-x');
+    logger.error('[node-pty] sudo npm install -g --unsafe-perm homebridge-config-ui-x');
+    process.exit(1);
+  }
+
+}
+
+main();

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

@@ -1,32 +1,34 @@
-<div class="login-container d-flex align-items-center justify-content-center">
+<div class="login-container d-flex align-items-center justify-content-center" [ngClass]="$auth.env.branding">
   <div class="card card-body ml-2 mr-2 login-card">
 
     <form novalidate (ngSubmit)="onSubmit(form)" [formGroup]="form">
+      <img *ngIf="$auth.env.branding" class="login-logo" src="/assets/branding/{{ $auth.env.branding }}-logo-bw.png" />
       <p class="h4 text-center mb-4" [translate]="'login.title_login'">Login</p>
-    
+
       <div class="md-form">
         <i class="material-icons prefix grey-text">&#xE85E;</i>
-        <input formControlName="username" type="text" id="form-username" 
-         autofocus autocomplete="username" tabindex="1" class="form-control pl-0 pr-0" [ngClass]="{
+        <input formControlName="username" type="text" id="form-username" autofocus autocomplete="username" tabindex="1"
+          class="form-control pl-0 pr-0" [ngClass]="{
             'is-invalid': form.controls.username.dirty && form.controls.username.errors
-          }" >
+          }">
         <label for="form-username" [translate]="'login.label_username'">Username</label>
       </div>
 
       <div class="md-form">
         <i class="material-icons prefix grey-text">&#xE897;</i>
-        <input formControlName="password" type="password" id="form-pass" 
-          autocomplete="current-password" tabindex="2" class="form-control pl-0 pr-0" [ngClass]="{
+        <input formControlName="password" type="password" id="form-pass" autocomplete="current-password" tabindex="2"
+          class="form-control pl-0 pr-0" [ngClass]="{
             'is-invalid': form.controls.password.dirty && form.controls.password.errors
           }">
         <label for="form-pass" [translate]="'login.label_password'">Password</label>
       </div>
-    
+
       <div class="text-center">
-        <p class="red-text" *ngIf="invalidCredentials"><small [translate]="'login.message_invalid_username_or_password'">Invalid Username and Password</small></p>
+        <p class="red-text" *ngIf="invalidCredentials"><small
+            [translate]="'login.message_invalid_username_or_password'">Invalid Username and Password</small></p>
         <button tabindex="3" class="btn btn-amber" type="submit" [translate]="'login.button_login'">Login</button>
       </div>
-  
+
     </form>
 
   </div>

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

@@ -9,6 +9,10 @@
   bottom: 0;
   right: 0;
   left: 0;
+
+  &.hoobs {
+    background: #ecb326;
+  }
 }
 
 .login-card {
@@ -22,4 +26,24 @@
   @media screen and (min-height: 800px){
     margin-bottom: 12em;
   }
+}
+
+.login-logo {
+  position: absolute;
+  top: -35%;
+  z-index: 2000;
+  max-width: 450px;
+
+  @media screen and (max-width: 450px){
+    max-width: 320px;
+    top: -25%;
+  }
+
+  @media screen and (max-width: 320px){
+    max-width: 280px;
+  }
+
+  @media screen and (max-height: 450px){
+    display: none;
+  }
 }

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

@@ -18,7 +18,7 @@ export class LoginComponent implements OnInit {
   constructor(
     private $fb: FormBuilder,
     private $router: Router,
-    private $auth: AuthService,
+    public $auth: AuthService,
   ) { }
 
   ngOnInit() {

ui/src/app/shared/layout/layout.component.html

@@ -3,7 +3,8 @@
 
   <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary scrolling-navbar">
     <a class="navbar-brand" routerLink="/">
-      <strong>Homebridge</strong>
+      <img *ngIf="$auth.env.branding" class="menu-logo" src="/assets/branding/{{ $auth.env.branding }}-logo-bw.png" />
+      <strong *ngIf="!$auth.env.branding">Homebridge</strong>
     </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
       aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

ui/src/app/shared/layout/layout.component.scss

@@ -0,0 +1,10 @@
+.menu-logo {
+  height: 37px;
+
+  @media screen and (max-width: 600px){
+    height: 27px;
+  }
+    @media screen and (max-width: 991px){
+    height: 32px;
+  }
+}