Feature/architecture upgrade (#16)

Fixed the Dockerfile, seed data and additional fields in Contact Form

Author: nitin27may

.env.prod

@@ -0,0 +1,22 @@
+# .env
+ENVIRONMENT=Production
+
+# SQL Server Connection
+SQL_SERVER=mssql
+SQL_DATABASE=Contacts
+SQL_USER=sa
+SQL_PASSWORD=PasYourPassword123
+
+# JWT Settings
+JWT_SECRET=THIS  USED TO SIGN AND VERIFY JWT TOKENS, REPLACE IT WITH YOUR OWN SECRET, IT CAN BE ANY STRING
+JWT_ISSUER=http://localhost
+JWT_AUDIENCE=http://localhost
+PASSWORD_RESET_URL=http://localhost/reset-password/
+
+# SMTP Settings
+SMTP_SERVER=smtp.office365.com
+SMTP_PORT=587
+SMTP_USERNAME=nitin.singh21@hotmail.com
+SMTP_PASSWORD=Sh@kti009
+SMTP_FROM_EMAIL=nitin.singh21@hotmail.com
+SMTP_ENABLE_SSL=true

README.md

@@ -20,6 +20,8 @@ Stay tuned and watch this repository for the latest updates!
 
 To understand this project in-depth, refer to our detailed series of articles on Clean Architecture. This series explains the architectural decisions, setup processes, and best practices used throughout this project.
 
+# Work in Progress
+
 1. [Clean Architecture: Introduction to the Project Structure]() - High-level structure and role of each layer.
 2. [Clean Architecture: Implementing AutoMapper for DTO Mapping and Audit Logging]() - Utilizing AutoMapper to handle data mapping and audit tracking.
 3. [Clean Architecture: Validating Inputs with FluentValidation]() - Ensuring robust input validation using FluentValidation.
@@ -58,20 +60,22 @@ A complete backend and frontend project structure to build on, with login, user
 - [ ] Docker Debug mode with hot reload for the API and UI
 - [ ] Docker Production version
 
-
 ## Architecture
 The project is structured with Clean Architecture principles, separating the solution into distinct layers to ensure scalability, maintainability, and testability. This includes a modular design with API, Application, Domain, and Infrastructure layers.
 
 ![](documents/CleanArchitecture.png)
 
+## Containers
+![](documents/architecture.png)
+
 ## Quick Start
 To quickly start the application, clone the repository and run Docker Compose:
 
 ```
   git clone https://github.com/nitin27may/clean-architecture-docker-dotnet-angular.git angular-dotnet
   cd angular-dotnet 
   //rename .env.example to .env 
-  docker-compose -f docker-compose.yml -f docker-compose.override.yml up
+  docker-compose up
 ```
 
 **Note** I have used SMTP send function, please update the account details
@@ -121,8 +125,8 @@ It contains sample for:
 8. Complete CRUD example for Contact
 
 
-**[Dockerfile for production](/Api/Dockerfile)**
-**[Dockerfile for development](/Api/debug.dockerfile)**
+**[Dockerfile for production](/backend/src/Dockerfile)**
+**[Dockerfile for development](/backend/src/Debug.Dockerfile)**
 
 
 ## Getting started

backend/scripts/seed-data.sql

@@ -193,7 +193,7 @@ BEGIN
 	INSERT [dbo].[Operations]
 		([Id], [Name], [Description], [CreatedOn], [CreatedBy], [UpdatedOn], [UpdatedBy])
 	VALUES
-		(N'09be3f29-6429-4089-a2a9-a17efe46cd7b', N'Write', N'Write', CAST(N'2024-08-24T02:56:23.6635113+00:00' AS DateTimeOffset), N'26402b6c-ebdd-44c3-9188-659a134819cb', NULL, NULL)
+		(N'09be3f29-6429-4089-a2a9-a17efe46cd7b', N'Create', N'Create', CAST(N'2024-08-24T02:56:23.6635113+00:00' AS DateTimeOffset), N'26402b6c-ebdd-44c3-9188-659a134819cb', NULL, NULL)
 
 END;
 GO
@@ -509,7 +509,7 @@ BEGIN
 	INSERT [dbo].[Users]
 		([Id], [FirstName], [LastName], [UserName], [Email], [Mobile], [Password], [CreatedOn], [Createdby], [UpdatedOn], [UpdatedBy])
 	VALUES
-		(N'424ffb80-05bf-43f8-8814-2772a5de2543', N'Sachin', N'Singh', N'sachin@gmail.com', N'sachin@gmail.com', 9833364, N'AQAAAAIAAYagAAAAEC1iNqNI7oqJKNcpJ+kYreWvBzjMxE/FWhfoDXzP5CoV60u6JHm5PwHIb3w7K7lWxw==', CAST(N'2024-09-05T14:48:17.0399044+00:00' AS DateTimeOffset), N'00000000-0000-0000-0000-000000000000', NULL, NULL)
+		(N'424ffb80-05bf-43f8-8814-2772a5de2543', N'Sachin', N'Singh', N'reader@gmail.com', N'reader@gmail.com', 9833364, N'AQAAAAIAAYagAAAAEC1iNqNI7oqJKNcpJ+kYreWvBzjMxE/FWhfoDXzP5CoV60u6JHm5PwHIb3w7K7lWxw==', CAST(N'2024-09-05T14:48:17.0399044+00:00' AS DateTimeOffset), N'00000000-0000-0000-0000-000000000000', NULL, NULL)
 
 	INSERT [dbo].[Users]
 		([Id], [FirstName], [LastName], [UserName], [Email], [Mobile], [Password], [CreatedOn], [Createdby], [UpdatedOn], [UpdatedBy])
@@ -519,7 +519,7 @@ BEGIN
 	INSERT [dbo].[Users]
 		([Id], [FirstName], [LastName], [UserName], [Email], [Mobile], [Password], [CreatedOn], [Createdby], [UpdatedOn], [UpdatedBy])
 	VALUES
-		(N'3aa35df1-2578-4ed3-a93b-8b8eb955499e', N'Vikram', N'Singh', N'vikram@gmail.com', N'vikram@gmail.com', 9833364, N'AQAAAAIAAYagAAAAEC1iNqNI7oqJKNcpJ+kYreWvBzjMxE/FWhfoDXzP5CoV60u6JHm5PwHIb3w7K7lWxw==', CAST(N'2024-08-28T20:29:02.2362893+00:00' AS DateTimeOffset), N'00000000-0000-0000-0000-000000000000', NULL, NULL)
+		(N'3aa35df1-2578-4ed3-a93b-8b8eb955499e', N'Vikram', N'Singh', N'editor@gmail.com', N'editor@gmail.com', 9833364, N'AQAAAAIAAYagAAAAEC1iNqNI7oqJKNcpJ+kYreWvBzjMxE/FWhfoDXzP5CoV60u6JHm5PwHIb3w7K7lWxw==', CAST(N'2024-08-28T20:29:02.2362893+00:00' AS DateTimeOffset), N'00000000-0000-0000-0000-000000000000', NULL, NULL)
 
 END;
 GO

backend/src/Contact.Api/Core/Middleware/CustomAuthorizationPolicyProvider.cs

@@ -0,0 +1,47 @@
+using Contact.Api.Core.Authorization;
+using Contact.Application.Interfaces;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.Extensions.Options;
+
+namespace Contact.Api.Core.Middleware;
+public class CustomAuthorizationPolicyProvider : IAuthorizationPolicyProvider
+{
+    private readonly DefaultAuthorizationPolicyProvider _fallbackPolicyProvider;
+    private readonly IServiceProvider _serviceProvider;
+
+    public CustomAuthorizationPolicyProvider(IOptions<AuthorizationOptions> options, IServiceProvider serviceProvider)
+    {
+        _fallbackPolicyProvider = new DefaultAuthorizationPolicyProvider(options);
+        _serviceProvider = serviceProvider;
+    }
+
+    public async Task<AuthorizationPolicy> GetPolicyAsync(string policyName)
+    {
+        // Use a scope to resolve scoped services
+        using (var scope = _serviceProvider.CreateScope())
+        {
+            var permissionService = scope.ServiceProvider.GetRequiredService<IPermissionService>();
+            var permissionMappings = await permissionService.GetAllPageOperationMappingsAsync();
+
+            if (permissionMappings.Any(mapping => $"{mapping.PageName}.{mapping.OperationName}Policy" == policyName))
+            {
+                var policy = new AuthorizationPolicyBuilder();
+                policy.AddRequirements(new PermissionRequirement(policyName));
+                return policy.Build();
+            }
+        }
+
+        // Fallback to the default provider for other policies
+        return await _fallbackPolicyProvider.GetPolicyAsync(policyName);
+    }
+
+    public Task<AuthorizationPolicy> GetDefaultPolicyAsync()
+    {
+        return _fallbackPolicyProvider.GetDefaultPolicyAsync();
+    }
+
+    public Task<AuthorizationPolicy> GetFallbackPolicyAsync()
+    {
+        return _fallbackPolicyProvider.GetFallbackPolicyAsync();
+    }
+}

backend/src/Contact.Api/Program.cs

@@ -57,22 +57,10 @@
         //    },
         //};
     });
-builder.Services.AddAuthorization(options =>
-{
-    // Dynamically add policies based on permissions
-    var permissionService = builder.Services.BuildServiceProvider().GetRequiredService<IPermissionService>();
-    var permissionMappings = permissionService.GetAllPageOperationMappingsAsync().Result;
 
-    foreach (var mapping in permissionMappings)
-    {
-        var policyName = $"{mapping.PageName}.{mapping.OperationName}Policy";
-        options.AddPolicy(policyName, policy =>
-        {
-            policy.Requirements.Add(new PermissionRequirement(policyName));
-        });
-    }
-});
-builder.Services.AddSingleton<IAuthorizationHandler, PermissionHandler>();
+builder.Services.AddSingleton<IAuthorizationPolicyProvider, CustomAuthorizationPolicyProvider>();
+builder.Services.AddScoped<IAuthorizationHandler, PermissionHandler>();
+
 
 
 builder.Services.AddControllers();

backend/src/Contact.Application/Services/UserService.cs

@@ -108,7 +108,6 @@ public async Task<User> Create(CreateUser createUser)
     }
 
 
-
     public async Task<bool> Delete(Guid id)
     {
         return await _userRepository.Delete(id);
@@ -272,7 +271,6 @@ public async Task<bool> ForgotPassword(string email)
         return true;
     }
 
-
     public async Task<bool> ResetPassword(ResetPassword resetPasswordRequest)
     {
         // Step 1: Validate the reset token // token send as part of email

backend/src/Dockerfile

@@ -9,12 +9,11 @@ RUN groupadd -g 2000 dotnet \
     && useradd -m -u 2000 -g 2000 dotnet
 USER dotnet
 
-EXPOSE 8081
-
 
 # This stage is used to build the service project
-FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
+FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build
 ARG BUILD_CONFIGURATION=Release
+ARG DOTNET_SKIP_POLICY_LOADING=true
 WORKDIR /src
 COPY ["Contact.Api/Contact.Api.csproj", "Contact.Api/"]
 COPY ["Contact.Application/Contact.Application.csproj", "Contact.Application/"]
@@ -27,6 +26,8 @@ COPY . .
 WORKDIR "/src/Contact.Api"
 RUN dotnet build "./Contact.Api.csproj" -c $BUILD_CONFIGURATION -o /app/build
 
+RUN ls /app/build
+
 # This stage is used to publish the service project to be copied to the final stage
 FROM build AS publish
 ARG BUILD_CONFIGURATION=Release
@@ -35,5 +36,6 @@ RUN dotnet publish "./Contact.Api.csproj" -c $BUILD_CONFIGURATION -o /app/publis
 # This stage is used in production or when running from VS in regular mode (Default when not using the Debug configuration)
 FROM base AS final
 WORKDIR /app
+# COPY --from=publish /app/publish/Contact.Api.dll .
 COPY --from=publish /app/publish .
 ENTRYPOINT ["dotnet", "Contact.Api.dll"]

docker-compose-nginx.yml renamed to docker-compose.debug.yml

@@ -1,29 +1,35 @@
-# Please refer https://aka.ms/HTTPSinContainer on how to setup an https developer certificate for your ASP.NET Core service.
-
-version: '3.4'
 
 services:
   frontend:
     build:
       context: ./frontend
-      dockerfile: Dockerfile
-    # ports:
-    #   - 8080:8080
+      dockerfile: Debug.Dockerfile
+    command: ["npm", "run", "start:debug"]
+    ports:
+      - 4200:4200
+      - 49153:49153
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    stdin_open: true
+    tty: true
     depends_on:
       - api
     networks:
       - mssql_network
-
+ 
   api:
     build:
       context: ./backend/src
       dockerfile: Debug.Dockerfile
-      args:
-        - configuration=Debug
-    # ports:
-    #   - 5000:5000
+    command: ["dotnet", "watch", "--project", "Contact.Api/Contact.Api.csproj", "run", "--urls", "http://0.0.0.0:5000"] 
+    ports:
+      - 5000:5000
+
+      
     environment:
       - ASPNETCORE__ENVIRONMENT=${ENVIRONMENT}
+      - DOTNET_SKIP_POLICY_LOADING=false
       - AppSettings__ConnectionStrings__DefaultConnection=Server=${SQL_SERVER};Database=${SQL_DATABASE};User ID=${SQL_USER};Password=${SQL_PASSWORD};Trusted_Connection=False;Encrypt=False;
       - AppSettings__Secret=${JWT_SECRET}
       - AppSettings__Issuer=${JWT_ISSUER}
@@ -63,19 +69,6 @@ services:
         /opt/mssql-tools/bin/sqlcmd -S localhost -U sa -P ${SQL_PASSWORD} -d master -i /scripts/seed-data.sql; wait
     networks:
       - mssql_network
-  
-  nginx: #name of the fourth service
-    build: loadbalancer # specify the directory of the Dockerfile
-    container_name: nginx
-    restart: always
-    ports:
-      - "80:80" #specify ports forewarding
-    depends_on:
-      - frontend
-      - api
-    networks:
-      - mssql_network
-
 
 volumes:
   mssql_data: # Named volume to persist data

docker-compose.override.yml

@@ -1,26 +1,23 @@
-
 services:
   frontend:
     build:
       context: ./frontend
       dockerfile: Dockerfile
-    ports:
-      - 4000:80
-    volumes:
-      - ./frontend:/app
+    # ports:
+    #   - 8080:8080
     depends_on:
       - api
     networks:
       - mssql_network
- 
+
   api:
     build:
       context: ./backend/src
-      dockerfile: Debug.Dockerfile
+      dockerfile: Dockerfile
       args:
-        - configuration=Debug
-    ports:
-      - 5000:5000
+        - configuration=Release
+    # ports:
+    #   - 8000:8000
     environment:
       - ASPNETCORE__ENVIRONMENT=${ENVIRONMENT}
       - AppSettings__ConnectionStrings__DefaultConnection=Server=${SQL_SERVER};Database=${SQL_DATABASE};User ID=${SQL_USER};Password=${SQL_PASSWORD};Trusted_Connection=False;Encrypt=False;
@@ -34,9 +31,6 @@ services:
       - SmtpSettings__Password=${SMTP_PASSWORD}
       - SmtpSettings__FromEmail=${SMTP_FROM_EMAIL}
       - SmtpSettings__EnableSsl=${SMTP_ENABLE_SSL}
-    volumes:
-      - ./backend/src:/app
-      - ~/.vsdbg:/remote_debugger:rw
     depends_on:
       - mssql
     networks:
@@ -62,6 +56,19 @@ services:
         /opt/mssql-tools/bin/sqlcmd -S localhost -U sa -P ${SQL_PASSWORD} -d master -i /scripts/seed-data.sql; wait
     networks:
       - mssql_network
+  
+  nginx: #name of the fourth service
+    build: loadbalancer # specify the directory of the Dockerfile
+    container_name: nginx
+    restart: always
+    ports:
+      - "80:80" #specify ports forewarding
+    depends_on:
+      - frontend
+      - api
+    networks:
+      - mssql_network
+
 
 volumes:
   mssql_data: # Named volume to persist data

docker-compose.yml

@@ -2,7 +2,7 @@
 FROM node:22-alpine as builder
 
 # Copy dependency definitions
-COPY package.json package-lock.json ./
+COPY package*.json ./
 
 ## installing and Storing node modules on a separate layer will prevent unnecessary npm installs at each build
 ## --legacy-peer-deps as ngx-bootstrap still depends on Angular 14

docker-mssql-compose.yml

@@ -4,15 +4,17 @@ FROM node:22-alpine
 #RUN echo "nameserver 8.8.8.8" |  tee /etc/resolv.conf > /dev/null
 WORKDIR /app
 
+# RUN npm install -g @angular/cli@latest
 # Copy dependency definitions
-COPY package*.json ./
+COPY package.json .
 
 ## installing and Storing node modules on a separate layer will prevent unnecessary npm installs at each build
-RUN npm i
+RUN npm install --legacy-peer-deps
 
-RUN npm install -g @angular/cli
-
-COPY . /app/
+COPY . .
 
 EXPOSE 4200 49153
 
+# Start the application in debug mode
+# CMD ["npm", "run", "start:debug"]
+

documents/architecture.drawio

@@ -5,6 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "serve": "ng serve --proxy-config proxy.conf.json",
+    "start:debug": "ng serve --configuration development --proxy-config proxy.conf.json --host 0.0.0.0 --disable-host-check --poll 2000 --verbose",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",

documents/architecture.png

@@ -1,7 +1,8 @@
 {
   "/api": {
-    "target": "http://localhost:5217",
+    "target": "http://api:5000",
     "secure": false,
+    "changeOrigin": true,
     "logLevel": "debug"
   }
 }

frontend/Dockerfile

@@ -15,13 +15,33 @@ export class AuthGuard {
         if (typeof window !== 'undefined') {
             if (localStorage.getItem('currentUser')) {
                 // logged in so return true
-                return true;
+                const userObject = JSON.parse(localStorage.getItem('currentUser'));
+
+                // Extract the token
+                const token = userObject.token;
+
+                if (!token) {
+                  console.error('Token is missing');
+                  return this.InvalidSession(state);
+                } else {
+                  const payload = JSON.parse(atob(token.split('.')[1])); // Decode the payload
+                  const currentTime = Math.floor(Date.now() / 1000); // Current time in seconds
+                  if (payload.exp < currentTime){
+                    return this.InvalidSession(state);
+                  } else {
+                    return true;
+                }
             }
         }
         // not logged in so redirect to login page with the return url
-        this.router.navigate(['/login'], {
-            queryParams: { returnUrl: state.url },
-        });
-        return false;
+        return this.InvalidSession(state);
     }
+  }
+
+  private InvalidSession(state: RouterStateSnapshot) {
+    this.router.navigate(['/login'], {
+      queryParams: { returnUrl: state.url },
+    });
+    return false;
+  }
 }

frontend/debug.dockerfile

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'phoneNumberFormat',
+  standalone: true
+})
+export class PhoneNumberFormatPipe implements PipeTransform {
+  transform(phone: number, countryCode: number): string {
+    if (!phone) {
+      return '';
+    }
+
+    const formattedPhone = phone.toString().replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
+    return `+${countryCode} ${formattedPhone}`;
+  }
+}

frontend/package-lock.json

@@ -41,6 +41,33 @@ <h2 *ngIf="contactForm.get('id').value">
                                     formControlName="lastName"
                                 />
                             </div>
+                            <div class="col-sm-6 col-md-6">
+                              <label for="lastName" class="form-label"
+                                  >Date Of Birth</label
+                              >
+                              <input
+                                  type="date"
+                                  class="form-control"
+                                  formControlName="dateOfBirth"
+                              />
+
+                              <!-- <div class="input-group">
+                                <input
+                                    type="text"
+                                    class="form-control"
+                                    formControlName="dateOfBirth"
+                                    id="datePicker"
+                                    class="form-control"
+                                    placeholder="yyyy-mm-dd"
+
+                                    ngbDatepicker
+                                    #dp="ngbDatepicker"
+                                />
+                                <button class="btn btn-outline-secondary" (click)="dp.toggle()" type="button">
+                                  <i class="bi bi-calendar"></i>
+                                </button>
+                              </div> -->
+                          </div>
                             <div class="col-sm-6 col-md-6">
                                 <label for="email" class="form-label"
                                     >Email
@@ -55,11 +82,25 @@ <h2 *ngIf="contactForm.get('id').value">
                                 <label for="mobile" class="form-label"
                                     >Mobile #</label
                                 >
+                                <div class="input-group">
+                                  <select
+                                  class="form-select"
+
+                                  formControlName="countryCode"
+                                  aria-label="Country code"
+                                  style="max-width: 100px;"
+                              >
+                                  <option value="1">+1</option>
+                                  <option value="44">+44</option>
+                                  <option value="91">+91</option>
+                                  <option value="61">+61</option>
+                              </select>
                                 <input
                                     type="text"
                                     class="form-control"
                                     formControlName="mobile"
                                 />
+                                </div>
                             </div>
                             <div class="col-sm-6 col-md-6">
                                 <label for="city" class="form-label"

frontend/package.json

@@ -8,13 +8,14 @@ import {
 } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
+import { NgbCalendar, NgbDatepickerModule, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 import { ValidationService } from '../../../@core/services/validation.service';
 import { ContactService } from '../contact.service';
 import { errorTailorImports } from "../../../@core/components/validation";
 
 @Component({
     selector: 'app-contact-form',
-    imports: [ReactiveFormsModule, RouterModule, CommonModule, errorTailorImports],
+    imports: [ReactiveFormsModule, RouterModule, CommonModule, errorTailorImports, NgbDatepickerModule],
     templateUrl: './contact-form.component.html',
     styleUrl: './contact-form.component.css',
     providers: [ContactService]
@@ -49,10 +50,12 @@ export class ContactFormComponent implements OnInit {
                     Validators.maxLength(35),
                 ],
             ],
+            dateOfBirth:[],
             email: [
                 '',
                 [Validators.required, this.validationService.emailValidator],
             ],
+            countryCode: ['', [Validators.required]],
             mobile: ['', [Validators.required]],
             city: ['', [Validators.required]],
             postalCode: ['', [Validators.required]],
@@ -113,6 +116,11 @@ export class ContactFormComponent implements OnInit {
         const contactDetails = this.activatedRoute.snapshot.data.contactDetails;
         if (contactDetails) {
             this.contactForm.patchValue(contactDetails);
+            this.contactForm.controls.dateOfBirth.setValue(this.formatDate(contactDetails.dateOfBirth));
         }
     }
+    private formatDate(jsonDate: string): string {
+      const date = new Date(jsonDate);
+      return date.toISOString().split('T')[0]; // yyyy-MM-dd format
+    }
 }

frontend/proxy.conf.json

@@ -61,11 +61,8 @@ <h2>Contact List</h2>
                                         />
                                     </td>
                                     <td>
-                                        <ngb-highlight
-                                            [result]="contact.mobile"
-                                            [term]="filter.value"
-                                        />
-                                      </td>
+                                      {{ contact.mobile | phoneNumberFormat: contact.countryCode}}
+                                    </td>
                                       <td>
                                         <ngb-highlight
                                             [result]="contact.city"

frontend/src/app/@core/guards/auth.guard.ts

@@ -4,6 +4,7 @@ import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Router, RouterModule } from '@angular/router';
 import { NgbHighlight, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { ContactService } from '../contact.service';
+import { PhoneNumberFormatPipe } from "../../../@core/pipes/phoneNumberFormat.pipe";
 
 @Component({
     selector: 'app-contact-list',
@@ -13,6 +14,7 @@ import { ContactService } from '../contact.service';
         ReactiveFormsModule,
         NgbHighlight,
         NgbPaginationModule,
+        PhoneNumberFormatPipe
     ],
     templateUrl: './contact-list.component.html',
     styleUrl: './contact-list.component.css',

frontend/src/app/@core/pipes/phoneNumberFormat.pipe.ts

@@ -2,23 +2,7 @@ import { inject } from '@angular/core';
 import { ContactService } from "./contact.service";
 import { ResolveFn } from '@angular/router';
 
-// export class ContactDetailsResolver  {
-//   constructor(private contactService: ContactService) {}
-
-//   export const userDetailsResolver: ResolveFn<UserDetails> = (route, state) => {
-//     let userService = inject(UserService);
-//     return userService.getUserDetails(+route.paramMap.get('id'));
-//   };
-
-//   // resolve(route: ActivatedRouteSnapshot): any {
-//   //   return this.contactService.getById(route.paramMap.get("contactId")).pipe(
-//   //     map((result: any) => {
-//   //       return result;
-//   //     })
-//   //   );
-//   // }
-// }
 export const ContactDetailsResolver: ResolveFn<any> = (route, state) => {
-  let userService = inject(ContactService);
-  return userService.getById(route.paramMap.get('contactId'));
+  let contactService = inject(ContactService);
+  return contactService.getById(route.paramMap.get('contactId'));
 };

frontend/src/app/feature/contact/contact-form/contact-form.component.html

@@ -18,7 +18,7 @@ import { ValidationService } from '../../../@core/services/validation.service';
     // changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [NgbNavModule, ReactiveFormsModule],
     templateUrl: './profile.component.html',
-    styleUrls: ['./profile.component.scss']
+    styleUrls: ['./profile.component.css']
 })
 export class ProfileComponent implements OnInit {
     active = 1;

frontend/src/app/feature/contact/contact-form/contact-form.component.ts

@@ -14,7 +14,6 @@ export default [
         children: [
             {
                 path: '',
-
                 component: HomeComponent,
             },
             {

frontend/src/app/feature/contact/contact-list/contact-list.component.html

@@ -10,7 +10,7 @@ http {
   upstream api {
     # These are references to our backend containers, facilitated by
     # Compose, as defined in docker-compose.yml
-    server api:5000;
+    server api:8000;
   }