ajout du css de la page login et de la redirection du bouton connecter

src/app/pages/dashboard/dashboard.html

@@ -23,7 +23,7 @@
           <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
           <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z"/>
         </svg>      </button>
-      <button class="login-button">Se connecter</button>
+      <button routerLink="/login" class="login-button">Se connecter</button>
     </div>
 
 

src/app/pages/dashboard/dashboard.ts

@@ -8,6 +8,7 @@ import { ChatInput } from '../../components/chat-input/chat-input';
 import { DataService } from '../../services/data.service';
 import { Agent, Conversation } from '../../models/data.model';
 import {ChatView} from '../chat/chat-view';
+import {RouterLink} from '@angular/router';
 
 @Component({
   selector: 'app-dashboard',
@@ -18,7 +19,8 @@ import {ChatView} from '../chat/chat-view';
     Sidebar,
     AgentCard,
     ChatInput,
-    ChatView
+    ChatView,
+    RouterLink
   ],
   templateUrl: './dashboard.html',
   styleUrls: ['./dashboard.scss']

src/app/pages/login/login.html

@@ -1,13 +1,13 @@
-<div class="login-page-container">
-  <div class="login-card">
-    <div class="login-header">
+<div class="auth-page-container">
+  <div class="auth-card">
+    <div class="auth-header">
       <div class="logo">AIT</div>
-      <h1 class="login-title">Connectez-vous à votre espace</h1>
-      <p class="login-subtitle">Entrez vos identifiants pour continuer.</p>
+      <h1 class="auth-title">Connectez-vous à votre espace</h1>
+      <p class="auth-subtitle">Entrez vos identifiants pour continuer.</p>
     </div>
 
-    <div class="login-content">
-      <form [formGroup]="loginForm" (ngSubmit)="login()" class="login-form">
+    <div class="auth-content">
+      <form [formGroup]="loginForm" (ngSubmit)="login()" class="auth-form">
 
         <!-- Email Field -->
         <div class="form-field">
@@ -19,14 +19,14 @@
               formControlName="username"
               class="form-input"
               placeholder="votre.email@exemple.com"
-              [class.error]="loginForm.get('email')?.invalid && loginForm.get('email')?.touched"
+              [class.error]="loginForm.get('username')?.invalid && loginForm.get('username')?.touched"
             >
             <svg class="input-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
               <polyline points="22,6 12,13 2,6"></polyline>
             </svg>
           </div>
-          <span class="error-message" *ngIf="loginForm.get('email')?.invalid && loginForm.get('email')?.touched">
+          <span class="error-message" *ngIf="loginForm.get('username')?.invalid && loginForm.get('username')?.touched">
             Veuillez entrer une adresse email valide.
           </span>
         </div>
@@ -74,24 +74,24 @@
             <input type="checkbox" formControlName="rememberMe">
             <span class="checkbox-label">Se souvenir de moi</span>
           </label>
-          <a href="#" class="forgot-password-link">Mot de passe oublié ?</a>
+          <a href="/forgot-password" class="forgot-password-link">Mot de passe oublié ?</a>
         </div>
 
         <!-- Submit Button -->
         <button
           type="submit"
           [disabled]="loginForm.invalid"
-          class="login-btn"
+          class="auth-btn"
         >
-          <span >Se connecter</span>
+          <span>Se connecter</span>
         </button>
       </form>
 
     </div>
 
     <!-- Footer -->
-    <div class="login-footer">
-      <p>Vous n'avez pas de compte ? <a href="#" class="register-link">S'inscrire</a></p>
+    <div class="auth-footer">
+      <p>Vous n'avez pas de compte ? <a href="/register" class="register-link">S'inscrire</a></p>
     </div>
   </div>
 </div>

src/app/pages/login/login.scss

@@ -1,216 +1,328 @@
-.sidebar {
-  width: 280px;
-  height: 100vh;
-  background: linear-gradient(180deg, #1e3a8a 0%, #312e81 100%);
-  display: flex;
-  flex-direction: column;
-  color: white;
-  overflow-y: auto;
-  transition: width 0.3s ease;
-
-  &.collapsed {
-    width: 70px;
-
-    .sidebar-header {
-      justify-content: center;
-    }
-
-    .new-chat-button,
-    .section-title,
-    .conversation-title,
-    .project-name {
-      display: none;
-    }
-  }
-}
-
-.sidebar-header {
-  padding: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  flex-shrink: 0;
-}
-
-.logo h1 {
-  margin: 0;
-  font-size: 28px;
-  font-weight: 700;
-  letter-spacing: 2px;
-}
-
-.toggle-button {
-  background: none;
-  border: none;
-  color: white;
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 8px;
-  transition: background 0.2s ease;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  fa-icon {
-    font-size: 20px;
-  }
-}
+// auth-page.scss - Fichier partagé pour login, register et forgot-password
 
-.new-chat-button,
-.new-chat-button-icon {
-  margin: 20px;
-  padding: 14px 20px;
-  background: rgba(59, 130, 246, 0.2);
-  border: 2px solid rgba(59, 130, 246, 0.3);
-  border-radius: 12px;
-  color: white;
-  cursor: pointer;
+.auth-page-container {
+  min-height: 100vh;
   display: flex;
   align-items: center;
-  gap: 12px;
-  font-size: 15px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  border: none;
-
-  &:hover {
-    background: rgba(59, 130, 246, 0.3);
-    transform: translateY(-2px);
-  }
-
-  fa-icon {
-    font-size: 18px;
-  }
-}
-
-.new-chat-button-icon {
   justify-content: center;
-  padding: 14px;
-  width: calc(100% - 40px);
-}
-
-.conversations-section,
-.projects-section {
-  padding: 0 20px;
-  margin-bottom: 24px;
-  flex-shrink: 0;
-}
-
-.section-title {
-  font-size: 13px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  margin: 0 0 12px 0;
-  opacity: 0.7;
-}
-
-.conversations-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.conversation-item {
-  padding: 10px 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 14px;
-  white-space: nowrap;
+  background: linear-gradient(135deg, #243b5d 0%, #2984a1 100%);
+  padding: 20px;
+  position: relative;
   overflow: hidden;
-  text-overflow: ellipsis;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  &.active {
-    background: rgba(59, 130, 246, 0.3);
-    font-weight: 500;
-  }
 
-  &.sub-item {
-    margin-left: 20px;
-    font-size: 13px;
-    opacity: 0.9;
-  }
-}
-
-.conversation-title {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 
-.projects-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
 
-.project-wrapper {
-  display: flex;
-  flex-direction: column;
-}
+  .auth-card {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    max-width: 440px;
+    background: #ffffff;
+    border-radius: 24px;
+    box-shadow:
+      0 20px 60px rgba(0, 0, 0, 0.3),
+      0 0 100px rgba(102, 126, 234, 0.2);
+    overflow: hidden;
+    animation: fadeInUp 0.6s ease;
+
+    .auth-header {
+      padding: 48px 40px 32px;
+      text-align: center;
+      background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
+
+      .logo {
+        display: inline-block;
+        font-size: 32px;
+        font-weight: 800;
+        color: #2984a1;
+        margin-bottom: 24px;
+        letter-spacing: -1px;
+      }
+
+      .auth-title {
+        font-size: 28px;
+        font-weight: 700;
+        color: #1f2937;
+        margin: 0 0 12px 0;
+        line-height: 1.2;
+      }
+
+      .auth-subtitle {
+        font-size: 15px;
+        color: #6b7280;
+        margin: 0;
+        font-weight: 400;
+        line-height: 1.5;
+      }
+    }
 
-.project-item {
-  padding: 10px 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 14px;
+    .auth-content {
+      padding: 32px 40px 40px;
+
+      .auth-form {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+
+        .form-field {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+
+          .form-label {
+            font-size: 14px;
+            font-weight: 600;
+            color: #374151;
+            margin: 0;
+          }
+
+          .input-wrapper {
+            position: relative;
+            display: flex;
+            align-items: center;
+
+            .form-input {
+              width: 100%;
+              padding: 14px 16px;
+              padding-right: 48px;
+              font-size: 15px;
+              color: #1f2937;
+              background: #f9fafb;
+              border: 2px solid #e5e7eb;
+              border-radius: 12px;
+              transition: all 0.2s ease;
+              outline: none;
+
+              &::placeholder {
+                color: #9ca3af;
+              }
+
+              &:focus {
+                background: #ffffff;
+                border-color: #667eea;
+                box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+              }
+
+              &.error {
+                border-color: #ef4444;
+                background: #fef2f2;
+
+                &:focus {
+                  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+                }
+              }
+            }
+
+            .input-icon {
+              position: absolute;
+              right: 16px;
+              color: #9ca3af;
+              pointer-events: none;
+              transition: color 0.2s ease;
+
+              &.clickable {
+                pointer-events: all;
+                cursor: pointer;
+
+                &:hover {
+                  color: #667eea;
+                }
+              }
+            }
+
+            .form-input:focus ~ .input-icon {
+              color: #667eea;
+            }
+          }
+
+          .error-message {
+            font-size: 13px;
+            color: #ef4444;
+            margin: 0;
+            padding-left: 4px;
+          }
+
+          .success-message {
+            font-size: 13px;
+            color: #10b981;
+            margin: 0;
+            padding-left: 4px;
+          }
+
+          .info-message {
+            font-size: 13px;
+            color: #6b7280;
+            margin: 0;
+            padding-left: 4px;
+          }
+        }
+
+        .form-options {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: 16px;
+          flex-wrap: wrap;
+
+          .checkbox-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            cursor: pointer;
+
+            input[type="checkbox"] {
+              width: 18px;
+              height: 18px;
+              cursor: pointer;
+              accent-color: #667eea;
+            }
+
+            .checkbox-label {
+              font-size: 14px;
+              color: #6b7280;
+              user-select: none;
+            }
+          }
+
+          .forgot-password-link {
+            font-size: 14px;
+            color: #667eea;
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.2s ease;
+
+            &:hover {
+              color: #5568d3;
+              text-decoration: underline;
+            }
+          }
+        }
+
+        .auth-btn {
+          width: 100%;
+          padding: 14px 24px;
+          font-size: 16px;
+          font-weight: 600;
+          color: #ffffff;
+          background: linear-gradient(-45deg, #243b5d 0%, #2984a1 100%);
+          border: none;
+          border-radius: 12px;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+          margin-top: 8px;
+
+          &:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+          }
+
+          &:active:not(:disabled) {
+            transform: translateY(0);
+          }
+
+          &:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+          }
+
+          span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+          }
+        }
+
+        .divider {
+          display: flex;
+          align-items: center;
+          text-align: center;
+          margin: 8px 0;
+
+          &::before,
+          &::after {
+            content: '';
+            flex: 1;
+            border-bottom: 1px solid #e5e7eb;
+          }
+
+          span {
+            padding: 0 16px;
+            font-size: 14px;
+            color: #9ca3af;
+            font-weight: 500;
+          }
+        }
+
+        .social-buttons {
+          display: flex;
+          gap: 12px;
+
+          .social-btn {
+            flex: 1;
+            padding: 12px;
+            background: #ffffff;
+            border: 2px solid #e5e7eb;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            color: #374151;
+
+            &:hover {
+              border-color: #667eea;
+              background: #f9fafb;
+            }
+
+            img, svg {
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+      }
+    }
 
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
+    .auth-footer {
+      padding: 24px 40px;
+      text-align: center;
+      background: #f9fafb;
+      border-top: 1px solid #e5e7eb;
+
+      p {
+        margin: 0;
+        font-size: 14px;
+        color: #6b7280;
+      }
+
+      .register-link,
+      .login-link,
+      .back-to-login-link {
+        color: #667eea;
+        text-decoration: none;
+        font-weight: 600;
+        transition: color 0.2s ease;
+
+        &:hover {
+          color: #5568d3;
+          text-decoration: underline;
+        }
+      }
+    }
   }
 }
 
-.project-icon {
-  opacity: 0.7;
-  flex-shrink: 0;
-}
-
-.project-name {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.expand-icon {
-  opacity: 0.5;
-  font-size: 12px;
-  color: #60a5fa;
-  flex-shrink: 0;
-  transition: transform 0.2s ease;
-}
-
-.project-conversations {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-top: 4px;
-  animation: slideDown 0.2s ease;
-}
-
-.project-empty {
-  padding: 8px 12px 8px 44px;
-  font-size: 12px;
-  opacity: 0.5;
-  font-style: italic;
-}
-
-@keyframes slideDown {
+// Animations
+@keyframes fadeInUp {
   from {
     opacity: 0;
-    transform: translateY(-5px);
+    transform: translateY(30px);
   }
   to {
     opacity: 1;
@@ -218,49 +330,101 @@
   }
 }
 
-.sidebar-footer {
-  margin-top: auto;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  flex-shrink: 0;
-}
-
-.footer-button {
-  width: 100%;
-  padding: 12px;
-  background: none;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
-  color: white;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
+@keyframes backgroundMove {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
   }
-
-  fa-icon {
-    font-size: 18px;
+  33% {
+    transform: translate(5%, -5%) rotate(5deg);
+  }
+  66% {
+    transform: translate(-5%, 5%) rotate(-5deg);
   }
 }
 
-/* Scrollbar styling */
-.sidebar::-webkit-scrollbar {
-  width: 6px;
-}
-
-.sidebar::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
+// Responsive
+@media (max-width: 640px) {
+  .auth-page-container {
+    padding: 16px;
+
+    .auth-card {
+      max-width: 100%;
+      border-radius: 20px;
+
+      .auth-header {
+        padding: 32px 24px 24px;
+
+        .logo {
+          font-size: 28px;
+          margin-bottom: 20px;
+        }
+
+        .auth-title {
+          font-size: 24px;
+        }
+
+        .auth-subtitle {
+          font-size: 14px;
+        }
+      }
+
+      .auth-content {
+        padding: 24px;
+
+        .auth-form {
+          gap: 20px;
+
+          .form-field {
+            .input-wrapper {
+              .form-input {
+                padding: 12px 14px;
+                padding-right: 44px;
+                font-size: 14px;
+              }
+            }
+          }
+
+          .form-options {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 12px;
+          }
+
+          .auth-btn {
+            padding: 12px 20px;
+            font-size: 15px;
+          }
+
+          .social-buttons {
+            flex-direction: column;
+
+            .social-btn {
+              width: 100%;
+            }
+          }
+        }
+      }
+
+      .auth-footer {
+        padding: 20px 24px;
+      }
+    }
+  }
 }
 
-.sidebar::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 3px;
+// Variantes spécifiques pour chaque page
+.auth-page-container {
+  // Page Register - carte plus haute
+  &.register-page {
+    .auth-card {
+      max-width: 480px;
+    }
+  }
 
-  &:hover {
-    background: rgba(255, 255, 255, 0.3);
+  // Page Forgot Password - carte plus petite
+  &.forgot-password-page {
+    .auth-card {
+      max-width: 400px;
+    }
   }
 }