From f28641093ba4dfd6f33b141b94d4c0e73ca4670a Mon Sep 17 00:00:00 2001
From: deaflynx <artemio.babak@gmail.com>
Date: Mon, 29 Sep 2025 13:22:11 +0300
Subject: [PATCH] Refactor `tb-logo`, add support in login page to open link in
 a new tab on right-click.

---
 .../login/pages/login/login.component.html      |  2 +-
 .../app/shared/components/logo.component.html   | 15 +++++++++++++--
 .../app/shared/components/logo.component.scss   |  8 ++------
 .../src/app/shared/components/logo.component.ts | 17 +----------------
 4 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/ui-ngx/src/app/modules/login/pages/login/login.component.html b/ui-ngx/src/app/modules/login/pages/login/login.component.html
index 5b4ec4b12f..25d860256b 100644
--- a/ui-ngx/src/app/modules/login/pages/login/login.component.html
+++ b/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>
diff --git a/ui-ngx/src/app/shared/components/logo.component.html b/ui-ngx/src/app/shared/components/logo.component.html
index 30fae5e46b..655da6da40 100644
--- a/ui-ngx/src/app/shared/components/logo.component.html
+++ b/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>
+
diff --git a/ui-ngx/src/app/shared/components/logo.component.scss b/ui-ngx/src/app/shared/components/logo.component.scss
index 8621cfdbae..131d257502 100644
--- a/ui-ngx/src/app/shared/components/logo.component.scss
+++ b/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 {
-  display: inline-block;
+:host-context(.login-logo) {
   width: 280px;
   height: 60px;
   a {
-    display: inline-block;
-    width: 100%;
-    height: 100%;
     text-decoration: none;
     border: none;
     transform: none;
+
     &:focus {
       outline: 0;
     }
diff --git a/ui-ngx/src/app/shared/components/logo.component.ts b/ui-ngx/src/app/shared/components/logo.component.ts
index 4d53ec6ced..895d6494d4 100644
--- a/ui-ngx/src/app/shared/components/logo.component.ts
+++ b/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');
-  }
 }