<form class="well">
    <div class="form-group">
        <div class="text-center col-sm-12 col-md-12">
            <img [src]="source" width="100" height="100" alt="profile" id="picturePlace" class=" img-circle center-block" />
            <hr>
            <div class="col-sm-4 col-md-4"></div>
            <label class="btn btn-info col-sm-2 col-md-2" >
                Browse Picture<input type="file" style="display: none;" #myPicture name="myPicture" (change)="fileChangeEvent($event)">
            </label>

            <button type="button" class="btn btn-success center-block col-sm-2 col-md-2" (click)="uploadPic()">Upload</button>

        </div>
    </div>
    <div class="form-group">
        <label for="mail">Email address :</label>
        <!--Le ngModel permet d ajouter la valeur entree dans un champ au sein de notre classe USer.ts-->
        <input type="email" [(ngModel)]="email" name="email" class="form-control" >
    </div>
    <div class="form-group">
        <label for="pseudo">Pseudo :</label>
        <input type="text" [(ngModel)]="pseudo" name="pseudo" class="form-control" >
        <!--<div *ngIf="f.submitted && !pseudo.valid" class="help-block">Username is required</div>-->
    </div>
    <div class="form-group">

        <label for="password">Password:</label>
        <input type="password" [(ngModel)]="password" name="password" class="form-control" placeholder="tape ton mdp lel">
    </div>
    <!--au click on call la methode addUser de register.component qui enregistrera les champs -->
    <button type="submit" class="btn btn-primary" (click)="addUser(email,pseudo,password)"  routerLink="/login">Submit</button>
</form>


<!--
<div class="col-md-6 col-md-offset-3">
        <h2>Register</h2>
        <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
                <label for="firstName">First Name</label>
                <input type="text" class="form-control" name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" required />
                <div *ngIf="f.submitted && !firstName.valid" class="help-block">First Name is required</div>
            </div>
            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
                <label for="lastName">Last Name</label>
                <input type="text" class="form-control" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" required />
                <div *ngIf="f.submitted && !lastName.valid" class="help-block">Last Name is required</div>
            </div>
            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
                <label for="username">Username</label>
                <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
                <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
            </div>
            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
                <label for="password">Password</label>
                <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
                <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
            </div>
            <div class="form-group">
                <button [disabled]="loading" class="btn btn-primary">Register</button>
                <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
                <a [routerLink]="['/login']" class="btn btn-link">Cancel</a>
            </div>
        </form>
</div>
-->