feat: rehauled console (#3525)

* new console

* move npm ci to angular build

* rel path for assets

* local grpc copy

* login policy, rm clear views, features rel path

* lock

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

console/src/app/modules/theme-setting/theme-setting.component.html

@@ -0,0 +1,11 @@
+<button mat-stroked-button class="theme-setting-button" (click)="setTheme()">
+  <i class="las la-moon" *ngIf="darkTheme"></i>
+  <i class="lar la-sun" *ngIf="darkTheme === false"></i>
+  <span>{{(darkTheme ? 'FOOTER.THEME.DARK' : 'FOOTER.THEME.LIGHT') | translate}}</span>
+  <svg _ngcontent-tfd-c127="" xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+    aria-hidden="true">
+    <path _ngcontent-tfd-c127="" fill-rule="evenodd"
+      d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+      clip-rule="evenodd"></path>
+  </svg>
+</button>

console/src/app/modules/theme-setting/theme-setting.component.scss

@@ -0,0 +1,12 @@
+@use '@angular/material' as mat;
+
+@mixin theme-setting($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $is-dark-theme: map-get($theme, is-dark);
+  $back: map-get($background, background);
+
+  .theme-setting-button {
+    background-color: if($is-dark-theme, #ffffff10, #fff) !important;
+  }
+}

console/src/app/modules/theme-setting/theme-setting.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ThemeSettingComponent } from './theme-setting.component';
+
+describe('ThemeSettingComponent', () => {
+    let component: ThemeSettingComponent;
+    let fixture: ComponentFixture<ThemeSettingComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [ThemeSettingComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ThemeSettingComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

console/src/app/modules/theme-setting/theme-setting.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import { ThemeService } from 'src/app/services/theme.service';
+
+@Component({
+  selector: 'cnsl-theme-setting',
+  templateUrl: './theme-setting.component.html',
+  styleUrls: ['./theme-setting.component.scss'],
+})
+export class ThemeSettingComponent implements OnDestroy {
+  public darkTheme: boolean = true;
+  private destroy$: Subject<void> = new Subject();
+  constructor(public themeService: ThemeService) {
+    themeService.isDarkTheme.pipe(takeUntil(this.destroy$)).subscribe((isDark) => (this.darkTheme = isDark));
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  public change(event: any): void {
+    if (event.target) {
+      const checked = event.target.checked;
+      this.themeService.setDarkTheme(checked);
+    }
+  }
+
+  public setTheme(): void {
+    this.themeService.setDarkTheme(!this.darkTheme);
+  }
+}

console/src/app/modules/theme-setting/theme-setting.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { ThemeSettingComponent } from './theme-setting.component';
+
+@NgModule({
+  declarations: [ThemeSettingComponent],
+  imports: [CommonModule, FormsModule, MatButtonModule, MatMenuModule, TranslateModule],
+  exports: [ThemeSettingComponent],
+})
+export class ThemeSettingModule {}