chore(console): add customer portal link (#3837)

* feat: add customer portal link

* add customer portal to environment.json from backend

Co-authored-by: Livio Amstutz <[email protected]>

console/src/app/modules/nav/nav.component.html

@@ -70,6 +70,19 @@
                     <span> {{ 'MENU.SETTINGS' | translate }} </span>
                   </div>
                 </a>
+
+                <a
+                  *ngIf="customerPortalLink"
+                  class="nav-item external-link"
+                  [href]="customerPortalLink"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <div class="c_label">
+                    <span> {{ 'MENU.CUSTOMERPORTAL' | translate }} </span>
+                  </div>
+                  <i class="las la-external-link-alt"></i>
+                </a>
               </ng-template>
 
               <template [ngTemplateOutlet]="shortcutKeyRef"></template>

console/src/app/modules/nav/nav.component.scss

@@ -63,6 +63,7 @@
           font-weight: 500;
           margin: 0.25rem 2px;
           white-space: nowrap;
+          position: relative;
 
           .c_label {
             display: flex;
@@ -75,6 +76,16 @@
             }
           }
 
+          &.external-link {
+            padding-right: 2rem;
+
+            i {
+              position: absolute;
+              right: 8px;
+              font-size: 1.2rem;
+            }
+          }
+
           &:hover {
             background: if($is-dark-theme, #ffffff40, #00000010);
           }

console/src/app/modules/nav/nav.component.ts

@@ -1,9 +1,10 @@
 import { animate, keyframes, style, transition, trigger } from '@angular/animations';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { HttpClient } from '@angular/common/http';
 import { Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
-import { BehaviorSubject, map, Observable, Subject } from 'rxjs';
+import { BehaviorSubject, map, Observable, Subject, take } from 'rxjs';
 import { Org } from 'src/app/proto/generated/zitadel/org_pb';
 import { LabelPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
 import { User } from 'src/app/proto/generated/zitadel/user_pb';
@@ -87,6 +88,7 @@ export class NavComponent implements OnDestroy {
   private destroy$: Subject<void> = new Subject();
 
   public BreadcrumbType: any = BreadcrumbType;
+  public customerPortalLink: string = '';
 
   constructor(
     public authenticationService: AuthenticationService,
@@ -94,9 +96,22 @@ export class NavComponent implements OnDestroy {
     public mgmtService: ManagementService,
     private router: Router,
     private breakpointObserver: BreakpointObserver,
+    private http: HttpClient,
     private shortcutService: KeyboardShortcutsService,
   ) {
     this.hideAdminWarn = localStorage.getItem('hideAdministratorWarning') === 'true' ? true : false;
+    this.loadEnvironment();
+  }
+
+  public loadEnvironment(): void {
+    this.http
+      .get('./assets/environment.json')
+      .pipe(take(1))
+      .subscribe((data: any) => {
+        if (data && data.customer_portal) {
+          this.customerPortalLink = data.customer_portal;
+        }
+      });
   }
 
   public toggleAdminHide(): void {