adastra_app/src/app/components/auth/auth.component.html

<div class="container auth-page">
  <div class="row">
    <div class="col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 col-xs-12">
      <h1 class="text-xs-center">{{ title }}</h1>
      <p class="text-xs-center">
        @if (authType === 'register') {
          <a [routerLink]="['/login']">Vous avez déjà un compte ?</a>
        }
        @if (authType === 'login') {
          <a [routerLink]="['/register']">Vous n'avez pas encore de compte ?</a>
        }
      </p>
      <app-list-errors [errors]="errors"></app-list-errors>
      <form [formGroup]="authForm" (ngSubmit)="submitForm()">
        <fieldset [disabled]="isSubmitting" class="w-100">
          <legend [hidden]="true">Informations personnelles</legend>
          <div class="col-12">
            <mat-form-field appearance="fill" class="w-100">
              <input matInput type="text" placeholder="Votre adresse email" formControlName="email" required>
              @if (this.authForm.controls['email'].status === 'INVALID') {
                <mat-error>{{getErrorMessage('email')}}</mat-error>
              }
            </mat-form-field>
          </div>
          @if (authType === 'register') {
            <div class="col-12">
              <mat-form-field appearance="fill" class="w-100">
                <input matInput type="text" placeholder="Votre nom" formControlName="lastname" required>
                @if (this.authForm.controls['lastname'].status === 'INVALID') {
                  <mat-error>{{getErrorMessage('lastname')}}</mat-error>
                }
              </mat-form-field>
            </div>
          }
          @if (authType === 'register') {
            <div class="col-12">
              <mat-form-field appearance="fill" class="w-100">
                <input matInput type="text" placeholder="Votre prénom" formControlName="firstname" required>
                @if (this.authForm.controls['firstname'].status === 'INVALID') {
                  <mat-error>{{getErrorMessage('firstname')}}</mat-error>
                }
              </mat-form-field>
            </div>
          }
          @if (authType === 'register') {
            <div class="col-12">
              <mat-form-field appearance="fill" class="w-100">
                <input matInput type="text" placeholder="Numéro de téléphone" formControlName="phone" required>
                @if (this.authForm.controls['phone'].status === 'INVALID') {
                  <mat-error>{{getErrorMessage('phone')}}</mat-error>
                }
              </mat-form-field>
            </div>
          }
          @if (authType === 'register') {
            <div class="col-12">
              <mat-form-field appearance="fill" class="w-100">
                <input matInput type="text" placeholder="Pseudo" formControlName="username">
                @if (this.authForm.controls['username'].status === 'INVALID') {
                  <mat-error>{{getErrorMessage('username')}}</mat-error>
                }
              </mat-form-field>
            </div>
          }
          @if (authType === 'register') {
            <div class="col-12">
              <mat-form-field appearance="fill" class="w-100">
                <input matInput type="text" placeholder="Numéro de licence FFP" formControlName="licence">
                @if (this.authForm.controls['licence'].status === 'INVALID') {
                  <mat-error>{{getErrorMessage('licence')}}</mat-error>
                }
              </mat-form-field>
            </div>
          }
          @if (authType === 'register') {
            <div class="col-12">
              <mat-form-field appearance="fill" class="w-100">
                <input matInput type="text" placeholder="Indiquez le poids en Kg" formControlName="poids">
                @if (this.authForm.controls['poids'].status === 'INVALID') {
                  <mat-error>{{getErrorMessage('poids')}}</mat-error>
                }
              </mat-form-field>
            </div>
          }
        </fieldset>
        <fieldset [disabled]="isSubmitting" class="w-100">
          <legend [hidden]="true">Informations de connexion</legend>
          <div class="col-12">
            <mat-form-field appearance="fill" class="w-100">
              <input matInput type="password" placeholder="Mot de passe" formControlName="password" required>
              @if (this.authForm.controls['password'].status === 'INVALID') {
                <mat-error>{{getErrorMessage('password')}}</mat-error>
              }
            </mat-form-field>
          </div>
          @if (authType === 'register') {
            <div class="col-12">
              <mat-form-field appearance="fill" class="w-100">
                <input matInput type="password" placeholder="Confirmez votre nouveau mot de passe" formControlName="confirmPassword" required>
                @if (this.authForm.controls['confirmPassword'].status === 'INVALID') {
                  <mat-error>{{getErrorMessage('confirmPassword')}}</mat-error>
                }
              </mat-form-field>
            </div>
          }
          <div class="col-12">
            <button mat-raised-button color="primary" [disabled]="!authForm.valid" type="submit" class="float-sm-end">{{ btnTitle }}</button>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>