Angular 18 - Inventory App Proj Template

angular.json

@@ -10,7 +10,7 @@
       "prefix": "app",
       "schematics": {
         "@schematics/angular:component": {
-          "styleext": "scss"
+          "style": "scss"
         }
       },
       "architect": {
@@ -32,7 +32,9 @@
             ],
             "styles": [
               "src/styles.scss",
-              "src/assets/scss/argon.scss"
+              "src/assets/scss/argon.scss",
+              "src/assets/vendor/nucleo/css/nucleo.css",
+              "src/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css"
             ],
             "scripts": [
               "node_modules/chart.js/dist/Chart.min.js",
@@ -162,7 +164,7 @@
   },
   "schematics": {
     "@schematics/angular:component": {
-      "styleext": "scss"
+      "style": "scss"
     }
   },
   "cli": {

package.json

@@ -8,7 +8,7 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
+    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install --force && npm start"
   },
   "private": true,
   "dependencies": {

src/app/app.module.ts

@@ -17,6 +17,7 @@ import { AngularFireModule } from '@angular/fire/compat';
 import { AngularFireAuthModule } from '@angular/fire/compat/auth';
 import { AngularFirestoreModule } from '@angular/fire/compat/firestore'; 
 import { ToastrModule } from 'ngx-toastr';
+import { StudentLayoutComponent } from './layouts/student-layout/student-layout.component';
 
 
 @NgModule({
@@ -36,7 +37,8 @@ import { ToastrModule } from 'ngx-toastr';
   declarations: [
     AppComponent,
     AdminLayoutComponent,
-    AuthLayoutComponent
+    AuthLayoutComponent,
+    StudentLayoutComponent
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.routing.ts

@@ -5,24 +5,39 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
 import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
+import { AuthGuard } from './guards/auth.guard';
+import { StudentLayoutComponent } from './layouts/student-layout/student-layout.component';
 
 const routes: Routes =[
   {
     path: '',
-    redirectTo: 'login',
+    redirectTo: 'auth/login',
     pathMatch: 'full',
   }, {
-    path: '',
+    path: 'admin',
     component: AdminLayoutComponent,
+    canActivate: [AuthGuard],
     children: [
       {
         path: '',
         loadChildren: () => import('src/app/layouts/admin-layout/admin-layout.module').then(m => m.AdminLayoutModule)
       }
     ]
+  },
+  {
+    path: 'student',
+    component: StudentLayoutComponent,
+    canActivate: [AuthGuard], // Add role guard to check if the user is a student
+    children: [
+      {
+        path: '',
+        loadChildren: () => import('./layouts/student-layout/student-layout.module').then(m => m.StudentLayoutModule)
+      }
+    ]
   }, {
-    path: '',
+    path: 'auth',
     component: AuthLayoutComponent,
+    // canActivate: [AuthGuard],
     children: [
       {
         path: '',
@@ -31,7 +46,7 @@ const routes: Routes =[
     ]
   }, {
     path: '**',
-    redirectTo: 'dashboard'
+    redirectTo: 'auth/login'
   }
 ];
 
@@ -40,7 +55,7 @@ const routes: Routes =[
     CommonModule,
     BrowserModule,
     RouterModule.forRoot(routes,{
-      useHash: true
+      useHash: false
     })
   ],
   exports: [

src/app/components/cards/item/item.component.html

@@ -0,0 +1,8 @@
+<div class="card" style="width: 18rem;">
+    <img class="card-img-top" src="assets/img/theme/img-1-1000x900.jpg" alt="Card image cap">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      <a href="#" class="btn btn-primary">Go somewhere</a>
+    </div>
+  </div>

src/app/components/cards/item/item.component.spec.ts

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

src/app/components/cards/item/item.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-item',
+  templateUrl: './item.component.html',
+  styleUrls: ['./item.component.scss']
+})
+export class ItemComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/components.module.ts

@@ -5,6 +5,7 @@ import { NavbarComponent } from './navbar/navbar.component';
 import { FooterComponent } from './footer/footer.component';
 import { RouterModule } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { ItemComponent } from './cards/item/item.component';
 
 @NgModule({
   imports: [
@@ -15,12 +16,14 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
   declarations: [
     FooterComponent,
     NavbarComponent,
-    SidebarComponent
+    SidebarComponent,
+    ItemComponent
   ],
   exports: [
     FooterComponent,
     NavbarComponent,
-    SidebarComponent
+    SidebarComponent,
+    ItemComponent
   ]
 })
 export class ComponentsModule { }

src/app/components/navbar/navbar.component.html

@@ -48,7 +48,7 @@ <h6 class="text-overflow m-0">Welcome!</h6>
             <span>Support</span>
           </a>
           <div class="dropdown-divider"></div>
-          <a href="#!" class="dropdown-item">
+          <a href="#!" (click)="logout()" class="dropdown-item">
             <i class="ni ni-user-run"></i>
             <span>Logout</span>
           </a>

src/app/components/navbar/navbar.component.ts

@@ -1,36 +1,46 @@
-import { Component, OnInit, ElementRef } from '@angular/core';
-import { ROUTES } from '../sidebar/sidebar.component';
+import { Component, OnInit, ElementRef, Input } from '@angular/core';
+// import { ROUTES } from '../sidebar/sidebar.component';
 import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
 import { Router } from '@angular/router';
+import { AuthService } from 'src/app/services/auth.service';
+import { RouteInfo } from 'src/app/models/routes.model';
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss']
 })
 export class NavbarComponent implements OnInit {
+  // @Input() routes: RouteInfo[];
+
   public focus;
   public listTitles: any[];
   public location: Location;
-  constructor(location: Location,  private element: ElementRef, private router: Router) {
+  constructor(location: Location,  private element: ElementRef, private router: Router, private authService: AuthService) {
     this.location = location;
   }
 
   ngOnInit() {
-    this.listTitles = ROUTES.filter(listTitle => listTitle);
+    // if (this.routes) {
+    //   this.listTitles = this.routes.filter(listTitle => listTitle);
+    // } else {
+    //   this.listTitles = ROUTES.filter(listTitle => listTitle);
+    // }
+
   }
   getTitle(){
-    var titlee = this.location.prepareExternalUrl(this.location.path());
-    if(titlee.charAt(0) === '#'){
-        titlee = titlee.slice( 1 );
+    const titlee = this.location.prepareExternalUrl(this.location.path()); //eg. /student/dashboard
+    const titleArr = titlee.split("/");
+    let title = "Dashboard";
+    if (titleArr.length > 0) {
+      title = titleArr.pop();
     }
+    return title; // default  is Dashboard
+  }
 
-    for(var item = 0; item < this.listTitles.length; item++){
-        if(this.listTitles[item].path === titlee){
-            return this.listTitles[item].title;
-        }
-    }
-    return 'Dashboard';
+  logout(){
+    this.authService.logout();
+    this.router.navigate(['/auth/login'])
   }
 
 }

src/app/components/sidebar/sidebar.component.ts

@@ -1,20 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { RouteInfo } from 'src/app/models/routes.model';
 
-declare interface RouteInfo {
-    path: string;
-    title: string;
-    icon: string;
-    class: string;
-}
+// declare interface RouteInfo {
+//     path: string;
+//     title: string;
+//     icon: string;
+//     class: string;
+// }
 export const ROUTES: RouteInfo[] = [
-    { path: '/dashboard', title: 'Dashboard',  icon: 'ni-tv-2 text-primary', class: '' },
-    { path: '/icons', title: 'Icons',  icon:'ni-planet text-blue', class: '' },
-    { path: '/maps', title: 'Maps',  icon:'ni-pin-3 text-orange', class: '' },
-    { path: '/user-profile', title: 'User profile',  icon:'ni-single-02 text-yellow', class: '' },
-    { path: '/tables', title: 'Tables',  icon:'ni-bullet-list-67 text-red', class: '' },
-    { path: '/login', title: 'Login',  icon:'ni-key-25 text-info', class: '' },
-    { path: '/register', title: 'Register',  icon:'ni-circle-08 text-pink', class: '' }
+    { path: '/admin/dashboard', title: 'Dashboard',  icon: 'ni-tv-2 text-primary', class: '' },
+    { path: '/admin/icons', title: 'Icons',  icon:'ni-planet text-blue', class: '' },
+    { path: '/admin/maps', title: 'Maps',  icon:'ni-pin-3 text-orange', class: '' },
+    { path: '/admin/user-profile', title: 'User profile',  icon:'ni-single-02 text-yellow', class: '' },
+    { path: '/admin/tables', title: 'Tables',  icon:'ni-bullet-list-67 text-red', class: '' },
+    { path: '/admin/login', title: 'Login',  icon:'ni-key-25 text-info', class: '' },
+    { path: '/admin/register', title: 'Register',  icon:'ni-circle-08 text-pink', class: '' }
 ];
 
 @Component({
@@ -26,13 +27,17 @@ export class SidebarComponent implements OnInit {
 
   public menuItems: any[];
   public isCollapsed = true;
+  @Input() routes : RouteInfo[];
 
   constructor(private router: Router) { }
 
+
   ngOnInit() {
-    this.menuItems = ROUTES.filter(menuItem => menuItem);
+    if (this.routes) {
+      this.menuItems = this.routes.filter(menuItem => menuItem);
+    }
     this.router.events.subscribe((event) => {
       this.isCollapsed = true;
-   });
+    });
   }
 }

src/app/guards/auth.guard.ts

@@ -0,0 +1,71 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthService } from '../services/auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(private authService: AuthService, private router: Router) {}
+
+  canActivate(route: ActivatedRouteSnapshot): boolean {
+    const isLoggedIn = this.authService.isLoggedIn();
+    const userRole = this.authService.getUserRole();
+    const routePath = route.routeConfig?.path;
+
+    if (routePath === 'logout') {
+      // Handle logout
+      this.authService.logout();
+      this.router.navigate(['/auth/login']);
+      return false; // Prevent further navigation
+    }
+
+    if (isLoggedIn) {
+      // Redirect logged-in users away from login page
+      if (routePath === 'auth/login') {
+        this.router.navigate([`/${userRole}/dashboard`]);
+        return false;
+      }
+
+      // Allow access to routes based on user role
+      if (routePath === userRole) {
+        return true;
+      }
+
+      // Redirect to the respective dashboard if unauthorized
+      this.router.navigate([`/${userRole}/dashboard`]);
+      return false;
+    } else {
+      // Redirect not-logged-in users to the login page
+      if (routePath !== 'auth/login') {
+        this.router.navigate(['/auth/login']);
+      }
+      return false;
+    }
+
+    // const userRole = this.authService.getUserRole(); // Retrieve the user role
+    // const isLoggedIn = this.authService.isLoggedIn(); // Check if the user is logged in
+
+    // if (isLoggedIn) {
+    //   // If the user is logged in, check their role and redirect if necessary
+    //   if (route.routeConfig?.path === 'student' && userRole === 'student') {
+    //     return true; // Allow access to student route
+    //   } else if (userRole === 'admin') {
+    //     this.router.navigate(['/admin/dashboard']); // Redirect admin to admin dashboard
+    //     return false; // Block the current navigation
+    //   } else if (userRole === 'custodian') {
+    //     this.router.navigate(['/custodian/dashboard']); // Redirect custodian to custodian dashboard
+    //     return false; // Block the current navigation
+    //   } else {
+    //     // Handle any other roles if necessary
+    //     return false;
+    //   }
+    // } else {
+    //   // If not logged in, redirect to the login page
+    //   this.router.navigate(['/auth/login']);
+    //   return false; // Block access to the route
+    // }
+  }
+
+}