ajout d'une donnee prospect + modif data localStorage

frontend/src/app/app.component.html

@@ -1,2 +1 @@
-<router-outlet />
-
+<eps-home />

frontend/src/app/app.component.ts

@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { HomeComponent } from '@eps/shared/components/home/home.component';
+import { LoginComponent } from './components/auth/login/login.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'eps-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [HomeComponent, LoginComponent, TranslateModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

frontend/src/app/app.config.ts

@@ -1,17 +1,30 @@
-import { ApplicationConfig, LOCALE_ID} from '@angular/core';
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideClientHydration } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
-import { provideHttpClient, withFetch, withInterceptorsFromDi } from '@angular/common/http';
+import { HttpClient, provideHttpClient, withFetch, withInterceptorsFromDi } from '@angular/common/http';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
+}
+
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     provideClientHydration(),
     provideAnimations(),
     provideHttpClient(withInterceptorsFromDi(), withFetch()),
-    { provide: LOCALE_ID, useValue: 'fr-FR' },
+    importProvidersFrom(TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    }))
   ]
 };

frontend/src/app/app.routes.ts

@@ -1,46 +1,50 @@
 import { Routes } from '@angular/router';
-// import { inject } from '@angular/core';
 
-// import { AuthentificationService } from '@eps/services/auth/authentification.service';
+// import { adminGuard } from './components/auth/admin.guard';
+import { authGuard } from './components/auth/auth.guard';
 
-import { HomeComponent } from '@eps/shared/components/home/home.component';
-import { NotFoundComponent } from './components/notFound/not-found.component';
+import { LoginComponent } from '@eps/components/auth/login/login.component';
+import { ListProspectsComponent } from './components/list-prospects/list-prospects.component';
+import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { UserComponent } from './components/user/user.component';
-import { ListProspectsComponent } from './components/prospects/list-prospects/list-prospects.component';
-// import { LoginComponent } from '@eps/components/auth/login/login.component';
-// import { AuthGuard } from './components/auth/auth.guard';
+import { NotFoundComponent } from './components/notFound/not-found.component';
 
 export const routes: Routes = [
-  // {
-  //   path: 'login',
-  //   component: LoginComponent
-  // },
   {
     path: '',
-    component: HomeComponent,
-    // canActivate: [AuthGuard],
+    redirectTo: '/login',
+    pathMatch: 'full',
+  },
+  {
+    path: 'login',
+    component: LoginComponent,
+  },
+  {
+    path: 'prospect',
+    loadComponent: () =>
+      import('./components/list-prospects/list-prospects.component').then(() => ListProspectsComponent)
+  },
+  {
+    path: 'admin',
+    canActivate: [authGuard],
     children: [
-      {
-        path: 'prospect',
-        component: ListProspectsComponent,
-      },
       {
         path: 'user',
-        component: UserComponent,
+        loadComponent: () =>
+          import('./components/user/user.component').then(() => UserComponent)
       },
-      // {
-      //   path: '',
-      //   canMatch: [() => inject(AuthentificationService).isAuthenticated()],
-      // },
-
-      // {
-      //   path: 'register',
-      //   component: UserComponent,
-      // },
-    ],
+      {
+        path: 'dashboard',
+        loadComponent: () =>
+          import('./components/dashboard/dashboard.component').then(() => DashboardComponent)
+      }
+    ]
   },
   {
     path: '**',
-    component: NotFoundComponent,
+    loadComponent: () =>
+      import('./components/notFound/not-found.component').then(
+        () => NotFoundComponent
+      ),
   },
 ];

frontend/src/app/components/auth/admin.guard.ts

@@ -0,0 +1,8 @@
+import type { ActivatedRouteSnapshot, CanActivateFn, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+
+export const adminGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Promise<boolean> | Observable<boolean> => {
+  console.log(route, state);
+
+  return true;
+};

frontend/src/app/components/auth/auth.guard.ts

@@ -1,21 +1,15 @@
-import { inject, Injectable } from '@angular/core';
-// import { ActivatedRouteSnapshot, CanActivate, CanActivateFn, GuardResult, MaybeAsync, Router, RouterStateSnapshot } from '@angular/router';
-import { ActivatedRouteSnapshot, CanActivate, GuardResult, MaybeAsync, Router, RouterStateSnapshot } from '@angular/router';
+import { inject } from "@angular/core";
+import { Router } from "@angular/router";
+import { AuthService } from "@eps/services/auth/auth.service";
 
-import { AuthService } from '@eps/service/auth/auth.service';
-// import { Observable } from 'rxjs';
 
-@Injectable({
-  providedIn: 'root',
-})
-export class AuthGuard implements CanActivate {
-  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): MaybeAsync<GuardResult> {
-    console.log(route, state);
+export const authGuard = () => {
+  const auth = inject(AuthService);
+  const router = inject(Router);
 
-    throw new Error('Method not implemented.');
+  if (!auth.isAuthAdmin()) {
+    router.navigate(['/login']);
+    return false;
   }
-
-  readonly authService = inject(AuthService);
-  readonly router = inject(Router);
-
+  return true;
 }

frontend/src/app/components/auth/login/login.component.html

@@ -1,50 +1,29 @@
-<div class="card flex justify-content-center">
-  <p-button (click)="showDialog()" icon="pi pi-user" label="Login"></p-button>
-  <p-dialog [(visible)]="visible">
-      <ng-template pTemplate="headless">
-          <div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
-              <svg width="33" height="35" viewBox="0 0 33 35" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
-                  <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color)" />
-                  <mask id="mask0_1_36" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="33">
-                      <path d="M15.1934 0V0V0L0.0391235 5.38288L2.35052 25.3417L15.1934 32.427V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1934 0Z" fill="var(--primary-color-text)" />
-                  </mask>
-                  <g mask="url(#mask0_1_36)">
-                      <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1935 0V3.5994V3.58318V20.0075V20.0075V32.427V32.427L28.0364 25.3417L30.3478 5.38288L15.1935 0Z" fill="var(--primary-color)" />
-                  </g>
-                  <path d="M19.6399 15.3776L18.1861 15.0547L19.3169 16.6695V21.6755L23.1938 18.4458V12.9554L21.4169 13.6013L19.6399 15.3776Z" fill="var(--primary-color-text)" />
-                  <path d="M10.5936 15.3776L12.0474 15.0547L10.9166 16.6695V21.6755L7.03966 18.4458V12.9554L8.81661 13.6013L10.5936 15.3776Z" fill="var(--primary-color-text)" />
-                  <path
-                      fill-rule="evenodd"
-                      clip-rule="evenodd"
-                      d="M11.3853 16.9726L12.6739 15.0309L13.4793 15.5163H16.7008L17.5061 15.0309L18.7947 16.9726V24.254L17.8283 25.7103L16.7008 26.843H13.4793L12.3518 25.7103L11.3853 24.254V16.9726Z"
-                      fill="var(--primary-color-text)"
-                  />
-                  <path d="M19.3168 24.7437L21.4168 22.6444V20.5451L19.3168 22.3214V24.7437Z" fill="var(--primary-color-text)" />
-                  <path d="M10.9166 24.7437L8.81662 22.6444V20.5451L10.9166 22.3214V24.7437Z" fill="var(--primary-color-text)" />
-                  <path
-                      fill-rule="evenodd"
-                      clip-rule="evenodd"
-                      d="M13.0167 5.68861L11.7244 8.7568L13.8244 14.8932H14.7936V5.68861H13.0167ZM15.4397 5.68861V14.8932H16.5706L18.5091 8.7568L17.2167 5.68861H15.4397Z"
-                      fill="var(--primary-color-text)"
-                  />
-                  <path d="M13.8244 14.8932L6.87813 12.3094L5.90888 8.27235L11.8859 8.7568L13.9859 14.8932H13.8244Z" fill="var(--primary-color-text)" />
-                  <path d="M16.5706 14.8932L23.5169 12.3094L24.4861 8.27235L18.3476 8.7568L16.4091 14.8932H16.5706Z" fill="var(--primary-color-text)" />
-                  <path d="M18.8321 8.27235L22.2245 7.94938L19.9629 5.68861H17.7013L18.8321 8.27235Z" fill="var(--primary-color-text)" />
-                  <path d="M11.4013 8.27235L8.00893 7.94938L10.2705 5.68861H12.5321L11.4013 8.27235Z" fill="var(--primary-color-text)" />
-              </svg>
-              <div class="inline-flex flex-column gap-2">
-                  <label for="username" class="text-primary-50 font-semibold">Username</label>
-                  <input pInputText id="username" class="bg-white-alpha-20 border-none p-3 text-primary-50"/>
-              </div>
-              <div class="inline-flex flex-column gap-2">
-                  <label for="password" class="text-primary-50 font-semibold">Password</label>
-                  <input pInputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"/>
-              </div>
-              <div class="flex align-items-center gap-2">
-                  <p-button label="Sign-In" (click)="closeDialog()" [text]="true" styleClass="w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full" ></p-button>
-                  <p-button label="Cancel" (click)="closeDialog()" [text]="true"  styleClass="w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full"></p-button>
-              </div>
-          </div>
-      </ng-template>
-  </p-dialog>
+<div
+  class="flex justify-content-center mx-auto">
+  <div class="flex flex-column align-items-center justify-content-center">
+    <div style="
+        border-radius: 56px;
+        padding: 0.3rem;
+        background: linear-gradient(
+          180deg,
+          var(--primary-color) 10%,
+          rgba(33, 150, 243, 0) 30%
+        );
+      ">
+      <div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius: 53px">
+        <form (ngSubmit)="login()">
+          <!-- email -->
+            <label for="email" class="block text-900 text-xl font-medium mb-2">Email</label>
+            <input pInputText type="text" [(ngModel)]="credatials.email" name="email"
+              [ngModelOptions]="{ standalone: true }" class="w-full md:w-30rem mb-5" style="padding:1rem" />
+            <!-- password -->
+          <label for="password" class="block text-900 font-medium text-xl mb-2">Mot de passe</label>
+          <p-password [(ngModel)]="credatials.password" [toggleMask]="true" [ngModelOptions]="{ standalone: true }"
+            styleClass="mb-5" inputStyleClass="w-full p-3 md:w-30rem"></p-password>
+          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->
+          <button pButton pRipple label="Sign In" class="w-full p-3 text-xl" type="submit"></button>
+        </form>
+      </div>
+    </div>
   </div>
+</div>

frontend/src/app/components/auth/login/login.component.scss

@@ -0,0 +1,7 @@
+:host ::ng-deep .pi-eye,
+:host ::ng-deep .pi-eye-slash {
+  transform: scale(1.6);
+  margin-right: 1rem;
+  color: var(--primary-color) !important;
+}
+

frontend/src/app/components/auth/login/login.component.ts

@@ -1,23 +1,51 @@
-import { Component } from "@angular/core";
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
 
-import { DialogModule } from 'primeng/dialog';
+import { AuthService } from '@eps/services/auth/auth.service';
+import { Role } from '@eps/shared/models/role.model';
+import { User } from '@eps/shared/models/user.model';
 import { ButtonModule } from 'primeng/button';
 
+import { DialogModule } from 'primeng/dialog';
+import { InputTextModule } from 'primeng/inputtext';
+import { PasswordModule } from 'primeng/password';
+
 @Component({
   selector: 'eps-login',
   templateUrl: 'login.component.html',
   styleUrl: 'login.component.scss',
   standalone: true,
-  imports: [DialogModule, ButtonModule],
+  imports: [DialogModule, FormsModule, InputTextModule, PasswordModule, ButtonModule],
 })
 export class LoginComponent {
-  visible: boolean = false;
+  readonly auth = inject(AuthService);
+  readonly router = inject(Router);
+
+  loginVisible: boolean = true;
 
-  showDialog() {
-      this.visible = true;
+  credatials = {
+    email: '',
+    password: ''
   }
 
-  closeDialog() {
-      this.visible = false;
+  login() {
+    this.auth.login(this.credatials.email, this.credatials.password).subscribe((user: User) => {
+      localStorage.setItem('userId', JSON.stringify(user._id));
+      localStorage.setItem('firstName', JSON.stringify(user.firstName));
+      localStorage.setItem('lastName', JSON.stringify(user.lastName));
+      localStorage.setItem('email', JSON.stringify(user.email));
+
+      user.roles.forEach((role: Role) => {
+        localStorage.setItem('role', JSON.stringify(role.name));
+      });
+
+      this.loginVisible = false;
+      console.log(this.auth.getUserId());
+
+      this.router.navigate(['/prospect']);
+    }, error => {
+      console.error(`Login error: ${error}`);
+    });
   }
 }

frontend/src/app/components/dashboard/dashboard.component.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

frontend/src/app/components/dashboard/dashboard.component.html

@@ -0,0 +1,73 @@
+<div class="col-12 xl:col-6">
+  <div class="card">
+    <h5>Sales Overview</h5>
+    <p-chart type="line" [data]="chartData" [options]="chartOptions"></p-chart>
+  </div>
+
+  <div class="card">
+    <div class="flex align-items-center justify-content-between mb-4">
+      <h5>Notifications</h5>
+      <div>
+      <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->
+        <button pButton type="button" icon="pi pi-ellipsis-v" class="p-button-rounded p-button-text p-button-plain"
+          (click)="menu.toggle($event)"></button>
+        <p-menu #menu [popup]="true" [model]="items"></p-menu>
+      </div>
+    </div>
+
+    <span class="block text-600 font-medium mb-3">TODAY</span>
+    <ul class="p-0 mx-0 mt-0 mb-4 list-none">
+      <li class="flex align-items-center py-2 border-bottom-1 surface-border">
+        <div
+          class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0">
+          <i class="pi pi-dollar text-xl text-blue-500"></i>
+        </div>
+        <span class="text-900 line-height-3">Richard Jones
+          <span class="text-700"> has purchased a blue t-shirt for <span class="text-blue-500">79$</span></span>
+        </span>
+      </li>
+      <li class="flex align-items-center py-2">
+        <div
+          class="w-3rem h-3rem flex align-items-center justify-content-center bg-orange-100 border-circle mr-3 flex-shrink-0">
+          <i class="pi pi-download text-xl text-orange-500"></i>
+        </div>
+        <span class="text-700 line-height-3">Your request for withdrawal of <span
+            class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
+      </li>
+    </ul>
+
+    <span class="block text-600 font-medium mb-3">YESTERDAY</span>
+    <ul class="p-0 m-0 list-none">
+      <li class="flex align-items-center py-2 border-bottom-1 surface-border">
+        <div
+          class="w-3rem h-3rem flex align-items-center justify-content-center bg-blue-100 border-circle mr-3 flex-shrink-0">
+          <i class="pi pi-dollar text-xl text-blue-500"></i>
+        </div>
+        <span class="text-900 line-height-3">Keyser Wick
+          <span class="text-700"> has purchased a black jacket for <span class="text-blue-500">59$</span></span>
+        </span>
+      </li>
+      <li class="flex align-items-center py-2 border-bottom-1 surface-border">
+        <div
+          class="w-3rem h-3rem flex align-items-center justify-content-center bg-pink-100 border-circle mr-3 flex-shrink-0">
+          <i class="pi pi-question text-xl text-pink-500"></i>
+        </div>
+        <span class="text-900 line-height-3">Jane Davis<span class="text-700"> has posted a new questions about your
+            product.</span></span>
+      </li>
+    </ul>
+  </div>
+
+  <div class="px-4 py-5 shadow-2 flex flex-column md:flex-row md:align-items-center justify-content-between mb-3"
+    [ngStyle]="{borderRadius: '1rem', background: 'linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1C80CF 47.88%, #FFFFFF 100.01%)'}">
+    <div>
+      <div class="text-blue-100 font-medium text-xl mt-2 mb-3">TAKE THE NEXT STEP</div>
+      <div class="text-white font-medium text-5xl">Try PrimeBlocks</div>
+    </div>
+    <div class="mt-4 mr-auto md:mt-0 md:mr-0">
+      <a target="_blank" href="https://www.primefaces.org/primeblocks-ng"
+        class="p-button font-bold px-5 py-3 p-button-warning p-button-rounded p-button-raised">
+        Get Started
+      </a>
+    </div>
+  </div>