Upgrade angular app dependencies.

This commit is contained in:
2019-08-05 21:23:56 +02:00
parent d4f6e344bb
commit cba6d7f33a
20 changed files with 4500 additions and 4389 deletions

View File

@@ -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",

View File

@@ -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/scss/mdb-free.scss",
"node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
"node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
"src/styles.scss"
],
"scripts": [

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

@@ -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 {

View File

@@ -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>

View File

@@ -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);
}
}

View File

@@ -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>

View File

@@ -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.

View File

@@ -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">
Démarré depuis {{metrics.uptime}}
<li class="list-group-item" *ngIf="!!metrics.uptime">
Démarré depuis le {{getLocalDateString()}}
</li>
</ul>
</mdb-card-body>

View File

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

View File

@@ -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>

View File

@@ -69,72 +69,68 @@
</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>
placement="bottom"
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>
placement="bottom"
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>
placement="bottom"
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"
placement="bottom"
mdbRippleRadius>
<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"
placement="bottom"
mdbRippleRadius>
<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"
placement="bottom"
mdbRippleRadius>
<i class="fa fa-code"></i>
</button>
</div>
<div class="md-form">
<textarea mdbInputDirective
id="text"
name="text"
type="text"
class="md-textarea form-control"
[(ngModel)]="model.text"
#text="ngModel"
data-error="Veuillez saisir le contenu de l'article"
[validateSuccess]="false"
required>
</textarea>
<label for="text">Contenu de l'article</label>
<textarea mdbInputDirective
id="text"
name="text"
type="text"
class="md-textarea form-control"
[(ngModel)]="model.text"
#text="ngModel"
data-error="Veuillez saisir le contenu de l'article"
[validateSuccess]="false"
required>
</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"

View File

@@ -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;
}

View File

@@ -1,5 +1,10 @@
import { Component, OnInit, SecurityContext, ViewChild } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import {
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('frameImages') public imagesModal;
@ViewChild('frameCode', {static: true}) public contentModal;
@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();

View File

@@ -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"
routerLink="/posts/update/{{post.key}}">
<a *ngIf="owned"
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"
class="btn btn-outline-secondary-modal"
<button class="btn btn-outline-danger waves-effect waves-light"
type="button"
data-dismiss="modal"
(click)="alertDelete.hide()"
mdbRippleRadius>
Annuler
</a>
<a type="button" mdbRippleRadius
class="btn btn-primary-modal waves-light"
(click)="deletePost()">
<i class="fa fa-trash"></i> Supprimer
</a>
</button>
<button class="btn btn-primary-modal waves-light white-text"
type="button"
data-dismiss="modal"
(click)="deletePost()"
mdbRippleRadius>
<i class="fa fa-trash white-text"></i>
Supprimer
</button>
</div>
</div>
</div>

View File

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

View File

@@ -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>

View File

@@ -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 ***** */