student-signup.component.html

<app-form-page>

  <form [formGroup]="formGroup" (ngSubmit)="submit()">

    <h1>Inscription</h1>

    <p>
      Bienvenue ! Procédons à ton inscription sur l'espace lycéens.
    </p>

    <!-- First name -->
    <mat-form-field class="full-width">
      <input matInput type="text" formControlName="firstName" placeholder="Prénom" required>
    </mat-form-field>

    <!-- Last name -->
    <mat-form-field class="full-width">
      <input matInput type="text" formControlName="lastName" placeholder="Nom" required>
    </mat-form-field>

    <!-- Email -->
    <mat-form-field class="full-width">
      <input matInput type="email" formControlName="email" placeholder="Adresse email" required>
      <mat-hint>
        Elle te servira d'identifiant de connexion.
      </mat-hint>
    </mat-form-field>

    <!-- Confirm Email -->
    <mat-form-field class="full-width">
      <input matInput type="email" formControlName="emailConfirm" placeholder="Confirmer l'adresse email"
        [errorStateMatcher]="emailMatcher">
      <mat-error *ngIf="formGroup.hasError('emailsDifferent')">
        Les adresses emails doivent être identiques.
      </mat-error>
    </mat-form-field>

    <mat-form-field class="full-width">
      <input matInput type="tel" formControlName="phoneNumber" placeholder="Numéro de téléphone" required>
      <mat-hint>
        Il nous permettra de te contacter en cas de nécessité.
      </mat-hint>
    </mat-form-field>


    <p>
      Il ne te reste plus qu'à choisir un mot de passe. :-)
    </p>

    <!-- Password -->
    <mat-form-field class="full-width">
      <input matInput type="password" formControlName="password" placeholder="Mot de passe" required>
    </mat-form-field>

    <!-- Confirm password -->
    <mat-form-field class="full-width">
      <input matInput type="password" formControlName="passwordConfirm" placeholder="Confirmer le mot de passe"
        [errorStateMatcher]="passwordMatcher">
      <mat-error *ngIf="formGroup.hasError('passwordsDifferent')">
        Les mots de passe doivent être identiques.
      </mat-error>
    </mat-form-field>

    <div class="text-center">
      <button mat-raised-button color="primary" [disabled]="!formGroup.valid || loading">
        M'inscrire
        <app-load-spinner *ngIf="loading" [block]="false"></app-load-spinner>
      </button>
    </div>
    <p class="text-center">{{error}}</p>


    <p class="text-center">
      J'ai déjà un compte ! <a routerLink="/connexion">Me connecter</a>
    </p>
  </form>
</app-form-page>