Add user module routing, integrate markdown support, and enhance dialog functionality

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

@@ -3,7 +3,7 @@ import {Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit} from '@angular/core';
 
 import {Router, RouterLink, RouterOutlet} from '@angular/router';
 import {MatToolbar} from '@angular/material/toolbar';
-import {MatButton} from '@angular/material/button';
+import {MatButton, MatFabButton, MatMiniFabButton} from '@angular/material/button';
 import {IconDirective, IconService} from '@ant-design/icons-angular';
 import {MatDialog} from '@angular/material/dialog';
 import {Subscription} from 'rxjs';
@@ -11,16 +11,13 @@ 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';
-import {
-  ArrowRightOutline, BellOutline,
-  CheckCircleOutline, CommentOutline, EditOutline,
-  GiftOutline, GithubOutline, LockOutline, LogoutOutline,
-  MessageOutline,
-  PhoneOutline, ProfileOutline, QuestionCircleOutline,
-  SettingOutline, UnorderedListOutline, UserOutline, WalletOutline
-} from '@ant-design/icons-angular/icons';
-import {BrowserModule} from '@angular/platform-browser';
+
 import {CommonModule} from '@angular/common';
+import {MatIcon} from '@angular/material/icon';
+import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu';
+import {MatTooltip} from '@angular/material/tooltip';
+import {DialogSignupComponent} from '../../components/dialog-signup.component/dialog-signup.component';
+import {MatLabel} from '@angular/material/input';
 
 @Component({
   selector: 'app-main.component',
@@ -31,7 +28,15 @@ import {CommonModule} from '@angular/common';
     RouterLink,
     IconDirective,
     RouterOutlet,
-    CommonModule
+    CommonModule,
+    MatIcon,
+    MatMiniFabButton,
+    MatMenuTrigger,
+    MatMenu,
+    MatMenuItem,
+    MatTooltip,
+    MatLabel,
+    MatFabButton
 
   ],
   schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
@@ -45,7 +50,9 @@ export class MainComponent implements OnInit{
 
   readonly dialog = inject(MatDialog);
   //private  authService = new AuthService(provideHttpClient())
-  public dialogData : DialogData = {password: "", username: ""};
+  public dialogLoginData : DialogLoginData = {password: "", username: ""};
+  public dialogSignupData : DialogSignupData = {password: "", username: "", email: "", confirmPassword: ""};
+
 
   private roles: string[] = [];
   isLoggedIn = false;
@@ -54,38 +61,14 @@ export class MainComponent implements OnInit{
   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);
-  private iconService = inject(IconService);
-
-
 
   constructor(private router: Router) {
-    this.iconService.addIcon(
-      ...[
-        CheckCircleOutline,
-        GiftOutline,
-        MessageOutline,
-        SettingOutline,
-        PhoneOutline,
-        LogoutOutline,
-        UserOutline,
-        EditOutline,
-        ProfileOutline,
-        QuestionCircleOutline,
-        LockOutline,
-        CommentOutline,
-        UnorderedListOutline,
-        ArrowRightOutline,
-        BellOutline,
-        GithubOutline,
-        WalletOutline
-      ]
-    );
+
   }
   goToHome() {
     this.router.navigate(['main/home']);
@@ -161,49 +144,99 @@ export class MainComponent implements OnInit{
     });
   }
 
-  openDialog(enterAnimationDuration: string, exitAnimationDuration: string) {
+  openLoginDialog(enterAnimationDuration: string, exitAnimationDuration: string) {
 
-    let dialogRef = this.dialog.open(DialogComponent, {
+    let dialogLoginRef = this.dialog.open(DialogComponent, {
       width: '350px',
       enterAnimationDuration,
       exitAnimationDuration,
-      data: {username: this.dialogData.username, password: this.dialogData.password}
+      data: {username: this.dialogLoginData.username, password: this.dialogLoginData.password}
     });
+    dialogLoginRef.componentInstance.signupClicked.subscribe(result => {
+      dialogLoginRef.close();
+      this.openSignupDialog(enterAnimationDuration, exitAnimationDuration);
+    })
 
-    dialogRef.afterClosed().subscribe(result => {
-      console.log('The dialog was closed');
-      if(result== null){
-        return;
-      }
-      this.dialogData = result;
+    const dialogSubmitSubscription = dialogLoginRef.componentInstance.loginClicked
+      .subscribe(result => {
+        console.log('Got the data!', 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();
-          this.refreshToolbar();
-        },
-        err => {
-          this.errorMessage = err.error.message;
-          this.isLoginFailed = true;
+        if(result== null){
+          return;
         }
-      );
+        this.dialogLoginData = result;
+
+        this.authService.login(this.dialogLoginData.username, this.dialogLoginData.password).subscribe(
+          data => {
+            this.storageService.saveToken(data.accessToken);
+            this.storageService.saveUser(data);
+
+            this.isLoggedIn = true;
+            let user = this.storageService.getUser();
+            this.roles = user.roles;
+
+            this.refreshToolbar();
+            dialogLoginRef.close()
+            this.router.navigate(['main/user/user-welcome']);
+          },
+          err => {
+            dialogLoginRef.componentInstance.openLoginFailedSnackBar(err.error.message);
+          }
+        );
+
+        // do something here with the data
+        dialogSubmitSubscription.unsubscribe();
+      });
+  }
+
+  openSignupDialog(enterAnimationDuration: string, exitAnimationDuration: string) {
+
+    let dialogSignupRef = this.dialog.open(DialogSignupComponent, {
+      width: '350px',
+      enterAnimationDuration,
+      exitAnimationDuration,
+      data: {username: this.dialogLoginData.username, password: this.dialogLoginData.password}
     });
 
-  }
-  reloadPage(): void {
-    window.location.reload();
-  }
+    const dialogloginSubscription = dialogSignupRef.componentInstance.loginClicked.subscribe(result => {
+      dialogSignupRef.close();
+      this.openLoginDialog(enterAnimationDuration, exitAnimationDuration);
+    })
 
+    const dialogSubmitSubscription = dialogSignupRef.componentInstance.signupClicked
+      .subscribe(result => {
+        console.log('Got the data!', result);
+
+        if (result == null) {
+          return;
+        }
+        this.dialogSignupData = result;
+
+        this.authService.register(this.dialogSignupData.username, this.dialogSignupData.email, this.dialogSignupData.password).subscribe(
+          data => {
+            console.log(data);
+            dialogSignupRef.componentInstance.openSignupSuccessSnackBar(data.message)
+            dialogSignupRef.close();
+          },
+          err => {
+            dialogSignupRef.componentInstance.openSignupFailedSnackBar(err.error.message);
+          }
+        );
+
+        // do something here with the data
+        dialogloginSubscription.unsubscribe();
+        dialogSubmitSubscription.unsubscribe();
+      });
+  }
 }
-export interface DialogData {
+export interface DialogLoginData {
   username: string;
   password: string;
 }
+
+export interface DialogSignupData {
+  email: string;
+  username: string;
+  password: string;
+  confirmPassword: string;
+}