<div class="form-container">
  <h1>Formulaire de connexion :</h1>

  <mat-form-field class="form-field">
    <mat-label>Enter your login</mat-label>
    <input matInput placeholder="pat" [formControl]="login" required />
    <mat-error *ngIf="login.invalid"></mat-error>
  </mat-form-field>

  <mat-form-field class="form-field">
    <mat-label>Enter your password</mat-label>
    <input
      matInput
      [type]="hide ? 'password' : 'text'"
      [formControl]="password"
      required />
    <button
      mat-icon-button
      matSuffix
      (click)="hide = !hide"
      [attr.aria-label]="'Hide password'"
      [attr.aria-pressed]="hide">
      <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
    </button>
    <mat-error *ngIf="password.invalid">{{ errorMessage }}</mat-error>
  </mat-form-field>

  <button
    mat-flat-button
    color="primary"
    (click)="loginAction()"
    [disabled]="login.invalid || password.invalid">
    Se connecter
  </button>

  <!-- Message de retour de l'inscription -->
  <div *ngIf="successLogin" class="success-message">
    {{ successLogin }}
  </div>
  <div *ngIf="errorLogin" class="error-message">
    {{ errorLogin }}
  </div>
</div>
