Add edition of user name or user email

src/main/ts/src/app/account-settings/profil-edition/profil-edition.component.html

@@ -7,7 +7,7 @@
                 alt="Card image cap"
                 mdbTooltip="Modifier mon image de profil"
                 placement="bottom">
-        <div class="card-body">
+        <div id="form" class="card-body">
             <form (ngSubmit)="onSubmit()" #profilEditionForm="ngForm">
                 <div class="md-form">
                     <input mdbActive
@@ -19,7 +19,7 @@
                             #name="ngModel"
                             data-error="Veuillez saisir votre nom d'utilisateur"
                             data-sucess=""
-                            required disabled />
+                            required />
                     <label for="name">Nom d'utilisateur</label>
                 </div>
                 <div class="md-form">
@@ -32,15 +32,25 @@
                             #email="ngModel"
                             data-error="Veuillez saisir votre adresse email"
                             data-sucess=""
-                            required disabled />
+                            required />
                     <label for="email">Email</label>
                 </div>
+                <div id="errorMsg" class="card red lighten-2 text-center z-depth-2">
+                    <div class="card-body">
+                        <p class="white-text mb-0">{{modelError}}</p>
+                    </div>
+                </div>
+                <div id="resultMsg" class="card green lighten-2 text-center z-depth-2" >
+                    <div class="card-body">
+                        <p class="white-text mb-0">{{result}}</p>
+                    </div>
+                </div>
                 <div class="col submitFormArea">
                     <a routerLink="/accountSettings" class="indigo-text">
                         Annuler
                     </a>
                     <button class="float-right waves-effect waves-light indigo btn"
-                            type="submit" [disabled]="!profilEditionForm.form.valid || true" disabled>
+                            type="submit" [disabled]="!profilEditionForm.form.valid">
                         Suivant
                     </button>
                 </div>

src/main/ts/src/app/account-settings/profil-edition/profil-edition.component.ts

@@ -10,7 +10,7 @@ import { environment } from '../../../environments/environment';
 	selector: 'app-profil-edition',
 	templateUrl: './profil-edition.component.html',
 	styles: [`
-		.card-body {
+		#form {
 			padding-bottom: 10px;
 		}
 
@@ -21,6 +21,13 @@ import { environment } from '../../../environments/environment';
 		#profil-image {
 			cursor: pointer;
 		}
+
+		#resultMsg, #errorMsg {
+			max-height: 0;
+			overflow: hidden;
+			transition: max-height 0.5s ease-out;
+			margin: 0;
+		}
 	`]
 })
 export class ProfilEditionComponent implements OnInit {
@@ -69,6 +76,24 @@ export class ProfilEditionComponent implements OnInit {
 	}
 
 	onSubmit(): void {
-		// TODO
+		this.profilEditionService.updateUser(this.model).subscribe(() => {
+			this.setMessage('Modification enregistrée.', false);
+		}, error => {
+			this.setMessage('L\'adresse mail saisie n\'est pas disponible.', true);
+		});
+	}
+
+	setMessage(message: string, error: boolean): void {
+		this[error ? 'modelError' : 'result'] = message;
+
+		const resultMsgDiv = document.getElementById(error ? 'errorMsg' : 'resultMsg');
+		resultMsgDiv.style.maxHeight = '64px';
+
+		setTimeout(() => {
+			resultMsgDiv.style.maxHeight = '0px';
+			setTimeout(() => {
+				this[error ? 'modelError' : 'result'] = undefined;
+			}, 550);
+		}, 3000);
 	}
 }

src/main/ts/src/app/account-settings/profil-edition/profil-edition.service.ts

@@ -2,8 +2,10 @@ import { Injectable } from '@angular/core';
 import {HttpClient, HttpRequest, HttpEvent} from '@angular/common/http';
 import {Observable} from 'rxjs/Observable';
 import { environment } from '../../../environments/environment';
+import { User } from '../../core/entities';
 
 const IMAGES_URL = environment.apiUrl + '/api/images';
+const ACCOUNT_URL = environment.apiUrl + '/api/account';
 
 @Injectable()
 export class ProfilEditionService {
@@ -21,4 +23,8 @@ export class ProfilEditionService {
 			}
 		));
 	}
+
+	updateUser(user: User): Observable<any> {
+		return this.http.put<any>(`${ACCOUNT_URL}/`, user);
+	}
 }