(F) Add error pages

Clinics.Frontend/src/app/app-routing.module.ts

@@ -3,6 +3,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
 import { RoleGuard } from './services/authentication/guards/role-guard';
 import { Roles } from './classes/Authentication/roles';
+import { ForbiddenComponent } from './components/errors/forbidden/forbidden.component';
+import { NotFoundComponent } from './components/errors/not-found/not-found.component';
 
 const routes: Routes = [
   {
@@ -16,6 +18,17 @@ const routes: Routes = [
     component: HomeComponent,
     canActivate: [RoleGuard],
     data: { role: Roles.NotRegistered }
+  },
+  {
+    path: 'errors/forbidden',
+    component: ForbiddenComponent,
+    canActivate: [RoleGuard],
+    data: { role: Roles.NotRegistered }
+  },
+  // Everything else
+  {
+    path: '**',
+    component: NotFoundComponent
   }
 ];
 @NgModule({

Clinics.Frontend/src/app/app.module.ts

@@ -16,6 +16,8 @@ import { FormsModule } from '@angular/forms';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { AuthenticationService } from './services/authentication/authentication.service';
 import { AuthenticationInterceptor } from './services/authentication/interceptor/authentication.interceptor';
+import { ForbiddenComponent } from './components/errors/forbidden/forbidden.component';
+import { NotFoundComponent } from './components/errors/not-found/not-found.component';
 
 
 @NgModule({
@@ -46,7 +48,9 @@ import { AuthenticationInterceptor } from './services/authentication/interceptor
     HeaderComponent,
     FooterComponent,
     HomeComponent,
-    LoginFormComponent
+    LoginFormComponent,
+    ForbiddenComponent,
+    NotFoundComponent
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/components/errors/forbidden/forbidden.component.html

+<div class="cutom-child text-center" style="padding: 6em;">
+    <i class="bi bi-exclamation-triangle-fill text-danger" style="font-size: 4em;"></i>
+    <h1 class="text-danger text-center" style="font-family: Cairo;">خطأ: لا يمكنك الوصول إلى الصفحة التي طلبتها</h1>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/errors/forbidden/forbidden.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-forbidden',
+  templateUrl: './forbidden.component.html',
+  styleUrl: './forbidden.component.css'
+})
+export class ForbiddenComponent {
+
+}

Clinics.Frontend/src/app/components/errors/not-found/not-found.component.html

+<div class="cutom-child text-center" style="padding: 6em;">
+    <i class="bi bi-exclamation-triangle-fill text-danger" style="font-size: 4em;"></i>
+    <h1 class="text-danger text-center" style="font-family: Cairo;">خطأ: الصفحة المطلوبة غير موجودة</h1>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/errors/not-found/not-found.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-not-found',
+  templateUrl: './not-found.component.html',
+  styleUrl: './not-found.component.css'
+})
+export class NotFoundComponent {
+
+}

Clinics.Frontend/src/app/components/template/layout/layout.component.css

+/* #region Custom */
+.custom-parent {
+    display: flex;
+    flex-direction:column;
+    min-height:100vh;
+}
+
+app-footer {
+    margin-top: auto;
+}
+/* #endregion */
+
 /* #region General */
 ::ng-deep .custom-child{
     color: var(--default-color);

Clinics.Frontend/src/app/components/template/layout/layout.component.html

-<app-header class="sticky-top" [userData]="userData"></app-header>
+<div class="custom-parent">
+    <app-header class="sticky-top" [userData]="userData"></app-header>
 
-<router-outlet></router-outlet>
+    <router-outlet></router-outlet>
+    
+    <app-footer></app-footer>
+</div>
 
-<app-footer></app-footer>
\ No newline at end of file

Clinics.Frontend/src/app/services/authentication/guards/role-guard.ts

 import { Injectable } from '@angular/core';
-import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 import { AuthenticationService } from '../authentication.service';
 import { Roles } from '../../../classes/Authentication/roles';
 import { UserData } from '../../../classes/Authentication/user-data';
@@ -9,22 +9,34 @@ import { UserData } from '../../../classes/Authentication/user-data';
 })
 export class RoleGuard implements CanActivate {
 
-  constructor(private authenticationService: AuthenticationService) { }
+  constructor(private authenticationService: AuthenticationService, private router: Router) { }
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
     const userData: UserData | null = this.authenticationService.getUserData();
     const requiredRole: string = route.data['role'];
 
+    // No required role
     if (!requiredRole)
         return true;
 
+    // No required role
     if (requiredRole === Roles.NotRegistered)
         return true;
 
+    // Reauired role, but not registered user
     if (!userData)
+    {
+      this.router.navigate(["errors/forbidden"]);
       return false;
+    }
 
-    return userData.role === requiredRole;
+    if (userData.role !== requiredRole)
+    {
+      this.router.navigate(["errors/forbidden"]);
+      return false;
+    }
+    
+    return true;
     
   }