+
`,
+ styles: [`
+ div.card {
+ margin-bottom: 50px;
+ }
+ .card .card-data {
+ padding: 15px;
+ background-color: #f5f5f5;
+ }
+ .creation-date-area {
+ color: #bdbdbd;
+ font-style: italic;
+ }
+ .author-img {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ margin-right: 15px;
+ }
+ #post-image {
+ width: 100%;
+ }
+ `]
+})
+export class PostCardComponent {
+ @Input() post: Post;
+
+ getAvatarUrl(): string {
+ return this.post.author.image
+ ? `/api/images/loadAvatar/${this.post.author.image}`
+ : './assets/images/default_user.png';
+ }
+}
diff --git a/src/main/ts-v7/src/app/core/services/auth.service.ts b/src/main/ts-v7/src/app/core/services/auth.service.ts
new file mode 100755
index 0000000..0244e0a
--- /dev/null
+++ b/src/main/ts-v7/src/app/core/services/auth.service.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { User } from '../entities';
+
+const PARAM_USER = 'user';
+
+@Injectable()
+export class AuthService {
+ constructor() {}
+
+ public setAuthenticated(user: User): void {
+ this.setUser(user);
+ }
+ public setAnonymous(): void {
+ localStorage.clear();
+ }
+
+ public isAuthenticated(): boolean {
+ return this.getUser() != null;
+ }
+
+ public isAdmin(): boolean {
+ return false;
+ }
+
+ private setUser(user: User): void {
+ localStorage.setItem(PARAM_USER, JSON.stringify(user));
+ }
+
+ public getUser(): User {
+ return JSON.parse(localStorage.getItem(PARAM_USER));
+ }
+}
diff --git a/src/main/ts-v7/src/app/disconnection/disconnection.component.ts b/src/main/ts-v7/src/app/disconnection/disconnection.component.ts
new file mode 100755
index 0000000..af616f1
--- /dev/null
+++ b/src/main/ts-v7/src/app/disconnection/disconnection.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Http } from '@angular/http';
+
+import { AuthService } from '../core/services/auth.service';
+
+@Component({
+ selector: 'app-disconnection',
+ template: 'Déconnexion...'
+})
+export class DisconnectionComponent implements OnInit {
+
+ constructor(
+ private authService: AuthService,
+ private router: Router,
+ private http: Http
+ ) {}
+
+ ngOnInit(): void {
+ this.http.get('/api/account/logout').subscribe(() => {
+ console.log('Logout success.');
+ this.authService.setAnonymous();
+ }, error => {
+ console.error('Error during logout from API.', error);
+ }, () => {
+ this.router.navigate(['/home']);
+ });
+ }
+}
diff --git a/src/main/ts-v7/src/app/header/header.component.html b/src/main/ts-v7/src/app/header/header.component.html
new file mode 100755
index 0000000..ba4d2d1
--- /dev/null
+++ b/src/main/ts-v7/src/app/header/header.component.html
@@ -0,0 +1,62 @@
+
+ ![Article]()
+
+
+
+
+
+
+ {{post.title}}
+{{post.description}}
+
+ ![]()
+ Article écrit par {{post.author.name}}
+ ({{post.creationDate | date:'yyyy-MM-dd HH:mm:ss'}})
+
+ 
+ Codiki
+ Codiki - {{title}}
+
+
+
diff --git a/src/main/ts-v7/src/app/home/home.component.scss b/src/main/ts-v7/src/app/home/home.component.scss
new file mode 100755
index 0000000..8d84d2e
--- /dev/null
+++ b/src/main/ts-v7/src/app/home/home.component.scss
@@ -0,0 +1,3 @@
+div.card {
+ margin-bottom: 50px;
+}
diff --git a/src/main/ts-v7/src/app/home/home.component.ts b/src/main/ts-v7/src/app/home/home.component.ts
new file mode 100755
index 0000000..1bf46c9
--- /dev/null
+++ b/src/main/ts-v7/src/app/home/home.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HomeService } from './home.service';
+import { Post } from '../core/entities';
+
+@Component({
+ selector: 'app-home',
+ templateUrl: './home.component.html',
+ styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+ listArticle: ArrayDerniers articles
+
+
+
+
diff --git a/src/main/ts-v7/src/app/login/login.component.ts b/src/main/ts-v7/src/app/login/login.component.ts
new file mode 100755
index 0000000..4baecbf
--- /dev/null
+++ b/src/main/ts-v7/src/app/login/login.component.ts
@@ -0,0 +1,66 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { User } from '../core/entities';
+import { LoginService } from './login.service';
+import { AuthService } from '../core/services/auth.service';
+
+@Component({
+ selector: 'app-login',
+ templateUrl: './login.component.html',
+ styles: [`
+ #form {
+ padding-bottom: 10px;
+ }
+
+ .submitFormArea {
+ line-height: 50px;
+ }
+
+ #errorMsg {
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.5s ease-out;
+ margin: 0;
+ }
+ `]
+})
+export class LoginComponent {
+ model: User = new User('', '', '', '', '', null, null, '');
+ loginError: string;
+
+ constructor(
+ private router: Router,
+ private loginService: LoginService,
+ private authService: AuthService
+ ) {}
+
+ onSubmit(): void {
+ this.loginService.login(this.model).subscribe((pUser: User) => {
+ console.log('Login success.');
+ this.authService.setAuthenticated(pUser);
+ this.router.navigate(['/home']);
+ }, (error) => {
+ if (error.status === 401) {
+ console.log('Login attempt failed.');
+ this.setMessage('Adresse email ou mot de passe incorrect.');
+ } else {
+ console.error('Error during login attempt.', error);
+ this.setMessage('Une erreur est survenue lors de la connexion.');
+ }
+ });
+ }
+
+ setMessage(message: string): void {
+ this.loginError = message;
+
+ const resultMsgDiv = document.getElementById('errorMsg');
+ resultMsgDiv.style.maxHeight = '64px';
+
+ setTimeout(() => {
+ resultMsgDiv.style.maxHeight = '0px';
+ setTimeout(() => {
+ this.loginError = undefined;
+ }, 550);
+ }, 3000);
+ }
+}
diff --git a/src/main/ts-v7/src/app/login/login.service.ts b/src/main/ts-v7/src/app/login/login.service.ts
new file mode 100755
index 0000000..b6d2de4
--- /dev/null
+++ b/src/main/ts-v7/src/app/login/login.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { User } from '../core/entities';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable()
+export class LoginService {
+
+ constructor(
+ private http: HttpClient
+ ) {}
+
+ public login(user: User): Observable
+
+