PolyNotFound/admin/src/app/beforeConnexion/register/page-register/page-register.component.html

<div [class]="themeService.getClassTheme()">
    <div class="myContainer">

        <!-- navbar -->
        <app-navbar-before-connexion pour="register"></app-navbar-before-connexion>

        <!-- stepper -->
        <mat-stepper [linear]=true>

            <!-- Choix du role -->
            <mat-step label="Type de compte">
                <form style="margin-top: 10px">
                    <!-- Choix du rôle -->
                    <mat-radio-group [(ngModel)]="user.role.name" [ngModelOptions]="{standalone: true}" (click)="hasError = false; errorMessage = '';">
                        <mat-radio-button value="user">Utilisateur standard</mat-radio-button>&nbsp; &nbsp;
                        <mat-radio-button value="advertiser">Annonceur</mat-radio-button>
                    </mat-radio-group>

                    <!-- Bouton suivant -->
                    <div style="text-align: right;">
                        <button mat-button matStepperNext>Suivant</button>
                    </div>
                </form>
            </mat-step>


            <!-- Infos personelles -->
            <mat-step label="Compte & Informations personelles">
                <form style="margin-top: 10px">
                    <!-- Redirection vers le bon bloc -->
                    <ng-template *ngIf="user.role.name==='user'; then userBlock else advertiserBlock"></ng-template>

                    <!-- Message d'erreur -->
                    <div *ngIf="hasError">
                        <mat-error>{{errorMessage}}</mat-error>
                    </div>

                    <!-- Boutons-->
                    <div style="text-align: right;">
                        <button mat-button matStepperPrevious>Précédent</button>
                        <button mat-button (click)="onEnregistrer()">Enregistrer</button>
                    </div>
                </form>
            </mat-step>

        </mat-stepper>

    </div>
</div>


<!-- -------------------------------------------------------------------------------------------------------- -->


<!-- Info personnelles user -->
<ng-template #userBlock>
    <br>
    <div class="row">

        <!-- Colonne gauche -->
        <div class="col-5 leftCol">
            <h4>Compte</h4>

            <!-- Login -->
            <mat-form-field appearance="fill">
                <mat-label>Pseudo</mat-label>
                <input matInput type="text" [(ngModel)]="user.login" [ngModelOptions]="{standalone: true}" required>
            </mat-form-field>
            <br>

            <!-- Mot de passe -->
            <mat-form-field appearance="fill">
                <mat-label>Mot de passe</mat-label>
                <input matInput type="password" [(ngModel)]="password" [ngModelOptions]="{standalone: true}" required>
            </mat-form-field>
            <br>

            <!-- Confirmation mot de passe -->
            <mat-form-field appearance="fill">
                <mat-label>Confirmation mot de passe</mat-label>
                <input matInput type="password" [(ngModel)]="confirmPassword" [ngModelOptions]="{standalone: true}" required>
            </mat-form-field>
        </div>

        <!-- Colonne droite -->
        <div class="col-7">
            <h4>Informations personelles</h4>

            <!-- Email -->
            <mat-form-field appearance="fill">
                <mat-label>Email</mat-label>
                <input matInput type="email" [(ngModel)]="user.email" [ngModelOptions]="{standalone: true}" required>
            </mat-form-field>
            <br>

            <!-- gender -->
            <mat-radio-group [(ngModel)]="user.gender" [ngModelOptions]="{standalone: true}">
                <mat-radio-button value="man"> Homme </mat-radio-button>&nbsp; &nbsp;
                <mat-radio-button value="woman"> Femme </mat-radio-button>
            </mat-radio-group>
            <br><br>

            <!-- dateOfBirth -->
            <mat-form-field appearance="fill">
                <mat-label>Date de naissance</mat-label>
                <input matInput type="date"
                       [ngModel] ="user.dateOfBirth | date:'yyyy-MM-dd'"
                       (ngModelChange)="user.dateOfBirth = $event"
                       [ngModelOptions]="{standalone: true}">
            </mat-form-field>

            <!-- interests -->
            <app-input-interests-register
                    [myInterests]="user.interests"
                    (eventEmitter)="onEventInputInterests($event)"></app-input-interests-register>
        </div>

    </div>
</ng-template>


<!-- -------------------------------------------------------------------------------------------------------- -->


<!-- Info personnelles advertiser -->
<ng-template #advertiserBlock>

    <!-- Entreprise -->
    <mat-form-field appearance="fill">
        <mat-label>Entreprise</mat-label>
        <input matInput type="text" [(ngModel)]="user.company" [ngModelOptions]="{standalone: true}" required>
    </mat-form-field>
    <br>

    <!-- Login -->
    <mat-form-field appearance="fill">
        <mat-label>Pseudo</mat-label>
        <input matInput type="text" [(ngModel)]="user.login" [ngModelOptions]="{standalone: true}" required>
    </mat-form-field>
    <br>

    <!-- Email -->
    <mat-form-field appearance="fill">
        <mat-label>Email</mat-label>
        <input matInput type="email" [(ngModel)]="user.email" [ngModelOptions]="{standalone: true}" required>
    </mat-form-field>
    <br>

    <!-- Mot de passe -->
    <mat-form-field appearance="fill">
        <mat-label>Mot de passe</mat-label>
        <input matInput type="password" [(ngModel)]="password" [ngModelOptions]="{standalone: true}" required>
    </mat-form-field>
    <br>

    <!-- Confirmation mot de passe -->
    <mat-form-field appearance="fill">
        <mat-label>Confirmation mot de passe</mat-label>
        <input matInput type="password" [(ngModel)]="confirmPassword" [ngModelOptions]="{standalone: true}" required>
    </mat-form-field>

</ng-template>