AIT_appIA/src/app/pages/login/login.html

<div class="auth-page-container">
  <div class="auth-card">
    <div class="auth-header">
      <div class="logo">AIT</div>
      <h1 class="auth-title">Connectez-vous à votre espace</h1>
      <p class="auth-subtitle">Entrez vos identifiants pour continuer.</p>
    </div>

    <div class="auth-content">
      <form [formGroup]="loginForm" (ngSubmit)="login()" class="auth-form">

        <!-- Email Field -->
        <div class="form-field">
          <label for="email" class="form-label">Email</label>
          <div class="input-wrapper">
            <input
              id="email"
              type="email"
              formControlName="username"
              class="form-input"
              placeholder="votre.email@exemple.com"
              [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('username')?.invalid && loginForm.get('username')?.touched">
            Veuillez entrer une adresse email valide.
          </span>
        </div>

        <!-- Password Field -->
        <div class="form-field">
          <label for="password" class="form-label">Mot de passe</label>
          <div class="input-wrapper">
            <input
              id="password"
              [type]="showPassword ? 'text' : 'password'"
              formControlName="password"
              class="form-input"
              placeholder="••••••••"
              [class.error]="loginForm.get('password')?.invalid && loginForm.get('password')?.touched"
            >
            <svg class="input-icon clickable"
                 (click)="togglePasswordVisibility()"
                 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 *ngIf="!showPassword" d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
              <circle *ngIf="!showPassword" cx="12" cy="12" r="3"></circle>
              <path *ngIf="showPassword" d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
              <line *ngIf="showPassword" x1="1" y1="1" x2="23" y2="23"></line>
            </svg>
          </div>
          <span class="error-message" *ngIf="loginForm.get('password')?.hasError('required') && loginForm.get('password')?.touched">
            Le mot de passe est requis.
          </span>
          <span class="error-message" *ngIf="loginForm.get('password')?.hasError('minlength') && loginForm.get('password')?.touched">
            Le mot de passe doit contenir au moins 6 caractères.
          </span>
        </div>

        <!-- Form Options -->
        <div class="form-options">
          <label class="checkbox-wrapper">
            <input type="checkbox" formControlName="rememberMe">
            <span class="checkbox-label">Se souvenir de moi</span>
          </label>
          <a href="/reset/request" class="forgot-password-link">Mot de passe oublié ?</a>
        </div>

        <!-- Submit Button -->
        <button
          type="submit"
          [disabled]="loginForm.invalid"
          class="auth-btn"
        >
          <span>Se connecter</span>
        </button>
      </form>

    </div>

    <!-- Footer -->
    <div class="auth-footer">
      <p>Vous n'avez pas de compte ? <a href="/register" class="register-link">S'inscrire</a></p>
    </div>
  </div>
</div>