Refactor tb-logo as link to use in Login/Dashboard/Menu.

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

@@ -73,10 +73,8 @@
               <mat-icon>layers</mat-icon>
               {{'dashboard.states-short' | translate}}
             </button>
-        </ng-container>
-          <a *ngIf="showDashboardLogo()" [routerLink]="dashboardLogoLink" class="dashboard_logo pointer-events-auto">
-            <img [src]="dashboardLogo | image | async" aria-label="dashboard_logo" alt="Dashboard logo" class="h-full"/>
-          </a>
+          </ng-container>
+          <tb-logo *ngIf="showDashboardLogo()" [logoSrc]="dashboardLogo | image | async" class="dashboard_logo"></tb-logo>
         </div>
         <div class="tb-dashboard-action-panel">
           <button [class.!hidden]="!showCloseToolbar()" mat-icon-button class="close-action"

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -38,7 +38,7 @@ import {
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { ActivatedRoute, Router, UrlTree } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { UtilsService } from '@core/services/utils.service';
 import {
   BreakpointId,
@@ -157,7 +157,6 @@ import {
   MoveWidgetsDialogResult
 } from '@home/components/dashboard-page/layout/move-widgets-dialog.component';
 import { HttpStatusCode } from '@angular/common/http';
-import { AuthService } from '@core/auth/auth.service';
 
 // @dynamic
 @Component({
@@ -273,8 +272,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     {width: '100%', height: '100%', maxWidth: '100%', minWidth: '100%'};
   rightLayoutSize: {width: string; height: string} = {width: '100%', height: '100%'};
 
-  dashboardLogoLink: string | UrlTree;
-
   private dashboardLogoCache: SafeUrl;
   private defaultDashboardLogo = 'assets/logo_title_white.svg';
 
@@ -377,7 +374,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
               private dialog: MatDialog,
               public translate: TranslateService,
               private popoverService: TbPopoverService,
-              private authService: AuthService,
               private renderer: Renderer2,
               private ngZone: NgZone,
               @Optional() @Inject('embeddedValue') private embeddedValue,
@@ -520,7 +516,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     this.layouts.right.layoutCtx.widgets = new LayoutWidgetsArray(this.dashboardCtx);
     this.widgetEditMode = data.widgetEditMode;
     this.singlePageMode = data.singlePageMode;
-    this.dashboardLogoLink = this.getDashboardLogoLink();
 
     this.readonly = this.embedded || (this.singlePageMode && !this.widgetEditMode && !this.route.snapshot.queryParamMap.get('edit'))
                     || this.forceFullscreen || this.isMobileApp || this.authUser.authority === Authority.CUSTOMER_USER ||
@@ -1831,12 +1826,4 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     }
     return false;
   }
-
-  private getDashboardLogoLink(): string | UrlTree {
-    if (this.authUser.isPublic) {
-      return this.dashboardService.getPublicDashboardLink(this.dashboard);
-    } else {
-      return this.authService.defaultUrl(true, this.authState);
-    }
-  }
 }

ui-ngx/src/app/modules/home/home.component.html

@@ -24,8 +24,7 @@
     <header class="tb-nav-header">
       <mat-toolbar color="primary" class="tb-nav-header-toolbar">
         <div class="flex flex-auto">
-          <img [src]="logo"
-               aria-label="logo" class="tb-logo-title"/>
+          <tb-logo [logoSrc]="logo" class="tb-logo-title"></tb-logo>
         </div>
       </mat-toolbar>
     </header>

ui-ngx/src/app/modules/login/pages/login/login.component.html

@@ -21,7 +21,7 @@
       <form class="tb-login-form" [formGroup]="loginFormGroup" (ngSubmit)="login()">
         <fieldset class="flex flex-col">
           <div class="flex flex-col items-center justify-start" style="padding: 15px 0;">
-            <tb-logo class="login-logo"></tb-logo>
+            <tb-logo isLogin class="login-logo"></tb-logo>
           </div>
           <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
           </mat-progress-bar>

ui-ngx/src/app/modules/login/pages/login/login.component.scss

@@ -38,6 +38,18 @@
       .tb-action-button{
         padding: 20px 0 16px;
       }
+
+      .login-logo {
+        width: 280px;
+        height: 60px;
+        text-decoration: none;
+        border: none;
+        transform: none;
+
+        &:focus {
+          outline: 0;
+        }
+      }
     }
 
     .oauth-container{

ui-ngx/src/app/shared/components/logo.component.html

@@ -15,5 +15,6 @@
     limitations under the License.
 
 -->
-<img (click)="gotoThingsboard()" [src]="logo"
-         aria-label="logo" class="tb-logo-title flex-1"/>
+<a [routerLink]="isLogin ? '' : logoLink" (click)="onLogoClick()">
+  <img [src]="logoSrc" aria-label="logo" alt="Logo"/>
+</a>

ui-ngx/src/app/shared/components/logo.component.scss

@@ -13,17 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host-context(.login-logo) {
-  img.tb-logo-title {
-    width: 280px;
-    height: 60px;
-    text-decoration: none;
-    cursor: pointer;
-    border: none;
-    transform: none;
-
-    &:focus {
-      outline: 0;
-    }
+:host {
+  pointer-events: auto;
+  img {
+    height: 100%;
   }
 }

ui-ngx/src/app/shared/components/logo.component.ts

@@ -14,19 +14,48 @@
 /// limitations under the License.
 ///
 
-import { Component } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { coerceBoolean } from '@shared/decorators/coercion';
+import { AuthService } from '@core/auth/auth.service';
+import { AppState } from '@core/core.state';
+import { Store } from '@ngrx/store';
+import { UrlTree } from '@angular/router';
+import { getCurrentAuthState } from '@core/auth/auth.selectors';
+import { UrlHolder } from '@shared/pipe/image.pipe';
 
 @Component({
   selector: 'tb-logo',
   templateUrl: './logo.component.html',
   styleUrls: ['./logo.component.scss']
 })
-export class LogoComponent {
+export class LogoComponent implements OnInit {
 
-  logo = 'assets/logo_title_white.svg';
+  @Input()
+  @coerceBoolean()
+  isLogin: boolean = false;
 
-  gotoThingsboard(): void {
-    window.open('https://thingsboard.io', '_blank');
+  @Input()
+  logoSrc: string | UrlHolder = 'assets/logo_title_white.svg';
+
+  logoLink: UrlTree;
+
+  constructor(private authService: AuthService,
+              private store: Store<AppState>) {
+  }
+
+  ngOnInit() {
+    if (!this.isLogin) {
+      this.logoLink = this.authService.defaultUrl(true, getCurrentAuthState(this.store));
+    }
   }
 
+  onLogoClick() {
+    if (this.isLogin) {
+      this.gotoThingsboard();
+    }
+  }
+
+  private gotoThingsboard() {
+    window.open('https://thingsboard.io', '_blank');
+  }
 }