Added first app template

frontend/login-counter/src/app/components/header/header.component.ts

@@ -0,0 +1,168 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Router } from '@angular/router';
+import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
+import { MenuItem, PrimeNGConfig } from 'primeng/api';
+import { catchError } from 'rxjs/operators';
+import { AuthService } from 'src/app/services/auth/auth.service';
+import { SettingsService } from 'src/app/services/settings/settings.service';
+import { SpinnerService } from 'src/app/services/spinner/spinner.service';
+import { ThemeService } from 'src/app/services/theme/theme.service';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+  @Output() isSidebarFullWidth: EventEmitter<boolean> = new EventEmitter<boolean>(this.themeService.isSidebarOpen);
+
+  langList: MenuItem[] = [];
+  themeList: MenuItem[] = [];
+  userMenuList: MenuItem[];
+
+  constructor(
+    private authService: AuthService,
+    private router: Router,
+    private themeService: ThemeService,
+    private spinnerService: SpinnerService,
+    private settings: SettingsService,
+    private translateService: TranslateService,
+    private config: PrimeNGConfig
+  ) { }
+
+  ngOnInit(): void {
+    this.translateService.setDefaultLang('en');
+    this.initMenuLists();
+    this.loadLang();
+    this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
+      this.initUserMenuList();
+    });
+  }
+
+  initUserMenuList(): void {
+    this.spinnerService.showSpinner();
+    const mail = this.authService.getEMailFromDecodedToken(this.authService.getDecodedToken());
+    this.authService.getUserByEMail(mail)
+      .pipe(catchError(err => {
+        this.spinnerService.hideSpinner();
+        this.authService.logout();
+        throw err;
+      }))
+      .subscribe(user => {
+        this.spinnerService.hideSpinner();
+
+
+        this.userMenuList = [
+          {
+            label: `${user.firstName} ${user.lastName}`,
+            disabled: true
+          },
+          {
+            separator: true
+          },
+          {
+            label: this.translateService.instant('header.change_password'), command: () => {
+              this.changePassword();
+            },
+            icon: 'pi pi-key'
+          },
+          {
+            label: this.translateService.instant('header.settings'), command: () => {
+              this.userSettings();
+            },
+            icon: 'pi pi-cog'
+          },
+          {
+            label: this.translateService.instant('header.logout'), command: () => {
+              this.logout();
+            },
+            icon: 'pi pi-sign-out'
+          }
+        ];
+      });
+  }
+
+  initMenuLists(): void {
+    this.langList = [
+      {
+        label: 'English', command: () => {
+          this.translate('en');
+          this.setLang('en');
+        },
+      },
+      {
+        label: 'Deutsch', command: () => {
+          this.translate('de');
+          this.setLang('de');
+        },
+      },
+    ];
+
+    this.initUserMenuList();
+
+    this.settings.getThemes().forEach(theme => {
+      this.themeList.push({
+        label: theme.Label,
+        command: () => {
+          this.changeTheme(theme.Name);
+        }
+      });
+    });
+  }
+
+  toggleMenu(): void {
+    this.themeService.setIsMenuOpen(!this.themeService.isSidebarOpen);
+    this.isSidebarFullWidth.emit(this.themeService.isSidebarOpen);
+  }
+
+  changeTheme(name: string): void {
+    this.themeService.setTheme(name);
+  }
+
+  changePassword(): void {
+    this.router.navigate(['/change-password']);
+  }
+
+  userSettings(): void {
+    this.router.navigate(['/user-settings']);
+  }
+
+  logout(): void {
+    this.authService.logout();
+  }
+
+  translate(lang: string) {
+    this.translateService.use(lang);
+    this.translateService.get('primeng').subscribe(res => this.config.setTranslation(res));
+  }
+
+  loadLang(): void {
+    const token = this.authService.getDecodedToken();
+    const mail = this.authService.getEMailFromDecodedToken(token);
+
+    if (!mail) {
+      this.translate('en');
+      return;
+    }
+
+    let lang = localStorage.getItem(`${mail}_lang`);
+    if (!lang) {
+      lang = 'en';
+      this.setLang(lang);
+    }
+    this.translate(lang);
+  }
+
+  setLang(lang: string): void {
+    this.authService.isUserLoggedInAsync().then(result => {
+      if (!result) {
+        return;
+      }
+
+      const token = this.authService.getDecodedToken();
+      const mail = this.authService.getEMailFromDecodedToken(token);
+      localStorage.setItem(`${mail}_lang`, lang);
+    });
+  }
+
+}