Big unknown changes commit...

src/main/java/org/cerberus/controllers/ApplicationController.java

@@ -10,6 +10,7 @@ import org.springframework.http.HttpStatus;
 import org.springframework.web.bind.annotation.*;
 
 import java.security.Principal;
+import java.util.List;
 import java.util.UUID;
 
 import static org.cerberus.core.constant.RoleSecurity.ADMIN;
@@ -35,6 +36,13 @@ public class ApplicationController {
         return service.findByIdOrElseThrow(id);
     }
 
+    @GetMapping
+    @JsonView({View.ApplicationDTO.class})
+    public List<Application> findAll(Principal connectedUser) {
+        securityService.getAdminUser(connectedUser);
+        return service.findAll();
+    }
+
     @PostMapping
     @JsonView({View.ApplicationDTO.class})
     public Application create(@RequestBody Application application, Principal connectedUser) {

src/main/java/org/cerberus/entities/persistence/ConfigurationFile.java

@@ -19,6 +19,9 @@ public class ConfigurationFile {
     @JsonView({View.ConfigurationFileDTO.class})
     private String path;
 
+    @JsonView({View.ConfigurationFileDTO.class})
+    private transient String content;
+
     @ManyToOne(fetch = FetchType.LAZY)
     @JoinColumn(name = "application_id")
     @JsonView({ConfigurationFile.class})
@@ -45,6 +48,14 @@ public class ConfigurationFile {
         this.path = path;
     }
 
+    public String getContent() {
+        return content;
+    }
+
+    public void setContent(String content) {
+        this.content = content;
+    }
+
     public Application getApplication() {
         return application;
     }

src/main/java/org/cerberus/services/ApplicationService.java

@@ -8,6 +8,7 @@ import org.cerberus.validators.ApplicationValidator;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
+import java.util.List;
 import java.util.UUID;
 
 import static org.cerberus.core.constant.Role.MAINTAINER;
@@ -76,4 +77,8 @@ public class ApplicationService extends AbstractService<Application> {
     public int getStatus(UUID applicationId) {
         return daemonHandlingService.getStatus(findByIdOrElseThrow(applicationId));
     }
+
+    public List<Application> findAll() {
+        return repository.findAll();
+    }
 }

src/main/java/org/cerberus/services/ConfigurationFileService.java

@@ -1,14 +1,20 @@
 package org.cerberus.services;
 
 import org.cerberus.core.exceptions.BadRequestException;
+import org.cerberus.core.exceptions.InternalServerErrorException;
 import org.cerberus.core.utils.StringUtils;
 import org.cerberus.entities.persistence.ConfigurationFile;
 import org.cerberus.repositories.ConfigurationFileRepository;
 import org.cerberus.validators.ConfigurationFileValidator;
 import org.springframework.stereotype.Service;
 
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Paths;
 import java.util.UUID;
 
+import static org.cerberus.core.utils.StringUtils.concat;
+
 @Service
 public class ConfigurationFileService extends AbstractService<ConfigurationFile> {
     private ApplicationService applicationService;
@@ -28,7 +34,16 @@ public class ConfigurationFileService extends AbstractService<ConfigurationFile>
         if(!applicationService.existsById(applicationId)) {
             throwNotFoundException();
         }
-        return findByIdOrElseThrow(configurationFileId);
+
+        ConfigurationFile configurationFile = findByIdOrElseThrow(configurationFileId);
+
+        try {
+            configurationFile.setContent(Files.readString(Paths.get(configurationFile.getPath())));
+        } catch(IOException ex) {
+            throw new InternalServerErrorException(concat("Error during file reading for ", configurationFile.getId()));
+        }
+
+        return configurationFile;
     }
 
     public ConfigurationFile create(UUID applicationId, ConfigurationFile configurationFile) {

src/main/ts/src/app/app-routing.module.ts

@@ -1,3 +1,6 @@
+import { UserManagementComponent } from './management/user-management/user-management.component';
+import { AppEditionComponent } from './management/app-management/app-edition/app-edition.component';
+import { AppManagementComponent } from './management/app-management/app-management.component';
 import { DisconnectionComponent } from './disconnection/disconnection.component';
 import { AppComponent } from './app.component';
 import { ServiceUnavailableComponent } from './service-unavailable/service-unavailable.component';
@@ -7,6 +10,9 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [
   { path: 'serviceUnavailable', component: ServiceUnavailableComponent },
   { path: 'disconnection', component: DisconnectionComponent },
+  { path: 'management/applications', component: AppManagementComponent },
+  { path: 'management/applications/:appId', component: AppEditionComponent },
+  { path: 'management/users', component: UserManagementComponent },
   { path: '', component: AppComponent }
 ];
 

src/main/ts/src/app/app.component.scss

@@ -2,5 +2,6 @@ main {
   &.container {
     margin-top: 75px;
     padding: 15px 0;
+    padding-bottom: 50px;
   }
 }

src/main/ts/src/app/app.module.ts

@@ -1,3 +1,9 @@
+import { AccordionComponent } from './core/components/accordion/accordion.component';
+import { UserManagementComponent } from './management/user-management/user-management.component';
+import { AppEditionComponent } from './management/app-management/app-edition/app-edition.component';
+import { AppManagementComponent } from './management/app-management/app-management.component';
+import { SideNavElementComponent } from './header/side-nav/side-nav-element/side-nav-element.component';
+import { SideNavComponent } from './header/side-nav/side-nav.component';
 import { ServiceUnavailableInterceptor } from './core/interceptors/service-unavailable.interceptor';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { UserService } from './core/services/user.service';
@@ -26,7 +32,13 @@ import { DisconnectionComponent } from './disconnection/disconnection.component'
       NotificationElement,
       NotificationsComponent,
       ServiceUnavailableComponent,
-      DisconnectionComponent
+      DisconnectionComponent,
+      SideNavComponent,
+      SideNavElementComponent,
+      AppManagementComponent,
+      AppEditionComponent,
+      UserManagementComponent,
+      AccordionComponent
    ],
    imports: [
       AppRoutingModule,

src/main/ts/src/app/core/components/accordion/accordion.component.html

@@ -0,0 +1,6 @@
+<div id="wrapper">
+  <button type="button" id="accordion" #accordion>{{title}}</button>
+  <div id="panel" #panel>
+    <ng-content></ng-content>
+  </div>
+</div>

src/main/ts/src/app/core/components/accordion/accordion.component.scss

@@ -0,0 +1,41 @@
+#wrapper {
+  background-color: #c9dbf3;
+
+  width: 100%;
+
+  #accordion {
+    background-color: #eee;
+    border: none;
+    color: #444;
+    cursor: pointer;
+    outline: none;
+    padding: 18px;
+    text-align: left;
+    transition: 0.4s;
+    width: 100%;
+
+    &.active, &:hover {
+      background-color: #ccc;
+    }
+
+    &:after {
+      content: '\02795';
+      font-size: 13px;
+      color: #777;
+      float: right;
+      margin-left: 5px;
+    }
+
+    &.active:after {
+      content: "\2796";
+    }
+  }
+
+  #panel {
+    padding: 0 18px;
+    background-color: white;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+  }
+}

src/main/ts/src/app/core/components/accordion/accordion.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'app-accordion',
+  templateUrl: './accordion.component.html',
+  styleUrls: ['./accordion.component.scss']
+})
+export class AccordionComponent implements OnInit {
+  @Input() title: string;
+  @Input() group: string;
+  @ViewChild('accordion', {static: true}) accordion: ElementRef;
+  @ViewChild('panel', {static: true}) panel: ElementRef;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.accordion.nativeElement.addEventListener('click', () => {
+      this.accordion.nativeElement.classList.toggle('active');
+
+      const maxHeight = this.panel.nativeElement.style.maxHeight;
+      console.log(this.panel.nativeElement.style);
+      this.panel.nativeElement.style.maxHeight = !!maxHeight ? null : `${this.panel.nativeElement.scrollHeight}px`;
+
+
+    });
+  }
+}

src/main/ts/src/app/core/entities.ts

@@ -25,11 +25,13 @@ export class SignUpDTO {
 
 export class ConfigurationFile {
   constructor(
-    public id: string
+    public id: string,
+    public content: string,
+    public htmlName: string
   ) {}
 
   public static new(): ConfigurationFile {
-    return new ConfigurationFile('');
+    return new ConfigurationFile('', '', `${Math.random() * 100}`);
   }
 }
 
@@ -37,7 +39,7 @@ export class Application {
   constructor(
     public id: string,
     public name: string,
-    public configurationFileList: Array<ConfigurationFile>
+    public configurationFileList: Array<ConfigurationFile> = []
   ) {}
 
   public static new(): Application {

src/main/ts/src/app/core/interceptors/abstract-interceptor.ts

@@ -0,0 +1,42 @@
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpErrorResponse } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { NotificationsComponent } from '../notifications/notifications.component';
+
+/**
+ * Abstract interceptor that do redirection if an error code is intercepted.
+ */
+export abstract class AbstractInterceptor implements HttpInterceptor {
+  constructor(
+    protected router: Router
+  ) {}
+
+  /**
+   * Returns the error code to intercept for redirection.
+   */
+  protected abstract getHandledErrorCode(): number;
+
+  /**
+   * Returns the error message to show in an error notification.
+   */
+  protected abstract supplyErrorMessage(): string;
+
+  /**
+   * Returns the angular route for redirection if the handled error code is intercepted.
+   */
+  protected abstract supplyRedirectionRoute(): string;
+
+  handleError = (error: HttpErrorResponse) => {
+    if (!!error && error.status === this.getHandledErrorCode()) {
+      NotificationsComponent.error(this.supplyErrorMessage());
+      this.router.navigate([this.supplyRedirectionRoute()]);
+    }
+
+    return throwError(error);
+  }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(req).pipe(catchError(this.handleError));
+  }
+}

src/main/ts/src/app/core/interceptors/service-unavailable.interceptor.ts

@@ -4,22 +4,23 @@ import { Observable, throwError } from 'rxjs';
 import { Router } from '@angular/router';
 import { catchError } from 'rxjs/operators';
 import { NotificationsComponent } from '../notifications/notifications.component';
+import { AbstractInterceptor } from './abstract-interceptor';
 
 @Injectable({providedIn: 'root'})
-export class ServiceUnavailableInterceptor implements HttpInterceptor {
-
+export class ServiceUnavailableInterceptor extends AbstractInterceptor {
   constructor(
-    private router: Router
-  ) {}
-
-  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    return next.handle(req).pipe(catchError(ex => {
-      if (!!ex && ex.status === 504) {
-        NotificationsComponent.error('Le serveur est actuellement indisponible. Veuillez contacter l\'administrateur.');
-        this.router.navigate(['/serviceUnavailable']);
+    protected router: Router
+  ) {
+    super(router);
   }
 
-      return throwError(ex);
-    }));
+  protected getHandledErrorCode(): number {
+    return 504;
+  }
+  protected supplyErrorMessage(): string {
+    return 'Le serveur est actuellement indisponible. Veuillez contacter l\'administrateur.';
+  }
+  protected supplyRedirectionRoute(): string {
+    return '/serviceUnavailable';
   }
 }

src/main/ts/src/app/core/interceptors/unauthorized.interceptor.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { AbstractInterceptor } from './abstract-interceptor';
+
+@Injectable({providedIn: 'root'})
+export class UnauthorizedInterceptor extends AbstractInterceptor {
+  constructor(
+    protected router: Router
+  ) {
+    super(router);
+  }
+
+  protected getHandledErrorCode(): number {
+    return 401;
+  }
+  protected supplyErrorMessage(): string {
+    return 'Impossible d\'accéder à cette ressource car vous n\'êtes pas connecté.';
+  }
+  protected supplyRedirectionRoute(): string {
+    return '/login';
+  }
+}

src/main/ts/src/app/core/services/application.service.ts

@@ -0,0 +1,21 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Application } from '../entities';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApplicationService {
+  constructor(
+    private httpClient: HttpClient
+  ) {}
+
+  findAll(): Observable<Array<Application>> {
+    return this.httpClient.get<Array<Application>>(`/api/applications`);
+  }
+
+  findById(appId: string): Observable<Application> {
+    return this.httpClient.get<Application>(`/api/applications/${appId}`);
+  }
+}

src/main/ts/src/app/core/services/user.service.spec.ts

@@ -1,16 +0,0 @@
-/* tslint:disable:no-unused-variable */
-
-import { TestBed, async, inject } from '@angular/core/testing';
-import { UserService } from './user.service';
-
-describe('Service: User', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [UserService]
-    });
-  });
-
-  it('should ...', inject([UserService], (service: UserService) => {
-    expect(service).toBeTruthy();
-  }));
-});

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

@@ -1,6 +1,6 @@
 <header class="fixed-top brown darken-2 white-text">
   <span id="left-area">
-    <button mdbBtn class="flat rounded-circle" mdbWavesEffect>
+    <button mdbBtn class="flat rounded-circle" (click)="sideNav.open()" mdbWavesEffect>
       <i class="fa fa-bars"></i>
     </button>
   </span>
@@ -22,3 +22,4 @@
   </span>
 </header>
 <app-login #loginForm></app-login>
+<app-side-nav #sideNav></app-side-nav>

src/main/ts/src/app/header/header.component.ts

@@ -1,3 +1,4 @@
+import { SideNavComponent } from './side-nav/side-nav.component';
 import { AuthService } from './../core/services/auth.service';
 import { NotificationsComponent } from './../core/notifications/notifications.component';
 import { Component, OnInit, ViewChild } from '@angular/core';
@@ -9,8 +10,6 @@ import { LoginComponent } from '../login/login.component';
   styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent {
-	@ViewChild('loginForm', {static: true}) loginForm: LoginComponent;
-
   constructor(
     private authService: AuthService
   ) {}

src/main/ts/src/app/header/side-nav/side-nav-element/side-nav-element.component.html

@@ -0,0 +1,6 @@
+<a [routerLink]="['/' + routerLink]" routerLinkActive="router-link-active">
+  <div id="element" #element>
+    <i class="element-icon fa fa-{{icon}}"></i>
+    {{text}}
+  </div>
+</a>

src/main/ts/src/app/header/side-nav/side-nav-element/side-nav-element.component.scss

@@ -0,0 +1,21 @@
+a, a:hover, a:visited, a:focus {
+  color: inherit;
+}
+
+#element {
+  padding: 15px 25px;
+  padding-left: 60px;
+  position: relative;
+
+  &:hover {
+    background-color: #402c25;
+  }
+
+
+  .element-icon {
+    left: 25px;
+    margin-right: 15px;
+    position: absolute;
+    top: 19px;
+  }
+}

src/main/ts/src/app/header/side-nav/side-nav-element/side-nav-element.component.ts

@@ -0,0 +1,20 @@
+import { SIDE_NAV_WIDTH } from './../side-nav.component';
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'app-side-nav-element',
+  templateUrl: './side-nav-element.component.html',
+  styleUrls: ['./side-nav-element.component.scss']
+})
+export class SideNavElementComponent implements OnInit {
+  @ViewChild('element', {static: true}) element: ElementRef;
+  @Input() text: string;
+  @Input() icon: string;
+  @Input() routerLink: string;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.element.nativeElement.style.width = SIDE_NAV_WIDTH;
+  }
+}

src/main/ts/src/app/header/side-nav/side-nav.component.html

@@ -0,0 +1,10 @@
+<div id="overlay" #overlay (click)="close()"></div>
+<div id="sideNav" #sideNav>
+  <i id="sideNav-close" class="fa fa-times-circle" (click)="close()"></i>
+  <div id="header" #header>Menu principal</div>
+  <div id="content">
+    <ng-container *ngFor="let elem of appSideNavElementList">
+      <app-side-nav-element [text]="elem.text" [icon]="elem.icon" [routerLink]="elem.link" (click)="close()"></app-side-nav-element>
+    </ng-container>
+  </div>
+</div>

src/main/ts/src/app/header/side-nav/side-nav.component.scss

@@ -0,0 +1,53 @@
+#sideNav {
+  background-color: #5d4037;
+  color: white;
+  height: 100%;
+  left: 0;
+  overflow-x: hidden;
+  padding-top: 78px;
+  position: fixed;
+  top: 0;
+  transition: 0.3s;
+  width: 0;
+  z-index: 1050;
+
+  #sideNav-close {
+    background-color: transparent;
+    border: 0;
+    position: absolute;
+    right: 30px;
+    top: 31px;
+    z-index: 1;
+
+    &:hover {
+      cursor: pointer;
+      color: #ddd;
+    }
+  }
+
+  #header {
+    font-size: 2rem;
+    left: 0;
+    padding: 15px;
+    position: absolute;
+    text-align: center;
+    top: 0;
+  }
+
+  #content {
+
+  }
+}
+
+#overlay {
+  background-color: #000;
+  left: 0;
+  height: 100%;
+  opacity: 0;
+  top: 0;
+  position: fixed;
+  transition: 0.5s;
+  visibility: hidden;
+  width: 100%;
+  z-index: 1049;
+}

src/main/ts/src/app/header/side-nav/side-nav.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+
+export const SIDE_NAV_WIDTH = '350px';
+
+@Component({
+  selector: 'app-side-nav',
+  templateUrl: './side-nav.component.html',
+  styleUrls: ['./side-nav.component.scss']
+})
+export class SideNavComponent implements OnInit {
+  appSideNavElementList = [{
+    text: 'Gestion des utilisateurs',
+    icon: 'users-cog',
+    link: 'management/users'
+  }, {
+    text: 'Gestion des applications',
+    icon: 'window-restore',
+    link: 'management/applications'
+  }];
+  @ViewChild('sideNav', {static: true}) sideNavDiv: ElementRef;
+  @ViewChild('overlay', {static: true}) overlay: ElementRef;
+  @ViewChild('header', {static: true}) header: ElementRef;
+
+
+  constructor() {}
+
+  ngOnInit() {
+    this.header.nativeElement.style.width = SIDE_NAV_WIDTH;
+  }
+
+  open(): void {
+    this.sideNavDiv.nativeElement.style.width = SIDE_NAV_WIDTH;
+    this.overlay.nativeElement.style.visibility = 'visible';
+    this.overlay.nativeElement.style.opacity = 0.5;
+  }
+
+  close(): void {
+    this.sideNavDiv.nativeElement.style.width = '0px';
+    this.overlay.nativeElement.style.visibility = 'hidden';
+    this.overlay.nativeElement.style.opacity = 0;
+  }
+}

src/main/ts/src/app/management/app-management/app-edition/app-edition.component.html

@@ -0,0 +1,107 @@
+<!-- <form (ngSubmit)="onSubmit()" ngNativeValidate>
+  <div class="md-form">
+    <input mdbInputDirective
+        type="text"
+        id="name"
+        name="name"
+        class="form-control"
+        [(ngModel)]="model.name"
+        data-error="Veuillez saisir un nom d'application"
+        [validateSuccess]="false"
+        required >
+    <label for="email">Nom de l'application</label>
+  </div>
+
+  <button mdbBtn floating="true" type="button" color="green" class="btn-floating" (click)="addConfigurationFile()" mdbWavesEffect>
+    <i class="fa fa-plus"></i>
+  </button>
+
+  <div *ngFor="let confFile of model.configurationFileList" class="row">
+    <app-accordion [title]="confFile.htmlName">
+      <div class="md-form col-9">
+        <textarea mdbInputDirective
+            type="text"
+            [name]="confFile.htmlName"
+            class="md-textarea form-control"
+            [(ngModel)]="confFile.content"
+            data-error="Veuillez saisir le contenu du fichier de configuration."
+            [validateSuccess]="false"
+            required>
+        </textarea>
+        <label for="text">Contenu de l'article</label>
+      </div>
+      <div class="col-2">
+        <button mdbBtn floating="true" type="button" color="red" size="sm" class="btn-floating" (click)="removeConfigurationFile(confFile)" mdbWavesEffect>
+          <i class="fa fa-trash"></i>
+        </button>
+      </div>
+    </app-accordion>
+  </div>
+
+
+
+  <button mdbBtn type="submit" color="indigo" size="sm" class="rounded-pill" mdbWavesEffect>
+    <i class="fa fa-save"></i>
+  </button>
+</form> -->
+
+<div mdbModal
+    #appEditionModal="mdbModal"
+    class="modal fade"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="myModalLabel"
+    aria-hidden="true">
+
+  <div class="modal-dialog" role="document">
+    <form (ngSubmit)="onSubmit()" ngNativeValidate>
+      <!-- Application name -->
+      <div class="md-form">
+        <input mdbInputDirective
+            type="text"
+            id="name"
+            name="name"
+            class="form-control"
+            [(ngModel)]="model.name"
+            data-error="Veuillez saisir un nom d'application"
+            [validateSuccess]="false"
+            required >
+        <label for="email">Nom de l'application</label>
+      </div>
+
+      <!-- Button to add configuration file -->
+      <button mdbBtn floating="true" type="button" color="green" class="btn-floating" (click)="addConfigurationFile()" mdbWavesEffect>
+        <i class="fa fa-plus"></i>
+      </button>
+
+      <div *ngFor="let confFile of model.configurationFileList" class="row">
+        <app-accordion [title]="confFile.htmlName">
+          <div class="md-form col-9">
+            <textarea mdbInputDirective
+                type="text"
+                [name]="confFile.htmlName"
+                class="md-textarea form-control"
+                [(ngModel)]="confFile.content"
+                data-error="Veuillez saisir le contenu du fichier de configuration."
+                [validateSuccess]="false"
+                required>
+            </textarea>
+            <label for="text">Contenu de l'article</label>
+          </div>
+          <div class="col-2">
+            <button mdbBtn floating="true" type="button" color="red" size="sm" class="btn-floating" (click)="removeConfigurationFile(confFile)" mdbWavesEffect>
+              <i class="fa fa-trash"></i>
+            </button>
+          </div>
+        </app-accordion>
+      </div>
+
+
+
+      <button mdbBtn type="submit" color="indigo" size="sm" class="rounded-pill" mdbWavesEffect>
+        <i class="fa fa-save"></i>
+      </button>
+    </form>
+  </div>
+
+</div>

src/main/ts/src/app/management/app-management/app-edition/app-edition.component.scss

@@ -0,0 +1,3 @@
+app-accordion {
+  width: 100%;
+}

src/main/ts/src/app/management/app-management/app-edition/app-edition.component.ts

@@ -0,0 +1,49 @@
+import { NotificationsComponent } from 'src/app/core/notifications/notifications.component';
+import { Application, ConfigurationFile } from './../../../core/entities';
+import { ApplicationService } from './../../../core/services/application.service';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-app-edition',
+  templateUrl: './app-edition.component.html',
+  styleUrls: ['./app-edition.component.scss']
+})
+export class AppEditionComponent implements OnInit {
+  model: Application = Application.new();
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private applicationService: ApplicationService,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    const appId = this.activatedRoute.snapshot.paramMap.get('appId');
+    if (!!appId) {
+      this.applicationService.findById(appId).subscribe(application => {
+        this.model = application;
+      }, error => {
+        console.error(error);
+        NotificationsComponent.error('Une erreur est survenue lors de la récupération des données de l\'application.');
+        this.router.navigate(['/management/applications']);
+      });
+    }
+  }
+
+  onSubmit() {
+
+  }
+
+  addConfigurationFile(): void {
+    if (!!this.model.configurationFileList) {
+      this.model.configurationFileList.push(ConfigurationFile.new());
+    } else {
+      this.model.configurationFileList = [ConfigurationFile.new()];
+    }
+  }
+
+  removeConfigurationFile(confFile: ConfigurationFile): void {
+    this.model.configurationFileList = this.model.configurationFileList.filter(c => c !== confFile);
+  }
+}

src/main/ts/src/app/management/app-management/app-management.component.html

@@ -0,0 +1,27 @@
+<span *ngIf="!!loading">
+  Chargement des applications...
+</span>
+<ng-container *ngIf="!loading">
+  <div class="row">
+    <div class="app-card col-12 col-sm-6 col-lg-4" *ngFor="let app of appList">
+      <a [routerLink]="['/management/applications/' + app.id]" routerLinkActive="router-link-active">
+        <mdb-card>
+          <mdb-card-body>
+            <mdb-card-title>
+              <h4>{{app.name}}</h4>
+            </mdb-card-title>
+
+            <!--Text-->
+            <mdb-card-text>
+              Description fake.
+            </mdb-card-text>
+
+            <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
+          </mdb-card-body>
+        </mdb-card>
+      </a>
+    </div>
+  </div>
+</ng-container>
+
+<app-app-edition></app-app-edition>

src/main/ts/src/app/management/app-management/app-management.component.scss

@@ -0,0 +1,12 @@
+.row {
+  .app-card {
+    // width: 300px;
+    // margin: 25px auto;
+    margin-top: 25px;
+    margin-bottom: 25px;
+
+    &.col-12 {
+      max-width: 90%;
+    }
+  }
+}

src/main/ts/src/app/management/app-management/app-management.component.ts

@@ -0,0 +1,32 @@
+import { ApplicationService } from './../../core/services/application.service';
+import { Component, OnInit } from '@angular/core';
+import { Application } from 'src/app/core/entities';
+import { NotificationsComponent } from 'src/app/core/notifications/notifications.component';
+
+@Component({
+  selector: 'app-app-management',
+  templateUrl: './app-management.component.html',
+  styleUrls: ['./app-management.component.scss']
+})
+export class AppManagementComponent implements OnInit {
+  appList: Array<Application> = [];
+  loading: boolean;
+
+  constructor(
+    private applicationService: ApplicationService
+  ) {}
+
+  ngOnInit(): void {
+    this.loading = true;
+    this.applicationService.findAll().subscribe(appList => {
+      this.appList = appList;
+      appList.forEach(a => this.appList.push(a));
+      appList.forEach(a => this.appList.push(a));
+      appList.forEach(a => this.appList.push(a));
+      appList.forEach(a => this.appList.push(a));
+    }, error => {
+      console.error(error);
+      NotificationsComponent.error('Une erreur est survenue lors du chargement des applications.');
+    }).add(() => this.loading = false);
+  }
+}

src/main/ts/src/app/management/user-management/user-management.component.html

@@ -0,0 +1,3 @@
+<p>
+  user-management works!
+</p>

src/main/ts/src/app/management/user-management/user-management.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-user-management',
+  templateUrl: './user-management.component.html',
+  styleUrls: ['./user-management.component.scss']
+})
+export class UserManagementComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/main/ts/src/styles.scss

@@ -18,3 +18,20 @@ a, button {
 html {
 	height: 100%;
 }
+
+.btn-floating {
+  box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
+  position: relative;
+  z-index: 1;
+  vertical-align: middle;
+  display: inline-block;
+  overflow: hidden;
+  transition: all .2s ease-in-out;
+  margin: 10px;
+  border-radius: 50%;
+  padding: 0;
+  cursor: pointer;
+  width: 47px;
+  height: 47px;
+  border: 0px;
+}