angular-js/src/app/account/account.component.html

<div class="container d-flex flex-column align-items-center mt-5">

    <!-- Formulaire d'entrée -->
    <div class="w-50">
        <div class="card shadow-sm">
            <div class="card-body">
                <h4 class="card-title text-center mb-4">Ajouter vos informations</h4>

                <form [formGroup]="infoForm" (ngSubmit)="addInfo()">
                    
                    <!-- Sélection du genre -->
                    <div class="input-group mb-3">
                        <div class="input-group">
                            <div class="input-group-text">
                                <input class="form-check-input mt-0" type="radio" formControlName="gender" value="Mr.">
                            </div>
                            <input type="text" class="form-control" placeholder="Mr." disabled>

                            <div class="input-group-text">
                                <input class="form-check-input mt-0" type="radio" formControlName="gender" value="Ms.">
                            </div>
                            <input type="text" class="form-control" placeholder="Ms." disabled>

                            <div class="input-group-text">
                                <input class="form-check-input mt-0" type="radio" formControlName="gender" value="Other.">
                            </div>
                            <input type="text" class="form-control" placeholder="Other." disabled>
                        </div>
                    </div>
                    <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('gender')?.invalid && infoForm.get('gender')?.touched">
                        Veuillez sélectionner un genre.
                    </div>

                    <!-- Nom & Prénom -->
                    <div class="input-group mb-3">
                        <input type="text" formControlName="nameLast" class="form-control" placeholder="Nom">
                        <span class="input-group-text"> — </span>
                        <input type="text" formControlName="nameFirst" class="form-control" placeholder="Prénom">
                    </div>
                    <div class="input-group mb-3" *ngIf="(infoForm.get('nameLast')?.invalid && infoForm.get('nameLast')?.touched) || 
                    (infoForm.get('nameFirst')?.invalid && infoForm.get('nameFirst')?.touched)">
                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameLast')?.hasError('required') && infoForm.get('nameLast')?.touched">
                            Le nom est requis.
                        </div>
                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameLast')?.hasError('minlength') && infoForm.get('nameLast')?.touched">
                            Le nom doit comporter au moins 3 caractères.
                        </div>
                        <div class="alert alert-dark fs-40" role="alert"> — </div>
                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameFirst')?.hasError('required') && infoForm.get('nameFirst')?.touched">
                            Le prénom est requis.
                        </div>
                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('nameFirst')?.hasError('minlength') && infoForm.get('nameFirst')?.touched">
                            Le prénom doit comporter au moins 3 caractères.
                        </div>
                    </div>

                    <!-- Email -->
                    <div class="input-group mb-3">
                        <input type="text" formControlName="email" class="form-control" placeholder="Nom d'utilisateur">
                        <span class="input-group-text">&#64;edu.igensia.com</span>
                    </div>
                    <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('email')?.invalid && infoForm.get('email')?.touched">
                        Veuillez entrer un nom d'utilisateur valide.
                    </div>

                    <!-- Adresse -->
                    <div class="input-group mb-3">
                        <input type="text" formControlName="address" class="form-control" placeholder="Adresse">
                        <span class="input-group-text"> — </span>
                        <input type="text" formControlName="codePostal" class="form-control fs-20" placeholder="Code Postal">
                    </div>
                    <div class="input-group mb-3" *ngIf="(infoForm.get('address')?.invalid && infoForm.get('address')?.touched) || 
                    (infoForm.get('codePostal')?.invalid && infoForm.get('codePostal')?.touched)">
                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('address')?.hasError('required') && infoForm.get('address')?.touched">
                            L'adresse est requise.
                        </div>
                        <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('address')?.hasError('minlength') && infoForm.get('address')?.touched">
                            L'adresse doit comporter au moins 10 caractères.
                        </div>
                        <div class="d-flex justify-content-center align-items-center alert alert-dark fs-40" role="alert"> — </div>
                        <div *ngIf="infoForm.get('codePostal')?.invalid">
                            <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('codePostal')?.hasError('required')">
                                Le code postal est requis.
                            </div>
                            <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('codePostal')?.hasError('minlength')">
                                Le code postal doit comporter au moins 4 chiffres.
                            </div>
                            <div class="alert alert-danger fs-40" role="alert" *ngIf="infoForm.get('codePostal')?.hasError('pattern')">
                                Le code postal doit comporter uniquement des chiffres.
                            </div>
                        </div>
                    </div>
                    
                    <!-- Bouton Ajouter -->
                    <button type="submit" class="btn btn-primary w-100" [disabled]="infoForm.invalid">Ajouter</button>

                </form>
            </div>
        </div>
    </div>

    <!-- Liste des informations -->
    <div *ngIf="infos.length > 0; else noComment" class="d-flex flex-column align-items-center w-50">
        <h3 class="text-center text-primary">Liste des informations</h3>
        <ul class="list-group shadow-sm">
            <li class="list-group-item d-flex justify-content-between align-items-start" *ngFor="let info of infos">
                <div class="ms-2 me-auto">
                    <div class="fw-bold breakWord">{{ info.nameLast }} {{ info.nameFirst }}</div>
                    <div class="fw-bold breakWord"><a href="mailto:{{ info.email }}">{{ info.email }}</a></div>
                    <div class="fw-bold breakWord">{{ info.address }}</div>
                </div>
                <div class="ms-2 me-auto d-flex flex-column">
                    <span class="badge text-bg-primary rounded-pill mb-1">{{ info.gender }}</span>
                    <span class="badge text-bg-success rounded-pill">{{ info.date | date:'dd/MM/yyyy' }}</span>
                </div>                
            </li>
        </ul>
    </div>

    <!-- Message si aucun commentaire -->
    <ng-template #noComment>
        <p class="text-muted text-center mt-3">Aucune information pour le moment</p>
    </ng-template>
</div>