Add new components, styles, and services for user management and navigation

jambotron-ui/src/app/main-module/main.component/main.component.ts

@@ -0,0 +1,163 @@
+import {Component, CUSTOM_ELEMENTS_SCHEMA, inject} from '@angular/core';
+//import {NavigationComponent} from '../navigation/navigation.component';
+import {NgClass} from '@angular/common';
+import {NavigationComponent} from '../../layouts/admin-layout/navigation/navigation.component';
+import {RouterLink, RouterOutlet} from '@angular/router';
+import {BreadcrumbComponent} from '../../components/breadcrumb/breadcrumb.component';
+import {NavBarComponent} from '../../layouts/admin-layout/nav-bar/nav-bar.component';
+import {MatToolbar} from '@angular/material/toolbar';
+import {MatButton} from '@angular/material/button';
+import {IconDirective} from '@ant-design/icons-angular';
+import {MatDialog} from '@angular/material/dialog';
+import {Subscription} from 'rxjs';
+import {TokenStorageService} from '../../services/token-storage.service';
+import {AuthService} from '../../services/auth.service';
+import {EventBusService} from '../../_shared/event-bus.service';
+import {DialogComponent} from '../../components/dialog/dialog.component';
+
+@Component({
+  selector: 'app-main.component',
+  imports: [
+    NavBarComponent,
+    MatToolbar,
+    MatButton,
+    RouterLink,
+    IconDirective,
+    RouterOutlet
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
+  templateUrl: './main.component.html',
+  styleUrl: './main.component.scss'
+})
+export class MainComponent {
+  // public props
+  navCollapsed: boolean = false;
+  navCollapsedMob: boolean = false;
+
+  readonly dialog = inject(MatDialog);
+  //private  authService = new AuthService(provideHttpClient())
+  public dialogData : DialogData = {password: "", username: ""};
+
+  private roles: string[] = [];
+  isLoggedIn = false;
+  showAdminBoard = false;
+  showModeratorBoard = false;
+  username?: string;
+
+  eventBusSub?: Subscription;
+  private errorMessage: any;
+  private isLoginFailed: boolean = false;
+
+  private storageService: TokenStorageService = inject(TokenStorageService);
+  private authService: AuthService = inject(AuthService);
+  private eventBusService: EventBusService = inject(EventBusService);
+
+  constructor(
+
+  ) {}
+
+  ngOnInit(): void {
+    this.isLoggedIn = this.storageService.isLoggedIn();
+
+    if (this.isLoggedIn) {
+      const user = this.storageService.getUser();
+      this.roles = user.roles;
+
+      this.showAdminBoard = true;//this.roles.includes('ROLE_ADMIN');
+      this.showModeratorBoard = this.roles.includes('ROLE_MODERATOR');
+
+      this.username = user.username;
+    }
+
+    this.eventBusSub = this.eventBusService.on('logout', () => {
+      this.logout();
+    });
+  }
+
+  // public method
+  navMobClick() {
+    if (this.navCollapsedMob && !document.querySelector('app-navigation.pc-sidebar')?.classList.contains('mob-open')) {
+      this.navCollapsedMob = !this.navCollapsedMob;
+      setTimeout(() => {
+        this.navCollapsedMob = !this.navCollapsedMob;
+      }, 100);
+    } else {
+      this.navCollapsedMob = !this.navCollapsedMob;
+    }
+    if (document.querySelector('app-navigation.pc-sidebar')?.classList.contains('navbar-collapsed')) {
+      document.querySelector('app-navigation.pc-sidebar')?.classList.remove('navbar-collapsed');
+    }
+  }
+
+  handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this.closeMenu();
+    }
+  }
+
+  closeMenu() {
+    if (document.querySelector('app-navigation.pc-sidebar')?.classList.contains('mob-open')) {
+      document.querySelector('app-navigation.pc-sidebar')?.classList.remove('mob-open');
+    }
+  }
+
+
+  logout(): void {
+    this.authService.logout().subscribe({
+      next: res => {
+        console.log(res);
+        this.storageService.clean();
+
+        window.location.reload();
+      },
+      error: err => {
+        console.log(err);
+      }
+    });
+  }
+
+  openDialog(enterAnimationDuration: string, exitAnimationDuration: string) {
+
+    let dialogRef = this.dialog.open(DialogComponent, {
+      width: '350px',
+      enterAnimationDuration,
+      exitAnimationDuration,
+      data: {username: this.dialogData.username, password: this.dialogData.password}
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+      if(result== null){
+        return;
+      }
+      this.dialogData = result;
+
+      this.authService.login(this.dialogData.username, this.dialogData.password).subscribe(
+        data => {
+          this.storageService.saveToken(data.accessToken);
+          this.storageService.saveUser(data);
+
+          this.isLoginFailed = false;
+          this.isLoggedIn = true;
+          let user = this.storageService.getUser();
+          this.roles = user.roles;
+          //this.username = user.username;
+          this.reloadPage();
+        },
+        err => {
+          this.errorMessage = err.error.message;
+          this.isLoginFailed = true;
+        }
+      );
+    });
+
+  }
+  reloadPage(): void {
+    window.location.reload();
+  }
+
+}
+export interface DialogData {
+  username: string;
+  password: string;
+}