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

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

@@ -1,11 +1,4 @@
-<!--<p>main.component works!</p>-->
-
 <mat-toolbar class="fixed-top">
-  <button mat-raised-button routerLink="home">
-<!--    <img ngSrc="jambotron_logo.svg" height="40" width="135">-->
-    My App
-  </button>
-  <span class="menu-spacer"></span>
   <button mat-raised-button routerLink="generate-image">
     Generate Image
   </button>
@@ -17,54 +10,46 @@
     Add tutorial
   </button>
   }
-  <span class="menu-spacer"></span>
-  @if (showAdminBoard) {
-    <button mat-raised-button routerLink="admin/welcome">
-<!--      <mat-icon>manage_accounts</mat-icon>-->
-      Admin Bord
-    </button>
-  }
-
-  @if (showAdminBoard) {
-    <button mat-raised-button routerLink="admin/system" >
-<!--      <mat-icon>settings_applications</mat-icon>-->
-      System
-    </button>
-  }
 
   <span class="menu-spacer"></span>
-  @if (isLoggedIn) {
-  <button mat-raised-button routerLink="register">
-<!--    <mat-icon>app_registration</mat-icon>-->
-    Register
-  </button>
-  }
+
   @if (!isLoggedIn) {
-  <button mat-raised-button (click)="openDialog('100ms', '5ms')" >
-<!--    <i antIcon type="bell" theme="outline"></i>-->
-<!--    <mat-icon>login</mat-icon>-->
-<!--    <i class="d- f-20" antIcon theme="outline" type="login">Login</i>-->
-  </button>
-  }
-  @if (isLoggedIn) {
-  <button mat-raised-button routerLink="profile" >
-<!--    <mat-icon>account_circle</mat-icon>-->
-    {{ username }}
-  </button>
-    <button mat-raised-button (click)="logout()">
-
-<!--            <i class="d-flex f-20" antIcon theme="outline" type="logout"></i>-->
-      Logout
+    <button matMiniFab matTooltip="Sign Up" aria-label="Sign Up" (click)="openSignupDialog('100ms', '5ms')">
+          <mat-icon>person_add</mat-icon>
     </button>
+  <button matMiniFab matTooltip="Login"  aria-label="Login"  (click)="openLoginDialog('100ms', '5ms')" >
+    <mat-icon>login</mat-icon>
+  </button>
+  }@else {
+  <button matButton="elevated" aria-label="Account" [matMenuTriggerFor]="menu">
+    <mat-icon>account_circle</mat-icon>
+    <mat-label>{{username}}</mat-label>
+  </button>
+    <mat-menu #menu="matMenu">
+      @if (showAdminBoard) {
+      <button mat-menu-item routerLink="admin/welcome">
+        <mat-icon>admin_panel_settings</mat-icon>
+        Admin Panel
+      </button>
+      }
 
+      <button mat-menu-item routerLink="user/user-welcome">
+        <mat-icon>space_dashboard</mat-icon>
+        User tools
+      </button>
+      <button mat-menu-item routerLink="profile">
+        <mat-icon>person</mat-icon>
+        Profile
+      </button>
+
+      <button mat-menu-item  (click)="logout()">
+        <mat-icon>logout</mat-icon>
+        Logout
+      </button>
+    </mat-menu>
   }
-
-
 </mat-toolbar>
-
-
-<!--<app-nav-bar (NavCollapsedMob)="navMobClick()" (NavCollapse)="this.navCollapsed = !this.navCollapsed" />-->
-<div class="router_outlet_padding">
+<div class="router_outlet">
   <router-outlet/>
 </div>
 

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

@@ -12,9 +12,18 @@ mat-toolbar{
   right: 0;
   left: 0;
   z-index: 1000; // Ensure toolbar stays above other content
+  height: 65px;
 }
 .mat-mdc-raised-button:not(:disabled){
   color: rgba(24, 255, 255, 0.96);
   background-color: rgba(24,255,255,0.04);
 }
+.mat-mdc-mini-fab{
+  margin: 5px;
+}
+
+.router_outlet{
+  margin-top: 65px;
+  height: 100%;
+}
 

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;
+}

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

@@ -18,6 +18,11 @@ const MAIN_ROUTES: Routes =[
         loadChildren: () =>
           import('../admin-module/admin.module').then((m) => m.AdminModule),
       },
+      {
+        path: 'user',
+        loadChildren: () =>
+          import('../user-module/user.module').then((m) => m.UserModule),
+      },
       {
         path: 'home',
         component: HomeComponent