Upgrade angular app dependencies.

src/main/ts/.vscode/launch.json

@@ -19,7 +19,7 @@
 			"url": "http://localhost:4200",
 			"webRoot": "${workspaceFolder}",
 			"sourceMaps": true,
-			"runtimeExecutable": "/usr/bin/chromium-browser",
+			"runtimeExecutable": "/usr/bin/chromium",
 		},
 		{
 			"name": "Firefox debugger attach",

src/main/ts/angular.json

@@ -31,8 +31,8 @@
               "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
               "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
               "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
-              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
+              "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
-              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
+              "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
               "src/styles.scss"
             ],
             "scripts": [

src/main/ts/package.json

@@ -11,44 +11,44 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^7.2.2",
+    "@angular/animations": "^8.2.0",
-    "@angular/common": "^7.2.2",
+    "@angular/common": "^8.2.0",
-    "@angular/compiler": "^7.2.2",
+    "@angular/compiler": "^8.2.0",
-    "@angular/core": "^7.2.2",
+    "@angular/core": "^8.2.0",
-    "@angular/forms": "^7.2.2",
+    "@angular/forms": "^8.2.0",
-    "@angular/http": "^7.2.2",
+    "@angular/http": "^7.2.15",
-    "@angular/platform-browser": "^7.2.2",
+    "@angular/platform-browser": "^8.2.0",
-    "@angular/platform-browser-dynamic": "^7.2.2",
+    "@angular/platform-browser-dynamic": "^8.2.0",
-    "@angular/router": "^7.2.2",
+    "@angular/router": "^8.2.0",
-    "@fortawesome/fontawesome-free": "^5.6.3",
+    "@fortawesome/fontawesome-free": "^5.10.1",
-    "@types/chart.js": "^2.7.42",
+    "@types/chart.js": "^2.7.56",
-    "angular-bootstrap-md": "^7.3.0",
+    "angular-bootstrap-md": "^8.1.1",
-    "chart.js": "^2.7.3",
+    "chart.js": "^2.8.0",
-    "core-js": "^2.5.4",
+    "core-js": "^3.1.4",
     "hammerjs": "^2.0.8",
-    "rxjs": "~6.3.3",
+    "rxjs": "~6.5.2",
-    "tslib": "^1.9.0",
+    "tslib": "^1.10.0",
-    "zone.js": "~0.8.26"
+    "zone.js": "~0.10.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.12.0",
+    "@angular-devkit/build-angular": "~0.802.0",
-    "@angular/cli": "~7.2.3",
+    "@angular/cli": "~8.2.0",
-    "@angular/compiler-cli": "^7.2.2",
+    "@angular/compiler-cli": "^8.2.0",
-    "@angular/language-service": "^7.2.2",
+    "@angular/language-service": "^8.2.0",
-    "@types/jasmine": "^2.8.16",
+    "@types/jasmine": "^3.3.16",
-    "@types/jasminewd2": "~2.0.3",
+    "@types/jasminewd2": "~2.0.6",
-    "@types/node": "~8.9.4",
+    "@types/node": "~12.6.9",
-    "codelyzer": "~4.3.0",
+    "codelyzer": "~5.1.0",
-    "jasmine-core": "~2.99.1",
+    "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~3.0.0",
+    "karma": "~4.2.0",
-    "karma-chrome-launcher": "~2.2.0",
+    "karma-chrome-launcher": "~3.0.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~1.1.2",
+    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^0.2.2",
+    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.0",
+    "protractor": "~5.4.2",
-    "ts-node": "~7.0.0",
+    "ts-node": "~8.3.0",
-    "tslint": "~5.11.0",
+    "tslint": "~5.18.0",
-    "typescript": "~3.2.4"
+    "typescript": "~3.5.3"
   }
 }

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

@@ -1,55 +1,50 @@
 <h1>Paramètres</h1>
 <div class="align-top">
-	<div class="card hoverable">
+	<mdb-card class="hoverable" routerLink="/changePassword">
-		<a routerLink="/changePassword">
+		<mdb-card-text>
-			<div class="card-body row">
+			<div class="card-title">
-				<div class="col-10">
-					<h4>
 				<i class="fa fa-lock blue-text"></i>
 				Mot de passe
-					</h4>
+				<div class="float-right">
-				</div>
-				<div class="col-1 d-flex align-items-center text-right">
 					<i class="fa fa-chevron-right"></i>
 				</div>
 			</div>
-			<div class="card-body grey lighten-4">
+		</mdb-card-text>
+
+		<div class="card-footer text-muted text-center mt-4">
 			Changer de mot de passe
 		</div>
-		</a>
+	</mdb-card>
-	</div>
+
-	<div class="card hoverable">
+	<mdb-card class="hoverable" routerLink="/profilEdit">
-		<a routerLink="/profilEdit">
+		<mdb-card-text>
-			<div class="card-body row">
+			<div class="card-title">
-				<div class="col-10">
-					<h4>
 				<i class="fa fa-user-circle blue-text"></i>
 				Mes informations
-					</h4>
+				<div class="float-right">
-				</div>
-				<div class="col-1 d-flex align-items-center text-right">
 					<i class="fa fa-chevron-right"></i>
 				</div>
 			</div>
-			<div class="card-body grey lighten-4">
+		</mdb-card-text>
+
+		<div class="card-footer text-muted text-center mt-4">
 			Modifier les informations personnelles comme mon nom, mon adresse mail ou encore mon image de profil
 		</div>
-		</a>
+	</mdb-card>
-	</div>
+
-	<div class="card grey-text">
+	<mdb-card class="grey-text">
-		<div class="card-body row">
+		<mdb-card-text>
-			<div class="col-10">
+			<div class="card-title">
-				<h4>
 				<i class="fa fa-cog"></i>
 				Paramètres de compte
-				</h4>
+				<div class="float-right">
-			</div>
-			<div class="col-1 d-flex align-items-center text-right">
 					<i class="fa fa-chevron-right"></i>
 				</div>
 			</div>
-		<div class="card-body grey lighten-4">
+		</mdb-card-text>
+
+		<div class="card-footer text-muted text-center mt-4">
 			Paramètres divers
 		</div>
-	</div>
+	</mdb-card>
 </div>

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

@@ -17,6 +17,19 @@ import { Component } from '@angular/core';
 			display: inline-block;
 			vertical-align: top;
 		}
+		.card-title {
+			font-size: 1.5rem;
+			font-weight: 300;
+			margin: 15px;
+			line-height: 1.2;
+		}
+		.card-footer {
+			margin-top: 0 !important;
+			text-align: left !important;
+		}
+		.hoverable {
+			cursor: pointer;
+		}
 	`]
 })
 export class AccountSettingsComponent {

src/main/ts/src/app/account-settings/change-password/change-password.component.html

@@ -41,16 +41,11 @@
 						required />
 				<label for="confirmPassword">Confirmation de votre mot de passe</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">{{error}}</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"
+				<button class="float-right waves-effect waves-light indigo white-text btn"
 						type="submit" [disabled]="!changePasswordForm.form.valid">
 					Suivant
 				</button>

src/main/ts/src/app/account-settings/change-password/change-password.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { PasswordWrapper } from '../../core/entities';
 import { ChangePasswordService } from './change-password.service';
 import { RouteReuseStrategy, Router } from '@angular/router';
+import { NotificationsComponent } from 'src/app/core/notifications/notifications.component';
 
 @Component({
 	selector: 'app-change-password',
@@ -25,7 +26,6 @@ import { RouteReuseStrategy, Router } from '@angular/router';
 })
 export class ChangePasswordComponent {
 	model: PasswordWrapper = new PasswordWrapper('', '', '');
-	error: string;
 
 	constructor(
 		private router: Router,
@@ -34,27 +34,15 @@ export class ChangePasswordComponent {
 
 	onSubmit(): void {
 		if (this.model.newPassword !== this.model.confirmPassword) {
-			this.setMessage('Les mots de passe saisis ne correspondent pas.');
+			NotificationsComponent.error('Les mots de passe saisis ne correspondent pas.');
 		} else {
 			this.changePasswordService.changePassword(this.model).subscribe(() => {
+				NotificationsComponent.success('Mot de passe modifié.');
 				this.router.navigate(['/accountSettings']);
 			}, error => {
-				this.setMessage('Le mot de passe saisi ne correspond pas au votre.');
+				console.error(error);
+				NotificationsComponent.error('Le mot de passe saisi ne correspond pas au votre.');
 			});
 		}
 	}
-
-	setMessage(message: string): void {
-		this.error = message;
-
-		const resultMsgDiv = document.getElementById('errorMsg');
-		resultMsgDiv.style.maxHeight = '64px';
-
-		setTimeout(() => {
-			resultMsgDiv.style.maxHeight = '0px';
-			setTimeout(() => {
-				this.error = undefined;
-			}, 550);
-		}, 3000);
-	}
 }

src/main/ts/src/app/core/notifications/notification-element/notification-element.component.html

@@ -1,7 +1,7 @@
 <div id="notification" #notification class="alert {{model.notificationClass.clazz}}" role="alert">
   <mdb-icon fas [icon]="model.notificationClass.icon"></mdb-icon> {{model.content}}
   <span id="close">
-    <i class="fa fa-window-close fas close"
+    <i class="fa fa-times-circle fas close"
         (click)="model.hide()"></i>
   </span>
 </div>

src/main/ts/src/app/core/notifications/notification-element/notification-element.component.ts

@@ -32,7 +32,7 @@ export class NotificationElement implements OnInit {
 	/**
 	 * The notification DOM element.
 	 */
-	@ViewChild('notification') notification: ElementRef;
+	@ViewChild('notification', {static: true}) notification: ElementRef;
 
 	/**
 	 * Sets the DOM element in the model object and plays with opacity.

src/main/ts/src/app/health-check/health-check.component.html

@@ -14,8 +14,8 @@
 				<li class="list-group-item">
 					Version <mdb-badge pill="true" primary="true" class="float-right">{{metrics.version}}</mdb-badge>
 				</li>
-				<li class="list-group-item">
+				<li class="list-group-item" *ngIf="!!metrics.uptime">
-					Démarré depuis {{metrics.uptime}}
+					Démarré depuis le {{getLocalDateString()}}
 				</li>
 			</ul>
 		</mdb-card-body>

src/main/ts/src/app/health-check/health-check.component.ts

@@ -20,4 +20,7 @@ export class HealthCheckComponent implements OnInit {
 		});
 	}
 
+	getLocalDateString(): string {
+		return new Date(this.metrics.uptime).toLocaleString('fr-Fr');
+	}
 }

src/main/ts/src/app/login/login.component.html

@@ -34,7 +34,7 @@
 				<a routerLink="/signin" class="indigo-text">
 					Je n'ai pas de compte
 				</a>
-				<button class="float-right waves-effect waves-light indigo btn"
+				<button class="float-right waves-effect waves-light indigo white-text btn"
 						type="submit" [disabled]="!loginForm.form.valid">
 					Suivant
 				</button>

src/main/ts/src/app/posts/create-update/create-update-post.component.html

@@ -69,25 +69,31 @@
 			</div>
 			<div id="toolbox" class="row">
 				<button type="button"
-						class="btn btn-floating waves-light"
+						class="btn btn-floating waves-light white-text"
 						(click)="injectHeader('h1')"
 						mdbTooltip="Titre 1"
             placement="bottom"
-						mdbRippleRadius><b>H1</b></button>
+						mdbRippleRadius>
+					<b>H1</b>
+				</button>
 				<button type="button"
-						class="btn btn-floating waves-light"
+						class="btn btn-floating waves-light white-text"
 						(click)="injectHeader('h2')"
 						mdbTooltip="Titre 2"
 						placement="bottom"
-						mdbRippleRadius><b>H2</b></button>
+						mdbRippleRadius>
+					<b>H2</b>
+				</button>
 				<button type="button"
-						class="btn btn-floating waves-light"
+						class="btn btn-floating waves-light white-text"
 						(click)="injectHeader('h3')"
 						mdbTooltip="Titre 3"
 						placement="bottom"
-						mdbRippleRadius><b>H3</b></button>
+						mdbRippleRadius>
+					<b>H3</b>
+				</button>
 				<button type="button"
-						class="btn btn-floating waves-light"
+						class="btn btn-floating waves-light white-text"
 						(click)="openImagesModal()"
 						mdbTooltip="Image"
             placement="bottom"
@@ -95,7 +101,7 @@
 					<i class="fa fa-image"></i>
 				</button>
 				<button type="button"
-						class="btn btn-floating waves-light"
+						class="btn btn-floating waves-light white-text"
 						(click)="injectLink()"
 						mdbTooltip="Lien"
             placement="bottom"
@@ -103,7 +109,7 @@
 					<i class="fa fa-link"></i>
 				</button>
 				<button type="button"
-						class="btn btn-floating waves-light"
+						class="btn btn-floating waves-light white-text"
 						(click)="frameCode.show()"
 						mdbTooltip="Extrait de code"
             placement="bottom"
@@ -125,16 +131,6 @@
 				</textarea>
 				<label for="text">Contenu de l'article</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>
 		<div *ngIf="activatedTab === 'Aperçu'">
 			<app-spinner *ngIf="!parsedPost"></app-spinner>
@@ -148,16 +144,6 @@
 				</div>
 			</div>
 		</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 id="footer">
 			<a routerLink="/myPosts">Annuler</a>
 			<button type="button"

src/main/ts/src/app/posts/create-update/create-update-post.component.scss

@@ -67,14 +67,6 @@
 	overflow-y: scroll;
 }
 
-#resultMsg, #errorMsg {
-	max-height: 0;
-    overflow: hidden;
-	transition: max-height 0.5s ease-out;
-	margin: 0;
-}
-
-
 .wrap {
 	top: 40%;
 	width: 100%;
@@ -232,3 +224,9 @@ $btnSize: 45px;
 	margin-right: 15px;
 	margin-bottom: 15px;
 }
+
+#codeTmp {
+	padding: 0;
+	height: 250px;
+	overflow-y: scroll;
+}

src/main/ts/src/app/posts/create-update/create-update-post.component.ts

@@ -1,5 +1,10 @@
-import { Component, OnInit, SecurityContext, ViewChild } from '@angular/core';
+import {
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+	Component,
+	OnInit,
+	SecurityContext,
+	ViewChild
+} from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import { Router, ActivatedRoute, RoutesRecognized, NavigationEnd } from '@angular/router';
 
 import { Post, Category, Image } from '../../core/entities';
@@ -9,6 +14,7 @@ import { CreateUpdatePostService } from './create-update-post.service';
 import { filter, pairwise } from 'rxjs/operators';
 
 import { HttpEventType, HttpResponse } from '@angular/common/http';
+import { NotificationsComponent } from 'src/app/core/notifications/notifications.component';
 
 enum Tabs {
 	EDITION = 'Édition',
@@ -25,8 +31,8 @@ declare let Prism: any;
 export class CreateUpdatePostComponent implements OnInit {
 	static INPUT_POST_TEXT = 'text';
 
-	@ViewChild('frameCode') public contentModal;
+	@ViewChild('frameCode', {static: true}) public contentModal;
-	@ViewChild('frameImages') public imagesModal;
+	@ViewChild('frameImages', {static: true}) public imagesModal;
 
 	model: Post = new Post('', '', '', '', '', null, null, null);
 	parsedPost: Post;
@@ -35,9 +41,6 @@ export class CreateUpdatePostComponent implements OnInit {
 
 	activatedTab: string;
 
-	modelError: string;
-	result: string;
-
 	// Variables for the code popup
 	codeTmp: string;
 	languageTmp: string;
@@ -80,7 +83,7 @@ export class CreateUpdatePostComponent implements OnInit {
 			// FIXME: The message isn't shown and the method ngOnInit is too much called, also during others components navigation.
 			this.router.events.pipe(filter(e => e instanceof RoutesRecognized), pairwise()).subscribe((events: any) => {
 				if (events[0].urlAfterRedirects === '/posts/new') {
-					this.setMessage('Article créé.', false);
+					NotificationsComponent.success('Article créé.');
 				}
 			});
 		}
@@ -156,7 +159,7 @@ export class CreateUpdatePostComponent implements OnInit {
 
 			if (this.model.key) {
 				this.createUpdatePostService.updatePost(this.model).subscribe(post => {
-					this.setMessage('Modification enregistrée', false);
+					NotificationsComponent.error('Modification enregistrée');
 				});
 			} else {
 				this.createUpdatePostService.addPost(this.model).subscribe(post => {
@@ -164,24 +167,10 @@ export class CreateUpdatePostComponent implements OnInit {
 				});
 			}
 		} else {
-			this.setMessage('Veuillez saisir les champs obligatoires.', true);
+			NotificationsComponent.error('Veuillez saisir les champs obligatoires.');
 		}
 	}
 
-	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);
-	}
-
 	openImagesModal(): void {
 		this.imagesLoaded = false;
 		this.imagesModal.show();

src/main/ts/src/app/posts/post.component.html

@@ -3,8 +3,10 @@
 	<div class="card" *ngIf="loaded">
 		<img [src]="post?.image" class="img-fluid" alt="Post image">
 
-		<a *ngIf="owned" class="btn-card-floating waves-light white-text"
+		<a *ngIf="owned"
-				routerLink="/posts/update/{{post.key}}">
+				class="btn-card-floating waves-light white-text"
+				routerLink="/posts/update/{{post.key}}"
+				mdbTooltip="Modifier l'article" placement="bottom">
 			<i class="fa fa-pen"></i>
 		</a>
 
@@ -47,18 +49,21 @@
 					</div>
 				</div>
 				<div class="modal-footer">
-					<a type="button"
+					<button class="btn btn-outline-danger waves-effect waves-light"
-							class="btn btn-outline-secondary-modal"
+							type="button"
 							data-dismiss="modal"
 							(click)="alertDelete.hide()"
 							mdbRippleRadius>
 						Annuler
-					</a>
+					</button>
-					<a type="button" mdbRippleRadius
+					<button class="btn btn-primary-modal waves-light white-text"
-							class="btn btn-primary-modal waves-light"
+							type="button"
-							(click)="deletePost()">
+							data-dismiss="modal"
-						<i class="fa fa-trash"></i> Supprimer
+							(click)="deletePost()"
-					</a>
+							mdbRippleRadius>
+							<i class="fa fa-trash white-text"></i>
+							Supprimer
+					</button>
 				</div>
 			</div>
 		</div>

src/main/ts/src/app/posts/post.component.ts

@@ -38,7 +38,7 @@ export class PostComponent implements OnInit {
 	notFound: boolean;
 	owned: boolean;
 
-	@ViewChild('alertDelete') alertDelete;
+	@ViewChild('alertDelete', {static: true}) alertDelete;
 
 	postDeletionFailed: boolean;
 

src/main/ts/src/app/signin/signin.component.html

@@ -61,7 +61,7 @@
 				<a routerLink="/login" class="indigo-text">
 					Connexion
 				</a>
-				<button class="float-right waves-effect waves-light indigo btn"
+				<button class="float-right waves-effect waves-light indigo white-text btn"
 						type="submit" [disabled]="!signinForm.form.valid">
 					Suivant
 				</button>

src/main/ts/src/styles.scss

@@ -35,7 +35,6 @@ body {
 .btn-card-floating:hover {
 	box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
 }
-
 /* ***** End of floating card button ***** */
 
 /* ***** Dropdown items style ***** */
@@ -69,3 +68,9 @@ body {
 	box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
 }
 /* ***** End of Dropdown items style ***** */
+
+/* ***** Card style ***** */
+.card {
+	border: 1px solid rgba(0, 0, 0, 0.125) !important;
+}
+/* ***** End of Card style ***** */