XJC/src/app/components/profil/edit-profil/edit-profil.component.html

<div class="container">
  <div *ngIf="(user | async)?.displayName === 'Parrain'" >
    <app-nav-parrain></app-nav-parrain>
  <!--Grid column-->
  <div class="col-md-12" style="padding-right: 2%; padding-left: 2%;">

    <!--Card-->
    <div class="card testimonial-card">

      <!--Bacground color-->
      <div class="card-up aqua-gradient">
      </div>

      <!--Avatar-->
      <div class="avatar"><img src="{{imageProfil}}" class="rounded-circle img-responsive">
      </div>
      <div class="card-body" style="padding-left: 20%; padding-right: 20%;">
        <!--Name
        <div class="flex-center">
          <i class="fa fa-file-picture-o prefix grey-text"></i>
          <input type="file" id="orangeForm-File" name="file" class="inputfile" accept=".jpg, .jpeg, .png">
          <label for="orangeForm-File">Choose a file</label>

        </div>
-->

        <div class="flex-column flex-center">
          <button class="btn btn-deep-orange mb-4 mt-2" (click)="resetPass()"><i class="fa fa-lock" aria-hidden="true"></i>Réinitialiser mot de passe</button>
          <div *ngIf="resetPassEmail"  class="alert alert-success">
            Un <strong>email pour réinitiliser votre mot de passe</strong> vient de vous être envoyé à <strong><i>{{localUser.email}}</i></strong>.
          </div>
        </div>
        <div class="md-form" style="margin-top: 2%">
          <i class="fa fa-file-picture-o prefix grey-text"></i>
          <input type="file" id="orangeForm-File"  name="file" style="padding-top: 1%;" accept=".jpg, .jpeg, .png">
        </div>

          <div class="md-form">
            <i class="fa fa-user prefix grey-text"></i>
            <input type="text" id="orangeForm-Familyname" [(ngModel)]="parrain.familyname" placeholder="{{parrain.firstname}}">
          </div>
          <div class="md-form">
            <i class="fa fa-user prefix grey-text"></i>
            <input type="text" id="orangeForm-Familyname" [(ngModel)]="parrain.firstname" placeholder="{{parrain.firstname}}">
          </div>
          <form class="form-inline">
            <div class="md-form">
              <i class="fa fa-venus-mars prefix grey-text"></i>
              <input name="group3" type="radio" class="with-gap" id="homme" value="Homme" [(ngModel)]="parrain.sex">
              <label for="homme">Homme</label>
            </div>
            <div class="md-form">
              <input name="group3" type="radio" class="with-gap" id="femme" value="Femme" [(ngModel)]="parrain.sex">
              <label for="femme">Femme</label>
            </div>
          </form>
          <!--
          <div class="md-form">
            <i class="fa fa-birthday-cake prefix grey-text"></i>
            <input type="date" id="orangeForm-Birthday" [(ngModel)]="parrain.birthday" placeholder="Birthday">
          </div>
-->
          <div class="md-form birthdayPar">
            <i class="fa fa-birthday-cake prefix grey-text"></i>
            <input type="date" id="orangeForm-Birthday" class="col-md-4" [(ngModel)]="parrain.birthday" placeholder="Birthday" required min="minDateTimeTest" max="maxDateTimeTest" name="birthday" #birthday="ngModel">
            <div *ngIf="(validationBirthday())"  class="alert alert-danger">
              Votre date de naissance doit être comprise entre <strong><i>01/01/1917 et 01/01/2117</i></strong>.
            </div>
          </div>

          <div class="md-form">
            <i class="fa fa-tty prefix grey-text"></i>
            <input type="tel" id="orangeForm-Username" required pattern=".{9,}\w[0-9]*" [(ngModel)]="parrain.telephone" placeholder="{{parrain.telephone}}" name="telephone" #telephone="ngModel">
            <div *ngIf="telephone.errors && telephone.errors.pattern  && (telephone.dirty || telephone.touched)" class="alert alert-danger">
              Votre <strong>téléphone</strong> doit avoir 10 chiffres au minimum
            </div>
          </div>

          <div class="btn-block">
            <button class="btn btn-green btn-rounded waves-light" [disabled]="(newPassword != '') && (newPassword != ConfirmPassword)" (click)="modifyProfile()"><i class="fa fa-save" aria-hidden="true"></i>Modifier Profil</button>
            <button class="btn btn-default btn-rounded waves-light" (click)="goToProfil()">Retour</button>
          </div>
        </div>


      </div>

    </div>
    <!--/.Card-->

  </div>







  <div *ngIf="(user | async)?.displayName === 'Commercant'" >
    <app-nav-commercant></app-nav-commercant>
    <!--Grid column-->
    <div class="col-md-12" style="padding-right: 2%; padding-left: 2%;">

      <!--Card-->
      <div class="card testimonial-card">

        <!--Bacground color-->
        <div class="card-up aqua-gradient">
        </div>

        <!--Avatar-->
        <div class="avatar"><img src="{{imageProfil}}" class="rounded-circle img-responsive">
        </div>
        <div class="card-body" style="padding-left: 20%; padding-right: 20%;">
          <!--Name
          <div class="flex-center">
            <i class="fa fa-file-picture-o prefix grey-text"></i>
            <input type="file" id="orangeForm-File" name="file" class="inputfile" accept=".jpg, .jpeg, .png">
            <label for="orangeForm-File">Choose a file</label>

          </div>-->


          <div class="flex-column flex-center">
            <button class="btn btn-deep-orange mb-4 mt-2"(click)="resetPass()"><i class="fa fa-lock" aria-hidden="true"></i>Réinitialiser mot de passe</button>
            <div *ngIf="resetPassEmail"  class="alert alert-success">
              Un <strong>email pour réinitiliser votre mot de passe</strong> vient de vous être envoyé à <strong><i>{{localUser.email}}</i></strong>.
            </div>
          </div>
          <div class="md-form">
            <i class="fa fa-file-picture-o prefix grey-text"></i>
            <input type="file" id="orangeForm-File"  name="file" style="padding-top: 1%;" accept=".jpg, .jpeg, .png">
          </div>


          <div class="md-form">
            <i class="fa fa-user prefix grey-text"></i>
            <input type="text" id="orangeForm-Firstname" [(ngModel)]="commercant.commercialName" placeholder="{{commercant.commercialName}}">
          </div>
          <div class="md-form">
            <i class="fa fa-institution prefix grey-text"></i>
            <input type="text" id="orangeForm-Familyname" [(ngModel)]="commercant.raisonSociale" placeholder="{{commercant.raisonSociale}}">
          </div>
          <div class="md-form">
            <i class="fa fa-info prefix grey-text"></i>
            <input type="number" id="orangeForm-Familyname" [(ngModel)]="commercant.siret" placeholder="{{commercant.siret}}" required pattern=".{13,}" minlength="14" name="siret" #siret="ngModel">
            <div *ngIf="siret.errors && siret.errors.pattern && (siret.dirty || siret.touched)" class="alert alert-danger">
              Votre <strong>siret</strong> doit avoir 14 chiffres au minimum.
            </div>
          </div>
          <div class="btn-block">
            <button class="btn btn-green btn-rounded waves-light" [disabled]="(newPassword != '') && (newPassword != ConfirmPassword)" (click)="modifyProfile()"><i class="fa fa-save" aria-hidden="true"></i>Modifier Profil</button>
            <button class="btn btn-default btn-rounded waves-light" (click)="goToProfil()">Retour</button>
          </div>
        </div>


      </div>

    </div>
    <!--/.Card-->

  </div>
</div>