Refactor `tb-logo`, add support in login page to open link in a new tab on right-click.

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 isLogin></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/shared/components/logo.component.html

@@ -15,6 +15,17 @@
     limitations under the License.
 
 -->
-<a [routerLink]="isLogin ? '' : logoLink" (click)="onLogoClick()">
+@if (isLogin) {
+  <a href="https://thingsboard.io" target="_blank">
+    <ng-container *ngTemplateOutlet="logo"></ng-container>
+  </a>
+} @else {
+  <a [routerLink]="logoLink">
+    <ng-container *ngTemplateOutlet="logo"></ng-container>
+  </a>
+}
+
+<ng-template #logo>
   <img [src]="logoSrc" aria-label="logo" alt="Logo"/>
-</a>
+</ng-template>
+

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

@@ -16,23 +16,19 @@
 :host {
   pointer-events: auto;
   a img {
-    display: block;
     width: 100%;
     height: 100%;
   }
 }
 
-:host.login-logo {
+:host-context(.login-logo) {
-  display: inline-block;
   width: 280px;
   height: 60px;
   a {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
     text-decoration: none;
     border: none;
     transform: none;
+
     &:focus {
       outline: 0;
     }

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

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Input, OnInit, HostBinding } 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';
@@ -30,11 +30,6 @@ import { UrlHolder } from '@shared/pipe/image.pipe';
 })
 export class LogoComponent implements OnInit {
 
-  @HostBinding('class.login-logo')
-  get isLoginLogoClass() {
-    return this.isLogin;
-  }
-
   @Input()
   @coerceBoolean()
   isLogin: boolean = false;
@@ -54,14 +49,4 @@ export class LogoComponent implements OnInit {
       this.logoLink = this.authService.defaultUrl(true, authState);
     }
   }
-
-  onLogoClick() {
-    if (this.isLogin) {
-      this.gotoThingsboard();
-    }
-  }
-
-  private gotoThingsboard() {
-    window.open('https://thingsboard.io', '_blank');
-  }
 }